From 46b7b8cfc557c2146cb233071731378bfd3dad1f Mon Sep 17 00:00:00 2001
From: Lanzhijiang <lanzhijiang@foxmail.com>
Date: Sat, 13 Jun 2026 17:29:40 +0800
Subject: [PATCH 01/94] fix(frontend): wire design-web 0.4.0 primitives

Upgrade the frontend to @partner-up-dev/design-web 0.4.0 and remove the local package-root type adapter so named imports resolve through the published package declarations.

Migrate the first feedback/layout slice to package-backed primitives and restore footer padding on the scaffold footer surface.
---
 apps/frontend/package.json                    |   2 +-
 .../src/shared/ui/feedback/EmptyState.vue     | 102 ++++--------------
 .../shared/ui/feedback/LoadingIndicator.vue   |  46 +++-----
 .../src/shared/ui/sections/PageFooter.vue     |  29 ++++-
 .../src/types/design-web-runtime.d.ts         |  12 ---
 apps/frontend/tsconfig.json                   |   3 -
 pnpm-lock.yaml                                |  10 +-
 7 files changed, 65 insertions(+), 139 deletions(-)
 delete mode 100644 apps/frontend/src/types/design-web-runtime.d.ts

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 0a3ea4795..469894a7e 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -13,7 +13,7 @@
     "lint:tokens:strict": "node ./scripts/check-token-governance.mjs --strict"
   },
   "dependencies": {
-    "@partner-up-dev/design-web": "0.2.0",
+    "@partner-up-dev/design-web": "0.4.0",
     "@tanstack/vue-query": "^5.60.0",
     "@unhead/vue": "^2.1.2",
     "@vee-validate/zod": "^4.15.1",
diff --git a/apps/frontend/src/shared/ui/feedback/EmptyState.vue b/apps/frontend/src/shared/ui/feedback/EmptyState.vue
index 587b55f65..d26a2f882 100644
--- a/apps/frontend/src/shared/ui/feedback/EmptyState.vue
+++ b/apps/frontend/src/shared/ui/feedback/EmptyState.vue
@@ -1,42 +1,33 @@
 <template>
-  <PuCard
-    :as="as"
-    tone="neutral"
-    :variant="cardVariant"
-    :padding="cardPadding"
-    :gap="compact ? 'xs' : 'sm'"
-    class="empty-state"
-    :class="`empty-state--align-${align}`"
+  <PuEmptyState
+    :as="props.as"
+    :title="props.title"
+    :description="props.description"
+    :icon="props.icon"
+    :compact="props.compact"
+    :align="props.align"
+    :surface-level="surfaceLevel"
+    :variant="variant"
   >
-    <span
-      v-if="icon"
-      class="empty-state__icon"
-      :class="icon"
-      aria-hidden="true"
-    ></span>
+    <slot />
 
-    <div class="empty-state__text">
-      <h2 class="empty-state__title">{{ title }}</h2>
-      <p v-if="description" class="empty-state__description">
-        {{ description }}
-      </p>
-      <div v-if="$slots.default" class="empty-state__body">
-        <slot />
-      </div>
-    </div>
-
-    <div v-if="$slots.actions" class="empty-state__actions">
+    <template
+      v-if="$slots.actions"
+      #actions
+    >
       <slot name="actions" />
-    </div>
-  </PuCard>
+    </template>
+  </PuEmptyState>
 </template>
 
 <script setup lang="ts">
 import { computed } from "vue";
-import { PuCard } from "@partner-up-dev/design-web";
+import { PuEmptyState } from "@partner-up-dev/design-web";
 
 type EmptyStateAlign = "start" | "center";
 type EmptyStateTone = "section" | "outline";
+type EmptyStateSurfaceLevel = "section";
+type EmptyStateVariant = "soft" | "outline";
 
 const props = withDefaults(
   defineProps<{
@@ -58,59 +49,8 @@ const props = withDefaults(
   },
 );
 
-const cardVariant = computed(() =>
+const surfaceLevel = computed<EmptyStateSurfaceLevel>(() => "section");
+const variant = computed<EmptyStateVariant>(() =>
   props.tone === "outline" ? "outline" : "soft",
 );
-const cardPadding = computed(() => (props.tone === "outline" ? "sm" : "md"));
 </script>
-
-<style lang="scss" scoped>
-.empty-state {
-  align-items: stretch;
-}
-
-.empty-state--align-center {
-  text-align: center;
-  align-items: center;
-}
-
-.empty-state--align-start {
-  text-align: left;
-  align-items: flex-start;
-}
-
-.empty-state__icon {
-  @include mx.pu-icon(large, true);
-  color: var(--sys-color-primary);
-}
-
-.empty-state__text {
-  min-width: 0;
-}
-
-.empty-state__title,
-.empty-state__description {
-  margin: 0;
-}
-
-.empty-state__title {
-  @include mx.pu-font(section);
-  color: var(--sys-color-on-surface);
-}
-
-.empty-state__description,
-.empty-state__body {
-  @include mx.pu-font(body);
-  color: var(--sys-color-on-surface-variant);
-}
-
-.empty-state__body {
-  margin-top: var(--sys-spacing-xsmall);
-}
-
-.empty-state__actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--sys-spacing-small);
-}
-</style>
diff --git a/apps/frontend/src/shared/ui/feedback/LoadingIndicator.vue b/apps/frontend/src/shared/ui/feedback/LoadingIndicator.vue
index 18418ed5d..eee8408a6 100644
--- a/apps/frontend/src/shared/ui/feedback/LoadingIndicator.vue
+++ b/apps/frontend/src/shared/ui/feedback/LoadingIndicator.vue
@@ -1,41 +1,21 @@
 <template>
-  <div class="loading-state">
-    <div class="spinner" />
-    <p>{{ message }}</p>
-  </div>
+  <PuLoadingState
+    :message="props.message"
+    :label="resolvedLabel"
+    size="lg"
+  />
 </template>
 
 <script setup lang="ts">
-defineProps<{
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+import { PuLoadingState } from "@partner-up-dev/design-web";
+
+const props = defineProps<{
   message?: string;
 }>();
-</script>
-
-<style lang="scss" scoped>
-.loading-state {
-  @include mx.flex-center;
-  flex-direction: column;
-  gap: var(--sys-spacing-medium);
-  padding: var(--sys-spacing-large);
 
-  p {
-    @include mx.pu-font(body);
-    color: var(--sys-color-on-surface-variant);
-  }
-}
+const { t } = useI18n();
 
-.spinner {
-  width: 40px;
-  height: 40px;
-  border: 3px solid var(--sys-color-surface-container);
-  border-top-color: var(--sys-color-primary);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-</style>
+const resolvedLabel = computed(() => props.message ?? t("common.loading"));
+</script>
diff --git a/apps/frontend/src/shared/ui/sections/PageFooter.vue b/apps/frontend/src/shared/ui/sections/PageFooter.vue
index f5cdea54b..fba890b55 100644
--- a/apps/frontend/src/shared/ui/sections/PageFooter.vue
+++ b/apps/frontend/src/shared/ui/sections/PageFooter.vue
@@ -127,6 +127,9 @@ const visibleFooterLinks = computed(() =>
 .page-footer--minimal {
   margin-top: var(--sys-spacing-large);
   padding-top: var(--sys-spacing-small);
+  padding-right: calc(var(--sys-spacing-medium) + var(--pu-safe-right));
+  padding-bottom: var(--sys-spacing-medium);
+  padding-left: calc(var(--sys-spacing-medium) + var(--pu-safe-left));
   border-top: 1px solid var(--sys-color-outline-variant);
 
   .page-footer__nav {
@@ -150,11 +153,29 @@ const visibleFooterLinks = computed(() =>
   flex-direction: column;
   justify-content: flex-start;
   gap: var(--page-footer-gap);
-  padding-top: var(--page-footer-padding-top, 0);
-  padding-left: var(--page-footer-padding-inline-start, 0);
-  padding-right: var(--page-footer-padding-inline-end, 0);
+  padding-top: var(
+    --page-footer-padding-top,
+    var(--landing-section-padding-block, var(--sys-spacing-large))
+  );
+  padding-left: var(
+    --page-footer-padding-inline-start,
+    calc(
+      var(--landing-section-padding-inline-compact, var(--sys-spacing-medium)) +
+        var(--pu-safe-left)
+    )
+  );
+  padding-right: var(
+    --page-footer-padding-inline-end,
+    calc(
+      var(--landing-section-padding-inline-compact, var(--sys-spacing-medium)) +
+        var(--pu-safe-right)
+    )
+  );
   padding-bottom: calc(
-    var(--landing-section-padding-block) + var(--pu-safe-bottom)
+    var(
+        --page-footer-padding-bottom,
+        var(--landing-section-padding-block, var(--sys-spacing-large))
+      ) + var(--pu-safe-bottom)
   );
   animation-delay: 260ms;
   background-color: var(--sys-color-surface-container);
diff --git a/apps/frontend/src/types/design-web-runtime.d.ts b/apps/frontend/src/types/design-web-runtime.d.ts
deleted file mode 100644
index 5090eaaf4..000000000
--- a/apps/frontend/src/types/design-web-runtime.d.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import type { DefineComponent } from "vue";
-
-type DesignWebComponent = DefineComponent<
-  Record<string, unknown>,
-  Record<string, never>,
-  unknown
->;
-
-export const PuCard: DesignWebComponent;
-export const PuButton: DesignWebComponent;
-export const PuInlineNotice: DesignWebComponent;
-export const PuPageScaffold: DesignWebComponent;
diff --git a/apps/frontend/tsconfig.json b/apps/frontend/tsconfig.json
index ac48c5e98..fd9a45e43 100644
--- a/apps/frontend/tsconfig.json
+++ b/apps/frontend/tsconfig.json
@@ -22,9 +22,6 @@
       "@/*": [
         "./src/*"
       ],
-      "@partner-up-dev/design-web": [
-        "./src/types/design-web-runtime.d.ts"
-      ],
       "@partner-up-dev/backend": [
         "../backend/src/index.ts"
       ]
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 664da7a08..133437e2a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -122,8 +122,8 @@ importers:
   apps/frontend:
     dependencies:
       '@partner-up-dev/design-web':
-        specifier: 0.2.0
-        version: 0.2.0(sass@1.97.3)(unocss@66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)))(vue@3.5.35(typescript@6.0.3))
+        specifier: 0.4.0
+        version: 0.4.0(sass@1.97.3)(unocss@66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)))(vue@3.5.35(typescript@6.0.3))
       '@tanstack/vue-query':
         specifier: ^5.60.0
         version: 5.92.9(vue@3.5.35(typescript@6.0.3))
@@ -1187,8 +1187,8 @@ packages:
     resolution: {integrity: sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==}
     engines: {node: '>= 10.0.0'}
 
-  '@partner-up-dev/design-web@0.2.0':
-    resolution: {integrity: sha512-nBHED6bde25iMIdedtpSgvz/XWSYEAq0YnRJw/ftpsE2EzzMgDWTLjDZ8JW2XiXYHqOdn8T9CK1biefrFENu6w==, tarball: https://npm.pkg.github.com/download/@partner-up-dev/design-web/0.2.0/a701a8a93ded45b19b50af8bbfe0fb876e387868}
+  '@partner-up-dev/design-web@0.4.0':
+    resolution: {integrity: sha512-LS1Sx+SmpecJQZaFTbuKOJc3rMU5TFCrk4oF4o5a/WvoWAV0VNhsmUr8OLid82Zg3nlAEKDaduUhI9cA+6IorA==, tarball: https://npm.pkg.github.com/download/@partner-up-dev/design-web/0.4.0/84e662924ef8d06aab22ad3ffd865ac9c0f5f99b}
     peerDependencies:
       sass: ^1.94.2
       unocss: ^66.6.8
@@ -3379,7 +3379,7 @@ snapshots:
       '@parcel/watcher-win32-x64': 2.5.6
     optional: true
 
-  '@partner-up-dev/design-web@0.2.0(sass@1.97.3)(unocss@66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)))(vue@3.5.35(typescript@6.0.3))':
+  '@partner-up-dev/design-web@0.4.0(sass@1.97.3)(unocss@66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)))(vue@3.5.35(typescript@6.0.3))':
     dependencies:
       sass: 1.97.3
       unocss: 66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0))

From 43d8c8bedc2a540dfaf4818009e77c4590ea2587 Mon Sep 17 00:00:00 2001
From: Lanzhijiang <lanzhijiang@foxmail.com>
Date: Sat, 13 Jun 2026 20:19:09 +0800
Subject: [PATCH 02/94] refactor(frontend): migrate design-web component slice

---
 .../ui/json-logic/JsonLogicRuleEditor.vue     |  41 +-
 .../ui/pricing-rules/PricingRulesEditor.vue   |   4 +-
 .../AdminCommerceCancellationPolicyEditor.vue |   4 +-
 .../AdminCommerceProductWorkspaceGate.vue     |   4 +-
 .../sections/AdminCommerceSpuEditor.vue       |   8 +-
 .../AnchorEventLandingRolloutEditor.vue       |   4 +-
 .../AnchorEventPendingPreferenceTagList.vue   |   4 +-
 .../components/AnchorEventPlacePoolEditor.vue |  42 +-
 .../AnchorEventPreferenceTagPoolEditor.vue    |   4 +-
 .../sections/AnchorEventOtherSection.vue      |  14 +-
 .../AnchorEventRouteApplicationsSection.vue   |  16 +-
 .../admin/ui/layout/AdminPageScaffold.vue     |   6 +-
 .../ui/poi/sections/PoiReviewSection.vue      |  15 +-
 .../admin/ui/pr/views/AdminPRBasicView.vue    |   4 +-
 .../admin/ui/pr/views/AdminPRMessagesView.vue |   4 +-
 .../ui/ordering/OrderingPageShell.vue         |   6 +-
 .../ui/ordering/RentalOrderingForm.vue        |  10 +-
 .../form-mode/FormModePreferenceControl.vue   |   4 +-
 .../form-mode/FormModeTimeControl.vue         |   6 +-
 .../ui/primitives/AnchorEventDemandCard.vue   |  28 +-
 .../domains/event/ui/primitives/EventCard.vue |  88 +-
 .../landing/EventHighlightsSection.vue        |  19 +-
 .../surfaces/AnchorEventFormModeSurface.vue   |   4 +-
 .../feedback/ui/FeedbackQuestionnaireForm.vue |  17 +-
 .../location/ui/LocationPickerPanel.vue       |   6 +-
 .../domains/pr/ui/composites/PRFactsCard.vue  | 455 ++++++----
 .../src/domains/pr/ui/forms/NLPRForm.vue      |  15 +-
 .../src/domains/pr/ui/forms/PREditor.vue      |   8 +-
 .../domains/pr/ui/forms/PRPlaceModeField.vue  |  41 +-
 .../pr/ui/primitives/PRPreviewCardFrame.vue   |  11 +-
 .../pr/ui/sections/PRDraftPublishNotice.vue   |   6 +-
 .../domains/pr/ui/sections/PRJoinAction.vue   |   6 +-
 .../pr/ui/sections/PRMessageThread.vue        |  30 +-
 .../pr/ui/sections/PRPartnerSection.vue       |  10 +-
 .../pr/ui/sections/PRWaitlistActions.vue      |   6 +-
 .../ui/methods/xhs/ShareToXiaohongshu.vue     |   3 +-
 apps/frontend/src/pages/AboutPage.vue         |   6 +-
 .../frontend/src/pages/AdminAnalyticsPage.vue |  38 +-
 .../src/pages/AdminAnchorEventPage.vue        |   4 +-
 .../pages/AdminCommerceFulfillmentPage.vue    |  13 +-
 .../src/pages/AdminCommerceOfferPage.vue      |   4 +-
 .../src/pages/AdminCommerceOrderBillPage.vue  |   7 +-
 .../src/pages/AdminCommercePlacementPage.vue  |   4 +-
 .../pages/AdminFeedbackQuestionnairesPage.vue |   4 +-
 apps/frontend/src/pages/AdminLoginPage.vue    |   8 +-
 apps/frontend/src/pages/AdminPaymentPage.vue  |   6 +-
 apps/frontend/src/pages/AdminPoisPage.vue     |   4 +-
 .../src/pages/AdminRideHailingPage.vue        |   4 +-
 .../src/pages/AnchorEventLandingPage.vue      |  51 +-
 apps/frontend/src/pages/BIEntryPage.vue       |   9 +-
 .../src/pages/CommerceBillDetailPage.vue      |  14 +-
 .../src/pages/CommerceOrderDetailPage.vue     |  20 +-
 apps/frontend/src/pages/ContactAuthorPage.vue |   9 +-
 .../frontend/src/pages/ContactSupportPage.vue |  17 +-
 apps/frontend/src/pages/EventPRSearchPage.vue |  23 +-
 apps/frontend/src/pages/EventPlazaPage.vue    |  14 +-
 .../src/pages/LocationApplicationPage.vue     |  35 +-
 .../frontend/src/pages/LocationPickerPage.vue |   6 +-
 apps/frontend/src/pages/MePage.vue            |  53 +-
 apps/frontend/src/pages/MyPRsPage.vue         |  11 +-
 .../src/pages/OrderingFromPlacementPage.vue   |   6 +-
 apps/frontend/src/pages/PRCreatePage.vue      |   6 +-
 apps/frontend/src/pages/PRMessagesPage.vue    |   6 +-
 apps/frontend/src/pages/PRPage.vue            |  12 +-
 apps/frontend/src/pages/PRPairingCodePage.vue |   4 +-
 .../src/pages/PaymentCheckoutPage.vue         |  22 +-
 .../src/pages/RouteApplicationPage.vue        |  35 +-
 .../src/pages/StudySprintPomodoroPage.vue     |  13 +-
 apps/frontend/src/pages/UserProfilePage.vue   |  32 +-
 .../src/pages/WeChatOAuthCallbackPage.vue     |  10 +-
 apps/frontend/src/shared/ui/AGENTS.md         |  24 +-
 .../shared/ui/controls/SegmentedControl.vue   | 159 ----
 apps/frontend/src/shared/ui/display/Cell.vue  | 150 ----
 apps/frontend/src/shared/ui/display/Chip.vue  |  96 ---
 .../src/shared/ui/display/ChipGroup.vue       |  58 --
 .../src/shared/ui/display/FitChipGroup.vue    | 226 -----
 .../src/shared/ui/display/InfoRow.vue         |  94 ---
 .../src/shared/ui/display/InfoRowAction.vue   | 128 ---
 .../src/shared/ui/feedback/EmptyState.vue     |  56 --
 .../src/shared/ui/feedback/InlineNotice.vue   |  45 -
 .../shared/ui/feedback/LoadingIndicator.vue   |  21 -
 .../src/shared/ui/forms/FormField.vue         |  86 --
 .../src/shared/ui/forms/TextInput.vue         |  89 --
 .../src/shared/ui/forms/TextareaInput.vue     | 111 ---
 .../src/shared/ui/forms/ToggleSwitch.vue      | 125 ---
 .../src/shared/ui/forms/WheelPicker.vue       | 791 ------------------
 .../src/shared/ui/identity/Avatar.vue         | 155 ----
 .../shared/ui/layout/DesktopPageScaffold.vue  |  27 -
 .../ui/layout/FooterRevealPageScaffold.vue    |  35 -
 .../ui/layout/FullScreenPageScaffold.vue      |  23 -
 .../src/shared/ui/layout/PageScaffold.vue     |   9 -
 .../shared/ui/layout/PageScaffoldCentered.vue |  24 -
 .../src/shared/ui/layout/PageScaffoldFlow.vue |  24 -
 .../src/shared/upload/ImageUrlInput.vue       |   6 +-
 .../component-migration/00-control-surface.md | 195 +++++
 .../component-migration/10-slice-index.md     |  94 +++
 .../component-migration/90-discussion-log.md  | 172 ++++
 .../components/00-type-entry.md               |  59 ++
 .../components/_template.md                   |  38 +
 .../components/action-link.md                 |  33 +
 .../component-migration/components/avatar.md  |  39 +
 .../components/bottom-drawer.md               |  33 +
 .../component-migration/components/button.md  |  56 ++
 .../component-migration/components/cell.md    |  37 +
 .../components/chip-group.md                  |  47 ++
 .../component-migration/components/chip.md    |  51 ++
 .../components/choice-card.md                 |  32 +
 .../components/confirm-dialog.md              |  32 +
 .../components/empty-state.md                 |  53 ++
 .../components/error-toast.md                 |  31 +
 .../components/feedback-button.md             |  30 +
 .../components/form-field.md                  |  47 ++
 .../component-migration/components/form.md    |  50 ++
 .../component-migration/components/img.md     |  64 ++
 .../components/info-row.md                    |  48 ++
 .../components/inline-notice.md               |  50 ++
 .../components/loading-indicator.md           |  53 ++
 .../component-migration/components/modal.md   |  35 +
 .../components/page-footer.md                 |  47 ++
 .../components/page-scaffold.md               |  56 ++
 .../components/segmented-control.md           |  48 ++
 .../component-migration/components/tag.md     |  46 +
 .../components/text-input.md                  |  42 +
 .../components/textarea-input.md              |  44 +
 .../components/toggle-switch.md               |  38 +
 .../components/wheel-picker.md                |  44 +
 .../component-migration/evidence/README.md    | 109 +++
 .../evidence/home-040-mobile.png              | Bin 0 -> 127252 bytes
 .../evidence/home-footer-mobile.png           | Bin 0 -> 135124 bytes
 .../evidence/pr-040-mobile.png                | Bin 0 -> 6188 bytes
 .../evidence/pr-footer-mobile.png             | Bin 0 -> 8160 bytes
 131 files changed, 2686 insertions(+), 3192 deletions(-)
 delete mode 100644 apps/frontend/src/shared/ui/controls/SegmentedControl.vue
 delete mode 100644 apps/frontend/src/shared/ui/display/Cell.vue
 delete mode 100644 apps/frontend/src/shared/ui/display/Chip.vue
 delete mode 100644 apps/frontend/src/shared/ui/display/ChipGroup.vue
 delete mode 100644 apps/frontend/src/shared/ui/display/FitChipGroup.vue
 delete mode 100644 apps/frontend/src/shared/ui/display/InfoRow.vue
 delete mode 100644 apps/frontend/src/shared/ui/display/InfoRowAction.vue
 delete mode 100644 apps/frontend/src/shared/ui/feedback/EmptyState.vue
 delete mode 100644 apps/frontend/src/shared/ui/feedback/InlineNotice.vue
 delete mode 100644 apps/frontend/src/shared/ui/feedback/LoadingIndicator.vue
 delete mode 100644 apps/frontend/src/shared/ui/forms/FormField.vue
 delete mode 100644 apps/frontend/src/shared/ui/forms/TextInput.vue
 delete mode 100644 apps/frontend/src/shared/ui/forms/TextareaInput.vue
 delete mode 100644 apps/frontend/src/shared/ui/forms/ToggleSwitch.vue
 delete mode 100644 apps/frontend/src/shared/ui/forms/WheelPicker.vue
 delete mode 100644 apps/frontend/src/shared/ui/identity/Avatar.vue
 delete mode 100644 apps/frontend/src/shared/ui/layout/DesktopPageScaffold.vue
 delete mode 100644 apps/frontend/src/shared/ui/layout/FooterRevealPageScaffold.vue
 delete mode 100644 apps/frontend/src/shared/ui/layout/FullScreenPageScaffold.vue
 delete mode 100644 apps/frontend/src/shared/ui/layout/PageScaffold.vue
 delete mode 100644 apps/frontend/src/shared/ui/layout/PageScaffoldCentered.vue
 delete mode 100644 apps/frontend/src/shared/ui/layout/PageScaffoldFlow.vue
 create mode 100644 tasks/design-web-package-integration/component-migration/00-control-surface.md
 create mode 100644 tasks/design-web-package-integration/component-migration/10-slice-index.md
 create mode 100644 tasks/design-web-package-integration/component-migration/90-discussion-log.md
 create mode 100644 tasks/design-web-package-integration/component-migration/components/00-type-entry.md
 create mode 100644 tasks/design-web-package-integration/component-migration/components/_template.md
 create mode 100644 tasks/design-web-package-integration/component-migration/components/action-link.md
 create mode 100644 tasks/design-web-package-integration/component-migration/components/avatar.md
 create mode 100644 tasks/design-web-package-integration/component-migration/components/bottom-drawer.md
 create mode 100644 tasks/design-web-package-integration/component-migration/components/button.md
 create mode 100644 tasks/design-web-package-integration/component-migration/components/cell.md
 create mode 100644 tasks/design-web-package-integration/component-migration/components/chip-group.md
 create mode 100644 tasks/design-web-package-integration/component-migration/components/chip.md
 create mode 100644 tasks/design-web-package-integration/component-migration/components/choice-card.md
 create mode 100644 tasks/design-web-package-integration/component-migration/components/confirm-dialog.md
 create mode 100644 tasks/design-web-package-integration/component-migration/components/empty-state.md
 create mode 100644 tasks/design-web-package-integration/component-migration/components/error-toast.md
 create mode 100644 tasks/design-web-package-integration/component-migration/components/feedback-button.md
 create mode 100644 tasks/design-web-package-integration/component-migration/components/form-field.md
 create mode 100644 tasks/design-web-package-integration/component-migration/components/form.md
 create mode 100644 tasks/design-web-package-integration/component-migration/components/img.md
 create mode 100644 tasks/design-web-package-integration/component-migration/components/info-row.md
 create mode 100644 tasks/design-web-package-integration/component-migration/components/inline-notice.md
 create mode 100644 tasks/design-web-package-integration/component-migration/components/loading-indicator.md
 create mode 100644 tasks/design-web-package-integration/component-migration/components/modal.md
 create mode 100644 tasks/design-web-package-integration/component-migration/components/page-footer.md
 create mode 100644 tasks/design-web-package-integration/component-migration/components/page-scaffold.md
 create mode 100644 tasks/design-web-package-integration/component-migration/components/segmented-control.md
 create mode 100644 tasks/design-web-package-integration/component-migration/components/tag.md
 create mode 100644 tasks/design-web-package-integration/component-migration/components/text-input.md
 create mode 100644 tasks/design-web-package-integration/component-migration/components/textarea-input.md
 create mode 100644 tasks/design-web-package-integration/component-migration/components/toggle-switch.md
 create mode 100644 tasks/design-web-package-integration/component-migration/components/wheel-picker.md
 create mode 100644 tasks/design-web-package-integration/component-migration/evidence/README.md
 create mode 100644 tasks/design-web-package-integration/component-migration/evidence/home-040-mobile.png
 create mode 100644 tasks/design-web-package-integration/component-migration/evidence/home-footer-mobile.png
 create mode 100644 tasks/design-web-package-integration/component-migration/evidence/pr-040-mobile.png
 create mode 100644 tasks/design-web-package-integration/component-migration/evidence/pr-footer-mobile.png

diff --git a/apps/frontend/src/domains/admin-commerce/ui/json-logic/JsonLogicRuleEditor.vue b/apps/frontend/src/domains/admin-commerce/ui/json-logic/JsonLogicRuleEditor.vue
index 02f81242f..3aa0643d4 100644
--- a/apps/frontend/src/domains/admin-commerce/ui/json-logic/JsonLogicRuleEditor.vue
+++ b/apps/frontend/src/domains/admin-commerce/ui/json-logic/JsonLogicRuleEditor.vue
@@ -5,14 +5,26 @@
       <p v-if="description" class="pm-hint">{{ description }}</p>
     </div>
 
-    <SegmentedControl
+    <PuSegmented
       :model-value="rule.mode"
-      :options="modeOptions"
       :aria-label="t('adminCommerceJsonLogic.modeAria')"
       size="sm"
-      block
+      full-width
+      equal-width
       @update:model-value="updateMode"
-    />
+    >
+      <PuSegmentedItem
+        v-for="option in modeOptions"
+        :key="String(option.value)"
+        :value="option.value"
+        :label="option.label"
+        :disabled="option.disabled"
+      >
+        <template v-if="option.icon" #leading>
+          <span :class="option.icon" aria-hidden="true" />
+        </template>
+      </PuSegmentedItem>
+    </PuSegmented>
 
     <p v-if="rule.mode === 'PRESERVE_CUSTOM'" class="pm-hint">
       {{ t("adminCommerceJsonLogic.customPreservedHint") }}
@@ -25,7 +37,6 @@
       <textarea
         v-model="rule.customRuleText"
         class="pm-field-input jl-custom-rule-textarea"
-        rows="8"
         spellcheck="false"
       ></textarea>
     </label>
@@ -136,6 +147,11 @@
 <script setup lang="ts">
 import { computed, watch } from "vue";
 import { useI18n } from "vue-i18n";
+import {
+  PuSegmented,
+  PuSegmentedItem,
+  type PuSegmentedValue,
+} from "@partner-up-dev/design-web";
 import {
   createCustomJsonLogicField,
   createJsonLogicConditionDraft,
@@ -151,12 +167,15 @@ import {
   type JsonLogicRuleMode,
 } from "@/domains/admin-commerce/model/json-logic/jsonLogicRuleEditorModel";
 import Button from "@/shared/ui/actions/Button.vue";
-import SegmentedControl, {
-  type SegmentedControlOption,
-  type SegmentedControlValue,
-} from "@/shared/ui/controls/SegmentedControl.vue";
 import "@/domains/admin-commerce/ui/product-management/product-management.scss";
 
+type SegmentedOption = {
+  value: PuSegmentedValue;
+  label: string;
+  icon?: string;
+  disabled?: boolean;
+};
+
 const props = withDefaults(
   defineProps<{
     fields: readonly JsonLogicFieldOption[];
@@ -174,7 +193,7 @@ const props = withDefaults(
 const rule = defineModel<JsonLogicRuleDraft>({ required: true });
 const { t } = useI18n();
 
-const modeOptions = computed<SegmentedControlOption[]>(() => [
+const modeOptions = computed<SegmentedOption[]>(() => [
   {
     value: "ALWAYS",
     label: t("adminCommerceJsonLogic.modeAlways"),
@@ -197,7 +216,7 @@ const modeOptions = computed<SegmentedControlOption[]>(() => [
   },
 ]);
 
-const updateMode = (value: SegmentedControlValue) => {
+const updateMode = (value: PuSegmentedValue) => {
   rule.value = {
     ...rule.value,
     mode: value as JsonLogicRuleMode,
diff --git a/apps/frontend/src/domains/admin-commerce/ui/pricing-rules/PricingRulesEditor.vue b/apps/frontend/src/domains/admin-commerce/ui/pricing-rules/PricingRulesEditor.vue
index a5f6fe15d..005353190 100644
--- a/apps/frontend/src/domains/admin-commerce/ui/pricing-rules/PricingRulesEditor.vue
+++ b/apps/frontend/src/domains/admin-commerce/ui/pricing-rules/PricingRulesEditor.vue
@@ -90,7 +90,7 @@
           <span class="pm-field-label">{{ t("adminCommerceProducts.targetIdLabel") }}</span>
           <input v-model="rule.targetIdText" class="pm-field-input" type="text" />
         </label>
-        <ToggleSwitch
+        <PuToggleSwitch
           v-model="rule.continue"
           :label="t('adminCommerceProducts.continueRuleLabel')"
         />
@@ -107,8 +107,8 @@ import {
 } from "@/domains/admin-commerce/model/pricing-rules/pricingRuleEditorModel";
 import PricingConditionRuleEditor from "@/domains/admin-commerce/ui/pricing-rules/PricingConditionRuleEditor.vue";
 import Button from "@/shared/ui/actions/Button.vue";
-import ToggleSwitch from "@/shared/ui/forms/ToggleSwitch.vue";
 import "@/domains/admin-commerce/ui/product-management/product-management.scss";
+import { PuToggleSwitch } from "@partner-up-dev/design-web";
 
 defineProps<{
   title: string;
diff --git a/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceCancellationPolicyEditor.vue b/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceCancellationPolicyEditor.vue
index 0b74247b3..8af93a6b9 100644
--- a/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceCancellationPolicyEditor.vue
+++ b/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceCancellationPolicyEditor.vue
@@ -65,7 +65,7 @@
             <span class="pm-field-label">{{ t("adminCommerceProducts.refundPercentLabel") }}</span>
             <input v-model.number="tier.refundPercent" class="pm-field-input" type="number" min="0" max="100" />
           </label>
-          <ToggleSwitch
+          <PuToggleSwitch
             v-model="tier.requiresOperatorHandling"
             :label="t('adminCommerceProducts.requiresOperatorHandlingLabel')"
           />
@@ -95,8 +95,8 @@ import {
 import { useSaveAdminSkuCancellationPolicy } from "@/domains/admin-commerce/queries/useAdminCommerce";
 import { useAdminCommerceProductManagementContext } from "@/domains/admin-commerce/ui/product-management/productManagementContext";
 import Button from "@/shared/ui/actions/Button.vue";
-import ToggleSwitch from "@/shared/ui/forms/ToggleSwitch.vue";
 import "@/domains/admin-commerce/ui/product-management/product-management.scss";
+import { PuToggleSwitch } from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const context = useAdminCommerceProductManagementContext();
diff --git a/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceProductWorkspaceGate.vue b/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceProductWorkspaceGate.vue
index 1d4d9ce96..7869116a6 100644
--- a/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceProductWorkspaceGate.vue
+++ b/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceProductWorkspaceGate.vue
@@ -1,5 +1,5 @@
 <template>
-  <LoadingIndicator v-if="isLoading" :message="t('common.loading')" />
+  <PuLoadingState v-if="isLoading" :message="t('common.loading')" />
   <ErrorToast v-else-if="errorMessage" :message="errorMessage" persistent />
   <slot v-else />
 </template>
@@ -9,7 +9,7 @@ import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { useAdminCommerceProductManagementContext } from "@/domains/admin-commerce/ui/product-management/productManagementContext";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import LoadingIndicator from "@/shared/ui/feedback/LoadingIndicator.vue";
+import { PuLoadingState } from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const context = useAdminCommerceProductManagementContext();
diff --git a/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceSpuEditor.vue b/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceSpuEditor.vue
index dbbc87d35..3400dbaf8 100644
--- a/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceSpuEditor.vue
+++ b/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceSpuEditor.vue
@@ -94,15 +94,15 @@
           />
         </label>
         <div class="pm-toggle-grid pm-field--full">
-          <ToggleSwitch
+          <PuToggleSwitch
             v-model="spuForm.rentalRequiresContactPhone"
             :label="t('adminCommerceProducts.requiresContactPhoneLabel')"
           />
-          <ToggleSwitch
+          <PuToggleSwitch
             v-model="spuForm.rentalRequiresRealName"
             :label="t('adminCommerceProducts.requiresRealNameLabel')"
           />
-          <ToggleSwitch
+          <PuToggleSwitch
             v-model="spuForm.rentalRequiresNationalId"
             :label="t('adminCommerceProducts.requiresNationalIdLabel')"
           />
@@ -285,8 +285,8 @@ import { useAdminCommerceProductManagementContext } from "@/domains/admin-commer
 import FactEntryEditor from "@/domains/admin-commerce/ui/product-management/composites/FactEntryEditor.vue";
 import StringListEditor from "@/domains/admin-commerce/ui/product-management/composites/StringListEditor.vue";
 import Button from "@/shared/ui/actions/Button.vue";
-import ToggleSwitch from "@/shared/ui/forms/ToggleSwitch.vue";
 import "@/domains/admin-commerce/ui/product-management/product-management.scss";
+import { PuToggleSwitch } from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const context = useAdminCommerceProductManagementContext();
diff --git a/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventLandingRolloutEditor.vue b/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventLandingRolloutEditor.vue
index f058b14e2..8219408f6 100644
--- a/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventLandingRolloutEditor.vue
+++ b/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventLandingRolloutEditor.vue
@@ -6,7 +6,7 @@
       {{ t("adminAnchorEvents.selectEventForLandingConfigHint") }}
     </div>
 
-    <LoadingIndicator
+    <PuLoadingState
       v-else-if="landingConfigQuery.isLoading.value"
       :message="t('common.loading')"
     />
@@ -80,7 +80,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
-import LoadingIndicator from "@/shared/ui/feedback/LoadingIndicator.vue";
+import { PuLoadingState } from "@partner-up-dev/design-web";
 import {
   useAdminAnchorEventLandingConfig,
   useReplaceAdminAnchorEventLandingConfig,
diff --git a/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventPendingPreferenceTagList.vue b/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventPendingPreferenceTagList.vue
index 7101e9237..7db90cf09 100644
--- a/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventPendingPreferenceTagList.vue
+++ b/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventPendingPreferenceTagList.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="anchor-event-pending-preference-tag-list">
-    <LoadingIndicator
+    <PuLoadingState
       v-if="preferenceTagsQuery.isLoading.value"
       :message="t('common.loading')"
     />
@@ -61,7 +61,7 @@
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 import Button from "@/shared/ui/actions/Button.vue";
-import LoadingIndicator from "@/shared/ui/feedback/LoadingIndicator.vue";
+import { PuLoadingState } from "@partner-up-dev/design-web";
 import {
   useAdminAnchorEventPreferenceTags,
   usePublishAdminAnchorEventPreferenceTag,
diff --git a/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventPlacePoolEditor.vue b/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventPlacePoolEditor.vue
index 0770091d5..333864fac 100644
--- a/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventPlacePoolEditor.vue
+++ b/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventPlacePoolEditor.vue
@@ -1,13 +1,26 @@
 <template>
   <div class="anchor-event-place-pool-editor">
-    <SegmentedControl
+    <PuSegmented
       :model-value="form.placePoolMode"
-      :options="placePoolModeOptions"
       :aria-label="t('adminPR.eventPlacePoolModeAria')"
       data-testid="admin-anchor-event.place-pool.mode"
-      block
+      full-width
+      equal-width
       @update:model-value="handleModeChange"
-    />
+    >
+      <PuSegmentedItem
+        v-for="option in placePoolModeOptions"
+        :key="String(option.value)"
+        :value="option.value"
+        :label="option.label"
+        :disabled="option.disabled"
+        :data-testid="option.testId"
+      >
+        <template v-if="option.icon" #leading>
+          <span :class="option.icon" aria-hidden="true" />
+        </template>
+      </PuSegmentedItem>
+    </PuSegmented>
 
     <AnchorEventLocationPoolEditor
       v-if="form.placePoolMode === 'location'"
@@ -24,18 +37,27 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
-import SegmentedControl, {
-  type SegmentedControlOption,
-  type SegmentedControlValue,
-} from "@/shared/ui/controls/SegmentedControl.vue";
+import {
+  PuSegmented,
+  PuSegmentedItem,
+  type PuSegmentedValue,
+} from "@partner-up-dev/design-web";
 import type { AnchorEventEditorForm } from "@/domains/admin/ui/anchor-event/anchorEventEditorTypes";
 import AnchorEventLocationPoolEditor from "@/domains/admin/ui/anchor-event/components/AnchorEventLocationPoolEditor.vue";
 import AnchorEventRoutePoolEditor from "@/domains/admin/ui/anchor-event/components/AnchorEventRoutePoolEditor.vue";
 
+type SegmentedOption = {
+  value: PuSegmentedValue;
+  label: string;
+  icon?: string;
+  testId?: string;
+  disabled?: boolean;
+};
+
 const form = defineModel<AnchorEventEditorForm>({ required: true });
 const { t } = useI18n();
 
-const placePoolModeOptions = computed<SegmentedControlOption[]>(() => [
+const placePoolModeOptions = computed<SegmentedOption[]>(() => [
   {
     value: "location",
     label: t("adminPR.eventPlacePoolModeLocation"),
@@ -50,7 +72,7 @@ const placePoolModeOptions = computed<SegmentedControlOption[]>(() => [
   },
 ]);
 
-const handleModeChange = (value: SegmentedControlValue): void => {
+const handleModeChange = (value: PuSegmentedValue): void => {
   if (value !== "location" && value !== "route") {
     return;
   }
diff --git a/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventPreferenceTagPoolEditor.vue b/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventPreferenceTagPoolEditor.vue
index 49af254e0..0cde84f9f 100644
--- a/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventPreferenceTagPoolEditor.vue
+++ b/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventPreferenceTagPoolEditor.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="preference-tag-pool-editor">
-    <LoadingIndicator
+    <PuLoadingState
       v-if="preferenceTagsQuery.isLoading.value"
       :message="t('common.loading')"
     />
@@ -51,7 +51,7 @@
 import { computed, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import Button from "@/shared/ui/actions/Button.vue";
-import LoadingIndicator from "@/shared/ui/feedback/LoadingIndicator.vue";
+import { PuLoadingState } from "@partner-up-dev/design-web";
 import {
   useAdminAnchorEventPreferenceTags,
   useReplaceAdminAnchorEventPreferenceTags,
diff --git a/apps/frontend/src/domains/admin/ui/anchor-event/sections/AnchorEventOtherSection.vue b/apps/frontend/src/domains/admin/ui/anchor-event/sections/AnchorEventOtherSection.vue
index 6e2619d03..bcf970bb9 100644
--- a/apps/frontend/src/domains/admin/ui/anchor-event/sections/AnchorEventOtherSection.vue
+++ b/apps/frontend/src/domains/admin/ui/anchor-event/sections/AnchorEventOtherSection.vue
@@ -29,17 +29,15 @@
       </BentoItem>
 
       <BentoItem :title="t('adminAnchorEvents.defaultPrNotesTitle')">
-        <TextareaInput
+        <PuTextarea
           v-model="form.defaultPrNotes"
           :placeholder="t('adminAnchorEvents.defaultPrNotesPlaceholder')"
-          :rows="4"
-          min-height="8rem"
         />
       </BentoItem>
 
       <BentoItem :title="t('adminAnchorEvents.participationFrequencyLimitTitle')">
         <div class="policy-setting">
-          <TextInput
+          <PuInput
             v-model="participationFrequencyLimitText"
             type="number"
             inputmode="numeric"
@@ -57,7 +55,7 @@
 
       <BentoItem :title="t('adminAnchorEvents.prCreationPolicyTitle')">
         <div class="policy-setting">
-          <ToggleSwitch
+          <PuToggleSwitch
             v-model="adminOnlyCreation"
             :label="t('adminAnchorEvents.prCreationPolicyAdminOnlyLabel')"
             :disabled="props.disabled"
@@ -70,7 +68,7 @@
 
       <BentoItem :title="t('adminAnchorEvents.fullPrExpansionPolicyTitle')">
         <div class="policy-setting">
-          <ToggleSwitch
+          <PuToggleSwitch
             v-model="fullPrExpansionEnabled"
             :label="t('adminAnchorEvents.fullPrExpansionPolicyEnabledLabel')"
             :disabled="props.disabled"
@@ -111,12 +109,10 @@ import { useI18n } from "vue-i18n";
 import Button from "@/shared/ui/actions/Button.vue";
 import BentoItem from "@/domains/admin/ui/layout/BentoItem.vue";
 import BentoLayout from "@/domains/admin/ui/layout/BentoLayout.vue";
-import TextInput from "@/shared/ui/forms/TextInput.vue";
-import TextareaInput from "@/shared/ui/forms/TextareaInput.vue";
-import ToggleSwitch from "@/shared/ui/forms/ToggleSwitch.vue";
 import AnchorEventFeedbackQuestionnairePicker from "@/domains/admin/ui/anchor-event/components/AnchorEventFeedbackQuestionnairePicker.vue";
 import AnchorEventJoinGateEditor from "@/domains/admin/ui/anchor-event/components/AnchorEventJoinGateEditor.vue";
 import AnchorEventLandingRolloutEditor from "@/domains/admin/ui/anchor-event/components/AnchorEventLandingRolloutEditor.vue";
+import { PuInput, PuTextarea, PuToggleSwitch } from "@partner-up-dev/design-web";
 import type {
   AnchorEventEditorForm,
   FeedbackQuestionnaireTemplateOption,
diff --git a/apps/frontend/src/domains/admin/ui/anchor-event/sections/AnchorEventRouteApplicationsSection.vue b/apps/frontend/src/domains/admin/ui/anchor-event/sections/AnchorEventRouteApplicationsSection.vue
index 2be6f42e9..8a683ea0b 100644
--- a/apps/frontend/src/domains/admin/ui/anchor-event/sections/AnchorEventRouteApplicationsSection.vue
+++ b/apps/frontend/src/domains/admin/ui/anchor-event/sections/AnchorEventRouteApplicationsSection.vue
@@ -36,12 +36,13 @@
                   <h3>{{ routeSummary(displayRoute(application)) }}</h3>
                   <p>{{ formatCreatedAt(application.createdAt) }}</p>
                 </div>
-                <Chip
-                  :tone="statusChipTone(application.status)"
+                <PuTag
+                  :tone="statusTagTone(application.status)"
+                  :text="statusLabel(application.status)"
                   size="sm"
-                >
-                  {{ statusLabel(application.status) }}
-                </Chip>
+                  variant="soft"
+                  shape="pill"
+                />
               </div>
 
               <p
@@ -83,7 +84,6 @@
                   :placeholder="
                     t('adminAnchorEvents.routeApplicationRejectPlaceholder')
                   "
-                  rows="2"
                   :value="rejectReasonDraft(application.id)"
                   @input="handleRejectReasonInput(application.id, $event)"
                 ></textarea>
@@ -127,7 +127,6 @@ import { computed, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import type { PRRoute } from "@partner-up-dev/backend";
 import Button from "@/shared/ui/actions/Button.vue";
-import Chip from "@/shared/ui/display/Chip.vue";
 import BentoItem from "@/domains/admin/ui/layout/BentoItem.vue";
 import BentoLayout from "@/domains/admin/ui/layout/BentoLayout.vue";
 import type { AdminRouteApplication } from "@/domains/admin/queries/useAdminAnchorEvents";
@@ -142,6 +141,7 @@ import {
 } from "@/domains/route/model/route";
 import RouteEditor from "@/domains/route/ui/RouteEditor.vue";
 import RouteMap from "@/domains/route/ui/RouteMap.vue";
+import { PuTag } from "@partner-up-dev/design-web";
 
 type RouteApplicationStatus = "PENDING" | "ACCEPTED" | "REJECTED";
 
@@ -270,7 +270,7 @@ const handleRejectReasonInput = (applicationId: number, event: Event) => {
 const statusLabel = (status: RouteApplicationStatus): string =>
   t(`adminAnchorEvents.routeApplicationStatus.${status}`);
 
-const statusChipTone = (
+const statusTagTone = (
   status: RouteApplicationStatus,
 ): "primary" | "secondary" | "danger" =>
   status === "ACCEPTED"
diff --git a/apps/frontend/src/domains/admin/ui/layout/AdminPageScaffold.vue b/apps/frontend/src/domains/admin/ui/layout/AdminPageScaffold.vue
index ef8f4bbb7..c41174bc8 100644
--- a/apps/frontend/src/domains/admin/ui/layout/AdminPageScaffold.vue
+++ b/apps/frontend/src/domains/admin/ui/layout/AdminPageScaffold.vue
@@ -1,5 +1,5 @@
 <template>
-  <PageScaffold class="admin-page-scaffold">
+  <PuPageScaffold class="admin-page-scaffold">
     <div class="admin-page-scaffold__layout">
       <aside
         v-if="$slots.navigation || $slots.rail"
@@ -28,11 +28,11 @@
         </main>
       </div>
     </div>
-  </PageScaffold>
+  </PuPageScaffold>
 </template>
 
 <script setup lang="ts">
-import PageScaffold from "@/shared/ui/layout/PageScaffold.vue";
+import { PuPageScaffold } from "@partner-up-dev/design-web";
 </script>
 
 <style lang="scss" scoped>
diff --git a/apps/frontend/src/domains/admin/ui/poi/sections/PoiReviewSection.vue b/apps/frontend/src/domains/admin/ui/poi/sections/PoiReviewSection.vue
index f238d4116..477a9077f 100644
--- a/apps/frontend/src/domains/admin/ui/poi/sections/PoiReviewSection.vue
+++ b/apps/frontend/src/domains/admin/ui/poi/sections/PoiReviewSection.vue
@@ -8,9 +8,14 @@
     >
       <div class="stack">
         <div class="section-header">
-          <Chip v-if="selectedPoi" :tone="statusChipTone(selectedPoi.status)" size="sm">
-            {{ statusLabel(selectedPoi.status) }}
-          </Chip>
+          <PuTag
+            v-if="selectedPoi"
+            :tone="statusTagTone(selectedPoi.status)"
+            :text="statusLabel(selectedPoi.status)"
+            size="sm"
+            variant="soft"
+            shape="pill"
+          />
         </div>
 
         <div v-if="selectedPoi === null" class="hint">
@@ -82,7 +87,7 @@ import type { AdminPoisResponse } from "@/domains/admin/queries/useAdminPoiManag
 import BentoItem from "@/domains/admin/ui/layout/BentoItem.vue";
 import BentoLayout from "@/domains/admin/ui/layout/BentoLayout.vue";
 import Button from "@/shared/ui/actions/Button.vue";
-import Chip from "@/shared/ui/display/Chip.vue";
+import { PuTag } from "@partner-up-dev/design-web";
 
 type PoiRecord = NonNullable<AdminPoisResponse>[number];
 type PoiStatus = PoiRecord["status"];
@@ -119,7 +124,7 @@ const statusLabel = (status: PoiStatus): string => {
   }
 };
 
-const statusChipTone = (
+const statusTagTone = (
   status: PoiStatus,
 ): "primary" | "secondary" | "danger" =>
   status === "PUBLISHED"
diff --git a/apps/frontend/src/domains/admin/ui/pr/views/AdminPRBasicView.vue b/apps/frontend/src/domains/admin/ui/pr/views/AdminPRBasicView.vue
index 27dcc2407..1ea72572c 100644
--- a/apps/frontend/src/domains/admin/ui/pr/views/AdminPRBasicView.vue
+++ b/apps/frontend/src/domains/admin/ui/pr/views/AdminPRBasicView.vue
@@ -16,7 +16,7 @@
 
     <template #main>
       <div class="stack">
-      <LoadingIndicator
+      <PuLoadingState
         v-if="workspaceQuery.isLoading.value"
         :message="t('common.loading')"
       />
@@ -434,7 +434,6 @@ import {
 import Button from "@/shared/ui/actions/Button.vue";
 import ChoiceCard from "@/shared/ui/containers/ChoiceCard.vue";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import LoadingIndicator from "@/shared/ui/feedback/LoadingIndicator.vue";
 import TimelinePolicyPicker from "@/shared/ui/forms/TimelinePolicyPicker.vue";
 import ConfirmDialog from "@/shared/ui/overlay/ConfirmDialog.vue";
 import PRJoinGateConfigEditor from "@/domains/pr/ui/forms/PRJoinGateConfigEditor.vue";
@@ -442,6 +441,7 @@ import PRPlaceModeField, {
   type PRPlaceModeFieldValue,
 } from "@/domains/pr/ui/forms/PRPlaceModeField.vue";
 import type { PRJoinGateConfig, PRRoute } from "@partner-up-dev/backend";
+import { PuLoadingState } from "@partner-up-dev/design-web";
 
 type PRForm = {
   title: string;
diff --git a/apps/frontend/src/domains/admin/ui/pr/views/AdminPRMessagesView.vue b/apps/frontend/src/domains/admin/ui/pr/views/AdminPRMessagesView.vue
index 05b6e826c..b5d2296e4 100644
--- a/apps/frontend/src/domains/admin/ui/pr/views/AdminPRMessagesView.vue
+++ b/apps/frontend/src/domains/admin/ui/pr/views/AdminPRMessagesView.vue
@@ -14,7 +14,7 @@
 
     <template #main>
       <div class="stack">
-      <LoadingIndicator
+      <PuLoadingState
         v-if="workspaceQuery.isLoading.value"
         :message="t('common.loading')"
       />
@@ -256,7 +256,7 @@ import { formatLocalDateTimeValue } from "@/shared/datetime/formatLocalDateTime"
 import Button from "@/shared/ui/actions/Button.vue";
 import ChoiceCard from "@/shared/ui/containers/ChoiceCard.vue";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import LoadingIndicator from "@/shared/ui/feedback/LoadingIndicator.vue";
+import { PuLoadingState } from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const { isAdmin, logout } = useAdminAccess();
diff --git a/apps/frontend/src/domains/commerce/ui/ordering/OrderingPageShell.vue b/apps/frontend/src/domains/commerce/ui/ordering/OrderingPageShell.vue
index e572beeb6..eeddb2d4b 100644
--- a/apps/frontend/src/domains/commerce/ui/ordering/OrderingPageShell.vue
+++ b/apps/frontend/src/domains/commerce/ui/ordering/OrderingPageShell.vue
@@ -1,5 +1,5 @@
 <template>
-  <FullScreenPageScaffold class="ordering-page-shell" :data-testid="dataTestid">
+  <PuPageScaffold viewport="screen" class="ordering-page-shell" :data-testid="dataTestid">
     <template #header>
       <PageHeader
         :title="title"
@@ -23,13 +23,13 @@
 
     <slot name="floating" />
     <slot name="drawer" />
-  </FullScreenPageScaffold>
+  </PuPageScaffold>
 </template>
 
 <script setup lang="ts">
 import type { RouteLocationRaw } from "vue-router";
-import FullScreenPageScaffold from "@/shared/ui/layout/FullScreenPageScaffold.vue";
 import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
+import { PuPageScaffold } from "@partner-up-dev/design-web";
 
 defineProps<{
   title: string;
diff --git a/apps/frontend/src/domains/commerce/ui/ordering/RentalOrderingForm.vue b/apps/frontend/src/domains/commerce/ui/ordering/RentalOrderingForm.vue
index 00fcca855..dbcf14031 100644
--- a/apps/frontend/src/domains/commerce/ui/ordering/RentalOrderingForm.vue
+++ b/apps/frontend/src/domains/commerce/ui/ordering/RentalOrderingForm.vue
@@ -74,7 +74,7 @@
 
       <div class="rental-ordering-form__section">
         <h2>联系方式</h2>
-        <FormField
+        <PuFormItem
           label="联系人电话"
           for-id="rental-contact-phone"
           required
@@ -88,13 +88,13 @@
             data-testid="ordering.rental.contact-phone"
             placeholder="请输入联系人手机号"
           />
-        </FormField>
+        </PuFormItem>
       </div>
 
       <div class="rental-ordering-form__section">
         <h2>参与者身份信息</h2>
         <div class="rental-ordering-form__registrants">
-          <FormField
+          <PuFormItem
             v-for="(_, index) in registrantNames"
             :key="index"
             :label="`入场人 ${index + 1}`"
@@ -109,7 +109,7 @@
               :data-testid="`ordering.rental.registrant-name.${index}`"
               placeholder="请输入真实姓名"
             />
-          </FormField>
+          </PuFormItem>
         </div>
       </div>
 
@@ -146,8 +146,8 @@
 
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
-import FormField from "@/shared/ui/forms/FormField.vue";
 import SpuCard from "./SpuCard.vue";
+import { PuFormItem } from "@partner-up-dev/design-web";
 import type {
   OrderingContentInput,
   OrderingContentOutput,
diff --git a/apps/frontend/src/domains/event/ui/controls/form-mode/FormModePreferenceControl.vue b/apps/frontend/src/domains/event/ui/controls/form-mode/FormModePreferenceControl.vue
index e42cadea9..0887b642b 100644
--- a/apps/frontend/src/domains/event/ui/controls/form-mode/FormModePreferenceControl.vue
+++ b/apps/frontend/src/domains/event/ui/controls/form-mode/FormModePreferenceControl.vue
@@ -4,7 +4,7 @@
     class="form-mode-preference-control"
   >
     <div class="preference-cell-list">
-      <Cell
+      <PuCell
         v-for="cell in preferenceCells"
         :key="cell.key"
         as="button"
@@ -147,8 +147,8 @@ import {
 } from "@/domains/event/model/form-mode";
 import { useAnchorEventPreferenceTagSubmissions } from "@/domains/event/queries/useAnchorEventPreferenceTagSubmissions";
 import Button from "@/shared/ui/actions/Button.vue";
-import Cell from "@/shared/ui/display/Cell.vue";
 import BottomDrawer from "@/shared/ui/overlay/BottomDrawer.vue";
+import { PuCell } from "@partner-up-dev/design-web";
 
 type FormModePresetTag = AnchorEventFormModeResponse["presetTags"][number];
 type BottomDrawerCloseReason = "backdrop" | "close-button" | "escape";
diff --git a/apps/frontend/src/domains/event/ui/controls/form-mode/FormModeTimeControl.vue b/apps/frontend/src/domains/event/ui/controls/form-mode/FormModeTimeControl.vue
index cf062d61d..f31366a65 100644
--- a/apps/frontend/src/domains/event/ui/controls/form-mode/FormModeTimeControl.vue
+++ b/apps/frontend/src/domains/event/ui/controls/form-mode/FormModeTimeControl.vue
@@ -22,7 +22,7 @@
     <template
       #date-picker="{ modelValue, options, updateModelValue, ariaLabel, emptyLabel, testId }"
     >
-      <WheelPicker
+      <PuWheelPicker
         :model-value="modelValue"
         :options="options"
         :item-height="42"
@@ -37,7 +37,7 @@
     <template
       #time-picker="{ modelValue, options, updateModelValue, ariaLabel, emptyLabel, testId }"
     >
-      <WheelPicker
+      <PuWheelPicker
         :model-value="modelValue"
         :options="options"
         :item-height="42"
@@ -55,7 +55,7 @@
 import { computed, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import type { PRAllowEditAfterReady } from "@partner-up-dev/backend";
-import WheelPicker from "@/shared/ui/forms/WheelPicker.vue";
+import { PuWheelPicker } from "@partner-up-dev/design-web";
 import PRTimeWindowEditor from "@/domains/event/ui/controls/PRTimeWindowEditor.vue";
 import type { AnchorEventFormModeResponse } from "@/domains/event/model/types";
 import type { TimeWindow } from "@/domains/event/model/time-window-view";
diff --git a/apps/frontend/src/domains/event/ui/primitives/AnchorEventDemandCard.vue b/apps/frontend/src/domains/event/ui/primitives/AnchorEventDemandCard.vue
index df8b89dc9..90ff67d0c 100644
--- a/apps/frontend/src/domains/event/ui/primitives/AnchorEventDemandCard.vue
+++ b/apps/frontend/src/domains/event/ui/primitives/AnchorEventDemandCard.vue
@@ -20,9 +20,15 @@
   >
     <div
       v-if="coverImage"
-      class="demand-card__cover"
-      :style="{ backgroundImage: `url(${coverImage})` }"
+      class="demand-card__cover demand-card__cover--image"
     >
+      <PuImg
+        class="demand-card__cover-image"
+        :src="coverImage"
+        alt=""
+        mode="aspectFill"
+        :show-loading="false"
+      />
       <span class="demand-card__location-badge">{{ displayLocationName }}</span>
     </div>
     <div v-else class="demand-card__cover demand-card__cover--fallback">
@@ -56,6 +62,7 @@
 
 <script setup lang="ts">
 import { computed, onUnmounted, ref, watch } from "vue";
+import { PuImg } from "@partner-up-dev/design-web";
 import {
   DEMAND_CARD_EXIT_TRANSITION,
   DEMAND_CARD_REBOUND_TRANSITION,
@@ -774,13 +781,24 @@ defineExpose({
 }
 
 .demand-card__cover {
+  position: relative;
   min-height: calc(calc(var(--sys-spacing-large) * 2) * 4);
-  background-size: cover;
-  background-position: center;
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
   padding: var(--sys-spacing-small);
+  overflow: hidden;
+}
+
+.demand-card__cover--image {
+  background: var(--sys-color-surface-container-high);
+}
+
+.demand-card__cover-image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
 }
 
 .demand-card__cover--fallback {
@@ -800,6 +818,8 @@ defineExpose({
 
 .demand-card__location-badge {
   @include mx.pu-font(control);
+  position: relative;
+  z-index: 1;
   display: inline-flex;
   align-items: center;
   padding: var(--sys-spacing-xsmall) var(--sys-spacing-small);
diff --git a/apps/frontend/src/domains/event/ui/primitives/EventCard.vue b/apps/frontend/src/domains/event/ui/primitives/EventCard.vue
index a958d9c73..0e7fe1220 100644
--- a/apps/frontend/src/domains/event/ui/primitives/EventCard.vue
+++ b/apps/frontend/src/domains/event/ui/primitives/EventCard.vue
@@ -16,48 +16,53 @@
       class="event-cover-shell"
       :class="{ 'event-cover-shell--shorter': isShorter }"
     >
-      <div
-        v-if="coverImage"
+      <PuImg
+        v-if="displayCoverImage"
         class="event-cover"
-        :style="{ backgroundImage: `url(${coverImage})` }"
-      />
-      <div
-        v-else-if="poisGalleryCoverImage"
-        class="event-cover"
-        :style="{ backgroundImage: `url(${poisGalleryCoverImage})` }"
-      />
-      <div
-        v-else-if="activeFallbackImage"
-        class="event-cover"
-        :style="{ backgroundImage: `url(${activeFallbackImage})` }"
+        :src="displayCoverImage"
+        alt=""
+        mode="aspectFill"
+        :show-loading="false"
       />
       <div v-else class="event-cover event-cover--placeholder">
         <span>{{ event.type }}</span>
       </div>
 
-      <FitChipGroup
+      <PuChipGroup
         v-if="isShorter && availableLocations.length > 0"
         class="event-cover-locations"
-        :items="availableLocations"
-        :max-items="MAX_AVAILABLE_LOCATION_PILLS"
         gap="xs"
-        tone="surface"
-        size="sm"
-        chip-class="event-cover-location-pill"
-      />
+        fit
+      >
+        <PuChip
+          v-for="location in availableLocationPills"
+          :key="location"
+          class="event-cover-location-pill"
+          tone="neutral"
+          size="sm"
+        >
+          {{ location }}
+        </PuChip>
+      </PuChipGroup>
     </div>
 
     <div class="event-card__summary">
-      <FitChipGroup
+      <PuChipGroup
         v-if="!isShorter && availableLocations.length > 0"
         class="event-available-locations-row"
-        :items="availableLocations"
-        :max-items="MAX_AVAILABLE_LOCATION_PILLS"
         gap="xs"
-        tone="surface"
-        size="sm"
-        chip-class="event-available-location-pill"
-      />
+        fit
+      >
+        <PuChip
+          v-for="location in availableLocationPills"
+          :key="location"
+          class="event-available-location-pill"
+          tone="neutral"
+          size="sm"
+        >
+          {{ location }}
+        </PuChip>
+      </PuChipGroup>
       <div class="flex flex-col gap-1">
         <h3 class="event-title">{{ event.title }}</h3>
         <p v-if="event.description" class="event-desc">
@@ -76,8 +81,8 @@
 import { computed, onBeforeUnmount, ref, watch, watchEffect } from "vue";
 import { useI18n } from "vue-i18n";
 import { RouterLink } from "vue-router";
+import { PuChip, PuChipGroup, PuImg } from "@partner-up-dev/design-web";
 import type { AnchorEventListItem } from "@/domains/event/model/types";
-import FitChipGroup from "@/shared/ui/display/FitChipGroup.vue";
 
 interface EventCardProps {
   event: AnchorEventListItem;
@@ -214,6 +219,14 @@ const activeFallbackImage = computed(() => {
   return fallbackGallery.value[safeIndex] ?? null;
 });
 
+const displayCoverImage = computed(
+  () =>
+    coverImage.value ?? poisGalleryCoverImage.value ?? activeFallbackImage.value,
+);
+const availableLocationPills = computed(() =>
+  availableLocations.value.slice(0, MAX_AVAILABLE_LOCATION_PILLS),
+);
+
 watch(fallbackGallery, () => {
   fallbackIndex.value = 0;
 });
@@ -313,10 +326,9 @@ const handleClick = () => {
 }
 
 .event-cover {
+  display: block;
   width: 100%;
   height: 130px;
-  background-size: cover;
-  background-position: center;
 
   &--placeholder {
     display: flex;
@@ -360,16 +372,16 @@ const handleClick = () => {
   min-height: calc(var(--sys-spacing-medium) + var(--sys-spacing-small));
 }
 
-:deep(.event-available-location-pill) {
-  background: var(--sys-color-surface-container-high) !important;
-  color: var(--sys-color-on-surface-variant) !important;
-  border-color: var(--sys-color-outline-variant) !important;
+.event-available-location-pill {
+  background: var(--sys-color-surface-container-high);
+  color: var(--sys-color-on-surface-variant);
+  border-color: var(--sys-color-outline-variant);
 }
 
-:deep(.event-cover-location-pill) {
-  background: var(--sys-color-surface-container-high) !important;
-  color: var(--sys-color-on-surface) !important;
-  border-color: transparent !important;
+.event-cover-location-pill {
+  background: var(--sys-color-surface-container-high);
+  color: var(--sys-color-on-surface);
+  border-color: transparent;
 }
 
 .event-title {
diff --git a/apps/frontend/src/domains/event/ui/sections/landing/EventHighlightsSection.vue b/apps/frontend/src/domains/event/ui/sections/landing/EventHighlightsSection.vue
index 9373c6f33..ea46e4978 100644
--- a/apps/frontend/src/domains/event/ui/sections/landing/EventHighlightsSection.vue
+++ b/apps/frontend/src/domains/event/ui/sections/landing/EventHighlightsSection.vue
@@ -14,17 +14,17 @@
         {{ t("home.landing.highlightsTitle") }}
       </h2>
 
-      <ChipGroup class="highlights-trust-cues" gap="sm">
-        <Chip tone="outline" size="sm">
+      <PuChipGroup class="highlights-trust-cues" gap="sm">
+        <PuChip variant="outline" size="sm">
           {{ t("home.landing.highlightsCueFixedTime") }}
-        </Chip>
-        <Chip tone="outline" size="sm">
+        </PuChip>
+        <PuChip variant="outline" size="sm">
           {{ t("home.landing.highlightsCueFixedLocation") }}
-        </Chip>
-        <Chip tone="outline" size="sm">
+        </PuChip>
+        <PuChip variant="outline" size="sm">
           {{ t("home.landing.highlightsCueSubsidy") }}
-        </Chip>
-      </ChipGroup>
+        </PuChip>
+      </PuChipGroup>
 
       <p class="highlights-bridge">
         {{ t("home.landing.highlightsBridge") }}
@@ -79,8 +79,7 @@ import AnchorEventHorizontalList from "@/domains/event/ui/composites/AnchorEvent
 import { useInViewStagger } from "@/shared/motion/useInViewStagger";
 import { useAnchorEvents } from "@/domains/event/queries/useAnchorEvents";
 import { trackEvent } from "@/shared/telemetry/track";
-import Chip from "@/shared/ui/display/Chip.vue";
-import ChipGroup from "@/shared/ui/display/ChipGroup.vue";
+import { PuChip, PuChipGroup } from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const { targetRef: sectionRef, isInView, itemMotionStyle } = useInViewStagger();
diff --git a/apps/frontend/src/domains/event/ui/surfaces/AnchorEventFormModeSurface.vue b/apps/frontend/src/domains/event/ui/surfaces/AnchorEventFormModeSurface.vue
index cd24e470f..7d3bfdcd7 100644
--- a/apps/frontend/src/domains/event/ui/surfaces/AnchorEventFormModeSurface.vue
+++ b/apps/frontend/src/domains/event/ui/surfaces/AnchorEventFormModeSurface.vue
@@ -1,6 +1,6 @@
 <template>
   <section class="anchor-event-form-mode" data-testid="anchor-event-form-mode.surface">
-    <LoadingIndicator
+    <PuLoadingState
       v-if="formModeQuery.isLoading.value"
       :message="t('common.loading')"
     />
@@ -110,7 +110,6 @@ import type {
 } from "@partner-up-dev/backend";
 import Button from "@/shared/ui/actions/Button.vue";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import LoadingIndicator from "@/shared/ui/feedback/LoadingIndicator.vue";
 import { trackEvent } from "@/shared/telemetry/track";
 import { resolveTelemetryFailurePayload } from "@/shared/telemetry/result";
 import { useAnchorEventFormModeData } from "@/domains/event/queries/useAnchorEventFormModeData";
@@ -156,6 +155,7 @@ import {
 import LiquidWaveSplash from "@/processes/route-handoff/LiquidWaveSplash.vue";
 import type { LiquidSplashPhase } from "@/processes/route-handoff/LiquidWaveSplash.vue";
 import { useMatchedPRHandoff } from "@/processes/route-handoff/useMatchedPRHandoff";
+import { PuLoadingState } from "@partner-up-dev/design-web";
 
 const props = defineProps<{
   eventId: number;
diff --git a/apps/frontend/src/domains/feedback/ui/FeedbackQuestionnaireForm.vue b/apps/frontend/src/domains/feedback/ui/FeedbackQuestionnaireForm.vue
index f925bbe68..b0f7aa37b 100644
--- a/apps/frontend/src/domains/feedback/ui/FeedbackQuestionnaireForm.vue
+++ b/apps/frontend/src/domains/feedback/ui/FeedbackQuestionnaireForm.vue
@@ -32,22 +32,22 @@
             </label>
           </div>
         </fieldset>
-        <FormField
+        <PuFormItem
           v-else-if="question.type === 'textarea'"
           :label="question.label"
           :for-id="feedbackFieldId(question.id)"
           :required="question.required"
         >
-          <TextareaInput
-            :input-id="feedbackFieldId(question.id)"
+          <PuTextarea
+            :id="feedbackFieldId(question.id)"
             :model-value="readTextareaValue(question.id)"
-            :max-length="question.maxLength"
+            :maxlength="question.maxLength"
             :disabled="pending"
             show-count
             @update:model-value="setTextareaAnswer(question.id, $event)"
           />
-        </FormField>
-        <FormField
+        </PuFormItem>
+        <PuFormItem
           v-else
           :label="question.label"
           :for-id="feedbackFieldId(question.id)"
@@ -65,7 +65,7 @@
             data-testid="pr-detail.feedback.image-upload"
             @update:model-value="setImageAnswer(question.id, $event)"
           />
-        </FormField>
+        </PuFormItem>
       </template>
     </div>
 
@@ -102,8 +102,7 @@ import type {
 } from "@partner-up-dev/backend";
 import Button from "@/shared/ui/actions/Button.vue";
 import ImageUrlInput from "@/shared/upload/ImageUrlInput.vue";
-import FormField from "@/shared/ui/forms/FormField.vue";
-import TextareaInput from "@/shared/ui/forms/TextareaInput.vue";
+import { PuFormItem, PuTextarea } from "@partner-up-dev/design-web";
 
 const props = defineProps<{
   instanceId: number;
diff --git a/apps/frontend/src/domains/location/ui/LocationPickerPanel.vue b/apps/frontend/src/domains/location/ui/LocationPickerPanel.vue
index 5f74d54e0..bbcf7d5f8 100644
--- a/apps/frontend/src/domains/location/ui/LocationPickerPanel.vue
+++ b/apps/frontend/src/domains/location/ui/LocationPickerPanel.vue
@@ -17,7 +17,7 @@
     <div class="location-picker-panel__editor">
       <label class="location-picker-panel__field">
         <span>{{ t("locationPicker.nameLabel") }}</span>
-        <TextInput
+        <PuInput
           :model-value="draftLocation?.name ?? ''"
           :placeholder="t('locationPicker.namePlaceholder')"
           :disabled="draftLocation === null"
@@ -28,7 +28,7 @@
 
       <label class="location-picker-panel__field">
         <span>{{ t("locationPicker.addressLabel") }}</span>
-        <TextInput
+        <PuInput
           :model-value="draftLocation?.address ?? ''"
           :placeholder="t('locationPicker.addressPlaceholder')"
           :disabled="draftLocation === null"
@@ -70,8 +70,8 @@
 import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import Button from "@/shared/ui/actions/Button.vue";
-import TextInput from "@/shared/ui/forms/TextInput.vue";
 import type { RouteCoordinate } from "@/domains/route/model/route";
+import { PuInput } from "@partner-up-dev/design-web";
 import {
   buildTencentLocationPickerUrl,
   clonePickedLocation,
diff --git a/apps/frontend/src/domains/pr/ui/composites/PRFactsCard.vue b/apps/frontend/src/domains/pr/ui/composites/PRFactsCard.vue
index 4f9f8ffff..e588fae60 100644
--- a/apps/frontend/src/domains/pr/ui/composites/PRFactsCard.vue
+++ b/apps/frontend/src/domains/pr/ui/composites/PRFactsCard.vue
@@ -1,205 +1,259 @@
 <template>
   <PuCard v-bind="$attrs" as="section" class="pr-facts-card" gap="sm">
-    <LoadingIndicator v-if="isLoading" :message="t('common.loading')" />
+    <PuLoadingState v-if="isLoading" :message="t('common.loading')" />
     <ErrorToast v-else-if="error" :message="error.message" persistent />
 
     <template v-else-if="prDetail">
       <h2 class="facts-title">活动信息</h2>
 
-      <section v-if="showLocationSection" class="facts-entry">
-        <Button
-          v-if="interactive && locationGalleryAvailable"
-          class="facts-entry-button"
-          tone="ghost"
-          block
-          @click="showLocationGalleryModal = true"
-        >
-          <span class="facts-entry-button__body">
-            <span class="facts-entry-button__label">{{
-              t("prCard.location")
-            }}</span>
-            <span class="facts-entry-button__trailing">
-              <span class="facts-entry-button__action">
-                {{ t("prCard.viewLocationImages") }}
+      <PuDescriptionList
+        class="facts-list"
+        variant="plain"
+        surface-level="plain"
+        density="compact"
+        :dividers="false"
+      >
+        <section v-if="showLocationSection" class="facts-entry">
+          <Button
+            v-if="interactive && locationGalleryAvailable"
+            class="facts-entry-button"
+            tone="ghost"
+            block
+            @click="showLocationGalleryModal = true"
+          >
+            <span class="facts-entry-button__body">
+              <span class="facts-entry-button__label">{{
+                t("prCard.location")
+              }}</span>
+              <span class="facts-entry-button__trailing">
+                <span class="facts-entry-button__action">
+                  {{ t("prCard.viewLocationImages") }}
+                </span>
+                <span
+                  class="facts-entry-button__icon i-mdi-chevron-right"
+                  aria-hidden="true"
+                />
               </span>
+            </span>
+          </Button>
+
+          <PuDescriptionItem
+            v-else
+            :label="t('prCard.location')"
+            value-align="end"
+          >
+            <span class="facts-inline-value">
+              <span>{{ locationDisplayText }}</span>
               <span
-                class="facts-entry-button__icon i-mdi-chevron-right"
-                aria-hidden="true"
-              />
+                v-if="locationEditableAfterReady"
+                class="facts-editable-mark"
+              >
+                可调整
+              </span>
             </span>
-          </span>
-        </Button>
-
-        <InfoRow v-else :label="t('prCard.location')">
-          <span class="facts-inline-value">
-            <span>{{ locationDisplayText }}</span>
-            <span v-if="locationEditableAfterReady" class="facts-editable-mark">
-              可调整
+          </PuDescriptionItem>
+
+          <p
+            v-if="interactive && locationGalleryAvailable"
+            class="facts-entry__value"
+          >
+            <span class="facts-inline-value">
+              <span>{{ locationDisplayText }}</span>
+              <span
+                v-if="locationEditableAfterReady"
+                class="facts-editable-mark"
+              >
+                可调整
+              </span>
             </span>
-          </span>
-        </InfoRow>
+          </p>
+        </section>
 
-        <p
-          v-if="interactive && locationGalleryAvailable"
-          class="facts-entry__value"
+        <section
+          v-if="routeAvailable"
+          class="facts-entry"
+          data-testid="pr-detail.route"
         >
-          <span class="facts-inline-value">
-            <span>{{ locationDisplayText }}</span>
-            <span v-if="locationEditableAfterReady" class="facts-editable-mark">
-              可调整
-            </span>
-          </span>
-        </p>
-      </section>
-
-      <section
-        v-if="routeAvailable"
-        class="facts-entry"
-        data-testid="pr-detail.route"
-      >
-        <InfoRowAction
-          v-if="interactive"
-          :label="t('prCard.route')"
-          :value="t('prCard.viewRouteMap')"
-          :aria-label="
-            t('prCard.viewRouteMapAria', {
-              route: routeDisplayText,
-            })
-          "
-          @click="showRouteMapModal = true"
-        />
-
-        <InfoRow v-else :label="t('prCard.route')">
-          <span class="facts-inline-value">
-            <span>{{ routeDisplayText }}</span>
-            <span v-if="routeEditableAfterReady" class="facts-editable-mark">
-              可调整
+          <PuDescriptionItem
+            v-if="interactive"
+            :label="t('prCard.route')"
+            value-align="end"
+          >
+            <template #action>
+              <button
+                class="facts-row-action"
+                type="button"
+                :aria-label="
+                  t('prCard.viewRouteMapAria', {
+                    route: routeDisplayText,
+                  })
+                "
+                @click="showRouteMapModal = true"
+              >
+                <span>{{ t("prCard.viewRouteMap") }}</span>
+                <span
+                  class="facts-row-action__icon i-mdi-chevron-right"
+                  aria-hidden="true"
+                />
+              </button>
+            </template>
+          </PuDescriptionItem>
+
+          <PuDescriptionItem
+            v-else
+            :label="t('prCard.route')"
+            value-align="end"
+          >
+            <span class="facts-inline-value">
+              <span>{{ routeDisplayText }}</span>
+              <span v-if="routeEditableAfterReady" class="facts-editable-mark">
+                可调整
+              </span>
             </span>
-          </span>
-        </InfoRow>
-
-        <RoutePointList
-          class="facts-route-list"
-          :route="prRoute"
-          variant="compact"
-        />
-      </section>
-
-      <section
-        v-if="meetingPointSectionVisible"
-        class="facts-entry"
-        data-testid="pr-detail.meeting-point"
-        :data-visibility="meetingPointVisibility"
-      >
-        <InfoRow v-if="isMeetingPointPrivate" :label="t('prCard.meetingPoint')">
-          {{ t("prCard.meetingPointPrivate") }}
-        </InfoRow>
-
-        <Button
-          v-else-if="interactive && meetingPointImageUrl"
-          class="facts-entry-button"
-          tone="ghost"
-          block
-          @click="showMeetingPointGalleryModal = true"
+          </PuDescriptionItem>
+
+          <RoutePointList
+            class="facts-route-list"
+            :route="prRoute"
+            variant="compact"
+          />
+        </section>
+
+        <section
+          v-if="meetingPointSectionVisible"
+          class="facts-entry"
+          data-testid="pr-detail.meeting-point"
+          :data-visibility="meetingPointVisibility"
         >
-          <span class="facts-entry-button__body">
-            <span class="facts-entry-button__label">{{
-              t("prCard.meetingPoint")
-            }}</span>
-            <span class="facts-entry-button__trailing">
-              <span class="facts-entry-button__action">
-                {{ t("prCard.viewMeetingPointImage") }}
+          <PuDescriptionItem
+            v-if="isMeetingPointPrivate"
+            :label="t('prCard.meetingPoint')"
+            value-align="end"
+          >
+            {{ t("prCard.meetingPointPrivate") }}
+          </PuDescriptionItem>
+
+          <Button
+            v-else-if="interactive && meetingPointImageUrl"
+            class="facts-entry-button"
+            tone="ghost"
+            block
+            @click="showMeetingPointGalleryModal = true"
+          >
+            <span class="facts-entry-button__body">
+              <span class="facts-entry-button__label">{{
+                t("prCard.meetingPoint")
+              }}</span>
+              <span class="facts-entry-button__trailing">
+                <span class="facts-entry-button__action">
+                  {{ t("prCard.viewMeetingPointImage") }}
+                </span>
+                <span
+                  class="facts-entry-button__icon i-mdi-chevron-right"
+                  aria-hidden="true"
+                />
               </span>
-              <span
-                class="facts-entry-button__icon i-mdi-chevron-right"
-                aria-hidden="true"
-              />
+            </span>
+          </Button>
+
+          <PuDescriptionItem
+            v-else
+            :label="t('prCard.meetingPoint')"
+            value-align="end"
+          >
+            {{ meetingPointDescription ?? t("prPage.partnerSection.notSet") }}
+          </PuDescriptionItem>
+
+          <p
+            v-if="interactive && meetingPointImageUrl && meetingPointDescription"
+            class="facts-entry__value"
+          >
+            {{ meetingPointDescription }}
+          </p>
+        </section>
+
+        <PuDescriptionItem :label="t('prCard.time')" value-align="end">
+          <span class="facts-inline-value">
+            <span data-testid="pr-detail.facts.time-value">
+              {{ localizedTimeText }}
+            </span>
+            <span v-if="timeEditableAfterReady" class="facts-editable-mark">
+              可调整
             </span>
           </span>
-        </Button>
-
-        <InfoRow v-else :label="t('prCard.meetingPoint')">
-          {{ meetingPointDescription ?? t("prPage.partnerSection.notSet") }}
-        </InfoRow>
+        </PuDescriptionItem>
 
-        <p
-          v-if="interactive && meetingPointImageUrl && meetingPointDescription"
-          class="facts-entry__value"
+        <PuDescriptionItem
+          v-if="hasPreferences"
+          :label="t('prCard.preferences')"
+          value-align="start"
         >
-          {{ meetingPointDescription }}
-        </p>
-      </section>
-
-      <InfoRow :label="t('prCard.time')">
-        <span class="facts-inline-value">
-          <span data-testid="pr-detail.facts.time-value">
-            {{ localizedTimeText }}
-          </span>
-          <span v-if="timeEditableAfterReady" class="facts-editable-mark">
-            可调整
-          </span>
-        </span>
-      </InfoRow>
-
-      <InfoRow
-        v-if="hasPreferences"
-        :label="t('prCard.preferences')"
-        layout="stack"
-        align="start"
-      >
-        <ChipGroup>
-          <Chip v-for="item in prDetail.core.preferences" :key="item">
-            {{ item }}
-          </Chip>
-        </ChipGroup>
-      </InfoRow>
-
-      <section class="facts-entry">
-        <InfoRowAction
-          v-if="interactive"
-          label="参与概览"
-          :value="participantCountText"
-          :aria-label="t('prPage.partnerSection.rosterBoardTitle')"
-          @click="showRosterModal = true"
-        />
-
-        <InfoRow v-else label="参与概览">
-          {{ participantCountText }}
-        </InfoRow>
-
-        <div class="facts-entry__value facts-entry__value--badges">
-          <ChipGroup v-if="rosterPreview.length > 0">
-            <template v-for="item in rosterPreview" :key="item.partnerId">
-              <RouterLink
-                v-if="interactive && isRosterLinkable(item.state)"
-                :to="partnerProfilePath(item.partnerId)"
-                class="roster-preview-link"
+          <PuChipGroup>
+            <PuChip v-for="item in prDetail.core.preferences" :key="item">
+              {{ item }}
+            </PuChip>
+          </PuChipGroup>
+        </PuDescriptionItem>
+
+        <section class="facts-entry">
+          <PuDescriptionItem
+            v-if="interactive"
+            label="参与概览"
+            value-align="end"
+          >
+            <template #action>
+              <button
+                class="facts-row-action"
+                type="button"
+                :aria-label="t('prPage.partnerSection.rosterBoardTitle')"
+                @click="showRosterModal = true"
               >
-                <Chip>{{ item.displayName }}</Chip>
-              </RouterLink>
-
-              <Chip v-else>
-                {{ item.displayName }}
-              </Chip>
+                <span>{{ participantCountText }}</span>
+                <span
+                  class="facts-row-action__icon i-mdi-chevron-right"
+                  aria-hidden="true"
+                />
+              </button>
             </template>
+          </PuDescriptionItem>
+
+          <PuDescriptionItem v-else label="参与概览" value-align="end">
+            {{ participantCountText }}
+          </PuDescriptionItem>
+
+          <div class="facts-entry__value facts-entry__value--badges">
+            <PuChipGroup v-if="rosterPreview.length > 0">
+              <template v-for="item in rosterPreview" :key="item.partnerId">
+                <RouterLink
+                  v-if="interactive && isRosterLinkable(item.state)"
+                  :to="partnerProfilePath(item.partnerId)"
+                  class="roster-preview-link"
+                >
+                  <PuChip>{{ item.displayName }}</PuChip>
+                </RouterLink>
+
+                <PuChip v-else>
+                  {{ item.displayName }}
+                </PuChip>
+              </template>
+
+              <span v-if="hasMoreRoster" class="roster-chip-overflow">...</span>
+            </PuChipGroup>
+
+            <span v-else class="facts-empty">
+              {{ t("prPage.partnerSection.rosterCurrentEmpty") }}
+            </span>
+          </div>
+        </section>
 
-            <span v-if="hasMoreRoster" class="roster-chip-overflow">...</span>
-          </ChipGroup>
-
-          <span v-else class="facts-empty">
-            {{ t("prPage.partnerSection.rosterCurrentEmpty") }}
-          </span>
-        </div>
-      </section>
-
-      <InfoRow
-        v-if="normalizedNotes"
-        :label="t('prCard.notes')"
-        layout="stack"
-        align="start"
-      >
-        <p class="facts-notes">{{ normalizedNotes }}</p>
-      </InfoRow>
+        <PuDescriptionItem
+          v-if="normalizedNotes"
+          :label="t('prCard.notes')"
+          value-align="start"
+        >
+          <p class="facts-notes">{{ normalizedNotes }}</p>
+        </PuDescriptionItem>
+      </PuDescriptionList>
     </template>
   </PuCard>
 
@@ -240,13 +294,15 @@ import { computed, nextTick, ref, watch } from "vue";
 import { RouterLink } from "vue-router";
 import { useI18n } from "vue-i18n";
 import type { PRId } from "@partner-up-dev/backend";
-import { PuCard } from "@partner-up-dev/design-web";
-import InfoRow from "@/shared/ui/display/InfoRow.vue";
-import InfoRowAction from "@/shared/ui/display/InfoRowAction.vue";
-import Chip from "@/shared/ui/display/Chip.vue";
-import ChipGroup from "@/shared/ui/display/ChipGroup.vue";
+import {
+  PuCard,
+  PuChip,
+  PuChipGroup,
+  PuDescriptionItem,
+  PuDescriptionList,
+  PuLoadingState,
+} from "@partner-up-dev/design-web";
 import Button from "@/shared/ui/actions/Button.vue";
-import LoadingIndicator from "@/shared/ui/feedback/LoadingIndicator.vue";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
 import PRLocationGalleryModal from "@/domains/pr/ui/modals/PRLocationGalleryModal.vue";
 import PRRouteMapModal from "@/domains/pr/ui/modals/PRRouteMapModal.vue";
@@ -430,6 +486,10 @@ watch(
   color: var(--sys-color-on-surface);
 }
 
+.facts-list {
+  min-width: 0;
+}
+
 .facts-entry {
   display: flex;
   flex-direction: column;
@@ -499,6 +559,31 @@ watch(
   color: var(--sys-color-secondary);
 }
 
+.facts-row-action {
+  @include mx.pu-font(control);
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--sys-spacing-xsmall);
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--sys-radius-small);
+  background: transparent;
+  color: var(--sys-color-secondary);
+  cursor: pointer;
+}
+
+.facts-row-action:focus-visible {
+  outline: 2px solid var(--sys-color-primary);
+  outline-offset: 2px;
+}
+
+.facts-row-action__icon {
+  @include mx.pu-icon(small);
+  flex-shrink: 0;
+}
+
 .facts-empty {
   @include mx.pu-font(support);
   color: var(--sys-color-on-surface-variant);
diff --git a/apps/frontend/src/domains/pr/ui/forms/NLPRForm.vue b/apps/frontend/src/domains/pr/ui/forms/NLPRForm.vue
index 3d6dc41af..947be12f0 100644
--- a/apps/frontend/src/domains/pr/ui/forms/NLPRForm.vue
+++ b/apps/frontend/src/domains/pr/ui/forms/NLPRForm.vue
@@ -2,17 +2,15 @@
   <form class="nl-form" @submit.prevent="onSubmit">
     <Field name="rawText" v-slot="{ field, errors }">
       <div class="nl-field">
-        <TextareaInput
-          input-id="pr-text"
+        <PuTextarea
+          id="pr-text"
           :model-value="field.value"
           @update:model-value="field.onChange"
           :disabled="isSubmitting"
           :placeholder="placeholderText"
-          :rows="3"
-          :max-length="120"
+          ::maxlength="120"
           show-count
-          min-height="120px"
-        />
+          />
         <div class="nl-actions">
           <button
             v-if="isVoiceSupported"
@@ -45,7 +43,7 @@
       {{ t("nlForm.submit") }}
     </Button>
 
-    <LoadingIndicator v-if="isSubmitting" :message="t('nlForm.parsing')" />
+    <PuLoadingState v-if="isSubmitting" :message="t('nlForm.parsing')" />
 
     <ErrorToast
       v-if="createMutation.isError.value"
@@ -63,14 +61,13 @@ import { useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
 import { createNaturalLanguagePRValidationSchema } from "@/lib/validation";
 import { useCreatePRFromNaturalLanguage } from "@/domains/pr/queries/usePRCreate";
-import LoadingIndicator from "@/shared/ui/feedback/LoadingIndicator.vue";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
 import { useLandingRotatingTopic } from "@/domains/landing/use-cases/useLandingRotatingTopic";
 import { ensureAuthSessionBootstrapped } from "@/processes/auth/useAuthSessionBootstrap";
 import Button from "@/shared/ui/actions/Button.vue";
-import TextareaInput from "@/shared/ui/forms/TextareaInput.vue";
 import { useNaturalLanguageDraftStore } from "@/domains/pr/use-cases/useNaturalLanguageDraft";
 import { useWeChatVoiceInput } from "@/shared/wechat/useWeChatVoiceInput";
+import { PuLoadingState, PuTextarea } from "@partner-up-dev/design-web";
 
 const getLocalWeekdayLabel = (date: Date): string => {
   return new Intl.DateTimeFormat(undefined, {
diff --git a/apps/frontend/src/domains/pr/ui/forms/PREditor.vue b/apps/frontend/src/domains/pr/ui/forms/PREditor.vue
index bd09e9cf2..07d46f970 100644
--- a/apps/frontend/src/domains/pr/ui/forms/PREditor.vue
+++ b/apps/frontend/src/domains/pr/ui/forms/PREditor.vue
@@ -4,10 +4,10 @@
     data-testid="pr-editor.form"
     @submit.prevent="submitForm"
   >
-    <LoadingIndicator v-if="isDetailLoading" :message="t('common.loading')" />
+    <PuLoadingState v-if="isDetailLoading" :message="t('common.loading')" />
     <ErrorToast v-else-if="detailError" :message="detailError.message" persistent />
 
-    <EmptyState
+    <PuEmptyState
       v-else-if="!hasEditableFields"
       icon="i-mdi-lock-outline"
       title="当前没有可编辑内容"
@@ -152,7 +152,6 @@
             <label>{{ t("partnerRequestForm.notes") }}</label>
             <textarea
               v-model="notesInput"
-              rows="3"
               data-testid="pr-editor.form.notes"
               :placeholder="t('partnerRequestForm.notesPlaceholder')"
             />
@@ -208,13 +207,12 @@ import {
 import { clonePRFields, parseNullableNumber } from "@/domains/pr/model/form";
 import Button from "@/shared/ui/actions/Button.vue";
 import ConfirmDialog from "@/shared/ui/overlay/ConfirmDialog.vue";
-import EmptyState from "@/shared/ui/feedback/EmptyState.vue";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import LoadingIndicator from "@/shared/ui/feedback/LoadingIndicator.vue";
 import { useUserSessionStore } from "@/shared/auth/useUserSessionStore";
 import { ensureAuthSessionBootstrapped } from "@/processes/auth/useAuthSessionBootstrap";
 import { trackEvent } from "@/shared/telemetry/track";
 import { formatLocalDateTimeWindowLabel } from "@/shared/datetime/formatLocalDateTime";
+import { PuEmptyState, PuLoadingState } from "@partner-up-dev/design-web";
 
 const props = defineProps<{
   prId?: number;
diff --git a/apps/frontend/src/domains/pr/ui/forms/PRPlaceModeField.vue b/apps/frontend/src/domains/pr/ui/forms/PRPlaceModeField.vue
index 3cbfe6353..5a0294478 100644
--- a/apps/frontend/src/domains/pr/ui/forms/PRPlaceModeField.vue
+++ b/apps/frontend/src/domains/pr/ui/forms/PRPlaceModeField.vue
@@ -2,14 +2,27 @@
   <section class="pr-place-mode-field">
     <div class="pr-place-mode-field__mode">
       <span class="pr-place-mode-field__label">{{ label }}</span>
-      <SegmentedControl
+      <PuSegmented
         :model-value="placeMode"
-        :options="placeModeOptions"
         :aria-label="ariaLabel"
         :data-testid="`${testIdPrefix}.mode`"
-        block
+        full-width
+        equal-width
         @update:model-value="handlePlaceModeChange"
-      />
+      >
+        <PuSegmentedItem
+          v-for="option in placeModeOptions"
+          :key="String(option.value)"
+          :value="option.value"
+          :label="option.label"
+          :disabled="option.disabled"
+          :data-testid="option.testId"
+        >
+          <template v-if="option.icon" #leading>
+            <span :class="option.icon" aria-hidden="true" />
+          </template>
+        </PuSegmentedItem>
+      </PuSegmented>
     </div>
 
     <label v-if="placeMode === 'location'" class="pr-place-mode-field__field">
@@ -44,12 +57,13 @@
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 import type { PRRoute } from "@partner-up-dev/backend";
+import {
+  PuSegmented,
+  PuSegmentedItem,
+  type PuSegmentedValue,
+} from "@partner-up-dev/design-web";
 import type { Route } from "@/domains/route/model/route";
 import RouteEditor from "@/domains/route/ui/RouteEditor.vue";
-import SegmentedControl, {
-  type SegmentedControlOption,
-  type SegmentedControlValue,
-} from "@/shared/ui/controls/SegmentedControl.vue";
 import {
   clonePRRoute,
   createEmptyPRRouteDraft,
@@ -63,6 +77,13 @@ export type PRPlaceModeFieldValue = {
   location: string | null;
   route: PRRoute | null;
 };
+type SegmentedOption = {
+  value: PuSegmentedValue;
+  label: string;
+  icon?: string;
+  testId?: string;
+  disabled?: boolean;
+};
 
 const props = withDefaults(
   defineProps<{
@@ -97,7 +118,7 @@ const placeMode = computed<PRPlaceMode>(() =>
   resolvePRPlaceMode(props.modelValue),
 );
 
-const placeModeOptions = computed<SegmentedControlOption[]>(() => [
+const placeModeOptions = computed<SegmentedOption[]>(() => [
   {
     value: "location",
     label: t("partnerRequestForm.placeModeLocation"),
@@ -119,7 +140,7 @@ const emitValue = (value: PRPlaceModeFieldValue) => {
   emit("update:modelValue", value);
 };
 
-const handlePlaceModeChange = (value: SegmentedControlValue) => {
+const handlePlaceModeChange = (value: PuSegmentedValue) => {
   if (value !== "location" && value !== "route") {
     return;
   }
diff --git a/apps/frontend/src/domains/pr/ui/primitives/PRPreviewCardFrame.vue b/apps/frontend/src/domains/pr/ui/primitives/PRPreviewCardFrame.vue
index 6c7836316..30882e05a 100644
--- a/apps/frontend/src/domains/pr/ui/primitives/PRPreviewCardFrame.vue
+++ b/apps/frontend/src/domains/pr/ui/primitives/PRPreviewCardFrame.vue
@@ -7,10 +7,13 @@
       :class="{ 'pr-preview-card__link--button': mode === 'button' }"
       @click="emit('activate')"
     >
-      <div
+      <PuImg
         v-if="coverImage"
         class="pr-preview-card__cover"
-        :style="{ backgroundImage: `url(${coverImage})` }"
+        :src="coverImage"
+        alt=""
+        mode="aspectFill"
+        :show-loading="false"
       />
 
       <div class="pr-preview-card__body">
@@ -55,6 +58,7 @@
 <script setup lang="ts">
 import { computed, useSlots } from "vue";
 import { RouterLink } from "vue-router";
+import { PuImg } from "@partner-up-dev/design-web";
 import type { PRDisplayStatus } from "@/domains/pr/model/pr-display-status";
 import PRStatusBadge from "@/domains/pr/ui/primitives/PRStatusBadge.vue";
 
@@ -166,10 +170,9 @@ const preferenceLabel = computed(
 }
 
 .pr-preview-card__cover {
+  display: block;
   width: 100%;
   height: 108px;
-  background-size: cover;
-  background-position: center;
 }
 
 .pr-preview-card__body {
diff --git a/apps/frontend/src/domains/pr/ui/sections/PRDraftPublishNotice.vue b/apps/frontend/src/domains/pr/ui/sections/PRDraftPublishNotice.vue
index b27eb1b08..8e310a352 100644
--- a/apps/frontend/src/domains/pr/ui/sections/PRDraftPublishNotice.vue
+++ b/apps/frontend/src/domains/pr/ui/sections/PRDraftPublishNotice.vue
@@ -1,5 +1,5 @@
 <template>
-  <InlineNotice
+  <PuInlineNotice
     v-if="showDraftPublishCard"
     tone="warning"
     data-testid="pr-detail.draft-publish.notice"
@@ -19,7 +19,7 @@
         }}
       </Button>
     </template>
-  </InlineNotice>
+  </PuInlineNotice>
 </template>
 
 <script setup lang="ts">
@@ -28,10 +28,10 @@ import { useRoute, useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
 import type { PRId } from "@partner-up-dev/backend";
 import Button from "@/shared/ui/actions/Button.vue";
-import InlineNotice from "@/shared/ui/feedback/InlineNotice.vue";
 import type { PRDetailView } from "@/domains/pr/model/types";
 import { usePublishPR } from "@/domains/pr/queries/usePRPublish";
 import { useRegisterPRPendingReplayHandler } from "@/domains/pr/use-cases/usePRPendingWeChatReplay";
+import { PuInlineNotice, PuPageScaffold } from "@partner-up-dev/design-web";
 
 const props = defineProps<{
   prId: PRId | null;
diff --git a/apps/frontend/src/domains/pr/ui/sections/PRJoinAction.vue b/apps/frontend/src/domains/pr/ui/sections/PRJoinAction.vue
index 1a275dc8e..76097b04e 100644
--- a/apps/frontend/src/domains/pr/ui/sections/PRJoinAction.vue
+++ b/apps/frontend/src/domains/pr/ui/sections/PRJoinAction.vue
@@ -17,13 +17,13 @@
     data-region="join-action"
     data-testid="pr-detail.join-action"
   >
-    <InlineNotice
+    <PuInlineNotice
       v-if="releaseNoticeText"
       tone="warning"
       :message="releaseNoticeText"
     />
 
-    <InlineNotice
+    <PuInlineNotice
       v-if="joinBlockedMessage"
       tone="warning"
       :message="joinBlockedMessage"
@@ -88,7 +88,6 @@ import type { PRId } from "@partner-up-dev/backend";
 import type { PRDetailView } from "@/domains/pr/model/types";
 import type { PRJoinEntrySurface } from "@/domains/pr/model/pr-join-entry-context";
 import Button from "@/shared/ui/actions/Button.vue";
-import InlineNotice from "@/shared/ui/feedback/InlineNotice.vue";
 import Modal from "@/shared/ui/overlay/Modal.vue";
 import { useBodyScrollLock } from "@/shared/ui/overlay/useBodyScrollLock";
 import { useJoinPR } from "@/domains/pr/queries/usePRActions";
@@ -104,6 +103,7 @@ import { useRegisterPRPendingReplayHandler } from "@/domains/pr/use-cases/usePRP
 import type { ApiError } from "@/shared/api/error";
 import { trackEvent } from "@/shared/telemetry/track";
 import { resolveTelemetryFailurePayload } from "@/shared/telemetry/result";
+import { PuInlineNotice } from "@partner-up-dev/design-web";
 
 type JoinSuccessPromptExpose = {
   close: () => void;
diff --git a/apps/frontend/src/domains/pr/ui/sections/PRMessageThread.vue b/apps/frontend/src/domains/pr/ui/sections/PRMessageThread.vue
index 7ccfba27e..01a274797 100644
--- a/apps/frontend/src/domains/pr/ui/sections/PRMessageThread.vue
+++ b/apps/frontend/src/domains/pr/ui/sections/PRMessageThread.vue
@@ -17,12 +17,12 @@
       </p>
     </header>
 
-    <InlineNotice
+    <PuInlineNotice
       tone="info"
       :message="t('prPage.messageThread.nonRealtimeHint')"
     />
 
-    <InlineNotice
+    <PuInlineNotice
       v-if="messagesQuery.error.value"
       tone="error"
       :message="messagesQuery.error.value.message"
@@ -37,7 +37,7 @@
           {{ t("common.loading") }}
         </p>
 
-        <EmptyState
+        <PuEmptyState
           v-else-if="threadItems.length === 0 && !isPageLayout"
           :title="t('prPage.messageThread.emptyTitle')"
           :description="t('prPage.messageThread.emptyDescription')"
@@ -90,27 +90,25 @@
       </template>
     </div>
 
-    <InlineNotice v-if="submitError" tone="error" :message="submitError" />
-    <InlineNotice
+    <PuInlineNotice v-if="submitError" tone="error" :message="submitError" />
+    <PuInlineNotice
       v-if="readMarkerError"
       tone="warning"
       :message="readMarkerError"
     />
 
-    <FormField
+    <PuFormItem
       class="message-thread__composer"
       :label="t('prPage.messageThread.inputLabel')"
       for-id="pr-message-input"
     >
-      <TextareaInput
-        input-id="pr-message-input"
+      <PuTextarea
+        id="pr-message-input"
         v-model="draftBody"
         :placeholder="t('prPage.messageThread.inputPlaceholder')"
-        :rows="3"
-        :max-length="1000"
-        min-height="5.5rem"
-      />
-    </FormField>
+        ::maxlength="1000"
+        />
+    </PuFormItem>
 
     <div class="message-thread__actions">
       <Button
@@ -133,12 +131,8 @@
 import { computed, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import type { PRId } from "@partner-up-dev/backend";
-import { PuCard } from "@partner-up-dev/design-web";
+import { PuCard, PuEmptyState, PuFormItem, PuInlineNotice, PuTextarea } from "@partner-up-dev/design-web";
 import Button from "@/shared/ui/actions/Button.vue";
-import EmptyState from "@/shared/ui/feedback/EmptyState.vue";
-import InlineNotice from "@/shared/ui/feedback/InlineNotice.vue";
-import FormField from "@/shared/ui/forms/FormField.vue";
-import TextareaInput from "@/shared/ui/forms/TextareaInput.vue";
 import { formatLocalDateTimeValue } from "@/shared/datetime/formatLocalDateTime";
 import {
   useAdvancePRMessageReadMarker,
diff --git a/apps/frontend/src/domains/pr/ui/sections/PRPartnerSection.vue b/apps/frontend/src/domains/pr/ui/sections/PRPartnerSection.vue
index 4834b584c..321e50f51 100644
--- a/apps/frontend/src/domains/pr/ui/sections/PRPartnerSection.vue
+++ b/apps/frontend/src/domains/pr/ui/sections/PRPartnerSection.vue
@@ -6,7 +6,13 @@
           <h2 class="partner-section__title">
             {{ t("prPage.partnerSection.title") }}
           </h2>
-          <Chip tone="primary" size="lg">{{ slotStateText }}</Chip>
+          <PuTag
+            tone="primary"
+            size="md"
+            :text="slotStateText"
+            variant="soft"
+            shape="pill"
+          />
         </div>
         <p class="partner-section__subtitle">{{ subtitleText }}</p>
       </div>
@@ -224,7 +230,7 @@ import type { PRPartnerSectionView } from "@/domains/pr/model/types";
 import { prPartnerProfilePath } from "@/domains/pr/routing/routes";
 import PRRosterItem from "@/domains/pr/ui/primitives/PRRosterItem.vue";
 import Button from "@/shared/ui/actions/Button.vue";
-import Chip from "@/shared/ui/display/Chip.vue";
+import { PuTag } from "@partner-up-dev/design-web";
 import {
   formatFriendlyTimeWindowLabel,
   formatLocalDateTimeValue,
diff --git a/apps/frontend/src/domains/pr/ui/sections/PRWaitlistActions.vue b/apps/frontend/src/domains/pr/ui/sections/PRWaitlistActions.vue
index 18a3436d0..81b5eb55d 100644
--- a/apps/frontend/src/domains/pr/ui/sections/PRWaitlistActions.vue
+++ b/apps/frontend/src/domains/pr/ui/sections/PRWaitlistActions.vue
@@ -5,13 +5,13 @@
     data-region="waitlist-actions"
     data-testid="pr-detail.waitlist-actions"
   >
-    <InlineNotice
+    <PuInlineNotice
       v-if="waitlistBlockedMessage"
       tone="warning"
       :message="waitlistBlockedMessage"
     />
 
-    <InlineNotice
+    <PuInlineNotice
       v-if="waitlistNoticeText"
       tone="info"
       :message="waitlistNoticeText"
@@ -122,7 +122,6 @@ import { useI18n } from "vue-i18n";
 import type { PRDetailView } from "@/domains/pr/model/types";
 import type { PRJoinEntryContext } from "@/domains/pr/model/pr-join-entry-context";
 import Button from "@/shared/ui/actions/Button.vue";
-import InlineNotice from "@/shared/ui/feedback/InlineNotice.vue";
 import ConfirmDialog from "@/shared/ui/overlay/ConfirmDialog.vue";
 import Modal from "@/shared/ui/overlay/Modal.vue";
 import { useBodyScrollLock } from "@/shared/ui/overlay/useBodyScrollLock";
@@ -142,6 +141,7 @@ import { useRegisterPRPendingReplayHandler } from "@/domains/pr/use-cases/usePRP
 import type { ApiError } from "@/shared/api/error";
 import { resolveTelemetryFailurePayload } from "@/shared/telemetry/result";
 import { trackEvent } from "@/shared/telemetry/track";
+import { PuInlineNotice } from "@partner-up-dev/design-web";
 
 type WaitlistSuccessPromptExpose = {
   close: () => void;
diff --git a/apps/frontend/src/domains/share/ui/methods/xhs/ShareToXiaohongshu.vue b/apps/frontend/src/domains/share/ui/methods/xhs/ShareToXiaohongshu.vue
index 3e24fd95c..8edfcee8b 100644
--- a/apps/frontend/src/domains/share/ui/methods/xhs/ShareToXiaohongshu.vue
+++ b/apps/frontend/src/domains/share/ui/methods/xhs/ShareToXiaohongshu.vue
@@ -22,7 +22,6 @@
       <!-- Caption Editor -->
       <textarea
         :value="caption?.caption"
-        rows="3"
         class="caption-textarea"
         :class="{ transitioning: isTransitioning }"
         :placeholder="t('share.xiaohongshu.captionPlaceholder')"
@@ -70,7 +69,7 @@
       <div class="actions-row">
         <FeedbackButton
           class="outline-action caption-clipboard-action"
-          tone="outline"
+          variant="outline"
           :state="copyFeedbackState"
           :disabled="!caption?.caption || copyState !== 'idle'"
           @click="handleCopyCaptionWithUrl"
diff --git a/apps/frontend/src/pages/AboutPage.vue b/apps/frontend/src/pages/AboutPage.vue
index 6c54a60bd..f45bee336 100644
--- a/apps/frontend/src/pages/AboutPage.vue
+++ b/apps/frontend/src/pages/AboutPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <PageScaffoldCentered class="about-page">
+  <PuPageScaffold content-placement="center" class="about-page">
     <template #header>
       <PageHeader
         :title="t('aboutPage.title')"
@@ -132,14 +132,13 @@
         </p>
       </div>
     </Modal>
-  </PageScaffoldCentered>
+  </PuPageScaffold>
 </template>
 
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
-import PageScaffoldCentered from "@/shared/ui/layout/PageScaffoldCentered.vue";
 import { useAnchorEvents } from "@/domains/event/queries/useAnchorEvents";
 import { frontendBuildInfo } from "@/shared/meta/build-info";
 import { useBackendBuildMetadata } from "@/shared/meta/queries/useBackendBuildMetadata";
@@ -147,6 +146,7 @@ import OfficialAccountQrModal from "@/shared/wechat/OfficialAccountQrModal.vue";
 import Modal from "@/shared/ui/overlay/Modal.vue";
 import Button from "@/shared/ui/actions/Button.vue";
 import { useBodyScrollLock } from "@/shared/ui/overlay/useBodyScrollLock";
+import { PuPageScaffold } from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const backendBuildMetadataQuery = useBackendBuildMetadata();
diff --git a/apps/frontend/src/pages/AdminAnalyticsPage.vue b/apps/frontend/src/pages/AdminAnalyticsPage.vue
index c0d1ab983..3e112f8e7 100644
--- a/apps/frontend/src/pages/AdminAnalyticsPage.vue
+++ b/apps/frontend/src/pages/AdminAnalyticsPage.vue
@@ -15,25 +15,25 @@
           </p>
         </div>
 
-        <FormField :label="t('adminAnalytics.startAtLabel')" for-id="analytics-start-at">
+        <PuFormItem :label="t('adminAnalytics.startAtLabel')" for-id="analytics-start-at">
           <input
             id="analytics-start-at"
             v-model="draftStartAt"
             class="analytics-input"
             type="datetime-local"
           />
-        </FormField>
+        </PuFormItem>
 
-        <FormField :label="t('adminAnalytics.endAtLabel')" for-id="analytics-end-at">
+        <PuFormItem :label="t('adminAnalytics.endAtLabel')" for-id="analytics-end-at">
           <input
             id="analytics-end-at"
             v-model="draftEndAt"
             class="analytics-input"
             type="datetime-local"
           />
-        </FormField>
+        </PuFormItem>
 
-        <FormField
+        <PuFormItem
           v-if="showsAnchorEventFilters"
           :label="t('adminAnalytics.eventIdLabel')"
           for-id="analytics-event-id"
@@ -46,9 +46,9 @@
             type="text"
             :placeholder="t('adminAnalytics.allEventsPlaceholder')"
           />
-        </FormField>
+        </PuFormItem>
 
-        <FormField
+        <PuFormItem
           v-if="showsAnchorEventFilters"
           :label="t('adminAnalytics.sourceSpmLabel')"
           for-id="analytics-spm"
@@ -60,9 +60,9 @@
             type="text"
             :placeholder="t('adminAnalytics.sourceSpmPlaceholder')"
           />
-        </FormField>
+        </PuFormItem>
 
-        <FormField
+        <PuFormItem
           v-if="showsAnchorEventFilters"
           :label="t('adminAnalytics.sourceQrLabel')"
           for-id="analytics-source-qr"
@@ -74,9 +74,9 @@
             type="text"
             :placeholder="t('adminAnalytics.sourceQrPlaceholder')"
           />
-        </FormField>
+        </PuFormItem>
 
-        <FormField
+        <PuFormItem
           v-if="showsAnchorEventFilters"
           :label="t('adminAnalytics.assignmentRevisionLabel')"
           for-id="analytics-assignment-revision"
@@ -88,9 +88,9 @@
             type="text"
             :placeholder="t('adminAnalytics.assignmentRevisionPlaceholder')"
           />
-        </FormField>
+        </PuFormItem>
 
-        <FormField
+        <PuFormItem
           v-if="showsAnchorEventFilters"
           :label="t('adminAnalytics.renderedModeLabel')"
           for-id="analytics-mode"
@@ -105,9 +105,9 @@
               {{ formatMode(mode) }}
             </option>
           </select>
-        </FormField>
+        </PuFormItem>
 
-        <InlineNotice
+        <PuInlineNotice
           v-if="filterError"
           tone="error"
           :message="filterError"
@@ -162,11 +162,11 @@
 
     <template #main>
       <div class="analytics-dashboard" data-testid="admin-analytics.dashboard">
-        <LoadingIndicator
+        <PuLoadingState
           v-if="isInitialLoading"
           :message="t('adminAnalytics.loading')"
         />
-        <InlineNotice
+        <PuInlineNotice
           v-else-if="dashboardError"
           tone="error"
           :title="t('adminAnalytics.loadFailedTitle')"
@@ -850,9 +850,7 @@ import {
   type AdminPRJoinFunnelResponse,
 } from "@/domains/admin/queries/useAdminAnalytics";
 import Button from "@/shared/ui/actions/Button.vue";
-import FormField from "@/shared/ui/forms/FormField.vue";
-import InlineNotice from "@/shared/ui/feedback/InlineNotice.vue";
-import LoadingIndicator from "@/shared/ui/feedback/LoadingIndicator.vue";
+import { PuFormItem, PuInlineNotice, PuLoadingState } from "@partner-up-dev/design-web";
 
 type ModeComparisonRow = AdminAnalyticsFunnelResponse["modes"][number];
 type SourceBreakdownRow = AdminAnalyticsFunnelResponse["sources"][number];
diff --git a/apps/frontend/src/pages/AdminAnchorEventPage.vue b/apps/frontend/src/pages/AdminAnchorEventPage.vue
index a85b324f4..2b8ee6f24 100644
--- a/apps/frontend/src/pages/AdminAnchorEventPage.vue
+++ b/apps/frontend/src/pages/AdminAnchorEventPage.vue
@@ -38,7 +38,7 @@
 
     <template #main>
       <div class="stack">
-        <LoadingIndicator
+        <PuLoadingState
           v-if="workspaceQuery.isLoading.value"
           :message="t('common.loading')"
         />
@@ -123,7 +123,6 @@ import AdminPageScaffold from "@/domains/admin/ui/layout/AdminPageScaffold.vue";
 import AdminRailPanel from "@/domains/admin/ui/layout/AdminRailPanel.vue";
 import AdminNavigationPanel from "@/domains/admin/ui/navigation/AdminNavigationPanel.vue";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import LoadingIndicator from "@/shared/ui/feedback/LoadingIndicator.vue";
 import Button from "@/shared/ui/actions/Button.vue";
 import ChoiceCard from "@/shared/ui/containers/ChoiceCard.vue";
 import AnchorEventBasicSection from "@/domains/admin/ui/anchor-event/sections/AnchorEventBasicSection.vue";
@@ -158,6 +157,7 @@ import type {
   EditableMeetingPointForm,
 } from "@/domains/admin/ui/anchor-event/anchorEventEditorTypes";
 import { validateManualPartnerBounds } from "@/lib/validation";
+import { PuLoadingState } from "@partner-up-dev/design-web";
 
 type Workspace = NonNullable<AdminAnchorEventWorkspaceResponse>;
 type EventRecord = Workspace["events"][number];
diff --git a/apps/frontend/src/pages/AdminCommerceFulfillmentPage.vue b/apps/frontend/src/pages/AdminCommerceFulfillmentPage.vue
index 92c5e5e77..5702a51e5 100644
--- a/apps/frontend/src/pages/AdminCommerceFulfillmentPage.vue
+++ b/apps/frontend/src/pages/AdminCommerceFulfillmentPage.vue
@@ -25,7 +25,7 @@
 
     <template #main>
       <div class="stack">
-        <LoadingIndicator
+        <PuLoadingState
           v-if="workspaceQuery.isLoading.value"
           :message="t('common.loading')"
         />
@@ -34,7 +34,7 @@
           :message="workspaceQuery.error.value.message"
           persistent
         />
-        <EmptyState
+        <PuEmptyState
           v-else-if="fulfillments.length === 0"
           :title="t('adminCommerceFulfillment.emptyStateTitle')"
           :description="t('adminCommerceFulfillment.emptyStateDescription')"
@@ -75,7 +75,7 @@
             <div class="form-stack">
               <label class="field">
                 <span class="field-label">{{ t("adminCommerceFulfillment.bookingNoteLabel") }}</span>
-                <textarea v-model="bookingNote" class="text-area" rows="5"></textarea>
+                <textarea v-model="bookingNote" class="text-area" ></textarea>
               </label>
               <div class="inline-actions">
                 <Button
@@ -112,7 +112,7 @@
               </div>
               <label class="field">
                 <span class="field-label">{{ t("adminCommerceFulfillment.cancellationNoteLabel") }}</span>
-                <textarea v-model="cancellationNote" class="text-area" rows="4"></textarea>
+                <textarea v-model="cancellationNote" class="text-area" ></textarea>
               </label>
               <div class="inline-actions">
                 <Button
@@ -151,7 +151,7 @@
               </label>
               <label class="field">
                 <span class="field-label">{{ t("adminCommerceFulfillment.entryNoteLabel") }}</span>
-                <textarea v-model="entryGuidance.note" class="text-area" rows="5"></textarea>
+                <textarea v-model="entryGuidance.note" class="text-area" ></textarea>
               </label>
               <div class="inline-actions">
                 <Button size="sm" type="button" :disabled="isSavingGuidance" @click="handleSaveGuidance">
@@ -194,10 +194,9 @@ import {
 } from "@/domains/admin-commerce/queries/useAdminCommerce";
 import { prettyJson } from "@/domains/admin-commerce/editor-json";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import EmptyState from "@/shared/ui/feedback/EmptyState.vue";
-import LoadingIndicator from "@/shared/ui/feedback/LoadingIndicator.vue";
 import Button from "@/shared/ui/actions/Button.vue";
 import ChoiceCard from "@/shared/ui/containers/ChoiceCard.vue";
+import { PuEmptyState, PuLoadingState } from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const { isAdmin, logout } = useAdminAccess();
diff --git a/apps/frontend/src/pages/AdminCommerceOfferPage.vue b/apps/frontend/src/pages/AdminCommerceOfferPage.vue
index a0807cea2..03ac499d5 100644
--- a/apps/frontend/src/pages/AdminCommerceOfferPage.vue
+++ b/apps/frontend/src/pages/AdminCommerceOfferPage.vue
@@ -31,7 +31,7 @@
 
     <template #main>
       <div class="stack">
-        <LoadingIndicator
+        <PuLoadingState
           v-if="workspaceQuery.isLoading.value"
           :message="t('common.loading')"
         />
@@ -135,9 +135,9 @@ import {
 } from "@/domains/admin-commerce/queries/useAdminCommerce";
 import PricingRulesEditor from "@/domains/admin-commerce/ui/pricing-rules/PricingRulesEditor.vue";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import LoadingIndicator from "@/shared/ui/feedback/LoadingIndicator.vue";
 import Button from "@/shared/ui/actions/Button.vue";
 import ChoiceCard from "@/shared/ui/containers/ChoiceCard.vue";
+import { PuLoadingState } from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const { isAdmin, logout } = useAdminAccess();
diff --git a/apps/frontend/src/pages/AdminCommerceOrderBillPage.vue b/apps/frontend/src/pages/AdminCommerceOrderBillPage.vue
index c67e4726d..3c261d71e 100644
--- a/apps/frontend/src/pages/AdminCommerceOrderBillPage.vue
+++ b/apps/frontend/src/pages/AdminCommerceOrderBillPage.vue
@@ -25,7 +25,7 @@
 
     <template #main>
       <div class="stack">
-        <LoadingIndicator
+        <PuLoadingState
           v-if="workspaceQuery.isLoading.value"
           :message="t('common.loading')"
         />
@@ -34,7 +34,7 @@
           :message="workspaceQuery.error.value.message"
           persistent
         />
-        <EmptyState
+        <PuEmptyState
           v-else-if="orders.length === 0"
           :title="t('adminCommerceOrderBill.emptyStateTitle')"
           :description="t('adminCommerceOrderBill.emptyStateDescription')"
@@ -107,9 +107,8 @@ import { useAdminAccess } from "@/domains/admin/use-cases/useAdminAccess";
 import { useAdminCommerceOrderBillWorkspace } from "@/domains/admin-commerce/queries/useAdminCommerce";
 import { prettyJson } from "@/domains/admin-commerce/editor-json";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import EmptyState from "@/shared/ui/feedback/EmptyState.vue";
-import LoadingIndicator from "@/shared/ui/feedback/LoadingIndicator.vue";
 import ChoiceCard from "@/shared/ui/containers/ChoiceCard.vue";
+import { PuEmptyState, PuLoadingState } from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const { isAdmin, logout } = useAdminAccess();
diff --git a/apps/frontend/src/pages/AdminCommercePlacementPage.vue b/apps/frontend/src/pages/AdminCommercePlacementPage.vue
index dab7a0b2f..b97f81b16 100644
--- a/apps/frontend/src/pages/AdminCommercePlacementPage.vue
+++ b/apps/frontend/src/pages/AdminCommercePlacementPage.vue
@@ -31,7 +31,7 @@
 
     <template #main>
       <div class="stack">
-        <LoadingIndicator
+        <PuLoadingState
           v-if="workspaceQuery.isLoading.value"
           :message="t('common.loading')"
         />
@@ -182,9 +182,9 @@ import {
 } from "@/domains/admin-commerce/queries/useAdminCommerce";
 import PlacementMatchingRulesEditor from "@/domains/admin-commerce/ui/placement-matching-rules/PlacementMatchingRulesEditor.vue";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import LoadingIndicator from "@/shared/ui/feedback/LoadingIndicator.vue";
 import Button from "@/shared/ui/actions/Button.vue";
 import ChoiceCard from "@/shared/ui/containers/ChoiceCard.vue";
+import { PuLoadingState } from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const { isAdmin, logout } = useAdminAccess();
diff --git a/apps/frontend/src/pages/AdminFeedbackQuestionnairesPage.vue b/apps/frontend/src/pages/AdminFeedbackQuestionnairesPage.vue
index fccfbd612..d946c2857 100644
--- a/apps/frontend/src/pages/AdminFeedbackQuestionnairesPage.vue
+++ b/apps/frontend/src/pages/AdminFeedbackQuestionnairesPage.vue
@@ -5,7 +5,7 @@
     </template>
 
     <template #main>
-      <LoadingIndicator
+      <PuLoadingState
         v-if="templatesQuery.isLoading.value"
         :message="t('common.loading')"
       />
@@ -153,8 +153,8 @@ import AdminRailPanel from "@/domains/admin/ui/layout/AdminRailPanel.vue";
 import BentoItem from "@/domains/admin/ui/layout/BentoItem.vue";
 import BentoLayout from "@/domains/admin/ui/layout/BentoLayout.vue";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import LoadingIndicator from "@/shared/ui/feedback/LoadingIndicator.vue";
 import Button from "@/shared/ui/actions/Button.vue";
+import { PuLoadingState } from "@partner-up-dev/design-web";
 
 type TemplateRecord = AdminFeedbackQuestionnaireTemplatesResponse[number];
 
diff --git a/apps/frontend/src/pages/AdminLoginPage.vue b/apps/frontend/src/pages/AdminLoginPage.vue
index 6a82ae8d9..a88e74702 100644
--- a/apps/frontend/src/pages/AdminLoginPage.vue
+++ b/apps/frontend/src/pages/AdminLoginPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <PageScaffoldCentered class="admin-login-page">
+  <PuPageScaffold content-placement="center" class="admin-login-page">
     <template #header>
       <header class="admin-login-page__header">
         <p class="admin-login-page__eyebrow">{{ t("adminCommon.title") }}</p>
@@ -54,7 +54,7 @@
         />
       </div>
     </section>
-  </PageScaffoldCentered>
+  </PuPageScaffold>
 </template>
 
 <script setup lang="ts">
@@ -64,8 +64,8 @@ import { useI18n } from "vue-i18n";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
 import { useAdminLogin } from "@/domains/admin/queries/useAdminLogin";
 import { useAdminSessionStore } from "@/domains/admin/use-cases/useAdminSessionStore";
-import PageScaffoldCentered from "@/shared/ui/layout/PageScaffoldCentered.vue";
-import Button from "@/shared/ui/actions/Button.vue";
+import Button from "@/shared/ui/actions/Button.vue";
+import { PuPageScaffold } from "@partner-up-dev/design-web";
 
 const route = useRoute();
 const router = useRouter();
diff --git a/apps/frontend/src/pages/AdminPaymentPage.vue b/apps/frontend/src/pages/AdminPaymentPage.vue
index da6274fb3..d6615f5d4 100644
--- a/apps/frontend/src/pages/AdminPaymentPage.vue
+++ b/apps/frontend/src/pages/AdminPaymentPage.vue
@@ -41,7 +41,7 @@
 
     <template #main>
       <div class="stack">
-        <LoadingIndicator
+        <PuLoadingState
           v-if="workspaceQuery.isLoading.value"
           :message="t('common.loading')"
         />
@@ -160,7 +160,6 @@
                   <textarea
                     v-model="form.merchantPrivateKeyPem"
                     class="text-area"
-                    rows="7"
                     autocomplete="off"
                     spellcheck="false"
                     :placeholder="secretPlaceholder"
@@ -172,7 +171,6 @@
                   <textarea
                     v-model="form.merchantCertificatePem"
                     class="text-area"
-                    rows="5"
                     autocomplete="off"
                     spellcheck="false"
                     :placeholder="optionalSecretPlaceholder"
@@ -265,9 +263,9 @@ import {
   type AdminPaymentProviderWorkspaceResponse,
 } from "@/domains/admin-payment/queries/useAdminPayment";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import LoadingIndicator from "@/shared/ui/feedback/LoadingIndicator.vue";
 import Button from "@/shared/ui/actions/Button.vue";
 import ChoiceCard from "@/shared/ui/containers/ChoiceCard.vue";
+import { PuLoadingState } from "@partner-up-dev/design-web";
 
 const CREATE_PROVIDER_ID = "__create__";
 
diff --git a/apps/frontend/src/pages/AdminPoisPage.vue b/apps/frontend/src/pages/AdminPoisPage.vue
index b928b49a5..eb613fb8b 100644
--- a/apps/frontend/src/pages/AdminPoisPage.vue
+++ b/apps/frontend/src/pages/AdminPoisPage.vue
@@ -17,7 +17,7 @@
 
     <template #main>
       <div class="stack">
-        <LoadingIndicator
+        <PuLoadingState
           v-if="poisQuery.isLoading.value"
           :message="t('common.loading')"
         />
@@ -86,7 +86,7 @@ import { useAdminAccess } from "@/domains/admin/use-cases/useAdminAccess";
 import { useAdminNavigationSection } from "@/domains/admin/use-cases/useAdminNavigationSection";
 import { useAdminPoiManagementWorkspace } from "@/domains/admin/use-cases/poi/useAdminPoiManagementWorkspace";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import LoadingIndicator from "@/shared/ui/feedback/LoadingIndicator.vue";
+import { PuLoadingState } from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const { isAdmin, logout } = useAdminAccess();
diff --git a/apps/frontend/src/pages/AdminRideHailingPage.vue b/apps/frontend/src/pages/AdminRideHailingPage.vue
index fb60a709a..17783b8c8 100644
--- a/apps/frontend/src/pages/AdminRideHailingPage.vue
+++ b/apps/frontend/src/pages/AdminRideHailingPage.vue
@@ -41,7 +41,7 @@
 
     <template #main>
       <div class="stack">
-        <LoadingIndicator
+        <PuLoadingState
           v-if="workspaceQuery.isLoading.value"
           :message="t('common.loading')"
         />
@@ -204,9 +204,9 @@ import {
   type AdminRideHailingProviderWorkspaceResponse,
 } from "@/domains/admin-ride-hailing/queries/useAdminRideHailing";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import LoadingIndicator from "@/shared/ui/feedback/LoadingIndicator.vue";
 import Button from "@/shared/ui/actions/Button.vue";
 import ChoiceCard from "@/shared/ui/containers/ChoiceCard.vue";
+import { PuLoadingState } from "@partner-up-dev/design-web";
 
 const CREATE_PROVIDER_ID = "__create__";
 
diff --git a/apps/frontend/src/pages/AnchorEventLandingPage.vue b/apps/frontend/src/pages/AnchorEventLandingPage.vue
index 253175104..41fa75cc9 100644
--- a/apps/frontend/src/pages/AnchorEventLandingPage.vue
+++ b/apps/frontend/src/pages/AnchorEventLandingPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <FooterRevealPageScaffold
+  <PuPageScaffold footer-placement="reveal"
     :class="[
       'anchor-event-landing-page',
       { 'anchor-event-landing-page--card-rich': resolvedMode === 'CARD_RICH' },
@@ -93,26 +93,39 @@
           class="anchor-event-landing-page__mode-switch-shell"
           data-testid="anchor-event-landing.mode-switch"
         >
-          <SegmentedControl
+          <PuSegmented
             class="anchor-event-landing-page__mode-switch"
-            block
             :model-value="resolvedMode"
-            :options="modeOptions"
             :aria-label="t('anchorEvent.viewMode.ariaLabel')"
+            full-width
+            equal-width
             @update:model-value="handleModeControlChange"
-          />
+          >
+            <PuSegmentedItem
+              v-for="option in modeOptions"
+              :key="String(option.value)"
+              :value="option.value"
+              :label="option.label"
+              :disabled="option.disabled"
+              :data-testid="option.testId"
+            >
+              <template v-if="option.icon" #leading>
+                <span :class="option.icon" aria-hidden="true" />
+              </template>
+            </PuSegmentedItem>
+          </PuSegmented>
         </div>
         <PageFooter variant="brand" data-region="footer" />
       </div>
     </template>
-  </FooterRevealPageScaffold>
+  </PuPageScaffold>
 
   <BottomDrawer
     :open="showOtherEventsDrawer"
     :title="t('anchorEvent.otherEvents.title')"
     @close="showOtherEventsDrawer = false"
   >
-    <LoadingIndicator
+    <PuLoadingState
       v-if="otherEventsQuery.isLoading.value"
       :message="t('common.loading')"
     />
@@ -144,7 +157,6 @@ import { useRoute, useRouter, type RouteLocationRaw } from "vue-router";
 import { useI18n } from "vue-i18n";
 import PageFooter from "@/shared/ui/sections/PageFooter.vue";
 import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
-import FooterRevealPageScaffold from "@/shared/ui/layout/FooterRevealPageScaffold.vue";
 import AnchorEventCardModeSurface from "@/domains/event/ui/surfaces/AnchorEventCardModeSurface/AnchorEventCardModeSurface.vue";
 import AnchorEventFormModeSurface from "@/domains/event/ui/surfaces/AnchorEventFormModeSurface.vue";
 import AnchorEventListModeSurface from "@/domains/event/ui/surfaces/AnchorEventListModeSurface.vue";
@@ -191,15 +203,17 @@ import {
 } from "@/processes/wechat/pending-wechat-action";
 import Button from "@/shared/ui/actions/Button.vue";
 import BottomDrawer from "@/shared/ui/overlay/BottomDrawer.vue";
-import LoadingIndicator from "@/shared/ui/feedback/LoadingIndicator.vue";
-import SegmentedControl, {
-  type SegmentedControlOption,
-  type SegmentedControlValue,
-} from "@/shared/ui/controls/SegmentedControl.vue";
 import AnchorEventRadioCardCarousel from "@/domains/event/ui/composites/AnchorEventRadioCardCarousel.vue";
 import { useOfficialAccountFollowPrompt } from "@/domains/marketing/use-cases/useOfficialAccountFollowPrompt";
 import { trackEvent } from "@/shared/telemetry/track";
 import { resolveTelemetryFailurePayload } from "@/shared/telemetry/result";
+import {
+  PuLoadingState,
+  PuPageScaffold,
+  PuSegmented,
+  PuSegmentedItem,
+  type PuSegmentedValue,
+} from "@partner-up-dev/design-web";
 import {
   buildAnchorEventFunnelPayload,
   type AnchorEventFunnelContext,
@@ -210,6 +224,13 @@ import {
 } from "@/domains/event/model/anchorEventLandingModeStorage";
 
 type TimeWindow = [string | null, string | null];
+type SegmentedOption = {
+  value: PuSegmentedValue;
+  label: string;
+  icon?: string;
+  testId?: string;
+  disabled?: boolean;
+};
 
 type FormModeResultState = "selection" | "no-match";
 type FormModeSurfaceExposed = {
@@ -235,7 +256,7 @@ const OFFICIAL_ACCOUNT_FOLLOW_PROMPT_DELAY_MS = 3000;
 
 const noop = () => undefined;
 
-const modeOptions = computed<SegmentedControlOption[]>(() => [
+const modeOptions = computed<SegmentedOption[]>(() => [
   {
     value: "LIST",
     label: t("anchorEvent.viewMode.list"),
@@ -429,7 +450,7 @@ const handleLandingBack = async () => {
   await router.replace(backFallbackTo);
 };
 
-const handleModeControlChange = (value: SegmentedControlValue) => {
+const handleModeControlChange = (value: PuSegmentedValue) => {
   const mode = normalizeAnchorEventLandingMode(value);
   const resolvedEventId = eventId.value;
   if (mode === null || resolvedEventId === null) {
diff --git a/apps/frontend/src/pages/BIEntryPage.vue b/apps/frontend/src/pages/BIEntryPage.vue
index 8466035b6..b05cc02f6 100644
--- a/apps/frontend/src/pages/BIEntryPage.vue
+++ b/apps/frontend/src/pages/BIEntryPage.vue
@@ -1,9 +1,9 @@
 <template>
-  <PageScaffoldCentered class="bi-entry-page">
+  <PuPageScaffold content-placement="center" class="bi-entry-page">
     <section class="bi-entry-card">
       <h1>BI 登录</h1>
 
-      <LoadingIndicator v-if="isPending" message="正在进入 BI 看板" />
+      <PuLoadingState v-if="isPending" message="正在进入 BI 看板" />
 
       <template v-else>
         <ErrorToast v-if="errorMessage" :message="errorMessage" persistent />
@@ -12,7 +12,7 @@
         </Button>
       </template>
     </section>
-  </PageScaffoldCentered>
+  </PuPageScaffold>
 </template>
 
 <script setup lang="ts">
@@ -22,8 +22,7 @@ import { useAdminSessionStore } from "@/domains/admin/use-cases/useAdminSessionS
 import { adminClient } from "@/lib/admin-rpc";
 import Button from "@/shared/ui/actions/Button.vue";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import LoadingIndicator from "@/shared/ui/feedback/LoadingIndicator.vue";
-import PageScaffoldCentered from "@/shared/ui/layout/PageScaffoldCentered.vue";
+import { PuLoadingState, PuPageScaffold } from "@partner-up-dev/design-web";
 
 const ANALYTICS_SEED_USER_ID = "00000000-0000-0000-0000-000000000002";
 
diff --git a/apps/frontend/src/pages/CommerceBillDetailPage.vue b/apps/frontend/src/pages/CommerceBillDetailPage.vue
index 06952eeea..f1357ac7f 100644
--- a/apps/frontend/src/pages/CommerceBillDetailPage.vue
+++ b/apps/frontend/src/pages/CommerceBillDetailPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <FullScreenPageScaffold class="bill-detail-page" data-testid="bill-detail.page">
+  <PuPageScaffold viewport="screen" class="bill-detail-page" data-testid="bill-detail.page">
     <template #header>
       <PageHeader
         title="账单详情"
@@ -9,14 +9,14 @@
     </template>
 
     <div class="bill-detail-page__body">
-      <InlineNotice
+      <PuInlineNotice
         v-if="billId === null"
         tone="error"
         title="账单无效"
         message="缺少账单编号。"
       />
 
-      <InlineNotice
+      <PuInlineNotice
         v-else-if="billQuery.isError.value"
         tone="error"
         title="无法加载账单"
@@ -72,7 +72,7 @@
 
           <ActionLink
             :to="{ path: `/orders/${detail.order.id}` }"
-            tone="outline"
+            variant="outline"
             data-testid="bill-detail.order-link"
           >
             返回订单详情
@@ -121,16 +121,14 @@
         </PuCard>
       </template>
     </div>
-  </FullScreenPageScaffold>
+  </PuPageScaffold>
 </template>
 
 <script setup lang="ts">
 import { computed } from "vue";
 import { useRoute } from "vue-router";
-import { PuCard } from "@partner-up-dev/design-web";
-import FullScreenPageScaffold from "@/shared/ui/layout/FullScreenPageScaffold.vue";
+import { PuCard, PuInlineNotice, PuPageScaffold } from "@partner-up-dev/design-web";
 import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
-import InlineNotice from "@/shared/ui/feedback/InlineNotice.vue";
 import ActionLink from "@/shared/ui/actions/ActionLink.vue";
 import { useBillDetail } from "@/domains/commerce/queries/useCommerce";
 
diff --git a/apps/frontend/src/pages/CommerceOrderDetailPage.vue b/apps/frontend/src/pages/CommerceOrderDetailPage.vue
index e90209d35..f4ce22b64 100644
--- a/apps/frontend/src/pages/CommerceOrderDetailPage.vue
+++ b/apps/frontend/src/pages/CommerceOrderDetailPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <FullScreenPageScaffold class="order-detail-page" data-testid="order-detail.page">
+  <PuPageScaffold viewport="screen" class="order-detail-page" data-testid="order-detail.page">
     <template #header>
       <PageHeader
         title="订单详情"
@@ -10,7 +10,7 @@
           <ActionLink
             :to="{ name: 'contact-support' }"
             appearance="pill"
-            tone="outline"
+            variant="outline"
             size="sm"
             data-testid="order-detail.contact-support.open"
           >
@@ -21,14 +21,14 @@
     </template>
 
     <div class="order-detail-page__body">
-      <InlineNotice
+      <PuInlineNotice
         v-if="orderId === null"
         tone="error"
         title="订单无效"
         message="缺少订单编号。"
       />
 
-      <InlineNotice
+      <PuInlineNotice
         v-else-if="orderQuery.isError.value"
         tone="error"
         title="无法加载订单"
@@ -201,7 +201,7 @@
             取消订单
           </Button>
 
-          <InlineNotice
+          <PuInlineNotice
             v-if="isCancellationPending"
             tone="info"
             title="取消处理中"
@@ -209,7 +209,7 @@
             data-testid="order-detail.rental.cancellation-pending"
           />
 
-          <InlineNotice
+          <PuInlineNotice
             v-if="detail.order.status === 'CANCELLED'"
             tone="success"
             title="订单已取消"
@@ -239,7 +239,7 @@
             模拟确认预订
           </Button>
 
-          <InlineNotice
+          <PuInlineNotice
             v-if="detail.fulfillment?.bookingStatus === 'BOOKING_CONFIRMED'"
             tone="success"
             title="预约成功"
@@ -250,16 +250,14 @@
         </template>
       </template>
     </div>
-  </FullScreenPageScaffold>
+  </PuPageScaffold>
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted } from "vue";
 import { useRoute } from "vue-router";
-import { PuCard } from "@partner-up-dev/design-web";
-import FullScreenPageScaffold from "@/shared/ui/layout/FullScreenPageScaffold.vue";
+import { PuCard, PuInlineNotice, PuPageScaffold } from "@partner-up-dev/design-web";
 import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
-import InlineNotice from "@/shared/ui/feedback/InlineNotice.vue";
 import Button from "@/shared/ui/actions/Button.vue";
 import ActionLink from "@/shared/ui/actions/ActionLink.vue";
 import {
diff --git a/apps/frontend/src/pages/ContactAuthorPage.vue b/apps/frontend/src/pages/ContactAuthorPage.vue
index f460d53fe..3da45db81 100644
--- a/apps/frontend/src/pages/ContactAuthorPage.vue
+++ b/apps/frontend/src/pages/ContactAuthorPage.vue
@@ -1,10 +1,10 @@
 <template>
-  <PageScaffoldCentered class="contact-author-page">
+  <PuPageScaffold content-placement="center" class="contact-author-page">
     <template #header>
       <PageHeader :title="t('contactAuthorPage.title')" />
     </template>
 
-    <LoadingIndicator
+    <PuLoadingState
       v-if="publicConfigQuery.isLoading.value"
       :message="t('common.loading')"
     />
@@ -33,17 +33,16 @@
         </p>
       </div>
     </section>
-  </PageScaffoldCentered>
+  </PuPageScaffold>
 </template>
 
 <script setup lang="ts">
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
-import LoadingIndicator from "@/shared/ui/feedback/LoadingIndicator.vue";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
 import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
-import PageScaffoldCentered from "@/shared/ui/layout/PageScaffoldCentered.vue";
 import { PUBLIC_CONFIG_KEYS, usePublicConfig } from "@/shared/config/queries/usePublicConfig";
+import { PuLoadingState, PuPageScaffold } from "@partner-up-dev/design-web";
 
 const DEFAULT_AUTHOR_QR_CODE_URL =
   "https://oss-app.partner-up.cn/5264495b163398842ad04ee5ee42a3df.jpg";
diff --git a/apps/frontend/src/pages/ContactSupportPage.vue b/apps/frontend/src/pages/ContactSupportPage.vue
index 2d4be4bbb..3df0087a7 100644
--- a/apps/frontend/src/pages/ContactSupportPage.vue
+++ b/apps/frontend/src/pages/ContactSupportPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <PageScaffoldCentered class="contact-support-page">
+  <PuPageScaffold content-placement="center" class="contact-support-page">
     <template #header>
       <PageHeader :title="t('contactSupportPage.title')" />
     </template>
@@ -9,9 +9,9 @@
       :aria-label="t('contactSupportPage.actionsTitle')"
     >
       <div class="contact-card contact-card--support">
-        <Chip tone="secondary" size="lg">
+        <PuChip tone="secondary" size="lg">
           {{ t("contactSupportPage.supportBadge") }}
-        </Chip>
+        </PuChip>
         <div class="contact-text">
           <h2>{{ t("contactSupportPage.supportTitle") }}</h2>
           <p>{{ t("contactSupportPage.supportDescription") }}</p>
@@ -29,9 +29,9 @@
       </div>
 
       <div class="contact-card contact-card--beta-group">
-        <Chip class="contact-badge--beta-group" tone="secondary" size="lg">
+        <PuChip class="contact-badge--beta-group" tone="secondary" size="lg">
           {{ t("contactSupportPage.betaGroupBadge") }}
-        </Chip>
+        </PuChip>
         <div class="contact-text">
           <h2>{{ t("contactSupportPage.betaGroupTitle") }}</h2>
           <p>{{ t("contactSupportPage.betaGroupDescription") }}</p>
@@ -41,7 +41,7 @@
           class="contact-action contact-action--beta-group"
           :to="{ name: 'about', hash: '#beta-groups' }"
           appearance="pill"
-          tone="outline"
+          variant="outline"
         >
           {{ t("contactSupportPage.betaGroupAction") }}
         </ActionLink>
@@ -66,7 +66,7 @@
       :missing-text="t('contactSupportPage.supportQrMissing')"
       @close="supportQrModalOpen = false"
     />
-  </PageScaffoldCentered>
+  </PuPageScaffold>
 </template>
 
 <script setup lang="ts">
@@ -76,12 +76,11 @@ import { useI18n } from "vue-i18n";
 import SupportContactAction from "@/domains/support/ui/sections/SupportContactAction.vue";
 import SupportContactQrModal from "@/domains/support/ui/sections/SupportContactQrModal.vue";
 import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
-import PageScaffoldCentered from "@/shared/ui/layout/PageScaffoldCentered.vue";
-import Chip from "@/shared/ui/display/Chip.vue";
 import ActionLink from "@/shared/ui/actions/ActionLink.vue";
 import { isWeChatBrowser } from "@/shared/browser/isWeChatBrowser";
 import { useWeChatMiniProgramWebView } from "@/shared/wechat/useWeChatMiniProgramWebView";
 import { PUBLIC_CONFIG_KEYS, usePublicConfig } from "@/shared/config/queries/usePublicConfig";
+import { PuChip, PuPageScaffold } from "@partner-up-dev/design-web";
 
 const DEFAULT_SUPPORT_LINK_WECHAT_IN =
   "https://work.weixin.qq.com/nl/act/p/3f8820e724cb44c5";
diff --git a/apps/frontend/src/pages/EventPRSearchPage.vue b/apps/frontend/src/pages/EventPRSearchPage.vue
index a426393ef..ac0a3b85e 100644
--- a/apps/frontend/src/pages/EventPRSearchPage.vue
+++ b/apps/frontend/src/pages/EventPRSearchPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <PageScaffold class="event-pr-search-page" data-page="event-pr-search">
+  <PuPageScaffold class="event-pr-search-page" data-page="event-pr-search">
     <PageHeader
       :title="pageTitle"
       :subtitle="pageSubtitle"
@@ -24,7 +24,7 @@
       {{ t("common.loading") }}
     </div>
 
-    <EmptyState
+    <PuEmptyState
       v-else-if="eventsQuery.isError.value"
       :title="t('eventPRSearch.loadEventsFailed')"
       :description="t('eventPRSearch.loadEventsFailedHint')"
@@ -35,9 +35,9 @@
           {{ t("eventPRSearch.actions.goEventPlaza") }}
         </Button>
       </template>
-    </EmptyState>
+    </PuEmptyState>
 
-    <EmptyState
+    <PuEmptyState
       v-else-if="availableEvents.length === 0"
       :title="t('eventPRSearch.emptyEventsTitle')"
       :description="t('eventPRSearch.emptyEventsDescription')"
@@ -48,7 +48,7 @@
           {{ t("eventPRSearch.actions.backHome") }}
         </Button>
       </template>
-    </EmptyState>
+    </PuEmptyState>
 
     <template v-else-if="!isResultMode">
       <EventPRSearchCriteriaForm
@@ -79,7 +79,7 @@
         {{ t("common.loading") }}
       </div>
 
-      <EmptyState
+      <PuEmptyState
         v-else-if="searchQuery.isError.value"
         :title="t('eventPRSearch.loadFailed')"
         :description="searchErrorMessage"
@@ -93,7 +93,7 @@
             {{ t("eventPRSearch.actions.goEventPlaza") }}
           </Button>
         </template>
-      </EmptyState>
+      </PuEmptyState>
 
       <template v-else>
         <p class="event-pr-search-page__summary">
@@ -114,7 +114,7 @@
           />
         </div>
 
-        <EmptyState
+        <PuEmptyState
           v-else
           :title="t('eventPRSearch.emptyResultTitle')"
           :description="t('eventPRSearch.emptyResultDescription')"
@@ -128,7 +128,7 @@
               {{ t("eventPRSearch.actions.goEventPlaza") }}
             </Button>
           </template>
-        </EmptyState>
+        </PuEmptyState>
       </template>
 
       <BottomDrawer
@@ -158,7 +158,7 @@
         </template>
       </BottomDrawer>
     </template>
-  </PageScaffold>
+  </PuPageScaffold>
 </template>
 
 <script setup lang="ts">
@@ -167,8 +167,7 @@ import { computed, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRoute, useRouter } from "vue-router";
 import Button from "@/shared/ui/actions/Button.vue";
-import EmptyState from "@/shared/ui/feedback/EmptyState.vue";
-import PageScaffold from "@/shared/ui/layout/PageScaffold.vue";
+import { PuEmptyState, PuPageScaffold } from "@partner-up-dev/design-web";
 import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
 import BottomDrawer from "@/shared/ui/overlay/BottomDrawer.vue";
 import { useAnchorEvents } from "@/domains/event/queries/useAnchorEvents";
diff --git a/apps/frontend/src/pages/EventPlazaPage.vue b/apps/frontend/src/pages/EventPlazaPage.vue
index 1d213d1ca..53e47088f 100644
--- a/apps/frontend/src/pages/EventPlazaPage.vue
+++ b/apps/frontend/src/pages/EventPlazaPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <PageScaffold class="event-plaza-page">
+  <PuPageScaffold class="event-plaza-page">
     <PageHeader
       :title="t('eventPlaza.title')"
       :subtitle="t('eventPlaza.subtitle')"
@@ -9,7 +9,7 @@
           :to="{ name: 'event-pr-search' }"
           class="event-plaza-page__search-link"
           appearance="pill"
-          tone="outline"
+          variant="outline"
           size="sm"
         >
           {{ t("eventPlaza.searchAction") }}
@@ -36,7 +36,7 @@
     <div v-else class="empty-state">
       {{ t("eventPlaza.noEvents") }}
     </div>
-  </PageScaffold>
+  </PuPageScaffold>
 </template>
 
 <script setup lang="ts">
@@ -44,10 +44,10 @@ import { ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
 import EventCard from "@/domains/event/ui/primitives/EventCard.vue";
-import PageScaffold from "@/shared/ui/layout/PageScaffold.vue";
-import ActionLink from "@/shared/ui/actions/ActionLink.vue";
-import { useAnchorEvents } from "@/domains/event/queries/useAnchorEvents";
-import type { AnchorEventListResponse } from "@/domains/event/model/types";
+import ActionLink from "@/shared/ui/actions/ActionLink.vue";
+import { useAnchorEvents } from "@/domains/event/queries/useAnchorEvents";
+import type { AnchorEventListResponse } from "@/domains/event/model/types";
+import { PuPageScaffold } from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const { data: events, isLoading, isError } = useAnchorEvents();
diff --git a/apps/frontend/src/pages/LocationApplicationPage.vue b/apps/frontend/src/pages/LocationApplicationPage.vue
index 8b8eab3a1..753f63aa3 100644
--- a/apps/frontend/src/pages/LocationApplicationPage.vue
+++ b/apps/frontend/src/pages/LocationApplicationPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <PageScaffoldFlow class="location-application-page">
+  <PuPageScaffold class="location-application-page">
     <template #header>
       <PageHeader
         :title="t('locationApplicationPage.title')"
@@ -9,7 +9,7 @@
     </template>
 
     <div class="location-application-page__body">
-      <InlineNotice
+      <PuInlineNotice
         v-if="submitSuccessTitle"
         tone="success"
         :message="submitSuccessTitle"
@@ -18,7 +18,7 @@
 
       <PuCard as="section" gap="md">
         <form class="application-form" @submit.prevent="handleSubmit">
-          <FormField
+          <PuFormItem
             :label="t('locationApplicationPage.nameLabel')"
             for-id="location-application-name"
             required
@@ -31,9 +31,9 @@
               maxlength="80"
               :placeholder="t('locationApplicationPage.namePlaceholder')"
             />
-          </FormField>
+          </PuFormItem>
 
-          <FormField
+          <PuFormItem
             :label="t('locationApplicationPage.imageLabel')"
             for-id="location-application-image-url"
             :hint="imageHint"
@@ -50,7 +50,7 @@
               :preview-alt="t('locationApplicationPage.imagePreviewAlt')"
               :allow-url-input="false"
             />
-          </FormField>
+          </PuFormItem>
 
           <Button
             appearance="rect"
@@ -72,7 +72,7 @@
           </div>
         </div>
 
-        <LoadingIndicator
+        <PuLoadingState
           v-if="applicationsQuery.isLoading.value"
           :message="t('common.loading')"
         />
@@ -94,9 +94,13 @@
             <div class="application-card__body">
               <div class="application-card__title-row">
                 <h3>{{ application.title }}</h3>
-                <Chip :tone="statusChipTone(application.status)" size="sm">
-                  {{ statusLabel(application.status) }}
-                </Chip>
+                <PuTag
+                  :tone="statusTagTone(application.status)"
+                  :text="statusLabel(application.status)"
+                  size="sm"
+                  variant="soft"
+                  shape="pill"
+                />
               </div>
               <p class="application-card__meta">
                 {{ formatCreatedAt(application.createdAt) }}
@@ -109,22 +113,17 @@
         </div>
       </PuCard>
     </div>
-  </PageScaffoldFlow>
+  </PuPageScaffold>
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from "vue";
 import { useRoute, type RouteLocationRaw } from "vue-router";
 import { useI18n } from "vue-i18n";
-import { PuCard } from "@partner-up-dev/design-web";
+import { PuCard, PuFormItem, PuInlineNotice, PuLoadingState, PuPageScaffold, PuTag } from "@partner-up-dev/design-web";
 import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
-import PageScaffoldFlow from "@/shared/ui/layout/PageScaffoldFlow.vue";
-import FormField from "@/shared/ui/forms/FormField.vue";
 import Button from "@/shared/ui/actions/Button.vue";
-import Chip from "@/shared/ui/display/Chip.vue";
-import InlineNotice from "@/shared/ui/feedback/InlineNotice.vue";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import LoadingIndicator from "@/shared/ui/feedback/LoadingIndicator.vue";
 import ImageUrlInput from "@/shared/upload/ImageUrlInput.vue";
 import {
   useMyPoiApplications,
@@ -207,7 +206,7 @@ const handleSubmit = async () => {
 const statusLabel = (status: PoiApplicationStatus): string =>
   t(`locationApplicationPage.status.${status}`);
 
-const statusChipTone = (
+const statusTagTone = (
   status: PoiApplicationStatus,
 ): "primary" | "secondary" | "danger" =>
   status === "PUBLISHED"
diff --git a/apps/frontend/src/pages/LocationPickerPage.vue b/apps/frontend/src/pages/LocationPickerPage.vue
index 4b6b4d6d4..d032dd761 100644
--- a/apps/frontend/src/pages/LocationPickerPage.vue
+++ b/apps/frontend/src/pages/LocationPickerPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <FullScreenPageScaffold class="location-picker-page">
+  <PuPageScaffold viewport="screen" class="location-picker-page">
     <template #header>
       <div class="location-picker-page__header">
         <Button
@@ -24,7 +24,7 @@
       @pick="handlePick"
       @cancel="goBack"
     />
-  </FullScreenPageScaffold>
+  </PuPageScaffold>
 </template>
 
 <script setup lang="ts">
@@ -32,9 +32,9 @@ import { ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
 import Button from "@/shared/ui/actions/Button.vue";
-import FullScreenPageScaffold from "@/shared/ui/layout/FullScreenPageScaffold.vue";
 import LocationPickerPanel from "@/domains/location/ui/LocationPickerPanel.vue";
 import type { PickedLocation } from "@/domains/location/model/location-picker";
+import { PuPageScaffold } from "@partner-up-dev/design-web";
 import {
   readLastPickedLocation,
   saveLastPickedLocation,
diff --git a/apps/frontend/src/pages/MePage.vue b/apps/frontend/src/pages/MePage.vue
index eef70ab6a..6eda0b7da 100644
--- a/apps/frontend/src/pages/MePage.vue
+++ b/apps/frontend/src/pages/MePage.vue
@@ -1,5 +1,5 @@
 <template>
-  <PageScaffoldFlow class="me-page">
+  <PuPageScaffold class="me-page">
     <template #header>
       <PageHeader
         :title="t('mePage.title')"
@@ -8,7 +8,7 @@
     </template>
 
     <div class="me-page__body">
-      <InlineNotice
+      <PuInlineNotice
         v-if="bindFeedbackMessage"
         :tone="bindFeedbackCode === 'success' ? 'success' : 'error'"
         :message="bindFeedbackMessage"
@@ -16,7 +16,7 @@
 
       <ErrorToast v-if="errorMessage" :message="errorMessage" persistent />
 
-      <LoadingIndicator
+      <PuLoadingState
         v-if="
           userSessionStore.isAuthenticated && currentUserQuery.isLoading.value
         "
@@ -52,16 +52,18 @@
         </div>
 
         <div class="profile-panel">
-          <Avatar
-            :src="avatarUrl"
+          <PuImg
+            :src="avatarUrl ?? ''"
             :alt="t('mePage.profile.avatarAlt')"
-            :name="currentUser?.nickname ?? null"
-            :fallback="avatarFallbackText"
-            size="xl"
+            :name="currentUser?.nickname ?? undefined"
+            :fallback-initial="avatarFallbackText"
+            size="xLarge"
+            shape="circle"
+            :show-loading="false"
           />
 
           <div class="profile-form">
-            <FormField
+            <PuFormItem
               :label="t('mePage.profile.nicknameLabel')"
               for-id="me-profile-nickname"
             >
@@ -75,9 +77,9 @@
                 maxlength="40"
                 @keydown.enter.prevent="handleSaveNickname"
               />
-            </FormField>
+            </PuFormItem>
 
-            <FormField
+            <PuFormItem
               :label="t('mePage.profile.phoneLabel')"
               for-id="me-profile-phone"
             >
@@ -93,7 +95,7 @@
                 :disabled="!canEditProfile"
                 @keydown.enter.prevent="handleSavePhoneNumber"
               />
-            </FormField>
+            </PuFormItem>
             <p v-if="phoneHintText" class="profile-field-hint">
               {{ phoneHintText }}
             </p>
@@ -153,14 +155,15 @@
               </span>
               <p>{{ wechatIdentityHintText }}</p>
 
-              <Chip
+              <PuTag
                 v-if="wechatBound"
                 class="status-pill"
                 tone="primary"
                 size="md"
-              >
-                {{ t("mePage.profile.wechatBound") }}
-              </Chip>
+                :text="t('mePage.profile.wechatBound')"
+                variant="soft"
+                shape="pill"
+              />
               <Button
                 v-else
                 class="wechat-identity-action"
@@ -255,7 +258,7 @@
     <template #footer>
       <PageFooter variant="minimal" />
     </template>
-  </PageScaffoldFlow>
+  </PuPageScaffold>
 </template>
 
 <script setup lang="ts">
@@ -263,17 +266,19 @@ import { computed, ref, watch } from "vue";
 import { RouterLink, useRoute } from "vue-router";
 import { useI18n } from "vue-i18n";
 import { useQueryClient } from "@tanstack/vue-query";
-import { PuCard } from "@partner-up-dev/design-web";
-import LoadingIndicator from "@/shared/ui/feedback/LoadingIndicator.vue";
+import {
+  PuCard,
+  PuFormItem,
+  PuImg,
+  PuInlineNotice,
+  PuLoadingState,
+  PuPageScaffold,
+  PuTag,
+} from "@partner-up-dev/design-web";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import InlineNotice from "@/shared/ui/feedback/InlineNotice.vue";
 import PageFooter from "@/shared/ui/sections/PageFooter.vue";
 import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
-import PageScaffoldFlow from "@/shared/ui/layout/PageScaffoldFlow.vue";
-import FormField from "@/shared/ui/forms/FormField.vue";
-import Avatar from "@/shared/ui/identity/Avatar.vue";
 import Button from "@/shared/ui/actions/Button.vue";
-import Chip from "@/shared/ui/display/Chip.vue";
 import WeChatNotificationSubscriptionsCard from "@/shared/ui/sections/WeChatNotificationSubscriptionsCard.vue";
 import APRNotificationSubscriptions from "@/shared/ui/sections/APRNotificationSubscriptions.vue";
 import { useUserSessionStore } from "@/shared/auth/useUserSessionStore";
diff --git a/apps/frontend/src/pages/MyPRsPage.vue b/apps/frontend/src/pages/MyPRsPage.vue
index 291f395e8..8395238d0 100644
--- a/apps/frontend/src/pages/MyPRsPage.vue
+++ b/apps/frontend/src/pages/MyPRsPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <PageScaffoldFlow class="my-prs-page">
+  <PuPageScaffold class="my-prs-page">
     <template #header>
       <PageHeader
         :title="t('myPrsPage.title')"
@@ -18,7 +18,7 @@
           <span class="my-prs-page__count">{{ createdItems.length }}</span>
         </div>
 
-        <LoadingIndicator
+        <PuLoadingState
           v-if="createdQuery.isLoading.value"
           :message="t('myPrsPage.loading')"
         />
@@ -44,7 +44,7 @@
           <span class="my-prs-page__count">{{ joinedDisplayItems.length }}</span>
         </div>
 
-        <LoadingIndicator
+        <PuLoadingState
           v-if="joinedQuery.isLoading.value"
           :message="t('myPrsPage.loading')"
         />
@@ -68,20 +68,19 @@
     <template #footer>
       <PageFooter variant="minimal" />
     </template>
-  </PageScaffoldFlow>
+  </PuPageScaffold>
 </template>
 
 <script setup lang="ts">
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
-import LoadingIndicator from "@/shared/ui/feedback/LoadingIndicator.vue";
 import PageFooter from "@/shared/ui/sections/PageFooter.vue";
 import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
 import PRPreviewCard from "@/domains/pr/ui/primitives/PRPreviewCard.vue";
-import PageScaffoldFlow from "@/shared/ui/layout/PageScaffoldFlow.vue";
 import { useMyCreatedPRs } from "@/domains/pr/queries/useMyCreatedPRs";
 import { useMyJoinedPRs } from "@/domains/pr/queries/useMyJoinedPRs";
 import { useUserSessionStore } from "@/shared/auth/useUserSessionStore";
+import { PuLoadingState, PuPageScaffold } from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const userSessionStore = useUserSessionStore();
diff --git a/apps/frontend/src/pages/OrderingFromPlacementPage.vue b/apps/frontend/src/pages/OrderingFromPlacementPage.vue
index 697102f1d..4754af65b 100644
--- a/apps/frontend/src/pages/OrderingFromPlacementPage.vue
+++ b/apps/frontend/src/pages/OrderingFromPlacementPage.vue
@@ -8,7 +8,7 @@
       <ActionLink
         :to="{ name: 'contact-support' }"
         appearance="pill"
-        tone="outline"
+        variant="outline"
         size="sm"
         data-testid="ordering.contact-support.open"
       >
@@ -17,7 +17,7 @@
     </template>
 
     <div class="ordering-page__body">
-      <InlineNotice
+      <PuInlineNotice
         v-if="missingInput"
         tone="error"
         :title="t('ordering.invalidEntryTitle')"
@@ -96,13 +96,13 @@
 import { computed, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
-import InlineNotice from "@/shared/ui/feedback/InlineNotice.vue";
 import ActionLink from "@/shared/ui/actions/ActionLink.vue";
 import OrderingPageShell from "@/domains/commerce/ui/ordering/OrderingPageShell.vue";
 import OrderingFooterActionBar from "@/domains/commerce/ui/ordering/OrderingFooterActionBar.vue";
 import OrderingFloatingNoticeLayer from "@/domains/commerce/ui/ordering/OrderingFloatingNoticeLayer.vue";
 import OrderingPriceDetailDrawer from "@/domains/commerce/ui/ordering/OrderingPriceDetailDrawer.vue";
 import RentalOrderingForm from "@/domains/commerce/ui/ordering/RentalOrderingForm.vue";
+import { PuInlineNotice } from "@partner-up-dev/design-web";
 import RideHailingOrderingPanel, {
   type RideVehicleOption,
 } from "@/domains/commerce/ui/ordering/RideHailingOrderingPanel.vue";
diff --git a/apps/frontend/src/pages/PRCreatePage.vue b/apps/frontend/src/pages/PRCreatePage.vue
index 36406dfcd..d4c77e8cd 100644
--- a/apps/frontend/src/pages/PRCreatePage.vue
+++ b/apps/frontend/src/pages/PRCreatePage.vue
@@ -1,5 +1,5 @@
 <template>
-  <PageScaffoldFlow class="pr-create-page" data-page="pr-create">
+  <PuPageScaffold class="pr-create-page" data-page="pr-create">
     <template #header>
       <PRCreateHeader @back="goHome" />
     </template>
@@ -56,7 +56,7 @@
       <PageFooter variant="minimal" data-region="support" />
     </template>
 
-  </PageScaffoldFlow>
+  </PuPageScaffold>
 </template>
 
 <script setup lang="ts">
@@ -67,10 +67,10 @@ import PREditor from "@/domains/pr/ui/forms/PREditor.vue";
 import NLPRForm from "@/domains/pr/ui/forms/NLPRForm.vue";
 import TabBar from "@/shared/ui/navigation/TabBar.vue";
 import PageFooter from "@/shared/ui/sections/PageFooter.vue";
-import PageScaffoldFlow from "@/shared/ui/layout/PageScaffoldFlow.vue";
 import PRCreateHeader from "@/domains/pr/ui/sections/PRCreateHeader.vue";
 import PRCreateFooterActions from "@/domains/pr/ui/sections/PRCreateFooterActions.vue";
 import type { CreateSubmissionMode } from "@/domains/pr/model/pr-editor";
+import { PuPageScaffold } from "@partner-up-dev/design-web";
 
 const resolveQueryMode = (value: unknown): "nl" | "form" | null => {
   if (value === "nl" || value === "form") return value;
diff --git a/apps/frontend/src/pages/PRMessagesPage.vue b/apps/frontend/src/pages/PRMessagesPage.vue
index 55397613d..9f96e6ee5 100644
--- a/apps/frontend/src/pages/PRMessagesPage.vue
+++ b/apps/frontend/src/pages/PRMessagesPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <FullScreenPageScaffold
+  <PuPageScaffold viewport="screen"
     class="pr-messages-page"
     data-page="pr-messages"
   >
@@ -27,19 +27,19 @@
     <template #footer>
       <PageFooter variant="minimal" data-region="support" />
     </template>
-  </FullScreenPageScaffold>
+  </PuPageScaffold>
 </template>
 
 <script setup lang="ts">
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
-import FullScreenPageScaffold from "@/shared/ui/layout/FullScreenPageScaffold.vue";
 import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
 import PRMessageThread from "@/domains/pr/ui/sections/PRMessageThread.vue";
 import PageFooter from "@/shared/ui/sections/PageFooter.vue";
 import { prDetailPath } from "@/domains/pr/routing/routes";
 import { usePRRouteId } from "@/domains/pr/routing/usePRRouteId";
+import { PuPageScaffold } from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const id = usePRRouteId();
diff --git a/apps/frontend/src/pages/PRPage.vue b/apps/frontend/src/pages/PRPage.vue
index 501d436d0..095dd4ced 100644
--- a/apps/frontend/src/pages/PRPage.vue
+++ b/apps/frontend/src/pages/PRPage.vue
@@ -1,6 +1,6 @@
 <template>
-  <PageScaffold class="pr-page" data-page="pr-detail">
-    <LoadingIndicator v-if="isLoading" :message="t('common.loading')" />
+  <PuPageScaffold class="pr-page" data-page="pr-detail">
+    <PuLoadingState v-if="isLoading" :message="t('common.loading')" />
     <ErrorToast v-else-if="error" :message="error.message" persistent />
 
     <template v-else-if="prDetail">
@@ -111,7 +111,7 @@
         :pr="prDetail"
       />
 
-      <InlineNotice
+      <PuInlineNotice
         v-if="showEventAssistedCreateHandoffNotice"
         tone="success"
         data-testid="pr-detail.event-assisted-create.notice"
@@ -180,7 +180,7 @@
     </template>
 
     <PageFooter variant="minimal" data-region="support" />
-  </PageScaffold>
+  </PuPageScaffold>
 </template>
 
 <script setup lang="ts">
@@ -189,13 +189,10 @@ import { useRoute, useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
 import type { PRStatusManual } from "@partner-up-dev/backend";
 import Button from "@/shared/ui/actions/Button.vue";
-import LoadingIndicator from "@/shared/ui/feedback/LoadingIndicator.vue";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import InlineNotice from "@/shared/ui/feedback/InlineNotice.vue";
 import Modal from "@/shared/ui/overlay/Modal.vue";
 import { useBodyScrollLock } from "@/shared/ui/overlay/useBodyScrollLock";
 import PageFooter from "@/shared/ui/sections/PageFooter.vue";
-import PageScaffold from "@/shared/ui/layout/PageScaffold.vue";
 import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
 import PRStatusBadge from "@/domains/pr/ui/primitives/PRStatusBadge.vue";
 import PRFactsCard from "@/domains/pr/ui/composites/PRFactsCard.vue";
@@ -236,6 +233,7 @@ import {
   type PlacementInstanceProjection,
 } from "@/domains/commerce/queries/useCommerce";
 import { ORDERING_ENTRY_STORAGE_KEY } from "@/domains/commerce/model/ordering-entry-storage";
+import { PuInlineNotice, PuLoadingState, PuPageScaffold } from "@partner-up-dev/design-web";
 
 type CreatorSecondaryActionType =
   | "CREATOR_EDIT_CONTENT"
diff --git a/apps/frontend/src/pages/PRPairingCodePage.vue b/apps/frontend/src/pages/PRPairingCodePage.vue
index 01618dc46..c0c8ca66c 100644
--- a/apps/frontend/src/pages/PRPairingCodePage.vue
+++ b/apps/frontend/src/pages/PRPairingCodePage.vue
@@ -30,7 +30,7 @@
     class="pairing-code-page pairing-code-page--fallback"
     data-page="pr-pairing-code"
   >
-    <LoadingIndicator v-if="isLoading" :message="t('common.loading')" />
+    <PuLoadingState v-if="isLoading" :message="t('common.loading')" />
     <ErrorToast
       v-else-if="error"
       :message="error.message"
@@ -48,11 +48,11 @@
 import { computed, type CSSProperties } from "vue";
 import { useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
-import LoadingIndicator from "@/shared/ui/feedback/LoadingIndicator.vue";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
 import { usePRDetail } from "@/domains/pr/queries/usePRDetail";
 import { usePRRouteId } from "@/domains/pr/routing/usePRRouteId";
 import { prDetailPath } from "@/domains/pr/routing/routes";
+import { PuLoadingState } from "@partner-up-dev/design-web";
 import {
   canShowPRPairingCode,
   derivePRPairingIdentity,
diff --git a/apps/frontend/src/pages/PaymentCheckoutPage.vue b/apps/frontend/src/pages/PaymentCheckoutPage.vue
index c629ce051..b38cf724a 100644
--- a/apps/frontend/src/pages/PaymentCheckoutPage.vue
+++ b/apps/frontend/src/pages/PaymentCheckoutPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <FullScreenPageScaffold class="payment-checkout-page" data-testid="payment-checkout.page">
+  <PuPageScaffold viewport="screen" class="payment-checkout-page" data-testid="payment-checkout.page">
     <template #header>
       <PageHeader
         title="支付"
@@ -9,14 +9,14 @@
     </template>
 
     <div class="payment-checkout-page__body">
-      <InlineNotice
+      <PuInlineNotice
         v-if="billLineId === null"
         tone="error"
         title="支付入口无效"
         message="缺少账单行编号。"
       />
 
-      <InlineNotice
+      <PuInlineNotice
         v-else-if="checkoutQuery.isError.value"
         tone="error"
         title="无法加载支付信息"
@@ -55,7 +55,7 @@
             <h2>微信支付</h2>
           </div>
 
-          <InlineNotice
+          <PuInlineNotice
             v-if="!checkout.eligibility.payable && activePayment?.status !== 'SUCCEEDED'"
             tone="warning"
             title="当前不可支付"
@@ -100,7 +100,7 @@
             </Button>
           </template>
 
-          <InlineNotice
+          <PuInlineNotice
             v-if="activePayment?.status === 'SUCCEEDED'"
             tone="success"
             title="支付成功"
@@ -108,14 +108,14 @@
             data-testid="payment-checkout.success"
           />
 
-          <InlineNotice
+          <PuInlineNotice
             v-if="createChargeMutation.isError.value || syncMutation.isError.value"
             tone="error"
             title="支付处理失败"
             :message="mutationErrorMessage"
           />
 
-          <InlineNotice
+          <PuInlineNotice
             v-if="clientPaymentError"
             tone="error"
             title="微信支付未完成"
@@ -127,7 +127,7 @@
         <PuCard as="section" gap="sm" padding="sm" variant="outline">
           <ActionLink
             :to="{ path: `/bills/${checkout.bill.id}` }"
-            tone="outline"
+            variant="outline"
             data-testid="payment-checkout.bill-link"
           >
             返回账单
@@ -135,16 +135,14 @@
         </PuCard>
       </template>
     </div>
-  </FullScreenPageScaffold>
+  </PuPageScaffold>
 </template>
 
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import { useRoute } from "vue-router";
-import { PuCard } from "@partner-up-dev/design-web";
-import FullScreenPageScaffold from "@/shared/ui/layout/FullScreenPageScaffold.vue";
+import { PuCard, PuInlineNotice, PuPageScaffold } from "@partner-up-dev/design-web";
 import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
-import InlineNotice from "@/shared/ui/feedback/InlineNotice.vue";
 import Button from "@/shared/ui/actions/Button.vue";
 import ActionLink from "@/shared/ui/actions/ActionLink.vue";
 import {
diff --git a/apps/frontend/src/pages/RouteApplicationPage.vue b/apps/frontend/src/pages/RouteApplicationPage.vue
index bc52d22a8..15c7c671e 100644
--- a/apps/frontend/src/pages/RouteApplicationPage.vue
+++ b/apps/frontend/src/pages/RouteApplicationPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <PageScaffoldFlow class="route-application-page">
+  <PuPageScaffold class="route-application-page">
     <template #header>
       <PageHeader
         :title="t('routeApplicationPage.title')"
@@ -9,7 +9,7 @@
     </template>
 
     <div class="route-application-page__body">
-      <InlineNotice
+      <PuInlineNotice
         v-if="submitSuccessTitle"
         tone="success"
         :message="submitSuccessTitle"
@@ -18,7 +18,7 @@
 
       <PuCard as="section" gap="md">
         <form class="application-form" @submit.prevent="handleSubmit">
-          <FormField
+          <PuFormItem
             :label="t('routeApplicationPage.routeLabel')"
             :hint="routeHint"
             :error="routeError"
@@ -29,7 +29,7 @@
               variant="inline"
               @update:model-value="handleRouteChange"
             />
-          </FormField>
+          </PuFormItem>
 
           <Button
             appearance="rect"
@@ -51,7 +51,7 @@
           </div>
         </div>
 
-        <LoadingIndicator
+        <PuLoadingState
           v-if="applicationsQuery.isLoading.value"
           :message="t('common.loading')"
         />
@@ -75,9 +75,13 @@
             <div class="application-card__body">
               <div class="application-card__title-row">
                 <h3>{{ routeSummary(application.route) }}</h3>
-                <Chip :tone="statusChipTone(application.status)" size="sm">
-                  {{ statusLabel(application.status) }}
-                </Chip>
+                <PuTag
+                  :tone="statusTagTone(application.status)"
+                  :text="statusLabel(application.status)"
+                  size="sm"
+                  variant="soft"
+                  shape="pill"
+                />
               </div>
               <p class="application-card__meta">
                 {{ formatCreatedAt(application.createdAt) }}
@@ -90,7 +94,7 @@
         </div>
       </PuCard>
     </div>
-  </PageScaffoldFlow>
+  </PuPageScaffold>
 </template>
 
 <script setup lang="ts">
@@ -98,15 +102,10 @@ import { computed, onMounted, ref } from "vue";
 import { useRoute, type RouteLocationRaw } from "vue-router";
 import { useI18n } from "vue-i18n";
 import type { PRRoute } from "@partner-up-dev/backend";
-import { PuCard } from "@partner-up-dev/design-web";
+import { PuCard, PuFormItem, PuInlineNotice, PuLoadingState, PuPageScaffold, PuTag } from "@partner-up-dev/design-web";
 import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
-import PageScaffoldFlow from "@/shared/ui/layout/PageScaffoldFlow.vue";
-import FormField from "@/shared/ui/forms/FormField.vue";
 import Button from "@/shared/ui/actions/Button.vue";
-import Chip from "@/shared/ui/display/Chip.vue";
-import InlineNotice from "@/shared/ui/feedback/InlineNotice.vue";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import LoadingIndicator from "@/shared/ui/feedback/LoadingIndicator.vue";
 import {
   createEmptyRouteDraft,
   getRouteValidationIssue,
@@ -179,9 +178,9 @@ const routeHint = computed(() =>
     ? t("routeApplicationPage.routeReady")
     : t("routeApplicationPage.routeHint"),
 );
-const routeError = computed(() =>
+const routeError = computed<string | undefined>(() =>
   routeValidationIssue.value === null
-    ? null
+    ? undefined
     : routeValidationMessage(routeValidationIssue.value),
 );
 const pageError = computed(() => {
@@ -233,7 +232,7 @@ const routeSummary = (value: PRRoute): string =>
 const statusLabel = (status: RouteApplicationStatus): string =>
   t(`routeApplicationPage.status.${status}`);
 
-const statusChipTone = (
+const statusTagTone = (
   status: RouteApplicationStatus,
 ): "primary" | "secondary" | "danger" =>
   status === "ACCEPTED"
diff --git a/apps/frontend/src/pages/StudySprintPomodoroPage.vue b/apps/frontend/src/pages/StudySprintPomodoroPage.vue
index b37ca85bd..07bf59fb2 100644
--- a/apps/frontend/src/pages/StudySprintPomodoroPage.vue
+++ b/apps/frontend/src/pages/StudySprintPomodoroPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <PageScaffold
+  <PuPageScaffold
     v-if="showGuidance"
     class="study-sprint-guidance"
     data-page="study-sprint-guidance"
@@ -43,14 +43,14 @@
         {{ guidanceActionText }}
       </Button>
     </section>
-  </PageScaffold>
+  </PuPageScaffold>
 
-  <PageScaffold
+  <PuPageScaffold
     v-else
     class="study-sprint-room"
     data-page="study-sprint-room"
   >
-    <LoadingIndicator
+    <PuLoadingState
       v-if="roomQuery.isLoading.value"
       message="正在进入专注房间"
     />
@@ -194,7 +194,7 @@
         </div>
       </section>
     </template>
-  </PageScaffold>
+  </PuPageScaffold>
 </template>
 
 <script setup lang="ts">
@@ -202,9 +202,8 @@ import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { useRouter } from "vue-router";
 import Button from "@/shared/ui/actions/Button.vue";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import LoadingIndicator from "@/shared/ui/feedback/LoadingIndicator.vue";
-import PageScaffold from "@/shared/ui/layout/PageScaffold.vue";
 import { usePRRouteId } from "@/domains/pr/routing/usePRRouteId";
+import { PuLoadingState, PuPageScaffold } from "@partner-up-dev/design-web";
 import {
   useRecordStudySprintEvent,
   useStartStudySprintSession,
diff --git a/apps/frontend/src/pages/UserProfilePage.vue b/apps/frontend/src/pages/UserProfilePage.vue
index add12402e..3874000d2 100644
--- a/apps/frontend/src/pages/UserProfilePage.vue
+++ b/apps/frontend/src/pages/UserProfilePage.vue
@@ -1,5 +1,5 @@
 <template>
-  <PageScaffoldFlow class="user-profile-page">
+  <PuPageScaffold class="user-profile-page">
     <template #header>
       <PageHeader
         :title="t('userProfilePage.title')"
@@ -8,17 +8,17 @@
       />
     </template>
 
-    <LoadingIndicator
+    <PuLoadingState
       v-if="isLoading"
       :message="t('userProfilePage.loading')"
     />
 
-    <EmptyState
+    <PuEmptyState
       v-else-if="isNotFound"
       :title="t('userProfilePage.notFoundTitle')"
       :description="t('userProfilePage.notFoundDescription')"
       icon="i-mdi-account-off-outline"
-      tone="outline"
+      variant="outline"
     />
 
     <ErrorToast
@@ -38,12 +38,14 @@
       </div>
 
       <div class="profile-row">
-        <Avatar
-          :src="profile.avatarUrl"
+        <PuImg
+          :src="profile.avatarUrl ?? ''"
           :alt="t('userProfilePage.avatarAlt', { name: displayName })"
           :name="displayName"
-          :fallback="avatarFallbackText"
-          size="lg"
+          :fallback-initial="avatarFallbackText"
+          size="large"
+          shape="circle"
+          :show-loading="false"
           bordered
         />
 
@@ -57,7 +59,7 @@
     <template #footer>
       <PageFooter variant="minimal" />
     </template>
-  </PageScaffoldFlow>
+  </PuPageScaffold>
 </template>
 
 <script setup lang="ts">
@@ -65,13 +67,15 @@ import { computed } from "vue";
 import { RouterLink, useRoute } from "vue-router";
 import { useI18n } from "vue-i18n";
 import type { PRId } from "@partner-up-dev/backend";
-import { PuCard } from "@partner-up-dev/design-web";
-import PageScaffoldFlow from "@/shared/ui/layout/PageScaffoldFlow.vue";
+import {
+  PuCard,
+  PuEmptyState,
+  PuImg,
+  PuLoadingState,
+  PuPageScaffold,
+} from "@partner-up-dev/design-web";
 import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
-import LoadingIndicator from "@/shared/ui/feedback/LoadingIndicator.vue";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import EmptyState from "@/shared/ui/feedback/EmptyState.vue";
-import Avatar from "@/shared/ui/identity/Avatar.vue";
 import PageFooter from "@/shared/ui/sections/PageFooter.vue";
 import {
   prDetailPath,
diff --git a/apps/frontend/src/pages/WeChatOAuthCallbackPage.vue b/apps/frontend/src/pages/WeChatOAuthCallbackPage.vue
index 4d9748848..228d29e6a 100644
--- a/apps/frontend/src/pages/WeChatOAuthCallbackPage.vue
+++ b/apps/frontend/src/pages/WeChatOAuthCallbackPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <PageScaffoldCentered class="wechat-oauth-callback-page">
+  <PuPageScaffold content-placement="center" class="wechat-oauth-callback-page">
     <template #header>
       <header class="wechat-oauth-callback-page__header">
         <h1 class="wechat-oauth-callback-page__title">
@@ -12,7 +12,7 @@
     </template>
 
     <PuCard as="section" class="wechat-oauth-callback-page__card">
-      <LoadingIndicator
+      <PuLoadingState
         v-if="status === 'processing'"
         :message="statusMessage"
       />
@@ -20,16 +20,14 @@
         {{ statusMessage }}
       </p>
     </PuCard>
-  </PageScaffoldCentered>
+  </PuPageScaffold>
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from "vue";
 import { useI18n } from "vue-i18n";
-import { PuCard } from "@partner-up-dev/design-web";
+import { PuCard, PuLoadingState, PuPageScaffold } from "@partner-up-dev/design-web";
 import { client } from "@/lib/rpc";
-import PageScaffoldCentered from "@/shared/ui/layout/PageScaffoldCentered.vue";
-import LoadingIndicator from "@/shared/ui/feedback/LoadingIndicator.vue";
 import {
   useUserSessionStore,
   type AuthSessionPayload,
diff --git a/apps/frontend/src/shared/ui/AGENTS.md b/apps/frontend/src/shared/ui/AGENTS.md
index c863eda52..ae64d39ee 100644
--- a/apps/frontend/src/shared/ui/AGENTS.md
+++ b/apps/frontend/src/shared/ui/AGENTS.md
@@ -21,30 +21,22 @@ Containers and layout:
 
 - `PuCard` from `@partner-up-dev/design-web`: standard card shell for reusable grouped content, outline surfaces, and collapsible sections. Use `variant` for treatment and `keep-content-mounted` only when collapsed content owns local state that must survive collapse.
 - `containers/ChoiceCard.vue`: selectable card primitive for button-like choices and RouterLink navigation choices.
-- `layout/PageScaffold.vue`, `PageScaffoldFlow.vue`, `PageScaffoldCentered.vue`, and `DesktopPageScaffold.vue`: shared page scaffolds. Prefer these for route pages instead of duplicating root safe-area layout.
-- `layout/FullScreenPageScaffold.vue`: viewport-height page scaffold with header/content/footer regions where the middle region should flex and own scrolling.
-- `layout/FooterRevealPageScaffold.vue`: viewport-first page scaffold where header + content fill the first screen and footer appears through normal page scroll.
+- `PuPageScaffold` from `@partner-up-dev/design-web`: page scaffold for route pages, centered flows, full-screen flows, desktop aside pages, and reveal-footer layouts. Prefer direct package usage instead of recreating safe-area page chrome locally.
 - `sections/PageFooter.vue`: product page footer chrome with `variant="minimal"` for compact support/navigation footers and `variant="brand"` for landing-style brand/legal footers. Prefer extending this variant API over creating another page footer component.
 
 Forms and controls:
 
-- `forms/FormField.vue`: label + control + hint/error wrapper for plain form rows. It does not own the input shell.
-- `forms/TextareaInput.vue`: shared textarea primitive with stable shell, optional char count, and configurable rows/max length.
-- `forms/ToggleSwitch.vue`: labeled boolean switch primitive with `v-model`; consuming components own copy, workflow meaning, and side effects.
-- `forms/WheelPicker.vue`: finite vertical option picker with centered snap selection for generic single-value choices.
+- `PuFormItem`, `PuInput`, `PuTextarea`, `PuToggleSwitch`, and `PuWheelPicker` from `@partner-up-dev/design-web`: default form-field, text-control, switch, and wheel-picker primitives. Use them directly at usage sites rather than adding local wrappers.
+- `PuSegmented` and `PuSegmentedItem` from `@partner-up-dev/design-web`: default mutually exclusive mode selector. Keep domain labels, state, workflow transitions, and option-level scenario test IDs in the consuming surface.
 - `forms/ProductLocalDateCalendarPicker.vue`: product-local date-key calendar grid for visible-window multi-select flows.
-- `controls/SegmentedControl.vue`: generic mutually exclusive mode selector; keep domain labels, state, workflow transitions, and option-level scenario test IDs in the consuming surface.
 
 Display and feedback:
 
-- `display/InfoRow.vue`: neutral label/value layout for metadata.
-- `display/InfoRowAction.vue`: label row with a trailing inline button for metadata rows whose action target is only the trailing affordance.
-- `display/Cell.vue`: compact title/value row with optional suffix icon or suffix slot for generic list and settings surfaces.
-- `display/Chip.vue` and `display/ChipGroup.vue`: neutral tokenized chips for tags, lightweight roster labels, and compact metadata groups.
-- `display/FitChipGroup.vue`: single-line chip row that measures available width and only shows whole chips that fully fit.
-- `feedback/InlineNotice.vue`: inline success/info/warning/error banner.
-- `feedback/EmptyState.vue`: empty or not-found shell with title, description, icon, and optional actions slot.
-- `identity/Avatar.vue`: generic avatar with image/fallback behavior.
+- `PuDescriptionList` and `PuDescriptionItem` from `@partner-up-dev/design-web`: default label-value metadata and read-only fact layout.
+- `PuCell` from `@partner-up-dev/design-web`: default compact row for settings, list rows, and action rows.
+- `PuChip`, `PuChipGroup`, and `PuTag` from `@partner-up-dev/design-web`: default token, chip group, and read-only label primitives.
+- `PuInlineNotice`, `PuEmptyState`, and `PuLoadingState` from `@partner-up-dev/design-web`: default local notice, empty state, and loading state primitives.
+- `PuImg` from `@partner-up-dev/design-web`: default image primitive, including avatar-style fallback when `name`, `fallbackInitial`, `shape`, and `bordered` are enough for the surface.
 
 Overlay:
 
diff --git a/apps/frontend/src/shared/ui/controls/SegmentedControl.vue b/apps/frontend/src/shared/ui/controls/SegmentedControl.vue
deleted file mode 100644
index bcf9b2852..000000000
--- a/apps/frontend/src/shared/ui/controls/SegmentedControl.vue
+++ /dev/null
@@ -1,159 +0,0 @@
-<template>
-  <div
-    class="segmented-control"
-    :class="[
-      `segmented-control--size-${size}`,
-      `segmented-control--tone-${tone}`,
-      { 'segmented-control--block': block },
-    ]"
-    role="radiogroup"
-    :aria-label="ariaLabel"
-  >
-    <button
-      v-for="option in options"
-      :key="String(option.value)"
-      class="segmented-control__item"
-      type="button"
-      role="radio"
-      :aria-checked="option.value === modelValue"
-      :aria-label="option.ariaLabel"
-      :disabled="option.disabled"
-      :data-active="option.value === modelValue ? 'true' : 'false'"
-      :data-testid="option.testId"
-      @click="selectOption(option)"
-    >
-      <span
-        v-if="option.icon"
-        class="segmented-control__icon"
-        :class="option.icon"
-        aria-hidden="true"
-      ></span>
-      <span class="segmented-control__label">{{ option.label }}</span>
-    </button>
-  </div>
-</template>
-
-<script setup lang="ts">
-export type SegmentedControlValue = string | number;
-
-export type SegmentedControlOption = {
-  value: SegmentedControlValue;
-  label: string;
-  icon?: string;
-  ariaLabel?: string;
-  testId?: string;
-  disabled?: boolean;
-};
-
-const props = withDefaults(
-  defineProps<{
-    modelValue: SegmentedControlValue;
-    options: readonly SegmentedControlOption[];
-    ariaLabel?: string;
-    size?: "sm" | "md";
-    tone?: "surface" | "primary";
-    block?: boolean;
-  }>(),
-  {
-    ariaLabel: undefined,
-    size: "md",
-    tone: "surface",
-    block: false,
-  },
-);
-
-const emit = defineEmits<{
-  "update:modelValue": [value: SegmentedControlValue];
-}>();
-
-const selectOption = (option: SegmentedControlOption) => {
-  if (option.disabled || option.value === props.modelValue) {
-    return;
-  }
-
-  emit("update:modelValue", option.value);
-};
-</script>
-
-<style scoped lang="scss">
-.segmented-control {
-  display: inline-grid;
-  grid-auto-flow: column;
-  grid-auto-columns: minmax(0, 1fr);
-  gap: calc(var(--sys-spacing-xsmall) / 2);
-  min-width: 0;
-  padding: calc(var(--sys-spacing-xsmall) / 2);
-  border: 1px solid var(--sys-color-outline-variant);
-  border-radius: var(--sys-radius-small);
-  background: var(--sys-color-surface-container-low);
-}
-
-.segmented-control--block {
-  width: 100%;
-}
-
-.segmented-control__item {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--sys-spacing-xsmall);
-  min-width: 0;
-  border: 0;
-  border-radius: var(--sys-radius-xsmall);
-  color: var(--sys-color-on-surface-variant);
-  background: transparent;
-  cursor: pointer;
-  appearance: none;
-  transition:
-    background-color 160ms ease,
-    color 160ms ease,
-    box-shadow 160ms ease,
-    opacity 160ms ease;
-}
-
-.segmented-control__item[data-active="true"] {
-  color: var(--sys-color-on-primary-container);
-  background: var(--sys-color-primary-container);
-  @include mx.pu-elevation(1);
-}
-
-.segmented-control--tone-surface
-  .segmented-control__item[data-active="true"] {
-  color: var(--sys-color-on-surface);
-  background: var(--sys-color-surface-container-highest);
-}
-
-.segmented-control__item:disabled {
-  opacity: var(--sys-opacity-disabled);
-  cursor: not-allowed;
-}
-
-.segmented-control__item:focus-visible {
-  outline: 2px solid var(--sys-color-primary);
-  outline-offset: 2px;
-}
-
-.segmented-control--size-sm .segmented-control__item {
-  @include mx.pu-font(control);
-  min-height: var(--sys-spacing-large);
-  padding: var(--sys-spacing-xsmall) var(--sys-spacing-small);
-}
-
-.segmented-control--size-md .segmented-control__item {
-  @include mx.pu-font(control);
-  min-height: calc(var(--sys-spacing-large) + var(--sys-spacing-small) + var(--sys-spacing-xsmall));
-  padding: var(--sys-spacing-small) var(--sys-spacing-medium);
-}
-
-.segmented-control__icon {
-  @include mx.pu-icon(small);
-  flex-shrink: 0;
-}
-
-.segmented-control__label {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-</style>
diff --git a/apps/frontend/src/shared/ui/display/Cell.vue b/apps/frontend/src/shared/ui/display/Cell.vue
deleted file mode 100644
index 99564f861..000000000
--- a/apps/frontend/src/shared/ui/display/Cell.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<template>
-  <component
-    :is="props.as"
-    class="ui-cell"
-    :class="{ 'ui-cell--border': props.border }"
-    :type="props.as === 'button' ? props.type : undefined"
-  >
-    <div v-if="hasTitle" class="ui-cell__title">
-      <slot name="title">
-        {{ props.title }}
-      </slot>
-    </div>
-
-    <div v-if="hasTrailing" class="ui-cell__trailing">
-      <div v-if="hasValue" class="ui-cell__value">
-        <slot>
-          {{ props.value }}
-        </slot>
-      </div>
-
-      <span v-if="hasSuffix" class="ui-cell__suffix" aria-hidden="true">
-        <slot name="suffix">
-          <span v-if="props.suffixIcon" :class="props.suffixIcon"></span>
-        </slot>
-      </span>
-    </div>
-  </component>
-</template>
-
-<script setup lang="ts">
-import { computed, useSlots } from "vue";
-
-const props = withDefaults(
-  defineProps<{
-    as?: string;
-    type?: "button" | "submit" | "reset";
-    border?: boolean;
-    title?: string;
-    value?: string | number | null;
-    suffixIcon?: string;
-  }>(),
-  {
-    as: "div",
-    type: "button",
-    border: false,
-    title: undefined,
-    value: null,
-    suffixIcon: undefined,
-  },
-);
-
-const slots = useSlots();
-
-const hasTitle = computed(() => Boolean(slots.title) || Boolean(props.title));
-const hasValue = computed(
-  () =>
-    Boolean(slots.default) ||
-    (props.value !== null &&
-      props.value !== undefined &&
-      String(props.value).length > 0),
-);
-const hasSuffix = computed(
-  () => Boolean(slots.suffix) || Boolean(props.suffixIcon),
-);
-const hasTrailing = computed(() => hasValue.value || hasSuffix.value);
-</script>
-
-<style lang="scss" scoped>
-.ui-cell {
-  display: flex;
-  align-items: center;
-  gap: var(--sys-spacing-small);
-  width: 100%;
-  min-width: 0;
-  min-height: calc(var(--sys-spacing-large) + var(--sys-spacing-small) + var(--sys-spacing-xsmall));
-  box-sizing: border-box;
-  padding: var(--sys-spacing-small) 0;
-  border: 0;
-  border-radius: 0;
-  background: transparent;
-  color: var(--sys-color-on-surface);
-  text-decoration: none;
-}
-
-.ui-cell--border {
-  border-bottom: 1px solid var(--sys-color-outline-variant);
-}
-
-.ui-cell:is(button) {
-  cursor: pointer;
-  text-align: left;
-  appearance: none;
-}
-
-.ui-cell:is(a) {
-  cursor: pointer;
-}
-
-.ui-cell:is(button, a):hover {
-  background: var(--sys-color-surface-container-low);
-}
-
-.ui-cell:is(button, a):focus-visible {
-  outline: 2px solid var(--sys-color-primary);
-  outline-offset: 2px;
-}
-
-.ui-cell__title,
-.ui-cell__value {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.ui-cell__title {
-  @include mx.pu-font(body);
-  flex: 0 1 auto;
-  color: var(--sys-color-on-surface);
-}
-
-.ui-cell__trailing {
-  display: inline-flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--sys-spacing-xsmall);
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-.ui-cell__value {
-  @include mx.pu-font(body);
-  flex: 0 1 auto;
-  color: var(--sys-color-on-surface-variant);
-  text-align: right;
-}
-
-.ui-cell__suffix {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 auto;
-  color: var(--sys-color-on-surface-variant);
-}
-
-.ui-cell__suffix :deep([class^="i-"]),
-.ui-cell__suffix :deep([class*=" i-"]) {
-  @include mx.pu-icon(medium);
-}
-</style>
diff --git a/apps/frontend/src/shared/ui/display/Chip.vue b/apps/frontend/src/shared/ui/display/Chip.vue
deleted file mode 100644
index 2bc6b3034..000000000
--- a/apps/frontend/src/shared/ui/display/Chip.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template>
-  <component
-    :is="as"
-    class="ui-chip"
-    :class="[`ui-chip--tone-${tone}`, `ui-chip--size-${size}`]"
-  >
-    <slot />
-  </component>
-</template>
-
-<script setup lang="ts">
-type ChipTone =
-  | "secondary"
-  | "primary"
-  | "surface"
-  | "outline"
-  | "danger"
-  | "warning";
-type ChipSize = "sm" | "md" | "lg";
-
-withDefaults(
-  defineProps<{
-    as?: string;
-    tone?: ChipTone;
-    size?: ChipSize;
-  }>(),
-  {
-    as: "span",
-    tone: "secondary",
-    size: "md",
-  },
-);
-</script>
-
-<style lang="scss" scoped>
-.ui-chip {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: fit-content;
-  border: 1px solid transparent;
-  border-radius: 999px;
-  white-space: nowrap;
-}
-
-.ui-chip--size-sm {
-  @include mx.pu-font(caption);
-  padding: 0 calc(var(--sys-spacing-small) - 2px);
-  min-height: calc(var(--sys-spacing-medium) + var(--sys-spacing-small));
-}
-
-.ui-chip--size-md {
-  @include mx.pu-font(control);
-  padding: var(--sys-spacing-xsmall) var(--sys-spacing-small);
-  min-height: var(--sys-spacing-large);
-}
-
-.ui-chip--size-lg {
-  @include mx.pu-font(control);
-  padding: var(--sys-spacing-xsmall) var(--sys-spacing-medium);
-  min-height: var(--sys-spacing-large);
-}
-
-.ui-chip--tone-secondary {
-  background: var(--sys-color-secondary-container);
-  color: var(--sys-color-on-secondary-container);
-}
-
-.ui-chip--tone-primary {
-  background: var(--sys-color-primary-container);
-  color: var(--sys-color-on-primary-container);
-}
-
-.ui-chip--tone-surface {
-  background: var(--sys-color-surface-container-lowest);
-  color: var(--sys-color-on-surface);
-  border-color: var(--sys-color-outline-variant);
-}
-
-.ui-chip--tone-outline {
-  background: transparent;
-  color: var(--sys-color-on-surface);
-  border-color: var(--sys-color-outline);
-}
-
-.ui-chip--tone-danger {
-  background: var(--sys-color-error-container);
-  color: var(--sys-color-on-error-container);
-}
-
-.ui-chip--tone-warning {
-  background: var(--sys-color-warning);
-  color: var(--sys-color-on-warning);
-  border-color: var(--sys-color-warning);
-}
-</style>
diff --git a/apps/frontend/src/shared/ui/display/ChipGroup.vue b/apps/frontend/src/shared/ui/display/ChipGroup.vue
deleted file mode 100644
index f816bba63..000000000
--- a/apps/frontend/src/shared/ui/display/ChipGroup.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <component
-    :is="as"
-    class="chip-group"
-    :class="[`chip-group--gap-${gap}`, `chip-group--align-${align}`]"
-  >
-    <slot />
-  </component>
-</template>
-
-<script setup lang="ts">
-type ChipGroupGap = "xs" | "sm" | "md";
-type ChipGroupAlign = "start" | "center" | "end";
-
-withDefaults(
-  defineProps<{
-    as?: string;
-    gap?: ChipGroupGap;
-    align?: ChipGroupAlign;
-  }>(),
-  {
-    as: "div",
-    gap: "xs",
-    align: "start",
-  },
-);
-</script>
-
-<style lang="scss" scoped>
-.chip-group {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.chip-group--gap-xs {
-  gap: var(--sys-spacing-xsmall);
-}
-
-.chip-group--gap-sm {
-  gap: var(--sys-spacing-small);
-}
-
-.chip-group--gap-md {
-  gap: var(--sys-spacing-medium);
-}
-
-.chip-group--align-start {
-  justify-content: flex-start;
-}
-
-.chip-group--align-center {
-  justify-content: center;
-}
-
-.chip-group--align-end {
-  justify-content: flex-end;
-}
-</style>
diff --git a/apps/frontend/src/shared/ui/display/FitChipGroup.vue b/apps/frontend/src/shared/ui/display/FitChipGroup.vue
deleted file mode 100644
index 0a6cbbe3f..000000000
--- a/apps/frontend/src/shared/ui/display/FitChipGroup.vue
+++ /dev/null
@@ -1,226 +0,0 @@
-<template>
-  <div class="fit-chip-group" :aria-label="ariaLabel">
-    <div
-      ref="measureRowRef"
-      class="fit-chip-group__measure"
-      :class="gapClass"
-      aria-hidden="true"
-    >
-      <span
-        v-for="(item, index) in candidateItems"
-        :key="`measure-${item}-${index}`"
-        :ref="(element) => setMeasureItemRef(index, element)"
-        class="fit-chip-group__item"
-      >
-        <Chip :tone="tone" :size="size" :class="chipClass">
-          {{ item }}
-        </Chip>
-      </span>
-    </div>
-
-    <div
-      v-if="visibleItems.length > 0 || !hasMeasured"
-      class="fit-chip-group__row"
-      :class="[gapClass, { 'is-ready': hasMeasured }]"
-    >
-      <span
-        v-for="(item, index) in visibleItems"
-        :key="`${item}-${index}`"
-        class="fit-chip-group__item"
-      >
-        <Chip :tone="tone" :size="size" :class="chipClass">
-          {{ item }}
-        </Chip>
-      </span>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {
-  computed,
-  nextTick,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  watch,
-} from "vue";
-import Chip from "@/shared/ui/display/Chip.vue";
-
-type FitChipGroupGap = "xs" | "sm" | "md";
-type FitChipGroupTone =
-  | "secondary"
-  | "primary"
-  | "surface"
-  | "outline"
-  | "danger"
-  | "warning";
-type FitChipGroupSize = "sm" | "md";
-type FitChipGroupClass = string | string[] | Record<string, boolean>;
-
-const props = withDefaults(
-  defineProps<{
-    items: string[];
-    maxItems?: number;
-    gap?: FitChipGroupGap;
-    tone?: FitChipGroupTone;
-    size?: FitChipGroupSize;
-    ariaLabel?: string;
-    chipClass?: FitChipGroupClass;
-  }>(),
-  {
-    maxItems: Number.POSITIVE_INFINITY,
-    gap: "xs",
-    tone: "surface",
-    size: "sm",
-    ariaLabel: undefined,
-    chipClass: undefined,
-  },
-);
-
-const measureRowRef = ref<HTMLElement | null>(null);
-const measureItemRefs = ref<(HTMLElement | null)[]>([]);
-const visibleItemCount = ref(0);
-const hasMeasured = ref(false);
-
-const candidateItems = computed(() => props.items.slice(0, props.maxItems));
-const visibleItems = computed(() =>
-  candidateItems.value.slice(0, visibleItemCount.value),
-);
-const gapClass = computed(() => `fit-chip-group--gap-${props.gap}`);
-
-const setMeasureItemRef = (index: number, element: unknown): void => {
-  measureItemRefs.value[index] = element instanceof HTMLElement ? element : null;
-};
-
-const syncVisibleItemCount = (): void => {
-  const measureRow = measureRowRef.value;
-
-  if (!measureRow) {
-    visibleItemCount.value = 0;
-    hasMeasured.value = true;
-    return;
-  }
-
-  const rowWidth = measureRow.clientWidth;
-  let fitCount = 0;
-
-  for (const itemRef of measureItemRefs.value.slice(0, candidateItems.value.length)) {
-    if (!itemRef) {
-      break;
-    }
-
-    const itemRightEdge = itemRef.offsetLeft + itemRef.offsetWidth;
-    if (itemRightEdge > rowWidth) {
-      break;
-    }
-
-    fitCount += 1;
-  }
-
-  visibleItemCount.value = fitCount;
-  hasMeasured.value = true;
-};
-
-const scheduleVisibleItemSync = async (): Promise<void> => {
-  hasMeasured.value = false;
-  await nextTick();
-  syncVisibleItemCount();
-};
-
-watch(
-  candidateItems,
-  () => {
-    measureItemRefs.value = [];
-    visibleItemCount.value = 0;
-    void scheduleVisibleItemSync();
-  },
-  {
-    immediate: true,
-  },
-);
-
-let resizeObserver: ResizeObserver | null = null;
-
-watch(measureRowRef, (measureRow) => {
-  if (resizeObserver) {
-    resizeObserver.disconnect();
-    if (measureRow) {
-      resizeObserver.observe(measureRow);
-    }
-  }
-
-  if (measureRow) {
-    void scheduleVisibleItemSync();
-  } else {
-    visibleItemCount.value = 0;
-  }
-});
-
-onMounted(() => {
-  if (typeof ResizeObserver !== "undefined") {
-    resizeObserver = new ResizeObserver(() => {
-      void scheduleVisibleItemSync();
-    });
-
-    if (measureRowRef.value) {
-      resizeObserver.observe(measureRowRef.value);
-    }
-  }
-
-  void scheduleVisibleItemSync();
-});
-
-onBeforeUnmount(() => {
-  resizeObserver?.disconnect();
-});
-</script>
-
-<style lang="scss" scoped>
-.fit-chip-group {
-  position: relative;
-  display: block;
-  width: 100%;
-}
-
-.fit-chip-group__row,
-.fit-chip-group__measure {
-  display: flex;
-  flex-wrap: nowrap;
-  align-items: center;
-  overflow: hidden;
-}
-
-.fit-chip-group__row {
-  visibility: hidden;
-
-  &.is-ready {
-    visibility: visible;
-  }
-}
-
-.fit-chip-group__measure {
-  position: absolute;
-  inset: 0 auto auto 0;
-  width: 100%;
-  visibility: hidden;
-  pointer-events: none;
-}
-
-.fit-chip-group__item {
-  display: inline-flex;
-  flex-shrink: 0;
-}
-
-.fit-chip-group--gap-xs {
-  gap: var(--sys-spacing-xsmall);
-}
-
-.fit-chip-group--gap-sm {
-  gap: var(--sys-spacing-small);
-}
-
-.fit-chip-group--gap-md {
-  gap: var(--sys-spacing-medium);
-}
-</style>
diff --git a/apps/frontend/src/shared/ui/display/InfoRow.vue b/apps/frontend/src/shared/ui/display/InfoRow.vue
deleted file mode 100644
index 44e5e48c3..000000000
--- a/apps/frontend/src/shared/ui/display/InfoRow.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<template>
-  <div
-    class="info-row"
-    :class="[
-      `info-row--layout-${layout}`,
-      `info-row--align-${align}`,
-      { 'info-row--collapse': collapseOnMobile },
-    ]"
-  >
-    <div v-if="label || $slots.label" class="info-row__label">
-      <slot name="label">
-        {{ label }}
-      </slot>
-    </div>
-    <div class="info-row__value">
-      <slot>
-        {{ value }}
-      </slot>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-type InfoRowLayout = "inline" | "stack";
-type InfoRowAlign = "start" | "end";
-
-withDefaults(
-  defineProps<{
-    label?: string;
-    value?: string | number | null;
-    layout?: InfoRowLayout;
-    align?: InfoRowAlign;
-    collapseOnMobile?: boolean;
-  }>(),
-  {
-    label: undefined,
-    value: null,
-    layout: "inline",
-    align: "end",
-    collapseOnMobile: true,
-  },
-);
-</script>
-
-<style lang="scss" scoped>
-.info-row {
-  display: flex;
-  gap: var(--sys-spacing-xsmall);
-  min-width: 0;
-}
-
-.info-row--layout-inline {
-  align-items: center;
-  justify-content: space-between;
-}
-
-.info-row--layout-stack {
-  flex-direction: column;
-  align-items: flex-start;
-}
-
-.info-row__label {
-  @include mx.pu-font(control);
-  color: var(--sys-color-on-surface-variant);
-  flex-shrink: 0;
-}
-
-.info-row__value {
-  @include mx.pu-font(body);
-  color: var(--sys-color-on-surface);
-  min-width: 0;
-  flex: 1;
-}
-
-.info-row--align-end .info-row__value {
-  text-align: right;
-}
-
-.info-row--layout-stack .info-row__value,
-.info-row--align-start .info-row__value {
-  text-align: left;
-}
-
-@media (max-width: 879px) {
-  .info-row--layout-inline.info-row--collapse {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .info-row--layout-inline.info-row--collapse .info-row__value {
-    text-align: left;
-  }
-}
-</style>
diff --git a/apps/frontend/src/shared/ui/display/InfoRowAction.vue b/apps/frontend/src/shared/ui/display/InfoRowAction.vue
deleted file mode 100644
index eff2d48ef..000000000
--- a/apps/frontend/src/shared/ui/display/InfoRowAction.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<template>
-  <div class="info-row-action">
-    <div v-if="hasLabel" class="info-row-action__label">
-      <slot name="label">
-        {{ props.label }}
-      </slot>
-    </div>
-
-    <button
-      class="info-row-action__button"
-      type="button"
-      :aria-label="props.ariaLabel"
-      :disabled="props.disabled"
-      @click="emit('click', $event)"
-    >
-      <span v-if="hasValue" class="info-row-action__value">
-        <slot>
-          {{ props.value }}
-        </slot>
-      </span>
-      <span
-        v-if="props.suffixIcon"
-        class="info-row-action__suffix"
-        aria-hidden="true"
-      >
-        <span :class="props.suffixIcon"></span>
-      </span>
-    </button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, useSlots } from "vue";
-
-const props = withDefaults(
-  defineProps<{
-    label?: string;
-    value?: string | number | null;
-    suffixIcon?: string;
-    ariaLabel?: string;
-    disabled?: boolean;
-  }>(),
-  {
-    label: undefined,
-    value: null,
-    suffixIcon: "i-mdi-chevron-right",
-    ariaLabel: undefined,
-    disabled: false,
-  },
-);
-
-const emit = defineEmits<{
-  click: [event: MouseEvent];
-}>();
-
-const slots = useSlots();
-
-const hasLabel = computed(() => Boolean(slots.label) || Boolean(props.label));
-const hasValue = computed(
-  () =>
-    Boolean(slots.default) ||
-    (props.value !== null &&
-      props.value !== undefined &&
-      String(props.value).length > 0),
-);
-</script>
-
-<style lang="scss" scoped>
-.info-row-action {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--sys-spacing-xsmall);
-  min-width: 0;
-}
-
-.info-row-action__label {
-  @include mx.pu-font(control);
-  color: var(--sys-color-on-surface-variant);
-  flex-shrink: 0;
-}
-
-.info-row-action__button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--sys-spacing-xsmall);
-  min-width: 0;
-  padding: 0;
-  border: 0;
-  border-radius: var(--sys-radius-small);
-  background: transparent;
-  color: var(--sys-color-secondary);
-  cursor: pointer;
-  appearance: none;
-}
-
-.info-row-action__button:disabled {
-  opacity: var(--sys-opacity-disabled);
-  cursor: not-allowed;
-}
-
-.info-row-action__button:focus-visible {
-  outline: 2px solid var(--sys-color-primary);
-  outline-offset: 2px;
-}
-
-.info-row-action__value {
-  @include mx.pu-font(control);
-  min-width: 0;
-  overflow: hidden;
-  text-align: right;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.info-row-action__suffix {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.info-row-action__suffix :deep([class^="i-"]),
-.info-row-action__suffix :deep([class*=" i-"]) {
-  @include mx.pu-icon(small);
-}
-</style>
diff --git a/apps/frontend/src/shared/ui/feedback/EmptyState.vue b/apps/frontend/src/shared/ui/feedback/EmptyState.vue
deleted file mode 100644
index d26a2f882..000000000
--- a/apps/frontend/src/shared/ui/feedback/EmptyState.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-  <PuEmptyState
-    :as="props.as"
-    :title="props.title"
-    :description="props.description"
-    :icon="props.icon"
-    :compact="props.compact"
-    :align="props.align"
-    :surface-level="surfaceLevel"
-    :variant="variant"
-  >
-    <slot />
-
-    <template
-      v-if="$slots.actions"
-      #actions
-    >
-      <slot name="actions" />
-    </template>
-  </PuEmptyState>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import { PuEmptyState } from "@partner-up-dev/design-web";
-
-type EmptyStateAlign = "start" | "center";
-type EmptyStateTone = "section" | "outline";
-type EmptyStateSurfaceLevel = "section";
-type EmptyStateVariant = "soft" | "outline";
-
-const props = withDefaults(
-  defineProps<{
-    as?: string;
-    title: string;
-    description?: string;
-    icon?: string;
-    compact?: boolean;
-    align?: EmptyStateAlign;
-    tone?: EmptyStateTone;
-  }>(),
-  {
-    as: "section",
-    description: undefined,
-    icon: undefined,
-    compact: false,
-    align: "center",
-    tone: "outline",
-  },
-);
-
-const surfaceLevel = computed<EmptyStateSurfaceLevel>(() => "section");
-const variant = computed<EmptyStateVariant>(() =>
-  props.tone === "outline" ? "outline" : "soft",
-);
-</script>
diff --git a/apps/frontend/src/shared/ui/feedback/InlineNotice.vue b/apps/frontend/src/shared/ui/feedback/InlineNotice.vue
deleted file mode 100644
index 447493be6..000000000
--- a/apps/frontend/src/shared/ui/feedback/InlineNotice.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-  <PuInlineNotice
-    :tone="props.tone"
-    :title="props.title"
-    :message="props.message"
-    :dismissible="props.dismissible"
-    :close-label="resolvedCloseLabel"
-    @close="emit('close')"
-  >
-    <slot />
-  </PuInlineNotice>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import { useI18n } from "vue-i18n";
-import { PuInlineNotice } from "@partner-up-dev/design-web";
-
-type InlineNoticeTone = "info" | "success" | "warning" | "error";
-
-const props = withDefaults(
-  defineProps<{
-    tone?: InlineNoticeTone;
-    title?: string;
-    message?: string;
-    dismissible?: boolean;
-    closeLabel?: string;
-  }>(),
-  {
-    tone: "info",
-    title: undefined,
-    message: undefined,
-    dismissible: false,
-    closeLabel: undefined,
-  },
-);
-
-const emit = defineEmits<{
-  close: [];
-}>();
-
-const { t } = useI18n();
-
-const resolvedCloseLabel = computed(() => props.closeLabel ?? t("common.close"));
-</script>
diff --git a/apps/frontend/src/shared/ui/feedback/LoadingIndicator.vue b/apps/frontend/src/shared/ui/feedback/LoadingIndicator.vue
deleted file mode 100644
index eee8408a6..000000000
--- a/apps/frontend/src/shared/ui/feedback/LoadingIndicator.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <PuLoadingState
-    :message="props.message"
-    :label="resolvedLabel"
-    size="lg"
-  />
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import { useI18n } from "vue-i18n";
-import { PuLoadingState } from "@partner-up-dev/design-web";
-
-const props = defineProps<{
-  message?: string;
-}>();
-
-const { t } = useI18n();
-
-const resolvedLabel = computed(() => props.message ?? t("common.loading"));
-</script>
diff --git a/apps/frontend/src/shared/ui/forms/FormField.vue b/apps/frontend/src/shared/ui/forms/FormField.vue
deleted file mode 100644
index 760d4c995..000000000
--- a/apps/frontend/src/shared/ui/forms/FormField.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<template>
-  <component :is="as" class="form-field">
-    <div v-if="label || $slots.labelTrailing" class="form-field__header">
-      <label v-if="label" class="form-field__label" :for="forId">
-        {{ label }}
-        <span v-if="required" class="form-field__required" aria-hidden="true">
-          *
-        </span>
-      </label>
-      <slot name="labelTrailing" />
-    </div>
-
-    <div class="form-field__control">
-      <slot />
-    </div>
-
-    <p v-if="error" class="form-field__message form-field__message--error">
-      {{ error }}
-    </p>
-    <p v-else-if="hint" class="form-field__message form-field__message--hint">
-      {{ hint }}
-    </p>
-  </component>
-</template>
-
-<script setup lang="ts">
-withDefaults(
-  defineProps<{
-    as?: string;
-    label?: string;
-    forId?: string;
-    hint?: string | null;
-    error?: string | null;
-    required?: boolean;
-  }>(),
-  {
-    as: "div",
-    label: undefined,
-    forId: undefined,
-    hint: null,
-    error: null,
-    required: false,
-  },
-);
-</script>
-
-<style lang="scss" scoped>
-.form-field {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sys-spacing-xsmall);
-}
-
-.form-field__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--sys-spacing-small);
-}
-
-.form-field__label {
-  @include mx.pu-font(control);
-  color: var(--sys-color-on-surface-variant);
-}
-
-.form-field__required {
-  color: var(--sys-color-error);
-}
-
-.form-field__control {
-  min-width: 0;
-}
-
-.form-field__message {
-  margin: 0;
-  @include mx.pu-font(support);
-}
-
-.form-field__message--hint {
-  color: var(--sys-color-on-surface-variant);
-}
-
-.form-field__message--error {
-  color: var(--sys-color-error);
-}
-</style>
diff --git a/apps/frontend/src/shared/ui/forms/TextInput.vue b/apps/frontend/src/shared/ui/forms/TextInput.vue
deleted file mode 100644
index db07069d5..000000000
--- a/apps/frontend/src/shared/ui/forms/TextInput.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-  <input
-    :id="inputId"
-    class="text-input"
-    :type="type"
-    :value="modelValue"
-    :disabled="disabled"
-    :placeholder="placeholder"
-    :inputmode="inputmode"
-    :autocomplete="autocomplete"
-    :maxlength="maxLength"
-    @input="
-      $emit('update:modelValue', ($event.target as HTMLInputElement).value)
-    "
-  />
-</template>
-
-<script setup lang="ts">
-type TextInputType =
-  | "text"
-  | "url"
-  | "email"
-  | "tel"
-  | "search"
-  | "number"
-  | "password";
-
-withDefaults(
-  defineProps<{
-    inputId?: string;
-    modelValue?: string;
-    type?: TextInputType;
-    disabled?: boolean;
-    placeholder?: string;
-    inputmode?:
-      | "none"
-      | "text"
-      | "decimal"
-      | "numeric"
-      | "tel"
-      | "search"
-      | "email"
-      | "url";
-    autocomplete?: string;
-    maxLength?: number;
-  }>(),
-  {
-    inputId: undefined,
-    modelValue: "",
-    type: "text",
-    disabled: false,
-    placeholder: "",
-    inputmode: undefined,
-    autocomplete: undefined,
-    maxLength: undefined,
-  },
-);
-
-defineEmits<{
-  "update:modelValue": [value: string];
-}>();
-</script>
-
-<style scoped lang="scss">
-.text-input {
-  @include mx.pu-font(body);
-  width: 100%;
-  min-width: 0;
-  border: 1px solid var(--sys-color-outline);
-  color: var(--sys-color-on-surface);
-  background: transparent;
-  padding: var(--sys-spacing-small);
-  border-radius: var(--sys-radius-xsmall);
-
-  &::placeholder {
-    color: var(--sys-color-on-surface-variant);
-    opacity: 0.6;
-  }
-
-  &:focus {
-    outline: 2px solid var(--sys-color-primary);
-    outline-offset: -1px;
-  }
-
-  &:disabled {
-    opacity: var(--sys-opacity-disabled);
-  }
-}
-</style>
diff --git a/apps/frontend/src/shared/ui/forms/TextareaInput.vue b/apps/frontend/src/shared/ui/forms/TextareaInput.vue
deleted file mode 100644
index 952242d96..000000000
--- a/apps/frontend/src/shared/ui/forms/TextareaInput.vue
+++ /dev/null
@@ -1,111 +0,0 @@
-<template>
-  <div class="textarea-input">
-    <textarea
-      :id="inputId"
-      class="textarea-input__control"
-      :value="modelValue"
-      :disabled="disabled"
-      :placeholder="placeholder"
-      :rows="rows"
-      :maxlength="maxLength"
-      :style="controlStyle"
-      @input="
-        $emit(
-          'update:modelValue',
-          ($event.target as HTMLTextAreaElement).value,
-        )
-      "
-    />
-
-    <span v-if="showCount" class="textarea-input__count">
-      <template v-if="maxLength !== undefined">
-        {{ currentLength }} / {{ maxLength }}
-      </template>
-      <template v-else>
-        {{ currentLength }}
-      </template>
-    </span>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-
-const props = withDefaults(
-  defineProps<{
-    inputId?: string;
-    modelValue?: string;
-    disabled?: boolean;
-    placeholder?: string;
-    rows?: number;
-    maxLength?: number;
-    showCount?: boolean;
-    minHeight?: string;
-  }>(),
-  {
-    inputId: undefined,
-    modelValue: "",
-    disabled: false,
-    placeholder: "",
-    rows: 3,
-    maxLength: undefined,
-    showCount: false,
-    minHeight: undefined,
-  },
-);
-
-defineEmits<{
-  "update:modelValue": [value: string];
-}>();
-
-const currentLength = computed(() => props.modelValue.length);
-const controlStyle = computed(() =>
-  props.minHeight
-    ? {
-        "--textarea-input-min-height": props.minHeight,
-      }
-    : undefined,
-);
-</script>
-
-<style scoped lang="scss">
-.textarea-input {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sys-spacing-xsmall);
-  width: 100%;
-  min-width: 0;
-}
-
-.textarea-input__control {
-  @include mx.pu-font(body);
-  width: 100%;
-  border: 1px solid var(--sys-color-outline);
-  color: var(--sys-color-on-surface);
-  background: transparent;
-  padding: var(--sys-spacing-medium);
-  border-radius: var(--sys-radius-xsmall);
-  resize: vertical;
-  min-height: var(--textarea-input-min-height, 7.5rem);
-
-  &::placeholder {
-    color: var(--sys-color-on-surface-variant);
-    opacity: 0.6;
-  }
-
-  &:focus {
-    outline: 2px solid var(--sys-color-primary);
-    outline-offset: -1px;
-  }
-
-  &:disabled {
-    opacity: var(--sys-opacity-disabled);
-  }
-}
-
-.textarea-input__count {
-  @include mx.pu-font(caption);
-  color: var(--sys-color-on-surface-variant);
-  text-align: right;
-}
-</style>
diff --git a/apps/frontend/src/shared/ui/forms/ToggleSwitch.vue b/apps/frontend/src/shared/ui/forms/ToggleSwitch.vue
deleted file mode 100644
index ac25eb0bf..000000000
--- a/apps/frontend/src/shared/ui/forms/ToggleSwitch.vue
+++ /dev/null
@@ -1,125 +0,0 @@
-<template>
-  <button
-    class="toggle-switch"
-    :class="{
-      'is-checked': props.modelValue,
-      'is-disabled': props.disabled,
-    }"
-    type="button"
-    role="switch"
-    :aria-checked="props.modelValue"
-    :disabled="props.disabled"
-    @click="handleClick"
-  >
-    <span class="toggle-switch__label">
-      {{ props.label }}
-    </span>
-    <span class="toggle-switch__track" aria-hidden="true">
-      <span class="toggle-switch__thumb" />
-    </span>
-  </button>
-</template>
-
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    modelValue: boolean;
-    label: string;
-    disabled?: boolean;
-  }>(),
-  {
-    disabled: false,
-  },
-);
-
-const emit = defineEmits<{
-  "update:modelValue": [value: boolean];
-  change: [value: boolean];
-}>();
-
-const handleClick = () => {
-  if (props.disabled) {
-    return;
-  }
-
-  const nextValue = !props.modelValue;
-  emit("update:modelValue", nextValue);
-  emit("change", nextValue);
-};
-</script>
-
-<style lang="scss" scoped>
-.toggle-switch {
-  --toggle-switch-track-width: 3rem;
-  --toggle-switch-track-height: 1.75rem;
-  --toggle-switch-track-padding: 0.2rem;
-  --toggle-switch-thumb-size: 1.35rem;
-  --toggle-switch-thumb-offset: 1.2rem;
-
-  display: inline-flex;
-  align-items: center;
-  gap: var(--sys-spacing-small);
-  min-width: 0;
-  border: none;
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  padding: 0;
-  font: inherit;
-
-  &:focus-visible {
-    outline: 2px solid var(--sys-color-primary);
-    outline-offset: 2px;
-    border-radius: var(--sys-radius-medium);
-  }
-}
-
-.toggle-switch.is-disabled {
-  cursor: not-allowed;
-  opacity: var(--sys-opacity-disabled);
-}
-
-.toggle-switch__label {
-  min-width: 0;
-  @include mx.pu-font(control);
-}
-
-.toggle-switch__track {
-  position: relative;
-  flex: 0 0 auto;
-  width: var(--toggle-switch-track-width);
-  height: var(--toggle-switch-track-height);
-  border-radius: var(--sys-radius-large);
-  background: var(--sys-color-surface-container-highest);
-  transition: background-color 180ms ease;
-}
-
-.toggle-switch__thumb {
-  position: absolute;
-  top: var(--toggle-switch-track-padding);
-  left: var(--toggle-switch-track-padding);
-  width: var(--toggle-switch-thumb-size);
-  height: var(--toggle-switch-thumb-size);
-  border-radius: var(--sys-radius-full);
-  background: var(--sys-color-on-surface-variant);
-  transition:
-    transform 180ms ease,
-    background-color 180ms ease;
-}
-
-.toggle-switch.is-checked .toggle-switch__track {
-  background: var(--sys-color-primary-container);
-}
-
-.toggle-switch.is-checked .toggle-switch__thumb {
-  transform: translateX(var(--toggle-switch-thumb-offset));
-  background: var(--sys-color-primary);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .toggle-switch__track,
-  .toggle-switch__thumb {
-    transition: none !important;
-  }
-}
-</style>
diff --git a/apps/frontend/src/shared/ui/forms/WheelPicker.vue b/apps/frontend/src/shared/ui/forms/WheelPicker.vue
deleted file mode 100644
index 49bbf5232..000000000
--- a/apps/frontend/src/shared/ui/forms/WheelPicker.vue
+++ /dev/null
@@ -1,791 +0,0 @@
-<template>
-  <div
-    ref="rootRef"
-    class="wheel-picker"
-    :class="[
-      `wheel-picker--tone-${resolvedTone}`,
-      {
-        'is-disabled': props.disabled,
-        'is-dragging': isDragging,
-        'is-snapping': isSnapping,
-      },
-    ]"
-    :style="rootStyle"
-    role="listbox"
-    :aria-label="props.ariaLabel"
-    :aria-disabled="props.disabled ? 'true' : undefined"
-    :aria-activedescendant="activeOptionId"
-    :tabindex="props.disabled ? -1 : 0"
-    @keydown="handleKeydown"
-    @pointerdown="handlePointerDown"
-    @pointermove="handlePointerMove"
-    @pointerup="handlePointerUp"
-    @pointercancel="handlePointerCancel"
-    @wheel="handleWheel"
-  >
-    <div class="wheel-picker__viewport">
-      <div class="wheel-picker__highlight" aria-hidden="true"></div>
-      <div class="wheel-picker__fade wheel-picker__fade--top" aria-hidden="true"></div>
-      <div
-        class="wheel-picker__fade wheel-picker__fade--bottom"
-        aria-hidden="true"
-      ></div>
-
-      <div class="wheel-picker__list" :style="listStyle">
-        <button
-          v-for="(option, index) in props.options"
-          :id="getOptionId(index)"
-          :key="`${String(option.value)}-${index}`"
-          class="wheel-picker__option"
-          :class="{
-            'wheel-picker__option--active': index === activeIndex,
-            'wheel-picker__option--disabled': option.disabled,
-          }"
-          :style="getOptionStyle(index)"
-          type="button"
-          role="option"
-          :aria-selected="index === activeIndex"
-          :disabled="props.disabled || option.disabled"
-          @click="handleOptionClick(index)"
-        >
-          <span class="wheel-picker__option-label">
-            <slot
-              name="option"
-              :option="option"
-              :index="index"
-              :active="index === activeIndex"
-              :selected="index === activeIndex"
-              :disabled="option.disabled === true"
-            >
-              {{ option.label }}
-            </slot>
-          </span>
-        </button>
-      </div>
-
-      <div
-        v-if="props.emptyLabel && props.options.length === 0"
-        class="wheel-picker__empty"
-      >
-        {{ props.emptyLabel }}
-      </div>
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-export type WheelPickerValue = string | number;
-
-export type WheelPickerOption = {
-  label: string;
-  value: WheelPickerValue;
-  disabled?: boolean;
-};
-
-export type WheelPickerTone =
-  | "surface"
-  | "outline"
-  | "primary"
-  | "secondary"
-  | "tertiary";
-export type WheelPickerVariant = WheelPickerTone | "teritary";
-
-let wheelPickerIdSeed = 0;
-</script>
-
-<script setup lang="ts">
-import { computed, onBeforeUnmount, ref, watch, type CSSProperties } from "vue";
-
-type WheelPickerStyle = CSSProperties & Record<`--${string}`, string>;
-
-type DragState = {
-  pointerId: number;
-  startY: number;
-  startScrollPosition: number;
-  lastY: number;
-  lastTime: number;
-  velocityY: number;
-};
-
-const SNAP_DURATION_MS = 220;
-const WHEEL_IDLE_MS = 140;
-const INERTIA_MS = 180;
-const DRAG_CLICK_SUPPRESSION_PX = 4;
-const WHEEL_DELTA_LINE = 1;
-const WHEEL_DELTA_PAGE = 2;
-
-const props = withDefaults(
-  defineProps<{
-    modelValue?: WheelPickerValue | null;
-    options: readonly WheelPickerOption[];
-    variant?: WheelPickerVariant;
-    tone?: WheelPickerVariant;
-    itemHeight?: number;
-    visibleCount?: number;
-    disabled?: boolean;
-    ariaLabel?: string;
-    emptyLabel?: string | null;
-  }>(),
-  {
-    modelValue: null,
-    variant: "surface",
-    tone: undefined,
-    itemHeight: 44,
-    visibleCount: 5,
-    disabled: false,
-    ariaLabel: "Wheel picker",
-    emptyLabel: null,
-  },
-);
-
-const emit = defineEmits<{
-  "update:modelValue": [value: WheelPickerValue];
-  change: [value: WheelPickerValue, option: WheelPickerOption, index: number];
-}>();
-
-defineSlots<{
-  option(props: {
-    option: WheelPickerOption;
-    index: number;
-    active: boolean;
-    selected: boolean;
-    disabled: boolean;
-  }): unknown;
-}>();
-
-const rootRef = ref<HTMLElement | null>(null);
-const pickerId = `wheel-picker-${++wheelPickerIdSeed}`;
-const scrollPositionPx = ref(0);
-const isDragging = ref(false);
-const isSnapping = ref(false);
-const suppressNextClick = ref(false);
-const dragState = ref<DragState | null>(null);
-
-let snapTimer: number | null = null;
-let wheelTimer: number | null = null;
-let lastWheelDirection = 0;
-
-const resolvedTone = computed<WheelPickerTone>(() => {
-  const rawTone = props.tone ?? props.variant;
-  return rawTone === "teritary" ? "tertiary" : rawTone;
-});
-
-const itemHeightPx = computed(() => {
-  if (!Number.isFinite(props.itemHeight)) {
-    return 44;
-  }
-
-  return Math.max(32, Math.round(props.itemHeight));
-});
-
-const normalizedVisibleCount = computed(() => {
-  if (!Number.isFinite(props.visibleCount)) {
-    return 5;
-  }
-
-  const rounded = Math.max(3, Math.round(props.visibleCount));
-  return rounded % 2 === 0 ? rounded + 1 : rounded;
-});
-
-const viewportHeightPx = computed(
-  () => itemHeightPx.value * normalizedVisibleCount.value,
-);
-
-const centerOffsetPx = computed(
-  () => (viewportHeightPx.value - itemHeightPx.value) / 2,
-);
-
-const maxScrollPositionPx = computed(() =>
-  Math.max(0, (props.options.length - 1) * itemHeightPx.value),
-);
-
-const activeIndex = computed(() => {
-  if (props.options.length === 0) {
-    return -1;
-  }
-
-  return clampIndex(Math.round(scrollPositionPx.value / itemHeightPx.value));
-});
-
-const activeOptionId = computed(() =>
-  activeIndex.value >= 0 ? getOptionId(activeIndex.value) : undefined,
-);
-
-const rootStyle = computed<WheelPickerStyle>(() => ({
-  "--wheel-picker-item-height": `${itemHeightPx.value}px`,
-  "--wheel-picker-viewport-height": `${viewportHeightPx.value}px`,
-}));
-
-const listStyle = computed<CSSProperties>(() => ({
-  transform: `translate3d(0, ${
-    centerOffsetPx.value - scrollPositionPx.value
-  }px, 0)`,
-}));
-
-watch(
-  () => [props.modelValue, props.options, itemHeightPx.value] as const,
-  () => {
-    syncScrollPositionToModel();
-  },
-  { immediate: true, flush: "post" },
-);
-
-onBeforeUnmount(() => {
-  clearSnapTimer();
-  clearWheelTimer();
-});
-
-function getOptionId(index: number): string {
-  return `${pickerId}-option-${index}`;
-}
-
-function getOptionStyle(index: number): CSSProperties {
-  const virtualIndex = scrollPositionPx.value / itemHeightPx.value;
-  const distance = index - virtualIndex;
-  const absoluteDistance = Math.min(
-    Math.abs(distance),
-    normalizedVisibleCount.value,
-  );
-  const scale = Math.max(0.82, 1 - absoluteDistance * 0.075);
-  const opacity = Math.max(0.22, 1 - absoluteDistance * 0.22);
-  const rotateX = clampNumber(distance * -16, -42, 42);
-
-  return {
-    height: `${itemHeightPx.value}px`,
-    transform: `rotateX(${rotateX}deg) scale(${scale})`,
-    opacity: String(opacity),
-  };
-}
-
-function handlePointerDown(event: PointerEvent): void {
-  if (props.disabled || props.options.length === 0 || !isPrimaryPointer(event)) {
-    return;
-  }
-
-  clearSnapTimer();
-  clearWheelTimer();
-
-  const target = event.currentTarget;
-  if (target instanceof HTMLElement) {
-    target.setPointerCapture(event.pointerId);
-    target.focus({ preventScroll: true });
-  }
-
-  const now = performance.now();
-  isDragging.value = true;
-  isSnapping.value = false;
-  suppressNextClick.value = false;
-  dragState.value = {
-    pointerId: event.pointerId,
-    startY: event.clientY,
-    startScrollPosition: scrollPositionPx.value,
-    lastY: event.clientY,
-    lastTime: now,
-    velocityY: 0,
-  };
-}
-
-function handlePointerMove(event: PointerEvent): void {
-  const state = dragState.value;
-  if (!state || state.pointerId !== event.pointerId) {
-    return;
-  }
-
-  event.preventDefault();
-
-  const deltaY = event.clientY - state.startY;
-  if (Math.abs(deltaY) > DRAG_CLICK_SUPPRESSION_PX) {
-    suppressNextClick.value = true;
-  }
-
-  setScrollPosition(state.startScrollPosition - deltaY);
-
-  const now = performance.now();
-  const elapsed = Math.max(1, now - state.lastTime);
-  state.velocityY = (event.clientY - state.lastY) / elapsed;
-  state.lastY = event.clientY;
-  state.lastTime = now;
-}
-
-function handlePointerUp(event: PointerEvent): void {
-  finishPointerInteraction(event);
-}
-
-function handlePointerCancel(event: PointerEvent): void {
-  finishPointerInteraction(event);
-}
-
-function handleWheel(event: WheelEvent): void {
-  if (props.disabled || props.options.length === 0) {
-    return;
-  }
-
-  event.preventDefault();
-  clearSnapTimer();
-
-  const delta = normalizeWheelDelta(event);
-  lastWheelDirection = Math.sign(delta);
-  isSnapping.value = false;
-  setScrollPosition(scrollPositionPx.value + delta);
-
-  clearWheelTimer();
-  wheelTimer = window.setTimeout(() => {
-    wheelTimer = null;
-    snapToNearest(lastWheelDirection);
-  }, WHEEL_IDLE_MS);
-}
-
-function handleOptionClick(index: number): void {
-  if (suppressNextClick.value) {
-    window.setTimeout(() => {
-      suppressNextClick.value = false;
-    }, 0);
-    return;
-  }
-
-  if (props.disabled || props.options[index]?.disabled) {
-    return;
-  }
-
-  snapToIndex(index, true);
-}
-
-function handleKeydown(event: KeyboardEvent): void {
-  if (props.disabled || props.options.length === 0) {
-    return;
-  }
-
-  const currentIndex = activeIndex.value >= 0 ? activeIndex.value : 0;
-  let targetIndex: number | null = null;
-
-  if (event.key === "ArrowDown") {
-    targetIndex = findEnabledIndex(currentIndex + 1, 1);
-  } else if (event.key === "ArrowUp") {
-    targetIndex = findEnabledIndex(currentIndex - 1, -1);
-  } else if (event.key === "PageDown") {
-    targetIndex = resolveSnapIndex(
-      (currentIndex + Math.floor(normalizedVisibleCount.value / 2)) *
-        itemHeightPx.value,
-      1,
-    );
-  } else if (event.key === "PageUp") {
-    targetIndex = resolveSnapIndex(
-      (currentIndex - Math.floor(normalizedVisibleCount.value / 2)) *
-        itemHeightPx.value,
-      -1,
-    );
-  } else if (event.key === "Home") {
-    targetIndex = findEnabledIndex(0, 1);
-  } else if (event.key === "End") {
-    targetIndex = findEnabledIndex(props.options.length - 1, -1);
-  }
-
-  if (targetIndex === null) {
-    return;
-  }
-
-  event.preventDefault();
-  snapToIndex(targetIndex, true);
-}
-
-function finishPointerInteraction(event: PointerEvent): void {
-  const state = dragState.value;
-  if (!state || state.pointerId !== event.pointerId) {
-    return;
-  }
-
-  const target = event.currentTarget;
-  if (target instanceof HTMLElement && target.hasPointerCapture(event.pointerId)) {
-    target.releasePointerCapture(event.pointerId);
-  }
-
-  const predictedPosition = scrollPositionPx.value - state.velocityY * INERTIA_MS;
-  const targetIndex = resolveSnapIndex(predictedPosition, Math.sign(-state.velocityY));
-
-  dragState.value = null;
-  isDragging.value = false;
-  snapToIndex(targetIndex, true);
-}
-
-function syncScrollPositionToModel(): void {
-  const modelIndex = props.options.findIndex((option) =>
-    Object.is(option.value, props.modelValue),
-  );
-
-  if (modelIndex >= 0) {
-    moveToIndex(modelIndex, false, false);
-    return;
-  }
-
-  const fallbackIndex =
-    findNearestEnabledIndex(activeIndex.value, 0) ?? clampIndex(0);
-  moveToIndex(fallbackIndex, false, false);
-}
-
-function snapToNearest(preferredDirection: number): void {
-  const targetIndex = resolveSnapIndex(scrollPositionPx.value, preferredDirection);
-  snapToIndex(targetIndex, true);
-}
-
-function snapToIndex(index: number, shouldCommit: boolean): void {
-  moveToIndex(index, true, shouldCommit);
-}
-
-function moveToIndex(
-  index: number,
-  shouldAnimate: boolean,
-  shouldCommit: boolean,
-): void {
-  const targetIndex = clampIndex(index);
-  clearSnapTimer();
-
-  if (targetIndex < 0) {
-    isSnapping.value = false;
-    setScrollPosition(0);
-    return;
-  }
-
-  isSnapping.value = shouldAnimate;
-  setScrollPosition(targetIndex * itemHeightPx.value);
-
-  if (!shouldAnimate) {
-    isSnapping.value = false;
-    if (shouldCommit) {
-      commitIndex(targetIndex);
-    }
-    return;
-  }
-
-  snapTimer = window.setTimeout(() => {
-    snapTimer = null;
-    isSnapping.value = false;
-    if (shouldCommit) {
-      commitIndex(targetIndex);
-    }
-  }, SNAP_DURATION_MS);
-}
-
-function commitIndex(index: number): void {
-  const option = props.options[index];
-  if (!option) {
-    return;
-  }
-
-  if (!Object.is(props.modelValue, option.value)) {
-    emit("update:modelValue", option.value);
-  }
-  emit("change", option.value, option, index);
-}
-
-function setScrollPosition(value: number): void {
-  scrollPositionPx.value = clampNumber(value, 0, maxScrollPositionPx.value);
-}
-
-function resolveSnapIndex(positionPx: number, preferredDirection: number): number {
-  const rawIndex = clampIndex(Math.round(positionPx / itemHeightPx.value));
-  return findNearestEnabledIndex(rawIndex, preferredDirection) ?? rawIndex;
-}
-
-function findNearestEnabledIndex(
-  index: number,
-  preferredDirection: number,
-): number | null {
-  const boundedIndex = clampIndex(index);
-  if (boundedIndex < 0) {
-    return null;
-  }
-
-  if (isEnabledIndex(boundedIndex)) {
-    return boundedIndex;
-  }
-
-  const forwardIndex = findEnabledIndex(boundedIndex + 1, 1);
-  const backwardIndex = findEnabledIndex(boundedIndex - 1, -1);
-
-  if (forwardIndex === null) {
-    return backwardIndex;
-  }
-
-  if (backwardIndex === null) {
-    return forwardIndex;
-  }
-
-  const forwardDistance = Math.abs(forwardIndex - boundedIndex);
-  const backwardDistance = Math.abs(backwardIndex - boundedIndex);
-
-  if (forwardDistance === backwardDistance) {
-    return preferredDirection < 0 ? backwardIndex : forwardIndex;
-  }
-
-  return forwardDistance < backwardDistance ? forwardIndex : backwardIndex;
-}
-
-function findEnabledIndex(startIndex: number, direction: number): number | null {
-  if (direction === 0 || props.options.length === 0) {
-    return null;
-  }
-
-  const step = direction > 0 ? 1 : -1;
-  let index = clampIndex(startIndex);
-
-  while (index >= 0 && index < props.options.length) {
-    if (isEnabledIndex(index)) {
-      return index;
-    }
-    index += step;
-  }
-
-  return null;
-}
-
-function isEnabledIndex(index: number): boolean {
-  const option = props.options[index];
-  return option !== undefined && option.disabled !== true;
-}
-
-function clampIndex(index: number): number {
-  if (props.options.length === 0) {
-    return -1;
-  }
-
-  return Math.round(clampNumber(index, 0, props.options.length - 1));
-}
-
-function clampNumber(value: number, min: number, max: number): number {
-  if (max < min) {
-    return min;
-  }
-
-  return Math.min(max, Math.max(min, value));
-}
-
-function normalizeWheelDelta(event: WheelEvent): number {
-  if (event.deltaMode === WHEEL_DELTA_LINE) {
-    return event.deltaY * itemHeightPx.value * 0.35;
-  }
-
-  if (event.deltaMode === WHEEL_DELTA_PAGE) {
-    return event.deltaY * itemHeightPx.value;
-  }
-
-  return event.deltaY;
-}
-
-function isPrimaryPointer(event: PointerEvent): boolean {
-  return event.pointerType !== "mouse" || event.button === 0;
-}
-
-function clearSnapTimer(): void {
-  if (snapTimer !== null) {
-    window.clearTimeout(snapTimer);
-    snapTimer = null;
-  }
-}
-
-function clearWheelTimer(): void {
-  if (wheelTimer !== null) {
-    window.clearTimeout(wheelTimer);
-    wheelTimer = null;
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.wheel-picker {
-  --wheel-picker-item-height: 44px;
-  --wheel-picker-viewport-height: 220px;
-  --wheel-picker-fade-background: var(--sys-color-surface);
-  --wheel-picker-highlight-background: var(--sys-color-surface-container-high);
-  --wheel-picker-highlight-border: var(--sys-color-outline-variant);
-  --wheel-picker-highlight-opacity: 0.74;
-  --wheel-picker-selected-color: var(--sys-color-on-surface);
-  --wheel-picker-muted-color: var(--sys-color-on-surface-variant);
-
-  position: relative;
-  width: 100%;
-  min-width: 0;
-  border: 0;
-  border-radius: var(--sys-radius-large);
-  background: var(--wheel-picker-fade-background);
-  color: var(--sys-color-on-surface);
-  overflow: hidden;
-  box-sizing: border-box;
-  user-select: none;
-  -webkit-user-select: none;
-  touch-action: none;
-  outline: none;
-
-  &:focus,
-  &:focus-visible {
-    outline: none;
-  }
-}
-
-.wheel-picker--tone-primary {
-  --wheel-picker-highlight-background: var(--sys-color-primary-container);
-  --wheel-picker-highlight-border: var(--sys-color-primary);
-  --wheel-picker-selected-color: var(--sys-color-primary);
-}
-
-.wheel-picker--tone-outline {
-  border: 1px solid var(--sys-color-outline-variant);
-}
-
-.wheel-picker--tone-secondary {
-  --wheel-picker-highlight-background: var(--sys-color-secondary-container);
-  --wheel-picker-highlight-border: var(--sys-color-secondary);
-  --wheel-picker-selected-color: var(--sys-color-secondary);
-}
-
-.wheel-picker--tone-tertiary {
-  --wheel-picker-highlight-background: var(--sys-color-tertiary-container);
-  --wheel-picker-highlight-border: var(--sys-color-tertiary);
-  --wheel-picker-selected-color: var(--sys-color-tertiary);
-}
-
-.wheel-picker.is-disabled {
-  opacity: var(--sys-opacity-disabled);
-  cursor: not-allowed;
-}
-
-.wheel-picker__viewport {
-  position: relative;
-  height: var(--wheel-picker-viewport-height);
-  overflow: hidden;
-  perspective: 56rem;
-  cursor: grab;
-}
-
-.wheel-picker.is-disabled .wheel-picker__viewport {
-  cursor: not-allowed;
-}
-
-.wheel-picker.is-dragging .wheel-picker__viewport {
-  cursor: grabbing;
-}
-
-.wheel-picker__highlight {
-  position: absolute;
-  z-index: 1;
-  top: 50%;
-  left: var(--sys-spacing-small);
-  right: var(--sys-spacing-small);
-  height: var(--wheel-picker-item-height);
-  transform: translateY(-50%);
-  border: 1px solid var(--wheel-picker-highlight-border);
-  border-radius: var(--sys-radius-medium);
-  background: var(--wheel-picker-highlight-background);
-  opacity: var(--wheel-picker-highlight-opacity);
-  pointer-events: none;
-}
-
-.wheel-picker__fade {
-  position: absolute;
-  z-index: 3;
-  left: 0;
-  right: 0;
-  height: calc((100% - var(--wheel-picker-item-height)) / 2);
-  pointer-events: none;
-}
-
-.wheel-picker__fade--top {
-  top: 0;
-  background: linear-gradient(
-    to bottom,
-    var(--wheel-picker-fade-background),
-    transparent
-  );
-}
-
-.wheel-picker__fade--bottom {
-  bottom: 0;
-  background: linear-gradient(
-    to top,
-    var(--wheel-picker-fade-background),
-    transparent
-  );
-}
-
-.wheel-picker__list {
-  position: relative;
-  z-index: 2;
-  transform-style: preserve-3d;
-  will-change: transform;
-}
-
-.wheel-picker.is-snapping .wheel-picker__list {
-  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
-}
-
-.wheel-picker__option {
-  display: flex;
-  width: 100%;
-  min-width: 0;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-  padding: 0 var(--sys-spacing-medium);
-  border: 0;
-  background: transparent;
-  color: var(--wheel-picker-muted-color);
-  appearance: none;
-  cursor: pointer;
-  transform-origin: center;
-  letter-spacing: 0;
-  transition:
-    color 180ms ease,
-    opacity 180ms ease,
-    transform 180ms ease,
-    filter 180ms ease;
-  @include mx.pu-font(body);
-}
-
-.wheel-picker__option:focus {
-  outline: none;
-}
-
-.wheel-picker__option:hover:not(:disabled) {
-  filter: brightness(0.98);
-}
-
-.wheel-picker__option:disabled {
-  cursor: not-allowed;
-}
-
-.wheel-picker__option--active {
-  color: var(--wheel-picker-selected-color);
-  @include mx.pu-font(section);
-}
-
-.wheel-picker__option--disabled {
-  opacity: var(--sys-opacity-disabled);
-}
-
-.wheel-picker__option-label {
-  min-width: 0;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.wheel-picker__empty {
-  position: absolute;
-  z-index: 4;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 var(--sys-spacing-medium);
-  color: var(--sys-color-on-surface-variant);
-  text-align: center;
-  @include mx.pu-font(body);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .wheel-picker__list,
-  .wheel-picker__option {
-    transition: none !important;
-  }
-}
-</style>
diff --git a/apps/frontend/src/shared/ui/identity/Avatar.vue b/apps/frontend/src/shared/ui/identity/Avatar.vue
deleted file mode 100644
index df4b928a1..000000000
--- a/apps/frontend/src/shared/ui/identity/Avatar.vue
+++ /dev/null
@@ -1,155 +0,0 @@
-<template>
-  <div
-    class="ui-avatar"
-    :class="[
-      `ui-avatar--size-${size}`,
-      `ui-avatar--shape-${shape}`,
-      { 'ui-avatar--bordered': bordered },
-    ]"
-  >
-    <img
-      v-if="src"
-      class="ui-avatar__image"
-      :src="src"
-      :alt="resolvedAlt"
-      loading="lazy"
-      decoding="async"
-    />
-    <div
-      v-else
-      class="ui-avatar__fallback"
-      :aria-hidden="fallbackAriaHidden"
-      :role="fallbackAriaHidden ? undefined : 'img'"
-      :aria-label="fallbackAriaHidden ? undefined : resolvedAlt"
-    >
-      <span>{{ fallbackText }}</span>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-
-type AvatarSize = "sm" | "md" | "lg" | "xl";
-type AvatarShape = "circle" | "rounded";
-
-const props = withDefaults(
-  defineProps<{
-    src?: string | null;
-    alt?: string;
-    name?: string | null;
-    fallback?: string | null;
-    size?: AvatarSize;
-    shape?: AvatarShape;
-    bordered?: boolean;
-  }>(),
-  {
-    src: null,
-    alt: "",
-    name: null,
-    fallback: null,
-    size: "md",
-    shape: "circle",
-    bordered: false,
-  },
-);
-
-const fallbackText = computed(() => {
-  const explicitFallback = props.fallback?.trim();
-  if (explicitFallback) {
-    return explicitFallback;
-  }
-  const normalizedName = props.name?.trim();
-  if (normalizedName) {
-    return normalizedName.slice(0, 1).toUpperCase();
-  }
-  return "?";
-});
-
-const resolvedAlt = computed(() => {
-  if (props.alt.trim().length > 0) {
-    return props.alt;
-  }
-  return props.name?.trim() ?? "";
-});
-
-const fallbackAriaHidden = computed(() => resolvedAlt.value.length === 0);
-</script>
-
-<style lang="scss" scoped>
-.ui-avatar {
-  position: relative;
-  flex-shrink: 0;
-}
-
-.ui-avatar--size-sm {
-  width: 2rem;
-  height: 2rem;
-}
-
-.ui-avatar--size-md {
-  width: 3rem;
-  height: 3rem;
-}
-
-.ui-avatar--size-lg {
-  width: 4.75rem;
-  height: 4.75rem;
-}
-
-.ui-avatar--size-xl {
-  width: 5.5rem;
-  height: 5.5rem;
-}
-
-.ui-avatar--shape-circle,
-.ui-avatar--shape-circle .ui-avatar__image,
-.ui-avatar--shape-circle .ui-avatar__fallback {
-  border-radius: 999px;
-}
-
-.ui-avatar--shape-rounded,
-.ui-avatar--shape-rounded .ui-avatar__image,
-.ui-avatar--shape-rounded .ui-avatar__fallback {
-  border-radius: var(--sys-radius-medium);
-}
-
-.ui-avatar--bordered .ui-avatar__image,
-.ui-avatar--bordered .ui-avatar__fallback {
-  border: 1px solid var(--sys-color-outline-variant);
-}
-
-.ui-avatar__image,
-.ui-avatar__fallback {
-  display: flex;
-  width: 100%;
-  height: 100%;
-}
-
-.ui-avatar__image {
-  object-fit: cover;
-}
-
-.ui-avatar__fallback {
-  align-items: center;
-  justify-content: center;
-  background: var(--sys-color-primary-container);
-  color: var(--sys-color-on-primary-container);
-}
-
-.ui-avatar--size-sm .ui-avatar__fallback span {
-  @include mx.pu-font(control);
-}
-
-.ui-avatar--size-md .ui-avatar__fallback span {
-  @include mx.pu-font(section);
-}
-
-.ui-avatar--size-lg .ui-avatar__fallback span {
-  @include mx.pu-font(title);
-}
-
-.ui-avatar--size-xl .ui-avatar__fallback span {
-  @include mx.pu-font(title);
-}
-</style>
diff --git a/apps/frontend/src/shared/ui/layout/DesktopPageScaffold.vue b/apps/frontend/src/shared/ui/layout/DesktopPageScaffold.vue
deleted file mode 100644
index a422f3530..000000000
--- a/apps/frontend/src/shared/ui/layout/DesktopPageScaffold.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <PuPageScaffold
-    layout="aside"
-    width="wide"
-    sticky-aside
-  >
-    <template
-      v-if="$slots.header"
-      #header
-    >
-      <slot name="header" />
-    </template>
-
-    <template
-      v-if="$slots.aside"
-      #aside
-    >
-      <slot name="aside" />
-    </template>
-
-    <slot />
-  </PuPageScaffold>
-</template>
-
-<script setup lang="ts">
-import { PuPageScaffold } from "@partner-up-dev/design-web";
-</script>
diff --git a/apps/frontend/src/shared/ui/layout/FooterRevealPageScaffold.vue b/apps/frontend/src/shared/ui/layout/FooterRevealPageScaffold.vue
deleted file mode 100644
index a79a23b4c..000000000
--- a/apps/frontend/src/shared/ui/layout/FooterRevealPageScaffold.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <PuPageScaffold
-    footer-placement="reveal"
-    :content-placement="props.contentPlacement"
-  >
-    <template
-      v-if="$slots.header"
-      #header
-    >
-      <slot name="header" />
-    </template>
-
-    <slot />
-
-    <template
-      v-if="$slots.footer"
-      #footer
-    >
-      <slot name="footer" />
-    </template>
-  </PuPageScaffold>
-</template>
-
-<script setup lang="ts">
-import { PuPageScaffold } from "@partner-up-dev/design-web";
-
-const props = withDefaults(
-  defineProps<{
-    contentPlacement?: "start" | "center";
-  }>(),
-  {
-    contentPlacement: "start",
-  },
-);
-</script>
diff --git a/apps/frontend/src/shared/ui/layout/FullScreenPageScaffold.vue b/apps/frontend/src/shared/ui/layout/FullScreenPageScaffold.vue
deleted file mode 100644
index 7b6fe4af9..000000000
--- a/apps/frontend/src/shared/ui/layout/FullScreenPageScaffold.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-  <PuPageScaffold viewport="screen">
-    <template
-      v-if="$slots.header"
-      #header
-    >
-      <slot name="header" />
-    </template>
-
-    <slot />
-
-    <template
-      v-if="$slots.footer"
-      #footer
-    >
-      <slot name="footer" />
-    </template>
-  </PuPageScaffold>
-</template>
-
-<script setup lang="ts">
-import { PuPageScaffold } from "@partner-up-dev/design-web";
-</script>
diff --git a/apps/frontend/src/shared/ui/layout/PageScaffold.vue b/apps/frontend/src/shared/ui/layout/PageScaffold.vue
deleted file mode 100644
index 8dc839604..000000000
--- a/apps/frontend/src/shared/ui/layout/PageScaffold.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-  <PuPageScaffold>
-    <slot />
-  </PuPageScaffold>
-</template>
-
-<script setup lang="ts">
-import { PuPageScaffold } from "@partner-up-dev/design-web";
-</script>
diff --git a/apps/frontend/src/shared/ui/layout/PageScaffoldCentered.vue b/apps/frontend/src/shared/ui/layout/PageScaffoldCentered.vue
deleted file mode 100644
index 641391f3b..000000000
--- a/apps/frontend/src/shared/ui/layout/PageScaffoldCentered.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
-  <PuPageScaffold content-placement="center">
-    <template
-      v-if="$slots.header"
-      #header
-    >
-      <slot name="header" />
-    </template>
-
-    <slot />
-
-    <template
-      v-if="$slots.actions || $slots.footer"
-      #footer
-    >
-      <slot name="actions" />
-      <slot name="footer" />
-    </template>
-  </PuPageScaffold>
-</template>
-
-<script setup lang="ts">
-import { PuPageScaffold } from "@partner-up-dev/design-web";
-</script>
diff --git a/apps/frontend/src/shared/ui/layout/PageScaffoldFlow.vue b/apps/frontend/src/shared/ui/layout/PageScaffoldFlow.vue
deleted file mode 100644
index c76d18291..000000000
--- a/apps/frontend/src/shared/ui/layout/PageScaffoldFlow.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<template>
-  <PuPageScaffold>
-    <template
-      v-if="$slots.header"
-      #header
-    >
-      <slot name="header" />
-    </template>
-
-    <slot />
-
-    <template
-      v-if="$slots.actions || $slots.footer"
-      #footer
-    >
-      <slot name="actions" />
-      <slot name="footer" />
-    </template>
-  </PuPageScaffold>
-</template>
-
-<script setup lang="ts">
-import { PuPageScaffold } from "@partner-up-dev/design-web";
-</script>
diff --git a/apps/frontend/src/shared/upload/ImageUrlInput.vue b/apps/frontend/src/shared/upload/ImageUrlInput.vue
index a0ec31880..ca78e0c74 100644
--- a/apps/frontend/src/shared/upload/ImageUrlInput.vue
+++ b/apps/frontend/src/shared/upload/ImageUrlInput.vue
@@ -13,9 +13,9 @@
       class="image-url-input__row"
       :class="{ 'image-url-input__row--upload-only': !allowUrlInput }"
     >
-      <TextInput
+      <PuInput
         v-if="allowUrlInput"
-        :input-id="inputId"
+        :id="inputId"
         type="url"
         inputmode="url"
         :model-value="modelValue"
@@ -53,8 +53,8 @@
 import { computed, ref, watch } from "vue";
 import type { ImageUploadPurpose } from "@partner-up-dev/backend";
 import Button from "@/shared/ui/actions/Button.vue";
-import TextInput from "@/shared/ui/forms/TextInput.vue";
 import { useCloudStorage } from "@/shared/upload/useCloudStorage";
+import { PuInput } from "@partner-up-dev/design-web";
 
 const props = withDefaults(
   defineProps<{
diff --git a/tasks/design-web-package-integration/component-migration/00-control-surface.md b/tasks/design-web-package-integration/component-migration/00-control-surface.md
new file mode 100644
index 000000000..155c11ee1
--- /dev/null
+++ b/tasks/design-web-package-integration/component-migration/00-control-surface.md
@@ -0,0 +1,195 @@
+# Design Web Component Migration
+
+## Objective & Hypothesis
+
+Objective: finish the frontend migration from local reusable UI primitives to
+`@partner-up-dev/design-web@0.4.0`, one component-owned migration file at a
+time, without changing PRD-level product workflows.
+
+Hypothesis: the right route is to preserve product intent while moving usage
+sites directly to package APIs when a local primitive is only a design facade.
+Package-native visuals and micro-interactions are acceptable. Local facades
+should remain only when they own an app-specific semantic contract that the
+design package should not absorb.
+
+## Current Mode
+
+- Input route: `Constraint`.
+- Active mode: `Execute`.
+- Implementation status: second slice implemented and verified locally. Usage
+  sites now consume the relevant package components directly and the migrated
+  local facades have been deleted.
+
+## Guardrails Touched
+
+- Root task protocol: keep a task-local packet for non-trivial work and update
+  it when exploration, friction, or verification changes state.
+- Frontend boundary: `apps/frontend/src/shared/ui/**`,
+  `apps/frontend/src/app/**`, `apps/frontend/tsconfig.json`, and package
+  consuming configuration.
+- Design package boundary: consume only public exports from
+  `@partner-up-dev/design-web`; do not edit package internals or rely on story
+  helper classes.
+- Product invariant: no PRD workflow or routing change. Component-level visual
+  parity, DOM parity, density parity, and micro-interaction parity are not
+  required. Accessibility must remain valid, but labels and semantic anchors may
+  move to package-native structure when tests and usage sites are updated
+  intentionally.
+- Type invariant: no `any`; restore real package types instead of expanding the
+  local broad component shim.
+
+## Current Evidence
+
+- `apps/frontend/package.json` now depends on
+  `@partner-up-dev/design-web` `0.4.0`; the lockfile also points to `0.4.0`.
+- `apps/frontend/src/main.ts` already imports
+  `@partner-up-dev/design-web/styles`.
+- `apps/frontend/uno.config.ts` already uses
+  `@partner-up-dev/design-web/uno`.
+- `apps/frontend/src/app/create-app.ts` does not install the package plugin;
+  current consumption is named imports plus the global style and Uno preset.
+- `apps/frontend/tsconfig.json` no longer maps `@partner-up-dev/design-web` to
+  a local type adapter. Root named imports now resolve through the package
+  `exports` and `types` declarations.
+- `apps/frontend/src/types/design-web-runtime.d.ts` has been removed.
+- The package root exports the full component registry, but its exported
+  `version` literal still says `"0.1.0"` even though package metadata is
+  `0.3.0`. A fresh `npm pack --prefer-online` download from GitHub Packages
+  confirmed the same mismatch, so this is a published package artifact issue,
+  not local workspace install corruption. Do not use that runtime constant as
+  release truth.
+- Directly using the package root declarations is currently blocked:
+  `dist/index.d.ts` exports `../types/components`, whose global component
+  augmentation imports `../src/components/*`. The published package does not
+  include the source-level `src/types` and `src/composables` modules those Vue
+  source files import. A fresh registry tarball confirmed the same missing
+  directories, so `vue-tsc` fails inside `node_modules`.
+- Registry follow-up: `@partner-up-dev/design-web@0.4.0` fixes this publishing
+  issue. Fresh tarball inspection shows `dist/version.d.ts` declares `"0.4.0"`,
+  the root declarations no longer export `../types/components`,
+  `types/components.d.ts` references package root named exports instead of
+  `../src/components/*`, and both a temporary Vue/TypeScript consumer
+  `vue-tsc --noEmit` and the frontend build passed against real package
+  declarations.
+- First slice completed: type entry, `InlineNotice`, `EmptyState`,
+  `LoadingIndicator`, `PageScaffold`, and a single-file `PageFooter` padding
+  correction.
+- Second slice completed: first-slice wrappers were cleaned up, and usage sites
+  now directly consume `PuChip`, `PuChipGroup`, `PuTag`, `PuCell`,
+  `PuDescriptionList`, `PuDescriptionItem`, `PuImg`, `PuFormItem`, `PuInput`,
+  `PuTextarea`, `PuToggleSwitch`, `PuSegmented`, and `PuSegmentedItem`.
+- Second-slice direction clarified: do not keep `Chip`, `Tag`, `Cell`,
+  `InfoRow`, `FormField`, `TextInput`, `TextareaInput`, `ToggleSwitch`, or
+  `SegmentedControl` as local wrappers just to preserve old import sites.
+  Migrate usage sites to package components and remove local primitives once
+  their call sites are cleared. Installed `0.4.0` `PuImg` supports identity
+  fallback props (`name`, `fallbackInitial`, `shape`, `bordered`), so the local
+  `Avatar` exception was not needed and `Avatar.vue` was deleted.
+- Second-slice scope expanded again: first-slice local wrappers must be cleaned
+  up in the same direct-migration style. This includes `InlineNotice`,
+  `EmptyState`, `LoadingIndicator`, and `PageScaffold*` usage sites. The first
+  slice proved package compatibility; the second slice should remove those
+  local facades where they do not own product semantics.
+- Second-slice adoption rule clarified: do not wrap `Pu*` components merely to
+  keep old visual or behavioral parity. Direct package composition is the
+  default even when spacing, shape, density, DOM structure, emitted event shape,
+  or keyboard/micro-interaction details differ from the old local component.
+  Stop and discuss before creating any exception wrapper.
+- Second slice evidence: local wrappers deleted in this slice are `Chip`,
+  `ChipGroup`, `FitChipGroup`, `Cell`, `InfoRow`, `InfoRowAction`, `Avatar`,
+  `FormField`, `TextInput`, `TextareaInput`, `ToggleSwitch`,
+  `SegmentedControl`, `WheelPicker`, `InlineNotice`, `EmptyState`,
+  `LoadingIndicator`, and `PageScaffold*`. There is no current shared `Tag` or
+  `Form` primitive. `PuTag` was introduced at read-only status-label usage
+  sites. `PuForm` remains gated because the package public API exposes
+  `schema`/`validate()` but no documented submit event.
+- `PuImg` scope was broader than avatar: `EventCard.vue`,
+  `AnchorEventDemandCard.vue`, `PRPreviewCardFrame.vue`, `MePage.vue`, and
+  `UserProfilePage.vue` now consume `PuImg` directly. Domain overlays and
+  gesture roots remain app-owned.
+- `PuWheelPicker` was added to the second slice after the user asked to include
+  it before committing. `FormModeTimeControl.vue` now imports the package
+  component directly and the local wheel picker implementation was deleted.
+- Next slice direction: migrate overlay primitives directly to package
+  components: `Modal` -> `PuModal`, `ConfirmDialog` -> `PuDialog` or
+  `PuModal` + `PuButton` depending on package API fit, and `BottomDrawer` ->
+  `PuDrawer`.
+
+## First Slice Candidate
+
+Execution order completed:
+
+1. Remove the package-root type shim so named imports use real package types.
+2. Migrate the already-close feedback/layout facades:
+   `InlineNotice`, `EmptyState`, `LoadingIndicator`, and `PageScaffold`.
+3. Apply the `PageFooter` padding correction as a bounded chrome fix tied to
+   the `PuPageScaffold` footer slot surface.
+
+Adjustment from evidence: step 1 was initially blocked by `0.3.0` package
+publishing defects. After `0.4.0`, the consumer-side adapter was removed and
+the app now uses real package declarations.
+
+Slice invariant: preserve PRD-level workflow intent and accessibility validity
+while replacing local design facades at usage sites. A second-slice package
+component is not considered complete while old local imports/call sites remain,
+unless the task packet records a concrete semantic blocker. Visual and
+component-level behavioral differences are acceptable and should not be hidden
+behind compatibility wrappers.
+
+## Verification
+
+Baseline per component slice:
+
+- `pnpm --filter @partner-up-dev/frontend build` - passed.
+- `pnpm --filter @partner-up-dev/frontend lint:tokens` - passed.
+- `pnpm test:unit:frontend` - passed, 26 files / 117 tests.
+- `git diff --check` - passed.
+- Second-slice final verification on 2026-06-13: frontend build passed; token
+  lint passed; frontend unit tests passed, 26 files / 117 tests; migrated
+  wrapper import scan returned no usage-site references; `git diff --check`
+  passed.
+- Second-slice post-`WheelPicker` verification on 2026-06-13: frontend build
+  passed; token lint passed; frontend unit tests passed, 26 files / 117 tests;
+  migrated wrapper import scan returned no usage-site references; `git
+  diff --check` passed.
+- Browser smoke with Edge through Playwright on `http://localhost:4001/` and
+  `/pr/1` - passed. Evidence:
+  `evidence/home-footer-mobile.png` and `evidence/pr-footer-mobile.png`.
+- After the `0.4.0` upgrade, browser smoke with Edge through Playwright on
+  `http://127.0.0.1:4002/` and `/pr/1` - passed. Evidence:
+  `evidence/home-040-mobile.png` and `evidence/pr-040-mobile.png`.
+
+Escalate verification when the touched component owns workflow risk:
+
+- PR action or overlay slices: targeted PR UI tests such as
+  `PRParticipationActions.test.ts`, `PRUtilityComponents.test.ts`, and
+  `PRPage.creator-actions.test.ts`.
+- Cross-page or route workflow slices: relevant scenario/system tests and a
+  browser smoke pass on desktop and mobile viewport widths.
+- Visual primitive slices: screenshot or browser smoke on representative PR,
+  Anchor Event, Me, Admin, and Commerce surfaces to catch broken layout,
+  unreadable content, and unusable interactions, not to enforce 1:1 visual
+  parity.
+
+## Open Decisions
+
+- Direct package imports at usage sites are the default for migrated
+  primitives. Keep a local component only when it owns an app contract the
+  package should not know about.
+- Do not create compatibility wrappers, local CSS shells, or adapter components
+  solely to keep old local-component visuals or behavior. Extremely rare
+  exceptions must pause execution and be discussed before implementation.
+- Decide whether to install the package plugin for global components. Proposed
+  rule: stay with named imports; plugin registration adds broad global surface
+  without solving migration risk.
+- Delete local design facades aggressively after their usage sites are migrated.
+  Do not leave compatibility wrappers for `Chip`, `Tag`, `Cell`, `InfoRow`,
+  form controls, toggles, or segmented controls.
+- First-slice wrappers are not grandfathered. After this second slice, there
+  should be no usage-site imports of `InlineNotice`, `EmptyState`,
+  `LoadingIndicator`, or local `PageScaffold*` wrappers unless a concrete
+  product-owned semantic blocker is recorded.
+- Upstream package follow-up: `0.4.0` resolved the root declaration and version
+  literal blocker for current frontend consumption.
+- Second-slice follow-up: `PuForm` is still gated; use it only when a specific
+  form container can adopt package schema/validation semantics directly.
diff --git a/tasks/design-web-package-integration/component-migration/10-slice-index.md b/tasks/design-web-package-integration/component-migration/10-slice-index.md
new file mode 100644
index 000000000..4e71ef469
--- /dev/null
+++ b/tasks/design-web-package-integration/component-migration/10-slice-index.md
@@ -0,0 +1,94 @@
+# Component Slice Index
+
+Each component migration owns one file under `components/`. Files are working
+plans, not permission to edit production code.
+
+## Prerequisite
+
+| File | Scope | Status |
+| --- | --- | --- |
+| `components/00-type-entry.md` | Remove the local package-root type shim and use package types. | Done |
+
+## Selected First Slice Candidate
+
+This is the proposed first execution slice after the user explicitly starts
+code changes.
+
+| Order | File | Scope | Status |
+| --- | --- | --- | --- |
+| 1 | `components/00-type-entry.md` | Real package declarations through `@partner-up-dev/design-web@0.4.0`. | Done |
+| 2 | `components/inline-notice.md` | Prove `PuInlineNotice` compatibility through the local facade. | Done; direct usage-site cleanup moved to second slice |
+| 3 | `components/empty-state.md` | Replace local `PuCard` composition with `PuEmptyState`. | Done; direct usage-site cleanup moved to second slice |
+| 4 | `components/loading-indicator.md` | Replace local spinner with `PuLoadingState`. | Done; direct usage-site cleanup moved to second slice |
+| 5 | `components/page-scaffold.md` | Confirm `PuPageScaffold` wrappers through real package declarations. | Done; direct usage-site cleanup moved to second slice |
+| 6 | `components/page-footer.md` | Fix footer padding as a bounded page chrome correction. | Done |
+
+## First Pass: Already Close To Package Ownership
+
+| File | Local Component | Package Target | Status |
+| --- | --- | --- | --- |
+| `components/inline-notice.md` | `shared/ui/feedback/InlineNotice.vue` | `PuInlineNotice` | Done; usage sites migrated directly and wrapper deleted |
+| `components/page-scaffold.md` | `shared/ui/layout/PageScaffold*.vue` | `PuPageScaffold` | Done; usage sites migrated directly and wrappers deleted |
+| `components/empty-state.md` | `shared/ui/feedback/EmptyState.vue` | `PuEmptyState` | Done; usage sites migrated directly and wrapper deleted |
+| `components/loading-indicator.md` | `shared/ui/feedback/LoadingIndicator.vue` | `PuLoadingState` | Done; usage sites migrated directly and wrapper deleted |
+| `components/page-footer.md` | `shared/ui/sections/PageFooter.vue` | App chrome over `PuPageScaffold` footer slot | Done |
+
+## Second Pass: Low-State Display And Forms
+
+| File | Local Component | Package Target | Status |
+| --- | --- | --- | --- |
+| `components/chip.md` | `shared/ui/display/Chip.vue` usage sites | `PuChip` | Done; local chip deleted |
+| `components/tag.md` | Non-interactive status/category labels | `PuTag` | Done; status labels migrated directly |
+| `components/chip-group.md` | `shared/ui/display/ChipGroup.vue`, `FitChipGroup.vue` usage sites | `PuChipGroup` | Done; local group helpers deleted |
+| `components/cell.md` | `shared/ui/display/Cell.vue` usage sites | `PuCell` | Done; local cell deleted |
+| `components/info-row.md` | `shared/ui/display/InfoRow*.vue` usage sites | `PuDescriptionList`, `PuDescriptionItem`, or `PuCell` | Done; local info-row primitives deleted |
+| `components/img.md` | Domain/native image surfaces and app image primitives | `PuImg` | Done for selected surfaces; expanded scope applied |
+| `components/avatar.md` | `shared/ui/identity/Avatar.vue` | `PuImg` | Done; direct usage-site migration and wrapper deleted |
+| `components/form.md` | Existing native form containers with validation semantics | `PuForm` | Gated |
+| `components/form-field.md` | `shared/ui/forms/FormField.vue` usage sites | `PuFormItem` | Done; local field wrapper deleted |
+| `components/text-input.md` | `shared/ui/forms/TextInput.vue` usage sites | `PuInput` | Done; local input wrapper deleted |
+| `components/textarea-input.md` | `shared/ui/forms/TextareaInput.vue` usage sites | `PuTextarea` | Done; local textarea wrapper deleted |
+| `components/toggle-switch.md` | `shared/ui/forms/ToggleSwitch.vue` usage sites | `PuToggleSwitch` | Done; local switch wrapper deleted |
+| `components/segmented-control.md` | `shared/ui/controls/SegmentedControl.vue` usage sites | `PuSegmented`, `PuSegmentedItem` | Done; local segmented control deleted |
+| `components/wheel-picker.md` | `shared/ui/forms/WheelPicker.vue` usage sites | `PuWheelPicker` | Done; local wheel picker deleted |
+
+## Selected Second Slice Candidate
+
+Completed after explicit user start.
+
+| Order | File | Scope | Status |
+| --- | --- | --- | --- |
+| 1 | `components/inline-notice.md` + `components/empty-state.md` + `components/loading-indicator.md` + `components/page-scaffold.md` | Clean first-slice local wrappers by migrating usage sites directly to package components and deleting local facades if call sites clear. | Done |
+| 2 | `components/img.md` + `components/avatar.md` | Expand `PuImg` beyond avatar into Anchor Event card and PR preview card image surfaces; delete Avatar because package supports identity fallback props. | Done |
+| 3 | `components/chip.md` + `components/tag.md` + `components/chip-group.md` | Replace local chip/group call sites with `PuChip`, `PuTag`, and `PuChipGroup`; delete `Chip`, `ChipGroup`, and `FitChipGroup` if call sites clear. | Done |
+| 4 | `components/cell.md` | Replace local `Cell` call sites with `PuCell`; delete the local primitive if call sites clear. | Done |
+| 5 | `components/info-row.md` | Replace `InfoRow` and `InfoRowAction` call sites with `PuDescriptionList`/`PuDescriptionItem` for read-only facts or `PuCell` for actions; delete local primitives if call sites clear. | Done |
+| 6 | `components/form-field.md` + `components/text-input.md` + `components/textarea-input.md` | Replace field usage sites with `PuFormItem`, `PuInput`, and `PuTextarea`; keep product field meaning and accessible labeling, but accept package-native sizing, count, DOM, and interaction changes. | Done |
+| 7 | `components/toggle-switch.md` | Replace local switch usage sites with `PuToggleSwitch`; delete local primitive if call sites clear. | Done |
+| 8 | `components/segmented-control.md` | Replace local segmented usage sites with `PuSegmented` + `PuSegmentedItem`; keep the mode-selection product intent, accept package-native keyboard/event behavior, and delete local primitive if call sites clear. | Done |
+| 9 | `components/wheel-picker.md` | Replace the local wheel picker with `PuWheelPicker`; accept package-owned gesture, snapping, keyboard, and tone behavior; delete local primitive if call sites clear. | Done |
+| 10 | `components/form.md` | Only attach `PuForm` to specific form containers when it can directly own product-level submit/validation semantics without an adapter wrapper. | Gated |
+
+## Third Pass: Overlay
+
+| File | Local Component | Package Target | Status |
+| --- | --- | --- | --- |
+| `components/modal.md` | `shared/ui/overlay/Modal.vue` | `PuModal` | Proposed |
+| `components/confirm-dialog.md` | `shared/ui/overlay/ConfirmDialog.vue` | `PuDialog` or `PuModal` + `PuButton` | Proposed |
+| `components/bottom-drawer.md` | `shared/ui/overlay/BottomDrawer.vue` | `PuDrawer` | Proposed |
+
+## Fourth Pass: Broad Action Surface
+
+| File | Local Component | Package Target | Status |
+| --- | --- | --- | --- |
+| `components/button.md` | `shared/ui/actions/Button.vue` | `PuButton` | Proposed |
+| `components/action-link.md` | `shared/ui/actions/ActionLink.vue` | `PuButton` action prop | Proposed |
+| `components/feedback-button.md` | `shared/ui/actions/FeedbackButton.vue` | `PuButton` feedback prop | Proposed |
+| `components/choice-card.md` | `shared/ui/containers/ChoiceCard.vue` | `PuCard` action/selectable | Proposed |
+
+## Deferred Domain Or Product Chrome
+
+These should not be first-pass package migrations unless a component slice needs
+them directly: `PageHeader`, `TabBar`,
+`ProductLocalDateCalendarPicker`, `TimelinePolicyPicker`, `MultiStopToggle`, and
+domain-owned PR/Event/Route/Commerce UI.
diff --git a/tasks/design-web-package-integration/component-migration/90-discussion-log.md b/tasks/design-web-package-integration/component-migration/90-discussion-log.md
new file mode 100644
index 000000000..251977774
--- /dev/null
+++ b/tasks/design-web-package-integration/component-migration/90-discussion-log.md
@@ -0,0 +1,172 @@
+# Discussion Log
+
+## 2026-06-12
+
+- User requested full `@partner-up-dev/design-web` package integration by
+  component and asked to discuss the approach before code changes.
+- Constraint classification: product behavior should remain unchanged while
+  frontend component ownership moves to the package.
+- Exploration confirmed current package version is `0.3.0`, style and Uno
+  entries are already wired, and named imports are the current consumption
+  model.
+- Main blocker: frontend `tsconfig.json` still shadows the package root with a
+  local runtime shim that exposes only four components.
+- Working strategy proposed: each component migration owns one task-packet file;
+  production code changes require explicit user start.
+- User proposed the first slice as: type entry, `InlineNotice`, `EmptyState`,
+  `LoadingIndicator`, `PageScaffold`, and `PageFooter` padding correction.
+- Local inspection confirmed `PageFooter` is an app-owned product chrome
+  component, not a package component. It is accepted into the first-slice
+  candidate only as a bounded one-file padding fix tied to the scaffold footer
+  surface.
+- `LoadingIndicator` should target `PuLoadingState` in this slice because the
+  current local component is a visible region/page loading state with optional
+  message text, not a spinner-only inline primitive.
+- First slice started after explicit user approval.
+- Attempting direct package root declarations failed because package
+  `dist/index.d.ts` loads `../types/components`, which imports unpublished
+  source dependencies via `../src/components/*`. The local type entry was
+  changed from a broad component shim into a bounded typed adapter for the
+  package components currently consumed by the frontend.
+- `EmptyState` now delegates structure and styling to `PuEmptyState`, preserving
+  the local props and `actions` slot.
+- `LoadingIndicator` now delegates spinner/status semantics to
+  `PuLoadingState`, preserving the `message` prop and adding a default
+  accessible label.
+- `InlineNotice` and `PageScaffold` were already package-backed facades; no
+  call-site migration was needed in this slice.
+- Verification passed: frontend build, token lint, frontend unit tests, and
+  `git diff --check`. Browser smoke confirmed non-zero brand and minimal footer
+  padding on mobile viewport.
+- Follow-up registry verification used
+  `npm pack --prefer-online @partner-up-dev/design-web@0.3.0` against
+  `https://npm.pkg.github.com`. The fresh tarball has package metadata
+  `0.3.0`, `dist/index.d.ts` still declares `version = "0.1.0"`, includes
+  `src/components`, and does not include `src/types` or `src/composables`.
+  The tarball integrity matches the workspace `pnpm-lock.yaml`, confirming the
+  current install reflects the published artifact rather than local corruption.
+
+## 2026-06-13
+
+- User reported `@partner-up-dev/design-web@0.4.0` was just published and may
+  fix the package type issue.
+- Fresh `npm pack --prefer-online @partner-up-dev/design-web@0.4.0` against
+  GitHub Packages confirmed the tarball metadata is `0.4.0`, `dist/version.d.ts`
+  declares `version = "0.4.0"`, root declarations export `version` from
+  `./version`, and root declarations no longer export `../types/components`.
+- The `0.4.0` tarball no longer publishes `src/components`; `types/components.d.ts`
+  now augments Vue globals through `typeof import('@partner-up-dev/design-web')`
+  named exports.
+- A temporary minimal consumer installed the `0.4.0` tarball plus Vue,
+  TypeScript, vue-tsc, and Sass, then passed `vue-tsc --noEmit` while importing
+  root components, `version`, and `@partner-up-dev/design-web/types`.
+- No workspace dependency or production code was changed; app-side upgrade still
+  requires an explicit execution start.
+- User approved upgrading to `@partner-up-dev/design-web@0.4.0` and correcting
+  the earlier consumer-side component type workaround.
+- Updated `apps/frontend/package.json` to `0.4.0`, refreshed
+  `pnpm-lock.yaml`, removed the `@partner-up-dev/design-web` root path alias
+  from `apps/frontend/tsconfig.json`, and deleted
+  `apps/frontend/src/types/design-web-runtime.d.ts`.
+- Verified the app now consumes real package declarations: installed
+  `node_modules` reports package version `0.4.0`, `dist/version.d.ts` declares
+  `"0.4.0"`, and no source reference to `design-web-runtime` remains.
+- Verification passed after the upgrade: frontend build, token lint, frontend
+  unit tests, and `git diff --check`.
+- Runtime smoke after the upgrade passed on a mobile viewport for `/` and
+  `/pr/1`; the PR route rendered the expected no-backend loading state and
+  footer. The temporary Vite server was stopped afterward.
+- User proposed the second slice: `PuChip`, `PuTag`, `PuCell`,
+  `PuDescriptionItem`, `PuImg`, `PuForm`, `PuInput`, `PuTextarea`,
+  `PuToggleSwitch`, and `PuSegmented`.
+- Exploration mapped those package components to local wrappers:
+  `Chip`, `Cell`, `InfoRow`/`InfoRowAction`, `Avatar`, `FormField`,
+  `TextInput`, `TextareaInput`, `ToggleSwitch`, and `SegmentedControl`.
+- No shared local `Tag.vue` or `Form.vue` exists today. `PuTag` should be
+  introduced only for non-interactive status/category labels, while `PuChip`
+  continues to own selectable/removable/token semantics. `PuForm` is gated:
+  package declarations expose `schema` and `validate()` but no documented
+  submit event, so native form containers should not be mechanically replaced.
+- Risk notes: local `Chip` currently treats `outline`, `surface`, and `warning`
+  as tones, while package components split tone from variant; `TextareaInput`
+  exposes `rows` and `minHeight`, which `PuTextarea` does not expose; and
+  `InfoRow` may require a `PuDescriptionList` parent for correct
+  `PuDescriptionItem` semantics.
+- User clarified the second-slice migration must not preserve local design
+  wrappers such as `Chip`, `Tag`, `InfoRow`, form controls, or segmented
+  controls. Usage sites should import and compose `Pu*` package components
+  directly, then delete local primitives once call sites clear. `Avatar` is an
+  allowed exception because it owns app identity fallback semantics.
+- User also requested broader `PuImg` application beyond `Avatar`, including
+  Anchor Event cards and PR preview card image surfaces. The packet now treats
+  `PuImg` as an expanded usage-site migration file and records initial targets:
+  `PRPreviewCardFrame.vue`, `AnchorEventDemandCard.vue`, `EventCard.vue`, and
+  the `Avatar` image branch only if identity fallback behavior remains intact.
+- Corrected the Avatar assumption: current `PuImg` public references expose
+  general image props and loading/error slots, not avatar-specific
+  `fallbackInitial`, `name`, `shape`, or `bordered` props. The local Avatar
+  fallback branch should remain app-owned unless the package API changes.
+- Later installed-package inspection superseded this note: `0.4.0`
+  declarations do expose avatar-capable `PuImg` props, so the local Avatar
+  fallback branch was removed in the executed slice.
+- User clarified that first-slice local wrappers are not exempt. If the first
+  slice left a local wrapper around a package component, the second slice should
+  also migrate those usage sites directly to package components and remove the
+  local facade when call sites clear.
+- First-slice wrapper cleanup targets are now `InlineNotice`, `EmptyState`,
+  `LoadingIndicator`, and `PageScaffold*`. `PageFooter` is not a package
+  wrapper; it remains an app chrome component with the padding fix from the
+  first slice.
+- User emphasized that migration does not require 1:1 visual or behavioral
+  parity. Do not wrap `Pu*` components to preserve old local-component visuals,
+  DOM, spacing, density, emitted event shape, keyboard micro-interactions, or
+  compatibility props. Adopt package-native composition directly at usage
+  sites.
+- Exception rule: if an extremely rare wrapper seems necessary, stop and
+  discuss before implementing. Acceptable exception candidates must be based on
+  product/app semantics, not visual or behavior parity. `Avatar` remains only a
+  candidate because identity fallback derivation is app-owned semantics.
+- Second slice started after explicit user approval.
+- Installed `@partner-up-dev/design-web@0.4.0` package declarations show
+  `PuImg` now exposes `name`, `fallbackInitial`, `shape`, and `bordered`; the
+  earlier Avatar exception was no longer needed. `MePage.vue` and
+  `UserProfilePage.vue` now use `PuImg` directly, and local `Avatar.vue` was
+  deleted.
+- First-slice local wrappers were cleaned up directly at usage sites:
+  `InlineNotice`, `EmptyState`, `LoadingIndicator`, and `PageScaffold*` imports
+  were replaced by package components, and the local wrapper files were
+  deleted.
+- Second-slice primitives were migrated directly at usage sites:
+  `Chip`/`ChipGroup`/`FitChipGroup` to `PuChip`/`PuChipGroup`, read-only status
+  labels to `PuTag`, `Cell` to `PuCell`, `InfoRow`/`InfoRowAction` to
+  `PuDescriptionList`/`PuDescriptionItem`, form fields to `PuFormItem`,
+  `PuInput`, `PuTextarea`, and `PuToggleSwitch`, and segmented controls to
+  `PuSegmented`/`PuSegmentedItem`.
+- Expanded `PuImg` scope was applied to `EventCard.vue`,
+  `AnchorEventDemandCard.vue`, and `PRPreviewCardFrame.vue`; domain overlays,
+  swipe roots, fallback copy, and routing remain app-owned.
+- Local wrappers deleted in this slice: `Cell.vue`, `Chip.vue`,
+  `ChipGroup.vue`, `FitChipGroup.vue`, `InfoRow.vue`, `InfoRowAction.vue`,
+  `FormField.vue`, `TextInput.vue`, `TextareaInput.vue`, `ToggleSwitch.vue`,
+  `EmptyState.vue`, `InlineNotice.vue`, `LoadingIndicator.vue`,
+  `PageScaffold.vue`, `PageScaffoldFlow.vue`, `PageScaffoldCentered.vue`,
+  `FullScreenPageScaffold.vue`, `FooterRevealPageScaffold.vue`,
+  `DesktopPageScaffold.vue`, `SegmentedControl.vue`, and `Avatar.vue`.
+- `PuForm` remains gated. The slice adopted `PuFormItem` and package controls
+  but did not mechanically replace native `<form>` containers because package
+  submit/validation ownership needs a specific form contract.
+- Final verification passed: `pnpm --filter @partner-up-dev/frontend build`,
+  `pnpm --filter @partner-up-dev/frontend lint:tokens`,
+  `pnpm test:unit:frontend` (26 files / 117 tests), target wrapper import scan,
+  and `git diff --check`.
+- User requested adding `WheelPicker` migration before committing the second
+  slice, then using the third slice for `Modal`, `Dialog`, and `Drawer`.
+- `FormModeTimeControl.vue` now imports `PuWheelPicker` directly from the
+  package for both date and time wheels. The old
+  `shared/ui/forms/WheelPicker.vue` implementation was deleted after its only
+  call site was cleared.
+- The slice index now treats `WheelPicker` as a completed second-slice item and
+  moves overlay primitives into the selected third slice.
+- Post-`WheelPicker` verification passed: frontend build, token lint, frontend
+  unit tests (26 files / 117 tests), migrated wrapper import scan, and
+  `git diff --check`.
diff --git a/tasks/design-web-package-integration/component-migration/components/00-type-entry.md b/tasks/design-web-package-integration/component-migration/components/00-type-entry.md
new file mode 100644
index 000000000..9ae295f60
--- /dev/null
+++ b/tasks/design-web-package-integration/component-migration/components/00-type-entry.md
@@ -0,0 +1,59 @@
+# Type Entry Prerequisite
+
+## Target
+
+- Local owner: `apps/frontend/tsconfig.json`,
+  `apps/frontend/src/types/design-web-runtime.d.ts`, and
+  `apps/frontend/src/types/design-web.d.ts`.
+- Package target: `@partner-up-dev/design-web` root types and exported
+  component registry.
+- Desired final state: named imports use package declarations instead of the
+  local broad shim.
+
+## Current Contract
+
+- `@partner-up-dev/design-web/styles` and `@partner-up-dev/design-web/uno` are
+  already consumed.
+- `tsconfig.json` no longer maps the package root to a local type adapter.
+- The runtime shim previously exposed four components and used broad
+  `DefineComponent<Record<string, unknown>, ...>` typing.
+- The current frontend resolves package root named imports through
+  `@partner-up-dev/design-web@0.4.0` package declarations.
+
+## Migration Shape
+
+- From: package root import is type-shadowed by a broad local compatibility
+  file.
+- To: package root import resolves through the package `exports` /
+  `types` declarations.
+- Compatibility strategy: keep the style and Uno ambient declarations only if
+  the package still lacks consumable declarations for those subpaths.
+
+## Risks
+
+- Package declarations may surface real type errors hidden by the shim.
+- The package exports `version` as `"0.1.0"` in `dist/index.d.ts`; do not use
+  that constant for release truth. A fresh registry tarball for
+  `@partner-up-dev/design-web@0.3.0` has the same mismatch. Registry `0.4.0`
+  fixes this with `dist/version.d.ts` declaring `"0.4.0"`.
+- `skipLibCheck` may hide package-internal declaration issues, but app code
+  should still type-check against public component APIs.
+- Direct package root declarations currently fail `vue-tsc` because
+  `types/components.d.ts` imports `../src/components/*`, while the published
+  package lacks the `src/types` and `src/composables` modules those files need.
+  Registry verification confirmed this is present in the published GitHub
+  Packages `0.3.0` artifact and is not a broken local install. Registry `0.4.0`
+  removes this source dependency path and passed a temporary consumer
+  `vue-tsc --noEmit` check.
+
+## Verification
+
+- `pnpm --filter @partner-up-dev/frontend build` - passed.
+- `pnpm --filter @partner-up-dev/frontend lint:tokens` - passed.
+- `pnpm test:unit:frontend` - passed, 26 files / 117 tests.
+- `git diff --check` - passed.
+- A source scan proving no production import depends on
+  `src/types/design-web-runtime.d.ts`; the file and root alias have been
+  removed.
+- Installed artifact check: local `node_modules` reports package version
+  `0.4.0`, and `dist/version.d.ts` declares `"0.4.0"`.
diff --git a/tasks/design-web-package-integration/component-migration/components/_template.md b/tasks/design-web-package-integration/component-migration/components/_template.md
new file mode 100644
index 000000000..7321a4287
--- /dev/null
+++ b/tasks/design-web-package-integration/component-migration/components/_template.md
@@ -0,0 +1,38 @@
+# Component Migration Template
+
+## Target
+
+- Local owner:
+- Package target:
+- Desired final state:
+
+## Current Contract
+
+- Public props:
+- Slots:
+- Events:
+- Attrs / `data-testid`:
+- Accessibility:
+
+## Migration Shape
+
+- From:
+- To:
+- Direct adoption rule:
+- Parity rule: do not wrap package components to preserve old visuals, DOM,
+  emitted events, local prop vocabulary, spacing, density, or micro-behavior.
+  Stop and discuss before adding any exception wrapper.
+
+## Risks
+
+- Runtime:
+- Product semantics:
+- Usability / accessibility:
+- Tests:
+
+## Verification
+
+- Build:
+- Token lint:
+- Unit tests:
+- Scenario / browser smoke:
diff --git a/tasks/design-web-package-integration/component-migration/components/action-link.md b/tasks/design-web-package-integration/component-migration/components/action-link.md
new file mode 100644
index 000000000..d083b8f49
--- /dev/null
+++ b/tasks/design-web-package-integration/component-migration/components/action-link.md
@@ -0,0 +1,33 @@
+# ActionLink Migration
+
+## Target
+
+- Local owner: `apps/frontend/src/shared/ui/actions/ActionLink.vue`.
+- Package target: `PuButton` with structured `action`.
+- Desired final state: link-styled calls to action use the same package action
+  component vocabulary as buttons.
+
+## Current Contract
+
+- Props: `to`, `href`, `target`, `rel`, `external`, `appearance`, `tone`,
+  `size`, `disabled`, `block`, `fullWidth`.
+- Slots: default, `leading`, `trailing`.
+- Event: `click`.
+
+## Migration Shape
+
+- From: local `RouterLink` or native anchor selection.
+- To: `PuButton` `action` prop with `to` or `href` payload.
+- Compatibility strategy: preserve local API and event behavior while package
+  owns visual/action rendering.
+
+## Risks
+
+- Route actions rely on the consuming app's registered `RouterLink`.
+- Disabled link navigation must remain blocked.
+- External target/rel defaults must remain safe.
+
+## Verification
+
+- Build, token lint, frontend unit tests.
+- Navigation smoke for affected CTAs.
diff --git a/tasks/design-web-package-integration/component-migration/components/avatar.md b/tasks/design-web-package-integration/component-migration/components/avatar.md
new file mode 100644
index 000000000..b4614f7a7
--- /dev/null
+++ b/tasks/design-web-package-integration/component-migration/components/avatar.md
@@ -0,0 +1,39 @@
+# Avatar Migration
+
+## Target
+
+- Local owner: `apps/frontend/src/shared/ui/identity/Avatar.vue`.
+- Package target: `PuImg`.
+- Desired final state: package owns avatar image/fallback rendering directly at
+  usage sites; local `Avatar.vue` is deleted.
+
+## Current Contract
+
+- Props: `src`, `alt`, `name`, `fallback`, `size`, `shape`, `bordered`.
+- Fallback derives from explicit fallback, then first letter of name, then `?`.
+
+## Migration Shape
+
+- From: local image/fallback markup.
+- To: use `PuImg` directly in identity usage sites with `name`,
+  `fallbackInitial`, `shape`, `bordered`, and package size props.
+- Completion rule: no `<Avatar>` usage and no local `Avatar.vue` file remain.
+- Parity rule: do not recreate the old avatar sizing or fallback markup through
+  a wrapper. Use package-native image/fallback behavior.
+
+## Risks
+
+- Earlier package references were stale. Installed `0.4.0` declarations expose
+  `name`, `fallbackInitial`, `shape`, and `bordered`.
+- Size names differ from package image preset sizes.
+- Accessible fallback labeling must remain meaningful.
+
+## Slice Result
+
+- `MePage.vue` and `UserProfilePage.vue` now use `PuImg` directly.
+- `apps/frontend/src/shared/ui/identity/Avatar.vue` was deleted.
+
+## Verification
+
+- Build, token lint, frontend unit tests.
+- Browser smoke where roster/avatar surfaces render.
diff --git a/tasks/design-web-package-integration/component-migration/components/bottom-drawer.md b/tasks/design-web-package-integration/component-migration/components/bottom-drawer.md
new file mode 100644
index 000000000..86af031ab
--- /dev/null
+++ b/tasks/design-web-package-integration/component-migration/components/bottom-drawer.md
@@ -0,0 +1,33 @@
+# BottomDrawer Migration
+
+## Target
+
+- Local owner: `apps/frontend/src/shared/ui/overlay/BottomDrawer.vue`.
+- Package target: `PuDrawer`.
+- Desired final state: package owns drawer shell, overlay, Escape/overlay close,
+  footer/header slots, and body scrolling.
+
+## Current Contract
+
+- Props: `open`, `title`, `ariaLabel`, `showClose`, `closeOnBackdrop`,
+  `closeOnEscape`, `maxWidth`, `minHeight`, `zIndex`.
+- Event: `close` with local reasons `backdrop`, `close-button`, `escape`.
+- Slots: `header`, default body, `footer`.
+
+## Migration Shape
+
+- From: local bottom drawer overlay.
+- To: `PuDrawer` using `visible` / `update:visible` and `close`.
+- Compatibility strategy: preserve the local `open` prop and translate close
+  reasons if call sites depend on them.
+
+## Risks
+
+- Package uses `visible`, not `open`.
+- Close reason vocabulary differs.
+- Safe-area, max-height, and body scroll behavior are mobile-sensitive.
+
+## Verification
+
+- Build, token lint, targeted drawer workflow tests or smoke.
+- Mobile browser smoke for PR share and commerce drawer flows.
diff --git a/tasks/design-web-package-integration/component-migration/components/button.md b/tasks/design-web-package-integration/component-migration/components/button.md
new file mode 100644
index 000000000..88b22c360
--- /dev/null
+++ b/tasks/design-web-package-integration/component-migration/components/button.md
@@ -0,0 +1,56 @@
+# Button Migration
+
+## Target
+
+- Local owner: `apps/frontend/src/shared/ui/actions/Button.vue`.
+- Package target: `PuButton`.
+- Desired final state: package owns command button rendering while local API
+  either disappears or remains only as a compatibility facade during rollout.
+
+## Current Contract
+
+- Props: `type`, `form`, `variant`, `appearance`, `tone`, `size`, `loading`,
+  `disabled`, `block`, `fullWidth`.
+- Slots: default, `leading`, `trailing`.
+- Event: `click`.
+- Current references: highest blast radius shared primitive.
+
+## Migration Shape
+
+- From: local `appearance` plus mixed `tone` treatment vocabulary.
+- To: package `shape`, semantic `tone`, visual `variant`, `size`, `loading`,
+  `feedback`, `block`, and structured `action`.
+- Compatibility strategy: first implement an internal mapping while preserving
+  local props and attrs; only later migrate call sites to package vocabulary.
+
+## Proposed Mapping
+
+- `appearance="pill"` -> `shape="pill"`; `appearance="rect"` ->
+  `shape="rect"`.
+- `tone="primary"` -> `tone="primary" variant="solid"`.
+- `tone="primary-outline"` -> `tone="primary" variant="outline"`.
+- `tone="secondary"` -> map per current visual treatment after checking rect
+  versus pill usages.
+- `tone="outline"` -> `tone="neutral" variant="outline"`.
+- `tone="surface"` -> likely `tone="neutral" variant="soft"`.
+- `tone="tertiary"` -> `tone="tertiary" variant="solid"`.
+- `tone="dashed"` -> `tone="neutral" variant="dashed"`.
+- `tone="danger"` -> `tone="danger" variant="outline"` unless a solid danger
+  call site is explicitly intended.
+- `tone="ghost"` -> `tone="neutral" variant="ghost"`.
+- `loading` -> package `loading`.
+- `type` -> package `action={{ native: type }}` if needed.
+
+## Risks
+
+- `data-testid` and attrs must remain on the real interactive element.
+- Existing CSS reaches into `.ui-button` and `.ui-button__label`; those
+  dependencies must be mapped or removed in the same slice.
+- Button is broad enough that a visual diff or staged PR is warranted.
+
+## Verification
+
+- Build, token lint, full frontend unit tests.
+- Targeted PR action tests.
+- Browser smoke on PR detail, Anchor Event, Me, Admin PR, Commerce checkout,
+  and ordering support surfaces.
diff --git a/tasks/design-web-package-integration/component-migration/components/cell.md b/tasks/design-web-package-integration/component-migration/components/cell.md
new file mode 100644
index 000000000..ff1d45790
--- /dev/null
+++ b/tasks/design-web-package-integration/component-migration/components/cell.md
@@ -0,0 +1,37 @@
+# Cell Migration
+
+## Target
+
+- Local owner: `apps/frontend/src/shared/ui/display/Cell.vue` usage sites.
+- Package target: `PuCell`.
+- Desired final state: package owns compact row structure directly at call
+  sites; the local `Cell.vue` facade is deleted after call sites clear.
+
+## Current Contract
+
+- Props: `as`, `type`, `border`, `title`, `value`, `suffixIcon`.
+- Slots: `title`, default value, `suffix`.
+
+## Migration Shape
+
+- From: local row markup.
+- To: usage sites import `PuCell` and use package props/slots.
+- Completion rule: no `<Cell>` usage and no local `Cell.vue` file remain unless
+  a concrete package API blocker is recorded.
+- Parity rule: do not wrap `PuCell` to preserve old root element defaults,
+  borders, suffix icon class behavior, or spacing.
+
+## Risks
+
+- Root element choice still needs to match product semantics such as navigation
+  or action affordance, but package-native rendering details may change.
+- Suffix icon rendering may move to package-native slots or icons.
+
+## Verification
+
+- Build, token lint, targeted usage smoke.
+
+## Slice Result
+
+- Local `Cell` call sites were migrated directly to `PuCell`.
+- `apps/frontend/src/shared/ui/display/Cell.vue` was deleted.
diff --git a/tasks/design-web-package-integration/component-migration/components/chip-group.md b/tasks/design-web-package-integration/component-migration/components/chip-group.md
new file mode 100644
index 000000000..92c561464
--- /dev/null
+++ b/tasks/design-web-package-integration/component-migration/components/chip-group.md
@@ -0,0 +1,47 @@
+# ChipGroup Migration
+
+## Target
+
+- Local owner: `apps/frontend/src/shared/ui/display/ChipGroup.vue` and
+  `FitChipGroup.vue` usage sites.
+- Package target: `PuChipGroup`.
+- Desired final state: package owns grouped chip spacing and wrapping where
+  package API matches; local group helpers are deleted after call sites clear.
+
+## Current Contract
+
+- `ChipGroup` props: `as`, `gap`, `align`.
+- `FitChipGroup` props: `items`, `maxItems`, `gap`, `tone`, `size`,
+  `ariaLabel`, `chipClass`.
+
+## Migration Shape
+
+- From: simple flex wrapper plus custom measurement component.
+- To: usage sites import `PuChipGroup` and render package chips/tags directly.
+  Replace `FitChipGroup` with explicit sliced item rendering plus overflow
+  count at the usage site when item limits are product-owned.
+- Completion rule: no `<ChipGroup>` / `<FitChipGroup>` usage and no local group
+  helper files remain unless a concrete package API blocker is recorded.
+- Parity rule: do not rebuild `FitChipGroup` as a wrapper around `PuChipGroup`
+  for measurement parity. If dynamic measurement is truly product-owned, pause
+  and discuss the exception.
+
+## Risks
+
+- Installed `0.4.0` `PuChipGroup` exposes `fit`; overflow count remains
+  usage-site owned if needed.
+- Removing measurement behavior may change dense metadata rows; verify usable
+  truncation/overflow rather than exact old wrapping.
+
+## Slice Result
+
+- `EventCard.vue` now renders sliced available-location chips directly inside
+  `PuChipGroup fit`.
+- `PRFactsCard.vue` uses `PuChipGroup` for preference and roster preview token
+  lists.
+- `ChipGroup.vue` and `FitChipGroup.vue` were deleted.
+
+## Verification
+
+- Build, token lint, frontend unit tests.
+- Browser smoke on narrow containers using fit chips.
diff --git a/tasks/design-web-package-integration/component-migration/components/chip.md b/tasks/design-web-package-integration/component-migration/components/chip.md
new file mode 100644
index 000000000..a0360f335
--- /dev/null
+++ b/tasks/design-web-package-integration/component-migration/components/chip.md
@@ -0,0 +1,51 @@
+# Chip Migration
+
+## Target
+
+- Local owner: `apps/frontend/src/shared/ui/display/Chip.vue` usage sites.
+- Package target: `PuChip`.
+- Desired final state: package owns chip shape, tone, variant, size, and optional
+  removable/action behavior directly at call sites; the local `Chip.vue`
+  facade is deleted after call sites clear.
+
+## Current Contract
+
+- Props: `as`, `tone`, `size`.
+- Slots: default.
+- Local tones include `secondary`, `primary`, `surface`, `outline`, `danger`,
+  and `warning`.
+- Related package split: `PuChip` covers token/filter/removable semantics;
+  `PuTag` covers compact non-interactive status/category labels.
+
+## Migration Shape
+
+- From: local `tone` mixes semantic color and visual treatment.
+- To: import `PuChip` at usage sites and map each old `tone` use to the closest
+  package `tone` / treatment at the call site.
+- Completion rule: no `<Chip>` usage and no local `Chip.vue` file remain unless
+  a concrete package API blocker is recorded.
+- Parity rule: do not wrap `PuChip` to recreate old tone vocabulary, exact
+  sizes, borders, or chip spacing. Use package-native chip/tag vocabulary and
+  adjust usage sites semantically.
+
+## Risks
+
+- Local `outline` is treatment, not package tone.
+- Local `warning` is not part of package `PuChipTone`; use a supported tone or
+  move true status labels to `PuTag` if the package vocabulary fits.
+- Size and min-height may shift list/card alignment; this is acceptable unless
+  content becomes unreadable or interaction targets become unusable.
+- `ChipGroup` / `FitChipGroup` call sites may need simultaneous migration to
+  `PuChipGroup` or local layout CSS so old chip imports do not linger.
+
+## Verification
+
+- Build, token lint, frontend unit tests.
+- Visual smoke on PR facts, partner/status labels, and event cards.
+
+## Slice Result
+
+- Token/list labels now use `PuChip` directly at usage sites.
+- Read-only status labels were moved to `PuTag` instead of overloading chip
+  tone.
+- `apps/frontend/src/shared/ui/display/Chip.vue` was deleted.
diff --git a/tasks/design-web-package-integration/component-migration/components/choice-card.md b/tasks/design-web-package-integration/component-migration/components/choice-card.md
new file mode 100644
index 000000000..ec3c773ca
--- /dev/null
+++ b/tasks/design-web-package-integration/component-migration/components/choice-card.md
@@ -0,0 +1,32 @@
+# ChoiceCard Migration
+
+## Target
+
+- Local owner: `apps/frontend/src/shared/ui/containers/ChoiceCard.vue`.
+- Package target: `PuCard` with `action`, `selectable`, and `active`.
+- Desired final state: selectable/navigation card shells use package card
+  action semantics where safe.
+
+## Current Contract
+
+- Props: `to`, `type`, `tone`, `active`, `disabled`.
+- Event: `click`.
+- Slot: default content.
+
+## Migration Shape
+
+- From: local `button` or `RouterLink` root with active/disabled treatment.
+- To: `PuCard` action/selectable behavior.
+- Compatibility strategy: only use interactive card roots when the card content
+  has no nested interactive controls.
+
+## Risks
+
+- Package caveat: interactive cards must not contain nested interactive
+  controls.
+- Route action disabled behavior must remain equivalent.
+
+## Verification
+
+- Build, token lint, frontend unit tests.
+- Admin rail/product list navigation smoke where choice cards are used.
diff --git a/tasks/design-web-package-integration/component-migration/components/confirm-dialog.md b/tasks/design-web-package-integration/component-migration/components/confirm-dialog.md
new file mode 100644
index 000000000..36ee3f2d0
--- /dev/null
+++ b/tasks/design-web-package-integration/component-migration/components/confirm-dialog.md
@@ -0,0 +1,32 @@
+# ConfirmDialog Migration
+
+## Target
+
+- Local owner: `apps/frontend/src/shared/ui/overlay/ConfirmDialog.vue`.
+- Package target: likely `PuDialog`, or `PuModal` plus `PuButton` if `PuDialog`
+  does not cover the exact contract.
+- Desired final state: package owns confirmation dialog shell and action button
+  treatments.
+
+## Current Contract
+
+- Props: `open`, `title`, `message`, `description`, `confirmLabel`,
+  `cancelLabel`, `confirmTone`, `loading`, `disabled`, `maxWidth`.
+- Events: `close`, `confirm`.
+- Slots: default content.
+
+## Migration Shape
+
+- From: local `Modal` plus local `Button`.
+- To: inspect `PuDialog` API before choosing direct package dialog or composed
+  package modal/buttons.
+- Compatibility strategy: migrate after `Button` and `Modal` slices are stable.
+
+## Risks
+
+- Destructive confirmation tone must stay clear.
+- Mobile action stacking may shift.
+
+## Verification
+
+- Build, token lint, targeted confirmation workflow tests.
diff --git a/tasks/design-web-package-integration/component-migration/components/empty-state.md b/tasks/design-web-package-integration/component-migration/components/empty-state.md
new file mode 100644
index 000000000..84a7844c5
--- /dev/null
+++ b/tasks/design-web-package-integration/component-migration/components/empty-state.md
@@ -0,0 +1,53 @@
+# EmptyState Migration
+
+## Target
+
+- Local owner: `apps/frontend/src/shared/ui/feedback/EmptyState.vue` usage
+  sites.
+- Package target: `PuEmptyState`.
+- Desired final state: package owns empty-state structure and surface treatment
+  directly at call sites; the local `EmptyState.vue` facade is deleted after
+  call sites clear.
+
+## Current Contract
+
+- Props: `as`, `title`, `description`, `icon`, `compact`, `align`, `tone`.
+- Slots: default body and `actions`.
+- Current implementation uses `PuCard` and local typography/icon classes.
+
+## Migration Shape
+
+- From: custom EmptyState shell composed from `PuCard`.
+- To: `PuEmptyState` with mapped `variant`, `surfaceLevel`, `align`,
+  `compact`, and icon support.
+- Confirmed package values: `align` is `"start" | "center"`,
+  `surfaceLevel` is `"plain" | "section" | "surface" | "inset-high"`, and
+  `variant` is `"plain" | "soft" | "outline" | "solid"`.
+- Completion rule: no `<EmptyState>` usage and no local `EmptyState.vue` file
+  remain unless a concrete package API blocker is recorded. Convert local
+  treatment vocabulary to package props at usage sites.
+- Parity rule: do not wrap `PuEmptyState` to recreate old card, typography,
+  spacing, or action layout. Use package-native empty-state structure.
+- Execution note: re-check current `@partner-up-dev/design-web@0.4.0`
+  declarations before editing usage sites; direct migration should use the
+  package's public props, not the facade's compatibility mapping.
+- Actual mapping: local `tone="outline"` maps to `variant="outline"`;
+  `tone="section"` maps to `variant="soft"`; both use
+  `surfaceLevel="section"`.
+
+## Risks
+
+- `tone="section" | "outline"` is a local treatment vocabulary, not the
+  package's `variant` / `surfaceLevel` split.
+- Icon class rendering must remain compatible with UnoCSS icon classes.
+
+## Verification
+
+- Build, token lint, frontend unit tests - passed.
+- Browser smoke should include at least one no-data/search-empty route or
+  component surface touched by direct call-site migration.
+
+## Slice Result
+
+- Usage sites now import `PuEmptyState` directly.
+- `apps/frontend/src/shared/ui/feedback/EmptyState.vue` was deleted.
diff --git a/tasks/design-web-package-integration/component-migration/components/error-toast.md b/tasks/design-web-package-integration/component-migration/components/error-toast.md
new file mode 100644
index 000000000..c30bf3605
--- /dev/null
+++ b/tasks/design-web-package-integration/component-migration/components/error-toast.md
@@ -0,0 +1,31 @@
+# ErrorToast Migration
+
+## Target
+
+- Local owner: `apps/frontend/src/shared/ui/feedback/ErrorToast.vue`.
+- Package target: likely `PuInlineNotice`, `PuSnackbar`, or `PuSnackbarHost`
+  depending on whether the usage is inline or transient toast.
+- Desired final state: no bespoke error-toast styling when a package feedback
+  component covers the intent.
+
+## Current Contract
+
+- Props: `message`, optional `persistent`.
+- Event: `close`.
+- Current component is not a global toast service; it is rendered where used.
+
+## Migration Shape
+
+- From: local error surface with custom close button.
+- To: inspect each usage before choosing inline notice versus snackbar.
+- Compatibility strategy: preserve close behavior and persistent behavior.
+
+## Risks
+
+- Snackbar queue semantics may be too different for existing inline usages.
+- Close button label and accessibility may regress if moved too quickly.
+
+## Verification
+
+- Build, token lint, frontend unit tests.
+- Targeted workflow tests for any surface that renders an error toast.
diff --git a/tasks/design-web-package-integration/component-migration/components/feedback-button.md b/tasks/design-web-package-integration/component-migration/components/feedback-button.md
new file mode 100644
index 000000000..7c612cd5b
--- /dev/null
+++ b/tasks/design-web-package-integration/component-migration/components/feedback-button.md
@@ -0,0 +1,30 @@
+# FeedbackButton Migration
+
+## Target
+
+- Local owner: `apps/frontend/src/shared/ui/actions/FeedbackButton.vue`.
+- Package target: `PuButton` `feedback` prop.
+- Desired final state: transient pending/success/error action states use the
+  package feedback API.
+
+## Current Contract
+
+- Props: `type`, `appearance`, `tone`, `size`, `state`, `loading`, `disabled`,
+  `block`, `fullWidth`.
+- Slots: default, `leading`, `trailing`.
+- Event: `click`.
+
+## Migration Shape
+
+- From: local wrapper around local `Button` with state classes.
+- To: package `PuButton` with mapped `feedback` and `loading`.
+- Compatibility strategy: migrate after `Button` mapping is proven.
+
+## Risks
+
+- Success/error visual treatment may differ.
+- Pending state must remain disabled/announced consistently with existing UX.
+
+## Verification
+
+- Build, token lint, targeted share/action feedback tests or smoke.
diff --git a/tasks/design-web-package-integration/component-migration/components/form-field.md b/tasks/design-web-package-integration/component-migration/components/form-field.md
new file mode 100644
index 000000000..deea3589e
--- /dev/null
+++ b/tasks/design-web-package-integration/component-migration/components/form-field.md
@@ -0,0 +1,47 @@
+# FormField Migration
+
+## Target
+
+- Local owner: `apps/frontend/src/shared/ui/forms/FormField.vue` usage sites.
+- Package target: `PuFormItem`.
+- Desired final state: package owns labels, hints, error text, required marker,
+  and form field wrapper directly at call sites.
+
+## Current Contract
+
+- Props: `as`, `label`, `forId`, `hint`, `error`, `required`.
+- Slots: default control and `labelTrailing`.
+- Related package components: `PuFormItem` owns field label/hint/error;
+  `PuForm` owns schema-backed validation containers, not generic submit forms.
+
+## Migration Shape
+
+- From: local label/control/message wrapper.
+- To: usage sites import `PuFormItem` and compose package controls inside it.
+- Completion rule: no `<FormField>` usage and no local `FormField.vue` file
+  remain unless a concrete package API blocker is recorded.
+- Parity rule: do not wrap `PuFormItem` to recreate the old label stack,
+  required marker, hint/error spacing, or `labelTrailing` compatibility. Use
+  package-native field composition; pause only if a trailing-label affordance is
+  product-owned and cannot be composed directly.
+
+## Risks
+
+- Slot structure and spacing may affect dense form layouts; package-native
+  spacing is acceptable.
+- Explicit error text must remain visible when it carries product validation
+  meaning.
+- If `PuFormItem` is used with package inputs, avoid double field shell spacing.
+- `labelTrailing` has no documented direct slot in `PuFormItem`; usage sites
+  with trailing label affordances may need small local composition around the
+  package component.
+
+## Verification
+
+- Build, token lint, frontend unit tests.
+- Form workflow smoke for PR create/edit and admin editors touched by the slice.
+
+## Slice Result
+
+- Local field wrappers were migrated directly to `PuFormItem`.
+- `apps/frontend/src/shared/ui/forms/FormField.vue` was deleted.
diff --git a/tasks/design-web-package-integration/component-migration/components/form.md b/tasks/design-web-package-integration/component-migration/components/form.md
new file mode 100644
index 000000000..06c6621bb
--- /dev/null
+++ b/tasks/design-web-package-integration/component-migration/components/form.md
@@ -0,0 +1,50 @@
+# Form Migration
+
+## Target
+
+- Local owner: no current shared `Form.vue` primitive; native `<form>` elements
+  exist in page and domain workflow components.
+- Package target: `PuForm`.
+- Desired final state: validated form containers with package-supported
+  schema/validate semantics use `PuForm`.
+
+## Current Contract
+
+- Existing forms rely on native `@submit.prevent` behavior in pages and domain
+  components.
+- Shared field structure currently comes from `FormField`, not a form container.
+- Package `PuForm` public reference lists `schema`, `cellPadding`, default
+  slot, and validation types.
+
+## Migration Shape
+
+- From: native `<form>` containers plus local field primitives.
+- To: use `PuForm` only when its validation API is an actual semantic match.
+- Migration rule: do not mechanically replace native forms in the second slice.
+  This gate is about product-level submit/validation semantics, not old
+  component behavior. First migrate `FormField`, `TextInput`, `TextareaInput`,
+  and `ToggleSwitch`; then choose a small form surface for `PuForm` only if it
+  can own the container directly.
+- Parity rule: do not wrap `PuForm` to emulate native-form or old local-form
+  behavior. If `PuForm` cannot directly own a form container's product
+  semantics, leave that form native for now and record the blocker.
+
+## Risks
+
+- Package declarations expose `validate()` but do not document a `submit` emit.
+- Native submit semantics may be product-owned. Do not replace them with a
+  package form through an adapter layer.
+- Schema ownership may cross domain validation boundaries.
+
+## Verification
+
+- Build, token lint, frontend unit tests.
+- If any `PuForm` usage is introduced: targeted workflow smoke for the touched
+  form's submit path and validation/error display.
+
+## Slice Result
+
+- No `PuForm` container was introduced in the second slice.
+- Native `<form>` containers remain where they own submit behavior.
+- `PuForm` stays gated for a future small, explicit validation-container
+  migration.
diff --git a/tasks/design-web-package-integration/component-migration/components/img.md b/tasks/design-web-package-integration/component-migration/components/img.md
new file mode 100644
index 000000000..073c94078
--- /dev/null
+++ b/tasks/design-web-package-integration/component-migration/components/img.md
@@ -0,0 +1,64 @@
+# Img Migration
+
+## Target
+
+- Local owner: native `img` elements, background-image cover shells, and domain
+  image primitives in app usage sites.
+- Package target: `PuImg`.
+- Desired final state: package owns reusable image rendering, loading/error
+  behavior, fit mode, radius, and sizing where image semantics match. App code
+  keeps only domain-specific overlay, fallback copy, and interaction logic.
+
+## Current Contract
+
+- `PRPreviewCardFrame.vue` renders the PR cover as a background-image block.
+- `AnchorEventDemandCard.vue` renders card cover images as background-image
+  blocks and separately owns swipe/preview interaction.
+- `EventCard.vue` renders event cover/fallback gallery images as background
+  images and overlays available-location pills.
+- `Avatar.vue` owns identity fallback semantics and is treated as a local
+  exception, not a generic image wrapper.
+
+## Migration Shape
+
+- From: native `img` and CSS `background-image` shells where the image itself is
+  the reusable visual primitive.
+- To: usage sites import `PuImg` directly and pass `src`, fit mode, dimensions,
+  radius, loading/error settings, and local classes as needed.
+- Completion rule: touched image surfaces should not introduce a local `Img`
+  facade. Keep domain components only when they own layout, overlays, gestures,
+  or fallback text beyond the image primitive itself.
+- Parity rule: exact CSS background-image crop, placeholder visual, loading
+  behavior, or error behavior does not need to match the old implementation.
+  Use `PuImg`'s native model unless a product-owned exception is discussed.
+
+## Initial Usage-Site Scope
+
+- PR preview cover image: `PRPreviewCardFrame.vue`.
+- Anchor Event card cover image: `AnchorEventDemandCard.vue`.
+- Event card cover image: `EventCard.vue`.
+- Avatar image branch: `Avatar.vue`, only if `PuImg` can support the identity
+  component contract directly without weakening fallback accessibility.
+
+## Risks
+
+- Replacing a CSS background with `PuImg` may change crop behavior. The
+  required guardrail is that the image remains legible, correctly bounded, and
+  does not break overlays or gestures.
+- `PuImg` has `loading` and `error` slots, but card fallbacks may be
+  product/domain copy rather than image error UI.
+- Gesture-heavy cards must keep pointer, focus, and swipe behavior on the card
+  root, not on the image.
+
+## Verification
+
+- Build, token lint, frontend unit tests.
+- Browser smoke for Anchor Event card mode/list mode and PR preview card
+  surfaces on mobile and desktop widths.
+
+## Slice Result
+
+- `EventCard.vue`, `AnchorEventDemandCard.vue`, and
+  `PRPreviewCardFrame.vue` now use `PuImg` for cover images.
+- `MePage.vue` and `UserProfilePage.vue` now use `PuImg` for identity images.
+- No local image wrapper was introduced.
diff --git a/tasks/design-web-package-integration/component-migration/components/info-row.md b/tasks/design-web-package-integration/component-migration/components/info-row.md
new file mode 100644
index 000000000..76e1406b8
--- /dev/null
+++ b/tasks/design-web-package-integration/component-migration/components/info-row.md
@@ -0,0 +1,48 @@
+# InfoRow Migration
+
+## Target
+
+- Local owner: `apps/frontend/src/shared/ui/display/InfoRow.vue` and
+  `InfoRowAction.vue` usage sites.
+- Package target: `PuDescriptionList`, `PuDescriptionItem`, or `PuCell`.
+- Desired final state: read-only facts use package description components;
+  actionable rows use package cell/action patterns; local info-row primitives
+  are deleted after call sites clear.
+
+## Current Contract
+
+- `InfoRow`: label/value layout with inline or stack mode.
+- `InfoRowAction`: label plus trailing clickable value and optional suffix icon.
+- Current dense surface: `PRFactsCard` uses `InfoRow`, `InfoRowAction`,
+  `Chip`, and `ChipGroup` together.
+
+## Migration Shape
+
+- From: two local metadata row primitives.
+- To: use `PuDescriptionList` with `PuDescriptionItem` for read-only fact
+  groups; use `PuCell` for interactive value affordances.
+- Completion rule: no `<InfoRow>` / `<InfoRowAction>` usage and no local
+  info-row files remain unless a concrete package API blocker is recorded.
+- Parity rule: do not recreate the old inline/stack row component on top of
+  `PuDescriptionItem` or `PuCell`. Let grouped facts adopt package-native
+  description-list structure.
+
+## Risks
+
+- `PuDescriptionItem` inline layout has specific label/value alignment rules.
+- `PuDescriptionItem` is documented for use inside `PuDescriptionList`; a
+  standalone row migration may be structurally wrong even if it compiles.
+- Interactive value affordances must remain keyboard reachable, but the exact
+  old row/button DOM does not need to remain.
+
+## Verification
+
+- Build, token lint, targeted smoke on PR facts and metadata surfaces.
+
+## Slice Result
+
+- `PRFactsCard.vue` now uses `PuDescriptionList` and `PuDescriptionItem`
+  directly.
+- Action affordances are composed at the usage site with native buttons in
+  `PuDescriptionItem` action slots.
+- `InfoRow.vue` and `InfoRowAction.vue` were deleted.
diff --git a/tasks/design-web-package-integration/component-migration/components/inline-notice.md b/tasks/design-web-package-integration/component-migration/components/inline-notice.md
new file mode 100644
index 000000000..2c2584c66
--- /dev/null
+++ b/tasks/design-web-package-integration/component-migration/components/inline-notice.md
@@ -0,0 +1,50 @@
+# InlineNotice Migration
+
+## Target
+
+- Local owner: `apps/frontend/src/shared/ui/feedback/InlineNotice.vue` usage
+  sites.
+- Package target: `PuInlineNotice`.
+- Desired final state: usage sites import `PuInlineNotice` directly and the
+  local `InlineNotice.vue` facade is deleted after call sites clear.
+
+## Current Contract
+
+- Props: `tone`, `title`, `message`, `dismissible`, `closeLabel`.
+- Event: `close`.
+- Slot: default body content.
+- Current implementation already wraps `PuInlineNotice`.
+
+## Migration Shape
+
+- From: local wrapper maps directly to package component and supplies
+  `common.close` as default close label.
+- To: update call sites to use `PuInlineNotice` and pass `close-label` where
+  dismissible notices need the app-local translated label.
+- Completion rule: no `<InlineNotice>` usage and no local `InlineNotice.vue`
+  file remain unless a concrete package API blocker is recorded.
+- Parity rule: do not recreate the old notice wrapper for spacing, close
+  behavior, DOM shape, or default prop compatibility. Use package-native notice
+  behavior unless an app semantic exception is discussed first.
+- First-slice result: package compatibility was proven through the facade; the
+  second slice now owns direct usage-site cleanup.
+
+## Risks
+
+- Dismissible usage sites may need an explicit translated close label if the
+  package default is not product-appropriate.
+- Moving `data-testid` or attrs away from the rendered package root if call
+  sites rely on them.
+
+## Verification
+
+- `pnpm --filter @partner-up-dev/frontend build` - passed.
+- `pnpm --filter @partner-up-dev/frontend lint:tokens` - passed.
+- `pnpm test:unit:frontend` - passed.
+- Second-slice verification should include build, token lint, frontend unit
+  tests, and smoke on pages with dismissible/local notices.
+
+## Slice Result
+
+- Usage sites now import `PuInlineNotice` directly.
+- `apps/frontend/src/shared/ui/feedback/InlineNotice.vue` was deleted.
diff --git a/tasks/design-web-package-integration/component-migration/components/loading-indicator.md b/tasks/design-web-package-integration/component-migration/components/loading-indicator.md
new file mode 100644
index 000000000..776c10995
--- /dev/null
+++ b/tasks/design-web-package-integration/component-migration/components/loading-indicator.md
@@ -0,0 +1,53 @@
+# LoadingIndicator Migration
+
+## Target
+
+- Local owner: `apps/frontend/src/shared/ui/feedback/LoadingIndicator.vue`
+  usage sites.
+- Package target: `PuLoadingState`.
+- Desired final state: package owns loading semantics and spinner rendering
+  directly at call sites; the local `LoadingIndicator.vue` facade is deleted
+  after call sites clear.
+
+## Current Contract
+
+- Prop: optional `message`.
+- Current component renders a custom spinner plus message text.
+
+## Migration Shape
+
+- From: local spinner markup and keyframes.
+- To: use `PuLoadingState` for the current visible loading region contract.
+  Keep `PuSpinner` out of this slice unless a touched call site proves it is
+  actually spinner-only.
+- Confirmed package values: `align` is `"start" | "center"`, `size` is
+  `"xs" | "sm" | "md" | "lg" | "xl"`, `surfaceLevel` is
+  `"plain" | "section" | "surface" | "inset-high"`, and `variant` is
+  `"plain" | "soft" | "outline" | "solid"`.
+- Completion rule: no `<LoadingIndicator>` usage and no local
+  `LoadingIndicator.vue` file remain unless a concrete package API blocker is
+  recorded. Convert local `message` usage to package `message` plus `label`
+  where needed.
+- Parity rule: do not recreate the old spinner size, animation, region spacing,
+  or loading message layout around `PuLoadingState`.
+- Actual mapping: `message` remains visible message text; label falls back to
+  `common.loading` when no message is supplied.
+- Execution note: re-check current package declarations before editing usage
+  sites because `PuLoadingState` is a consumed package export even though it is
+  not listed in the generated component map reference.
+
+## Risks
+
+- There are many references, so package-native visual density may shift broadly.
+- Empty message call sites may need an accessible label.
+
+## Verification
+
+- Build, token lint, frontend unit tests - passed.
+- Second-slice verification should include build, token lint, frontend unit
+  tests, and at least one route loading-state smoke if feasible.
+
+## Slice Result
+
+- Usage sites now import `PuLoadingState` directly.
+- `apps/frontend/src/shared/ui/feedback/LoadingIndicator.vue` was deleted.
diff --git a/tasks/design-web-package-integration/component-migration/components/modal.md b/tasks/design-web-package-integration/component-migration/components/modal.md
new file mode 100644
index 000000000..ed0d83505
--- /dev/null
+++ b/tasks/design-web-package-integration/component-migration/components/modal.md
@@ -0,0 +1,35 @@
+# Modal Migration
+
+## Target
+
+- Local owner: `apps/frontend/src/shared/ui/overlay/Modal.vue`.
+- Package target: `PuModal`.
+- Desired final state: package owns modal dialog shell, overlay, Escape/overlay
+  close behavior, scroll lock, and accessibility context.
+
+## Current Contract
+
+- Props: `open`, `maxWidth`, `title`.
+- Event: `close`.
+- Slots: default, `header`.
+- Current implementation Teleports to body and emits close on overlay or
+  Escape.
+
+## Migration Shape
+
+- From: local Teleport dialog shell.
+- To: `PuModal` with required `open`, `maxWidth`, `title`, and close behavior.
+- Compatibility strategy: preserve `open` plus `close` contract; audit parent
+  `useBodyScrollLock` usage before enabling package `lockScroll`.
+
+## Risks
+
+- Double scroll locking if both parent and package lock the body.
+- Close-on-overlay and close-on-escape defaults must match existing workflows.
+- Focus and accessibility behavior may change.
+
+## Verification
+
+- Build, token lint, frontend unit tests.
+- Targeted PR/WeChat/support modal workflow tests or smoke.
+- Browser smoke on mobile viewport.
diff --git a/tasks/design-web-package-integration/component-migration/components/page-footer.md b/tasks/design-web-package-integration/component-migration/components/page-footer.md
new file mode 100644
index 000000000..d1e5c1b00
--- /dev/null
+++ b/tasks/design-web-package-integration/component-migration/components/page-footer.md
@@ -0,0 +1,47 @@
+# PageFooter Padding Correction
+
+## Target
+
+- Local owner: `apps/frontend/src/shared/ui/sections/PageFooter.vue`.
+- Package target: no direct package footer component; this is app product
+  chrome composed inside `PuPageScaffold` footer surfaces.
+- Desired final state: `PageFooter` has explicit, token-based top, bottom, left,
+  and right padding defaults without shifting ownership away from
+  `PuPageScaffold`.
+
+## Current Contract
+
+- Public props: `variant?: "minimal" | "brand"`.
+- Slots: none.
+- Events: none.
+- Attrs / `data-testid`: attrs may be passed by page call sites and must stay on
+  the rendered footer root.
+- Accessibility: footer landmark plus navigation labels and legal links must
+  remain unchanged.
+
+## Migration Shape
+
+- From: brand footer padding relies on custom properties for top/inline values
+  that can default to `0`; minimal footer only has top padding.
+- To: define complete block and inline padding defaults with existing spacing
+  tokens and safe-area bottom behavior.
+- Compatibility strategy: change only `PageFooter.vue`; do not alter page call
+  sites or introduce a package-internal footer dependency.
+- Actual result: brand footer now has top/left/right/bottom fallbacks with
+  landing spacing when available and `sys` spacing otherwise; minimal footer now
+  has right/bottom/left padding in addition to its existing top padding.
+
+## Risks
+
+- Runtime: low; static style correction only.
+- Visual: medium on landing and PR/profile support footers because vertical
+  rhythm and reveal-footer spacing can move.
+- Tests: low; existing mocks may not detect visual padding.
+
+## Verification
+
+- Build: `pnpm --filter @partner-up-dev/frontend build` - passed.
+- Token lint: `pnpm --filter @partner-up-dev/frontend lint:tokens` - passed.
+- Unit tests: `pnpm test:unit:frontend` - passed.
+- Browser smoke: Home brand footer and PR detail minimal footer on a 390x844
+  viewport - passed. Computed padding values were non-zero on all four sides.
diff --git a/tasks/design-web-package-integration/component-migration/components/page-scaffold.md b/tasks/design-web-package-integration/component-migration/components/page-scaffold.md
new file mode 100644
index 000000000..864b717eb
--- /dev/null
+++ b/tasks/design-web-package-integration/component-migration/components/page-scaffold.md
@@ -0,0 +1,56 @@
+# PageScaffold Migration
+
+## Target
+
+- Local owner: `apps/frontend/src/shared/ui/layout/PageScaffold*.vue`.
+- Package target: `PuPageScaffold`.
+- Desired final state: route usage sites import `PuPageScaffold` directly with
+  explicit package props; local `PageScaffold*.vue` wrappers are deleted after
+  call sites clear unless a concrete route-layout semantic blocker is recorded.
+
+## Current Contract
+
+- Existing local wrappers already render `PuPageScaffold`.
+- Route pages import named wrappers such as `PageScaffoldFlow`,
+  `PageScaffoldCentered`, `FullScreenPageScaffold`, and
+  `FooterRevealPageScaffold`.
+- Confirmed package values: `viewport` is `"document" | "screen"`, `layout` is
+  `"single" | "aside"`, `width` is `"page" | "wide" | "full"`,
+  `contentPlacement` is `"start" | "center"`, and `footerPlacement` is
+  `"auto" | "inside" | "reveal"`.
+
+## Migration Shape
+
+- From: multiple app wrappers around `PuPageScaffold`.
+- To: replace usage sites with `PuPageScaffold`:
+  `PageScaffold` -> default props; `PageScaffoldFlow` -> default plus existing
+  header/footer slot composition; `PageScaffoldCentered` ->
+  `content-placement="center"`; `FullScreenPageScaffold` ->
+  `viewport="screen"`; `FooterRevealPageScaffold` ->
+  `footer-placement="reveal"` plus explicit `content-placement`; and
+  `DesktopPageScaffold` -> `layout="aside" width="wide" sticky-aside`.
+- Completion rule: no local `PageScaffold*` imports or files remain unless a
+  concrete product-owned layout semantic blocker is recorded.
+- Parity rule: do not recreate old scaffold wrappers for class names, slot
+  aliases, or layout defaults. Use explicit `PuPageScaffold` props at the route
+  usage site. If a route-level layout abstraction appears genuinely
+  product-owned, pause and discuss before keeping it.
+- First-slice result: wrappers were left structurally unchanged because they
+  already delegated to `PuPageScaffold`; the type entry covered their package
+  props.
+- Second-slice result: usage sites now import `PuPageScaffold` directly with
+  explicit package props, and all local `PageScaffold*` wrappers were deleted.
+
+## Risks
+
+- Safe-area, full-screen height, footer reveal, and scroll ownership are page
+  geometry risks.
+- Route pages may rely on wrapper-specific class names or slot placement; those
+  should move to package-native route composition rather than a compatibility
+  wrapper unless explicitly approved.
+
+## Verification
+
+- `pnpm --filter @partner-up-dev/frontend build` - passed.
+- `pnpm --filter @partner-up-dev/frontend lint:tokens` - passed.
+- Browser smoke on Home and PR detail mobile footer surfaces - passed.
diff --git a/tasks/design-web-package-integration/component-migration/components/segmented-control.md b/tasks/design-web-package-integration/component-migration/components/segmented-control.md
new file mode 100644
index 000000000..d70199a27
--- /dev/null
+++ b/tasks/design-web-package-integration/component-migration/components/segmented-control.md
@@ -0,0 +1,48 @@
+# SegmentedControl Migration
+
+## Target
+
+- Local owner: `apps/frontend/src/shared/ui/controls/SegmentedControl.vue`
+  usage sites.
+- Package target: `PuSegmented` and `PuSegmentedItem`.
+- Desired final state: package owns radio/tab keyboard behavior and visual rail.
+
+## Current Contract
+
+- Props: `modelValue`, `options`, `ariaLabel`, `size`, `tone`, `block`.
+- Option fields: `value`, `label`, `icon`, `ariaLabel`, `testId`,
+  `disabled`.
+- Event: `update:modelValue`.
+- Current call sites use this as a radio-style mode switch, not real tab panels.
+
+## Migration Shape
+
+- From: local loop rendering radio buttons.
+- To: `PuSegmented` wrapping one `PuSegmentedItem` per option.
+- Completion rule: no `<SegmentedControl>` usage and no local
+  `SegmentedControl.vue` file remain unless a concrete package API blocker is
+  recorded. Preserve option-level `data-testid` and icon slots at usage sites.
+- Parity rule: do not wrap `PuSegmented` to keep the old radiogroup DOM,
+  activation behavior, option loop API, event shape, or block/tone vocabulary.
+  Use package-native segmented behavior unless it changes product-level mode
+  selection meaning.
+
+## Risks
+
+- Package `semantics="tabs"` must only be used for real tab panels; default
+  should remain radio semantics.
+- Keyboard activation behavior may differ.
+- Package emits both `update:modelValue` and `change`; usage sites should
+  choose the package event directly instead of adapter compatibility.
+
+## Verification
+
+- Build, token lint, frontend unit tests.
+- Targeted smoke where segmented controls switch form/page modes.
+
+## Slice Result
+
+- All local segmented control call sites now render `PuSegmented` with explicit
+  `PuSegmentedItem` children.
+- Option icons and `data-testid` attributes remain usage-site owned.
+- `apps/frontend/src/shared/ui/controls/SegmentedControl.vue` was deleted.
diff --git a/tasks/design-web-package-integration/component-migration/components/tag.md b/tasks/design-web-package-integration/component-migration/components/tag.md
new file mode 100644
index 000000000..6412087f7
--- /dev/null
+++ b/tasks/design-web-package-integration/component-migration/components/tag.md
@@ -0,0 +1,46 @@
+# Tag Migration
+
+## Target
+
+- Local owner: no current shared `Tag.vue` primitive.
+- Package target: `PuTag`.
+- Desired final state: non-interactive status and category labels use package
+  tag rendering instead of local pill/span styles or overloaded `Chip` tone
+  usage.
+
+## Current Contract
+
+- Status/category labels are currently split across local `Chip` use,
+  page-local `status-pill`/badge classes, and domain-local tag styles.
+- Local `Chip` is also used for token-like labels, so not every chip should
+  become `PuTag`.
+
+## Migration Shape
+
+- From: status/category labels are implemented as local chips or page/domain
+  spans.
+- To: use `PuTag` for compact non-interactive labels.
+- Completion rule: status/category labels touched in this slice import
+  `PuTag` directly from the package. Do not introduce a local `Tag.vue` facade
+  and do not route status labels through local `Chip`.
+
+## Risks
+
+- `PuTag` has no slots in the generated reference; it uses a `text` prop.
+- Package tag uses `text`, `tone`, `variant`, `shape`, and `size`; slot content
+  is not the component contract.
+- Some domain tags are interactive/removable and should remain `PuChip` or a
+  domain-specific editor control.
+
+## Verification
+
+- Build, token lint, frontend unit tests.
+- Visual smoke on status labels in application lists and admin review surfaces
+  if any are touched.
+
+## Slice Result
+
+- `PuTag` was introduced for read-only status labels in route/location
+  application lists, Me page WeChat binding status, admin route application
+  review cards, POI review, and PR partner capacity status.
+- No local `Tag.vue` facade was introduced.
diff --git a/tasks/design-web-package-integration/component-migration/components/text-input.md b/tasks/design-web-package-integration/component-migration/components/text-input.md
new file mode 100644
index 000000000..276be4ecf
--- /dev/null
+++ b/tasks/design-web-package-integration/component-migration/components/text-input.md
@@ -0,0 +1,42 @@
+# TextInput Migration
+
+## Target
+
+- Local owner: `apps/frontend/src/shared/ui/forms/TextInput.vue` usage sites.
+- Package target: `PuInput`.
+- Desired final state: package owns single-line input shell and states directly
+  at call sites.
+
+## Current Contract
+
+- Props: `inputId`, `modelValue`, `type`, `disabled`, `placeholder`,
+  `inputmode`, `autocomplete`, `maxLength`.
+- Events: currently only `update:modelValue` is exposed by the local wrapper;
+  `PuInput` also emits focus, blur, clear, icon click, and click.
+
+## Migration Shape
+
+- From: native input with local styling.
+- To: `PuInput` with `id`, `modelValue`, `type`, `inputmode`,
+  `autocomplete`, `maxlength`, and state props.
+- Completion rule: no `<TextInput>` usage and no local `TextInput.vue` file
+  remain unless a concrete package API blocker is recorded. Convert `inputId`
+  to package `id` at usage sites.
+- Parity rule: do not wrap `PuInput` to keep old native-input DOM, attr
+  forwarding behavior, height, border, or event surface.
+
+## Risks
+
+- `maxlength` prop casing differs.
+- Product-critical test selectors may move to package-native semantic nodes;
+  update tests intentionally instead of preserving old DOM through a wrapper.
+
+## Verification
+
+- Build, token lint, frontend unit tests.
+- Form workflow smoke for surfaces touched by changed call sites.
+
+## Slice Result
+
+- Local text inputs were migrated directly to `PuInput`.
+- `apps/frontend/src/shared/ui/forms/TextInput.vue` was deleted.
diff --git a/tasks/design-web-package-integration/component-migration/components/textarea-input.md b/tasks/design-web-package-integration/component-migration/components/textarea-input.md
new file mode 100644
index 000000000..0d0f1f85e
--- /dev/null
+++ b/tasks/design-web-package-integration/component-migration/components/textarea-input.md
@@ -0,0 +1,44 @@
+# TextareaInput Migration
+
+## Target
+
+- Local owner: `apps/frontend/src/shared/ui/forms/TextareaInput.vue` usage
+  sites.
+- Package target: `PuTextarea`.
+- Desired final state: package owns textarea shell, count, invalid/disabled
+  states, and variants directly at call sites.
+
+## Current Contract
+
+- Props: `inputId`, `modelValue`, `disabled`, `placeholder`, `rows`,
+  `maxLength`, `showCount`, `minHeight`.
+- Event: `update:modelValue`.
+- Package `PuTextarea` supports `autoHeight`, `maxlength`, and `showCount`, but
+  does not expose `rows` or `minHeight` in the generated declarations.
+
+## Migration Shape
+
+- From: native textarea with local count rendering.
+- To: `PuTextarea` with `id`, `modelValue`, `maxlength`, `showCount`,
+  `disabled`, and field `variant`.
+- Completion rule: no `<TextareaInput>` usage and no local `TextareaInput.vue`
+  file remain unless a concrete package API blocker is recorded. Handle
+  `rows` / `minHeight` at usage sites with supported package props and local
+  composition CSS where needed.
+- Parity rule: do not wrap `PuTextarea` to recreate old `rows`, `minHeight`,
+  resize, count, or native textarea DOM behavior. Use package-native textarea
+  behavior unless the difference breaks product input semantics.
+
+## Risks
+
+- Min-height, resize behavior, and character count layout may change.
+
+## Verification
+
+- Build, token lint, frontend unit tests.
+- PR message / natural language PR create smoke where textarea inputs are used.
+
+## Slice Result
+
+- Local textarea inputs were migrated directly to `PuTextarea`.
+- `apps/frontend/src/shared/ui/forms/TextareaInput.vue` was deleted.
diff --git a/tasks/design-web-package-integration/component-migration/components/toggle-switch.md b/tasks/design-web-package-integration/component-migration/components/toggle-switch.md
new file mode 100644
index 000000000..dc9483064
--- /dev/null
+++ b/tasks/design-web-package-integration/component-migration/components/toggle-switch.md
@@ -0,0 +1,38 @@
+# ToggleSwitch Migration
+
+## Target
+
+- Local owner: `apps/frontend/src/shared/ui/forms/ToggleSwitch.vue` usage
+  sites.
+- Package target: `PuToggleSwitch`.
+- Desired final state: package owns switch rendering and semantics directly at
+  call sites.
+
+## Current Contract
+
+- Props: `modelValue`, `label`, `disabled`.
+- Events: `update:modelValue`, `change`.
+
+## Migration Shape
+
+- From: local switch button.
+- To: `PuToggleSwitch` with the same core props and events.
+- Completion rule: no `<ToggleSwitch>` usage and no local `ToggleSwitch.vue`
+  file remain unless a concrete package API blocker is recorded.
+- Parity rule: do not wrap `PuToggleSwitch` to keep old switch DOM, size,
+  label placement, or emitted event compatibility.
+
+## Risks
+
+- Size defaults and spacing may shift admin/editor layout.
+- Ensure label remains visible and accessible.
+
+## Verification
+
+- Build, token lint, frontend unit tests.
+- Admin editor smoke where toggles are used.
+
+## Slice Result
+
+- Local switches were migrated directly to `PuToggleSwitch`.
+- `apps/frontend/src/shared/ui/forms/ToggleSwitch.vue` was deleted.
diff --git a/tasks/design-web-package-integration/component-migration/components/wheel-picker.md b/tasks/design-web-package-integration/component-migration/components/wheel-picker.md
new file mode 100644
index 000000000..e5ef64b62
--- /dev/null
+++ b/tasks/design-web-package-integration/component-migration/components/wheel-picker.md
@@ -0,0 +1,44 @@
+# WheelPicker Migration
+
+## Target
+
+- Local owner: `apps/frontend/src/shared/ui/forms/WheelPicker.vue`.
+- Package target: `PuWheelPicker`.
+- Desired final state: package owns wheel-picker gesture, keyboard, snapping,
+  tone, and variant behavior.
+
+## Current Contract
+
+- Props: `modelValue`, `options`, `variant`, `tone`, `itemHeight`,
+  `visibleCount`, `disabled`, `ariaLabel`, `emptyLabel`.
+- Slot: `option`.
+- Events: `update:modelValue`, `change`.
+
+## Migration Shape
+
+- From: local wheel-picker implementation.
+- To: `PuWheelPicker`; APIs are intentionally similar because this component
+  was promoted to the package.
+- Compatibility strategy: direct usage-site replacement. Do not keep a local
+  wrapper for visual or gesture parity.
+
+## Execution
+
+- `FormModeTimeControl.vue` now imports `PuWheelPicker` directly from
+  `@partner-up-dev/design-web`.
+- `shared/ui/forms/WheelPicker.vue` was deleted after the single current call
+  site was cleared.
+
+## Risks
+
+- Pointer capture, wheel snapping, and keyboard behavior are interaction risks.
+- Package uses canonical `tone` plus `variant`; preserve typo compatibility only
+  if current call sites still rely on it.
+
+## Verification
+
+- Build, token lint, frontend unit tests.
+- Target wrapper import scan.
+- Browser interaction smoke on the one current usage remains optional for the
+  next manual UI pass because package and local APIs are equivalent and the
+  package owns wheel gesture behavior now.
diff --git a/tasks/design-web-package-integration/component-migration/evidence/README.md b/tasks/design-web-package-integration/component-migration/evidence/README.md
new file mode 100644
index 000000000..6cc12b00f
--- /dev/null
+++ b/tasks/design-web-package-integration/component-migration/evidence/README.md
@@ -0,0 +1,109 @@
+# First Slice Evidence
+
+## Commands
+
+- `pnpm --filter @partner-up-dev/frontend build` - passed.
+- `pnpm --filter @partner-up-dev/frontend lint:tokens` - passed.
+- `pnpm test:unit:frontend` - passed, 26 files / 117 tests.
+- `git diff --check` - passed.
+
+## Browser Smoke
+
+Temporary frontend server: Vite on `http://localhost:4001/`.
+
+Mobile viewport: 390 x 844.
+
+- Home brand footer:
+  - Screenshot: `home-footer-mobile.png`
+  - Computed padding: top `20px`, right `18.72px`, bottom `20px`, left
+    `18.72px`.
+- PR detail minimal footer:
+  - Screenshot: `pr-footer-mobile.png`
+  - Computed padding: top `10px`, right `18px`, bottom `18px`, left `18px`.
+
+## Package Type Blocker
+
+Direct package root declarations were tested and failed because the published
+package root loads `types/components.d.ts`, which imports source Vue files under
+`src/components/*`. Those source files reference `src/types` and
+`src/composables`, which are not published in `@partner-up-dev/design-web@0.3.0`.
+
+## Registry Artifact Verification
+
+Fresh command:
+
+- `npm pack --prefer-online --json @partner-up-dev/design-web@0.3.0`
+
+Observed against npm scope registry `https://npm.pkg.github.com`:
+
+- Tarball: `partner-up-dev-design-web-0.3.0.tgz`
+- Integrity:
+  `sha512-woogyRdecI46FKWlctTpiiU2LEZ+DPHKr7qxVAOmwBsRbq7x/lNjNLyexVo0FyZL7RXOWUbgHOekAeOKlMg7Kg==`
+- `package/package.json` reports version `0.3.0`.
+- `package/dist/index.d.ts` declares `export declare const version = "0.1.0";`.
+- Tarball includes `src/components`.
+- Tarball does not include `src/types`.
+- Tarball does not include `src/composables`.
+- `package/types/components.d.ts` references `../src/components/*`.
+- Workspace `pnpm-lock.yaml` has the same integrity for
+  `@partner-up-dev/design-web@0.3.0`.
+
+## Registry 0.4.0 Verification
+
+Fresh command:
+
+- `npm pack --prefer-online --json @partner-up-dev/design-web@0.4.0`
+
+Observed against npm scope registry `https://npm.pkg.github.com`:
+
+- Tarball: `partner-up-dev-design-web-0.4.0.tgz`
+- Integrity:
+  `sha512-LS1Sx+SmpecJQZaFTbuKOJc3rMU5TFCrk4oF4o5a/WvoWAV0VNhsmUr8OLid82Zg3nlAEKDaduUhI9cA+6IorA==`
+- `package/package.json` reports version `0.4.0`.
+- `package/dist/index.d.ts` exports `version` from `./version`.
+- `package/dist/version.d.ts` declares
+  `export declare const version = "0.4.0";`.
+- Root declarations no longer export `../types/components`.
+- Tarball does not include `src/components`, `src/types`, or
+  `src/composables`.
+- `package/types/components.d.ts` references
+  `typeof import('@partner-up-dev/design-web')['PuButton']` style package root
+  named exports.
+- Temporary consumer installed the `0.4.0` tarball plus Vue, TypeScript,
+  vue-tsc, and Sass, then passed `vue-tsc --noEmit` while importing root
+  components, `version`, and `@partner-up-dev/design-web/types`.
+
+## Workspace 0.4.0 Upgrade Verification
+
+Production edits after explicit user approval:
+
+- `apps/frontend/package.json` depends on
+  `@partner-up-dev/design-web` `0.4.0`.
+- `pnpm-lock.yaml` resolves
+  `@partner-up-dev/design-web@0.4.0` with integrity
+  `sha512-LS1Sx+SmpecJQZaFTbuKOJc3rMU5TFCrk4oF4o5a/WvoWAV0VNhsmUr8OLid82Zg3nlAEKDaduUhI9cA+6IorA==`.
+- `apps/frontend/tsconfig.json` no longer aliases
+  `@partner-up-dev/design-web` to a local `.d.ts` file.
+- `apps/frontend/src/types/design-web-runtime.d.ts` has been deleted.
+
+Verification:
+
+- `pnpm --filter @partner-up-dev/frontend build` - passed.
+- `pnpm --filter @partner-up-dev/frontend lint:tokens` - passed.
+- `pnpm test:unit:frontend` - passed, 26 files / 117 tests.
+- `git diff --check` - passed.
+
+Runtime smoke:
+
+- Temporary frontend server: Vite on `http://127.0.0.1:4002/`, stopped after
+  verification.
+- Mobile viewport: 390 x 844.
+- Home page loaded without browser page errors.
+  - Screenshot: `home-040-mobile.png`
+  - Footer padding: top `20px`, right `18.72px`, bottom `20px`, left
+    `18.72px`.
+- PR detail route loaded without browser page errors and rendered the expected
+  no-backend loading state plus footer.
+  - Screenshot: `pr-040-mobile.png`
+  - Body text: `加载中...`, `我的`, `需要帮助`, `关于`.
+  - Footer padding: top `10px`, right `18px`, bottom `18px`, left `18px`.
diff --git a/tasks/design-web-package-integration/component-migration/evidence/home-040-mobile.png b/tasks/design-web-package-integration/component-migration/evidence/home-040-mobile.png
new file mode 100644
index 0000000000000000000000000000000000000000..ba6a901767ff8fd15eb88c3c099893f3c093237a
GIT binary patch
literal 127252
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%0AY>5W
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
G5}E*p==NU#

literal 0
HcmV?d00001

diff --git a/tasks/design-web-package-integration/component-migration/evidence/home-footer-mobile.png b/tasks/design-web-package-integration/component-migration/evidence/home-footer-mobile.png
new file mode 100644
index 0000000000000000000000000000000000000000..7847ec0978cb06c31901c5ca7e84070c0c8a7f98
GIT binary patch
literal 135124
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%0DGEf1<%egacvFL_;}iqQBvpQ6ezimn`Ps4&H;^%j
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%0Ax-@l9ThGSd}jf_cp
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
Ddsz}6

literal 0
HcmV?d00001

diff --git a/tasks/design-web-package-integration/component-migration/evidence/pr-040-mobile.png b/tasks/design-web-package-integration/component-migration/evidence/pr-040-mobile.png
new file mode 100644
index 0000000000000000000000000000000000000000..d76cf7824bfe38f91cda3cfb1042f416704df1bf
GIT binary patch
literal 6188
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
F`#0|1=-dDR

literal 0
HcmV?d00001

diff --git a/tasks/design-web-package-integration/component-migration/evidence/pr-footer-mobile.png b/tasks/design-web-package-integration/component-migration/evidence/pr-footer-mobile.png
new file mode 100644
index 0000000000000000000000000000000000000000..dbd6d8e6540f6b23dbeb5e73ea0c1ff990f9b9b7
GIT binary patch
literal 8160
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
Wn<LxR*E@DRO3-WeSBXF0d-C6I#z%?(

literal 0
HcmV?d00001


From ed267a9ab268b3565b43567da225a4757674ec8d Mon Sep 17 00:00:00 2001
From: Lanzhijiang <lanzhijiang@foxmail.com>
Date: Sat, 13 Jun 2026 20:58:00 +0800
Subject: [PATCH 03/94] chore(dev): document agent setup workflows

---
 AGENTS.md                                     |   4 +-
 docs/20-product-tdd/cross-unit-contracts.md   |   3 +-
 docs/40-deployment/environments.md            |   6 +
 docs/40-deployment/rollout.md                 |  20 +++
 package.json                                  |   1 +
 scripts/ensure-dev-servers.ps1                | 134 ++++++++++++++++++
 .../component-migration/00-control-surface.md |  14 ++
 .../component-migration/90-discussion-log.md  |  12 ++
 tasks/dev-server-ensure-entry/README.md       |  51 +++++++
 9 files changed, 243 insertions(+), 2 deletions(-)
 create mode 100644 scripts/ensure-dev-servers.ps1
 create mode 100644 tasks/dev-server-ensure-entry/README.md

diff --git a/AGENTS.md b/AGENTS.md
index 097d13917..98e5bff42 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -106,7 +106,9 @@ Pause and ask for human confirmation when:
 ## Development Workflow
 
 - Use GitHub CLI (`gh`) for GitHub operations and issue workflows.
-- Use `pnpm dev:portless` as the default full-stack local development entry. `portless.json` owns the stable app names for the frontend (`partner-up`) and backend (`api.partner-up`).
+- When local frontend/backend services must be available for browser or manual validation, run `pnpm dev:ensure` from the repository root first. It reuses existing `portless` routes and starts only missing dev servers.
+- Use `pnpm dev:portless` as the underlying full-stack local development entry. `portless.json` owns the stable app names for the frontend (`partner-up`) and backend (`api.partner-up`). Do not start ad hoc duplicate dev servers with raw `pnpm dev`, `pnpm dev:frontend`, or `pnpm dev:backend` when the goal is only to ensure services are running.
+- When updating `@partner-up-dev/design-web`, do not hand-edit local agent skill copies. After installing the new package version, verify the package-shipped TanStack Intent skill with `pnpm dlx @tanstack/intent@latest list --json`, `pnpm dlx @tanstack/intent@latest load @partner-up-dev/design-web#design-web`, and `pnpm dlx @tanstack/intent@latest validate apps/frontend/node_modules/@partner-up-dev/design-web/skills/design-web`. Do not add an `intent-skills` managed block unless explicitly requested.
 - Keep tests and guardrails aligned with behavior changes; do not ship by build-only confidence.
 - Use `pnpm lint:backend` to run backend source guardrails, including the Problem Details lint that prevents production API code from throwing raw Hono HTTP exceptions.
 - Run test suites from the repository root through Vitest projects: `pnpm test:unit:backend`, `pnpm test:unit:frontend`, `pnpm test:scenario:backend`, `pnpm test:scenario:system`, or `pnpm test:scenario:all`. Scenario Vitest project setup loads `apps/frontend/.env` and `apps/backend/.env`, then owns temporary database and server lifecycle.
diff --git a/docs/20-product-tdd/cross-unit-contracts.md b/docs/20-product-tdd/cross-unit-contracts.md
index f277d83fb..3b34fa213 100644
--- a/docs/20-product-tdd/cross-unit-contracts.md
+++ b/docs/20-product-tdd/cross-unit-contracts.md
@@ -13,7 +13,8 @@ Contract implication:
 
 ## 1.1 Local Development Origin Contract
 
-- The default developer full-stack entry is `pnpm dev:portless` from the repository root.
+- The agent-facing developer availability entry is `pnpm dev:ensure` from the repository root. It checks the stable portless routes and starts only missing frontend/backend dev servers.
+- The underlying developer full-stack entry is `pnpm dev:portless` from the repository root.
 - `portless.json` maps `apps/frontend` to the public app name `partner-up` and `apps/backend` to the public app name `api.partner-up`.
 - During portless development, Vite reads `PORTLESS_URL`, `HOST`, and `PORT` from the portless runtime, publishes `import.meta.env.VITE_API_URL` as the frontend origin, and keeps browser API calls same-origin through the frontend `/api` proxy.
 - The frontend `/api` proxy targets the backend portless app by sending `Host: api.partner-up.localhost`, which keeps local browser flows aligned with the typed backend HTTP contract while application code stays free of fixed numeric ports.
diff --git a/docs/40-deployment/environments.md b/docs/40-deployment/environments.md
index 8ae690e28..43656951f 100644
--- a/docs/40-deployment/environments.md
+++ b/docs/40-deployment/environments.md
@@ -4,6 +4,7 @@
 
 The default local development entry is portless-managed:
 
+- ensure frontend and backend are available: `pnpm dev:ensure`
 - full stack: `pnpm dev:portless`
 - frontend only: `pnpm dev:portless:frontend`
 - backend only: `pnpm dev:portless:backend`
@@ -22,6 +23,11 @@ Fixed local ports remain available for compatibility workflows through package
 env files and helper scripts. They are local fallback inputs, while portless is
 the default developer workflow.
 
+Agents should use `pnpm dev:ensure` before browser or manual validation that
+needs the local frontend/backend pair. The ensure command checks the stable
+portless routes and starts only the missing services, which avoids duplicate
+dev servers during repeated agent runs.
+
 System scenario tests are a separate local runtime. The `system-scenario` Vitest project
 allocates isolated frontend and backend HTTP ports for the test process,
 independent of the developer portless server.
diff --git a/docs/40-deployment/rollout.md b/docs/40-deployment/rollout.md
index 24427be5d..1c98cb792 100644
--- a/docs/40-deployment/rollout.md
+++ b/docs/40-deployment/rollout.md
@@ -193,6 +193,26 @@ and updates frontend source release metadata, but it skips frontend GitHub
 Release creation. The frontend deploy workflow creates the frontend GitHub
 Release after production ESA deployment succeeds.
 
+## Frontend Design Package Updates
+
+`@partner-up-dev/design-web` publishes its TanStack Intent agent skill inside
+the package under `skills/design-web`. Updating the package dependency is the
+skill update mechanism; do not manually edit local copies such as
+`~/.codex/skills/design-web`.
+
+After changing the installed design-web version, run these checks from the
+repository root:
+
+```powershell
+pnpm dlx @tanstack/intent@latest list --json
+pnpm dlx @tanstack/intent@latest load @partner-up-dev/design-web#design-web
+pnpm dlx @tanstack/intent@latest validate apps/frontend/node_modules/@partner-up-dev/design-web/skills/design-web
+```
+
+The `load` command is the agent-facing source of truth for the current
+package-shipped skill. Do not run `intent install` or add an `intent-skills`
+managed block unless the repository intentionally adopts that mapping format.
+
 ## Manual Rollout Reality
 
 Manual backend deployment is supported through the same repository scripts used
diff --git a/package.json b/package.json
index 70e256a9b..74cf3e461 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   },
   "scripts": {
     "dev": "pnpm --filter @partner-up-dev/frontend dev & pnpm --filter @partner-up-dev/backend dev",
+    "dev:ensure": "powershell -NoProfile -ExecutionPolicy Bypass -File ./scripts/ensure-dev-servers.ps1",
     "dev:portless": "powershell -NoProfile -ExecutionPolicy Bypass -File ./scripts/portless.ps1",
     "dev:portless:frontend": "powershell -NoProfile -ExecutionPolicy Bypass -File ./scripts/portless.ps1 --name partner-up -- pnpm --filter @partner-up-dev/frontend dev",
     "dev:portless:backend": "powershell -NoProfile -ExecutionPolicy Bypass -File ./scripts/portless.ps1 --name api.partner-up -- pnpm --filter @partner-up-dev/backend dev",
diff --git a/scripts/ensure-dev-servers.ps1 b/scripts/ensure-dev-servers.ps1
new file mode 100644
index 000000000..bac97bb4b
--- /dev/null
+++ b/scripts/ensure-dev-servers.ps1
@@ -0,0 +1,134 @@
+param(
+    [int]$TimeoutSeconds = 90,
+    [int]$PollIntervalSeconds = 2
+)
+
+$ErrorActionPreference = "Stop"
+
+if ($TimeoutSeconds -le 0) {
+    throw "TimeoutSeconds must be greater than 0."
+}
+
+if ($PollIntervalSeconds -le 0) {
+    throw "PollIntervalSeconds must be greater than 0."
+}
+
+$repoRoot = Resolve-Path -LiteralPath (Join-Path $PSScriptRoot "..")
+
+$routes = @(
+    @{
+        Name = "frontend"
+        Url = "https://partner-up.localhost"
+        Script = "dev:portless:frontend"
+    },
+    @{
+        Name = "backend"
+        Url = "https://api.partner-up.localhost"
+        Script = "dev:portless:backend"
+    }
+)
+
+function Assert-CommandAvailable {
+    param(
+        [Parameter(Mandatory = $true)]
+        [string]$CommandName
+    )
+
+    if (-not (Get-Command $CommandName -ErrorAction SilentlyContinue)) {
+        throw "$CommandName is not available on PATH. Install it globally with: npm install -g $CommandName"
+    }
+}
+
+function Get-PortlessListText {
+    $output = & portless list 2>&1
+    if ($LASTEXITCODE -ne 0) {
+        throw "portless list failed:`n$($output -join "`n")"
+    }
+
+    return $output -join "`n"
+}
+
+function Get-MissingRoutes {
+    param(
+        [Parameter(Mandatory = $true)]
+        [string]$RouteListText
+    )
+
+    $missing = @()
+    foreach ($route in $routes) {
+        if ($RouteListText -notmatch [regex]::Escape($route.Url)) {
+            $missing += $route
+        }
+    }
+
+    return $missing
+}
+
+function Start-DevServer {
+    param(
+        [Parameter(Mandatory = $true)]
+        [hashtable]$Route
+    )
+
+    $logDir = Join-Path $repoRoot ".codex-tmp/dev-servers"
+    New-Item -ItemType Directory -Force -Path $logDir | Out-Null
+
+    $stamp = Get-Date -Format "yyyyMMdd-HHmmss"
+    $stdoutPath = Join-Path $logDir "$stamp-$($Route.Name).out.log"
+    $stderrPath = Join-Path $logDir "$stamp-$($Route.Name).err.log"
+    $command = "pnpm run $($Route.Script)"
+
+    Write-Host "Starting $($Route.Name) dev server through portless: $($Route.Url)"
+    Write-Host "Logs: $stdoutPath"
+
+    $powershellCommand = Get-Command pwsh -ErrorAction SilentlyContinue
+    if (-not $powershellCommand) {
+        $powershellCommand = Get-Command powershell -ErrorAction Stop
+    }
+
+    Start-Process `
+        -FilePath $powershellCommand.Source `
+        -ArgumentList @("-NoProfile", "-ExecutionPolicy", "Bypass", "-Command", $command) `
+        -WorkingDirectory $repoRoot `
+        -WindowStyle Hidden `
+        -RedirectStandardOutput $stdoutPath `
+        -RedirectStandardError $stderrPath `
+        -PassThru | Out-Null
+}
+
+Assert-CommandAvailable -CommandName "portless"
+Assert-CommandAvailable -CommandName "pnpm"
+
+$initialRouteList = Get-PortlessListText
+$missingRoutes = @(Get-MissingRoutes -RouteListText $initialRouteList)
+
+if ($missingRoutes.Count -eq 0) {
+    Write-Host "Frontend and backend dev servers are already registered:"
+    foreach ($route in $routes) {
+        Write-Host "  $($route.Url)"
+    }
+    exit 0
+}
+
+foreach ($route in $missingRoutes) {
+    Start-DevServer -Route $route
+}
+
+$deadline = (Get-Date).AddSeconds($TimeoutSeconds)
+do {
+    Start-Sleep -Seconds $PollIntervalSeconds
+
+    $currentRouteList = Get-PortlessListText
+    $missingRoutes = @(Get-MissingRoutes -RouteListText $currentRouteList)
+
+    if ($missingRoutes.Count -eq 0) {
+        Write-Host "Frontend and backend dev servers are ready:"
+        foreach ($route in $routes) {
+            Write-Host "  $($route.Url)"
+        }
+        exit 0
+    }
+} while ((Get-Date) -lt $deadline)
+
+$missingNames = ($missingRoutes | ForEach-Object { $_.Name }) -join ", "
+throw "Timed out waiting for dev server route(s): $missingNames"
diff --git a/tasks/design-web-package-integration/component-migration/00-control-surface.md b/tasks/design-web-package-integration/component-migration/00-control-surface.md
index 155c11ee1..dfb0522c3 100644
--- a/tasks/design-web-package-integration/component-migration/00-control-surface.md
+++ b/tasks/design-web-package-integration/component-migration/00-control-surface.md
@@ -110,6 +110,12 @@ design package should not absorb.
 - `PuWheelPicker` was added to the second slice after the user asked to include
   it before committing. `FormModeTimeControl.vue` now imports the package
   component directly and the local wheel picker implementation was deleted.
+- Agent Skill source clarified: the up-to-date `design-web` TanStack Intent
+  skill is shipped inside `@partner-up-dev/design-web@0.4.0` under
+  `skills/design-web`. Agents should load it with `pnpm dlx
+  @tanstack/intent@latest load @partner-up-dev/design-web#design-web` after
+  package updates instead of hand-editing or relying on stale local copies under
+  `~/.codex/skills`.
 - Next slice direction: migrate overlay primitives directly to package
   components: `Modal` -> `PuModal`, `ConfirmDialog` -> `PuDialog` or
   `PuModal` + `PuButton` depending on package API fit, and `BottomDrawer` ->
@@ -152,6 +158,14 @@ Baseline per component slice:
   passed; token lint passed; frontend unit tests passed, 26 files / 117 tests;
   migrated wrapper import scan returned no usage-site references; `git
   diff --check` passed.
+- Agent Skill verification on 2026-06-13: `pnpm dlx
+  @tanstack/intent@latest list --json` found
+  `@partner-up-dev/design-web#design-web` from the installed `0.4.0` package;
+  `pnpm dlx @tanstack/intent@latest load @partner-up-dev/design-web#design-web`
+  returned the updated skill with `PuDialog`; `pnpm dlx
+  @tanstack/intent@latest validate
+  apps/frontend/node_modules/@partner-up-dev/design-web/skills/design-web`
+  passed.
 - Browser smoke with Edge through Playwright on `http://localhost:4001/` and
   `/pr/1` - passed. Evidence:
   `evidence/home-footer-mobile.png` and `evidence/pr-footer-mobile.png`.
diff --git a/tasks/design-web-package-integration/component-migration/90-discussion-log.md b/tasks/design-web-package-integration/component-migration/90-discussion-log.md
index 251977774..620152bdd 100644
--- a/tasks/design-web-package-integration/component-migration/90-discussion-log.md
+++ b/tasks/design-web-package-integration/component-migration/90-discussion-log.md
@@ -170,3 +170,15 @@
 - Post-`WheelPicker` verification passed: frontend build, token lint, frontend
   unit tests (26 files / 117 tests), migrated wrapper import scan, and
   `git diff --check`.
+- User rejected hand-editing the stale global Agent Skill copy under
+  `~/.codex/skills/design-web` and asked for the TanStack Intent upgrade path.
+- Investigation confirmed `@partner-up-dev/design-web@0.4.0` is
+  intent-enabled and publishes `skills/design-web` inside the package. The
+  package-shipped skill includes `PuDialog`, `PuLoadingState`, `PuSpinner`,
+  `PuSnackbar`, and updated overlay guidance; the stale global copy does not.
+- Durable docs now record the package-update workflow: update the package,
+  then use `pnpm dlx @tanstack/intent@latest list --json`, `pnpm dlx
+  @tanstack/intent@latest load @partner-up-dev/design-web#design-web`, and
+  `pnpm dlx @tanstack/intent@latest validate
+  apps/frontend/node_modules/@partner-up-dev/design-web/skills/design-web`.
+  The repository does not add an `intent-skills` managed block.
diff --git a/tasks/dev-server-ensure-entry/README.md b/tasks/dev-server-ensure-entry/README.md
new file mode 100644
index 000000000..4af432a60
--- /dev/null
+++ b/tasks/dev-server-ensure-entry/README.md
@@ -0,0 +1,51 @@
+# Dev Server Ensure Entry
+
+## Objective & Hypothesis
+
+Add a single agent-facing entry that ensures the frontend and backend development
+servers are available without encouraging agents to start duplicate dev servers.
+
+Hypothesis: the durable default should remain portless-managed. A thin ensure
+wrapper should prefer `portless.json` app identities (`partner-up`,
+`api.partner-up`) over fixed numeric ports.
+
+## Guardrails Touched
+
+- Root operational guidance: `AGENTS.md`
+- Local runtime truth: `docs/40-deployment/environments.md`
+- Cross-unit local development contract: `docs/20-product-tdd/cross-unit-contracts.md`
+- Script/package entrypoints: `scripts/`, root `package.json`
+
+## Current Understanding
+
+- `pnpm dev:portless` is already the durable default full-stack entry.
+- `portless list` currently shows both active routes:
+  - `https://partner-up.localhost`
+  - `https://api.partner-up.localhost`
+- Existing `scripts/start-dev-server-if-port-free.ps1` uses fixed ports
+  `4001` and `4002`, which is compatibility behavior rather than the current
+  default portless workflow.
+- `portless` is available globally in this environment, not as a project
+  dependency. An ensure script should fail with a direct diagnostic if the
+  command is missing.
+
+## Proposed State Diff
+
+- From: agents are told to use `pnpm dev:portless`, and may still manually start
+  frontend/backend dev commands when they only need servers available.
+- To: agents are told to run a named ensure command first. The command checks
+  or starts the portless-managed frontend/backend pair and reports stable URLs.
+
+## Verification
+
+- Static: PowerShell syntax parse for `scripts/ensure-dev-servers.ps1` passed.
+- Static: `package.json` JSON parse passed.
+- Runtime, non-invasive: `pnpm dev:ensure` reported existing routes and exited
+  without starting duplicate services.
+
+## Outcome
+
+- Added `scripts/ensure-dev-servers.ps1`.
+- Added root script `pnpm dev:ensure`.
+- Updated root agent guidance and durable local runtime docs to use the ensure
+  entry before browser/manual validation.

From 95b383d1b6922464129b855c6530a8ed1def5e61 Mon Sep 17 00:00:00 2001
From: Lanzhijiang <lanzhijiang@foxmail.com>
Date: Sat, 13 Jun 2026 21:18:29 +0800
Subject: [PATCH 04/94] refactor(frontend): migrate overlay primitives to
 design package

---
 .../sections/AnchorEventTimeSection.vue       |   70 +-
 .../admin/ui/pr/views/AdminPRBasicView.vue    |  785 ++++++-------
 .../ui/ordering/OrderingPriceDetailDrawer.vue |   21 +-
 .../form-mode/FormModePreferenceControl.vue   |   32 +-
 .../ui/sections/LandingWebPageQrModal.vue     |    9 +-
 .../location/ui/LocationPickerModal.vue       |    6 +-
 .../src/domains/pr/ui/forms/PREditor.vue      |   65 +-
 .../pr/ui/modals/PRLocationGalleryModal.vue   |    6 +-
 .../domains/pr/ui/modals/PRRosterModal.vue    |   10 +-
 .../domains/pr/ui/modals/PRRouteMapModal.vue  |   11 +-
 .../pr/ui/sections/PRBetaGroupAction.vue      |   12 +-
 .../ui/sections/PRCheckInFeedbackActions.vue  |    9 +-
 .../domains/pr/ui/sections/PRExitAction.vue   |   16 +-
 .../sections/PRFeedbackQuestionnaireModal.vue |    6 +-
 .../domains/pr/ui/sections/PRJoinAction.vue   |   33 +-
 .../sections/PRParticipationActions.test.ts   |   12 -
 .../domains/pr/ui/sections/PRShareAction.vue  |   19 +-
 .../ui/sections/PRUtilityComponents.test.ts   |   58 +-
 .../pr/ui/sections/PRWaitlistActions.vue      |   36 +-
 .../src/domains/route/ui/RouteEditor.vue      |   16 +-
 .../ui/sections/SupportContactQrModal.vue     |   19 +-
 apps/frontend/src/lib/body-scroll-lock.ts     |    1 -
 apps/frontend/src/pages/AboutPage.vue         |   15 +-
 .../src/pages/AnchorEventLandingPage.vue      |   57 +-
 apps/frontend/src/pages/EventPRSearchPage.vue | 1005 ++++++++---------
 .../src/pages/OrderingSupportPage.vue         |   28 +-
 apps/frontend/src/pages/PRPage.vue            |   61 +-
 .../wechat/WeChatOAuthLoginModal.vue          |   26 +-
 apps/frontend/src/shared/ui/AGENTS.md         |    6 +-
 .../src/shared/ui/overlay/BottomDrawer.vue    |  208 ----
 .../src/shared/ui/overlay/ConfirmDialog.vue   |  118 --
 apps/frontend/src/shared/ui/overlay/Modal.vue |   96 --
 .../shared/ui/overlay/useBodyScrollLock.ts    |   56 -
 .../shared/wechat/OfficialAccountQrModal.vue  |    9 +-
 .../WeChatMiniProgramJssdkNoticeModal.vue     |   14 +-
 .../component-migration/00-control-surface.md |   34 +-
 .../component-migration/10-slice-index.md     |  124 +-
 .../component-migration/90-discussion-log.md  |   25 +-
 .../components/bottom-drawer.md               |   15 +-
 .../components/confirm-dialog.md              |   17 +-
 .../component-migration/components/modal.md   |   20 +-
 41 files changed, 1356 insertions(+), 1830 deletions(-)
 delete mode 100644 apps/frontend/src/lib/body-scroll-lock.ts
 delete mode 100644 apps/frontend/src/shared/ui/overlay/BottomDrawer.vue
 delete mode 100644 apps/frontend/src/shared/ui/overlay/ConfirmDialog.vue
 delete mode 100644 apps/frontend/src/shared/ui/overlay/Modal.vue
 delete mode 100644 apps/frontend/src/shared/ui/overlay/useBodyScrollLock.ts

diff --git a/apps/frontend/src/domains/admin/ui/anchor-event/sections/AnchorEventTimeSection.vue b/apps/frontend/src/domains/admin/ui/anchor-event/sections/AnchorEventTimeSection.vue
index e10a3d95a..31c32ffab 100644
--- a/apps/frontend/src/domains/admin/ui/anchor-event/sections/AnchorEventTimeSection.vue
+++ b/apps/frontend/src/domains/admin/ui/anchor-event/sections/AnchorEventTimeSection.vue
@@ -5,7 +5,10 @@
     data-testid="admin-anchor-event.section.time"
   >
     <BentoLayout>
-      <BentoItem :title="t('adminAnchorEvents.timePoolStrategyTitle')" span="full">
+      <BentoItem
+        :title="t('adminAnchorEvents.timePoolStrategyTitle')"
+        span="full"
+      >
         <template #actions>
           <Button
             appearance="pill"
@@ -41,7 +44,7 @@
         />
       </BentoItem>
 
-      <Modal
+      <PuModal
         :open="previewOpen"
         :title="t('adminAnchorEvents.timeWindowsPreviewTitle')"
         max-width="720px"
@@ -64,17 +67,16 @@
             {{ t("common.close") }}
           </Button>
         </div>
-      </Modal>
+      </PuModal>
     </BentoLayout>
   </section>
 </template>
 
 <script setup lang="ts">
+import { PuModal } from "@partner-up-dev/design-web";
 import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import Button from "@/shared/ui/actions/Button.vue";
-import Modal from "@/shared/ui/overlay/Modal.vue";
-import { useBodyScrollLock } from "@/shared/ui/overlay/useBodyScrollLock";
 import BentoItem from "@/domains/admin/ui/layout/BentoItem.vue";
 import BentoLayout from "@/domains/admin/ui/layout/BentoLayout.vue";
 import AnchorEventParticipationPolicyEditor from "@/domains/admin/ui/anchor-event/components/AnchorEventParticipationPolicyEditor.vue";
@@ -99,8 +101,6 @@ const form = defineModel<AnchorEventEditorForm>({ required: true });
 const { t } = useI18n();
 const previewOpen = ref(false);
 
-useBodyScrollLock(previewOpen);
-
 const normalizeNullableNonNegativeInteger = (value: unknown): number | null => {
   if (typeof value === "number" && Number.isInteger(value) && value >= 0) {
     return value;
@@ -151,35 +151,33 @@ const normalizedEarliestLeadMinutes = computed(() =>
   normalizeNullableNonNegativeInteger(form.value.earliestLeadMinutes),
 );
 
-const recurringStartRules = computed<AnchorEventRecurringStartRulePreviewInput[]>(
-  () =>
-    normalizeLines(form.value.recurringRulesText)
-      .map((line, index) => {
-        const { ruleText, description } = splitRuleDescription(line);
-        const [weekdaysRaw = "", timeOfDayRaw = ""] = ruleText.split(/\s+/, 2);
-        const weekdays = weekdaysRaw
-          .split(",")
-          .map((value) => Number(value.trim()))
-          .filter(
-            (value) => Number.isInteger(value) && value >= 0 && value <= 6,
-          );
-        const timeOfDay = timeOfDayRaw.trim();
-        if (weekdays.length === 0 || !/^\d{2}:\d{2}$/.test(timeOfDay)) {
-          return null;
-        }
-        return {
-          id: `recurring-${index + 1}`,
-          kind: "RECURRING" as const,
-          weekdays,
-          timeOfDay,
-          description,
-        };
-      })
-      .filter(
-        (
-          value,
-        ): value is AnchorEventRecurringStartRulePreviewInput => value !== null,
-      ),
+const recurringStartRules = computed<
+  AnchorEventRecurringStartRulePreviewInput[]
+>(() =>
+  normalizeLines(form.value.recurringRulesText)
+    .map((line, index) => {
+      const { ruleText, description } = splitRuleDescription(line);
+      const [weekdaysRaw = "", timeOfDayRaw = ""] = ruleText.split(/\s+/, 2);
+      const weekdays = weekdaysRaw
+        .split(",")
+        .map((value) => Number(value.trim()))
+        .filter((value) => Number.isInteger(value) && value >= 0 && value <= 6);
+      const timeOfDay = timeOfDayRaw.trim();
+      if (weekdays.length === 0 || !/^\d{2}:\d{2}$/.test(timeOfDay)) {
+        return null;
+      }
+      return {
+        id: `recurring-${index + 1}`,
+        kind: "RECURRING" as const,
+        weekdays,
+        timeOfDay,
+        description,
+      };
+    })
+    .filter(
+      (value): value is AnchorEventRecurringStartRulePreviewInput =>
+        value !== null,
+    ),
 );
 </script>
 
diff --git a/apps/frontend/src/domains/admin/ui/pr/views/AdminPRBasicView.vue b/apps/frontend/src/domains/admin/ui/pr/views/AdminPRBasicView.vue
index 1ea72572c..b3476106a 100644
--- a/apps/frontend/src/domains/admin/ui/pr/views/AdminPRBasicView.vue
+++ b/apps/frontend/src/domains/admin/ui/pr/views/AdminPRBasicView.vue
@@ -16,392 +16,428 @@
 
     <template #main>
       <div class="stack">
-      <PuLoadingState
-        v-if="workspaceQuery.isLoading.value"
-        :message="t('common.loading')"
-      />
-      <ErrorToast
-        v-else-if="workspaceQuery.error.value"
-        :message="workspaceQuery.error.value.message"
-        persistent
-      />
-
-      <template v-else>
-        <datalist id="admin-pr-type-options">
-          <option
-            v-for="typeOption in workspace?.typeOptions ?? []"
-            :key="typeOption.type"
-            :value="typeOption.type"
-          >
-            {{ typeOption.eventTitle }}
-          </option>
-        </datalist>
-        <datalist id="admin-pr-filter-location-options">
-          <option
-            v-for="locationOption in filterLocationOptions"
-            :key="locationOption"
-            :value="locationOption"
-          />
-        </datalist>
-        <datalist id="admin-pr-form-location-options">
-          <option
-            v-for="locationOption in formLocationOptions"
-            :key="locationOption"
-            :value="locationOption"
-          />
-        </datalist>
-
-        <BentoLayout class="pr-workspace-layout">
-          <BentoItem :title="t('adminPR.prsTitle')" span="full">
-            <div class="stack">
-              <div class="section-header">
-                <p class="hint">
-                  {{
-                    t("adminPR.filteredCountLabel", {
-                      count: filteredPRs.length,
-                    })
-                  }}
-                </p>
-              </div>
-
-              <div v-if="filteredPRs.length === 0" class="hint">
-                {{ t("adminPR.emptySearchResults") }}
-              </div>
+        <PuLoadingState
+          v-if="workspaceQuery.isLoading.value"
+          :message="t('common.loading')"
+        />
+        <ErrorToast
+          v-else-if="workspaceQuery.error.value"
+          :message="workspaceQuery.error.value.message"
+          persistent
+        />
 
-              <div
-                v-else
-                class="pr-result-list pr-result-list--grid pr-result-list--scroll"
-              >
-                <ChoiceCard
-                  v-for="pr in filteredPRs"
-                  :key="pr.prId"
-                  class="pr-result-card"
-                  :active="!isCreatingPR && selectedPRId === pr.prId"
-                  @click="selectExistingPR(pr.prId)"
+        <template v-else>
+          <datalist id="admin-pr-type-options">
+            <option
+              v-for="typeOption in workspace?.typeOptions ?? []"
+              :key="typeOption.type"
+              :value="typeOption.type"
+            >
+              {{ typeOption.eventTitle }}
+            </option>
+          </datalist>
+          <datalist id="admin-pr-filter-location-options">
+            <option
+              v-for="locationOption in filterLocationOptions"
+              :key="locationOption"
+              :value="locationOption"
+            />
+          </datalist>
+          <datalist id="admin-pr-form-location-options">
+            <option
+              v-for="locationOption in formLocationOptions"
+              :key="locationOption"
+              :value="locationOption"
+            />
+          </datalist>
+
+          <BentoLayout class="pr-workspace-layout">
+            <BentoItem :title="t('adminPR.prsTitle')" span="full">
+              <div class="stack">
+                <div class="section-header">
+                  <p class="hint">
+                    {{
+                      t("adminPR.filteredCountLabel", {
+                        count: filteredPRs.length,
+                      })
+                    }}
+                  </p>
+                </div>
+
+                <div v-if="filteredPRs.length === 0" class="hint">
+                  {{ t("adminPR.emptySearchResults") }}
+                </div>
+
+                <div
+                  v-else
+                  class="pr-result-list pr-result-list--grid pr-result-list--scroll"
                 >
-                  <span>
-                    {{ pr.title || pr.placeDisplayName || `#${pr.prId}` }}
-                  </span>
-                  <small>#{{ pr.prId }} / {{ pr.status }}</small>
-                  <small>{{ formatWindow(pr.time) }}</small>
-                </ChoiceCard>
+                  <ChoiceCard
+                    v-for="pr in filteredPRs"
+                    :key="pr.prId"
+                    class="pr-result-card"
+                    :active="!isCreatingPR && selectedPRId === pr.prId"
+                    @click="selectExistingPR(pr.prId)"
+                  >
+                    <span>
+                      {{ pr.title || pr.placeDisplayName || `#${pr.prId}` }}
+                    </span>
+                    <small>#{{ pr.prId }} / {{ pr.status }}</small>
+                    <small>{{ formatWindow(pr.time) }}</small>
+                  </ChoiceCard>
+                </div>
               </div>
-            </div>
-          </BentoItem>
-
-          <BentoItem
-            id="pr-basic"
-            :title="t('adminPR.prFormTitle')"
-            span="full"
-            data-testid="admin-pr.section.basic"
-          >
-            <div class="stack">
-              <label class="field">
-                <span class="field-label">{{ t("adminPR.prTitleLabel") }}</span>
-                <input v-model="prForm.title" class="field-input" />
-              </label>
-
-              <label class="field">
-                <span class="field-label">{{ t("adminPR.prTypeLabel") }}</span>
-                <input
-                  v-model="prForm.type"
-                  class="field-input"
-                  list="admin-pr-type-options"
-                />
-              </label>
+            </BentoItem>
+
+            <BentoItem
+              id="pr-basic"
+              :title="t('adminPR.prFormTitle')"
+              span="full"
+              data-testid="admin-pr.section.basic"
+            >
+              <div class="stack">
+                <label class="field">
+                  <span class="field-label">{{
+                    t("adminPR.prTitleLabel")
+                  }}</span>
+                  <input v-model="prForm.title" class="field-input" />
+                </label>
 
-              <div class="grid-2">
                 <label class="field">
-                  <span class="field-label">{{ t("adminPR.prTimeStartLabel") }}</span>
+                  <span class="field-label">{{
+                    t("adminPR.prTypeLabel")
+                  }}</span>
                   <input
-                    v-model="prForm.startAt"
+                    v-model="prForm.type"
                     class="field-input"
-                    type="datetime-local"
+                    list="admin-pr-type-options"
                   />
                 </label>
+
+                <div class="grid-2">
+                  <label class="field">
+                    <span class="field-label">{{
+                      t("adminPR.prTimeStartLabel")
+                    }}</span>
+                    <input
+                      v-model="prForm.startAt"
+                      class="field-input"
+                      type="datetime-local"
+                    />
+                  </label>
+                  <label class="field">
+                    <span class="field-label">{{
+                      t("adminPR.prTimeEndLabel")
+                    }}</span>
+                    <input
+                      v-model="prForm.endAt"
+                      class="field-input"
+                      type="datetime-local"
+                    />
+                  </label>
+                </div>
+
+                <PRPlaceModeField
+                  v-model="prPlaceValue"
+                  :label="t('partnerRequestForm.placeMode')"
+                  :aria-label="t('partnerRequestForm.placeModeAria')"
+                  :location-label="t('adminPR.prLocationLabel')"
+                  :location-placeholder="
+                    t('partnerRequestForm.locationPlaceholder')
+                  "
+                  location-options-list-id="admin-pr-form-location-options"
+                  :location-error="locationValidationMessage ?? undefined"
+                  :route-error="routeValidationMessage ?? undefined"
+                  test-id-prefix="admin-pr.form.place"
+                />
+
+                <label class="field">
+                  <span class="field-label">
+                    {{ t("adminPR.prMeetingPointDescriptionLabel") }}
+                  </span>
+                  <textarea
+                    v-model="prForm.meetingPointDescription"
+                    class="field-input field-textarea"
+                  ></textarea>
+                </label>
+
                 <label class="field">
-                  <span class="field-label">{{ t("adminPR.prTimeEndLabel") }}</span>
+                  <span class="field-label">
+                    {{ t("adminPR.prMeetingPointImageUrlLabel") }}
+                  </span>
                   <input
-                    v-model="prForm.endAt"
+                    v-model="prForm.meetingPointImageUrl"
                     class="field-input"
-                    type="datetime-local"
                   />
                 </label>
-              </div>
 
-              <PRPlaceModeField
-                v-model="prPlaceValue"
-                :label="t('partnerRequestForm.placeMode')"
-                :aria-label="t('partnerRequestForm.placeModeAria')"
-                :location-label="t('adminPR.prLocationLabel')"
-                :location-placeholder="t('partnerRequestForm.locationPlaceholder')"
-                location-options-list-id="admin-pr-form-location-options"
-                :location-error="locationValidationMessage ?? undefined"
-                :route-error="routeValidationMessage ?? undefined"
-                test-id-prefix="admin-pr.form.place"
-              />
-
-              <label class="field">
-                <span class="field-label">
-                  {{ t("adminPR.prMeetingPointDescriptionLabel") }}
-                </span>
-                <textarea
-                  v-model="prForm.meetingPointDescription"
-                  class="field-input field-textarea"
-                ></textarea>
-              </label>
-
-              <label class="field">
-                <span class="field-label">
-                  {{ t("adminPR.prMeetingPointImageUrlLabel") }}
-                </span>
-                <input
-                  v-model="prForm.meetingPointImageUrl"
-                  class="field-input"
+                <div class="grid-2">
+                  <label class="field">
+                    <span class="field-label">{{
+                      t("adminPR.prMinPartnersLabel")
+                    }}</span>
+                    <input
+                      v-model.number="prForm.minPartners"
+                      class="field-input"
+                      type="number"
+                      min="1"
+                    />
+                  </label>
+                  <label class="field">
+                    <span class="field-label">{{
+                      t("adminPR.prMaxPartnersLabel")
+                    }}</span>
+                    <input
+                      v-model.number="prForm.maxPartners"
+                      class="field-input"
+                      type="number"
+                      min="2"
+                    />
+                  </label>
+                </div>
+
+                <p v-if="prBoundsValidationMessage" class="error-message">
+                  {{ prBoundsValidationMessage }}
+                </p>
+                <p v-if="timeValidationMessage" class="error-message">
+                  {{ timeValidationMessage }}
+                </p>
+
+                <TimelinePolicyPicker
+                  v-model="prPolicyValue"
+                  :title="t('adminPR.participationPolicyTitle')"
+                  :description="t('adminPR.participationPolicyDescription')"
+                  :event-start-at="resolvedTimeWindow[0]"
+                  :validation-message="policyValidationMessage"
                 />
-              </label>
 
-              <div class="grid-2">
                 <label class="field">
-                  <span class="field-label">{{ t("adminPR.prMinPartnersLabel") }}</span>
-                  <input
-                    v-model.number="prForm.minPartners"
-                    class="field-input"
-                    type="number"
-                    min="1"
-                  />
+                  <span class="field-label">{{
+                    t("adminPR.prPreferencesLabel")
+                  }}</span>
+                  <input v-model="prForm.preferencesText" class="field-input" />
                 </label>
+
                 <label class="field">
-                  <span class="field-label">{{ t("adminPR.prMaxPartnersLabel") }}</span>
-                  <input
-                    v-model.number="prForm.maxPartners"
-                    class="field-input"
-                    type="number"
-                    min="2"
-                  />
+                  <span class="field-label">{{
+                    t("adminPR.prNotesLabel")
+                  }}</span>
+                  <textarea
+                    v-model="prForm.notes"
+                    class="field-input field-textarea"
+                  ></textarea>
                 </label>
-              </div>
 
-              <p v-if="prBoundsValidationMessage" class="error-message">
-                {{ prBoundsValidationMessage }}
-              </p>
-              <p v-if="timeValidationMessage" class="error-message">
-                {{ timeValidationMessage }}
-              </p>
-
-              <TimelinePolicyPicker
-                v-model="prPolicyValue"
-                :title="t('adminPR.participationPolicyTitle')"
-                :description="t('adminPR.participationPolicyDescription')"
-                :event-start-at="resolvedTimeWindow[0]"
-                :validation-message="policyValidationMessage"
-              />
-
-              <label class="field">
-                <span class="field-label">{{ t("adminPR.prPreferencesLabel") }}</span>
-                <input v-model="prForm.preferencesText" class="field-input" />
-              </label>
-
-              <label class="field">
-                <span class="field-label">{{ t("adminPR.prNotesLabel") }}</span>
-                <textarea
-                  v-model="prForm.notes"
-                  class="field-input field-textarea"
-                ></textarea>
-              </label>
-
-              <PRJoinGateConfigEditor
-                v-model="prForm.joinGateConfig"
-                source="PR"
-              />
-
-              <label class="field">
-                <span class="field-label">{{ t("adminPR.prStatusLabel") }}</span>
-                <select v-model="prForm.status" class="field-input">
-                  <option value="OPEN">OPEN</option>
-                  <option value="READY">READY</option>
-                  <option value="ACTIVE">ACTIVE</option>
-                  <option value="CLOSED">CLOSED</option>
-                </select>
-              </label>
-
-              <label class="field">
-                <span class="field-label">{{ t("adminPR.prVisibilityLabel") }}</span>
-                <select v-model="prForm.visibilityStatus" class="field-input">
-                  <option value="VISIBLE">
-                    {{ t("adminPR.visibilityVisible") }}
-                  </option>
-                  <option value="HIDDEN">
-                    {{ t("adminPR.visibilityHidden") }}
-                  </option>
-                </select>
-              </label>
-
-              <p v-if="matchedTypeOption" class="hint">
-                {{
-                  t("adminPR.typeDefaultsHint", {
-                    title: matchedTypeOption.eventTitle,
-                  })
-                }}
-              </p>
-
-              <div v-if="!isCreatingPR && selectedPR !== null" class="stack stack--tight">
+                <PRJoinGateConfigEditor
+                  v-model="prForm.joinGateConfig"
+                  source="PR"
+                />
+
                 <label class="field">
-                  <span class="field-label">
-                    {{ t("adminPR.prFeedbackQuestionnaireInstanceLabel") }}
-                  </span>
-                  <select
-                    class="field-input"
-                    :value="prForm.feedbackQuestionnaireInstanceId ?? ''"
-                    data-testid="admin-pr.feedback-instance"
-                    @change="
-                      prForm.feedbackQuestionnaireInstanceId =
-                        parseNullableId($event)
-                    "
-                  >
-                    <option value="">{{ t("adminPR.noFeedbackQuestionnaire") }}</option>
-                    <option
-                      v-for="instance in feedbackQuestionnaireInstances"
-                      :key="instance.id"
-                      :value="instance.id"
-                    >
-                      #{{ instance.id }} / {{ instance.title }}
-                    </option>
+                  <span class="field-label">{{
+                    t("adminPR.prStatusLabel")
+                  }}</span>
+                  <select v-model="prForm.status" class="field-input">
+                    <option value="OPEN">OPEN</option>
+                    <option value="READY">READY</option>
+                    <option value="ACTIVE">ACTIVE</option>
+                    <option value="CLOSED">CLOSED</option>
                   </select>
                 </label>
-                <Button
-                  appearance="pill"
-                  tone="outline"
-                  size="sm"
-                  type="button"
-                  :disabled="
-                    selectedPRId === null ||
-                    prFeedbackQuestionnaireUseCase.isPending.updateInstance.value
-                  "
-                  data-testid="admin-pr.feedback-instance.save"
-                  @click="handleSavePRFeedbackQuestionnaireInstance"
-                >
-                  {{
-                    prFeedbackQuestionnaireUseCase.isPending.updateInstance.value
-                      ? t("adminPR.saving")
-                      : t("adminPR.saveFeedbackQuestionnaireInstanceAction")
-                  }}
-                </Button>
 
                 <label class="field">
-                  <span class="field-label">
-                    {{ t("adminPR.prFeedbackQuestionnaireTemplateLabel") }}
-                  </span>
-                  <select
-                    class="field-input"
-                    :value="mountFeedbackQuestionnaireTemplateId ?? ''"
-                    data-testid="admin-pr.feedback-template"
-                    @change="
-                      mountFeedbackQuestionnaireTemplateId =
-                        parseNullableId($event)
-                    "
-                  >
-                    <option value="">{{ t("adminPR.noFeedbackQuestionnaire") }}</option>
-                    <option
-                      v-for="template in feedbackQuestionnaireTemplates"
-                      :key="template.id"
-                      :value="template.id"
-                    >
-                      {{ template.key }}@{{ template.version }} / {{ template.title }}
+                  <span class="field-label">{{
+                    t("adminPR.prVisibilityLabel")
+                  }}</span>
+                  <select v-model="prForm.visibilityStatus" class="field-input">
+                    <option value="VISIBLE">
+                      {{ t("adminPR.visibilityVisible") }}
+                    </option>
+                    <option value="HIDDEN">
+                      {{ t("adminPR.visibilityHidden") }}
                     </option>
                   </select>
                 </label>
-                <Button
-                  appearance="pill"
-                  tone="outline"
-                  size="sm"
-                  type="button"
-                  :disabled="
-                    selectedPRId === null ||
-                    mountFeedbackQuestionnaireTemplateId === null ||
-                    prFeedbackQuestionnaireUseCase.isPending.materialize.value
-                  "
-                  data-testid="admin-pr.feedback-template.mount"
-                  @click="handleMaterializePRFeedbackQuestionnaireInstance"
-                >
-                  {{
-                    prFeedbackQuestionnaireUseCase.isPending.materialize.value
-                      ? t("adminPR.saving")
-                      : t("adminPR.mountFeedbackQuestionnaireTemplateAction")
-                  }}
-                </Button>
-              </div>
 
-              <div class="actions actions--inline">
-                <Button
-                  appearance="pill"
-                  size="sm"
-                  type="button"
-                  :disabled="
-                    isSavingPR ||
-                    isDeletingPR ||
-                    Boolean(prBoundsValidationMessage) ||
-                    Boolean(timeValidationMessage) ||
-                    Boolean(policyValidationMessage) ||
-                    Boolean(prPlaceValidationMessage) ||
-                    prForm.type.trim().length === 0
-                  "
-                  @click="handleSavePR"
-                >
+                <p v-if="matchedTypeOption" class="hint">
                   {{
-                    isSavingPR
-                      ? t("adminPR.saving")
-                      : isCreatingPR
-                        ? t("adminPR.createPRAction")
-                        : t("adminPR.savePRAction")
+                    t("adminPR.typeDefaultsHint", {
+                      title: matchedTypeOption.eventTitle,
+                    })
                   }}
-                </Button>
-                <Button
+                </p>
+
+                <div
                   v-if="!isCreatingPR && selectedPR !== null"
-                  appearance="pill"
-                  tone="danger"
-                  size="sm"
-                  type="button"
-                  :disabled="isSavingPR || isDeletingPR"
-                  @click="requestDeletePR(selectedPR.prId)"
+                  class="stack stack--tight"
                 >
-                  {{
-                    isDeletingPR
-                      ? t("adminPR.deletingPR")
-                      : t("adminPR.deletePRAction")
-                  }}
-                </Button>
+                  <label class="field">
+                    <span class="field-label">
+                      {{ t("adminPR.prFeedbackQuestionnaireInstanceLabel") }}
+                    </span>
+                    <select
+                      class="field-input"
+                      :value="prForm.feedbackQuestionnaireInstanceId ?? ''"
+                      data-testid="admin-pr.feedback-instance"
+                      @change="
+                        prForm.feedbackQuestionnaireInstanceId =
+                          parseNullableId($event)
+                      "
+                    >
+                      <option value="">
+                        {{ t("adminPR.noFeedbackQuestionnaire") }}
+                      </option>
+                      <option
+                        v-for="instance in feedbackQuestionnaireInstances"
+                        :key="instance.id"
+                        :value="instance.id"
+                      >
+                        #{{ instance.id }} / {{ instance.title }}
+                      </option>
+                    </select>
+                  </label>
+                  <Button
+                    appearance="pill"
+                    tone="outline"
+                    size="sm"
+                    type="button"
+                    :disabled="
+                      selectedPRId === null ||
+                      prFeedbackQuestionnaireUseCase.isPending.updateInstance
+                        .value
+                    "
+                    data-testid="admin-pr.feedback-instance.save"
+                    @click="handleSavePRFeedbackQuestionnaireInstance"
+                  >
+                    {{
+                      prFeedbackQuestionnaireUseCase.isPending.updateInstance
+                        .value
+                        ? t("adminPR.saving")
+                        : t("adminPR.saveFeedbackQuestionnaireInstanceAction")
+                    }}
+                  </Button>
+
+                  <label class="field">
+                    <span class="field-label">
+                      {{ t("adminPR.prFeedbackQuestionnaireTemplateLabel") }}
+                    </span>
+                    <select
+                      class="field-input"
+                      :value="mountFeedbackQuestionnaireTemplateId ?? ''"
+                      data-testid="admin-pr.feedback-template"
+                      @change="
+                        mountFeedbackQuestionnaireTemplateId =
+                          parseNullableId($event)
+                      "
+                    >
+                      <option value="">
+                        {{ t("adminPR.noFeedbackQuestionnaire") }}
+                      </option>
+                      <option
+                        v-for="template in feedbackQuestionnaireTemplates"
+                        :key="template.id"
+                        :value="template.id"
+                      >
+                        {{ template.key }}@{{ template.version }} /
+                        {{ template.title }}
+                      </option>
+                    </select>
+                  </label>
+                  <Button
+                    appearance="pill"
+                    tone="outline"
+                    size="sm"
+                    type="button"
+                    :disabled="
+                      selectedPRId === null ||
+                      mountFeedbackQuestionnaireTemplateId === null ||
+                      prFeedbackQuestionnaireUseCase.isPending.materialize.value
+                    "
+                    data-testid="admin-pr.feedback-template.mount"
+                    @click="handleMaterializePRFeedbackQuestionnaireInstance"
+                  >
+                    {{
+                      prFeedbackQuestionnaireUseCase.isPending.materialize.value
+                        ? t("adminPR.saving")
+                        : t("adminPR.mountFeedbackQuestionnaireTemplateAction")
+                    }}
+                  </Button>
+                </div>
+
+                <div class="actions actions--inline">
+                  <Button
+                    appearance="pill"
+                    size="sm"
+                    type="button"
+                    :disabled="
+                      isSavingPR ||
+                      isDeletingPR ||
+                      Boolean(prBoundsValidationMessage) ||
+                      Boolean(timeValidationMessage) ||
+                      Boolean(policyValidationMessage) ||
+                      Boolean(prPlaceValidationMessage) ||
+                      prForm.type.trim().length === 0
+                    "
+                    @click="handleSavePR"
+                  >
+                    {{
+                      isSavingPR
+                        ? t("adminPR.saving")
+                        : isCreatingPR
+                          ? t("adminPR.createPRAction")
+                          : t("adminPR.savePRAction")
+                    }}
+                  </Button>
+                  <Button
+                    v-if="!isCreatingPR && selectedPR !== null"
+                    appearance="pill"
+                    tone="danger"
+                    size="sm"
+                    type="button"
+                    :disabled="isSavingPR || isDeletingPR"
+                    @click="requestDeletePR(selectedPR.prId)"
+                  >
+                    {{
+                      isDeletingPR
+                        ? t("adminPR.deletingPR")
+                        : t("adminPR.deletePRAction")
+                    }}
+                  </Button>
+                </div>
               </div>
-            </div>
-          </BentoItem>
-        </BentoLayout>
+            </BentoItem>
+          </BentoLayout>
 
-        <ErrorToast
-          v-if="mutationErrorMessage"
-          :message="mutationErrorMessage"
-          @close="resetMutationErrors"
-        />
-      </template>
+          <ErrorToast
+            v-if="mutationErrorMessage"
+            :message="mutationErrorMessage"
+            @close="resetMutationErrors"
+          />
+        </template>
       </div>
 
-      <ConfirmDialog
+      <PuDialog
         :open="pendingDeletePRId !== null"
         :title="t('adminPR.deleteConfirmTitle')"
-        :message="
-          t('adminPR.deleteConfirmMessage', {
-            title: pendingDeletePRLabel,
-          })
-        "
         :description="t('adminPR.deleteConfirmDescription')"
-        :confirm-label="
+        :confirm-text="
           isDeletingPR ? t('adminPR.deletingPR') : t('adminPR.deletePRAction')
         "
-        confirm-tone="danger"
-        :loading="isDeletingPR"
-        :disabled="pendingDeletePRId === null"
+        tone="error"
+        :confirm-loading="isDeletingPR"
+        :confirm-disabled="pendingDeletePRId === null"
         @close="closeDeletePRConfirm"
+        @cancel="closeDeletePRConfirm"
         @confirm="confirmDeletePR"
-      />
+      >
+        <p class="dialog-message">
+          {{
+            t("adminPR.deleteConfirmMessage", {
+              title: pendingDeletePRLabel,
+            })
+          }}
+        </p>
+      </PuDialog>
     </template>
   </AdminPageScaffold>
 </template>
@@ -422,9 +458,7 @@ import { toIsoDateTime } from "@/domains/admin/use-cases/pr/prMutationInput";
 import { useAdminPRFeedbackQuestionnaire } from "@/domains/admin/use-cases/pr/useAdminPRFeedbackQuestionnaire";
 import { useSaveAdminPRBasic } from "@/domains/admin/use-cases/pr/useSaveAdminPRBasic";
 import { useAdminAccess } from "@/domains/admin/use-cases/useAdminAccess";
-import {
-  useDeleteAdminPR,
-} from "@/domains/admin/queries/useAdminPRManagement";
+import { useDeleteAdminPR } from "@/domains/admin/queries/useAdminPRManagement";
 import { validateManualPartnerBounds } from "@/lib/validation";
 import {
   clonePRRoute,
@@ -435,13 +469,12 @@ import Button from "@/shared/ui/actions/Button.vue";
 import ChoiceCard from "@/shared/ui/containers/ChoiceCard.vue";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
 import TimelinePolicyPicker from "@/shared/ui/forms/TimelinePolicyPicker.vue";
-import ConfirmDialog from "@/shared/ui/overlay/ConfirmDialog.vue";
 import PRJoinGateConfigEditor from "@/domains/pr/ui/forms/PRJoinGateConfigEditor.vue";
 import PRPlaceModeField, {
   type PRPlaceModeFieldValue,
 } from "@/domains/pr/ui/forms/PRPlaceModeField.vue";
 import type { PRJoinGateConfig, PRRoute } from "@partner-up-dev/backend";
-import { PuLoadingState } from "@partner-up-dev/design-web";
+import { PuLoadingState, PuDialog } from "@partner-up-dev/design-web";
 
 type PRForm = {
   title: string;
@@ -569,8 +602,7 @@ const feedbackQuestionnaireTemplates = computed(
   () => workspace.value?.feedbackQuestionnaireTemplates ?? [],
 );
 const pendingDeletePR = computed<AdminPRRecord | null>(
-  () =>
-    prs.value.find((pr) => pr.prId === pendingDeletePRId.value) ?? null,
+  () => prs.value.find((pr) => pr.prId === pendingDeletePRId.value) ?? null,
 );
 const pendingDeletePRLabel = computed(() => {
   const pr = pendingDeletePR.value;
@@ -670,8 +702,7 @@ const timeValidationMessage = computed(() => {
 const prPolicyValue = computed({
   get: () => ({
     confirmationEnabled: prForm.value.confirmationEnabled,
-    confirmationStartOffsetMinutes:
-      prForm.value.confirmationStartOffsetMinutes,
+    confirmationStartOffsetMinutes: prForm.value.confirmationStartOffsetMinutes,
     confirmationEndOffsetMinutes: prForm.value.confirmationEndOffsetMinutes,
     joinLockOffsetMinutes: prForm.value.joinLockOffsetMinutes,
   }),
@@ -748,30 +779,27 @@ watch(
   { immediate: true },
 );
 
-watch(
-  [() => prForm.value.type, isCreatingPR],
-  ([type, creating]) => {
-    if (!creating) return;
-    const matched = typeOptions.value.find(
-      (option) => option.type === type.trim(),
-    );
-    if (!matched || lastAppliedType.value === matched.type) {
-      return;
-    }
-    prForm.value = {
-      ...prForm.value,
-      minPartners: matched.defaultMinPartners,
-      maxPartners: matched.defaultMaxPartners,
-      confirmationStartOffsetMinutes:
-        matched.defaultConfirmationStartOffsetMinutes,
-      confirmationEnabled: matched.defaultConfirmationEnabled,
-      confirmationEndOffsetMinutes: matched.defaultConfirmationEndOffsetMinutes,
-      joinLockOffsetMinutes: matched.defaultJoinLockOffsetMinutes,
-      joinGateConfig: matched.joinGateConfig,
-    };
-    lastAppliedType.value = matched.type;
-  },
-);
+watch([() => prForm.value.type, isCreatingPR], ([type, creating]) => {
+  if (!creating) return;
+  const matched = typeOptions.value.find(
+    (option) => option.type === type.trim(),
+  );
+  if (!matched || lastAppliedType.value === matched.type) {
+    return;
+  }
+  prForm.value = {
+    ...prForm.value,
+    minPartners: matched.defaultMinPartners,
+    maxPartners: matched.defaultMaxPartners,
+    confirmationStartOffsetMinutes:
+      matched.defaultConfirmationStartOffsetMinutes,
+    confirmationEnabled: matched.defaultConfirmationEnabled,
+    confirmationEndOffsetMinutes: matched.defaultConfirmationEndOffsetMinutes,
+    joinLockOffsetMinutes: matched.defaultJoinLockOffsetMinutes,
+    joinGateConfig: matched.joinGateConfig,
+  };
+  lastAppliedType.value = matched.type;
+});
 
 const parseNullableId = (event: Event): number | null => {
   const target = event.target as HTMLSelectElement | null;
@@ -851,12 +879,13 @@ const handleMaterializePRFeedbackQuestionnaireInstance = async () => {
   }
 
   try {
-    const result =
-      await prFeedbackQuestionnaireUseCase.materializeFromTemplate({
+    const result = await prFeedbackQuestionnaireUseCase.materializeFromTemplate(
+      {
         prId: selectedPRId.value,
         feedbackQuestionnaireTemplateId:
           mountFeedbackQuestionnaireTemplateId.value,
-      });
+      },
+    );
     if (!result) return;
     prForm.value = {
       ...prForm.value,
@@ -894,8 +923,8 @@ const handleSavePR = async () => {
         current: {
           prId: selectedPRId.value,
           status: selectedPR.value.status as PRForm["status"],
-          visibilityStatus:
-            selectedPR.value.visibilityStatus as PRForm["visibilityStatus"],
+          visibilityStatus: selectedPR.value
+            .visibilityStatus as PRForm["visibilityStatus"],
         },
         draft: prForm.value,
       });
diff --git a/apps/frontend/src/domains/commerce/ui/ordering/OrderingPriceDetailDrawer.vue b/apps/frontend/src/domains/commerce/ui/ordering/OrderingPriceDetailDrawer.vue
index 161a2fa44..eaa678812 100644
--- a/apps/frontend/src/domains/commerce/ui/ordering/OrderingPriceDetailDrawer.vue
+++ b/apps/frontend/src/domains/commerce/ui/ordering/OrderingPriceDetailDrawer.vue
@@ -1,12 +1,15 @@
 <template>
-  <BottomDrawer
-    :open="open"
+  <PuDrawer
+    :visible="open"
     title="价格明细"
     max-width="44rem"
-    @close="$emit('close')"
+    @close="emit('close')"
   >
     <div class="ordering-price-detail" :data-testid="dataTestid">
-      <div v-if="explanations.length === 0" class="ordering-price-detail__empty">
+      <div
+        v-if="explanations.length === 0"
+        class="ordering-price-detail__empty"
+      >
         暂无可展示的价格明细。
       </div>
       <div
@@ -18,14 +21,16 @@
           <strong>{{ explanation.label }}</strong>
           <span>{{ explanation.description }}</span>
         </div>
-        <b>{{ formatFen(explanation.resultAmountFen ?? explanation.deltaFen) }}</b>
+        <b>{{
+          formatFen(explanation.resultAmountFen ?? explanation.deltaFen)
+        }}</b>
       </div>
     </div>
-  </BottomDrawer>
+  </PuDrawer>
 </template>
 
 <script setup lang="ts">
-import BottomDrawer from "@/shared/ui/overlay/BottomDrawer.vue";
+import { PuDrawer } from "@partner-up-dev/design-web";
 
 type PriceExplanation = {
   sourceId: string;
@@ -41,7 +46,7 @@ defineProps<{
   dataTestid?: string;
 }>();
 
-defineEmits<{
+const emit = defineEmits<{
   close: [];
 }>();
 
diff --git a/apps/frontend/src/domains/event/ui/controls/form-mode/FormModePreferenceControl.vue b/apps/frontend/src/domains/event/ui/controls/form-mode/FormModePreferenceControl.vue
index 0887b642b..b776f768a 100644
--- a/apps/frontend/src/domains/event/ui/controls/form-mode/FormModePreferenceControl.vue
+++ b/apps/frontend/src/domains/event/ui/controls/form-mode/FormModePreferenceControl.vue
@@ -24,10 +24,10 @@
       {{ preferenceSubmissionMessage }}
     </p>
 
-    <BottomDrawer
-      :open="preferenceDrawerOpen"
+    <PuDrawer
+      v-model:visible="preferenceDrawerOpen"
       :title="preferenceDrawerTitle"
-      min-height="40vh"
+      height="40vh"
       @close="handlePreferenceDrawerClose"
     >
       <div v-if="activeDrawerCell" class="preference-drawer">
@@ -133,7 +133,7 @@
           </Button>
         </div>
       </template>
-    </BottomDrawer>
+    </PuDrawer>
   </section>
 </template>
 
@@ -147,11 +147,13 @@ import {
 } from "@/domains/event/model/form-mode";
 import { useAnchorEventPreferenceTagSubmissions } from "@/domains/event/queries/useAnchorEventPreferenceTagSubmissions";
 import Button from "@/shared/ui/actions/Button.vue";
-import BottomDrawer from "@/shared/ui/overlay/BottomDrawer.vue";
-import { PuCell } from "@partner-up-dev/design-web";
+import {
+  PuCell,
+  PuDrawer,
+  type PuDrawerCloseEvent,
+} from "@partner-up-dev/design-web";
 
 type FormModePresetTag = AnchorEventFormModeResponse["presetTags"][number];
-type BottomDrawerCloseReason = "backdrop" | "close-button" | "escape";
 type PreferenceCell =
   | {
       key: string;
@@ -385,10 +387,10 @@ const closePreferenceDrawer = () => {
   drawerCustomTagMessage.value = null;
 };
 
-const handlePreferenceDrawerClose = async (
-  reason: BottomDrawerCloseReason,
-): Promise<void> => {
-  if (reason === "backdrop") {
+const handlePreferenceDrawerClose = async ({
+  reason,
+}: PuDrawerCloseEvent): Promise<void> => {
+  if (reason === "overlay") {
     await handleSavePreferenceDrawer();
     return;
   }
@@ -641,7 +643,13 @@ const handleSavePreferenceDrawer = async () => {
   display: inline-flex;
   align-items: stretch;
   gap: calc(var(--sys-spacing-xsmall) / 2);
-  min-width: calc(calc(var(--sys-spacing-large) + var(--sys-spacing-small) + var(--sys-spacing-xsmall)) + var(--sys-spacing-large));
+  min-width: calc(
+    calc(
+        var(--sys-spacing-large) + var(--sys-spacing-small) +
+          var(--sys-spacing-xsmall)
+      ) +
+      var(--sys-spacing-large)
+  );
   border: 1px solid var(--sys-color-outline-variant);
   border-radius: var(--sys-radius-pill);
   background: var(--sys-color-surface);
diff --git a/apps/frontend/src/domains/landing/ui/sections/LandingWebPageQrModal.vue b/apps/frontend/src/domains/landing/ui/sections/LandingWebPageQrModal.vue
index 33b7e994c..f10ab76d1 100644
--- a/apps/frontend/src/domains/landing/ui/sections/LandingWebPageQrModal.vue
+++ b/apps/frontend/src/domains/landing/ui/sections/LandingWebPageQrModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <Modal
+  <PuModal
     :open="open"
     :title="t('home.bookmarkNudge.webQrModalTitle')"
     max-width="420px"
@@ -20,14 +20,13 @@
         {{ t("home.bookmarkNudge.webQrModalQrMissing") }}
       </p>
     </div>
-  </Modal>
+  </PuModal>
 </template>
 
 <script setup lang="ts">
+import { PuModal } from "@partner-up-dev/design-web";
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
-import Modal from "@/shared/ui/overlay/Modal.vue";
-import { useBodyScrollLock } from "@/shared/ui/overlay/useBodyScrollLock";
 import { useHomePageWechatQrCode } from "@/shared/wechat/useHomePageWechatQrCode";
 
 interface Props {
@@ -40,8 +39,6 @@ const emit = defineEmits<{
 }>();
 const { t } = useI18n();
 const { homePageWechatQrCodeUrl } = useHomePageWechatQrCode();
-
-useBodyScrollLock(computed(() => props.open));
 </script>
 
 <style lang="scss" scoped>
diff --git a/apps/frontend/src/domains/location/ui/LocationPickerModal.vue b/apps/frontend/src/domains/location/ui/LocationPickerModal.vue
index 44a29550a..08a2ad40d 100644
--- a/apps/frontend/src/domains/location/ui/LocationPickerModal.vue
+++ b/apps/frontend/src/domains/location/ui/LocationPickerModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <Modal
+  <PuModal
     :open="open"
     :title="title ?? t('locationPicker.title')"
     max-width="760px"
@@ -12,12 +12,12 @@
       @pick="handlePick"
       @cancel="emit('close')"
     />
-  </Modal>
+  </PuModal>
 </template>
 
 <script setup lang="ts">
+import { PuModal } from "@partner-up-dev/design-web";
 import { useI18n } from "vue-i18n";
-import Modal from "@/shared/ui/overlay/Modal.vue";
 import LocationPickerPanel from "@/domains/location/ui/LocationPickerPanel.vue";
 import type { PickedLocation } from "@/domains/location/model/location-picker";
 
diff --git a/apps/frontend/src/domains/pr/ui/forms/PREditor.vue b/apps/frontend/src/domains/pr/ui/forms/PREditor.vue
index 07d46f970..346b88d5c 100644
--- a/apps/frontend/src/domains/pr/ui/forms/PREditor.vue
+++ b/apps/frontend/src/domains/pr/ui/forms/PREditor.vue
@@ -5,7 +5,11 @@
     @submit.prevent="submitForm"
   >
     <PuLoadingState v-if="isDetailLoading" :message="t('common.loading')" />
-    <ErrorToast v-else-if="detailError" :message="detailError.message" persistent />
+    <ErrorToast
+      v-else-if="detailError"
+      :message="detailError.message"
+      persistent
+    />
 
     <PuEmptyState
       v-else-if="!hasEditableFields"
@@ -28,7 +32,9 @@
       <div v-if="canEditType" class="form-field">
         <label>
           {{ t("partnerRequestForm.type") }}
-          <span class="required">{{ t("partnerRequestForm.requiredMark") }}</span>
+          <span class="required">{{
+            t("partnerRequestForm.requiredMark")
+          }}</span>
         </label>
         <input
           v-model="typeModel"
@@ -167,14 +173,15 @@
     </template>
   </form>
 
-  <ConfirmDialog
+  <PuDialog
     :open="showReleaseConfirmDialog"
     title="确认移出冲突成员"
-    message="这次修改会让部分成员与你选择的新时间冲突。确认后，系统会将这些成员移出本次 PR，并通知他们原因。"
-    confirm-label="确认修改并移出"
-    confirm-tone="danger"
-    :loading="isPending"
+    description="这次修改会让部分成员与你选择的新时间冲突。确认后，系统会将这些成员移出本次 PR，并通知他们原因。"
+    confirm-text="确认修改并移出"
+    tone="error"
+    :confirm-loading="isPending"
     @close="closeReleaseConfirmDialog"
+    @cancel="closeReleaseConfirmDialog"
     @confirm="confirmReleaseAndSubmit"
   />
 </template>
@@ -184,10 +191,7 @@ import { computed, nextTick, ref, watch } from "vue";
 import { useRoute, useRouter, type LocationQueryValue } from "vue-router";
 import { useI18n } from "vue-i18n";
 import { useForm } from "vee-validate";
-import type {
-  PRId,
-  PRStatus,
-} from "@partner-up-dev/backend";
+import type { PRId, PRStatus } from "@partner-up-dev/backend";
 import type { PartnerRequestFormInput } from "@/lib/validation";
 import { buildPartnerRequestFormValidationSchema } from "@/lib/validation";
 import { usePRDetail } from "@/domains/pr/queries/usePRDetail";
@@ -206,13 +210,16 @@ import {
 } from "@/domains/pr/model/types";
 import { clonePRFields, parseNullableNumber } from "@/domains/pr/model/form";
 import Button from "@/shared/ui/actions/Button.vue";
-import ConfirmDialog from "@/shared/ui/overlay/ConfirmDialog.vue";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
 import { useUserSessionStore } from "@/shared/auth/useUserSessionStore";
 import { ensureAuthSessionBootstrapped } from "@/processes/auth/useAuthSessionBootstrap";
 import { trackEvent } from "@/shared/telemetry/track";
 import { formatLocalDateTimeWindowLabel } from "@/shared/datetime/formatLocalDateTime";
-import { PuEmptyState, PuLoadingState } from "@partner-up-dev/design-web";
+import {
+  PuEmptyState,
+  PuLoadingState,
+  PuDialog,
+} from "@partner-up-dev/design-web";
 
 const props = defineProps<{
   prId?: number;
@@ -353,7 +360,9 @@ const showAdvancedToggle = computed(
 );
 const isAdvancedOpen = ref(false);
 const showBodyFields = computed(
-  () => hasAdvancedFields.value && (!showAdvancedToggle.value || isAdvancedOpen.value),
+  () =>
+    hasAdvancedFields.value &&
+    (!showAdvancedToggle.value || isAdvancedOpen.value),
 );
 
 watch(
@@ -366,23 +375,17 @@ watch(
   { immediate: true },
 );
 
-const {
-  defineField,
-  values,
-  errors,
-  resetForm,
-  handleSubmit,
-  setFieldValue,
-} = useForm<PartnerRequestFormInput>({
-  validationSchema: computed(() =>
-    buildPartnerRequestFormValidationSchema({
-      validateTime: canEditTime.value,
-    }),
-  ),
-  initialValues: {
-    fields: clonePRFields(initialFields.value),
-  },
-});
+const { defineField, values, errors, resetForm, handleSubmit, setFieldValue } =
+  useForm<PartnerRequestFormInput>({
+    validationSchema: computed(() =>
+      buildPartnerRequestFormValidationSchema({
+        validateTime: canEditTime.value,
+      }),
+    ),
+    initialValues: {
+      fields: clonePRFields(initialFields.value),
+    },
+  });
 
 watch(
   initialFields,
diff --git a/apps/frontend/src/domains/pr/ui/modals/PRLocationGalleryModal.vue b/apps/frontend/src/domains/pr/ui/modals/PRLocationGalleryModal.vue
index f0b72546e..0cc9cfe97 100644
--- a/apps/frontend/src/domains/pr/ui/modals/PRLocationGalleryModal.vue
+++ b/apps/frontend/src/domains/pr/ui/modals/PRLocationGalleryModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <Modal
+  <PuModal
     :open="open"
     :title="title ?? t('prCard.locationGallery.title')"
     max-width="560px"
@@ -51,13 +51,13 @@
         </div>
       </template>
     </div>
-  </Modal>
+  </PuModal>
 </template>
 
 <script setup lang="ts">
+import { PuModal } from "@partner-up-dev/design-web";
 import { ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
-import Modal from "@/shared/ui/overlay/Modal.vue";
 import Button from "@/shared/ui/actions/Button.vue";
 
 interface PRLocationGalleryModalProps {
diff --git a/apps/frontend/src/domains/pr/ui/modals/PRRosterModal.vue b/apps/frontend/src/domains/pr/ui/modals/PRRosterModal.vue
index b81dcb327..307169c23 100644
--- a/apps/frontend/src/domains/pr/ui/modals/PRRosterModal.vue
+++ b/apps/frontend/src/domains/pr/ui/modals/PRRosterModal.vue
@@ -1,9 +1,5 @@
 <template>
-  <Modal
-    :open="open"
-    max-width="560px"
-    @close="emit('close')"
-  >
+  <PuModal :open="open" max-width="560px" @close="emit('close')">
     <div class="roster-modal">
       <PRAwarenessLane :pr-id="prId" :section="section" />
 
@@ -11,12 +7,12 @@
         {{ t("common.close") }}
       </Button>
     </div>
-  </Modal>
+  </PuModal>
 </template>
 
 <script setup lang="ts">
+import { PuModal } from "@partner-up-dev/design-web";
 import { useI18n } from "vue-i18n";
-import Modal from "@/shared/ui/overlay/Modal.vue";
 import Button from "@/shared/ui/actions/Button.vue";
 import PRAwarenessLane from "@/domains/pr/ui/sections/PRAwarenessLane.vue";
 import type { PRPartnerSectionView } from "@/domains/pr/model/types";
diff --git a/apps/frontend/src/domains/pr/ui/modals/PRRouteMapModal.vue b/apps/frontend/src/domains/pr/ui/modals/PRRouteMapModal.vue
index 9672ef465..a4b47ee23 100644
--- a/apps/frontend/src/domains/pr/ui/modals/PRRouteMapModal.vue
+++ b/apps/frontend/src/domains/pr/ui/modals/PRRouteMapModal.vue
@@ -1,10 +1,5 @@
 <template>
-  <Modal
-    :open="open"
-    :title="title"
-    max-width="760px"
-    @close="emit('close')"
-  >
+  <PuModal :open="open" :title="title" max-width="760px" @close="emit('close')">
     <div class="pr-route-map-modal">
       <RouteMap
         class="pr-route-map-modal__map"
@@ -23,14 +18,14 @@
         variant="detail"
       />
     </div>
-  </Modal>
+  </PuModal>
 </template>
 
 <script setup lang="ts">
+import { PuModal } from "@partner-up-dev/design-web";
 import RouteMap from "@/domains/route/ui/RouteMap.vue";
 import RoutePointList from "@/domains/route/ui/RoutePointList.vue";
 import type { Route } from "@/domains/route/model/route";
-import Modal from "@/shared/ui/overlay/Modal.vue";
 
 defineProps<{
   open: boolean;
diff --git a/apps/frontend/src/domains/pr/ui/sections/PRBetaGroupAction.vue b/apps/frontend/src/domains/pr/ui/sections/PRBetaGroupAction.vue
index cee1fed81..b4a150c17 100644
--- a/apps/frontend/src/domains/pr/ui/sections/PRBetaGroupAction.vue
+++ b/apps/frontend/src/domains/pr/ui/sections/PRBetaGroupAction.vue
@@ -13,25 +13,21 @@
       {{ t("prPage.betaGroupEntry.action") }}
     </Button>
 
-    <Modal
-      :open="showBetaGroupModal"
-      @close="showBetaGroupModal = false"
-    >
+    <PuModal :open="showBetaGroupModal" @close="showBetaGroupModal = false">
       <AnchorEventBetaGroupQrPanel
         :event-title="betaGroupEventTitle"
         :qr-code-url="betaGroupQrCode"
       />
-    </Modal>
+    </PuModal>
   </div>
 </template>
 
 <script setup lang="ts">
+import { PuModal } from "@partner-up-dev/design-web";
 import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import type { PRDetailView } from "@/domains/pr/model/types";
 import Button from "@/shared/ui/actions/Button.vue";
-import Modal from "@/shared/ui/overlay/Modal.vue";
-import { useBodyScrollLock } from "@/shared/ui/overlay/useBodyScrollLock";
 import AnchorEventBetaGroupQrPanel from "@/domains/event/ui/primitives/AnchorEventBetaGroupQrPanel.vue";
 import { trackEvent } from "@/shared/telemetry/track";
 
@@ -53,8 +49,6 @@ const betaGroupEventTitle = computed(
 
 const showBetaGroupEntry = computed(() => betaGroupQrCode.value !== null);
 
-useBodyScrollLock(computed(() => showBetaGroupModal.value));
-
 const handleOpenBetaGroupModal = (): void => {
   showBetaGroupModal.value = true;
   trackEvent("pr_secondary_action_click", {
diff --git a/apps/frontend/src/domains/pr/ui/sections/PRCheckInFeedbackActions.vue b/apps/frontend/src/domains/pr/ui/sections/PRCheckInFeedbackActions.vue
index 074bb6b2e..6019e5488 100644
--- a/apps/frontend/src/domains/pr/ui/sections/PRCheckInFeedbackActions.vue
+++ b/apps/frontend/src/domains/pr/ui/sections/PRCheckInFeedbackActions.vue
@@ -58,7 +58,6 @@ import { useI18n } from "vue-i18n";
 import type { FeedbackQuestionnaireAnswers } from "@partner-up-dev/backend";
 import type { PRDetailView } from "@/domains/pr/model/types";
 import Button from "@/shared/ui/actions/Button.vue";
-import { useBodyScrollLock } from "@/shared/ui/overlay/useBodyScrollLock";
 import { usePRAttendanceActions } from "@/domains/pr/use-cases/usePRAttendanceActions";
 import { useSubmitFeedbackQuestionnaire } from "@/domains/feedback/queries/useSubmitFeedbackQuestionnaire";
 import { usePRActionCopy } from "@/domains/pr/use-cases/usePRActionCopy";
@@ -88,8 +87,7 @@ const attendanceActions = usePRAttendanceActions({
 
 const feedbackQuestionnaire = computed(() => props.pr.feedbackQuestionnaire);
 const hasPendingFeedbackQuestionnaire = computed(
-  () =>
-    feedbackQuestionnaire.value?.responseState.status === "NOT_SUBMITTED",
+  () => feedbackQuestionnaire.value?.responseState.status === "NOT_SUBMITTED",
 );
 
 const showCheckInAction = computed(
@@ -126,8 +124,6 @@ usePRPrimaryActionImpression({
   visible: showCheckInAction,
 });
 
-useBodyScrollLock(computed(() => feedbackModalOpen.value));
-
 const openFeedbackQuestionnaire = (): void => {
   if (!hasPendingFeedbackQuestionnaire.value) return;
   feedbackModalOpen.value = true;
@@ -135,7 +131,8 @@ const openFeedbackQuestionnaire = (): void => {
 
 const handleCheckIn = async (): Promise<void> => {
   if (!showCheckInAction.value) return;
-  if (!viewer.value.canCheckIn || attendanceActions.checkInPending.value) return;
+  if (!viewer.value.canCheckIn || attendanceActions.checkInPending.value)
+    return;
   primaryActionError.value = null;
   trackPRPrimaryActionClick(props.pr, "CHECK_IN");
   try {
diff --git a/apps/frontend/src/domains/pr/ui/sections/PRExitAction.vue b/apps/frontend/src/domains/pr/ui/sections/PRExitAction.vue
index 6b2f3f77b..10c27aefa 100644
--- a/apps/frontend/src/domains/pr/ui/sections/PRExitAction.vue
+++ b/apps/frontend/src/domains/pr/ui/sections/PRExitAction.vue
@@ -24,28 +24,28 @@
       </p>
     </div>
 
-    <ConfirmDialog
+    <PuDialog
       :open="showExitConfirmModal"
       title="确认退出"
-      message="退出后你的参与名额会被释放，确认继续？"
-      :confirm-label="
+      description="退出后你的参与名额会被释放，确认继续？"
+      :confirm-text="
         exitMutation.isPending.value ? t('prPage.exiting') : t('common.confirm')
       "
-      confirm-tone="danger"
-      :loading="exitMutation.isPending.value"
+      tone="error"
+      :confirm-loading="exitMutation.isPending.value"
       @close="showExitConfirmModal = false"
+      @cancel="showExitConfirmModal = false"
       @confirm="confirmExit"
     />
   </section>
 </template>
 
 <script setup lang="ts">
+import { PuDialog } from "@partner-up-dev/design-web";
 import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import type { PRDetailView } from "@/domains/pr/model/types";
 import Button from "@/shared/ui/actions/Button.vue";
-import ConfirmDialog from "@/shared/ui/overlay/ConfirmDialog.vue";
-import { useBodyScrollLock } from "@/shared/ui/overlay/useBodyScrollLock";
 import { useExitPR } from "@/domains/pr/queries/usePRActions";
 import { usePRActionCopy } from "@/domains/pr/use-cases/usePRActionCopy";
 import { useRegisterPRPendingReplayHandler } from "@/domains/pr/use-cases/usePRPendingWeChatReplay";
@@ -70,8 +70,6 @@ const exitBlockedTip = computed(() => {
   return blockedReasonText(viewer.value.exitBlockedReason);
 });
 
-useBodyScrollLock(computed(() => showExitConfirmModal.value));
-
 const requestExitWithConfirm = (): void => {
   exitActionError.value = null;
   if (!viewer.value.canExit) return;
diff --git a/apps/frontend/src/domains/pr/ui/sections/PRFeedbackQuestionnaireModal.vue b/apps/frontend/src/domains/pr/ui/sections/PRFeedbackQuestionnaireModal.vue
index bcf211bcb..64ec76eb9 100644
--- a/apps/frontend/src/domains/pr/ui/sections/PRFeedbackQuestionnaireModal.vue
+++ b/apps/frontend/src/domains/pr/ui/sections/PRFeedbackQuestionnaireModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <Modal
+  <PuModal
     :open="open"
     :title="questionnaire?.title ?? '活动反馈'"
     @close="$emit('close')"
@@ -12,13 +12,13 @@
       @submit="$emit('submit', $event)"
       @cancel="$emit('close')"
     />
-  </Modal>
+  </PuModal>
 </template>
 
 <script setup lang="ts">
+import { PuModal } from "@partner-up-dev/design-web";
 import type { FeedbackQuestionnaireAnswers } from "@partner-up-dev/backend";
 import type { PRDetailView } from "@/domains/pr/model/types";
-import Modal from "@/shared/ui/overlay/Modal.vue";
 import FeedbackQuestionnaireForm from "@/domains/feedback/ui/FeedbackQuestionnaireForm.vue";
 
 defineProps<{
diff --git a/apps/frontend/src/domains/pr/ui/sections/PRJoinAction.vue b/apps/frontend/src/domains/pr/ui/sections/PRJoinAction.vue
index 76097b04e..44893d08d 100644
--- a/apps/frontend/src/domains/pr/ui/sections/PRJoinAction.vue
+++ b/apps/frontend/src/domains/pr/ui/sections/PRJoinAction.vue
@@ -53,7 +53,7 @@
     </div>
   </section>
 
-  <Modal
+  <PuModal
     :open="showJoinGateModal"
     max-width="420px"
     title="加入活动"
@@ -69,16 +69,16 @@
       @completed="finalizeJoin"
       @error="emitFlowError"
     />
-  </Modal>
+  </PuModal>
 
-  <Modal :open="showJoinSuccessPrompt" @close="closeJoinSuccessPrompt">
+  <PuModal :open="showJoinSuccessPrompt" @close="closeJoinSuccessPrompt">
     <PRJoinSuccessPrompt
       ref="joinSuccessPromptRef"
       :pr-id="resolvedPrId"
       :open="showJoinSuccessPrompt"
       @done="handleJoinSuccessPromptDone"
     />
-  </Modal>
+  </PuModal>
 </template>
 
 <script setup lang="ts">
@@ -88,8 +88,6 @@ import type { PRId } from "@partner-up-dev/backend";
 import type { PRDetailView } from "@/domains/pr/model/types";
 import type { PRJoinEntrySurface } from "@/domains/pr/model/pr-join-entry-context";
 import Button from "@/shared/ui/actions/Button.vue";
-import Modal from "@/shared/ui/overlay/Modal.vue";
-import { useBodyScrollLock } from "@/shared/ui/overlay/useBodyScrollLock";
 import { useJoinPR } from "@/domains/pr/queries/usePRActions";
 import PRJoinGates from "@/domains/pr/ui/composites/PRJoinGates.vue";
 import PRJoinSuccessPrompt from "@/domains/pr/ui/composites/PRJoinSuccessPrompt.vue";
@@ -103,7 +101,7 @@ import { useRegisterPRPendingReplayHandler } from "@/domains/pr/use-cases/usePRP
 import type { ApiError } from "@/shared/api/error";
 import { trackEvent } from "@/shared/telemetry/track";
 import { resolveTelemetryFailurePayload } from "@/shared/telemetry/result";
-import { PuInlineNotice } from "@partner-up-dev/design-web";
+import { PuInlineNotice, PuModal } from "@partner-up-dev/design-web";
 
 type JoinSuccessPromptExpose = {
   close: () => void;
@@ -204,7 +202,9 @@ const joinBlockedMessage = computed(() => {
 const showActionArea = computed(() =>
   Boolean(
     resolvedPr.value &&
-      (releaseNoticeText.value || joinBlockedMessage.value || showJoinAction.value),
+      (releaseNoticeText.value ||
+        joinBlockedMessage.value ||
+        showJoinAction.value),
   ),
 );
 
@@ -216,10 +216,6 @@ if (props.pr) {
   });
 }
 
-useBodyScrollLock(
-  computed(() => showJoinSuccessPrompt.value || showJoinGateModal.value),
-);
-
 const resolveErrorMessage = (error: unknown): string =>
   error instanceof Error ? error.message : t("common.operationFailed");
 
@@ -367,14 +363,11 @@ useRegisterPRPendingReplayHandler("PR_JOIN", {
   replay: replayJoin,
 });
 
-watch(
-  resolvedPrId,
-  () => {
-    joined.value = false;
-    closeJoinGateModal();
-    showJoinSuccessPrompt.value = false;
-  },
-);
+watch(resolvedPrId, () => {
+  joined.value = false;
+  closeJoinGateModal();
+  showJoinSuccessPrompt.value = false;
+});
 
 watch(
   () => props.viewerIsParticipant ?? viewer.value?.isParticipant ?? null,
diff --git a/apps/frontend/src/domains/pr/ui/sections/PRParticipationActions.test.ts b/apps/frontend/src/domains/pr/ui/sections/PRParticipationActions.test.ts
index a5113cfe3..c848fa3b8 100644
--- a/apps/frontend/src/domains/pr/ui/sections/PRParticipationActions.test.ts
+++ b/apps/frontend/src/domains/pr/ui/sections/PRParticipationActions.test.ts
@@ -16,10 +16,6 @@ vi.mock("vue-i18n", () => ({
   }),
 }));
 
-vi.mock("@/shared/ui/overlay/useBodyScrollLock", () => ({
-  useBodyScrollLock: vi.fn(),
-}));
-
 vi.mock("@/shared/telemetry/track", () => ({
   trackEvent: vi.fn(),
 }));
@@ -79,14 +75,6 @@ vi.mock("@/domains/pr/ui/composites/PRWaitlistSuccessPrompt.vue", () => ({
   },
 }));
 
-vi.mock("@/shared/ui/overlay/ConfirmDialog.vue", () => ({
-  default: {
-    name: "ConfirmDialog",
-    props: ["open"],
-    template: '<div v-if="open" data-testid="confirm-dialog" />',
-  },
-}));
-
 vi.mock("./PRFeedbackQuestionnaireModal.vue", () => ({
   default: {
     name: "PRFeedbackQuestionnaireModal",
diff --git a/apps/frontend/src/domains/pr/ui/sections/PRShareAction.vue b/apps/frontend/src/domains/pr/ui/sections/PRShareAction.vue
index 8a99fcedc..ab27fac08 100644
--- a/apps/frontend/src/domains/pr/ui/sections/PRShareAction.vue
+++ b/apps/frontend/src/domains/pr/ui/sections/PRShareAction.vue
@@ -1,9 +1,5 @@
 <template>
-  <div
-    v-if="showShareAction"
-    class="utility-action-group"
-    data-region="share"
-  >
+  <div v-if="showShareAction" class="utility-action-group" data-region="share">
     <Button
       tone="outline"
       block
@@ -13,11 +9,7 @@
       {{ t("prPage.shareEntry.action") }}
     </Button>
 
-    <BottomDrawer
-      :open="showShareDrawer"
-      title="分享邀请"
-      @close="showShareDrawer = false"
-    >
+    <PuDrawer v-model:visible="showShareDrawer" title="分享邀请">
       <PRShareSection
         :pr-id="pr.id"
         :share-url="shareUrl"
@@ -26,19 +18,18 @@
         default-method-id="XIAOHONGSHU"
         :auto-rotate-interval-ms="null"
       />
-    </BottomDrawer>
+    </PuDrawer>
   </div>
 </template>
 
 <script setup lang="ts">
+import { PuDrawer } from "@partner-up-dev/design-web";
 import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import type { PRDetailView } from "@/domains/pr/model/types";
 import type { PRShareData } from "@/domains/share/model/types";
 import type { ShareSpmRouteKey } from "@/shared/url/spm";
 import Button from "@/shared/ui/actions/Button.vue";
-import BottomDrawer from "@/shared/ui/overlay/BottomDrawer.vue";
-import { useBodyScrollLock } from "@/shared/ui/overlay/useBodyScrollLock";
 import PRShareSection from "@/domains/pr/ui/sections/PRShareSection.vue";
 
 const props = defineProps<{
@@ -54,8 +45,6 @@ const showShareDrawer = ref(false);
 const showShareAction = computed(
   () => props.spmRouteKey !== null && props.prShareData !== null,
 );
-
-useBodyScrollLock(computed(() => showShareDrawer.value));
 </script>
 
 <style lang="scss" scoped>
diff --git a/apps/frontend/src/domains/pr/ui/sections/PRUtilityComponents.test.ts b/apps/frontend/src/domains/pr/ui/sections/PRUtilityComponents.test.ts
index 0d92fdcb0..b4f6fe0bb 100644
--- a/apps/frontend/src/domains/pr/ui/sections/PRUtilityComponents.test.ts
+++ b/apps/frontend/src/domains/pr/ui/sections/PRUtilityComponents.test.ts
@@ -32,32 +32,15 @@ vi.mock("@/shared/telemetry/track", () => ({
   trackEvent: testState.trackEvent,
 }));
 
-vi.mock("@/shared/ui/overlay/useBodyScrollLock", () => ({
-  useBodyScrollLock: vi.fn(),
-}));
-
-vi.mock("@/shared/ui/overlay/Modal.vue", () => ({
-  default: {
-    name: "Modal",
-    props: ["open"],
-    template: '<div v-if="open" data-testid="modal"><slot /></div>',
-  },
-}));
-
-vi.mock("@/shared/ui/overlay/BottomDrawer.vue", () => ({
-  default: {
-    name: "BottomDrawer",
-    props: ["open"],
-    template: '<div v-if="open" data-testid="bottom-drawer"><slot /></div>',
-  },
-}));
-
-vi.mock("@/domains/event/ui/primitives/AnchorEventBetaGroupQrPanel.vue", () => ({
-  default: {
-    name: "AnchorEventBetaGroupQrPanel",
-    template: '<div data-testid="beta-group-panel" />',
-  },
-}));
+vi.mock(
+  "@/domains/event/ui/primitives/AnchorEventBetaGroupQrPanel.vue",
+  () => ({
+    default: {
+      name: "AnchorEventBetaGroupQrPanel",
+      template: '<div data-testid="beta-group-panel" />',
+    },
+  }),
+);
 
 vi.mock("@/domains/pr/ui/sections/PRShareSection.vue", () => ({
   default: {
@@ -100,7 +83,7 @@ describe("PR utility components", () => {
     action.click();
     await nextTick();
 
-    expect(hasTestId(host, "beta-group-panel")).toBe(true);
+    expect(hasTestId(document.body, "beta-group-panel")).toBe(true);
     expect(testState.trackEvent).toHaveBeenCalledWith(
       "pr_secondary_action_click",
       {
@@ -159,7 +142,7 @@ describe("PR utility components", () => {
     getByTestId(host, "pr-detail.share.open").click();
     await nextTick();
 
-    expect(hasTestId(host, "share-section")).toBe(true);
+    expect(hasTestId(document.body, "share-section")).toBe(true);
   });
 
   test("event plaza entry renders for event-backed PRs and tracks click", async () => {
@@ -241,14 +224,17 @@ describe("PR utility components", () => {
   });
 
   test("study sprint pomodoro action hides for non-participants and other PR types", async () => {
-    const nonParticipantHost = await mountComponent(PRStudySprintPomodoroAction, {
-      pr: buildPRDetail({
-        type: "STUDY_SPRINT",
-        viewer: {
-          isParticipant: false,
-        },
-      }),
-    });
+    const nonParticipantHost = await mountComponent(
+      PRStudySprintPomodoroAction,
+      {
+        pr: buildPRDetail({
+          type: "STUDY_SPRINT",
+          viewer: {
+            isParticipant: false,
+          },
+        }),
+      },
+    );
     const otherTypeHost = await mountComponent(PRStudySprintPomodoroAction, {
       pr: buildPRDetail({
         type: "徒步",
diff --git a/apps/frontend/src/domains/pr/ui/sections/PRWaitlistActions.vue b/apps/frontend/src/domains/pr/ui/sections/PRWaitlistActions.vue
index 81b5eb55d..fbedaefcb 100644
--- a/apps/frontend/src/domains/pr/ui/sections/PRWaitlistActions.vue
+++ b/apps/frontend/src/domains/pr/ui/sections/PRWaitlistActions.vue
@@ -60,23 +60,24 @@
       </p>
     </div>
 
-    <ConfirmDialog
+    <PuDialog
       :open="showCancelWaitlistConfirmModal"
       :title="t('prPage.cancelWaitlistConfirm.title')"
-      :message="t('prPage.cancelWaitlistConfirm.message')"
-      :confirm-label="
+      :description="t('prPage.cancelWaitlistConfirm.message')"
+      :confirm-text="
         cancelWaitlistMutation.isPending.value
           ? t('prPage.cancelWaitlisting')
           : t('prPage.cancelWaitlist')
       "
-      confirm-tone="danger"
-      :loading="cancelWaitlistMutation.isPending.value"
+      tone="error"
+      :confirm-loading="cancelWaitlistMutation.isPending.value"
       @close="showCancelWaitlistConfirmModal = false"
+      @cancel="showCancelWaitlistConfirmModal = false"
       @confirm="confirmCancelWaitlist"
     />
   </section>
 
-  <Modal
+  <PuModal
     :open="showWaitlistGateModal"
     max-width="420px"
     title="提交候补"
@@ -104,16 +105,19 @@
       @completed="finalizeWaitlist"
       @error="setWaitlistActionError"
     />
-  </Modal>
+  </PuModal>
 
-  <Modal :open="showWaitlistSuccessPrompt" @close="closeWaitlistSuccessPrompt">
+  <PuModal
+    :open="showWaitlistSuccessPrompt"
+    @close="closeWaitlistSuccessPrompt"
+  >
     <PRWaitlistSuccessPrompt
       ref="waitlistSuccessPromptRef"
       :open="showWaitlistSuccessPrompt"
       :alternative-pr-reminder-opt-in="waitlistSuccessAlternativeReminderOptIn"
       @done="handleWaitlistSuccessPromptDone"
     />
-  </Modal>
+  </PuModal>
 </template>
 
 <script setup lang="ts">
@@ -122,9 +126,6 @@ import { useI18n } from "vue-i18n";
 import type { PRDetailView } from "@/domains/pr/model/types";
 import type { PRJoinEntryContext } from "@/domains/pr/model/pr-join-entry-context";
 import Button from "@/shared/ui/actions/Button.vue";
-import ConfirmDialog from "@/shared/ui/overlay/ConfirmDialog.vue";
-import Modal from "@/shared/ui/overlay/Modal.vue";
-import { useBodyScrollLock } from "@/shared/ui/overlay/useBodyScrollLock";
 import {
   useCancelWaitlistPR,
   useWaitlistPR,
@@ -141,7 +142,7 @@ import { useRegisterPRPendingReplayHandler } from "@/domains/pr/use-cases/usePRP
 import type { ApiError } from "@/shared/api/error";
 import { resolveTelemetryFailurePayload } from "@/shared/telemetry/result";
 import { trackEvent } from "@/shared/telemetry/track";
-import { PuInlineNotice } from "@partner-up-dev/design-web";
+import { PuInlineNotice, PuModal, PuDialog } from "@partner-up-dev/design-web";
 
 type WaitlistSuccessPromptExpose = {
   close: () => void;
@@ -223,15 +224,6 @@ usePRPrimaryActionImpression({
   visible: showWaitlistAction,
 });
 
-useBodyScrollLock(
-  computed(
-    () =>
-      showWaitlistGateModal.value ||
-      showWaitlistSuccessPrompt.value ||
-      showCancelWaitlistConfirmModal.value,
-  ),
-);
-
 const resolveErrorMessage = (error: unknown): string =>
   error instanceof Error ? error.message : t("common.operationFailed");
 
diff --git a/apps/frontend/src/domains/route/ui/RouteEditor.vue b/apps/frontend/src/domains/route/ui/RouteEditor.vue
index 55efa97f0..7b07eb06f 100644
--- a/apps/frontend/src/domains/route/ui/RouteEditor.vue
+++ b/apps/frontend/src/domains/route/ui/RouteEditor.vue
@@ -108,7 +108,7 @@
       </div>
     </template>
 
-    <Modal
+    <PuModal
       :open="routeMapOpen"
       :title="t('route.mapTitle')"
       max-width="760px"
@@ -121,7 +121,7 @@
         :interactive="false"
         :fit-padding="32"
       />
-    </Modal>
+    </PuModal>
 
     <LocationPickerModal
       :open="pendingPickerIndex !== null"
@@ -134,6 +134,7 @@
 </template>
 
 <script setup lang="ts">
+import { PuModal } from "@partner-up-dev/design-web";
 import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import LocationPickerModal from "@/domains/location/ui/LocationPickerModal.vue";
@@ -153,7 +154,6 @@ import {
   swapRoutePointWithNeighbor,
 } from "@/domains/route/model/route";
 import Button from "@/shared/ui/actions/Button.vue";
-import Modal from "@/shared/ui/overlay/Modal.vue";
 
 const props = withDefaults(
   defineProps<{
@@ -377,8 +377,14 @@ const handleLocationPicked = (location: PickedLocation) => {
 
 .route-editor__icon-action {
   display: grid;
-  width: calc(var(--sys-spacing-large) + var(--sys-spacing-small) + var(--sys-spacing-xsmall));
-  height: calc(var(--sys-spacing-large) + var(--sys-spacing-small) + var(--sys-spacing-xsmall));
+  width: calc(
+    var(--sys-spacing-large) + var(--sys-spacing-small) +
+      var(--sys-spacing-xsmall)
+  );
+  height: calc(
+    var(--sys-spacing-large) + var(--sys-spacing-small) +
+      var(--sys-spacing-xsmall)
+  );
   place-items: center;
   border: 0;
   border-radius: var(--sys-radius-small);
diff --git a/apps/frontend/src/domains/support/ui/sections/SupportContactQrModal.vue b/apps/frontend/src/domains/support/ui/sections/SupportContactQrModal.vue
index 7ef5852fd..b6b2fb9c1 100644
--- a/apps/frontend/src/domains/support/ui/sections/SupportContactQrModal.vue
+++ b/apps/frontend/src/domains/support/ui/sections/SupportContactQrModal.vue
@@ -1,10 +1,5 @@
 <template>
-  <Modal
-    :open="open"
-    :title="title"
-    max-width="420px"
-    @close="emit('close')"
-  >
+  <PuModal :open="open" :title="title" max-width="420px" @close="emit('close')">
     <div class="support-contact-qr-modal">
       <p class="support-contact-qr-modal__description">
         {{ description }}
@@ -30,15 +25,14 @@
         {{ t("common.close") }}
       </Button>
     </div>
-  </Modal>
+  </PuModal>
 </template>
 
 <script setup lang="ts">
+import { PuModal } from "@partner-up-dev/design-web";
 import { computed, toRef } from "vue";
 import { useI18n } from "vue-i18n";
 import Button from "@/shared/ui/actions/Button.vue";
-import Modal from "@/shared/ui/overlay/Modal.vue";
-import { useBodyScrollLock } from "@/shared/ui/overlay/useBodyScrollLock";
 import { useQrCodeDataUrl } from "@/shared/wechat/useQrCodeDataUrl";
 
 const props = defineProps<{
@@ -57,12 +51,7 @@ const emit = defineEmits<{
 const { t } = useI18n();
 const openRef = toRef(props, "open");
 const targetUrlRef = toRef(props, "targetUrl");
-const { qrCodeDataUrl, qrCodeError } = useQrCodeDataUrl(
-  openRef,
-  targetUrlRef,
-);
-
-useBodyScrollLock(computed(() => props.open));
+const { qrCodeDataUrl, qrCodeError } = useQrCodeDataUrl(openRef, targetUrlRef);
 </script>
 
 <style scoped lang="scss">
diff --git a/apps/frontend/src/lib/body-scroll-lock.ts b/apps/frontend/src/lib/body-scroll-lock.ts
deleted file mode 100644
index bdd55d647..000000000
--- a/apps/frontend/src/lib/body-scroll-lock.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { useBodyScrollLock } from "@/shared/ui/overlay/useBodyScrollLock";
diff --git a/apps/frontend/src/pages/AboutPage.vue b/apps/frontend/src/pages/AboutPage.vue
index f45bee336..1e5027087 100644
--- a/apps/frontend/src/pages/AboutPage.vue
+++ b/apps/frontend/src/pages/AboutPage.vue
@@ -111,7 +111,7 @@
       @close="showOfficialAccountQrModal = false"
     />
 
-    <Modal
+    <PuModal
       :open="betaGroupModalOpen"
       :title="selectedBetaGroupModalTitle"
       max-width="420px"
@@ -131,7 +131,7 @@
           {{ t("aboutPage.betaGroupQrMissing") }}
         </p>
       </div>
-    </Modal>
+    </PuModal>
   </PuPageScaffold>
 </template>
 
@@ -143,10 +143,8 @@ import { useAnchorEvents } from "@/domains/event/queries/useAnchorEvents";
 import { frontendBuildInfo } from "@/shared/meta/build-info";
 import { useBackendBuildMetadata } from "@/shared/meta/queries/useBackendBuildMetadata";
 import OfficialAccountQrModal from "@/shared/wechat/OfficialAccountQrModal.vue";
-import Modal from "@/shared/ui/overlay/Modal.vue";
 import Button from "@/shared/ui/actions/Button.vue";
-import { useBodyScrollLock } from "@/shared/ui/overlay/useBodyScrollLock";
-import { PuPageScaffold } from "@partner-up-dev/design-web";
+import { PuPageScaffold, PuModal } from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const backendBuildMetadataQuery = useBackendBuildMetadata();
@@ -192,8 +190,6 @@ const betaGroupModalOpen = computed(
   () => selectedBetaGroupEvent.value !== null,
 );
 
-useBodyScrollLock(betaGroupModalOpen);
-
 const openBetaGroupModal = (eventId: number): void => {
   selectedBetaGroupEventId.value = eventId;
 };
@@ -317,7 +313,10 @@ const backendCommitHash = computed(() => {
   grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
   gap: var(--sys-spacing-small);
-  min-height: calc(var(--sys-spacing-large) + var(--sys-spacing-small) + var(--sys-spacing-xsmall));
+  min-height: calc(
+    var(--sys-spacing-large) + var(--sys-spacing-small) +
+      var(--sys-spacing-xsmall)
+  );
   padding: var(--sys-spacing-small) 0;
 }
 
diff --git a/apps/frontend/src/pages/AnchorEventLandingPage.vue b/apps/frontend/src/pages/AnchorEventLandingPage.vue
index 41fa75cc9..eefca2c14 100644
--- a/apps/frontend/src/pages/AnchorEventLandingPage.vue
+++ b/apps/frontend/src/pages/AnchorEventLandingPage.vue
@@ -1,5 +1,6 @@
 <template>
-  <PuPageScaffold footer-placement="reveal"
+  <PuPageScaffold
+    footer-placement="reveal"
     :class="[
       'anchor-event-landing-page',
       { 'anchor-event-landing-page--card-rich': resolvedMode === 'CARD_RICH' },
@@ -120,10 +121,9 @@
     </template>
   </PuPageScaffold>
 
-  <BottomDrawer
-    :open="showOtherEventsDrawer"
+  <PuDrawer
+    v-model:visible="showOtherEventsDrawer"
     :title="t('anchorEvent.otherEvents.title')"
-    @close="showOtherEventsDrawer = false"
   >
     <PuLoadingState
       v-if="otherEventsQuery.isLoading.value"
@@ -141,7 +141,7 @@
       @update:model-value="selectedOtherEventId = $event"
       @activate="handleSelectOtherEvent"
     />
-  </BottomDrawer>
+  </PuDrawer>
 
   <OfficialAccountFollowNudge
     :open="officialAccountFollowPrompt.isVisible.value"
@@ -202,7 +202,6 @@ import {
   readPendingWeChatAction,
 } from "@/processes/wechat/pending-wechat-action";
 import Button from "@/shared/ui/actions/Button.vue";
-import BottomDrawer from "@/shared/ui/overlay/BottomDrawer.vue";
 import AnchorEventRadioCardCarousel from "@/domains/event/ui/composites/AnchorEventRadioCardCarousel.vue";
 import { useOfficialAccountFollowPrompt } from "@/domains/marketing/use-cases/useOfficialAccountFollowPrompt";
 import { trackEvent } from "@/shared/telemetry/track";
@@ -213,6 +212,7 @@ import {
   PuSegmented,
   PuSegmentedItem,
   type PuSegmentedValue,
+  PuDrawer,
 } from "@partner-up-dev/design-web";
 import {
   buildAnchorEventFunnelPayload,
@@ -293,8 +293,11 @@ const eventId = computed(() => {
 const requestedMode = computed(() => route.query.mode);
 const { assignmentQuery, resolvedMode, setResolvedMode, isTimeoutFallback } =
   useResolvedAnchorEventLandingMode(eventId, requestedMode);
-const { data: detail, isLoading: isDetailLoading, isError: isDetailError } =
-  useAnchorEventDetail(eventId);
+const {
+  data: detail,
+  isLoading: isDetailLoading,
+  isError: isDetailError,
+} = useAnchorEventDetail(eventId);
 const otherEventsQuery = useAnchorEvents();
 const selectedOtherEventId = ref<number | null>(null);
 const otherEventCandidates = computed(() =>
@@ -437,7 +440,10 @@ const hasRouterBackEntry = (): boolean => {
 const backFallbackTo: RouteLocationRaw = { name: "event-plaza" };
 
 const handleLandingBack = async () => {
-  if (resolvedMode.value === "FORM" && formModeResultState.value === "no-match") {
+  if (
+    resolvedMode.value === "FORM" &&
+    formModeResultState.value === "no-match"
+  ) {
     formModeSurfaceRef.value?.returnToSelection();
     return;
   }
@@ -615,8 +621,8 @@ watch(
       return;
     }
 
-    const current = timeWindows.find(
-      (entry) => timeWindowsEqual(entry.timeWindow, cardCreateTimeWindow.value),
+    const current = timeWindows.find((entry) =>
+      timeWindowsEqual(entry.timeWindow, cardCreateTimeWindow.value),
     );
     if (current) {
       return;
@@ -637,8 +643,7 @@ const selectedCardCreateTimeWindow = computed(() => {
   return (
     upcomingSortedCreateTimeWindows.value.find((entry) =>
       timeWindowsEqual(entry.timeWindow, timeWindow),
-    ) ??
-    null
+    ) ?? null
   );
 });
 
@@ -775,7 +780,9 @@ const remainingDemandCards = computed(() =>
   ),
 );
 const activeDemandCard = computed(() => remainingDemandCards.value[0] ?? null);
-const stackPreviewCards = computed(() => remainingDemandCards.value.slice(1, 3));
+const stackPreviewCards = computed(() =>
+  remainingDemandCards.value.slice(1, 3),
+);
 
 const cardActionError = ref<string | null>(null);
 const isCardRouting = ref(false);
@@ -929,7 +936,9 @@ const handleViewActiveCardDetail = async () => {
         entrySurface: "card_rich",
         entryType: "detail",
       });
-      await router.push(buildEventDetailTarget(created.canonicalPath, event.id));
+      await router.push(
+        buildEventDetailTarget(created.canonicalPath, event.id),
+      );
       return;
     }
 
@@ -1082,11 +1091,10 @@ const createEventAssistedPR = async ({
     place,
     preferences,
   });
-  const funnelPayload =
-    buildCurrentFunnelPayload() ?? {
-      eventId: event.id,
-      activityType: event.type,
-    };
+  const funnelPayload = buildCurrentFunnelPayload() ?? {
+    eventId: event.id,
+    activityType: event.type,
+  };
 
   try {
     const created = await createEventAssistedPRMutation.mutateAsync({
@@ -1107,7 +1115,9 @@ const createEventAssistedPR = async ({
       entrySurface: "card_rich",
       entryType: "create_handoff",
     });
-    await router.push(buildEventAssistedCreateTarget(created.canonicalPath, event.id));
+    await router.push(
+      buildEventAssistedCreateTarget(created.canonicalPath, event.id),
+    );
   } catch (error) {
     if (isWeChatAuthBlockingError(error)) {
       trackEvent("pr_commitment_result", {
@@ -1213,7 +1223,10 @@ const handleCreateFromCardEmpty = async () => {
   }
 
   const place = toAnchorEventSelectedPlace(
-    findAnchorEventPlaceOption(cardCreatePlaceOptions.value, cardCreatePlaceId.value),
+    findAnchorEventPlaceOption(
+      cardCreatePlaceOptions.value,
+      cardCreatePlaceId.value,
+    ),
   );
   const targetTimeWindow = cardCreateTimeWindow.value;
   if (!targetTimeWindow?.[0] || !targetTimeWindow?.[1] || !place) {
diff --git a/apps/frontend/src/pages/EventPRSearchPage.vue b/apps/frontend/src/pages/EventPRSearchPage.vue
index ac0a3b85e..b678e052b 100644
--- a/apps/frontend/src/pages/EventPRSearchPage.vue
+++ b/apps/frontend/src/pages/EventPRSearchPage.vue
@@ -1,431 +1,430 @@
-<template>
+<template>
   <PuPageScaffold class="event-pr-search-page" data-page="event-pr-search">
-    <PageHeader
-      :title="pageTitle"
-      :subtitle="pageSubtitle"
-      :back-fallback-to="{ name: 'event-plaza' }"
-    >
-      <template #top-actions>
-        <Button
-          v-if="isResultMode"
-          tone="ghost"
-          size="sm"
-          @click="showCriteriaDrawer = true"
-        >
-          {{ t("eventPRSearch.actions.modifyCriteria") }}
-        </Button>
-      </template>
-    </PageHeader>
-
-    <div
-      v-if="eventsQuery.isLoading.value"
-      class="event-pr-search-page__state"
-    >
-      {{ t("common.loading") }}
-    </div>
-
+    <PageHeader
+      :title="pageTitle"
+      :subtitle="pageSubtitle"
+      :back-fallback-to="{ name: 'event-plaza' }"
+    >
+      <template #top-actions>
+        <Button
+          v-if="isResultMode"
+          tone="ghost"
+          size="sm"
+          @click="showCriteriaDrawer = true"
+        >
+          {{ t("eventPRSearch.actions.modifyCriteria") }}
+        </Button>
+      </template>
+    </PageHeader>
+
+    <div v-if="eventsQuery.isLoading.value" class="event-pr-search-page__state">
+      {{ t("common.loading") }}
+    </div>
+
     <PuEmptyState
-      v-else-if="eventsQuery.isError.value"
-      :title="t('eventPRSearch.loadEventsFailed')"
-      :description="t('eventPRSearch.loadEventsFailedHint')"
-      icon="i-mdi-alert-circle-outline"
-    >
-      <template #actions>
-        <Button tone="outline" @click="goEventPlaza">
-          {{ t("eventPRSearch.actions.goEventPlaza") }}
-        </Button>
-      </template>
+      v-else-if="eventsQuery.isError.value"
+      :title="t('eventPRSearch.loadEventsFailed')"
+      :description="t('eventPRSearch.loadEventsFailedHint')"
+      icon="i-mdi-alert-circle-outline"
+    >
+      <template #actions>
+        <Button tone="outline" @click="goEventPlaza">
+          {{ t("eventPRSearch.actions.goEventPlaza") }}
+        </Button>
+      </template>
     </PuEmptyState>
-
+
     <PuEmptyState
-      v-else-if="availableEvents.length === 0"
-      :title="t('eventPRSearch.emptyEventsTitle')"
-      :description="t('eventPRSearch.emptyEventsDescription')"
-      icon="i-mdi-calendar-blank-outline"
-    >
-      <template #actions>
-        <Button tone="outline" @click="goHome">
-          {{ t("eventPRSearch.actions.backHome") }}
-        </Button>
-      </template>
+      v-else-if="availableEvents.length === 0"
+      :title="t('eventPRSearch.emptyEventsTitle')"
+      :description="t('eventPRSearch.emptyEventsDescription')"
+      icon="i-mdi-calendar-blank-outline"
+    >
+      <template #actions>
+        <Button tone="outline" @click="goHome">
+          {{ t("eventPRSearch.actions.backHome") }}
+        </Button>
+      </template>
     </PuEmptyState>
-
-    <template v-else-if="!isResultMode">
-      <EventPRSearchCriteriaForm
-        v-model:selected-event-id="formEventId"
-        v-model:selected-dates="formDates"
-        :events="availableEvents"
-      />
-
-      <div class="event-pr-search-page__footer-actions mt-4">
-        <Button tone="outline" block @click="goHome">
-          {{ t("eventPRSearch.actions.backHome") }}
-        </Button>
-        <Button block :disabled="!canSubmitForm" @click="submitSearch">
-          {{ t("eventPRSearch.actions.search") }}
-        </Button>
-      </div>
-    </template>
-
-    <template v-else>
-      <div v-if="isAutoRedirecting" class="event-pr-search-page__state">
-        {{ t("eventPRSearch.redirectingSingleResult") }}
-      </div>
-
-      <div
-        v-else-if="searchQuery.isLoading.value"
-        class="event-pr-search-page__state"
-      >
-        {{ t("common.loading") }}
-      </div>
-
+
+    <template v-else-if="!isResultMode">
+      <EventPRSearchCriteriaForm
+        v-model:selected-event-id="formEventId"
+        v-model:selected-dates="formDates"
+        :events="availableEvents"
+      />
+
+      <div class="event-pr-search-page__footer-actions mt-4">
+        <Button tone="outline" block @click="goHome">
+          {{ t("eventPRSearch.actions.backHome") }}
+        </Button>
+        <Button block :disabled="!canSubmitForm" @click="submitSearch">
+          {{ t("eventPRSearch.actions.search") }}
+        </Button>
+      </div>
+    </template>
+
+    <template v-else>
+      <div v-if="isAutoRedirecting" class="event-pr-search-page__state">
+        {{ t("eventPRSearch.redirectingSingleResult") }}
+      </div>
+
+      <div
+        v-else-if="searchQuery.isLoading.value"
+        class="event-pr-search-page__state"
+      >
+        {{ t("common.loading") }}
+      </div>
+
       <PuEmptyState
-        v-else-if="searchQuery.isError.value"
-        :title="t('eventPRSearch.loadFailed')"
-        :description="searchErrorMessage"
-        icon="i-mdi-alert-circle-outline"
-      >
-        <template #actions>
-          <Button tone="outline" @click="showCriteriaDrawer = true">
-            {{ t("eventPRSearch.actions.modifyCriteria") }}
-          </Button>
-          <Button tone="surface" @click="goEventPlaza">
-            {{ t("eventPRSearch.actions.goEventPlaza") }}
-          </Button>
-        </template>
+        v-else-if="searchQuery.isError.value"
+        :title="t('eventPRSearch.loadFailed')"
+        :description="searchErrorMessage"
+        icon="i-mdi-alert-circle-outline"
+      >
+        <template #actions>
+          <Button tone="outline" @click="showCriteriaDrawer = true">
+            {{ t("eventPRSearch.actions.modifyCriteria") }}
+          </Button>
+          <Button tone="surface" @click="goEventPlaza">
+            {{ t("eventPRSearch.actions.goEventPlaza") }}
+          </Button>
+        </template>
       </PuEmptyState>
-
-      <template v-else>
-        <p class="event-pr-search-page__summary">
-          {{
-            t("eventPRSearch.resultSummary", { count: searchResults.length })
-          }}
-        </p>
-
-        <div
-          v-if="searchResults.length > 0"
-          class="event-pr-search-page__result-list"
-        >
+
+      <template v-else>
+        <p class="event-pr-search-page__summary">
+          {{
+            t("eventPRSearch.resultSummary", { count: searchResults.length })
+          }}
+        </p>
+
+        <div
+          v-if="searchResults.length > 0"
+          class="event-pr-search-page__result-list"
+        >
           <PRPreviewCard
             v-for="result in searchResults"
             :key="result.pr.id"
             :pr-id="result.pr.id as PRId"
             :time-label="formatSearchResultTimeLabel(result)"
           />
-        </div>
-
+        </div>
+
         <PuEmptyState
-          v-else
-          :title="t('eventPRSearch.emptyResultTitle')"
-          :description="t('eventPRSearch.emptyResultDescription')"
-          icon="i-mdi-calendar-remove-outline"
-        >
-          <template #actions>
-            <Button tone="outline" @click="showCriteriaDrawer = true">
-              {{ t("eventPRSearch.actions.modifyCriteria") }}
-            </Button>
-            <Button tone="surface" @click="goEventPlaza">
-              {{ t("eventPRSearch.actions.goEventPlaza") }}
-            </Button>
-          </template>
+          v-else
+          :title="t('eventPRSearch.emptyResultTitle')"
+          :description="t('eventPRSearch.emptyResultDescription')"
+          icon="i-mdi-calendar-remove-outline"
+        >
+          <template #actions>
+            <Button tone="outline" @click="showCriteriaDrawer = true">
+              {{ t("eventPRSearch.actions.modifyCriteria") }}
+            </Button>
+            <Button tone="surface" @click="goEventPlaza">
+              {{ t("eventPRSearch.actions.goEventPlaza") }}
+            </Button>
+          </template>
         </PuEmptyState>
-      </template>
-
-      <BottomDrawer
-        :open="showCriteriaDrawer"
-        :title="t('eventPRSearch.drawerTitle')"
-        @close="showCriteriaDrawer = false"
-      >
-        <EventPRSearchCriteriaForm
-          v-model:selected-event-id="drawerEventId"
-          v-model:selected-dates="drawerDates"
-          :events="availableEvents"
-        />
-
-        <template #footer>
-          <div class="event-pr-search-page__drawer-actions">
-            <Button tone="outline" block @click="showCriteriaDrawer = false">
-              {{ t("common.cancel") }}
-            </Button>
-            <Button
-              block
-              :disabled="!canApplyDrawerCriteria"
-              @click="applyDrawerCriteria"
-            >
-              {{ t("eventPRSearch.actions.applyCriteria") }}
-            </Button>
-          </div>
-        </template>
-      </BottomDrawer>
-    </template>
+      </template>
+
+      <PuDrawer
+        v-model:visible="showCriteriaDrawer"
+        :title="t('eventPRSearch.drawerTitle')"
+      >
+        <EventPRSearchCriteriaForm
+          v-model:selected-event-id="drawerEventId"
+          v-model:selected-dates="drawerDates"
+          :events="availableEvents"
+        />
+
+        <template #footer>
+          <div class="event-pr-search-page__drawer-actions">
+            <Button tone="outline" block @click="showCriteriaDrawer = false">
+              {{ t("common.cancel") }}
+            </Button>
+            <Button
+              block
+              :disabled="!canApplyDrawerCriteria"
+              @click="applyDrawerCriteria"
+            >
+              {{ t("eventPRSearch.actions.applyCriteria") }}
+            </Button>
+          </div>
+        </template>
+      </PuDrawer>
+    </template>
   </PuPageScaffold>
-</template>
-
-<script setup lang="ts">
-import type { PRId } from "@partner-up-dev/backend";
-import { computed, ref, watch } from "vue";
-import { useI18n } from "vue-i18n";
-import { useRoute, useRouter } from "vue-router";
-import Button from "@/shared/ui/actions/Button.vue";
-import { PuEmptyState, PuPageScaffold } from "@partner-up-dev/design-web";
-import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
-import BottomDrawer from "@/shared/ui/overlay/BottomDrawer.vue";
-import { useAnchorEvents } from "@/domains/event/queries/useAnchorEvents";
-import EventPRSearchCriteriaForm from "@/domains/event/ui/composites/EventPRSearchCriteriaForm.vue";
-import type { AnchorEventListItem } from "@/domains/event/model/types";
-import type { PRSearchResult } from "@/domains/pr/model/types";
-import { useEventPRSearch } from "@/domains/pr/queries/useEventPRSearch";
+</template>
+
+<script setup lang="ts">
+import type { PRId } from "@partner-up-dev/backend";
+import { computed, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { useRoute, useRouter } from "vue-router";
+import Button from "@/shared/ui/actions/Button.vue";
+import {
+  PuEmptyState,
+  PuPageScaffold,
+  PuDrawer,
+} from "@partner-up-dev/design-web";
+import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
+import { useAnchorEvents } from "@/domains/event/queries/useAnchorEvents";
+import EventPRSearchCriteriaForm from "@/domains/event/ui/composites/EventPRSearchCriteriaForm.vue";
+import type { AnchorEventListItem } from "@/domains/event/model/types";
+import type { PRSearchResult } from "@/domains/pr/model/types";
+import { useEventPRSearch } from "@/domains/pr/queries/useEventPRSearch";
 import PRPreviewCard from "@/domains/pr/ui/primitives/PRPreviewCard.vue";
 import { prDetailPath } from "@/domains/pr/routing/routes";
 import { formatLocalDateTimeValue } from "@/shared/datetime/formatLocalDateTime";
-import {
-  formatProductLocalShortDateLabel,
-  getProductLocalWeekStartDateKey,
-  getTodayProductLocalDateKey,
-  listProductLocalDateKeysFrom,
-  normalizeProductLocalDateKeys,
-} from "@/shared/datetime/productLocalDate";
-
-const SEARCH_CALENDAR_WEEK_COUNT = 4;
-const DAYS_PER_WEEK = 7;
-
-type SearchCriteria = {
-  eventId: number;
-  dates: string[];
-};
-
-const route = useRoute();
-const router = useRouter();
-const { t } = useI18n();
-
-const eventsQuery = useAnchorEvents();
-const availableEvents = computed<AnchorEventListItem[]>(
-  () => eventsQuery.data.value ?? [],
-);
-
-const todayDateKey = getTodayProductLocalDateKey();
-const defaultDateKeys = listProductLocalDateKeysFrom(todayDateKey, 3);
-const calendarWindowStartDateKey =
-  getProductLocalWeekStartDateKey(todayDateKey) ?? todayDateKey;
-const allowedDateKeys = listProductLocalDateKeysFrom(
-  calendarWindowStartDateKey,
-  SEARCH_CALENDAR_WEEK_COUNT * DAYS_PER_WEEK,
-).filter((dateKey) => dateKey >= todayDateKey);
-const allowedDateSet = new Set(allowedDateKeys);
-
-const formEventId = ref<number | null>(null);
-const formDates = ref<string[]>([]);
-const drawerEventId = ref<number | null>(null);
-const drawerDates = ref<string[]>([]);
-const showCriteriaDrawer = ref(false);
-const isAutoRedirecting = ref(false);
-const lastAutoRedirectCriteriaKey = ref<string | null>(null);
-
-const readQueryString = (value: unknown): string | null => {
-  if (typeof value !== "string") {
-    return null;
-  }
-  const normalized = value.trim();
-  return normalized.length > 0 ? normalized : null;
-};
-
-const readRouteDateValues = (value: unknown): string[] => {
-  if (Array.isArray(value)) {
-    return value.filter((item): item is string => typeof item === "string");
-  }
-  if (typeof value === "string") {
-    return [value];
-  }
-  return [];
-};
-
-const normalizeCriteriaDates = (dates: string[]): string[] => {
-  const normalized = normalizeProductLocalDateKeys(dates).filter((dateKey) =>
-    allowedDateSet.has(dateKey),
-  );
-  return normalized.length > 0 ? normalized : [...defaultDateKeys];
-};
-
-const resolveDefaultEventId = (): number | null =>
-  availableEvents.value[0]?.id ?? null;
-
-const resolveEventId = (value: unknown): number | null => {
-  const raw = readQueryString(value);
-  if (!raw) {
-    return resolveDefaultEventId();
-  }
-
-  const parsed = Number(raw);
-  if (!Number.isFinite(parsed)) {
-    return resolveDefaultEventId();
-  }
-
-  const matchedEvent = availableEvents.value.find(
-    (event) => event.id === parsed,
-  );
-  return matchedEvent?.id ?? resolveDefaultEventId();
-};
-
-const routeHasSearchIntent = computed(
-  () =>
-    readQueryString(route.query.eventId) !== null ||
-    readRouteDateValues(route.query.date).length > 0,
-);
-
-const appliedCriteria = computed<SearchCriteria | null>(() => {
-  if (!routeHasSearchIntent.value || availableEvents.value.length === 0) {
-    return null;
-  }
-
-  const eventId = resolveEventId(route.query.eventId);
-  if (eventId === null) {
-    return null;
-  }
-
-  return {
-    eventId,
-    dates: normalizeCriteriaDates(readRouteDateValues(route.query.date)),
-  };
-});
-
-const buildSearchQuery = (criteria: SearchCriteria) => ({
-  ...route.query,
-  eventId: criteria.eventId.toString(),
-  date: criteria.dates,
-});
-
-const isSameSearchQuery = (criteria: SearchCriteria): boolean => {
-  const routeEventId = readQueryString(route.query.eventId);
-  const routeDates = normalizeProductLocalDateKeys(
-    readRouteDateValues(route.query.date),
-  );
-
-  if (routeEventId !== criteria.eventId.toString()) {
-    return false;
-  }
-
-  if (routeDates.length !== criteria.dates.length) {
-    return false;
-  }
-
-  return routeDates.every((value, index) => value === criteria.dates[index]);
-};
-
-watch(
-  [availableEvents, routeHasSearchIntent, appliedCriteria],
-  ([events, hasSearchIntent, criteria]) => {
-    if (events.length === 0) {
-      formEventId.value = null;
-      formDates.value = [];
-      return;
-    }
-
-    if (hasSearchIntent && criteria) {
-      formEventId.value = criteria.eventId;
-      formDates.value = [...criteria.dates];
-      return;
-    }
-
-    const defaultEventId = resolveDefaultEventId();
-    if (
-      formEventId.value === null ||
-      !events.some((event) => event.id === formEventId.value)
-    ) {
-      formEventId.value = defaultEventId;
-    }
-    if (formDates.value.length === 0) {
-      formDates.value = [...defaultDateKeys];
-    }
-  },
-  { immediate: true },
-);
-
-watch(
-  appliedCriteria,
-  async (criteria) => {
-    if (
-      !criteria ||
-      !routeHasSearchIntent.value ||
-      isSameSearchQuery(criteria)
-    ) {
-      return;
-    }
-
-    await router.replace({
-      name: "event-pr-search",
-      query: buildSearchQuery(criteria),
-    });
-  },
-  { immediate: true },
-);
-
-watch(showCriteriaDrawer, (isOpen) => {
-  if (!isOpen || !appliedCriteria.value) {
-    return;
-  }
-
-  drawerEventId.value = appliedCriteria.value.eventId;
-  drawerDates.value = [...appliedCriteria.value.dates];
-});
-
-const searchEnabled = computed(
-  () => routeHasSearchIntent.value && appliedCriteria.value !== null,
-);
-const searchQuery = useEventPRSearch(appliedCriteria, searchEnabled);
-const searchResults = computed<PRSearchResult[]>(
-  () => searchQuery.data.value?.results ?? [],
-);
-
-const isResultMode = computed(() => routeHasSearchIntent.value);
-
-const selectedEventTitle = computed(() => {
-  const currentCriteria = appliedCriteria.value;
-  if (currentCriteria) {
-    return availableEvents.value.find(
-      (event) => event.id === currentCriteria.eventId,
-    )?.title;
-  }
-
-  return availableEvents.value.find((event) => event.id === formEventId.value)
-    ?.title;
-});
-
-const criteriaDateSummary = computed(() => {
-  const dates = appliedCriteria.value?.dates ?? formDates.value;
-  return normalizeProductLocalDateKeys(dates)
-    .map((dateKey) => formatProductLocalShortDateLabel(dateKey))
-    .join("、");
-});
-
-const pageTitle = computed(() =>
-  isResultMode.value
-    ? t("eventPRSearch.resultTitle")
-    : t("eventPRSearch.title"),
-);
-
-const pageSubtitle = computed(() => {
-  if (!isResultMode.value) {
-    return "";
-  }
-
-  if (!selectedEventTitle.value || !criteriaDateSummary.value) {
-    return t("eventPRSearch.resultSubtitleFallback");
-  }
-
-  return `${selectedEventTitle.value} · ${criteriaDateSummary.value}`;
-});
-
-const canSubmitForm = computed(
-  () =>
-    formEventId.value !== null &&
-    normalizeCriteriaDates(formDates.value).length > 0,
-);
-const canApplyDrawerCriteria = computed(
-  () =>
-    drawerEventId.value !== null &&
-    normalizeCriteriaDates(drawerDates.value).length > 0,
-);
-
+import {
+  formatProductLocalShortDateLabel,
+  getProductLocalWeekStartDateKey,
+  getTodayProductLocalDateKey,
+  listProductLocalDateKeysFrom,
+  normalizeProductLocalDateKeys,
+} from "@/shared/datetime/productLocalDate";
+
+const SEARCH_CALENDAR_WEEK_COUNT = 4;
+const DAYS_PER_WEEK = 7;
+
+type SearchCriteria = {
+  eventId: number;
+  dates: string[];
+};
+
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+
+const eventsQuery = useAnchorEvents();
+const availableEvents = computed<AnchorEventListItem[]>(
+  () => eventsQuery.data.value ?? [],
+);
+
+const todayDateKey = getTodayProductLocalDateKey();
+const defaultDateKeys = listProductLocalDateKeysFrom(todayDateKey, 3);
+const calendarWindowStartDateKey =
+  getProductLocalWeekStartDateKey(todayDateKey) ?? todayDateKey;
+const allowedDateKeys = listProductLocalDateKeysFrom(
+  calendarWindowStartDateKey,
+  SEARCH_CALENDAR_WEEK_COUNT * DAYS_PER_WEEK,
+).filter((dateKey) => dateKey >= todayDateKey);
+const allowedDateSet = new Set(allowedDateKeys);
+
+const formEventId = ref<number | null>(null);
+const formDates = ref<string[]>([]);
+const drawerEventId = ref<number | null>(null);
+const drawerDates = ref<string[]>([]);
+const showCriteriaDrawer = ref(false);
+const isAutoRedirecting = ref(false);
+const lastAutoRedirectCriteriaKey = ref<string | null>(null);
+
+const readQueryString = (value: unknown): string | null => {
+  if (typeof value !== "string") {
+    return null;
+  }
+  const normalized = value.trim();
+  return normalized.length > 0 ? normalized : null;
+};
+
+const readRouteDateValues = (value: unknown): string[] => {
+  if (Array.isArray(value)) {
+    return value.filter((item): item is string => typeof item === "string");
+  }
+  if (typeof value === "string") {
+    return [value];
+  }
+  return [];
+};
+
+const normalizeCriteriaDates = (dates: string[]): string[] => {
+  const normalized = normalizeProductLocalDateKeys(dates).filter((dateKey) =>
+    allowedDateSet.has(dateKey),
+  );
+  return normalized.length > 0 ? normalized : [...defaultDateKeys];
+};
+
+const resolveDefaultEventId = (): number | null =>
+  availableEvents.value[0]?.id ?? null;
+
+const resolveEventId = (value: unknown): number | null => {
+  const raw = readQueryString(value);
+  if (!raw) {
+    return resolveDefaultEventId();
+  }
+
+  const parsed = Number(raw);
+  if (!Number.isFinite(parsed)) {
+    return resolveDefaultEventId();
+  }
+
+  const matchedEvent = availableEvents.value.find(
+    (event) => event.id === parsed,
+  );
+  return matchedEvent?.id ?? resolveDefaultEventId();
+};
+
+const routeHasSearchIntent = computed(
+  () =>
+    readQueryString(route.query.eventId) !== null ||
+    readRouteDateValues(route.query.date).length > 0,
+);
+
+const appliedCriteria = computed<SearchCriteria | null>(() => {
+  if (!routeHasSearchIntent.value || availableEvents.value.length === 0) {
+    return null;
+  }
+
+  const eventId = resolveEventId(route.query.eventId);
+  if (eventId === null) {
+    return null;
+  }
+
+  return {
+    eventId,
+    dates: normalizeCriteriaDates(readRouteDateValues(route.query.date)),
+  };
+});
+
+const buildSearchQuery = (criteria: SearchCriteria) => ({
+  ...route.query,
+  eventId: criteria.eventId.toString(),
+  date: criteria.dates,
+});
+
+const isSameSearchQuery = (criteria: SearchCriteria): boolean => {
+  const routeEventId = readQueryString(route.query.eventId);
+  const routeDates = normalizeProductLocalDateKeys(
+    readRouteDateValues(route.query.date),
+  );
+
+  if (routeEventId !== criteria.eventId.toString()) {
+    return false;
+  }
+
+  if (routeDates.length !== criteria.dates.length) {
+    return false;
+  }
+
+  return routeDates.every((value, index) => value === criteria.dates[index]);
+};
+
+watch(
+  [availableEvents, routeHasSearchIntent, appliedCriteria],
+  ([events, hasSearchIntent, criteria]) => {
+    if (events.length === 0) {
+      formEventId.value = null;
+      formDates.value = [];
+      return;
+    }
+
+    if (hasSearchIntent && criteria) {
+      formEventId.value = criteria.eventId;
+      formDates.value = [...criteria.dates];
+      return;
+    }
+
+    const defaultEventId = resolveDefaultEventId();
+    if (
+      formEventId.value === null ||
+      !events.some((event) => event.id === formEventId.value)
+    ) {
+      formEventId.value = defaultEventId;
+    }
+    if (formDates.value.length === 0) {
+      formDates.value = [...defaultDateKeys];
+    }
+  },
+  { immediate: true },
+);
+
+watch(
+  appliedCriteria,
+  async (criteria) => {
+    if (
+      !criteria ||
+      !routeHasSearchIntent.value ||
+      isSameSearchQuery(criteria)
+    ) {
+      return;
+    }
+
+    await router.replace({
+      name: "event-pr-search",
+      query: buildSearchQuery(criteria),
+    });
+  },
+  { immediate: true },
+);
+
+watch(showCriteriaDrawer, (isOpen) => {
+  if (!isOpen || !appliedCriteria.value) {
+    return;
+  }
+
+  drawerEventId.value = appliedCriteria.value.eventId;
+  drawerDates.value = [...appliedCriteria.value.dates];
+});
+
+const searchEnabled = computed(
+  () => routeHasSearchIntent.value && appliedCriteria.value !== null,
+);
+const searchQuery = useEventPRSearch(appliedCriteria, searchEnabled);
+const searchResults = computed<PRSearchResult[]>(
+  () => searchQuery.data.value?.results ?? [],
+);
+
+const isResultMode = computed(() => routeHasSearchIntent.value);
+
+const selectedEventTitle = computed(() => {
+  const currentCriteria = appliedCriteria.value;
+  if (currentCriteria) {
+    return availableEvents.value.find(
+      (event) => event.id === currentCriteria.eventId,
+    )?.title;
+  }
+
+  return availableEvents.value.find((event) => event.id === formEventId.value)
+    ?.title;
+});
+
+const criteriaDateSummary = computed(() => {
+  const dates = appliedCriteria.value?.dates ?? formDates.value;
+  return normalizeProductLocalDateKeys(dates)
+    .map((dateKey) => formatProductLocalShortDateLabel(dateKey))
+    .join("、");
+});
+
+const pageTitle = computed(() =>
+  isResultMode.value
+    ? t("eventPRSearch.resultTitle")
+    : t("eventPRSearch.title"),
+);
+
+const pageSubtitle = computed(() => {
+  if (!isResultMode.value) {
+    return "";
+  }
+
+  if (!selectedEventTitle.value || !criteriaDateSummary.value) {
+    return t("eventPRSearch.resultSubtitleFallback");
+  }
+
+  return `${selectedEventTitle.value} · ${criteriaDateSummary.value}`;
+});
+
+const canSubmitForm = computed(
+  () =>
+    formEventId.value !== null &&
+    normalizeCriteriaDates(formDates.value).length > 0,
+);
+const canApplyDrawerCriteria = computed(
+  () =>
+    drawerEventId.value !== null &&
+    normalizeCriteriaDates(drawerDates.value).length > 0,
+);
+
 const searchErrorMessage = computed(
   () => searchQuery.error.value?.message ?? t("eventPRSearch.loadFailedHint"),
 );
@@ -437,99 +436,99 @@ const formatSearchResultTimeLabel = (result: PRSearchResult): string =>
   }) ?? t("eventPRSearch.resultCard.unknownTime");
 
 const buildCriteriaKey = (criteria: SearchCriteria): string =>
-  `${criteria.eventId}:${criteria.dates.join(",")}`;
-
-watch(
-  [
-    appliedCriteria,
-    searchResults,
-    () => searchQuery.isLoading.value,
-    () => searchQuery.isError.value,
-  ],
-  async ([criteria, results, isLoading, isError]) => {
-    if (!criteria || isLoading || isError || results.length !== 1) {
-      return;
-    }
-
-    const criteriaKey = buildCriteriaKey(criteria);
-    if (lastAutoRedirectCriteriaKey.value === criteriaKey) {
-      return;
-    }
-
-    lastAutoRedirectCriteriaKey.value = criteriaKey;
-    isAutoRedirecting.value = true;
-    await router.replace(prDetailPath(results[0]!.pr.id as PRId));
-  },
-);
-
-const submitSearch = async () => {
-  if (formEventId.value === null) {
-    return;
-  }
-
-  await router.push({
-    name: "event-pr-search",
-    query: buildSearchQuery({
-      eventId: formEventId.value,
-      dates: normalizeCriteriaDates(formDates.value),
-    }),
-  });
-};
-
-const applyDrawerCriteria = async () => {
-  if (drawerEventId.value === null) {
-    return;
-  }
-
-  showCriteriaDrawer.value = false;
-  isAutoRedirecting.value = false;
-  await router.replace({
-    name: "event-pr-search",
-    query: buildSearchQuery({
-      eventId: drawerEventId.value,
-      dates: normalizeCriteriaDates(drawerDates.value),
-    }),
-  });
-};
-
-const goHome = async () => {
-  await router.push({ name: "home" });
-};
-
-const goEventPlaza = async () => {
-  await router.push({ name: "event-plaza" });
-};
-</script>
-
-<style lang="scss" scoped>
-.event-pr-search-page__state,
-.event-pr-search-page__summary {
-  margin: 0;
-}
-
-.event-pr-search-page__state {
-  padding: var(--sys-spacing-xlarge) 0;
-  text-align: center;
-  color: var(--sys-color-on-surface-variant);
+  `${criteria.eventId}:${criteria.dates.join(",")}`;
+
+watch(
+  [
+    appliedCriteria,
+    searchResults,
+    () => searchQuery.isLoading.value,
+    () => searchQuery.isError.value,
+  ],
+  async ([criteria, results, isLoading, isError]) => {
+    if (!criteria || isLoading || isError || results.length !== 1) {
+      return;
+    }
+
+    const criteriaKey = buildCriteriaKey(criteria);
+    if (lastAutoRedirectCriteriaKey.value === criteriaKey) {
+      return;
+    }
+
+    lastAutoRedirectCriteriaKey.value = criteriaKey;
+    isAutoRedirecting.value = true;
+    await router.replace(prDetailPath(results[0]!.pr.id as PRId));
+  },
+);
+
+const submitSearch = async () => {
+  if (formEventId.value === null) {
+    return;
+  }
+
+  await router.push({
+    name: "event-pr-search",
+    query: buildSearchQuery({
+      eventId: formEventId.value,
+      dates: normalizeCriteriaDates(formDates.value),
+    }),
+  });
+};
+
+const applyDrawerCriteria = async () => {
+  if (drawerEventId.value === null) {
+    return;
+  }
+
+  showCriteriaDrawer.value = false;
+  isAutoRedirecting.value = false;
+  await router.replace({
+    name: "event-pr-search",
+    query: buildSearchQuery({
+      eventId: drawerEventId.value,
+      dates: normalizeCriteriaDates(drawerDates.value),
+    }),
+  });
+};
+
+const goHome = async () => {
+  await router.push({ name: "home" });
+};
+
+const goEventPlaza = async () => {
+  await router.push({ name: "event-plaza" });
+};
+</script>
+
+<style lang="scss" scoped>
+.event-pr-search-page__state,
+.event-pr-search-page__summary {
+  margin: 0;
+}
+
+.event-pr-search-page__state {
+  padding: var(--sys-spacing-xlarge) 0;
+  text-align: center;
+  color: var(--sys-color-on-surface-variant);
   @include mx.pu-font(body);
-}
-
-.event-pr-search-page__summary {
-  margin-bottom: var(--sys-spacing-medium);
-  color: var(--sys-color-on-surface-variant);
+}
+
+.event-pr-search-page__summary {
+  margin-bottom: var(--sys-spacing-medium);
+  color: var(--sys-color-on-surface-variant);
   @include mx.pu-font(body);
-}
-
-.event-pr-search-page__result-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sys-spacing-small);
-}
-
-.event-pr-search-page__footer-actions,
-.event-pr-search-page__drawer-actions {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: var(--sys-spacing-small);
-}
-</style>
+}
+
+.event-pr-search-page__result-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sys-spacing-small);
+}
+
+.event-pr-search-page__footer-actions,
+.event-pr-search-page__drawer-actions {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--sys-spacing-small);
+}
+</style>
diff --git a/apps/frontend/src/pages/OrderingSupportPage.vue b/apps/frontend/src/pages/OrderingSupportPage.vue
index 2d3f6390b..e1ae5399e 100644
--- a/apps/frontend/src/pages/OrderingSupportPage.vue
+++ b/apps/frontend/src/pages/OrderingSupportPage.vue
@@ -1,8 +1,5 @@
 <template>
-  <OrderingPageShell
-    :title="pageTitle"
-    :back-fallback-to="backFallbackTo"
-  >
+  <OrderingPageShell :title="pageTitle" :back-fallback-to="backFallbackTo">
     <div class="ordering-support" data-testid="ordering.support.page">
       <template v-if="supportHandoff">
         <section
@@ -72,7 +69,7 @@
           </Button>
         </section>
 
-        <Modal
+        <PuModal
           :open="showContactModal"
           :title="t('ordering.support.contactModalTitle')"
           max-width="420px"
@@ -106,7 +103,7 @@
               {{ t("common.close") }}
             </Button>
           </div>
-        </Modal>
+        </PuModal>
       </template>
 
       <section
@@ -148,6 +145,7 @@
 </template>
 
 <script setup lang="ts">
+import { PuModal } from "@partner-up-dev/design-web";
 import { computed, nextTick, onMounted, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
@@ -167,8 +165,6 @@ import {
   usePublicConfig,
 } from "@/shared/config/queries/usePublicConfig";
 import Button from "@/shared/ui/actions/Button.vue";
-import Modal from "@/shared/ui/overlay/Modal.vue";
-import { useBodyScrollLock } from "@/shared/ui/overlay/useBodyScrollLock";
 import { useCloudStorage } from "@/shared/upload/useCloudStorage";
 
 const { t } = useI18n();
@@ -212,9 +208,9 @@ const orderingEntry = ref<OrderingEntryPayload | null>(readOrderingEntry());
 const supportHandoff = ref<OrderingSupportHandoffPayload | null>(
   readSupportHandoff(),
 );
-const summaryCardRef = ref<InstanceType<typeof OrderingSupportSummaryCard> | null>(
-  null,
-);
+const summaryCardRef = ref<InstanceType<
+  typeof OrderingSupportSummaryCard
+> | null>(null);
 const summaryPosterUrl = ref<string | null>(null);
 const summaryPosterGenerating = ref(false);
 const summaryPosterError = ref<string | null>(null);
@@ -269,7 +265,9 @@ const summaryPosterHint = computed(() =>
 );
 
 const backFallbackTo = computed(() =>
-  orderingEntry.value?.prId ? { path: `/pr/${orderingEntry.value.prId}` } : { path: "/" },
+  orderingEntry.value?.prId
+    ? { path: `/pr/${orderingEntry.value.prId}` }
+    : { path: "/" },
 );
 
 const pageTitle = computed(() =>
@@ -294,9 +292,9 @@ const handleRecoveryAction = (): void => {
   void router.push(orderingEntry.value ? { name: "order-new" } : { path: "/" });
 };
 
-useBodyScrollLock(computed(() => showContactModal.value));
-
-const loadHtml2Canvas = async (): Promise<typeof import("html2canvas")["default"]> => {
+const loadHtml2Canvas = async (): Promise<
+  (typeof import("html2canvas"))["default"]
+> => {
   const module = await import("html2canvas");
   return module.default;
 };
diff --git a/apps/frontend/src/pages/PRPage.vue b/apps/frontend/src/pages/PRPage.vue
index 095dd4ced..b434c8e36 100644
--- a/apps/frontend/src/pages/PRPage.vue
+++ b/apps/frontend/src/pages/PRPage.vue
@@ -40,25 +40,17 @@
         </template>
       </PageHeader>
 
-      <Modal
+      <PuModal
         v-if="showEditContentModal && id !== null"
         :open="showEditContentModal"
         max-width="480px"
         :title="t('editContentModal.title')"
         @close="closeEditContentModal"
       >
-        <PREditor
-          ref="editorRef"
-          :pr-id="id"
-          @saved="closeEditContentModal"
-        />
+        <PREditor ref="editorRef" :pr-id="id" @saved="closeEditContentModal" />
 
         <div class="creator-modal-actions creator-modal-actions--spaced">
-          <Button
-            type="button"
-            tone="outline"
-            @click="closeEditContentModal"
-          >
+          <Button type="button" tone="outline" @click="closeEditContentModal">
             {{ t("common.cancel") }}
           </Button>
           <Button
@@ -71,9 +63,9 @@
             {{ t("editContentModal.confirmAction") }}
           </Button>
         </div>
-      </Modal>
+      </PuModal>
 
-      <Modal
+      <PuModal
         v-if="showModifyStatusModal && id !== null"
         :open="showModifyStatusModal"
         max-width="360px"
@@ -101,15 +93,14 @@
 
         <ErrorToast
           v-if="hasUpdateStatusError"
-          :message="updateStatusError?.message || t('modifyStatusModal.updateFailed')"
+          :message="
+            updateStatusError?.message || t('modifyStatusModal.updateFailed')
+          "
           @close="resetStatusUpdate"
         />
-      </Modal>
+      </PuModal>
 
-      <PRDraftPublishNotice
-        :pr-id="id"
-        :pr="prDetail"
-      />
+      <PRDraftPublishNotice :pr-id="id" :pr="prDetail" />
 
       <PuInlineNotice
         v-if="showEventAssistedCreateHandoffNotice"
@@ -134,9 +125,7 @@
           :join-entry-context="joinEntryContext"
         />
 
-        <PRConfirmationAction
-          :pr="prDetail"
-        />
+        <PRConfirmationAction :pr="prDetail" />
 
         <PRCheckInFeedbackActions :pr="prDetail" />
 
@@ -190,8 +179,6 @@ import { useI18n } from "vue-i18n";
 import type { PRStatusManual } from "@partner-up-dev/backend";
 import Button from "@/shared/ui/actions/Button.vue";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import Modal from "@/shared/ui/overlay/Modal.vue";
-import { useBodyScrollLock } from "@/shared/ui/overlay/useBodyScrollLock";
 import PageFooter from "@/shared/ui/sections/PageFooter.vue";
 import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
 import PRStatusBadge from "@/domains/pr/ui/primitives/PRStatusBadge.vue";
@@ -233,7 +220,12 @@ import {
   type PlacementInstanceProjection,
 } from "@/domains/commerce/queries/useCommerce";
 import { ORDERING_ENTRY_STORAGE_KEY } from "@/domains/commerce/model/ordering-entry-storage";
-import { PuInlineNotice, PuLoadingState, PuPageScaffold } from "@partner-up-dev/design-web";
+import {
+  PuInlineNotice,
+  PuLoadingState,
+  PuPageScaffold,
+  PuModal,
+} from "@partner-up-dev/design-web";
 
 type CreatorSecondaryActionType =
   | "CREATOR_EDIT_CONTENT"
@@ -248,14 +240,17 @@ const prDetail = computed(() => data.value);
 const pendingReplayRegistry = providePRPendingReplayRegistry();
 const factsCardTargetRef = ref<HTMLElement | null>(null);
 const editorRef = ref<InstanceType<typeof PREditor> | null>(null);
-const updateStatusFormRef =
-  ref<InstanceType<typeof UpdatePRStatusForm> | null>(null);
+const updateStatusFormRef = ref<InstanceType<typeof UpdatePRStatusForm> | null>(
+  null,
+);
 const showEditContentModal = ref(false);
 const showModifyStatusModal = ref(false);
 const matchedPRHandoff = useMatchedPRHandoff();
 const prReadyForPendingReplay = computed(
   () =>
-    id.value !== null && prDetail.value !== undefined && prDetail.value !== null,
+    id.value !== null &&
+    prDetail.value !== undefined &&
+    prDetail.value !== null,
 );
 
 const prDisplayTitle = computed(() => {
@@ -374,14 +369,6 @@ const isEditContentFormValid = computed(() => {
   return isRef<boolean>(canSubmit) ? canSubmit.value : Boolean(canSubmit);
 });
 
-useBodyScrollLock(
-  computed(
-    () =>
-      showEditContentModal.value ||
-      showModifyStatusModal.value,
-  ),
-);
-
 const { shareUrl, spmRouteKey, prShareData } = usePRShareContext({
   id,
   pr: prDetail,
@@ -451,7 +438,7 @@ const handleJoinSuccessClosed = async (): Promise<void> => {
   });
 };
 
-const readJsonOrThrow = async <T>(response: Response): Promise<T> => {
+const readJsonOrThrow = async <T,>(response: Response): Promise<T> => {
   if (!response.ok) {
     throw new Error("Request failed");
   }
diff --git a/apps/frontend/src/processes/wechat/WeChatOAuthLoginModal.vue b/apps/frontend/src/processes/wechat/WeChatOAuthLoginModal.vue
index 185f14b80..6a52058cd 100644
--- a/apps/frontend/src/processes/wechat/WeChatOAuthLoginModal.vue
+++ b/apps/frontend/src/processes/wechat/WeChatOAuthLoginModal.vue
@@ -1,29 +1,23 @@
 <template>
-  <Modal
+  <PuModal
     :open="pending"
     max-width="360px"
     title="微信登录"
-    @close="keepOpen"
+    :close-on-overlay="false"
+    :close-on-escape="false"
   >
     <div class="wechat-oauth-login-modal" aria-live="polite" aria-busy="true">
       <div class="wechat-oauth-login-modal__spinner" aria-hidden="true"></div>
       <p class="wechat-oauth-login-modal__text">正在尝试微信登录...</p>
     </div>
-  </Modal>
+  </PuModal>
 </template>
 
 <script setup lang="ts">
-import Modal from "@/shared/ui/overlay/Modal.vue";
-import { useBodyScrollLock } from "@/shared/ui/overlay/useBodyScrollLock";
+import { PuModal } from "@partner-up-dev/design-web";
 import { useWeChatOAuthLoginPending } from "@/processes/wechat/oauth-login-pending";
 
 const { pending } = useWeChatOAuthLoginPending();
-
-useBodyScrollLock(pending);
-
-const keepOpen = (): void => {
-  // The OAuth flow owns this state; users get failure handling from the handoff gate.
-};
 </script>
 
 <style lang="scss" scoped>
@@ -39,8 +33,14 @@ const keepOpen = (): void => {
 }
 
 .wechat-oauth-login-modal__spinner {
-  width: calc(var(--sys-spacing-large) + var(--sys-spacing-small) + var(--sys-spacing-xsmall));
-  height: calc(var(--sys-spacing-large) + var(--sys-spacing-small) + var(--sys-spacing-xsmall));
+  width: calc(
+    var(--sys-spacing-large) + var(--sys-spacing-small) +
+      var(--sys-spacing-xsmall)
+  );
+  height: calc(
+    var(--sys-spacing-large) + var(--sys-spacing-small) +
+      var(--sys-spacing-xsmall)
+  );
   border: 3px solid var(--sys-color-outline-variant);
   border-top-color: var(--sys-color-primary);
   border-radius: 50%;
diff --git a/apps/frontend/src/shared/ui/AGENTS.md b/apps/frontend/src/shared/ui/AGENTS.md
index ae64d39ee..09cefdbe2 100644
--- a/apps/frontend/src/shared/ui/AGENTS.md
+++ b/apps/frontend/src/shared/ui/AGENTS.md
@@ -40,9 +40,9 @@ Display and feedback:
 
 Overlay:
 
-- `overlay/Modal.vue`: generic modal primitive. Add scroll locking with `useBodyScrollLock(computed(() => open.value))` in the parent when needed.
-- `overlay/ConfirmDialog.vue`: standard confirm/cancel dialog built on `Modal` and `Button`.
-- `overlay/BottomDrawer.vue`: bottom drawer overlay for secondary mobile-oriented workflows.
+- `PuModal` from `@partner-up-dev/design-web`: generic focused modal shell. Use direct package imports at usage sites; set `closeOnOverlay` or `closeOnEscape` only when the workflow needs custom dismissal rules.
+- `PuDialog` from `@partner-up-dev/design-web`: structured confirmation and short focused workflow dialog. Use package action text, loading, disabled, tone, and slots directly instead of adding a local confirm wrapper.
+- `PuDrawer` from `@partner-up-dev/design-web`: drawer shell for secondary workflows, filters, and details. Use `visible` / `update:visible` directly, and map close payloads at the usage site only when product semantics depend on close reason.
 
 ## Reuse Rules
 
diff --git a/apps/frontend/src/shared/ui/overlay/BottomDrawer.vue b/apps/frontend/src/shared/ui/overlay/BottomDrawer.vue
deleted file mode 100644
index 6b69555a9..000000000
--- a/apps/frontend/src/shared/ui/overlay/BottomDrawer.vue
+++ /dev/null
@@ -1,208 +0,0 @@
-<template>
-  <Transition name="bottom-drawer">
-    <div
-      v-show="open"
-      class="bottom-drawer-overlay"
-      :style="{ zIndex: String(zIndex) }"
-      @click.self="handleBackdropClick"
-    >
-      <section
-        class="bottom-drawer"
-        :aria-label="resolvedAriaLabel"
-        aria-modal="true"
-        role="dialog"
-        :style="{ maxWidth: props.maxWidth, minHeight: props.minHeight }"
-      >
-        <header
-          v-if="$slots.header || title || showClose"
-          class="bottom-drawer-header"
-        >
-          <slot name="header">
-            <h3 v-if="title" class="bottom-drawer-title">{{ title }}</h3>
-          </slot>
-          <Button
-            v-if="showClose"
-            class="bottom-drawer-close"
-            appearance="pill"
-            tone="ghost"
-            size="sm"
-            type="button"
-            aria-label="Close drawer"
-            @click="emitClose('close-button')"
-          >
-            <span class="i-mdi-close" aria-hidden="true"></span>
-          </Button>
-        </header>
-
-        <div class="bottom-drawer-body">
-          <slot />
-        </div>
-
-        <footer v-if="$slots.footer" class="bottom-drawer-footer">
-          <slot name="footer" />
-        </footer>
-      </section>
-    </div>
-  </Transition>
-</template>
-
-<script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, watch } from "vue";
-import Button from "@/shared/ui/actions/Button.vue";
-
-interface Props {
-  open: boolean;
-  title?: string;
-  ariaLabel?: string;
-  showClose?: boolean;
-  closeOnBackdrop?: boolean;
-  closeOnEscape?: boolean;
-  maxWidth?: string;
-  minHeight?: string;
-  zIndex?: number;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  title: undefined,
-  ariaLabel: undefined,
-  showClose: true,
-  closeOnBackdrop: true,
-  closeOnEscape: true,
-  maxWidth: "720px",
-  minHeight: "0",
-  zIndex: 1000,
-});
-
-type BottomDrawerCloseReason = "backdrop" | "close-button" | "escape";
-
-const emit = defineEmits<{
-  close: [reason: BottomDrawerCloseReason];
-}>();
-
-const resolvedAriaLabel = computed(
-  () => props.ariaLabel ?? props.title ?? "Bottom drawer",
-);
-
-const emitClose = (reason: BottomDrawerCloseReason): void => {
-  emit("close", reason);
-};
-
-const handleBackdropClick = (): void => {
-  if (!props.closeOnBackdrop) return;
-  emitClose("backdrop");
-};
-
-const handleEscape = (event: KeyboardEvent): void => {
-  if (!props.closeOnEscape) return;
-  if (event.key !== "Escape" || !props.open) return;
-  emitClose("escape");
-};
-
-watch(
-  () => props.open,
-  (isOpen) => {
-    if (isOpen) {
-      document.addEventListener("keydown", handleEscape);
-      return;
-    }
-    document.removeEventListener("keydown", handleEscape);
-  },
-);
-
-onMounted(() => {
-  if (props.open) {
-    document.addEventListener("keydown", handleEscape);
-  }
-});
-
-onBeforeUnmount(() => {
-  document.removeEventListener("keydown", handleEscape);
-});
-</script>
-
-<style lang="scss" scoped>
-.bottom-drawer-overlay {
-  position: fixed;
-  inset: 0;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  padding: calc(var(--sys-spacing-medium) + var(--pu-safe-top))
-    calc(var(--sys-spacing-medium) + var(--pu-safe-right))
-    calc(var(--sys-spacing-medium) + var(--pu-safe-bottom))
-    calc(var(--sys-spacing-medium) + var(--pu-safe-left));
-  background: rgba(0, 0, 0, 0.48);
-}
-
-.bottom-drawer {
-  width: 100%;
-  max-height: calc(
-    var(--pu-vh) - var(--pu-safe-top) - (2 * var(--sys-spacing-medium))
-  );
-  border-radius: var(--sys-radius-large) var(--sys-radius-large)
-    var(--sys-radius-medium) var(--sys-radius-medium);
-  background: var(--sys-color-surface);
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  overflow: hidden;
-}
-
-.bottom-drawer-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--sys-spacing-small);
-  padding: var(--sys-spacing-small);
-}
-
-.bottom-drawer-title {
-  @include mx.pu-font(section);
-  margin: 0;
-}
-
-.bottom-drawer-body {
-  flex: 1 1 auto;
-  min-height: 0;
-  padding: var(--sys-spacing-small) var(--sys-spacing-small)
-    calc(var(--sys-spacing-small) + var(--pu-safe-bottom));
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  -webkit-overflow-scrolling: touch;
-  touch-action: pan-y;
-}
-
-.bottom-drawer-footer {
-  padding: 0 var(--sys-spacing-small)
-    calc(var(--sys-spacing-medium) + var(--pu-safe-bottom));
-}
-
-.bottom-drawer-enter-active,
-.bottom-drawer-leave-active {
-  transition: background-color 220ms ease;
-}
-
-.bottom-drawer-enter-active .bottom-drawer,
-.bottom-drawer-leave-active .bottom-drawer {
-  transition: transform 220ms ease;
-}
-
-.bottom-drawer-enter-from,
-.bottom-drawer-leave-to {
-  background: rgba(0, 0, 0, 0);
-}
-
-.bottom-drawer-enter-from .bottom-drawer,
-.bottom-drawer-leave-to .bottom-drawer {
-  transform: translateY(calc(100% + var(--sys-spacing-large)));
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .bottom-drawer-enter-active,
-  .bottom-drawer-leave-active,
-  .bottom-drawer-enter-active .bottom-drawer,
-  .bottom-drawer-leave-active .bottom-drawer {
-    transition: none;
-  }
-}
-</style>
diff --git a/apps/frontend/src/shared/ui/overlay/ConfirmDialog.vue b/apps/frontend/src/shared/ui/overlay/ConfirmDialog.vue
deleted file mode 100644
index 15b5db45f..000000000
--- a/apps/frontend/src/shared/ui/overlay/ConfirmDialog.vue
+++ /dev/null
@@ -1,118 +0,0 @@
-<template>
-  <Modal :open="open" :title="title" :max-width="maxWidth" @close="$emit('close')">
-    <div class="confirm-dialog">
-      <slot>
-        <p v-if="message" class="confirm-dialog__message">{{ message }}</p>
-        <p v-if="description" class="confirm-dialog__description">
-          {{ description }}
-        </p>
-      </slot>
-
-      <div class="confirm-dialog__actions">
-        <Button
-          type="button"
-          appearance="rect"
-          tone="outline"
-          block
-          @click="$emit('close')"
-        >
-          {{ cancelLabelText }}
-        </Button>
-        <Button
-          type="button"
-          appearance="rect"
-          :tone="confirmTone"
-          :loading="loading"
-          :disabled="disabled"
-          block
-          @click="$emit('confirm')"
-        >
-          {{ confirmLabelText }}
-        </Button>
-      </div>
-    </div>
-  </Modal>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import { useI18n } from "vue-i18n";
-import Button from "@/shared/ui/actions/Button.vue";
-import Modal from "@/shared/ui/overlay/Modal.vue";
-
-type ConfirmTone = "primary" | "danger" | "secondary";
-
-const props = withDefaults(
-  defineProps<{
-    open: boolean;
-    title: string;
-    message?: string;
-    description?: string;
-    confirmLabel?: string;
-    cancelLabel?: string;
-    confirmTone?: ConfirmTone;
-    loading?: boolean;
-    disabled?: boolean;
-    maxWidth?: string;
-  }>(),
-  {
-    message: undefined,
-    description: undefined,
-    confirmLabel: undefined,
-    cancelLabel: undefined,
-    confirmTone: "primary",
-    loading: false,
-    disabled: false,
-    maxWidth: "420px",
-  },
-);
-
-defineEmits<{
-  close: [];
-  confirm: [];
-}>();
-
-const { t } = useI18n();
-
-const confirmLabelText = computed(() => props.confirmLabel ?? t("common.confirm"));
-const cancelLabelText = computed(() => props.cancelLabel ?? t("common.cancel"));
-</script>
-
-<style lang="scss" scoped>
-.confirm-dialog {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sys-spacing-large);
-}
-
-.confirm-dialog__message,
-.confirm-dialog__description {
-  margin: 0;
-}
-
-.confirm-dialog__message {
-  @include mx.pu-font(body);
-  color: var(--sys-color-on-surface);
-}
-
-.confirm-dialog__description {
-  @include mx.pu-font(support);
-  color: var(--sys-color-on-surface-variant);
-}
-
-.confirm-dialog__actions {
-  display: flex;
-  gap: var(--sys-spacing-small);
-}
-
-.confirm-dialog__actions :deep(.ui-button) {
-  flex: 1;
-  min-width: 0;
-}
-
-@media (max-width: 640px) {
-  .confirm-dialog__actions {
-    flex-direction: column;
-  }
-}
-</style>
diff --git a/apps/frontend/src/shared/ui/overlay/Modal.vue b/apps/frontend/src/shared/ui/overlay/Modal.vue
deleted file mode 100644
index 2acea127e..000000000
--- a/apps/frontend/src/shared/ui/overlay/Modal.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template>
-  <Teleport to="body">
-    <div v-if="open" class="modal-overlay" @click.self="handleClose">
-      <div class="modal" :style="{ maxWidth }">
-        <slot name="header">
-          <h3 v-if="title" class="modal-title">{{ title }}</h3>
-        </slot>
-        <slot />
-      </div>
-    </div>
-  </Teleport>
-</template>
-
-<script setup lang="ts">
-import { onMounted, onBeforeUnmount, watch } from "vue";
-
-interface Props {
-  open: boolean;
-  maxWidth?: string;
-  title?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  maxWidth: "480px",
-  title: undefined,
-});
-
-const emit = defineEmits<{
-  close: [];
-}>();
-
-const handleClose = (): void => {
-  emit("close");
-};
-
-const handleEscape = (e: KeyboardEvent): void => {
-  if (e.key === "Escape" && props.open) {
-    handleClose();
-  }
-};
-
-watch(
-  () => props.open,
-  (isOpen) => {
-    if (isOpen) {
-      document.addEventListener("keydown", handleEscape);
-    } else {
-      document.removeEventListener("keydown", handleEscape);
-    }
-  },
-);
-
-onMounted(() => {
-  if (props.open) {
-    document.addEventListener("keydown", handleEscape);
-  }
-});
-
-onBeforeUnmount(() => {
-  document.removeEventListener("keydown", handleEscape);
-});
-</script>
-
-<style lang="scss" scoped>
-.modal-overlay {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: calc(var(--sys-spacing-medium) + var(--pu-safe-top))
-    calc(var(--sys-spacing-medium) + var(--pu-safe-right))
-    calc(var(--sys-spacing-medium) + var(--pu-safe-bottom))
-    calc(var(--sys-spacing-medium) + var(--pu-safe-left));
-  z-index: 1000;
-}
-
-.modal {
-  background: var(--sys-color-surface);
-  border-radius: var(--sys-radius-large);
-  padding: var(--sys-spacing-large);
-  width: 100%;
-  max-height: calc(
-    var(--pu-vh) -
-      (2 * var(--sys-spacing-medium)) - var(--pu-safe-top) - var(--pu-safe-bottom)
-  );
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-}
-
-.modal-title {
-  @include mx.pu-font(title);
-  margin-bottom: var(--sys-spacing-medium);
-}
-</style>
diff --git a/apps/frontend/src/shared/ui/overlay/useBodyScrollLock.ts b/apps/frontend/src/shared/ui/overlay/useBodyScrollLock.ts
deleted file mode 100644
index 74c3e6b50..000000000
--- a/apps/frontend/src/shared/ui/overlay/useBodyScrollLock.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { watch, onBeforeUnmount, type Ref } from "vue";
-
-let activeLockCount = 0;
-let originalOverflow: string | null = null;
-
-const acquireBodyScrollLock = (): boolean => {
-  if (typeof document === "undefined") {
-    return false;
-  }
-
-  if (activeLockCount === 0) {
-    originalOverflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-  }
-
-  activeLockCount += 1;
-  return true;
-};
-
-const releaseBodyScrollLock = (): void => {
-  if (typeof document === "undefined" || activeLockCount === 0) {
-    return;
-  }
-
-  activeLockCount -= 1;
-
-  if (activeLockCount === 0) {
-    document.body.style.overflow = originalOverflow ?? "";
-    originalOverflow = null;
-  }
-};
-
-export const useBodyScrollLock = (locked: Ref<boolean>): void => {
-  let lockAcquired = false;
-
-  const syncLock = (shouldLock: boolean): void => {
-    if (shouldLock && !lockAcquired) {
-      lockAcquired = acquireBodyScrollLock();
-      return;
-    }
-
-    if (!shouldLock && lockAcquired) {
-      releaseBodyScrollLock();
-      lockAcquired = false;
-    }
-  };
-
-  watch(locked, syncLock, { immediate: true });
-
-  onBeforeUnmount(() => {
-    if (lockAcquired) {
-      releaseBodyScrollLock();
-      lockAcquired = false;
-    }
-  });
-};
diff --git a/apps/frontend/src/shared/wechat/OfficialAccountQrModal.vue b/apps/frontend/src/shared/wechat/OfficialAccountQrModal.vue
index 9daaf1725..bde30fb5a 100644
--- a/apps/frontend/src/shared/wechat/OfficialAccountQrModal.vue
+++ b/apps/frontend/src/shared/wechat/OfficialAccountQrModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <Modal
+  <PuModal
     :open="open"
     :title="t('officialAccountFollow.modalTitle')"
     max-width="420px"
@@ -19,14 +19,13 @@
         {{ t("officialAccountFollow.qrMissing") }}
       </p>
     </div>
-  </Modal>
+  </PuModal>
 </template>
 
 <script setup lang="ts">
+import { PuModal } from "@partner-up-dev/design-web";
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
-import Modal from "@/shared/ui/overlay/Modal.vue";
-import { useBodyScrollLock } from "@/shared/ui/overlay/useBodyScrollLock";
 import { useWeChatOfficialAccountQrCode } from "@/shared/wechat/useWeChatOfficialAccountQrCode";
 
 interface Props {
@@ -39,8 +38,6 @@ const emit = defineEmits<{
 }>();
 const { t } = useI18n();
 const { officialAccountQrCodeUrl } = useWeChatOfficialAccountQrCode();
-
-useBodyScrollLock(computed(() => props.open));
 </script>
 
 <style lang="scss" scoped>
diff --git a/apps/frontend/src/shared/wechat/WeChatMiniProgramJssdkNoticeModal.vue b/apps/frontend/src/shared/wechat/WeChatMiniProgramJssdkNoticeModal.vue
index 0822c5441..54cca994c 100644
--- a/apps/frontend/src/shared/wechat/WeChatMiniProgramJssdkNoticeModal.vue
+++ b/apps/frontend/src/shared/wechat/WeChatMiniProgramJssdkNoticeModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <Modal
+  <PuModal
     :open="open"
     :title="t('wechatMiniProgramWebView.title')"
     max-width="420px"
@@ -18,10 +18,7 @@
           class="mini-program-jssdk-notice__qr-image"
         />
         <p v-else class="mini-program-jssdk-notice__qr-empty">
-          {{
-            qrCodeError ??
-            t("wechatMiniProgramWebView.qrGenerating")
-          }}
+          {{ qrCodeError ?? t("wechatMiniProgramWebView.qrGenerating") }}
         </p>
       </div>
 
@@ -51,16 +48,15 @@
         </Button>
       </div>
     </div>
-  </Modal>
+  </PuModal>
 </template>
 
 <script setup lang="ts">
+import { PuModal } from "@partner-up-dev/design-web";
 import { computed, ref, toRef, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { copyToClipboard } from "@/lib/clipboard";
 import Button from "@/shared/ui/actions/Button.vue";
-import Modal from "@/shared/ui/overlay/Modal.vue";
-import { useBodyScrollLock } from "@/shared/ui/overlay/useBodyScrollLock";
 import { useCurrentWebPageQrCode } from "@/shared/wechat/useCurrentWebPageQrCode";
 
 const props = defineProps<{
@@ -100,8 +96,6 @@ const copyCurrentUrl = async (): Promise<void> => {
     copyState.value = "error";
   }
 };
-
-useBodyScrollLock(openRef);
 </script>
 
 <style scoped lang="scss">
diff --git a/tasks/design-web-package-integration/component-migration/00-control-surface.md b/tasks/design-web-package-integration/component-migration/00-control-surface.md
index dfb0522c3..40643a5f7 100644
--- a/tasks/design-web-package-integration/component-migration/00-control-surface.md
+++ b/tasks/design-web-package-integration/component-migration/00-control-surface.md
@@ -16,9 +16,9 @@ design package should not absorb.
 
 - Input route: `Constraint`.
 - Active mode: `Execute`.
-- Implementation status: second slice implemented and verified locally. Usage
-  sites now consume the relevant package components directly and the migrated
-  local facades have been deleted.
+- Implementation status: third overlay slice implemented and verified locally.
+  Usage sites now consume the relevant package components directly and the
+  migrated local facades have been deleted.
 
 ## Guardrails Touched
 
@@ -113,13 +113,19 @@ design package should not absorb.
 - Agent Skill source clarified: the up-to-date `design-web` TanStack Intent
   skill is shipped inside `@partner-up-dev/design-web@0.4.0` under
   `skills/design-web`. Agents should load it with `pnpm dlx
-  @tanstack/intent@latest load @partner-up-dev/design-web#design-web` after
+@tanstack/intent@latest load @partner-up-dev/design-web#design-web` after
   package updates instead of hand-editing or relying on stale local copies under
   `~/.codex/skills`.
-- Next slice direction: migrate overlay primitives directly to package
-  components: `Modal` -> `PuModal`, `ConfirmDialog` -> `PuDialog` or
-  `PuModal` + `PuButton` depending on package API fit, and `BottomDrawer` ->
-  `PuDrawer`.
+- Third slice completed: migrated overlay primitives directly to package
+  components: `Modal` -> `PuModal`, `ConfirmDialog` -> `PuDialog`, and
+  `BottomDrawer` -> `PuDrawer`. Do not keep local overlay wrappers for visual,
+  DOM, close-event, or animation parity. Usage sites own any product-specific
+  semantic mapping, such as treating `PuDrawer` close reason `overlay` as the
+  former preference-drawer `backdrop` auto-save path.
+- Third slice evidence: local wrappers deleted in this slice are `Modal`,
+  `ConfirmDialog`, `BottomDrawer`, and `useBodyScrollLock`. The old
+  `lib/body-scroll-lock.ts` helper was also deleted after overlay call sites no
+  longer needed parent-managed scroll locking.
 
 ## First Slice Candidate
 
@@ -157,14 +163,18 @@ Baseline per component slice:
 - Second-slice post-`WheelPicker` verification on 2026-06-13: frontend build
   passed; token lint passed; frontend unit tests passed, 26 files / 117 tests;
   migrated wrapper import scan returned no usage-site references; `git
-  diff --check` passed.
+diff --check` passed.
+- Third-slice verification on 2026-06-13: frontend build passed; token lint
+  passed; frontend unit tests passed, 26 files / 117 tests; migrated overlay
+  and scroll-lock scan returned no usage-site references; package API scan found
+  no old `PuDialog` or `PuDrawer` prop vocabulary; `git diff --check` passed.
 - Agent Skill verification on 2026-06-13: `pnpm dlx
-  @tanstack/intent@latest list --json` found
+@tanstack/intent@latest list --json` found
   `@partner-up-dev/design-web#design-web` from the installed `0.4.0` package;
   `pnpm dlx @tanstack/intent@latest load @partner-up-dev/design-web#design-web`
   returned the updated skill with `PuDialog`; `pnpm dlx
-  @tanstack/intent@latest validate
-  apps/frontend/node_modules/@partner-up-dev/design-web/skills/design-web`
+@tanstack/intent@latest validate
+apps/frontend/node_modules/@partner-up-dev/design-web/skills/design-web`
   passed.
 - Browser smoke with Edge through Playwright on `http://localhost:4001/` and
   `/pr/1` - passed. Evidence:
diff --git a/tasks/design-web-package-integration/component-migration/10-slice-index.md b/tasks/design-web-package-integration/component-migration/10-slice-index.md
index 4e71ef469..5598b5384 100644
--- a/tasks/design-web-package-integration/component-migration/10-slice-index.md
+++ b/tasks/design-web-package-integration/component-migration/10-slice-index.md
@@ -5,86 +5,96 @@ plans, not permission to edit production code.
 
 ## Prerequisite
 
-| File | Scope | Status |
-| --- | --- | --- |
-| `components/00-type-entry.md` | Remove the local package-root type shim and use package types. | Done |
+| File                          | Scope                                                          | Status |
+| ----------------------------- | -------------------------------------------------------------- | ------ |
+| `components/00-type-entry.md` | Remove the local package-root type shim and use package types. | Done   |
 
 ## Selected First Slice Candidate
 
 This is the proposed first execution slice after the user explicitly starts
 code changes.
 
-| Order | File | Scope | Status |
-| --- | --- | --- | --- |
-| 1 | `components/00-type-entry.md` | Real package declarations through `@partner-up-dev/design-web@0.4.0`. | Done |
-| 2 | `components/inline-notice.md` | Prove `PuInlineNotice` compatibility through the local facade. | Done; direct usage-site cleanup moved to second slice |
-| 3 | `components/empty-state.md` | Replace local `PuCard` composition with `PuEmptyState`. | Done; direct usage-site cleanup moved to second slice |
-| 4 | `components/loading-indicator.md` | Replace local spinner with `PuLoadingState`. | Done; direct usage-site cleanup moved to second slice |
-| 5 | `components/page-scaffold.md` | Confirm `PuPageScaffold` wrappers through real package declarations. | Done; direct usage-site cleanup moved to second slice |
-| 6 | `components/page-footer.md` | Fix footer padding as a bounded page chrome correction. | Done |
+| Order | File                              | Scope                                                                 | Status                                                |
+| ----- | --------------------------------- | --------------------------------------------------------------------- | ----------------------------------------------------- |
+| 1     | `components/00-type-entry.md`     | Real package declarations through `@partner-up-dev/design-web@0.4.0`. | Done                                                  |
+| 2     | `components/inline-notice.md`     | Prove `PuInlineNotice` compatibility through the local facade.        | Done; direct usage-site cleanup moved to second slice |
+| 3     | `components/empty-state.md`       | Replace local `PuCard` composition with `PuEmptyState`.               | Done; direct usage-site cleanup moved to second slice |
+| 4     | `components/loading-indicator.md` | Replace local spinner with `PuLoadingState`.                          | Done; direct usage-site cleanup moved to second slice |
+| 5     | `components/page-scaffold.md`     | Confirm `PuPageScaffold` wrappers through real package declarations.  | Done; direct usage-site cleanup moved to second slice |
+| 6     | `components/page-footer.md`       | Fix footer padding as a bounded page chrome correction.               | Done                                                  |
 
 ## First Pass: Already Close To Package Ownership
 
-| File | Local Component | Package Target | Status |
-| --- | --- | --- | --- |
-| `components/inline-notice.md` | `shared/ui/feedback/InlineNotice.vue` | `PuInlineNotice` | Done; usage sites migrated directly and wrapper deleted |
-| `components/page-scaffold.md` | `shared/ui/layout/PageScaffold*.vue` | `PuPageScaffold` | Done; usage sites migrated directly and wrappers deleted |
-| `components/empty-state.md` | `shared/ui/feedback/EmptyState.vue` | `PuEmptyState` | Done; usage sites migrated directly and wrapper deleted |
-| `components/loading-indicator.md` | `shared/ui/feedback/LoadingIndicator.vue` | `PuLoadingState` | Done; usage sites migrated directly and wrapper deleted |
-| `components/page-footer.md` | `shared/ui/sections/PageFooter.vue` | App chrome over `PuPageScaffold` footer slot | Done |
+| File                              | Local Component                           | Package Target                               | Status                                                   |
+| --------------------------------- | ----------------------------------------- | -------------------------------------------- | -------------------------------------------------------- |
+| `components/inline-notice.md`     | `shared/ui/feedback/InlineNotice.vue`     | `PuInlineNotice`                             | Done; usage sites migrated directly and wrapper deleted  |
+| `components/page-scaffold.md`     | `shared/ui/layout/PageScaffold*.vue`      | `PuPageScaffold`                             | Done; usage sites migrated directly and wrappers deleted |
+| `components/empty-state.md`       | `shared/ui/feedback/EmptyState.vue`       | `PuEmptyState`                               | Done; usage sites migrated directly and wrapper deleted  |
+| `components/loading-indicator.md` | `shared/ui/feedback/LoadingIndicator.vue` | `PuLoadingState`                             | Done; usage sites migrated directly and wrapper deleted  |
+| `components/page-footer.md`       | `shared/ui/sections/PageFooter.vue`       | App chrome over `PuPageScaffold` footer slot | Done                                                     |
 
 ## Second Pass: Low-State Display And Forms
 
-| File | Local Component | Package Target | Status |
-| --- | --- | --- | --- |
-| `components/chip.md` | `shared/ui/display/Chip.vue` usage sites | `PuChip` | Done; local chip deleted |
-| `components/tag.md` | Non-interactive status/category labels | `PuTag` | Done; status labels migrated directly |
-| `components/chip-group.md` | `shared/ui/display/ChipGroup.vue`, `FitChipGroup.vue` usage sites | `PuChipGroup` | Done; local group helpers deleted |
-| `components/cell.md` | `shared/ui/display/Cell.vue` usage sites | `PuCell` | Done; local cell deleted |
-| `components/info-row.md` | `shared/ui/display/InfoRow*.vue` usage sites | `PuDescriptionList`, `PuDescriptionItem`, or `PuCell` | Done; local info-row primitives deleted |
-| `components/img.md` | Domain/native image surfaces and app image primitives | `PuImg` | Done for selected surfaces; expanded scope applied |
-| `components/avatar.md` | `shared/ui/identity/Avatar.vue` | `PuImg` | Done; direct usage-site migration and wrapper deleted |
-| `components/form.md` | Existing native form containers with validation semantics | `PuForm` | Gated |
-| `components/form-field.md` | `shared/ui/forms/FormField.vue` usage sites | `PuFormItem` | Done; local field wrapper deleted |
-| `components/text-input.md` | `shared/ui/forms/TextInput.vue` usage sites | `PuInput` | Done; local input wrapper deleted |
-| `components/textarea-input.md` | `shared/ui/forms/TextareaInput.vue` usage sites | `PuTextarea` | Done; local textarea wrapper deleted |
-| `components/toggle-switch.md` | `shared/ui/forms/ToggleSwitch.vue` usage sites | `PuToggleSwitch` | Done; local switch wrapper deleted |
-| `components/segmented-control.md` | `shared/ui/controls/SegmentedControl.vue` usage sites | `PuSegmented`, `PuSegmentedItem` | Done; local segmented control deleted |
-| `components/wheel-picker.md` | `shared/ui/forms/WheelPicker.vue` usage sites | `PuWheelPicker` | Done; local wheel picker deleted |
+| File                              | Local Component                                                   | Package Target                                        | Status                                                |
+| --------------------------------- | ----------------------------------------------------------------- | ----------------------------------------------------- | ----------------------------------------------------- |
+| `components/chip.md`              | `shared/ui/display/Chip.vue` usage sites                          | `PuChip`                                              | Done; local chip deleted                              |
+| `components/tag.md`               | Non-interactive status/category labels                            | `PuTag`                                               | Done; status labels migrated directly                 |
+| `components/chip-group.md`        | `shared/ui/display/ChipGroup.vue`, `FitChipGroup.vue` usage sites | `PuChipGroup`                                         | Done; local group helpers deleted                     |
+| `components/cell.md`              | `shared/ui/display/Cell.vue` usage sites                          | `PuCell`                                              | Done; local cell deleted                              |
+| `components/info-row.md`          | `shared/ui/display/InfoRow*.vue` usage sites                      | `PuDescriptionList`, `PuDescriptionItem`, or `PuCell` | Done; local info-row primitives deleted               |
+| `components/img.md`               | Domain/native image surfaces and app image primitives             | `PuImg`                                               | Done for selected surfaces; expanded scope applied    |
+| `components/avatar.md`            | `shared/ui/identity/Avatar.vue`                                   | `PuImg`                                               | Done; direct usage-site migration and wrapper deleted |
+| `components/form.md`              | Existing native form containers with validation semantics         | `PuForm`                                              | Gated                                                 |
+| `components/form-field.md`        | `shared/ui/forms/FormField.vue` usage sites                       | `PuFormItem`                                          | Done; local field wrapper deleted                     |
+| `components/text-input.md`        | `shared/ui/forms/TextInput.vue` usage sites                       | `PuInput`                                             | Done; local input wrapper deleted                     |
+| `components/textarea-input.md`    | `shared/ui/forms/TextareaInput.vue` usage sites                   | `PuTextarea`                                          | Done; local textarea wrapper deleted                  |
+| `components/toggle-switch.md`     | `shared/ui/forms/ToggleSwitch.vue` usage sites                    | `PuToggleSwitch`                                      | Done; local switch wrapper deleted                    |
+| `components/segmented-control.md` | `shared/ui/controls/SegmentedControl.vue` usage sites             | `PuSegmented`, `PuSegmentedItem`                      | Done; local segmented control deleted                 |
+| `components/wheel-picker.md`      | `shared/ui/forms/WheelPicker.vue` usage sites                     | `PuWheelPicker`                                       | Done; local wheel picker deleted                      |
 
 ## Selected Second Slice Candidate
 
 Completed after explicit user start.
 
-| Order | File | Scope | Status |
-| --- | --- | --- | --- |
-| 1 | `components/inline-notice.md` + `components/empty-state.md` + `components/loading-indicator.md` + `components/page-scaffold.md` | Clean first-slice local wrappers by migrating usage sites directly to package components and deleting local facades if call sites clear. | Done |
-| 2 | `components/img.md` + `components/avatar.md` | Expand `PuImg` beyond avatar into Anchor Event card and PR preview card image surfaces; delete Avatar because package supports identity fallback props. | Done |
-| 3 | `components/chip.md` + `components/tag.md` + `components/chip-group.md` | Replace local chip/group call sites with `PuChip`, `PuTag`, and `PuChipGroup`; delete `Chip`, `ChipGroup`, and `FitChipGroup` if call sites clear. | Done |
-| 4 | `components/cell.md` | Replace local `Cell` call sites with `PuCell`; delete the local primitive if call sites clear. | Done |
-| 5 | `components/info-row.md` | Replace `InfoRow` and `InfoRowAction` call sites with `PuDescriptionList`/`PuDescriptionItem` for read-only facts or `PuCell` for actions; delete local primitives if call sites clear. | Done |
-| 6 | `components/form-field.md` + `components/text-input.md` + `components/textarea-input.md` | Replace field usage sites with `PuFormItem`, `PuInput`, and `PuTextarea`; keep product field meaning and accessible labeling, but accept package-native sizing, count, DOM, and interaction changes. | Done |
-| 7 | `components/toggle-switch.md` | Replace local switch usage sites with `PuToggleSwitch`; delete local primitive if call sites clear. | Done |
-| 8 | `components/segmented-control.md` | Replace local segmented usage sites with `PuSegmented` + `PuSegmentedItem`; keep the mode-selection product intent, accept package-native keyboard/event behavior, and delete local primitive if call sites clear. | Done |
-| 9 | `components/wheel-picker.md` | Replace the local wheel picker with `PuWheelPicker`; accept package-owned gesture, snapping, keyboard, and tone behavior; delete local primitive if call sites clear. | Done |
-| 10 | `components/form.md` | Only attach `PuForm` to specific form containers when it can directly own product-level submit/validation semantics without an adapter wrapper. | Gated |
+| Order | File                                                                                                                            | Scope                                                                                                                                                                                                              | Status |
+| ----- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------ |
+| 1     | `components/inline-notice.md` + `components/empty-state.md` + `components/loading-indicator.md` + `components/page-scaffold.md` | Clean first-slice local wrappers by migrating usage sites directly to package components and deleting local facades if call sites clear.                                                                           | Done   |
+| 2     | `components/img.md` + `components/avatar.md`                                                                                    | Expand `PuImg` beyond avatar into Anchor Event card and PR preview card image surfaces; delete Avatar because package supports identity fallback props.                                                            | Done   |
+| 3     | `components/chip.md` + `components/tag.md` + `components/chip-group.md`                                                         | Replace local chip/group call sites with `PuChip`, `PuTag`, and `PuChipGroup`; delete `Chip`, `ChipGroup`, and `FitChipGroup` if call sites clear.                                                                 | Done   |
+| 4     | `components/cell.md`                                                                                                            | Replace local `Cell` call sites with `PuCell`; delete the local primitive if call sites clear.                                                                                                                     | Done   |
+| 5     | `components/info-row.md`                                                                                                        | Replace `InfoRow` and `InfoRowAction` call sites with `PuDescriptionList`/`PuDescriptionItem` for read-only facts or `PuCell` for actions; delete local primitives if call sites clear.                            | Done   |
+| 6     | `components/form-field.md` + `components/text-input.md` + `components/textarea-input.md`                                        | Replace field usage sites with `PuFormItem`, `PuInput`, and `PuTextarea`; keep product field meaning and accessible labeling, but accept package-native sizing, count, DOM, and interaction changes.               | Done   |
+| 7     | `components/toggle-switch.md`                                                                                                   | Replace local switch usage sites with `PuToggleSwitch`; delete local primitive if call sites clear.                                                                                                                | Done   |
+| 8     | `components/segmented-control.md`                                                                                               | Replace local segmented usage sites with `PuSegmented` + `PuSegmentedItem`; keep the mode-selection product intent, accept package-native keyboard/event behavior, and delete local primitive if call sites clear. | Done   |
+| 9     | `components/wheel-picker.md`                                                                                                    | Replace the local wheel picker with `PuWheelPicker`; accept package-owned gesture, snapping, keyboard, and tone behavior; delete local primitive if call sites clear.                                              | Done   |
+| 10    | `components/form.md`                                                                                                            | Only attach `PuForm` to specific form containers when it can directly own product-level submit/validation semantics without an adapter wrapper.                                                                    | Gated  |
 
 ## Third Pass: Overlay
 
-| File | Local Component | Package Target | Status |
-| --- | --- | --- | --- |
-| `components/modal.md` | `shared/ui/overlay/Modal.vue` | `PuModal` | Proposed |
-| `components/confirm-dialog.md` | `shared/ui/overlay/ConfirmDialog.vue` | `PuDialog` or `PuModal` + `PuButton` | Proposed |
-| `components/bottom-drawer.md` | `shared/ui/overlay/BottomDrawer.vue` | `PuDrawer` | Proposed |
+| File                           | Local Component                       | Package Target | Status |
+| ------------------------------ | ------------------------------------- | -------------- | ------ |
+| `components/modal.md`          | `shared/ui/overlay/Modal.vue`         | `PuModal`      | Done   |
+| `components/confirm-dialog.md` | `shared/ui/overlay/ConfirmDialog.vue` | `PuDialog`     | Done   |
+| `components/bottom-drawer.md`  | `shared/ui/overlay/BottomDrawer.vue`  | `PuDrawer`     | Done   |
+
+## Selected Third Slice Candidate
+
+Started after explicit user approval.
+
+| Order | File                           | Scope                                                                                                                                                                                                                               | Status |
+| ----- | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
+| 1     | `components/modal.md`          | Replace local `Modal` call sites with `PuModal`, remove parent scroll-lock duplication where package `lockScroll` owns it, and delete the local modal shell after call sites clear.                                                 | Done   |
+| 2     | `components/confirm-dialog.md` | Replace local `ConfirmDialog` call sites directly with `PuDialog`; map labels, loading, disabled, and destructive tone through package props without creating a compatibility wrapper.                                              | Done   |
+| 3     | `components/bottom-drawer.md`  | Replace local `BottomDrawer` call sites with `PuDrawer`; use `visible`/`update:visible`, map close payloads at usage sites when product semantics depend on close reason, and delete the local drawer shell after call sites clear. | Done   |
 
 ## Fourth Pass: Broad Action Surface
 
-| File | Local Component | Package Target | Status |
-| --- | --- | --- | --- |
-| `components/button.md` | `shared/ui/actions/Button.vue` | `PuButton` | Proposed |
-| `components/action-link.md` | `shared/ui/actions/ActionLink.vue` | `PuButton` action prop | Proposed |
-| `components/feedback-button.md` | `shared/ui/actions/FeedbackButton.vue` | `PuButton` feedback prop | Proposed |
-| `components/choice-card.md` | `shared/ui/containers/ChoiceCard.vue` | `PuCard` action/selectable | Proposed |
+| File                            | Local Component                        | Package Target             | Status   |
+| ------------------------------- | -------------------------------------- | -------------------------- | -------- |
+| `components/button.md`          | `shared/ui/actions/Button.vue`         | `PuButton`                 | Proposed |
+| `components/action-link.md`     | `shared/ui/actions/ActionLink.vue`     | `PuButton` action prop     | Proposed |
+| `components/feedback-button.md` | `shared/ui/actions/FeedbackButton.vue` | `PuButton` feedback prop   | Proposed |
+| `components/choice-card.md`     | `shared/ui/containers/ChoiceCard.vue`  | `PuCard` action/selectable | Proposed |
 
 ## Deferred Domain Or Product Chrome
 
diff --git a/tasks/design-web-package-integration/component-migration/90-discussion-log.md b/tasks/design-web-package-integration/component-migration/90-discussion-log.md
index 620152bdd..f6493ab3a 100644
--- a/tasks/design-web-package-integration/component-migration/90-discussion-log.md
+++ b/tasks/design-web-package-integration/component-migration/90-discussion-log.md
@@ -178,7 +178,28 @@
   `PuSnackbar`, and updated overlay guidance; the stale global copy does not.
 - Durable docs now record the package-update workflow: update the package,
   then use `pnpm dlx @tanstack/intent@latest list --json`, `pnpm dlx
-  @tanstack/intent@latest load @partner-up-dev/design-web#design-web`, and
+@tanstack/intent@latest load @partner-up-dev/design-web#design-web`, and
   `pnpm dlx @tanstack/intent@latest validate
-  apps/frontend/node_modules/@partner-up-dev/design-web/skills/design-web`.
+apps/frontend/node_modules/@partner-up-dev/design-web/skills/design-web`.
   The repository does not add an `intent-skills` managed block.
+- Third overlay slice started after explicit user approval.
+- Package-shipped `design-web` skill and references identify `PuDialog`,
+  `PuModal`, and `PuDrawer` as the correct public overlay APIs. Local
+  `~/.codex/skills/design-web` remains stale and is not used as source of
+  truth for component availability.
+- Decision: confirmation usage sites migrate directly to `PuDialog`; no local
+  `ConfirmDialog` wrapper remains. Because `PuDialog` tone is
+  `"neutral" | PuStatusTone`, destructive confirmations map to `tone="error"`.
+- Decision: `PuDrawer` usage sites adopt `visible` / `update:visible` directly.
+  The form-mode preference drawer maps `close.reason === "overlay"` to the old
+  backdrop auto-save behavior at the usage site.
+- Third overlay slice completed. Usage sites now import `PuModal`, `PuDialog`,
+  and `PuDrawer` directly from `@partner-up-dev/design-web`; local
+  `Modal.vue`, `ConfirmDialog.vue`, `BottomDrawer.vue`,
+  `useBodyScrollLock.ts`, and `lib/body-scroll-lock.ts` were deleted.
+- WeChat OAuth keeps its non-dismissible workflow by setting
+  `closeOnOverlay=false` and `closeOnEscape=false` directly on `PuModal`.
+- Verification passed: frontend build, token lint, frontend unit tests (26
+  files / 117 tests), migrated overlay and scroll-lock reference scan,
+  package-prop vocabulary scan for `PuDialog`/`PuDrawer`, and `git diff
+--check`.
diff --git a/tasks/design-web-package-integration/component-migration/components/bottom-drawer.md b/tasks/design-web-package-integration/component-migration/components/bottom-drawer.md
index 86af031ab..678a0d44c 100644
--- a/tasks/design-web-package-integration/component-migration/components/bottom-drawer.md
+++ b/tasks/design-web-package-integration/component-migration/components/bottom-drawer.md
@@ -18,16 +18,21 @@
 
 - From: local bottom drawer overlay.
 - To: `PuDrawer` using `visible` / `update:visible` and `close`.
-- Compatibility strategy: preserve the local `open` prop and translate close
-  reasons if call sites depend on them.
+- Compatibility strategy: do not keep a local wrapper. Use package
+  `visible`/`update:visible` at call sites. Translate close payloads only inside
+  the usage site when product semantics depend on reason. The current known
+  semantic mapping is `PuDrawer` reason `overlay` equals the old `backdrop`
+  reason in the form-mode preference drawer and should keep its auto-save
+  behavior.
 
 ## Risks
 
 - Package uses `visible`, not `open`.
-- Close reason vocabulary differs.
+- Close reason vocabulary differs: `overlay` / `escape` / `close-button`.
 - Safe-area, max-height, and body scroll behavior are mobile-sensitive.
 
 ## Verification
 
-- Build, token lint, targeted drawer workflow tests or smoke.
-- Mobile browser smoke for PR share and commerce drawer flows.
+- Passed: frontend build, token lint, frontend unit tests, old overlay import
+  scan, old scroll-lock scan, `PuDrawer` old-prop vocabulary scan, and `git
+diff --check`.
diff --git a/tasks/design-web-package-integration/component-migration/components/confirm-dialog.md b/tasks/design-web-package-integration/component-migration/components/confirm-dialog.md
index 36ee3f2d0..28d7b27a2 100644
--- a/tasks/design-web-package-integration/component-migration/components/confirm-dialog.md
+++ b/tasks/design-web-package-integration/component-migration/components/confirm-dialog.md
@@ -3,8 +3,7 @@
 ## Target
 
 - Local owner: `apps/frontend/src/shared/ui/overlay/ConfirmDialog.vue`.
-- Package target: likely `PuDialog`, or `PuModal` plus `PuButton` if `PuDialog`
-  does not cover the exact contract.
+- Package target: `PuDialog`.
 - Desired final state: package owns confirmation dialog shell and action button
   treatments.
 
@@ -18,15 +17,21 @@
 ## Migration Shape
 
 - From: local `Modal` plus local `Button`.
-- To: inspect `PuDialog` API before choosing direct package dialog or composed
-  package modal/buttons.
-- Compatibility strategy: migrate after `Button` and `Modal` slices are stable.
+- To: direct `PuDialog` usage at confirmation sites.
+- Compatibility strategy: map `message`/`description` to package description
+  and content slots, `confirmLabel`/`cancelLabel` to package action text props,
+  `loading` to `confirmLoading`, `disabled` to `confirmDisabled`, and
+  destructive intent to package `tone="error"` because `PuDialog` uses status
+  tones rather than control tones.
 
 ## Risks
 
 - Destructive confirmation tone must stay clear.
 - Mobile action stacking may shift.
+- `PuDialog` close emits reasons; usage sites should close on all non-confirm
+  close/cancel paths unless a mutation is pending.
 
 ## Verification
 
-- Build, token lint, targeted confirmation workflow tests.
+- Passed: frontend build, token lint, frontend unit tests, old overlay import
+  scan, `PuDialog` old-prop vocabulary scan, and `git diff --check`.
diff --git a/tasks/design-web-package-integration/component-migration/components/modal.md b/tasks/design-web-package-integration/component-migration/components/modal.md
index ed0d83505..2f94ea5aa 100644
--- a/tasks/design-web-package-integration/component-migration/components/modal.md
+++ b/tasks/design-web-package-integration/component-migration/components/modal.md
@@ -18,18 +18,22 @@
 ## Migration Shape
 
 - From: local Teleport dialog shell.
-- To: `PuModal` with required `open`, `maxWidth`, `title`, and close behavior.
-- Compatibility strategy: preserve `open` plus `close` contract; audit parent
-  `useBodyScrollLock` usage before enabling package `lockScroll`.
+- To: direct `PuModal` imports at usage sites with required `open`, `maxWidth`,
+  `title`, and close behavior.
+- Compatibility strategy: do not keep a local wrapper. Remove parent
+  `useBodyScrollLock` calls that only existed for the migrated modal, because
+  package overlays own `lockScroll` by default.
 
 ## Risks
 
-- Double scroll locking if both parent and package lock the body.
-- Close-on-overlay and close-on-escape defaults must match existing workflows.
+- Double scroll locking if old parent locks remain after package adoption.
+- Workflows that intentionally cannot dismiss on overlay/Escape must set
+  `closeOnOverlay=false` and `closeOnEscape=false` at the usage site.
 - Focus and accessibility behavior may change.
 
 ## Verification
 
-- Build, token lint, frontend unit tests.
-- Targeted PR/WeChat/support modal workflow tests or smoke.
-- Browser smoke on mobile viewport.
+- Passed: frontend build, token lint, frontend unit tests, old overlay import
+  scan, old scroll-lock scan, and `git diff --check`.
+- WeChat OAuth non-dismissible behavior is represented directly with
+  `closeOnOverlay=false` and `closeOnEscape=false`.

From 5b2635ec9a58191a15471d3122d0e9e15ae91781 Mon Sep 17 00:00:00 2001
From: Lanzhijiang <lanzhijiang@foxmail.com>
Date: Sat, 13 Jun 2026 21:30:49 +0800
Subject: [PATCH 05/94] refactor(frontend): migrate action cards to design
 package

---
 .../sections/AdminCommerceProductRailList.vue |  14 +-
 .../sections/AdminCommerceSkuRailList.vue     |  14 +-
 .../AnchorEventTimeWindowPreviewList.vue      |  13 +-
 .../ui/navigation/AdminNavigationPanel.vue    |  28 +-
 .../admin/ui/pr/views/AdminPRBasicView.vue    |  11 +-
 .../admin/ui/pr/views/AdminPRMessagesView.vue | 436 +++++++++---------
 .../pr/ui/forms/UpdatePRStatusForm.vue        |  16 +-
 .../ui/sections/SupportContactAction.vue      |  12 +-
 .../src/pages/AdminAnchorEventPage.vue        |  20 +-
 .../pages/AdminCommerceFulfillmentPage.vue    | 159 +++++--
 .../src/pages/AdminCommerceOfferPage.vue      | 101 +++-
 .../src/pages/AdminCommerceOrderBillPage.vue  |  50 +-
 .../src/pages/AdminCommercePlacementPage.vue  | 154 +++++--
 apps/frontend/src/pages/AdminPaymentPage.vue  |  66 ++-
 .../src/pages/AdminRideHailingPage.vue        |  38 +-
 .../src/pages/CommerceBillDetailPage.vue      |  45 +-
 .../src/pages/CommerceOrderDetailPage.vue     | 256 +++++-----
 .../frontend/src/pages/ContactSupportPage.vue |  23 +-
 apps/frontend/src/pages/EventPlazaPage.vue    | 210 ++++-----
 .../src/pages/OrderingFromPlacementPage.vue   |  16 +-
 .../src/pages/PaymentCheckoutPage.vue         |  50 +-
 apps/frontend/src/shared/ui/AGENTS.md         |   6 +-
 .../src/shared/ui/actions/ActionLink.vue      | 369 ---------------
 .../src/shared/ui/containers/ChoiceCard.vue   | 122 -----
 apps/frontend/src/styles/AGENTS.md            |   6 +-
 .../component-migration/00-control-surface.md |  12 +-
 .../component-migration/10-slice-index.md     |  13 +-
 .../component-migration/90-discussion-log.md  |  20 +
 .../components/action-link.md                 |  31 +-
 .../components/choice-card.md                 |  20 +-
 30 files changed, 1177 insertions(+), 1154 deletions(-)
 delete mode 100644 apps/frontend/src/shared/ui/actions/ActionLink.vue
 delete mode 100644 apps/frontend/src/shared/ui/containers/ChoiceCard.vue

diff --git a/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceProductRailList.vue b/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceProductRailList.vue
index c18454422..e9d3a9fc3 100644
--- a/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceProductRailList.vue
+++ b/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceProductRailList.vue
@@ -3,15 +3,21 @@
     {{ t("adminCommerceProducts.emptyProducts") }}
   </div>
   <div v-else class="pm-rail-list">
-    <ChoiceCard
+    <PuCard
       v-for="product in products"
       :key="product.spu.id"
       :active="selectedSpuId === product.spu.id && !isCreatingSpu"
       @click="context.selectSpu(product.spu.id)"
+      selectable
+      variant="outline"
+      padding="sm"
+      gap="xs"
     >
       <span>{{ product.spu.name }}</span>
-      <small class="pm-small">{{ product.spu.productType }} · {{ product.spu.status }}</small>
-    </ChoiceCard>
+      <small class="pm-small"
+        >{{ product.spu.productType }} · {{ product.spu.status }}</small
+      >
+    </PuCard>
   </div>
 </template>
 
@@ -19,8 +25,8 @@
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { useAdminCommerceProductManagementContext } from "@/domains/admin-commerce/ui/product-management/productManagementContext";
-import ChoiceCard from "@/shared/ui/containers/ChoiceCard.vue";
 import "@/domains/admin-commerce/ui/product-management/product-management.scss";
+import { PuCard } from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const context = useAdminCommerceProductManagementContext();
diff --git a/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceSkuRailList.vue b/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceSkuRailList.vue
index 4f3673756..461f99558 100644
--- a/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceSkuRailList.vue
+++ b/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceSkuRailList.vue
@@ -3,15 +3,21 @@
     {{ t("adminCommerceProducts.emptySkus") }}
   </div>
   <div v-else class="pm-rail-list">
-    <ChoiceCard
+    <PuCard
       v-for="record in selectedProduct?.skus ?? []"
       :key="record.sku.id"
       :active="selectedSkuId === record.sku.id && !isCreatingSku"
       @click="context.selectSku(record.sku.id)"
+      selectable
+      variant="outline"
+      padding="sm"
+      gap="xs"
     >
       <span>{{ record.sku.name }}</span>
-      <small class="pm-small">#{{ record.sku.sortOrder }} · {{ record.sku.status }}</small>
-    </ChoiceCard>
+      <small class="pm-small"
+        >#{{ record.sku.sortOrder }} · {{ record.sku.status }}</small
+      >
+    </PuCard>
   </div>
 </template>
 
@@ -19,8 +25,8 @@
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { useAdminCommerceProductManagementContext } from "@/domains/admin-commerce/ui/product-management/productManagementContext";
-import ChoiceCard from "@/shared/ui/containers/ChoiceCard.vue";
 import "@/domains/admin-commerce/ui/product-management/product-management.scss";
+import { PuCard } from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const context = useAdminCommerceProductManagementContext();
diff --git a/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventTimeWindowPreviewList.vue b/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventTimeWindowPreviewList.vue
index 2b5c16f81..854879cc5 100644
--- a/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventTimeWindowPreviewList.vue
+++ b/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventTimeWindowPreviewList.vue
@@ -7,14 +7,19 @@
       {{ t("adminPR.emptyTimeWindows") }}
     </div>
     <div v-else class="anchor-event-time-window-preview-list__items">
-      <ChoiceCard
+      <PuCard
         v-for="timeWindow in timeWindows"
         :key="timeWindow.key"
         class="anchor-event-time-window-preview-list__item"
+        variant="outline"
+        padding="sm"
+        gap="xs"
       >
         <span>{{ formatWindow(timeWindow.timeWindow) }}</span>
-        <small v-if="timeWindow.description">{{ timeWindow.description }}</small>
-      </ChoiceCard>
+        <small v-if="timeWindow.description">{{
+          timeWindow.description
+        }}</small>
+      </PuCard>
     </div>
   </div>
 </template>
@@ -22,8 +27,8 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
-import ChoiceCard from "@/shared/ui/containers/ChoiceCard.vue";
 import { formatLocalDateTimeWindowLabel } from "@/shared/datetime/formatLocalDateTime";
+import { PuCard } from "@partner-up-dev/design-web";
 import {
   listRecurringAnchorEventTimeWindowPreview,
   type AnchorEventRecurringStartRulePreviewInput,
diff --git a/apps/frontend/src/domains/admin/ui/navigation/AdminNavigationPanel.vue b/apps/frontend/src/domains/admin/ui/navigation/AdminNavigationPanel.vue
index cb47644c9..33293d082 100644
--- a/apps/frontend/src/domains/admin/ui/navigation/AdminNavigationPanel.vue
+++ b/apps/frontend/src/domains/admin/ui/navigation/AdminNavigationPanel.vue
@@ -24,9 +24,7 @@
       >
         <span
           class="admin-navigation-panel__panel-toggle-icon"
-          :class="
-            isPanelCollapsed ? 'i-mdi-chevron-down' : 'i-mdi-chevron-up'
-          "
+          :class="isPanelCollapsed ? 'i-mdi-chevron-down' : 'i-mdi-chevron-up'"
           aria-hidden="true"
         ></span>
       </button>
@@ -52,7 +50,10 @@
           @click="toggleGroup(group.id)"
         >
           <span>{{ t(group.labelKey) }}</span>
-          <span class="admin-navigation-panel__chevron" aria-hidden="true"></span>
+          <span
+            class="admin-navigation-panel__chevron"
+            aria-hidden="true"
+          ></span>
         </button>
 
         <div
@@ -60,18 +61,20 @@
           :id="`admin-navigation-panel-group-${group.id}`"
           class="admin-navigation-panel__items"
         >
-          <ChoiceCard
+          <PuCard
             v-for="item in group.items"
             :key="item.id"
-            :to="buildItemTarget(item)"
+            :action="{ to: buildItemTarget(item) }"
             :active="isItemActive(item)"
-            tone="low"
             class="admin-navigation-panel__item"
+            variant="soft"
+            padding="sm"
+            gap="xs"
           >
             <span class="admin-navigation-panel__item-label">
               {{ t(item.labelKey) }}
             </span>
-          </ChoiceCard>
+          </PuCard>
         </div>
       </section>
     </nav>
@@ -96,15 +99,13 @@ import { storeToRefs } from "pinia";
 import { useI18n } from "vue-i18n";
 import { useRoute, type RouteLocationRaw } from "vue-router";
 import Button from "@/shared/ui/actions/Button.vue";
-import ChoiceCard from "@/shared/ui/containers/ChoiceCard.vue";
 import {
   adminNavigationGroups,
   type AdminNavigationItem,
 } from "@/domains/admin/ui/navigation/adminNavigationModel";
-import {
-  useAdminSessionStore,
-} from "@/domains/admin/use-cases/useAdminSessionStore";
+import { useAdminSessionStore } from "@/domains/admin/use-cases/useAdminSessionStore";
 import type { AdminSessionRole } from "@/domains/admin/model/admin-session-storage";
+import { PuCard } from "@partner-up-dev/design-web";
 
 defineProps<{
   showLogout?: boolean;
@@ -332,7 +333,8 @@ watch(
   display: block;
 }
 
-.admin-navigation-panel__group.is-active .admin-navigation-panel__group-trigger {
+.admin-navigation-panel__group.is-active
+  .admin-navigation-panel__group-trigger {
   color: var(--sys-color-primary);
 }
 
diff --git a/apps/frontend/src/domains/admin/ui/pr/views/AdminPRBasicView.vue b/apps/frontend/src/domains/admin/ui/pr/views/AdminPRBasicView.vue
index b3476106a..7f978db59 100644
--- a/apps/frontend/src/domains/admin/ui/pr/views/AdminPRBasicView.vue
+++ b/apps/frontend/src/domains/admin/ui/pr/views/AdminPRBasicView.vue
@@ -72,19 +72,23 @@
                   v-else
                   class="pr-result-list pr-result-list--grid pr-result-list--scroll"
                 >
-                  <ChoiceCard
+                  <PuCard
                     v-for="pr in filteredPRs"
                     :key="pr.prId"
                     class="pr-result-card"
                     :active="!isCreatingPR && selectedPRId === pr.prId"
                     @click="selectExistingPR(pr.prId)"
+                    selectable
+                    variant="outline"
+                    padding="sm"
+                    gap="xs"
                   >
                     <span>
                       {{ pr.title || pr.placeDisplayName || `#${pr.prId}` }}
                     </span>
                     <small>#{{ pr.prId }} / {{ pr.status }}</small>
                     <small>{{ formatWindow(pr.time) }}</small>
-                  </ChoiceCard>
+                  </PuCard>
                 </div>
               </div>
             </BentoItem>
@@ -466,7 +470,6 @@ import {
   type PRPlaceMode,
 } from "@/domains/pr/model/pr-route";
 import Button from "@/shared/ui/actions/Button.vue";
-import ChoiceCard from "@/shared/ui/containers/ChoiceCard.vue";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
 import TimelinePolicyPicker from "@/shared/ui/forms/TimelinePolicyPicker.vue";
 import PRJoinGateConfigEditor from "@/domains/pr/ui/forms/PRJoinGateConfigEditor.vue";
@@ -474,7 +477,7 @@ import PRPlaceModeField, {
   type PRPlaceModeFieldValue,
 } from "@/domains/pr/ui/forms/PRPlaceModeField.vue";
 import type { PRJoinGateConfig, PRRoute } from "@partner-up-dev/backend";
-import { PuLoadingState, PuDialog } from "@partner-up-dev/design-web";
+import { PuCard, PuLoadingState, PuDialog } from "@partner-up-dev/design-web";
 
 type PRForm = {
   title: string;
diff --git a/apps/frontend/src/domains/admin/ui/pr/views/AdminPRMessagesView.vue b/apps/frontend/src/domains/admin/ui/pr/views/AdminPRMessagesView.vue
index b5d2296e4..b7a04201e 100644
--- a/apps/frontend/src/domains/admin/ui/pr/views/AdminPRMessagesView.vue
+++ b/apps/frontend/src/domains/admin/ui/pr/views/AdminPRMessagesView.vue
@@ -14,224 +14,242 @@
 
     <template #main>
       <div class="stack">
-      <PuLoadingState
-        v-if="workspaceQuery.isLoading.value"
-        :message="t('common.loading')"
-      />
-      <ErrorToast
-        v-else-if="workspaceQuery.error.value"
-        :message="workspaceQuery.error.value.message"
-        persistent
-      />
-
-      <template v-else>
-        <datalist id="admin-pr-message-type-options">
-          <option
-            v-for="typeOption in workspace?.typeOptions ?? []"
-            :key="typeOption.type"
-            :value="typeOption.type"
-          >
-            {{ typeOption.eventTitle }}
-          </option>
-        </datalist>
-        <datalist id="admin-pr-message-location-options">
-          <option
-            v-for="locationOption in filterLocationOptions"
-            :key="locationOption"
-            :value="locationOption"
-          />
-        </datalist>
-
-        <BentoLayout class="pr-workspace-layout">
-          <BentoItem :title="t('adminPRMessages.prsTitle')" span="full">
-            <div class="stack">
-              <div class="section-header">
-                <p class="hint">
-                  {{
-                    t("adminPR.filteredCountLabel", {
-                      count: filteredPRs.length,
-                    })
-                  }}
-                </p>
-              </div>
+        <PuLoadingState
+          v-if="workspaceQuery.isLoading.value"
+          :message="t('common.loading')"
+        />
+        <ErrorToast
+          v-else-if="workspaceQuery.error.value"
+          :message="workspaceQuery.error.value.message"
+          persistent
+        />
+
+        <template v-else>
+          <datalist id="admin-pr-message-type-options">
+            <option
+              v-for="typeOption in workspace?.typeOptions ?? []"
+              :key="typeOption.type"
+              :value="typeOption.type"
+            >
+              {{ typeOption.eventTitle }}
+            </option>
+          </datalist>
+          <datalist id="admin-pr-message-location-options">
+            <option
+              v-for="locationOption in filterLocationOptions"
+              :key="locationOption"
+              :value="locationOption"
+            />
+          </datalist>
+
+          <BentoLayout class="pr-workspace-layout">
+            <BentoItem :title="t('adminPRMessages.prsTitle')" span="full">
+              <div class="stack">
+                <div class="section-header">
+                  <p class="hint">
+                    {{
+                      t("adminPR.filteredCountLabel", {
+                        count: filteredPRs.length,
+                      })
+                    }}
+                  </p>
+                </div>
 
-              <div v-if="filteredPRs.length === 0" class="hint">
-                {{ t("adminPR.emptySearchResults") }}
-              </div>
+                <div v-if="filteredPRs.length === 0" class="hint">
+                  {{ t("adminPR.emptySearchResults") }}
+                </div>
 
-              <div
-                v-else
-                class="pr-result-list pr-result-list--grid pr-result-list--scroll"
-              >
-                <ChoiceCard
-                  v-for="pr in filteredPRs"
-                  :key="pr.prId"
-                  class="pr-result-card"
-                  :active="selectedPRId === pr.prId"
-                  @click="selectPR(pr.prId)"
+                <div
+                  v-else
+                  class="pr-result-list pr-result-list--grid pr-result-list--scroll"
                 >
-                  <span>{{ pr.title || pr.location || `#${pr.prId}` }}</span>
-                  <small>#{{ pr.prId }} / {{ pr.status }}</small>
-                  <small>{{ formatWindow(pr.time) }}</small>
-                </ChoiceCard>
-              </div>
-            </div>
-          </BentoItem>
-
-          <BentoItem
-            id="pr-messages"
-            :title="t('adminPRMessages.panelTitle')"
-            :description="t('adminPRMessages.panelHint')"
-            span="full"
-            data-testid="admin-pr.section.messages"
-          >
-            <div class="stack">
-              <div v-if="selectedPR === null" class="empty-state">
-                {{ t("adminPRMessages.selectPRHint") }}
+                  <PuCard
+                    v-for="pr in filteredPRs"
+                    :key="pr.prId"
+                    class="pr-result-card"
+                    :active="selectedPRId === pr.prId"
+                    @click="selectPR(pr.prId)"
+                    selectable
+                    variant="outline"
+                    padding="sm"
+                    gap="xs"
+                  >
+                    <span>{{ pr.title || pr.location || `#${pr.prId}` }}</span>
+                    <small>#{{ pr.prId }} / {{ pr.status }}</small>
+                    <small>{{ formatWindow(pr.time) }}</small>
+                  </PuCard>
+                </div>
               </div>
-
-              <template v-else>
-                <p v-if="messagesQuery.isLoading.value" class="hint">
-                  {{ t("common.loading") }}
-                </p>
-                <p v-else-if="messagesQuery.error.value" class="error-message">
-                  {{ messagesQuery.error.value.message }}
-                </p>
-                <div v-else-if="messageItems.length === 0" class="empty-state">
-                  {{ t("adminPRMessages.emptyMessages") }}
+            </BentoItem>
+
+            <BentoItem
+              id="pr-messages"
+              :title="t('adminPRMessages.panelTitle')"
+              :description="t('adminPRMessages.panelHint')"
+              span="full"
+              data-testid="admin-pr.section.messages"
+            >
+              <div class="stack">
+                <div v-if="selectedPR === null" class="empty-state">
+                  {{ t("adminPRMessages.selectPRHint") }}
                 </div>
-                <div v-else class="admin-message-list">
-                  <article
-                    v-for="item in messageItems"
-                    :key="item.id"
-                    class="admin-message-item"
+
+                <template v-else>
+                  <p v-if="messagesQuery.isLoading.value" class="hint">
+                    {{ t("common.loading") }}
+                  </p>
+                  <p
+                    v-else-if="messagesQuery.error.value"
+                    class="error-message"
+                  >
+                    {{ messagesQuery.error.value.message }}
+                  </p>
+                  <div
+                    v-else-if="messageItems.length === 0"
+                    class="empty-state"
                   >
-                    <div class="section-header section-header--start">
-                      <div class="stack stack--tight">
-                        <strong class="message-author">
-                          {{ resolveMessageAuthor(item) }}
-                        </strong>
-                        <span class="hint">
-                          {{ formatMessageTime(item.createdAt) }}
-                          <template v-if="isMessageEdited(item)">
-                            ·
-                            {{
-                              t("adminPRMessages.editedAt", {
-                                time: formatMessageTime(item.updatedAt),
-                              })
-                            }}
+                    {{ t("adminPRMessages.emptyMessages") }}
+                  </div>
+                  <div v-else class="admin-message-list">
+                    <article
+                      v-for="item in messageItems"
+                      :key="item.id"
+                      class="admin-message-item"
+                    >
+                      <div class="section-header section-header--start">
+                        <div class="stack stack--tight">
+                          <strong class="message-author">
+                            {{ resolveMessageAuthor(item) }}
+                          </strong>
+                          <span class="hint">
+                            {{ formatMessageTime(item.createdAt) }}
+                            <template v-if="isMessageEdited(item)">
+                              ·
+                              {{
+                                t("adminPRMessages.editedAt", {
+                                  time: formatMessageTime(item.updatedAt),
+                                })
+                              }}
+                            </template>
+                          </span>
+                        </div>
+
+                        <div class="actions actions--inline">
+                          <template v-if="editingMessageId === item.id">
+                            <Button
+                              appearance="pill"
+                              tone="outline"
+                              size="sm"
+                              type="button"
+                              :disabled="
+                                prMessagesActions.isPending.update.value ||
+                                editingMessageBody.trim().length === 0
+                              "
+                              @click="handleSaveMessageEdit(item.id)"
+                            >
+                              {{
+                                prMessagesActions.isPending.update.value
+                                  ? t("adminPRMessages.messageSaving")
+                                  : t("adminPRMessages.saveEditAction")
+                              }}
+                            </Button>
+                            <Button
+                              appearance="pill"
+                              tone="ghost"
+                              size="sm"
+                              type="button"
+                              :disabled="
+                                prMessagesActions.isPending.update.value
+                              "
+                              @click="cancelEditMessage"
+                            >
+                              {{ t("common.cancel") }}
+                            </Button>
                           </template>
-                        </span>
-                      </div>
-
-                      <div class="actions actions--inline">
-                        <template v-if="editingMessageId === item.id">
-                          <Button
-                            appearance="pill"
-                            tone="outline"
-                            size="sm"
-                            type="button"
-                            :disabled="
-                              prMessagesActions.isPending.update.value ||
-                              editingMessageBody.trim().length === 0
-                            "
-                            @click="handleSaveMessageEdit(item.id)"
-                          >
-                            {{
-                              prMessagesActions.isPending.update.value
-                                ? t("adminPRMessages.messageSaving")
-                                : t("adminPRMessages.saveEditAction")
-                            }}
-                          </Button>
-                          <Button
-                            appearance="pill"
-                            tone="ghost"
-                            size="sm"
-                            type="button"
-                            :disabled="prMessagesActions.isPending.update.value"
-                            @click="cancelEditMessage"
-                          >
-                            {{ t("common.cancel") }}
-                          </Button>
-                        </template>
-                        <template v-else>
-                          <Button
-                            appearance="pill"
-                            tone="outline"
-                            size="sm"
-                            type="button"
-                            :disabled="prMessagesActions.isPending.delete.value"
-                            @click="beginEditMessage(item.id, item.body)"
-                          >
-                            {{ t("adminPRMessages.editAction") }}
-                          </Button>
-                          <Button
-                            appearance="pill"
-                            tone="danger"
-                            size="sm"
-                            type="button"
-                            :disabled="prMessagesActions.isPending.delete.value"
-                            @click="handleDeleteMessage(item.id)"
-                          >
-                            {{
-                              prMessagesActions.isPending.delete.value
-                                ? t("adminPRMessages.messageDeleting")
-                                : t("adminPRMessages.deleteAction")
-                            }}
-                          </Button>
-                        </template>
+                          <template v-else>
+                            <Button
+                              appearance="pill"
+                              tone="outline"
+                              size="sm"
+                              type="button"
+                              :disabled="
+                                prMessagesActions.isPending.delete.value
+                              "
+                              @click="beginEditMessage(item.id, item.body)"
+                            >
+                              {{ t("adminPRMessages.editAction") }}
+                            </Button>
+                            <Button
+                              appearance="pill"
+                              tone="danger"
+                              size="sm"
+                              type="button"
+                              :disabled="
+                                prMessagesActions.isPending.delete.value
+                              "
+                              @click="handleDeleteMessage(item.id)"
+                            >
+                              {{
+                                prMessagesActions.isPending.delete.value
+                                  ? t("adminPRMessages.messageDeleting")
+                                  : t("adminPRMessages.deleteAction")
+                              }}
+                            </Button>
+                          </template>
+                        </div>
                       </div>
-                    </div>
 
+                      <textarea
+                        v-if="editingMessageId === item.id"
+                        v-model="editingMessageBody"
+                        class="field-input field-textarea"
+                        :placeholder="t('adminPRMessages.messagePlaceholder')"
+                      ></textarea>
+                      <p v-else class="message-body">
+                        {{ item.body }}
+                      </p>
+                    </article>
+                  </div>
+
+                  <label class="field">
+                    <span class="field-label">{{
+                      t("adminPRMessages.messageLabel")
+                    }}</span>
                     <textarea
-                      v-if="editingMessageId === item.id"
-                      v-model="editingMessageBody"
+                      v-model="messageDraftBody"
                       class="field-input field-textarea"
                       :placeholder="t('adminPRMessages.messagePlaceholder')"
+                      :disabled="prMessagesActions.isPending.create.value"
                     ></textarea>
-                    <p v-else class="message-body">
-                      {{ item.body }}
-                    </p>
-                  </article>
-                </div>
-
-                <label class="field">
-                  <span class="field-label">{{ t("adminPRMessages.messageLabel") }}</span>
-                  <textarea
-                    v-model="messageDraftBody"
-                    class="field-input field-textarea"
-                    :placeholder="t('adminPRMessages.messagePlaceholder')"
-                    :disabled="prMessagesActions.isPending.create.value"
-                  ></textarea>
-                </label>
-
-                <p v-if="messageActionError" class="error-message">
-                  {{ messageActionError }}
-                </p>
-
-                <div class="actions">
-                  <Button
-                    appearance="pill"
-                    size="sm"
-                    type="button"
-                    :disabled="
-                      prMessagesActions.isPending.create.value ||
-                      messageDraftBody.trim().length === 0
-                    "
-                    @click="handleSendPRMessage"
-                  >
-                    {{
-                      prMessagesActions.isPending.create.value
-                        ? t("adminPRMessages.messageSending")
-                        : t("adminPRMessages.messageAction")
-                    }}
-                  </Button>
-                </div>
-              </template>
-            </div>
-          </BentoItem>
-        </BentoLayout>
-      </template>
+                  </label>
+
+                  <p v-if="messageActionError" class="error-message">
+                    {{ messageActionError }}
+                  </p>
+
+                  <div class="actions">
+                    <Button
+                      appearance="pill"
+                      size="sm"
+                      type="button"
+                      :disabled="
+                        prMessagesActions.isPending.create.value ||
+                        messageDraftBody.trim().length === 0
+                      "
+                      @click="handleSendPRMessage"
+                    >
+                      {{
+                        prMessagesActions.isPending.create.value
+                          ? t("adminPRMessages.messageSending")
+                          : t("adminPRMessages.messageAction")
+                      }}
+                    </Button>
+                  </div>
+                </template>
+              </div>
+            </BentoItem>
+          </BentoLayout>
+        </template>
       </div>
     </template>
   </AdminPageScaffold>
@@ -254,9 +272,8 @@ import {
 import { useAdminAccess } from "@/domains/admin/use-cases/useAdminAccess";
 import { formatLocalDateTimeValue } from "@/shared/datetime/formatLocalDateTime";
 import Button from "@/shared/ui/actions/Button.vue";
-import ChoiceCard from "@/shared/ui/containers/ChoiceCard.vue";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import { PuLoadingState } from "@partner-up-dev/design-web";
+import { PuCard, PuLoadingState } from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const { isAdmin, logout } = useAdminAccess();
@@ -313,9 +330,8 @@ const handleSendPRMessage = async () => {
   }
 };
 
-const resolveMessageAuthor = (
-  item: AdminPRMessagesResponse["items"][number],
-) => item.author.nickname?.trim() || item.author.label;
+const resolveMessageAuthor = (item: AdminPRMessagesResponse["items"][number]) =>
+  item.author.nickname?.trim() || item.author.label;
 
 const formatMessageTime = (iso: string) => formatLocalDateTimeValue(iso) ?? iso;
 
diff --git a/apps/frontend/src/domains/pr/ui/forms/UpdatePRStatusForm.vue b/apps/frontend/src/domains/pr/ui/forms/UpdatePRStatusForm.vue
index 45e00853a..7ca88b903 100644
--- a/apps/frontend/src/domains/pr/ui/forms/UpdatePRStatusForm.vue
+++ b/apps/frontend/src/domains/pr/ui/forms/UpdatePRStatusForm.vue
@@ -1,19 +1,19 @@
 <template>
-  <form
-    :id="formId"
-    class="status-form"
-    @submit.prevent="submitForm"
-  >
-    <ChoiceCard
+  <form :id="formId" class="status-form" @submit.prevent="submitForm">
+    <PuCard
       v-for="status in statusOptions"
       :key="status.value"
       class="status-option"
       :active="selectedStatus === status.value"
       :disabled="disabled"
       @click="selectedStatus = status.value"
+      selectable
+      variant="outline"
+      padding="sm"
+      gap="xs"
     >
       {{ status.label }}
-    </ChoiceCard>
+    </PuCard>
   </form>
 </template>
 
@@ -21,7 +21,7 @@
 import { ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import type { PRStatusManual } from "@partner-up-dev/backend";
-import ChoiceCard from "@/shared/ui/containers/ChoiceCard.vue";
+import { PuCard } from "@partner-up-dev/design-web";
 
 type StatusOption = {
   value: PRStatusManual;
diff --git a/apps/frontend/src/domains/support/ui/sections/SupportContactAction.vue b/apps/frontend/src/domains/support/ui/sections/SupportContactAction.vue
index 1d9e9da32..14631684d 100644
--- a/apps/frontend/src/domains/support/ui/sections/SupportContactAction.vue
+++ b/apps/frontend/src/domains/support/ui/sections/SupportContactAction.vue
@@ -9,22 +9,22 @@
   >
     <slot />
   </Button>
-  <ActionLink
+  <PuButton
     v-else
     v-bind="attrs"
-    :href="props.href"
-    external
-    appearance="pill"
+    :action="{ href: props.href, external: true }"
+    shape="pill"
     :tone="props.tone"
+    variant="solid"
   >
     <slot />
-  </ActionLink>
+  </PuButton>
 </template>
 
 <script setup lang="ts">
 import { useAttrs } from "vue";
 import Button from "@/shared/ui/actions/Button.vue";
-import ActionLink from "@/shared/ui/actions/ActionLink.vue";
+import { PuButton } from "@partner-up-dev/design-web";
 
 defineOptions({
   inheritAttrs: false,
diff --git a/apps/frontend/src/pages/AdminAnchorEventPage.vue b/apps/frontend/src/pages/AdminAnchorEventPage.vue
index 2b8ee6f24..c74ee0e76 100644
--- a/apps/frontend/src/pages/AdminAnchorEventPage.vue
+++ b/apps/frontend/src/pages/AdminAnchorEventPage.vue
@@ -22,16 +22,20 @@
           {{ t("adminAnchorEvents.emptyEvents") }}
         </div>
         <div v-else class="anchor-event-rail-list">
-          <ChoiceCard
+          <PuCard
             v-for="event in events"
             :key="event.id"
             class="anchor-event-card"
             :active="!isCreatingEvent && selectedEventId === event.id"
             @click="selectEvent(event.id)"
+            selectable
+            variant="outline"
+            padding="sm"
+            gap="xs"
           >
             <span>{{ event.title }}</span>
             <small>{{ event.status }}</small>
-          </ChoiceCard>
+          </PuCard>
         </div>
       </AdminRailPanel>
     </template>
@@ -124,7 +128,6 @@ import AdminRailPanel from "@/domains/admin/ui/layout/AdminRailPanel.vue";
 import AdminNavigationPanel from "@/domains/admin/ui/navigation/AdminNavigationPanel.vue";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
 import Button from "@/shared/ui/actions/Button.vue";
-import ChoiceCard from "@/shared/ui/containers/ChoiceCard.vue";
 import AnchorEventBasicSection from "@/domains/admin/ui/anchor-event/sections/AnchorEventBasicSection.vue";
 import AnchorEventLocationsSection from "@/domains/admin/ui/anchor-event/sections/AnchorEventLocationsSection.vue";
 import AnchorEventOtherSection from "@/domains/admin/ui/anchor-event/sections/AnchorEventOtherSection.vue";
@@ -149,15 +152,13 @@ import {
 import { useUpdateAnchorEventBasic } from "@/domains/admin/use-cases/anchor-event/useUpdateAnchorEventBasic";
 import { useUpdateAnchorEventLocations } from "@/domains/admin/use-cases/anchor-event/useUpdateAnchorEventLocations";
 import { useUpdateAnchorEventOtherSettings } from "@/domains/admin/use-cases/anchor-event/useUpdateAnchorEventOtherSettings";
-import {
-  useUpdateAnchorEventTimePolicy,
-} from "@/domains/admin/use-cases/anchor-event/useUpdateAnchorEventTimePolicy";
+import { useUpdateAnchorEventTimePolicy } from "@/domains/admin/use-cases/anchor-event/useUpdateAnchorEventTimePolicy";
 import type {
   AnchorEventEditorForm,
   EditableMeetingPointForm,
 } from "@/domains/admin/ui/anchor-event/anchorEventEditorTypes";
 import { validateManualPartnerBounds } from "@/lib/validation";
-import { PuLoadingState } from "@partner-up-dev/design-web";
+import { PuCard, PuLoadingState } from "@partner-up-dev/design-web";
 
 type Workspace = NonNullable<AdminAnchorEventWorkspaceResponse>;
 type EventRecord = Workspace["events"][number];
@@ -222,7 +223,8 @@ const toEventForm = (event: EventRecord): EventForm => ({
   ),
   joinGateConfig: event.joinGateConfig,
   participationFrequencyLimit: event.participationFrequencyLimit,
-  feedbackQuestionnaireTemplateId: event.feedbackQuestionnaireTemplateId ?? null,
+  feedbackQuestionnaireTemplateId:
+    event.feedbackQuestionnaireTemplateId ?? null,
   defaultPrNotes: event.defaultPrNotes ?? "",
   durationMinutes: event.timePoolConfig.durationMinutes ?? null,
   earliestLeadMinutes: event.timePoolConfig.earliestLeadMinutes ?? null,
@@ -624,7 +626,6 @@ const handleRejectRouteApplication = async (payload: {
     // Mutation state already drives page-level feedback.
   }
 };
-
 </script>
 
 <style lang="scss" scoped>
@@ -644,5 +645,4 @@ const handleRejectRouteApplication = async (payload: {
   @include mx.pu-font(body);
   color: var(--sys-color-on-surface-variant);
 }
-
 </style>
diff --git a/apps/frontend/src/pages/AdminCommerceFulfillmentPage.vue b/apps/frontend/src/pages/AdminCommerceFulfillmentPage.vue
index 5702a51e5..37d69db11 100644
--- a/apps/frontend/src/pages/AdminCommerceFulfillmentPage.vue
+++ b/apps/frontend/src/pages/AdminCommerceFulfillmentPage.vue
@@ -10,15 +10,19 @@
           {{ t("adminCommerceFulfillment.emptyFulfillments") }}
         </div>
         <div v-else class="fulfillment-rail-list">
-          <ChoiceCard
+          <PuCard
             v-for="record in fulfillments"
             :key="record.fulfillment.id"
             :active="selectedFulfillmentId === record.fulfillment.id"
             @click="selectedFulfillmentIdRaw = record.fulfillment.id"
+            selectable
+            variant="outline"
+            padding="sm"
+            gap="xs"
           >
             <span>{{ record.fulfillment.bookingStatus }}</span>
             <small>{{ record.fulfillment.cancellationHandlingStatus }}</small>
-          </ChoiceCard>
+          </PuCard>
         </div>
       </AdminRailPanel>
     </template>
@@ -42,7 +46,10 @@
           align="start"
         />
         <template v-else-if="selectedRecord">
-          <BentoItem :title="t('adminCommerceFulfillment.summaryTitle')" span="full">
+          <BentoItem
+            :title="t('adminCommerceFulfillment.summaryTitle')"
+            span="full"
+          >
             <dl class="summary-grid">
               <div>
                 <dt>{{ t("adminCommerceFulfillment.fulfillmentIdLabel") }}</dt>
@@ -57,12 +64,23 @@
                 <dd>{{ selectedRecord.fulfillment.bookingStatus }}</dd>
               </div>
               <div>
-                <dt>{{ t("adminCommerceFulfillment.cancellationHandlingLabel") }}</dt>
-                <dd>{{ selectedRecord.fulfillment.cancellationHandlingStatus }}</dd>
+                <dt>
+                  {{ t("adminCommerceFulfillment.cancellationHandlingLabel") }}
+                </dt>
+                <dd>
+                  {{ selectedRecord.fulfillment.cancellationHandlingStatus }}
+                </dd>
               </div>
               <div>
-                <dt>{{ t("adminCommerceFulfillment.cancellationOutcomeLabel") }}</dt>
-                <dd>{{ selectedRecord.fulfillment.supplierCancellationOutcome ?? "-" }}</dd>
+                <dt>
+                  {{ t("adminCommerceFulfillment.cancellationOutcomeLabel") }}
+                </dt>
+                <dd>
+                  {{
+                    selectedRecord.fulfillment.supplierCancellationOutcome ??
+                    "-"
+                  }}
+                </dd>
               </div>
               <div>
                 <dt>{{ t("adminCommerceFulfillment.billLabel") }}</dt>
@@ -71,11 +89,16 @@
             </dl>
           </BentoItem>
 
-          <BentoItem :title="t('adminCommerceFulfillment.bookingOpsTitle')" span="full">
+          <BentoItem
+            :title="t('adminCommerceFulfillment.bookingOpsTitle')"
+            span="full"
+          >
             <div class="form-stack">
               <label class="field">
-                <span class="field-label">{{ t("adminCommerceFulfillment.bookingNoteLabel") }}</span>
-                <textarea v-model="bookingNote" class="text-area" ></textarea>
+                <span class="field-label">{{
+                  t("adminCommerceFulfillment.bookingNoteLabel")
+                }}</span>
+                <textarea v-model="bookingNote" class="text-area"></textarea>
               </label>
               <div class="inline-actions">
                 <Button
@@ -86,7 +109,11 @@
                   :disabled="isConfirming"
                   @click="handleConfirmBooking"
                 >
-                  {{ isConfirming ? t("adminCommerceFulfillment.processingAction") : t("adminCommerceFulfillment.confirmBookingAction") }}
+                  {{
+                    isConfirming
+                      ? t("adminCommerceFulfillment.processingAction")
+                      : t("adminCommerceFulfillment.confirmBookingAction")
+                  }}
                 </Button>
                 <Button
                   size="sm"
@@ -94,13 +121,20 @@
                   :disabled="isRejecting"
                   @click="handleRejectBooking"
                 >
-                  {{ isRejecting ? t("adminCommerceFulfillment.processingAction") : t("adminCommerceFulfillment.rejectBookingAction") }}
+                  {{
+                    isRejecting
+                      ? t("adminCommerceFulfillment.processingAction")
+                      : t("adminCommerceFulfillment.rejectBookingAction")
+                  }}
                 </Button>
               </div>
             </div>
           </BentoItem>
 
-          <BentoItem :title="t('adminCommerceFulfillment.cancellationOpsTitle')" span="full">
+          <BentoItem
+            :title="t('adminCommerceFulfillment.cancellationOpsTitle')"
+            span="full"
+          >
             <div class="form-stack">
               <div
                 class="status-strip"
@@ -111,8 +145,13 @@
                 <span>{{ pendingCancellationAttempt?.attemptId ?? "-" }}</span>
               </div>
               <label class="field">
-                <span class="field-label">{{ t("adminCommerceFulfillment.cancellationNoteLabel") }}</span>
-                <textarea v-model="cancellationNote" class="text-area" ></textarea>
+                <span class="field-label">{{
+                  t("adminCommerceFulfillment.cancellationNoteLabel")
+                }}</span>
+                <textarea
+                  v-model="cancellationNote"
+                  class="text-area"
+                ></textarea>
               </label>
               <div class="inline-actions">
                 <Button
@@ -124,7 +163,11 @@
                   data-testid="admin-fulfillment.approve-cancellation"
                   @click="handleApproveCancellation"
                 >
-                  {{ isApprovingCancellation ? t("adminCommerceFulfillment.processingAction") : t("adminCommerceFulfillment.approveCancellationAction") }}
+                  {{
+                    isApprovingCancellation
+                      ? t("adminCommerceFulfillment.processingAction")
+                      : t("adminCommerceFulfillment.approveCancellationAction")
+                  }}
                 </Button>
                 <Button
                   size="sm"
@@ -133,36 +176,74 @@
                   data-testid="admin-fulfillment.deny-cancellation"
                   @click="handleDenyCancellation"
                 >
-                  {{ isDenyingCancellation ? t("adminCommerceFulfillment.processingAction") : t("adminCommerceFulfillment.denyCancellationAction") }}
+                  {{
+                    isDenyingCancellation
+                      ? t("adminCommerceFulfillment.processingAction")
+                      : t("adminCommerceFulfillment.denyCancellationAction")
+                  }}
                 </Button>
               </div>
             </div>
           </BentoItem>
 
-          <BentoItem :title="t('adminCommerceFulfillment.entryGuidanceTitle')" span="full">
+          <BentoItem
+            :title="t('adminCommerceFulfillment.entryGuidanceTitle')"
+            span="full"
+          >
             <div class="form-stack">
               <label class="field">
-                <span class="field-label">{{ t("adminCommerceFulfillment.entryPhoneLabel") }}</span>
-                <input v-model="entryGuidance.entryByPhone" class="text-input" type="text" />
+                <span class="field-label">{{
+                  t("adminCommerceFulfillment.entryPhoneLabel")
+                }}</span>
+                <input
+                  v-model="entryGuidance.entryByPhone"
+                  class="text-input"
+                  type="text"
+                />
               </label>
               <label class="field">
-                <span class="field-label">{{ t("adminCommerceFulfillment.entryRealNameLabel") }}</span>
-                <input v-model="entryGuidance.entryByRealName" class="text-input" type="text" />
+                <span class="field-label">{{
+                  t("adminCommerceFulfillment.entryRealNameLabel")
+                }}</span>
+                <input
+                  v-model="entryGuidance.entryByRealName"
+                  class="text-input"
+                  type="text"
+                />
               </label>
               <label class="field">
-                <span class="field-label">{{ t("adminCommerceFulfillment.entryNoteLabel") }}</span>
-                <textarea v-model="entryGuidance.note" class="text-area" ></textarea>
+                <span class="field-label">{{
+                  t("adminCommerceFulfillment.entryNoteLabel")
+                }}</span>
+                <textarea
+                  v-model="entryGuidance.note"
+                  class="text-area"
+                ></textarea>
               </label>
               <div class="inline-actions">
-                <Button size="sm" type="button" :disabled="isSavingGuidance" @click="handleSaveGuidance">
-                  {{ isSavingGuidance ? t("adminCommerceFulfillment.processingAction") : t("adminCommerceFulfillment.saveGuidanceAction") }}
+                <Button
+                  size="sm"
+                  type="button"
+                  :disabled="isSavingGuidance"
+                  @click="handleSaveGuidance"
+                >
+                  {{
+                    isSavingGuidance
+                      ? t("adminCommerceFulfillment.processingAction")
+                      : t("adminCommerceFulfillment.saveGuidanceAction")
+                  }}
                 </Button>
               </div>
             </div>
           </BentoItem>
 
-          <BentoItem :title="t('adminCommerceFulfillment.rawStateTitle')" span="full">
-            <pre class="json-pre">{{ prettyJson(selectedRecord.fulfillment) }}</pre>
+          <BentoItem
+            :title="t('adminCommerceFulfillment.rawStateTitle')"
+            span="full"
+          >
+            <pre class="json-pre">{{
+              prettyJson(selectedRecord.fulfillment)
+            }}</pre>
           </BentoItem>
 
           <ErrorToast
@@ -195,8 +276,11 @@ import {
 import { prettyJson } from "@/domains/admin-commerce/editor-json";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
 import Button from "@/shared/ui/actions/Button.vue";
-import ChoiceCard from "@/shared/ui/containers/ChoiceCard.vue";
-import { PuEmptyState, PuLoadingState } from "@partner-up-dev/design-web";
+import {
+  PuCard,
+  PuEmptyState,
+  PuLoadingState,
+} from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const { isAdmin, logout } = useAdminAccess();
@@ -217,8 +301,12 @@ const entryGuidance = ref({
 });
 const localErrorMessage = ref<string | null>(null);
 
-const fulfillments = computed(() => workspaceQuery.data.value?.fulfillments ?? []);
-const selectedFulfillmentId = computed(() => selectedFulfillmentIdRaw.value || null);
+const fulfillments = computed(
+  () => workspaceQuery.data.value?.fulfillments ?? [],
+);
+const selectedFulfillmentId = computed(
+  () => selectedFulfillmentIdRaw.value || null,
+);
 const selectedRecord = computed(
   () =>
     fulfillments.value.find(
@@ -245,8 +333,8 @@ const pendingCancellationAttempt = computed(
 );
 const canResolveCancellation = computed(
   () =>
-    selectedRecord.value?.fulfillment.cancellationHandlingStatus === "REQUESTED" &&
-    pendingCancellationAttempt.value !== null,
+    selectedRecord.value?.fulfillment.cancellationHandlingStatus ===
+      "REQUESTED" && pendingCancellationAttempt.value !== null,
 );
 const cancellationGateLabel = computed(() =>
   canResolveCancellation.value
@@ -273,7 +361,8 @@ watch(
         (record) => record.fulfillment.id === selectedFulfillmentIdRaw.value,
       )
     ) {
-      selectedFulfillmentIdRaw.value = nextFulfillments[0]?.fulfillment.id ?? "";
+      selectedFulfillmentIdRaw.value =
+        nextFulfillments[0]?.fulfillment.id ?? "";
     }
   },
   { immediate: true },
diff --git a/apps/frontend/src/pages/AdminCommerceOfferPage.vue b/apps/frontend/src/pages/AdminCommerceOfferPage.vue
index 03ac499d5..4ae1844aa 100644
--- a/apps/frontend/src/pages/AdminCommerceOfferPage.vue
+++ b/apps/frontend/src/pages/AdminCommerceOfferPage.vue
@@ -5,7 +5,13 @@
     </template>
 
     <template #actions>
-      <Button appearance="pill" tone="outline" size="sm" type="button" @click="prepareNewOffer">
+      <Button
+        appearance="pill"
+        tone="outline"
+        size="sm"
+        type="button"
+        @click="prepareNewOffer"
+      >
         {{ t("adminCommercePlacementOffer.newOfferAction") }}
       </Button>
     </template>
@@ -16,15 +22,19 @@
           {{ t("adminCommercePlacementOffer.emptyOffers") }}
         </div>
         <div v-else class="offer-rail-list">
-          <ChoiceCard
+          <PuCard
             v-for="offer in offers"
             :key="offer.id"
             :active="selectedOfferId === offer.id && !isCreatingOffer"
             @click="selectOffer(offer.id)"
+            selectable
+            variant="outline"
+            padding="sm"
+            gap="xs"
           >
             <span>#{{ offer.id }} · {{ offer.productType }}</span>
             <small>{{ offer.status }}</small>
-          </ChoiceCard>
+          </PuCard>
         </div>
       </AdminRailPanel>
     </template>
@@ -42,13 +52,19 @@
         />
         <template v-else>
           <BentoItem
-            :title="isCreatingOffer ? t('adminCommercePlacementOffer.createOfferTitle') : t('adminCommercePlacementOffer.editOfferTitle')"
+            :title="
+              isCreatingOffer
+                ? t('adminCommercePlacementOffer.createOfferTitle')
+                : t('adminCommercePlacementOffer.editOfferTitle')
+            "
             :description="t('adminCommercePlacementOffer.offerHint')"
             span="full"
           >
             <div class="form-stack">
               <label class="field">
-                <span class="field-label">{{ t("adminCommercePlacementOffer.productTypeLabel") }}</span>
+                <span class="field-label">{{
+                  t("adminCommercePlacementOffer.productTypeLabel")
+                }}</span>
                 <select v-model="offerForm.productType" class="text-input">
                   <option value="RENTAL">RENTAL</option>
                   <option value="RIDE_HAILING">RIDE_HAILING</option>
@@ -56,7 +72,9 @@
               </label>
 
               <label class="field">
-                <span class="field-label">{{ t("adminCommercePlacementOffer.statusLabel") }}</span>
+                <span class="field-label">{{
+                  t("adminCommercePlacementOffer.statusLabel")
+                }}</span>
                 <select v-model="offerForm.status" class="text-input">
                   <option value="DRAFT">DRAFT</option>
                   <option value="ACTIVE">ACTIVE</option>
@@ -66,8 +84,14 @@
               </label>
 
               <label class="field">
-                <span class="field-label">{{ t("adminCommercePlacementOffer.spuIdsLabel") }}</span>
-                <input v-model="offerForm.spuIdsCsv" class="text-input" type="text" />
+                <span class="field-label">{{
+                  t("adminCommercePlacementOffer.spuIdsLabel")
+                }}</span>
+                <input
+                  v-model="offerForm.spuIdsCsv"
+                  class="text-input"
+                  type="text"
+                />
               </label>
 
               <div class="hint">
@@ -75,18 +99,36 @@
               </div>
 
               <label class="field">
-                <span class="field-label">{{ t("adminCommercePlacementOffer.termsVersionLabel") }}</span>
-                <input v-model.number="offerForm.termsVersion" class="text-input" type="number" />
+                <span class="field-label">{{
+                  t("adminCommercePlacementOffer.termsVersionLabel")
+                }}</span>
+                <input
+                  v-model.number="offerForm.termsVersion"
+                  class="text-input"
+                  type="number"
+                />
               </label>
 
               <label class="field">
-                <span class="field-label">{{ t("adminCommercePlacementOffer.startsAtLabel") }}</span>
-                <input v-model="offerForm.startsAt" class="text-input" type="text" />
+                <span class="field-label">{{
+                  t("adminCommercePlacementOffer.startsAtLabel")
+                }}</span>
+                <input
+                  v-model="offerForm.startsAt"
+                  class="text-input"
+                  type="text"
+                />
               </label>
 
               <label class="field">
-                <span class="field-label">{{ t("adminCommercePlacementOffer.endsAtLabel") }}</span>
-                <input v-model="offerForm.endsAt" class="text-input" type="text" />
+                <span class="field-label">{{
+                  t("adminCommercePlacementOffer.endsAtLabel")
+                }}</span>
+                <input
+                  v-model="offerForm.endsAt"
+                  class="text-input"
+                  type="text"
+                />
               </label>
 
               <PricingRulesEditor
@@ -95,8 +137,17 @@
               />
 
               <div class="inline-actions">
-                <Button size="sm" type="button" :disabled="isSavingOffer" @click="handleSaveOffer">
-                  {{ isSavingOffer ? t("adminCommercePlacementOffer.savingAction") : t("adminCommercePlacementOffer.saveOfferAction") }}
+                <Button
+                  size="sm"
+                  type="button"
+                  :disabled="isSavingOffer"
+                  @click="handleSaveOffer"
+                >
+                  {{
+                    isSavingOffer
+                      ? t("adminCommercePlacementOffer.savingAction")
+                      : t("adminCommercePlacementOffer.saveOfferAction")
+                  }}
                 </Button>
               </div>
             </div>
@@ -136,8 +187,7 @@ import {
 import PricingRulesEditor from "@/domains/admin-commerce/ui/pricing-rules/PricingRulesEditor.vue";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
 import Button from "@/shared/ui/actions/Button.vue";
-import ChoiceCard from "@/shared/ui/containers/ChoiceCard.vue";
-import { PuLoadingState } from "@partner-up-dev/design-web";
+import { PuCard, PuLoadingState } from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const { isAdmin, logout } = useAdminAccess();
@@ -158,7 +208,8 @@ const selectedOfferId = computed<number | null>(() => {
 });
 
 const selectedOffer = computed(
-  () => offers.value.find((offer) => offer.id === selectedOfferId.value) ?? null,
+  () =>
+    offers.value.find((offer) => offer.id === selectedOfferId.value) ?? null,
 );
 
 const toDateInputValue = (value: string | Date | null | undefined): string => {
@@ -189,7 +240,8 @@ const emptyOfferForm = (): OfferEditorForm => ({
 const offerForm = ref<OfferEditorForm>(emptyOfferForm());
 
 const isSavingOffer = computed(
-  () => createOfferMutation.isPending.value || updateOfferMutation.isPending.value,
+  () =>
+    createOfferMutation.isPending.value || updateOfferMutation.isPending.value,
 );
 
 const availableSpuHint = computed(() =>
@@ -211,7 +263,9 @@ const pageErrorMessage = computed(
 watch(
   offers,
   (nextOffers) => {
-    if (!nextOffers.some((offer) => String(offer.id) === selectedOfferIdRaw.value)) {
+    if (
+      !nextOffers.some((offer) => String(offer.id) === selectedOfferIdRaw.value)
+    ) {
       selectedOfferIdRaw.value = nextOffers[0] ? String(nextOffers[0].id) : "";
     }
   },
@@ -284,7 +338,10 @@ const handleSaveOffer = async () => {
     if (selectedOfferId.value === null) {
       throw new Error(t("adminCommercePlacementOffer.emptyOffers"));
     }
-    await updateOfferMutation.mutateAsync({ offerId: selectedOfferId.value, input });
+    await updateOfferMutation.mutateAsync({
+      offerId: selectedOfferId.value,
+      input,
+    });
   } catch (error) {
     localErrorMessage.value =
       error instanceof Error ? error.message : t("common.operationFailed");
diff --git a/apps/frontend/src/pages/AdminCommerceOrderBillPage.vue b/apps/frontend/src/pages/AdminCommerceOrderBillPage.vue
index 3c261d71e..61ff0ee63 100644
--- a/apps/frontend/src/pages/AdminCommerceOrderBillPage.vue
+++ b/apps/frontend/src/pages/AdminCommerceOrderBillPage.vue
@@ -10,15 +10,19 @@
           {{ t("adminCommerceOrderBill.emptyOrders") }}
         </div>
         <div v-else class="order-rail-list">
-          <ChoiceCard
+          <PuCard
             v-for="record in orders"
             :key="record.order.id"
             :active="selectedOrderId === record.order.id"
             @click="selectedOrderIdRaw = record.order.id"
+            selectable
+            variant="outline"
+            padding="sm"
+            gap="xs"
           >
             <span>{{ record.order.family }} · {{ record.order.status }}</span>
             <small>#{{ record.order.offerId }}</small>
-          </ChoiceCard>
+          </PuCard>
         </div>
       </AdminRailPanel>
     </template>
@@ -42,7 +46,10 @@
           align="start"
         />
         <template v-else-if="selectedOrderRecord">
-          <BentoItem :title="t('adminCommerceOrderBill.orderSummaryTitle')" span="full">
+          <BentoItem
+            :title="t('adminCommerceOrderBill.orderSummaryTitle')"
+            span="full"
+          >
             <dl class="summary-grid">
               <div>
                 <dt>{{ t("adminCommerceOrderBill.orderIdLabel") }}</dt>
@@ -59,12 +66,22 @@
             </dl>
           </BentoItem>
 
-          <BentoItem :title="t('adminCommerceOrderBill.participantsTitle')" span="full">
-            <pre class="json-pre">{{ prettyJson(selectedOrderRecord.order.participants) }}</pre>
+          <BentoItem
+            :title="t('adminCommerceOrderBill.participantsTitle')"
+            span="full"
+          >
+            <pre class="json-pre">{{
+              prettyJson(selectedOrderRecord.order.participants)
+            }}</pre>
           </BentoItem>
 
-          <BentoItem :title="t('adminCommerceOrderBill.terminationAttemptsTitle')" span="full">
-            <pre class="json-pre">{{ prettyJson(selectedOrderRecord.order.terminationAttempts) }}</pre>
+          <BentoItem
+            :title="t('adminCommerceOrderBill.terminationAttemptsTitle')"
+            span="full"
+          >
+            <pre class="json-pre">{{
+              prettyJson(selectedOrderRecord.order.terminationAttempts)
+            }}</pre>
           </BentoItem>
 
           <BentoItem :title="t('adminCommerceOrderBill.billTitle')" span="full">
@@ -87,7 +104,9 @@
                 </div>
               </dl>
 
-              <pre class="json-pre">{{ prettyJson(selectedOrderRecord.billLines) }}</pre>
+              <pre class="json-pre">{{
+                prettyJson(selectedOrderRecord.billLines)
+              }}</pre>
             </template>
           </BentoItem>
         </template>
@@ -107,8 +126,11 @@ import { useAdminAccess } from "@/domains/admin/use-cases/useAdminAccess";
 import { useAdminCommerceOrderBillWorkspace } from "@/domains/admin-commerce/queries/useAdminCommerce";
 import { prettyJson } from "@/domains/admin-commerce/editor-json";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import ChoiceCard from "@/shared/ui/containers/ChoiceCard.vue";
-import { PuEmptyState, PuLoadingState } from "@partner-up-dev/design-web";
+import {
+  PuCard,
+  PuEmptyState,
+  PuLoadingState,
+} from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const { isAdmin, logout } = useAdminAccess();
@@ -118,7 +140,9 @@ const selectedOrderIdRaw = ref("");
 const orders = computed(() => workspaceQuery.data.value?.orders ?? []);
 const selectedOrderId = computed(() => selectedOrderIdRaw.value || null);
 const selectedOrderRecord = computed(
-  () => orders.value.find((record) => record.order.id === selectedOrderId.value) ?? null,
+  () =>
+    orders.value.find((record) => record.order.id === selectedOrderId.value) ??
+    null,
 );
 
 const effectiveTotalFen = computed(() => {
@@ -131,7 +155,9 @@ const effectiveTotalFen = computed(() => {
 watch(
   orders,
   (nextOrders) => {
-    if (!nextOrders.some((record) => record.order.id === selectedOrderIdRaw.value)) {
+    if (
+      !nextOrders.some((record) => record.order.id === selectedOrderIdRaw.value)
+    ) {
       selectedOrderIdRaw.value = nextOrders[0]?.order.id ?? "";
     }
   },
diff --git a/apps/frontend/src/pages/AdminCommercePlacementPage.vue b/apps/frontend/src/pages/AdminCommercePlacementPage.vue
index b97f81b16..2b1ca1f20 100644
--- a/apps/frontend/src/pages/AdminCommercePlacementPage.vue
+++ b/apps/frontend/src/pages/AdminCommercePlacementPage.vue
@@ -5,7 +5,13 @@
     </template>
 
     <template #actions>
-      <Button appearance="pill" tone="outline" size="sm" type="button" @click="prepareNewPlacement">
+      <Button
+        appearance="pill"
+        tone="outline"
+        size="sm"
+        type="button"
+        @click="prepareNewPlacement"
+      >
         {{ t("adminCommercePlacementOffer.newPlacementAction") }}
       </Button>
     </template>
@@ -16,15 +22,21 @@
           {{ t("adminCommercePlacementOffer.emptyPlacements") }}
         </div>
         <div v-else class="placement-rail-list">
-          <ChoiceCard
+          <PuCard
             v-for="placement in placements"
             :key="placement.id"
-            :active="selectedPlacementId === placement.id && !isCreatingPlacement"
+            :active="
+              selectedPlacementId === placement.id && !isCreatingPlacement
+            "
             @click="selectPlacement(placement.id)"
+            selectable
+            variant="outline"
+            padding="sm"
+            gap="xs"
           >
             <span>#{{ placement.id }} · offer #{{ placement.offerId }}</span>
             <small>{{ placement.status }} · p{{ placement.priority }}</small>
-          </ChoiceCard>
+          </PuCard>
         </div>
       </AdminRailPanel>
     </template>
@@ -42,13 +54,19 @@
         />
         <template v-else>
           <BentoItem
-            :title="isCreatingPlacement ? t('adminCommercePlacementOffer.createPlacementTitle') : t('adminCommercePlacementOffer.editPlacementTitle')"
+            :title="
+              isCreatingPlacement
+                ? t('adminCommercePlacementOffer.createPlacementTitle')
+                : t('adminCommercePlacementOffer.editPlacementTitle')
+            "
             :description="t('adminCommercePlacementOffer.placementHint')"
             span="full"
           >
             <div class="form-stack">
               <label class="field">
-                <span class="field-label">{{ t("adminCommercePlacementOffer.statusLabel") }}</span>
+                <span class="field-label">{{
+                  t("adminCommercePlacementOffer.statusLabel")
+                }}</span>
                 <select v-model="placementForm.status" class="text-input">
                   <option value="DRAFT">DRAFT</option>
                   <option value="ACTIVE">ACTIVE</option>
@@ -58,23 +76,47 @@
               </label>
 
               <label class="field">
-                <span class="field-label">{{ t("adminCommercePlacementOffer.priorityLabel") }}</span>
-                <input v-model.number="placementForm.priority" class="text-input" type="number" />
+                <span class="field-label">{{
+                  t("adminCommercePlacementOffer.priorityLabel")
+                }}</span>
+                <input
+                  v-model.number="placementForm.priority"
+                  class="text-input"
+                  type="number"
+                />
               </label>
 
               <label class="field">
-                <span class="field-label">{{ t("adminCommercePlacementOffer.placementEffectiveFromLabel") }}</span>
-                <input v-model="placementForm.effectiveFrom" class="text-input" type="text" />
+                <span class="field-label">{{
+                  t("adminCommercePlacementOffer.placementEffectiveFromLabel")
+                }}</span>
+                <input
+                  v-model="placementForm.effectiveFrom"
+                  class="text-input"
+                  type="text"
+                />
               </label>
 
               <label class="field">
-                <span class="field-label">{{ t("adminCommercePlacementOffer.placementEffectiveToLabel") }}</span>
-                <input v-model="placementForm.effectiveTo" class="text-input" type="text" />
+                <span class="field-label">{{
+                  t("adminCommercePlacementOffer.placementEffectiveToLabel")
+                }}</span>
+                <input
+                  v-model="placementForm.effectiveTo"
+                  class="text-input"
+                  type="text"
+                />
               </label>
 
               <label class="field">
-                <span class="field-label">{{ t("adminCommercePlacementOffer.offerIdLabel") }}</span>
-                <input v-model.number="placementForm.offerId" class="text-input" type="number" />
+                <span class="field-label">{{
+                  t("adminCommercePlacementOffer.offerIdLabel")
+                }}</span>
+                <input
+                  v-model.number="placementForm.offerId"
+                  class="text-input"
+                  type="number"
+                />
               </label>
 
               <div class="hint">
@@ -82,20 +124,36 @@
               </div>
 
               <label class="field">
-                <span class="field-label">{{ t("adminCommercePlacementOffer.ctaLabel") }}</span>
-                <input v-model="placementForm.ctaLabel" class="text-input" type="text" />
+                <span class="field-label">{{
+                  t("adminCommercePlacementOffer.ctaLabel")
+                }}</span>
+                <input
+                  v-model="placementForm.ctaLabel"
+                  class="text-input"
+                  type="text"
+                />
               </label>
 
               <label class="field">
-                <span class="field-label">{{ t("adminCommercePlacementOffer.creativeDescriptionLabel") }}</span>
-                <input v-model="placementForm.creativeDescription" class="text-input" type="text" />
+                <span class="field-label">{{
+                  t("adminCommercePlacementOffer.creativeDescriptionLabel")
+                }}</span>
+                <input
+                  v-model="placementForm.creativeDescription"
+                  class="text-input"
+                  type="text"
+                />
               </label>
 
-              <PlacementMatchingRulesEditor v-model="placementForm.matchingRule" />
+              <PlacementMatchingRulesEditor
+                v-model="placementForm.matchingRule"
+              />
 
               <section class="binding-editor">
                 <div class="binding-editor__header">
-                  <span class="field-label">{{ t("adminCommercePlacementOffer.bindingRulesLabel") }}</span>
+                  <span class="field-label">{{
+                    t("adminCommercePlacementOffer.bindingRulesLabel")
+                  }}</span>
                   <Button
                     appearance="pill"
                     tone="outline"
@@ -113,17 +171,31 @@
                   class="binding-row"
                 >
                   <label class="field">
-                    <span class="field-label">{{ t("adminCommercePlacementOffer.bindingFieldLabel") }}</span>
-                    <input v-model="rule.fieldKey" class="text-input" type="text" />
+                    <span class="field-label">{{
+                      t("adminCommercePlacementOffer.bindingFieldLabel")
+                    }}</span>
+                    <input
+                      v-model="rule.fieldKey"
+                      class="text-input"
+                      type="text"
+                    />
                   </label>
 
                   <label class="field">
-                    <span class="field-label">{{ t("adminCommercePlacementOffer.bindingSourceLabel") }}</span>
-                    <input v-model="rule.contextPath" class="text-input" type="text" />
+                    <span class="field-label">{{
+                      t("adminCommercePlacementOffer.bindingSourceLabel")
+                    }}</span>
+                    <input
+                      v-model="rule.contextPath"
+                      class="text-input"
+                      type="text"
+                    />
                   </label>
 
                   <div class="binding-row__lock">
-                    <span class="field-label">{{ t("adminCommercePlacementOffer.bindingLockLabel") }}</span>
+                    <span class="field-label">{{
+                      t("adminCommercePlacementOffer.bindingLockLabel")
+                    }}</span>
                     <span class="binding-row__lock-value">true</span>
                   </div>
 
@@ -135,15 +207,26 @@
                       type="button"
                       @click="removeBindingRule(rule.id)"
                     >
-                      {{ t("adminCommercePlacementOffer.removeBindingRuleAction") }}
+                      {{
+                        t("adminCommercePlacementOffer.removeBindingRuleAction")
+                      }}
                     </Button>
                   </div>
                 </div>
               </section>
 
               <div class="inline-actions">
-                <Button size="sm" type="button" :disabled="isSavingPlacement" @click="handleSavePlacement">
-                  {{ isSavingPlacement ? t("adminCommercePlacementOffer.savingAction") : t("adminCommercePlacementOffer.savePlacementAction") }}
+                <Button
+                  size="sm"
+                  type="button"
+                  :disabled="isSavingPlacement"
+                  @click="handleSavePlacement"
+                >
+                  {{
+                    isSavingPlacement
+                      ? t("adminCommercePlacementOffer.savingAction")
+                      : t("adminCommercePlacementOffer.savePlacementAction")
+                  }}
                 </Button>
               </div>
             </div>
@@ -183,8 +266,7 @@ import {
 import PlacementMatchingRulesEditor from "@/domains/admin-commerce/ui/placement-matching-rules/PlacementMatchingRulesEditor.vue";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
 import Button from "@/shared/ui/actions/Button.vue";
-import ChoiceCard from "@/shared/ui/containers/ChoiceCard.vue";
-import { PuLoadingState } from "@partner-up-dev/design-web";
+import { PuCard, PuLoadingState } from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const { isAdmin, logout } = useAdminAccess();
@@ -206,8 +288,9 @@ const selectedPlacementId = computed<number | null>(() => {
 
 const selectedPlacement = computed(
   () =>
-    placements.value.find((placement) => placement.id === selectedPlacementId.value) ??
-    null,
+    placements.value.find(
+      (placement) => placement.id === selectedPlacementId.value,
+    ) ?? null,
 );
 
 const toDateInputValue = (value: string | Date | null | undefined): string => {
@@ -259,7 +342,9 @@ const defaultPlacementBindingRules = (): PlacementBindingRuleDraft[] => [
   }),
 ];
 
-const bindingRulesForOfferId = (offerId: number): PlacementBindingRuleDraft[] => {
+const bindingRulesForOfferId = (
+  offerId: number,
+): PlacementBindingRuleDraft[] => {
   const offer = offers.value.find((item) => item.id === offerId) ?? null;
   if (offer?.productType !== "RENTAL") return [];
   return defaultPlacementBindingRules();
@@ -284,7 +369,8 @@ const placementForm = ref<PlacementEditorForm>(emptyPlacementForm());
 
 const isSavingPlacement = computed(
   () =>
-    createPlacementMutation.isPending.value || updatePlacementMutation.isPending.value,
+    createPlacementMutation.isPending.value ||
+    updatePlacementMutation.isPending.value,
 );
 
 const availableOfferHint = computed(() =>
diff --git a/apps/frontend/src/pages/AdminPaymentPage.vue b/apps/frontend/src/pages/AdminPaymentPage.vue
index d6615f5d4..184fb5030 100644
--- a/apps/frontend/src/pages/AdminPaymentPage.vue
+++ b/apps/frontend/src/pages/AdminPaymentPage.vue
@@ -22,19 +22,26 @@
           暂无 Payment Provider Instance
         </div>
         <div v-else class="provider-rail-list">
-          <ChoiceCard
+          <PuCard
             v-for="record in providerInstances"
             :key="record.id"
             :active="selectedProviderId === record.id"
             data-testid="admin-payment.provider-card"
             @click="selectedProviderIdRaw = record.id"
+            selectable
+            variant="outline"
+            padding="sm"
+            gap="xs"
           >
             <span>{{ record.displayName }}</span>
             <small>{{ record.providerType }} / {{ record.clientId }}</small>
-            <span class="status-pill" :class="{ 'is-disabled': record.status === 'DISABLED' }">
+            <span
+              class="status-pill"
+              :class="{ 'is-disabled': record.status === 'DISABLED' }"
+            >
               {{ providerStatusLabel(record.status) }}
             </span>
-          </ChoiceCard>
+          </PuCard>
         </div>
       </AdminRailPanel>
     </template>
@@ -56,7 +63,11 @@
               <div class="field-grid">
                 <label class="field">
                   <span class="field-label">Provider</span>
-                  <select v-model="form.providerType" class="text-input" disabled>
+                  <select
+                    v-model="form.providerType"
+                    class="text-input"
+                    disabled
+                  >
                     <option value="WECHAT_PAY">微信支付 WECHAT_PAY</option>
                   </select>
                 </label>
@@ -121,7 +132,9 @@
 
                 <div class="field">
                   <span class="field-label">Instance Key</span>
-                  <output class="read-only-output">{{ derivedInstanceKey }}</output>
+                  <output class="read-only-output">{{
+                    derivedInstanceKey
+                  }}</output>
                 </div>
 
                 <label class="field field--wide">
@@ -203,7 +216,9 @@
               </div>
               <div>
                 <dt>Instance Key</dt>
-                <dd class="breakable">{{ selectedProvider?.instanceKey ?? "-" }}</dd>
+                <dd class="breakable">
+                  {{ selectedProvider?.instanceKey ?? "-" }}
+                </dd>
               </div>
               <div>
                 <dt>API v3 Key</dt>
@@ -223,15 +238,25 @@
               </div>
               <div>
                 <dt>Charge Notify URL</dt>
-                <dd class="breakable">{{ selectedProvider?.chargeNotifyUrl ?? "-" }}</dd>
+                <dd class="breakable">
+                  {{ selectedProvider?.chargeNotifyUrl ?? "-" }}
+                </dd>
               </div>
               <div>
                 <dt>Refund Notify URL</dt>
-                <dd class="breakable">{{ selectedProvider?.refundNotifyUrl ?? "-" }}</dd>
+                <dd class="breakable">
+                  {{ selectedProvider?.refundNotifyUrl ?? "-" }}
+                </dd>
               </div>
               <div>
                 <dt>Updated At</dt>
-                <dd>{{ selectedProvider ? formatTimestamp(selectedProvider.updatedAt) : "-" }}</dd>
+                <dd>
+                  {{
+                    selectedProvider
+                      ? formatTimestamp(selectedProvider.updatedAt)
+                      : "-"
+                  }}
+                </dd>
               </div>
             </dl>
           </BentoItem>
@@ -264,8 +289,7 @@ import {
 } from "@/domains/admin-payment/queries/useAdminPayment";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
 import Button from "@/shared/ui/actions/Button.vue";
-import ChoiceCard from "@/shared/ui/containers/ChoiceCard.vue";
-import { PuLoadingState } from "@partner-up-dev/design-web";
+import { PuCard, PuLoadingState } from "@partner-up-dev/design-web";
 
 const CREATE_PROVIDER_ID = "__create__";
 
@@ -312,12 +336,16 @@ const selectedProvider = computed(
       (record) => record.id === selectedProviderId.value,
     ) ?? null,
 );
-const isCreateMode = computed(() => selectedProviderId.value === CREATE_PROVIDER_ID);
+const isCreateMode = computed(
+  () => selectedProviderId.value === CREATE_PROVIDER_ID,
+);
 const isSaving = computed(
   () => createMutation.isPending.value || updateMutation.isPending.value,
 );
 const formTitle = computed(() =>
-  isCreateMode.value ? "新建 Payment Provider Instance" : "编辑 Payment Provider Instance",
+  isCreateMode.value
+    ? "新建 Payment Provider Instance"
+    : "编辑 Payment Provider Instance",
 );
 const derivedInstanceKey = computed(() => {
   const mchId = form.value.mchId.trim();
@@ -333,7 +361,9 @@ const optionalSecretPlaceholder = computed(() =>
 );
 const apiV3KeyStateLabel = computed(() => {
   if (isCreateMode.value) return "-";
-  return selectedProvider.value?.config.apiV3KeyConfigured ? "已配置" : "未配置";
+  return selectedProvider.value?.config.apiV3KeyConfigured
+    ? "已配置"
+    : "未配置";
 });
 const merchantPrivateKeyStateLabel = computed(() => {
   if (isCreateMode.value) return "-";
@@ -389,8 +419,7 @@ function formFromProvider(provider: ProviderInstance): ProviderForm {
     chargeMode: provider.config.chargeMode,
     endpointBaseUrl: provider.config.endpointBaseUrl ?? "",
     apiV3Key: "",
-    merchantCertificateSerialNo:
-      provider.config.merchantCertificate.serialNo,
+    merchantCertificateSerialNo: provider.config.merchantCertificate.serialNo,
     merchantPrivateKeyPem: "",
     merchantCertificatePem: "",
   };
@@ -412,7 +441,10 @@ const requireCreateSecret = (value: string, label: string): void => {
 
 const buildInput = (): AdminPaymentProviderInstanceInput => {
   requireCreateSecret(form.value.apiV3Key, "API v3 Key");
-  requireCreateSecret(form.value.merchantPrivateKeyPem, "Merchant Private Key PEM");
+  requireCreateSecret(
+    form.value.merchantPrivateKeyPem,
+    "Merchant Private Key PEM",
+  );
 
   return {
     providerType: form.value.providerType,
diff --git a/apps/frontend/src/pages/AdminRideHailingPage.vue b/apps/frontend/src/pages/AdminRideHailingPage.vue
index 17783b8c8..3c3ec2759 100644
--- a/apps/frontend/src/pages/AdminRideHailingPage.vue
+++ b/apps/frontend/src/pages/AdminRideHailingPage.vue
@@ -22,19 +22,26 @@
           暂无 Provider Instance
         </div>
         <div v-else class="provider-rail-list">
-          <ChoiceCard
+          <PuCard
             v-for="record in providerInstances"
             :key="record.id"
             :active="selectedProviderId === record.id"
             data-testid="admin-ride-hailing.provider-card"
             @click="selectedProviderIdRaw = record.id"
+            selectable
+            variant="outline"
+            padding="sm"
+            gap="xs"
           >
             <span>{{ record.displayName }}</span>
             <small>{{ record.providerType }} / {{ record.instanceKey }}</small>
-            <span class="status-pill" :class="{ 'is-disabled': record.status === 'DISABLED' }">
+            <span
+              class="status-pill"
+              :class="{ 'is-disabled': record.status === 'DISABLED' }"
+            >
               {{ providerStatusLabel(record.status) }}
             </span>
-          </ChoiceCard>
+          </PuCard>
         </div>
       </AdminRailPanel>
     </template>
@@ -56,7 +63,11 @@
               <div class="field-grid">
                 <label class="field">
                   <span class="field-label">Provider</span>
-                  <select v-model="form.providerType" class="text-input" disabled>
+                  <select
+                    v-model="form.providerType"
+                    class="text-input"
+                    disabled
+                  >
                     <option value="CAOCAO">曹操 CAOCAO</option>
                   </select>
                 </label>
@@ -168,11 +179,19 @@
               </div>
               <div>
                 <dt>Callback URL</dt>
-                <dd class="breakable">{{ selectedProvider?.callbackUrl ?? "-" }}</dd>
+                <dd class="breakable">
+                  {{ selectedProvider?.callbackUrl ?? "-" }}
+                </dd>
               </div>
               <div>
                 <dt>Updated At</dt>
-                <dd>{{ selectedProvider ? formatTimestamp(selectedProvider.updatedAt) : "-" }}</dd>
+                <dd>
+                  {{
+                    selectedProvider
+                      ? formatTimestamp(selectedProvider.updatedAt)
+                      : "-"
+                  }}
+                </dd>
               </div>
             </dl>
           </BentoItem>
@@ -205,8 +224,7 @@ import {
 } from "@/domains/admin-ride-hailing/queries/useAdminRideHailing";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
 import Button from "@/shared/ui/actions/Button.vue";
-import ChoiceCard from "@/shared/ui/containers/ChoiceCard.vue";
-import { PuLoadingState } from "@partner-up-dev/design-web";
+import { PuCard, PuLoadingState } from "@partner-up-dev/design-web";
 
 const CREATE_PROVIDER_ID = "__create__";
 
@@ -250,7 +268,9 @@ const selectedProvider = computed(
       (record) => record.id === selectedProviderId.value,
     ) ?? null,
 );
-const isCreateMode = computed(() => selectedProviderId.value === CREATE_PROVIDER_ID);
+const isCreateMode = computed(
+  () => selectedProviderId.value === CREATE_PROVIDER_ID,
+);
 const isSaving = computed(
   () => createMutation.isPending.value || updateMutation.isPending.value,
 );
diff --git a/apps/frontend/src/pages/CommerceBillDetailPage.vue b/apps/frontend/src/pages/CommerceBillDetailPage.vue
index f1357ac7f..2ba440ede 100644
--- a/apps/frontend/src/pages/CommerceBillDetailPage.vue
+++ b/apps/frontend/src/pages/CommerceBillDetailPage.vue
@@ -1,5 +1,9 @@
 <template>
-  <PuPageScaffold viewport="screen" class="bill-detail-page" data-testid="bill-detail.page">
+  <PuPageScaffold
+    viewport="screen"
+    class="bill-detail-page"
+    data-testid="bill-detail.page"
+  >
     <template #header>
       <PageHeader
         title="账单详情"
@@ -70,13 +74,15 @@
             </div>
           </div>
 
-          <ActionLink
-            :to="{ path: `/orders/${detail.order.id}` }"
+          <PuButton
+            :action="{ to: { path: `/orders/${detail.order.id}` } }"
+            shape="rect"
+            tone="primary"
             variant="outline"
             data-testid="bill-detail.order-link"
           >
             返回订单详情
-          </ActionLink>
+          </PuButton>
         </PuCard>
 
         <PuCard as="section" gap="md">
@@ -97,24 +103,34 @@
                   <strong>{{ line.label }}</strong>
                   <span>{{ line.description ?? "无补充说明" }}</span>
                   <small>
-                    {{ line.userId === detail.viewer.userId ? "你的账单行" : "其他参与者账单行" }}
+                    {{
+                      line.userId === detail.viewer.userId
+                        ? "你的账单行"
+                        : "其他参与者账单行"
+                    }}
                   </small>
                 </div>
-                <b>{{ line.kind === "REFUND" ? "-" : "" }}{{ formatFen(line.amountFen) }}</b>
+                <b
+                  >{{ line.kind === "REFUND" ? "-" : ""
+                  }}{{ formatFen(line.amountFen) }}</b
+                >
               </div>
 
               <div class="bill-detail-page__line-footer">
                 <span data-testid="bill-detail.line-status">
                   {{ lineStatusLabel(line.settlementStatus) }}
                 </span>
-                <ActionLink
+                <PuButton
                   v-if="line.payableByViewer && line.checkoutHref"
-                  :to="{ path: line.checkoutHref }"
+                  :action="{ to: { path: line.checkoutHref } }"
+                  shape="rect"
+                  tone="primary"
+                  variant="solid"
                   size="sm"
                   data-testid="bill-detail.pay-line"
                 >
                   去支付
-                </ActionLink>
+                </PuButton>
               </div>
             </div>
           </div>
@@ -127,9 +143,13 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { useRoute } from "vue-router";
-import { PuCard, PuInlineNotice, PuPageScaffold } from "@partner-up-dev/design-web";
+import {
+  PuButton,
+  PuCard,
+  PuInlineNotice,
+  PuPageScaffold,
+} from "@partner-up-dev/design-web";
 import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
-import ActionLink from "@/shared/ui/actions/ActionLink.vue";
 import { useBillDetail } from "@/domains/commerce/queries/useCommerce";
 
 const route = useRoute();
@@ -153,7 +173,8 @@ const settlementStatusLabel = computed(() => {
   }
   if (detail.value && detail.value.bill.refundTotalFen > 0) return "退款处理中";
   if (detail.value?.bill.settlementStatus === "PAID") return "已支付";
-  if (detail.value?.bill.settlementStatus === "PARTIALLY_PAID") return "部分已支付";
+  if (detail.value?.bill.settlementStatus === "PARTIALLY_PAID")
+    return "部分已支付";
   return "待支付";
 });
 
diff --git a/apps/frontend/src/pages/CommerceOrderDetailPage.vue b/apps/frontend/src/pages/CommerceOrderDetailPage.vue
index f4ce22b64..17ecd0c0d 100644
--- a/apps/frontend/src/pages/CommerceOrderDetailPage.vue
+++ b/apps/frontend/src/pages/CommerceOrderDetailPage.vue
@@ -1,5 +1,9 @@
 <template>
-  <PuPageScaffold viewport="screen" class="order-detail-page" data-testid="order-detail.page">
+  <PuPageScaffold
+    viewport="screen"
+    class="order-detail-page"
+    data-testid="order-detail.page"
+  >
     <template #header>
       <PageHeader
         title="订单详情"
@@ -7,15 +11,16 @@
         :back-fallback-to="backFallbackTo"
       >
         <template #top-actions>
-          <ActionLink
-            :to="{ name: 'contact-support' }"
-            appearance="pill"
+          <PuButton
+            :action="{ to: { name: 'contact-support' } }"
+            shape="pill"
+            tone="primary"
             variant="outline"
             size="sm"
             data-testid="order-detail.contact-support.open"
           >
             客服
-          </ActionLink>
+          </PuButton>
         </template>
       </PageHeader>
     </template>
@@ -35,7 +40,10 @@
         :message="orderErrorMessage"
       />
 
-      <div v-else-if="orderQuery.isPending.value" class="order-detail-page__loading">
+      <div
+        v-else-if="orderQuery.isPending.value"
+        class="order-detail-page__loading"
+      >
         正在加载订单...
       </div>
 
@@ -78,10 +86,14 @@
               data-testid="order-detail.ride-hailing.route-map"
             >
               <div class="order-detail-page__ride-polyline"></div>
-              <div class="order-detail-page__ride-callout order-detail-page__ride-callout--origin">
+              <div
+                class="order-detail-page__ride-callout order-detail-page__ride-callout--origin"
+              >
                 {{ rideHailingDetail.route.origin.name }}
               </div>
-              <div class="order-detail-page__ride-callout order-detail-page__ride-callout--destination">
+              <div
+                class="order-detail-page__ride-callout order-detail-page__ride-callout--destination"
+              >
                 {{ rideHailingDetail.route.destination.name }}
               </div>
             </div>
@@ -97,7 +109,9 @@
               <div class="order-detail-page__facts">
                 <div>
                   <span>车型</span>
-                  <strong data-testid="order-detail.ride-hailing.selected-vehicle">
+                  <strong
+                    data-testid="order-detail.ride-hailing.selected-vehicle"
+                  >
                     {{ rideHailingDetail.selectedVehicleName }}
                   </strong>
                 </div>
@@ -113,13 +127,21 @@
                     {{ ridePassengersLabel }}
                   </strong>
                 </div>
-                <div v-if="rideHailingDetail.driver || rideHailingDetail.live?.driver">
+                <div
+                  v-if="
+                    rideHailingDetail.driver || rideHailingDetail.live?.driver
+                  "
+                >
                   <span>司机</span>
                   <strong data-testid="order-detail.ride-hailing.driver">
                     {{ rideDriverLabel }}
                   </strong>
                 </div>
-                <div v-if="rideHailingDetail.vehicle || rideHailingDetail.live?.vehicle">
+                <div
+                  v-if="
+                    rideHailingDetail.vehicle || rideHailingDetail.live?.vehicle
+                  "
+                >
                   <span>车辆</span>
                   <strong data-testid="order-detail.ride-hailing.vehicle">
                     {{ rideVehicleLabel }}
@@ -127,125 +149,134 @@
                 </div>
               </div>
 
-              <ActionLink
+              <PuButton
                 v-if="detail.bill"
-                :to="{ path: `/bills/${detail.bill.id}` }"
+                :action="{ to: { path: `/bills/${detail.bill.id}` } }"
+                shape="rect"
+                tone="primary"
+                variant="solid"
                 size="lg"
                 data-testid="order-detail.ride-hailing.bill-detail-link"
               >
                 查看账单并支付
-              </ActionLink>
+              </PuButton>
             </PuCard>
           </section>
         </template>
 
         <template v-else>
           <PuCard as="section" gap="md">
-          <div class="order-detail-page__section-heading">
-            <p class="order-detail-page__eyebrow">Bill</p>
-            <h2 data-testid="order-detail.total-price">
-              {{ formatFen(billEffectiveTotalFen) }}
-            </h2>
-          </div>
+            <div class="order-detail-page__section-heading">
+              <p class="order-detail-page__eyebrow">Bill</p>
+              <h2 data-testid="order-detail.total-price">
+                {{ formatFen(billEffectiveTotalFen) }}
+              </h2>
+            </div>
 
-          <div class="order-detail-page__bill-lines">
-            <div
-              v-for="line in detail.bill?.lines ?? []"
-              :key="line.id"
-              data-testid="order-detail.bill-line"
-            >
-              <span>{{ line.label }}</span>
-              <strong>{{ formatFen(line.amountFen) }}</strong>
+            <div class="order-detail-page__bill-lines">
+              <div
+                v-for="line in detail.bill?.lines ?? []"
+                :key="line.id"
+                data-testid="order-detail.bill-line"
+              >
+                <span>{{ line.label }}</span>
+                <strong>{{ formatFen(line.amountFen) }}</strong>
+              </div>
             </div>
-          </div>
 
-          <p class="order-detail-page__status" data-testid="order-detail.payment-status">
-            支付状态：{{ paymentStatusLabel }}
-          </p>
+            <p
+              class="order-detail-page__status"
+              data-testid="order-detail.payment-status"
+            >
+              支付状态：{{ paymentStatusLabel }}
+            </p>
 
-          <ActionLink
-            v-if="detail.bill"
-            :to="{ path: `/bills/${detail.bill.id}` }"
-            size="lg"
-            data-testid="order-detail.bill-detail-link"
-          >
-            查看账单并支付
-          </ActionLink>
+            <PuButton
+              v-if="detail.bill"
+              :action="{ to: { path: `/bills/${detail.bill.id}` } }"
+              shape="rect"
+              tone="primary"
+              variant="solid"
+              size="lg"
+              data-testid="order-detail.bill-detail-link"
+            >
+              查看账单并支付
+            </PuButton>
           </PuCard>
 
           <PuCard as="section" gap="md">
-          <div class="order-detail-page__section-heading">
-            <p class="order-detail-page__eyebrow">Cancellation</p>
-            <h2>取消政策</h2>
-          </div>
+            <div class="order-detail-page__section-heading">
+              <p class="order-detail-page__eyebrow">Cancellation</p>
+              <h2>取消政策</h2>
+            </div>
 
-          <div
-            class="order-detail-page__policy"
-            data-testid="order-detail.cancellation-policy"
-          >
-            <p
-              v-for="summary in cancellationPolicySummary"
-              :key="summary"
+            <div
+              class="order-detail-page__policy"
+              data-testid="order-detail.cancellation-policy"
             >
-              {{ summary }}
-            </p>
-          </div>
+              <p v-for="summary in cancellationPolicySummary" :key="summary">
+                {{ summary }}
+              </p>
+            </div>
 
-          <Button
-            v-if="detail.cancellation.canRequest"
-            tone="danger"
-            :loading="cancelMutation.isPending.value"
-            data-testid="order-detail.cancel-rental"
-            @click="cancelRentalOrder"
-          >
-            取消订单
-          </Button>
-
-          <PuInlineNotice
-            v-if="isCancellationPending"
-            tone="info"
-            title="取消处理中"
-            message="取消请求已提交，等待履约方处理。"
-            data-testid="order-detail.rental.cancellation-pending"
-          />
-
-          <PuInlineNotice
-            v-if="detail.order.status === 'CANCELLED'"
-            tone="success"
-            title="订单已取消"
-            :message="cancellationResultMessage"
-            data-testid="order-detail.rental.cancelled"
-          />
+            <Button
+              v-if="detail.cancellation.canRequest"
+              tone="danger"
+              :loading="cancelMutation.isPending.value"
+              data-testid="order-detail.cancel-rental"
+              @click="cancelRentalOrder"
+            >
+              取消订单
+            </Button>
+
+            <PuInlineNotice
+              v-if="isCancellationPending"
+              tone="info"
+              title="取消处理中"
+              message="取消请求已提交，等待履约方处理。"
+              data-testid="order-detail.rental.cancellation-pending"
+            />
+
+            <PuInlineNotice
+              v-if="detail.order.status === 'CANCELLED'"
+              tone="success"
+              title="订单已取消"
+              :message="cancellationResultMessage"
+              data-testid="order-detail.rental.cancelled"
+            />
           </PuCard>
 
           <PuCard as="section" gap="md">
-          <div class="order-detail-page__section-heading">
-            <p class="order-detail-page__eyebrow">Fulfillment</p>
-            <h2>场地预订</h2>
-          </div>
+            <div class="order-detail-page__section-heading">
+              <p class="order-detail-page__eyebrow">Fulfillment</p>
+              <h2>场地预订</h2>
+            </div>
 
-          <p class="order-detail-page__status" data-testid="order-detail.fulfillment-status">
-            {{ fulfillmentStatusLabel }}
-          </p>
-
-          <Button
-            v-if="canConfirmRentalBooking"
-            size="lg"
-            tone="secondary"
-            :loading="confirmationMutation.isPending.value"
-            data-testid="order-detail.mock-rental-confirm"
-            @click="simulateBookingConfirmation"
-          >
-            模拟确认预订
-          </Button>
-
-          <PuInlineNotice
-            v-if="detail.fulfillment?.bookingStatus === 'BOOKING_CONFIRMED'"
-            tone="success"
-            title="预约成功"
-            message="场地履约已经进入已确认状态。"
-            data-testid="order-detail.rental.booking-confirmed"
-          />
+            <p
+              class="order-detail-page__status"
+              data-testid="order-detail.fulfillment-status"
+            >
+              {{ fulfillmentStatusLabel }}
+            </p>
+
+            <Button
+              v-if="canConfirmRentalBooking"
+              size="lg"
+              tone="secondary"
+              :loading="confirmationMutation.isPending.value"
+              data-testid="order-detail.mock-rental-confirm"
+              @click="simulateBookingConfirmation"
+            >
+              模拟确认预订
+            </Button>
+
+            <PuInlineNotice
+              v-if="detail.fulfillment?.bookingStatus === 'BOOKING_CONFIRMED'"
+              tone="success"
+              title="预约成功"
+              message="场地履约已经进入已确认状态。"
+              data-testid="order-detail.rental.booking-confirmed"
+            />
           </PuCard>
         </template>
       </template>
@@ -256,10 +287,14 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted } from "vue";
 import { useRoute } from "vue-router";
-import { PuCard, PuInlineNotice, PuPageScaffold } from "@partner-up-dev/design-web";
+import {
+  PuButton,
+  PuCard,
+  PuInlineNotice,
+  PuPageScaffold,
+} from "@partner-up-dev/design-web";
 import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
 import Button from "@/shared/ui/actions/Button.vue";
-import ActionLink from "@/shared/ui/actions/ActionLink.vue";
 import {
   useCancelRentalOrder,
   useCommerceOrderDetail,
@@ -416,7 +451,9 @@ const rideVehicleLabel = computed(() => {
   const vehicle =
     rideHailingDetail.value?.vehicle ?? rideHailingDetail.value?.live?.vehicle;
   if (!vehicle) return "";
-  return [vehicle.plate, vehicle.color, vehicle.brand].filter(Boolean).join(" ");
+  return [vehicle.plate, vehicle.color, vehicle.brand]
+    .filter(Boolean)
+    .join(" ");
 });
 
 const orderErrorMessage = computed(() =>
@@ -457,7 +494,8 @@ let ridePollingTimer: number | undefined;
 
 onMounted(() => {
   ridePollingTimer = window.setInterval(() => {
-    if (detail.value?.order.family !== "RIDE_HAILING" || detail.value.bill) return;
+    if (detail.value?.order.family !== "RIDE_HAILING" || detail.value.bill)
+      return;
     void orderQuery.refetch();
   }, 1500);
 });
diff --git a/apps/frontend/src/pages/ContactSupportPage.vue b/apps/frontend/src/pages/ContactSupportPage.vue
index 3df0087a7..3755947a0 100644
--- a/apps/frontend/src/pages/ContactSupportPage.vue
+++ b/apps/frontend/src/pages/ContactSupportPage.vue
@@ -37,18 +37,22 @@
           <p>{{ t("contactSupportPage.betaGroupDescription") }}</p>
         </div>
 
-        <ActionLink
+        <PuButton
           class="contact-action contact-action--beta-group"
-          :to="{ name: 'about', hash: '#beta-groups' }"
-          appearance="pill"
+          :action="{ to: { name: 'about', hash: '#beta-groups' } }"
+          shape="pill"
+          tone="primary"
           variant="outline"
         >
           {{ t("contactSupportPage.betaGroupAction") }}
-        </ActionLink>
+        </PuButton>
       </div>
     </section>
 
-    <nav class="support-entry-links" :aria-label="t('aboutPage.footerNavLabel')">
+    <nav
+      class="support-entry-links"
+      :aria-label="t('aboutPage.footerNavLabel')"
+    >
       <RouterLink class="support-entry-link" :to="{ name: 'contact-author' }">
         {{ t("contactSupportPage.authorEntry") }}
       </RouterLink>
@@ -76,11 +80,13 @@ import { useI18n } from "vue-i18n";
 import SupportContactAction from "@/domains/support/ui/sections/SupportContactAction.vue";
 import SupportContactQrModal from "@/domains/support/ui/sections/SupportContactQrModal.vue";
 import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
-import ActionLink from "@/shared/ui/actions/ActionLink.vue";
 import { isWeChatBrowser } from "@/shared/browser/isWeChatBrowser";
 import { useWeChatMiniProgramWebView } from "@/shared/wechat/useWeChatMiniProgramWebView";
-import { PUBLIC_CONFIG_KEYS, usePublicConfig } from "@/shared/config/queries/usePublicConfig";
-import { PuChip, PuPageScaffold } from "@partner-up-dev/design-web";
+import {
+  PUBLIC_CONFIG_KEYS,
+  usePublicConfig,
+} from "@/shared/config/queries/usePublicConfig";
+import { PuButton, PuChip, PuPageScaffold } from "@partner-up-dev/design-web";
 
 const DEFAULT_SUPPORT_LINK_WECHAT_IN =
   "https://work.weixin.qq.com/nl/act/p/3f8820e724cb44c5";
@@ -152,7 +158,6 @@ const supportLink = computed(() =>
 );
 
 const usesMiniProgramQrEntry = computed(() => isMiniProgramWebView.value);
-
 </script>
 
 <style lang="scss" scoped>
diff --git a/apps/frontend/src/pages/EventPlazaPage.vue b/apps/frontend/src/pages/EventPlazaPage.vue
index 53e47088f..7bf87b6ac 100644
--- a/apps/frontend/src/pages/EventPlazaPage.vue
+++ b/apps/frontend/src/pages/EventPlazaPage.vue
@@ -1,110 +1,110 @@
-<template>
+<template>
   <PuPageScaffold class="event-plaza-page">
-    <PageHeader
-      :title="t('eventPlaza.title')"
-      :subtitle="t('eventPlaza.subtitle')"
-    >
-      <template #top-actions>
-        <ActionLink
-          :to="{ name: 'event-pr-search' }"
-          class="event-plaza-page__search-link"
-          appearance="pill"
+    <PageHeader
+      :title="t('eventPlaza.title')"
+      :subtitle="t('eventPlaza.subtitle')"
+    >
+      <template #top-actions>
+        <PuButton
+          :action="{ to: { name: 'event-pr-search' } }"
+          class="event-plaza-page__search-link"
+          shape="pill"
+          tone="primary"
           variant="outline"
-          size="sm"
-        >
-          {{ t("eventPlaza.searchAction") }}
-        </ActionLink>
-      </template>
-    </PageHeader>
-
-    <div v-if="isLoading" class="loading-state">
-      {{ t("common.loading") }}
-    </div>
-
-    <div v-else-if="isError" class="error-state">
-      {{ t("eventPlaza.loadFailed") }}
-    </div>
-
-    <div v-else-if="randomizedEvents.length > 0" class="event-grid">
-      <EventCard
-        v-for="event in randomizedEvents"
-        :key="event.id"
-        :event="event"
-      />
-    </div>
-
-    <div v-else class="empty-state">
-      {{ t("eventPlaza.noEvents") }}
-    </div>
+          size="sm"
+        >
+          {{ t("eventPlaza.searchAction") }}
+        </PuButton>
+      </template>
+    </PageHeader>
+
+    <div v-if="isLoading" class="loading-state">
+      {{ t("common.loading") }}
+    </div>
+
+    <div v-else-if="isError" class="error-state">
+      {{ t("eventPlaza.loadFailed") }}
+    </div>
+
+    <div v-else-if="randomizedEvents.length > 0" class="event-grid">
+      <EventCard
+        v-for="event in randomizedEvents"
+        :key="event.id"
+        :event="event"
+      />
+    </div>
+
+    <div v-else class="empty-state">
+      {{ t("eventPlaza.noEvents") }}
+    </div>
   </PuPageScaffold>
-</template>
-
-<script setup lang="ts">
-import { ref, watch } from "vue";
-import { useI18n } from "vue-i18n";
-import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
-import EventCard from "@/domains/event/ui/primitives/EventCard.vue";
-import ActionLink from "@/shared/ui/actions/ActionLink.vue";
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
+import EventCard from "@/domains/event/ui/primitives/EventCard.vue";
 import { useAnchorEvents } from "@/domains/event/queries/useAnchorEvents";
 import type { AnchorEventListResponse } from "@/domains/event/model/types";
-import { PuPageScaffold } from "@partner-up-dev/design-web";
-
-const { t } = useI18n();
-const { data: events, isLoading, isError } = useAnchorEvents();
-
-const shuffleEvents = (
-  eventList: AnchorEventListResponse,
-): AnchorEventListResponse => {
-  const shuffledEvents = [...eventList];
-  for (let index = shuffledEvents.length - 1; index > 0; index -= 1) {
-    const randomIndex = Math.floor(Math.random() * (index + 1));
-    [shuffledEvents[index], shuffledEvents[randomIndex]] = [
-      shuffledEvents[randomIndex],
-      shuffledEvents[index],
-    ];
-  }
-  return shuffledEvents;
-};
-
-const randomizedEvents = ref<AnchorEventListResponse>([]);
-
-watch(
-  events,
-  (nextEvents) => {
-    randomizedEvents.value = shuffleEvents(nextEvents ?? []);
-  },
-  { immediate: true },
-);
-</script>
-
-<style lang="scss" scoped>
-.page-title {
-  font-size: 1.5rem;
-  font-weight: 700;
-  margin-bottom: 0.25rem;
-}
-
-.page-subtitle {
-  color: var(--sys-color-on-surface-variant);
-  font-size: 0.875rem;
-  margin-bottom: 1.5rem;
-}
-
-.event-grid {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.event-plaza-page__search-link {
-  white-space: nowrap;
-}
-
-.loading-state,
-.error-state,
-.empty-state {
-  text-align: center;
-  padding: 3rem 0;
-  color: var(--sys-color-on-surface-variant);
-}
-</style>
+import { PuButton, PuPageScaffold } from "@partner-up-dev/design-web";
+
+const { t } = useI18n();
+const { data: events, isLoading, isError } = useAnchorEvents();
+
+const shuffleEvents = (
+  eventList: AnchorEventListResponse,
+): AnchorEventListResponse => {
+  const shuffledEvents = [...eventList];
+  for (let index = shuffledEvents.length - 1; index > 0; index -= 1) {
+    const randomIndex = Math.floor(Math.random() * (index + 1));
+    [shuffledEvents[index], shuffledEvents[randomIndex]] = [
+      shuffledEvents[randomIndex],
+      shuffledEvents[index],
+    ];
+  }
+  return shuffledEvents;
+};
+
+const randomizedEvents = ref<AnchorEventListResponse>([]);
+
+watch(
+  events,
+  (nextEvents) => {
+    randomizedEvents.value = shuffleEvents(nextEvents ?? []);
+  },
+  { immediate: true },
+);
+</script>
+
+<style lang="scss" scoped>
+.page-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin-bottom: 0.25rem;
+}
+
+.page-subtitle {
+  color: var(--sys-color-on-surface-variant);
+  font-size: 0.875rem;
+  margin-bottom: 1.5rem;
+}
+
+.event-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.event-plaza-page__search-link {
+  white-space: nowrap;
+}
+
+.loading-state,
+.error-state,
+.empty-state {
+  text-align: center;
+  padding: 3rem 0;
+  color: var(--sys-color-on-surface-variant);
+}
+</style>
diff --git a/apps/frontend/src/pages/OrderingFromPlacementPage.vue b/apps/frontend/src/pages/OrderingFromPlacementPage.vue
index 4754af65b..f516a13c3 100644
--- a/apps/frontend/src/pages/OrderingFromPlacementPage.vue
+++ b/apps/frontend/src/pages/OrderingFromPlacementPage.vue
@@ -5,15 +5,16 @@
     :data-testid="orderingPageTestId"
   >
     <template #actions>
-      <ActionLink
-        :to="{ name: 'contact-support' }"
-        appearance="pill"
+      <PuButton
+        :action="{ to: { name: 'contact-support' } }"
+        shape="pill"
+        tone="primary"
         variant="outline"
         size="sm"
         data-testid="ordering.contact-support.open"
       >
         {{ t("ordering.contactSupportAction") }}
-      </ActionLink>
+      </PuButton>
     </template>
 
     <div class="ordering-page__body">
@@ -96,13 +97,12 @@
 import { computed, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
-import ActionLink from "@/shared/ui/actions/ActionLink.vue";
 import OrderingPageShell from "@/domains/commerce/ui/ordering/OrderingPageShell.vue";
 import OrderingFooterActionBar from "@/domains/commerce/ui/ordering/OrderingFooterActionBar.vue";
 import OrderingFloatingNoticeLayer from "@/domains/commerce/ui/ordering/OrderingFloatingNoticeLayer.vue";
 import OrderingPriceDetailDrawer from "@/domains/commerce/ui/ordering/OrderingPriceDetailDrawer.vue";
 import RentalOrderingForm from "@/domains/commerce/ui/ordering/RentalOrderingForm.vue";
-import { PuInlineNotice } from "@partner-up-dev/design-web";
+import { PuButton, PuInlineNotice } from "@partner-up-dev/design-web";
 import RideHailingOrderingPanel, {
   type RideVehicleOption,
 } from "@/domains/commerce/ui/ordering/RideHailingOrderingPanel.vue";
@@ -258,7 +258,9 @@ const floatingNoticeMessage = computed(() => availabilityMessage.value);
 const floatingNoticeTone = computed<"warning" | "error">(() => "warning");
 
 const backFallbackTo = computed(() =>
-  orderingEntry.value?.prId ? { path: `/pr/${orderingEntry.value.prId}` } : { path: "/" },
+  orderingEntry.value?.prId
+    ? { path: `/pr/${orderingEntry.value.prId}` }
+    : { path: "/" },
 );
 
 const handleRentalOutputUpdate = (next: OrderingContentOutput | null): void => {
diff --git a/apps/frontend/src/pages/PaymentCheckoutPage.vue b/apps/frontend/src/pages/PaymentCheckoutPage.vue
index b38cf724a..647efc938 100644
--- a/apps/frontend/src/pages/PaymentCheckoutPage.vue
+++ b/apps/frontend/src/pages/PaymentCheckoutPage.vue
@@ -1,5 +1,9 @@
 <template>
-  <PuPageScaffold viewport="screen" class="payment-checkout-page" data-testid="payment-checkout.page">
+  <PuPageScaffold
+    viewport="screen"
+    class="payment-checkout-page"
+    data-testid="payment-checkout.page"
+  >
     <template #header>
       <PageHeader
         title="支付"
@@ -44,7 +48,10 @@
             </strong>
           </div>
 
-          <p class="payment-checkout-page__status" data-testid="payment-checkout.status">
+          <p
+            class="payment-checkout-page__status"
+            data-testid="payment-checkout.status"
+          >
             支付状态：{{ paymentStatusLabel }}
           </p>
         </PuCard>
@@ -56,7 +63,10 @@
           </div>
 
           <PuInlineNotice
-            v-if="!checkout.eligibility.payable && activePayment?.status !== 'SUCCEEDED'"
+            v-if="
+              !checkout.eligibility.payable &&
+              activePayment?.status !== 'SUCCEEDED'
+            "
             tone="warning"
             title="当前不可支付"
             :message="checkout.eligibility.disabledReason ?? '支付条件不满足。'"
@@ -72,9 +82,14 @@
             发起微信支付
           </Button>
 
-          <template v-if="activePayment && activePayment.status !== 'SUCCEEDED'">
+          <template
+            v-if="activePayment && activePayment.status !== 'SUCCEEDED'"
+          >
             <Button
-              v-if="activePaymentClientActionType === 'PAYMENT_REDIRECT' && redirectUrl"
+              v-if="
+                activePaymentClientActionType === 'PAYMENT_REDIRECT' &&
+                redirectUrl
+              "
               tone="secondary"
               data-testid="payment-checkout.redirect-open"
               @click="openRedirectPayment"
@@ -109,7 +124,9 @@
           />
 
           <PuInlineNotice
-            v-if="createChargeMutation.isError.value || syncMutation.isError.value"
+            v-if="
+              createChargeMutation.isError.value || syncMutation.isError.value
+            "
             tone="error"
             title="支付处理失败"
             :message="mutationErrorMessage"
@@ -125,13 +142,15 @@
         </PuCard>
 
         <PuCard as="section" gap="sm" padding="sm" variant="outline">
-          <ActionLink
-            :to="{ path: `/bills/${checkout.bill.id}` }"
+          <PuButton
+            :action="{ to: { path: `/bills/${checkout.bill.id}` } }"
+            shape="rect"
+            tone="primary"
             variant="outline"
             data-testid="payment-checkout.bill-link"
           >
             返回账单
-          </ActionLink>
+          </PuButton>
         </PuCard>
       </template>
     </div>
@@ -141,10 +160,14 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import { useRoute } from "vue-router";
-import { PuCard, PuInlineNotice, PuPageScaffold } from "@partner-up-dev/design-web";
+import {
+  PuButton,
+  PuCard,
+  PuInlineNotice,
+  PuPageScaffold,
+} from "@partner-up-dev/design-web";
 import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
 import Button from "@/shared/ui/actions/Button.vue";
-import ActionLink from "@/shared/ui/actions/ActionLink.vue";
 import {
   useCreateChargeForBillLine,
   usePaymentCheckout,
@@ -216,7 +239,10 @@ const activePayment = computed(
 const isRecord = (value: unknown): value is Record<string, unknown> =>
   typeof value === "object" && value !== null && !Array.isArray(value);
 
-const readString = (record: Record<string, unknown>, key: string): string | null => {
+const readString = (
+  record: Record<string, unknown>,
+  key: string,
+): string | null => {
   const value = record[key];
   return typeof value === "string" && value.length > 0 ? value : null;
 };
diff --git a/apps/frontend/src/shared/ui/AGENTS.md b/apps/frontend/src/shared/ui/AGENTS.md
index 09cefdbe2..26e810dc5 100644
--- a/apps/frontend/src/shared/ui/AGENTS.md
+++ b/apps/frontend/src/shared/ui/AGENTS.md
@@ -14,13 +14,13 @@ Do not move a component into `shared/ui` just because two pages happen to look s
 Actions:
 
 - `actions/Button.vue`: shared button primitive. Prefer it over page-local button classes; use `appearance="pill"` for compact CTA clusters and `appearance="rect"` for dialogs or block actions. Keep `tone` choices narrow.
-- `actions/ActionLink.vue`: shared action-looking link primitive for RouterLink and external anchor CTAs.
+- `PuButton` from `@partner-up-dev/design-web`: default package action primitive for command buttons, route CTAs, href CTAs, icon actions, and action-looking links. Use the package `action` prop directly at usage sites instead of adding a local action-link wrapper.
 - `actions/FeedbackButton.vue`: shared transient feedback action button for short-lived pending/success/error feedback states.
 
 Containers and layout:
 
 - `PuCard` from `@partner-up-dev/design-web`: standard card shell for reusable grouped content, outline surfaces, and collapsible sections. Use `variant` for treatment and `keep-content-mounted` only when collapsed content owns local state that must survive collapse.
-- `containers/ChoiceCard.vue`: selectable card primitive for button-like choices and RouterLink navigation choices.
+- `PuCard` from `@partner-up-dev/design-web`: use `selectable` for button-like choices and `action` for route or href card targets instead of adding a local choice-card wrapper.
 - `PuPageScaffold` from `@partner-up-dev/design-web`: page scaffold for route pages, centered flows, full-screen flows, desktop aside pages, and reveal-footer layouts. Prefer direct package usage instead of recreating safe-area page chrome locally.
 - `sections/PageFooter.vue`: product page footer chrome with `variant="minimal"` for compact support/navigation footers and `variant="brand"` for landing-style brand/legal footers. Prefer extending this variant API over creating another page footer component.
 
@@ -47,7 +47,7 @@ Overlay:
 ## Reuse Rules
 
 - Prefer composing these primitives in pages and domain sections before creating new page-local shells.
-- Keep action treatment styles inside the lowest action primitives (`Button` and `ActionLink`); higher-level shared components, domain components, and pages should compose primitives instead of re-declaring those styles.
+- Keep app-specific action treatment styles inside the lowest remaining app-owned action primitives (`Button` and `FeedbackButton`); otherwise compose package `PuButton` / `PuCard` directly instead of re-declaring action recipes.
 - If a component needs backend-derived policy logic, workflow branching, or domain vocabulary, keep it in the owning domain and compose shared primitives inside it.
 - If a primitive variant is needed in a third distinct place, extend the shared primitive API instead of cloning the component locally.
 - When extending a primitive API, update this file in the same change so the new contract stays discoverable.
diff --git a/apps/frontend/src/shared/ui/actions/ActionLink.vue b/apps/frontend/src/shared/ui/actions/ActionLink.vue
deleted file mode 100644
index f719e2fad..000000000
--- a/apps/frontend/src/shared/ui/actions/ActionLink.vue
+++ /dev/null
@@ -1,369 +0,0 @@
-<template>
-  <component
-    :is="rootComponent"
-    class="ui-action-link"
-    :class="[
-      `ui-action-link--appearance-${props.appearance}`,
-      `ui-action-link--tone-${props.tone}`,
-      `ui-action-link--size-${props.size}`,
-      {
-        'ui-action-link--block': isBlock,
-        'ui-action-link--full-width': isBlock,
-        'is-disabled': props.disabled,
-      },
-    ]"
-    v-bind="rootAttrs"
-    :aria-disabled="props.disabled ? 'true' : undefined"
-    :tabindex="props.disabled ? -1 : undefined"
-    @click="handleClick"
-  >
-    <span
-      v-if="$slots.leading"
-      class="ui-action-link__leading"
-      aria-hidden="true"
-    >
-      <slot name="leading" />
-    </span>
-    <span class="ui-action-link__label">
-      <slot />
-    </span>
-    <span
-      v-if="$slots.trailing"
-      class="ui-action-link__trailing"
-      aria-hidden="true"
-    >
-      <slot name="trailing" />
-    </span>
-  </component>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import { RouterLink, type RouteLocationRaw } from "vue-router";
-
-type ActionLinkAppearance = "rect" | "pill";
-type ActionLinkTone =
-  | "primary"
-  | "primary-outline"
-  | "secondary"
-  | "outline"
-  | "surface"
-  | "tertiary"
-  | "dashed"
-  | "danger"
-  | "ghost";
-type ActionLinkSize = "sm" | "md" | "lg";
-
-const props = withDefaults(
-  defineProps<{
-    to?: RouteLocationRaw;
-    href?: string;
-    target?: string;
-    rel?: string;
-    external?: boolean;
-    appearance?: ActionLinkAppearance;
-    tone?: ActionLinkTone;
-    size?: ActionLinkSize;
-    disabled?: boolean;
-    block?: boolean;
-    fullWidth?: boolean;
-  }>(),
-  {
-    to: undefined,
-    href: undefined,
-    target: undefined,
-    rel: undefined,
-    external: false,
-    appearance: "rect",
-    tone: "primary",
-    size: "md",
-    disabled: false,
-    block: false,
-    fullWidth: false,
-  },
-);
-
-const emit = defineEmits<{
-  click: [event: MouseEvent];
-}>();
-
-const rootComponent = computed(() => (props.to ? RouterLink : "a"));
-const resolvedTarget = computed(() =>
-  props.target ?? (props.external ? "_blank" : undefined),
-);
-const resolvedRel = computed(() =>
-  props.rel ??
-  (resolvedTarget.value === "_blank" ? "noopener noreferrer" : undefined),
-);
-
-const rootAttrs = computed(() => {
-  if (props.to) {
-    return {
-      to: props.to,
-    };
-  }
-
-  return {
-    href: props.href,
-    target: resolvedTarget.value,
-    rel: resolvedRel.value,
-  };
-});
-
-const isBlock = computed(() => props.block || props.fullWidth);
-
-const handleClick = (event: MouseEvent) => {
-  if (props.disabled) {
-    event.preventDefault();
-    event.stopPropagation();
-    return;
-  }
-
-  emit("click", event);
-};
-</script>
-
-<style lang="scss" scoped>
-.ui-action-link {
-  min-width: 0;
-  border: 1px solid transparent;
-  text-decoration: none;
-  user-select: none;
-  -webkit-user-select: none;
-  cursor: pointer;
-  transition:
-    background-color 180ms ease,
-    border-color 180ms ease,
-    color 180ms ease,
-    box-shadow 180ms ease,
-    transform 180ms ease,
-    opacity 180ms ease,
-    filter 180ms ease;
-
-  &:focus-visible {
-    outline: 2px solid var(--sys-color-primary);
-    outline-offset: 2px;
-  }
-}
-
-.ui-action-link.is-disabled {
-  opacity: var(--sys-opacity-disabled);
-  cursor: not-allowed;
-  pointer-events: none;
-  box-shadow: none;
-}
-
-.ui-action-link--block,
-.ui-action-link--full-width {
-  width: 100%;
-}
-
-.ui-action-link--appearance-rect {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--sys-spacing-xsmall);
-  border-radius: var(--sys-radius-small);
-}
-
-.ui-action-link--appearance-pill {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--sys-spacing-xsmall);
-  border-radius: 999px;
-}
-
-.ui-action-link--appearance-rect.ui-action-link--tone-primary {
-  border: none;
-  background: var(--sys-color-primary);
-  color: var(--sys-color-on-primary);
-}
-
-.ui-action-link--appearance-rect.ui-action-link--tone-secondary {
-  border-color: var(--sys-color-secondary);
-  background: transparent;
-  color: var(--sys-color-secondary);
-}
-
-.ui-action-link--appearance-rect.ui-action-link--tone-primary-outline {
-  border-color: var(--sys-color-primary);
-  background: transparent;
-  color: var(--sys-color-primary);
-}
-
-.ui-action-link--appearance-rect.ui-action-link--tone-outline {
-  border-color: var(--sys-color-outline);
-  background: transparent;
-  color: var(--sys-color-on-surface);
-}
-
-.ui-action-link--appearance-rect.ui-action-link--tone-surface {
-  border-color: var(--sys-color-outline);
-  background: var(--sys-color-surface-container);
-  color: var(--sys-color-on-surface);
-}
-
-.ui-action-link--appearance-rect.ui-action-link--tone-danger {
-  border-color: var(--sys-color-error);
-  background: transparent;
-  color: var(--sys-color-error);
-}
-
-.ui-action-link--appearance-rect.ui-action-link--tone-tertiary {
-  border: none;
-  background: var(--sys-color-tertiary);
-  color: var(--sys-color-on-tertiary);
-}
-
-.ui-action-link--appearance-rect.ui-action-link--tone-dashed {
-  border-style: dashed;
-  border-color: var(--sys-color-outline);
-  background: transparent;
-  color: var(--sys-color-on-surface);
-}
-
-.ui-action-link--appearance-rect.ui-action-link--tone-ghost {
-  background: transparent;
-  color: var(--sys-color-on-surface);
-}
-
-.ui-action-link--appearance-pill.ui-action-link--tone-primary {
-  background: var(--sys-color-primary);
-  color: var(--sys-color-on-primary);
-}
-
-.ui-action-link--appearance-pill.ui-action-link--tone-secondary {
-  background: var(--sys-color-secondary);
-  color: var(--sys-color-on-secondary);
-}
-
-.ui-action-link--appearance-pill.ui-action-link--tone-primary-outline {
-  border-color: var(--sys-color-primary);
-  background: transparent;
-  color: var(--sys-color-primary);
-}
-
-.ui-action-link--appearance-pill.ui-action-link--tone-outline {
-  border-color: var(--sys-color-outline);
-  background: transparent;
-  color: var(--sys-color-on-surface);
-}
-
-.ui-action-link--appearance-pill.ui-action-link--tone-surface {
-  background: var(--sys-color-surface-container-lowest);
-  border-color: var(--sys-color-outline-variant);
-  color: var(--sys-color-on-surface);
-}
-
-.ui-action-link--appearance-pill.ui-action-link--tone-danger {
-  background: transparent;
-  border-color: var(--sys-color-error);
-  color: var(--sys-color-error);
-}
-
-.ui-action-link--appearance-pill.ui-action-link--tone-tertiary {
-  background: var(--sys-color-tertiary);
-  color: var(--sys-color-on-tertiary);
-}
-
-.ui-action-link--appearance-pill.ui-action-link--tone-dashed {
-  border-style: dashed;
-  border-color: var(--sys-color-outline);
-  background: transparent;
-  color: var(--sys-color-on-surface);
-}
-
-.ui-action-link--appearance-pill.ui-action-link--tone-ghost {
-  background: transparent;
-  color: var(--sys-color-on-surface);
-}
-
-.ui-action-link--size-sm {
-  @include mx.pu-font(control);
-}
-
-.ui-action-link--size-md {
-  @include mx.pu-font(control);
-}
-
-.ui-action-link--size-lg {
-  @include mx.pu-font(section);
-}
-
-.ui-action-link--appearance-rect.ui-action-link--size-sm {
-  min-height: var(--sys-spacing-large);
-  padding: var(--sys-spacing-xsmall) var(--sys-spacing-small);
-}
-
-.ui-action-link--appearance-rect.ui-action-link--size-md {
-  min-height: calc(var(--sys-spacing-large) + var(--sys-spacing-small) + var(--sys-spacing-xsmall));
-  padding: var(--sys-spacing-small) var(--sys-spacing-medium);
-}
-
-.ui-action-link--appearance-rect.ui-action-link--size-lg {
-  min-height: calc(calc(var(--sys-spacing-large) + var(--sys-spacing-small) + var(--sys-spacing-xsmall)) + var(--sys-spacing-small));
-  padding: var(--sys-spacing-medium) var(--sys-spacing-large);
-}
-
-.ui-action-link--appearance-pill.ui-action-link--size-sm {
-  min-height: var(--sys-spacing-large);
-  padding: var(--sys-spacing-xsmall) var(--sys-spacing-small);
-}
-
-.ui-action-link--appearance-pill.ui-action-link--size-md {
-  min-height: calc(var(--sys-spacing-large) + var(--sys-spacing-small) + var(--sys-spacing-xsmall));
-  padding: var(--sys-spacing-small) var(--sys-spacing-medium);
-}
-
-.ui-action-link--appearance-pill.ui-action-link--size-lg {
-  min-height: calc(calc(var(--sys-spacing-large) + var(--sys-spacing-small) + var(--sys-spacing-xsmall)) + var(--sys-spacing-small));
-  padding: var(--sys-spacing-small) var(--sys-spacing-large);
-}
-
-.ui-action-link--appearance-pill.ui-action-link--tone-surface:hover,
-.ui-action-link--appearance-pill.ui-action-link--tone-danger:hover,
-.ui-action-link--appearance-pill.ui-action-link--tone-tertiary:hover,
-.ui-action-link--appearance-pill.ui-action-link--tone-dashed:hover,
-.ui-action-link--appearance-pill.ui-action-link--tone-ghost:hover,
-.ui-action-link--appearance-pill.ui-action-link--tone-primary-outline:hover,
-.ui-action-link--appearance-rect.ui-action-link--tone-primary:hover,
-.ui-action-link--appearance-rect.ui-action-link--tone-primary-outline:hover,
-.ui-action-link--appearance-rect.ui-action-link--tone-secondary:hover,
-.ui-action-link--appearance-rect.ui-action-link--tone-outline:hover,
-.ui-action-link--appearance-rect.ui-action-link--tone-surface:hover,
-.ui-action-link--appearance-rect.ui-action-link--tone-tertiary:hover,
-.ui-action-link--appearance-rect.ui-action-link--tone-dashed:hover,
-.ui-action-link--appearance-rect.ui-action-link--tone-danger:hover {
-  filter: brightness(0.98);
-}
-
-.ui-action-link:active:not(.is-disabled) {
-  transform: scale(0.99);
-}
-
-.ui-action-link__label {
-  min-width: 0;
-}
-
-.ui-action-link__leading,
-.ui-action-link__trailing {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.ui-action-link__leading :deep([class^="i-"]),
-.ui-action-link__leading :deep([class*=" i-"]),
-.ui-action-link__trailing :deep([class^="i-"]),
-.ui-action-link__trailing :deep([class*=" i-"]) {
-  @include mx.pu-icon(small);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .ui-action-link {
-    transition: none !important;
-  }
-}
-</style>
diff --git a/apps/frontend/src/shared/ui/containers/ChoiceCard.vue b/apps/frontend/src/shared/ui/containers/ChoiceCard.vue
deleted file mode 100644
index db7938344..000000000
--- a/apps/frontend/src/shared/ui/containers/ChoiceCard.vue
+++ /dev/null
@@ -1,122 +0,0 @@
-<template>
-  <component
-    :is="rootComponent"
-    class="choice-card"
-    :class="[
-      `choice-card--tone-${props.tone}`,
-      {
-        'is-active': props.active,
-        'is-disabled': props.disabled,
-      },
-    ]"
-    v-bind="rootAttrs"
-    @click="handleClick"
-  >
-    <slot />
-  </component>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import { RouterLink, type RouteLocationRaw } from "vue-router";
-
-type ChoiceCardTone = "default" | "low";
-
-const props = withDefaults(
-  defineProps<{
-    to?: RouteLocationRaw | null;
-    type?: "button" | "submit" | "reset";
-    tone?: ChoiceCardTone;
-    active?: boolean;
-    disabled?: boolean;
-  }>(),
-  {
-    to: null,
-    type: "button",
-    tone: "default",
-    active: false,
-    disabled: false,
-  },
-);
-
-const emit = defineEmits<{
-  click: [event: MouseEvent];
-}>();
-
-const isLink = computed(() => props.to !== null);
-const rootComponent = computed(() => (isLink.value ? RouterLink : "button"));
-const rootAttrs = computed(() => {
-  if (isLink.value) {
-    return {
-      to: props.to,
-      "aria-disabled": props.disabled ? "true" : undefined,
-      tabindex: props.disabled ? -1 : undefined,
-    };
-  }
-
-  return {
-    type: props.type,
-    disabled: props.disabled,
-  };
-});
-
-const handleClick = (event: MouseEvent) => {
-  if (props.disabled) {
-    event.preventDefault();
-    event.stopPropagation();
-    return;
-  }
-
-  emit("click", event);
-};
-</script>
-
-<style lang="scss" scoped>
-.choice-card {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--sys-spacing-xsmall);
-  width: 100%;
-  min-width: 0;
-  padding: var(--sys-spacing-small) var(--sys-spacing-medium);
-  border: 1px solid var(--sys-color-outline-variant);
-  border-radius: var(--sys-radius-medium);
-  background: var(--sys-color-surface);
-  color: var(--sys-color-on-surface);
-  font: inherit;
-  text-align: left;
-  text-decoration: none;
-  cursor: pointer;
-  transition:
-    background-color 180ms ease,
-    border-color 180ms ease,
-    color 180ms ease;
-
-  &:focus-visible {
-    outline: 2px solid var(--sys-color-primary);
-    outline-offset: 2px;
-  }
-}
-
-.choice-card--tone-low {
-  background: var(--sys-color-surface-container-low);
-}
-
-.choice-card.is-active,
-.choice-card.router-link-active {
-  border-color: var(--sys-color-primary);
-}
-
-.choice-card.is-disabled {
-  opacity: var(--sys-opacity-disabled);
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .choice-card {
-    transition: none !important;
-  }
-}
-</style>
diff --git a/apps/frontend/src/styles/AGENTS.md b/apps/frontend/src/styles/AGENTS.md
index aa702e685..b100cf953 100644
--- a/apps/frontend/src/styles/AGENTS.md
+++ b/apps/frontend/src/styles/AGENTS.md
@@ -28,9 +28,9 @@ Add or keep `dcs` only when the governed output itself needs central ownership a
 Extend a shared primitive only when the treatment is stable across consumers and the HTML/interaction contract belongs with the style. Current examples:
 
 - page scaffold components for safe-area layout
-- `Button`, `ActionLink`, and `FeedbackButton` for action treatments
-- `PuCard` from `@partner-up-dev/design-web` for reusable card shells
-- `ChoiceCard` for reusable selectable card shells
+- `Button` and `FeedbackButton` for app-owned action treatments
+- `PuButton` from `@partner-up-dev/design-web` for package-owned route/href CTAs and action-looking links
+- `PuCard` from `@partner-up-dev/design-web` for reusable card shells and selectable/navigation card roots
 - form primitives for reusable input shells
 
 If a style is domain-specific, page-specific, or only local structure, keep it local with direct `sys` tokens.
diff --git a/tasks/design-web-package-integration/component-migration/00-control-surface.md b/tasks/design-web-package-integration/component-migration/00-control-surface.md
index 40643a5f7..3678ab88f 100644
--- a/tasks/design-web-package-integration/component-migration/00-control-surface.md
+++ b/tasks/design-web-package-integration/component-migration/00-control-surface.md
@@ -16,7 +16,8 @@ design package should not absorb.
 
 - Input route: `Constraint`.
 - Active mode: `Execute`.
-- Implementation status: third overlay slice implemented and verified locally.
+- Implementation status: fourth action-card slice implemented and verified
+  locally.
   Usage sites now consume the relevant package components directly and the
   migrated local facades have been deleted.
 
@@ -126,6 +127,10 @@ design package should not absorb.
   `ConfirmDialog`, `BottomDrawer`, and `useBodyScrollLock`. The old
   `lib/body-scroll-lock.ts` helper was also deleted after overlay call sites no
   longer needed parent-managed scroll locking.
+- Fourth slice completed: `ActionLink` usage sites now directly use `PuButton`
+  with structured `action`; `ChoiceCard` usage sites now directly use `PuCard`
+  with `selectable` for button-like choices or `action` for route cards. Local
+  `ActionLink.vue` and `ChoiceCard.vue` were deleted.
 
 ## First Slice Candidate
 
@@ -168,6 +173,11 @@ diff --check` passed.
   passed; frontend unit tests passed, 26 files / 117 tests; migrated overlay
   and scroll-lock scan returned no usage-site references; package API scan found
   no old `PuDialog` or `PuDrawer` prop vocabulary; `git diff --check` passed.
+- Fourth-slice verification on 2026-06-13: frontend build passed; token lint
+  passed; frontend unit tests passed, 26 files / 117 tests; migrated
+  `ActionLink`/`ChoiceCard` reference scan returned no source references; old
+  `PuButton`/`PuCard` prop vocabulary scan returned no findings; `git diff
+--check` passed.
 - Agent Skill verification on 2026-06-13: `pnpm dlx
 @tanstack/intent@latest list --json` found
   `@partner-up-dev/design-web#design-web` from the installed `0.4.0` package;
diff --git a/tasks/design-web-package-integration/component-migration/10-slice-index.md b/tasks/design-web-package-integration/component-migration/10-slice-index.md
index 5598b5384..9600cba63 100644
--- a/tasks/design-web-package-integration/component-migration/10-slice-index.md
+++ b/tasks/design-web-package-integration/component-migration/10-slice-index.md
@@ -92,9 +92,18 @@ Started after explicit user approval.
 | File                            | Local Component                        | Package Target             | Status   |
 | ------------------------------- | -------------------------------------- | -------------------------- | -------- |
 | `components/button.md`          | `shared/ui/actions/Button.vue`         | `PuButton`                 | Proposed |
-| `components/action-link.md`     | `shared/ui/actions/ActionLink.vue`     | `PuButton` action prop     | Proposed |
+| `components/action-link.md`     | `shared/ui/actions/ActionLink.vue`     | `PuButton` action prop     | Done     |
 | `components/feedback-button.md` | `shared/ui/actions/FeedbackButton.vue` | `PuButton` feedback prop   | Proposed |
-| `components/choice-card.md`     | `shared/ui/containers/ChoiceCard.vue`  | `PuCard` action/selectable | Proposed |
+| `components/choice-card.md`     | `shared/ui/containers/ChoiceCard.vue`  | `PuCard` action/selectable | Done     |
+
+## Selected Fourth Slice Candidate
+
+Started after explicit user direction to handle `ActionLink` and `ChoiceCard`.
+
+| Order | File                        | Scope                                                                                                                                                                                                        | Status |
+| ----- | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------ |
+| 1     | `components/action-link.md` | Replace local `ActionLink` call sites with `PuButton` plus structured `action`; map routes to `{ to }`, anchors to `{ href, external, target, rel }`, and delete the local primitive after call sites clear. | Done   |
+| 2     | `components/choice-card.md` | Replace local `ChoiceCard` call sites with `PuCard`; use `selectable` for button-like choices, `action` for route cards, and delete the local primitive after call sites clear.                              | Done   |
 
 ## Deferred Domain Or Product Chrome
 
diff --git a/tasks/design-web-package-integration/component-migration/90-discussion-log.md b/tasks/design-web-package-integration/component-migration/90-discussion-log.md
index f6493ab3a..3e10de54d 100644
--- a/tasks/design-web-package-integration/component-migration/90-discussion-log.md
+++ b/tasks/design-web-package-integration/component-migration/90-discussion-log.md
@@ -203,3 +203,23 @@ apps/frontend/node_modules/@partner-up-dev/design-web/skills/design-web`.
   files / 117 tests), migrated overlay and scroll-lock reference scan,
   package-prop vocabulary scan for `PuDialog`/`PuDrawer`, and `git diff
 --check`.
+- Third overlay slice was committed as
+  `95b383d1 refactor(frontend): migrate overlay primitives to design package`.
+- Fourth slice started for `ActionLink` and `ChoiceCard`. Package docs and
+  declarations identify `PuButton` with structured `action` as the correct
+  target for action-looking route/href CTAs, and `PuCard` with `action` or
+  `selectable` as the correct target for choice cards.
+- Current `ActionLink` usage includes ineffective `variant="outline"` attrs
+  because the local component has no `variant` prop. The fourth slice should
+  treat those as author intent and map them to real `PuButton` variants instead
+  of preserving the old no-op.
+- Fourth slice completed. `ActionLink.vue` was deleted after all usage sites
+  moved to direct `PuButton :action` composition. `ChoiceCard.vue` was deleted
+  after all usage sites moved to direct `PuCard` composition.
+- `ChoiceCard` usages were split by semantics: button-like rail/status choices
+  use `PuCard selectable`, admin navigation route choices use `PuCard
+:action="{ to: ... }"`, and the time-window preview list uses non-interactive
+  `PuCard`.
+- Verification passed: frontend build, token lint, frontend unit tests (26
+  files / 117 tests), source reference scan, `PuButton`/`PuCard` old-prop
+  vocabulary scan, and `git diff --check`.
diff --git a/tasks/design-web-package-integration/component-migration/components/action-link.md b/tasks/design-web-package-integration/component-migration/components/action-link.md
index d083b8f49..02b82cb66 100644
--- a/tasks/design-web-package-integration/component-migration/components/action-link.md
+++ b/tasks/design-web-package-integration/component-migration/components/action-link.md
@@ -18,16 +18,39 @@
 
 - From: local `RouterLink` or native anchor selection.
 - To: `PuButton` `action` prop with `to` or `href` payload.
-- Compatibility strategy: preserve local API and event behavior while package
-  owns visual/action rendering.
+- Compatibility strategy: no local wrapper. Replace usage sites directly with
+  `PuButton` and delete `ActionLink.vue` after call sites clear.
+
+## Selected Mapping
+
+- Route links: `:action="{ to: routeTarget }"`.
+- External or href links: `:action="{ href, external, target, rel }"`.
+- `appearance="pill"` -> `shape="pill"`; otherwise use `shape="rect"` because
+  package default is not the old action-link geometry.
+- Local action-link tones map to package tone + variant:
+  - `primary` -> `tone="primary" variant="solid"`
+  - `primary-outline` -> `tone="primary" variant="outline"`
+  - `secondary` -> `tone="secondary" variant="solid"`
+  - `outline` -> `tone="neutral" variant="outline"`
+  - `surface` -> `tone="neutral" variant="soft"`
+  - `tertiary` -> `tone="tertiary" variant="solid"`
+  - `dashed` -> `tone="neutral" variant="dashed"`
+  - `danger` -> `tone="danger" variant="outline"`
+  - `ghost` -> `tone="neutral" variant="ghost"`
+- Some current `ActionLink` usage sites pass `variant="outline"`, but the
+  local component does not define a `variant` prop. During direct migration,
+  treat this as author intent and map it to real `PuButton variant="outline"`
+  instead of preserving the ineffective DOM attribute.
 
 ## Risks
 
 - Route actions rely on the consuming app's registered `RouterLink`.
 - Disabled link navigation must remain blocked.
 - External target/rel defaults must remain safe.
+- `PuButton` is still an action control; do not use it for plain inline text
+  links.
 
 ## Verification
 
-- Build, token lint, frontend unit tests.
-- Navigation smoke for affected CTAs.
+- Passed: frontend build, token lint, frontend unit tests, source reference
+  scan, old-prop vocabulary scan, and `git diff --check`.
diff --git a/tasks/design-web-package-integration/component-migration/components/choice-card.md b/tasks/design-web-package-integration/component-migration/components/choice-card.md
index ec3c773ca..af201c91e 100644
--- a/tasks/design-web-package-integration/component-migration/components/choice-card.md
+++ b/tasks/design-web-package-integration/component-migration/components/choice-card.md
@@ -17,16 +17,28 @@
 
 - From: local `button` or `RouterLink` root with active/disabled treatment.
 - To: `PuCard` action/selectable behavior.
-- Compatibility strategy: only use interactive card roots when the card content
-  has no nested interactive controls.
+- Compatibility strategy: no local wrapper. Replace usage sites directly with
+  `PuCard` and delete `ChoiceCard.vue` after call sites clear. Only use
+  interactive card roots when the card content has no nested interactive
+  controls.
+
+## Selected Mapping
+
+- Button-like choice: `<PuCard selectable :active="..." :disabled="..." @click="...">`.
+- Route card: `<PuCard :action="{ to: routeTarget }" :active="..." ...>`.
+- Local `tone="low"` maps to `variant="soft"`; default maps to
+  `variant="outline"`.
+- Preserve page/domain classes and `data-testid` at usage sites.
 
 ## Risks
 
 - Package caveat: interactive cards must not contain nested interactive
   controls.
 - Route action disabled behavior must remain equivalent.
+- Some usage sites may be static previews rather than choices. Those should use
+  non-interactive `PuCard` instead of `selectable`.
 
 ## Verification
 
-- Build, token lint, frontend unit tests.
-- Admin rail/product list navigation smoke where choice cards are used.
+- Passed: frontend build, token lint, frontend unit tests, source reference
+  scan, old-prop vocabulary scan, and `git diff --check`.

From c0ba0968f205a7346b260c5c011115f13be01a2f Mon Sep 17 00:00:00 2001
From: Lanzhijiang <lanzhijiang@foxmail.com>
Date: Sat, 13 Jun 2026 22:09:50 +0800
Subject: [PATCH 06/94] refactor(frontend): migrate action buttons to design
 package

---
 .../ui/json-logic/JsonLogicRuleEditor.vue     |  21 +-
 .../ui/pricing-rules/PricingRulesEditor.vue   |  11 +-
 .../composites/FactEntryEditor.vue            |   6 +-
 .../composites/StringListEditor.vue           |  22 +-
 .../AdminCommerceCancellationPolicyEditor.vue |  21 +-
 .../AdminCommerceProductActionBar.vue         |  16 +-
 .../sections/AdminCommerceSkuEditor.vue       |   8 +-
 .../sections/AdminCommerceSpuEditor.vue       |  35 +-
 .../AnchorEventPendingPreferenceTagList.vue   |  21 +-
 .../AnchorEventPreferenceTagPoolEditor.vue    |  13 +-
 .../components/AnchorEventRoutePoolEditor.vue |  20 +-
 .../sections/AnchorEventBasicSection.vue      |  10 +-
 .../sections/AnchorEventLocationsSection.vue  |  10 +-
 .../sections/AnchorEventOtherSection.vue      |  19 +-
 .../AnchorEventRouteApplicationsSection.vue   |  21 +-
 .../sections/AnchorEventTagsSection.vue       |  20 +-
 .../sections/AnchorEventTimeSection.vue       |  31 +-
 .../ui/navigation/AdminNavigationPanel.vue    |  13 +-
 .../ui/poi/components/PoiSelectorRail.vue     |  12 +-
 .../admin/ui/poi/sections/PoiBasicSection.vue |  78 ++--
 .../ui/poi/sections/PoiReviewSection.vue      |  23 +-
 .../admin/ui/pr/components/PRFilterRail.vue   |  12 +-
 .../admin/ui/pr/views/AdminPRBasicView.vue    |  41 +-
 .../admin/ui/pr/views/AdminPRMessagesView.vue |  51 ++-
 .../domains/commerce/ui/ButtonPlacement.vue   |  12 +-
 .../ui/ordering/OrderingFooterActionBar.vue   |   6 +-
 .../ui/composites/FormModeNoMatchResult.vue   |  20 +-
 .../form-mode/FormModePreferenceControl.vue   |  25 +-
 .../event/ui/primitives/EventPRCreateCard.vue |  11 +-
 .../AnchorEventCardModeSurface.vue            |  28 +-
 .../surfaces/AnchorEventFormModeSurface.vue   |  13 +-
 .../feedback/ui/FeedbackQuestionnaireForm.vue |  17 +-
 .../sections/LandingWeChatAccessSection.vue   |  22 +-
 .../location/ui/LocationPickerPanel.vue       |  17 +-
 .../ui/OfficialAccountFollowNudge.vue         |  22 +-
 .../domains/pr/ui/composites/PRFactsCard.vue  |  24 +-
 .../domains/pr/ui/composites/PRJoinGates.vue  |  16 +-
 .../pr/ui/composites/PRJoinSuccessPrompt.vue  |  20 +-
 .../ui/composites/PRWaitlistSuccessPrompt.vue |  20 +-
 .../pr/ui/forms/DateTimeRangePicker.vue       |  34 +-
 .../src/domains/pr/ui/forms/NLPRForm.vue      |   7 +-
 .../src/domains/pr/ui/forms/PREditor.vue      |  15 +-
 .../pr/ui/forms/PRJoinGateConfigEditor.vue    |  22 +-
 .../pr/ui/gates/PRJoinFallbackConfirmGate.vue |  16 +-
 .../gates/PRWaitlistFallbackConfirmGate.vue   |  16 +-
 .../pr/ui/modals/PRLocationGalleryModal.vue   |  19 +-
 .../domains/pr/ui/modals/PRRosterModal.vue    |   7 +-
 .../pr/ui/sections/AnchorAttendancePanel.vue  |  14 +-
 .../pr/ui/sections/PRBetaGroupAction.vue      |   9 +-
 .../ui/sections/PRCheckInFeedbackActions.vue  |  14 +-
 .../pr/ui/sections/PRConfirmationAction.vue   |   8 +-
 .../pr/ui/sections/PRCreateFooterActions.vue  |  16 +-
 .../pr/ui/sections/PRDraftPublishNotice.vue   |   9 +-
 .../domains/pr/ui/sections/PRExitAction.vue   |   9 +-
 .../domains/pr/ui/sections/PRJoinAction.vue   |   9 +-
 .../pr/ui/sections/PRMessageThread.vue        |   9 +-
 .../pr/ui/sections/PRMessageThreadAction.vue  |   8 +-
 .../pr/ui/sections/PRPairingCodeAction.vue    |  10 +-
 .../pr/ui/sections/PRPartnerSection.vue       |  47 +--
 .../domains/pr/ui/sections/PRShareAction.vue  |   9 +-
 .../sections/PRStudySprintPomodoroAction.vue  |   8 +-
 .../pr/ui/sections/PRWaitlistActions.vue      |  15 +-
 .../pr/ui/sections/SharedPRActionsBar.vue     |  32 +-
 .../src/domains/route/ui/RouteEditor.vue      |  15 +-
 .../share/ui/composites/PRShareCarousel.vue   |  22 +-
 .../share/ui/methods/as-link/ShareAsLink.vue  |   8 +-
 .../ui/methods/wechat/ShareToWechatChat.vue   |  20 +-
 .../ui/methods/xhs/ShareToXiaohongshu.vue     |  27 +-
 .../ui/sections/SupportContactAction.vue      |   9 +-
 .../ui/sections/SupportContactQrModal.vue     |   9 +-
 apps/frontend/src/pages/AboutPage.vue         |  11 +-
 .../frontend/src/pages/AdminAnalyticsPage.vue |  33 +-
 .../src/pages/AdminAnchorEventPage.vue        |  13 +-
 .../pages/AdminCommerceFulfillmentPage.vue    |  45 +-
 .../src/pages/AdminCommerceOfferPage.vue      |  19 +-
 .../src/pages/AdminCommercePlacementPage.vue  |  39 +-
 .../pages/AdminFeedbackQuestionnairesPage.vue |  21 +-
 apps/frontend/src/pages/AdminLoginPage.vue    | 397 +++++++++---------
 apps/frontend/src/pages/AdminPaymentPage.vue  |  17 +-
 .../src/pages/AdminRideHailingPage.vue        |  17 +-
 .../src/pages/AnchorEventLandingPage.vue      |  20 +-
 apps/frontend/src/pages/BIEntryPage.vue       |   7 +-
 .../src/pages/CommerceBillDetailPage.vue      |   7 +-
 .../src/pages/CommerceOrderDetailPage.vue     |  20 +-
 apps/frontend/src/pages/EventPRSearchPage.vue |  53 ++-
 .../src/pages/LocationApplicationPage.vue     |  11 +-
 .../frontend/src/pages/LocationPickerPage.vue |  11 +-
 apps/frontend/src/pages/MePage.vue            |  67 ++-
 .../src/pages/OrderingSupportPage.vue         |  31 +-
 apps/frontend/src/pages/PRPage.vue            |  44 +-
 .../src/pages/PaymentCheckoutPage.vue         |  30 +-
 .../src/pages/RouteApplicationPage.vue        |  11 +-
 .../src/pages/StudySprintPomodoroPage.vue     |  35 +-
 .../route-handoff/MatchedPRHandoffOverlay.vue |  16 +-
 .../wechat/WeChatOAuthHandoffGate.vue         |  14 +-
 apps/frontend/src/shared/ui/AGENTS.md         |   6 +-
 .../frontend/src/shared/ui/actions/Button.vue | 370 ----------------
 .../src/shared/ui/actions/FeedbackButton.vue  |  95 -----
 .../sections/APRNotificationSubscriptions.vue |  28 +-
 .../src/shared/upload/ImageUrlInput.vue       |  13 +-
 .../WeChatMiniProgramJssdkNoticeModal.vue     |  17 +-
 apps/frontend/src/styles/AGENTS.md            |   3 +-
 .../design-web-package-integration/README.md  |   4 +-
 .../component-migration/00-control-surface.md |  12 +-
 .../component-migration/10-slice-index.md     |  25 +-
 .../component-migration/90-discussion-log.md  |  41 ++
 .../component-migration/components/button.md  |  41 +-
 .../components/feedback-button.md             |  26 +-
 .../components/info-row.md                    |  14 +-
 .../component-migration/components/tab-bar.md |  46 ++
 110 files changed, 1297 insertions(+), 1713 deletions(-)
 delete mode 100644 apps/frontend/src/shared/ui/actions/Button.vue
 delete mode 100644 apps/frontend/src/shared/ui/actions/FeedbackButton.vue
 create mode 100644 tasks/design-web-package-integration/component-migration/components/tab-bar.md

diff --git a/apps/frontend/src/domains/admin-commerce/ui/json-logic/JsonLogicRuleEditor.vue b/apps/frontend/src/domains/admin-commerce/ui/json-logic/JsonLogicRuleEditor.vue
index 3aa0643d4..f5d4f7f6a 100644
--- a/apps/frontend/src/domains/admin-commerce/ui/json-logic/JsonLogicRuleEditor.vue
+++ b/apps/frontend/src/domains/admin-commerce/ui/json-logic/JsonLogicRuleEditor.vue
@@ -46,12 +46,12 @@
         <strong class="pm-subsection-title">
           {{ t("adminCommerceJsonLogic.conditionsTitle") }}
         </strong>
-        <Button appearance="pill" tone="outline" size="sm" type="button" @click="addCondition">
+        <PuButton shape="pill" tone="neutral" variant="outline" size="sm" @click="addCondition">
           <template #leading>
             <span class="i-mdi-plus" />
           </template>
           {{ t("adminCommerceJsonLogic.addConditionAction") }}
-        </Button>
+        </PuButton>
       </div>
 
       <p v-if="rule.conditions.length === 0" class="pm-hint">
@@ -127,18 +127,18 @@
           />
         </label>
 
-        <Button
-          appearance="pill"
-          tone="danger"
+        <PuButton
+          shape="pill"
+          tone="danger" variant="outline"
           size="sm"
-          type="button"
+
           @click="removeCondition(condition.draftId)"
         >
           <template #leading>
             <span class="i-mdi-delete-outline" />
           </template>
           {{ t("adminCommerceJsonLogic.removeConditionAction") }}
-        </Button>
+        </PuButton>
       </article>
     </template>
   </section>
@@ -147,11 +147,7 @@
 <script setup lang="ts">
 import { computed, watch } from "vue";
 import { useI18n } from "vue-i18n";
-import {
-  PuSegmented,
-  PuSegmentedItem,
-  type PuSegmentedValue,
-} from "@partner-up-dev/design-web";
+import { PuButton, PuSegmented, PuSegmentedItem, type PuSegmentedValue } from "@partner-up-dev/design-web";
 import {
   createCustomJsonLogicField,
   createJsonLogicConditionDraft,
@@ -166,7 +162,6 @@ import {
   type JsonLogicRuleDraft,
   type JsonLogicRuleMode,
 } from "@/domains/admin-commerce/model/json-logic/jsonLogicRuleEditorModel";
-import Button from "@/shared/ui/actions/Button.vue";
 import "@/domains/admin-commerce/ui/product-management/product-management.scss";
 
 type SegmentedOption = {
diff --git a/apps/frontend/src/domains/admin-commerce/ui/pricing-rules/PricingRulesEditor.vue b/apps/frontend/src/domains/admin-commerce/ui/pricing-rules/PricingRulesEditor.vue
index 005353190..28c95a0e1 100644
--- a/apps/frontend/src/domains/admin-commerce/ui/pricing-rules/PricingRulesEditor.vue
+++ b/apps/frontend/src/domains/admin-commerce/ui/pricing-rules/PricingRulesEditor.vue
@@ -2,12 +2,12 @@
   <section class="pm-editor-section">
     <div class="pm-section-header">
       <h3 class="pm-section-title">{{ title }}</h3>
-      <Button appearance="pill" tone="outline" size="sm" type="button" @click="addRule">
+      <PuButton shape="pill" tone="neutral" variant="outline" size="sm" @click="addRule">
         <template #leading>
           <span class="i-mdi-plus" />
         </template>
         {{ t("adminCommerceProducts.pricingRuleAddAction") }}
-      </Button>
+      </PuButton>
     </div>
     <p v-if="rules.length === 0" class="pm-hint">
       {{ t("adminCommerceProducts.emptyPricingRules") }}
@@ -19,12 +19,12 @@
     >
       <div class="pm-section-header">
         <strong>{{ t("adminCommerceProducts.pricingRuleTitle", { index: index + 1 }) }}</strong>
-        <Button appearance="pill" tone="danger" size="sm" type="button" @click="removeRule(index)">
+        <PuButton shape="pill" tone="danger" variant="outline" size="sm" @click="removeRule(index)">
           <template #leading>
             <span class="i-mdi-delete-outline" />
           </template>
           {{ t("adminCommerceProducts.removeItemAction") }}
-        </Button>
+        </PuButton>
       </div>
       <div class="pm-grid">
         <label class="pm-field">
@@ -106,9 +106,8 @@ import {
   type PricingRuleDraft,
 } from "@/domains/admin-commerce/model/pricing-rules/pricingRuleEditorModel";
 import PricingConditionRuleEditor from "@/domains/admin-commerce/ui/pricing-rules/PricingConditionRuleEditor.vue";
-import Button from "@/shared/ui/actions/Button.vue";
 import "@/domains/admin-commerce/ui/product-management/product-management.scss";
-import { PuToggleSwitch } from "@partner-up-dev/design-web";
+import { PuButton, PuToggleSwitch } from "@partner-up-dev/design-web";
 
 defineProps<{
   title: string;
diff --git a/apps/frontend/src/domains/admin-commerce/ui/product-management/composites/FactEntryEditor.vue b/apps/frontend/src/domains/admin-commerce/ui/product-management/composites/FactEntryEditor.vue
index 22bb62b98..a657d0dd6 100644
--- a/apps/frontend/src/domains/admin-commerce/ui/product-management/composites/FactEntryEditor.vue
+++ b/apps/frontend/src/domains/admin-commerce/ui/product-management/composites/FactEntryEditor.vue
@@ -41,12 +41,12 @@
     </div>
 
     <div class="pm-inline-actions">
-      <Button appearance="pill" tone="danger" size="sm" type="button" @click="emit('remove')">
+      <PuButton shape="pill" tone="danger" variant="outline" size="sm" @click="emit('remove')">
         <template #leading>
           <span class="i-mdi-delete-outline" />
         </template>
         {{ removeLabel }}
-      </Button>
+      </PuButton>
     </div>
   </article>
 </template>
@@ -55,7 +55,7 @@
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 import type { FactEntryDraft } from "@/domains/admin-commerce/model/product-management/spuEditorModel";
-import Button from "@/shared/ui/actions/Button.vue";
+import { PuButton } from "@partner-up-dev/design-web";
 import "@/domains/admin-commerce/ui/product-management/product-management.scss";
 
 defineProps<{
diff --git a/apps/frontend/src/domains/admin-commerce/ui/product-management/composites/StringListEditor.vue b/apps/frontend/src/domains/admin-commerce/ui/product-management/composites/StringListEditor.vue
index bccc646d0..2b9f8512f 100644
--- a/apps/frontend/src/domains/admin-commerce/ui/product-management/composites/StringListEditor.vue
+++ b/apps/frontend/src/domains/admin-commerce/ui/product-management/composites/StringListEditor.vue
@@ -2,36 +2,36 @@
   <div class="pm-list-editor">
     <div class="pm-section-header">
       <h4 class="pm-subsection-title">{{ title }}</h4>
-      <Button
-        appearance="pill"
-        tone="outline"
+      <PuButton
+        shape="pill"
+        tone="neutral" variant="outline"
         size="sm"
-        type="button"
+
         @click="handleAdd"
       >
         <template #leading>
           <span class="i-mdi-plus" />
         </template>
         {{ addLabel }}
-      </Button>
+      </PuButton>
     </div>
     <p v-if="items.length === 0" class="pm-hint">
       {{ t("adminCommerceProducts.emptyListPlaceholder") }}
     </p>
     <div v-for="(item, index) in items" :key="item.id" class="pm-inline-row">
       <input v-model="item.value" class="pm-field-input" type="text" />
-      <Button
-        appearance="pill"
-        tone="danger"
+      <PuButton
+        shape="pill"
+        tone="danger" variant="outline"
         size="sm"
-        type="button"
+
         @click="handleRemove(index)"
       >
         <template #leading>
           <span class="i-mdi-close" />
         </template>
         {{ removeLabel }}
-      </Button>
+      </PuButton>
     </div>
   </div>
 </template>
@@ -40,7 +40,7 @@
 import { useI18n } from "vue-i18n";
 import { createDraftId } from "@/domains/admin-commerce/model/product-management/shared";
 import type { EditableStringItem } from "@/domains/admin-commerce/model/product-management/spuEditorModel";
-import Button from "@/shared/ui/actions/Button.vue";
+import { PuButton } from "@partner-up-dev/design-web";
 import "@/domains/admin-commerce/ui/product-management/product-management.scss";
 
 defineProps<{
diff --git a/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceCancellationPolicyEditor.vue b/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceCancellationPolicyEditor.vue
index 8af93a6b9..9d3869062 100644
--- a/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceCancellationPolicyEditor.vue
+++ b/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceCancellationPolicyEditor.vue
@@ -16,12 +16,12 @@
     <section class="pm-editor-section">
       <div class="pm-section-header">
         <h3 class="pm-section-title">{{ t("adminCommerceProducts.cancellationTiersLabel") }}</h3>
-        <Button appearance="pill" tone="outline" size="sm" type="button" @click="addCancellationTier">
+        <PuButton shape="pill" tone="neutral" variant="outline" size="sm" @click="addCancellationTier">
           <template #leading>
             <span class="i-mdi-plus" />
           </template>
           {{ t("adminCommerceProducts.addCancellationTierAction") }}
-        </Button>
+        </PuButton>
       </div>
       <article
         v-for="(tier, index) in policyForm.tiers"
@@ -30,11 +30,11 @@
       >
         <div class="pm-section-header">
           <strong>{{ t("adminCommerceProducts.cancellationTierTitle", { index: index + 1 }) }}</strong>
-          <Button
-            appearance="pill"
-            tone="danger"
+          <PuButton
+            shape="pill"
+            tone="danger" variant="outline"
             size="sm"
-            type="button"
+
             :disabled="policyForm.tiers.length <= 1"
             @click="removeCancellationTier(index)"
           >
@@ -42,7 +42,7 @@
               <span class="i-mdi-delete-outline" />
             </template>
             {{ t("adminCommerceProducts.removeItemAction") }}
-          </Button>
+          </PuButton>
         </div>
         <div class="pm-grid">
           <label class="pm-field">
@@ -74,9 +74,9 @@
     </section>
 
     <div class="pm-inline-actions">
-      <Button size="sm" type="button" :disabled="isSavingPolicy" @click="handleSavePolicy">
+      <PuButton size="sm" :disabled="isSavingPolicy" @click="handleSavePolicy">
         {{ isSavingPolicy ? t("adminCommerceProducts.savingAction") : t("adminCommerceProducts.savePolicyAction") }}
-      </Button>
+      </PuButton>
     </div>
   </div>
 </template>
@@ -94,9 +94,8 @@ import {
 } from "@/domains/admin-commerce/model/product-management/cancellationPolicyEditorModel";
 import { useSaveAdminSkuCancellationPolicy } from "@/domains/admin-commerce/queries/useAdminCommerce";
 import { useAdminCommerceProductManagementContext } from "@/domains/admin-commerce/ui/product-management/productManagementContext";
-import Button from "@/shared/ui/actions/Button.vue";
 import "@/domains/admin-commerce/ui/product-management/product-management.scss";
-import { PuToggleSwitch } from "@partner-up-dev/design-web";
+import { PuButton, PuToggleSwitch } from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const context = useAdminCommerceProductManagementContext();
diff --git a/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceProductActionBar.vue b/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceProductActionBar.vue
index 2a6e457c2..b3676afe6 100644
--- a/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceProductActionBar.vue
+++ b/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceProductActionBar.vue
@@ -1,24 +1,24 @@
 <template>
-  <Button appearance="pill" tone="outline" size="sm" type="button" @click="context.prepareNewSpu">
+  <PuButton shape="pill" tone="neutral" variant="outline" size="sm" @click="context.prepareNewSpu">
     {{ t("adminCommerceProducts.newSpuAction") }}
-  </Button>
-  <Button
-    appearance="pill"
-    tone="outline"
+  </PuButton>
+  <PuButton
+    shape="pill"
+    tone="neutral" variant="outline"
     size="sm"
-    type="button"
+
     :disabled="selectedSpuId === null"
     @click="context.prepareNewSku"
   >
     {{ t("adminCommerceProducts.newSkuAction") }}
-  </Button>
+  </PuButton>
 </template>
 
 <script setup lang="ts">
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { useAdminCommerceProductManagementContext } from "@/domains/admin-commerce/ui/product-management/productManagementContext";
-import Button from "@/shared/ui/actions/Button.vue";
+import { PuButton } from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const context = useAdminCommerceProductManagementContext();
diff --git a/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceSkuEditor.vue b/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceSkuEditor.vue
index 3313d42fc..353b9a5f3 100644
--- a/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceSkuEditor.vue
+++ b/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceSkuEditor.vue
@@ -78,14 +78,14 @@
     </section>
 
     <div class="pm-inline-actions">
-      <Button
+      <PuButton
         size="sm"
-        type="button"
+
         :disabled="isSavingSku || selectedSpuId === null"
         @click="handleSaveSku"
       >
         {{ isSavingSku ? t("adminCommerceProducts.savingAction") : t("adminCommerceProducts.saveSkuAction") }}
-      </Button>
+      </PuButton>
     </div>
   </div>
 </template>
@@ -105,7 +105,7 @@ import {
   useUpdateAdminProductSku,
 } from "@/domains/admin-commerce/queries/useAdminCommerce";
 import { useAdminCommerceProductManagementContext } from "@/domains/admin-commerce/ui/product-management/productManagementContext";
-import Button from "@/shared/ui/actions/Button.vue";
+import { PuButton } from "@partner-up-dev/design-web";
 import "@/domains/admin-commerce/ui/product-management/product-management.scss";
 
 const { t } = useI18n();
diff --git a/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceSpuEditor.vue b/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceSpuEditor.vue
index 3400dbaf8..e8d80e745 100644
--- a/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceSpuEditor.vue
+++ b/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceSpuEditor.vue
@@ -134,12 +134,12 @@
 
       <div class="pm-section-header">
         <h4 class="pm-subsection-title">{{ t("adminCommerceProducts.parameterGroupsLabel") }}</h4>
-        <Button appearance="pill" tone="outline" size="sm" type="button" @click="addParameterGroup">
+        <PuButton shape="pill" tone="neutral" variant="outline" size="sm" @click="addParameterGroup">
           <template #leading>
             <span class="i-mdi-plus" />
           </template>
           {{ t("adminCommerceProducts.addParameterGroupAction") }}
-        </Button>
+        </PuButton>
       </div>
       <p v-if="spuForm.parameterGroups.length === 0" class="pm-hint">
         {{ t("adminCommerceProducts.emptyListPlaceholder") }}
@@ -151,12 +151,12 @@
       >
         <div class="pm-section-header">
           <strong>{{ t("adminCommerceProducts.parameterGroupTitle", { index: groupIndex + 1 }) }}</strong>
-          <Button appearance="pill" tone="danger" size="sm" type="button" @click="removeParameterGroup(groupIndex)">
+          <PuButton shape="pill" tone="danger" variant="outline" size="sm" @click="removeParameterGroup(groupIndex)">
             <template #leading>
               <span class="i-mdi-delete-outline" />
             </template>
             {{ t("adminCommerceProducts.removeItemAction") }}
-          </Button>
+          </PuButton>
         </div>
         <label class="pm-field">
           <span class="pm-field-label">{{ t("adminCommerceProducts.groupTitleLabel") }}</span>
@@ -164,12 +164,12 @@
         </label>
         <div class="pm-section-header">
           <span class="pm-field-label">{{ t("adminCommerceProducts.parameterItemsLabel") }}</span>
-          <Button appearance="pill" tone="outline" size="sm" type="button" @click="addParameterItem(groupIndex)">
+          <PuButton shape="pill" tone="neutral" variant="outline" size="sm" @click="addParameterItem(groupIndex)">
             <template #leading>
               <span class="i-mdi-plus" />
             </template>
             {{ t("adminCommerceProducts.addParameterItemAction") }}
-          </Button>
+          </PuButton>
         </div>
         <div
           v-for="(item, itemIndex) in group.items"
@@ -184,23 +184,23 @@
             <span class="pm-field-label">{{ t("adminCommerceProducts.parameterValueLabel") }}</span>
             <input v-model="item.value" class="pm-field-input" type="text" />
           </label>
-          <Button appearance="pill" tone="danger" size="sm" type="button" @click="removeParameterItem(groupIndex, itemIndex)">
+          <PuButton shape="pill" tone="danger" variant="outline" size="sm" @click="removeParameterItem(groupIndex, itemIndex)">
             <template #leading>
               <span class="i-mdi-close" />
             </template>
             {{ t("adminCommerceProducts.removeItemAction") }}
-          </Button>
+          </PuButton>
         </div>
       </article>
 
       <div class="pm-section-header">
         <h4 class="pm-subsection-title">{{ t("adminCommerceProducts.noticeBlocksLabel") }}</h4>
-        <Button appearance="pill" tone="outline" size="sm" type="button" @click="addNoticeBlock">
+        <PuButton shape="pill" tone="neutral" variant="outline" size="sm" @click="addNoticeBlock">
           <template #leading>
             <span class="i-mdi-plus" />
           </template>
           {{ t("adminCommerceProducts.addNoticeBlockAction") }}
-        </Button>
+        </PuButton>
       </div>
       <p v-if="spuForm.noticeBlocks.length === 0" class="pm-hint">
         {{ t("adminCommerceProducts.emptyListPlaceholder") }}
@@ -212,12 +212,12 @@
       >
         <div class="pm-section-header">
           <strong>{{ t("adminCommerceProducts.noticeBlockTitle", { index: index + 1 }) }}</strong>
-          <Button appearance="pill" tone="danger" size="sm" type="button" @click="removeNoticeBlock(index)">
+          <PuButton shape="pill" tone="danger" variant="outline" size="sm" @click="removeNoticeBlock(index)">
             <template #leading>
               <span class="i-mdi-delete-outline" />
             </template>
             {{ t("adminCommerceProducts.removeItemAction") }}
-          </Button>
+          </PuButton>
         </div>
         <div class="pm-grid">
           <label class="pm-field">
@@ -235,12 +235,12 @@
     <section class="pm-editor-section">
       <div class="pm-section-header">
         <h3 class="pm-section-title">{{ t("adminCommerceProducts.factsLabel") }}</h3>
-        <Button appearance="pill" tone="outline" size="sm" type="button" @click="addSpuFact">
+        <PuButton shape="pill" tone="neutral" variant="outline" size="sm" @click="addSpuFact">
           <template #leading>
             <span class="i-mdi-plus" />
           </template>
           {{ t("adminCommerceProducts.addFactAction") }}
-        </Button>
+        </PuButton>
       </div>
       <p v-if="spuForm.facts.length === 0" class="pm-hint">
         {{ t("adminCommerceProducts.emptyListPlaceholder") }}
@@ -255,9 +255,9 @@
     </section>
 
     <div class="pm-inline-actions">
-      <Button size="sm" type="button" :disabled="isSavingSpu" @click="handleSaveSpu">
+      <PuButton size="sm" :disabled="isSavingSpu" @click="handleSaveSpu">
         {{ isSavingSpu ? t("adminCommerceProducts.savingAction") : t("adminCommerceProducts.saveSpuAction") }}
-      </Button>
+      </PuButton>
     </div>
   </div>
 </template>
@@ -284,9 +284,8 @@ import {
 import { useAdminCommerceProductManagementContext } from "@/domains/admin-commerce/ui/product-management/productManagementContext";
 import FactEntryEditor from "@/domains/admin-commerce/ui/product-management/composites/FactEntryEditor.vue";
 import StringListEditor from "@/domains/admin-commerce/ui/product-management/composites/StringListEditor.vue";
-import Button from "@/shared/ui/actions/Button.vue";
 import "@/domains/admin-commerce/ui/product-management/product-management.scss";
-import { PuToggleSwitch } from "@partner-up-dev/design-web";
+import { PuButton, PuToggleSwitch } from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const context = useAdminCommerceProductManagementContext();
diff --git a/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventPendingPreferenceTagList.vue b/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventPendingPreferenceTagList.vue
index 7db90cf09..45cd96c97 100644
--- a/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventPendingPreferenceTagList.vue
+++ b/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventPendingPreferenceTagList.vue
@@ -32,25 +32,25 @@
         </div>
 
         <div class="anchor-event-pending-preference-tag-list__actions">
-          <Button
-            appearance="pill"
+          <PuButton
+            shape="pill"
             size="sm"
-            type="button"
+
             :disabled="isModerating"
             @click="publishTag(tag.id)"
           >
             {{ t("adminAnchorEvents.publishPreferenceTagAction") }}
-          </Button>
-          <Button
-            appearance="pill"
-            tone="outline"
+          </PuButton>
+          <PuButton
+            shape="pill"
+            tone="neutral" variant="outline"
             size="sm"
-            type="button"
+
             :disabled="isModerating"
             @click="rejectTag(tag.id)"
           >
             {{ t("adminAnchorEvents.rejectPreferenceTagAction") }}
-          </Button>
+          </PuButton>
         </div>
       </article>
     </div>
@@ -60,8 +60,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
-import Button from "@/shared/ui/actions/Button.vue";
-import { PuLoadingState } from "@partner-up-dev/design-web";
+import { PuButton, PuLoadingState } from "@partner-up-dev/design-web";
 import {
   useAdminAnchorEventPreferenceTags,
   usePublishAdminAnchorEventPreferenceTag,
diff --git a/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventPreferenceTagPoolEditor.vue b/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventPreferenceTagPoolEditor.vue
index 0cde84f9f..2a64ca424 100644
--- a/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventPreferenceTagPoolEditor.vue
+++ b/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventPreferenceTagPoolEditor.vue
@@ -33,15 +33,15 @@
           <input v-model="row.description" class="field-input" />
         </label>
 
-        <Button
-          appearance="pill"
-          tone="outline"
+        <PuButton
+          shape="pill"
+          tone="neutral" variant="outline"
           size="sm"
-          type="button"
+
           @click="removeRow(row.id)"
         >
           {{ t("adminAnchorEvents.removePreferenceTagAction") }}
-        </Button>
+        </PuButton>
       </article>
     </div>
   </div>
@@ -50,8 +50,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
-import Button from "@/shared/ui/actions/Button.vue";
-import { PuLoadingState } from "@partner-up-dev/design-web";
+import { PuButton, PuLoadingState } from "@partner-up-dev/design-web";
 import {
   useAdminAnchorEventPreferenceTags,
   useReplaceAdminAnchorEventPreferenceTags,
diff --git a/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventRoutePoolEditor.vue b/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventRoutePoolEditor.vue
index 03bc4bf50..60b832098 100644
--- a/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventRoutePoolEditor.vue
+++ b/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventRoutePoolEditor.vue
@@ -2,14 +2,14 @@
   <div class="anchor-event-route-pool-editor">
     <p class="hint">{{ t("adminPR.eventRoutePoolHint") }}</p>
 
-    <Button
-      type="button"
-      appearance="pill"
+    <PuButton
+
+      shape="pill"
       size="sm"
       @click="addRouteEntry"
     >
       {{ t("adminPR.eventRoutePoolAddAction") }}
-    </Button>
+    </PuButton>
 
     <p v-if="form.routePool.length === 0" class="hint">
       {{ t("adminPR.eventRoutePoolEmpty") }}
@@ -32,16 +32,16 @@
           />
         </label>
 
-        <Button
-          type="button"
-          appearance="pill"
-          tone="danger"
+        <PuButton
+
+          shape="pill"
+          tone="danger" variant="outline"
           size="sm"
           data-testid="admin-anchor-event.route-pool.remove"
           @click="removeRouteEntry(index)"
         >
           {{ t("adminPR.eventRoutePoolRemoveAction") }}
-        </Button>
+        </PuButton>
       </div>
 
       <p class="route-pool-entry__summary">
@@ -60,7 +60,6 @@
 <script setup lang="ts">
 import { useI18n } from "vue-i18n";
 import type { AnchorEventRoutePool } from "@partner-up-dev/backend";
-import Button from "@/shared/ui/actions/Button.vue";
 import type { AnchorEventEditorForm } from "@/domains/admin/ui/anchor-event/anchorEventEditorTypes";
 import {
   buildRouteSummary,
@@ -69,6 +68,7 @@ import {
   type Route,
 } from "@/domains/route/model/route";
 import RouteEditor from "@/domains/route/ui/RouteEditor.vue";
+import { PuButton } from "@partner-up-dev/design-web";
 
 const form = defineModel<AnchorEventEditorForm>({ required: true });
 const { t } = useI18n();
diff --git a/apps/frontend/src/domains/admin/ui/anchor-event/sections/AnchorEventBasicSection.vue b/apps/frontend/src/domains/admin/ui/anchor-event/sections/AnchorEventBasicSection.vue
index 0d3ed9b70..933366338 100644
--- a/apps/frontend/src/domains/admin/ui/anchor-event/sections/AnchorEventBasicSection.vue
+++ b/apps/frontend/src/domains/admin/ui/anchor-event/sections/AnchorEventBasicSection.vue
@@ -7,15 +7,15 @@
     <BentoLayout>
       <BentoItem :title="t('adminAnchorEvents.activityInfoTitle')" span="full">
         <template #actions>
-          <Button
-            appearance="pill"
+          <PuButton
+            shape="pill"
             size="sm"
-            type="button"
+
             :disabled="saveDisabled"
             @click="$emit('save')"
           >
             {{ saveLabel }}
-          </Button>
+          </PuButton>
         </template>
 
         <AnchorEventDetailsEditor v-model="form" />
@@ -44,13 +44,13 @@
 
 <script setup lang="ts">
 import { useI18n } from "vue-i18n";
-import Button from "@/shared/ui/actions/Button.vue";
 import BentoItem from "@/domains/admin/ui/layout/BentoItem.vue";
 import BentoLayout from "@/domains/admin/ui/layout/BentoLayout.vue";
 import AnchorEventCapacityDefaultsEditor from "@/domains/admin/ui/anchor-event/components/AnchorEventCapacityDefaultsEditor.vue";
 import AnchorEventDetailsEditor from "@/domains/admin/ui/anchor-event/components/AnchorEventDetailsEditor.vue";
 import AnchorEventMediaEditor from "@/domains/admin/ui/anchor-event/components/AnchorEventMediaEditor.vue";
 import type { AnchorEventEditorForm } from "@/domains/admin/ui/anchor-event/anchorEventEditorTypes";
+import { PuButton } from "@partner-up-dev/design-web";
 
 defineProps<{
   saveLabel: string;
diff --git a/apps/frontend/src/domains/admin/ui/anchor-event/sections/AnchorEventLocationsSection.vue b/apps/frontend/src/domains/admin/ui/anchor-event/sections/AnchorEventLocationsSection.vue
index 4b53701b8..739ee88c4 100644
--- a/apps/frontend/src/domains/admin/ui/anchor-event/sections/AnchorEventLocationsSection.vue
+++ b/apps/frontend/src/domains/admin/ui/anchor-event/sections/AnchorEventLocationsSection.vue
@@ -7,15 +7,15 @@
     <BentoLayout>
       <BentoItem :title="t('adminAnchorEvents.locationPoolsTitle')" span="full">
         <template #actions>
-          <Button
-            appearance="pill"
+          <PuButton
+            shape="pill"
             size="sm"
-            type="button"
+
             :disabled="saveDisabled"
             @click="$emit('save')"
           >
             {{ saveLabel }}
-          </Button>
+          </PuButton>
         </template>
 
         <AnchorEventPlacePoolEditor v-model="form" />
@@ -37,13 +37,13 @@
 
 <script setup lang="ts">
 import { useI18n } from "vue-i18n";
-import Button from "@/shared/ui/actions/Button.vue";
 import BentoItem from "@/domains/admin/ui/layout/BentoItem.vue";
 import BentoLayout from "@/domains/admin/ui/layout/BentoLayout.vue";
 import AnchorEventDefaultMeetingPointEditor from "@/domains/admin/ui/anchor-event/components/AnchorEventDefaultMeetingPointEditor.vue";
 import AnchorEventLocationMeetingPointsEditor from "@/domains/admin/ui/anchor-event/components/AnchorEventLocationMeetingPointsEditor.vue";
 import AnchorEventPlacePoolEditor from "@/domains/admin/ui/anchor-event/components/AnchorEventPlacePoolEditor.vue";
 import type { AnchorEventEditorForm } from "@/domains/admin/ui/anchor-event/anchorEventEditorTypes";
+import { PuButton } from "@partner-up-dev/design-web";
 
 defineProps<{
   saveLabel: string;
diff --git a/apps/frontend/src/domains/admin/ui/anchor-event/sections/AnchorEventOtherSection.vue b/apps/frontend/src/domains/admin/ui/anchor-event/sections/AnchorEventOtherSection.vue
index bcf970bb9..e86de950e 100644
--- a/apps/frontend/src/domains/admin/ui/anchor-event/sections/AnchorEventOtherSection.vue
+++ b/apps/frontend/src/domains/admin/ui/anchor-event/sections/AnchorEventOtherSection.vue
@@ -7,15 +7,15 @@
     <BentoLayout>
       <BentoItem :title="t('adminCommon.navAnchorEventOther')" span="full">
         <template #actions>
-          <Button
-            appearance="pill"
+          <PuButton
+            shape="pill"
             size="sm"
-            type="button"
+
             :disabled="saveDisabled"
             @click="$emit('save')"
           >
             {{ saveLabel }}
-          </Button>
+          </PuButton>
         </template>
 
         <AnchorEventJoinGateEditor v-model="form" />
@@ -81,16 +81,16 @@
 
       <BentoItem :title="t('adminAnchorEvents.landingRolloutTitle')">
         <template #actions>
-          <Button
-            appearance="pill"
+          <PuButton
+            shape="pill"
             size="sm"
-            type="button"
+
             :disabled="!landingRolloutEditor?.canSave"
             :loading="landingRolloutEditor?.isSaving ?? false"
             @click="saveLandingConfig"
           >
             {{ landingSaveLabel }}
-          </Button>
+          </PuButton>
         </template>
 
         <AnchorEventLandingRolloutEditor
@@ -106,13 +106,12 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
-import Button from "@/shared/ui/actions/Button.vue";
 import BentoItem from "@/domains/admin/ui/layout/BentoItem.vue";
 import BentoLayout from "@/domains/admin/ui/layout/BentoLayout.vue";
 import AnchorEventFeedbackQuestionnairePicker from "@/domains/admin/ui/anchor-event/components/AnchorEventFeedbackQuestionnairePicker.vue";
 import AnchorEventJoinGateEditor from "@/domains/admin/ui/anchor-event/components/AnchorEventJoinGateEditor.vue";
 import AnchorEventLandingRolloutEditor from "@/domains/admin/ui/anchor-event/components/AnchorEventLandingRolloutEditor.vue";
-import { PuInput, PuTextarea, PuToggleSwitch } from "@partner-up-dev/design-web";
+import { PuButton, PuInput, PuTextarea, PuToggleSwitch } from "@partner-up-dev/design-web";
 import type {
   AnchorEventEditorForm,
   FeedbackQuestionnaireTemplateOption,
diff --git a/apps/frontend/src/domains/admin/ui/anchor-event/sections/AnchorEventRouteApplicationsSection.vue b/apps/frontend/src/domains/admin/ui/anchor-event/sections/AnchorEventRouteApplicationsSection.vue
index 8a683ea0b..9e87f3e89 100644
--- a/apps/frontend/src/domains/admin/ui/anchor-event/sections/AnchorEventRouteApplicationsSection.vue
+++ b/apps/frontend/src/domains/admin/ui/anchor-event/sections/AnchorEventRouteApplicationsSection.vue
@@ -88,20 +88,20 @@
                   @input="handleRejectReasonInput(application.id, $event)"
                 ></textarea>
                 <div class="route-application-card__actions">
-                  <Button
-                    appearance="pill"
+                  <PuButton
+                    shape="pill"
                     size="sm"
-                    type="button"
+
                     :disabled="disabled || !canAccept(application.id)"
                     @click="handleAccept(application)"
                   >
                     {{ t("adminAnchorEvents.acceptRouteApplicationAction") }}
-                  </Button>
-                  <Button
-                    appearance="pill"
-                    tone="outline"
+                  </PuButton>
+                  <PuButton
+                    shape="pill"
+                    tone="neutral" variant="outline"
                     size="sm"
-                    type="button"
+
                     :disabled="disabled"
                     @click="
                       $emit('reject', {
@@ -111,7 +111,7 @@
                     "
                   >
                     {{ t("adminAnchorEvents.rejectRouteApplicationAction") }}
-                  </Button>
+                  </PuButton>
                 </div>
               </div>
             </div>
@@ -126,7 +126,6 @@
 import { computed, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import type { PRRoute } from "@partner-up-dev/backend";
-import Button from "@/shared/ui/actions/Button.vue";
 import BentoItem from "@/domains/admin/ui/layout/BentoItem.vue";
 import BentoLayout from "@/domains/admin/ui/layout/BentoLayout.vue";
 import type { AdminRouteApplication } from "@/domains/admin/queries/useAdminAnchorEvents";
@@ -141,7 +140,7 @@ import {
 } from "@/domains/route/model/route";
 import RouteEditor from "@/domains/route/ui/RouteEditor.vue";
 import RouteMap from "@/domains/route/ui/RouteMap.vue";
-import { PuTag } from "@partner-up-dev/design-web";
+import { PuButton, PuTag } from "@partner-up-dev/design-web";
 
 type RouteApplicationStatus = "PENDING" | "ACCEPTED" | "REJECTED";
 
diff --git a/apps/frontend/src/domains/admin/ui/anchor-event/sections/AnchorEventTagsSection.vue b/apps/frontend/src/domains/admin/ui/anchor-event/sections/AnchorEventTagsSection.vue
index 96c4473d9..0ef80ecd4 100644
--- a/apps/frontend/src/domains/admin/ui/anchor-event/sections/AnchorEventTagsSection.vue
+++ b/apps/frontend/src/domains/admin/ui/anchor-event/sections/AnchorEventTagsSection.vue
@@ -23,25 +23,25 @@
           span="full"
         >
           <template #actions>
-            <Button
-              appearance="pill"
-              tone="outline"
+            <PuButton
+              shape="pill"
+              tone="neutral" variant="outline"
               size="sm"
-              type="button"
+
               :disabled="isPoolSaving"
               @click="addPreferenceTag"
             >
               {{ t("adminAnchorEvents.addPreferenceTagAction") }}
-            </Button>
-            <Button
-              appearance="pill"
+            </PuButton>
+            <PuButton
+              shape="pill"
               size="sm"
-              type="button"
+
               :loading="isPoolSaving"
               @click="savePreferenceTags"
             >
               {{ t("adminAnchorEvents.savePreferenceTagsAction") }}
-            </Button>
+            </PuButton>
           </template>
 
           <AnchorEventPreferenceTagPoolEditor
@@ -68,11 +68,11 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
-import Button from "@/shared/ui/actions/Button.vue";
 import BentoItem from "@/domains/admin/ui/layout/BentoItem.vue";
 import BentoLayout from "@/domains/admin/ui/layout/BentoLayout.vue";
 import AnchorEventPendingPreferenceTagList from "@/domains/admin/ui/anchor-event/components/AnchorEventPendingPreferenceTagList.vue";
 import AnchorEventPreferenceTagPoolEditor from "@/domains/admin/ui/anchor-event/components/AnchorEventPreferenceTagPoolEditor.vue";
+import { PuButton } from "@partner-up-dev/design-web";
 
 type PreferenceTagPoolEditorExposed = {
   addRow: () => void;
diff --git a/apps/frontend/src/domains/admin/ui/anchor-event/sections/AnchorEventTimeSection.vue b/apps/frontend/src/domains/admin/ui/anchor-event/sections/AnchorEventTimeSection.vue
index 31c32ffab..539d18985 100644
--- a/apps/frontend/src/domains/admin/ui/anchor-event/sections/AnchorEventTimeSection.vue
+++ b/apps/frontend/src/domains/admin/ui/anchor-event/sections/AnchorEventTimeSection.vue
@@ -10,24 +10,24 @@
         span="full"
       >
         <template #actions>
-          <Button
-            appearance="pill"
-            tone="outline"
+          <PuButton
+            shape="pill"
+            tone="neutral" variant="outline"
             size="sm"
-            type="button"
+
             @click="previewOpen = true"
           >
             {{ t("adminAnchorEvents.previewTimeWindowsAction") }}
-          </Button>
-          <Button
-            appearance="pill"
+          </PuButton>
+          <PuButton
+            shape="pill"
             size="sm"
-            type="button"
+
             :disabled="saveDisabled"
             @click="$emit('save')"
           >
             {{ saveLabel }}
-          </Button>
+          </PuButton>
         </template>
 
         <AnchorEventTimePoolStrategyEditor
@@ -57,15 +57,15 @@
         />
 
         <div class="modal-actions">
-          <Button
-            appearance="pill"
-            tone="outline"
+          <PuButton
+            shape="pill"
+            tone="neutral" variant="outline"
             size="sm"
-            type="button"
+
             @click="previewOpen = false"
           >
             {{ t("common.close") }}
-          </Button>
+          </PuButton>
         </div>
       </PuModal>
     </BentoLayout>
@@ -73,10 +73,9 @@
 </template>
 
 <script setup lang="ts">
-import { PuModal } from "@partner-up-dev/design-web";
+import { PuButton, PuModal } from "@partner-up-dev/design-web";
 import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
-import Button from "@/shared/ui/actions/Button.vue";
 import BentoItem from "@/domains/admin/ui/layout/BentoItem.vue";
 import BentoLayout from "@/domains/admin/ui/layout/BentoLayout.vue";
 import AnchorEventParticipationPolicyEditor from "@/domains/admin/ui/anchor-event/components/AnchorEventParticipationPolicyEditor.vue";
diff --git a/apps/frontend/src/domains/admin/ui/navigation/AdminNavigationPanel.vue b/apps/frontend/src/domains/admin/ui/navigation/AdminNavigationPanel.vue
index 33293d082..c03d7e367 100644
--- a/apps/frontend/src/domains/admin/ui/navigation/AdminNavigationPanel.vue
+++ b/apps/frontend/src/domains/admin/ui/navigation/AdminNavigationPanel.vue
@@ -79,17 +79,17 @@
       </section>
     </nav>
 
-    <Button
+    <PuButton
       v-if="showLogout"
       v-show="!isPanelCollapsed"
-      appearance="pill"
-      tone="outline"
+      shape="pill"
+      tone="neutral" variant="outline"
       size="sm"
-      type="button"
+
       @click="$emit('logout')"
     >
       {{ t("adminCommon.logoutAction") }}
-    </Button>
+    </PuButton>
   </section>
 </template>
 
@@ -98,14 +98,13 @@ import { computed, ref, watch } from "vue";
 import { storeToRefs } from "pinia";
 import { useI18n } from "vue-i18n";
 import { useRoute, type RouteLocationRaw } from "vue-router";
-import Button from "@/shared/ui/actions/Button.vue";
 import {
   adminNavigationGroups,
   type AdminNavigationItem,
 } from "@/domains/admin/ui/navigation/adminNavigationModel";
 import { useAdminSessionStore } from "@/domains/admin/use-cases/useAdminSessionStore";
 import type { AdminSessionRole } from "@/domains/admin/model/admin-session-storage";
-import { PuCard } from "@partner-up-dev/design-web";
+import { PuButton, PuCard } from "@partner-up-dev/design-web";
 
 defineProps<{
   showLogout?: boolean;
diff --git a/apps/frontend/src/domains/admin/ui/poi/components/PoiSelectorRail.vue b/apps/frontend/src/domains/admin/ui/poi/components/PoiSelectorRail.vue
index 760bc43f4..3505d923d 100644
--- a/apps/frontend/src/domains/admin/ui/poi/components/PoiSelectorRail.vue
+++ b/apps/frontend/src/domains/admin/ui/poi/components/PoiSelectorRail.vue
@@ -28,11 +28,11 @@
           :placeholder="t('adminPois.newPoiPlaceholder')"
         />
       </label>
-      <Button
-        appearance="pill"
-        tone="outline"
+      <PuButton
+        shape="pill"
+        tone="neutral" variant="outline"
         size="sm"
-        type="button"
+
         :disabled="isCreatingPoi || !canCreatePoi"
         @click="emit('create-poi')"
       >
@@ -41,7 +41,7 @@
             ? t("adminPois.creatingPoi")
             : t("adminPois.createPoiAction")
         }}
-      </Button>
+      </PuButton>
     </section>
   </AdminRailPanel>
 </template>
@@ -50,7 +50,7 @@
 import { useI18n } from "vue-i18n";
 import type { AdminPoisResponse } from "@/domains/admin/queries/useAdminPoiManagement";
 import AdminRailPanel from "@/domains/admin/ui/layout/AdminRailPanel.vue";
-import Button from "@/shared/ui/actions/Button.vue";
+import { PuButton } from "@partner-up-dev/design-web";
 
 type PoiRecord = NonNullable<AdminPoisResponse>[number];
 type PoiStatus = PoiRecord["status"];
diff --git a/apps/frontend/src/domains/admin/ui/poi/sections/PoiBasicSection.vue b/apps/frontend/src/domains/admin/ui/poi/sections/PoiBasicSection.vue
index 05ab593c8..708777ead 100644
--- a/apps/frontend/src/domains/admin/ui/poi/sections/PoiBasicSection.vue
+++ b/apps/frontend/src/domains/admin/ui/poi/sections/PoiBasicSection.vue
@@ -7,17 +7,17 @@
       data-testid="admin-pois.section.basic"
     >
       <template #actions>
-        <Button
-          appearance="pill"
+        <PuButton
+          shape="pill"
           size="sm"
-          type="button"
+
           :disabled="selectedPoiId === null || isSavingPoi"
           @click="emit('save-poi')"
         >
           {{
             isSavingPoi ? t("adminPois.savingPoi") : t("adminPois.savePoiAction")
           }}
-        </Button>
+        </PuButton>
       </template>
 
       <p class="current-poi-meta">
@@ -39,11 +39,11 @@
           <div class="coordinate-field__header">
             <span class="field-label">{{ t("adminPois.coordinateLabel") }}</span>
             <div class="coordinate-field__actions">
-              <Button
-                appearance="pill"
-                tone="outline"
+              <PuButton
+                shape="pill"
+                tone="neutral" variant="outline"
                 size="sm"
-                type="button"
+
                 :disabled="selectedPoiId === null"
                 data-testid="admin-pois.pick-coordinate"
                 @click="isLocationPickerOpen = true"
@@ -52,13 +52,13 @@
                   <span class="i-mdi-map-marker-radius" />
                 </template>
                 {{ t("adminPois.pickCoordinateAction") }}
-              </Button>
-              <Button
+              </PuButton>
+              <PuButton
                 v-if="selectedPoiHasCoordinate"
-                appearance="pill"
-                tone="danger"
+                shape="pill"
+                tone="danger" variant="outline"
                 size="sm"
-                type="button"
+
                 :disabled="selectedPoiId === null"
                 data-testid="admin-pois.clear-coordinate"
                 @click="emit('clear-coordinates')"
@@ -67,7 +67,7 @@
                   <span class="i-mdi-map-marker-remove" />
                 </template>
                 {{ t("adminPois.clearCoordinateAction") }}
-              </Button>
+              </PuButton>
             </div>
           </div>
           <p class="coordinate-field__value">
@@ -106,16 +106,16 @@
             :disabled="selectedPoiId === null"
             @uploaded="emit('gallery-uploaded', $event)"
           />
-          <Button
-            appearance="pill"
-            tone="outline"
+          <PuButton
+            shape="pill"
+            tone="neutral" variant="outline"
             size="sm"
-            type="button"
+
             :disabled="selectedPoiId === null"
             @click="emit('add-manual-url')"
           >
             {{ t("adminPois.addUrlAction") }}
-          </Button>
+          </PuButton>
         </div>
       </div>
 
@@ -135,24 +135,24 @@
           />
           <p class="gallery-url">{{ imageUrl }}</p>
           <div class="gallery-actions">
-            <Button
-              appearance="pill"
-              tone="outline"
+            <PuButton
+              shape="pill"
+              tone="neutral" variant="outline"
               size="sm"
-              type="button"
+
               @click="copyGalleryUrl(imageUrl)"
             >
               {{ t("adminPois.copyUrlAction") }}
-            </Button>
-            <Button
-              appearance="pill"
-              tone="danger"
+            </PuButton>
+            <PuButton
+              shape="pill"
+              tone="danger" variant="outline"
               size="sm"
-              type="button"
+
               @click="emit('remove-gallery-image', index)"
             >
               {{ t("adminPois.removeImageAction") }}
-            </Button>
+            </PuButton>
           </div>
         </article>
       </div>
@@ -174,16 +174,16 @@
       </div>
 
       <div class="section-header">
-        <Button
-          appearance="pill"
-          tone="outline"
+        <PuButton
+          shape="pill"
+          tone="neutral" variant="outline"
           size="sm"
-          type="button"
+
           :disabled="selectedPoiId === null"
           @click="emit('add-availability-rule')"
         >
           {{ t("adminPois.addAvailabilityRuleAction") }}
-        </Button>
+        </PuButton>
       </div>
 
       <p v-if="selectedPoiAvailabilityRules.length === 0" class="hint">
@@ -199,14 +199,14 @@
           <strong>
             {{ t("adminPois.availabilityRuleTitle", { index: index + 1 }) }}
           </strong>
-          <Button
-            tone="danger"
+          <PuButton
+            tone="danger" variant="outline"
             size="sm"
-            type="button"
+
             @click="emit('remove-availability-rule', index)"
           >
             {{ t("adminPois.removeRuleAction") }}
-          </Button>
+          </PuButton>
         </div>
 
         <div class="grid">
@@ -382,8 +382,8 @@ import type { PickedLocation } from "@/domains/location/model/location-picker";
 import LocationPickerModal from "@/domains/location/ui/LocationPickerModal.vue";
 import BentoItem from "@/domains/admin/ui/layout/BentoItem.vue";
 import BentoLayout from "@/domains/admin/ui/layout/BentoLayout.vue";
-import Button from "@/shared/ui/actions/Button.vue";
 import ImageUrlInput from "@/shared/upload/ImageUrlInput.vue";
+import { PuButton } from "@partner-up-dev/design-web";
 
 type PoiRecord = NonNullable<AdminPoisResponse>[number];
 
diff --git a/apps/frontend/src/domains/admin/ui/poi/sections/PoiReviewSection.vue b/apps/frontend/src/domains/admin/ui/poi/sections/PoiReviewSection.vue
index 477a9077f..3e07979d5 100644
--- a/apps/frontend/src/domains/admin/ui/poi/sections/PoiReviewSection.vue
+++ b/apps/frontend/src/domains/admin/ui/poi/sections/PoiReviewSection.vue
@@ -44,11 +44,11 @@
           </label>
 
           <div class="action-row">
-            <Button
-              appearance="pill"
-              tone="outline"
+            <PuButton
+              shape="pill"
+              tone="neutral" variant="outline"
               size="sm"
-              type="button"
+
               :disabled="!canPublishPoi"
               :loading="isPublishingPoi"
               @click="emit('publish-poi')"
@@ -58,12 +58,12 @@
                   ? t("adminPois.publishingPoi")
                   : t("adminPois.publishPoiAction")
               }}
-            </Button>
-            <Button
-              appearance="pill"
-              tone="danger"
+            </PuButton>
+            <PuButton
+              shape="pill"
+              tone="danger" variant="outline"
               size="sm"
-              type="button"
+
               :disabled="!canRejectPoi"
               :loading="isRejectingPoi"
               @click="emit('reject-poi')"
@@ -73,7 +73,7 @@
                   ? t("adminPois.rejectingPoi")
                   : t("adminPois.rejectPoiAction")
               }}
-            </Button>
+            </PuButton>
           </div>
         </template>
       </div>
@@ -86,8 +86,7 @@ import { useI18n } from "vue-i18n";
 import type { AdminPoisResponse } from "@/domains/admin/queries/useAdminPoiManagement";
 import BentoItem from "@/domains/admin/ui/layout/BentoItem.vue";
 import BentoLayout from "@/domains/admin/ui/layout/BentoLayout.vue";
-import Button from "@/shared/ui/actions/Button.vue";
-import { PuTag } from "@partner-up-dev/design-web";
+import { PuButton, PuTag } from "@partner-up-dev/design-web";
 
 type PoiRecord = NonNullable<AdminPoisResponse>[number];
 type PoiStatus = PoiRecord["status"];
diff --git a/apps/frontend/src/domains/admin/ui/pr/components/PRFilterRail.vue b/apps/frontend/src/domains/admin/ui/pr/components/PRFilterRail.vue
index a2d4c2ea6..a2cac2daf 100644
--- a/apps/frontend/src/domains/admin/ui/pr/components/PRFilterRail.vue
+++ b/apps/frontend/src/domains/admin/ui/pr/components/PRFilterRail.vue
@@ -1,15 +1,15 @@
 <template>
   <AdminRailPanel :title="t('adminPR.filtersTitle')">
     <template v-if="showCreateAction" #actions>
-      <Button
-        appearance="pill"
-        tone="outline"
+      <PuButton
+        shape="pill"
+        tone="neutral" variant="outline"
         size="sm"
-        type="button"
+
         @click="emit('create-pr')"
       >
         {{ t("adminPR.newPRAction") }}
-      </Button>
+      </PuButton>
     </template>
 
     <label class="field">
@@ -55,7 +55,7 @@
 import { useI18n } from "vue-i18n";
 import type { AdminPRFilters } from "@/domains/admin/use-cases/pr/useAdminPRWorkspaceSelection";
 import AdminRailPanel from "@/domains/admin/ui/layout/AdminRailPanel.vue";
-import Button from "@/shared/ui/actions/Button.vue";
+import { PuButton } from "@partner-up-dev/design-web";
 
 defineProps<{
   showCreateAction?: boolean;
diff --git a/apps/frontend/src/domains/admin/ui/pr/views/AdminPRBasicView.vue b/apps/frontend/src/domains/admin/ui/pr/views/AdminPRBasicView.vue
index 7f978db59..f78ea4e63 100644
--- a/apps/frontend/src/domains/admin/ui/pr/views/AdminPRBasicView.vue
+++ b/apps/frontend/src/domains/admin/ui/pr/views/AdminPRBasicView.vue
@@ -300,11 +300,11 @@
                       </option>
                     </select>
                   </label>
-                  <Button
-                    appearance="pill"
-                    tone="outline"
+                  <PuButton
+                    shape="pill"
+                    tone="neutral" variant="outline"
                     size="sm"
-                    type="button"
+
                     :disabled="
                       selectedPRId === null ||
                       prFeedbackQuestionnaireUseCase.isPending.updateInstance
@@ -319,7 +319,7 @@
                         ? t("adminPR.saving")
                         : t("adminPR.saveFeedbackQuestionnaireInstanceAction")
                     }}
-                  </Button>
+                  </PuButton>
 
                   <label class="field">
                     <span class="field-label">
@@ -347,11 +347,11 @@
                       </option>
                     </select>
                   </label>
-                  <Button
-                    appearance="pill"
-                    tone="outline"
+                  <PuButton
+                    shape="pill"
+                    tone="neutral" variant="outline"
                     size="sm"
-                    type="button"
+
                     :disabled="
                       selectedPRId === null ||
                       mountFeedbackQuestionnaireTemplateId === null ||
@@ -365,14 +365,14 @@
                         ? t("adminPR.saving")
                         : t("adminPR.mountFeedbackQuestionnaireTemplateAction")
                     }}
-                  </Button>
+                  </PuButton>
                 </div>
 
                 <div class="actions actions--inline">
-                  <Button
-                    appearance="pill"
+                  <PuButton
+                    shape="pill"
                     size="sm"
-                    type="button"
+
                     :disabled="
                       isSavingPR ||
                       isDeletingPR ||
@@ -391,13 +391,13 @@
                           ? t("adminPR.createPRAction")
                           : t("adminPR.savePRAction")
                     }}
-                  </Button>
-                  <Button
+                  </PuButton>
+                  <PuButton
                     v-if="!isCreatingPR && selectedPR !== null"
-                    appearance="pill"
-                    tone="danger"
+                    shape="pill"
+                    tone="danger" variant="outline"
                     size="sm"
-                    type="button"
+
                     :disabled="isSavingPR || isDeletingPR"
                     @click="requestDeletePR(selectedPR.prId)"
                   >
@@ -406,7 +406,7 @@
                         ? t("adminPR.deletingPR")
                         : t("adminPR.deletePRAction")
                     }}
-                  </Button>
+                  </PuButton>
                 </div>
               </div>
             </BentoItem>
@@ -469,7 +469,6 @@ import {
   getPRRouteValidationIssue,
   type PRPlaceMode,
 } from "@/domains/pr/model/pr-route";
-import Button from "@/shared/ui/actions/Button.vue";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
 import TimelinePolicyPicker from "@/shared/ui/forms/TimelinePolicyPicker.vue";
 import PRJoinGateConfigEditor from "@/domains/pr/ui/forms/PRJoinGateConfigEditor.vue";
@@ -477,7 +476,7 @@ import PRPlaceModeField, {
   type PRPlaceModeFieldValue,
 } from "@/domains/pr/ui/forms/PRPlaceModeField.vue";
 import type { PRJoinGateConfig, PRRoute } from "@partner-up-dev/backend";
-import { PuCard, PuLoadingState, PuDialog } from "@partner-up-dev/design-web";
+import { PuButton, PuCard, PuLoadingState, PuDialog } from "@partner-up-dev/design-web";
 
 type PRForm = {
   title: string;
diff --git a/apps/frontend/src/domains/admin/ui/pr/views/AdminPRMessagesView.vue b/apps/frontend/src/domains/admin/ui/pr/views/AdminPRMessagesView.vue
index b7a04201e..3c4f12ffa 100644
--- a/apps/frontend/src/domains/admin/ui/pr/views/AdminPRMessagesView.vue
+++ b/apps/frontend/src/domains/admin/ui/pr/views/AdminPRMessagesView.vue
@@ -136,11 +136,11 @@
 
                         <div class="actions actions--inline">
                           <template v-if="editingMessageId === item.id">
-                            <Button
-                              appearance="pill"
-                              tone="outline"
+                            <PuButton
+                              shape="pill"
+                              tone="neutral" variant="outline"
                               size="sm"
-                              type="button"
+
                               :disabled="
                                 prMessagesActions.isPending.update.value ||
                                 editingMessageBody.trim().length === 0
@@ -152,38 +152,38 @@
                                   ? t("adminPRMessages.messageSaving")
                                   : t("adminPRMessages.saveEditAction")
                               }}
-                            </Button>
-                            <Button
-                              appearance="pill"
-                              tone="ghost"
+                            </PuButton>
+                            <PuButton
+                              shape="pill"
+                              tone="neutral" variant="ghost"
                               size="sm"
-                              type="button"
+
                               :disabled="
                                 prMessagesActions.isPending.update.value
                               "
                               @click="cancelEditMessage"
                             >
                               {{ t("common.cancel") }}
-                            </Button>
+                            </PuButton>
                           </template>
                           <template v-else>
-                            <Button
-                              appearance="pill"
-                              tone="outline"
+                            <PuButton
+                              shape="pill"
+                              tone="neutral" variant="outline"
                               size="sm"
-                              type="button"
+
                               :disabled="
                                 prMessagesActions.isPending.delete.value
                               "
                               @click="beginEditMessage(item.id, item.body)"
                             >
                               {{ t("adminPRMessages.editAction") }}
-                            </Button>
-                            <Button
-                              appearance="pill"
-                              tone="danger"
+                            </PuButton>
+                            <PuButton
+                              shape="pill"
+                              tone="danger" variant="outline"
                               size="sm"
-                              type="button"
+
                               :disabled="
                                 prMessagesActions.isPending.delete.value
                               "
@@ -194,7 +194,7 @@
                                   ? t("adminPRMessages.messageDeleting")
                                   : t("adminPRMessages.deleteAction")
                               }}
-                            </Button>
+                            </PuButton>
                           </template>
                         </div>
                       </div>
@@ -228,10 +228,10 @@
                   </p>
 
                   <div class="actions">
-                    <Button
-                      appearance="pill"
+                    <PuButton
+                      shape="pill"
                       size="sm"
-                      type="button"
+
                       :disabled="
                         prMessagesActions.isPending.create.value ||
                         messageDraftBody.trim().length === 0
@@ -243,7 +243,7 @@
                           ? t("adminPRMessages.messageSending")
                           : t("adminPRMessages.messageAction")
                       }}
-                    </Button>
+                    </PuButton>
                   </div>
                 </template>
               </div>
@@ -271,9 +271,8 @@ import {
 } from "@/domains/admin/queries/useAdminPRManagement";
 import { useAdminAccess } from "@/domains/admin/use-cases/useAdminAccess";
 import { formatLocalDateTimeValue } from "@/shared/datetime/formatLocalDateTime";
-import Button from "@/shared/ui/actions/Button.vue";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import { PuCard, PuLoadingState } from "@partner-up-dev/design-web";
+import { PuButton, PuCard, PuLoadingState } from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const { isAdmin, logout } = useAdminAccess();
diff --git a/apps/frontend/src/domains/commerce/ui/ButtonPlacement.vue b/apps/frontend/src/domains/commerce/ui/ButtonPlacement.vue
index 330bce657..50682b442 100644
--- a/apps/frontend/src/domains/commerce/ui/ButtonPlacement.vue
+++ b/apps/frontend/src/domains/commerce/ui/ButtonPlacement.vue
@@ -1,10 +1,10 @@
 <template>
   <div v-if="placement" class="button-placement">
-    <Button
-      appearance="rect"
-      tone="surface"
+    <PuButton
+      shape="rect"
+      tone="neutral" variant="soft"
       size="md"
-      type="button"
+
       data-testid="pr-detail.commerce-placement.open"
       @click="emit('placement-click', placement)"
     >
@@ -12,7 +12,7 @@
         <span class="i-mdi-storefront-outline"></span>
       </template>
       {{ placement.creative.ctaLabel }}
-    </Button>
+    </PuButton>
     <p v-if="placement.creative.description" class="button-placement__description">
       {{ placement.creative.description }}
     </p>
@@ -21,11 +21,11 @@
 
 <script setup lang="ts">
 import { computed, toRef } from "vue";
-import Button from "@/shared/ui/actions/Button.vue";
 import {
   usePlacementMatch,
   type PlacementInstanceProjection,
 } from "@/domains/commerce/queries/useCommerce";
+import { PuButton } from "@partner-up-dev/design-web";
 
 const props = defineProps<{
   matchingContext: unknown;
diff --git a/apps/frontend/src/domains/commerce/ui/ordering/OrderingFooterActionBar.vue b/apps/frontend/src/domains/commerce/ui/ordering/OrderingFooterActionBar.vue
index 7f32c0e57..04fd19283 100644
--- a/apps/frontend/src/domains/commerce/ui/ordering/OrderingFooterActionBar.vue
+++ b/apps/frontend/src/domains/commerce/ui/ordering/OrderingFooterActionBar.vue
@@ -17,7 +17,7 @@
       </button>
     </div>
 
-    <Button
+    <PuButton
       class="ordering-footer-action-bar__submit-action"
       size="md"
       :disabled="!canCreate"
@@ -26,13 +26,13 @@
       @click="$emit('create')"
     >
       {{ createLabel ?? t("ordering.createOrderAction") }}
-    </Button>
+    </PuButton>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useI18n } from "vue-i18n";
-import Button from "@/shared/ui/actions/Button.vue";
+import { PuButton } from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 
diff --git a/apps/frontend/src/domains/event/ui/composites/FormModeNoMatchResult.vue b/apps/frontend/src/domains/event/ui/composites/FormModeNoMatchResult.vue
index 7a9f783b1..5afebb58e 100644
--- a/apps/frontend/src/domains/event/ui/composites/FormModeNoMatchResult.vue
+++ b/apps/frontend/src/domains/event/ui/composites/FormModeNoMatchResult.vue
@@ -39,9 +39,9 @@
                 #trigger="{ open, pending, disabled, joined, errorMessage }"
               >
                 <div class="candidate-join-flow">
-                  <Button
-                    appearance="rect"
-                    type="button"
+                  <PuButton
+                    shape="rect"
+
                     block
                     data-testid="anchor-event-form-mode.candidate.join"
                     :data-pr-id="candidate.pr.id"
@@ -57,7 +57,7 @@
                         ? t("prPage.partnerSection.rosterJoined")
                         : t("anchorEvent.formMode.joinCandidateAction")
                     }}
-                  </Button>
+                  </PuButton>
                   <p
                     v-if="errorMessage"
                     class="inline-message inline-message--error"
@@ -82,10 +82,10 @@
     </section>
 
     <div v-if="props.showCreateFallback" class="no-match-actions">
-      <Button
-        appearance="rect"
-        tone="tertiary"
-        type="button"
+      <PuButton
+        shape="rect"
+        tone="tertiary" variant="solid"
+
         block
         data-testid="anchor-event-form-mode.create-fallback"
         :loading="props.createPending"
@@ -93,7 +93,7 @@
         @click="emit('create-fallback')"
       >
         {{ t("anchorEvent.formMode.createFallbackAction") }}
-      </Button>
+      </PuButton>
     </div>
 
     <p
@@ -113,9 +113,9 @@ import {
   formatFormModeTimeLabel,
   isValidFormModeDateTime,
 } from "@/domains/event/model/form-mode";
-import Button from "@/shared/ui/actions/Button.vue";
 import PRPreviewCard from "@/domains/pr/ui/primitives/PRPreviewCard.vue";
 import PRJoinAction from "@/domains/pr/ui/sections/PRJoinAction.vue";
+import { PuButton } from "@partner-up-dev/design-web";
 
 type RecommendationCandidate =
   AnchorEventFormModeRecommendationResponse["orderedCandidates"][number];
diff --git a/apps/frontend/src/domains/event/ui/controls/form-mode/FormModePreferenceControl.vue b/apps/frontend/src/domains/event/ui/controls/form-mode/FormModePreferenceControl.vue
index b776f768a..e7ab8d607 100644
--- a/apps/frontend/src/domains/event/ui/controls/form-mode/FormModePreferenceControl.vue
+++ b/apps/frontend/src/domains/event/ui/controls/form-mode/FormModePreferenceControl.vue
@@ -116,21 +116,21 @@
 
       <template #footer>
         <div class="drawer-actions">
-          <Button
-            appearance="pill"
-            tone="outline"
-            type="button"
+          <PuButton
+            shape="pill"
+            tone="neutral" variant="outline"
+
             @click="closePreferenceDrawer"
           >
             {{ t("common.cancel") }}
-          </Button>
-          <Button
-            appearance="pill"
-            type="button"
+          </PuButton>
+          <PuButton
+            shape="pill"
+
             @click="handleSavePreferenceDrawer"
           >
             {{ t("common.confirm") }}
-          </Button>
+          </PuButton>
         </div>
       </template>
     </PuDrawer>
@@ -146,12 +146,7 @@ import {
   derivePreferenceCategory,
 } from "@/domains/event/model/form-mode";
 import { useAnchorEventPreferenceTagSubmissions } from "@/domains/event/queries/useAnchorEventPreferenceTagSubmissions";
-import Button from "@/shared/ui/actions/Button.vue";
-import {
-  PuCell,
-  PuDrawer,
-  type PuDrawerCloseEvent,
-} from "@partner-up-dev/design-web";
+import { PuButton, PuCell, PuDrawer, type PuDrawerCloseEvent } from "@partner-up-dev/design-web";
 
 type FormModePresetTag = AnchorEventFormModeResponse["presetTags"][number];
 type PreferenceCell =
diff --git a/apps/frontend/src/domains/event/ui/primitives/EventPRCreateCard.vue b/apps/frontend/src/domains/event/ui/primitives/EventPRCreateCard.vue
index 5bc5b53a5..d68bedad8 100644
--- a/apps/frontend/src/domains/event/ui/primitives/EventPRCreateCard.vue
+++ b/apps/frontend/src/domains/event/ui/primitives/EventPRCreateCard.vue
@@ -37,9 +37,9 @@
 
         <p v-if="errorMessage" class="create-card__error">{{ errorMessage }}</p>
 
-        <Button
-          type="button"
-          appearance="pill"
+        <PuButton
+
+          shape="pill"
           size="sm"
           data-testid="anchor-event.create-card.create"
           :disabled="isCreateDisabled"
@@ -50,7 +50,7 @@
               ? t("anchorEvent.createCard.creatingAction")
               : t("anchorEvent.createCard.createAction")
           }}
-        </Button>
+        </PuButton>
       </div>
     </PuCard>
   </div>
@@ -60,8 +60,7 @@
 import { computed, ref, toRef, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import type { PRAllowEditAfterReady } from "@partner-up-dev/backend";
-import { PuCard } from "@partner-up-dev/design-web";
-import Button from "@/shared/ui/actions/Button.vue";
+import { PuButton, PuCard } from "@partner-up-dev/design-web";
 import AnchorEventAssistedPRTimeWindowInlineEditor from "@/domains/event/ui/controls/AnchorEventAssistedPRTimeWindowInlineEditor.vue";
 import AnchorEventInlinePlaceSelector from "@/domains/event/ui/controls/AnchorEventInlinePlaceSelector.vue";
 import type { TimeWindow } from "@/domains/event/model/time-window-view";
diff --git a/apps/frontend/src/domains/event/ui/surfaces/AnchorEventCardModeSurface/AnchorEventCardModeSurface.vue b/apps/frontend/src/domains/event/ui/surfaces/AnchorEventCardModeSurface/AnchorEventCardModeSurface.vue
index 0d1dc3030..b1f67aa7d 100644
--- a/apps/frontend/src/domains/event/ui/surfaces/AnchorEventCardModeSurface/AnchorEventCardModeSurface.vue
+++ b/apps/frontend/src/domains/event/ui/surfaces/AnchorEventCardModeSurface/AnchorEventCardModeSurface.vue
@@ -114,27 +114,27 @@
     </div>
 
     <div class="card-mode__actions">
-      <Button
-        type="button"
+      <PuButton
+
         class="card-mode__action"
-        appearance="pill"
-        tone="danger"
+        shape="pill"
+        tone="danger" variant="outline"
         data-testid="anchor-event-card-mode.skip"
         :disabled="resolvedIsCardRouting"
         @click="handleSkipActionClick"
       >
         {{ t("anchorEvent.card.skipButton") }}
-      </Button>
-      <Button
-        type="button"
+      </PuButton>
+      <PuButton
+
         class="card-mode__action"
-        appearance="pill"
+        shape="pill"
         data-testid="anchor-event-card-mode.detail"
         :disabled="resolvedIsCardRouting || !activeCardActionAvailable"
         @click="handleViewActionClick"
       >
         {{ activeCardPrimaryActionLabel }}
-      </Button>
+      </PuButton>
     </div>
 
     <p v-if="resolvedCardActionError" class="card-mode__error">
@@ -184,9 +184,9 @@
           {{ resolvedCardCreateErrorMessage }}
         </p>
 
-        <Button
-          type="button"
-          appearance="pill"
+        <PuButton
+
+          shape="pill"
           size="sm"
           data-testid="anchor-event-card-mode.empty-create"
           :disabled="isCardCreateDisabled"
@@ -197,7 +197,7 @@
               ? t("anchorEvent.createCard.creatingAction")
               : t("anchorEvent.createCard.createAction")
           }}
-        </Button>
+        </PuButton>
       </div>
 
       <OtherAnchorEventsSection
@@ -234,7 +234,6 @@ import AnchorEventBetaGroupCard from "@/domains/event/ui/primitives/AnchorEventB
 import OtherAnchorEventsSection from "@/domains/event/ui/sections/OtherAnchorEventsSection.vue";
 import AnchorEventInlinePlaceSelector from "@/domains/event/ui/controls/AnchorEventInlinePlaceSelector.vue";
 import AnchorEventAssistedPRTimeWindowInlineEditor from "@/domains/event/ui/controls/AnchorEventAssistedPRTimeWindowInlineEditor.vue";
-import Button from "@/shared/ui/actions/Button.vue";
 import { useAnchorEventDetail } from "@/domains/event/queries/useAnchorEventDetail";
 import { useAnchorEventDemandCards } from "@/domains/event/queries/useAnchorEventDemandCards";
 import {
@@ -281,6 +280,7 @@ import {
   type AnchorEventCardModeSurfaceProps,
   type FrontDemandCardHandle,
 } from "./AnchorEventCardModeSurface";
+import { PuButton } from "@partner-up-dev/design-web";
 
 const props = withDefaults(
   defineProps<AnchorEventCardModeSurfaceProps>(),
diff --git a/apps/frontend/src/domains/event/ui/surfaces/AnchorEventFormModeSurface.vue b/apps/frontend/src/domains/event/ui/surfaces/AnchorEventFormModeSurface.vue
index 7d3bfdcd7..96817a894 100644
--- a/apps/frontend/src/domains/event/ui/surfaces/AnchorEventFormModeSurface.vue
+++ b/apps/frontend/src/domains/event/ui/surfaces/AnchorEventFormModeSurface.vue
@@ -61,14 +61,14 @@
         </p>
 
         <div class="form-actions">
-          <Button
-            appearance="rect"
-            tone="outline"
-            type="button"
+          <PuButton
+            shape="rect"
+            tone="neutral" variant="outline"
+
             @click="handleViewAllSessions"
           >
             {{ t("anchorEvent.formMode.viewAllSessions") }}
-          </Button>
+          </PuButton>
 
           <FormModeLongPressButton
             :label="primaryCtaLabel"
@@ -108,7 +108,6 @@ import type {
   PartnerRequestFields,
   PRAllowEditAfterReady,
 } from "@partner-up-dev/backend";
-import Button from "@/shared/ui/actions/Button.vue";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
 import { trackEvent } from "@/shared/telemetry/track";
 import { resolveTelemetryFailurePayload } from "@/shared/telemetry/result";
@@ -155,7 +154,7 @@ import {
 import LiquidWaveSplash from "@/processes/route-handoff/LiquidWaveSplash.vue";
 import type { LiquidSplashPhase } from "@/processes/route-handoff/LiquidWaveSplash.vue";
 import { useMatchedPRHandoff } from "@/processes/route-handoff/useMatchedPRHandoff";
-import { PuLoadingState } from "@partner-up-dev/design-web";
+import { PuButton, PuLoadingState } from "@partner-up-dev/design-web";
 
 const props = defineProps<{
   eventId: number;
diff --git a/apps/frontend/src/domains/feedback/ui/FeedbackQuestionnaireForm.vue b/apps/frontend/src/domains/feedback/ui/FeedbackQuestionnaireForm.vue
index b0f7aa37b..40f12b5e2 100644
--- a/apps/frontend/src/domains/feedback/ui/FeedbackQuestionnaireForm.vue
+++ b/apps/frontend/src/domains/feedback/ui/FeedbackQuestionnaireForm.vue
@@ -74,22 +74,22 @@
     </p>
 
     <div class="feedback-form__actions">
-      <Button
-        type="submit"
+      <PuButton
+        :action="{ native: 'submit' }"
         :loading="pending"
         :disabled="pending"
         data-testid="pr-detail.feedback.submit"
       >
         {{ pending ? "提交中..." : "提交反馈" }}
-      </Button>
-      <Button
-        type="button"
-        tone="surface"
+      </PuButton>
+      <PuButton
+
+        tone="neutral" variant="soft"
         :disabled="pending"
         @click="$emit('cancel')"
       >
         稍后填写
-      </Button>
+      </PuButton>
     </div>
   </form>
 </template>
@@ -100,9 +100,8 @@ import type {
   FeedbackQuestionnaireAnswers,
   FeedbackQuestionnaireDefinition,
 } from "@partner-up-dev/backend";
-import Button from "@/shared/ui/actions/Button.vue";
 import ImageUrlInput from "@/shared/upload/ImageUrlInput.vue";
-import { PuFormItem, PuTextarea } from "@partner-up-dev/design-web";
+import { PuButton, PuFormItem, PuTextarea } from "@partner-up-dev/design-web";
 
 const props = defineProps<{
   instanceId: number;
diff --git a/apps/frontend/src/domains/landing/ui/sections/LandingWeChatAccessSection.vue b/apps/frontend/src/domains/landing/ui/sections/LandingWeChatAccessSection.vue
index ee50ac43a..925fca960 100644
--- a/apps/frontend/src/domains/landing/ui/sections/LandingWeChatAccessSection.vue
+++ b/apps/frontend/src/domains/landing/ui/sections/LandingWeChatAccessSection.vue
@@ -1,25 +1,25 @@
 <template>
   <section class="wechat-access-section" data-block="wechat-access">
     <div class="wechat-access-section__actions">
-      <Button
-        appearance="rect"
-        tone="outline"
+      <PuButton
+        shape="rect"
+        tone="neutral" variant="outline"
         size="md"
-        full-width
+        block
         @click="showOfficialAccountQrModal = true"
       >
         {{ t("home.landing.officialAccountAction") }}
-      </Button>
+      </PuButton>
 
-      <Button
-        appearance="rect"
-        tone="outline"
+      <PuButton
+        shape="rect"
+        tone="neutral" variant="outline"
         size="md"
-        full-width
+        block
         @click="showWebPageQrModal = true"
       >
         {{ t("home.landing.webPageQrAction") }}
-      </Button>
+      </PuButton>
     </div>
 
     <p class="wechat-access-section__hint">
@@ -40,9 +40,9 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { useI18n } from "vue-i18n";
-import Button from "@/shared/ui/actions/Button.vue";
 import LandingWebPageQrModal from "@/domains/landing/ui/sections/LandingWebPageQrModal.vue";
 import OfficialAccountQrModal from "@/shared/wechat/OfficialAccountQrModal.vue";
+import { PuButton } from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const showWebPageQrModal = ref(false);
diff --git a/apps/frontend/src/domains/location/ui/LocationPickerPanel.vue b/apps/frontend/src/domains/location/ui/LocationPickerPanel.vue
index bbcf7d5f8..a608149f2 100644
--- a/apps/frontend/src/domains/location/ui/LocationPickerPanel.vue
+++ b/apps/frontend/src/domains/location/ui/LocationPickerPanel.vue
@@ -44,24 +44,24 @@
     </div>
 
     <footer class="location-picker-panel__actions">
-      <Button
-        type="button"
-        tone="outline"
+      <PuButton
+
+        tone="neutral" variant="outline"
         size="sm"
         data-testid="location-picker.cancel"
         @click="emit('cancel')"
       >
         {{ t("common.cancel") }}
-      </Button>
-      <Button
-        type="button"
+      </PuButton>
+      <PuButton
+
         size="sm"
         :disabled="draftLocation === null"
         data-testid="location-picker.confirm"
         @click="confirmPick"
       >
         {{ t("common.confirm") }}
-      </Button>
+      </PuButton>
     </footer>
   </section>
 </template>
@@ -69,9 +69,8 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
-import Button from "@/shared/ui/actions/Button.vue";
 import type { RouteCoordinate } from "@/domains/route/model/route";
-import { PuInput } from "@partner-up-dev/design-web";
+import { PuButton, PuInput } from "@partner-up-dev/design-web";
 import {
   buildTencentLocationPickerUrl,
   clonePickedLocation,
diff --git a/apps/frontend/src/domains/marketing/ui/OfficialAccountFollowNudge.vue b/apps/frontend/src/domains/marketing/ui/OfficialAccountFollowNudge.vue
index 8f3797cf0..98aa684ea 100644
--- a/apps/frontend/src/domains/marketing/ui/OfficialAccountFollowNudge.vue
+++ b/apps/frontend/src/domains/marketing/ui/OfficialAccountFollowNudge.vue
@@ -20,20 +20,20 @@
       </div>
 
       <div class="nudge-actions">
-        <Button
-          appearance="pill"
-          tone="surface"
+        <PuButton
+          shape="pill"
+          tone="neutral" variant="soft"
           size="sm"
-          type="button"
+
           data-testid="official-account-follow-nudge.dismiss"
           @click="emit('dismiss')"
         >
           {{ t("officialAccountFollow.laterAction") }}
-        </Button>
-        <Button
-          appearance="pill"
+        </PuButton>
+        <PuButton
+          shape="pill"
           size="sm"
-          type="button"
+
           data-testid="official-account-follow-nudge.follow"
           @click="handleOpenOfficialAccountQr"
         >
@@ -41,7 +41,7 @@
             <span class="i-mdi-qrcode-scan" aria-hidden="true"></span>
           </template>
           {{ t("officialAccountFollow.followAction") }}
-        </Button>
+        </PuButton>
       </div>
     </aside>
   </Transition>
@@ -55,8 +55,8 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import { useI18n } from "vue-i18n";
-import Button from "@/shared/ui/actions/Button.vue";
 import OfficialAccountQrModal from "@/shared/wechat/OfficialAccountQrModal.vue";
+import { PuButton } from "@partner-up-dev/design-web";
 
 defineProps<{
   open: boolean;
@@ -150,7 +150,7 @@ const handleOpenOfficialAccountQr = (): void => {
     justify-content: stretch;
   }
 
-  .nudge-actions > :deep(.ui-button) {
+  .nudge-actions > :deep(.pu-button) {
     flex: 1 1 8rem;
   }
 }
diff --git a/apps/frontend/src/domains/pr/ui/composites/PRFactsCard.vue b/apps/frontend/src/domains/pr/ui/composites/PRFactsCard.vue
index e588fae60..693c59b3c 100644
--- a/apps/frontend/src/domains/pr/ui/composites/PRFactsCard.vue
+++ b/apps/frontend/src/domains/pr/ui/composites/PRFactsCard.vue
@@ -14,10 +14,10 @@
         :dividers="false"
       >
         <section v-if="showLocationSection" class="facts-entry">
-          <Button
+          <PuButton
             v-if="interactive && locationGalleryAvailable"
             class="facts-entry-button"
-            tone="ghost"
+            tone="neutral" variant="ghost"
             block
             @click="showLocationGalleryModal = true"
           >
@@ -35,7 +35,7 @@
                 />
               </span>
             </span>
-          </Button>
+          </PuButton>
 
           <PuDescriptionItem
             v-else
@@ -133,10 +133,10 @@
             {{ t("prCard.meetingPointPrivate") }}
           </PuDescriptionItem>
 
-          <Button
+          <PuButton
             v-else-if="interactive && meetingPointImageUrl"
             class="facts-entry-button"
-            tone="ghost"
+            tone="neutral" variant="ghost"
             block
             @click="showMeetingPointGalleryModal = true"
           >
@@ -154,7 +154,7 @@
                 />
               </span>
             </span>
-          </Button>
+          </PuButton>
 
           <PuDescriptionItem
             v-else
@@ -294,15 +294,7 @@ import { computed, nextTick, ref, watch } from "vue";
 import { RouterLink } from "vue-router";
 import { useI18n } from "vue-i18n";
 import type { PRId } from "@partner-up-dev/backend";
-import {
-  PuCard,
-  PuChip,
-  PuChipGroup,
-  PuDescriptionItem,
-  PuDescriptionList,
-  PuLoadingState,
-} from "@partner-up-dev/design-web";
-import Button from "@/shared/ui/actions/Button.vue";
+import { PuButton, PuCard, PuChip, PuChipGroup, PuDescriptionItem, PuDescriptionList, PuLoadingState } from "@partner-up-dev/design-web";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
 import PRLocationGalleryModal from "@/domains/pr/ui/modals/PRLocationGalleryModal.vue";
 import PRRouteMapModal from "@/domains/pr/ui/modals/PRRouteMapModal.vue";
@@ -524,7 +516,7 @@ watch(
   justify-content: flex-start;
 }
 
-.facts-entry-button:deep(.ui-button__label) {
+.facts-entry-button:deep(.pu-button__content) {
   width: 100%;
 }
 
diff --git a/apps/frontend/src/domains/pr/ui/composites/PRJoinGates.vue b/apps/frontend/src/domains/pr/ui/composites/PRJoinGates.vue
index 69a247a7f..abdfe24b4 100644
--- a/apps/frontend/src/domains/pr/ui/composites/PRJoinGates.vue
+++ b/apps/frontend/src/domains/pr/ui/composites/PRJoinGates.vue
@@ -8,23 +8,23 @@
         {{ activeGate.body }}
       </div>
       <div class="gate-actions">
-        <Button
-          tone="surface"
-          type="button"
+        <PuButton
+          tone="neutral" variant="soft"
+
           :disabled="interactionPending"
           data-testid="pr-detail.join-gate.join-notice.cancel"
           @click="emit('cancel')"
         >
           取消
-        </Button>
-        <Button
-          type="button"
+        </PuButton>
+        <PuButton
+
           :loading="interactionPending"
           data-testid="pr-detail.join-gate.join-notice.accept"
           @click="resolveJoinNotice(activeGate)"
         >
           同意
-        </Button>
+        </PuButton>
       </div>
     </template>
 
@@ -44,12 +44,12 @@
 import { computed, ref, watch, type Component } from "vue";
 import { useI18n } from "vue-i18n";
 import type { PRId } from "@partner-up-dev/backend";
-import Button from "@/shared/ui/actions/Button.vue";
 import {
   usePRJoinGates,
   type PRJoinGateProjectionItem,
   type ResolvePRJoinGateResponse,
 } from "@/domains/pr/queries/usePRJoinGates";
+import { PuButton } from "@partner-up-dev/design-web";
 
 type JoinNoticeGate = Extract<
   PRJoinGateProjectionItem,
diff --git a/apps/frontend/src/domains/pr/ui/composites/PRJoinSuccessPrompt.vue b/apps/frontend/src/domains/pr/ui/composites/PRJoinSuccessPrompt.vue
index 3487d4b08..bc76d75f5 100644
--- a/apps/frontend/src/domains/pr/ui/composites/PRJoinSuccessPrompt.vue
+++ b/apps/frontend/src/domains/pr/ui/composites/PRJoinSuccessPrompt.vue
@@ -5,14 +5,14 @@
         :confirmation-window-text="confirmationWindowText"
       />
 
-      <Button
-        tone="surface"
+      <PuButton
+        tone="neutral" variant="soft"
         block
         data-testid="pr-detail.join-success.confirmation-followup.done"
         @click="handleJoinConfirmationFollowupDone"
       >
         {{ t("prPage.joinSuccessSubscriptions.closeAction") }}
-      </Button>
+      </PuButton>
     </template>
 
     <template v-else-if="joinSuccessPromptStep === 'SUBSCRIPTIONS'">
@@ -41,14 +41,14 @@
         />
       </section>
 
-      <Button
-        tone="surface"
+      <PuButton
+        tone="neutral" variant="soft"
         block
         data-testid="pr-detail.join-success.done"
         @click="handleJoinSuccessSubscriptionDone"
       >
         {{ t("prPage.joinSuccessSubscriptions.closeAction") }}
-      </Button>
+      </PuButton>
     </template>
 
     <template v-else>
@@ -58,14 +58,14 @@
         :show-official-account="communityFollowupShowsOfficialAccount"
       />
       <div class="join-success-prompt__actions">
-        <Button
-          type="button"
+        <PuButton
+
           block
           data-testid="pr-detail.join-success.community-followup.done"
           @click="handleJoinCommunityFollowupDone"
         >
           {{ t("prPage.joinCommunityFollowup.closeAction") }}
-        </Button>
+        </PuButton>
       </div>
     </template>
   </div>
@@ -75,7 +75,6 @@
 import { computed, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import type { PRId } from "@partner-up-dev/backend";
-import Button from "@/shared/ui/actions/Button.vue";
 import APRNotificationSubscriptions from "@/shared/ui/sections/APRNotificationSubscriptions.vue";
 import type { WeChatNotificationKind } from "@/shared/wechat/useWeChatNotificationSubscriptionsPanel";
 import { useOfficialAccountFollowPrompt } from "@/domains/marketing/use-cases/useOfficialAccountFollowPrompt";
@@ -83,6 +82,7 @@ import { usePRDetail } from "@/domains/pr/queries/usePRDetail";
 import PRJoinConfirmationFollowupPanel from "@/domains/pr/ui/composites/PRJoinConfirmationFollowupPanel.vue";
 import PRJoinCommunityFollowupPanel from "@/domains/pr/ui/composites/PRJoinCommunityFollowupPanel.vue";
 import { formatLocalDateTimeValue } from "@/shared/datetime/formatLocalDateTime";
+import { PuButton } from "@partner-up-dev/design-web";
 
 type JoinSuccessPromptStep =
   | "CONFIRMATION_FOLLOWUP"
diff --git a/apps/frontend/src/domains/pr/ui/composites/PRWaitlistSuccessPrompt.vue b/apps/frontend/src/domains/pr/ui/composites/PRWaitlistSuccessPrompt.vue
index df5b8cdbd..f32a3989f 100644
--- a/apps/frontend/src/domains/pr/ui/composites/PRWaitlistSuccessPrompt.vue
+++ b/apps/frontend/src/domains/pr/ui/composites/PRWaitlistSuccessPrompt.vue
@@ -19,29 +19,29 @@
         />
       </WeChatNotificationSubscriptionsCard>
 
-      <Button
-        tone="surface"
+      <PuButton
+        tone="neutral" variant="soft"
         block
         data-testid="pr-detail.waitlist-success.done"
         @click="handleWaitlistSubscriptionDone"
       >
         {{ t("prPage.joinSuccessSubscriptions.closeAction") }}
-      </Button>
+      </PuButton>
     </template>
 
     <template v-else>
       <OfficialAccountFollowPanel />
       <div class="waitlist-success-prompt__actions">
-        <Button
-          tone="surface"
-          type="button"
+        <PuButton
+          tone="neutral" variant="soft"
+
           @click="handleCloseWaitlistOfficialAccountPrompt"
         >
           {{ t("officialAccountFollow.laterAction") }}
-        </Button>
-        <Button type="button" @click="handleWaitlistOfficialAccountDone">
+        </PuButton>
+        <PuButton @click="handleWaitlistOfficialAccountDone">
           {{ t("officialAccountFollow.doneAction") }}
-        </Button>
+        </PuButton>
       </div>
     </template>
   </div>
@@ -50,12 +50,12 @@
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
-import Button from "@/shared/ui/actions/Button.vue";
 import APRNotificationSubscriptions from "@/shared/ui/sections/APRNotificationSubscriptions.vue";
 import WeChatNotificationSubscriptionsCard from "@/shared/ui/sections/WeChatNotificationSubscriptionsCard.vue";
 import type { WeChatNotificationKind } from "@/shared/wechat/useWeChatNotificationSubscriptionsPanel";
 import OfficialAccountFollowPanel from "@/domains/marketing/ui/OfficialAccountFollowPanel.vue";
 import { useOfficialAccountFollowPrompt } from "@/domains/marketing/use-cases/useOfficialAccountFollowPrompt";
+import { PuButton } from "@partner-up-dev/design-web";
 
 type WaitlistPromptStep = "SUBSCRIPTIONS" | "OFFICIAL_ACCOUNT";
 
diff --git a/apps/frontend/src/domains/pr/ui/forms/DateTimeRangePicker.vue b/apps/frontend/src/domains/pr/ui/forms/DateTimeRangePicker.vue
index e21d3b249..aafee6e45 100644
--- a/apps/frontend/src/domains/pr/ui/forms/DateTimeRangePicker.vue
+++ b/apps/frontend/src/domains/pr/ui/forms/DateTimeRangePicker.vue
@@ -19,26 +19,26 @@
           />
         </div>
         <div class="time-actions">
-          <Button
-            type="button"
+          <PuButton
+
             class="clear-time"
-            tone="outline"
+            tone="neutral" variant="outline"
             size="sm"
             :disabled="!startTime"
             @click="clearStartTime"
           >
             {{ t("dateTimeRangePicker.clearTime") }}
-          </Button>
-          <Button
-            type="button"
+          </PuButton>
+          <PuButton
+
             class="clear-time"
-            tone="outline"
+            tone="neutral" variant="outline"
             size="sm"
             :disabled="!startDate && !startTime"
             @click="clearStart"
           >
             {{ t("dateTimeRangePicker.clear") }}
-          </Button>
+          </PuButton>
         </div>
       </div>
       <div class="time-block">
@@ -58,26 +58,26 @@
           />
         </div>
         <div class="time-actions">
-          <Button
-            type="button"
+          <PuButton
+
             class="clear-time"
-            tone="outline"
+            tone="neutral" variant="outline"
             size="sm"
             :disabled="!endTime"
             @click="clearEndTime"
           >
             {{ t("dateTimeRangePicker.clearTime") }}
-          </Button>
-          <Button
-            type="button"
+          </PuButton>
+          <PuButton
+
             class="clear-time"
-            tone="outline"
+            tone="neutral" variant="outline"
             size="sm"
             :disabled="!endDate && !endTime"
             @click="clearEnd"
           >
             {{ t("dateTimeRangePicker.clear") }}
-          </Button>
+          </PuButton>
         </div>
       </div>
     </div>
@@ -89,7 +89,7 @@
 import { computed, nextTick, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import type { PartnerRequestFields } from "@partner-up-dev/backend";
-import Button from "@/shared/ui/actions/Button.vue";
+import { PuButton } from "@partner-up-dev/design-web";
 
 type TimeWindow = PartnerRequestFields["time"];
 
diff --git a/apps/frontend/src/domains/pr/ui/forms/NLPRForm.vue b/apps/frontend/src/domains/pr/ui/forms/NLPRForm.vue
index 947be12f0..7539b1f84 100644
--- a/apps/frontend/src/domains/pr/ui/forms/NLPRForm.vue
+++ b/apps/frontend/src/domains/pr/ui/forms/NLPRForm.vue
@@ -39,9 +39,9 @@
       </div>
     </Field>
 
-    <Button type="submit" class="submit-action" :loading="isSubmitting" full-width>
+    <PuButton :action="{ native: 'submit' }" class="submit-action" :loading="isSubmitting" block>
       {{ t("nlForm.submit") }}
-    </Button>
+    </PuButton>
 
     <PuLoadingState v-if="isSubmitting" :message="t('nlForm.parsing')" />
 
@@ -64,10 +64,9 @@ import { useCreatePRFromNaturalLanguage } from "@/domains/pr/queries/usePRCreate
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
 import { useLandingRotatingTopic } from "@/domains/landing/use-cases/useLandingRotatingTopic";
 import { ensureAuthSessionBootstrapped } from "@/processes/auth/useAuthSessionBootstrap";
-import Button from "@/shared/ui/actions/Button.vue";
 import { useNaturalLanguageDraftStore } from "@/domains/pr/use-cases/useNaturalLanguageDraft";
 import { useWeChatVoiceInput } from "@/shared/wechat/useWeChatVoiceInput";
-import { PuLoadingState, PuTextarea } from "@partner-up-dev/design-web";
+import { PuButton, PuLoadingState, PuTextarea } from "@partner-up-dev/design-web";
 
 const getLocalWeekdayLabel = (date: Date): string => {
   return new Intl.DateTimeFormat(undefined, {
diff --git a/apps/frontend/src/domains/pr/ui/forms/PREditor.vue b/apps/frontend/src/domains/pr/ui/forms/PREditor.vue
index 346b88d5c..04b298eb8 100644
--- a/apps/frontend/src/domains/pr/ui/forms/PREditor.vue
+++ b/apps/frontend/src/domains/pr/ui/forms/PREditor.vue
@@ -47,11 +47,11 @@
         </span>
       </div>
 
-      <Button
+      <PuButton
         v-if="showAdvancedToggle"
-        type="button"
+
         class="advanced-toggle"
-        tone="dashed"
+        tone="neutral" variant="dashed"
         block
         data-testid="pr-editor.form.advanced-toggle"
         :aria-expanded="isAdvancedOpen"
@@ -62,7 +62,7 @@
             ? t("partnerRequestForm.advancedHide")
             : t("partnerRequestForm.advancedShow")
         }}
-      </Button>
+      </PuButton>
 
       <Transition name="advanced-fields">
         <div v-if="showBodyFields" class="advanced-section">
@@ -209,17 +209,12 @@ import {
   toUserUpdatePRContentFields,
 } from "@/domains/pr/model/types";
 import { clonePRFields, parseNullableNumber } from "@/domains/pr/model/form";
-import Button from "@/shared/ui/actions/Button.vue";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
 import { useUserSessionStore } from "@/shared/auth/useUserSessionStore";
 import { ensureAuthSessionBootstrapped } from "@/processes/auth/useAuthSessionBootstrap";
 import { trackEvent } from "@/shared/telemetry/track";
 import { formatLocalDateTimeWindowLabel } from "@/shared/datetime/formatLocalDateTime";
-import {
-  PuEmptyState,
-  PuLoadingState,
-  PuDialog,
-} from "@partner-up-dev/design-web";
+import { PuButton, PuEmptyState, PuLoadingState, PuDialog } from "@partner-up-dev/design-web";
 
 const props = defineProps<{
   prId?: number;
diff --git a/apps/frontend/src/domains/pr/ui/forms/PRJoinGateConfigEditor.vue b/apps/frontend/src/domains/pr/ui/forms/PRJoinGateConfigEditor.vue
index 09e433f08..dc8768b32 100644
--- a/apps/frontend/src/domains/pr/ui/forms/PRJoinGateConfigEditor.vue
+++ b/apps/frontend/src/domains/pr/ui/forms/PRJoinGateConfigEditor.vue
@@ -8,15 +8,15 @@
         </p>
       </div>
       <div class="join-gate-editor__actions">
-        <Button
-          appearance="pill"
-          tone="outline"
+        <PuButton
+          shape="pill"
+          tone="neutral" variant="outline"
           size="sm"
-          type="button"
+
           @click="addJoinNotice"
         >
           添加 Join Notice
-        </Button>
+        </PuButton>
       </div>
     </div>
 
@@ -31,15 +31,15 @@
     >
       <div class="join-gate-row__header">
         <strong>{{ gate.kind }}</strong>
-        <Button
-          appearance="pill"
-          tone="danger"
+        <PuButton
+          shape="pill"
+          tone="danger" variant="outline"
           size="sm"
-          type="button"
+
           @click="removeGate(index)"
         >
           删除
-        </Button>
+        </PuButton>
       </div>
 
       <div class="join-gate-row__grid">
@@ -88,7 +88,7 @@ import type {
   PRJoinGateSource,
   PRJoinNoticeGateConfig,
 } from "@partner-up-dev/backend";
-import Button from "@/shared/ui/actions/Button.vue";
+import { PuButton } from "@partner-up-dev/design-web";
 
 const props = defineProps<{
   modelValue: PRJoinGateConfig;
diff --git a/apps/frontend/src/domains/pr/ui/gates/PRJoinFallbackConfirmGate.vue b/apps/frontend/src/domains/pr/ui/gates/PRJoinFallbackConfirmGate.vue
index 5cd623dfd..66c64ed93 100644
--- a/apps/frontend/src/domains/pr/ui/gates/PRJoinFallbackConfirmGate.vue
+++ b/apps/frontend/src/domains/pr/ui/gates/PRJoinFallbackConfirmGate.vue
@@ -3,28 +3,28 @@
     <p class="fallback-gate__text">确认加入当前活动？</p>
     <p class="fallback-gate__text">加入后即可按流程完成确认与签到。</p>
     <div class="fallback-gate__actions">
-      <Button
-        tone="surface"
-        type="button"
+      <PuButton
+        tone="neutral" variant="soft"
+
         :disabled="pending"
         @click="emit('cancel')"
       >
         取消
-      </Button>
-      <Button
-        type="button"
+      </PuButton>
+      <PuButton
+
         :loading="pending"
         data-testid="pr-detail.join.confirm"
         @click="emit('confirm')"
       >
         确认加入
-      </Button>
+      </PuButton>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import Button from "@/shared/ui/actions/Button.vue";
+import { PuButton } from "@partner-up-dev/design-web";
 
 defineProps<{
   pending: boolean;
diff --git a/apps/frontend/src/domains/pr/ui/gates/PRWaitlistFallbackConfirmGate.vue b/apps/frontend/src/domains/pr/ui/gates/PRWaitlistFallbackConfirmGate.vue
index 6a29488b9..ea1b454c0 100644
--- a/apps/frontend/src/domains/pr/ui/gates/PRWaitlistFallbackConfirmGate.vue
+++ b/apps/frontend/src/domains/pr/ui/gates/PRWaitlistFallbackConfirmGate.vue
@@ -3,28 +3,28 @@
     <p class="fallback-gate__text">确认提交候补？</p>
     <p class="fallback-gate__text">候补成功后会按提交时间顺序等待补位。</p>
     <div class="fallback-gate__actions">
-      <Button
-        tone="surface"
-        type="button"
+      <PuButton
+        tone="neutral" variant="soft"
+
         :disabled="pending"
         @click="emit('cancel')"
       >
         取消
-      </Button>
-      <Button
-        type="button"
+      </PuButton>
+      <PuButton
+
         :loading="pending"
         data-testid="pr-detail.waitlist.confirm"
         @click="emit('confirm')"
       >
         确认候补
-      </Button>
+      </PuButton>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import Button from "@/shared/ui/actions/Button.vue";
+import { PuButton } from "@partner-up-dev/design-web";
 
 defineProps<{
   pending: boolean;
diff --git a/apps/frontend/src/domains/pr/ui/modals/PRLocationGalleryModal.vue b/apps/frontend/src/domains/pr/ui/modals/PRLocationGalleryModal.vue
index 0cc9cfe97..5ec127c17 100644
--- a/apps/frontend/src/domains/pr/ui/modals/PRLocationGalleryModal.vue
+++ b/apps/frontend/src/domains/pr/ui/modals/PRLocationGalleryModal.vue
@@ -20,15 +20,15 @@
         />
 
         <div class="controls">
-          <Button
-            appearance="pill"
+          <PuButton
+            shape="pill"
             size="sm"
-            type="button"
+
             :disabled="images.length <= 1"
             @click="goPrev"
           >
             {{ t("prCard.locationGallery.prev") }}
-          </Button>
+          </PuButton>
 
           <span class="counter">
             {{
@@ -39,15 +39,15 @@
             }}
           </span>
 
-          <Button
-            appearance="pill"
+          <PuButton
+            shape="pill"
             size="sm"
-            type="button"
+
             :disabled="images.length <= 1"
             @click="goNext"
           >
             {{ t("prCard.locationGallery.next") }}
-          </Button>
+          </PuButton>
         </div>
       </template>
     </div>
@@ -55,10 +55,9 @@
 </template>
 
 <script setup lang="ts">
-import { PuModal } from "@partner-up-dev/design-web";
+import { PuButton, PuModal } from "@partner-up-dev/design-web";
 import { ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
-import Button from "@/shared/ui/actions/Button.vue";
 
 interface PRLocationGalleryModalProps {
   open: boolean;
diff --git a/apps/frontend/src/domains/pr/ui/modals/PRRosterModal.vue b/apps/frontend/src/domains/pr/ui/modals/PRRosterModal.vue
index 307169c23..81775d81e 100644
--- a/apps/frontend/src/domains/pr/ui/modals/PRRosterModal.vue
+++ b/apps/frontend/src/domains/pr/ui/modals/PRRosterModal.vue
@@ -3,17 +3,16 @@
     <div class="roster-modal">
       <PRAwarenessLane :pr-id="prId" :section="section" />
 
-      <Button tone="surface" block @click="emit('close')">
+      <PuButton tone="neutral" variant="soft" block @click="emit('close')">
         {{ t("common.close") }}
-      </Button>
+      </PuButton>
     </div>
   </PuModal>
 </template>
 
 <script setup lang="ts">
-import { PuModal } from "@partner-up-dev/design-web";
+import { PuButton, PuModal } from "@partner-up-dev/design-web";
 import { useI18n } from "vue-i18n";
-import Button from "@/shared/ui/actions/Button.vue";
 import PRAwarenessLane from "@/domains/pr/ui/sections/PRAwarenessLane.vue";
 import type { PRPartnerSectionView } from "@/domains/pr/model/types";
 
diff --git a/apps/frontend/src/domains/pr/ui/sections/AnchorAttendancePanel.vue b/apps/frontend/src/domains/pr/ui/sections/AnchorAttendancePanel.vue
index 3a2a0641c..73894ca94 100644
--- a/apps/frontend/src/domains/pr/ui/sections/AnchorAttendancePanel.vue
+++ b/apps/frontend/src/domains/pr/ui/sections/AnchorAttendancePanel.vue
@@ -1,30 +1,30 @@
 <template>
   <section v-if="(hasJoined && canConfirm) || (hasJoined && canCheckIn)" class="actions">
-    <Button
+    <PuButton
       v-if="hasJoined && canConfirm"
       class="confirm-slot-action"
-      tone="primary-outline"
+      tone="primary" variant="outline"
       @click="emit('confirm-slot')"
       :disabled="confirmPending"
     >
       {{ confirmPending ? t("prPage.confirmingSlot") : t("prPage.confirmSlot") }}
-    </Button>
+    </PuButton>
 
-    <Button
+    <PuButton
       v-if="hasJoined && canCheckIn"
       class="checkin-attended-action"
-      tone="tertiary"
+      tone="tertiary" variant="solid"
       @click="emit('submit-check-in')"
       :disabled="checkInPending"
     >
       {{ checkInPending ? t("prPage.checkingIn") : t("prPage.checkInAttended") }}
-    </Button>
+    </PuButton>
   </section>
 </template>
 
 <script setup lang="ts">
 import { useI18n } from "vue-i18n";
-import Button from "@/shared/ui/actions/Button.vue";
+import { PuButton } from "@partner-up-dev/design-web";
 
 defineProps<{
   hasJoined: boolean;
diff --git a/apps/frontend/src/domains/pr/ui/sections/PRBetaGroupAction.vue b/apps/frontend/src/domains/pr/ui/sections/PRBetaGroupAction.vue
index b4a150c17..4ccc87f4d 100644
--- a/apps/frontend/src/domains/pr/ui/sections/PRBetaGroupAction.vue
+++ b/apps/frontend/src/domains/pr/ui/sections/PRBetaGroupAction.vue
@@ -4,14 +4,14 @@
     class="utility-action-cell"
     data-region="beta-group"
   >
-    <Button
-      tone="outline"
+    <PuButton
+      tone="neutral" variant="outline"
       block
       data-testid="pr-detail.beta-group.open"
       @click="handleOpenBetaGroupModal"
     >
       {{ t("prPage.betaGroupEntry.action") }}
-    </Button>
+    </PuButton>
 
     <PuModal :open="showBetaGroupModal" @close="showBetaGroupModal = false">
       <AnchorEventBetaGroupQrPanel
@@ -23,11 +23,10 @@
 </template>
 
 <script setup lang="ts">
-import { PuModal } from "@partner-up-dev/design-web";
+import { PuButton, PuModal } from "@partner-up-dev/design-web";
 import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import type { PRDetailView } from "@/domains/pr/model/types";
-import Button from "@/shared/ui/actions/Button.vue";
 import AnchorEventBetaGroupQrPanel from "@/domains/event/ui/primitives/AnchorEventBetaGroupQrPanel.vue";
 import { trackEvent } from "@/shared/telemetry/track";
 
diff --git a/apps/frontend/src/domains/pr/ui/sections/PRCheckInFeedbackActions.vue b/apps/frontend/src/domains/pr/ui/sections/PRCheckInFeedbackActions.vue
index 6019e5488..90f00b301 100644
--- a/apps/frontend/src/domains/pr/ui/sections/PRCheckInFeedbackActions.vue
+++ b/apps/frontend/src/domains/pr/ui/sections/PRCheckInFeedbackActions.vue
@@ -6,9 +6,9 @@
     data-testid="pr-detail.check-in-feedback-actions"
   >
     <div v-if="showCheckInAction" class="action-group">
-      <Button
+      <PuButton
         class="action-group__button"
-        tone="primary"
+        tone="primary" variant="solid"
         :disabled="!viewer.canCheckIn"
         :loading="attendanceActions.checkInPending.value"
         block
@@ -20,22 +20,22 @@
             ? t("prPage.checkingIn")
             : t("prPage.checkInAttended")
         }}
-      </Button>
+      </PuButton>
       <p v-if="checkInTip" class="action-tip">
         {{ checkInTip }}
       </p>
     </div>
 
     <div v-if="showFeedbackRetryAction" class="action-group">
-      <Button
+      <PuButton
         class="action-group__button"
-        tone="primary"
+        tone="primary" variant="solid"
         block
         data-testid="pr-detail.feedback.open"
         @click="openFeedbackQuestionnaire"
       >
         {{ t("prPage.feedbackQuestionnaire.openAction") }}
-      </Button>
+      </PuButton>
     </div>
 
     <p v-if="primaryActionError" class="action-error">
@@ -57,7 +57,6 @@ import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import type { FeedbackQuestionnaireAnswers } from "@partner-up-dev/backend";
 import type { PRDetailView } from "@/domains/pr/model/types";
-import Button from "@/shared/ui/actions/Button.vue";
 import { usePRAttendanceActions } from "@/domains/pr/use-cases/usePRAttendanceActions";
 import { useSubmitFeedbackQuestionnaire } from "@/domains/feedback/queries/useSubmitFeedbackQuestionnaire";
 import { usePRActionCopy } from "@/domains/pr/use-cases/usePRActionCopy";
@@ -66,6 +65,7 @@ import {
   usePRPrimaryActionImpression,
 } from "@/domains/pr/use-cases/usePRPrimaryActionTelemetry";
 import PRFeedbackQuestionnaireModal from "./PRFeedbackQuestionnaireModal.vue";
+import { PuButton } from "@partner-up-dev/design-web";
 
 const props = defineProps<{
   pr: PRDetailView;
diff --git a/apps/frontend/src/domains/pr/ui/sections/PRConfirmationAction.vue b/apps/frontend/src/domains/pr/ui/sections/PRConfirmationAction.vue
index a6480cc99..53dda7ec4 100644
--- a/apps/frontend/src/domains/pr/ui/sections/PRConfirmationAction.vue
+++ b/apps/frontend/src/domains/pr/ui/sections/PRConfirmationAction.vue
@@ -6,9 +6,9 @@
     data-testid="pr-detail.confirmation-action"
   >
     <div v-if="showConfirmAction" class="action-group">
-      <Button
+      <PuButton
         class="action-group__button"
-        tone="primary"
+        tone="primary" variant="solid"
         :disabled="!viewer.canConfirm"
         :loading="attendanceActions.confirmPending.value"
         block
@@ -20,7 +20,7 @@
             ? t("prPage.confirmingSlot")
             : t("prPage.confirmSlot")
         }}
-      </Button>
+      </PuButton>
       <p v-if="confirmTip" class="action-tip">
         {{ confirmTip }}
       </p>
@@ -36,7 +36,6 @@
 import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import type { PRDetailView } from "@/domains/pr/model/types";
-import Button from "@/shared/ui/actions/Button.vue";
 import { usePRAttendanceActions } from "@/domains/pr/use-cases/usePRAttendanceActions";
 import { usePRActionCopy } from "@/domains/pr/use-cases/usePRActionCopy";
 import {
@@ -44,6 +43,7 @@ import {
   usePRPrimaryActionImpression,
 } from "@/domains/pr/use-cases/usePRPrimaryActionTelemetry";
 import { useRegisterPRPendingReplayHandler } from "@/domains/pr/use-cases/usePRPendingWeChatReplay";
+import { PuButton } from "@partner-up-dev/design-web";
 
 const props = defineProps<{
   pr: PRDetailView;
diff --git a/apps/frontend/src/domains/pr/ui/sections/PRCreateFooterActions.vue b/apps/frontend/src/domains/pr/ui/sections/PRCreateFooterActions.vue
index 4ee8c3bbd..1a061b312 100644
--- a/apps/frontend/src/domains/pr/ui/sections/PRCreateFooterActions.vue
+++ b/apps/frontend/src/domains/pr/ui/sections/PRCreateFooterActions.vue
@@ -1,9 +1,9 @@
 <template>
   <footer class="page-footer">
-    <Button
+    <PuButton
       v-if="allowDraftSave"
-      tone="outline"
-      type="button"
+      tone="neutral" variant="outline"
+
       :disabled="pending"
       data-testid="pr-create.save-draft"
       @click="emit('submit-as', 'DRAFT')"
@@ -13,9 +13,9 @@
           ? t("createPage.savePending")
           : t("common.save")
       }}
-    </Button>
-    <Button
-      type="button"
+    </PuButton>
+    <PuButton
+
       :disabled="pending"
       data-testid="pr-create.publish"
       @click="emit('submit-as', 'PUBLISH')"
@@ -25,14 +25,14 @@
           ? t("createPage.createPending")
           : t("common.create")
       }}
-    </Button>
+    </PuButton>
   </footer>
 </template>
 
 <script setup lang="ts">
 import { useI18n } from "vue-i18n";
 import type { CreateSubmissionMode } from "@/domains/pr/model/pr-editor";
-import Button from "@/shared/ui/actions/Button.vue";
+import { PuButton } from "@partner-up-dev/design-web";
 
 defineProps<{
   pending: boolean;
diff --git a/apps/frontend/src/domains/pr/ui/sections/PRDraftPublishNotice.vue b/apps/frontend/src/domains/pr/ui/sections/PRDraftPublishNotice.vue
index 8e310a352..7c5d9c713 100644
--- a/apps/frontend/src/domains/pr/ui/sections/PRDraftPublishNotice.vue
+++ b/apps/frontend/src/domains/pr/ui/sections/PRDraftPublishNotice.vue
@@ -6,8 +6,8 @@
     :message="t('prPage.publishDraft.description')"
   >
     <template #actions>
-      <Button
-        type="button"
+      <PuButton
+
         data-testid="pr-detail.draft-publish.action"
         :loading="publishMutation.isPending.value"
         @click="handlePublishDraft"
@@ -17,7 +17,7 @@
             ? t("prPage.publishDraft.pending")
             : t("prPage.publishDraft.action")
         }}
-      </Button>
+      </PuButton>
     </template>
   </PuInlineNotice>
 </template>
@@ -27,11 +27,10 @@ import { computed } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
 import type { PRId } from "@partner-up-dev/backend";
-import Button from "@/shared/ui/actions/Button.vue";
 import type { PRDetailView } from "@/domains/pr/model/types";
 import { usePublishPR } from "@/domains/pr/queries/usePRPublish";
 import { useRegisterPRPendingReplayHandler } from "@/domains/pr/use-cases/usePRPendingWeChatReplay";
-import { PuInlineNotice, PuPageScaffold } from "@partner-up-dev/design-web";
+import { PuButton, PuInlineNotice, PuPageScaffold } from "@partner-up-dev/design-web";
 
 const props = defineProps<{
   prId: PRId | null;
diff --git a/apps/frontend/src/domains/pr/ui/sections/PRExitAction.vue b/apps/frontend/src/domains/pr/ui/sections/PRExitAction.vue
index 10c27aefa..946de8df2 100644
--- a/apps/frontend/src/domains/pr/ui/sections/PRExitAction.vue
+++ b/apps/frontend/src/domains/pr/ui/sections/PRExitAction.vue
@@ -6,8 +6,8 @@
     data-testid="pr-detail.exit-action"
   >
     <div class="action-group">
-      <Button
-        tone="danger"
+      <PuButton
+        tone="danger" variant="outline"
         :disabled="!viewer.canExit"
         :loading="exitMutation.isPending.value"
         block
@@ -15,7 +15,7 @@
         @click="requestExitWithConfirm"
       >
         {{ t("prPage.exit") }}
-      </Button>
+      </PuButton>
       <p v-if="exitBlockedTip" class="action-tip">
         {{ exitBlockedTip }}
       </p>
@@ -41,11 +41,10 @@
 </template>
 
 <script setup lang="ts">
-import { PuDialog } from "@partner-up-dev/design-web";
+import { PuButton, PuDialog } from "@partner-up-dev/design-web";
 import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import type { PRDetailView } from "@/domains/pr/model/types";
-import Button from "@/shared/ui/actions/Button.vue";
 import { useExitPR } from "@/domains/pr/queries/usePRActions";
 import { usePRActionCopy } from "@/domains/pr/use-cases/usePRActionCopy";
 import { useRegisterPRPendingReplayHandler } from "@/domains/pr/use-cases/usePRPendingWeChatReplay";
diff --git a/apps/frontend/src/domains/pr/ui/sections/PRJoinAction.vue b/apps/frontend/src/domains/pr/ui/sections/PRJoinAction.vue
index 44893d08d..8a22e8c38 100644
--- a/apps/frontend/src/domains/pr/ui/sections/PRJoinAction.vue
+++ b/apps/frontend/src/domains/pr/ui/sections/PRJoinAction.vue
@@ -30,9 +30,9 @@
     />
 
     <div v-if="showJoinAction" class="action-group">
-      <Button
+      <PuButton
         class="action-group__button"
-        tone="primary"
+        tone="primary" variant="solid"
         :disabled="openDisabled"
         :loading="flowPending"
         block
@@ -46,7 +46,7 @@
               ? t("prPage.joining")
               : t("prPage.join")
         }}
-      </Button>
+      </PuButton>
       <p v-if="joinFlowError" class="action-error">
         {{ joinFlowError }}
       </p>
@@ -87,7 +87,6 @@ import { useI18n } from "vue-i18n";
 import type { PRId } from "@partner-up-dev/backend";
 import type { PRDetailView } from "@/domains/pr/model/types";
 import type { PRJoinEntrySurface } from "@/domains/pr/model/pr-join-entry-context";
-import Button from "@/shared/ui/actions/Button.vue";
 import { useJoinPR } from "@/domains/pr/queries/usePRActions";
 import PRJoinGates from "@/domains/pr/ui/composites/PRJoinGates.vue";
 import PRJoinSuccessPrompt from "@/domains/pr/ui/composites/PRJoinSuccessPrompt.vue";
@@ -101,7 +100,7 @@ import { useRegisterPRPendingReplayHandler } from "@/domains/pr/use-cases/usePRP
 import type { ApiError } from "@/shared/api/error";
 import { trackEvent } from "@/shared/telemetry/track";
 import { resolveTelemetryFailurePayload } from "@/shared/telemetry/result";
-import { PuInlineNotice, PuModal } from "@partner-up-dev/design-web";
+import { PuButton, PuInlineNotice, PuModal } from "@partner-up-dev/design-web";
 
 type JoinSuccessPromptExpose = {
   close: () => void;
diff --git a/apps/frontend/src/domains/pr/ui/sections/PRMessageThread.vue b/apps/frontend/src/domains/pr/ui/sections/PRMessageThread.vue
index 01a274797..72471fcf4 100644
--- a/apps/frontend/src/domains/pr/ui/sections/PRMessageThread.vue
+++ b/apps/frontend/src/domains/pr/ui/sections/PRMessageThread.vue
@@ -111,8 +111,8 @@
     </PuFormItem>
 
     <div class="message-thread__actions">
-      <Button
-        tone="primary"
+      <PuButton
+        tone="primary" variant="solid"
         :loading="createMessageMutation.isPending.value"
         :disabled="!canSubmitMessage"
         @click="handleSubmitMessage"
@@ -122,7 +122,7 @@
             ? t("prPage.messageThread.submittingAction")
             : t("prPage.messageThread.submitAction")
         }}
-      </Button>
+      </PuButton>
     </div>
   </component>
 </template>
@@ -131,8 +131,7 @@
 import { computed, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import type { PRId } from "@partner-up-dev/backend";
-import { PuCard, PuEmptyState, PuFormItem, PuInlineNotice, PuTextarea } from "@partner-up-dev/design-web";
-import Button from "@/shared/ui/actions/Button.vue";
+import { PuButton, PuCard, PuEmptyState, PuFormItem, PuInlineNotice, PuTextarea } from "@partner-up-dev/design-web";
 import { formatLocalDateTimeValue } from "@/shared/datetime/formatLocalDateTime";
 import {
   useAdvancePRMessageReadMarker,
diff --git a/apps/frontend/src/domains/pr/ui/sections/PRMessageThreadAction.vue b/apps/frontend/src/domains/pr/ui/sections/PRMessageThreadAction.vue
index 379b5ff76..c0150c21d 100644
--- a/apps/frontend/src/domains/pr/ui/sections/PRMessageThreadAction.vue
+++ b/apps/frontend/src/domains/pr/ui/sections/PRMessageThreadAction.vue
@@ -4,14 +4,14 @@
     class="utility-action-cell"
     data-region="message-thread"
   >
-    <Button
-      tone="outline"
+    <PuButton
+      tone="neutral" variant="outline"
       block
       data-testid="pr-detail.message-thread.open"
       @click="handleOpenMessages"
     >
       {{ t("prPage.messageEntry.action") }}
-    </Button>
+    </PuButton>
   </div>
 </template>
 
@@ -20,8 +20,8 @@ import { computed } from "vue";
 import { useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
 import type { PRDetailView } from "@/domains/pr/model/types";
-import Button from "@/shared/ui/actions/Button.vue";
 import { prMessagesPath } from "@/domains/pr/routing/routes";
+import { PuButton } from "@partner-up-dev/design-web";
 
 const props = defineProps<{
   pr: PRDetailView;
diff --git a/apps/frontend/src/domains/pr/ui/sections/PRPairingCodeAction.vue b/apps/frontend/src/domains/pr/ui/sections/PRPairingCodeAction.vue
index 551ae1e2c..f4f286f77 100644
--- a/apps/frontend/src/domains/pr/ui/sections/PRPairingCodeAction.vue
+++ b/apps/frontend/src/domains/pr/ui/sections/PRPairingCodeAction.vue
@@ -5,10 +5,10 @@
     data-region="pairing-code-action"
     data-testid="pr-detail.pairing-code-action"
   >
-    <Button
-      tone="outline"
+    <PuButton
+      tone="neutral" variant="outline"
       block
-      type="button"
+
       data-testid="pr-detail.pairing-code.open"
       @click="handleOpenPairingCode"
     >
@@ -20,7 +20,7 @@
         ></span>
       </template>
       {{ t("prPage.pairingCodeEntry.action", { code: pairingCode }) }}
-    </Button>
+    </PuButton>
   </section>
 </template>
 
@@ -34,7 +34,7 @@ import {
   derivePRPairingIdentity,
 } from "@/domains/pr/model/pr-pairing-code";
 import { prPairingCodePath } from "@/domains/pr/routing/routes";
-import Button from "@/shared/ui/actions/Button.vue";
+import { PuButton } from "@partner-up-dev/design-web";
 
 const props = defineProps<{
   pr: PRDetailView;
diff --git a/apps/frontend/src/domains/pr/ui/sections/PRPartnerSection.vue b/apps/frontend/src/domains/pr/ui/sections/PRPartnerSection.vue
index 321e50f51..e9646c145 100644
--- a/apps/frontend/src/domains/pr/ui/sections/PRPartnerSection.vue
+++ b/apps/frontend/src/domains/pr/ui/sections/PRPartnerSection.vue
@@ -54,48 +54,48 @@
     </div>
 
     <div class="partner-section__actions">
-      <Button
+      <PuButton
         v-if="section.viewer.canJoin"
-        type="button"
+
         :disabled="joinPending"
         @click="emit('join')"
       >
         {{ joinPending ? t("prPage.joining") : t("prPage.join") }}
-      </Button>
+      </PuButton>
 
-      <Button
+      <PuButton
         v-if="section.viewer.canExit"
-        tone="danger"
-        type="button"
+        tone="danger" variant="outline"
+
         :disabled="exitPending"
         @click="emit('exit')"
       >
         {{ exitPending ? t("prPage.exiting") : t("prPage.exit") }}
-      </Button>
+      </PuButton>
 
-      <Button
+      <PuButton
         v-if="section.viewer.canConfirm"
-        tone="primary-outline"
-        type="button"
+        tone="primary" variant="outline"
+
         :disabled="confirmPending"
         @click="emit('confirm-slot')"
       >
         {{
           confirmPending ? t("prPage.confirmingSlot") : t("prPage.confirmSlot")
         }}
-      </Button>
+      </PuButton>
 
-      <Button
+      <PuButton
         v-if="section.viewer.canCheckIn"
-        tone="primary-outline"
-        type="button"
+        tone="primary" variant="outline"
+
         :disabled="checkInPending"
         @click="emit('submit-check-in')"
       >
         {{
           checkInPending ? t("prPage.checkingIn") : t("prPage.checkInAttended")
         }}
-      </Button>
+      </PuButton>
     </div>
 
     <p v-if="joinErrorMessage" class="partner-section__error-note">
@@ -195,9 +195,9 @@
 
       <p class="partner-section__note">{{ reminderHintText }}</p>
 
-      <Button
+      <PuButton
         v-if="canToggleReminder"
-        type="button"
+
         :disabled="reminderTogglePending"
         @click="emit('toggle-reminder')"
       >
@@ -208,16 +208,16 @@
               ? t("prPage.wechatReminder.disableAction")
               : t("prPage.wechatReminder.enableAction")
         }}
-      </Button>
+      </PuButton>
 
-      <Button
+      <PuButton
         v-else-if="isWeChatEnv && reminderConfigured && !reminderAuthenticated"
-        tone="surface"
-        type="button"
+        tone="neutral" variant="soft"
+
         @click="emit('go-wechat-login')"
       >
         {{ t("prPage.wechatReminder.loginAction") }}
-      </Button>
+      </PuButton>
     </section>
 
   </section>
@@ -229,8 +229,7 @@ import { useI18n } from "vue-i18n";
 import type { PRPartnerSectionView } from "@/domains/pr/model/types";
 import { prPartnerProfilePath } from "@/domains/pr/routing/routes";
 import PRRosterItem from "@/domains/pr/ui/primitives/PRRosterItem.vue";
-import Button from "@/shared/ui/actions/Button.vue";
-import { PuTag } from "@partner-up-dev/design-web";
+import { PuButton, PuTag } from "@partner-up-dev/design-web";
 import {
   formatFriendlyTimeWindowLabel,
   formatLocalDateTimeValue,
diff --git a/apps/frontend/src/domains/pr/ui/sections/PRShareAction.vue b/apps/frontend/src/domains/pr/ui/sections/PRShareAction.vue
index ab27fac08..d5b46f5aa 100644
--- a/apps/frontend/src/domains/pr/ui/sections/PRShareAction.vue
+++ b/apps/frontend/src/domains/pr/ui/sections/PRShareAction.vue
@@ -1,13 +1,13 @@
 <template>
   <div v-if="showShareAction" class="utility-action-group" data-region="share">
-    <Button
-      tone="outline"
+    <PuButton
+      tone="neutral" variant="outline"
       block
       data-testid="pr-detail.share.open"
       @click="showShareDrawer = true"
     >
       {{ t("prPage.shareEntry.action") }}
-    </Button>
+    </PuButton>
 
     <PuDrawer v-model:visible="showShareDrawer" title="分享邀请">
       <PRShareSection
@@ -23,13 +23,12 @@
 </template>
 
 <script setup lang="ts">
-import { PuDrawer } from "@partner-up-dev/design-web";
+import { PuButton, PuDrawer } from "@partner-up-dev/design-web";
 import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import type { PRDetailView } from "@/domains/pr/model/types";
 import type { PRShareData } from "@/domains/share/model/types";
 import type { ShareSpmRouteKey } from "@/shared/url/spm";
-import Button from "@/shared/ui/actions/Button.vue";
 import PRShareSection from "@/domains/pr/ui/sections/PRShareSection.vue";
 
 const props = defineProps<{
diff --git a/apps/frontend/src/domains/pr/ui/sections/PRStudySprintPomodoroAction.vue b/apps/frontend/src/domains/pr/ui/sections/PRStudySprintPomodoroAction.vue
index f3d9174b7..6077fb8d0 100644
--- a/apps/frontend/src/domains/pr/ui/sections/PRStudySprintPomodoroAction.vue
+++ b/apps/frontend/src/domains/pr/ui/sections/PRStudySprintPomodoroAction.vue
@@ -4,15 +4,15 @@
     class="utility-action-cell study-sprint-action"
     data-region="study-sprint-pomodoro"
   >
-    <Button
-      tone="outline"
+    <PuButton
+      tone="neutral" variant="outline"
       block
       :disabled="!canEnter"
       data-testid="pr-detail.study-sprint-pomodoro.open"
       @click="handleOpen"
     >
       {{ actionLabel }}
-    </Button>
+    </PuButton>
     <p
       v-if="!canEnter"
       class="action-tip"
@@ -27,7 +27,7 @@
 import { computed } from "vue";
 import { useRouter } from "vue-router";
 import type { PRDetailView } from "@/domains/pr/model/types";
-import Button from "@/shared/ui/actions/Button.vue";
+import { PuButton } from "@partner-up-dev/design-web";
 
 const props = defineProps<{
   pr: PRDetailView;
diff --git a/apps/frontend/src/domains/pr/ui/sections/PRWaitlistActions.vue b/apps/frontend/src/domains/pr/ui/sections/PRWaitlistActions.vue
index fbedaefcb..5025766f8 100644
--- a/apps/frontend/src/domains/pr/ui/sections/PRWaitlistActions.vue
+++ b/apps/frontend/src/domains/pr/ui/sections/PRWaitlistActions.vue
@@ -19,9 +19,9 @@
     />
 
     <div v-if="showWaitlistAction" class="action-group">
-      <Button
+      <PuButton
         class="action-group__button"
-        tone="primary"
+        tone="primary" variant="solid"
         :disabled="openDisabled"
         :loading="flowPending"
         block
@@ -35,15 +35,15 @@
               ? t("prPage.waitlisting")
               : t("prPage.waitlist")
         }}
-      </Button>
+      </PuButton>
       <p v-if="waitlistActionError" class="action-error">
         {{ waitlistActionError }}
       </p>
     </div>
 
     <div v-if="showCancelWaitlistAction" class="action-group">
-      <Button
-        tone="surface"
+      <PuButton
+        tone="neutral" variant="soft"
         :loading="cancelWaitlistMutation.isPending.value"
         block
         data-testid="pr-detail.waitlist.cancel"
@@ -54,7 +54,7 @@
             ? t("prPage.cancelWaitlisting")
             : t("prPage.cancelWaitlist")
         }}
-      </Button>
+      </PuButton>
       <p v-if="cancelWaitlistActionError" class="action-error">
         {{ cancelWaitlistActionError }}
       </p>
@@ -125,7 +125,6 @@ import { computed, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import type { PRDetailView } from "@/domains/pr/model/types";
 import type { PRJoinEntryContext } from "@/domains/pr/model/pr-join-entry-context";
-import Button from "@/shared/ui/actions/Button.vue";
 import {
   useCancelWaitlistPR,
   useWaitlistPR,
@@ -142,7 +141,7 @@ import { useRegisterPRPendingReplayHandler } from "@/domains/pr/use-cases/usePRP
 import type { ApiError } from "@/shared/api/error";
 import { resolveTelemetryFailurePayload } from "@/shared/telemetry/result";
 import { trackEvent } from "@/shared/telemetry/track";
-import { PuInlineNotice, PuModal, PuDialog } from "@partner-up-dev/design-web";
+import { PuButton, PuInlineNotice, PuModal, PuDialog } from "@partner-up-dev/design-web";
 
 type WaitlistSuccessPromptExpose = {
   close: () => void;
diff --git a/apps/frontend/src/domains/pr/ui/sections/SharedPRActionsBar.vue b/apps/frontend/src/domains/pr/ui/sections/SharedPRActionsBar.vue
index 26c756de8..37d183e33 100644
--- a/apps/frontend/src/domains/pr/ui/sections/SharedPRActionsBar.vue
+++ b/apps/frontend/src/domains/pr/ui/sections/SharedPRActionsBar.vue
@@ -7,48 +7,48 @@
     v-if="canJoin || canExit || showEditContentAction || showModifyStatusAction"
     class="actions"
   >
-    <Button
+    <PuButton
       v-if="canJoin"
-      type="button"
+
       :disabled="joinPending"
       @click="emit('join')"
     >
       {{ joinPending ? t("prPage.joining") : t("prPage.join") }}
-    </Button>
+    </PuButton>
 
-    <Button
+    <PuButton
       v-if="canExit"
-      tone="danger"
-      type="button"
+      tone="danger" variant="outline"
+
       :disabled="exitPending"
       @click="emit('exit')"
     >
       {{ exitPending ? t("prPage.exiting") : t("prPage.exit") }}
-    </Button>
+    </PuButton>
 
-    <Button
+    <PuButton
       v-if="showEditContentAction"
-      tone="surface"
-      type="button"
+      tone="neutral" variant="soft"
+
       @click="emit('edit-content')"
     >
       {{ t("prPage.editContent") }}
-    </Button>
+    </PuButton>
 
-    <Button
+    <PuButton
       v-if="showModifyStatusAction"
-      tone="surface"
-      type="button"
+      tone="neutral" variant="soft"
+
       @click="emit('modify-status')"
     >
       {{ t("prPage.modifyStatus") }}
-    </Button>
+    </PuButton>
   </section>
 </template>
 
 <script setup lang="ts">
 import { useI18n } from "vue-i18n";
-import Button from "@/shared/ui/actions/Button.vue";
+import { PuButton } from "@partner-up-dev/design-web";
 
 defineProps<{
   canJoin: boolean;
diff --git a/apps/frontend/src/domains/route/ui/RouteEditor.vue b/apps/frontend/src/domains/route/ui/RouteEditor.vue
index 7b07eb06f..4b2beff29 100644
--- a/apps/frontend/src/domains/route/ui/RouteEditor.vue
+++ b/apps/frontend/src/domains/route/ui/RouteEditor.vue
@@ -91,20 +91,20 @@
       </div>
 
       <div class="operations">
-        <Button
-          tone="surface"
+        <PuButton
+          tone="neutral" variant="soft"
           :disabled="!canOpenRouteMap"
           @click="openRouteMap"
         >
           {{ t("route.navigateAction") }}
-        </Button>
-        <Button
-          tone="tertiary"
+        </PuButton>
+        <PuButton
+          tone="tertiary" variant="solid"
           :disabled="!canAddWaypoint"
           @click="addWaypoint"
         >
           {{ t("route.addWaypoint") }}
-        </Button>
+        </PuButton>
       </div>
     </template>
 
@@ -134,7 +134,7 @@
 </template>
 
 <script setup lang="ts">
-import { PuModal } from "@partner-up-dev/design-web";
+import { PuButton, PuModal } from "@partner-up-dev/design-web";
 import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import LocationPickerModal from "@/domains/location/ui/LocationPickerModal.vue";
@@ -153,7 +153,6 @@ import {
   resolveRoutePointRole,
   swapRoutePointWithNeighbor,
 } from "@/domains/route/model/route";
-import Button from "@/shared/ui/actions/Button.vue";
 
 const props = withDefaults(
   defineProps<{
diff --git a/apps/frontend/src/domains/share/ui/composites/PRShareCarousel.vue b/apps/frontend/src/domains/share/ui/composites/PRShareCarousel.vue
index 01d9adb0f..eaaadd82f 100644
--- a/apps/frontend/src/domains/share/ui/composites/PRShareCarousel.vue
+++ b/apps/frontend/src/domains/share/ui/composites/PRShareCarousel.vue
@@ -1,31 +1,31 @@
 <template>
   <section class="share-pr">
     <div class="carousel-header">
-      <Button
+      <PuButton
         class="method-nav-action"
-        appearance="pill"
-        tone="ghost"
+        shape="pill"
+        tone="neutral" variant="ghost"
         size="sm"
-        type="button"
+
         @click="goToPrevMethod"
         :disabled="enabledMethods.length <= 1"
         :aria-label="t('share.prevMethodAria')"
       >
         <div class="i-mdi-chevron-left"></div>
-      </Button>
+      </PuButton>
       <h3 class="method-label">{{ currentMethod.label }}</h3>
-      <Button
+      <PuButton
         class="method-nav-action"
-        appearance="pill"
-        tone="ghost"
+        shape="pill"
+        tone="neutral" variant="ghost"
         size="sm"
-        type="button"
+
         @click="goToNextMethod"
         :disabled="enabledMethods.length <= 1"
         :aria-label="t('share.nextMethodAria')"
       >
         <div class="i-mdi-chevron-right"></div>
-      </Button>
+      </PuButton>
     </div>
 
     <div
@@ -76,12 +76,12 @@ import ShareAsLink from "@/domains/share/ui/methods/as-link/ShareAsLink.vue";
 import ShareToXiaohongshuMethod from "@/domains/share/ui/methods/xhs/ShareToXiaohongshu.vue";
 import ShareToWechatChatMethod from "@/domains/share/ui/methods/wechat/ShareToWechatChat.vue";
 import type { PRShareProps } from "@/domains/share/model/types";
-import Button from "@/shared/ui/actions/Button.vue";
 import {
   useShareCarousel,
   type ShareMethod,
   type ShareMethodId,
 } from "@/domains/share/use-cases/useShareCarousel";
+import { PuButton } from "@partner-up-dev/design-web";
 
 const props = withDefaults(
   defineProps<
diff --git a/apps/frontend/src/domains/share/ui/methods/as-link/ShareAsLink.vue b/apps/frontend/src/domains/share/ui/methods/as-link/ShareAsLink.vue
index f3352cc12..2fa4f3a2c 100644
--- a/apps/frontend/src/domains/share/ui/methods/as-link/ShareAsLink.vue
+++ b/apps/frontend/src/domains/share/ui/methods/as-link/ShareAsLink.vue
@@ -23,15 +23,15 @@
     </div>
 
     <div class="action-section">
-      <FeedbackButton
+      <PuButton
         class="share-action"
-        :state="feedbackState"
+        :feedback="feedbackState"
         :disabled="shareState !== 'idle'"
         block
         @click="handleShare"
       >
         {{ buttonLabel }}
-      </FeedbackButton>
+      </PuButton>
     </div>
   </div>
 </template>
@@ -41,8 +41,8 @@ import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { useShareAsLink } from "@/domains/share/use-cases/as-link/useShareAsLink";
 import { useQrPosterImageUrl } from "@/domains/share/use-cases/as-link/useQrPosterImageUrl";
-import FeedbackButton from "@/shared/ui/actions/FeedbackButton.vue";
 import type { ShareSpmRouteKey } from "@/shared/url/spm";
+import { PuButton } from "@partner-up-dev/design-web";
 
 interface Props {
   shareUrl: string;
diff --git a/apps/frontend/src/domains/share/ui/methods/wechat/ShareToWechatChat.vue b/apps/frontend/src/domains/share/ui/methods/wechat/ShareToWechatChat.vue
index a579de902..34e94df77 100644
--- a/apps/frontend/src/domains/share/ui/methods/wechat/ShareToWechatChat.vue
+++ b/apps/frontend/src/domains/share/ui/methods/wechat/ShareToWechatChat.vue
@@ -4,26 +4,26 @@
       <p class="mini-program-webview-state__text">
         {{ t("share.wechat.miniProgramWebViewHint") }}
       </p>
-      <Button
-        appearance="rect"
-        tone="primary-outline"
-        type="button"
+      <PuButton
+        shape="rect"
+        tone="primary" variant="outline"
+
         @click="showMiniProgramWebViewNotice = true"
       >
         {{ t("share.wechat.openInWechatAction") }}
-      </Button>
+      </PuButton>
     </div>
 
     <div v-else class="wechat-chat-method__body">
       <div class="options-section flex flex-col">
-        <Button
-          tone="outline"
-          type="button"
+        <PuButton
+          tone="neutral" variant="outline"
+
           @click="handleGenerateAndUpdate"
           :disabled="isWorking"
         >
           {{ switchButtonLabel }}
-        </Button>
+        </PuButton>
       </div>
 
       <div class="preview-section">
@@ -71,9 +71,9 @@ import { useI18n } from "vue-i18n";
 import type { PRShareProps } from "@/domains/share/model/types";
 import { useShareToWechatChat } from "@/domains/share/use-cases/wechat/useShareToWechatChat";
 import WechatChatPreview from "@/domains/share/ui/primitives/WechatChatPreview.vue";
-import Button from "@/shared/ui/actions/Button.vue";
 import { useWeChatMiniProgramWebView } from "@/shared/wechat/useWeChatMiniProgramWebView";
 import WeChatMiniProgramJssdkNoticeModal from "@/shared/wechat/WeChatMiniProgramJssdkNoticeModal.vue";
+import { PuButton } from "@partner-up-dev/design-web";
 
 const props = defineProps<PRShareProps>();
 const { t } = useI18n();
diff --git a/apps/frontend/src/domains/share/ui/methods/xhs/ShareToXiaohongshu.vue b/apps/frontend/src/domains/share/ui/methods/xhs/ShareToXiaohongshu.vue
index 8edfcee8b..d9f6a8123 100644
--- a/apps/frontend/src/domains/share/ui/methods/xhs/ShareToXiaohongshu.vue
+++ b/apps/frontend/src/domains/share/ui/methods/xhs/ShareToXiaohongshu.vue
@@ -2,9 +2,9 @@
   <div class="xiaohongshu-method">
     <!-- Options Section -->
     <div v-if="prData" class="options-section">
-      <Button
-        tone="outline"
-        type="button"
+      <PuButton
+        tone="neutral" variant="outline"
+
         block
         @click="handleRegenerate"
         :disabled="isCaptionGenerating"
@@ -14,7 +14,7 @@
             ? t("share.xiaohongshu.generating")
             : `🔄 ${t("share.xiaohongshu.regenerateButton")}`
         }}
-      </Button>
+      </PuButton>
     </div>
 
     <!-- Preview Section -->
@@ -67,28 +67,28 @@
     <!-- Actions Section -->
     <div class="action-section">
       <div class="actions-row">
-        <FeedbackButton
+        <PuButton
           class="outline-action caption-clipboard-action"
           variant="outline"
-          :state="copyFeedbackState"
+          :feedback="copyFeedbackState"
           :disabled="!caption?.caption || copyState !== 'idle'"
           @click="handleCopyCaptionWithUrl"
         >
           {{ copyButtonLabel }}
-        </FeedbackButton>
-        <Button
+        </PuButton>
+        <PuButton
           class="outline-action poster-download-action"
-          tone="outline"
+          tone="neutral" variant="outline"
           @click="handleDownloadPoster"
           :disabled="!caption?.caption || posterIsGenerating || inWeChatBrowser"
         >
           {{ downloadButtonLabel }}
-        </Button>
+        </PuButton>
       </div>
-      <Button type="button" block @click="handleOpenApp">
+      <PuButton block @click="handleOpenApp">
         {{ t("share.xiaohongshu.openAppButton") }}
         <div class="i-mdi-arrow-top-right"></div>
-      </Button>
+      </PuButton>
     </div>
   </div>
 </template>
@@ -98,8 +98,7 @@ import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 import type { PRShareProps } from "@/domains/share/model/types";
 import { useShareToXiaohongshu } from "@/domains/share/use-cases/xhs/useShareToXiaohongshu";
-import Button from "@/shared/ui/actions/Button.vue";
-import FeedbackButton from "@/shared/ui/actions/FeedbackButton.vue";
+import { PuButton } from "@partner-up-dev/design-web";
 
 const props = defineProps<PRShareProps>();
 const { t } = useI18n();
diff --git a/apps/frontend/src/domains/support/ui/sections/SupportContactAction.vue b/apps/frontend/src/domains/support/ui/sections/SupportContactAction.vue
index 14631684d..528e4b3cc 100644
--- a/apps/frontend/src/domains/support/ui/sections/SupportContactAction.vue
+++ b/apps/frontend/src/domains/support/ui/sections/SupportContactAction.vue
@@ -1,14 +1,14 @@
 <template>
-  <Button
+  <PuButton
     v-if="props.qrEntry"
     v-bind="attrs"
-    type="button"
-    appearance="pill"
+    shape="pill"
     :tone="props.tone"
+    variant="solid"
     @click="$emit('openQr')"
   >
     <slot />
-  </Button>
+  </PuButton>
   <PuButton
     v-else
     v-bind="attrs"
@@ -23,7 +23,6 @@
 
 <script setup lang="ts">
 import { useAttrs } from "vue";
-import Button from "@/shared/ui/actions/Button.vue";
 import { PuButton } from "@partner-up-dev/design-web";
 
 defineOptions({
diff --git a/apps/frontend/src/domains/support/ui/sections/SupportContactQrModal.vue b/apps/frontend/src/domains/support/ui/sections/SupportContactQrModal.vue
index b6b2fb9c1..6b53c8176 100644
--- a/apps/frontend/src/domains/support/ui/sections/SupportContactQrModal.vue
+++ b/apps/frontend/src/domains/support/ui/sections/SupportContactQrModal.vue
@@ -21,18 +21,17 @@
         {{ targetUrl }}
       </p>
 
-      <Button appearance="rect" type="button" block @click="emit('close')">
+      <PuButton shape="rect" block @click="emit('close')">
         {{ t("common.close") }}
-      </Button>
+      </PuButton>
     </div>
   </PuModal>
 </template>
 
 <script setup lang="ts">
-import { PuModal } from "@partner-up-dev/design-web";
+import { PuButton, PuModal } from "@partner-up-dev/design-web";
 import { computed, toRef } from "vue";
 import { useI18n } from "vue-i18n";
-import Button from "@/shared/ui/actions/Button.vue";
 import { useQrCodeDataUrl } from "@/shared/wechat/useQrCodeDataUrl";
 
 const props = defineProps<{
@@ -95,7 +94,7 @@ const { qrCodeDataUrl, qrCodeError } = useQrCodeDataUrl(openRef, targetUrlRef);
   overflow-wrap: anywhere;
 }
 
-.support-contact-qr-modal :deep(.ui-button) {
+.support-contact-qr-modal :deep(.pu-button) {
   width: 100%;
 }
 </style>
diff --git a/apps/frontend/src/pages/AboutPage.vue b/apps/frontend/src/pages/AboutPage.vue
index 1e5027087..1e4c2cec6 100644
--- a/apps/frontend/src/pages/AboutPage.vue
+++ b/apps/frontend/src/pages/AboutPage.vue
@@ -88,13 +88,13 @@
           </div>
         </div>
 
-        <Button
-          appearance="pill"
-          type="button"
+        <PuButton
+          shape="pill"
+
           @click="showOfficialAccountQrModal = true"
         >
           {{ t("home.landing.officialAccountAction") }}
-        </Button>
+        </PuButton>
       </section>
 
       <p
@@ -143,8 +143,7 @@ import { useAnchorEvents } from "@/domains/event/queries/useAnchorEvents";
 import { frontendBuildInfo } from "@/shared/meta/build-info";
 import { useBackendBuildMetadata } from "@/shared/meta/queries/useBackendBuildMetadata";
 import OfficialAccountQrModal from "@/shared/wechat/OfficialAccountQrModal.vue";
-import Button from "@/shared/ui/actions/Button.vue";
-import { PuPageScaffold, PuModal } from "@partner-up-dev/design-web";
+import { PuButton, PuPageScaffold, PuModal } from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const backendBuildMetadataQuery = useBackendBuildMetadata();
diff --git a/apps/frontend/src/pages/AdminAnalyticsPage.vue b/apps/frontend/src/pages/AdminAnalyticsPage.vue
index 3e112f8e7..017c6f8f3 100644
--- a/apps/frontend/src/pages/AdminAnalyticsPage.vue
+++ b/apps/frontend/src/pages/AdminAnalyticsPage.vue
@@ -115,10 +115,10 @@
         />
 
         <div class="analytics-filter-rail__actions">
-          <Button
-            appearance="rect"
-            tone="primary"
-            type="button"
+          <PuButton
+            shape="rect"
+            tone="primary" variant="solid"
+
             data-testid="admin-analytics.filters.apply"
             @click="applyFilters"
           >
@@ -126,11 +126,11 @@
               <span class="i-mdi-filter-check" aria-hidden="true"></span>
             </template>
             {{ t("adminAnalytics.applyFiltersAction") }}
-          </Button>
-          <Button
-            appearance="rect"
-            tone="outline"
-            type="button"
+          </PuButton>
+          <PuButton
+            shape="rect"
+            tone="neutral" variant="outline"
+
             data-testid="admin-analytics.filters.reset"
             @click="resetFilters"
           >
@@ -138,17 +138,17 @@
               <span class="i-mdi-refresh" aria-hidden="true"></span>
             </template>
             {{ t("adminAnalytics.resetFiltersAction") }}
-          </Button>
+          </PuButton>
         </div>
       </aside>
     </template>
 
     <template #actions>
-      <Button
-        appearance="pill"
-        tone="surface"
+      <PuButton
+        shape="pill"
+        tone="neutral" variant="soft"
         size="sm"
-        type="button"
+
         :loading="isDashboardRefreshing"
         data-testid="admin-analytics.refresh"
         @click="refreshDashboard"
@@ -157,7 +157,7 @@
           <span class="i-mdi-sync" aria-hidden="true"></span>
         </template>
         {{ t("adminAnalytics.refreshAction") }}
-      </Button>
+      </PuButton>
     </template>
 
     <template #main>
@@ -849,8 +849,7 @@ import {
   type AdminPRCreateFunnelResponse,
   type AdminPRJoinFunnelResponse,
 } from "@/domains/admin/queries/useAdminAnalytics";
-import Button from "@/shared/ui/actions/Button.vue";
-import { PuFormItem, PuInlineNotice, PuLoadingState } from "@partner-up-dev/design-web";
+import { PuButton, PuFormItem, PuInlineNotice, PuLoadingState } from "@partner-up-dev/design-web";
 
 type ModeComparisonRow = AdminAnalyticsFunnelResponse["modes"][number];
 type SourceBreakdownRow = AdminAnalyticsFunnelResponse["sources"][number];
diff --git a/apps/frontend/src/pages/AdminAnchorEventPage.vue b/apps/frontend/src/pages/AdminAnchorEventPage.vue
index c74ee0e76..969e1b4b4 100644
--- a/apps/frontend/src/pages/AdminAnchorEventPage.vue
+++ b/apps/frontend/src/pages/AdminAnchorEventPage.vue
@@ -7,15 +7,15 @@
     <template #rail>
       <AdminRailPanel :title="t('adminAnchorEvents.eventsTitle')">
         <template #actions>
-          <Button
-            appearance="pill"
-            tone="outline"
+          <PuButton
+            shape="pill"
+            tone="neutral" variant="outline"
             size="sm"
-            type="button"
+
             @click="prepareNewEvent"
           >
             {{ t("adminAnchorEvents.newEventAction") }}
-          </Button>
+          </PuButton>
         </template>
 
         <div v-if="events.length === 0" class="hint">
@@ -127,7 +127,6 @@ import AdminPageScaffold from "@/domains/admin/ui/layout/AdminPageScaffold.vue";
 import AdminRailPanel from "@/domains/admin/ui/layout/AdminRailPanel.vue";
 import AdminNavigationPanel from "@/domains/admin/ui/navigation/AdminNavigationPanel.vue";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import Button from "@/shared/ui/actions/Button.vue";
 import AnchorEventBasicSection from "@/domains/admin/ui/anchor-event/sections/AnchorEventBasicSection.vue";
 import AnchorEventLocationsSection from "@/domains/admin/ui/anchor-event/sections/AnchorEventLocationsSection.vue";
 import AnchorEventOtherSection from "@/domains/admin/ui/anchor-event/sections/AnchorEventOtherSection.vue";
@@ -158,7 +157,7 @@ import type {
   EditableMeetingPointForm,
 } from "@/domains/admin/ui/anchor-event/anchorEventEditorTypes";
 import { validateManualPartnerBounds } from "@/lib/validation";
-import { PuCard, PuLoadingState } from "@partner-up-dev/design-web";
+import { PuButton, PuCard, PuLoadingState } from "@partner-up-dev/design-web";
 
 type Workspace = NonNullable<AdminAnchorEventWorkspaceResponse>;
 type EventRecord = Workspace["events"][number];
diff --git a/apps/frontend/src/pages/AdminCommerceFulfillmentPage.vue b/apps/frontend/src/pages/AdminCommerceFulfillmentPage.vue
index 37d69db11..c536d9348 100644
--- a/apps/frontend/src/pages/AdminCommerceFulfillmentPage.vue
+++ b/apps/frontend/src/pages/AdminCommerceFulfillmentPage.vue
@@ -101,11 +101,11 @@
                 <textarea v-model="bookingNote" class="text-area"></textarea>
               </label>
               <div class="inline-actions">
-                <Button
-                  appearance="pill"
-                  tone="outline"
+                <PuButton
+                  shape="pill"
+                  tone="neutral" variant="outline"
                   size="sm"
-                  type="button"
+
                   :disabled="isConfirming"
                   @click="handleConfirmBooking"
                 >
@@ -114,10 +114,10 @@
                       ? t("adminCommerceFulfillment.processingAction")
                       : t("adminCommerceFulfillment.confirmBookingAction")
                   }}
-                </Button>
-                <Button
+                </PuButton>
+                <PuButton
                   size="sm"
-                  type="button"
+
                   :disabled="isRejecting"
                   @click="handleRejectBooking"
                 >
@@ -126,7 +126,7 @@
                       ? t("adminCommerceFulfillment.processingAction")
                       : t("adminCommerceFulfillment.rejectBookingAction")
                   }}
-                </Button>
+                </PuButton>
               </div>
             </div>
           </BentoItem>
@@ -154,11 +154,11 @@
                 ></textarea>
               </label>
               <div class="inline-actions">
-                <Button
-                  appearance="pill"
-                  tone="danger"
+                <PuButton
+                  shape="pill"
+                  tone="danger" variant="outline"
                   size="sm"
-                  type="button"
+
                   :disabled="!canResolveCancellation || isApprovingCancellation"
                   data-testid="admin-fulfillment.approve-cancellation"
                   @click="handleApproveCancellation"
@@ -168,10 +168,10 @@
                       ? t("adminCommerceFulfillment.processingAction")
                       : t("adminCommerceFulfillment.approveCancellationAction")
                   }}
-                </Button>
-                <Button
+                </PuButton>
+                <PuButton
                   size="sm"
-                  type="button"
+
                   :disabled="!canResolveCancellation || isDenyingCancellation"
                   data-testid="admin-fulfillment.deny-cancellation"
                   @click="handleDenyCancellation"
@@ -181,7 +181,7 @@
                       ? t("adminCommerceFulfillment.processingAction")
                       : t("adminCommerceFulfillment.denyCancellationAction")
                   }}
-                </Button>
+                </PuButton>
               </div>
             </div>
           </BentoItem>
@@ -221,9 +221,9 @@
                 ></textarea>
               </label>
               <div class="inline-actions">
-                <Button
+                <PuButton
                   size="sm"
-                  type="button"
+
                   :disabled="isSavingGuidance"
                   @click="handleSaveGuidance"
                 >
@@ -232,7 +232,7 @@
                       ? t("adminCommerceFulfillment.processingAction")
                       : t("adminCommerceFulfillment.saveGuidanceAction")
                   }}
-                </Button>
+                </PuButton>
               </div>
             </div>
           </BentoItem>
@@ -275,12 +275,7 @@ import {
 } from "@/domains/admin-commerce/queries/useAdminCommerce";
 import { prettyJson } from "@/domains/admin-commerce/editor-json";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import Button from "@/shared/ui/actions/Button.vue";
-import {
-  PuCard,
-  PuEmptyState,
-  PuLoadingState,
-} from "@partner-up-dev/design-web";
+import { PuButton, PuCard, PuEmptyState, PuLoadingState } from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const { isAdmin, logout } = useAdminAccess();
diff --git a/apps/frontend/src/pages/AdminCommerceOfferPage.vue b/apps/frontend/src/pages/AdminCommerceOfferPage.vue
index 4ae1844aa..70f033693 100644
--- a/apps/frontend/src/pages/AdminCommerceOfferPage.vue
+++ b/apps/frontend/src/pages/AdminCommerceOfferPage.vue
@@ -5,15 +5,15 @@
     </template>
 
     <template #actions>
-      <Button
-        appearance="pill"
-        tone="outline"
+      <PuButton
+        shape="pill"
+        tone="neutral" variant="outline"
         size="sm"
-        type="button"
+
         @click="prepareNewOffer"
       >
         {{ t("adminCommercePlacementOffer.newOfferAction") }}
-      </Button>
+      </PuButton>
     </template>
 
     <template #rail>
@@ -137,9 +137,9 @@
               />
 
               <div class="inline-actions">
-                <Button
+                <PuButton
                   size="sm"
-                  type="button"
+
                   :disabled="isSavingOffer"
                   @click="handleSaveOffer"
                 >
@@ -148,7 +148,7 @@
                       ? t("adminCommercePlacementOffer.savingAction")
                       : t("adminCommercePlacementOffer.saveOfferAction")
                   }}
-                </Button>
+                </PuButton>
               </div>
             </div>
           </BentoItem>
@@ -186,8 +186,7 @@ import {
 } from "@/domains/admin-commerce/queries/useAdminCommerce";
 import PricingRulesEditor from "@/domains/admin-commerce/ui/pricing-rules/PricingRulesEditor.vue";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import Button from "@/shared/ui/actions/Button.vue";
-import { PuCard, PuLoadingState } from "@partner-up-dev/design-web";
+import { PuButton, PuCard, PuLoadingState } from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const { isAdmin, logout } = useAdminAccess();
diff --git a/apps/frontend/src/pages/AdminCommercePlacementPage.vue b/apps/frontend/src/pages/AdminCommercePlacementPage.vue
index 2b1ca1f20..1a3fbc3e0 100644
--- a/apps/frontend/src/pages/AdminCommercePlacementPage.vue
+++ b/apps/frontend/src/pages/AdminCommercePlacementPage.vue
@@ -5,15 +5,15 @@
     </template>
 
     <template #actions>
-      <Button
-        appearance="pill"
-        tone="outline"
+      <PuButton
+        shape="pill"
+        tone="neutral" variant="outline"
         size="sm"
-        type="button"
+
         @click="prepareNewPlacement"
       >
         {{ t("adminCommercePlacementOffer.newPlacementAction") }}
-      </Button>
+      </PuButton>
     </template>
 
     <template #rail>
@@ -154,15 +154,15 @@
                   <span class="field-label">{{
                     t("adminCommercePlacementOffer.bindingRulesLabel")
                   }}</span>
-                  <Button
-                    appearance="pill"
-                    tone="outline"
+                  <PuButton
+                    shape="pill"
+                    tone="neutral" variant="outline"
                     size="sm"
-                    type="button"
+
                     @click="addBindingRule"
                   >
                     {{ t("adminCommercePlacementOffer.addBindingRuleAction") }}
-                  </Button>
+                  </PuButton>
                 </div>
 
                 <div
@@ -200,25 +200,25 @@
                   </div>
 
                   <div class="binding-row__actions">
-                    <Button
-                      appearance="pill"
-                      tone="outline"
+                    <PuButton
+                      shape="pill"
+                      tone="neutral" variant="outline"
                       size="sm"
-                      type="button"
+
                       @click="removeBindingRule(rule.id)"
                     >
                       {{
                         t("adminCommercePlacementOffer.removeBindingRuleAction")
                       }}
-                    </Button>
+                    </PuButton>
                   </div>
                 </div>
               </section>
 
               <div class="inline-actions">
-                <Button
+                <PuButton
                   size="sm"
-                  type="button"
+
                   :disabled="isSavingPlacement"
                   @click="handleSavePlacement"
                 >
@@ -227,7 +227,7 @@
                       ? t("adminCommercePlacementOffer.savingAction")
                       : t("adminCommercePlacementOffer.savePlacementAction")
                   }}
-                </Button>
+                </PuButton>
               </div>
             </div>
           </BentoItem>
@@ -265,8 +265,7 @@ import {
 } from "@/domains/admin-commerce/queries/useAdminCommerce";
 import PlacementMatchingRulesEditor from "@/domains/admin-commerce/ui/placement-matching-rules/PlacementMatchingRulesEditor.vue";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import Button from "@/shared/ui/actions/Button.vue";
-import { PuCard, PuLoadingState } from "@partner-up-dev/design-web";
+import { PuButton, PuCard, PuLoadingState } from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const { isAdmin, logout } = useAdminAccess();
diff --git a/apps/frontend/src/pages/AdminFeedbackQuestionnairesPage.vue b/apps/frontend/src/pages/AdminFeedbackQuestionnairesPage.vue
index d946c2857..f7073da83 100644
--- a/apps/frontend/src/pages/AdminFeedbackQuestionnairesPage.vue
+++ b/apps/frontend/src/pages/AdminFeedbackQuestionnairesPage.vue
@@ -18,17 +18,17 @@
           span="full"
         >
           <template #actions>
-            <Button
-              appearance="pill"
+            <PuButton
+              shape="pill"
               size="sm"
-              type="button"
+
               data-testid="admin-feedback-questionnaires.save"
               :disabled="!canSave"
               :loading="isSaving"
               @click="handleSave"
             >
               {{ saveButtonLabel }}
-            </Button>
+            </PuButton>
           </template>
 
           <div class="grid">
@@ -89,16 +89,16 @@
     <template #rail>
       <AdminRailPanel :title="t('adminFeedbackQuestionnaires.templatesTitle')">
         <template #actions>
-          <Button
-            appearance="pill"
-            tone="outline"
+          <PuButton
+            shape="pill"
+            tone="neutral" variant="outline"
             size="sm"
-            type="button"
+
             data-testid="admin-feedback-questionnaires.create"
             @click="handleNewTemplate"
           >
             {{ t("adminFeedbackQuestionnaires.newTemplateAction") }}
-          </Button>
+          </PuButton>
         </template>
 
         <p class="hint">
@@ -153,8 +153,7 @@ import AdminRailPanel from "@/domains/admin/ui/layout/AdminRailPanel.vue";
 import BentoItem from "@/domains/admin/ui/layout/BentoItem.vue";
 import BentoLayout from "@/domains/admin/ui/layout/BentoLayout.vue";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import Button from "@/shared/ui/actions/Button.vue";
-import { PuLoadingState } from "@partner-up-dev/design-web";
+import { PuButton, PuLoadingState } from "@partner-up-dev/design-web";
 
 type TemplateRecord = AdminFeedbackQuestionnaireTemplatesResponse[number];
 
diff --git a/apps/frontend/src/pages/AdminLoginPage.vue b/apps/frontend/src/pages/AdminLoginPage.vue
index a88e74702..2f695e5af 100644
--- a/apps/frontend/src/pages/AdminLoginPage.vue
+++ b/apps/frontend/src/pages/AdminLoginPage.vue
@@ -1,213 +1,212 @@
-<template>
+<template>
   <PuPageScaffold content-placement="center" class="admin-login-page">
-    <template #header>
-      <header class="admin-login-page__header">
-        <p class="admin-login-page__eyebrow">{{ t("adminCommon.title") }}</p>
-        <h1 class="admin-login-page__title">{{ t("adminLogin.title") }}</h1>
-        <p class="admin-login-page__subtitle">{{ t("adminLogin.subtitle") }}</p>
-      </header>
-    </template>
-
-    <section class="admin-login-card">
-      <div class="admin-login-card__glow" aria-hidden="true" />
-
+    <template #header>
+      <header class="admin-login-page__header">
+        <p class="admin-login-page__eyebrow">{{ t("adminCommon.title") }}</p>
+        <h1 class="admin-login-page__title">{{ t("adminLogin.title") }}</h1>
+        <p class="admin-login-page__subtitle">{{ t("adminLogin.subtitle") }}</p>
+      </header>
+    </template>
+
+    <section class="admin-login-card">
+      <div class="admin-login-card__glow" aria-hidden="true" />
+
       <div class="admin-login-card__body">
-        <label class="field">
-          <span class="field__label">{{ t("adminLogin.userIdLabel") }}</span>
-          <input
-            v-model="form.userId"
-            class="field__input"
-            type="text"
-            inputmode="text"
-            autocomplete="username"
-            :placeholder="t('adminLogin.userIdPlaceholder')"
-          />
-        </label>
-
-        <label class="field">
-          <span class="field__label">{{ t("adminLogin.passwordLabel") }}</span>
-          <input
-            v-model="form.password"
-            class="field__input"
-            type="password"
-            autocomplete="current-password"
-            :placeholder="t('adminLogin.passwordPlaceholder')"
-            @keydown.enter="handleSubmit"
-          />
-        </label>
-
-        <Button
-          appearance="pill"
-          size="lg"
-          type="button"
-          :disabled="loginMutation.isPending.value"
-          @click="handleSubmit"
-        >
-          {{ loginMutation.isPending.value ? t("adminLogin.loggingIn") : t("adminLogin.loginAction") }}
-        </Button>
-
-        <p class="admin-login-card__hint">{{ t("adminLogin.seedHint") }}</p>
-        <ErrorToast
-          v-if="loginMutation.error.value"
-          :message="loginMutation.error.value.message"
-          persistent
-        />
-      </div>
-    </section>
+        <label class="field">
+          <span class="field__label">{{ t("adminLogin.userIdLabel") }}</span>
+          <input
+            v-model="form.userId"
+            class="field__input"
+            type="text"
+            inputmode="text"
+            autocomplete="username"
+            :placeholder="t('adminLogin.userIdPlaceholder')"
+          />
+        </label>
+
+        <label class="field">
+          <span class="field__label">{{ t("adminLogin.passwordLabel") }}</span>
+          <input
+            v-model="form.password"
+            class="field__input"
+            type="password"
+            autocomplete="current-password"
+            :placeholder="t('adminLogin.passwordPlaceholder')"
+            @keydown.enter="handleSubmit"
+          />
+        </label>
+
+        <PuButton
+          shape="pill"
+          size="lg"
+
+          :disabled="loginMutation.isPending.value"
+          @click="handleSubmit"
+        >
+          {{ loginMutation.isPending.value ? t("adminLogin.loggingIn") : t("adminLogin.loginAction") }}
+        </PuButton>
+
+        <p class="admin-login-card__hint">{{ t("adminLogin.seedHint") }}</p>
+        <ErrorToast
+          v-if="loginMutation.error.value"
+          :message="loginMutation.error.value.message"
+          persistent
+        />
+      </div>
+    </section>
   </PuPageScaffold>
-</template>
-
-<script setup lang="ts">
-import { reactive, watchEffect } from "vue";
-import { useRoute, useRouter } from "vue-router";
-import { useI18n } from "vue-i18n";
-import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import { useAdminLogin } from "@/domains/admin/queries/useAdminLogin";
-import { useAdminSessionStore } from "@/domains/admin/use-cases/useAdminSessionStore";
-import Button from "@/shared/ui/actions/Button.vue";
-import { PuPageScaffold } from "@partner-up-dev/design-web";
-
-const route = useRoute();
-const router = useRouter();
-const { t } = useI18n();
-const adminSessionStore = useAdminSessionStore();
-const loginMutation = useAdminLogin();
-const form = reactive({
-  userId: "",
-  password: "",
-});
-
-const resolveRedirectTarget = (): string => {
-  const redirect = route.query.redirect;
-  if (typeof redirect === "string" && redirect.startsWith("/admin/")) {
-    return redirect;
-  }
-
+</template>
+
+<script setup lang="ts">
+import { reactive, watchEffect } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useI18n } from "vue-i18n";
+import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
+import { useAdminLogin } from "@/domains/admin/queries/useAdminLogin";
+import { useAdminSessionStore } from "@/domains/admin/use-cases/useAdminSessionStore";
+import { PuButton, PuPageScaffold } from "@partner-up-dev/design-web";
+
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+const adminSessionStore = useAdminSessionStore();
+const loginMutation = useAdminLogin();
+const form = reactive({
+  userId: "",
+  password: "",
+});
+
+const resolveRedirectTarget = (): string => {
+  const redirect = route.query.redirect;
+  if (typeof redirect === "string" && redirect.startsWith("/admin/")) {
+    return redirect;
+  }
+
   return "/admin/pr";
-};
-
-const handleSubmit = async () => {
-  const payload = await loginMutation.mutateAsync({
-    userId: form.userId.trim(),
-    password: form.password,
-  });
-
+};
+
+const handleSubmit = async () => {
+  const payload = await loginMutation.mutateAsync({
+    userId: form.userId.trim(),
+    password: form.password,
+  });
+
   adminSessionStore.applyAuthSession({
     role: payload.role,
     roles: payload.roles,
     userId: payload.userId,
     accessToken: payload.accessToken,
   });
-  form.password = "";
-  await router.replace(resolveRedirectTarget());
-};
-
-watchEffect(() => {
-  if (!adminSessionStore.hasAdminAccess) {
-    return;
-  }
-
-  void router.replace(resolveRedirectTarget());
-});
-</script>
-
-<style lang="scss" scoped>
-.admin-login-page {
-  --pu-page-max-width: 980px;
-}
-
-.admin-login-page__header,
-.admin-login-card,
+  form.password = "";
+  await router.replace(resolveRedirectTarget());
+};
+
+watchEffect(() => {
+  if (!adminSessionStore.hasAdminAccess) {
+    return;
+  }
+
+  void router.replace(resolveRedirectTarget());
+});
+</script>
+
+<style lang="scss" scoped>
+.admin-login-page {
+  --pu-page-max-width: 980px;
+}
+
+.admin-login-page__header,
+.admin-login-card,
 .admin-login-card__body,
-.field {
-  display: flex;
-  flex-direction: column;
-}
-
-.admin-login-page__header {
-  gap: var(--sys-spacing-small);
-  align-items: center;
-  text-align: center;
-}
-
-.admin-login-page__eyebrow {
+.field {
+  display: flex;
+  flex-direction: column;
+}
+
+.admin-login-page__header {
+  gap: var(--sys-spacing-small);
+  align-items: center;
+  text-align: center;
+}
+
+.admin-login-page__eyebrow {
   @include mx.pu-font(control);
-  margin: 0;
-  color: var(--sys-color-primary);
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-}
-
-.admin-login-page__title,
-.admin-login-page__subtitle,
-.admin-login-card__hint,
-.field__label {
-  margin: 0;
-}
-
-.admin-login-page__title {
-  font-size: var(--dcs-typography-page-hero-size);
-  font-weight: 700;
-  line-height: 1.05;
-}
-
-.admin-login-page__subtitle,
-.admin-login-card__hint,
-.field__label {
-  color: var(--sys-color-on-surface-variant);
-}
-
-.admin-login-card {
-  position: relative;
-  width: min(100%, 30rem);
-  overflow: hidden;
-  border: 1px solid var(--sys-color-outline-variant);
-  border-radius: var(--sys-radius-large);
-  background:
-    radial-gradient(
-      circle at top left,
-      var(--sys-color-primary-container),
-      transparent 42%
-    ),
-    linear-gradient(
-      180deg,
-      var(--sys-color-surface),
-      var(--sys-color-surface-container)
-    );
-  box-shadow: var(--sys-shadow-2);
-}
-
-.admin-login-card__glow {
-  position: absolute;
-  inset: auto -10% -30% auto;
-  width: 14rem;
-  height: 14rem;
-  border-radius: 999px;
-  background: var(--sys-color-primary-container);
-  filter: blur(36px);
-}
-
+  margin: 0;
+  color: var(--sys-color-primary);
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+
+.admin-login-page__title,
+.admin-login-page__subtitle,
+.admin-login-card__hint,
+.field__label {
+  margin: 0;
+}
+
+.admin-login-page__title {
+  font-size: var(--dcs-typography-page-hero-size);
+  font-weight: 700;
+  line-height: 1.05;
+}
+
+.admin-login-page__subtitle,
+.admin-login-card__hint,
+.field__label {
+  color: var(--sys-color-on-surface-variant);
+}
+
+.admin-login-card {
+  position: relative;
+  width: min(100%, 30rem);
+  overflow: hidden;
+  border: 1px solid var(--sys-color-outline-variant);
+  border-radius: var(--sys-radius-large);
+  background:
+    radial-gradient(
+      circle at top left,
+      var(--sys-color-primary-container),
+      transparent 42%
+    ),
+    linear-gradient(
+      180deg,
+      var(--sys-color-surface),
+      var(--sys-color-surface-container)
+    );
+  box-shadow: var(--sys-shadow-2);
+}
+
+.admin-login-card__glow {
+  position: absolute;
+  inset: auto -10% -30% auto;
+  width: 14rem;
+  height: 14rem;
+  border-radius: 999px;
+  background: var(--sys-color-primary-container);
+  filter: blur(36px);
+}
+
 .admin-login-card__body {
-  position: relative;
-  gap: var(--sys-spacing-medium);
-  padding: calc(var(--sys-spacing-medium) + var(--sys-spacing-small));
-}
-
-.field {
-  gap: var(--sys-spacing-small);
-}
-
-.field__label {
+  position: relative;
+  gap: var(--sys-spacing-medium);
+  padding: calc(var(--sys-spacing-medium) + var(--sys-spacing-small));
+}
+
+.field {
+  gap: var(--sys-spacing-small);
+}
+
+.field__label {
   @include mx.pu-font(control);
-}
-
-.field__input {
-  width: 100%;
-  padding: var(--sys-spacing-small) var(--sys-spacing-medium);
-  border: 1px solid var(--sys-color-outline-variant);
-  border-radius: var(--sys-radius-small);
-  background: var(--sys-color-surface);
-  color: var(--sys-color-on-surface);
-}
-
-</style>
+}
+
+.field__input {
+  width: 100%;
+  padding: var(--sys-spacing-small) var(--sys-spacing-medium);
+  border: 1px solid var(--sys-color-outline-variant);
+  border-radius: var(--sys-radius-small);
+  background: var(--sys-color-surface);
+  color: var(--sys-color-on-surface);
+}
+
+</style>
diff --git a/apps/frontend/src/pages/AdminPaymentPage.vue b/apps/frontend/src/pages/AdminPaymentPage.vue
index 184fb5030..528da880a 100644
--- a/apps/frontend/src/pages/AdminPaymentPage.vue
+++ b/apps/frontend/src/pages/AdminPaymentPage.vue
@@ -7,15 +7,15 @@
     <template #rail>
       <AdminRailPanel title="支付服务商">
         <div class="rail-actions">
-          <Button
-            appearance="pill"
+          <PuButton
+            shape="pill"
             size="sm"
-            type="button"
+
             data-testid="admin-payment.create"
             @click="startCreate"
           >
             新建实例
-          </Button>
+          </PuButton>
         </div>
 
         <div v-if="providerInstances.length === 0" class="hint">
@@ -192,14 +192,14 @@
               </div>
 
               <div class="inline-actions">
-                <Button
+                <PuButton
                   size="sm"
-                  type="submit"
+                  :action="{ native: 'submit' }"
                   :disabled="isSaving"
                   data-testid="admin-payment.save"
                 >
                   {{ isSaving ? "保存中" : "保存" }}
-                </Button>
+                </PuButton>
               </div>
             </form>
           </BentoItem>
@@ -288,8 +288,7 @@ import {
   type AdminPaymentProviderWorkspaceResponse,
 } from "@/domains/admin-payment/queries/useAdminPayment";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import Button from "@/shared/ui/actions/Button.vue";
-import { PuCard, PuLoadingState } from "@partner-up-dev/design-web";
+import { PuButton, PuCard, PuLoadingState } from "@partner-up-dev/design-web";
 
 const CREATE_PROVIDER_ID = "__create__";
 
diff --git a/apps/frontend/src/pages/AdminRideHailingPage.vue b/apps/frontend/src/pages/AdminRideHailingPage.vue
index 3c3ec2759..301d12eb3 100644
--- a/apps/frontend/src/pages/AdminRideHailingPage.vue
+++ b/apps/frontend/src/pages/AdminRideHailingPage.vue
@@ -7,15 +7,15 @@
     <template #rail>
       <AdminRailPanel title="网约车服务商">
         <div class="rail-actions">
-          <Button
-            appearance="pill"
+          <PuButton
+            shape="pill"
             size="sm"
-            type="button"
+
             data-testid="admin-ride-hailing.create"
             @click="startCreate"
           >
             新建实例
-          </Button>
+          </PuButton>
         </div>
 
         <div v-if="providerInstances.length === 0" class="hint">
@@ -155,14 +155,14 @@
               </div>
 
               <div class="inline-actions">
-                <Button
+                <PuButton
                   size="sm"
-                  type="submit"
+                  :action="{ native: 'submit' }"
                   :disabled="isSaving"
                   data-testid="admin-ride-hailing.save"
                 >
                   {{ isSaving ? "保存中" : "保存" }}
-                </Button>
+                </PuButton>
               </div>
             </form>
           </BentoItem>
@@ -223,8 +223,7 @@ import {
   type AdminRideHailingProviderWorkspaceResponse,
 } from "@/domains/admin-ride-hailing/queries/useAdminRideHailing";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import Button from "@/shared/ui/actions/Button.vue";
-import { PuCard, PuLoadingState } from "@partner-up-dev/design-web";
+import { PuButton, PuCard, PuLoadingState } from "@partner-up-dev/design-web";
 
 const CREATE_PROVIDER_ID = "__create__";
 
diff --git a/apps/frontend/src/pages/AnchorEventLandingPage.vue b/apps/frontend/src/pages/AnchorEventLandingPage.vue
index eefca2c14..aa206e95e 100644
--- a/apps/frontend/src/pages/AnchorEventLandingPage.vue
+++ b/apps/frontend/src/pages/AnchorEventLandingPage.vue
@@ -19,16 +19,16 @@
         @back="handleLandingBack"
       >
         <template #top-actions>
-          <Button
-            appearance="pill"
-            tone="outline"
+          <PuButton
+            shape="pill"
+            tone="neutral" variant="outline"
             size="sm"
-            type="button"
+
             data-testid="anchor-event-landing.other-events.open"
             @click="showOtherEventsDrawer = true"
           >
             {{ t("anchorEvent.otherEvents.action") }}
-          </Button>
+          </PuButton>
         </template>
       </PageHeader>
     </template>
@@ -201,19 +201,11 @@ import {
   clearPendingWeChatAction,
   readPendingWeChatAction,
 } from "@/processes/wechat/pending-wechat-action";
-import Button from "@/shared/ui/actions/Button.vue";
 import AnchorEventRadioCardCarousel from "@/domains/event/ui/composites/AnchorEventRadioCardCarousel.vue";
 import { useOfficialAccountFollowPrompt } from "@/domains/marketing/use-cases/useOfficialAccountFollowPrompt";
 import { trackEvent } from "@/shared/telemetry/track";
 import { resolveTelemetryFailurePayload } from "@/shared/telemetry/result";
-import {
-  PuLoadingState,
-  PuPageScaffold,
-  PuSegmented,
-  PuSegmentedItem,
-  type PuSegmentedValue,
-  PuDrawer,
-} from "@partner-up-dev/design-web";
+import { PuButton, PuLoadingState, PuPageScaffold, PuSegmented, PuSegmentedItem, type PuSegmentedValue, PuDrawer } from "@partner-up-dev/design-web";
 import {
   buildAnchorEventFunnelPayload,
   type AnchorEventFunnelContext,
diff --git a/apps/frontend/src/pages/BIEntryPage.vue b/apps/frontend/src/pages/BIEntryPage.vue
index b05cc02f6..cd948b970 100644
--- a/apps/frontend/src/pages/BIEntryPage.vue
+++ b/apps/frontend/src/pages/BIEntryPage.vue
@@ -7,9 +7,9 @@
 
       <template v-else>
         <ErrorToast v-if="errorMessage" :message="errorMessage" persistent />
-        <Button appearance="pill" tone="outline" type="button" @click="goHome">
+        <PuButton shape="pill" tone="neutral" variant="outline" @click="goHome">
           返回首页
-        </Button>
+        </PuButton>
       </template>
     </section>
   </PuPageScaffold>
@@ -20,9 +20,8 @@ import { onMounted, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useAdminSessionStore } from "@/domains/admin/use-cases/useAdminSessionStore";
 import { adminClient } from "@/lib/admin-rpc";
-import Button from "@/shared/ui/actions/Button.vue";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import { PuLoadingState, PuPageScaffold } from "@partner-up-dev/design-web";
+import { PuButton, PuLoadingState, PuPageScaffold } from "@partner-up-dev/design-web";
 
 const ANALYTICS_SEED_USER_ID = "00000000-0000-0000-0000-000000000002";
 
diff --git a/apps/frontend/src/pages/CommerceBillDetailPage.vue b/apps/frontend/src/pages/CommerceBillDetailPage.vue
index 2ba440ede..39cc1d287 100644
--- a/apps/frontend/src/pages/CommerceBillDetailPage.vue
+++ b/apps/frontend/src/pages/CommerceBillDetailPage.vue
@@ -143,12 +143,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { useRoute } from "vue-router";
-import {
-  PuButton,
-  PuCard,
-  PuInlineNotice,
-  PuPageScaffold,
-} from "@partner-up-dev/design-web";
+import { PuButton, PuCard, PuInlineNotice, PuPageScaffold } from "@partner-up-dev/design-web";
 import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
 import { useBillDetail } from "@/domains/commerce/queries/useCommerce";
 
diff --git a/apps/frontend/src/pages/CommerceOrderDetailPage.vue b/apps/frontend/src/pages/CommerceOrderDetailPage.vue
index 17ecd0c0d..d622ae866 100644
--- a/apps/frontend/src/pages/CommerceOrderDetailPage.vue
+++ b/apps/frontend/src/pages/CommerceOrderDetailPage.vue
@@ -219,15 +219,15 @@
               </p>
             </div>
 
-            <Button
+            <PuButton
               v-if="detail.cancellation.canRequest"
-              tone="danger"
+              tone="danger" variant="outline"
               :loading="cancelMutation.isPending.value"
               data-testid="order-detail.cancel-rental"
               @click="cancelRentalOrder"
             >
               取消订单
-            </Button>
+            </PuButton>
 
             <PuInlineNotice
               v-if="isCancellationPending"
@@ -259,16 +259,16 @@
               {{ fulfillmentStatusLabel }}
             </p>
 
-            <Button
+            <PuButton
               v-if="canConfirmRentalBooking"
               size="lg"
-              tone="secondary"
+              tone="secondary" variant="solid"
               :loading="confirmationMutation.isPending.value"
               data-testid="order-detail.mock-rental-confirm"
               @click="simulateBookingConfirmation"
             >
               模拟确认预订
-            </Button>
+            </PuButton>
 
             <PuInlineNotice
               v-if="detail.fulfillment?.bookingStatus === 'BOOKING_CONFIRMED'"
@@ -287,14 +287,8 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted } from "vue";
 import { useRoute } from "vue-router";
-import {
-  PuButton,
-  PuCard,
-  PuInlineNotice,
-  PuPageScaffold,
-} from "@partner-up-dev/design-web";
+import { PuButton, PuCard, PuInlineNotice, PuPageScaffold } from "@partner-up-dev/design-web";
 import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
-import Button from "@/shared/ui/actions/Button.vue";
 import {
   useCancelRentalOrder,
   useCommerceOrderDetail,
diff --git a/apps/frontend/src/pages/EventPRSearchPage.vue b/apps/frontend/src/pages/EventPRSearchPage.vue
index b678e052b..4c638bf4f 100644
--- a/apps/frontend/src/pages/EventPRSearchPage.vue
+++ b/apps/frontend/src/pages/EventPRSearchPage.vue
@@ -6,14 +6,14 @@
       :back-fallback-to="{ name: 'event-plaza' }"
     >
       <template #top-actions>
-        <Button
+        <PuButton
           v-if="isResultMode"
-          tone="ghost"
+          tone="neutral" variant="ghost"
           size="sm"
           @click="showCriteriaDrawer = true"
         >
           {{ t("eventPRSearch.actions.modifyCriteria") }}
-        </Button>
+        </PuButton>
       </template>
     </PageHeader>
 
@@ -28,9 +28,9 @@
       icon="i-mdi-alert-circle-outline"
     >
       <template #actions>
-        <Button tone="outline" @click="goEventPlaza">
+        <PuButton tone="neutral" variant="outline" @click="goEventPlaza">
           {{ t("eventPRSearch.actions.goEventPlaza") }}
-        </Button>
+        </PuButton>
       </template>
     </PuEmptyState>
 
@@ -41,9 +41,9 @@
       icon="i-mdi-calendar-blank-outline"
     >
       <template #actions>
-        <Button tone="outline" @click="goHome">
+        <PuButton tone="neutral" variant="outline" @click="goHome">
           {{ t("eventPRSearch.actions.backHome") }}
-        </Button>
+        </PuButton>
       </template>
     </PuEmptyState>
 
@@ -55,12 +55,12 @@
       />
 
       <div class="event-pr-search-page__footer-actions mt-4">
-        <Button tone="outline" block @click="goHome">
+        <PuButton tone="neutral" variant="outline" block @click="goHome">
           {{ t("eventPRSearch.actions.backHome") }}
-        </Button>
-        <Button block :disabled="!canSubmitForm" @click="submitSearch">
+        </PuButton>
+        <PuButton block :disabled="!canSubmitForm" @click="submitSearch">
           {{ t("eventPRSearch.actions.search") }}
-        </Button>
+        </PuButton>
       </div>
     </template>
 
@@ -83,12 +83,12 @@
         icon="i-mdi-alert-circle-outline"
       >
         <template #actions>
-          <Button tone="outline" @click="showCriteriaDrawer = true">
+          <PuButton tone="neutral" variant="outline" @click="showCriteriaDrawer = true">
             {{ t("eventPRSearch.actions.modifyCriteria") }}
-          </Button>
-          <Button tone="surface" @click="goEventPlaza">
+          </PuButton>
+          <PuButton tone="neutral" variant="soft" @click="goEventPlaza">
             {{ t("eventPRSearch.actions.goEventPlaza") }}
-          </Button>
+          </PuButton>
         </template>
       </PuEmptyState>
 
@@ -118,12 +118,12 @@
           icon="i-mdi-calendar-remove-outline"
         >
           <template #actions>
-            <Button tone="outline" @click="showCriteriaDrawer = true">
+            <PuButton tone="neutral" variant="outline" @click="showCriteriaDrawer = true">
               {{ t("eventPRSearch.actions.modifyCriteria") }}
-            </Button>
-            <Button tone="surface" @click="goEventPlaza">
+            </PuButton>
+            <PuButton tone="neutral" variant="soft" @click="goEventPlaza">
               {{ t("eventPRSearch.actions.goEventPlaza") }}
-            </Button>
+            </PuButton>
           </template>
         </PuEmptyState>
       </template>
@@ -140,16 +140,16 @@
 
         <template #footer>
           <div class="event-pr-search-page__drawer-actions">
-            <Button tone="outline" block @click="showCriteriaDrawer = false">
+            <PuButton tone="neutral" variant="outline" block @click="showCriteriaDrawer = false">
               {{ t("common.cancel") }}
-            </Button>
-            <Button
+            </PuButton>
+            <PuButton
               block
               :disabled="!canApplyDrawerCriteria"
               @click="applyDrawerCriteria"
             >
               {{ t("eventPRSearch.actions.applyCriteria") }}
-            </Button>
+            </PuButton>
           </div>
         </template>
       </PuDrawer>
@@ -162,12 +162,7 @@ import type { PRId } from "@partner-up-dev/backend";
 import { computed, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRoute, useRouter } from "vue-router";
-import Button from "@/shared/ui/actions/Button.vue";
-import {
-  PuEmptyState,
-  PuPageScaffold,
-  PuDrawer,
-} from "@partner-up-dev/design-web";
+import { PuButton, PuEmptyState, PuPageScaffold, PuDrawer } from "@partner-up-dev/design-web";
 import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
 import { useAnchorEvents } from "@/domains/event/queries/useAnchorEvents";
 import EventPRSearchCriteriaForm from "@/domains/event/ui/composites/EventPRSearchCriteriaForm.vue";
diff --git a/apps/frontend/src/pages/LocationApplicationPage.vue b/apps/frontend/src/pages/LocationApplicationPage.vue
index 753f63aa3..e7ad7b004 100644
--- a/apps/frontend/src/pages/LocationApplicationPage.vue
+++ b/apps/frontend/src/pages/LocationApplicationPage.vue
@@ -52,15 +52,15 @@
             />
           </PuFormItem>
 
-          <Button
-            appearance="rect"
+          <PuButton
+            shape="rect"
             size="lg"
-            type="submit"
+            :action="{ native: 'submit' }"
             :disabled="!canSubmit"
             :loading="submitMutation.isPending.value"
           >
             {{ t("locationApplicationPage.submitAction") }}
-          </Button>
+          </PuButton>
         </form>
       </PuCard>
 
@@ -120,9 +120,8 @@
 import { computed, onMounted, ref } from "vue";
 import { useRoute, type RouteLocationRaw } from "vue-router";
 import { useI18n } from "vue-i18n";
-import { PuCard, PuFormItem, PuInlineNotice, PuLoadingState, PuPageScaffold, PuTag } from "@partner-up-dev/design-web";
+import { PuButton, PuCard, PuFormItem, PuInlineNotice, PuLoadingState, PuPageScaffold, PuTag } from "@partner-up-dev/design-web";
 import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
-import Button from "@/shared/ui/actions/Button.vue";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
 import ImageUrlInput from "@/shared/upload/ImageUrlInput.vue";
 import {
diff --git a/apps/frontend/src/pages/LocationPickerPage.vue b/apps/frontend/src/pages/LocationPickerPage.vue
index d032dd761..c9658d2c8 100644
--- a/apps/frontend/src/pages/LocationPickerPage.vue
+++ b/apps/frontend/src/pages/LocationPickerPage.vue
@@ -2,9 +2,9 @@
   <PuPageScaffold viewport="screen" class="location-picker-page">
     <template #header>
       <div class="location-picker-page__header">
-        <Button
-          type="button"
-          tone="ghost"
+        <PuButton
+
+          tone="neutral" variant="ghost"
           size="sm"
           data-testid="location-picker-page.back"
           @click="goBack"
@@ -13,7 +13,7 @@
             <span class="i-mdi-arrow-left" aria-hidden="true"></span>
           </template>
           {{ t("common.backToPrevious") }}
-        </Button>
+        </PuButton>
         <h1>{{ t("locationPicker.title") }}</h1>
       </div>
     </template>
@@ -31,10 +31,9 @@
 import { ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
-import Button from "@/shared/ui/actions/Button.vue";
 import LocationPickerPanel from "@/domains/location/ui/LocationPickerPanel.vue";
 import type { PickedLocation } from "@/domains/location/model/location-picker";
-import { PuPageScaffold } from "@partner-up-dev/design-web";
+import { PuButton, PuPageScaffold } from "@partner-up-dev/design-web";
 import {
   readLastPickedLocation,
   saveLastPickedLocation,
diff --git a/apps/frontend/src/pages/MePage.vue b/apps/frontend/src/pages/MePage.vue
index 6eda0b7da..ec9586dc1 100644
--- a/apps/frontend/src/pages/MePage.vue
+++ b/apps/frontend/src/pages/MePage.vue
@@ -29,13 +29,13 @@
             <h2>{{ t("mePage.profile.title") }}</h2>
             <p>{{ t("mePage.profile.description") }}</p>
           </div>
-          <Button
+          <PuButton
             v-if="userSessionStore.isAuthenticated"
             class="profile-session-action"
-            appearance="pill"
-            tone="danger"
+            shape="pill"
+            tone="danger" variant="outline"
             size="sm"
-            type="button"
+
             data-testid="me.session.logout"
             :loading="logoutPending"
             @click="handleLogout"
@@ -48,7 +48,7 @@
                 ? t("mePage.logout.pending")
                 : t("mePage.logout.action")
             }}
-          </Button>
+          </PuButton>
         </div>
 
         <div class="profile-panel">
@@ -101,40 +101,40 @@
             </p>
 
             <div class="profile-actions">
-              <Button
-                appearance="pill"
+              <PuButton
+                shape="pill"
                 size="sm"
-                type="button"
+
                 :disabled="!canSaveNickname"
                 :loading="updateProfileMutation.isPending.value"
                 @click="handleSaveNickname"
               >
                 {{ t("mePage.profile.saveNickname") }}
-              </Button>
+              </PuButton>
 
-              <Button
-                appearance="pill"
+              <PuButton
+                shape="pill"
                 size="sm"
-                type="button"
+
                 data-testid="me.profile.phone.save"
                 :disabled="!canSavePhoneNumber"
                 :loading="updatePhoneNumberMutation.isPending.value"
                 @click="handleSavePhoneNumber"
               >
                 {{ t("mePage.profile.savePhone") }}
-              </Button>
+              </PuButton>
 
-              <Button
-                appearance="pill"
-                tone="outline"
+              <PuButton
+                shape="pill"
+                tone="neutral" variant="outline"
                 size="sm"
-                type="button"
+
                 :disabled="!canEditProfile || updateAvatarMutation.isPending.value"
                 :loading="updateAvatarMutation.isPending.value"
                 @click="handlePickAvatar"
               >
                 {{ t("mePage.profile.changeAvatar") }}
-              </Button>
+              </PuButton>
 
               <input
                 ref="avatarInputRef"
@@ -164,18 +164,18 @@
                 variant="soft"
                 shape="pill"
               />
-              <Button
+              <PuButton
                 v-else
                 class="wechat-identity-action"
-                appearance="pill"
+                shape="pill"
                 size="sm"
-                type="button"
+
                 :disabled="wechatIdentityActionDisabled"
                 :loading="wechatIdentityActionPending"
                 @click="handleStartWeChatIdentity"
               >
                 {{ wechatIdentityActionLabel }}
-              </Button>
+              </PuButton>
             </div>
           </div>
 
@@ -186,12 +186,12 @@
               }}</span>
               <code class="credential-value">{{ storedUserIdLabel }}</code>
             </div>
-            <Button
+            <PuButton
               class="credential-clipboard-action"
-              appearance="pill"
-              tone="ghost"
+              shape="pill"
+              tone="neutral" variant="ghost"
               size="sm"
-              type="button"
+
               :disabled="!storedUserId"
               @click="handleCopyCredential(storedUserId)"
             >
@@ -210,7 +210,7 @@
                 "
                 aria-hidden="true"
               ></span>
-            </Button>
+            </PuButton>
           </div>
         </div>
       </PuCard>
@@ -266,19 +266,10 @@ import { computed, ref, watch } from "vue";
 import { RouterLink, useRoute } from "vue-router";
 import { useI18n } from "vue-i18n";
 import { useQueryClient } from "@tanstack/vue-query";
-import {
-  PuCard,
-  PuFormItem,
-  PuImg,
-  PuInlineNotice,
-  PuLoadingState,
-  PuPageScaffold,
-  PuTag,
-} from "@partner-up-dev/design-web";
+import { PuButton, PuCard, PuFormItem, PuImg, PuInlineNotice, PuLoadingState, PuPageScaffold, PuTag } from "@partner-up-dev/design-web";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
 import PageFooter from "@/shared/ui/sections/PageFooter.vue";
 import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
-import Button from "@/shared/ui/actions/Button.vue";
 import WeChatNotificationSubscriptionsCard from "@/shared/ui/sections/WeChatNotificationSubscriptionsCard.vue";
 import APRNotificationSubscriptions from "@/shared/ui/sections/APRNotificationSubscriptions.vue";
 import { useUserSessionStore } from "@/shared/auth/useUserSessionStore";
@@ -680,7 +671,7 @@ const handleCopyCredential = async (value: string | null) => {
   min-height: var(--sys-spacing-large);
   padding: 0;
 
-  :deep(.ui-button__label) {
+  :deep(.pu-button__content) {
     display: inline-flex;
     align-items: center;
     justify-content: center;
diff --git a/apps/frontend/src/pages/OrderingSupportPage.vue b/apps/frontend/src/pages/OrderingSupportPage.vue
index e1ae5399e..00a7932d3 100644
--- a/apps/frontend/src/pages/OrderingSupportPage.vue
+++ b/apps/frontend/src/pages/OrderingSupportPage.vue
@@ -55,9 +55,9 @@
           class="ordering-support__contact"
           :aria-label="t('ordering.support.contactAria')"
         >
-          <Button
-            type="button"
-            appearance="rect"
+          <PuButton
+
+            shape="rect"
             size="lg"
             data-testid="ordering.support.contact.open"
             @click="showContactModal = true"
@@ -66,7 +66,7 @@
               <span class="i-mdi-headset" aria-hidden="true"></span>
             </template>
             {{ t("ordering.support.contactAction") }}
-          </Button>
+          </PuButton>
         </section>
 
         <PuModal
@@ -93,15 +93,15 @@
               </p>
             </div>
 
-            <Button
-              type="button"
-              appearance="rect"
+            <PuButton
+
+              shape="rect"
               block
               data-testid="ordering.support.contact.close"
               @click="showContactModal = false"
             >
               {{ t("common.close") }}
-            </Button>
+            </PuButton>
           </div>
         </PuModal>
       </template>
@@ -118,15 +118,15 @@
         ></span>
         <h1>{{ t("ordering.support.recoveryTitle") }}</h1>
         <p>{{ recoveryDescription }}</p>
-        <Button
-          type="button"
-          appearance="rect"
+        <PuButton
+
+          shape="rect"
           size="lg"
           data-testid="ordering.support.recovery.action"
           @click="handleRecoveryAction"
         >
           {{ recoveryActionLabel }}
-        </Button>
+        </PuButton>
       </section>
     </div>
 
@@ -145,7 +145,7 @@
 </template>
 
 <script setup lang="ts">
-import { PuModal } from "@partner-up-dev/design-web";
+import { PuButton, PuModal } from "@partner-up-dev/design-web";
 import { computed, nextTick, onMounted, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
@@ -164,7 +164,6 @@ import {
   PUBLIC_CONFIG_KEYS,
   usePublicConfig,
 } from "@/shared/config/queries/usePublicConfig";
-import Button from "@/shared/ui/actions/Button.vue";
 import { useCloudStorage } from "@/shared/upload/useCloudStorage";
 
 const { t } = useI18n();
@@ -428,7 +427,7 @@ onMounted(() => {
   color: var(--sys-color-error);
 }
 
-.ordering-support__recovery :deep(.ui-button) {
+.ordering-support__recovery :deep(.pu-button) {
   width: 100%;
 }
 
@@ -485,7 +484,7 @@ onMounted(() => {
   width: min(100%, 22rem);
 }
 
-.ordering-support__contact :deep(.ui-button) {
+.ordering-support__contact :deep(.pu-button) {
   width: 100%;
 }
 
diff --git a/apps/frontend/src/pages/PRPage.vue b/apps/frontend/src/pages/PRPage.vue
index b434c8e36..eeaaf2ebe 100644
--- a/apps/frontend/src/pages/PRPage.vue
+++ b/apps/frontend/src/pages/PRPage.vue
@@ -11,26 +11,26 @@
       >
         <template #top-actions>
           <div v-if="showHeaderQuickActions" class="header-quick-actions">
-            <Button
+            <PuButton
               v-if="showEditContentAction"
-              tone="outline"
+              tone="neutral" variant="outline"
               size="sm"
-              type="button"
+
               data-testid="pr-detail.creator.edit-content"
               @click="openEditContentModal"
             >
               {{ t("prPage.editContent") }}
-            </Button>
-            <Button
+            </PuButton>
+            <PuButton
               v-if="showModifyStatusAction"
-              tone="outline"
+              tone="neutral" variant="outline"
               size="sm"
-              type="button"
+
               data-testid="pr-detail.creator.modify-status"
               @click="openModifyStatusModal"
             >
               {{ t("prPage.modifyStatus") }}
-            </Button>
+            </PuButton>
           </div>
         </template>
 
@@ -50,18 +50,18 @@
         <PREditor ref="editorRef" :pr-id="id" @saved="closeEditContentModal" />
 
         <div class="creator-modal-actions creator-modal-actions--spaced">
-          <Button type="button" tone="outline" @click="closeEditContentModal">
+          <PuButton tone="neutral" variant="outline" @click="closeEditContentModal">
             {{ t("common.cancel") }}
-          </Button>
-          <Button
-            type="button"
+          </PuButton>
+          <PuButton
+
             :loading="editorPending"
             :disabled="!isEditContentFormValid"
             data-testid="pr-detail.creator.edit-content.submit"
             @click="submitEditContentForm"
           >
             {{ t("editContentModal.confirmAction") }}
-          </Button>
+          </PuButton>
         </div>
       </PuModal>
 
@@ -80,15 +80,15 @@
         />
 
         <div class="creator-modal-actions">
-          <Button tone="outline" @click="closeModifyStatusModal">
+          <PuButton tone="neutral" variant="outline" @click="closeModifyStatusModal">
             {{ t("common.cancel") }}
-          </Button>
-          <Button
+          </PuButton>
+          <PuButton
             :loading="updateStatusPending"
             @click="submitUpdateStatusForm"
           >
             {{ t("modifyStatusModal.confirmAction") }}
-          </Button>
+          </PuButton>
         </div>
 
         <ErrorToast
@@ -177,7 +177,6 @@ import { computed, isRef, nextTick, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
 import type { PRStatusManual } from "@partner-up-dev/backend";
-import Button from "@/shared/ui/actions/Button.vue";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
 import PageFooter from "@/shared/ui/sections/PageFooter.vue";
 import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
@@ -220,12 +219,7 @@ import {
   type PlacementInstanceProjection,
 } from "@/domains/commerce/queries/useCommerce";
 import { ORDERING_ENTRY_STORAGE_KEY } from "@/domains/commerce/model/ordering-entry-storage";
-import {
-  PuInlineNotice,
-  PuLoadingState,
-  PuPageScaffold,
-  PuModal,
-} from "@partner-up-dev/design-web";
+import { PuButton, PuInlineNotice, PuLoadingState, PuPageScaffold, PuModal } from "@partner-up-dev/design-web";
 
 type CreatorSecondaryActionType =
   | "CREATOR_EDIT_CONTENT"
@@ -543,7 +537,7 @@ usePRPendingWeChatReplay({
   display: flex;
   gap: var(--sys-spacing-small);
 
-  :deep(.ui-button) {
+  :deep(.pu-button) {
     flex: 1;
     min-width: 66px;
   }
diff --git a/apps/frontend/src/pages/PaymentCheckoutPage.vue b/apps/frontend/src/pages/PaymentCheckoutPage.vue
index 647efc938..5d0f823f5 100644
--- a/apps/frontend/src/pages/PaymentCheckoutPage.vue
+++ b/apps/frontend/src/pages/PaymentCheckoutPage.vue
@@ -72,7 +72,7 @@
             :message="checkout.eligibility.disabledReason ?? '支付条件不满足。'"
           />
 
-          <Button
+          <PuButton
             v-if="canCreateCharge"
             size="lg"
             :loading="createChargeMutation.isPending.value"
@@ -80,39 +80,39 @@
             @click="createCharge"
           >
             发起微信支付
-          </Button>
+          </PuButton>
 
           <template
             v-if="activePayment && activePayment.status !== 'SUCCEEDED'"
           >
-            <Button
+            <PuButton
               v-if="
                 activePaymentClientActionType === 'PAYMENT_REDIRECT' &&
                 redirectUrl
               "
-              tone="secondary"
+              tone="secondary" variant="solid"
               data-testid="payment-checkout.redirect-open"
               @click="openRedirectPayment"
             >
               继续支付
-            </Button>
-            <Button
+            </PuButton>
+            <PuButton
               v-if="activePaymentClientActionType === 'WECHAT_BRIDGE'"
-              tone="secondary"
+              tone="secondary" variant="solid"
               data-testid="payment-checkout.wechat-bridge-open"
               @click="runActiveClientPaymentAction"
             >
               继续微信支付
-            </Button>
-            <Button
+            </PuButton>
+            <PuButton
               v-if="activePaymentClientActionType !== 'PAYMENT_REDIRECT'"
-              tone="secondary"
+              tone="secondary" variant="solid"
               :loading="syncMutation.isPending.value"
               data-testid="payment-checkout.sync"
               @click="syncPayment"
             >
               同步支付状态
-            </Button>
+            </PuButton>
           </template>
 
           <PuInlineNotice
@@ -160,14 +160,8 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import { useRoute } from "vue-router";
-import {
-  PuButton,
-  PuCard,
-  PuInlineNotice,
-  PuPageScaffold,
-} from "@partner-up-dev/design-web";
+import { PuButton, PuCard, PuInlineNotice, PuPageScaffold } from "@partner-up-dev/design-web";
 import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
-import Button from "@/shared/ui/actions/Button.vue";
 import {
   useCreateChargeForBillLine,
   usePaymentCheckout,
diff --git a/apps/frontend/src/pages/RouteApplicationPage.vue b/apps/frontend/src/pages/RouteApplicationPage.vue
index 15c7c671e..6781a0b1a 100644
--- a/apps/frontend/src/pages/RouteApplicationPage.vue
+++ b/apps/frontend/src/pages/RouteApplicationPage.vue
@@ -31,15 +31,15 @@
             />
           </PuFormItem>
 
-          <Button
-            appearance="rect"
+          <PuButton
+            shape="rect"
             size="lg"
-            type="submit"
+            :action="{ native: 'submit' }"
             :disabled="!canSubmit"
             :loading="submitMutation.isPending.value"
           >
             {{ t("routeApplicationPage.submitAction") }}
-          </Button>
+          </PuButton>
         </form>
       </PuCard>
 
@@ -102,9 +102,8 @@ import { computed, onMounted, ref } from "vue";
 import { useRoute, type RouteLocationRaw } from "vue-router";
 import { useI18n } from "vue-i18n";
 import type { PRRoute } from "@partner-up-dev/backend";
-import { PuCard, PuFormItem, PuInlineNotice, PuLoadingState, PuPageScaffold, PuTag } from "@partner-up-dev/design-web";
+import { PuButton, PuCard, PuFormItem, PuInlineNotice, PuLoadingState, PuPageScaffold, PuTag } from "@partner-up-dev/design-web";
 import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
-import Button from "@/shared/ui/actions/Button.vue";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
 import {
   createEmptyRouteDraft,
diff --git a/apps/frontend/src/pages/StudySprintPomodoroPage.vue b/apps/frontend/src/pages/StudySprintPomodoroPage.vue
index 07bf59fb2..203ae8cf7 100644
--- a/apps/frontend/src/pages/StudySprintPomodoroPage.vue
+++ b/apps/frontend/src/pages/StudySprintPomodoroPage.vue
@@ -33,7 +33,7 @@
           </h1>
         </div>
       </Transition>
-      <Button
+      <PuButton
         block
         size="lg"
         data-testid="study-sprint.guidance.next"
@@ -41,7 +41,7 @@
         @click="handleGuidanceAction"
       >
         {{ guidanceActionText }}
-      </Button>
+      </PuButton>
     </section>
   </PuPageScaffold>
 
@@ -140,7 +140,7 @@
           </div>
         </div>
         <div class="room-controls__actions">
-          <Button
+          <PuButton
             v-if="viewerStatus === 'NOT_STARTED'"
             block
             size="lg"
@@ -149,48 +149,48 @@
             @click="handleStart"
           >
             开始专注
-          </Button>
-          <Button
+          </PuButton>
+          <PuButton
             v-else-if="viewerStatus === 'FOCUSING'"
             block
             size="lg"
-            tone="outline"
+            tone="neutral" variant="outline"
             :loading="recordEventMutation.isPending.value"
             data-testid="study-sprint.complete"
             @click="recordCompleted"
           >
             完成专注
-          </Button>
-          <Button
+          </PuButton>
+          <PuButton
             v-else-if="viewerStatus === 'COMPLETED'"
             block
             size="lg"
-            tone="surface"
+            tone="neutral" variant="soft"
             data-testid="study-sprint.completed"
             disabled
           >
             已完成，继续看看同伴
-          </Button>
-          <Button
+          </PuButton>
+          <PuButton
             v-else
             block
             size="lg"
-            tone="surface"
+            tone="neutral" variant="soft"
             data-testid="study-sprint.left"
             disabled
           >
             已离开
-          </Button>
-          <Button
+          </PuButton>
+          <PuButton
             v-if="viewerSession"
             block
-            tone="ghost"
+            tone="neutral" variant="ghost"
             :loading="recordEventMutation.isPending.value"
             data-testid="study-sprint.leave"
             @click="handleLeave"
           >
             离开房间
-          </Button>
+          </PuButton>
         </div>
       </section>
     </template>
@@ -200,10 +200,9 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { useRouter } from "vue-router";
-import Button from "@/shared/ui/actions/Button.vue";
 import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
 import { usePRRouteId } from "@/domains/pr/routing/usePRRouteId";
-import { PuLoadingState, PuPageScaffold } from "@partner-up-dev/design-web";
+import { PuButton, PuLoadingState, PuPageScaffold } from "@partner-up-dev/design-web";
 import {
   useRecordStudySprintEvent,
   useStartStudySprintSession,
diff --git a/apps/frontend/src/processes/route-handoff/MatchedPRHandoffOverlay.vue b/apps/frontend/src/processes/route-handoff/MatchedPRHandoffOverlay.vue
index ecb9801fa..746547a43 100644
--- a/apps/frontend/src/processes/route-handoff/MatchedPRHandoffOverlay.vue
+++ b/apps/frontend/src/processes/route-handoff/MatchedPRHandoffOverlay.vue
@@ -39,18 +39,18 @@
           >
             <template #trigger="{ open, pending, disabled, joined, errorMessage }">
               <div class="matched-pr-handoff__actions">
-                <Button
-                  type="button"
-                  tone="surface"
+                <PuButton
+
+                  tone="neutral" variant="soft"
                   block
                   data-testid="anchor-event-form-mode.matched.cancel"
                   :disabled="pending"
                   @click="handleCancel"
                 >
                   {{ t("common.cancel") }}
-                </Button>
-                <Button
-                  type="button"
+                </PuButton>
+                <PuButton
+
                   block
                   data-testid="anchor-event-form-mode.matched.join"
                   :loading="pending"
@@ -62,7 +62,7 @@
                       ? t("prPage.partnerSection.rosterJoined")
                       : t("prPage.join")
                   }}
-                </Button>
+                </PuButton>
               </div>
               <p
                 v-if="errorMessage"
@@ -82,7 +82,6 @@
 import { computed, onBeforeUnmount, ref, watch } from "vue";
 import { useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
-import Button from "@/shared/ui/actions/Button.vue";
 import PRFactsCard from "@/domains/pr/ui/composites/PRFactsCard.vue";
 import PRJoinAction from "@/domains/pr/ui/sections/PRJoinAction.vue";
 import { prDetailPath } from "@/domains/pr/routing/routes";
@@ -92,6 +91,7 @@ import {
   useMatchedPRHandoff,
   type RouteHandoffRect,
 } from "@/processes/route-handoff/useMatchedPRHandoff";
+import { PuButton } from "@partner-up-dev/design-web";
 
 const handoff = useMatchedPRHandoff();
 const router = useRouter();
diff --git a/apps/frontend/src/processes/wechat/WeChatOAuthHandoffGate.vue b/apps/frontend/src/processes/wechat/WeChatOAuthHandoffGate.vue
index 4e5c59d40..3eeaff45e 100644
--- a/apps/frontend/src/processes/wechat/WeChatOAuthHandoffGate.vue
+++ b/apps/frontend/src/processes/wechat/WeChatOAuthHandoffGate.vue
@@ -15,17 +15,17 @@
       <p class="wechat-oauth-handoff__description">{{ description }}</p>
 
       <div v-if="state !== 'loading'" class="wechat-oauth-handoff__actions">
-        <Button
+        <PuButton
           v-if="state === 'failed'"
-          type="button"
-          tone="primary"
+
+          tone="primary" variant="solid"
           @click="retry"
         >
           重新尝试
-        </Button>
-        <Button type="button" tone="surface" @click="continueAsGuest">
+        </PuButton>
+        <PuButton tone="neutral" variant="soft" @click="continueAsGuest">
           先以访客浏览
-        </Button>
+        </PuButton>
       </div>
     </section>
   </main>
@@ -34,7 +34,6 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import Button from "@/shared/ui/actions/Button.vue";
 import { ensureAuthSessionBootstrapped } from "@/processes/auth/useAuthSessionBootstrap";
 import {
   clearWeChatOAuthHandoffFromAddressBar,
@@ -47,6 +46,7 @@ import {
   clearWeChatOAuthTrace,
   trackWeChatOAuthTrace,
 } from "@/processes/wechat/oauth-trace";
+import { PuButton } from "@partner-up-dev/design-web";
 
 const HANDOFF_SLOW_THRESHOLD_MS = 8_000;
 
diff --git a/apps/frontend/src/shared/ui/AGENTS.md b/apps/frontend/src/shared/ui/AGENTS.md
index 26e810dc5..ccdc4fba9 100644
--- a/apps/frontend/src/shared/ui/AGENTS.md
+++ b/apps/frontend/src/shared/ui/AGENTS.md
@@ -13,9 +13,7 @@ Do not move a component into `shared/ui` just because two pages happen to look s
 
 Actions:
 
-- `actions/Button.vue`: shared button primitive. Prefer it over page-local button classes; use `appearance="pill"` for compact CTA clusters and `appearance="rect"` for dialogs or block actions. Keep `tone` choices narrow.
-- `PuButton` from `@partner-up-dev/design-web`: default package action primitive for command buttons, route CTAs, href CTAs, icon actions, and action-looking links. Use the package `action` prop directly at usage sites instead of adding a local action-link wrapper.
-- `actions/FeedbackButton.vue`: shared transient feedback action button for short-lived pending/success/error feedback states.
+- `PuButton` from `@partner-up-dev/design-web`: default package action primitive for command buttons, native form submit/reset actions, route CTAs, href CTAs, icon actions, action-looking links, and short-lived pending/success/error feedback states. Use `shape`, `tone`, `variant`, `action`, `feedback`, `loading`, and `block` directly at usage sites instead of adding local action wrappers.
 
 Containers and layout:
 
@@ -47,7 +45,7 @@ Overlay:
 ## Reuse Rules
 
 - Prefer composing these primitives in pages and domain sections before creating new page-local shells.
-- Keep app-specific action treatment styles inside the lowest remaining app-owned action primitives (`Button` and `FeedbackButton`); otherwise compose package `PuButton` / `PuCard` directly instead of re-declaring action recipes.
+- Compose package `PuButton` / `PuCard` directly instead of re-declaring reusable action recipes. Keep app-specific layout around action groups in the owning page or domain surface.
 - If a component needs backend-derived policy logic, workflow branching, or domain vocabulary, keep it in the owning domain and compose shared primitives inside it.
 - If a primitive variant is needed in a third distinct place, extend the shared primitive API instead of cloning the component locally.
 - When extending a primitive API, update this file in the same change so the new contract stays discoverable.
diff --git a/apps/frontend/src/shared/ui/actions/Button.vue b/apps/frontend/src/shared/ui/actions/Button.vue
deleted file mode 100644
index 1d1cbe9f3..000000000
--- a/apps/frontend/src/shared/ui/actions/Button.vue
+++ /dev/null
@@ -1,370 +0,0 @@
-<template>
-  <button
-    class="ui-button"
-    :class="[
-      `ui-button--appearance-${props.appearance}`,
-      `ui-button--tone-${resolvedTone}`,
-      `ui-button--size-${props.size}`,
-      {
-        'ui-button--block': isBlock,
-        'ui-button--full-width': isBlock,
-        'is-loading': props.loading,
-      },
-    ]"
-    :type="props.type"
-    :form="props.form"
-    :disabled="props.disabled || props.loading"
-    @click="$emit('click', $event)"
-  >
-    <span
-      v-if="$slots.leading && !props.loading"
-      class="ui-button__leading"
-      aria-hidden="true"
-    >
-      <slot name="leading" />
-    </span>
-    <span
-      v-if="props.loading"
-      class="ui-button__spinner"
-      aria-hidden="true"
-    ></span>
-    <span class="ui-button__label">
-      <slot />
-    </span>
-    <span
-      v-if="$slots.trailing && !props.loading"
-      class="ui-button__trailing"
-      aria-hidden="true"
-    >
-      <slot name="trailing" />
-    </span>
-  </button>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-
-type ButtonAppearance = "rect" | "pill";
-type ButtonTone =
-  | "primary"
-  | "primary-outline"
-  | "secondary"
-  | "outline"
-  | "surface"
-  | "tertiary"
-  | "dashed"
-  | "danger"
-  | "ghost";
-type ButtonSize = "sm" | "md" | "lg";
-
-const props = withDefaults(
-  defineProps<{
-    type?: "button" | "submit" | "reset";
-    form?: string;
-    variant?: "primary" | "secondary";
-    appearance?: ButtonAppearance;
-    tone?: ButtonTone;
-    size?: ButtonSize;
-    loading?: boolean;
-    disabled?: boolean;
-    block?: boolean;
-    fullWidth?: boolean;
-  }>(),
-  {
-    type: "button",
-    form: undefined,
-    variant: undefined,
-    appearance: "rect",
-    tone: undefined,
-    size: "md",
-    loading: false,
-    disabled: false,
-    block: false,
-    fullWidth: false,
-  },
-);
-
-const resolvedTone = computed<ButtonTone>(() => {
-  if (props.tone) {
-    return props.tone;
-  }
-  return props.variant === "secondary" ? "secondary" : "primary";
-});
-
-const isBlock = computed(() => props.block || props.fullWidth);
-
-defineEmits<{
-  click: [event: MouseEvent];
-}>();
-</script>
-
-<style lang="scss" scoped>
-.ui-button {
-  position: relative;
-  min-width: 0;
-  border: 1px solid transparent;
-  text-decoration: none;
-  user-select: none;
-  -webkit-user-select: none;
-  cursor: pointer;
-  transition:
-    background-color 180ms ease,
-    border-color 180ms ease,
-    color 180ms ease,
-    box-shadow 180ms ease,
-    transform 180ms ease,
-    opacity 180ms ease,
-    filter 180ms ease;
-
-  &:disabled {
-    opacity: var(--sys-opacity-disabled);
-    cursor: not-allowed;
-    box-shadow: none;
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--sys-color-primary);
-    outline-offset: 2px;
-  }
-}
-
-.ui-button--block,
-.ui-button--full-width {
-  width: 100%;
-}
-
-.ui-button--appearance-rect {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--sys-spacing-xsmall);
-  border-radius: var(--sys-radius-small);
-}
-
-.ui-button--appearance-pill {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--sys-spacing-xsmall);
-  border-radius: 999px;
-}
-
-.ui-button--appearance-rect.ui-button--tone-primary {
-  border: none;
-  background: var(--sys-color-primary);
-  color: var(--sys-color-on-primary);
-}
-
-.ui-button--appearance-rect.ui-button--tone-secondary {
-  border-color: var(--sys-color-secondary);
-  background: transparent;
-  color: var(--sys-color-secondary);
-}
-
-.ui-button--appearance-rect.ui-button--tone-primary-outline {
-  border-color: var(--sys-color-primary);
-  background: transparent;
-  color: var(--sys-color-primary);
-}
-
-.ui-button--appearance-rect.ui-button--tone-outline {
-  border-color: var(--sys-color-outline);
-  background: transparent;
-  color: var(--sys-color-on-surface);
-}
-
-.ui-button--appearance-rect.ui-button--tone-surface {
-  border-color: var(--sys-color-outline);
-  background: var(--sys-color-surface-container);
-  color: var(--sys-color-on-surface);
-}
-
-.ui-button--appearance-rect.ui-button--tone-danger {
-  border-color: var(--sys-color-error);
-  background: transparent;
-  color: var(--sys-color-error);
-}
-
-.ui-button--appearance-rect.ui-button--tone-tertiary {
-  border: none;
-  background: var(--sys-color-tertiary);
-  color: var(--sys-color-on-tertiary);
-}
-
-.ui-button--appearance-rect.ui-button--tone-dashed {
-  border-style: dashed;
-  border-color: var(--sys-color-outline);
-  background: transparent;
-  color: var(--sys-color-on-surface);
-}
-
-.ui-button--appearance-rect.ui-button--tone-ghost {
-  background: transparent;
-  color: var(--sys-color-on-surface);
-
-  &:hover:not(:disabled) {
-    background: var(--sys-color-surface-container-high);
-  }
-}
-
-.ui-button--appearance-pill.ui-button--tone-primary {
-  background: var(--sys-color-primary);
-  color: var(--sys-color-on-primary);
-}
-
-.ui-button--appearance-pill.ui-button--tone-secondary {
-  background: var(--sys-color-secondary);
-  color: var(--sys-color-on-secondary);
-}
-
-.ui-button--appearance-pill.ui-button--tone-primary-outline {
-  border-color: var(--sys-color-primary);
-  background: transparent;
-  color: var(--sys-color-primary);
-}
-
-.ui-button--appearance-pill.ui-button--tone-outline {
-  border-color: var(--sys-color-outline);
-  background: transparent;
-  color: var(--sys-color-on-surface);
-}
-
-.ui-button--appearance-pill.ui-button--tone-surface {
-  background: var(--sys-color-surface-container-lowest);
-  border-color: var(--sys-color-outline-variant);
-  color: var(--sys-color-on-surface);
-}
-
-.ui-button--appearance-pill.ui-button--tone-danger {
-  background: transparent;
-  border-color: var(--sys-color-error);
-  color: var(--sys-color-error);
-}
-
-.ui-button--appearance-pill.ui-button--tone-tertiary {
-  background: var(--sys-color-tertiary);
-  color: var(--sys-color-on-tertiary);
-}
-
-.ui-button--appearance-pill.ui-button--tone-dashed {
-  border-style: dashed;
-  border-color: var(--sys-color-outline);
-  background: transparent;
-  color: var(--sys-color-on-surface);
-}
-
-.ui-button--appearance-pill.ui-button--tone-ghost {
-  background: transparent;
-  color: var(--sys-color-on-surface);
-}
-
-.ui-button--size-sm {
-  @include mx.pu-font(control);
-}
-
-.ui-button--size-md {
-  @include mx.pu-font(control);
-}
-
-.ui-button--size-lg {
-  @include mx.pu-font(section);
-}
-
-.ui-button--appearance-rect.ui-button--size-sm {
-  min-height: var(--sys-spacing-large);
-  padding: var(--sys-spacing-xsmall) var(--sys-spacing-small);
-}
-
-.ui-button--appearance-rect.ui-button--size-md {
-  min-height: calc(var(--sys-spacing-large) + var(--sys-spacing-small) + var(--sys-spacing-xsmall));
-  padding: var(--sys-spacing-small) var(--sys-spacing-medium);
-}
-
-.ui-button--appearance-rect.ui-button--size-lg {
-  min-height: calc(calc(var(--sys-spacing-large) + var(--sys-spacing-small) + var(--sys-spacing-xsmall)) + var(--sys-spacing-small));
-  padding: var(--sys-spacing-medium) var(--sys-spacing-large);
-}
-
-.ui-button--appearance-pill.ui-button--size-sm {
-  min-height: var(--sys-spacing-large);
-  padding: var(--sys-spacing-xsmall) var(--sys-spacing-small);
-}
-
-.ui-button--appearance-pill.ui-button--size-md {
-  min-height: calc(var(--sys-spacing-large) + var(--sys-spacing-small) + var(--sys-spacing-xsmall));
-  padding: var(--sys-spacing-small) var(--sys-spacing-medium);
-}
-
-.ui-button--appearance-pill.ui-button--size-lg {
-  min-height: calc(calc(var(--sys-spacing-large) + var(--sys-spacing-small) + var(--sys-spacing-xsmall)) + var(--sys-spacing-small));
-  padding: var(--sys-spacing-small) var(--sys-spacing-large);
-}
-
-.ui-button--appearance-pill.ui-button--tone-surface:hover:not(:disabled),
-.ui-button--appearance-pill.ui-button--tone-danger:hover:not(:disabled),
-.ui-button--appearance-pill.ui-button--tone-tertiary:hover:not(:disabled),
-.ui-button--appearance-pill.ui-button--tone-dashed:hover:not(:disabled),
-.ui-button--appearance-pill.ui-button--tone-ghost:hover:not(:disabled),
-.ui-button--appearance-pill.ui-button--tone-primary-outline:hover:not(:disabled),
-.ui-button--appearance-rect.ui-button--tone-primary:hover:not(:disabled),
-.ui-button--appearance-rect.ui-button--tone-primary-outline:hover:not(:disabled),
-.ui-button--appearance-rect.ui-button--tone-secondary:hover:not(:disabled),
-.ui-button--appearance-rect.ui-button--tone-outline:hover:not(:disabled),
-.ui-button--appearance-rect.ui-button--tone-surface:hover:not(:disabled),
-.ui-button--appearance-rect.ui-button--tone-tertiary:hover:not(:disabled),
-.ui-button--appearance-rect.ui-button--tone-dashed:hover:not(:disabled),
-.ui-button--appearance-rect.ui-button--tone-danger:hover:not(:disabled) {
-  filter: brightness(0.98);
-}
-
-.ui-button:active:not(:disabled) {
-  transform: scale(0.99);
-}
-
-.ui-button__label {
-  min-width: 0;
-}
-
-.ui-button__leading,
-.ui-button__trailing,
-.ui-button__spinner {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.ui-button__leading :deep([class^="i-"]),
-.ui-button__leading :deep([class*=" i-"]),
-.ui-button__trailing :deep([class^="i-"]),
-.ui-button__trailing :deep([class*=" i-"]) {
-  @include mx.pu-icon(small);
-}
-
-.ui-button__spinner {
-  width: 1em;
-  height: 1em;
-  border: 2px solid transparent;
-  border-top-color: currentColor;
-  border-radius: 50%;
-  animation: ui-button-spin 0.8s linear infinite;
-}
-
-.is-loading .ui-button__label {
-  opacity: 0.92;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .ui-button,
-  .ui-button__spinner {
-    transition: none !important;
-    animation: none !important;
-  }
-}
-
-@keyframes ui-button-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-</style>
diff --git a/apps/frontend/src/shared/ui/actions/FeedbackButton.vue b/apps/frontend/src/shared/ui/actions/FeedbackButton.vue
deleted file mode 100644
index 2eff44d2e..000000000
--- a/apps/frontend/src/shared/ui/actions/FeedbackButton.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<template>
-  <Button
-    class="ui-feedback-button"
-    :class="`ui-feedback-button--state-${props.state}`"
-    :type="props.type"
-    :appearance="props.appearance"
-    :tone="props.tone"
-    :size="props.size"
-    :loading="isPending"
-    :disabled="props.disabled"
-    :block="isBlock"
-    @click="$emit('click', $event)"
-  >
-    <template v-if="$slots.leading" #leading>
-      <slot name="leading" />
-    </template>
-    <slot />
-    <template v-if="$slots.trailing" #trailing>
-      <slot name="trailing" />
-    </template>
-  </Button>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import Button from "@/shared/ui/actions/Button.vue";
-
-type FeedbackButtonAppearance = "rect" | "pill";
-type FeedbackButtonTone =
-  | "primary"
-  | "secondary"
-  | "outline"
-  | "surface"
-  | "danger"
-  | "ghost";
-type FeedbackButtonSize = "sm" | "md" | "lg";
-type FeedbackButtonState = "idle" | "pending" | "success" | "error";
-
-const props = withDefaults(
-  defineProps<{
-    type?: "button" | "submit" | "reset";
-    appearance?: FeedbackButtonAppearance;
-    tone?: FeedbackButtonTone;
-    size?: FeedbackButtonSize;
-    state?: FeedbackButtonState;
-    loading?: boolean;
-    disabled?: boolean;
-    block?: boolean;
-    fullWidth?: boolean;
-  }>(),
-  {
-    type: "button",
-    appearance: "rect",
-    tone: "primary",
-    size: "md",
-    state: "idle",
-    loading: false,
-    disabled: false,
-    block: false,
-    fullWidth: false,
-  },
-);
-
-const isPending = computed(() => props.loading || props.state === "pending");
-const isBlock = computed(() => props.block || props.fullWidth);
-
-defineEmits<{
-  click: [event: MouseEvent];
-}>();
-</script>
-
-<style lang="scss" scoped>
-.ui-button.ui-feedback-button.ui-feedback-button--state-success {
-  background: var(--sys-color-tertiary);
-  border-color: var(--sys-color-tertiary);
-  color: var(--sys-color-on-tertiary);
-  opacity: 1;
-}
-
-.ui-button.ui-feedback-button.ui-feedback-button--state-error {
-  background: var(--sys-color-error);
-  border-color: var(--sys-color-error);
-  color: var(--sys-color-on-error);
-  opacity: 1;
-}
-
-.ui-button.ui-feedback-button.ui-feedback-button--state-pending {
-  opacity: 1;
-}
-
-.ui-button.ui-feedback-button.ui-feedback-button--state-success:hover:not(:disabled),
-.ui-button.ui-feedback-button.ui-feedback-button--state-error:hover:not(:disabled) {
-  filter: brightness(0.98);
-}
-</style>
diff --git a/apps/frontend/src/shared/ui/sections/APRNotificationSubscriptions.vue b/apps/frontend/src/shared/ui/sections/APRNotificationSubscriptions.vue
index b3947abd8..f5c05f78d 100644
--- a/apps/frontend/src/shared/ui/sections/APRNotificationSubscriptions.vue
+++ b/apps/frontend/src/shared/ui/sections/APRNotificationSubscriptions.vue
@@ -6,16 +6,16 @@
         <p class="subscription-desc">{{ item.description }}</p>
       </div>
 
-      <Button
+      <PuButton
         v-if="item.actionKind === 'OPEN_SUBSCRIBE' && item.pending"
         class="subscription-action"
         :tone="actionButtonTone"
+        variant="outline"
         size="sm"
-        type="button"
         disabled
       >
         {{ props.updatingLabel }}
-      </Button>
+      </PuButton>
 
       <div
         v-else-if="
@@ -26,14 +26,14 @@
         "
         class="open-subscribe-proxy"
       >
-        <Button
+        <PuButton
           class="subscription-action"
           :tone="actionButtonTone"
+          variant="outline"
           size="sm"
-          type="button"
         >
           {{ item.actionLabel }}
-        </Button>
+        </PuButton>
 
         <wx-open-subscribe
           class="open-subscribe-overlay"
@@ -55,32 +55,32 @@
         </wx-open-subscribe>
       </div>
 
-      <Button
+      <PuButton
         v-else-if="
           item.actionKind === 'SHOW_MINIPROGRAM_WEBVIEW_NOTICE' &&
           item.actionLabel
         "
         class="subscription-action"
         :tone="actionButtonTone"
+        variant="outline"
         size="sm"
-        type="button"
         :disabled="item.actionDisabled || item.pending"
         @click="showMiniProgramWebViewNotice = true"
       >
         {{ item.actionLabel }}
-      </Button>
+      </PuButton>
 
-      <Button
+      <PuButton
         v-else-if="item.actionLabel"
         class="subscription-action"
         :tone="actionButtonTone"
+        variant="outline"
         size="sm"
-        type="button"
         :disabled="item.actionDisabled || item.pending"
         @click="handleAction(item.key)"
       >
         {{ item.pending ? props.updatingLabel : item.actionLabel }}
-      </Button>
+      </PuButton>
     </div>
   </article>
 
@@ -98,8 +98,8 @@ import {
   useWeChatNotificationSubscriptionsPanel,
   type WeChatNotificationKind,
 } from "@/shared/wechat/useWeChatNotificationSubscriptionsPanel";
-import Button from "@/shared/ui/actions/Button.vue";
 import WeChatMiniProgramJssdkNoticeModal from "@/shared/wechat/WeChatMiniProgramJssdkNoticeModal.vue";
+import { PuButton } from "@partner-up-dev/design-web";
 
 const props = withDefaults(
   defineProps<{
@@ -148,7 +148,7 @@ const items = computed(() =>
   }),
 );
 const actionButtonTone = computed(() =>
-  props.outlineProfile === "surface" ? "outline" : "primary-outline",
+  props.outlineProfile === "surface" ? "neutral" : "primary",
 );
 
 const panelError = computed(() => {
diff --git a/apps/frontend/src/shared/upload/ImageUrlInput.vue b/apps/frontend/src/shared/upload/ImageUrlInput.vue
index ca78e0c74..030607d8e 100644
--- a/apps/frontend/src/shared/upload/ImageUrlInput.vue
+++ b/apps/frontend/src/shared/upload/ImageUrlInput.vue
@@ -23,17 +23,17 @@
         :disabled="disabled"
         @update:model-value="handleUrlInput"
       />
-      <Button
-        appearance="pill"
-        tone="outline"
+      <PuButton
+        shape="pill"
+        tone="neutral" variant="outline"
         size="sm"
-        type="button"
+
         :disabled="disabled || isUploading"
         :loading="isUploading"
         @click="handlePickImage"
       >
         {{ isUploading ? uploadingLabel : uploadLabel }}
-      </Button>
+      </PuButton>
     </div>
 
     <img
@@ -52,9 +52,8 @@
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
 import type { ImageUploadPurpose } from "@partner-up-dev/backend";
-import Button from "@/shared/ui/actions/Button.vue";
 import { useCloudStorage } from "@/shared/upload/useCloudStorage";
-import { PuInput } from "@partner-up-dev/design-web";
+import { PuButton, PuInput } from "@partner-up-dev/design-web";
 
 const props = withDefaults(
   defineProps<{
diff --git a/apps/frontend/src/shared/wechat/WeChatMiniProgramJssdkNoticeModal.vue b/apps/frontend/src/shared/wechat/WeChatMiniProgramJssdkNoticeModal.vue
index 54cca994c..9d180e897 100644
--- a/apps/frontend/src/shared/wechat/WeChatMiniProgramJssdkNoticeModal.vue
+++ b/apps/frontend/src/shared/wechat/WeChatMiniProgramJssdkNoticeModal.vue
@@ -35,28 +35,27 @@
       </p>
 
       <div class="mini-program-jssdk-notice__actions">
-        <Button
-          tone="primary-outline"
-          appearance="rect"
-          type="button"
+        <PuButton
+          tone="primary" variant="outline"
+          shape="rect"
+
           @click="copyCurrentUrl"
         >
           {{ copyButtonLabel }}
-        </Button>
-        <Button appearance="rect" type="button" @click="emit('close')">
+        </PuButton>
+        <PuButton shape="rect" @click="emit('close')">
           {{ t("common.close") }}
-        </Button>
+        </PuButton>
       </div>
     </div>
   </PuModal>
 </template>
 
 <script setup lang="ts">
-import { PuModal } from "@partner-up-dev/design-web";
+import { PuButton, PuModal } from "@partner-up-dev/design-web";
 import { computed, ref, toRef, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { copyToClipboard } from "@/lib/clipboard";
-import Button from "@/shared/ui/actions/Button.vue";
 import { useCurrentWebPageQrCode } from "@/shared/wechat/useCurrentWebPageQrCode";
 
 const props = defineProps<{
diff --git a/apps/frontend/src/styles/AGENTS.md b/apps/frontend/src/styles/AGENTS.md
index b100cf953..681e90978 100644
--- a/apps/frontend/src/styles/AGENTS.md
+++ b/apps/frontend/src/styles/AGENTS.md
@@ -28,8 +28,7 @@ Add or keep `dcs` only when the governed output itself needs central ownership a
 Extend a shared primitive only when the treatment is stable across consumers and the HTML/interaction contract belongs with the style. Current examples:
 
 - page scaffold components for safe-area layout
-- `Button` and `FeedbackButton` for app-owned action treatments
-- `PuButton` from `@partner-up-dev/design-web` for package-owned route/href CTAs and action-looking links
+- `PuButton` from `@partner-up-dev/design-web` for command buttons, form submit/reset actions, route/href CTAs, feedback actions, and action-looking links
 - `PuCard` from `@partner-up-dev/design-web` for reusable card shells and selectable/navigation card roots
 - form primitives for reusable input shells
 
diff --git a/tasks/design-web-package-integration/README.md b/tasks/design-web-package-integration/README.md
index b463fe079..da63ba03f 100644
--- a/tasks/design-web-package-integration/README.md
+++ b/tasks/design-web-package-integration/README.md
@@ -23,7 +23,9 @@ Hypothesis: the frontend can move from locally forked `src/shared/ui` and `src/s
   1. `SurfaceCard` -> `PuCard` compatibility wrapper, because `PuSurfaceCard` is not present in the published `0.1.0` package.
   2. `PageScaffold*` -> unified `PuPageScaffold` compatibility wrappers, because only `PuPageScaffold` is present in the published `0.1.0` package.
   3. `InlineNotice` -> `PuInlineNotice`.
-- `Button` migration is intentionally deferred because the current MVP-HA `Button` API is slot-based while `PuButton` is prop-based.
+- `Button` and `FeedbackButton` have migrated directly to package `PuButton`;
+  the local action wrappers are no longer part of the frontend shared UI
+  contract.
 
 ## Guardrails Touched
 
diff --git a/tasks/design-web-package-integration/component-migration/00-control-surface.md b/tasks/design-web-package-integration/component-migration/00-control-surface.md
index 3678ab88f..c4a1f8ee1 100644
--- a/tasks/design-web-package-integration/component-migration/00-control-surface.md
+++ b/tasks/design-web-package-integration/component-migration/00-control-surface.md
@@ -16,7 +16,7 @@ design package should not absorb.
 
 - Input route: `Constraint`.
 - Active mode: `Execute`.
-- Implementation status: fourth action-card slice implemented and verified
+- Implementation status: fifth action-button slice implemented and verified
   locally.
   Usage sites now consume the relevant package components directly and the
   migrated local facades have been deleted.
@@ -131,6 +131,11 @@ design package should not absorb.
   with structured `action`; `ChoiceCard` usage sites now directly use `PuCard`
   with `selectable` for button-like choices or `action` for route cards. Local
   `ActionLink.vue` and `ChoiceCard.vue` were deleted.
+- Fifth slice completed: local `Button` and `FeedbackButton` usage sites now
+  directly use `PuButton`. Old local prop vocabulary was mapped at usage sites,
+  submit buttons use `action.native`, feedback actions use the package
+  `feedback` prop, old `.ui-button` layout selectors were removed or retargeted
+  to package classes, and `Button.vue` / `FeedbackButton.vue` were deleted.
 
 ## First Slice Candidate
 
@@ -178,6 +183,11 @@ diff --check` passed.
   `ActionLink`/`ChoiceCard` reference scan returned no source references; old
   `PuButton`/`PuCard` prop vocabulary scan returned no findings; `git diff
 --check` passed.
+- Fifth-slice verification on 2026-06-13: frontend build passed; token lint
+  passed; frontend unit tests passed, 26 files / 117 tests; migrated
+  `Button`/`FeedbackButton` reference scan returned no source references; old
+  `PuButton` prop vocabulary scan returned no findings; `git diff --check`
+  passed.
 - Agent Skill verification on 2026-06-13: `pnpm dlx
 @tanstack/intent@latest list --json` found
   `@partner-up-dev/design-web#design-web` from the installed `0.4.0` package;
diff --git a/tasks/design-web-package-integration/component-migration/10-slice-index.md b/tasks/design-web-package-integration/component-migration/10-slice-index.md
index 9600cba63..68f264cb1 100644
--- a/tasks/design-web-package-integration/component-migration/10-slice-index.md
+++ b/tasks/design-web-package-integration/component-migration/10-slice-index.md
@@ -91,9 +91,9 @@ Started after explicit user approval.
 
 | File                            | Local Component                        | Package Target             | Status   |
 | ------------------------------- | -------------------------------------- | -------------------------- | -------- |
-| `components/button.md`          | `shared/ui/actions/Button.vue`         | `PuButton`                 | Proposed |
+| `components/button.md`          | `shared/ui/actions/Button.vue`         | `PuButton`                 | Done     |
 | `components/action-link.md`     | `shared/ui/actions/ActionLink.vue`     | `PuButton` action prop     | Done     |
-| `components/feedback-button.md` | `shared/ui/actions/FeedbackButton.vue` | `PuButton` feedback prop   | Proposed |
+| `components/feedback-button.md` | `shared/ui/actions/FeedbackButton.vue` | `PuButton` feedback prop   | Done     |
 | `components/choice-card.md`     | `shared/ui/containers/ChoiceCard.vue`  | `PuCard` action/selectable | Done     |
 
 ## Selected Fourth Slice Candidate
@@ -105,9 +105,24 @@ Started after explicit user direction to handle `ActionLink` and `ChoiceCard`.
 | 1     | `components/action-link.md` | Replace local `ActionLink` call sites with `PuButton` plus structured `action`; map routes to `{ to }`, anchors to `{ href, external, target, rel }`, and delete the local primitive after call sites clear. | Done   |
 | 2     | `components/choice-card.md` | Replace local `ChoiceCard` call sites with `PuCard`; use `selectable` for button-like choices, `action` for route cards, and delete the local primitive after call sites clear.                              | Done   |
 
+## Selected Fifth Slice Candidate
+
+Completed after explicit user start.
+
+| Order | File                            | Scope                                                                                                                                                                                           | Status   |
+| ----- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
+| 1     | `components/button.md`          | Replace local `Button` usage sites directly with `PuButton`, map old prop vocabulary at each usage site, clean CSS selectors that target local button internals, and delete the local primitive. | Done |
+| 2     | `components/feedback-button.md` | Replace local `FeedbackButton` usage sites directly with `PuButton feedback`, keep product pending/success/error state intent at the usage site, and delete the local primitive.                | Done |
+
+## Sixth Pass: Tabs
+
+| File                      | Local Component                    | Package Target | Status   |
+| ------------------------- | ---------------------------------- | -------------- | -------- |
+| `components/tab-bar.md`   | `shared/ui/navigation/TabBar.vue`  | `PuTabs`       | Proposed |
+
 ## Deferred Domain Or Product Chrome
 
 These should not be first-pass package migrations unless a component slice needs
-them directly: `PageHeader`, `TabBar`,
-`ProductLocalDateCalendarPicker`, `TimelinePolicyPicker`, `MultiStopToggle`, and
-domain-owned PR/Event/Route/Commerce UI.
+them directly: `PageHeader`, `ProductLocalDateCalendarPicker`,
+`TimelinePolicyPicker`, `MultiStopToggle`, and domain-owned
+PR/Event/Route/Commerce UI.
diff --git a/tasks/design-web-package-integration/component-migration/90-discussion-log.md b/tasks/design-web-package-integration/component-migration/90-discussion-log.md
index 3e10de54d..feffd7af4 100644
--- a/tasks/design-web-package-integration/component-migration/90-discussion-log.md
+++ b/tasks/design-web-package-integration/component-migration/90-discussion-log.md
@@ -223,3 +223,44 @@ apps/frontend/node_modules/@partner-up-dev/design-web/skills/design-web`.
 - Verification passed: frontend build, token lint, frontend unit tests (26
   files / 117 tests), source reference scan, `PuButton`/`PuCard` old-prop
   vocabulary scan, and `git diff --check`.
+- Fourth slice was committed as
+  `5b2635ec refactor(frontend): migrate action cards to design package`.
+- User selected the next exploration order: fifth slice for `Button` and
+  `FeedbackButton`, sixth slice for `PuTabs`, plus an audit that old `InfoRow`
+  migrated to `PuDescriptionItem` rather than `PuCell`.
+- Fifth-slice inventory found 220 local `<Button>` tags, 97 local button
+  imports, and 2 `<FeedbackButton>` tags. Because the user already rejected
+  compatibility wrappers, the fifth slice must migrate usage sites directly to
+  `PuButton` and delete `Button.vue` / `FeedbackButton.vue` after call sites
+  clear.
+- `PuButton` package docs expose `action`, `shape`, `tone`, `variant`, `size`,
+  `feedback`, `loading`, `disabled`, and `block`. Current inventory found no
+  local `<Button form=...>` usage, so the missing package `form` prop is not a
+  current blocker; submit buttons still need explicit native actions.
+- Sixth-slice inventory found 2 local `<TabBar>` tags. The target is `PuTabs`
+  with value-based tab items. Existing `tabClass` should be treated as a visual
+  escape hatch to retire, not as a reason to wrap `PuTabs`.
+- InfoRow audit confirmed all former production `InfoRow` / `InfoRowAction`
+  usage was in `PRFactsCard.vue` and now uses `PuDescriptionList` /
+  `PuDescriptionItem`. Current `PuCell` usage is unrelated
+  `FormModePreferenceControl.vue` usage.
+- Fifth slice started after explicit user approval.
+- All local `Button` and `FeedbackButton` usage sites were migrated directly to
+  `PuButton`. Static old `appearance`, local `tone`, `full-width`, and
+  native `type` props were mapped at usage sites to package `shape`,
+  `tone`/`variant`, `block`, and `action.native`.
+- `FeedbackButton` state usage moved to the package `feedback` prop in
+  `ShareAsLink.vue` and `ShareToXiaohongshu.vue`; no feedback wrapper remains.
+- The dynamic APR notification action tone was changed from old local tone
+  values (`outline` / `primary-outline`) to package `tone` plus
+  `variant="outline"`.
+- Old `.ui-button` and `.ui-button__label` layout selectors were removed or
+  retargeted to package `.pu-button` and `.pu-button__content` classes where
+  the selector only owned local layout constraints.
+- `apps/frontend/src/shared/ui/actions/Button.vue` and
+  `FeedbackButton.vue` were deleted. `shared/ui` and frontend style guidance
+  now identify `PuButton` as the action primitive instead of local action
+  wrappers.
+- Fifth-slice verification passed: frontend build, token lint, frontend unit
+  tests (26 files / 117 tests), old local action reference scan, old
+  `PuButton` prop vocabulary scan, and `git diff --check`.
diff --git a/tasks/design-web-package-integration/component-migration/components/button.md b/tasks/design-web-package-integration/component-migration/components/button.md
index 88b22c360..263c387d1 100644
--- a/tasks/design-web-package-integration/component-migration/components/button.md
+++ b/tasks/design-web-package-integration/component-migration/components/button.md
@@ -4,8 +4,8 @@
 
 - Local owner: `apps/frontend/src/shared/ui/actions/Button.vue`.
 - Package target: `PuButton`.
-- Desired final state: package owns command button rendering while local API
-  either disappears or remains only as a compatibility facade during rollout.
+- Desired final state: package owns command button rendering and the local
+  `Button.vue` primitive is deleted after usage sites move to `PuButton`.
 
 ## Current Contract
 
@@ -13,15 +13,16 @@
   `disabled`, `block`, `fullWidth`.
 - Slots: default, `leading`, `trailing`.
 - Event: `click`.
-- Current references: highest blast radius shared primitive.
+- Current references: highest blast radius shared primitive. Inventory on
+  2026-06-13 found 220 `<Button>` tags and 97 imports of the local primitive.
 
 ## Migration Shape
 
 - From: local `appearance` plus mixed `tone` treatment vocabulary.
 - To: package `shape`, semantic `tone`, visual `variant`, `size`, `loading`,
   `feedback`, `block`, and structured `action`.
-- Compatibility strategy: first implement an internal mapping while preserving
-  local props and attrs; only later migrate call sites to package vocabulary.
+- Migration strategy: direct usage-site migration only. Do not preserve
+  `Button.vue` as a compatibility facade around `PuButton`.
 
 ## Proposed Mapping
 
@@ -39,7 +40,9 @@
   call site is explicitly intended.
 - `tone="ghost"` -> `tone="neutral" variant="ghost"`.
 - `loading` -> package `loading`.
-- `type` -> package `action={{ native: type }}` if needed.
+- `type` -> package `:action="{ native: type }"` if needed.
+- Existing inventory found no `form` attribute usage on local `<Button>`, so
+  the package API not exposing a `form` prop is not currently a blocker.
 
 ## Risks
 
@@ -47,6 +50,8 @@
 - Existing CSS reaches into `.ui-button` and `.ui-button__label`; those
   dependencies must be mapped or removed in the same slice.
 - Button is broad enough that a visual diff or staged PR is warranted.
+- Form submit buttons need `:action="{ native: 'submit' }"` because `PuButton`
+  defaults native actions to `type="button"` when no native action is supplied.
 
 ## Verification
 
@@ -54,3 +59,27 @@
 - Targeted PR action tests.
 - Browser smoke on PR detail, Anchor Event, Me, Admin PR, Commerce checkout,
   and ordering support surfaces.
+
+## Slice Result
+
+- All local `Button` usage sites now import and render `PuButton` directly.
+- Static old prop vocabulary was mapped at usage sites:
+  `appearance` -> `shape`, old local `tone` values -> package
+  `tone` / `variant`, `full-width` -> `block`, and submit/reset `type` ->
+  `action.native`.
+- The only dynamic old tone surface,
+  `APRNotificationSubscriptions.vue`, now computes package `tone` and uses
+  `variant="outline"` directly.
+- Local CSS dependencies on `.ui-button` and `.ui-button__label` were removed
+  or retargeted to package DOM classes where they only owned layout.
+- `apps/frontend/src/shared/ui/actions/Button.vue` was deleted.
+
+## Slice Verification
+
+- `pnpm --filter @partner-up-dev/frontend build` passed.
+- `pnpm --filter @partner-up-dev/frontend lint:tokens` passed.
+- `pnpm test:unit:frontend` passed, 26 files / 117 tests.
+- Old local `Button` / `FeedbackButton` reference scan returned no findings
+  under `apps/frontend/src`.
+- Old `PuButton` prop vocabulary scan returned no findings on `<PuButton>`.
+- `git diff --check` passed.
diff --git a/tasks/design-web-package-integration/component-migration/components/feedback-button.md b/tasks/design-web-package-integration/component-migration/components/feedback-button.md
index 7c612cd5b..3acb6ee92 100644
--- a/tasks/design-web-package-integration/component-migration/components/feedback-button.md
+++ b/tasks/design-web-package-integration/component-migration/components/feedback-button.md
@@ -18,13 +18,37 @@
 
 - From: local wrapper around local `Button` with state classes.
 - To: package `PuButton` with mapped `feedback` and `loading`.
-- Compatibility strategy: migrate after `Button` mapping is proven.
+- Migration strategy: direct usage-site migration only. Do not keep
+  `FeedbackButton.vue` as a wrapper around `PuButton`.
+- Current references: inventory on 2026-06-13 found 2 `<FeedbackButton>` tags,
+  both under share methods.
 
 ## Risks
 
 - Success/error visual treatment may differ.
 - Pending state must remain disabled/announced consistently with existing UX.
+- The component should move in the same slice as `Button` because it currently
+  depends on the local `Button` primitive.
 
 ## Verification
 
 - Build, token lint, targeted share/action feedback tests or smoke.
+
+## Slice Result
+
+- Both former `FeedbackButton` usage sites now import and render `PuButton`
+  directly with the `feedback` prop.
+- `ShareAsLink.vue` maps its share state to package feedback values at the
+  usage site.
+- `ShareToXiaohongshu.vue` maps copy success/error state to package feedback
+  values and uses package-native outline actions.
+- `apps/frontend/src/shared/ui/actions/FeedbackButton.vue` was deleted.
+
+## Slice Verification
+
+- `pnpm --filter @partner-up-dev/frontend build` passed.
+- `pnpm --filter @partner-up-dev/frontend lint:tokens` passed.
+- `pnpm test:unit:frontend` passed, 26 files / 117 tests.
+- Old local `FeedbackButton` reference scan returned no findings under
+  `apps/frontend/src`.
+- `git diff --check` passed.
diff --git a/tasks/design-web-package-integration/component-migration/components/info-row.md b/tasks/design-web-package-integration/component-migration/components/info-row.md
index 76e1406b8..37496597e 100644
--- a/tasks/design-web-package-integration/component-migration/components/info-row.md
+++ b/tasks/design-web-package-integration/component-migration/components/info-row.md
@@ -4,10 +4,11 @@
 
 - Local owner: `apps/frontend/src/shared/ui/display/InfoRow.vue` and
   `InfoRowAction.vue` usage sites.
-- Package target: `PuDescriptionList`, `PuDescriptionItem`, or `PuCell`.
+- Package target: `PuDescriptionList` and `PuDescriptionItem` for the former
+  InfoRow usage surface.
 - Desired final state: read-only facts use package description components;
-  actionable rows use package cell/action patterns; local info-row primitives
-  are deleted after call sites clear.
+  actionable facts use `PuDescriptionItem` action slots or native usage-site
+  controls; local info-row primitives are deleted after call sites clear.
 
 ## Current Contract
 
@@ -20,7 +21,7 @@
 
 - From: two local metadata row primitives.
 - To: use `PuDescriptionList` with `PuDescriptionItem` for read-only fact
-  groups; use `PuCell` for interactive value affordances.
+  groups and description-item action slots for interactive value affordances.
 - Completion rule: no `<InfoRow>` / `<InfoRowAction>` usage and no local
   info-row files remain unless a concrete package API blocker is recorded.
 - Parity rule: do not recreate the old inline/stack row component on top of
@@ -46,3 +47,8 @@
 - Action affordances are composed at the usage site with native buttons in
   `PuDescriptionItem` action slots.
 - `InfoRow.vue` and `InfoRowAction.vue` were deleted.
+- Follow-up audit on 2026-06-13 confirmed all former production `InfoRow` and
+  `InfoRowAction` usage was in `PRFactsCard.vue` and migrated to
+  `PuDescriptionList` / `PuDescriptionItem`, not `PuCell`. Current `PuCell`
+  usage in `FormModePreferenceControl.vue` is unrelated to the old InfoRow
+  primitive.
diff --git a/tasks/design-web-package-integration/component-migration/components/tab-bar.md b/tasks/design-web-package-integration/component-migration/components/tab-bar.md
new file mode 100644
index 000000000..f37acb684
--- /dev/null
+++ b/tasks/design-web-package-integration/component-migration/components/tab-bar.md
@@ -0,0 +1,46 @@
+# TabBar Migration
+
+## Target
+
+- Local owner: `apps/frontend/src/shared/ui/navigation/TabBar.vue`.
+- Package target: `PuTabs`.
+- Desired final state: value-based tab navigation uses the package `PuTabs`
+  API directly and local `TabBar.vue` is deleted after usage sites clear.
+
+## Current Contract
+
+- Props: `items`, `modelValue`, `ariaLabel`.
+- Item shape: `{ key, label, disabled?, tabClass? }`.
+- Event: `update:modelValue`.
+- Current references: inventory on 2026-06-13 found 2 `<TabBar>` tags:
+  `PRCreatePage.vue` and `AnchorEventListModeSurface.vue`.
+
+## Migration Shape
+
+- From: local key-based horizontal tabbar with per-item `tabClass` escape hatch.
+- To: package `PuTabs` with value-based `{ value, label, disabled?, showDot? }`
+  items, `v-model`, package variant, and package keyboard behavior.
+- Migration strategy: direct usage-site migration only. Do not keep
+  `TabBar.vue` as a wrapper around `PuTabs`.
+
+## Proposed Mapping
+
+- `item.key` -> `value`.
+- `item.label` -> `label`.
+- `item.disabled` -> `disabled`.
+- `v-model` / `update:modelValue` -> `PuTabs` `v-model`.
+- `ariaLabel` -> native `aria-label` attr if package forwarding supports it;
+  otherwise confirm whether `customClass` or package API is sufficient before
+  production migration.
+
+## Risks
+
+- Existing `tabClass` usage may be visual-only product chrome. If the class is
+  only styling, prefer package-native `variant`, `size`, or `showDot`; do not
+  recreate a wrapper to preserve arbitrary per-tab classes.
+- `PuTabs` is value-based and should not be migrated as index-only state.
+
+## Verification
+
+- Build, token lint, frontend unit tests.
+- Targeted browser smoke on PR create tabs and Anchor Event list mode tabs.

From 992ac4dc296fed723f3d132a9dc682d686d8de19 Mon Sep 17 00:00:00 2001
From: Lanzhijiang <lanzhijiang@foxmail.com>
Date: Sat, 13 Jun 2026 22:23:36 +0800
Subject: [PATCH 07/94] refactor(frontend): migrate tabs to design package

---
 apps/frontend/AGENTS.md                       |   2 +-
 .../surfaces/AnchorEventListModeSurface.vue   |  30 +--
 apps/frontend/src/pages/PRCreatePage.vue      |  14 +-
 apps/frontend/src/shared/ui/AGENTS.md         |   4 +
 .../src/shared/ui/navigation/TabBar.vue       | 189 ------------------
 .../design-web-package-integration/README.md  |   2 +
 .../component-migration/00-control-surface.md |  10 +-
 .../component-migration/10-slice-index.md     |  10 +-
 .../component-migration/90-discussion-log.md  |  20 ++
 .../component-migration/components/tab-bar.md |  27 ++-
 10 files changed, 79 insertions(+), 229 deletions(-)
 delete mode 100644 apps/frontend/src/shared/ui/navigation/TabBar.vue

diff --git a/apps/frontend/AGENTS.md b/apps/frontend/AGENTS.md
index 7cd4a6790..f3c2bf41e 100644
--- a/apps/frontend/AGENTS.md
+++ b/apps/frontend/AGENTS.md
@@ -39,7 +39,7 @@ Useful commands:
 - Styling governance: use direct `sys` tokens first; add `dcs` only for real governed outputs; extend shared primitives only for stable reusable treatments with a real component contract.
 - Make use of SCSS features.
 - Page layout reuse: prefer `src/shared/ui/layout/PageScaffold.vue`, `PageScaffoldFlow.vue`, `PageScaffoldCentered.vue`, and `DesktopPageScaffold.vue` for route pages; do not duplicate root safe-area container styles in page files.
-- Shared UI reuse: before adding page-local shells or feedback widgets, check `src/shared/ui/AGENTS.md` and prefer package or shared primitives such as `PuCard`, `ChoiceCard`, `FormField`, `Button`, `InfoRow`, `Chip`, `ChipGroup`, `InlineNotice`, `EmptyState`, `ConfirmDialog`, and `Avatar` when the fit is real.
+- Shared UI reuse: before adding page-local shells or feedback widgets, check `src/shared/ui/AGENTS.md` and prefer package primitives such as `PuButton`, `PuCard`, `PuCell`, `PuDescriptionList`, `PuDescriptionItem`, `PuChip`, `PuChipGroup`, `PuTag`, `PuInlineNotice`, `PuEmptyState`, `PuLoadingState`, `PuTabs`, `PuModal`, `PuDialog`, and `PuDrawer` when the fit is real.
 - Feature composition boundary: extract reusable feature UI plus business logic into dedicated feature components instead of leaving logic in page files.
 - Container vs feature split: keep container components presentational-only; they should provide layout and shell and should not own feature side effects.
 - Usage-site assembly: pages should assemble container plus feature components and only own page context such as visibility, section placement, and page-level error aggregation.
diff --git a/apps/frontend/src/domains/event/ui/surfaces/AnchorEventListModeSurface.vue b/apps/frontend/src/domains/event/ui/surfaces/AnchorEventListModeSurface.vue
index 8d8dc1b56..49597ca15 100644
--- a/apps/frontend/src/domains/event/ui/surfaces/AnchorEventListModeSurface.vue
+++ b/apps/frontend/src/domains/event/ui/surfaces/AnchorEventListModeSurface.vue
@@ -15,11 +15,12 @@
     class="date-section"
     data-testid="anchor-event-list-mode.surface"
   >
-    <TabBar
+    <PuTabs
       v-if="dateTabs.length > 0"
-      :items="dateTabs"
+      :tabs="dateTabs"
       :model-value="selectedDateKey ?? 'none'"
-      :aria-label="t('anchorEvent.dateLabel')"
+      variant="pill"
+      size="md"
       @update:model-value="handleDateTabChange"
     />
 
@@ -131,7 +132,7 @@
 import { computed, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import type { PRAllowEditAfterReady } from "@partner-up-dev/backend";
-import TabBar from "@/shared/ui/navigation/TabBar.vue";
+import { PuTabs } from "@partner-up-dev/design-web";
 import PRPreviewCard from "@/domains/pr/ui/primitives/PRPreviewCard.vue";
 import EventPRCreateCard from "@/domains/event/ui/primitives/EventPRCreateCard.vue";
 import EventDummyPRCard from "@/domains/event/ui/primitives/EventDummyPRCard.vue";
@@ -172,9 +173,8 @@ import {
 import { trackEvent } from "@/shared/telemetry/track";
 
 type DateTabItem = {
-  key: string;
+  value: string;
   label: string;
-  tabClass?: string;
 };
 
 type AnchorEventTimeWindow =
@@ -191,7 +191,6 @@ type DateGroup = {
   key: string;
   label: string;
   isExpiredDate: boolean;
-  tabClass?: string;
   timeWindows: DateGroupTimeWindowItem[];
 };
 
@@ -279,8 +278,6 @@ const buildPrDetailRoute = (prId: number): string =>
   `/pr/${prId}?fromEvent=${props.eventId}`;
 
 const LIST_MODE_EXPIRED_DATE_LIMIT = 3;
-const LIST_MODE_EXPIRED_TAB_CLASS = "tab-bar__tab--expired";
-
 const sortedBrowseTimeWindows = computed(() => {
   const timeWindows = detail.value?.browseTimeWindows ?? [];
   return [...timeWindows].sort((left, right) => {
@@ -367,7 +364,6 @@ const dateGroups = computed<DateGroup[]>(() => {
       key: groupKey,
       label: groupLabel,
       isExpiredDate,
-      tabClass: isExpiredDate ? LIST_MODE_EXPIRED_TAB_CLASS : undefined,
       timeWindows: [timeWindowViewModel],
     });
   });
@@ -393,22 +389,17 @@ const dateGroups = computed<DateGroup[]>(() => {
       key: groupKey,
       label: groupLabel,
       isExpiredDate,
-      tabClass: isExpiredDate ? LIST_MODE_EXPIRED_TAB_CLASS : undefined,
       timeWindows: [],
     });
   });
 
-  return toVisibleListModeDateGroups(groups).map((group) => ({
-    ...group,
-    tabClass: group.isExpiredDate ? LIST_MODE_EXPIRED_TAB_CLASS : undefined,
-  }));
+  return toVisibleListModeDateGroups(groups);
 });
 
 const dateTabs = computed<DateTabItem[]>(() =>
   dateGroups.value.map((group) => ({
-    key: group.key,
+    value: group.key,
     label: group.label,
-    tabClass: group.tabClass,
   })),
 );
 
@@ -882,14 +873,11 @@ const handleOpenDummyDetailInList = async (item: VisibleDummyItem) => {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
+  gap: var(--sys-spacing-medium);
   min-height: 0;
   margin-bottom: 1rem;
 }
 
-.date-section :deep(.tab-bar) {
-  margin-bottom: 1rem;
-}
-
 .date-panel {
   display: flex;
   flex: 1 1 auto;
diff --git a/apps/frontend/src/pages/PRCreatePage.vue b/apps/frontend/src/pages/PRCreatePage.vue
index d4c77e8cd..ed6d3bd45 100644
--- a/apps/frontend/src/pages/PRCreatePage.vue
+++ b/apps/frontend/src/pages/PRCreatePage.vue
@@ -5,10 +5,11 @@
     </template>
 
     <div class="pr-create-page__body">
-      <TabBar
-        :items="modeTabs"
+      <PuTabs
+        :tabs="modeTabs"
         :model-value="activeMode"
-        :aria-label="t('createPage.modeSwitchAria')"
+        variant="pill"
+        size="md"
         @update:model-value="handleModeChange"
         data-region="mode-switch"
       />
@@ -65,12 +66,11 @@ import { useI18n } from "vue-i18n";
 import { useRoute, useRouter } from "vue-router";
 import PREditor from "@/domains/pr/ui/forms/PREditor.vue";
 import NLPRForm from "@/domains/pr/ui/forms/NLPRForm.vue";
-import TabBar from "@/shared/ui/navigation/TabBar.vue";
 import PageFooter from "@/shared/ui/sections/PageFooter.vue";
 import PRCreateHeader from "@/domains/pr/ui/sections/PRCreateHeader.vue";
 import PRCreateFooterActions from "@/domains/pr/ui/sections/PRCreateFooterActions.vue";
 import type { CreateSubmissionMode } from "@/domains/pr/model/pr-editor";
-import { PuPageScaffold } from "@partner-up-dev/design-web";
+import { PuPageScaffold, PuTabs } from "@partner-up-dev/design-web";
 
 const resolveQueryMode = (value: unknown): "nl" | "form" | null => {
   if (value === "nl" || value === "form") return value;
@@ -97,11 +97,11 @@ const initialMode =
 const activeMode = ref<"nl" | "form">(initialMode);
 const modeTabs = computed(() => [
   {
-    key: "nl",
+    value: "nl",
     label: t("createPage.nlModeTab"),
   },
   {
-    key: "form",
+    value: "form",
     label: t("createPage.formModeTab"),
   },
 ]);
diff --git a/apps/frontend/src/shared/ui/AGENTS.md b/apps/frontend/src/shared/ui/AGENTS.md
index ccdc4fba9..e5a08cedc 100644
--- a/apps/frontend/src/shared/ui/AGENTS.md
+++ b/apps/frontend/src/shared/ui/AGENTS.md
@@ -36,6 +36,10 @@ Display and feedback:
 - `PuInlineNotice`, `PuEmptyState`, and `PuLoadingState` from `@partner-up-dev/design-web`: default local notice, empty state, and loading state primitives.
 - `PuImg` from `@partner-up-dev/design-web`: default image primitive, including avatar-style fallback when `name`, `fallbackInitial`, `shape`, and `bordered` are enough for the surface.
 
+Navigation:
+
+- `PuTabs` from `@partner-up-dev/design-web`: default value-based tab navigation primitive. Use `{ value, label, disabled?, showDot? }` tab items directly at usage sites instead of preserving local tab wrappers or per-tab style escape hatches.
+
 Overlay:
 
 - `PuModal` from `@partner-up-dev/design-web`: generic focused modal shell. Use direct package imports at usage sites; set `closeOnOverlay` or `closeOnEscape` only when the workflow needs custom dismissal rules.
diff --git a/apps/frontend/src/shared/ui/navigation/TabBar.vue b/apps/frontend/src/shared/ui/navigation/TabBar.vue
deleted file mode 100644
index 138f38aa1..000000000
--- a/apps/frontend/src/shared/ui/navigation/TabBar.vue
+++ /dev/null
@@ -1,189 +0,0 @@
-<template>
-  <div class="tab-bar">
-    <div
-      ref="tabListElement"
-      class="tab-bar__list"
-      role="tablist"
-      :aria-label="ariaLabel"
-    >
-      <button
-        v-for="item in items"
-        :key="item.key"
-        :ref="(element) => setTabButtonRef(item.key, element)"
-        type="button"
-        role="tab"
-        class="tab-bar__tab"
-        :class="[
-          { 'tab-bar__tab--active': modelValue === item.key },
-          item.tabClass,
-        ]"
-        :aria-selected="modelValue === item.key"
-        :disabled="item.disabled === true"
-        @click="handleSelect(item)"
-      >
-        {{ item.label }}
-      </button>
-    </div>
-    <slot name="append" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { nextTick, ref, watch, type ComponentPublicInstance } from "vue";
-
-type TabBarKey = string | number;
-
-type TabBarItem = {
-  key: TabBarKey;
-  label: string;
-  disabled?: boolean;
-  tabClass?: string;
-};
-
-const props = defineProps<{
-  items: TabBarItem[];
-  modelValue: TabBarKey;
-  ariaLabel?: string;
-}>();
-
-const emit = defineEmits<{
-  "update:modelValue": [value: TabBarKey];
-}>();
-
-const tabButtons = new Map<TabBarKey, HTMLButtonElement>();
-const tabListElement = ref<HTMLDivElement | null>(null);
-
-const setTabButtonRef = (
-  key: TabBarKey,
-  element: Element | ComponentPublicInstance | null,
-) => {
-  if (element instanceof HTMLButtonElement) {
-    tabButtons.set(key, element);
-    return;
-  }
-
-  tabButtons.delete(key);
-};
-
-const handleSelect = (item: TabBarItem) => {
-  if (item.disabled === true) return;
-  emit("update:modelValue", item.key);
-};
-
-const scrollActiveTabIntoView = async () => {
-  await nextTick();
-  const tabList = tabListElement.value;
-  const activeTab = tabButtons.get(props.modelValue);
-  if (!tabList || !activeTab) {
-    return;
-  }
-
-  const tabListRect = tabList.getBoundingClientRect();
-  const activeTabRect = activeTab.getBoundingClientRect();
-  const leftDelta = activeTabRect.left - tabListRect.left;
-  const targetLeft = tabList.scrollLeft + leftDelta;
-  const maxScrollLeft = Math.max(0, tabList.scrollWidth - tabList.clientWidth);
-  const clampedTargetLeft = Math.min(Math.max(0, targetLeft), maxScrollLeft);
-
-  tabList.scrollTo({
-    left: clampedTargetLeft,
-    behavior: "smooth",
-  });
-};
-
-watch(
-  () => props.modelValue,
-  () => {
-    void scrollActiveTabIntoView();
-  },
-  { immediate: true },
-);
-
-watch(
-  () => props.items.map((item) => item.key),
-  () => {
-    void scrollActiveTabIntoView();
-  },
-);
-</script>
-
-<style lang="scss" scoped>
-.tab-bar {
-  display: flex;
-  gap: var(--sys-spacing-small);
-  align-items: flex-start;
-  min-width: 0;
-}
-
-.tab-bar__list {
-  display: flex;
-  gap: var(--sys-spacing-small);
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-  scrollbar-width: none;
-}
-
-.tab-bar__list::-webkit-scrollbar {
-  display: none;
-}
-
-.tab-bar__tab {
-  @include mx.pu-font(control);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--sys-spacing-xsmall);
-  flex-shrink: 0;
-  min-height: calc(var(--sys-spacing-large) + var(--sys-spacing-small) + var(--sys-spacing-xsmall));
-  padding: var(--sys-spacing-small) var(--sys-spacing-medium);
-  border: 1px solid var(--sys-color-outline);
-  border-radius: 999px;
-  background: transparent;
-  color: var(--sys-color-on-surface);
-  text-decoration: none;
-  user-select: none;
-  -webkit-user-select: none;
-  cursor: pointer;
-  transition:
-    background-color 150ms ease,
-    color 150ms ease,
-    border-color 150ms ease,
-    opacity 150ms ease,
-    transform 150ms ease;
-
-  &:hover:not(:disabled) {
-    background: var(--sys-color-surface-container-high);
-  }
-
-  &:active:not(:disabled) {
-    transform: scale(0.99);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--sys-color-primary);
-    outline-offset: 2px;
-  }
-
-  &:disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-}
-
-.tab-bar__tab--active {
-  background: var(--sys-color-primary);
-  color: var(--sys-color-on-primary);
-  border-color: var(--sys-color-primary);
-
-  &:hover:not(:disabled) {
-    background: var(--sys-color-primary);
-  }
-}
-
-.tab-bar__tab--expired {
-  border-style: dashed;
-  opacity: 0.6; // TODO replace with design token
-}
-</style>
diff --git a/tasks/design-web-package-integration/README.md b/tasks/design-web-package-integration/README.md
index da63ba03f..69b6c331e 100644
--- a/tasks/design-web-package-integration/README.md
+++ b/tasks/design-web-package-integration/README.md
@@ -26,6 +26,8 @@ Hypothesis: the frontend can move from locally forked `src/shared/ui` and `src/s
 - `Button` and `FeedbackButton` have migrated directly to package `PuButton`;
   the local action wrappers are no longer part of the frontend shared UI
   contract.
+- `TabBar` has migrated directly to package `PuTabs`; the local navigation
+  wrapper is no longer part of the frontend shared UI contract.
 
 ## Guardrails Touched
 
diff --git a/tasks/design-web-package-integration/component-migration/00-control-surface.md b/tasks/design-web-package-integration/component-migration/00-control-surface.md
index c4a1f8ee1..4eec1caed 100644
--- a/tasks/design-web-package-integration/component-migration/00-control-surface.md
+++ b/tasks/design-web-package-integration/component-migration/00-control-surface.md
@@ -16,8 +16,7 @@ design package should not absorb.
 
 - Input route: `Constraint`.
 - Active mode: `Execute`.
-- Implementation status: fifth action-button slice implemented and verified
-  locally.
+- Implementation status: sixth tabs slice implemented and verified locally.
   Usage sites now consume the relevant package components directly and the
   migrated local facades have been deleted.
 
@@ -136,6 +135,10 @@ design package should not absorb.
   submit buttons use `action.native`, feedback actions use the package
   `feedback` prop, old `.ui-button` layout selectors were removed or retargeted
   to package classes, and `Button.vue` / `FeedbackButton.vue` were deleted.
+- Sixth slice completed: local `TabBar` usage sites now directly use `PuTabs`.
+  Old `{ key, label, disabled?, tabClass? }` items were mapped to package
+  value-based tab items, the visual `tabClass` escape hatch was retired, and
+  `TabBar.vue` was deleted.
 
 ## First Slice Candidate
 
@@ -188,6 +191,9 @@ diff --check` passed.
   `Button`/`FeedbackButton` reference scan returned no source references; old
   `PuButton` prop vocabulary scan returned no findings; `git diff --check`
   passed.
+- Sixth-slice verification on 2026-06-13: frontend build passed; token lint
+  passed; frontend unit tests passed, 26 files / 117 tests; migrated `TabBar`
+  reference scan returned no source references; `git diff --check` passed.
 - Agent Skill verification on 2026-06-13: `pnpm dlx
 @tanstack/intent@latest list --json` found
   `@partner-up-dev/design-web#design-web` from the installed `0.4.0` package;
diff --git a/tasks/design-web-package-integration/component-migration/10-slice-index.md b/tasks/design-web-package-integration/component-migration/10-slice-index.md
index 68f264cb1..94b71ad38 100644
--- a/tasks/design-web-package-integration/component-migration/10-slice-index.md
+++ b/tasks/design-web-package-integration/component-migration/10-slice-index.md
@@ -118,7 +118,15 @@ Completed after explicit user start.
 
 | File                      | Local Component                    | Package Target | Status   |
 | ------------------------- | ---------------------------------- | -------------- | -------- |
-| `components/tab-bar.md`   | `shared/ui/navigation/TabBar.vue`  | `PuTabs`       | Proposed |
+| `components/tab-bar.md`   | `shared/ui/navigation/TabBar.vue`  | `PuTabs`       | Done     |
+
+## Selected Sixth Slice Candidate
+
+Started after explicit user direction.
+
+| Order | File                    | Scope                                                                                                                                                                                                 | Status |
+| ----- | ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
+| 1     | `components/tab-bar.md` | Replace local `TabBar` call sites directly with `PuTabs`, map key-based items to value-based tabs, retire the per-tab `tabClass` escape hatch, and delete the local primitive after call sites clear. | Done   |
 
 ## Deferred Domain Or Product Chrome
 
diff --git a/tasks/design-web-package-integration/component-migration/90-discussion-log.md b/tasks/design-web-package-integration/component-migration/90-discussion-log.md
index feffd7af4..d3f1c73c5 100644
--- a/tasks/design-web-package-integration/component-migration/90-discussion-log.md
+++ b/tasks/design-web-package-integration/component-migration/90-discussion-log.md
@@ -264,3 +264,23 @@ apps/frontend/node_modules/@partner-up-dev/design-web/skills/design-web`.
 - Fifth-slice verification passed: frontend build, token lint, frontend unit
   tests (26 files / 117 tests), old local action reference scan, old
   `PuButton` prop vocabulary scan, and `git diff --check`.
+- Fifth slice was committed as
+  `c0ba0968 refactor(frontend): migrate action buttons to design package`.
+- Sixth tabs slice started after the user asked to commit the fifth slice and
+  continue. `PRCreatePage.vue` and `AnchorEventListModeSurface.vue` now import
+  `PuTabs` directly from `@partner-up-dev/design-web`.
+- `TabBar` items were mapped from `{ key, label }` to package value-based
+  `{ value, label }` tab items. The Anchor Event list-mode `tabClass` escape
+  hatch for expired-date dashed tabs was retired instead of recreated around
+  `PuTabs`.
+- Current `PuTabs` public API does not expose a way to label its internal
+  `role="tablist"` with the old `ariaLabel` prop. This is recorded as a package
+  API follow-up, not a reason to keep a local wrapper.
+- `apps/frontend/src/shared/ui/navigation/TabBar.vue` was deleted after its
+  usage sites cleared.
+- Follow-up correction: `AnchorEventListModeSurface.vue` now gives the package
+  tabs and `date-panel` spacing through the parent `.date-section` flex `gap`
+  instead of relying on `PuTabs customClass` plus a deep selector.
+- Sixth-slice verification passed: frontend build, token lint, frontend unit
+  tests (26 files / 117 tests), old `TabBar` / `tabClass` source reference
+  scan, and `git diff --check`.
diff --git a/tasks/design-web-package-integration/component-migration/components/tab-bar.md b/tasks/design-web-package-integration/component-migration/components/tab-bar.md
index f37acb684..d5e881289 100644
--- a/tasks/design-web-package-integration/component-migration/components/tab-bar.md
+++ b/tasks/design-web-package-integration/component-migration/components/tab-bar.md
@@ -6,6 +6,8 @@
 - Package target: `PuTabs`.
 - Desired final state: value-based tab navigation uses the package `PuTabs`
   API directly and local `TabBar.vue` is deleted after usage sites clear.
+- Status: Done. `PRCreatePage.vue` and `AnchorEventListModeSurface.vue` now
+  import `PuTabs` directly, and the local `TabBar.vue` file was deleted.
 
 ## Current Contract
 
@@ -29,18 +31,27 @@
 - `item.label` -> `label`.
 - `item.disabled` -> `disabled`.
 - `v-model` / `update:modelValue` -> `PuTabs` `v-model`.
-- `ariaLabel` -> native `aria-label` attr if package forwarding supports it;
-  otherwise confirm whether `customClass` or package API is sufficient before
-  production migration.
+- `ariaLabel` -> no direct app-side mapping in this slice. Current `PuTabs`
+  public API does not expose a way to label its internal `role="tablist"`;
+  record this as a package API follow-up rather than creating a local wrapper.
+- `tabClass` -> retired. It was used only for the expired-date dashed visual
+  treatment in list mode and is not recreated around `PuTabs`.
+- Layout spacing between list-mode tabs and the `date-panel` is owned by the
+  parent `.date-section` flex `gap`, not by a package `customClass` hook.
 
 ## Risks
 
-- Existing `tabClass` usage may be visual-only product chrome. If the class is
-  only styling, prefer package-native `variant`, `size`, or `showDot`; do not
-  recreate a wrapper to preserve arbitrary per-tab classes.
+- Existing `tabClass` usage was visual-only product chrome. It was removed
+  instead of recreated as an app wrapper or per-tab package-class override.
 - `PuTabs` is value-based and should not be migrated as index-only state.
+- Package follow-up: expose an `ariaLabel` / `ariaLabelledby` API or equivalent
+  forwarding to the internal tablist.
 
 ## Verification
 
-- Build, token lint, frontend unit tests.
-- Targeted browser smoke on PR create tabs and Anchor Event list mode tabs.
+- `pnpm --filter @partner-up-dev/frontend build` - passed.
+- `pnpm --filter @partner-up-dev/frontend lint:tokens` - passed.
+- `pnpm test:unit:frontend` - passed, 26 files / 117 tests.
+- Local reference scan for `TabBar`, `tab-bar__`, and `tabClass` under
+  `apps/frontend/src` returned no findings.
+- `git diff --check` - passed.

From e1244e07b3c75082fc33f4b85dfdad48e00adf9e Mon Sep 17 00:00:00 2001
From: Lanzhijiang <lanzhijiang@foxmail.com>
Date: Sun, 14 Jun 2026 15:14:42 +0800
Subject: [PATCH 08/94] refactor(frontend): deepen design-web adoption

---
 apps/frontend/package.json                    |   2 +-
 .../AdminCommerceProductErrorToast.vue        |  16 --
 .../AdminCommerceProductWorkspaceGate.vue     |   5 +-
 .../admin/ui/poi/sections/PoiBasicSection.vue |  34 ++--
 .../admin/ui/pr/components/PRFilterRail.vue   |  16 +-
 .../admin/ui/pr/views/AdminPRBasicView.vue    |  48 ++---
 .../admin/ui/pr/views/AdminPRMessagesView.vue |   6 +-
 .../ui/ordering/OrderingPageShell.vue         |  19 +-
 .../surfaces/AnchorEventFormModeSurface.vue   |   6 +-
 .../domains/pr/ui/composites/PRFactsCard.vue  |  14 +-
 .../domains/pr/ui/composites/PRHeroHeader.vue |   8 +-
 .../src/domains/pr/ui/forms/NLPRForm.vue      |   5 +-
 .../src/domains/pr/ui/forms/PREditor.vue      |  14 +-
 .../domains/pr/ui/sections/InlineNLPRForm.vue |   4 +-
 apps/frontend/src/pages/AboutPage.vue         |  15 +-
 .../frontend/src/pages/AdminAnalyticsPage.vue |  38 ++--
 .../src/pages/AdminAnchorEventPage.vue        |   8 +-
 .../pages/AdminCommerceFulfillmentPage.vue    |  14 +-
 .../src/pages/AdminCommerceOfferPage.vue      |   8 +-
 .../src/pages/AdminCommerceOrderBillPage.vue  |  10 +-
 .../src/pages/AdminCommercePlacementPage.vue  |   8 +-
 .../src/pages/AdminCommerceProductPage.vue    |  13 +-
 .../pages/AdminFeedbackQuestionnairesPage.vue |   5 +-
 apps/frontend/src/pages/AdminLoginPage.vue    |   6 +-
 apps/frontend/src/pages/AdminPaymentPage.vue  |   8 +-
 apps/frontend/src/pages/AdminPoisPage.vue     |   5 +-
 .../src/pages/AdminRideHailingPage.vue        |   8 +-
 .../src/pages/AnchorEventLandingPage.vue      |  21 ++-
 apps/frontend/src/pages/BIEntryPage.vue       |   5 +-
 .../src/pages/CommerceBillDetailPage.vue      |  10 +-
 .../src/pages/CommerceOrderDetailPage.vue     |  14 +-
 apps/frontend/src/pages/ContactAuthorPage.vue |  21 ++-
 .../frontend/src/pages/ContactSupportPage.vue |  17 +-
 apps/frontend/src/pages/EventPRSearchPage.vue |  21 ++-
 apps/frontend/src/pages/EventPlazaPage.vue    |  18 +-
 .../src/pages/LocationApplicationPage.vue     |  23 ++-
 apps/frontend/src/pages/MePage.vue            |  23 ++-
 apps/frontend/src/pages/MyPRsPage.vue         |  10 +-
 apps/frontend/src/pages/PRMessagesPage.vue    |  14 +-
 .../src/pages/PRPage.creator-actions.test.ts  |  25 ++-
 apps/frontend/src/pages/PRPage.vue            |  27 ++-
 apps/frontend/src/pages/PRPairingCodePage.vue |   9 +-
 .../src/pages/PaymentCheckoutPage.vue         |  16 +-
 .../src/pages/RouteApplicationPage.vue        |  23 ++-
 .../src/pages/StudySprintPomodoroPage.vue     |   6 +-
 apps/frontend/src/pages/UserProfilePage.vue   |  15 +-
 .../src/shared/routing/useFallbackBack.ts     |  36 ++++
 .../src/shared/ui/feedback/ErrorToast.vue     |  66 -------
 .../src/shared/ui/navigation/PageHeader.vue   | 172 ------------------
 pnpm-lock.yaml                                |  10 +-
 .../component-migration/00-control-surface.md |  19 +-
 .../deep-ui-refactor/10-exploration-map.md    | 123 +++++++++++++
 .../deep-ui-refactor/20-slice-plan.md         | 160 ++++++++++++++++
 .../deep-ui-refactor/30-error-toast-usage.md  | 141 ++++++++++++++
 .../deep-ui-refactor/README.md                | 152 ++++++++++++++++
 55 files changed, 1018 insertions(+), 522 deletions(-)
 delete mode 100644 apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceProductErrorToast.vue
 create mode 100644 apps/frontend/src/shared/routing/useFallbackBack.ts
 delete mode 100644 apps/frontend/src/shared/ui/feedback/ErrorToast.vue
 delete mode 100644 apps/frontend/src/shared/ui/navigation/PageHeader.vue
 create mode 100644 tasks/design-web-package-integration/deep-ui-refactor/10-exploration-map.md
 create mode 100644 tasks/design-web-package-integration/deep-ui-refactor/20-slice-plan.md
 create mode 100644 tasks/design-web-package-integration/deep-ui-refactor/30-error-toast-usage.md
 create mode 100644 tasks/design-web-package-integration/deep-ui-refactor/README.md

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 469894a7e..0a23b2972 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -13,7 +13,7 @@
     "lint:tokens:strict": "node ./scripts/check-token-governance.mjs --strict"
   },
   "dependencies": {
-    "@partner-up-dev/design-web": "0.4.0",
+    "@partner-up-dev/design-web": "0.4.1",
     "@tanstack/vue-query": "^5.60.0",
     "@unhead/vue": "^2.1.2",
     "@vee-validate/zod": "^4.15.1",
diff --git a/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceProductErrorToast.vue b/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceProductErrorToast.vue
deleted file mode 100644
index a123bb999..000000000
--- a/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceProductErrorToast.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <ErrorToast
-    v-if="errorMessage"
-    :message="errorMessage"
-    @close="context.clearErrorMessage"
-  />
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import { useAdminCommerceProductManagementContext } from "@/domains/admin-commerce/ui/product-management/productManagementContext";
-import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-
-const context = useAdminCommerceProductManagementContext();
-const errorMessage = computed(() => context.errorMessage.value);
-</script>
diff --git a/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceProductWorkspaceGate.vue b/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceProductWorkspaceGate.vue
index 7869116a6..8bef3cb63 100644
--- a/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceProductWorkspaceGate.vue
+++ b/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceProductWorkspaceGate.vue
@@ -1,6 +1,6 @@
 <template>
   <PuLoadingState v-if="isLoading" :message="t('common.loading')" />
-  <ErrorToast v-else-if="errorMessage" :message="errorMessage" persistent />
+  <PuInlineNotice tone="error" v-else-if="errorMessage" :message="errorMessage" />
   <slot v-else />
 </template>
 
@@ -8,8 +8,7 @@
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { useAdminCommerceProductManagementContext } from "@/domains/admin-commerce/ui/product-management/productManagementContext";
-import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import { PuLoadingState } from "@partner-up-dev/design-web";
+import { PuInlineNotice, PuLoadingState } from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const context = useAdminCommerceProductManagementContext();
diff --git a/apps/frontend/src/domains/admin/ui/poi/sections/PoiBasicSection.vue b/apps/frontend/src/domains/admin/ui/poi/sections/PoiBasicSection.vue
index 708777ead..2128efcd6 100644
--- a/apps/frontend/src/domains/admin/ui/poi/sections/PoiBasicSection.vue
+++ b/apps/frontend/src/domains/admin/ui/poi/sections/PoiBasicSection.vue
@@ -235,25 +235,29 @@
           </label>
 
           <template v-if="rule.kind === 'ABSOLUTE'">
-            <label class="field">
-              <span class="field-label">{{ t("adminPois.ruleStartAtLabel") }}</span>
-              <input
+            <PuFormItem
+              :label="t('adminPois.ruleStartAtLabel')"
+              :for-id="`admin-pois-rule-${index}-start-at`"
+            >
+              <PuInput
+                :id="`admin-pois-rule-${index}-start-at`"
                 v-model="rule.startAtLocal"
-                class="field-input"
-                type="datetime-local"
-                @input="emit('mark-dirty')"
+                native-type="datetime-local"
+                @update:model-value="emit('mark-dirty')"
               />
-            </label>
+            </PuFormItem>
 
-            <label class="field">
-              <span class="field-label">{{ t("adminPois.ruleEndAtLabel") }}</span>
-              <input
+            <PuFormItem
+              :label="t('adminPois.ruleEndAtLabel')"
+              :for-id="`admin-pois-rule-${index}-end-at`"
+            >
+              <PuInput
+                :id="`admin-pois-rule-${index}-end-at`"
                 v-model="rule.endAtLocal"
-                class="field-input"
-                type="datetime-local"
-                @input="emit('mark-dirty')"
+                native-type="datetime-local"
+                @update:model-value="emit('mark-dirty')"
               />
-            </label>
+            </PuFormItem>
           </template>
 
           <template v-else>
@@ -383,7 +387,7 @@ import LocationPickerModal from "@/domains/location/ui/LocationPickerModal.vue";
 import BentoItem from "@/domains/admin/ui/layout/BentoItem.vue";
 import BentoLayout from "@/domains/admin/ui/layout/BentoLayout.vue";
 import ImageUrlInput from "@/shared/upload/ImageUrlInput.vue";
-import { PuButton } from "@partner-up-dev/design-web";
+import { PuButton, PuFormItem, PuInput } from "@partner-up-dev/design-web";
 
 type PoiRecord = NonNullable<AdminPoisResponse>[number];
 
diff --git a/apps/frontend/src/domains/admin/ui/pr/components/PRFilterRail.vue b/apps/frontend/src/domains/admin/ui/pr/components/PRFilterRail.vue
index a2cac2daf..d333cd3fc 100644
--- a/apps/frontend/src/domains/admin/ui/pr/components/PRFilterRail.vue
+++ b/apps/frontend/src/domains/admin/ui/pr/components/PRFilterRail.vue
@@ -39,15 +39,13 @@
       </select>
     </label>
 
-    <label class="field">
-      <span class="field-label">{{ t("adminPR.searchStartLabel") }}</span>
-      <input v-model="filters.startAt" class="field-input" type="datetime-local" />
-    </label>
+    <PuFormItem :label="t('adminPR.searchStartLabel')">
+      <PuInput v-model="filters.startAt" native-type="datetime-local" />
+    </PuFormItem>
 
-    <label class="field">
-      <span class="field-label">{{ t("adminPR.searchEndLabel") }}</span>
-      <input v-model="filters.endAt" class="field-input" type="datetime-local" />
-    </label>
+    <PuFormItem :label="t('adminPR.searchEndLabel')">
+      <PuInput v-model="filters.endAt" native-type="datetime-local" />
+    </PuFormItem>
   </AdminRailPanel>
 </template>
 
@@ -55,7 +53,7 @@
 import { useI18n } from "vue-i18n";
 import type { AdminPRFilters } from "@/domains/admin/use-cases/pr/useAdminPRWorkspaceSelection";
 import AdminRailPanel from "@/domains/admin/ui/layout/AdminRailPanel.vue";
-import { PuButton } from "@partner-up-dev/design-web";
+import { PuButton, PuFormItem, PuInput } from "@partner-up-dev/design-web";
 
 defineProps<{
   showCreateAction?: boolean;
diff --git a/apps/frontend/src/domains/admin/ui/pr/views/AdminPRBasicView.vue b/apps/frontend/src/domains/admin/ui/pr/views/AdminPRBasicView.vue
index f78ea4e63..578857d37 100644
--- a/apps/frontend/src/domains/admin/ui/pr/views/AdminPRBasicView.vue
+++ b/apps/frontend/src/domains/admin/ui/pr/views/AdminPRBasicView.vue
@@ -20,10 +20,9 @@
           v-if="workspaceQuery.isLoading.value"
           :message="t('common.loading')"
         />
-        <ErrorToast
+        <PuInlineNotice tone="error"
           v-else-if="workspaceQuery.error.value"
           :message="workspaceQuery.error.value.message"
-          persistent
         />
 
         <template v-else>
@@ -119,26 +118,26 @@
                 </label>
 
                 <div class="grid-2">
-                  <label class="field">
-                    <span class="field-label">{{
-                      t("adminPR.prTimeStartLabel")
-                    }}</span>
-                    <input
+                  <PuFormItem
+                    :label="t('adminPR.prTimeStartLabel')"
+                    for-id="admin-pr-start-at"
+                  >
+                    <PuInput
+                      id="admin-pr-start-at"
                       v-model="prForm.startAt"
-                      class="field-input"
-                      type="datetime-local"
+                      native-type="datetime-local"
                     />
-                  </label>
-                  <label class="field">
-                    <span class="field-label">{{
-                      t("adminPR.prTimeEndLabel")
-                    }}</span>
-                    <input
+                  </PuFormItem>
+                  <PuFormItem
+                    :label="t('adminPR.prTimeEndLabel')"
+                    for-id="admin-pr-end-at"
+                  >
+                    <PuInput
+                      id="admin-pr-end-at"
                       v-model="prForm.endAt"
-                      class="field-input"
-                      type="datetime-local"
+                      native-type="datetime-local"
                     />
-                  </label>
+                  </PuFormItem>
                 </div>
 
                 <PRPlaceModeField
@@ -412,7 +411,7 @@
             </BentoItem>
           </BentoLayout>
 
-          <ErrorToast
+          <PuInlineNotice tone="error" dismissible
             v-if="mutationErrorMessage"
             :message="mutationErrorMessage"
             @close="resetMutationErrors"
@@ -469,14 +468,21 @@ import {
   getPRRouteValidationIssue,
   type PRPlaceMode,
 } from "@/domains/pr/model/pr-route";
-import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
 import TimelinePolicyPicker from "@/shared/ui/forms/TimelinePolicyPicker.vue";
 import PRJoinGateConfigEditor from "@/domains/pr/ui/forms/PRJoinGateConfigEditor.vue";
 import PRPlaceModeField, {
   type PRPlaceModeFieldValue,
 } from "@/domains/pr/ui/forms/PRPlaceModeField.vue";
 import type { PRJoinGateConfig, PRRoute } from "@partner-up-dev/backend";
-import { PuButton, PuCard, PuLoadingState, PuDialog } from "@partner-up-dev/design-web";
+import {
+  PuButton,
+  PuCard,
+  PuDialog,
+  PuFormItem,
+  PuInlineNotice,
+  PuInput,
+  PuLoadingState,
+} from "@partner-up-dev/design-web";
 
 type PRForm = {
   title: string;
diff --git a/apps/frontend/src/domains/admin/ui/pr/views/AdminPRMessagesView.vue b/apps/frontend/src/domains/admin/ui/pr/views/AdminPRMessagesView.vue
index 3c4f12ffa..55fb6042b 100644
--- a/apps/frontend/src/domains/admin/ui/pr/views/AdminPRMessagesView.vue
+++ b/apps/frontend/src/domains/admin/ui/pr/views/AdminPRMessagesView.vue
@@ -18,10 +18,9 @@
           v-if="workspaceQuery.isLoading.value"
           :message="t('common.loading')"
         />
-        <ErrorToast
+        <PuInlineNotice tone="error"
           v-else-if="workspaceQuery.error.value"
           :message="workspaceQuery.error.value.message"
-          persistent
         />
 
         <template v-else>
@@ -271,8 +270,7 @@ import {
 } from "@/domains/admin/queries/useAdminPRManagement";
 import { useAdminAccess } from "@/domains/admin/use-cases/useAdminAccess";
 import { formatLocalDateTimeValue } from "@/shared/datetime/formatLocalDateTime";
-import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import { PuButton, PuCard, PuLoadingState } from "@partner-up-dev/design-web";
+import { PuButton, PuCard, PuInlineNotice, PuLoadingState } from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const { isAdmin, logout } = useAdminAccess();
diff --git a/apps/frontend/src/domains/commerce/ui/ordering/OrderingPageShell.vue b/apps/frontend/src/domains/commerce/ui/ordering/OrderingPageShell.vue
index eeddb2d4b..00010b785 100644
--- a/apps/frontend/src/domains/commerce/ui/ordering/OrderingPageShell.vue
+++ b/apps/frontend/src/domains/commerce/ui/ordering/OrderingPageShell.vue
@@ -1,16 +1,17 @@
 <template>
   <PuPageScaffold viewport="screen" class="ordering-page-shell" :data-testid="dataTestid">
     <template #header>
-      <PageHeader
+      <PuPageHeader
         :title="title"
         :subtitle="subtitle"
-        :back-fallback-to="backFallbackTo"
-        variant="small"
+        density="compact"
+        show-back
+        @back="handleBack"
       >
-        <template v-if="$slots.actions" #top-actions>
+        <template v-if="$slots.actions" #actions>
           <slot name="actions" />
         </template>
-      </PageHeader>
+      </PuPageHeader>
     </template>
 
     <main class="ordering-page-shell__body">
@@ -28,15 +29,17 @@
 
 <script setup lang="ts">
 import type { RouteLocationRaw } from "vue-router";
-import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
-import { PuPageScaffold } from "@partner-up-dev/design-web";
+import { PuPageHeader, PuPageScaffold } from "@partner-up-dev/design-web";
+import { useFallbackBack } from "@/shared/routing/useFallbackBack";
 
-defineProps<{
+const props = defineProps<{
   title: string;
   subtitle?: string;
   backFallbackTo: RouteLocationRaw;
   dataTestid?: string;
 }>();
+
+const { handleBack } = useFallbackBack(() => props.backFallbackTo);
 </script>
 
 <style scoped lang="scss">
diff --git a/apps/frontend/src/domains/event/ui/surfaces/AnchorEventFormModeSurface.vue b/apps/frontend/src/domains/event/ui/surfaces/AnchorEventFormModeSurface.vue
index 96817a894..8fb799ffe 100644
--- a/apps/frontend/src/domains/event/ui/surfaces/AnchorEventFormModeSurface.vue
+++ b/apps/frontend/src/domains/event/ui/surfaces/AnchorEventFormModeSurface.vue
@@ -5,10 +5,9 @@
       :message="t('common.loading')"
     />
 
-    <ErrorToast
+    <PuInlineNotice tone="error"
       v-else-if="formModeQuery.error.value"
       :message="formModeQuery.error.value.message"
-      persistent
     />
 
     <div v-else-if="formModeData" class="anchor-event-form-mode__stack">
@@ -108,7 +107,6 @@ import type {
   PartnerRequestFields,
   PRAllowEditAfterReady,
 } from "@partner-up-dev/backend";
-import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
 import { trackEvent } from "@/shared/telemetry/track";
 import { resolveTelemetryFailurePayload } from "@/shared/telemetry/result";
 import { useAnchorEventFormModeData } from "@/domains/event/queries/useAnchorEventFormModeData";
@@ -154,7 +152,7 @@ import {
 import LiquidWaveSplash from "@/processes/route-handoff/LiquidWaveSplash.vue";
 import type { LiquidSplashPhase } from "@/processes/route-handoff/LiquidWaveSplash.vue";
 import { useMatchedPRHandoff } from "@/processes/route-handoff/useMatchedPRHandoff";
-import { PuButton, PuLoadingState } from "@partner-up-dev/design-web";
+import { PuButton, PuInlineNotice, PuLoadingState } from "@partner-up-dev/design-web";
 
 const props = defineProps<{
   eventId: number;
diff --git a/apps/frontend/src/domains/pr/ui/composites/PRFactsCard.vue b/apps/frontend/src/domains/pr/ui/composites/PRFactsCard.vue
index 693c59b3c..564edac9b 100644
--- a/apps/frontend/src/domains/pr/ui/composites/PRFactsCard.vue
+++ b/apps/frontend/src/domains/pr/ui/composites/PRFactsCard.vue
@@ -1,7 +1,7 @@
 <template>
   <PuCard v-bind="$attrs" as="section" class="pr-facts-card" gap="sm">
     <PuLoadingState v-if="isLoading" :message="t('common.loading')" />
-    <ErrorToast v-else-if="error" :message="error.message" persistent />
+    <PuInlineNotice tone="error" v-else-if="error" :message="error.message" />
 
     <template v-else-if="prDetail">
       <h2 class="facts-title">活动信息</h2>
@@ -294,8 +294,16 @@ import { computed, nextTick, ref, watch } from "vue";
 import { RouterLink } from "vue-router";
 import { useI18n } from "vue-i18n";
 import type { PRId } from "@partner-up-dev/backend";
-import { PuButton, PuCard, PuChip, PuChipGroup, PuDescriptionItem, PuDescriptionList, PuLoadingState } from "@partner-up-dev/design-web";
-import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
+import {
+  PuButton,
+  PuCard,
+  PuChip,
+  PuChipGroup,
+  PuDescriptionItem,
+  PuDescriptionList,
+  PuInlineNotice,
+  PuLoadingState,
+} from "@partner-up-dev/design-web";
 import PRLocationGalleryModal from "@/domains/pr/ui/modals/PRLocationGalleryModal.vue";
 import PRRouteMapModal from "@/domains/pr/ui/modals/PRRouteMapModal.vue";
 import PRRosterModal from "@/domains/pr/ui/modals/PRRosterModal.vue";
diff --git a/apps/frontend/src/domains/pr/ui/composites/PRHeroHeader.vue b/apps/frontend/src/domains/pr/ui/composites/PRHeroHeader.vue
index 2c35a8eab..8620aa472 100644
--- a/apps/frontend/src/domains/pr/ui/composites/PRHeroHeader.vue
+++ b/apps/frontend/src/domains/pr/ui/composites/PRHeroHeader.vue
@@ -1,20 +1,22 @@
 <template>
-  <PageHeader
+  <PuPageHeader
     :title="title ?? t('prPage.metaFallbackTitle')"
+    show-back
+    :back-label="t('common.backToHome')"
     @back="emit('back')"
   >
     <template #meta>
       <PRStatusBadge :status="status" />
       <time class="created-at">{{ createdAtLabel }}</time>
     </template>
-  </PageHeader>
+  </PuPageHeader>
 </template>
 
 <script setup lang="ts">
 import { useI18n } from "vue-i18n";
 import type { PRStatus } from "@partner-up-dev/backend";
-import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
 import PRStatusBadge from "@/domains/pr/ui/primitives/PRStatusBadge.vue";
+import { PuPageHeader } from "@partner-up-dev/design-web";
 
 defineProps<{
   title?: string;
diff --git a/apps/frontend/src/domains/pr/ui/forms/NLPRForm.vue b/apps/frontend/src/domains/pr/ui/forms/NLPRForm.vue
index 7539b1f84..9e30f24c4 100644
--- a/apps/frontend/src/domains/pr/ui/forms/NLPRForm.vue
+++ b/apps/frontend/src/domains/pr/ui/forms/NLPRForm.vue
@@ -45,7 +45,7 @@
 
     <PuLoadingState v-if="isSubmitting" :message="t('nlForm.parsing')" />
 
-    <ErrorToast
+    <PuInlineNotice tone="error" dismissible
       v-if="createMutation.isError.value"
       :message="submitErrorMessage"
       @close="createMutation.reset()"
@@ -61,12 +61,11 @@ import { useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
 import { createNaturalLanguagePRValidationSchema } from "@/lib/validation";
 import { useCreatePRFromNaturalLanguage } from "@/domains/pr/queries/usePRCreate";
-import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
 import { useLandingRotatingTopic } from "@/domains/landing/use-cases/useLandingRotatingTopic";
 import { ensureAuthSessionBootstrapped } from "@/processes/auth/useAuthSessionBootstrap";
 import { useNaturalLanguageDraftStore } from "@/domains/pr/use-cases/useNaturalLanguageDraft";
 import { useWeChatVoiceInput } from "@/shared/wechat/useWeChatVoiceInput";
-import { PuButton, PuLoadingState, PuTextarea } from "@partner-up-dev/design-web";
+import { PuButton, PuInlineNotice, PuLoadingState, PuTextarea } from "@partner-up-dev/design-web";
 
 const getLocalWeekdayLabel = (date: Date): string => {
   return new Intl.DateTimeFormat(undefined, {
diff --git a/apps/frontend/src/domains/pr/ui/forms/PREditor.vue b/apps/frontend/src/domains/pr/ui/forms/PREditor.vue
index 04b298eb8..6a3b350db 100644
--- a/apps/frontend/src/domains/pr/ui/forms/PREditor.vue
+++ b/apps/frontend/src/domains/pr/ui/forms/PREditor.vue
@@ -5,10 +5,9 @@
     @submit.prevent="submitForm"
   >
     <PuLoadingState v-if="isDetailLoading" :message="t('common.loading')" />
-    <ErrorToast
+    <PuInlineNotice tone="error"
       v-else-if="detailError"
       :message="detailError.message"
-      persistent
     />
 
     <PuEmptyState
@@ -165,7 +164,7 @@
         </div>
       </Transition>
 
-      <ErrorToast
+      <PuInlineNotice tone="error" dismissible
         v-if="commandErrorMessage"
         :message="commandErrorMessage"
         @close="resetCommandErrors"
@@ -209,12 +208,17 @@ import {
   toUserUpdatePRContentFields,
 } from "@/domains/pr/model/types";
 import { clonePRFields, parseNullableNumber } from "@/domains/pr/model/form";
-import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
 import { useUserSessionStore } from "@/shared/auth/useUserSessionStore";
 import { ensureAuthSessionBootstrapped } from "@/processes/auth/useAuthSessionBootstrap";
 import { trackEvent } from "@/shared/telemetry/track";
 import { formatLocalDateTimeWindowLabel } from "@/shared/datetime/formatLocalDateTime";
-import { PuButton, PuEmptyState, PuLoadingState, PuDialog } from "@partner-up-dev/design-web";
+import {
+  PuButton,
+  PuDialog,
+  PuEmptyState,
+  PuInlineNotice,
+  PuLoadingState,
+} from "@partner-up-dev/design-web";
 
 const props = defineProps<{
   prId?: number;
diff --git a/apps/frontend/src/domains/pr/ui/sections/InlineNLPRForm.vue b/apps/frontend/src/domains/pr/ui/sections/InlineNLPRForm.vue
index 26ce8ace3..c2ab8c34d 100644
--- a/apps/frontend/src/domains/pr/ui/sections/InlineNLPRForm.vue
+++ b/apps/frontend/src/domains/pr/ui/sections/InlineNLPRForm.vue
@@ -55,7 +55,7 @@
       </span>
     </Field>
 
-    <ErrorToast
+    <PuInlineNotice tone="error" dismissible
       v-if="createMutation.isError.value"
       :message="submitErrorMessage"
       @close="createMutation.reset()"
@@ -69,13 +69,13 @@ import { storeToRefs } from "pinia";
 import { Field, useForm } from "vee-validate";
 import { useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
-import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
 import { createNaturalLanguagePRValidationSchema } from "@/lib/validation";
 import { useCreatePRFromNaturalLanguage } from "@/domains/pr/queries/usePRCreate";
 import { useLandingTypewriterPlaceholder } from "@/domains/landing/use-cases/useLandingTypewriterPlaceholder";
 import { ensureAuthSessionBootstrapped } from "@/processes/auth/useAuthSessionBootstrap";
 import { useNaturalLanguageDraftStore } from "@/domains/pr/use-cases/useNaturalLanguageDraft";
 import { useWeChatVoiceInput } from "@/shared/wechat/useWeChatVoiceInput";
+import { PuInlineNotice } from "@partner-up-dev/design-web";
 
 const getLocalWeekdayLabel = (date: Date): string => {
   return new Intl.DateTimeFormat(undefined, {
diff --git a/apps/frontend/src/pages/AboutPage.vue b/apps/frontend/src/pages/AboutPage.vue
index 1e4c2cec6..85eaec037 100644
--- a/apps/frontend/src/pages/AboutPage.vue
+++ b/apps/frontend/src/pages/AboutPage.vue
@@ -1,9 +1,12 @@
 <template>
   <PuPageScaffold content-placement="center" class="about-page">
     <template #header>
-      <PageHeader
+      <PuPageHeader
         :title="t('aboutPage.title')"
         :subtitle="t('aboutPage.description')"
+        show-back
+        :back-label="t('common.backToHome')"
+        @back="handleBack"
       />
     </template>
 
@@ -138,14 +141,20 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
-import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
 import { useAnchorEvents } from "@/domains/event/queries/useAnchorEvents";
 import { frontendBuildInfo } from "@/shared/meta/build-info";
 import { useBackendBuildMetadata } from "@/shared/meta/queries/useBackendBuildMetadata";
+import { useFallbackBack } from "@/shared/routing/useFallbackBack";
 import OfficialAccountQrModal from "@/shared/wechat/OfficialAccountQrModal.vue";
-import { PuButton, PuPageScaffold, PuModal } from "@partner-up-dev/design-web";
+import {
+  PuButton,
+  PuModal,
+  PuPageHeader,
+  PuPageScaffold,
+} from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
+const { handleBack } = useFallbackBack();
 const backendBuildMetadataQuery = useBackendBuildMetadata();
 const anchorEventsQuery = useAnchorEvents();
 const showOfficialAccountQrModal = ref(false);
diff --git a/apps/frontend/src/pages/AdminAnalyticsPage.vue b/apps/frontend/src/pages/AdminAnalyticsPage.vue
index 017c6f8f3..b7f5484c0 100644
--- a/apps/frontend/src/pages/AdminAnalyticsPage.vue
+++ b/apps/frontend/src/pages/AdminAnalyticsPage.vue
@@ -16,20 +16,18 @@
         </div>
 
         <PuFormItem :label="t('adminAnalytics.startAtLabel')" for-id="analytics-start-at">
-          <input
+          <PuInput
             id="analytics-start-at"
             v-model="draftStartAt"
-            class="analytics-input"
-            type="datetime-local"
+            native-type="datetime-local"
           />
         </PuFormItem>
 
         <PuFormItem :label="t('adminAnalytics.endAtLabel')" for-id="analytics-end-at">
-          <input
+          <PuInput
             id="analytics-end-at"
             v-model="draftEndAt"
-            class="analytics-input"
-            type="datetime-local"
+            native-type="datetime-local"
           />
         </PuFormItem>
 
@@ -38,12 +36,11 @@
           :label="t('adminAnalytics.eventIdLabel')"
           for-id="analytics-event-id"
         >
-          <input
+          <PuInput
             id="analytics-event-id"
             v-model="draftEventId"
-            class="analytics-input"
             inputmode="numeric"
-            type="text"
+            native-type="text"
             :placeholder="t('adminAnalytics.allEventsPlaceholder')"
           />
         </PuFormItem>
@@ -53,11 +50,10 @@
           :label="t('adminAnalytics.sourceSpmLabel')"
           for-id="analytics-spm"
         >
-          <input
+          <PuInput
             id="analytics-spm"
             v-model="draftSpm"
-            class="analytics-input"
-            type="text"
+            native-type="text"
             :placeholder="t('adminAnalytics.sourceSpmPlaceholder')"
           />
         </PuFormItem>
@@ -67,11 +63,10 @@
           :label="t('adminAnalytics.sourceQrLabel')"
           for-id="analytics-source-qr"
         >
-          <input
+          <PuInput
             id="analytics-source-qr"
             v-model="draftSourceQr"
-            class="analytics-input"
-            type="text"
+            native-type="text"
             :placeholder="t('adminAnalytics.sourceQrPlaceholder')"
           />
         </PuFormItem>
@@ -81,11 +76,10 @@
           :label="t('adminAnalytics.assignmentRevisionLabel')"
           for-id="analytics-assignment-revision"
         >
-          <input
+          <PuInput
             id="analytics-assignment-revision"
             v-model="draftAssignmentRevision"
-            class="analytics-input"
-            type="text"
+            native-type="text"
             :placeholder="t('adminAnalytics.assignmentRevisionPlaceholder')"
           />
         </PuFormItem>
@@ -849,7 +843,13 @@ import {
   type AdminPRCreateFunnelResponse,
   type AdminPRJoinFunnelResponse,
 } from "@/domains/admin/queries/useAdminAnalytics";
-import { PuButton, PuFormItem, PuInlineNotice, PuLoadingState } from "@partner-up-dev/design-web";
+import {
+  PuButton,
+  PuFormItem,
+  PuInlineNotice,
+  PuInput,
+  PuLoadingState,
+} from "@partner-up-dev/design-web";
 
 type ModeComparisonRow = AdminAnalyticsFunnelResponse["modes"][number];
 type SourceBreakdownRow = AdminAnalyticsFunnelResponse["sources"][number];
diff --git a/apps/frontend/src/pages/AdminAnchorEventPage.vue b/apps/frontend/src/pages/AdminAnchorEventPage.vue
index 969e1b4b4..6f657610b 100644
--- a/apps/frontend/src/pages/AdminAnchorEventPage.vue
+++ b/apps/frontend/src/pages/AdminAnchorEventPage.vue
@@ -46,10 +46,9 @@
           v-if="workspaceQuery.isLoading.value"
           :message="t('common.loading')"
         />
-        <ErrorToast
+        <PuInlineNotice tone="error"
           v-else-if="workspaceQuery.error.value"
           :message="workspaceQuery.error.value.message"
-          persistent
         />
 
         <template v-else>
@@ -109,7 +108,7 @@
             :disabled="isCreatingEvent"
           />
 
-          <ErrorToast
+          <PuInlineNotice tone="error" dismissible
             v-if="mutationErrorMessage"
             :message="mutationErrorMessage"
             @close="resetMutationErrors"
@@ -126,7 +125,6 @@ import { useI18n } from "vue-i18n";
 import AdminPageScaffold from "@/domains/admin/ui/layout/AdminPageScaffold.vue";
 import AdminRailPanel from "@/domains/admin/ui/layout/AdminRailPanel.vue";
 import AdminNavigationPanel from "@/domains/admin/ui/navigation/AdminNavigationPanel.vue";
-import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
 import AnchorEventBasicSection from "@/domains/admin/ui/anchor-event/sections/AnchorEventBasicSection.vue";
 import AnchorEventLocationsSection from "@/domains/admin/ui/anchor-event/sections/AnchorEventLocationsSection.vue";
 import AnchorEventOtherSection from "@/domains/admin/ui/anchor-event/sections/AnchorEventOtherSection.vue";
@@ -157,7 +155,7 @@ import type {
   EditableMeetingPointForm,
 } from "@/domains/admin/ui/anchor-event/anchorEventEditorTypes";
 import { validateManualPartnerBounds } from "@/lib/validation";
-import { PuButton, PuCard, PuLoadingState } from "@partner-up-dev/design-web";
+import { PuButton, PuCard, PuInlineNotice, PuLoadingState } from "@partner-up-dev/design-web";
 
 type Workspace = NonNullable<AdminAnchorEventWorkspaceResponse>;
 type EventRecord = Workspace["events"][number];
diff --git a/apps/frontend/src/pages/AdminCommerceFulfillmentPage.vue b/apps/frontend/src/pages/AdminCommerceFulfillmentPage.vue
index c536d9348..ecdf4ec87 100644
--- a/apps/frontend/src/pages/AdminCommerceFulfillmentPage.vue
+++ b/apps/frontend/src/pages/AdminCommerceFulfillmentPage.vue
@@ -33,10 +33,9 @@
           v-if="workspaceQuery.isLoading.value"
           :message="t('common.loading')"
         />
-        <ErrorToast
+        <PuInlineNotice tone="error"
           v-else-if="workspaceQuery.error.value"
           :message="workspaceQuery.error.value.message"
-          persistent
         />
         <PuEmptyState
           v-else-if="fulfillments.length === 0"
@@ -246,7 +245,7 @@
             }}</pre>
           </BentoItem>
 
-          <ErrorToast
+          <PuInlineNotice tone="error" dismissible
             v-if="pageErrorMessage"
             :message="pageErrorMessage"
             @close="clearErrors"
@@ -274,8 +273,13 @@ import {
   useRejectRentalFulfillmentBooking,
 } from "@/domains/admin-commerce/queries/useAdminCommerce";
 import { prettyJson } from "@/domains/admin-commerce/editor-json";
-import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import { PuButton, PuCard, PuEmptyState, PuLoadingState } from "@partner-up-dev/design-web";
+import {
+  PuButton,
+  PuCard,
+  PuEmptyState,
+  PuInlineNotice,
+  PuLoadingState,
+} from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const { isAdmin, logout } = useAdminAccess();
diff --git a/apps/frontend/src/pages/AdminCommerceOfferPage.vue b/apps/frontend/src/pages/AdminCommerceOfferPage.vue
index 70f033693..b29c28223 100644
--- a/apps/frontend/src/pages/AdminCommerceOfferPage.vue
+++ b/apps/frontend/src/pages/AdminCommerceOfferPage.vue
@@ -45,10 +45,9 @@
           v-if="workspaceQuery.isLoading.value"
           :message="t('common.loading')"
         />
-        <ErrorToast
+        <PuInlineNotice tone="error"
           v-else-if="workspaceQuery.error.value"
           :message="workspaceQuery.error.value.message"
-          persistent
         />
         <template v-else>
           <BentoItem
@@ -153,7 +152,7 @@
             </div>
           </BentoItem>
 
-          <ErrorToast
+          <PuInlineNotice tone="error" dismissible
             v-if="pageErrorMessage"
             :message="pageErrorMessage"
             @close="clearErrors"
@@ -185,8 +184,7 @@ import {
   useUpdateAdminOffer,
 } from "@/domains/admin-commerce/queries/useAdminCommerce";
 import PricingRulesEditor from "@/domains/admin-commerce/ui/pricing-rules/PricingRulesEditor.vue";
-import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import { PuButton, PuCard, PuLoadingState } from "@partner-up-dev/design-web";
+import { PuButton, PuCard, PuInlineNotice, PuLoadingState } from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const { isAdmin, logout } = useAdminAccess();
diff --git a/apps/frontend/src/pages/AdminCommerceOrderBillPage.vue b/apps/frontend/src/pages/AdminCommerceOrderBillPage.vue
index 61ff0ee63..a2d486d02 100644
--- a/apps/frontend/src/pages/AdminCommerceOrderBillPage.vue
+++ b/apps/frontend/src/pages/AdminCommerceOrderBillPage.vue
@@ -33,10 +33,9 @@
           v-if="workspaceQuery.isLoading.value"
           :message="t('common.loading')"
         />
-        <ErrorToast
+        <PuInlineNotice tone="error"
           v-else-if="workspaceQuery.error.value"
           :message="workspaceQuery.error.value.message"
-          persistent
         />
         <PuEmptyState
           v-else-if="orders.length === 0"
@@ -125,12 +124,7 @@ import BentoItem from "@/domains/admin/ui/layout/BentoItem.vue";
 import { useAdminAccess } from "@/domains/admin/use-cases/useAdminAccess";
 import { useAdminCommerceOrderBillWorkspace } from "@/domains/admin-commerce/queries/useAdminCommerce";
 import { prettyJson } from "@/domains/admin-commerce/editor-json";
-import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import {
-  PuCard,
-  PuEmptyState,
-  PuLoadingState,
-} from "@partner-up-dev/design-web";
+import { PuCard, PuEmptyState, PuInlineNotice, PuLoadingState } from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const { isAdmin, logout } = useAdminAccess();
diff --git a/apps/frontend/src/pages/AdminCommercePlacementPage.vue b/apps/frontend/src/pages/AdminCommercePlacementPage.vue
index 1a3fbc3e0..721ee56c4 100644
--- a/apps/frontend/src/pages/AdminCommercePlacementPage.vue
+++ b/apps/frontend/src/pages/AdminCommercePlacementPage.vue
@@ -47,10 +47,9 @@
           v-if="workspaceQuery.isLoading.value"
           :message="t('common.loading')"
         />
-        <ErrorToast
+        <PuInlineNotice tone="error"
           v-else-if="workspaceQuery.error.value"
           :message="workspaceQuery.error.value.message"
-          persistent
         />
         <template v-else>
           <BentoItem
@@ -232,7 +231,7 @@
             </div>
           </BentoItem>
 
-          <ErrorToast
+          <PuInlineNotice tone="error" dismissible
             v-if="pageErrorMessage"
             :message="pageErrorMessage"
             @close="clearErrors"
@@ -264,8 +263,7 @@ import {
   useUpdateAdminPlacement,
 } from "@/domains/admin-commerce/queries/useAdminCommerce";
 import PlacementMatchingRulesEditor from "@/domains/admin-commerce/ui/placement-matching-rules/PlacementMatchingRulesEditor.vue";
-import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import { PuButton, PuCard, PuLoadingState } from "@partner-up-dev/design-web";
+import { PuButton, PuCard, PuInlineNotice, PuLoadingState } from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const { isAdmin, logout } = useAdminAccess();
diff --git a/apps/frontend/src/pages/AdminCommerceProductPage.vue b/apps/frontend/src/pages/AdminCommerceProductPage.vue
index e22ef5d07..a203df697 100644
--- a/apps/frontend/src/pages/AdminCommerceProductPage.vue
+++ b/apps/frontend/src/pages/AdminCommerceProductPage.vue
@@ -48,7 +48,13 @@
             <AdminCommerceCancellationPolicyEditor />
           </BentoItem>
 
-          <AdminCommerceProductErrorToast />
+          <PuInlineNotice
+            v-if="productErrorMessage"
+            tone="error"
+            :message="productErrorMessage"
+            dismissible
+            @close="productManagementContext.clearErrorMessage"
+          />
         </AdminCommerceProductWorkspaceGate>
       </div>
     </template>
@@ -65,13 +71,13 @@ import AdminNavigationPanel from "@/domains/admin/ui/navigation/AdminNavigationP
 import { useAdminAccess } from "@/domains/admin/use-cases/useAdminAccess";
 import AdminCommerceCancellationPolicyEditor from "@/domains/admin-commerce/ui/product-management/sections/AdminCommerceCancellationPolicyEditor.vue";
 import AdminCommerceProductActionBar from "@/domains/admin-commerce/ui/product-management/sections/AdminCommerceProductActionBar.vue";
-import AdminCommerceProductErrorToast from "@/domains/admin-commerce/ui/product-management/sections/AdminCommerceProductErrorToast.vue";
 import AdminCommerceProductRailList from "@/domains/admin-commerce/ui/product-management/sections/AdminCommerceProductRailList.vue";
 import AdminCommerceProductWorkspaceGate from "@/domains/admin-commerce/ui/product-management/sections/AdminCommerceProductWorkspaceGate.vue";
 import AdminCommerceSkuEditor from "@/domains/admin-commerce/ui/product-management/sections/AdminCommerceSkuEditor.vue";
 import AdminCommerceSkuRailList from "@/domains/admin-commerce/ui/product-management/sections/AdminCommerceSkuRailList.vue";
 import AdminCommerceSpuEditor from "@/domains/admin-commerce/ui/product-management/sections/AdminCommerceSpuEditor.vue";
 import { provideAdminCommerceProductManagementContext } from "@/domains/admin-commerce/ui/product-management/productManagementContext";
+import { PuInlineNotice } from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const { isAdmin, logout } = useAdminAccess();
@@ -81,6 +87,9 @@ const productManagementContext =
 const hasSelectedProduct = computed(
   () => productManagementContext.selectedProduct.value !== null,
 );
+const productErrorMessage = computed(
+  () => productManagementContext.errorMessage.value,
+);
 const spuEditorTitle = computed(() =>
   productManagementContext.isCreatingSpu.value
     ? t("adminCommerceProducts.createSpuTitle")
diff --git a/apps/frontend/src/pages/AdminFeedbackQuestionnairesPage.vue b/apps/frontend/src/pages/AdminFeedbackQuestionnairesPage.vue
index f7073da83..e5204af92 100644
--- a/apps/frontend/src/pages/AdminFeedbackQuestionnairesPage.vue
+++ b/apps/frontend/src/pages/AdminFeedbackQuestionnairesPage.vue
@@ -9,7 +9,7 @@
         v-if="templatesQuery.isLoading.value"
         :message="t('common.loading')"
       />
-      <ErrorToast v-else-if="pageError" :message="pageError.message" persistent />
+      <PuInlineNotice tone="error" v-else-if="pageError" :message="pageError.message" />
 
       <BentoLayout v-else>
         <BentoItem
@@ -152,8 +152,7 @@ import AdminPageScaffold from "@/domains/admin/ui/layout/AdminPageScaffold.vue";
 import AdminRailPanel from "@/domains/admin/ui/layout/AdminRailPanel.vue";
 import BentoItem from "@/domains/admin/ui/layout/BentoItem.vue";
 import BentoLayout from "@/domains/admin/ui/layout/BentoLayout.vue";
-import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import { PuButton, PuLoadingState } from "@partner-up-dev/design-web";
+import { PuButton, PuInlineNotice, PuLoadingState } from "@partner-up-dev/design-web";
 
 type TemplateRecord = AdminFeedbackQuestionnaireTemplatesResponse[number];
 
diff --git a/apps/frontend/src/pages/AdminLoginPage.vue b/apps/frontend/src/pages/AdminLoginPage.vue
index 2f695e5af..c3ce9d507 100644
--- a/apps/frontend/src/pages/AdminLoginPage.vue
+++ b/apps/frontend/src/pages/AdminLoginPage.vue
@@ -47,10 +47,9 @@
         </PuButton>
 
         <p class="admin-login-card__hint">{{ t("adminLogin.seedHint") }}</p>
-        <ErrorToast
+        <PuInlineNotice tone="error"
           v-if="loginMutation.error.value"
           :message="loginMutation.error.value.message"
-          persistent
         />
       </div>
     </section>
@@ -61,10 +60,9 @@
 import { reactive, watchEffect } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
-import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
 import { useAdminLogin } from "@/domains/admin/queries/useAdminLogin";
 import { useAdminSessionStore } from "@/domains/admin/use-cases/useAdminSessionStore";
-import { PuButton, PuPageScaffold } from "@partner-up-dev/design-web";
+import { PuButton, PuInlineNotice, PuPageScaffold } from "@partner-up-dev/design-web";
 
 const route = useRoute();
 const router = useRouter();
diff --git a/apps/frontend/src/pages/AdminPaymentPage.vue b/apps/frontend/src/pages/AdminPaymentPage.vue
index 528da880a..d93567b57 100644
--- a/apps/frontend/src/pages/AdminPaymentPage.vue
+++ b/apps/frontend/src/pages/AdminPaymentPage.vue
@@ -52,10 +52,9 @@
           v-if="workspaceQuery.isLoading.value"
           :message="t('common.loading')"
         />
-        <ErrorToast
+        <PuInlineNotice tone="error"
           v-else-if="workspaceQuery.error.value"
           :message="workspaceQuery.error.value.message"
-          persistent
         />
         <template v-else>
           <BentoItem :title="formTitle" span="full">
@@ -261,7 +260,7 @@
             </dl>
           </BentoItem>
 
-          <ErrorToast
+          <PuInlineNotice tone="error" dismissible
             v-if="pageErrorMessage"
             :message="pageErrorMessage"
             @close="clearErrors"
@@ -287,8 +286,7 @@ import {
   type AdminPaymentProviderInstanceInput,
   type AdminPaymentProviderWorkspaceResponse,
 } from "@/domains/admin-payment/queries/useAdminPayment";
-import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import { PuButton, PuCard, PuLoadingState } from "@partner-up-dev/design-web";
+import { PuButton, PuCard, PuInlineNotice, PuLoadingState } from "@partner-up-dev/design-web";
 
 const CREATE_PROVIDER_ID = "__create__";
 
diff --git a/apps/frontend/src/pages/AdminPoisPage.vue b/apps/frontend/src/pages/AdminPoisPage.vue
index eb613fb8b..cbc89b579 100644
--- a/apps/frontend/src/pages/AdminPoisPage.vue
+++ b/apps/frontend/src/pages/AdminPoisPage.vue
@@ -21,7 +21,7 @@
           v-if="poisQuery.isLoading.value"
           :message="t('common.loading')"
         />
-        <ErrorToast v-else-if="pageError" :message="pageError.message" persistent />
+        <PuInlineNotice tone="error" v-else-if="pageError" :message="pageError.message" />
 
         <section v-else-if="pois.length === 0" class="empty-panel">
           {{ t("adminPois.emptyPois") }}
@@ -85,8 +85,7 @@ import PoiReviewSection from "@/domains/admin/ui/poi/sections/PoiReviewSection.v
 import { useAdminAccess } from "@/domains/admin/use-cases/useAdminAccess";
 import { useAdminNavigationSection } from "@/domains/admin/use-cases/useAdminNavigationSection";
 import { useAdminPoiManagementWorkspace } from "@/domains/admin/use-cases/poi/useAdminPoiManagementWorkspace";
-import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import { PuLoadingState } from "@partner-up-dev/design-web";
+import { PuInlineNotice, PuLoadingState } from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const { isAdmin, logout } = useAdminAccess();
diff --git a/apps/frontend/src/pages/AdminRideHailingPage.vue b/apps/frontend/src/pages/AdminRideHailingPage.vue
index 301d12eb3..6059e8c44 100644
--- a/apps/frontend/src/pages/AdminRideHailingPage.vue
+++ b/apps/frontend/src/pages/AdminRideHailingPage.vue
@@ -52,10 +52,9 @@
           v-if="workspaceQuery.isLoading.value"
           :message="t('common.loading')"
         />
-        <ErrorToast
+        <PuInlineNotice tone="error"
           v-else-if="workspaceQuery.error.value"
           :message="workspaceQuery.error.value.message"
-          persistent
         />
         <template v-else>
           <BentoItem :title="formTitle" span="full">
@@ -196,7 +195,7 @@
             </dl>
           </BentoItem>
 
-          <ErrorToast
+          <PuInlineNotice tone="error" dismissible
             v-if="pageErrorMessage"
             :message="pageErrorMessage"
             @close="clearErrors"
@@ -222,8 +221,7 @@ import {
   type AdminRideHailingProviderInstanceInput,
   type AdminRideHailingProviderWorkspaceResponse,
 } from "@/domains/admin-ride-hailing/queries/useAdminRideHailing";
-import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import { PuButton, PuCard, PuLoadingState } from "@partner-up-dev/design-web";
+import { PuButton, PuCard, PuInlineNotice, PuLoadingState } from "@partner-up-dev/design-web";
 
 const CREATE_PROVIDER_ID = "__create__";
 
diff --git a/apps/frontend/src/pages/AnchorEventLandingPage.vue b/apps/frontend/src/pages/AnchorEventLandingPage.vue
index aa206e95e..7d2d14e43 100644
--- a/apps/frontend/src/pages/AnchorEventLandingPage.vue
+++ b/apps/frontend/src/pages/AnchorEventLandingPage.vue
@@ -10,15 +10,16 @@
     :content-placement="pageStatePlacement"
   >
     <template #header>
-      <PageHeader
+      <PuPageHeader
         v-if="detail"
         class="anchor-event-landing-page__header"
         :title="detail.title"
         :subtitle="detail.description ?? undefined"
-        :back-fallback-to="{ name: 'event-plaza' }"
+        show-back
+        :back-label="t('common.backToHome')"
         @back="handleLandingBack"
       >
-        <template #top-actions>
+        <template #actions>
           <PuButton
             shape="pill"
             tone="neutral" variant="outline"
@@ -30,7 +31,7 @@
             {{ t("anchorEvent.otherEvents.action") }}
           </PuButton>
         </template>
-      </PageHeader>
+      </PuPageHeader>
     </template>
 
     <div v-if="isLoading" class="loading-state">
@@ -156,7 +157,6 @@ import { computed, onMounted, ref, watch } from "vue";
 import { useRoute, useRouter, type RouteLocationRaw } from "vue-router";
 import { useI18n } from "vue-i18n";
 import PageFooter from "@/shared/ui/sections/PageFooter.vue";
-import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
 import AnchorEventCardModeSurface from "@/domains/event/ui/surfaces/AnchorEventCardModeSurface/AnchorEventCardModeSurface.vue";
 import AnchorEventFormModeSurface from "@/domains/event/ui/surfaces/AnchorEventFormModeSurface.vue";
 import AnchorEventListModeSurface from "@/domains/event/ui/surfaces/AnchorEventListModeSurface.vue";
@@ -205,7 +205,16 @@ import AnchorEventRadioCardCarousel from "@/domains/event/ui/composites/AnchorEv
 import { useOfficialAccountFollowPrompt } from "@/domains/marketing/use-cases/useOfficialAccountFollowPrompt";
 import { trackEvent } from "@/shared/telemetry/track";
 import { resolveTelemetryFailurePayload } from "@/shared/telemetry/result";
-import { PuButton, PuLoadingState, PuPageScaffold, PuSegmented, PuSegmentedItem, type PuSegmentedValue, PuDrawer } from "@partner-up-dev/design-web";
+import {
+  PuButton,
+  PuDrawer,
+  PuLoadingState,
+  PuPageHeader,
+  PuPageScaffold,
+  PuSegmented,
+  PuSegmentedItem,
+  type PuSegmentedValue,
+} from "@partner-up-dev/design-web";
 import {
   buildAnchorEventFunnelPayload,
   type AnchorEventFunnelContext,
diff --git a/apps/frontend/src/pages/BIEntryPage.vue b/apps/frontend/src/pages/BIEntryPage.vue
index cd948b970..eef97ba6d 100644
--- a/apps/frontend/src/pages/BIEntryPage.vue
+++ b/apps/frontend/src/pages/BIEntryPage.vue
@@ -6,7 +6,7 @@
       <PuLoadingState v-if="isPending" message="正在进入 BI 看板" />
 
       <template v-else>
-        <ErrorToast v-if="errorMessage" :message="errorMessage" persistent />
+        <PuInlineNotice tone="error" v-if="errorMessage" :message="errorMessage" />
         <PuButton shape="pill" tone="neutral" variant="outline" @click="goHome">
           返回首页
         </PuButton>
@@ -20,8 +20,7 @@ import { onMounted, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useAdminSessionStore } from "@/domains/admin/use-cases/useAdminSessionStore";
 import { adminClient } from "@/lib/admin-rpc";
-import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import { PuButton, PuLoadingState, PuPageScaffold } from "@partner-up-dev/design-web";
+import { PuButton, PuInlineNotice, PuLoadingState, PuPageScaffold } from "@partner-up-dev/design-web";
 
 const ANALYTICS_SEED_USER_ID = "00000000-0000-0000-0000-000000000002";
 
diff --git a/apps/frontend/src/pages/CommerceBillDetailPage.vue b/apps/frontend/src/pages/CommerceBillDetailPage.vue
index 39cc1d287..5c2c4c23e 100644
--- a/apps/frontend/src/pages/CommerceBillDetailPage.vue
+++ b/apps/frontend/src/pages/CommerceBillDetailPage.vue
@@ -5,10 +5,11 @@
     data-testid="bill-detail.page"
   >
     <template #header>
-      <PageHeader
+      <PuPageHeader
         title="账单详情"
         subtitle="每个人只支付自己的账单行"
-        :back-fallback-to="backFallbackTo"
+        show-back
+        @back="handleBack"
       />
     </template>
 
@@ -143,8 +144,8 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { useRoute } from "vue-router";
-import { PuButton, PuCard, PuInlineNotice, PuPageScaffold } from "@partner-up-dev/design-web";
-import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
+import { PuButton, PuCard, PuInlineNotice, PuPageHeader, PuPageScaffold } from "@partner-up-dev/design-web";
+import { useFallbackBack } from "@/shared/routing/useFallbackBack";
 import { useBillDetail } from "@/domains/commerce/queries/useCommerce";
 
 const route = useRoute();
@@ -176,6 +177,7 @@ const settlementStatusLabel = computed(() => {
 const backFallbackTo = computed(() =>
   detail.value ? { path: `/orders/${detail.value.order.id}` } : { path: "/" },
 );
+const { handleBack } = useFallbackBack(backFallbackTo);
 
 const billErrorMessage = computed(() =>
   billQuery.error.value instanceof Error
diff --git a/apps/frontend/src/pages/CommerceOrderDetailPage.vue b/apps/frontend/src/pages/CommerceOrderDetailPage.vue
index d622ae866..2d6db82e8 100644
--- a/apps/frontend/src/pages/CommerceOrderDetailPage.vue
+++ b/apps/frontend/src/pages/CommerceOrderDetailPage.vue
@@ -5,12 +5,13 @@
     data-testid="order-detail.page"
   >
     <template #header>
-      <PageHeader
+      <PuPageHeader
         title="订单详情"
         subtitle="查看支付、账单和预约进度"
-        :back-fallback-to="backFallbackTo"
+        show-back
+        @back="handleBack"
       >
-        <template #top-actions>
+        <template #actions>
           <PuButton
             :action="{ to: { name: 'contact-support' } }"
             shape="pill"
@@ -22,7 +23,7 @@
             客服
           </PuButton>
         </template>
-      </PageHeader>
+      </PuPageHeader>
     </template>
 
     <div class="order-detail-page__body">
@@ -287,8 +288,8 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted } from "vue";
 import { useRoute } from "vue-router";
-import { PuButton, PuCard, PuInlineNotice, PuPageScaffold } from "@partner-up-dev/design-web";
-import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
+import { PuButton, PuCard, PuInlineNotice, PuPageHeader, PuPageScaffold } from "@partner-up-dev/design-web";
+import { useFallbackBack } from "@/shared/routing/useFallbackBack";
 import {
   useCancelRentalOrder,
   useCommerceOrderDetail,
@@ -395,6 +396,7 @@ const isCancellationPending = computed(
 );
 
 const backFallbackTo = computed(() => ({ path: "/" }));
+const { handleBack } = useFallbackBack(backFallbackTo);
 
 const serviceWindowLabel = computed(() => {
   if (rideHailingDetail.value) {
diff --git a/apps/frontend/src/pages/ContactAuthorPage.vue b/apps/frontend/src/pages/ContactAuthorPage.vue
index 3da45db81..71b30388b 100644
--- a/apps/frontend/src/pages/ContactAuthorPage.vue
+++ b/apps/frontend/src/pages/ContactAuthorPage.vue
@@ -1,7 +1,12 @@
 <template>
   <PuPageScaffold content-placement="center" class="contact-author-page">
     <template #header>
-      <PageHeader :title="t('contactAuthorPage.title')" />
+      <PuPageHeader
+        :title="t('contactAuthorPage.title')"
+        show-back
+        :back-label="t('common.backToHome')"
+        @back="handleBack"
+      />
     </template>
 
     <PuLoadingState
@@ -9,14 +14,13 @@
       :message="t('common.loading')"
     />
 
-    <ErrorToast
+    <PuInlineNotice tone="error"
       v-if="publicConfigQuery.error.value"
       :message="
         publicConfigQuery.error.value instanceof Error
           ? publicConfigQuery.error.value.message
           : t('errors.fetchPublicConfigFailed')
       "
-      persistent
     />
 
     <section class="author-body">
@@ -39,15 +43,18 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
-import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
-import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
-import { PUBLIC_CONFIG_KEYS, usePublicConfig } from "@/shared/config/queries/usePublicConfig";
-import { PuLoadingState, PuPageScaffold } from "@partner-up-dev/design-web";
+import {
+  PUBLIC_CONFIG_KEYS,
+  usePublicConfig,
+} from "@/shared/config/queries/usePublicConfig";
+import { useFallbackBack } from "@/shared/routing/useFallbackBack";
+import { PuInlineNotice, PuLoadingState, PuPageHeader, PuPageScaffold } from "@partner-up-dev/design-web";
 
 const DEFAULT_AUTHOR_QR_CODE_URL =
   "https://oss-app.partner-up.cn/5264495b163398842ad04ee5ee42a3df.jpg";
 
 const { t } = useI18n();
+const { handleBack } = useFallbackBack();
 const publicConfigQuery = usePublicConfig(PUBLIC_CONFIG_KEYS.authorWechatQrCode);
 
 const normalizeHttpUrl = (value: string | null | undefined): string | null => {
diff --git a/apps/frontend/src/pages/ContactSupportPage.vue b/apps/frontend/src/pages/ContactSupportPage.vue
index 3755947a0..559a4a8f8 100644
--- a/apps/frontend/src/pages/ContactSupportPage.vue
+++ b/apps/frontend/src/pages/ContactSupportPage.vue
@@ -1,7 +1,12 @@
 <template>
   <PuPageScaffold content-placement="center" class="contact-support-page">
     <template #header>
-      <PageHeader :title="t('contactSupportPage.title')" />
+      <PuPageHeader
+        :title="t('contactSupportPage.title')"
+        show-back
+        :back-label="t('common.backToHome')"
+        @back="handleBack"
+      />
     </template>
 
     <section
@@ -79,14 +84,19 @@ import { RouterLink } from "vue-router";
 import { useI18n } from "vue-i18n";
 import SupportContactAction from "@/domains/support/ui/sections/SupportContactAction.vue";
 import SupportContactQrModal from "@/domains/support/ui/sections/SupportContactQrModal.vue";
-import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
 import { isWeChatBrowser } from "@/shared/browser/isWeChatBrowser";
 import { useWeChatMiniProgramWebView } from "@/shared/wechat/useWeChatMiniProgramWebView";
 import {
   PUBLIC_CONFIG_KEYS,
   usePublicConfig,
 } from "@/shared/config/queries/usePublicConfig";
-import { PuButton, PuChip, PuPageScaffold } from "@partner-up-dev/design-web";
+import { useFallbackBack } from "@/shared/routing/useFallbackBack";
+import {
+  PuButton,
+  PuChip,
+  PuPageHeader,
+  PuPageScaffold,
+} from "@partner-up-dev/design-web";
 
 const DEFAULT_SUPPORT_LINK_WECHAT_IN =
   "https://work.weixin.qq.com/nl/act/p/3f8820e724cb44c5";
@@ -94,6 +104,7 @@ const DEFAULT_SUPPORT_LINK_WECHAT_OUT =
   "https://work.weixin.qq.com/nl/act/p/4030a5b69149404d";
 
 const { t } = useI18n();
+const { handleBack } = useFallbackBack();
 const { isMiniProgramWebView } = useWeChatMiniProgramWebView();
 const supportQrModalOpen = ref(false);
 
diff --git a/apps/frontend/src/pages/EventPRSearchPage.vue b/apps/frontend/src/pages/EventPRSearchPage.vue
index 4c638bf4f..b3811aa3f 100644
--- a/apps/frontend/src/pages/EventPRSearchPage.vue
+++ b/apps/frontend/src/pages/EventPRSearchPage.vue
@@ -1,11 +1,13 @@
 <template>
   <PuPageScaffold class="event-pr-search-page" data-page="event-pr-search">
-    <PageHeader
+    <PuPageHeader
       :title="pageTitle"
       :subtitle="pageSubtitle"
-      :back-fallback-to="{ name: 'event-plaza' }"
+      show-back
+      :back-label="t('common.backToHome')"
+      @back="handleBack"
     >
-      <template #top-actions>
+      <template #actions>
         <PuButton
           v-if="isResultMode"
           tone="neutral" variant="ghost"
@@ -15,7 +17,7 @@
           {{ t("eventPRSearch.actions.modifyCriteria") }}
         </PuButton>
       </template>
-    </PageHeader>
+    </PuPageHeader>
 
     <div v-if="eventsQuery.isLoading.value" class="event-pr-search-page__state">
       {{ t("common.loading") }}
@@ -162,8 +164,13 @@ import type { PRId } from "@partner-up-dev/backend";
 import { computed, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRoute, useRouter } from "vue-router";
-import { PuButton, PuEmptyState, PuPageScaffold, PuDrawer } from "@partner-up-dev/design-web";
-import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
+import {
+  PuButton,
+  PuDrawer,
+  PuEmptyState,
+  PuPageHeader,
+  PuPageScaffold,
+} from "@partner-up-dev/design-web";
 import { useAnchorEvents } from "@/domains/event/queries/useAnchorEvents";
 import EventPRSearchCriteriaForm from "@/domains/event/ui/composites/EventPRSearchCriteriaForm.vue";
 import type { AnchorEventListItem } from "@/domains/event/model/types";
@@ -171,6 +178,7 @@ import type { PRSearchResult } from "@/domains/pr/model/types";
 import { useEventPRSearch } from "@/domains/pr/queries/useEventPRSearch";
 import PRPreviewCard from "@/domains/pr/ui/primitives/PRPreviewCard.vue";
 import { prDetailPath } from "@/domains/pr/routing/routes";
+import { useFallbackBack } from "@/shared/routing/useFallbackBack";
 import { formatLocalDateTimeValue } from "@/shared/datetime/formatLocalDateTime";
 import {
   formatProductLocalShortDateLabel,
@@ -191,6 +199,7 @@ type SearchCriteria = {
 const route = useRoute();
 const router = useRouter();
 const { t } = useI18n();
+const { handleBack } = useFallbackBack({ name: "event-plaza" });
 
 const eventsQuery = useAnchorEvents();
 const availableEvents = computed<AnchorEventListItem[]>(
diff --git a/apps/frontend/src/pages/EventPlazaPage.vue b/apps/frontend/src/pages/EventPlazaPage.vue
index 7bf87b6ac..5e4242c21 100644
--- a/apps/frontend/src/pages/EventPlazaPage.vue
+++ b/apps/frontend/src/pages/EventPlazaPage.vue
@@ -1,10 +1,13 @@
 <template>
   <PuPageScaffold class="event-plaza-page">
-    <PageHeader
+    <PuPageHeader
       :title="t('eventPlaza.title')"
       :subtitle="t('eventPlaza.subtitle')"
+      show-back
+      :back-label="t('common.backToHome')"
+      @back="handleBack"
     >
-      <template #top-actions>
+      <template #actions>
         <PuButton
           :action="{ to: { name: 'event-pr-search' } }"
           class="event-plaza-page__search-link"
@@ -16,7 +19,7 @@
           {{ t("eventPlaza.searchAction") }}
         </PuButton>
       </template>
-    </PageHeader>
+    </PuPageHeader>
 
     <div v-if="isLoading" class="loading-state">
       {{ t("common.loading") }}
@@ -43,13 +46,18 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
-import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
 import EventCard from "@/domains/event/ui/primitives/EventCard.vue";
 import { useAnchorEvents } from "@/domains/event/queries/useAnchorEvents";
 import type { AnchorEventListResponse } from "@/domains/event/model/types";
-import { PuButton, PuPageScaffold } from "@partner-up-dev/design-web";
+import { useFallbackBack } from "@/shared/routing/useFallbackBack";
+import {
+  PuButton,
+  PuPageHeader,
+  PuPageScaffold,
+} from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
+const { handleBack } = useFallbackBack();
 const { data: events, isLoading, isError } = useAnchorEvents();
 
 const shuffleEvents = (
diff --git a/apps/frontend/src/pages/LocationApplicationPage.vue b/apps/frontend/src/pages/LocationApplicationPage.vue
index e7ad7b004..3a7524606 100644
--- a/apps/frontend/src/pages/LocationApplicationPage.vue
+++ b/apps/frontend/src/pages/LocationApplicationPage.vue
@@ -1,10 +1,12 @@
 <template>
   <PuPageScaffold class="location-application-page">
     <template #header>
-      <PageHeader
+      <PuPageHeader
         :title="t('locationApplicationPage.title')"
         :subtitle="t('locationApplicationPage.subtitle')"
-        :back-fallback-to="backFallbackTo"
+        show-back
+        :back-label="t('common.backToHome')"
+        @back="handleBack"
       />
     </template>
 
@@ -14,7 +16,7 @@
         tone="success"
         :message="submitSuccessTitle"
       />
-      <ErrorToast v-if="pageError" :message="pageError" persistent />
+      <PuInlineNotice tone="error" v-if="pageError" :message="pageError" />
 
       <PuCard as="section" gap="md">
         <form class="application-form" @submit.prevent="handleSubmit">
@@ -120,10 +122,18 @@
 import { computed, onMounted, ref } from "vue";
 import { useRoute, type RouteLocationRaw } from "vue-router";
 import { useI18n } from "vue-i18n";
-import { PuButton, PuCard, PuFormItem, PuInlineNotice, PuLoadingState, PuPageScaffold, PuTag } from "@partner-up-dev/design-web";
-import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
-import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
+import {
+  PuButton,
+  PuCard,
+  PuFormItem,
+  PuInlineNotice,
+  PuLoadingState,
+  PuPageHeader,
+  PuPageScaffold,
+  PuTag,
+} from "@partner-up-dev/design-web";
 import ImageUrlInput from "@/shared/upload/ImageUrlInput.vue";
+import { useFallbackBack } from "@/shared/routing/useFallbackBack";
 import {
   useMyPoiApplications,
   useSubmitPoiApplication,
@@ -161,6 +171,7 @@ const backFallbackTo = computed<RouteLocationRaw>(() =>
       }
     : { name: "me" },
 );
+const { handleBack } = useFallbackBack(backFallbackTo);
 
 const applications = computed(() => applicationsQuery.data.value ?? []);
 const normalizedTitle = computed(() => titleDraft.value.trim());
diff --git a/apps/frontend/src/pages/MePage.vue b/apps/frontend/src/pages/MePage.vue
index ec9586dc1..06c6f251f 100644
--- a/apps/frontend/src/pages/MePage.vue
+++ b/apps/frontend/src/pages/MePage.vue
@@ -1,9 +1,12 @@
 <template>
   <PuPageScaffold class="me-page">
     <template #header>
-      <PageHeader
+      <PuPageHeader
         :title="t('mePage.title')"
         :subtitle="t('mePage.description')"
+        show-back
+        :back-label="t('common.backToHome')"
+        @back="handleBack"
       />
     </template>
 
@@ -14,7 +17,7 @@
         :message="bindFeedbackMessage"
       />
 
-      <ErrorToast v-if="errorMessage" :message="errorMessage" persistent />
+      <PuInlineNotice tone="error" v-if="errorMessage" :message="errorMessage" />
 
       <PuLoadingState
         v-if="
@@ -266,10 +269,19 @@ import { computed, ref, watch } from "vue";
 import { RouterLink, useRoute } from "vue-router";
 import { useI18n } from "vue-i18n";
 import { useQueryClient } from "@tanstack/vue-query";
-import { PuButton, PuCard, PuFormItem, PuImg, PuInlineNotice, PuLoadingState, PuPageScaffold, PuTag } from "@partner-up-dev/design-web";
-import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
+import {
+  PuButton,
+  PuCard,
+  PuFormItem,
+  PuImg,
+  PuInlineNotice,
+  PuLoadingState,
+  PuPageHeader,
+  PuPageScaffold,
+  PuTag,
+} from "@partner-up-dev/design-web";
 import PageFooter from "@/shared/ui/sections/PageFooter.vue";
-import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
+import { useFallbackBack } from "@/shared/routing/useFallbackBack";
 import WeChatNotificationSubscriptionsCard from "@/shared/ui/sections/WeChatNotificationSubscriptionsCard.vue";
 import APRNotificationSubscriptions from "@/shared/ui/sections/APRNotificationSubscriptions.vue";
 import { useUserSessionStore } from "@/shared/auth/useUserSessionStore";
@@ -286,6 +298,7 @@ import { queryKeys } from "@/shared/api/query-keys";
 
 const route = useRoute();
 const { t } = useI18n();
+const { handleBack } = useFallbackBack();
 const userSessionStore = useUserSessionStore();
 const queryClient = useQueryClient();
 
diff --git a/apps/frontend/src/pages/MyPRsPage.vue b/apps/frontend/src/pages/MyPRsPage.vue
index 8395238d0..b5f8fe88a 100644
--- a/apps/frontend/src/pages/MyPRsPage.vue
+++ b/apps/frontend/src/pages/MyPRsPage.vue
@@ -1,9 +1,12 @@
 <template>
   <PuPageScaffold class="my-prs-page">
     <template #header>
-      <PageHeader
+      <PuPageHeader
         :title="t('myPrsPage.title')"
         :subtitle="t('myPrsPage.description')"
+        show-back
+        :back-label="t('common.backToHome')"
+        @back="handleBack"
       />
     </template>
 
@@ -75,14 +78,15 @@
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 import PageFooter from "@/shared/ui/sections/PageFooter.vue";
-import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
 import PRPreviewCard from "@/domains/pr/ui/primitives/PRPreviewCard.vue";
 import { useMyCreatedPRs } from "@/domains/pr/queries/useMyCreatedPRs";
 import { useMyJoinedPRs } from "@/domains/pr/queries/useMyJoinedPRs";
 import { useUserSessionStore } from "@/shared/auth/useUserSessionStore";
-import { PuLoadingState, PuPageScaffold } from "@partner-up-dev/design-web";
+import { useFallbackBack } from "@/shared/routing/useFallbackBack";
+import { PuLoadingState, PuPageHeader, PuPageScaffold } from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
+const { handleBack } = useFallbackBack();
 const userSessionStore = useUserSessionStore();
 const createdQuery = useMyCreatedPRs();
 const joinedQuery = useMyJoinedPRs();
diff --git a/apps/frontend/src/pages/PRMessagesPage.vue b/apps/frontend/src/pages/PRMessagesPage.vue
index 9f96e6ee5..1a455eb1f 100644
--- a/apps/frontend/src/pages/PRMessagesPage.vue
+++ b/apps/frontend/src/pages/PRMessagesPage.vue
@@ -4,17 +4,17 @@
     data-page="pr-messages"
   >
     <template #header>
-      <PageHeader
+      <PuPageHeader
         :title="t('prPage.messagePage.title')"
         :back-label="t('prPage.messagePage.backToDetail')"
-        :back-fallback-to="backFallbackTo"
+        show-back
+        @back="handleBack"
       />
     </template>
 
-    <ErrorToast
+    <PuInlineNotice tone="error"
       v-if="id === null"
       :message="t('errors.missingPartnerRequestId')"
-      persistent
     />
 
     <PRMessageThread
@@ -33,13 +33,12 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import { useI18n } from "vue-i18n";
-import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
-import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
 import PRMessageThread from "@/domains/pr/ui/sections/PRMessageThread.vue";
 import PageFooter from "@/shared/ui/sections/PageFooter.vue";
 import { prDetailPath } from "@/domains/pr/routing/routes";
 import { usePRRouteId } from "@/domains/pr/routing/usePRRouteId";
-import { PuPageScaffold } from "@partner-up-dev/design-web";
+import { useFallbackBack } from "@/shared/routing/useFallbackBack";
+import { PuInlineNotice, PuPageHeader, PuPageScaffold } from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const id = usePRRouteId();
@@ -48,6 +47,7 @@ const backFallbackTo = computed(() => {
   if (id.value === null) return "/";
   return prDetailPath(id.value);
 });
+const { handleBack } = useFallbackBack(backFallbackTo);
 </script>
 
 <style scoped lang="scss">
diff --git a/apps/frontend/src/pages/PRPage.creator-actions.test.ts b/apps/frontend/src/pages/PRPage.creator-actions.test.ts
index f06f38a79..7ca11fe8c 100644
--- a/apps/frontend/src/pages/PRPage.creator-actions.test.ts
+++ b/apps/frontend/src/pages/PRPage.creator-actions.test.ts
@@ -386,9 +386,7 @@ describe("PRPage display title", () => {
       }),
     );
 
-    expect(host.querySelector(".page-header__title")?.textContent).toContain(
-      "城市徒步局",
-    );
+    expectPageSummaryTitle(host, "城市徒步局");
   });
 
   test("uses backend canonical title when type wins before place", async () => {
@@ -404,9 +402,7 @@ describe("PRPage display title", () => {
       }),
     );
 
-    expect(host.querySelector(".page-header__title")?.textContent).toContain(
-      "徒步",
-    );
+    expectPageSummaryTitle(host, "徒步");
   });
 
   test("uses backend canonical place fallback when higher labels are empty", async () => {
@@ -422,9 +418,7 @@ describe("PRPage display title", () => {
       }),
     );
 
-    expect(host.querySelector(".page-header__title")?.textContent).toContain(
-      "广州塔~大学城",
-    );
+    expectPageSummaryTitle(host, "广州塔~大学城");
   });
 });
 
@@ -525,6 +519,19 @@ const mountPage = async (detail: PRDetailView): Promise<HTMLElement> => {
 const hasTestId = (host: HTMLElement, testId: string): boolean =>
   host.querySelector(`[data-testid="${testId}"]`) !== null;
 
+const expectPageSummaryTitle = (host: HTMLElement, expected: string): void => {
+  const summaryRegion = host.querySelector('[data-region="summary"]');
+  const titleCandidates = Array.from(
+    summaryRegion?.querySelectorAll("h1,h2,h3,h4") ?? [],
+  );
+
+  expect(
+    titleCandidates.some((candidate) =>
+      candidate.textContent?.includes(expected),
+    ),
+  ).toBe(true);
+};
+
 const buildPRDetail = ({
   status,
   isCreator,
diff --git a/apps/frontend/src/pages/PRPage.vue b/apps/frontend/src/pages/PRPage.vue
index eeaaf2ebe..c39bdfd4d 100644
--- a/apps/frontend/src/pages/PRPage.vue
+++ b/apps/frontend/src/pages/PRPage.vue
@@ -1,15 +1,17 @@
 <template>
   <PuPageScaffold class="pr-page" data-page="pr-detail">
     <PuLoadingState v-if="isLoading" :message="t('common.loading')" />
-    <ErrorToast v-else-if="error" :message="error.message" persistent />
+    <PuInlineNotice tone="error" v-else-if="error" :message="error.message" />
 
     <template v-else-if="prDetail">
-      <PageHeader
+      <PuPageHeader
         :title="prDisplayTitle"
-        :back-fallback-to="backFallbackTo"
         data-region="summary"
+        show-back
+        :back-label="t('common.backToHome')"
+        @back="handleBack"
       >
-        <template #top-actions>
+        <template #actions>
           <div v-if="showHeaderQuickActions" class="header-quick-actions">
             <PuButton
               v-if="showEditContentAction"
@@ -38,7 +40,7 @@
           <span class="type-badge">{{ prDetail.core.type || "-" }}</span>
           <PRStatusBadge :status="prDisplayStatus" />
         </template>
-      </PageHeader>
+      </PuPageHeader>
 
       <PuModal
         v-if="showEditContentModal && id !== null"
@@ -91,7 +93,7 @@
           </PuButton>
         </div>
 
-        <ErrorToast
+        <PuInlineNotice tone="error" dismissible
           v-if="hasUpdateStatusError"
           :message="
             updateStatusError?.message || t('modifyStatusModal.updateFailed')
@@ -177,9 +179,7 @@ import { computed, isRef, nextTick, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
 import type { PRStatusManual } from "@partner-up-dev/backend";
-import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
 import PageFooter from "@/shared/ui/sections/PageFooter.vue";
-import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
 import PRStatusBadge from "@/domains/pr/ui/primitives/PRStatusBadge.vue";
 import PRFactsCard from "@/domains/pr/ui/composites/PRFactsCard.vue";
 import PRBetaGroupAction from "@/domains/pr/ui/sections/PRBetaGroupAction.vue";
@@ -219,7 +219,15 @@ import {
   type PlacementInstanceProjection,
 } from "@/domains/commerce/queries/useCommerce";
 import { ORDERING_ENTRY_STORAGE_KEY } from "@/domains/commerce/model/ordering-entry-storage";
-import { PuButton, PuInlineNotice, PuLoadingState, PuPageScaffold, PuModal } from "@partner-up-dev/design-web";
+import { useFallbackBack } from "@/shared/routing/useFallbackBack";
+import {
+  PuButton,
+  PuInlineNotice,
+  PuLoadingState,
+  PuModal,
+  PuPageHeader,
+  PuPageScaffold,
+} from "@partner-up-dev/design-web";
 
 type CreatorSecondaryActionType =
   | "CREATOR_EDIT_CONTENT"
@@ -286,6 +294,7 @@ const backFallbackTo = computed(() => {
   }
   return "/";
 });
+const { handleBack } = useFallbackBack(backFallbackTo);
 const handoffEntry = computed(() => {
   const raw = route.query.handoff;
   if (typeof raw === "string") return raw;
diff --git a/apps/frontend/src/pages/PRPairingCodePage.vue b/apps/frontend/src/pages/PRPairingCodePage.vue
index c0c8ca66c..8ba0f1701 100644
--- a/apps/frontend/src/pages/PRPairingCodePage.vue
+++ b/apps/frontend/src/pages/PRPairingCodePage.vue
@@ -31,15 +31,13 @@
     data-page="pr-pairing-code"
   >
     <PuLoadingState v-if="isLoading" :message="t('common.loading')" />
-    <ErrorToast
+    <PuInlineNotice tone="error"
       v-else-if="error"
       :message="error.message"
-      persistent
     />
-    <ErrorToast
+    <PuInlineNotice tone="error"
       v-else
       :message="t('prPage.pairingCodePage.unavailable')"
-      persistent
     />
   </main>
 </template>
@@ -48,11 +46,10 @@
 import { computed, type CSSProperties } from "vue";
 import { useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
-import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
 import { usePRDetail } from "@/domains/pr/queries/usePRDetail";
 import { usePRRouteId } from "@/domains/pr/routing/usePRRouteId";
 import { prDetailPath } from "@/domains/pr/routing/routes";
-import { PuLoadingState } from "@partner-up-dev/design-web";
+import { PuInlineNotice, PuLoadingState } from "@partner-up-dev/design-web";
 import {
   canShowPRPairingCode,
   derivePRPairingIdentity,
diff --git a/apps/frontend/src/pages/PaymentCheckoutPage.vue b/apps/frontend/src/pages/PaymentCheckoutPage.vue
index 5d0f823f5..534f35ca2 100644
--- a/apps/frontend/src/pages/PaymentCheckoutPage.vue
+++ b/apps/frontend/src/pages/PaymentCheckoutPage.vue
@@ -5,10 +5,11 @@
     data-testid="payment-checkout.page"
   >
     <template #header>
-      <PageHeader
+      <PuPageHeader
         title="支付"
         subtitle="本页只支付当前这一条账单行"
-        :back-fallback-to="backFallbackTo"
+        show-back
+        @back="handleBack"
       />
     </template>
 
@@ -160,13 +161,19 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import { useRoute } from "vue-router";
-import { PuButton, PuCard, PuInlineNotice, PuPageScaffold } from "@partner-up-dev/design-web";
-import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
+import {
+  PuButton,
+  PuCard,
+  PuInlineNotice,
+  PuPageHeader,
+  PuPageScaffold,
+} from "@partner-up-dev/design-web";
 import {
   useCreateChargeForBillLine,
   usePaymentCheckout,
   useSyncPaymentTx,
 } from "@/domains/commerce/queries/useCommerce";
+import { useFallbackBack } from "@/shared/routing/useFallbackBack";
 
 const route = useRoute();
 
@@ -306,6 +313,7 @@ const paymentStatusLabel = computed(() => {
 const backFallbackTo = computed(() =>
   checkout.value ? { path: `/bills/${checkout.value.bill.id}` } : { path: "/" },
 );
+const { handleBack } = useFallbackBack(backFallbackTo);
 
 const checkoutErrorMessage = computed(() =>
   checkoutQuery.error.value instanceof Error
diff --git a/apps/frontend/src/pages/RouteApplicationPage.vue b/apps/frontend/src/pages/RouteApplicationPage.vue
index 6781a0b1a..a87540e19 100644
--- a/apps/frontend/src/pages/RouteApplicationPage.vue
+++ b/apps/frontend/src/pages/RouteApplicationPage.vue
@@ -1,10 +1,12 @@
 <template>
   <PuPageScaffold class="route-application-page">
     <template #header>
-      <PageHeader
+      <PuPageHeader
         :title="t('routeApplicationPage.title')"
         :subtitle="t('routeApplicationPage.subtitle')"
-        :back-fallback-to="backFallbackTo"
+        show-back
+        :back-label="t('common.backToHome')"
+        @back="handleBack"
       />
     </template>
 
@@ -14,7 +16,7 @@
         tone="success"
         :message="submitSuccessTitle"
       />
-      <ErrorToast v-if="pageError" :message="pageError" persistent />
+      <PuInlineNotice tone="error" v-if="pageError" :message="pageError" />
 
       <PuCard as="section" gap="md">
         <form class="application-form" @submit.prevent="handleSubmit">
@@ -102,9 +104,17 @@ import { computed, onMounted, ref } from "vue";
 import { useRoute, type RouteLocationRaw } from "vue-router";
 import { useI18n } from "vue-i18n";
 import type { PRRoute } from "@partner-up-dev/backend";
-import { PuButton, PuCard, PuFormItem, PuInlineNotice, PuLoadingState, PuPageScaffold, PuTag } from "@partner-up-dev/design-web";
-import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
-import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
+import {
+  PuButton,
+  PuCard,
+  PuFormItem,
+  PuInlineNotice,
+  PuLoadingState,
+  PuPageHeader,
+  PuPageScaffold,
+  PuTag,
+} from "@partner-up-dev/design-web";
+import { useFallbackBack } from "@/shared/routing/useFallbackBack";
 import {
   createEmptyRouteDraft,
   getRouteValidationIssue,
@@ -154,6 +164,7 @@ const backFallbackTo = computed<RouteLocationRaw>(() =>
       }
     : { name: "me" },
 );
+const { handleBack } = useFallbackBack(backFallbackTo);
 
 const applications = computed(() => {
   const source = applicationsQuery.data.value ?? [];
diff --git a/apps/frontend/src/pages/StudySprintPomodoroPage.vue b/apps/frontend/src/pages/StudySprintPomodoroPage.vue
index 203ae8cf7..6ab808d62 100644
--- a/apps/frontend/src/pages/StudySprintPomodoroPage.vue
+++ b/apps/frontend/src/pages/StudySprintPomodoroPage.vue
@@ -54,10 +54,9 @@
       v-if="roomQuery.isLoading.value"
       message="正在进入专注房间"
     />
-    <ErrorToast
+    <PuInlineNotice tone="error"
       v-else-if="roomQuery.error.value"
       :message="roomQuery.error.value.message"
-      persistent
     />
 
     <template v-else-if="room">
@@ -200,9 +199,8 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { useRouter } from "vue-router";
-import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
 import { usePRRouteId } from "@/domains/pr/routing/usePRRouteId";
-import { PuButton, PuLoadingState, PuPageScaffold } from "@partner-up-dev/design-web";
+import { PuButton, PuInlineNotice, PuLoadingState, PuPageScaffold } from "@partner-up-dev/design-web";
 import {
   useRecordStudySprintEvent,
   useStartStudySprintSession,
diff --git a/apps/frontend/src/pages/UserProfilePage.vue b/apps/frontend/src/pages/UserProfilePage.vue
index 3874000d2..9ca839f9a 100644
--- a/apps/frontend/src/pages/UserProfilePage.vue
+++ b/apps/frontend/src/pages/UserProfilePage.vue
@@ -1,10 +1,12 @@
 <template>
   <PuPageScaffold class="user-profile-page">
     <template #header>
-      <PageHeader
+      <PuPageHeader
         :title="t('userProfilePage.title')"
         :subtitle="subtitle"
-        :back-fallback-to="backFallbackTo"
+        show-back
+        :back-label="t('common.backToHome')"
+        @back="handleBack"
       />
     </template>
 
@@ -21,10 +23,9 @@
       variant="outline"
     />
 
-    <ErrorToast
+    <PuInlineNotice tone="error"
       v-else-if="errorMessage"
       :message="errorMessage"
-      persistent
     />
 
     <PuCard v-else-if="profile" as="section" gap="md">
@@ -71,12 +72,13 @@ import {
   PuCard,
   PuEmptyState,
   PuImg,
+  PuInlineNotice,
   PuLoadingState,
+  PuPageHeader,
   PuPageScaffold,
 } from "@partner-up-dev/design-web";
-import PageHeader from "@/shared/ui/navigation/PageHeader.vue";
-import ErrorToast from "@/shared/ui/feedback/ErrorToast.vue";
 import PageFooter from "@/shared/ui/sections/PageFooter.vue";
+import { useFallbackBack } from "@/shared/routing/useFallbackBack";
 import {
   prDetailPath,
 } from "@/domains/pr/routing/routes";
@@ -138,6 +140,7 @@ const backFallbackTo = computed(() => {
 
   return "/";
 });
+const { handleBack } = useFallbackBack(backFallbackTo);
 </script>
 
 <style scoped lang="scss">
diff --git a/apps/frontend/src/shared/routing/useFallbackBack.ts b/apps/frontend/src/shared/routing/useFallbackBack.ts
new file mode 100644
index 000000000..5754fbd86
--- /dev/null
+++ b/apps/frontend/src/shared/routing/useFallbackBack.ts
@@ -0,0 +1,36 @@
+import { toValue, type MaybeRefOrGetter } from "vue";
+import { useRouter, type RouteLocationRaw } from "vue-router";
+
+type RouterHistoryState = {
+  back?: string | null;
+};
+
+const defaultBackFallbackTo: RouteLocationRaw = { path: "/" };
+
+const hasRouterBackEntry = (): boolean => {
+  if (typeof window === "undefined") {
+    return false;
+  }
+
+  const historyState = window.history.state as RouterHistoryState | null;
+  return typeof historyState?.back === "string" && historyState.back.length > 0;
+};
+
+export function useFallbackBack(
+  fallbackTo?: MaybeRefOrGetter<RouteLocationRaw | undefined>,
+) {
+  const router = useRouter();
+
+  const handleBack = async (): Promise<void> => {
+    if (hasRouterBackEntry()) {
+      router.back();
+      return;
+    }
+
+    await router.replace(toValue(fallbackTo) ?? defaultBackFallbackTo);
+  };
+
+  return {
+    handleBack,
+  };
+}
diff --git a/apps/frontend/src/shared/ui/feedback/ErrorToast.vue b/apps/frontend/src/shared/ui/feedback/ErrorToast.vue
deleted file mode 100644
index d6eebe055..000000000
--- a/apps/frontend/src/shared/ui/feedback/ErrorToast.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
-  <div class="error-toast" :class="{ persistent }">
-    <span class="icon">!</span>
-    <p>{{ message }}</p>
-    <button v-if="!persistent" class="close" @click="$emit('close')">
-      &times;
-    </button>
-  </div>
-</template>
-
-<script setup lang="ts">
-defineProps<{
-  message: string;
-  persistent?: boolean;
-}>();
-
-defineEmits<{
-  close: [];
-}>();
-</script>
-
-<style lang="scss" scoped>
-.error-toast {
-  display: flex;
-  align-items: center;
-  gap: var(--sys-spacing-small);
-  padding: var(--sys-spacing-small) var(--sys-spacing-medium);
-  background: var(--sys-color-error-container);
-  color: var(--sys-color-on-error-container);
-  border-radius: var(--sys-radius-small);
-
-  .icon {
-    @include mx.flex-center;
-    width: 24px;
-    height: 24px;
-    background: var(--sys-color-error);
-    color: var(--sys-color-on-error);
-    border-radius: 50%;
-    font-weight: bold;
-  }
-
-  p {
-    @include mx.pu-font(body);
-    flex: 1;
-  }
-
-  .close {
-    @include mx.pu-font(section);
-    background: none;
-    border: none;
-    color: inherit;
-    cursor: pointer;
-    min-width: calc(var(--sys-spacing-large) + var(--sys-spacing-small) + var(--sys-spacing-xsmall));
-    min-height: calc(var(--sys-spacing-large) + var(--sys-spacing-small) + var(--sys-spacing-xsmall));
-    padding: 0;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-
-    &:focus-visible {
-      outline: 2px solid var(--sys-color-on-error-container);
-      outline-offset: 2px;
-    }
-  }
-}
-</style>
diff --git a/apps/frontend/src/shared/ui/navigation/PageHeader.vue b/apps/frontend/src/shared/ui/navigation/PageHeader.vue
deleted file mode 100644
index da2377b9e..000000000
--- a/apps/frontend/src/shared/ui/navigation/PageHeader.vue
+++ /dev/null
@@ -1,172 +0,0 @@
-<template>
-  <header class="page-header" :class="`page-header--${variant}`">
-    <div class="page-header__bar">
-      <button
-        v-if="showBack"
-        class="page-header__back-action"
-        :aria-label="backLabel"
-        @click="handleBack"
-      >
-        <div class="i-mdi-arrow-left font-title-large"></div>
-      </button>
-
-      <h1 class="page-header__title">{{ title }}</h1>
-
-      <slot name="top-actions" />
-    </div>
-
-    <p v-if="subtitle" class="page-header__subtitle">{{ subtitle }}</p>
-
-    <div v-if="$slots.meta" class="page-header__meta">
-      <slot name="meta" />
-    </div>
-  </header>
-</template>
-
-<script setup lang="ts">
-import { useI18n } from "vue-i18n";
-import { getCurrentInstance } from "vue";
-import { useRouter, type RouteLocationRaw } from "vue-router";
-
-const props = withDefaults(
-  defineProps<{
-    title: string;
-    subtitle?: string;
-    variant?: "default" | "small";
-    showBack?: boolean;
-    backLabel?: string;
-    backFallbackTo?: RouteLocationRaw;
-  }>(),
-  {
-    variant: "default",
-    showBack: true,
-  },
-);
-
-const emit = defineEmits<{
-  (e: "back"): void;
-}>();
-
-const { t } = useI18n();
-const router = useRouter();
-const defaultBackFallbackTo: RouteLocationRaw = { path: "/" };
-const instance = getCurrentInstance();
-type RouterHistoryState = {
-  back?: string | null;
-};
-
-const backLabel = props.backLabel ?? t("common.backToHome");
-
-const hasRouterBackEntry = (): boolean => {
-  if (typeof window === "undefined") {
-    return false;
-  }
-
-  const historyState = window.history.state as RouterHistoryState | null;
-  return typeof historyState?.back === "string" && historyState.back.length > 0;
-};
-
-const resolveBackFallbackTo = (): RouteLocationRaw =>
-  props.backFallbackTo ?? defaultBackFallbackTo;
-
-async function handleBack(): Promise<void> {
-  const hasListener =
-    !!instance?.vnode.props &&
-    ((instance.vnode.props as Record<string, unknown>)["onBack"] ||
-      (instance.vnode.props as Record<string, unknown>)["onBack"] === null);
-
-  if (hasListener) {
-    emit("back");
-    return;
-  }
-
-  if (hasRouterBackEntry()) {
-    router.back();
-    return;
-  }
-
-  await router.replace(resolveBackFallbackTo());
-}
-</script>
-
-<style lang="scss" scoped>
-.page-header {
-  margin-bottom: var(--sys-spacing-medium);
-}
-
-.page-header--small {
-  margin-bottom: var(--sys-spacing-small);
-}
-
-.page-header__bar {
-  display: flex;
-  align-items: center;
-  gap: var(--sys-spacing-small);
-  min-width: 0;
-  margin-bottom: var(--sys-spacing-small);
-}
-
-.page-header__back-action {
-  display: flex;
-  background: transparent;
-  border: none;
-  color: var(--sys-color-on-surface);
-  cursor: pointer;
-  min-width: calc(var(--sys-spacing-large) + var(--sys-spacing-small) + var(--sys-spacing-xsmall));
-  min-height: calc(var(--sys-spacing-large) + var(--sys-spacing-small) + var(--sys-spacing-xsmall));
-  border-radius: 999px;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-
-  &:hover {
-    background: var(--sys-color-surface-container);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--sys-color-primary);
-    outline-offset: 2px;
-  }
-}
-
-.page-header__title {
-  @include mx.pu-font(hero);
-  color: var(--sys-color-on-surface);
-  margin: 0;
-  flex: 1;
-  min-width: 0;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  overflow-wrap: anywhere;
-}
-
-.page-header--small .page-header__title {
-  @include mx.pu-font(title);
-  -webkit-line-clamp: 1;
-}
-
-.page-header__subtitle {
-  @include mx.pu-font(body);
-  color: var(--sys-color-on-surface-variant);
-  margin: 0;
-}
-
-.page-header--small .page-header__subtitle {
-  @include mx.pu-font(control);
-}
-
-.page-header__meta {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: var(--sys-spacing-small);
-  gap: var(--sys-spacing-small);
-}
-
-.page-header__meta--vertical {
-  flex-direction: column;
-  align-items: flex-start;
-}
-</style>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 133437e2a..32ad92127 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -122,8 +122,8 @@ importers:
   apps/frontend:
     dependencies:
       '@partner-up-dev/design-web':
-        specifier: 0.4.0
-        version: 0.4.0(sass@1.97.3)(unocss@66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)))(vue@3.5.35(typescript@6.0.3))
+        specifier: 0.4.1
+        version: 0.4.1(sass@1.97.3)(unocss@66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)))(vue@3.5.35(typescript@6.0.3))
       '@tanstack/vue-query':
         specifier: ^5.60.0
         version: 5.92.9(vue@3.5.35(typescript@6.0.3))
@@ -1187,8 +1187,8 @@ packages:
     resolution: {integrity: sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==}
     engines: {node: '>= 10.0.0'}
 
-  '@partner-up-dev/design-web@0.4.0':
-    resolution: {integrity: sha512-LS1Sx+SmpecJQZaFTbuKOJc3rMU5TFCrk4oF4o5a/WvoWAV0VNhsmUr8OLid82Zg3nlAEKDaduUhI9cA+6IorA==, tarball: https://npm.pkg.github.com/download/@partner-up-dev/design-web/0.4.0/84e662924ef8d06aab22ad3ffd865ac9c0f5f99b}
+  '@partner-up-dev/design-web@0.4.1':
+    resolution: {integrity: sha512-V6dAcfeNUT9J3iLaY9/HzGUHz8LM83E58HCyoBMg2mqyxeIwjK/Bt8+UqhCU1UaqPCItjLpRiwbroxplZOYSDw==, tarball: https://npm.pkg.github.com/download/@partner-up-dev/design-web/0.4.1/ff09e419f3df2e636b8f41962e78e5e53e83e5a7}
     peerDependencies:
       sass: ^1.94.2
       unocss: ^66.6.8
@@ -3379,7 +3379,7 @@ snapshots:
       '@parcel/watcher-win32-x64': 2.5.6
     optional: true
 
-  '@partner-up-dev/design-web@0.4.0(sass@1.97.3)(unocss@66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)))(vue@3.5.35(typescript@6.0.3))':
+  '@partner-up-dev/design-web@0.4.1(sass@1.97.3)(unocss@66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)))(vue@3.5.35(typescript@6.0.3))':
     dependencies:
       sass: 1.97.3
       unocss: 66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0))
diff --git a/tasks/design-web-package-integration/component-migration/00-control-surface.md b/tasks/design-web-package-integration/component-migration/00-control-surface.md
index 4eec1caed..ca3c67c35 100644
--- a/tasks/design-web-package-integration/component-migration/00-control-surface.md
+++ b/tasks/design-web-package-integration/component-migration/00-control-surface.md
@@ -3,7 +3,7 @@
 ## Objective & Hypothesis
 
 Objective: finish the frontend migration from local reusable UI primitives to
-`@partner-up-dev/design-web@0.4.0`, one component-owned migration file at a
+`@partner-up-dev/design-web`, one component-owned migration file at a
 time, without changing PRD-level product workflows.
 
 Hypothesis: the right route is to preserve product intent while moving usage
@@ -41,7 +41,7 @@ design package should not absorb.
 ## Current Evidence
 
 - `apps/frontend/package.json` now depends on
-  `@partner-up-dev/design-web` `0.4.0`; the lockfile also points to `0.4.0`.
+  `@partner-up-dev/design-web` `0.4.1`; the lockfile also points to `0.4.1`.
 - `apps/frontend/src/main.ts` already imports
   `@partner-up-dev/design-web/styles`.
 - `apps/frontend/uno.config.ts` already uses
@@ -111,7 +111,7 @@ design package should not absorb.
   it before committing. `FormModeTimeControl.vue` now imports the package
   component directly and the local wheel picker implementation was deleted.
 - Agent Skill source clarified: the up-to-date `design-web` TanStack Intent
-  skill is shipped inside `@partner-up-dev/design-web@0.4.0` under
+  skill is shipped inside `@partner-up-dev/design-web` under
   `skills/design-web`. Agents should load it with `pnpm dlx
 @tanstack/intent@latest load @partner-up-dev/design-web#design-web` after
   package updates instead of hand-editing or relying on stale local copies under
@@ -202,6 +202,13 @@ diff --check` passed.
 @tanstack/intent@latest validate
 apps/frontend/node_modules/@partner-up-dev/design-web/skills/design-web`
   passed.
+- Agent Skill verification after `0.4.1` on 2026-06-14: `pnpm dlx
+@tanstack/intent@latest list --json` found
+  `@partner-up-dev/design-web#design-web` from the installed `0.4.1` package;
+  `pnpm dlx @tanstack/intent@latest load @partner-up-dev/design-web#design-web`
+  returned the package-shipped skill; `pnpm dlx @tanstack/intent@latest
+validate apps/frontend/node_modules/@partner-up-dev/design-web/skills/design-web`
+  passed.
 - Browser smoke with Edge through Playwright on `http://localhost:4001/` and
   `/pr/1` - passed. Evidence:
   `evidence/home-footer-mobile.png` and `evidence/pr-footer-mobile.png`.
@@ -241,5 +248,7 @@ Escalate verification when the touched component owns workflow risk:
   product-owned semantic blocker is recorded.
 - Upstream package follow-up: `0.4.0` resolved the root declaration and version
   literal blocker for current frontend consumption.
-- Second-slice follow-up: `PuForm` is still gated; use it only when a specific
-  form container can adopt package schema/validation semantics directly.
+- Package follow-up: `0.4.1` adds `PuInput nativeType="datetime-local"` support
+  and a documented `PuForm` submit event. `PuForm` is no longer blocked by a
+  missing event, but should still be adopted only where a specific form can
+  accept package schema/validation and submit semantics directly.
diff --git a/tasks/design-web-package-integration/deep-ui-refactor/10-exploration-map.md b/tasks/design-web-package-integration/deep-ui-refactor/10-exploration-map.md
new file mode 100644
index 000000000..992b78326
--- /dev/null
+++ b/tasks/design-web-package-integration/deep-ui-refactor/10-exploration-map.md
@@ -0,0 +1,123 @@
+# Exploration Map
+
+## Evidence Snapshot
+
+Commands used during initial exploration:
+
+- `rg --files -g 'AGENTS.md' -g '!node_modules' -g '!dist' -g '!build'`
+- `rg --files tasks/design-web-package-integration`
+- `rg --files apps/frontend/node_modules/@partner-up-dev/design-web/skills/design-web`
+- `rg -n '@/shared/ui/|<PageScaffold|<PageFooter|<PageHeader' apps/frontend/src`
+- line-count scan over `apps/frontend/src/**/*.vue`
+- raw-control scan for `<form`, `<input`, `<textarea`, `<select`, `<button`,
+  `<img`, role/status, and live-region usage
+
+## Residual Shared UI
+
+`src/shared/ui` remaining files:
+
+- `feedback/ErrorToast.vue`
+- `forms/MultiStopToggle.vue`
+- `forms/ProductLocalDateCalendarPicker.vue`
+- `forms/TimelinePolicyPicker.vue`
+- `navigation/PageHeader.vue`
+- `sections/APRNotificationSubscriptions.vue`
+- `sections/PageFooter.vue`
+- `sections/WeChatNotificationSubscriptionsCard.vue`
+
+Initial read:
+
+- `PageHeader` is primarily a local facade over page header structure plus
+  router fallback behavior. Package target is `PuPageHeader`; router fallback
+  can move to usage sites or a composable if needed.
+- `ErrorToast` is a local toast/inline error surface. Package targets are
+  `PuSnackbar`/`PuSnackbarHost` for transient feedback and `PuInlineNotice` for
+  persistent embedded state.
+- `MultiStopToggle` owns a custom multi-stop slider/toggle interaction. It is
+  not a direct `PuToggleSwitch` replacement. `PuSegmented` may be considered
+  only when the product accepts a segmented-control interaction.
+- `TimelinePolicyPicker` is a domain-shaped editor currently in shared UI. It
+  should likely move to a domain owner and compose package form controls.
+- `ProductLocalDateCalendarPicker` is product-local calendar selection. There
+  is no direct package calendar component in the current component map.
+
+## Large-File Hotspots
+
+Top files by line count from the initial scan:
+
+| Lines | File |
+| ---: | --- |
+| 1757 | `apps/frontend/src/pages/AdminAnalyticsPage.vue` |
+| 1440 | `apps/frontend/src/domains/event/ui/surfaces/AnchorEventFormModeSurface.vue` |
+| 1323 | `apps/frontend/src/pages/AnchorEventLandingPage.vue` |
+| 1078 | `apps/frontend/src/domains/event/ui/surfaces/AnchorEventCardModeSurface/AnchorEventCardModeSurface.vue` |
+| 1037 | `apps/frontend/src/domains/admin/ui/pr/views/AdminPRBasicView.vue` |
+| 993 | `apps/frontend/src/pages/StudySprintPomodoroPage.vue` |
+| 965 | `apps/frontend/src/domains/event/ui/surfaces/AnchorEventListModeSurface.vue` |
+| 883 | `apps/frontend/src/domains/event/ui/primitives/AnchorEventDemandCard.vue` |
+| 781 | `apps/frontend/src/domains/event/ui/controls/form-mode/FormModePreferenceControl.vue` |
+| 774 | `apps/frontend/src/pages/MePage.vue` |
+
+Interpretation:
+
+- Admin pages combine rails, filters, forms, result cards, summary cards, and
+  command handling in route-level files.
+- Anchor Event surfaces are state-machine heavy. They need topology mapping
+  before production edits.
+- PR editor/admin PR editor still contain many raw fields and repeated field
+  CSS patterns.
+
+## Raw Field Hotspots
+
+Top raw form-control files from the initial scan:
+
+| Count | File |
+| ---: | --- |
+| 16 | `apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceSpuEditor.vue` |
+| 14 | `apps/frontend/src/domains/admin/ui/pr/views/AdminPRBasicView.vue` |
+| 14 | `apps/frontend/src/domains/admin/ui/poi/sections/PoiBasicSection.vue` |
+| 13 | `apps/frontend/src/pages/AdminPaymentPage.vue` |
+| 10 | `apps/frontend/src/domains/admin-commerce/ui/pricing-rules/PricingRulesEditor.vue` |
+| 10 | `apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceSkuEditor.vue` |
+| 10 | `apps/frontend/src/pages/AdminRideHailingPage.vue` |
+| 9 | `apps/frontend/src/pages/AdminCommercePlacementPage.vue` |
+| 8 | `apps/frontend/src/domains/pr/ui/forms/PREditor.vue` |
+| 7 | `apps/frontend/src/pages/AdminAnalyticsPage.vue` |
+
+Interpretation:
+
+- Admin/commerce field cleanup can produce broad maintainability gains with
+  lower product risk than Form Mode refactors.
+- Eligible controls can move to `PuInput`/`PuTextarea`, but date-time and select
+  fields need a separate interaction/API decision.
+
+## Direct Package Targets
+
+- Page title/action/meta: `PuPageHeader`
+- Toast or transient feedback: `PuSnackbar`, `PuSnackbarHost`
+- Embedded persistent notice/error: `PuInlineNotice`
+- Dashboard bento layout: `PuBentoGrid`, `PuBentoItem`
+- Grouped content: `PuCard`
+- Dense row/settings groups: `PuCellGroup`, `PuCell`
+- Read-only facts: `PuDescriptionList`, `PuDescriptionItem`
+- Field shells: `PuFormItem`, `PuInput`, `PuTextarea`, `PuToggleSwitch`,
+  `PuCheckbox`, `PuCheckboxGroup`
+- Select/picker interaction: `PuPicker` when the interaction is acceptable
+- Media: `PuImg`
+- Expand/collapse: `PuAccordion`, `PuAccordionItem`
+- Loading placeholder: `PuSkeleton` when final layout shape is known,
+  `PuLoadingState` or `PuSpinner` otherwise
+
+## Open Questions For Discussion
+
+- Should `PageHeader` router fallback behavior move into a small composable
+  used by pages, or should usage sites decide `router.back()` versus fallback
+  route explicitly?
+- Should app-wide transient errors use a single `PuSnackbarHost` queue, or
+  should this slice only replace existing embedded `ErrorToast` usages with
+  local `PuSnackbar`/`PuInlineNotice` first?
+- Do we want to accept `PuPicker` as the admin option-selection interaction, or
+  keep native `select`/`datalist` until the package exposes a web-select field?
+- Is `AdminPageScaffold` a durable domain container worth keeping, or should
+  more of its aside/sticky behavior be expressed directly through
+  `PuPageScaffold` page-level props if the package covers it?
diff --git a/tasks/design-web-package-integration/deep-ui-refactor/20-slice-plan.md b/tasks/design-web-package-integration/deep-ui-refactor/20-slice-plan.md
new file mode 100644
index 000000000..e79440daf
--- /dev/null
+++ b/tasks/design-web-package-integration/deep-ui-refactor/20-slice-plan.md
@@ -0,0 +1,160 @@
+# Slice Plan
+
+## Planning Rule
+
+Each slice should reduce local UI ownership while preserving product workflow
+semantics. A slice may accept package-native visual and micro-interaction
+differences, but it should not hide package components behind compatibility
+wrappers just to preserve old markup or styling.
+
+## Slice 1: Platform Residuals
+
+Status: completed.
+
+Scope:
+
+- `PageHeader` -> direct `PuPageHeader` usage at call sites.
+- `ErrorToast` -> direct package feedback components at call sites.
+- Delete local `shared/ui/navigation/PageHeader.vue` and
+  `shared/ui/feedback/ErrorToast.vue` after call sites clear.
+
+Working decisions:
+
+- Persistent route, page, and region errors should become
+  `PuInlineNotice tone="error"`.
+- Dismissible command/form errors should become
+  `PuInlineNotice tone="error" dismissible` unless a usage is genuinely
+  transient page-level feedback.
+- Do not introduce app-wide `PuSnackbarHost` in this slice. The current
+  `ErrorToast` usages are embedded in page or form flow; replacing them with
+  a global snackbar queue would change feedback placement and lifecycle more
+  than necessary.
+- Preserve `PageHeader` back behavior deliberately. If a usage depends on the
+  old fallback route behavior, map it at the usage site or through a small
+  composable before deleting the local facade.
+
+Expected direct package imports:
+
+- `PuPageHeader`
+- `PuInlineNotice`
+
+Verification:
+
+- Frontend build.
+- Frontend token lint.
+- Frontend unit tests.
+- Source scan shows no `@/shared/ui/navigation/PageHeader.vue` imports.
+- Source scan shows no `@/shared/ui/feedback/ErrorToast.vue` imports.
+- Source scan shows no `<PageHeader` or `<ErrorToast` tags.
+- `git diff --check`.
+
+Implementation notes:
+
+- Added `shared/routing/useFallbackBack.ts` to preserve the old fallback-back
+  behavior without retaining a UI wrapper.
+- Migrated `PageHeader` usage sites directly to `PuPageHeader`.
+- Migrated embedded persistent and dismissible `ErrorToast` usage sites to
+  direct `PuInlineNotice tone="error"` usage.
+- Deleted `shared/ui/navigation/PageHeader.vue`,
+  `shared/ui/feedback/ErrorToast.vue`, and the one-line
+  `AdminCommerceProductErrorToast.vue` wrapper.
+- Updated `PRPage.creator-actions.test.ts` to assert the summary heading
+  semantically instead of relying on the deleted local
+  `.page-header__title` class.
+
+## Slice 2: Admin Container Primitives
+
+Status: candidate.
+
+Scope:
+
+- Replace `BentoLayout`/`BentoItem` with `PuBentoGrid`/`PuBentoItem` at usage
+  sites when the layout is truly bento/dashboard-like.
+- Evaluate `AdminRailPanel` usage sites for direct `PuCard`, `PuCellGroup`, or
+  local admin container retention.
+- Keep `AdminPageScaffold` only if it remains a real admin layout container
+  over `PuPageScaffold` rather than a visual facade.
+
+Primary risk:
+
+- Admin pages use these containers broadly. Migration should be batched by
+  domain/page group, not all admin pages at once unless the diff stays small.
+
+## Slice 3: Eligible Field Controls
+
+Status: candidate. First 0.4.1-enabled datetime cleanup started.
+
+Scope:
+
+- Replace eligible text, URL, email, tel, search, number, password,
+  datetime-local, and textarea controls with `PuFormItem` +
+  `PuInput`/`PuTextarea`.
+- Keep validation/error message ownership at the owning domain component.
+- Avoid local field CSS clones such as `field-input`, `pm-field-input`,
+  `analytics-input`, and `text-area` where package controls cover the intent.
+
+Still out of scope for this slice by default:
+
+- Native `select` and datalist-backed controls unless the product accepts a
+  `PuPicker` interaction.
+- Broad `PuForm` adoption unless a specific form can use package
+  schema/validation and submit semantics directly.
+
+0.4.1 uplift already applied:
+
+- `AdminAnalyticsPage.vue` filter inputs use `PuInput`, including
+  `native-type="datetime-local"`.
+- `PRFilterRail.vue`, `AdminPRBasicView.vue`, and `PoiBasicSection.vue`
+  datetime-local fields use direct `PuInput`.
+
+## Slice 4: Read-Only Display Cleanup
+
+Status: candidate.
+
+Scope:
+
+- Replace local KPI cards, summary grids, fact grids, status labels, and row
+  groups with `PuBentoItem`, `PuCard`, `PuDescriptionList`,
+  `PuDescriptionItem`, `PuCellGroup`, `PuCell`, `PuTag`, or `PuChipGroup`.
+- Prefer this for admin analytics and commerce/admin summary surfaces before
+  changing high-interaction user flows.
+
+## Slice 5: PR Editor Structure
+
+Status: candidate.
+
+Scope:
+
+- Split `PREditor.vue` and admin PR editor forms by field group and product
+  responsibility.
+- Keep writes, cache invalidation, routing, and telemetry in parent components
+  or domain composables.
+- Move reusable product field groups into PR-domain components.
+
+## Slice 6: Anchor Event Low-Risk States
+
+Status: candidate.
+
+Scope:
+
+- Replace remaining local loading/error/empty displays in list/card modes with
+  package components.
+- Use `PuEmptyState`, `PuInlineNotice`, `PuLoadingState`, or `PuSkeleton`
+  according to the state.
+
+## Slice 7: Anchor Event High-Risk Interactions
+
+Status: deferred.
+
+Scope:
+
+- Form Mode selection state, no-match state, matched handoff, long-press CTA,
+  carousel, card swipe projection, and splash handoff.
+
+Required before implementation:
+
+- Draw a state topology and sequence diagram for the surface.
+- Identify which components own local interaction state versus route/process
+  state.
+- Confirm any package substitution that changes gesture or transition
+  semantics.
diff --git a/tasks/design-web-package-integration/deep-ui-refactor/30-error-toast-usage.md b/tasks/design-web-package-integration/deep-ui-refactor/30-error-toast-usage.md
new file mode 100644
index 000000000..d35f94ff1
--- /dev/null
+++ b/tasks/design-web-package-integration/deep-ui-refactor/30-error-toast-usage.md
@@ -0,0 +1,141 @@
+# ErrorToast Usage Review
+
+## Current Component
+
+`shared/ui/feedback/ErrorToast.vue` is a local error surface with only:
+
+- `message: string`
+- `persistent?: boolean`
+- `close` event when not persistent
+
+It renders embedded page content, not a fixed-position toast stack.
+
+## Usage Shape
+
+Initial scan found 39 `ErrorToast` instances:
+
+- 27 persistent embedded errors.
+- 12 dismissible embedded command/form errors.
+
+There are no usages that clearly require a global snackbar queue in the first
+replacement slice.
+
+## Typical Persistent Usage Sites
+
+Route/page load failure:
+
+- `apps/frontend/src/pages/PRPage.vue`
+  - top-level `v-else-if="error"` after `PuLoadingState`
+  - target: `PuInlineNotice tone="error"` inside `PuPageScaffold`
+- `apps/frontend/src/pages/PRPairingCodePage.vue`
+  - detail query error and unavailable fallback
+  - target: `PuInlineNotice tone="error"`
+- `apps/frontend/src/pages/MePage.vue`
+  - page-level `errorMessage`
+  - target: `PuInlineNotice tone="error"`
+- `apps/frontend/src/pages/RouteApplicationPage.vue`
+  - application page error
+  - target: `PuInlineNotice tone="error"`
+- `apps/frontend/src/pages/LocationApplicationPage.vue`
+  - application page error
+  - target: `PuInlineNotice tone="error"`
+
+Admin workspace load failure:
+
+- `apps/frontend/src/pages/AdminPaymentPage.vue`
+  - `workspaceQuery.error.value`
+  - target: `PuInlineNotice tone="error"`
+- `apps/frontend/src/pages/AdminRideHailingPage.vue`
+  - `workspaceQuery.error.value`
+  - target: `PuInlineNotice tone="error"`
+- `apps/frontend/src/pages/AdminCommerceFulfillmentPage.vue`
+  - workspace load failure
+  - target: `PuInlineNotice tone="error"`
+- `apps/frontend/src/pages/AdminCommercePlacementPage.vue`
+  - workspace load failure
+  - target: `PuInlineNotice tone="error"`
+- `apps/frontend/src/pages/AdminAnchorEventPage.vue`
+  - page/workspace load failure
+  - target: `PuInlineNotice tone="error"`
+
+Domain region load failure:
+
+- `apps/frontend/src/domains/event/ui/surfaces/AnchorEventFormModeSurface.vue`
+  - form mode query error after `PuLoadingState`
+  - target: `PuInlineNotice tone="error"`
+- `apps/frontend/src/domains/pr/ui/composites/PRFactsCard.vue`
+  - facts-card query error
+  - target: `PuInlineNotice tone="error"` inside card/facts region
+- `apps/frontend/src/domains/pr/ui/forms/PREditor.vue`
+  - detail load error before editable fields
+  - target: `PuInlineNotice tone="error"`
+
+## Typical Dismissible Usage Sites
+
+Command/form mutation failure:
+
+- `apps/frontend/src/domains/pr/ui/forms/PREditor.vue`
+  - `commandErrorMessage`
+  - close handler: `resetCommandErrors`
+  - target: `PuInlineNotice tone="error" dismissible @close="resetCommandErrors"`
+- `apps/frontend/src/domains/pr/ui/forms/NLPRForm.vue`
+  - create mutation error
+  - close handler: `createMutation.reset()`
+  - target: `PuInlineNotice tone="error" dismissible`
+- `apps/frontend/src/domains/pr/ui/sections/InlineNLPRForm.vue`
+  - create mutation error
+  - close handler: `createMutation.reset()`
+  - target: `PuInlineNotice tone="error" dismissible`
+- `apps/frontend/src/pages/PRPage.vue`
+  - update-status error inside `PuModal`
+  - close handler: `resetStatusUpdate`
+  - target: `PuInlineNotice tone="error" dismissible`
+
+Admin mutation failure:
+
+- `apps/frontend/src/pages/AdminPaymentPage.vue`
+  - `pageErrorMessage`
+  - close handler: `clearErrors`
+  - target: `PuInlineNotice tone="error" dismissible`
+- `apps/frontend/src/pages/AdminRideHailingPage.vue`
+  - `pageErrorMessage`
+  - close handler: `clearErrors`
+  - target: `PuInlineNotice tone="error" dismissible`
+- `apps/frontend/src/pages/AdminCommercePlacementPage.vue`
+  - `pageErrorMessage`
+  - close handler: `clearErrors`
+  - target: `PuInlineNotice tone="error" dismissible`
+- `apps/frontend/src/pages/AdminCommerceOfferPage.vue`
+  - `pageErrorMessage`
+  - close handler: `clearErrors`
+  - target: `PuInlineNotice tone="error" dismissible`
+- `apps/frontend/src/pages/AdminAnchorEventPage.vue`
+  - `mutationErrorMessage`
+  - close handler: `resetMutationErrors`
+  - target: `PuInlineNotice tone="error" dismissible`
+- `apps/frontend/src/domains/admin/ui/pr/views/AdminPRBasicView.vue`
+  - `mutationErrorMessage`
+  - close handler: `resetMutationErrors`
+  - target: `PuInlineNotice tone="error" dismissible`
+- `apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceProductErrorToast.vue`
+  - context-owned `errorMessage`
+  - close handler: `context.clearErrorMessage`
+  - target: either direct `PuInlineNotice` in that section or delete this
+    one-line wrapper by moving the package component to the usage site.
+
+## Proposed Replacement Rule
+
+- Use `PuInlineNotice tone="error"` for all persistent embedded errors.
+- Use `PuInlineNotice tone="error" dismissible` for all existing closeable
+  command/form errors.
+- Do not use `PuSnackbar`/`PuSnackbarHost` in Slice 1 unless a usage is found
+  that is not embedded in a local page, form, modal, or region.
+
+## Slice 1 Result
+
+- All `ErrorToast` usage sites were migrated to direct `PuInlineNotice`
+  usage.
+- Existing close handlers were preserved through `dismissible @close`.
+- `AdminCommerceProductErrorToast.vue` was removed; its usage site now renders
+  `PuInlineNotice` directly from the product management page.
+- No global snackbar host was introduced.
diff --git a/tasks/design-web-package-integration/deep-ui-refactor/README.md b/tasks/design-web-package-integration/deep-ui-refactor/README.md
new file mode 100644
index 000000000..d08d48cbb
--- /dev/null
+++ b/tasks/design-web-package-integration/deep-ui-refactor/README.md
@@ -0,0 +1,152 @@
+# Deep UI Refactor Packet
+
+## Objective & Hypothesis
+
+Objective: deepen the frontend adoption of `@partner-up-dev/design-web` beyond
+the first component facade migrations by separating content from containers,
+using package-owned components where their intent matches, and reducing
+page/domain component complexity without changing PRD-level workflows.
+
+Hypothesis: the next maintainability gains are no longer mostly in
+`src/shared/ui`; they are in large page/domain surfaces that still mix data
+orchestration, layout containers, field rendering, local cards, local rows,
+and product interaction state in one file.
+
+## Current Mode
+
+- Input route: `Constraint`.
+- Active mode: `Execute`.
+- Production code status: Slice 1 implemented and verified.
+- Task scope: frontend UI structure and package component composition.
+
+## Guardrails Touched
+
+- Root task protocol: keep volatile exploration under `tasks/`.
+- Frontend architecture: pages assemble; domain UI owns product meaning;
+  shared UI stays for true primitives only.
+- Design package boundary: consume only public package exports and package
+  skill references. Do not use package source internals or story helpers.
+- Product invariant: do not change PRD-level workflows, routing, backend
+  mutations, or policy semantics while changing component structure.
+- Type invariant: no `any`; do not add local type shims for package APIs.
+
+## Current Understanding
+
+- The up-to-date design package skill is shipped with
+  `@partner-up-dev/design-web@0.4.1` under
+  `apps/frontend/node_modules/@partner-up-dev/design-web/skills/design-web`.
+- The previous component-migration packet has completed direct migrations for
+  local facades such as button, card choice, tabs, overlays, cells, chips,
+  tags, fields, image, loading, empty, notice, and page scaffold wrappers.
+- `src/shared/ui` is now small. Slice 1 removed the local `PageHeader` and
+  `ErrorToast` facades; remaining shared UI files are mostly product chrome or
+  app-specific composites: `PageFooter`, notification subscription cards,
+  `MultiStopToggle`, `TimelinePolicyPicker`, and
+  `ProductLocalDateCalendarPicker`.
+- The largest complexity hotspots are now page/domain files, especially:
+  `AdminAnalyticsPage.vue`, `AnchorEventFormModeSurface.vue`,
+  `AnchorEventLandingPage.vue`,
+  `AnchorEventCardModeSurface/AnchorEventCardModeSurface.vue`,
+  `AdminPRBasicView.vue`, `StudySprintPomodoroPage.vue`,
+  `AnchorEventListModeSurface.vue`, `AnchorEventDemandCard.vue`,
+  `FormModePreferenceControl.vue`, and `MePage.vue`.
+- Raw form controls remain concentrated in admin, commerce, PR editor, POI,
+  and route/event editing surfaces. The 0.4.1 package now supports
+  `PuInput nativeType="datetime-local"`, so datetime fields can move through
+  the normal field-control lane.
+
+## Package API Constraints
+
+- `PuInput` supports `datetime-local` as of `@partner-up-dev/design-web@0.4.1`.
+  Datalist-backed inputs still need a separate decision because `list` is not
+  part of the documented public `PuInput` props.
+- `PuForm` exposes schema/validation structure and a documented `submit`
+  event as of `0.4.1`. Use it where the form can adopt package form semantics
+  directly, not as a wrapper around old native-form markup.
+- `PuPicker` is available for option selection, but migrating native `select`
+  or `datalist` inputs requires product-level interaction acceptance.
+- `PuSnackbar` and `PuSnackbarHost` are available for transient feedback.
+  Persistent embedded error states should usually become `PuInlineNotice`.
+
+## Candidate Slice Order
+
+Detailed slice planning lives in `20-slice-plan.md`.
+
+1. Platform residuals: migrate `PageHeader` usage sites to `PuPageHeader`, and
+   replace `ErrorToast` with either `PuSnackbar`/`PuSnackbarHost` or
+   `PuInlineNotice` according to feedback scope.
+2. Admin container primitives: replace local `BentoLayout`/`BentoItem` with
+   `PuBentoGrid`/`PuBentoItem` at usage sites; evaluate `AdminRailPanel` as
+   direct `PuCard` or `PuCellGroup` usage. Keep `AdminPageScaffold` only if it
+   remains a real admin layout container over `PuPageScaffold`.
+3. Straightforward field cleanup: migrate eligible text, number, password, URL,
+   and textarea controls to `PuFormItem` + `PuInput`/`PuTextarea`; leave
+   `datetime-local`, native select, and datalist-backed controls in a separate
+   decision lane.
+4. Read-only/data display cleanup: replace local KPI cards, summary grids,
+   row groups, and status badges with `PuBentoItem`, `PuCard`,
+   `PuDescriptionList`, `PuDescriptionItem`, `PuCellGroup`, `PuCell`, or
+   `PuTag` when the semantic fit is direct.
+5. Content/container split for PR editor and admin PR editor: move repeated
+   field groups and policy sections into domain-owned components while keeping
+   backend-authoritative writes and cache/routing orchestration in parents.
+6. Anchor Event low-risk states: migrate remaining local loading/error/empty
+   states in list/card modes before touching gesture-heavy or state-machine
+   areas.
+7. Anchor Event high-risk surfaces: map the Form Mode and Card Mode state
+   machines before splitting. Long press, carousel, splash handoff, and route
+   handoff animation are product interaction contracts, not simple package
+   substitutions.
+
+## Defer By Default
+
+- `FormModeLongPressButton`, `LiquidWaveSplash`, `PeekRadioCarousel`, card
+  swipe projection layers, and map rendering.
+- `ProductLocalDateCalendarPicker` unless a package calendar/date selector
+  exists or the product accepts a different picker interaction.
+- Native `select` and datalist-backed controls until the product accepts a
+  package picker or the package exposes a matching public field API.
+
+## Verification Baseline
+
+For low-risk package substitution slices:
+
+- `pnpm --filter @partner-up-dev/frontend build`
+- `pnpm --filter @partner-up-dev/frontend lint:tokens`
+- `pnpm test:unit:frontend`
+- targeted source scans for deleted local facades and old prop vocabulary
+- `git diff --check`
+
+Slice 1 verification:
+
+- `pnpm --filter @partner-up-dev/frontend build`
+- `pnpm --filter @partner-up-dev/frontend lint:tokens`
+- `pnpm test:unit:frontend`
+- old facade source scan for `PageHeader` / `ErrorToast`
+- `git diff --check`
+
+0.4.1 uplift verification:
+
+- Package dependency and lockfile updated from `0.4.0` to `0.4.1`.
+- TanStack Intent package skill found by `list --json`, loaded by
+  `load @partner-up-dev/design-web#design-web`, and validated by
+  `validate apps/frontend/node_modules/@partner-up-dev/design-web/skills/design-web`.
+- `dist/version.d.ts` declares `version = "0.4.1"`.
+- `PuInputNativeType` includes `datetime-local`; `PuForm` declares a typed
+  `submit` event.
+- First low-risk datetime usage sites migrated to direct `PuInput`.
+- `pnpm --filter @partner-up-dev/frontend build` passed.
+- `pnpm --filter @partner-up-dev/frontend lint:tokens` passed.
+- `pnpm test:unit:frontend` passed.
+- `git diff --check` passed.
+- Source scans found no old `PageHeader`/`ErrorToast` usage-site references, no
+  package private-path imports, and no raw `type="datetime-local"` in the four
+  migrated datetime files.
+
+For route/page structure slices:
+
+- add targeted component tests when state ownership moves
+- smoke representative desktop/mobile routes with browser screenshots when
+  layout or visual density changes
+- escalate to scenario/system tests only when a route workflow changes, not for
+  pure component substitution

From e1ea9bae66b9fec814ede0b95280e78788ff521f Mon Sep 17 00:00:00 2001
From: Lanzhijiang <lanzhijiang@foxmail.com>
Date: Sun, 14 Jun 2026 18:56:31 +0800
Subject: [PATCH 09/94] refactor(frontend): migrate low-risk form fields

---
 .../AnchorEventCapacityDefaultsEditor.vue     |  83 +++----
 .../AnchorEventDefaultMeetingPointEditor.vue  |  59 ++---
 .../components/AnchorEventDetailsEditor.vue   |  40 ++--
 .../ui/poi/sections/PoiReviewSection.vue      |  45 ++--
 .../admin/ui/pr/views/AdminPRMessagesView.vue |  65 +++---
 .../deep-ui-refactor/20-slice-plan.md         |   5 +-
 .../40-slice3-field-control-plan.md           | 142 +++++++++++
 .../50-form-capability-needs.md               | 221 ++++++++++++++++++
 8 files changed, 492 insertions(+), 168 deletions(-)
 create mode 100644 tasks/design-web-package-integration/deep-ui-refactor/40-slice3-field-control-plan.md
 create mode 100644 tasks/design-web-package-integration/deep-ui-refactor/50-form-capability-needs.md

diff --git a/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventCapacityDefaultsEditor.vue b/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventCapacityDefaultsEditor.vue
index 22b84b795..bcb1d7be3 100644
--- a/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventCapacityDefaultsEditor.vue
+++ b/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventCapacityDefaultsEditor.vue
@@ -1,28 +1,26 @@
 <template>
   <div class="anchor-event-capacity-defaults-editor">
-    <label class="field">
-      <span class="field-label">
-        {{ t("adminPR.eventDefaultMinPartnersLabel") }}
-      </span>
-      <input
-        v-model.number="form.defaultMinPartners"
-        class="field-input"
-        type="number"
-        min="1"
+    <PuFormItem
+      :label="t('adminPR.eventDefaultMinPartnersLabel')"
+      for-id="anchor-event-default-min-partners"
+    >
+      <PuInput
+        id="anchor-event-default-min-partners"
+        v-model="defaultMinPartnersText"
+        native-type="number"
       />
-    </label>
+    </PuFormItem>
 
-    <label class="field">
-      <span class="field-label">
-        {{ t("adminPR.eventDefaultMaxPartnersLabel") }}
-      </span>
-      <input
-        v-model.number="form.defaultMaxPartners"
-        class="field-input"
-        type="number"
-        min="2"
+    <PuFormItem
+      :label="t('adminPR.eventDefaultMaxPartnersLabel')"
+      for-id="anchor-event-default-max-partners"
+    >
+      <PuInput
+        id="anchor-event-default-max-partners"
+        v-model="defaultMaxPartnersText"
+        native-type="number"
       />
-    </label>
+    </PuFormItem>
 
     <p v-if="validationMessage" class="error-message">
       {{ validationMessage }}
@@ -31,8 +29,10 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 import type { AnchorEventEditorForm } from "@/domains/admin/ui/anchor-event/anchorEventEditorTypes";
+import { PuFormItem, PuInput } from "@partner-up-dev/design-web";
 
 defineProps<{
   validationMessage: string | null;
@@ -40,6 +40,29 @@ defineProps<{
 
 const form = defineModel<AnchorEventEditorForm>({ required: true });
 const { t } = useI18n();
+
+const nullableNumberText = (value: number | null): string =>
+  value === null ? "" : String(value);
+
+const parseNullableNumber = (value: string): number | null => {
+  if (value.trim().length === 0) return null;
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : null;
+};
+
+const defaultMinPartnersText = computed({
+  get: () => nullableNumberText(form.value.defaultMinPartners),
+  set: (value) => {
+    form.value.defaultMinPartners = parseNullableNumber(value);
+  },
+});
+
+const defaultMaxPartnersText = computed({
+  get: () => nullableNumberText(form.value.defaultMaxPartners),
+  set: (value) => {
+    form.value.defaultMaxPartners = parseNullableNumber(value);
+  },
+});
 </script>
 
 <style lang="scss" scoped>
@@ -49,26 +72,6 @@ const { t } = useI18n();
   gap: var(--sys-spacing-small);
 }
 
-.field {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sys-spacing-xsmall);
-}
-
-.field-label {
-  @include mx.pu-font(control);
-  color: var(--sys-color-on-surface-variant);
-}
-
-.field-input {
-  width: 100%;
-  padding: var(--sys-spacing-small);
-  border: 1px solid var(--sys-color-outline-variant);
-  border-radius: var(--sys-radius-small);
-  background: var(--sys-color-surface);
-  color: var(--sys-color-on-surface);
-}
-
 .error-message {
   grid-column: 1 / -1;
   margin: 0;
diff --git a/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventDefaultMeetingPointEditor.vue b/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventDefaultMeetingPointEditor.vue
index 6e4c2b831..07d807cf5 100644
--- a/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventDefaultMeetingPointEditor.vue
+++ b/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventDefaultMeetingPointEditor.vue
@@ -1,35 +1,39 @@
 <template>
   <div class="anchor-event-default-meeting-point-editor">
-    <label class="field">
-      <span class="field-label">
-        {{ t("adminPR.eventMeetingPointDescriptionLabel") }}
-      </span>
-      <textarea
+    <PuFormItem
+      :label="t('adminPR.eventMeetingPointDescriptionLabel')"
+      for-id="anchor-event-meeting-point-description"
+    >
+      <PuTextarea
+        id="anchor-event-meeting-point-description"
         v-model="form.meetingPointDescription"
-        class="field-input field-textarea"
       />
-    </label>
-
-    <label class="field">
-      <span class="field-label">
-        {{ t("adminPR.eventMeetingPointImageUrlLabel") }}
-      </span>
-      <input v-model="form.meetingPointImageUrl" class="field-input" />
-    </label>
+    </PuFormItem>
+
+    <PuFormItem
+      :label="t('adminPR.eventMeetingPointImageUrlLabel')"
+      for-id="anchor-event-meeting-point-image-url"
+    >
+      <PuInput
+        id="anchor-event-meeting-point-image-url"
+        v-model="form.meetingPointImageUrl"
+        native-type="url"
+      />
+    </PuFormItem>
   </div>
 </template>
 
 <script setup lang="ts">
 import { useI18n } from "vue-i18n";
 import type { AnchorEventEditorForm } from "@/domains/admin/ui/anchor-event/anchorEventEditorTypes";
+import { PuFormItem, PuInput, PuTextarea } from "@partner-up-dev/design-web";
 
 const form = defineModel<AnchorEventEditorForm>({ required: true });
 const { t } = useI18n();
 </script>
 
 <style lang="scss" scoped>
-.anchor-event-default-meeting-point-editor,
-.field {
+.anchor-event-default-meeting-point-editor {
   display: flex;
   flex-direction: column;
 }
@@ -37,27 +41,4 @@ const { t } = useI18n();
 .anchor-event-default-meeting-point-editor {
   gap: var(--sys-spacing-small);
 }
-
-.field {
-  gap: var(--sys-spacing-xsmall);
-}
-
-.field-label {
-  @include mx.pu-font(control);
-  color: var(--sys-color-on-surface-variant);
-}
-
-.field-input {
-  width: 100%;
-  padding: var(--sys-spacing-small);
-  border: 1px solid var(--sys-color-outline-variant);
-  border-radius: var(--sys-radius-small);
-  background: var(--sys-color-surface);
-  color: var(--sys-color-on-surface);
-}
-
-.field-textarea {
-  min-height: 112px;
-  resize: vertical;
-}
 </style>
diff --git a/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventDetailsEditor.vue b/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventDetailsEditor.vue
index e865cc720..1e52481e7 100644
--- a/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventDetailsEditor.vue
+++ b/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventDetailsEditor.vue
@@ -1,19 +1,25 @@
 <template>
   <div class="anchor-event-details-editor">
-    <label class="field">
-      <span class="field-label">{{ t("adminPR.eventNameLabel") }}</span>
-      <input v-model="form.title" class="field-input" />
-    </label>
+    <PuFormItem
+      :label="t('adminPR.eventNameLabel')"
+      for-id="anchor-event-title"
+    >
+      <PuInput id="anchor-event-title" v-model="form.title" />
+    </PuFormItem>
 
-    <label class="field">
-      <span class="field-label">{{ t("adminPR.eventTypeLabel") }}</span>
-      <input v-model="form.type" class="field-input" />
-    </label>
+    <PuFormItem
+      :label="t('adminPR.eventTypeLabel')"
+      for-id="anchor-event-type"
+    >
+      <PuInput id="anchor-event-type" v-model="form.type" />
+    </PuFormItem>
 
-    <label class="field">
-      <span class="field-label">{{ t("adminPR.eventDescriptionLabel") }}</span>
-      <textarea v-model="form.description" class="field-input field-textarea" />
-    </label>
+    <PuFormItem
+      :label="t('adminPR.eventDescriptionLabel')"
+      for-id="anchor-event-description"
+    >
+      <PuTextarea id="anchor-event-description" v-model="form.description" />
+    </PuFormItem>
 
     <label class="field">
       <span class="field-label">{{ t("adminPR.eventStatusLabel") }}</span>
@@ -29,14 +35,14 @@
 <script setup lang="ts">
 import { useI18n } from "vue-i18n";
 import type { AnchorEventEditorForm } from "@/domains/admin/ui/anchor-event/anchorEventEditorTypes";
+import { PuFormItem, PuInput, PuTextarea } from "@partner-up-dev/design-web";
 
 const form = defineModel<AnchorEventEditorForm>({ required: true });
 const { t } = useI18n();
 </script>
 
 <style lang="scss" scoped>
-.anchor-event-details-editor,
-.field {
+.anchor-event-details-editor {
   display: flex;
   flex-direction: column;
 }
@@ -46,6 +52,8 @@ const { t } = useI18n();
 }
 
 .field {
+  display: flex;
+  flex-direction: column;
   gap: var(--sys-spacing-xsmall);
 }
 
@@ -63,8 +71,4 @@ const { t } = useI18n();
   color: var(--sys-color-on-surface);
 }
 
-.field-textarea {
-  min-height: 96px;
-  resize: vertical;
-}
 </style>
diff --git a/apps/frontend/src/domains/admin/ui/poi/sections/PoiReviewSection.vue b/apps/frontend/src/domains/admin/ui/poi/sections/PoiReviewSection.vue
index 3e07979d5..ae17998d1 100644
--- a/apps/frontend/src/domains/admin/ui/poi/sections/PoiReviewSection.vue
+++ b/apps/frontend/src/domains/admin/ui/poi/sections/PoiReviewSection.vue
@@ -34,14 +34,16 @@
             {{ t("adminPois.reviewedAt", { time: selectedReviewedAt }) }}
           </p>
 
-          <label class="field">
-            <span class="field-label">{{ t("adminPois.rejectReasonLabel") }}</span>
-            <textarea
+          <PuFormItem
+            :label="t('adminPois.rejectReasonLabel')"
+            for-id="admin-pois-reject-reason"
+          >
+            <PuTextarea
+              id="admin-pois-reject-reason"
               v-model="rejectReasonDraft"
-              class="field-input field-textarea"
               :placeholder="t('adminPois.rejectReasonPlaceholder')"
-            ></textarea>
-          </label>
+            />
+          </PuFormItem>
 
           <div class="action-row">
             <PuButton
@@ -86,7 +88,12 @@ import { useI18n } from "vue-i18n";
 import type { AdminPoisResponse } from "@/domains/admin/queries/useAdminPoiManagement";
 import BentoItem from "@/domains/admin/ui/layout/BentoItem.vue";
 import BentoLayout from "@/domains/admin/ui/layout/BentoLayout.vue";
-import { PuButton, PuTag } from "@partner-up-dev/design-web";
+import {
+  PuButton,
+  PuFormItem,
+  PuTag,
+  PuTextarea,
+} from "@partner-up-dev/design-web";
 
 type PoiRecord = NonNullable<AdminPoisResponse>[number];
 type PoiStatus = PoiRecord["status"];
@@ -155,28 +162,4 @@ const statusTagTone = (
   flex-wrap: wrap;
 }
 
-.field {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sys-spacing-xsmall);
-}
-
-.field-label {
-  @include mx.pu-font(control);
-  color: var(--sys-color-on-surface-variant);
-}
-
-.field-input {
-  width: 100%;
-  padding: var(--sys-spacing-small);
-  border: 1px solid var(--sys-color-outline-variant);
-  border-radius: var(--sys-radius-small);
-  background: var(--sys-color-surface);
-  color: var(--sys-color-on-surface);
-}
-
-.field-textarea {
-  min-height: 5rem;
-  resize: vertical;
-}
 </style>
diff --git a/apps/frontend/src/domains/admin/ui/pr/views/AdminPRMessagesView.vue b/apps/frontend/src/domains/admin/ui/pr/views/AdminPRMessagesView.vue
index 55fb6042b..a9efe254f 100644
--- a/apps/frontend/src/domains/admin/ui/pr/views/AdminPRMessagesView.vue
+++ b/apps/frontend/src/domains/admin/ui/pr/views/AdminPRMessagesView.vue
@@ -198,29 +198,34 @@
                         </div>
                       </div>
 
-                      <textarea
+                      <PuFormItem
                         v-if="editingMessageId === item.id"
-                        v-model="editingMessageBody"
-                        class="field-input field-textarea"
-                        :placeholder="t('adminPRMessages.messagePlaceholder')"
-                      ></textarea>
+                        :label="t('adminPRMessages.messageLabel')"
+                        :for-id="`admin-pr-message-${item.id}-edit`"
+                      >
+                        <PuTextarea
+                          :id="`admin-pr-message-${item.id}-edit`"
+                          v-model="editingMessageBody"
+                          :placeholder="t('adminPRMessages.messagePlaceholder')"
+                        />
+                      </PuFormItem>
                       <p v-else class="message-body">
                         {{ item.body }}
                       </p>
                     </article>
                   </div>
 
-                  <label class="field">
-                    <span class="field-label">{{
-                      t("adminPRMessages.messageLabel")
-                    }}</span>
-                    <textarea
+                  <PuFormItem
+                    :label="t('adminPRMessages.messageLabel')"
+                    for-id="admin-pr-message-draft"
+                  >
+                    <PuTextarea
+                      id="admin-pr-message-draft"
                       v-model="messageDraftBody"
-                      class="field-input field-textarea"
                       :placeholder="t('adminPRMessages.messagePlaceholder')"
                       :disabled="prMessagesActions.isPending.create.value"
-                    ></textarea>
-                  </label>
+                    />
+                  </PuFormItem>
 
                   <p v-if="messageActionError" class="error-message">
                     {{ messageActionError }}
@@ -270,7 +275,14 @@ import {
 } from "@/domains/admin/queries/useAdminPRManagement";
 import { useAdminAccess } from "@/domains/admin/use-cases/useAdminAccess";
 import { formatLocalDateTimeValue } from "@/shared/datetime/formatLocalDateTime";
-import { PuButton, PuCard, PuInlineNotice, PuLoadingState } from "@partner-up-dev/design-web";
+import {
+  PuButton,
+  PuCard,
+  PuFormItem,
+  PuInlineNotice,
+  PuLoadingState,
+  PuTextarea,
+} from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const { isAdmin, logout } = useAdminAccess();
@@ -445,31 +457,6 @@ const handleDeleteMessage = async (messageId: number) => {
   padding-right: var(--sys-spacing-xsmall);
 }
 
-.field {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sys-spacing-xsmall);
-}
-
-.field-label {
-  @include mx.pu-font(control);
-  color: var(--sys-color-on-surface-variant);
-}
-
-.field-input {
-  width: 100%;
-  padding: var(--sys-spacing-small);
-  border: 1px solid var(--sys-color-outline-variant);
-  border-radius: var(--sys-radius-small);
-  background: var(--sys-color-surface);
-  color: var(--sys-color-on-surface);
-}
-
-.field-textarea {
-  min-height: 96px;
-  resize: vertical;
-}
-
 .stack--tight {
   gap: var(--sys-spacing-xsmall);
 }
diff --git a/tasks/design-web-package-integration/deep-ui-refactor/20-slice-plan.md b/tasks/design-web-package-integration/deep-ui-refactor/20-slice-plan.md
index e79440daf..88a117d87 100644
--- a/tasks/design-web-package-integration/deep-ui-refactor/20-slice-plan.md
+++ b/tasks/design-web-package-integration/deep-ui-refactor/20-slice-plan.md
@@ -82,7 +82,10 @@ Primary risk:
 
 ## Slice 3: Eligible Field Controls
 
-Status: candidate. First 0.4.1-enabled datetime cleanup started.
+Status: in progress. First 0.4.1-enabled datetime cleanup completed, and first
+low-risk field-control group implemented. Detailed field-control lane planning
+lives in `40-slice3-field-control-plan.md`; package-side capability needs live
+in `50-form-capability-needs.md`.
 
 Scope:
 
diff --git a/tasks/design-web-package-integration/deep-ui-refactor/40-slice3-field-control-plan.md b/tasks/design-web-package-integration/deep-ui-refactor/40-slice3-field-control-plan.md
new file mode 100644
index 000000000..65c6cacce
--- /dev/null
+++ b/tasks/design-web-package-integration/deep-ui-refactor/40-slice3-field-control-plan.md
@@ -0,0 +1,142 @@
+# Slice 3 Field Control Plan
+
+## Decision
+
+Slice 3 is ready to start, but it should not be one broad migration over every
+raw form control. The current codebase still has many field-control sites mixed
+with domain-specific validation, native `select`, datalist, route pickers,
+dynamic arrays, and submit lifecycle. Treat this as a sequence of smaller
+field-control slices.
+
+## Current Evidence
+
+Read-only scans on 2026-06-14 found raw `input`/`textarea` controls in these
+main clusters:
+
+- Admin PR/POI:
+  `AdminPRBasicView.vue`, `AdminPRMessagesView.vue`, `PRFilterRail.vue`,
+  `PoiBasicSection.vue`, `PoiReviewSection.vue`, `PoiSelectorRail.vue`.
+- Admin Anchor Event:
+  details, default meeting point, capacity defaults, location pool, location
+  meeting points, preference tags, landing rollout, time-pool strategy, route
+  pool, and route applications components.
+- Admin Commerce:
+  product management editors, pricing rules, JSON logic, offer, placement,
+  fulfillment, payment, and ride-hailing pages.
+- PR user flows:
+  `PREditor.vue`, `NLPRForm.vue`, `InlineNLPRForm.vue`,
+  `PRJoinGateConfigEditor.vue`, `DateTimeRangePicker.vue`,
+  `PRPlaceModeField.vue`, and `PRWaitlistActions.vue`.
+
+The scan also found multiple native `select` and datalist-backed fields. These
+remain separate from the straightforward `PuInput`/`PuTextarea` lane.
+
+## Lane A: Straight Field Controls
+
+Use direct package fields:
+
+- `PuFormItem` for label, hint, required, and error text.
+- `PuInput` for single-line text, URL, email, tel, search, number, password,
+  date, time, and datetime-local.
+- `PuTextarea` for multiline text.
+
+Good first targets:
+
+- `AdminPRMessagesView.vue`: only textareas, low interaction complexity.
+- `PoiReviewSection.vue`: one textarea, low blast radius.
+- `AnchorEventDefaultMeetingPointEditor.vue`: one textarea plus one text input.
+- `AnchorEventCapacityDefaultsEditor.vue`: two number inputs.
+- `AnchorEventDetailsEditor.vue`: title/type/description fields while leaving
+  native status `select` untouched.
+- `PRJoinGateConfigEditor.vue`: text/number/textarea controls, no native
+  submit lifecycle.
+
+Rules:
+
+- Do not keep local field wrappers.
+- Do not migrate native `select` or datalist fields in this lane.
+- Preserve owner validation and dirty-state events at the usage site.
+- Remove local `.field-input`, `.field-textarea`, `.pm-field-input`, or
+  `.text-area` CSS only when all users in that component are gone.
+
+## Lane B: PuForm Containers
+
+`PuForm` is now viable because `0.4.1` documents a `submit` event, but it
+should be adopted only per form boundary.
+
+Candidate order:
+
+1. `InlineNLPRForm.vue` and `NLPRForm.vue`: compact PR submission forms with
+   simple native submit behavior.
+2. `UpdatePRStatusForm.vue`: small status submit form if package form semantics
+   keep the existing `formId` integration intact.
+3. `PREditor.vue`: larger and should wait until field groups are split or at
+   least mapped.
+4. Admin payment/ride-hailing forms: use later, because they combine entity
+   selection, multiple selects, and persistence actions.
+
+Rules:
+
+- Do not wrap old native markup in `PuForm` just to claim migration.
+- Use `PuForm` when the submit boundary is the real form boundary.
+- Keep submit side effects and mutation ownership in the current owner
+  component/composable.
+- Pause before changing form IDs or external button submit relationships.
+
+## Lane C: Deferred Controls
+
+Defer unless explicitly discussed:
+
+- Native `select` fields.
+- Datalist-backed fields (`list` / `:list`), because `PuInput` does not expose
+  a public `list` prop.
+- Checkbox grids and weekday selectors unless a matching package control is
+  selected.
+- Dynamic JSON/rule editors where input widgets are embedded in a DSL editor.
+
+## Proposed First Subslice
+
+Status: implemented for the first low-risk field-control group.
+
+Start with Lane A, not `PuForm`.
+
+Suggested scope:
+
+- `AdminPRMessagesView.vue`
+- `PoiReviewSection.vue`
+- `AnchorEventDefaultMeetingPointEditor.vue`
+- `AnchorEventCapacityDefaultsEditor.vue`
+- `AnchorEventDetailsEditor.vue` text/textarea fields only
+
+This keeps the first field-control slice small, exercises `PuTextarea` and
+number/text `PuInput`, and avoids submit, select, datalist, and dynamic-array
+semantics.
+
+Verification:
+
+- `pnpm --filter @partner-up-dev/frontend build`
+- `pnpm --filter @partner-up-dev/frontend lint:tokens`
+- `pnpm test:unit:frontend`
+- targeted scans for raw field CSS in touched files
+- `git diff --check`
+
+Implementation notes:
+
+- Migrated `AdminPRMessagesView.vue`, `PoiReviewSection.vue`,
+  `AnchorEventDefaultMeetingPointEditor.vue`,
+  `AnchorEventCapacityDefaultsEditor.vue`, and the text/textarea fields in
+  `AnchorEventDetailsEditor.vue`.
+- Kept the native status `select` in `AnchorEventDetailsEditor.vue`.
+- `PuInput native-type="number"` required local computed string adapters for
+  nullable numeric state. This is recorded as an upstream design package need
+  in `50-form-capability-needs.md`.
+
+Verification:
+
+- `pnpm --filter @partner-up-dev/frontend build` passed.
+- `pnpm --filter @partner-up-dev/frontend lint:tokens` passed.
+- `pnpm test:unit:frontend` passed.
+- `git diff --check` passed.
+- Targeted scans found no raw `<input>` or `<textarea>` in touched files.
+- Targeted field CSS scan found only the intentionally retained native status
+  `select` in `AnchorEventDetailsEditor.vue`.
diff --git a/tasks/design-web-package-integration/deep-ui-refactor/50-form-capability-needs.md b/tasks/design-web-package-integration/deep-ui-refactor/50-form-capability-needs.md
new file mode 100644
index 000000000..4a29aebe7
--- /dev/null
+++ b/tasks/design-web-package-integration/deep-ui-refactor/50-form-capability-needs.md
@@ -0,0 +1,221 @@
+# Form Capability Needs For Design Web
+
+## Context
+
+This note captures frontend form usage found during Slice 3A of the
+`@partner-up-dev/design-web` migration. It is intended as upstream input for
+future web design package work, not as an app-side API contract.
+
+The app can already use:
+
+- `PuFormItem` for visible labels, hints, required markers, explicit errors,
+  and form-injected errors.
+- `PuInput` for string-backed single-line controls, including
+  `datetime-local` as of `0.4.1`.
+- `PuTextarea` for string-backed multiline controls.
+- `PuForm` for structural form containers with a documented `submit` event as
+  of `0.4.1`.
+- `PuPicker`, `PuCheckbox`, and `PuCheckboxGroup` where the current interaction
+  model fits.
+
+## Current App Usage Patterns
+
+### Plain Field Controls
+
+Common usage:
+
+- text, URL, and image URL fields
+- numeric fields such as participant counts, durations, offsets, prices, ratio
+  basis points, sort order, quantities, and rule IDs
+- `datetime-local`, `date`, and `time` fields
+- multiline text such as notes, descriptions, JSON/rule text, message bodies,
+  rejection reasons, and meeting point descriptions
+
+Migration status:
+
+- Text and textarea fields are straightforward with `PuFormItem`,
+  `PuInput`, and `PuTextarea`.
+- `datetime-local` is now viable with `PuInput native-type="datetime-local"`.
+- Numeric fields work visually with `native-type="number"`, but model typing
+  is not ergonomic when the app owns `number | null` state.
+
+### Select And Datalist
+
+Remaining native usage:
+
+- enum selects: status, type, product type, pricing model, rule operator,
+  frequency, mode, visibility, charge mode
+- entity selects: POI, feedback questionnaire template/instance, offer/product
+  references
+- datalist-backed text fields: PR type, location, place mode location
+
+Migration status:
+
+- `PuPicker` exists, but it changes the interaction to a drawer/picker flow.
+  That can be right for mobile or constrained flows, but is not always a
+  direct replacement for dense admin selects.
+- `PuInput` does not expose a documented `list` prop, so datalist-backed fields
+  stay native unless the app accepts a different autocomplete/combobox pattern.
+
+### Submit Boundaries
+
+Remaining native form usage:
+
+- compact PR forms: `NLPRForm.vue`, `InlineNLPRForm.vue`
+- external form integration: `UpdatePRStatusForm.vue` has `formId`
+- larger editor forms: `PREditor.vue`
+- admin entity forms: payment and ride-hailing pages
+- application forms: route/location application pages
+
+Migration status:
+
+- `PuForm` can now be evaluated because it emits `submit`.
+- Some app forms rely on native `id`/external submit behavior or page-level
+  mutation ownership. Those need explicit package support or careful app-side
+  mapping before migration.
+
+### Boolean And Multi-Select
+
+Remaining usage:
+
+- weekday checkbox grids in POI availability rules
+- opt-in/confirmation-like booleans in domain-specific controls
+- admin rule editors with condition arrays
+
+Migration status:
+
+- `PuCheckbox` and `PuCheckboxGroup` exist, but dense admin checkbox-grid
+  layouts may need better documented layout and option APIs before broad
+  migration.
+
+## Upstream Needs
+
+### P0: Numeric Field Model Support
+
+Current issue:
+
+- `PuInput native-type="number"` has `modelValue: string`.
+- App state often uses `number | null`.
+- Direct `v-model.number` fails type-checking against the package component
+  because the component contract is string-only.
+
+Needed package capability:
+
+- Either support `modelValue: string | number | null` for numeric native type,
+  or provide a dedicated numeric component/helper such as `PuNumberInput`.
+- Emit a stable numeric value mode, preferably with explicit empty handling:
+  empty -> `null`, valid number -> `number`, invalid intermediate text handled
+  deliberately.
+- Publish types for this behavior so app code does not need local computed
+  string adapters for every numeric field.
+
+### P0: Native Numeric Constraints
+
+Current issue:
+
+- App numeric controls often use native `min`, `max`, and sometimes `step`.
+- `PuInput` public props do not document `min`, `max`, or `step`.
+
+Needed package capability:
+
+- Public props for `min`, `max`, and `step` when `nativeType` is numeric/date
+  compatible.
+- Pass-through typing and runtime forwarding to the internal native input.
+- Optional invalid-state integration with `PuFormItem` / `PuForm`.
+
+### P1: Select Field For Dense Admin UI
+
+Current issue:
+
+- Native `select` remains common in dense admin workflows.
+- `PuPicker` is available but is a drawer-style picker interaction, which is
+  not always the right admin-table/editor interaction.
+
+Needed package capability:
+
+- A web-native select-like component, for example `PuSelect`, supporting:
+  options, labels, disabled options, placeholder, clearable state, and
+  `PuFormItem` integration.
+- Keyboard and screen-reader behavior comparable to native select or a robust
+  combobox.
+- Compact density suitable for admin panels.
+
+### P1: Autocomplete / Datalist Replacement
+
+Current issue:
+
+- Several fields are free-text but aided by datalist suggestions.
+- `PuInput` does not document a `list` prop, and `PuPicker` changes the model
+  from free text to explicit option picking.
+
+Needed package capability:
+
+- Either document and type native `list` forwarding on `PuInput`, or provide a
+  `PuCombobox` / `PuAutocomplete` component.
+- Must support free text plus suggestions, not only fixed option selection.
+- Should support option labels distinct from submitted values.
+
+### P1: Form Submit Integration
+
+Current issue:
+
+- `PuForm` now emits `submit`, but the app still needs confidence around native
+  form behaviors before broad migration.
+
+Needed package capability:
+
+- Document whether `PuForm` forwards `id`, `name`, `autocomplete`, `novalidate`,
+  `method`, and `action`.
+- Document external submit button support through native `form` attributes.
+- Provide typed submit event examples with `preventDefault` semantics clearly
+  stated.
+- Consider helper props for pending/disabled submit state only if that does not
+  blur mutation ownership.
+
+### P2: Textarea Sizing Controls
+
+Current issue:
+
+- App textareas use fixed minimum heights such as 80px, 96px, or 112px, plus
+  native resize behavior.
+- `PuTextarea` supports `autoHeight`, but public docs do not expose rows,
+  minRows, maxRows, or resize policy.
+
+Needed package capability:
+
+- Public `rows`, `minRows`, `maxRows`, or `minHeight` strategy.
+- Clear interaction between `autoHeight` and manual resize.
+- This would reduce app-side class styling for multiline editors.
+
+### P2: Change/Input Event Ergonomics
+
+Current issue:
+
+- Some current fields mark dirty on native `input` or `change`.
+- `PuInput` emits `update:modelValue`, `focus`, `blur`, but not a documented
+  raw `input` or `change` event.
+
+Needed package capability:
+
+- Document the intended dirty-state hook.
+- If package components should replace native controls in dirty-tracked admin
+  editors, expose typed `input`/`change` events or recommend
+  `update:modelValue`.
+
+## App Migration Implications
+
+Recommended package-side priority:
+
+1. Numeric model and numeric constraint support.
+2. Dense web select and autocomplete/combobox support.
+3. `PuForm` native attribute and external-submit documentation.
+4. Textarea sizing controls.
+5. Dirty-state event guidance.
+
+Until then, the frontend should:
+
+- Continue migrating string-backed text and textarea fields directly.
+- Use local computed adapters for small numbers only when the replacement is
+  otherwise worth it.
+- Keep native select and datalist controls out of direct migration slices.
+- Adopt `PuForm` only per form boundary after submit semantics are checked.

From 738038517e1801535a84f728df009024b51c9b0b Mon Sep 17 00:00:00 2001
From: Lanzhijiang <lanzhijiang@foxmail.com>
Date: Sun, 14 Jun 2026 19:13:37 +0800
Subject: [PATCH 10/94] refactor(frontend): migrate anchor event state UI

---
 .../ui/sections/OtherAnchorEventsSection.vue  |  25 ++--
 .../landing/EventHighlightsSection.vue        |  77 +++++-----
 .../AnchorEventCardModeSurface.scss           |   7 +
 .../AnchorEventCardModeSurface.vue            |  27 ++--
 .../surfaces/AnchorEventListModeSurface.vue   | 134 ++++++------------
 .../deep-ui-refactor/20-slice-plan.md         |  11 +-
 .../60-slice6-anchor-event-states.md          |  35 +++++
 7 files changed, 169 insertions(+), 147 deletions(-)
 create mode 100644 tasks/design-web-package-integration/deep-ui-refactor/60-slice6-anchor-event-states.md

diff --git a/apps/frontend/src/domains/event/ui/sections/OtherAnchorEventsSection.vue b/apps/frontend/src/domains/event/ui/sections/OtherAnchorEventsSection.vue
index 200d15757..e51fb3525 100644
--- a/apps/frontend/src/domains/event/ui/sections/OtherAnchorEventsSection.vue
+++ b/apps/frontend/src/domains/event/ui/sections/OtherAnchorEventsSection.vue
@@ -13,9 +13,12 @@
       collapsible
       variant="outline"
     >
-      <p v-if="isLoading" class="other-anchor-events__state">
-        {{ t("common.loading") }}
-      </p>
+      <PuLoadingState
+        v-if="isLoading"
+        compact
+        align="start"
+        :message="t('common.loading')"
+      />
 
       <AnchorEventHorizontalList
         v-else
@@ -36,9 +39,12 @@
       {{ t("anchorEvent.otherEvents.title") }}
     </h3>
 
-    <p v-if="isLoading" class="other-anchor-events__state">
-      {{ t("common.loading") }}
-    </p>
+    <PuLoadingState
+      v-if="isLoading"
+      compact
+      align="start"
+      :message="t('common.loading')"
+    />
 
     <AnchorEventHorizontalList
       v-else
@@ -56,7 +62,7 @@ import { useI18n } from "vue-i18n";
 import { useAnchorEvents } from "@/domains/event/queries/useAnchorEvents";
 import { useInViewStagger } from "@/shared/motion/useInViewStagger";
 import AnchorEventHorizontalList from "@/domains/event/ui/composites/AnchorEventHorizontalList.vue";
-import { PuCard } from "@partner-up-dev/design-web";
+import { PuCard, PuLoadingState } from "@partner-up-dev/design-web";
 
 const props = withDefaults(
   defineProps<{
@@ -114,9 +120,4 @@ const shouldRenderSection = computed(() => {
   color: var(--sys-color-on-surface);
 }
 
-.other-anchor-events__state {
-  margin: 0;
-  @include mx.pu-font(body);
-  color: var(--sys-color-on-surface-variant);
-}
 </style>
diff --git a/apps/frontend/src/domains/event/ui/sections/landing/EventHighlightsSection.vue b/apps/frontend/src/domains/event/ui/sections/landing/EventHighlightsSection.vue
index ea46e4978..e92103d51 100644
--- a/apps/frontend/src/domains/event/ui/sections/landing/EventHighlightsSection.vue
+++ b/apps/frontend/src/domains/event/ui/sections/landing/EventHighlightsSection.vue
@@ -31,31 +31,45 @@
       </p>
     </header>
 
-    <p
+    <PuLoadingState
       v-if="isLoading"
-      class="state-text"
+      class="state-view"
       :class="{ 'is-in-view': isInView }"
       :style="itemMotionStyle(1)"
+      compact
+      align="start"
+      :message="t('common.loading')"
+    />
+    <PuInlineNotice
+      v-else-if="isError"
+      class="fallback-state"
+      :class="{ 'is-in-view': isInView }"
+      :style="itemMotionStyle(1)"
+      tone="error"
+      :message="t('home.landing.highlightsLoadFailed')"
     >
-      {{ t("common.loading") }}
-    </p>
-    <div
-      v-else-if="isError || highlightEvents.length === 0"
+      <template #actions>
+        <RouterLink class="fallback-action" :to="{ name: 'event-plaza' }">
+          {{ t("home.landing.highlightsOpenPlaza") }}
+        </RouterLink>
+      </template>
+    </PuInlineNotice>
+    <PuEmptyState
+      v-else-if="highlightEvents.length === 0"
       class="fallback-state"
       :class="{ 'is-in-view': isInView }"
       :style="itemMotionStyle(1)"
+      compact
+      align="start"
+      variant="plain"
+      :description="t('home.landing.highlightsEmpty')"
     >
-      <p class="state-text" :class="{ 'state-text--error': isError }">
-        {{
-          isError
-            ? t("home.landing.highlightsLoadFailed")
-            : t("home.landing.highlightsEmpty")
-        }}
-      </p>
-      <RouterLink class="fallback-action" :to="{ name: 'event-plaza' }">
-        {{ t("home.landing.highlightsOpenPlaza") }}
-      </RouterLink>
-    </div>
+      <template #actions>
+        <RouterLink class="fallback-action" :to="{ name: 'event-plaza' }">
+          {{ t("home.landing.highlightsOpenPlaza") }}
+        </RouterLink>
+      </template>
+    </PuEmptyState>
 
     <AnchorEventHorizontalList
       v-else
@@ -79,7 +93,13 @@ import AnchorEventHorizontalList from "@/domains/event/ui/composites/AnchorEvent
 import { useInViewStagger } from "@/shared/motion/useInViewStagger";
 import { useAnchorEvents } from "@/domains/event/queries/useAnchorEvents";
 import { trackEvent } from "@/shared/telemetry/track";
-import { PuChip, PuChipGroup } from "@partner-up-dev/design-web";
+import {
+  PuChip,
+  PuChipGroup,
+  PuEmptyState,
+  PuInlineNotice,
+  PuLoadingState,
+} from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const { targetRef: sectionRef, isInView, itemMotionStyle } = useInViewStagger();
@@ -158,35 +178,18 @@ watchEffect(() => {
   align-items: center;
 }
 
-.state-text,
+.state-view,
 .fallback-state,
 .highlights-list {
   @include mx.pu-motion-enter(0.65rem);
 }
 
-.state-text,
+.state-view,
 .fallback-state {
   position: relative;
   z-index: 1;
 }
 
-.state-text {
-  @include mx.pu-font(body);
-  color: var(--sys-color-on-surface-variant);
-}
-
-.state-text--error {
-  color: var(--sys-color-error);
-}
-
-.fallback-state {
-  padding: var(--sys-spacing-small) 0;
-  display: flex;
-  flex-direction: column;
-  gap: var(--sys-spacing-small);
-  align-items: flex-start;
-}
-
 .fallback-action {
   font-size: 0.875rem;
   font-weight: 400;
diff --git a/apps/frontend/src/domains/event/ui/surfaces/AnchorEventCardModeSurface/AnchorEventCardModeSurface.scss b/apps/frontend/src/domains/event/ui/surfaces/AnchorEventCardModeSurface/AnchorEventCardModeSurface.scss
index 9dbc7d3f3..35f2381c0 100644
--- a/apps/frontend/src/domains/event/ui/surfaces/AnchorEventCardModeSurface/AnchorEventCardModeSurface.scss
+++ b/apps/frontend/src/domains/event/ui/surfaces/AnchorEventCardModeSurface/AnchorEventCardModeSurface.scss
@@ -9,6 +9,13 @@
   margin-right: calc(-1 * (var(--sys-spacing-medium) + var(--pu-safe-right)));
 }
 
+.card-state-link {
+  @include mx.pu-font(control);
+  width: fit-content;
+  color: var(--sys-color-primary);
+  text-decoration: none;
+}
+
 .card-stage {
   position: relative;
   display: grid;
diff --git a/apps/frontend/src/domains/event/ui/surfaces/AnchorEventCardModeSurface/AnchorEventCardModeSurface.vue b/apps/frontend/src/domains/event/ui/surfaces/AnchorEventCardModeSurface/AnchorEventCardModeSurface.vue
index b1f67aa7d..3e9d1f258 100644
--- a/apps/frontend/src/domains/event/ui/surfaces/AnchorEventCardModeSurface/AnchorEventCardModeSurface.vue
+++ b/apps/frontend/src/domains/event/ui/surfaces/AnchorEventCardModeSurface/AnchorEventCardModeSurface.vue
@@ -1,14 +1,17 @@
 <template>
-  <div v-if="isLoading" class="loading-state">
-    {{ t("common.loading") }}
-  </div>
+  <PuLoadingState v-if="isLoading" :message="t('common.loading')" />
 
-  <div v-else-if="isError" class="error-state">
-    {{ t("anchorEvent.loadFailed") }}
-    <router-link :to="{ name: 'event-plaza' }" class="back-link">
-      {{ t("anchorEvent.backToPlaza") }}
-    </router-link>
-  </div>
+  <PuInlineNotice
+    v-else-if="isError"
+    tone="error"
+    :message="t('anchorEvent.loadFailed')"
+  >
+    <template #actions>
+      <router-link :to="{ name: 'event-plaza' }" class="card-state-link">
+        {{ t("anchorEvent.backToPlaza") }}
+      </router-link>
+    </template>
+  </PuInlineNotice>
 
   <div
     v-else-if="resolvedActiveDemandCard"
@@ -280,7 +283,11 @@ import {
   type AnchorEventCardModeSurfaceProps,
   type FrontDemandCardHandle,
 } from "./AnchorEventCardModeSurface";
-import { PuButton } from "@partner-up-dev/design-web";
+import {
+  PuButton,
+  PuInlineNotice,
+  PuLoadingState,
+} from "@partner-up-dev/design-web";
 
 const props = withDefaults(
   defineProps<AnchorEventCardModeSurfaceProps>(),
diff --git a/apps/frontend/src/domains/event/ui/surfaces/AnchorEventListModeSurface.vue b/apps/frontend/src/domains/event/ui/surfaces/AnchorEventListModeSurface.vue
index 49597ca15..8e820d7f8 100644
--- a/apps/frontend/src/domains/event/ui/surfaces/AnchorEventListModeSurface.vue
+++ b/apps/frontend/src/domains/event/ui/surfaces/AnchorEventListModeSurface.vue
@@ -1,14 +1,17 @@
 <template>
-  <div v-if="isLoading" class="loading-state">
-    {{ t("common.loading") }}
-  </div>
+  <PuLoadingState v-if="isLoading" :message="t('common.loading')" />
 
-  <div v-else-if="isError" class="error-state">
-    {{ t("anchorEvent.loadFailed") }}
-    <router-link :to="{ name: 'event-plaza' }" class="back-link">
-      {{ t("anchorEvent.backToPlaza") }}
-    </router-link>
-  </div>
+  <PuInlineNotice
+    v-else-if="isError"
+    tone="error"
+    :message="t('anchorEvent.loadFailed')"
+  >
+    <template #actions>
+      <router-link :to="{ name: 'event-plaza' }" class="state-action-link">
+        {{ t("anchorEvent.backToPlaza") }}
+      </router-link>
+    </template>
+  </PuInlineNotice>
 
   <div
     v-else-if="detail"
@@ -56,34 +59,37 @@
             />
           </template>
         </div>
-        <p v-if="listDummyCreateErrorMessage" class="list-create-error">
-          {{ listDummyCreateErrorMessage }}
-        </p>
-        <article
+        <PuInlineNotice
+          v-if="listDummyCreateErrorMessage"
+          tone="error"
+          :message="listDummyCreateErrorMessage"
+        />
+        <PuEmptyState
           v-else-if="isListExhausted"
-          class="list-exhausted-card"
+          :title="t('anchorEvent.exhausted')"
+          :description="t('anchorEvent.subscribeHint')"
+          surface-level="section"
+          variant="outline"
           data-region="exhausted-card"
         >
-          <p class="list-exhausted-card__title">
-            {{ t("anchorEvent.exhausted") }}
-          </p>
-          <p class="list-exhausted-card__body">
-            {{ t("anchorEvent.subscribeHint") }}
-          </p>
-          <router-link
-            :to="{ name: 'event-plaza' }"
-            class="list-exhausted-card__link"
-          >
-            {{ t("anchorEvent.discoverOthers") }}
-          </router-link>
-        </article>
-        <div v-else class="empty-batch">
-          {{
+          <template #actions>
+            <router-link
+              :to="{ name: 'event-plaza' }"
+              class="state-action-link"
+            >
+              {{ t("anchorEvent.discoverOthers") }}
+            </router-link>
+          </template>
+        </PuEmptyState>
+        <PuEmptyState
+          v-else
+          compact
+          :description="
             hasBrowseTimeWindows
-              ? t("anchorEvent.noPRsInSelectedDate")
-              : t("anchorEvent.noBatches")
-          }}
-        </div>
+              ? t('anchorEvent.noPRsInSelectedDate')
+              : t('anchorEvent.noBatches')
+          "
+        />
       </div>
 
       <div class="batch-action-cards">
@@ -132,7 +138,12 @@
 import { computed, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import type { PRAllowEditAfterReady } from "@partner-up-dev/backend";
-import { PuTabs } from "@partner-up-dev/design-web";
+import {
+  PuEmptyState,
+  PuInlineNotice,
+  PuLoadingState,
+  PuTabs,
+} from "@partner-up-dev/design-web";
 import PRPreviewCard from "@/domains/pr/ui/primitives/PRPreviewCard.vue";
 import EventPRCreateCard from "@/domains/event/ui/primitives/EventPRCreateCard.vue";
 import EventDummyPRCard from "@/domains/event/ui/primitives/EventDummyPRCard.vue";
@@ -905,60 +916,9 @@ const handleOpenDummyDetailInList = async (item: VisibleDummyItem) => {
   padding-top: var(--sys-spacing-medium);
 }
 
-.empty-state,
-.empty-batch {
-  text-align: center;
-  padding: calc(var(--sys-spacing-large) + var(--sys-spacing-medium)) 0;
-  color: var(--sys-color-on-surface-variant);
-}
-
-.list-exhausted-card {
-  display: grid;
-  gap: var(--sys-spacing-xsmall);
-  padding: var(--sys-spacing-medium);
-  border: 1px solid var(--sys-color-outline-variant);
-  border-radius: var(--sys-radius-large);
-  background: var(--sys-color-surface-container);
-}
-
-.list-exhausted-card__title,
-.list-exhausted-card__body {
-  margin: 0;
-}
-
-.list-exhausted-card__title {
-  @include mx.pu-font(section);
-  color: var(--sys-color-on-surface);
-}
-
-.list-exhausted-card__body {
-  @include mx.pu-font(support);
-  color: var(--sys-color-on-surface-variant);
-}
-
-.list-exhausted-card__link {
+.state-action-link {
   @include mx.pu-font(control);
-  justify-self: start;
-  color: var(--sys-color-primary);
-  text-decoration: none;
-}
-
-.list-create-error {
-  margin: 0;
-  @include mx.pu-font(support);
-  color: var(--sys-color-error);
-}
-
-.loading-state,
-.error-state {
-  text-align: center;
-  padding: var(--sys-spacing-large) 0;
-  color: var(--sys-color-on-surface-variant);
-}
-
-.back-link {
-  display: block;
-  margin-top: var(--sys-spacing-small);
+  width: fit-content;
   color: var(--sys-color-primary);
   text-decoration: none;
 }
diff --git a/tasks/design-web-package-integration/deep-ui-refactor/20-slice-plan.md b/tasks/design-web-package-integration/deep-ui-refactor/20-slice-plan.md
index 88a117d87..092d490ef 100644
--- a/tasks/design-web-package-integration/deep-ui-refactor/20-slice-plan.md
+++ b/tasks/design-web-package-integration/deep-ui-refactor/20-slice-plan.md
@@ -136,7 +136,7 @@ Scope:
 
 ## Slice 6: Anchor Event Low-Risk States
 
-Status: candidate.
+Status: completed.
 
 Scope:
 
@@ -145,6 +145,15 @@ Scope:
 - Use `PuEmptyState`, `PuInlineNotice`, `PuLoadingState`, or `PuSkeleton`
   according to the state.
 
+Implementation notes:
+
+- Detailed scope and deferrals live in `60-slice6-anchor-event-states.md`.
+- Keep Card Mode empty-stack creation controls out of this slice; that path
+  carries form and assisted-create workflow behavior and belongs with the
+  high-risk interaction lane.
+- Migrated low-risk Anchor Event loading/error/empty states directly to
+  `PuLoadingState`, `PuInlineNotice`, and `PuEmptyState` at usage sites.
+
 ## Slice 7: Anchor Event High-Risk Interactions
 
 Status: deferred.
diff --git a/tasks/design-web-package-integration/deep-ui-refactor/60-slice6-anchor-event-states.md b/tasks/design-web-package-integration/deep-ui-refactor/60-slice6-anchor-event-states.md
new file mode 100644
index 000000000..e2bc80a59
--- /dev/null
+++ b/tasks/design-web-package-integration/deep-ui-refactor/60-slice6-anchor-event-states.md
@@ -0,0 +1,35 @@
+# Slice 6: Anchor Event Low-Risk States
+
+## Objective & Hypothesis
+
+Replace local loading, error, and no-data displays in low-risk Anchor Event
+surfaces with package-owned feedback components. This should reduce local CSS
+ownership without changing data fetching, routing, telemetry, or create flows.
+
+## Guardrails Touched
+
+- Frontend design-system consumer boundary: import public components from
+  `@partner-up-dev/design-web`.
+- Anchor Event user-facing surfaces:
+  - list mode top-level loading/error and batch empty/exhausted states
+  - card mode top-level loading/error state
+  - other-events section loading state
+  - landing highlights loading/error/empty state
+
+## Explicit Deferrals
+
+- Card Mode empty-stack create panel remains local in this slice because it
+  owns assisted-create form controls and route/process behavior.
+- Card swipe projection, splash handoff, long-press CTA, and matched handoff
+  remain in Slice 7 because package substitution would affect interaction
+  semantics.
+- Page-level Anchor Event Landing shell states are not migrated here; that page
+  needs a separate container/content split before swapping more state UI.
+
+## Verification
+
+- Passed: `pnpm --filter @partner-up-dev/frontend build`
+- Passed: `pnpm --filter @partner-up-dev/frontend lint:tokens`
+- Passed: `pnpm test:unit:frontend`
+- Passed: source scan for removed local state classes in touched files.
+- Passed: `git diff --check`

From 8382836fc6a6fc565abb96bc4e201723608bcad9 Mon Sep 17 00:00:00 2001
From: Lanzhijiang <lanzhijiang@foxmail.com>
Date: Sun, 14 Jun 2026 21:32:02 +0800
Subject: [PATCH 11/94] refactor(frontend): migrate display tags to design
 package

---
 .../ui/primitives/AnchorEventDemandCard.vue   |  52 +++----
 .../src/domains/pr/model/pr-status-tag.ts     |  33 ++++
 .../domains/pr/ui/composites/PRFactsCard.vue  |  24 ++-
 .../domains/pr/ui/composites/PRHeroHeader.vue |  34 ++++-
 .../ui/primitives/PRPreviewCard.route.test.ts |  25 +++-
 .../pr/ui/primitives/PRPreviewCardFrame.vue   |  23 ++-
 .../domains/pr/ui/primitives/PRRosterItem.vue |  57 ++++---
 .../pr/ui/primitives/PRStatusBadge.vue        | 102 -------------
 .../frontend/src/pages/AdminAnalyticsPage.vue |  45 ++----
 apps/frontend/src/pages/AdminPaymentPage.vue  |  39 +++--
 .../src/pages/AdminRideHailingPage.vue        |  39 +++--
 apps/frontend/src/pages/MePage.vue            |   4 +-
 apps/frontend/src/pages/PRPage.vue            |  44 ++++--
 .../deep-ui-refactor/20-slice-plan.md         |  27 ++++
 .../70-chip-tag-badge-audit.md                | 141 ++++++++++++++++++
 15 files changed, 415 insertions(+), 274 deletions(-)
 create mode 100644 apps/frontend/src/domains/pr/model/pr-status-tag.ts
 delete mode 100644 apps/frontend/src/domains/pr/ui/primitives/PRStatusBadge.vue
 create mode 100644 tasks/design-web-package-integration/deep-ui-refactor/70-chip-tag-badge-audit.md

diff --git a/apps/frontend/src/domains/event/ui/primitives/AnchorEventDemandCard.vue b/apps/frontend/src/domains/event/ui/primitives/AnchorEventDemandCard.vue
index 90ff67d0c..394e218e7 100644
--- a/apps/frontend/src/domains/event/ui/primitives/AnchorEventDemandCard.vue
+++ b/apps/frontend/src/domains/event/ui/primitives/AnchorEventDemandCard.vue
@@ -29,7 +29,14 @@
         mode="aspectFill"
         :show-loading="false"
       />
-      <span class="demand-card__location-badge">{{ displayLocationName }}</span>
+      <PuTag
+        class="demand-card__location-tag"
+        :text="displayLocationName"
+        tone="neutral"
+        variant="soft"
+        shape="pill"
+        size="sm"
+      />
     </div>
     <div v-else class="demand-card__cover demand-card__cover--fallback">
       <span class="demand-card__fallback-location">{{
@@ -40,18 +47,21 @@
     <div class="demand-card__body">
       <section class="demand-card__primary">
         <p class="demand-card__time">{{ timeLabel }}</p>
-        <div
+        <PuChipGroup
           v-if="preferenceTags.length > 0"
           class="demand-card__preference-list"
+          gap="sm"
         >
-          <span
+          <PuChip
             v-for="tag in preferenceTags"
             :key="tag"
-            class="demand-card__preference-chip"
+            tone="neutral"
+            variant="outline"
+            size="sm"
           >
             {{ tag }}
-          </span>
-        </div>
+          </PuChip>
+        </PuChipGroup>
         <p v-if="displayNotes" class="demand-card__notes">
           {{ displayNotes }}
         </p>
@@ -62,7 +72,7 @@
 
 <script setup lang="ts">
 import { computed, onUnmounted, ref, watch } from "vue";
-import { PuImg } from "@partner-up-dev/design-web";
+import { PuChip, PuChipGroup, PuImg, PuTag } from "@partner-up-dev/design-web";
 import {
   DEMAND_CARD_EXIT_TRANSITION,
   DEMAND_CARD_REBOUND_TRANSITION,
@@ -816,18 +826,9 @@ defineExpose({
   overflow-wrap: anywhere;
 }
 
-.demand-card__location-badge {
-  @include mx.pu-font(control);
+.demand-card__location-tag {
   position: relative;
   z-index: 1;
-  display: inline-flex;
-  align-items: center;
-  padding: var(--sys-spacing-xsmall) var(--sys-spacing-small);
-  border-radius: 999px;
-  background: var(--sys-color-surface-container-high);
-  color: var(--sys-color-on-surface);
-  border: 1px solid var(--sys-color-outline-variant);
-  backdrop-filter: blur(4px);
 }
 
 .demand-card__body {
@@ -851,23 +852,6 @@ defineExpose({
   color: var(--sys-color-on-surface);
 }
 
-.demand-card__preference-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--sys-spacing-small);
-}
-
-.demand-card__preference-chip {
-  @include mx.pu-font(control);
-  display: inline-flex;
-  align-items: center;
-  padding: var(--sys-spacing-xsmall) var(--sys-spacing-small);
-  border-radius: 999px;
-  border: 1px solid var(--sys-color-outline-variant);
-  background: var(--sys-color-surface-container-high);
-  color: var(--sys-color-on-surface);
-}
-
 .demand-card__notes {
   @include mx.pu-font(body);
   margin: 0;
diff --git a/apps/frontend/src/domains/pr/model/pr-status-tag.ts b/apps/frontend/src/domains/pr/model/pr-status-tag.ts
new file mode 100644
index 000000000..99cc6d7b9
--- /dev/null
+++ b/apps/frontend/src/domains/pr/model/pr-status-tag.ts
@@ -0,0 +1,33 @@
+import type { PRDisplayStatus } from "@/domains/pr/model/pr-display-status";
+
+type Translate = (key: string) => string;
+
+const PR_STATUS_TEXT_KEYS: Record<PRDisplayStatus, string> = {
+  DRAFT: "status.draft",
+  OPEN: "status.open",
+  READY: "status.ready",
+  FULL: "status.full",
+  ACTIVE: "status.active",
+  CLOSED: "status.closed",
+  EXPIRED: "status.expired",
+};
+
+const PR_STATUS_TAG_TONES = {
+  DRAFT: "neutral",
+  OPEN: "primary",
+  READY: "tertiary",
+  FULL: "error",
+  ACTIVE: "secondary",
+  CLOSED: "neutral",
+  EXPIRED: "neutral",
+} as const satisfies Record<PRDisplayStatus, string>;
+
+export const resolvePRStatusTagText = (
+  status: PRDisplayStatus,
+  t: Translate,
+): string => t(PR_STATUS_TEXT_KEYS[status]);
+
+export const resolvePRStatusTagTone = (
+  status: PRDisplayStatus,
+): (typeof PR_STATUS_TAG_TONES)[PRDisplayStatus] =>
+  PR_STATUS_TAG_TONES[status];
diff --git a/apps/frontend/src/domains/pr/ui/composites/PRFactsCard.vue b/apps/frontend/src/domains/pr/ui/composites/PRFactsCard.vue
index 564edac9b..65e1af0c8 100644
--- a/apps/frontend/src/domains/pr/ui/composites/PRFactsCard.vue
+++ b/apps/frontend/src/domains/pr/ui/composites/PRFactsCard.vue
@@ -237,7 +237,12 @@
                 </PuChip>
               </template>
 
-              <span v-if="hasMoreRoster" class="roster-chip-overflow">...</span>
+              <PuChip
+                v-if="hasMoreRoster"
+                tone="secondary"
+                variant="soft"
+                :label="rosterOverflowLabel"
+              />
             </PuChipGroup>
 
             <span v-else class="facts-empty">
@@ -452,9 +457,11 @@ const activeRoster = computed(
     ) ?? [],
 );
 const rosterPreview = computed(() => activeRoster.value.slice(0, 4));
-const hasMoreRoster = computed(
-  () => activeRoster.value.length > rosterPreview.value.length,
+const hiddenRosterCount = computed(() =>
+  Math.max(activeRoster.value.length - rosterPreview.value.length, 0),
 );
+const hasMoreRoster = computed(() => hiddenRosterCount.value > 0);
+const rosterOverflowLabel = computed(() => `+${hiddenRosterCount.value}`);
 
 const partnerProfilePath = (partnerId: number): string =>
   prPartnerProfilePath(props.prId, partnerId);
@@ -627,15 +634,4 @@ watch(
   }
 }
 
-.roster-chip-overflow {
-  @include mx.pu-font(control);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: var(--sys-spacing-large);
-  padding: var(--sys-spacing-xsmall) var(--sys-spacing-small);
-  border-radius: 999px;
-  background: var(--sys-color-secondary-container);
-  color: var(--sys-color-on-secondary-container);
-}
 </style>
diff --git a/apps/frontend/src/domains/pr/ui/composites/PRHeroHeader.vue b/apps/frontend/src/domains/pr/ui/composites/PRHeroHeader.vue
index 8620aa472..3a13b2557 100644
--- a/apps/frontend/src/domains/pr/ui/composites/PRHeroHeader.vue
+++ b/apps/frontend/src/domains/pr/ui/composites/PRHeroHeader.vue
@@ -6,19 +6,31 @@
     @back="emit('back')"
   >
     <template #meta>
-      <PRStatusBadge :status="status" />
-      <time class="created-at">{{ createdAtLabel }}</time>
+      <div class="pr-hero-header__meta">
+        <PuTag
+          :text="statusTagText"
+          :tone="statusTagTone"
+          variant="soft"
+          shape="pill"
+          size="md"
+        />
+        <time class="created-at">{{ createdAtLabel }}</time>
+      </div>
     </template>
   </PuPageHeader>
 </template>
 
 <script setup lang="ts">
+import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 import type { PRStatus } from "@partner-up-dev/backend";
-import PRStatusBadge from "@/domains/pr/ui/primitives/PRStatusBadge.vue";
-import { PuPageHeader } from "@partner-up-dev/design-web";
+import { PuPageHeader, PuTag } from "@partner-up-dev/design-web";
+import {
+  resolvePRStatusTagText,
+  resolvePRStatusTagTone,
+} from "@/domains/pr/model/pr-status-tag";
 
-defineProps<{
+const props = defineProps<{
   title?: string;
   status: PRStatus;
   createdAtLabel: string;
@@ -29,9 +41,21 @@ const emit = defineEmits<{
 }>();
 
 const { t } = useI18n();
+const statusTagText = computed(() => resolvePRStatusTagText(props.status, t));
+const statusTagTone = computed(() => resolvePRStatusTagTone(props.status));
 </script>
 
 <style lang="scss" scoped>
+.pr-hero-header__meta {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sys-spacing-small);
+  width: 100%;
+  min-width: 0;
+}
+
 .created-at {
   @include mx.pu-font(control);
   color: var(--sys-color-on-surface-variant);
diff --git a/apps/frontend/src/domains/pr/ui/primitives/PRPreviewCard.route.test.ts b/apps/frontend/src/domains/pr/ui/primitives/PRPreviewCard.route.test.ts
index 8243cc998..ab511c74c 100644
--- a/apps/frontend/src/domains/pr/ui/primitives/PRPreviewCard.route.test.ts
+++ b/apps/frontend/src/domains/pr/ui/primitives/PRPreviewCard.route.test.ts
@@ -18,6 +18,23 @@ vi.mock("vue-router", () => ({
   },
 }));
 
+vi.mock("vue-i18n", () => ({
+  useI18n: () => ({
+    t: (key: string) => {
+      const statusText: Record<string, string> = {
+        "status.draft": "DRAFT",
+        "status.open": "OPEN",
+        "status.ready": "READY",
+        "status.full": "FULL",
+        "status.active": "ACTIVE",
+        "status.closed": "CLOSED",
+        "status.expired": "EXPIRED",
+      };
+      return statusText[key] ?? key;
+    },
+  }),
+}));
+
 vi.mock("@/domains/pr/queries/usePRDetail", async () => {
   const { computed } = await vi.importActual<typeof import("vue")>("vue");
 
@@ -28,14 +45,6 @@ vi.mock("@/domains/pr/queries/usePRDetail", async () => {
   };
 });
 
-vi.mock("@/domains/pr/ui/primitives/PRStatusBadge.vue", () => ({
-  default: {
-    name: "PRStatusBadge",
-    props: ["status"],
-    template: '<span data-testid="pr-status">{{ status }}</span>',
-  },
-}));
-
 const mountedApps: Array<{
   app: App<Element>;
   host: HTMLElement;
diff --git a/apps/frontend/src/domains/pr/ui/primitives/PRPreviewCardFrame.vue b/apps/frontend/src/domains/pr/ui/primitives/PRPreviewCardFrame.vue
index 30882e05a..bdcf81a3c 100644
--- a/apps/frontend/src/domains/pr/ui/primitives/PRPreviewCardFrame.vue
+++ b/apps/frontend/src/domains/pr/ui/primitives/PRPreviewCardFrame.vue
@@ -23,12 +23,14 @@
               {{ title }}
             </span>
           </div>
-          <PRStatusBadge
+          <PuTag
             v-if="status"
             class="pr-preview-card__status"
-            :status="status"
+            :text="statusTagText"
+            :tone="statusTagTone"
+            variant="soft"
             size="sm"
-            appearance="pill"
+            shape="pill"
           />
         </div>
 
@@ -58,9 +60,13 @@
 <script setup lang="ts">
 import { computed, useSlots } from "vue";
 import { RouterLink } from "vue-router";
-import { PuImg } from "@partner-up-dev/design-web";
+import { useI18n } from "vue-i18n";
+import { PuImg, PuTag } from "@partner-up-dev/design-web";
 import type { PRDisplayStatus } from "@/domains/pr/model/pr-display-status";
-import PRStatusBadge from "@/domains/pr/ui/primitives/PRStatusBadge.vue";
+import {
+  resolvePRStatusTagText,
+  resolvePRStatusTagTone,
+} from "@/domains/pr/model/pr-status-tag";
 
 const props = withDefaults(
   defineProps<{
@@ -93,6 +99,7 @@ const emit = defineEmits<{
   activate: [];
 }>();
 
+const { t } = useI18n();
 const slots = useSlots();
 const hasActions = computed(() => Boolean(slots.actions));
 const rootComponent = computed(() => (props.mode === "link" ? RouterLink : "button"));
@@ -123,6 +130,12 @@ const preferenceLabel = computed(
       .map(toPreferenceDisplayLabel)
       .find((tag): tag is string => tag !== null) ?? null,
 );
+const statusTagText = computed(() =>
+  props.status ? resolvePRStatusTagText(props.status, t) : "",
+);
+const statusTagTone = computed(() =>
+  props.status ? resolvePRStatusTagTone(props.status) : "neutral",
+);
 </script>
 
 <style lang="scss" scoped>
diff --git a/apps/frontend/src/domains/pr/ui/primitives/PRRosterItem.vue b/apps/frontend/src/domains/pr/ui/primitives/PRRosterItem.vue
index 3394e0d60..25b77c59b 100644
--- a/apps/frontend/src/domains/pr/ui/primitives/PRRosterItem.vue
+++ b/apps/frontend/src/domains/pr/ui/primitives/PRRosterItem.vue
@@ -27,28 +27,46 @@
       </div>
 
       <div v-if="hasTags" class="pr-roster-item__tags">
-        <span
+        <PuTag
           v-if="props.isSelf && props.selfLabel"
           class="pr-roster-item__tag"
-        >
-          {{ props.selfLabel }}
-        </span>
-        <span
+          :text="props.selfLabel"
+          :variant="tagVariant"
+          tone="secondary"
+          shape="pill"
+          size="xs"
+        />
+        <PuTag
           v-if="props.isCreator && props.creatorLabel"
           class="pr-roster-item__tag"
-        >
-          {{ props.creatorLabel }}
-        </span>
+          :text="props.creatorLabel"
+          :variant="tagVariant"
+          tone="secondary"
+          shape="pill"
+          size="xs"
+        />
       </div>
     </div>
 
-    <span class="pr-roster-item__state">{{ props.stateLabel }}</span>
+    <PuTag
+      v-if="props.variant === 'card'"
+      class="pr-roster-item__state-tag"
+      :text="props.stateLabel"
+      tone="secondary"
+      variant="soft"
+      shape="pill"
+      size="xs"
+    />
+    <span v-else class="pr-roster-item__state-text">{{
+      props.stateLabel
+    }}</span>
   </component>
 </template>
 
 <script setup lang="ts">
 import { computed } from "vue";
 import { RouterLink, type RouteLocationRaw } from "vue-router";
+import { PuTag } from "@partner-up-dev/design-web";
 
 const props = withDefaults(
   defineProps<{
@@ -83,6 +101,7 @@ const hasTags = computed(
     (props.isSelf && props.selfLabel.length > 0) ||
     (props.isCreator && props.creatorLabel.length > 0),
 );
+const tagVariant = computed(() => (props.variant === "card" ? "soft" : "plain"));
 </script>
 
 <style lang="scss" scoped>
@@ -181,25 +200,19 @@ const hasTags = computed(
   gap: var(--sys-spacing-xsmall);
 }
 
-.pr-roster-item__tag,
-.pr-roster-item__state {
+.pr-roster-item__state-text {
   @include mx.pu-font(caption);
-  color: var(--sys-color-on-surface-variant);
-}
-
-.pr-roster-item--plain .pr-roster-item__state {
   align-self: center;
+  color: var(--sys-color-on-surface-variant);
 }
 
-.pr-roster-item--card .pr-roster-item__tag,
-.pr-roster-item--card .pr-roster-item__state {
-  padding: calc(var(--sys-spacing-xsmall) / 2) var(--sys-spacing-small);
-  border-radius: 999px;
-  background: var(--sys-color-secondary-container);
-  color: var(--sys-color-on-secondary-container);
+.pr-roster-item__tag,
+.pr-roster-item__state-tag,
+.pr-roster-item__state-text {
+  flex-shrink: 0;
 }
 
-.pr-roster-item--card .pr-roster-item__state {
+.pr-roster-item__state-tag {
   align-self: center;
   margin-left: auto;
 }
diff --git a/apps/frontend/src/domains/pr/ui/primitives/PRStatusBadge.vue b/apps/frontend/src/domains/pr/ui/primitives/PRStatusBadge.vue
deleted file mode 100644
index 811fc9442..000000000
--- a/apps/frontend/src/domains/pr/ui/primitives/PRStatusBadge.vue
+++ /dev/null
@@ -1,102 +0,0 @@
-<template>
-  <span
-    class="status-badge"
-    :class="[
-      status.toLowerCase(),
-      `status-badge--size-${props.size}`,
-      `status-badge--appearance-${props.appearance}`,
-    ]"
-  >
-    {{ statusText }}
-  </span>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import { useI18n } from "vue-i18n";
-import type { PRDisplayStatus } from "@/domains/pr/model/pr-display-status";
-
-const props = withDefaults(
-  defineProps<{
-    status: PRDisplayStatus;
-    size?: "sm" | "md";
-    appearance?: "rounded" | "pill";
-  }>(),
-  {
-    size: "md",
-    appearance: "rounded",
-  },
-);
-const { t } = useI18n();
-
-const statusText = computed(() => {
-  const map = {
-    DRAFT: t("status.draft"),
-    OPEN: t("status.open"),
-    READY: t("status.ready"),
-    FULL: t("status.full"),
-    ACTIVE: t("status.active"),
-    CLOSED: t("status.closed"),
-    EXPIRED: t("status.expired"),
-  };
-  return map[props.status];
-});
-</script>
-
-<style lang="scss" scoped>
-.status-badge {
-  display: inline-flex;
-  align-items: center;
-  width: fit-content;
-  flex-shrink: 0;
-
-  &--size-md {
-    @include mx.pu-font(control);
-    padding: var(--sys-spacing-xsmall) var(--sys-spacing-small);
-  }
-
-  &--size-sm {
-    @include mx.pu-font(control);
-    padding: calc(var(--sys-spacing-xsmall) / 2) var(--sys-spacing-small);
-  }
-
-  &--appearance-rounded {
-    border-radius: var(--sys-radius-small);
-  }
-
-  &--appearance-pill {
-    border-radius: 999px;
-  }
-
-  &.draft {
-    background: var(--sys-color-surface-container-highest);
-    color: var(--sys-color-on-surface);
-  }
-
-  &.open {
-    background: var(--sys-color-primary-container);
-    color: var(--sys-color-on-primary-container);
-  }
-
-  &.ready {
-    background: var(--sys-color-tertiary-container);
-    color: var(--sys-color-on-tertiary-container);
-  }
-
-  &.full {
-    background: var(--sys-color-error-container);
-    color: var(--sys-color-on-error-container);
-  }
-
-  &.active {
-    background: var(--sys-color-secondary-container);
-    color: var(--sys-color-on-secondary-container);
-  }
-
-  &.closed,
-  &.expired {
-    background: var(--sys-color-surface-container);
-    color: var(--sys-color-on-surface-variant);
-  }
-}
-</style>
diff --git a/apps/frontend/src/pages/AdminAnalyticsPage.vue b/apps/frontend/src/pages/AdminAnalyticsPage.vue
index b7f5484c0..f6c3c98eb 100644
--- a/apps/frontend/src/pages/AdminAnalyticsPage.vue
+++ b/apps/frontend/src/pages/AdminAnalyticsPage.vue
@@ -723,9 +723,13 @@
                       <td>{{ formatMode(row.renderedMode) }}</td>
                       <td>{{ formatCommitmentType(row.commitmentType) }}</td>
                       <td>
-                        <span class="status-pill" :class="`status-pill--${row.actionResult}`">
-                          {{ formatActionResult(row.actionResult) }}
-                        </span>
+                        <PuTag
+                          :text="formatActionResult(row.actionResult)"
+                          :tone="actionResultTagTone(row.actionResult)"
+                          variant="soft"
+                          shape="pill"
+                          size="xs"
+                        />
                       </td>
                       <td>{{ formatCount(row.journeyCount) }}</td>
                       <td>{{ formatCount(row.eventCount) }}</td>
@@ -849,6 +853,7 @@ import {
   PuInlineNotice,
   PuInput,
   PuLoadingState,
+  PuTag,
 } from "@partner-up-dev/design-web";
 
 type ModeComparisonRow = AdminAnalyticsFunnelResponse["modes"][number];
@@ -1030,6 +1035,14 @@ const formatCommitmentType = (
 ): string => t(`adminAnalytics.commitmentType.${type}`);
 const formatActionResult = (result: OutcomeBreakdownRow["actionResult"]): string =>
   t(`adminAnalytics.actionResult.${result}`);
+const actionResultTagTone = (
+  result: OutcomeBreakdownRow["actionResult"],
+) => {
+  if (result === "success") return "success";
+  if (result === "blocked") return "warning";
+  if (result === "failure") return "error";
+  return "neutral";
+};
 const formatNudgeSource = (
   source: OfficialAccountFollowNudgeSourceRow["source"],
 ): string => t(`adminAnalytics.officialAccountNudgeSource.${source}`);
@@ -1700,32 +1713,6 @@ const formatFailureKey = (row: FailureBreakdownRow): string =>
   gap: var(--sys-spacing-medium);
 }
 
-.status-pill {
-  @include mx.pu-font(caption);
-  display: inline-flex;
-  align-items: center;
-  min-height: 24px;
-  padding: 0 var(--sys-spacing-small);
-  border-radius: 999px;
-  background: var(--sys-color-surface-container);
-  color: var(--sys-color-on-surface);
-}
-
-.status-pill--success {
-  background: var(--sys-color-primary-container);
-  color: var(--sys-color-on-primary-container);
-}
-
-.status-pill--blocked {
-  background: var(--sys-color-warning);
-  color: var(--sys-color-on-warning);
-}
-
-.status-pill--failure {
-  background: var(--sys-color-error-container);
-  color: var(--sys-color-on-error-container);
-}
-
 @media (max-width: 1180px) {
   .kpi-strip,
   .funnel-grid,
diff --git a/apps/frontend/src/pages/AdminPaymentPage.vue b/apps/frontend/src/pages/AdminPaymentPage.vue
index d93567b57..12e7b6710 100644
--- a/apps/frontend/src/pages/AdminPaymentPage.vue
+++ b/apps/frontend/src/pages/AdminPaymentPage.vue
@@ -35,12 +35,13 @@
           >
             <span>{{ record.displayName }}</span>
             <small>{{ record.providerType }} / {{ record.clientId }}</small>
-            <span
-              class="status-pill"
-              :class="{ 'is-disabled': record.status === 'DISABLED' }"
-            >
-              {{ providerStatusLabel(record.status) }}
-            </span>
+            <PuTag
+              :text="providerStatusLabel(record.status)"
+              :tone="providerStatusTagTone(record.status)"
+              variant="outline"
+              shape="rect"
+              size="xs"
+            />
           </PuCard>
         </div>
       </AdminRailPanel>
@@ -286,7 +287,13 @@ import {
   type AdminPaymentProviderInstanceInput,
   type AdminPaymentProviderWorkspaceResponse,
 } from "@/domains/admin-payment/queries/useAdminPayment";
-import { PuButton, PuCard, PuInlineNotice, PuLoadingState } from "@partner-up-dev/design-web";
+import {
+  PuButton,
+  PuCard,
+  PuInlineNotice,
+  PuLoadingState,
+  PuTag,
+} from "@partner-up-dev/design-web";
 
 const CREATE_PROVIDER_ID = "__create__";
 
@@ -425,6 +432,9 @@ function formFromProvider(provider: ProviderInstance): ProviderForm {
 const providerStatusLabel = (status: ProviderInstance["status"]): string =>
   status === "ACTIVE" ? "启用" : "停用";
 
+const providerStatusTagTone = (status: ProviderInstance["status"]) =>
+  status === "ACTIVE" ? "primary" : "neutral";
+
 const normalizeOptionalString = (value: string): string | null => {
   const normalized = value.trim();
   return normalized.length > 0 ? normalized : null;
@@ -586,21 +596,6 @@ small,
   overflow-wrap: anywhere;
 }
 
-.status-pill {
-  @include mx.pu-font(caption);
-  display: inline-flex;
-  width: fit-content;
-  padding: calc(var(--sys-spacing-xsmall) / 2) var(--sys-spacing-xsmall);
-  border: 1px solid var(--sys-color-primary);
-  border-radius: var(--sys-radius-small);
-  color: var(--sys-color-primary);
-}
-
-.status-pill.is-disabled {
-  border-color: var(--sys-color-outline);
-  color: var(--sys-color-on-surface-variant);
-}
-
 .text-input,
 .text-area,
 .read-only-output {
diff --git a/apps/frontend/src/pages/AdminRideHailingPage.vue b/apps/frontend/src/pages/AdminRideHailingPage.vue
index 6059e8c44..79d0ee154 100644
--- a/apps/frontend/src/pages/AdminRideHailingPage.vue
+++ b/apps/frontend/src/pages/AdminRideHailingPage.vue
@@ -35,12 +35,13 @@
           >
             <span>{{ record.displayName }}</span>
             <small>{{ record.providerType }} / {{ record.instanceKey }}</small>
-            <span
-              class="status-pill"
-              :class="{ 'is-disabled': record.status === 'DISABLED' }"
-            >
-              {{ providerStatusLabel(record.status) }}
-            </span>
+            <PuTag
+              :text="providerStatusLabel(record.status)"
+              :tone="providerStatusTagTone(record.status)"
+              variant="outline"
+              shape="rect"
+              size="xs"
+            />
           </PuCard>
         </div>
       </AdminRailPanel>
@@ -221,7 +222,13 @@ import {
   type AdminRideHailingProviderInstanceInput,
   type AdminRideHailingProviderWorkspaceResponse,
 } from "@/domains/admin-ride-hailing/queries/useAdminRideHailing";
-import { PuButton, PuCard, PuInlineNotice, PuLoadingState } from "@partner-up-dev/design-web";
+import {
+  PuButton,
+  PuCard,
+  PuInlineNotice,
+  PuLoadingState,
+  PuTag,
+} from "@partner-up-dev/design-web";
 
 const CREATE_PROVIDER_ID = "__create__";
 
@@ -324,6 +331,9 @@ function formFromProvider(provider: ProviderInstance): ProviderForm {
 const providerStatusLabel = (status: ProviderInstance["status"]): string =>
   status === "ACTIVE" ? "启用" : "停用";
 
+const providerStatusTagTone = (status: ProviderInstance["status"]) =>
+  status === "ACTIVE" ? "primary" : "neutral";
+
 const normalizeOptionalString = (value: string): string | null => {
   const normalized = value.trim();
   return normalized.length > 0 ? normalized : null;
@@ -479,21 +489,6 @@ small,
   overflow-wrap: anywhere;
 }
 
-.status-pill {
-  @include mx.pu-font(caption);
-  display: inline-flex;
-  width: fit-content;
-  padding: calc(var(--sys-spacing-xsmall) / 2) var(--sys-spacing-xsmall);
-  border: 1px solid var(--sys-color-primary);
-  border-radius: var(--sys-radius-small);
-  color: var(--sys-color-primary);
-}
-
-.status-pill.is-disabled {
-  border-color: var(--sys-color-outline);
-  color: var(--sys-color-on-surface-variant);
-}
-
 .text-input {
   width: 100%;
   min-width: 0;
diff --git a/apps/frontend/src/pages/MePage.vue b/apps/frontend/src/pages/MePage.vue
index 06c6f251f..fa879f599 100644
--- a/apps/frontend/src/pages/MePage.vue
+++ b/apps/frontend/src/pages/MePage.vue
@@ -160,7 +160,7 @@
 
               <PuTag
                 v-if="wechatBound"
-                class="status-pill"
+                class="wechat-bound-tag"
                 tone="primary"
                 size="md"
                 :text="t('mePage.profile.wechatBound')"
@@ -583,7 +583,7 @@ const handleCopyCredential = async (value: string | null) => {
   }
 }
 
-.status-pill {
+.wechat-bound-tag {
   flex-shrink: 0;
 }
 
diff --git a/apps/frontend/src/pages/PRPage.vue b/apps/frontend/src/pages/PRPage.vue
index c39bdfd4d..2a6fc5b83 100644
--- a/apps/frontend/src/pages/PRPage.vue
+++ b/apps/frontend/src/pages/PRPage.vue
@@ -37,8 +37,22 @@
         </template>
 
         <template #meta>
-          <span class="type-badge">{{ prDetail.core.type || "-" }}</span>
-          <PRStatusBadge :status="prDisplayStatus" />
+          <div class="pr-header-meta">
+            <PuTag
+              :text="prDetail.core.type || '-'"
+              tone="secondary"
+              variant="soft"
+              shape="pill"
+              size="md"
+            />
+            <PuTag
+              :text="prStatusTagText"
+              :tone="prStatusTagTone"
+              variant="soft"
+              shape="pill"
+              size="md"
+            />
+          </div>
         </template>
       </PuPageHeader>
 
@@ -180,7 +194,6 @@ import { useRoute, useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
 import type { PRStatusManual } from "@partner-up-dev/backend";
 import PageFooter from "@/shared/ui/sections/PageFooter.vue";
-import PRStatusBadge from "@/domains/pr/ui/primitives/PRStatusBadge.vue";
 import PRFactsCard from "@/domains/pr/ui/composites/PRFactsCard.vue";
 import PRBetaGroupAction from "@/domains/pr/ui/sections/PRBetaGroupAction.vue";
 import PRCheckInFeedbackActions from "@/domains/pr/ui/sections/PRCheckInFeedbackActions.vue";
@@ -200,6 +213,10 @@ import PREditor from "@/domains/pr/ui/forms/PREditor.vue";
 import UpdatePRStatusForm from "@/domains/pr/ui/forms/UpdatePRStatusForm.vue";
 import { usePRDetail } from "@/domains/pr/queries/usePRDetail";
 import { resolvePRDisplayStatus } from "@/domains/pr/model/pr-display-status";
+import {
+  resolvePRStatusTagText,
+  resolvePRStatusTagTone,
+} from "@/domains/pr/model/pr-status-tag";
 import { usePRDetailHead } from "@/domains/pr/use-cases/usePRDetailHead";
 import { usePRRouteShareDescriptor } from "@/domains/pr/use-cases/usePRRouteShareDescriptor";
 import { usePRShareContext } from "@/domains/pr/use-cases/usePRShareContext";
@@ -227,6 +244,7 @@ import {
   PuModal,
   PuPageHeader,
   PuPageScaffold,
+  PuTag,
 } from "@partner-up-dev/design-web";
 
 type CreatorSecondaryActionType =
@@ -265,6 +283,12 @@ const prDisplayStatus = computed(() => {
   if (!detail) return "OPEN";
   return resolvePRDisplayStatus(detail.status, detail.partnerSection.capacity);
 });
+const prStatusTagText = computed(() =>
+  resolvePRStatusTagText(prDisplayStatus.value, t),
+);
+const prStatusTagTone = computed(() =>
+  resolvePRStatusTagTone(prDisplayStatus.value),
+);
 const updateStatusInitialStatus = computed<PRStatusManual>(() => {
   const status = prDetail.value?.status;
   if (status === "READY" || status === "ACTIVE" || status === "CLOSED") {
@@ -556,12 +580,14 @@ usePRPendingWeChatReplay({
   margin-top: var(--sys-spacing-large);
 }
 
-.type-badge {
-  @include mx.pu-font(control);
-  padding: var(--sys-spacing-xsmall) var(--sys-spacing-small);
-  border-radius: 999px;
-  background: var(--sys-color-secondary-container);
-  color: var(--sys-color-on-secondary-container);
+.pr-header-meta {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sys-spacing-small);
+  width: 100%;
+  min-width: 0;
 }
 
 .facts-card {
diff --git a/tasks/design-web-package-integration/deep-ui-refactor/20-slice-plan.md b/tasks/design-web-package-integration/deep-ui-refactor/20-slice-plan.md
index 092d490ef..18c840aa4 100644
--- a/tasks/design-web-package-integration/deep-ui-refactor/20-slice-plan.md
+++ b/tasks/design-web-package-integration/deep-ui-refactor/20-slice-plan.md
@@ -170,3 +170,30 @@ Required before implementation:
   state.
 - Confirm any package substitution that changes gesture or transition
   semantics.
+
+## Slice 8: Chip And Tag Display Cleanup
+
+Status: completed.
+
+Scope:
+
+- Replace local badge, pill, and static status/category label markup with
+  direct `PuTag` usage.
+- Replace token-display chip lists with direct `PuChip`/`PuChipGroup` usage.
+- Start with PR detail/header status metadata and delete `PRStatusBadge` once
+  its usage sites are cleared.
+
+Planning notes:
+
+- Detailed badge audit lives in `70-chip-tag-badge-audit.md`.
+- Keep selectable/removable tag editors out of a passive display cleanup slice
+  unless the interaction contract is explicitly reviewed.
+- Current execution explicitly excludes `FormModePreferenceControl` `tag-pill`
+  and `PREditor` / `PRForm.scss` tag editor controls.
+
+Implementation notes:
+
+- Migrated PR status/type display, admin provider status, analytics outcome
+  status, PR roster display labels, Anchor Event demand-card labels, and PR
+  facts roster overflow marker to direct `PuTag`, `PuChip`, or `PuChipGroup`.
+- Deleted the local `PRStatusBadge` wrapper.
diff --git a/tasks/design-web-package-integration/deep-ui-refactor/70-chip-tag-badge-audit.md b/tasks/design-web-package-integration/deep-ui-refactor/70-chip-tag-badge-audit.md
new file mode 100644
index 000000000..74e25fd33
--- /dev/null
+++ b/tasks/design-web-package-integration/deep-ui-refactor/70-chip-tag-badge-audit.md
@@ -0,0 +1,141 @@
+# Chip, Tag, And Badge Audit
+
+## Objective & Hypothesis
+
+Identify local badge, pill, chip, and tag markup that can be replaced by
+`PuTag`, `PuChip`, or `PuChipGroup`. Static status and category labels should
+move to `PuTag`; token lists, selectable/removable values, and metadata groups
+should move to `PuChip`/`PuChipGroup`.
+
+## Component Selection Rule
+
+- Use `PuTag` for compact non-interactive status/category labels.
+- Use `PuChip` for token-like labels, selected/removable values, and compact
+  metadata chips.
+- Use `PuChipGroup` for grouped chips and for fit/overflow behavior where
+  complete chips should be measured as a group.
+
+## High-Confidence Candidates
+
+1. `apps/frontend/src/pages/PRPage.vue`
+   - `type-badge` in the `PuPageHeader` meta slot should become `PuTag`.
+   - `PRStatusBadge` in the same meta slot should become a direct `PuTag`.
+   - The `meta` slot should own explicit row composition for spacing:
+     `display: flex; flex-direction: row; justify-content: space-between;`
+     with a chip/tag group for type and status.
+
+2. `apps/frontend/src/domains/pr/ui/primitives/PRStatusBadge.vue`
+   - Local wrapper should be deleted after call sites migrate.
+   - Status text resolution can move into a small PR-domain helper or direct
+     computed mapping at each remaining usage site.
+
+3. `apps/frontend/src/domains/pr/ui/primitives/PRPreviewCardFrame.vue`
+   - Replace `PRStatusBadge size="sm" appearance="pill"` with direct
+     `PuTag size="sm" shape="pill"`.
+
+4. `apps/frontend/src/domains/pr/ui/composites/PRHeroHeader.vue`
+   - Replace `PRStatusBadge` with direct `PuTag`.
+
+5. `apps/frontend/src/pages/AdminPaymentPage.vue` and
+   `apps/frontend/src/pages/AdminRideHailingPage.vue`
+   - Provider instance `status-pill` spans should become `PuTag`.
+   - `ACTIVE` can use `tone="primary" variant="outline"` or `soft`;
+     `DISABLED` should use `tone="neutral" variant="outline"` or `soft`.
+
+6. `apps/frontend/src/pages/AdminAnalyticsPage.vue`
+   - Outcome `status-pill--success|blocked|failure` should become `PuTag`
+     with `success`, `warning`, and `error` tones.
+
+7. `apps/frontend/src/domains/pr/ui/primitives/PRRosterItem.vue`
+   - `pr-roster-item__tag` and card-variant `pr-roster-item__state` should
+     become `PuTag`.
+   - Plain variant state text may stay text if the desired treatment is not a
+     visual label; otherwise use `PuTag variant="plain"` or `soft`.
+
+8. `apps/frontend/src/domains/event/ui/primitives/AnchorEventDemandCard.vue`
+   - `demand-card__location-badge` should become `PuTag`.
+   - `demand-card__preference-chip` list should become `PuChipGroup` +
+     `PuChip`.
+
+9. `apps/frontend/src/domains/pr/ui/composites/PRFactsCard.vue`
+   - `roster-chip-overflow` should stop hand-rolling chip styling. Use
+     `PuChip` for the overflow marker or evaluate `PuChipGroup fit`.
+
+## Conditional Candidates
+
+- `apps/frontend/src/pages/StudySprintPomodoroPage.vue`
+  - `participant-tile__status` is a state label and can use `PuTag`, but it is
+    visually integrated into a game-like participant tile. Treat as a small
+    product-visual change, not a mechanical sweep.
+
+- Commerce status text:
+  - `PaymentCheckoutPage.vue`
+  - `CommerceOrderDetailPage.vue`
+  - `CommerceBillDetailPage.vue`
+  These are not currently badge components, but payment, fulfillment,
+  settlement, and line status text would be clearer as `PuTag` if this slice is
+  widened from local badge cleanup to general status-label cleanup.
+
+## Not A Simple Badge Sweep
+
+- `apps/frontend/src/domains/event/ui/controls/form-mode/FormModePreferenceControl.vue`
+  - `tag-pill` owns selection, custom tag creation, removal, draft input, and
+    drawer state. It should migrate in a dedicated interaction slice using
+    `PuChip` removable/selected behavior only after checking whether inline
+    draft input still needs custom composition.
+
+- `apps/frontend/src/domains/pr/ui/forms/PREditor.vue` and
+  `apps/frontend/src/domains/pr/ui/forms/PRForm.scss`
+  - `tags-input` and `.tag` are editable preference input behavior. Migrate
+    alongside the PR editor form cleanup, not as a passive display badge swap.
+
+## Slice 8 Execution
+
+Status: completed.
+
+Included:
+
+- PR status/type display in `PRPage`, `PRHeroHeader`, and `PRPreviewCardFrame`.
+- Deletion of the local `PRStatusBadge` wrapper after usage sites are cleared.
+- Admin provider and analytics outcome status pills.
+- PR roster display tags and card-variant state label.
+- Anchor Event demand card location and preference display labels.
+- PR facts roster overflow marker.
+
+Explicitly excluded:
+
+- `FormModePreferenceControl.vue` `tag-pill`.
+- `PREditor.vue` / `PRForm.scss` tag editor controls.
+- `StudySprintPomodoroPage.vue` participant tile status.
+- Commerce status text surfaces.
+
+Verification:
+
+- Passed `pnpm --filter @partner-up-dev/frontend build`.
+- Passed `pnpm --filter @partner-up-dev/frontend lint:tokens`.
+- Passed `pnpm test:unit:frontend`.
+- Passed targeted source scan for `PRStatusBadge`, `type-badge`,
+  `status-pill`, `demand-card__location-badge`,
+  `demand-card__preference-chip`, and `roster-chip-overflow` in production
+  source, excluding the explicitly deferred tag-editor surfaces.
+- Passed `git diff --check`.
+
+Implementation notes:
+
+- Added `domains/pr/model/pr-status-tag.ts` for PR status text-key and tag-tone
+  resolution.
+- Deleted `domains/pr/ui/primitives/PRStatusBadge.vue`.
+- Kept package components direct at usage sites; no new local compatibility
+  wrappers were introduced.
+- Renamed `MePage`'s already-package-backed `status-pill` class to
+  `wechat-bound-tag` to keep future local-pill scans cleaner.
+
+## Already Covered Or Acceptable
+
+- `RouteApplicationPage.vue`, `LocationApplicationPage.vue`,
+  `PoiReviewSection.vue`, and
+  `AnchorEventRouteApplicationsSection.vue` already use `PuTag` for status.
+- `EventCard.vue`, `EventHighlightsSection.vue`, and `PRFactsCard.vue`
+  already use `PuChip`/`PuChipGroup` for several token-display surfaces.
+- `EventCard.vue` still has location-pill class names, but those are on
+  direct `PuChip` usage rather than local chip markup.

From 361f703ca8882639530fa1370348066ffc034292 Mon Sep 17 00:00:00 2001
From: Lanzhijiang <lanzhijiang@foxmail.com>
Date: Mon, 15 Jun 2026 21:32:40 +0800
Subject: [PATCH 12/94] refactor(frontend): deepen design-web form composition

Upgrade design-web to 0.4.3 and apply the expanded form-control migration.

Migrate the Form Mode preference control to direct package composition as the Slice 9 pilot.
---
 apps/frontend/package.json                    |   2 +-
 .../AnchorEventCapacityDefaultsEditor.vue     |  36 +-
 .../components/AnchorEventDetailsEditor.vue   |  72 ++--
 ...AnchorEventFeedbackQuestionnairePicker.vue |  81 ++--
 .../AnchorEventLandingRolloutEditor.vue       | 116 +++--
 .../AnchorEventTimePoolStrategyEditor.vue     | 177 ++++----
 .../sections/AnchorEventOtherSection.vue      |  30 +-
 .../ui/poi/components/PoiSelectorRail.vue     |  76 ++--
 .../admin/ui/pr/components/PRFilterRail.vue   |  89 ++--
 .../form-mode/FormModePreferenceControl.vue   | 403 ++++++------------
 .../src/domains/pr/ui/forms/NLPRForm.vue      |  16 +-
 .../src/domains/pr/ui/forms/PREditor.vue      |  63 +--
 .../src/domains/pr/ui/forms/PRForm.scss       |  50 ---
 .../pr/ui/forms/PRJoinGateConfigEditor.vue    | 112 ++---
 .../pr/ui/forms/UpdatePRStatusForm.vue        |   6 +-
 .../frontend/src/pages/AdminAnalyticsPage.vue |  54 +--
 pnpm-lock.yaml                                |  10 +-
 .../deep-ui-refactor/20-slice-plan.md         | 132 +++++-
 .../40-slice3-field-control-plan.md           | 124 +++++-
 .../45-slice3-0.4.3-reassessment.md           | 184 ++++++++
 .../46-slice3-0.4.3-implementation.md         |  86 ++++
 .../50-form-capability-needs.md               | 152 ++++---
 .../80-form-mode-preference-composition.md    | 185 ++++++++
 .../90-composition-pattern-rollout.md         | 196 +++++++++
 .../deep-ui-refactor/README.md                |  89 +++-
 25 files changed, 1605 insertions(+), 936 deletions(-)
 create mode 100644 tasks/design-web-package-integration/deep-ui-refactor/45-slice3-0.4.3-reassessment.md
 create mode 100644 tasks/design-web-package-integration/deep-ui-refactor/46-slice3-0.4.3-implementation.md
 create mode 100644 tasks/design-web-package-integration/deep-ui-refactor/80-form-mode-preference-composition.md
 create mode 100644 tasks/design-web-package-integration/deep-ui-refactor/90-composition-pattern-rollout.md

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 0a23b2972..1d62ad695 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -13,7 +13,7 @@
     "lint:tokens:strict": "node ./scripts/check-token-governance.mjs --strict"
   },
   "dependencies": {
-    "@partner-up-dev/design-web": "0.4.1",
+    "@partner-up-dev/design-web": "0.4.3",
     "@tanstack/vue-query": "^5.60.0",
     "@unhead/vue": "^2.1.2",
     "@vee-validate/zod": "^4.15.1",
diff --git a/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventCapacityDefaultsEditor.vue b/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventCapacityDefaultsEditor.vue
index bcb1d7be3..61841a97b 100644
--- a/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventCapacityDefaultsEditor.vue
+++ b/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventCapacityDefaultsEditor.vue
@@ -4,10 +4,9 @@
       :label="t('adminPR.eventDefaultMinPartnersLabel')"
       for-id="anchor-event-default-min-partners"
     >
-      <PuInput
+      <PuNumberInput
         id="anchor-event-default-min-partners"
-        v-model="defaultMinPartnersText"
-        native-type="number"
+        v-model="form.defaultMinPartners"
       />
     </PuFormItem>
 
@@ -15,10 +14,9 @@
       :label="t('adminPR.eventDefaultMaxPartnersLabel')"
       for-id="anchor-event-default-max-partners"
     >
-      <PuInput
+      <PuNumberInput
         id="anchor-event-default-max-partners"
-        v-model="defaultMaxPartnersText"
-        native-type="number"
+        v-model="form.defaultMaxPartners"
       />
     </PuFormItem>
 
@@ -29,10 +27,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 import type { AnchorEventEditorForm } from "@/domains/admin/ui/anchor-event/anchorEventEditorTypes";
-import { PuFormItem, PuInput } from "@partner-up-dev/design-web";
+import { PuFormItem, PuNumberInput } from "@partner-up-dev/design-web";
 
 defineProps<{
   validationMessage: string | null;
@@ -40,29 +37,6 @@ defineProps<{
 
 const form = defineModel<AnchorEventEditorForm>({ required: true });
 const { t } = useI18n();
-
-const nullableNumberText = (value: number | null): string =>
-  value === null ? "" : String(value);
-
-const parseNullableNumber = (value: string): number | null => {
-  if (value.trim().length === 0) return null;
-  const parsed = Number(value);
-  return Number.isFinite(parsed) ? parsed : null;
-};
-
-const defaultMinPartnersText = computed({
-  get: () => nullableNumberText(form.value.defaultMinPartners),
-  set: (value) => {
-    form.value.defaultMinPartners = parseNullableNumber(value);
-  },
-});
-
-const defaultMaxPartnersText = computed({
-  get: () => nullableNumberText(form.value.defaultMaxPartners),
-  set: (value) => {
-    form.value.defaultMaxPartners = parseNullableNumber(value);
-  },
-});
 </script>
 
 <style lang="scss" scoped>
diff --git a/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventDetailsEditor.vue b/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventDetailsEditor.vue
index 1e52481e7..7f66d0c30 100644
--- a/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventDetailsEditor.vue
+++ b/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventDetailsEditor.vue
@@ -21,54 +21,60 @@
       <PuTextarea id="anchor-event-description" v-model="form.description" />
     </PuFormItem>
 
-    <label class="field">
-      <span class="field-label">{{ t("adminPR.eventStatusLabel") }}</span>
-      <select v-model="form.status" class="field-input">
-        <option value="ACTIVE">{{ t("adminPR.statusActive") }}</option>
-        <option value="PAUSED">{{ t("adminPR.statusPaused") }}</option>
-        <option value="ARCHIVED">{{ t("adminPR.statusArchived") }}</option>
-      </select>
-    </label>
+    <PuFormItem
+      :label="t('adminPR.eventStatusLabel')"
+      for-id="anchor-event-status"
+    >
+      <PuSelect
+        id="anchor-event-status"
+        v-model="statusModel"
+        :options="statusOptions"
+      />
+    </PuFormItem>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 import type { AnchorEventEditorForm } from "@/domains/admin/ui/anchor-event/anchorEventEditorTypes";
-import { PuFormItem, PuInput, PuTextarea } from "@partner-up-dev/design-web";
+import {
+  PuFormItem,
+  PuInput,
+  PuSelect,
+  PuTextarea,
+  type PuSelectOption,
+  type PuSelectValue,
+} from "@partner-up-dev/design-web";
 
 const form = defineModel<AnchorEventEditorForm>({ required: true });
 const { t } = useI18n();
+
+const statusOptions = computed<PuSelectOption[]>(() => [
+  { label: t("adminPR.statusActive"), value: "ACTIVE" },
+  { label: t("adminPR.statusPaused"), value: "PAUSED" },
+  { label: t("adminPR.statusArchived"), value: "ARCHIVED" },
+]);
+
+const isAnchorEventStatus = (
+  value: PuSelectValue,
+): value is AnchorEventEditorForm["status"] =>
+  value === "ACTIVE" || value === "PAUSED" || value === "ARCHIVED";
+
+const statusModel = computed({
+  get: () => form.value.status,
+  set: (value: PuSelectValue) => {
+    if (isAnchorEventStatus(value)) {
+      form.value.status = value;
+    }
+  },
+});
 </script>
 
 <style lang="scss" scoped>
 .anchor-event-details-editor {
   display: flex;
   flex-direction: column;
-}
-
-.anchor-event-details-editor {
   gap: var(--sys-spacing-small);
 }
-
-.field {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sys-spacing-xsmall);
-}
-
-.field-label {
-  @include mx.pu-font(control);
-  color: var(--sys-color-on-surface-variant);
-}
-
-.field-input {
-  width: 100%;
-  padding: var(--sys-spacing-small);
-  border: 1px solid var(--sys-color-outline-variant);
-  border-radius: var(--sys-radius-small);
-  background: var(--sys-color-surface);
-  color: var(--sys-color-on-surface);
-}
-
 </style>
diff --git a/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventFeedbackQuestionnairePicker.vue b/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventFeedbackQuestionnairePicker.vue
index cea6cac2b..68c916101 100644
--- a/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventFeedbackQuestionnairePicker.vue
+++ b/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventFeedbackQuestionnairePicker.vue
@@ -1,65 +1,52 @@
 <template>
-  <label class="field">
-    <span class="field-label">
-      {{ t("adminPR.eventFeedbackQuestionnaireTemplateLabel") }}
-    </span>
-    <select
-      class="field-input"
-      :value="form.feedbackQuestionnaireTemplateId ?? ''"
+  <PuFormItem
+    :label="t('adminPR.eventFeedbackQuestionnaireTemplateLabel')"
+    for-id="anchor-event-feedback-template"
+  >
+    <PuSelect
+      id="anchor-event-feedback-template"
+      v-model="feedbackTemplateId"
+      :options="templateOptions"
+      :placeholder="t('adminPR.noFeedbackQuestionnaire')"
+      clearable
       data-testid="admin-anchor-event.feedback-template"
-      @change="form.feedbackQuestionnaireTemplateId = parseNullableId($event)"
-    >
-      <option value="">{{ t("adminPR.noFeedbackQuestionnaire") }}</option>
-      <option
-        v-for="template in templates"
-        :key="template.id"
-        :value="template.id"
-      >
-        {{ template.title }}
-      </option>
-    </select>
-  </label>
+    />
+  </PuFormItem>
 </template>
 
 <script setup lang="ts">
+import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 import type {
   AnchorEventEditorForm,
   FeedbackQuestionnaireTemplateOption,
 } from "@/domains/admin/ui/anchor-event/anchorEventEditorTypes";
+import {
+  PuFormItem,
+  PuSelect,
+  type PuSelectOption,
+  type PuSelectValue,
+} from "@partner-up-dev/design-web";
 
-defineProps<{
+const props = defineProps<{
   templates: FeedbackQuestionnaireTemplateOption[];
 }>();
 
 const form = defineModel<AnchorEventEditorForm>({ required: true });
 const { t } = useI18n();
 
-const parseNullableId = (event: Event): number | null => {
-  const target = event.target as HTMLSelectElement | null;
-  const parsed = Number(target?.value ?? "");
-  return Number.isInteger(parsed) && parsed > 0 ? parsed : null;
-};
-</script>
-
-<style lang="scss" scoped>
-.field {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sys-spacing-xsmall);
-}
+const templateOptions = computed<PuSelectOption[]>(() =>
+  props.templates.map((template) => ({
+    label: template.title,
+    value: template.id,
+  })),
+);
 
-.field-label {
-  @include mx.pu-font(control);
-  color: var(--sys-color-on-surface-variant);
-}
-
-.field-input {
-  width: 100%;
-  padding: var(--sys-spacing-small);
-  border: 1px solid var(--sys-color-outline-variant);
-  border-radius: var(--sys-radius-small);
-  background: var(--sys-color-surface);
-  color: var(--sys-color-on-surface);
-}
-</style>
+const feedbackTemplateId = computed({
+  get: () => form.value.feedbackQuestionnaireTemplateId,
+  set: (value: PuSelectValue) => {
+    form.value.feedbackQuestionnaireTemplateId =
+      typeof value === "number" ? value : null;
+  },
+});
+</script>
diff --git a/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventLandingRolloutEditor.vue b/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventLandingRolloutEditor.vue
index 8219408f6..ba35ee1bf 100644
--- a/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventLandingRolloutEditor.vue
+++ b/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventLandingRolloutEditor.vue
@@ -17,52 +17,50 @@
 
     <template v-else>
       <div class="grid-3">
-        <label class="field">
-          <span class="field-label">
-            {{ t("adminAnchorEvents.formRatioLabel") }}
-          </span>
-          <input
-            v-model.number="form.formRatio"
-            class="field-input"
-            type="number"
-            min="0"
+        <PuFormItem
+          :label="t('adminAnchorEvents.formRatioLabel')"
+          for-id="anchor-event-landing-form-ratio"
+        >
+          <PuNumberInput
+            id="anchor-event-landing-form-ratio"
+            v-model="form.formRatio"
+            :min="0"
           />
-        </label>
-        <label class="field">
-          <span class="field-label">
-            {{ t("adminAnchorEvents.cardRichRatioLabel") }}
-          </span>
-          <input
-            v-model.number="form.cardRichRatio"
-            class="field-input"
-            type="number"
-            min="0"
+        </PuFormItem>
+
+        <PuFormItem
+          :label="t('adminAnchorEvents.cardRichRatioLabel')"
+          for-id="anchor-event-landing-card-rich-ratio"
+        >
+          <PuNumberInput
+            id="anchor-event-landing-card-rich-ratio"
+            v-model="form.cardRichRatio"
+            :min="0"
           />
-        </label>
-        <label class="field">
-          <span class="field-label">
-            {{ t("adminAnchorEvents.listRatioLabel") }}
-          </span>
-          <input
-            v-model.number="form.listRatio"
-            class="field-input"
-            type="number"
-            min="0"
+        </PuFormItem>
+
+        <PuFormItem
+          :label="t('adminAnchorEvents.listRatioLabel')"
+          for-id="anchor-event-landing-list-ratio"
+        >
+          <PuNumberInput
+            id="anchor-event-landing-list-ratio"
+            v-model="form.listRatio"
+            :min="0"
           />
-        </label>
+        </PuFormItem>
       </div>
 
-      <label class="field">
-        <span class="field-label">
-          {{ t("adminAnchorEvents.assignmentRevisionLabel") }}
-        </span>
-        <input
-          v-model.number="form.assignmentRevision"
-          class="field-input"
-          type="number"
-          min="1"
+      <PuFormItem
+        :label="t('adminAnchorEvents.assignmentRevisionLabel')"
+        for-id="anchor-event-landing-assignment-revision"
+      >
+        <PuNumberInput
+          id="anchor-event-landing-assignment-revision"
+          v-model="form.assignmentRevision"
+          :min="1"
         />
-      </label>
+      </PuFormItem>
 
       <p class="hint">{{ t("adminAnchorEvents.landingFallbackHint") }}</p>
 
@@ -80,17 +78,21 @@
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
-import { PuLoadingState } from "@partner-up-dev/design-web";
+import {
+  PuFormItem,
+  PuLoadingState,
+  PuNumberInput,
+} from "@partner-up-dev/design-web";
 import {
   useAdminAnchorEventLandingConfig,
   useReplaceAdminAnchorEventLandingConfig,
 } from "@/domains/admin/queries/useAdminAnchorEventLandingConfig";
 
 type LandingConfigForm = {
-  formRatio: number;
-  cardRichRatio: number;
-  listRatio: number;
-  assignmentRevision: number;
+  formRatio: number | null;
+  cardRichRatio: number | null;
+  listRatio: number | null;
+  assignmentRevision: number | null;
 };
 
 const props = withDefaults(
@@ -242,13 +244,9 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
-.anchor-event-landing-rollout-editor,
-.field {
+.anchor-event-landing-rollout-editor {
   display: flex;
   flex-direction: column;
-}
-
-.anchor-event-landing-rollout-editor {
   gap: var(--sys-spacing-small);
 }
 
@@ -257,24 +255,6 @@ defineExpose({
   gap: var(--sys-spacing-medium);
 }
 
-.field {
-  gap: var(--sys-spacing-xsmall);
-}
-
-.field-label {
-  @include mx.pu-font(control);
-  color: var(--sys-color-on-surface-variant);
-}
-
-.field-input {
-  width: 100%;
-  padding: var(--sys-spacing-small);
-  border: 1px solid var(--sys-color-outline-variant);
-  border-radius: var(--sys-radius-small);
-  background: var(--sys-color-surface);
-  color: var(--sys-color-on-surface);
-}
-
 .hint,
 .error-message {
   margin: 0;
diff --git a/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventTimePoolStrategyEditor.vue b/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventTimePoolStrategyEditor.vue
index 52d931dfd..bdd0a0114 100644
--- a/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventTimePoolStrategyEditor.vue
+++ b/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventTimePoolStrategyEditor.vue
@@ -1,65 +1,64 @@
 <template>
   <div class="anchor-event-time-pool-strategy-editor">
     <div class="grid-2">
-      <label class="field">
-        <span class="field-label">{{ t("adminPR.timePoolDurationLabel") }}</span>
-        <input
-          v-model.number="form.durationMinutes"
-          class="field-input"
-          type="number"
-          min="1"
-        />
-      </label>
-      <label class="field">
-        <span class="field-label">
-          {{ t("adminPR.timePoolEarliestLeadLabel") }}
-        </span>
-        <input
-          v-model.number="form.earliestLeadMinutes"
-          class="field-input"
-          type="number"
-          min="0"
+      <PuFormItem
+        :label="t('adminPR.timePoolDurationLabel')"
+        for-id="anchor-event-time-pool-duration"
+      >
+        <PuNumberInput
+          id="anchor-event-time-pool-duration"
+          v-model="form.durationMinutes"
+          :min="1"
         />
-      </label>
-    </div>
+      </PuFormItem>
 
-    <label class="field">
-      <span class="field-label">
-        {{ t("adminAnchorEvents.prTimeWindowEditorDefaultModeTitle") }}
-      </span>
-      <select
-        v-model="form.prTimeWindowEditorDefaultMode"
-        class="field-input"
+      <PuFormItem
+        :label="t('adminPR.timePoolEarliestLeadLabel')"
+        for-id="anchor-event-time-pool-earliest-lead"
       >
-        <option value="NORMAL">
-          {{ t("adminAnchorEvents.prTimeWindowEditorDefaultModeNormal") }}
-        </option>
-        <option value="FUZZY">
-          {{ t("adminAnchorEvents.prTimeWindowEditorDefaultModeFuzzy") }}
-        </option>
-        <option value="ADVANCED">
-          {{ t("adminAnchorEvents.prTimeWindowEditorDefaultModeAdvanced") }}
-        </option>
-      </select>
-    </label>
-    <p class="hint">
-      {{ t("adminAnchorEvents.prTimeWindowEditorDefaultModeHint") }}
-    </p>
-
-    <label class="field">
-      <span class="field-label">{{ t("adminPR.absoluteRulesLabel") }}</span>
-      <textarea v-model="form.absoluteRulesText" class="field-input field-textarea" />
-    </label>
-    <p class="hint">{{ t("adminPR.absoluteRulesHint") }}</p>
+        <PuNumberInput
+          id="anchor-event-time-pool-earliest-lead"
+          v-model="form.earliestLeadMinutes"
+          :min="0"
+        />
+      </PuFormItem>
+    </div>
 
-    <label class="field">
-      <span class="field-label">{{ t("adminPR.recurringRulesLabel") }}</span>
-      <textarea
+    <PuFormItem
+      :label="t('adminAnchorEvents.prTimeWindowEditorDefaultModeTitle')"
+      :hint="t('adminAnchorEvents.prTimeWindowEditorDefaultModeHint')"
+      for-id="anchor-event-pr-time-window-default-mode"
+    >
+      <PuSelect
+        id="anchor-event-pr-time-window-default-mode"
+        v-model="prTimeWindowEditorDefaultMode"
+        :options="prTimeWindowEditorDefaultModeOptions"
+      />
+    </PuFormItem>
+
+    <PuFormItem
+      :label="t('adminPR.absoluteRulesLabel')"
+      :hint="t('adminPR.absoluteRulesHint')"
+      for-id="anchor-event-absolute-rules"
+    >
+      <PuTextarea
+        id="anchor-event-absolute-rules"
+        v-model="form.absoluteRulesText"
+        rows="4"
+      />
+    </PuFormItem>
+
+    <PuFormItem
+      :label="t('adminPR.recurringRulesLabel')"
+      :hint="t('adminPR.recurringRulesHint')"
+      for-id="anchor-event-recurring-rules"
+    >
+      <PuTextarea
+        id="anchor-event-recurring-rules"
         v-model="form.recurringRulesText"
-        class="field-input field-textarea"
+        rows="4"
       />
-    </label>
-    <p class="hint">{{ t("adminPR.recurringRulesHint") }}</p>
+    </PuFormItem>
 
     <p v-if="validationMessage" class="error-message">
       {{ validationMessage }}
@@ -68,8 +67,17 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 import type { AnchorEventEditorForm } from "@/domains/admin/ui/anchor-event/anchorEventEditorTypes";
+import {
+  PuFormItem,
+  PuNumberInput,
+  PuSelect,
+  PuTextarea,
+  type PuSelectOption,
+  type PuSelectValue,
+} from "@partner-up-dev/design-web";
 
 defineProps<{
   validationMessage: string | null;
@@ -77,16 +85,41 @@ defineProps<{
 
 const form = defineModel<AnchorEventEditorForm>({ required: true });
 const { t } = useI18n();
+
+const prTimeWindowEditorDefaultModeOptions = computed<PuSelectOption[]>(() => [
+  {
+    label: t("adminAnchorEvents.prTimeWindowEditorDefaultModeNormal"),
+    value: "NORMAL",
+  },
+  {
+    label: t("adminAnchorEvents.prTimeWindowEditorDefaultModeFuzzy"),
+    value: "FUZZY",
+  },
+  {
+    label: t("adminAnchorEvents.prTimeWindowEditorDefaultModeAdvanced"),
+    value: "ADVANCED",
+  },
+]);
+
+const isPrTimeWindowEditorDefaultMode = (
+  value: PuSelectValue,
+): value is AnchorEventEditorForm["prTimeWindowEditorDefaultMode"] =>
+  value === "NORMAL" || value === "FUZZY" || value === "ADVANCED";
+
+const prTimeWindowEditorDefaultMode = computed({
+  get: () => form.value.prTimeWindowEditorDefaultMode,
+  set: (value: PuSelectValue) => {
+    if (isPrTimeWindowEditorDefaultMode(value)) {
+      form.value.prTimeWindowEditorDefaultMode = value;
+    }
+  },
+});
 </script>
 
 <style lang="scss" scoped>
-.anchor-event-time-pool-strategy-editor,
-.field {
+.anchor-event-time-pool-strategy-editor {
   display: flex;
   flex-direction: column;
-}
-
-.anchor-event-time-pool-strategy-editor {
   gap: var(--sys-spacing-small);
 }
 
@@ -95,39 +128,11 @@ const { t } = useI18n();
   gap: var(--sys-spacing-medium);
 }
 
-.field {
-  gap: var(--sys-spacing-xsmall);
-}
-
-.field-label {
-  @include mx.pu-font(control);
-  color: var(--sys-color-on-surface-variant);
-}
-
-.field-input {
-  width: 100%;
-  padding: var(--sys-spacing-small);
-  border: 1px solid var(--sys-color-outline-variant);
-  border-radius: var(--sys-radius-small);
-  background: var(--sys-color-surface);
-  color: var(--sys-color-on-surface);
-}
-
-.field-textarea {
-  min-height: 96px;
-  resize: vertical;
-}
-
-.hint,
 .error-message {
   margin: 0;
   @include mx.pu-font(body);
 }
 
-.hint {
-  color: var(--sys-color-on-surface-variant);
-}
-
 .error-message {
   color: var(--sys-color-error);
 }
diff --git a/apps/frontend/src/domains/admin/ui/anchor-event/sections/AnchorEventOtherSection.vue b/apps/frontend/src/domains/admin/ui/anchor-event/sections/AnchorEventOtherSection.vue
index e86de950e..dbecddf62 100644
--- a/apps/frontend/src/domains/admin/ui/anchor-event/sections/AnchorEventOtherSection.vue
+++ b/apps/frontend/src/domains/admin/ui/anchor-event/sections/AnchorEventOtherSection.vue
@@ -37,10 +37,10 @@
 
       <BentoItem :title="t('adminAnchorEvents.participationFrequencyLimitTitle')">
         <div class="policy-setting">
-          <PuInput
-            v-model="participationFrequencyLimitText"
-            type="number"
+          <PuNumberInput
+            v-model="participationFrequencyLimitCount"
             inputmode="numeric"
+            :min="1"
             :disabled="props.disabled"
             :placeholder="
               t('adminAnchorEvents.participationFrequencyLimitPlaceholder')
@@ -111,7 +111,12 @@ import BentoLayout from "@/domains/admin/ui/layout/BentoLayout.vue";
 import AnchorEventFeedbackQuestionnairePicker from "@/domains/admin/ui/anchor-event/components/AnchorEventFeedbackQuestionnairePicker.vue";
 import AnchorEventJoinGateEditor from "@/domains/admin/ui/anchor-event/components/AnchorEventJoinGateEditor.vue";
 import AnchorEventLandingRolloutEditor from "@/domains/admin/ui/anchor-event/components/AnchorEventLandingRolloutEditor.vue";
-import { PuButton, PuInput, PuTextarea, PuToggleSwitch } from "@partner-up-dev/design-web";
+import {
+  PuButton,
+  PuNumberInput,
+  PuTextarea,
+  PuToggleSwitch,
+} from "@partner-up-dev/design-web";
 import type {
   AnchorEventEditorForm,
   FeedbackQuestionnaireTemplateOption,
@@ -159,20 +164,13 @@ const fullPrExpansionEnabled = computed({
     form.value.fullPrExpansionPolicy = value ? "ENABLED" : "DISABLED";
   },
 });
-const participationFrequencyLimitText = computed({
+const participationFrequencyLimitCount = computed({
   get: () =>
-    form.value.participationFrequencyLimit?.intervalPrCount.toString() ?? "",
-  set: (value: string) => {
-    const normalized = value.trim();
-    if (!normalized) {
-      form.value.participationFrequencyLimit = null;
-      return;
-    }
-
-    const parsed = Number(normalized);
+    form.value.participationFrequencyLimit?.intervalPrCount ?? null,
+  set: (value: number | null) => {
     form.value.participationFrequencyLimit =
-      Number.isInteger(parsed) && parsed > 0
-        ? { intervalPrCount: parsed }
+      value !== null && Number.isInteger(value) && value > 0
+        ? { intervalPrCount: value }
         : null;
   },
 });
diff --git a/apps/frontend/src/domains/admin/ui/poi/components/PoiSelectorRail.vue b/apps/frontend/src/domains/admin/ui/poi/components/PoiSelectorRail.vue
index 3505d923d..ddc8e0641 100644
--- a/apps/frontend/src/domains/admin/ui/poi/components/PoiSelectorRail.vue
+++ b/apps/frontend/src/domains/admin/ui/poi/components/PoiSelectorRail.vue
@@ -2,32 +2,25 @@
   <AdminRailPanel :title="t('adminPois.poiListTitle')">
     <p class="hint">{{ t("adminPois.poiCount", { count: pois.length }) }}</p>
 
-    <label class="field">
-      <span class="field-label">{{ t("adminPois.poiLabel") }}</span>
-      <select
-        :value="modelValue"
-        class="field-input"
-        @change="emit('update:modelValue', ($event.target as HTMLSelectElement).value)"
-      >
-        <option value="">{{ t("adminPois.poiPlaceholder") }}</option>
-        <option v-for="poi in pois" :key="poi.id" :value="poi.id">
-          #{{ poi.id }} · {{ poi.name }} · {{ statusLabel(poi.status) }}
-        </option>
-      </select>
-    </label>
+    <PuFormItem :label="t('adminPois.poiLabel')" for-id="admin-poi-selector">
+      <PuSelect
+        id="admin-poi-selector"
+        v-model="selectedPoiId"
+        :options="poiOptions"
+      />
+    </PuFormItem>
 
     <div class="divider" aria-hidden="true" />
 
     <section class="create-poi">
       <h3 class="create-poi__title">{{ t("adminPois.createPoiTitle") }}</h3>
-      <label class="field">
-        <span class="field-label">{{ t("adminPois.newPoiLabel") }}</span>
-        <input
+      <PuFormItem :label="t('adminPois.newPoiLabel')" for-id="admin-poi-new-name">
+        <PuInput
+          id="admin-poi-new-name"
           v-model="newPoiName"
-          class="field-input"
           :placeholder="t('adminPois.newPoiPlaceholder')"
         />
-      </label>
+      </PuFormItem>
       <PuButton
         shape="pill"
         tone="neutral" variant="outline"
@@ -47,15 +40,23 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 import type { AdminPoisResponse } from "@/domains/admin/queries/useAdminPoiManagement";
 import AdminRailPanel from "@/domains/admin/ui/layout/AdminRailPanel.vue";
-import { PuButton } from "@partner-up-dev/design-web";
+import {
+  PuButton,
+  PuFormItem,
+  PuInput,
+  PuSelect,
+  type PuSelectOption,
+  type PuSelectValue,
+} from "@partner-up-dev/design-web";
 
 type PoiRecord = NonNullable<AdminPoisResponse>[number];
 type PoiStatus = PoiRecord["status"];
 
-defineProps<{
+const props = defineProps<{
   modelValue: string;
   pois: PoiRecord[];
   canCreatePoi: boolean;
@@ -70,6 +71,21 @@ const emit = defineEmits<{
 const newPoiName = defineModel<string>("newPoiName", { required: true });
 const { t } = useI18n();
 
+const poiOptions = computed<PuSelectOption[]>(() => [
+  { label: t("adminPois.poiPlaceholder"), value: "" },
+  ...props.pois.map((poi) => ({
+    label: `#${poi.id} · ${poi.name} · ${statusLabel(poi.status)}`,
+    value: String(poi.id),
+  })),
+]);
+
+const selectedPoiId = computed({
+  get: () => props.modelValue,
+  set: (value: PuSelectValue) => {
+    emit("update:modelValue", typeof value === "string" ? value : "");
+  },
+});
+
 const statusLabel = (status: PoiStatus): string => {
   switch (status) {
     case "PENDING":
@@ -89,12 +105,6 @@ const statusLabel = (status: PoiStatus): string => {
   color: var(--sys-color-on-surface-variant);
 }
 
-.field {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sys-spacing-xsmall);
-}
-
 .divider {
   height: 1px;
   background: var(--sys-color-outline-variant);
@@ -111,18 +121,4 @@ const statusLabel = (status: PoiStatus): string => {
   margin: 0;
   color: var(--sys-color-on-surface);
 }
-
-.field-label {
-  @include mx.pu-font(control);
-  color: var(--sys-color-on-surface-variant);
-}
-
-.field-input {
-  width: 100%;
-  padding: var(--sys-spacing-small);
-  border: 1px solid var(--sys-color-outline-variant);
-  border-radius: var(--sys-radius-small);
-  background: var(--sys-color-surface);
-  color: var(--sys-color-on-surface);
-}
 </style>
diff --git a/apps/frontend/src/domains/admin/ui/pr/components/PRFilterRail.vue b/apps/frontend/src/domains/admin/ui/pr/components/PRFilterRail.vue
index d333cd3fc..eb027a53e 100644
--- a/apps/frontend/src/domains/admin/ui/pr/components/PRFilterRail.vue
+++ b/apps/frontend/src/domains/admin/ui/pr/components/PRFilterRail.vue
@@ -12,32 +12,32 @@
       </PuButton>
     </template>
 
-    <label class="field">
-      <span class="field-label">{{ t("adminPR.searchTypeLabel") }}</span>
-      <input v-model="filters.type" class="field-input" :list="typeOptionsListId" />
-    </label>
+    <PuFormItem :label="t('adminPR.searchTypeLabel')" for-id="admin-pr-filter-type">
+      <PuInput
+        id="admin-pr-filter-type"
+        v-model="filters.type"
+        :list="typeOptionsListId"
+      />
+    </PuFormItem>
 
-    <label class="field">
-      <span class="field-label">{{ t("adminPR.searchLocationLabel") }}</span>
-      <input
+    <PuFormItem
+      :label="t('adminPR.searchLocationLabel')"
+      for-id="admin-pr-filter-location"
+    >
+      <PuInput
+        id="admin-pr-filter-location"
         v-model="filters.location"
-        class="field-input"
         :list="locationOptionsListId"
       />
-    </label>
+    </PuFormItem>
 
-    <label class="field">
-      <span class="field-label">{{ t("adminPR.searchStatusLabel") }}</span>
-      <select v-model="filters.status" class="field-input">
-        <option value="">{{ t("adminPR.searchStatusAll") }}</option>
-        <option value="DRAFT">DRAFT</option>
-        <option value="OPEN">OPEN</option>
-        <option value="READY">READY</option>
-        <option value="ACTIVE">ACTIVE</option>
-        <option value="CLOSED">CLOSED</option>
-        <option value="EXPIRED">EXPIRED</option>
-      </select>
-    </label>
+    <PuFormItem :label="t('adminPR.searchStatusLabel')" for-id="admin-pr-filter-status">
+      <PuSelect
+        id="admin-pr-filter-status"
+        v-model="filterStatus"
+        :options="statusOptions"
+      />
+    </PuFormItem>
 
     <PuFormItem :label="t('adminPR.searchStartLabel')">
       <PuInput v-model="filters.startAt" native-type="datetime-local" />
@@ -50,10 +50,18 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 import type { AdminPRFilters } from "@/domains/admin/use-cases/pr/useAdminPRWorkspaceSelection";
 import AdminRailPanel from "@/domains/admin/ui/layout/AdminRailPanel.vue";
-import { PuButton, PuFormItem, PuInput } from "@partner-up-dev/design-web";
+import {
+  PuButton,
+  PuFormItem,
+  PuInput,
+  PuSelect,
+  type PuSelectOption,
+  type PuSelectValue,
+} from "@partner-up-dev/design-web";
 
 defineProps<{
   showCreateAction?: boolean;
@@ -67,26 +75,21 @@ const emit = defineEmits<{
 
 const filters = defineModel<AdminPRFilters>("filters", { required: true });
 const { t } = useI18n();
-</script>
 
-<style lang="scss" scoped>
-.field {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sys-spacing-xsmall);
-}
+const statusOptions = computed<PuSelectOption[]>(() => [
+  { label: t("adminPR.searchStatusAll"), value: "" },
+  { label: "DRAFT", value: "DRAFT" },
+  { label: "OPEN", value: "OPEN" },
+  { label: "READY", value: "READY" },
+  { label: "ACTIVE", value: "ACTIVE" },
+  { label: "CLOSED", value: "CLOSED" },
+  { label: "EXPIRED", value: "EXPIRED" },
+]);
 
-.field-label {
-  @include mx.pu-font(control);
-  color: var(--sys-color-on-surface-variant);
-}
-
-.field-input {
-  width: 100%;
-  padding: var(--sys-spacing-small);
-  border: 1px solid var(--sys-color-outline-variant);
-  border-radius: var(--sys-radius-small);
-  background: var(--sys-color-surface);
-  color: var(--sys-color-on-surface);
-}
-</style>
+const filterStatus = computed({
+  get: () => filters.value.status,
+  set: (value: PuSelectValue) => {
+    filters.value.status = typeof value === "string" ? value : "";
+  },
+});
+</script>
diff --git a/apps/frontend/src/domains/event/ui/controls/form-mode/FormModePreferenceControl.vue b/apps/frontend/src/domains/event/ui/controls/form-mode/FormModePreferenceControl.vue
index e7ab8d607..d4e6f7c9e 100644
--- a/apps/frontend/src/domains/event/ui/controls/form-mode/FormModePreferenceControl.vue
+++ b/apps/frontend/src/domains/event/ui/controls/form-mode/FormModePreferenceControl.vue
@@ -17,12 +17,11 @@
       />
     </div>
 
-    <p
+    <PuInlineNotice
       v-if="preferenceSubmissionMessage"
-      class="inline-message inline-message--error"
-    >
-      {{ preferenceSubmissionMessage }}
-    </p>
+      tone="error"
+      :message="preferenceSubmissionMessage"
+    />
 
     <PuDrawer
       v-model:visible="preferenceDrawerOpen"
@@ -32,81 +31,50 @@
     >
       <div v-if="activeDrawerCell" class="preference-drawer">
         <section class="preference-group">
-          <div class="preference-group__list">
-            <div
-              v-for="tag in activeDrawerTags"
+          <PuChipGroup class="preference-group__list" wrap gap="sm">
+            <PuChip
+              v-for="tag in activeDrawerPresetTags"
               :key="tag.label"
-              class="tag-pill"
-              :class="{
-                'tag-pill--selected': isDrawerTagSelected(tag.label),
-                'tag-pill--removable': isDrawerCustomTag(tag.label),
-              }"
-            >
-              <button
-                class="tag-pill__body"
-                type="button"
-                @click="handleSelectDrawerTag(tag.label)"
-              >
-                <span class="tag-pill__label">
-                  {{ formatTagDisplayLabel(tag.label, activeDrawerCell) }}
-                </span>
-              </button>
-
-              <button
-                v-if="isDrawerCustomTag(tag.label)"
-                class="tag-pill__remove"
-                type="button"
-                :aria-label="
-                  t('anchorEvent.formMode.removeCustomTagAction', {
-                    label: formatTagDisplayLabel(tag.label, activeDrawerCell),
-                  })
-                "
-                @click="handleRemoveCustomTag(tag.label)"
-              >
-                <span class="i-mdi-close" aria-hidden="true"></span>
-              </button>
-            </div>
-
-            <div v-if="drawerCustomTagEditing" class="tag-pill tag-pill--draft">
-              <input
-                v-model.trim="drawerCustomTagInput"
-                class="tag-pill__input"
-                :placeholder="t('anchorEvent.formMode.customTagPlaceholder')"
-                type="text"
-                maxlength="80"
-                @keydown.enter.prevent="handleAddCustomTag"
-                @keydown.esc.prevent="cancelCustomTagDraft"
-              />
-              <button
-                class="tag-pill__remove"
-                type="button"
-                :aria-label="t('common.cancel')"
-                @click="cancelCustomTagDraft"
-              >
-                <span
-                  class="i-mdi-close tag-pill__close"
-                  aria-hidden="true"
-                ></span>
-              </button>
-            </div>
-
-            <button
-              v-else
-              class="tag-pill tag-pill--add"
+              as="button"
               type="button"
-              :aria-label="t('anchorEvent.formMode.addCustomTagAction')"
-              @click="openCustomTagDraft"
-            >
-              <span class="tag-pill__plus" aria-hidden="true">+</span>
-            </button>
-          </div>
-
-          <p
-            v-if="drawerCustomTagMessage"
-            class="inline-message inline-message--error"
+              shape="pill"
+              :selected="isDrawerTagSelected(tag.label)"
+              :tone="isDrawerTagSelected(tag.label) ? 'primary' : 'neutral'"
+              :variant="isDrawerTagSelected(tag.label) ? 'soft' : 'outline'"
+              :label="formatTagDisplayLabel(tag.label, activeDrawerCell)"
+              @click="handleSelectDrawerTag(tag.label)"
+            />
+          </PuChipGroup>
+
+          <PuFormItem
+            class="preference-custom-field"
+            :label="t('anchorEvent.formMode.customTagTitle')"
           >
-            {{ drawerCustomTagMessage }}
-          </p>
+            <PuChipInput
+              :model-value="activeDrawerCustomLabels"
+              shape="pill"
+              add-on-blur
+              :placeholder="t('anchorEvent.formMode.customTagPlaceholder')"
+              @add="handleAddCustomTag"
+              @remove="handleRemoveCustomTag"
+            >
+              <template #chip="{ value, remove }">
+                <PuChip
+                  as="button"
+                  type="button"
+                  shape="pill"
+                  removable
+                  :selected="isDrawerTagSelected(value)"
+                  :tone="isDrawerTagSelected(value) ? 'primary' : 'neutral'"
+                  :variant="isDrawerTagSelected(value) ? 'soft' : 'outline'"
+                  :label="formatTagDisplayLabel(value, activeDrawerCell)"
+                  :remove-label="buildCustomTagRemoveLabel(value)"
+                  @click="handleSelectDrawerTag(value)"
+                  @remove="handleRemoveCustomTagFromInput(value, remove, $event)"
+                />
+              </template>
+            </PuChipInput>
+          </PuFormItem>
 
           <div v-if="activeDrawerDescription" class="tag-description-panel">
             {{ activeDrawerDescription }}
@@ -118,17 +86,13 @@
         <div class="drawer-actions">
           <PuButton
             shape="pill"
-            tone="neutral" variant="outline"
-
+            tone="neutral"
+            variant="outline"
             @click="closePreferenceDrawer"
           >
             {{ t("common.cancel") }}
           </PuButton>
-          <PuButton
-            shape="pill"
-
-            @click="handleSavePreferenceDrawer"
-          >
+          <PuButton shape="pill" @click="handleSavePreferenceDrawer">
             {{ t("common.confirm") }}
           </PuButton>
         </div>
@@ -146,7 +110,17 @@ import {
   derivePreferenceCategory,
 } from "@/domains/event/model/form-mode";
 import { useAnchorEventPreferenceTagSubmissions } from "@/domains/event/queries/useAnchorEventPreferenceTagSubmissions";
-import { PuButton, PuCell, PuDrawer, type PuDrawerCloseEvent } from "@partner-up-dev/design-web";
+import {
+  PuButton,
+  PuCell,
+  PuChip,
+  PuChipGroup,
+  PuChipInput,
+  PuDrawer,
+  type PuDrawerCloseEvent,
+  PuFormItem,
+  PuInlineNotice,
+} from "@partner-up-dev/design-web";
 
 type FormModePresetTag = AnchorEventFormModeResponse["presetTags"][number];
 type PreferenceCell =
@@ -182,17 +156,17 @@ const activeDrawerCell = ref<PreferenceCell | null>(null);
 const drawerSelectedCategoryMap = ref<Record<string, string | null>>({});
 const drawerSelectedUncategorizedLabels = ref<string[]>([]);
 const drawerCustomTags = ref<FormModePresetTag[]>([]);
-const drawerCustomTagEditing = ref(false);
-const drawerCustomTagInput = ref("");
-const drawerCustomTagMessage = ref<string | null>(null);
 const preferenceSubmissionMessage = ref<string | null>(null);
 
+const normalizeTagKey = (label: string): string =>
+  label.trim().toLocaleLowerCase("zh-CN");
+
 const mergeTagsByLabel = (
   tags: readonly FormModePresetTag[],
 ): FormModePresetTag[] => {
   const byLabel = new Map<string, FormModePresetTag>();
   for (const tag of tags) {
-    const key = tag.label.trim().toLocaleLowerCase("zh-CN");
+    const key = normalizeTagKey(tag.label);
     if (key.length === 0 || byLabel.has(key)) {
       continue;
     }
@@ -211,12 +185,16 @@ const drawerEffectiveTags = computed<FormModePresetTag[]>(() =>
   mergeTagsByLabel([...props.presetTags, ...drawerCustomTags.value]),
 );
 
+const presetTagKeys = computed(
+  () => new Set(props.presetTags.map((tag) => normalizeTagKey(tag.label))),
+);
+
 const preferenceTagGroups = computed(() =>
   buildPreferenceTagGroups(effectivePresetTags.value),
 );
 
-const drawerTagGroups = computed(() =>
-  buildPreferenceTagGroups(drawerEffectiveTags.value),
+const drawerPresetTagGroups = computed(() =>
+  buildPreferenceTagGroups(props.presetTags),
 );
 
 const preferenceCells = computed<PreferenceCell[]>(() => {
@@ -260,13 +238,25 @@ const preferenceDrawerTitle = computed(() => {
   });
 });
 
-const activeDrawerTags = computed<FormModePresetTag[]>(() => {
+const isTagInPreferenceCell = (
+  tag: FormModePresetTag,
+  cell: PreferenceCell,
+): boolean => {
+  const category = derivePreferenceCategory(tag.label);
+  if (cell.kind === "category") {
+    return category === cell.category;
+  }
+
+  return category === null;
+};
+
+const activeDrawerPresetTags = computed<FormModePresetTag[]>(() => {
   const cell = activeDrawerCell.value;
   if (!cell) {
     return [];
   }
 
-  const groups = drawerTagGroups.value;
+  const groups = drawerPresetTagGroups.value;
   if (cell.kind === "category") {
     return (
       groups.categorized.find((group) => group.category === cell.category)
@@ -281,6 +271,23 @@ const activeDrawerTags = computed<FormModePresetTag[]>(() => {
   return groups.categorized.length === 0 ? groups.uncategorized : [];
 });
 
+const activeDrawerCustomTags = computed<FormModePresetTag[]>(() => {
+  const cell = activeDrawerCell.value;
+  if (!cell) {
+    return [];
+  }
+
+  return mergeTagsByLabel(drawerCustomTags.value).filter(
+    (tag) =>
+      !presetTagKeys.value.has(normalizeTagKey(tag.label)) &&
+      isTagInPreferenceCell(tag, cell),
+  );
+});
+
+const activeDrawerCustomLabels = computed<string[]>(() =>
+  activeDrawerCustomTags.value.map((tag) => tag.label),
+);
+
 const activeDrawerSelectedLabel = computed(() => {
   const cell = activeDrawerCell.value;
   if (!cell) {
@@ -300,7 +307,7 @@ const activeDrawerDescription = computed(() => {
     return "";
   }
 
-  const selectedTag = activeDrawerTags.value.find(
+  const selectedTag = activeDrawerPresetTags.value.find(
     (tag) => tag.label === selectedLabel,
   );
   return selectedTag?.description.trim() ?? "";
@@ -337,6 +344,13 @@ const stripAnyCategoryPrefix = (label: string): string => {
 const formatTagDisplayLabel = (label: string, cell: PreferenceCell): string =>
   cell.kind === "category" ? stripCategoryPrefix(label, cell.category) : label;
 
+const buildCustomTagRemoveLabel = (label: string): string => {
+  const cell = activeDrawerCell.value;
+  return t("anchorEvent.formMode.removeCustomTagAction", {
+    label: cell ? formatTagDisplayLabel(label, cell) : label,
+  });
+};
+
 const buildPreferenceCellValue = (cell: PreferenceCell): string => {
   if (cell.kind === "category") {
     const selected = props.modelValue.find(
@@ -352,7 +366,6 @@ const buildPreferenceCellValue = (cell: PreferenceCell): string => {
 };
 
 const openPreferenceDrawer = (cell: PreferenceCell) => {
-  drawerCustomTagMessage.value = null;
   activeDrawerCell.value = cell;
   const nextCategoryMap: Record<string, string | null> = {};
   const nextUncategorized: string[] = [];
@@ -369,17 +382,12 @@ const openPreferenceDrawer = (cell: PreferenceCell) => {
   drawerSelectedCategoryMap.value = nextCategoryMap;
   drawerSelectedUncategorizedLabels.value = [...nextUncategorized];
   drawerCustomTags.value = [...localCustomTags.value];
-  drawerCustomTagEditing.value = false;
-  drawerCustomTagInput.value = "";
   preferenceDrawerOpen.value = true;
 };
 
 const closePreferenceDrawer = () => {
   preferenceDrawerOpen.value = false;
   activeDrawerCell.value = null;
-  drawerCustomTagEditing.value = false;
-  drawerCustomTagInput.value = "";
-  drawerCustomTagMessage.value = null;
 };
 
 const handlePreferenceDrawerClose = async ({
@@ -440,30 +448,6 @@ const handleSelectDrawerTag = (label: string) => {
   handleToggleDrawerUncategorizedTag(label);
 };
 
-const drawerCustomTagKeys = computed(
-  () =>
-    new Set(
-      drawerCustomTags.value.map((tag) =>
-        tag.label.trim().toLocaleLowerCase("zh-CN"),
-      ),
-    ),
-);
-
-const isDrawerCustomTag = (label: string): boolean =>
-  drawerCustomTagKeys.value.has(label.trim().toLocaleLowerCase("zh-CN"));
-
-const openCustomTagDraft = () => {
-  drawerCustomTagMessage.value = null;
-  drawerCustomTagInput.value = "";
-  drawerCustomTagEditing.value = true;
-};
-
-const cancelCustomTagDraft = () => {
-  drawerCustomTagInput.value = "";
-  drawerCustomTagMessage.value = null;
-  drawerCustomTagEditing.value = false;
-};
-
 const buildCustomTagLabelForActiveCell = (value: string): string | null => {
   const cell = activeDrawerCell.value;
   if (!cell) {
@@ -523,28 +507,32 @@ const removeDrawerSelection = (label: string) => {
 };
 
 const handleRemoveCustomTag = (label: string) => {
-  const key = label.trim().toLocaleLowerCase("zh-CN");
+  const key = normalizeTagKey(label);
   drawerCustomTags.value = drawerCustomTags.value.filter(
-    (tag) => tag.label.trim().toLocaleLowerCase("zh-CN") !== key,
+    (tag) => normalizeTagKey(tag.label) !== key,
   );
   removeDrawerSelection(label);
 };
 
-const handleAddCustomTag = () => {
-  drawerCustomTagMessage.value = null;
-  const normalized = buildCustomTagLabelForActiveCell(
-    drawerCustomTagInput.value,
-  );
+const handleRemoveCustomTagFromInput = (
+  _label: string,
+  remove: (event: MouseEvent) => void,
+  event: MouseEvent,
+): void => {
+  event.stopPropagation();
+  remove(event);
+};
+
+const handleAddCustomTag = (value: string) => {
+  const normalized = buildCustomTagLabelForActiveCell(value);
   if (!normalized) {
     return;
   }
 
   const knownLabels = new Set(
-    [...drawerEffectiveTags.value, ...drawerCustomTags.value].map((tag) =>
-      tag.label.trim().toLocaleLowerCase("zh-CN"),
-    ),
+    drawerEffectiveTags.value.map((tag) => normalizeTagKey(tag.label)),
   );
-  const key = normalized.toLocaleLowerCase("zh-CN");
+  const key = normalizeTagKey(normalized);
   if (!knownLabels.has(key)) {
     const tag = {
       id: -Date.now(),
@@ -555,8 +543,6 @@ const handleAddCustomTag = () => {
   }
 
   selectCustomLabel(normalized);
-  drawerCustomTagInput.value = "";
-  drawerCustomTagEditing.value = false;
 };
 
 const handleSavePreferenceDrawer = async () => {
@@ -568,15 +554,10 @@ const handleSavePreferenceDrawer = async () => {
   ];
 
   const existingLocalKeys = new Set(
-    localCustomTags.value.map((tag) =>
-      tag.label.trim().toLocaleLowerCase("zh-CN"),
-    ),
+    localCustomTags.value.map((tag) => normalizeTagKey(tag.label)),
   );
   const newCustomLabels = drawerCustomTags.value
-    .filter(
-      (tag) =>
-        !existingLocalKeys.has(tag.label.trim().toLocaleLowerCase("zh-CN")),
-    )
+    .filter((tag) => !existingLocalKeys.has(normalizeTagKey(tag.label)))
     .map((tag) => tag.label);
 
   localCustomTags.value = [...drawerCustomTags.value];
@@ -623,131 +604,8 @@ const handleSavePreferenceDrawer = async () => {
   gap: var(--sys-spacing-medium);
 }
 
-.preference-group__title {
+.preference-custom-field {
   margin: 0;
-  @include mx.pu-font(section);
-}
-
-.preference-group__list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--sys-spacing-small);
-}
-
-.tag-pill {
-  display: inline-flex;
-  align-items: stretch;
-  gap: calc(var(--sys-spacing-xsmall) / 2);
-  min-width: calc(
-    calc(
-        var(--sys-spacing-large) + var(--sys-spacing-small) +
-          var(--sys-spacing-xsmall)
-      ) +
-      var(--sys-spacing-large)
-  );
-  border: 1px solid var(--sys-color-outline-variant);
-  border-radius: var(--sys-radius-pill);
-  background: var(--sys-color-surface);
-  color: var(--sys-color-on-surface);
-  text-align: left;
-  transition:
-    border-color 180ms ease,
-    background-color 180ms ease,
-    transform 180ms ease;
-}
-
-.tag-pill--selected {
-  border-color: var(--sys-color-primary);
-  background: var(--sys-color-primary-container);
-}
-
-.tag-pill--add,
-.tag-pill--draft {
-  align-items: center;
-  gap: var(--sys-spacing-xsmall);
-  min-height: var(--sys-spacing-large);
-  padding: var(--sys-spacing-xsmall) var(--sys-spacing-medium);
-}
-
-.tag-pill--add {
-  justify-content: center;
-  border-color: var(--sys-color-secondary);
-  background: var(--sys-color-secondary-container);
-  color: var(--sys-color-on-secondary-container);
-  cursor: pointer;
-}
-
-.tag-pill--draft {
-  border-color: var(--sys-color-secondary);
-  background: var(--sys-color-secondary-container);
-  color: var(--sys-color-on-secondary-container);
-}
-
-.tag-pill__body {
-  display: inline-flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-  align-items: center;
-  justify-content: center;
-  gap: var(--sys-spacing-xsmall);
-  min-width: 0;
-  padding: var(--sys-spacing-small);
-  border: 0;
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  text-align: center;
-}
-
-.tag-pill--removable .tag-pill__body {
-  padding-right: calc(var(--sys-spacing-xsmall) / 2);
-}
-
-.tag-pill__label {
-  @include mx.pu-font(control);
-}
-
-.tag-pill__plus {
-  color: inherit;
-  @include mx.pu-icon(small, true);
-}
-
-.tag-pill__close {
-  color: inherit;
-  @include mx.pu-icon(small, true);
-}
-
-.tag-pill__input {
-  width: min(12rem, 20vw);
-  min-width: 7rem;
-  border: 0;
-  outline: none;
-  background: transparent;
-  color: inherit;
-  @include mx.pu-font(body);
-}
-
-.tag-pill__remove {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  align-self: center;
-  width: 1.75rem;
-  height: 1.75rem;
-  border: 0;
-  border-radius: 999px;
-  background: transparent;
-  color: currentColor;
-  cursor: pointer;
-}
-
-.tag-pill__remove:hover {
-  background: var(--sys-color-surface-container-high);
-}
-
-.tag-pill__remove :deep([class^="i-"]),
-.tag-pill__remove :deep([class*=" i-"]) {
-  @include mx.pu-icon(small);
 }
 
 .drawer-actions {
@@ -769,13 +627,4 @@ const handleSavePreferenceDrawer = async () => {
   white-space: pre-line;
   @include mx.pu-font(body);
 }
-
-.inline-message {
-  margin: 0;
-  @include mx.pu-font(support);
-}
-
-.inline-message--error {
-  color: var(--sys-color-error);
-}
 </style>
diff --git a/apps/frontend/src/domains/pr/ui/forms/NLPRForm.vue b/apps/frontend/src/domains/pr/ui/forms/NLPRForm.vue
index 9e30f24c4..b51eaa4b4 100644
--- a/apps/frontend/src/domains/pr/ui/forms/NLPRForm.vue
+++ b/apps/frontend/src/domains/pr/ui/forms/NLPRForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <form class="nl-form" @submit.prevent="onSubmit">
+  <PuForm class="nl-form" @submit="onSubmit">
     <Field name="rawText" v-slot="{ field, errors }">
       <div class="nl-field">
         <PuTextarea
@@ -8,9 +8,9 @@
           @update:model-value="field.onChange"
           :disabled="isSubmitting"
           :placeholder="placeholderText"
-          ::maxlength="120"
+          :maxlength="120"
           show-count
-          />
+        />
         <div class="nl-actions">
           <button
             v-if="isVoiceSupported"
@@ -50,7 +50,7 @@
       :message="submitErrorMessage"
       @close="createMutation.reset()"
     />
-  </form>
+  </PuForm>
 </template>
 
 <script setup lang="ts">
@@ -65,7 +65,13 @@ import { useLandingRotatingTopic } from "@/domains/landing/use-cases/useLandingR
 import { ensureAuthSessionBootstrapped } from "@/processes/auth/useAuthSessionBootstrap";
 import { useNaturalLanguageDraftStore } from "@/domains/pr/use-cases/useNaturalLanguageDraft";
 import { useWeChatVoiceInput } from "@/shared/wechat/useWeChatVoiceInput";
-import { PuButton, PuInlineNotice, PuLoadingState, PuTextarea } from "@partner-up-dev/design-web";
+import {
+  PuButton,
+  PuForm,
+  PuInlineNotice,
+  PuLoadingState,
+  PuTextarea,
+} from "@partner-up-dev/design-web";
 
 const getLocalWeekdayLabel = (date: Date): string => {
   return new Intl.DateTimeFormat(undefined, {
diff --git a/apps/frontend/src/domains/pr/ui/forms/PREditor.vue b/apps/frontend/src/domains/pr/ui/forms/PREditor.vue
index 6a3b350db..f850c6529 100644
--- a/apps/frontend/src/domains/pr/ui/forms/PREditor.vue
+++ b/apps/frontend/src/domains/pr/ui/forms/PREditor.vue
@@ -124,34 +124,19 @@
             />
           </div>
 
-          <div v-if="canEditPreferences" class="form-field">
-            <label>{{ t("partnerRequestForm.preferences") }}</label>
-            <div class="tags-input">
-              <div class="tags">
-                <span
-                  v-for="(pref, index) in preferencesModel"
-                  :key="index"
-                  class="tag"
-                >
-                  {{ pref }}
-                  <button
-                    type="button"
-                    class="remove-tag"
-                    @click="removePreference(index)"
-                  >
-                    {{ t("partnerRequestForm.removePreference") }}
-                  </button>
-                </span>
-              </div>
-              <input
-                v-model="newPreference"
-                type="text"
-                data-testid="pr-editor.form.preference-input"
-                :placeholder="t('partnerRequestForm.preferencesPlaceholder')"
-                @keydown.enter.prevent="addPreference"
-              />
-            </div>
-          </div>
+          <PuFormItem
+            v-if="canEditPreferences"
+            class="form-field"
+            :label="t('partnerRequestForm.preferences')"
+          >
+            <PuChipInput
+              v-model="preferencesInput"
+              data-testid="pr-editor.form.preference-input"
+              :placeholder="t('partnerRequestForm.preferencesPlaceholder')"
+              :remove-label="t('partnerRequestForm.removePreference')"
+              shape="pill"
+            />
+          </PuFormItem>
 
           <div v-if="canEditNotes" class="form-field">
             <label>{{ t("partnerRequestForm.notes") }}</label>
@@ -214,8 +199,10 @@ import { trackEvent } from "@/shared/telemetry/track";
 import { formatLocalDateTimeWindowLabel } from "@/shared/datetime/formatLocalDateTime";
 import {
   PuButton,
+  PuChipInput,
   PuDialog,
   PuEmptyState,
+  PuFormItem,
   PuInlineNotice,
   PuLoadingState,
 } from "@partner-up-dev/design-web";
@@ -439,6 +426,13 @@ const notesInput = computed({
   },
 });
 
+const preferencesInput = computed({
+  get: () => preferencesModel.value ?? [],
+  set: (value: string[]) => {
+    preferencesModel.value = value;
+  },
+});
+
 const minPartnersInput = computed(() =>
   values.fields.minPartners === null ? "" : String(values.fields.minPartners),
 );
@@ -456,19 +450,6 @@ const onMaxPartnersInput = (event: Event) => {
   setFieldValue("fields.maxPartners", parseNullableNumber(value));
 };
 
-const newPreference = ref("");
-
-const addPreference = () => {
-  const pref = newPreference.value.trim();
-  if (!pref || preferencesModel.value.includes(pref)) return;
-  preferencesModel.value = [...preferencesModel.value, pref];
-  newPreference.value = "";
-};
-
-const removePreference = (index: number) => {
-  preferencesModel.value = preferencesModel.value.filter((_, i) => i !== index);
-};
-
 const timeHint = computed(() => {
   const range = prDetail.value?.editCapability.constraints.timeWindow;
   if (!range) return "";
diff --git a/apps/frontend/src/domains/pr/ui/forms/PRForm.scss b/apps/frontend/src/domains/pr/ui/forms/PRForm.scss
index 8d02abece..b03bd1b67 100644
--- a/apps/frontend/src/domains/pr/ui/forms/PRForm.scss
+++ b/apps/frontend/src/domains/pr/ui/forms/PRForm.scss
@@ -62,56 +62,6 @@
   margin-bottom: var(--sys-spacing-medium);
 }
 
-.tags-input {
-  width: 100%;
-  padding: var(--sys-spacing-xsmall);
-  border: 1px solid var(--sys-color-outline);
-  border-radius: var(--sys-radius-small);
-  color: var(--sys-color-on-surface);
-  background: var(--sys-color-surface-container);
-
-  &:focus-within {
-    outline: 2px solid var(--sys-color-primary);
-    outline-offset: -1px;
-  }
-
-  .tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--sys-spacing-xsmall);
-    margin-bottom: var(--sys-spacing-xsmall);
-  }
-
-  .tag {
-    @include mx.pu-font(caption);
-    display: inline-flex;
-    align-items: center;
-    gap: var(--sys-spacing-xsmall);
-    padding: var(--sys-spacing-xsmall);
-    background: var(--sys-color-primary-container);
-    color: var(--sys-color-on-primary-container);
-    border-radius: var(--sys-radius-small);
-  }
-
-  input {
-    border: none;
-    background: none;
-    padding: var(--sys-spacing-xsmall);
-    width: 100%;
-
-    &:focus {
-      outline: none;
-    }
-  }
-}
-
-.remove-tag {
-  background: none;
-  border: none;
-  color: inherit;
-  cursor: pointer;
-}
-
 .error-message {
   display: block;
   margin-top: var(--sys-spacing-xsmall);
diff --git a/apps/frontend/src/domains/pr/ui/forms/PRJoinGateConfigEditor.vue b/apps/frontend/src/domains/pr/ui/forms/PRJoinGateConfigEditor.vue
index dc8768b32..2cbc71401 100644
--- a/apps/frontend/src/domains/pr/ui/forms/PRJoinGateConfigEditor.vue
+++ b/apps/frontend/src/domains/pr/ui/forms/PRJoinGateConfigEditor.vue
@@ -43,38 +43,38 @@
       </div>
 
       <div class="join-gate-row__grid">
-        <label class="field">
-          <span class="field-label">key</span>
-          <input
-            class="field-input"
-            :value="gate.key"
-            @input="updateGateKey(index, $event)"
+        <PuFormItem label="key">
+          <PuInput
+            :model-value="gate.key"
+            @update:model-value="(value) => updateGateKey(index, value)"
           />
-        </label>
-        <label class="field">
-          <span class="field-label">version</span>
-          <input
-            class="field-input"
-            :value="gate.version"
-            @input="updateGateVersion(index, $event)"
+        </PuFormItem>
+
+        <PuFormItem label="version">
+          <PuInput
+            :model-value="gate.version"
+            @update:model-value="(value) => updateGateVersion(index, value)"
+          />
+        </PuFormItem>
+
+        <PuFormItem label="标题" class="field--full">
+          <PuInput
+            :model-value="gate.title"
+            @update:model-value="(value) => updateGateTitle(index, value)"
           />
-        </label>
-        <label class="field field--full">
-          <span class="field-label">标题</span>
-          <input
-            class="field-input"
-            :value="gate.title"
-            @input="updateGateTitle(index, $event)"
+        </PuFormItem>
+
+        <PuFormItem
+          v-if="gate.kind === 'JOIN_NOTICE'"
+          label="须知正文"
+          class="field--full"
+        >
+          <PuTextarea
+            :model-value="gate.body"
+            rows="5"
+            @update:model-value="(value) => updateJoinNoticeBody(index, value)"
           />
-        </label>
-        <label v-if="gate.kind === 'JOIN_NOTICE'" class="field field--full">
-          <span class="field-label">须知正文</span>
-          <textarea
-            class="field-input field-textarea"
-            :value="gate.body"
-            @input="updateJoinNoticeBody(index, $event)"
-          ></textarea>
-        </label>
+        </PuFormItem>
       </div>
     </article>
   </section>
@@ -88,7 +88,12 @@ import type {
   PRJoinGateSource,
   PRJoinNoticeGateConfig,
 } from "@partner-up-dev/backend";
-import { PuButton } from "@partner-up-dev/design-web";
+import {
+  PuButton,
+  PuFormItem,
+  PuInput,
+  PuTextarea,
+} from "@partner-up-dev/design-web";
 
 const props = defineProps<{
   modelValue: PRJoinGateConfig;
@@ -103,11 +108,6 @@ const normalizedGates = computed(() =>
   props.modelValue.map((gate) => normalizeGateSource(gate)),
 );
 
-const readInputValue = (event: Event): string => {
-  const target = event.target as HTMLInputElement | HTMLTextAreaElement | null;
-  return target?.value ?? "";
-};
-
 const normalizeGateSource = (
   gate: PRJoinGateConfigItem,
 ): PRJoinGateConfigItem => {
@@ -131,39 +131,39 @@ const updateGateAt = (index: number, gate: PRJoinGateConfigItem): void => {
   commit(next);
 };
 
-const updateGateKey = (index: number, event: Event): void => {
+const updateGateKey = (index: number, value: string): void => {
   const gate = normalizedGates.value[index];
   if (!gate) return;
   updateGateAt(index, {
     ...gate,
-    key: readInputValue(event),
+    key: value,
   });
 };
 
-const updateGateVersion = (index: number, event: Event): void => {
+const updateGateVersion = (index: number, value: string): void => {
   const gate = normalizedGates.value[index];
   if (!gate) return;
   updateGateAt(index, {
     ...gate,
-    version: readInputValue(event),
+    version: value,
   });
 };
 
-const updateGateTitle = (index: number, event: Event): void => {
+const updateGateTitle = (index: number, value: string): void => {
   const gate = normalizedGates.value[index];
   if (!gate) return;
   updateGateAt(index, {
     ...gate,
-    title: readInputValue(event),
+    title: value,
   });
 };
 
-const updateJoinNoticeBody = (index: number, event: Event): void => {
+const updateJoinNoticeBody = (index: number, value: string): void => {
   const gate = normalizedGates.value[index];
   if (!gate || gate.kind !== "JOIN_NOTICE") return;
   updateGateAt(index, {
     ...gate,
-    body: readInputValue(event),
+    body: value,
   });
 };
 
@@ -187,8 +187,7 @@ const removeGate = (index: number): void => {
 
 <style lang="scss" scoped>
 .join-gate-editor,
-.join-gate-row,
-.field {
+.join-gate-row {
   display: flex;
   flex-direction: column;
 }
@@ -237,30 +236,7 @@ const removeGate = (index: number): void => {
   gap: var(--sys-spacing-small);
 }
 
-.field {
-  gap: var(--sys-spacing-xsmall);
-}
-
 .field--full {
   grid-column: 1 / -1;
 }
-
-.field-label {
-  @include mx.pu-font(control);
-  color: var(--sys-color-on-surface-variant);
-}
-
-.field-input {
-  width: 100%;
-  padding: var(--sys-spacing-small);
-  border: 1px solid var(--sys-color-outline-variant);
-  border-radius: var(--sys-radius-small);
-  background: var(--sys-color-surface);
-  color: var(--sys-color-on-surface);
-}
-
-.field-textarea {
-  min-height: 112px;
-  resize: vertical;
-}
 </style>
diff --git a/apps/frontend/src/domains/pr/ui/forms/UpdatePRStatusForm.vue b/apps/frontend/src/domains/pr/ui/forms/UpdatePRStatusForm.vue
index 7ca88b903..5f3f52ab0 100644
--- a/apps/frontend/src/domains/pr/ui/forms/UpdatePRStatusForm.vue
+++ b/apps/frontend/src/domains/pr/ui/forms/UpdatePRStatusForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <form :id="formId" class="status-form" @submit.prevent="submitForm">
+  <PuForm :id="formId" class="status-form" @submit="submitForm">
     <PuCard
       v-for="status in statusOptions"
       :key="status.value"
@@ -14,14 +14,14 @@
     >
       {{ status.label }}
     </PuCard>
-  </form>
+  </PuForm>
 </template>
 
 <script setup lang="ts">
 import { ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import type { PRStatusManual } from "@partner-up-dev/backend";
-import { PuCard } from "@partner-up-dev/design-web";
+import { PuCard, PuForm } from "@partner-up-dev/design-web";
 
 type StatusOption = {
   value: PRStatusManual;
diff --git a/apps/frontend/src/pages/AdminAnalyticsPage.vue b/apps/frontend/src/pages/AdminAnalyticsPage.vue
index f6c3c98eb..14160974c 100644
--- a/apps/frontend/src/pages/AdminAnalyticsPage.vue
+++ b/apps/frontend/src/pages/AdminAnalyticsPage.vue
@@ -89,16 +89,11 @@
           :label="t('adminAnalytics.renderedModeLabel')"
           for-id="analytics-mode"
         >
-          <select
+          <PuSelect
             id="analytics-mode"
-            v-model="draftRenderedMode"
-            class="analytics-input"
-          >
-            <option value="">{{ t("adminAnalytics.allModesOption") }}</option>
-            <option v-for="mode in modeOptions" :key="mode" :value="mode">
-              {{ formatMode(mode) }}
-            </option>
-          </select>
+            v-model="draftRenderedModeModel"
+            :options="renderedModeOptions"
+          />
         </PuFormItem>
 
         <PuInlineNotice
@@ -853,7 +848,10 @@ import {
   PuInlineNotice,
   PuInput,
   PuLoadingState,
+  PuSelect,
   PuTag,
+  type PuSelectOption,
+  type PuSelectValue,
 } from "@partner-up-dev/design-web";
 
 type ModeComparisonRow = AdminAnalyticsFunnelResponse["modes"][number];
@@ -957,6 +955,27 @@ const filterError = ref<string | null>(null);
 const focusedMode = ref<AnchorEventAnalyticsRenderedMode | null>(null);
 const refreshPending = ref(false);
 
+const isRenderedMode = (
+  value: PuSelectValue,
+): value is AnchorEventAnalyticsRenderedMode =>
+  typeof value === "string" &&
+  modeOptions.includes(value as AnchorEventAnalyticsRenderedMode);
+
+const renderedModeOptions = computed<PuSelectOption[]>(() => [
+  { label: t("adminAnalytics.allModesOption"), value: "" },
+  ...modeOptions.map((mode) => ({
+    label: formatMode(mode),
+    value: mode,
+  })),
+]);
+
+const draftRenderedModeModel = computed({
+  get: () => draftRenderedMode.value,
+  set: (value: PuSelectValue) => {
+    draftRenderedMode.value = isRenderedMode(value) ? value : "";
+  },
+});
+
 const appliedQuery = ref<AdminAnalyticsFunnelQuery>({
   startAt: parseLocalInputValue(defaultRange.startAt)?.toISOString(),
   endAt: parseLocalInputValue(defaultRange.endAt)?.toISOString(),
@@ -1456,23 +1475,6 @@ const formatFailureKey = (row: FailureBreakdownRow): string =>
   color: var(--sys-color-on-surface-variant);
 }
 
-.analytics-input {
-  @include mx.pu-font(body);
-  width: 100%;
-  min-height: calc(var(--sys-spacing-large) + var(--sys-spacing-small) + var(--sys-spacing-xsmall));
-  min-width: 0;
-  padding: var(--sys-spacing-small);
-  border: 1px solid var(--sys-color-outline);
-  border-radius: var(--sys-radius-small);
-  background: var(--sys-color-surface-container-lowest);
-  color: var(--sys-color-on-surface);
-}
-
-.analytics-input:focus {
-  outline: 2px solid var(--sys-color-primary);
-  outline-offset: 1px;
-}
-
 .analytics-filter-rail__actions {
   gap: var(--sys-spacing-small);
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 32ad92127..3a35248c9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -122,8 +122,8 @@ importers:
   apps/frontend:
     dependencies:
       '@partner-up-dev/design-web':
-        specifier: 0.4.1
-        version: 0.4.1(sass@1.97.3)(unocss@66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)))(vue@3.5.35(typescript@6.0.3))
+        specifier: 0.4.3
+        version: 0.4.3(sass@1.97.3)(unocss@66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)))(vue@3.5.35(typescript@6.0.3))
       '@tanstack/vue-query':
         specifier: ^5.60.0
         version: 5.92.9(vue@3.5.35(typescript@6.0.3))
@@ -1187,8 +1187,8 @@ packages:
     resolution: {integrity: sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==}
     engines: {node: '>= 10.0.0'}
 
-  '@partner-up-dev/design-web@0.4.1':
-    resolution: {integrity: sha512-V6dAcfeNUT9J3iLaY9/HzGUHz8LM83E58HCyoBMg2mqyxeIwjK/Bt8+UqhCU1UaqPCItjLpRiwbroxplZOYSDw==, tarball: https://npm.pkg.github.com/download/@partner-up-dev/design-web/0.4.1/ff09e419f3df2e636b8f41962e78e5e53e83e5a7}
+  '@partner-up-dev/design-web@0.4.3':
+    resolution: {integrity: sha512-0cDaq2zgd2b+d6Mtw/1As8P8oemLEqx8SgH3mzMzaJwmFPx32VyP34hEbKRrEuwyUqyN+kmsDp7zt7Pjz8VHMA==, tarball: https://npm.pkg.github.com/download/@partner-up-dev/design-web/0.4.3/2f9e64e2a0e285086a4fe8f73c8c218c58c4c513}
     peerDependencies:
       sass: ^1.94.2
       unocss: ^66.6.8
@@ -3379,7 +3379,7 @@ snapshots:
       '@parcel/watcher-win32-x64': 2.5.6
     optional: true
 
-  '@partner-up-dev/design-web@0.4.1(sass@1.97.3)(unocss@66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)))(vue@3.5.35(typescript@6.0.3))':
+  '@partner-up-dev/design-web@0.4.3(sass@1.97.3)(unocss@66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)))(vue@3.5.35(typescript@6.0.3))':
     dependencies:
       sass: 1.97.3
       unocss: 66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0))
diff --git a/tasks/design-web-package-integration/deep-ui-refactor/20-slice-plan.md b/tasks/design-web-package-integration/deep-ui-refactor/20-slice-plan.md
index 18c840aa4..072e17f1b 100644
--- a/tasks/design-web-package-integration/deep-ui-refactor/20-slice-plan.md
+++ b/tasks/design-web-package-integration/deep-ui-refactor/20-slice-plan.md
@@ -84,10 +84,11 @@ Primary risk:
 
 Status: in progress. First 0.4.1-enabled datetime cleanup completed, and first
 low-risk field-control group implemented. Detailed field-control lane planning
-lives in `40-slice3-field-control-plan.md`; package-side capability needs live
-in `50-form-capability-needs.md`.
+lives in `40-slice3-field-control-plan.md`; the 0.4.3 reassessment lives in
+`45-slice3-0.4.3-reassessment.md`; package-side capability needs live in
+`50-form-capability-needs.md`.
 
-Scope:
+Original scope:
 
 - Replace eligible text, URL, email, tel, search, number, password,
   datetime-local, and textarea controls with `PuFormItem` +
@@ -96,12 +97,24 @@ Scope:
 - Avoid local field CSS clones such as `field-input`, `pm-field-input`,
   `analytics-input`, and `text-area` where package controls cover the intent.
 
-Still out of scope for this slice by default:
+0.4.3 uplift:
+
+- `PuNumberInput` now covers `number | null` app state plus min/max/step.
+- `PuSelect` now covers dense web-native single selection.
+- `PuInput` now explicitly documents native `list` forwarding.
+- `PuTextarea` now explicitly documents `rows`, `form`, and `change`.
+- `PuForm` now documents native attributes and external submit support.
+- `PuChipInput` now covers plain editable string-array token input.
+
+Current direction:
 
-- Native `select` and datalist-backed controls unless the product accepts a
-  `PuPicker` interaction.
-- Broad `PuForm` adoption unless a specific form can use package
-  schema/validation and submit semantics directly.
+- Native `select`, datalist-backed controls, and nullable numeric fields are no
+  longer globally deferred.
+- Continue batching by usage boundary. Do not do one broad raw-control sweep.
+- Keep multi-select, option groups, async/custom select rendering, and
+  non-plain tag editors out of low-risk sub-slices.
+- The first 0.4.3 implementation pass is recorded in
+  `46-slice3-0.4.3-implementation.md`.
 
 0.4.1 uplift already applied:
 
@@ -110,6 +123,27 @@ Still out of scope for this slice by default:
 - `PRFilterRail.vue`, `AdminPRBasicView.vue`, and `PoiBasicSection.vue`
   datetime-local fields use direct `PuInput`.
 
+0.4.3 recommended next sub-slices:
+
+- Slice 3B: select and datalist rebaseline with `PuSelect` and `PuInput list`.
+- Slice 3C: numeric field cleanup with `PuNumberInput`.
+- Slice 3D: `PuForm` boundary cleanup where native form identity and external
+  submit behavior are preserved.
+- Slice 3E: plain editable token input cleanup with `PuChipInput`, starting
+  with PR editor preferences if the interaction contract is confirmed.
+
+0.4.3 implementation notes:
+
+- Completed the bounded Slice 3B select/datalist group.
+- Completed the bounded Slice 3C Anchor Event numeric group.
+- Completed the small Slice 3D `PuForm` boundaries for `NLPRForm.vue` and
+  `UpdatePRStatusForm.vue`, plus direct field-control migration for
+  `PRJoinGateConfigEditor.vue`.
+- Completed Slice 3E for the plain `PREditor.vue` preferences tag input.
+- Deferred `InlineNLPRForm.vue`, broad `PREditor.vue` field migration,
+  `FormModePreferenceControl.vue`, and larger admin commerce/payment form
+  groups.
+
 ## Slice 4: Read-Only Display Cleanup
 
 Status: candidate.
@@ -197,3 +231,85 @@ Implementation notes:
   status, PR roster display labels, Anchor Event demand-card labels, and PR
   facts roster overflow marker to direct `PuTag`, `PuChip`, or `PuChipGroup`.
 - Deleted the local `PRStatusBadge` wrapper.
+
+## Slice 9: Form Mode Preference Composition Pilot
+
+Status: completed.
+
+Scope:
+
+- Treat `FormModePreferenceControl.vue` as the first composition-based
+  migration rather than another one-to-one replacement.
+- Compose the drawer from direct package primitives:
+  `PuCell`, `PuDrawer`, `PuChipGroup`, `PuChip`, `PuChipInput`,
+  `PuInlineNotice`, and `PuButton`.
+- Replace local `tag-pill*` and `inline-message*` ownership with package
+  components.
+- Keep the domain interaction contract explicit: one selected tag per
+  category, multiple uncategorized selections, custom tag normalization,
+  mutation submission for new custom labels, and unchanged
+  `update:modelValue` output.
+
+Planning notes:
+
+- Detailed packet lives in `80-form-mode-preference-composition.md`.
+- `PuChipInput` should own the custom preference entry subset, not the whole
+  curated option selector. Package docs still defer suggestions and custom
+  listbox behavior.
+- Treat the implementation as a pilot. Record what package composition
+  generalized, what still required domain-owned state, and what should inform
+  Slice 10.
+
+Implementation notes:
+
+- Migrated `FormModePreferenceControl.vue` to direct `PuChipGroup`, `PuChip`,
+  `PuChipInput`, `PuFormItem`, and `PuInlineNotice` composition.
+- Preset preference candidates now render as selectable package chips.
+- Custom preference entry is now a `PuChipInput` lane with chip-slot
+  composition for selectable/removable custom values.
+- Removed local `tag-pill*`, `inline-message*`, and draft-input state.
+- Kept category selection, uncategorized selection, label normalization, and
+  custom-tag submission as domain-owned logic.
+
+Verification:
+
+- Passed `pnpm --filter @partner-up-dev/frontend build`.
+- Passed `pnpm --filter @partner-up-dev/frontend lint:tokens`.
+- Passed `pnpm test:unit:frontend`.
+- Passed targeted source scan for old `FormModePreferenceControl` local pill
+  and inline-message symbols.
+- Passed `git diff --check`.
+
+## Slice 10: Composition Pattern Rollout
+
+Status: candidate.
+
+Scope:
+
+- Use the actual Slice 9 implementation evidence to identify other components
+  that need composition-plus-refactor rather than one-to-one replacement.
+- Focus on surfaces that mix local UI primitives, package-eligible containers,
+  product state, and repeated display/form structures.
+- Implement follow-up candidates one at a time; do not turn this into a broad
+  raw-field or passive badge sweep.
+
+Initial candidates:
+
+- `InlineNLPRForm.vue`: compact high-signal candidate for `PuForm` +
+  `PuFormItem` + `PuInput` + icon `PuButton` + `PuInlineNotice`.
+- `PRPartnerSection.vue`: section-level content/container split with
+  `PuCard`, facts/summary composition, notices, and direct actions.
+- `PRFactsCard.vue`, `AdminNavigationPanel.vue`, and
+  `FormModeNoMatchResult.vue`: medium-confidence candidates that need a short
+  topology note before implementation.
+
+Planning notes:
+
+- Detailed rollout packet lives in `90-composition-pattern-rollout.md`.
+- Gesture-heavy surfaces such as the full Form Mode surface still require
+  topology mapping before production edits.
+- `AdminCommerceSpuEditor.vue` is explicitly out of Slice 10.
+- With `AdminCommerceSpuEditor.vue` out of scope, no current Slice 10
+  candidate should plan around `PuChipInput`; remaining candidates use
+  `PuInput`, `PuButton`, `PuInlineNotice`, `PuCard`, `PuDescriptionList`,
+  `PuCellGroup`, `PuChip`, or `PuChipGroup` according to their semantics.
diff --git a/tasks/design-web-package-integration/deep-ui-refactor/40-slice3-field-control-plan.md b/tasks/design-web-package-integration/deep-ui-refactor/40-slice3-field-control-plan.md
index 65c6cacce..be072b0e3 100644
--- a/tasks/design-web-package-integration/deep-ui-refactor/40-slice3-field-control-plan.md
+++ b/tasks/design-web-package-integration/deep-ui-refactor/40-slice3-field-control-plan.md
@@ -8,6 +8,29 @@ with domain-specific validation, native `select`, datalist, route pickers,
 dynamic arrays, and submit lifecycle. Treat this as a sequence of smaller
 field-control slices.
 
+## 0.4.3 Reassessment
+
+`@partner-up-dev/design-web@0.4.3` changes the Slice 3 boundary materially.
+The detailed reassessment lives in `45-slice3-0.4.3-reassessment.md`.
+
+Newly viable package APIs:
+
+- `PuNumberInput` for numeric app state, including `number | null`, `min`,
+  `max`, and `step`.
+- `PuSelect` for dense web-native single selection.
+- `PuInput` with documented native `list` forwarding for datalist-backed
+  free-text fields.
+- `PuTextarea` with documented `rows`, `form`, and `change`.
+- `PuForm` with documented native form attributes and external submit support.
+- `PuChipInput` for plain editable string-array token input.
+
+Implication:
+
+- Native `select`, datalist-backed fields, and numeric fields are no longer
+  deferred by default.
+- They still need bounded sub-slices because many remaining controls live in
+  large editor forms or dynamic admin DSL editors.
+
 ## Current Evidence
 
 Read-only scans on 2026-06-14 found raw `input`/`textarea` controls in these
@@ -40,6 +63,12 @@ Use direct package fields:
   date, time, and datetime-local.
 - `PuTextarea` for multiline text.
 
+0.4.3 adjustment:
+
+- Use `PuNumberInput`, not `PuInput`, for numeric app state.
+- Use `PuInput list` for datalist-backed free-text suggestions.
+- Use `PuTextarea rows` for low-risk native textarea sizing.
+
 Good first targets:
 
 - `AdminPRMessagesView.vue`: only textareas, low interaction complexity.
@@ -59,10 +88,54 @@ Rules:
 - Remove local `.field-input`, `.field-textarea`, `.pm-field-input`, or
   `.text-area` CSS only when all users in that component are gone.
 
-## Lane B: PuForm Containers
+## Lane B: Select And Datalist Controls
+
+Use direct package controls:
+
+- `PuSelect` for fixed one-of-many choices.
+- `PuInput` with native `list` forwarding for free text plus suggestions.
 
-`PuForm` is now viable because `0.4.1` documents a `submit` event, but it
-should be adopted only per form boundary.
+Good targets:
+
+- `AdminAnalyticsPage.vue` mode filter select.
+- `PRFilterRail.vue` type/location datalist fields and status select.
+- `AnchorEventDetailsEditor.vue` status select.
+- `AnchorEventFeedbackQuestionnairePicker.vue`.
+- `PoiSelectorRail.vue` selector/search controls.
+
+Rules:
+
+- Do not use `PuSelect` for free-text suggestions; use `PuInput list`.
+- Do not include multi-select, option groups, async option loading, or custom
+  option rendering in this lane.
+
+## Lane C: Numeric Controls
+
+Use `PuNumberInput` for numeric state.
+
+Good targets:
+
+- Revisit `AnchorEventCapacityDefaultsEditor.vue` to remove local string
+  adapters.
+- `AnchorEventLandingRolloutEditor.vue`.
+- `AnchorEventTimePoolStrategyEditor.vue`.
+- Admin commerce product/SKU/pricing/cancellation numeric fields.
+- Admin payment and ride-hailing numeric config fields.
+
+Rules:
+
+- Keep string-backed numeric-looking fields on `PuInput` when formatting must
+  be preserved exactly.
+- Batch dynamic JSON/rule-editor fields separately if they are part of a DSL
+  editing surface.
+
+## Lane D: PuForm Containers
+
+`PuForm` is now viable because the package documents `submit`, native form
+attributes, and external submit button support. It should still be adopted only
+per form boundary.
+
+Forms using `id`/external submit no longer need to be deferred for that reason.
 
 Candidate order:
 
@@ -83,13 +156,26 @@ Rules:
   component/composable.
 - Pause before changing form IDs or external button submit relationships.
 
-## Lane C: Deferred Controls
+## Lane E: Editable Token Inputs
+
+Use `PuChipInput` for plain string-array token entry.
+
+Good targets:
+
+- `PREditor.vue` preferences tags input.
+
+Needs discussion:
+
+- `FormModePreferenceControl.vue` remains a richer interaction surface with
+  drawer descriptions, curated options, custom draft creation, and removal.
+  `PuChipInput` may cover part of it, but it is not a passive or mechanical
+  replacement.
+
+## Deferred Controls
 
 Defer unless explicitly discussed:
 
-- Native `select` fields.
-- Datalist-backed fields (`list` / `:list`), because `PuInput` does not expose
-  a public `list` prop.
+- Multi-select, option-group, async-option, or custom-rendered select fields.
 - Checkbox grids and weekday selectors unless a matching package control is
   selected.
 - Dynamic JSON/rule editors where input widgets are embedded in a DSL editor.
@@ -140,3 +226,27 @@ Verification:
 - Targeted scans found no raw `<input>` or `<textarea>` in touched files.
 - Targeted field CSS scan found only the intentionally retained native status
   `select` in `AnchorEventDetailsEditor.vue`.
+
+## 0.4.3 Implementation Pass
+
+Status: implemented and verified.
+
+Detailed implementation notes live in `46-slice3-0.4.3-implementation.md`.
+
+Scope completed:
+
+- Lane B: migrated the bounded select/datalist group to `PuSelect` and
+  `PuInput list`.
+- Lane C: migrated the bounded Anchor Event numeric group to `PuNumberInput`.
+- Lane D: migrated only real small form boundaries to `PuForm`, and migrated
+  the dynamic join-gate field group to package field controls.
+- Lane E: migrated the plain `PREditor.vue` preferences string-array editor to
+  `PuChipInput`.
+
+Still deferred:
+
+- `InlineNLPRForm.vue`, because only replacing the outer form would leave the
+  custom inline input/send/voice composition untouched.
+- Broad `PREditor.vue` field migration and larger admin commerce/payment
+  forms.
+- `FormModePreferenceControl.vue`, because it is not a plain chip input.
diff --git a/tasks/design-web-package-integration/deep-ui-refactor/45-slice3-0.4.3-reassessment.md b/tasks/design-web-package-integration/deep-ui-refactor/45-slice3-0.4.3-reassessment.md
new file mode 100644
index 000000000..506bd8e87
--- /dev/null
+++ b/tasks/design-web-package-integration/deep-ui-refactor/45-slice3-0.4.3-reassessment.md
@@ -0,0 +1,184 @@
+# Slice 3 Reassessment After Design Web 0.4.3
+
+## Objective & Hypothesis
+
+Reassess Slice 3 after upgrading `@partner-up-dev/design-web` from `0.4.1`
+to `0.4.3`. The hypothesis is that 0.4.3 resolves enough form-control gaps to
+move Slice 3 beyond text/textarea cleanup into number, select, datalist,
+submit-boundary, and tag-input cleanup.
+
+## Upgrade Evidence
+
+- `pnpm view @partner-up-dev/design-web version` reports `0.4.3`.
+- `apps/frontend/package.json` now depends on
+  `@partner-up-dev/design-web@0.4.3`.
+- `pnpm-lock.yaml` resolves the GitHub Packages tarball for `0.4.3`.
+- `apps/frontend/node_modules/@partner-up-dev/design-web/package.json`
+  reports `version: 0.4.3`.
+- `dist/version.d.ts` declares `version = "0.4.3"`.
+- TanStack Intent checks passed:
+  - `pnpm dlx @tanstack/intent@latest list --json`
+  - `pnpm dlx @tanstack/intent@latest load @partner-up-dev/design-web#design-web`
+  - `pnpm dlx @tanstack/intent@latest validate apps/frontend/node_modules/@partner-up-dev/design-web/skills/design-web`
+
+## 0.4.3 Capability Delta
+
+Resolved or newly viable:
+
+- `PuNumberInput`
+  - Binds numeric app state as `number | null`.
+  - Supports `min`, `max`, and `step`.
+  - Holds invalid intermediate text locally instead of emitting misleading
+    numeric values.
+- `PuSelect`
+  - Covers web-native one-of-many selection.
+  - Supports `string | number | null` values, placeholder, clearable state,
+    and native `id` / `name` / `form` / `aria-*` forwarding.
+- `PuInput`
+  - Explicitly documents `list` forwarding for native datalist-backed
+    free-text suggestions.
+  - Emits `change` and documents `update:modelValue` as the live dirty hook.
+- `PuTextarea`
+  - Explicitly documents `rows`, `form`, `change`, and default vertical
+    resize behavior.
+- `PuForm`
+  - Explicitly documents native form attributes, submit event semantics, and
+    external submit buttons through native `form` attributes.
+- `PuChipInput`
+  - Covers editable string-array token input with removable chips and draft
+    entry.
+
+Still bounded:
+
+- `PuSelect` does not cover multi-select, option groups, async loading, or
+  custom option rendering.
+- `PuChipInput` does not cover suggestions or custom option listbox behavior.
+- `PuTextarea` does not expose minRows/maxRows; use `rows` or `autoHeight`
+  first.
+- `PuPicker` still changes the interaction model; use `PuSelect` for dense
+  web/admin selects unless a picker interaction is desired.
+
+## Slice 3 Impact
+
+The old Slice 3 split is now too conservative. Native `select`,
+datalist-backed input, and nullable numeric fields should no longer be
+globally deferred. They should move into named sub-slices with verification
+per form boundary or page cluster.
+
+Do not do one broad form sweep. The remaining raw fields are concentrated in
+large admin commerce, admin PR/POI, PR editor, event editor, and application
+flows. Many combine state normalization, dirty tracking, dynamic arrays, or
+submit lifecycle.
+
+## Recommended Next Sub-Slices
+
+### Slice 3B: Select And Datalist Rebaseline
+
+Scope:
+
+- Replace simple native enum/entity selects with `PuSelect`.
+- Replace datalist-backed free-text inputs with `PuInput` plus native
+  `list` forwarding.
+
+Good candidates:
+
+- `AdminAnalyticsPage.vue` mode filter select.
+- `PRFilterRail.vue` type/location datalist fields and status select.
+- `AnchorEventDetailsEditor.vue` status select.
+- `AnchorEventFeedbackQuestionnairePicker.vue`.
+- `PoiSelectorRail.vue` simple selector/search controls.
+
+Guardrails:
+
+- Use `PuSelect` only where option values are simple `string | number | null`.
+- Keep custom option rendering, grouped options, async option loading, and
+  multi-select out of this sub-slice.
+
+### Slice 3C: Numeric Field Cleanup
+
+Scope:
+
+- Replace nullable or constrained numeric fields with `PuNumberInput`.
+- Remove local string adapters introduced only because `PuInput` was
+  string-backed for numeric state.
+
+Good candidates:
+
+- `AnchorEventCapacityDefaultsEditor.vue` can be revisited to remove local
+  string adapters.
+- `AnchorEventLandingRolloutEditor.vue`.
+- `AnchorEventTimePoolStrategyEditor.vue`.
+- Admin commerce pricing/product/SKU/cancellation numeric fields.
+- Admin payment and ride-hailing numeric config fields.
+
+Guardrails:
+
+- Use `PuInput` only when the number is intentionally string-backed or must
+  preserve formatting exactly.
+- Keep dynamic JSON/rule editors batched separately if the field is part of a
+  DSL editor.
+
+### Slice 3D: PuForm Boundary Cleanup
+
+Scope:
+
+- Adopt `PuForm` where the component owns the real submit boundary.
+- Preserve parent-owned mutation/cache/routing side effects.
+
+Good candidates:
+
+- `UpdatePRStatusForm.vue`, because 0.4.3 explicitly supports native `id` and
+  external submit button integration.
+- `NLPRForm.vue` and `InlineNLPRForm.vue`, after checking current compact
+  submit semantics.
+- Route/location application forms, if the page-local native form can become a
+  direct package form without changing scenario-test nodes.
+
+Guardrails:
+
+- Do not wrap legacy form markup just to count migration.
+- Preserve `data-testid` on real interactive elements.
+- Pause before changing exposed `submitForm()` contracts used by parent pages.
+
+### Slice 3E: Editable Token Inputs
+
+Scope:
+
+- Use `PuChipInput` for plain string-array token entry.
+
+Good candidates:
+
+- `PREditor.vue` preferences `tags-input` is now a likely direct candidate.
+
+Needs discussion before implementation:
+
+- `FormModePreferenceControl.vue` is not a plain tag input. It owns option
+  descriptions, drawer state, selection affordances, custom draft creation,
+  and removal. `PuChipInput` may cover part of the behavior, but not the whole
+  interaction contract.
+
+## Updated Upstream Need State
+
+Resolved by 0.4.3:
+
+- Numeric model support.
+- Native numeric constraints.
+- Dense single select.
+- Native datalist forwarding.
+- Form native attributes and external submit documentation.
+- Textarea `rows` / native attribute forwarding.
+- Dirty-state event guidance for input/textarea.
+
+Still useful upstream later:
+
+- Select option groups, multi-select, async options, and custom option
+  rendering.
+- Chip input suggestions and custom option listbox behavior.
+- Textarea minRows/maxRows if fixed row count is not sufficient.
+
+## Verification For The Upgrade/Reassessment
+
+- Passed `pnpm --filter @partner-up-dev/frontend build`.
+- Passed `pnpm --filter @partner-up-dev/frontend lint:tokens`.
+- Passed `pnpm test:unit:frontend`.
+- Passed `git diff --check`.
diff --git a/tasks/design-web-package-integration/deep-ui-refactor/46-slice3-0.4.3-implementation.md b/tasks/design-web-package-integration/deep-ui-refactor/46-slice3-0.4.3-implementation.md
new file mode 100644
index 000000000..6c28eae91
--- /dev/null
+++ b/tasks/design-web-package-integration/deep-ui-refactor/46-slice3-0.4.3-implementation.md
@@ -0,0 +1,86 @@
+# Slice 3 Implementation After Design Web 0.4.3
+
+## Objective & Hypothesis
+
+Objective: use the 0.4.3 form-control APIs to complete a bounded Slice 3 pass
+without doing a broad raw-control sweep.
+
+Hypothesis: `PuSelect`, `PuNumberInput`, `PuForm`, `PuChipInput`,
+`PuInput list`, and `PuTextarea rows` can remove several local form-control
+implementations while preserving current domain state ownership and submit
+side effects.
+
+## Guardrails Touched
+
+- Use package components directly at usage sites. Do not add local UI wrappers.
+- Keep mutation, routing, validation, and dirty-state ownership in existing
+  domain components/composables.
+- Use computed adapters only for type narrowing between package value unions
+  and narrower domain models.
+- Do not migrate complex option/tag editors that need suggestions, drawers,
+  curated descriptions, multi-select, or custom option rendering.
+
+## Implemented Scope
+
+Slice 3B select and datalist rebaseline:
+
+- `AdminAnalyticsPage.vue`: rendered mode filter select -> `PuSelect`.
+- `PRFilterRail.vue`: PR type/location datalist fields -> `PuInput list`;
+  status select -> `PuSelect`.
+- `AnchorEventDetailsEditor.vue`: status select -> `PuSelect`.
+- `AnchorEventFeedbackQuestionnairePicker.vue`: template select ->
+  `PuSelect` with nullable numeric model.
+- `PoiSelectorRail.vue`: POI selector -> `PuSelect`; new POI name ->
+  `PuInput`.
+
+Slice 3C numeric cleanup:
+
+- `AnchorEventCapacityDefaultsEditor.vue`: nullable partner counts ->
+  `PuNumberInput`; removed local string adapters.
+- `AnchorEventTimePoolStrategyEditor.vue`: duration and lead fields ->
+  `PuNumberInput`.
+- `AnchorEventLandingRolloutEditor.vue`: ratio and assignment revision fields
+  -> `PuNumberInput`; local draft form now allows `number | null`.
+- `AnchorEventOtherSection.vue`: participation frequency limit ->
+  `PuNumberInput`; removed string adapter.
+
+Slice 3D form and dynamic field boundaries:
+
+- `NLPRForm.vue`: native form boundary -> `PuForm`; fixed stale
+  `::maxlength` typo while preserving submit handler ownership.
+- `UpdatePRStatusForm.vue`: native form boundary -> `PuForm`; preserved
+  `formId`, exposed `submitForm()`, and parent-owned submit event.
+- `PRJoinGateConfigEditor.vue`: dynamic key/version/title/body controls ->
+  `PuFormItem`, `PuInput`, and `PuTextarea`; removed DOM event value reader.
+
+Slice 3E editable token input:
+
+- `PREditor.vue`: plain preferences tag input -> `PuChipInput`.
+- `PRForm.scss`: removed local `tags-input`, `tag`, and `remove-tag` styling.
+
+## Deferred
+
+- `InlineNLPRForm.vue`: still has custom inline input, voice button, and send
+  button composition. Replacing only the outer form would be a weak migration.
+- Full `PREditor.vue` field migration: still a larger form restructuring task.
+- `FormModePreferenceControl.vue`: not a plain chip input; it owns curated
+  options, drawer descriptions, custom tag creation, and removal semantics.
+- Admin commerce/payment/ride-hailing raw fields: still need their own page or
+  domain-boundary slices.
+- Multi-select, option groups, async/custom option rendering, checkbox grids,
+  and DSL/rule editors.
+
+## Verification
+
+Final verification after this implementation pass:
+
+- `pnpm --filter @partner-up-dev/frontend build` passed.
+- `pnpm --filter @partner-up-dev/frontend lint:tokens` passed.
+- `pnpm test:unit:frontend` passed.
+- `git diff --check` passed.
+- Targeted raw-control scan passed for the touched non-deferred files.
+- `PREditor.vue` still has deferred raw fields and a native form boundary; the
+  migrated preferences tag editor has no old `tags-input`, `tag`,
+  `remove-tag`, `newPreference`, `addPreference`, or `removePreference`
+  implementation residue. The remaining `removePreference` text is only the
+  existing i18n key used as `PuChipInput` remove label.
diff --git a/tasks/design-web-package-integration/deep-ui-refactor/50-form-capability-needs.md b/tasks/design-web-package-integration/deep-ui-refactor/50-form-capability-needs.md
index 4a29aebe7..8ee488acd 100644
--- a/tasks/design-web-package-integration/deep-ui-refactor/50-form-capability-needs.md
+++ b/tasks/design-web-package-integration/deep-ui-refactor/50-form-capability-needs.md
@@ -6,6 +6,11 @@ This note captures frontend form usage found during Slice 3A of the
 `@partner-up-dev/design-web` migration. It is intended as upstream input for
 future web design package work, not as an app-side API contract.
 
+Update on 2026-06-14: `@partner-up-dev/design-web@0.4.3` resolves several
+items that were previously listed as upstream needs. Keep this file as a
+capability ledger: resolved items are marked rather than deleted so future
+migration decisions can see why Slice 3 changed direction.
+
 The app can already use:
 
 - `PuFormItem` for visible labels, hints, required markers, explicit errors,
@@ -17,6 +22,9 @@ The app can already use:
   of `0.4.1`.
 - `PuPicker`, `PuCheckbox`, and `PuCheckboxGroup` where the current interaction
   model fits.
+- `PuNumberInput` for `number | null` numeric app state, including min/max/step.
+- `PuSelect` for dense web-native single selection.
+- `PuChipInput` for plain editable string-array token input.
 
 ## Current App Usage Patterns
 
@@ -36,8 +44,8 @@ Migration status:
 - Text and textarea fields are straightforward with `PuFormItem`,
   `PuInput`, and `PuTextarea`.
 - `datetime-local` is now viable with `PuInput native-type="datetime-local"`.
-- Numeric fields work visually with `native-type="number"`, but model typing
-  is not ergonomic when the app owns `number | null` state.
+- Numeric fields are now viable with `PuNumberInput` when the app owns
+  `number | null` state.
 
 ### Select And Datalist
 
@@ -51,11 +59,13 @@ Remaining native usage:
 
 Migration status:
 
-- `PuPicker` exists, but it changes the interaction to a drawer/picker flow.
-  That can be right for mobile or constrained flows, but is not always a
-  direct replacement for dense admin selects.
-- `PuInput` does not expose a documented `list` prop, so datalist-backed fields
-  stay native unless the app accepts a different autocomplete/combobox pattern.
+- `PuSelect` now covers dense web-native one-of-many selection.
+- `PuInput` now documents native `list` forwarding, so datalist-backed
+  free-text fields can migrate without adopting a picker interaction.
+- `PuPicker` remains appropriate only when the product wants a picker/drawer
+  interaction rather than dense native selection.
+- The first 0.4.3 app pass has migrated the bounded admin analytics, PR
+  filter, Anchor Event status/template, and POI selector group.
 
 ### Submit Boundaries
 
@@ -70,9 +80,14 @@ Remaining native form usage:
 Migration status:
 
 - `PuForm` can now be evaluated because it emits `submit`.
+- 0.4.3 documents native form attribute fallthrough and external submit button
+  support.
 - Some app forms rely on native `id`/external submit behavior or page-level
-  mutation ownership. Those need explicit package support or careful app-side
-  mapping before migration.
+  mutation ownership. Native `id`/external submit is no longer the blocker;
+  mutation ownership and exposed parent contracts still require careful
+  per-form migration.
+- The first 0.4.3 app pass migrated `NLPRForm.vue` and
+  `UpdatePRStatusForm.vue`, preserving parent-owned submit contracts.
 
 ### Boolean And Multi-Select
 
@@ -90,7 +105,7 @@ Migration status:
 
 ## Upstream Needs
 
-### P0: Numeric Field Model Support
+### Resolved In 0.4.3: Numeric Field Model Support
 
 Current issue:
 
@@ -99,31 +114,24 @@ Current issue:
 - Direct `v-model.number` fails type-checking against the package component
   because the component contract is string-only.
 
-Needed package capability:
+Resolved package capability:
 
-- Either support `modelValue: string | number | null` for numeric native type,
-  or provide a dedicated numeric component/helper such as `PuNumberInput`.
-- Emit a stable numeric value mode, preferably with explicit empty handling:
-  empty -> `null`, valid number -> `number`, invalid intermediate text handled
-  deliberately.
-- Publish types for this behavior so app code does not need local computed
-  string adapters for every numeric field.
+- `PuNumberInput` supports numeric app state as `number | null`.
+- Empty input emits `null`; valid numeric input emits `number`.
+- Invalid intermediate text is held locally.
 
-### P0: Native Numeric Constraints
+### Resolved In 0.4.3: Native Numeric Constraints
 
 Current issue:
 
 - App numeric controls often use native `min`, `max`, and sometimes `step`.
 - `PuInput` public props do not document `min`, `max`, or `step`.
 
-Needed package capability:
+Resolved package capability:
 
-- Public props for `min`, `max`, and `step` when `nativeType` is numeric/date
-  compatible.
-- Pass-through typing and runtime forwarding to the internal native input.
-- Optional invalid-state integration with `PuFormItem` / `PuForm`.
+- `PuNumberInput` documents `min`, `max`, and `step`.
 
-### P1: Select Field For Dense Admin UI
+### Resolved In 0.4.3: Select Field For Dense Admin UI
 
 Current issue:
 
@@ -131,16 +139,17 @@ Current issue:
 - `PuPicker` is available but is a drawer-style picker interaction, which is
   not always the right admin-table/editor interaction.
 
-Needed package capability:
+Resolved package capability:
+
+- `PuSelect` supports string/number/null values, options, placeholder,
+  clearable state, native select attributes, and `PuFormItem` composition.
+
+Remaining later needs:
 
-- A web-native select-like component, for example `PuSelect`, supporting:
-  options, labels, disabled options, placeholder, clearable state, and
-  `PuFormItem` integration.
-- Keyboard and screen-reader behavior comparable to native select or a robust
-  combobox.
-- Compact density suitable for admin panels.
+- Multi-select, option groups, async loading, and custom option rendering are
+  still deferred by the first API.
 
-### P1: Autocomplete / Datalist Replacement
+### Partially Resolved In 0.4.3: Autocomplete / Datalist Replacement
 
 Current issue:
 
@@ -148,31 +157,32 @@ Current issue:
 - `PuInput` does not document a `list` prop, and `PuPicker` changes the model
   from free text to explicit option picking.
 
-Needed package capability:
+Resolved package capability:
 
-- Either document and type native `list` forwarding on `PuInput`, or provide a
-  `PuCombobox` / `PuAutocomplete` component.
-- Must support free text plus suggestions, not only fixed option selection.
-- Should support option labels distinct from submitted values.
+- `PuInput` documents native `list` forwarding for datalist-backed free-text
+  suggestions.
 
-### P1: Form Submit Integration
+Remaining later needs:
+
+- A richer `PuCombobox` / `PuAutocomplete` could still be useful when option
+  labels must differ from submitted values or when async/custom suggestions
+  are needed.
+
+### Resolved In 0.4.3: Form Submit Integration
 
 Current issue:
 
 - `PuForm` now emits `submit`, but the app still needs confidence around native
   form behaviors before broad migration.
 
-Needed package capability:
+Resolved package capability:
 
-- Document whether `PuForm` forwards `id`, `name`, `autocomplete`, `novalidate`,
-  `method`, and `action`.
-- Document external submit button support through native `form` attributes.
-- Provide typed submit event examples with `preventDefault` semantics clearly
-  stated.
-- Consider helper props for pending/disabled submit state only if that does not
-  blur mutation ownership.
+- `PuForm` documents native `id`, `name`, `autocomplete`, `novalidate`,
+  `action`, and `method` fallthrough.
+- It documents default prevention, native `SubmitEvent` emission, validation
+  call expectations, and external submit button support.
 
-### P2: Textarea Sizing Controls
+### Mostly Resolved In 0.4.3: Textarea Sizing Controls
 
 Current issue:
 
@@ -181,13 +191,16 @@ Current issue:
 - `PuTextarea` supports `autoHeight`, but public docs do not expose rows,
   minRows, maxRows, or resize policy.
 
-Needed package capability:
+Resolved package capability:
+
+- `PuTextarea` documents native `rows` forwarding.
+- `PuTextarea` documents `autoHeight` and default vertical resize behavior.
 
-- Public `rows`, `minRows`, `maxRows`, or `minHeight` strategy.
-- Clear interaction between `autoHeight` and manual resize.
-- This would reduce app-side class styling for multiline editors.
+Remaining later needs:
 
-### P2: Change/Input Event Ergonomics
+- `minRows` / `maxRows` may still be useful if fixed `rows` is not enough.
+
+### Resolved In 0.4.3: Change/Input Event Ergonomics
 
 Current issue:
 
@@ -195,12 +208,24 @@ Current issue:
 - `PuInput` emits `update:modelValue`, `focus`, `blur`, but not a documented
   raw `input` or `change` event.
 
-Needed package capability:
+Resolved package capability:
+
+- `PuInput` and `PuTextarea` document `update:modelValue` as the live dirty
+  hook and expose `change` for browser committed-value semantics.
+
+### New In 0.4.3: Editable Chip Input
+
+Current app relevance:
+
+- `PREditor.vue` preferences tags input has migrated to `PuChipInput`.
+- `FormModePreferenceControl.vue` is more complex than a plain chip input
+  because it owns curated options, descriptions, drawer state, and custom
+  draft creation.
+
+Remaining later needs:
 
-- Document the intended dirty-state hook.
-- If package components should replace native controls in dirty-tracked admin
-  editors, expose typed `input`/`change` events or recommend
-  `update:modelValue`.
+- `PuChipInput` suggestions and custom option listbox behavior are deferred by
+  the first API.
 
 ## App Migration Implications
 
@@ -215,7 +240,10 @@ Recommended package-side priority:
 Until then, the frontend should:
 
 - Continue migrating string-backed text and textarea fields directly.
-- Use local computed adapters for small numbers only when the replacement is
-  otherwise worth it.
-- Keep native select and datalist controls out of direct migration slices.
-- Adopt `PuForm` only per form boundary after submit semantics are checked.
+- Prefer `PuNumberInput` for numeric app state.
+- Prefer `PuSelect` for dense single selection and `PuInput list` for
+  datalist-backed free-text suggestions.
+- Adopt `PuForm` only per form boundary, even though native form attributes and
+  external submit are now documented.
+- Use `PuChipInput` for plain string-array token entry; discuss richer option
+  selection surfaces before migrating them.
diff --git a/tasks/design-web-package-integration/deep-ui-refactor/80-form-mode-preference-composition.md b/tasks/design-web-package-integration/deep-ui-refactor/80-form-mode-preference-composition.md
new file mode 100644
index 000000000..71d1e7533
--- /dev/null
+++ b/tasks/design-web-package-integration/deep-ui-refactor/80-form-mode-preference-composition.md
@@ -0,0 +1,185 @@
+# Form Mode Preference Composition Pilot
+
+## Objective & Hypothesis
+
+Objective: use `FormModePreferenceControl.vue` as the pilot for moving beyond
+one-to-one UI replacement into package-component composition plus local state
+decomposition.
+
+Hypothesis: this component should become a composed interaction surface:
+`PuCell` opens a `PuDrawer`; the drawer renders curated options with
+`PuChipGroup` + selectable/removable `PuChip`; custom user-created preferences
+are edited with `PuChipInput`; notices and commands use package primitives
+instead of local pill, input, and inline-message markup.
+
+## Current Mode
+
+- Input route: `Constraint`.
+- Active mode: `Execute`.
+- Production code status: implemented and verified.
+- Candidate file:
+  `apps/frontend/src/domains/event/ui/controls/form-mode/FormModePreferenceControl.vue`.
+
+## Guardrails Touched
+
+- Root task protocol: this packet is volatile planning under `tasks/`.
+- Design package boundary: use only public exports and package skill
+  references for `@partner-up-dev/design-web@0.4.3`.
+- Product invariant: preserve the form-mode preference workflow: users choose
+  preset preferences, can add custom preferences, selected values are emitted
+  through `update:modelValue`, and newly created labels are submitted to the
+  preference-tag submission mutation.
+- Interaction invariant: category cells allow at most one selected tag per
+  category; uncategorized/all cells allow multiple selected tags.
+- Type invariant: no `any`; keep package component types imported from the
+  package root when needed.
+
+## Package API Reading
+
+- `PuCell` fits the visible row that opens each preference category drawer.
+- `PuDrawer` fits the secondary selection workflow and is already used.
+- `PuChipGroup` fits grouped chip option layout and should replace local
+  flex-gap wrappers where the children are chips.
+- `PuChip` fits selectable and removable option tokens through `selected`,
+  `removable`, `click`, and `remove`.
+- `PuChipInput` fits editable string-array token entry, but package docs state
+  that suggestions and custom option listbox behavior are deferred.
+- Therefore `PuChipInput` should not swallow the whole drawer option selector.
+  It can own the custom preference entry subset while curated/preset options
+  remain `PuChipGroup` + `PuChip`.
+
+## Pre-Implementation Component Topology
+
+Visible summary:
+
+- `PuCell` rows show each category or uncategorized group.
+- Cell value is derived from `modelValue`.
+- Clicking a cell opens a `PuDrawer`.
+
+Drawer workflow:
+
+- `activeDrawerTags` computes the candidate tags for the active cell.
+- Category cells use `drawerSelectedCategoryMap` for single selection.
+- Uncategorized/all cells use `drawerSelectedUncategorizedLabels` for multiple
+  selection.
+- Custom tags are kept in `drawerCustomTags`, merged into effective drawer
+  tags, removable through local button markup, then persisted to
+  `localCustomTags` on save.
+- Submission failures render through local `.inline-message` markup.
+
+Local UI ownership before implementation:
+
+- `.tag-pill`, `.tag-pill__body`, `.tag-pill__remove`,
+  `.tag-pill__input`, and add/draft states.
+- `.inline-message` error styling.
+- Local chip sizing, selected state, remove button, and input shell styling.
+
+## Composition Direction
+
+The target should not be a compatibility wrapper. It should be direct package
+composition at the usage site:
+
+- Keep `PuCell` for the row opener.
+- Keep `PuDrawer` for the overlay shell, using its title/default/footer slots.
+- Replace the preset/candidate list wrapper with `PuChipGroup wrap`.
+- Render each preset option as direct `PuChip as="button" type="button"`.
+- Use `PuChip selected` for current selection and `PuChip removable` for
+  custom values that are still represented in the option list.
+- Use `PuChipInput` for the custom preference entry lane. This may replace the
+  local plus-chip + draft-input mode with a persistent compact custom-entry
+  field if that produces simpler state and acceptable UX.
+- Replace local error paragraphs with `PuInlineNotice tone="error"`.
+- Keep drawer footer actions as direct `PuButton`.
+
+## Refactor Direction
+
+After the package-composition pass, split logic by responsibility if the diff
+remains readable:
+
+- tag normalization and category-prefix formatting
+- visible cell summary derivation
+- drawer selection state and save/cancel lifecycle
+- custom tag draft/add/remove/submission behavior
+
+The likely extraction target is a composable beside the component, not a new
+shared UI wrapper. This is domain behavior, not generic design-system surface.
+
+## Open Design Question
+
+`PuChipInput` can be used in two reasonable ways:
+
+1. Custom-entry lane only: display existing custom values as editable chips in
+   a separate input lane, while preset options stay in the main chip group.
+2. Add-only helper: keep custom values in the main chip group and use
+   `PuChipInput` only to commit draft labels.
+
+The first option uses `PuChipInput` more honestly as a string-array field and
+removes more local UI state. It changes the drawer layout more. The second
+option changes less visually but risks treating `PuChipInput` like a hidden
+text input with extra ceremony.
+
+Current recommendation: prefer option 1 unless implementation evidence shows
+that category-prefix normalization or submission bookkeeping becomes harder
+than the removed local markup is worth.
+
+## Proposed Execution Slice
+
+1. Implement the direct composition pass inside
+   `FormModePreferenceControl.vue`.
+2. Remove local `tag-pill*` and `inline-message*` CSS.
+3. Keep the public component contract unchanged:
+   `eventId`, `modelValue`, `presetTags`, and `update:modelValue`.
+4. Add or update focused tests only if state ownership moves out of the
+   component or an existing test covers the behavior through brittle markup.
+5. Reassess whether a composable extraction is still needed after package
+   composition reduces the template and CSS.
+
+## Implementation Notes
+
+Status: completed.
+
+Implemented in
+`apps/frontend/src/domains/event/ui/controls/form-mode/FormModePreferenceControl.vue`.
+
+- Kept `PuCell` for visible preference rows and `PuDrawer` for the secondary
+  selection workflow.
+- Replaced the local preset option pill list with direct `PuChipGroup` +
+  selectable `PuChip` usage.
+- Moved custom preference entry into a `PuFormItem` + `PuChipInput` lane.
+  Custom chips use the `PuChipInput` `chip` slot so they can remain
+  selectable and removable through direct `PuChip`.
+- Replaced submission failure text with `PuInlineNotice tone="error"`.
+- Deleted the local draft-input state:
+  `drawerCustomTagEditing`, `drawerCustomTagInput`, and
+  `drawerCustomTagMessage`.
+- Deleted the local `tag-pill*` and `inline-message*` CSS families.
+- Kept category-prefix formatting, category single-selection, uncategorized
+  multi-selection, custom label normalization, and submission bookkeeping in
+  domain-owned component logic. No local wrapper was introduced.
+
+The pilot showed that package composition can remove most local primitive UI
+ownership, but the product-specific selection topology still belongs in the
+domain component or a future domain composable.
+
+## Pilot Role
+
+This is Slice 9, but it is also a pilot for the broader composition rollout.
+The implementation should record what actually generalized:
+
+- which local UI primitive classes disappeared cleanly
+- which package component combinations reduced template or CSS complexity
+- which product-state responsibilities still needed domain-owned logic
+- which interactions could not be represented by package APIs without custom
+  composition
+
+Slice 10 should use that evidence to choose follow-up candidates instead of
+assuming every remaining local UI surface fits the same pattern.
+
+## Verification
+
+- Passed `pnpm --filter @partner-up-dev/frontend build`.
+- Passed `pnpm --filter @partner-up-dev/frontend lint:tokens`.
+- Passed `pnpm test:unit:frontend`.
+- Passed targeted source scan:
+  `rg -n "tag-pill|inline-message" apps/frontend/src/domains/event/ui/controls/form-mode`
+- Passed `git diff --check`.
diff --git a/tasks/design-web-package-integration/deep-ui-refactor/90-composition-pattern-rollout.md b/tasks/design-web-package-integration/deep-ui-refactor/90-composition-pattern-rollout.md
new file mode 100644
index 000000000..454e92205
--- /dev/null
+++ b/tasks/design-web-package-integration/deep-ui-refactor/90-composition-pattern-rollout.md
@@ -0,0 +1,196 @@
+# Composition Pattern Rollout
+
+## Objective & Hypothesis
+
+Objective: after the `FormModePreferenceControl.vue` pilot, identify other
+frontend surfaces where the same migration mode should be applied: package
+component composition plus local state/structure decomposition, not isolated
+one-to-one component replacement.
+
+Hypothesis: this pattern is most useful when a component mixes product state,
+local container markup, local primitive styling, and repeated UI structures in
+one file. The maintainability gain comes from moving semantic UI ownership to
+package components while leaving product-specific state in domain components
+or composables.
+
+## Current Mode
+
+- Input route: `Constraint`.
+- Active mode: `Explore`.
+- Production code status: not started.
+- Dependency: Slice 9 has provided the first concrete before/after example.
+
+## Pattern Definition
+
+Use this rollout mode when a target has at least two of these traits:
+
+- local UI primitive classes such as `*-card`, `*-panel`, `*-pill`,
+  `*-row`, `*-field`, `*-input`, `inline-message`, or repeated item shells
+- multiple package components can cooperate naturally, for example
+  `PuCard` + `PuDescriptionList`, `PuDrawer` + `PuChipGroup`, or
+  `PuForm` + field controls + notices
+- product state can be named and separated from rendering shape
+- local CSS owns package-covered visual behavior such as selectable chips,
+  panel shells, field controls, notices, or icon buttons
+- the file is large enough that a direct component swap would leave the
+  original complexity mostly intact
+
+Do not use this mode for:
+
+- passive badge/tag cleanup already covered by Slice 8
+- simple raw field replacement already covered by Slice 3
+- gesture-heavy state machines before topology mapping
+- local wrappers around package components
+
+## Pilot Output Expected From Slice 9
+
+The Slice 9 pilot should leave behind a reusable working recipe:
+
+1. map product interaction state before touching markup
+2. identify package-owned UI responsibilities
+3. replace local primitives with direct package composition
+4. remove local CSS that only existed to imitate package primitives
+5. only then extract domain logic if the component is still hard to read
+
+This recipe should be recorded from actual implementation evidence, not just
+pre-implementation intent.
+
+## Candidate Surfaces
+
+### High-Confidence Candidates
+
+1. `apps/frontend/src/domains/pr/ui/sections/InlineNLPRForm.vue`
+
+   Current shape: native form, custom input shell, custom voice icon button,
+   custom send button/spinner, local validation messages, and a package notice
+   already mixed into the same surface.
+
+   Candidate composition: `PuForm`, `PuFormItem`, `PuInput`, `PuButton`
+   icon buttons, `PuSpinner` or `PuButton` loading, and `PuInlineNotice`.
+
+   Why this matches the pattern: the product behavior is not just fields; it
+   includes typewriter fallback text, voice recording, draft persistence,
+   submit navigation, and mutation feedback. A one-to-one input swap would not
+   remove the real complexity.
+
+2. `apps/frontend/src/domains/pr/ui/sections/PRPartnerSection.vue`
+
+   Current shape: custom section shell, summary cards, action bar, inline
+   error/availability notes, roster panel, timeline panel, reminder panel, and
+   many local panel/list styles.
+
+   Candidate composition: `PuCard`, `PuBentoGrid`/`PuBentoItem` or
+   `PuDescriptionList`, `PuInlineNotice`, `PuButton`, `PuCellGroup`, and
+   existing `PRRosterItem`.
+
+   Why this matches the pattern: the section mixes participant state,
+   readiness facts, commands, timeline facts, reminder policy, and local
+   container styling. Package composition can make each region's semantic role
+   explicit.
+
+### Medium-Confidence Candidates
+
+3. `apps/frontend/src/domains/pr/ui/composites/PRFactsCard.vue`
+
+   Current shape: already uses several package components, but still keeps
+   local `facts-entry`, custom row action buttons, gallery/map modal state,
+   and mixed interactive/read-only fact rendering.
+
+   Candidate composition: deepen `PuDescriptionList`/`PuDescriptionItem`
+   usage, replace custom row action buttons with `PuButton`/action slots, and
+   split fact derivation from modal presentation.
+
+   Why medium: much of the direct migration is already done, so the next gain
+   is architectural cleanup rather than obvious package replacement.
+
+4. `apps/frontend/src/domains/admin/ui/navigation/AdminNavigationPanel.vue`
+
+   Current shape: collapsible admin nav shell, grouped nav expansion, manual
+   icon buttons, group triggers, and package cards as nav items.
+
+   Candidate composition: `PuAccordion`/`PuAccordionItem` for group
+   expansion, `PuCellGroup`/`PuCell` or package-backed action cards for items,
+   and `PuButton` for collapse/logout actions.
+
+   Why medium: nav semantics and active-route behavior need careful mapping
+   before replacing group controls.
+
+5. `apps/frontend/src/domains/event/ui/composites/FormModeNoMatchResult.vue`
+
+   Current shape: candidate list, join action slot, local inline messages,
+   no-match empty hero, and fallback create command.
+
+   Candidate composition: `PuInlineNotice`, `PuEmptyState`, `PuButton`, and
+   card/list composition around `PRPreviewCard`.
+
+   Why medium: useful cleanup, but smaller than the pilot and may not justify
+   extraction unless it becomes part of a larger Form Mode surface split.
+
+### Investigate Before Scheduling
+
+- `apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceSpuEditor.vue`
+  is explicitly out of Slice 10 by human constraint. It remains a plausible
+  package-composition target in the abstract, especially around plain string
+  lists that could map to `PuChipInput`, but it should not be scheduled here.
+- `apps/frontend/src/domains/event/ui/surfaces/AnchorEventFormModeSurface.vue`
+  is high-value but state-machine heavy. It should wait until Slice 9 clarifies
+  the local control pattern and until the Form Mode topology is mapped.
+- `apps/frontend/src/pages/AdminAnalyticsPage.vue` is large and still owns
+  many analytics panels, but it may fit a separate dashboard-container slice
+  better than the interaction-composition rollout.
+- `apps/frontend/src/pages/StudySprintPomodoroPage.vue` is visually integrated
+  and game-like. Package composition should be conservative there.
+
+## Suggested Slice 10 Shape
+
+Slice 10 should not immediately implement every candidate. It should:
+
+1. compare Slice 9's actual diff against this pattern definition
+2. pick two low-to-medium-risk candidates for follow-up implementation
+3. create a short per-candidate topology note before editing
+4. implement one candidate at a time
+5. update this packet with what the pattern did and did not generalize to
+
+Current recommended first follow-up after Slice 9:
+
+- `InlineNLPRForm.vue`, because it is compact, user-visible, and has a clear
+  package composition target.
+- `PRPartnerSection.vue`, because it exercises the same content/container
+  separation principle at a larger section scale.
+
+## PuChipInput Review
+
+Current Slice 10 candidates should not depend on `PuChipInput`.
+
+- `InlineNLPRForm.vue` is a single natural-language text entry surface:
+  use `PuInput`/`PuButton`/`PuInlineNotice`, not chip entry.
+- `PRPartnerSection.vue` owns facts, actions, roster, timeline, and reminder
+  panels. It may use `PuCard`, `PuBentoItem`, `PuDescriptionList`,
+  `PuCellGroup`, and notices, not editable token input.
+- `PRFactsCard.vue` uses chip display for preferences and roster preview;
+  that is `PuChip`/`PuChipGroup`, not `PuChipInput`.
+- `AdminNavigationPanel.vue` is navigation grouping and active-route state,
+  not token entry.
+- `FormModeNoMatchResult.vue` is candidate/result composition, not token
+  entry.
+
+The only original Slice 10 candidate with a credible `PuChipInput` path was
+`AdminCommerceSpuEditor.vue`, through plain string-list editors such as hero
+image asset ids, detail image asset ids, and selling points. Since that target
+is out of scope, `PuChipInput` should not drive Slice 10 planning.
+
+## Verification
+
+For candidate selection only:
+
+- source scans and task packet update are enough
+
+For each production implementation:
+
+- `pnpm --filter @partner-up-dev/frontend build`
+- `pnpm --filter @partner-up-dev/frontend lint:tokens`
+- `pnpm test:unit:frontend`
+- targeted scans for removed local primitive class families
+- browser screenshot only when layout density or route-level composition
+  materially changes
+- `git diff --check`
diff --git a/tasks/design-web-package-integration/deep-ui-refactor/README.md b/tasks/design-web-package-integration/deep-ui-refactor/README.md
index d08d48cbb..73899d10d 100644
--- a/tasks/design-web-package-integration/deep-ui-refactor/README.md
+++ b/tasks/design-web-package-integration/deep-ui-refactor/README.md
@@ -16,7 +16,9 @@ and product interaction state in one file.
 
 - Input route: `Constraint`.
 - Active mode: `Execute`.
-- Production code status: Slice 1 implemented and verified.
+- Production code status: Slice 1 implemented and verified; Slice 3 0.4.3
+  implementation pass implemented and verified; Slice 9 composition pilot
+  implemented and verified.
 - Task scope: frontend UI structure and package component composition.
 
 ## Guardrails Touched
@@ -33,7 +35,7 @@ and product interaction state in one file.
 ## Current Understanding
 
 - The up-to-date design package skill is shipped with
-  `@partner-up-dev/design-web@0.4.1` under
+  `@partner-up-dev/design-web@0.4.3` under
   `apps/frontend/node_modules/@partner-up-dev/design-web/skills/design-web`.
 - The previous component-migration packet has completed direct migrations for
   local facades such as button, card choice, tabs, overlays, cells, chips,
@@ -51,20 +53,40 @@ and product interaction state in one file.
   `AnchorEventListModeSurface.vue`, `AnchorEventDemandCard.vue`,
   `FormModePreferenceControl.vue`, and `MePage.vue`.
 - Raw form controls remain concentrated in admin, commerce, PR editor, POI,
-  and route/event editing surfaces. The 0.4.1 package now supports
-  `PuInput nativeType="datetime-local"`, so datetime fields can move through
-  the normal field-control lane.
+  and route/event editing surfaces. The 0.4.3 package now supports
+  `PuNumberInput`, `PuSelect`, `PuChipInput`, native `PuInput list`
+  forwarding, `PuTextarea rows`, and documented `PuForm` native form
+  attributes, so Slice 3 can move beyond text/textarea cleanup.
+- The bounded 0.4.3 Slice 3 implementation pass is recorded in
+  `46-slice3-0.4.3-implementation.md`; it covers select/datalist, a focused
+  Anchor Event numeric group, small form boundaries, a dynamic join-gate field
+  group, and the plain PR preferences chip input.
+- `FormModePreferenceControl.vue` is now tracked as a dedicated composition
+  pilot in `80-form-mode-preference-composition.md`: it should move beyond
+  one-to-one replacement into `PuCell` + `PuDrawer` + `PuChipGroup` +
+  `PuChip` + `PuChipInput` composition and local state decomposition.
+- Slice 9 completed the pilot by migrating `FormModePreferenceControl.vue` to
+  direct package composition while keeping category selection and custom tag
+  submission as domain-owned logic.
+- The post-pilot rollout is tracked in
+  `90-composition-pattern-rollout.md`: Slice 10 should use the Slice 9
+  evidence to identify and implement similar composition-plus-refactor
+  candidates, not treat this as a broad mechanical sweep.
 
 ## Package API Constraints
 
-- `PuInput` supports `datetime-local` as of `@partner-up-dev/design-web@0.4.1`.
-  Datalist-backed inputs still need a separate decision because `list` is not
-  part of the documented public `PuInput` props.
-- `PuForm` exposes schema/validation structure and a documented `submit`
-  event as of `0.4.1`. Use it where the form can adopt package form semantics
-  directly, not as a wrapper around old native-form markup.
-- `PuPicker` is available for option selection, but migrating native `select`
-  or `datalist` inputs requires product-level interaction acceptance.
+- `PuInput` supports `datetime-local` as of `@partner-up-dev/design-web@0.4.1`
+  and documents native `list` forwarding as of `0.4.3`.
+- `PuNumberInput` covers `number | null` app state and native numeric
+  constraints as of `0.4.3`.
+- `PuSelect` covers dense web-native single selection as of `0.4.3`.
+- `PuChipInput` covers plain editable string-array token input as of `0.4.3`.
+- `PuForm` exposes schema/validation structure, a documented `submit` event,
+  native form attribute fallthrough, and external submit support. Use it where
+  the form can adopt package form semantics directly, not as a wrapper around
+  old native-form markup.
+- `PuPicker` remains available for option selection when a picker/drawer
+  interaction is desired.
 - `PuSnackbar` and `PuSnackbarHost` are available for transient feedback.
   Persistent embedded error states should usually become `PuInlineNotice`.
 
@@ -79,10 +101,11 @@ Detailed slice planning lives in `20-slice-plan.md`.
    `PuBentoGrid`/`PuBentoItem` at usage sites; evaluate `AdminRailPanel` as
    direct `PuCard` or `PuCellGroup` usage. Keep `AdminPageScaffold` only if it
    remains a real admin layout container over `PuPageScaffold`.
-3. Straightforward field cleanup: migrate eligible text, number, password, URL,
-   and textarea controls to `PuFormItem` + `PuInput`/`PuTextarea`; leave
-   `datetime-local`, native select, and datalist-backed controls in a separate
-   decision lane.
+3. Field cleanup: continue migrating text/password/URL/textarea controls, and
+   use 0.4.3 APIs for numeric fields (`PuNumberInput`), dense single selects
+   (`PuSelect`), datalist-backed free text (`PuInput list`), real submit
+   boundaries (`PuForm`), and plain tag inputs (`PuChipInput`) in small
+   sub-slices.
 4. Read-only/data display cleanup: replace local KPI cards, summary grids,
    row groups, and status badges with `PuBentoItem`, `PuCard`,
    `PuDescriptionList`, `PuDescriptionItem`, `PuCellGroup`, `PuCell`, or
@@ -97,6 +120,14 @@ Detailed slice planning lives in `20-slice-plan.md`.
    machines before splitting. Long press, carousel, splash handoff, and route
    handoff animation are product interaction contracts, not simple package
    substitutions.
+8. Form Mode preference composition pilot: use
+   `80-form-mode-preference-composition.md` to migrate the preference drawer
+   from local pill/input markup to package component composition while keeping
+   category selection and custom preference submission semantics explicit.
+9. Composition pattern rollout: use
+   `90-composition-pattern-rollout.md` to compare the Slice 9 pilot against
+   other mixed UI/state surfaces, then schedule follow-up candidates one at a
+   time.
 
 ## Defer By Default
 
@@ -104,8 +135,10 @@ Detailed slice planning lives in `20-slice-plan.md`.
   swipe projection layers, and map rendering.
 - `ProductLocalDateCalendarPicker` unless a package calendar/date selector
   exists or the product accepts a different picker interaction.
-- Native `select` and datalist-backed controls until the product accepts a
-  package picker or the package exposes a matching public field API.
+- Multi-select, option-group, async-option, or custom-rendered selects until
+  the package exposes a matching public API.
+- Rich option/tag editors, such as Form Mode preferences, until their
+  interaction contracts are explicitly mapped.
 
 ## Verification Baseline
 
@@ -143,6 +176,24 @@ Slice 1 verification:
   package private-path imports, and no raw `type="datetime-local"` in the four
   migrated datetime files.
 
+0.4.3 uplift verification:
+
+- Registry query confirmed `@partner-up-dev/design-web@0.4.3` is available.
+- Package dependency and lockfile updated from `0.4.1` to `0.4.3`.
+- TanStack Intent package skill found by `list --json`, loaded by
+  `load @partner-up-dev/design-web#design-web`, and validated by
+  `validate apps/frontend/node_modules/@partner-up-dev/design-web/skills/design-web`.
+- `dist/version.d.ts` declares `version = "0.4.3"`.
+- 0.4.3 skill references document `PuNumberInput`, `PuSelect`, `PuChipInput`,
+  `PuInput list`, `PuTextarea rows`, and native `PuForm` attribute/external
+  submit support.
+- `pnpm --filter @partner-up-dev/frontend build` passed.
+- `pnpm --filter @partner-up-dev/frontend lint:tokens` passed.
+- `pnpm test:unit:frontend` passed.
+- `git diff --check` passed.
+- Slice 3 0.4.3 implementation verification is recorded in
+  `46-slice3-0.4.3-implementation.md`.
+
 For route/page structure slices:
 
 - add targeted component tests when state ownership moves

From f5de62f51ee25c8f972433835a28965c320a4351 Mon Sep 17 00:00:00 2001
From: Lanzhijiang <lanzhijiang@foxmail.com>
Date: Tue, 16 Jun 2026 10:46:44 +0800
Subject: [PATCH 13/94] refactor(frontend): roll out design-web composition
 pattern

---
 .../ui/composites/FormModeNoMatchResult.vue   |  63 ++--
 .../domains/pr/ui/sections/InlineNLPRForm.vue | 302 ++++++------------
 .../deep-ui-refactor/20-slice-plan.md         |  34 +-
 .../90-composition-pattern-rollout.md         |  92 ++++--
 .../deep-ui-refactor/README.md                |   3 +
 5 files changed, 215 insertions(+), 279 deletions(-)

diff --git a/apps/frontend/src/domains/event/ui/composites/FormModeNoMatchResult.vue b/apps/frontend/src/domains/event/ui/composites/FormModeNoMatchResult.vue
index 5afebb58e..e3cd0afd6 100644
--- a/apps/frontend/src/domains/event/ui/composites/FormModeNoMatchResult.vue
+++ b/apps/frontend/src/domains/event/ui/composites/FormModeNoMatchResult.vue
@@ -41,7 +41,6 @@
                 <div class="candidate-join-flow">
                   <PuButton
                     shape="rect"
-
                     block
                     data-testid="anchor-event-form-mode.candidate.join"
                     :data-pr-id="candidate.pr.id"
@@ -58,12 +57,11 @@
                         : t("anchorEvent.formMode.joinCandidateAction")
                     }}
                   </PuButton>
-                  <p
+                  <PuInlineNotice
                     v-if="errorMessage"
-                    class="inline-message inline-message--error"
-                  >
-                    {{ errorMessage }}
-                  </p>
+                    tone="error"
+                    :message="errorMessage"
+                  />
                 </div>
               </template>
             </PRJoinAction>
@@ -72,20 +70,19 @@
       </div>
     </section>
 
-    <section v-else class="no-match-hero">
-      <h2 class="no-match-hero__title">
-        {{ t("anchorEvent.formMode.noCandidateTitle") }}
-      </h2>
-      <p class="no-match-hero__body">
-        {{ t("anchorEvent.formMode.noCandidateBody") }}
-      </p>
-    </section>
+    <PuEmptyState
+      v-else
+      align="start"
+      icon="i-mdi-account-search-outline"
+      :title="t('anchorEvent.formMode.noCandidateTitle')"
+      :description="t('anchorEvent.formMode.noCandidateBody')"
+    />
 
     <div v-if="props.showCreateFallback" class="no-match-actions">
       <PuButton
         shape="rect"
-        tone="tertiary" variant="solid"
-
+        tone="tertiary"
+        variant="solid"
         block
         data-testid="anchor-event-form-mode.create-fallback"
         :loading="props.createPending"
@@ -96,12 +93,11 @@
       </PuButton>
     </div>
 
-    <p
+    <PuInlineNotice
       v-if="props.createErrorMessage"
-      class="inline-message inline-message--error"
-    >
-      {{ props.createErrorMessage }}
-    </p>
+      tone="error"
+      :message="props.createErrorMessage"
+    />
   </section>
 </template>
 
@@ -115,7 +111,11 @@ import {
 } from "@/domains/event/model/form-mode";
 import PRPreviewCard from "@/domains/pr/ui/primitives/PRPreviewCard.vue";
 import PRJoinAction from "@/domains/pr/ui/sections/PRJoinAction.vue";
-import { PuButton } from "@partner-up-dev/design-web";
+import {
+  PuButton,
+  PuEmptyState,
+  PuInlineNotice,
+} from "@partner-up-dev/design-web";
 
 type RecommendationCandidate =
   AnchorEventFormModeRecommendationResponse["orderedCandidates"][number];
@@ -179,22 +179,15 @@ const handleJoinCandidateClick = (
   gap: var(--sys-spacing-small);
 }
 
-.no-match-hero__title,
 .candidate-list__title,
-.no-match-hero__body,
-.inline-message {
+.no-match-actions {
   margin: 0;
 }
-.no-match-hero__title,
+
 .candidate-list__title {
   @include mx.pu-font(section);
 }
 
-.no-match-hero__body {
-  color: var(--sys-color-on-surface-variant);
-  @include mx.pu-font(body);
-}
-
 .candidate-list {
   gap: var(--sys-spacing-small);
   min-height: 0;
@@ -207,12 +200,4 @@ const handleJoinCandidateClick = (
 .no-match-actions {
   margin-top: auto;
 }
-
-.inline-message {
-  @include mx.pu-font(support);
-}
-
-.inline-message--error {
-  color: var(--sys-color-error);
-}
 </style>
diff --git a/apps/frontend/src/domains/pr/ui/sections/InlineNLPRForm.vue b/apps/frontend/src/domains/pr/ui/sections/InlineNLPRForm.vue
index c2ab8c34d..3da55a5ab 100644
--- a/apps/frontend/src/domains/pr/ui/sections/InlineNLPRForm.vue
+++ b/apps/frontend/src/domains/pr/ui/sections/InlineNLPRForm.vue
@@ -1,66 +1,77 @@
 <template>
-  <form class="inline-nl-pr-form" @submit.prevent="onSubmit">
+  <PuForm class="inline-nl-pr-form" @submit="onSubmit">
     <Field name="rawText" v-slot="{ field, errors }">
-      <div class="row row--input">
-        <input
-          class="nl-input"
-          type="text"
-          :value="field.value"
-          @input="field.onChange(($event.target as HTMLInputElement).value)"
-          :placeholder="placeholderText"
-          :disabled="isSubmitting"
-          maxlength="2000"
-          autocomplete="off"
-        />
-        <button
-          v-if="isVoiceSupported"
-          class="voice-button"
-          :class="{ 'is-recording': isVoiceRecording }"
-          type="button"
-          :disabled="isSubmitting || isVoiceProcessing"
-          :aria-pressed="isVoiceRecording"
-          :aria-label="t('nlForm.voiceAction')"
-          @click="handleVoiceToggle"
-        >
-          <span
-            v-if="isVoiceRecording"
-            class="i-mdi-microphone voice-icon"
-            aria-hidden="true"
-          ></span>
-          <span
-            v-else
-            class="i-mdi-microphone-outline voice-icon"
-            aria-hidden="true"
-          ></span>
-        </button>
-        <button
-          class="send-button"
-          type="submit"
-          :disabled="isSubmitting"
-          :aria-label="t('nlForm.submit')"
-        >
-          <span v-if="isSubmitting" class="spinner" aria-hidden="true"></span>
-          <span
-            v-else
-            class="i-mdi-send-outline send-icon"
-            aria-hidden="true"
-          ></span>
-        </button>
-      </div>
-      <p v-if="voiceErrorMessage" class="error-message voice-error">
-        {{ voiceErrorMessage }}
-      </p>
-      <span v-if="errors.length" class="error-message" style="flex-basis: 100%">
-        {{ errors[0] }}
-      </span>
+      <PuFormItem class="inline-nl-pr-form__field" :error="errors[0]">
+        <div class="inline-nl-pr-form__controls">
+          <PuInput
+            class="inline-nl-pr-form__input"
+            :model-value="field.value"
+            :placeholder="placeholderText"
+            :disabled="isSubmitting"
+            :maxlength="2000"
+            :invalid="errors.length > 0"
+            autocomplete="off"
+            @update:model-value="field.onChange"
+          />
+          <PuButton
+            v-if="isVoiceSupported"
+            class="inline-nl-pr-form__voice-action"
+            :action="{ native: 'button' }"
+            shape="rect"
+            tone="primary"
+            :variant="isVoiceRecording ? 'solid' : 'dashed'"
+            size="md"
+            :disabled="isSubmitting || isVoiceProcessing"
+            :aria-pressed="isVoiceRecording"
+            :aria-label="t('nlForm.voiceAction')"
+            @click="handleVoiceToggle"
+          >
+            <span
+              v-if="isVoiceRecording"
+              class="i-mdi-microphone inline-nl-pr-form__icon"
+              aria-hidden="true"
+            />
+            <span
+              v-else
+              class="i-mdi-microphone-outline inline-nl-pr-form__icon"
+              aria-hidden="true"
+            />
+          </PuButton>
+          <PuButton
+            class="inline-nl-pr-form__submit-action"
+            :action="{ native: 'submit' }"
+            shape="rect"
+            tone="primary"
+            variant="solid"
+            size="md"
+            :disabled="isSubmitting"
+            :loading="isSubmitting"
+            :aria-label="t('nlForm.submit')"
+          >
+            <span
+              v-if="!isSubmitting"
+              class="i-mdi-send-outline inline-nl-pr-form__icon"
+              aria-hidden="true"
+            />
+          </PuButton>
+        </div>
+      </PuFormItem>
     </Field>
 
-    <PuInlineNotice tone="error" dismissible
+    <PuInlineNotice
+      v-if="voiceErrorMessage"
+      tone="error"
+      :message="voiceErrorMessage"
+    />
+
+    <PuInlineNotice
       v-if="createMutation.isError.value"
+      tone="error"
+      dismissible
       :message="submitErrorMessage"
       @close="createMutation.reset()"
     />
-  </form>
+  </PuForm>
 </template>
 
 <script setup lang="ts">
@@ -75,7 +86,13 @@ import { useLandingTypewriterPlaceholder } from "@/domains/landing/use-cases/use
 import { ensureAuthSessionBootstrapped } from "@/processes/auth/useAuthSessionBootstrap";
 import { useNaturalLanguageDraftStore } from "@/domains/pr/use-cases/useNaturalLanguageDraft";
 import { useWeChatVoiceInput } from "@/shared/wechat/useWeChatVoiceInput";
-import { PuInlineNotice } from "@partner-up-dev/design-web";
+import {
+  PuButton,
+  PuForm,
+  PuFormItem,
+  PuInlineNotice,
+  PuInput,
+} from "@partner-up-dev/design-web";
 
 const getLocalWeekdayLabel = (date: Date): string => {
   return new Intl.DateTimeFormat(undefined, {
@@ -199,181 +216,42 @@ const handleVoiceToggle = async (): Promise<void> => {
 <style lang="scss" scoped>
 .inline-nl-pr-form {
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: var(--sys-spacing-small);
-  align-items: flex-start;
-}
-
-.row {
-  display: flex;
-  align-items: center;
-  gap: var(--sys-spacing-small);
-}
-
-.row--input {
-  flex: 1;
-  min-width: 0;
+  flex-direction: column;
+  gap: var(--sys-spacing-xsmall);
 }
 
-.nl-input {
-  @include mx.pu-font(body);
+.inline-nl-pr-form__field {
   width: 100%;
-  height: calc(var(--sys-spacing-large) + var(--sys-spacing-small) + var(--sys-spacing-xsmall));
-  border: 1px solid var(--sys-color-outline);
-  border-radius: var(--sys-radius-small);
-  background: var(--sys-color-surface-container);
-  color: var(--sys-color-on-surface);
-  padding: 0 var(--sys-spacing-medium);
-  transition:
-    border-color 180ms ease,
-    background-color 180ms ease;
-
-  &::placeholder {
-    color: var(--sys-color-on-surface-variant);
-  }
-
-  &:focus {
-    outline: none;
-    border-color: var(--sys-color-primary);
-    background: var(--sys-color-surface);
-  }
-
-  &:disabled {
-    opacity: var(--sys-opacity-disabled);
-  }
-}
-
-.send-button {
-  @include mx.pu-font(control);
-  min-width: 4.8rem;
-  height: calc(var(--sys-spacing-large) + var(--sys-spacing-small) + var(--sys-spacing-xsmall));
-  border: 1px solid var(--sys-color-primary);
-  border-radius: var(--sys-radius-small);
-  background: var(--sys-color-primary-container);
-  color: var(--sys-color-on-primary-container);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--sys-spacing-xsmall);
-  padding: 0 var(--sys-spacing-small);
-  cursor: pointer;
-  transition:
-    opacity 180ms ease,
-    transform 180ms ease,
-    border-color 180ms ease,
-    background-color 180ms ease;
-
-  &:hover:not(:disabled) {
-    opacity: 0.92;
-    border-color: var(--sys-color-primary);
-  }
-
-  &:active:not(:disabled) {
-    transform: scale(0.98);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--sys-color-primary);
-    outline-offset: 2px;
-  }
-
-  &:disabled {
-    opacity: var(--sys-opacity-disabled);
-    cursor: not-allowed;
-  }
 }
 
-.send-icon {
-  @include mx.pu-icon(small, true);
+.inline-nl-pr-form__controls {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  align-items: stretch;
+  gap: var(--sys-spacing-small);
+  width: 100%;
 }
 
-.spinner {
-  width: 0.9rem;
-  height: 0.9rem;
-  border: 2px solid transparent;
-  border-top-color: currentColor;
-  border-radius: 999px;
-  animation: spin 800ms linear infinite;
+.inline-nl-pr-form__input {
+  min-width: 0;
 }
 
-.voice-button {
-  @include mx.pu-font(control);
-  min-width: calc(var(--sys-spacing-large) + var(--sys-spacing-small) + var(--sys-spacing-xsmall));
-  height: calc(var(--sys-spacing-large) + var(--sys-spacing-small) + var(--sys-spacing-xsmall));
-  border: 1px dashed var(--sys-color-primary);
-  border-radius: var(--sys-radius-small);
-  background: var(--sys-color-primary-container);
-  color: var(--sys-color-on-primary-container);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
+.inline-nl-pr-form__voice-action,
+.inline-nl-pr-form__submit-action {
+  min-width: 2.75rem;
   user-select: none;
   -webkit-user-select: none;
   -webkit-touch-callout: none;
   touch-action: none;
-  cursor: pointer;
-  transition:
-    opacity 180ms ease,
-    transform 180ms ease,
-    border-color 180ms ease,
-    background-color 180ms ease;
-
-  &:hover:not(:disabled) {
-    opacity: 0.92;
-  }
-
-  &:active:not(:disabled) {
-    transform: scale(0.98);
-  }
-
-  &.is-recording {
-    border-style: solid;
-    border-color: var(--sys-color-primary);
-    background: var(--sys-color-primary);
-    color: var(--sys-color-on-primary);
-  }
-
-  &:disabled {
-    opacity: var(--sys-opacity-disabled);
-    cursor: not-allowed;
-  }
 }
 
-.voice-icon {
+.inline-nl-pr-form__icon {
   @include mx.pu-icon(small, true);
 }
 
-.error-message {
-  @include mx.pu-font(control);
-  color: var(--sys-color-error);
-}
-
-.voice-error {
-  margin: 0;
-}
-
-@media (max-width: 768px) {
-  .inline-nl-pr-form {
+@media (max-width: 480px) {
+  .inline-nl-pr-form__controls {
     gap: var(--sys-spacing-xsmall);
   }
-
-  .send-button {
-    min-width: calc(var(--sys-spacing-large) + var(--sys-spacing-small) + var(--sys-spacing-xsmall));
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .send-button,
-  .spinner {
-    transition: none !important;
-    animation: none !important;
-  }
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
 }
 </style>
diff --git a/tasks/design-web-package-integration/deep-ui-refactor/20-slice-plan.md b/tasks/design-web-package-integration/deep-ui-refactor/20-slice-plan.md
index 072e17f1b..0cc307822 100644
--- a/tasks/design-web-package-integration/deep-ui-refactor/20-slice-plan.md
+++ b/tasks/design-web-package-integration/deep-ui-refactor/20-slice-plan.md
@@ -282,7 +282,7 @@ Verification:
 
 ## Slice 10: Composition Pattern Rollout
 
-Status: candidate.
+Status: first rollout pass completed.
 
 Scope:
 
@@ -297,11 +297,11 @@ Initial candidates:
 
 - `InlineNLPRForm.vue`: compact high-signal candidate for `PuForm` +
   `PuFormItem` + `PuInput` + icon `PuButton` + `PuInlineNotice`.
-- `PRPartnerSection.vue`: section-level content/container split with
-  `PuCard`, facts/summary composition, notices, and direct actions.
-- `PRFactsCard.vue`, `AdminNavigationPanel.vue`, and
-  `FormModeNoMatchResult.vue`: medium-confidence candidates that need a short
-  topology note before implementation.
+- `FormModeNoMatchResult.vue`: active Form Mode result-state composition with
+  `PuEmptyState`, `PuInlineNotice`, and direct `PuButton`.
+- `PRFactsCard.vue` and `AdminNavigationPanel.vue`: remaining
+  medium-confidence candidates that need a short topology note before
+  implementation.
 
 Planning notes:
 
@@ -309,7 +309,29 @@ Planning notes:
 - Gesture-heavy surfaces such as the full Form Mode surface still require
   topology mapping before production edits.
 - `AdminCommerceSpuEditor.vue` is explicitly out of Slice 10.
+- `PRPartnerSection.vue` was investigated and found to have no current usage
+  sites, so it is deferred as legacy cleanup rather than active route
+  composition work.
 - With `AdminCommerceSpuEditor.vue` out of scope, no current Slice 10
   candidate should plan around `PuChipInput`; remaining candidates use
   `PuInput`, `PuButton`, `PuInlineNotice`, `PuCard`, `PuDescriptionList`,
   `PuCellGroup`, `PuChip`, or `PuChipGroup` according to their semantics.
+
+Implementation notes:
+
+- Migrated `InlineNLPRForm.vue` from native form/input/buttons/spinner/error
+  text to direct `PuForm`, `PuFormItem`, `PuInput`, `PuButton`, and
+  `PuInlineNotice` composition.
+- Migrated `FormModeNoMatchResult.vue` local no-candidate hero and inline
+  error messages to `PuEmptyState` and `PuInlineNotice`.
+- Kept product-owned state, route events, PR join flow, voice transcript
+  handling, draft persistence, and mutation routing unchanged.
+
+Verification:
+
+- Passed `pnpm --filter @partner-up-dev/frontend build`.
+- Passed `pnpm --filter @partner-up-dev/frontend lint:tokens`.
+- Passed `pnpm test:unit:frontend`.
+- Passed targeted scans for removed local primitive class families.
+- Passed source scan showing no current `PRPartnerSection` usage sites.
+- Passed `git diff --check`.
diff --git a/tasks/design-web-package-integration/deep-ui-refactor/90-composition-pattern-rollout.md b/tasks/design-web-package-integration/deep-ui-refactor/90-composition-pattern-rollout.md
index 454e92205..da602ffd7 100644
--- a/tasks/design-web-package-integration/deep-ui-refactor/90-composition-pattern-rollout.md
+++ b/tasks/design-web-package-integration/deep-ui-refactor/90-composition-pattern-rollout.md
@@ -16,8 +16,8 @@ or composables.
 ## Current Mode
 
 - Input route: `Constraint`.
-- Active mode: `Explore`.
-- Production code status: not started.
+- Active mode: `Execute`.
+- Production code status: first rollout pass implemented and verified.
 - Dependency: Slice 9 has provided the first concrete before/after example.
 
 ## Pattern Definition
@@ -73,7 +73,24 @@ pre-implementation intent.
    submit navigation, and mutation feedback. A one-to-one input swap would not
    remove the real complexity.
 
-2. `apps/frontend/src/domains/pr/ui/sections/PRPartnerSection.vue`
+2. `apps/frontend/src/domains/event/ui/composites/FormModeNoMatchResult.vue`
+
+   Current shape: candidate list, custom join-error text, a local no-match
+   hero, create fallback action, and local create-error text.
+
+   Candidate composition: keep `PRPreviewCard` and `PRJoinAction` as
+   domain-owned behavior components, and replace the package-covered local
+   empty/error primitives with `PuEmptyState`, `PuInlineNotice`, and existing
+   direct `PuButton` usage.
+
+   Why this matches the pattern: it is an active Form Mode route state that
+   mixes product handoff events with local UI primitives. The useful split is
+   to let package components own empty/error/action feedback while preserving
+   the route-level Form Mode state machine.
+
+### Deferred After Investigation
+
+1. `apps/frontend/src/domains/pr/ui/sections/PRPartnerSection.vue`
 
    Current shape: custom section shell, summary cards, action bar, inline
    error/availability notes, roster panel, timeline panel, reminder panel, and
@@ -88,6 +105,13 @@ pre-implementation intent.
    container styling. Package composition can make each region's semantic role
    explicit.
 
+   Slice 10 finding: no `<PRPartnerSection>` usage site exists in current
+   source. The active PR detail route has already moved through
+   `PRFactsCard.vue`, dedicated participation actions, and notification
+   subscription sections. Because this component is currently unmounted, it is
+   not a good production-code target for the first rollout pass. Do not reconnect
+   it to the route as part of package migration.
+
 ### Medium-Confidence Candidates
 
 3. `apps/frontend/src/domains/pr/ui/composites/PRFactsCard.vue`
@@ -115,17 +139,6 @@ pre-implementation intent.
    Why medium: nav semantics and active-route behavior need careful mapping
    before replacing group controls.
 
-5. `apps/frontend/src/domains/event/ui/composites/FormModeNoMatchResult.vue`
-
-   Current shape: candidate list, join action slot, local inline messages,
-   no-match empty hero, and fallback create command.
-
-   Candidate composition: `PuInlineNotice`, `PuEmptyState`, `PuButton`, and
-   card/list composition around `PRPreviewCard`.
-
-   Why medium: useful cleanup, but smaller than the pilot and may not justify
-   extraction unless it becomes part of a larger Form Mode surface split.
-
 ### Investigate Before Scheduling
 
 - `apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceSpuEditor.vue`
@@ -151,12 +164,38 @@ Slice 10 should not immediately implement every candidate. It should:
 4. implement one candidate at a time
 5. update this packet with what the pattern did and did not generalize to
 
-Current recommended first follow-up after Slice 9:
+Current first rollout pass:
 
 - `InlineNLPRForm.vue`, because it is compact, user-visible, and has a clear
   package composition target.
-- `PRPartnerSection.vue`, because it exercises the same content/container
-  separation principle at a larger section scale.
+- `FormModeNoMatchResult.vue`, because it is still on the active Form Mode
+  path and lets the rollout apply the same composition principle without
+  touching the route state machine.
+
+`PRPartnerSection.vue` was investigated and deferred because it currently has
+no usage site.
+
+## Slice 10 Implementation Notes
+
+### `InlineNLPRForm.vue`
+
+- Replaced the native `<form>` with direct `PuForm`.
+- Replaced local text input shell with `PuFormItem` + `PuInput`.
+- Replaced local voice and submit buttons with direct `PuButton`, including
+  native submit/button actions, package loading state, and accessible icon-only
+  labels.
+- Replaced local voice and submit error text with `PuInlineNotice`.
+- Removed local primitive CSS for `nl-input`, `send-button`, `voice-button`,
+  `spinner`, and `error-message`.
+- Kept draft persistence, typewriter fallback text, WeChat voice transcript
+  merging, auth bootstrap, mutation submission, and routing as PR-domain logic.
+
+### `FormModeNoMatchResult.vue`
+
+- Replaced local join and create error text with `PuInlineNotice`.
+- Replaced the no-candidate hero markup with `PuEmptyState`.
+- Kept `PRPreviewCard`, `PRJoinAction`, candidate telemetry emits, create
+  fallback emit, and Form Mode route state ownership unchanged.
 
 ## PuChipInput Review
 
@@ -164,15 +203,14 @@ Current Slice 10 candidates should not depend on `PuChipInput`.
 
 - `InlineNLPRForm.vue` is a single natural-language text entry surface:
   use `PuInput`/`PuButton`/`PuInlineNotice`, not chip entry.
-- `PRPartnerSection.vue` owns facts, actions, roster, timeline, and reminder
-  panels. It may use `PuCard`, `PuBentoItem`, `PuDescriptionList`,
-  `PuCellGroup`, and notices, not editable token input.
+- `FormModeNoMatchResult.vue` owns candidate/result composition and local
+  empty/error states, not token entry.
 - `PRFactsCard.vue` uses chip display for preferences and roster preview;
   that is `PuChip`/`PuChipGroup`, not `PuChipInput`.
 - `AdminNavigationPanel.vue` is navigation grouping and active-route state,
   not token entry.
-- `FormModeNoMatchResult.vue` is candidate/result composition, not token
-  entry.
+- `PRPartnerSection.vue` is currently unmounted legacy cleanup, not a current
+  `PuChipInput` candidate.
 
 The only original Slice 10 candidate with a credible `PuChipInput` path was
 `AdminCommerceSpuEditor.vue`, through plain string-list editors such as hero
@@ -194,3 +232,13 @@ For each production implementation:
 - browser screenshot only when layout density or route-level composition
   materially changes
 - `git diff --check`
+
+Slice 10 first rollout verification:
+
+- Passed `pnpm --filter @partner-up-dev/frontend build`.
+- Passed `pnpm --filter @partner-up-dev/frontend lint:tokens`.
+- Passed `pnpm test:unit:frontend`.
+- Passed targeted scans for removed `InlineNLPRForm` and
+  `FormModeNoMatchResult` local primitive class families.
+- Passed source scan showing no current `PRPartnerSection` usage sites.
+- Passed `git diff --check`.
diff --git a/tasks/design-web-package-integration/deep-ui-refactor/README.md b/tasks/design-web-package-integration/deep-ui-refactor/README.md
index 73899d10d..3150eda1f 100644
--- a/tasks/design-web-package-integration/deep-ui-refactor/README.md
+++ b/tasks/design-web-package-integration/deep-ui-refactor/README.md
@@ -72,6 +72,9 @@ and product interaction state in one file.
   `90-composition-pattern-rollout.md`: Slice 10 should use the Slice 9
   evidence to identify and implement similar composition-plus-refactor
   candidates, not treat this as a broad mechanical sweep.
+- Slice 10 first rollout pass migrated `InlineNLPRForm.vue` and
+  `FormModeNoMatchResult.vue` on active product paths. `PRPartnerSection.vue`
+  was investigated and deferred because current source has no usage site.
 
 ## Package API Constraints
 

From 75b2b409b209300d4c4b7c0234f566da3cb8c5c4 Mon Sep 17 00:00:00 2001
From: Lanzhijiang <lanzhijiang@foxmail.com>
Date: Tue, 16 Jun 2026 14:05:26 +0800
Subject: [PATCH 14/94] refactor(frontend): migrate upload select controls

---
 .../AnchorEventDefaultMeetingPointEditor.vue  |  66 ++-
 .../components/AnchorEventMediaEditor.vue     | 143 +++++--
 .../admin/ui/poi/sections/PoiBasicSection.vue | 392 ++++++++++--------
 .../admin/ui/pr/views/AdminPRBasicView.vue    | 272 ++++++++----
 .../admin/use-cases/poi/useAdminPoiEditor.ts  |  27 +-
 .../poi/useAdminPoiManagementWorkspace.ts     |   6 +-
 .../event/ui/controls/PRTimeWindowEditor.vue  | 134 +++---
 .../feedback/ui/FeedbackQuestionnaireForm.vue | 184 +++++++-
 .../pages/AdminFeedbackQuestionnairesPage.vue |  58 ++-
 apps/frontend/src/pages/AdminPaymentPage.vue  |  86 +++-
 apps/frontend/src/pages/AdminPoisPage.vue     |  12 +-
 .../src/pages/AdminRideHailingPage.vue        |  59 ++-
 .../src/pages/LocationApplicationPage.vue     |  54 ++-
 apps/frontend/src/pages/MePage.vue            | 100 +++--
 .../src/shared/ui/forms/MultiStopToggle.vue   | 230 ----------
 apps/frontend/src/shared/upload/AGENTS.md     |   4 +-
 .../src/shared/upload/ImageUrlInput.vue       | 181 --------
 .../shared/upload/useDesignWebImageUpload.ts  | 337 +++++++++++++++
 .../deep-ui-refactor/20-slice-plan.md         |  61 +++
 .../95-slice11-upload-select-toggle.md        | 199 +++++++++
 .../deep-ui-refactor/README.md                |  26 ++
 21 files changed, 1689 insertions(+), 942 deletions(-)
 delete mode 100644 apps/frontend/src/shared/ui/forms/MultiStopToggle.vue
 delete mode 100644 apps/frontend/src/shared/upload/ImageUrlInput.vue
 create mode 100644 apps/frontend/src/shared/upload/useDesignWebImageUpload.ts
 create mode 100644 tasks/design-web-package-integration/deep-ui-refactor/95-slice11-upload-select-toggle.md

diff --git a/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventDefaultMeetingPointEditor.vue b/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventDefaultMeetingPointEditor.vue
index 07d807cf5..f9c9a3e06 100644
--- a/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventDefaultMeetingPointEditor.vue
+++ b/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventDefaultMeetingPointEditor.vue
@@ -14,22 +14,80 @@
       :label="t('adminPR.eventMeetingPointImageUrlLabel')"
       for-id="anchor-event-meeting-point-image-url"
     >
-      <PuInput
+      <PuFileUpload
         id="anchor-event-meeting-point-image-url"
-        v-model="form.meetingPointImageUrl"
-        native-type="url"
+        v-model="meetingPointImageUploadValue"
+        mode="url"
+        layout="inline"
+        :url-placeholder="t('adminPR.eventImageUrlPlaceholder')"
+        @add="handleMeetingPointImageAdd"
+        @remove="handleMeetingPointImageRemove"
+        @reject="handleMeetingPointImageReject"
+        @update:model-value="handleMeetingPointImageUpdate"
+      />
+      <PuInlineNotice
+        v-if="meetingPointImageError"
+        tone="error"
+        :message="meetingPointImageError"
       />
     </PuFormItem>
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import type { AnchorEventEditorForm } from "@/domains/admin/ui/anchor-event/anchorEventEditorTypes";
-import { PuFormItem, PuInput, PuTextarea } from "@partner-up-dev/design-web";
+import { imageUploadItemFromUrl } from "@/shared/upload/useDesignWebImageUpload";
+import {
+  PuFileUpload,
+  PuFormItem,
+  PuInlineNotice,
+  PuTextarea,
+  type PuFileUploadItem,
+  type PuFileUploadRejection,
+  type PuFileUploadValue,
+} from "@partner-up-dev/design-web";
 
 const form = defineModel<AnchorEventEditorForm>({ required: true });
 const { t } = useI18n();
+const meetingPointImageError = ref<string | null>(null);
+
+const meetingPointImageUploadValue = computed<PuFileUploadValue>({
+  get: () => {
+    const imageUrl = form.value.meetingPointImageUrl.trim();
+    return imageUrl ? imageUploadItemFromUrl(imageUrl) : null;
+  },
+  set: (value) => {
+    form.value.meetingPointImageUrl =
+      value?.source === "url" && value.url ? value.url : "";
+  },
+});
+
+const handleMeetingPointImageUpdate = (
+  value: PuFileUploadValue,
+): void => {
+  meetingPointImageUploadValue.value = value;
+  meetingPointImageError.value = null;
+};
+
+const handleMeetingPointImageAdd = (item: PuFileUploadItem): void => {
+  if (item.source === "url" && item.url) {
+    form.value.meetingPointImageUrl = item.url;
+    meetingPointImageError.value = null;
+  }
+};
+
+const handleMeetingPointImageRemove = (): void => {
+  form.value.meetingPointImageUrl = "";
+  meetingPointImageError.value = null;
+};
+
+const handleMeetingPointImageReject = (
+  rejections: PuFileUploadRejection[],
+): void => {
+  meetingPointImageError.value = rejections[0]?.message ?? null;
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventMediaEditor.vue b/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventMediaEditor.vue
index 5d49dda78..a4ce377f0 100644
--- a/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventMediaEditor.vue
+++ b/apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventMediaEditor.vue
@@ -1,39 +1,74 @@
 <template>
   <div class="anchor-event-media-editor">
-    <div class="field">
-      <span class="field-label">{{ t("adminPR.eventCoverImageLabel") }}</span>
-      <ImageUrlInput
-        v-model="form.coverImage"
-        v-model:uploading="coverUploading"
-        input-id="admin-anchor-event-cover-image"
-        purpose="anchor-event-cover"
+    <PuFormItem
+      :label="t('adminPR.eventCoverImageLabel')"
+      for-id="admin-anchor-event-cover-image"
+    >
+      <PuFileUpload
+        id="admin-anchor-event-cover-image"
+        v-model="coverUploadValue"
+        mode="both"
+        layout="panel"
+        :accept="IMAGE_UPLOAD_ACCEPT"
         :placeholder="t('adminPR.eventImageUrlPlaceholder')"
-        :upload-label="t('adminPR.uploadEventCoverImageAction')"
-        :uploading-label="t('adminPR.uploadingEventImage')"
-        :preview-alt="t('adminPR.eventCoverImagePreviewAlt')"
+        :url-placeholder="t('adminPR.eventImageUrlPlaceholder')"
+        :choose-label="t('adminPR.uploadEventCoverImageAction')"
+        :drop-label="t('adminPR.uploadEventCoverImageAction')"
+        :replace-label="t('adminPR.uploadEventCoverImageAction')"
+        @add="handleCoverUploadAdd"
+        @remove="handleCoverUploadRemove"
+        @reject="handleCoverUploadReject"
+        @update:model-value="handleCoverUploadUpdate"
       />
-    </div>
+      <PuInlineNotice
+        v-if="coverUploadError"
+        tone="error"
+        :message="coverUploadError"
+      />
+    </PuFormItem>
 
-    <div class="field">
-      <span class="field-label">{{ t("adminPR.eventBetaGroupQrCodeLabel") }}</span>
-      <ImageUrlInput
-        v-model="form.betaGroupQrCode"
-        v-model:uploading="betaGroupQrUploading"
-        input-id="admin-anchor-event-beta-group-qr"
-        purpose="anchor-event-beta-group-qr"
+    <PuFormItem
+      :label="t('adminPR.eventBetaGroupQrCodeLabel')"
+      for-id="admin-anchor-event-beta-group-qr"
+    >
+      <PuFileUpload
+        id="admin-anchor-event-beta-group-qr"
+        v-model="betaGroupQrUploadValue"
+        mode="both"
+        layout="panel"
+        :accept="IMAGE_UPLOAD_ACCEPT"
         :placeholder="t('adminPR.eventImageUrlPlaceholder')"
-        :upload-label="t('adminPR.uploadEventBetaGroupQrCodeAction')"
-        :uploading-label="t('adminPR.uploadingEventImage')"
-        :preview-alt="t('adminPR.eventBetaGroupQrCodePreviewAlt')"
+        :url-placeholder="t('adminPR.eventImageUrlPlaceholder')"
+        :choose-label="t('adminPR.uploadEventBetaGroupQrCodeAction')"
+        :drop-label="t('adminPR.uploadEventBetaGroupQrCodeAction')"
+        :replace-label="t('adminPR.uploadEventBetaGroupQrCodeAction')"
+        @add="handleBetaGroupQrUploadAdd"
+        @remove="handleBetaGroupQrUploadRemove"
+        @reject="handleBetaGroupQrUploadReject"
+        @update:model-value="handleBetaGroupQrUploadUpdate"
+      />
+      <PuInlineNotice
+        v-if="betaGroupQrUploadError"
+        tone="error"
+        :message="betaGroupQrUploadError"
       />
-    </div>
+    </PuFormItem>
   </div>
 </template>
 
 <script setup lang="ts">
+import { watch } from "vue";
 import { useI18n } from "vue-i18n";
-import ImageUrlInput from "@/shared/upload/ImageUrlInput.vue";
 import type { AnchorEventEditorForm } from "@/domains/admin/ui/anchor-event/anchorEventEditorTypes";
+import {
+  PuFileUpload,
+  PuFormItem,
+  PuInlineNotice,
+} from "@partner-up-dev/design-web";
+import {
+  IMAGE_UPLOAD_ACCEPT,
+  useSingleImageUploadField,
+} from "@/shared/upload/useDesignWebImageUpload";
 
 const form = defineModel<AnchorEventEditorForm>({ required: true });
 const coverUploading = defineModel<boolean>("coverUploading", { required: true });
@@ -41,11 +76,60 @@ const betaGroupQrUploading = defineModel<boolean>("betaGroupQrUploading", {
   required: true,
 });
 const { t } = useI18n();
+
+const {
+  uploadValue: coverUploadValue,
+  isUploading: isCoverUploading,
+  errorMessage: coverUploadError,
+  handleUpdate: handleCoverUploadUpdate,
+  handleAdd: handleCoverUploadAdd,
+  handleRemove: handleCoverUploadRemove,
+  handleReject: handleCoverUploadReject,
+} = useSingleImageUploadField({
+  getUrl: () => form.value.coverImage,
+  setUrl: (url) => {
+    form.value.coverImage = url;
+  },
+  purpose: "anchor-event-cover",
+  uploadingMessage: t("adminPR.uploadingEventImage"),
+});
+
+const {
+  uploadValue: betaGroupQrUploadValue,
+  isUploading: isBetaGroupQrUploading,
+  errorMessage: betaGroupQrUploadError,
+  handleUpdate: handleBetaGroupQrUploadUpdate,
+  handleAdd: handleBetaGroupQrUploadAdd,
+  handleRemove: handleBetaGroupQrUploadRemove,
+  handleReject: handleBetaGroupQrUploadReject,
+} = useSingleImageUploadField({
+  getUrl: () => form.value.betaGroupQrCode,
+  setUrl: (url) => {
+    form.value.betaGroupQrCode = url;
+  },
+  purpose: "anchor-event-beta-group-qr",
+  uploadingMessage: t("adminPR.uploadingEventImage"),
+});
+
+watch(
+  isCoverUploading,
+  (value) => {
+    coverUploading.value = value;
+  },
+  { immediate: true },
+);
+
+watch(
+  isBetaGroupQrUploading,
+  (value) => {
+    betaGroupQrUploading.value = value;
+  },
+  { immediate: true },
+);
 </script>
 
 <style lang="scss" scoped>
-.anchor-event-media-editor,
-.field {
+.anchor-event-media-editor {
   display: flex;
   flex-direction: column;
 }
@@ -53,13 +137,4 @@ const { t } = useI18n();
 .anchor-event-media-editor {
   gap: var(--sys-spacing-small);
 }
-
-.field {
-  gap: var(--sys-spacing-xsmall);
-}
-
-.field-label {
-  @include mx.pu-font(control);
-  color: var(--sys-color-on-surface-variant);
-}
 </style>
diff --git a/apps/frontend/src/domains/admin/ui/poi/sections/PoiBasicSection.vue b/apps/frontend/src/domains/admin/ui/poi/sections/PoiBasicSection.vue
index 2128efcd6..2b461a7a1 100644
--- a/apps/frontend/src/domains/admin/ui/poi/sections/PoiBasicSection.vue
+++ b/apps/frontend/src/domains/admin/ui/poi/sections/PoiBasicSection.vue
@@ -86,76 +86,29 @@
         {{ t("adminPois.galleryCount", { count: selectedPoiGallery.length }) }}
       </p>
 
-      <div class="field">
-        <span class="field-label">{{ t("adminPois.galleryHint") }}</span>
-        <div class="manual-url-row">
-          <ImageUrlInput
-            v-model="manualGalleryUrl"
-            v-model:uploading="isUploadingGalleryImage"
-            input-id="admin-poi-gallery-image-url"
-            purpose="poi"
-            :placeholder="t('adminPois.manualUrlPlaceholder')"
-            :upload-label="t('adminPois.uploadImageAction')"
-            :uploading-label="t('adminPois.uploadingImage')"
-            :preview-alt="
-              t('adminPois.imageAlt', {
-                index: selectedPoiGallery.length + 1,
-                poiId: selectedPoiId ?? '',
-              })
-            "
-            :disabled="selectedPoiId === null"
-            @uploaded="emit('gallery-uploaded', $event)"
-          />
-          <PuButton
-            shape="pill"
-            tone="neutral" variant="outline"
-            size="sm"
-
-            :disabled="selectedPoiId === null"
-            @click="emit('add-manual-url')"
-          >
-            {{ t("adminPois.addUrlAction") }}
-          </PuButton>
-        </div>
-      </div>
-
-      <p v-if="selectedPoiGallery.length === 0" class="hint">
-        {{ t("adminPois.emptyGallery") }}
-      </p>
-      <div v-else class="gallery-grid">
-        <article
-          v-for="(imageUrl, index) in selectedPoiGallery"
-          :key="`${selectedPoiId ?? 'poi'}-gallery-${index}`"
-          class="gallery-item"
-        >
-          <img
-            :src="imageUrl"
-            :alt="t('adminPois.imageAlt', { index: index + 1, poiId: selectedPoiId ?? '' })"
-            class="gallery-image"
-          />
-          <p class="gallery-url">{{ imageUrl }}</p>
-          <div class="gallery-actions">
-            <PuButton
-              shape="pill"
-              tone="neutral" variant="outline"
-              size="sm"
-
-              @click="copyGalleryUrl(imageUrl)"
-            >
-              {{ t("adminPois.copyUrlAction") }}
-            </PuButton>
-            <PuButton
-              shape="pill"
-              tone="danger" variant="outline"
-              size="sm"
-
-              @click="emit('remove-gallery-image', index)"
-            >
-              {{ t("adminPois.removeImageAction") }}
-            </PuButton>
-          </div>
-        </article>
-      </div>
+      <PuFilesUpload
+        v-model="galleryUploadValue"
+        mode="both"
+        layout="panel"
+        :accept="IMAGE_UPLOAD_ACCEPT"
+        :disabled="selectedPoiId === null"
+        :title="t('adminPois.galleryHint')"
+        :description="t('adminPois.emptyGallery')"
+        :choose-label="t('adminPois.uploadImageAction')"
+        :drop-label="t('adminPois.uploadImageAction')"
+        :drop-description="t('adminPois.galleryHint')"
+        :url-placeholder="t('adminPois.manualUrlPlaceholder')"
+        :url-add-label="t('adminPois.addUrlAction')"
+        @add="handleGalleryUploadAdd"
+        @remove="handleGalleryUploadRemove"
+        @reject="handleGalleryUploadReject"
+        @update:model-value="handleGalleryUploadUpdate"
+      />
+      <PuInlineNotice
+        v-if="galleryUploadError"
+        tone="error"
+        :message="galleryUploadError"
+      />
     </BentoItem>
 
     <BentoItem :title="t('adminPois.availabilityAndCapacityTitle')" span="full">
@@ -210,29 +163,29 @@
         </div>
 
         <div class="grid">
-          <label class="field">
-            <span class="field-label">{{ t("adminPois.ruleModeLabel") }}</span>
-            <select
-              v-model="rule.mode"
-              class="field-input"
-              @change="emit('mark-dirty')"
-            >
-              <option value="INCLUDE">{{ t("adminPois.ruleModeInclude") }}</option>
-              <option value="EXCLUDE">{{ t("adminPois.ruleModeExclude") }}</option>
-            </select>
-          </label>
-
-          <label class="field">
-            <span class="field-label">{{ t("adminPois.ruleKindLabel") }}</span>
-            <select
-              v-model="rule.kind"
-              class="field-input"
-              @change="emit('mark-dirty')"
-            >
-              <option value="ABSOLUTE">{{ t("adminPois.ruleKindAbsolute") }}</option>
-              <option value="RECURRING">{{ t("adminPois.ruleKindRecurring") }}</option>
-            </select>
-          </label>
+          <PuFormItem
+            :label="t('adminPois.ruleModeLabel')"
+            :for-id="`admin-pois-rule-${index}-mode`"
+          >
+            <PuSelect
+              :id="`admin-pois-rule-${index}-mode`"
+              :model-value="rule.mode"
+              :options="ruleModeOptions"
+              @update:model-value="updateRuleMode(rule, $event)"
+            />
+          </PuFormItem>
+
+          <PuFormItem
+            :label="t('adminPois.ruleKindLabel')"
+            :for-id="`admin-pois-rule-${index}-kind`"
+          >
+            <PuSelect
+              :id="`admin-pois-rule-${index}-kind`"
+              :model-value="rule.kind"
+              :options="ruleKindOptions"
+              @update:model-value="updateRuleKind(rule, $event)"
+            />
+          </PuFormItem>
 
           <template v-if="rule.kind === 'ABSOLUTE'">
             <PuFormItem
@@ -261,19 +214,17 @@
           </template>
 
           <template v-else>
-            <label class="field">
-              <span class="field-label">{{ t("adminPois.ruleFrequencyLabel") }}</span>
-              <select
-                v-model="rule.frequency"
-                class="field-input"
-                @change="emit('mark-dirty')"
-              >
-                <option value="DAILY">{{ t("adminPois.frequencyDaily") }}</option>
-                <option value="WEEKLY">{{ t("adminPois.frequencyWeekly") }}</option>
-                <option value="MONTHLY">{{ t("adminPois.frequencyMonthly") }}</option>
-                <option value="YEARLY">{{ t("adminPois.frequencyYearly") }}</option>
-              </select>
-            </label>
+            <PuFormItem
+              :label="t('adminPois.ruleFrequencyLabel')"
+              :for-id="`admin-pois-rule-${index}-frequency`"
+            >
+              <PuSelect
+                :id="`admin-pois-rule-${index}-frequency`"
+                :model-value="rule.frequency"
+                :options="ruleFrequencyOptions"
+                @update:model-value="updateRuleFrequency(rule, $event)"
+              />
+            </PuFormItem>
 
             <label class="field">
               <span class="field-label">{{ t("adminPois.ruleStartTimeLabel") }}</span>
@@ -354,16 +305,29 @@
           ></textarea>
         </label>
 
-        <label class="field">
-          <span class="field-label">{{
-            t("adminPois.meetingPointImageUrlLabel")
-          }}</span>
-          <input
-            v-model="selectedPoiMeetingPointImageUrl"
-            class="field-input"
+        <PuFormItem
+          :label="t('adminPois.meetingPointImageUrlLabel')"
+          for-id="admin-pois-meeting-point-image-url"
+        >
+          <PuFileUpload
+            id="admin-pois-meeting-point-image-url"
+            v-model="meetingPointImageUploadValue"
+            mode="url"
+            layout="inline"
             :disabled="selectedPoiId === null"
+            :url-placeholder="t('adminPois.manualUrlPlaceholder')"
+            :url-add-label="t('adminPois.addUrlAction')"
+            @add="handleMeetingPointImageAdd"
+            @remove="handleMeetingPointImageRemove"
+            @reject="handleMeetingPointImageReject"
+            @update:model-value="handleMeetingPointImageUpdate"
           />
-        </label>
+          <PuInlineNotice
+            v-if="meetingPointImageError"
+            tone="error"
+            :message="meetingPointImageError"
+          />
+        </PuFormItem>
       </div>
     </BentoItem>
   </BentoLayout>
@@ -386,8 +350,25 @@ import type { PickedLocation } from "@/domains/location/model/location-picker";
 import LocationPickerModal from "@/domains/location/ui/LocationPickerModal.vue";
 import BentoItem from "@/domains/admin/ui/layout/BentoItem.vue";
 import BentoLayout from "@/domains/admin/ui/layout/BentoLayout.vue";
-import ImageUrlInput from "@/shared/upload/ImageUrlInput.vue";
-import { PuButton, PuFormItem, PuInput } from "@partner-up-dev/design-web";
+import {
+  IMAGE_UPLOAD_ACCEPT,
+  imageUploadItemFromUrl,
+  useGalleryImageUploadField,
+} from "@/shared/upload/useDesignWebImageUpload";
+import {
+  PuButton,
+  PuFileUpload,
+  PuFilesUpload,
+  PuFormItem,
+  PuInlineNotice,
+  PuInput,
+  PuSelect,
+  type PuFileUploadItem,
+  type PuFileUploadRejection,
+  type PuFileUploadValue,
+  type PuSelectOption,
+  type PuSelectValue,
+} from "@partner-up-dev/design-web";
 
 type PoiRecord = NonNullable<AdminPoisResponse>[number];
 
@@ -407,9 +388,7 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-  "add-manual-url": [];
-  "gallery-uploaded": [url: string];
-  "remove-gallery-image": [index: number];
+  "update-gallery": [gallery: string[]];
   "pick-location": [location: PickedLocation];
   "clear-coordinates": [];
   "add-availability-rule": [];
@@ -418,12 +397,6 @@ const emit = defineEmits<{
   "save-poi": [];
 }>();
 
-const manualGalleryUrl = defineModel<string>("manualGalleryUrl", {
-  required: true,
-});
-const isUploadingGalleryImage = defineModel<boolean>("isUploadingGalleryImage", {
-  required: true,
-});
 const selectedPoiCapText = defineModel<string>("selectedPoiCapText", {
   required: true,
 });
@@ -441,6 +414,96 @@ const selectedPoiMeetingPointImageUrl = defineModel<string>(
 
 const { t } = useI18n();
 const isLocationPickerOpen = ref(false);
+const meetingPointImageError = ref<string | null>(null);
+
+const {
+  uploadValue: galleryUploadValue,
+  errorMessage: galleryUploadError,
+  handleUpdate: handleGalleryUploadUpdate,
+  handleAdd: handleGalleryUploadAdd,
+  handleRemove: handleGalleryUploadRemove,
+  handleReject: handleGalleryUploadReject,
+} = useGalleryImageUploadField({
+  getUrls: () => props.selectedPoiGallery,
+  setUrls: (gallery) => {
+    emit("update-gallery", gallery);
+  },
+  purpose: "poi",
+  uploadingMessage: t("adminPois.uploadingImage"),
+});
+
+const ruleModeOptions = computed<PuSelectOption[]>(() => [
+  { label: t("adminPois.ruleModeInclude"), value: "INCLUDE" },
+  { label: t("adminPois.ruleModeExclude"), value: "EXCLUDE" },
+]);
+
+const ruleKindOptions = computed<PuSelectOption[]>(() => [
+  { label: t("adminPois.ruleKindAbsolute"), value: "ABSOLUTE" },
+  { label: t("adminPois.ruleKindRecurring"), value: "RECURRING" },
+]);
+
+const ruleFrequencyOptions = computed<PuSelectOption[]>(() => [
+  { label: t("adminPois.frequencyDaily"), value: "DAILY" },
+  { label: t("adminPois.frequencyWeekly"), value: "WEEKLY" },
+  { label: t("adminPois.frequencyMonthly"), value: "MONTHLY" },
+  { label: t("adminPois.frequencyYearly"), value: "YEARLY" },
+]);
+
+const isRuleMode = (
+  value: PuSelectValue,
+): value is EditableAvailabilityRule["mode"] =>
+  value === "INCLUDE" || value === "EXCLUDE";
+
+const isRuleKind = (
+  value: PuSelectValue,
+): value is EditableAvailabilityRule["kind"] =>
+  value === "ABSOLUTE" || value === "RECURRING";
+
+const isRuleFrequency = (
+  value: PuSelectValue,
+): value is EditableAvailabilityRule["frequency"] =>
+  value === "DAILY" ||
+  value === "WEEKLY" ||
+  value === "MONTHLY" ||
+  value === "YEARLY";
+
+const updateRuleMode = (
+  rule: EditableAvailabilityRule,
+  value: PuSelectValue,
+): void => {
+  if (!isRuleMode(value)) return;
+  rule.mode = value;
+  emit("mark-dirty");
+};
+
+const updateRuleKind = (
+  rule: EditableAvailabilityRule,
+  value: PuSelectValue,
+): void => {
+  if (!isRuleKind(value)) return;
+  rule.kind = value;
+  emit("mark-dirty");
+};
+
+const updateRuleFrequency = (
+  rule: EditableAvailabilityRule,
+  value: PuSelectValue,
+): void => {
+  if (!isRuleFrequency(value)) return;
+  rule.frequency = value;
+  emit("mark-dirty");
+};
+
+const meetingPointImageUploadValue = computed<PuFileUploadValue>({
+  get: () => {
+    const imageUrl = selectedPoiMeetingPointImageUrl.value.trim();
+    return imageUrl ? imageUploadItemFromUrl(imageUrl) : null;
+  },
+  set: (value) => {
+    selectedPoiMeetingPointImageUrl.value =
+      value?.source === "url" && value.url ? value.url : "";
+  },
+});
 
 const statusLabel = (status: PoiRecord["status"]): string => {
   switch (status) {
@@ -463,14 +526,35 @@ const currentPoiMeta = computed(() => {
   });
 });
 
-const copyGalleryUrl = (imageUrl: string): void => {
-  void navigator.clipboard?.writeText(imageUrl);
-};
-
 const handleLocationPicked = (location: PickedLocation) => {
   emit("pick-location", location);
   isLocationPickerOpen.value = false;
 };
+
+const handleMeetingPointImageUpdate = (
+  value: PuFileUploadValue,
+): void => {
+  meetingPointImageUploadValue.value = value;
+  meetingPointImageError.value = null;
+};
+
+const handleMeetingPointImageAdd = (item: PuFileUploadItem): void => {
+  if (item.source === "url" && item.url) {
+    selectedPoiMeetingPointImageUrl.value = item.url;
+    meetingPointImageError.value = null;
+  }
+};
+
+const handleMeetingPointImageRemove = (): void => {
+  selectedPoiMeetingPointImageUrl.value = "";
+  meetingPointImageError.value = null;
+};
+
+const handleMeetingPointImageReject = (
+  rejections: PuFileUploadRejection[],
+): void => {
+  meetingPointImageError.value = rejections[0]?.message ?? null;
+};
 </script>
 
 <style lang="scss" scoped>
@@ -558,12 +642,6 @@ const handleLocationPicked = (location: PickedLocation) => {
   background: var(--sys-color-surface-container);
 }
 
-.manual-url-row {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: var(--sys-spacing-small);
-}
-
 .coordinate-field {
   padding: var(--sys-spacing-small);
   border: 1px solid var(--sys-color-outline-variant);
@@ -592,49 +670,8 @@ const handleLocationPicked = (location: PickedLocation) => {
   overflow-wrap: anywhere;
 }
 
-.gallery-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  gap: var(--sys-spacing-small);
-}
-
-.gallery-item {
-  display: grid;
-  grid-template-columns: 6.5rem minmax(0, 1fr);
-  gap: var(--sys-spacing-xsmall);
-  padding: var(--sys-spacing-small);
-  border: 1px solid var(--sys-color-outline-variant);
-  border-radius: var(--sys-radius-medium);
-  background: var(--sys-color-surface);
-}
-
-.gallery-image {
-  width: 100%;
-  height: 6.5rem;
-  object-fit: cover;
-  border-radius: var(--sys-radius-medium);
-  background: var(--sys-color-surface-container);
-  grid-row: span 2;
-}
-
-.gallery-url {
-  @include mx.pu-font(support);
-  margin: 0;
-  color: var(--sys-color-on-surface-variant);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.gallery-actions {
-  display: flex;
-  gap: var(--sys-spacing-xsmall);
-  flex-wrap: wrap;
-}
-
 @media (max-width: 720px) {
   .grid,
-  .manual-url-row,
   .coordinate-field__header {
     grid-template-columns: 1fr;
   }
@@ -647,8 +684,5 @@ const handleLocationPicked = (location: PickedLocation) => {
     justify-content: flex-start;
   }
 
-  .gallery-grid {
-    grid-template-columns: 1fr;
-  }
 }
 </style>
diff --git a/apps/frontend/src/domains/admin/ui/pr/views/AdminPRBasicView.vue b/apps/frontend/src/domains/admin/ui/pr/views/AdminPRBasicView.vue
index 578857d37..63129a049 100644
--- a/apps/frontend/src/domains/admin/ui/pr/views/AdminPRBasicView.vue
+++ b/apps/frontend/src/domains/admin/ui/pr/views/AdminPRBasicView.vue
@@ -164,15 +164,28 @@
                   ></textarea>
                 </label>
 
-                <label class="field">
-                  <span class="field-label">
-                    {{ t("adminPR.prMeetingPointImageUrlLabel") }}
-                  </span>
-                  <input
-                    v-model="prForm.meetingPointImageUrl"
-                    class="field-input"
+                <PuFormItem
+                  :label="t('adminPR.prMeetingPointImageUrlLabel')"
+                  for-id="admin-pr-meeting-point-image-url"
+                >
+                  <PuFileUpload
+                    id="admin-pr-meeting-point-image-url"
+                    v-model="prMeetingPointImageUploadValue"
+                    mode="url"
+                    layout="inline"
+                    :url-placeholder="t('adminPR.eventImageUrlPlaceholder')"
+                    :url-add-label="t('adminPois.addUrlAction')"
+                    @add="handlePRMeetingPointImageAdd"
+                    @remove="handlePRMeetingPointImageRemove"
+                    @reject="handlePRMeetingPointImageReject"
+                    @update:model-value="handlePRMeetingPointImageUpdate"
                   />
-                </label>
+                  <PuInlineNotice
+                    v-if="prMeetingPointImageError"
+                    tone="error"
+                    :message="prMeetingPointImageError"
+                  />
+                </PuFormItem>
 
                 <div class="grid-2">
                   <label class="field">
@@ -236,31 +249,27 @@
                   source="PR"
                 />
 
-                <label class="field">
-                  <span class="field-label">{{
-                    t("adminPR.prStatusLabel")
-                  }}</span>
-                  <select v-model="prForm.status" class="field-input">
-                    <option value="OPEN">OPEN</option>
-                    <option value="READY">READY</option>
-                    <option value="ACTIVE">ACTIVE</option>
-                    <option value="CLOSED">CLOSED</option>
-                  </select>
-                </label>
+                <PuFormItem
+                  :label="t('adminPR.prStatusLabel')"
+                  for-id="admin-pr-status"
+                >
+                  <PuSelect
+                    id="admin-pr-status"
+                    v-model="prStatusModel"
+                    :options="prStatusOptions"
+                  />
+                </PuFormItem>
 
-                <label class="field">
-                  <span class="field-label">{{
-                    t("adminPR.prVisibilityLabel")
-                  }}</span>
-                  <select v-model="prForm.visibilityStatus" class="field-input">
-                    <option value="VISIBLE">
-                      {{ t("adminPR.visibilityVisible") }}
-                    </option>
-                    <option value="HIDDEN">
-                      {{ t("adminPR.visibilityHidden") }}
-                    </option>
-                  </select>
-                </label>
+                <PuFormItem
+                  :label="t('adminPR.prVisibilityLabel')"
+                  for-id="admin-pr-visibility"
+                >
+                  <PuSelect
+                    id="admin-pr-visibility"
+                    v-model="prVisibilityStatusModel"
+                    :options="prVisibilityStatusOptions"
+                  />
+                </PuFormItem>
 
                 <p v-if="matchedTypeOption" class="hint">
                   {{
@@ -274,31 +283,19 @@
                   v-if="!isCreatingPR && selectedPR !== null"
                   class="stack stack--tight"
                 >
-                  <label class="field">
-                    <span class="field-label">
-                      {{ t("adminPR.prFeedbackQuestionnaireInstanceLabel") }}
-                    </span>
-                    <select
-                      class="field-input"
-                      :value="prForm.feedbackQuestionnaireInstanceId ?? ''"
+                  <PuFormItem
+                    :label="t('adminPR.prFeedbackQuestionnaireInstanceLabel')"
+                    for-id="admin-pr-feedback-instance"
+                  >
+                    <PuSelect
+                      id="admin-pr-feedback-instance"
+                      v-model="feedbackQuestionnaireInstanceModel"
+                      :options="feedbackQuestionnaireInstanceOptions"
+                      :placeholder="t('adminPR.noFeedbackQuestionnaire')"
+                      clearable
                       data-testid="admin-pr.feedback-instance"
-                      @change="
-                        prForm.feedbackQuestionnaireInstanceId =
-                          parseNullableId($event)
-                      "
-                    >
-                      <option value="">
-                        {{ t("adminPR.noFeedbackQuestionnaire") }}
-                      </option>
-                      <option
-                        v-for="instance in feedbackQuestionnaireInstances"
-                        :key="instance.id"
-                        :value="instance.id"
-                      >
-                        #{{ instance.id }} / {{ instance.title }}
-                      </option>
-                    </select>
-                  </label>
+                    />
+                  </PuFormItem>
                   <PuButton
                     shape="pill"
                     tone="neutral" variant="outline"
@@ -320,32 +317,19 @@
                     }}
                   </PuButton>
 
-                  <label class="field">
-                    <span class="field-label">
-                      {{ t("adminPR.prFeedbackQuestionnaireTemplateLabel") }}
-                    </span>
-                    <select
-                      class="field-input"
-                      :value="mountFeedbackQuestionnaireTemplateId ?? ''"
+                  <PuFormItem
+                    :label="t('adminPR.prFeedbackQuestionnaireTemplateLabel')"
+                    for-id="admin-pr-feedback-template"
+                  >
+                    <PuSelect
+                      id="admin-pr-feedback-template"
+                      v-model="mountFeedbackQuestionnaireTemplateModel"
+                      :options="feedbackQuestionnaireTemplateOptions"
+                      :placeholder="t('adminPR.noFeedbackQuestionnaire')"
+                      clearable
                       data-testid="admin-pr.feedback-template"
-                      @change="
-                        mountFeedbackQuestionnaireTemplateId =
-                          parseNullableId($event)
-                      "
-                    >
-                      <option value="">
-                        {{ t("adminPR.noFeedbackQuestionnaire") }}
-                      </option>
-                      <option
-                        v-for="template in feedbackQuestionnaireTemplates"
-                        :key="template.id"
-                        :value="template.id"
-                      >
-                        {{ template.key }}@{{ template.version }} /
-                        {{ template.title }}
-                      </option>
-                    </select>
-                  </label>
+                    />
+                  </PuFormItem>
                   <PuButton
                     shape="pill"
                     tone="neutral" variant="outline"
@@ -473,15 +457,23 @@ import PRJoinGateConfigEditor from "@/domains/pr/ui/forms/PRJoinGateConfigEditor
 import PRPlaceModeField, {
   type PRPlaceModeFieldValue,
 } from "@/domains/pr/ui/forms/PRPlaceModeField.vue";
+import { imageUploadItemFromUrl } from "@/shared/upload/useDesignWebImageUpload";
 import type { PRJoinGateConfig, PRRoute } from "@partner-up-dev/backend";
 import {
   PuButton,
   PuCard,
   PuDialog,
+  PuFileUpload,
   PuFormItem,
   PuInlineNotice,
   PuInput,
   PuLoadingState,
+  PuSelect,
+  type PuFileUploadItem,
+  type PuFileUploadRejection,
+  type PuFileUploadValue,
+  type PuSelectOption,
+  type PuSelectValue,
 } from "@partner-up-dev/design-web";
 
 type PRForm = {
@@ -602,6 +594,7 @@ const prForm = ref<PRForm>(emptyPRForm());
 const mountFeedbackQuestionnaireTemplateId = ref<number | null>(null);
 const lastAppliedType = ref<string | null>(null);
 const pendingDeletePRId = ref<number | null>(null);
+const prMeetingPointImageError = ref<string | null>(null);
 
 const feedbackQuestionnaireInstances = computed(
   () => workspace.value?.feedbackQuestionnaireInstances ?? [],
@@ -609,6 +602,28 @@ const feedbackQuestionnaireInstances = computed(
 const feedbackQuestionnaireTemplates = computed(
   () => workspace.value?.feedbackQuestionnaireTemplates ?? [],
 );
+const prStatusOptions = computed<PuSelectOption[]>(() => [
+  { label: "OPEN", value: "OPEN" },
+  { label: "READY", value: "READY" },
+  { label: "ACTIVE", value: "ACTIVE" },
+  { label: "CLOSED", value: "CLOSED" },
+]);
+const prVisibilityStatusOptions = computed<PuSelectOption[]>(() => [
+  { label: t("adminPR.visibilityVisible"), value: "VISIBLE" },
+  { label: t("adminPR.visibilityHidden"), value: "HIDDEN" },
+]);
+const feedbackQuestionnaireInstanceOptions = computed<PuSelectOption[]>(() =>
+  feedbackQuestionnaireInstances.value.map((instance) => ({
+    label: `#${instance.id} / ${instance.title}`,
+    value: instance.id,
+  })),
+);
+const feedbackQuestionnaireTemplateOptions = computed<PuSelectOption[]>(() =>
+  feedbackQuestionnaireTemplates.value.map((template) => ({
+    label: `${template.key}@${template.version} / ${template.title}`,
+    value: template.id,
+  })),
+);
 const pendingDeletePR = computed<AdminPRRecord | null>(
   () => prs.value.find((pr) => pr.prId === pendingDeletePRId.value) ?? null,
 );
@@ -684,6 +699,70 @@ const formLocationOptions = computed(() => {
   return poiOptions.value;
 });
 
+const isPRStatus = (value: PuSelectValue): value is PRForm["status"] =>
+  value === "OPEN" ||
+  value === "READY" ||
+  value === "ACTIVE" ||
+  value === "CLOSED";
+
+const isPRVisibilityStatus = (
+  value: PuSelectValue,
+): value is PRForm["visibilityStatus"] =>
+  value === "VISIBLE" || value === "HIDDEN";
+
+const nullablePositiveIntegerFromSelectValue = (
+  value: PuSelectValue,
+): number | null => {
+  const parsed =
+    typeof value === "number" ? value : Number(String(value ?? "").trim());
+  return Number.isInteger(parsed) && parsed > 0 ? parsed : null;
+};
+
+const prStatusModel = computed({
+  get: () => prForm.value.status,
+  set: (value: PuSelectValue) => {
+    if (isPRStatus(value)) {
+      prForm.value.status = value;
+    }
+  },
+});
+
+const prVisibilityStatusModel = computed({
+  get: () => prForm.value.visibilityStatus,
+  set: (value: PuSelectValue) => {
+    if (isPRVisibilityStatus(value)) {
+      prForm.value.visibilityStatus = value;
+    }
+  },
+});
+
+const feedbackQuestionnaireInstanceModel = computed({
+  get: () => prForm.value.feedbackQuestionnaireInstanceId,
+  set: (value: PuSelectValue) => {
+    prForm.value.feedbackQuestionnaireInstanceId =
+      nullablePositiveIntegerFromSelectValue(value);
+  },
+});
+
+const mountFeedbackQuestionnaireTemplateModel = computed({
+  get: () => mountFeedbackQuestionnaireTemplateId.value,
+  set: (value: PuSelectValue) => {
+    mountFeedbackQuestionnaireTemplateId.value =
+      nullablePositiveIntegerFromSelectValue(value);
+  },
+});
+
+const prMeetingPointImageUploadValue = computed<PuFileUploadValue>({
+  get: () => {
+    const imageUrl = prForm.value.meetingPointImageUrl.trim();
+    return imageUrl ? imageUploadItemFromUrl(imageUrl) : null;
+  },
+  set: (value) => {
+    prForm.value.meetingPointImageUrl =
+      value?.source === "url" && value.url ? value.url : "";
+  },
+});
+
 const resolvedTimeWindow = computed<[string | null, string | null]>(() => [
   toIsoDateTime(prForm.value.startAt),
   toIsoDateTime(prForm.value.endAt),
@@ -809,12 +888,6 @@ watch([() => prForm.value.type, isCreatingPR], ([type, creating]) => {
   lastAppliedType.value = matched.type;
 });
 
-const parseNullableId = (event: Event): number | null => {
-  const target = event.target as HTMLSelectElement | null;
-  const parsed = Number(target?.value ?? "");
-  return Number.isInteger(parsed) && parsed > 0 ? parsed : null;
-};
-
 const prepareNewPR = () => {
   isCreatingPR.value = true;
   clearSelection();
@@ -823,6 +896,31 @@ const prepareNewPR = () => {
   lastAppliedType.value = null;
 };
 
+const handlePRMeetingPointImageUpdate = (
+  value: PuFileUploadValue,
+): void => {
+  prMeetingPointImageUploadValue.value = value;
+  prMeetingPointImageError.value = null;
+};
+
+const handlePRMeetingPointImageAdd = (item: PuFileUploadItem): void => {
+  if (item.source === "url" && item.url) {
+    prForm.value.meetingPointImageUrl = item.url;
+    prMeetingPointImageError.value = null;
+  }
+};
+
+const handlePRMeetingPointImageRemove = (): void => {
+  prForm.value.meetingPointImageUrl = "";
+  prMeetingPointImageError.value = null;
+};
+
+const handlePRMeetingPointImageReject = (
+  rejections: PuFileUploadRejection[],
+): void => {
+  prMeetingPointImageError.value = rejections[0]?.message ?? null;
+};
+
 const selectExistingPR = (prId: number) => {
   isCreatingPR.value = false;
   selectPR(prId);
diff --git a/apps/frontend/src/domains/admin/use-cases/poi/useAdminPoiEditor.ts b/apps/frontend/src/domains/admin/use-cases/poi/useAdminPoiEditor.ts
index ee8aa6b3b..0389df111 100644
--- a/apps/frontend/src/domains/admin/use-cases/poi/useAdminPoiEditor.ts
+++ b/apps/frontend/src/domains/admin/use-cases/poi/useAdminPoiEditor.ts
@@ -202,8 +202,6 @@ export const useAdminPoiEditor = ({
   pois: ComputedRef<PoiRecord[]>;
   selectedPoiId: ComputedRef<number | null>;
 }) => {
-  const manualGalleryUrl = ref("");
-  const isUploadingGalleryImage = ref(false);
   const poiGalleryById = ref<PoiGalleryMap>({});
   const poiFullAddressById = ref<PoiFullAddressMap>({});
   const poiGcj02ById = ref<PoiCoordinateMap>({});
@@ -505,25 +503,6 @@ export const useAdminPoiEditor = ({
     { immediate: true },
   );
 
-  const handleAddManualUrl = () => {
-    const url = manualGalleryUrl.value.trim();
-    if (!url) return;
-    setSelectedPoiGallery([...selectedPoiGallery.value, url]);
-    manualGalleryUrl.value = "";
-  };
-
-  const handleGalleryUploaded = (uploadedUrl: string) => {
-    setSelectedPoiGallery([...selectedPoiGallery.value, uploadedUrl]);
-    manualGalleryUrl.value = "";
-  };
-
-  const handleRemoveGalleryImage = (index: number) => {
-    const currentGallery = [...selectedPoiGallery.value];
-    if (index < 0 || index >= currentGallery.length) return;
-    currentGallery.splice(index, 1);
-    setSelectedPoiGallery(currentGallery);
-  };
-
   const handleAddAvailabilityRule = () => {
     const now = Date.now();
     setSelectedPoiAvailabilityRules([
@@ -604,8 +583,6 @@ export const useAdminPoiEditor = ({
   };
 
   return {
-    manualGalleryUrl,
-    isUploadingGalleryImage,
     selectedPoiGallery,
     selectedPoiFullAddress,
     selectedPoiCoordinateText,
@@ -617,9 +594,7 @@ export const useAdminPoiEditor = ({
     selectedPoiMeetingPointImageUrl,
     selectedPoiAvailabilityRules,
     markSelectedPoiDirty,
-    handleAddManualUrl,
-    handleGalleryUploaded,
-    handleRemoveGalleryImage,
+    setSelectedPoiGallery,
     setSelectedPoiLocation,
     clearSelectedPoiCoordinates,
     handleAddAvailabilityRule,
diff --git a/apps/frontend/src/domains/admin/use-cases/poi/useAdminPoiManagementWorkspace.ts b/apps/frontend/src/domains/admin/use-cases/poi/useAdminPoiManagementWorkspace.ts
index ab1a989a2..0c9f9f07e 100644
--- a/apps/frontend/src/domains/admin/use-cases/poi/useAdminPoiManagementWorkspace.ts
+++ b/apps/frontend/src/domains/admin/use-cases/poi/useAdminPoiManagementWorkspace.ts
@@ -212,8 +212,6 @@ export const useAdminPoiManagementWorkspace = (
     pois,
     selectedPoiId,
     selectedPoi,
-    manualGalleryUrl: poiEditor.manualGalleryUrl,
-    isUploadingGalleryImage: poiEditor.isUploadingGalleryImage,
     selectedPoiGallery: poiEditor.selectedPoiGallery,
     selectedPoiFullAddress: poiEditor.selectedPoiFullAddress,
     selectedPoiCoordinateText: poiEditor.selectedPoiCoordinateText,
@@ -225,9 +223,7 @@ export const useAdminPoiManagementWorkspace = (
     selectedPoiMeetingPointImageUrl: poiEditor.selectedPoiMeetingPointImageUrl,
     selectedPoiAvailabilityRules: poiEditor.selectedPoiAvailabilityRules,
     markSelectedPoiDirty: poiEditor.markSelectedPoiDirty,
-    handleAddManualUrl: poiEditor.handleAddManualUrl,
-    handleGalleryUploaded: poiEditor.handleGalleryUploaded,
-    handleRemoveGalleryImage: poiEditor.handleRemoveGalleryImage,
+    setSelectedPoiGallery: poiEditor.setSelectedPoiGallery,
     handlePickPoiLocation,
     handleClearPoiCoordinates,
     handleAddAvailabilityRule: poiEditor.handleAddAvailabilityRule,
diff --git a/apps/frontend/src/domains/event/ui/controls/PRTimeWindowEditor.vue b/apps/frontend/src/domains/event/ui/controls/PRTimeWindowEditor.vue
index 8ded84377..655a17471 100644
--- a/apps/frontend/src/domains/event/ui/controls/PRTimeWindowEditor.vue
+++ b/apps/frontend/src/domains/event/ui/controls/PRTimeWindowEditor.vue
@@ -4,8 +4,8 @@
       <span class="pr-time-window-editor__label">{{ label }}</span>
       <div class="pr-time-window-editor__mode-switcher">
         <span class="pr-time-window-editor__mode-label">{{ activeModeLabel }}</span>
-        <MultiStopToggle
-          v-model="activeMode"
+        <PuMultiStopToggle
+          v-model="activeModeToggleValue"
           :options="timeModeOptions"
           :aria-label="modeToggleAriaLabel"
           size="sm"
@@ -24,28 +24,20 @@
         :empty-label="emptyLabel"
         :test-id="datePickerTestId"
       >
-        <label class="pr-time-window-editor__field">
-          <span class="pr-time-window-editor__field-label">
-            {{ datePickerAriaLabel }}
-          </span>
-          <select
-            class="pr-time-window-editor__select"
-            :value="datePickerModelValue ?? ''"
+        <PuFormItem
+          :label="datePickerAriaLabel"
+          :for-id="datePickerTestId"
+        >
+          <PuSelect
+            :id="datePickerTestId"
+            :model-value="datePickerModelValue"
+            :options="dateSelectOptions"
+            :placeholder="emptyLabel"
+            :disabled="dateSelectOptions.length === 0"
             :data-testid="datePickerTestId"
-            @change="handleNativeDateChange"
-          >
-            <option v-if="datePickerOptions.length === 0" value="">
-              {{ emptyLabel }}
-            </option>
-            <option
-              v-for="option in datePickerOptions"
-              :key="option.value"
-              :value="option.value"
-            >
-              {{ option.label }}
-            </option>
-          </select>
-        </label>
+            @update:model-value="handleDatePickerUpdate"
+          />
+        </PuFormItem>
       </slot>
 
       <slot
@@ -57,28 +49,20 @@
         :empty-label="emptyLabel"
         :test-id="timePickerTestId"
       >
-        <label class="pr-time-window-editor__field">
-          <span class="pr-time-window-editor__field-label">
-            {{ timePickerAriaLabel }}
-          </span>
-          <select
-            class="pr-time-window-editor__select"
-            :value="timePickerModelValue ?? ''"
+        <PuFormItem
+          :label="timePickerAriaLabel"
+          :for-id="timePickerTestId"
+        >
+          <PuSelect
+            :id="timePickerTestId"
+            :model-value="timePickerModelValue"
+            :options="timeSelectOptions"
+            :placeholder="emptyLabel"
+            :disabled="timeSelectOptions.length === 0"
             :data-testid="timePickerTestId"
-            @change="handleNativeTimeChange"
-          >
-            <option v-if="timePickerOptions.length === 0" value="">
-              {{ emptyLabel }}
-            </option>
-            <option
-              v-for="option in timePickerOptions"
-              :key="option.value"
-              :value="option.value"
-            >
-              {{ option.label }}
-            </option>
-          </select>
-        </label>
+            @update:model-value="handleTimePickerUpdate"
+          />
+        </PuFormItem>
       </slot>
     </div>
 
@@ -109,9 +93,14 @@
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
 import type { PRAllowEditAfterReady } from "@partner-up-dev/backend";
-import MultiStopToggle, {
-  type MultiStopToggleOption,
-} from "@/shared/ui/forms/MultiStopToggle.vue";
+import {
+  PuFormItem,
+  PuMultiStopToggle,
+  PuSelect,
+  type PuMultiStopToggleOption,
+  type PuMultiStopToggleValue,
+  type PuSelectOption,
+} from "@partner-up-dev/design-web";
 import {
   buildAdvancedModeStartOptions,
   buildFormModeDateKey,
@@ -133,7 +122,7 @@ import {
   type PRTimeWindowPresetOption,
 } from "@/domains/event/model/pr-time-window-editor";
 
-type TimeModeOption = MultiStopToggleOption & {
+type TimeModeOption = PuMultiStopToggleOption & {
   value: PRTimeWindowEditorMode;
 };
 
@@ -267,12 +256,39 @@ const timePickerModelValue = computed(() =>
     : selectedTimeValue.value,
 );
 
+const dateSelectOptions = computed<PuSelectOption[]>(() =>
+  datePickerOptions.value.map((option) => ({
+    label: option.label,
+    value: option.value,
+  })),
+);
+const timeSelectOptions = computed<PuSelectOption[]>(() =>
+  timePickerOptions.value.map((option) => ({
+    label: option.label,
+    value: option.value,
+  })),
+);
+
 const activeModeLabel = computed(
   () =>
     timeModeOptions.find((option) => option.value === activeMode.value)
       ?.label ?? "",
 );
 
+const isTimeWindowEditorMode = (
+  value: PuMultiStopToggleValue,
+): value is PRTimeWindowEditorMode =>
+  value === "NORMAL" || value === "ADVANCED" || value === "FUZZY";
+
+const activeModeToggleValue = computed({
+  get: () => activeMode.value,
+  set: (value: PuMultiStopToggleValue) => {
+    if (isTimeWindowEditorMode(value)) {
+      activeMode.value = value;
+    }
+  },
+});
+
 const selectedNormalOption = computed(() =>
   props.presetOptions.find((option) => option.key === selectedTimeValue.value) ??
   null,
@@ -396,20 +412,6 @@ const handleTimePickerUpdate = (value: string | number | null) => {
   selectedTimeValue.value = nextValue;
 };
 
-const handleNativeDateChange = (event: Event) => {
-  const target = event.target;
-  if (target instanceof HTMLSelectElement) {
-    handleDatePickerUpdate(target.value || null);
-  }
-};
-
-const handleNativeTimeChange = (event: Event) => {
-  const target = event.target;
-  if (target instanceof HTMLSelectElement) {
-    handleTimePickerUpdate(target.value || null);
-  }
-};
-
 watch(
   () => [props.modelValue, props.allowEditAfterReady] as const,
   ([timeWindow]) => setModeForExternalValue(timeWindow),
@@ -530,13 +532,6 @@ watch(
   gap: var(--sys-spacing-xsmall);
 }
 
-.pr-time-window-editor__field {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: var(--sys-spacing-xsmall);
-}
-
 .pr-time-window-editor__duration-field {
   display: flex;
   min-width: 0;
@@ -545,7 +540,6 @@ watch(
   gap: var(--sys-spacing-small);
 }
 
-.pr-time-window-editor__field-label,
 .pr-time-window-editor__duration-label {
   color: var(--sys-color-on-surface-variant);
   @include mx.pu-font(caption);
diff --git a/apps/frontend/src/domains/feedback/ui/FeedbackQuestionnaireForm.vue b/apps/frontend/src/domains/feedback/ui/FeedbackQuestionnaireForm.vue
index 40f12b5e2..addfe9f02 100644
--- a/apps/frontend/src/domains/feedback/ui/FeedbackQuestionnaireForm.vue
+++ b/apps/frontend/src/domains/feedback/ui/FeedbackQuestionnaireForm.vue
@@ -53,17 +53,27 @@
           :for-id="feedbackFieldId(question.id)"
           :required="question.required"
         >
-          <ImageUrlInput
-            :model-value="readImageUrl(question.id)"
-            :input-id="feedbackFieldId(question.id)"
-            purpose="feedback"
-            upload-label="上传图片"
-            uploading-label="上传中..."
-            preview-alt="反馈图片预览"
-            :disabled="pending"
-            :allow-url-input="false"
+          <PuFileUpload
+            :id="feedbackFieldId(question.id)"
+            :model-value="readImageUploadValue(question.id)"
+            mode="file"
+            layout="panel"
+            :accept="IMAGE_UPLOAD_ACCEPT"
+            choose-label="上传图片"
+            drop-label="上传图片"
+            drop-description="反馈图片预览"
+            replace-label="上传图片"
+            :disabled="pending || isImageQuestionUploading(question.id)"
             data-testid="pr-detail.feedback.image-upload"
-            @update:model-value="setImageAnswer(question.id, $event)"
+            @add="handleImageUploadAdd(question.id, $event)"
+            @remove="handleImageUploadRemove(question.id)"
+            @reject="handleImageUploadReject(question.id, $event)"
+            @update:model-value="handleImageUploadUpdate(question.id, $event)"
+          />
+          <PuInlineNotice
+            v-if="imageUploadError(question.id)"
+            tone="error"
+            :message="imageUploadError(question.id) ?? ''"
           />
         </PuFormItem>
       </template>
@@ -100,8 +110,21 @@ import type {
   FeedbackQuestionnaireAnswers,
   FeedbackQuestionnaireDefinition,
 } from "@partner-up-dev/backend";
-import ImageUrlInput from "@/shared/upload/ImageUrlInput.vue";
-import { PuButton, PuFormItem, PuTextarea } from "@partner-up-dev/design-web";
+import { useCloudStorage } from "@/shared/upload/useCloudStorage";
+import {
+  IMAGE_UPLOAD_ACCEPT,
+  imageUploadItemFromUrl,
+} from "@/shared/upload/useDesignWebImageUpload";
+import {
+  PuButton,
+  PuFileUpload,
+  PuFormItem,
+  PuInlineNotice,
+  PuTextarea,
+  type PuFileUploadItem,
+  type PuFileUploadRejection,
+  type PuFileUploadValue,
+} from "@partner-up-dev/design-web";
 
 const props = defineProps<{
   instanceId: number;
@@ -116,6 +139,10 @@ const emit = defineEmits<{
 
 const answers = ref<FeedbackQuestionnaireAnswers>({});
 const validationMessage = ref<string | null>(null);
+const imageUploadValues = ref<Record<string, PuFileUploadValue>>({});
+const imageUploadErrors = ref<Record<string, string | null>>({});
+const uploadingImageQuestionIds = ref<Set<string>>(new Set());
+const { uploadImage, uploadError, clearError } = useCloudStorage();
 
 const readSingleChoiceValue = (questionId: string): string | null => {
   const answer = answers.value[questionId];
@@ -132,6 +159,16 @@ const readImageUrl = (questionId: string): string => {
   return answer?.type === "image_upload" ? answer.imageUrl : "";
 };
 
+const readImageUploadValue = (questionId: string): PuFileUploadValue => {
+  const localValue = imageUploadValues.value[questionId];
+  if (localValue !== undefined) {
+    return localValue;
+  }
+
+  const imageUrl = readImageUrl(questionId).trim();
+  return imageUrl ? imageUploadItemFromUrl(imageUrl) : null;
+};
+
 const feedbackFieldId = (questionId: string): string =>
   `feedback-${props.instanceId}-${questionId}`;
 
@@ -168,6 +205,129 @@ const setImageAnswer = (questionId: string, imageUrl: string): void => {
   };
 };
 
+const setImageUploadValue = (
+  questionId: string,
+  value: PuFileUploadValue,
+): void => {
+  imageUploadValues.value = {
+    ...imageUploadValues.value,
+    [questionId]: value,
+  };
+};
+
+const clearImageUploadValue = (questionId: string): void => {
+  const nextValues = { ...imageUploadValues.value };
+  delete nextValues[questionId];
+  imageUploadValues.value = nextValues;
+};
+
+const setImageUploadError = (
+  questionId: string,
+  message: string | null,
+): void => {
+  imageUploadErrors.value = {
+    ...imageUploadErrors.value,
+    [questionId]: message,
+  };
+};
+
+const setImageQuestionUploading = (
+  questionId: string,
+  isUploading: boolean,
+): void => {
+  const nextIds = new Set(uploadingImageQuestionIds.value);
+  if (isUploading) {
+    nextIds.add(questionId);
+  } else {
+    nextIds.delete(questionId);
+  }
+  uploadingImageQuestionIds.value = nextIds;
+};
+
+const isImageQuestionUploading = (questionId: string): boolean =>
+  uploadingImageQuestionIds.value.has(questionId);
+
+const imageUploadError = (questionId: string): string | null =>
+  imageUploadErrors.value[questionId] ?? null;
+
+const handleImageUploadUpdate = (
+  questionId: string,
+  value: PuFileUploadValue,
+): void => {
+  setImageUploadValue(questionId, value);
+  setImageUploadError(questionId, null);
+
+  if (value === null) {
+    setImageAnswer(questionId, "");
+    clearImageUploadValue(questionId);
+    clearError();
+    return;
+  }
+
+  if (value.source === "url" && value.url) {
+    setImageAnswer(questionId, value.url);
+    clearError();
+  }
+};
+
+const handleImageUploadAdd = async (
+  questionId: string,
+  item: PuFileUploadItem,
+): Promise<void> => {
+  setImageUploadError(questionId, null);
+
+  if (item.source === "url" && item.url) {
+    setImageAnswer(questionId, item.url);
+    setImageUploadValue(questionId, imageUploadItemFromUrl(item.url, item.name));
+    clearError();
+    return;
+  }
+
+  if (!item.file) {
+    setImageUploadValue(questionId, item);
+    return;
+  }
+
+  setImageQuestionUploading(questionId, true);
+  setImageUploadValue(questionId, {
+    ...item,
+    status: "uploading",
+    message: "上传中...",
+  });
+
+  try {
+    const imageUrl = await uploadImage(item.file, { purpose: "feedback" });
+    setImageAnswer(questionId, imageUrl);
+    setImageUploadValue(questionId, imageUploadItemFromUrl(imageUrl, item.name));
+  } catch (error) {
+    const message =
+      uploadError.value ??
+      (error instanceof Error ? error.message : "上传失败");
+    setImageUploadError(questionId, message);
+    setImageUploadValue(questionId, {
+      ...item,
+      status: "error",
+      message,
+    });
+  } finally {
+    setImageQuestionUploading(questionId, false);
+  }
+};
+
+const handleImageUploadRemove = (questionId: string): void => {
+  setImageAnswer(questionId, "");
+  clearImageUploadValue(questionId);
+  setImageUploadError(questionId, null);
+  clearError();
+};
+
+const handleImageUploadReject = (
+  questionId: string,
+  rejections: PuFileUploadRejection[],
+): void => {
+  setImageUploadError(questionId, rejections[0]?.message ?? null);
+};
+
 const isAnswered = (questionId: string): boolean => {
   const answer = answers.value[questionId];
   if (!answer) return false;
diff --git a/apps/frontend/src/pages/AdminFeedbackQuestionnairesPage.vue b/apps/frontend/src/pages/AdminFeedbackQuestionnairesPage.vue
index e5204af92..67577d7dc 100644
--- a/apps/frontend/src/pages/AdminFeedbackQuestionnairesPage.vue
+++ b/apps/frontend/src/pages/AdminFeedbackQuestionnairesPage.vue
@@ -109,27 +109,17 @@
           }}
         </p>
 
-        <label class="field">
-          <span class="field-label">{{
-            t("adminFeedbackQuestionnaires.templateLabel")
-          }}</span>
-          <select
-            v-model="selectedTemplateIdRaw"
-            class="field-input"
+        <PuFormItem
+          :label="t('adminFeedbackQuestionnaires.templateLabel')"
+          for-id="admin-feedback-questionnaires-template-list"
+        >
+          <PuSelect
+            id="admin-feedback-questionnaires-template-list"
+            v-model="selectedTemplateIdModel"
+            :options="templateSelectOptions"
             data-testid="admin-feedback-questionnaires.template-list"
-          >
-            <option value="__new">
-              {{ t("adminFeedbackQuestionnaires.newTemplateOption") }}
-            </option>
-            <option
-              v-for="template in templates"
-              :key="template.id"
-              :value="String(template.id)"
-            >
-              {{ template.key }}@{{ template.version }}
-            </option>
-          </select>
-        </label>
+          />
+        </PuFormItem>
       </AdminRailPanel>
     </template>
   </AdminPageScaffold>
@@ -152,7 +142,15 @@ import AdminPageScaffold from "@/domains/admin/ui/layout/AdminPageScaffold.vue";
 import AdminRailPanel from "@/domains/admin/ui/layout/AdminRailPanel.vue";
 import BentoItem from "@/domains/admin/ui/layout/BentoItem.vue";
 import BentoLayout from "@/domains/admin/ui/layout/BentoLayout.vue";
-import { PuButton, PuInlineNotice, PuLoadingState } from "@partner-up-dev/design-web";
+import {
+  PuButton,
+  PuFormItem,
+  PuInlineNotice,
+  PuLoadingState,
+  PuSelect,
+  type PuSelectOption,
+  type PuSelectValue,
+} from "@partner-up-dev/design-web";
 
 type TemplateRecord = AdminFeedbackQuestionnaireTemplatesResponse[number];
 
@@ -210,6 +208,16 @@ const selectedTemplate = computed<TemplateRecord | null>(() => {
   if (!Number.isInteger(selectedId) || selectedId <= 0) return null;
   return templates.value.find((template) => template.id === selectedId) ?? null;
 });
+const templateSelectOptions = computed<PuSelectOption[]>(() => [
+  {
+    label: t("adminFeedbackQuestionnaires.newTemplateOption"),
+    value: newTemplateSentinel,
+  },
+  ...templates.value.map((template) => ({
+    label: `${template.key}@${template.version}`,
+    value: String(template.id),
+  })),
+]);
 const isCreating = computed(() => selectedTemplate.value === null);
 const isSaving = computed(
   () =>
@@ -242,6 +250,14 @@ const pageError = computed(
     null,
 );
 
+const selectedTemplateIdModel = computed({
+  get: () => selectedTemplateIdRaw.value,
+  set: (value: PuSelectValue) => {
+    selectedTemplateIdRaw.value =
+      typeof value === "string" ? value : newTemplateSentinel;
+  },
+});
+
 const loadTemplateIntoDraft = (template: TemplateRecord) => {
   draftKey.value = template.key;
   draftVersion.value = template.version;
diff --git a/apps/frontend/src/pages/AdminPaymentPage.vue b/apps/frontend/src/pages/AdminPaymentPage.vue
index 12e7b6710..c97d631d7 100644
--- a/apps/frontend/src/pages/AdminPaymentPage.vue
+++ b/apps/frontend/src/pages/AdminPaymentPage.vue
@@ -61,24 +61,22 @@
           <BentoItem :title="formTitle" span="full">
             <form class="form-stack" @submit.prevent="handleSave">
               <div class="field-grid">
-                <label class="field">
-                  <span class="field-label">Provider</span>
-                  <select
-                    v-model="form.providerType"
-                    class="text-input"
+                <PuFormItem label="Provider" for-id="admin-payment-provider">
+                  <PuSelect
+                    id="admin-payment-provider"
+                    v-model="providerTypeModel"
+                    :options="providerTypeOptions"
                     disabled
-                  >
-                    <option value="WECHAT_PAY">微信支付 WECHAT_PAY</option>
-                  </select>
-                </label>
+                  />
+                </PuFormItem>
 
-                <label class="field">
-                  <span class="field-label">Status</span>
-                  <select v-model="form.status" class="text-input">
-                    <option value="ACTIVE">ACTIVE</option>
-                    <option value="DISABLED">DISABLED</option>
-                  </select>
-                </label>
+                <PuFormItem label="Status" for-id="admin-payment-status">
+                  <PuSelect
+                    id="admin-payment-status"
+                    v-model="providerStatusModel"
+                    :options="providerStatusOptions"
+                  />
+                </PuFormItem>
 
                 <label class="field">
                   <span class="field-label">Display Name</span>
@@ -100,13 +98,13 @@
                   />
                 </label>
 
-                <label class="field">
-                  <span class="field-label">Charge Mode</span>
-                  <select v-model="form.chargeMode" class="text-input">
-                    <option value="JSAPI">JSAPI</option>
-                    <option value="H5">H5</option>
-                  </select>
-                </label>
+                <PuFormItem label="Charge Mode" for-id="admin-payment-charge-mode">
+                  <PuSelect
+                    id="admin-payment-charge-mode"
+                    v-model="chargeModeModel"
+                    :options="chargeModeOptions"
+                  />
+                </PuFormItem>
 
                 <label class="field">
                   <span class="field-label">App ID</span>
@@ -290,9 +288,13 @@ import {
 import {
   PuButton,
   PuCard,
+  PuFormItem,
   PuInlineNotice,
   PuLoadingState,
+  PuSelect,
   PuTag,
+  type PuSelectOption,
+  type PuSelectValue,
 } from "@partner-up-dev/design-web";
 
 const CREATE_PROVIDER_ID = "__create__";
@@ -357,6 +359,17 @@ const derivedInstanceKey = computed(() => {
   if (!mchId || !appId) return "-";
   return `mch:${mchId}:app:${appId}`;
 });
+const providerTypeOptions = computed<PuSelectOption[]>(() => [
+  { label: "微信支付 WECHAT_PAY", value: "WECHAT_PAY" },
+]);
+const providerStatusOptions = computed<PuSelectOption[]>(() => [
+  { label: "ACTIVE", value: "ACTIVE" },
+  { label: "DISABLED", value: "DISABLED" },
+]);
+const chargeModeOptions = computed<PuSelectOption[]>(() => [
+  { label: "JSAPI", value: "JSAPI" },
+  { label: "H5", value: "H5" },
+]);
 const secretPlaceholder = computed(() =>
   isCreateMode.value ? "新建实例必填" : "留空则保留",
 );
@@ -435,6 +448,33 @@ const providerStatusLabel = (status: ProviderInstance["status"]): string =>
 const providerStatusTagTone = (status: ProviderInstance["status"]) =>
   status === "ACTIVE" ? "primary" : "neutral";
 
+const providerTypeModel = computed({
+  get: () => form.value.providerType,
+  set: (value: PuSelectValue) => {
+    if (value === "WECHAT_PAY") {
+      form.value.providerType = value;
+    }
+  },
+});
+
+const providerStatusModel = computed({
+  get: () => form.value.status,
+  set: (value: PuSelectValue) => {
+    if (value === "ACTIVE" || value === "DISABLED") {
+      form.value.status = value;
+    }
+  },
+});
+
+const chargeModeModel = computed({
+  get: () => form.value.chargeMode,
+  set: (value: PuSelectValue) => {
+    if (value === "JSAPI" || value === "H5") {
+      form.value.chargeMode = value;
+    }
+  },
+});
+
 const normalizeOptionalString = (value: string): string | null => {
   const normalized = value.trim();
   return normalized.length > 0 ? normalized : null;
diff --git a/apps/frontend/src/pages/AdminPoisPage.vue b/apps/frontend/src/pages/AdminPoisPage.vue
index cbc89b579..781d75ea6 100644
--- a/apps/frontend/src/pages/AdminPoisPage.vue
+++ b/apps/frontend/src/pages/AdminPoisPage.vue
@@ -30,8 +30,6 @@
         <template v-else>
           <PoiBasicSection
             v-if="activeAdminSection === 'poi-basic'"
-            v-model:manual-gallery-url="manualGalleryUrl"
-            v-model:is-uploading-gallery-image="isUploadingGalleryImage"
             v-model:selected-poi-full-address="selectedPoiFullAddress"
             v-model:selected-poi-cap-text="selectedPoiCapText"
             v-model:selected-poi-meeting-point-description="selectedPoiMeetingPointDescription"
@@ -45,9 +43,7 @@
             :selected-poi="selectedPoi"
             :weekday-options="weekdayOptions"
             :is-saving-poi="isSavingPoi"
-            @add-manual-url="handleAddManualUrl"
-            @gallery-uploaded="handleGalleryUploaded"
-            @remove-gallery-image="handleRemoveGalleryImage"
+            @update-gallery="setSelectedPoiGallery"
             @pick-location="handlePickPoiLocation"
             @clear-coordinates="handleClearPoiCoordinates"
             @add-availability-rule="handleAddAvailabilityRule"
@@ -101,8 +97,6 @@ const {
   pois,
   selectedPoiId,
   selectedPoi,
-  manualGalleryUrl,
-  isUploadingGalleryImage,
   selectedPoiGallery,
   selectedPoiFullAddress,
   selectedPoiCoordinateText,
@@ -113,9 +107,7 @@ const {
   selectedPoiMeetingPointImageUrl,
   selectedPoiAvailabilityRules,
   markSelectedPoiDirty,
-  handleAddManualUrl,
-  handleGalleryUploaded,
-  handleRemoveGalleryImage,
+  setSelectedPoiGallery,
   handlePickPoiLocation,
   handleClearPoiCoordinates,
   handleAddAvailabilityRule,
diff --git a/apps/frontend/src/pages/AdminRideHailingPage.vue b/apps/frontend/src/pages/AdminRideHailingPage.vue
index 79d0ee154..30768ba49 100644
--- a/apps/frontend/src/pages/AdminRideHailingPage.vue
+++ b/apps/frontend/src/pages/AdminRideHailingPage.vue
@@ -61,24 +61,22 @@
           <BentoItem :title="formTitle" span="full">
             <form class="form-stack" @submit.prevent="handleSave">
               <div class="field-grid">
-                <label class="field">
-                  <span class="field-label">Provider</span>
-                  <select
-                    v-model="form.providerType"
-                    class="text-input"
+                <PuFormItem label="Provider" for-id="admin-ride-hailing-provider">
+                  <PuSelect
+                    id="admin-ride-hailing-provider"
+                    v-model="providerTypeModel"
+                    :options="providerTypeOptions"
                     disabled
-                  >
-                    <option value="CAOCAO">曹操 CAOCAO</option>
-                  </select>
-                </label>
+                  />
+                </PuFormItem>
 
-                <label class="field">
-                  <span class="field-label">Status</span>
-                  <select v-model="form.status" class="text-input">
-                    <option value="ACTIVE">ACTIVE</option>
-                    <option value="DISABLED">DISABLED</option>
-                  </select>
-                </label>
+                <PuFormItem label="Status" for-id="admin-ride-hailing-status">
+                  <PuSelect
+                    id="admin-ride-hailing-status"
+                    v-model="providerStatusModel"
+                    :options="providerStatusOptions"
+                  />
+                </PuFormItem>
 
                 <label class="field">
                   <span class="field-label">Instance Key</span>
@@ -225,9 +223,13 @@ import {
 import {
   PuButton,
   PuCard,
+  PuFormItem,
   PuInlineNotice,
   PuLoadingState,
+  PuSelect,
   PuTag,
+  type PuSelectOption,
+  type PuSelectValue,
 } from "@partner-up-dev/design-web";
 
 const CREATE_PROVIDER_ID = "__create__";
@@ -281,6 +283,13 @@ const isSaving = computed(
 const formTitle = computed(() =>
   isCreateMode.value ? "新建 Provider Instance" : "编辑 Provider Instance",
 );
+const providerTypeOptions = computed<PuSelectOption[]>(() => [
+  { label: "曹操 CAOCAO", value: "CAOCAO" },
+]);
+const providerStatusOptions = computed<PuSelectOption[]>(() => [
+  { label: "ACTIVE", value: "ACTIVE" },
+  { label: "DISABLED", value: "DISABLED" },
+]);
 const signKeyPlaceholder = computed(() =>
   isCreateMode.value ? "新建实例必填" : "留空则保留",
 );
@@ -334,6 +343,24 @@ const providerStatusLabel = (status: ProviderInstance["status"]): string =>
 const providerStatusTagTone = (status: ProviderInstance["status"]) =>
   status === "ACTIVE" ? "primary" : "neutral";
 
+const providerTypeModel = computed({
+  get: () => form.value.providerType,
+  set: (value: PuSelectValue) => {
+    if (value === "CAOCAO") {
+      form.value.providerType = value;
+    }
+  },
+});
+
+const providerStatusModel = computed({
+  get: () => form.value.status,
+  set: (value: PuSelectValue) => {
+    if (value === "ACTIVE" || value === "DISABLED") {
+      form.value.status = value;
+    }
+  },
+});
+
 const normalizeOptionalString = (value: string): string | null => {
   const normalized = value.trim();
   return normalized.length > 0 ? normalized : null;
diff --git a/apps/frontend/src/pages/LocationApplicationPage.vue b/apps/frontend/src/pages/LocationApplicationPage.vue
index 3a7524606..802b02410 100644
--- a/apps/frontend/src/pages/LocationApplicationPage.vue
+++ b/apps/frontend/src/pages/LocationApplicationPage.vue
@@ -41,16 +41,26 @@
             :hint="imageHint"
             required
           >
-            <ImageUrlInput
-              v-model="imageUrlDraft"
-              v-model:uploading="isUploadingImage"
-              input-id="location-application-image-url"
-              purpose="poi"
-              :placeholder="t('locationApplicationPage.imageUrlPlaceholder')"
-              :upload-label="t('locationApplicationPage.pickImageAction')"
-              :uploading-label="t('common.loading')"
-              :preview-alt="t('locationApplicationPage.imagePreviewAlt')"
-              :allow-url-input="false"
+            <PuFileUpload
+              id="location-application-image-url"
+              v-model="imageUploadValue"
+              mode="file"
+              layout="panel"
+              :accept="IMAGE_UPLOAD_ACCEPT"
+              :choose-label="t('locationApplicationPage.pickImageAction')"
+              :drop-label="t('locationApplicationPage.pickImageAction')"
+              :drop-description="t('locationApplicationPage.imageHint')"
+              :replace-label="t('locationApplicationPage.pickImageAction')"
+              :disabled="submitMutation.isPending.value || isUploadingImage"
+              @add="handleImageUploadAdd"
+              @remove="handleImageUploadRemove"
+              @reject="handleImageUploadReject"
+              @update:model-value="handleImageUploadUpdate"
+            />
+            <PuInlineNotice
+              v-if="imageUploadError"
+              tone="error"
+              :message="imageUploadError"
             />
           </PuFormItem>
 
@@ -125,6 +135,7 @@ import { useI18n } from "vue-i18n";
 import {
   PuButton,
   PuCard,
+  PuFileUpload,
   PuFormItem,
   PuInlineNotice,
   PuLoadingState,
@@ -132,8 +143,11 @@ import {
   PuPageScaffold,
   PuTag,
 } from "@partner-up-dev/design-web";
-import ImageUrlInput from "@/shared/upload/ImageUrlInput.vue";
 import { useFallbackBack } from "@/shared/routing/useFallbackBack";
+import {
+  IMAGE_UPLOAD_ACCEPT,
+  useSingleImageUploadField,
+} from "@/shared/upload/useDesignWebImageUpload";
 import {
   useMyPoiApplications,
   useSubmitPoiApplication,
@@ -147,7 +161,6 @@ const route = useRoute();
 const sessionReady = ref(false);
 const titleDraft = ref("");
 const imageUrlDraft = ref("");
-const isUploadingImage = ref(false);
 const submitSuccessTitle = ref<string | null>(null);
 
 const applicationsQuery = useMyPoiApplications(sessionReady);
@@ -197,6 +210,23 @@ const pageError = computed(() => {
   return first instanceof Error ? first.message : null;
 });
 
+const {
+  uploadValue: imageUploadValue,
+  isUploading: isUploadingImage,
+  errorMessage: imageUploadError,
+  handleUpdate: handleImageUploadUpdate,
+  handleAdd: handleImageUploadAdd,
+  handleRemove: handleImageUploadRemove,
+  handleReject: handleImageUploadReject,
+} = useSingleImageUploadField({
+  getUrl: () => imageUrlDraft.value,
+  setUrl: (url) => {
+    imageUrlDraft.value = url;
+  },
+  purpose: "poi",
+  uploadingMessage: t("common.loading"),
+});
+
 const handleSubmit = async () => {
   if (!canSubmit.value || !imageUrl.value) {
     return;
diff --git a/apps/frontend/src/pages/MePage.vue b/apps/frontend/src/pages/MePage.vue
index fa879f599..e889bcbaf 100644
--- a/apps/frontend/src/pages/MePage.vue
+++ b/apps/frontend/src/pages/MePage.vue
@@ -126,27 +126,28 @@
               >
                 {{ t("mePage.profile.savePhone") }}
               </PuButton>
-
-              <PuButton
-                shape="pill"
-                tone="neutral" variant="outline"
-                size="sm"
-
-                :disabled="!canEditProfile || updateAvatarMutation.isPending.value"
-                :loading="updateAvatarMutation.isPending.value"
-                @click="handlePickAvatar"
-              >
-                {{ t("mePage.profile.changeAvatar") }}
-              </PuButton>
-
-              <input
-                ref="avatarInputRef"
-                class="sr-only"
-                type="file"
-                accept="image/png,image/jpeg,image/webp"
-                @change="handleAvatarChange"
-              />
             </div>
+
+            <PuFileUpload
+              v-model="avatarUploadValue"
+              class="avatar-upload-control"
+              mode="file"
+              layout="inline"
+              :accept="IMAGE_UPLOAD_ACCEPT"
+              :choose-label="t('mePage.profile.changeAvatar')"
+              :replace-label="t('mePage.profile.changeAvatar')"
+              :drop-label="t('mePage.profile.changeAvatar')"
+              :disabled="!canEditProfile || updateAvatarMutation.isPending.value"
+              @add="handleAvatarUploadAdd"
+              @remove="handleAvatarUploadRemove"
+              @reject="handleAvatarUploadReject"
+              @update:model-value="handleAvatarUploadUpdate"
+            />
+            <PuInlineNotice
+              v-if="avatarUploadError"
+              tone="error"
+              :message="avatarUploadError"
+            />
           </div>
         </div>
 
@@ -272,6 +273,7 @@ import { useQueryClient } from "@tanstack/vue-query";
 import {
   PuButton,
   PuCard,
+  PuFileUpload,
   PuFormItem,
   PuImg,
   PuInlineNotice,
@@ -279,7 +281,11 @@ import {
   PuPageHeader,
   PuPageScaffold,
   PuTag,
+  type PuFileUploadItem,
+  type PuFileUploadRejection,
+  type PuFileUploadValue,
 } from "@partner-up-dev/design-web";
+import { IMAGE_UPLOAD_ACCEPT } from "@/shared/upload/useDesignWebImageUpload";
 import PageFooter from "@/shared/ui/sections/PageFooter.vue";
 import { useFallbackBack } from "@/shared/routing/useFallbackBack";
 import WeChatNotificationSubscriptionsCard from "@/shared/ui/sections/WeChatNotificationSubscriptionsCard.vue";
@@ -308,7 +314,8 @@ const updateAvatarMutation = useUpdateCurrentUserAvatar();
 const updatePhoneNumberMutation = useUpdateCurrentUserPhoneNumber();
 const startWeChatBindMutation = useStartWeChatBind();
 
-const avatarInputRef = ref<HTMLInputElement | null>(null);
+const avatarUploadValue = ref<PuFileUploadValue>(null);
+const avatarUploadError = ref<string | null>(null);
 const nicknameDraft = ref("");
 const phoneDraft = ref("");
 const copiedField = ref<"userId" | null>(null);
@@ -466,21 +473,50 @@ const handleSavePhoneNumber = async () => {
   phoneDraft.value = "";
 };
 
-const handlePickAvatar = () => {
-  avatarInputRef.value?.click();
+const handleAvatarUploadUpdate = (value: PuFileUploadValue) => {
+  avatarUploadValue.value = value;
+  avatarUploadError.value = null;
 };
 
-const handleAvatarChange = async (event: Event) => {
-  const input = event.target as HTMLInputElement | null;
-  const nextFile = input?.files?.[0] ?? null;
-  if (!nextFile) return;
+const handleAvatarUploadAdd = async (
+  item: PuFileUploadItem,
+): Promise<void> => {
+  if (!item.file) {
+    avatarUploadValue.value = item;
+    return;
+  }
+
+  avatarUploadValue.value = {
+    ...item,
+    status: "uploading",
+    message: t("common.loading"),
+  };
+  avatarUploadError.value = null;
 
-  await updateAvatarMutation.mutateAsync({ avatar: nextFile });
-  if (input) {
-    input.value = "";
+  try {
+    await updateAvatarMutation.mutateAsync({ avatar: item.file });
+    avatarUploadValue.value = null;
+  } catch (error) {
+    const message =
+      error instanceof Error ? error.message : t("errors.updateCurrentUserAvatarFailed");
+    avatarUploadError.value = message;
+    avatarUploadValue.value = {
+      ...item,
+      status: "error",
+      message,
+    };
   }
 };
 
+const handleAvatarUploadRemove = () => {
+  avatarUploadValue.value = null;
+  avatarUploadError.value = null;
+};
+
+const handleAvatarUploadReject = (rejections: PuFileUploadRejection[]) => {
+  avatarUploadError.value = rejections[0]?.message ?? null;
+};
+
 const handleStartWeChatLogin = () => {
   if (typeof window === "undefined") return;
   if (!isWeChatEnv.value || wechatLoginPending.value) return;
@@ -763,6 +799,10 @@ const handleCopyCredential = async (value: string | null) => {
   border: 0;
 }
 
+.avatar-upload-control {
+  max-width: 28rem;
+}
+
 @media (max-width: 768px) {
   .section-header {
     flex-direction: column;
diff --git a/apps/frontend/src/shared/ui/forms/MultiStopToggle.vue b/apps/frontend/src/shared/ui/forms/MultiStopToggle.vue
deleted file mode 100644
index 82abc1048..000000000
--- a/apps/frontend/src/shared/ui/forms/MultiStopToggle.vue
+++ /dev/null
@@ -1,230 +0,0 @@
-<template>
-  <div
-    class="multi-stop-toggle"
-    :class="[
-      `multi-stop-toggle--size-${props.size}`,
-      { 'is-disabled': props.disabled },
-    ]"
-    :style="toggleStyle"
-    role="slider"
-    :aria-label="props.ariaLabel"
-    :aria-valuemin="0"
-    :aria-valuemax="maxIndex"
-    :aria-valuenow="activeIndex"
-    :aria-valuetext="activeValueText"
-    :aria-disabled="props.disabled"
-    :tabindex="props.disabled ? undefined : 0"
-    @click="selectNextByBounce"
-    @keydown.enter.prevent="selectNextByBounce"
-    @keydown.space.prevent="selectNextByBounce"
-    @keydown.arrow-right.prevent="selectNextStop"
-    @keydown.arrow-down.prevent="selectNextStop"
-    @keydown.arrow-left.prevent="selectPreviousStop"
-    @keydown.arrow-up.prevent="selectPreviousStop"
-  >
-    <span class="multi-stop-toggle__track" aria-hidden="true">
-      <span class="multi-stop-toggle__thumb"></span>
-    </span>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from "vue";
-
-export type MultiStopToggleValue = string | number;
-
-export type MultiStopToggleOption = {
-  value: MultiStopToggleValue;
-  label: string;
-  ariaLabel?: string;
-};
-
-const props = withDefaults(
-  defineProps<{
-    modelValue: MultiStopToggleValue;
-    options: readonly MultiStopToggleOption[];
-    ariaLabel?: string;
-    disabled?: boolean;
-    size?: "sm" | "md";
-  }>(),
-  {
-    ariaLabel: undefined,
-    disabled: false,
-    size: "md",
-  },
-);
-
-const emit = defineEmits<{
-  "update:modelValue": [value: MultiStopToggleValue];
-  change: [value: MultiStopToggleValue];
-}>();
-
-const bounceDirection = ref<1 | -1>(1);
-
-const maxIndex = computed(() => Math.max(props.options.length - 1, 0));
-
-const activeIndex = computed(() => {
-  const index = props.options.findIndex(
-    (option) => option.value === props.modelValue,
-  );
-  return index >= 0 ? index : 0;
-});
-
-const activeOption = computed(() => props.options[activeIndex.value] ?? null);
-
-const activeValueText = computed(
-  () => activeOption.value?.ariaLabel ?? activeOption.value?.label ?? "",
-);
-
-const toggleStyle = computed(() => ({
-  "--multi-stop-toggle-index": String(activeIndex.value),
-  "--multi-stop-toggle-count": String(Math.max(props.options.length, 2)),
-}));
-
-const selectOptionAt = (index: number) => {
-  if (props.disabled || props.options.length === 0) {
-    return;
-  }
-
-  const nextOption = props.options[index];
-  if (!nextOption || nextOption.value === props.modelValue) {
-    return;
-  }
-
-  emit("update:modelValue", nextOption.value);
-  emit("change", nextOption.value);
-};
-
-const syncBounceDirectionForIndex = (index: number) => {
-  if (index <= 0) {
-    bounceDirection.value = 1;
-    return;
-  }
-  if (index >= maxIndex.value) {
-    bounceDirection.value = -1;
-  }
-};
-
-const selectNextByBounce = () => {
-  if (props.options.length === 0) {
-    return;
-  }
-  let nextIndex = activeIndex.value + bounceDirection.value;
-  if (nextIndex > maxIndex.value) {
-    bounceDirection.value = -1;
-    nextIndex = Math.max(maxIndex.value - 1, 0);
-  }
-  if (nextIndex < 0) {
-    bounceDirection.value = 1;
-    nextIndex = Math.min(1, maxIndex.value);
-  }
-  selectOptionAt(nextIndex);
-  syncBounceDirectionForIndex(nextIndex);
-};
-
-const selectNextStop = () => {
-  if (props.options.length === 0) {
-    return;
-  }
-  const nextIndex = Math.min(activeIndex.value + 1, maxIndex.value);
-  selectOptionAt(nextIndex);
-  syncBounceDirectionForIndex(nextIndex);
-};
-
-const selectPreviousStop = () => {
-  if (props.options.length === 0) {
-    return;
-  }
-  const nextIndex = Math.max(activeIndex.value - 1, 0);
-  selectOptionAt(nextIndex);
-  syncBounceDirectionForIndex(nextIndex);
-};
-</script>
-
-<style lang="scss" scoped>
-.multi-stop-toggle {
-  --multi-stop-toggle-index: 0;
-  --multi-stop-toggle-count: 2;
-  --multi-stop-toggle-track-padding: 0.2rem;
-  --multi-stop-toggle-thumb-size: 1.35rem;
-  --multi-stop-toggle-step: 1.2rem;
-  --multi-stop-toggle-track-width: calc(
-    var(--multi-stop-toggle-thumb-size) +
-      (var(--multi-stop-toggle-step) * (var(--multi-stop-toggle-count) - 1)) +
-      (var(--multi-stop-toggle-track-padding) * 2)
-  );
-  --multi-stop-toggle-track-height: calc(
-    var(--multi-stop-toggle-thumb-size) +
-      (var(--multi-stop-toggle-track-padding) * 2)
-  );
-  --multi-stop-toggle-track-radius: calc(
-    var(--multi-stop-toggle-track-height) / 2
-  );
-
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  user-select: none;
-
-  &:focus-visible {
-    outline: 2px solid var(--sys-color-primary);
-    outline-offset: 2px;
-    border-radius: var(--multi-stop-toggle-track-radius);
-  }
-}
-
-.multi-stop-toggle.is-disabled {
-  cursor: not-allowed;
-  opacity: var(--sys-opacity-disabled);
-}
-
-.multi-stop-toggle--size-sm {
-  --multi-stop-toggle-track-padding: 0.18rem;
-  --multi-stop-toggle-thumb-size: 1.08rem;
-  --multi-stop-toggle-step: 1rem;
-}
-
-.multi-stop-toggle--size-md {
-  --multi-stop-toggle-track-padding: 0.2rem;
-  --multi-stop-toggle-thumb-size: 1.35rem;
-  --multi-stop-toggle-step: 1.2rem;
-}
-
-.multi-stop-toggle__track {
-  position: relative;
-  display: block;
-  width: var(--multi-stop-toggle-track-width);
-  height: var(--multi-stop-toggle-track-height);
-  border-radius: var(--multi-stop-toggle-track-radius);
-  background: var(--sys-color-surface-container-highest);
-  transition: background-color 180ms ease;
-}
-
-.multi-stop-toggle__thumb {
-  position: absolute;
-  top: var(--multi-stop-toggle-track-padding);
-  left: var(--multi-stop-toggle-track-padding);
-  width: var(--multi-stop-toggle-thumb-size);
-  height: var(--multi-stop-toggle-thumb-size);
-  border-radius: var(--sys-radius-full);
-  background: var(--sys-color-primary);
-  box-shadow: var(--sys-shadow-1);
-  transform: translateX(
-    calc(var(--multi-stop-toggle-index) * var(--multi-stop-toggle-step))
-  );
-  transition:
-    transform 180ms ease,
-    background-color 180ms ease;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .multi-stop-toggle__track,
-  .multi-stop-toggle__thumb {
-    transition: none !important;
-  }
-}
-</style>
diff --git a/apps/frontend/src/shared/upload/AGENTS.md b/apps/frontend/src/shared/upload/AGENTS.md
index a02d38793..133842ea9 100644
--- a/apps/frontend/src/shared/upload/AGENTS.md
+++ b/apps/frontend/src/shared/upload/AGENTS.md
@@ -4,10 +4,10 @@ This folder owns cross-domain upload helpers and controls.
 
 ## Component And Composable Contracts
 
-- `ImageUrlInput.vue`: reusable image URL control with purpose-scoped backend upload, manual URL entry, upload progress, error text, and preview.
 - `useCloudStorage.ts`: handles purpose-scoped image uploads to the backend and returns download URLs.
+- `useDesignWebImageUpload.ts`: adapts design-web upload item state to app-owned URL strings and string arrays while preserving backend upload transport.
 
 ## Boundaries
 
-- Keep upload transport and generic image URL entry here.
+- Keep upload transport and generic design-web upload state adapters here.
 - Consuming domains own purpose selection, copy, validation policy, and submitted payload shape.
diff --git a/apps/frontend/src/shared/upload/ImageUrlInput.vue b/apps/frontend/src/shared/upload/ImageUrlInput.vue
deleted file mode 100644
index 030607d8e..000000000
--- a/apps/frontend/src/shared/upload/ImageUrlInput.vue
+++ /dev/null
@@ -1,181 +0,0 @@
-<template>
-  <div class="image-url-input">
-    <input
-      ref="fileInputRef"
-      class="image-url-input__file"
-      type="file"
-      :accept="accept"
-      :disabled="disabled || isUploading"
-      @change="handleFileChange"
-    />
-
-    <div
-      class="image-url-input__row"
-      :class="{ 'image-url-input__row--upload-only': !allowUrlInput }"
-    >
-      <PuInput
-        v-if="allowUrlInput"
-        :id="inputId"
-        type="url"
-        inputmode="url"
-        :model-value="modelValue"
-        :placeholder="placeholder"
-        :disabled="disabled"
-        @update:model-value="handleUrlInput"
-      />
-      <PuButton
-        shape="pill"
-        tone="neutral" variant="outline"
-        size="sm"
-
-        :disabled="disabled || isUploading"
-        :loading="isUploading"
-        @click="handlePickImage"
-      >
-        {{ isUploading ? uploadingLabel : uploadLabel }}
-      </PuButton>
-    </div>
-
-    <img
-      v-if="previewUrl"
-      class="image-url-input__preview"
-      :src="previewUrl"
-      :alt="previewAlt"
-    />
-
-    <p v-if="uploadError" class="image-url-input__error">
-      {{ uploadError }}
-    </p>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, watch } from "vue";
-import type { ImageUploadPurpose } from "@partner-up-dev/backend";
-import { useCloudStorage } from "@/shared/upload/useCloudStorage";
-import { PuButton, PuInput } from "@partner-up-dev/design-web";
-
-const props = withDefaults(
-  defineProps<{
-    modelValue: string;
-    inputId: string;
-    purpose: ImageUploadPurpose;
-    placeholder?: string;
-    uploadLabel: string;
-    uploadingLabel: string;
-    previewAlt: string;
-    accept?: string;
-    disabled?: boolean;
-    uploading?: boolean;
-    allowUrlInput?: boolean;
-  }>(),
-  {
-    placeholder: "",
-    accept: "image/png,image/jpeg,image/webp",
-    disabled: false,
-    uploading: false,
-    allowUrlInput: true,
-  },
-);
-
-const emit = defineEmits<{
-  "update:modelValue": [value: string];
-  "update:uploading": [value: boolean];
-  uploaded: [url: string];
-}>();
-
-const fileInputRef = ref<HTMLInputElement | null>(null);
-const { uploadImage, isUploading, uploadError, clearError } = useCloudStorage();
-
-const previewUrl = computed(() => {
-  const normalized = props.modelValue.trim();
-  return normalized.length > 0 ? normalized : null;
-});
-
-watch(
-  isUploading,
-  (value) => {
-    emit("update:uploading", value);
-  },
-  { immediate: true },
-);
-
-const handlePickImage = () => {
-  fileInputRef.value?.click();
-};
-
-const handleUrlInput = (value: string) => {
-  emit("update:modelValue", value);
-  clearError();
-};
-
-const handleFileChange = async (event: Event) => {
-  const input = event.target as HTMLInputElement | null;
-  const file = input?.files?.[0] ?? null;
-  if (!file) {
-    return;
-  }
-
-  try {
-    const url = await uploadImage(file, { purpose: props.purpose });
-    emit("update:modelValue", url);
-    emit("uploaded", url);
-  } finally {
-    if (input) {
-      input.value = "";
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.image-url-input {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: var(--sys-spacing-small);
-}
-
-.image-url-input__file {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-.image-url-input__row {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: var(--sys-spacing-small);
-  align-items: center;
-}
-
-.image-url-input__row--upload-only {
-  grid-template-columns: minmax(0, 1fr);
-}
-
-.image-url-input__preview {
-  width: min(100%, 240px);
-  aspect-ratio: 4 / 3;
-  border: 1px solid var(--sys-color-outline-variant);
-  border-radius: var(--sys-radius-small);
-  object-fit: cover;
-  background: var(--sys-color-surface-container-low);
-}
-
-.image-url-input__error {
-  margin: 0;
-  color: var(--sys-color-error);
-  @include mx.pu-font(support);
-}
-
-@media (max-width: 560px) {
-  .image-url-input__row {
-    grid-template-columns: minmax(0, 1fr);
-  }
-}
-</style>
diff --git a/apps/frontend/src/shared/upload/useDesignWebImageUpload.ts b/apps/frontend/src/shared/upload/useDesignWebImageUpload.ts
new file mode 100644
index 000000000..ea4ae8dfe
--- /dev/null
+++ b/apps/frontend/src/shared/upload/useDesignWebImageUpload.ts
@@ -0,0 +1,337 @@
+import { computed, ref, watch } from "vue";
+import type { ImageUploadPurpose } from "@partner-up-dev/backend";
+import type {
+  PuFileUploadItem,
+  PuFileUploadRejection,
+  PuFileUploadValue,
+  PuFilesUploadValue,
+} from "@partner-up-dev/design-web";
+import { useCloudStorage } from "@/shared/upload/useCloudStorage";
+
+export const IMAGE_UPLOAD_ACCEPT = "image/png,image/jpeg,image/webp";
+
+type SingleImageUploadOptions = {
+  getUrl: () => string;
+  setUrl: (url: string) => void;
+  purpose: ImageUploadPurpose;
+  uploadingMessage?: string;
+  onUploaded?: (url: string) => void;
+};
+
+type GalleryImageUploadOptions = {
+  getUrls: () => readonly string[];
+  setUrls: (urls: string[]) => void;
+  purpose: ImageUploadPurpose;
+  uploadingMessage?: string;
+  onUploaded?: (url: string) => void;
+};
+
+const normalizeUrl = (url: string | undefined): string => url?.trim() ?? "";
+
+const normalizeUrls = (urls: readonly string[]): string[] => {
+  const seen = new Set<string>();
+  const normalized: string[] = [];
+  for (const rawUrl of urls) {
+    const url = normalizeUrl(rawUrl);
+    if (!url || seen.has(url)) continue;
+    seen.add(url);
+    normalized.push(url);
+  }
+  return normalized;
+};
+
+const stringArraysEqual = (
+  left: readonly string[],
+  right: readonly string[],
+): boolean =>
+  left.length === right.length &&
+  left.every((value, index) => value === right[index]);
+
+const fileNameFromUrl = (url: string): string => {
+  try {
+    const parsedUrl = new URL(url, "https://partner-up.local");
+    const parts = parsedUrl.pathname.split("/").filter(Boolean);
+    const lastPart = parts[parts.length - 1] ?? "";
+    return decodeURIComponent(lastPart) || "image";
+  } catch {
+    return url || "image";
+  }
+};
+
+export const imageUploadItemFromUrl = (
+  url: string,
+  name?: string,
+): PuFileUploadItem => ({
+  id: `url:${url}`,
+  source: "url",
+  name: name ?? fileNameFromUrl(url),
+  url,
+  status: "success",
+});
+
+const errorMessageFromUnknown = (error: unknown): string =>
+  error instanceof Error ? error.message : "Upload failed";
+
+export const useSingleImageUploadField = (
+  options: SingleImageUploadOptions,
+) => {
+  const { uploadImage, isUploading, uploadError, clearError } = useCloudStorage();
+  const uploadValue = ref<PuFileUploadValue>(null);
+  const rejectionError = ref<string | null>(null);
+  const cancelledItemIds = ref<Set<string>>(new Set());
+  const currentFileItemId = ref<string | null>(null);
+
+  const syncFromUrl = (rawUrl: string): void => {
+    const url = normalizeUrl(rawUrl);
+    uploadValue.value = url ? imageUploadItemFromUrl(url) : null;
+  };
+
+  watch(
+    () => options.getUrl(),
+    (url) => syncFromUrl(url),
+    { immediate: true },
+  );
+
+  const setUrl = (url: string): void => {
+    const normalizedUrl = normalizeUrl(url);
+    if (normalizeUrl(options.getUrl()) !== normalizedUrl) {
+      options.setUrl(normalizedUrl);
+    }
+  };
+
+  const markCancelled = (itemId: string | null): void => {
+    if (!itemId) return;
+    cancelledItemIds.value = new Set([...cancelledItemIds.value, itemId]);
+  };
+
+  const handleUpdate = (item: PuFileUploadValue): void => {
+    uploadValue.value = item;
+    rejectionError.value = null;
+
+    if (item === null) {
+      markCancelled(currentFileItemId.value);
+      setUrl("");
+      clearError();
+      return;
+    }
+
+    if (item.source === "url" && item.url) {
+      setUrl(item.url);
+      clearError();
+    }
+  };
+
+  const handleAdd = async (item: PuFileUploadItem): Promise<void> => {
+    rejectionError.value = null;
+
+    if (item.source === "url" && item.url) {
+      setUrl(item.url);
+      uploadValue.value = imageUploadItemFromUrl(item.url, item.name);
+      clearError();
+      return;
+    }
+
+    if (!item.file) {
+      uploadValue.value = item;
+      return;
+    }
+
+    currentFileItemId.value = item.id;
+    cancelledItemIds.value.delete(item.id);
+    uploadValue.value = {
+      ...item,
+      status: "uploading",
+      message: options.uploadingMessage,
+    };
+
+    try {
+      const url = await uploadImage(item.file, { purpose: options.purpose });
+      if (cancelledItemIds.value.has(item.id)) {
+        return;
+      }
+      setUrl(url);
+      options.onUploaded?.(url);
+      uploadValue.value = imageUploadItemFromUrl(url, item.name);
+    } catch (error) {
+      if (cancelledItemIds.value.has(item.id)) {
+        return;
+      }
+      uploadValue.value = {
+        ...item,
+        status: "error",
+        message: uploadError.value ?? errorMessageFromUnknown(error),
+      };
+    } finally {
+      if (currentFileItemId.value === item.id) {
+        currentFileItemId.value = null;
+      }
+    }
+  };
+
+  const handleRemove = (item?: PuFileUploadItem): void => {
+    markCancelled(item?.id ?? currentFileItemId.value);
+    uploadValue.value = null;
+    setUrl("");
+    clearError();
+    rejectionError.value = null;
+  };
+
+  const handleReject = (rejections: PuFileUploadRejection[]): void => {
+    rejectionError.value = rejections[0]?.message ?? null;
+  };
+
+  const errorMessage = computed(() => rejectionError.value ?? uploadError.value);
+
+  return {
+    uploadValue,
+    isUploading,
+    errorMessage,
+    handleUpdate,
+    handleAdd,
+    handleRemove,
+    handleReject,
+  };
+};
+
+export const useGalleryImageUploadField = (
+  options: GalleryImageUploadOptions,
+) => {
+  const { uploadImage, isUploading, uploadError, clearError } = useCloudStorage();
+  const uploadValue = ref<PuFilesUploadValue>([]);
+  const rejectionError = ref<string | null>(null);
+  const cancelledItemIds = ref<Set<string>>(new Set());
+
+  const setUrls = (urls: readonly string[]): void => {
+    const normalizedUrls = normalizeUrls(urls);
+    if (!stringArraysEqual(normalizedUrls, normalizeUrls(options.getUrls()))) {
+      options.setUrls(normalizedUrls);
+    }
+  };
+
+  const syncFromUrls = (urls: readonly string[]): void => {
+    const urlItems = normalizeUrls(urls).map((url) => imageUploadItemFromUrl(url));
+    const transientItems = uploadValue.value.filter(
+      (item) =>
+        item.source === "file" &&
+        Boolean(item.file) &&
+        !cancelledItemIds.value.has(item.id),
+    );
+    uploadValue.value = [...urlItems, ...transientItems];
+  };
+
+  watch(
+    () => options.getUrls(),
+    (urls) => syncFromUrls(urls),
+    { immediate: true },
+  );
+
+  const replaceItem = (nextItem: PuFileUploadItem): void => {
+    const existingIndex = uploadValue.value.findIndex(
+      (item) => item.id === nextItem.id,
+    );
+    if (existingIndex < 0) {
+      uploadValue.value = [...uploadValue.value, nextItem];
+      return;
+    }
+    uploadValue.value = uploadValue.value.map((item) =>
+      item.id === nextItem.id ? nextItem : item,
+    );
+  };
+
+  const syncUrlsFromUploadValue = (items: PuFilesUploadValue): void => {
+    const urls = items.flatMap((item) =>
+      item.source === "url" && item.url ? [item.url] : [],
+    );
+    setUrls(urls);
+  };
+
+  const handleUpdate = (items: PuFilesUploadValue): void => {
+    uploadValue.value = items;
+    rejectionError.value = null;
+    syncUrlsFromUploadValue(items);
+  };
+
+  const uploadFileItem = async (item: PuFileUploadItem): Promise<void> => {
+    if (!item.file) return;
+
+    cancelledItemIds.value.delete(item.id);
+    replaceItem({
+      ...item,
+      status: "uploading",
+      message: options.uploadingMessage,
+    });
+
+    try {
+      const url = await uploadImage(item.file, { purpose: options.purpose });
+      if (cancelledItemIds.value.has(item.id)) {
+        return;
+      }
+      setUrls([...options.getUrls(), url]);
+      options.onUploaded?.(url);
+      uploadValue.value = uploadValue.value.filter(
+        (candidate) => candidate.id !== item.id,
+      );
+    } catch (error) {
+      if (cancelledItemIds.value.has(item.id)) {
+        return;
+      }
+      replaceItem({
+        ...item,
+        status: "error",
+        message: uploadError.value ?? errorMessageFromUnknown(error),
+      });
+    }
+  };
+
+  const handleAdd = async (items: PuFileUploadItem[]): Promise<void> => {
+    rejectionError.value = null;
+    const urlItems = items.flatMap((item) =>
+      item.source === "url" && item.url ? [item.url] : [],
+    );
+    if (urlItems.length > 0) {
+      setUrls([...options.getUrls(), ...urlItems]);
+      clearError();
+    }
+
+    for (const item of items) {
+      if (item.source === "file") {
+        await uploadFileItem(item);
+      }
+    }
+  };
+
+  const handleRemove = (item: PuFileUploadItem): void => {
+    cancelledItemIds.value = new Set([...cancelledItemIds.value, item.id]);
+    uploadValue.value = uploadValue.value.filter(
+      (candidate) => candidate.id !== item.id,
+    );
+    if (item.url) {
+      setUrls(options.getUrls().filter((url) => url !== item.url));
+    }
+    clearError();
+    rejectionError.value = null;
+  };
+
+  const handleReject = (rejections: PuFileUploadRejection[]): void => {
+    rejectionError.value = rejections[0]?.message ?? null;
+  };
+
+  const addUrl = (url: string): void => {
+    const normalizedUrl = normalizeUrl(url);
+    if (!normalizedUrl) return;
+    setUrls([...options.getUrls(), normalizedUrl]);
+  };
+
+  const errorMessage = computed(() => rejectionError.value ?? uploadError.value);
+
+  return {
+    uploadValue,
+    isUploading,
+    errorMessage,
+    addUrl,
+    handleUpdate,
+    handleAdd,
+    handleRemove,
+    handleReject,
+  };
+};
diff --git a/tasks/design-web-package-integration/deep-ui-refactor/20-slice-plan.md b/tasks/design-web-package-integration/deep-ui-refactor/20-slice-plan.md
index 0cc307822..32a4e2016 100644
--- a/tasks/design-web-package-integration/deep-ui-refactor/20-slice-plan.md
+++ b/tasks/design-web-package-integration/deep-ui-refactor/20-slice-plan.md
@@ -335,3 +335,64 @@ Verification:
 - Passed targeted scans for removed local primitive class families.
 - Passed source scan showing no current `PRPartnerSection` usage sites.
 - Passed `git diff --check`.
+
+## Slice 11: Upload, Select, And Multi-Stop Controls
+
+Status: completed.
+
+Scope:
+
+- Replace direct user upload controls with `PuFileUpload` and `PuFilesUpload`.
+- Delete the local `ImageUrlInput.vue` upload UI wrapper after usage sites
+  clear; keep `useCloudStorage.ts` as backend upload transport.
+- Replace the local `MultiStopToggle.vue` primitive with direct
+  `PuMultiStopToggle` usage in `PRTimeWindowEditor.vue`, then delete the local
+  primitive.
+- Migrate a bounded non-Commerce `PuSelect` group, focusing on POI
+  availability rules, admin PR status/visibility/feedback selects, provider
+  configuration pages, and feedback questionnaire template selection.
+
+Planning notes:
+
+- Detailed packet lives in `95-slice11-upload-select-toggle.md`.
+- `PuFileUpload`/`PuFilesUpload` own file and URL entry UI, but they do not
+  replace the app's backend upload transport. Keep upload mutations and
+  `useCloudStorage` as transport boundaries.
+- `PuPicker` is explicitly not included. It should only be used where a
+  drawer/picker interaction is desired, not as a broad native select
+  replacement.
+- `AdminCommerceSpuEditor.vue` remains out of scope by prior human
+  constraint. Other Admin Commerce select-heavy editors should be scheduled as
+  a later commerce-owned slice if needed.
+
+Implementation notes:
+
+- Added a non-UI `useDesignWebImageUpload.ts` adapter that maps package upload
+  item state to app-owned URL strings and string arrays while keeping
+  `useCloudStorage.ts` as the backend upload transport.
+- Migrated direct user upload controls to `PuFileUpload` or `PuFilesUpload`:
+  location application image, feedback image upload questions, Anchor Event
+  media fields, current-user avatar file selection, POI gallery, and URL-only
+  meeting-point image fields.
+- Deleted `ImageUrlInput.vue` after usage sites cleared.
+- Replaced the local `MultiStopToggle.vue` usage with direct
+  `PuMultiStopToggle` in `PRTimeWindowEditor.vue`, migrated that component's
+  fallback date/time selectors to `PuSelect`, and deleted the local toggle
+  primitive.
+- Migrated the bounded non-Commerce select group to `PuSelect`: POI
+  availability mode/kind/frequency, admin PR status/visibility/feedback
+  selects, payment and ride-hailing provider configuration selects, and the
+  feedback questionnaire template rail selector.
+- Left Commerce page selects and `AnchorEventInlinePlaceSelector.vue`
+  deferred. Commerce needs a commerce-owned select slice; the inline place
+  selector is a preview-plus-location interaction candidate, not a generic
+  native-select replacement.
+
+Verification:
+
+- Passed `pnpm --filter @partner-up-dev/frontend build`.
+- Passed `pnpm --filter @partner-up-dev/frontend lint:tokens`.
+- Passed `pnpm test:unit:frontend`.
+- Passed targeted scans for removed `ImageUrlInput`, local
+  `MultiStopToggle`, and raw native selects in the targeted files.
+- Passed `git diff --check`.
diff --git a/tasks/design-web-package-integration/deep-ui-refactor/95-slice11-upload-select-toggle.md b/tasks/design-web-package-integration/deep-ui-refactor/95-slice11-upload-select-toggle.md
new file mode 100644
index 000000000..bbe2c3497
--- /dev/null
+++ b/tasks/design-web-package-integration/deep-ui-refactor/95-slice11-upload-select-toggle.md
@@ -0,0 +1,199 @@
+# Slice 11: Upload, Select, And Multi-Stop Controls
+
+## Objective & Hypothesis
+
+Objective: migrate the next form-control cluster to direct
+`@partner-up-dev/design-web` package components: `PuFileUpload`,
+`PuFilesUpload`, `PuMultiStopToggle`, and `PuSelect`.
+
+Hypothesis: this cluster removes the last local upload UI wrapper, deletes the
+local multi-stop toggle primitive, and clears a meaningful group of native
+`<select>` controls without touching high-risk picker or state-machine
+surfaces.
+
+## Current Mode
+
+- Input route: `Constraint`.
+- Active mode: `Execute`.
+- Current status: implemented and verified.
+- Scope boundary: frontend UI component migration and task-local planning.
+
+## Guardrails Touched
+
+- Use direct package components at usage sites. Do not preserve old local
+  upload/select/toggle wrappers around package components.
+- Preserve backend upload transport, mutation contracts, route workflows, and
+  product validation semantics.
+- Do not use package internals or story-only helpers.
+- Keep `AdminCommerceSpuEditor.vue` out of this slice by prior human
+  constraint.
+- Do not pull `PuPicker` into this slice. It is a drawer/picker interaction,
+  not a native select replacement.
+
+## Package API Constraints
+
+- `PuFileUpload` is for one attachment value by file picker, drag/drop, or URL.
+- `PuFilesUpload` is for multiple attachments/URLs and owns collection UI.
+- Both upload components emit file/URL selection events but do not replace app
+  backend upload transport. The app should keep `useCloudStorage` and user
+  avatar mutations as domain/shared transport logic.
+- `PuMultiStopToggle` options provide accessible value text but do not render
+  visible labels. Keep the current adjacent active-mode label in
+  `PRTimeWindowEditor.vue`.
+- `PuSelect` values are `string | number | null`; typed computed adapters are
+  needed for enum fields and nullable ids.
+- `PuSelect` does not cover multi-select, option groups, async loading, or
+  custom option rendering.
+
+## Scope
+
+### 1. File Upload Controls
+
+Primary target: delete the shared upload UI wrapper after usage sites clear.
+
+- `apps/frontend/src/shared/upload/ImageUrlInput.vue`
+  - Replace this local UI primitive with direct package component usage at call
+    sites.
+  - Keep `apps/frontend/src/shared/upload/useCloudStorage.ts` as the backend
+    image-upload transport.
+- `apps/frontend/src/pages/LocationApplicationPage.vue`
+  - Single required image upload, URL output.
+  - Candidate: `PuFileUpload mode="file"` or `mode="both"` depending on
+    whether manual URL entry remains intentionally supported.
+- `apps/frontend/src/domains/feedback/ui/FeedbackQuestionnaireForm.vue`
+  - Single feedback image upload, upload-only today.
+  - Candidate: `PuFileUpload mode="file"`.
+- `apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventMediaEditor.vue`
+  - Two single image URL fields: event cover and beta group QR code.
+  - Candidate: two direct `PuFileUpload` instances.
+- `apps/frontend/src/pages/MePage.vue`
+  - Single avatar file upload through `useUpdateCurrentUserAvatar`.
+  - Candidate: direct `PuFileUpload mode="file"`; keep avatar mutation as the
+    transport boundary.
+- `apps/frontend/src/domains/admin/ui/poi/sections/PoiBasicSection.vue`
+  - POI gallery is currently a manual URL/input/upload plus hand-rolled grid.
+  - Candidate: `PuFilesUpload` with a `string[]` gallery adapter and direct
+    remove/update events.
+
+Secondary optional targets if the first upload pass stays small:
+
+- `apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventDefaultMeetingPointEditor.vue`
+- `apps/frontend/src/domains/admin/ui/pr/views/AdminPRBasicView.vue`
+- `apps/frontend/src/domains/admin/ui/poi/sections/PoiBasicSection.vue`
+  meeting-point image URL
+
+These are URL-only image fields. They can become `PuFileUpload mode="url"` if
+the field should present as an attachment URL entry rather than a plain URL
+input.
+
+### 2. Multi-Stop Toggle
+
+Primary target:
+
+- `apps/frontend/src/domains/event/ui/controls/PRTimeWindowEditor.vue`
+  - Replace the local `MultiStopToggle` import and usage with direct
+    `PuMultiStopToggle`.
+  - Preserve the visible active-mode label beside the toggle.
+
+Delete after usage clears:
+
+- `apps/frontend/src/shared/ui/forms/MultiStopToggle.vue`
+
+### 3. PuSelect Series
+
+First pass should focus on non-Commerce and already-adjacent admin form
+surfaces:
+
+- `apps/frontend/src/domains/admin/ui/poi/sections/PoiBasicSection.vue`
+  - Availability rule mode, kind, and frequency.
+- `apps/frontend/src/domains/admin/ui/pr/views/AdminPRBasicView.vue`
+  - PR status, visibility, feedback questionnaire instance, and feedback
+    questionnaire template selects.
+- `apps/frontend/src/pages/AdminRideHailingPage.vue`
+  - Provider and status selects.
+- `apps/frontend/src/pages/AdminPaymentPage.vue`
+  - Provider, status, and charge mode selects.
+- `apps/frontend/src/pages/AdminFeedbackQuestionnairesPage.vue`
+  - Template selector in the rail.
+
+Already migrated examples to follow:
+
+- `apps/frontend/src/domains/admin/ui/pr/components/PRFilterRail.vue`
+- `apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventFeedbackQuestionnairePicker.vue`
+- `apps/frontend/src/domains/admin/ui/anchor-event/components/AnchorEventDetailsEditor.vue`
+
+Deferred `PuSelect` groups:
+
+- `apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceSpuEditor.vue`
+  remains out of scope by prior human constraint.
+- Other Admin Commerce product/pricing/json-logic editors should be considered
+  as a later commerce-owned select-control slice, because they contain many
+  related selects and custom model adapters.
+- `AnchorEventInlinePlaceSelector.vue` should not be part of this `PuSelect`
+  group. Its preview-plus-location selection may be a later `PuPicker` or
+  composition trial.
+
+## Non-Goals
+
+- Do not migrate generated poster/thumbnail uploads that call
+  `useCloudStorage().uploadImage(blob)`. Those are programmatic uploads, not
+  user file upload controls.
+- Do not introduce a new local `ImageUrlInput` wrapper around package upload
+  components.
+- Do not migrate `ProductLocalDateCalendarPicker`.
+- Do not replace Form Mode `PuWheelPicker` usage with `PuPicker`.
+- Do not change backend upload payloads or persisted URL/string-array shapes.
+
+## Implementation Order
+
+1. Completed: replaced `MultiStopToggle` first and deleted the local primitive.
+2. Completed: migrated `ImageUrlInput` usage sites to direct `PuFileUpload`
+   usage, then deleted `ImageUrlInput.vue`.
+3. Completed: migrated POI gallery to `PuFilesUpload`, with explicit
+   `string[]` to package-item mapping.
+4. Completed: migrated the non-Commerce `PuSelect` group.
+5. Completed: re-scanned for leftover `ImageUrlInput`, `MultiStopToggle`, and
+   raw native selects in the targeted files.
+
+## Implementation Notes
+
+- Added `apps/frontend/src/shared/upload/useDesignWebImageUpload.ts` as a
+  non-UI adapter between design-web upload item state and app-owned URL string
+  state.
+- Kept `apps/frontend/src/shared/upload/useCloudStorage.ts` as the backend
+  upload transport. Generated poster/thumbnail uploads still call it directly
+  and were not migrated.
+- Migrated upload controls:
+  - `LocationApplicationPage.vue`: required POI image upload via
+    `PuFileUpload mode="file"`.
+  - `FeedbackQuestionnaireForm.vue`: dynamic image upload questions via direct
+    `PuFileUpload`.
+  - `AnchorEventMediaEditor.vue`: cover image and beta group QR via
+    `PuFileUpload mode="both"`.
+  - `MePage.vue`: avatar file selection via direct `PuFileUpload`, with the
+    existing avatar mutation preserved.
+  - `PoiBasicSection.vue`: POI gallery via `PuFilesUpload mode="both"`.
+  - URL-only meeting-point image fields via `PuFileUpload mode="url"`.
+- Migrated `PRTimeWindowEditor.vue` to direct `PuMultiStopToggle`; its fallback
+  date/time select controls also now use `PuSelect`.
+- Migrated `PuSelect` targets in POI availability rules, admin PR basic
+  selects, payment provider config, ride-hailing provider config, and feedback
+  questionnaire template selection.
+- Deferred raw selects after this pass:
+  - `AdminCommerceOfferPage.vue` and `AdminCommercePlacementPage.vue`.
+  - Admin Commerce product/pricing/json-logic editors from the earlier audit.
+  - `AnchorEventInlinePlaceSelector.vue`, because it is a place-selection
+    interaction candidate rather than a simple native-select replacement.
+
+## Verification
+
+- Passed `pnpm --filter @partner-up-dev/frontend build`.
+- Passed `pnpm --filter @partner-up-dev/frontend lint:tokens`.
+- Passed `pnpm test:unit:frontend`.
+- Passed targeted source scans:
+  - no `ImageUrlInput` imports or tags
+  - no `@/shared/ui/forms/MultiStopToggle.vue` import
+  - no `<select` remains in the targeted Slice 11 files; remaining source
+    matches are deferred Commerce pages or `AnchorEventInlinePlaceSelector.vue`
+  - no local upload primitive classes from `ImageUrlInput.vue`
+- Passed `git diff --check`.
diff --git a/tasks/design-web-package-integration/deep-ui-refactor/README.md b/tasks/design-web-package-integration/deep-ui-refactor/README.md
index 3150eda1f..d8f6765c5 100644
--- a/tasks/design-web-package-integration/deep-ui-refactor/README.md
+++ b/tasks/design-web-package-integration/deep-ui-refactor/README.md
@@ -75,6 +75,15 @@ and product interaction state in one file.
 - Slice 10 first rollout pass migrated `InlineNLPRForm.vue` and
   `FormModeNoMatchResult.vue` on active product paths. `PRPartnerSection.vue`
   was investigated and deferred because current source has no usage site.
+- Slice 11 is planned in `95-slice11-upload-select-toggle.md`: it should
+  migrate direct user upload controls to `PuFileUpload`/`PuFilesUpload`, delete
+  the local `ImageUrlInput` UI wrapper, replace local `MultiStopToggle` with
+  `PuMultiStopToggle`, and migrate a bounded non-Commerce `PuSelect` group.
+  This slice is now implemented and verified. Remaining raw selects are
+  Commerce-owned follow-up candidates or the deferred
+  `AnchorEventInlinePlaceSelector.vue` picker/composition candidate.
+  `PuPicker` remains deliberately deferred because it changes interaction
+  model rather than merely replacing native selects.
 
 ## Package API Constraints
 
@@ -131,6 +140,10 @@ Detailed slice planning lives in `20-slice-plan.md`.
    `90-composition-pattern-rollout.md` to compare the Slice 9 pilot against
    other mixed UI/state surfaces, then schedule follow-up candidates one at a
    time.
+10. Upload/select/toggle control cleanup: use
+    `95-slice11-upload-select-toggle.md` to migrate file upload controls,
+    the local multi-stop toggle, and a bounded native-select group to direct
+    package components. First pass completed.
 
 ## Defer By Default
 
@@ -197,6 +210,19 @@ Slice 1 verification:
 - Slice 3 0.4.3 implementation verification is recorded in
   `46-slice3-0.4.3-implementation.md`.
 
+Slice 11 verification:
+
+- `PuFileUpload`/`PuFilesUpload` replaced direct user upload controls while
+  backend upload transports and persisted URL shapes remained app-owned.
+- Local `ImageUrlInput.vue` and `MultiStopToggle.vue` were deleted.
+- Bounded non-Commerce native select targets migrated to `PuSelect`.
+- Deferred selects are limited to Commerce page/editor follow-up work and
+  `AnchorEventInlinePlaceSelector.vue`.
+- `pnpm --filter @partner-up-dev/frontend build` passed.
+- `pnpm --filter @partner-up-dev/frontend lint:tokens` passed.
+- `pnpm test:unit:frontend` passed.
+- `git diff --check` passed.
+
 For route/page structure slices:
 
 - add targeted component tests when state ownership moves

From 73bca62ff12775d7e65958b615885eb3a1774bab Mon Sep 17 00:00:00 2001
From: Lanzhijiang <lanzhijiang@foxmail.com>
Date: Tue, 16 Jun 2026 18:29:54 +0800
Subject: [PATCH 15/94] refactor(frontend): correct design-web chip editors

---
 apps/frontend/package.json                    |   2 +-
 .../form-mode/FormModePreferenceControl.vue   | 129 ++++++++++++------
 .../src/domains/pr/ui/forms/PREditor.vue      |   5 +-
 apps/frontend/src/shared/ui/AGENTS.md         |   1 +
 pnpm-lock.yaml                                |  10 +-
 .../deep-ui-refactor/20-slice-plan.md         |  22 +--
 .../50-form-capability-needs.md               |  27 ++--
 .../80-form-mode-preference-composition.md    |  63 +++++----
 .../96-0.4.4-chip-editor-correction.md        |  52 +++++++
 .../deep-ui-refactor/README.md                |  41 ++++--
 10 files changed, 252 insertions(+), 100 deletions(-)
 create mode 100644 tasks/design-web-package-integration/deep-ui-refactor/96-0.4.4-chip-editor-correction.md

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 1d62ad695..411d56390 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -13,7 +13,7 @@
     "lint:tokens:strict": "node ./scripts/check-token-governance.mjs --strict"
   },
   "dependencies": {
-    "@partner-up-dev/design-web": "0.4.3",
+    "@partner-up-dev/design-web": "0.4.4",
     "@tanstack/vue-query": "^5.60.0",
     "@unhead/vue": "^2.1.2",
     "@vee-validate/zod": "^4.15.1",
diff --git a/apps/frontend/src/domains/event/ui/controls/form-mode/FormModePreferenceControl.vue b/apps/frontend/src/domains/event/ui/controls/form-mode/FormModePreferenceControl.vue
index d4e6f7c9e..06053215f 100644
--- a/apps/frontend/src/domains/event/ui/controls/form-mode/FormModePreferenceControl.vue
+++ b/apps/frontend/src/domains/event/ui/controls/form-mode/FormModePreferenceControl.vue
@@ -50,30 +50,35 @@
             class="preference-custom-field"
             :label="t('anchorEvent.formMode.customTagTitle')"
           >
-            <PuChipInput
-              :model-value="activeDrawerCustomLabels"
-              shape="pill"
-              add-on-blur
-              :placeholder="t('anchorEvent.formMode.customTagPlaceholder')"
-              @add="handleAddCustomTag"
-              @remove="handleRemoveCustomTag"
-            >
-              <template #chip="{ value, remove }">
-                <PuChip
-                  as="button"
-                  type="button"
-                  shape="pill"
-                  removable
-                  :selected="isDrawerTagSelected(value)"
-                  :tone="isDrawerTagSelected(value) ? 'primary' : 'neutral'"
-                  :variant="isDrawerTagSelected(value) ? 'soft' : 'outline'"
-                  :label="formatTagDisplayLabel(value, activeDrawerCell)"
-                  :remove-label="buildCustomTagRemoveLabel(value)"
-                  @click="handleSelectDrawerTag(value)"
-                  @remove="handleRemoveCustomTagFromInput(value, remove, $event)"
-                />
-              </template>
-            </PuChipInput>
+            <PuChipGroup class="preference-custom-field__chips" wrap gap="sm">
+              <PuChipInput
+                v-for="tag in activeDrawerCustomTags"
+                :key="tag.label"
+                :model-value="formatTagDisplayLabel(tag.label, activeDrawerCell)"
+                shape="pill"
+                select-on-focus
+                commit-on-blur
+                :tone="isDrawerTagSelected(tag.label) ? 'primary' : 'neutral'"
+                :variant="isDrawerTagSelected(tag.label) ? 'soft' : 'outline'"
+                :remove-label="buildCustomTagRemoveLabel(tag.label)"
+                @focus="selectCustomLabel(tag.label)"
+                @commit="handleCommitCustomTag(tag.label, $event)"
+                @remove="handleRemoveCustomTag(tag.label)"
+              />
+
+              <PuChipInput
+                :model-value="customTagDraft"
+                shape="pill"
+                tone="neutral"
+                variant="dashed"
+                commit-on-blur
+                :removable="false"
+                :placeholder="t('anchorEvent.formMode.customTagPlaceholder')"
+                @update:model-value="handleCustomTagDraftUpdate"
+                @commit="handleAddCustomTag"
+                @cancel="handleCustomTagDraftUpdate"
+              />
+            </PuChipGroup>
           </PuFormItem>
 
           <div v-if="activeDrawerDescription" class="tag-description-panel">
@@ -156,6 +161,7 @@ const activeDrawerCell = ref<PreferenceCell | null>(null);
 const drawerSelectedCategoryMap = ref<Record<string, string | null>>({});
 const drawerSelectedUncategorizedLabels = ref<string[]>([]);
 const drawerCustomTags = ref<FormModePresetTag[]>([]);
+const customTagDraft = ref("");
 const preferenceSubmissionMessage = ref<string | null>(null);
 
 const normalizeTagKey = (label: string): string =>
@@ -284,10 +290,6 @@ const activeDrawerCustomTags = computed<FormModePresetTag[]>(() => {
   );
 });
 
-const activeDrawerCustomLabels = computed<string[]>(() =>
-  activeDrawerCustomTags.value.map((tag) => tag.label),
-);
-
 const activeDrawerSelectedLabel = computed(() => {
   const cell = activeDrawerCell.value;
   if (!cell) {
@@ -382,6 +384,7 @@ const openPreferenceDrawer = (cell: PreferenceCell) => {
   drawerSelectedCategoryMap.value = nextCategoryMap;
   drawerSelectedUncategorizedLabels.value = [...nextUncategorized];
   drawerCustomTags.value = [...localCustomTags.value];
+  customTagDraft.value = "";
   preferenceDrawerOpen.value = true;
 };
 
@@ -489,6 +492,25 @@ const selectCustomLabel = (label: string) => {
   }
 };
 
+const replaceDrawerSelection = (previousLabel: string, nextLabel: string) => {
+  const category = derivePreferenceCategory(previousLabel);
+  if (category) {
+    if (drawerSelectedCategoryMap.value[category] !== previousLabel) {
+      return;
+    }
+    drawerSelectedCategoryMap.value = {
+      ...drawerSelectedCategoryMap.value,
+      [category]: nextLabel,
+    };
+    return;
+  }
+
+  drawerSelectedUncategorizedLabels.value =
+    drawerSelectedUncategorizedLabels.value.map((item) =>
+      item === previousLabel ? nextLabel : item,
+    );
+};
+
 const removeDrawerSelection = (label: string) => {
   const category = derivePreferenceCategory(label);
   if (category) {
@@ -514,26 +536,52 @@ const handleRemoveCustomTag = (label: string) => {
   removeDrawerSelection(label);
 };
 
-const handleRemoveCustomTagFromInput = (
-  _label: string,
-  remove: (event: MouseEvent) => void,
-  event: MouseEvent,
-): void => {
-  event.stopPropagation();
-  remove(event);
+const handleCustomTagDraftUpdate = (value: string) => {
+  customTagDraft.value = value;
 };
 
-const handleAddCustomTag = (value: string) => {
+const hasDrawerTagLabel = (label: string, exceptLabel?: string): boolean => {
+  const key = normalizeTagKey(label);
+  const exceptKey = exceptLabel ? normalizeTagKey(exceptLabel) : null;
+  return drawerEffectiveTags.value.some((tag) => {
+    const tagKey = normalizeTagKey(tag.label);
+    return tagKey === key && tagKey !== exceptKey;
+  });
+};
+
+const handleCommitCustomTag = (previousLabel: string, value: string) => {
   const normalized = buildCustomTagLabelForActiveCell(value);
   if (!normalized) {
+    handleRemoveCustomTag(previousLabel);
     return;
   }
 
-  const knownLabels = new Set(
-    drawerEffectiveTags.value.map((tag) => normalizeTagKey(tag.label)),
+  if (hasDrawerTagLabel(normalized, previousLabel)) {
+    handleRemoveCustomTag(previousLabel);
+    selectCustomLabel(normalized);
+    return;
+  }
+
+  const previousKey = normalizeTagKey(previousLabel);
+  drawerCustomTags.value = drawerCustomTags.value.map((tag) =>
+    normalizeTagKey(tag.label) === previousKey
+      ? {
+          ...tag,
+          label: normalized,
+        }
+      : tag,
   );
-  const key = normalizeTagKey(normalized);
-  if (!knownLabels.has(key)) {
+  replaceDrawerSelection(previousLabel, normalized);
+  selectCustomLabel(normalized);
+};
+
+const handleAddCustomTag = (value: string) => {
+  const normalized = buildCustomTagLabelForActiveCell(value);
+  if (!normalized) {
+    return;
+  }
+
+  if (!hasDrawerTagLabel(normalized)) {
     const tag = {
       id: -Date.now(),
       label: normalized,
@@ -543,6 +591,7 @@ const handleAddCustomTag = (value: string) => {
   }
 
   selectCustomLabel(normalized);
+  customTagDraft.value = "";
 };
 
 const handleSavePreferenceDrawer = async () => {
diff --git a/apps/frontend/src/domains/pr/ui/forms/PREditor.vue b/apps/frontend/src/domains/pr/ui/forms/PREditor.vue
index f850c6529..915f4429b 100644
--- a/apps/frontend/src/domains/pr/ui/forms/PREditor.vue
+++ b/apps/frontend/src/domains/pr/ui/forms/PREditor.vue
@@ -129,12 +129,13 @@
             class="form-field"
             :label="t('partnerRequestForm.preferences')"
           >
-            <PuChipInput
+            <PuChipsEditor
               v-model="preferencesInput"
               data-testid="pr-editor.form.preference-input"
               :placeholder="t('partnerRequestForm.preferencesPlaceholder')"
               :remove-label="t('partnerRequestForm.removePreference')"
               shape="pill"
+              add-on-blur
             />
           </PuFormItem>
 
@@ -199,7 +200,7 @@ import { trackEvent } from "@/shared/telemetry/track";
 import { formatLocalDateTimeWindowLabel } from "@/shared/datetime/formatLocalDateTime";
 import {
   PuButton,
-  PuChipInput,
+  PuChipsEditor,
   PuDialog,
   PuEmptyState,
   PuFormItem,
diff --git a/apps/frontend/src/shared/ui/AGENTS.md b/apps/frontend/src/shared/ui/AGENTS.md
index e5a08cedc..30509e9f2 100644
--- a/apps/frontend/src/shared/ui/AGENTS.md
+++ b/apps/frontend/src/shared/ui/AGENTS.md
@@ -25,6 +25,7 @@ Containers and layout:
 Forms and controls:
 
 - `PuFormItem`, `PuInput`, `PuTextarea`, `PuToggleSwitch`, and `PuWheelPicker` from `@partner-up-dev/design-web`: default form-field, text-control, switch, and wheel-picker primitives. Use them directly at usage sites rather than adding local wrappers.
+- `PuChipInput` and `PuChipsEditor` from `@partner-up-dev/design-web`: use `PuChipInput` for editing one chip value, and `PuChipsEditor` for string-array tag/chip collection editing. Keep domain suggestion, selection, and submission behavior in the consuming surface.
 - `PuSegmented` and `PuSegmentedItem` from `@partner-up-dev/design-web`: default mutually exclusive mode selector. Keep domain labels, state, workflow transitions, and option-level scenario test IDs in the consuming surface.
 - `forms/ProductLocalDateCalendarPicker.vue`: product-local date-key calendar grid for visible-window multi-select flows.
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3a35248c9..9720512c5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -122,8 +122,8 @@ importers:
   apps/frontend:
     dependencies:
       '@partner-up-dev/design-web':
-        specifier: 0.4.3
-        version: 0.4.3(sass@1.97.3)(unocss@66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)))(vue@3.5.35(typescript@6.0.3))
+        specifier: 0.4.4
+        version: 0.4.4(sass@1.97.3)(unocss@66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)))(vue@3.5.35(typescript@6.0.3))
       '@tanstack/vue-query':
         specifier: ^5.60.0
         version: 5.92.9(vue@3.5.35(typescript@6.0.3))
@@ -1187,8 +1187,8 @@ packages:
     resolution: {integrity: sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==}
     engines: {node: '>= 10.0.0'}
 
-  '@partner-up-dev/design-web@0.4.3':
-    resolution: {integrity: sha512-0cDaq2zgd2b+d6Mtw/1As8P8oemLEqx8SgH3mzMzaJwmFPx32VyP34hEbKRrEuwyUqyN+kmsDp7zt7Pjz8VHMA==, tarball: https://npm.pkg.github.com/download/@partner-up-dev/design-web/0.4.3/2f9e64e2a0e285086a4fe8f73c8c218c58c4c513}
+  '@partner-up-dev/design-web@0.4.4':
+    resolution: {integrity: sha512-dxx1bgPwMu0IhctXExuEkbugfohr6TNmDRai+R/0mykS/3b7TTKr4/jk56D6HFOX3wMP0ctRc41jdOR68TwwqA==, tarball: https://npm.pkg.github.com/download/@partner-up-dev/design-web/0.4.4/2554be0fd040ef2444f3e9e3f9dd02a2e2f7a9fb}
     peerDependencies:
       sass: ^1.94.2
       unocss: ^66.6.8
@@ -3379,7 +3379,7 @@ snapshots:
       '@parcel/watcher-win32-x64': 2.5.6
     optional: true
 
-  '@partner-up-dev/design-web@0.4.3(sass@1.97.3)(unocss@66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)))(vue@3.5.35(typescript@6.0.3))':
+  '@partner-up-dev/design-web@0.4.4(sass@1.97.3)(unocss@66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)))(vue@3.5.35(typescript@6.0.3))':
     dependencies:
       sass: 1.97.3
       unocss: 66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0))
diff --git a/tasks/design-web-package-integration/deep-ui-refactor/20-slice-plan.md b/tasks/design-web-package-integration/deep-ui-refactor/20-slice-plan.md
index 32a4e2016..fa1954234 100644
--- a/tasks/design-web-package-integration/deep-ui-refactor/20-slice-plan.md
+++ b/tasks/design-web-package-integration/deep-ui-refactor/20-slice-plan.md
@@ -104,7 +104,10 @@ Original scope:
 - `PuInput` now explicitly documents native `list` forwarding.
 - `PuTextarea` now explicitly documents `rows`, `form`, and `change`.
 - `PuForm` now documents native attributes and external submit support.
-- `PuChipInput` now covers plain editable string-array token input.
+- `PuChipInput` was originally used for plain editable string-array token
+  input in 0.4.3. `@partner-up-dev/design-web@0.4.4` corrects that boundary:
+  `PuChipInput` is for one editable chip value, and `PuChipsEditor` is for
+  editable string-array chip collections.
 
 Current direction:
 
@@ -129,7 +132,7 @@ Current direction:
 - Slice 3C: numeric field cleanup with `PuNumberInput`.
 - Slice 3D: `PuForm` boundary cleanup where native form identity and external
   submit behavior are preserved.
-- Slice 3E: plain editable token input cleanup with `PuChipInput`, starting
+- Slice 3E: plain editable token input cleanup with `PuChipsEditor`, starting
   with PR editor preferences if the interaction contract is confirmed.
 
 0.4.3 implementation notes:
@@ -140,6 +143,7 @@ Current direction:
   `UpdatePRStatusForm.vue`, plus direct field-control migration for
   `PRJoinGateConfigEditor.vue`.
 - Completed Slice 3E for the plain `PREditor.vue` preferences tag input.
+  0.4.4 corrected this usage from `PuChipInput` to `PuChipsEditor`.
 - Deferred `InlineNLPRForm.vue`, broad `PREditor.vue` field migration,
   `FormModePreferenceControl.vue`, and larger admin commerce/payment form
   groups.
@@ -253,9 +257,10 @@ Scope:
 Planning notes:
 
 - Detailed packet lives in `80-form-mode-preference-composition.md`.
-- `PuChipInput` should own the custom preference entry subset, not the whole
+- `PuChipInput` should own each custom preference label, not the whole
   curated option selector. Package docs still defer suggestions and custom
-  listbox behavior.
+  listbox behavior, so preset option selection remains domain-owned
+  `PuChipGroup` + `PuChip`.
 - Treat the implementation as a pilot. Record what package composition
   generalized, what still required domain-owned state, and what should inform
   Slice 10.
@@ -265,8 +270,8 @@ Implementation notes:
 - Migrated `FormModePreferenceControl.vue` to direct `PuChipGroup`, `PuChip`,
   `PuChipInput`, `PuFormItem`, and `PuInlineNotice` composition.
 - Preset preference candidates now render as selectable package chips.
-- Custom preference entry is now a `PuChipInput` lane with chip-slot
-  composition for selectable/removable custom values.
+- Custom preference values are now individual `PuChipInput` instances inside a
+  chip group, with a blank `PuChipInput` draft chip for new custom values.
 - Removed local `tag-pill*`, `inline-message*`, and draft-input state.
 - Kept category selection, uncategorized selection, label normalization, and
   custom-tag submission as domain-owned logic.
@@ -313,8 +318,9 @@ Planning notes:
   sites, so it is deferred as legacy cleanup rather than active route
   composition work.
 - With `AdminCommerceSpuEditor.vue` out of scope, no current Slice 10
-  candidate should plan around `PuChipInput`; remaining candidates use
-  `PuInput`, `PuButton`, `PuInlineNotice`, `PuCard`, `PuDescriptionList`,
+  candidate should plan around `PuChipInput`/`PuChipsEditor`; remaining
+  candidates use `PuInput`, `PuButton`, `PuInlineNotice`, `PuCard`,
+  `PuDescriptionList`,
   `PuCellGroup`, `PuChip`, or `PuChipGroup` according to their semantics.
 
 Implementation notes:
diff --git a/tasks/design-web-package-integration/deep-ui-refactor/50-form-capability-needs.md b/tasks/design-web-package-integration/deep-ui-refactor/50-form-capability-needs.md
index 8ee488acd..3ab457690 100644
--- a/tasks/design-web-package-integration/deep-ui-refactor/50-form-capability-needs.md
+++ b/tasks/design-web-package-integration/deep-ui-refactor/50-form-capability-needs.md
@@ -11,6 +11,10 @@ items that were previously listed as upstream needs. Keep this file as a
 capability ledger: resolved items are marked rather than deleted so future
 migration decisions can see why Slice 3 changed direction.
 
+Update on 2026-06-16: `@partner-up-dev/design-web@0.4.4` corrects the chip
+editor boundary. `PuChipInput` is now a single editable chip; `PuChipsEditor`
+is the string-array tag/chip collection editor.
+
 The app can already use:
 
 - `PuFormItem` for visible labels, hints, required markers, explicit errors,
@@ -24,7 +28,8 @@ The app can already use:
   model fits.
 - `PuNumberInput` for `number | null` numeric app state, including min/max/step.
 - `PuSelect` for dense web-native single selection.
-- `PuChipInput` for plain editable string-array token input.
+- `PuChipInput` for editing one chip value.
+- `PuChipsEditor` for plain editable string-array token input.
 
 ## Current App Usage Patterns
 
@@ -213,19 +218,23 @@ Resolved package capability:
 - `PuInput` and `PuTextarea` document `update:modelValue` as the live dirty
   hook and expose `change` for browser committed-value semantics.
 
-### New In 0.4.3: Editable Chip Input
+### Corrected In 0.4.4: Editable Chip Inputs
 
 Current app relevance:
 
-- `PREditor.vue` preferences tags input has migrated to `PuChipInput`.
-- `FormModePreferenceControl.vue` is more complex than a plain chip input
-  because it owns curated options, descriptions, drawer state, and custom
-  draft creation.
+- `PREditor.vue` preferences tags input has migrated to `PuChipsEditor`.
+- `FormModePreferenceControl.vue` is more complex than a plain string-array
+  editor because it owns curated options, descriptions, drawer state,
+  category-specific selection, custom draft creation, and custom label
+  editing.
+- `FormModePreferenceControl.vue` custom preference values use individual
+  `PuChipInput` instances, while curated options remain
+  `PuChipGroup` + `PuChip`.
 
 Remaining later needs:
 
-- `PuChipInput` suggestions and custom option listbox behavior are deferred by
-  the first API.
+- `PuChipsEditor` suggestions and custom option listbox behavior are deferred
+  by the first API.
 
 ## App Migration Implications
 
@@ -245,5 +254,5 @@ Until then, the frontend should:
   datalist-backed free-text suggestions.
 - Adopt `PuForm` only per form boundary, even though native form attributes and
   external submit are now documented.
-- Use `PuChipInput` for plain string-array token entry; discuss richer option
+- Use `PuChipsEditor` for plain string-array token entry; discuss richer option
   selection surfaces before migrating them.
diff --git a/tasks/design-web-package-integration/deep-ui-refactor/80-form-mode-preference-composition.md b/tasks/design-web-package-integration/deep-ui-refactor/80-form-mode-preference-composition.md
index 71d1e7533..c05cb2c94 100644
--- a/tasks/design-web-package-integration/deep-ui-refactor/80-form-mode-preference-composition.md
+++ b/tasks/design-web-package-integration/deep-ui-refactor/80-form-mode-preference-composition.md
@@ -16,7 +16,8 @@ instead of local pill, input, and inline-message markup.
 
 - Input route: `Constraint`.
 - Active mode: `Execute`.
-- Production code status: implemented and verified.
+- Production code status: implemented, verified, then corrected for the 0.4.4
+  chip-editor API boundary.
 - Candidate file:
   `apps/frontend/src/domains/event/ui/controls/form-mode/FormModePreferenceControl.vue`.
 
@@ -24,7 +25,7 @@ instead of local pill, input, and inline-message markup.
 
 - Root task protocol: this packet is volatile planning under `tasks/`.
 - Design package boundary: use only public exports and package skill
-  references for `@partner-up-dev/design-web@0.4.3`.
+  references for `@partner-up-dev/design-web@0.4.4`.
 - Product invariant: preserve the form-mode preference workflow: users choose
   preset preferences, can add custom preferences, selected values are emitted
   through `update:modelValue`, and newly created labels are submitted to the
@@ -42,11 +43,16 @@ instead of local pill, input, and inline-message markup.
   flex-gap wrappers where the children are chips.
 - `PuChip` fits selectable and removable option tokens through `selected`,
   `removable`, `click`, and `remove`.
-- `PuChipInput` fits editable string-array token entry, but package docs state
-  that suggestions and custom option listbox behavior are deferred.
-- Therefore `PuChipInput` should not swallow the whole drawer option selector.
-  It can own the custom preference entry subset while curated/preset options
-  remain `PuChipGroup` + `PuChip`.
+- `PuChipInput` now fits editing one chip value. This is the correct primitive
+  for Form Mode custom preferences because each custom label needs inline
+  edit/commit/cancel/remove behavior.
+- `PuChipsEditor` fits plain editable string-array token entry, but it should
+  not own this drawer because the drawer is not a plain collection field: it
+  mixes curated options, category-specific selection, custom label
+  normalization, and submission bookkeeping.
+- Therefore Form Mode should keep curated/preset options as
+  `PuChipGroup` + `PuChip`, and render custom values as individual
+  `PuChipInput` instances inside a `PuChipGroup`.
 
 ## Pre-Implementation Component Topology
 
@@ -85,9 +91,9 @@ composition at the usage site:
 - Render each preset option as direct `PuChip as="button" type="button"`.
 - Use `PuChip selected` for current selection and `PuChip removable` for
   custom values that are still represented in the option list.
-- Use `PuChipInput` for the custom preference entry lane. This may replace the
-  local plus-chip + draft-input mode with a persistent compact custom-entry
-  field if that produces simpler state and acceptable UX.
+- Use `PuChipInput` for each custom preference value and for the custom draft
+  entry. This keeps one-chip edit semantics explicit instead of treating the
+  drawer as a generic string-array editor.
 - Replace local error paragraphs with `PuInlineNotice tone="error"`.
 - Keep drawer footer actions as direct `PuButton`.
 
@@ -106,21 +112,17 @@ shared UI wrapper. This is domain behavior, not generic design-system surface.
 
 ## Open Design Question
 
-`PuChipInput` can be used in two reasonable ways:
+`PuChipInput` should be used at the per-tag level:
 
-1. Custom-entry lane only: display existing custom values as editable chips in
-   a separate input lane, while preset options stay in the main chip group.
-2. Add-only helper: keep custom values in the main chip group and use
-   `PuChipInput` only to commit draft labels.
+1. Existing custom values render as individual editable chips. Commit updates
+   the domain-owned custom tag label; Escape cancels through package behavior;
+   remove deletes the custom label and clears its selection.
+2. New custom values use a blank `PuChipInput` draft chip. Commit normalizes
+   the label for the active category, adds it if needed, selects it, and clears
+   the draft.
 
-The first option uses `PuChipInput` more honestly as a string-array field and
-removes more local UI state. It changes the drawer layout more. The second
-option changes less visually but risks treating `PuChipInput` like a hidden
-text input with extra ceremony.
-
-Current recommendation: prefer option 1 unless implementation evidence shows
-that category-prefix normalization or submission bookkeeping becomes harder
-than the removed local markup is worth.
+`PuChipsEditor` remains appropriate for plain tag arrays such as PR editor
+preferences, but it is the wrong owner for Form Mode preference selection.
 
 ## Proposed Execution Slice
 
@@ -145,9 +147,9 @@ Implemented in
   selection workflow.
 - Replaced the local preset option pill list with direct `PuChipGroup` +
   selectable `PuChip` usage.
-- Moved custom preference entry into a `PuFormItem` + `PuChipInput` lane.
-  Custom chips use the `PuChipInput` `chip` slot so they can remain
-  selectable and removable through direct `PuChip`.
+- Moved custom preference entry into a `PuFormItem` + `PuChipGroup` lane.
+  Existing custom labels and the add-new draft are direct `PuChipInput`
+  instances so each tag can be edited, committed, cancelled, or removed.
 - Replaced submission failure text with `PuInlineNotice tone="error"`.
 - Deleted the local draft-input state:
   `drawerCustomTagEditing`, `drawerCustomTagInput`, and
@@ -161,6 +163,15 @@ The pilot showed that package composition can remove most local primitive UI
 ownership, but the product-specific selection topology still belongs in the
 domain component or a future domain composable.
 
+0.4.4 correction:
+
+- `@partner-up-dev/design-web@0.4.4` corrected the component boundary:
+  `PuChipInput` is now a single editable chip, while `PuChipsEditor` owns
+  string-array chip collection editing.
+- `FormModePreferenceControl.vue` now uses `PuChipInput` for individual custom
+  preference labels and keeps the curated option selector as
+  `PuChipGroup` + `PuChip`.
+
 ## Pilot Role
 
 This is Slice 9, but it is also a pilot for the broader composition rollout.
diff --git a/tasks/design-web-package-integration/deep-ui-refactor/96-0.4.4-chip-editor-correction.md b/tasks/design-web-package-integration/deep-ui-refactor/96-0.4.4-chip-editor-correction.md
new file mode 100644
index 000000000..1b2d5ec32
--- /dev/null
+++ b/tasks/design-web-package-integration/deep-ui-refactor/96-0.4.4-chip-editor-correction.md
@@ -0,0 +1,52 @@
+# 0.4.4 Chip Editor Correction
+
+## Objective & Hypothesis
+
+Objective: upgrade `@partner-up-dev/design-web` from `0.4.3` to `0.4.4` and
+correct downstream chip-editor usage after the package split `PuChipInput` and
+`PuChipsEditor` responsibilities.
+
+Hypothesis: app-side plain string-array chip collection editors should migrate
+to `PuChipsEditor`, while richer per-label edit surfaces should compose
+individual `PuChipInput` instances.
+
+## Guardrails Touched
+
+- Dependency boundary: consume `@partner-up-dev/design-web@0.4.4` through the
+  package root and package-shipped skill references.
+- Agent skill boundary: do not hand-edit local skill copies. Verify the
+  package skill through TanStack Intent.
+- Product invariant: preserve PR preference editing and Form Mode preference
+  selection/submission semantics.
+- Type invariant: no local type shims and no package-private imports.
+
+## API Reading
+
+- `PuChipInput` intent is now editable single-chip input.
+- `PuChipsEditor` intent is editable string-array chip collection with draft
+  entry, add/remove events, and an optional `chip` slot.
+- `PuChipsEditor` still defers suggestions and custom option listbox
+  behavior, so Form Mode curated option selection and per-tag editing remain
+  domain-owned `PuChipGroup` + `PuChip`/`PuChipInput` composition.
+
+## Implementation Notes
+
+- Upgraded `apps/frontend/package.json` and `pnpm-lock.yaml` to
+  `@partner-up-dev/design-web@0.4.4`.
+- Verified package skill discovery, load, and validation with TanStack Intent.
+- Replaced old array-style `PuChipInput` usage in `PREditor.vue` with
+  `PuChipsEditor`.
+- Replaced the custom preference entry lane in
+  `FormModePreferenceControl.vue` with per-label `PuChipInput` composition:
+  existing custom labels are editable chip inputs, and a blank draft chip input
+  adds new custom labels.
+- Updated task-local migration docs and frontend shared UI guidance to reflect
+  the corrected chip-editor boundary.
+
+## Verification
+
+- Passed `pnpm --filter @partner-up-dev/frontend build`.
+- Passed `pnpm --filter @partner-up-dev/frontend lint:tokens`.
+- Passed `pnpm test:unit:frontend`.
+- Passed source scan for old array-style `PuChipInput` usage.
+- Passed `git diff --check`.
diff --git a/tasks/design-web-package-integration/deep-ui-refactor/README.md b/tasks/design-web-package-integration/deep-ui-refactor/README.md
index d8f6765c5..6fbbb961d 100644
--- a/tasks/design-web-package-integration/deep-ui-refactor/README.md
+++ b/tasks/design-web-package-integration/deep-ui-refactor/README.md
@@ -18,7 +18,7 @@ and product interaction state in one file.
 - Active mode: `Execute`.
 - Production code status: Slice 1 implemented and verified; Slice 3 0.4.3
   implementation pass implemented and verified; Slice 9 composition pilot
-  implemented and verified.
+  implemented and corrected for the 0.4.4 chip-editor boundary.
 - Task scope: frontend UI structure and package component composition.
 
 ## Guardrails Touched
@@ -35,7 +35,7 @@ and product interaction state in one file.
 ## Current Understanding
 
 - The up-to-date design package skill is shipped with
-  `@partner-up-dev/design-web@0.4.3` under
+  `@partner-up-dev/design-web@0.4.4` under
   `apps/frontend/node_modules/@partner-up-dev/design-web/skills/design-web`.
 - The previous component-migration packet has completed direct migrations for
   local facades such as button, card choice, tabs, overlays, cells, chips,
@@ -53,10 +53,13 @@ and product interaction state in one file.
   `AnchorEventListModeSurface.vue`, `AnchorEventDemandCard.vue`,
   `FormModePreferenceControl.vue`, and `MePage.vue`.
 - Raw form controls remain concentrated in admin, commerce, PR editor, POI,
-  and route/event editing surfaces. The 0.4.3 package now supports
-  `PuNumberInput`, `PuSelect`, `PuChipInput`, native `PuInput list`
-  forwarding, `PuTextarea rows`, and documented `PuForm` native form
-  attributes, so Slice 3 can move beyond text/textarea cleanup.
+  and route/event editing surfaces. The 0.4.3 package supports
+  `PuNumberInput`, `PuSelect`, native `PuInput list` forwarding,
+  `PuTextarea rows`, and documented `PuForm` native form attributes. The
+  0.4.4 package corrects chip editing: `PuChipInput` is one editable chip
+  value, and `PuChipsEditor` owns string-array tag/chip collection editing.
+  Slice 3 can move beyond text/textarea cleanup with those corrected
+  boundaries.
 - The bounded 0.4.3 Slice 3 implementation pass is recorded in
   `46-slice3-0.4.3-implementation.md`; it covers select/datalist, a focused
   Anchor Event numeric group, small form boundaries, a dynamic join-gate field
@@ -92,7 +95,8 @@ and product interaction state in one file.
 - `PuNumberInput` covers `number | null` app state and native numeric
   constraints as of `0.4.3`.
 - `PuSelect` covers dense web-native single selection as of `0.4.3`.
-- `PuChipInput` covers plain editable string-array token input as of `0.4.3`.
+- `PuChipInput` is a single editable chip input as of `0.4.4`; use
+  `PuChipsEditor` for plain editable string-array token input.
 - `PuForm` exposes schema/validation structure, a documented `submit` event,
   native form attribute fallthrough, and external submit support. Use it where
   the form can adopt package form semantics directly, not as a wrapper around
@@ -114,9 +118,9 @@ Detailed slice planning lives in `20-slice-plan.md`.
    direct `PuCard` or `PuCellGroup` usage. Keep `AdminPageScaffold` only if it
    remains a real admin layout container over `PuPageScaffold`.
 3. Field cleanup: continue migrating text/password/URL/textarea controls, and
-   use 0.4.3 APIs for numeric fields (`PuNumberInput`), dense single selects
+   use package APIs for numeric fields (`PuNumberInput`), dense single selects
    (`PuSelect`), datalist-backed free text (`PuInput list`), real submit
-   boundaries (`PuForm`), and plain tag inputs (`PuChipInput`) in small
+   boundaries (`PuForm`), and plain tag inputs (`PuChipsEditor`) in small
    sub-slices.
 4. Read-only/data display cleanup: replace local KPI cards, summary grids,
    row groups, and status badges with `PuBentoItem`, `PuCard`,
@@ -188,6 +192,7 @@ Slice 1 verification:
 - `pnpm --filter @partner-up-dev/frontend lint:tokens` passed.
 - `pnpm test:unit:frontend` passed.
 - `git diff --check` passed.
+- `git diff --check` passed.
 - Source scans found no old `PageHeader`/`ErrorToast` usage-site references, no
   package private-path imports, and no raw `type="datetime-local"` in the four
   migrated datetime files.
@@ -210,6 +215,24 @@ Slice 1 verification:
 - Slice 3 0.4.3 implementation verification is recorded in
   `46-slice3-0.4.3-implementation.md`.
 
+0.4.4 uplift verification:
+
+- Package dependency and lockfile updated from `0.4.3` to `0.4.4`.
+- TanStack Intent package skill found by `list --json`, loaded by
+  `load @partner-up-dev/design-web#design-web`, and validated by
+  `validate apps/frontend/node_modules/@partner-up-dev/design-web/skills/design-web`.
+- 0.4.4 skill references document the corrected split: `PuChipInput` for one
+  editable chip value and `PuChipsEditor` for string-array chip collection
+  editing.
+- `PREditor.vue` preferences corrected from old array-style `PuChipInput`
+  usage to `PuChipsEditor`.
+- `FormModePreferenceControl.vue` corrected to the 0.4.4 `PuChipInput`
+  composition: one editable chip per custom preference plus one draft chip for
+  new custom labels.
+- `pnpm --filter @partner-up-dev/frontend build` passed.
+- `pnpm --filter @partner-up-dev/frontend lint:tokens` passed.
+- `pnpm test:unit:frontend` passed.
+
 Slice 11 verification:
 
 - `PuFileUpload`/`PuFilesUpload` replaced direct user upload controls while

From f1b3e730ce374b30f2abc6d7fe4529a5a73767cb Mon Sep 17 00:00:00 2001
From: Lanzhijiang <lanzhijiang@foxmail.com>
Date: Tue, 16 Jun 2026 22:12:18 +0800
Subject: [PATCH 16/94] chore(static): add layered validation gate

---
 .github/workflows/backend-db-validate.yml     |   4 +-
 .github/workflows/backend-gate.yml            |  14 +-
 .github/workflows/frontend-gate.yml           |   7 +-
 .github/workflows/static-gate.yml             |  74 ++
 AGENTS.md                                     |   4 +-
 apps/backend/AGENTS.md                        |   3 +
 .../handle-caocao-order-status-callback.ts    |   3 +-
 apps/frontend/AGENTS.md                       |   7 +
 biome.json                                    |  54 ++
 knip.json                                     |  65 ++
 package.json                                  |  39 +-
 pnpm-lock.yaml                                | 727 +++++++++++++++++-
 pnpm-workspace.yaml                           |   1 +
 scripts/run-semgrep.mjs                       |  58 ++
 sgconfig.yml                                  |   2 +
 .../00-task-packet.md                         |  36 +
 .../static-validation-system/01-inventory.md  |  21 +
 .../02-tool-boundaries.md                     |  23 +
 .../03-execution-slices.md                    |  20 +
 .../04-knip-triage.md                         |  40 +
 .../05-biome-pilot.md                         |  28 +
 .../06-semgrep-local.md                       |  18 +
 .../90-verification.md                        |  33 +
 .../rules/no-hono-http-exception-import.yml   |   6 +
 .../ast-grep/rules/no-new-http-exception.yml  |   6 +
 tools/semgrep/security.yml                    |  22 +
 26 files changed, 1272 insertions(+), 43 deletions(-)
 create mode 100644 .github/workflows/static-gate.yml
 create mode 100644 biome.json
 create mode 100644 knip.json
 create mode 100644 scripts/run-semgrep.mjs
 create mode 100644 sgconfig.yml
 create mode 100644 tasks/static-validation-system/00-task-packet.md
 create mode 100644 tasks/static-validation-system/01-inventory.md
 create mode 100644 tasks/static-validation-system/02-tool-boundaries.md
 create mode 100644 tasks/static-validation-system/03-execution-slices.md
 create mode 100644 tasks/static-validation-system/04-knip-triage.md
 create mode 100644 tasks/static-validation-system/05-biome-pilot.md
 create mode 100644 tasks/static-validation-system/06-semgrep-local.md
 create mode 100644 tasks/static-validation-system/90-verification.md
 create mode 100644 tools/ast-grep/rules/no-hono-http-exception-import.yml
 create mode 100644 tools/ast-grep/rules/no-new-http-exception.yml
 create mode 100644 tools/semgrep/security.yml

diff --git a/.github/workflows/backend-db-validate.yml b/.github/workflows/backend-db-validate.yml
index 9a48db122..db78ffb4b 100644
--- a/.github/workflows/backend-db-validate.yml
+++ b/.github/workflows/backend-db-validate.yml
@@ -35,8 +35,8 @@ jobs:
       - name: Install dependencies (workspace)
         run: pnpm --filter @partner-up-dev/backend... install --frozen-lockfile
 
-      - name: Lint migration and seed files
-        run: pnpm --filter @partner-up-dev/backend db:lint
+      - name: Validate backend DB config and migration files
+        run: pnpm check:config:backend
 
       - name: Regenerate Drizzle SQL artifacts
         run: pnpm --filter @partner-up-dev/backend db:generate
diff --git a/.github/workflows/backend-gate.yml b/.github/workflows/backend-gate.yml
index f4b625b3e..a11ed57d5 100644
--- a/.github/workflows/backend-gate.yml
+++ b/.github/workflows/backend-gate.yml
@@ -13,6 +13,9 @@ on:
       - "pnpm-lock.yaml"
       - "pnpm-workspace.yaml"
       - ".node-version"
+      - "biome.json"
+      - "sgconfig.yml"
+      - "tools/**"
       - ".github/workflows/backend-gate.yml"
   workflow_dispatch:
 
@@ -58,13 +61,16 @@ jobs:
         run: pnpm --filter . --filter @partner-up-dev/backend... install --frozen-lockfile
 
       - name: Typecheck backend
-        run: pnpm --filter @partner-up-dev/backend typecheck
+        run: pnpm check:type:backend
+
+      - name: Validate backend config artifacts
+        run: pnpm check:config:backend
+
+      - name: Build backend reachability targets
+        run: pnpm check:build:backend
 
       - name: Run backend unit tests
         run: pnpm test:unit:backend
 
-      - name: Lint backend DB artifacts
-        run: pnpm db:lint
-
       - name: Run backend scenario tests
         run: pnpm test:scenario:backend
diff --git a/.github/workflows/frontend-gate.yml b/.github/workflows/frontend-gate.yml
index fdcc7087d..ebfa136b0 100644
--- a/.github/workflows/frontend-gate.yml
+++ b/.github/workflows/frontend-gate.yml
@@ -14,6 +14,7 @@ on:
       - "pnpm-workspace.yaml"
       - ".node-version"
       - ".npmrc"
+      - "biome.json"
       - ".github/workflows/frontend-gate.yml"
   workflow_dispatch:
 
@@ -43,11 +44,11 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
-      - name: Lint frontend design tokens
-        run: pnpm --filter @partner-up-dev/frontend lint:tokens:strict
+      - name: Typecheck frontend
+        run: pnpm check:type:frontend
 
       - name: Run frontend unit tests
         run: pnpm test:unit:frontend
 
       - name: Build frontend
-        run: pnpm --filter @partner-up-dev/frontend build
+        run: pnpm check:build:frontend
diff --git a/.github/workflows/static-gate.yml b/.github/workflows/static-gate.yml
new file mode 100644
index 000000000..c5533ecf0
--- /dev/null
+++ b/.github/workflows/static-gate.yml
@@ -0,0 +1,74 @@
+name: Static Gate
+
+on:
+  pull_request:
+    branches:
+      - master
+      - develop
+    paths:
+      - ".github/workflows/static-gate.yml"
+      - ".node-version"
+      - ".npmrc"
+      - "AGENTS.md"
+      - "apps/**"
+      - "packages/**"
+      - "scripts/**"
+      - "tests/**"
+      - "tools/**"
+      - "biome.json"
+      - "knip.json"
+      - "sgconfig.yml"
+      - "package.json"
+      - "pnpm-lock.yaml"
+      - "pnpm-workspace.yaml"
+      - "vitest.config.ts"
+      - "vitest.backend.config.ts"
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  packages: read
+
+jobs:
+  static-gate:
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    env:
+      NODE_AUTH_TOKEN: ${{ secrets.NODE_AUTH_TOKEN || github.token }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v6
+        with:
+          fetch-depth: 0
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v6
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version-file: .node-version
+          cache: pnpm
+
+      - name: Setup Python
+        uses: actions/setup-python@v6
+        with:
+          python-version: "3.x"
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Install Semgrep
+        run: python -m pip install semgrep==1.166.0
+
+      - name: Check changed-file formatting
+        run: pnpm check:format
+
+      - name: Run static lint
+        run: pnpm check:lint
+
+      - name: Report dead code and dependency hygiene
+        run: pnpm check:dead-code
+
+      - name: Report security findings
+        run: pnpm check:security
diff --git a/AGENTS.md b/AGENTS.md
index 98e5bff42..1dc8234f4 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -110,7 +110,9 @@ Pause and ask for human confirmation when:
 - Use `pnpm dev:portless` as the underlying full-stack local development entry. `portless.json` owns the stable app names for the frontend (`partner-up`) and backend (`api.partner-up`). Do not start ad hoc duplicate dev servers with raw `pnpm dev`, `pnpm dev:frontend`, or `pnpm dev:backend` when the goal is only to ensure services are running.
 - When updating `@partner-up-dev/design-web`, do not hand-edit local agent skill copies. After installing the new package version, verify the package-shipped TanStack Intent skill with `pnpm dlx @tanstack/intent@latest list --json`, `pnpm dlx @tanstack/intent@latest load @partner-up-dev/design-web#design-web`, and `pnpm dlx @tanstack/intent@latest validate apps/frontend/node_modules/@partner-up-dev/design-web/skills/design-web`. Do not add an `intent-skills` managed block unless explicitly requested.
 - Keep tests and guardrails aligned with behavior changes; do not ship by build-only confidence.
-- Use `pnpm lint:backend` to run backend source guardrails, including the Problem Details lint that prevents production API code from throwing raw Hono HTTP exceptions.
+- Use the root `pnpm check:*` scripts as canonical static-validation entrypoints. Run `pnpm check:static` for the full local gate, or a narrower layer: `check:format`, `check:lint`, `check:type`, `check:config`, `check:dead-code`, `check:security`, or `check:build`.
+- Biome default checks are changed-file scoped; use `pnpm format:check:all` and `pnpm lint:biome:all` only when intentionally working on all-repo baselines.
+- `pnpm check:dead-code` and `pnpm check:security` are report-first layers. Promote findings into blocking gates only after baseline and ownership are explicit.
 - Run test suites from the repository root through Vitest projects: `pnpm test:unit:backend`, `pnpm test:unit:frontend`, `pnpm test:scenario:backend`, `pnpm test:scenario:system`, or `pnpm test:scenario:all`. Scenario Vitest project setup loads `apps/frontend/.env` and `apps/backend/.env`, then owns temporary database and server lifecycle.
 - Cross-unit user journey scenario tests belong under `tests/scenario/` and should run through the real frontend, real backend HTTP, and an isolated database when the behavior crosses both app units.
 - Frontend route workflow changes that may be covered by scenario tests should expose stable `data-testid` semantic nodes for primary actions, modal actions, and result-state affordances.
diff --git a/apps/backend/AGENTS.md b/apps/backend/AGENTS.md
index 9efded4f5..8ec3d06c0 100644
--- a/apps/backend/AGENTS.md
+++ b/apps/backend/AGENTS.md
@@ -78,7 +78,9 @@ Read the smallest useful set and keep durable docs current:
 - Controller layer (`src/controllers`): protocol conversion only; see `src/controllers/AGENTS.md`.
 - Infra layer (`src/infra`): job runner, telemetry ingest, analytics read/export queries, notifications, and operation log.
 - Unit tests under `src/**/*.test.ts` cover local rules, pure domain services, schema/bounds logic, and isolated error mapping. Scenario tests under `tests/<domain>/**/*.scenario.test.ts` cover cross-module behavior through HTTP APIs with real Postgres migrations, especially persisted state transitions, route/controller/use-case/repository coordination, and user-visible business promises.
+- `pnpm check:lint:backend` is the canonical backend source lint slice.
 - `pnpm lint:problem-details` enforces the backend API error contract in production source. Expected API failures should use Problem Details helpers from `src/lib/problem-details.ts` or typed domain helpers built on them. `src/index.ts` is the compatibility adapter that may read Hono `HTTPException` and normalize it into Problem Details.
+- `pnpm check:type:backend`, `pnpm check:config:backend`, and `pnpm check:build:backend` are the canonical backend type, DB/config, and build-reachability slices used by CI.
 - Backend scenario verification should be launched from the repository root with `pnpm test:scenario:backend`. The Vitest project setup loads workspace `.env` files and owns scenario database setup, migration, and cleanup.
 - Better not use intervals or in-process background jobs; the backend runs in scale-to-0 serverless.
 
@@ -89,6 +91,7 @@ Read the smallest useful set and keep durable docs current:
 - `pnpm db:migrate` runs the custom migration runner and records applied schema and data migrations in `app_migrations`.
 - CI/CD deploys and invokes a dedicated FC migration function inside the VPC, but it still calls the same migration runner as `pnpm db:migrate`.
 - `pnpm db:lint` validates migration and seed file naming plus transaction-mode rules before deploy.
+- `pnpm db:check` runs `drizzle-kit check`; it complements but does not replace repo-owned migration/seed lint.
 - `pnpm db:next-migration <drizzle|data-migrations>` prints the next global numeric prefix shared by both migration folders.
 - `pnpm db:reset` is local-only. It drops and recreates the local database, applies all migrations, then runs seeds.
 - `pnpm db:seed` reruns all files in `seeds/`, so every seed file must be idempotent.
diff --git a/apps/backend/src/domains/ride-hailing/use-cases/handle-caocao-order-status-callback.ts b/apps/backend/src/domains/ride-hailing/use-cases/handle-caocao-order-status-callback.ts
index e3fa6cd77..ad78d57b9 100644
--- a/apps/backend/src/domains/ride-hailing/use-cases/handle-caocao-order-status-callback.ts
+++ b/apps/backend/src/domains/ride-hailing/use-cases/handle-caocao-order-status-callback.ts
@@ -13,6 +13,7 @@ import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository
 import type { TradeOrderId } from "../../../entities/trade-order";
 import type { UserId } from "../../../entities/user";
 import { createRideHailingProviderPort } from "../services";
+import type { CaocaoOrderStatusCallback } from "../model/provider";
 
 const providerRepo = new RideHailingProviderInstanceRepository();
 const rideOrderRepo = new RideHailingOrderRepository();
@@ -138,7 +139,7 @@ async function applyCaocaoCallbackWithProviderInstance(input: {
     providerInstance: input.providerInstance,
   });
 
-  let parsed;
+  let parsed: CaocaoOrderStatusCallback;
   try {
     parsed = port.parseOrderStatusCallback(input.form);
     if (!parsed.localOrderId) {
diff --git a/apps/frontend/AGENTS.md b/apps/frontend/AGENTS.md
index f3c2bf41e..4bebb8f0b 100644
--- a/apps/frontend/AGENTS.md
+++ b/apps/frontend/AGENTS.md
@@ -27,8 +27,15 @@ Read the smallest useful set and keep durable docs current:
 
 Useful commands:
 
+- `pnpm check:lint:frontend`
+- `pnpm check:type:frontend`
+- `pnpm check:build:frontend`
+
+Focused local checks:
+
 - `pnpm --filter @partner-up-dev/frontend lint:tokens`
 - `pnpm --filter @partner-up-dev/frontend lint:tokens:strict`
+- `pnpm --filter @partner-up-dev/frontend audit:naming`
 
 ## Coding Guidelines
 
diff --git a/biome.json b/biome.json
new file mode 100644
index 000000000..38f98036d
--- /dev/null
+++ b/biome.json
@@ -0,0 +1,54 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.5.0/schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true,
+    "defaultBranch": "develop"
+  },
+  "files": {
+    "includes": [
+      "**",
+      "!**/node_modules",
+      "!**/dist",
+      "!**/build",
+      "!apps/backend/drizzle",
+      "!apps/backend/data-migrations",
+      "!apps/backend/seeds",
+      "!tasks",
+      "!scratch",
+      "!images",
+      "!dist",
+      "!pnpm-lock.yaml"
+    ]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 100
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "preset": "none",
+      "suspicious": {
+        "noFocusedTests": "error",
+        "noImplicitAnyLet": "error"
+      }
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "double",
+      "semicolons": "always",
+      "trailingCommas": "all"
+    }
+  },
+  "json": {
+    "parser": {
+      "allowComments": true,
+      "allowTrailingCommas": false
+    }
+  }
+}
diff --git a/knip.json b/knip.json
new file mode 100644
index 000000000..3b1e81c90
--- /dev/null
+++ b/knip.json
@@ -0,0 +1,65 @@
+{
+  "$schema": "https://unpkg.com/knip@6/schema.json",
+  "ignore": [
+    "dist/**",
+    "tasks/**",
+    "scratch/**",
+    "images/**",
+    "apps/backend/drizzle/**",
+    "apps/backend/data-migrations/**",
+    "apps/backend/seeds/**"
+  ],
+  "workspaces": {
+    ".": {
+      "entry": [
+        "package.json",
+        "vitest.config.ts",
+        "vitest.backend.config.ts",
+        "scripts/**/*.mjs",
+        "scripts/**/*.ps1",
+        "scripts/ci/**/*.sh"
+      ],
+      "project": [
+        "*.ts",
+        "*.json",
+        "*.jsonc",
+        "scripts/**/*.{js,mjs,ts,ps1,sh}",
+        ".github/workflows/*.yml"
+      ]
+    },
+    "apps/backend": {
+      "entry": [
+        "src/index.ts",
+        "src/scripts/**/*.ts",
+        "vitest.*.config.ts",
+        "tsup*.config.ts",
+        "drizzle.config.ts"
+      ],
+      "project": ["src/**/*.ts", "tests/**/*.ts", "*.config.ts"]
+    },
+    "apps/frontend": {
+      "entry": [
+        "src/main.ts",
+        "src/app/create-app.ts",
+        "src/**/*.test.ts",
+        "scripts/*.mjs",
+        "vite.config.ts",
+        "vitest.config.ts",
+        "uno.config.ts"
+      ],
+      "project": ["src/**/*.{ts,vue}", "scripts/*.mjs", "*.config.ts"]
+    },
+    "packages/fake-wechatpay-server": {
+      "entry": ["src/index.ts", "bin/fake-wechatpay-server.ts", "vitest.config.ts"],
+      "project": ["src/**/*.ts", "bin/**/*.ts", "vitest.config.ts"]
+    },
+    "packages/fake-caocao-server": {
+      "entry": ["src/index.ts"],
+      "project": ["src/**/*.ts"]
+    },
+    "tests/scenario": {
+      "entry": ["vitest.config.ts", "**/*.scenario.test.ts"],
+      "project": ["**/*.ts"]
+    }
+  }
+}
diff --git a/package.json b/package.json
index 74cf3e461..78fb8c7ff 100644
--- a/package.json
+++ b/package.json
@@ -20,10 +20,39 @@
     "dev:backend": "pnpm --filter @partner-up-dev/backend dev",
     "build:frontend": "pnpm --filter @partner-up-dev/frontend build",
     "build:backend": "pnpm --filter @partner-up-dev/backend build",
-    "build": "pnpm --filter @partner-up-dev/backend build && pnpm --filter @partner-up-dev/frontend build",
-    "lint": "pnpm lint:backend && pnpm lint:payment-supply-chain",
+    "build": "pnpm check:build",
+    "format": "biome format --write .",
+    "format:check": "biome format --changed --no-errors-on-unmatched .",
+    "format:check:all": "biome format .",
+    "check:static": "pnpm check:format && pnpm check:lint && pnpm check:type && pnpm check:config && pnpm check:dead-code && pnpm check:security && pnpm check:build",
+    "check:format": "pnpm format:check",
+    "check:lint": "pnpm lint:biome && pnpm lint:structure && pnpm lint:policy",
+    "check:lint:backend": "pnpm lint:biome:backend && pnpm lint:structure:backend && pnpm lint:backend",
+    "check:lint:frontend": "pnpm lint:biome:frontend && pnpm --filter @partner-up-dev/frontend lint:tokens:strict && pnpm --filter @partner-up-dev/frontend audit:naming",
+    "check:type": "pnpm check:type:backend && pnpm check:type:frontend && pnpm --filter @partner-up-dev/fake-wechatpay-server typecheck && pnpm --filter @partner-up-dev/fake-caocao-server typecheck",
+    "check:type:backend": "pnpm --filter @partner-up-dev/backend typecheck",
+    "check:type:frontend": "pnpm --filter @partner-up-dev/frontend exec vue-tsc --noEmit",
+    "check:config": "pnpm check:config:backend && pnpm lint:payment-supply-chain",
+    "check:config:backend": "pnpm db:lint && pnpm db:check",
+    "check:dead-code": "pnpm lint:dead-code:report",
+    "check:security": "pnpm lint:security:report",
+    "check:build": "pnpm check:build:backend && pnpm check:build:frontend",
+    "check:build:backend": "pnpm build:backend && pnpm --filter @partner-up-dev/backend build:db-migrate-fc",
+    "check:build:frontend": "pnpm build:frontend",
+    "lint": "pnpm check:lint",
+    "lint:biome": "biome lint --changed --no-errors-on-unmatched .",
+    "lint:biome:all": "biome lint .",
+    "lint:biome:backend": "biome lint --changed --no-errors-on-unmatched apps/backend packages scripts",
+    "lint:biome:frontend": "biome lint --changed --no-errors-on-unmatched apps/frontend",
     "lint:backend": "pnpm --filter @partner-up-dev/backend lint",
+    "lint:structure": "pnpm lint:structure:backend",
+    "lint:structure:backend": "ast-grep scan apps/backend/src --config sgconfig.yml --globs '*.ts' --globs '!**/*.test.ts' --globs '!apps/backend/src/index.ts' --globs '!apps/backend/src/scripts/lint/problem-details.ts'",
+    "lint:policy": "pnpm lint:backend && pnpm --filter @partner-up-dev/frontend lint:tokens:strict && pnpm --filter @partner-up-dev/frontend audit:naming && pnpm lint:payment-supply-chain",
+    "lint:dead-code": "knip",
+    "lint:dead-code:report": "knip --no-exit-code --reporter compact --max-show-issues 50",
     "lint:payment-supply-chain": "node ./scripts/check-payment-supply-chain.mjs",
+    "lint:security": "node ./scripts/run-semgrep.mjs --strict",
+    "lint:security:report": "node ./scripts/run-semgrep.mjs --report",
     "test": "pnpm test:unit && pnpm test:scenario:all",
     "test:unit": "vitest run --project backend-unit --project frontend-unit",
     "test:unit:backend": "vitest run --config vitest.backend.config.ts --project backend-unit",
@@ -33,6 +62,7 @@
     "test:scenario:all": "pnpm test:scenario:backend && pnpm test:scenario:system",
     "db:generate": "pnpm --filter @partner-up-dev/backend db:generate",
     "db:lint": "pnpm --filter @partner-up-dev/backend db:lint",
+    "db:check": "pnpm --filter @partner-up-dev/backend exec drizzle-kit check --config=drizzle.config.ts",
     "db:migrate": "pnpm --filter @partner-up-dev/backend db:migrate",
     "db:reset": "pnpm --filter @partner-up-dev/backend db:reset",
     "db:seed": "pnpm --filter @partner-up-dev/backend db:seed",
@@ -40,10 +70,13 @@
     "db:studio": "pnpm --filter @partner-up-dev/backend db:studio"
   },
   "devDependencies": {
+    "@ast-grep/cli": "0.43.0",
+    "@biomejs/biome": "2.5.0",
     "@hono/node-server": "^1.19.9",
+    "@partner-up-dev/fake-wechatpay-server": "workspace:*",
     "@vitejs/plugin-vue": "^5.2.4",
     "happy-dom": "^20.9.0",
-    "@partner-up-dev/fake-wechatpay-server": "workspace:*",
+    "knip": "6.17.1",
     "playwright": "^1.59.1",
     "tsx": "^4.21.0",
     "typescript": "~6.0.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9720512c5..fcb7d3604 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,6 +12,12 @@ importers:
 
   .:
     devDependencies:
+      '@ast-grep/cli':
+        specifier: 0.43.0
+        version: 0.43.0
+      '@biomejs/biome':
+        specifier: 2.5.0
+        version: 2.5.0
       '@hono/node-server':
         specifier: ^1.19.9
         version: 1.19.9(hono@4.11.5)
@@ -20,10 +26,13 @@ importers:
         version: link:packages/fake-wechatpay-server
       '@vitejs/plugin-vue':
         specifier: ^5.2.4
-        version: 5.2.4(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0))(vue@3.5.35(typescript@6.0.3))
+        version: 5.2.4(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0))(vue@3.5.35(typescript@6.0.3))
       happy-dom:
         specifier: ^20.9.0
         version: 20.9.0
+      knip:
+        specifier: 6.17.1
+        version: 6.17.1
       playwright:
         specifier: ^1.59.1
         version: 1.59.1
@@ -35,10 +44,10 @@ importers:
         version: 6.0.3
       vite:
         specifier: ^6.4.1
-        version: 6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)
+        version: 6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0)
       vitest:
         specifier: ^4.1.6
-        version: 4.1.6(@opentelemetry/api@1.9.0)(@types/node@22.19.7)(happy-dom@20.9.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0))
+        version: 4.1.6(@opentelemetry/api@1.9.0)(@types/node@22.19.7)(happy-dom@20.9.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0))
       vue:
         specifier: ^3.5.34
         version: 3.5.35(typescript@6.0.3)
@@ -111,7 +120,7 @@ importers:
         version: 10.9.2(@types/node@22.19.7)(typescript@6.0.3)
       tsup:
         specifier: ^8.0.0
-        version: 8.5.1(jiti@2.7.0)(postcss@8.5.15)(tsx@4.21.0)(typescript@6.0.3)
+        version: 8.5.1(jiti@2.7.0)(postcss@8.5.15)(tsx@4.21.0)(typescript@6.0.3)(yaml@2.9.0)
       tsx:
         specifier: ^4.19.0
         version: 4.21.0
@@ -123,7 +132,7 @@ importers:
     dependencies:
       '@partner-up-dev/design-web':
         specifier: 0.4.4
-        version: 0.4.4(sass@1.97.3)(unocss@66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)))(vue@3.5.35(typescript@6.0.3))
+        version: 0.4.4(sass@1.97.3)(unocss@66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0)))(vue@3.5.35(typescript@6.0.3))
       '@tanstack/vue-query':
         specifier: ^5.60.0
         version: 5.92.9(vue@3.5.35(typescript@6.0.3))
@@ -184,10 +193,10 @@ importers:
         version: 66.6.8
       '@unocss/vite':
         specifier: ~66.6.8
-        version: 66.6.8(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0))
+        version: 66.6.8(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0))
       '@vitejs/plugin-vue':
         specifier: ^5.2.0
-        version: 5.2.4(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0))(vue@3.5.35(typescript@6.0.3))
+        version: 5.2.4(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0))(vue@3.5.35(typescript@6.0.3))
       jsonc-parser:
         specifier: ^3.3.1
         version: 3.3.1
@@ -199,10 +208,10 @@ importers:
         version: 6.0.3
       unocss:
         specifier: ~66.6.8
-        version: 66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0))
+        version: 66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0))
       vite:
         specifier: ^6.0.0
-        version: 6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)
+        version: 6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0)
       vue-tsc:
         specifier: ^2.1.0
         version: 2.2.12(typescript@6.0.3)
@@ -239,7 +248,7 @@ importers:
         version: 6.0.3
       vitest:
         specifier: ^4.1.6
-        version: 4.1.6(@opentelemetry/api@1.9.0)(@types/node@22.19.7)(happy-dom@20.9.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0))
+        version: 4.1.6(@opentelemetry/api@1.9.0)(@types/node@22.19.7)(happy-dom@20.9.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0))
 
 packages:
 
@@ -278,6 +287,53 @@ packages:
   '@antfu/install-pkg@1.1.0':
     resolution: {integrity: sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==}
 
+  '@ast-grep/cli-darwin-arm64@0.43.0':
+    resolution: {integrity: sha512-0i63gSBbgriPaRpFsbP3yETxolHPK2JAZbpcGbFOytB7QTnKAguwhlKmIOkUGKfsCzYiEq1awY0EBmvjMONXOg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@ast-grep/cli-darwin-x64@0.43.0':
+    resolution: {integrity: sha512-SPkj00HGKpYdqReUmso2ftG5Xgd+bWNFH4i9fubLxsWzn4ey2G6sotPruaOtcrzxb9xH+8kmhN7KJfm1k8Atzg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@ast-grep/cli-linux-arm64-gnu@0.43.0':
+    resolution: {integrity: sha512-U8+2fkcY8sBxNHHBYZ33vTa7C97GFAB+Kj6gFzVMSqK8Ve1Aw+DxhVWD4i/PBryDdmWb4/erjGSkTQtdhVa2vg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@ast-grep/cli-linux-x64-gnu@0.43.0':
+    resolution: {integrity: sha512-r/o9Mag6OZmGevY9OJjatuUKDOX1rSvgo29qSfxpMbIciiH3hkzEW/2w1xTPZI8xnM7iC+k+CkGoknmoXVTYGg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@ast-grep/cli-win32-arm64-msvc@0.43.0':
+    resolution: {integrity: sha512-oHa4ruD87xccnqFuR+Pmx6F/suHV0YtibuyZ6SxUqgpNJAFZiUNAiFblzhEgQ5gp03e8B012P/Yy/7GYOvxOLg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@ast-grep/cli-win32-ia32-msvc@0.43.0':
+    resolution: {integrity: sha512-RSzz9bKzSEutWgX7/g84guudEp75Q990CYpG/TBasdJP+U27zX8aA9d5p1+o/lF0hw3UoTYuFCGG8PU/QelfNQ==}
+    engines: {node: '>= 10'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@ast-grep/cli-win32-x64-msvc@0.43.0':
+    resolution: {integrity: sha512-/5dDD9B65vVuHCdVHN5+tIDquhE5s43S5CgEn88w1BgQaoayf+nRnUO4ZFez6SqyCGqAfa/yZdoaOQ9N2ySa1w==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@ast-grep/cli@0.43.0':
+    resolution: {integrity: sha512-DGi6xXAOBJubGg9QWqTeW8PzKSGHWEOa3uxXspEfYf532yb3lHmNJAcKMl1d+O9Xs9bTcNeDLC8se+O+tirEFQ==}
+    engines: {node: '>= 12.0.0'}
+    hasBin: true
+
   '@babel/helper-string-parser@7.27.1':
     resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
     engines: {node: '>=6.9.0'}
@@ -312,6 +368,59 @@ packages:
     resolution: {integrity: sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==}
     engines: {node: '>=6.9.0'}
 
+  '@biomejs/biome@2.5.0':
+    resolution: {integrity: sha512-4kURkd9hAPrdDM3C9n82ycYgx8hvQcW6MjKTEejruj8rK0N8P3OPpdy8BvI8kt3KWY4ycF5XtDOrktetEfhfuw==}
+    engines: {node: '>=14.21.3'}
+    hasBin: true
+
+  '@biomejs/cli-darwin-arm64@2.5.0':
+    resolution: {integrity: sha512-Mn3Fwi3SA5fgmfCPqmzpWF2DLZnms3BVAhM088nTnGrTZmHS3wwIjcoZPqpXeNgd3DrrLH6xp8vTLIBuJoZiXw==}
+    engines: {node: '>=14.21.3'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@biomejs/cli-darwin-x64@2.5.0':
+    resolution: {integrity: sha512-rg3VPL5P8mYro6pqlXYXuJWph21slVp3SZtAqWSrkZs40d2gTzYmHF8E/X1iTID25btmNKltNDJ926sqVBp7DQ==}
+    engines: {node: '>=14.21.3'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@biomejs/cli-linux-arm64-musl@2.5.0':
+    resolution: {integrity: sha512-vQdM4oSGaf7ZNeGO9w5+Y8SBtyser9M6znxYbm7Ec8wInxJu1WiKxFYZW5Auj2d80bcVvefuGGRxoFOE0eee8g==}
+    engines: {node: '>=14.21.3'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@biomejs/cli-linux-arm64@2.5.0':
+    resolution: {integrity: sha512-tl+LW8fdD96/xdeWtWwc82LIOc5CoY7N2AsogLTp5R4ECErYt+8Jl/N68ezN9vzSiqPTxw6vjcihoLPYKZHrlw==}
+    engines: {node: '>=14.21.3'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@biomejs/cli-linux-x64-musl@2.5.0':
+    resolution: {integrity: sha512-+9hIcMngJ+yGUahXqZuZ8CoWKJE9SAZsFsM3QDvXpNsLbXZ9lqVzgBhOk/jTSYkOA0GLP9eu3teukqpLUojHMg==}
+    engines: {node: '>=14.21.3'}
+    cpu: [x64]
+    os: [linux]
+
+  '@biomejs/cli-linux-x64@2.5.0':
+    resolution: {integrity: sha512-zpEGf4RQbFEh8Vt7OmavLyyOzRbtcE9osCqrS1kfvt8jDvxwhKXLSf7n0ebr/ov0RJ9ssP+lhs6C8a9WwFvrQA==}
+    engines: {node: '>=14.21.3'}
+    cpu: [x64]
+    os: [linux]
+
+  '@biomejs/cli-win32-arm64@2.5.0':
+    resolution: {integrity: sha512-jB0wAvTLI4itx5VidqVUejPQFhRUxiZ9l9FvZ26D5fl6t3qme+ZB4PD3bTSeL1vZ8NI2Rx/zj6H9zcESuGHKGw==}
+    engines: {node: '>=14.21.3'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@biomejs/cli-win32-x64@2.5.0':
+    resolution: {integrity: sha512-VT/lF+GId+67j8aDfLkxdxNoVApsPSTbyAtB3jJq0IWTrY77WXfbPfpngxq0bA6JCEv/7k8C9qWjDRKRznDlyw==}
+    engines: {node: '>=14.21.3'}
+    cpu: [x64]
+    os: [win32]
+
   '@cspotcode/source-map-support@0.8.1':
     resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
     engines: {node: '>=12'}
@@ -989,122 +1098,339 @@ packages:
     cpu: [arm]
     os: [android]
 
+  '@oxc-parser/binding-android-arm-eabi@0.135.0':
+    resolution: {integrity: sha512-sHeZItACNcA5WRAWqF6ixriR4GkZDyY10gVgnZU7pXku1DjHFATSqnwZM809jl0gXPHxb6fKzYQCK7bNK5cACQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
+
   '@oxc-parser/binding-android-arm64@0.124.0':
     resolution: {integrity: sha512-ULHC/gVZ+nP4pd3kNNQTYaQ/e066BW/KuY5qUsvwkVWwOUQGDg+WpfyVOmQ4xfxoue6cMlkKkJ+ntdzfDXpNlg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [android]
 
+  '@oxc-parser/binding-android-arm64@0.135.0':
+    resolution: {integrity: sha512-wPte+SzgzWWFgMSF8YZDNM+tBXtJg0AXBi7+tU3yS2z1f2Af9kRLZLKuJojADmuD/cZexmnMHHC3SDItTW77Iw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
   '@oxc-parser/binding-darwin-arm64@0.124.0':
     resolution: {integrity: sha512-fGJ2hw7bnbUYn6UvTjp0m4WJ9zXz3cohgcwcgeo7gUZehpPNpvcVEVeIVHNmHnAuAw/ysf4YJR8DA1E+xCA4Lw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [darwin]
 
+  '@oxc-parser/binding-darwin-arm64@0.135.0':
+    resolution: {integrity: sha512-BmKz3lHIsqVos+9aPcdYCT9MG3APoUyM43KlEFhJMWNVDOGG8FKyiFz81Bc+mGz2o0hpuQ3PfXLfVWJrKXjo2g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
   '@oxc-parser/binding-darwin-x64@0.124.0':
     resolution: {integrity: sha512-j0+re9pgps5BH2Tk3fm59Hi3QuLP3C4KhqXi6A+wRHHHJWDFR8mc/KI9mBrfk2JRT+15doGo+zv1eN75/9DuOw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [darwin]
 
+  '@oxc-parser/binding-darwin-x64@0.135.0':
+    resolution: {integrity: sha512-dM8BS+8+Br1fNvmh2QZbGiHaYttwLebRa6J4Uz9vuFzMNmvsdRYwf7993ptOaV0JTrR63AaoVLjX7nhWbijxjQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
   '@oxc-parser/binding-freebsd-x64@0.124.0':
     resolution: {integrity: sha512-0k5mS0npnrhKy72UfF51lpOZ2ESoPWn6gdFw+RdeRWcokraDW1O2kSx3laQ+yk7cCEavQdJSpWCYS/GvBbUCXQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [freebsd]
 
+  '@oxc-parser/binding-freebsd-x64@0.135.0':
+    resolution: {integrity: sha512-xlZnvvJdR9bGu2pOhvR5hMuKPHCE6Sa9owK5A484mzjHdm75VRV5nCs5w/jkmGODMMTFc+KN7EnZqEieM813kw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
   '@oxc-parser/binding-linux-arm-gnueabihf@0.124.0':
     resolution: {integrity: sha512-P/i4eguRWvAUfGdfhQYg1jpwYkyUV6D3gefIH7HhmRl1Ph6P4IqTIEVcyJr1i/3vr1V5OHU4wonH6/ue/Qzvrw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.135.0':
+    resolution: {integrity: sha512-PSR8LmBK/H/PQRiN8g7RebQgZX/ntVCrdT/JBfNxE5ezdHG1s2i4rbazsRJYD83TTI1MmgTpC0MGL42PLtskQQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
   '@oxc-parser/binding-linux-arm-musleabihf@0.124.0':
     resolution: {integrity: sha512-/ameqFQH5fFP+66Atr8Ynv/2rYe4utcU7L4MoWS5JtrFLVO78g4qDLavyIlJxa6caSwYOvG/eO3c/DXqY5/6Rw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
 
+  '@oxc-parser/binding-linux-arm-musleabihf@0.135.0':
+    resolution: {integrity: sha512-I85GJXzfUsigkkk7Ngdz95C217M4FdUi1Z2HrX5UyPmURobwQZ7m2bbUvwFkz4VGZd+lymFGKHvDZ3RQC9qOzA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
   '@oxc-parser/binding-linux-arm64-gnu@0.124.0':
     resolution: {integrity: sha512-gNeyEcXTtfrRCbj2EfxWU85Fs0wIX3p44Y3twnvuMfkWlLrb9M1Z25AYNSKjJM+fdAjeeQCjw0on47zFuBYwQw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
 
+  '@oxc-parser/binding-linux-arm64-gnu@0.135.0':
+    resolution: {integrity: sha512-zqEY0npz0g0aGZj/8a5BclunjVDytsBQHYtIC10Gd26HcrLwbVF6YDbqRQjunMGYdSo97u6xOBl05aTDI2diDQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+
   '@oxc-parser/binding-linux-arm64-musl@0.124.0':
     resolution: {integrity: sha512-uvG7v4Tz9S8/PVqY0SP0DLHxo4hZGe+Pv2tGVnwcsjKCCUPjplbrFVvDzXq+kOaEoUkiCY0Kt1hlZ6FDJ1LKNQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
 
+  '@oxc-parser/binding-linux-arm64-musl@0.135.0':
+    resolution: {integrity: sha512-mWAfprP819gQ2qYst1RxgTI8b/z0b29OpoKfRflIXLHde2dZLihQD4g47Onuvtpo5GPIkMYPRlX9QoeZfs/GnQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+
   '@oxc-parser/binding-linux-ppc64-gnu@0.124.0':
     resolution: {integrity: sha512-t7KZaaUhfp2au0MRpoENEFqwLKYDdptEry6V7pTAVdPEcFG4P6ii8yeGU9m6p5vb+b8WEKmdpGMNXBEYy7iJdw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ppc64]
     os: [linux]
 
+  '@oxc-parser/binding-linux-ppc64-gnu@0.135.0':
+    resolution: {integrity: sha512-gri8c2AOmJKJwOux2KTHFBfUaXoJURuVMKhmKEi/2hTF55cQteTDV2XNfTiE5oCC+Tnem1Y4/MWzcyDadtsSag==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+
   '@oxc-parser/binding-linux-riscv64-gnu@0.124.0':
     resolution: {integrity: sha512-eurGGaxHZiIQ+fBSageS8TAkRqZgdOiBeqNrWAqAPup9hXBTmQ0WcBjwsLElf+3jvDL9NhnX0dOgOqPfsjSjdg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
 
+  '@oxc-parser/binding-linux-riscv64-gnu@0.135.0':
+    resolution: {integrity: sha512-Y2tkupCG5wo0SxH2rMLG4d4Kmv6DaM3sBp+GuM5lox0S8Za6VxKgQrY2Mut088QQxKkEE89n/4CCCgmw2o0e3Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+
   '@oxc-parser/binding-linux-riscv64-musl@0.124.0':
     resolution: {integrity: sha512-d1V7/ll1i/LhqE/gZy6Wbz6evlk0egh2XKkwMI3epiojtbtUwQSLIER0Y3yDBBocPuWOjJdvmjtEmPTTLXje/w==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
 
+  '@oxc-parser/binding-linux-riscv64-musl@0.135.0':
+    resolution: {integrity: sha512-xDRJq6i6WTynjeP+ISbDpyH4p9BaJ0wuQcL0lCSDkt9qOXC9dmwpOu1VG/TlwmPI3KpYntmO9nJCuc3TMTsNBA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [riscv64]
+    os: [linux]
+
   '@oxc-parser/binding-linux-s390x-gnu@0.124.0':
     resolution: {integrity: sha512-w1+cBvriUteOpox6ATqCFVkpGL47PFdcfCPGmgUZbd78Fw44U0gQkc+kVGvAOTvGrptMYgwomD1c6OTVvkrpGg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
 
+  '@oxc-parser/binding-linux-s390x-gnu@0.135.0':
+    resolution: {integrity: sha512-V4MoUuiCRNvihxhIufRxvK+ka013V4joTSK0FAGA1KEjLuNprfH6N/Qw2uxQEVIFuNYMhD/hV6xJ/ptbzlKdHg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+
   '@oxc-parser/binding-linux-x64-gnu@0.124.0':
     resolution: {integrity: sha512-RRB1evQiXRtMCsQQiAh9U0H3HzguLpE0ytfStuhRgmOj7tqUCOVxkHsvM9geZjAax6NqVRj7VXx32qjjkZPsBw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
 
+  '@oxc-parser/binding-linux-x64-gnu@0.135.0':
+    resolution: {integrity: sha512-JCFZ7zM7KXOKoPAbK/ZB4wY0M1jxRECiem2UQuiXLjzGqS9+hno7mtX+qyK2F7HWK2xPhyJb+frpcOtk5DKOtg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+
   '@oxc-parser/binding-linux-x64-musl@0.124.0':
     resolution: {integrity: sha512-asVYN0qmSHlCU8H9Q47SmeJ/Z5EG4IWCC+QGxkfFboI5qh15aLlJnHmnrV61MwQRPXGnVC/sC3qKhrUyqGxUqw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
 
+  '@oxc-parser/binding-linux-x64-musl@0.135.0':
+    resolution: {integrity: sha512-9jSVS1b3hOV7sdKH4aA2DFfnTz0RgQd0v2BefR+LYbH8yIlmSM22JJZbAAjVeVXmFgUAk3zJQ1tpE/Nd+Vi2YQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+
   '@oxc-parser/binding-openharmony-arm64@0.124.0':
     resolution: {integrity: sha512-nhwuxm6B8pn9lzAzMUfa571L5hCXYwQo8C8cx5aGOuHWCzruR8gPJnRRXGBci+uGaIIQEZDyU/U6HDgrSp/JlQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [openharmony]
 
+  '@oxc-parser/binding-openharmony-arm64@0.135.0':
+    resolution: {integrity: sha512-M857ZLBSdn1Uy/SJJz5zh0qGu67B4P9omCgXGBU2LLqTzraX6ZjVNaKq5yW1PDw/LgJXDXR/dbZfgmB310f11Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
   '@oxc-parser/binding-wasm32-wasi@0.124.0':
     resolution: {integrity: sha512-LWuq4Dl9tff7n+HjJcqoBjDlVCtruc0shgtdtGM+rTUIE9aFxHA/P+wCYR+aWMjN8m9vNaRME/sKXErmhmeKrA==}
     engines: {node: '>=14.0.0'}
     cpu: [wasm32]
 
+  '@oxc-parser/binding-wasm32-wasi@0.135.0':
+    resolution: {integrity: sha512-2w6DVcntQZX9U5RhXtgiWb3FLWFB5EcwI1U8yr3htOCJUJjagN4BFUHz/Y/d9ZsumndZ6ByxxWEtbUZNE1bfFw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [wasm32]
+
   '@oxc-parser/binding-win32-arm64-msvc@0.124.0':
     resolution: {integrity: sha512-aOh3Lf3AeH0dgzT4yBXcArFZ8VhqNXwZ/xlN0GqBtgVaGoHOOqL2YHlcVIgT+ghsXPVR2PTtYgBiQ1CNK7jp5A==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [win32]
 
+  '@oxc-parser/binding-win32-arm64-msvc@0.135.0':
+    resolution: {integrity: sha512-rX1U8+IH2Z37EJjDXKa1iifvUQAdba+vZ4Ewj1iaG5eA/QaSybzclCOwtWa0/5BuUQnnK/T2JHUEFrwhL6Ck2Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
   '@oxc-parser/binding-win32-ia32-msvc@0.124.0':
     resolution: {integrity: sha512-sib5xC0nz/+SCpaETBuHBz4SXS02KuG5HtyOcHsO/SK5ZvLRGhOZx0elDKawjb6adFkD7dQCqpXUS25wY6ELKQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ia32]
     os: [win32]
 
+  '@oxc-parser/binding-win32-ia32-msvc@0.135.0':
+    resolution: {integrity: sha512-9FAisBbH1QICGAjlJobiuKGd/jOuVmyqniWdQMwTa5SkCl6hhuotBCJf1n46B0flYbSOR5TzfV9HZCWSyb3c/Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ia32]
+    os: [win32]
+
   '@oxc-parser/binding-win32-x64-msvc@0.124.0':
     resolution: {integrity: sha512-UgojtjGUgZgAZQYt7SC6VO65OVdxEkRe2q+2vbHJO//18qw3Hrk6UvHGQKldsQKgbVcIBT/YBrt85YberiYIPQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [win32]
 
+  '@oxc-parser/binding-win32-x64-msvc@0.135.0':
+    resolution: {integrity: sha512-wYF+A2AzJ2n7ul6q+Z2G/ia0S2+8cUp0AgWZzoFvF4WmUcl1P7p+o6se1Gdr5wGnWuF0iAMIkGddrjCarNr2yA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
   '@oxc-project/types@0.124.0':
     resolution: {integrity: sha512-VBFWMTBvHxS11Z5Lvlr3IWgrwhMTXV+Md+EQF0Xf60+wAdsGFTBx7X7K/hP4pi8N7dcm1RvcHwDxZ16Qx8keUg==}
 
+  '@oxc-project/types@0.135.0':
+    resolution: {integrity: sha512-wR+xRdFkUBMvcAjBJ2q2kcZM6d+DKu2NgoOyxZgYwZdLhmiv6+rnO8PZ/P68kMiZtIKm+pW7zyEJ4kSOs0vo+Q==}
+
+  '@oxc-resolver/binding-android-arm-eabi@11.20.0':
+    resolution: {integrity: sha512-IjfWOXRgJFNdORDl+Uf1aibNgZY2guOD3zmOhx1BGVb/MIiqlFTdmjpQNplSN58lhWehnX4UNqC3QwpUo8pjJg==}
+    cpu: [arm]
+    os: [android]
+
+  '@oxc-resolver/binding-android-arm64@11.20.0':
+    resolution: {integrity: sha512-QqslZAuFQG8Q9xm7JuIn8JUbvywhSBMVhuQHtYW+auirZJloS41oxUUaBXk7uUhZJgp44c5zQLeVvmFaDQB+2Q==}
+    cpu: [arm64]
+    os: [android]
+
+  '@oxc-resolver/binding-darwin-arm64@11.20.0':
+    resolution: {integrity: sha512-MUcavykj2ewlR+kc5arpg4tC2RvzJkUxWtNv74pf7lcNk00GpIpN43vXMj+j6r4eMmfZhlb8hueKoIb8e9kAGQ==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@oxc-resolver/binding-darwin-x64@11.20.0':
+    resolution: {integrity: sha512-BGB16nRUK5Etiv//ihPyzj8Lj1px0mhh4YIfe0FDf045ywknfSm0GEbiRESpr6Q4K82AvnyaRIhhluHByvS4bg==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@oxc-resolver/binding-freebsd-x64@11.20.0':
+    resolution: {integrity: sha512-JZgtePaqj3qmD5XFHJaSLWzHRxQu0LaPkdoM1KJXYADvAaa83ijXHclV3ej3CueeW0wxfIAbGCZVP45J0CA7uQ==}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@oxc-resolver/binding-linux-arm-gnueabihf@11.20.0':
+    resolution: {integrity: sha512-hOQ/p3ry3v3SchUBXicrrnszaI/UmYzM4wtS4RGfwgVUX7a+HbyQSzJ5aOzu+o6XZkFkS3ZXN4PZAzhOb77OSg==}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-arm-musleabihf@11.20.0':
+    resolution: {integrity: sha512-2ArPksaw0AqeuGBfoS715VF+JvJQAhD2niWgjE5hVO+L+nAfikVQopvngCMX9x4BD8itWoQ3dnikrQyl5Ho5Jg==}
+    cpu: [arm]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-arm64-gnu@11.20.0':
+    resolution: {integrity: sha512-0bJnmYFp62JdZ4nVMDUZ/C58BCZOCcqgKtnUlp7L9Ojf/czIN+3j72YlLPeWLkzlr6SlYvIQA4SGV/HyO0d+qg==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-arm64-musl@11.20.0':
+    resolution: {integrity: sha512-wKHHzPKZo7Ufhv/Bt6yxT7FOgnIgW4gwXcJUipkShGp68W3wGVqvr1Sr0fY65lN0Oy6y41+g2kIDvkgZaMMUkw==}
+    cpu: [arm64]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-ppc64-gnu@11.20.0':
+    resolution: {integrity: sha512-RN8goF7Ie0B79L4i4G6OeBocTgSC56vJbQ65VJje+oXnldVpLnOU7j/AQ/dP94TcCS+Yh6WG8u3Qt4ETteXFNQ==}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-riscv64-gnu@11.20.0':
+    resolution: {integrity: sha512-5l1yU6/xQEqLZRzxqmMxJfWPslpwCmBsdDGaBvABPehxquCXDC7dd7oraNdKSJUMDXSM7VvVj8H2D2FTjU7oWw==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-riscv64-musl@11.20.0':
+    resolution: {integrity: sha512-xHEvkbgz6UC+A3JOyDQy76LkUaxsNSfIr3/GV8slwZsnuooJiIB34gzJfsyvR4JdCYNUUPsRJc/w/oWkODu+hg==}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-s390x-gnu@11.20.0':
+    resolution: {integrity: sha512-aWPDUUmSeyHvlW+SoEUd+JIJsQhVhu6a5tBpDRMu058naPAchTgAVGCFy35zjbnFlt0i8hLWziff6HX0D3LU4g==}
+    cpu: [s390x]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-x64-gnu@11.20.0':
+    resolution: {integrity: sha512-x2YeSimvhJjKLVD8KSu8f/rqU1potcdEMkApIPJqjZWN7c2Fpt4g2X32WDg1p+XDAmyT7nuQGe0vnhvXeLbH+g==}
+    cpu: [x64]
+    os: [linux]
+
+  '@oxc-resolver/binding-linux-x64-musl@11.20.0':
+    resolution: {integrity: sha512-kcRLEIxpZefeYfLChjpgFf3ilBzRDZ+yobMrpRsQlSrxuFGtm3U6PMU7AaEpMqo3NfDGVyJJseAjnRLzMFHjwQ==}
+    cpu: [x64]
+    os: [linux]
+
+  '@oxc-resolver/binding-openharmony-arm64@11.20.0':
+    resolution: {integrity: sha512-HHcfnApSZGtKhTiHqe8OZruOZe5XuFQH5/E0Yhj3u8fnFvzkM4/k6WjacUf4SvA0SPEAbfbgYmVPuo0VX/fIBQ==}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@oxc-resolver/binding-wasm32-wasi@11.20.0':
+    resolution: {integrity: sha512-Tn0y1XOFYHNfK1wp1Z5QK8Rcld/bsOwRISQXfqAZ5IBpv8Gz1IvV39fUWNprqNdRizgcvFhOzWwFun2zkJsyBg==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+
+  '@oxc-resolver/binding-win32-arm64-msvc@11.20.0':
+    resolution: {integrity: sha512-qPi25YNPe4YenS8MgsQU2+bIFHxxpLx1LVna2444cEHqNPhNjvWf9zqj4aWE43H9LpAsTmkkAlA3eL5ElBU3mA==}
+    cpu: [arm64]
+    os: [win32]
+
+  '@oxc-resolver/binding-win32-x64-msvc@11.20.0':
+    resolution: {integrity: sha512-Wb14jWEW8huH6It9F6sXd9vrYmIS7pMrgkU6sxpLxkP+9z+wRgs71hUEhRpcn8FOXAFa27FVWfY2tRpbfTzfLw==}
+    cpu: [x64]
+    os: [win32]
+
   '@parcel/watcher-android-arm64@2.5.6':
     resolution: {integrity: sha512-YQxSS34tPF/6ZG7r/Ih9xy+kP/WwediEUsqmtf0cuCV5TPPKw/PQHRhueUo6JdeFJaqV3pyjm0GdYjZotbRt/A==}
     engines: {node: '>= 10.0.0'}
@@ -1193,6 +1519,9 @@ packages:
       sass: ^1.94.2
       unocss: ^66.6.8
       vue: ^3.5.34
+    peerDependenciesMeta:
+      unocss:
+        optional: true
 
   '@polka/url@1.0.0-next.29':
     resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
@@ -1961,6 +2290,9 @@ packages:
     resolution: {integrity: sha512-6bIM7fsJxeo3uXv7OncQYsBAMPJ7V16Slahl/6M98C/i2q+vB1+4a0MtrvYwDFEUrwDSbAmeLDRXsOBwrL7yAg==}
     hasBin: true
 
+  fd-package-json@2.0.0:
+    resolution: {integrity: sha512-jKmm9YtsNXN789RS/0mSzOC1NUq9mkVd65vbSSVsKdjGvYXBuE4oWe2QOEoFeRmJg+lPuZxpmrfFclNhoRMneQ==}
+
   fdir@6.5.0:
     resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
     engines: {node: '>=12.0.0'}
@@ -1990,6 +2322,11 @@ packages:
     resolution: {integrity: sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==}
     engines: {node: '>= 6'}
 
+  formatly@0.3.0:
+    resolution: {integrity: sha512-9XNj/o4wrRFyhSMJOvsuyMwy8aUfBaZ1VrqHVfohyXf0Sw0e+yfKG+xZaY3arGCOMdwFsqObtzVOc1gU9KiT9w==}
+    engines: {node: '>=18.3.0'}
+    hasBin: true
+
   fsevents@2.3.2:
     resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -2018,6 +2355,9 @@ packages:
   get-tsconfig@4.13.0:
     resolution: {integrity: sha512-1VKTZJCwBrvbd+Wn3AOgQP/2Av+TfTCOlE4AcRJE72W1ksZXbAx8PPBR9RzgTeSPzlPMHrbANMH3LbltH73wxQ==}
 
+  get-tsconfig@4.14.0:
+    resolution: {integrity: sha512-yTb+8DXzDREzgvYmh6s9vHsSVCHeC0G3PI5bEXNBHtmshPnO+S5O7qgLEOn0I5QvMy6kpZN8K1NKGyilLb93wA==}
+
   gopd@1.2.0:
     resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
     engines: {node: '>= 0.4'}
@@ -2108,6 +2448,11 @@ packages:
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
 
+  knip@6.17.1:
+    resolution: {integrity: sha512-HcQsZSQ4Ymhuay4BVzJtM5pFZNDSomYYqcNCZOSITPQh9g18a09DqziWAxSt2G+BH9wGlG+0ZjWpEnaFlnKseQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+
   lilconfig@3.1.3:
     resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
     engines: {node: '>=14'}
@@ -2200,6 +2545,13 @@ packages:
     resolution: {integrity: sha512-h07SFj/tp2U3cf3+LFX6MmOguQiM9ahwpGs0ZK5CGhgL8p4kk24etrJKsEzhXAvo7mfvoKTZooZ5MLKAPRmJ1g==}
     engines: {node: ^20.19.0 || >=22.12.0}
 
+  oxc-parser@0.135.0:
+    resolution: {integrity: sha512-/DaPStu0s2zzNSRRniKyTPM6Z/o+DapOp2JYNKDL8AsgaBGPK2IdZyB87SQjVH+xeQPz+Qr9mrjglfkYgtbVRA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+
+  oxc-resolver@11.20.0:
+    resolution: {integrity: sha512-CblytBiV/a/ZXY34dsVU2NxhIOxMXst8CvDCtyBelVITgd7PLrKzbEbA6oKLdPjvDKDzCiW48qzmzZ+mYaqn+g==}
+
   oxc-walker@0.7.0:
     resolution: {integrity: sha512-54B4KUhrzbzc4sKvKwVYm7E2PgeROpGba0/2nlNZMqfDyca+yOor5IMb4WLGBatGDT0nkzYdYuzylg7n3YfB7A==}
     peerDependencies:
@@ -2396,6 +2748,10 @@ packages:
     resolution: {integrity: sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==}
     engines: {node: '>=18'}
 
+  smol-toml@1.6.1:
+    resolution: {integrity: sha512-dWUG8F5sIIARXih1DTaQAX4SsiTXhInKf1buxdY9DIg4ZYPZK5nGM1VRIYmEbDbsHt7USo99xSLFu5Q1IqTmsg==}
+    engines: {node: '>= 18'}
+
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
@@ -2429,6 +2785,10 @@ packages:
     resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
     engines: {node: '>=8'}
 
+  strip-json-comments@5.0.3:
+    resolution: {integrity: sha512-1tB5mhVo7U+ETBKNf92xT4hrQa3pm0MZ0PQvuDnWgAAGHDsfp4lPSpiS6psrSiet87wyGPh9ft6wmhOMQ0hDiw==}
+    engines: {node: '>=14.16'}
+
   strnum@2.3.0:
     resolution: {integrity: sha512-ums3KNd42PGyx5xaoVTO1mjU1bH3NpY4vsrVlnv9PNGqQj8wd7rJ6nEypLrJ7z5vxK5RP0yMLo6J/Gsm62DI5Q==}
 
@@ -2478,6 +2838,10 @@ packages:
     resolution: {integrity: sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==}
     engines: {node: '>=12.0.0'}
 
+  tinyglobby@0.2.17:
+    resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==}
+    engines: {node: '>=12.0.0'}
+
   tinyrainbow@3.1.0:
     resolution: {integrity: sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==}
     engines: {node: '>=14.0.0'}
@@ -2549,6 +2913,10 @@ packages:
   ufo@1.6.3:
     resolution: {integrity: sha512-yDJTmhydvl5lJzBmy/hyOAA0d+aqCBuwl818haVdYCRrWV84o7YyeVm4QlVHStqNrrJSTb6jKuFAVqAFsr+K3Q==}
 
+  unbash@4.0.1:
+    resolution: {integrity: sha512-1ajSo3813sDoVIHx4inJdUS4l5L2ic5cFiddemPiyjb/PZEoBAhFwHtbaEdRDFxbAKy7FCG7s5ww3/uCFawuIA==}
+    engines: {node: '>=14'}
+
   unconfig-core@7.5.0:
     resolution: {integrity: sha512-Su3FauozOGP44ZmKdHy2oE6LPjk51M/TRRjHv2HNCWiDvfvCoxC2lno6jevMA91MYAdCdwP05QnWdWpSbncX/w==}
 
@@ -2728,6 +3096,10 @@ packages:
       typescript:
         optional: true
 
+  walk-up-path@4.0.0:
+    resolution: {integrity: sha512-3hu+tD8YzSLGuFYtPRb48vdhKMi0KQV5sn+uWr8+7dMEq/2G/dtLrdDinkLjqq5TIbIBjYJ4Ax/n3YiaW7QM8A==}
+    engines: {node: 20 || >=22}
+
   webpack-virtual-modules@0.6.2:
     resolution: {integrity: sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==}
 
@@ -2773,6 +3145,11 @@ packages:
   y18n@4.0.3:
     resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}
 
+  yaml@2.9.0:
+    resolution: {integrity: sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==}
+    engines: {node: '>= 14.6'}
+    hasBin: true
+
   yargs-parser@18.1.3:
     resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}
     engines: {node: '>=6'}
@@ -2793,6 +3170,9 @@ packages:
   zod@3.25.76:
     resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
 
+  zod@4.4.3:
+    resolution: {integrity: sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==}
+
 snapshots:
 
   '@ai-sdk/openai@1.3.24(zod@3.25.76)':
@@ -2834,6 +3214,39 @@ snapshots:
       package-manager-detector: 1.6.0
       tinyexec: 1.0.2
 
+  '@ast-grep/cli-darwin-arm64@0.43.0':
+    optional: true
+
+  '@ast-grep/cli-darwin-x64@0.43.0':
+    optional: true
+
+  '@ast-grep/cli-linux-arm64-gnu@0.43.0':
+    optional: true
+
+  '@ast-grep/cli-linux-x64-gnu@0.43.0':
+    optional: true
+
+  '@ast-grep/cli-win32-arm64-msvc@0.43.0':
+    optional: true
+
+  '@ast-grep/cli-win32-ia32-msvc@0.43.0':
+    optional: true
+
+  '@ast-grep/cli-win32-x64-msvc@0.43.0':
+    optional: true
+
+  '@ast-grep/cli@0.43.0':
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      '@ast-grep/cli-darwin-arm64': 0.43.0
+      '@ast-grep/cli-darwin-x64': 0.43.0
+      '@ast-grep/cli-linux-arm64-gnu': 0.43.0
+      '@ast-grep/cli-linux-x64-gnu': 0.43.0
+      '@ast-grep/cli-win32-arm64-msvc': 0.43.0
+      '@ast-grep/cli-win32-ia32-msvc': 0.43.0
+      '@ast-grep/cli-win32-x64-msvc': 0.43.0
+
   '@babel/helper-string-parser@7.27.1': {}
 
   '@babel/helper-string-parser@7.29.7': {}
@@ -2860,6 +3273,41 @@ snapshots:
       '@babel/helper-string-parser': 7.29.7
       '@babel/helper-validator-identifier': 7.29.7
 
+  '@biomejs/biome@2.5.0':
+    optionalDependencies:
+      '@biomejs/cli-darwin-arm64': 2.5.0
+      '@biomejs/cli-darwin-x64': 2.5.0
+      '@biomejs/cli-linux-arm64': 2.5.0
+      '@biomejs/cli-linux-arm64-musl': 2.5.0
+      '@biomejs/cli-linux-x64': 2.5.0
+      '@biomejs/cli-linux-x64-musl': 2.5.0
+      '@biomejs/cli-win32-arm64': 2.5.0
+      '@biomejs/cli-win32-x64': 2.5.0
+
+  '@biomejs/cli-darwin-arm64@2.5.0':
+    optional: true
+
+  '@biomejs/cli-darwin-x64@2.5.0':
+    optional: true
+
+  '@biomejs/cli-linux-arm64-musl@2.5.0':
+    optional: true
+
+  '@biomejs/cli-linux-arm64@2.5.0':
+    optional: true
+
+  '@biomejs/cli-linux-x64-musl@2.5.0':
+    optional: true
+
+  '@biomejs/cli-linux-x64@2.5.0':
+    optional: true
+
+  '@biomejs/cli-win32-arm64@2.5.0':
+    optional: true
+
+  '@biomejs/cli-win32-x64@2.5.0':
+    optional: true
+
   '@cspotcode/source-map-support@0.8.1':
     dependencies:
       '@jridgewell/trace-mapping': 0.3.9
@@ -3254,51 +3702,99 @@ snapshots:
   '@oxc-parser/binding-android-arm-eabi@0.124.0':
     optional: true
 
+  '@oxc-parser/binding-android-arm-eabi@0.135.0':
+    optional: true
+
   '@oxc-parser/binding-android-arm64@0.124.0':
     optional: true
 
+  '@oxc-parser/binding-android-arm64@0.135.0':
+    optional: true
+
   '@oxc-parser/binding-darwin-arm64@0.124.0':
     optional: true
 
+  '@oxc-parser/binding-darwin-arm64@0.135.0':
+    optional: true
+
   '@oxc-parser/binding-darwin-x64@0.124.0':
     optional: true
 
+  '@oxc-parser/binding-darwin-x64@0.135.0':
+    optional: true
+
   '@oxc-parser/binding-freebsd-x64@0.124.0':
     optional: true
 
+  '@oxc-parser/binding-freebsd-x64@0.135.0':
+    optional: true
+
   '@oxc-parser/binding-linux-arm-gnueabihf@0.124.0':
     optional: true
 
+  '@oxc-parser/binding-linux-arm-gnueabihf@0.135.0':
+    optional: true
+
   '@oxc-parser/binding-linux-arm-musleabihf@0.124.0':
     optional: true
 
+  '@oxc-parser/binding-linux-arm-musleabihf@0.135.0':
+    optional: true
+
   '@oxc-parser/binding-linux-arm64-gnu@0.124.0':
     optional: true
 
+  '@oxc-parser/binding-linux-arm64-gnu@0.135.0':
+    optional: true
+
   '@oxc-parser/binding-linux-arm64-musl@0.124.0':
     optional: true
 
+  '@oxc-parser/binding-linux-arm64-musl@0.135.0':
+    optional: true
+
   '@oxc-parser/binding-linux-ppc64-gnu@0.124.0':
     optional: true
 
+  '@oxc-parser/binding-linux-ppc64-gnu@0.135.0':
+    optional: true
+
   '@oxc-parser/binding-linux-riscv64-gnu@0.124.0':
     optional: true
 
+  '@oxc-parser/binding-linux-riscv64-gnu@0.135.0':
+    optional: true
+
   '@oxc-parser/binding-linux-riscv64-musl@0.124.0':
     optional: true
 
+  '@oxc-parser/binding-linux-riscv64-musl@0.135.0':
+    optional: true
+
   '@oxc-parser/binding-linux-s390x-gnu@0.124.0':
     optional: true
 
+  '@oxc-parser/binding-linux-s390x-gnu@0.135.0':
+    optional: true
+
   '@oxc-parser/binding-linux-x64-gnu@0.124.0':
     optional: true
 
+  '@oxc-parser/binding-linux-x64-gnu@0.135.0':
+    optional: true
+
   '@oxc-parser/binding-linux-x64-musl@0.124.0':
     optional: true
 
+  '@oxc-parser/binding-linux-x64-musl@0.135.0':
+    optional: true
+
   '@oxc-parser/binding-openharmony-arm64@0.124.0':
     optional: true
 
+  '@oxc-parser/binding-openharmony-arm64@0.135.0':
+    optional: true
+
   '@oxc-parser/binding-wasm32-wasi@0.124.0(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
     dependencies:
       '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
@@ -3307,17 +3803,96 @@ snapshots:
       - '@emnapi/runtime'
     optional: true
 
+  '@oxc-parser/binding-wasm32-wasi@0.135.0':
+    dependencies:
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.10.0
+      '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+    optional: true
+
   '@oxc-parser/binding-win32-arm64-msvc@0.124.0':
     optional: true
 
+  '@oxc-parser/binding-win32-arm64-msvc@0.135.0':
+    optional: true
+
   '@oxc-parser/binding-win32-ia32-msvc@0.124.0':
     optional: true
 
+  '@oxc-parser/binding-win32-ia32-msvc@0.135.0':
+    optional: true
+
   '@oxc-parser/binding-win32-x64-msvc@0.124.0':
     optional: true
 
+  '@oxc-parser/binding-win32-x64-msvc@0.135.0':
+    optional: true
+
   '@oxc-project/types@0.124.0': {}
 
+  '@oxc-project/types@0.135.0': {}
+
+  '@oxc-resolver/binding-android-arm-eabi@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-android-arm64@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-darwin-arm64@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-darwin-x64@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-freebsd-x64@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-linux-arm-gnueabihf@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-linux-arm-musleabihf@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-linux-arm64-gnu@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-linux-arm64-musl@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-linux-ppc64-gnu@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-linux-riscv64-gnu@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-linux-riscv64-musl@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-linux-s390x-gnu@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-linux-x64-gnu@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-linux-x64-musl@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-openharmony-arm64@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-wasm32-wasi@11.20.0':
+    dependencies:
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.10.0
+      '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
+    optional: true
+
+  '@oxc-resolver/binding-win32-arm64-msvc@11.20.0':
+    optional: true
+
+  '@oxc-resolver/binding-win32-x64-msvc@11.20.0':
+    optional: true
+
   '@parcel/watcher-android-arm64@2.5.6':
     optional: true
 
@@ -3379,11 +3954,12 @@ snapshots:
       '@parcel/watcher-win32-x64': 2.5.6
     optional: true
 
-  '@partner-up-dev/design-web@0.4.4(sass@1.97.3)(unocss@66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)))(vue@3.5.35(typescript@6.0.3))':
+  '@partner-up-dev/design-web@0.4.4(sass@1.97.3)(unocss@66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0)))(vue@3.5.35(typescript@6.0.3))':
     dependencies:
       sass: 1.97.3
-      unocss: 66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0))
       vue: 3.5.35(typescript@6.0.3)
+    optionalDependencies:
+      unocss: 66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0))
 
   '@polka/url@1.0.0-next.29': {}
 
@@ -3657,7 +4233,7 @@ snapshots:
     dependencies:
       '@unocss/core': 66.6.8
 
-  '@unocss/vite@66.6.8(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0))':
+  '@unocss/vite@66.6.8(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0))':
     dependencies:
       '@jridgewell/remapping': 2.3.5
       '@unocss/config': 66.6.8
@@ -3668,7 +4244,7 @@ snapshots:
       pathe: 2.0.3
       tinyglobby: 0.2.16
       unplugin-utils: 0.3.1
-      vite: 6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)
+      vite: 6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0)
 
   '@vee-validate/zod@4.15.1(vue@3.5.35(typescript@6.0.3))(zod@3.25.76)':
     dependencies:
@@ -3678,9 +4254,9 @@ snapshots:
     transitivePeerDependencies:
       - vue
 
-  '@vitejs/plugin-vue@5.2.4(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0))(vue@3.5.35(typescript@6.0.3))':
+  '@vitejs/plugin-vue@5.2.4(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0))(vue@3.5.35(typescript@6.0.3))':
     dependencies:
-      vite: 6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)
+      vite: 6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0)
       vue: 3.5.35(typescript@6.0.3)
 
   '@vitest/expect@4.1.6':
@@ -3692,13 +4268,13 @@ snapshots:
       chai: 6.2.2
       tinyrainbow: 3.1.0
 
-  '@vitest/mocker@4.1.6(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0))':
+  '@vitest/mocker@4.1.6(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0))':
     dependencies:
       '@vitest/spy': 4.1.6
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
-      vite: 6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)
+      vite: 6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0)
 
   '@vitest/pretty-format@4.1.6':
     dependencies:
@@ -3994,8 +4570,7 @@ snapshots:
 
   destr@2.0.5: {}
 
-  detect-libc@2.1.2:
-    optional: true
+  detect-libc@2.1.2: {}
 
   diff-match-patch@1.0.5: {}
 
@@ -4189,6 +4764,10 @@ snapshots:
       strnum: 2.3.0
       xml-naming: 0.1.0
 
+  fd-package-json@2.0.0:
+    dependencies:
+      walk-up-path: 4.0.0
+
   fdir@6.5.0(picomatch@4.0.3):
     optionalDependencies:
       picomatch: 4.0.3
@@ -4218,6 +4797,10 @@ snapshots:
       hasown: 2.0.4
       mime-types: 2.1.35
 
+  formatly@0.3.0:
+    dependencies:
+      fd-package-json: 2.0.0
+
   fsevents@2.3.2:
     optional: true
 
@@ -4250,6 +4833,10 @@ snapshots:
     dependencies:
       resolve-pkg-maps: 1.0.0
 
+  get-tsconfig@4.14.0:
+    dependencies:
+      resolve-pkg-maps: 1.0.0
+
   gopd@1.2.0: {}
 
   gzip-size@6.0.0:
@@ -4330,6 +4917,22 @@ snapshots:
       chalk: 5.6.2
       diff-match-patch: 1.0.5
 
+  knip@6.17.1:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.4)
+      formatly: 0.3.0
+      get-tsconfig: 4.14.0
+      jiti: 2.7.0
+      oxc-parser: 0.135.0
+      oxc-resolver: 11.20.0
+      picomatch: 4.0.4
+      smol-toml: 1.6.1
+      strip-json-comments: 5.0.3
+      tinyglobby: 0.2.17
+      unbash: 4.0.1
+      yaml: 2.9.0
+      zod: 4.4.3
+
   lilconfig@3.1.3: {}
 
   lines-and-columns@1.2.4: {}
@@ -4438,6 +5041,53 @@ snapshots:
       - '@emnapi/core'
       - '@emnapi/runtime'
 
+  oxc-parser@0.135.0:
+    dependencies:
+      '@oxc-project/types': 0.135.0
+    optionalDependencies:
+      '@oxc-parser/binding-android-arm-eabi': 0.135.0
+      '@oxc-parser/binding-android-arm64': 0.135.0
+      '@oxc-parser/binding-darwin-arm64': 0.135.0
+      '@oxc-parser/binding-darwin-x64': 0.135.0
+      '@oxc-parser/binding-freebsd-x64': 0.135.0
+      '@oxc-parser/binding-linux-arm-gnueabihf': 0.135.0
+      '@oxc-parser/binding-linux-arm-musleabihf': 0.135.0
+      '@oxc-parser/binding-linux-arm64-gnu': 0.135.0
+      '@oxc-parser/binding-linux-arm64-musl': 0.135.0
+      '@oxc-parser/binding-linux-ppc64-gnu': 0.135.0
+      '@oxc-parser/binding-linux-riscv64-gnu': 0.135.0
+      '@oxc-parser/binding-linux-riscv64-musl': 0.135.0
+      '@oxc-parser/binding-linux-s390x-gnu': 0.135.0
+      '@oxc-parser/binding-linux-x64-gnu': 0.135.0
+      '@oxc-parser/binding-linux-x64-musl': 0.135.0
+      '@oxc-parser/binding-openharmony-arm64': 0.135.0
+      '@oxc-parser/binding-wasm32-wasi': 0.135.0
+      '@oxc-parser/binding-win32-arm64-msvc': 0.135.0
+      '@oxc-parser/binding-win32-ia32-msvc': 0.135.0
+      '@oxc-parser/binding-win32-x64-msvc': 0.135.0
+
+  oxc-resolver@11.20.0:
+    optionalDependencies:
+      '@oxc-resolver/binding-android-arm-eabi': 11.20.0
+      '@oxc-resolver/binding-android-arm64': 11.20.0
+      '@oxc-resolver/binding-darwin-arm64': 11.20.0
+      '@oxc-resolver/binding-darwin-x64': 11.20.0
+      '@oxc-resolver/binding-freebsd-x64': 11.20.0
+      '@oxc-resolver/binding-linux-arm-gnueabihf': 11.20.0
+      '@oxc-resolver/binding-linux-arm-musleabihf': 11.20.0
+      '@oxc-resolver/binding-linux-arm64-gnu': 11.20.0
+      '@oxc-resolver/binding-linux-arm64-musl': 11.20.0
+      '@oxc-resolver/binding-linux-ppc64-gnu': 11.20.0
+      '@oxc-resolver/binding-linux-riscv64-gnu': 11.20.0
+      '@oxc-resolver/binding-linux-riscv64-musl': 11.20.0
+      '@oxc-resolver/binding-linux-s390x-gnu': 11.20.0
+      '@oxc-resolver/binding-linux-x64-gnu': 11.20.0
+      '@oxc-resolver/binding-linux-x64-musl': 11.20.0
+      '@oxc-resolver/binding-openharmony-arm64': 11.20.0
+      '@oxc-resolver/binding-wasm32-wasi': 11.20.0
+      '@oxc-resolver/binding-win32-arm64-msvc': 11.20.0
+      '@oxc-resolver/binding-win32-x64-msvc': 11.20.0
+
   oxc-walker@0.7.0(oxc-parser@0.124.0(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)):
     dependencies:
       magic-regexp: 0.10.0
@@ -4504,13 +5154,14 @@ snapshots:
 
   pngjs@5.0.0: {}
 
-  postcss-load-config@6.0.1(jiti@2.7.0)(postcss@8.5.15)(tsx@4.21.0):
+  postcss-load-config@6.0.1(jiti@2.7.0)(postcss@8.5.15)(tsx@4.21.0)(yaml@2.9.0):
     dependencies:
       lilconfig: 3.1.3
     optionalDependencies:
       jiti: 2.7.0
       postcss: 8.5.15
       tsx: 4.21.0
+      yaml: 2.9.0
 
   postcss@8.5.15:
     dependencies:
@@ -4607,6 +5258,8 @@ snapshots:
       mrmime: 2.0.1
       totalist: 3.0.1
 
+  smol-toml@1.6.1: {}
+
   source-map-js@1.2.1: {}
 
   source-map-support@0.5.21:
@@ -4634,6 +5287,8 @@ snapshots:
     dependencies:
       ansi-regex: 5.0.1
 
+  strip-json-comments@5.0.3: {}
+
   strnum@2.3.0: {}
 
   sucrase@3.35.1:
@@ -4686,6 +5341,11 @@ snapshots:
       fdir: 6.5.0(picomatch@4.0.4)
       picomatch: 4.0.4
 
+  tinyglobby@0.2.17:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.4)
+      picomatch: 4.0.4
+
   tinyrainbow@3.1.0: {}
 
   totalist@3.0.1: {}
@@ -4715,7 +5375,7 @@ snapshots:
   tslib@2.8.1:
     optional: true
 
-  tsup@8.5.1(jiti@2.7.0)(postcss@8.5.15)(tsx@4.21.0)(typescript@6.0.3):
+  tsup@8.5.1(jiti@2.7.0)(postcss@8.5.15)(tsx@4.21.0)(typescript@6.0.3)(yaml@2.9.0):
     dependencies:
       bundle-require: 5.1.0(esbuild@0.27.2)
       cac: 6.7.14
@@ -4726,7 +5386,7 @@ snapshots:
       fix-dts-default-cjs-exports: 1.0.1
       joycon: 3.1.1
       picocolors: 1.1.1
-      postcss-load-config: 6.0.1(jiti@2.7.0)(postcss@8.5.15)(tsx@4.21.0)
+      postcss-load-config: 6.0.1(jiti@2.7.0)(postcss@8.5.15)(tsx@4.21.0)(yaml@2.9.0)
       resolve-from: 5.0.0
       rollup: 4.56.0
       source-map: 0.7.6
@@ -4758,6 +5418,8 @@ snapshots:
 
   ufo@1.6.3: {}
 
+  unbash@4.0.1: {}
+
   unconfig-core@7.5.0:
     dependencies:
       '@quansync/fs': 1.0.0
@@ -4779,7 +5441,7 @@ snapshots:
     dependencies:
       hookable: 6.0.1
 
-  unocss@66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)):
+  unocss@66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0)):
     dependencies:
       '@unocss/cli': 66.6.8
       '@unocss/core': 66.6.8
@@ -4797,7 +5459,7 @@ snapshots:
       '@unocss/transformer-compile-class': 66.6.8
       '@unocss/transformer-directives': 66.6.8
       '@unocss/transformer-variant-group': 66.6.8
-      '@unocss/vite': 66.6.8(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0))
+      '@unocss/vite': 66.6.8(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0))
     transitivePeerDependencies:
       - '@emnapi/core'
       - '@emnapi/runtime'
@@ -4833,7 +5495,7 @@ snapshots:
       type-fest: 4.41.0
       vue: 3.5.35(typescript@6.0.3)
 
-  vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0):
+  vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0):
     dependencies:
       esbuild: 0.25.12
       fdir: 6.5.0(picomatch@4.0.3)
@@ -4847,11 +5509,12 @@ snapshots:
       jiti: 2.7.0
       sass: 1.97.3
       tsx: 4.21.0
+      yaml: 2.9.0
 
-  vitest@4.1.6(@opentelemetry/api@1.9.0)(@types/node@22.19.7)(happy-dom@20.9.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)):
+  vitest@4.1.6(@opentelemetry/api@1.9.0)(@types/node@22.19.7)(happy-dom@20.9.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0)):
     dependencies:
       '@vitest/expect': 4.1.6
-      '@vitest/mocker': 4.1.6(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0))
+      '@vitest/mocker': 4.1.6(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0))
       '@vitest/pretty-format': 4.1.6
       '@vitest/runner': 4.1.6
       '@vitest/snapshot': 4.1.6
@@ -4868,7 +5531,7 @@ snapshots:
       tinyexec: 1.0.2
       tinyglobby: 0.2.16
       tinyrainbow: 3.1.0
-      vite: 6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)
+      vite: 6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@opentelemetry/api': 1.9.0
@@ -4911,6 +5574,8 @@ snapshots:
     optionalDependencies:
       typescript: 6.0.3
 
+  walk-up-path@4.0.0: {}
+
   webpack-virtual-modules@0.6.2: {}
 
   wechatpay-axios-plugin@0.9.6(yargs@15.4.1):
@@ -4944,6 +5609,8 @@ snapshots:
 
   y18n@4.0.3: {}
 
+  yaml@2.9.0: {}
+
   yargs-parser@18.1.3:
     dependencies:
       camelcase: 5.3.1
@@ -4970,3 +5637,5 @@ snapshots:
       zod: 3.25.76
 
   zod@3.25.76: {}
+
+  zod@4.4.3: {}
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 34a9b8a61..d0431d8d7 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -3,6 +3,7 @@ packages:
   - "apps/*"
 injectWorkspacePackages: true
 allowBuilds:
+  '@ast-grep/cli': true
   '@parcel/watcher': true
   esbuild: true
   vue-demi: true
diff --git a/scripts/run-semgrep.mjs b/scripts/run-semgrep.mjs
new file mode 100644
index 000000000..a0dc174a4
--- /dev/null
+++ b/scripts/run-semgrep.mjs
@@ -0,0 +1,58 @@
+import { spawnSync } from "node:child_process";
+
+const strict = process.argv.includes("--strict");
+const report = process.argv.includes("--report");
+
+if (!strict && !report) {
+  console.error("Usage: node scripts/run-semgrep.mjs --report|--strict");
+  process.exit(2);
+}
+
+const args = ["scan", "--config", "tools/semgrep/security.yml", "--metrics=off", "--quiet"];
+
+const resolveCommand = process.platform === "win32" ? "where semgrep" : "command -v semgrep";
+const resolved = spawnSync(resolveCommand, {
+  stdio: "ignore",
+  shell: true,
+});
+
+if ((resolved.status ?? 1) !== 0) {
+  const message =
+    "semgrep is not installed; skipping security report. CI installs semgrep before running this command.";
+
+  if (strict) {
+    console.error(message);
+    process.exit(1);
+  }
+
+  console.warn(message);
+  process.exit(0);
+}
+
+const result = spawnSync("semgrep", args, {
+  stdio: "inherit",
+  shell: process.platform === "win32",
+});
+
+if (result.error) {
+  const message =
+    result.error.code === "ENOENT"
+      ? "semgrep is not installed; skipping security report. CI installs semgrep before running this command."
+      : `semgrep failed to start: ${result.error.message}`;
+
+  if (strict) {
+    console.error(message);
+    process.exit(1);
+  }
+
+  console.warn(message);
+  process.exit(0);
+}
+
+if (strict) {
+  process.exit(result.status ?? 1);
+}
+
+if ((result.status ?? 0) !== 0) {
+  console.warn("semgrep reported findings; report mode keeps this non-blocking.");
+}
diff --git a/sgconfig.yml b/sgconfig.yml
new file mode 100644
index 000000000..f6a5876d3
--- /dev/null
+++ b/sgconfig.yml
@@ -0,0 +1,2 @@
+ruleDirs:
+  - tools/ast-grep/rules
diff --git a/tasks/static-validation-system/00-task-packet.md b/tasks/static-validation-system/00-task-packet.md
new file mode 100644
index 000000000..4b9691a1e
--- /dev/null
+++ b/tasks/static-validation-system/00-task-packet.md
@@ -0,0 +1,36 @@
+# Static Validation System
+
+## Objective
+
+Build a sustainable static validation system covering format, lint, type, config, dead-code, security, and build reachability without changing product behavior.
+
+## Scope Boundary
+
+- In scope: static-validation scripts, configs, CI gates, related `AGENTS.md` guidance, and this task packet.
+- Out of scope: product/technical durable docs under `docs/10-prd/` and `docs/20-product-tdd/`.
+- Documentation Token Efficiency rule for this task: keep durable docs to stable commands and operating constraints; keep evaluation notes, noisy reports, and rollout rationale in this packet.
+
+## Current State
+
+- Root `pnpm check:*` layers are implemented.
+- Biome, ast-grep, Knip, and Semgrep are wired in.
+- Knip and Semgrep remain report-first.
+- Backend config checks now include custom DB lint plus `drizzle-kit check`.
+- CI calls repository-owned scripts through a new static gate and updated unit gates.
+- Biome pilot rules are enabled: `noFocusedTests`, `noImplicitAnyLet`.
+
+## Packet Index
+
+- `01-inventory.md`: pre-change coverage and gaps.
+- `02-tool-boundaries.md`: tool ownership boundaries.
+- `03-execution-slices.md`: completed work and remaining slices.
+- `04-knip-triage.md`: Knip counts and cleanup order.
+- `05-biome-pilot.md`: Biome rule decisions.
+- `06-semgrep-local.md`: local Semgrep install and findings.
+- `90-verification.md`: commands run, results, residual risks.
+
+## Next Choices
+
+1. Clean Knip dependency drift and duplicate exports.
+2. Review Semgrep `execSync` and `v-html` findings.
+3. Run a dedicated `useImportType` cleanup before considering promotion.
diff --git a/tasks/static-validation-system/01-inventory.md b/tasks/static-validation-system/01-inventory.md
new file mode 100644
index 000000000..5d7b78cf6
--- /dev/null
+++ b/tasks/static-validation-system/01-inventory.md
@@ -0,0 +1,21 @@
+# Pre-Change Inventory
+
+## Coverage Before This Task
+
+| Layer | Existing coverage | Gap |
+| --- | --- | --- |
+| Type | Backend `tsc --noEmit`; frontend `vue-tsc`; strict tsconfigs. | No root aggregate; packages not covered by one static gate. |
+| Format | None found. | No formatter/check entrypoint. |
+| Policy lint | Backend Problem Details; frontend token governance; UI naming audit report. | Checks were fragmented and inconsistently enforced. |
+| Dead code / deps | None found. | No Knip/depcheck-style coverage. |
+| Security | Payment lockfile policy; env required checks. | No Semgrep/secret/dangerous API scanner. |
+| Build reachability | Frontend build; backend build in deploy. | Backend build and migration bundle absent from PR static gate. |
+| Config / DB | DB lint; Drizzle artifact drift workflow. | No unified config gate; no `drizzle-kit check` layer. |
+
+## Fragmentation Observed
+
+- Root `pnpm lint` covered backend Problem Details and payment supply-chain only.
+- Frontend token strict was enforced, while UI naming audit was mostly report-oriented.
+- Backend PR CI ran typecheck/tests/DB lint/scenarios but not backend build or Problem Details lint.
+- Frontend PR CI ran token/unit/build but not UI naming audit.
+- Deploy workflows carried validation logic that was not available through shared root commands.
diff --git a/tasks/static-validation-system/02-tool-boundaries.md b/tasks/static-validation-system/02-tool-boundaries.md
new file mode 100644
index 000000000..a185aebc5
--- /dev/null
+++ b/tasks/static-validation-system/02-tool-boundaries.md
@@ -0,0 +1,23 @@
+# Tool Boundaries
+
+## Ownership Table
+
+| Tool | Owns | Does Not Own |
+| --- | --- | --- |
+| Biome | Formatting, changed-file generic lint, low-noise generic JS/TS rules. | Repo-specific policy semantics, lockfile reasoning, full UI naming audit. |
+| ast-grep | Custom structural code rules, starting with backend HTTPException bans. | Dataflow/security analysis or repo-wide dependency reasoning. |
+| Knip | Dead files, unused exports/types, dependency and binary drift. | Semantic proof that a reported symbol is safe to delete. |
+| Semgrep | Security and dangerous API pattern reports. | Build/type correctness and dependency reachability. |
+| Repo scripts | Token governance, UI naming, Problem Details, DB lint, payment lockfile checks. | Generic formatting and broad dead-code/security scanning. |
+
+## DB Boundary
+
+- `drizzle-kit check` verifies Drizzle migration history consistency.
+- Custom `db:lint` still owns repo-specific migration/seed policy: `data-migrations/`, `seeds/`, global numeric prefixes, and `CONCURRENTLY` transaction headers.
+
+## Versions Introduced
+
+- `@biomejs/biome`: `2.5.0`
+- `@ast-grep/cli`: `0.43.0`
+- `knip`: `6.17.1`
+- Semgrep: `1.166.0` in CI and local PDM global install.
diff --git a/tasks/static-validation-system/03-execution-slices.md b/tasks/static-validation-system/03-execution-slices.md
new file mode 100644
index 000000000..4e3b4d938
--- /dev/null
+++ b/tasks/static-validation-system/03-execution-slices.md
@@ -0,0 +1,20 @@
+# Execution Slices
+
+## Completed
+
+- Added root layers: `check:format`, `check:lint`, `check:type`, `check:config`, `check:dead-code`, `check:security`, `check:build`, and aggregate `check:static`.
+- Routed existing backend/frontend/problem-details/token/db/payment checks through shared scripts.
+- Added Biome config and changed-file format/lint entrypoints.
+- Added ast-grep structural backend rules for raw Hono `HTTPException` usage.
+- Added Knip report mode and monorepo workspace config.
+- Added Semgrep wrapper and conservative local security rules.
+- Added `drizzle-kit check` beside custom DB lint.
+- Added `static-gate` CI and rewired backend/frontend/DB workflows to call root scripts.
+- Pruned related `AGENTS.md` guidance to stable commands and local operating constraints.
+
+## Remaining Slices
+
+1. Knip cleanup: dependency drift, duplicate exports, then owner-split dead files.
+2. Semgrep review: justify or fix `execSync`; review `v-html` trust boundary.
+3. Biome cleanup: apply `useImportType` in one mechanical slice if desired.
+4. Promotion policy: make report-first layers blocking only after baselines are explicit.
diff --git a/tasks/static-validation-system/04-knip-triage.md b/tasks/static-validation-system/04-knip-triage.md
new file mode 100644
index 000000000..b18b98d7b
--- /dev/null
+++ b/tasks/static-validation-system/04-knip-triage.md
@@ -0,0 +1,40 @@
+# Knip Triage
+
+## Current Counts
+
+Source: `pnpm exec knip --no-exit-code --reporter json`.
+
+| Issue type | Count |
+| --- | ---: |
+| unused files | 30 |
+| unused dependencies | 1 |
+| unused devDependencies | 7 |
+| unlisted dependencies | 2 |
+| unlisted binaries | 2 |
+| unused exports | 233 |
+| unused exported types | 209 |
+| duplicate exports | 3 |
+
+Useful Knip selectors for follow-up: `--dependencies`, `--files`, `--exports`, `--include`, `--exclude`, `--workspace`, `--production`, `--strict`, `--fix-type`, `--max-show-issues`, `--no-exit-code`.
+
+## Cleanup Queue
+
+### 1. Dependency Drift
+
+- `apps/backend/package.json`: `axios`, `ts-node`
+- root `package.json`: `@vitejs/plugin-vue`, `vue`, external `powershell` binary usage
+- `apps/frontend/package.json`: `@iconify-json/mdi`, `@types/html2canvas`, `@unocss/preset-icons`, `@unocss/vite`
+- `apps/frontend/src/main.ts`: `uno.css` unlisted
+- `tests/scenario/pr-core/pr-detail-edit.scenario.test.ts`: `@partner-up-dev/backend` unlisted
+- `scripts/run-semgrep.mjs`: external `semgrep` binary usage
+
+### 2. Duplicate Exports
+
+- `apps/backend/src/domains/pr-core/services/anchor-participation-policy.service.ts`: `DEFAULT_CONFIRMATION_END_OFFSET_MINUTES`, `DEFAULT_JOIN_LOCK_OFFSET_MINUTES`
+- `apps/backend/src/entities/partner-request.ts`: `partnerRequestFieldsSchema`, `createStructuredPRSchema`
+- `apps/frontend/src/shared/poi/queries/usePoisByIds.ts`: `usePoisByNames`, `usePoisByIds`
+
+### 3. Larger Baselines
+
+- Unused files: split by backend/frontend owner before deletion.
+- Unused exports/types: treat last; likely includes public-barrel and type-surface false positives.
diff --git a/tasks/static-validation-system/05-biome-pilot.md b/tasks/static-validation-system/05-biome-pilot.md
new file mode 100644
index 000000000..b91efc0a9
--- /dev/null
+++ b/tasks/static-validation-system/05-biome-pilot.md
@@ -0,0 +1,28 @@
+# Biome Rule Pilot
+
+## Evaluated Rules
+
+Evaluated against `apps packages scripts tests`:
+
+- `noSecrets`
+- `useImportType`
+- `noFocusedTests`
+- `noImplicitAnyLet`
+
+## Decision
+
+Enabled two low-noise, high-value `suspicious` rules:
+
+- `noFocusedTests`: prevents committing `.only` tests.
+- `noImplicitAnyLet`: catches uninitialized `let` declarations that TypeScript `noImplicitAny` does not report.
+
+## Rejected Or Deferred
+
+- `noSecrets` is currently too noisy because Chinese business copy and test fixtures produce many high-entropy false positives.
+- `useImportType` is useful, but reported 17 existing import-style changes. Treat it as a separate format-style cleanup slice before promotion.
+
+## Fix Applied
+
+`noImplicitAnyLet` found one real issue:
+
+- `apps/backend/src/domains/ride-hailing/use-cases/handle-caocao-order-status-callback.ts`: `parsed` is now typed as `CaocaoOrderStatusCallback`.
diff --git a/tasks/static-validation-system/06-semgrep-local.md b/tasks/static-validation-system/06-semgrep-local.md
new file mode 100644
index 000000000..ab1b76e80
--- /dev/null
+++ b/tasks/static-validation-system/06-semgrep-local.md
@@ -0,0 +1,18 @@
+# Semgrep Local State
+
+## Installation
+
+- Installed Semgrep `1.166.0` through PDM global project on 2026-06-16.
+- Command used: `pdm add -g semgrep==1.166.0`.
+- PATH location: `C:\Users\yyh\AppData\Local\Programs\Python\Python314\Scripts\semgrep.exe`.
+- `semgrep --version` returns `1.166.0`.
+
+## Current Report
+
+`pnpm check:security` now performs a real local Semgrep scan. It remains report-only through `lint:security:report`.
+
+Current findings:
+
+- `apps/backend/src/lib/build-metadata.ts`: reviewed `execSync` boundary.
+- `apps/frontend/vite.config.ts`: reviewed `execSync` boundary.
+- `apps/frontend/src/shared/ui/sections/APRNotificationSubscriptions.vue`: two `v-html` occurrences that need trusted-template/sanitization review.
diff --git a/tasks/static-validation-system/90-verification.md b/tasks/static-validation-system/90-verification.md
new file mode 100644
index 000000000..360870459
--- /dev/null
+++ b/tasks/static-validation-system/90-verification.md
@@ -0,0 +1,33 @@
+# Verification
+
+## Commands Run
+
+- `pnpm install --frozen-lockfile`
+- `pnpm check:static`
+- `pnpm check:lint`
+- `pnpm check:config`
+- `pnpm check:dead-code`
+- `pnpm check:security`
+- `pnpm check:build`
+- `pnpm check:type:backend`
+- `pnpm exec biome format --write package.json biome.json knip.json scripts/run-semgrep.mjs`
+- `pnpm exec biome lint --only noFocusedTests apps packages scripts tests --max-diagnostics=none`
+- `pnpm exec biome lint --only noImplicitAnyLet apps packages scripts tests --max-diagnostics=none`
+- `pnpm exec knip --no-exit-code --reporter json`
+- `semgrep --version`
+
+## Results
+
+- Root static gate passed.
+- Backend typecheck passed after typing the Caocao callback parse result.
+- Biome pilot rules passed across `apps packages scripts tests`.
+- Knip report mode produced `04-knip-triage.md`.
+- Semgrep now runs locally and reports four findings.
+- Related `AGENTS.md` guidance was pruned to stable commands and local operating constraints.
+- Static-validation task packet was rewritten for token efficiency: current state, decisions, and next actions replace process narration.
+
+## Residual Risks
+
+- Knip remains report-only until drift and baselines are resolved.
+- Semgrep is an external binary from the Node workspace perspective.
+- Biome changed-file scripts can report `0 files` while files are untracked; direct rule evaluation covered the pilot rules.
diff --git a/tools/ast-grep/rules/no-hono-http-exception-import.yml b/tools/ast-grep/rules/no-hono-http-exception-import.yml
new file mode 100644
index 000000000..e980fd896
--- /dev/null
+++ b/tools/ast-grep/rules/no-hono-http-exception-import.yml
@@ -0,0 +1,6 @@
+id: no-hono-http-exception-import
+language: TypeScript
+severity: error
+message: Use Problem Details helpers from src/lib/problem-details.ts instead of importing hono/http-exception.
+rule:
+  pattern: import $$$ from "hono/http-exception"
diff --git a/tools/ast-grep/rules/no-new-http-exception.yml b/tools/ast-grep/rules/no-new-http-exception.yml
new file mode 100644
index 000000000..4d602e3ec
--- /dev/null
+++ b/tools/ast-grep/rules/no-new-http-exception.yml
@@ -0,0 +1,6 @@
+id: no-new-http-exception
+language: TypeScript
+severity: error
+message: Use throwHttpProblem/createHttpProblem or a typed domain helper instead of new HTTPException.
+rule:
+  pattern: new HTTPException($$$)
diff --git a/tools/semgrep/security.yml b/tools/semgrep/security.yml
new file mode 100644
index 000000000..d44587abb
--- /dev/null
+++ b/tools/semgrep/security.yml
@@ -0,0 +1,22 @@
+rules:
+  - id: partner-up-reviewed-execsync
+    languages:
+      - javascript
+      - typescript
+    severity: WARNING
+    message: Shell execution must stay behind reviewed build or infrastructure boundaries.
+    pattern: execSync($COMMAND, ...)
+    paths:
+      include:
+        - apps/**/*.ts
+        - scripts/**/*.mjs
+
+  - id: partner-up-reviewed-v-html
+    languages:
+      - generic
+    severity: WARNING
+    message: v-html usage must be backed by trusted template ownership or explicit sanitization.
+    pattern: v-html
+    paths:
+      include:
+        - apps/frontend/src/**/*.vue

From 7903c9c3328d3598653f7df8798e610be696abe9 Mon Sep 17 00:00:00 2001
From: Lanzhijiang <lanzhijiang@foxmail.com>
Date: Wed, 17 Jun 2026 18:50:30 +0800
Subject: [PATCH 17/94] fix(ride-hailing): restore real order creation flow

- promote fake Caocao into a dev-ready workspace package with CLI and tests
- reconnect ordering submit to create real orders and keep /order/support as dead code
- update system scenarios and task packets for the restored order-detail spine
---
 .../src/pages/OrderingFromPlacementPage.vue   | 320 ++----------------
 knip.json                                     |   4 +-
 package.json                                  |   1 +
 .../bin/fake-caocao-server.ts                 |  35 ++
 packages/fake-caocao-server/package.json      |   6 +-
 .../fake-caocao-server/src/server.test.ts     | 152 +++++++++
 packages/fake-caocao-server/src/state.test.ts |  55 +++
 packages/fake-caocao-server/tsconfig.json     |   2 +-
 packages/fake-caocao-server/vitest.config.ts  |   9 +
 pnpm-lock.yaml                                |   9 +
 tasks/ride-hailing-mvp/00-task-packet.md      | 151 +++++++++
 tasks/ride-hailing-mvp/10-flow-correction.md  |  75 ++++
 .../ride-hailing-mvp/20-caocao-mock-server.md |  97 ++++++
 tasks/ride-hailing-mvp/30-ui-runtime-audit.md |  48 +++
 tasks/ride-hailing-mvp/control.md             | 105 ++++++
 tests/scenario/_infra/vitest/global-setup.ts  |   2 +-
 .../commerce/rental-ordering.scenario.test.ts |  58 ++--
 .../ride-hailing-ordering.scenario.test.ts    |  65 ++--
 18 files changed, 842 insertions(+), 352 deletions(-)
 create mode 100644 packages/fake-caocao-server/bin/fake-caocao-server.ts
 create mode 100644 packages/fake-caocao-server/src/server.test.ts
 create mode 100644 packages/fake-caocao-server/src/state.test.ts
 create mode 100644 packages/fake-caocao-server/vitest.config.ts
 create mode 100644 tasks/ride-hailing-mvp/00-task-packet.md
 create mode 100644 tasks/ride-hailing-mvp/10-flow-correction.md
 create mode 100644 tasks/ride-hailing-mvp/20-caocao-mock-server.md
 create mode 100644 tasks/ride-hailing-mvp/30-ui-runtime-audit.md
 create mode 100644 tasks/ride-hailing-mvp/control.md

diff --git a/apps/frontend/src/pages/OrderingFromPlacementPage.vue b/apps/frontend/src/pages/OrderingFromPlacementPage.vue
index f516a13c3..830243668 100644
--- a/apps/frontend/src/pages/OrderingFromPlacementPage.vue
+++ b/apps/frontend/src/pages/OrderingFromPlacementPage.vue
@@ -45,7 +45,7 @@
         v-if="rentalOrdering"
         :amount-label="priceDisplayLabel"
         :can-create="canCreate"
-        :loading="false"
+        :loading="createOrderMutation.isPending.value"
         :price-detail-enabled="true"
         price-testid="ordering.rental.price"
         price-detail-testid="ordering.rental.price-detail.toggle"
@@ -58,7 +58,7 @@
         v-if="rideOrdering"
         :amount-label="priceDisplayLabel"
         :can-create="canCreate"
-        :loading="false"
+        :loading="createOrderMutation.isPending.value"
         :price-detail-enabled="true"
         price-testid="ordering.ride-hailing.quote-price-range"
         price-detail-testid="ordering.ride-hailing.price-detail.toggle"
@@ -107,6 +107,7 @@ import RideHailingOrderingPanel, {
   type RideVehicleOption,
 } from "@/domains/commerce/ui/ordering/RideHailingOrderingPanel.vue";
 import {
+  useCreateOrder,
   useEvaluateOrdering,
   type CreateOrderInput,
 } from "@/domains/commerce/queries/useCommerce";
@@ -114,24 +115,12 @@ import {
   ORDERING_ENTRY_STORAGE_KEY,
   type OrderingEntryPayload,
 } from "@/domains/commerce/model/ordering-entry-storage";
-import {
-  ORDERING_SUPPORT_HANDOFF_STORAGE_KEY,
-  type OrderingSupportHandoffPayload,
-  type OrderingSupportSummaryLine,
-  type OrderingSupportSummarySection,
-} from "@/domains/commerce/model/ordering-support-handoff";
 import type {
   OrderingContentInput,
   OrderingContentOutput,
 } from "@/domains/commerce/model/ordering-content";
 
 type OrderingOfferDetail = OrderingEntryPayload["offerDetail"];
-type OrderingSku = OrderingOfferDetail["spus"][number]["skuOptions"][number];
-type OrderingSpu = OrderingOfferDetail["spus"][number];
-type SkuSelection = {
-  sku: OrderingSku | null;
-  spu: OrderingSpu | null;
-};
 
 const { t } = useI18n();
 const router = useRouter();
@@ -162,6 +151,7 @@ const readOrderingEntry = (): OrderingEntryPayload | null => {
 const orderingEntry = ref<OrderingEntryPayload | null>(readOrderingEntry());
 const missingInput = computed(() => orderingEntry.value === null);
 
+const createOrderMutation = useCreateOrder();
 const evaluateMutation = useEvaluateOrdering();
 
 const ordering = computed(() => orderingEntry.value?.offerDetail ?? null);
@@ -219,6 +209,12 @@ const availability = computed(
   () => evaluateMutation.data.value?.actions.create_order ?? null,
 );
 
+const createOrderErrorMessage = computed(() =>
+  createOrderMutation.error.value instanceof Error
+    ? createOrderMutation.error.value.message
+    : null,
+);
+
 const availabilityMessage = computed(() => {
   if (!createOrderInput.value) return t("ordering.completeInfoNotice");
   if (evaluateMutation.isPending.value) return t("ordering.evaluatingNotice");
@@ -228,6 +224,7 @@ const availabilityMessage = computed(() => {
 const canCreate = computed(
   () =>
     !!createOrderInput.value &&
+    !createOrderMutation.isPending.value &&
     !evaluateMutation.isPending.value &&
     availability.value?.allowed === true,
 );
@@ -253,9 +250,13 @@ const priceDisplayLabel = computed(() => {
   return formatPriceAmount(evaluateMutation.data.value?.price.totalFen ?? null);
 });
 
-const floatingNoticeMessage = computed(() => availabilityMessage.value);
+const floatingNoticeMessage = computed(
+  () => createOrderErrorMessage.value ?? availabilityMessage.value,
+);
 
-const floatingNoticeTone = computed<"warning" | "error">(() => "warning");
+const floatingNoticeTone = computed<"warning" | "error">(() =>
+  createOrderErrorMessage.value ? "error" : "warning",
+);
 
 const backFallbackTo = computed(() =>
   orderingEntry.value?.prId
@@ -268,54 +269,6 @@ const handleRentalOutputUpdate = (next: OrderingContentOutput | null): void => {
   evaluationContentOutput.value = next;
 };
 
-const asRecord = (value: unknown): Record<string, unknown> | null =>
-  typeof value === "object" && value !== null && !Array.isArray(value)
-    ? (value as Record<string, unknown>)
-    : null;
-
-const readStringField = (
-  record: Record<string, unknown> | null,
-  key: string,
-): string | null => {
-  const value = record?.[key];
-  return typeof value === "string" && value.trim().length > 0
-    ? value.trim()
-    : null;
-};
-
-const readNumberField = (
-  record: Record<string, unknown> | null,
-  key: string,
-): number | null => {
-  const value = record?.[key];
-  return typeof value === "number" && Number.isFinite(value) ? value : null;
-};
-
-const firstLineValue = (
-  value: string | null | undefined,
-  fallback?: string,
-): string => value?.trim() || fallback || t("ordering.summary.pending");
-
-const formatDateTime = (value: string | null): string => {
-  if (!value) return t("ordering.summary.pending");
-  return new Intl.DateTimeFormat("zh-CN", {
-    month: "2-digit",
-    day: "2-digit",
-    hour: "2-digit",
-    minute: "2-digit",
-  }).format(new Date(value));
-};
-
-const formatTime = (value: string | null): string => {
-  if (!value) return t("ordering.summary.departNow");
-  const time = new Intl.DateTimeFormat("zh-CN", {
-    hour: "2-digit",
-    minute: "2-digit",
-    hour12: false,
-  }).format(new Date(value));
-  return t("ordering.summary.departAt", { time });
-};
-
 const formatYuan = (amountFen: number): string => (amountFen / 100).toFixed(2);
 
 const formatPriceAmount = (amountFen: number | null | undefined): string =>
@@ -323,225 +276,27 @@ const formatPriceAmount = (amountFen: number | null | undefined): string =>
     ? `￥${formatYuan(amountFen)}`
     : t("ordering.summary.currencyPending");
 
-const selectedSkuSelection = (
-  entry: OrderingEntryPayload,
-  output: OrderingContentOutput,
-): SkuSelection => {
-  const selectedSkuId = output.items[0]?.skuId ?? null;
-  if (typeof selectedSkuId !== "number") {
-    return { sku: null, spu: entry.offerDetail.spus[0] ?? null };
-  }
-
-  for (const spu of entry.offerDetail.spus) {
-    const sku = spu.skuOptions.find((option) => option.skuId === selectedSkuId);
-    if (sku) return { sku, spu };
-  }
-
-  return { sku: null, spu: entry.offerDetail.spus[0] ?? null };
-};
-
-const getRentalParticipantCount = (sku: OrderingSku | null): number | null => {
-  const facts = asRecord(sku?.facts ?? null);
-  const count = readNumberField(facts, "participantCount");
-  return count && count > 0 ? count : null;
-};
-
-const getRentalDurationMinutes = (sku: OrderingSku | null): number | null => {
-  const facts = asRecord(sku?.facts ?? null);
-  const duration = readNumberField(facts, "durationMinutes");
-  return duration && duration > 0 ? duration : null;
-};
-
-const readRegistrants = (extras: Record<string, unknown> | null): string => {
-  const value = extras?.registrants;
-  if (!Array.isArray(value)) return t("ordering.summary.pending");
-  const names = value.flatMap((item) => {
-    const record = asRecord(item);
-    const fullName = readStringField(record, "fullName");
-    return fullName ? [fullName] : [];
-  });
-  return names.length > 0
-    ? names.join(t("ordering.summary.listSeparator"))
-    : t("ordering.summary.pending");
-};
-
-const readParticipantNames = (entry: OrderingEntryPayload): string => {
-  const value = entry.bindings.orderParticipants;
-  if (!Array.isArray(value)) return t("ordering.summary.pending");
-  const names = value.flatMap((item) => {
-    const record = asRecord(item);
-    const displayName = readStringField(record, "displayName");
-    return displayName ? [displayName] : [];
-  });
-  return names.length > 0
-    ? names.join(t("ordering.summary.listSeparator"))
-    : t("ordering.summary.pending");
-};
-
-const readPlaceName = (value: unknown): string => {
-  const record = asRecord(value);
-  return (
-    readStringField(record, "name") ??
-    readStringField(record, "full_address") ??
-    readStringField(record, "address") ??
-    t("ordering.summary.pending")
-  );
-};
-
-const buildRentalSections = (input: {
-  entry: OrderingEntryPayload;
-  output: OrderingContentOutput;
-  selection: SkuSelection;
-}): OrderingSupportSummarySection[] => {
-  const extras = asRecord(input.output.productTypedExtraProperties);
-  const participantCount =
-    getRentalParticipantCount(input.selection.sku) ??
-    input.output.participants.length;
-  const durationMinutes = getRentalDurationMinutes(input.selection.sku);
-  const skuDetail = [
-    participantCount > 0
-      ? t("ordering.summary.personUnit", { count: participantCount })
-      : null,
-    durationMinutes
-      ? t("ordering.summary.hourUnit", {
-          count: Math.round(durationMinutes / 60),
-        })
-      : null,
-  ]
-    .filter((item): item is string => item !== null)
-    .join(" · ");
-  const serviceStartAt = readStringField(extras, "serviceStartAt");
-  const serviceEndAt = readStringField(extras, "serviceEndAt");
-  const contactPhone = readStringField(extras, "contactPhone");
-
-  return [
-    {
-      title: t("ordering.summary.rentalBookingSection"),
-      lines: [
-        {
-          label: t("ordering.summary.labels.product"),
-          value: firstLineValue(input.selection.spu?.name),
-        },
-        {
-          label: t("ordering.summary.labels.sku"),
-          value: firstLineValue(input.selection.sku?.name),
-        },
-        {
-          label: t("ordering.summary.labels.configuration"),
-          value: firstLineValue(skuDetail),
-        },
-        {
-          label: t("ordering.summary.labels.serviceTime"),
-          value: `${formatDateTime(serviceStartAt)} - ${formatDateTime(serviceEndAt)}`,
-        },
-      ],
-    },
-    {
-      title: t("ordering.summary.rentalContactSection"),
-      lines: [
-        {
-          label: t("ordering.summary.labels.contactPhone"),
-          value: firstLineValue(contactPhone),
-        },
-        {
-          label: t("ordering.summary.labels.registrants"),
-          value: readRegistrants(extras),
-        },
-      ],
-    },
-  ];
-};
-
-const buildRideSections = (input: {
-  entry: OrderingEntryPayload;
-  output: OrderingContentOutput;
-  selection: SkuSelection;
-}): OrderingSupportSummarySection[] => {
-  const extras = asRecord(input.output.productTypedExtraProperties);
-  const route = asRecord(extras?.route);
-  const origin = readPlaceName(route?.origin);
-  const destination = readPlaceName(route?.destination);
-  const departureAt = readStringField(extras, "departureAt");
-  const contactPhone = readStringField(extras, "contactPhone");
-
-  return [
-    {
-      title: t("ordering.summary.rideTripSection"),
-      lines: [
-        {
-          label: t("ordering.summary.labels.service"),
-          value: firstLineValue(input.selection.spu?.name),
-        },
-        {
-          label: t("ordering.summary.labels.vehicle"),
-          value: firstLineValue(input.selection.sku?.name),
-        },
-        {
-          label: t("ordering.summary.labels.route"),
-          value: `${origin} → ${destination}`,
-        },
-        {
-          label: t("ordering.summary.labels.departure"),
-          value: formatTime(departureAt),
-        },
-      ],
-    },
-    {
-      title: t("ordering.summary.ridePassengerSection"),
-      lines: [
-        {
-          label: t("ordering.summary.labels.riders"),
-          value: readParticipantNames(input.entry),
-        },
-        {
-          label: t("ordering.summary.labels.contactPhone"),
-          value: firstLineValue(contactPhone),
-        },
-      ],
-    },
-  ];
-};
-
-const buildOrderingSupportHandoff = (input: {
-  entry: OrderingEntryPayload;
-  output: OrderingContentOutput;
-  priceLabel: string;
-}): OrderingSupportHandoffPayload => {
-  const selection = selectedSkuSelection(input.entry, input.output);
-  const title =
-    selection.spu?.name ??
-    input.entry.offerDetail.spus[0]?.name ??
-    (input.entry.offerDetail.productType === "RIDE_HAILING"
-      ? t("ordering.summary.rideFallbackTitle")
-      : t("ordering.summary.rentalFallbackTitle"));
-  const subtitle = selection.sku?.name ?? null;
-  const sections =
-    input.entry.offerDetail.productType === "RIDE_HAILING"
-      ? buildRideSections({ ...input, selection })
-      : buildRentalSections({ ...input, selection });
-
-  return {
-    createdAt: new Date().toISOString(),
-    offerId: input.entry.source.offerId,
-    prId: input.entry.prId ?? null,
-    productType: input.entry.offerDetail.productType,
-    title,
-    subtitle,
-    priceLabel: input.priceLabel,
-    sections,
-  };
-};
-
 watch(
   () => orderingEntry.value?.offerDetail.productType,
   () => {
     contentOutput.value = null;
     evaluationContentOutput.value = null;
     priceDetailOpen.value = false;
+    createOrderMutation.reset();
     evaluateMutation.reset();
   },
 );
 
+watch(
+  createOrderInput,
+  () => {
+    if (createOrderMutation.error.value) {
+      createOrderMutation.reset();
+    }
+  },
+  { deep: true },
+);
+
 watch(
   evaluationOrderInput,
   (next) => {
@@ -552,20 +307,11 @@ watch(
 );
 
 const submitOrder = async (): Promise<void> => {
-  const entry = orderingEntry.value;
-  const output = contentOutput.value;
-  if (!entry || !output) return;
-
-  const handoff = buildOrderingSupportHandoff({
-    entry,
-    output,
-    priceLabel: priceDisplayLabel.value,
-  });
-  sessionStorage.setItem(
-    ORDERING_SUPPORT_HANDOFF_STORAGE_KEY,
-    JSON.stringify(handoff),
-  );
-  await router.push({ name: "order-support" });
+  const input = createOrderInput.value;
+  if (!input) return;
+
+  const created = await createOrderMutation.mutateAsync(input);
+  await router.push({ path: `/orders/${created.orderId}` });
 };
 </script>
 
diff --git a/knip.json b/knip.json
index 3b1e81c90..43bfedf8c 100644
--- a/knip.json
+++ b/knip.json
@@ -54,8 +54,8 @@
       "project": ["src/**/*.ts", "bin/**/*.ts", "vitest.config.ts"]
     },
     "packages/fake-caocao-server": {
-      "entry": ["src/index.ts"],
-      "project": ["src/**/*.ts"]
+      "entry": ["src/index.ts", "bin/fake-caocao-server.ts", "vitest.config.ts"],
+      "project": ["src/**/*.ts", "bin/**/*.ts", "vitest.config.ts"]
     },
     "tests/scenario": {
       "entry": ["vitest.config.ts", "**/*.scenario.test.ts"],
diff --git a/package.json b/package.json
index 78fb8c7ff..2da3c70f5 100644
--- a/package.json
+++ b/package.json
@@ -70,6 +70,7 @@
     "db:studio": "pnpm --filter @partner-up-dev/backend db:studio"
   },
   "devDependencies": {
+    "@partner-up-dev/fake-caocao-server": "workspace:*",
     "@ast-grep/cli": "0.43.0",
     "@biomejs/biome": "2.5.0",
     "@hono/node-server": "^1.19.9",
diff --git a/packages/fake-caocao-server/bin/fake-caocao-server.ts b/packages/fake-caocao-server/bin/fake-caocao-server.ts
new file mode 100644
index 000000000..0627e11af
--- /dev/null
+++ b/packages/fake-caocao-server/bin/fake-caocao-server.ts
@@ -0,0 +1,35 @@
+import { startFakeCaocaoServer } from "../src/server";
+
+const portRaw = process.env.PORT;
+const port = portRaw ? Number.parseInt(portRaw, 10) : 0;
+
+const server = await startFakeCaocaoServer({
+  port: Number.isFinite(port) ? port : 0,
+});
+
+console.info(
+  JSON.stringify(
+    {
+      fakeCaocao: {
+        clientId: server.fixture.clientId,
+        endpointBaseUrl: server.origin,
+        signKey: server.fixture.signKey,
+      },
+      origin: server.origin,
+    },
+    null,
+    2,
+  ),
+);
+
+const shutdown = async (): Promise<void> => {
+  await server.close();
+  process.exit(0);
+};
+
+process.once("SIGINT", () => {
+  void shutdown();
+});
+process.once("SIGTERM", () => {
+  void shutdown();
+});
diff --git a/packages/fake-caocao-server/package.json b/packages/fake-caocao-server/package.json
index e80e1a096..898a9105c 100644
--- a/packages/fake-caocao-server/package.json
+++ b/packages/fake-caocao-server/package.json
@@ -10,10 +10,14 @@
     }
   },
   "scripts": {
+    "dev": "tsx bin/fake-caocao-server.ts",
+    "test": "vitest run --config vitest.config.ts",
     "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
     "@types/node": "^22.0.0",
-    "typescript": "~6.0.3"
+    "tsx": "^4.21.0",
+    "typescript": "~6.0.3",
+    "vitest": "^4.1.6"
   }
 }
diff --git a/packages/fake-caocao-server/src/server.test.ts b/packages/fake-caocao-server/src/server.test.ts
new file mode 100644
index 000000000..091af715c
--- /dev/null
+++ b/packages/fake-caocao-server/src/server.test.ts
@@ -0,0 +1,152 @@
+import { afterEach, describe, expect, test } from "vitest";
+import { createFakeCaocaoSignature } from "./signature";
+import {
+  startFakeCaocaoServer,
+  type StartedFakeCaocaoServer,
+} from "./server";
+
+const signedSearchParams = (input: {
+  clientId: string;
+  params: Record<string, string>;
+  signKey: string;
+}): URLSearchParams => {
+  const params = {
+    client_id: input.clientId,
+    ...input.params,
+  };
+  return new URLSearchParams({
+    ...params,
+    sign: createFakeCaocaoSignature({
+      params,
+      signKey: input.signKey,
+    }),
+  });
+};
+
+describe("startFakeCaocaoServer", () => {
+  let server: StartedFakeCaocaoServer | null = null;
+
+  afterEach(async () => {
+    await server?.close();
+    server = null;
+  });
+
+  test("serves signed estimate, create, and detail routes", async () => {
+    server = await startFakeCaocaoServer();
+
+    const estimateResponse = await fetch(
+      `${server.origin}/common/estimatePriceWithDetail?${signedSearchParams({
+        clientId: server.fixture.clientId,
+        params: {
+          car_type: "PREMIER",
+          timestamp: "1",
+        },
+        signKey: server.fixture.signKey,
+      }).toString()}`,
+    );
+    const estimateBody = (await estimateResponse.json()) as {
+      code: number;
+      data: { estimateAmountFen: number };
+      success: boolean;
+    };
+
+    expect(estimateResponse.ok).toBe(true);
+    expect(estimateBody.success).toBe(true);
+    expect(estimateBody.data.estimateAmountFen).toBe(5200);
+
+    const createResponse = await fetch(`${server.origin}/common/orderCarV2`, {
+      body: signedSearchParams({
+        clientId: server.fixture.clientId,
+        params: {
+          car_type: "PREMIER",
+          ext_order_id: "external-order-1",
+          timestamp: "2",
+        },
+        signKey: server.fixture.signKey,
+      }).toString(),
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+      method: "POST",
+    });
+    const createBody = (await createResponse.json()) as {
+      code: number;
+      data: { orderNo: string };
+      success: boolean;
+    };
+
+    expect(createResponse.ok).toBe(true);
+    expect(createBody.success).toBe(true);
+    expect(createBody.data.orderNo).toBe("CCexternalorder1");
+
+    const detailResponse = await fetch(
+      `${server.origin}/common/queryOrderDetailV2?${signedSearchParams({
+        clientId: server.fixture.clientId,
+        params: {
+          order_id: createBody.data.orderNo,
+          timestamp: "3",
+        },
+        signKey: server.fixture.signKey,
+      }).toString()}`,
+    );
+    const detailBody = (await detailResponse.json()) as {
+      code: number;
+      data: { phase: string };
+      success: boolean;
+    };
+
+    expect(detailResponse.ok).toBe(true);
+    expect(detailBody.success).toBe(true);
+    expect(detailBody.data.phase).toBe("ACCEPTED");
+  });
+
+  test("supports admin reset and next-create failure controls", async () => {
+    server = await startFakeCaocaoServer();
+
+    const failNextResponse = await fetch(
+      `${server.origin}/__fake_caocao/create-failure/next`,
+      {
+        method: "POST",
+      },
+    );
+    expect(failNextResponse.ok).toBe(true);
+
+    const createResponse = await fetch(`${server.origin}/common/orderCarV2`, {
+      body: signedSearchParams({
+        clientId: server.fixture.clientId,
+        params: {
+          car_type: "EXPRESS",
+          ext_order_id: "external-order-2",
+          timestamp: "4",
+        },
+        signKey: server.fixture.signKey,
+      }).toString(),
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+      method: "POST",
+    });
+    const createBody = (await createResponse.json()) as {
+      code: number;
+      msg: string;
+      success: boolean;
+    };
+
+    expect(createBody.success).toBe(false);
+    expect(createBody.code).toBe(50001);
+    expect(createBody.msg).toBe("Fake Caocao create failed");
+
+    await fetch(`${server.origin}/__fake_caocao/reset`, {
+      method: "POST",
+    });
+
+    const stateResponse = await fetch(`${server.origin}/__fake_caocao/state`);
+    const stateBody = (await stateResponse.json()) as {
+      failNextCreate: boolean;
+      orders: unknown[];
+    };
+
+    expect(stateBody.failNextCreate).toBe(false);
+    expect(stateBody.orders).toHaveLength(0);
+  });
+});
diff --git a/packages/fake-caocao-server/src/state.test.ts b/packages/fake-caocao-server/src/state.test.ts
new file mode 100644
index 000000000..0b46a7258
--- /dev/null
+++ b/packages/fake-caocao-server/src/state.test.ts
@@ -0,0 +1,55 @@
+import { describe, expect, test } from "vitest";
+import { FakeCaocaoState } from "./state";
+
+describe("FakeCaocaoState", () => {
+  test("creates idempotent orders and advances them to finished", () => {
+    const state = new FakeCaocaoState();
+
+    const created = state.createOrder({
+      carType: "PREMIER",
+      externalOrderId: "external-order-1",
+    });
+    const duplicate = state.createOrder({
+      carType: "EXPRESS",
+      externalOrderId: "external-order-1",
+    });
+
+    expect(duplicate).toEqual(created);
+    expect(created.phase).toBe("CREATED");
+    expect(created.finalAmountFen).toBe(5600);
+
+    const accepted = state.advanceOrderDetail(created.providerOrderId);
+    const inTrip = state.advanceOrderDetail(created.providerOrderId);
+    const finished = state.advanceOrderDetail(created.providerOrderId);
+
+    expect(accepted?.phase).toBe("ACCEPTED");
+    expect(inTrip?.phase).toBe("IN_TRIP");
+    expect(finished?.phase).toBe("FINISHED");
+  });
+
+  test("supports next-create failure, cancellation, and fee confirmation", () => {
+    const state = new FakeCaocaoState();
+
+    state.configureNextCreateFailure();
+    expect(state.consumeNextCreateFailure()).toBe(true);
+    expect(state.consumeNextCreateFailure()).toBe(false);
+
+    const created = state.createOrder({
+      callbackUrl: "http://127.0.0.1:4000/callback",
+      carType: "EXPRESS",
+      externalOrderId: "external-order-2",
+    });
+    state.advanceOrderDetail(created.providerOrderId);
+    const cancelled = state.cancelOrder(created.providerOrderId);
+    const feeConfirm = state.confirmFee({
+      allowanceAmountFen: 120,
+      caocaoAllowanceAmountFen: 80,
+      providerOrderId: created.providerOrderId,
+    });
+
+    expect(cancelled?.phase).toBe("CANCELLED");
+    expect(cancelled?.cancelFeeFen).toBe(800);
+    expect(feeConfirm.providerOrderId).toBe(created.providerOrderId);
+    expect(state.snapshot().feeConfirms).toHaveLength(1);
+  });
+});
diff --git a/packages/fake-caocao-server/tsconfig.json b/packages/fake-caocao-server/tsconfig.json
index 03300f000..30c542c7a 100644
--- a/packages/fake-caocao-server/tsconfig.json
+++ b/packages/fake-caocao-server/tsconfig.json
@@ -14,6 +14,6 @@
     "outDir": "./dist",
     "rootDir": "."
   },
-  "include": ["src/**/*.ts"],
+  "include": ["src/**/*.ts", "bin/**/*.ts", "vitest.config.ts"],
   "exclude": ["node_modules", "dist"]
 }
diff --git a/packages/fake-caocao-server/vitest.config.ts b/packages/fake-caocao-server/vitest.config.ts
new file mode 100644
index 000000000..bbff3e22f
--- /dev/null
+++ b/packages/fake-caocao-server/vitest.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    environment: "node",
+    include: ["src/**/*.test.ts"],
+    reporters: ["agent"],
+  },
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fcb7d3604..598cbf9f4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,6 +21,9 @@ importers:
       '@hono/node-server':
         specifier: ^1.19.9
         version: 1.19.9(hono@4.11.5)
+      '@partner-up-dev/fake-caocao-server':
+        specifier: workspace:*
+        version: link:packages/fake-caocao-server
       '@partner-up-dev/fake-wechatpay-server':
         specifier: workspace:*
         version: link:packages/fake-wechatpay-server
@@ -221,9 +224,15 @@ importers:
       '@types/node':
         specifier: ^22.0.0
         version: 22.19.7
+      tsx:
+        specifier: ^4.21.0
+        version: 4.21.0
       typescript:
         specifier: ~6.0.3
         version: 6.0.3
+      vitest:
+        specifier: ^4.1.6
+        version: 4.1.6(@opentelemetry/api@1.9.0)(@types/node@22.19.7)(happy-dom@20.9.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0))
 
   packages/fake-wechatpay-server:
     dependencies:
diff --git a/tasks/ride-hailing-mvp/00-task-packet.md b/tasks/ride-hailing-mvp/00-task-packet.md
new file mode 100644
index 000000000..0964e61f9
--- /dev/null
+++ b/tasks/ride-hailing-mvp/00-task-packet.md
@@ -0,0 +1,151 @@
+# Ride Hailing MVP
+
+Date: 2026-06-17
+
+## Purpose
+
+This file is now the packet index for the Ride Hailing MVP recovery work.
+
+The task is too large for a monofile packet. Working state should move into the
+smallest focused sibling file instead of accumulating here.
+
+## Packet Map
+
+- `control.md`
+  - current task control surface, governing principles, active sequence, and
+    human-confirmation boundary
+- `10-flow-correction.md`
+  - first product correction: remove the support-handoff detour and restore the
+    real `quote -> create order -> order detail` spine
+- `20-caocao-mock-server.md`
+  - local-dev fake provider strategy, comparison with fake WeChatPay, and the
+    minimum work needed to make provider-backed UI iteration practical
+- `30-ui-runtime-audit.md`
+  - current ordering/detail UI weaknesses and the runtime checkpoints to use
+    once dev servers are running
+
+## Objective & Hypothesis
+
+Bring the existing ride-hailing flow up to MVP quality by closing the gap in three areas:
+
+1. ordering page UI
+2. order detail page UI
+3. dynamic SPU / SKU resolution for route-aware ride-hailing offers
+
+Hypothesis:
+
+- the repository already contains a near-complete commerce and ride-hailing foundation
+- the main gap is not feature existence but contract alignment between route context, provider quote lookup, and user-facing ordering / detail surfaces
+- the safest path is to map the current product + technical contract first, then isolate whether the MVP uplift is mostly frontend assembly, API contract correction, or catalog / provider topology work
+
+## Guardrails Touched
+
+- Provisional input route: Reality against existing ecommerce contract, with a possible Constraint / Intent slice only if provider-authoritative SKU discovery needs new durable contract
+- Active mode: Execute
+- Durable owners likely involved:
+  - `docs/10-prd/`
+  - `docs/20-product-tdd/`
+  - `apps/frontend/src/pages/`
+  - `apps/frontend/src/domains/commerce/`
+  - `apps/backend/src/controllers/commerce.controller.ts`
+  - `apps/backend/src/domains/commerce/`
+  - `apps/backend/src/domains/ride-hailing/`
+- Local constraints to load before mutation:
+  - `apps/frontend/AGENTS.md`
+  - nearer frontend / backend `AGENTS.md` in touched subtrees
+- Human confirmation required before non-task-packet code edits
+
+## Verification
+
+- Establish current route + page + query + provider topology from source, not assumption
+- Cross-check current implementation against durable ecommerce / ride-hailing contracts
+- Identify whether MVP target requires PRD change, Product TDD change, or implementation-only work
+- Execution slice verification completed:
+  - `pnpm --filter @partner-up-dev/fake-caocao-server test`
+  - `pnpm --filter @partner-up-dev/fake-caocao-server typecheck`
+  - `pnpm check:type:frontend`
+  - `pnpm vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts tests/scenario/commerce/rental-ordering.scenario.test.ts`
+
+## Current Understanding
+
+- Ride-hailing code already exists across frontend and backend
+- The first two enabling slices are now implemented:
+  - fake Caocao is runnable as a standalone workspace dev tool
+  - `/order/new` now creates real orders and routes to `/orders/:orderId`
+- Known concern areas from the request:
+  - ordering page UI is below MVP standard
+  - order detail page UI is below MVP standard
+  - SPU / SKU must be dynamic per city and route
+  - route-specific SKU list and price estimate should come from the ride-hailing provider, not only static local catalog truth
+- Unknowns still blocking execution:
+  - whether MVP uplift should first change durable product truth or can stay implementation-local
+  - whether provider-authoritative SKU discovery needs a new backend contract instead of reusing `ordering/evaluate`
+
+## Exploration Findings
+
+- Current user-facing route spine is implemented in frontend router:
+  - `/order/new`
+  - `/order/support`
+  - `/orders/:orderId`
+- Backend already exposes the durable commerce API spine:
+  - `POST /api/commerce/ordering/evaluate`
+  - `POST /api/commerce/orders`
+  - `GET /api/commerce/orders/:orderId`
+- Frontend ordering page now calls the real `createOrder` mutation and routes to
+  `/orders/:orderId` on success.
+- Existing browser scenario coverage has been updated to assert real order
+  creation for both ride-hailing and rental ordering.
+- Placement ordering entry already injects route-scoped defaults into bindings:
+  - route snapshot
+  - departure time
+  - participant list
+  - viewer contact phone
+  - This is why the current ride-hailing ordering panel works despite having no visible contact input.
+- Dynamic ride quote exists, but the current SKU discovery model is hybrid rather than provider-authoritative:
+  - offer detail returns static SPU / SKU options from catalog
+  - ordering evaluation then calls provider estimate per catalog SKU
+  - unavailable SKUs become disabled after provider estimate failure
+  - therefore the provider influences price and availability, but does not author the initial candidate SKU set
+- Current provider quote / create calls only use origin and destination coordinates plus vehicle type code.
+  - waypoints are stored in snapshots but are not part of the provider estimate or create request path
+  - city is not an explicit first-class query parameter in the current contract
+- Current ride-hailing order detail page is a low-fidelity surface:
+  - route map is a CSS illustration, not the shared route map component
+  - detail polling refetches the whole order every 1.5 seconds before bill creation
+  - the page mixes ride and rental detail responsibilities in one file and one layout
+  - it is serviceable for internal verification, but not yet an MVP-quality passenger-facing lifecycle page
+
+## Evidence Pointers
+
+- Frontend router: `apps/frontend/src/app/router.ts`
+- Current ordering submit behavior: `apps/frontend/src/pages/OrderingFromPlacementPage.vue`
+- Current support handoff page: `apps/frontend/src/pages/OrderingSupportPage.vue`
+- Current order detail page: `apps/frontend/src/pages/CommerceOrderDetailPage.vue`
+- Frontend commerce queries: `apps/frontend/src/domains/commerce/queries/useCommerce.ts`
+- Ride-hailing ordering panel: `apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingPanel.vue`
+- Ordering entry binding assembly: `apps/backend/src/domains/merchandising/use-cases/match-placement-instance.ts`
+- Backend commerce controller: `apps/backend/src/controllers/commerce.controller.ts`
+- Ride quote evaluation: `apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts`
+- Real order creation: `apps/backend/src/domains/trade/use-cases/create-order.ts`
+- Current browser scenario expectation: `tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+
+## Confirmed Constraints
+
+- Exploration and task packet work are allowed now
+- Production code mutation for slices 1 and 2 is approved and executed
+- Prefer smallest useful reference set and keep this packet current as evidence changes
+
+## Next Step
+
+1. Use the newly stable fake Caocao setup for live UI runtime audit.
+2. Redesign the ride-hailing ordering page around route summary, quote state,
+   and SKU selection.
+3. Redesign ride-hailing order detail around ride lifecycle and final-bill
+   states.
+4. Decide whether dynamic SKU discovery stays catalog-seeded or becomes
+   provider-authored.
+
+## Working Rule
+
+Do not keep expanding this file as a running log. Update the smallest relevant
+packet file instead.
diff --git a/tasks/ride-hailing-mvp/10-flow-correction.md b/tasks/ride-hailing-mvp/10-flow-correction.md
new file mode 100644
index 000000000..cf681b54f
--- /dev/null
+++ b/tasks/ride-hailing-mvp/10-flow-correction.md
@@ -0,0 +1,75 @@
+# Flow Correction
+
+## Problem Statement
+
+The current Ride Hailing web flow violates the existing commerce contract.
+
+Current browser path:
+
+- `PR Page`
+- `/order/new`
+- `ordering.ride-hailing.create-order`
+- `/order/support`
+
+Contract path:
+
+- `PR Page`
+- `/order/new`
+- `POST /api/commerce/orders`
+- `/orders/:orderId`
+
+## Evidence
+
+- Frontend route families are wired in
+  `apps/frontend/src/app/router.ts`.
+- Current submit behavior is implemented in
+  `apps/frontend/src/pages/OrderingFromPlacementPage.vue`.
+- Real create-order frontend query already exists in
+  `apps/frontend/src/domains/commerce/queries/useCommerce.ts`.
+- Real backend create-order route already exists in
+  `apps/backend/src/controllers/commerce.controller.ts`.
+- Current scenario expectation still asserts `/order/support` in
+  `tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`.
+
+## Current Diagnosis
+
+- `OrderingFromPlacementPage.vue` already does real quote evaluation and create
+  preflight gating.
+- The main CTA label implies order creation, but the action actually serializes
+  a support handoff payload and routes to `/order/support`.
+- This creates structural confusion:
+  - the ordering page looks like a checkout surface
+  - the contract says it is a checkout surface
+  - the implementation uses it as a support lead-capture surface
+
+## Required Direction
+
+- Remove support handoff from the primary Ride Hailing create path.
+- Make the CTA semantics honest again:
+  - if the button says create order, it must create an order
+  - if support remains needed, it should be a secondary fallback or an explicit
+    support entry, not the primary meaning of `下单`
+
+## Implemented Slices
+
+1. Restore real order creation in `OrderingFromPlacementPage.vue`.
+2. Route create success to `/orders/:orderId`.
+3. Rewrite scenario expectations from support handoff to order detail.
+4. Keep `/order/support` in place as dead code / secondary tooling, not the
+   primary happy path.
+
+## Result
+
+- The shared `/order/new` submit path now creates real orders for the current
+  ordering families instead of serializing a support payload.
+- Ride-hailing system scenarios now prove:
+  - successful create reaches `/orders/:orderId`
+  - provider-create failure stays on `/order/new` and surfaces an error
+- Rental scenarios were updated too because the wrong submit topology lived in
+  the shared ordering page rather than in a ride-only branch.
+
+## Remaining Question
+
+- Should `/order/support` survive as a manual recovery path at all?
+- If yes, should it be reachable only from explicit support / recovery actions
+  instead of normal create-order success?
diff --git a/tasks/ride-hailing-mvp/20-caocao-mock-server.md b/tasks/ride-hailing-mvp/20-caocao-mock-server.md
new file mode 100644
index 000000000..a7fd576d2
--- /dev/null
+++ b/tasks/ride-hailing-mvp/20-caocao-mock-server.md
@@ -0,0 +1,97 @@
+# Caocao Mock Server
+
+## Objective
+
+Enable real frontend/backend local development against a deterministic fake
+ Caocao provider, so UI and flow work can be validated without paper-only
+ reasoning.
+
+## Current Asset
+
+An existing workspace package already exists:
+
+- `packages/fake-caocao-server/`
+
+Current implemented fake provider behavior includes:
+
+- estimate price
+- create ride
+- query order detail with phase progression
+- query cancel fee
+- cancel ride
+- fee confirm
+- callback posting
+- state reset and failure injection endpoints
+
+## Evidence
+
+- package entry: `packages/fake-caocao-server/src/index.ts`
+- runtime server: `packages/fake-caocao-server/src/server.ts`
+- routes: `packages/fake-caocao-server/src/routes.ts`
+- in-memory state machine: `packages/fake-caocao-server/src/state.ts`
+- scenario startup already uses it in
+  `tests/scenario/_infra/vitest/global-setup.ts`
+
+## Comparison With Fake WeChatPay
+
+`fake-wechatpay-server` is more dev-ready today because it has:
+
+- a `dev` script
+- a CLI entry under `bin/`
+- first-class package import usage
+- dedicated tests
+
+`fake-caocao-server` originally lacked at least:
+
+- a `dev` script
+- a CLI/bin entry for easy standalone local startup
+- dedicated package tests
+- documented stdout / fixture contract for developers
+- consistent package import usage; scenario setup still imports its `src/index`
+  path directly instead of consuming the package boundary
+
+## Maintainable Direction
+
+Do not create a second fake Caocao implementation inside `apps/` or `tests/`.
+
+Preferred route:
+
+1. Promote `packages/fake-caocao-server` into a first-class dev package.
+2. Make local dev consume that package boundary directly.
+3. Reuse the same fake across:
+   - system scenarios
+   - local manual UI development
+   - targeted backend/provider verification
+
+## Minimum Dev-Ready Work
+
+- add package `dev` script
+- add `bin/fake-caocao-server.ts`
+- expose startup output similar to fake WeChatPay for easy provider instance
+  registration
+- add targeted package tests for route/signature and state progression
+- switch scenario setup to the package import boundary
+- decide later whether a root-level helper script is needed to run the fake
+  alongside `pnpm dev:ensure`
+
+## Why This Matters Before UI Work
+
+- the ordering page and order detail page both depend on provider-backed state
+  changes
+- without a stable local fake, UI iteration will either stall or regress toward
+  hardcoded placeholder behavior
+
+## Likely First Infrastructure Slice
+
+Completed infra mutation:
+
+- harden `packages/fake-caocao-server`
+- make it locally runnable
+- make scenarios consume the package boundary directly
+
+## Verification
+
+- `pnpm --filter @partner-up-dev/fake-caocao-server test`
+- `pnpm --filter @partner-up-dev/fake-caocao-server typecheck`
+
+This is an enabling slice, not the main product correction slice.
diff --git a/tasks/ride-hailing-mvp/30-ui-runtime-audit.md b/tasks/ride-hailing-mvp/30-ui-runtime-audit.md
new file mode 100644
index 000000000..7fdbf6e5f
--- /dev/null
+++ b/tasks/ride-hailing-mvp/30-ui-runtime-audit.md
@@ -0,0 +1,48 @@
+# UI Runtime Audit
+
+## Ordering Page
+
+Current topology:
+
+- shell: `apps/frontend/src/pages/OrderingFromPlacementPage.vue`
+- ride content: `apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingPanel.vue`
+
+Current problems:
+
+- the page still carries the semantics of a real create-order surface while
+  actually routing to support handoff
+- the ride panel has no explicit visible contact input
+- the ride panel exposes almost no editable structure for route/time/riders
+- the current UI feels like an internal verification branch rather than a buyer
+  decision surface
+
+## Order Detail Page
+
+Current topology:
+
+- `apps/frontend/src/pages/CommerceOrderDetailPage.vue`
+
+Current problems:
+
+- ride and rental detail responsibilities are mixed into one page file
+- the ride map is a CSS illustration rather than a real route map surface
+- whole-order polling every 1.5 seconds is a coarse high-frequency strategy
+- the page exposes minimal ride-specific actions and limited lifecycle framing
+
+## Practical Runtime Checkpoints
+
+When dev servers are running, validate these checkpoints in-browser:
+
+1. PR placement -> `/order/new` opens with correct route, riders, and contact
+   prefill.
+2. Ride quote list shows provider-backed availability and price ranges.
+3. Create success navigates to `/orders/:orderId`, not `/order/support`.
+4. Order detail shows real route geometry, not a placeholder illustration.
+5. Provider state progression is understandable from the page without reading
+   internal terms.
+6. Final bill/payment transition is visible and coherent.
+
+## Working Rule
+
+Do not begin visual polish before the page responsibilities are corrected.
+First fix topology, then tune information architecture, then tune styling.
diff --git a/tasks/ride-hailing-mvp/control.md b/tasks/ride-hailing-mvp/control.md
new file mode 100644
index 000000000..9ee7ef42c
--- /dev/null
+++ b/tasks/ride-hailing-mvp/control.md
@@ -0,0 +1,105 @@
+# Ride Hailing MVP Control
+
+## Objective & Hypothesis
+
+Objective:
+
+- recover the Ride Hailing web journey to a real MVP-quality commerce flow
+- keep the resulting topology simpler, clearer, and more maintainable than the
+  current hybrid detour
+
+Hypothesis:
+
+- the backend foundation is already strong enough that the main recovery is
+  frontend flow correction plus a small number of contract decisions
+- the most dangerous trap is to preserve tactical detours such as
+  `quote/vehicle selection -> support handoff` just because they already work
+- the correct route is to remove transitional behavior where it conflicts with
+  the durable commerce contract
+
+## Design Principles
+
+- Do not preserve a wrong topology for compatibility.
+- Prefer lower complexity and clearer ownership over smaller diffs.
+- Prefer explicit boundaries over convenience state hidden in page files.
+- Reuse existing strong foundations when they are correct.
+- If an existing implementation is structurally wrong, replace it rather than
+  layering more patches on top.
+
+## Classification
+
+- Primary route today: `Reality`
+- Possible follow-up route: `Constraint` or `Intent` only if provider-driven SKU
+  discovery requires a durable new contract
+- Active mode: `Execute`
+
+## Durable Owners In Scope
+
+- `docs/20-product-tdd/ecommerce-contracts.md`
+- `apps/frontend/src/pages/OrderingFromPlacementPage.vue`
+- `apps/frontend/src/pages/CommerceOrderDetailPage.vue`
+- `apps/frontend/src/domains/commerce/`
+- `apps/backend/src/controllers/commerce.controller.ts`
+- `apps/backend/src/domains/trade/`
+- `apps/backend/src/domains/ride-hailing/`
+- `packages/fake-caocao-server/`
+
+## Confirmed Current Truth
+
+- The durable contract already says the user-facing spine is:
+  - `PR Page`
+  - `/order/new`
+  - `/orders/:orderId`
+- The backend already supports that spine with real evaluation, real order
+  creation, and real order detail reads.
+- The shared ordering submit flow now follows that spine again.
+  - `OrderingFromPlacementPage.vue` calls the real create-order mutation.
+  - Success routes to `/orders/:orderId`.
+  - `/order/support` remains in the codebase, but no longer owns the primary
+    `下单` meaning.
+- Dynamic ride quote exists, but candidate SKU discovery still starts from
+  catalog SPU/SKU truth instead of provider-authored availability.
+- `packages/fake-caocao-server/` is now promoted into a first-class dev package
+  for this workflow.
+  - It has a standalone `dev` entry.
+  - It has package tests and package-boundary scenario usage.
+
+## Active Sequence
+
+0. Completed: prepare local-dev provider infrastructure so UI iteration can
+   happen against a deterministic fake Caocao service.
+1. Completed: correct the broken product flow:
+   `quote/vehicle selection -> support handoff`
+   to
+   `quote/vehicle selection -> create order -> order detail`.
+2. Next: iterate on ordering page UI.
+3. Then iterate on ride-hailing order detail UI.
+4. After the above, decide whether dynamic SKU discovery should stay
+   catalog-seeded or become provider-authored.
+
+## Why This Sequence
+
+- UI work before flow correction is high-churn because the page responsibilities
+  are still wrong.
+- Provider-backed local dev is a practical prerequisite for rapid UI correction.
+- Dynamic provider-authored SKU discovery is important, but it is a deeper
+  contract change than restoring the real order spine.
+
+## Human Confirmation Boundary
+
+- Task-packet work and exploration are approved.
+- Any production code mutation still requires an explicit human start signal.
+- Before that start signal, prepare only:
+  - task packet structure
+  - evidence
+  - impact handshake
+  - execution slices
+
+## Verification
+
+- Evidence is source-backed and recorded in sibling packets.
+- Verified execution slice:
+  - `pnpm --filter @partner-up-dev/fake-caocao-server test`
+  - `pnpm --filter @partner-up-dev/fake-caocao-server typecheck`
+  - `pnpm check:type:frontend`
+  - `pnpm vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts tests/scenario/commerce/rental-ordering.scenario.test.ts`
diff --git a/tests/scenario/_infra/vitest/global-setup.ts b/tests/scenario/_infra/vitest/global-setup.ts
index 9410e3b24..d9a9bd20a 100644
--- a/tests/scenario/_infra/vitest/global-setup.ts
+++ b/tests/scenario/_infra/vitest/global-setup.ts
@@ -8,7 +8,7 @@ import {
 import {
   startFakeCaocaoServer,
   type StartedFakeCaocaoServer,
-} from "../../../../packages/fake-caocao-server/src/index";
+} from "@partner-up-dev/fake-caocao-server";
 import {
   createScenarioDatabase,
   installScenarioDatabaseEnv,
diff --git a/tests/scenario/commerce/rental-ordering.scenario.test.ts b/tests/scenario/commerce/rental-ordering.scenario.test.ts
index c0f97319b..bda3c4ac6 100644
--- a/tests/scenario/commerce/rental-ordering.scenario.test.ts
+++ b/tests/scenario/commerce/rental-ordering.scenario.test.ts
@@ -272,35 +272,28 @@ async function fillRentalOrderingRequiredFields(page: Page): Promise<void> {
   await page.getByTestId("ordering.rental.registrant-name.1").fill("李四");
 }
 
-async function assertOrderingSupportHandoff(input: {
+async function assertRentalOrderDetail(input: {
   page: Page;
-  expectedTitle: string;
-  expectedPrice: RegExp;
+  expectedItemName: string;
 }): Promise<void> {
-  await input.page.getByTestId("ordering.support.page").waitFor({
+  await input.page.getByTestId("order-detail.page").waitFor({
     state: "visible",
     timeout: 10_000,
   });
-  assert.equal(new URL(input.page.url()).pathname, "/order/support");
-  await input.page.getByTestId("ordering.support.contact.open").waitFor({
+  assert.match(new URL(input.page.url()).pathname, /^\/orders\/[0-9a-f-]+$/);
+  await input.page.getByTestId("order-detail.bill-detail-link").waitFor({
     state: "visible",
     timeout: 10_000,
   });
-
-  const summaryText =
-    (await input.page
-      .getByTestId("ordering.support.summary-card")
-      .first()
-      .textContent()) ?? "";
-  assert.ok(
-    summaryText.includes(input.expectedTitle),
-    `Ordering support summary should include "${input.expectedTitle}", got "${summaryText}"`,
-  );
-  assert.match(summaryText, input.expectedPrice);
+  await assertLocatorTextIncludes({
+    actual: input.page.getByTestId("order-detail.item-name").textContent(),
+    expected: input.expectedItemName,
+    label: "Rental order detail item name",
+  });
 }
 
 scenario(
-  "commerce_rental_ordering_reaches_support_handoff",
+  "commerce_rental_ordering_reaches_order_detail",
   async (ctx) => {
     const creator = await givenUser("system-commerce-rental-creator");
     const joiner = await givenUser("system-commerce-rental-joiner");
@@ -403,11 +396,7 @@ scenario(
         expected: "固定总价",
         label: "Ordering price detail explanation",
       });
-      await page.keyboard.press("Escape");
-      await page.getByTestId("ordering.rental.price-detail").waitFor({
-        state: "hidden",
-        timeout: 10_000,
-      });
+      await page.getByRole("button", { name: "Close drawer" }).click();
 
       await skuOptions.filter({ hasText: "烘焙区 B" }).click();
       await page.waitForFunction(() => {
@@ -423,16 +412,15 @@ scenario(
       });
       await page.getByTestId("ordering.rental.create-order").click();
 
-      await assertOrderingSupportHandoff({
+      await assertRentalOrderDetail({
         page,
-        expectedTitle: "系统测试烘焙空间",
-        expectedPrice: /32\.00/,
+        expectedItemName: "烘焙区 B · 2人 · 2小时",
       });
       createdOrderPath = new URL(page.url()).pathname;
     });
 
     const orderPath = createdOrderPath;
-    assert.equal(orderPath, "/order/support");
+    assert.match(orderPath ?? "", /^\/orders\/[0-9a-f-]+$/);
   },
 );
 
@@ -540,7 +528,7 @@ scenario("commerce_rental_ordering_blocks_non_creator", async (ctx) => {
   });
 });
 
-scenario("commerce_rental_cancel_entry_reaches_support_handoff", async (ctx) => {
+scenario("commerce_rental_cancel_entry_reaches_order_detail", async (ctx) => {
   const creator = await givenUser("system-commerce-cancel-creator");
   const joiner = await givenUser("system-commerce-cancel-joiner");
   const pr = await givenCommerceRentalPr({
@@ -575,15 +563,14 @@ scenario("commerce_rental_cancel_entry_reaches_support_handoff", async (ctx) =>
     });
     await page.getByTestId("ordering.rental.create-order").click();
 
-    await assertOrderingSupportHandoff({
+    await assertRentalOrderDetail({
       page,
-      expectedTitle: "系统测试烘焙空间",
-      expectedPrice: /20\.00/,
+      expectedItemName: "烘焙区 A · 2人 · 2小时",
     });
   });
 });
 
-scenario("commerce_rental_refund_entry_reaches_support_handoff", async (ctx) => {
+scenario("commerce_rental_refund_entry_reaches_order_detail", async (ctx) => {
   const creator = await givenUser("system-commerce-paid-cancel-creator");
   const joiner = await givenUser("system-commerce-paid-cancel-joiner");
   const pr = await givenCommerceRentalPr({
@@ -623,14 +610,13 @@ scenario("commerce_rental_refund_entry_reaches_support_handoff", async (ctx) =>
       return price?.includes("20.00");
     });
     await page.getByTestId("ordering.rental.create-order").click();
-    await assertOrderingSupportHandoff({
+    await assertRentalOrderDetail({
       page,
-      expectedTitle: "系统测试烘焙空间",
-      expectedPrice: /20\.00/,
+      expectedItemName: "烘焙区 A · 2人 · 2小时",
     });
     orderPath = new URL(page.url()).pathname;
   });
 
   assert.ok(orderPath, "Paid cancellation order path should be recorded");
-  assert.equal(orderPath, "/order/support");
+  assert.match(orderPath ?? "", /^\/orders\/[0-9a-f-]+$/);
 });
diff --git a/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts b/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
index 551cd5cef..cfc9a49fd 100644
--- a/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
+++ b/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
@@ -86,6 +86,13 @@ async function resetFakeCaocao(): Promise<void> {
   });
 }
 
+async function armFakeCaocaoCreateFailure(): Promise<void> {
+  const { fakeCaocao } = getScenarioEnvironment();
+  await fetch(new URL("/__fake_caocao/create-failure/next", fakeCaocao.origin), {
+    method: "POST",
+  });
+}
+
 async function givenRideHailingPr(input: {
   creator: ScenarioUser;
   title: string;
@@ -332,35 +339,35 @@ async function selectPremierVehicle(page: Page): Promise<void> {
   });
 }
 
-async function assertRideHailingSupportHandoff(page: Page): Promise<void> {
-  await page.getByTestId("ordering.support.page").waitFor({
+async function assertRideHailingOrderDetail(page: Page): Promise<void> {
+  await page.getByTestId("order-detail.page").waitFor({
     state: "visible",
     timeout: 10_000,
   });
-  assert.equal(new URL(page.url()).pathname, "/order/support");
-  await page.getByTestId("ordering.support.contact.open").waitFor({
+  assert.match(new URL(page.url()).pathname, /^\/orders\/[0-9a-f-]+$/);
+  await page.getByTestId("order-detail.ride-hailing.page").waitFor({
     state: "visible",
     timeout: 10_000,
   });
-
-  const summaryText =
-    (await page
-      .getByTestId("ordering.support.summary-card")
-      .first()
-      .textContent()) ?? "";
-  assert.ok(
-    summaryText.includes("系统曹操出行"),
-    `Ordering support summary should include ride hailing title, got "${summaryText}"`,
-  );
-  assert.ok(
-    summaryText.includes("专车"),
-    `Ordering support summary should include selected vehicle, got "${summaryText}"`,
-  );
-  assert.match(summaryText, /52\.00/);
+  await assertLocatorTextIncludes({
+    actual: page.getByTestId("order-detail.ride-hailing.selected-vehicle").textContent(),
+    expected: "系统曹操专车",
+    label: "RideHailing selected vehicle",
+  });
+  await assertLocatorTextIncludes({
+    actual: page.getByTestId("order-detail.ride-hailing.route-summary").textContent(),
+    expected: "杭州东站",
+    label: "RideHailing route summary origin",
+  });
+  await assertLocatorTextIncludes({
+    actual: page.getByTestId("order-detail.ride-hailing.route-summary").textContent(),
+    expected: "灵隐寺",
+    label: "RideHailing route summary destination",
+  });
 }
 
 scenario(
-  "commerce_ride_hailing_ordering_reaches_support_handoff",
+  "commerce_ride_hailing_ordering_reaches_order_detail",
   async (ctx) => {
     await resetFakeCaocao();
     const creator = await givenUser("system-ride-hailing-creator", {
@@ -394,19 +401,20 @@ scenario(
       await selectPremierVehicle(page);
 
       await page.getByTestId("ordering.ride-hailing.create-order").click();
-      await assertRideHailingSupportHandoff(page);
+      await assertRideHailingOrderDetail(page);
       orderPath = new URL(page.url()).pathname;
     });
 
     const createdOrderPath = orderPath;
-    assert.equal(createdOrderPath, "/order/support");
+    assert.match(createdOrderPath ?? "", /^\/orders\/[0-9a-f-]+$/);
   },
 );
 
 scenario(
-  "commerce_ride_hailing_provider_entry_reaches_support_handoff",
+  "commerce_ride_hailing_provider_create_failure_stays_on_ordering_page",
   async (ctx) => {
     await resetFakeCaocao();
+    await armFakeCaocaoCreateFailure();
     const creator = await givenUser("system-ride-hailing-failure-creator", {
       phoneNumber: "13800138000",
     });
@@ -429,7 +437,16 @@ scenario(
       await openRideHailingOrderingFromPr({ page, prId: pr.id });
       await selectPremierVehicle(page);
       await page.getByTestId("ordering.ride-hailing.create-order").click();
-      await assertRideHailingSupportHandoff(page);
+      await page.getByTestId("ordering.ride-hailing.page").waitFor({
+        state: "visible",
+        timeout: 10_000,
+      });
+      await assertLocatorTextIncludes({
+        actual: page.getByTestId("ordering.notice.blocked").textContent(),
+        expected: "Fake Caocao create failed",
+        label: "RideHailing create failure notice",
+      });
+      assert.equal(new URL(page.url()).pathname, "/order/new");
     });
   },
 );

From 14a635d7993b6c773ae4ff22cef44e8290a02bce Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Wed, 17 Jun 2026 21:16:02 +0800
Subject: [PATCH 18/94] fix(dev): make portless scripts cross-platform

- replace PowerShell-only portless wrappers with Node entry adapters

- preserve Windows OpenSSL PATH handling while supporting macOS/Linux

- load backend .env during local dev and verify route readiness in dev:ensure
---
 apps/backend/package.json                     |   2 +-
 docs/20-product-tdd/cross-unit-contracts.md   |   1 +
 docs/40-deployment/environments.md            |   9 +
 package.json                                  |   8 +-
 scripts/ensure-dev-servers.mjs                | 256 ++++++++++++++++++
 scripts/ensure-dev-servers.ps1                | 134 ---------
 scripts/portless.mjs                          |  48 ++++
 scripts/portless.ps1                          |   9 -
 .../00-task-packet.md                         |  43 +++
 9 files changed, 362 insertions(+), 148 deletions(-)
 create mode 100644 scripts/ensure-dev-servers.mjs
 delete mode 100644 scripts/ensure-dev-servers.ps1
 create mode 100644 scripts/portless.mjs
 delete mode 100644 scripts/portless.ps1
 create mode 100644 tasks/portless-cross-platform-dev-scripts/00-task-packet.md

diff --git a/apps/backend/package.json b/apps/backend/package.json
index 577fa80f2..26fe2b2ec 100644
--- a/apps/backend/package.json
+++ b/apps/backend/package.json
@@ -9,7 +9,7 @@
     }
   },
   "scripts": {
-    "dev": "tsx watch src/index.ts",
+    "dev": "tsx watch --env-file-if-exists=.env src/index.ts",
     "build": "tsup",
     "build:db-migrate-fc": "tsup --config tsup.fc-db-migrate.config.ts",
     "typecheck": "tsc --noEmit",
diff --git a/docs/20-product-tdd/cross-unit-contracts.md b/docs/20-product-tdd/cross-unit-contracts.md
index 3b34fa213..ac3e79607 100644
--- a/docs/20-product-tdd/cross-unit-contracts.md
+++ b/docs/20-product-tdd/cross-unit-contracts.md
@@ -15,6 +15,7 @@ Contract implication:
 
 - The agent-facing developer availability entry is `pnpm dev:ensure` from the repository root. It checks the stable portless routes and starts only missing frontend/backend dev servers.
 - The underlying developer full-stack entry is `pnpm dev:portless` from the repository root.
+- Root portless entries are backed by Node wrapper scripts so the command names stay stable across macOS, Linux, and Windows.
 - `portless.json` maps `apps/frontend` to the public app name `partner-up` and `apps/backend` to the public app name `api.partner-up`.
 - During portless development, Vite reads `PORTLESS_URL`, `HOST`, and `PORT` from the portless runtime, publishes `import.meta.env.VITE_API_URL` as the frontend origin, and keeps browser API calls same-origin through the frontend `/api` proxy.
 - The frontend `/api` proxy targets the backend portless app by sending `Host: api.partner-up.localhost`, which keeps local browser flows aligned with the typed backend HTTP contract while application code stays free of fixed numeric ports.
diff --git a/docs/40-deployment/environments.md b/docs/40-deployment/environments.md
index 43656951f..c6df15e45 100644
--- a/docs/40-deployment/environments.md
+++ b/docs/40-deployment/environments.md
@@ -9,6 +9,11 @@ The default local development entry is portless-managed:
 - frontend only: `pnpm dev:portless:frontend`
 - backend only: `pnpm dev:portless:backend`
 
+These root entries run through Node-based wrapper scripts so the same commands
+work on macOS, Linux, and Windows. The wrapper preserves the Windows Git
+OpenSSL PATH adjustment needed by portless without requiring PowerShell on
+non-Windows environments.
+
 Local app identity is stored in `portless.json`:
 
 - `apps/frontend`: `partner-up`
@@ -23,6 +28,10 @@ Fixed local ports remain available for compatibility workflows through package
 env files and helper scripts. They are local fallback inputs, while portless is
 the default developer workflow.
 
+The backend development script loads `apps/backend/.env` when the file exists,
+so portless and fixed-port local backend starts share the same local runtime
+inputs.
+
 Agents should use `pnpm dev:ensure` before browser or manual validation that
 needs the local frontend/backend pair. The ensure command checks the stable
 portless routes and starts only the missing services, which avoids duplicate
diff --git a/package.json b/package.json
index 2da3c70f5..495d521d7 100644
--- a/package.json
+++ b/package.json
@@ -12,10 +12,10 @@
   },
   "scripts": {
     "dev": "pnpm --filter @partner-up-dev/frontend dev & pnpm --filter @partner-up-dev/backend dev",
-    "dev:ensure": "powershell -NoProfile -ExecutionPolicy Bypass -File ./scripts/ensure-dev-servers.ps1",
-    "dev:portless": "powershell -NoProfile -ExecutionPolicy Bypass -File ./scripts/portless.ps1",
-    "dev:portless:frontend": "powershell -NoProfile -ExecutionPolicy Bypass -File ./scripts/portless.ps1 --name partner-up -- pnpm --filter @partner-up-dev/frontend dev",
-    "dev:portless:backend": "powershell -NoProfile -ExecutionPolicy Bypass -File ./scripts/portless.ps1 --name api.partner-up -- pnpm --filter @partner-up-dev/backend dev",
+    "dev:ensure": "node ./scripts/ensure-dev-servers.mjs",
+    "dev:portless": "node ./scripts/portless.mjs",
+    "dev:portless:frontend": "node ./scripts/portless.mjs --name partner-up -- pnpm --filter @partner-up-dev/frontend dev",
+    "dev:portless:backend": "node ./scripts/portless.mjs --name api.partner-up -- pnpm --filter @partner-up-dev/backend dev",
     "dev:frontend": "pnpm --filter @partner-up-dev/frontend dev",
     "dev:backend": "pnpm --filter @partner-up-dev/backend dev",
     "build:frontend": "pnpm --filter @partner-up-dev/frontend build",
diff --git a/scripts/ensure-dev-servers.mjs b/scripts/ensure-dev-servers.mjs
new file mode 100644
index 000000000..f6370a890
--- /dev/null
+++ b/scripts/ensure-dev-servers.mjs
@@ -0,0 +1,256 @@
+import { spawn, spawnSync } from "node:child_process";
+import { closeSync, existsSync, mkdirSync, openSync } from "node:fs";
+import { request } from "node:https";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const isWindows = process.platform === "win32";
+const repoRoot = resolve(dirname(fileURLToPath(import.meta.url)), "..");
+
+const routes = [
+  {
+    name: "frontend",
+    portlessArgs: [
+      "--name",
+      "partner-up",
+      "--force",
+      "--",
+      "pnpm",
+      "--filter",
+      "@partner-up-dev/frontend",
+      "dev",
+    ],
+    url: "https://partner-up.localhost",
+  },
+  {
+    name: "backend",
+    portlessArgs: [
+      "--name",
+      "api.partner-up",
+      "--force",
+      "--",
+      "pnpm",
+      "--filter",
+      "@partner-up-dev/backend",
+      "dev",
+    ],
+    url: "https://api.partner-up.localhost",
+  },
+];
+
+const getRuntimeEnv = () => {
+  const env = { ...process.env };
+
+  if (isWindows) {
+    const gitOpenSslBin = "C:\\Program Files\\Git\\usr\\bin";
+    const gitOpenSslPath = join(gitOpenSslBin, "openssl.exe");
+
+    if (existsSync(gitOpenSslPath)) {
+      const currentPath = env.Path ?? env.PATH ?? "";
+      env.Path = `${gitOpenSslBin};${currentPath}`;
+    }
+  }
+
+  return env;
+};
+
+const runtimeEnv = getRuntimeEnv();
+
+const parsePositiveIntegerArg = (name, fallback) => {
+  const prefixedArg = process.argv.find((arg) => arg.startsWith(`--${name}=`));
+  const argIndex = process.argv.indexOf(`--${name}`);
+  const separateArg = argIndex === -1 ? undefined : process.argv[argIndex + 1];
+  const argValue = prefixedArg?.slice(name.length + 3) ?? separateArg;
+
+  if (argValue === undefined) {
+    return fallback;
+  }
+
+  const value = Number.parseInt(argValue, 10);
+
+  if (!Number.isInteger(value) || value <= 0) {
+    throw new Error(`${name} must be greater than 0.`);
+  }
+
+  return value;
+};
+
+const timeoutSeconds = parsePositiveIntegerArg("timeout-seconds", 90);
+const pollIntervalSeconds = parsePositiveIntegerArg("poll-interval-seconds", 2);
+
+const assertCommandAvailable = (commandName) => {
+  const command = isWindows ? "where" : "command";
+  const args = isWindows ? [commandName] : ["-v", commandName];
+  const result = spawnSync(command, args, {
+    cwd: repoRoot,
+    env: runtimeEnv,
+    shell: isWindows || command === "command",
+    stdio: "ignore",
+  });
+
+  if ((result.status ?? 1) !== 0) {
+    throw new Error(
+      `${commandName} is not available on PATH. Install it globally with: npm install -g ${commandName}`,
+    );
+  }
+};
+
+const getPortlessListText = () => {
+  const result = spawnSync("portless", ["list"], {
+    cwd: repoRoot,
+    encoding: "utf8",
+    env: runtimeEnv,
+    shell: isWindows,
+  });
+
+  if (result.error) {
+    throw new Error(`portless list failed: ${result.error.message}`);
+  }
+
+  if ((result.status ?? 1) !== 0) {
+    const output = [result.stdout, result.stderr].filter(Boolean).join("\n");
+    throw new Error(`portless list failed:\n${output}`);
+  }
+
+  return [result.stdout, result.stderr].filter(Boolean).join("\n");
+};
+
+const isRouteHttpReady = (route) =>
+  new Promise((resolveReady) => {
+    const routeUrl = new URL(route.url);
+    const req = request(
+      {
+        headers: {
+          Host: routeUrl.host,
+        },
+        host: "127.0.0.1",
+        method: "HEAD",
+        port: routeUrl.port === "" ? 443 : Number(routeUrl.port),
+        rejectUnauthorized: false,
+        servername: routeUrl.hostname,
+        timeout: 3_000,
+      },
+      (res) => {
+        res.resume();
+        resolveReady((res.statusCode ?? 599) < 500);
+      },
+    );
+
+    req.on("error", () => {
+      resolveReady(false);
+    });
+
+    req.on("timeout", () => {
+      req.destroy();
+      resolveReady(false);
+    });
+
+    req.end();
+  });
+
+const getUnavailableRoutes = async (routeListText) => {
+  const unregisteredRoutes = routes.filter((route) => !routeListText.includes(route.url));
+  const registeredRoutes = routes.filter((route) => routeListText.includes(route.url));
+  const readinessChecks = await Promise.all(
+    registeredRoutes.map(async (route) => ({
+      ready: await isRouteHttpReady(route),
+      route,
+    })),
+  );
+  const unreadyRoutes = readinessChecks
+    .filter((result) => !result.ready)
+    .map((result) => result.route);
+
+  return [...unregisteredRoutes, ...unreadyRoutes];
+};
+
+const getTimestamp = () =>
+  new Date()
+    .toISOString()
+    .replaceAll("-", "")
+    .replace("T", "-")
+    .replaceAll(":", "")
+    .replace(/\.\d{3}Z$/, "");
+
+const startDevServer = (route) => {
+  const logDir = join(repoRoot, ".codex-tmp", "dev-servers");
+  mkdirSync(logDir, { recursive: true });
+
+  const stamp = getTimestamp();
+  const stdoutPath = join(logDir, `${stamp}-${route.name}.out.log`);
+  const stderrPath = join(logDir, `${stamp}-${route.name}.err.log`);
+
+  console.log(`Starting ${route.name} dev server through portless: ${route.url}`);
+  console.log(`Logs: ${stdoutPath}`);
+
+  const stdoutFd = openSync(stdoutPath, "a");
+  const stderrFd = openSync(stderrPath, "a");
+
+  try {
+    const child = spawn(process.execPath, ["./scripts/portless.mjs", ...route.portlessArgs], {
+      cwd: repoRoot,
+      detached: true,
+      env: runtimeEnv,
+      stdio: ["ignore", stdoutFd, stderrFd],
+      windowsHide: true,
+    });
+
+    child.unref();
+  } finally {
+    closeSync(stdoutFd);
+    closeSync(stderrFd);
+  }
+};
+
+const sleep = (seconds) =>
+  new Promise((resolveSleep) => {
+    setTimeout(resolveSleep, seconds * 1000);
+  });
+
+const main = async () => {
+  assertCommandAvailable("portless");
+  assertCommandAvailable("pnpm");
+
+  const initialRouteList = getPortlessListText();
+  let unavailableRoutes = await getUnavailableRoutes(initialRouteList);
+
+  if (unavailableRoutes.length === 0) {
+    console.log("Frontend and backend dev servers are already registered:");
+    for (const route of routes) {
+      console.log(`  ${route.url}`);
+    }
+    return;
+  }
+
+  for (const route of unavailableRoutes) {
+    startDevServer(route);
+  }
+
+  const deadline = Date.now() + timeoutSeconds * 1000;
+
+  do {
+    await sleep(pollIntervalSeconds);
+
+    const currentRouteList = getPortlessListText();
+    unavailableRoutes = await getUnavailableRoutes(currentRouteList);
+
+    if (unavailableRoutes.length === 0) {
+      console.log("Frontend and backend dev servers are ready:");
+      for (const route of routes) {
+        console.log(`  ${route.url}`);
+      }
+      return;
+    }
+  } while (Date.now() < deadline);
+
+  throw new Error(
+    `Timed out waiting for dev server route(s): ${unavailableRoutes
+      .map((route) => route.name)
+      .join(", ")}`,
+  );
+};
+
+main().catch((error) => {
+  console.error(error.message);
+  process.exit(1);
+});
diff --git a/scripts/ensure-dev-servers.ps1 b/scripts/ensure-dev-servers.ps1
deleted file mode 100644
index bac97bb4b..000000000
--- a/scripts/ensure-dev-servers.ps1
+++ /dev/null
@@ -1,134 +0,0 @@
-param(
-    [int]$TimeoutSeconds = 90,
-    [int]$PollIntervalSeconds = 2
-)
-
-$ErrorActionPreference = "Stop"
-
-if ($TimeoutSeconds -le 0) {
-    throw "TimeoutSeconds must be greater than 0."
-}
-
-if ($PollIntervalSeconds -le 0) {
-    throw "PollIntervalSeconds must be greater than 0."
-}
-
-$repoRoot = Resolve-Path -LiteralPath (Join-Path $PSScriptRoot "..")
-
-$routes = @(
-    @{
-        Name = "frontend"
-        Url = "https://partner-up.localhost"
-        Script = "dev:portless:frontend"
-    },
-    @{
-        Name = "backend"
-        Url = "https://api.partner-up.localhost"
-        Script = "dev:portless:backend"
-    }
-)
-
-function Assert-CommandAvailable {
-    param(
-        [Parameter(Mandatory = $true)]
-        [string]$CommandName
-    )
-
-    if (-not (Get-Command $CommandName -ErrorAction SilentlyContinue)) {
-        throw "$CommandName is not available on PATH. Install it globally with: npm install -g $CommandName"
-    }
-}
-
-function Get-PortlessListText {
-    $output = & portless list 2>&1
-    if ($LASTEXITCODE -ne 0) {
-        throw "portless list failed:`n$($output -join "`n")"
-    }
-
-    return $output -join "`n"
-}
-
-function Get-MissingRoutes {
-    param(
-        [Parameter(Mandatory = $true)]
-        [string]$RouteListText
-    )
-
-    $missing = @()
-    foreach ($route in $routes) {
-        if ($RouteListText -notmatch [regex]::Escape($route.Url)) {
-            $missing += $route
-        }
-    }
-
-    return $missing
-}
-
-function Start-DevServer {
-    param(
-        [Parameter(Mandatory = $true)]
-        [hashtable]$Route
-    )
-
-    $logDir = Join-Path $repoRoot ".codex-tmp/dev-servers"
-    New-Item -ItemType Directory -Force -Path $logDir | Out-Null
-
-    $stamp = Get-Date -Format "yyyyMMdd-HHmmss"
-    $stdoutPath = Join-Path $logDir "$stamp-$($Route.Name).out.log"
-    $stderrPath = Join-Path $logDir "$stamp-$($Route.Name).err.log"
-    $command = "pnpm run $($Route.Script)"
-
-    Write-Host "Starting $($Route.Name) dev server through portless: $($Route.Url)"
-    Write-Host "Logs: $stdoutPath"
-
-    $powershellCommand = Get-Command pwsh -ErrorAction SilentlyContinue
-    if (-not $powershellCommand) {
-        $powershellCommand = Get-Command powershell -ErrorAction Stop
-    }
-
-    Start-Process `
-        -FilePath $powershellCommand.Source `
-        -ArgumentList @("-NoProfile", "-ExecutionPolicy", "Bypass", "-Command", $command) `
-        -WorkingDirectory $repoRoot `
-        -WindowStyle Hidden `
-        -RedirectStandardOutput $stdoutPath `
-        -RedirectStandardError $stderrPath `
-        -PassThru | Out-Null
-}
-
-Assert-CommandAvailable -CommandName "portless"
-Assert-CommandAvailable -CommandName "pnpm"
-
-$initialRouteList = Get-PortlessListText
-$missingRoutes = @(Get-MissingRoutes -RouteListText $initialRouteList)
-
-if ($missingRoutes.Count -eq 0) {
-    Write-Host "Frontend and backend dev servers are already registered:"
-    foreach ($route in $routes) {
-        Write-Host "  $($route.Url)"
-    }
-    exit 0
-}
-
-foreach ($route in $missingRoutes) {
-    Start-DevServer -Route $route
-}
-
-$deadline = (Get-Date).AddSeconds($TimeoutSeconds)
-do {
-    Start-Sleep -Seconds $PollIntervalSeconds
-
-    $currentRouteList = Get-PortlessListText
-    $missingRoutes = @(Get-MissingRoutes -RouteListText $currentRouteList)
-
-    if ($missingRoutes.Count -eq 0) {
-        Write-Host "Frontend and backend dev servers are ready:"
-        foreach ($route in $routes) {
-            Write-Host "  $($route.Url)"
-        }
-        exit 0
-    }
-} while ((Get-Date) -lt $deadline)
-
-$missingNames = ($missingRoutes | ForEach-Object { $_.Name }) -join ", "
-throw "Timed out waiting for dev server route(s): $missingNames"
diff --git a/scripts/portless.mjs b/scripts/portless.mjs
new file mode 100644
index 000000000..6abf8ca09
--- /dev/null
+++ b/scripts/portless.mjs
@@ -0,0 +1,48 @@
+import { spawn } from "node:child_process";
+import { existsSync } from "node:fs";
+import { join } from "node:path";
+
+const isWindows = process.platform === "win32";
+
+const getPortlessEnv = () => {
+  const env = { ...process.env };
+
+  if (isWindows) {
+    const gitOpenSslBin = "C:\\Program Files\\Git\\usr\\bin";
+    const gitOpenSslPath = join(gitOpenSslBin, "openssl.exe");
+
+    if (existsSync(gitOpenSslPath)) {
+      const currentPath = env.Path ?? env.PATH ?? "";
+      env.Path = `${gitOpenSslBin};${currentPath}`;
+    }
+  }
+
+  return env;
+};
+
+const child = spawn("portless", process.argv.slice(2), {
+  env: getPortlessEnv(),
+  shell: isWindows,
+  stdio: "inherit",
+});
+
+child.on("error", (error) => {
+  if (error.code === "ENOENT") {
+    console.error(
+      "portless is not available on PATH. Install it globally with: npm install -g portless",
+    );
+    process.exit(1);
+  }
+
+  console.error(`portless failed to start: ${error.message}`);
+  process.exit(1);
+});
+
+child.on("exit", (code, signal) => {
+  if (signal) {
+    console.error(`portless exited after receiving signal ${signal}`);
+    process.exit(1);
+  }
+
+  process.exit(code ?? 1);
+});
diff --git a/scripts/portless.ps1 b/scripts/portless.ps1
deleted file mode 100644
index 0e7ea87b2..000000000
--- a/scripts/portless.ps1
+++ /dev/null
@@ -1,9 +0,0 @@
-$ErrorActionPreference = 'Stop'
-
-$gitOpenSslBin = 'C:\Program Files\Git\usr\bin'
-if (Test-Path -LiteralPath (Join-Path $gitOpenSslBin 'openssl.exe')) {
-  $env:Path = "$gitOpenSslBin;$env:Path"
-}
-
-& portless @args
-exit $LASTEXITCODE
diff --git a/tasks/portless-cross-platform-dev-scripts/00-task-packet.md b/tasks/portless-cross-platform-dev-scripts/00-task-packet.md
new file mode 100644
index 000000000..a8e5d6c0f
--- /dev/null
+++ b/tasks/portless-cross-platform-dev-scripts/00-task-packet.md
@@ -0,0 +1,43 @@
+# Portless Cross-Platform Dev Scripts
+
+## Objective & Hypothesis
+
+Make the root portless dev entries usable on macOS, Linux, and Windows without changing the public dev server entry names.
+
+Hypothesis: the PowerShell scripts are only a thin platform adapter. Replacing the root entry adapter with Node keeps Windows-specific OpenSSL PATH handling while removing the macOS dependency on PowerShell.
+
+## Guardrails Touched
+
+- Root developer workflow scripts in `package.json`.
+- Local portless availability contract in `docs/40-deployment/environments.md` and `docs/20-product-tdd/cross-unit-contracts.md`.
+- No frontend/backend runtime contract changes.
+- Public dev entries must remain:
+  - `pnpm dev:ensure`
+  - `pnpm dev:portless`
+  - `pnpm dev:portless:frontend`
+  - `pnpm dev:portless:backend`
+
+## Verification
+
+- Passed: `node ./scripts/portless.mjs --help`
+- Passed: `node --check ./scripts/portless.mjs && node --check ./scripts/ensure-dev-servers.mjs`
+- Passed: `pnpm exec biome check scripts/portless.mjs scripts/ensure-dev-servers.mjs package.json docs/40-deployment/environments.md docs/20-product-tdd/cross-unit-contracts.md tasks/portless-cross-platform-dev-scripts/00-task-packet.md`
+- Passed: `pnpm dev:ensure`
+- Passed: repeat `pnpm dev:ensure` reuses existing routes without duplicate starts.
+- Passed: `portless list` shows `https://partner-up.localhost` and `https://api.partner-up.localhost`.
+- Passed: `curl -k -I https://partner-up.localhost` returns HTTP 200.
+- Passed: `curl -k -I https://api.partner-up.localhost` returns HTTP 404, which proves the backend server is reachable through portless and the root path is simply not routed.
+
+## Current Understanding
+
+- `scripts/portless.ps1` only prepends Git for Windows OpenSSL to `PATH` and forwards arguments to `portless`.
+- `scripts/ensure-dev-servers.ps1` checks `portless list`, starts missing frontend/backend scripts, writes logs under `.codex-tmp/dev-servers`, and polls until both stable routes are registered.
+- `portless` itself already supports the current `--name ... -- pnpm ... dev` command shape.
+- Root scripts now use `scripts/portless.mjs` and `scripts/ensure-dev-servers.mjs`.
+- The old PowerShell helper files have no remaining references and are removed to avoid duplicate startup logic.
+- Backend `dev` now loads `apps/backend/.env` through `tsx watch --env-file-if-exists=.env`, matching the old fixed-port helper's local env behavior.
+- `dev:ensure` now checks both route registration and HTTP reachability; stale 5xx routes are restarted through a force-only ensure path.
+
+## Next Step
+
+Ready for review.

From 6d9344785329495cc8a132874945968fbc27d0ff Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Thu, 18 Jun 2026 10:13:28 +0800
Subject: [PATCH 19/94] chore(ride-hailing): add caocao dev helpers

- add portless fake Caocao root script and startup output

- add dev DB seed and append-only patches for placement testing

- add VSCode task for starting the fake provider
---
 package.json                                  |   1 +
 .../bin/fake-caocao-server.ts                 |   8 +-
 tasks/ride-hailing-mvp/00-task-packet.md      |  24 +
 .../ride-hailing-mvp/20-caocao-mock-server.md |   5 +-
 .../dev-ride-hailing-ordering-seed.sql        | 544 ++++++++++++++++++
 .../dev-ride-hailing-placement-type-patch.sql | 163 ++++++
 ...v-ride-hailing-portless-endpoint-patch.sql |  43 ++
 7 files changed, 784 insertions(+), 4 deletions(-)
 create mode 100644 tasks/ride-hailing-mvp/dev-ride-hailing-ordering-seed.sql
 create mode 100644 tasks/ride-hailing-mvp/dev-ride-hailing-placement-type-patch.sql
 create mode 100644 tasks/ride-hailing-mvp/dev-ride-hailing-portless-endpoint-patch.sql

diff --git a/package.json b/package.json
index 495d521d7..dcd66102e 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "dev:portless": "node ./scripts/portless.mjs",
     "dev:portless:frontend": "node ./scripts/portless.mjs --name partner-up -- pnpm --filter @partner-up-dev/frontend dev",
     "dev:portless:backend": "node ./scripts/portless.mjs --name api.partner-up -- pnpm --filter @partner-up-dev/backend dev",
+    "dev:portless:fake-caocao": "node ./scripts/portless.mjs --name fake-caocao -- pnpm --filter @partner-up-dev/fake-caocao-server dev",
     "dev:frontend": "pnpm --filter @partner-up-dev/frontend dev",
     "dev:backend": "pnpm --filter @partner-up-dev/backend dev",
     "build:frontend": "pnpm --filter @partner-up-dev/frontend build",
diff --git a/packages/fake-caocao-server/bin/fake-caocao-server.ts b/packages/fake-caocao-server/bin/fake-caocao-server.ts
index 0627e11af..b41fe52a7 100644
--- a/packages/fake-caocao-server/bin/fake-caocao-server.ts
+++ b/packages/fake-caocao-server/bin/fake-caocao-server.ts
@@ -2,20 +2,24 @@ import { startFakeCaocaoServer } from "../src/server";
 
 const portRaw = process.env.PORT;
 const port = portRaw ? Number.parseInt(portRaw, 10) : 0;
+const hostname = process.env.HOST || undefined;
 
 const server = await startFakeCaocaoServer({
+  hostname,
   port: Number.isFinite(port) ? port : 0,
 });
+const publicOrigin = process.env.PORTLESS_URL || server.origin;
 
 console.info(
   JSON.stringify(
     {
       fakeCaocao: {
         clientId: server.fixture.clientId,
-        endpointBaseUrl: server.origin,
+        endpointBaseUrl: publicOrigin,
         signKey: server.fixture.signKey,
       },
-      origin: server.origin,
+      origin: publicOrigin,
+      listenOrigin: server.origin,
     },
     null,
     2,
diff --git a/tasks/ride-hailing-mvp/00-task-packet.md b/tasks/ride-hailing-mvp/00-task-packet.md
index 0964e61f9..f8d9ff618 100644
--- a/tasks/ride-hailing-mvp/00-task-packet.md
+++ b/tasks/ride-hailing-mvp/00-task-packet.md
@@ -23,6 +23,15 @@ smallest focused sibling file instead of accumulating here.
 - `30-ui-runtime-audit.md`
   - current ordering/detail UI weaknesses and the runtime checkpoints to use
     once dev servers are running
+- `dev-ride-hailing-ordering-seed.sql`
+  - temporary dev-only SQL seed for entering the RideHailing ordering page from
+    a PR Page Button Placement
+- `dev-ride-hailing-portless-endpoint-patch.sql`
+  - temporary dev-only SQL patch for databases that already applied the first
+    seed with fixed-port fake Caocao / callback URLs
+- `dev-ride-hailing-placement-type-patch.sql`
+  - temporary dev-only SQL patch for databases that already applied the first
+    seed with task-private `ride-hailing-mvp-dev` Placement matching
 
 ## Objective & Hypothesis
 
@@ -72,6 +81,21 @@ Hypothesis:
 - The first two enabling slices are now implemented:
   - fake Caocao is runnable as a standalone workspace dev tool
   - `/order/new` now creates real orders and routes to `/orders/:orderId`
+- A temporary dev DB seed now exists for live ordering-page iteration from a
+  real PR Placement entry. It expects portless URLs:
+  `https://fake-caocao.localhost` for the fake provider and
+  `https://api.partner-up.localhost` for callbacks.
+- Fake Caocao follows the same portless pattern as backend/frontend: the package
+  `dev` script stays a normal server start, while the root
+  `pnpm dev:portless:fake-caocao` script wraps it with app name `fake-caocao`.
+- The temporary RideHailing Button Placement must match real PR type
+  `RIDE_HAILING`. The earlier task-private `ride-hailing-mvp-dev` type was a
+  seed mistake and has an append-only dev DB patch.
+- Latest dev seed SQL verification:
+  - `dev-ride-hailing-placement-type-patch.sql` rollback execution returned
+    the existing seeded placement with `matching_type = RIDE_HAILING`
+  - `dev-ride-hailing-ordering-seed.sql` rollback execution still succeeds
+    after changing its PR type constant to `RIDE_HAILING`
 - Known concern areas from the request:
   - ordering page UI is below MVP standard
   - order detail page UI is below MVP standard
diff --git a/tasks/ride-hailing-mvp/20-caocao-mock-server.md b/tasks/ride-hailing-mvp/20-caocao-mock-server.md
index a7fd576d2..511bd0a1c 100644
--- a/tasks/ride-hailing-mvp/20-caocao-mock-server.md
+++ b/tasks/ride-hailing-mvp/20-caocao-mock-server.md
@@ -71,8 +71,9 @@ Preferred route:
   registration
 - add targeted package tests for route/signature and state progression
 - switch scenario setup to the package import boundary
-- decide later whether a root-level helper script is needed to run the fake
-  alongside `pnpm dev:ensure`
+- run manual local fake provider work through the root
+  `pnpm dev:portless:fake-caocao` helper, matching the backend/frontend
+  portless wrapper pattern
 
 ## Why This Matters Before UI Work
 
diff --git a/tasks/ride-hailing-mvp/dev-ride-hailing-ordering-seed.sql b/tasks/ride-hailing-mvp/dev-ride-hailing-ordering-seed.sql
new file mode 100644
index 000000000..66e0550fa
--- /dev/null
+++ b/tasks/ride-hailing-mvp/dev-ride-hailing-ordering-seed.sql
@@ -0,0 +1,544 @@
+-- Temporary dev-only data seed for the RideHailing ordering page.
+--
+-- Purpose:
+-- - create enough dev DB data to enter /order/new from a PR Page Button Placement
+-- - keep the data tactical and outside formal migrations/seeds
+--
+-- Expected local setup:
+-- 1. Start fake Caocao through portless on the default endpoint used below:
+--      pnpm dev:portless:fake-caocao
+-- 2. Start the app stack:
+--      pnpm dev:ensure
+-- 3. Run this file against the dev DB.
+-- 4. Open the PR URL printed by the final SELECT, then click the Placement CTA.
+--
+-- If your fake Caocao or backend callback base URL is different, edit the
+-- constants at the top of the DO block before running.
+--
+-- Auth note:
+-- - The seeded user is bound to the default local WeChat mock openid
+--   "dev-mock-openid". In the normal dev env, mock OAuth can authenticate as
+--   this user.
+-- - If you bypass mock OAuth, generate a token for the printed viewer_user_id
+--   with backend code and place it in localStorage:
+--      partner_up_user_id
+--      partner_up_access_token
+--      partner_up_session_role=authenticated
+
+begin;
+
+create temporary table if not exists ride_hailing_mvp_seed_result (
+  pr_id bigint,
+  viewer_user_id uuid,
+  offer_id bigint,
+  placement_id bigint,
+  provider_instance_id uuid,
+  fake_caocao_endpoint text,
+  backend_callback_base_url text,
+  suggested_pr_path text
+) on commit drop;
+
+truncate table ride_hailing_mvp_seed_result;
+
+do $$
+declare
+  default_viewer_user_id constant uuid := '00000000-0000-4000-8000-000000000231';
+  mock_open_id constant text := 'dev-mock-openid';
+  fake_caocao_endpoint constant text := 'https://fake-caocao.localhost';
+  backend_callback_base_url constant text := 'https://api.partner-up.localhost';
+  provider_instance_key constant text := 'dev-ride-hailing-mvp-caocao';
+  pr_type constant text := 'RIDE_HAILING';
+
+  v_viewer_user_id uuid;
+  v_provider_instance_id uuid;
+  v_spu_id bigint;
+  v_express_sku_id bigint;
+  v_premier_sku_id bigint;
+  v_offer_id bigint;
+  v_placement_id bigint;
+  v_pr_id bigint;
+begin
+  select id
+    into v_viewer_user_id
+    from users
+   where open_id = mock_open_id
+     and status = 'ACTIVE'
+   order by created_at desc
+   limit 1;
+
+  if v_viewer_user_id is null then
+    v_viewer_user_id := default_viewer_user_id;
+
+    insert into users (
+      id,
+      open_id,
+      role,
+      nickname,
+      phone_number,
+      status,
+      created_at,
+      updated_at
+    )
+    values (
+      v_viewer_user_id,
+      mock_open_id,
+      array['authenticated']::text[],
+      'RideHailing MVP Demo',
+      '13800138000',
+      'ACTIVE',
+      now(),
+      now()
+    )
+    on conflict (id) do update
+      set open_id = excluded.open_id,
+          role = array['authenticated']::text[],
+          nickname = excluded.nickname,
+          phone_number = excluded.phone_number,
+          status = excluded.status,
+          updated_at = now();
+  else
+    update users
+       set role = (
+             select array_agg(distinct role_value)
+               from unnest(users.role || array['authenticated']::text[]) as role_value
+              where role_value <> 'anonymous'
+           ),
+           nickname = coalesce(users.nickname, 'RideHailing MVP Demo'),
+           phone_number = coalesce(users.phone_number, '13800138000'),
+           status = 'ACTIVE',
+           updated_at = now()
+     where id = v_viewer_user_id;
+  end if;
+
+  insert into user_reliability (user_id)
+  values (v_viewer_user_id)
+  on conflict (user_id) do nothing;
+
+  insert into user_notification_opts (user_id)
+  values (v_viewer_user_id)
+  on conflict (user_id) do nothing;
+
+  select id
+    into v_provider_instance_id
+    from ride_hailing_provider_instances
+   where provider_type = 'CAOCAO'
+     and instance_key = provider_instance_key
+   order by created_at asc
+   limit 1;
+
+  if v_provider_instance_id is null then
+    insert into ride_hailing_provider_instances (
+      provider_type,
+      instance_key,
+      status,
+      display_name,
+      config,
+      created_at,
+      updated_at
+    )
+    values (
+      'CAOCAO',
+      provider_instance_key,
+      'ACTIVE',
+      '系统曹操',
+      jsonb_build_object(
+        'adapterMode', 'CAOCAO_OPEN_API',
+        'caocaoClientId', 'fake-caocao-client',
+        'signKey', 'fake-caocao-sign-key',
+        'endpointBaseUrl', fake_caocao_endpoint,
+        'callbackBaseUrl', backend_callback_base_url,
+        'requestTimeoutMs', 5000
+      ),
+      now(),
+      now()
+    )
+    returning id into v_provider_instance_id;
+  else
+    update ride_hailing_provider_instances
+       set status = 'ACTIVE',
+           display_name = '系统曹操',
+           config = jsonb_build_object(
+             'adapterMode', 'CAOCAO_OPEN_API',
+             'caocaoClientId', 'fake-caocao-client',
+             'signKey', 'fake-caocao-sign-key',
+             'endpointBaseUrl', fake_caocao_endpoint,
+             'callbackBaseUrl', backend_callback_base_url,
+             'requestTimeoutMs', 5000
+           ),
+           updated_at = now()
+     where id = v_provider_instance_id;
+  end if;
+
+  select id
+    into v_spu_id
+    from product_spus
+   where product_type = 'RIDE_HAILING'
+     and name = '系统曹操出行'
+   order by created_at asc
+   limit 1;
+
+  if v_spu_id is null then
+    insert into product_spus (
+      version,
+      status,
+      name,
+      product_type,
+      sales_policy,
+      service_policy,
+      presentation,
+      facts,
+      created_at,
+      updated_at
+    )
+    values (
+      1,
+      'ACTIVE',
+      '系统曹操出行',
+      'RIDE_HAILING',
+      '{"quantityPolicy":{"type":"FIXED","quantity":1},"skuSelectionPolicy":{"type":"EXACTLY_ONE"}}'::jsonb,
+      '{"type":"RIDE_HAILING"}'::jsonb,
+      '{"detailImageAssetIds":[],"heroImageAssetIds":[],"noticeBlocks":[],"parameterGroups":[],"sellingPoints":["曹操实时预估","行程结束后按实际费用结算"]}'::jsonb,
+      '{}'::jsonb,
+      now(),
+      now()
+    )
+    returning id into v_spu_id;
+  else
+    update product_spus
+       set version = 1,
+           status = 'ACTIVE',
+           sales_policy = '{"quantityPolicy":{"type":"FIXED","quantity":1},"skuSelectionPolicy":{"type":"EXACTLY_ONE"}}'::jsonb,
+           service_policy = '{"type":"RIDE_HAILING"}'::jsonb,
+           presentation = '{"detailImageAssetIds":[],"heroImageAssetIds":[],"noticeBlocks":[],"parameterGroups":[],"sellingPoints":["曹操实时预估","行程结束后按实际费用结算"]}'::jsonb,
+           facts = '{}'::jsonb,
+           updated_at = now()
+     where id = v_spu_id;
+  end if;
+
+  select id
+    into v_express_sku_id
+    from product_skus
+   where product_skus.spu_id = v_spu_id
+     and name = '快车'
+   order by created_at asc
+   limit 1;
+
+  if v_express_sku_id is null then
+    insert into product_skus (
+      spu_id,
+      version,
+      status,
+      name,
+      sort_order,
+      facts,
+      pricing_model,
+      created_at,
+      updated_at
+    )
+    values (
+      v_spu_id,
+      1,
+      'ACTIVE',
+      '快车',
+      10,
+      jsonb_build_object(
+        'rideHailingProviderInstanceId', v_provider_instance_id::text,
+        'providerVehicleTypeCode', 'EXPRESS'
+      ),
+      '{"type":"DYNAMIC_QUOTE","calculatorSpec":{"version":1,"currency":"CNY","components":[{"id":"caocao-provider-estimate","label":"曹操预估价","amount":{"type":"INPUT","path":"provider.estimateAmountFen"}}]}}'::jsonb,
+      now(),
+      now()
+    )
+    returning id into v_express_sku_id;
+  else
+    update product_skus
+       set version = 1,
+           status = 'ACTIVE',
+           sort_order = 10,
+           facts = jsonb_build_object(
+             'rideHailingProviderInstanceId', v_provider_instance_id::text,
+             'providerVehicleTypeCode', 'EXPRESS'
+           ),
+           pricing_model = '{"type":"DYNAMIC_QUOTE","calculatorSpec":{"version":1,"currency":"CNY","components":[{"id":"caocao-provider-estimate","label":"曹操预估价","amount":{"type":"INPUT","path":"provider.estimateAmountFen"}}]}}'::jsonb,
+           cancellation_policy_ref = null,
+           updated_at = now()
+     where id = v_express_sku_id;
+  end if;
+
+  select id
+    into v_premier_sku_id
+    from product_skus
+   where product_skus.spu_id = v_spu_id
+     and name = '专车'
+   order by created_at asc
+   limit 1;
+
+  if v_premier_sku_id is null then
+    insert into product_skus (
+      spu_id,
+      version,
+      status,
+      name,
+      sort_order,
+      facts,
+      pricing_model,
+      created_at,
+      updated_at
+    )
+    values (
+      v_spu_id,
+      1,
+      'ACTIVE',
+      '专车',
+      20,
+      jsonb_build_object(
+        'rideHailingProviderInstanceId', v_provider_instance_id::text,
+        'providerVehicleTypeCode', 'PREMIER'
+      ),
+      '{"type":"DYNAMIC_QUOTE","calculatorSpec":{"version":1,"currency":"CNY","components":[{"id":"caocao-provider-estimate","label":"曹操预估价","amount":{"type":"INPUT","path":"provider.estimateAmountFen"}}]}}'::jsonb,
+      now(),
+      now()
+    )
+    returning id into v_premier_sku_id;
+  else
+    update product_skus
+       set version = 1,
+           status = 'ACTIVE',
+           sort_order = 20,
+           facts = jsonb_build_object(
+             'rideHailingProviderInstanceId', v_provider_instance_id::text,
+             'providerVehicleTypeCode', 'PREMIER'
+           ),
+           pricing_model = '{"type":"DYNAMIC_QUOTE","calculatorSpec":{"version":1,"currency":"CNY","components":[{"id":"caocao-provider-estimate","label":"曹操预估价","amount":{"type":"INPUT","path":"provider.estimateAmountFen"}}]}}'::jsonb,
+           cancellation_policy_ref = null,
+           updated_at = now()
+     where id = v_premier_sku_id;
+  end if;
+
+  select id
+    into v_offer_id
+    from offers
+   where product_type = 'RIDE_HAILING'
+     and spu_ids = array[v_spu_id]::bigint[]
+   order by created_at desc
+   limit 1;
+
+  if v_offer_id is null then
+    insert into offers (
+      status,
+      product_type,
+      spu_ids,
+      pricing_policy,
+      terms_version,
+      starts_at,
+      ends_at,
+      created_at,
+      updated_at
+    )
+    values (
+      'ACTIVE',
+      'RIDE_HAILING',
+      array[v_spu_id]::bigint[],
+      '{"rules":[]}'::jsonb,
+      1,
+      null,
+      null,
+      now(),
+      now()
+    )
+    returning id into v_offer_id;
+  else
+    update offers
+       set status = 'ACTIVE',
+           product_type = 'RIDE_HAILING',
+           spu_ids = array[v_spu_id]::bigint[],
+           pricing_policy = '{"rules":[]}'::jsonb,
+           terms_version = 1,
+           starts_at = null,
+           ends_at = null,
+           updated_at = now()
+     where id = v_offer_id;
+  end if;
+
+  select id
+    into v_placement_id
+    from placements
+   where placements.offer_id = v_offer_id
+     and placement_type = 'BUTTON'
+     and matching_rule::text like '%' || pr_type || '%'
+   order by created_at desc
+   limit 1;
+
+  if v_placement_id is null then
+    insert into placements (
+      status,
+      placement_type,
+      offer_id,
+      matching_rule,
+      priority,
+      effective_from,
+      effective_to,
+      creative,
+      binding_rules,
+      created_at,
+      updated_at
+    )
+    values (
+      'ACTIVE',
+      'BUTTON',
+      v_offer_id,
+      jsonb_build_object(
+        'and',
+        jsonb_build_array(
+          jsonb_build_object('===', jsonb_build_array(jsonb_build_object('var', 'kind'), 'PR')),
+          jsonb_build_object('===', jsonb_build_array(jsonb_build_object('var', 'type'), pr_type)),
+          jsonb_build_object('===', jsonb_build_array(jsonb_build_object('var', 'status'), 'READY')),
+          jsonb_build_object('var', 'hasRoute'),
+          jsonb_build_object('var', 'time.hasConcreteTime')
+        )
+      ),
+      10000,
+      now() - interval '1 minute',
+      null,
+      '{"ctaLabel":"叫曹操","description":"按当前路线预估网约车费用"}'::jsonb,
+      '[{"fieldKey":"route","contextPath":"route","lock":true}]'::jsonb,
+      now(),
+      now()
+    )
+    returning id into v_placement_id;
+  else
+    update placements
+       set status = 'ACTIVE',
+           placement_type = 'BUTTON',
+           offer_id = v_offer_id,
+           matching_rule = jsonb_build_object(
+             'and',
+             jsonb_build_array(
+               jsonb_build_object('===', jsonb_build_array(jsonb_build_object('var', 'kind'), 'PR')),
+               jsonb_build_object('===', jsonb_build_array(jsonb_build_object('var', 'type'), pr_type)),
+               jsonb_build_object('===', jsonb_build_array(jsonb_build_object('var', 'status'), 'READY')),
+               jsonb_build_object('var', 'hasRoute'),
+               jsonb_build_object('var', 'time.hasConcreteTime')
+             )
+           ),
+           priority = 10000,
+           effective_from = now() - interval '1 minute',
+           effective_to = null,
+           creative = '{"ctaLabel":"叫曹操","description":"按当前路线预估网约车费用"}'::jsonb,
+           binding_rules = '[{"fieldKey":"route","contextPath":"route","lock":true}]'::jsonb,
+           updated_at = now()
+     where id = v_placement_id;
+  end if;
+
+  update placements
+     set status = 'ARCHIVED',
+         updated_at = now()
+   where id <> v_placement_id
+     and matching_rule::text like '%' || pr_type || '%';
+
+  insert into partner_requests (
+    title,
+    type,
+    time_window,
+    location,
+    route,
+    status,
+    visibility_status,
+    confirmation_enabled,
+    confirmation_start_offset_minutes,
+    confirmation_end_offset_minutes,
+    join_lock_offset_minutes,
+    min_partners,
+    max_partners,
+    budget,
+    created_at,
+    preferences,
+    notes,
+    meeting_point,
+    allow_edit_after_ready,
+    join_gate_config,
+    orders,
+    created_by
+  )
+  values (
+    'Dev RideHailing MVP PR ' || to_char(clock_timestamp(), 'YYYY-MM-DD HH24:MI:SS'),
+    pr_type,
+    array['2031-04-01T02:00:00.000Z','2031-04-01T03:00:00.000Z']::text[],
+    null,
+    '[
+      {
+        "bd09": null,
+        "full_address": "杭州市上城区全福桥路2号",
+        "gcj02": [30.2912, 120.212],
+        "name": "杭州东站",
+        "wgs84": null
+      },
+      {
+        "bd09": null,
+        "full_address": "杭州市西湖区灵隐路1号",
+        "gcj02": [30.24, 120.102],
+        "name": "灵隐寺",
+        "wgs84": null
+      }
+    ]'::jsonb,
+    'READY',
+    'VISIBLE',
+    false,
+    null,
+    null,
+    null,
+    1,
+    null,
+    null,
+    now(),
+    array['安静','准时']::text[],
+    'RideHailing MVP dev seed. This PR is safe to delete after manual UI testing.',
+    null,
+    null,
+    '[]'::jsonb,
+    array[]::uuid[],
+    v_viewer_user_id
+  )
+  returning id into v_pr_id;
+
+  insert into partners (
+    pr_id,
+    status,
+    user_id,
+    payment_status,
+    created_at
+  )
+  values (
+    v_pr_id,
+    'JOINED',
+    v_viewer_user_id,
+    'NONE',
+    now()
+  );
+
+  insert into ride_hailing_mvp_seed_result (
+    pr_id,
+    viewer_user_id,
+    offer_id,
+    placement_id,
+    provider_instance_id,
+    fake_caocao_endpoint,
+    backend_callback_base_url,
+    suggested_pr_path
+  )
+  values (
+    v_pr_id,
+    v_viewer_user_id,
+    v_offer_id,
+    v_placement_id,
+    v_provider_instance_id,
+    fake_caocao_endpoint,
+    backend_callback_base_url,
+    '/pr/' || v_pr_id::text
+  );
+end $$;
+
+select *
+from ride_hailing_mvp_seed_result;
+
+commit;
diff --git a/tasks/ride-hailing-mvp/dev-ride-hailing-placement-type-patch.sql b/tasks/ride-hailing-mvp/dev-ride-hailing-placement-type-patch.sql
new file mode 100644
index 000000000..fdb7dfa31
--- /dev/null
+++ b/tasks/ride-hailing-mvp/dev-ride-hailing-placement-type-patch.sql
@@ -0,0 +1,163 @@
+-- Temporary dev-only patch for a previously applied RideHailing ordering seed.
+--
+-- Use this only when dev-ride-hailing-ordering-seed.sql was already applied
+-- with the task-private PR type "ride-hailing-mvp-dev".
+--
+-- Effect:
+-- - changes the seeded Caocao Button Placement rule to match real ride-hailing
+--   PRs with type = "RIDE_HAILING"
+-- - updates old seed-created dev PR rows to type = "RIDE_HAILING" so the
+--   previously printed /pr/:id URL keeps working
+-- - leaves provider / catalog / SKU / order rows in place
+
+begin;
+
+create temporary table if not exists ride_hailing_mvp_placement_type_patch_result (
+  offer_id bigint,
+  placement_id bigint,
+  patched_seed_pr_count integer,
+  matching_type text,
+  matching_rule jsonb
+) on commit drop;
+
+truncate table ride_hailing_mvp_placement_type_patch_result;
+
+do $$
+declare
+  old_pr_type constant text := 'ride-hailing-mvp-dev';
+  ride_hailing_pr_type constant text := 'RIDE_HAILING';
+
+  v_offer_id bigint;
+  v_placement_id bigint;
+  v_patched_seed_pr_count integer := 0;
+  v_matching_rule jsonb;
+begin
+  select offers.id
+    into v_offer_id
+    from offers
+   where offers.product_type = 'RIDE_HAILING'
+     and exists (
+       select 1
+         from product_spus
+        where product_spus.id = any(offers.spu_ids)
+          and product_spus.product_type = 'RIDE_HAILING'
+          and product_spus.name = '系统曹操出行'
+     )
+   order by offers.created_at asc
+   limit 1;
+
+  if v_offer_id is null then
+    raise exception
+      'RideHailing Caocao offer not found. Apply dev-ride-hailing-ordering-seed.sql first.';
+  end if;
+
+  v_matching_rule := jsonb_build_object(
+    'and',
+    jsonb_build_array(
+      jsonb_build_object('===', jsonb_build_array(jsonb_build_object('var', 'kind'), 'PR')),
+      jsonb_build_object('===', jsonb_build_array(jsonb_build_object('var', 'type'), ride_hailing_pr_type)),
+      jsonb_build_object('===', jsonb_build_array(jsonb_build_object('var', 'status'), 'READY')),
+      jsonb_build_object('var', 'hasRoute'),
+      jsonb_build_object('var', 'time.hasConcreteTime')
+    )
+  );
+
+  select placements.id
+    into v_placement_id
+    from placements
+   where placements.offer_id = v_offer_id
+     and placements.placement_type = 'BUTTON'
+     and (
+       placements.matching_rule::text like '%' || old_pr_type || '%'
+       or placements.matching_rule::text like '%' || ride_hailing_pr_type || '%'
+       or placements.creative ->> 'ctaLabel' = '叫曹操'
+     )
+   order by
+     case
+       when placements.matching_rule::text like '%' || old_pr_type || '%' then 0
+       when placements.matching_rule::text like '%' || ride_hailing_pr_type || '%' then 1
+       else 2
+     end,
+     placements.created_at desc
+   limit 1;
+
+  if v_placement_id is null then
+    insert into placements (
+      status,
+      placement_type,
+      offer_id,
+      matching_rule,
+      priority,
+      effective_from,
+      effective_to,
+      creative,
+      binding_rules,
+      created_at,
+      updated_at
+    )
+    values (
+      'ACTIVE',
+      'BUTTON',
+      v_offer_id,
+      v_matching_rule,
+      10000,
+      now() - interval '1 minute',
+      null,
+      '{"ctaLabel":"叫曹操","description":"按当前路线预估网约车费用"}'::jsonb,
+      '[{"fieldKey":"route","contextPath":"route","lock":true}]'::jsonb,
+      now(),
+      now()
+    )
+    returning id into v_placement_id;
+  else
+    update placements
+       set status = 'ACTIVE',
+           placement_type = 'BUTTON',
+           offer_id = v_offer_id,
+           matching_rule = v_matching_rule,
+           priority = 10000,
+           effective_from = now() - interval '1 minute',
+           effective_to = null,
+           creative = '{"ctaLabel":"叫曹操","description":"按当前路线预估网约车费用"}'::jsonb,
+           binding_rules = '[{"fieldKey":"route","contextPath":"route","lock":true}]'::jsonb,
+           updated_at = now()
+     where id = v_placement_id;
+  end if;
+
+  update placements
+     set status = 'ARCHIVED',
+         updated_at = now()
+   where id <> v_placement_id
+     and offer_id = v_offer_id
+     and placement_type = 'BUTTON'
+     and matching_rule::text like '%' || old_pr_type || '%';
+
+  update partner_requests
+     set type = ride_hailing_pr_type
+   where type = old_pr_type
+     and (
+       title like 'Dev RideHailing MVP PR %'
+       or notes = 'RideHailing MVP dev seed. This PR is safe to delete after manual UI testing.'
+     );
+  get diagnostics v_patched_seed_pr_count = row_count;
+
+  insert into ride_hailing_mvp_placement_type_patch_result (
+    offer_id,
+    placement_id,
+    patched_seed_pr_count,
+    matching_type,
+    matching_rule
+  )
+  values (
+    v_offer_id,
+    v_placement_id,
+    v_patched_seed_pr_count,
+    ride_hailing_pr_type,
+    v_matching_rule
+  );
+end $$;
+
+select *
+from ride_hailing_mvp_placement_type_patch_result;
+
+commit;
diff --git a/tasks/ride-hailing-mvp/dev-ride-hailing-portless-endpoint-patch.sql b/tasks/ride-hailing-mvp/dev-ride-hailing-portless-endpoint-patch.sql
new file mode 100644
index 000000000..3c3a43228
--- /dev/null
+++ b/tasks/ride-hailing-mvp/dev-ride-hailing-portless-endpoint-patch.sql
@@ -0,0 +1,43 @@
+-- Temporary dev-only patch for a previously applied RideHailing ordering seed.
+--
+-- Use this only when dev-ride-hailing-ordering-seed.sql was already applied
+-- with fixed-port provider URLs.
+--
+-- Effect:
+-- - updates the seeded Caocao provider endpoint to the portless fake provider
+-- - updates the Caocao callback base URL to the portless backend API
+-- - leaves existing PR / Offer / Placement / SKU rows in place
+--
+-- Start fake Caocao through portless before testing quotes/create:
+--   pnpm dev:portless:fake-caocao
+
+begin;
+
+with patched_provider as (
+  update ride_hailing_provider_instances
+     set status = 'ACTIVE',
+         config = jsonb_set(
+           jsonb_set(
+             config,
+             '{endpointBaseUrl}',
+             to_jsonb('https://fake-caocao.localhost'::text),
+             true
+           ),
+           '{callbackBaseUrl}',
+           to_jsonb('https://api.partner-up.localhost'::text),
+           true
+         ),
+         updated_at = now()
+   where provider_type = 'CAOCAO'
+     and instance_key = 'dev-ride-hailing-mvp-caocao'
+   returning
+     id as provider_instance_id,
+     instance_key,
+     status,
+     config ->> 'endpointBaseUrl' as endpoint_base_url,
+     config ->> 'callbackBaseUrl' as callback_base_url
+)
+select *
+from patched_provider;
+
+commit;

From 3d4a37aa672dc78c5d9d8ac4e02a2646244d9b18 Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Thu, 18 Jun 2026 11:23:02 +0800
Subject: [PATCH 20/94] feat(db): support environment-scoped data migrations

- add migration environment metadata parsing with production default and lint coverage
- add dev-only RideHailing Caocao fixture migration and dev DB scripts
- wire staging/production deployment envs explicitly and document migration usage
---
 .github/workflows/backend-fc-deploy.yml       |   1 +
 apps/backend/AGENTS.md                        |  11 +-
 apps/backend/DEPLOYMENT.md                    |   8 +-
 .../0077_dev_ride_hailing_caocao_fixture.sql  | 346 +++++++++++++++
 apps/backend/data-migrations/AGENTS.md        |  17 +
 apps/backend/data-migrations/README.md        |  29 ++
 apps/backend/fc-db-migrate/README.md          |   4 +
 apps/backend/fc-db-migrate/s.yaml             |   1 +
 apps/backend/package.json                     |   8 +-
 apps/backend/src/scripts/db/migrate.ts        |  23 +-
 apps/backend/src/scripts/db/reset.ts          |  22 +-
 apps/backend/src/scripts/db/shared.test.ts    | 106 +++++
 apps/backend/src/scripts/db/shared.ts         | 215 ++++++++--
 apps/backend/tests/_infra/db/test-database.ts |  20 +-
 docs/20-product-tdd/test-platform.md          |   3 +
 docs/40-deployment/environments.md            |   7 +
 docs/40-deployment/rollout.md                 |   5 +-
 package.json                                  |   2 +
 scripts/ci/fc/deploy_backend.sh               |   8 +-
 scripts/ci/fc/validate_backend_env.sh         |  15 +
 tasks/ride-hailing-mvp/00-task-packet.md      |  16 +-
 .../dev-ride-hailing-ordering-seed.sql        | 397 +++---------------
 tests/scenario/README.md                      |   4 +
 23 files changed, 852 insertions(+), 416 deletions(-)
 create mode 100644 apps/backend/data-migrations/0077_dev_ride_hailing_caocao_fixture.sql
 create mode 100644 apps/backend/data-migrations/AGENTS.md
 create mode 100644 apps/backend/src/scripts/db/shared.test.ts

diff --git a/.github/workflows/backend-fc-deploy.yml b/.github/workflows/backend-fc-deploy.yml
index 3c0c24b44..5316d1f5c 100644
--- a/.github/workflows/backend-fc-deploy.yml
+++ b/.github/workflows/backend-fc-deploy.yml
@@ -75,6 +75,7 @@ jobs:
       ALIBABA_CLOUD_ACCOUNT_ID: ${{ secrets.ALIBABA_CLOUD_ACCOUNT_ID }}
       BACKEND_COMMIT_HASH: ${{ github.sha }}
       GITHUB_EVENT_BEFORE: ${{ github.event.before }}
+      PARTNERUP_ENVIRONMENT: ${{ github.ref == 'refs/heads/master' && 'production' || 'staging' }}
       PUBLISH_LAYER_ONLY: ${{ github.event_name == 'workflow_dispatch' && inputs.publish_layer_only == true }}
     steps:
       - name: Checkout
diff --git a/apps/backend/AGENTS.md b/apps/backend/AGENTS.md
index 8ec3d06c0..7cfb25aa4 100644
--- a/apps/backend/AGENTS.md
+++ b/apps/backend/AGENTS.md
@@ -89,13 +89,22 @@ Read the smallest useful set and keep durable docs current:
 - Drizzle remains the schema source of truth. Generated schema SQL lives in `drizzle/`.
 - Hand-authored forward-only data migrations live in `data-migrations/`.
 - `pnpm db:migrate` runs the custom migration runner and records applied schema and data migrations in `app_migrations`.
+- The migration environment defaults to `production`. Use `pnpm db:migrate:dev`
+  or `pnpm db:reset:dev` for development-only data migrations; do not hand-type
+  the environment variable for routine local work.
 - CI/CD deploys and invokes a dedicated FC migration function inside the VPC, but it still calls the same migration runner as `pnpm db:migrate`.
 - `pnpm db:lint` validates migration and seed file naming plus transaction-mode rules before deploy.
 - `pnpm db:check` runs `drizzle-kit check`; it complements but does not replace repo-owned migration/seed lint.
 - `pnpm db:next-migration <drizzle|data-migrations>` prints the next global numeric prefix shared by both migration folders.
-- `pnpm db:reset` is local-only. It drops and recreates the local database, applies all migrations, then runs seeds.
+- `pnpm db:reset` is local-only and uses the default `production` migration
+  environment. It drops and recreates the local database, applies universal and
+  production data migrations, then runs seeds.
+- `pnpm db:reset:dev` is the local reset entry when development-only data
+  migrations are needed.
 - `pnpm db:seed` reruns all files in `seeds/`, so every seed file must be idempotent.
 - If a migration file contains `CONCURRENTLY`, it must include `-- migration: no-transaction`.
+- Only data migrations may use `-- migration: environments=...`; schema
+  migrations and seed files must not use environment metadata.
 - Staging and production are forward-only. Do not add reset logic or env-specific migration folders.
 - Production schema changes should follow expand / backfill / contract discipline.
 
diff --git a/apps/backend/DEPLOYMENT.md b/apps/backend/DEPLOYMENT.md
index aa3bf33ac..709794a63 100644
--- a/apps/backend/DEPLOYMENT.md
+++ b/apps/backend/DEPLOYMENT.md
@@ -11,6 +11,12 @@
 - Schema SQL is generated from Drizzle entities into `apps/backend/drizzle/` and committed in the same PR as the schema change.
 - Forward-only data migrations live in `apps/backend/data-migrations/` and share the same numeric prefix sequence as schema migrations.
 - The deploy pipeline deploys and invokes a dedicated FC migration function before backend FC deploy, and records applied migrations in `app_migrations`.
+- The migration runner uses `PARTNERUP_ENVIRONMENT`; deploy maps `develop` to
+  `staging` and `master` to `production`. Development-only data migrations are
+  applied locally through `pnpm db:migrate:dev` or `pnpm db:reset:dev`.
 - The migration job takes a Postgres advisory lock so only one migration runner applies changes per deploy.
 - Staging and production are forward-only. If a migration fails, deploy stops and recovery is done with a forward fix, not reset.
-- Local development uses `pnpm db:reset`, which recreates the local database, reapplies all migrations, and then runs idempotent seeds from `apps/backend/seeds/`.
+- Local production-semantic resets use `pnpm db:reset`, which recreates the
+  local database, applies universal and production data migrations, and then
+  runs idempotent seeds from `apps/backend/seeds/`. Local resets that need
+  development-only data migrations use `pnpm db:reset:dev`.
diff --git a/apps/backend/data-migrations/0077_dev_ride_hailing_caocao_fixture.sql b/apps/backend/data-migrations/0077_dev_ride_hailing_caocao_fixture.sql
new file mode 100644
index 000000000..d46d9ca09
--- /dev/null
+++ b/apps/backend/data-migrations/0077_dev_ride_hailing_caocao_fixture.sql
@@ -0,0 +1,346 @@
+-- Stable development-only RideHailing fixture for local ordering-page work.
+-- migration: environments=development
+--
+-- Keep this file limited to long-lived dev baseline data: fake provider
+-- instance, catalog rows, offer, and placement. Do not add per-run PRs,
+-- orders, real provider credentials, or scenario-test fixtures here.
+
+do $$
+declare
+  fake_caocao_endpoint constant text := 'https://fake-caocao.localhost';
+  backend_callback_base_url constant text := 'https://api.partner-up.localhost';
+  old_task_private_pr_type constant text := 'ride-hailing-mvp-dev';
+  placement_pr_type constant text := 'RIDE_HAILING';
+  provider_instance_key constant text := 'dev-ride-hailing-mvp-caocao';
+
+  v_provider_instance_id uuid;
+  v_spu_id bigint;
+  v_express_sku_id bigint;
+  v_premier_sku_id bigint;
+  v_offer_id bigint;
+  v_placement_id bigint;
+  v_matching_rule jsonb;
+begin
+  select id
+    into v_provider_instance_id
+    from ride_hailing_provider_instances
+   where provider_type = 'CAOCAO'
+     and instance_key = provider_instance_key
+   order by created_at asc
+   limit 1;
+
+  if v_provider_instance_id is null then
+    insert into ride_hailing_provider_instances (
+      provider_type,
+      instance_key,
+      status,
+      display_name,
+      config,
+      created_at,
+      updated_at
+    )
+    values (
+      'CAOCAO',
+      provider_instance_key,
+      'ACTIVE',
+      '系统曹操',
+      jsonb_build_object(
+        'adapterMode', 'CAOCAO_OPEN_API',
+        'caocaoClientId', 'fake-caocao-client',
+        'signKey', 'fake-caocao-sign-key',
+        'endpointBaseUrl', fake_caocao_endpoint,
+        'callbackBaseUrl', backend_callback_base_url,
+        'requestTimeoutMs', 5000
+      ),
+      now(),
+      now()
+    )
+    returning id into v_provider_instance_id;
+  else
+    update ride_hailing_provider_instances
+       set status = 'ACTIVE',
+           display_name = '系统曹操',
+           config = jsonb_build_object(
+             'adapterMode', 'CAOCAO_OPEN_API',
+             'caocaoClientId', 'fake-caocao-client',
+             'signKey', 'fake-caocao-sign-key',
+             'endpointBaseUrl', fake_caocao_endpoint,
+             'callbackBaseUrl', backend_callback_base_url,
+             'requestTimeoutMs', 5000
+           ),
+           updated_at = now()
+     where id = v_provider_instance_id;
+  end if;
+
+  select id
+    into v_spu_id
+    from product_spus
+   where product_type = 'RIDE_HAILING'
+     and name = '系统曹操出行'
+   order by created_at asc
+   limit 1;
+
+  if v_spu_id is null then
+    insert into product_spus (
+      version,
+      status,
+      name,
+      product_type,
+      sales_policy,
+      service_policy,
+      presentation,
+      facts,
+      created_at,
+      updated_at
+    )
+    values (
+      1,
+      'ACTIVE',
+      '系统曹操出行',
+      'RIDE_HAILING',
+      '{"quantityPolicy":{"type":"FIXED","quantity":1},"skuSelectionPolicy":{"type":"EXACTLY_ONE"}}'::jsonb,
+      '{"type":"RIDE_HAILING"}'::jsonb,
+      '{"detailImageAssetIds":[],"heroImageAssetIds":[],"noticeBlocks":[],"parameterGroups":[],"sellingPoints":["曹操实时预估","行程结束后按实际费用结算"]}'::jsonb,
+      '{}'::jsonb,
+      now(),
+      now()
+    )
+    returning id into v_spu_id;
+  else
+    update product_spus
+       set version = 1,
+           status = 'ACTIVE',
+           sales_policy = '{"quantityPolicy":{"type":"FIXED","quantity":1},"skuSelectionPolicy":{"type":"EXACTLY_ONE"}}'::jsonb,
+           service_policy = '{"type":"RIDE_HAILING"}'::jsonb,
+           presentation = '{"detailImageAssetIds":[],"heroImageAssetIds":[],"noticeBlocks":[],"parameterGroups":[],"sellingPoints":["曹操实时预估","行程结束后按实际费用结算"]}'::jsonb,
+           facts = '{}'::jsonb,
+           updated_at = now()
+     where id = v_spu_id;
+  end if;
+
+  select id
+    into v_express_sku_id
+    from product_skus
+   where product_skus.spu_id = v_spu_id
+     and name = '快车'
+   order by created_at asc
+   limit 1;
+
+  if v_express_sku_id is null then
+    insert into product_skus (
+      spu_id,
+      version,
+      status,
+      name,
+      sort_order,
+      facts,
+      pricing_model,
+      created_at,
+      updated_at
+    )
+    values (
+      v_spu_id,
+      1,
+      'ACTIVE',
+      '快车',
+      10,
+      jsonb_build_object(
+        'rideHailingProviderInstanceId', v_provider_instance_id::text,
+        'providerVehicleTypeCode', 'EXPRESS'
+      ),
+      '{"type":"DYNAMIC_QUOTE","calculatorSpec":{"version":1,"currency":"CNY","components":[{"id":"caocao-provider-estimate","label":"曹操预估价","amount":{"type":"INPUT","path":"provider.estimateAmountFen"}}]}}'::jsonb,
+      now(),
+      now()
+    )
+    returning id into v_express_sku_id;
+  else
+    update product_skus
+       set version = 1,
+           status = 'ACTIVE',
+           sort_order = 10,
+           facts = jsonb_build_object(
+             'rideHailingProviderInstanceId', v_provider_instance_id::text,
+             'providerVehicleTypeCode', 'EXPRESS'
+           ),
+           pricing_model = '{"type":"DYNAMIC_QUOTE","calculatorSpec":{"version":1,"currency":"CNY","components":[{"id":"caocao-provider-estimate","label":"曹操预估价","amount":{"type":"INPUT","path":"provider.estimateAmountFen"}}]}}'::jsonb,
+           cancellation_policy_ref = null,
+           updated_at = now()
+     where id = v_express_sku_id;
+  end if;
+
+  select id
+    into v_premier_sku_id
+    from product_skus
+   where product_skus.spu_id = v_spu_id
+     and name = '专车'
+   order by created_at asc
+   limit 1;
+
+  if v_premier_sku_id is null then
+    insert into product_skus (
+      spu_id,
+      version,
+      status,
+      name,
+      sort_order,
+      facts,
+      pricing_model,
+      created_at,
+      updated_at
+    )
+    values (
+      v_spu_id,
+      1,
+      'ACTIVE',
+      '专车',
+      20,
+      jsonb_build_object(
+        'rideHailingProviderInstanceId', v_provider_instance_id::text,
+        'providerVehicleTypeCode', 'PREMIER'
+      ),
+      '{"type":"DYNAMIC_QUOTE","calculatorSpec":{"version":1,"currency":"CNY","components":[{"id":"caocao-provider-estimate","label":"曹操预估价","amount":{"type":"INPUT","path":"provider.estimateAmountFen"}}]}}'::jsonb,
+      now(),
+      now()
+    )
+    returning id into v_premier_sku_id;
+  else
+    update product_skus
+       set version = 1,
+           status = 'ACTIVE',
+           sort_order = 20,
+           facts = jsonb_build_object(
+             'rideHailingProviderInstanceId', v_provider_instance_id::text,
+             'providerVehicleTypeCode', 'PREMIER'
+           ),
+           pricing_model = '{"type":"DYNAMIC_QUOTE","calculatorSpec":{"version":1,"currency":"CNY","components":[{"id":"caocao-provider-estimate","label":"曹操预估价","amount":{"type":"INPUT","path":"provider.estimateAmountFen"}}]}}'::jsonb,
+           cancellation_policy_ref = null,
+           updated_at = now()
+     where id = v_premier_sku_id;
+  end if;
+
+  select id
+    into v_offer_id
+    from offers
+   where product_type = 'RIDE_HAILING'
+     and spu_ids = array[v_spu_id]::bigint[]
+   order by created_at desc
+   limit 1;
+
+  if v_offer_id is null then
+    insert into offers (
+      status,
+      product_type,
+      spu_ids,
+      pricing_policy,
+      terms_version,
+      starts_at,
+      ends_at,
+      created_at,
+      updated_at
+    )
+    values (
+      'ACTIVE',
+      'RIDE_HAILING',
+      array[v_spu_id]::bigint[],
+      '{"rules":[]}'::jsonb,
+      1,
+      null,
+      null,
+      now(),
+      now()
+    )
+    returning id into v_offer_id;
+  else
+    update offers
+       set status = 'ACTIVE',
+           product_type = 'RIDE_HAILING',
+           spu_ids = array[v_spu_id]::bigint[],
+           pricing_policy = '{"rules":[]}'::jsonb,
+           terms_version = 1,
+           starts_at = null,
+           ends_at = null,
+           updated_at = now()
+     where id = v_offer_id;
+  end if;
+
+  v_matching_rule := jsonb_build_object(
+    'and',
+    jsonb_build_array(
+      jsonb_build_object('===', jsonb_build_array(jsonb_build_object('var', 'kind'), 'PR')),
+      jsonb_build_object('===', jsonb_build_array(jsonb_build_object('var', 'type'), placement_pr_type)),
+      jsonb_build_object('===', jsonb_build_array(jsonb_build_object('var', 'status'), 'READY')),
+      jsonb_build_object('var', 'hasRoute'),
+      jsonb_build_object('var', 'time.hasConcreteTime')
+    )
+  );
+
+  select id
+    into v_placement_id
+    from placements
+   where placements.offer_id = v_offer_id
+     and placement_type = 'BUTTON'
+     and (
+       matching_rule::text like '%' || placement_pr_type || '%'
+       or matching_rule::text like '%' || old_task_private_pr_type || '%'
+       or creative ->> 'ctaLabel' = '叫曹操'
+     )
+   order by
+     case
+       when matching_rule::text like '%' || old_task_private_pr_type || '%' then 0
+       when matching_rule::text like '%' || placement_pr_type || '%' then 1
+       else 2
+     end,
+     created_at desc
+   limit 1;
+
+  if v_placement_id is null then
+    insert into placements (
+      status,
+      placement_type,
+      offer_id,
+      matching_rule,
+      priority,
+      effective_from,
+      effective_to,
+      creative,
+      binding_rules,
+      created_at,
+      updated_at
+    )
+    values (
+      'ACTIVE',
+      'BUTTON',
+      v_offer_id,
+      v_matching_rule,
+      10000,
+      now() - interval '1 minute',
+      null,
+      '{"ctaLabel":"叫曹操","description":"按当前路线预估网约车费用"}'::jsonb,
+      '[{"fieldKey":"route","contextPath":"route","lock":true}]'::jsonb,
+      now(),
+      now()
+    )
+    returning id into v_placement_id;
+  else
+    update placements
+       set status = 'ACTIVE',
+           placement_type = 'BUTTON',
+           offer_id = v_offer_id,
+           matching_rule = v_matching_rule,
+           priority = 10000,
+           effective_from = now() - interval '1 minute',
+           effective_to = null,
+           creative = '{"ctaLabel":"叫曹操","description":"按当前路线预估网约车费用"}'::jsonb,
+           binding_rules = '[{"fieldKey":"route","contextPath":"route","lock":true}]'::jsonb,
+           updated_at = now()
+     where id = v_placement_id;
+  end if;
+
+  update placements
+     set status = 'ARCHIVED',
+         updated_at = now()
+   where id <> v_placement_id
+     and offer_id = v_offer_id
+     and placement_type = 'BUTTON'
+     and matching_rule::text like '%' || old_task_private_pr_type || '%';
+end $$;
diff --git a/apps/backend/data-migrations/AGENTS.md b/apps/backend/data-migrations/AGENTS.md
new file mode 100644
index 000000000..2559ed96d
--- /dev/null
+++ b/apps/backend/data-migrations/AGENTS.md
@@ -0,0 +1,17 @@
+# AGENTS.md for Backend Data Migrations
+
+- This folder is for forward-only, ledgered SQL data migrations.
+- File names must use the shared global migration prefix:
+  `<number>_<name>.sql`.
+- Data migrations may use:
+  - `-- migration: no-transaction`
+  - `-- migration: environments=production,staging,development`
+- Environment metadata is an allowlist, not a runtime condition inside SQL.
+- Files without `environments=` are universal and run in all environments.
+- Development-only data migrations must be stable local baseline data only.
+  Do not put per-run PRs, orders, cleanup scripts, scenario-test fixtures,
+  production secrets, or real user/provider credentials here.
+- If development-only baseline data changes after a migration was applied,
+  add a new forward migration. Do not edit an applied SQL file.
+- Schema migrations in `drizzle/` must never use environment gating.
+- Local one-off SQL for manual testing belongs under `tasks/`, not here.
diff --git a/apps/backend/data-migrations/README.md b/apps/backend/data-migrations/README.md
index 483a7af02..2674a107d 100644
--- a/apps/backend/data-migrations/README.md
+++ b/apps/backend/data-migrations/README.md
@@ -10,3 +10,32 @@ Rules:
 - Use `pnpm db:next-migration data-migrations` to get the next numeric prefix.
 - If a file contains `CONCURRENTLY`, it must include `-- migration: no-transaction`.
 - Staging and production are forward-only. Do not put reset logic here.
+
+## Environment Metadata
+
+Data migrations may be scoped to explicit environments with:
+
+```sql
+-- migration: environments=development
+```
+
+Allowed values are `production`, `staging`, and `development`. Multiple values
+are comma-separated. Files without `environments=` are universal and run in all
+environments.
+
+The migration runner defaults to `production`. Local development-only data
+migrations should be applied through:
+
+```bash
+pnpm db:migrate:dev
+pnpm db:reset:dev
+```
+
+Do not hand-type `PARTNERUP_ENVIRONMENT=development` for ordinary local work.
+
+Development-only migrations are still committed and packaged. Keep them limited
+to stable fake/local baseline data. Do not put per-run test PRs, orders, cleanup
+SQL, scenario fixtures, real secrets, or real user/provider credentials here.
+
+Schema migrations in `apps/backend/drizzle/` must not use environment metadata.
+Seed files in `apps/backend/seeds/` must not use `-- migration:` metadata.
diff --git a/apps/backend/fc-db-migrate/README.md b/apps/backend/fc-db-migrate/README.md
index 31f05031a..768157edf 100644
--- a/apps/backend/fc-db-migrate/README.md
+++ b/apps/backend/fc-db-migrate/README.md
@@ -12,6 +12,10 @@ This function runs the backend database migration runner inside Aliyun FC, so th
 
 - `DATABASE_URL` (required)
   Database connection string used by the migration runner.
+- `PARTNERUP_ENVIRONMENT` (required)
+  Migration environment allowlist value. Backend deploy maps `develop` to
+  `staging` and `master` to `production`. The FC deploy path accepts only
+  `staging` or `production`; `development` is a local runner environment.
 - `DB_SCRIPT_ROOT` (set by handler)
   Points the shared migration loader at the packaged `drizzle/` and `data-migrations/` directories.
 
diff --git a/apps/backend/fc-db-migrate/s.yaml b/apps/backend/fc-db-migrate/s.yaml
index b4b555abe..3d1ff030d 100644
--- a/apps/backend/fc-db-migrate/s.yaml
+++ b/apps/backend/fc-db-migrate/s.yaml
@@ -37,6 +37,7 @@ resources:
       code: ./.fc-package
       environmentVariables:
         DATABASE_URL: ${env('DATABASE_URL')}
+        PARTNERUP_ENVIRONMENT: ${env('PARTNERUP_ENVIRONMENT')}
       vpcConfig:
         vpcId: ${vars.vpcId}
         securityGroupId: ${vars.securityGroupId}
diff --git a/apps/backend/package.json b/apps/backend/package.json
index 26fe2b2ec..c9b83ad42 100644
--- a/apps/backend/package.json
+++ b/apps/backend/package.json
@@ -20,9 +20,11 @@
     "start": "node dist/index.js",
     "db:generate": "drizzle-kit generate",
     "db:lint": "tsx src/scripts/db/lint.ts",
-    "db:migrate": "tsx src/scripts/db/migrate.ts",
-    "db:reset": "tsx src/scripts/db/reset.ts",
-    "db:seed": "tsx src/scripts/db/seed.ts",
+    "db:migrate": "tsx --env-file-if-exists=.env src/scripts/db/migrate.ts",
+    "db:migrate:dev": "tsx --env-file-if-exists=.env src/scripts/db/migrate.ts --environment=development",
+    "db:reset": "tsx --env-file-if-exists=.env src/scripts/db/reset.ts",
+    "db:reset:dev": "tsx --env-file-if-exists=.env src/scripts/db/reset.ts --environment=development",
+    "db:seed": "tsx --env-file-if-exists=.env src/scripts/db/seed.ts",
     "db:next-migration": "tsx src/scripts/db/next-migration.ts",
     "db:studio": "drizzle-kit studio",
     "payment:register-provider": "tsx src/scripts/payment/register-provider.ts",
diff --git a/apps/backend/src/scripts/db/migrate.ts b/apps/backend/src/scripts/db/migrate.ts
index a688ed4c4..addff90a7 100644
--- a/apps/backend/src/scripts/db/migrate.ts
+++ b/apps/backend/src/scripts/db/migrate.ts
@@ -6,7 +6,9 @@ import {
   isMainModule,
   lintMigrationFiles,
   loadMigrationFiles,
+  type MigrationEnvironment,
   releaseMigrationLock,
+  resolveMigrationEnvironment,
 } from "./shared";
 
 function readDatabaseUrlFromEnv(): string {
@@ -18,9 +20,13 @@ function readDatabaseUrlFromEnv(): string {
   return databaseUrl;
 }
 
-export async function runMigrations(connectionString: string): Promise<void> {
+export async function runMigrations(
+  connectionString: string,
+  options: { environment?: MigrationEnvironment } = {},
+): Promise<void> {
   await lintMigrationFiles();
 
+  const environment = options.environment ?? resolveMigrationEnvironment();
   const shouldLog = process.env.DB_MIGRATE_LOG_LEVEL !== "silent";
   const sql = createSqlClient(connectionString);
   try {
@@ -32,25 +38,24 @@ export async function runMigrations(connectionString: string): Promise<void> {
     let skippedCount = 0;
 
     for (const migration of migrations) {
-      const result = await applyMigrationFile(sql, migration);
+      const result = await applyMigrationFile(sql, migration, { environment });
       if (result.skipped) {
         skippedCount += 1;
         if (shouldLog) {
-          console.info(`[db:migrate] skip ${migration.relativePath}`);
+          const skipPrefix = result.skipReason === "environment" ? "skip-env" : "skip";
+          console.info(`[db:migrate] ${skipPrefix} ${migration.relativePath}`);
         }
       } else {
         appliedCount += 1;
         if (shouldLog) {
-          console.info(
-            `[db:migrate] apply ${migration.relativePath} (${result.durationMs}ms)`,
-          );
+          console.info(`[db:migrate] apply ${migration.relativePath} (${result.durationMs}ms)`);
         }
       }
     }
 
     if (shouldLog) {
       console.info(
-        `[db:migrate] complete. applied=${appliedCount} skipped=${skippedCount}`,
+        `[db:migrate] complete. environment=${environment} applied=${appliedCount} skipped=${skippedCount}`,
       );
     }
   } finally {
@@ -63,7 +68,9 @@ export async function runMigrations(connectionString: string): Promise<void> {
 }
 
 async function main(): Promise<void> {
-  await runMigrations(readDatabaseUrlFromEnv());
+  await runMigrations(readDatabaseUrlFromEnv(), {
+    environment: resolveMigrationEnvironment(),
+  });
 }
 
 if (isMainModule(import.meta.url)) {
diff --git a/apps/backend/src/scripts/db/reset.ts b/apps/backend/src/scripts/db/reset.ts
index c1e8c960a..c3af0e31f 100644
--- a/apps/backend/src/scripts/db/reset.ts
+++ b/apps/backend/src/scripts/db/reset.ts
@@ -1,18 +1,24 @@
 import { env } from "../../lib/env";
+import { runMigrations } from "./migrate";
+import { runSeeds } from "./seed";
 import {
   assertLocalResetAllowed,
   createSqlClient,
   getAdminDatabaseUrl,
   getDatabaseNameFromUrl,
   isMainModule,
+  type MigrationEnvironment,
   quoteIdentifier,
+  resolveMigrationEnvironment,
 } from "./shared";
-import { runMigrations } from "./migrate";
-import { runSeeds } from "./seed";
 
-export async function runReset(connectionString: string): Promise<void> {
+export async function runReset(
+  connectionString: string,
+  options: { environment?: MigrationEnvironment } = {},
+): Promise<void> {
   assertLocalResetAllowed(connectionString);
 
+  const environment = options.environment ?? resolveMigrationEnvironment();
   const databaseName = getDatabaseNameFromUrl(connectionString);
   const adminSql = createSqlClient(getAdminDatabaseUrl(connectionString));
 
@@ -23,21 +29,21 @@ export async function runReset(connectionString: string): Promise<void> {
       where datname = ${databaseName}
         and pid <> pg_backend_pid()
     `;
-    await adminSql.unsafe(
-      `drop database if exists ${quoteIdentifier(databaseName)}`,
-    );
+    await adminSql.unsafe(`drop database if exists ${quoteIdentifier(databaseName)}`);
     await adminSql.unsafe(`create database ${quoteIdentifier(databaseName)}`);
   } finally {
     await adminSql.end({ timeout: 5 });
   }
 
   console.info(`[db:reset] recreated database ${databaseName}`);
-  await runMigrations(connectionString);
+  await runMigrations(connectionString, { environment });
   await runSeeds(connectionString);
 }
 
 async function main(): Promise<void> {
-  await runReset(env.DATABASE_URL);
+  await runReset(env.DATABASE_URL, {
+    environment: resolveMigrationEnvironment(),
+  });
 }
 
 if (isMainModule(import.meta.url)) {
diff --git a/apps/backend/src/scripts/db/shared.test.ts b/apps/backend/src/scripts/db/shared.test.ts
new file mode 100644
index 000000000..7cae075f1
--- /dev/null
+++ b/apps/backend/src/scripts/db/shared.test.ts
@@ -0,0 +1,106 @@
+import { describe, expect, test } from "vitest";
+import { parseSqlFileMetadata, resolveMigrationEnvironment } from "./shared";
+
+describe("resolveMigrationEnvironment", () => {
+  test("defaults to production", () => {
+    expect(resolveMigrationEnvironment({ argv: [], env: {} })).toBe("production");
+  });
+
+  test("accepts explicit CLI environment", () => {
+    expect(
+      resolveMigrationEnvironment({
+        argv: ["--environment=development"],
+        env: {},
+      }),
+    ).toBe("development");
+  });
+
+  test("rejects conflicting CLI and env environments", () => {
+    expect(() =>
+      resolveMigrationEnvironment({
+        argv: ["--environment=development"],
+        env: { PARTNERUP_ENVIRONMENT: "staging" },
+      }),
+    ).toThrow(/Conflicting migration environments/);
+  });
+
+  test("rejects missing CLI environment values", () => {
+    expect(() =>
+      resolveMigrationEnvironment({
+        argv: ["--environment"],
+        env: {},
+      }),
+    ).toThrow(/--environment requires a non-empty value/);
+  });
+
+  test("rejects empty env environment values", () => {
+    expect(() =>
+      resolveMigrationEnvironment({
+        argv: [],
+        env: { PARTNERUP_ENVIRONMENT: " " },
+      }),
+    ).toThrow(/PARTNERUP_ENVIRONMENT requires a non-empty value/);
+  });
+});
+
+describe("parseSqlFileMetadata", () => {
+  test("treats data migrations without environment metadata as universal", () => {
+    const metadata = parseSqlFileMetadata("select 1;", "data", "data-migrations/0001_example.sql");
+
+    expect(metadata).toEqual({
+      environmentScoped: false,
+      environments: ["production", "staging", "development"],
+      transactional: true,
+    });
+  });
+
+  test("parses data migration environment allowlists", () => {
+    const metadata = parseSqlFileMetadata(
+      "-- migration: environments=development,staging\nselect 1;",
+      "data",
+      "data-migrations/0001_example.sql",
+    );
+
+    expect(metadata).toEqual({
+      environmentScoped: true,
+      environments: ["development", "staging"],
+      transactional: true,
+    });
+  });
+
+  test("rejects environment metadata on schema migrations", () => {
+    expect(() =>
+      parseSqlFileMetadata(
+        "-- migration: environments=development\nselect 1;",
+        "schema",
+        "drizzle/0001_example.sql",
+      ),
+    ).toThrow(/schema migrations must not declare migration environments/);
+  });
+
+  test("rejects migration metadata on seed files", () => {
+    expect(() =>
+      parseSqlFileMetadata(
+        "-- migration: environments=development\nselect 1;",
+        "seed",
+        "seeds/0001_example.sql",
+      ),
+    ).toThrow(/seed files do not support -- migration metadata headers/);
+  });
+
+  test("rejects unknown migration metadata headers", () => {
+    expect(() =>
+      parseSqlFileMetadata(
+        "-- migration: fixture=true\nselect 1;",
+        "data",
+        "data-migrations/0001_example.sql",
+      ),
+    ).toThrow(/unsupported -- migration metadata header/);
+  });
+
+  test("rejects empty migration metadata headers", () => {
+    expect(() =>
+      parseSqlFileMetadata("-- migration: \nselect 1;", "data", "data-migrations/0001_example.sql"),
+    ).toThrow(/unsupported -- migration metadata header/);
+  });
+});
diff --git a/apps/backend/src/scripts/db/shared.ts b/apps/backend/src/scripts/db/shared.ts
index 518ab3f5e..1b2cfa1ca 100644
--- a/apps/backend/src/scripts/db/shared.ts
+++ b/apps/backend/src/scripts/db/shared.ts
@@ -8,9 +8,15 @@ export type MigrationKind = "schema" | "data";
 
 export type SqlFileType = MigrationKind | "seed";
 
+export const migrationEnvironments = ["production", "staging", "development"] as const;
+
+export type MigrationEnvironment = (typeof migrationEnvironments)[number];
+
 export interface SqlFileDefinition {
   absolutePath: string;
   checksum: string;
+  environmentScoped: boolean;
+  environments: MigrationEnvironment[];
   fileName: string;
   id: string;
   kind: SqlFileType;
@@ -26,6 +32,8 @@ export interface AppliedMigrationRow {
   checksum: string;
 }
 
+export type MigrationSkipReason = "already-applied" | "environment";
+
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
@@ -49,6 +57,9 @@ export const MIGRATION_LOCK_KEY = 1;
 
 const migrationFilePattern = /^(\d+)_([A-Za-z0-9_]+)\.sql$/;
 const noTransactionHeader = "-- migration: no-transaction";
+const environmentsHeaderPrefix = "environments=";
+const migrationHeaderLinePattern = /^-- migration:\s*(.*)$/gm;
+const allMigrationEnvironments = [...migrationEnvironments];
 
 export function createSqlClient(connectionString: string): Sql {
   const quietNotices = process.env.DB_MIGRATE_LOG_LEVEL === "silent";
@@ -69,9 +80,7 @@ export async function loadMigrationFiles(): Promise<SqlFileDefinition[]> {
 }
 
 export async function loadSeedFiles(): Promise<SqlFileDefinition[]> {
-  const files = (await readSqlDirectory(seedsDir, "seed")).sort(
-    compareSqlFiles,
-  );
+  const files = (await readSqlDirectory(seedsDir, "seed")).sort(compareSqlFiles);
   validateOrderedPrefixes(files, ["seed"]);
   return files;
 }
@@ -114,9 +123,7 @@ export async function releaseMigrationLock(sql: Sql): Promise<void> {
   `;
 }
 
-export async function readAppliedMigrations(
-  sql: Sql,
-): Promise<Map<string, AppliedMigrationRow>> {
+export async function readAppliedMigrations(sql: Sql): Promise<Map<string, AppliedMigrationRow>> {
   const rows = await sql<AppliedMigrationRow[]>`
     select id, checksum
     from app_migrations
@@ -127,7 +134,12 @@ export async function readAppliedMigrations(
 export async function applyMigrationFile(
   sql: Sql,
   file: SqlFileDefinition,
-): Promise<{ durationMs: number; skipped: boolean }> {
+  options: { environment: MigrationEnvironment },
+): Promise<{
+  durationMs: number;
+  skipped: boolean;
+  skipReason?: MigrationSkipReason;
+}> {
   const appliedMigrations = await readAppliedMigrations(sql);
   const existingRow = appliedMigrations.get(file.id);
   if (existingRow) {
@@ -137,7 +149,11 @@ export async function applyMigrationFile(
       );
     }
 
-    return { durationMs: 0, skipped: true };
+    return { durationMs: 0, skipped: true, skipReason: "already-applied" };
+  }
+
+  if (!file.environments.includes(options.environment)) {
+    return { durationMs: 0, skipped: true, skipReason: "environment" };
   }
 
   const startedAt = Date.now();
@@ -164,10 +180,7 @@ export async function applyMigrationFile(
   return { durationMs: Date.now() - startedAt, skipped: false };
 }
 
-export async function applySeedFile(
-  sql: Sql,
-  file: SqlFileDefinition,
-): Promise<number> {
+export async function applySeedFile(sql: Sql, file: SqlFileDefinition): Promise<number> {
   const startedAt = Date.now();
   await sql.begin(async (tx) => {
     await tx.unsafe(file.sql);
@@ -184,6 +197,34 @@ export async function computeNextMigrationPrefix(): Promise<string> {
   return String(highestPrefix + 1).padStart(width, "0");
 }
 
+export function resolveMigrationEnvironment(
+  input: { argv?: string[]; env?: NodeJS.ProcessEnv } = {},
+): MigrationEnvironment {
+  const argv = input.argv ?? process.argv.slice(2);
+  const env = input.env ?? process.env;
+  const cliEnvironment = readEnvironmentArg(argv);
+  const rawEnvEnvironment = env.PARTNERUP_ENVIRONMENT;
+  const envEnvironment = rawEnvEnvironment === undefined ? undefined : rawEnvEnvironment.trim();
+  if (rawEnvEnvironment !== undefined && envEnvironment?.length === 0) {
+    throw new Error("PARTNERUP_ENVIRONMENT requires a non-empty value.");
+  }
+
+  if (cliEnvironment && envEnvironment && cliEnvironment !== envEnvironment) {
+    throw new Error(
+      `Conflicting migration environments: --environment=${cliEnvironment} and PARTNERUP_ENVIRONMENT=${envEnvironment}.`,
+    );
+  }
+
+  // Production is the safe default for any path that forgot to pass an
+  // explicit environment. Development-only data must opt in through
+  // db:migrate:dev / db:reset:dev or --environment=development.
+  return parseMigrationEnvironment(cliEnvironment ?? envEnvironment ?? "production");
+}
+
+export function assertMigrationEnvironment(value: string): asserts value is MigrationEnvironment {
+  parseMigrationEnvironment(value);
+}
+
 export function assertSupportedNextMigrationFolder(folder: string): void {
   if (folder !== "drizzle" && folder !== "data-migrations") {
     throw new Error(
@@ -194,9 +235,7 @@ export function assertSupportedNextMigrationFolder(folder: string): void {
 
 export function getDatabaseNameFromUrl(connectionString: string): string {
   const databaseUrl = new URL(connectionString);
-  const databaseName = decodeURIComponent(
-    databaseUrl.pathname.replace(/^\//, ""),
-  );
+  const databaseName = decodeURIComponent(databaseUrl.pathname.replace(/^\//, ""));
   if (!databaseName) {
     throw new Error("DATABASE_URL must include a database name in the path.");
   }
@@ -240,9 +279,7 @@ export async function readSqlDirectory(
   kind: SqlFileType,
 ): Promise<SqlFileDefinition[]> {
   const directoryEntries = await readDirectoryIfExists(dirPath);
-  const sqlFiles = directoryEntries.filter((entryName) =>
-    entryName.endsWith(".sql"),
-  );
+  const sqlFiles = directoryEntries.filter((entryName) => entryName.endsWith(".sql"));
   const files = await Promise.all(
     sqlFiles.map(async (fileName) => {
       const match = migrationFilePattern.exec(fileName);
@@ -256,14 +293,14 @@ export async function readSqlDirectory(
       const prefix = Number.parseInt(prefixText, 10);
       const absolutePath = path.join(dirPath, fileName);
       const sql = await fs.readFile(absolutePath, "utf8");
-      const transactional = parseTransactionalMode(sql, kind);
-      const relativePath = normalizeRelativePath(
-        path.relative(backendRoot, absolutePath),
-      );
+      const relativePath = normalizeRelativePath(path.relative(backendRoot, absolutePath));
+      const metadata = parseSqlFileMetadata(sql, kind, relativePath);
 
       return {
         absolutePath,
         checksum: createHash("sha256").update(sql).digest("hex"),
+        environmentScoped: metadata.environmentScoped,
+        environments: metadata.environments,
         fileName,
         id: `${kind}:${fileName}`,
         kind,
@@ -271,7 +308,7 @@ export async function readSqlDirectory(
         prefixText,
         relativePath,
         sql,
-        transactional,
+        transactional: metadata.transactional,
       } satisfies SqlFileDefinition;
     }),
   );
@@ -287,26 +324,74 @@ function compareSqlFiles(a: SqlFileDefinition, b: SqlFileDefinition): number {
   return a.fileName.localeCompare(b.fileName);
 }
 
-function parseTransactionalMode(sql: string, kind: SqlFileType): boolean {
+export function parseSqlFileMetadata(
+  sql: string,
+  kind: SqlFileType,
+  relativePath: string,
+): {
+  environmentScoped: boolean;
+  environments: MigrationEnvironment[];
+  transactional: boolean;
+} {
+  const headerBodies = [...sql.matchAll(migrationHeaderLinePattern)].map(
+    (match) => match[1]?.trim() ?? "",
+  );
+
   if (kind === "seed") {
-    return true;
+    if (headerBodies.length > 0) {
+      throw new Error(`${relativePath}: seed files do not support -- migration metadata headers.`);
+    }
+
+    return {
+      environmentScoped: false,
+      environments: [...allMigrationEnvironments],
+      transactional: true,
+    };
   }
 
-  const headerMatches = sql.match(/^-- migration: no-transaction$/gm) ?? [];
-  if (headerMatches.length > 1) {
-    throw new Error(
-      `Migration file contains duplicate ${noTransactionHeader} headers. Keep only one header.`,
-    );
+  let hasNoTransactionHeader = false;
+  let environments: MigrationEnvironment[] | null = null;
+
+  for (const headerBody of headerBodies) {
+    if (headerBody === "no-transaction") {
+      if (hasNoTransactionHeader) {
+        throw new Error(`${relativePath}: duplicate ${noTransactionHeader} header.`);
+      }
+      hasNoTransactionHeader = true;
+      continue;
+    }
+
+    if (headerBody.startsWith(environmentsHeaderPrefix)) {
+      if (kind !== "data") {
+        throw new Error(
+          `${relativePath}: schema migrations must not declare migration environments.`,
+        );
+      }
+      if (environments) {
+        throw new Error(`${relativePath}: duplicate -- migration: environments=... header.`);
+      }
+      environments = parseMigrationEnvironmentList(
+        headerBody.slice(environmentsHeaderPrefix.length),
+        relativePath,
+      );
+      continue;
+    }
+
+    throw new Error(`${relativePath}: unsupported -- migration metadata header "${headerBody}".`);
   }
 
-  const transactional = headerMatches.length === 0;
+  const transactional = !hasNoTransactionHeader;
   if (/\bCONCURRENTLY\b/i.test(sql) && transactional) {
     throw new Error(
-      `Migration file uses CONCURRENTLY but is missing the ${noTransactionHeader} header.`,
+      `${relativePath}: migration file uses CONCURRENTLY but is missing the ${noTransactionHeader} header.`,
     );
   }
 
-  return transactional;
+  return {
+    environmentScoped: environments !== null,
+    environments: environments ?? [...allMigrationEnvironments],
+    transactional,
+  };
 }
 
 function validateOrderedPrefixes(
@@ -353,6 +438,70 @@ function normalizeRelativePath(relativePath: string): string {
   return relativePath.split(path.sep).join("/");
 }
 
+function parseMigrationEnvironment(value: string): MigrationEnvironment {
+  const normalized = value.trim();
+  if (migrationEnvironments.includes(normalized as MigrationEnvironment)) {
+    return normalized as MigrationEnvironment;
+  }
+
+  throw new Error(
+    `Unsupported migration environment "${value}". Expected one of: ${migrationEnvironments.join(", ")}.`,
+  );
+}
+
+function parseMigrationEnvironmentList(
+  rawValue: string,
+  relativePath: string,
+): MigrationEnvironment[] {
+  const rawEntries = rawValue.split(",").map((entry) => entry.trim());
+  const environments = rawEntries.filter((entry) => entry.length > 0);
+  if (environments.length === 0 || environments.length !== rawEntries.length) {
+    throw new Error(
+      `${relativePath}: -- migration: environments=... requires a comma-separated non-empty environment list.`,
+    );
+  }
+
+  const seen = new Set<MigrationEnvironment>();
+  return environments.map((environment) => {
+    const parsed = parseMigrationEnvironment(environment);
+    if (seen.has(parsed)) {
+      throw new Error(`${relativePath}: duplicate migration environment "${parsed}".`);
+    }
+    seen.add(parsed);
+    return parsed;
+  });
+}
+
+function readEnvironmentArg(argv: string[]): string | undefined {
+  let parsedEnvironment: string | undefined;
+
+  for (let index = 0; index < argv.length; index += 1) {
+    const arg = argv[index];
+    let value: string | undefined;
+
+    if (arg === "--environment") {
+      if (argv[index + 1] === undefined) {
+        throw new Error("--environment requires a non-empty value.");
+      }
+      value = argv[index + 1];
+      index += 1;
+    } else if (arg?.startsWith("--environment=")) {
+      value = arg.slice("--environment=".length);
+    }
+
+    if (value === undefined) continue;
+    if (value.trim().length === 0) {
+      throw new Error("--environment requires a non-empty value.");
+    }
+    if (parsedEnvironment !== undefined) {
+      throw new Error("--environment may only be provided once.");
+    }
+    parsedEnvironment = value.trim();
+  }
+
+  return parsedEnvironment;
+}
+
 function isNodeErrorWithCode(error: unknown): error is NodeJS.ErrnoException {
   return error instanceof Error && "code" in error;
 }
diff --git a/apps/backend/tests/_infra/db/test-database.ts b/apps/backend/tests/_infra/db/test-database.ts
index c17557b53..f1a5f943d 100644
--- a/apps/backend/tests/_infra/db/test-database.ts
+++ b/apps/backend/tests/_infra/db/test-database.ts
@@ -9,16 +9,11 @@ export type ScenarioDatabaseHandle = {
   cleanup(): Promise<void>;
 };
 
-const quoteIdentifier = (identifier: string): string =>
-  `"${identifier.replace(/"/g, '""')}"`;
+const quoteIdentifier = (identifier: string): string => `"${identifier.replace(/"/g, '""')}"`;
 
-const buildTemporaryDatabaseName = (): string =>
-  `partnerup_scenario_${Date.now()}_${process.pid}`;
+const buildTemporaryDatabaseName = (): string => `partnerup_scenario_${Date.now()}_${process.pid}`;
 
-const buildDatabaseUrl = (
-  adminUrl: string,
-  databaseName: string,
-): string => {
+const buildDatabaseUrl = (adminUrl: string, databaseName: string): string => {
   const url = new URL(adminUrl);
   url.pathname = `/${databaseName}`;
   return url.toString();
@@ -74,9 +69,7 @@ export async function createScenarioDatabase(): Promise<ScenarioDatabaseHandle>
         `,
           [databaseName],
         );
-        await adminSql.unsafe(
-          `drop database if exists ${quoteIdentifier(databaseName)}`,
-        );
+        await adminSql.unsafe(`drop database if exists ${quoteIdentifier(databaseName)}`);
       } finally {
         await adminSql.end({ timeout: 5 });
       }
@@ -86,6 +79,7 @@ export async function createScenarioDatabase(): Promise<ScenarioDatabaseHandle>
 
 export function installScenarioDatabaseEnv(databaseUrl: string): string {
   process.env.DATABASE_URL = databaseUrl;
+  process.env.PARTNERUP_ENVIRONMENT = "staging";
   process.env.BACKEND_SCENARIO_DISABLE_BOOTSTRAP = "true";
   process.env.BACKEND_SCENARIO_DISABLE_REQUEST_TAIL = "true";
   process.env.BACKEND_SCENARIO_DISABLE_REQUEST_LOGGER = "true";
@@ -93,9 +87,7 @@ export function installScenarioDatabaseEnv(databaseUrl: string): string {
   return databaseUrl;
 }
 
-export async function resetAndMigrateTestDatabase(
-  connectionString: string,
-): Promise<void> {
+export async function resetAndMigrateTestDatabase(connectionString: string): Promise<void> {
   const sql = postgres(connectionString, {
     max: 1,
     idle_timeout: 5,
diff --git a/docs/20-product-tdd/test-platform.md b/docs/20-product-tdd/test-platform.md
index 2e998e411..b5bc32ce6 100644
--- a/docs/20-product-tdd/test-platform.md
+++ b/docs/20-product-tdd/test-platform.md
@@ -52,6 +52,9 @@ Playwright browser -> Vite frontend -> real backend HTTP -> isolated Postgres
 Scenario runtime ownership stays outside Vitest's assertion API:
 
 - scenario infra owns temporary database creation, migration, and cleanup
+- scenario infra explicitly runs database preparation with
+  `PARTNERUP_ENVIRONMENT=staging`; test fixtures must be created by scenario
+  setup code, not by development-only data migrations
 - system scenario infra owns backend server and Vite frontend server startup
 - Playwright helpers own browser context and page behavior
 - domain scenario kits own builders, actions, probes, and business language
diff --git a/docs/40-deployment/environments.md b/docs/40-deployment/environments.md
index c6df15e45..6eaab77aa 100644
--- a/docs/40-deployment/environments.md
+++ b/docs/40-deployment/environments.md
@@ -148,6 +148,13 @@ backend.
 - schema source of truth: Drizzle entities + committed SQL artifacts
 - forward-only schema/data migration model in staging and production
 - migration execution happens through a dedicated FC migration function inside the VPC
+- migration environment is controlled by `PARTNERUP_ENVIRONMENT`
+- the runner defaults to `production` if no explicit environment is provided
+- backend deploy maps `develop` to `staging` and `master` to `production`
+- schema migrations are environment-neutral; only data migrations may declare
+  `-- migration: environments=...`
+- local development-only data migrations use `pnpm db:migrate:dev` or
+  `pnpm db:reset:dev`
 
 ## Job Runner Trigger Environment
 
diff --git a/docs/40-deployment/rollout.md b/docs/40-deployment/rollout.md
index 1c98cb792..6f8cfb34e 100644
--- a/docs/40-deployment/rollout.md
+++ b/docs/40-deployment/rollout.md
@@ -55,7 +55,8 @@ install graph.
 3. lint backend migration/seed artifacts
 4. build FC migration bundle
 5. deploy FC migration function
-6. invoke migration function
+6. invoke migration function with `PARTNERUP_ENVIRONMENT` mapped from branch
+   (`develop` -> `staging`, `master` -> `production`)
 7. prepare or publish backend `node_modules` layer when needed
 8. resolve latest layer ARN
 9. build backend
@@ -69,6 +70,8 @@ install graph.
 ## Rollout Guarantees
 
 - migrations happen before backend deploy
+- backend migration environment is explicit in deploy and is not inferred by
+  the migration runner
 - backend deploys run serially through the `backend-fc-deploy` concurrency group
 - layer-only publish is supported via workflow dispatch input
 - runtime build metadata stays available even when the deployed package has no `.git` directory
diff --git a/package.json b/package.json
index dcd66102e..cede58d6e 100644
--- a/package.json
+++ b/package.json
@@ -65,7 +65,9 @@
     "db:lint": "pnpm --filter @partner-up-dev/backend db:lint",
     "db:check": "pnpm --filter @partner-up-dev/backend exec drizzle-kit check --config=drizzle.config.ts",
     "db:migrate": "pnpm --filter @partner-up-dev/backend db:migrate",
+    "db:migrate:dev": "pnpm --filter @partner-up-dev/backend db:migrate:dev",
     "db:reset": "pnpm --filter @partner-up-dev/backend db:reset",
+    "db:reset:dev": "pnpm --filter @partner-up-dev/backend db:reset:dev",
     "db:seed": "pnpm --filter @partner-up-dev/backend db:seed",
     "db:next-migration": "pnpm --filter @partner-up-dev/backend db:next-migration",
     "db:studio": "pnpm --filter @partner-up-dev/backend db:studio"
diff --git a/scripts/ci/fc/deploy_backend.sh b/scripts/ci/fc/deploy_backend.sh
index 5e55eba25..3e8833cbc 100644
--- a/scripts/ci/fc/deploy_backend.sh
+++ b/scripts/ci/fc/deploy_backend.sh
@@ -69,14 +69,14 @@ run_backend_migrations() {
   ci_fc_run pnpm --filter @partner-up-dev/backend build:db-migrate-fc
   ci_fc_run bash scripts/ci/fc/prepare_fc_db_migrate_package.sh
 
-  echo "+ DATABASE_URL=<redacted> s deploy -y -t apps/backend/fc-db-migrate/s.yaml"
+  echo "+ DATABASE_URL=<redacted> PARTNERUP_ENVIRONMENT=${PARTNERUP_ENVIRONMENT} s deploy -y -t apps/backend/fc-db-migrate/s.yaml"
   if ! ci_fc_dry_run; then
-    DATABASE_URL="$DATABASE_URL_FOR_MIGRATION" s deploy -y -t apps/backend/fc-db-migrate/s.yaml
+    DATABASE_URL="$DATABASE_URL_FOR_MIGRATION" PARTNERUP_ENVIRONMENT="$PARTNERUP_ENVIRONMENT" s deploy -y -t apps/backend/fc-db-migrate/s.yaml
   fi
 
-  echo '+ DATABASE_URL=<redacted> s invoke -t apps/backend/fc-db-migrate/s.yaml -e "{}"'
+  echo "+ DATABASE_URL=<redacted> PARTNERUP_ENVIRONMENT=${PARTNERUP_ENVIRONMENT} s invoke -t apps/backend/fc-db-migrate/s.yaml -e \"{}\""
   if ! ci_fc_dry_run; then
-    DATABASE_URL="$DATABASE_URL_FOR_MIGRATION" s invoke -t apps/backend/fc-db-migrate/s.yaml -e "{}"
+    DATABASE_URL="$DATABASE_URL_FOR_MIGRATION" PARTNERUP_ENVIRONMENT="$PARTNERUP_ENVIRONMENT" s invoke -t apps/backend/fc-db-migrate/s.yaml -e "{}"
   fi
 }
 
diff --git a/scripts/ci/fc/validate_backend_env.sh b/scripts/ci/fc/validate_backend_env.sh
index 1641c1bc7..4e5faf4de 100644
--- a/scripts/ci/fc/validate_backend_env.sh
+++ b/scripts/ci/fc/validate_backend_env.sh
@@ -48,6 +48,19 @@ require_if_set() {
   require_group "runtime" "$@"
 }
 
+require_partnerup_environment() {
+  require_group "migration runtime" PARTNERUP_ENVIRONMENT
+
+  case "${PARTNERUP_ENVIRONMENT:-}" in
+    production | staging | "")
+      ;;
+    *)
+      echo "PARTNERUP_ENVIRONMENT must be one of: production, staging." >&2
+      missing=1
+      ;;
+  esac
+}
+
 validate_deploy_base() {
   require_group "deploy credential" \
     ALIBABA_CLOUD_ACCESS_KEY_ID \
@@ -77,6 +90,8 @@ validate_migration() {
 
   require_group "migration runtime" \
     DATABASE_URL_FOR_MIGRATION
+
+  require_partnerup_environment
 }
 
 validate_runtime() {
diff --git a/tasks/ride-hailing-mvp/00-task-packet.md b/tasks/ride-hailing-mvp/00-task-packet.md
index f8d9ff618..d549543a9 100644
--- a/tasks/ride-hailing-mvp/00-task-packet.md
+++ b/tasks/ride-hailing-mvp/00-task-packet.md
@@ -88,14 +88,20 @@ Hypothesis:
 - Fake Caocao follows the same portless pattern as backend/frontend: the package
   `dev` script stays a normal server start, while the root
   `pnpm dev:portless:fake-caocao` script wraps it with app name `fake-caocao`.
+- Stable fake Caocao provider/catalog/offer/placement setup now belongs to a
+  development-only data migration. The task SQL only creates a fresh manual-test
+  PR after `pnpm db:migrate:dev`.
 - The temporary RideHailing Button Placement must match real PR type
   `RIDE_HAILING`. The earlier task-private `ride-hailing-mvp-dev` type was a
   seed mistake and has an append-only dev DB patch.
-- Latest dev seed SQL verification:
-  - `dev-ride-hailing-placement-type-patch.sql` rollback execution returned
-    the existing seeded placement with `matching_type = RIDE_HAILING`
-  - `dev-ride-hailing-ordering-seed.sql` rollback execution still succeeds
-    after changing its PR type constant to `RIDE_HAILING`
+- Latest dev data migration verification:
+  - environment-aware data migration parsing is covered by
+    `apps/backend/src/scripts/db/shared.test.ts`
+  - `pnpm db:lint`, backend type/config checks, and FC migration bundle build
+    pass after adding the development-only RideHailing fixture migration
+  - `pnpm db:migrate:dev` now loads `apps/backend/.env`, but live dev DB
+    execution is blocked in this workspace by
+    `CONNECT_TIMEOUT ws-win.hadream.localhost:5436`
 - Known concern areas from the request:
   - ordering page UI is below MVP standard
   - order detail page UI is below MVP standard
diff --git a/tasks/ride-hailing-mvp/dev-ride-hailing-ordering-seed.sql b/tasks/ride-hailing-mvp/dev-ride-hailing-ordering-seed.sql
index 66e0550fa..1ad16fe05 100644
--- a/tasks/ride-hailing-mvp/dev-ride-hailing-ordering-seed.sql
+++ b/tasks/ride-hailing-mvp/dev-ride-hailing-ordering-seed.sql
@@ -1,19 +1,19 @@
--- Temporary dev-only data seed for the RideHailing ordering page.
+-- Temporary dev-only PR seed for the RideHailing ordering page.
 --
 -- Purpose:
--- - create enough dev DB data to enter /order/new from a PR Page Button Placement
--- - keep the data tactical and outside formal migrations/seeds
+-- - create a fresh READY route PR to enter /order/new from a PR Page Button
+--   Placement
+-- - keep per-run manual UI test data out of ledgered data migrations
 --
 -- Expected local setup:
--- 1. Start fake Caocao through portless on the default endpoint used below:
+-- 1. Start fake Caocao through portless:
 --      pnpm dev:portless:fake-caocao
 -- 2. Start the app stack:
 --      pnpm dev:ensure
--- 3. Run this file against the dev DB.
--- 4. Open the PR URL printed by the final SELECT, then click the Placement CTA.
---
--- If your fake Caocao or backend callback base URL is different, edit the
--- constants at the top of the DO block before running.
+-- 3. Apply the stable development DB fixture:
+--      pnpm db:migrate:dev
+-- 4. Run this file against the dev DB.
+-- 5. Open the PR URL printed by the final SELECT, then click the Placement CTA.
 --
 -- Auth note:
 -- - The seeded user is bound to the default local WeChat mock openid
@@ -33,8 +33,6 @@ create temporary table if not exists ride_hailing_mvp_seed_result (
   offer_id bigint,
   placement_id bigint,
   provider_instance_id uuid,
-  fake_caocao_endpoint text,
-  backend_callback_base_url text,
   suggested_pr_path text
 ) on commit drop;
 
@@ -44,20 +42,65 @@ do $$
 declare
   default_viewer_user_id constant uuid := '00000000-0000-4000-8000-000000000231';
   mock_open_id constant text := 'dev-mock-openid';
-  fake_caocao_endpoint constant text := 'https://fake-caocao.localhost';
-  backend_callback_base_url constant text := 'https://api.partner-up.localhost';
   provider_instance_key constant text := 'dev-ride-hailing-mvp-caocao';
   pr_type constant text := 'RIDE_HAILING';
 
   v_viewer_user_id uuid;
   v_provider_instance_id uuid;
-  v_spu_id bigint;
-  v_express_sku_id bigint;
-  v_premier_sku_id bigint;
   v_offer_id bigint;
   v_placement_id bigint;
   v_pr_id bigint;
 begin
+  select id
+    into v_provider_instance_id
+    from ride_hailing_provider_instances
+   where provider_type = 'CAOCAO'
+     and instance_key = provider_instance_key
+     and status = 'ACTIVE'
+   order by created_at asc
+   limit 1;
+
+  if v_provider_instance_id is null then
+    raise exception
+      'RideHailing dev provider fixture not found. Run pnpm db:migrate:dev first.';
+  end if;
+
+  select offers.id
+    into v_offer_id
+    from offers
+   where offers.product_type = 'RIDE_HAILING'
+     and offers.status = 'ACTIVE'
+     and exists (
+       select 1
+         from product_spus
+        where product_spus.id = any(offers.spu_ids)
+          and product_spus.product_type = 'RIDE_HAILING'
+          and product_spus.name = '系统曹操出行'
+          and product_spus.status = 'ACTIVE'
+     )
+   order by offers.created_at desc
+   limit 1;
+
+  if v_offer_id is null then
+    raise exception
+      'RideHailing dev offer fixture not found. Run pnpm db:migrate:dev first.';
+  end if;
+
+  select placements.id
+    into v_placement_id
+    from placements
+   where placements.offer_id = v_offer_id
+     and placements.status = 'ACTIVE'
+     and placements.placement_type = 'BUTTON'
+     and placements.matching_rule::text like '%' || pr_type || '%'
+   order by placements.priority desc, placements.created_at desc
+   limit 1;
+
+  if v_placement_id is null then
+    raise exception
+      'RideHailing dev placement fixture not found. Run pnpm db:migrate:dev first.';
+  end if;
+
   select id
     into v_viewer_user_id
     from users
@@ -118,324 +161,6 @@ begin
   values (v_viewer_user_id)
   on conflict (user_id) do nothing;
 
-  select id
-    into v_provider_instance_id
-    from ride_hailing_provider_instances
-   where provider_type = 'CAOCAO'
-     and instance_key = provider_instance_key
-   order by created_at asc
-   limit 1;
-
-  if v_provider_instance_id is null then
-    insert into ride_hailing_provider_instances (
-      provider_type,
-      instance_key,
-      status,
-      display_name,
-      config,
-      created_at,
-      updated_at
-    )
-    values (
-      'CAOCAO',
-      provider_instance_key,
-      'ACTIVE',
-      '系统曹操',
-      jsonb_build_object(
-        'adapterMode', 'CAOCAO_OPEN_API',
-        'caocaoClientId', 'fake-caocao-client',
-        'signKey', 'fake-caocao-sign-key',
-        'endpointBaseUrl', fake_caocao_endpoint,
-        'callbackBaseUrl', backend_callback_base_url,
-        'requestTimeoutMs', 5000
-      ),
-      now(),
-      now()
-    )
-    returning id into v_provider_instance_id;
-  else
-    update ride_hailing_provider_instances
-       set status = 'ACTIVE',
-           display_name = '系统曹操',
-           config = jsonb_build_object(
-             'adapterMode', 'CAOCAO_OPEN_API',
-             'caocaoClientId', 'fake-caocao-client',
-             'signKey', 'fake-caocao-sign-key',
-             'endpointBaseUrl', fake_caocao_endpoint,
-             'callbackBaseUrl', backend_callback_base_url,
-             'requestTimeoutMs', 5000
-           ),
-           updated_at = now()
-     where id = v_provider_instance_id;
-  end if;
-
-  select id
-    into v_spu_id
-    from product_spus
-   where product_type = 'RIDE_HAILING'
-     and name = '系统曹操出行'
-   order by created_at asc
-   limit 1;
-
-  if v_spu_id is null then
-    insert into product_spus (
-      version,
-      status,
-      name,
-      product_type,
-      sales_policy,
-      service_policy,
-      presentation,
-      facts,
-      created_at,
-      updated_at
-    )
-    values (
-      1,
-      'ACTIVE',
-      '系统曹操出行',
-      'RIDE_HAILING',
-      '{"quantityPolicy":{"type":"FIXED","quantity":1},"skuSelectionPolicy":{"type":"EXACTLY_ONE"}}'::jsonb,
-      '{"type":"RIDE_HAILING"}'::jsonb,
-      '{"detailImageAssetIds":[],"heroImageAssetIds":[],"noticeBlocks":[],"parameterGroups":[],"sellingPoints":["曹操实时预估","行程结束后按实际费用结算"]}'::jsonb,
-      '{}'::jsonb,
-      now(),
-      now()
-    )
-    returning id into v_spu_id;
-  else
-    update product_spus
-       set version = 1,
-           status = 'ACTIVE',
-           sales_policy = '{"quantityPolicy":{"type":"FIXED","quantity":1},"skuSelectionPolicy":{"type":"EXACTLY_ONE"}}'::jsonb,
-           service_policy = '{"type":"RIDE_HAILING"}'::jsonb,
-           presentation = '{"detailImageAssetIds":[],"heroImageAssetIds":[],"noticeBlocks":[],"parameterGroups":[],"sellingPoints":["曹操实时预估","行程结束后按实际费用结算"]}'::jsonb,
-           facts = '{}'::jsonb,
-           updated_at = now()
-     where id = v_spu_id;
-  end if;
-
-  select id
-    into v_express_sku_id
-    from product_skus
-   where product_skus.spu_id = v_spu_id
-     and name = '快车'
-   order by created_at asc
-   limit 1;
-
-  if v_express_sku_id is null then
-    insert into product_skus (
-      spu_id,
-      version,
-      status,
-      name,
-      sort_order,
-      facts,
-      pricing_model,
-      created_at,
-      updated_at
-    )
-    values (
-      v_spu_id,
-      1,
-      'ACTIVE',
-      '快车',
-      10,
-      jsonb_build_object(
-        'rideHailingProviderInstanceId', v_provider_instance_id::text,
-        'providerVehicleTypeCode', 'EXPRESS'
-      ),
-      '{"type":"DYNAMIC_QUOTE","calculatorSpec":{"version":1,"currency":"CNY","components":[{"id":"caocao-provider-estimate","label":"曹操预估价","amount":{"type":"INPUT","path":"provider.estimateAmountFen"}}]}}'::jsonb,
-      now(),
-      now()
-    )
-    returning id into v_express_sku_id;
-  else
-    update product_skus
-       set version = 1,
-           status = 'ACTIVE',
-           sort_order = 10,
-           facts = jsonb_build_object(
-             'rideHailingProviderInstanceId', v_provider_instance_id::text,
-             'providerVehicleTypeCode', 'EXPRESS'
-           ),
-           pricing_model = '{"type":"DYNAMIC_QUOTE","calculatorSpec":{"version":1,"currency":"CNY","components":[{"id":"caocao-provider-estimate","label":"曹操预估价","amount":{"type":"INPUT","path":"provider.estimateAmountFen"}}]}}'::jsonb,
-           cancellation_policy_ref = null,
-           updated_at = now()
-     where id = v_express_sku_id;
-  end if;
-
-  select id
-    into v_premier_sku_id
-    from product_skus
-   where product_skus.spu_id = v_spu_id
-     and name = '专车'
-   order by created_at asc
-   limit 1;
-
-  if v_premier_sku_id is null then
-    insert into product_skus (
-      spu_id,
-      version,
-      status,
-      name,
-      sort_order,
-      facts,
-      pricing_model,
-      created_at,
-      updated_at
-    )
-    values (
-      v_spu_id,
-      1,
-      'ACTIVE',
-      '专车',
-      20,
-      jsonb_build_object(
-        'rideHailingProviderInstanceId', v_provider_instance_id::text,
-        'providerVehicleTypeCode', 'PREMIER'
-      ),
-      '{"type":"DYNAMIC_QUOTE","calculatorSpec":{"version":1,"currency":"CNY","components":[{"id":"caocao-provider-estimate","label":"曹操预估价","amount":{"type":"INPUT","path":"provider.estimateAmountFen"}}]}}'::jsonb,
-      now(),
-      now()
-    )
-    returning id into v_premier_sku_id;
-  else
-    update product_skus
-       set version = 1,
-           status = 'ACTIVE',
-           sort_order = 20,
-           facts = jsonb_build_object(
-             'rideHailingProviderInstanceId', v_provider_instance_id::text,
-             'providerVehicleTypeCode', 'PREMIER'
-           ),
-           pricing_model = '{"type":"DYNAMIC_QUOTE","calculatorSpec":{"version":1,"currency":"CNY","components":[{"id":"caocao-provider-estimate","label":"曹操预估价","amount":{"type":"INPUT","path":"provider.estimateAmountFen"}}]}}'::jsonb,
-           cancellation_policy_ref = null,
-           updated_at = now()
-     where id = v_premier_sku_id;
-  end if;
-
-  select id
-    into v_offer_id
-    from offers
-   where product_type = 'RIDE_HAILING'
-     and spu_ids = array[v_spu_id]::bigint[]
-   order by created_at desc
-   limit 1;
-
-  if v_offer_id is null then
-    insert into offers (
-      status,
-      product_type,
-      spu_ids,
-      pricing_policy,
-      terms_version,
-      starts_at,
-      ends_at,
-      created_at,
-      updated_at
-    )
-    values (
-      'ACTIVE',
-      'RIDE_HAILING',
-      array[v_spu_id]::bigint[],
-      '{"rules":[]}'::jsonb,
-      1,
-      null,
-      null,
-      now(),
-      now()
-    )
-    returning id into v_offer_id;
-  else
-    update offers
-       set status = 'ACTIVE',
-           product_type = 'RIDE_HAILING',
-           spu_ids = array[v_spu_id]::bigint[],
-           pricing_policy = '{"rules":[]}'::jsonb,
-           terms_version = 1,
-           starts_at = null,
-           ends_at = null,
-           updated_at = now()
-     where id = v_offer_id;
-  end if;
-
-  select id
-    into v_placement_id
-    from placements
-   where placements.offer_id = v_offer_id
-     and placement_type = 'BUTTON'
-     and matching_rule::text like '%' || pr_type || '%'
-   order by created_at desc
-   limit 1;
-
-  if v_placement_id is null then
-    insert into placements (
-      status,
-      placement_type,
-      offer_id,
-      matching_rule,
-      priority,
-      effective_from,
-      effective_to,
-      creative,
-      binding_rules,
-      created_at,
-      updated_at
-    )
-    values (
-      'ACTIVE',
-      'BUTTON',
-      v_offer_id,
-      jsonb_build_object(
-        'and',
-        jsonb_build_array(
-          jsonb_build_object('===', jsonb_build_array(jsonb_build_object('var', 'kind'), 'PR')),
-          jsonb_build_object('===', jsonb_build_array(jsonb_build_object('var', 'type'), pr_type)),
-          jsonb_build_object('===', jsonb_build_array(jsonb_build_object('var', 'status'), 'READY')),
-          jsonb_build_object('var', 'hasRoute'),
-          jsonb_build_object('var', 'time.hasConcreteTime')
-        )
-      ),
-      10000,
-      now() - interval '1 minute',
-      null,
-      '{"ctaLabel":"叫曹操","description":"按当前路线预估网约车费用"}'::jsonb,
-      '[{"fieldKey":"route","contextPath":"route","lock":true}]'::jsonb,
-      now(),
-      now()
-    )
-    returning id into v_placement_id;
-  else
-    update placements
-       set status = 'ACTIVE',
-           placement_type = 'BUTTON',
-           offer_id = v_offer_id,
-           matching_rule = jsonb_build_object(
-             'and',
-             jsonb_build_array(
-               jsonb_build_object('===', jsonb_build_array(jsonb_build_object('var', 'kind'), 'PR')),
-               jsonb_build_object('===', jsonb_build_array(jsonb_build_object('var', 'type'), pr_type)),
-               jsonb_build_object('===', jsonb_build_array(jsonb_build_object('var', 'status'), 'READY')),
-               jsonb_build_object('var', 'hasRoute'),
-               jsonb_build_object('var', 'time.hasConcreteTime')
-             )
-           ),
-           priority = 10000,
-           effective_from = now() - interval '1 minute',
-           effective_to = null,
-           creative = '{"ctaLabel":"叫曹操","description":"按当前路线预估网约车费用"}'::jsonb,
-           binding_rules = '[{"fieldKey":"route","contextPath":"route","lock":true}]'::jsonb,
-           updated_at = now()
-     where id = v_placement_id;
-  end if;
-
-  update placements
-     set status = 'ARCHIVED',
-         updated_at = now()
-   where id <> v_placement_id
-     and matching_rule::text like '%' || pr_type || '%';
-
   insert into partner_requests (
     title,
     type,
@@ -522,8 +247,6 @@ begin
     offer_id,
     placement_id,
     provider_instance_id,
-    fake_caocao_endpoint,
-    backend_callback_base_url,
     suggested_pr_path
   )
   values (
@@ -532,8 +255,6 @@ begin
     v_offer_id,
     v_placement_id,
     v_provider_instance_id,
-    fake_caocao_endpoint,
-    backend_callback_base_url,
     '/pr/' || v_pr_id::text
   );
 end $$;
diff --git a/tests/scenario/README.md b/tests/scenario/README.md
index f4eb3a464..27358dfd2 100644
--- a/tests/scenario/README.md
+++ b/tests/scenario/README.md
@@ -67,6 +67,10 @@ TEST_DATABASE_URL=postgresql://postgres:postgres@localhost:5432/partnerup_scenar
 `TEST_DATABASE_URL` resets the schema inside the named database and leaves the
 database in place.
 
+Scenario database preparation explicitly uses
+`PARTNERUP_ENVIRONMENT=staging`. Do not rely on development-only data
+migrations for scenario fixtures.
+
 Use headed browser mode for local diagnosis:
 
 ```bash

From 65e27d7867c6b9896f67315b0da4e67e0078c730 Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Fri, 19 Jun 2026 01:06:47 +0800
Subject: [PATCH 21/94] fix(dev): harden portless readiness checks

- probe registered portless URLs with route-specific readiness paths

- require successful 2xx/3xx responses so proxy 404s are not ready

- record backend portless 8443 diagnosis and remediation evidence
---
 scripts/ensure-dev-servers.mjs                | 39 ++++++++--
 .../00-task-packet.md                         | 74 +++++++++++++++++++
 2 files changed, 106 insertions(+), 7 deletions(-)
 create mode 100644 tasks/backend-portless-8443-diagnosis/00-task-packet.md

diff --git a/scripts/ensure-dev-servers.mjs b/scripts/ensure-dev-servers.mjs
index f6370a890..cb626c50b 100644
--- a/scripts/ensure-dev-servers.mjs
+++ b/scripts/ensure-dev-servers.mjs
@@ -21,6 +21,7 @@ const routes = [
       "dev",
     ],
     url: "https://partner-up.localhost",
+    readinessPath: "/",
   },
   {
     name: "backend",
@@ -35,6 +36,7 @@ const routes = [
       "dev",
     ],
     url: "https://api.partner-up.localhost",
+    readinessPath: "/health",
   },
 ];
 
@@ -115,9 +117,23 @@ const getPortlessListText = () => {
   return [result.stdout, result.stderr].filter(Boolean).join("\n");
 };
 
-const isRouteHttpReady = (route) =>
+const escapeRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+
+const getRegisteredRouteUrl = (routeListText, route) => {
+  const routeUrl = new URL(route.url);
+  const routeUrlPattern = new RegExp(
+    `https://${escapeRegExp(routeUrl.hostname)}(?::\\d+)?(?=\\s|$)`,
+  );
+  const match = routeListText.match(routeUrlPattern);
+
+  return match ? match[0] : null;
+};
+
+const isReadyStatus = (statusCode) => statusCode >= 200 && statusCode < 400;
+
+const isRouteHttpReady = (route, registeredUrl) =>
   new Promise((resolveReady) => {
-    const routeUrl = new URL(route.url);
+    const routeUrl = new URL(route.readinessPath, registeredUrl);
     const req = request(
       {
         headers: {
@@ -125,6 +141,7 @@ const isRouteHttpReady = (route) =>
         },
         host: "127.0.0.1",
         method: "HEAD",
+        path: `${routeUrl.pathname}${routeUrl.search}`,
         port: routeUrl.port === "" ? 443 : Number(routeUrl.port),
         rejectUnauthorized: false,
         servername: routeUrl.hostname,
@@ -132,7 +149,7 @@ const isRouteHttpReady = (route) =>
       },
       (res) => {
         res.resume();
-        resolveReady((res.statusCode ?? 599) < 500);
+        resolveReady(isReadyStatus(res.statusCode ?? 599));
       },
     );
 
@@ -149,11 +166,19 @@ const isRouteHttpReady = (route) =>
   });
 
 const getUnavailableRoutes = async (routeListText) => {
-  const unregisteredRoutes = routes.filter((route) => !routeListText.includes(route.url));
-  const registeredRoutes = routes.filter((route) => routeListText.includes(route.url));
+  const routeRegistrations = routes.map((route) => ({
+    registeredUrl: getRegisteredRouteUrl(routeListText, route),
+    route,
+  }));
+  const unregisteredRoutes = routeRegistrations
+    .filter((registration) => registration.registeredUrl === null)
+    .map((registration) => registration.route);
+  const registeredRoutes = routeRegistrations.filter(
+    (registration) => registration.registeredUrl !== null,
+  );
   const readinessChecks = await Promise.all(
-    registeredRoutes.map(async (route) => ({
-      ready: await isRouteHttpReady(route),
+    registeredRoutes.map(async ({ registeredUrl, route }) => ({
+      ready: await isRouteHttpReady(route, registeredUrl),
       route,
     })),
   );
diff --git a/tasks/backend-portless-8443-diagnosis/00-task-packet.md b/tasks/backend-portless-8443-diagnosis/00-task-packet.md
new file mode 100644
index 000000000..76bef9321
--- /dev/null
+++ b/tasks/backend-portless-8443-diagnosis/00-task-packet.md
@@ -0,0 +1,74 @@
+# Backend Portless 8443 Diagnosis
+
+## Objective & Hypothesis
+
+Diagnose why the backend portless development route appears on port `8443` instead of the expected HTTPS default port `443`.
+
+Initial hypothesis: portless owns the public HTTPS route while the backend process only listens on the injected `PORT`; `8443` may be a portless proxy/listener fallback caused by privileged-port binding, an existing listener on `443`, or tool-level configuration outside this repository.
+
+## Guardrails Touched
+
+- Input route: Reality
+- Active mode: Diagnose
+- Durable owners inspected: `docs/40-deployment/environments.md`, `docs/20-product-tdd/cross-unit-contracts.md`
+- Runtime owners inspected: `portless.json`, `scripts/portless.mjs`, `scripts/ensure-dev-servers.mjs`, `apps/backend/package.json`, `apps/backend/src/lib/env.ts`, `apps/backend/src/index.ts`
+
+## Verification
+
+- Repository contract:
+  - `scripts/ensure-dev-servers.mjs` probes `.localhost` routes through HTTPS on `127.0.0.1:443`.
+  - `docs/40-deployment/environments.md` says portless injects `PORTLESS_URL`, `HOST`, and `PORT`; backend reads `PORT`.
+- Tool/runtime evidence:
+  - `portless --version`: `0.13.0`.
+  - `portless list` currently returns `https://api.partner-up.localhost:8443 -> localhost:4430`.
+  - `portless get api.partner-up` returns `https://api.partner-up.localhost:8443`.
+  - Active proxy processes include:
+    - root-owned `portless proxy start --foreground --port 443 --https --lan --ip ... --skip-trust`
+    - user-owned `portless proxy start --foreground --port 8443 --https --skip-trust`
+  - Active listeners include `*:443`, `*:8443`, and backend child `*:4430`.
+  - `https://api.partner-up.localhost:8443/health` returns backend JSON.
+  - `http://127.0.0.1:4430/health` returns backend JSON.
+  - `https://api.partner-up.localhost/health` on default port `443` returns portless 404.
+  - `https://api.partner-up.local/health` on default port `443` returns backend JSON from the LAN-mode proxy.
+- Follow-up operation on 2026-06-18:
+  - `sudo -n kill -TERM 5967` failed because sudo requires a password.
+  - `portless proxy stop -p 443` detected the root-owned proxy and failed because sudo requires a terminal/password.
+  - A mistaken `portless proxy stop --help` invocation stopped the user-owned `8443` proxy because this CLI treats it as `proxy stop`.
+  - Restored the user-owned proxy with `portless proxy start -p 8443 --https --skip-trust`.
+  - Final verification: root `443` LAN proxy remains, user `8443` proxy is running, and `https://api.partner-up.localhost:8443/health` returns backend JSON.
+- Follow-up operation on 2026-06-19:
+  - Stopped the root-owned LAN proxy process on `443` with sudo.
+  - Stopped the user-owned `8443` proxy.
+  - Restarted the `443` proxy with explicit user state: `PORTLESS_STATE_DIR=/home/yyh/.portless`.
+  - Confirmed no `avahi-publish-address` partner-up `.local` processes remain.
+  - Confirmed active `.localhost` routes are now served without `:8443`.
+  - Confirmed `https://api.partner-up.localhost/health` returns HTTP `200`.
+  - Confirmed a missing `.localhost` host still returns portless HTTP `404`.
+  - Fixed `scripts/ensure-dev-servers.mjs` so readiness:
+    - parses the actual registered URL from `portless list`, including optional fallback ports
+    - probes frontend `/` and backend `/health`
+    - sends the path to `https.request`
+    - accepts only `2xx`/`3xx`, preventing portless route-miss `404` from passing
+  - Verification passed:
+    - `node --check scripts/ensure-dev-servers.mjs`
+    - `pnpm exec biome format --write scripts/ensure-dev-servers.mjs`
+    - `pnpm dev:ensure --timeout-seconds=30 --poll-interval-seconds=2`
+
+## Current Understanding
+
+- Root `dev:portless:backend` invokes `scripts/portless.mjs --name api.partner-up -- pnpm --filter @partner-up-dev/backend dev`.
+- `scripts/portless.mjs` delegates directly to the installed `portless` binary.
+- `apps/backend` dev script loads `.env`; `.env.example` documents `PORT` as a fixed-port fallback when not managed by portless.
+- Backend runtime listens on `env.PORT` and logs `http://localhost:${env.PORT}`.
+- `scripts/ensure-dev-servers.mjs` checks public portless readiness via HTTPS on `127.0.0.1:443` with `Host: api.partner-up.localhost`.
+- Current `443` is occupied by a LAN-mode `.local` portless proxy, not the current `.localhost` proxy.
+- Current `.localhost` portless proxy is on `8443`, so backend's public `.localhost` route includes `:8443`; the backend child itself listens on `4430`.
+
+## Confirmed Constraints
+
+- Do not modify code during diagnosis without evidence.
+- Do not expose local secrets from `.env`.
+
+## Next Step
+
+Likely cause is confirmed and remediated. Remaining code change is in `scripts/ensure-dev-servers.mjs`; it should prevent recurrence of the false-ready case where portless itself returns HTTP `404`.

From ece07b179a4cbec9ffc3cd349fbaed9c25645055 Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Fri, 19 Jun 2026 16:18:18 +0800
Subject: [PATCH 22/94] ref(payment): remove persisted PaymentTx

- move provider execution slot and settlement truth onto BillLine

- derive provider references in provider adapters and query provider state dynamically

- update checkout, callback, refund, frontend sync, docs, and provider-backed scenarios
---
 .../drizzle/0078_bill_line_payment_slot.sql   |  27 ++
 .../src/controllers/commerce.controller.ts    |  42 +-
 .../src/domains/payment/model/index.ts        |   2 +-
 .../{payment-tx.ts => provider-payment.ts}    |  30 +-
 .../services/bill-payment-state.test.ts       | 107 +----
 .../payment/services/bill-payment-state.ts    |  48 +-
 .../payment/services/payment-provider.test.ts | 200 ++++++++
 .../payment/services/payment-provider.ts      | 298 +++++++-----
 .../use-cases/create-refund-execution.ts      | 196 ++++++++
 .../use-cases/create-refund-payment-tx.ts     | 178 --------
 .../payment/use-cases/get-bill-detail.ts      |  51 +--
 .../src/domains/payment/use-cases/index.ts    |   2 +-
 .../payment/use-cases/payment-checkout.ts     | 427 +++++++++---------
 .../use-cases/payment-notifications.ts        | 196 +++++---
 .../payment-settlement-consequence.ts         |  21 +-
 .../apply-bill-settlement-to-order.ts         |   9 +-
 .../finalize-rental-order-termination.ts      |  11 +-
 .../trade/use-cases/rental-ordering-flow.ts   |  16 +-
 apps/backend/src/entities/bill.ts             |   9 +
 apps/backend/src/entities/payment.ts          |  67 ---
 .../src/repositories/BillLineRepository.ts    |  76 +++-
 .../src/repositories/PaymentTxRepository.ts   | 192 --------
 .../tests/_infra/vitest/global-setup.ts       |   1 +
 .../rental-order-persistence.scenario.test.ts |  37 +-
 .../payment-provider-ssot.scenario.test.ts    | 281 ++++++++++++
 .../domains/commerce/queries/useCommerce.ts   | 108 ++---
 .../src/pages/PaymentCheckoutPage.vue         |  42 +-
 apps/frontend/src/shared/api/query-keys.ts    |   4 +-
 docs/20-product-tdd/ecommerce-contracts.md    |  25 +-
 .../system-state-and-authority.md             |  16 +-
 .../00-task-packet.md                         | 153 +++++++
 .../10-implementation-plan.md                 | 389 ++++++++++++++++
 32 files changed, 2052 insertions(+), 1209 deletions(-)
 create mode 100644 apps/backend/drizzle/0078_bill_line_payment_slot.sql
 rename apps/backend/src/domains/payment/model/{payment-tx.ts => provider-payment.ts} (84%)
 create mode 100644 apps/backend/src/domains/payment/services/payment-provider.test.ts
 create mode 100644 apps/backend/src/domains/payment/use-cases/create-refund-execution.ts
 delete mode 100644 apps/backend/src/domains/payment/use-cases/create-refund-payment-tx.ts
 delete mode 100644 apps/backend/src/repositories/PaymentTxRepository.ts
 create mode 100644 apps/backend/tests/payment/payment-provider-ssot.scenario.test.ts
 create mode 100644 tasks/payment-provider-ssot-refactor/00-task-packet.md
 create mode 100644 tasks/payment-provider-ssot-refactor/10-implementation-plan.md

diff --git a/apps/backend/drizzle/0078_bill_line_payment_slot.sql b/apps/backend/drizzle/0078_bill_line_payment_slot.sql
new file mode 100644
index 000000000..7896e3ab6
--- /dev/null
+++ b/apps/backend/drizzle/0078_bill_line_payment_slot.sql
@@ -0,0 +1,27 @@
+alter table "bill_lines"
+  add column "payment_provider_instance_id" uuid
+    references "payment_provider_instances"("id") on delete restrict,
+  add column "attempt_count" integer not null default 0,
+  add column "settled_at" timestamptz;
+
+create index "bill_lines_payment_provider_instance_idx"
+  on "bill_lines" ("payment_provider_instance_id");
+
+update "bill_lines" as line
+set
+  "payment_provider_instance_id" = ranked."provider_instance_id",
+  "attempt_count" = 1,
+  "settled_at" = ranked."succeeded_at"
+from (
+  select distinct on (tx."bill_line_id")
+    tx."bill_line_id",
+    tx."provider_instance_id",
+    coalesce(tx."succeeded_at", tx."updated_at", tx."created_at") as "succeeded_at"
+  from "payment_txs" as tx
+  where tx."status" = 'SUCCEEDED'
+  order by tx."bill_line_id", tx."created_at" desc, tx."id" desc
+) as ranked
+where line."id" = ranked."bill_line_id"
+  and line."settled_at" is null;
+
+drop table "payment_txs";
diff --git a/apps/backend/src/controllers/commerce.controller.ts b/apps/backend/src/controllers/commerce.controller.ts
index e3095bba9..99be08a59 100644
--- a/apps/backend/src/controllers/commerce.controller.ts
+++ b/apps/backend/src/controllers/commerce.controller.ts
@@ -16,8 +16,7 @@ import {
   getBillDetail,
   getBillDetailByOrderId,
   getPaymentCheckout,
-  getPaymentTxDetail,
-  syncPaymentTx,
+  syncPaymentForBillLine,
 } from "../domains/payment";
 
 const app = new Hono<AuthEnv>();
@@ -34,10 +33,6 @@ const billLineIdParamSchema = z.object({
   billLineId: z.string().uuid(),
 });
 
-const paymentTxIdParamSchema = z.object({
-  paymentTxId: z.string().uuid(),
-});
-
 const CLIENT_ID_HEADER = "x-client-id";
 
 const registrantSchema = z.object({
@@ -213,16 +208,10 @@ type CommerceRouteSchema = {
       Awaited<ReturnType<typeof createOrReuseChargeForBillLine>>
     >;
   };
-  "/payments/:paymentTxId": {
-    $get: JsonEndpoint<
-      UuidParam<"paymentTxId">,
-      Awaited<ReturnType<typeof getPaymentTxDetail>>
-    >;
-  };
-  "/payments/:paymentTxId/sync": {
+  "/bill-lines/:billLineId/payment/sync": {
     $post: JsonEndpoint<
-      UuidParam<"paymentTxId"> & EmptyInput,
-      Awaited<ReturnType<typeof syncPaymentTx>>
+      UuidParam<"billLineId"> & EmptyInput,
+      Awaited<ReturnType<typeof syncPaymentForBillLine>>
     >;
   };
   "/orders/:orderId/cancel-rental": {
@@ -325,27 +314,14 @@ export const commerceRoute: Hono<AuthEnv, CommerceRouteSchema> = app
       return c.json(result);
     },
   )
-  .get(
-    "/payments/:paymentTxId",
-    zValidator("param", paymentTxIdParamSchema),
-    async (c) => {
-      const { paymentTxId } = c.req.valid("param");
-      const auth = c.get("auth");
-      const result = await getPaymentTxDetail({
-        paymentTxId,
-        viewerUserId: auth.userId,
-      });
-      return c.json(result);
-    },
-  )
   .post(
-    "/payments/:paymentTxId/sync",
-    zValidator("param", paymentTxIdParamSchema),
+    "/bill-lines/:billLineId/payment/sync",
+    zValidator("param", billLineIdParamSchema),
     async (c) => {
-      const { paymentTxId } = c.req.valid("param");
+      const { billLineId } = c.req.valid("param");
       const auth = c.get("auth");
-      const result = await syncPaymentTx({
-        paymentTxId,
+      const result = await syncPaymentForBillLine({
+        billLineId,
         viewerUserId: auth.userId,
       });
       return c.json(result);
diff --git a/apps/backend/src/domains/payment/model/index.ts b/apps/backend/src/domains/payment/model/index.ts
index fe016e428..eaeacabc5 100644
--- a/apps/backend/src/domains/payment/model/index.ts
+++ b/apps/backend/src/domains/payment/model/index.ts
@@ -1 +1 @@
-export * from "./payment-tx";
+export * from "./provider-payment";
diff --git a/apps/backend/src/domains/payment/model/payment-tx.ts b/apps/backend/src/domains/payment/model/provider-payment.ts
similarity index 84%
rename from apps/backend/src/domains/payment/model/payment-tx.ts
rename to apps/backend/src/domains/payment/model/provider-payment.ts
index 3d8989f37..d873fc3b3 100644
--- a/apps/backend/src/domains/payment/model/payment-tx.ts
+++ b/apps/backend/src/domains/payment/model/provider-payment.ts
@@ -1,15 +1,5 @@
 export type PaymentProviderType = "WECHAT_PAY";
 
-export type PaymentTxType = "CHARGE" | "REFUND";
-
-export type PaymentTxStatus =
-  | "INITIATED"
-  | "ACTION_REQUIRED"
-  | "PROCESSING"
-  | "SUCCEEDED"
-  | "FAILED"
-  | "CLOSED";
-
 export type PaymentProviderInstanceStatus = "ACTIVE" | "DISABLED";
 
 export type WeChatPayChargeMode = "JSAPI" | "H5";
@@ -53,11 +43,7 @@ export type PaymentClientAction =
       url: string;
     };
 
-export type NormalizedPaymentStatus =
-  | "PENDING"
-  | "SUCCEEDED"
-  | "FAILED"
-  | "CLOSED";
+export type NormalizedPaymentStatus = "PENDING" | "SUCCEEDED" | "FAILED" | "CLOSED";
 
 export type NormalizedChargeStatus = {
   status: NormalizedPaymentStatus;
@@ -120,6 +106,17 @@ export type QueryRefundInput = {
   merchantRefundNo: string;
 };
 
+export type ProviderPaymentReferenceKind = "CHARGE" | "REFUND";
+
+export type ProviderPaymentReferenceInput = {
+  providerInstanceId: string;
+  billLineId: string;
+  kind: ProviderPaymentReferenceKind;
+  attemptCount: number;
+};
+
+export type ParsedProviderPaymentReference = ProviderPaymentReferenceInput;
+
 export type RawProviderNotification = {
   headers: {
     timestamp: string;
@@ -131,6 +128,9 @@ export type RawProviderNotification = {
 };
 
 export type PaymentProviderPort = {
+  deriveChargeMerchantOrderNo(input: ProviderPaymentReferenceInput): string;
+  deriveRefundMerchantRefundNo(input: ProviderPaymentReferenceInput): string;
+  parseMerchantPaymentReference(input: string): ParsedProviderPaymentReference;
   createChargePrepay(input: CreateChargePrepayInput): Promise<ChargePrepayResult>;
   queryCharge(input: QueryChargeInput): Promise<NormalizedChargeStatus>;
   createRefund(input: CreateRefundInput): Promise<CreateRefundResult>;
diff --git a/apps/backend/src/domains/payment/services/bill-payment-state.test.ts b/apps/backend/src/domains/payment/services/bill-payment-state.test.ts
index 2beca51ea..3ea827213 100644
--- a/apps/backend/src/domains/payment/services/bill-payment-state.test.ts
+++ b/apps/backend/src/domains/payment/services/bill-payment-state.test.ts
@@ -1,10 +1,6 @@
 import { describe, expect, it } from "vitest";
 import type { BillId, BillLine, BillLineId } from "../../../entities/bill";
-import type {
-  PaymentProviderInstanceId,
-  PaymentTx,
-  PaymentTxId,
-} from "../../../entities/payment";
+import type { PaymentProviderInstanceId } from "../../../entities/payment";
 import type { UserId } from "../../../entities/user";
 import { deriveBillPaymentState } from "./bill-payment-state";
 
@@ -21,6 +17,9 @@ const billLine = (input: {
   kind: BillLine["kind"];
   amountFen: number;
   refundOfBillLineId?: BillLineId | null;
+  paymentProviderInstanceId?: PaymentProviderInstanceId | null;
+  attemptCount?: number;
+  settledAt?: Date | null;
 }): BillLine => ({
   id: input.id as BillLineId,
   billId,
@@ -31,49 +30,22 @@ const billLine = (input: {
   label: input.kind,
   description: null,
   refundOfBillLineId: input.refundOfBillLineId ?? null,
+  paymentProviderInstanceId: input.paymentProviderInstanceId ?? null,
+  attemptCount: input.attemptCount ?? 0,
+  settledAt: input.settledAt ?? null,
   createdAt: now,
 });
 
-const paymentTx = (input: {
-  id: string;
-  billLineId: BillLineId;
-  type: PaymentTx["type"];
-  status: PaymentTx["status"];
-  amountFen: number;
-}): PaymentTx => ({
-  id: input.id as PaymentTxId,
-  billLineId: input.billLineId,
-  type: input.type,
-  providerInstanceId,
-  clientId: "web",
-  status: input.status,
-  amountFen: input.amountFen,
-  currency: "CNY",
-  requestedBy: userA,
-  merchantOrderNo: input.type === "CHARGE" ? `order-${input.id}` : null,
-  merchantRefundNo: input.type === "REFUND" ? `refund-${input.id}` : null,
-  providerPrepayId: null,
-  providerTransactionId: null,
-  providerRefundId: null,
-  providerStatus: null,
-  clientAction: null,
-  providerSnapshot: null,
-  failureCode: null,
-  failureMessage: null,
-  expiresAt: null,
-  succeededAt: input.status === "SUCCEEDED" ? now : null,
-  closedAt: input.status === "CLOSED" ? now : null,
-  createdAt: now,
-  updatedAt: now,
-});
-
 describe("deriveBillPaymentState", () => {
-  it("derives partial settlement from successful charge PaymentTx rows", () => {
+  it("derives partial settlement from settled charge BillLines", () => {
     const creatorLine = billLine({
       id: "00000000-0000-0000-0000-000000000201",
       userId: userA,
       kind: "CHARGE",
       amountFen: 1000,
+      settledAt: now,
+      paymentProviderInstanceId: providerInstanceId,
+      attemptCount: 1,
     });
     const joinerLine = billLine({
       id: "00000000-0000-0000-0000-000000000202",
@@ -84,15 +56,6 @@ describe("deriveBillPaymentState", () => {
 
     const result = deriveBillPaymentState({
       lines: [creatorLine, joinerLine],
-      txs: [
-        paymentTx({
-          id: "00000000-0000-0000-0000-000000000301",
-          billLineId: creatorLine.id,
-          type: "CHARGE",
-          status: "SUCCEEDED",
-          amountFen: 1000,
-        }),
-      ],
     });
 
     expect(result.chargeTotalFen).toBe(2000);
@@ -101,12 +64,15 @@ describe("deriveBillPaymentState", () => {
     expect(result.lines.map((line) => line.status)).toEqual(["PAID", "UNPAID"]);
   });
 
-  it("derives refunded state from refund PaymentTx rows on refund BillLines", () => {
+  it("derives refunded state from settled refund BillLines", () => {
     const chargeLine = billLine({
       id: "00000000-0000-0000-0000-000000000211",
       userId: userA,
       kind: "CHARGE",
       amountFen: 1000,
+      settledAt: now,
+      paymentProviderInstanceId: providerInstanceId,
+      attemptCount: 1,
     });
     const refundLine = billLine({
       id: "00000000-0000-0000-0000-000000000212",
@@ -114,26 +80,13 @@ describe("deriveBillPaymentState", () => {
       kind: "REFUND",
       amountFen: 1000,
       refundOfBillLineId: chargeLine.id,
+      settledAt: now,
+      paymentProviderInstanceId: providerInstanceId,
+      attemptCount: 1,
     });
 
     const result = deriveBillPaymentState({
       lines: [chargeLine, refundLine],
-      txs: [
-        paymentTx({
-          id: "00000000-0000-0000-0000-000000000311",
-          billLineId: chargeLine.id,
-          type: "CHARGE",
-          status: "SUCCEEDED",
-          amountFen: 1000,
-        }),
-        paymentTx({
-          id: "00000000-0000-0000-0000-000000000312",
-          billLineId: refundLine.id,
-          type: "REFUND",
-          status: "SUCCEEDED",
-          amountFen: 1000,
-        }),
-      ],
     });
 
     expect(result.refundTotalFen).toBe(1000);
@@ -143,12 +96,14 @@ describe("deriveBillPaymentState", () => {
     );
   });
 
-  it("marks active charge and refund PaymentTx rows as pending", () => {
+  it("marks active charge and refund provider bindings as pending", () => {
     const chargeLine = billLine({
       id: "00000000-0000-0000-0000-000000000221",
       userId: userA,
       kind: "CHARGE",
       amountFen: 1000,
+      paymentProviderInstanceId: providerInstanceId,
+      attemptCount: 1,
     });
     const refundLine = billLine({
       id: "00000000-0000-0000-0000-000000000222",
@@ -156,31 +111,17 @@ describe("deriveBillPaymentState", () => {
       kind: "REFUND",
       amountFen: 500,
       refundOfBillLineId: chargeLine.id,
+      paymentProviderInstanceId: providerInstanceId,
+      attemptCount: 1,
     });
 
     const result = deriveBillPaymentState({
       lines: [chargeLine, refundLine],
-      txs: [
-        paymentTx({
-          id: "00000000-0000-0000-0000-000000000321",
-          billLineId: chargeLine.id,
-          type: "CHARGE",
-          status: "ACTION_REQUIRED",
-          amountFen: 1000,
-        }),
-        paymentTx({
-          id: "00000000-0000-0000-0000-000000000322",
-          billLineId: refundLine.id,
-          type: "REFUND",
-          status: "PROCESSING",
-          amountFen: 500,
-        }),
-      ],
     });
 
     expect(result.hasPendingPayment).toBe(true);
     expect(result.lines.map((line) => line.status)).toEqual([
-      "ACTION_REQUIRED",
+      "PROCESSING",
       "REFUND_PENDING",
     ]);
   });
diff --git a/apps/backend/src/domains/payment/services/bill-payment-state.ts b/apps/backend/src/domains/payment/services/bill-payment-state.ts
index 301cc4ab3..427549b16 100644
--- a/apps/backend/src/domains/payment/services/bill-payment-state.ts
+++ b/apps/backend/src/domains/payment/services/bill-payment-state.ts
@@ -1,5 +1,4 @@
 import type { BillLine, BillLineId } from "../../../entities/bill";
-import type { PaymentTx } from "../../../entities/payment";
 
 export type BillLineSettlementStatus =
   | "UNPAID"
@@ -15,8 +14,6 @@ export type BillLinePaymentProjection = {
   status: BillLineSettlementStatus;
   paidFen: number;
   refundableFen: number;
-  latestPaymentTxId: string | null;
-  activePaymentTxId: string | null;
 };
 
 export type BillPaymentState = {
@@ -29,67 +26,42 @@ export type BillPaymentState = {
   lines: BillLinePaymentProjection[];
 };
 
-const activeStatuses = new Set(["INITIATED", "ACTION_REQUIRED", "PROCESSING"]);
-
-const toLinePaymentProjection = (
-  line: BillLine,
-  txs: PaymentTx[],
-): BillLinePaymentProjection => {
-  const lineTxs = txs.filter((tx) => tx.billLineId === line.id);
-  const successful = lineTxs.filter((tx) => tx.status === "SUCCEEDED");
-  const active = lineTxs.find((tx) => activeStatuses.has(tx.status)) ?? null;
-  const latest = lineTxs[0] ?? null;
-  const paidFen = successful
-    .filter((tx) => tx.type === "CHARGE")
-    .reduce((sum, tx) => sum + tx.amountFen, 0);
-  const refundedFen = successful
-    .filter((tx) => tx.type === "REFUND")
-    .reduce((sum, tx) => sum + tx.amountFen, 0);
-
+const toLinePaymentProjection = (line: BillLine): BillLinePaymentProjection => {
   if (line.kind === "REFUND") {
+    const refundedFen = line.settledAt ? line.amountFen : 0;
     return {
       billLineId: line.id,
       status:
-        refundedFen >= line.amountFen
+        line.settledAt
           ? "REFUNDED"
-          : active
+          : line.paymentProviderInstanceId
             ? "REFUND_PENDING"
             : "UNPAID",
       paidFen: 0,
       refundableFen: refundedFen,
-      latestPaymentTxId: latest?.id ?? null,
-      activePaymentTxId: active?.id ?? null,
     };
   }
 
+  const paidFen = line.settledAt ? line.amountFen : 0;
   const status: BillLineSettlementStatus =
-    paidFen >= line.amountFen
+    line.settledAt
       ? "PAID"
-      : active
-        ? active.status === "ACTION_REQUIRED"
-          ? "ACTION_REQUIRED"
-          : "PROCESSING"
-        : latest?.status === "FAILED" || latest?.status === "CLOSED"
-          ? "FAILED"
-          : "UNPAID";
+      : line.paymentProviderInstanceId
+        ? "PROCESSING"
+        : "UNPAID";
 
   return {
     billLineId: line.id,
     status,
     paidFen,
     refundableFen: 0,
-    latestPaymentTxId: latest?.id ?? null,
-    activePaymentTxId: active?.id ?? null,
   };
 };
 
 export function deriveBillPaymentState(input: {
   lines: BillLine[];
-  txs: PaymentTx[];
 }): BillPaymentState {
-  const projections = input.lines.map((line) =>
-    toLinePaymentProjection(line, input.txs),
-  );
+  const projections = input.lines.map((line) => toLinePaymentProjection(line));
   const projectionByLineId = new Map(
     projections.map((projection) => [projection.billLineId, projection]),
   );
diff --git a/apps/backend/src/domains/payment/services/payment-provider.test.ts b/apps/backend/src/domains/payment/services/payment-provider.test.ts
new file mode 100644
index 000000000..05d292aac
--- /dev/null
+++ b/apps/backend/src/domains/payment/services/payment-provider.test.ts
@@ -0,0 +1,200 @@
+import { generateKeyPairSync } from "node:crypto";
+import { beforeAll, describe, expect, it } from "vitest";
+import type { PaymentProviderInstance, PaymentProviderInstanceId } from "../../../entities/payment";
+import type { PaymentProviderPort } from "../model";
+
+process.env.DATABASE_URL ??= "postgresql://localhost:5432/partnerup_test";
+process.env.PAYMENT_NOTIFY_BASE_URL ??= "http://localhost:3000";
+
+const providerInstanceId = "00000000-0000-4000-8000-000000000010" as PaymentProviderInstanceId;
+const otherProviderInstanceId = "00000000-0000-4000-8000-000000000011" as PaymentProviderInstanceId;
+const billLineId = "00000000-0000-4000-8000-000000000201";
+let createPaymentProviderPort:
+  | typeof import("./payment-provider").createPaymentProviderPort
+  | null = null;
+
+const generateRsaPemPair = (): {
+  privateKeyPem: string;
+  publicKeyPem: string;
+} => {
+  const { privateKey, publicKey } = generateKeyPairSync("rsa", {
+    modulusLength: 2048,
+    privateKeyEncoding: {
+      format: "pem",
+      type: "pkcs8",
+    },
+    publicKeyEncoding: {
+      format: "pem",
+      type: "spki",
+    },
+  });
+
+  return {
+    privateKeyPem: privateKey,
+    publicKeyPem: publicKey,
+  };
+};
+
+const buildProviderInstance = (
+  id: PaymentProviderInstanceId = providerInstanceId,
+): PaymentProviderInstance => {
+  const merchant = generateRsaPemPair();
+  const platform = generateRsaPemPair();
+  const now = new Date("2031-01-01T00:00:00.000Z");
+
+  return {
+    id,
+    providerType: "WECHAT_PAY",
+    instanceKey: `wechat-${id}`,
+    status: "ACTIVE",
+    displayName: "Unit WeChatPay",
+    clientId: "unit-wechatpay",
+    config: {
+      adapterMode: "WECHAT_PAY_API_V3",
+      appId: "wx-unit",
+      mchId: "1900000001",
+      chargeMode: "H5",
+      endpointBaseUrl: null,
+      apiV3Key: "0123456789abcdef0123456789abcdef",
+      merchantCertificate: {
+        serialNo: "merchant-serial",
+        privateKeyPem: merchant.privateKeyPem,
+        certificatePem: merchant.publicKeyPem,
+      },
+      platformCertificates: [
+        {
+          serialNo: "platform-serial",
+          certificatePem: platform.publicKeyPem,
+        },
+      ],
+    },
+    createdAt: now,
+    updatedAt: now,
+  };
+};
+
+beforeAll(async () => {
+  const paymentProviderModule = await import("./payment-provider");
+  createPaymentProviderPort = paymentProviderModule.createPaymentProviderPort;
+}, 30_000);
+
+const createUnitPaymentProviderPort = (
+  providerInstance: PaymentProviderInstance = buildProviderInstance(),
+): PaymentProviderPort => {
+  if (!createPaymentProviderPort) {
+    throw new Error("Payment provider module was not loaded");
+  }
+  return createPaymentProviderPort({ providerInstance });
+};
+
+describe("WeChatPay merchant payment references", () => {
+  it("round-trips charge reference material without persisted merchant order state", () => {
+    const port = createUnitPaymentProviderPort();
+
+    const merchantOrderNo = port.deriveChargeMerchantOrderNo({
+      providerInstanceId,
+      billLineId,
+      kind: "CHARGE",
+      attemptCount: 1,
+    });
+    const parsed = port.parseMerchantPaymentReference(merchantOrderNo);
+
+    expect(merchantOrderNo).toHaveLength(32);
+    expect(parsed).toEqual({
+      providerInstanceId,
+      billLineId,
+      kind: "CHARGE",
+      attemptCount: 1,
+    });
+  });
+
+  it("round-trips refund reference material separately from charge references", () => {
+    const port = createUnitPaymentProviderPort();
+
+    const merchantRefundNo = port.deriveRefundMerchantRefundNo({
+      providerInstanceId,
+      billLineId,
+      kind: "REFUND",
+      attemptCount: 42,
+    });
+    const parsed = port.parseMerchantPaymentReference(merchantRefundNo);
+
+    expect(merchantRefundNo).toHaveLength(32);
+    expect(parsed).toEqual({
+      providerInstanceId,
+      billLineId,
+      kind: "REFUND",
+      attemptCount: 42,
+    });
+  });
+
+  it("rejects tampered references", () => {
+    const port = createUnitPaymentProviderPort();
+    const merchantOrderNo = port.deriveChargeMerchantOrderNo({
+      providerInstanceId,
+      billLineId,
+      kind: "CHARGE",
+      attemptCount: 1,
+    });
+    const tampered = `${merchantOrderNo.slice(0, -1)}${merchantOrderNo.endsWith("A") ? "B" : "A"}`;
+
+    expect(() => port.parseMerchantPaymentReference(tampered)).toThrow(
+      "Invalid WeChatPay merchant reference signature",
+    );
+  });
+
+  it("rejects references derived for another provider instance", () => {
+    const port = createUnitPaymentProviderPort();
+
+    expect(() =>
+      port.deriveChargeMerchantOrderNo({
+        providerInstanceId: otherProviderInstanceId,
+        billLineId,
+        kind: "CHARGE",
+        attemptCount: 1,
+      }),
+    ).toThrow("provider instance mismatch");
+  });
+
+  it("rejects mismatched charge and refund reference kinds", () => {
+    const port = createUnitPaymentProviderPort();
+
+    expect(() =>
+      port.deriveChargeMerchantOrderNo({
+        providerInstanceId,
+        billLineId,
+        kind: "REFUND",
+        attemptCount: 1,
+      }),
+    ).toThrow("requires charge kind");
+    expect(() =>
+      port.deriveRefundMerchantRefundNo({
+        providerInstanceId,
+        billLineId,
+        kind: "CHARGE",
+        attemptCount: 1,
+      }),
+    ).toThrow("requires refund kind");
+  });
+
+  it("rejects attempt counts outside the reference encoding range", () => {
+    const port = createUnitPaymentProviderPort();
+
+    expect(() =>
+      port.deriveChargeMerchantOrderNo({
+        providerInstanceId,
+        billLineId,
+        kind: "CHARGE",
+        attemptCount: 0,
+      }),
+    ).toThrow("attempt count");
+    expect(() =>
+      port.deriveChargeMerchantOrderNo({
+        providerInstanceId,
+        billLineId,
+        kind: "CHARGE",
+        attemptCount: 36 ** 3,
+      }),
+    ).toThrow("attempt count");
+  });
+});
diff --git a/apps/backend/src/domains/payment/services/payment-provider.ts b/apps/backend/src/domains/payment/services/payment-provider.ts
index 43ec69d26..b3af13698 100644
--- a/apps/backend/src/domains/payment/services/payment-provider.ts
+++ b/apps/backend/src/domains/payment/services/payment-provider.ts
@@ -1,11 +1,9 @@
-import { type KeyObject } from "node:crypto";
+import { createHmac, type KeyObject } from "node:crypto";
 import { Aes, Formatter, Rsa, Wechatpay } from "wechatpay-axios-plugin";
-import {
-  ProblemDetailsError,
-  throwHttpProblem,
-} from "../../../lib/problem-details";
-import { env } from "../../../lib/env";
 import type { PaymentProviderInstance } from "../../../entities/payment";
+import { env } from "../../../lib/env";
+import { ProblemDetailsError, throwHttpProblem } from "../../../lib/problem-details";
+import { PaymentProviderInstanceRepository } from "../../../repositories/PaymentProviderInstanceRepository";
 import type {
   ChargePrepayResult,
   CreateChargePrepayInput,
@@ -14,15 +12,17 @@ import type {
   NormalizedChargeStatus,
   NormalizedPaymentStatus,
   NormalizedRefundStatus,
+  ParsedProviderPaymentReference,
   PaymentClientAction,
   PaymentProviderPort,
+  ProviderPaymentReferenceInput,
+  ProviderPaymentReferenceKind,
   QueryChargeInput,
   QueryRefundInput,
   RawProviderNotification,
   WeChatPayPlatformCertificate,
   WeChatPayProviderInstanceConfig,
 } from "../model";
-import { PaymentProviderInstanceRepository } from "../../../repositories/PaymentProviderInstanceRepository";
 import { normalizeAndValidateWeChatPayProviderConfig } from "./wechatpay-config-validation";
 
 const providerInstanceRepo = new PaymentProviderInstanceRepository();
@@ -38,44 +38,67 @@ const parseJsonRecord = (text: string): Record<string, unknown> => {
   return value;
 };
 
-const readRecordField = (
-  value: unknown,
-  key: string,
-): Record<string, unknown> => {
+const readRecordField = (value: unknown, key: string): Record<string, unknown> => {
   if (isRecord(value) && isRecord(value[key])) {
     return value[key];
   }
   throw new Error(`Expected object field ${key}`);
 };
 
-const readRequiredStringField = (
-  value: unknown,
-  key: string,
-): string => {
-  if (
-    isRecord(value) &&
-    typeof value[key] === "string" &&
-    value[key].length > 0
-  ) {
+const readRequiredStringField = (value: unknown, key: string): string => {
+  if (isRecord(value) && typeof value[key] === "string" && value[key].length > 0) {
     return value[key];
   }
 
   throw new Error(`Expected string field ${key}`);
 };
 
-const readOptionalStringField = (
-  value: unknown,
-  key: string,
-): string | null => {
+const readOptionalStringField = (value: unknown, key: string): string | null => {
   if (!isRecord(value)) return null;
   const field = value[key];
   return typeof field === "string" && field.length > 0 ? field : null;
 };
 
+const readHttpStatus = (error: unknown): number | null => {
+  if (!isRecord(error) || !isRecord(error.response)) return null;
+  const status = error.response.status;
+  return typeof status === "number" ? status : null;
+};
+
+const uuidPattern = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+const maxMerchantReferenceAttemptCount = 36 ** 3 - 1;
+
+const encodeUuidBase64Url = (uuid: string): string => {
+  if (!uuidPattern.test(uuid)) {
+    throw new Error("Invalid UUID for WeChatPay merchant reference");
+  }
+  return Buffer.from(uuid.replaceAll("-", ""), "hex").toString("base64url");
+};
+
+const decodeUuidBase64Url = (encoded: string): string => {
+  const bytes = Buffer.from(encoded, "base64url");
+  if (bytes.length !== 16) {
+    throw new Error("Invalid encoded UUID for WeChatPay merchant reference");
+  }
+  const hex = bytes.toString("hex");
+  return [
+    hex.slice(0, 8),
+    hex.slice(8, 12),
+    hex.slice(12, 16),
+    hex.slice(16, 20),
+    hex.slice(20),
+  ].join("-");
+};
+
+const parseWeChatPayReferenceKind = (prefix: string): ProviderPaymentReferenceKind => {
+  if (prefix === "PC") return "CHARGE";
+  if (prefix === "PR") return "REFUND";
+  throw new Error("Invalid WeChatPay merchant reference kind");
+};
+
 const isWeChatPayApiV3Config = (
   config: PaymentProviderInstance["config"],
-): config is WeChatPayProviderInstanceConfig =>
-  config.adapterMode === "WECHAT_PAY_API_V3";
+): config is WeChatPayProviderInstanceConfig => config.adapterMode === "WECHAT_PAY_API_V3";
 
 const resolvePaymentNotifyBaseUrl = (): string => {
   if (!env.PAYMENT_NOTIFY_BASE_URL) {
@@ -105,18 +128,14 @@ export const resolveWeChatPayRefundNotifyUrl = (
   ).toString();
 };
 
-const mapWeChatPayTradeState = (
-  state: string | undefined,
-): NormalizedPaymentStatus => {
+const mapWeChatPayTradeState = (state: string | undefined): NormalizedPaymentStatus => {
   if (state === "SUCCESS") return "SUCCEEDED";
   if (state === "CLOSED" || state === "REVOKED") return "CLOSED";
   if (state === "PAYERROR") return "FAILED";
   return "PENDING";
 };
 
-const mapWeChatPayRefundState = (
-  state: string | undefined,
-): NormalizedPaymentStatus => {
+const mapWeChatPayRefundState = (state: string | undefined): NormalizedPaymentStatus => {
   if (state === "SUCCESS") return "SUCCEEDED";
   if (state === "CLOSED") return "CLOSED";
   if (state === "ABNORMAL") return "FAILED";
@@ -140,10 +159,7 @@ const buildPlatformCertificateMap = (
   }
 
   return Object.fromEntries(
-    certificates.map((certificate) => [
-      certificate.serialNo,
-      certificate.certificatePem,
-    ]),
+    certificates.map((certificate) => [certificate.serialNo, certificate.certificatePem]),
   );
 };
 
@@ -151,8 +167,7 @@ const findPlatformCertificatePem = (
   certificates: WeChatPayPlatformCertificate[] | null | undefined,
   serial: string,
 ): string | null =>
-  certificates?.find((certificate) => certificate.serialNo === serial)
-    ?.certificatePem ?? null;
+  certificates?.find((certificate) => certificate.serialNo === serial)?.certificatePem ?? null;
 
 const buildWeChatPayClient = (
   config: WeChatPayProviderInstanceConfig,
@@ -196,13 +211,11 @@ const assertEndpointBaseUrlAllowed = (endpointBaseUrl: string | null): void => {
   if (!endpointBaseUrl) return;
   const parsed = new URL(endpointBaseUrl);
   const isAllowedProductionHost =
-    parsed.protocol === "https:" &&
-    isOfficialWeChatPayEndpointHost(parsed.hostname);
+    parsed.protocol === "https:" && isOfficialWeChatPayEndpointHost(parsed.hostname);
   if (process.env.NODE_ENV === "production" && !isAllowedProductionHost) {
     return throwHttpProblem({
       status: 500,
-      detail:
-        "WeChatPay endpointBaseUrl must point to the official host in production",
+      detail: "WeChatPay endpointBaseUrl must point to the official host in production",
     });
   }
   if (
@@ -212,8 +225,7 @@ const assertEndpointBaseUrlAllowed = (endpointBaseUrl: string | null): void => {
   ) {
     return throwHttpProblem({
       status: 500,
-      detail:
-        "WeChatPay endpointBaseUrl must be localhost or the official host outside production",
+      detail: "WeChatPay endpointBaseUrl must be localhost or the official host outside production",
     });
   }
 };
@@ -231,17 +243,11 @@ const decryptPlatformCertificate = (input: {
   const encryptCertificate = readRecordField(item, "encrypt_certificate");
   const ciphertext = readRequiredStringField(encryptCertificate, "ciphertext");
   const nonce = readRequiredStringField(encryptCertificate, "nonce");
-  const associatedData =
-    readOptionalStringField(encryptCertificate, "associated_data") ?? "";
+  const associatedData = readOptionalStringField(encryptCertificate, "associated_data") ?? "";
 
   return {
     serialNo: readRequiredStringField(item, "serial_no"),
-    certificatePem: Aes.AesGcm.decrypt(
-      ciphertext,
-      input.apiV3Key,
-      nonce,
-      associatedData,
-    ),
+    certificatePem: Aes.AesGcm.decrypt(ciphertext, input.apiV3Key, nonce, associatedData),
     effectiveTime: readOptionalStringField(item, "effective_time"),
     expireTime: readOptionalStringField(item, "expire_time"),
   };
@@ -347,6 +353,7 @@ export const ensureWeChatPayPlatformCertificates = async (
 export class WeChatPayProviderAdapter implements PaymentProviderPort {
   private readonly wxpay: Wechatpay;
   private readonly config: WeChatPayProviderInstanceConfig;
+  private readonly providerInstanceId: string;
 
   constructor(input: {
     providerInstance: PaymentProviderInstance;
@@ -355,18 +362,109 @@ export class WeChatPayProviderAdapter implements PaymentProviderPort {
       throw new Error("WeChatPay adapter requires APIv3 provider config");
     }
 
-    this.config = normalizeRuntimeWeChatPayProviderConfig(
-      input.providerInstance.config,
-    );
+    this.providerInstanceId = input.providerInstance.id;
+    this.config = normalizeRuntimeWeChatPayProviderConfig(input.providerInstance.config);
     this.wxpay = buildWeChatPayClient(
       this.config,
       buildPlatformCertificateMap(this.config.platformCertificates),
     );
   }
 
-  async createChargePrepay(
-    input: CreateChargePrepayInput,
-  ): Promise<ChargePrepayResult> {
+  deriveChargeMerchantOrderNo(input: ProviderPaymentReferenceInput): string {
+    if (input.kind !== "CHARGE") {
+      throw new Error("WeChatPay charge merchant reference requires charge kind");
+    }
+    return this.deriveMerchantPaymentReference(input);
+  }
+
+  deriveRefundMerchantRefundNo(input: ProviderPaymentReferenceInput): string {
+    if (input.kind !== "REFUND") {
+      throw new Error("WeChatPay refund merchant reference requires refund kind");
+    }
+    return this.deriveMerchantPaymentReference(input);
+  }
+
+  parseMerchantPaymentReference(input: string): ParsedProviderPaymentReference {
+    const prefix = input.slice(0, 2);
+    const kind = parseWeChatPayReferenceKind(prefix);
+    const encodedBillLineId = input.slice(2, 24);
+    const encodedAttemptCount = input.slice(24, 27);
+    const signature = input.slice(27);
+    if (
+      input.length !== 32 ||
+      encodedBillLineId.length !== 22 ||
+      encodedAttemptCount.length !== 3 ||
+      signature.length !== 5
+    ) {
+      throw new Error("Invalid WeChatPay merchant reference shape");
+    }
+
+    const billLineId = decodeUuidBase64Url(encodedBillLineId);
+    const attemptCount = Number.parseInt(encodedAttemptCount, 36);
+    if (!Number.isInteger(attemptCount) || attemptCount <= 0) {
+      throw new Error("Invalid WeChatPay merchant reference attempt count");
+    }
+
+    const expected = this.signMerchantReference({
+      prefix,
+      billLineId,
+      attemptCount,
+    });
+    if (signature !== expected) {
+      throw new Error("Invalid WeChatPay merchant reference signature");
+    }
+
+    return {
+      providerInstanceId: this.providerInstanceId,
+      billLineId,
+      kind,
+      attemptCount,
+    };
+  }
+
+  private deriveMerchantPaymentReference(input: ProviderPaymentReferenceInput): string {
+    if (input.providerInstanceId !== this.providerInstanceId) {
+      throw new Error("WeChatPay merchant reference provider instance mismatch");
+    }
+    if (input.kind !== "CHARGE" && input.kind !== "REFUND") {
+      throw new Error("Unsupported WeChatPay merchant reference kind");
+    }
+    if (
+      !Number.isInteger(input.attemptCount) ||
+      input.attemptCount <= 0 ||
+      input.attemptCount > maxMerchantReferenceAttemptCount
+    ) {
+      throw new Error("Invalid WeChatPay merchant reference attempt count");
+    }
+
+    const prefix = input.kind === "CHARGE" ? "PC" : "PR";
+    const encodedBillLineId = encodeUuidBase64Url(input.billLineId);
+    const encodedAttemptCount = input.attemptCount.toString(36).toUpperCase().padStart(3, "0");
+    const signature = this.signMerchantReference({
+      prefix,
+      billLineId: input.billLineId,
+      attemptCount: input.attemptCount,
+    });
+
+    return `${prefix}${encodedBillLineId}${encodedAttemptCount}${signature}`;
+  }
+
+  private signMerchantReference(input: {
+    prefix: string;
+    billLineId: string;
+    attemptCount: number;
+  }): string {
+    return createHmac("sha256", this.config.apiV3Key)
+      .update(
+        [input.prefix, this.providerInstanceId, input.billLineId, String(input.attemptCount)].join(
+          ":",
+        ),
+      )
+      .digest("base64url")
+      .slice(0, 5);
+  }
+
+  async createChargePrepay(input: CreateChargePrepayInput): Promise<ChargePrepayResult> {
     if (this.config.chargeMode === "JSAPI") {
       if (!input.payerOpenId) {
         return throwHttpProblem({
@@ -436,23 +534,30 @@ export class WeChatPayProviderAdapter implements PaymentProviderPort {
   }
 
   async queryCharge(input: QueryChargeInput): Promise<NormalizedChargeStatus> {
-    const response = await this.wxpay
-      .chain(`/v3/pay/transactions/out-trade-no/${input.merchantOrderNo}`)
-      .get<Record<string, unknown>>({
-        params: {
-          mchid: this.config.mchId,
-        },
-      });
-    const providerStatus =
-      readOptionalStringField(response.data, "trade_state") ?? "UNKNOWN";
+    let response: { data: Record<string, unknown> };
+    try {
+      response = await this.wxpay
+        .chain(`/v3/pay/transactions/out-trade-no/${input.merchantOrderNo}`)
+        .get<Record<string, unknown>>({
+          params: {
+            mchid: this.config.mchId,
+          },
+        });
+    } catch (error) {
+      if (readHttpStatus(error) === 404) {
+        return {
+          status: "CLOSED",
+          providerStatus: "NOT_FOUND",
+        };
+      }
+      throw error;
+    }
+    const providerStatus = readOptionalStringField(response.data, "trade_state") ?? "UNKNOWN";
 
     return {
       status: mapWeChatPayTradeState(providerStatus),
       providerStatus,
-      providerTransactionId: readOptionalStringField(
-        response.data,
-        "transaction_id",
-      ),
+      providerTransactionId: readOptionalStringField(response.data, "transaction_id"),
       providerSnapshot: response.data,
       failureMessage: readOptionalStringField(response.data, "trade_state_desc"),
     };
@@ -476,8 +581,7 @@ export class WeChatPayProviderAdapter implements PaymentProviderPort {
         },
       });
 
-    const providerStatus =
-      readOptionalStringField(response.data, "status") ?? "UNKNOWN";
+    const providerStatus = readOptionalStringField(response.data, "status") ?? "UNKNOWN";
     return {
       status: mapWeChatPayRefundState(providerStatus),
       providerStatus,
@@ -488,11 +592,21 @@ export class WeChatPayProviderAdapter implements PaymentProviderPort {
   }
 
   async queryRefund(input: QueryRefundInput): Promise<NormalizedRefundStatus> {
-    const response = await this.wxpay
-      .chain(`/v3/refund/domestic/refunds/${input.merchantRefundNo}`)
-      .get<Record<string, unknown>>();
-    const providerStatus =
-      readOptionalStringField(response.data, "status") ?? "UNKNOWN";
+    let response: { data: Record<string, unknown> };
+    try {
+      response = await this.wxpay
+        .chain(`/v3/refund/domestic/refunds/${input.merchantRefundNo}`)
+        .get<Record<string, unknown>>();
+    } catch (error) {
+      if (readHttpStatus(error) === 404) {
+        return {
+          status: "CLOSED",
+          providerStatus: "NOT_FOUND",
+        };
+      }
+      throw error;
+    }
+    const providerStatus = readOptionalStringField(response.data, "status") ?? "UNKNOWN";
 
     return {
       status: mapWeChatPayRefundState(providerStatus),
@@ -543,25 +657,17 @@ export class WeChatPayProviderAdapter implements PaymentProviderPort {
     };
   }
 
-  private decryptVerifiedResource(
-    input: RawProviderNotification,
-  ): Record<string, unknown> {
+  private decryptVerifiedResource(input: RawProviderNotification): Record<string, unknown> {
     const platformCertificatePem = findPlatformCertificatePem(
       this.config.platformCertificates,
       input.headers.serial,
     );
     if (!platformCertificatePem) {
-      throw new UnknownWeChatPayPlatformCertificateSerialError(
-        input.headers.serial,
-      );
+      throw new UnknownWeChatPayPlatformCertificateSerialError(input.headers.serial);
     }
 
     const verified = Rsa.verify(
-      Formatter.response(
-        input.headers.timestamp,
-        input.headers.nonce,
-        input.bodyText,
-      ),
+      Formatter.response(input.headers.timestamp, input.headers.nonce, input.bodyText),
       input.headers.signature,
       platformCertificatePem,
     );
@@ -574,12 +680,7 @@ export class WeChatPayProviderAdapter implements PaymentProviderPort {
     const ciphertext = readRequiredStringField(resource, "ciphertext");
     const nonce = readRequiredStringField(resource, "nonce");
     const associatedData = readOptionalStringField(resource, "associated_data") ?? "";
-    const plaintext = Aes.AesGcm.decrypt(
-      ciphertext,
-      this.config.apiV3Key,
-      nonce,
-      associatedData,
-    );
+    const plaintext = Aes.AesGcm.decrypt(ciphertext, this.config.apiV3Key, nonce, associatedData);
 
     return parseJsonRecord(plaintext);
   }
@@ -589,12 +690,7 @@ export class WeChatPayProviderAdapter implements PaymentProviderPort {
     const nonceStr = Formatter.nonce();
     const packageValue = `prepay_id=${prepayId}`;
     const paySign = Rsa.sign(
-      Formatter.joinedByLineFeed(
-        this.config.appId,
-        timeStamp,
-        nonceStr,
-        packageValue,
-      ),
+      Formatter.joinedByLineFeed(this.config.appId, timeStamp, nonceStr, packageValue),
       this.config.merchantCertificate.privateKeyPem,
     );
 
diff --git a/apps/backend/src/domains/payment/use-cases/create-refund-execution.ts b/apps/backend/src/domains/payment/use-cases/create-refund-execution.ts
new file mode 100644
index 000000000..1defd0b21
--- /dev/null
+++ b/apps/backend/src/domains/payment/use-cases/create-refund-execution.ts
@@ -0,0 +1,196 @@
+import type { BillLine, BillLineId } from "../../../entities/bill";
+import type { PaymentProviderInstanceId } from "../../../entities/payment";
+import { throwHttpProblem } from "../../../lib/problem-details";
+import { BillLineRepository } from "../../../repositories/BillLineRepository";
+import { PaymentProviderInstanceRepository } from "../../../repositories/PaymentProviderInstanceRepository";
+import type { NormalizedPaymentStatus } from "../model";
+import {
+  createPaymentProviderPort,
+  ensureWeChatPayPlatformCertificates,
+  resolveWeChatPayRefundNotifyUrl,
+} from "../services";
+
+const billLineRepo = new BillLineRepository();
+const providerInstanceRepo = new PaymentProviderInstanceRepository();
+
+export type RefundExecutionResult =
+  | {
+      created: true;
+      billLineId: string;
+      status: "PROCESSING" | "SUCCEEDED" | "FAILED" | "CLOSED";
+      providerStatus: string | null;
+    }
+  | {
+      created: false;
+      reason:
+        | "REFUND_ALREADY_SETTLED"
+        | "REFUND_ALREADY_ACTIVE"
+        | "NO_REFUND_OF_CHARGE_LINE"
+        | "NO_SUCCESSFUL_ORIGINAL_CHARGE";
+      billLineId?: string;
+    };
+
+const toRefundExecutionStatus = (
+  status: NormalizedPaymentStatus,
+): "PROCESSING" | "SUCCEEDED" | "FAILED" | "CLOSED" => {
+  if (status === "SUCCEEDED") return "SUCCEEDED";
+  if (status === "FAILED") return "FAILED";
+  if (status === "CLOSED") return "CLOSED";
+  return "PROCESSING";
+};
+
+const isTerminalUnsettledProviderStatus = (status: NormalizedPaymentStatus): boolean =>
+  status === "FAILED" || status === "CLOSED";
+
+const loadOriginalChargeLine = async (chargeBillLineId: BillLineId): Promise<BillLine | null> => {
+  const chargeLine = await billLineRepo.findById(chargeBillLineId);
+  if (!chargeLine || chargeLine.kind !== "CHARGE" || !chargeLine.settledAt) {
+    return null;
+  }
+  return chargeLine;
+};
+
+const createRefundExecutionForLine = async (input: {
+  refundLine: BillLine;
+  originalCharge: BillLine;
+}): Promise<RefundExecutionResult> => {
+  if (!input.originalCharge.paymentProviderInstanceId) {
+    return throwHttpProblem({
+      status: 409,
+      detail: "Original charge has no provider binding for refund",
+    });
+  }
+  const providerInstance = await providerInstanceRepo.findById(
+    input.originalCharge.paymentProviderInstanceId,
+  );
+  if (!providerInstance || providerInstance.status !== "ACTIVE") {
+    return throwHttpProblem({
+      status: 409,
+      detail: "Original payment provider instance is not active",
+    });
+  }
+  const ensuredProviderInstance = await ensureWeChatPayPlatformCertificates(providerInstance);
+  const port = createPaymentProviderPort({
+    providerInstance: ensuredProviderInstance,
+  });
+
+  const openedRefundLine = await billLineRepo.openProviderExecutionSlot({
+    id: input.refundLine.id,
+    paymentProviderInstanceId: providerInstance.id as PaymentProviderInstanceId,
+  });
+  if (!openedRefundLine) {
+    const current = await billLineRepo.findById(input.refundLine.id);
+    if (current?.settledAt) {
+      return {
+        created: false,
+        reason: "REFUND_ALREADY_SETTLED",
+        billLineId: current.id,
+      };
+    }
+    if (current?.paymentProviderInstanceId) {
+      return {
+        created: false,
+        reason: "REFUND_ALREADY_ACTIVE",
+        billLineId: current.id,
+      };
+    }
+    return throwHttpProblem({
+      status: 409,
+      detail: "Refund execution could not be opened",
+    });
+  }
+
+  const originalMerchantOrderNo = port.deriveChargeMerchantOrderNo({
+    providerInstanceId: providerInstance.id,
+    billLineId: input.originalCharge.id,
+    kind: "CHARGE",
+    attemptCount: input.originalCharge.attemptCount,
+  });
+  const merchantRefundNo = port.deriveRefundMerchantRefundNo({
+    providerInstanceId: providerInstance.id,
+    billLineId: openedRefundLine.id,
+    kind: "REFUND",
+    attemptCount: openedRefundLine.attemptCount,
+  });
+
+  const refund = await port.createRefund({
+    providerInstanceId: providerInstance.id,
+    merchantRefundNo,
+    originalMerchantOrderNo,
+    originalAmountFen: input.originalCharge.amountFen,
+    refundAmountFen: openedRefundLine.amountFen,
+    currency: openedRefundLine.currency,
+    reason: openedRefundLine.description ?? openedRefundLine.label,
+    notifyUrl: resolveWeChatPayRefundNotifyUrl(ensuredProviderInstance),
+  });
+  if (refund.status === "SUCCEEDED") {
+    await billLineRepo.markSettledFromProvider({
+      id: openedRefundLine.id,
+      paymentProviderInstanceId: providerInstance.id,
+      attemptCount: openedRefundLine.attemptCount,
+      settledAt: new Date(),
+    });
+  } else if (isTerminalUnsettledProviderStatus(refund.status)) {
+    await billLineRepo.clearProviderExecutionSlot({
+      id: openedRefundLine.id,
+      paymentProviderInstanceId: providerInstance.id,
+      attemptCount: openedRefundLine.attemptCount,
+    });
+  }
+
+  return {
+    created: true,
+    billLineId: openedRefundLine.id,
+    status: toRefundExecutionStatus(refund.status),
+    providerStatus: refund.providerStatus,
+  };
+};
+
+export async function createRefundExecutionForRefundLine(input: {
+  refundBillLineId: string;
+}): Promise<RefundExecutionResult> {
+  const refundLine = await billLineRepo.findById(input.refundBillLineId as BillLineId);
+  if (!refundLine) {
+    return throwHttpProblem({ status: 404, detail: "Refund BillLine not found" });
+  }
+  if (refundLine.kind !== "REFUND") {
+    return throwHttpProblem({
+      status: 409,
+      detail: "Only REFUND BillLine can create refund execution",
+    });
+  }
+  if (refundLine.settledAt) {
+    return {
+      created: false,
+      reason: "REFUND_ALREADY_SETTLED",
+      billLineId: refundLine.id,
+    };
+  }
+  if (refundLine.paymentProviderInstanceId) {
+    return {
+      created: false,
+      reason: "REFUND_ALREADY_ACTIVE",
+      billLineId: refundLine.id,
+    };
+  }
+
+  if (!refundLine.refundOfBillLineId) {
+    return {
+      created: false,
+      reason: "NO_REFUND_OF_CHARGE_LINE",
+    };
+  }
+
+  const originalCharge = await loadOriginalChargeLine(refundLine.refundOfBillLineId);
+  if (!originalCharge) {
+    return {
+      created: false,
+      reason: "NO_SUCCESSFUL_ORIGINAL_CHARGE",
+    };
+  }
+
+  return createRefundExecutionForLine({
+    refundLine,
+    originalCharge,
+  });
+}
diff --git a/apps/backend/src/domains/payment/use-cases/create-refund-payment-tx.ts b/apps/backend/src/domains/payment/use-cases/create-refund-payment-tx.ts
deleted file mode 100644
index 89c71c4de..000000000
--- a/apps/backend/src/domains/payment/use-cases/create-refund-payment-tx.ts
+++ /dev/null
@@ -1,178 +0,0 @@
-import { randomUUID } from "node:crypto";
-import { throwHttpProblem } from "../../../lib/problem-details";
-import type { BillLine, BillLineId } from "../../../entities/bill";
-import type { PaymentTx, PaymentTxId } from "../../../entities/payment";
-import type { UserId } from "../../../entities/user";
-import { BillLineRepository } from "../../../repositories/BillLineRepository";
-import { PaymentProviderInstanceRepository } from "../../../repositories/PaymentProviderInstanceRepository";
-import { PaymentTxRepository } from "../../../repositories/PaymentTxRepository";
-import {
-  createPaymentProviderPort,
-  ensureWeChatPayPlatformCertificates,
-  resolveWeChatPayRefundNotifyUrl,
-} from "../services";
-
-const billLineRepo = new BillLineRepository();
-const paymentTxRepo = new PaymentTxRepository();
-const providerInstanceRepo = new PaymentProviderInstanceRepository();
-
-export type RefundPaymentTxResult =
-  | {
-      created: true;
-      paymentTxId: string;
-      status: PaymentTx["status"];
-      providerStatus: string | null;
-    }
-  | {
-      created: false;
-      reason:
-        | "REFUND_ALREADY_EXISTS"
-        | "NO_REFUND_OF_CHARGE_LINE"
-        | "NO_SUCCESSFUL_ORIGINAL_CHARGE";
-      paymentTxId?: string;
-    };
-
-const buildMerchantRefundNo = (paymentTxId: string): string =>
-  `PUR${paymentTxId.replaceAll("-", "").slice(0, 29)}`;
-
-const mapNormalizedStatusToTxStatus = (
-  status: "PENDING" | "SUCCEEDED" | "FAILED" | "CLOSED",
-): PaymentTx["status"] => {
-  if (status === "SUCCEEDED") return "SUCCEEDED";
-  if (status === "FAILED") return "FAILED";
-  if (status === "CLOSED") return "CLOSED";
-  return "PROCESSING";
-};
-
-const findSuccessfulOriginalCharge = async (
-  chargeBillLineId: BillLineId,
-): Promise<PaymentTx | null> => {
-  const chargeLineTxs = await paymentTxRepo.listByBillLineIds([chargeBillLineId]);
-  return (
-    chargeLineTxs.find(
-      (tx) => tx.type === "CHARGE" && tx.status === "SUCCEEDED",
-    ) ?? null
-  );
-};
-
-const createRefundTxForLine = async (input: {
-  refundLine: BillLine;
-  originalCharge: PaymentTx;
-}): Promise<RefundPaymentTxResult> => {
-  const providerInstance = await providerInstanceRepo.findById(
-    input.originalCharge.providerInstanceId,
-  );
-  if (!providerInstance || providerInstance.status !== "ACTIVE") {
-    return throwHttpProblem({
-      status: 409,
-      detail: "Original payment provider instance is not active",
-    });
-  }
-  const ensuredProviderInstance =
-    await ensureWeChatPayPlatformCertificates(providerInstance);
-  const port = createPaymentProviderPort({
-    providerInstance: ensuredProviderInstance,
-  });
-
-  const paymentTxId = randomUUID() as PaymentTxId;
-  const merchantRefundNo = buildMerchantRefundNo(paymentTxId);
-  const created = await paymentTxRepo.create({
-    id: paymentTxId,
-    billLineId: input.refundLine.id,
-    type: "REFUND",
-    providerInstanceId: input.originalCharge.providerInstanceId,
-    clientId: null,
-    status: "INITIATED",
-    amountFen: input.refundLine.amountFen,
-    currency: input.refundLine.currency,
-    requestedBy: input.refundLine.userId as UserId,
-    merchantRefundNo,
-  });
-
-  const refund = await port.createRefund({
-    providerInstanceId: providerInstance.id,
-    merchantRefundNo,
-    originalMerchantOrderNo: input.originalCharge.merchantOrderNo ?? "",
-    originalProviderTransactionId: input.originalCharge.providerTransactionId,
-    originalAmountFen: input.originalCharge.amountFen,
-    refundAmountFen: input.refundLine.amountFen,
-    currency: input.refundLine.currency,
-    reason: input.refundLine.description ?? input.refundLine.label,
-    notifyUrl: resolveWeChatPayRefundNotifyUrl(ensuredProviderInstance),
-  });
-  const nextStatus = mapNormalizedStatusToTxStatus(refund.status);
-  const now = new Date();
-  const updated = await paymentTxRepo.convergeRefundStatus({
-    id: created.id,
-    status: nextStatus,
-    providerStatus: refund.providerStatus,
-    providerRefundId: refund.providerRefundId ?? null,
-    providerSnapshot: refund.providerSnapshot,
-    failureCode: refund.failureCode ?? null,
-    failureMessage: refund.failureMessage ?? null,
-    succeededAt: nextStatus === "SUCCEEDED" ? now : null,
-    closedAt: nextStatus === "CLOSED" ? now : null,
-  });
-
-  return {
-    created: true,
-    paymentTxId: (updated ?? created).id,
-    status: (updated ?? created).status,
-    providerStatus: (updated ?? created).providerStatus,
-  };
-};
-
-export async function createRefundPaymentTxForRefundLine(input: {
-  refundBillLineId: string;
-}): Promise<RefundPaymentTxResult> {
-  const refundLine = await billLineRepo.findById(input.refundBillLineId as BillLineId);
-  if (!refundLine) {
-    return throwHttpProblem({ status: 404, detail: "Refund BillLine not found" });
-  }
-  if (refundLine.kind !== "REFUND") {
-    return throwHttpProblem({
-      status: 409,
-      detail: "Only REFUND BillLine can create refund PaymentTx",
-    });
-  }
-
-  const existing = await paymentTxRepo.findLatestByBillLine({
-    billLineId: refundLine.id,
-    type: "REFUND",
-  });
-  if (existing) {
-    return {
-      created: false,
-      reason: "REFUND_ALREADY_EXISTS",
-      paymentTxId: existing.id,
-    };
-  }
-
-  if (!refundLine.refundOfBillLineId) {
-    return {
-      created: false,
-      reason: "NO_REFUND_OF_CHARGE_LINE",
-    };
-  }
-
-  const originalCharge = await findSuccessfulOriginalCharge(
-    refundLine.refundOfBillLineId,
-  );
-  if (!originalCharge) {
-    return {
-      created: false,
-      reason: "NO_SUCCESSFUL_ORIGINAL_CHARGE",
-    };
-  }
-  if (!originalCharge.merchantOrderNo && !originalCharge.providerTransactionId) {
-    return throwHttpProblem({
-      status: 409,
-      detail: "Original charge has no provider reference for refund",
-    });
-  }
-
-  return createRefundTxForLine({
-    refundLine,
-    originalCharge,
-  });
-}
diff --git a/apps/backend/src/domains/payment/use-cases/get-bill-detail.ts b/apps/backend/src/domains/payment/use-cases/get-bill-detail.ts
index ba38f61d6..a285172bd 100644
--- a/apps/backend/src/domains/payment/use-cases/get-bill-detail.ts
+++ b/apps/backend/src/domains/payment/use-cases/get-bill-detail.ts
@@ -1,31 +1,17 @@
 import { throwHttpProblem } from "../../../lib/problem-details";
-import type { BillId, BillLine, BillLineId } from "../../../entities/bill";
-import type { PaymentTx } from "../../../entities/payment";
+import type { BillId, BillLine } from "../../../entities/bill";
 import type { TradeOrder, TradeOrderId } from "../../../entities/trade-order";
 import type { UserId } from "../../../entities/user";
 import { BillLineRepository } from "../../../repositories/BillLineRepository";
 import { BillRepository } from "../../../repositories/BillRepository";
-import { PaymentTxRepository } from "../../../repositories/PaymentTxRepository";
 import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository";
 import { deriveBillPaymentState } from "../services";
 import { getOrderItemSkuName } from "../../trade";
 
 const billRepo = new BillRepository();
 const billLineRepo = new BillLineRepository();
-const paymentTxRepo = new PaymentTxRepository();
 const tradeOrderRepo = new TradeOrderRepository();
 
-type PaymentTxSummary = {
-  id: string;
-  type: "CHARGE" | "REFUND";
-  status: string;
-  amountFen: number;
-  providerInstanceId: string;
-  clientId: string | null;
-  createdAt: string;
-  updatedAt: string;
-};
-
 export type BillDetailProjection = {
   bill: {
     id: string;
@@ -61,8 +47,9 @@ export type BillDetailProjection = {
     refundedFen: number;
     payableByViewer: boolean;
     checkoutHref: string | null;
-    latestPaymentTx: PaymentTxSummary | null;
-    activePaymentTxId: string | null;
+    paymentProviderInstanceId: string | null;
+    attemptCount: number;
+    settledAt: string | null;
   }>;
 };
 
@@ -81,20 +68,6 @@ const resolveSettlementStatus = (input: {
   return "UNPAID";
 };
 
-const toPaymentTxSummary = (tx: PaymentTx | null): PaymentTxSummary | null => {
-  if (!tx) return null;
-  return {
-    id: tx.id,
-    type: tx.type,
-    status: tx.status,
-    amountFen: tx.amountFen,
-    providerInstanceId: tx.providerInstanceId,
-    clientId: tx.clientId,
-    createdAt: tx.createdAt.toISOString(),
-    updatedAt: tx.updatedAt.toISOString(),
-  };
-};
-
 async function buildBillDetail(input: {
   billId: BillId;
   viewerUserId: UserId;
@@ -113,19 +86,10 @@ async function buildBillDetail(input: {
   }
 
   const lines = await billLineRepo.listByBillId(bill.id);
-  const paymentTxs = await paymentTxRepo.listByBillLineIds(
-    lines.map((line) => line.id as BillLineId),
-  );
-  const paymentState = deriveBillPaymentState({ lines, txs: paymentTxs });
+  const paymentState = deriveBillPaymentState({ lines });
   const paymentByLineId = new Map(
     paymentState.lines.map((line) => [line.billLineId, line]),
   );
-  const latestTxByLineId = new Map<BillLineId, PaymentTx>();
-  for (const tx of paymentTxs) {
-    if (!latestTxByLineId.has(tx.billLineId)) {
-      latestTxByLineId.set(tx.billLineId, tx);
-    }
-  }
 
   return {
     bill: {
@@ -173,8 +137,9 @@ async function buildBillDetail(input: {
         checkoutHref: payableByViewer
           ? `/bill-lines/${line.id}/checkout`
           : null,
-        latestPaymentTx: toPaymentTxSummary(latestTxByLineId.get(line.id) ?? null),
-        activePaymentTxId: payment?.activePaymentTxId ?? null,
+        paymentProviderInstanceId: line.paymentProviderInstanceId,
+        attemptCount: line.attemptCount,
+        settledAt: line.settledAt?.toISOString() ?? null,
       };
     }),
   };
diff --git a/apps/backend/src/domains/payment/use-cases/index.ts b/apps/backend/src/domains/payment/use-cases/index.ts
index 8e28f2f43..4b322390c 100644
--- a/apps/backend/src/domains/payment/use-cases/index.ts
+++ b/apps/backend/src/domains/payment/use-cases/index.ts
@@ -1,5 +1,5 @@
 export {};
-export * from "./create-refund-payment-tx";
+export * from "./create-refund-execution";
 export * from "./get-bill-detail";
 export * from "./payment-checkout";
 export * from "./payment-notifications";
diff --git a/apps/backend/src/domains/payment/use-cases/payment-checkout.ts b/apps/backend/src/domains/payment/use-cases/payment-checkout.ts
index 368db9cb8..6070696d5 100644
--- a/apps/backend/src/domains/payment/use-cases/payment-checkout.ts
+++ b/apps/backend/src/domains/payment/use-cases/payment-checkout.ts
@@ -1,20 +1,15 @@
-import { randomUUID } from "node:crypto";
-import { throwHttpProblem } from "../../../lib/problem-details";
 import type { BillId, BillLine, BillLineId } from "../../../entities/bill";
-import type {
-  PaymentProviderInstance,
-  PaymentTx,
-  PaymentTxId,
-} from "../../../entities/payment";
+import type { PaymentProviderInstance, PaymentProviderInstanceId } from "../../../entities/payment";
 import type { TradeOrder } from "../../../entities/trade-order";
 import type { UserId } from "../../../entities/user";
+import { throwHttpProblem } from "../../../lib/problem-details";
 import { BillLineRepository } from "../../../repositories/BillLineRepository";
 import { BillRepository } from "../../../repositories/BillRepository";
 import { PaymentProviderInstanceRepository } from "../../../repositories/PaymentProviderInstanceRepository";
-import { PaymentTxRepository } from "../../../repositories/PaymentTxRepository";
 import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository";
 import { UserRepository } from "../../../repositories/UserRepository";
 import { getOrderItemSkuName } from "../../trade";
+import type { NormalizedPaymentStatus, PaymentClientAction } from "../model";
 import {
   createPaymentProviderPort,
   deriveBillPaymentState,
@@ -25,7 +20,6 @@ import { applyPaymentSettlementConsequence } from "./payment-settlement-conseque
 
 const billRepo = new BillRepository();
 const billLineRepo = new BillLineRepository();
-const paymentTxRepo = new PaymentTxRepository();
 const providerInstanceRepo = new PaymentProviderInstanceRepository();
 const tradeOrderRepo = new TradeOrderRepository();
 const userRepo = new UserRepository();
@@ -55,49 +49,42 @@ export type PaymentCheckoutProjection = {
     payable: boolean;
     disabledReason: string | null;
   };
-  payment: PaymentTxProjection | null;
+  payment: PaymentExecutionProjection | null;
 };
 
-export type PaymentTxProjection = {
-  id: string;
+export type PaymentExecutionStatus =
+  | "ACTION_REQUIRED"
+  | "PROCESSING"
+  | "SUCCEEDED"
+  | "FAILED"
+  | "CLOSED";
+
+export type PaymentExecutionProjection = {
   billLineId: string;
-  type: "CHARGE" | "REFUND";
-  status: string;
+  kind: BillLine["kind"];
+  status: PaymentExecutionStatus;
   amountFen: number;
   currency: "CNY";
-  clientId: string | null;
-  providerInstanceId: string;
+  providerInstanceId: string | null;
   providerStatus: string | null;
-  clientAction: unknown;
-  expiresAt: string | null;
-  succeededAt: string | null;
-  createdAt: string;
-  updatedAt: string;
+  clientAction: PaymentClientAction | null;
+  attemptCount: number;
+  settledAt: string | null;
 };
 
-const toPaymentTxProjection = (tx: PaymentTx): PaymentTxProjection => ({
-  id: tx.id,
-  billLineId: tx.billLineId,
-  type: tx.type,
-  status: tx.status,
-  amountFen: tx.amountFen,
-  currency: tx.currency,
-  clientId: tx.clientId,
-  providerInstanceId: tx.providerInstanceId,
-  providerStatus: tx.providerStatus,
-  clientAction: tx.clientAction,
-  expiresAt: tx.expiresAt?.toISOString() ?? null,
-  succeededAt: tx.succeededAt?.toISOString() ?? null,
-  createdAt: tx.createdAt.toISOString(),
-  updatedAt: tx.updatedAt.toISOString(),
-});
-
 const canViewOrder = (order: TradeOrder, userId: string): boolean =>
   order.createdBy === userId ||
   order.participants.some((participant) => participant.userId === userId);
 
-const buildMerchantOrderNo = (paymentTxId: string): string =>
-  `PU${paymentTxId.replaceAll("-", "").slice(0, 30)}`;
+const isTerminalUnsettledProviderStatus = (status: NormalizedPaymentStatus): boolean =>
+  status === "FAILED" || status === "CLOSED";
+
+const toExecutionStatus = (status: NormalizedPaymentStatus): PaymentExecutionStatus => {
+  if (status === "SUCCEEDED") return "SUCCEEDED";
+  if (status === "FAILED") return "FAILED";
+  if (status === "CLOSED") return "CLOSED";
+  return "PROCESSING";
+};
 
 async function resolveCheckoutBasis(input: {
   billLineId: BillLineId;
@@ -106,8 +93,6 @@ async function resolveCheckoutBasis(input: {
   line: BillLine;
   bill: NonNullable<Awaited<ReturnType<BillRepository["findById"]>>>;
   order: TradeOrder;
-  latestPayment: PaymentTx | null;
-  activePayment: PaymentTx | null;
   disabledReason: string | null;
 }> {
   const line = await billLineRepo.findById(input.billLineId);
@@ -132,18 +117,8 @@ async function resolveCheckoutBasis(input: {
     });
   }
 
-  const txs = await paymentTxRepo.listByBillLineIds([line.id]);
-  const paymentState = deriveBillPaymentState({ lines: [line], txs });
+  const paymentState = deriveBillPaymentState({ lines: [line] });
   const lineState = paymentState.lines[0];
-  const activePayment = await paymentTxRepo.findActiveByBillLine({
-    billLineId: line.id,
-    type: "CHARGE",
-  });
-  const latestPayment = await paymentTxRepo.findLatestByBillLine({
-    billLineId: line.id,
-    type: "CHARGE",
-  });
-
   const disabledReason =
     bill.status !== "ACTIVE"
       ? "账单当前不可支付"
@@ -159,17 +134,34 @@ async function resolveCheckoutBasis(input: {
     line,
     bill,
     order,
-    latestPayment,
-    activePayment,
     disabledReason,
   };
 }
 
+const toPaymentExecutionProjection = (input: {
+  line: BillLine;
+  status: PaymentExecutionStatus;
+  providerStatus?: string | null;
+  clientAction?: PaymentClientAction | null;
+  providerInstanceId?: string | null;
+}): PaymentExecutionProjection => ({
+  billLineId: input.line.id,
+  kind: input.line.kind,
+  status: input.status,
+  amountFen: input.line.amountFen,
+  currency: input.line.currency,
+  providerInstanceId: input.providerInstanceId ?? input.line.paymentProviderInstanceId ?? null,
+  providerStatus: input.providerStatus ?? null,
+  clientAction: input.clientAction ?? null,
+  attemptCount: input.line.attemptCount,
+  settledAt: input.line.settledAt?.toISOString() ?? null,
+});
+
 const buildCheckoutProjection = (input: {
   line: BillLine;
   bill: NonNullable<Awaited<ReturnType<BillRepository["findById"]>>>;
   order: TradeOrder;
-  payment: PaymentTx | null;
+  payment: PaymentExecutionProjection | null;
   disabledReason: string | null;
 }): PaymentCheckoutProjection => ({
   billLine: {
@@ -190,25 +182,19 @@ const buildCheckoutProjection = (input: {
     id: input.order.id,
     family: input.order.family,
     status: input.order.status,
-    itemName: input.order.items[0]
-      ? getOrderItemSkuName(input.order.items[0])
-      : "订单项目",
+    itemName: input.order.items[0] ? getOrderItemSkuName(input.order.items[0]) : "订单项目",
   },
   eligibility: {
     payable: input.disabledReason === null,
     disabledReason: input.disabledReason,
   },
-  payment: input.payment ? toPaymentTxProjection(input.payment) : null,
+  payment: input.payment,
 });
 
 async function resolveProviderForClient(input: {
   clientId: string;
-}): Promise<{
-  providerInstance: PaymentProviderInstance;
-}> {
-  const providerInstance = await providerInstanceRepo.findActiveByClientId(
-    input.clientId,
-  );
+}): Promise<PaymentProviderInstance> {
+  const providerInstance = await providerInstanceRepo.findActiveByClientId(input.clientId);
   if (!providerInstance) {
     return throwHttpProblem({
       status: 409,
@@ -216,9 +202,88 @@ async function resolveProviderForClient(input: {
     });
   }
 
-  return {
-    providerInstance: await ensureWeChatPayPlatformCertificates(providerInstance),
-  };
+  return ensureWeChatPayPlatformCertificates(providerInstance);
+}
+
+async function loadProviderInstance(
+  providerInstanceId: PaymentProviderInstanceId,
+): Promise<PaymentProviderInstance> {
+  const providerInstance = await providerInstanceRepo.findById(providerInstanceId);
+  if (!providerInstance || providerInstance.status !== "ACTIVE") {
+    return throwHttpProblem({
+      status: 404,
+      detail: "Payment provider instance not found",
+    });
+  }
+
+  return ensureWeChatPayPlatformCertificates(providerInstance);
+}
+
+async function queryChargePaymentForLine(
+  line: BillLine,
+): Promise<PaymentExecutionProjection | null> {
+  if (line.settledAt) {
+    return toPaymentExecutionProjection({
+      line,
+      status: "SUCCEEDED",
+      providerStatus: "SETTLED",
+    });
+  }
+  if (!line.paymentProviderInstanceId) {
+    return null;
+  }
+
+  const providerInstance = await loadProviderInstance(line.paymentProviderInstanceId);
+  const port = createPaymentProviderPort({ providerInstance });
+  const merchantOrderNo = port.deriveChargeMerchantOrderNo({
+    providerInstanceId: providerInstance.id,
+    billLineId: line.id,
+    kind: "CHARGE",
+    attemptCount: line.attemptCount,
+  });
+  const normalized = await port.queryCharge({
+    providerInstanceId: providerInstance.id,
+    merchantOrderNo,
+  });
+
+  if (normalized.status === "SUCCEEDED") {
+    const settledLine =
+      (await billLineRepo.markSettledFromProvider({
+        id: line.id,
+        paymentProviderInstanceId: providerInstance.id,
+        attemptCount: line.attemptCount,
+        settledAt: new Date(),
+      })) ??
+      (await billLineRepo.findById(line.id)) ??
+      line;
+    await applyPaymentSettlementConsequence({ billLineId: settledLine.id });
+    return toPaymentExecutionProjection({
+      line: settledLine,
+      status: "SUCCEEDED",
+      providerStatus: normalized.providerStatus,
+    });
+  }
+
+  if (isTerminalUnsettledProviderStatus(normalized.status)) {
+    const clearedLine =
+      (await billLineRepo.clearProviderExecutionSlot({
+        id: line.id,
+        paymentProviderInstanceId: providerInstance.id,
+        attemptCount: line.attemptCount,
+      })) ?? line;
+    return toPaymentExecutionProjection({
+      line: clearedLine,
+      status: toExecutionStatus(normalized.status),
+      providerStatus: normalized.providerStatus,
+      providerInstanceId: providerInstance.id,
+    });
+  }
+
+  return toPaymentExecutionProjection({
+    line,
+    status: toExecutionStatus(normalized.status),
+    providerStatus: normalized.providerStatus,
+  });
 }
 
 export async function getPaymentCheckout(input: {
@@ -233,16 +298,49 @@ export async function getPaymentCheckout(input: {
     billLineId: input.billLineId as BillLineId,
     viewerUserId: input.viewerUserId as UserId,
   });
+  const payment = await queryChargePaymentForLine(basis.line);
+  const line = payment ? ((await billLineRepo.findById(basis.line.id)) ?? basis.line) : basis.line;
 
   return buildCheckoutProjection({
-    line: basis.line,
+    line,
     bill: basis.bill,
     order: basis.order,
-    payment: basis.activePayment ?? basis.latestPayment,
+    payment,
     disabledReason: basis.disabledReason,
   });
 }
 
+async function openOrLoadChargeExecution(input: {
+  line: BillLine;
+  providerInstance: PaymentProviderInstance;
+}): Promise<BillLine> {
+  if (input.line.paymentProviderInstanceId) {
+    return input.line;
+  }
+
+  const opened = await billLineRepo.openProviderExecutionSlot({
+    id: input.line.id,
+    paymentProviderInstanceId: input.providerInstance.id,
+  });
+  if (opened) return opened;
+
+  const current = await billLineRepo.findById(input.line.id);
+  if (!current) {
+    return throwHttpProblem({ status: 404, detail: "BillLine not found" });
+  }
+  if (current.settledAt) {
+    return throwHttpProblem({ status: 409, detail: "该账单行已支付" });
+  }
+  if (current.paymentProviderInstanceId) {
+    return current;
+  }
+
+  return throwHttpProblem({
+    status: 409,
+    detail: "Payment execution could not be opened",
+  });
+}
+
 export async function createOrReuseChargeForBillLine(input: {
   billLineId: string;
   viewerUserId: string | null;
@@ -259,22 +357,34 @@ export async function createOrReuseChargeForBillLine(input: {
   if (basis.disabledReason) {
     return throwHttpProblem({ status: 409, detail: basis.disabledReason });
   }
-  if (basis.activePayment) {
-    return buildCheckoutProjection({
-      line: basis.line,
-      bill: basis.bill,
-      order: basis.order,
-      payment: basis.activePayment,
-      disabledReason: null,
+
+  const selectedProvider = basis.line.paymentProviderInstanceId
+    ? await loadProviderInstance(basis.line.paymentProviderInstanceId)
+    : await resolveProviderForClient({ clientId: input.clientId });
+  const line = await openOrLoadChargeExecution({
+    line: basis.line,
+    providerInstance: selectedProvider,
+  });
+  if (line.kind !== "CHARGE") {
+    return throwHttpProblem({
+      status: 409,
+      detail: "Only charge BillLine can create charge execution",
+    });
+  }
+  if (line.settledAt) {
+    return throwHttpProblem({ status: 409, detail: "该账单行已支付" });
+  }
+  if (!line.paymentProviderInstanceId) {
+    return throwHttpProblem({
+      status: 409,
+      detail: "Payment provider execution slot is missing",
     });
   }
 
-  const provider = await resolveProviderForClient({ clientId: input.clientId });
-  const port = createPaymentProviderPort({
-    providerInstance: provider.providerInstance,
-  });
+  const providerInstance = await loadProviderInstance(line.paymentProviderInstanceId);
+  const port = createPaymentProviderPort({ providerInstance });
   const user = await userRepo.findById(input.viewerUserId as UserId);
-  const requiresOpenId = provider.providerInstance.config.chargeMode === "JSAPI";
+  const requiresOpenId = providerInstance.config.chargeMode === "JSAPI";
   if (requiresOpenId && !user?.openId) {
     return throwHttpProblem({
       status: 409,
@@ -282,8 +392,6 @@ export async function createOrReuseChargeForBillLine(input: {
     });
   }
 
-  const paymentTxId = randomUUID() as PaymentTxId;
-  const merchantOrderNo = buildMerchantOrderNo(paymentTxId);
   const expiresAt = new Date(basis.order.timeout.unpaidExpiresAt);
   if (Number.isNaN(expiresAt.getTime()) || expiresAt <= new Date()) {
     return throwHttpProblem({
@@ -292,150 +400,55 @@ export async function createOrReuseChargeForBillLine(input: {
     });
   }
 
-  const created = await paymentTxRepo.create({
-    id: paymentTxId,
-    billLineId: basis.line.id,
-    type: "CHARGE",
-    providerInstanceId: provider.providerInstance.id,
-    clientId: input.clientId,
-    status: "INITIATED",
-    amountFen: basis.line.amountFen,
-    currency: basis.line.currency,
-    requestedBy: input.viewerUserId as UserId,
-    merchantOrderNo,
-    expiresAt,
+  const merchantOrderNo = port.deriveChargeMerchantOrderNo({
+    providerInstanceId: providerInstance.id,
+    billLineId: line.id,
+    kind: "CHARGE",
+    attemptCount: line.attemptCount,
   });
-
   const prepay = await port.createChargePrepay({
-    providerInstanceId: provider.providerInstance.id,
+    providerInstanceId: providerInstance.id,
     merchantOrderNo,
-    amountFen: basis.line.amountFen,
-    currency: basis.line.currency,
-    description: basis.line.label,
+    amountFen: line.amountFen,
+    currency: line.currency,
+    description: line.label,
     payerOpenId: user?.openId ?? null,
-    notifyUrl: resolveWeChatPayChargeNotifyUrl(provider.providerInstance),
+    notifyUrl: resolveWeChatPayChargeNotifyUrl(providerInstance),
     expiresAt,
   });
 
-  const updated = await paymentTxRepo.updateProviderStart({
-    id: created.id,
-    status: "ACTION_REQUIRED",
-    providerPrepayId: prepay.providerPrepayId,
-    providerStatus: prepay.providerStatus,
-    clientAction: prepay.clientAction,
-    providerSnapshot: prepay.providerSnapshot,
-  });
-
   return buildCheckoutProjection({
-    line: basis.line,
+    line,
     bill: basis.bill,
     order: basis.order,
-    payment: updated ?? created,
+    payment: toPaymentExecutionProjection({
+      line,
+      status: "ACTION_REQUIRED",
+      providerStatus: prepay.providerStatus,
+      clientAction: prepay.clientAction,
+    }),
     disabledReason: null,
   });
 }
 
-const mapNormalizedStatusToTxStatus = (
-  status: "PENDING" | "SUCCEEDED" | "FAILED" | "CLOSED",
-): PaymentTx["status"] => {
-  if (status === "SUCCEEDED") return "SUCCEEDED";
-  if (status === "FAILED") return "FAILED";
-  if (status === "CLOSED") return "CLOSED";
-  return "PROCESSING";
-};
-
-export async function syncPaymentTx(input: {
-  paymentTxId: string;
+export async function syncPaymentForBillLine(input: {
+  billLineId: string;
   viewerUserId: string | null;
-}): Promise<PaymentTxProjection> {
+}): Promise<PaymentExecutionProjection> {
   if (!input.viewerUserId) {
     return throwHttpProblem({ status: 401, detail: "Authentication required" });
   }
 
-  const tx = await paymentTxRepo.findById(input.paymentTxId as PaymentTxId);
-  if (!tx) {
-    return throwHttpProblem({ status: 404, detail: "PaymentTx not found" });
-  }
-  if (tx.type !== "CHARGE") {
-    return throwHttpProblem({
-      status: 409,
-      detail: "Only charge PaymentTx can be synced from checkout",
-    });
-  }
-
   const basis = await resolveCheckoutBasis({
-    billLineId: tx.billLineId,
+    billLineId: input.billLineId as BillLineId,
     viewerUserId: input.viewerUserId as UserId,
   });
-  if (!canViewOrder(basis.order, input.viewerUserId)) {
-    return throwHttpProblem({ status: 403, detail: "PaymentTx is not accessible" });
-  }
-  if (tx.status === "SUCCEEDED") {
-    await applyPaymentSettlementConsequence({ paymentTxId: tx.id });
-    return toPaymentTxProjection(tx);
-  }
-  if (tx.status === "FAILED" || tx.status === "CLOSED") {
-    return toPaymentTxProjection(tx);
-  }
-  if (!tx.merchantOrderNo) {
-    return throwHttpProblem({
-      status: 409,
-      detail: "PaymentTx has no provider merchant order number",
-    });
-  }
-
-  const providerInstance = await providerInstanceRepo.findById(tx.providerInstanceId);
-  if (!providerInstance) {
-    return throwHttpProblem({ status: 404, detail: "Payment provider not found" });
-  }
+  const payment = await queryChargePaymentForLine(basis.line);
+  if (payment) return payment;
 
-  const ensuredProviderInstance =
-    await ensureWeChatPayPlatformCertificates(providerInstance);
-  const port = createPaymentProviderPort({
-    providerInstance: ensuredProviderInstance,
-  });
-  const normalized = await port.queryCharge({
-    providerInstanceId: providerInstance.id,
-    merchantOrderNo: tx.merchantOrderNo,
-    providerTransactionId: tx.providerTransactionId,
-  });
-  const nextStatus = mapNormalizedStatusToTxStatus(normalized.status);
-  const now = new Date();
-  const updated = await paymentTxRepo.convergeChargeStatus({
-    id: tx.id,
-    status: nextStatus,
-    providerStatus: normalized.providerStatus,
-    providerTransactionId: normalized.providerTransactionId ?? null,
-    providerSnapshot: normalized.providerSnapshot,
-    failureCode: normalized.failureCode ?? null,
-    failureMessage: normalized.failureMessage ?? null,
-    succeededAt: nextStatus === "SUCCEEDED" ? now : null,
-    closedAt: nextStatus === "CLOSED" ? now : null,
-  });
-
-  if (updated?.status === "SUCCEEDED") {
-    await applyPaymentSettlementConsequence({ paymentTxId: updated.id });
-  }
-
-  return toPaymentTxProjection(updated ?? tx);
-}
-
-export async function getPaymentTxDetail(input: {
-  paymentTxId: string;
-  viewerUserId: string | null;
-}): Promise<PaymentTxProjection> {
-  if (!input.viewerUserId) {
-    return throwHttpProblem({ status: 401, detail: "Authentication required" });
-  }
-
-  const tx = await paymentTxRepo.findById(input.paymentTxId as PaymentTxId);
-  if (!tx) {
-    return throwHttpProblem({ status: 404, detail: "PaymentTx not found" });
-  }
-  await resolveCheckoutBasis({
-    billLineId: tx.billLineId,
-    viewerUserId: input.viewerUserId as UserId,
+  return toPaymentExecutionProjection({
+    line: basis.line,
+    status: "CLOSED",
+    providerStatus: "NO_PROVIDER_EXECUTION",
   });
-
-  return toPaymentTxProjection(tx);
 }
diff --git a/apps/backend/src/domains/payment/use-cases/payment-notifications.ts b/apps/backend/src/domains/payment/use-cases/payment-notifications.ts
index 4292cd197..e664cf9a8 100644
--- a/apps/backend/src/domains/payment/use-cases/payment-notifications.ts
+++ b/apps/backend/src/domains/payment/use-cases/payment-notifications.ts
@@ -1,27 +1,24 @@
+import type { BillLine, BillLineId } from "../../../entities/bill";
+import type { PaymentProviderInstance, PaymentProviderInstanceId } from "../../../entities/payment";
 import { throwHttpProblem } from "../../../lib/problem-details";
-import type {
-  PaymentProviderInstance,
-  PaymentProviderInstanceId,
-  PaymentTx,
-} from "../../../entities/payment";
+import { BillLineRepository } from "../../../repositories/BillLineRepository";
 import { PaymentProviderInstanceRepository } from "../../../repositories/PaymentProviderInstanceRepository";
-import { PaymentTxRepository } from "../../../repositories/PaymentTxRepository";
-import {
-  createPaymentProviderPort,
-  ensureWeChatPayPlatformCertificates,
-  refreshWeChatPayPlatformCertificates,
-  UnknownWeChatPayPlatformCertificateSerialError,
-} from "../services";
 import type {
   NormalizedChargeStatus,
   NormalizedPaymentStatus,
   NormalizedRefundStatus,
   RawProviderNotification,
 } from "../model";
+import {
+  createPaymentProviderPort,
+  ensureWeChatPayPlatformCertificates,
+  refreshWeChatPayPlatformCertificates,
+  UnknownWeChatPayPlatformCertificateSerialError,
+} from "../services";
 import { applyPaymentSettlementConsequence } from "./payment-settlement-consequence";
 
 const providerRepo = new PaymentProviderInstanceRepository();
-const paymentTxRepo = new PaymentTxRepository();
+const billLineRepo = new BillLineRepository();
 
 export type WeChatNotificationHeadersInput = {
   timestamp: string | null;
@@ -30,14 +27,8 @@ export type WeChatNotificationHeadersInput = {
   serial: string | null;
 };
 
-const mapNormalizedStatusToTxStatus = (
-  status: NormalizedPaymentStatus,
-): PaymentTx["status"] => {
-  if (status === "SUCCEEDED") return "SUCCEEDED";
-  if (status === "FAILED") return "FAILED";
-  if (status === "CLOSED") return "CLOSED";
-  return "PROCESSING";
-};
+const isTerminalUnsettledProviderStatus = (status: NormalizedPaymentStatus): boolean =>
+  status === "FAILED" || status === "CLOSED";
 
 const normalizeNotificationInput = (input: {
   headers: WeChatNotificationHeadersInput;
@@ -62,9 +53,7 @@ const normalizeNotificationInput = (input: {
   };
 };
 
-async function loadProviderInstance(
-  providerInstanceId: string,
-): Promise<PaymentProviderInstance> {
+async function loadProviderInstance(providerInstanceId: string): Promise<PaymentProviderInstance> {
   const providerInstance = await providerRepo.findById(
     providerInstanceId as PaymentProviderInstanceId,
   );
@@ -91,11 +80,77 @@ async function parseWithProviderInstance<T>(input: {
     }
   }
 
-  const refreshedProviderInstance =
-    await refreshWeChatPayPlatformCertificates(input.providerInstance);
+  const refreshedProviderInstance = await refreshWeChatPayPlatformCertificates(
+    input.providerInstance,
+  );
   return input.parse(refreshedProviderInstance);
 }
 
+async function loadReferencedBillLine(input: {
+  billLineId: string;
+  expectedKind: BillLine["kind"];
+  providerInstanceId: PaymentProviderInstanceId;
+  attemptCount: number;
+}): Promise<BillLine> {
+  const line = await billLineRepo.findById(input.billLineId as BillLineId);
+  if (!line) {
+    return throwHttpProblem({ status: 404, detail: "BillLine not found" });
+  }
+  if (line.kind !== input.expectedKind) {
+    return throwHttpProblem({
+      status: 409,
+      detail: "Payment provider reference kind does not match BillLine",
+    });
+  }
+  if (line.attemptCount < input.attemptCount) {
+    return throwHttpProblem({
+      status: 409,
+      detail: "Payment provider reference attempt was not issued",
+    });
+  }
+  if (
+    line.paymentProviderInstanceId &&
+    line.paymentProviderInstanceId !== input.providerInstanceId &&
+    !line.settledAt
+  ) {
+    return throwHttpProblem({
+      status: 409,
+      detail: "Payment provider reference does not match current BillLine provider",
+    });
+  }
+
+  return line;
+}
+
+async function settleBillLineFromProvider(input: {
+  line: BillLine;
+  providerInstanceId: PaymentProviderInstanceId;
+  attemptCount: number;
+}): Promise<BillLine> {
+  return (
+    (await billLineRepo.markSettledFromProvider({
+      id: input.line.id,
+      paymentProviderInstanceId: input.providerInstanceId,
+      attemptCount: input.attemptCount,
+      settledAt: new Date(),
+    })) ??
+    (await billLineRepo.findById(input.line.id)) ??
+    input.line
+  );
+}
+
+async function clearBillLineProviderBinding(input: {
+  line: BillLine;
+  providerInstanceId: PaymentProviderInstanceId;
+  attemptCount: number;
+}): Promise<void> {
+  await billLineRepo.clearProviderExecutionSlot({
+    id: input.line.id,
+    paymentProviderInstanceId: input.providerInstanceId,
+    attemptCount: input.attemptCount,
+  });
+}
+
 export async function handleWeChatPayChargeNotification(input: {
   providerInstanceId: string;
   headers: WeChatNotificationHeadersInput;
@@ -103,6 +158,7 @@ export async function handleWeChatPayChargeNotification(input: {
 }): Promise<{ code: "SUCCESS"; message: string }> {
   const notification = normalizeNotificationInput(input);
   const providerInstance = await loadProviderInstance(input.providerInstanceId);
+  const port = createPaymentProviderPort({ providerInstance });
 
   const parsed = await parseWithProviderInstance<
     NormalizedChargeStatus & { merchantOrderNo: string }
@@ -114,34 +170,34 @@ export async function handleWeChatPayChargeNotification(input: {
         providerInstance: currentProviderInstance,
       }).parseChargeNotification(notification),
   });
-
-  const tx = await paymentTxRepo.findByProviderMerchantOrder({
-    providerInstanceId: providerInstance.id,
-    merchantOrderNo: parsed.merchantOrderNo,
-  });
-  if (!tx || tx.type !== "CHARGE") {
+  const reference = port.parseMerchantPaymentReference(parsed.merchantOrderNo);
+  if (reference.kind !== "CHARGE") {
     return throwHttpProblem({
-      status: 404,
-      detail: "PaymentTx not found for WeChatPay charge notification",
+      status: 409,
+      detail: "WeChatPay charge notification reference is not a charge",
     });
   }
 
-  const nextStatus = mapNormalizedStatusToTxStatus(parsed.status);
-  const now = new Date();
-  const updated = await paymentTxRepo.convergeChargeStatus({
-    id: tx.id,
-    status: nextStatus,
-    providerStatus: parsed.providerStatus,
-    providerTransactionId: parsed.providerTransactionId ?? null,
-    providerSnapshot: parsed.providerSnapshot,
-    failureCode: parsed.failureCode ?? null,
-    failureMessage: parsed.failureMessage ?? null,
-    succeededAt: nextStatus === "SUCCEEDED" ? now : tx.succeededAt,
-    closedAt: nextStatus === "CLOSED" ? now : tx.closedAt,
+  const line = await loadReferencedBillLine({
+    billLineId: reference.billLineId,
+    expectedKind: "CHARGE",
+    providerInstanceId: providerInstance.id,
+    attemptCount: reference.attemptCount,
   });
 
-  if (updated?.status === "SUCCEEDED") {
-    await applyPaymentSettlementConsequence({ paymentTxId: updated.id });
+  if (parsed.status === "SUCCEEDED") {
+    const settledLine = await settleBillLineFromProvider({
+      line,
+      providerInstanceId: providerInstance.id,
+      attemptCount: reference.attemptCount,
+    });
+    await applyPaymentSettlementConsequence({ billLineId: settledLine.id });
+  } else if (isTerminalUnsettledProviderStatus(parsed.status)) {
+    await clearBillLineProviderBinding({
+      line,
+      providerInstanceId: providerInstance.id,
+      attemptCount: reference.attemptCount,
+    });
   }
 
   return {
@@ -157,6 +213,7 @@ export async function handleWeChatPayRefundNotification(input: {
 }): Promise<{ code: "SUCCESS"; message: string }> {
   const notification = normalizeNotificationInput(input);
   const providerInstance = await loadProviderInstance(input.providerInstanceId);
+  const port = createPaymentProviderPort({ providerInstance });
 
   const parsed = await parseWithProviderInstance<
     NormalizedRefundStatus & { merchantRefundNo: string }
@@ -168,32 +225,35 @@ export async function handleWeChatPayRefundNotification(input: {
         providerInstance: currentProviderInstance,
       }).parseRefundNotification(notification),
   });
-
-  const tx = await paymentTxRepo.findByProviderMerchantRefund({
-    providerInstanceId: providerInstance.id,
-    merchantRefundNo: parsed.merchantRefundNo,
-  });
-  if (!tx || tx.type !== "REFUND") {
+  const reference = port.parseMerchantPaymentReference(parsed.merchantRefundNo);
+  if (reference.kind !== "REFUND") {
     return throwHttpProblem({
-      status: 404,
-      detail: "PaymentTx not found for WeChatPay refund notification",
+      status: 409,
+      detail: "WeChatPay refund notification reference is not a refund",
     });
   }
 
-  const nextStatus = mapNormalizedStatusToTxStatus(parsed.status);
-  const now = new Date();
-  await paymentTxRepo.convergeRefundStatus({
-    id: tx.id,
-    status: nextStatus,
-    providerStatus: parsed.providerStatus,
-    providerRefundId: parsed.providerRefundId ?? null,
-    providerSnapshot: parsed.providerSnapshot,
-    failureCode: parsed.failureCode ?? null,
-    failureMessage: parsed.failureMessage ?? null,
-    succeededAt: nextStatus === "SUCCEEDED" ? now : tx.succeededAt,
-    closedAt: nextStatus === "CLOSED" ? now : tx.closedAt,
+  const line = await loadReferencedBillLine({
+    billLineId: reference.billLineId,
+    expectedKind: "REFUND",
+    providerInstanceId: providerInstance.id,
+    attemptCount: reference.attemptCount,
   });
 
+  if (parsed.status === "SUCCEEDED") {
+    await settleBillLineFromProvider({
+      line,
+      providerInstanceId: providerInstance.id,
+      attemptCount: reference.attemptCount,
+    });
+  } else if (isTerminalUnsettledProviderStatus(parsed.status)) {
+    await clearBillLineProviderBinding({
+      line,
+      providerInstanceId: providerInstance.id,
+      attemptCount: reference.attemptCount,
+    });
+  }
+
   return {
     code: "SUCCESS",
     message: "成功",
diff --git a/apps/backend/src/domains/payment/use-cases/payment-settlement-consequence.ts b/apps/backend/src/domains/payment/use-cases/payment-settlement-consequence.ts
index 2f83b0677..19428a03f 100644
--- a/apps/backend/src/domains/payment/use-cases/payment-settlement-consequence.ts
+++ b/apps/backend/src/domains/payment/use-cases/payment-settlement-consequence.ts
@@ -1,34 +1,27 @@
 import { throwHttpProblem } from "../../../lib/problem-details";
-import type { PaymentTxId } from "../../../entities/payment";
+import type { BillLineId } from "../../../entities/bill";
 import { BillLineRepository } from "../../../repositories/BillLineRepository";
-import { PaymentTxRepository } from "../../../repositories/PaymentTxRepository";
 import { applyBillSettlementToOrder } from "../../trade/use-cases/apply-bill-settlement-to-order";
 
-const paymentTxRepo = new PaymentTxRepository();
 const billLineRepo = new BillLineRepository();
 
 export async function applyPaymentSettlementConsequence(input: {
-  paymentTxId: string;
+  billLineId: string;
 }): Promise<{
   applied: boolean;
   reason: string;
   rentalOrderId?: string;
 }> {
-  const paymentTx = await paymentTxRepo.findById(input.paymentTxId as PaymentTxId);
-  if (!paymentTx) {
-    return throwHttpProblem({ status: 404, detail: "PaymentTx not found" });
+  const billLine = await billLineRepo.findById(input.billLineId as BillLineId);
+  if (!billLine) {
+    return throwHttpProblem({ status: 404, detail: "BillLine not found" });
   }
-  if (paymentTx.type !== "CHARGE" || paymentTx.status !== "SUCCEEDED") {
+  if (billLine.kind !== "CHARGE" || !billLine.settledAt) {
     return {
       applied: false,
-      reason: "PaymentTx is not a successful charge",
+      reason: "BillLine is not a settled charge",
     };
   }
 
-  const billLine = await billLineRepo.findById(paymentTx.billLineId);
-  if (!billLine) {
-    return throwHttpProblem({ status: 404, detail: "BillLine not found" });
-  }
-
   return applyBillSettlementToOrder({ billId: billLine.billId });
 }
diff --git a/apps/backend/src/domains/trade/use-cases/apply-bill-settlement-to-order.ts b/apps/backend/src/domains/trade/use-cases/apply-bill-settlement-to-order.ts
index ba1132798..0af7bee3e 100644
--- a/apps/backend/src/domains/trade/use-cases/apply-bill-settlement-to-order.ts
+++ b/apps/backend/src/domains/trade/use-cases/apply-bill-settlement-to-order.ts
@@ -1,8 +1,7 @@
 import { throwHttpProblem } from "../../../lib/problem-details";
-import type { BillId, BillLineId } from "../../../entities/bill";
+import type { BillId } from "../../../entities/bill";
 import { BillLineRepository } from "../../../repositories/BillLineRepository";
 import { BillRepository } from "../../../repositories/BillRepository";
-import { PaymentTxRepository } from "../../../repositories/PaymentTxRepository";
 import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository";
 import { applyOrderPrepaidSettlementFulfillmentConsequence } from "../../fulfillment";
 import { deriveBillPaymentState } from "../../payment/services";
@@ -10,7 +9,6 @@ import { confirmRideHailingProviderFeeAfterPayment } from "./ride-hailing-orderi
 
 const billRepo = new BillRepository();
 const billLineRepo = new BillLineRepository();
-const paymentTxRepo = new PaymentTxRepository();
 const tradeOrderRepo = new TradeOrderRepository();
 
 export async function applyBillSettlementToOrder(input: {
@@ -26,10 +24,7 @@ export async function applyBillSettlementToOrder(input: {
   }
 
   const lines = await billLineRepo.listByBillId(bill.id);
-  const txs = await paymentTxRepo.listByBillLineIds(
-    lines.map((line) => line.id as BillLineId),
-  );
-  const paymentState = deriveBillPaymentState({ lines, txs });
+  const paymentState = deriveBillPaymentState({ lines });
   if (!paymentState.allChargesPaid) {
     return {
       applied: false,
diff --git a/apps/backend/src/domains/trade/use-cases/finalize-rental-order-termination.ts b/apps/backend/src/domains/trade/use-cases/finalize-rental-order-termination.ts
index 41b89f77f..a0d29d17f 100644
--- a/apps/backend/src/domains/trade/use-cases/finalize-rental-order-termination.ts
+++ b/apps/backend/src/domains/trade/use-cases/finalize-rental-order-termination.ts
@@ -1,15 +1,13 @@
 import { throwHttpProblem } from "../../../lib/problem-details";
 import { db } from "../../../lib/db";
-import type { BillLineId } from "../../../entities/bill";
 import type { TradeOrderId } from "../../../entities/trade-order";
 import { BillLineRepository } from "../../../repositories/BillLineRepository";
 import { BillRepository } from "../../../repositories/BillRepository";
-import { PaymentTxRepository } from "../../../repositories/PaymentTxRepository";
 import { RentalOrderRepository } from "../../../repositories/RentalOrderRepository";
 import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository";
 import { reconcileBillToTargetAmount } from "../../bill";
 import {
-  createRefundPaymentTxForRefundLine,
+  createRefundExecutionForRefundLine,
   deriveBillPaymentState,
 } from "../../payment";
 import type { FulfillmentTerminationDecision, OrderTerminationAttempt } from "../model";
@@ -67,7 +65,6 @@ export async function finalizeRentalOrderTermination(input: {
     const tradeOrderRepo = new TradeOrderRepository(tx);
     const billRepo = new BillRepository(tx);
     const billLineRepo = new BillLineRepository(tx);
-    const paymentTxRepo = new PaymentTxRepository(tx);
     const rentalOrderRepo = new RentalOrderRepository(tx);
 
     if (input.decision.outcome === "DENIED") {
@@ -111,12 +108,8 @@ export async function finalizeRentalOrderTermination(input: {
       return throwHttpProblem({ status: 404, detail: "Bill not found for rental termination" });
     }
     const billLines = await billLineRepo.listByBillId(bill.id);
-    const paymentTxs = await paymentTxRepo.listByBillLineIds(
-      billLines.map((line) => line.id as BillLineId),
-    );
     const paymentState = deriveBillPaymentState({
       lines: billLines,
-      txs: paymentTxs,
     });
     const reconciliation = await reconcileBillToTargetAmount(
       {
@@ -171,7 +164,7 @@ export async function finalizeRentalOrderTermination(input: {
 
   const refunds = [];
   for (const refundBillLineId of transactionResult.refundLineIds) {
-    refunds.push(await createRefundPaymentTxForRefundLine({ refundBillLineId }));
+    refunds.push(await createRefundExecutionForRefundLine({ refundBillLineId }));
   }
 
   const { refundLineIds: _refundLineIds, ...result } = transactionResult;
diff --git a/apps/backend/src/domains/trade/use-cases/rental-ordering-flow.ts b/apps/backend/src/domains/trade/use-cases/rental-ordering-flow.ts
index bb6bf357b..280bf5e45 100644
--- a/apps/backend/src/domains/trade/use-cases/rental-ordering-flow.ts
+++ b/apps/backend/src/domains/trade/use-cases/rental-ordering-flow.ts
@@ -1,9 +1,7 @@
 import { throwHttpProblem } from "../../../lib/problem-details";
-import type { BillLineId } from "../../../entities/bill";
 import type { TradeOrder, TradeOrderId } from "../../../entities/trade-order";
 import { BillLineRepository } from "../../../repositories/BillLineRepository";
 import { BillRepository } from "../../../repositories/BillRepository";
-import { PaymentTxRepository } from "../../../repositories/PaymentTxRepository";
 import { RentalOrderRepository } from "../../../repositories/RentalOrderRepository";
 import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository";
 import { requestRentalCancellationHandling } from "../../fulfillment";
@@ -30,7 +28,6 @@ const tradeOrderRepo = new TradeOrderRepository();
 const rentalOrderRepo = new RentalOrderRepository();
 const billRepo = new BillRepository();
 const billLineRepo = new BillLineRepository();
-const paymentTxRepo = new PaymentTxRepository();
 
 export type CommerceOrderDetailProjection = {
   order: {
@@ -101,14 +98,7 @@ export async function getCommerceOrderDetail(input: {
       : null;
   const bill = await billRepo.findBySourceOrderId(order.id);
   const billLines = bill ? await billLineRepo.listByBillId(bill.id) : [];
-  const paymentTxs = bill
-    ? await paymentTxRepo.listByBillLineIds(
-        billLines.map((line) => line.id as BillLineId),
-      )
-    : [];
-  const paymentState = bill
-    ? deriveBillPaymentState({ lines: billLines, txs: paymentTxs })
-    : null;
+  const paymentState = bill ? deriveBillPaymentState({ lines: billLines }) : null;
   const rentalOrder =
     order.family === "RENTAL"
       ? await rentalOrderRepo.findByOrderId(order.id)
@@ -218,12 +208,8 @@ export async function cancelRentalOrderFromOrderDetail(input: {
   });
   const bill = await billRepo.findBySourceOrderId(order.id);
   const billLines = bill ? await billLineRepo.listByBillId(bill.id) : [];
-  const paymentTxs = await paymentTxRepo.listByBillLineIds(
-    billLines.map((line) => line.id as BillLineId),
-  );
   const paymentState = deriveBillPaymentState({
     lines: billLines,
-    txs: paymentTxs,
   });
   const requiresFulfillmentGate =
     policyResolution.requiresOperatorHandling && paymentState.paidChargeFen > 0;
diff --git a/apps/backend/src/entities/bill.ts b/apps/backend/src/entities/bill.ts
index fddad902d..736128348 100644
--- a/apps/backend/src/entities/bill.ts
+++ b/apps/backend/src/entities/bill.ts
@@ -10,6 +10,7 @@ import {
 } from "drizzle-orm/pg-core";
 import { sql } from "drizzle-orm";
 import type { BillLineKind, BillStatus } from "../domains/bill/model";
+import type { PaymentProviderInstanceId } from "./payment";
 import { tradeOrders, type TradeOrderId } from "./trade-order";
 import { users, type UserId } from "./user";
 
@@ -64,6 +65,11 @@ export const billLines = pgTable(
     refundOfBillLineId: uuid("refund_of_bill_line_id")
       .$type<BillLineId | null>()
       .references((): AnyPgColumn => billLines.id, { onDelete: "restrict" }),
+    paymentProviderInstanceId: uuid("payment_provider_instance_id").$type<
+      PaymentProviderInstanceId | null
+    >(),
+    attemptCount: integer("attempt_count").notNull().default(0),
+    settledAt: timestamp("settled_at", { withTimezone: true }),
     createdAt: timestamp("created_at", { withTimezone: true }).notNull().defaultNow(),
   },
   (table) => ({
@@ -72,6 +78,9 @@ export const billLines = pgTable(
     refundOfBillLineIdx: index("bill_lines_refund_of_bill_line_idx").on(
       table.refundOfBillLineId,
     ),
+    paymentProviderInstanceIdx: index(
+      "bill_lines_payment_provider_instance_idx",
+    ).on(table.paymentProviderInstanceId),
   }),
 );
 
diff --git a/apps/backend/src/entities/payment.ts b/apps/backend/src/entities/payment.ts
index d4a0cf115..c91cdd34a 100644
--- a/apps/backend/src/entities/payment.ts
+++ b/apps/backend/src/entities/payment.ts
@@ -1,6 +1,5 @@
 import {
   index,
-  integer,
   jsonb,
   pgTable,
   text,
@@ -9,21 +8,15 @@ import {
   uuid,
 } from "drizzle-orm/pg-core";
 import { sql } from "drizzle-orm";
-import type { BillLineId } from "./bill";
-import { billLines } from "./bill";
 import type {
   PaymentProviderInstanceConfig,
   PaymentProviderInstanceStatus,
   PaymentProviderType,
-  PaymentTxType,
-  PaymentTxStatus,
 } from "../domains/payment/model";
-import { users, type UserId } from "./user";
 
 export type PaymentProviderInstanceId = string & {
   readonly __brand: "PaymentProviderInstanceId";
 };
-export type PaymentTxId = string & { readonly __brand: "PaymentTxId" };
 
 export const paymentProviderInstances = pgTable(
   "payment_provider_instances",
@@ -60,67 +53,7 @@ export const paymentProviderInstances = pgTable(
   }),
 );
 
-export const paymentTxs = pgTable(
-  "payment_txs",
-  {
-    id: uuid("id")
-      .$type<PaymentTxId>()
-      .primaryKey()
-      .default(sql`gen_random_uuid()`),
-    billLineId: uuid("bill_line_id")
-      .$type<BillLineId>()
-      .notNull()
-      .references(() => billLines.id, { onDelete: "cascade" }),
-    type: text("type").$type<PaymentTxType>().notNull(),
-    providerInstanceId: uuid("provider_instance_id")
-      .$type<PaymentProviderInstanceId>()
-      .notNull()
-      .references(() => paymentProviderInstances.id, { onDelete: "restrict" }),
-    clientId: text("client_id"),
-    status: text("status").$type<PaymentTxStatus>().notNull().default("INITIATED"),
-    amountFen: integer("amount_fen").notNull(),
-    currency: text("currency").$type<"CNY">().notNull().default("CNY"),
-    requestedBy: uuid("requested_by")
-      .$type<UserId>()
-      .notNull()
-      .references(() => users.id, { onDelete: "restrict" }),
-    merchantOrderNo: text("merchant_order_no"),
-    merchantRefundNo: text("merchant_refund_no"),
-    providerPrepayId: text("provider_prepay_id"),
-    providerTransactionId: text("provider_transaction_id"),
-    providerRefundId: text("provider_refund_id"),
-    providerStatus: text("provider_status"),
-    clientAction: jsonb("client_action").$type<unknown>(),
-    providerSnapshot: jsonb("provider_snapshot").$type<unknown>(),
-    failureCode: text("failure_code"),
-    failureMessage: text("failure_message"),
-    expiresAt: timestamp("expires_at", { withTimezone: true }),
-    succeededAt: timestamp("succeeded_at", { withTimezone: true }),
-    closedAt: timestamp("closed_at", { withTimezone: true }),
-    createdAt: timestamp("created_at", { withTimezone: true }).notNull().defaultNow(),
-    updatedAt: timestamp("updated_at", { withTimezone: true }).notNull().defaultNow(),
-  },
-  (table) => ({
-    billLineIdx: index("payment_txs_bill_line_idx").on(table.billLineId),
-    providerInstanceIdx: index("payment_txs_provider_instance_idx").on(
-      table.providerInstanceId,
-    ),
-    providerOrderUnique: uniqueIndex("payment_txs_provider_order_unique")
-      .on(table.providerInstanceId, table.merchantOrderNo)
-      .where(sql`${table.merchantOrderNo} is not null`),
-    providerRefundUnique: uniqueIndex("payment_txs_provider_refund_unique")
-      .on(table.providerInstanceId, table.merchantRefundNo)
-      .where(sql`${table.merchantRefundNo} is not null`),
-    statusUpdatedAtIdx: index("payment_txs_status_updated_at_idx").on(
-      table.status,
-      table.updatedAt,
-    ),
-  }),
-);
-
 export type PaymentProviderInstance =
   typeof paymentProviderInstances.$inferSelect;
 export type NewPaymentProviderInstance =
   typeof paymentProviderInstances.$inferInsert;
-export type PaymentTx = typeof paymentTxs.$inferSelect;
-export type NewPaymentTx = typeof paymentTxs.$inferInsert;
diff --git a/apps/backend/src/repositories/BillLineRepository.ts b/apps/backend/src/repositories/BillLineRepository.ts
index e6d319b11..d33e0f785 100644
--- a/apps/backend/src/repositories/BillLineRepository.ts
+++ b/apps/backend/src/repositories/BillLineRepository.ts
@@ -1,12 +1,13 @@
-import { asc, eq, inArray } from "drizzle-orm";
-import { db } from "../lib/db";
+import { and, asc, eq, gte, inArray, isNull, sql } from "drizzle-orm";
 import {
-  billLines,
   type BillId,
   type BillLine,
   type BillLineId,
+  billLines,
   type NewBillLine,
 } from "../entities/bill";
+import type { PaymentProviderInstanceId } from "../entities/payment";
+import { db } from "../lib/db";
 import type { RepositoryExecutor } from "./_executor";
 
 export class BillLineRepository {
@@ -41,10 +42,73 @@ export class BillLineRepository {
   }
 
   async findById(id: BillLineId): Promise<BillLine | null> {
+    const result = await this.executor.select().from(billLines).where(eq(billLines.id, id));
+    return result[0] ?? null;
+  }
+
+  async openProviderExecutionSlot(input: {
+    id: BillLineId;
+    paymentProviderInstanceId: PaymentProviderInstanceId;
+  }): Promise<BillLine | null> {
     const result = await this.executor
-      .select()
-      .from(billLines)
-      .where(eq(billLines.id, id));
+      .update(billLines)
+      .set({
+        paymentProviderInstanceId: input.paymentProviderInstanceId,
+        attemptCount: sql`${billLines.attemptCount} + 1`,
+      })
+      .where(
+        and(
+          eq(billLines.id, input.id),
+          isNull(billLines.paymentProviderInstanceId),
+          isNull(billLines.settledAt),
+        ),
+      )
+      .returning();
+    return result[0] ?? null;
+  }
+
+  async clearProviderExecutionSlot(input: {
+    id: BillLineId;
+    paymentProviderInstanceId: PaymentProviderInstanceId;
+    attemptCount: number;
+  }): Promise<BillLine | null> {
+    const result = await this.executor
+      .update(billLines)
+      .set({
+        paymentProviderInstanceId: null,
+      })
+      .where(
+        and(
+          eq(billLines.id, input.id),
+          eq(billLines.paymentProviderInstanceId, input.paymentProviderInstanceId),
+          eq(billLines.attemptCount, input.attemptCount),
+          isNull(billLines.settledAt),
+        ),
+      )
+      .returning();
+    return result[0] ?? null;
+  }
+
+  async markSettledFromProvider(input: {
+    id: BillLineId;
+    paymentProviderInstanceId: PaymentProviderInstanceId;
+    attemptCount: number;
+    settledAt: Date;
+  }): Promise<BillLine | null> {
+    const result = await this.executor
+      .update(billLines)
+      .set({
+        paymentProviderInstanceId: input.paymentProviderInstanceId,
+        settledAt: input.settledAt,
+      })
+      .where(
+        and(
+          eq(billLines.id, input.id),
+          gte(billLines.attemptCount, input.attemptCount),
+          isNull(billLines.settledAt),
+        ),
+      )
+      .returning();
     return result[0] ?? null;
   }
 }
diff --git a/apps/backend/src/repositories/PaymentTxRepository.ts b/apps/backend/src/repositories/PaymentTxRepository.ts
deleted file mode 100644
index 765ef3820..000000000
--- a/apps/backend/src/repositories/PaymentTxRepository.ts
+++ /dev/null
@@ -1,192 +0,0 @@
-import { and, desc, eq, inArray } from "drizzle-orm";
-import { db } from "../lib/db";
-import {
-  paymentTxs,
-  type NewPaymentTx,
-  type PaymentTx,
-  type PaymentTxId,
-  type PaymentProviderInstanceId,
-} from "../entities/payment";
-import type { BillLineId } from "../entities/bill";
-import type { PaymentTxStatus, PaymentTxType } from "../domains/payment/model";
-import type { RepositoryExecutor } from "./_executor";
-
-const ACTIVE_PAYMENT_STATUSES: PaymentTxStatus[] = [
-  "INITIATED",
-  "ACTION_REQUIRED",
-  "PROCESSING",
-];
-
-export class PaymentTxRepository {
-  constructor(private readonly executor: RepositoryExecutor = db) {}
-
-  async create(data: NewPaymentTx): Promise<PaymentTx> {
-    const result = await this.executor.insert(paymentTxs).values(data).returning();
-    return result[0]!;
-  }
-
-  async findById(id: PaymentTxId): Promise<PaymentTx | null> {
-    const result = await this.executor
-      .select()
-      .from(paymentTxs)
-      .where(eq(paymentTxs.id, id));
-    return result[0] ?? null;
-  }
-
-  async findByProviderMerchantOrder(input: {
-    providerInstanceId: PaymentProviderInstanceId;
-    merchantOrderNo: string;
-  }): Promise<PaymentTx | null> {
-    const result = await this.executor
-      .select()
-      .from(paymentTxs)
-      .where(
-        and(
-          eq(paymentTxs.providerInstanceId, input.providerInstanceId),
-          eq(paymentTxs.merchantOrderNo, input.merchantOrderNo),
-        ),
-      );
-    return result[0] ?? null;
-  }
-
-  async findByProviderMerchantRefund(input: {
-    providerInstanceId: PaymentProviderInstanceId;
-    merchantRefundNo: string;
-  }): Promise<PaymentTx | null> {
-    const result = await this.executor
-      .select()
-      .from(paymentTxs)
-      .where(
-        and(
-          eq(paymentTxs.providerInstanceId, input.providerInstanceId),
-          eq(paymentTxs.merchantRefundNo, input.merchantRefundNo),
-        ),
-      );
-    return result[0] ?? null;
-  }
-
-  async listByBillLineIds(billLineIds: BillLineId[]): Promise<PaymentTx[]> {
-    if (billLineIds.length === 0) return [];
-    return this.executor
-      .select()
-      .from(paymentTxs)
-      .where(inArray(paymentTxs.billLineId, billLineIds))
-      .orderBy(desc(paymentTxs.createdAt));
-  }
-
-  async findActiveByBillLine(input: {
-    billLineId: BillLineId;
-    type: PaymentTxType;
-  }): Promise<PaymentTx | null> {
-    const result = await this.executor
-      .select()
-      .from(paymentTxs)
-      .where(
-        and(
-          eq(paymentTxs.billLineId, input.billLineId),
-          eq(paymentTxs.type, input.type),
-          inArray(paymentTxs.status, ACTIVE_PAYMENT_STATUSES),
-        ),
-      )
-      .orderBy(desc(paymentTxs.createdAt));
-    return result[0] ?? null;
-  }
-
-  async findLatestByBillLine(input: {
-    billLineId: BillLineId;
-    type: PaymentTxType;
-  }): Promise<PaymentTx | null> {
-    const result = await this.executor
-      .select()
-      .from(paymentTxs)
-      .where(
-        and(
-          eq(paymentTxs.billLineId, input.billLineId),
-          eq(paymentTxs.type, input.type),
-        ),
-      )
-      .orderBy(desc(paymentTxs.createdAt));
-    return result[0] ?? null;
-  }
-
-  async updateProviderStart(input: {
-    id: PaymentTxId;
-    status: PaymentTxStatus;
-    providerPrepayId: string | null;
-    providerStatus: string | null;
-    clientAction: unknown;
-    providerSnapshot: unknown;
-  }): Promise<PaymentTx | null> {
-    const result = await this.executor
-      .update(paymentTxs)
-      .set({
-        status: input.status,
-        providerPrepayId: input.providerPrepayId,
-        providerStatus: input.providerStatus,
-        clientAction: input.clientAction,
-        providerSnapshot: input.providerSnapshot,
-        updatedAt: new Date(),
-      })
-      .where(eq(paymentTxs.id, input.id))
-      .returning();
-    return result[0] ?? null;
-  }
-
-  async convergeChargeStatus(input: {
-    id: PaymentTxId;
-    status: PaymentTxStatus;
-    providerStatus: string;
-    providerTransactionId?: string | null;
-    providerSnapshot?: unknown;
-    failureCode?: string | null;
-    failureMessage?: string | null;
-    succeededAt?: Date | null;
-    closedAt?: Date | null;
-  }): Promise<PaymentTx | null> {
-    const result = await this.executor
-      .update(paymentTxs)
-      .set({
-        status: input.status,
-        providerStatus: input.providerStatus,
-        providerTransactionId: input.providerTransactionId ?? null,
-        providerSnapshot: input.providerSnapshot,
-        failureCode: input.failureCode ?? null,
-        failureMessage: input.failureMessage ?? null,
-        succeededAt: input.succeededAt ?? null,
-        closedAt: input.closedAt ?? null,
-        updatedAt: new Date(),
-      })
-      .where(eq(paymentTxs.id, input.id))
-      .returning();
-    return result[0] ?? null;
-  }
-
-  async convergeRefundStatus(input: {
-    id: PaymentTxId;
-    status: PaymentTxStatus;
-    providerStatus: string;
-    providerRefundId?: string | null;
-    providerSnapshot?: unknown;
-    failureCode?: string | null;
-    failureMessage?: string | null;
-    succeededAt?: Date | null;
-    closedAt?: Date | null;
-  }): Promise<PaymentTx | null> {
-    const result = await this.executor
-      .update(paymentTxs)
-      .set({
-        status: input.status,
-        providerStatus: input.providerStatus,
-        providerRefundId: input.providerRefundId ?? null,
-        providerSnapshot: input.providerSnapshot,
-        failureCode: input.failureCode ?? null,
-        failureMessage: input.failureMessage ?? null,
-        succeededAt: input.succeededAt ?? null,
-        closedAt: input.closedAt ?? null,
-        updatedAt: new Date(),
-      })
-      .where(eq(paymentTxs.id, input.id))
-      .returning();
-    return result[0] ?? null;
-  }
-}
diff --git a/apps/backend/tests/_infra/vitest/global-setup.ts b/apps/backend/tests/_infra/vitest/global-setup.ts
index 0e2893f26..7021f94e1 100644
--- a/apps/backend/tests/_infra/vitest/global-setup.ts
+++ b/apps/backend/tests/_infra/vitest/global-setup.ts
@@ -18,6 +18,7 @@ let database: ScenarioDatabaseHandle | null = null;
 
 export async function setup(_project: TestProject): Promise<void> {
   loadWorkspaceEnvFiles(repoRoot);
+  process.env.PAYMENT_NOTIFY_BASE_URL ??= "http://127.0.0.1:1";
 
   database = await createScenarioDatabase();
   const databaseUrl = installScenarioDatabaseEnv(database.databaseUrl);
diff --git a/apps/backend/tests/commerce/rental-order-persistence.scenario.test.ts b/apps/backend/tests/commerce/rental-order-persistence.scenario.test.ts
index 7a67cd3b7..18866a000 100644
--- a/apps/backend/tests/commerce/rental-order-persistence.scenario.test.ts
+++ b/apps/backend/tests/commerce/rental-order-persistence.scenario.test.ts
@@ -21,17 +21,13 @@ import {
 import { attachOrderToPr } from "../../src/domains/pr-core";
 import type { OfferId } from "../../src/entities/offer";
 import type { BillId } from "../../src/entities/bill";
-import type {
-  PaymentProviderInstanceId,
-  PaymentTxId,
-} from "../../src/entities/payment";
+import type { PaymentProviderInstanceId } from "../../src/entities/payment";
 import type { PRId } from "../../src/entities/partner-request";
 import type { ProductSku } from "../../src/entities/product-sku";
 import type { TradeOrderId } from "../../src/entities/trade-order";
 import { BillLineRepository } from "../../src/repositories/BillLineRepository";
 import { PartnerRepository } from "../../src/repositories/PartnerRepository";
 import { PartnerRequestRepository } from "../../src/repositories/PartnerRequestRepository";
-import { PaymentTxRepository } from "../../src/repositories/PaymentTxRepository";
 import { RentalOrderRepository } from "../../src/repositories/RentalOrderRepository";
 import { TradeOrderRepository } from "../../src/repositories/TradeOrderRepository";
 
@@ -40,7 +36,6 @@ const partnerRequestRepo = new PartnerRequestRepository();
 const tradeOrderRepo = new TradeOrderRepository();
 const rentalOrderRepo = new RentalOrderRepository();
 const billLineRepo = new BillLineRepository();
-const paymentTxRepo = new PaymentTxRepository();
 
 const generateRsaPrivateKeyPem = (): string => {
   const { privateKey } = generateKeyPairSync("rsa", {
@@ -318,22 +313,18 @@ scenario("commerce_late_payment_after_cancel_does_not_start_fulfillment", async
     },
   });
 
-  const paymentTxId = randomUUID() as PaymentTxId;
-  await paymentTxRepo.create({
-    id: paymentTxId,
-    billLineId: chargeLine.id,
-    type: "CHARGE",
-    providerInstanceId:
+  const openedChargeLine = await billLineRepo.openProviderExecutionSlot({
+    id: chargeLine.id,
+    paymentProviderInstanceId:
       providerResult.providerInstanceId as PaymentProviderInstanceId,
-    clientId: "late-payment",
-    status: "SUCCEEDED",
-    amountFen: chargeLine.amountFen,
-    currency: chargeLine.currency,
-    requestedBy: creator.user.id,
-    merchantOrderNo: `late-${paymentTxId}`,
-    providerStatus: "SUCCESS",
-    providerTransactionId: `provider-${paymentTxId}`,
-    succeededAt: new Date(),
+  });
+  assert.ok(openedChargeLine, "Charge BillLine should open a provider slot");
+  await billLineRepo.markSettledFromProvider({
+    id: openedChargeLine.id,
+    paymentProviderInstanceId:
+      providerResult.providerInstanceId as PaymentProviderInstanceId,
+    attemptCount: openedChargeLine.attemptCount,
+    settledAt: new Date(),
   });
 
   await tradeOrderRepo.applyTerminationState({
@@ -355,7 +346,7 @@ scenario("commerce_late_payment_after_cancel_does_not_start_fulfillment", async
   });
 
   const pendingResult = await applyPaymentSettlementConsequence({
-    paymentTxId,
+    billLineId: openedChargeLine.id,
   });
 
   assert.deepEqual(pendingResult, {
@@ -375,7 +366,7 @@ scenario("commerce_late_payment_after_cancel_does_not_start_fulfillment", async
   );
 
   const cancelledResult = await applyPaymentSettlementConsequence({
-    paymentTxId,
+    billLineId: openedChargeLine.id,
   });
 
   assert.deepEqual(cancelledResult, {
diff --git a/apps/backend/tests/payment/payment-provider-ssot.scenario.test.ts b/apps/backend/tests/payment/payment-provider-ssot.scenario.test.ts
new file mode 100644
index 000000000..94d7f0529
--- /dev/null
+++ b/apps/backend/tests/payment/payment-provider-ssot.scenario.test.ts
@@ -0,0 +1,281 @@
+import assert from "node:assert/strict";
+import { randomUUID } from "node:crypto";
+import { startFakeWeChatPayServer } from "@partner-up-dev/fake-wechatpay-server";
+import { sql } from "drizzle-orm";
+import { createOffer, createProductSku, createProductSpu } from "../../src/domains/merchandising";
+import { registerPaymentProviderInstance } from "../../src/domains/payment/use-cases/register-payment-provider-instance";
+import { buildOrderParticipantsFromContext, createRentalOrder } from "../../src/domains/trade";
+import type { BillId } from "../../src/entities/bill";
+import { db } from "../../src/lib/db";
+import { BillLineRepository } from "../../src/repositories/BillLineRepository";
+import { expectJsonResponse, requestJson } from "../_infra/http/backend-app";
+import { scenario } from "../_infra/scenario/scenario";
+import { bindScenarioWeChatOpenId } from "../pr-core/_kit/actions/system-state";
+import { givenUser } from "../pr-core/_kit/builders/users";
+
+type PaymentClientActionProjection = {
+  type?: string;
+  package?: string;
+};
+
+type PaymentCheckoutProjection = {
+  payment: {
+    status: string;
+    providerStatus: string | null;
+    clientAction: PaymentClientActionProjection | null;
+    attemptCount: number;
+  } | null;
+};
+
+type PaymentExecutionProjection = {
+  status: string;
+  providerStatus: string | null;
+  attemptCount: number;
+  settledAt: string | null;
+};
+
+const billLineRepo = new BillLineRepository();
+
+async function givenRentalBillLineForPayment(input: { userId: string }): Promise<string> {
+  const spu = await createProductSpu({
+    name: "Provider SSOT rental room",
+    productType: "RENTAL",
+    status: "ACTIVE",
+    salesPolicy: {
+      skuSelectionPolicy: {
+        type: "EXACTLY_ONE",
+      },
+      quantityPolicy: {
+        type: "FIXED",
+        quantity: 1,
+      },
+    },
+    servicePolicy: {
+      type: "RENTAL",
+      bookingLeadTimeMinutes: 0,
+      requiresContactPhone: true,
+      requiresRealName: true,
+      requiresNationalId: false,
+    },
+    presentation: {
+      heroImageAssetIds: [],
+      detailImageAssetIds: [],
+      sellingPoints: [],
+      parameterGroups: [],
+      noticeBlocks: [],
+    },
+  });
+  const sku = await createProductSku({
+    spuId: spu.id,
+    name: "Provider SSOT rental sku",
+    status: "ACTIVE",
+    facts: {
+      type: "RENTAL",
+      zoneCode: "PROVIDER_SSOT_ZONE",
+      participantCount: 1,
+      durationMinutes: 60,
+    },
+    pricingModel: {
+      type: "FIXED_TOTAL",
+      amountFen: 1200,
+    },
+  });
+  const offer = await createOffer({
+    productType: "RENTAL",
+    spuIds: [spu.id],
+    status: "ACTIVE",
+    pricingRules: [],
+    termsVersion: 1,
+  });
+  const itemId = randomUUID();
+  const order = await createRentalOrder({
+    createdBy: input.userId,
+    participants: buildOrderParticipantsFromContext({
+      participants: [
+        {
+          participantId: `participant-${input.userId}`,
+          userId: input.userId,
+          joinedVia: "API",
+        },
+      ],
+      createdBy: input.userId,
+    }),
+    offerId: offer.id,
+    items: [
+      {
+        itemId,
+        sku: {
+          id: sku.id,
+          version: sku.version,
+          name: sku.name,
+          factsSnapshot: sku.facts,
+          pricingModelSnapshot: sku.pricingModel,
+          cancellationPolicySnapshot: null,
+        },
+        quantity: 1,
+      },
+    ],
+    pricingSnapshot: {
+      currency: "CNY",
+      itemBreakdowns: [
+        {
+          itemId,
+          resolvedAmountFen: 1200,
+          explanations: [],
+        },
+      ],
+      orderLevelExplanations: [],
+      subtotalFen: 1200,
+      totalFen: 1200,
+    },
+    serviceStartAt: "2031-03-01T10:00:00.000Z",
+    serviceEndAt: "2031-03-01T11:00:00.000Z",
+    contactPhone: "13800138088",
+    registrants: [
+      {
+        name: "支付测试",
+        phone: "13800138088",
+        nationalIdMasked: null,
+      },
+    ],
+  });
+
+  const lines = await billLineRepo.listByBillId(order.billId as BillId);
+  const chargeLine = lines.find((line) => line.kind === "CHARGE");
+  assert.ok(chargeLine, "Rental order should create a charge BillLine");
+  return chargeLine.id;
+}
+
+const readPrepayId = (projection: PaymentCheckoutProjection): string => {
+  const clientAction = projection.payment?.clientAction;
+  assert.equal(clientAction?.type, "WECHAT_BRIDGE");
+  assert.equal(projection.payment?.status, "ACTION_REQUIRED");
+  const packageValue = clientAction?.package ?? "";
+  assert.ok(
+    packageValue.startsWith("prepay_id="),
+    "WeChat bridge action should carry a prepay package",
+  );
+  return packageValue.slice("prepay_id=".length);
+};
+
+scenario("payment_provider_ssot_charge_retry_and_settlement_uses_provider_query", async (ctx) => {
+  const fakeWeChatPay = await startFakeWeChatPayServer();
+  try {
+    const payer = await givenUser("provider-ssot-payer");
+    await bindScenarioWeChatOpenId({
+      user: payer,
+      openId: "fake-openid-provider-ssot-payer",
+    });
+    await registerPaymentProviderInstance({
+      providerType: "WECHAT_PAY",
+      instanceKey: `provider-ssot-${randomUUID()}`,
+      displayName: "Provider SSOT Fake WeChatPay",
+      clientId: "web",
+      config: {
+        adapterMode: "WECHAT_PAY_API_V3",
+        appId: fakeWeChatPay.fixture.appId,
+        mchId: fakeWeChatPay.fixture.mchId,
+        chargeMode: "JSAPI",
+        endpointBaseUrl: fakeWeChatPay.origin,
+        apiV3Key: fakeWeChatPay.fixture.apiV3Key,
+        merchantCertificate: fakeWeChatPay.fixture.merchantCertificate,
+        platformCertificates: null,
+      },
+    });
+    const billLineId = await givenRentalBillLineForPayment({
+      userId: payer.user.id,
+    });
+
+    const firstCharge = await expectJsonResponse<PaymentCheckoutProjection>(
+      await requestJson(`/api/commerce/bill-lines/${billLineId}/charges`, {
+        method: "POST",
+        token: payer.token,
+        headers: {
+          "x-client-id": "web",
+        },
+      }),
+      200,
+    );
+    const firstPrepayId = readPrepayId(firstCharge);
+    const firstTransaction = fakeWeChatPay.state
+      .snapshot()
+      .transactions.find((transaction) => transaction.prepayId === firstPrepayId);
+    assert.ok(firstTransaction, "Fake WeChatPay should create first transaction");
+    assert.equal(firstTransaction.outTradeNo.length, 32);
+    assert.equal(firstTransaction.amount.total, 1200);
+    ctx.record("firstOutTradeNo", firstTransaction.outTradeNo);
+
+    await fetch(
+      `${fakeWeChatPay.origin}/__fake_wechatpay/transactions/${firstTransaction.outTradeNo}/fail`,
+      {
+        method: "POST",
+        headers: {
+          "content-type": "application/json",
+        },
+        body: JSON.stringify({ reason: "scenario retry" }),
+      },
+    );
+    const failedSync = await expectJsonResponse<PaymentExecutionProjection>(
+      await requestJson(`/api/commerce/bill-lines/${billLineId}/payment/sync`, {
+        method: "POST",
+        token: payer.token,
+      }),
+      200,
+    );
+    assert.equal(failedSync.status, "FAILED");
+    assert.equal(failedSync.attemptCount, 1);
+
+    const afterFailure = await billLineRepo.findById(billLineId);
+    assert.ok(afterFailure, "BillLine should still exist after failed attempt");
+    assert.equal(afterFailure.paymentProviderInstanceId, null);
+    assert.equal(afterFailure.attemptCount, 1);
+    assert.equal(afterFailure.settledAt, null);
+
+    const secondCharge = await expectJsonResponse<PaymentCheckoutProjection>(
+      await requestJson(`/api/commerce/bill-lines/${billLineId}/charges`, {
+        method: "POST",
+        token: payer.token,
+        headers: {
+          "x-client-id": "web",
+        },
+      }),
+      200,
+    );
+    const secondPrepayId = readPrepayId(secondCharge);
+    const secondTransaction = fakeWeChatPay.state
+      .snapshot()
+      .transactions.find((transaction) => transaction.prepayId === secondPrepayId);
+    assert.ok(secondTransaction, "Fake WeChatPay should create second transaction");
+    assert.notEqual(secondTransaction.outTradeNo, firstTransaction.outTradeNo);
+    assert.equal(secondTransaction.outTradeNo.length, 32);
+    ctx.record("secondOutTradeNo", secondTransaction.outTradeNo);
+
+    fakeWeChatPay.state.markTransaction({
+      outTradeNo: secondTransaction.outTradeNo,
+      tradeState: "SUCCESS",
+    });
+    const settledSync = await expectJsonResponse<PaymentExecutionProjection>(
+      await requestJson(`/api/commerce/bill-lines/${billLineId}/payment/sync`, {
+        method: "POST",
+        token: payer.token,
+      }),
+      200,
+    );
+    assert.equal(settledSync.status, "SUCCEEDED");
+    assert.equal(settledSync.attemptCount, 2);
+    assert.ok(settledSync.settledAt, "Sync should project settledAt");
+
+    const settledLine = await billLineRepo.findById(billLineId);
+    assert.ok(settledLine, "BillLine should exist after settlement");
+    assert.ok(settledLine.paymentProviderInstanceId);
+    assert.equal(settledLine.attemptCount, 2);
+    assert.ok(settledLine.settledAt);
+
+    const txTableRows = await db.execute<{ payment_txs: string | null }>(
+      sql`select to_regclass('public.payment_txs')::text as payment_txs`,
+    );
+    assert.equal(txTableRows[0]?.payment_txs ?? null, null);
+  } finally {
+    await fakeWeChatPay.close();
+  }
+});
diff --git a/apps/frontend/src/domains/commerce/queries/useCommerce.ts b/apps/frontend/src/domains/commerce/queries/useCommerce.ts
index 52ba1328e..916e915d8 100644
--- a/apps/frontend/src/domains/commerce/queries/useCommerce.ts
+++ b/apps/frontend/src/domains/commerce/queries/useCommerce.ts
@@ -1,16 +1,15 @@
-import { computed, type Ref } from "vue";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
 import type { InferResponseType } from "hono";
+import { computed, type Ref } from "vue";
 import { client } from "@/lib/rpc";
-import { queryKeys } from "@/shared/api/query-keys";
 import { buildApiError, readApiErrorPayload, resolveApiErrorMessage } from "@/shared/api/error";
+import { queryKeys } from "@/shared/api/query-keys";
 
 type CommerceApi = typeof client.api.commerce;
 type PlacementApi = typeof client.api.placements;
 
 export type PlacementMatchResponse = InferResponseType<PlacementApi["$post"]>;
-export type PlacementInstanceProjection =
-  PlacementMatchResponse["placements"][number];
+export type PlacementInstanceProjection = PlacementMatchResponse["placements"][number];
 
 export type OrderingEntryResponse = InferResponseType<
   PlacementApi[":instanceId"]["ordering-entry"]["$post"]
@@ -20,26 +19,18 @@ export type OrderingEvaluationInput = Parameters<
   CommerceApi["ordering"]["evaluate"]["$post"]
 >[0]["json"];
 
-export type CreateOrderInput = Parameters<
-  CommerceApi["orders"]["$post"]
->[0]["json"];
+export type CreateOrderInput = Parameters<CommerceApi["orders"]["$post"]>[0]["json"];
 
 export type CommerceOrderDetailResponse = InferResponseType<
   CommerceApi["orders"][":orderId"]["$get"]
 >;
 
-export type BillDetailResponse = InferResponseType<
-  CommerceApi["bills"][":billId"]["$get"]
->;
+export type BillDetailResponse = InferResponseType<CommerceApi["bills"][":billId"]["$get"]>;
 
 export type PaymentCheckoutResponse = InferResponseType<
   CommerceApi["bill-lines"][":billLineId"]["checkout"]["$get"]
 >;
 
-export type PaymentTxResponse = InferResponseType<
-  CommerceApi["payments"][":paymentTxId"]["$get"]
->;
-
 const readJsonOrThrow = async <T>(response: Response, fallback: string): Promise<T> => {
   if (!response.ok) {
     const payload = await readApiErrorPayload(response);
@@ -53,12 +44,7 @@ export const usePlacementMatch = (
   type: "BUTTON" = "BUTTON",
 ) =>
   useQuery<PlacementMatchResponse>({
-    queryKey: computed(() => [
-      "placements",
-      "match",
-      type,
-      matchingContext.value,
-    ]),
+    queryKey: computed(() => ["placements", "match", type, matchingContext.value]),
     queryFn: async () => {
       if (matchingContext.value === null) {
         throw new Error("Missing placement matching context");
@@ -75,10 +61,7 @@ export const usePlacementMatch = (
           },
         },
       );
-      return readJsonOrThrow<PlacementMatchResponse>(
-        response,
-        "Failed to load placement",
-      );
+      return readJsonOrThrow<PlacementMatchResponse>(response, "Failed to load placement");
     },
     enabled: () => matchingContext.value !== null,
   });
@@ -98,18 +81,17 @@ export const resolvePlacementBindings = async (input: {
       },
     },
   );
-  return readJsonOrThrow<
-    InferResponseType<PlacementApi[":instanceId"]["bindings"]["$post"]>
-  >(response, "Failed to resolve placement bindings");
+  return readJsonOrThrow<InferResponseType<PlacementApi[":instanceId"]["bindings"]["$post"]>>(
+    response,
+    "Failed to resolve placement bindings",
+  );
 };
 
 export const resolvePlacementOrderingEntry = async (input: {
   placementInstanceId: number;
   matchingContext: unknown;
 }) => {
-  const response = await client.api.placements[":instanceId"][
-    "ordering-entry"
-  ].$post(
+  const response = await client.api.placements[":instanceId"]["ordering-entry"].$post(
     {
       param: { instanceId: String(input.placementInstanceId) },
       json: { matchingContext: input.matchingContext },
@@ -120,10 +102,7 @@ export const resolvePlacementOrderingEntry = async (input: {
       },
     },
   );
-  return readJsonOrThrow<OrderingEntryResponse>(
-    response,
-    "Failed to resolve ordering entry",
-  );
+  return readJsonOrThrow<OrderingEntryResponse>(response, "Failed to resolve ordering entry");
 };
 
 export const useEvaluateOrdering = () =>
@@ -137,9 +116,10 @@ export const useEvaluateOrdering = () =>
           },
         },
       );
-      return readJsonOrThrow<
-        InferResponseType<CommerceApi["ordering"]["evaluate"]["$post"]>
-      >(response, "Failed to evaluate ordering");
+      return readJsonOrThrow<InferResponseType<CommerceApi["ordering"]["evaluate"]["$post"]>>(
+        response,
+        "Failed to evaluate ordering",
+      );
     },
   });
 
@@ -189,10 +169,7 @@ export const useCommerceOrderDetail = (orderId: Ref<string | null>) =>
           },
         },
       );
-      return readJsonOrThrow<CommerceOrderDetailResponse>(
-        response,
-        "Failed to load order",
-      );
+      return readJsonOrThrow<CommerceOrderDetailResponse>(response, "Failed to load order");
     },
     enabled: () => orderId.value !== null,
   });
@@ -217,10 +194,7 @@ export const useBillDetail = (billId: Ref<string | null>) =>
           },
         },
       );
-      return readJsonOrThrow<BillDetailResponse>(
-        response,
-        "Failed to load bill",
-      );
+      return readJsonOrThrow<BillDetailResponse>(response, "Failed to load bill");
     },
     enabled: () => billId.value !== null,
     refetchOnMount: "always",
@@ -228,17 +202,13 @@ export const useBillDetail = (billId: Ref<string | null>) =>
 
 export const usePaymentCheckout = (billLineId: Ref<string | null>) =>
   useQuery<PaymentCheckoutResponse>({
-    queryKey: computed(() =>
-      queryKeys.commerce.paymentCheckout(billLineId.value),
-    ),
+    queryKey: computed(() => queryKeys.commerce.paymentCheckout(billLineId.value)),
     queryFn: async () => {
       if (billLineId.value === null) {
         throw new Error("Missing bill line id");
       }
 
-      const response = await client.api.commerce["bill-lines"][
-        ":billLineId"
-      ].checkout.$get(
+      const response = await client.api.commerce["bill-lines"][":billLineId"].checkout.$get(
         {
           param: {
             billLineId: billLineId.value,
@@ -250,10 +220,7 @@ export const usePaymentCheckout = (billLineId: Ref<string | null>) =>
           },
         },
       );
-      return readJsonOrThrow<PaymentCheckoutResponse>(
-        response,
-        "Failed to load checkout",
-      );
+      return readJsonOrThrow<PaymentCheckoutResponse>(response, "Failed to load checkout");
     },
     enabled: () => billLineId.value !== null,
   });
@@ -263,8 +230,7 @@ export const useCreateChargeForBillLine = () => {
 
   return useMutation({
     mutationFn: async (billLineId: string) => {
-      const response = await client.api.commerce["bill-lines"][":billLineId"]
-        .charges.$post(
+      const response = await client.api.commerce["bill-lines"][":billLineId"].charges.$post(
         {
           param: { billLineId },
         },
@@ -275,9 +241,7 @@ export const useCreateChargeForBillLine = () => {
         },
       );
       return readJsonOrThrow<
-        InferResponseType<
-          CommerceApi["bill-lines"][":billLineId"]["charges"]["$post"]
-        >
+        InferResponseType<CommerceApi["bill-lines"][":billLineId"]["charges"]["$post"]>
       >(response, "Failed to create charge");
     },
     onSuccess: () => {
@@ -288,15 +252,15 @@ export const useCreateChargeForBillLine = () => {
   });
 };
 
-export const useSyncPaymentTx = () => {
+export const useSyncBillLinePayment = () => {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: async (paymentTxId: string) => {
-      const response = await client.api.commerce.payments[":paymentTxId"].sync.$post(
+    mutationFn: async (billLineId: string) => {
+      const response = await client.api.commerce["bill-lines"][":billLineId"].payment.sync.$post(
         {
           param: {
-            paymentTxId,
+            billLineId,
           },
         },
         {
@@ -306,14 +270,12 @@ export const useSyncPaymentTx = () => {
         },
       );
       return readJsonOrThrow<
-        InferResponseType<
-          CommerceApi["payments"][":paymentTxId"]["sync"]["$post"]
-        >
+        InferResponseType<CommerceApi["bill-lines"][":billLineId"]["payment"]["sync"]["$post"]>
       >(response, "Failed to sync payment");
     },
-    onSuccess: (_, paymentTxId) => {
+    onSuccess: (_, billLineId) => {
       queryClient.invalidateQueries({
-        queryKey: queryKeys.commerce.paymentTx(paymentTxId),
+        queryKey: queryKeys.commerce.billLinePayment(billLineId),
       });
       queryClient.invalidateQueries({
         queryKey: ["commerce"],
@@ -327,9 +289,7 @@ export const useCancelRentalOrder = () => {
 
   return useMutation({
     mutationFn: async (orderId: string) => {
-      const response = await client.api.commerce.orders[":orderId"][
-        "cancel-rental"
-      ].$post(
+      const response = await client.api.commerce.orders[":orderId"]["cancel-rental"].$post(
         {
           param: {
             orderId,
@@ -342,9 +302,7 @@ export const useCancelRentalOrder = () => {
         },
       );
       return readJsonOrThrow<
-        InferResponseType<
-          CommerceApi["orders"][":orderId"]["cancel-rental"]["$post"]
-        >
+        InferResponseType<CommerceApi["orders"][":orderId"]["cancel-rental"]["$post"]>
       >(response, "Failed to cancel rental order");
     },
     onSuccess: (_, orderId) => {
diff --git a/apps/frontend/src/pages/PaymentCheckoutPage.vue b/apps/frontend/src/pages/PaymentCheckoutPage.vue
index 534f35ca2..5e6ef95f7 100644
--- a/apps/frontend/src/pages/PaymentCheckoutPage.vue
+++ b/apps/frontend/src/pages/PaymentCheckoutPage.vue
@@ -159,8 +159,6 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
-import { useRoute } from "vue-router";
 import {
   PuButton,
   PuCard,
@@ -168,10 +166,12 @@ import {
   PuPageHeader,
   PuPageScaffold,
 } from "@partner-up-dev/design-web";
+import { computed, ref } from "vue";
+import { useRoute } from "vue-router";
 import {
   useCreateChargeForBillLine,
   usePaymentCheckout,
-  useSyncPaymentTx,
+  useSyncBillLinePayment,
 } from "@/domains/commerce/queries/useCommerce";
 import { useFallbackBack } from "@/shared/routing/useFallbackBack";
 
@@ -185,7 +185,7 @@ const billLineId = computed(() => {
 
 const checkoutQuery = usePaymentCheckout(billLineId);
 const createChargeMutation = useCreateChargeForBillLine();
-const syncMutation = useSyncPaymentTx();
+const syncMutation = useSyncBillLinePayment();
 const clientPaymentError = ref<string | null>(null);
 
 type WeChatBridgeClientAction = {
@@ -203,9 +203,7 @@ type PaymentRedirectClientAction = {
   url: string;
 };
 
-type PaymentClientAction =
-  | WeChatBridgeClientAction
-  | PaymentRedirectClientAction;
+type PaymentClientAction = WeChatBridgeClientAction | PaymentRedirectClientAction;
 
 type WeixinJSBridgeResponse = {
   err_msg?: string;
@@ -240,17 +238,12 @@ const activePayment = computed(
 const isRecord = (value: unknown): value is Record<string, unknown> =>
   typeof value === "object" && value !== null && !Array.isArray(value);
 
-const readString = (
-  record: Record<string, unknown>,
-  key: string,
-): string | null => {
+const readString = (record: Record<string, unknown>, key: string): string | null => {
   const value = record[key];
   return typeof value === "string" && value.length > 0 ? value : null;
 };
 
-const parsePaymentClientAction = (
-  value: unknown,
-): PaymentClientAction | null => {
+const parsePaymentClientAction = (value: unknown): PaymentClientAction | null => {
   if (!isRecord(value)) return null;
   const type = readString(value, "type");
 
@@ -286,9 +279,7 @@ const activePaymentClientAction = computed(() =>
   parsePaymentClientAction(activePayment.value?.clientAction),
 );
 
-const activePaymentClientActionType = computed(
-  () => activePaymentClientAction.value?.type ?? null,
-);
+const activePaymentClientActionType = computed(() => activePaymentClientAction.value?.type ?? null);
 
 const redirectUrl = computed(() =>
   activePaymentClientAction.value?.type === "PAYMENT_REDIRECT"
@@ -297,7 +288,10 @@ const redirectUrl = computed(() =>
 );
 
 const canCreateCharge = computed(
-  () => checkout.value?.eligibility.payable === true && !activePayment.value,
+  () =>
+    checkout.value?.eligibility.payable === true &&
+    activePayment.value?.status !== "SUCCEEDED" &&
+    activePaymentClientActionType.value === null,
 );
 
 const paymentStatusLabel = computed(() => {
@@ -334,9 +328,8 @@ const createCharge = async (): Promise<void> => {
 };
 
 const syncPayment = async (): Promise<void> => {
-  const paymentTxId = activePayment.value?.id;
-  if (!paymentTxId) return;
-  await syncMutation.mutateAsync(paymentTxId);
+  if (!billLineId.value) return;
+  await syncMutation.mutateAsync(billLineId.value);
 };
 
 const runClientPaymentAction = async (value: unknown): Promise<void> => {
@@ -354,14 +347,11 @@ const runClientPaymentAction = async (value: unknown): Promise<void> => {
     await invokeWeChatBridgePayment(action);
     await syncPayment();
   } catch (error) {
-    clientPaymentError.value =
-      error instanceof Error ? error.message : "微信支付调用失败。";
+    clientPaymentError.value = error instanceof Error ? error.message : "微信支付调用失败。";
   }
 };
 
-const invokeWeChatBridgePayment = (
-  action: WeChatBridgeClientAction,
-): Promise<void> =>
+const invokeWeChatBridgePayment = (action: WeChatBridgeClientAction): Promise<void> =>
   new Promise((resolve, reject) => {
     const bridge = window.WeixinJSBridge;
     if (!bridge) {
diff --git a/apps/frontend/src/shared/api/query-keys.ts b/apps/frontend/src/shared/api/query-keys.ts
index 48fe418fe..ccbbc86f3 100644
--- a/apps/frontend/src/shared/api/query-keys.ts
+++ b/apps/frontend/src/shared/api/query-keys.ts
@@ -60,8 +60,8 @@ export const queryKeys = {
       ["commerce", "bill", billId] as const,
     paymentCheckout: (billLineId: string | null) =>
       ["commerce", "bill-line", billLineId, "checkout"] as const,
-    paymentTx: (paymentTxId: string | null) =>
-      ["commerce", "payment", paymentTxId] as const,
+    billLinePayment: (billLineId: string | null) =>
+      ["commerce", "bill-line", billLineId, "payment"] as const,
   },
   studySprint: {
     room: (prId: PRId | null) => ["study-sprint", "room", prId] as const,
diff --git a/docs/20-product-tdd/ecommerce-contracts.md b/docs/20-product-tdd/ecommerce-contracts.md
index 4f5815658..ccfe96a71 100644
--- a/docs/20-product-tdd/ecommerce-contracts.md
+++ b/docs/20-product-tdd/ecommerce-contracts.md
@@ -99,6 +99,8 @@ Does not own:
 Owns:
 
 - charge/refund obligation lines
+- BillLine-local provider execution slot identity
+- BillLine settlement confirmation
 - settlement derivation over successful payment movements
 - reconciliation from current buyer-side total to target buyer-side total
 
@@ -111,14 +113,33 @@ Does not own:
 
 Owns:
 
-- external money movement
-- gateway callback/query state
+- provider orchestration for external money movement
+- gateway callback verification and provider queries
+- provider-specific merchant order/refund reference derivation and parsing
+- payment provider registry and routing credentials
 
 Does not own:
 
 - bill obligation semantics
+- persisted provider transaction lifecycle truth
 - service execution semantics
 
+Payment provider systems own gateway-facing payment lifecycle truth. Backend
+Payment code can create provider executions, query provider state, and accept
+verified callbacks, but provider status, provider snapshots, provider
+transaction ids, and provider failure states are not persisted as backend
+payment transaction truth.
+
+BillLine owns the local provider execution slot for an obligation line:
+
+- `paymentProviderInstanceId` is set only when provider execution is initiated.
+- `attemptCount` is monotonic local key material for provider reference
+  derivation and is not reset after failed, closed, or expired provider states.
+- `settledAt` is Bill-owned settlement confirmation. For `CHARGE` lines it
+  means paid; for `REFUND` lines it means refunded.
+- provider-specific merchant order/refund numbers are derived by the provider
+  adapter from BillLine-local key material and are not persisted as Bill truth.
+
 ## User-Facing Route Spine
 
 Stable user-facing ecommerce route families are:
diff --git a/docs/20-product-tdd/system-state-and-authority.md b/docs/20-product-tdd/system-state-and-authority.md
index 3604aa59b..84f48803c 100644
--- a/docs/20-product-tdd/system-state-and-authority.md
+++ b/docs/20-product-tdd/system-state-and-authority.md
@@ -21,8 +21,10 @@ Persisted in Postgres via backend entities and repositories:
 - ecommerce family execution truth, including Rental execution fields on
   `rental_orders` and RideHailing provider binding / execution fields on
   `ride_hailing_orders`
-- ecommerce bill truth, including Bill, BillLine, and settlement derivation
-- ecommerce payment truth, including PaymentTx and gateway-facing payment state
+- ecommerce bill truth, including Bill, BillLine, BillLine payment execution
+  slot identity, BillLine settlement confirmation, and settlement derivation
+- ecommerce payment provider registry truth, including configured provider
+  instances and provider routing credentials
 - Study Sprint Pomodoro room, participant session, event ledger, and session aggregate state
 
 This is the source of truth for product behavior.
@@ -72,7 +74,9 @@ The backend is authoritative for:
 - PR join-gate configuration, join-gate projection, and join-notice acceptance resolution
 - PR feedback questionnaire projection, including mounted instance and current viewer response state
 - ecommerce merchandising configuration and placement matching outcome
-- ecommerce order, family execution, bill, and payment persisted lifecycle truth
+- ecommerce order, family execution, bill, and BillLine settlement lifecycle
+  truth
+- ecommerce payment provider registry and provider routing configuration
 - notification scheduling and dispatch for meeting-point update notifications
 - POI-owned availability rules that determine whether a PR location accepts a full PR time window
 - event-owned preference-tag pool, moderation state, default PR notes for future materialization, route pool, landing recommendation, and type-derived Anchor Event PR context
@@ -94,6 +98,12 @@ The frontend is authoritative for:
 
 The frontend must not recreate or override backend domain rules as independent truth.
 
+Payment provider systems are authoritative for gateway-facing payment lifecycle
+state, provider transaction identifiers, provider payload snapshots, and
+provider failure status. The backend may query or verify provider state when
+building payment projections or accepting callbacks, but it must not persist a
+separate provider transaction state mirror as product truth.
+
 ## Escalation Rule
 
 Update Product TDD when a change affects:
diff --git a/tasks/payment-provider-ssot-refactor/00-task-packet.md b/tasks/payment-provider-ssot-refactor/00-task-packet.md
new file mode 100644
index 000000000..a93b9afb5
--- /dev/null
+++ b/tasks/payment-provider-ssot-refactor/00-task-packet.md
@@ -0,0 +1,153 @@
+# Payment Provider SSOT Refactor
+
+## Objective & Hypothesis
+
+Refactor the payment system so `PaymentTx` no longer persists provider-owned
+transaction truth. Provider payment state should be queried or accepted from the
+payment provider as the single source of truth, while the backend keeps only the
+local contracts needed for bill ownership, user authorization, idempotency,
+settlement consequences, and auditability.
+
+Rejected / disputed hypothesis: replacing `PaymentTx` with a smaller local
+payment intent plus settlement event may still be insufficiently thorough. Do
+not treat that shape as accepted without further discussion.
+
+Current stronger proposal from discussion:
+
+- Delete provider projections/caches from local persistence.
+- Query provider when provider-owned state is needed.
+- Treat `amountFen`, `currency`, and `expiresAt` as provider order parameters
+  or projections rather than local payment transaction facts.
+- Move or eliminate local fields such as `merchantOrderNo`,
+  `merchantRefundNo`, `requestedBy`, `type`, and `clientId`; if retained, they
+  should belong to `BillLine` or a stronger local owner rather than `PaymentTx`.
+- Prefer deriving merchant order/refund numbers from stable key material such
+  as `billLineId + paymentAttemptId` by hash or another deterministic scheme,
+  instead of storing those numbers.
+- Superseded candidate: allowing a `BillLine` to correspond to multiple payment
+  attempts would require `paymentAttemptSeq` plus provider-instance history, or
+  an attempt JSONB/history shape, which reintroduces unnecessary payment attempt
+  persistence complexity.
+- Current simplification: a `BillLine` should always correspond to one payment
+  execution slot / PaymentTx concept. This avoids multi-attempt local history.
+- `paymentProviderInstanceId` is set only when a payment execution is initiated.
+- If the provider-side execution becomes failed, closed, or expired, the
+  BillLine should not be reopened or recreated. Instead, clear the current
+  provider binding and let the frontend's next provider choice open a new
+  PaymentTx concept for the same BillLine.
+- `attemptCount` is local BillLine identity material. It is monotonic and should
+  not be reset when provider-side execution fails, closes, or expires. The next
+  PaymentTx concept uses `attemptCount + 1` to avoid provider reference
+  collision.
+- Merchant order/refund number derivation is provider-owned. Payment should ask
+  the provider adapter to derive the provider reference from BillLine-local key
+  material and provider rules rather than owning the derivation globally.
+- Settlement may be persisted directly on `BillLine` as local bill truth, not as
+  provider transaction truth. The agreed field name is `settledAt`.
+
+## Guardrails Touched
+
+- Typed input: `Constraint`
+- Active mode: `Execute`
+- Durable owners touched:
+  - `docs/20-product-tdd/system-state-and-authority.md`
+  - `docs/20-product-tdd/ecommerce-contracts.md`
+  - backend payment entities, repositories, domain use-cases, controllers
+  - frontend checkout and bill projections
+- Durable docs now state provider systems own provider payment lifecycle truth,
+  while BillLine owns provider execution slot identity and settlement
+  confirmation.
+
+## Current Understanding
+
+- `PaymentTx` currently combines at least three responsibilities:
+  - local charge/refund intent and merchant order/refund number mapping
+  - cached provider lifecycle state and provider payload snapshots
+  - settlement input used by Bill and Trade consequences
+- Removing provider truth persistence must not remove:
+  - bill-line authorization and amount integrity
+  - stable merchant order/refund number generation
+  - idempotent provider callbacks
+  - idempotent bill settlement consequences
+  - refund linkage to the original successful charge
+
+## Implemented Model
+
+- Superseded: `BillLine.paymentAttemptSeq` multi-attempt model.
+- Each `BillLine` has exactly one provider payment execution slot at a time.
+- Starting provider payment uses BillLine-local key material including
+  `{ providerInstance, billLineId, billLine.kind, attemptCount }`.
+- The provider adapter owns merchant order/refund number derivation from that
+  tuple.
+- Checkout state is assembled dynamically from Bill/BillLine local facts plus a
+  provider query for the derived provider reference.
+- Provider callbacks parse/verify the provider reference through the provider
+  adapter, recover the local tuple, and load the BillLine.
+- Provider state should not be copied into local payment state.
+- Provider-confirmed settlement is written onto the BillLine as Bill-owned
+  settlement truth via `settledAt`, so downstream consequences do not need a
+  persisted `PaymentTx` table.
+- Persisted `payment_txs` schema and repository have been removed. The forward
+  migration backfills settled BillLines from successful old rows, then drops the
+  table.
+
+## Field Dynamics
+
+- `paymentProviderInstanceId`
+  - Initial state: `null`.
+  - Set when a user/operator initiates a provider execution for the BillLine.
+  - Remains set while provider execution is pending/action-required.
+  - Remains set after `settledAt` is written, as local routing/evidence context
+    for the settled execution.
+  - Cleared only when provider reports failed/closed/expired and the BillLine is
+    eligible for a new execution choice.
+- `attemptCount`
+  - Initial state: `0`.
+  - Incremented exactly when a new provider execution slot is opened.
+  - Current provider reference uses the current `attemptCount`.
+  - Never decremented or reset; clearing `paymentProviderInstanceId` does not
+    change it.
+- `settledAt`
+  - Initial state: `null`.
+  - Written once provider-confirmed success is accepted for the BillLine.
+  - For `CHARGE` BillLines, means paid/settled.
+  - For `REFUND` BillLines, means refunded/settled.
+  - Once set, provider execution should not be retried from the same BillLine.
+
+## Verification
+
+- Provider reference unit coverage:
+  - WeChatPay charge/refund references round-trip through the provider adapter.
+  - Tampered references, wrong provider instance, wrong kind, and out-of-range
+    attempt counts are rejected.
+  - References stay within WeChatPay's 32-character merchant reference limit.
+- Bill projection unit coverage:
+  - Charge/refund settlement totals derive from BillLine `settledAt`.
+  - Active provider bindings project as processing/refund-pending without a
+    persisted payment transaction.
+- Backend provider-backed scenario coverage:
+  - Real fake WeChatPay HTTP server receives charge creation.
+  - First provider attempt is marked failed by the mock provider, sync queries
+    provider state, clears `paymentProviderInstanceId`, and keeps
+    `attemptCount = 1`.
+  - Second attempt creates a different provider reference, mock provider is
+    marked successful, sync queries provider state, writes `settledAt`, and
+    leaves `attemptCount = 2`.
+  - Scenario asserts the legacy `payment_txs` table is absent.
+- Backend commerce scenario coverage:
+  - Existing rental order persistence paths still pass.
+  - Late payment after a pending termination attempt or cancelled order does not
+    start fulfillment.
+- Mock provider package coverage:
+  - Fake WeChatPay server unit tests pass.
+- System browser scenario coverage:
+  - Real frontend, real backend HTTP, isolated database, and Playwright
+    Chromium path execute the rental ordering flow successfully.
+  - The browser flow still reaches checkout, order placement, and order-state
+    assertions after removing persisted `PaymentTx`.
+
+## Next Step
+
+Review implementation diff for naming, migration rollout, and the remaining
+rollout decision around existing in-flight production `payment_txs` rows before
+merge.
diff --git a/tasks/payment-provider-ssot-refactor/10-implementation-plan.md b/tasks/payment-provider-ssot-refactor/10-implementation-plan.md
new file mode 100644
index 000000000..4651e9b3b
--- /dev/null
+++ b/tasks/payment-provider-ssot-refactor/10-implementation-plan.md
@@ -0,0 +1,389 @@
+# Implementation Plan
+
+## Target Model
+
+`PaymentTx` should stop being a persisted entity. A persisted BillLine owns one
+provider execution slot at a time:
+
+- `paymentProviderInstanceId`: nullable provider binding for the current or
+  settled execution slot.
+- `attemptCount`: monotonic local counter used as provider reference key
+  material.
+- `settledAt`: nullable BillLine settlement truth.
+
+Provider adapters own merchant order/refund number derivation and parsing.
+Provider status, provider snapshots, provider transaction ids, prepay ids,
+failure codes, amount copies, currency copies, and payment expiry copies should
+not be persisted as payment transaction truth.
+
+Runtime `PaymentTx` may remain as an in-memory/provider-facing concept if that
+name is useful, but it must not have a database table or repository.
+
+## Impact Handshake
+
+Address and Object:
+
+- Durable docs:
+  - `docs/20-product-tdd/system-state-and-authority.md`
+  - `docs/20-product-tdd/ecommerce-contracts.md`
+- Backend schema:
+  - `bill_lines`
+  - `payment_txs`
+  - payment provider instance schema remains provider registry truth
+- Backend code:
+  - payment checkout, notifications, refund flow, bill detail, bill settlement
+  - trade settlement consequence integration
+  - commerce controller route contract
+- Frontend:
+  - checkout page no longer syncs by `paymentTxId`
+  - bill detail line state no longer depends on `latestPaymentTx`
+
+State Diff:
+
+- From: `BillLine 1:N persisted PaymentTx`, where `PaymentTx` mixes local
+  attempt, provider cache, provider references, and settlement evidence.
+- To: `BillLine 1:1 current provider execution slot`, where provider state is
+  queried from provider and confirmed settlement is recorded on BillLine.
+
+Blast Radius Forecast:
+
+- Database migration and data migration.
+- Backend API response shape for checkout and bill detail.
+- Frontend query hooks and checkout UI.
+- Scenario tests that seed or assert `PaymentTx`.
+- Refund creation and original-charge lookup.
+- Provider callback idempotency and stale callback handling.
+
+Invariants Check:
+
+- A user can only pay their own charge BillLine.
+- BillLine amount/currency remain Bill-owned obligation truth.
+- A settled charge BillLine cannot be paid again.
+- A settled refund BillLine cannot be refunded again.
+- Provider references must be deterministic, parseable, tamper-checked, and fit
+  provider limits.
+- `attemptCount` never decreases.
+- Failed/closed/expired provider execution clears `paymentProviderInstanceId`
+  only; it does not reset `attemptCount`.
+- Late payment settlement must not start fulfillment for an ineligible,
+  terminated, or cancelled order.
+
+Verification:
+
+- Backend unit tests for provider reference derivation/parsing.
+- Backend unit tests for BillLine settlement derivation.
+- Backend scenario tests for checkout, callback settlement, retry after terminal
+  provider state, refunds, and late payment after cancellation.
+- Frontend unit or scenario coverage for checkout sync by BillLine rather than
+  `paymentTxId`.
+- Static gate slices after implementation: at least backend type/build and
+  targeted scenario tests; full `pnpm check:static` before shipping.
+
+## Execution Slices
+
+### 1. Solidify Durable Contract
+
+Update Product TDD before code:
+
+- `system-state-and-authority.md`
+  - Remove backend ownership of `PaymentTx` and gateway-facing payment state.
+  - State that provider owns provider payment lifecycle truth.
+  - State that BillLine owns local provider execution slot identity and
+    settlement confirmation.
+- `ecommerce-contracts.md`
+  - Clarify Payment owns provider orchestration and provider queries, not
+    persisted provider transaction state.
+  - Clarify Bill settlement derives from BillLine `settledAt`.
+
+Exit criteria:
+
+- Durable docs no longer claim `PaymentTx` is backend payment truth.
+- New BillLine/provider boundary is explicit.
+
+### 2. Add BillLine Payment Slot Schema
+
+Schema changes:
+
+- Add `bill_lines.payment_provider_instance_id uuid null`.
+- Add `bill_lines.attempt_count integer not null default 0`.
+- Add `bill_lines.settled_at timestamptz null`.
+- Reference `payment_provider_instances(id)` if entity import order permits
+  cleanly after removing `payment_txs`; otherwise split provider instance schema
+  into a non-circular entity module first.
+
+Data migration:
+
+- Backfill `settled_at` from successful charge/refund `payment_txs` where
+  present.
+- Backfill `payment_provider_instance_id` and `attempt_count` for settled lines
+  from the successful persisted tx when this is safe.
+- Decide rollout handling for in-flight `PaymentTx` rows before dropping the
+  table. If production may contain in-flight rows, add a reconciliation step or
+  pause payment initiation during migration.
+
+Exit criteria:
+
+- BillLine can represent the new local slot and settlement truth.
+- Existing successful settlements are not lost.
+
+### 3. Provider Reference API
+
+Extend provider ports with provider-owned reference functions:
+
+- derive charge reference from `{ billLineId, kind, providerInstanceId,
+  attemptCount }`.
+- derive refund reference from the same local key material.
+- parse and verify a provider reference back into local key material.
+
+WeChatPay constraints:
+
+- `out_trade_no` / `out_refund_no` derivation must fit WeChatPay length limits.
+- Encoding should be reversible enough to recover `billLineId`, `kind`, and
+  `attemptCount`, with tamper detection.
+- Unit tests must cover round trip, tamper rejection, wrong-kind rejection, and
+  max-length output.
+
+Exit criteria:
+
+- Payment domain no longer knows merchant number algorithms.
+- Callback handling can locate a BillLine without a persisted mapping table.
+
+### 4. Replace PaymentTx Repository Usage
+
+Remove `PaymentTxRepository` from payment and trade flows.
+
+Checkout:
+
+- Resolve BillLine/Bill/Order authorization as today.
+- If `settledAt` is set, return paid/refunded projection.
+- If `paymentProviderInstanceId` is set and unsettled, derive provider reference
+  and query provider for dynamic status.
+- If provider state is failed/closed/expired, clear
+  `paymentProviderInstanceId` while preserving `attemptCount`, then allow a new
+  frontend-selected provider execution.
+- Starting a new execution atomically sets provider binding and increments
+  `attemptCount`, then calls provider create/prepay.
+- Unknown provider-create errors should not blindly clear the binding; later
+  query/callback should recover if provider accepted the request.
+
+Notifications:
+
+- Parse and verify provider reference through provider adapter.
+- Load BillLine by parsed id.
+- Verify provider instance/kind/attempt alignment.
+- On confirmed success, write `settledAt` idempotently and trigger Bill/Order
+  settlement consequence.
+- Do not persist provider status or payload.
+
+Refund:
+
+- Find original charge by `refundOfBillLineId` and `settledAt`.
+- Use original charge BillLine provider binding and attempt count to derive the
+  original merchant order reference.
+- Set refund line provider binding and increment its `attemptCount` when
+  opening refund execution.
+
+Exit criteria:
+
+- No production use-case depends on persisted `PaymentTx`.
+- Provider state is read from provider, not local cache.
+
+### 5. Bill And Trade Settlement
+
+Replace `deriveBillPaymentState({ lines, txs })` with BillLine-based
+settlement:
+
+- Charge line is paid when `kind = CHARGE` and `settledAt is not null`.
+- Refund line is refunded when `kind = REFUND` and `settledAt is not null`.
+- Pending/action-required/failed checkout statuses are dynamic provider-query
+  projections, not settlement truth.
+
+Update trade settlement consequence:
+
+- Apply prepaid consequence when all charge BillLines are settled.
+- Preserve current guards for non-open orders and pending termination attempts.
+
+Exit criteria:
+
+- Bill settlement no longer needs `PaymentTx`.
+- Late successful payment cannot bypass order eligibility guards.
+
+### 6. API And Frontend Contract
+
+Backend route changes:
+
+- Remove or deprecate `/api/commerce/payments/:paymentTxId`.
+- Replace sync by payment id with BillLine-scoped sync/action, for example
+  `/api/commerce/bill-lines/:billLineId/payment/sync`.
+- Keep charge creation BillLine-scoped.
+
+Frontend changes:
+
+- `PaymentCheckoutPage` no longer stores or syncs by `paymentTxId`.
+- Checkout active payment projection is BillLine-scoped.
+- Bill detail removes `latestPaymentTx` and `activePaymentTxId` assumptions.
+- UI retry action appears only when provider projection says terminal failure
+  and BillLine is unsettled.
+
+Exit criteria:
+
+- Frontend has no `PaymentTxId` dependency.
+- User-visible checkout behavior remains intact.
+
+### 7. Remove PaymentTx Persistence
+
+After code no longer reads or writes `payment_txs`:
+
+- Remove `payment_txs` entity.
+- Remove `PaymentTxRepository`.
+- Remove payment tx model types that only served persistence state.
+- Add forward-only schema migration to drop `payment_txs` after any required
+  data migration has run.
+- Clean scenario builders and tests that seed `PaymentTx`.
+
+Exit criteria:
+
+- `rg "PaymentTx|payment_txs|paymentTxId"` only finds obsolete changelog/task
+  references or intentionally renamed runtime concepts.
+
+## Open Implementation Questions
+
+- Exact provider reference encoding for WeChatPay under length limits.
+  - Implemented as 32 characters:
+    - `PC`/`PR` prefix
+    - 22-character base64url BillLine UUID
+    - 3-character base36 attempt count
+    - 5-character HMAC signature over provider instance, BillLine, kind, and
+      attempt
+- Whether stale success callbacks for a previously cleared provider binding
+  should settle the BillLine, no-op, or enter operator review.
+- How deployment should treat existing in-flight persisted `PaymentTx` rows.
+- Whether `paymentProviderInstanceId` should remain after settled refund/charge
+  forever as local routing evidence, or be cleared after a retention window.
+
+## Implementation Status
+
+- Durable Product TDD updated for provider SSOT and BillLine-owned settlement.
+- BillLine schema now carries `paymentProviderInstanceId`, `attemptCount`, and
+  `settledAt`.
+- Persisted `payment_txs` entity/repository has been removed; migration backfills
+  successful old settlements, then drops the table.
+- Payment checkout, sync, notifications, refund execution, Bill projection, and
+  trade settlement now operate from BillLine plus live provider query.
+- Commerce API sync is BillLine-scoped.
+- Frontend checkout no longer syncs by `paymentTxId`.
+- Runtime provider model was renamed away from `payment-tx` terminology.
+
+## Acceptance Plan
+
+Static checks are intentionally omitted from this section. Acceptance should
+prove behavior, not implementation filenames.
+
+### Provider Reference Ownership
+
+Test that provider references are derived and parsed only through the provider
+adapter:
+
+- Creating a charge passes BillLine-local key material into the adapter and
+  does not persist a merchant order number.
+- Creating a refund passes BillLine-local key material into the adapter and does
+  not persist a merchant refund number.
+- A derived reference round-trips back to the original BillLine id, kind,
+  provider instance id, and attempt count.
+- A tampered reference is rejected before any BillLine settlement mutation.
+- A reference with the wrong BillLine kind is rejected.
+- The WeChatPay reference output fits provider length constraints.
+
+### Fresh Charge Flow
+
+Test a charge BillLine with no provider binding:
+
+- Before payment starts, checkout shows no active provider execution and allows
+  payment if Bill, Order, and viewer rules allow it.
+- Starting payment with a selected provider writes
+  `paymentProviderInstanceId`, increments `attemptCount` from `0` to `1`, leaves
+  `settledAt` null, and calls the provider with amount/currency read from the
+  BillLine.
+- The returned client action is usable by checkout, but provider status,
+  provider snapshots, transaction ids, and merchant order numbers are not
+  persisted.
+- Reloading checkout for the same pending execution queries provider using the
+  same derived reference and does not increment `attemptCount` again.
+
+### Successful Charge Settlement
+
+Test provider-confirmed charge success:
+
+- A valid provider callback locates the BillLine from the derived provider
+  reference.
+- The BillLine is marked settled by writing `settledAt`.
+- Replaying the same successful callback is idempotent and does not duplicate
+  fulfillment or settlement consequences.
+- Once all charge BillLines for a Bill are settled, the order settlement
+  consequence runs exactly once when the order is eligible.
+- If the order has a pending termination attempt, is cancelled, or is otherwise
+  ineligible, late payment success does not start fulfillment.
+
+### Failed Closed Expired Charge Recovery
+
+Test terminal provider states that are not success:
+
+- Checkout/query sees provider failed, closed, expired, or provider-not-found
+  state and clears `paymentProviderInstanceId`.
+- Clearing provider binding does not reset or decrement `attemptCount`.
+- The same BillLine can start a new provider execution after frontend provider
+  selection, and the new execution increments `attemptCount`.
+- If the same provider is selected again, the new derived reference differs from
+  the previous one.
+- The BillLine remains unsettled until provider-confirmed success.
+
+### Authorization And Eligibility
+
+Test existing product invariants still hold:
+
+- A user cannot pay another user's charge BillLine.
+- A user cannot start payment for a refund BillLine through the user checkout
+  charge flow.
+- A closed Bill or non-open Order blocks payment initiation.
+- A settled BillLine cannot open a new provider execution.
+- A missing or disabled provider instance cannot be bound to a BillLine.
+
+### Refund Flow
+
+Test refund execution without persisted PaymentTx:
+
+- A refund BillLine can start refund execution only when its original charge
+  BillLine is settled.
+- The original charge provider reference is derived from the original charge
+  BillLine's provider binding and attempt count.
+- The refund BillLine writes its own `paymentProviderInstanceId`, increments
+  its own `attemptCount`, and remains unsettled until provider-confirmed refund
+  success.
+- Successful refund callback writes `settledAt` on the refund BillLine.
+- Replaying a refund success callback is idempotent.
+- A failed/closed/expired refund clears provider binding without resetting
+  `attemptCount`, allowing a new refund execution selection later.
+
+### Bill Projection
+
+Test Bill and checkout projections:
+
+- Bill paid totals are derived from charge BillLines with `settledAt`.
+- Bill refunded totals are derived from refund BillLines with `settledAt`.
+- Pending, action-required, failed, and expired display states come from live
+  provider query projection, not from persisted payment status.
+- Bill detail no longer exposes or depends on latest/active persisted payment
+  transaction ids.
+- Checkout sync is BillLine-scoped and does not require a payment transaction
+  id.
+
+### Migration And Existing Data
+
+Test migration behavior with representative old rows:
+
+- Successful old charge rows backfill `settledAt` onto their charge BillLine.
+- Successful old refund rows backfill `settledAt` onto their refund BillLine.
+- Non-success old rows do not mark BillLines settled.
+- Backfilled BillLines retain enough provider binding and attempt count context
+  to derive their provider reference if needed.
+- Existing successful settlement consequences are not duplicated by migration.

From 181c40639887c22347bbb4f274fb29ce9b59dff1 Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Fri, 19 Jun 2026 20:55:18 +0800
Subject: [PATCH 23/94] fix(portless): restore LAN dev routing

- derive backend portless hosts from active frontend URL

- support LAN IP inference while preserving caller overrides

- add provider-scoped fake Caocao and WeChatPay portless routes
---
 .../0077_dev_ride_hailing_caocao_fixture.sql  |   2 +-
 .../payment/services/payment-provider.test.ts |   7 +
 .../payment/services/payment-provider.ts      |   9 +-
 apps/frontend/vite.config.ts                  | 121 ++++++++-----
 docs/20-product-tdd/cross-unit-contracts.md   |   4 +-
 docs/40-deployment/environments.md            |  38 +++-
 package.json                                  |   3 +-
 .../bin/fake-wechatpay-server.ts              |   6 +-
 scripts/ensure-dev-servers.mjs                |  57 +++++-
 scripts/portless.mjs                          | 100 ++++++++++-
 .../00-task-packet.md                         | 170 +++++++++++++++++-
 11 files changed, 458 insertions(+), 59 deletions(-)

diff --git a/apps/backend/data-migrations/0077_dev_ride_hailing_caocao_fixture.sql b/apps/backend/data-migrations/0077_dev_ride_hailing_caocao_fixture.sql
index d46d9ca09..e98351d74 100644
--- a/apps/backend/data-migrations/0077_dev_ride_hailing_caocao_fixture.sql
+++ b/apps/backend/data-migrations/0077_dev_ride_hailing_caocao_fixture.sql
@@ -7,7 +7,7 @@
 
 do $$
 declare
-  fake_caocao_endpoint constant text := 'https://fake-caocao.localhost';
+  fake_caocao_endpoint constant text := 'https://caocao.partner-up.local';
   backend_callback_base_url constant text := 'https://api.partner-up.localhost';
   old_task_private_pr_type constant text := 'ride-hailing-mvp-dev';
   placement_pr_type constant text := 'RIDE_HAILING';
diff --git a/apps/backend/src/domains/payment/services/payment-provider.test.ts b/apps/backend/src/domains/payment/services/payment-provider.test.ts
index 05d292aac..4f215dcfe 100644
--- a/apps/backend/src/domains/payment/services/payment-provider.test.ts
+++ b/apps/backend/src/domains/payment/services/payment-provider.test.ts
@@ -88,6 +88,13 @@ const createUnitPaymentProviderPort = (
 };
 
 describe("WeChatPay merchant payment references", () => {
+  it("allows portless local endpoint hosts outside production", () => {
+    const providerInstance = buildProviderInstance();
+    providerInstance.config.endpointBaseUrl = "https://wechatpay.partner-up.local";
+
+    expect(() => createUnitPaymentProviderPort(providerInstance)).not.toThrow();
+  });
+
   it("round-trips charge reference material without persisted merchant order state", () => {
     const port = createUnitPaymentProviderPort();
 
diff --git a/apps/backend/src/domains/payment/services/payment-provider.ts b/apps/backend/src/domains/payment/services/payment-provider.ts
index b3af13698..57f57df8a 100644
--- a/apps/backend/src/domains/payment/services/payment-provider.ts
+++ b/apps/backend/src/domains/payment/services/payment-provider.ts
@@ -202,7 +202,11 @@ const normalizeRuntimeWeChatPayProviderConfig = (
 };
 
 const isLocalEndpointHost = (hostname: string): boolean =>
-  hostname === "localhost" || hostname === "127.0.0.1" || hostname === "::1";
+  hostname === "localhost" ||
+  hostname === "127.0.0.1" ||
+  hostname === "::1" ||
+  hostname.endsWith(".localhost") ||
+  hostname.endsWith(".local");
 
 const isOfficialWeChatPayEndpointHost = (hostname: string): boolean =>
   hostname === "api.mch.weixin.qq.com";
@@ -225,7 +229,8 @@ const assertEndpointBaseUrlAllowed = (endpointBaseUrl: string | null): void => {
   ) {
     return throwHttpProblem({
       status: 500,
-      detail: "WeChatPay endpointBaseUrl must be localhost or the official host outside production",
+      detail:
+        "WeChatPay endpointBaseUrl must be local, portless local, or the official host outside production",
     });
   }
 };
diff --git a/apps/frontend/vite.config.ts b/apps/frontend/vite.config.ts
index e6e42fc26..47b6b713b 100644
--- a/apps/frontend/vite.config.ts
+++ b/apps/frontend/vite.config.ts
@@ -1,9 +1,9 @@
-import { defineConfig, loadEnv } from "vite";
-import vue from "@vitejs/plugin-vue";
-import unocss from "unocss/vite";
-import { resolve } from "path";
 import { execSync } from "node:child_process";
+import vue from "@vitejs/plugin-vue";
 import { parse as parseJsonc } from "jsonc-parser";
+import { resolve } from "path";
+import unocss from "unocss/vite";
+import { defineConfig, loadEnv } from "vite";
 
 const jsoncPlugin = () => ({
   name: "jsonc-loader",
@@ -64,6 +64,58 @@ const parsePort = (value: string | undefined, fallback: number): number => {
   return Number.isFinite(port) ? port : fallback;
 };
 
+const resolvePortlessSiblingHost = (
+  portlessUrl: string | null,
+  currentAppName: string,
+  siblingAppName: string,
+): string => {
+  if (!portlessUrl) {
+    return `${siblingAppName}.localhost`;
+  }
+
+  try {
+    const hostname = new URL(portlessUrl).hostname;
+
+    if (hostname === currentAppName) {
+      return siblingAppName;
+    }
+
+    if (hostname.startsWith(`${currentAppName}.`)) {
+      return `${siblingAppName}${hostname.slice(currentAppName.length)}`;
+    }
+  } catch {
+    return `${siblingAppName}.localhost`;
+  }
+
+  return `${siblingAppName}.localhost`;
+};
+
+const resolvePortlessProxyTarget = (portlessUrl: string | null): string => {
+  if (!portlessUrl) {
+    return "https://127.0.0.1";
+  }
+
+  try {
+    const url = new URL(portlessUrl);
+    return `${url.protocol}//127.0.0.1${url.port ? `:${url.port}` : ""}`;
+  } catch {
+    return "https://127.0.0.1";
+  }
+};
+
+const resolvePortlessHostHeader = (portlessUrl: string | null, hostname: string): string => {
+  if (!portlessUrl) {
+    return hostname;
+  }
+
+  try {
+    const url = new URL(portlessUrl);
+    return url.port ? `${hostname}:${url.port}` : hostname;
+  } catch {
+    return hostname;
+  }
+};
+
 const readGitValue = (command: string): string | null => {
   try {
     const output = execSync(command, {
@@ -97,26 +149,17 @@ const frameworkVendorPackages = [
   "hookable",
 ] as const;
 
-const validationVendorPackages = [
-  "zod",
-  "vee-validate",
-  "@vee-validate/zod",
-] as const;
+const validationVendorPackages = ["zod", "vee-validate", "@vee-validate/zod"] as const;
 
 const posterRenderingVendorPackages = ["html2canvas"] as const;
 const qrCodeVendorPackages = ["qrcode"] as const;
 
 const normalizeModuleId = (id: string): string => id.replace(/\\/g, "/");
 
-const includesNodePackage = (
-  id: string,
-  packageName: string,
-): boolean => id.includes(`/node_modules/${packageName}/`);
+const includesNodePackage = (id: string, packageName: string): boolean =>
+  id.includes(`/node_modules/${packageName}/`);
 
-const includesAnyNodePackage = (
-  id: string,
-  packageNames: readonly string[],
-): boolean =>
+const includesAnyNodePackage = (id: string, packageNames: readonly string[]): boolean =>
   packageNames.some((packageName) => includesNodePackage(id, packageName));
 
 const getManualChunkName = (id: string): string | undefined => {
@@ -142,10 +185,7 @@ const getManualChunkName = (id: string): string | undefined => {
     return "vendor";
   }
 
-  if (
-    moduleId.includes("/src/domains/share/") ||
-    moduleId.includes("/src/lib/poster-types")
-  ) {
+  if (moduleId.includes("/src/domains/share/") || moduleId.includes("/src/lib/poster-types")) {
     return "share";
   }
 
@@ -163,16 +203,20 @@ export default defineConfig(({ mode }) => {
     : parsePort(env.VITE_PORT, 5173);
   const backendHost = normalizeEnvValue(env.VITE_BACKEND_HOST) ?? "localhost";
   const backendPort = normalizeEnvValue(env.VITE_BACKEND_PORT) ?? "3000";
-  const portlessBackendHost = "api.partner-up.localhost";
+  const portlessUrl = normalizeEnvValue(process.env.PORTLESS_URL);
+  const portlessBackendHost = resolvePortlessSiblingHost(
+    portlessUrl,
+    "partner-up",
+    "api.partner-up",
+  );
+  const portlessBackendHostHeader = resolvePortlessHostHeader(portlessUrl, portlessBackendHost);
   const backendProxyTarget =
     normalizeEnvValue(env.VITE_BACKEND_PROXY_TARGET) ??
-    (isPortless ? "https://127.0.0.1" : `http://${backendHost}:${backendPort}`);
+    (isPortless ? resolvePortlessProxyTarget(portlessUrl) : `http://${backendHost}:${backendPort}`);
   const backendProxyUrl = new URL(backendProxyTarget);
-  const backendProxyHeaders = isPortless
-    ? { Host: portlessBackendHost }
-    : undefined;
+  const backendProxyHeaders = isPortless ? { Host: portlessBackendHostHeader } : undefined;
   const frontendApiUrl = isPortless
-    ? (normalizeEnvValue(process.env.PORTLESS_URL) ?? "")
+    ? (portlessUrl ?? "")
     : (normalizeEnvValue(env.VITE_API_URL) ?? "");
   const frontendCommitHash =
     normalizeEnvValue(env.VITE_FRONTEND_COMMIT_HASH) ??
@@ -194,9 +238,7 @@ export default defineConfig(({ mode }) => {
     ],
     define: {
       "import.meta.env.VITE_API_URL": JSON.stringify(frontendApiUrl),
-      "import.meta.env.VITE_FRONTEND_COMMIT_HASH": JSON.stringify(
-        frontendCommitHash,
-      ),
+      "import.meta.env.VITE_FRONTEND_COMMIT_HASH": JSON.stringify(frontendCommitHash),
     },
     build: {
       outDir: "./dist",
@@ -216,18 +258,10 @@ export default defineConfig(({ mode }) => {
         scss: {
           additionalData: (source, file) => {
             const hasStyleNamespaces =
-              source.includes(
-                `@use "@partner-up-dev/design-web/styles/functions" as fn`,
-              ) ||
-              source.includes(
-                `@use '@partner-up-dev/design-web/styles/functions' as fn`,
-              ) ||
-              source.includes(
-                `@use "@partner-up-dev/design-web/styles/mixins" as mx`,
-              ) ||
-              source.includes(
-                `@use '@partner-up-dev/design-web/styles/mixins' as mx`,
-              );
+              source.includes(`@use "@partner-up-dev/design-web/styles/functions" as fn`) ||
+              source.includes(`@use '@partner-up-dev/design-web/styles/functions' as fn`) ||
+              source.includes(`@use "@partner-up-dev/design-web/styles/mixins" as mx`) ||
+              source.includes(`@use '@partner-up-dev/design-web/styles/mixins' as mx`);
 
             if (
               file.includes("src/components/") ||
@@ -256,8 +290,7 @@ export default defineConfig(({ mode }) => {
           target: backendProxyTarget,
           changeOrigin: !isPortless,
           ...(backendProxyHeaders ? { headers: backendProxyHeaders } : {}),
-          secure:
-            !isPortless && !backendProxyUrl.hostname.endsWith(".localhost"),
+          secure: !isPortless && !backendProxyUrl.hostname.endsWith(".localhost"),
         },
       },
     },
diff --git a/docs/20-product-tdd/cross-unit-contracts.md b/docs/20-product-tdd/cross-unit-contracts.md
index ac3e79607..2a1a4fefd 100644
--- a/docs/20-product-tdd/cross-unit-contracts.md
+++ b/docs/20-product-tdd/cross-unit-contracts.md
@@ -18,7 +18,9 @@ Contract implication:
 - Root portless entries are backed by Node wrapper scripts so the command names stay stable across macOS, Linux, and Windows.
 - `portless.json` maps `apps/frontend` to the public app name `partner-up` and `apps/backend` to the public app name `api.partner-up`.
 - During portless development, Vite reads `PORTLESS_URL`, `HOST`, and `PORT` from the portless runtime, publishes `import.meta.env.VITE_API_URL` as the frontend origin, and keeps browser API calls same-origin through the frontend `/api` proxy.
-- The frontend `/api` proxy targets the backend portless app by sending `Host: api.partner-up.localhost`, which keeps local browser flows aligned with the typed backend HTTP contract while application code stays free of fixed numeric ports.
+- The frontend `/api` proxy targets the backend portless app by deriving the backend host from the active frontend `PORTLESS_URL`, for example `api.partner-up.localhost` in local-only mode and `api.partner-up.local` in LAN mode. This keeps browser API calls aligned with the typed backend HTTP contract while application code stays free of fixed numeric ports.
+- LAN device debugging uses portless LAN mode (`PORTLESS_LAN=1` or `pnpm dev:ensure --lan`), which forces `.local` routes. When portless cannot infer a reachable LAN address, callers should set `PORTLESS_LAN_IP` or pass `--ip <reachable-lan-ip>`; the project portless wrapper makes a best-effort default-route interface inference only for explicit LAN mode. When a privileged proxy is involved, the proxy and app registrations must share one `PORTLESS_STATE_DIR`; VS Code LAN launch entries should set it with an environment-neutral variable such as `${userHome}/.portless`.
+- Fake third-party integration servers use provider-scoped portless names under the app namespace: `caocao.partner-up` and `wechatpay.partner-up`. They follow the active portless proxy mode, so LAN debugging exposes them as `caocao.partner-up.local` and `wechatpay.partner-up.local`, while local-only mode exposes the same names under `.localhost`.
 - Fixed-port frontend env values (`VITE_PORT`, `VITE_API_URL`, `VITE_BACKEND_HOST`, `VITE_BACKEND_PORT`, `VITE_BACKEND_PROXY_TARGET`) remain a compatibility contract for explicit fixed-port local work.
 - Root-owned system scenario tests own their own frontend and backend ports through the `system-scenario` Vitest project. That isolated test runtime is separate from the developer portless workflow.
 
diff --git a/docs/40-deployment/environments.md b/docs/40-deployment/environments.md
index 6eaab77aa..c3640ba3f 100644
--- a/docs/40-deployment/environments.md
+++ b/docs/40-deployment/environments.md
@@ -22,12 +22,48 @@ Local app identity is stored in `portless.json`:
 Portless injects runtime origin and listener values through `PORTLESS_URL`,
 `HOST`, and `PORT`. The frontend Vite config detects `PORTLESS_URL`, exposes
 that value as `import.meta.env.VITE_API_URL`, and proxies `/api` to the backend
-portless app with `Host: api.partner-up.localhost`.
+portless app by deriving the backend host from the active frontend portless
+origin.
+
+The default portless TLD is `.localhost`. LAN device debugging must run portless
+in LAN mode, which forces `.local` routes:
+
+```bash
+pnpm dev:ensure --lan --ip <reachable-lan-ip>
+```
+
+For explicit LAN-mode launches, `scripts/portless.mjs` first honors
+`PORTLESS_LAN_IP` or `--ip`, then makes a best-effort inference from the host's
+default-route network interface. This keeps WSL LAN launches from depending on
+portless's own auto-detection when the reachable address is the WSL subnet
+address.
+
+When a privileged proxy is involved, the elevated proxy and app registrations
+must share one `PORTLESS_STATE_DIR`. VS Code LAN launch entries should set it
+with an environment-neutral variable such as `${userHome}/.portless`; shell
+users can set `PORTLESS_STATE_DIR` explicitly when they need to avoid a root/user
+state split. If the other LAN device cannot route to the advertised address,
+publish a reachable host LAN IP and forward TCP `443` into the dev environment,
+or use a networking mode where the advertised IP is directly reachable.
 
 Fixed local ports remain available for compatibility workflows through package
 env files and helper scripts. They are local fallback inputs, while portless is
 the default developer workflow.
 
+Fake integration servers use provider-scoped portless names under the app
+namespace:
+
+- Caocao: `caocao.partner-up`
+- WeChatPay: `wechatpay.partner-up`
+
+They follow the active portless proxy mode. In LAN mode they are reachable as
+`caocao.partner-up.local` and `wechatpay.partner-up.local`; in local-only mode
+they use the same names under `.localhost`.
+
+Non-production WeChatPay provider endpoints allow portless local hostnames
+(`.localhost` and `.local`) in addition to raw loopback hosts and the official
+WeChatPay API host. Production still requires the official WeChatPay API host.
+
 The backend development script loads `apps/backend/.env` when the file exists,
 so portless and fixed-port local backend starts share the same local runtime
 inputs.
diff --git a/package.json b/package.json
index cede58d6e..e6a041050 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,8 @@
     "dev:portless": "node ./scripts/portless.mjs",
     "dev:portless:frontend": "node ./scripts/portless.mjs --name partner-up -- pnpm --filter @partner-up-dev/frontend dev",
     "dev:portless:backend": "node ./scripts/portless.mjs --name api.partner-up -- pnpm --filter @partner-up-dev/backend dev",
-    "dev:portless:fake-caocao": "node ./scripts/portless.mjs --name fake-caocao -- pnpm --filter @partner-up-dev/fake-caocao-server dev",
+    "dev:portless:fake-caocao": "node ./scripts/portless.mjs --name caocao.partner-up -- pnpm --filter @partner-up-dev/fake-caocao-server dev",
+    "dev:portless:fake-wechatpay": "node ./scripts/portless.mjs --name wechatpay.partner-up -- pnpm --filter @partner-up-dev/fake-wechatpay-server dev",
     "dev:frontend": "pnpm --filter @partner-up-dev/frontend dev",
     "dev:backend": "pnpm --filter @partner-up-dev/backend dev",
     "build:frontend": "pnpm --filter @partner-up-dev/frontend build",
diff --git a/packages/fake-wechatpay-server/bin/fake-wechatpay-server.ts b/packages/fake-wechatpay-server/bin/fake-wechatpay-server.ts
index 49a29a0bb..077aa3481 100644
--- a/packages/fake-wechatpay-server/bin/fake-wechatpay-server.ts
+++ b/packages/fake-wechatpay-server/bin/fake-wechatpay-server.ts
@@ -6,6 +6,7 @@ const port = portRaw ? Number.parseInt(portRaw, 10) : 0;
 const server = await startFakeWeChatPayServer({
   port: Number.isFinite(port) ? port : 0,
 });
+const publicOrigin = process.env.PORTLESS_URL || server.origin;
 
 console.info(
   JSON.stringify(
@@ -13,11 +14,12 @@ console.info(
       fakeWeChatPay: {
         apiV3Key: server.fixture.apiV3Key,
         appId: server.fixture.appId,
-        endpointBaseUrl: server.origin,
+        endpointBaseUrl: publicOrigin,
         mchId: server.fixture.mchId,
         merchantCertificate: server.fixture.merchantCertificate,
       },
-      origin: server.origin,
+      origin: publicOrigin,
+      listenOrigin: server.origin,
     },
     null,
     2,
diff --git a/scripts/ensure-dev-servers.mjs b/scripts/ensure-dev-servers.mjs
index cb626c50b..677d0eeb4 100644
--- a/scripts/ensure-dev-servers.mjs
+++ b/scripts/ensure-dev-servers.mjs
@@ -7,9 +7,10 @@ import { fileURLToPath } from "node:url";
 const isWindows = process.platform === "win32";
 const repoRoot = resolve(dirname(fileURLToPath(import.meta.url)), "..");
 
-const routes = [
+const routeDefinitions = [
   {
     name: "frontend",
+    portlessName: "partner-up",
     portlessArgs: [
       "--name",
       "partner-up",
@@ -20,11 +21,11 @@ const routes = [
       "@partner-up-dev/frontend",
       "dev",
     ],
-    url: "https://partner-up.localhost",
     readinessPath: "/",
   },
   {
     name: "backend",
+    portlessName: "api.partner-up",
     portlessArgs: [
       "--name",
       "api.partner-up",
@@ -35,13 +36,49 @@ const routes = [
       "@partner-up-dev/backend",
       "dev",
     ],
-    url: "https://api.partner-up.localhost",
     readinessPath: "/health",
   },
 ];
 
+const parseOptionalStringArg = (name) => {
+  const prefixedArg = process.argv.find((arg) => arg.startsWith(`--${name}=`));
+  const argIndex = process.argv.indexOf(`--${name}`);
+  const separateArg = argIndex === -1 ? undefined : process.argv[argIndex + 1];
+  const argValue = prefixedArg?.slice(name.length + 3) ?? separateArg;
+
+  if (argValue === undefined || argValue.startsWith("--")) {
+    return null;
+  }
+
+  const value = argValue.trim();
+  return value.length > 0 ? value : null;
+};
+
+const isTruthyEnv = (value) => value === "1" || value === "true";
+
+const normalizeEnvValue = (value) => {
+  if (!value) return null;
+  const trimmed = value.trim();
+  return trimmed.length > 0 ? trimmed : null;
+};
+
 const getRuntimeEnv = () => {
   const env = { ...process.env };
+  const lanIp = parseOptionalStringArg("ip");
+  const stateDir = parseOptionalStringArg("state-dir");
+
+  if (stateDir) {
+    env.PORTLESS_STATE_DIR = stateDir;
+  }
+
+  if (process.argv.includes("--lan")) {
+    env.PORTLESS_LAN = "1";
+  }
+
+  if (lanIp) {
+    env.PORTLESS_LAN = "1";
+    env.PORTLESS_LAN_IP = lanIp;
+  }
 
   if (isWindows) {
     const gitOpenSslBin = "C:\\Program Files\\Git\\usr\\bin";
@@ -58,6 +95,20 @@ const getRuntimeEnv = () => {
 
 const runtimeEnv = getRuntimeEnv();
 
+const getPortlessTld = () => {
+  if (isTruthyEnv(runtimeEnv.PORTLESS_LAN)) {
+    return "local";
+  }
+
+  return normalizeEnvValue(runtimeEnv.PORTLESS_TLD) ?? "localhost";
+};
+
+const portlessTld = getPortlessTld();
+const routes = routeDefinitions.map((route) => ({
+  ...route,
+  url: `https://${route.portlessName}.${portlessTld}`,
+}));
+
 const parsePositiveIntegerArg = (name, fallback) => {
   const prefixedArg = process.argv.find((arg) => arg.startsWith(`--${name}=`));
   const argIndex = process.argv.indexOf(`--${name}`);
diff --git a/scripts/portless.mjs b/scripts/portless.mjs
index 6abf8ca09..905337610 100644
--- a/scripts/portless.mjs
+++ b/scripts/portless.mjs
@@ -1,12 +1,110 @@
 import { spawn } from "node:child_process";
-import { existsSync } from "node:fs";
+import { existsSync, readFileSync } from "node:fs";
+import { networkInterfaces } from "node:os";
 import { join } from "node:path";
 
 const isWindows = process.platform === "win32";
 
+const getGlobalArgs = () => {
+  const args = process.argv.slice(2);
+  const separatorIndex = args.indexOf("--");
+
+  return separatorIndex === -1 ? args : args.slice(0, separatorIndex);
+};
+
+const hasGlobalFlag = (flag) => getGlobalArgs().includes(flag);
+
+const hasGlobalFlagValue = (flag) => {
+  const args = getGlobalArgs();
+
+  return args.some((arg, index) => {
+    if (arg.startsWith(`${flag}=`)) {
+      return true;
+    }
+
+    return arg === flag && args[index + 1] !== undefined && !args[index + 1].startsWith("-");
+  });
+};
+
+const isUsableIpv4Address = (address) => {
+  const octets = address.split(".").map((octet) => Number.parseInt(octet, 10));
+
+  if (octets.length !== 4 || octets.some((octet) => !Number.isInteger(octet))) {
+    return false;
+  }
+
+  const [first, second] = octets;
+
+  return first !== 0 && first !== 127 && first < 224 && !(first === 169 && second === 254);
+};
+
+const getLinuxDefaultRouteInterface = () => {
+  if (process.platform !== "linux") {
+    return null;
+  }
+
+  try {
+    const routeTable = readFileSync("/proc/net/route", "utf8");
+
+    for (const line of routeTable.trim().split("\n").slice(1)) {
+      const [iface, destination, _gateway, flagsText] = line.trim().split(/\s+/);
+      const flags = Number.parseInt(flagsText, 16);
+
+      if (destination === "00000000" && (flags & 0x1) === 0x1) {
+        return iface;
+      }
+    }
+  } catch {
+    return null;
+  }
+
+  return null;
+};
+
+const detectLanIpv4Address = () => {
+  const interfaces = networkInterfaces();
+  const candidates = Object.entries(interfaces).flatMap(([name, addresses]) =>
+    (addresses ?? [])
+      .filter(
+        (address) =>
+          address.family === "IPv4" && !address.internal && isUsableIpv4Address(address.address),
+      )
+      .map((address) => ({ address: address.address, name })),
+  );
+
+  const defaultRouteInterface = getLinuxDefaultRouteInterface();
+  const defaultRouteCandidate = candidates.find(
+    (candidate) => candidate.name === defaultRouteInterface,
+  );
+
+  if (defaultRouteCandidate) {
+    return defaultRouteCandidate.address;
+  }
+
+  if (candidates.length === 1) {
+    return candidates[0].address;
+  }
+
+  return null;
+};
+
+const shouldDetectLanIp = (env) =>
+  !env.PORTLESS_LAN_IP &&
+  !hasGlobalFlagValue("--ip") &&
+  (env.PORTLESS_LAN === "1" || env.PORTLESS_LAN === "true" || hasGlobalFlag("--lan"));
+
 const getPortlessEnv = () => {
   const env = { ...process.env };
 
+  if (shouldDetectLanIp(env)) {
+    const lanIp = detectLanIpv4Address();
+
+    if (lanIp) {
+      env.PORTLESS_LAN_IP = lanIp;
+      console.log(`Using LAN IP ${lanIp} for portless.`);
+    }
+  }
+
   if (isWindows) {
     const gitOpenSslBin = "C:\\Program Files\\Git\\usr\\bin";
     const gitOpenSslPath = join(gitOpenSslBin, "openssl.exe");
diff --git a/tasks/backend-portless-8443-diagnosis/00-task-packet.md b/tasks/backend-portless-8443-diagnosis/00-task-packet.md
index 76bef9321..e4c34a00e 100644
--- a/tasks/backend-portless-8443-diagnosis/00-task-packet.md
+++ b/tasks/backend-portless-8443-diagnosis/00-task-packet.md
@@ -2,14 +2,14 @@
 
 ## Objective & Hypothesis
 
-Diagnose why the backend portless development route appears on port `8443` instead of the expected HTTPS default port `443`.
+Diagnose why the backend portless development route appears on port `8443` instead of the expected HTTPS default port `443`, then restore a LAN-capable `.local` workflow for debugging the WSL-hosted app from another LAN device.
 
 Initial hypothesis: portless owns the public HTTPS route while the backend process only listens on the injected `PORT`; `8443` may be a portless proxy/listener fallback caused by privileged-port binding, an existing listener on `443`, or tool-level configuration outside this repository.
 
 ## Guardrails Touched
 
 - Input route: Reality
-- Active mode: Diagnose
+- Active mode: Diagnose -> Execute
 - Durable owners inspected: `docs/40-deployment/environments.md`, `docs/20-product-tdd/cross-unit-contracts.md`
 - Runtime owners inspected: `portless.json`, `scripts/portless.mjs`, `scripts/ensure-dev-servers.mjs`, `apps/backend/package.json`, `apps/backend/src/lib/env.ts`, `apps/backend/src/index.ts`
 
@@ -53,6 +53,150 @@ Initial hypothesis: portless owns the public HTTPS route while the backend proce
     - `node --check scripts/ensure-dev-servers.mjs`
     - `pnpm exec biome format --write scripts/ensure-dev-servers.mjs`
     - `pnpm dev:ensure --timeout-seconds=30 --poll-interval-seconds=2`
+- Follow-up diagnosis on 2026-06-19 for LAN/state mismatch:
+  - Active root proxy process:
+    - `root ... /usr/bin/portless proxy start --foreground --port 443 --https --lan --ip 172.29.144.156 --skip-trust`
+  - Active listeners include `*:443` and `*:80`.
+  - User-visible route state:
+    - `portless list` under `yyh` initially showed only `https://design-web.localhost -> localhost:4805`.
+    - `/home/yyh/.portless/routes.json` is the user route store.
+  - Non-user route state:
+    - `/var/lib/portless-mvp-ha/routes.json` exists and is `[]`.
+    - The active root proxy responds on `443`, but does not see routes registered into `/home/yyh/.portless/routes.json`.
+    - `sudo -n` is unavailable, so the exact active root proxy state dir (`/root/.portless` vs `/var/lib/portless-mvp-ha`) could not be confirmed from `/proc/500336/fd`.
+  - Reproduction:
+    - `pnpm dev:ensure --timeout-seconds=20 --poll-interval-seconds=2` started frontend/backend wrappers but timed out.
+    - The wrappers registered:
+      - `api.partner-up.localhost -> localhost:4438`
+      - `partner-up.localhost -> localhost:4336`
+      in `/home/yyh/.portless/routes.json`.
+    - Direct app probes succeeded:
+      - `http://127.0.0.1:4438/health` returned HTTP `200`.
+      - `http://127.0.0.1:4336/` returned HTTP `200`.
+    - Public proxy probes failed:
+      - `https://api.partner-up.localhost/health` returned portless HTTP `404`.
+      - `https://partner-up.localhost/` returned portless HTTP `404`.
+    - The 404 pages said no app was registered for those hostnames, confirming the active proxy was not reading the user route store.
+  - Exact reported error reproduced:
+    - `PORTLESS_LAN=1 portless --name api.partner-up --force -- pnpm --filter @partner-up-dev/backend dev`
+    - Result: `Proxy is already running on port 443 with a different config. - requested LAN mode, but the running proxy is not using LAN mode`
+  - `portless proxy start --https --lan --ip 172.29.144.156` also reproduced a config mismatch:
+    - requested LAN mode vs non-LAN
+    - requested LAN IP `172.29.144.156` vs auto-detected LAN mode
+    - requested HTTPS vs HTTP
+  - Source read from installed `portless@0.13.0`:
+    - without `PORTLESS_STATE_DIR`, app runs resolve the route store to `USER_STATE_DIR` (`~/.portless`).
+    - proxy discovery can notice a listener on `443`, but then reads current proxy config markers from the resolved user state dir.
+    - because the active `443` proxy is root-side while the app run uses user state, marker lookup from `~/.portless` reports the wrong LAN/TLS state.
+  - Cleanup:
+    - Stopped only the frontend/backend process groups created by this diagnostic run.
+    - Confirmed `portless list` returned to only `design-web.localhost`.
+- LAN hard-constraint implementation on 2026-06-19:
+  - User constraint: the development workflow must use `.local`; falling back to `.localhost` is not acceptable because the frontend must be opened from another LAN device.
+  - Updated `scripts/ensure-dev-servers.mjs` to:
+    - accept `--lan` and `--ip <address>` as ensure-level inputs
+    - expect `partner-up.local` and `api.partner-up.local` when `PORTLESS_LAN=1` or `--lan` is used
+  - Updated `apps/frontend/vite.config.ts` so the Vite `/api` proxy derives the backend portless host and proxy port from the actual frontend `PORTLESS_URL`, producing `api.partner-up.local` in LAN mode and preserving fallback ports such as `:1355`.
+  - Static verification passed:
+    - `node --check scripts/portless.mjs`
+    - `node --check scripts/ensure-dev-servers.mjs`
+    - `pnpm exec biome check scripts/portless.mjs scripts/ensure-dev-servers.mjs apps/frontend/vite.config.ts`
+    - `pnpm check:type:frontend`
+  - Runtime verification:
+    - With `PORTLESS_STATE_DIR=/mnt/f/CODING/Project/Anana/mvp-HA/.codex-tmp/portless-lan-test`, `PORTLESS_PORT=1355`, and LAN mode, portless registered `.local` routes but public requests returned portless `404`; the route file existed, so the likely cause is unreliable `fs.watch` route-cache refresh on the mounted Windows workspace path.
+    - With `PORTLESS_STATE_DIR=/home/yyh/.portless-codex-lan-test`, `PORTLESS_PORT=1355`, and `pnpm dev:ensure --lan --ip 172.29.144.156 --timeout-seconds=60 --poll-interval-seconds=2`, readiness passed for:
+      - `https://partner-up.local`
+      - `https://api.partner-up.local`
+    - `portless list` under that state showed:
+      - `https://api.partner-up.local:1355 -> localhost:4771`
+      - `https://partner-up.local:1355 -> localhost:4817`
+    - HTTP verification passed through the temporary proxy:
+      - `https://partner-up.local:1355/` returned HTTP `200`.
+      - `https://api.partner-up.local:1355/health` returned backend health JSON.
+      - `https://partner-up.local:1355/api/meta/build` returned backend JSON through the frontend Vite `/api` proxy.
+    - Cleaned up the temporary `1355` proxy, frontend/backend dev process groups, and `/home/yyh/.portless-codex-lan-test`.
+- Environment-neutral correction on 2026-06-19:
+  - User rejected repo-level Linux path assumptions in scripts and set the acceptance bar to VS Code `All(mac)`.
+  - External research:
+    - portless official docs say LAN mode uses `--lan`, `.local`, optional `--ip`, and `PORTLESS_LAN=1`; Vite hosts are handled through `__VITE_ADDITIONAL_SERVER_ALLOWED_HOSTS`.
+    - portless GitHub issue #258 documents the auto-sudo split where the elevated proxy writes `/root/.portless` while app routes are registered in user `~/.portless`; the workaround is to export `PORTLESS_STATE_DIR=$HOME/.portless` before running portless.
+  - Reverted script-level defaulting of `PORTLESS_STATE_DIR`; `scripts/portless.mjs` again only forwards the caller environment.
+  - Kept `scripts/ensure-dev-servers.mjs --state-dir <path>` as an explicit caller-controlled override.
+  - Updated `.vscode/launch.json`:
+    - ordinary `Backend` no longer forces LAN mode, keeping `All` aligned with `.localhost`.
+    - added `Backend(mac)` with `PORTLESS_LAN=1` and `PORTLESS_STATE_DIR=${userHome}/.portless`.
+    - changed `All(mac)` to launch `Backend(mac)` plus `Frontend(mac)`.
+  - Updated `.vscode/tasks.json`:
+    - `start-frontend-dev-server:lan` now sets `PORTLESS_LAN=1` and `PORTLESS_STATE_DIR=${userHome}/.portless`.
+    - `start-portless-proxy:lan` no longer hardcodes the WSL IP and also uses `${userHome}/.portless`.
+  - Validation:
+    - Parsed local VS Code JSONC config: `All(mac)` resolves to `Backend(mac),Frontend(mac)`.
+    - Confirmed `Backend(mac)` and `start-frontend-dev-server:lan` both inject `PORTLESS_STATE_DIR=${userHome}/.portless`.
+    - `node --check scripts/portless.mjs` passed.
+    - `node --check scripts/ensure-dev-servers.mjs` passed.
+    - `pnpm exec biome check scripts/portless.mjs scripts/ensure-dev-servers.mjs apps/frontend/vite.config.ts` passed.
+    - `pnpm check:type:frontend` passed.
+    - Runtime validation with temporary caller-controlled state passed:
+      - `PORTLESS_PORT=1355 pnpm dev:ensure --lan --ip <current-lan-ip> --state-dir <tmp-state> --timeout-seconds=75 --poll-interval-seconds=2`
+      - readiness reported `https://partner-up.local` and `https://api.partner-up.local`
+      - `https://partner-up.local:1355/api/meta/build` returned backend build JSON through the frontend Vite `/api` proxy.
+    - Cleaned up the temporary `1355` proxy, frontend/backend dev process groups, and temporary state directory.
+- WSL LAN IP correction on 2026-06-19:
+  - User supplied the missing network-layer fact: in this WSL environment, the reachable LAN-mode address is the WSL subnet address `172.29.144.156`.
+  - Confirmed `hostname -I` and `ip -4 addr show scope global` report `eth0 = 172.29.144.156/20`.
+  - Updated `scripts/portless.mjs` so explicit LAN mode honors caller-provided `PORTLESS_LAN_IP` / `--ip` first, then makes a best-effort inference from the default-route network interface when no IP was supplied.
+  - Updated local, gitignored VS Code config for acceptance:
+    - `Backend(mac)` sets `PORTLESS_LAN=1`, `PORTLESS_LAN_IP=172.29.144.156`, and `PORTLESS_STATE_DIR=${userHome}/.portless`.
+    - `Frontend(mac)` keeps `https://partner-up.local` and its prelaunch task now sets the same LAN IP and state dir.
+    - `All(mac)` launches `Backend(mac)` plus `Frontend(mac)`.
+  - Updated durable docs to record the explicit-LAN-IP override and wrapper inference behavior without hard-coding this machine's address into tracked contracts.
+  - Validation:
+    - `PORTLESS_PORT=1355 pnpm dev:ensure --lan --state-dir <tmp-state> --timeout-seconds=75 --poll-interval-seconds=2` passed without `--ip`.
+    - `portless list` under the temporary state showed:
+      - `https://api.partner-up.local:1355 -> localhost:4840`
+      - `https://partner-up.local:1355 -> localhost:4297`
+    - `https://partner-up.local:1355/api/meta/build` returned backend build JSON through the frontend Vite `/api` proxy.
+    - Confirmed no active routes remain on the temporary proxy and manually cleared the temporary app process groups after the runtime check.
+- Fake integration LAN bleed diagnosis on 2026-06-19:
+  - User observed `fake-caocao.local (LAN: 172.29.144.156)` even though the VS Code task did not set `PORTLESS_LAN=1`.
+  - Confirmed `/home/yyh/.portless/proxy.tld` is `local`, `/home/yyh/.portless/proxy.lan` is `172.29.144.156`, and the active proxy process is `portless proxy start --foreground --port 443 --https --lan --ip 172.29.144.156 --skip-trust`.
+  - Confirmed `routes.json` registered `fake-caocao.local` into the same LAN proxy state as `partner-up.local` and `api.partner-up.local`.
+  - Read installed `portless@0.13.0` behavior: when an app starts and discovers a running proxy, it adopts the running proxy's `tld` and `lanIp`; omitting `PORTLESS_LAN=1` on the app task is insufficient to keep it local-only.
+  - Updated `scripts/portless.mjs` with `--project-local`, which forces `PORTLESS_LAN=0`, clears `PORTLESS_LAN_IP`, sets `.localhost`, and uses an isolated project state on local proxy port `9443`.
+  - Updated root scripts so `dev:portless:fake-caocao` and `dev:portless:fake-wechatpay` use `--project-local`.
+  - Updated fake WeChatPay CLI to print `PORTLESS_URL` as its `endpointBaseUrl`, matching fake Caocao.
+  - Updated the dev Caocao fixture endpoint to `https://fake-caocao.localhost:9443`.
+  - Validation:
+    - `node --check scripts/portless.mjs && node --check scripts/ensure-dev-servers.mjs` passed.
+    - `pnpm exec biome check scripts/portless.mjs scripts/ensure-dev-servers.mjs apps/frontend/vite.config.ts packages/fake-wechatpay-server/bin/fake-wechatpay-server.ts` passed.
+    - `pnpm --filter @partner-up-dev/fake-wechatpay-server typecheck` passed.
+    - `pnpm --filter @partner-up-dev/fake-caocao-server typecheck` passed.
+    - With the primary 443 LAN proxy still active, temporary `PORTLESS_LOCAL_STATE_DIR` and `PORTLESS_LOCAL_PORT=1456` launched both fake scripts as `.localhost`:
+      - `https://fake-caocao.localhost:1456 -> localhost:4016`
+      - `https://fake-wechatpay.localhost:1456 -> localhost:4212`
+    - Both fake CLIs printed `.localhost:1456` `endpointBaseUrl` values and raw `listenOrigin` ports.
+    - Cleaned up the temporary local-only proxy and fake process groups.
+- Fake integration naming correction on 2026-06-19:
+  - User rejected the `9443` local-only proxy approach.
+  - Reverted the fake Caocao `--project-local` behavior and removed the `9443` endpoint.
+  - Kept the new fake WeChatPay portless script, but aligned it with the normal fake Caocao portless behavior.
+  - Updated fake provider portless names to provider-scoped app names:
+    - `caocao.partner-up`, yielding `https://caocao.partner-up.local` in LAN mode.
+    - `wechatpay.partner-up`, yielding `https://wechatpay.partner-up.local` in LAN mode.
+  - Updated the dev Caocao fixture endpoint to `https://caocao.partner-up.local`.
+  - Updated non-production WeChatPay endpoint validation to allow portless local hostnames (`.localhost` and `.local`) while keeping production restricted to the official WeChatPay API host.
+  - Validation:
+    - `node --check scripts/portless.mjs && node --check scripts/ensure-dev-servers.mjs` passed.
+    - `pnpm exec biome check scripts/portless.mjs scripts/ensure-dev-servers.mjs apps/frontend/vite.config.ts apps/backend/src/domains/payment/services/payment-provider.ts apps/backend/src/domains/payment/services/payment-provider.test.ts packages/fake-wechatpay-server/bin/fake-wechatpay-server.ts` passed.
+    - `pnpm --filter @partner-up-dev/backend typecheck` passed.
+    - `pnpm --filter @partner-up-dev/fake-wechatpay-server typecheck` passed.
+    - `pnpm vitest run --config vitest.backend.config.ts --project backend-unit apps/backend/src/domains/payment/services/payment-provider.test.ts` passed.
+    - Runtime check under the active LAN proxy passed:
+      - `https://caocao.partner-up.local -> localhost:4653`
+      - `https://wechatpay.partner-up.local -> localhost:4099`
+      - Both fake CLIs printed matching `.partner-up.local` `endpointBaseUrl` values.
+    - Cleaned up the runtime-check fake process groups.
+    - Cleaned up the stale 9443 fake Caocao process/proxy left from the rejected `--project-local` attempt.
 
 ## Current Understanding
 
@@ -63,12 +207,32 @@ Initial hypothesis: portless owns the public HTTPS route while the backend proce
 - `scripts/ensure-dev-servers.mjs` checks public portless readiness via HTTPS on `127.0.0.1:443` with `Host: api.partner-up.localhost`.
 - Current `443` is occupied by a LAN-mode `.local` portless proxy, not the current `.localhost` proxy.
 - Current `.localhost` portless proxy is on `8443`, so backend's public `.localhost` route includes `:8443`; the backend child itself listens on `4430`.
+- Current follow-up understanding:
+  - The immediate failing state is a split brain between:
+    - active `443` root-side proxy state: exact dir not readable without sudo; `/var/lib/portless-mvp-ha` exists and `/root/.portless` is also possible
+    - user app route state: `/home/yyh/.portless`
+  - The app processes can start and listen on injected ports, but the public `.localhost` hosts fail because the active proxy reads a different `routes.json`.
+  - The "running proxy is not using LAN mode" text is misleading in this state: the process argv shows the active root proxy was launched with `--lan --ip 172.29.144.156`; the mismatch text comes from reading proxy markers from the wrong state dir.
+- LAN access requires two independent layers:
+  - portless/application layer: proxy and app registrations must share one `PORTLESS_STATE_DIR`, and route URLs/Host headers must be `.local`.
+  - launch layer: `All(mac)` must set `PORTLESS_STATE_DIR` explicitly through VS Code variables instead of requiring repo scripts to infer an OS/user path.
+  - network layer: the IP published for `.local` must be reachable from the mac mini; when auto-detection picks an unreachable address, use portless `--ip` / `PORTLESS_LAN_IP` outside the repo contract. In this WSL environment, the intended address is `172.29.144.156`.
+  - fake integration layer: fake third-party providers can follow the active portless proxy mode when they use provider-scoped app names under `partner-up`; the accepted LAN hostnames are `caocao.partner-up.local` and `wechatpay.partner-up.local`.
 
 ## Confirmed Constraints
 
 - Do not modify code during diagnosis without evidence.
 - Do not expose local secrets from `.env`.
+- `.local` LAN mode is a hard user constraint for this workflow.
 
 ## Next Step
 
-Likely cause is confirmed and remediated. Remaining code change is in `scripts/ensure-dev-servers.mjs`; it should prevent recurrence of the false-ready case where portless itself returns HTTP `404`.
+Likely cause is confirmed: portless state ownership is split between the root LAN proxy and user app registrations.
+
+The clean remediation should make the active proxy and all app registrations use one state dir and one TLD mode.
+
+Operational next step:
+
+1. Use VS Code `All(mac)` as the acceptance path; it now injects LAN mode, the WSL LAN IP, and a shared `${userHome}/.portless` state dir.
+2. If portless reports a 443 config mismatch, stop the stale proxy first, then launch `All(mac)` again.
+3. Restart any fake integration tasks that were started with old names; old `fake-*.local` routes remain until those old processes stop.

From 62decaed6c4d01a0c3da279f9d16682d19d1f2da Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Sat, 20 Jun 2026 10:49:25 +0800
Subject: [PATCH 24/94] feat(commerce): refine ride-hailing ordering route map

- plan route geometry from map route data and expose app-owned zoom controls

- carry binding lock metadata into ordering UI for route/time/rider edit affordances

- move riders and departure time into drawer controls and hide unavailable ride options

- record ride-hailing MVP subtask packets and verification notes
---
 .../use-cases/match-placement-instance.ts     |   5 +
 .../commerce/model/ordering-content.ts        |   6 +
 .../commerce/model/ordering-entry-storage.ts  |   1 +
 .../ui/ordering/RideHailingOrderingPanel.vue  | 433 +++++++++++++++---
 .../src/domains/route/ui/RouteMap.vue         |  60 ++-
 .../src/pages/OrderingFromPlacementPage.vue   |   5 +
 .../src/pages/OrderingSupportPage.vue         |   4 +
 apps/frontend/src/shared/map/Map.vue          |  85 ++++
 .../map/tencent/tencent-lbs-provider.ts       |  25 +-
 apps/frontend/src/shared/map/tencent/types.ts |  19 +
 apps/frontend/src/shared/map/types.ts         |   1 +
 tasks/ride-hailing-mvp/00-task-packet.md      |  41 +-
 tasks/ride-hailing-mvp/30-ui-runtime-audit.md |  14 +-
 tasks/ride-hailing-mvp/control.md             |  43 +-
 .../00-order-spine-correction/control.md      |  54 +++
 .../10-fake-caocao-local-dev/control.md       |  44 ++
 .../20-dev-ride-hailing-fixtures/control.md   |  64 +++
 .../subtasks/30-ordering-page-ui/control.md   | 151 ++++++
 .../10-wireframe-regression/control.md        | 185 ++++++++
 .../subtasks/40-order-detail-ui/control.md    |  74 +++
 .../control.md                                |  83 ++++
 .../60-runtime-verification/control.md        |  63 +++
 22 files changed, 1356 insertions(+), 104 deletions(-)
 create mode 100644 tasks/ride-hailing-mvp/subtasks/00-order-spine-correction/control.md
 create mode 100644 tasks/ride-hailing-mvp/subtasks/10-fake-caocao-local-dev/control.md
 create mode 100644 tasks/ride-hailing-mvp/subtasks/20-dev-ride-hailing-fixtures/control.md
 create mode 100644 tasks/ride-hailing-mvp/subtasks/30-ordering-page-ui/control.md
 create mode 100644 tasks/ride-hailing-mvp/subtasks/30-ordering-page-ui/subtasks/10-wireframe-regression/control.md
 create mode 100644 tasks/ride-hailing-mvp/subtasks/40-order-detail-ui/control.md
 create mode 100644 tasks/ride-hailing-mvp/subtasks/50-provider-authored-ride-options/control.md
 create mode 100644 tasks/ride-hailing-mvp/subtasks/60-runtime-verification/control.md

diff --git a/apps/backend/src/domains/merchandising/use-cases/match-placement-instance.ts b/apps/backend/src/domains/merchandising/use-cases/match-placement-instance.ts
index 3480f118f..ff314de82 100644
--- a/apps/backend/src/domains/merchandising/use-cases/match-placement-instance.ts
+++ b/apps/backend/src/domains/merchandising/use-cases/match-placement-instance.ts
@@ -45,6 +45,7 @@ export type OrderingEntryPayload = {
   offerDetail: OrderingOfferDetail;
   prId?: number;
   bindings: Record<string, unknown>;
+  bindingLocks: Record<string, true>;
 };
 
 const isOfferActiveNow = (
@@ -203,6 +204,9 @@ export async function resolvePlacementOrderingEntry(input: {
     context: input.matchingContext,
     rules: placement.bindingRules,
   });
+  const bindingLocks = Object.fromEntries(
+    placement.bindingRules.map((rule) => [rule.fieldKey, true] as const),
+  );
   const prId = readPrIdFromMatchingContext(input.matchingContext);
   const activeParticipantCount = readRecordProperty(
     input.matchingContext,
@@ -242,6 +246,7 @@ export async function resolvePlacementOrderingEntry(input: {
     },
     offerDetail,
     ...(prId === undefined ? {} : { prId }),
+    bindingLocks,
     bindings: {
       ...bindings,
       ...(typeof activeParticipantCount === "number"
diff --git a/apps/frontend/src/domains/commerce/model/ordering-content.ts b/apps/frontend/src/domains/commerce/model/ordering-content.ts
index c212749d6..70a142abf 100644
--- a/apps/frontend/src/domains/commerce/model/ordering-content.ts
+++ b/apps/frontend/src/domains/commerce/model/ordering-content.ts
@@ -5,6 +5,7 @@ export type OrderingContentInput = {
   source: OrderingEntryPayload["source"];
   offerDetail: OrderingEntryPayload["offerDetail"];
   bindings: Record<string, unknown>;
+  bindingLocks: OrderingEntryPayload["bindingLocks"];
 };
 
 export type OrderingContentOutput = {
@@ -24,6 +25,11 @@ export const readBindingValue = (
   key: string,
 ): unknown | null => bindings[key] ?? null;
 
+export const isBindingLocked = (
+  input: Pick<OrderingContentInput, "bindingLocks">,
+  key: string,
+): boolean => input.bindingLocks[key] === true;
+
 export const readBoundOrderParticipants = (
   bindings: Record<string, unknown>,
 ): BoundOrderParticipant[] => {
diff --git a/apps/frontend/src/domains/commerce/model/ordering-entry-storage.ts b/apps/frontend/src/domains/commerce/model/ordering-entry-storage.ts
index bd7cce548..bc5e72d1a 100644
--- a/apps/frontend/src/domains/commerce/model/ordering-entry-storage.ts
+++ b/apps/frontend/src/domains/commerce/model/ordering-entry-storage.ts
@@ -9,4 +9,5 @@ export type OrderingEntryPayload = {
   offerDetail: OrderingOfferDetail;
   prId?: number;
   bindings: Record<string, unknown>;
+  bindingLocks: Record<string, true>;
 };
diff --git a/apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingPanel.vue b/apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingPanel.vue
index 1bf555104..fc6016b16 100644
--- a/apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingPanel.vue
+++ b/apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingPanel.vue
@@ -5,11 +5,12 @@
         class="ride-hailing-ordering-panel__route-map"
         data-testid="ordering.ride-hailing.route-map"
         :route="routeForMap"
-        :planned-polyline="plannedPolyline"
         :fit-padding="routeMapFitPadding"
-        :interactive="false"
+        :interactive="true"
+        :route-points-editable="routeEditable"
         variant="immersive"
         hide-bottom-attribution
+        @route-point-click="openRoutePointDrawer"
       />
 
       <div
@@ -18,41 +19,140 @@
       >
         <div class="ride-hailing-ordering-panel__handle" aria-hidden="true"></div>
 
-        <div
-          class="ride-hailing-ordering-panel__passengers"
-          data-testid="ordering.ride-hailing.riders"
-        >
-          <div>
-            <span>同乘人</span>
-            <strong>{{ riderSummary }}</strong>
-          </div>
-          <small data-testid="ordering.ride-hailing.departure-time">
-            {{ rideDepartureLabel }}
-          </small>
-        </div>
-
         <div class="ride-hailing-ordering-panel__vehicles">
           <RideHailingSkuCard
-            v-for="option in rideQuoteOptions"
+            v-for="option in visibleRideQuoteOptions"
             :key="option.skuId"
             :display-name="option.displayName"
             :price-label="formatFen(option.quoteAmountFen)"
             :selectable="option.selectable"
             :selected="option.skuId === selectedRideSkuId"
-            :disabled-reason="option.disabledReason"
+            :disabled-reason="null"
             @select="selectedRideSkuId = option.skuId"
           />
         </div>
+
+        <div
+          class="ride-hailing-ordering-panel__controls"
+          data-testid="ordering.ride-hailing.drawer-control-row"
+        >
+          <button
+            type="button"
+            class="ride-hailing-ordering-panel__control"
+            data-testid="ordering.ride-hailing.riders.open"
+            @click="ridersDrawerOpen = true"
+          >
+            <span>同乘人</span>
+            <strong>{{ riderSummary }}</strong>
+            <i class="i-mdi-chevron-right" aria-hidden="true"></i>
+          </button>
+          <button
+            type="button"
+            class="ride-hailing-ordering-panel__control"
+            data-testid="ordering.ride-hailing.departure-time.open"
+            @click="departureDrawerOpen = true"
+          >
+            <span>出发时间</span>
+            <strong data-testid="ordering.ride-hailing.departure-time">
+              {{ rideDepartureLabel }}
+            </strong>
+            <i class="i-mdi-chevron-right" aria-hidden="true"></i>
+          </button>
+        </div>
       </div>
+
+      <PuDrawer
+        :visible="routePointDrawerOpen"
+        :title="routePointDrawerTitle"
+        max-width="44rem"
+        @close="closeRoutePointDrawer"
+      >
+        <LocationPickerPanel
+          v-if="selectedRoutePoint"
+          :initial-location="selectedRoutePointInitialLocation"
+          data-testid="ordering.ride-hailing.route-point.drawer"
+          @pick="handleRoutePointPicked"
+          @cancel="closeRoutePointDrawer"
+        />
+      </PuDrawer>
+
+      <PuDrawer
+        v-model:visible="ridersDrawerOpen"
+        title="同乘人"
+        max-width="44rem"
+      >
+        <div class="ride-hailing-ordering-panel__drawer-content">
+          <PuInlineNotice
+            v-if="ridersLocked"
+            tone="info"
+            message="同乘人由当前搭子请求锁定。"
+          />
+          <div
+            v-for="rider in rideRiders"
+            :key="rider.userId"
+            class="ride-hailing-ordering-panel__rider-row"
+          >
+            <span class="i-mdi-account-circle" aria-hidden="true"></span>
+            <div>
+              <strong>{{ rider.displayName }}</strong>
+              <small>{{ rider.phoneMasked ?? "暂无手机号" }}</small>
+            </div>
+          </div>
+        </div>
+      </PuDrawer>
+
+      <PuDrawer
+        v-model:visible="departureDrawerOpen"
+        title="出发时间"
+        max-width="44rem"
+      >
+        <div class="ride-hailing-ordering-panel__drawer-content">
+          <PuInlineNotice
+            v-if="departureLocked"
+            tone="info"
+            message="出发时间由当前搭子请求锁定。"
+          />
+          <PuFormItem
+            label="出发时间"
+            for-id="ride-hailing-departure-at"
+            required
+          >
+            <PuInput
+              id="ride-hailing-departure-at"
+              :model-value="editableDepartureInput"
+              native-type="datetime-local"
+              :disabled="departureLocked"
+              data-testid="ordering.ride-hailing.departure-time.input"
+              @update:model-value="handleDepartureInput"
+            />
+          </PuFormItem>
+        </div>
+      </PuDrawer>
     </div>
   </template>
 </template>
 
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
+import {
+  PuDrawer,
+  PuFormItem,
+  PuInlineNotice,
+  PuInput,
+} from "@partner-up-dev/design-web";
 import RouteMap from "@/domains/route/ui/RouteMap.vue";
-import type { Route, RoutePoint } from "@/domains/route/model/route";
-import type { MapCoordinate, MapFitPadding } from "@/shared/map/types";
+import {
+  applyPickedLocationToRoutePoint,
+  cloneRoute,
+  pickRoutePointCoordinate,
+  replaceRoutePointAt,
+  resolveRoutePointRole,
+  type Route,
+  type RoutePoint,
+} from "@/domains/route/model/route";
+import LocationPickerPanel from "@/domains/location/ui/LocationPickerPanel.vue";
+import type { PickedLocation } from "@/domains/location/model/location-picker";
+import type { MapFitPadding } from "@/shared/map/types";
 import RideHailingSkuCard from "./RideHailingSkuCard.vue";
 import type {
   BoundOrderParticipant,
@@ -60,6 +160,7 @@ import type {
   OrderingContentOutput,
 } from "@/domains/commerce/model/ordering-content";
 import {
+  isBindingLocked,
   readBindingValue,
   readBoundOrderParticipants,
 } from "@/domains/commerce/model/ordering-content";
@@ -95,6 +196,12 @@ const emit = defineEmits<{
 
 const selectedRideSkuId = ref<number | null>(null);
 const rideContactPhone = ref("");
+const editableRoute = ref<Route | null>(null);
+const routePointDrawerOpen = ref(false);
+const selectedRoutePointIndex = ref<number | null>(null);
+const ridersDrawerOpen = ref(false);
+const departureDrawerOpen = ref(false);
+const editableDepartureAt = ref<string | null>(null);
 
 const rideOffer = computed<RideOffer | null>(() =>
   props.input.offerDetail.productType === "RIDE_HAILING"
@@ -133,6 +240,14 @@ const boundContactPhone = computed(() => {
   return typeof value === "string" ? value.trim() : "";
 });
 
+const routeEditable = computed(() => !isBindingLocked(props.input, "route"));
+const ridersLocked = computed(() =>
+  isBindingLocked(props.input, "orderParticipants"),
+);
+const departureLocked = computed(() =>
+  isBindingLocked(props.input, "departureAt"),
+);
+
 const rideRiders = computed<BoundOrderParticipant[]>(() =>
   readBoundOrderParticipants(props.input.bindings),
 );
@@ -182,7 +297,7 @@ const toRoutePoint = (place: unknown): RoutePoint | null => {
   return null;
 };
 
-const routeForMap = computed<Route | null>(() => {
+const routeFromBinding = computed<Route | null>(() => {
   const route = rideRoute.value;
   if (!route) return null;
   const record = route as Record<string, unknown>;
@@ -198,30 +313,52 @@ const routeForMap = computed<Route | null>(() => {
   return [origin, ...waypoints, destination];
 });
 
-const plannedPolyline = computed<MapCoordinate[] | null>(() => {
-  const route = rideRoute.value as Record<string, unknown> | null;
-  const drivingPlan =
-    typeof route?.drivingPlan === "object" && route.drivingPlan !== null
-      ? (route.drivingPlan as Record<string, unknown>)
-      : null;
-  const rawPolyline = Array.isArray(drivingPlan?.polyline)
-    ? drivingPlan.polyline
-    : null;
-  const polyline =
-    rawPolyline?.flatMap((point): MapCoordinate[] => {
-      if (typeof point !== "object" || point === null || Array.isArray(point)) {
-        return [];
-      }
-      const record = point as Record<string, unknown>;
-      if (
-        typeof record.latitude === "number" &&
-        typeof record.longitude === "number"
-      ) {
-        return [{ lat: record.latitude, lng: record.longitude }];
-      }
-      return [];
-    }) ?? [];
-  return polyline.length >= 2 ? polyline : null;
+const routeForMap = computed<Route | null>(
+  () => editableRoute.value ?? routeFromBinding.value,
+);
+
+const selectedRoutePoint = computed<RoutePoint | null>(() => {
+  const index = selectedRoutePointIndex.value;
+  if (index === null) return null;
+  return routeForMap.value?.[index] ?? null;
+});
+
+const selectedRoutePointInitialLocation = computed<PickedLocation | null>(() => {
+  const point = selectedRoutePoint.value;
+  if (!point?.gcj02) return null;
+  return {
+    name: point.name,
+    address: point.full_address,
+    cityName: null,
+    gcj02: [point.gcj02[0], point.gcj02[1]],
+  };
+});
+
+const routePointDrawerTitle = computed(() => {
+  const index = selectedRoutePointIndex.value;
+  const route = routeForMap.value;
+  if (index === null || !route) return "修改地点";
+  const role = resolveRoutePointRole(index, route.length);
+  if (role === "departure") return "修改上车点";
+  if (role === "arrival") return "修改目的地";
+  return "修改途经点";
+});
+
+const rideRouteForSubmit = computed<RideRouteSnapshot | null>(() => {
+  const route = routeForMap.value;
+  if (!route || route.length < 2) return rideRoute.value;
+  const places = route.map(toRidePlaceSnapshot);
+  if (places.some((place) => place === null)) return rideRoute.value;
+  const resolvedPlaces = places as RidePlaceSnapshot[];
+  const origin = resolvedPlaces[0];
+  const destination = resolvedPlaces[resolvedPlaces.length - 1];
+  if (!origin || !destination) return rideRoute.value;
+  return {
+    origin,
+    waypoints: resolvedPlaces.slice(1, -1),
+    destination,
+    drivingPlan: null,
+  };
 });
 
 const routeMapFitPadding: MapFitPadding = {
@@ -253,14 +390,28 @@ const rideQuoteOptions = computed<RideVehicleOption[]>(() =>
     : rideBaseOptions.value,
 );
 
+const visibleRideQuoteOptions = computed<RideVehicleOption[]>(() =>
+  props.evaluatedOptions.length > 0
+    ? rideQuoteOptions.value.filter((option) => option.selectable)
+    : rideQuoteOptions.value,
+);
+
 const rideDepartureLabel = computed(() => {
-  const departureAt = rideDepartureAt.value;
+  const departureAt = editableDepartureAt.value;
   if (!departureAt) return "现在出发";
   return `${formatTime(departureAt)}出发`;
 });
 
+const editableDepartureInput = computed(() =>
+  editableDepartureAt.value ? toDateTimeLocalValue(editableDepartureAt.value) : "",
+);
+
 const evaluationOutput = computed<OrderingContentOutput | null>(() => {
-  if (!rideOffer.value || selectedRideSkuId.value === null || !rideRoute.value) {
+  if (
+    !rideOffer.value ||
+    selectedRideSkuId.value === null ||
+    !rideRouteForSubmit.value
+  ) {
     return null;
   }
   const phone = rideContactPhone.value.trim();
@@ -276,8 +427,8 @@ const evaluationOutput = computed<OrderingContentOutput | null>(() => {
       },
     ],
     productTypedExtraProperties: {
-      route: rideRoute.value,
-      departureAt: rideDepartureAt.value,
+      route: rideRouteForSubmit.value,
+      departureAt: editableDepartureAt.value,
       riders: rideRiders.value.map((rider) => rider.userId),
       contactPhone: phone,
     },
@@ -304,6 +455,52 @@ const formatFen = (amountFen: number | null | undefined): string => {
   }).format(amountFen / 100);
 };
 
+type RidePlaceSnapshot = {
+  name: string;
+  address?: string | null;
+  latitude: number;
+  longitude: number;
+};
+
+const toRidePlaceSnapshot = (point: RoutePoint): RidePlaceSnapshot | null => {
+  const coordinate = pickRoutePointCoordinate(point);
+  const name = point.name.trim();
+  if (!coordinate || name.length === 0) return null;
+  return {
+    name,
+    address: point.full_address,
+    latitude: coordinate.lat,
+    longitude: coordinate.lng,
+  };
+};
+
+const openRoutePointDrawer = (index: number) => {
+  if (!routeEditable.value) return;
+  selectedRoutePointIndex.value = index;
+  routePointDrawerOpen.value = true;
+};
+
+const closeRoutePointDrawer = () => {
+  routePointDrawerOpen.value = false;
+};
+
+const handleRoutePointPicked = (location: PickedLocation) => {
+  if (!routeEditable.value) return;
+  const index = selectedRoutePointIndex.value;
+  const currentRoute = routeForMap.value;
+  const point = selectedRoutePoint.value;
+  if (index === null || !currentRoute || !point) return;
+  editableRoute.value = replaceRoutePointAt({
+    route: currentRoute,
+    index,
+    point: applyPickedLocationToRoutePoint({
+      point,
+      location,
+    }),
+  });
+  closeRoutePointDrawer();
+};
+
 const formatTime = (value: string): string =>
   new Intl.DateTimeFormat("zh-CN", {
     hour: "2-digit",
@@ -311,8 +508,30 @@ const formatTime = (value: string): string =>
     hour12: false,
   }).format(new Date(value));
 
+const toDateTimeLocalValue = (value: string): string => {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "";
+  const pad = (input: number) => input.toString().padStart(2, "0");
+  return [
+    date.getFullYear(),
+    "-",
+    pad(date.getMonth() + 1),
+    "-",
+    pad(date.getDate()),
+    "T",
+    pad(date.getHours()),
+    ":",
+    pad(date.getMinutes()),
+  ].join("");
+};
+
+const handleDepartureInput = (value: string) => {
+  if (departureLocked.value) return;
+  editableDepartureAt.value = value.length > 0 ? new Date(value).toISOString() : null;
+};
+
 watch(
-  rideQuoteOptions,
+  visibleRideQuoteOptions,
   (next) => {
     const currentOption = next.find(
       (option) => option.skuId === selectedRideSkuId.value,
@@ -327,6 +546,22 @@ watch(
   { immediate: true },
 );
 
+watch(
+  routeFromBinding,
+  (next) => {
+    editableRoute.value = cloneRoute(next);
+  },
+  { immediate: true },
+);
+
+watch(
+  rideDepartureAt,
+  (next) => {
+    editableDepartureAt.value = next;
+  },
+  { immediate: true },
+);
+
 watch(output, (next) => emit("update:output", next), {
   immediate: true,
   deep: true,
@@ -367,10 +602,6 @@ watch(
   border-radius: 0;
 }
 
-.ride-hailing-ordering-panel__route-map {
-  pointer-events: none;
-}
-
 .ride-hailing-ordering-panel__sheet {
   position: absolute;
   right: 0;
@@ -380,9 +611,9 @@ watch(
   pointer-events: auto;
   display: flex;
   flex-direction: column;
-  gap: var(--sys-spacing-small);
+  gap: 0;
   max-height: 55%;
-  padding: 0 var(--sys-spacing-medium) var(--sys-spacing-medium);
+  padding: 0 var(--sys-spacing-medium) var(--sys-spacing-small);
   border-radius: var(--sys-radius-large) var(--sys-radius-large) 0 0;
   background: var(--sys-color-surface);
   box-shadow: var(--sys-shadow-3);
@@ -396,38 +627,96 @@ watch(
   background: var(--sys-color-on-surface-variant);
 }
 
-.ride-hailing-ordering-panel__passengers {
+.ride-hailing-ordering-panel__vehicles {
   display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: var(--sys-spacing-small);
+  min-height: 0;
+  overflow: auto;
+  padding-bottom: var(--sys-spacing-small);
+}
+
+.ride-hailing-ordering-panel__controls {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   align-items: center;
-  justify-content: space-between;
-  gap: var(--sys-spacing-medium);
-  min-width: 0;
+  border-top: 1px solid var(--sys-color-outline-variant);
+  padding-top: var(--sys-spacing-small);
+}
 
-  div {
-    display: flex;
-    min-width: 0;
-    flex-direction: column;
-    gap: calc(var(--sys-spacing-xsmall) / 2);
+.ride-hailing-ordering-panel__control {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--sys-spacing-xsmall) / 2);
+  border: 0;
+  padding: var(--sys-spacing-xsmall);
+  background: transparent;
+  color: var(--sys-color-on-surface);
+  cursor: pointer;
+  font: inherit;
+
+  &:focus-visible {
+    outline: 2px solid var(--sys-color-primary);
+    outline-offset: 2px;
   }
 
-  span,
-  small {
+  span {
     @include mx.pu-font(control);
+    flex: 0 0 auto;
     color: var(--sys-color-on-surface-variant);
   }
 
   strong {
-    @include mx.pu-font(body);
-    overflow-wrap: anywhere;
+    @include mx.pu-font(control);
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  i {
+    @include mx.pu-icon(small);
+    flex: 0 0 auto;
+    color: var(--sys-color-on-surface-variant);
   }
 }
 
-.ride-hailing-ordering-panel__vehicles {
+.ride-hailing-ordering-panel__drawer-content {
   display: flex;
   flex-direction: column;
   gap: var(--sys-spacing-small);
-  min-height: 0;
-  overflow: auto;
-  padding-bottom: calc(var(--sys-spacing-xsmall) / 2);
+}
+
+.ride-hailing-ordering-panel__rider-row {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: var(--sys-spacing-small);
+  align-items: center;
+  padding: var(--sys-spacing-small) 0;
+  border-bottom: 1px solid var(--sys-color-outline-variant);
+
+  > span {
+    @include mx.pu-icon(medium);
+    color: var(--sys-color-on-surface-variant);
+  }
+
+  div {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    gap: calc(var(--sys-spacing-xsmall) / 2);
+  }
+
+  strong {
+    @include mx.pu-font(body);
+  }
+
+  small {
+    @include mx.pu-font(support);
+    color: var(--sys-color-on-surface-variant);
+  }
 }
 </style>
diff --git a/apps/frontend/src/domains/route/ui/RouteMap.vue b/apps/frontend/src/domains/route/ui/RouteMap.vue
index d5f60a8f6..ad9a7c9f0 100644
--- a/apps/frontend/src/domains/route/ui/RouteMap.vue
+++ b/apps/frontend/src/domains/route/ui/RouteMap.vue
@@ -11,9 +11,12 @@
       :interactive="interactive"
       :variant="variant"
       :hide-bottom-attribution="hideBottomAttribution"
+      :show-default-controls="showDefaultControls"
+      :show-zoom-controls="showZoomControls"
       :loading-message="t('route.mapLoading')"
       :unavailable-message="t('route.mapUnavailable')"
       :error-message="t('route.mapFailed')"
+      @marker-click="handleMarkerClick"
     >
       <template #fallback>
         <div class="route-map__fallback">
@@ -81,6 +84,9 @@ const props = withDefaults(
     maxZoom?: number;
     apiKey?: string;
     interactive?: boolean;
+    showDefaultControls?: boolean;
+    showZoomControls?: boolean;
+    routePointsEditable?: boolean;
     variant?: "inline" | "immersive";
     hideBottomAttribution?: boolean;
   }>(),
@@ -93,6 +99,9 @@ const props = withDefaults(
     maxZoom: 16,
     apiKey: undefined,
     interactive: true,
+    showDefaultControls: false,
+    showZoomControls: true,
+    routePointsEditable: false,
     variant: "inline",
     hideBottomAttribution: false,
   },
@@ -100,6 +109,10 @@ const props = withDefaults(
 
 const { t } = useI18n();
 
+const emit = defineEmits<{
+  routePointClick: [index: number];
+}>();
+
 const planningAbortController = ref<AbortController | null>(null);
 const planningStatus = ref<"idle" | "loading" | "success" | "error">("idle");
 const plannedRoutes = ref<TencentDrivingRoutePlan[]>([]);
@@ -138,6 +151,11 @@ const planningUrl = computed(() => {
 
 const routePlanningPrimary = computed(() => plannedRoutes.value[0] ?? null);
 
+const routePointFallbackLabel = (index: number): string =>
+  t("route.pointFallback", {
+    index: index + 1,
+  });
+
 const buildPointMarker = ({
   point,
   index,
@@ -148,14 +166,12 @@ const buildPointMarker = ({
   position: MapCoordinate;
 }): MapMarker => {
   const role = resolveRoutePointRole(index, routePoints.value.length);
+  const title = point?.name.trim() || routePointFallbackLabel(index);
   return {
     id: `route-point-${index}`,
     position,
-    title:
-      point?.name.trim() ||
-      t("route.pointFallback", {
-        index: index + 1,
-      }),
+    calloutLabel: props.routePointsEditable ? `${title} ›` : title,
+    title,
     icon:
       role === "departure"
         ? "routeStart"
@@ -165,16 +181,46 @@ const buildPointMarker = ({
   };
 };
 
+const fallbackMarkers = computed<MapMarker[]>(() =>
+  routePoints.value.flatMap((point, index): MapMarker[] => {
+    const position = pickRoutePointCoordinate(point);
+    return position
+      ? [
+          buildPointMarker({
+            point,
+            index,
+            position,
+          }),
+        ]
+      : [];
+  }),
+);
+
+const parseRoutePointMarkerId = (markerId: string): number | null => {
+  const match = /^route-point-(\d+)$/.exec(markerId);
+  if (!match) return null;
+  const index = Number(match[1]);
+  return Number.isInteger(index) ? index : null;
+};
+
+const handleMarkerClick = (markerId: string) => {
+  if (!props.routePointsEditable) return;
+  const index = parseRoutePointMarkerId(markerId);
+  if (index === null) return;
+  if (index < 0 || index >= routePoints.value.length) return;
+  emit("routePointClick", index);
+};
+
 const markers = computed<MapMarker[]>(() => {
   const primaryPlan = routePlanningPrimary.value;
   if (!primaryPlan || primaryPlan.polyline.length < 2) {
-    return projection.value.markers;
+    return fallbackMarkers.value;
   }
 
   const firstPoint = primaryPlan.polyline[0];
   const lastPoint = primaryPlan.polyline[primaryPlan.polyline.length - 1];
   if (!firstPoint || !lastPoint) {
-    return projection.value.markers;
+    return fallbackMarkers.value;
   }
 
   const waypointMarkers = routePoints.value.slice(1, -1).map((point, index) => {
diff --git a/apps/frontend/src/pages/OrderingFromPlacementPage.vue b/apps/frontend/src/pages/OrderingFromPlacementPage.vue
index 830243668..2552210c7 100644
--- a/apps/frontend/src/pages/OrderingFromPlacementPage.vue
+++ b/apps/frontend/src/pages/OrderingFromPlacementPage.vue
@@ -142,6 +142,10 @@ const readOrderingEntry = (): OrderingEntryPayload | null => {
         typeof parsed.bindings === "object" && parsed.bindings !== null
           ? parsed.bindings
           : {},
+      bindingLocks:
+        typeof parsed.bindingLocks === "object" && parsed.bindingLocks !== null
+          ? parsed.bindingLocks
+          : {},
     };
   } catch {
     return null;
@@ -176,6 +180,7 @@ const orderingContentInput = computed<OrderingContentInput | null>(() => {
     source: entry.source,
     offerDetail: entry.offerDetail,
     bindings: entry.bindings,
+    bindingLocks: entry.bindingLocks,
   };
 });
 
diff --git a/apps/frontend/src/pages/OrderingSupportPage.vue b/apps/frontend/src/pages/OrderingSupportPage.vue
index 00a7932d3..1de3483a3 100644
--- a/apps/frontend/src/pages/OrderingSupportPage.vue
+++ b/apps/frontend/src/pages/OrderingSupportPage.vue
@@ -186,6 +186,10 @@ const readOrderingEntry = (): OrderingEntryPayload | null => {
         typeof parsed.bindings === "object" && parsed.bindings !== null
           ? parsed.bindings
           : {},
+      bindingLocks:
+        typeof parsed.bindingLocks === "object" && parsed.bindingLocks !== null
+          ? parsed.bindingLocks
+          : {},
     };
   } catch {
     return null;
diff --git a/apps/frontend/src/shared/map/Map.vue b/apps/frontend/src/shared/map/Map.vue
index 780725f90..06e8346ed 100644
--- a/apps/frontend/src/shared/map/Map.vue
+++ b/apps/frontend/src/shared/map/Map.vue
@@ -7,6 +7,29 @@
       aria-hidden="true"
     ></div>
 
+    <div
+      v-if="customZoomControlsVisible"
+      class="map-shell__zoom-controls"
+      aria-label="地图缩放"
+    >
+      <button
+        type="button"
+        class="map-shell__zoom-button"
+        aria-label="放大地图"
+        @click.stop="zoomIn"
+      >
+        <span class="i-mdi-plus" aria-hidden="true"></span>
+      </button>
+      <button
+        type="button"
+        class="map-shell__zoom-button"
+        aria-label="缩小地图"
+        @click.stop="zoomOut"
+      >
+        <span class="i-mdi-minus" aria-hidden="true"></span>
+      </button>
+    </div>
+
     <div
       v-if="overlayVisible"
       class="map-shell__fallback"
@@ -64,6 +87,8 @@ const props = withDefaults(
     interactive?: boolean;
     variant?: "inline" | "immersive";
     hideBottomAttribution?: boolean;
+    showDefaultControls?: boolean;
+    showZoomControls?: boolean;
     loadingMessage?: string;
     unavailableMessage?: string;
     errorMessage?: string;
@@ -82,6 +107,8 @@ const props = withDefaults(
     interactive: true,
     variant: "inline",
     hideBottomAttribution: false,
+    showDefaultControls: true,
+    showZoomControls: false,
     loadingMessage: "地图加载中",
     unavailableMessage: "地图暂不可用",
     errorMessage: "地图加载失败",
@@ -91,6 +118,7 @@ const props = withDefaults(
 const emit = defineEmits<{
   ready: [];
   error: [error: Error];
+  markerClick: [markerId: string];
 }>();
 
 const MAX_INIT_ATTEMPTS = 80;
@@ -153,6 +181,10 @@ const overlayVisible = computed(
   () => status.value !== "ready" || normalizedApiKey.value.length === 0,
 );
 
+const customZoomControlsVisible = computed(
+  () => props.showZoomControls && props.interactive && !overlayVisible.value,
+);
+
 const hasUsableContainerSize = (container: HTMLElement): boolean => {
   const rect = container.getBoundingClientRect();
   return rect.width > 0 && rect.height > 0;
@@ -207,6 +239,8 @@ const initMap = async () => {
       minZoom: props.minZoom,
       maxZoom: props.maxZoom,
       interactive: props.interactive,
+      showDefaultControls: props.showDefaultControls,
+      onMarkerClick: (markerId) => emit("markerClick", markerId),
     });
     status.value = "ready";
     applyMapData();
@@ -221,6 +255,14 @@ const initMap = async () => {
   }
 };
 
+const zoomIn = () => {
+  provider.value?.zoomIn();
+};
+
+const zoomOut = () => {
+  provider.value?.zoomOut();
+};
+
 const clearScheduledInitialMapInit = () => {
   if (typeof window === "undefined") {
     return;
@@ -322,6 +364,7 @@ watch(
 
 <style scoped lang="scss">
 .map-shell {
+  isolation: isolate;
   position: relative;
   display: block;
   width: 100%;
@@ -343,13 +386,55 @@ watch(
 }
 
 .map-shell__canvas {
+  isolation: isolate;
   position: absolute;
   inset: 0;
+  z-index: 0;
+}
+
+.map-shell__zoom-controls {
+  position: absolute;
+  right: var(--sys-spacing-small);
+  top: var(--sys-spacing-small);
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid var(--sys-color-outline-variant);
+  border-radius: var(--sys-radius-small);
+  background: var(--sys-color-surface);
+  box-shadow: var(--sys-shadow-2);
+}
+
+.map-shell__zoom-button {
+  display: grid;
+  width: 2.25rem;
+  height: 2.25rem;
+  place-items: center;
+  border: 0;
+  border-bottom: 1px solid var(--sys-color-outline-variant);
+  background: transparent;
+  color: var(--sys-color-on-surface);
+  cursor: pointer;
+
+  &:last-child {
+    border-bottom: 0;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--sys-color-primary);
+    outline-offset: -2px;
+  }
+
+  span {
+    @include mx.pu-icon(small);
+  }
 }
 
 .map-shell__fallback {
   position: absolute;
   inset: 0;
+  z-index: 20;
   display: flex;
   flex-direction: column;
   align-items: center;
diff --git a/apps/frontend/src/shared/map/tencent/tencent-lbs-provider.ts b/apps/frontend/src/shared/map/tencent/tencent-lbs-provider.ts
index 137b971e9..152cf3aaa 100644
--- a/apps/frontend/src/shared/map/tencent/tencent-lbs-provider.ts
+++ b/apps/frontend/src/shared/map/tencent/tencent-lbs-provider.ts
@@ -15,6 +15,7 @@ import type {
   TencentMap,
   TencentMapOptions,
   TencentMapSdk,
+  TencentMarkerClickEvent,
   TencentMultiMarker,
   TencentMultiPolyline,
   TencentPointGeometry,
@@ -221,8 +222,9 @@ const toMarkerGeometries = (
           title: marker.title ?? marker.label ?? marker.id,
         },
       };
-      if (typeof marker.label === "string" && marker.label.length > 0) {
-        geometry.content = marker.label;
+      const content = marker.calloutLabel ?? marker.label ?? "";
+      if (content.length > 0) {
+        geometry.content = content;
       }
       return geometry;
     });
@@ -323,13 +325,15 @@ export const createTencentLBSMapProvider = async ({
   minZoom,
   maxZoom,
   interactive = true,
+  showDefaultControls = true,
+  onMarkerClick,
 }: TencentLBSMapProviderInput): Promise<TencentLBSMapProvider> => {
   const sdk = await loadTencentLBSSdk({ key: apiKey, libraries });
   const mapOptions: TencentMapOptions = {
     center: toTencentLatLng(sdk, center),
     zoom,
     viewMode: "2D",
-    showControl: interactive,
+    showControl: showDefaultControls,
     draggable: interactive,
     scrollable: interactive,
     touchZoomable: interactive,
@@ -352,6 +356,14 @@ export const createTencentLBSMapProvider = async ({
     disableInteractive: false,
   });
 
+  const handleMarkerClick = (event: TencentMarkerClickEvent) => {
+    const markerId = event.geometry?.id;
+    if (markerId) {
+      onMarkerClick?.(markerId);
+    }
+  };
+  markerLayer.on("click", handleMarkerClick);
+
   let polylineLayer: TencentMultiPolyline | null = new sdk.MultiPolyline({
     id: "partner-up-polyline-layer",
     map,
@@ -389,7 +401,14 @@ export const createTencentLBSMapProvider = async ({
         map.setZoom(nextZoom);
       }
     },
+    zoomIn() {
+      map.setZoom(Math.min(map.getZoom() + 1, maxZoom ?? 20));
+    },
+    zoomOut() {
+      map.setZoom(Math.max(map.getZoom() - 1, minZoom ?? 3));
+    },
     destroy() {
+      markerLayer?.off("click", handleMarkerClick);
       markerLayer?.setMap(null);
       markerLayer = null;
       polylineLayer?.setMap(null);
diff --git a/apps/frontend/src/shared/map/tencent/types.ts b/apps/frontend/src/shared/map/tencent/types.ts
index 94bf92120..47ef642c3 100644
--- a/apps/frontend/src/shared/map/tencent/types.ts
+++ b/apps/frontend/src/shared/map/tencent/types.ts
@@ -50,6 +50,7 @@ export type TencentLatLngBoundsConstructor = {
 export type TencentMap = {
   setCenter(center: TencentLatLng): TencentMap;
   setZoom(zoom: number): TencentMap;
+  getZoom(): number;
   fitBounds(
     bounds: TencentLatLngBounds,
     options?: TencentFitBoundsOptions,
@@ -96,6 +97,20 @@ export type TencentPointGeometry = {
 export type TencentMultiMarker = {
   setGeometries(geometries: TencentPointGeometry[]): TencentMultiMarker;
   setMap(map: TencentMap | null): TencentMultiMarker;
+  on(
+    eventName: "click",
+    handler: (event: TencentMarkerClickEvent) => void,
+  ): TencentMultiMarker;
+  off(
+    eventName: "click",
+    handler: (event: TencentMarkerClickEvent) => void,
+  ): TencentMultiMarker;
+};
+
+export type TencentMarkerClickEvent = {
+  geometry?: {
+    id?: string;
+  };
 };
 
 export type TencentMultiMarkerConstructor = {
@@ -168,6 +183,8 @@ export type TencentLBSMapProviderInput = {
   minZoom?: number;
   maxZoom?: number;
   interactive?: boolean;
+  showDefaultControls?: boolean;
+  onMarkerClick?: (markerId: string) => void;
 };
 
 export type TencentLBSMapProvider = {
@@ -184,6 +201,8 @@ export type TencentLBSMapProvider = {
     center?: MapCoordinate;
     zoom?: number;
   }): void;
+  zoomIn(): void;
+  zoomOut(): void;
   destroy(): void;
 };
 
diff --git a/apps/frontend/src/shared/map/types.ts b/apps/frontend/src/shared/map/types.ts
index aeda8bc81..c3804ca21 100644
--- a/apps/frontend/src/shared/map/types.ts
+++ b/apps/frontend/src/shared/map/types.ts
@@ -30,6 +30,7 @@ export type MapMarker = {
   id: string;
   position: MapCoordinate;
   label?: string;
+  calloutLabel?: string;
   title?: string;
   tone?: MapGeometryTone;
   icon?: MapMarkerIcon;
diff --git a/tasks/ride-hailing-mvp/00-task-packet.md b/tasks/ride-hailing-mvp/00-task-packet.md
index d549543a9..02cca3f87 100644
--- a/tasks/ride-hailing-mvp/00-task-packet.md
+++ b/tasks/ride-hailing-mvp/00-task-packet.md
@@ -14,6 +14,24 @@ smallest focused sibling file instead of accumulating here.
 - `control.md`
   - current task control surface, governing principles, active sequence, and
     human-confirmation boundary
+- `subtasks/00-order-spine-correction/control.md`
+  - completed correction from support-handoff detour to real order creation and
+    order detail navigation
+- `subtasks/10-fake-caocao-local-dev/control.md`
+  - completed first-class fake Caocao local provider package work
+- `subtasks/20-dev-ride-hailing-fixtures/control.md`
+  - development-only RideHailing provider/catalog/offer/placement fixture and
+    task-local manual seed state
+- `subtasks/30-ordering-page-ui/control.md`
+  - discussion packet for the `/order/new` RideHailing ordering UI before any
+    implementation
+- `subtasks/40-order-detail-ui/control.md`
+  - discussion packet for the `/orders/:orderId` RideHailing lifecycle UI
+- `subtasks/50-provider-authored-ride-options/control.md`
+  - pending contract decision for catalog-seeded vs provider-authored ride
+    options
+- `subtasks/60-runtime-verification/control.md`
+  - cross-subtask runtime and scenario verification checklist
 - `10-flow-correction.md`
   - first product correction: remove the support-handoff detour and restore the
     real `quote -> create order -> order detail` spine
@@ -50,7 +68,8 @@ Hypothesis:
 ## Guardrails Touched
 
 - Provisional input route: Reality against existing ecommerce contract, with a possible Constraint / Intent slice only if provider-authoritative SKU discovery needs new durable contract
-- Active mode: Execute
+- Active mode: Explore / Solidify until a subtask implementation shape is
+  explicitly confirmed
 - Durable owners likely involved:
   - `docs/10-prd/`
   - `docs/20-product-tdd/`
@@ -162,18 +181,22 @@ Hypothesis:
 ## Confirmed Constraints
 
 - Exploration and task packet work are allowed now
-- Production code mutation for slices 1 and 2 is approved and executed
+- Production code mutation for completed foundation slices was approved and
+  executed
+- Production code mutation for ordering-page UI, order-detail UI, and provider
+  authored options is not yet approved
 - Prefer smallest useful reference set and keep this packet current as evidence changes
 
 ## Next Step
 
-1. Use the newly stable fake Caocao setup for live UI runtime audit.
-2. Redesign the ride-hailing ordering page around route summary, quote state,
-   and SKU selection.
-3. Redesign ride-hailing order detail around ride lifecycle and final-bill
-   states.
-4. Decide whether dynamic SKU discovery stays catalog-seeded or becomes
-   provider-authored.
+1. Review `subtasks/30-ordering-page-ui/control.md` and confirm the ordering
+   page UI direction.
+2. Then review `subtasks/40-order-detail-ui/control.md` and confirm the detail
+   page lifecycle direction.
+3. Then decide whether `subtasks/50-provider-authored-ride-options/` belongs in
+   the same MVP pass or a later contract slice.
+4. Use `subtasks/60-runtime-verification/` once a concrete implementation slice
+   is approved.
 
 ## Working Rule
 
diff --git a/tasks/ride-hailing-mvp/30-ui-runtime-audit.md b/tasks/ride-hailing-mvp/30-ui-runtime-audit.md
index 7fdbf6e5f..504cd9e03 100644
--- a/tasks/ride-hailing-mvp/30-ui-runtime-audit.md
+++ b/tasks/ride-hailing-mvp/30-ui-runtime-audit.md
@@ -1,5 +1,12 @@
 # UI Runtime Audit
 
+This packet is now a historical runtime-audit note. Active discussion and
+implementation planning live in:
+
+- `subtasks/30-ordering-page-ui/control.md`
+- `subtasks/40-order-detail-ui/control.md`
+- `subtasks/60-runtime-verification/control.md`
+
 ## Ordering Page
 
 Current topology:
@@ -9,13 +16,16 @@ Current topology:
 
 Current problems:
 
-- the page still carries the semantics of a real create-order surface while
-  actually routing to support handoff
 - the ride panel has no explicit visible contact input
 - the ride panel exposes almost no editable structure for route/time/riders
 - the current UI feels like an internal verification branch rather than a buyer
   decision surface
 
+Resolved since this audit was first written:
+
+- the shared ordering submit path now creates a real order and routes to
+  `/orders/:orderId`
+
 ## Order Detail Page
 
 Current topology:
diff --git a/tasks/ride-hailing-mvp/control.md b/tasks/ride-hailing-mvp/control.md
index 9ee7ef42c..b502c3c3a 100644
--- a/tasks/ride-hailing-mvp/control.md
+++ b/tasks/ride-hailing-mvp/control.md
@@ -32,6 +32,9 @@ Hypothesis:
 - Possible follow-up route: `Constraint` or `Intent` only if provider-driven SKU
   discovery requires a durable new contract
 - Active mode: `Execute`
+- Current collaboration state: implement the confirmed
+  `subtasks/30-ordering-page-ui/` slices while keeping each mutation explicit
+  and reviewable
 
 ## Durable Owners In Scope
 
@@ -66,16 +69,33 @@ Hypothesis:
 
 ## Active Sequence
 
-0. Completed: prepare local-dev provider infrastructure so UI iteration can
-   happen against a deterministic fake Caocao service.
-1. Completed: correct the broken product flow:
-   `quote/vehicle selection -> support handoff`
-   to
-   `quote/vehicle selection -> create order -> order detail`.
-2. Next: iterate on ordering page UI.
-3. Then iterate on ride-hailing order detail UI.
-4. After the above, decide whether dynamic SKU discovery should stay
-   catalog-seeded or become provider-authored.
+0. Completed subtask:
+   `subtasks/00-order-spine-correction/`
+   - correct the broken product flow from
+     `quote/vehicle selection -> support handoff`
+     to
+     `quote/vehicle selection -> create order -> order detail`.
+1. Completed subtask:
+   `subtasks/10-fake-caocao-local-dev/`
+   - prepare local-dev provider infrastructure so UI iteration can happen
+     against a deterministic fake Caocao service.
+2. Prepared subtask:
+   `subtasks/20-dev-ride-hailing-fixtures/`
+   - keep RideHailing mock data and manual-test seed state explicit.
+3. Discussion subtask:
+   `subtasks/30-ordering-page-ui/`
+   - confirm the `/order/new` UI shape before implementation.
+4. Pending discussion subtask:
+   `subtasks/40-order-detail-ui/`
+   - confirm the `/orders/:orderId` RideHailing lifecycle UI shape before
+     implementation.
+5. Pending decision subtask:
+   `subtasks/50-provider-authored-ride-options/`
+   - decide whether dynamic SKU discovery stays catalog-seeded or becomes
+     provider-authored.
+6. Cross-subtask verification packet:
+   `subtasks/60-runtime-verification/`
+   - preserve the runtime checklist and commands used once a slice is approved.
 
 ## Why This Sequence
 
@@ -88,7 +108,8 @@ Hypothesis:
 ## Human Confirmation Boundary
 
 - Task-packet work and exploration are approved.
-- Any production code mutation still requires an explicit human start signal.
+- Any new production code mutation still requires an explicit human start
+  signal.
 - Before that start signal, prepare only:
   - task packet structure
   - evidence
diff --git a/tasks/ride-hailing-mvp/subtasks/00-order-spine-correction/control.md b/tasks/ride-hailing-mvp/subtasks/00-order-spine-correction/control.md
new file mode 100644
index 000000000..4cb632ebf
--- /dev/null
+++ b/tasks/ride-hailing-mvp/subtasks/00-order-spine-correction/control.md
@@ -0,0 +1,54 @@
+# Order Spine Correction
+
+## Status
+
+Completed.
+
+This subtask is historical context for the current Ride Hailing MVP work. It is
+not open for more implementation unless new evidence shows the restored spine is
+wrong.
+
+## Objective & Hypothesis
+
+Objective:
+
+- restore the durable ecommerce route spine for RideHailing ordering:
+  `PR Page -> /order/new -> POST /api/commerce/orders -> /orders/:orderId`
+
+Hypothesis:
+
+- the backend order-creation foundation already existed
+- the main defect was a frontend detour that treated the primary create action
+  as a support handoff
+
+## Guardrails Touched
+
+- durable owner: `docs/20-product-tdd/ecommerce-contracts.md`
+- frontend route/page owner:
+  `apps/frontend/src/pages/OrderingFromPlacementPage.vue`
+- frontend commerce query owner:
+  `apps/frontend/src/domains/commerce/queries/useCommerce.ts`
+- scenario owner:
+  `tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+- collateral scenario owner:
+  `tests/scenario/commerce/rental-ordering.scenario.test.ts`
+
+## Confirmed Outcome
+
+- `/order/new` now creates a real trade order.
+- Create success navigates to `/orders/:orderId`.
+- `/order/support` no longer owns the primary meaning of `下单`.
+- RideHailing create failure stays on `/order/new` and surfaces the error.
+- Rental ordering followed the same shared page correction.
+
+## Verification
+
+Completed verification recorded in the parent packet:
+
+- `pnpm check:type:frontend`
+- `pnpm vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts tests/scenario/commerce/rental-ordering.scenario.test.ts`
+
+## Next Step
+
+No active next step. Keep this packet as context for later UI and detail-page
+work.
diff --git a/tasks/ride-hailing-mvp/subtasks/10-fake-caocao-local-dev/control.md b/tasks/ride-hailing-mvp/subtasks/10-fake-caocao-local-dev/control.md
new file mode 100644
index 000000000..5a6b91e1d
--- /dev/null
+++ b/tasks/ride-hailing-mvp/subtasks/10-fake-caocao-local-dev/control.md
@@ -0,0 +1,44 @@
+# Fake Caocao Local Dev
+
+## Status
+
+Completed as an enabling infrastructure slice.
+
+## Objective & Hypothesis
+
+Objective:
+
+- make Caocao provider behavior available in local development through the
+  existing `packages/fake-caocao-server` workspace package
+
+Hypothesis:
+
+- UI and order lifecycle work need deterministic provider behavior
+- maintaining one first-class fake provider is safer than creating task-local or
+  app-local duplicate mocks
+
+## Guardrails Touched
+
+- package owner: `packages/fake-caocao-server/`
+- scenario infra owner: `tests/scenario/_infra/vitest/global-setup.ts`
+- dev entry owner: root `package.json` / portless dev scripts
+
+## Confirmed Outcome
+
+- fake Caocao is promoted into a first-class dev package.
+- local development can run it through the portless app name
+  `fake-caocao`.
+- scenario setup consumes the package boundary.
+- package tests and typecheck cover the fake provider contract.
+
+## Verification
+
+Completed verification recorded in the parent packet:
+
+- `pnpm --filter @partner-up-dev/fake-caocao-server test`
+- `pnpm --filter @partner-up-dev/fake-caocao-server typecheck`
+
+## Next Step
+
+Use this service as the provider runtime when discussing and later validating
+ordering-page and order-detail UI.
diff --git a/tasks/ride-hailing-mvp/subtasks/20-dev-ride-hailing-fixtures/control.md b/tasks/ride-hailing-mvp/subtasks/20-dev-ride-hailing-fixtures/control.md
new file mode 100644
index 000000000..b4d344abf
--- /dev/null
+++ b/tasks/ride-hailing-mvp/subtasks/20-dev-ride-hailing-fixtures/control.md
@@ -0,0 +1,64 @@
+# Dev Ride Hailing Fixtures
+
+## Status
+
+Prepared as a development fixture slice.
+
+Runtime application to the local dev database is environment-dependent in this
+workspace because the latest recorded `pnpm db:migrate:dev` attempt was blocked
+by `CONNECT_TIMEOUT ws-win.hadream.localhost:5436`.
+
+## Objective & Hypothesis
+
+Objective:
+
+- provide stable local RideHailing provider/catalog/offer/placement data so the
+  web journey can be entered from a real PR Button Placement
+
+Hypothesis:
+
+- realistic UI discussion and runtime validation need provider-backed mock data,
+  not hand-constructed session storage payloads
+
+## Guardrails Touched
+
+- dev-only data migration owner:
+  `apps/backend/data-migrations/`
+- task-local manual seed owner:
+  `tasks/ride-hailing-mvp/dev-ride-hailing-ordering-seed.sql`
+- task-local patch owners:
+  `tasks/ride-hailing-mvp/dev-ride-hailing-portless-endpoint-patch.sql`
+  `tasks/ride-hailing-mvp/dev-ride-hailing-placement-type-patch.sql`
+
+## Confirmed Outcome
+
+- stable fake Caocao provider/catalog/offer/placement setup belongs to a
+  development-only data migration.
+- task-local SQL remains only for manual-test PR setup or append-only repair of
+  earlier task seed mistakes.
+- the temporary RideHailing Button Placement matches real PR type
+  `RIDE_HAILING`.
+- provider URLs follow the portless dev shape:
+  `https://fake-caocao.localhost` and
+  `https://api.partner-up.localhost`.
+
+## Verification
+
+Recorded verification:
+
+- environment-aware data migration parsing is covered by
+  `apps/backend/src/scripts/db/shared.test.ts`
+- `pnpm db:lint`
+- backend type/config checks
+- FC migration bundle build
+
+Remaining runtime proof:
+
+- rerun `pnpm db:migrate:dev` in an environment where the dev DB is reachable
+- open a PR Page and confirm the RideHailing Button Placement resolves
+  `/order/new`
+
+## Next Step
+
+Treat fixtures as available for planning. Recheck live DB reachability only when
+manual browser validation starts.
diff --git a/tasks/ride-hailing-mvp/subtasks/30-ordering-page-ui/control.md b/tasks/ride-hailing-mvp/subtasks/30-ordering-page-ui/control.md
new file mode 100644
index 000000000..4b6e698c8
--- /dev/null
+++ b/tasks/ride-hailing-mvp/subtasks/30-ordering-page-ui/control.md
@@ -0,0 +1,151 @@
+# Ordering Page UI
+
+## Status
+
+Implementation in progress.
+
+Current approved implementation slice:
+
+- route map correction for RideHailing `/order/new`
+- runtime diagnosis for missing map changes on `https://partner-up.local`
+
+Current fork:
+
+- `subtasks/10-wireframe-regression/`
+  - static HTML + limited UnoCSS wireframe task for UI design communication and
+    automated regression before production Vue implementation
+  - current artifact direction: derive the first wireframe from
+    `../Application/uniapp/src/sub_packages/ride_hailing/`
+
+## Objective & Hypothesis
+
+Objective:
+
+- turn `/order/new` for RideHailing into an MVP-quality buyer decision surface
+  before order creation
+
+Hypothesis:
+
+- the current create/evaluate topology is correct enough
+- the next risk is user comprehension: route basis, riders, contact phone,
+  departure time, quote status, and vehicle selection are not yet explicit
+  enough
+
+## Guardrails Touched
+
+- durable owner:
+  `docs/20-product-tdd/ecommerce-contracts.md`
+- page shell owner:
+  `apps/frontend/src/pages/OrderingFromPlacementPage.vue`
+- ride ordering UI owner:
+  `apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingPanel.vue`
+- ride SKU card owner:
+  `apps/frontend/src/domains/commerce/ui/ordering/RideHailingSkuCard.vue`
+- route display dependency:
+  `apps/frontend/src/domains/route/ui/RouteMap.vue`
+
+## Current Understanding
+
+- `/order/new` already creates real orders and routes to order detail.
+- `RideHailingOrderingPanel.vue` already renders `RouteMap`.
+- route map rendering should use driving route planning instead of the
+  placement-binding straight-line `drivingPlan.polyline`.
+- users should be able to pan/zoom the map, with app-owned zoom controls rather
+  than Tencent default controls.
+- route item markers should expose callouts with place name + chevron and open
+  a bottom drawer for editing.
+- route item callout editability is governed by placement binding lock metadata:
+  `bindingLocks.route === true` means the route callouts are display-only.
+- ordering entry payload now carries binding lock metadata alongside binding
+  values so the frontend does not guess editability.
+- the ordering drawer now has a bottom control row for `同乘人` and `出发时间`.
+- `同乘人` opens a drawer showing current riders and respects
+  `bindingLocks.orderParticipants`.
+- `出发时间` opens a drawer with a local datetime editor and respects
+  `bindingLocks.departureAt`.
+- ordering evaluation/create payload uses the locally edited departure time.
+- selected SKU and evaluation output are already separated from final create
+  output.
+- contact phone is required for final output but is not visibly editable in the
+  current RideHailing panel.
+- route/time/riders are injected by placement bindings and are effectively
+  locked by the current contract.
+- Vite is serving the current map implementation from `127.0.0.1:4904`:
+  the loaded modules include app-owned zoom controls, route marker click
+  plumbing, and RideHailing ordering no longer passes the placement straight
+  line as `plannedPolyline`.
+- On 2026-06-19, `partner-up.local` and `api.partner-up.local` were missing
+  from `portless list` while the direct frontend/backend ports were healthy.
+  They were restored with portless aliases to the active dev ports.
+- The current portless proxy is in LAN mode and registers `.local` routes.
+  Running `pnpm dev:ensure` without LAN arguments still waits for
+  `.localhost` routes, so it can false-negative and start another server
+  attempt even when `.local` aliases are healthy.
+- The route map zoom buttons were visible but not clickable because Tencent
+  map DOM inside `.map-shell__canvas` could sit above the app-owned controls
+  and intercept pointer events. The map shell and canvas now establish stacking
+  contexts, the canvas is pinned below the app-owned controls, and zoom button
+  clicks stop propagation before reaching map gesture handlers.
+
+## Open Design Questions
+
+- Which details from the uniapp RideHailing ordering implementation should be
+  preserved, simplified, or removed for the web MVP?
+- Which fields are review-only for MVP: route, departure time, riders?
+- Should contact phone stay outside the main ordering drawer and use a separate
+  phone-acquisition flow?
+- How should quote states appear:
+  `未估价`, `估价中`, `部分车型不可用`, `全部不可用`, provider failure?
+- What is the minimum route text summary needed beside the map?
+- Should vehicle cards show only final quote amount, or also provider estimate
+  context such as price range / unavailable reason?
+
+## Human Confirmation Boundary
+
+Before implementation, perform an Impact Handshake covering:
+
+- whether implementation means wireframe artifact work or production Vue work
+- exact files and symbols to change
+- information architecture from current UI to proposed UI
+- invariants: real create-order path, evaluation command shape, locked binding
+  authority, scenario test IDs
+- verification plan
+
+## Verification
+
+Completed verification:
+
+- `pnpm check:type:frontend`
+- `pnpm check:type:backend`
+- `curl -I http://127.0.0.1:4904/order/new` returned 200 from Vite.
+- `curl -I http://127.0.0.1:4229/health` returned 200 from backend.
+- `portless list` shows:
+  - `https://partner-up.local -> localhost:4904`
+  - `https://api.partner-up.local -> localhost:4229`
+- `curl -k -I https://partner-up.local/order/new` returned HTTP/2 200.
+- `curl -k -I https://api.partner-up.local/health` returned HTTP/2 200.
+- Direct Vite module fetch confirmed the live dev server contains the map
+  correction code in `RideHailingOrderingPanel.vue`, `RouteMap.vue`, and
+  `Map.vue`.
+- Fake `window.TMap` browser repro confirmed the failure mode: a high-z-index
+  child inside `.map-shell__canvas` intercepted clicks on the visible zoom
+  button.
+- With the fixed stacking rules applied, the fake-map repro hit the plus icon
+  and changed zoom `14 -> 15 -> 14`.
+- `pnpm check:type:frontend`
+
+Expected after broader implementation:
+
+- for wireframe work:
+  - static artifact renders locally
+  - automated test asserts required sections/states/test IDs
+  - optional screenshot evidence for Pixel 7
+- `pnpm check:type:frontend`
+- focused scenario coverage if test IDs or browser-visible behavior changes
+- manual browser pass through PR placement -> `/order/new`
+
+## Next Step
+
+Confirm in browser from a real PR placement entry into `/order/new`. If the
+running Vite server still serves the old `Map.vue` style module, restart the
+frontend dev server before retesting zoom controls.
diff --git a/tasks/ride-hailing-mvp/subtasks/30-ordering-page-ui/subtasks/10-wireframe-regression/control.md b/tasks/ride-hailing-mvp/subtasks/30-ordering-page-ui/subtasks/10-wireframe-regression/control.md
new file mode 100644
index 000000000..5d1778e5f
--- /dev/null
+++ b/tasks/ride-hailing-mvp/subtasks/30-ordering-page-ui/subtasks/10-wireframe-regression/control.md
@@ -0,0 +1,185 @@
+# Wireframe Regression
+
+## Status
+
+Wireframe artifact work approved for the task packet only.
+
+Production Vue implementation is still not approved.
+
+This child task is forked from
+`tasks/ride-hailing-mvp/subtasks/30-ordering-page-ui/`.
+
+## Objective & Hypothesis
+
+Objective:
+
+- create a static low-fidelity HTML wireframe for the RideHailing `/order/new`
+  page
+- use a limited UnoCSS atomic-class preset so humans and agents can discuss UI
+  design from a concrete artifact
+- make the wireframe stable enough for automated regression tests
+
+Hypothesis:
+
+- the ordering-page design can be aligned faster with a concrete static
+  wireframe than with prose alone
+- a deliberately small atomic-class vocabulary will keep the wireframe readable,
+  reviewable, and testable
+- low-fi layout, content, and relative color semantics are sufficient before
+  committing to production Vue component changes
+
+## Non-Goals
+
+- do not implement production Vue UI in this task
+- do not change `/order/new` runtime behavior
+- do not change commerce evaluation or order-creation contracts
+- do not polish visual design beyond wireframe-level fidelity
+- do not introduce provider-authored SKU discovery decisions here
+
+## Intended Artifact
+
+Primary artifact:
+
+- `artifacts/current-ordering-new.html`
+  - static HTML wireframe for the RideHailing `/order/new` page, derived from
+    the legacy uniapp implementation
+
+Expected qualities:
+
+- low-fidelity but complete enough to show layout hierarchy
+- includes user-visible content labels and representative data
+- includes relative color semantics such as surface, muted, accent, warning, and
+  disabled states
+- includes stable semantic `data-testid` hooks for automated checks
+- uses only the agreed limited UnoCSS atomic-class preset
+
+Potential companion artifacts:
+
+- a tiny local preview entry if plain HTML alone is awkward to run
+- screenshot tests once the rendering environment is stable
+- optional screenshot snapshots for the canonical viewport
+
+Confirmed constraints:
+
+- artifact lives inside this task packet
+- only one wireframe for now
+- first implementation source is:
+  `../Application/uniapp/src/sub_packages/ride_hailing/`
+- first wireframe should extract the intended ordering-page structure from:
+  - `pages/order.vue`
+  - `pages/order.scss`
+  - `components/rideTypeDisplay/rideTypeDisplay.vue`
+  - `components/rideTypeDisplay/index.scss`
+- canonical viewport is Pixel 7
+- screenshot regression is the intended test strategy, but tests are deferred
+  for now
+
+Confirmed UI direction:
+
+- keep a full-screen map with a bottom drawer/panel
+- keep the drawer resizer/handle
+- do not require this page shape to align with the uniapp `PageHeader` /
+  `BottomActionBar`; uniapp is the source for the core map + drawer ordering
+  structure, not for web chrome/action-bar parity
+- do not show a `来自 {PR title} 的出行请求` summary in the ordering drawer
+- do not show the uniapp `AdManager` / recommendation block in this ordering
+  wireframe
+- show available ride-type quote cards inside the drawer
+- do not show route-unavailable vehicle types
+- put `同乘人` and `出发时间` into one flat row at the bottom of the drawer
+- clicking `同乘人` should later open a bottom drawer for rider editing
+- clicking `出发时间` should later open a bottom drawer for departure-time
+  editing
+- bottom action row uses web commerce semantics: selected estimated amount,
+  price-detail entry, and `下单`
+
+## Proposed Wireframe Coverage
+
+The first wireframe should model at least:
+
+- top app/header context for `/order/new`
+- route map or map placeholder area
+- text route summary for origin, destination, and waypoints
+- departure time
+- riders / participants
+- bottom drawer edit entry for riders
+- bottom drawer edit entry for departure time
+- quote status area
+- vehicle option list with selected and loading/estimating states
+- bottom action area with price range and create-order affordance
+- blocked-state notice when required information or availability is missing
+
+## Atomic Class Constraints
+
+The UnoCSS usage should be intentionally narrow.
+
+Expected class families:
+
+- layout: flex, grid, block, hidden, relative, absolute
+- spacing: gap, padding, margin from a small scale
+- sizing: width, height, min/max, aspect ratio
+- typography: text size, weight, leading, alignment
+- border/radius/shadow: minimal wireframe surfaces
+- color roles: neutral surface, subtle surface, text, muted text, accent,
+  warning, danger, disabled
+
+Avoid:
+
+- arbitrary one-off values unless explicitly added to the preset
+- production design-token coupling
+- decorative gradients, illustrations, or high-fidelity assets
+- class sprawl that makes layout review harder than reading CSS
+
+## Regression Intent
+
+Automated tests should protect the wireframe as a design contract, not as final
+production UI.
+
+Candidate assertions:
+
+- required sections exist in the intended order
+- stable `data-testid` hooks exist for key regions and states
+- selected / disabled vehicle states are represented
+- blocked create state is represented
+- mobile-sized viewport layout remains coherent
+- desktop-sized viewport layout remains coherent if desktop wireframe is in
+  scope
+
+## Guardrails Touched
+
+- parent discussion owner:
+  `tasks/ride-hailing-mvp/subtasks/30-ordering-page-ui/control.md`
+- possible artifact owner:
+  `tasks/ride-hailing-mvp/subtasks/30-ordering-page-ui/subtasks/10-wireframe-regression/`
+- production owners are intentionally not touched in this task unless a later
+  approved implementation slice maps the wireframe into Vue:
+  - `apps/frontend/src/pages/OrderingFromPlacementPage.vue`
+  - `apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingPanel.vue`
+  - `apps/frontend/src/domains/commerce/ui/ordering/RideHailingSkuCard.vue`
+
+## Open Questions
+
+- What exact atomic class whitelist should be allowed?
+- Should the wireframe use Chinese production-like copy from the start, or
+  neutral labels while information architecture is still moving?
+
+## Human Confirmation Boundary
+
+Before implementation, confirm:
+
+- allowed UnoCSS class whitelist or preset shape when the temporary inline CSS
+  shim is replaced by a real preset/harness
+- when screenshot regression should be added
+
+## Verification
+
+Expected after implementation approval:
+
+- static artifact renders locally
+- optional screenshot evidence for Pixel 7
+- no production-code diff unless separately approved
+
+## Next Step
+
+Review the uniapp-derived static HTML artifact and continue adjusting it from
+human feedback before production Vue implementation is discussed.
diff --git a/tasks/ride-hailing-mvp/subtasks/40-order-detail-ui/control.md b/tasks/ride-hailing-mvp/subtasks/40-order-detail-ui/control.md
new file mode 100644
index 000000000..583e6be4a
--- /dev/null
+++ b/tasks/ride-hailing-mvp/subtasks/40-order-detail-ui/control.md
@@ -0,0 +1,74 @@
+# Order Detail UI
+
+## Status
+
+Pending discussion. Not approved for production-code implementation yet.
+
+## Objective & Hypothesis
+
+Objective:
+
+- make `/orders/:orderId` for RideHailing understandable as the long-lived ride
+  lifecycle page
+
+Hypothesis:
+
+- the order detail page currently proves the backend lifecycle, but it is not
+  yet a passenger-facing MVP surface
+- the most important UX work is lifecycle framing: quote basis, provider state,
+  driver/vehicle information, final bill, and payment/completion transitions
+
+## Guardrails Touched
+
+- durable owner:
+  `docs/20-product-tdd/ecommerce-contracts.md`
+- page owner:
+  `apps/frontend/src/pages/CommerceOrderDetailPage.vue`
+- commerce query owner:
+  `apps/frontend/src/domains/commerce/queries/useCommerce.ts`
+- route display dependency:
+  `apps/frontend/src/domains/route/ui/RouteMap.vue`
+- future tracking-contract owner if needed:
+  backend commerce / fulfillment read APIs
+
+## Current Understanding
+
+- the current detail page mixes ride and rental responsibilities.
+- RideHailing detail should remain the place for cancellation, final bill,
+  payment, and completion.
+- high-frequency ride tracking should eventually use a dedicated API contract
+  rather than forcing full order-detail polling to become the tracking payload.
+
+## Open Design Questions
+
+- What lifecycle phases must be visible for MVP?
+- Which provider terms should be translated into user-facing Chinese copy?
+- Should route geometry use the same `RouteMap` treatment as ordering, or a
+  smaller route summary after creation?
+- What actions belong on the page before final bill exists?
+- How should final bill and final payment be staged on the same route?
+- Should rental and ride detail be split into feature components before visual
+  polish?
+
+## Human Confirmation Boundary
+
+Before implementation, perform an Impact Handshake covering:
+
+- whether this is page-local UI work or a component split
+- whether polling behavior changes
+- what user-visible lifecycle states are in scope
+- scenario and manual verification plan
+
+## Verification
+
+Expected after implementation approval:
+
+- `pnpm check:type:frontend`
+- RideHailing scenario from created order through provider lifecycle and final
+  bill, if browser-visible assertions change
+- manual browser pass through order creation -> detail lifecycle
+
+## Next Step
+
+Discuss lifecycle model and page composition before touching
+`CommerceOrderDetailPage.vue`.
diff --git a/tasks/ride-hailing-mvp/subtasks/50-provider-authored-ride-options/control.md b/tasks/ride-hailing-mvp/subtasks/50-provider-authored-ride-options/control.md
new file mode 100644
index 000000000..245064506
--- /dev/null
+++ b/tasks/ride-hailing-mvp/subtasks/50-provider-authored-ride-options/control.md
@@ -0,0 +1,83 @@
+# Provider-Authored Ride Options
+
+## Status
+
+Pending product/technical decision. Not approved for implementation.
+
+## Objective & Hypothesis
+
+Objective:
+
+- decide whether RideHailing SKU discovery should remain catalog-seeded or
+  become provider-authored by city/route availability
+
+Hypothesis:
+
+- the current hybrid model is acceptable for restoring the order spine, but may
+  be insufficient for MVP-quality ride-hailing commerce
+- making the provider authoritative for candidate ride options is a contract
+  change, not merely a UI tweak
+
+## Guardrails Touched
+
+- durable owner:
+  `docs/20-product-tdd/ecommerce-contracts.md`
+- possible product owner:
+  `docs/10-prd/`
+- backend trade owner:
+  `apps/backend/src/domains/trade/`
+- backend ride-hailing owner:
+  `apps/backend/src/domains/ride-hailing/`
+- backend commerce controller owner:
+  `apps/backend/src/controllers/commerce.controller.ts`
+- frontend ordering owner:
+  `apps/frontend/src/domains/commerce/ui/ordering/`
+
+## Current Understanding
+
+- offer detail currently returns catalog-authored SPU/SKU candidates.
+- ordering evaluation calls the provider estimate per catalog SKU.
+- unavailable SKUs become disabled after provider estimate failure.
+- provider influences price and availability but does not author the initial
+  candidate list.
+- city is not currently a first-class query parameter in the ordering contract.
+- waypoints are stored in snapshots but are not currently part of the provider
+  estimate/create request path.
+
+## Open Contract Questions
+
+- Is catalog-seeded SKU discovery acceptable for MVP?
+- If not, which backend boundary should ask the provider for available vehicle
+  types?
+- Does provider-authored discovery require a new endpoint, or can it fit inside
+  `POST /api/commerce/ordering/evaluate`?
+- What remains catalog truth: display copy, cancellation policy, commercial
+  overlay, SKU identity?
+- How should city/route/waypoint context enter the contract?
+- How do provider-only options map back to persisted SKU snapshots?
+
+## Human Confirmation Boundary
+
+This subtask likely crosses durable owners. Before mutation, pause for an
+Impact Handshake with:
+
+- Address and Object
+- State Diff
+- Blast Radius Forecast
+- Invariants Check
+- Verification
+
+## Verification
+
+Expected after implementation approval:
+
+- backend unit tests for provider option resolution and SKU mapping
+- frontend typecheck
+- RideHailing scenario proving route-aware vehicle availability and order
+  creation
+- provider fake tests if fake Caocao contract expands
+
+## Next Step
+
+Defer until ordering-page and order-detail UX discussion clarifies whether MVP
+needs provider-authored discovery now.
diff --git a/tasks/ride-hailing-mvp/subtasks/60-runtime-verification/control.md b/tasks/ride-hailing-mvp/subtasks/60-runtime-verification/control.md
new file mode 100644
index 000000000..7d2e3cc80
--- /dev/null
+++ b/tasks/ride-hailing-mvp/subtasks/60-runtime-verification/control.md
@@ -0,0 +1,63 @@
+# Runtime Verification
+
+## Status
+
+Pending. This is a cross-subtask verification packet, not an implementation
+slice by itself.
+
+## Objective & Hypothesis
+
+Objective:
+
+- keep the RideHailing MVP recovery grounded in browser-visible and provider
+  runtime evidence
+
+Hypothesis:
+
+- the task is large enough that each implementation slice should have focused
+  verification, while this packet preserves the end-to-end runtime checklist
+
+## Guardrails Touched
+
+- dev entry owner: root `pnpm dev:ensure` and portless scripts
+- provider runtime owner: `packages/fake-caocao-server/`
+- browser scenario owner: `tests/scenario/commerce/`
+- frontend route owners:
+  `/order/new` and `/orders/:orderId`
+
+## Runtime Checklist
+
+Use `pnpm dev:ensure` from the repository root when local frontend/backend
+services are needed.
+
+Checkpoints:
+
+- PR placement opens `/order/new` with correct route, riders, and contact
+  prefill.
+- Ride quote list shows provider-backed availability and price ranges.
+- Create success navigates to `/orders/:orderId`.
+- Order detail shows real route geometry or a deliberate MVP route summary.
+- Provider state progression is understandable without internal terminology.
+- Final bill and payment/completion transition are visible and coherent.
+
+## Verification Commands
+
+Choose the narrowest sufficient set per slice:
+
+- `pnpm check:type:frontend`
+- `pnpm --filter @partner-up-dev/fake-caocao-server test`
+- `pnpm --filter @partner-up-dev/fake-caocao-server typecheck`
+- `pnpm vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+- broader scenario or static gates only when the blast radius justifies it
+
+## Current Blockers / Notes
+
+- live dev DB migration was previously blocked in this workspace by
+  `CONNECT_TIMEOUT ws-win.hadream.localhost:5436`
+- manual browser validation should wait until a concrete UI slice is approved
+  and local services are reachable
+
+## Next Step
+
+Use this packet as the verification checklist when a subtask moves from
+discussion to implementation.

From c7381b5a2505ff95bef61f85ff09bb8a24a02a43 Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Sat, 20 Jun 2026 15:19:06 +0800
Subject: [PATCH 25/94] fix(dev): align WSL dev server ensure

- add foreground ensure scoping for frontend and fake providers
- document WSL storage/watch and local OSS paths
- add fake provider health readiness coverage
---
 .gitignore                                    |   1 +
 apps/backend/.env.example                     |   4 +-
 apps/frontend/vite.config.ts                  |  29 +++
 docs/20-product-tdd/cross-unit-contracts.md   |   2 +
 docs/40-deployment/environments.md            |  31 +++
 packages/fake-caocao-server/src/routes.ts     |  56 ++--
 .../fake-caocao-server/src/server.test.ts     |  24 +-
 packages/fake-wechatpay-server/src/routes.ts  |  31 +--
 .../fake-wechatpay-server/src/server.test.ts  |  21 ++
 scripts/ensure-dev-servers.mjs                | 240 ++++++++++++++++--
 scripts/portless.mjs                          |  25 ++
 tasks/diagnose-portless-api-502/README.md     |  67 +++++
 .../diagnose-wsl-vite-watch/00-task-packet.md |  54 ++++
 .../00-task-packet.md                         |  72 ++++++
 .../00-task-packet.md                         |  39 +++
 15 files changed, 609 insertions(+), 87 deletions(-)
 create mode 100644 packages/fake-wechatpay-server/src/server.test.ts
 create mode 100644 tasks/diagnose-portless-api-502/README.md
 create mode 100644 tasks/diagnose-wsl-vite-watch/00-task-packet.md
 create mode 100644 tasks/local-dev-workspace-alignment/00-task-packet.md
 create mode 100644 tasks/migrate-wsl-home-worktree/00-task-packet.md

diff --git a/.gitignore b/.gitignore
index e914d38a6..54faa4209 100644
--- a/.gitignore
+++ b/.gitignore
@@ -115,3 +115,4 @@ __pycache__/
 # Special case
 tasks/frontend-screenshot-capture/**/*
 apps/backend/images/**/*
+apps/backend/.dev-server/
diff --git a/apps/backend/.env.example b/apps/backend/.env.example
index 6547c535d..d3d6e2343 100644
--- a/apps/backend/.env.example
+++ b/apps/backend/.env.example
@@ -34,8 +34,10 @@ WECOM_CORP_ID=
 WECOM_APP_AGENT_ID=
 WECOM_APP_SECRET=
 
-# Purpose-scoped image storage directory (optional; defaults to /mnt/oss/images on Linux, ./images on Windows)
+# Purpose-scoped image storage directory. Production FC mounts OSS at /mnt/oss.
+# Local dev servers should prefer repo-local .dev-server paths on WSL/Linux.
 IMAGES_DIR=
+AVATARS_DIR=
 
 # Mock
 WECHAT_ABILITY_MOCKING_ENABLED=
diff --git a/apps/frontend/vite.config.ts b/apps/frontend/vite.config.ts
index 47b6b713b..ce8f88802 100644
--- a/apps/frontend/vite.config.ts
+++ b/apps/frontend/vite.config.ts
@@ -1,4 +1,5 @@
 import { execSync } from "node:child_process";
+import { readFileSync } from "node:fs";
 import vue from "@vitejs/plugin-vue";
 import { parse as parseJsonc } from "jsonc-parser";
 import { resolve } from "path";
@@ -59,6 +60,25 @@ const normalizeEnvValue = (value: string | undefined): string | null => {
   return trimmed.length > 0 ? trimmed : null;
 };
 
+const readProcVersion = (): string => {
+  try {
+    return readFileSync("/proc/version", "utf8");
+  } catch {
+    return "";
+  }
+};
+
+const isWslEnvironment = (): boolean =>
+  process.platform === "linux" &&
+  (Boolean(process.env.WSL_DISTRO_NAME) ||
+    Boolean(process.env.WSL_INTEROP) ||
+    readProcVersion().toLowerCase().includes("microsoft"));
+
+const isWindowsMountedPath = (path: string): boolean => /^\/mnt\/[a-z](?:\/|$)/i.test(path);
+
+const shouldUsePollingForDevWatch = (): boolean =>
+  isWslEnvironment() && isWindowsMountedPath(process.cwd());
+
 const parsePort = (value: string | undefined, fallback: number): number => {
   const port = Number.parseInt(value ?? "", 10);
   return Number.isFinite(port) ? port : fallback;
@@ -222,6 +242,7 @@ export default defineConfig(({ mode }) => {
     normalizeEnvValue(env.VITE_FRONTEND_COMMIT_HASH) ??
     readGitValue("git rev-parse HEAD") ??
     "unknown";
+  const usePollingForDevWatch = shouldUsePollingForDevWatch();
 
   return {
     plugins: [
@@ -285,6 +306,14 @@ export default defineConfig(({ mode }) => {
       ...(serverHost ? { host: serverHost } : {}),
       port: serverPort,
       strictPort: isPortless,
+      ...(usePollingForDevWatch
+        ? {
+            watch: {
+              usePolling: true,
+              interval: 300,
+            },
+          }
+        : {}),
       proxy: {
         "/api": {
           target: backendProxyTarget,
diff --git a/docs/20-product-tdd/cross-unit-contracts.md b/docs/20-product-tdd/cross-unit-contracts.md
index 2a1a4fefd..8ca67c44e 100644
--- a/docs/20-product-tdd/cross-unit-contracts.md
+++ b/docs/20-product-tdd/cross-unit-contracts.md
@@ -14,6 +14,7 @@ Contract implication:
 ## 1.1 Local Development Origin Contract
 
 - The agent-facing developer availability entry is `pnpm dev:ensure` from the repository root. It checks the stable portless routes and starts only missing frontend/backend dev servers.
+- Human-facing terminal and VS Code workflows can run `pnpm dev:ensure --foreground` to keep the same stable route contract while inheriting dev-server console output and taking over existing routes for the current terminal lifecycle. Foreground mode prints `DEV_ENSURE_FOREGROUND_READY` after HTTP readiness so VS Code background task problem matchers can release `preLaunchTask` while the dev-server task keeps running. Frontend launch preflight tasks must scope this to `--only frontend`; backend debug launch configurations own the backend process separately.
 - The underlying developer full-stack entry is `pnpm dev:portless` from the repository root.
 - Root portless entries are backed by Node wrapper scripts so the command names stay stable across macOS, Linux, and Windows.
 - `portless.json` maps `apps/frontend` to the public app name `partner-up` and `apps/backend` to the public app name `api.partner-up`.
@@ -21,6 +22,7 @@ Contract implication:
 - The frontend `/api` proxy targets the backend portless app by deriving the backend host from the active frontend `PORTLESS_URL`, for example `api.partner-up.localhost` in local-only mode and `api.partner-up.local` in LAN mode. This keeps browser API calls aligned with the typed backend HTTP contract while application code stays free of fixed numeric ports.
 - LAN device debugging uses portless LAN mode (`PORTLESS_LAN=1` or `pnpm dev:ensure --lan`), which forces `.local` routes. When portless cannot infer a reachable LAN address, callers should set `PORTLESS_LAN_IP` or pass `--ip <reachable-lan-ip>`; the project portless wrapper makes a best-effort default-route interface inference only for explicit LAN mode. When a privileged proxy is involved, the proxy and app registrations must share one `PORTLESS_STATE_DIR`; VS Code LAN launch entries should set it with an environment-neutral variable such as `${userHome}/.portless`.
 - Fake third-party integration servers use provider-scoped portless names under the app namespace: `caocao.partner-up` and `wechatpay.partner-up`. They follow the active portless proxy mode, so LAN debugging exposes them as `caocao.partner-up.local` and `wechatpay.partner-up.local`, while local-only mode exposes the same names under `.localhost`.
+- Fake third-party integration servers can be ensured independently through `pnpm dev:ensure --only caocao` and `pnpm dev:ensure --only wechatpay`. These entries must not start or take over frontend/backend routes.
 - Fixed-port frontend env values (`VITE_PORT`, `VITE_API_URL`, `VITE_BACKEND_HOST`, `VITE_BACKEND_PORT`, `VITE_BACKEND_PROXY_TARGET`) remain a compatibility contract for explicit fixed-port local work.
 - Root-owned system scenario tests own their own frontend and backend ports through the `system-scenario` Vitest project. That isolated test runtime is separate from the developer portless workflow.
 
diff --git a/docs/40-deployment/environments.md b/docs/40-deployment/environments.md
index c3640ba3f..2d6a0668b 100644
--- a/docs/40-deployment/environments.md
+++ b/docs/40-deployment/environments.md
@@ -5,6 +5,10 @@
 The default local development entry is portless-managed:
 
 - ensure frontend and backend are available: `pnpm dev:ensure`
+- foreground dev console: `pnpm dev:ensure --foreground`
+- foreground single dev server: `pnpm dev:ensure --only frontend --foreground`
+- fake Caocao only: `pnpm dev:ensure --only caocao`
+- fake WeChatPay only: `pnpm dev:ensure --only wechatpay`
 - full stack: `pnpm dev:portless`
 - frontend only: `pnpm dev:portless:frontend`
 - backend only: `pnpm dev:portless:backend`
@@ -50,6 +54,12 @@ Fixed local ports remain available for compatibility workflows through package
 env files and helper scripts. They are local fallback inputs, while portless is
 the default developer workflow.
 
+When the frontend Vite dev server runs inside WSL against a Windows-mounted
+repository path such as `/mnt/c/...` or `/mnt/f/...`, the frontend Vite config
+enables polling for file watching. This compensates for WSL file event delivery
+limits on Windows filesystems. Projects stored directly in the WSL filesystem
+such as `/home/<user>/...` keep Vite's normal watcher behavior.
+
 Fake integration servers use provider-scoped portless names under the app
 namespace:
 
@@ -59,6 +69,10 @@ namespace:
 They follow the active portless proxy mode. In LAN mode they are reachable as
 `caocao.partner-up.local` and `wechatpay.partner-up.local`; in local-only mode
 they use the same names under `.localhost`.
+Use `pnpm dev:ensure --only caocao` or `pnpm dev:ensure --only wechatpay` to
+start or reuse one fake provider without touching frontend/backend lifecycles.
+VS Code fake-provider tasks use the same `--only` foreground ensure mode and
+the `DEV_ENSURE_FOREGROUND_READY` readiness marker.
 
 Non-production WeChatPay provider endpoints allow portless local hostnames
 (`.localhost` and `.local`) in addition to raw loopback hosts and the official
@@ -68,11 +82,28 @@ The backend development script loads `apps/backend/.env` when the file exists,
 so portless and fixed-port local backend starts share the same local runtime
 inputs.
 
+For local backend file uploads on WSL/Linux, set `IMAGES_DIR` and `AVATARS_DIR`
+in `apps/backend/.env` to package-local paths under `apps/backend/.dev-server/`
+instead of relying on the production `/mnt/oss` mount. The production FC runtime
+continues to mount OSS at `/mnt/oss`.
+
 Agents should use `pnpm dev:ensure` before browser or manual validation that
 needs the local frontend/backend pair. The ensure command checks the stable
 portless routes and starts only the missing services, which avoids duplicate
 dev servers during repeated agent runs.
 
+Human-facing terminal or VS Code workflows that need live dev-server output
+should use `pnpm dev:ensure --foreground`. Foreground mode keeps the same stable
+route contract, but starts the configured dev servers with inherited console
+stdio and takes over existing routes so the current terminal owns the logs and
+lifecycle. After the routes pass HTTP readiness, foreground mode prints
+`DEV_ENSURE_FOREGROUND_READY`; VS Code background task problem matchers use that
+marker to let debug launches continue while the dev-server task keeps running.
+VS Code frontend launch tasks should scope foreground ensure to the frontend with
+`--only frontend`; backend debug launches own the backend dev server directly so
+compound frontend/backend debugging keeps separate task, process, and debugger
+lifecycles.
+
 System scenario tests are a separate local runtime. The `system-scenario` Vitest project
 allocates isolated frontend and backend HTTP ports for the test process,
 independent of the developer portless server.
diff --git a/packages/fake-caocao-server/src/routes.ts b/packages/fake-caocao-server/src/routes.ts
index 6be845641..766bbe5d3 100644
--- a/packages/fake-caocao-server/src/routes.ts
+++ b/packages/fake-caocao-server/src/routes.ts
@@ -2,8 +2,8 @@ import type { IncomingMessage, ServerResponse } from "node:http";
 import type { FakeCaocaoFixture } from "./fixtures";
 import {
   createFakeCaocaoSignature,
-  fakeCaocaoSignaturesMatch,
   type FakeCaocaoSignedParams,
+  fakeCaocaoSignaturesMatch,
 } from "./signature";
 import type {
   FakeCaocaoDriverSnapshot,
@@ -25,15 +25,16 @@ const defaultHeaders = {
   "Content-Type": "application/json; charset=utf-8",
 };
 
-const sendJson = (
-  res: ServerResponse,
-  status: number,
-  value: unknown,
-): void => {
+const sendJson = (res: ServerResponse, status: number, value: unknown): void => {
   res.writeHead(status, defaultHeaders);
   res.end(JSON.stringify(value));
 };
 
+const sendHealth = (req: IncomingMessage, res: ServerResponse): void => {
+  res.writeHead(200, defaultHeaders);
+  res.end(req.method === "HEAD" ? undefined : JSON.stringify({ status: "ok" }));
+};
+
 const readBodyText = (req: IncomingMessage): Promise<string> =>
   new Promise((resolve, reject) => {
     let body = "";
@@ -53,10 +54,7 @@ const formToRecord = (params: URLSearchParams): Record<string, string> => {
   return record;
 };
 
-const readParams = async (
-  req: IncomingMessage,
-  url: URL,
-): Promise<Record<string, string>> => {
+const readParams = async (req: IncomingMessage, url: URL): Promise<Record<string, string>> => {
   if (req.method === "GET") {
     return formToRecord(url.searchParams);
   }
@@ -69,9 +67,7 @@ const readParams = async (
     if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) {
       return {};
     }
-    return Object.fromEntries(
-      Object.entries(parsed).map(([key, value]) => [key, String(value)]),
-    );
+    return Object.fromEntries(Object.entries(parsed).map(([key, value]) => [key, String(value)]));
   }
   return formToRecord(new URLSearchParams(body));
 };
@@ -114,10 +110,7 @@ const verifySignedParams = (input: {
   }
 };
 
-const readFirstParam = (
-  params: Record<string, string>,
-  keys: string[],
-): string | null => {
+const readFirstParam = (params: Record<string, string>, keys: string[]): string | null => {
   for (const key of keys) {
     const value = params[key]?.trim();
     if (value) return value;
@@ -160,9 +153,7 @@ const phaseEvent = (phase: FakeCaocaoOrderState["phase"]): number => {
 
 const orderDetailPayload = (order: FakeCaocaoOrderState): unknown => {
   const driver =
-    order.phase === "ACCEPTED" ||
-    order.phase === "IN_TRIP" ||
-    order.phase === "FINISHED"
+    order.phase === "ACCEPTED" || order.phase === "IN_TRIP" || order.phase === "FINISHED"
       ? driverSnapshot()
       : null;
   return {
@@ -271,6 +262,11 @@ export async function handleFakeCaocaoRequest(
   const url = new URL(req.url ?? "/", `http://${host}`);
 
   try {
+    if (url.pathname === "/health" && (req.method === "GET" || req.method === "HEAD")) {
+      sendHealth(req, res);
+      return;
+    }
+
     if (url.pathname === "/__fake_caocao/reset" && req.method === "POST") {
       await readBodyText(req);
       input.state.reset();
@@ -278,10 +274,7 @@ export async function handleFakeCaocaoRequest(
       return;
     }
 
-    if (
-      url.pathname === "/__fake_caocao/create-failure/next" &&
-      req.method === "POST"
-    ) {
+    if (url.pathname === "/__fake_caocao/create-failure/next" && req.method === "POST") {
       await readBodyText(req);
       input.state.configureNextCreateFailure();
       sendJson(res, 200, { ok: true });
@@ -301,9 +294,7 @@ export async function handleFakeCaocaoRequest(
     });
 
     if (url.pathname === "/common/estimatePriceWithDetail") {
-      const carType =
-        readFirstParam(params, ["car_type", "carType", "vehicle_type"]) ??
-        "EXPRESS";
+      const carType = readFirstParam(params, ["car_type", "carType", "vehicle_type"]) ?? "EXPRESS";
       const estimate = input.state.findEstimate(carType);
       sendJson(res, 200, caocaoSuccess(estimatePayload(estimate)));
       return;
@@ -320,9 +311,7 @@ export async function handleFakeCaocaoRequest(
         sendJson(res, 200, caocaoFailure(40001, "Missing ext_order_id"));
         return;
       }
-      const carType =
-        readFirstParam(params, ["car_type", "carType", "vehicle_type"]) ??
-        "EXPRESS";
+      const carType = readFirstParam(params, ["car_type", "carType", "vehicle_type"]) ?? "EXPRESS";
       const callbackUrl = readFirstParam(params, [
         "callback_url",
         "callbackUrl",
@@ -354,9 +343,7 @@ export async function handleFakeCaocaoRequest(
 
     if (url.pathname === "/common/queryOrderDetailV2") {
       const providerOrderId = readFirstParam(params, ["order_id", "order_no"]);
-      const order = providerOrderId
-        ? input.state.advanceOrderDetail(providerOrderId)
-        : null;
+      const order = providerOrderId ? input.state.advanceOrderDetail(providerOrderId) : null;
       if (order?.callbackUrl) {
         postCallback({
           callbackUrl: order.callbackUrl,
@@ -415,8 +402,7 @@ export async function handleFakeCaocaoRequest(
       }
       input.state.confirmFee({
         allowanceAmountFen: Number(params.allowance_amount ?? 0) || null,
-        caocaoAllowanceAmountFen:
-          Number(params.cao_allowance_amount ?? 0) || null,
+        caocaoAllowanceAmountFen: Number(params.cao_allowance_amount ?? 0) || null,
         providerOrderId,
       });
       sendJson(res, 200, caocaoSuccess({ orderNo: providerOrderId }));
diff --git a/packages/fake-caocao-server/src/server.test.ts b/packages/fake-caocao-server/src/server.test.ts
index 091af715c..672fd2a59 100644
--- a/packages/fake-caocao-server/src/server.test.ts
+++ b/packages/fake-caocao-server/src/server.test.ts
@@ -1,9 +1,6 @@
 import { afterEach, describe, expect, test } from "vitest";
+import { type StartedFakeCaocaoServer, startFakeCaocaoServer } from "./server";
 import { createFakeCaocaoSignature } from "./signature";
-import {
-  startFakeCaocaoServer,
-  type StartedFakeCaocaoServer,
-} from "./server";
 
 const signedSearchParams = (input: {
   clientId: string;
@@ -31,6 +28,16 @@ describe("startFakeCaocaoServer", () => {
     server = null;
   });
 
+  test("serves health readiness", async () => {
+    server = await startFakeCaocaoServer();
+
+    const response = await fetch(`${server.origin}/health`, {
+      method: "HEAD",
+    });
+
+    expect(response.ok).toBe(true);
+  });
+
   test("serves signed estimate, create, and detail routes", async () => {
     server = await startFakeCaocaoServer();
 
@@ -103,12 +110,9 @@ describe("startFakeCaocaoServer", () => {
   test("supports admin reset and next-create failure controls", async () => {
     server = await startFakeCaocaoServer();
 
-    const failNextResponse = await fetch(
-      `${server.origin}/__fake_caocao/create-failure/next`,
-      {
-        method: "POST",
-      },
-    );
+    const failNextResponse = await fetch(`${server.origin}/__fake_caocao/create-failure/next`, {
+      method: "POST",
+    });
     expect(failNextResponse.ok).toBe(true);
 
     const createResponse = await fetch(`${server.origin}/common/orderCarV2`, {
diff --git a/packages/fake-wechatpay-server/src/routes.ts b/packages/fake-wechatpay-server/src/routes.ts
index f56dffbe4..00addd3d9 100644
--- a/packages/fake-wechatpay-server/src/routes.ts
+++ b/packages/fake-wechatpay-server/src/routes.ts
@@ -1,6 +1,6 @@
+import { randomUUID } from "node:crypto";
 import type { Context } from "hono";
 import { Hono } from "hono";
-import { randomUUID } from "node:crypto";
 import { z } from "zod";
 import {
   buildRequestSignatureMessage,
@@ -12,11 +12,11 @@ import {
 } from "./crypto";
 import type { FakeWeChatPayFixture } from "./fixtures";
 import {
+  type FakeRefundState,
+  type FakeTransactionState,
   FakeWeChatPayState,
   fakeRefundStateSchema,
   fakeTransactionStateSchema,
-  type FakeRefundState,
-  type FakeTransactionState,
 } from "./state";
 
 const jsapiPrepayRequestSchema = z.object({
@@ -106,9 +106,7 @@ const readVerifiedJson = async (
 ): Promise<unknown> => {
   const bodyText = await c.req.text();
   if (input.verifyRequests !== false) {
-    const authorization = parseAuthorizationHeader(
-      c.req.header("Authorization") ?? null,
-    );
+    const authorization = parseAuthorizationHeader(c.req.header("Authorization") ?? null);
     if (authorization.mchid !== input.fixture.mchId) {
       throw new Error("Unexpected mchid in Authorization header");
     }
@@ -165,8 +163,7 @@ const transactionResource = (transaction: FakeTransactionState): unknown => ({
   out_trade_no: transaction.outTradeNo,
   transaction_id: transaction.transactionId ?? undefined,
   trade_state: transaction.tradeState,
-  trade_state_desc:
-    transaction.tradeState === "SUCCESS" ? "支付成功" : "交易未支付",
+  trade_state_desc: transaction.tradeState === "SUCCESS" ? "支付成功" : "交易未支付",
   amount: transaction.amount,
   payer: transaction.payerOpenid ? { openid: transaction.payerOpenid } : undefined,
 });
@@ -227,9 +224,7 @@ const postSignedNotification = async (input: {
   });
 };
 
-export function createFakeWeChatPayApp(
-  input: FakeWeChatPayServerAppInput,
-): Hono {
+export function createFakeWeChatPayApp(input: FakeWeChatPayServerAppInput): Hono {
   const state = input.state ?? new FakeWeChatPayState();
   const app = new Hono();
 
@@ -260,15 +255,15 @@ export function createFakeWeChatPayApp(
     ),
   );
 
+  app.on(["GET", "HEAD"], "/health", () => plainJson({ status: "ok" }));
+
   app.get("/v3/certificates", async (c) => {
     await readVerifiedJson(c, input);
     return signedJson(input.fixture, certificatePayload(input.fixture));
   });
 
   app.post("/v3/pay/transactions/jsapi", async (c) => {
-    const parsed = jsapiPrepayRequestSchema.parse(
-      await readVerifiedJson(c, input),
-    );
+    const parsed = jsapiPrepayRequestSchema.parse(await readVerifiedJson(c, input));
     const transaction = state.createTransaction({
       amount: parsed.amount,
       appid: parsed.appid,
@@ -285,9 +280,7 @@ export function createFakeWeChatPayApp(
   });
 
   app.post("/v3/pay/transactions/h5", async (c) => {
-    const parsed = h5PrepayRequestSchema.parse(
-      await readVerifiedJson(c, input),
-    );
+    const parsed = h5PrepayRequestSchema.parse(await readVerifiedJson(c, input));
     const h5Url = `${new URL(c.req.url).origin}/__fake_wechatpay/h5/${encodeURIComponent(
       parsed.out_trade_no,
     )}`;
@@ -308,9 +301,7 @@ export function createFakeWeChatPayApp(
 
   app.get("/v3/pay/transactions/out-trade-no/:outTradeNo", async (c) => {
     await readVerifiedJson(c, input);
-    const transaction = state.findTransactionByOutTradeNo(
-      c.req.param("outTradeNo"),
-    );
+    const transaction = state.findTransactionByOutTradeNo(c.req.param("outTradeNo"));
     if (!transaction) {
       return signedJson(
         input.fixture,
diff --git a/packages/fake-wechatpay-server/src/server.test.ts b/packages/fake-wechatpay-server/src/server.test.ts
new file mode 100644
index 000000000..01139d72d
--- /dev/null
+++ b/packages/fake-wechatpay-server/src/server.test.ts
@@ -0,0 +1,21 @@
+import { afterEach, describe, expect, test } from "vitest";
+import { type StartedFakeWeChatPayServer, startFakeWeChatPayServer } from "./server";
+
+describe("startFakeWeChatPayServer", () => {
+  let server: StartedFakeWeChatPayServer | null = null;
+
+  afterEach(async () => {
+    await server?.close();
+    server = null;
+  });
+
+  test("serves health readiness", async () => {
+    server = await startFakeWeChatPayServer();
+
+    const response = await fetch(`${server.origin}/health`, {
+      method: "HEAD",
+    });
+
+    expect(response.ok).toBe(true);
+  });
+});
diff --git a/scripts/ensure-dev-servers.mjs b/scripts/ensure-dev-servers.mjs
index 677d0eeb4..acbf80d06 100644
--- a/scripts/ensure-dev-servers.mjs
+++ b/scripts/ensure-dev-servers.mjs
@@ -7,6 +7,8 @@ import { fileURLToPath } from "node:url";
 const isWindows = process.platform === "win32";
 const repoRoot = resolve(dirname(fileURLToPath(import.meta.url)), "..");
 
+const defaultRouteNames = new Set(["frontend", "backend"]);
+
 const routeDefinitions = [
   {
     name: "frontend",
@@ -38,6 +40,36 @@ const routeDefinitions = [
     ],
     readinessPath: "/health",
   },
+  {
+    name: "caocao",
+    portlessName: "caocao.partner-up",
+    portlessArgs: [
+      "--name",
+      "caocao.partner-up",
+      "--force",
+      "--",
+      "pnpm",
+      "--filter",
+      "@partner-up-dev/fake-caocao-server",
+      "dev",
+    ],
+    readinessPath: "/health",
+  },
+  {
+    name: "wechatpay",
+    portlessName: "wechatpay.partner-up",
+    portlessArgs: [
+      "--name",
+      "wechatpay.partner-up",
+      "--force",
+      "--",
+      "pnpm",
+      "--filter",
+      "@partner-up-dev/fake-wechatpay-server",
+      "dev",
+    ],
+    readinessPath: "/health",
+  },
 ];
 
 const parseOptionalStringArg = (name) => {
@@ -62,21 +94,45 @@ const normalizeEnvValue = (value) => {
   return trimmed.length > 0 ? trimmed : null;
 };
 
+const selectedRouteName = parseOptionalStringArg("only");
+
+const getSelectedRouteDefinitions = () => {
+  if (!selectedRouteName) {
+    return routeDefinitions.filter((route) => defaultRouteNames.has(route.name));
+  }
+
+  const selectedRoutes = routeDefinitions.filter((route) => route.name === selectedRouteName);
+
+  if (selectedRoutes.length === 0) {
+    throw new Error(
+      `Unknown dev server "${selectedRouteName}". Expected one of: ${routeDefinitions
+        .map((route) => route.name)
+        .join(", ")}`,
+    );
+  }
+
+  return selectedRoutes;
+};
+
+const selectedRouteDefinitions = getSelectedRouteDefinitions();
+
 const getRuntimeEnv = () => {
   const env = { ...process.env };
   const lanIp = parseOptionalStringArg("ip");
   const stateDir = parseOptionalStringArg("state-dir");
+  const shouldUseLan = process.argv.includes("--lan") || lanIp || isTruthyEnv(env.PORTLESS_LAN);
 
   if (stateDir) {
     env.PORTLESS_STATE_DIR = stateDir;
   }
 
-  if (process.argv.includes("--lan")) {
+  if (shouldUseLan) {
     env.PORTLESS_LAN = "1";
+  } else {
+    env.PORTLESS_LAN = "0";
   }
 
   if (lanIp) {
-    env.PORTLESS_LAN = "1";
     env.PORTLESS_LAN_IP = lanIp;
   }
 
@@ -104,10 +160,16 @@ const getPortlessTld = () => {
 };
 
 const portlessTld = getPortlessTld();
-const routes = routeDefinitions.map((route) => ({
+const routes = selectedRouteDefinitions.map((route) => ({
   ...route,
   url: `https://${route.portlessName}.${portlessTld}`,
 }));
+const routeGroupLabel = `${routes.map((route) => route.name).join(" and ")} dev server${
+  routes.length === 1 ? "" : "s"
+}`;
+const routeGroupSubject = `${routeGroupLabel[0].toUpperCase()}${routeGroupLabel.slice(1)}`;
+const routeGroupVerb = routes.length === 1 ? "is" : "are";
+const routeWord = routes.length === 1 ? "route" : "routes";
 
 const parsePositiveIntegerArg = (name, fallback) => {
   const prefixedArg = process.argv.find((arg) => arg.startsWith(`--${name}=`));
@@ -130,6 +192,8 @@ const parsePositiveIntegerArg = (name, fallback) => {
 
 const timeoutSeconds = parsePositiveIntegerArg("timeout-seconds", 90);
 const pollIntervalSeconds = parsePositiveIntegerArg("poll-interval-seconds", 2);
+const shouldRunForeground = process.argv.includes("--foreground");
+const foregroundReadyMarker = "DEV_ENSURE_FOREGROUND_READY";
 
 const assertCommandAvailable = (commandName) => {
   const command = isWindows ? "where" : "command";
@@ -248,7 +312,7 @@ const getTimestamp = () =>
     .replaceAll(":", "")
     .replace(/\.\d{3}Z$/, "");
 
-const startDevServer = (route) => {
+const startDetachedDevServer = (route) => {
   const logDir = join(repoRoot, ".codex-tmp", "dev-servers");
   mkdirSync(logDir, { recursive: true });
 
@@ -278,30 +342,100 @@ const startDevServer = (route) => {
   }
 };
 
-const sleep = (seconds) =>
-  new Promise((resolveSleep) => {
-    setTimeout(resolveSleep, seconds * 1000);
+const startForegroundDevServers = (routesToStart) => {
+  const children = new Set();
+  let exitCode = 0;
+  let isTerminating = false;
+  let hasStartedChildren = false;
+  let resolveExitCode;
+  const exitPromise = new Promise((resolve) => {
+    resolveExitCode = resolve;
   });
+  const handleSigint = () => terminateChildren("SIGINT");
+  const handleSigterm = () => terminateChildren("SIGTERM");
+
+  const cleanup = () => {
+    process.off("SIGINT", handleSigint);
+    process.off("SIGTERM", handleSigterm);
+  };
+
+  const resolveIfDone = () => {
+    if (hasStartedChildren && children.size === 0) {
+      cleanup();
+      resolveExitCode(exitCode);
+    }
+  };
 
-const main = async () => {
-  assertCommandAvailable("portless");
-  assertCommandAvailable("pnpm");
-
-  const initialRouteList = getPortlessListText();
-  let unavailableRoutes = await getUnavailableRoutes(initialRouteList);
+  function terminateChildren(signal) {
+    isTerminating = true;
 
-  if (unavailableRoutes.length === 0) {
-    console.log("Frontend and backend dev servers are already registered:");
-    for (const route of routes) {
-      console.log(`  ${route.url}`);
+    for (const child of children) {
+      if (child.exitCode === null && child.signalCode === null) {
+        child.kill(signal);
+      }
     }
-    return;
   }
 
-  for (const route of unavailableRoutes) {
-    startDevServer(route);
+  process.once("SIGINT", handleSigint);
+  process.once("SIGTERM", handleSigterm);
+
+  for (const route of routesToStart) {
+    console.log(`Starting ${route.name} dev server in foreground through portless: ${route.url}`);
+
+    const child = spawn(process.execPath, ["./scripts/portless.mjs", ...route.portlessArgs], {
+      cwd: repoRoot,
+      env: runtimeEnv,
+      stdio: "inherit",
+      windowsHide: true,
+    });
+
+    children.add(child);
+
+    child.on("error", (error) => {
+      console.error(`Failed to start ${route.name} dev server: ${error.message}`);
+      children.delete(child);
+      exitCode = 1;
+      terminateChildren("SIGTERM");
+      resolveIfDone();
+    });
+
+    child.on("exit", (code, signal) => {
+      children.delete(child);
+
+      if (!isTerminating) {
+        if (signal) {
+          console.error(`${route.name} dev server exited after receiving signal ${signal}.`);
+          exitCode = 1;
+        } else {
+          exitCode = code ?? 1;
+
+          if (exitCode === 0) {
+            console.log(`${route.name} dev server exited.`);
+          } else {
+            console.error(`${route.name} dev server exited with code ${exitCode}.`);
+          }
+        }
+
+        terminateChildren("SIGTERM");
+      }
+
+      resolveIfDone();
+    });
   }
 
+  hasStartedChildren = true;
+  resolveIfDone();
+
+  return { exitPromise, stop: terminateChildren };
+};
+
+const sleep = (seconds) =>
+  new Promise((resolveSleep) => {
+    setTimeout(resolveSleep, seconds * 1000);
+  });
+
+const waitForRoutesReady = async (readyMessage) => {
+  let unavailableRoutes = routes;
   const deadline = Date.now() + timeoutSeconds * 1000;
 
   do {
@@ -311,7 +445,7 @@ const main = async () => {
     unavailableRoutes = await getUnavailableRoutes(currentRouteList);
 
     if (unavailableRoutes.length === 0) {
-      console.log("Frontend and backend dev servers are ready:");
+      console.log(readyMessage);
       for (const route of routes) {
         console.log(`  ${route.url}`);
       }
@@ -326,6 +460,70 @@ const main = async () => {
   );
 };
 
+const main = async () => {
+  assertCommandAvailable("portless");
+  assertCommandAvailable("pnpm");
+
+  const initialRouteList = getPortlessListText();
+  let unavailableRoutes = await getUnavailableRoutes(initialRouteList);
+
+  if (shouldRunForeground) {
+    if (unavailableRoutes.length === 0) {
+      console.log(`${routeGroupSubject} ${routeGroupVerb} already ready.`);
+      console.log(
+        `Foreground mode will take over the ${routeWord} so this terminal owns the logs.`,
+      );
+    } else {
+      console.log(`Foreground mode will start or take over the ${routeGroupLabel} ${routeWord}.`);
+    }
+
+    for (const route of routes) {
+      console.log(`  ${route.url}`);
+    }
+
+    const foreground = startForegroundDevServers(routes);
+    let firstForegroundResult;
+
+    try {
+      firstForegroundResult = await Promise.race([
+        waitForRoutesReady(`${routeGroupSubject} ${routeGroupVerb} ready:`).then(() => ({
+          type: "ready",
+        })),
+        foreground.exitPromise.then((exitCode) => ({
+          exitCode,
+          type: "exit",
+        })),
+      ]);
+    } catch (error) {
+      foreground.stop("SIGTERM");
+      throw error;
+    }
+
+    if (firstForegroundResult.type === "exit") {
+      process.exit(firstForegroundResult.exitCode);
+    }
+
+    console.log(foregroundReadyMarker);
+
+    const exitCode = await foreground.exitPromise;
+    process.exit(exitCode);
+  }
+
+  if (unavailableRoutes.length === 0) {
+    console.log(`${routeGroupSubject} ${routeGroupVerb} already registered:`);
+    for (const route of routes) {
+      console.log(`  ${route.url}`);
+    }
+    return;
+  }
+
+  for (const route of unavailableRoutes) {
+    startDetachedDevServer(route);
+  }
+
+  await waitForRoutesReady(`${routeGroupSubject} ${routeGroupVerb} ready:`);
+};
+
 main().catch((error) => {
   console.error(error.message);
   process.exit(1);
diff --git a/scripts/portless.mjs b/scripts/portless.mjs
index 905337610..e7626372a 100644
--- a/scripts/portless.mjs
+++ b/scripts/portless.mjs
@@ -93,9 +93,19 @@ const shouldDetectLanIp = (env) =>
   !hasGlobalFlagValue("--ip") &&
   (env.PORTLESS_LAN === "1" || env.PORTLESS_LAN === "true" || hasGlobalFlag("--lan"));
 
+const shouldUseLanMode = (env) =>
+  env.PORTLESS_LAN === "1" ||
+  env.PORTLESS_LAN === "true" ||
+  hasGlobalFlag("--lan") ||
+  hasGlobalFlagValue("--ip");
+
 const getPortlessEnv = () => {
   const env = { ...process.env };
 
+  if (!shouldUseLanMode(env)) {
+    env.PORTLESS_LAN = "0";
+  }
+
   if (shouldDetectLanIp(env)) {
     const lanIp = detectLanIpv4Address();
 
@@ -124,6 +134,18 @@ const child = spawn("portless", process.argv.slice(2), {
   stdio: "inherit",
 });
 
+const forwardSignal = (signal) => {
+  if (child.exitCode === null && child.signalCode === null) {
+    child.kill(signal);
+  }
+};
+
+const forwardSigint = () => forwardSignal("SIGINT");
+const forwardSigterm = () => forwardSignal("SIGTERM");
+
+process.once("SIGINT", forwardSigint);
+process.once("SIGTERM", forwardSigterm);
+
 child.on("error", (error) => {
   if (error.code === "ENOENT") {
     console.error(
@@ -137,6 +159,9 @@ child.on("error", (error) => {
 });
 
 child.on("exit", (code, signal) => {
+  process.off("SIGINT", forwardSigint);
+  process.off("SIGTERM", forwardSigterm);
+
   if (signal) {
     console.error(`portless exited after receiving signal ${signal}`);
     process.exit(1);
diff --git a/tasks/diagnose-portless-api-502/README.md b/tasks/diagnose-portless-api-502/README.md
new file mode 100644
index 000000000..0dc013687
--- /dev/null
+++ b/tasks/diagnose-portless-api-502/README.md
@@ -0,0 +1,67 @@
+# Diagnose portless `/api` 502
+
+## Objective & Hypothesis
+
+- Intent class: Reality.
+- Mode: Diagnose.
+- Objective: explain why `https://partner-up.localhost/api/` returns 502 while the backend dev server appears healthy and Vite has a `/api` proxy configured.
+- Working hypothesis: the failure is in the frontend-to-portless proxy path, not necessarily in the backend app process itself.
+
+## Guardrails Touched
+
+- Root `AGENTS.md`: use `pnpm dev:ensure` for local frontend/backend validation.
+- Frontend runtime config: `apps/frontend/vite.config.ts`.
+- Backend runtime entry/env: `apps/backend/src/index.ts`, `apps/backend/src/lib/env.ts`.
+- Portless orchestration: `scripts/ensure-dev-servers.mjs`, `scripts/portless.mjs`, `portless.json`.
+
+## Verification
+
+- Run `pnpm dev:ensure --timeout-seconds=120`.
+- Compare HTTP results for:
+  - `https://api.partner-up.localhost/health`
+  - `https://partner-up.localhost/`
+  - `https://partner-up.localhost/api/`
+  - local backend port from backend logs/env.
+
+## Current Understanding
+
+- In portless mode, Vite computes `backendProxyTarget` as `https://127.0.0.1`.
+- Vite also sends `Host: api.partner-up.localhost` for `/api` proxy requests.
+- Backend `.env` has `PORT=4002`; portless may override `PORT` when managing the backend app.
+- Current reproduction after `pnpm dev:ensure`:
+  - `https://api.partner-up.localhost/health` returns 200.
+  - `http://127.0.0.1:4331/health` returns 200.
+  - `https://partner-up.localhost/` returns 200.
+  - `https://partner-up.localhost/api/` returns 404, not 502.
+  - `https://partner-up.localhost/api/meta/build` returns 200 and matches the direct backend route.
+- Backend logs confirm `GET /api/` reaches backend and returns 404. `/api/` is not a mounted backend route.
+- There are old same-name portless wrapper processes from earlier runs. Current active routes point to the fresh `4006` frontend and `4331` backend targets.
+- Recheck for the concrete reported endpoint:
+  - `https://partner-up.localhost/api/config/public/home_page_wechat_qr_code` returns 200.
+  - `https://api.partner-up.localhost/api/config/public/home_page_wechat_qr_code` returns 200.
+  - `http://127.0.0.1:4331/api/config/public/home_page_wechat_qr_code` returns 200.
+  - Backend log shows this request entering Hono and returning 200 in 2-8ms.
+- `~/.portless/proxy.log` contains the 502-class evidence:
+  - `Proxy error for partner-up.localhost: connect ECONNREFUSED 127.0.0.1:4006`
+  - `Proxy error for api.partner-up.localhost: connect ECONNREFUSED 127.0.0.1:4331`
+- Active `.localhost` routes are stored in `/home/yyh/.portless/routes.json`.
+- Older LAN `.local` routes still exist in `/var/lib/portless-mvp-ha/routes.json` and old wrapper processes are still alive, but they are for `partner-up.local` / `api.partner-up.local`, not the active `.localhost` hostnames.
+
+## Next Step
+
+- Likely explanation to report: the 502 HTML is generated by portless when its route registry points at a local target port that is not accepting connections. In this app, the frontend API path has two portless-dependent hops, so `api.partner-up.localhost` being ready does not by itself prove `partner-up.localhost -> Vite -> api.partner-up.localhost -> backend` is ready.
+
+## Cleanup
+
+- `portless prune` reported no orphaned routes because the stale LAN `.local` route pids were still alive.
+- Removed the stale LAN route process trees for:
+  - `partner-up.local:1355 -> localhost:4299`
+  - `api.partner-up.local:1355 -> localhost:4458`
+- Verified after cleanup:
+  - `/var/lib/portless-mvp-ha` has no active routes.
+  - Ports `4299` and `4458` are no longer listening.
+  - Current `.localhost` routes remain active:
+    - `partner-up.localhost -> localhost:4006`
+    - `api.partner-up.localhost -> localhost:4331`
+  - `https://partner-up.localhost/api/config/public/home_page_wechat_qr_code` returns 200.
+  - `https://api.partner-up.localhost/api/config/public/home_page_wechat_qr_code` returns 200.
diff --git a/tasks/diagnose-wsl-vite-watch/00-task-packet.md b/tasks/diagnose-wsl-vite-watch/00-task-packet.md
new file mode 100644
index 000000000..0fac02cdc
--- /dev/null
+++ b/tasks/diagnose-wsl-vite-watch/00-task-packet.md
@@ -0,0 +1,54 @@
+# Diagnose WSL Vite Watch
+
+## Objective & Hypothesis
+
+Observed reality: frontend DevServer does not reflect code changes in the browser after refresh; restarting the DevServer applies the changes.
+
+Initial classification: `Reality`.
+
+Active mode: `Diagnose`.
+
+Leading hypothesis: Vite is running inside WSL against a repository stored on a Windows-mounted filesystem (`/mnt/f/...`), so native filesystem change events are not reliably delivered to Vite's watcher.
+
+## Guardrails Touched
+
+- Runtime/dev-environment behavior only.
+- Frontend Vite dev server configuration may be touched if evidence supports a bounded fix.
+- Existing dirty business changes under frontend/backend source are unrelated and must not be reverted.
+
+## Current Understanding
+
+- Repository path is `/mnt/f/CODING/Project/Anana/mvp-HA`, which is a Windows filesystem mount inside WSL.
+- `apps/frontend/package.json` runs frontend development through `vite`.
+- `apps/frontend/vite.config.ts` currently configures host, port, strict port, and API proxy under `server`, but does not configure `server.watch`.
+- `scripts/portless.mjs` and `scripts/ensure-dev-servers.mjs` manage local routes/process launch, not Vite file watcher behavior.
+- Vite official docs identify WSL2 file-change detection as a known condition and point to `server.watch.usePolling`.
+- Microsoft WSL docs recommend storing Linux-tool projects in the WSL filesystem for fastest performance, and identify `/mnt/...` paths as mounted Windows drives.
+
+## Confirmed Constraints
+
+- Use `pnpm dev:ensure` / portless entrypoints for browser validation when local services are needed.
+- Avoid touching unrelated dirty files.
+- No durable modification without evidence.
+
+## Verification
+
+Evidence to collect or confirm:
+
+- Official Vite documentation for WSL2 file watching and `server.watch.usePolling`: confirmed.
+- Local Vite config absence of watcher polling before the fix: confirmed.
+- Fix applied: `apps/frontend/vite.config.ts` enables `server.watch.usePolling` only when Vite runs inside WSL on a Windows-mounted `/mnt/<drive>/...` path.
+- Durable runtime note added to `docs/40-deployment/environments.md`.
+- Environment assertion under the current workspace:
+  - `platform`: `linux`
+  - `cwd`: `/mnt/f/CODING/Project/Anana/mvp-HA`
+  - `/proc/version` includes `microsoft`
+  - `shouldUsePolling`: `true`
+- `pnpm check:type:frontend`: passed.
+- `pnpm --filter @partner-up-dev/frontend exec vite build --outDir ../../.codex-tmp/frontend-vite-build --emptyOutDir true`: passed.
+- `pnpm exec biome format apps/frontend/vite.config.ts docs/40-deployment/environments.md tasks/diagnose-wsl-vite-watch/00-task-packet.md`: passed for the checked TS file; Markdown files were not included by Biome in this invocation.
+- Attempts to inspect resolved Vite config through `resolveConfig`, `loadConfigFromFile`, and `vite --debug config` did not produce a clean bounded output in this environment, so verification used the isolated environment assertion plus type/build checks.
+
+## Next Step
+
+Restart the frontend dev server once so the changed Vite config is loaded; subsequent edits under the current WSL `/mnt/f/...` workspace should be detected without server restarts.
diff --git a/tasks/local-dev-workspace-alignment/00-task-packet.md b/tasks/local-dev-workspace-alignment/00-task-packet.md
new file mode 100644
index 000000000..c6111623e
--- /dev/null
+++ b/tasks/local-dev-workspace-alignment/00-task-packet.md
@@ -0,0 +1,72 @@
+# Local Dev Workspace Alignment
+
+## Objective & Hypothesis
+
+Align human VSCode tasks and agent dev-server workflows so they use idempotent `dev:ensure` entries, migrate the design-system workspace into WSL-native storage, and make backend local file storage work without a production `/mnt/oss` mount.
+
+## Guardrails Touched
+
+- Preserve the `/mnt/f/...` source workspaces.
+- Prefer `/home/yyh/development/Anana/*` as active WSL-native workspaces.
+- Keep VSCode and agent startup paths converged on ensure-style scripts.
+- Do not expose or rewrite local secrets while editing `.env` files.
+- Keep production FC `/mnt/oss` mount behavior unchanged.
+
+## Current Understanding
+
+- `fake-caocao-server` from the old `/mnt/f/.../mvp-HA` workspace was running and has been stopped.
+- MVP VSCode frontend dev-server tasks need foreground console ownership and can still be used as `preLaunchTask` when configured as background tasks with a readiness problem matcher.
+- MVP VSCode backend launch configs are not prelaunch tasks; they are independent debug launch targets that own the backend dev-server process and debugger lifecycle.
+- MVP backend launch configs currently start `dev:portless:backend` directly.
+- MVP `dev:ensure` timed out earlier when a LAN-mode portless proxy was active and the command expected `.localhost`; explicit `--lan --ip ...` worked.
+- Design repo uses root `dev:ensure` scripts for `design-web.partner-up`; its VSCode Histoire task should keep console output in the terminal.
+- Backend image/avatar defaults use `/mnt/oss/...` on non-Windows unless `IMAGES_DIR` / `AVATARS_DIR` are set.
+- `dev:ensure` default mode is still the agent/headless readiness helper.
+- `dev:ensure --foreground` is the human/VSCode console mode. It takes over configured portless routes so the current terminal owns stdout/stderr and lifecycle, then prints `DEV_ENSURE_FOREGROUND_READY` after HTTP readiness for VS Code background task problem matchers.
+- `dev:ensure --only frontend --foreground` is the VSCode frontend prelaunch shape; it must not start or take over the backend route.
+- `dev:ensure --only caocao` and `dev:ensure --only wechatpay` should ensure fake provider routes independently, without touching frontend/backend lifecycles.
+
+## Verification
+
+- Old `/mnt/f/...` `fake-caocao-server` process: stopped.
+- MVP `scripts/portless.mjs` and `scripts/ensure-dev-servers.mjs` now explicitly set non-LAN launches to `PORTLESS_LAN=0` and LAN launches to `PORTLESS_LAN=1`.
+- MVP local VSCode frontend dev-server tasks now call root `pnpm run dev:ensure -- --only frontend --foreground`; LAN task calls `pnpm run dev:ensure -- --lan --ip 172.29.144.156 --only frontend --foreground`.
+- MVP local VSCode frontend launch configs use those foreground background tasks as `preLaunchTask`, with problem matchers that end on `DEV_ENSURE_FOREGROUND_READY`.
+- MVP `pnpm dev:ensure --foreground` foreground mode added.
+- `pnpm dev:ensure --lan --ip 172.29.144.156 --foreground`: kept frontend/backend logs attached, printed `DEV_ENSURE_FOREGROUND_READY`, and served:
+  - `https://partner-up.local/`: HTTP 200
+  - `https://api.partner-up.local/health`: HTTP 200
+- Foreground Ctrl+C smoke: stopped frontend/backend app routes without leftovers.
+- Default headless `pnpm dev:ensure --lan --ip 172.29.144.156 --timeout-seconds=90 --poll-interval-seconds=2`: passed and exited after readiness.
+- Corrected VSCode launch/task relationship:
+  - `Backend` / `Backend(lan,wsl)` launch configs own backend dev-server startup directly.
+  - `Frontend` / `Frontend(lan,mac)` prelaunch tasks start only frontend via `--only frontend`.
+  - Simulated frontend prelaunch while backend route `api.partner-up.local` was already active at PID `1056945`: frontend route started, printed `DEV_ENSURE_FOREGROUND_READY`, and backend PID stayed unchanged.
+- Corrected foreground VSCode task problem matchers:
+  - `start-frontend-dev-server` and `start-frontend-dev-server:lan` now use a non-matching problem pattern (`a^`) so dev-server output does not create VSCode Problems.
+  - Background readiness still ends on `DEV_ENSURE_FOREGROUND_READY`, so launch can continue without `Errors exist after running preLaunchTask`.
+- `pnpm dev:ensure --lan --ip 172.29.144.156 --only backend --timeout-seconds=20 --poll-interval-seconds=2`: passed by reusing the active backend route.
+- Fake provider ensure work:
+  - Added `/health` readiness endpoints for fake Caocao and fake WeChatPay.
+  - Added fake provider route definitions to `scripts/ensure-dev-servers.mjs`.
+  - Updated VSCode `start-caocao-dev-server` / `start-wechatpay-dev-server` to use `dev:ensure --only ... --foreground` and non-problem-producing problem matchers.
+  - Added LAN variants for both fake provider tasks.
+- `pnpm dev:ensure --lan --ip 172.29.144.156 --only caocao --foreground`: printed `DEV_ENSURE_FOREGROUND_READY`; `curl -k -I https://caocao.partner-up.local/health` returned HTTP 200; validation route was stopped afterward.
+- `pnpm dev:ensure --lan --ip 172.29.144.156 --only wechatpay --foreground`: printed `DEV_ENSURE_FOREGROUND_READY`; `curl -k -I https://wechatpay.partner-up.local/health` returned HTTP 200; validation route was stopped afterward.
+- VSCode JSON and fake-provider problem matcher smoke checks passed; fake-provider task matchers do not turn normal dev-server output into VSCode Problems.
+- MVP backend local `.env` now sets:
+  - `IMAGES_DIR=.dev-server/mnt/oss/images`
+  - `AVATARS_DIR=.dev-server/mnt/oss/avatars`
+- MVP backend local storage dirs created under `apps/backend/.dev-server/mnt/oss/`.
+- `pnpm check:type:backend`: passed.
+- `pnpm check:type:frontend`: passed.
+- `pnpm dev:ensure --lan --ip 172.29.144.156`: passed.
+- `curl -k -I --max-time 5 https://partner-up.local/`: HTTP 200.
+- `curl -k -I --max-time 5 https://api.partner-up.local/health`: HTTP 200.
+- Design repo copied to `/home/yyh/development/Anana/design`, installed, foreground-mode updated, and verified. Details live in `/home/yyh/development/Anana/design/tasks/migrate-wsl-home-worktree/README.md`.
+- Fake-provider validation routes were stopped after checks; `portless list` still shows the pre-existing frontend/backend/design routes.
+- The root-owned LAN portless proxy remains running and still owns two old `avahi-publish-address` children for `partner-up.local` and `api.partner-up.local`. Non-interactive sudo is unavailable in this session, so stopping the root proxy requires a human terminal command if full cleanup is desired.
+
+## Current Step
+
+Summarize final state. Fake-provider validation routes are stopped; pre-existing frontend/backend/design routes are preserved.
diff --git a/tasks/migrate-wsl-home-worktree/00-task-packet.md b/tasks/migrate-wsl-home-worktree/00-task-packet.md
new file mode 100644
index 000000000..6018bff00
--- /dev/null
+++ b/tasks/migrate-wsl-home-worktree/00-task-packet.md
@@ -0,0 +1,39 @@
+# Migrate WSL Home Worktree
+
+## Objective & Hypothesis
+
+Move a usable copy of the current PartnerUp MVP-HA workspace from the Windows-mounted WSL path `/mnt/f/CODING/Project/Anana/mvp-HA` to the WSL-native path `/home/yyh/development/Anana/mvp-HA`.
+
+Hypothesis: keeping the active development worktree on the WSL filesystem removes the Vite/HMR file-event limitation seen on `/mnt/f`, while preserving the `/mnt/f` copy as requested.
+
+## Guardrails Touched
+
+- Source `/mnt/f/...` workspace must be preserved.
+- New `/home/...` workspace should preserve current source state, `.git`, and local env files.
+- Dependencies should be reinstalled in the new location rather than copied from the Windows-mounted workspace.
+- Dev server validation must use repository dev workflow (`pnpm dev:ensure` / portless).
+
+## Verification
+
+- Copy completed without overwriting an existing target.
+- `.git`, local env files, and current working tree state were preserved.
+- `node_modules`, `.codex-tmp`, `dist`, `build`, and browser/runtime caches were not copied.
+- `pnpm install --frozen-lockfile`: passed in `/home/yyh/development/Anana/mvp-HA`.
+- `pnpm check:type:frontend`: passed.
+- `pnpm check:type:backend`: passed.
+- Initial `pnpm dev:ensure` inherited/used an active LAN-mode portless proxy while waiting for default `.localhost` routes, so it timed out despite starting services.
+- `pnpm dev:ensure --lan --ip 172.29.144.156`: passed.
+- `curl -k -I --max-time 5 https://partner-up.local/`: HTTP 200.
+- `curl -k -I --max-time 5 https://api.partner-up.local/health`: HTTP 200.
+- New workspace watcher condition assertion:
+  - `cwd`: `/home/yyh/development/Anana/mvp-HA`
+  - `isWsl`: `true`
+  - `isWindowsMount`: `false`
+  - `shouldUsePolling`: `false`
+- Active portless routes:
+  - frontend: `https://partner-up.local` -> `localhost:4514`
+  - backend: `https://api.partner-up.local` -> `localhost:4155`
+
+## Current Step
+
+Migration validated. Use `/home/yyh/development/Anana/mvp-HA` as the WSL-native development workspace.

From 8a398326e4c57d9987a4cc500dca685cffac46af Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Sat, 20 Jun 2026 18:13:03 +0800
Subject: [PATCH 26/94] chore(frontend): update design-web to 0.4.5

- upgrade @partner-up-dev/design-web and lockfile entry to 0.4.5

- record package-shipped agent skill validation evidence

- verify intent list/load/validate and frontend typecheck
---
 apps/frontend/package.json                    |  2 +-
 pnpm-lock.yaml                                | 16 ++---
 tasks/design-web-0.4.5-skill-update/README.md | 58 +++++++++++++++++++
 3 files changed, 65 insertions(+), 11 deletions(-)
 create mode 100644 tasks/design-web-0.4.5-skill-update/README.md

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 411d56390..c63c8020c 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -13,7 +13,7 @@
     "lint:tokens:strict": "node ./scripts/check-token-governance.mjs --strict"
   },
   "dependencies": {
-    "@partner-up-dev/design-web": "0.4.4",
+    "@partner-up-dev/design-web": "0.4.5",
     "@tanstack/vue-query": "^5.60.0",
     "@unhead/vue": "^2.1.2",
     "@vee-validate/zod": "^4.15.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 598cbf9f4..72831b23f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -134,8 +134,8 @@ importers:
   apps/frontend:
     dependencies:
       '@partner-up-dev/design-web':
-        specifier: 0.4.4
-        version: 0.4.4(sass@1.97.3)(unocss@66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0)))(vue@3.5.35(typescript@6.0.3))
+        specifier: 0.4.5
+        version: 0.4.5(sass@1.97.3)(unocss@66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0)))(vue@3.5.35(typescript@6.0.3))
       '@tanstack/vue-query':
         specifier: ^5.60.0
         version: 5.92.9(vue@3.5.35(typescript@6.0.3))
@@ -1522,15 +1522,12 @@ packages:
     resolution: {integrity: sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==}
     engines: {node: '>= 10.0.0'}
 
-  '@partner-up-dev/design-web@0.4.4':
-    resolution: {integrity: sha512-dxx1bgPwMu0IhctXExuEkbugfohr6TNmDRai+R/0mykS/3b7TTKr4/jk56D6HFOX3wMP0ctRc41jdOR68TwwqA==, tarball: https://npm.pkg.github.com/download/@partner-up-dev/design-web/0.4.4/2554be0fd040ef2444f3e9e3f9dd02a2e2f7a9fb}
+  '@partner-up-dev/design-web@0.4.5':
+    resolution: {integrity: sha512-9wrOo5WAtY9ipz3aJEZhqDb4eCptrXsqI8zBzUcMhJzV1gzKm1Rvb+/xxa2RfKTjQaW+rPhVWlioxBvSWAGr5A==, tarball: https://npm.pkg.github.com/download/@partner-up-dev/design-web/0.4.5/3437e056abf405083c51d45db997d186d8715d25}
     peerDependencies:
       sass: ^1.94.2
       unocss: ^66.6.8
       vue: ^3.5.34
-    peerDependenciesMeta:
-      unocss:
-        optional: true
 
   '@polka/url@1.0.0-next.29':
     resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
@@ -3963,12 +3960,11 @@ snapshots:
       '@parcel/watcher-win32-x64': 2.5.6
     optional: true
 
-  '@partner-up-dev/design-web@0.4.4(sass@1.97.3)(unocss@66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0)))(vue@3.5.35(typescript@6.0.3))':
+  '@partner-up-dev/design-web@0.4.5(sass@1.97.3)(unocss@66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0)))(vue@3.5.35(typescript@6.0.3))':
     dependencies:
       sass: 1.97.3
-      vue: 3.5.35(typescript@6.0.3)
-    optionalDependencies:
       unocss: 66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0))
+      vue: 3.5.35(typescript@6.0.3)
 
   '@polka/url@1.0.0-next.29': {}
 
diff --git a/tasks/design-web-0.4.5-skill-update/README.md b/tasks/design-web-0.4.5-skill-update/README.md
new file mode 100644
index 000000000..17ecae020
--- /dev/null
+++ b/tasks/design-web-0.4.5-skill-update/README.md
@@ -0,0 +1,58 @@
+# design-web 0.4.5 Skill Update
+
+## Objective & Hypothesis
+
+Upgrade the frontend `@partner-up-dev/design-web` dependency from `0.4.4` to
+`0.4.5`. The package-shipped `skills/design-web` directory is the agent skill
+source of truth, so installing the new package version updates the associated
+agent skill without hand-editing local skill copies.
+
+## Guardrails Touched
+
+- Constraint route: dependency and package-shipped skill boundary changes, with
+  no product behavior change intended.
+- Frontend unit: `apps/frontend/package.json` and the workspace lockfile.
+- Deployment guidance: `docs/40-deployment/rollout.md` requires TanStack Intent
+  `list`, `load`, and `validate` checks after changing the installed package
+  version.
+
+## Verification
+
+- `pnpm --filter @partner-up-dev/frontend add @partner-up-dev/design-web@0.4.5`
+  completed outside this agent session after initial network failures.
+- `pnpm dlx @tanstack/intent@latest list --json` passed and discovered
+  `@partner-up-dev/design-web#design-web` from local package version `0.4.5`.
+- `pnpm dlx @tanstack/intent@latest load @partner-up-dev/design-web#design-web`
+  passed.
+- `pnpm dlx @tanstack/intent@latest validate apps/frontend/node_modules/@partner-up-dev/design-web/skills/design-web`
+  passed: `Validated 1 skill files — all passed`.
+- `pnpm check:type:frontend` passed.
+
+## Current Understanding
+
+- Previous frontend dependency was `@partner-up-dev/design-web@0.4.4`.
+- Repository rollout truth says updating the package dependency is the skill
+  update mechanism.
+- Do not run `intent install` or add an `intent-skills` managed block unless
+  explicitly requested.
+- Current frontend dependency and lockfile are now
+  `@partner-up-dev/design-web@0.4.5`.
+- Installed package skill exists at
+  `apps/frontend/node_modules/@partner-up-dev/design-web/skills/design-web`.
+
+## Next Step
+
+Ready for review.
+
+## Attempt Log
+
+- `pnpm --filter @partner-up-dev/frontend add @partner-up-dev/design-web@0.4.5`
+  failed on npm registry metadata timeouts while resolving workspace packages.
+- Retried with longer `fetch-timeout` and retry settings; still timed out.
+- Retried with public registry set to `https://registry.npmmirror.com`; still
+  timed out.
+- Direct `npm view` / `pnpm view` against GitHub Packages for
+  `@partner-up-dev/design-web@0.4.5` timed out.
+- `curl -I` to GitHub, GitHub Packages, npmjs, and explicit resolved public IPs
+  timed out at connection stage.
+- Local cache search found only `@partner-up-dev/design-web@0.4.4`.

From f7ac1aa33b171d95f1f57a64cd67315b508a2652 Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Sat, 20 Jun 2026 21:42:58 +0800
Subject: [PATCH 27/94] fix(ride-hailing): align ordering content layout

- rename RideHailing ordering UI around content assembly

- make ride ordering use no-padding shell and separate bottom controls

- use design-web ghost circle button for price detail
---
 .../ui/ordering/OrderingFooterActionBar.vue   |  40 ++--
 .../ui/ordering/OrderingPageShell.vue         |  19 +-
 ...nel.vue => RideHailingOrderingContent.vue} | 207 ++++++++----------
 .../src/pages/OrderingFromPlacementPage.vue   |  72 +++---
 tasks/ride-hailing-ui-fixes/control.md        |  94 ++++++++
 5 files changed, 248 insertions(+), 184 deletions(-)
 rename apps/frontend/src/domains/commerce/ui/ordering/{RideHailingOrderingPanel.vue => RideHailingOrderingContent.vue} (81%)
 create mode 100644 tasks/ride-hailing-ui-fixes/control.md

diff --git a/apps/frontend/src/domains/commerce/ui/ordering/OrderingFooterActionBar.vue b/apps/frontend/src/domains/commerce/ui/ordering/OrderingFooterActionBar.vue
index 04fd19283..dbe04a306 100644
--- a/apps/frontend/src/domains/commerce/ui/ordering/OrderingFooterActionBar.vue
+++ b/apps/frontend/src/domains/commerce/ui/ordering/OrderingFooterActionBar.vue
@@ -2,19 +2,24 @@
   <div class="ordering-footer-action-bar" data-testid="ordering.bottom-action">
     <div class="ordering-footer-action-bar__price-summary">
       <strong :data-testid="priceTestid">{{ amountLabel }}</strong>
-      <button
-        type="button"
+      <PuButton
         class="ordering-footer-action-bar__price-detail-trigger"
+        shape="circle"
+        tone="neutral"
+        variant="ghost"
+        size="sm"
         :disabled="!priceDetailEnabled"
         :data-testid="priceDetailTestid"
         :aria-label="t('ordering.priceDetailAria')"
         @click="$emit('open-price-detail')"
       >
-        <span
-          class="ordering-footer-action-bar__chevron i-mdi-chevron-up"
-          aria-hidden="true"
-        ></span>
-      </button>
+        <template #leading>
+          <span
+            class="ordering-footer-action-bar__chevron i-mdi-chevron-up"
+            aria-hidden="true"
+          ></span>
+        </template>
+      </PuButton>
     </div>
 
     <PuButton
@@ -31,8 +36,8 @@
 </template>
 
 <script setup lang="ts">
-import { useI18n } from "vue-i18n";
 import { PuButton } from "@partner-up-dev/design-web";
+import { useI18n } from "vue-i18n";
 
 const { t } = useI18n();
 
@@ -92,27 +97,12 @@ defineEmits<{
 }
 
 .ordering-footer-action-bar__price-detail-trigger {
-  display: inline-grid;
   flex: 0 0 auto;
   width: 1.875rem;
   height: 1.875rem;
-  place-items: center;
-  border: 1px solid var(--sys-color-outline);
-  border-radius: 999px;
+  min-width: 1.875rem;
+  min-height: 1.875rem;
   padding: 0;
-  background: var(--sys-color-surface);
-  color: var(--sys-color-on-surface);
-  cursor: pointer;
-
-  &:disabled {
-    opacity: var(--sys-opacity-disabled);
-    cursor: default;
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--sys-color-primary);
-    outline-offset: 2px;
-  }
 }
 
 .ordering-footer-action-bar__submit-action {
diff --git a/apps/frontend/src/domains/commerce/ui/ordering/OrderingPageShell.vue b/apps/frontend/src/domains/commerce/ui/ordering/OrderingPageShell.vue
index 00010b785..dd07b2096 100644
--- a/apps/frontend/src/domains/commerce/ui/ordering/OrderingPageShell.vue
+++ b/apps/frontend/src/domains/commerce/ui/ordering/OrderingPageShell.vue
@@ -1,5 +1,10 @@
 <template>
-  <PuPageScaffold viewport="screen" class="ordering-page-shell" :data-testid="dataTestid">
+  <PuPageScaffold
+    viewport="screen"
+    class="ordering-page-shell"
+    :class="{ 'ordering-page-shell--no-padding': noPadding }"
+    :data-testid="dataTestid"
+  >
     <template #header>
       <PuPageHeader
         :title="title"
@@ -28,8 +33,8 @@
 </template>
 
 <script setup lang="ts">
-import type { RouteLocationRaw } from "vue-router";
 import { PuPageHeader, PuPageScaffold } from "@partner-up-dev/design-web";
+import type { RouteLocationRaw } from "vue-router";
 import { useFallbackBack } from "@/shared/routing/useFallbackBack";
 
 const props = defineProps<{
@@ -37,6 +42,7 @@ const props = defineProps<{
   subtitle?: string;
   backFallbackTo: RouteLocationRaw;
   dataTestid?: string;
+  noPadding?: boolean;
 }>();
 
 const { handleBack } = useFallbackBack(() => props.backFallbackTo);
@@ -50,7 +56,14 @@ const { handleBack } = useFallbackBack(() => props.backFallbackTo);
   --pu-page-padding-bottom: 0;
 }
 
-.ordering-page-shell :deep(.full-screen-page-scaffold__footer) {
+.ordering-page-shell--no-padding {
+  --pu-page-padding-top: 0;
+  --pu-page-padding-right: 0;
+  --pu-page-padding-bottom: 0;
+  --pu-page-padding-left: 0;
+}
+
+.ordering-page-shell :deep(.pu-page-scaffold__footer) {
   width: 100vw;
   margin-right: calc(50% - 50vw);
   margin-left: calc(50% - 50vw);
diff --git a/apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingPanel.vue b/apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue
similarity index 81%
rename from apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingPanel.vue
rename to apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue
index fc6016b16..b42db5e0a 100644
--- a/apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingPanel.vue
+++ b/apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue
@@ -1,8 +1,8 @@
 <template>
   <template v-if="rideOffer">
-    <div class="ride-hailing-ordering-panel">
+    <div class="ride-hailing-ordering-content">
       <RouteMap
-        class="ride-hailing-ordering-panel__route-map"
+        class="ride-hailing-ordering-content__route-map"
         data-testid="ordering.ride-hailing.route-map"
         :route="routeForMap"
         :fit-padding="routeMapFitPadding"
@@ -14,12 +14,12 @@
       />
 
       <div
-        class="ride-hailing-ordering-panel__sheet"
+        class="ride-hailing-ordering-content__sheet"
         data-testid="ordering.ride-hailing.bottom-sheet"
       >
-        <div class="ride-hailing-ordering-panel__handle" aria-hidden="true"></div>
+        <div class="ride-hailing-ordering-content__handle" aria-hidden="true"></div>
 
-        <div class="ride-hailing-ordering-panel__vehicles">
+        <div class="ride-hailing-ordering-content__vehicles">
           <RideHailingSkuCard
             v-for="option in visibleRideQuoteOptions"
             :key="option.skuId"
@@ -31,34 +31,34 @@
             @select="selectedRideSkuId = option.skuId"
           />
         </div>
+      </div>
 
-        <div
-          class="ride-hailing-ordering-panel__controls"
-          data-testid="ordering.ride-hailing.drawer-control-row"
+      <div
+        class="ride-hailing-ordering-content__controls"
+        data-testid="ordering.ride-hailing.drawer-control-row"
+      >
+        <button
+          type="button"
+          class="ride-hailing-ordering-content__control"
+          data-testid="ordering.ride-hailing.riders.open"
+          @click="ridersDrawerOpen = true"
         >
-          <button
-            type="button"
-            class="ride-hailing-ordering-panel__control"
-            data-testid="ordering.ride-hailing.riders.open"
-            @click="ridersDrawerOpen = true"
-          >
-            <span>同乘人</span>
-            <strong>{{ riderSummary }}</strong>
-            <i class="i-mdi-chevron-right" aria-hidden="true"></i>
-          </button>
-          <button
-            type="button"
-            class="ride-hailing-ordering-panel__control"
-            data-testid="ordering.ride-hailing.departure-time.open"
-            @click="departureDrawerOpen = true"
-          >
-            <span>出发时间</span>
-            <strong data-testid="ordering.ride-hailing.departure-time">
-              {{ rideDepartureLabel }}
-            </strong>
-            <i class="i-mdi-chevron-right" aria-hidden="true"></i>
-          </button>
-        </div>
+          <span>同乘人</span>
+          <strong>{{ riderSummary }}</strong>
+          <i class="i-mdi-chevron-right" aria-hidden="true"></i>
+        </button>
+        <button
+          type="button"
+          class="ride-hailing-ordering-content__control"
+          data-testid="ordering.ride-hailing.departure-time.open"
+          @click="departureDrawerOpen = true"
+        >
+          <span>出发时间</span>
+          <strong data-testid="ordering.ride-hailing.departure-time">
+            {{ rideDepartureLabel }}
+          </strong>
+          <i class="i-mdi-chevron-right" aria-hidden="true"></i>
+        </button>
       </div>
 
       <PuDrawer
@@ -81,7 +81,7 @@
         title="同乘人"
         max-width="44rem"
       >
-        <div class="ride-hailing-ordering-panel__drawer-content">
+        <div class="ride-hailing-ordering-content__drawer-content">
           <PuInlineNotice
             v-if="ridersLocked"
             tone="info"
@@ -90,7 +90,7 @@
           <div
             v-for="rider in rideRiders"
             :key="rider.userId"
-            class="ride-hailing-ordering-panel__rider-row"
+            class="ride-hailing-ordering-content__rider-row"
           >
             <span class="i-mdi-account-circle" aria-hidden="true"></span>
             <div>
@@ -106,7 +106,7 @@
         title="出发时间"
         max-width="44rem"
       >
-        <div class="ride-hailing-ordering-panel__drawer-content">
+        <div class="ride-hailing-ordering-content__drawer-content">
           <PuInlineNotice
             v-if="departureLocked"
             tone="info"
@@ -133,27 +133,8 @@
 </template>
 
 <script setup lang="ts">
+import { PuDrawer, PuFormItem, PuInlineNotice, PuInput } from "@partner-up-dev/design-web";
 import { computed, ref, watch } from "vue";
-import {
-  PuDrawer,
-  PuFormItem,
-  PuInlineNotice,
-  PuInput,
-} from "@partner-up-dev/design-web";
-import RouteMap from "@/domains/route/ui/RouteMap.vue";
-import {
-  applyPickedLocationToRoutePoint,
-  cloneRoute,
-  pickRoutePointCoordinate,
-  replaceRoutePointAt,
-  resolveRoutePointRole,
-  type Route,
-  type RoutePoint,
-} from "@/domains/route/model/route";
-import LocationPickerPanel from "@/domains/location/ui/LocationPickerPanel.vue";
-import type { PickedLocation } from "@/domains/location/model/location-picker";
-import type { MapFitPadding } from "@/shared/map/types";
-import RideHailingSkuCard from "./RideHailingSkuCard.vue";
 import type {
   BoundOrderParticipant,
   OrderingContentInput,
@@ -165,6 +146,20 @@ import {
   readBoundOrderParticipants,
 } from "@/domains/commerce/model/ordering-content";
 import type { CreateOrderInput } from "@/domains/commerce/queries/useCommerce";
+import type { PickedLocation } from "@/domains/location/model/location-picker";
+import LocationPickerPanel from "@/domains/location/ui/LocationPickerPanel.vue";
+import {
+  applyPickedLocationToRoutePoint,
+  cloneRoute,
+  pickRoutePointCoordinate,
+  type Route,
+  type RoutePoint,
+  replaceRoutePointAt,
+  resolveRoutePointRole,
+} from "@/domains/route/model/route";
+import RouteMap from "@/domains/route/ui/RouteMap.vue";
+import type { MapFitPadding } from "@/shared/map/types";
+import RideHailingSkuCard from "./RideHailingSkuCard.vue";
 
 export type RideVehicleOption = {
   skuId: number;
@@ -204,13 +199,10 @@ const departureDrawerOpen = ref(false);
 const editableDepartureAt = ref<string | null>(null);
 
 const rideOffer = computed<RideOffer | null>(() =>
-  props.input.offerDetail.productType === "RIDE_HAILING"
-    ? props.input.offerDetail
-    : null,
+  props.input.offerDetail.productType === "RIDE_HAILING" ? props.input.offerDetail : null,
 );
 
-const bindingValue = (key: string): unknown | null =>
-  readBindingValue(props.input.bindings, key);
+const bindingValue = (key: string): unknown | null => readBindingValue(props.input.bindings, key);
 
 const isRideRouteSnapshot = (value: unknown): value is RideRouteSnapshot => {
   if (typeof value !== "object" || value === null || Array.isArray(value)) {
@@ -241,12 +233,8 @@ const boundContactPhone = computed(() => {
 });
 
 const routeEditable = computed(() => !isBindingLocked(props.input, "route"));
-const ridersLocked = computed(() =>
-  isBindingLocked(props.input, "orderParticipants"),
-);
-const departureLocked = computed(() =>
-  isBindingLocked(props.input, "departureAt"),
-);
+const ridersLocked = computed(() => isBindingLocked(props.input, "orderParticipants"));
+const departureLocked = computed(() => isBindingLocked(props.input, "departureAt"));
 
 const rideRiders = computed<BoundOrderParticipant[]>(() =>
   readBoundOrderParticipants(props.input.bindings),
@@ -270,10 +258,7 @@ const toRoutePoint = (place: unknown): RoutePoint | null => {
         ? record.address
         : null;
 
-  if (
-    typeof record.latitude === "number" &&
-    typeof record.longitude === "number"
-  ) {
+  if (typeof record.latitude === "number" && typeof record.longitude === "number") {
     return {
       name,
       full_address: fullAddress,
@@ -313,9 +298,7 @@ const routeFromBinding = computed<Route | null>(() => {
   return [origin, ...waypoints, destination];
 });
 
-const routeForMap = computed<Route | null>(
-  () => editableRoute.value ?? routeFromBinding.value,
-);
+const routeForMap = computed<Route | null>(() => editableRoute.value ?? routeFromBinding.value);
 
 const selectedRoutePoint = computed<RoutePoint | null>(() => {
   const index = selectedRoutePointIndex.value;
@@ -368,26 +351,25 @@ const routeMapFitPadding: MapFitPadding = {
   left: 32,
 };
 
-const rideBaseOptions = computed<RideVehicleOption[]>(() =>
-  rideOffer.value?.spus.flatMap((spu) =>
-    spu.skuOptions.map((sku) => ({
-      skuId: sku.skuId,
-      spuId: sku.spuId,
-      name: sku.name,
-      displayName: sku.name,
-      selectable: true,
-      selected: false,
-      disabledReason: null,
-      estimateAmountFen: null,
-      quoteAmountFen: null,
-    })),
-  ) ?? [],
+const rideBaseOptions = computed<RideVehicleOption[]>(
+  () =>
+    rideOffer.value?.spus.flatMap((spu) =>
+      spu.skuOptions.map((sku) => ({
+        skuId: sku.skuId,
+        spuId: sku.spuId,
+        name: sku.name,
+        displayName: sku.name,
+        selectable: true,
+        selected: false,
+        disabledReason: null,
+        estimateAmountFen: null,
+        quoteAmountFen: null,
+      })),
+    ) ?? [],
 );
 
 const rideQuoteOptions = computed<RideVehicleOption[]>(() =>
-  props.evaluatedOptions.length > 0
-    ? props.evaluatedOptions
-    : rideBaseOptions.value,
+  props.evaluatedOptions.length > 0 ? props.evaluatedOptions : rideBaseOptions.value,
 );
 
 const visibleRideQuoteOptions = computed<RideVehicleOption[]>(() =>
@@ -407,11 +389,7 @@ const editableDepartureInput = computed(() =>
 );
 
 const evaluationOutput = computed<OrderingContentOutput | null>(() => {
-  if (
-    !rideOffer.value ||
-    selectedRideSkuId.value === null ||
-    !rideRouteForSubmit.value
-  ) {
+  if (!rideOffer.value || selectedRideSkuId.value === null || !rideRouteForSubmit.value) {
     return null;
   }
   const phone = rideContactPhone.value.trim();
@@ -533,9 +511,7 @@ const handleDepartureInput = (value: string) => {
 watch(
   visibleRideQuoteOptions,
   (next) => {
-    const currentOption = next.find(
-      (option) => option.skuId === selectedRideSkuId.value,
-    );
+    const currentOption = next.find((option) => option.skuId === selectedRideSkuId.value);
     if (currentOption?.selectable) return;
     const defaultOption =
       next.find((option) => option.selected && option.selectable) ??
@@ -584,28 +560,29 @@ watch(
 </script>
 
 <style scoped lang="scss">
-.ride-hailing-ordering-panel {
+.ride-hailing-ordering-content {
+  --ride-hailing-ordering-content-control-row-height: 2.75rem;
   position: relative;
   width: 100%;
   min-height: 0;
 }
 
-.ride-hailing-ordering-panel,
-.ride-hailing-ordering-panel__route-map {
+.ride-hailing-ordering-content,
+.ride-hailing-ordering-content__route-map {
   height: 100%;
 }
 
-.ride-hailing-ordering-panel__route-map :deep(.route-map),
-.ride-hailing-ordering-panel__route-map :deep(.map-shell) {
+.ride-hailing-ordering-content__route-map :deep(.route-map),
+.ride-hailing-ordering-content__route-map :deep(.map-shell) {
   height: 100%;
   border: 0;
   border-radius: 0;
 }
 
-.ride-hailing-ordering-panel__sheet {
+.ride-hailing-ordering-content__sheet {
   position: absolute;
   right: 0;
-  bottom: 0;
+  bottom: var(--ride-hailing-ordering-content-control-row-height);
   left: 0;
   z-index: 20;
   pointer-events: auto;
@@ -619,7 +596,7 @@ watch(
   box-shadow: var(--sys-shadow-3);
 }
 
-.ride-hailing-ordering-panel__handle {
+.ride-hailing-ordering-content__handle {
   width: 2rem;
   height: 0.25rem;
   margin: var(--sys-spacing-small) auto 0;
@@ -627,25 +604,31 @@ watch(
   background: var(--sys-color-on-surface-variant);
 }
 
-.ride-hailing-ordering-panel__vehicles {
+.ride-hailing-ordering-content__vehicles {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
   gap: var(--sys-spacing-small);
   min-height: 0;
   overflow: auto;
-  padding-bottom: var(--sys-spacing-small);
 }
 
-.ride-hailing-ordering-panel__controls {
+.ride-hailing-ordering-content__controls {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 20;
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   align-items: center;
+  min-height: var(--ride-hailing-ordering-content-control-row-height);
   border-top: 1px solid var(--sys-color-outline-variant);
-  padding-top: var(--sys-spacing-small);
+  padding: var(--sys-spacing-xsmall) var(--sys-spacing-medium);
+  background: var(--sys-color-surface-container);
 }
 
-.ride-hailing-ordering-panel__control {
+.ride-hailing-ordering-content__control {
   display: flex;
   min-width: 0;
   align-items: center;
@@ -684,13 +667,13 @@ watch(
   }
 }
 
-.ride-hailing-ordering-panel__drawer-content {
+.ride-hailing-ordering-content__drawer-content {
   display: flex;
   flex-direction: column;
   gap: var(--sys-spacing-small);
 }
 
-.ride-hailing-ordering-panel__rider-row {
+.ride-hailing-ordering-content__rider-row {
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
   gap: var(--sys-spacing-small);
diff --git a/apps/frontend/src/pages/OrderingFromPlacementPage.vue b/apps/frontend/src/pages/OrderingFromPlacementPage.vue
index 2552210c7..bd8d32b93 100644
--- a/apps/frontend/src/pages/OrderingFromPlacementPage.vue
+++ b/apps/frontend/src/pages/OrderingFromPlacementPage.vue
@@ -3,6 +3,7 @@
     :title="t('ordering.pageTitle')"
     :back-fallback-to="backFallbackTo"
     :data-testid="orderingPageTestId"
+    :no-padding="!!rideOrdering"
   >
     <template #actions>
       <PuButton
@@ -31,7 +32,7 @@
         @update:output="handleRentalOutputUpdate"
       />
 
-      <RideHailingOrderingPanel
+      <RideHailingOrderingContent
         v-else-if="rideOrdering && orderingContentInput"
         :input="orderingContentInput"
         :evaluated-options="rideEvaluatedOptions"
@@ -94,31 +95,31 @@
 </template>
 
 <script setup lang="ts">
+import { PuButton, PuInlineNotice } from "@partner-up-dev/design-web";
 import { computed, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
-import OrderingPageShell from "@/domains/commerce/ui/ordering/OrderingPageShell.vue";
-import OrderingFooterActionBar from "@/domains/commerce/ui/ordering/OrderingFooterActionBar.vue";
-import OrderingFloatingNoticeLayer from "@/domains/commerce/ui/ordering/OrderingFloatingNoticeLayer.vue";
-import OrderingPriceDetailDrawer from "@/domains/commerce/ui/ordering/OrderingPriceDetailDrawer.vue";
-import RentalOrderingForm from "@/domains/commerce/ui/ordering/RentalOrderingForm.vue";
-import { PuButton, PuInlineNotice } from "@partner-up-dev/design-web";
-import RideHailingOrderingPanel, {
-  type RideVehicleOption,
-} from "@/domains/commerce/ui/ordering/RideHailingOrderingPanel.vue";
-import {
-  useCreateOrder,
-  useEvaluateOrdering,
-  type CreateOrderInput,
-} from "@/domains/commerce/queries/useCommerce";
-import {
-  ORDERING_ENTRY_STORAGE_KEY,
-  type OrderingEntryPayload,
-} from "@/domains/commerce/model/ordering-entry-storage";
 import type {
   OrderingContentInput,
   OrderingContentOutput,
 } from "@/domains/commerce/model/ordering-content";
+import {
+  ORDERING_ENTRY_STORAGE_KEY,
+  type OrderingEntryPayload,
+} from "@/domains/commerce/model/ordering-entry-storage";
+import {
+  type CreateOrderInput,
+  useCreateOrder,
+  useEvaluateOrdering,
+} from "@/domains/commerce/queries/useCommerce";
+import OrderingFloatingNoticeLayer from "@/domains/commerce/ui/ordering/OrderingFloatingNoticeLayer.vue";
+import OrderingFooterActionBar from "@/domains/commerce/ui/ordering/OrderingFooterActionBar.vue";
+import OrderingPageShell from "@/domains/commerce/ui/ordering/OrderingPageShell.vue";
+import OrderingPriceDetailDrawer from "@/domains/commerce/ui/ordering/OrderingPriceDetailDrawer.vue";
+import RentalOrderingForm from "@/domains/commerce/ui/ordering/RentalOrderingForm.vue";
+import RideHailingOrderingContent, {
+  type RideVehicleOption,
+} from "@/domains/commerce/ui/ordering/RideHailingOrderingContent.vue";
 
 type OrderingOfferDetail = OrderingEntryPayload["offerDetail"];
 
@@ -139,9 +140,7 @@ const readOrderingEntry = (): OrderingEntryPayload | null => {
       offerDetail: parsed.offerDetail,
       prId: typeof parsed.prId === "number" ? parsed.prId : undefined,
       bindings:
-        typeof parsed.bindings === "object" && parsed.bindings !== null
-          ? parsed.bindings
-          : {},
+        typeof parsed.bindings === "object" && parsed.bindings !== null ? parsed.bindings : {},
       bindingLocks:
         typeof parsed.bindingLocks === "object" && parsed.bindingLocks !== null
           ? parsed.bindingLocks
@@ -184,9 +183,7 @@ const orderingContentInput = computed<OrderingContentInput | null>(() => {
   };
 });
 
-const buildOrderInput = (
-  output: OrderingContentOutput | null,
-): CreateOrderInput | null => {
+const buildOrderInput = (output: OrderingContentOutput | null): CreateOrderInput | null => {
   const entry = orderingEntry.value;
   if (!entry || !output) return null;
   return {
@@ -210,14 +207,10 @@ const rideEvaluatedOptions = computed<RideVehicleOption[]>(
   () => evaluateMutation.data.value?.rideHailing?.options ?? [],
 );
 
-const availability = computed(
-  () => evaluateMutation.data.value?.actions.create_order ?? null,
-);
+const availability = computed(() => evaluateMutation.data.value?.actions.create_order ?? null);
 
 const createOrderErrorMessage = computed(() =>
-  createOrderMutation.error.value instanceof Error
-    ? createOrderMutation.error.value.message
-    : null,
+  createOrderMutation.error.value instanceof Error ? createOrderMutation.error.value.message : null,
 );
 
 const availabilityMessage = computed(() => {
@@ -234,23 +227,17 @@ const canCreate = computed(
     availability.value?.allowed === true,
 );
 
-const priceExplanations = computed(
-  () => evaluateMutation.data.value?.price.explanations ?? [],
-);
+const priceExplanations = computed(() => evaluateMutation.data.value?.price.explanations ?? []);
 
 const priceDisplayLabel = computed(() => {
   const range = evaluateMutation.data.value?.price.range ?? null;
   const rangePrices = range
-    ? [range.minFen, range.maxFen].filter(
-        (value): value is number => typeof value === "number",
-      )
+    ? [range.minFen, range.maxFen].filter((value): value is number => typeof value === "number")
     : [];
   if (rangePrices.length > 0) {
     const min = Math.min(...rangePrices);
     const max = Math.max(...rangePrices);
-    return min === max
-      ? formatPriceAmount(min)
-      : `${formatPriceAmount(min)}~${formatYuan(max)}`;
+    return min === max ? formatPriceAmount(min) : `${formatPriceAmount(min)}~${formatYuan(max)}`;
   }
   return formatPriceAmount(evaluateMutation.data.value?.price.totalFen ?? null);
 });
@@ -264,9 +251,7 @@ const floatingNoticeTone = computed<"warning" | "error">(() =>
 );
 
 const backFallbackTo = computed(() =>
-  orderingEntry.value?.prId
-    ? { path: `/pr/${orderingEntry.value.prId}` }
-    : { path: "/" },
+  orderingEntry.value?.prId ? { path: `/pr/${orderingEntry.value.prId}` } : { path: "/" },
 );
 
 const handleRentalOutputUpdate = (next: OrderingContentOutput | null): void => {
@@ -329,6 +314,5 @@ const submitOrder = async (): Promise<void> => {
   width: 100%;
   min-height: 0;
   overflow: auto;
-  padding-bottom: var(--sys-spacing-medium);
 }
 </style>
diff --git a/tasks/ride-hailing-ui-fixes/control.md b/tasks/ride-hailing-ui-fixes/control.md
new file mode 100644
index 000000000..f29d07d69
--- /dev/null
+++ b/tasks/ride-hailing-ui-fixes/control.md
@@ -0,0 +1,94 @@
+# Ride Hailing UI Fixes Control
+
+## Objective & Hypothesis
+
+Objective:
+
+- repair concrete RideHailing Ordering UI and Order Detail Page UI issues one
+  slice at a time
+- keep this packet clean enough to steer implementation without inheriting the
+  noisy history from `tasks/ride-hailing-mvp/`
+
+Hypothesis:
+
+- the commerce spine is now strong enough for focused UI fixes
+- each observed UI issue should be handled as an independent, reviewable slice
+- the safest workflow is explicit Impact Handshake before each production-code
+  mutation, followed by an explicit human start signal
+
+## Classification
+
+- Primary route: `Reality`
+- Active mode: `Execute` only after a concrete issue is named and approved
+- Current collaboration state: waiting for the human to name the next concrete
+  UI issue
+
+## Inherited Effective Truth
+
+- Durable route spine:
+  `PR Page -> /order/new -> POST /api/commerce/orders -> /orders/:orderId`.
+- `/order/new` already creates real orders and routes to `/orders/:orderId`.
+- `/order/support` no longer owns the primary meaning of `下单`.
+- RideHailing ordering already uses provider-backed evaluation and fake Caocao
+  local/runtime support.
+- RideHailing candidate options are currently catalog-seeded, then evaluated by
+  provider estimate. Provider-authored option discovery is a separate contract
+  decision and is not part of ordinary UI fixes.
+- `OrderingFromPlacementPage.vue` is the shared ordering shell.
+- `RideHailingOrderingContent.vue` owns the RideHailing ordering content.
+- `RideHailingSkuCard.vue` owns RideHailing vehicle card display.
+- `CommerceOrderDetailPage.vue` currently owns both Rental and RideHailing order
+  detail rendering.
+- `RouteMap.vue` / shared map code are relevant when a UI issue concerns route
+  geometry, marker behavior, or zoom/pan behavior.
+
+## Collaboration Protocol
+
+- Do not automatically mutate production code from this packet.
+- Codex is expected to raise objections before implementation when a requested
+  slice appears likely to damage functionality, ownership boundaries,
+  maintainability, readability, or established UI contracts.
+- Before every production-code fix, perform an Impact Handshake covering:
+  - Address and Object: exact files, anchors, components, symbols, or test IDs
+    expected to change
+  - State Diff: observed current behavior -> intended behavior
+  - Blast Radius Forecast: downstream UI, API, scenario, and contract surfaces
+    that may be affected
+  - Invariants Check: route spine, create/evaluate command shape, binding-lock
+    authority, and existing scenario test IDs that must remain stable
+  - Verification: concrete proof to run for that slice
+- Wait for an explicit human start signal before implementation. The expected
+  signal is the visible word: `开始`.
+- Do not auto-commit.
+- Keep each issue independent unless the human explicitly combines them.
+- Keep old `tasks/ride-hailing-mvp/` as historical evidence only; do not expand
+  it for new UI-fix work.
+
+## Durable Owners Likely Touched
+
+- `docs/20-product-tdd/ecommerce-contracts.md`
+- `apps/frontend/src/pages/OrderingFromPlacementPage.vue`
+- `apps/frontend/src/pages/CommerceOrderDetailPage.vue`
+- `apps/frontend/src/domains/commerce/ui/ordering/`
+- `apps/frontend/src/domains/route/ui/RouteMap.vue`
+- `apps/frontend/src/shared/map/`
+- `tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+
+## Verification
+
+Choose the narrowest sufficient proof per approved slice:
+
+- `pnpm check:type:frontend`
+- focused browser/manual check through PR placement when the issue is visual or
+  interaction-specific
+- `pnpm vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+  when browser-visible workflow behavior or stable test IDs change
+
+## Current State
+
+- Slice implemented and committed: RideHailing ordering content naming and
+  layout correction.
+- Verified with `pnpm check:type:frontend` and explicit Biome check on changed
+  frontend files.
+- Remaining proof: human visual review of RideHailing `/order/new` content /
+  footer adjacency and bottom-sheet / control-row spacing.

From f25baf629eb9d29e5f24142cd52e216956389cba Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Sun, 21 Jun 2026 14:37:55 +0800
Subject: [PATCH 28/94] test(ride-hailing): cover preflight price change

- add fake Caocao estimate admin controls for scenarios
- verify RideHailing price-change dialog gates order creation
- record slice notes and ignore task artifacts
---
 packages/fake-caocao-server/src/routes.ts     |  43 +++
 .../fake-caocao-server/src/server.test.ts     |  41 +++
 packages/fake-caocao-server/src/state.test.ts |  20 ++
 packages/fake-caocao-server/src/state.ts      |  44 ++-
 tasks/ride-hailing-ui-fixes/.gitignore        |   1 +
 tasks/ride-hailing-ui-fixes/change-log.md     |  89 +++++++
 tasks/ride-hailing-ui-fixes/control.md        |  38 ++-
 tasks/ride-hailing-ui-fixes/discussion-log.md | 126 +++++++++
 .../ride-hailing-ordering.scenario.test.ts    | 250 +++++++++++-------
 9 files changed, 544 insertions(+), 108 deletions(-)
 create mode 100644 tasks/ride-hailing-ui-fixes/.gitignore
 create mode 100644 tasks/ride-hailing-ui-fixes/change-log.md
 create mode 100644 tasks/ride-hailing-ui-fixes/discussion-log.md

diff --git a/packages/fake-caocao-server/src/routes.ts b/packages/fake-caocao-server/src/routes.ts
index 766bbe5d3..83ae2ec3f 100644
--- a/packages/fake-caocao-server/src/routes.ts
+++ b/packages/fake-caocao-server/src/routes.ts
@@ -118,6 +118,28 @@ const readFirstParam = (params: Record<string, string>, keys: string[]): string
   return null;
 };
 
+const readRequiredNumberParam = (params: Record<string, string>, keys: string[]): number => {
+  const raw = readFirstParam(params, keys);
+  const parsed = raw === null ? Number.NaN : Number(raw);
+  if (!Number.isFinite(parsed)) {
+    throw new Error(`Missing numeric fake Caocao parameter: ${keys[0]}`);
+  }
+  return parsed;
+};
+
+const readOptionalNumberParam = (
+  params: Record<string, string>,
+  keys: string[],
+): number | undefined => {
+  const raw = readFirstParam(params, keys);
+  if (raw === null) return undefined;
+  const parsed = Number(raw);
+  if (!Number.isFinite(parsed)) {
+    throw new Error(`Invalid numeric fake Caocao parameter: ${keys[0]}`);
+  }
+  return parsed;
+};
+
 const estimatePayload = (estimate: FakeCaocaoVehicleEstimate): unknown => ({
   carType: estimate.carType,
   carTypeName: estimate.carTypeName,
@@ -281,6 +303,27 @@ export async function handleFakeCaocaoRequest(
       return;
     }
 
+    if (url.pathname === "/__fake_caocao/estimates" && req.method === "POST") {
+      const params = await readParams(req, url);
+      const carType = readFirstParam(params, ["carType", "car_type"]);
+      if (!carType) {
+        throw new Error("Missing fake Caocao car type");
+      }
+      const estimate = input.state.updateEstimate({
+        carType,
+        carTypeName: readFirstParam(params, ["carTypeName", "car_type_name"]) ?? undefined,
+        distanceMeters: readOptionalNumberParam(params, ["distanceMeters", "distance"]),
+        durationSeconds: readOptionalNumberParam(params, ["durationSeconds", "duration"]),
+        estimateAmountFen: readRequiredNumberParam(params, [
+          "estimateAmountFen",
+          "estimatePriceFen",
+          "estimate_price",
+        ]),
+      });
+      sendJson(res, 200, { estimate, ok: true });
+      return;
+    }
+
     if (url.pathname === "/__fake_caocao/state" && req.method === "GET") {
       sendJson(res, 200, input.state.snapshot());
       return;
diff --git a/packages/fake-caocao-server/src/server.test.ts b/packages/fake-caocao-server/src/server.test.ts
index 672fd2a59..372316e5e 100644
--- a/packages/fake-caocao-server/src/server.test.ts
+++ b/packages/fake-caocao-server/src/server.test.ts
@@ -107,6 +107,47 @@ describe("startFakeCaocaoServer", () => {
     expect(detailBody.data.phase).toBe("ACCEPTED");
   });
 
+  test("supports admin estimate controls", async () => {
+    server = await startFakeCaocaoServer();
+
+    const updateResponse = await fetch(`${server.origin}/__fake_caocao/estimates`, {
+      body: JSON.stringify({
+        carType: "EXPRESS",
+        estimateAmountFen: 4100,
+      }),
+      headers: {
+        "Content-Type": "application/json",
+      },
+      method: "POST",
+    });
+    const updateBody = (await updateResponse.json()) as {
+      estimate: { estimateAmountFen: number };
+      ok: boolean;
+    };
+
+    expect(updateResponse.ok).toBe(true);
+    expect(updateBody.ok).toBe(true);
+    expect(updateBody.estimate.estimateAmountFen).toBe(4100);
+
+    const estimateResponse = await fetch(
+      `${server.origin}/common/estimatePriceWithDetail?${signedSearchParams({
+        clientId: server.fixture.clientId,
+        params: {
+          car_type: "EXPRESS",
+          timestamp: "estimate-after-admin-update",
+        },
+        signKey: server.fixture.signKey,
+      }).toString()}`,
+    );
+    const estimateBody = (await estimateResponse.json()) as {
+      data: { estimateAmountFen: number };
+      success: boolean;
+    };
+
+    expect(estimateBody.success).toBe(true);
+    expect(estimateBody.data.estimateAmountFen).toBe(4100);
+  });
+
   test("supports admin reset and next-create failure controls", async () => {
     server = await startFakeCaocaoServer();
 
diff --git a/packages/fake-caocao-server/src/state.test.ts b/packages/fake-caocao-server/src/state.test.ts
index 0b46a7258..cc8d5420d 100644
--- a/packages/fake-caocao-server/src/state.test.ts
+++ b/packages/fake-caocao-server/src/state.test.ts
@@ -27,6 +27,26 @@ describe("FakeCaocaoState", () => {
     expect(finished?.phase).toBe("FINISHED");
   });
 
+  test("updates estimates for later quotes and orders", () => {
+    const state = new FakeCaocaoState();
+
+    const updated = state.updateEstimate({
+      carType: "PREMIER",
+      estimateAmountFen: 6100,
+    });
+    const created = state.createOrder({
+      carType: "PREMIER",
+      externalOrderId: "external-order-price-change",
+    });
+
+    expect(updated.estimateAmountFen).toBe(6100);
+    expect(state.findEstimate("PREMIER").estimateAmountFen).toBe(6100);
+    expect(created.finalAmountFen).toBe(6500);
+
+    state.reset();
+    expect(state.findEstimate("PREMIER").estimateAmountFen).toBe(5200);
+  });
+
   test("supports next-create failure, cancellation, and fee confirmation", () => {
     const state = new FakeCaocaoState();
 
diff --git a/packages/fake-caocao-server/src/state.ts b/packages/fake-caocao-server/src/state.ts
index 646a6c6d7..ba6501dd9 100644
--- a/packages/fake-caocao-server/src/state.ts
+++ b/packages/fake-caocao-server/src/state.ts
@@ -16,12 +16,7 @@ export type FakeCaocaoDriverSnapshot = {
   longitude: number;
 };
 
-export type FakeCaocaoOrderPhase =
-  | "CREATED"
-  | "ACCEPTED"
-  | "IN_TRIP"
-  | "FINISHED"
-  | "CANCELLED";
+export type FakeCaocaoOrderPhase = "CREATED" | "ACCEPTED" | "IN_TRIP" | "FINISHED" | "CANCELLED";
 
 export type FakeCaocaoOrderState = {
   providerOrderId: string;
@@ -112,11 +107,38 @@ export class FakeCaocaoState {
   }
 
   findEstimate(carType: string): FakeCaocaoVehicleEstimate {
-    return (
-      this.estimates.get(carType) ??
-      this.estimates.get("EXPRESS") ??
-      defaultEstimates()[0]!
-    );
+    return this.estimates.get(carType) ?? this.estimates.get("EXPRESS") ?? defaultEstimates()[0]!;
+  }
+
+  updateEstimate(input: {
+    carType: string;
+    estimateAmountFen: number;
+    carTypeName?: string;
+    distanceMeters?: number;
+    durationSeconds?: number;
+  }): FakeCaocaoVehicleEstimate {
+    const carType = input.carType.trim();
+    if (!carType) {
+      throw new Error("Missing fake Caocao car type");
+    }
+    const current = this.estimates.get(carType);
+    if (!current) {
+      throw new Error(`Unknown fake Caocao car type: ${carType}`);
+    }
+    if (!Number.isFinite(input.estimateAmountFen) || input.estimateAmountFen < 0) {
+      throw new Error("Fake Caocao estimate amount must be a non-negative number");
+    }
+    const updated: FakeCaocaoVehicleEstimate = {
+      ...current,
+      carTypeName: input.carTypeName?.trim() || current.carTypeName,
+      distanceMeters:
+        typeof input.distanceMeters === "number" ? input.distanceMeters : current.distanceMeters,
+      durationSeconds:
+        typeof input.durationSeconds === "number" ? input.durationSeconds : current.durationSeconds,
+      estimateAmountFen: Math.round(input.estimateAmountFen),
+    };
+    this.estimates.set(carType, updated);
+    return updated;
   }
 
   createOrder(input: {
diff --git a/tasks/ride-hailing-ui-fixes/.gitignore b/tasks/ride-hailing-ui-fixes/.gitignore
new file mode 100644
index 000000000..d4f588edf
--- /dev/null
+++ b/tasks/ride-hailing-ui-fixes/.gitignore
@@ -0,0 +1 @@
+artifacts/
diff --git a/tasks/ride-hailing-ui-fixes/change-log.md b/tasks/ride-hailing-ui-fixes/change-log.md
new file mode 100644
index 000000000..e5e549314
--- /dev/null
+++ b/tasks/ride-hailing-ui-fixes/change-log.md
@@ -0,0 +1,89 @@
+# Change Log
+
+## Slice: Packet Setup
+
+- Added task packet `tasks/ride-hailing-ui-fixes/` to replace the noisy
+  historical `tasks/ride-hailing-mvp/` packet for new focused UI fixes.
+- Added protocol requirement that Codex should raise objections when a proposed
+  slice may harm functionality, boundaries, maintainability, readability, or UI
+  contracts.
+- Added `discussion-log.md` and `change-log.md` for ongoing packet history.
+
+## Slice: RideHailing Ordering Content Layout
+
+- Committed `f7ac1aa3 fix(ride-hailing): align ordering content layout`:
+  - renamed `RideHailingOrderingPanel.vue` to
+    `RideHailingOrderingContent.vue`
+  - wired ride ordering content through the Ordering page shell as content
+  - added ride-only no-padding shell support
+  - removed `ordering-page__body` bottom padding
+  - split RideHailing bottom sheet and drawer control row into sibling layers
+  - changed price-detail toggle to a ghost circle `PuButton`
+- Verification:
+  - `pnpm check:type:frontend`
+  - explicit Biome check on changed frontend files
+  - `pnpm check:lint:frontend`
+
+## Slice: Evaluation And RideHailing SKU Model Clarification
+
+- Reorganized packet logs by event / slice instead of by calendar date.
+- Recorded current implementation findings:
+  - parent page evaluation currently owns price summary, create-order
+    availability, blocking notice, and RideHailing evaluated options
+  - RideHailing SKU options currently come from both catalog offer detail and
+    evaluated provider quote options
+- Recorded target model decision:
+  - parent-page evaluation becomes submit-time create-order pre-flight only
+  - footer price summary comes from Ordering Content
+  - RideHailing SKU list ownership moves fully into RideHailing Ordering Content
+  - parent-page evaluation no longer returns or owns `rideHailing.options`
+
+## Slice: Submit-Time Preflight And RideHailing SKU Ownership
+
+- Frontend:
+  - added `OrderingContentSummary` price summary model
+  - made Rental and RideHailing Ordering Content emit local price summary
+  - moved footer price label and price detail source from evaluation output to
+    Ordering Content summary
+  - removed parent-page auto-evaluate watch
+  - changed submit flow to `evaluate -> dialog if blocked/changed -> create`
+  - moved RideHailing quote option fetching into
+    `RideHailingOrderingContent`
+- Backend:
+  - added `POST /api/commerce/ordering/ride-hailing/options`
+  - removed `rideHailing.options` from ordering evaluation response
+  - added price explanations to RideHailing quote options
+  - avoided double-applying dynamic-quote pricing policy during RideHailing
+    pre-flight/create price resolution
+- Docs:
+  - updated `docs/20-product-tdd/ecommerce-contracts.md` for the submit-time
+    pre-flight model and RideHailing options endpoint.
+- Verification:
+  - `pnpm check:type:frontend`
+  - `pnpm check:type:backend`
+  - explicit `pnpm exec biome lint` on changed source files
+  - `pnpm check:lint:frontend`
+  - `pnpm check:lint:backend`
+  - `pnpm exec vitest run tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts --project system-scenario --reporter=verbose`
+
+## Slice: RideHailing Preflight Price-Change Scenario
+
+- Fake Caocao:
+  - added an admin-only `POST /__fake_caocao/estimates` test control route
+    for updating a vehicle estimate during scenario setup
+  - added `FakeCaocaoState.updateEstimate`
+  - covered estimate mutation in fake server state and HTTP server tests
+- Scenario:
+  - added
+    `commerce_ride_hailing_preflight_price_change_requires_confirmation`
+  - the scenario opens RideHailing Ordering with the original provider quote,
+    mutates the selected vehicle quote, clicks create order, verifies the
+    price-change confirmation dialog, verifies no provider order exists before
+    confirmation, then confirms and reaches order detail
+- Verification:
+  - `pnpm exec biome check --write packages/fake-caocao-server/src/state.ts packages/fake-caocao-server/src/routes.ts packages/fake-caocao-server/src/state.test.ts packages/fake-caocao-server/src/server.test.ts tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+  - `pnpm --filter @partner-up-dev/fake-caocao-server typecheck`
+  - `pnpm --filter @partner-up-dev/fake-caocao-server test`
+  - `pnpm exec vitest run tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts --project system-scenario --reporter=verbose`
+  - `pnpm check:type:backend`
+  - `pnpm check:type:frontend`
diff --git a/tasks/ride-hailing-ui-fixes/control.md b/tasks/ride-hailing-ui-fixes/control.md
index f29d07d69..e1b793519 100644
--- a/tasks/ride-hailing-ui-fixes/control.md
+++ b/tasks/ride-hailing-ui-fixes/control.md
@@ -86,9 +86,35 @@ Choose the narrowest sufficient proof per approved slice:
 
 ## Current State
 
-- Slice implemented and committed: RideHailing ordering content naming and
-  layout correction.
-- Verified with `pnpm check:type:frontend` and explicit Biome check on changed
-  frontend files.
-- Remaining proof: human visual review of RideHailing `/order/new` content /
-  footer adjacency and bottom-sheet / control-row spacing.
+- Committed slice: RideHailing ordering content naming and layout correction
+  (`f7ac1aa3`).
+- Implemented but not committed slice: submit-time ordering pre-flight and
+  RideHailing SKU ownership correction.
+- Current target model now reflected in code:
+  - parent-page evaluation runs only after submit/create-order click
+  - blocking pre-flight results open an acknowledgement dialog
+  - changed pre-flight price opens a confirmation dialog before create order
+  - footer price summary comes from Ordering Content summary
+  - RideHailing quote options are loaded by `RideHailingOrderingContent`
+  - parent-page evaluation no longer returns or owns `rideHailing.options`
+- Implemented scenario coverage:
+  - fake Caocao can mutate vehicle estimates through an admin-only test route
+  - RideHailing system scenario now covers submit-time price-change preflight
+    and verifies provider order creation is blocked until the user confirms
+- Map diagnostic:
+  - the gray RideHailing Ordering map observation was confirmed as a browser
+    client issue; shared map code is not part of the active fix.
+- Verified:
+  - `pnpm exec biome check --write packages/fake-caocao-server/src/state.ts packages/fake-caocao-server/src/routes.ts packages/fake-caocao-server/src/state.test.ts packages/fake-caocao-server/src/server.test.ts tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+  - `pnpm --filter @partner-up-dev/fake-caocao-server typecheck`
+  - `pnpm --filter @partner-up-dev/fake-caocao-server test`
+  - `pnpm check:type:frontend`
+  - `pnpm check:type:backend`
+  - explicit `pnpm exec biome lint` on changed source files
+  - `pnpm check:lint:frontend`
+  - `pnpm check:lint:backend`
+  - `pnpm exec vitest run tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts --project system-scenario --reporter=verbose`
+- Non-blocking note:
+  - `pnpm exec biome check ...` reports whole-file formatting differences in
+    already-touched large files; this slice did not auto-format those whole
+    files to avoid unrelated churn.
diff --git a/tasks/ride-hailing-ui-fixes/discussion-log.md b/tasks/ride-hailing-ui-fixes/discussion-log.md
new file mode 100644
index 000000000..b3862dd56
--- /dev/null
+++ b/tasks/ride-hailing-ui-fixes/discussion-log.md
@@ -0,0 +1,126 @@
+# Discussion Log
+
+## Slice: Packet Reset And Collaboration Protocol
+
+- Created a clean task packet for incremental RideHailing Ordering UI and Order
+  Detail UI fixes.
+- Confirmed collaboration protocol:
+  - perform Impact Handshake before every production-code fix
+  - wait for explicit `开始` before implementation
+  - do not auto-commit unless explicitly requested
+  - raise objections when requested changes may damage functionality,
+    ownership boundaries, maintainability, readability, or established UI
+    contracts
+
+## Slice: RideHailing Ordering Content Layout
+
+- Implemented and committed:
+  `f7ac1aa3 fix(ride-hailing): align ordering content layout`.
+- Naming decision:
+  `RideHailingOrderingContent` should match the Ordering page shell assembly
+  concepts: header, content, and footer / bottom action bar.
+- Layout decision:
+  RideHailing content should use a no-padding Ordering shell; content and footer
+  should sit directly adjacent.
+- Layout decision:
+  `ordering.ride-hailing.drawer-control-row` is a sibling of
+  `ordering.ride-hailing.bottom-sheet`, anchored at the content bottom and
+  visually separated with `surface-container`.
+
+## Investigation: Current Evaluation And SKU Ownership Model
+
+- Observed model concern:
+  changing the selected RideHailing SKU currently feeds into ordering
+  evaluation, which re-evaluates and replaces the whole RideHailing options
+  payload.
+- Clarified current implementation:
+  - Ordering parent page evaluation owns price summary, create-order
+    availability, error notice text, and RideHailing evaluated option payload.
+  - Current RideHailing SKU list has two effective sources: catalog SKU
+    candidates from `offerDetail.spus[].skuOptions`, and provider-priced
+    options from `/api/commerce/ordering/evaluate`.
+  - Switching selected RideHailing SKU changes evaluation input, which triggers
+    a full evaluate request and replaces the evaluated options array.
+- Problem statement:
+  candidate discovery, selected SKU state, quote refresh, price summary, and
+  create-order pre-flight validation are currently coupled through one
+  evaluation model.
+
+## Decision: Target Evaluation And RideHailing SKU Model
+
+- `evaluationOrderInput` should be produced and evaluated only after the user
+  clicks the submit / create-order button.
+- Evaluation should act as create-order pre-flight:
+  - if key data such as quoted price has changed from what the page displayed,
+    show a dialog asking whether the user wants to continue with the changed
+    terms
+  - if blocking reasons exist, such as PR readiness or other create-order
+    pre-flight failures, show a dialog with only an acknowledgement action
+  - after a successful evaluation, request create order
+- `ordering-footer-action-bar__price-summary`, including price and price detail,
+  should come from Ordering Content output, not from parent-page evaluation.
+- RideHailing SKU list data ownership belongs to `RideHailingOrderingContent`.
+- Parent-page evaluation should not include `rideHailing.options` and should
+  not feed evaluated options back into `RideHailingOrderingContent`.
+
+## Slice: Submit-Time Preflight And RideHailing SKU Ownership
+
+- Impact Handshake accepted with explicit `开始`.
+- Implementation decision:
+  parent page still builds the same create-order command shape, but only calls
+  `POST /api/commerce/ordering/evaluate` inside the submit handler.
+- Implementation decision:
+  RideHailing content owns quote option loading through a dedicated
+  `POST /api/commerce/ordering/ride-hailing/options` endpoint keyed by
+  `offerId + route`, not by selected SKU.
+- Implementation decision:
+  Ordering Content emits a local price summary for the footer and price-detail
+  drawer; the parent page no longer reads footer price from evaluation output.
+- Implementation decision:
+  evaluate still performs authoritative submit-time pre-flight and pricing, but
+  its response no longer contains product-specific RideHailing option lists.
+- Runtime finding:
+  moving the quote query into `RideHailingOrderingContent` caused setup-time
+  evaluation of `rideRouteForSubmit`; its route conversion helper had to be
+  declared before the computed chain to avoid a JavaScript temporal dead zone.
+- Verification result:
+  the focused RideHailing system scenario passes after the TDZ fix.
+
+## Investigation: RideHailing Ordering Map Appears Gray
+
+- Observed report:
+  RideHailing Ordering page map appeared gray in the user's browser, while
+  price, SKU list, and selected SKU behavior looked correct.
+- Browser reproduction finding:
+  local Playwright reproduction loaded Tencent Maps SDK, direction JSONP, map
+  canvas, controls, attribution, and endpoint labels without failed requests.
+- Warning finding:
+  the Vue warning about `data-testid` on `PuDialog` is unrelated to the map; it
+  comes from passing an inheritable attribute to a dialog component whose root
+  cannot inherit attributes automatically.
+- Final classification:
+  the gray-map observation was confirmed by the user to be a browser-client
+  issue, not a product-code or shared-map implementation issue.
+- Follow-up decision:
+  do not change shared map code for this observation. Keep the remaining active
+  need focused on adding the RideHailing preflight price-change scenario.
+
+## Slice: RideHailing Preflight Price-Change Scenario
+
+- Impact Handshake accepted with explicit `开始`.
+- Scenario need:
+  RideHailing must cover the case where the page displays one provider quote,
+  then submit-time pre-flight receives a changed quote and asks the user whether
+  to continue.
+- Test-support decision:
+  the cleanest way to create this state is a fake Caocao admin-only estimate
+  mutation route. This avoids adding artificial hooks to production commerce or
+  provider adapter code.
+- Scenario decision:
+  assert not only that the price-change dialog appears, but also that no fake
+  provider order exists before the user confirms. This proves the pre-flight
+  confirmation gates order creation rather than merely appearing in parallel.
+- Selector decision:
+  the scenario does not use `ordering.preflight-dialog` because `PuDialog`
+  cannot inherit that `data-testid` reliably. It asserts visible dialog text and
+  the `继续下单` action instead.
diff --git a/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts b/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
index cfc9a49fd..c9471d431 100644
--- a/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
+++ b/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
@@ -1,19 +1,6 @@
 import assert from "node:assert/strict";
 import { randomUUID } from "node:crypto";
 import type { Page } from "playwright";
-import { installScenarioUserSession } from "../_infra/browser/session";
-import { installDeterministicShareSidecarStubs } from "../_infra/browser/share-sidecars";
-import { withScenarioPage } from "../_infra/browser/browser";
-import { getScenarioEnvironment } from "../_infra/environment/scenario-environment";
-import { scenario } from "../_infra/scenario/scenario";
-import {
-  bindScenarioWeChatOpenId,
-  configurePRStatus,
-} from "../../../apps/backend/tests/pr-core/_kit/actions/system-state";
-import {
-  givenUser,
-  type ScenarioUser,
-} from "../../../apps/backend/tests/pr-core/_kit/builders/users";
 import {
   createOffer,
   createPlacement,
@@ -27,6 +14,19 @@ import type { PRRoute } from "../../../apps/backend/src/entities/partner-request
 import { PartnerRepository } from "../../../apps/backend/src/repositories/PartnerRepository";
 import { PartnerRequestRepository } from "../../../apps/backend/src/repositories/PartnerRequestRepository";
 import { ProductSkuRepository } from "../../../apps/backend/src/repositories/ProductSkuRepository";
+import {
+  bindScenarioWeChatOpenId,
+  configurePRStatus,
+} from "../../../apps/backend/tests/pr-core/_kit/actions/system-state";
+import {
+  givenUser,
+  type ScenarioUser,
+} from "../../../apps/backend/tests/pr-core/_kit/builders/users";
+import { withScenarioPage } from "../_infra/browser/browser";
+import { installScenarioUserSession } from "../_infra/browser/session";
+import { installDeterministicShareSidecarStubs } from "../_infra/browser/share-sidecars";
+import { getScenarioEnvironment } from "../_infra/environment/scenario-environment";
+import { scenario } from "../_infra/scenario/scenario";
 
 const partnerRepo = new PartnerRepository();
 const partnerRequestRepo = new PartnerRequestRepository();
@@ -93,6 +93,30 @@ async function armFakeCaocaoCreateFailure(): Promise<void> {
   });
 }
 
+async function updateFakeCaocaoEstimate(input: {
+  carType: string;
+  estimateAmountFen: number;
+}): Promise<void> {
+  const { fakeCaocao } = getScenarioEnvironment();
+  const response = await fetch(new URL("/__fake_caocao/estimates", fakeCaocao.origin), {
+    body: JSON.stringify(input),
+    headers: {
+      "Content-Type": "application/json",
+    },
+    method: "POST",
+  });
+  assert.equal(response.ok, true);
+}
+
+async function readFakeCaocaoOrderCount(): Promise<number> {
+  const { fakeCaocao } = getScenarioEnvironment();
+  const response = await fetch(new URL("/__fake_caocao/state", fakeCaocao.origin));
+  assert.equal(response.ok, true);
+  const body = (await response.json()) as { orders?: unknown[] };
+  assert.ok(Array.isArray(body.orders));
+  return body.orders.length;
+}
+
 async function givenRideHailingPr(input: {
   creator: ScenarioUser;
   title: string;
@@ -275,10 +299,7 @@ async function assertLocatorTextMatches(input: {
   assert.match(actual, input.pattern, input.label);
 }
 
-async function openRideHailingOrderingFromPr(input: {
-  page: Page;
-  prId: number;
-}): Promise<void> {
+async function openRideHailingOrderingFromPr(input: { page: Page; prId: number }): Promise<void> {
   await input.page.goto(`/pr/${input.prId}`);
   await input.page.getByTestId("pr-detail.commerce-placement.open").click();
   await input.page.getByTestId("ordering.ride-hailing.page").waitFor({
@@ -366,87 +387,134 @@ async function assertRideHailingOrderDetail(page: Page): Promise<void> {
   });
 }
 
-scenario(
-  "commerce_ride_hailing_ordering_reaches_order_detail",
-  async (ctx) => {
-    await resetFakeCaocao();
-    const creator = await givenUser("system-ride-hailing-creator", {
-      phoneNumber: "13800138000",
-    });
-    await bindScenarioWeChatOpenId({
-      openId: "fake-openid-commerce-ride-hailing-creator",
-      user: creator,
-    });
-    const pr = await givenRideHailingPr({
-      creator,
-      title: "System ride hailing partner request",
-    });
-    await configurePRStatus({ pr, status: "READY" });
-    await registerScenarioPaymentProvider();
-    const placement = await givenRideHailingOrderingPlacement();
+scenario("commerce_ride_hailing_ordering_reaches_order_detail", async (ctx) => {
+  await resetFakeCaocao();
+  const creator = await givenUser("system-ride-hailing-creator", {
+    phoneNumber: "13800138000",
+  });
+  await bindScenarioWeChatOpenId({
+    openId: "fake-openid-commerce-ride-hailing-creator",
+    user: creator,
+  });
+  const pr = await givenRideHailingPr({
+    creator,
+    title: "System ride hailing partner request",
+  });
+  await configurePRStatus({ pr, status: "READY" });
+  await registerScenarioPaymentProvider();
+  const placement = await givenRideHailingOrderingPlacement();
 
-    ctx.record("creatorUserId", creator.user.id);
-    ctx.record("prId", pr.id);
-    ctx.record("placementId", placement.placementId);
-    ctx.record("providerInstanceId", placement.providerInstanceId);
+  ctx.record("creatorUserId", creator.user.id);
+  ctx.record("prId", pr.id);
+  ctx.record("placementId", placement.placementId);
+  ctx.record("providerInstanceId", placement.providerInstanceId);
 
-    let orderPath: string | null = null;
+  let orderPath: string | null = null;
 
-    await withScenarioPage(async (page) => {
-      await installScenarioUserSession(page, creator);
-      await installDeterministicShareSidecarStubs(page);
+  await withScenarioPage(async (page) => {
+    await installScenarioUserSession(page, creator);
+    await installDeterministicShareSidecarStubs(page);
 
-      await openRideHailingOrderingFromPr({ page, prId: pr.id });
-      await assertRideHailingOrderingContent(page);
-      await selectPremierVehicle(page);
+    await openRideHailingOrderingFromPr({ page, prId: pr.id });
+    await assertRideHailingOrderingContent(page);
+    await selectPremierVehicle(page);
 
-      await page.getByTestId("ordering.ride-hailing.create-order").click();
-      await assertRideHailingOrderDetail(page);
-      orderPath = new URL(page.url()).pathname;
+    await page.getByTestId("ordering.ride-hailing.create-order").click();
+    await assertRideHailingOrderDetail(page);
+    orderPath = new URL(page.url()).pathname;
+  });
+
+  const createdOrderPath = orderPath;
+  assert.match(createdOrderPath ?? "", /^\/orders\/[0-9a-f-]+$/);
+});
+
+scenario("commerce_ride_hailing_provider_create_failure_stays_on_ordering_page", async (ctx) => {
+  await resetFakeCaocao();
+  await armFakeCaocaoCreateFailure();
+  const creator = await givenUser("system-ride-hailing-failure-creator", {
+    phoneNumber: "13800138000",
+  });
+  const pr = await givenRideHailingPr({
+    creator,
+    title: "System ride hailing provider failure PR",
+  });
+  await configurePRStatus({ pr, status: "READY" });
+  await registerScenarioPaymentProvider();
+  const placement = await givenRideHailingOrderingPlacement();
+
+  ctx.record("creatorUserId", creator.user.id);
+  ctx.record("prId", pr.id);
+  ctx.record("placementId", placement.placementId);
+
+  await withScenarioPage(async (page) => {
+    await installScenarioUserSession(page, creator);
+    await installDeterministicShareSidecarStubs(page);
+
+    await openRideHailingOrderingFromPr({ page, prId: pr.id });
+    await selectPremierVehicle(page);
+    await page.getByTestId("ordering.ride-hailing.create-order").click();
+    await page.getByTestId("ordering.ride-hailing.page").waitFor({
+      state: "visible",
+      timeout: 10_000,
     });
+    await assertLocatorTextIncludes({
+      actual: page.getByTestId("ordering.notice.blocked").textContent(),
+      expected: "Fake Caocao create failed",
+      label: "RideHailing create failure notice",
+    });
+    assert.equal(new URL(page.url()).pathname, "/order/new");
+  });
+});
 
-    const createdOrderPath = orderPath;
-    assert.match(createdOrderPath ?? "", /^\/orders\/[0-9a-f-]+$/);
-  },
-);
-
-scenario(
-  "commerce_ride_hailing_provider_create_failure_stays_on_ordering_page",
-  async (ctx) => {
-    await resetFakeCaocao();
-    await armFakeCaocaoCreateFailure();
-    const creator = await givenUser("system-ride-hailing-failure-creator", {
-      phoneNumber: "13800138000",
+scenario("commerce_ride_hailing_preflight_price_change_requires_confirmation", async (ctx) => {
+  await resetFakeCaocao();
+  const creator = await givenUser("system-ride-hailing-price-change-creator", {
+    phoneNumber: "13800138002",
+  });
+  await bindScenarioWeChatOpenId({
+    openId: "fake-openid-commerce-ride-hailing-price-change-creator",
+    user: creator,
+  });
+  const pr = await givenRideHailingPr({
+    creator,
+    title: "System ride hailing price change PR",
+  });
+  await configurePRStatus({ pr, status: "READY" });
+  await registerScenarioPaymentProvider();
+  const placement = await givenRideHailingOrderingPlacement();
+
+  ctx.record("creatorUserId", creator.user.id);
+  ctx.record("prId", pr.id);
+  ctx.record("placementId", placement.placementId);
+  ctx.record("providerInstanceId", placement.providerInstanceId);
+
+  await withScenarioPage(async (page) => {
+    await installScenarioUserSession(page, creator);
+    await installDeterministicShareSidecarStubs(page);
+
+    await openRideHailingOrderingFromPr({ page, prId: pr.id });
+    await assertRideHailingOrderingContent(page);
+    await selectPremierVehicle(page);
+
+    await updateFakeCaocaoEstimate({
+      carType: "PREMIER",
+      estimateAmountFen: 6100,
     });
-    const pr = await givenRideHailingPr({
-      creator,
-      title: "System ride hailing provider failure PR",
+
+    await page.getByTestId("ordering.ride-hailing.create-order").click();
+    await page.getByText("价格发生变化").waitFor({
+      state: "visible",
+      timeout: 10_000,
     });
-    await configurePRStatus({ pr, status: "READY" });
-    await registerScenarioPaymentProvider();
-    const placement = await givenRideHailingOrderingPlacement();
-
-    ctx.record("creatorUserId", creator.user.id);
-    ctx.record("prId", pr.id);
-    ctx.record("placementId", placement.placementId);
-
-    await withScenarioPage(async (page) => {
-      await installScenarioUserSession(page, creator);
-      await installDeterministicShareSidecarStubs(page);
-
-      await openRideHailingOrderingFromPr({ page, prId: pr.id });
-      await selectPremierVehicle(page);
-      await page.getByTestId("ordering.ride-hailing.create-order").click();
-      await page.getByTestId("ordering.ride-hailing.page").waitFor({
-        state: "visible",
-        timeout: 10_000,
-      });
-      await assertLocatorTextIncludes({
-        actual: page.getByTestId("ordering.notice.blocked").textContent(),
-        expected: "Fake Caocao create failed",
-        label: "RideHailing create failure notice",
-      });
-      assert.equal(new URL(page.url()).pathname, "/order/new");
+    await assertLocatorTextIncludes({
+      actual: page.locator("body").textContent(),
+      expected: "当前价格已从 ￥52.00 更新为 ￥61.00。是否继续下单？",
+      label: "RideHailing price-change preflight dialog",
     });
-  },
-);
+    assert.equal(await readFakeCaocaoOrderCount(), 0);
+
+    await page.getByRole("button", { name: "继续下单" }).click();
+    await assertRideHailingOrderDetail(page);
+    assert.equal(await readFakeCaocaoOrderCount(), 1);
+  });
+});

From 4130ff6a83fb7a1d0cb14f34eb20ac130b51c2a7 Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Sun, 21 Jun 2026 14:39:35 +0800
Subject: [PATCH 29/94] chore(frontend): update design-web to 0.4.6

- upgrade @partner-up-dev/design-web and lockfile entry to 0.4.6

- migrate PuPageHeader density usage to the size API

- record package changelog, migration notes, and validation evidence
---
 apps/frontend/package.json                    |  2 +-
 .../ui/ordering/OrderingPageShell.vue         |  2 +-
 pnpm-lock.yaml                                | 16 ++--
 tasks/design-web-0.4.6-update/README.md       | 90 +++++++++++++++++++
 4 files changed, 102 insertions(+), 8 deletions(-)
 create mode 100644 tasks/design-web-0.4.6-update/README.md

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index c63c8020c..8f4436727 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -13,7 +13,7 @@
     "lint:tokens:strict": "node ./scripts/check-token-governance.mjs --strict"
   },
   "dependencies": {
-    "@partner-up-dev/design-web": "0.4.5",
+    "@partner-up-dev/design-web": "0.4.6",
     "@tanstack/vue-query": "^5.60.0",
     "@unhead/vue": "^2.1.2",
     "@vee-validate/zod": "^4.15.1",
diff --git a/apps/frontend/src/domains/commerce/ui/ordering/OrderingPageShell.vue b/apps/frontend/src/domains/commerce/ui/ordering/OrderingPageShell.vue
index dd07b2096..eb8ce2ba5 100644
--- a/apps/frontend/src/domains/commerce/ui/ordering/OrderingPageShell.vue
+++ b/apps/frontend/src/domains/commerce/ui/ordering/OrderingPageShell.vue
@@ -9,7 +9,7 @@
       <PuPageHeader
         :title="title"
         :subtitle="subtitle"
-        density="compact"
+        size="sm"
         show-back
         @back="handleBack"
       >
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 72831b23f..9efe11848 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -134,8 +134,8 @@ importers:
   apps/frontend:
     dependencies:
       '@partner-up-dev/design-web':
-        specifier: 0.4.5
-        version: 0.4.5(sass@1.97.3)(unocss@66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0)))(vue@3.5.35(typescript@6.0.3))
+        specifier: 0.4.6
+        version: 0.4.6(sass@1.97.3)(unocss@66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0)))(vue@3.5.35(typescript@6.0.3))
       '@tanstack/vue-query':
         specifier: ^5.60.0
         version: 5.92.9(vue@3.5.35(typescript@6.0.3))
@@ -1522,12 +1522,15 @@ packages:
     resolution: {integrity: sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==}
     engines: {node: '>= 10.0.0'}
 
-  '@partner-up-dev/design-web@0.4.5':
-    resolution: {integrity: sha512-9wrOo5WAtY9ipz3aJEZhqDb4eCptrXsqI8zBzUcMhJzV1gzKm1Rvb+/xxa2RfKTjQaW+rPhVWlioxBvSWAGr5A==, tarball: https://npm.pkg.github.com/download/@partner-up-dev/design-web/0.4.5/3437e056abf405083c51d45db997d186d8715d25}
+  '@partner-up-dev/design-web@0.4.6':
+    resolution: {integrity: sha512-kPt0gK/WTr9lowK90SRYqgmKL7nGc0rNSy/9AQi1W/VnONFFVR/jp8rRGj8PDc4gT4wKhiwoTg5mfIsjPrp2pQ==, tarball: https://npm.pkg.github.com/download/@partner-up-dev/design-web/0.4.6/0081f4d6cc8f88554775455fc510bd64e689881a}
     peerDependencies:
       sass: ^1.94.2
       unocss: ^66.6.8
       vue: ^3.5.34
+    peerDependenciesMeta:
+      unocss:
+        optional: true
 
   '@polka/url@1.0.0-next.29':
     resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
@@ -3960,11 +3963,12 @@ snapshots:
       '@parcel/watcher-win32-x64': 2.5.6
     optional: true
 
-  '@partner-up-dev/design-web@0.4.5(sass@1.97.3)(unocss@66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0)))(vue@3.5.35(typescript@6.0.3))':
+  '@partner-up-dev/design-web@0.4.6(sass@1.97.3)(unocss@66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0)))(vue@3.5.35(typescript@6.0.3))':
     dependencies:
       sass: 1.97.3
-      unocss: 66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0))
       vue: 3.5.35(typescript@6.0.3)
+    optionalDependencies:
+      unocss: 66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0))
 
   '@polka/url@1.0.0-next.29': {}
 
diff --git a/tasks/design-web-0.4.6-update/README.md b/tasks/design-web-0.4.6-update/README.md
new file mode 100644
index 000000000..0ebabf6ab
--- /dev/null
+++ b/tasks/design-web-0.4.6-update/README.md
@@ -0,0 +1,90 @@
+# design-web 0.4.6 Update
+
+## Objective & Hypothesis
+
+Complete the consumer-side follow-up after upgrading
+`@partner-up-dev/design-web` from `0.4.5` to `0.4.6`.
+
+Hypothesis: the package upgrade is installed and the package-shipped agent
+skill is valid. App migration is limited to stale `PuPageHeader` props because
+the app does not currently consume `PuCheckbox`, `PuCheckboxGroup`, or
+`PuFloatPanel`.
+
+## Guardrails Touched
+
+- Constraint route: package public API changed while product behavior should
+  remain unchanged.
+- Frontend unit: `apps/frontend/package.json`, `pnpm-lock.yaml`, and design-web
+  consumers.
+- Package skill guidance: use package public APIs and package-shipped
+  `skills/design-web`; do not edit local agent skill copies.
+- Dirty worktree guardrail: unrelated ordering/backend work exists and must not
+  be overwritten.
+
+## Evidence Sources
+
+- `apps/frontend/node_modules/@partner-up-dev/design-web/CHANGELOG.md`
+- `apps/frontend/node_modules/@partner-up-dev/design-web/MIGRATION.md`
+- `apps/frontend/node_modules/@partner-up-dev/design-web/skills/design-web`
+- Local package diff between pnpm package directories:
+  - `@partner-up-dev/design-web@0.4.5`
+  - `@partner-up-dev/design-web@0.4.6`
+
+## Changelog Findings
+
+`0.4.6` patch changes:
+
+- Reset web `PuCheckbox` and remove `PuCheckboxGroup`.
+- Simplify `PuPageHeader` into a neutral two-row page header with fixed main
+  row and optional meta row.
+- Add `usePuSelect`.
+- Add `PuFloatPanel`.
+
+Migration guide requires action only when consumers use the old checkbox group
+or old checkbox contract.
+
+## PuPageHeader Migration
+
+`PuPageHeader` in `0.4.6`:
+
+- Keeps: `title`, `subtitle`, `titleAs`, `showBack`, `backLabel`, `size`,
+  `variant`, `actions`, `back-icon`, `meta`, `subtitle`, and `title`.
+- Removes: `layout`, `bordered`, body/default slot, and container variants
+  `soft`, `outline`, `solid`.
+- Uses `variant="plain"` for no separator and `variant="line"` for bottom
+  separation.
+- Remains neutral; there is no `tone`.
+
+App scan found no `layout`, `bordered`, or default slot use on `PuPageHeader`.
+One stale prop was found and migrated:
+
+- `apps/frontend/src/domains/commerce/ui/ordering/OrderingPageShell.vue`
+  changed `density="compact"` to `size="sm"`.
+
+## Other Component Impact
+
+- No `PuCheckbox`, `PuCheckboxGroup`, or `PuFloatPanel` usage found in
+  `apps/frontend/src`.
+- No app migration is required for `usePuSelect` because it is a new additive
+  composable.
+
+## Verification
+
+Passed:
+
+- `pnpm dlx @tanstack/intent@latest list --json`
+  - discovered local `@partner-up-dev/design-web@0.4.6`
+- `pnpm dlx @tanstack/intent@latest load @partner-up-dev/design-web#design-web`
+- `pnpm dlx @tanstack/intent@latest validate apps/frontend/node_modules/@partner-up-dev/design-web/skills/design-web`
+  - `Validated 1 skill files — all passed`
+- `pnpm check:type:frontend`
+- `pnpm check:lint:frontend`
+
+Note: `pnpm check:lint:frontend` exits successfully, but the report-only naming
+audit still reports an unrelated weak-name finding for
+`RideHailingOrderingContent.vue`.
+
+## Next Step
+
+Review the package upgrade and the single `PuPageHeader` consumer migration
+alongside the active ordering worktree changes before committing.

From bbb474134e3d8a7b79ce4082b8ae8394299efce0 Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Sun, 21 Jun 2026 14:40:40 +0800
Subject: [PATCH 30/94] fix(ride-hailing): move evaluation to submit preflight

- load RideHailing quote options from ordering content
- source footer price from content summaries
- keep evaluation as submit-time create-order preflight
---
 .../src/controllers/commerce.controller.ts    |  26 +++
 .../domains/trade/use-cases/create-order.ts   |  43 +++-
 .../use-cases/ride-hailing-ordering-flow.ts   |  11 +-
 .../commerce/model/ordering-content.ts        |  22 ++
 .../domains/commerce/queries/useCommerce.ts   |  42 +++-
 .../ui/ordering/RentalOrderingForm.vue        |  30 +++
 .../ordering/RideHailingOrderingContent.vue   | 145 ++++++++-----
 .../src/pages/OrderingFromPlacementPage.vue   | 192 +++++++++++++-----
 docs/20-product-tdd/ecommerce-contracts.md    |  18 +-
 9 files changed, 410 insertions(+), 119 deletions(-)

diff --git a/apps/backend/src/controllers/commerce.controller.ts b/apps/backend/src/controllers/commerce.controller.ts
index 99be08a59..c91ca41c6 100644
--- a/apps/backend/src/controllers/commerce.controller.ts
+++ b/apps/backend/src/controllers/commerce.controller.ts
@@ -9,6 +9,7 @@ import {
   createOrderCommand,
   evaluateOrdering,
   getCommerceOrderDetail,
+  quoteRideHailingOrderingOptions,
   simulateRentalBookingConfirmation,
 } from "../domains/trade";
 import {
@@ -140,6 +141,13 @@ const genericEvaluateOrderingCommandSchema = genericCreateOrderCommandSchema.ext
   ]),
 });
 
+const rideHailingOrderingOptionsCommandSchema = z.object({
+  source: z.object({
+    offerId: z.number().int().positive(),
+  }),
+  route: rideHailingRouteSnapshotSchema,
+});
+
 const readClientId = (headerValue: string | undefined): string => {
   const clientId = headerValue?.trim();
   if (!clientId) {
@@ -174,6 +182,12 @@ type CommerceRouteSchema = {
       Awaited<ReturnType<typeof evaluateOrdering>>
     >;
   };
+  "/ordering/ride-hailing/options": {
+    $post: JsonEndpoint<
+      { json: z.infer<typeof rideHailingOrderingOptionsCommandSchema> },
+      Awaited<ReturnType<typeof quoteRideHailingOrderingOptions>>
+    >;
+  };
   "/orders": {
     $post: JsonEndpoint<
       { json: z.infer<typeof genericCreateOrderCommandSchema> },
@@ -243,6 +257,18 @@ export const commerceRoute: Hono<AuthEnv, CommerceRouteSchema> = app
       return c.json(result);
     },
   )
+  .post(
+    "/ordering/ride-hailing/options",
+    zValidator("json", rideHailingOrderingOptionsCommandSchema),
+    async (c) => {
+      const payload = c.req.valid("json");
+      const result = await quoteRideHailingOrderingOptions({
+        offerId: payload.source.offerId,
+        route: payload.route,
+      });
+      return c.json(result);
+    },
+  )
   .post(
     "/orders",
     zValidator("json", genericCreateOrderCommandSchema),
diff --git a/apps/backend/src/domains/trade/use-cases/create-order.ts b/apps/backend/src/domains/trade/use-cases/create-order.ts
index 9f2e1b72f..9d51a6fa4 100644
--- a/apps/backend/src/domains/trade/use-cases/create-order.ts
+++ b/apps/backend/src/domains/trade/use-cases/create-order.ts
@@ -158,10 +158,6 @@ export type OrderingEvaluation = {
     } | null;
     explanations: PriceExplanation[];
   };
-  rideHailing?: {
-    quoteExpiresAt: string;
-    options: RideQuoteOption[];
-  } | null;
 };
 
 type SelectedSkuContext = {
@@ -460,6 +456,15 @@ function validateRideExtras(
   return null;
 }
 
+const rideQuoteBaseAmountFen = (quote: RideQuoteOption): number => {
+  if (typeof quote.estimateAmountFen === "number") return quote.estimateAmountFen;
+  if (typeof quote.quoteAmountFen === "number") return quote.quoteAmountFen;
+  return throwHttpProblem({
+    status: 409,
+    detail: "RideHailing quote amount is missing",
+  });
+};
+
 async function resolveRentalSelection(input: {
   command: CreateOrderCommandInput;
   offer: Offer;
@@ -541,7 +546,7 @@ async function resolveRideSelection(input: {
       },
     ],
     orderContext: {
-      quoteTotalFen: quote.quoteAmountFen,
+      quoteTotalFen: rideQuoteBaseAmountFen(quote),
     },
   });
 
@@ -1012,7 +1017,6 @@ export async function evaluateOrdering(
           ...selected.pricingSnapshot.orderLevelExplanations,
         ],
       },
-      rideHailing: null,
     };
   }
 
@@ -1060,7 +1064,7 @@ export async function evaluateOrdering(
             },
           ],
           orderContext: {
-            quoteTotalFen: selectedQuote.quoteAmountFen,
+            quoteTotalFen: rideQuoteBaseAmountFen(selectedQuote),
           },
         })
       : null;
@@ -1095,10 +1099,27 @@ export async function evaluateOrdering(
         ...(pricingSnapshot?.orderLevelExplanations ?? []),
       ],
     },
-    rideHailing: {
-      quoteExpiresAt: new Date(Date.now() + 2 * 60 * 1000).toISOString(),
-      options,
-    },
+  };
+}
+
+export async function quoteRideHailingOrderingOptions(input: {
+  offerId: number;
+  route: RideHailingRouteSnapshot;
+}) {
+  const offer = await resolveOffer(input.offerId);
+  if (offer.productType !== "RIDE_HAILING") {
+    return throwHttpProblem({
+      status: 409,
+      detail: "Offer is not a RideHailing offer",
+    });
+  }
+
+  return {
+    quoteExpiresAt: new Date(Date.now() + 2 * 60 * 1000).toISOString(),
+    options: await evaluateRideOptions({
+      offer,
+      route: input.route,
+    }),
   };
 }
 
diff --git a/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts b/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts
index 0a5a35e87..0f4d6066c 100644
--- a/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts
+++ b/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts
@@ -8,7 +8,7 @@ import { ProductSpuRepository } from "../../../repositories/ProductSpuRepository
 import { RideHailingOrderRepository } from "../../../repositories/RideHailingOrderRepository";
 import { RideHailingProviderInstanceRepository } from "../../../repositories/RideHailingProviderInstanceRepository";
 import { throwHttpProblem } from "../../../lib/problem-details";
-import type { RideHailingSkuFacts } from "../../merchandising";
+import type { PriceExplanation, RideHailingSkuFacts } from "../../merchandising";
 import { createRideHailingProviderPort } from "../../ride-hailing";
 import type {
   RideHailingDriverSnapshot,
@@ -41,6 +41,7 @@ export type RideQuoteOption = {
   disabledReason: string | null;
   estimateAmountFen: number | null;
   quoteAmountFen: number | null;
+  priceExplanations: PriceExplanation[];
 };
 
 const isRecord = (value: unknown): value is Record<string, unknown> =>
@@ -116,6 +117,7 @@ async function quoteSku(input: {
       disabledReason: "Provider instance is not active",
       estimateAmountFen: null,
       quoteAmountFen: null,
+      priceExplanations: [],
     };
   }
 
@@ -147,6 +149,7 @@ async function quoteSku(input: {
         error instanceof Error ? error.message : "Provider quote failed",
       estimateAmountFen: null,
       quoteAmountFen: null,
+      priceExplanations: [],
     };
   }
   const estimateAmountFen =
@@ -187,6 +190,12 @@ async function quoteSku(input: {
     disabledReason: null,
     estimateAmountFen,
     quoteAmountFen: pricingSnapshot.totalFen,
+    priceExplanations: [
+      ...pricingSnapshot.itemBreakdowns.flatMap(
+        (breakdown) => breakdown.explanations,
+      ),
+      ...pricingSnapshot.orderLevelExplanations,
+    ],
   };
 }
 
diff --git a/apps/frontend/src/domains/commerce/model/ordering-content.ts b/apps/frontend/src/domains/commerce/model/ordering-content.ts
index 70a142abf..18ce54a11 100644
--- a/apps/frontend/src/domains/commerce/model/ordering-content.ts
+++ b/apps/frontend/src/domains/commerce/model/ordering-content.ts
@@ -14,6 +14,28 @@ export type OrderingContentOutput = {
   productTypedExtraProperties: CreateOrderInput["productTypedExtraProperties"];
 };
 
+export type OrderingContentPriceExplanation = {
+  sourceId: string;
+  label: string;
+  description: string;
+  deltaFen: number | null;
+  resultAmountFen?: number | null;
+};
+
+export type OrderingContentPriceSummary = {
+  currency: "CNY";
+  totalFen: number | null;
+  range?: {
+    minFen: number | null;
+    maxFen: number | null;
+  } | null;
+  explanations: OrderingContentPriceExplanation[];
+};
+
+export type OrderingContentSummary = {
+  price: OrderingContentPriceSummary | null;
+};
+
 export type BoundOrderParticipant = {
   userId: string;
   displayName: string;
diff --git a/apps/frontend/src/domains/commerce/queries/useCommerce.ts b/apps/frontend/src/domains/commerce/queries/useCommerce.ts
index 916e915d8..bfb1a5adf 100644
--- a/apps/frontend/src/domains/commerce/queries/useCommerce.ts
+++ b/apps/frontend/src/domains/commerce/queries/useCommerce.ts
@@ -19,6 +19,18 @@ export type OrderingEvaluationInput = Parameters<
   CommerceApi["ordering"]["evaluate"]["$post"]
 >[0]["json"];
 
+export type OrderingEvaluationResponse = InferResponseType<
+  CommerceApi["ordering"]["evaluate"]["$post"]
+>;
+
+export type RideHailingQuoteOptionsInput = Parameters<
+  CommerceApi["ordering"]["ride-hailing"]["options"]["$post"]
+>[0]["json"];
+
+export type RideHailingQuoteOptionsResponse = InferResponseType<
+  CommerceApi["ordering"]["ride-hailing"]["options"]["$post"]
+>;
+
 export type CreateOrderInput = Parameters<CommerceApi["orders"]["$post"]>[0]["json"];
 
 export type CommerceOrderDetailResponse = InferResponseType<
@@ -116,13 +128,41 @@ export const useEvaluateOrdering = () =>
           },
         },
       );
-      return readJsonOrThrow<InferResponseType<CommerceApi["ordering"]["evaluate"]["$post"]>>(
+      return readJsonOrThrow<OrderingEvaluationResponse>(
         response,
         "Failed to evaluate ordering",
       );
     },
   });
 
+export const useRideHailingQuoteOptions = (
+  input: Ref<RideHailingQuoteOptionsInput | null>,
+) =>
+  useQuery<RideHailingQuoteOptionsResponse>({
+    queryKey: computed(
+      () => ["commerce", "ordering", "ride-hailing", "options", input.value] as const,
+    ),
+    queryFn: async () => {
+      if (input.value === null) {
+        throw new Error("Missing RideHailing quote input");
+      }
+
+      const response = await client.api.commerce.ordering["ride-hailing"].options.$post(
+        { json: input.value },
+        {
+          init: {
+            credentials: "include",
+          },
+        },
+      );
+      return readJsonOrThrow<RideHailingQuoteOptionsResponse>(
+        response,
+        "Failed to load ride hailing quote options",
+      );
+    },
+    enabled: () => input.value !== null,
+  });
+
 export const useCreateOrder = () => {
   const queryClient = useQueryClient();
 
diff --git a/apps/frontend/src/domains/commerce/ui/ordering/RentalOrderingForm.vue b/apps/frontend/src/domains/commerce/ui/ordering/RentalOrderingForm.vue
index dbcf14031..35d21434a 100644
--- a/apps/frontend/src/domains/commerce/ui/ordering/RentalOrderingForm.vue
+++ b/apps/frontend/src/domains/commerce/ui/ordering/RentalOrderingForm.vue
@@ -151,6 +151,7 @@ import { PuFormItem } from "@partner-up-dev/design-web";
 import type {
   OrderingContentInput,
   OrderingContentOutput,
+  OrderingContentSummary,
 } from "@/domains/commerce/model/ordering-content";
 import {
   readBindingValue,
@@ -167,6 +168,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   "update:output": [value: OrderingContentOutput | null];
+  "update:summary": [value: OrderingContentSummary];
 }>();
 
 const selectedSkuId = ref<number | null>(null);
@@ -269,6 +271,29 @@ const selectedCancellationSummary = computed(
   () => selectedSku.value?.cancellationPolicySummary ?? [],
 );
 
+const summary = computed<OrderingContentSummary>(() => {
+  const sku = selectedSku.value;
+  const amountFen = sku ? rentalSkuAmountFen(sku) : null;
+  return {
+    price: sku
+      ? {
+          currency: "CNY",
+          totalFen: amountFen,
+          range: null,
+          explanations: [
+            {
+              sourceId: `sku:${sku.skuId}`,
+              label: sku.name,
+              description: "固定总价",
+              deltaFen: amountFen,
+              resultAmountFen: amountFen,
+            },
+          ],
+        }
+      : null,
+  };
+});
+
 const output = computed<OrderingContentOutput | null>(() => {
   if (!rentalOffer.value || !selectedSku.value) return null;
   if (!serviceStartAt.value || !serviceEndAt.value) return null;
@@ -355,6 +380,11 @@ watch(output, (next) => emit("update:output", next), {
   immediate: true,
   deep: true,
 });
+
+watch(summary, (next) => emit("update:summary", next), {
+  immediate: true,
+  deep: true,
+});
 </script>
 
 <style scoped lang="scss">
diff --git a/apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue b/apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue
index b42db5e0a..8d58df11b 100644
--- a/apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue
+++ b/apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue
@@ -27,7 +27,7 @@
             :price-label="formatFen(option.quoteAmountFen)"
             :selectable="option.selectable"
             :selected="option.skuId === selectedRideSkuId"
-            :disabled-reason="null"
+            :disabled-reason="option.disabledReason"
             @select="selectedRideSkuId = option.skuId"
           />
         </div>
@@ -43,7 +43,7 @@
           data-testid="ordering.ride-hailing.riders.open"
           @click="ridersDrawerOpen = true"
         >
-          <span>同乘人</span>
+          <span data-testid="ordering.ride-hailing.riders">同乘人</span>
           <strong>{{ riderSummary }}</strong>
           <i class="i-mdi-chevron-right" aria-hidden="true"></i>
         </button>
@@ -139,13 +139,19 @@ import type {
   BoundOrderParticipant,
   OrderingContentInput,
   OrderingContentOutput,
+  OrderingContentSummary,
 } from "@/domains/commerce/model/ordering-content";
 import {
   isBindingLocked,
   readBindingValue,
   readBoundOrderParticipants,
 } from "@/domains/commerce/model/ordering-content";
-import type { CreateOrderInput } from "@/domains/commerce/queries/useCommerce";
+import {
+  type CreateOrderInput,
+  type RideHailingQuoteOptionsInput,
+  type RideHailingQuoteOptionsResponse,
+  useRideHailingQuoteOptions,
+} from "@/domains/commerce/queries/useCommerce";
 import type { PickedLocation } from "@/domains/location/model/location-picker";
 import LocationPickerPanel from "@/domains/location/ui/LocationPickerPanel.vue";
 import {
@@ -161,17 +167,7 @@ import RouteMap from "@/domains/route/ui/RouteMap.vue";
 import type { MapFitPadding } from "@/shared/map/types";
 import RideHailingSkuCard from "./RideHailingSkuCard.vue";
 
-export type RideVehicleOption = {
-  skuId: number;
-  spuId: number;
-  name: string;
-  displayName: string;
-  selectable: boolean;
-  selected: boolean;
-  disabledReason: string | null;
-  estimateAmountFen: number | null;
-  quoteAmountFen: number | null;
-};
+export type RideVehicleOption = RideHailingQuoteOptionsResponse["options"][number];
 
 type RideRouteSnapshot = Extract<
   CreateOrderInput["productTypedExtraProperties"],
@@ -181,12 +177,11 @@ type RideOffer = OrderingContentInput["offerDetail"];
 
 const props = defineProps<{
   input: OrderingContentInput;
-  evaluatedOptions: RideVehicleOption[];
 }>();
 
 const emit = defineEmits<{
   "update:output": [value: OrderingContentOutput | null];
-  "evaluation-output-change": [value: OrderingContentOutput | null];
+  "update:summary": [value: OrderingContentSummary];
 }>();
 
 const selectedRideSkuId = ref<number | null>(null);
@@ -327,6 +322,25 @@ const routePointDrawerTitle = computed(() => {
   return "修改途经点";
 });
 
+type RidePlaceSnapshot = {
+  name: string;
+  address?: string | null;
+  latitude: number;
+  longitude: number;
+};
+
+const toRidePlaceSnapshot = (point: RoutePoint): RidePlaceSnapshot | null => {
+  const coordinate = pickRoutePointCoordinate(point);
+  const name = point.name.trim();
+  if (!coordinate || name.length === 0) return null;
+  return {
+    name,
+    address: point.full_address,
+    latitude: coordinate.lat,
+    longitude: coordinate.lng,
+  };
+};
+
 const rideRouteForSubmit = computed<RideRouteSnapshot | null>(() => {
   const route = routeForMap.value;
   if (!route || route.length < 2) return rideRoute.value;
@@ -358,26 +372,56 @@ const rideBaseOptions = computed<RideVehicleOption[]>(
         skuId: sku.skuId,
         spuId: sku.spuId,
         name: sku.name,
+        providerName: "服务商",
+        carTypeName: sku.name,
         displayName: sku.name,
+        providerVehicleTypeCode: "",
+        providerInstanceId: "",
         selectable: true,
         selected: false,
         disabledReason: null,
         estimateAmountFen: null,
         quoteAmountFen: null,
+        priceExplanations: [],
       })),
     ) ?? [],
 );
 
+const quoteOptionsInput = computed<RideHailingQuoteOptionsInput | null>(() => {
+  const route = rideRouteForSubmit.value;
+  if (!rideOffer.value || !route) return null;
+  return {
+    source: {
+      offerId: props.input.source.offerId,
+    },
+    route,
+  };
+});
+
+const quoteOptionsQuery = useRideHailingQuoteOptions(quoteOptionsInput);
+
 const rideQuoteOptions = computed<RideVehicleOption[]>(() =>
-  props.evaluatedOptions.length > 0 ? props.evaluatedOptions : rideBaseOptions.value,
+  quoteOptionsQuery.data.value?.options ?? rideBaseOptions.value,
+);
+
+const hasQuotedOptions = computed(
+  () => (quoteOptionsQuery.data.value?.options.length ?? 0) > 0,
 );
 
 const visibleRideQuoteOptions = computed<RideVehicleOption[]>(() =>
-  props.evaluatedOptions.length > 0
+  hasQuotedOptions.value
     ? rideQuoteOptions.value.filter((option) => option.selectable)
     : rideQuoteOptions.value,
 );
 
+const selectedRideQuoteOption = computed<RideVehicleOption | null>(() => {
+  if (selectedRideSkuId.value === null) return null;
+  return (
+    rideQuoteOptions.value.find((option) => option.skuId === selectedRideSkuId.value) ??
+    null
+  );
+});
+
 const rideDepartureLabel = computed(() => {
   const departureAt = editableDepartureAt.value;
   if (!departureAt) return "现在出发";
@@ -388,11 +432,19 @@ const editableDepartureInput = computed(() =>
   editableDepartureAt.value ? toDateTimeLocalValue(editableDepartureAt.value) : "",
 );
 
-const evaluationOutput = computed<OrderingContentOutput | null>(() => {
+const output = computed<OrderingContentOutput | null>(() => {
   if (!rideOffer.value || selectedRideSkuId.value === null || !rideRouteForSubmit.value) {
     return null;
   }
+  const selectedOption = selectedRideQuoteOption.value;
+  if (
+    !selectedOption?.selectable ||
+    typeof selectedOption.quoteAmountFen !== "number"
+  ) {
+    return null;
+  }
   const phone = rideContactPhone.value.trim();
+  if (!phone) return null;
   if (rideRiders.value.length === 0) return null;
   return {
     participants: rideRiders.value.map((rider) => ({
@@ -413,16 +465,30 @@ const evaluationOutput = computed<OrderingContentOutput | null>(() => {
   };
 });
 
-const output = computed<OrderingContentOutput | null>(() => {
-  const next = evaluationOutput.value;
-  if (!next) return null;
-  if (
-    "contactPhone" in next.productTypedExtraProperties &&
-    next.productTypedExtraProperties.contactPhone.trim().length > 0
-  ) {
-    return next;
-  }
-  return null;
+const summary = computed<OrderingContentSummary>(() => {
+  const selectedOption = selectedRideQuoteOption.value;
+  const selectablePrices = rideQuoteOptions.value
+    .filter((option) => option.selectable)
+    .map((option) => option.quoteAmountFen)
+    .filter((value): value is number => typeof value === "number");
+  const range =
+    selectablePrices.length > 0
+      ? {
+          minFen: Math.min(...selectablePrices),
+          maxFen: Math.max(...selectablePrices),
+        }
+      : null;
+  return {
+    price: {
+      currency: "CNY",
+      totalFen:
+        typeof selectedOption?.quoteAmountFen === "number"
+          ? selectedOption.quoteAmountFen
+          : null,
+      range,
+      explanations: selectedOption?.priceExplanations ?? [],
+    },
+  };
 });
 
 const formatFen = (amountFen: number | null | undefined): string => {
@@ -433,25 +499,6 @@ const formatFen = (amountFen: number | null | undefined): string => {
   }).format(amountFen / 100);
 };
 
-type RidePlaceSnapshot = {
-  name: string;
-  address?: string | null;
-  latitude: number;
-  longitude: number;
-};
-
-const toRidePlaceSnapshot = (point: RoutePoint): RidePlaceSnapshot | null => {
-  const coordinate = pickRoutePointCoordinate(point);
-  const name = point.name.trim();
-  if (!coordinate || name.length === 0) return null;
-  return {
-    name,
-    address: point.full_address,
-    latitude: coordinate.lat,
-    longitude: coordinate.lng,
-  };
-};
-
 const openRoutePointDrawer = (index: number) => {
   if (!routeEditable.value) return;
   selectedRoutePointIndex.value = index;
@@ -543,7 +590,7 @@ watch(output, (next) => emit("update:output", next), {
   deep: true,
 });
 
-watch(evaluationOutput, (next) => emit("evaluation-output-change", next), {
+watch(summary, (next) => emit("update:summary", next), {
   immediate: true,
   deep: true,
 });
diff --git a/apps/frontend/src/pages/OrderingFromPlacementPage.vue b/apps/frontend/src/pages/OrderingFromPlacementPage.vue
index bd8d32b93..fb6e7f0d5 100644
--- a/apps/frontend/src/pages/OrderingFromPlacementPage.vue
+++ b/apps/frontend/src/pages/OrderingFromPlacementPage.vue
@@ -29,15 +29,15 @@
       <RentalOrderingForm
         v-else-if="rentalOrdering && orderingContentInput"
         :input="orderingContentInput"
-        @update:output="handleRentalOutputUpdate"
+        @update:output="contentOutput = $event"
+        @update:summary="contentSummary = $event"
       />
 
       <RideHailingOrderingContent
         v-else-if="rideOrdering && orderingContentInput"
         :input="orderingContentInput"
-        :evaluated-options="rideEvaluatedOptions"
-        @evaluation-output-change="evaluationContentOutput = $event"
         @update:output="contentOutput = $event"
+        @update:summary="contentSummary = $event"
       />
     </div>
 
@@ -46,7 +46,7 @@
         v-if="rentalOrdering"
         :amount-label="priceDisplayLabel"
         :can-create="canCreate"
-        :loading="createOrderMutation.isPending.value"
+        :loading="createOrderMutation.isPending.value || evaluateMutation.isPending.value"
         :price-detail-enabled="true"
         price-testid="ordering.rental.price"
         price-detail-testid="ordering.rental.price-detail.toggle"
@@ -59,7 +59,7 @@
         v-if="rideOrdering"
         :amount-label="priceDisplayLabel"
         :can-create="canCreate"
-        :loading="createOrderMutation.isPending.value"
+        :loading="createOrderMutation.isPending.value || evaluateMutation.isPending.value"
         :price-detail-enabled="true"
         price-testid="ordering.ride-hailing.quote-price-range"
         price-detail-testid="ordering.ride-hailing.price-detail.toggle"
@@ -91,17 +91,34 @@
         @close="priceDetailOpen = false"
       />
     </template>
+
+    <PuDialog
+      :open="preflightDialog.open"
+      :title="preflightDialog.title"
+      :description="preflightDialog.description"
+      :confirm-text="preflightDialog.confirmText"
+      cancel-text="取消"
+      :show-cancel="preflightDialog.showCancel"
+      :show-confirm="true"
+      :confirm-loading="createOrderMutation.isPending.value"
+      :tone="preflightDialog.kind === 'price-change' ? 'warning' : 'info'"
+      data-testid="ordering.preflight-dialog"
+      @close="closePreflightDialog"
+      @cancel="closePreflightDialog"
+      @confirm="handlePreflightDialogConfirm"
+    />
   </OrderingPageShell>
 </template>
 
 <script setup lang="ts">
-import { PuButton, PuInlineNotice } from "@partner-up-dev/design-web";
+import { PuButton, PuDialog, PuInlineNotice } from "@partner-up-dev/design-web";
 import { computed, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
 import type {
   OrderingContentInput,
   OrderingContentOutput,
+  OrderingContentSummary,
 } from "@/domains/commerce/model/ordering-content";
 import {
   ORDERING_ENTRY_STORAGE_KEY,
@@ -109,6 +126,7 @@ import {
 } from "@/domains/commerce/model/ordering-entry-storage";
 import {
   type CreateOrderInput,
+  type OrderingEvaluationResponse,
   useCreateOrder,
   useEvaluateOrdering,
 } from "@/domains/commerce/queries/useCommerce";
@@ -117,11 +135,22 @@ import OrderingFooterActionBar from "@/domains/commerce/ui/ordering/OrderingFoot
 import OrderingPageShell from "@/domains/commerce/ui/ordering/OrderingPageShell.vue";
 import OrderingPriceDetailDrawer from "@/domains/commerce/ui/ordering/OrderingPriceDetailDrawer.vue";
 import RentalOrderingForm from "@/domains/commerce/ui/ordering/RentalOrderingForm.vue";
-import RideHailingOrderingContent, {
-  type RideVehicleOption,
-} from "@/domains/commerce/ui/ordering/RideHailingOrderingContent.vue";
+import RideHailingOrderingContent from "@/domains/commerce/ui/ordering/RideHailingOrderingContent.vue";
 
 type OrderingOfferDetail = OrderingEntryPayload["offerDetail"];
+type PreflightDialogKind = "blocked" | "price-change";
+type PreflightDialogState = {
+  open: boolean;
+  kind: PreflightDialogKind;
+  title: string;
+  description: string;
+  confirmText: string;
+  showCancel: boolean;
+  pendingInput: CreateOrderInput | null;
+};
+type OrderingActionProblem = NonNullable<
+  OrderingEvaluationResponse["actions"]["create_order"]["problem"]
+>;
 
 const { t } = useI18n();
 const router = useRouter();
@@ -169,8 +198,17 @@ const orderingPageTestId = computed(() =>
 );
 
 const contentOutput = ref<OrderingContentOutput | null>(null);
-const evaluationContentOutput = ref<OrderingContentOutput | null>(null);
+const contentSummary = ref<OrderingContentSummary>({ price: null });
 const priceDetailOpen = ref(false);
+const preflightDialog = ref<PreflightDialogState>({
+  open: false,
+  kind: "blocked",
+  title: "",
+  description: "",
+  confirmText: "我知道了",
+  showCancel: false,
+  pendingInput: null,
+});
 
 const orderingContentInput = computed<OrderingContentInput | null>(() => {
   const entry = orderingEntry.value;
@@ -199,38 +237,23 @@ const createOrderInput = computed<CreateOrderInput | null>(() =>
   buildOrderInput(contentOutput.value),
 );
 
-const evaluationOrderInput = computed<CreateOrderInput | null>(() =>
-  buildOrderInput(evaluationContentOutput.value),
-);
-
-const rideEvaluatedOptions = computed<RideVehicleOption[]>(
-  () => evaluateMutation.data.value?.rideHailing?.options ?? [],
-);
-
-const availability = computed(() => evaluateMutation.data.value?.actions.create_order ?? null);
-
 const createOrderErrorMessage = computed(() =>
   createOrderMutation.error.value instanceof Error ? createOrderMutation.error.value.message : null,
 );
 
-const availabilityMessage = computed(() => {
-  if (!createOrderInput.value) return t("ordering.completeInfoNotice");
-  if (evaluateMutation.isPending.value) return t("ordering.evaluatingNotice");
-  return availability.value?.problem?.detail ?? null;
-});
-
 const canCreate = computed(
   () =>
     !!createOrderInput.value &&
     !createOrderMutation.isPending.value &&
-    !evaluateMutation.isPending.value &&
-    availability.value?.allowed === true,
+    !evaluateMutation.isPending.value,
 );
 
-const priceExplanations = computed(() => evaluateMutation.data.value?.price.explanations ?? []);
+const priceSummary = computed(() => contentSummary.value.price);
+
+const priceExplanations = computed(() => priceSummary.value?.explanations ?? []);
 
 const priceDisplayLabel = computed(() => {
-  const range = evaluateMutation.data.value?.price.range ?? null;
+  const range = priceSummary.value?.range ?? null;
   const rangePrices = range
     ? [range.minFen, range.maxFen].filter((value): value is number => typeof value === "number")
     : [];
@@ -239,12 +262,10 @@ const priceDisplayLabel = computed(() => {
     const max = Math.max(...rangePrices);
     return min === max ? formatPriceAmount(min) : `${formatPriceAmount(min)}~${formatYuan(max)}`;
   }
-  return formatPriceAmount(evaluateMutation.data.value?.price.totalFen ?? null);
+  return formatPriceAmount(priceSummary.value?.totalFen ?? null);
 });
 
-const floatingNoticeMessage = computed(
-  () => createOrderErrorMessage.value ?? availabilityMessage.value,
-);
+const floatingNoticeMessage = computed(() => createOrderErrorMessage.value);
 
 const floatingNoticeTone = computed<"warning" | "error">(() =>
   createOrderErrorMessage.value ? "error" : "warning",
@@ -254,11 +275,6 @@ const backFallbackTo = computed(() =>
   orderingEntry.value?.prId ? { path: `/pr/${orderingEntry.value.prId}` } : { path: "/" },
 );
 
-const handleRentalOutputUpdate = (next: OrderingContentOutput | null): void => {
-  contentOutput.value = next;
-  evaluationContentOutput.value = next;
-};
-
 const formatYuan = (amountFen: number): string => (amountFen / 100).toFixed(2);
 
 const formatPriceAmount = (amountFen: number | null | undefined): string =>
@@ -266,12 +282,66 @@ const formatPriceAmount = (amountFen: number | null | undefined): string =>
     ? `￥${formatYuan(amountFen)}`
     : t("ordering.summary.currencyPending");
 
+const openBlockedDialog = (problem: Partial<OrderingActionProblem>): void => {
+  preflightDialog.value = {
+    open: true,
+    kind: "blocked",
+    title: problem.title ?? "暂不能创建订单",
+    description: problem.detail ?? "请稍后重试。",
+    confirmText: "我知道了",
+    showCancel: false,
+    pendingInput: null,
+  };
+};
+
+const openPriceChangeDialog = (input: CreateOrderInput, evaluation: OrderingEvaluationResponse): void => {
+  preflightDialog.value = {
+    open: true,
+    kind: "price-change",
+    title: "价格发生变化",
+    description: `当前价格已从 ${formatPriceAmount(
+      priceSummary.value?.totalFen ?? null,
+    )} 更新为 ${formatPriceAmount(evaluation.price.totalFen)}。是否继续下单？`,
+    confirmText: "继续下单",
+    showCancel: true,
+    pendingInput: input,
+  };
+};
+
+const closePreflightDialog = (): void => {
+  preflightDialog.value = {
+    ...preflightDialog.value,
+    open: false,
+    pendingInput: null,
+  };
+};
+
+const shouldConfirmPriceChange = (evaluation: OrderingEvaluationResponse): boolean => {
+  const displayedTotalFen = priceSummary.value?.totalFen ?? null;
+  const evaluatedTotalFen = evaluation.price.totalFen;
+  return (
+    typeof displayedTotalFen === "number" &&
+    typeof evaluatedTotalFen === "number" &&
+    displayedTotalFen !== evaluatedTotalFen
+  );
+};
+
+const createOrderAfterPreflight = async (input: CreateOrderInput): Promise<void> => {
+  try {
+    const created = await createOrderMutation.mutateAsync(input);
+    await router.push({ path: `/orders/${created.orderId}` });
+  } catch {
+    closePreflightDialog();
+  }
+};
+
 watch(
   () => orderingEntry.value?.offerDetail.productType,
   () => {
     contentOutput.value = null;
-    evaluationContentOutput.value = null;
+    contentSummary.value = { price: null };
     priceDetailOpen.value = false;
+    closePreflightDialog();
     createOrderMutation.reset();
     evaluateMutation.reset();
   },
@@ -287,21 +357,41 @@ watch(
   { deep: true },
 );
 
-watch(
-  evaluationOrderInput,
-  (next) => {
-    if (!next) return;
-    evaluateMutation.mutate(next);
-  },
-  { deep: true },
-);
-
 const submitOrder = async (): Promise<void> => {
   const input = createOrderInput.value;
   if (!input) return;
 
-  const created = await createOrderMutation.mutateAsync(input);
-  await router.push({ path: `/orders/${created.orderId}` });
+  try {
+    const evaluation = await evaluateMutation.mutateAsync(input);
+    const createOrderDecision = evaluation.actions.create_order;
+    if (!createOrderDecision.allowed) {
+      openBlockedDialog(createOrderDecision.problem);
+      return;
+    }
+    if (shouldConfirmPriceChange(evaluation)) {
+      openPriceChangeDialog(input, evaluation);
+      return;
+    }
+    await createOrderAfterPreflight(input);
+  } catch (error) {
+    openBlockedDialog({
+      title: "暂不能创建订单",
+      detail: error instanceof Error ? error.message : "请稍后重试。",
+    });
+  }
+};
+
+const handlePreflightDialogConfirm = async (): Promise<void> => {
+  if (preflightDialog.value.kind !== "price-change") {
+    closePreflightDialog();
+    return;
+  }
+  const input = preflightDialog.value.pendingInput;
+  if (!input) {
+    closePreflightDialog();
+    return;
+  }
+  await createOrderAfterPreflight(input);
 };
 </script>
 
diff --git a/docs/20-product-tdd/ecommerce-contracts.md b/docs/20-product-tdd/ecommerce-contracts.md
index ccfe96a71..07cc082c2 100644
--- a/docs/20-product-tdd/ecommerce-contracts.md
+++ b/docs/20-product-tdd/ecommerce-contracts.md
@@ -253,19 +253,25 @@ Pricing ownership:
 - Ordering Content is selected from `offerDetail.productType`.
 - Bindings only prefill and lock client fields; they are not submitted as
   authoritative server input.
-- Ordering Content receives `{ source, offerDetail, bindings }` and emits only
-  `participants`, selected SKU `items`, and
-  `productTypedExtraProperties`.
+- Ordering Content receives `{ source, offerDetail, bindings }` and emits:
+  command fields (`participants`, selected SKU `items`,
+  `productTypedExtraProperties`) plus local display summary for the footer price
+  and price detail.
 - Ordering Content does not receive `prId`, does not know Placement, and does
   not evaluate or submit orders.
-- BottomActionBar creates both evaluation and creation commands:
+- Product-specific Ordering Content owns product-specific list/quote state. For
+  RideHailing, SKU quote options are loaded by Ordering Content through
+  `POST /api/commerce/ordering/ride-hailing/options`; changing the selected SKU
+  must not refresh the options list by itself.
+- Ordering Page creates evaluation and creation commands on submit:
   `{ source: { offerId }, prId?, participants, items, productTypedExtraProperties }`.
 - This command is not coupled to Placement or `matchingContext`.
 - command `items` are `{ skuId, quantity }`; backend resolves SKU -> SPU and
   verifies the SKU belongs to the Offer.
 - Ordering evaluation uses the same command shape through
-  `POST /api/commerce/ordering/evaluate`. It returns price total/range/detail
-  and `actions.create_order` in the action-preflight shape.
+  `POST /api/commerce/ordering/evaluate`. It is submit-time preflight only,
+  returns price total/range/detail and `actions.create_order` in the
+  action-preflight shape, and does not return product-specific option lists.
 - Ordering creation uses `POST /api/commerce/orders`. It re-reads
   authoritative Offer/SPU/SKU truth and performs the transactional validations
   again.

From 42eb1a615f2a0d86b2017a8ff34f27ba751a64ec Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Mon, 22 Jun 2026 11:14:20 +0800
Subject: [PATCH 31/94] feat(ride-hailing): support choice-set ordering
 candidates

- add SKU presentation and choice-set order item foundation

- resolve ride provider binding through choice-set resolution

- migrate ordering vehicle selection to multi-select card and float panel
---
 ...079_ride_hailing_choice_set_foundation.sql |  10 +
 .../admin-commerce-management.controller.ts   | 126 ++--
 .../src/controllers/commerce.controller.ts    | 132 ++--
 .../update-admin-commerce-product-sku.ts      |   9 +-
 .../domains/merchandising/model/product.ts    |  28 +-
 .../use-cases/create-product-sku.ts           |   9 +-
 .../use-cases/get-ordering-offer-detail.ts    |   6 +-
 .../handle-caocao-order-status-callback.ts    |  35 +-
 apps/backend/src/domains/trade/model/order.ts |  92 ++-
 .../domains/trade/model/ride-hailing-order.ts |   3 -
 .../src/domains/trade/services/order-items.ts |  74 +-
 .../trade/services/order-persistence.ts       |   2 -
 .../services/pricing-application.test.ts      |   7 +
 .../rental-termination-pricing.test.ts        |   7 +
 .../domains/trade/use-cases/create-order.ts   | 424 ++++++++---
 .../use-cases/ride-hailing-ordering-flow.ts   |  79 +-
 apps/backend/src/entities/product-sku.ts      |  19 +-
 .../src/entities/ride-hailing-order.ts        |  32 +-
 .../src/repositories/TradeOrderRepository.ts  |  28 +-
 .../caocao-callback-route.scenario.test.ts    | 118 ++-
 ...-hailing-order-foundation.scenario.test.ts |  76 +-
 .../product-management/skuEditorModel.ts      |  59 +-
 .../queries/useAdminCommerce.ts               | 119 ++-
 .../sections/AdminCommerceSkuEditor.vue       |   6 +-
 .../ordering/RideHailingOrderingContent.vue   | 210 ++++--
 .../ui/ordering/RideHailingSkuCard.vue        | 224 ++++--
 .../src/pages/CommerceOrderDetailPage.vue     |  60 +-
 .../src/pages/OrderingFromPlacementPage.vue   |  49 +-
 docs/20-product-tdd/ecommerce-contracts.md    |  50 +-
 tasks/ride-hailing-ui-fixes/change-log.md     | 171 +++++
 .../choice-set-sku-float-panel-plan.md        | 696 ++++++++++++++++++
 tasks/ride-hailing-ui-fixes/control.md        | 110 ++-
 tasks/ride-hailing-ui-fixes/discussion-log.md | 364 +++++++++
 .../ride-hailing-ui-fixes/sequence-diagram.md | 153 ++++
 .../ride-hailing-ordering.scenario.test.ts    |  38 +-
 35 files changed, 2838 insertions(+), 787 deletions(-)
 create mode 100644 apps/backend/drizzle/0079_ride_hailing_choice_set_foundation.sql
 create mode 100644 tasks/ride-hailing-ui-fixes/choice-set-sku-float-panel-plan.md
 create mode 100644 tasks/ride-hailing-ui-fixes/sequence-diagram.md

diff --git a/apps/backend/drizzle/0079_ride_hailing_choice_set_foundation.sql b/apps/backend/drizzle/0079_ride_hailing_choice_set_foundation.sql
new file mode 100644
index 000000000..c2f245cf6
--- /dev/null
+++ b/apps/backend/drizzle/0079_ride_hailing_choice_set_foundation.sql
@@ -0,0 +1,10 @@
+alter table "product_skus"
+  add column "presentation" jsonb not null default
+    '{"heroImageAssetIds":[],"detailImageAssetIds":[],"sellingPoints":[],"parameterGroups":[],"noticeBlocks":[]}'::jsonb;
+
+drop index if exists "ride_hailing_orders_provider_instance_idx";
+drop index if exists "ride_hailing_orders_provider_order_idx";
+
+alter table "ride_hailing_orders"
+  drop column "provider_instance_id",
+  drop column "provider_order_id";
diff --git a/apps/backend/src/controllers/admin-commerce-management.controller.ts b/apps/backend/src/controllers/admin-commerce-management.controller.ts
index cd62d953e..55f0fe6f3 100644
--- a/apps/backend/src/controllers/admin-commerce-management.controller.ts
+++ b/apps/backend/src/controllers/admin-commerce-management.controller.ts
@@ -29,10 +29,7 @@ import {
   updateAdminCommerceProductSku,
   updateAdminCommerceProductSpu,
 } from "../domains/admin-commerce-management";
-import {
-  adminAuthMiddleware,
-  type AdminAuthEnv,
-} from "../auth/admin-middleware";
+import { adminAuthMiddleware, type AdminAuthEnv } from "../auth/admin-middleware";
 
 const app = new Hono<AdminAuthEnv>();
 
@@ -83,9 +80,17 @@ const pricingRuleSchema = z.object({
 });
 
 const salesPolicySchema = z.object({
-  skuSelectionPolicy: z.object({
-    type: z.literal("EXACTLY_ONE"),
-  }),
+  skuSelectionPolicy: z.union([
+    z.object({
+      type: z.literal("EXACTLY_ONE"),
+    }),
+    z.object({
+      type: z.literal("CHOICE_SET"),
+      min: z.number().int().positive(),
+      max: z.number().int().positive().nullable().optional(),
+      resolvesTo: z.literal(1),
+    }),
+  ]),
   quantityPolicy: z.union([
     z.object({
       type: z.literal("FIXED"),
@@ -102,9 +107,7 @@ const salesPolicySchema = z.object({
   ]),
 });
 
-const timeOfDaySchema = z
-  .string()
-  .regex(/^([01]\d|2[0-3]):[0-5]\d$/);
+const timeOfDaySchema = z.string().regex(/^([01]\d|2[0-3]):[0-5]\d$/);
 
 const rentalServiceWindowSchema = z.object({
   weekdays: z.array(z.number().int().min(0).max(6)).min(1),
@@ -188,6 +191,7 @@ const productSkuInputSchema = z.object({
   name: z.string().trim().min(1),
   status: catalogStatusSchema,
   sortOrder: z.number().int(),
+  presentation: presentationSchema.optional(),
   facts: skuFactsSchema,
   pricingModel: pricingModelSchema,
   cancellationPolicyRef: z
@@ -280,14 +284,9 @@ const rentalCancellationDecisionInputSchema = z.object({
   reason: z.string().trim().nullable().optional(),
 });
 
-const toDate = (value: string | null | undefined): Date | null =>
-  value ? new Date(value) : null;
+const toDate = (value: string | null | undefined): Date | null => (value ? new Date(value) : null);
 
-type JsonEndpoint<
-  Input,
-  Output,
-  Status extends number = 200,
-> = {
+type JsonEndpoint<Input, Output, Status extends number = 200> = {
   input: Input;
   output: Output;
   outputFormat: "json";
@@ -304,10 +303,7 @@ type UuidParam<Key extends string> = {
 
 type AdminCommerceManagementSchema = {
   "/commerce/products/workspace": {
-    $get: JsonEndpoint<
-      EmptyInput,
-      Awaited<ReturnType<typeof getAdminCommerceProductWorkspace>>
-    >;
+    $get: JsonEndpoint<EmptyInput, Awaited<ReturnType<typeof getAdminCommerceProductWorkspace>>>;
   };
   "/commerce/products/spus": {
     $post: JsonEndpoint<{ json: unknown }, Awaited<ReturnType<typeof createProductSpu>>>;
@@ -355,10 +351,7 @@ type AdminCommerceManagementSchema = {
     >;
   };
   "/commerce/orders-bills/workspace": {
-    $get: JsonEndpoint<
-      EmptyInput,
-      Awaited<ReturnType<typeof getAdminCommerceOrderBillWorkspace>>
-    >;
+    $get: JsonEndpoint<EmptyInput, Awaited<ReturnType<typeof getAdminCommerceOrderBillWorkspace>>>;
   };
   "/commerce/fulfillments/workspace": {
     $get: JsonEndpoint<
@@ -398,24 +391,17 @@ type AdminCommerceManagementSchema = {
   };
 };
 
-export const adminCommerceManagementRoute: Hono<
-  AdminAuthEnv,
-  AdminCommerceManagementSchema
-> = app
+export const adminCommerceManagementRoute: Hono<AdminAuthEnv, AdminCommerceManagementSchema> = app
   .use("*", adminAuthMiddleware)
   .get("/commerce/products/workspace", async (c) => {
     const result = await getAdminCommerceProductWorkspace();
     return c.json(result);
   })
-  .post(
-    "/commerce/products/spus",
-    zValidator("json", productSpuInputSchema),
-    async (c) => {
-      const payload = c.req.valid("json");
-      const result = await createProductSpu(payload as CreateProductSpuInput);
-      return c.json(result);
-    },
-  )
+  .post("/commerce/products/spus", zValidator("json", productSpuInputSchema), async (c) => {
+    const payload = c.req.valid("json");
+    const result = await createProductSpu(payload as CreateProductSpuInput);
+    return c.json(result);
+  })
   .patch(
     "/commerce/products/spus/:spuId",
     zValidator("param", spuIdParamSchema),
@@ -430,18 +416,14 @@ export const adminCommerceManagementRoute: Hono<
       return c.json(result);
     },
   )
-  .post(
-    "/commerce/products/skus",
-    zValidator("json", productSkuInputSchema),
-    async (c) => {
-      const payload = c.req.valid("json");
-      const result = await createProductSku({
-        ...payload,
-        cancellationPolicyRef: payload.cancellationPolicyRef ?? null,
-      } as CreateProductSkuInput);
-      return c.json(result);
-    },
-  )
+  .post("/commerce/products/skus", zValidator("json", productSkuInputSchema), async (c) => {
+    const payload = c.req.valid("json");
+    const result = await createProductSku({
+      ...payload,
+      cancellationPolicyRef: payload.cancellationPolicyRef ?? null,
+    } as CreateProductSkuInput);
+    return c.json(result);
+  })
   .patch(
     "/commerce/products/skus/:skuId",
     zValidator("param", skuIdParamSchema),
@@ -485,19 +467,15 @@ export const adminCommerceManagementRoute: Hono<
     const result = await getAdminCommercePlacementOfferWorkspace();
     return c.json(result);
   })
-  .post(
-    "/commerce/offers",
-    zValidator("json", offerInputSchema),
-    async (c) => {
-      const payload = c.req.valid("json");
-      const result = await createOffer({
-        ...payload,
-        startsAt: toDate(payload.startsAt),
-        endsAt: toDate(payload.endsAt),
-      } as CreateOfferInput);
-      return c.json(result);
-    },
-  )
+  .post("/commerce/offers", zValidator("json", offerInputSchema), async (c) => {
+    const payload = c.req.valid("json");
+    const result = await createOffer({
+      ...payload,
+      startsAt: toDate(payload.startsAt),
+      endsAt: toDate(payload.endsAt),
+    } as CreateOfferInput);
+    return c.json(result);
+  })
   .patch(
     "/commerce/offers/:offerId",
     zValidator("param", offerIdParamSchema),
@@ -514,19 +492,15 @@ export const adminCommerceManagementRoute: Hono<
       return c.json(result);
     },
   )
-  .post(
-    "/commerce/placements",
-    zValidator("json", placementInputSchema),
-    async (c) => {
-      const payload = c.req.valid("json");
-      const result = await createPlacement({
-        ...payload,
-        effectiveFrom: toDate(payload.effectiveFrom),
-        effectiveTo: toDate(payload.effectiveTo),
-      } as CreatePlacementInput);
-      return c.json(result);
-    },
-  )
+  .post("/commerce/placements", zValidator("json", placementInputSchema), async (c) => {
+    const payload = c.req.valid("json");
+    const result = await createPlacement({
+      ...payload,
+      effectiveFrom: toDate(payload.effectiveFrom),
+      effectiveTo: toDate(payload.effectiveTo),
+    } as CreatePlacementInput);
+    return c.json(result);
+  })
   .patch(
     "/commerce/placements/:placementId",
     zValidator("param", placementIdParamSchema),
diff --git a/apps/backend/src/controllers/commerce.controller.ts b/apps/backend/src/controllers/commerce.controller.ts
index c91ca41c6..68ba99bd1 100644
--- a/apps/backend/src/controllers/commerce.controller.ts
+++ b/apps/backend/src/controllers/commerce.controller.ts
@@ -45,18 +45,29 @@ const orderParticipantSchema = z.object({
   userId: z.string().uuid(),
 });
 
+const fixedOrderItemCommandSchema = z.object({
+  kind: z.literal("FIXED").optional(),
+  skuId: z.number().int().positive(),
+  quantity: z.number().int().positive().nullable().optional(),
+});
+
+const rideHailingChoiceSetOrderItemCommandSchema = z.object({
+  kind: z.literal("CHOICE_SET"),
+  productType: z.literal("RIDE_HAILING"),
+  candidateSkuIds: z.array(z.number().int().positive()).min(1),
+  quantity: z.literal(1).nullable().optional(),
+});
+
+const orderItemCommandSchema = z.union([
+  fixedOrderItemCommandSchema,
+  rideHailingChoiceSetOrderItemCommandSchema,
+]);
+
 const rentalOrderingCommandSchema = z.object({
   offerId: z.number().int().positive(),
   prId: z.number().int().positive().nullable().optional(),
   participants: z.array(orderParticipantSchema).min(1),
-  items: z
-    .array(
-      z.object({
-        skuId: z.number().int().positive(),
-        quantity: z.number().int().positive().nullable().optional(),
-      }),
-    )
-    .min(1),
+  items: z.array(fixedOrderItemCommandSchema).min(1),
   extraProperties: z.object({
     serviceStartAt: z.string().datetime({ offset: true }),
     serviceEndAt: z.string().datetime({ offset: true }),
@@ -93,14 +104,7 @@ const rideHailingOrderingCommandSchema = z.object({
   offerId: z.number().int().positive(),
   prId: z.number().int().positive().nullable().optional(),
   participants: z.array(orderParticipantSchema).min(1),
-  items: z
-    .array(
-      z.object({
-        skuId: z.number().int().positive(),
-        quantity: z.number().int().positive().nullable().optional(),
-      }),
-    )
-    .min(1),
+  items: z.array(rideHailingChoiceSetOrderItemCommandSchema).min(1),
   extraProperties: z.object({
     route: rideHailingRouteSnapshotSchema,
     departureAt: z.string().datetime({ offset: true }).nullable().optional(),
@@ -115,14 +119,7 @@ const genericCreateOrderCommandSchema = z.object({
   }),
   prId: z.number().int().positive().nullable().optional(),
   participants: z.array(orderParticipantSchema).min(1),
-  items: z
-    .array(
-      z.object({
-        skuId: z.number().int().positive(),
-        quantity: z.number().int().positive().nullable().optional(),
-      }),
-    )
-    .min(1),
+  items: z.array(orderItemCommandSchema).min(1),
   productTypedExtraProperties: z.union([
     rentalOrderingCommandSchema.shape.extraProperties,
     rideHailingOrderingCommandSchema.shape.extraProperties,
@@ -159,11 +156,7 @@ const readClientId = (headerValue: string | undefined): string => {
   return clientId;
 };
 
-type JsonEndpoint<
-  Input,
-  Output,
-  Status extends number = 200,
-> = {
+type JsonEndpoint<Input, Output, Status extends number = 200> = {
   input: Input;
   output: Output;
   outputFormat: "json";
@@ -196,25 +189,16 @@ type CommerceRouteSchema = {
     >;
   };
   "/orders/:orderId": {
-    $get: JsonEndpoint<
-      UuidParam<"orderId">,
-      Awaited<ReturnType<typeof getCommerceOrderDetail>>
-    >;
+    $get: JsonEndpoint<UuidParam<"orderId">, Awaited<ReturnType<typeof getCommerceOrderDetail>>>;
   };
   "/orders/:orderId/bill": {
-    $get: JsonEndpoint<
-      UuidParam<"orderId">,
-      Awaited<ReturnType<typeof getBillDetailByOrderId>>
-    >;
+    $get: JsonEndpoint<UuidParam<"orderId">, Awaited<ReturnType<typeof getBillDetailByOrderId>>>;
   };
   "/bills/:billId": {
     $get: JsonEndpoint<UuidParam<"billId">, Awaited<ReturnType<typeof getBillDetail>>>;
   };
   "/bill-lines/:billLineId/checkout": {
-    $get: JsonEndpoint<
-      UuidParam<"billLineId">,
-      Awaited<ReturnType<typeof getPaymentCheckout>>
-    >;
+    $get: JsonEndpoint<UuidParam<"billLineId">, Awaited<ReturnType<typeof getPaymentCheckout>>>;
   };
   "/bill-lines/:billLineId/charges": {
     $post: JsonEndpoint<
@@ -269,19 +253,15 @@ export const commerceRoute: Hono<AuthEnv, CommerceRouteSchema> = app
       return c.json(result);
     },
   )
-  .post(
-    "/orders",
-    zValidator("json", genericCreateOrderCommandSchema),
-    async (c) => {
-      const payload = c.req.valid("json");
-      const userId = requireAuthenticatedUserId(c);
-      const result = await createOrderCommand({
-        ...payload,
-        createdBy: userId,
-      });
-      return c.json(result, 201);
-    },
-  )
+  .post("/orders", zValidator("json", genericCreateOrderCommandSchema), async (c) => {
+    const payload = c.req.valid("json");
+    const userId = requireAuthenticatedUserId(c);
+    const result = await createOrderCommand({
+      ...payload,
+      createdBy: userId,
+    });
+    return c.json(result, 201);
+  })
   .get("/orders/:orderId", zValidator("param", orderIdParamSchema), async (c) => {
     const { orderId } = c.req.valid("param");
     const auth = c.get("auth");
@@ -291,19 +271,15 @@ export const commerceRoute: Hono<AuthEnv, CommerceRouteSchema> = app
     });
     return c.json(result);
   })
-  .get(
-    "/orders/:orderId/bill",
-    zValidator("param", orderIdParamSchema),
-    async (c) => {
-      const { orderId } = c.req.valid("param");
-      const auth = c.get("auth");
-      const result = await getBillDetailByOrderId({
-        orderId,
-        viewerUserId: auth.userId,
-      });
-      return c.json(result);
-    },
-  )
+  .get("/orders/:orderId/bill", zValidator("param", orderIdParamSchema), async (c) => {
+    const { orderId } = c.req.valid("param");
+    const auth = c.get("auth");
+    const result = await getBillDetailByOrderId({
+      orderId,
+      viewerUserId: auth.userId,
+    });
+    return c.json(result);
+  })
   .get("/bills/:billId", zValidator("param", billIdParamSchema), async (c) => {
     const { billId } = c.req.valid("param");
     const auth = c.get("auth");
@@ -353,19 +329,15 @@ export const commerceRoute: Hono<AuthEnv, CommerceRouteSchema> = app
       return c.json(result);
     },
   )
-  .post(
-    "/orders/:orderId/cancel-rental",
-    zValidator("param", orderIdParamSchema),
-    async (c) => {
-      const { orderId } = c.req.valid("param");
-      const userId = requireAuthenticatedUserId(c);
-      const result = await cancelRentalOrderFromOrderDetail({
-        orderId,
-        actorUserId: userId,
-      });
-      return c.json(result);
-    },
-  )
+  .post("/orders/:orderId/cancel-rental", zValidator("param", orderIdParamSchema), async (c) => {
+    const { orderId } = c.req.valid("param");
+    const userId = requireAuthenticatedUserId(c);
+    const result = await cancelRentalOrderFromOrderDetail({
+      orderId,
+      actorUserId: userId,
+    });
+    return c.json(result);
+  })
   .post(
     "/orders/:orderId/mock-rental-booking-confirmation",
     zValidator("param", orderIdParamSchema),
diff --git a/apps/backend/src/domains/admin-commerce-management/use-cases/update-admin-commerce-product-sku.ts b/apps/backend/src/domains/admin-commerce-management/use-cases/update-admin-commerce-product-sku.ts
index dd151ab87..1141944ae 100644
--- a/apps/backend/src/domains/admin-commerce-management/use-cases/update-admin-commerce-product-sku.ts
+++ b/apps/backend/src/domains/admin-commerce-management/use-cases/update-admin-commerce-product-sku.ts
@@ -5,9 +5,10 @@ import { ProductSpuRepository } from "../../../repositories/ProductSpuRepository
 import type {
   CatalogStatus,
   PricingModel,
+  ProductPresentation,
   SkuFacts,
 } from "../../merchandising";
-import { assertProductSkuContract } from "../../merchandising";
+import { assertProductSkuContract, createEmptyProductPresentation } from "../../merchandising";
 
 const productSpuRepo = new ProductSpuRepository();
 const productSkuRepo = new ProductSkuRepository();
@@ -17,6 +18,7 @@ export type UpdateAdminCommerceProductSkuInput = {
   name: string;
   status: CatalogStatus;
   sortOrder: number;
+  presentation?: ProductPresentation;
   facts: SkuFacts;
   pricingModel: PricingModel;
   cancellationPolicyRef?: {
@@ -25,9 +27,7 @@ export type UpdateAdminCommerceProductSkuInput = {
   } | null;
 };
 
-export async function updateAdminCommerceProductSku(
-  input: UpdateAdminCommerceProductSkuInput,
-) {
+export async function updateAdminCommerceProductSku(input: UpdateAdminCommerceProductSkuInput) {
   const sku = await productSkuRepo.findById(input.skuId);
   if (!sku) {
     return throwHttpProblem({ status: 404, detail: "Product SKU not found" });
@@ -47,6 +47,7 @@ export async function updateAdminCommerceProductSku(
     name: input.name,
     status: input.status,
     sortOrder: input.sortOrder,
+    presentation: input.presentation ?? sku.presentation ?? createEmptyProductPresentation(),
     facts: input.facts,
     pricingModel: input.pricingModel,
     cancellationPolicyRef: input.cancellationPolicyRef ?? null,
diff --git a/apps/backend/src/domains/merchandising/model/product.ts b/apps/backend/src/domains/merchandising/model/product.ts
index 77e8df141..5bfeb6e54 100644
--- a/apps/backend/src/domains/merchandising/model/product.ts
+++ b/apps/backend/src/domains/merchandising/model/product.ts
@@ -2,9 +2,16 @@ export type ProductType = "RENTAL" | "RIDE_HAILING";
 
 export type CatalogStatus = "DRAFT" | "ACTIVE" | "ARCHIVED";
 
-export type SkuSelectionPolicy = {
-  type: "EXACTLY_ONE";
-};
+export type SkuSelectionPolicy =
+  | {
+      type: "EXACTLY_ONE";
+    }
+  | {
+      type: "CHOICE_SET";
+      min: number;
+      max?: number | null;
+      resolvesTo: 1;
+    };
 
 export type QuantityPolicy =
   | {
@@ -37,9 +44,7 @@ export type RideHailingServicePolicy = {
   type: "RIDE_HAILING";
 };
 
-export type ServicePolicy =
-  | RentalServicePolicy
-  | RideHailingServicePolicy;
+export type ServicePolicy = RentalServicePolicy | RideHailingServicePolicy;
 
 export type SpuSalesPolicy = {
   skuSelectionPolicy: SkuSelectionPolicy;
@@ -77,6 +82,16 @@ export type ProductPresentation = {
   }>;
 };
 
+export function createEmptyProductPresentation(): ProductPresentation {
+  return {
+    heroImageAssetIds: [],
+    detailImageAssetIds: [],
+    sellingPoints: [],
+    parameterGroups: [],
+    noticeBlocks: [],
+  };
+}
+
 export type ProductSpu = {
   id: number;
   version: number;
@@ -96,6 +111,7 @@ export type ProductSku = {
   status: CatalogStatus;
   name: string;
   sortOrder: number;
+  presentation: ProductPresentation;
   facts: SkuFacts;
   pricingModel: PricingModel;
   cancellationPolicyRef?: {
diff --git a/apps/backend/src/domains/merchandising/use-cases/create-product-sku.ts b/apps/backend/src/domains/merchandising/use-cases/create-product-sku.ts
index 20b051b69..f62e12cdf 100644
--- a/apps/backend/src/domains/merchandising/use-cases/create-product-sku.ts
+++ b/apps/backend/src/domains/merchandising/use-cases/create-product-sku.ts
@@ -2,11 +2,8 @@ import { throwHttpProblem } from "../../../lib/problem-details";
 import type { ProductSpuId } from "../../../entities/product-spu";
 import { ProductSkuRepository } from "../../../repositories/ProductSkuRepository";
 import { ProductSpuRepository } from "../../../repositories/ProductSpuRepository";
-import type {
-  CatalogStatus,
-  PricingModel,
-  SkuFacts,
-} from "../model";
+import type { CatalogStatus, PricingModel, ProductPresentation, SkuFacts } from "../model";
+import { createEmptyProductPresentation } from "../model";
 import { assertProductSkuContract } from "../services";
 
 const productSpuRepo = new ProductSpuRepository();
@@ -17,6 +14,7 @@ export interface CreateProductSkuInput {
   name: string;
   status?: CatalogStatus;
   sortOrder?: number;
+  presentation?: ProductPresentation;
   facts: SkuFacts;
   pricingModel: PricingModel;
   cancellationPolicyRef?: {
@@ -41,6 +39,7 @@ export async function createProductSku(input: CreateProductSkuInput) {
     name: input.name,
     status: input.status ?? "DRAFT",
     sortOrder: input.sortOrder ?? 0,
+    presentation: input.presentation ?? createEmptyProductPresentation(),
     facts: input.facts,
     pricingModel: input.pricingModel,
     cancellationPolicyRef: input.cancellationPolicyRef ?? null,
diff --git a/apps/backend/src/domains/merchandising/use-cases/get-ordering-offer-detail.ts b/apps/backend/src/domains/merchandising/use-cases/get-ordering-offer-detail.ts
index 9a61f8655..3f7732e2e 100644
--- a/apps/backend/src/domains/merchandising/use-cases/get-ordering-offer-detail.ts
+++ b/apps/backend/src/domains/merchandising/use-cases/get-ordering-offer-detail.ts
@@ -27,6 +27,7 @@ export type OrderingOfferDetailSku = {
   name: string;
   status: CatalogStatus;
   sortOrder: number;
+  presentation: ProductPresentation;
   facts: ProductSku["facts"];
   pricingModel: ProductSku["pricingModel"];
   cancellationPolicySummary: Array<{
@@ -95,9 +96,7 @@ export const isRentalSkuFacts = (value: unknown): value is RentalSkuFacts => {
   );
 };
 
-export const isRideHailingSkuFacts = (
-  value: unknown,
-): value is RideHailingSkuFacts => {
+export const isRideHailingSkuFacts = (value: unknown): value is RideHailingSkuFacts => {
   if (typeof value !== "object" || value === null || Array.isArray(value)) {
     return false;
   }
@@ -142,6 +141,7 @@ export async function getOrderingOfferDetail(input: {
         name: sku.name,
         status: sku.status,
         sortOrder: sku.sortOrder,
+        presentation: sku.presentation,
         facts: sku.facts,
         pricingModel: sku.pricingModel,
         cancellationPolicySummary: await buildCancellationPolicySummary(sku),
diff --git a/apps/backend/src/domains/ride-hailing/use-cases/handle-caocao-order-status-callback.ts b/apps/backend/src/domains/ride-hailing/use-cases/handle-caocao-order-status-callback.ts
index ad78d57b9..e653c9206 100644
--- a/apps/backend/src/domains/ride-hailing/use-cases/handle-caocao-order-status-callback.ts
+++ b/apps/backend/src/domains/ride-hailing/use-cases/handle-caocao-order-status-callback.ts
@@ -14,15 +14,13 @@ import type { TradeOrderId } from "../../../entities/trade-order";
 import type { UserId } from "../../../entities/user";
 import { createRideHailingProviderPort } from "../services";
 import type { CaocaoOrderStatusCallback } from "../model/provider";
+import { getRideHailingChoiceSetItem, getRideHailingProviderBinding } from "../../trade/services";
 
 const providerRepo = new RideHailingProviderInstanceRepository();
 const rideOrderRepo = new RideHailingOrderRepository();
 const tradeOrderRepo = new TradeOrderRepository();
 
-const readString = (
-  value: Record<string, string>,
-  keys: string[],
-): string | null => {
+const readString = (value: Record<string, string>, keys: string[]): string | null => {
   for (const key of keys) {
     const candidate = value[key];
     if (candidate && candidate.trim().length > 0) return candidate;
@@ -30,10 +28,7 @@ const readString = (
   return null;
 };
 
-const readNumber = (
-  value: Record<string, string>,
-  keys: string[],
-): number | null => {
+const readNumber = (value: Record<string, string>, keys: string[]): number | null => {
   for (const key of keys) {
     const candidate = value[key];
     if (!candidate || candidate.trim().length === 0) continue;
@@ -115,9 +110,7 @@ async function loadActiveCaocaoProviderInstance(
   return providerInstance;
 }
 
-async function loadFirstActiveCaocaoProviderInstance(): Promise<
-  RideHailingProviderInstance
-> {
+async function loadFirstActiveCaocaoProviderInstance(): Promise<RideHailingProviderInstance> {
   const providerInstance = await providerRepo.findFirstActiveByProviderType({
     providerType: "CAOCAO",
   });
@@ -160,16 +153,20 @@ async function applyCaocaoCallbackWithProviderInstance(input: {
 
   const orderId = parsed.localOrderId as TradeOrderId;
   const rideOrder = await rideOrderRepo.findByOrderId(orderId);
-  if (!rideOrder || rideOrder.providerInstanceId !== input.providerInstance.id) {
+  const order = await tradeOrderRepo.findById(orderId);
+  const choiceSetItem = order ? getRideHailingChoiceSetItem(order.items) : null;
+  const providerBinding = choiceSetItem ? getRideHailingProviderBinding(choiceSetItem) : null;
+  if (
+    !rideOrder ||
+    !providerBinding ||
+    providerBinding.providerInstanceId !== input.providerInstance.id
+  ) {
     return throwHttpProblem({
       status: 404,
       detail: "RideHailing order not found for Caocao callback",
     });
   }
-  if (
-    rideOrder.providerOrderId !== null &&
-    rideOrder.providerOrderId !== parsed.providerOrderId
-  ) {
+  if (providerBinding.providerOrderId !== parsed.providerOrderId) {
     return throwHttpProblem({
       status: 409,
       detail: "Caocao callback provider order does not match local order",
@@ -187,13 +184,11 @@ async function applyCaocaoCallbackWithProviderInstance(input: {
   });
 
   await rideOrderRepo.updateByOrderId(orderId, {
-    providerOrderId: parsed.providerOrderId,
     executionPhase: mapCaocaoEventToExecutionPhase(parsed.event),
     driverSnapshot,
     vehicleSnapshot,
   });
 
-  const order = await tradeOrderRepo.findById(orderId);
   if (order?.status === "INITIATING") {
     await tradeOrderRepo.updateStatus(orderId, "OPEN");
   }
@@ -232,9 +227,7 @@ export async function handleCaocaoOrderStatusCallback(input: {
   form: Record<string, string>;
 }): Promise<{ code: "SUCCESS"; message: string }> {
   return applyCaocaoCallbackWithProviderInstance({
-    providerInstance: await loadActiveCaocaoProviderInstance(
-      input.providerInstanceId,
-    ),
+    providerInstance: await loadActiveCaocaoProviderInstance(input.providerInstanceId),
     form: input.form,
   });
 }
diff --git a/apps/backend/src/domains/trade/model/order.ts b/apps/backend/src/domains/trade/model/order.ts
index 34bc5f7db..ebac4be1b 100644
--- a/apps/backend/src/domains/trade/model/order.ts
+++ b/apps/backend/src/domains/trade/model/order.ts
@@ -1,29 +1,22 @@
-import type { PriceExplanation, PricingModel, SkuFacts } from "../../merchandising";
+import type {
+  PriceExplanation,
+  PricingModel,
+  ProductPresentation,
+  SkuFacts,
+} from "../../merchandising";
 
 export type OrderFamily = "RENTAL" | "RIDE_HAILING";
 
-export type OrderStatus =
-  | "INITIATING"
-  | "OPEN"
-  | "CANCELLED"
-  | "FAILED"
-  | "EXPIRED"
-  | "COMPLETED";
+export type OrderStatus = "INITIATING" | "OPEN" | "CANCELLED" | "FAILED" | "EXPIRED" | "COMPLETED";
 
-export type OrderTerminationAttemptStatus =
-  | "PENDING"
-  | "APPROVED"
-  | "DENIED";
+export type OrderTerminationAttemptStatus = "PENDING" | "APPROVED" | "DENIED";
 
 export type OrderTerminationResolutionPath =
   | "TRADE_LOCAL"
   | "RENTAL_FULFILLMENT"
   | "RIDE_HAILING_FULFILLMENT";
 
-export type OrderTerminationEffectKind =
-  | "NONE"
-  | "POLICY_REFUND"
-  | "ABORT_FEE";
+export type OrderTerminationEffectKind = "NONE" | "POLICY_REFUND" | "ABORT_FEE";
 
 export type OrderParticipantRole = "CREATOR" | "PARTICIPANT";
 
@@ -36,19 +29,68 @@ export type OrderParticipantSnapshot = {
   removedAt?: string | null;
 };
 
-export type OrderItemSnapshot = {
+export type SkuSnapshot = {
+  id: number;
+  version: number;
+  name: string;
+  presentationSnapshot: ProductPresentation;
+  factsSnapshot: SkuFacts;
+  pricingModelSnapshot: PricingModel;
+  cancellationPolicySnapshot?: CancellationPolicySnapshot | null;
+};
+
+export type FixedOrderItemSnapshot = {
+  kind?: "FIXED";
   itemId: string;
-  sku: {
-    id: number;
-    version: number;
-    name: string;
-    factsSnapshot: SkuFacts;
-    pricingModelSnapshot: PricingModel;
-    cancellationPolicySnapshot?: CancellationPolicySnapshot | null;
-  };
+  sku: SkuSnapshot;
   quantity: number;
 };
 
+export type RideHailingQuoteSnapshot = {
+  amountFen: number;
+  currency: "CNY";
+  displayName: string;
+  estimateAmountFen?: number | null;
+  quotedAt: string;
+  expiresAt?: string | null;
+  explanations: PriceExplanation[];
+};
+
+export type RideHailingChoiceSetCandidateSnapshot = {
+  sku: SkuSnapshot;
+  quoteSnapshot: RideHailingQuoteSnapshot;
+};
+
+export type RideHailingProviderBindingSnapshot = {
+  providerInstanceId: string;
+  providerType?: string | null;
+  providerOrderId: string;
+  providerSnapshot?: unknown;
+};
+
+export type RideHailingChoiceSetResolutionSnapshot = {
+  sku?: SkuSnapshot | null;
+  providerVehicleTypeCode?: string | null;
+  providerVehicleTypeName?: string | null;
+  quoteSnapshot?: RideHailingQuoteSnapshot | null;
+  providerBinding?: RideHailingProviderBindingSnapshot | null;
+  source: "DISPATCH_POLICY" | "PROVIDER_ACCEPTED" | "PROVIDER_CALLBACK";
+  candidateRelation: "IN_CANDIDATES" | "PROVIDER_UPGRADE" | "PROVIDER_SUBSTITUTION";
+  reason?: string | null;
+  resolvedAt: string;
+};
+
+export type ChoiceSetOrderItemSnapshot = {
+  kind: "CHOICE_SET";
+  itemId: string;
+  productType: "RIDE_HAILING";
+  candidates: RideHailingChoiceSetCandidateSnapshot[];
+  resolution: RideHailingChoiceSetResolutionSnapshot | null;
+  quantity: 1;
+};
+
+export type OrderItemSnapshot = FixedOrderItemSnapshot | ChoiceSetOrderItemSnapshot;
+
 export type OrderItemPricingSnapshot = {
   itemId: string;
   resolvedAmountFen: number;
diff --git a/apps/backend/src/domains/trade/model/ride-hailing-order.ts b/apps/backend/src/domains/trade/model/ride-hailing-order.ts
index 69dd855ce..c1fc5a610 100644
--- a/apps/backend/src/domains/trade/model/ride-hailing-order.ts
+++ b/apps/backend/src/domains/trade/model/ride-hailing-order.ts
@@ -1,4 +1,3 @@
-import type { RideHailingProviderInstanceId } from "../../../entities/ride-hailing-provider";
 import type { TradeOrder } from "./order";
 
 export type RideHailingCoordinateSnapshot = {
@@ -63,8 +62,6 @@ export type RideHailingOrder = Omit<TradeOrder, "family"> & {
   departureAt?: string | null;
   riders: RideHailingRiderSnapshot[];
   contactPhone: string;
-  providerInstanceId: RideHailingProviderInstanceId;
-  providerOrderId?: string | null;
   executionPhase: RideHailingExecutionPhase;
   driverSnapshot?: RideHailingDriverSnapshot | null;
   vehicleSnapshot?: RideHailingVehicleSnapshot | null;
diff --git a/apps/backend/src/domains/trade/services/order-items.ts b/apps/backend/src/domains/trade/services/order-items.ts
index d5e991889..eba5d37fb 100644
--- a/apps/backend/src/domains/trade/services/order-items.ts
+++ b/apps/backend/src/domains/trade/services/order-items.ts
@@ -1,44 +1,90 @@
 import type {
   CancellationPolicySnapshot,
+  ChoiceSetOrderItemSnapshot,
+  FixedOrderItemSnapshot,
   OrderItemSnapshot,
+  RideHailingProviderBindingSnapshot,
+  SkuSnapshot,
 } from "../model";
 import type { FixedTotalPricingModel, PricingModel } from "../../merchandising";
 
-const isFixedTotalPricingModel = (
-  value: PricingModel,
-): value is FixedTotalPricingModel => value.type === "FIXED_TOTAL";
+const isFixedTotalPricingModel = (value: PricingModel): value is FixedTotalPricingModel =>
+  value.type === "FIXED_TOTAL";
+
+export function isFixedOrderItemSnapshot(item: OrderItemSnapshot): item is FixedOrderItemSnapshot {
+  return item.kind === undefined || item.kind === "FIXED";
+}
+
+export function isChoiceSetOrderItemSnapshot(
+  item: OrderItemSnapshot,
+): item is ChoiceSetOrderItemSnapshot {
+  return item.kind === "CHOICE_SET";
+}
+
+export function assertFixedOrderItemSnapshot(item: OrderItemSnapshot): FixedOrderItemSnapshot {
+  if (!isFixedOrderItemSnapshot(item)) {
+    throw new Error(`Order item ${item.itemId} is not a fixed SKU item`);
+  }
+  return item;
+}
 
 export function getOrderItemSkuName(item: OrderItemSnapshot): string {
+  if (!isFixedOrderItemSnapshot(item)) {
+    return (
+      item.resolution?.sku?.name ??
+      item.resolution?.providerVehicleTypeName ??
+      item.candidates[0]?.sku.name ??
+      "待确认车型"
+    );
+  }
   return item.sku.name;
 }
 
 export function getOrderItemPricingAmountFen(item: OrderItemSnapshot): number {
-  const pricingModel = item.sku.pricingModelSnapshot;
+  const fixedItem = assertFixedOrderItemSnapshot(item);
+  const pricingModel = fixedItem.sku.pricingModelSnapshot;
   if (!isFixedTotalPricingModel(pricingModel)) {
     throw new Error(
-      `Order item ${item.itemId} requires materialized bill amount for dynamic pricing`,
+      `Order item ${fixedItem.itemId} requires materialized bill amount for dynamic pricing`,
     );
   }
 
-  return pricingModel.amountFen * item.quantity;
+  return pricingModel.amountFen * fixedItem.quantity;
 }
 
 export function getOrderItemsTotalFen(items: OrderItemSnapshot[]): number {
-  return items.reduce(
-    (sum, item) => sum + getOrderItemPricingAmountFen(item),
-    0,
-  );
+  return items.reduce((sum, item) => sum + getOrderItemPricingAmountFen(item), 0);
 }
 
 export function getOrderItemCancellationPolicy(
   item: OrderItemSnapshot,
 ): CancellationPolicySnapshot {
-  const policy = item.sku.cancellationPolicySnapshot;
+  const fixedItem = assertFixedOrderItemSnapshot(item);
+  const policy = fixedItem.sku.cancellationPolicySnapshot;
   if (!policy) {
-    throw new Error(
-      `Cancellation policy snapshot missing for item ${item.itemId}`,
-    );
+    throw new Error(`Cancellation policy snapshot missing for item ${fixedItem.itemId}`);
   }
 
   return policy;
 }
+
+export function getRideHailingChoiceSetItem(
+  items: OrderItemSnapshot[],
+): ChoiceSetOrderItemSnapshot | null {
+  return (
+    items.find(
+      (item): item is ChoiceSetOrderItemSnapshot =>
+        isChoiceSetOrderItemSnapshot(item) && item.productType === "RIDE_HAILING",
+    ) ?? null
+  );
+}
+
+export function getRideHailingResolvedSku(item: ChoiceSetOrderItemSnapshot): SkuSnapshot | null {
+  return item.resolution?.sku ?? null;
+}
+
+export function getRideHailingProviderBinding(
+  item: ChoiceSetOrderItemSnapshot,
+): RideHailingProviderBindingSnapshot | null {
+  return item.resolution?.providerBinding ?? null;
+}
diff --git a/apps/backend/src/domains/trade/services/order-persistence.ts b/apps/backend/src/domains/trade/services/order-persistence.ts
index d96da9800..a6afb87d2 100644
--- a/apps/backend/src/domains/trade/services/order-persistence.ts
+++ b/apps/backend/src/domains/trade/services/order-persistence.ts
@@ -68,8 +68,6 @@ export function toRideHailingOrderModel(
     departureAt: rideRecord.departureAt?.toISOString() ?? null,
     riders: rideRecord.riders,
     contactPhone: rideRecord.contactPhone,
-    providerInstanceId: rideRecord.providerInstanceId,
-    providerOrderId: rideRecord.providerOrderId,
     executionPhase: rideRecord.executionPhase,
     driverSnapshot: rideRecord.driverSnapshot,
     vehicleSnapshot: rideRecord.vehicleSnapshot,
diff --git a/apps/backend/src/domains/trade/services/pricing-application.test.ts b/apps/backend/src/domains/trade/services/pricing-application.test.ts
index d00670245..8d67afe1a 100644
--- a/apps/backend/src/domains/trade/services/pricing-application.test.ts
+++ b/apps/backend/src/domains/trade/services/pricing-application.test.ts
@@ -54,6 +54,13 @@ function buildSku(overrides: Partial<ProductSku> = {}): ProductSku {
     status: "ACTIVE",
     name: "Baking zone",
     sortOrder: 0,
+    presentation: {
+      heroImageAssetIds: [],
+      detailImageAssetIds: [],
+      sellingPoints: [],
+      parameterGroups: [],
+      noticeBlocks: [],
+    },
     facts: {
       type: "RENTAL",
       zoneCode: "BAKING",
diff --git a/apps/backend/src/domains/trade/services/rental-termination-pricing.test.ts b/apps/backend/src/domains/trade/services/rental-termination-pricing.test.ts
index 168a1703f..14cfc87be 100644
--- a/apps/backend/src/domains/trade/services/rental-termination-pricing.test.ts
+++ b/apps/backend/src/domains/trade/services/rental-termination-pricing.test.ts
@@ -24,6 +24,13 @@ function buildRentalOrder(): RentalOrder {
           id: 1,
           version: 1,
           name: "Baking-2P",
+          presentationSnapshot: {
+            heroImageAssetIds: [],
+            detailImageAssetIds: [],
+            sellingPoints: [],
+            parameterGroups: [],
+            noticeBlocks: [],
+          },
           factsSnapshot: {
             type: "RENTAL",
             zoneCode: "BAKING",
diff --git a/apps/backend/src/domains/trade/use-cases/create-order.ts b/apps/backend/src/domains/trade/use-cases/create-order.ts
index 9d51a6fa4..a3bdac31a 100644
--- a/apps/backend/src/domains/trade/use-cases/create-order.ts
+++ b/apps/backend/src/domains/trade/use-cases/create-order.ts
@@ -33,13 +33,20 @@ import {
 } from "../../ride-hailing";
 import { attachOrderToPr } from "../../pr-core";
 import type {
+  ChoiceSetOrderItemSnapshot,
+  FixedOrderItemSnapshot,
   OrderItemSnapshot,
   OrderParticipantSnapshot,
   OrderPricingSnapshot,
   OrderStatus,
   RentalRegistrant,
+  RideHailingChoiceSetCandidateSnapshot,
+  RideHailingChoiceSetResolutionSnapshot,
+  RideHailingProviderBindingSnapshot,
   RideHailingRiderSnapshot,
+  RideHailingQuoteSnapshot,
   RideHailingRouteSnapshot,
+  SkuSnapshot,
 } from "../model";
 import {
   buildEqualRelativeSplitRule,
@@ -64,11 +71,21 @@ export type OrderParticipantInput = {
   userId: string;
 };
 
-export type OrderItemInput = {
+export type FixedOrderItemInput = {
+  kind?: "FIXED";
   skuId: number;
   quantity?: number | null;
 };
 
+export type ChoiceSetOrderItemInput = {
+  kind: "CHOICE_SET";
+  productType: "RIDE_HAILING";
+  candidateSkuIds: number[];
+  quantity?: 1 | null;
+};
+
+export type OrderItemInput = FixedOrderItemInput | ChoiceSetOrderItemInput;
+
 export type RentalProductTypedExtraProperties = {
   serviceStartAt: string;
   serviceEndAt: string;
@@ -122,7 +139,6 @@ export type CreateRideHailingOrderFoundationInput = {
   departureAt?: string | null;
   riders: RideHailingRiderSnapshot[];
   contactPhone: string;
-  providerInstanceId: RideHailingProviderInstanceId;
 };
 
 export type OrderingActionProblem = {
@@ -160,6 +176,18 @@ export type OrderingEvaluation = {
   };
 };
 
+export type CreateOrderCommandResult =
+  | {
+      outcome: "CREATED";
+      orderId: string;
+      billId?: string | null;
+    }
+  | {
+      outcome: "CANCELLED";
+      orderId: string;
+      reason: OrderingActionProblem;
+    };
+
 type SelectedSkuContext = {
   offer: Offer;
   spu: ProductSpu;
@@ -171,15 +199,21 @@ type SelectedRentalContext = Omit<SelectedSkuContext, "sku"> & {
   sku: ProductSku & { facts: RentalSkuFacts };
   itemId: string;
   pricingSnapshot: OrderPricingSnapshot;
-  cancellationPolicySnapshot: OrderItemSnapshot["sku"]["cancellationPolicySnapshot"];
+  cancellationPolicySnapshot: FixedOrderItemSnapshot["sku"]["cancellationPolicySnapshot"];
   extraProperties: RentalProductTypedExtraProperties;
 };
 
-type SelectedRideContext = Omit<SelectedSkuContext, "sku"> & {
+type RideCandidateContext = Omit<SelectedSkuContext, "sku"> & {
   sku: ProductSku & { facts: RideHailingSkuFacts };
+  quote: RideQuoteOption;
+};
+
+type SelectedRideContext = {
+  offer: Offer;
   itemId: string;
+  candidates: RideCandidateContext[];
+  dispatchCandidate: RideCandidateContext;
   pricingSnapshot: OrderPricingSnapshot;
-  quote: RideQuoteOption;
   extraProperties: RideHailingProductTypedExtraProperties;
 };
 
@@ -225,19 +259,69 @@ async function resolveOffer(offerId: number): Promise<Offer> {
   return offer;
 }
 
-async function resolveSelectedSku(input: {
-  offer: Offer;
-  items: OrderItemInput[];
-}): Promise<SelectedSkuContext> {
-  const firstItem = input.items[0];
+function readFixedItemInput(items: OrderItemInput[]): FixedOrderItemInput {
+  const firstItem = items[0];
   if (!firstItem) {
     return throwHttpProblem({
       status: 400,
       detail: "CreateOrder requires at least one selected item",
     });
   }
+  if (firstItem.kind === "CHOICE_SET") {
+    return throwHttpProblem({
+      status: 400,
+      detail: "CreateOrder requires a fixed SKU item",
+    });
+  }
+  return firstItem;
+}
+
+function readRideChoiceSetItemInput(items: OrderItemInput[]): ChoiceSetOrderItemInput {
+  const firstItem = items[0];
+  if (!firstItem) {
+    return throwHttpProblem({
+      status: 400,
+      detail: "RideHailing CreateOrder requires one choice-set item",
+    });
+  }
+  if (firstItem.kind !== "CHOICE_SET" || firstItem.productType !== "RIDE_HAILING") {
+    return throwHttpProblem({
+      status: 400,
+      detail: "RideHailing CreateOrder requires a RideHailing choice-set item",
+    });
+  }
+  if (items.length !== 1) {
+    return throwHttpProblem({
+      status: 400,
+      detail: "RideHailing CreateOrder supports one choice-set item only",
+    });
+  }
+  if ((firstItem.quantity ?? 1) !== 1) {
+    return throwHttpProblem({
+      status: 409,
+      detail: "RideHailing choice-set quantity must be 1",
+    });
+  }
+  const candidateSkuIds = [...new Set(firstItem.candidateSkuIds)];
+  if (candidateSkuIds.length === 0) {
+    return throwHttpProblem({
+      status: 409,
+      detail: "请选择至少一个可用车型",
+    });
+  }
+  return {
+    ...firstItem,
+    candidateSkuIds,
+    quantity: 1,
+  };
+}
 
-  const sku = await productSkuRepo.findById(firstItem.skuId);
+async function resolveSkuContext(input: {
+  offer: Offer;
+  skuId: number;
+  quantity?: number | null;
+}): Promise<SelectedSkuContext> {
+  const sku = await productSkuRepo.findById(input.skuId);
   if (!sku || sku.status !== "ACTIVE") {
     return throwHttpProblem({ status: 404, detail: "Selected SKU not found" });
   }
@@ -258,7 +342,7 @@ async function resolveSelectedSku(input: {
     });
   }
 
-  const quantity = firstItem.quantity ?? 1;
+  const quantity = input.quantity ?? 1;
   if (quantity !== 1) {
     return throwHttpProblem({
       status: 409,
@@ -274,6 +358,18 @@ async function resolveSelectedSku(input: {
   };
 }
 
+async function resolveSelectedSku(input: {
+  offer: Offer;
+  items: OrderItemInput[];
+}): Promise<SelectedSkuContext> {
+  const firstItem = readFixedItemInput(input.items);
+  return resolveSkuContext({
+    offer: input.offer,
+    skuId: firstItem.skuId,
+    quantity: firstItem.quantity,
+  });
+}
+
 async function buildCancellationPolicySnapshot(sku: ProductSku) {
   const ref = sku.cancellationPolicyRef;
   const policy = ref
@@ -294,14 +390,8 @@ async function buildCancellationPolicySnapshot(sku: ProductSku) {
   };
 }
 
-function readRentalExtras(
-  input: ProductTypedExtraProperties,
-): RentalProductTypedExtraProperties {
-  if (
-    "serviceStartAt" in input &&
-    "serviceEndAt" in input &&
-    "registrants" in input
-  ) {
+function readRentalExtras(input: ProductTypedExtraProperties): RentalProductTypedExtraProperties {
+  if ("serviceStartAt" in input && "serviceEndAt" in input && "registrants" in input) {
     return input;
   }
   return throwHttpProblem({
@@ -342,9 +432,7 @@ function validateCommonCommand(input: {
   }
   if (
     input.createdBy &&
-    !input.command.participants.some(
-      (participant) => participant.userId === input.createdBy,
-    )
+    !input.command.participants.some((participant) => participant.userId === input.createdBy)
   ) {
     return actionProblem({
       code: "ORDER_CREATOR_NOT_PARTICIPANT",
@@ -412,11 +500,7 @@ function validateRentalExtras(input: {
       detail: "实名登记人数需要匹配订单参与者人数。",
     });
   }
-  if (
-    input.extras.registrants.some(
-      (registrant) => registrant.fullName.trim().length === 0,
-    )
-  ) {
+  if (input.extras.registrants.some((registrant) => registrant.fullName.trim().length === 0)) {
     return actionProblem({
       code: "RENTAL_REGISTRANT_NAME_REQUIRED",
       title: "缺少实名信息",
@@ -515,24 +599,47 @@ async function resolveRideSelection(input: {
   itemId: string;
 }): Promise<SelectedRideContext> {
   const extras = readRideExtras(input.command.productTypedExtraProperties);
-  const selected = await resolveSelectedSku({
-    offer: input.offer,
-    items: input.command.items,
-  });
-  if (!isRideHailingSkuFacts(selected.sku.facts)) {
-    return throwHttpProblem({
-      status: 409,
-      detail: "Selected SKU is not a RideHailing SKU",
-    });
-  }
+  const choiceSetInput = readRideChoiceSetItemInput(input.command.items);
 
   const options = await evaluateRideOptions({
     offer: input.offer,
     route: extras.route,
-    selectedSkuId: selected.sku.id,
+    candidateSkuIds: choiceSetInput.candidateSkuIds,
   });
-  const quote = options.find((option) => option.selected && option.selectable);
-  if (!quote || quote.quoteAmountFen === null) {
+  const quotesBySkuId = new Map(options.map((option) => [option.skuId, option]));
+  const candidates = await Promise.all(
+    choiceSetInput.candidateSkuIds.map(async (skuId) => {
+      const selected = await resolveSkuContext({
+        offer: input.offer,
+        skuId,
+        quantity: 1,
+      });
+      if (!isRideHailingSkuFacts(selected.sku.facts)) {
+        return throwHttpProblem({
+          status: 409,
+          detail: "Selected SKU is not a RideHailing SKU",
+        });
+      }
+      const quote = quotesBySkuId.get(selected.sku.id);
+      if (!quote || !quote.selectable || quote.quoteAmountFen === null) {
+        return throwHttpProblem({ status: 409, detail: "请选择可用车型" });
+      }
+      return {
+        ...selected,
+        sku: {
+          ...selected.sku,
+          facts: selected.sku.facts,
+        },
+        quote,
+      };
+    }),
+  );
+  const dispatchCandidate = [...candidates].sort(
+    (left, right) =>
+      (left.quote.quoteAmountFen ?? Number.POSITIVE_INFINITY) -
+      (right.quote.quoteAmountFen ?? Number.POSITIVE_INFINITY),
+  )[0];
+  if (!dispatchCandidate) {
     return throwHttpProblem({ status: 409, detail: "请选择可用车型" });
   }
   const pricingSnapshot = pricingApplication.resolve({
@@ -540,25 +647,22 @@ async function resolveRideSelection(input: {
     items: [
       {
         itemId: input.itemId,
-        spu: selected.spu,
-        sku: selected.sku,
-        quantity: selected.quantity,
+        spu: dispatchCandidate.spu,
+        sku: dispatchCandidate.sku,
+        quantity: dispatchCandidate.quantity,
       },
     ],
     orderContext: {
-      quoteTotalFen: rideQuoteBaseAmountFen(quote),
+      quoteTotalFen: rideQuoteBaseAmountFen(dispatchCandidate.quote),
     },
   });
 
   return {
-    ...selected,
-    sku: {
-      ...selected.sku,
-      facts: selected.sku.facts,
-    },
+    offer: input.offer,
     itemId: input.itemId,
+    candidates,
+    dispatchCandidate,
     pricingSnapshot,
-    quote,
     extraProperties: extras,
   };
 }
@@ -568,14 +672,16 @@ function buildItemSnapshot(input: {
   sku: ProductSku;
   quantity: number;
   name?: string;
-  cancellationPolicySnapshot?: OrderItemSnapshot["sku"]["cancellationPolicySnapshot"];
-}): OrderItemSnapshot {
+  cancellationPolicySnapshot?: FixedOrderItemSnapshot["sku"]["cancellationPolicySnapshot"];
+}): FixedOrderItemSnapshot {
   return {
+    kind: "FIXED",
     itemId: input.itemId,
     sku: {
       id: input.sku.id,
       version: input.sku.version,
       name: input.name ?? input.sku.name,
+      presentationSnapshot: input.sku.presentation,
       factsSnapshot: input.sku.facts,
       pricingModelSnapshot: input.sku.pricingModel,
       cancellationPolicySnapshot: input.cancellationPolicySnapshot ?? null,
@@ -584,10 +690,69 @@ function buildItemSnapshot(input: {
   };
 }
 
-function buildParticipantSnapshots(input: {
-  command: CreateOrderCommandInput;
-  createdBy: string;
-}) {
+function buildSkuSnapshot(input: {
+  sku: ProductSku;
+  name?: string;
+  cancellationPolicySnapshot?: SkuSnapshot["cancellationPolicySnapshot"];
+}): SkuSnapshot {
+  return {
+    id: input.sku.id,
+    version: input.sku.version,
+    name: input.name ?? input.sku.name,
+    presentationSnapshot: input.sku.presentation,
+    factsSnapshot: input.sku.facts,
+    pricingModelSnapshot: input.sku.pricingModel,
+    cancellationPolicySnapshot: input.cancellationPolicySnapshot ?? null,
+  };
+}
+
+function buildRideQuoteSnapshot(quote: RideQuoteOption): RideHailingQuoteSnapshot {
+  if (typeof quote.quoteAmountFen !== "number") {
+    return throwHttpProblem({
+      status: 409,
+      detail: "RideHailing quote amount is missing",
+    });
+  }
+  return {
+    amountFen: quote.quoteAmountFen,
+    currency: "CNY",
+    displayName: quote.displayName,
+    estimateAmountFen: quote.estimateAmountFen,
+    quotedAt: new Date().toISOString(),
+    explanations: quote.priceExplanations,
+  };
+}
+
+async function buildRideCandidateSnapshot(
+  candidate: RideCandidateContext,
+): Promise<RideHailingChoiceSetCandidateSnapshot> {
+  return {
+    sku: buildSkuSnapshot({
+      sku: candidate.sku,
+      name: candidate.quote.displayName,
+      cancellationPolicySnapshot: await buildCancellationPolicySnapshot(candidate.sku),
+    }),
+    quoteSnapshot: buildRideQuoteSnapshot(candidate.quote),
+  };
+}
+
+async function buildRideChoiceSetItemSnapshot(input: {
+  selected: SelectedRideContext;
+  resolution: RideHailingChoiceSetResolutionSnapshot | null;
+}): Promise<ChoiceSetOrderItemSnapshot> {
+  return {
+    kind: "CHOICE_SET",
+    itemId: input.selected.itemId,
+    productType: "RIDE_HAILING",
+    candidates: await Promise.all(
+      input.selected.candidates.map((candidate) => buildRideCandidateSnapshot(candidate)),
+    ),
+    resolution: input.resolution,
+    quantity: 1,
+  };
+}
+
+function buildParticipantSnapshots(input: { command: CreateOrderCommandInput; createdBy: string }) {
   return buildOrderParticipantsFromContext({
     participants: input.command.participants.map((participant) => ({
       participantId: participant.userId,
@@ -757,7 +922,6 @@ async function createRideHailingOrderFoundationInExecutor(
     departureAt: input.departureAt ? new Date(input.departureAt) : null,
     riders: input.riders,
     contactPhone: input.contactPhone,
-    providerInstanceId: input.providerInstanceId,
     executionPhase: "INITIATING",
   });
 
@@ -774,9 +938,7 @@ export async function createRideHailingOrderFoundation(
     return createRideHailingOrderFoundationInExecutor(input, executor);
   }
 
-  return db.transaction(async (tx) =>
-    createRideHailingOrderFoundationInExecutor(input, tx),
-  );
+  return db.transaction(async (tx) => createRideHailingOrderFoundationInExecutor(input, tx));
 }
 
 async function createRentalOrderBranch(input: {
@@ -863,9 +1025,9 @@ async function createRideHailingOrderBranch(input: {
   command: CreateOrderCommandInput;
   selected: SelectedRideContext;
   createdBy: string;
-}) {
+}): Promise<CreateOrderCommandResult> {
   const provider = await providerRepo.findById(
-    input.selected.sku.facts
+    input.selected.dispatchCandidate.sku.facts
       .rideHailingProviderInstanceId as RideHailingProviderInstanceId,
   );
   if (!provider) {
@@ -883,11 +1045,9 @@ async function createRideHailingOrderBranch(input: {
         command: input.command,
         createdBy: input.createdBy,
       });
-      const item = buildItemSnapshot({
-        itemId: input.selected.itemId,
-        sku: input.selected.sku,
-        quantity: input.selected.quantity,
-        name: input.selected.quote.displayName,
+      const unresolvedItem = await buildRideChoiceSetItemSnapshot({
+        selected: input.selected,
+        resolution: null,
       });
       const base = await createBaseOrder({
         executor: tx,
@@ -895,7 +1055,7 @@ async function createRideHailingOrderBranch(input: {
         status: "INITIATING",
         createdBy: input.createdBy,
         participants,
-        items: [item],
+        items: [unresolvedItem],
         unpaidWindowMinutes: DEFAULT_INITIATING_WINDOW_MINUTES,
       });
 
@@ -916,30 +1076,75 @@ async function createRideHailingOrderBranch(input: {
           : null,
         riders: buildRideRiderSnapshots(input.selected.extraProperties),
         contactPhone: input.selected.extraProperties.contactPhone,
-        providerInstanceId: provider.id,
         executionPhase: "INITIATING",
       });
 
-      const created = await port.createRide({
-        orderId: base.order.id,
-        params: {
-          callback_url: resolveCaocaoOrderStatusCallbackUrl(provider),
-          car_type: input.selected.sku.facts.providerVehicleTypeCode,
-          flat: input.selected.extraProperties.route.origin.latitude,
-          flng: input.selected.extraProperties.route.origin.longitude,
-          tlat: input.selected.extraProperties.route.destination.latitude,
-          tlng: input.selected.extraProperties.route.destination.longitude,
-        },
-      });
+      let created: Awaited<ReturnType<typeof port.createRide>>;
+      try {
+        created = await port.createRide({
+          orderId: base.order.id,
+          params: {
+            callback_url: resolveCaocaoOrderStatusCallbackUrl(provider),
+            car_type: input.selected.dispatchCandidate.sku.facts.providerVehicleTypeCode,
+            flat: input.selected.extraProperties.route.origin.latitude,
+            flng: input.selected.extraProperties.route.origin.longitude,
+            tlat: input.selected.extraProperties.route.destination.latitude,
+            tlng: input.selected.extraProperties.route.destination.longitude,
+          },
+        });
+      } catch (error) {
+        await rideRepo.updateByOrderId(base.order.id, {
+          executionPhase: "FAILED",
+        });
+        const orderRepo = new TradeOrderRepository(tx);
+        await orderRepo.updateStatus(base.order.id, "CANCELLED", new Date());
+        return {
+          outcome: "CANCELLED",
+          orderId: base.order.id,
+          reason: actionProblem({
+            code: "RIDE_HAILING_PROVIDER_CREATE_FAILED",
+            title: "下单失败",
+            detail:
+              error instanceof Error ? error.message : "RideHailing provider order creation failed",
+          }),
+        };
+      }
       providerOrderIdToCompensate = created.providerOrderId;
-      await rideRepo.updateByOrderId(base.order.id, {
+      const providerBinding: RideHailingProviderBindingSnapshot = {
+        providerInstanceId: provider.id,
+        providerType: provider.providerType,
         providerOrderId: created.providerOrderId,
+      };
+      const resolution: RideHailingChoiceSetResolutionSnapshot = {
+        sku: buildSkuSnapshot({
+          sku: input.selected.dispatchCandidate.sku,
+          name: input.selected.dispatchCandidate.quote.displayName,
+          cancellationPolicySnapshot: await buildCancellationPolicySnapshot(
+            input.selected.dispatchCandidate.sku,
+          ),
+        }),
+        providerVehicleTypeCode: input.selected.dispatchCandidate.sku.facts.providerVehicleTypeCode,
+        providerVehicleTypeName: input.selected.dispatchCandidate.quote.carTypeName,
+        quoteSnapshot: buildRideQuoteSnapshot(input.selected.dispatchCandidate.quote),
+        providerBinding,
+        source: "DISPATCH_POLICY",
+        candidateRelation: "IN_CANDIDATES",
+        reason: null,
+        resolvedAt: new Date().toISOString(),
+      };
+      const resolvedItem = await buildRideChoiceSetItemSnapshot({
+        selected: input.selected,
+        resolution,
+      });
+      await rideRepo.updateByOrderId(base.order.id, {
         executionPhase: "DISPATCHING",
       });
       const orderRepo = new TradeOrderRepository(tx);
+      await orderRepo.replaceItems(base.order.id, [resolvedItem]);
       await orderRepo.updateStatus(base.order.id, "OPEN");
 
       return {
+        outcome: "CREATED",
         orderId: base.order.id,
       };
     });
@@ -959,10 +1164,7 @@ async function createRideHailingOrderBranch(input: {
     }
     return throwHttpProblem({
       status: 502,
-      detail:
-        error instanceof Error
-          ? error.message
-          : "RideHailing provider order creation failed",
+      detail: error instanceof Error ? error.message : "RideHailing provider order creation failed",
     });
   }
 }
@@ -1011,9 +1213,7 @@ export async function evaluateOrdering(
         totalFen: selected.pricingSnapshot.totalFen,
         range: null,
         explanations: [
-          ...selected.pricingSnapshot.itemBreakdowns.flatMap(
-            (breakdown) => breakdown.explanations,
-          ),
+          ...selected.pricingSnapshot.itemBreakdowns.flatMap((breakdown) => breakdown.explanations),
           ...selected.pricingSnapshot.orderLevelExplanations,
         ],
       },
@@ -1022,28 +1222,40 @@ export async function evaluateOrdering(
 
   const extras = readRideExtras(input.productTypedExtraProperties);
   const rideProblem = validateRideExtras(extras);
+  const choiceSetInput = readRideChoiceSetItemInput(input.items);
   const options = await evaluateRideOptions({
     offer,
     route: extras.route,
-    selectedSkuId: input.items[0]?.skuId ?? null,
+    candidateSkuIds: choiceSetInput.candidateSkuIds,
   });
-  const selectedQuote = options.find(
-    (option) => option.selected && option.selectable && option.quoteAmountFen !== null,
+  const quotedCandidates = options.filter(
+    (option) => option.selectable && option.quoteAmountFen !== null,
   );
+  const dispatchQuote = [...quotedCandidates].sort(
+    (left, right) =>
+      (left.quoteAmountFen ?? Number.POSITIVE_INFINITY) -
+      (right.quoteAmountFen ?? Number.POSITIVE_INFINITY),
+  )[0];
   const quoteProblem =
-    selectedQuote === undefined
+    dispatchQuote === undefined
       ? actionProblem({
           code: "RIDE_HAILING_VEHICLE_REQUIRED",
           title: "请选择可用车型",
-          detail: "请选择一个可用的网约车车型。",
+          detail: "请选择至少一个可用的网约车车型。",
         })
       : null;
   const selected =
-    selectedQuote === undefined
+    dispatchQuote === undefined
       ? null
       : await resolveSelectedSku({
           offer,
-          items: input.items,
+          items: [
+            {
+              kind: "FIXED",
+              skuId: dispatchQuote.skuId,
+              quantity: 1,
+            },
+          ],
         });
   if (selected && !isRideHailingSkuFacts(selected.sku.facts)) {
     return throwHttpProblem({
@@ -1052,7 +1264,7 @@ export async function evaluateOrdering(
     });
   }
   const pricingSnapshot =
-    selected && selectedQuote
+    selected && dispatchQuote
       ? pricingApplication.resolve({
           offer,
           items: [
@@ -1064,11 +1276,11 @@ export async function evaluateOrdering(
             },
           ],
           orderContext: {
-            quoteTotalFen: rideQuoteBaseAmountFen(selectedQuote),
+            quoteTotalFen: rideQuoteBaseAmountFen(dispatchQuote),
           },
         })
       : null;
-  const selectablePrices = options
+  const selectablePrices = quotedCandidates
     .map((option) => option.quoteAmountFen)
     .filter((value): value is number => typeof value === "number");
 
@@ -1087,15 +1299,13 @@ export async function evaluateOrdering(
     },
     price: {
       currency: "CNY",
-      totalFen: pricingSnapshot?.totalFen ?? null,
+      totalFen: null,
       range: {
         minFen: selectablePrices.length ? Math.min(...selectablePrices) : null,
         maxFen: selectablePrices.length ? Math.max(...selectablePrices) : null,
       },
       explanations: [
-        ...(pricingSnapshot?.itemBreakdowns.flatMap(
-          (breakdown) => breakdown.explanations,
-        ) ?? []),
+        ...(pricingSnapshot?.itemBreakdowns.flatMap((breakdown) => breakdown.explanations) ?? []),
         ...(pricingSnapshot?.orderLevelExplanations ?? []),
       ],
     },
@@ -1127,7 +1337,7 @@ export async function createOrderCommand(
   input: CreateOrderCommandInput & {
     createdBy: string;
   },
-) {
+): Promise<CreateOrderCommandResult> {
   const commonProblem = validateCommonCommand({
     command: input,
     createdBy: input.createdBy,
@@ -1161,11 +1371,15 @@ export async function createOrderCommand(
         code: rentalProblem.code,
       });
     }
-    return createRentalOrderBranch({
+    const created = await createRentalOrderBranch({
       command: input,
       selected,
       createdBy: input.createdBy,
     });
+    return {
+      outcome: "CREATED",
+      ...created,
+    };
   }
 
   const selected = await resolveRideSelection({
diff --git a/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts b/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts
index 0f4d6066c..75c0f5fc8 100644
--- a/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts
+++ b/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts
@@ -7,6 +7,7 @@ import { ProductSkuRepository } from "../../../repositories/ProductSkuRepository
 import { ProductSpuRepository } from "../../../repositories/ProductSpuRepository";
 import { RideHailingOrderRepository } from "../../../repositories/RideHailingOrderRepository";
 import { RideHailingProviderInstanceRepository } from "../../../repositories/RideHailingProviderInstanceRepository";
+import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository";
 import { throwHttpProblem } from "../../../lib/problem-details";
 import type { PriceExplanation, RideHailingSkuFacts } from "../../merchandising";
 import { createRideHailingProviderPort } from "../../ride-hailing";
@@ -17,12 +18,18 @@ import type {
   RideHailingRouteSnapshot,
   RideHailingVehicleSnapshot,
 } from "../model";
-import { getOrderItemSkuName, PricingApplication } from "../services";
+import {
+  getOrderItemSkuName,
+  getRideHailingChoiceSetItem,
+  getRideHailingProviderBinding,
+  PricingApplication,
+} from "../services";
 
 const productSpuRepo = new ProductSpuRepository();
 const productSkuRepo = new ProductSkuRepository();
 const providerRepo = new RideHailingProviderInstanceRepository();
 const rideOrderRepo = new RideHailingOrderRepository();
+const tradeOrderRepo = new TradeOrderRepository();
 const pricingApplication = new PricingApplication();
 
 type RideSku = ProductSku & { facts: RideHailingSkuFacts };
@@ -52,9 +59,7 @@ const isRideHailingSkuFacts = (value: unknown): value is RideHailingSkuFacts =>
   typeof value.rideHailingProviderInstanceId === "string" &&
   typeof value.providerVehicleTypeCode === "string";
 
-async function listRideSkus(
-  offer: Offer,
-): Promise<Array<{ spu: ProductSpu; sku: RideSku }>> {
+async function listRideSkus(offer: Offer): Promise<Array<{ spu: ProductSpu; sku: RideSku }>> {
   const result: Array<{ spu: ProductSpu; sku: RideSku }> = [];
   for (const spuId of offer.spuIds) {
     const spu = await productSpuRepo.findById(spuId);
@@ -145,22 +150,16 @@ async function quoteSku(input: {
       providerInstanceId: provider.id,
       selected: false,
       selectable: false,
-      disabledReason:
-        error instanceof Error ? error.message : "Provider quote failed",
+      disabledReason: error instanceof Error ? error.message : "Provider quote failed",
       estimateAmountFen: null,
       quoteAmountFen: null,
       priceExplanations: [],
     };
   }
   const estimateAmountFen =
-    readNumber(rawEstimate, [
-      "estimateAmountFen",
-      "estimatePriceFen",
-      "estimate_price",
-      "price",
-    ]) ?? 0;
-  const carTypeName =
-    readString(rawEstimate, ["carTypeName", "car_type_name"]) ?? input.sku.name;
+    readNumber(rawEstimate, ["estimateAmountFen", "estimatePriceFen", "estimate_price", "price"]) ??
+    0;
+  const carTypeName = readString(rawEstimate, ["carTypeName", "car_type_name"]) ?? input.sku.name;
   const pricingSnapshot = pricingApplication.resolve({
     offer: input.offer,
     items: [
@@ -191,9 +190,7 @@ async function quoteSku(input: {
     estimateAmountFen,
     quoteAmountFen: pricingSnapshot.totalFen,
     priceExplanations: [
-      ...pricingSnapshot.itemBreakdowns.flatMap(
-        (breakdown) => breakdown.explanations,
-      ),
+      ...pricingSnapshot.itemBreakdowns.flatMap((breakdown) => breakdown.explanations),
       ...pricingSnapshot.orderLevelExplanations,
     ],
   };
@@ -203,8 +200,12 @@ export async function evaluateRideOptions(input: {
   offer: Offer;
   route: RideHailingRouteSnapshot;
   selectedSkuId?: number | null;
+  candidateSkuIds?: number[] | null;
 }): Promise<RideQuoteOption[]> {
-  const skus = await listRideSkus(input.offer);
+  const candidateSkuIds = new Set(input.candidateSkuIds ?? []);
+  const skus = (await listRideSkus(input.offer)).filter(
+    ({ sku }) => candidateSkuIds.size === 0 || candidateSkuIds.has(sku.id),
+  );
   const options = await Promise.all(
     skus.map(({ spu, sku }) =>
       quoteSku({
@@ -219,9 +220,7 @@ export async function evaluateRideOptions(input: {
     input.selectedSkuId ??
     options
       .filter((option) => option.selectable && option.quoteAmountFen !== null)
-      .sort(
-        (left, right) => (left.quoteAmountFen ?? 0) - (right.quoteAmountFen ?? 0),
-      )[0]?.skuId ??
+      .sort((left, right) => (left.quoteAmountFen ?? 0) - (right.quoteAmountFen ?? 0))[0]?.skuId ??
     null;
   return options.map((option) => ({
     ...option,
@@ -303,14 +302,18 @@ export async function buildRideHailingDetailProjection(input: {
     });
   }
 
+  const choiceSetItem = getRideHailingChoiceSetItem(input.order.items);
+  const providerBinding = choiceSetItem ? getRideHailingProviderBinding(choiceSetItem) : null;
   let providerDetail: ProviderDetailProjection | null = null;
-  if (rideOrder.providerOrderId) {
-    const provider = await providerRepo.findById(rideOrder.providerInstanceId);
+  if (providerBinding?.providerOrderId) {
+    const provider = await providerRepo.findById(
+      providerBinding.providerInstanceId as RideHailingProviderInstanceId,
+    );
     if (provider) {
       const port = createRideHailingProviderPort({ providerInstance: provider });
       providerDetail = parseProviderDetail(
         await port.queryOrderDetail({
-          providerOrderId: rideOrder.providerOrderId,
+          providerOrderId: providerBinding.providerOrderId,
         }),
       );
     }
@@ -321,11 +324,13 @@ export async function buildRideHailingDetailProjection(input: {
     departureAt: rideOrder.departureAt?.toISOString() ?? null,
     riders: rideOrder.riders,
     contactPhone: rideOrder.contactPhone,
-    selectedVehicleName: input.order.items[0]
-      ? getOrderItemSkuName(input.order.items[0])
-      : "曹操出行",
+    selectedVehicleName: choiceSetItem
+      ? getOrderItemSkuName(choiceSetItem)
+      : input.order.items[0]
+        ? getOrderItemSkuName(input.order.items[0])
+        : "曹操出行",
     provider: {
-      providerOrderId: rideOrder.providerOrderId,
+      providerOrderId: providerBinding?.providerOrderId ?? null,
     },
     executionPhase: rideOrder.executionPhase,
     driver: rideOrder.driverSnapshot ?? providerDetail?.driver ?? null,
@@ -334,20 +339,26 @@ export async function buildRideHailingDetailProjection(input: {
   };
 }
 
-export async function confirmRideHailingProviderFeeAfterPayment(input: {
-  orderId: string;
-}) {
+export async function confirmRideHailingProviderFeeAfterPayment(input: { orderId: string }) {
   const rideOrder = await rideOrderRepo.findByOrderId(input.orderId as TradeOrderId);
-  if (!rideOrder?.providerOrderId) {
+  if (!rideOrder) {
+    return { applied: false, reason: "RideHailing order facts are missing" };
+  }
+  const order = await tradeOrderRepo.findById(input.orderId as TradeOrderId);
+  const choiceSetItem = order ? getRideHailingChoiceSetItem(order.items) : null;
+  const providerBinding = choiceSetItem ? getRideHailingProviderBinding(choiceSetItem) : null;
+  if (!providerBinding?.providerOrderId) {
     return { applied: false, reason: "RideHailing provider order is missing" };
   }
-  const provider = await providerRepo.findById(rideOrder.providerInstanceId);
+  const provider = await providerRepo.findById(
+    providerBinding.providerInstanceId as RideHailingProviderInstanceId,
+  );
   if (!provider) {
     return { applied: false, reason: "RideHailing provider instance is missing" };
   }
   const port = createRideHailingProviderPort({ providerInstance: provider });
   await port.confirmFee({
-    providerOrderId: rideOrder.providerOrderId,
+    providerOrderId: providerBinding.providerOrderId,
   });
   return {
     applied: true,
diff --git a/apps/backend/src/entities/product-sku.ts b/apps/backend/src/entities/product-sku.ts
index d424457f9..ce0939423 100644
--- a/apps/backend/src/entities/product-sku.ts
+++ b/apps/backend/src/entities/product-sku.ts
@@ -8,7 +8,13 @@ import {
   text,
   timestamp,
 } from "drizzle-orm/pg-core";
-import type { CatalogStatus, PricingModel, SkuFacts } from "../domains/merchandising/model";
+import { sql } from "drizzle-orm";
+import type {
+  CatalogStatus,
+  PricingModel,
+  ProductPresentation,
+  SkuFacts,
+} from "../domains/merchandising/model";
 import { productSpus, type ProductSpuId } from "./product-spu";
 
 export type SkuCancellationPolicyRef = {
@@ -28,6 +34,12 @@ export const productSkus = pgTable(
     status: text("status").$type<CatalogStatus>().notNull().default("DRAFT"),
     name: text("name").notNull(),
     sortOrder: integer("sort_order").notNull().default(0),
+    presentation: jsonb("presentation")
+      .$type<ProductPresentation>()
+      .notNull()
+      .default(
+        sql`'{"heroImageAssetIds":[],"detailImageAssetIds":[],"sellingPoints":[],"parameterGroups":[],"noticeBlocks":[]}'::jsonb`,
+      ),
     facts: jsonb("facts").$type<SkuFacts>().notNull(),
     pricingModel: jsonb("pricing_model").$type<PricingModel>().notNull(),
     cancellationPolicyRef: jsonb("cancellation_policy_ref")
@@ -37,10 +49,7 @@ export const productSkus = pgTable(
     updatedAt: timestamp("updated_at", { withTimezone: true }).notNull().defaultNow(),
   },
   (table) => ({
-    spuSortOrderIdx: index("product_skus_spu_sort_order_idx").on(
-      table.spuId,
-      table.sortOrder,
-    ),
+    spuSortOrderIdx: index("product_skus_spu_sort_order_idx").on(table.spuId, table.sortOrder),
   }),
 );
 
diff --git a/apps/backend/src/entities/ride-hailing-order.ts b/apps/backend/src/entities/ride-hailing-order.ts
index f9bc70280..2488fecdc 100644
--- a/apps/backend/src/entities/ride-hailing-order.ts
+++ b/apps/backend/src/entities/ride-hailing-order.ts
@@ -8,10 +8,6 @@ import type {
   RideHailingRouteSnapshot,
   RideHailingVehicleSnapshot,
 } from "../domains/trade/model";
-import {
-  rideHailingProviderInstances,
-  type RideHailingProviderInstanceId,
-} from "./ride-hailing-provider";
 import { tradeOrders, type TradeOrderId } from "./trade-order";
 
 export const rideHailingOrders = pgTable(
@@ -21,20 +17,10 @@ export const rideHailingOrders = pgTable(
       .$type<TradeOrderId>()
       .primaryKey()
       .references(() => tradeOrders.id, { onDelete: "cascade" }),
-    routeSnapshot: jsonb("route_snapshot")
-      .$type<RideHailingRouteSnapshot>()
-      .notNull(),
+    routeSnapshot: jsonb("route_snapshot").$type<RideHailingRouteSnapshot>().notNull(),
     departureAt: timestamp("departure_at", { withTimezone: true }),
-    riders: jsonb("riders")
-      .$type<RideHailingRiderSnapshot[]>()
-      .notNull()
-      .default(sql`'[]'::jsonb`),
+    riders: jsonb("riders").$type<RideHailingRiderSnapshot[]>().notNull().default(sql`'[]'::jsonb`),
     contactPhone: text("contact_phone").notNull(),
-    providerInstanceId: uuid("provider_instance_id")
-      .$type<RideHailingProviderInstanceId>()
-      .notNull()
-      .references(() => rideHailingProviderInstances.id, { onDelete: "restrict" }),
-    providerOrderId: text("provider_order_id"),
     executionPhase: text("execution_phase")
       .$type<RideHailingExecutionPhase>()
       .notNull()
@@ -52,18 +38,8 @@ export const rideHailingOrders = pgTable(
     updatedAt: timestamp("updated_at", { withTimezone: true }).notNull().defaultNow(),
   },
   (table) => ({
-    departureAtIdx: index("ride_hailing_orders_departure_at_idx").on(
-      table.departureAt,
-    ),
-    providerInstanceIdx: index("ride_hailing_orders_provider_instance_idx").on(
-      table.providerInstanceId,
-    ),
-    providerOrderIdx: index("ride_hailing_orders_provider_order_idx").on(
-      table.providerOrderId,
-    ),
-    executionPhaseIdx: index("ride_hailing_orders_execution_phase_idx").on(
-      table.executionPhase,
-    ),
+    departureAtIdx: index("ride_hailing_orders_departure_at_idx").on(table.departureAt),
+    executionPhaseIdx: index("ride_hailing_orders_execution_phase_idx").on(table.executionPhase),
   }),
 );
 
diff --git a/apps/backend/src/repositories/TradeOrderRepository.ts b/apps/backend/src/repositories/TradeOrderRepository.ts
index f15506c9d..dc5b58403 100644
--- a/apps/backend/src/repositories/TradeOrderRepository.ts
+++ b/apps/backend/src/repositories/TradeOrderRepository.ts
@@ -8,6 +8,7 @@ import {
 } from "../entities/trade-order";
 import type { OfferId } from "../entities/offer";
 import type {
+  OrderItemSnapshot,
   OrderStatus,
   OrderTerminationAttempt,
 } from "../domains/trade/model";
@@ -17,26 +18,17 @@ export class TradeOrderRepository {
   constructor(private readonly executor: RepositoryExecutor = db) {}
 
   async create(data: NewTradeOrder): Promise<TradeOrder> {
-    const result = await this.executor
-      .insert(tradeOrders)
-      .values(data)
-      .returning();
+    const result = await this.executor.insert(tradeOrders).values(data).returning();
     return result[0]!;
   }
 
   async findById(id: TradeOrderId): Promise<TradeOrder | null> {
-    const result = await this.executor
-      .select()
-      .from(tradeOrders)
-      .where(eq(tradeOrders.id, id));
+    const result = await this.executor.select().from(tradeOrders).where(eq(tradeOrders.id, id));
     return result[0] ?? null;
   }
 
   async listAll(): Promise<TradeOrder[]> {
-    return this.executor
-      .select()
-      .from(tradeOrders)
-      .orderBy(desc(tradeOrders.createdAt));
+    return this.executor.select().from(tradeOrders).orderBy(desc(tradeOrders.createdAt));
   }
 
   async listByIds(ids: TradeOrderId[]): Promise<TradeOrder[]> {
@@ -99,6 +91,18 @@ export class TradeOrderRepository {
     return result[0] ?? null;
   }
 
+  async replaceItems(id: TradeOrderId, items: OrderItemSnapshot[]): Promise<TradeOrder | null> {
+    const result = await this.executor
+      .update(tradeOrders)
+      .set({
+        items,
+        updatedAt: new Date(),
+      })
+      .where(eq(tradeOrders.id, id))
+      .returning();
+    return result[0] ?? null;
+  }
+
   async applyTerminationState(input: {
     id: TradeOrderId;
     status: OrderStatus;
diff --git a/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts b/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts
index dade9a0fb..7ef4cda2f 100644
--- a/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts
+++ b/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts
@@ -9,10 +9,7 @@ import { RideHailingOrderRepository } from "../../src/repositories/RideHailingOr
 import { TradeOrderRepository } from "../../src/repositories/TradeOrderRepository";
 import { BillLineRepository } from "../../src/repositories/BillLineRepository";
 import { BillRepository } from "../../src/repositories/BillRepository";
-import {
-  createCaocaoSignature,
-  encodeCaocaoExternalOrderId,
-} from "../../src/domains/ride-hailing";
+import { createCaocaoSignature, encodeCaocaoExternalOrderId } from "../../src/domains/ride-hailing";
 import type { TradeOrderId } from "../../src/entities/trade-order";
 
 const providerRepo = new RideHailingProviderInstanceRepository();
@@ -83,18 +80,15 @@ scenario("legacy Caocao callback alias resolves provider and requires local orde
     updatedAt: new Date("2020-01-01T00:01:00.000Z"),
   });
 
-  const validResponse = await requestJson(
-    "/api/v1/service_provider/caocao/callback/order",
-    {
-      method: "POST",
-      headers: {
-        "content-type": "application/x-www-form-urlencoded",
-      },
-      body: buildCallbackForm({
-        signKey: "scenario-caocao-secret-first",
-      }).toString(),
+  const validResponse = await requestJson("/api/v1/service_provider/caocao/callback/order", {
+    method: "POST",
+    headers: {
+      "content-type": "application/x-www-form-urlencoded",
     },
-  );
+    body: buildCallbackForm({
+      signKey: "scenario-caocao-secret-first",
+    }).toString(),
+  });
 
   assert.equal(validResponse.status, 404);
 
@@ -138,7 +132,10 @@ scenario("Caocao callback updates ride execution and creates final bill", async
     status: "ACTIVE",
     salesPolicy: {
       skuSelectionPolicy: {
-        type: "EXACTLY_ONE",
+        type: "CHOICE_SET",
+        min: 1,
+        max: null,
+        resolvesTo: 1,
       },
       quantityPolicy: {
         type: "FIXED",
@@ -182,20 +179,83 @@ scenario("Caocao callback updates ride execution and creates final bill", async
     },
     items: [
       {
+        kind: "CHOICE_SET",
         itemId: randomUUID(),
-        sku: {
-          id: 930001,
-          version: 1,
-          name: "Scenario Caocao Express",
-          factsSnapshot: {
-            rideHailingProviderInstanceId: provider.id,
-            providerVehicleTypeCode: "EXPRESS",
+        productType: "RIDE_HAILING",
+        candidates: [
+          {
+            sku: {
+              id: 930001,
+              version: 1,
+              name: "Scenario Caocao Express",
+              presentationSnapshot: {
+                heroImageAssetIds: [],
+                detailImageAssetIds: [],
+                sellingPoints: [],
+                parameterGroups: [],
+                noticeBlocks: [],
+              },
+              factsSnapshot: {
+                rideHailingProviderInstanceId: provider.id,
+                providerVehicleTypeCode: "EXPRESS",
+              },
+              pricingModelSnapshot: {
+                type: "DYNAMIC_QUOTE",
+                calculatorSpec: {},
+              },
+              cancellationPolicySnapshot: null,
+            },
+            quoteSnapshot: {
+              amountFen: 3600,
+              currency: "CNY",
+              displayName: "Scenario Caocao Express",
+              estimateAmountFen: 3600,
+              quotedAt: "2031-01-01T00:00:00.000Z",
+              explanations: [],
+            },
+          },
+        ],
+        resolution: {
+          sku: {
+            id: 930001,
+            version: 1,
+            name: "Scenario Caocao Express",
+            presentationSnapshot: {
+              heroImageAssetIds: [],
+              detailImageAssetIds: [],
+              sellingPoints: [],
+              parameterGroups: [],
+              noticeBlocks: [],
+            },
+            factsSnapshot: {
+              rideHailingProviderInstanceId: provider.id,
+              providerVehicleTypeCode: "EXPRESS",
+            },
+            pricingModelSnapshot: {
+              type: "DYNAMIC_QUOTE",
+              calculatorSpec: {},
+            },
+            cancellationPolicySnapshot: null,
+          },
+          providerVehicleTypeCode: "EXPRESS",
+          providerVehicleTypeName: "Scenario Caocao Express",
+          quoteSnapshot: {
+            amountFen: 3600,
+            currency: "CNY",
+            displayName: "Scenario Caocao Express",
+            estimateAmountFen: 3600,
+            quotedAt: "2031-01-01T00:00:00.000Z",
+            explanations: [],
           },
-          pricingModelSnapshot: {
-            type: "DYNAMIC_QUOTE",
-            calculatorSpec: {},
+          providerBinding: {
+            providerInstanceId: provider.id,
+            providerType: "CAOCAO",
+            providerOrderId: "CC-FINAL-123",
           },
-          cancellationPolicySnapshot: null,
+          source: "DISPATCH_POLICY",
+          candidateRelation: "IN_CANDIDATES",
+          reason: null,
+          resolvedAt: "2031-01-01T00:00:00.000Z",
         },
         quantity: 1,
       },
@@ -231,8 +291,6 @@ scenario("Caocao callback updates ride execution and creates final bill", async
       },
     ],
     contactPhone: "13800138000",
-    providerInstanceId: provider.id,
-    providerOrderId: null,
     executionPhase: "INITIATING",
   });
 
@@ -257,9 +315,9 @@ scenario("Caocao callback updates ride execution and creates final bill", async
   const updatedOrder = await tradeOrderRepo.findById(order.id);
   assert.equal(updatedOrder?.status, "OPEN");
   const updatedRide = await rideOrderRepo.findByOrderId(order.id as TradeOrderId);
-  assert.equal(updatedRide?.providerOrderId, "CC-FINAL-123");
   assert.equal(updatedRide?.executionPhase, "FINISHED");
   assert.equal(updatedRide?.finalSettlementInput?.amountFen, 4321);
+  assert.equal(updatedRide?.finalSettlementInput?.providerOrderId, "CC-FINAL-123");
   assert.equal(updatedRide?.driverSnapshot?.driverName, "张师傅");
   assert.equal(updatedRide?.vehicleSnapshot?.plate, "浙A12345");
   const bill = await billRepo.findBySourceOrderId(order.id);
diff --git a/apps/backend/tests/ride-hailing/ride-hailing-order-foundation.scenario.test.ts b/apps/backend/tests/ride-hailing/ride-hailing-order-foundation.scenario.test.ts
index 7933679d3..e1d7d443d 100644
--- a/apps/backend/tests/ride-hailing/ride-hailing-order-foundation.scenario.test.ts
+++ b/apps/backend/tests/ride-hailing/ride-hailing-order-foundation.scenario.test.ts
@@ -3,10 +3,7 @@ import { randomUUID } from "node:crypto";
 import { scenario } from "../_infra/scenario/scenario";
 import { givenUser, type ScenarioUser } from "../pr-core/_kit/builders/users";
 import { db } from "../../src/lib/db";
-import {
-  createOffer,
-  createProductSpu,
-} from "../../src/domains/merchandising";
+import { createOffer, createProductSpu } from "../../src/domains/merchandising";
 import {
   buildOrderParticipantsFromContext,
   createRideHailingOrderFoundation,
@@ -57,9 +54,7 @@ async function givenRideHailingPr(creator: ScenarioUser): Promise<PRId> {
 }
 
 async function listPrOrderParticipants(prId: PRId, createdBy: string) {
-  const activeParticipants = await partnerRepo.listActiveParticipantSummariesByPrId(
-    prId,
-  );
+  const activeParticipants = await partnerRepo.listActiveParticipantSummariesByPrId(prId);
 
   return buildOrderParticipantsFromContext({
     participants: activeParticipants.map((participant) => ({
@@ -78,7 +73,10 @@ async function givenRideHailingOffer() {
     status: "ACTIVE",
     salesPolicy: {
       skuSelectionPolicy: {
-        type: "EXACTLY_ONE",
+        type: "CHOICE_SET",
+        min: 1,
+        max: null,
+        resolvesTo: 1,
       },
       quantityPolicy: {
         type: "FIXED",
@@ -136,21 +134,43 @@ scenario("ride_hailing_order_foundation_persists_base_typed_and_provider_binding
         offerId: offer.id,
         items: [
           {
+            kind: "CHOICE_SET",
             itemId,
-            sku: {
-              id: 901001,
-              version: 1,
-              name: "Scenario Caocao Express",
-              factsSnapshot: {
-                rideHailingProviderInstanceId: provider.id,
-                providerVehicleTypeCode: "1",
-              },
-              pricingModelSnapshot: {
-                type: "DYNAMIC_QUOTE",
-                calculatorSpec: {},
+            productType: "RIDE_HAILING",
+            candidates: [
+              {
+                sku: {
+                  id: 901001,
+                  version: 1,
+                  name: "Scenario Caocao Express",
+                  presentationSnapshot: {
+                    heroImageAssetIds: [],
+                    detailImageAssetIds: [],
+                    sellingPoints: [],
+                    parameterGroups: [],
+                    noticeBlocks: [],
+                  },
+                  factsSnapshot: {
+                    rideHailingProviderInstanceId: provider.id,
+                    providerVehicleTypeCode: "1",
+                  },
+                  pricingModelSnapshot: {
+                    type: "DYNAMIC_QUOTE",
+                    calculatorSpec: {},
+                  },
+                  cancellationPolicySnapshot: null,
+                },
+                quoteSnapshot: {
+                  amountFen: 3600,
+                  currency: "CNY",
+                  displayName: "Scenario Caocao Express",
+                  estimateAmountFen: 3600,
+                  quotedAt: "2031-03-01T09:00:00.000Z",
+                  explanations: [],
+                },
               },
-              cancellationPolicySnapshot: null,
-            },
+            ],
+            resolution: null,
             quantity: 1,
           },
         ],
@@ -205,7 +225,6 @@ scenario("ride_hailing_order_foundation_persists_base_typed_and_provider_binding
           },
         ],
         contactPhone: "13800138000",
-        providerInstanceId: provider.id,
       },
       tx,
     );
@@ -230,6 +249,15 @@ scenario("ride_hailing_order_foundation_persists_base_typed_and_provider_binding
   assert.equal(baseOrder.family, "RIDE_HAILING");
   assert.equal(baseOrder.offerId, offer.id);
   assert.equal(baseOrder.status, "INITIATING");
+  assert.equal(baseOrder.items[0]?.kind, "CHOICE_SET");
+  const choiceSetItem = baseOrder.items[0]?.kind === "CHOICE_SET" ? baseOrder.items[0] : null;
+  assert.ok(choiceSetItem, "RideHailing base item should be a choice set");
+  assert.equal(choiceSetItem.productType, "RIDE_HAILING");
+  assert.equal(
+    choiceSetItem.candidates[0]?.sku.factsSnapshot.rideHailingProviderInstanceId,
+    provider.id,
+  );
+  assert.equal(choiceSetItem.resolution, null);
   assert.equal(hasOwnKey(baseOrder, "routeSnapshot"), false);
   assert.equal(hasOwnKey(baseOrder, "providerCreationStatus"), false);
   assert.equal(hasOwnKey(baseOrder, "dispatchState"), false);
@@ -244,8 +272,8 @@ scenario("ride_hailing_order_foundation_persists_base_typed_and_provider_binding
   assert.equal(typedOrder.departureAt, null);
   assert.equal(typedOrder.riders[0]?.userId, creator.user.id);
   assert.equal(typedOrder.contactPhone, "13800138000");
-  assert.equal(typedOrder.providerInstanceId, provider.id);
-  assert.equal(typedOrder.providerOrderId, null);
+  assert.equal(hasOwnKey(typedOrder, "providerInstanceId"), false);
+  assert.equal(hasOwnKey(typedOrder, "providerOrderId"), false);
   assert.equal(hasOwnKey(typedOrder, "providerCreationStatus"), false);
   assert.equal(hasOwnKey(typedOrder, "executionProjection"), false);
   assert.equal(hasOwnKey(typedOrder, "dispatchState"), false);
diff --git a/apps/frontend/src/domains/admin-commerce/model/product-management/skuEditorModel.ts b/apps/frontend/src/domains/admin-commerce/model/product-management/skuEditorModel.ts
index b41206e9a..cf0ffa452 100644
--- a/apps/frontend/src/domains/admin-commerce/model/product-management/skuEditorModel.ts
+++ b/apps/frontend/src/domains/admin-commerce/model/product-management/skuEditorModel.ts
@@ -7,6 +7,7 @@ import {
 
 type SkuPricingModel = AdminProductSkuInput["pricingModel"];
 type SkuFacts = AdminProductSkuInput["facts"];
+type SkuPresentation = AdminProductSkuInput["presentation"];
 
 export type SkuEditorForm = {
   name: string;
@@ -32,24 +33,27 @@ export type SkuBuildLabels = {
 
 const isDynamicQuotePricingModel = (
   value: SkuPricingModel,
-): value is Extract<SkuPricingModel, { type: "DYNAMIC_QUOTE" }> =>
-  value.type === "DYNAMIC_QUOTE";
+): value is Extract<SkuPricingModel, { type: "DYNAMIC_QUOTE" }> => value.type === "DYNAMIC_QUOTE";
 
-const isRentalSkuFacts = (
-  value: SkuFacts,
-): value is Extract<SkuFacts, { type: "RENTAL" }> =>
+const isRentalSkuFacts = (value: SkuFacts): value is Extract<SkuFacts, { type: "RENTAL" }> =>
   "type" in value && value.type === "RENTAL";
 
-const isRideHailingSkuFacts = (
-  value: SkuFacts,
-): value is Exclude<SkuFacts, { type: "RENTAL" }> =>
-  "rideHailingProviderInstanceId" in value &&
-  "providerVehicleTypeCode" in value;
+const isRideHailingSkuFacts = (value: SkuFacts): value is Exclude<SkuFacts, { type: "RENTAL" }> =>
+  "rideHailingProviderInstanceId" in value && "providerVehicleTypeCode" in value;
+
+const emptySkuPresentation = (): SkuPresentation => ({
+  heroImageAssetIds: [],
+  detailImageAssetIds: [],
+  sellingPoints: [],
+  parameterGroups: [],
+  noticeBlocks: [],
+});
 
 export const emptySkuInput = (): Omit<AdminProductSkuInput, "spuId"> => ({
   name: "",
   status: "DRAFT",
   sortOrder: 0,
+  presentation: emptySkuPresentation(),
   facts: {
     type: "RENTAL",
     zoneCode: "",
@@ -63,21 +67,15 @@ export const emptySkuInput = (): Omit<AdminProductSkuInput, "spuId"> => ({
   cancellationPolicyRef: null,
 });
 
-export const toSkuForm = (
-  input: Omit<AdminProductSkuInput, "spuId">,
-): SkuEditorForm => {
+export const toSkuForm = (input: Omit<AdminProductSkuInput, "spuId">): SkuEditorForm => {
   const pricingModel = input.pricingModel;
   return {
     name: input.name,
     status: input.status,
     sortOrder: input.sortOrder,
     rentalZoneCode: isRentalSkuFacts(input.facts) ? input.facts.zoneCode : "",
-    rentalParticipantCount: isRentalSkuFacts(input.facts)
-      ? input.facts.participantCount
-      : 2,
-    rentalDurationMinutes: isRentalSkuFacts(input.facts)
-      ? input.facts.durationMinutes
-      : 180,
+    rentalParticipantCount: isRentalSkuFacts(input.facts) ? input.facts.participantCount : 2,
+    rentalDurationMinutes: isRentalSkuFacts(input.facts) ? input.facts.durationMinutes : 180,
     rideProviderInstanceId: isRideHailingSkuFacts(input.facts)
       ? input.facts.rideHailingProviderInstanceId
       : "",
@@ -104,23 +102,16 @@ const buildSkuFacts = (
   return {
     type: "RENTAL",
     zoneCode: form.rentalZoneCode.trim(),
-    participantCount: parseIntegerField(
-      form.rentalParticipantCount,
-      labels.participantCountLabel,
-      { min: 1 },
-    ),
-    durationMinutes: parseIntegerField(
-      form.rentalDurationMinutes,
-      labels.durationMinutesLabel,
-      { min: 1 },
-    ),
+    participantCount: parseIntegerField(form.rentalParticipantCount, labels.participantCountLabel, {
+      min: 1,
+    }),
+    durationMinutes: parseIntegerField(form.rentalDurationMinutes, labels.durationMinutesLabel, {
+      min: 1,
+    }),
   };
 };
 
-const buildSkuPricingModel = (
-  form: SkuEditorForm,
-  labels: SkuBuildLabels,
-): SkuPricingModel => {
+const buildSkuPricingModel = (form: SkuEditorForm, labels: SkuBuildLabels): SkuPricingModel => {
   if (form.pricingModelType === "DYNAMIC_QUOTE") {
     if (form.dynamicPricingModel === null) {
       throw new Error(labels.dynamicPricingMissingError);
@@ -136,12 +127,14 @@ const buildSkuPricingModel = (
 export const buildSkuInput = (
   form: SkuEditorForm,
   productType: ProductType | null,
+  presentation: SkuPresentation | null | undefined,
   cancellationPolicyRef: AdminProductSkuInput["cancellationPolicyRef"],
   labels: SkuBuildLabels,
 ): Omit<AdminProductSkuInput, "spuId"> => ({
   name: form.name.trim(),
   status: form.status,
   sortOrder: parseIntegerField(form.sortOrder, labels.sortOrderLabel),
+  presentation: presentation ?? emptySkuPresentation(),
   facts: buildSkuFacts(form, productType, labels),
   pricingModel: buildSkuPricingModel(form, labels),
   cancellationPolicyRef: cancellationPolicyRef ?? null,
diff --git a/apps/frontend/src/domains/admin-commerce/queries/useAdminCommerce.ts b/apps/frontend/src/domains/admin-commerce/queries/useAdminCommerce.ts
index 7c6dd3f11..3ed4526b5 100644
--- a/apps/frontend/src/domains/admin-commerce/queries/useAdminCommerce.ts
+++ b/apps/frontend/src/domains/admin-commerce/queries/useAdminCommerce.ts
@@ -4,10 +4,7 @@ import { computed, unref, type MaybeRef } from "vue";
 import { adminClient } from "@/lib/admin-rpc";
 import { queryKeys } from "@/shared/api/query-keys";
 
-const readErrorMessage = async (
-  response: Response,
-  fallback: string,
-): Promise<string> => {
+const readErrorMessage = async (response: Response, fallback: string): Promise<string> => {
   const payload = (await response.json()) as { error?: string; detail?: string };
   return payload.error || payload.detail || fallback;
 };
@@ -37,7 +34,9 @@ export type AdminProductSpuInput = {
   productType: "RENTAL" | "RIDE_HAILING";
   status: "DRAFT" | "ACTIVE" | "ARCHIVED";
   salesPolicy: {
-    skuSelectionPolicy: { type: "EXACTLY_ONE" };
+    skuSelectionPolicy:
+      | { type: "EXACTLY_ONE" }
+      | { type: "CHOICE_SET"; min: number; max?: number | null; resolvesTo: 1 };
     quantityPolicy:
       | { type: "FIXED"; quantity: number }
       | { type: "PER_PARTICIPANT" }
@@ -72,6 +71,13 @@ export type AdminProductSkuInput = {
   name: string;
   status: "DRAFT" | "ACTIVE" | "ARCHIVED";
   sortOrder: number;
+  presentation: {
+    heroImageAssetIds: string[];
+    detailImageAssetIds: string[];
+    sellingPoints: string[];
+    parameterGroups: Array<{ title: string; items: Array<{ label: string; value: string }> }>;
+    noticeBlocks: Array<{ title: string; content: string }>;
+  };
   facts:
     | {
         type: "RENTAL";
@@ -86,12 +92,10 @@ export type AdminProductSkuInput = {
   pricingModel:
     | { type: "FIXED_TOTAL"; amountFen: number }
     | { type: "DYNAMIC_QUOTE"; calculatorSpec: unknown };
-  cancellationPolicyRef?:
-    | {
-        policyId: string;
-        policyVersion: number;
-      }
-    | null;
+  cancellationPolicyRef?: {
+    policyId: string;
+    policyVersion: number;
+  } | null;
 };
 
 export type AdminSkuCancellationPolicyInput = {
@@ -149,9 +153,7 @@ export type AdminPlacementInput = {
   }>;
 };
 
-export const useAdminCommerceProductWorkspace = (
-  enabled: MaybeRef<boolean> = true,
-) =>
+export const useAdminCommerceProductWorkspace = (enabled: MaybeRef<boolean> = true) =>
   useQuery<AdminCommerceProductWorkspaceResponse>({
     queryKey: queryKeys.admin.commerceProductsWorkspace(),
     queryFn: async () => {
@@ -189,16 +191,8 @@ export const useUpdateAdminProductSpu = () => {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: async ({
-      spuId,
-      input,
-    }: {
-      spuId: number;
-      input: AdminProductSpuInput;
-    }) => {
-      const res = await adminClient.api.admin.commerce.products.spus[
-        ":spuId"
-      ].$patch({
+    mutationFn: async ({ spuId, input }: { spuId: number; input: AdminProductSpuInput }) => {
+      const res = await adminClient.api.admin.commerce.products.spus[":spuId"].$patch({
         param: { spuId: spuId.toString() },
         json: input,
       });
@@ -247,9 +241,7 @@ export const useUpdateAdminProductSku = () => {
       skuId: number;
       input: Omit<AdminProductSkuInput, "spuId">;
     }) => {
-      const res = await adminClient.api.admin.commerce.products.skus[
-        ":skuId"
-      ].$patch({
+      const res = await adminClient.api.admin.commerce.products.skus[":skuId"].$patch({
         param: { skuId: skuId.toString() },
         json: input,
       });
@@ -277,9 +269,9 @@ export const useSaveAdminSkuCancellationPolicy = () => {
       skuId: number;
       input: AdminSkuCancellationPolicyInput;
     }) => {
-      const res = await adminClient.api.admin.commerce.products.skus[
-        ":skuId"
-      ]["cancellation-policy"].$post({
+      const res = await adminClient.api.admin.commerce.products.skus[":skuId"][
+        "cancellation-policy"
+      ].$post({
         param: { skuId: skuId.toString() },
         json: input,
       });
@@ -296,14 +288,11 @@ export const useSaveAdminSkuCancellationPolicy = () => {
   });
 };
 
-export const useAdminCommercePlacementOfferWorkspace = (
-  enabled: MaybeRef<boolean> = true,
-) =>
+export const useAdminCommercePlacementOfferWorkspace = (enabled: MaybeRef<boolean> = true) =>
   useQuery<AdminCommercePlacementOfferWorkspaceResponse>({
     queryKey: queryKeys.admin.commercePlacementOfferWorkspace(),
     queryFn: async () => {
-      const res =
-        await adminClient.api.admin.commerce["placement-offer"].workspace.$get();
+      const res = await adminClient.api.admin.commerce["placement-offer"].workspace.$get();
       if (!res.ok) {
         throw new Error(await readErrorMessage(res, "获取投放工作台失败"));
       }
@@ -337,19 +326,11 @@ export const useUpdateAdminOffer = () => {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: async ({
-      offerId,
-      input,
-    }: {
-      offerId: number;
-      input: AdminOfferInput;
-    }) => {
-      const res = await adminClient.api.admin.commerce.offers[":offerId"].$patch(
-        {
-          param: { offerId: offerId.toString() },
-          json: input,
-        },
-      );
+    mutationFn: async ({ offerId, input }: { offerId: number; input: AdminOfferInput }) => {
+      const res = await adminClient.api.admin.commerce.offers[":offerId"].$patch({
+        param: { offerId: offerId.toString() },
+        json: input,
+      });
       if (!res.ok) {
         throw new Error(await readErrorMessage(res, "更新 Offer 失败"));
       }
@@ -395,9 +376,7 @@ export const useUpdateAdminPlacement = () => {
       placementId: number;
       input: AdminPlacementInput;
     }) => {
-      const res = await adminClient.api.admin.commerce.placements[
-        ":placementId"
-      ].$patch({
+      const res = await adminClient.api.admin.commerce.placements[":placementId"].$patch({
         param: { placementId: placementId.toString() },
         json: input,
       });
@@ -414,9 +393,7 @@ export const useUpdateAdminPlacement = () => {
   });
 };
 
-export const useAdminCommerceOrderBillWorkspace = (
-  enabled: MaybeRef<boolean> = true,
-) =>
+export const useAdminCommerceOrderBillWorkspace = (enabled: MaybeRef<boolean> = true) =>
   useQuery<AdminCommerceOrderBillWorkspaceResponse>({
     queryKey: queryKeys.admin.commerceOrderBillWorkspace(),
     queryFn: async () => {
@@ -429,9 +406,7 @@ export const useAdminCommerceOrderBillWorkspace = (
     enabled: computed(() => unref(enabled)),
   });
 
-export const useAdminCommerceFulfillmentWorkspace = (
-  enabled: MaybeRef<boolean> = true,
-) =>
+export const useAdminCommerceFulfillmentWorkspace = (enabled: MaybeRef<boolean> = true) =>
   useQuery<AdminCommerceFulfillmentWorkspaceResponse>({
     queryKey: queryKeys.admin.commerceFulfillmentWorkspace(),
     queryFn: async () => {
@@ -455,9 +430,9 @@ export const useConfirmRentalFulfillmentBooking = () => {
       fulfillmentId: string;
       bookingNote: string | null;
     }) => {
-      const res = await adminClient.api.admin.commerce.fulfillments.rental[
-        ":fulfillmentId"
-      ]["confirm-booking"].$post({
+      const res = await adminClient.api.admin.commerce.fulfillments.rental[":fulfillmentId"][
+        "confirm-booking"
+      ].$post({
         param: { fulfillmentId },
         json: { bookingNote },
       });
@@ -488,9 +463,9 @@ export const useRejectRentalFulfillmentBooking = () => {
       fulfillmentId: string;
       bookingNote: string | null;
     }) => {
-      const res = await adminClient.api.admin.commerce.fulfillments.rental[
-        ":fulfillmentId"
-      ]["reject-booking"].$post({
+      const res = await adminClient.api.admin.commerce.fulfillments.rental[":fulfillmentId"][
+        "reject-booking"
+      ].$post({
         param: { fulfillmentId },
         json: { bookingNote },
       });
@@ -521,9 +496,9 @@ export const useApproveRentalFulfillmentCancellation = () => {
       fulfillmentId: string;
       reason: string | null;
     }) => {
-      const res = await adminClient.api.admin.commerce.fulfillments.rental[
-        ":fulfillmentId"
-      ]["approve-cancellation"].$post({
+      const res = await adminClient.api.admin.commerce.fulfillments.rental[":fulfillmentId"][
+        "approve-cancellation"
+      ].$post({
         param: { fulfillmentId },
         json: { reason },
       });
@@ -554,9 +529,9 @@ export const useDenyRentalFulfillmentCancellation = () => {
       fulfillmentId: string;
       reason: string | null;
     }) => {
-      const res = await adminClient.api.admin.commerce.fulfillments.rental[
-        ":fulfillmentId"
-      ]["deny-cancellation"].$post({
+      const res = await adminClient.api.admin.commerce.fulfillments.rental[":fulfillmentId"][
+        "deny-cancellation"
+      ].$post({
         param: { fulfillmentId },
         json: { reason },
       });
@@ -591,9 +566,9 @@ export const useRecordRentalFulfillmentEntryGuidance = () => {
         note: string | null;
       };
     }) => {
-      const res = await adminClient.api.admin.commerce.fulfillments.rental[
-        ":fulfillmentId"
-      ]["entry-guidance"].$post({
+      const res = await adminClient.api.admin.commerce.fulfillments.rental[":fulfillmentId"][
+        "entry-guidance"
+      ].$post({
         param: { fulfillmentId },
         json: input,
       });
diff --git a/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceSkuEditor.vue b/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceSkuEditor.vue
index 353b9a5f3..a5a77e1a8 100644
--- a/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceSkuEditor.vue
+++ b/apps/frontend/src/domains/admin-commerce/ui/product-management/sections/AdminCommerceSkuEditor.vue
@@ -134,6 +134,7 @@ watch(
       name: record.sku.name,
       status: record.sku.status,
       sortOrder: record.sku.sortOrder,
+      presentation: record.sku.presentation,
       facts: record.sku.facts,
       pricingModel: record.sku.pricingModel,
       cancellationPolicyRef: record.sku.cancellationPolicyRef ?? null,
@@ -161,6 +162,7 @@ const handleSaveSku = async () => {
     const input = buildSkuInput(
       skuForm.value,
       selectedProductType.value,
+      selectedSkuRecord.value?.sku.presentation,
       selectedSkuRecord.value?.sku.cancellationPolicyRef,
       buildLabels(),
     );
@@ -180,9 +182,7 @@ const handleSaveSku = async () => {
       input,
     });
   } catch (error) {
-    context.setErrorMessage(
-      error instanceof Error ? error.message : t("common.operationFailed"),
-    );
+    context.setErrorMessage(error instanceof Error ? error.message : t("common.operationFailed"));
   }
 };
 </script>
diff --git a/apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue b/apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue
index 8d58df11b..b5132b431 100644
--- a/apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue
+++ b/apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue
@@ -1,6 +1,6 @@
 <template>
   <template v-if="rideOffer">
-    <div class="ride-hailing-ordering-content">
+    <div ref="contentRoot" class="ride-hailing-ordering-content">
       <RouteMap
         class="ride-hailing-ordering-content__route-map"
         data-testid="ordering.ride-hailing.route-map"
@@ -13,12 +13,16 @@
         @route-point-click="openRoutePointDrawer"
       />
 
-      <div
+      <PuFloatPanel
+        v-model="ridePanelStop"
         class="ride-hailing-ordering-content__sheet"
         data-testid="ordering.ride-hailing.bottom-sheet"
+        :stops="ridePanelStops"
+        position="absolute"
+        :content-padding="false"
+        aria-label="车型面板"
+        :z-index="20"
       >
-        <div class="ride-hailing-ordering-content__handle" aria-hidden="true"></div>
-
         <div class="ride-hailing-ordering-content__vehicles">
           <RideHailingSkuCard
             v-for="option in visibleRideQuoteOptions"
@@ -26,12 +30,12 @@
             :display-name="option.displayName"
             :price-label="formatFen(option.quoteAmountFen)"
             :selectable="option.selectable"
-            :selected="option.skuId === selectedRideSkuId"
-            :disabled-reason="option.disabledReason"
-            @select="selectedRideSkuId = option.skuId"
+            :selected="rideSkuSelection.isSelected(option.skuId)"
+            :preview-src="skuPreviewSrc(option.skuId)"
+            @select="rideSkuSelection.toggle(option.skuId)"
           />
         </div>
-      </div>
+      </PuFloatPanel>
 
       <div
         class="ride-hailing-ordering-content__controls"
@@ -133,8 +137,16 @@
 </template>
 
 <script setup lang="ts">
-import { PuDrawer, PuFormItem, PuInlineNotice, PuInput } from "@partner-up-dev/design-web";
-import { computed, ref, watch } from "vue";
+import {
+  PuDrawer,
+  PuFloatPanel,
+  PuFormItem,
+  PuInlineNotice,
+  PuInput,
+  usePuSelect,
+  type PuFloatPanelStop,
+} from "@partner-up-dev/design-web";
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 import type {
   BoundOrderParticipant,
   OrderingContentInput,
@@ -174,6 +186,8 @@ type RideRouteSnapshot = Extract<
   { route: unknown }
 >["route"];
 type RideOffer = OrderingContentInput["offerDetail"];
+type RideSkuOption = RideOffer["spus"][number]["skuOptions"][number];
+type RidePanelStopValue = "minimized" | "normal" | "expanded";
 
 const props = defineProps<{
   input: OrderingContentInput;
@@ -184,7 +198,12 @@ const emit = defineEmits<{
   "update:summary": [value: OrderingContentSummary];
 }>();
 
-const selectedRideSkuId = ref<number | null>(null);
+const CONTROL_ROW_HEIGHT = 44;
+const DEFAULT_CONTENT_HEIGHT = 720;
+
+const contentRoot = ref<HTMLElement | null>(null);
+const contentHeight = ref(DEFAULT_CONTENT_HEIGHT);
+const ridePanelStop = ref<RidePanelStopValue>("normal");
 const rideContactPhone = ref("");
 const editableRoute = ref<Route | null>(null);
 const routePointDrawerOpen = ref(false);
@@ -197,6 +216,25 @@ const rideOffer = computed<RideOffer | null>(() =>
   props.input.offerDetail.productType === "RIDE_HAILING" ? props.input.offerDetail : null,
 );
 
+let contentResizeObserver: ResizeObserver | null = null;
+
+const updateContentHeight = (): void => {
+  const height = contentRoot.value?.getBoundingClientRect().height ?? DEFAULT_CONTENT_HEIGHT;
+  contentHeight.value = Number.isFinite(height) && height > 0 ? height : DEFAULT_CONTENT_HEIGHT;
+};
+
+onMounted(() => {
+  updateContentHeight();
+  if (typeof ResizeObserver === "undefined" || !contentRoot.value) return;
+  contentResizeObserver = new ResizeObserver(() => updateContentHeight());
+  contentResizeObserver.observe(contentRoot.value);
+});
+
+onUnmounted(() => {
+  contentResizeObserver?.disconnect();
+  contentResizeObserver = null;
+});
+
 const bindingValue = (key: string): unknown | null => readBindingValue(props.input.bindings, key);
 
 const isRideRouteSnapshot = (value: unknown): value is RideRouteSnapshot => {
@@ -358,12 +396,33 @@ const rideRouteForSubmit = computed<RideRouteSnapshot | null>(() => {
   };
 });
 
-const routeMapFitPadding: MapFitPadding = {
+const ridePanelStops = computed<PuFloatPanelStop[]>(() => {
+  const rootHeight = contentHeight.value || DEFAULT_CONTENT_HEIGHT;
+  const maxPanelHeight = Math.max(120, rootHeight - CONTROL_ROW_HEIGHT);
+  const minimized = Math.min(132, maxPanelHeight);
+  const normal = Math.min(Math.max(264, minimized + 96), maxPanelHeight);
+  const expanded = Math.min(Math.max(Math.round(rootHeight * 0.68), normal + 96), maxPanelHeight);
+  return [
+    { value: "minimized", label: "最小化", height: minimized },
+    { value: "normal", label: "正常", height: normal },
+    { value: "expanded", label: "展开", height: expanded },
+  ];
+});
+
+const activeRidePanelStop = computed(
+  () =>
+    ridePanelStops.value.find((stop) => stop.value === ridePanelStop.value) ??
+    ridePanelStops.value[1] ??
+    ridePanelStops.value[0] ??
+    null,
+);
+
+const routeMapFitPadding = computed<MapFitPadding>(() => ({
   top: 48,
   right: 32,
-  bottom: 260,
+  bottom: (activeRidePanelStop.value?.height ?? 264) + CONTROL_ROW_HEIGHT + 32,
   left: 32,
-};
+}));
 
 const rideBaseOptions = computed<RideVehicleOption[]>(
   () =>
@@ -387,6 +446,33 @@ const rideBaseOptions = computed<RideVehicleOption[]>(
     ) ?? [],
 );
 
+const rideSkuOptions = computed<RideSkuOption[]>(
+  () => rideOffer.value?.spus.flatMap((spu) => spu.skuOptions) ?? [],
+);
+
+const directImageSrc = (value: string | null | undefined): string | null => {
+  const normalized = value?.trim() ?? "";
+  if (!normalized) return null;
+  if (
+    normalized.startsWith("http://") ||
+    normalized.startsWith("https://") ||
+    normalized.startsWith("data:") ||
+    normalized.startsWith("blob:") ||
+    normalized.startsWith("/")
+  ) {
+    return normalized;
+  }
+  return null;
+};
+
+const skuPreviewSrc = (skuId: number): string | null => {
+  const sku = rideSkuOptions.value.find((option) => option.skuId === skuId);
+  return (
+    directImageSrc(sku?.presentation.heroImageAssetIds[0]) ??
+    directImageSrc(sku?.presentation.detailImageAssetIds[0])
+  );
+};
+
 const quoteOptionsInput = computed<RideHailingQuoteOptionsInput | null>(() => {
   const route = rideRouteForSubmit.value;
   if (!rideOffer.value || !route) return null;
@@ -400,13 +486,11 @@ const quoteOptionsInput = computed<RideHailingQuoteOptionsInput | null>(() => {
 
 const quoteOptionsQuery = useRideHailingQuoteOptions(quoteOptionsInput);
 
-const rideQuoteOptions = computed<RideVehicleOption[]>(() =>
-  quoteOptionsQuery.data.value?.options ?? rideBaseOptions.value,
+const rideQuoteOptions = computed<RideVehicleOption[]>(
+  () => quoteOptionsQuery.data.value?.options ?? rideBaseOptions.value,
 );
 
-const hasQuotedOptions = computed(
-  () => (quoteOptionsQuery.data.value?.options.length ?? 0) > 0,
-);
+const hasQuotedOptions = computed(() => (quoteOptionsQuery.data.value?.options.length ?? 0) > 0);
 
 const visibleRideQuoteOptions = computed<RideVehicleOption[]>(() =>
   hasQuotedOptions.value
@@ -414,14 +498,25 @@ const visibleRideQuoteOptions = computed<RideVehicleOption[]>(() =>
     : rideQuoteOptions.value,
 );
 
-const selectedRideQuoteOption = computed<RideVehicleOption | null>(() => {
-  if (selectedRideSkuId.value === null) return null;
-  return (
-    rideQuoteOptions.value.find((option) => option.skuId === selectedRideSkuId.value) ??
-    null
-  );
+const rideSkuSelection = usePuSelect<number>({
+  multiple: true,
+  isOptionDisabled: (skuId) =>
+    !visibleRideQuoteOptions.value.some((option) => option.skuId === skuId && option.selectable),
 });
 
+const selectedCandidateSkuIds = computed<number[]>(() =>
+  rideSkuSelection.selectedValues.value.filter((skuId) =>
+    visibleRideQuoteOptions.value.some((option) => option.skuId === skuId && option.selectable),
+  ),
+);
+
+const selectedRideQuoteOptions = computed<RideVehicleOption[]>(() =>
+  selectedCandidateSkuIds.value.flatMap((skuId) => {
+    const option = rideQuoteOptions.value.find((candidate) => candidate.skuId === skuId);
+    return option ? [option] : [];
+  }),
+);
+
 const rideDepartureLabel = computed(() => {
   const departureAt = editableDepartureAt.value;
   if (!departureAt) return "现在出发";
@@ -433,13 +528,13 @@ const editableDepartureInput = computed(() =>
 );
 
 const output = computed<OrderingContentOutput | null>(() => {
-  if (!rideOffer.value || selectedRideSkuId.value === null || !rideRouteForSubmit.value) {
+  if (!rideOffer.value || selectedCandidateSkuIds.value.length === 0 || !rideRouteForSubmit.value) {
     return null;
   }
-  const selectedOption = selectedRideQuoteOption.value;
   if (
-    !selectedOption?.selectable ||
-    typeof selectedOption.quoteAmountFen !== "number"
+    selectedRideQuoteOptions.value.some(
+      (option) => !option.selectable || typeof option.quoteAmountFen !== "number",
+    )
   ) {
     return null;
   }
@@ -452,7 +547,9 @@ const output = computed<OrderingContentOutput | null>(() => {
     })),
     items: [
       {
-        skuId: selectedRideSkuId.value,
+        kind: "CHOICE_SET",
+        productType: "RIDE_HAILING",
+        candidateSkuIds: selectedCandidateSkuIds.value,
         quantity: 1,
       },
     ],
@@ -466,11 +563,13 @@ const output = computed<OrderingContentOutput | null>(() => {
 });
 
 const summary = computed<OrderingContentSummary>(() => {
-  const selectedOption = selectedRideQuoteOption.value;
-  const selectablePrices = rideQuoteOptions.value
+  const selectablePrices = selectedRideQuoteOptions.value
     .filter((option) => option.selectable)
     .map((option) => option.quoteAmountFen)
     .filter((value): value is number => typeof value === "number");
+  const cheapestSelectedOption = [...selectedRideQuoteOptions.value]
+    .filter((option) => option.selectable && typeof option.quoteAmountFen === "number")
+    .sort((left, right) => (left.quoteAmountFen ?? 0) - (right.quoteAmountFen ?? 0))[0];
   const range =
     selectablePrices.length > 0
       ? {
@@ -482,11 +581,12 @@ const summary = computed<OrderingContentSummary>(() => {
     price: {
       currency: "CNY",
       totalFen:
-        typeof selectedOption?.quoteAmountFen === "number"
-          ? selectedOption.quoteAmountFen
+        selectablePrices.length > 0 &&
+        Math.min(...selectablePrices) === Math.max(...selectablePrices)
+          ? (selectablePrices[0] ?? null)
           : null,
       range,
-      explanations: selectedOption?.priceExplanations ?? [],
+      explanations: cheapestSelectedOption?.priceExplanations ?? [],
     },
   };
 });
@@ -558,13 +658,23 @@ const handleDepartureInput = (value: string) => {
 watch(
   visibleRideQuoteOptions,
   (next) => {
-    const currentOption = next.find((option) => option.skuId === selectedRideSkuId.value);
-    if (currentOption?.selectable) return;
+    const selectableSkuIds = new Set(
+      next.filter((option) => option.selectable).map((option) => option.skuId),
+    );
+    const currentSelection = rideSkuSelection.selectedValues.value.filter((skuId) =>
+      selectableSkuIds.has(skuId),
+    );
+    if (currentSelection.length !== rideSkuSelection.selectedValues.value.length) {
+      rideSkuSelection.setValue(currentSelection);
+    }
+    if (currentSelection.length > 0) return;
     const defaultOption =
       next.find((option) => option.selected && option.selectable) ??
-      next.find((option) => option.selectable) ??
+      [...next]
+        .filter((option) => option.selectable)
+        .sort((left, right) => (left.quoteAmountFen ?? 0) - (right.quoteAmountFen ?? 0))[0] ??
       null;
-    selectedRideSkuId.value = defaultOption?.skuId ?? null;
+    rideSkuSelection.setValue(defaultOption ? [defaultOption.skuId] : []);
   },
   { immediate: true },
 );
@@ -627,37 +737,17 @@ watch(
 }
 
 .ride-hailing-ordering-content__sheet {
-  position: absolute;
-  right: 0;
   bottom: var(--ride-hailing-ordering-content-control-row-height);
-  left: 0;
   z-index: 20;
-  pointer-events: auto;
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  max-height: 55%;
-  padding: 0 var(--sys-spacing-medium) var(--sys-spacing-small);
   border-radius: var(--sys-radius-large) var(--sys-radius-large) 0 0;
-  background: var(--sys-color-surface);
-  box-shadow: var(--sys-shadow-3);
-}
-
-.ride-hailing-ordering-content__handle {
-  width: 2rem;
-  height: 0.25rem;
-  margin: var(--sys-spacing-small) auto 0;
-  border-radius: 999px;
-  background: var(--sys-color-on-surface-variant);
 }
 
 .ride-hailing-ordering-content__vehicles {
   display: flex;
-  flex: 1 1 auto;
   flex-direction: column;
   gap: var(--sys-spacing-small);
   min-height: 0;
-  overflow: auto;
+  padding: 0 var(--sys-spacing-medium) var(--sys-spacing-small);
 }
 
 .ride-hailing-ordering-content__controls {
diff --git a/apps/frontend/src/domains/commerce/ui/ordering/RideHailingSkuCard.vue b/apps/frontend/src/domains/commerce/ui/ordering/RideHailingSkuCard.vue
index 182bc1858..ccc93ef0d 100644
--- a/apps/frontend/src/domains/commerce/ui/ordering/RideHailingSkuCard.vue
+++ b/apps/frontend/src/domains/commerce/ui/ordering/RideHailingSkuCard.vue
@@ -1,122 +1,168 @@
 <template>
-  <button
-    type="button"
+  <PuCard
+    as="button"
     class="ride-hailing-sku-card"
-    :class="{ 'is-selected': selected, 'is-disabled': !selectable }"
+    :class="{ 'is-selected': selected }"
+    type="button"
+    selectable
+    :active="selected"
     :disabled="!selectable"
+    variant="soft"
+    tone="neutral"
+    padding="sm"
+    gap="sm"
     data-testid="ordering.ride-hailing.vehicle-card"
     @click="$emit('select')"
   >
-    <div class="ride-hailing-sku-card__summary">
-      <div class="ride-hailing-sku-card__name">
-        <span class="i-mdi-information-outline" aria-hidden="true"></span>
-        <strong>{{ displayName }}</strong>
-      </div>
-      <div class="ride-hailing-sku-card__preview" aria-hidden="true">
-        <span class="i-mdi-car-side"></span>
+    <div class="ride-hailing-sku-card__layout">
+      <div class="ride-hailing-sku-card__meta">
+        <div class="ride-hailing-sku-card__name-row">
+          <strong>{{ displayName }}</strong>
+          <span
+            class="ride-hailing-sku-card__info-icon i-mdi-information-outline"
+            aria-hidden="true"
+          ></span>
+        </div>
+
+        <div class="ride-hailing-sku-card__preview" aria-hidden="true">
+          <img
+            v-if="resolvedPreviewSrc && !previewFailed"
+            :src="resolvedPreviewSrc"
+            :alt="displayName"
+            @error="previewFailed = true"
+          />
+          <span v-else class="i-mdi-car-side"></span>
+        </div>
       </div>
-    </div>
 
-    <div class="ride-hailing-sku-card__pricing">
-      <div class="ride-hailing-sku-card__price">
-        <span>{{ disabledReason ?? "预估" }}</span>
-        <strong>{{ priceLabel }}</strong>
+      <div class="ride-hailing-sku-card__pricing">
+        <span class="ride-hailing-sku-card__estimate">预估</span>
+        <div class="ride-hailing-sku-card__amount-stack">
+          <strong>{{ priceLabel }}</strong>
+          <span
+            class="ride-hailing-sku-card__checkbox"
+            :class="{ 'is-checked': selected }"
+            :data-testid="
+              selected ? 'ordering.ride-hailing.vehicle-card.selected' : undefined
+            "
+            aria-hidden="true"
+          >
+            <PuCheckbox
+              :model-value="selected"
+              :disabled="!selectable"
+              size="sm"
+              aria-label="选择车型"
+              tabindex="-1"
+            />
+          </span>
+        </div>
       </div>
-      <span
-        v-if="selected"
-        class="ride-hailing-sku-card__check i-mdi-checkbox-marked-circle"
-        data-testid="ordering.ride-hailing.vehicle-card.selected"
-        aria-hidden="true"
-      ></span>
     </div>
-  </button>
+  </PuCard>
 </template>
 
 <script setup lang="ts">
-defineProps<{
+import { PuCard, PuCheckbox } from "@partner-up-dev/design-web";
+import { computed, ref, watch } from "vue";
+
+const props = defineProps<{
   displayName: string;
   priceLabel: string;
   selectable: boolean;
   selected: boolean;
-  disabledReason: string | null;
+  previewSrc?: string | null;
 }>();
 
 defineEmits<{
   select: [];
 }>();
+
+const previewFailed = ref(false);
+
+const resolvedPreviewSrc = computed(() => {
+  const value = props.previewSrc?.trim() ?? "";
+  if (!value) return null;
+  if (
+    value.startsWith("http://") ||
+    value.startsWith("https://") ||
+    value.startsWith("data:") ||
+    value.startsWith("blob:") ||
+    value.startsWith("/")
+  ) {
+    return value;
+  }
+  return null;
+});
+
+watch(
+  () => props.previewSrc,
+  () => {
+    previewFailed.value = false;
+  },
+);
 </script>
 
 <style scoped lang="scss">
 .ride-hailing-sku-card {
-  display: flex;
-  align-items: stretch;
-  justify-content: space-between;
-  gap: var(--sys-spacing-medium);
   width: 100%;
   min-width: 0;
-  border: 0;
   border-radius: var(--sys-radius-small);
-  padding: var(--sys-spacing-small);
-  background: var(--sys-color-surface-container);
-  color: var(--sys-color-on-surface);
-  cursor: pointer;
-  font: inherit;
   text-align: left;
-  transition:
-    transform 150ms ease,
-    background-color 150ms ease;
-
-  &:active:not(:disabled) {
-    transform: scale(0.98);
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--sys-color-primary);
-    outline-offset: 2px;
-  }
 }
 
-.ride-hailing-sku-card.is-selected {
-  background: var(--sys-color-primary-container);
-}
-
-.ride-hailing-sku-card.is-disabled {
-  opacity: var(--sys-opacity-disabled);
-  cursor: not-allowed;
+.ride-hailing-sku-card__layout {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  align-items: stretch;
+  justify-content: space-between;
+  gap: var(--sys-spacing-medium);
 }
 
-.ride-hailing-sku-card__summary {
+.ride-hailing-sku-card__meta {
   display: flex;
   min-width: 0;
+  flex: 1 1 auto;
   flex-direction: column;
-  gap: var(--sys-spacing-xsmall);
+  gap: var(--sys-spacing-small);
 }
 
-.ride-hailing-sku-card__name {
+.ride-hailing-sku-card__name-row {
   display: flex;
+  min-width: 0;
   align-items: center;
   gap: var(--sys-spacing-xsmall);
 
-  span {
-    @include mx.pu-icon(small);
-    color: var(--sys-color-on-surface-variant);
-  }
-
   strong {
     @include mx.pu-font(control);
+    min-width: 0;
     overflow-wrap: anywhere;
   }
 }
 
+.ride-hailing-sku-card__info-icon {
+  @include mx.pu-icon(small);
+  flex: 0 0 auto;
+  color: var(--sys-color-on-surface-variant);
+}
+
 .ride-hailing-sku-card__preview {
   display: grid;
-  width: 6.25rem;
-  height: 4.25rem;
+  width: min(13.5rem, 100%);
+  min-height: 5rem;
+  aspect-ratio: 16 / 9;
   place-items: center;
+  overflow: hidden;
   border-radius: var(--sys-radius-small);
   background: var(--sys-color-primary-container);
   color: var(--sys-color-on-primary-container);
 
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
   span {
     @include mx.pu-icon(large);
   }
@@ -125,21 +171,24 @@ defineEmits<{
 .ride-hailing-sku-card__pricing {
   display: flex;
   flex: 0 0 auto;
+  min-width: 5.25rem;
   flex-direction: column;
   align-items: flex-end;
-  justify-content: space-around;
-  gap: var(--sys-spacing-small);
-}
-
-.ride-hailing-sku-card__price {
-  display: flex;
-  align-items: baseline;
-  gap: var(--sys-spacing-xsmall);
+  justify-content: space-between;
+  gap: var(--sys-spacing-medium);
+  text-align: right;
 
-  span {
+  .ride-hailing-sku-card__estimate {
     @include mx.pu-font(caption);
     color: var(--sys-color-on-surface-variant);
   }
+}
+
+.ride-hailing-sku-card__amount-stack {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--sys-spacing-small);
 
   strong {
     @include mx.pu-font(section);
@@ -147,8 +196,33 @@ defineEmits<{
   }
 }
 
-.ride-hailing-sku-card__check {
-  @include mx.pu-icon(small);
-  color: var(--sys-color-primary);
+.ride-hailing-sku-card__checkbox {
+  display: grid;
+  place-items: center;
+  color: var(--sys-color-on-surface-variant);
+  pointer-events: none;
+
+  &.is-checked {
+    color: var(--sys-color-primary);
+  }
+
+  :deep(.pu-checkbox) {
+    pointer-events: none;
+  }
+}
+
+@media (max-width: 420px) {
+  .ride-hailing-sku-card__layout {
+    gap: var(--sys-spacing-small);
+  }
+
+  .ride-hailing-sku-card__preview {
+    width: min(10rem, 100%);
+    min-height: 4.5rem;
+  }
+
+  .ride-hailing-sku-card__pricing {
+    min-width: 4.75rem;
+  }
 }
 </style>
diff --git a/apps/frontend/src/pages/CommerceOrderDetailPage.vue b/apps/frontend/src/pages/CommerceOrderDetailPage.vue
index 2d6db82e8..0ea0528f4 100644
--- a/apps/frontend/src/pages/CommerceOrderDetailPage.vue
+++ b/apps/frontend/src/pages/CommerceOrderDetailPage.vue
@@ -288,14 +288,24 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted } from "vue";
 import { useRoute } from "vue-router";
-import { PuButton, PuCard, PuInlineNotice, PuPageHeader, PuPageScaffold } from "@partner-up-dev/design-web";
+import {
+  PuButton,
+  PuCard,
+  PuInlineNotice,
+  PuPageHeader,
+  PuPageScaffold,
+} from "@partner-up-dev/design-web";
 import { useFallbackBack } from "@/shared/routing/useFallbackBack";
 import {
+  type CommerceOrderDetailResponse,
   useCancelRentalOrder,
   useCommerceOrderDetail,
   useMockRentalBookingConfirmation,
 } from "@/domains/commerce/queries/useCommerce";
 
+type OrderItemSnapshot = CommerceOrderDetailResponse["order"]["items"][number];
+type OrderSkuSnapshot = Extract<OrderItemSnapshot, { kind?: "FIXED"; sku: unknown }>["sku"];
+
 const route = useRoute();
 
 const orderId = computed(() => {
@@ -311,9 +321,15 @@ const confirmationMutation = useMockRentalBookingConfirmation();
 const detail = computed(() => orderQuery.data.value ?? null);
 const rideHailingDetail = computed(() => detail.value?.rideHailing ?? null);
 
-const primaryItemName = computed(
-  () => detail.value?.order.items[0]?.sku.name ?? "订单项目",
-);
+const readOrderItemSku = (item: OrderItemSnapshot): OrderSkuSnapshot | null => {
+  if ("sku" in item) return item.sku;
+  return item.resolution?.sku ?? item.candidates[0]?.sku ?? null;
+};
+
+const primaryItemName = computed(() => {
+  const item = detail.value?.order.items[0] ?? null;
+  return item ? (readOrderItemSku(item)?.name ?? "订单项目") : "订单项目";
+});
 
 const paymentStatusLabel = computed(() => {
   if (detail.value?.payment.status === "PAID") return "已支付";
@@ -367,14 +383,15 @@ const canConfirmRentalBooking = computed(
 
 const cancellationPolicySummary = computed(() => {
   const items = detail.value?.order.items ?? [];
-  return items.flatMap((item) =>
-    (item.sku.cancellationPolicySnapshot?.tiers ?? []).map(
+  return items.flatMap((item) => {
+    const sku = readOrderItemSku(item);
+    return (sku?.cancellationPolicySnapshot?.tiers ?? []).map(
       (tier) =>
-        `${item.sku.name}：${tier.visibleLabel}，退款 ${tier.refundPercent}%${
+        `${sku?.name ?? "订单项目"}：${tier.visibleLabel}，退款 ${tier.refundPercent}%${
           tier.requiresOperatorHandling ? "，需人工处理" : ""
         }`,
-    ),
-  );
+    );
+  });
 });
 
 const cancellationResultMessage = computed(() => {
@@ -388,12 +405,8 @@ const cancellationResultMessage = computed(() => {
   return "已按取消政策调整账单。";
 });
 
-const latestCancellationAttempt = computed(
-  () => detail.value?.cancellation.latestAttempt ?? null,
-);
-const isCancellationPending = computed(
-  () => latestCancellationAttempt.value?.status === "PENDING",
-);
+const latestCancellationAttempt = computed(() => detail.value?.cancellation.latestAttempt ?? null);
+const isCancellationPending = computed(() => latestCancellationAttempt.value?.status === "PENDING");
 
 const backFallbackTo = computed(() => ({ path: "/" }));
 const { handleBack } = useFallbackBack(backFallbackTo);
@@ -437,25 +450,19 @@ const ridePassengersLabel = computed(() => {
 });
 
 const rideDriverLabel = computed(() => {
-  const driver =
-    rideHailingDetail.value?.driver ?? rideHailingDetail.value?.live?.driver;
+  const driver = rideHailingDetail.value?.driver ?? rideHailingDetail.value?.live?.driver;
   if (!driver) return "";
   return [driver.driverName, driver.driverPhone].filter(Boolean).join(" ");
 });
 
 const rideVehicleLabel = computed(() => {
-  const vehicle =
-    rideHailingDetail.value?.vehicle ?? rideHailingDetail.value?.live?.vehicle;
+  const vehicle = rideHailingDetail.value?.vehicle ?? rideHailingDetail.value?.live?.vehicle;
   if (!vehicle) return "";
-  return [vehicle.plate, vehicle.color, vehicle.brand]
-    .filter(Boolean)
-    .join(" ");
+  return [vehicle.plate, vehicle.color, vehicle.brand].filter(Boolean).join(" ");
 });
 
 const orderErrorMessage = computed(() =>
-  orderQuery.error.value instanceof Error
-    ? orderQuery.error.value.message
-    : "加载订单失败。",
+  orderQuery.error.value instanceof Error ? orderQuery.error.value.message : "加载订单失败。",
 );
 
 const formatFen = (amountFen: number | null | undefined): string => {
@@ -490,8 +497,7 @@ let ridePollingTimer: number | undefined;
 
 onMounted(() => {
   ridePollingTimer = window.setInterval(() => {
-    if (detail.value?.order.family !== "RIDE_HAILING" || detail.value.bill)
-      return;
+    if (detail.value?.order.family !== "RIDE_HAILING" || detail.value.bill) return;
     void orderQuery.refetch();
   }, 1500);
 });
diff --git a/apps/frontend/src/pages/OrderingFromPlacementPage.vue b/apps/frontend/src/pages/OrderingFromPlacementPage.vue
index fb6e7f0d5..e2a499b43 100644
--- a/apps/frontend/src/pages/OrderingFromPlacementPage.vue
+++ b/apps/frontend/src/pages/OrderingFromPlacementPage.vue
@@ -294,14 +294,38 @@ const openBlockedDialog = (problem: Partial<OrderingActionProblem>): void => {
   };
 };
 
-const openPriceChangeDialog = (input: CreateOrderInput, evaluation: OrderingEvaluationResponse): void => {
+type ComparablePrice = NonNullable<OrderingContentSummary["price"]>;
+type PriceRangeTuple = readonly [number, number];
+
+const comparableRange = (price: ComparablePrice | null): PriceRangeTuple | null => {
+  const range = price?.range ?? null;
+  const rangePrices = range
+    ? [range.minFen, range.maxFen].filter((value): value is number => typeof value === "number")
+    : [];
+  if (rangePrices.length > 0) {
+    return [Math.min(...rangePrices), Math.max(...rangePrices)];
+  }
+  return typeof price?.totalFen === "number" ? [price.totalFen, price.totalFen] : null;
+};
+
+const formatPriceComparable = (price: ComparablePrice | null): string => {
+  const range = comparableRange(price);
+  if (!range) return formatPriceAmount(null);
+  const [min, max] = range;
+  return min === max ? formatPriceAmount(min) : `${formatPriceAmount(min)}~${formatYuan(max)}`;
+};
+
+const openPriceChangeDialog = (
+  input: CreateOrderInput,
+  evaluation: OrderingEvaluationResponse,
+): void => {
   preflightDialog.value = {
     open: true,
     kind: "price-change",
     title: "价格发生变化",
-    description: `当前价格已从 ${formatPriceAmount(
-      priceSummary.value?.totalFen ?? null,
-    )} 更新为 ${formatPriceAmount(evaluation.price.totalFen)}。是否继续下单？`,
+    description: `当前价格已从 ${formatPriceComparable(
+      priceSummary.value,
+    )} 更新为 ${formatPriceComparable(evaluation.price)}。是否继续下单？`,
     confirmText: "继续下单",
     showCancel: true,
     pendingInput: input,
@@ -317,18 +341,25 @@ const closePreflightDialog = (): void => {
 };
 
 const shouldConfirmPriceChange = (evaluation: OrderingEvaluationResponse): boolean => {
-  const displayedTotalFen = priceSummary.value?.totalFen ?? null;
-  const evaluatedTotalFen = evaluation.price.totalFen;
+  const displayedRange = comparableRange(priceSummary.value);
+  const evaluatedRange = comparableRange(evaluation.price);
   return (
-    typeof displayedTotalFen === "number" &&
-    typeof evaluatedTotalFen === "number" &&
-    displayedTotalFen !== evaluatedTotalFen
+    displayedRange !== null &&
+    evaluatedRange !== null &&
+    (displayedRange[0] !== evaluatedRange[0] || displayedRange[1] !== evaluatedRange[1])
   );
 };
 
 const createOrderAfterPreflight = async (input: CreateOrderInput): Promise<void> => {
   try {
     const created = await createOrderMutation.mutateAsync(input);
+    if (created.outcome === "CANCELLED") {
+      openBlockedDialog({
+        title: created.reason.title,
+        detail: created.reason.detail,
+      });
+      return;
+    }
     await router.push({ path: `/orders/${created.orderId}` });
   } catch {
     closePreflightDialog();
diff --git a/docs/20-product-tdd/ecommerce-contracts.md b/docs/20-product-tdd/ecommerce-contracts.md
index 07cc082c2..ee1617b6f 100644
--- a/docs/20-product-tdd/ecommerce-contracts.md
+++ b/docs/20-product-tdd/ecommerce-contracts.md
@@ -229,17 +229,28 @@ Current issue-231 uniqueness constraint:
 - `Offer` may include multiple SPUs only when they share the same
   `productType`
 - `Placement` owns creative and matching, not price or order state
+- `SPU.salesPolicy.skuSelectionPolicy` declares how the user selects SKU
+  candidates:
+  - `EXACTLY_ONE` means the ordered item is one concrete SKU
+  - `CHOICE_SET` means the user authorizes multiple acceptable candidate SKUs
+    and fulfillment resolves one final SKU/provider vehicle
 
 Pricing ownership:
 
 - `PricingModel` is SKU-owned base pricing truth
-- `SPU` owns listing, metadata, sales policy, service policy, and presentation
-  truth; it does not own runtime pricing rules
+- `SPU` owns listing, metadata, sales policy, service policy, and listing-level
+  presentation truth; it does not own runtime pricing rules
+- `SKU` owns SKU-specific presentation truth, such as a vehicle class hero image
+  for RideHailing
 - `Offer PricingPolicy` is commercial overlay truth
 - concrete pricing execution belongs to Trade
-- persisted `trade_orders.items` are SKU snapshots plus quantity, including
-  SKU facts, SKU pricing model, and SKU cancellation policy snapshot; SPU
-  fields are not copied into order items
+- persisted fixed `trade_orders.items` are SKU snapshots plus quantity,
+  including SKU facts, SKU pricing model, and SKU cancellation policy snapshot;
+  SPU fields are not copied into order items
+- persisted choice-set `trade_orders.items` are one logical item containing
+  candidate SKU quote snapshots and a nullable resolution. The candidate set is
+  buyer authorization truth; the resolution records the final SKU/provider
+  vehicle and provider binding.
 
 ## Ordering Command Contract
 
@@ -254,9 +265,8 @@ Pricing ownership:
 - Bindings only prefill and lock client fields; they are not submitted as
   authoritative server input.
 - Ordering Content receives `{ source, offerDetail, bindings }` and emits:
-  command fields (`participants`, selected SKU `items`,
-  `productTypedExtraProperties`) plus local display summary for the footer price
-  and price detail.
+  command fields (`participants`, `items`, `productTypedExtraProperties`) plus
+  local display summary for the footer price and price detail.
 - Ordering Content does not receive `prId`, does not know Placement, and does
   not evaluate or submit orders.
 - Product-specific Ordering Content owns product-specific list/quote state. For
@@ -266,15 +276,21 @@ Pricing ownership:
 - Ordering Page creates evaluation and creation commands on submit:
   `{ source: { offerId }, prId?, participants, items, productTypedExtraProperties }`.
 - This command is not coupled to Placement or `matchingContext`.
-- command `items` are `{ skuId, quantity }`; backend resolves SKU -> SPU and
-  verifies the SKU belongs to the Offer.
+- command `items` are a discriminated union:
+  - fixed items: `{ kind?: "FIXED", skuId, quantity }`
+  - choice-set items:
+    `{ kind: "CHOICE_SET", productType: "RIDE_HAILING", candidateSkuIds, quantity: 1 }`
+- backend resolves all SKU ids -> SPU and verifies they belong to the Offer.
 - Ordering evaluation uses the same command shape through
   `POST /api/commerce/ordering/evaluate`. It is submit-time preflight only,
   returns price total/range/detail and `actions.create_order` in the
   action-preflight shape, and does not return product-specific option lists.
 - Ordering creation uses `POST /api/commerce/orders`. It re-reads
   authoritative Offer/SPU/SKU truth and performs the transactional validations
-  again.
+  again. Successful transport responses are a discriminated result:
+  - `CREATED` navigates to Order Detail
+  - `CANCELLED` carries a cancelled order id and user-displayable reason; the
+    Ordering Page shows a failure dialog and does not navigate
 - for PR-scoped orders, order row creation and `attachOrderToPr` are one
   transaction. PR authority validates attachability; Order does not own PR
   status as a separate proactive validation rule.
@@ -330,10 +346,16 @@ Rental:
 RideHailing:
 
 - usage-based final settlement
-- Order is created from quote snapshot
-- provider binding and execution phase are stored on `ride_hailing_orders`
+- Order is created from candidate quote snapshots. For RideHailing, the user
+  orders one unresolved choice-set item: several acceptable vehicle SKU
+  candidates, with one final resolution.
+- provider binding is stored on the choice-set resolution, not on
+  `ride_hailing_orders`
+- execution phase and ride execution snapshots are stored on
+  `ride_hailing_orders`
 - provider adapter computes external order id dynamically; the provider-side
-  order id returned by create is stored on `ride_hailing_orders`
+  order id returned by create is stored in the choice-set resolution together
+  with provider instance identity
 - provider callback updates execution phase, driver / vehicle snapshots, and
   committed final settlement input
 - final Bill is created only after provider final settlement input is
diff --git a/tasks/ride-hailing-ui-fixes/change-log.md b/tasks/ride-hailing-ui-fixes/change-log.md
index e5e549314..7d230dea2 100644
--- a/tasks/ride-hailing-ui-fixes/change-log.md
+++ b/tasks/ride-hailing-ui-fixes/change-log.md
@@ -87,3 +87,174 @@
   - `pnpm exec vitest run tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts --project system-scenario --reporter=verbose`
   - `pnpm check:type:backend`
   - `pnpm check:type:frontend`
+
+## Slice: Choice-Set SKU And Float Panel Planning
+
+- Added
+  `tasks/ride-hailing-ui-fixes/choice-set-sku-float-panel-plan.md`.
+- Recorded pre-implementation information collection across:
+  - durable ecommerce contract
+  - backend catalog/order/ride-hailing/bill/job-runner implementation
+  - frontend ordering/order-detail implementation
+  - design-web primitive contracts
+  - current RideHailing system scenario expectations
+- Updated control and discussion logs to mark this slice as blocked on plan
+  review, Impact Handshake, and explicit `开始` before production-code work.
+
+## Slice: Choice-Set Plan Review Corrections
+
+- Revised the large-slice plan according to review:
+  - prioritize long-term clean domain model over low-risk shortcuts
+  - remove `productTypedExtraProperties.acceptableSkuIds` from the target
+  - promote command `items` to a generic discriminated union
+  - remove required create-time provider pre-binding from
+    `ride_hailing_orders`
+  - record cheapest-first dispatch policy
+  - record provider dispatch failure as order cancellation
+  - record final settlement billing as-is for provider substitution outside
+    candidates
+- Updated the sequence diagram to match the corrected command and provider
+  ownership model.
+
+## Slice: Choice-Set Dispatch Lifecycle Review
+
+- Revised the planning artifacts according to review:
+  - keep provider dispatch inside the create-order transaction for this slice
+    because dispatch is also RideHailing Order lifecycle
+  - store post-dispatch provider binding only in the choice-set resolution
+    snapshot
+  - cancel on provider create failure without retrying the next cheapest
+    candidate, another vehicle type, or another provider
+  - return the cancelled order id for provider create failure while keeping the
+    user on Ordering Page with a failure-reason dialog
+  - exclude Order Detail redesign from this slice and preserve the current
+    legacy detail implementation
+- Removed the previous async JobRunner dispatch direction from the active plan
+  and sequence diagram.
+
+## Slice: Choice-Set Final Plan Review
+
+- Reviewed the large-slice plan against current durable docs and key backend /
+  frontend code paths.
+- Added implementation-readiness findings to the plan:
+  - RideHailing SPUs need a native choice-set `SkuSelectionPolicy`
+  - provider order id moves with provider instance id into choice-set
+    resolution
+  - callback/detail/payment-confirmation paths need a shared provider-binding
+    reader
+  - Trade order-item helpers must become union-aware
+  - create-order result becomes a `CREATED` / `CANCELLED` discriminated union
+  - RideHailing preflight compares selected candidate range instead of total
+  - implementation should start with durable contract/schema/model changes
+
+## Slice: Choice-Set Backend Foundation Segment 1
+
+- Durable contract:
+  - updated `docs/20-product-tdd/ecommerce-contracts.md` for SKU-level
+    presentation, `CHOICE_SET` SKU selection policy, fixed vs choice-set command
+    items, create-order `CREATED` / `CANCELLED` result, RideHailing provider
+    binding ownership, and final bill timing.
+- Catalog/backend schema:
+  - added `product_skus.presentation` with an empty-presentation default
+  - extended SKU model/create/update/admin schemas/projections to carry SKU
+    presentation
+  - extended `SkuSelectionPolicy` with `CHOICE_SET`
+  - removed `ride_hailing_orders.provider_instance_id` and
+    `provider_order_id`
+- Trade/RideHailing model:
+  - promoted order item snapshots to a union of `FIXED` and `CHOICE_SET`
+  - added RideHailing choice-set candidate, quote, resolution, and provider
+    binding snapshots
+  - made order-item helpers fixed-aware and added RideHailing choice-set /
+    provider-binding readers
+  - added `TradeOrderRepository.replaceItems`
+- Create/evaluate lifecycle:
+  - promoted commerce command `items` to a generic discriminated union
+  - RideHailing submit/evaluate now use one `CHOICE_SET` item with candidate
+    SKU ids
+  - submit-time RideHailing evaluation quotes only selected candidates and
+    returns candidate range
+  - create-order creates an unresolved choice-set item, creates the
+    RideHailing order lifecycle row, dispatches cheapest-first, writes
+    provider binding into resolution, and opens the base order
+  - provider create failure marks the order cancelled and returns
+    `outcome: "CANCELLED"` with a user-displayable reason
+  - no retry is attempted against the next candidate/provider
+- Callback/detail/payment compatibility:
+  - Caocao callback, live detail projection, and provider fee confirmation now
+    recover provider binding from the choice-set resolution
+  - current Order Detail is preserved with compatibility SKU readers and legacy
+    selected-vehicle projection
+- Frontend bridge:
+  - RideHailing Ordering Content now emits a `CHOICE_SET` item; in segment 1 it
+    remains single-select, so the candidate set contains the selected SKU only
+  - Ordering Page compares preflight price ranges and branches on
+    create-order `CANCELLED` without navigating to Order Detail
+- Scenario/test updates:
+  - backend RideHailing foundation and Caocao callback scenarios were updated to
+    the choice-set / resolution provider-binding model
+  - RideHailing system scenario now expects selected-candidate pricing and a
+    provider-create-failure dialog
+- Verification:
+  - `pnpm check:type:backend`
+  - `pnpm check:type:frontend`
+  - `pnpm exec vitest run --config vitest.backend.config.ts --project backend-scenario apps/backend/tests/ride-hailing/ride-hailing-order-foundation.scenario.test.ts apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts`
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+  - `pnpm check:config:backend`
+  - `git diff --check`
+  - explicit `pnpm exec biome lint` on changed source/test files
+
+## Slice: Choice-Set Ordering UI Segment 2
+
+- RideHailing Ordering UI:
+  - migrated `RideHailingSkuCard` from a custom button implementation to
+    `PuCard selectable` composition
+  - composed `PuCheckbox` as the visual selection affordance while keeping the
+    card as the single interactive option target
+  - added SKU hero/detail image preview resolution with the existing direct URL
+    fallback rule; non-displayable asset ids fall back to the car icon preview
+  - migrated RideHailing selection state to `usePuSelect<number>` with
+    `multiple: true`
+  - default selection keeps the cheapest/default selectable candidate, and
+    additional card taps add/remove candidates
+  - Ordering Content now submits actual multi-candidate `CHOICE_SET`
+    candidate ids and derives footer range from the selected candidate set
+  - price explanations are taken from the cheapest selected candidate as the
+    dispatch basis
+- Float panel:
+  - replaced the custom absolute bottom sheet with `PuFloatPanel`
+  - added three stops: minimized, normal, expanded
+  - panel stops are calculated from the Ordering Content container height via
+    `ResizeObserver`
+  - route-map fit padding now follows the active panel stop while preserving the
+    bottom control row as a sibling layer
+- Scenario:
+  - updated RideHailing system scenario to select both 快车 and 专车, assert the
+    selected candidate price range, and expect cheapest-first dispatch to 快车
+  - updated price-change dialog expectation from single-price comparison to
+    selected-candidate range comparison
+- Verification:
+  - `pnpm check:type:frontend`
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+  - `pnpm exec biome lint apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue apps/frontend/src/domains/commerce/ui/ordering/RideHailingSkuCard.vue tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+  - `git diff --check`
+
+## Slice: Choice-Set SKU Card Layout Remediation Segment 3
+
+- RideHailing SKU Card:
+  - corrected the Segment 2 card from a list-item-like layout to the reviewed
+    left/right layout
+  - left side now owns SKU name + info icon and the SKU preview area
+  - right side now owns estimated text, amount, and checkbox, all right-aligned
+  - checkbox now sits below the amount
+  - removed the card-internal status/reason display concept; unavailable quoted
+    options continue to be hidden by the list layer
+  - removed the 420px media rule that hid the preview
+  - kept `PuCard selectable`, visual-only `PuCheckbox`, `usePuSelect`
+    multi-select ownership, preview fallback, and semantic test ids stable
+- Verification:
+  - `pnpm exec biome format --write apps/frontend/src/domains/commerce/ui/ordering/RideHailingSkuCard.vue apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue`
+  - `pnpm exec biome lint apps/frontend/src/domains/commerce/ui/ordering/RideHailingSkuCard.vue apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue`
+  - `pnpm check:type:frontend`
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+  - `git diff --check`
diff --git a/tasks/ride-hailing-ui-fixes/choice-set-sku-float-panel-plan.md b/tasks/ride-hailing-ui-fixes/choice-set-sku-float-panel-plan.md
new file mode 100644
index 000000000..11228f83b
--- /dev/null
+++ b/tasks/ride-hailing-ui-fixes/choice-set-sku-float-panel-plan.md
@@ -0,0 +1,696 @@
+# RideHailing Choice-Set SKU And Float Panel Plan
+
+## Purpose
+
+This plan covers the large RideHailing slice that combines:
+
+- SKU card primitive migration
+- SKU-level presentation
+- multi-select acceptable vehicle SKUs
+- `PuFloatPanel` bottom panel migration
+- native Order support for a RideHailing choice-set item
+- RideHailing order lifecycle dispatch, choice-set resolution, and final billing
+  from the resolved ride
+
+This is a review artifact. It is not an implementation start signal.
+
+## Classification
+
+- Primary input route: `Intent`
+- Current mode: `Explore` -> `Solidify`
+- Implementation mode: blocked until plan review, Impact Handshake, and explicit
+  `开始`
+
+The slice changes product semantics, not only UI rendering. Durable truth likely
+needs promotion into `docs/10-prd/` for business vocabulary and
+`docs/20-product-tdd/ecommerce-contracts.md` for cross-unit contracts before or
+with production code.
+
+## Accepted Direction
+
+- Long-term clean model wins over short-term low-risk patches. MVP can keep
+  behavior simple, but the domain model should not become less maintainable just
+  to reduce immediate blast radius.
+- SKU should own full `ProductPresentation`.
+- RideHailing vehicle selection is multi-select: the user authorizes a set of
+  acceptable vehicle SKUs.
+- Create-order stores an unresolved choice-set item.
+- RideHailing Order lifecycle dispatch resolves exactly one final vehicle SKU
+  or provider vehicle type after the choice-set item has been created.
+- Provider dispatch should not be moved out of the create-order transaction for
+  this slice. Dispatch is not only a Fulfillment concern; it is also part of
+  RideHailing Order lifecycle.
+- Post-dispatch provider binding lives only in the choice-set resolution
+  snapshot.
+- The Ordering UI shows the selected candidate set price range.
+- The final Bill is created from the resolved SKU quote / provider final
+  settlement amount.
+- Resolution does not have to be inside the candidate set. Provider upgrade or
+  substitution is real-world behavior and must be recorded, not forbidden.
+- RideHailing provider instance is SKU-bound product fact. It should not be a
+  required create-time field on `ride_hailing_orders`.
+- The create/evaluate command boundary should promote `items` to a generic
+  discriminated union instead of hiding RideHailing candidates in
+  `productTypedExtraProperties.acceptableSkuIds`.
+- First dispatch policy: cheapest quoted candidate first.
+- Provider dispatch failure causes order cancellation.
+- Do not retry provider dispatch on the next cheapest candidate or another
+  provider. A candidate set may include multiple providers and multiple vehicle
+  types per provider, but provider create failure is not retried in this model.
+- When provider create fails, create-order returns the cancelled order id plus
+  enough cancelled status/reason data for the Ordering Page to show a failure
+  dialog. For the user, this behaves like order creation failed, even though the
+  domain has created then cancelled an order.
+- Ordering Page should not navigate to Order Detail for that cancelled
+  create-order result.
+- If provider substitution outside candidates leads to a higher final
+  settlement than the displayed candidate range, Bill keeps the final settlement
+  as-is.
+- Order Detail is out of scope for this slice. Keep the current Order Detail
+  implementation and preserve the compatibility data it already reads.
+- `PuFloatPanel` should have three stops:
+  - minimized: show more map
+  - normal: current bottom-sheet height
+  - expanded: minimize map
+
+## Information Collected
+
+### Durable Contract
+
+- `docs/20-product-tdd/ecommerce-contracts.md` currently says SPU owns
+  presentation truth, while SKU owns pricing and SKU facts.
+- `SkuSelectionPolicy` currently supports only `{ type: "EXACTLY_ONE" }`, which
+  conflicts with RideHailing multi-select candidate authorization.
+- The same document currently says persisted `trade_orders.items` are SKU
+  snapshots plus quantity.
+- Ordering Content currently emits selected SKU `items` plus
+  `productTypedExtraProperties`.
+- Ordering create/evaluate currently use the same command shape:
+  `{ source, prId?, participants, items, productTypedExtraProperties }`.
+- Current RideHailing contract says Order is created from a quote snapshot,
+  provider binding and execution phase live on `ride_hailing_orders`, and final
+  Bill is created only after provider final settlement input is committed.
+
+### Backend Current State
+
+- `product_skus` has no `presentation` column.
+- `ProductSku` model, SKU create/update inputs, admin SKU schema, admin product
+  workspace, and `OrderingOfferDetailSku` do not include presentation.
+- RideHailing dev fixture stores presentation only on the SPU.
+- `OrderItemSnapshot` is one fixed SKU snapshot plus quantity.
+- `resolveSelectedSku` reads the first command item and enforces quantity 1.
+- Trade item helpers such as `getOrderItemSkuName` and
+  `getOrderItemPricingAmountFen` assume every order item is a fixed SKU item.
+- RideHailing evaluation and create both resolve one selected SKU, then call
+  `evaluateRideOptions` with `selectedSkuId`.
+- `createRideHailingOrderBranch` currently calls provider `createRide` inside
+  the create-order transaction and compensates by cancelling the provider ride if
+  the local transaction fails after provider creation.
+- `ride_hailing_orders.providerInstanceId` is non-null at create time.
+- `ride_hailing_orders.providerOrderId` is also provider binding. If provider
+  binding lives only in choice-set resolution, both provider instance and
+  provider order id must move out of the RideHailing order row contract.
+- RideHailing callback, live detail query, and provider fee confirmation
+  currently read provider binding from `ride_hailing_orders`; they will need a
+  shared resolution-binding reader.
+- Current Caocao adapter `createRide` accepts one provider request param set;
+  the caller currently sends one `car_type`.
+- `buildRideHailingDetailProjection` derives `selectedVehicleName` from
+  `order.items[0]`.
+- Final RideHailing bill creation after provider final settlement already
+  matches the target timing and should be preserved.
+- A DB-backed JobRunner exists and is driven by request-tail and internal
+  maintenance tick endpoints, but the reviewed target for this slice does not
+  move provider dispatch into a persisted async job.
+
+### Frontend Current State
+
+- `OrderingContentOutput.items` directly reuses `CreateOrderInput["items"]`.
+- `RideHailingOrderingContent` owns quote loading and currently keeps
+  `selectedRideSkuId: number | null`.
+- RideHailing summary currently computes a range over all selectable options,
+  while total/explanations come from the single selected option.
+- Ordering Page price-change preflight currently compares only `totalFen`; the
+  choice-set flow must compare displayed candidate range against evaluated
+  candidate range.
+- `useCreateOrder` treats all successful transport responses as a created order
+  and `OrderingFromPlacementPage` always navigates to `/orders/:orderId` after
+  mutation success. The cancelled-order result needs an explicit frontend
+  branch before navigation.
+- `RideHailingSkuCard` is a custom button card, not `PuCard`.
+- The current bottom sheet is custom absolute CSS, not `PuFloatPanel`.
+- `CommerceOrderDetailPage` displays one RideHailing selected vehicle name.
+
+### Design-Web 0.4.6
+
+- `PuCard` supports `selectable`, `active`, `disabled`, structured regions, and
+  click events.
+- `PuCard` guidance says interactive cards must not contain nested interactive
+  controls.
+- `PuCheckbox` is a boolean native-checkbox primitive.
+- `usePuSelect<T>` supports controlled or uncontrolled single/multiple
+  selection, `selectedValues`, `isSelected`, `isDisabled`, `toggle`, `select`,
+  `deselect`, and `clear`.
+- `PuFloatPanel` uses numeric pixel-height stops. Stop height is the full panel
+  height including the handle. It has no mask, no teleport, and no body scroll
+  lock. The handle owns dragging and keyboard movement.
+
+### Scenario Tests
+
+- Current RideHailing scenario asserts single vehicle selection and selected
+  vehicle display on Order Detail.
+- Current provider-create-failure scenario expects create-order failure to keep
+  the user on `/order/new`.
+- Current price-change scenario verifies provider order creation is blocked
+  until the preflight price-change dialog is confirmed.
+
+These will need rewording after the choice-set model:
+
+- create-order first materializes a choice-set item, then immediately advances
+  RideHailing Order lifecycle through provider dispatch
+- provider create failure cancels the order and is not retried against another
+  candidate
+- provider create failure returns the cancelled order id and failure reason to
+  the Ordering Page; the page shows a dialog and stays on the Ordering Page
+- Order Detail remains on its current legacy surface in this slice, so tests
+  should not require new candidate-set / pending-dispatch UI yet
+
+## Proposed Model
+
+### Catalog
+
+Add SKU-level `presentation: ProductPresentation`.
+
+Implementation direction:
+
+- Add `product_skus.presentation jsonb not null` with empty presentation default
+  for existing rows.
+- Add presentation to backend entity/model/input/update/projection paths.
+- Keep SPU presentation. SKU presentation is SKU-specific media/detail, not a
+  replacement for SPU listing presentation.
+- RideHailing SKU card uses SKU hero image first, then falls back to the current
+  icon preview.
+- Extend `SkuSelectionPolicy` so RideHailing SPUs can declare a choice-set
+  selection contract instead of `EXACTLY_ONE`. The policy should express that
+  the user may select multiple acceptable SKUs and fulfillment resolves one.
+  Sketch:
+
+```ts
+type SkuSelectionPolicy =
+  | { type: "EXACTLY_ONE" }
+  | { type: "CHOICE_SET"; min: number; max?: number | null; resolvesTo: 1 };
+```
+
+- Update admin schemas/UI defaults and scenario fixtures so RideHailing SPUs use
+  the new policy deliberately instead of relying on UI behavior that contradicts
+  the catalog contract.
+
+### Order Item Snapshot
+
+Introduce a native order item union:
+
+```ts
+type FixedOrderItemSnapshot = {
+  kind?: "FIXED";
+  itemId: string;
+  sku: SkuSnapshot;
+  quantity: number;
+};
+
+type ChoiceSetOrderItemSnapshot = {
+  kind: "CHOICE_SET";
+  itemId: string;
+  productType: "RIDE_HAILING";
+  candidates: Array<{
+    sku: SkuSnapshot;
+    quoteSnapshot: RideHailingQuoteSnapshot;
+  }>;
+  resolution: null | RideHailingChoiceSetResolutionSnapshot;
+  quantity: 1;
+};
+```
+
+`kind?: "FIXED"` keeps existing stored order JSON compatible because old rows do
+not have `kind`.
+
+Choice-set truth belongs in Trade Order snapshots because it is the buyer's
+binding authorization. RideHailing fulfillment owns provider execution state and
+should update the choice-set resolution through a Trade use case, not mutate
+order JSON ad hoc.
+
+Order item services must become union-aware:
+
+- fixed-only helpers should explicitly assert `FIXED`
+- choice-set helpers should expose candidates, selected candidate, resolution,
+  provider binding, and legacy selected-vehicle display
+- generic order totals must not accidentally price unresolved choice sets as if
+  they were fixed SKU items
+
+### Command Boundary
+
+Target implementation:
+
+- Promote command `items` to a generic discriminated union.
+- Rental emits and submits fixed items.
+- RideHailing emits and submits one choice-set item.
+- `productTypedExtraProperties.acceptableSkuIds` should not be introduced.
+- Backend materializes the persisted `CHOICE_SET` item from command item
+  candidates and submit-time authoritative quotes.
+
+Sketch:
+
+```ts
+type CreateOrderItemInput =
+  | {
+      kind?: "FIXED";
+      skuId: number;
+      quantity?: number | null;
+    }
+  | {
+      kind: "CHOICE_SET";
+      productType: "RIDE_HAILING";
+      candidateSkuIds: number[];
+      quantity?: 1 | null;
+    };
+```
+
+Reasoning:
+
+- It keeps the public create/evaluate command aligned with persisted Order
+  semantics.
+- It avoids product-specific candidate ownership leaking through
+  `productTypedExtraProperties`.
+- It makes future "choose one from a set" products possible without another
+  command-shape escape hatch.
+
+Create-order response should also become a discriminated union:
+
+```ts
+type CreateOrderResult =
+  | {
+      outcome: "CREATED";
+      orderId: string;
+    }
+  | {
+      outcome: "CANCELLED";
+      orderId: string;
+      reason: OrderingActionProblem;
+    };
+```
+
+The cancelled branch is a successful transport response. Frontend behavior
+branches on `outcome`, not on HTTP error handling.
+
+### Evaluation And Pricing
+
+- RideHailing quote options remain owned by `RideHailingOrderingContent`.
+- Footer price range should be derived from selected acceptable candidates only,
+  not all visible options.
+- Submit-time evaluation should quote only the choice-set candidate SKU ids and
+  return:
+  - create-order preflight result
+  - candidate-set range
+  - candidate quote details
+- Price-change preflight should compare displayed candidate range to evaluated
+  candidate range. Single `totalFen` comparison is no longer sufficient.
+- If no acceptable candidate is selectable or quoteable, create-order is blocked.
+- `evaluateRideOptions` needs a candidate filter for submit-time
+  evaluation/create. The option-list endpoint can still quote all visible
+  options for browsing; submit-time evaluation must quote only the selected
+  choice-set candidates.
+
+### Dispatch Lifecycle
+
+Do not move provider `createRide` out of the create-order transaction for this
+slice.
+
+Meaning:
+
+- `create-order` remains the command boundary that persists the buyer-side
+  binding contract and advances RideHailing Order lifecycle through immediate
+  provider dispatch.
+- The internal sequence is:
+  - persist Trade order with unresolved `CHOICE_SET` item
+  - persist the RideHailing order lifecycle row
+  - choose the cheapest quoted candidate
+  - read provider instance from the chosen SKU facts
+  - call provider `createRide`
+  - write the choice-set resolution with provider binding
+  - update RideHailing lifecycle phase and base order status
+- Dispatch is not purely a Fulfillment concern. RideHailing Fulfillment owns
+  provider execution semantics, while RideHailing Order lifecycle owns the
+  order-state transition. Trade owns the choice-set item as buyer-contract
+  evidence.
+- Keeping the provider call inside the create-order transaction preserves the
+  current synchronous lifecycle shape, but it also keeps the known external
+  side-effect-in-transaction tradeoff. Preserve the current compensation pattern
+  for provider-created/local-write-failed cases.
+
+Target implementation:
+
+- Create the Trade order, unresolved choice-set item, and RideHailing order in
+  one transaction.
+- Dispatch immediately inside the same create-order lifecycle.
+- The dispatch step:
+  - reads the unresolved choice-set item
+  - selects the cheapest quoted candidate
+  - reads provider instance from the selected SKU facts
+  - calls provider `createRide`
+  - writes post-dispatch provider binding only into the choice-set resolution
+  - updates RideHailing `executionPhase`
+  - sets base order status from `INITIATING` to `OPEN` when provider dispatch is
+    accepted
+- If provider create succeeds but local update fails, preserve the current
+  best-effort compensation pattern by cancelling the provider ride.
+- If provider create fails, cancel the order and record the RideHailing
+  execution failure/cancellation reason.
+- The create-order API response for this path should be a successful transport
+  response that includes the cancelled order id, cancelled status, and
+  user-displayable failure reason or reason code. The frontend treats this as a
+  user-visible create-order failure.
+- Do not retry against the next cheapest candidate, another vehicle type, or
+  another provider.
+
+### Resolution Semantics
+
+Resolution snapshot should record:
+
+- resolved SKU snapshot when the provider result maps to a known SKU
+- provider vehicle type code/name when no SKU maps cleanly
+- provider order id
+- source, such as `DISPATCH_POLICY`, `PROVIDER_ACCEPTED`, or
+  `PROVIDER_CALLBACK`
+- candidate relation:
+  - `IN_CANDIDATES`
+  - `PROVIDER_UPGRADE`
+  - `PROVIDER_SUBSTITUTION`
+- reason/provider snapshot when outside the candidate set
+
+Do not enforce membership in the candidate set.
+
+### Provider Capability Constraint
+
+Current Caocao integration sends one `car_type` to `orderCarV2`.
+
+Therefore, multi-select does not automatically make the provider search multiple
+vehicle types. Dispatch implements cheapest-first over selected candidates
+locally to pick one candidate for provider `createRide`. If that provider create
+fails, the order is cancelled; the command does not retry the next cheapest
+candidate or another provider.
+
+### Provider Instance Constraint
+
+Current `ride_hailing_orders.providerInstanceId` is required at create time.
+
+Target implementation:
+
+- Remove the create-time required `ride_hailing_orders.providerInstanceId`.
+- Provider instance is read from the selected candidate SKU facts during
+  dispatch.
+- After dispatch, provider binding is recorded only on the choice-set resolution
+  snapshot: provider instance id, provider type, provider order id, and provider
+  snapshot as needed.
+- `ride_hailing_orders` keeps lifecycle/execution state and ride snapshots, but
+  it should not own post-dispatch provider binding.
+- `ride_hailing_orders.provider_order_id` should move to the resolution snapshot
+  together with provider instance id. Callback/query/payment-confirmation paths
+  should read provider binding through a shared Trade/RideHailing helper rather
+  than directly from `ride_hailing_orders`.
+- `providerOrderId` alone is not enough to query/cancel/confirm later because
+  the system still needs to know which provider adapter/instance to use. Those
+  follow-up paths must load the order's choice-set resolution to recover the
+  provider binding.
+- Mixed-provider candidate sets are allowed by the command model, but dispatch
+  chooses one concrete SKU/provider according to cheapest-first. Provider
+  instance is therefore resolved with the chosen SKU and stored in the
+  resolution snapshot.
+
+### Billing
+
+- Preserve current final-bill timing: provider final settlement input commits
+  first, then bill is materialized once.
+- Bill label/description should use the resolved SKU/provider vehicle when
+  available.
+- Bill amount continues to use final provider settlement.
+- Candidate range remains quote/authorization context, not bill truth.
+
+- If provider substitution outside candidates produces a final settlement above
+  the displayed candidate range, Bill still keeps the final settlement as-is.
+  The candidate range remains quote/authorization context, not a cap.
+
+### Frontend
+
+- Migrate RideHailing selection state to `usePuSelect<number>({ multiple: true })`.
+- Initialize defaults from quote options, probably the cheapest selectable
+  candidate.
+- Submit a `CHOICE_SET` item containing selected candidate SKU ids.
+- If create-order returns a cancelled RideHailing order result, keep the user on
+  Ordering Page and show a dialog explaining that ordering failed and why.
+- Update price-change preflight comparison to use candidate range for
+  RideHailing choice-set output. Keep fixed-order products on the existing total
+  comparison.
+- Use `PuCard selectable active disabled` for the SKU card root.
+- Compose `PuCheckbox` as a visual selection affordance without creating two
+  independent option controls. If necessary, render it disabled/read-only inside
+  the card and let the card be the single interactive target.
+- Use SKU hero image first; fallback to the current car icon preview.
+- Replace custom bottom sheet with `PuFloatPanel position="absolute"`.
+- Compute panel stops from container/layout height rather than hardcoding
+  viewport-wide magic values.
+- Keep the control row as a sibling layer at the bottom.
+- Adjust route-map fit padding when panel stop changes.
+- Do not redesign Order Detail in this slice. Preserve the existing detail page
+  implementation and keep providing the legacy selected-vehicle data it expects.
+
+## Implementation Phases
+
+### Phase 0: Durable Truth And Tests Shape
+
+- Update PRD/business vocabulary for "acceptable vehicle set" and "resolved
+  ride vehicle".
+- Update ecommerce Product TDD for SKU presentation, choice-set order item,
+  SKU selection policy, submit-time evaluation range comparison, create-order
+  result union, RideHailing dispatch lifecycle, provider-binding ownership, and
+  billing.
+- Update scenario expectations before broad code changes where practical.
+
+### Phase 1: SKU Presentation Expansion
+
+- Add DB migration for `product_skus.presentation`.
+- Update SKU model/entity/repository-adjacent inputs.
+- Extend `SkuSelectionPolicy` to support `CHOICE_SET` and update admin SPU
+  validation/defaults for RideHailing.
+- Update admin SKU create/update schema and UI workspace projections.
+- Update ordering offer detail projection.
+- Update RideHailing fixture/test builders with SKU presentation.
+- Verification:
+  - backend typecheck
+  - frontend typecheck if admin/frontend projection is touched
+  - merchandising/catalog unit tests as needed
+
+### Phase 2: Native Choice-Set Order Model
+
+- Add `OrderItemSnapshot` union and helpers for fixed vs choice-set items.
+- Keep legacy fixed items compatible.
+- Add Trade repository method for resolving a choice-set item and storing
+  provider binding inside the resolution snapshot.
+- Add shared helpers to read the resolved RideHailing provider binding from the
+  order item resolution.
+- Add create/evaluate command item union schemas.
+- Add create-order result union with `CREATED` and `CANCELLED`.
+- Migrate frontend `OrderingContentOutput.items` away from the old fixed-only
+  command item shape.
+- Preserve Order Detail compatibility by projecting the legacy selected vehicle
+  from the resolved choice-set where needed.
+- Verification:
+  - backend unit tests for item helpers and resolution mutation
+  - backend typecheck
+
+### Phase 3: RideHailing Evaluation/Create Contract
+
+- Make RideHailing submit one `CHOICE_SET` command item.
+- Quote only choice-set candidates during submit-time evaluation/create.
+- Create unresolved choice-set item first.
+- Create the RideHailing order lifecycle row.
+- Dispatch synchronously inside create-order after the unresolved choice-set
+  exists.
+- Remove provider binding columns from the RideHailing order foundation path:
+  create-time provider instance and post-dispatch provider order id move to the
+  choice-set resolution.
+- Verification:
+  - backend unit/scenario tests for command validation, price range,
+    cheapest-first candidate selection basis, provider-binding-in-resolution,
+    cancellation on provider create failure, and cancelled create-order response
+
+### Phase 4: RideHailing Dispatch And Resolution
+
+- Add a RideHailing dispatch lifecycle helper/use case invoked by create-order.
+- Implement cheapest-first candidate dispatch policy with no fallback retry.
+- Call provider, write provider binding into the choice-set resolution, update
+  execution phase, and preserve compensation on partial failure.
+- Cancel the order when provider create fails.
+- Update Caocao callback handling to refine resolution if callback/query reveals
+  a different provider vehicle type.
+- Preserve final bill creation timing.
+- Verification:
+  - dispatch unit tests
+  - callback/final bill tests
+  - fake Caocao scenario path
+
+### Phase 5: Ordering UI And Float Panel
+
+- Migrate vehicle list to `usePuSelect` multiple.
+- Migrate card to `PuCard` plus `PuCheckbox` composition.
+- Use SKU hero image fallback chain.
+- Output selected candidate ids and candidate range.
+- Replace custom sheet with `PuFloatPanel`.
+- Verification:
+  - frontend typecheck
+  - focused browser check for panel stops, card selection, price range, and map
+    fit padding
+
+### Phase 6: End-To-End Scenario Update
+
+- Update RideHailing ordering scenario to cover:
+  - multi-select candidate set
+  - selected candidate price range
+  - submit-time range price-change confirmation
+  - create-order creates an unresolved choice-set first and resolves it during
+    immediate RideHailing dispatch
+  - provider create failure returns a cancelled order id but Ordering Page shows
+    a failure dialog and does not navigate to Order Detail
+  - existing Order Detail still shows the resolved/legacy selected vehicle
+  - final settlement creates bill
+  - provider dispatch failure cancels the order
+- Verification:
+  - focused RideHailing system scenario
+  - backend/frontend typecheck
+  - lint slices for changed files
+
+## Resolved Review Decisions
+
+- Do not keep `ride_hailing_orders.providerInstanceId` as a required create-time
+  field.
+- Do not keep post-dispatch provider binding, including provider order id, on
+  `ride_hailing_orders`; provider binding lives in choice-set resolution.
+- Do not introduce `productTypedExtraProperties.acceptableSkuIds`.
+- Promote command `items` to a generic discriminated union.
+- Extend the catalog SKU selection policy for RideHailing choice sets instead of
+  leaving RideHailing SPUs as `EXACTLY_ONE`.
+- Dispatch remains inside the create-order transaction as part of RideHailing
+  Order lifecycle for this slice.
+- First dispatch policy is cheapest-first.
+- Provider dispatch failure cancels the order.
+- Provider create failure is not retried against the next cheapest candidate or
+  another provider.
+- Provider create failure returns a cancelled order id to the frontend, and the
+  Ordering Page shows a failure dialog instead of navigating to Order Detail.
+- Provider substitution outside candidates bills final settlement as-is.
+- Order Detail is out of scope for this slice; keep the current implementation
+  and preserve its compatibility projection.
+
+## Remaining Implementation Detail
+
+- Exact create-order response field names are still implementation details, but
+  the payload must let the frontend distinguish a normal created order from a
+  cancelled RideHailing order and show the cancellation reason without a detail
+  page navigation.
+
+## Implementation Progress
+
+Segment 1 is implemented and uncommitted:
+
+- Durable ecommerce contract updated.
+- SKU presentation schema/model/admin/order-detail projection foundation added.
+- `SkuSelectionPolicy` now supports `CHOICE_SET`.
+- `OrderItemSnapshot` and create/evaluate command items now support fixed and
+  RideHailing choice-set variants.
+- RideHailing create-order now creates an unresolved choice-set item, dispatches
+  cheapest-first inside the create-order lifecycle, writes provider binding into
+  choice-set resolution, and returns `CANCELLED` on provider create failure
+  without retrying other candidates.
+- `ride_hailing_orders` no longer owns provider binding columns.
+- Callback, live detail, fee confirmation, and legacy Order Detail compatibility
+  read through choice-set resolution / candidates.
+- RideHailing Ordering Content initially emitted a one-candidate `CHOICE_SET`
+  bridge while the UI remained single-select.
+- Price-change preflight compares candidate ranges.
+
+Segment 2 is implemented and uncommitted:
+
+- RideHailing vehicle cards migrated to `PuCard selectable` + visual
+  `PuCheckbox`.
+- Selection state migrated to `usePuSelect` multiple.
+- Ordering UI exposes and submits actual multi-select candidate sets.
+- Candidate-set range is derived from selected candidates only.
+- SKU hero/detail image is used when it is a directly displayable URL, with the
+  current car icon preview as fallback.
+- Custom bottom sheet replaced with `PuFloatPanel`.
+- Float panel has minimized, normal, and expanded stops computed from the
+  content container height.
+- Route-map fit padding follows the active panel stop.
+- System scenario verifies multi-candidate range and cheapest-first resolution.
+
+Segment 3 is implemented and uncommitted after human review:
+
+- Corrected `RideHailingSkuCard` from the Segment 2 list-item-like layout to
+  the reviewed card layout.
+- Implemented card layout:
+  `flex-row(meta-flex-col(flex-row(name, info-icon-btn), preview), price-flex-col(estimated-text, flex-col(amount, checkbox)))`.
+- Price column, amount, and checkbox are right-aligned (`items-end`).
+- Checkbox sits below the price amount.
+- Removed the card-internal `status/reason` display concept; unavailable vehicle
+  options remain hidden at the list layer.
+- Treated the text concept as SKU name only; do not introduce a separate
+  `vehicle summary` product concept.
+- Preserved `PuCard selectable`, visual-only `PuCheckbox`, single card
+  interaction target, multi-select model, preview fallback, and semantic test
+  ids.
+- Verification passed:
+  - `pnpm exec biome format --write apps/frontend/src/domains/commerce/ui/ordering/RideHailingSkuCard.vue apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue`
+  - `pnpm exec biome lint apps/frontend/src/domains/commerce/ui/ordering/RideHailingSkuCard.vue apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue`
+  - `pnpm check:type:frontend`
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+  - `git diff --check`
+
+## Final Plan Review Notes
+
+- Plan direction is coherent after the latest corrections. No model-level
+  blocker remains before an Impact Handshake.
+- Implementation should not begin as a pure UI primitive migration. The
+  required first production changes are durable contract/schema/model changes:
+  SKU presentation, SKU selection policy, choice-set item union, and create-order
+  result union.
+- Biggest backend blast-radius surfaces:
+  - `apps/backend/src/controllers/commerce.controller.ts` command schemas and
+    inferred route response types
+  - `apps/backend/src/domains/trade/model/order.ts`
+  - `apps/backend/src/domains/trade/use-cases/create-order.ts`
+  - `apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts`
+  - `apps/backend/src/domains/trade/services/order-items.ts`
+  - `apps/backend/src/domains/trade/services/order-persistence.ts`
+  - `apps/backend/src/domains/ride-hailing/use-cases/handle-caocao-order-status-callback.ts`
+  - `apps/backend/src/entities/product-sku.ts`
+  - `apps/backend/src/entities/ride-hailing-order.ts`
+  - `apps/backend/drizzle/`
+- Biggest frontend blast-radius surfaces:
+  - `apps/frontend/src/domains/commerce/model/ordering-content.ts`
+  - `apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue`
+  - `apps/frontend/src/domains/commerce/ui/ordering/RideHailingSkuCard.vue`
+  - `apps/frontend/src/pages/OrderingFromPlacementPage.vue`
+  - `apps/frontend/src/domains/admin-commerce/**`
+  - `tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+- Verification should include at minimum:
+  - backend unit coverage for order item helpers, choice-set resolution, and
+    provider binding reader
+  - backend tests for provider-create failure producing a cancelled order result
+  - frontend typecheck for Hono RPC response/input inference
+  - focused RideHailing system scenario updated for multi-select, range
+    preflight, cancelled create result dialog, legacy Order Detail projection,
+    and final billing
+
+## Suggested Next Step
+
+All planned implementation segments for this choice-set SKU / float-panel slice
+are complete locally. Next step is human review and commit packaging if the
+result is accepted.
diff --git a/tasks/ride-hailing-ui-fixes/control.md b/tasks/ride-hailing-ui-fixes/control.md
index e1b793519..03445fcdb 100644
--- a/tasks/ride-hailing-ui-fixes/control.md
+++ b/tasks/ride-hailing-ui-fixes/control.md
@@ -19,9 +19,10 @@ Hypothesis:
 ## Classification
 
 - Primary route: `Reality`
-- Active mode: `Execute` only after a concrete issue is named and approved
-- Current collaboration state: waiting for the human to name the next concrete
-  UI issue
+- Active mode: `Execute` for approved implementation segments
+- Current collaboration state: choice-set backend/domain foundation, Ordering
+  UI primitive/control, and SKU Card layout remediation segments implemented;
+  pending human review / commit packaging
 
 ## Inherited Effective Truth
 
@@ -72,6 +73,9 @@ Hypothesis:
 - `apps/frontend/src/domains/commerce/ui/ordering/`
 - `apps/frontend/src/domains/route/ui/RouteMap.vue`
 - `apps/frontend/src/shared/map/`
+- `apps/backend/src/entities/product-sku.ts`
+- `apps/backend/src/domains/merchandising/`
+- `apps/backend/drizzle/`
 - `tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
 
 ## Verification
@@ -88,8 +92,17 @@ Choose the narrowest sufficient proof per approved slice:
 
 - Committed slice: RideHailing ordering content naming and layout correction
   (`f7ac1aa3`).
-- Implemented but not committed slice: submit-time ordering pre-flight and
-  RideHailing SKU ownership correction.
+- Committed slice: submit-time ordering pre-flight and RideHailing SKU
+  ownership correction
+  (`bbb47413`).
+- Committed slice: RideHailing preflight price-change scenario
+  (`f25baf62`).
+- Implemented but not committed slice: Choice-set backend/domain foundation
+  segment 1.
+- Implemented but not committed slice: Choice-set Ordering UI primitive/control
+  segment 2.
+- Implemented but not committed slice: Choice-set SKU Card layout remediation
+  segment 3.
 - Current target model now reflected in code:
   - parent-page evaluation runs only after submit/create-order click
   - blocking pre-flight results open an acknowledgement dialog
@@ -97,10 +110,44 @@ Choose the narrowest sufficient proof per approved slice:
   - footer price summary comes from Ordering Content summary
   - RideHailing quote options are loaded by `RideHailingOrderingContent`
   - parent-page evaluation no longer returns or owns `rideHailing.options`
+  - order command `items` now supports `FIXED` and RideHailing `CHOICE_SET`
+  - RideHailing create-order persists an unresolved choice-set item, dispatches
+    cheapest-first inside the create-order lifecycle, and writes provider
+    binding only into the choice-set resolution
+  - provider create failure cancels the newly created order and returns a
+    `CANCELLED` create-order result for the Ordering Page failure dialog
+  - `ride_hailing_orders` no longer owns provider instance/order binding
+  - RideHailing callback, live detail, and fee confirmation recover provider
+    binding from the resolved choice-set item
+  - RideHailing vehicle cards use `PuCard selectable` with a visual
+    `PuCheckbox`
+  - RideHailing vehicle cards use the reviewed left/right layout:
+    SKU name + info icon and preview on the meta side, estimated price + amount
+    + checkbox on the right-aligned price side
+  - RideHailing vehicle cards no longer render card-internal status/reason
+    text; unavailable quoted options remain hidden at the list layer
+  - RideHailing vehicle selection uses `usePuSelect` multiple and submits an
+    actual selected candidate set
+  - RideHailing bottom sheet uses `PuFloatPanel` with minimized, normal, and
+    expanded stops
+  - route-map fit padding follows the active float-panel stop
+- Human review correction implemented:
+  - `RideHailingSkuCard` layout is left/right:
+    `meta(name + info icon, preview)` plus right-aligned
+    `price(estimated text, amount, checkbox)`
+  - checkbox belongs below price amount and is right-aligned
+  - card does not expose separate `vehicle summary` or `status/reason`
+    concepts
 - Implemented scenario coverage:
   - fake Caocao can mutate vehicle estimates through an admin-only test route
   - RideHailing system scenario now covers submit-time price-change preflight
     and verifies provider order creation is blocked until the user confirms
+  - RideHailing provider-create-failure scenario now verifies the failure dialog
+    and no navigation to Order Detail
+  - backend RideHailing foundation/callback scenarios now cover choice-set item
+    foundation and provider binding in resolution
+  - RideHailing system scenario now covers multi-candidate selection range and
+    cheapest-first dispatch result
 - Map diagnostic:
   - the gray RideHailing Ordering map observation was confirmed as a browser
     client issue; shared map code is not part of the active fix.
@@ -114,7 +161,60 @@ Choose the narrowest sufficient proof per approved slice:
   - `pnpm check:lint:frontend`
   - `pnpm check:lint:backend`
   - `pnpm exec vitest run tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts --project system-scenario --reporter=verbose`
+  - `pnpm check:config:backend`
+  - `pnpm exec vitest run --config vitest.backend.config.ts --project backend-scenario apps/backend/tests/ride-hailing/ride-hailing-order-foundation.scenario.test.ts apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts`
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+  - `pnpm exec biome lint apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue apps/frontend/src/domains/commerce/ui/ordering/RideHailingSkuCard.vue tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+  - `pnpm exec biome format --write apps/frontend/src/domains/commerce/ui/ordering/RideHailingSkuCard.vue apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue`
+  - `pnpm exec biome lint apps/frontend/src/domains/commerce/ui/ordering/RideHailingSkuCard.vue apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue`
+  - `git diff --check`
 - Non-blocking note:
   - `pnpm exec biome check ...` reports whole-file formatting differences in
     already-touched large files; this slice did not auto-format those whole
     files to avoid unrelated churn.
+- Active exploration:
+  - choice-set SKU / float-panel implementation is complete in three
+    uncommitted segments
+  - SKU should own full `ProductPresentation`; SKU preview images are not
+    currently SKU-owned in the catalog contract
+  - RideHailing vehicle selection should be multi-select
+  - order modeling is under discussion: RideHailing may need native Order
+    support for a choice-set item where the user authorizes several candidate
+    SKUs but fulfillment resolves exactly one final SKU
+  - accepted model direction: create-order stores an unresolved choice-set item,
+    RideHailing Order lifecycle dispatch resolves one SKU inside the
+    create-order transaction, UI displays candidate price range, and Bill is
+    created from the resolved SKU / final settlement amount
+  - resolution may be outside the candidate SKU set when provider reality
+    requires it, such as free upgrade; resolution must record candidate
+    relation and source instead of enforcing membership
+  - long-term clean model takes priority over short-term low-risk command-shape
+    shortcuts
+  - command `items` should become a generic discriminated union supporting
+    `FIXED` and `CHOICE_SET`
+  - RideHailing SPU sales policy also needs a native choice-set selection
+    policy; leaving it as `EXACTLY_ONE` would contradict the multi-select model
+  - RideHailing provider instance should not be create-time required on
+    `ride_hailing_orders`; it is SKU-bound product fact and read from the chosen
+    candidate during dispatch
+  - post-dispatch provider binding, including provider order id, should live
+    only in the choice-set resolution snapshot, not on `ride_hailing_orders`
+  - RideHailing dispatch policy starts cheapest-first
+  - provider dispatch failure cancels the order
+  - provider create failure is not retried against the next cheapest candidate
+    or another provider
+  - provider create failure returns a cancelled order id, and Ordering Page
+    shows a failure dialog without navigating to Order Detail
+  - RideHailing price-change preflight must compare selected candidate ranges,
+    not only `totalFen`
+  - provider substitution outside candidates keeps final settlement billing
+    as-is
+  - Order Detail is out of scope for the choice-set / SKU / FloatPanel slice;
+    preserve the existing detail implementation and compatibility projection
+  - target sequence is captured in
+    `tasks/ride-hailing-ui-fixes/sequence-diagram.md`
+  - large-slice implementation planning and information collection are captured
+    in `tasks/ride-hailing-ui-fixes/choice-set-sku-float-panel-plan.md`
+  - first backend/domain implementation segment is complete and uncommitted
+  - second Ordering UI primitive/control segment is complete and uncommitted
+  - third SKU Card layout remediation segment is complete and uncommitted
diff --git a/tasks/ride-hailing-ui-fixes/discussion-log.md b/tasks/ride-hailing-ui-fixes/discussion-log.md
index b3862dd56..cb26dcddf 100644
--- a/tasks/ride-hailing-ui-fixes/discussion-log.md
+++ b/tasks/ride-hailing-ui-fixes/discussion-log.md
@@ -124,3 +124,367 @@
   the scenario does not use `ordering.preflight-dialog` because `PuDialog`
   cannot inherit that `data-testid` reliably. It asserts visible dialog text and
   the `继续下单` action instead.
+
+## Investigation: RideHailing SKU Card, Multi-Select, And Float Panel
+
+- Requested next slice:
+  migrate RideHailing SKU card to package primitives, make the vehicle option
+  list use `usePuSelect` with multi-select, and replace the custom bottom sheet
+  with `PuFloatPanel`.
+- Design-web finding:
+  `PuCard` supports `selectable` and `active`, `PuCheckbox` is a boolean native
+  checkbox primitive, `usePuSelect` supports single and multiple selection
+  state, and `PuFloatPanel` supports bottom-attached draggable height stops.
+- Design-web caveat:
+  `PuCard` usage guidance says interactive cards must not contain nested
+  interactive controls. A card plus checkbox composition must avoid creating
+  two independent focusable controls for one option.
+- SKU presentation finding:
+  current durable merchandising contract gives `presentation` to SPU only.
+  `product_skus`, admin SKU input, create/update SKU use cases, and
+  `OrderingOfferDetailSku` do not currently expose SKU-level presentation or
+  image fields.
+- Model concern:
+  RideHailing ordering currently has an `EXACTLY_ONE` SKU selection policy and
+  order/evaluation commands use concrete `items: [{ skuId, quantity }]`.
+  A multi-select vehicle UI should likely represent a quote candidate set /
+  user preference set, while the create-order command still needs one selected
+  SKU unless the order model is deliberately widened.
+- Implementation boundary to confirm:
+  this slice may need a small catalog-contract expansion for SKU preview images
+  and a frontend summary/output model change so Ordering Shell can receive
+  multi-selected quote data without confusing it with the authoritative
+  create-order item.
+- Human decision:
+  SKU should own full `ProductPresentation`, not a reduced preview-only
+  presentation field.
+- Human decision:
+  RideHailing vehicle selection should be multi-select. A user selects multiple
+  acceptable vehicle SKUs; dispatch should search for a suitable driver within
+  that selected SKU set.
+- Interaction decision:
+  the `PuCard` + `PuCheckbox` composition should behave as one unified option
+  target, avoiding independent nested card and checkbox interactions.
+
+## Model Direction: Choice-Set Order Item For RideHailing
+
+- Human model proposal:
+  extend the Order model so it can natively represent the RideHailing shape:
+  the user orders a set of acceptable products, while fulfillment ultimately
+  grants exactly one product from that set.
+- Model correction:
+  `productTypedExtraProperties.acceptableSkuIds` is cleaner than overloading
+  `items` with multiple ordinary order items, but it may still be too
+  product-specific if the same "choose one from this acceptable set" shape is a
+  first-class Order concept.
+- Emerging order-item distinction:
+  ordinary order item means "the user buys/receives this SKU"; RideHailing needs
+  a choice-set item meaning "the user authorizes this SKU set, and the system or
+  provider resolves one final SKU before or during fulfillment."
+- Candidate vocabulary:
+  - `ORDER_ITEM_FIXED`: one concrete SKU is ordered
+  - `ORDER_ITEM_CHOICE_SET`: several candidate SKUs are ordered as one logical
+    item, with one eventually resolved SKU
+- Important invariant under discussion:
+  billing, order detail, provider dispatch, and audit need both the candidate
+  SKU set and the resolved SKU snapshot. The resolved SKU cannot erase the
+  accepted candidate set because the user's consent was to a bounded set.
+- Open modeling question:
+  whether the resolved SKU must exist at create-order time after pre-flight
+  quoting, or whether the order can be created with an unresolved choice set and
+  resolved later during provider dispatch.
+- Human decision:
+  choose the unresolved-at-create model. Order creation records the accepted
+  candidate SKU set; fulfillment / dispatch later resolves exactly one SKU from
+  that set.
+- Human decision:
+  Ordering UI shows the candidate set price range, not a single resolved SKU
+  price.
+- Human decision:
+  Bill is created from the resolved SKU quote / provider settlement amount,
+  not from the unresolved candidate set range.
+- Current implementation mismatch:
+  existing RideHailing create-order synchronously calls the provider and stores
+  one selected SKU immediately. The target model requires creating an
+  unresolved choice-set item first, then resolving it through the RideHailing
+  order lifecycle dispatch step.
+- Human correction:
+  resolution should not be constrained to candidates only. Providers may grant a
+  better or different vehicle class, such as a free upgrade. Candidate SKUs are
+  the user's accepted quote/search basis, while resolution must record whether
+  the provider result was inside the candidate set, an upgrade, or another
+  provider substitution.
+- Artifact:
+  saved the target RideHailing Order / Fulfillment / Bill sequence diagram in
+  `tasks/ride-hailing-ui-fixes/sequence-diagram.md`.
+
+## Planning: Choice-Set SKU, Dispatch, Billing, And Float Panel
+
+- Human direction:
+  this large slice needs a separate plan file and pre-implementation information
+  collection before review and coding.
+- Classification:
+  the slice is now an `Intent`-level product semantics change, not a local UI
+  fix. It likely needs durable PRD / Product TDD updates before or with
+  production implementation.
+- Information finding:
+  existing ecommerce contract says SPU owns presentation, persisted order items
+  are concrete SKU snapshots, and command `items` are `{ skuId, quantity }`.
+  Choice-set order items therefore require a native Trade Order contract change.
+- Information finding:
+  current `product_skus` has no presentation, and SKU create/update/admin
+  schema/ordering projection paths do not expose presentation.
+- Information finding:
+  current RideHailing create-order calls provider `createRide` inside the
+  create-order transaction. The target unresolved model needs an explicit
+  dispatch lifecycle step after the choice-set item exists.
+- Information finding:
+  current `ride_hailing_orders.providerInstanceId` is non-null at create time.
+  A mixed-provider candidate set would require either an MVP same-provider
+  constraint or a larger provider-resolution model.
+- Information finding:
+  current Caocao dispatch sends one `car_type`. Multi-select candidate SKUs need
+  an explicit local dispatch policy rather than assuming provider-side
+  multi-vehicle search.
+- Design-web finding:
+  `PuFloatPanel`, `PuCard`, `PuCheckbox`, and `usePuSelect` are exported from
+  `@partner-up-dev/design-web@0.4.6`; `PuCard` selectable composition must avoid
+  nested independent interactive controls.
+- Artifact:
+  added
+  `tasks/ride-hailing-ui-fixes/choice-set-sku-float-panel-plan.md` with the
+  collected facts, proposed phases, objections, and review questions.
+
+## Review: Clean Long-Term Choice-Set Model Corrections
+
+- Human principle:
+  pursue a long-term clean and stable model. MVP means simpler capability, not
+  a less maintainable or more complex domain model.
+- Human correction:
+  `ride_hailing_orders.providerInstanceId` should be removed as a required
+  create-time field. Provider instance belongs to the RideHailing SKU facts and
+  should be resolved from the chosen candidate during dispatch.
+- Human correction:
+  do not introduce `productTypedExtraProperties.acceptableSkuIds`. The
+  create/evaluate command path should promote `items` to a generic
+  discriminated union and support `CHOICE_SET` natively.
+- Human decision:
+  first dispatch policy is cheapest-first.
+- Human decision:
+  provider dispatch failure causes order cancellation.
+- Human decision:
+  if provider substitution outside candidates produces a higher final settlement
+  than the displayed quote range, Bill keeps the final settlement as-is.
+- Later correction:
+  dispatch is not only a RideHailing Fulfillment command, it is also
+  RideHailing Order lifecycle. Provider dispatch should stay inside the
+  create-order transaction for this slice.
+- Artifact update:
+  revised `choice-set-sku-float-panel-plan.md` and `sequence-diagram.md` to
+  remove `acceptableSkuIds`, promote command item union, remove provider
+  pre-binding, and record the resolved review decisions.
+
+## Review: Dispatch Lifecycle And Provider Binding Corrections
+
+- Human correction:
+  dispatch is not only a RideHailing Fulfillment command. It is also part of the
+  RideHailing Order lifecycle, so this slice should not move provider dispatch
+  out of the create-order transaction.
+- Human decision:
+  post-dispatch provider binding should live only in the choice-set resolution
+  snapshot.
+- Human decision:
+  if provider create fails, cancel the order and do not retry the next cheapest
+  candidate, another vehicle type, or another provider. Candidate sets may span
+  multiple providers and multiple vehicle types per provider, but provider
+  dispatch failure is not retried.
+- Human decision:
+  provider create failure returns the cancelled order id to the frontend.
+  Ordering Page should not navigate to Order Detail; it should show a dialog
+  explaining that ordering failed and why. To the user this is a failed order
+  creation, while the domain records an order that was created and cancelled.
+- Human scoping decision:
+  Order Detail is out of scope for this slice. Keep the current legacy Order
+  Detail implementation and preserve the data shape it already reads.
+- Artifact update:
+  revised the plan and sequence diagram to remove the async JobRunner dispatch
+  direction, put provider binding only in choice-set resolution, remove retry
+  behavior, define the cancelled-order API/UI behavior for provider create
+  failure, and exclude Order Detail redesign from this slice.
+
+## Final Review: Implementation Readiness Information
+
+- Plan consistency finding:
+  the target model is now coherent, but implementation must start from durable
+  model/schema contracts rather than a UI-only primitive migration.
+- Catalog contract finding:
+  current `SkuSelectionPolicy` only supports `EXACTLY_ONE`. RideHailing
+  multi-select candidate authorization needs a native choice-set selection
+  policy on the SPU sales policy, otherwise the UI and Order command would
+  contradict catalog truth.
+- Provider binding finding:
+  "provider binding lives only in choice-set resolution" includes both provider
+  instance id and provider order id. Current code stores and reads both from
+  `ride_hailing_orders`, so callback, live detail query, provider fee
+  confirmation, and persistence mapping need a shared resolution-binding reader.
+- Order item helper finding:
+  current Trade item helpers assume every item has a fixed `sku` and quantity.
+  After introducing `OrderItemSnapshot` union, fixed-only helpers must assert the
+  fixed kind and choice-set helper functions must own candidates/resolution
+  reads.
+- Frontend/API finding:
+  create-order result should become a discriminated union. Provider create
+  failure is a successful transport response with `outcome: "CANCELLED"`,
+  cancelled order id, and user-displayable reason. The Ordering Page mutation
+  success branch must show a dialog and skip navigation for that outcome.
+- Preflight finding:
+  RideHailing choice-set price-change preflight must compare displayed/evaluated
+  ranges, not `totalFen`. Fixed-order products can keep the current total
+  comparison.
+- Artifact update:
+  added these implementation-readiness findings to
+  `choice-set-sku-float-panel-plan.md`.
+
+## Implementation: Choice-Set Backend Foundation Segment 1
+
+- Human start:
+  user accepted splitting the large slice into two implementation segments and
+  explicitly started the first segment.
+- Segment boundary:
+  first segment implements durable contract/schema/order lifecycle foundation
+  and only the minimum frontend bridge needed to keep Ordering Page working.
+  It intentionally does not migrate the RideHailing SKU card to `PuCard`,
+  vehicle selection to `usePuSelect`, or bottom sheet to `PuFloatPanel`.
+- Implementation decision:
+  segment 1 keeps RideHailing UI single-select while sending a `CHOICE_SET`
+  command item containing the selected SKU as a one-item candidate set. This
+  lets the backend model become correct before the multi-select visual/control
+  migration.
+- Implementation decision:
+  provider create failure is represented as a successful transport response
+  with `outcome: "CANCELLED"`, the cancelled order id, and an
+  `OrderingActionProblem`. The Ordering Page handles it like a user-visible
+  order failure and does not navigate.
+- Implementation decision:
+  provider binding is now read from the resolved choice-set item in callback,
+  live-detail query, and provider-fee confirmation paths. The
+  `ride_hailing_orders` row keeps lifecycle snapshots only.
+- Compatibility decision:
+  Order Detail remains visually unchanged for this segment. Compatibility
+  readers project the selected/resolved SKU name from either fixed items or
+  choice-set resolution/candidates.
+- Test finding:
+  old backend scenarios were still asserting provider fields directly on
+  `ride_hailing_orders`; those were corrected to assert unresolved choice-set
+  foundation and resolved provider binding in item resolution.
+- Verification finding:
+  backend typecheck, frontend typecheck, focused backend RideHailing scenarios,
+  focused browser RideHailing system scenario, DB config checks, whitespace
+  check, and directed Biome lint all passed after segment 1.
+- Remaining work:
+  second segment should handle the original visual/control migration:
+  `RideHailingSkuCard` -> `PuCard` + `PuCheckbox`, list selection ->
+  `usePuSelect` multiple, actual multi-select candidate ranges, and
+  `ordering.ride-hailing.bottom-sheet` -> `PuFloatPanel` with three stops.
+
+## Implementation: Choice-Set Ordering UI Segment 2
+
+- Human start:
+  user explicitly started the second segment and requested the slice validation
+  and closure work.
+- Implementation boundary:
+  this segment stayed in the Ordering UI/control layer. It did not further
+  change the backend create-order lifecycle or Order Detail redesign scope.
+- UI primitive decision:
+  `RideHailingSkuCard` now uses `PuCard selectable` as the option control.
+  `PuCheckbox` is rendered as a visual state affordance inside the card; the
+  checkbox itself does not own a separate option interaction. This preserves a
+  single click/keyboard target per vehicle option.
+- Preview decision:
+  SKU hero image is resolved from `sku.presentation.heroImageAssetIds[0]`, then
+  detail image fallback. Because current presentation values are plain strings
+  and may be non-displayable asset ids, the frontend only renders direct
+  `http(s)`, `data:`, `blob:`, or `/` URLs and falls back to the existing car
+  icon otherwise.
+- Selection decision:
+  `usePuSelect<number>({ multiple: true })` owns selected RideHailing SKU ids.
+  The default selected candidate is the provider/default selectable option or
+  the cheapest selectable option. Tapping another card adds it to the candidate
+  set instead of replacing the existing candidate.
+- Pricing consequence:
+  with 快车 default-selected and 专车 added, the footer shows the candidate range
+  `￥36.00~52.00`; preflight range comparison detects changes as range changes,
+  such as `￥36.00~52.00 -> ￥36.00~61.00`.
+- Dispatch consequence:
+  because the backend dispatch policy is cheapest-first, a candidate set
+  containing 快车 and 专车 resolves to 快车 unless quotes change the ordering.
+  The system scenario now asserts this explicitly.
+- Float-panel decision:
+  `PuFloatPanel` replaces the custom bottom sheet. The three stops are computed
+  from the Ordering Content container height, and map fit padding follows the
+  active stop. The drawer control row remains a sibling absolute layer at the
+  bottom.
+- Verification finding:
+  frontend typecheck, focused RideHailing system scenario, directed Biome lint,
+  and `git diff --check` passed after segment 2.
+
+## Review: SKU Card Layout Remediation
+
+- Human correction:
+  Segment 2's `RideHailingSkuCard` layout is not correct. The card should not
+  be a horizontal three-column list item shaped as
+  `[preview][vehicle summary][price / checkbox]`.
+- Human correction:
+  this is not a new slice. It is a continuation of the current choice-set SKU /
+  float-panel slice, and can be tracked as Segment 3: SKU Card Layout
+  Remediation.
+- Target layout:
+  the card should be a left/right layout:
+  `flex-row(meta-flex-col(flex-row(name, info-icon-btn), preview), price-flex-col(estimated-text, flex-col(amount, checkbox)))`.
+- Target alignment:
+  the price column is `items-end`; both amount and checkbox are right-aligned.
+- Human correction:
+  checkbox belongs below the price amount, not in the name row and not beside
+  the amount.
+- Human correction:
+  there is no separate product concept called `vehicle summary`; it should be
+  treated as the SKU name.
+- Human correction:
+  `status/reason` should not exist inside the card. Unavailable RideHailing
+  vehicle options should be hidden by the list layer, not rendered as disabled
+  cards with reason text.
+- Invariants for remediation:
+  keep `PuCard selectable`; keep `PuCheckbox` as visual state only; keep the
+  card as the single interactive target; keep multi-select `usePuSelect`; keep
+  SKU preview fallback; keep existing semantic test ids stable.
+- Implementation status:
+  remediation was later started explicitly and implemented as Segment 3.
+
+## Implementation: Choice-Set SKU Card Layout Remediation Segment 3
+
+- Human start:
+  user explicitly started Segment 3 after the task packet was updated.
+- Implementation boundary:
+  this segment only changed the RideHailing SKU card display and its immediate
+  caller. It did not change the choice-set order model, provider dispatch,
+  `PuFloatPanel`, or Order Detail scope.
+- Layout decision:
+  `RideHailingSkuCard` now uses the reviewed left/right structure:
+  meta column with SKU name + info icon and preview, plus a right-aligned price
+  column with estimated text, amount, and checkbox below the amount.
+- Interaction decision:
+  the info icon remains visual-only rather than an actual nested button because
+  the card itself is the single selectable target.
+- Interaction decision:
+  the checkbox remains a visual `PuCheckbox` state affordance controlled by
+  `usePuSelect`; it does not own independent selection state.
+- Content decision:
+  the card no longer receives or displays `disabledReason`. Unavailable quoted
+  options continue to be filtered out by `visibleRideQuoteOptions`, so status /
+  reason text does not become a card concept.
+- Responsive decision:
+  the 420px media rule no longer hides the preview. On narrow widths the preview
+  shrinks but remains visible.
+- Verification finding:
+  formatting, directed lint, frontend typecheck, focused RideHailing system
+  scenario, and `git diff --check` passed after Segment 3.
diff --git a/tasks/ride-hailing-ui-fixes/sequence-diagram.md b/tasks/ride-hailing-ui-fixes/sequence-diagram.md
new file mode 100644
index 000000000..4ae6b03b2
--- /dev/null
+++ b/tasks/ride-hailing-ui-fixes/sequence-diagram.md
@@ -0,0 +1,153 @@
+# RideHailing Choice-Set Order Sequence
+
+## Model Decisions
+
+- RideHailing Ordering uses a multi-select vehicle SKU list.
+- Order creation records an unresolved choice-set item: the user authorizes a
+  candidate SKU set and sees the candidate set price range.
+- RideHailing Order lifecycle dispatch resolves exactly one final SKU after the
+  choice-set item is created.
+- Provider dispatch stays inside the create-order transaction for this slice.
+- Provider instance is SKU-bound product fact; RideHailing order creation does
+  not pre-bind `ride_hailing_orders.providerInstanceId`.
+- Post-dispatch provider binding lives only in the choice-set resolution
+  snapshot.
+- The resolved SKU may be outside the original candidate set when provider
+  reality requires it, such as free vehicle upgrades.
+- Resolution outside the candidate set must be explicit in the snapshot:
+  provider source, resolved SKU / provider car type, and reason.
+- Bill is created from the resolved SKU quote / provider final settlement
+  amount, not from the unresolved candidate range.
+- Dispatch policy starts with the cheapest quoted candidate.
+- Provider dispatch failure cancels the order.
+- Provider create failure is not retried against the next cheapest candidate,
+  another vehicle type, or another provider.
+- Provider create failure returns a cancelled order id plus failure reason to
+  Ordering Page. Ordering Page shows a failure dialog and does not navigate to
+  Order Detail.
+- Provider substitution outside candidates bills final settlement as-is.
+- Order Detail is not redesigned in this slice; it keeps the current legacy
+  selected-vehicle display.
+
+## Target Sequence
+
+```mermaid
+sequenceDiagram
+  autonumber
+  participant UI as Ordering UI
+  participant Order as Trade Order
+  participant RH as RideHailing Order Lifecycle
+  participant Provider as RideHailing Provider
+  participant Bill as Bill
+  participant Payment as Payment
+
+  UI->>Order: POST /ordering/evaluate<br/>items[CHOICE_SET].candidateSkuIds + route
+  Order->>RH: quote candidate SKU set
+  RH->>Provider: estimate per candidate SKU
+  Provider-->>RH: quote list
+  RH-->>Order: candidate quotes
+  Order-->>UI: price range + selectable candidates<br/>create_order allowed?
+
+  UI->>Order: POST /orders<br/>items[CHOICE_SET].candidateSkuIds
+  Order->>Order: create trade_order<br/>item.kind = CHOICE_SET<br/>resolution = null
+  Order->>RH: create ride_hailing_order<br/>executionPhase = INITIATING<br/>no provider pre-binding
+  RH->>RH: start dispatch inside create-order<br/>choose cheapest quoted candidate
+  RH->>RH: read provider instance from selected SKU facts
+  RH->>Provider: createRide with selected candidate car type
+  alt provider create accepted
+    Provider-->>RH: providerOrderId + accepted/resolved car type
+    RH->>Order: resolve choice-set item<br/>resolved SKU or provider car type snapshot
+    RH->>RH: executionPhase = DISPATCHING/ACCEPTED
+    Order-->>UI: orderId
+  else provider create fails
+    RH->>Order: cancel order<br/>dispatch failure reason
+    RH->>RH: executionPhase = FAILED/CANCELLED
+    Order-->>UI: cancelled order id + failure reason
+    UI->>UI: show ordering-failed dialog<br/>stay on Ordering Page
+  end
+
+  UI->>Order: open Order Detail
+  Order-->>UI: existing selected-vehicle projection<br/>from resolved choice-set
+
+  Provider-->>RH: status callbacks<br/>accepted / in_trip / finished
+  RH->>RH: update execution phase<br/>driver / vehicle snapshots
+
+  Provider-->>RH: final settlement amount
+  RH->>RH: commit finalSettlementInput
+  RH->>Bill: create final bill from resolved SKU / settlement
+  Bill->>Bill: split final charge lines
+  Bill-->>Order: bill available on order detail
+
+  UI->>Bill: open bill/payment action
+  Bill->>Payment: create payment execution for bill line
+  Payment-->>Bill: settlement callback/query result
+  Bill->>Order: settlement consequence if complete
+  Order-->>UI: order paid/completed state
+```
+
+## Snapshot Shape Sketch
+
+```ts
+type ChoiceSetOrderItemSnapshot = {
+  itemId: string;
+  kind: "CHOICE_SET";
+  productType: "RIDE_HAILING";
+  candidates: Array<{
+    sku: SkuSnapshot;
+    quoteSnapshot: {
+      amountFen: number;
+      currency: "CNY";
+      quotedAt: string;
+      expiresAt?: string | null;
+    };
+  }>;
+  resolution: null | {
+    sku?: SkuSnapshot | null;
+    providerVehicleTypeCode?: string | null;
+    providerInstanceId?: number | null;
+    providerType?: string | null;
+    providerOrderId?: string | null;
+    quoteSnapshot?: {
+      amountFen: number;
+      currency: "CNY";
+      resolvedAt: string;
+    } | null;
+    source: "PROVIDER_ACCEPTED" | "DISPATCH_POLICY";
+    candidateRelation: "IN_CANDIDATES" | "PROVIDER_UPGRADE" | "PROVIDER_SUBSTITUTION";
+    reason?: string | null;
+  };
+  quantity: 1;
+};
+```
+
+## Command Shape Sketch
+
+```ts
+type CreateOrderItemInput =
+  | {
+      kind?: "FIXED";
+      skuId: number;
+      quantity?: number | null;
+    }
+  | {
+      kind: "CHOICE_SET";
+      productType: "RIDE_HAILING";
+      candidateSkuIds: number[];
+      quantity?: 1 | null;
+    };
+```
+
+## Current Implementation Mismatch
+
+- Current RideHailing create-order synchronously calls provider `createRide`.
+  The synchronous timing remains acceptable for this slice, but the target must
+  first create a `CHOICE_SET` item and then resolve it during RideHailing
+  dispatch.
+- Current `trade_orders.items` stores one concrete SKU snapshot immediately.
+- Current `ride_hailing_orders` stores provider binding and execution phase but
+  target provider binding should live only in choice-set resolution.
+- Current `ride_hailing_orders.provider_instance_id` is create-time required,
+  but target provider instance ownership should be SKU-bound and resolved during
+  dispatch.
+- Current final Bill is created after provider final settlement input; this
+  aligns with the target billing timing and should be preserved.
diff --git a/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts b/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
index c9471d431..589f93e89 100644
--- a/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
+++ b/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
@@ -204,7 +204,10 @@ async function givenRideHailingOrderingPlacement(): Promise<{
         type: "FIXED",
       },
       skuSelectionPolicy: {
-        type: "EXACTLY_ONE",
+        type: "CHOICE_SET",
+        min: 1,
+        max: null,
+        resolvesTo: 1,
       },
     },
     servicePolicy: {
@@ -333,7 +336,7 @@ async function assertRideHailingOrderingContent(page: Page): Promise<void> {
   });
 }
 
-async function selectPremierVehicle(page: Page): Promise<void> {
+async function selectPremierAsAdditionalCandidate(page: Page): Promise<void> {
   const vehicleCards = page.getByTestId("ordering.ride-hailing.vehicle-card");
   await vehicleCards.first().waitFor({
     state: "visible",
@@ -350,14 +353,21 @@ async function selectPremierVehicle(page: Page): Promise<void> {
   });
   await assertLocatorTextMatches({
     actual: page.getByTestId("ordering.ride-hailing.quote-price-range").textContent(),
-    label: "RideHailing price range",
-    pattern: /￥36\.00~52\.00/,
+    label: "RideHailing default selected candidate price",
+    pattern: /￥36\.00/,
   });
   await vehicleCards.filter({ hasText: "系统曹操专车" }).click();
-  await page.getByTestId("ordering.ride-hailing.vehicle-card.selected").waitFor({
+  const selectedMarkers = page.getByTestId("ordering.ride-hailing.vehicle-card.selected");
+  await selectedMarkers.first().waitFor({
     state: "visible",
     timeout: 10_000,
   });
+  assert.equal(await selectedMarkers.count(), 2);
+  await assertLocatorTextMatches({
+    actual: page.getByTestId("ordering.ride-hailing.quote-price-range").textContent(),
+    label: "RideHailing selected candidate range",
+    pattern: /￥36\.00~52\.00/,
+  });
 }
 
 async function assertRideHailingOrderDetail(page: Page): Promise<void> {
@@ -372,7 +382,7 @@ async function assertRideHailingOrderDetail(page: Page): Promise<void> {
   });
   await assertLocatorTextIncludes({
     actual: page.getByTestId("order-detail.ride-hailing.selected-vehicle").textContent(),
-    expected: "系统曹操专车",
+    expected: "系统曹操快车",
     label: "RideHailing selected vehicle",
   });
   await assertLocatorTextIncludes({
@@ -417,7 +427,7 @@ scenario("commerce_ride_hailing_ordering_reaches_order_detail", async (ctx) => {
 
     await openRideHailingOrderingFromPr({ page, prId: pr.id });
     await assertRideHailingOrderingContent(page);
-    await selectPremierVehicle(page);
+    await selectPremierAsAdditionalCandidate(page);
 
     await page.getByTestId("ordering.ride-hailing.create-order").click();
     await assertRideHailingOrderDetail(page);
@@ -451,16 +461,20 @@ scenario("commerce_ride_hailing_provider_create_failure_stays_on_ordering_page",
     await installDeterministicShareSidecarStubs(page);
 
     await openRideHailingOrderingFromPr({ page, prId: pr.id });
-    await selectPremierVehicle(page);
+    await selectPremierAsAdditionalCandidate(page);
     await page.getByTestId("ordering.ride-hailing.create-order").click();
     await page.getByTestId("ordering.ride-hailing.page").waitFor({
       state: "visible",
       timeout: 10_000,
     });
+    await page.getByText("下单失败").waitFor({
+      state: "visible",
+      timeout: 10_000,
+    });
     await assertLocatorTextIncludes({
-      actual: page.getByTestId("ordering.notice.blocked").textContent(),
+      actual: page.locator("body").textContent(),
       expected: "Fake Caocao create failed",
-      label: "RideHailing create failure notice",
+      label: "RideHailing create failure dialog",
     });
     assert.equal(new URL(page.url()).pathname, "/order/new");
   });
@@ -494,7 +508,7 @@ scenario("commerce_ride_hailing_preflight_price_change_requires_confirmation", a
 
     await openRideHailingOrderingFromPr({ page, prId: pr.id });
     await assertRideHailingOrderingContent(page);
-    await selectPremierVehicle(page);
+    await selectPremierAsAdditionalCandidate(page);
 
     await updateFakeCaocaoEstimate({
       carType: "PREMIER",
@@ -508,7 +522,7 @@ scenario("commerce_ride_hailing_preflight_price_change_requires_confirmation", a
     });
     await assertLocatorTextIncludes({
       actual: page.locator("body").textContent(),
-      expected: "当前价格已从 ￥52.00 更新为 ￥61.00。是否继续下单？",
+      expected: "当前价格已从 ￥36.00~52.00 更新为 ￥36.00~61.00。是否继续下单？",
       label: "RideHailing price-change preflight dialog",
     });
     assert.equal(await readFakeCaocaoOrderCount(), 0);

From 499291ea62b80f64708682f0f58f1a4f942a68a3 Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Mon, 22 Jun 2026 20:16:01 +0800
Subject: [PATCH 32/94] feat(commerce): add quote-bound offer listing

- persist commerce quotes and expose Offer-owned listing for Rental and RideHailing

- make create-order consume quote-bound fixed and choice-set items

- migrate ordering UI to unified listing with quote-expiry refresh and dialog-only failures

- cover RideHailing provider availability, quote validity, and listing refresh branches
---
 .../drizzle/0080_commerce_quote_identity.sql  |  25 +
 .../src/controllers/commerce.controller.ts    | 133 +--
 .../domains/ride-hailing/model/provider.ts    |  21 +-
 .../ride-hailing/services/caocao-provider.ts  | 162 ++--
 .../domains/trade/use-cases/create-order.ts   | 814 +++++-------------
 .../src/domains/trade/use-cases/index.ts      |   2 +
 .../domains/trade/use-cases/offer-listing.ts  | 578 +++++++++++++
 .../domains/trade/use-cases/offer-quote.ts    | 239 +++++
 .../use-cases/ride-hailing-ordering-flow.ts   | 181 ----
 apps/backend/src/entities/commerce-quote.ts   | 119 +++
 .../repositories/CommerceQuoteRepository.ts   |  36 +
 .../offer-quote-resolution.scenario.test.ts   | 264 ++++++
 .../commerce/model/ordering-content.ts        |  14 +-
 .../domains/commerce/queries/useCommerce.ts   |  59 +-
 .../ordering/OrderingFloatingNoticeLayer.vue  |  68 --
 .../ui/ordering/RentalOrderingForm.vue        | 126 +--
 .../ordering/RideHailingOrderingContent.vue   | 320 +++++--
 .../src/pages/OrderingFromPlacementPage.vue   | 193 ++---
 docs/20-product-tdd/ecommerce-contracts.md    |  65 +-
 packages/fake-caocao-server/src/routes.ts     |  27 +-
 packages/fake-caocao-server/src/state.ts      |  29 +
 tasks/ride-hailing-ui-fixes/change-log.md     | 165 ++++
 tasks/ride-hailing-ui-fixes/control.md        | 139 ++-
 tasks/ride-hailing-ui-fixes/discussion-log.md | 405 +++++++++
 .../offer-listing-quote-identity-plan.md      | 748 ++++++++++++++++
 .../commerce/rental-ordering.scenario.test.ts | 292 ++++---
 .../ride-hailing-ordering.scenario.test.ts    | 326 ++++++-
 27 files changed, 3985 insertions(+), 1565 deletions(-)
 create mode 100644 apps/backend/drizzle/0080_commerce_quote_identity.sql
 create mode 100644 apps/backend/src/domains/trade/use-cases/offer-listing.ts
 create mode 100644 apps/backend/src/domains/trade/use-cases/offer-quote.ts
 create mode 100644 apps/backend/src/entities/commerce-quote.ts
 create mode 100644 apps/backend/src/repositories/CommerceQuoteRepository.ts
 create mode 100644 apps/backend/tests/commerce/offer-quote-resolution.scenario.test.ts
 delete mode 100644 apps/frontend/src/domains/commerce/ui/ordering/OrderingFloatingNoticeLayer.vue
 create mode 100644 tasks/ride-hailing-ui-fixes/offer-listing-quote-identity-plan.md

diff --git a/apps/backend/drizzle/0080_commerce_quote_identity.sql b/apps/backend/drizzle/0080_commerce_quote_identity.sql
new file mode 100644
index 000000000..0b144b765
--- /dev/null
+++ b/apps/backend/drizzle/0080_commerce_quote_identity.sql
@@ -0,0 +1,25 @@
+create table "commerce_quotes" (
+  "id" uuid primary key default gen_random_uuid(),
+  "listing_session_id" uuid not null,
+  "offer_id" bigint not null references "offers" ("id") on delete restrict,
+  "product_type" text not null,
+  "item_kind" text not null,
+  "spu_id" bigint not null references "product_spus" ("id") on delete restrict,
+  "sku_id" bigint not null references "product_skus" ("id") on delete restrict,
+  "quantity" integer not null default 1,
+  "listing_context_snapshot" jsonb not null,
+  "fulfillment_quote_snapshot" jsonb not null,
+  "pricing_snapshot" jsonb not null,
+  "expires_at" timestamp with time zone,
+  "created_at" timestamp with time zone not null default now(),
+  "updated_at" timestamp with time zone not null default now()
+);
+
+create index "commerce_quotes_listing_session_idx"
+  on "commerce_quotes" ("listing_session_id");
+
+create index "commerce_quotes_offer_sku_idx"
+  on "commerce_quotes" ("offer_id", "sku_id");
+
+create index "commerce_quotes_expires_at_idx"
+  on "commerce_quotes" ("expires_at");
diff --git a/apps/backend/src/controllers/commerce.controller.ts b/apps/backend/src/controllers/commerce.controller.ts
index 68ba99bd1..fdecfe257 100644
--- a/apps/backend/src/controllers/commerce.controller.ts
+++ b/apps/backend/src/controllers/commerce.controller.ts
@@ -7,9 +7,8 @@ import { throwHttpProblem } from "../lib/problem-details";
 import {
   cancelRentalOrderFromOrderDetail,
   createOrderCommand,
-  evaluateOrdering,
   getCommerceOrderDetail,
-  quoteRideHailingOrderingOptions,
+  listOfferListing,
   simulateRentalBookingConfirmation,
 } from "../domains/trade";
 import {
@@ -41,41 +40,29 @@ const registrantSchema = z.object({
   nationalId: z.string().trim().nullable().optional(),
 });
 
-const orderParticipantSchema = z.object({
+const listingParticipantSchema = z.object({
   userId: z.string().uuid(),
+  displayName: z.string().trim().nullable().optional(),
+  phoneMasked: z.string().trim().nullable().optional(),
 });
 
-const fixedOrderItemCommandSchema = z.object({
-  kind: z.literal("FIXED").optional(),
-  skuId: z.number().int().positive(),
+const fixedQuoteBoundOrderItemCommandSchema = z.object({
+  kind: z.literal("FIXED"),
+  quoteId: z.string().uuid(),
   quantity: z.number().int().positive().nullable().optional(),
 });
 
-const rideHailingChoiceSetOrderItemCommandSchema = z.object({
+const choiceSetQuoteBoundOrderItemCommandSchema = z.object({
   kind: z.literal("CHOICE_SET"),
-  productType: z.literal("RIDE_HAILING"),
-  candidateSkuIds: z.array(z.number().int().positive()).min(1),
+  candidateQuoteIds: z.array(z.string().uuid()).min(1),
   quantity: z.literal(1).nullable().optional(),
 });
 
-const orderItemCommandSchema = z.union([
-  fixedOrderItemCommandSchema,
-  rideHailingChoiceSetOrderItemCommandSchema,
+const quoteBoundOrderItemCommandSchema = z.union([
+  fixedQuoteBoundOrderItemCommandSchema,
+  choiceSetQuoteBoundOrderItemCommandSchema,
 ]);
 
-const rentalOrderingCommandSchema = z.object({
-  offerId: z.number().int().positive(),
-  prId: z.number().int().positive().nullable().optional(),
-  participants: z.array(orderParticipantSchema).min(1),
-  items: z.array(fixedOrderItemCommandSchema).min(1),
-  extraProperties: z.object({
-    serviceStartAt: z.string().datetime({ offset: true }),
-    serviceEndAt: z.string().datetime({ offset: true }),
-    contactPhone: z.string().trim().min(1),
-    registrants: z.array(registrantSchema).min(1),
-  }),
-});
-
 const rideHailingPlaceSnapshotSchema = z.object({
   name: z.string().trim().min(1),
   address: z.string().trim().nullable().optional(),
@@ -100,50 +87,33 @@ const rideHailingRouteSnapshotSchema = z.object({
     .optional(),
 });
 
-const rideHailingOrderingCommandSchema = z.object({
-  offerId: z.number().int().positive(),
-  prId: z.number().int().positive().nullable().optional(),
-  participants: z.array(orderParticipantSchema).min(1),
-  items: z.array(rideHailingChoiceSetOrderItemCommandSchema).min(1),
-  extraProperties: z.object({
-    route: rideHailingRouteSnapshotSchema,
-    departureAt: z.string().datetime({ offset: true }).nullable().optional(),
-    riders: z.array(z.string().uuid()).min(1),
-    contactPhone: z.string().trim().min(1),
-  }),
-});
-
 const genericCreateOrderCommandSchema = z.object({
-  source: z.object({
-    offerId: z.number().int().positive(),
-  }),
   prId: z.number().int().positive().nullable().optional(),
-  participants: z.array(orderParticipantSchema).min(1),
-  items: z.array(orderItemCommandSchema).min(1),
-  productTypedExtraProperties: z.union([
-    rentalOrderingCommandSchema.shape.extraProperties,
-    rideHailingOrderingCommandSchema.shape.extraProperties,
-  ]),
+  items: z.array(quoteBoundOrderItemCommandSchema).min(1),
 });
 
-const rideHailingEvaluationExtraPropertiesSchema =
-  rideHailingOrderingCommandSchema.shape.extraProperties.extend({
-    contactPhone: z.string().trim(),
-  });
-
-const genericEvaluateOrderingCommandSchema = genericCreateOrderCommandSchema.extend({
-  productTypedExtraProperties: z.union([
-    rentalOrderingCommandSchema.shape.extraProperties,
-    rideHailingEvaluationExtraPropertiesSchema,
-  ]),
+const offerIdParamSchema = z.object({
+  offerId: z.coerce.number().int().positive(),
 });
 
-const rideHailingOrderingOptionsCommandSchema = z.object({
-  source: z.object({
-    offerId: z.number().int().positive(),
+const offerListingInputSchema = z.union([
+  z.object({
+    productType: z.literal("RENTAL"),
+    participants: z.array(listingParticipantSchema).min(1),
+    serviceStartAt: z.string().datetime({ offset: true }),
+    serviceEndAt: z.string().datetime({ offset: true }),
+    contactPhone: z.string().trim().min(1),
+    registrants: z.array(registrantSchema).min(1),
   }),
-  route: rideHailingRouteSnapshotSchema,
-});
+  z.object({
+    productType: z.literal("RIDE_HAILING"),
+    participants: z.array(listingParticipantSchema).min(1),
+    route: rideHailingRouteSnapshotSchema,
+    departureAt: z.string().datetime({ offset: true }).nullable().optional(),
+    riders: z.array(listingParticipantSchema).min(1),
+    contactPhone: z.string().trim().min(1),
+  }),
+]);
 
 const readClientId = (headerValue: string | undefined): string => {
   const clientId = headerValue?.trim();
@@ -169,16 +139,10 @@ type UuidParam<Key extends string> = {
 };
 
 type CommerceRouteSchema = {
-  "/ordering/evaluate": {
-    $post: JsonEndpoint<
-      { json: z.infer<typeof genericEvaluateOrderingCommandSchema> },
-      Awaited<ReturnType<typeof evaluateOrdering>>
-    >;
-  };
-  "/ordering/ride-hailing/options": {
+  "/offers/:offerId/listing": {
     $post: JsonEndpoint<
-      { json: z.infer<typeof rideHailingOrderingOptionsCommandSchema> },
-      Awaited<ReturnType<typeof quoteRideHailingOrderingOptions>>
+      { param: z.infer<typeof offerIdParamSchema>; json: z.infer<typeof offerListingInputSchema> },
+      Awaited<ReturnType<typeof listOfferListing>>
     >;
   };
   "/orders": {
@@ -229,26 +193,17 @@ type CommerceRouteSchema = {
 export const commerceRoute: Hono<AuthEnv, CommerceRouteSchema> = app
   .use("*", authMiddleware)
   .post(
-    "/ordering/evaluate",
-    zValidator("json", genericEvaluateOrderingCommandSchema),
+    "/offers/:offerId/listing",
+    zValidator("param", offerIdParamSchema),
+    zValidator("json", offerListingInputSchema),
     async (c) => {
+      const { offerId } = c.req.valid("param");
       const payload = c.req.valid("json");
-      const auth = c.get("auth");
-      const result = await evaluateOrdering({
-        ...payload,
-        viewerUserId: auth.userId,
-      });
-      return c.json(result);
-    },
-  )
-  .post(
-    "/ordering/ride-hailing/options",
-    zValidator("json", rideHailingOrderingOptionsCommandSchema),
-    async (c) => {
-      const payload = c.req.valid("json");
-      const result = await quoteRideHailingOrderingOptions({
-        offerId: payload.source.offerId,
-        route: payload.route,
+      const userId = requireAuthenticatedUserId(c);
+      const result = await listOfferListing({
+        offerId,
+        viewerUserId: userId,
+        listingInput: payload,
       });
       return c.json(result);
     },
diff --git a/apps/backend/src/domains/ride-hailing/model/provider.ts b/apps/backend/src/domains/ride-hailing/model/provider.ts
index a689428fd..2c56b2549 100644
--- a/apps/backend/src/domains/ride-hailing/model/provider.ts
+++ b/apps/backend/src/domains/ride-hailing/model/provider.ts
@@ -13,9 +13,7 @@ export const caocaoProviderInstanceConfigSchema = z.object({
   requestTimeoutMs: z.number().int().positive().nullable().optional(),
 });
 
-export type CaocaoProviderInstanceConfig = z.infer<
-  typeof caocaoProviderInstanceConfigSchema
->;
+export type CaocaoProviderInstanceConfig = z.infer<typeof caocaoProviderInstanceConfigSchema>;
 
 export type RideHailingProviderInstanceConfig = CaocaoProviderInstanceConfig;
 
@@ -78,6 +76,17 @@ export type RideHailingProviderEstimateInput = {
   params: Record<string, string | number | boolean | null | undefined>;
 };
 
+export type RideHailingProviderVehicleQuote = {
+  providerVehicleTypeCode: string;
+  providerVehicleTypeName: string;
+  estimateAmountFen: number;
+  distanceMeters: number | null;
+  durationSeconds: number | null;
+  providerQuoteId: string | null;
+  providerQuoteExpiresAt: string | null;
+  providerSnapshot: unknown;
+};
+
 export type RideHailingProviderCreateRideInput = {
   orderId: string;
   params: Record<string, string | number | boolean | null | undefined>;
@@ -99,7 +108,7 @@ export type RideHailingProviderConfirmFeeInput = {
 export type RideHailingProviderPort = {
   buildExternalOrderId(orderId: string): string;
   parseExternalOrderId(externalOrderId: string): string | null;
-  estimate(input: RideHailingProviderEstimateInput): Promise<unknown>;
+  estimate(input: RideHailingProviderEstimateInput): Promise<RideHailingProviderVehicleQuote>;
   createRide(input: RideHailingProviderCreateRideInput): Promise<{
     providerOrderId: string;
     externalOrderId: string;
@@ -117,7 +126,5 @@ export type RideHailingProviderPort = {
     providerSnapshot: unknown;
   }>;
   confirmFee(input: RideHailingProviderConfirmFeeInput): Promise<void>;
-  parseOrderStatusCallback(
-    form: Record<string, string>,
-  ): CaocaoOrderStatusCallback;
+  parseOrderStatusCallback(form: Record<string, string>): CaocaoOrderStatusCallback;
 };
diff --git a/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts b/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
index 247ac388c..63bdfdcee 100644
--- a/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
+++ b/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
@@ -11,6 +11,7 @@ import type {
   RideHailingProviderConfirmFeeInput,
   RideHailingProviderCreateRideInput,
   RideHailingProviderEstimateInput,
+  RideHailingProviderVehicleQuote,
   RideHailingProviderPort,
 } from "../model";
 
@@ -20,19 +21,15 @@ type CaocaoParamInput = Record<string, CaocaoParamValue>;
 const EXTERNAL_ORDER_ID_PREFIX = "rh";
 const UUID_BASE36_ALPHABET = /^[0-9a-z]+$/;
 const CAOCAO_ORDER_STATUS_CALLBACK_EVENTS: ReadonlySet<number> = new Set([
-  1, 2, 3, 4, 5, 6, 9, 11, 12, 13, 20, 21, 22, 23, 24, 25, 26, 27, 40,
-  41, 42, 43, 44, 45, 46, 47, 48,
+  1, 2, 3, 4, 5, 6, 9, 11, 12, 13, 20, 21, 22, 23, 24, 25, 26, 27, 40, 41, 42, 43, 44, 45, 46, 47,
+  48,
 ]);
 
 const isRecord = (value: unknown): value is Record<string, unknown> =>
   typeof value === "object" && value !== null && !Array.isArray(value);
 
 const readRequiredStringField = (value: unknown, key: string): string => {
-  if (
-    isRecord(value) &&
-    typeof value[key] === "string" &&
-    value[key].length > 0
-  ) {
+  if (isRecord(value) && typeof value[key] === "string" && value[key].length > 0) {
     return value[key];
   }
   if (isRecord(value) && typeof value[key] === "number") {
@@ -42,16 +39,35 @@ const readRequiredStringField = (value: unknown, key: string): string => {
 };
 
 const readRequiredNumberField = (value: unknown, key: string): number => {
-  if (
-    isRecord(value) &&
-    typeof value[key] === "number" &&
-    Number.isFinite(value[key])
-  ) {
+  if (isRecord(value) && typeof value[key] === "number" && Number.isFinite(value[key])) {
     return value[key];
   }
   throw new Error(`Expected number field ${key}`);
 };
 
+const readOptionalNumberField = (value: unknown, keys: string[]): number | null => {
+  if (!isRecord(value)) return null;
+  for (const key of keys) {
+    const candidate = value[key];
+    if (typeof candidate === "number" && Number.isFinite(candidate)) return candidate;
+    if (typeof candidate === "string" && candidate.trim().length > 0) {
+      const parsed = Number(candidate);
+      if (Number.isFinite(parsed)) return parsed;
+    }
+  }
+  return null;
+};
+
+const readOptionalStringField = (value: unknown, keys: string[]): string | null => {
+  if (!isRecord(value)) return null;
+  for (const key of keys) {
+    const candidate = value[key];
+    if (typeof candidate === "string" && candidate.trim().length > 0) return candidate;
+    if (typeof candidate === "number" && Number.isFinite(candidate)) return String(candidate);
+  }
+  return null;
+};
+
 const normalizeCaocaoParams = (params: CaocaoParamInput): CaocaoSignedParams => {
   const normalized: CaocaoSignedParams = {};
   for (const [key, value] of Object.entries(params)) {
@@ -80,10 +96,7 @@ export function createCaocaoSignature(input: {
 const signaturesMatch = (left: string, right: string): boolean => {
   const leftBuffer = Buffer.from(left, "utf8");
   const rightBuffer = Buffer.from(right, "utf8");
-  return (
-    leftBuffer.length === rightBuffer.length &&
-    timingSafeEqual(leftBuffer, rightBuffer)
-  );
+  return leftBuffer.length === rightBuffer.length && timingSafeEqual(leftBuffer, rightBuffer);
 };
 
 export function buildCaocaoSignedParams(input: {
@@ -106,9 +119,7 @@ export function buildCaocaoSignedParams(input: {
   };
 }
 
-export const serializeCaocaoFormBody = (
-  params: CaocaoSignedParams,
-): URLSearchParams => {
+export const serializeCaocaoFormBody = (params: CaocaoSignedParams): URLSearchParams => {
   const body = new URLSearchParams();
   for (const [key, value] of Object.entries(params)) {
     body.set(key, value);
@@ -150,15 +161,12 @@ export function decodeCaocaoExternalOrderId(externalOrderId: string): string | n
 const buildEndpointUrl = (baseUrl: string, path: string): string =>
   `${baseUrl.replace(/\/+$/, "")}/${path.replace(/^\/+/, "")}`;
 
-const parseCaocaoResponseBody = <TData>(
-  body: unknown,
-): CaocaoRawResponse<TData> => {
+const parseCaocaoResponseBody = <TData>(body: unknown): CaocaoRawResponse<TData> => {
   if (!isRecord(body)) {
     throw new Error("Caocao response must be a JSON object");
   }
   const code = readRequiredNumberField(body, "code");
-  const success =
-    typeof body.success === "boolean" ? body.success : null;
+  const success = typeof body.success === "boolean" ? body.success : null;
   const msg = typeof body.msg === "string" ? body.msg : null;
 
   return {
@@ -169,9 +177,7 @@ const parseCaocaoResponseBody = <TData>(
   };
 };
 
-const assertCaocaoSuccess = <TData>(
-  response: CaocaoRawResponse<TData>,
-): TData => {
+const assertCaocaoSuccess = <TData>(response: CaocaoRawResponse<TData>): TData => {
   if (response.code === 200 && response.success) {
     return response.data as TData;
   }
@@ -193,14 +199,9 @@ const assertCaocaoSuccess = <TData>(
   });
 };
 
-const parseCaocaoCallbackEvent = (
-  value: string,
-): CaocaoOrderStatusCallbackEvent => {
+const parseCaocaoCallbackEvent = (value: string): CaocaoOrderStatusCallbackEvent => {
   const parsed = Number(value);
-  if (
-    !Number.isInteger(parsed) ||
-    !CAOCAO_ORDER_STATUS_CALLBACK_EVENTS.has(parsed)
-  ) {
+  if (!Number.isInteger(parsed) || !CAOCAO_ORDER_STATUS_CALLBACK_EVENTS.has(parsed)) {
     throw new Error("Caocao callback event is unsupported");
   }
   return parsed as CaocaoOrderStatusCallbackEvent;
@@ -231,10 +232,12 @@ export function resolveCaocaoOrderStatusCallbackUrl(
 export class CaocaoProviderAdapter implements RideHailingProviderPort {
   private readonly config: CaocaoProviderInstanceConfig;
 
-  constructor(private readonly input: {
-    providerInstance: RideHailingProviderInstance;
-    fetchImpl?: typeof fetch;
-  }) {
+  constructor(
+    private readonly input: {
+      providerInstance: RideHailingProviderInstance;
+      fetchImpl?: typeof fetch;
+    },
+  ) {
     if (input.providerInstance.providerType !== "CAOCAO") {
       throw new Error("Caocao adapter requires a CAOCAO provider instance");
     }
@@ -252,8 +255,36 @@ export class CaocaoProviderAdapter implements RideHailingProviderPort {
     return decodeCaocaoExternalOrderId(externalOrderId);
   }
 
-  async estimate(input: RideHailingProviderEstimateInput): Promise<unknown> {
-    return this.request("GET", "/common/estimatePriceWithDetail", input.params);
+  async estimate(
+    input: RideHailingProviderEstimateInput,
+  ): Promise<RideHailingProviderVehicleQuote> {
+    const data = await this.request<Record<string, unknown>>(
+      "GET",
+      "/common/estimatePriceWithDetail",
+      input.params,
+    );
+    const providerVehicleTypeCode =
+      readOptionalStringField(data, ["carType", "car_type", "vehicle_type"]) ??
+      (typeof input.params.car_type === "string" ? input.params.car_type : null) ??
+      (typeof input.params.carType === "string" ? input.params.carType : null) ??
+      "UNKNOWN";
+    return {
+      providerVehicleTypeCode,
+      providerVehicleTypeName:
+        readOptionalStringField(data, ["carTypeName", "car_type_name"]) ?? providerVehicleTypeCode,
+      estimateAmountFen:
+        readOptionalNumberField(data, [
+          "estimateAmountFen",
+          "estimatePriceFen",
+          "estimate_price",
+          "price",
+        ]) ?? 0,
+      distanceMeters: readOptionalNumberField(data, ["distanceMeters", "distance"]),
+      durationSeconds: readOptionalNumberField(data, ["durationSeconds", "duration"]),
+      providerQuoteId: readOptionalStringField(data, ["price_token", "quoteId", "quote_id"]),
+      providerQuoteExpiresAt: readOptionalStringField(data, ["quoteExpiresAt", "quote_expires_at"]),
+      providerSnapshot: data,
+    };
   }
 
   async createRide(input: RideHailingProviderCreateRideInput): Promise<{
@@ -262,14 +293,10 @@ export class CaocaoProviderAdapter implements RideHailingProviderPort {
     providerSnapshot: unknown;
   }> {
     const externalOrderId = this.buildExternalOrderId(input.orderId);
-    const data = await this.request<Record<string, unknown>>(
-      "POST",
-      "/common/orderCarV2",
-      {
-        ...input.params,
-        ext_order_id: externalOrderId,
-      },
-    );
+    const data = await this.request<Record<string, unknown>>("POST", "/common/orderCarV2", {
+      ...input.params,
+      ext_order_id: externalOrderId,
+    });
     return {
       providerOrderId: readRequiredStringField(data, "orderNo"),
       externalOrderId,
@@ -288,16 +315,12 @@ export class CaocaoProviderAdapter implements RideHailingProviderPort {
     cancelFeeFen: number;
     providerSnapshot: unknown;
   }> {
-    const data = await this.request<Record<string, unknown>>(
-      "POST",
-      "/common/cancelOrderV3",
-      {
-        order_id: input.providerOrderId,
-        cancel_code: input.cancelCode,
-        cancel_reason: input.cancelReason,
-        who_cancel: input.whoCancel,
-      },
-    );
+    const data = await this.request<Record<string, unknown>>("POST", "/common/cancelOrderV3", {
+      order_id: input.providerOrderId,
+      cancel_code: input.cancelCode,
+      cancel_reason: input.cancelReason,
+      who_cancel: input.whoCancel,
+    });
     return {
       providerOrderId: readRequiredStringField(data, "orderNo"),
       cancelFeeFen: readRequiredNumberField(data, "cancelFee"),
@@ -310,13 +333,9 @@ export class CaocaoProviderAdapter implements RideHailingProviderPort {
     cancelFeeFen: number;
     providerSnapshot: unknown;
   }> {
-    const data = await this.request<Record<string, unknown>>(
-      "GET",
-      "/common/queryCancelFee",
-      {
-        order_no: input.providerOrderId,
-      },
-    );
+    const data = await this.request<Record<string, unknown>>("GET", "/common/queryCancelFee", {
+      order_no: input.providerOrderId,
+    });
     return {
       providerOrderId: readRequiredStringField(data, "orderNo"),
       cancelFeeFen: readRequiredNumberField(data, "cancelFee"),
@@ -332,9 +351,7 @@ export class CaocaoProviderAdapter implements RideHailingProviderPort {
     });
   }
 
-  parseOrderStatusCallback(
-    form: Record<string, string>,
-  ): CaocaoOrderStatusCallback {
+  parseOrderStatusCallback(form: Record<string, string>): CaocaoOrderStatusCallback {
     const callbackSign = form.sign;
     if (!callbackSign) {
       throw new Error("Caocao callback signature is missing");
@@ -389,10 +406,7 @@ export class CaocaoProviderAdapter implements RideHailingProviderPort {
       signKey: this.config.signKey,
     });
     const fetchImpl = this.input.fetchImpl ?? fetch;
-    const endpointUrl = buildEndpointUrl(
-      this.config.endpointBaseUrl,
-      endpointPath,
-    );
+    const endpointUrl = buildEndpointUrl(this.config.endpointBaseUrl, endpointPath);
     const response =
       method === "GET"
         ? await fetchImpl(`${endpointUrl}?${serializeCaocaoFormBody(signedParams)}`)
@@ -410,8 +424,6 @@ export class CaocaoProviderAdapter implements RideHailingProviderPort {
       });
     }
 
-    return assertCaocaoSuccess(
-      parseCaocaoResponseBody<TData>(await response.json()),
-    );
+    return assertCaocaoSuccess(parseCaocaoResponseBody<TData>(await response.json()));
   }
 }
diff --git a/apps/backend/src/domains/trade/use-cases/create-order.ts b/apps/backend/src/domains/trade/use-cases/create-order.ts
index a3bdac31a..21427e26d 100644
--- a/apps/backend/src/domains/trade/use-cases/create-order.ts
+++ b/apps/backend/src/domains/trade/use-cases/create-order.ts
@@ -1,6 +1,12 @@
 import { randomUUID } from "node:crypto";
 import { db } from "../../../lib/db";
 import { throwHttpProblem } from "../../../lib/problem-details";
+import type {
+  CommerceQuote,
+  RentalQuoteListingContextSnapshot,
+  RideHailingFulfillmentQuoteSnapshot,
+  RideHailingQuoteListingContextSnapshot,
+} from "../../../entities/commerce-quote";
 import type { Offer, OfferId } from "../../../entities/offer";
 import type { PRId } from "../../../entities/partner-request";
 import type { ProductSku } from "../../../entities/product-sku";
@@ -10,8 +16,6 @@ import type { TradeOrderId } from "../../../entities/trade-order";
 import type { UserId } from "../../../entities/user";
 import { OfferRepository } from "../../../repositories/OfferRepository";
 import { PartnerRequestRepository } from "../../../repositories/PartnerRequestRepository";
-import { ProductSkuRepository } from "../../../repositories/ProductSkuRepository";
-import { ProductSpuRepository } from "../../../repositories/ProductSpuRepository";
 import { RentalOrderRepository } from "../../../repositories/RentalOrderRepository";
 import { RideHailingOrderRepository } from "../../../repositories/RideHailingOrderRepository";
 import { RideHailingProviderInstanceRepository } from "../../../repositories/RideHailingProviderInstanceRepository";
@@ -48,73 +52,27 @@ import type {
   RideHailingRouteSnapshot,
   SkuSnapshot,
 } from "../model";
+import { buildEqualRelativeSplitRule, validateOrderParticipants } from "../services";
 import {
-  buildEqualRelativeSplitRule,
-  buildOrderParticipantsFromContext,
-  PricingApplication,
-  validateOrderParticipants,
-} from "../services";
-import { evaluateRideOptions, type RideQuoteOption } from "./ride-hailing-ordering-flow";
+  resolveQuoteBoundOrderItems,
+  type QuoteBoundOrderItemInput,
+  type ValidatedOfferQuote,
+  type ValidatedQuoteItem,
+} from "./offer-quote";
 
 const offerRepo = new OfferRepository();
 const partnerRequestRepo = new PartnerRequestRepository();
-const productSpuRepo = new ProductSpuRepository();
-const productSkuRepo = new ProductSkuRepository();
 const skuCancellationPolicyRepo = new SkuCancellationPolicyRepository();
 const providerRepo = new RideHailingProviderInstanceRepository();
-const pricingApplication = new PricingApplication();
 
 const DEFAULT_UNPAID_WINDOW_MINUTES = 30;
 const DEFAULT_INITIATING_WINDOW_MINUTES = 30;
 
-export type OrderParticipantInput = {
-  userId: string;
-};
-
-export type FixedOrderItemInput = {
-  kind?: "FIXED";
-  skuId: number;
-  quantity?: number | null;
-};
-
-export type ChoiceSetOrderItemInput = {
-  kind: "CHOICE_SET";
-  productType: "RIDE_HAILING";
-  candidateSkuIds: number[];
-  quantity?: 1 | null;
-};
-
-export type OrderItemInput = FixedOrderItemInput | ChoiceSetOrderItemInput;
-
-export type RentalProductTypedExtraProperties = {
-  serviceStartAt: string;
-  serviceEndAt: string;
-  contactPhone: string;
-  registrants: Array<{
-    fullName: string;
-    nationalId?: string | null;
-  }>;
-};
-
-export type RideHailingProductTypedExtraProperties = {
-  route: RideHailingRouteSnapshot;
-  departureAt?: string | null;
-  riders: string[];
-  contactPhone: string;
-};
-
-export type ProductTypedExtraProperties =
-  | RentalProductTypedExtraProperties
-  | RideHailingProductTypedExtraProperties;
+export type OrderItemInput = QuoteBoundOrderItemInput;
 
 export type CreateOrderCommandInput = {
-  source: {
-    offerId: number;
-  };
   prId?: number | null;
-  participants: OrderParticipantInput[];
   items: OrderItemInput[];
-  productTypedExtraProperties: ProductTypedExtraProperties;
 };
 
 export type CreateRentalOrderInput = {
@@ -148,34 +106,6 @@ export type OrderingActionProblem = {
   detail: string;
 };
 
-export type OrderingActionDecision =
-  | {
-      allowed: true;
-      problem: null;
-      nextRelevantAt: string | null;
-    }
-  | {
-      allowed: false;
-      problem: OrderingActionProblem;
-      nextRelevantAt: string | null;
-    };
-
-export type OrderingEvaluation = {
-  evaluatedAt: string;
-  actions: {
-    create_order: OrderingActionDecision;
-  };
-  price: {
-    currency: "CNY";
-    totalFen: number | null;
-    range?: {
-      minFen: number | null;
-      maxFen: number | null;
-    } | null;
-    explanations: PriceExplanation[];
-  };
-};
-
 export type CreateOrderCommandResult =
   | {
       outcome: "CREATED";
@@ -188,24 +118,43 @@ export type CreateOrderCommandResult =
       reason: OrderingActionProblem;
     };
 
-type SelectedSkuContext = {
+type RideQuoteOption = {
+  skuId: number;
+  spuId: number;
+  name: string;
+  providerName: string;
+  carTypeName: string;
+  displayName: string;
+  providerVehicleTypeCode: string;
+  providerInstanceId: string;
+  selected: boolean;
+  selectable: boolean;
+  disabledReason: string | null;
+  estimateAmountFen: number | null;
+  quoteAmountFen: number | null;
+  priceExplanations: PriceExplanation[];
+};
+
+type SelectedProductContext = {
   offer: Offer;
   spu: ProductSpu;
   sku: ProductSku;
   quantity: number;
 };
 
-type SelectedRentalContext = Omit<SelectedSkuContext, "sku"> & {
+type SelectedRentalContext = Omit<SelectedProductContext, "sku"> & {
   sku: ProductSku & { facts: RentalSkuFacts };
   itemId: string;
   pricingSnapshot: OrderPricingSnapshot;
   cancellationPolicySnapshot: FixedOrderItemSnapshot["sku"]["cancellationPolicySnapshot"];
-  extraProperties: RentalProductTypedExtraProperties;
+  listingContext: RentalQuoteListingContextSnapshot;
 };
 
-type RideCandidateContext = Omit<SelectedSkuContext, "sku"> & {
+type RideCandidateContext = Omit<SelectedProductContext, "sku"> & {
   sku: ProductSku & { facts: RideHailingSkuFacts };
   quote: RideQuoteOption;
+  offerQuote?: CommerceQuote;
+  fulfillmentQuote: RideHailingFulfillmentQuoteSnapshot;
 };
 
 type SelectedRideContext = {
@@ -214,7 +163,7 @@ type SelectedRideContext = {
   candidates: RideCandidateContext[];
   dispatchCandidate: RideCandidateContext;
   pricingSnapshot: OrderPricingSnapshot;
-  extraProperties: RideHailingProductTypedExtraProperties;
+  listingContext: RideHailingQuoteListingContextSnapshot;
 };
 
 const isActiveNow = (offer: Offer, now = new Date()): boolean => {
@@ -236,18 +185,6 @@ const actionProblem = (input: {
   detail: input.detail,
 });
 
-const allowed = (): OrderingActionDecision => ({
-  allowed: true,
-  problem: null,
-  nextRelevantAt: null,
-});
-
-const blocked = (problem: OrderingActionProblem): OrderingActionDecision => ({
-  allowed: false,
-  problem,
-  nextRelevantAt: null,
-});
-
 async function resolveOffer(offerId: number): Promise<Offer> {
   const offer = await offerRepo.findById(offerId as OfferId);
   if (!offer) {
@@ -259,117 +196,6 @@ async function resolveOffer(offerId: number): Promise<Offer> {
   return offer;
 }
 
-function readFixedItemInput(items: OrderItemInput[]): FixedOrderItemInput {
-  const firstItem = items[0];
-  if (!firstItem) {
-    return throwHttpProblem({
-      status: 400,
-      detail: "CreateOrder requires at least one selected item",
-    });
-  }
-  if (firstItem.kind === "CHOICE_SET") {
-    return throwHttpProblem({
-      status: 400,
-      detail: "CreateOrder requires a fixed SKU item",
-    });
-  }
-  return firstItem;
-}
-
-function readRideChoiceSetItemInput(items: OrderItemInput[]): ChoiceSetOrderItemInput {
-  const firstItem = items[0];
-  if (!firstItem) {
-    return throwHttpProblem({
-      status: 400,
-      detail: "RideHailing CreateOrder requires one choice-set item",
-    });
-  }
-  if (firstItem.kind !== "CHOICE_SET" || firstItem.productType !== "RIDE_HAILING") {
-    return throwHttpProblem({
-      status: 400,
-      detail: "RideHailing CreateOrder requires a RideHailing choice-set item",
-    });
-  }
-  if (items.length !== 1) {
-    return throwHttpProblem({
-      status: 400,
-      detail: "RideHailing CreateOrder supports one choice-set item only",
-    });
-  }
-  if ((firstItem.quantity ?? 1) !== 1) {
-    return throwHttpProblem({
-      status: 409,
-      detail: "RideHailing choice-set quantity must be 1",
-    });
-  }
-  const candidateSkuIds = [...new Set(firstItem.candidateSkuIds)];
-  if (candidateSkuIds.length === 0) {
-    return throwHttpProblem({
-      status: 409,
-      detail: "请选择至少一个可用车型",
-    });
-  }
-  return {
-    ...firstItem,
-    candidateSkuIds,
-    quantity: 1,
-  };
-}
-
-async function resolveSkuContext(input: {
-  offer: Offer;
-  skuId: number;
-  quantity?: number | null;
-}): Promise<SelectedSkuContext> {
-  const sku = await productSkuRepo.findById(input.skuId);
-  if (!sku || sku.status !== "ACTIVE") {
-    return throwHttpProblem({ status: 404, detail: "Selected SKU not found" });
-  }
-  const spu = await productSpuRepo.findById(sku.spuId);
-  if (!spu || spu.status !== "ACTIVE") {
-    return throwHttpProblem({ status: 404, detail: "Selected SPU not found" });
-  }
-  if (spu.productType !== input.offer.productType) {
-    return throwHttpProblem({
-      status: 409,
-      detail: "Selected SKU product type does not match Offer",
-    });
-  }
-  if (!input.offer.spuIds.includes(spu.id)) {
-    return throwHttpProblem({
-      status: 409,
-      detail: "Selected SPU is not part of the active Offer",
-    });
-  }
-
-  const quantity = input.quantity ?? 1;
-  if (quantity !== 1) {
-    return throwHttpProblem({
-      status: 409,
-      detail: "Commerce MVP supports quantity 1 only",
-    });
-  }
-
-  return {
-    offer: input.offer,
-    spu,
-    sku,
-    quantity,
-  };
-}
-
-async function resolveSelectedSku(input: {
-  offer: Offer;
-  items: OrderItemInput[];
-}): Promise<SelectedSkuContext> {
-  const firstItem = readFixedItemInput(input.items);
-  return resolveSkuContext({
-    offer: input.offer,
-    skuId: firstItem.skuId,
-    quantity: firstItem.quantity,
-  });
-}
-
 async function buildCancellationPolicySnapshot(sku: ProductSku) {
   const ref = sku.cancellationPolicyRef;
   const policy = ref
@@ -390,39 +216,10 @@ async function buildCancellationPolicySnapshot(sku: ProductSku) {
   };
 }
 
-function readRentalExtras(input: ProductTypedExtraProperties): RentalProductTypedExtraProperties {
-  if ("serviceStartAt" in input && "serviceEndAt" in input && "registrants" in input) {
-    return input;
-  }
-  return throwHttpProblem({
-    status: 400,
-    detail: "Rental CreateOrder requires Rental extra properties",
-  });
-}
-
-function readRideExtras(
-  input: ProductTypedExtraProperties,
-): RideHailingProductTypedExtraProperties {
-  if ("route" in input && "riders" in input) {
-    return input;
-  }
-  return throwHttpProblem({
-    status: 400,
-    detail: "RideHailing CreateOrder requires RideHailing extra properties",
-  });
-}
-
 function validateCommonCommand(input: {
   command: CreateOrderCommandInput;
   createdBy?: string | null;
 }): OrderingActionProblem | null {
-  if (input.command.participants.length === 0) {
-    return actionProblem({
-      code: "ORDER_PARTICIPANTS_REQUIRED",
-      title: "无法创建订单",
-      detail: "订单至少需要一名参与者。",
-    });
-  }
   if (input.command.items.length === 0) {
     return actionProblem({
       code: "ORDER_ITEMS_REQUIRED",
@@ -430,16 +227,6 @@ function validateCommonCommand(input: {
       detail: "订单至少需要一个商品项。",
     });
   }
-  if (
-    input.createdBy &&
-    !input.command.participants.some((participant) => participant.userId === input.createdBy)
-  ) {
-    return actionProblem({
-      code: "ORDER_CREATOR_NOT_PARTICIPANT",
-      title: "无法创建订单",
-      detail: "下单人必须包含在订单参与者中。",
-    });
-  }
   return null;
 }
 
@@ -474,33 +261,33 @@ async function validatePrAttachmentForEvaluation(input: {
   return null;
 }
 
-function validateRentalExtras(input: {
-  extras: RentalProductTypedExtraProperties;
-  participantCount: number;
+function validateRentalQuoteContext(input: {
+  listingContext: RentalQuoteListingContextSnapshot;
   selectedParticipantCount: number;
 }): OrderingActionProblem | null {
-  if (input.selectedParticipantCount !== input.participantCount) {
+  const participantCount = input.listingContext.participants.length;
+  if (input.selectedParticipantCount !== participantCount) {
     return actionProblem({
       code: "RENTAL_SKU_PARTICIPANT_COUNT_MISMATCH",
       title: "规格与人数不一致",
       detail: "选择的租赁规格需要匹配订单参与人数。",
     });
   }
-  if (input.extras.contactPhone.trim().length === 0) {
+  if (input.listingContext.contactPhone.trim().length === 0) {
     return actionProblem({
       code: "ORDER_CONTACT_PHONE_REQUIRED",
       title: "缺少联系方式",
       detail: "请填写联系人电话。",
     });
   }
-  if (input.extras.registrants.length !== input.participantCount) {
+  if (input.listingContext.registrants.length !== participantCount) {
     return actionProblem({
       code: "RENTAL_REGISTRANT_COUNT_MISMATCH",
       title: "实名登记人数不一致",
       detail: "实名登记人数需要匹配订单参与者人数。",
     });
   }
-  if (input.extras.registrants.some((registrant) => registrant.fullName.trim().length === 0)) {
+  if (input.listingContext.registrants.some((registrant) => registrant.name.trim().length === 0)) {
     return actionProblem({
       code: "RENTAL_REGISTRANT_NAME_REQUIRED",
       title: "缺少实名信息",
@@ -508,8 +295,8 @@ function validateRentalExtras(input: {
     });
   }
   if (
-    Number.isNaN(new Date(input.extras.serviceStartAt).getTime()) ||
-    Number.isNaN(new Date(input.extras.serviceEndAt).getTime())
+    Number.isNaN(new Date(input.listingContext.serviceStartAt).getTime()) ||
+    Number.isNaN(new Date(input.listingContext.serviceEndAt).getTime())
   ) {
     return actionProblem({
       code: "RENTAL_SERVICE_TIME_INVALID",
@@ -520,117 +307,132 @@ function validateRentalExtras(input: {
   return null;
 }
 
-function validateRideExtras(
-  extras: RideHailingProductTypedExtraProperties,
-): OrderingActionProblem | null {
-  if (extras.riders.length === 0) {
-    return actionProblem({
-      code: "RIDE_HAILING_RIDERS_REQUIRED",
-      title: "缺少同乘人",
-      detail: "至少需要一名同乘人。",
-    });
-  }
-  if (extras.contactPhone.trim().length === 0) {
-    return actionProblem({
-      code: "ORDER_CONTACT_PHONE_REQUIRED",
-      title: "缺少联系方式",
-      detail: "请填写联系方式。",
-    });
-  }
-  return null;
-}
-
-const rideQuoteBaseAmountFen = (quote: RideQuoteOption): number => {
-  if (typeof quote.estimateAmountFen === "number") return quote.estimateAmountFen;
-  if (typeof quote.quoteAmountFen === "number") return quote.quoteAmountFen;
-  return throwHttpProblem({
-    status: 409,
-    detail: "RideHailing quote amount is missing",
-  });
-};
-
-async function resolveRentalSelection(input: {
-  command: CreateOrderCommandInput;
-  offer: Offer;
+const pricingSnapshotFromQuote = (input: {
   itemId: string;
-}): Promise<SelectedRentalContext> {
-  const selected = await resolveSelectedSku({
-    offer: input.offer,
-    items: input.command.items,
-  });
-  if (!isRentalSkuFacts(selected.sku.facts)) {
+  price: CommerceQuote["pricingSnapshot"];
+}): OrderPricingSnapshot => {
+  const totalFen = input.price.totalFen;
+  if (typeof totalFen !== "number") {
     return throwHttpProblem({
       status: 409,
-      detail: "Selected SKU is not a Rental SKU",
+      detail: "报价金额缺失。",
+      code: "ORDERING_QUOTE_PRICE_MISSING",
     });
   }
-  const extras = readRentalExtras(input.command.productTypedExtraProperties);
-  const pricingSnapshot = pricingApplication.resolve({
-    offer: input.offer,
-    items: [
+  return {
+    currency: input.price.currency,
+    itemBreakdowns: [
       {
         itemId: input.itemId,
-        spu: selected.spu,
-        sku: selected.sku,
-        quantity: selected.quantity,
+        resolvedAmountFen: totalFen,
+        explanations: input.price.explanations,
       },
     ],
-    orderContext: {
-      serviceTime: extras.serviceStartAt,
-    },
-  });
+    orderLevelExplanations: [],
+    subtotalFen: totalFen,
+    totalFen,
+  };
+};
 
+async function resolveRentalSelectionFromQuote(input: {
+  item: ValidatedQuoteItem;
+  itemId: string;
+}): Promise<SelectedRentalContext> {
+  if (input.item.kind !== "FIXED") {
+    return throwHttpProblem({
+      status: 409,
+      detail: "Rental create-order requires a fixed quote item",
+    });
+  }
+  const quote = input.item.quote;
+  if (
+    quote.offer.productType !== "RENTAL" ||
+    quote.quote.listingContextSnapshot.productType !== "RENTAL" ||
+    !isRentalSkuFacts(quote.sku.facts)
+  ) {
+    return throwHttpProblem({
+      status: 409,
+      detail: "Selected quote is not a Rental quote",
+    });
+  }
   return {
-    ...selected,
+    offer: quote.offer,
+    spu: quote.spu,
     sku: {
-      ...selected.sku,
-      facts: selected.sku.facts,
+      ...quote.sku,
+      facts: quote.sku.facts,
     },
+    quantity: quote.quote.quantity,
     itemId: input.itemId,
-    pricingSnapshot,
-    cancellationPolicySnapshot: await buildCancellationPolicySnapshot(selected.sku),
-    extraProperties: extras,
+    pricingSnapshot: pricingSnapshotFromQuote({
+      itemId: input.itemId,
+      price: quote.quote.pricingSnapshot,
+    }),
+    cancellationPolicySnapshot: await buildCancellationPolicySnapshot(quote.sku),
+    listingContext: quote.quote.listingContextSnapshot,
   };
 }
 
-async function resolveRideSelection(input: {
-  command: CreateOrderCommandInput;
-  offer: Offer;
+const rideQuoteOptionFromOfferQuote = (quote: ValidatedOfferQuote): RideQuoteOption => {
+  const fulfillment = quote.quote.fulfillmentQuoteSnapshot;
+  if (fulfillment.productType !== "RIDE_HAILING") {
+    return throwHttpProblem({
+      status: 409,
+      detail: "Selected quote is not a RideHailing quote",
+    });
+  }
+  return {
+    skuId: quote.sku.id,
+    spuId: quote.spu.id,
+    name: quote.sku.name,
+    providerName: fulfillment.providerName,
+    carTypeName: fulfillment.providerVehicleTypeName,
+    displayName: fulfillment.displayName,
+    providerVehicleTypeCode: fulfillment.providerVehicleTypeCode,
+    providerInstanceId: fulfillment.providerInstanceId,
+    selected: false,
+    selectable: true,
+    disabledReason: null,
+    estimateAmountFen: fulfillment.estimateAmountFen,
+    quoteAmountFen: quote.quote.pricingSnapshot.totalFen,
+    priceExplanations: quote.quote.pricingSnapshot.explanations,
+  };
+};
+
+async function resolveRideSelectionFromQuote(input: {
+  item: ValidatedQuoteItem;
   itemId: string;
 }): Promise<SelectedRideContext> {
-  const extras = readRideExtras(input.command.productTypedExtraProperties);
-  const choiceSetInput = readRideChoiceSetItemInput(input.command.items);
-
-  const options = await evaluateRideOptions({
-    offer: input.offer,
-    route: extras.route,
-    candidateSkuIds: choiceSetInput.candidateSkuIds,
-  });
-  const quotesBySkuId = new Map(options.map((option) => [option.skuId, option]));
+  if (input.item.kind !== "CHOICE_SET") {
+    return throwHttpProblem({
+      status: 409,
+      detail: "RideHailing create-order requires a choice-set quote item",
+    });
+  }
   const candidates = await Promise.all(
-    choiceSetInput.candidateSkuIds.map(async (skuId) => {
-      const selected = await resolveSkuContext({
-        offer: input.offer,
-        skuId,
-        quantity: 1,
-      });
-      if (!isRideHailingSkuFacts(selected.sku.facts)) {
+    input.item.candidateQuotes.map(async (quote): Promise<RideCandidateContext> => {
+      if (
+        quote.offer.productType !== "RIDE_HAILING" ||
+        quote.quote.listingContextSnapshot.productType !== "RIDE_HAILING" ||
+        quote.quote.fulfillmentQuoteSnapshot.productType !== "RIDE_HAILING" ||
+        !isRideHailingSkuFacts(quote.sku.facts)
+      ) {
         return throwHttpProblem({
           status: 409,
-          detail: "Selected SKU is not a RideHailing SKU",
+          detail: "Selected quote is not a RideHailing quote",
         });
       }
-      const quote = quotesBySkuId.get(selected.sku.id);
-      if (!quote || !quote.selectable || quote.quoteAmountFen === null) {
-        return throwHttpProblem({ status: 409, detail: "请选择可用车型" });
-      }
       return {
-        ...selected,
+        offer: quote.offer,
+        spu: quote.spu,
         sku: {
-          ...selected.sku,
-          facts: selected.sku.facts,
+          ...quote.sku,
+          facts: quote.sku.facts,
         },
-        quote,
+        quantity: quote.quote.quantity,
+        quote: rideQuoteOptionFromOfferQuote(quote),
+        offerQuote: quote.quote,
+        fulfillmentQuote: quote.quote.fulfillmentQuoteSnapshot,
       };
     }),
   );
@@ -642,28 +444,26 @@ async function resolveRideSelection(input: {
   if (!dispatchCandidate) {
     return throwHttpProblem({ status: 409, detail: "请选择可用车型" });
   }
-  const pricingSnapshot = pricingApplication.resolve({
-    offer: input.offer,
-    items: [
-      {
-        itemId: input.itemId,
-        spu: dispatchCandidate.spu,
-        sku: dispatchCandidate.sku,
-        quantity: dispatchCandidate.quantity,
-      },
-    ],
-    orderContext: {
-      quoteTotalFen: rideQuoteBaseAmountFen(dispatchCandidate.quote),
-    },
-  });
-
+  if (
+    !dispatchCandidate.offerQuote ||
+    dispatchCandidate.offerQuote.listingContextSnapshot.productType !== "RIDE_HAILING"
+  ) {
+    return throwHttpProblem({
+      status: 409,
+      detail: "RideHailing quote context is missing",
+      code: "ORDERING_QUOTE_CONTEXT_INVALID",
+    });
+  }
   return {
-    offer: input.offer,
+    offer: dispatchCandidate.offer,
     itemId: input.itemId,
     candidates,
     dispatchCandidate,
-    pricingSnapshot,
-    extraProperties: extras,
+    pricingSnapshot: pricingSnapshotFromQuote({
+      itemId: input.itemId,
+      price: dispatchCandidate.offerQuote.pricingSnapshot,
+    }),
+    listingContext: dispatchCandidate.offerQuote.listingContextSnapshot,
   };
 }
 
@@ -752,17 +552,6 @@ async function buildRideChoiceSetItemSnapshot(input: {
   };
 }
 
-function buildParticipantSnapshots(input: { command: CreateOrderCommandInput; createdBy: string }) {
-  return buildOrderParticipantsFromContext({
-    participants: input.command.participants.map((participant) => ({
-      participantId: participant.userId,
-      userId: participant.userId,
-      joinedVia: "API",
-    })),
-    createdBy: input.createdBy,
-  });
-}
-
 function buildTimeout(minutes: number) {
   const now = new Date();
   return {
@@ -776,7 +565,7 @@ async function createBaseOrder(input: {
   offer: Offer;
   status?: OrderStatus;
   createdBy: string;
-  participants: ReturnType<typeof buildParticipantSnapshots>;
+  participants: OrderParticipantSnapshot[];
   items: OrderItemSnapshot[];
   unpaidWindowMinutes: number;
 }) {
@@ -947,10 +736,7 @@ async function createRentalOrderBranch(input: {
   createdBy: string;
 }) {
   return db.transaction(async (tx) => {
-    const participants = buildParticipantSnapshots({
-      command: input.command,
-      createdBy: input.createdBy,
-    });
+    const participants = input.selected.listingContext.participants;
     const item = buildItemSnapshot({
       itemId: input.selected.itemId,
       sku: input.selected.sku,
@@ -977,14 +763,10 @@ async function createRentalOrderBranch(input: {
     const rentalOrderRepo = new RentalOrderRepository(tx);
     await rentalOrderRepo.create({
       orderId: base.order.id,
-      serviceStartAt: new Date(input.selected.extraProperties.serviceStartAt),
-      serviceEndAt: new Date(input.selected.extraProperties.serviceEndAt),
-      contactPhone: input.selected.extraProperties.contactPhone,
-      registrants: input.selected.extraProperties.registrants.map((registrant) => ({
-        name: registrant.fullName,
-        phone: input.selected.extraProperties.contactPhone,
-        nationalIdMasked: registrant.nationalId ? "已填写" : null,
-      })),
+      serviceStartAt: new Date(input.selected.listingContext.serviceStartAt),
+      serviceEndAt: new Date(input.selected.listingContext.serviceEndAt),
+      contactPhone: input.selected.listingContext.contactPhone,
+      registrants: input.selected.listingContext.registrants,
     });
 
     const chargeLines = materializeChargeLinesFromSplitRule({
@@ -1012,23 +794,14 @@ async function createRentalOrderBranch(input: {
   });
 }
 
-const buildRideRiderSnapshots = (
-  extras: RideHailingProductTypedExtraProperties,
-): RideHailingRiderSnapshot[] =>
-  extras.riders.map((userId) => ({
-    userId,
-    displayName: "同乘人",
-    phoneMasked: null,
-  }));
-
 async function createRideHailingOrderBranch(input: {
   command: CreateOrderCommandInput;
   selected: SelectedRideContext;
   createdBy: string;
 }): Promise<CreateOrderCommandResult> {
   const provider = await providerRepo.findById(
-    input.selected.dispatchCandidate.sku.facts
-      .rideHailingProviderInstanceId as RideHailingProviderInstanceId,
+    input.selected.dispatchCandidate.fulfillmentQuote
+      .providerInstanceId as RideHailingProviderInstanceId,
   );
   if (!provider) {
     return throwHttpProblem({
@@ -1041,10 +814,7 @@ async function createRideHailingOrderBranch(input: {
   let providerOrderIdToCompensate: string | null = null;
   try {
     return await db.transaction(async (tx) => {
-      const participants = buildParticipantSnapshots({
-        command: input.command,
-        createdBy: input.createdBy,
-      });
+      const participants = input.selected.listingContext.participants;
       const unresolvedItem = await buildRideChoiceSetItemSnapshot({
         selected: input.selected,
         resolution: null,
@@ -1070,12 +840,12 @@ async function createRideHailingOrderBranch(input: {
       const rideRepo = new RideHailingOrderRepository(tx);
       await rideRepo.create({
         orderId: base.order.id,
-        routeSnapshot: input.selected.extraProperties.route,
-        departureAt: input.selected.extraProperties.departureAt
-          ? new Date(input.selected.extraProperties.departureAt)
+        routeSnapshot: input.selected.listingContext.route,
+        departureAt: input.selected.listingContext.departureAt
+          ? new Date(input.selected.listingContext.departureAt)
           : null,
-        riders: buildRideRiderSnapshots(input.selected.extraProperties),
-        contactPhone: input.selected.extraProperties.contactPhone,
+        riders: input.selected.listingContext.riders,
+        contactPhone: input.selected.listingContext.contactPhone,
         executionPhase: "INITIATING",
       });
 
@@ -1085,11 +855,12 @@ async function createRideHailingOrderBranch(input: {
           orderId: base.order.id,
           params: {
             callback_url: resolveCaocaoOrderStatusCallbackUrl(provider),
-            car_type: input.selected.dispatchCandidate.sku.facts.providerVehicleTypeCode,
-            flat: input.selected.extraProperties.route.origin.latitude,
-            flng: input.selected.extraProperties.route.origin.longitude,
-            tlat: input.selected.extraProperties.route.destination.latitude,
-            tlng: input.selected.extraProperties.route.destination.longitude,
+            car_type: input.selected.dispatchCandidate.fulfillmentQuote.providerVehicleTypeCode,
+            price_token: input.selected.dispatchCandidate.fulfillmentQuote.providerQuoteId,
+            flat: input.selected.listingContext.route.origin.latitude,
+            flng: input.selected.listingContext.route.origin.longitude,
+            tlat: input.selected.listingContext.route.destination.latitude,
+            tlng: input.selected.listingContext.route.destination.longitude,
           },
         });
       } catch (error) {
@@ -1123,8 +894,10 @@ async function createRideHailingOrderBranch(input: {
             input.selected.dispatchCandidate.sku,
           ),
         }),
-        providerVehicleTypeCode: input.selected.dispatchCandidate.sku.facts.providerVehicleTypeCode,
-        providerVehicleTypeName: input.selected.dispatchCandidate.quote.carTypeName,
+        providerVehicleTypeCode:
+          input.selected.dispatchCandidate.fulfillmentQuote.providerVehicleTypeCode,
+        providerVehicleTypeName:
+          input.selected.dispatchCandidate.fulfillmentQuote.providerVehicleTypeName,
         quoteSnapshot: buildRideQuoteSnapshot(input.selected.dispatchCandidate.quote),
         providerBinding,
         source: "DISPATCH_POLICY",
@@ -1169,199 +942,63 @@ async function createRideHailingOrderBranch(input: {
   }
 }
 
-export async function evaluateOrdering(
+export async function createOrderCommand(
   input: CreateOrderCommandInput & {
-    viewerUserId?: string | null;
+    createdBy: string;
   },
-): Promise<OrderingEvaluation> {
+): Promise<CreateOrderCommandResult> {
   const commonProblem = validateCommonCommand({
     command: input,
-    createdBy: input.viewerUserId,
-  });
-  const offer = await resolveOffer(input.source.offerId);
-  const prProblem = await validatePrAttachmentForEvaluation({
-    prId: input.prId,
-    offerId: offer.id,
-    viewerUserId: input.viewerUserId,
+    createdBy: input.createdBy,
   });
-  const itemId = "preview";
-
-  if (offer.productType === "RENTAL") {
-    const selected = await resolveRentalSelection({
-      command: input,
-      offer,
-      itemId,
-    });
-    const rentalProblem = validateRentalExtras({
-      extras: selected.extraProperties,
-      participantCount: input.participants.length,
-      selectedParticipantCount: selected.sku.facts.participantCount,
+  if (commonProblem) {
+    return throwHttpProblem({
+      status: 409,
+      detail: commonProblem.detail,
+      code: commonProblem.code,
     });
-    return {
-      evaluatedAt: new Date().toISOString(),
-      actions: {
-        create_order: commonProblem
-          ? blocked(commonProblem)
-          : prProblem
-            ? blocked(prProblem)
-            : rentalProblem
-              ? blocked(rentalProblem)
-              : allowed(),
-      },
-      price: {
-        currency: "CNY",
-        totalFen: selected.pricingSnapshot.totalFen,
-        range: null,
-        explanations: [
-          ...selected.pricingSnapshot.itemBreakdowns.flatMap((breakdown) => breakdown.explanations),
-          ...selected.pricingSnapshot.orderLevelExplanations,
-        ],
-      },
-    };
   }
 
-  const extras = readRideExtras(input.productTypedExtraProperties);
-  const rideProblem = validateRideExtras(extras);
-  const choiceSetInput = readRideChoiceSetItemInput(input.items);
-  const options = await evaluateRideOptions({
-    offer,
-    route: extras.route,
-    candidateSkuIds: choiceSetInput.candidateSkuIds,
-  });
-  const quotedCandidates = options.filter(
-    (option) => option.selectable && option.quoteAmountFen !== null,
-  );
-  const dispatchQuote = [...quotedCandidates].sort(
-    (left, right) =>
-      (left.quoteAmountFen ?? Number.POSITIVE_INFINITY) -
-      (right.quoteAmountFen ?? Number.POSITIVE_INFINITY),
-  )[0];
-  const quoteProblem =
-    dispatchQuote === undefined
-      ? actionProblem({
-          code: "RIDE_HAILING_VEHICLE_REQUIRED",
-          title: "请选择可用车型",
-          detail: "请选择至少一个可用的网约车车型。",
-        })
-      : null;
-  const selected =
-    dispatchQuote === undefined
-      ? null
-      : await resolveSelectedSku({
-          offer,
-          items: [
-            {
-              kind: "FIXED",
-              skuId: dispatchQuote.skuId,
-              quantity: 1,
-            },
-          ],
-        });
-  if (selected && !isRideHailingSkuFacts(selected.sku.facts)) {
+  const quoteItems = await resolveQuoteBoundOrderItems(input.items);
+  const firstQuoteItem = quoteItems[0];
+  if (!firstQuoteItem || quoteItems.length !== 1) {
     return throwHttpProblem({
-      status: 409,
-      detail: "Selected SKU is not a RideHailing SKU",
+      status: 400,
+      detail: "CreateOrder requires one quote-bound item",
     });
   }
-  const pricingSnapshot =
-    selected && dispatchQuote
-      ? pricingApplication.resolve({
-          offer,
-          items: [
-            {
-              itemId,
-              spu: selected.spu,
-              sku: selected.sku,
-              quantity: selected.quantity,
-            },
-          ],
-          orderContext: {
-            quoteTotalFen: rideQuoteBaseAmountFen(dispatchQuote),
-          },
-        })
-      : null;
-  const selectablePrices = quotedCandidates
-    .map((option) => option.quoteAmountFen)
-    .filter((value): value is number => typeof value === "number");
-
-  return {
-    evaluatedAt: new Date().toISOString(),
-    actions: {
-      create_order: commonProblem
-        ? blocked(commonProblem)
-        : prProblem
-          ? blocked(prProblem)
-          : rideProblem
-            ? blocked(rideProblem)
-            : quoteProblem
-              ? blocked(quoteProblem)
-              : allowed(),
-    },
-    price: {
-      currency: "CNY",
-      totalFen: null,
-      range: {
-        minFen: selectablePrices.length ? Math.min(...selectablePrices) : null,
-        maxFen: selectablePrices.length ? Math.max(...selectablePrices) : null,
-      },
-      explanations: [
-        ...(pricingSnapshot?.itemBreakdowns.flatMap((breakdown) => breakdown.explanations) ?? []),
-        ...(pricingSnapshot?.orderLevelExplanations ?? []),
-      ],
-    },
-  };
-}
-
-export async function quoteRideHailingOrderingOptions(input: {
-  offerId: number;
-  route: RideHailingRouteSnapshot;
-}) {
-  const offer = await resolveOffer(input.offerId);
-  if (offer.productType !== "RIDE_HAILING") {
+  const firstOffer =
+    firstQuoteItem.kind === "FIXED"
+      ? firstQuoteItem.quote.offer
+      : firstQuoteItem.candidateQuotes[0]?.offer;
+  if (!firstOffer) {
     return throwHttpProblem({
       status: 409,
-      detail: "Offer is not a RideHailing offer",
+      detail: "报价缺少 Offer 信息。",
+      code: "ORDERING_QUOTE_OFFER_INVALID",
     });
   }
-
-  return {
-    quoteExpiresAt: new Date(Date.now() + 2 * 60 * 1000).toISOString(),
-    options: await evaluateRideOptions({
-      offer,
-      route: input.route,
-    }),
-  };
-}
-
-export async function createOrderCommand(
-  input: CreateOrderCommandInput & {
-    createdBy: string;
-  },
-): Promise<CreateOrderCommandResult> {
-  const commonProblem = validateCommonCommand({
-    command: input,
-    createdBy: input.createdBy,
+  const prProblem = await validatePrAttachmentForEvaluation({
+    prId: input.prId,
+    offerId: firstOffer.id,
+    viewerUserId: input.createdBy,
   });
-  if (commonProblem) {
+  if (prProblem) {
     return throwHttpProblem({
-      status: 409,
-      detail: commonProblem.detail,
-      code: commonProblem.code,
+      status: prProblem.code === "PR_ORDER_CREATOR_REQUIRED" ? 403 : 409,
+      detail: prProblem.detail,
+      code: prProblem.code,
     });
   }
-
-  const offer = await resolveOffer(input.source.offerId);
   const itemId = randomUUID();
 
-  if (offer.productType === "RENTAL") {
-    const selected = await resolveRentalSelection({
-      command: input,
-      offer,
+  if (firstQuoteItem.kind === "FIXED") {
+    const selected = await resolveRentalSelectionFromQuote({
+      item: firstQuoteItem,
       itemId,
     });
-    const rentalProblem = validateRentalExtras({
-      extras: selected.extraProperties,
-      participantCount: input.participants.length,
+    const rentalProblem = validateRentalQuoteContext({
+      listingContext: selected.listingContext,
       selectedParticipantCount: selected.sku.facts.participantCount,
     });
     if (rentalProblem) {
@@ -1382,19 +1019,10 @@ export async function createOrderCommand(
     };
   }
 
-  const selected = await resolveRideSelection({
-    command: input,
-    offer,
+  const selected = await resolveRideSelectionFromQuote({
+    item: firstQuoteItem,
     itemId,
   });
-  const rideProblem = validateRideExtras(selected.extraProperties);
-  if (rideProblem) {
-    return throwHttpProblem({
-      status: 409,
-      detail: rideProblem.detail,
-      code: rideProblem.code,
-    });
-  }
   return createRideHailingOrderBranch({
     command: input,
     selected,
diff --git a/apps/backend/src/domains/trade/use-cases/index.ts b/apps/backend/src/domains/trade/use-cases/index.ts
index 767da4425..51e74c485 100644
--- a/apps/backend/src/domains/trade/use-cases/index.ts
+++ b/apps/backend/src/domains/trade/use-cases/index.ts
@@ -1,6 +1,8 @@
 export * from "./apply-bill-settlement-to-order";
 export * from "./create-order";
 export * from "./finalize-rental-order-termination";
+export * from "./offer-listing";
+export * from "./offer-quote";
 export * from "./rental-ordering-flow";
 export * from "./ride-hailing-ordering-flow";
 export * from "./request-rental-order-termination";
diff --git a/apps/backend/src/domains/trade/use-cases/offer-listing.ts b/apps/backend/src/domains/trade/use-cases/offer-listing.ts
new file mode 100644
index 000000000..e4c29ef64
--- /dev/null
+++ b/apps/backend/src/domains/trade/use-cases/offer-listing.ts
@@ -0,0 +1,578 @@
+import { randomUUID } from "node:crypto";
+import type {
+  CommerceQuote,
+  NewCommerceQuote,
+  OfferListingSessionId,
+  OfferQuoteFulfillmentSnapshot,
+  OfferQuoteId,
+  OfferQuoteListingContextSnapshot,
+  OfferQuotePriceSnapshot,
+  RentalQuoteListingContextSnapshot,
+  RideHailingQuoteListingContextSnapshot,
+} from "../../../entities/commerce-quote";
+import type { Offer, OfferId } from "../../../entities/offer";
+import type { ProductSku } from "../../../entities/product-sku";
+import type { ProductSpu } from "../../../entities/product-spu";
+import type { RideHailingProviderInstanceId } from "../../../entities/ride-hailing-provider";
+import { throwHttpProblem } from "../../../lib/problem-details";
+import { CommerceQuoteRepository } from "../../../repositories/CommerceQuoteRepository";
+import { OfferRepository } from "../../../repositories/OfferRepository";
+import { ProductSkuRepository } from "../../../repositories/ProductSkuRepository";
+import { ProductSpuRepository } from "../../../repositories/ProductSpuRepository";
+import { RideHailingProviderInstanceRepository } from "../../../repositories/RideHailingProviderInstanceRepository";
+import { SkuCancellationPolicyRepository } from "../../../repositories/SkuCancellationPolicyRepository";
+import type {
+  FixedTotalPricingModel,
+  PriceExplanation,
+  RentalSkuFacts,
+  RideHailingSkuFacts,
+} from "../../merchandising";
+import { isRentalSkuFacts, isRideHailingSkuFacts } from "../../merchandising";
+import { createRideHailingProviderPort } from "../../ride-hailing";
+import type { RideHailingProviderVehicleQuote } from "../../ride-hailing/model";
+import type {
+  OrderParticipantSnapshot,
+  RentalRegistrant,
+  RideHailingRiderSnapshot,
+  RideHailingRouteSnapshot,
+} from "../model";
+import { buildOrderParticipantsFromContext, PricingApplication } from "../services";
+
+const offerRepo = new OfferRepository();
+const productSpuRepo = new ProductSpuRepository();
+const productSkuRepo = new ProductSkuRepository();
+const providerRepo = new RideHailingProviderInstanceRepository();
+const quoteRepo = new CommerceQuoteRepository();
+const skuCancellationPolicyRepo = new SkuCancellationPolicyRepository();
+const pricingApplication = new PricingApplication();
+
+const RIDE_QUOTE_TTL_MS = 2 * 60 * 1000;
+
+export type OfferListingParticipantInput = {
+  userId: string;
+  displayName?: string | null;
+  phoneMasked?: string | null;
+};
+
+export type OfferListingInput =
+  | {
+      productType: "RENTAL";
+      participants: OfferListingParticipantInput[];
+      serviceStartAt: string;
+      serviceEndAt: string;
+      contactPhone: string;
+      registrants: Array<{
+        fullName: string;
+        nationalId?: string | null;
+      }>;
+    }
+  | {
+      productType: "RIDE_HAILING";
+      participants: OfferListingParticipantInput[];
+      route: RideHailingRouteSnapshot;
+      departureAt?: string | null;
+      riders: OfferListingParticipantInput[];
+      contactPhone: string;
+    };
+
+export type ListingPriceSnapshot = OfferQuotePriceSnapshot;
+
+export type OfferListedItem =
+  | {
+      kind: "FIXED";
+      productType: "RENTAL";
+      skuId: number;
+      spuId: number;
+      quoteId: string;
+      displayName: string;
+      presentation: ProductSku["presentation"];
+      price: ListingPriceSnapshot;
+      cancellationPolicySummary: Array<{
+        visibleLabel: string;
+        refundPercent: number;
+        requiresOperatorHandling: boolean;
+      }>;
+    }
+  | {
+      kind: "CHOICE_CANDIDATE";
+      productType: "RIDE_HAILING";
+      skuId: number;
+      spuId: number;
+      quoteId: string;
+      displayName: string;
+      providerName: string;
+      providerVehicleTypeCode: string;
+      providerVehicleTypeName: string;
+      presentation: ProductSku["presentation"];
+      estimateSnapshot: RideHailingProviderVehicleQuote;
+      price: ListingPriceSnapshot;
+    };
+
+export type OfferListingResult = {
+  offerId: number;
+  productType: Offer["productType"];
+  listingSessionId: string;
+  expiresAt: string | null;
+  items: OfferListedItem[];
+};
+
+type ActiveSkuContext = {
+  offer: Offer;
+  spu: ProductSpu;
+  sku: ProductSku;
+};
+
+type RentalSkuContext = ActiveSkuContext & {
+  sku: ProductSku & { facts: RentalSkuFacts; pricingModel: FixedTotalPricingModel };
+};
+
+type RideSkuContext = ActiveSkuContext & {
+  sku: ProductSku & { facts: RideHailingSkuFacts };
+};
+
+const isActiveNow = (offer: Offer, now = new Date()): boolean => {
+  if (offer.status !== "ACTIVE") return false;
+  if (offer.startsAt && offer.startsAt > now) return false;
+  if (offer.endsAt && offer.endsAt <= now) return false;
+  return true;
+};
+
+async function resolveOffer(offerId: number): Promise<Offer> {
+  const offer = await offerRepo.findById(offerId as OfferId);
+  if (!offer) {
+    return throwHttpProblem({ status: 404, detail: "Offer not found" });
+  }
+  if (!isActiveNow(offer)) {
+    return throwHttpProblem({ status: 409, detail: "Offer is not active" });
+  }
+  return offer;
+}
+
+async function listActiveSkuContexts(offer: Offer): Promise<ActiveSkuContext[]> {
+  const contexts: ActiveSkuContext[] = [];
+  for (const spuId of offer.spuIds) {
+    const spu = await productSpuRepo.findById(spuId);
+    if (!spu || spu.status !== "ACTIVE" || spu.productType !== offer.productType) {
+      continue;
+    }
+    const skus = await productSkuRepo.listBySpuId(spu.id);
+    for (const sku of skus) {
+      if (sku.status !== "ACTIVE") continue;
+      contexts.push({ offer, spu, sku });
+    }
+  }
+  return contexts;
+}
+
+const buildParticipants = (input: {
+  participants: OfferListingParticipantInput[];
+  createdBy: string;
+}): OrderParticipantSnapshot[] => {
+  if (input.participants.length === 0) {
+    return throwHttpProblem({
+      status: 409,
+      detail: "订单至少需要一名参与者。",
+      code: "ORDER_PARTICIPANTS_REQUIRED",
+    });
+  }
+  return buildOrderParticipantsFromContext({
+    participants: input.participants.map((participant) => ({
+      participantId: participant.userId,
+      userId: participant.userId,
+      joinedVia: "API",
+    })),
+    createdBy: input.createdBy,
+  });
+};
+
+const buildRiderSnapshots = (riders: OfferListingParticipantInput[]): RideHailingRiderSnapshot[] =>
+  riders.map((rider) => ({
+    userId: rider.userId,
+    displayName: rider.displayName?.trim() || "同乘人",
+    phoneMasked: rider.phoneMasked ?? null,
+  }));
+
+const buildRentalRegistrants = (input: {
+  registrants: Array<{ fullName: string; nationalId?: string | null }>;
+  contactPhone: string;
+}): RentalRegistrant[] =>
+  input.registrants.map((registrant) => ({
+    name: registrant.fullName.trim(),
+    phone: input.contactPhone,
+    nationalIdMasked: registrant.nationalId ? "已填写" : null,
+  }));
+
+const assertRentalListingInput = (input: Extract<OfferListingInput, { productType: "RENTAL" }>) => {
+  if (!input.contactPhone.trim()) {
+    return throwHttpProblem({
+      status: 409,
+      detail: "请填写联系人电话。",
+      code: "ORDER_CONTACT_PHONE_REQUIRED",
+    });
+  }
+  if (input.registrants.length !== input.participants.length) {
+    return throwHttpProblem({
+      status: 409,
+      detail: "实名登记人数需要匹配订单参与者人数。",
+      code: "RENTAL_REGISTRANT_COUNT_MISMATCH",
+    });
+  }
+  if (input.registrants.some((registrant) => registrant.fullName.trim().length === 0)) {
+    return throwHttpProblem({
+      status: 409,
+      detail: "请填写所有入场人的姓名。",
+      code: "RENTAL_REGISTRANT_NAME_REQUIRED",
+    });
+  }
+};
+
+const assertRideListingInput = (
+  input: Extract<OfferListingInput, { productType: "RIDE_HAILING" }>,
+) => {
+  if (!input.contactPhone.trim()) {
+    return throwHttpProblem({
+      status: 409,
+      detail: "请填写联系方式。",
+      code: "ORDER_CONTACT_PHONE_REQUIRED",
+    });
+  }
+  if (input.riders.length === 0) {
+    return throwHttpProblem({
+      status: 409,
+      detail: "至少需要一名同乘人。",
+      code: "RIDE_HAILING_RIDERS_REQUIRED",
+    });
+  }
+};
+
+const pricingToListingPrice = (input: {
+  explanations: PriceExplanation[];
+  totalFen: number | null;
+}): ListingPriceSnapshot => ({
+  currency: "CNY",
+  totalFen: input.totalFen,
+  range: null,
+  explanations: input.explanations,
+});
+
+async function buildCancellationPolicySummary(sku: ProductSku) {
+  const ref = sku.cancellationPolicyRef;
+  const policy = ref
+    ? await skuCancellationPolicyRepo.findByRef(ref.policyId, ref.policyVersion)
+    : await skuCancellationPolicyRepo.findLatestBySkuId(sku.id);
+
+  return (
+    policy?.tiers.map((tier) => ({
+      visibleLabel: tier.visibleLabel,
+      refundPercent: tier.refundPercent,
+      requiresOperatorHandling: tier.requiresOperatorHandling,
+    })) ?? []
+  );
+}
+
+async function listRentalItems(input: {
+  offer: Offer;
+  listingSessionId: OfferListingSessionId;
+  listingContext: RentalQuoteListingContextSnapshot;
+}): Promise<{ items: OfferListedItem[]; quotes: NewCommerceQuote[] }> {
+  const contexts = (await listActiveSkuContexts(input.offer)).flatMap(
+    (context): RentalSkuContext[] => {
+      if (!isRentalSkuFacts(context.sku.facts) || context.sku.pricingModel.type !== "FIXED_TOTAL") {
+        return [];
+      }
+      if (context.sku.facts.participantCount !== input.listingContext.participants.length) {
+        return [];
+      }
+      return [
+        {
+          ...context,
+          sku: {
+            ...context.sku,
+            facts: context.sku.facts,
+            pricingModel: context.sku.pricingModel,
+          },
+        },
+      ];
+    },
+  );
+  const rows = await Promise.all(
+    contexts.map(async (context) => {
+      const quoteId = randomUUID() as OfferQuoteId;
+      const pricingSnapshot = pricingApplication.resolve({
+        offer: input.offer,
+        items: [
+          {
+            itemId: quoteId,
+            spu: context.spu,
+            sku: context.sku,
+            quantity: 1,
+          },
+        ],
+        orderContext: {
+          serviceTime: input.listingContext.serviceStartAt,
+        },
+      });
+      const price = pricingToListingPrice({
+        totalFen: pricingSnapshot.totalFen,
+        explanations: [
+          ...pricingSnapshot.itemBreakdowns.flatMap((breakdown) => breakdown.explanations),
+          ...pricingSnapshot.orderLevelExplanations,
+        ],
+      });
+      const fulfillmentQuoteSnapshot: OfferQuoteFulfillmentSnapshot = {
+        productType: "RENTAL",
+      };
+      return {
+        item: {
+          kind: "FIXED",
+          productType: "RENTAL",
+          skuId: context.sku.id,
+          spuId: context.spu.id,
+          quoteId,
+          displayName: context.sku.name,
+          presentation: context.sku.presentation,
+          price,
+          cancellationPolicySummary: await buildCancellationPolicySummary(context.sku),
+        } satisfies OfferListedItem,
+        quote: {
+          id: quoteId,
+          listingSessionId: input.listingSessionId,
+          offerId: input.offer.id as OfferId,
+          productType: "RENTAL",
+          itemKind: "FIXED",
+          spuId: context.spu.id,
+          skuId: context.sku.id,
+          quantity: 1,
+          listingContextSnapshot: input.listingContext,
+          fulfillmentQuoteSnapshot,
+          pricingSnapshot: price,
+          expiresAt: null,
+        } satisfies NewCommerceQuote,
+      };
+    }),
+  );
+  return {
+    items: rows.map((row) => row.item),
+    quotes: rows.map((row) => row.quote),
+  };
+}
+
+async function quoteRideSku(input: {
+  offer: Offer;
+  context: RideSkuContext;
+  route: RideHailingRouteSnapshot;
+  departureAt: string | null;
+}): Promise<{
+  providerName: string;
+  providerQuote: RideHailingProviderVehicleQuote;
+  price: ListingPriceSnapshot;
+} | null> {
+  const provider = await providerRepo.findById(
+    input.context.sku.facts.rideHailingProviderInstanceId as RideHailingProviderInstanceId,
+  );
+  if (!provider || provider.status !== "ACTIVE") return null;
+
+  const port = createRideHailingProviderPort({ providerInstance: provider });
+  const providerQuote = await port.estimate({
+    params: {
+      car_type: input.context.sku.facts.providerVehicleTypeCode,
+      flat: input.route.origin.latitude,
+      flng: input.route.origin.longitude,
+      tlat: input.route.destination.latitude,
+      tlng: input.route.destination.longitude,
+      departure_at: input.departureAt,
+    },
+  });
+  const pricingSnapshot = pricingApplication.resolve({
+    offer: input.offer,
+    items: [
+      {
+        itemId: "listing-preview",
+        spu: input.context.spu,
+        sku: input.context.sku,
+        quantity: 1,
+      },
+    ],
+    orderContext: {
+      quoteTotalFen: providerQuote.estimateAmountFen,
+    },
+  });
+  return {
+    providerName: provider.displayName,
+    providerQuote,
+    price: pricingToListingPrice({
+      totalFen: pricingSnapshot.totalFen,
+      explanations: [
+        ...pricingSnapshot.itemBreakdowns.flatMap((breakdown) => breakdown.explanations),
+        ...pricingSnapshot.orderLevelExplanations,
+      ],
+    }),
+  };
+}
+
+async function listRideItems(input: {
+  offer: Offer;
+  listingSessionId: OfferListingSessionId;
+  listingContext: RideHailingQuoteListingContextSnapshot;
+}): Promise<{ items: OfferListedItem[]; quotes: NewCommerceQuote[]; expiresAt: Date }> {
+  const expiresAt = new Date(Date.now() + RIDE_QUOTE_TTL_MS);
+  const contexts = (await listActiveSkuContexts(input.offer)).flatMap(
+    (context): RideSkuContext[] =>
+      isRideHailingSkuFacts(context.sku.facts)
+        ? [
+            {
+              ...context,
+              sku: {
+                ...context.sku,
+                facts: context.sku.facts,
+              },
+            },
+          ]
+        : [],
+  );
+  const rows = (
+    await Promise.all(
+      contexts.map(async (context) => {
+        let quoted: Awaited<ReturnType<typeof quoteRideSku>>;
+        try {
+          quoted = await quoteRideSku({
+            offer: input.offer,
+            context,
+            route: input.listingContext.route,
+            departureAt: input.listingContext.departureAt,
+          });
+        } catch {
+          quoted = null;
+        }
+        if (!quoted) return null;
+        const quoteId = randomUUID() as OfferQuoteId;
+        const displayName = `${quoted.providerName}${quoted.providerQuote.providerVehicleTypeName}`;
+        const fulfillmentQuoteSnapshot: OfferQuoteFulfillmentSnapshot = {
+          productType: "RIDE_HAILING",
+          providerInstanceId: context.sku.facts.rideHailingProviderInstanceId,
+          providerName: quoted.providerName,
+          providerVehicleTypeCode: context.sku.facts.providerVehicleTypeCode,
+          providerVehicleTypeName: quoted.providerQuote.providerVehicleTypeName,
+          providerQuoteId: quoted.providerQuote.providerQuoteId,
+          providerQuoteExpiresAt: quoted.providerQuote.providerQuoteExpiresAt,
+          providerSnapshot: quoted.providerQuote.providerSnapshot,
+          estimateAmountFen: quoted.providerQuote.estimateAmountFen,
+          distanceMeters: quoted.providerQuote.distanceMeters,
+          durationSeconds: quoted.providerQuote.durationSeconds,
+          displayName,
+        };
+        return {
+          item: {
+            kind: "CHOICE_CANDIDATE",
+            productType: "RIDE_HAILING",
+            skuId: context.sku.id,
+            spuId: context.spu.id,
+            quoteId,
+            displayName,
+            providerName: quoted.providerName,
+            providerVehicleTypeCode: context.sku.facts.providerVehicleTypeCode,
+            providerVehicleTypeName: quoted.providerQuote.providerVehicleTypeName,
+            presentation: context.sku.presentation,
+            estimateSnapshot: quoted.providerQuote,
+            price: quoted.price,
+          } satisfies OfferListedItem,
+          quote: {
+            id: quoteId,
+            listingSessionId: input.listingSessionId,
+            offerId: input.offer.id as OfferId,
+            productType: "RIDE_HAILING",
+            itemKind: "CHOICE_CANDIDATE",
+            spuId: context.spu.id,
+            skuId: context.sku.id,
+            quantity: 1,
+            listingContextSnapshot: input.listingContext,
+            fulfillmentQuoteSnapshot,
+            pricingSnapshot: quoted.price,
+            expiresAt,
+          } satisfies NewCommerceQuote,
+        };
+      }),
+    )
+  ).filter((row): row is NonNullable<typeof row> => row !== null);
+
+  return {
+    expiresAt,
+    items: rows.map((row) => row.item),
+    quotes: rows.map((row) => row.quote),
+  };
+}
+
+export async function listOfferListing(input: {
+  offerId: number;
+  viewerUserId: string;
+  listingInput: OfferListingInput;
+}): Promise<OfferListingResult> {
+  const offer = await resolveOffer(input.offerId);
+  if (offer.productType !== input.listingInput.productType) {
+    return throwHttpProblem({
+      status: 409,
+      detail: "Offer product type does not match listing input",
+    });
+  }
+
+  const listingSessionId = randomUUID() as OfferListingSessionId;
+  const participants = buildParticipants({
+    participants: input.listingInput.participants,
+    createdBy: input.viewerUserId,
+  });
+
+  if (input.listingInput.productType === "RENTAL") {
+    assertRentalListingInput(input.listingInput);
+    const listingContext: OfferQuoteListingContextSnapshot = {
+      productType: "RENTAL",
+      participants,
+      serviceStartAt: input.listingInput.serviceStartAt,
+      serviceEndAt: input.listingInput.serviceEndAt,
+      contactPhone: input.listingInput.contactPhone.trim(),
+      registrants: buildRentalRegistrants({
+        contactPhone: input.listingInput.contactPhone.trim(),
+        registrants: input.listingInput.registrants,
+      }),
+    };
+    const listed = await listRentalItems({
+      offer,
+      listingSessionId,
+      listingContext,
+    });
+    const quotes = await quoteRepo.createMany(listed.quotes);
+    const quoteIds = new Set(quotes.map((quote) => quote.id));
+    return {
+      offerId: offer.id,
+      productType: offer.productType,
+      listingSessionId,
+      expiresAt: null,
+      items: listed.items.filter((item) => quoteIds.has(item.quoteId as OfferQuoteId)),
+    };
+  }
+
+  assertRideListingInput(input.listingInput);
+  const listingContext: OfferQuoteListingContextSnapshot = {
+    productType: "RIDE_HAILING",
+    participants,
+    route: input.listingInput.route,
+    departureAt: input.listingInput.departureAt ?? null,
+    riders: buildRiderSnapshots(input.listingInput.riders),
+    contactPhone: input.listingInput.contactPhone.trim(),
+  };
+  const listed = await listRideItems({
+    offer,
+    listingSessionId,
+    listingContext,
+  });
+  const quotes = await quoteRepo.createMany(listed.quotes);
+  const quoteIds = new Set(quotes.map((quote) => quote.id));
+  return {
+    offerId: offer.id,
+    productType: offer.productType,
+    listingSessionId,
+    expiresAt: listed.expiresAt.toISOString(),
+    items: listed.items.filter((item) => quoteIds.has(item.quoteId as OfferQuoteId)),
+  };
+}
+
+export type PersistedOfferQuote = CommerceQuote;
diff --git a/apps/backend/src/domains/trade/use-cases/offer-quote.ts b/apps/backend/src/domains/trade/use-cases/offer-quote.ts
new file mode 100644
index 000000000..5e7dfec62
--- /dev/null
+++ b/apps/backend/src/domains/trade/use-cases/offer-quote.ts
@@ -0,0 +1,239 @@
+import type { CommerceQuote, OfferQuoteId } from "../../../entities/commerce-quote";
+import type { Offer, OfferId } from "../../../entities/offer";
+import type { ProductSku } from "../../../entities/product-sku";
+import type { ProductSpu } from "../../../entities/product-spu";
+import { throwHttpProblem } from "../../../lib/problem-details";
+import { CommerceQuoteRepository } from "../../../repositories/CommerceQuoteRepository";
+import { OfferRepository } from "../../../repositories/OfferRepository";
+import { ProductSkuRepository } from "../../../repositories/ProductSkuRepository";
+import { ProductSpuRepository } from "../../../repositories/ProductSpuRepository";
+
+const quoteRepo = new CommerceQuoteRepository();
+const offerRepo = new OfferRepository();
+const productSkuRepo = new ProductSkuRepository();
+const productSpuRepo = new ProductSpuRepository();
+
+export type FixedQuoteItemInput = {
+  kind: "FIXED";
+  quoteId: string;
+  quantity?: number | null;
+};
+
+export type ChoiceSetQuoteItemInput = {
+  kind: "CHOICE_SET";
+  candidateQuoteIds: string[];
+  quantity?: 1 | null;
+};
+
+export type QuoteBoundOrderItemInput = FixedQuoteItemInput | ChoiceSetQuoteItemInput;
+
+export type ValidatedOfferQuote = {
+  quote: CommerceQuote;
+  offer: Offer;
+  spu: ProductSpu;
+  sku: ProductSku;
+};
+
+export type ValidatedQuoteItem =
+  | {
+      kind: "FIXED";
+      quote: ValidatedOfferQuote;
+    }
+  | {
+      kind: "CHOICE_SET";
+      listingSessionId: string;
+      candidateQuotes: ValidatedOfferQuote[];
+    };
+
+const isActiveNow = (offer: Offer, now = new Date()): boolean => {
+  if (offer.status !== "ACTIVE") return false;
+  if (offer.startsAt && offer.startsAt > now) return false;
+  if (offer.endsAt && offer.endsAt <= now) return false;
+  return true;
+};
+
+const quoteExpiredProblem = (): never =>
+  throwHttpProblem({
+    status: 409,
+    detail: "报价已过期，请刷新后重新下单。",
+    code: "ORDERING_QUOTE_EXPIRED",
+    type: "https://partner-up.app/problems/commerce.quote-expired",
+  });
+
+async function validateQuote(quote: CommerceQuote, now: Date): Promise<ValidatedOfferQuote> {
+  if (quote.expiresAt && quote.expiresAt <= now) {
+    return quoteExpiredProblem();
+  }
+  const offer = await offerRepo.findById(quote.offerId);
+  if (!offer || !isActiveNow(offer, now)) {
+    return throwHttpProblem({
+      status: 409,
+      detail: "报价所属 Offer 当前不可下单。",
+      code: "ORDERING_QUOTE_OFFER_INVALID",
+    });
+  }
+  const sku = await productSkuRepo.findById(quote.skuId);
+  if (!sku || sku.status !== "ACTIVE") {
+    return throwHttpProblem({
+      status: 409,
+      detail: "报价所属 SKU 当前不可下单。",
+      code: "ORDERING_QUOTE_SKU_INVALID",
+    });
+  }
+  const spu = await productSpuRepo.findById(sku.spuId);
+  if (!spu || spu.status !== "ACTIVE") {
+    return throwHttpProblem({
+      status: 409,
+      detail: "报价所属 SPU 当前不可下单。",
+      code: "ORDERING_QUOTE_SKU_INVALID",
+    });
+  }
+  if (quote.productType !== offer.productType || spu.productType !== offer.productType) {
+    return throwHttpProblem({
+      status: 409,
+      detail: "报价商品类型与 Offer 不一致。",
+      code: "ORDERING_QUOTE_PRODUCT_TYPE_MISMATCH",
+    });
+  }
+  if (!offer.spuIds.includes(spu.id)) {
+    return throwHttpProblem({
+      status: 409,
+      detail: "报价商品不属于当前 Offer。",
+      code: "ORDERING_QUOTE_MEMBERSHIP_INVALID",
+    });
+  }
+  return {
+    quote,
+    offer,
+    spu,
+    sku,
+  };
+}
+
+async function readValidatedQuotes(ids: string[]): Promise<ValidatedOfferQuote[]> {
+  const uniqueIds = [...new Set(ids)].map((id) => id as OfferQuoteId);
+  if (uniqueIds.length === 0) {
+    return throwHttpProblem({
+      status: 409,
+      detail: "请选择至少一个报价。",
+      code: "ORDERING_QUOTE_REQUIRED",
+    });
+  }
+  const quotes = await quoteRepo.listByIds(uniqueIds);
+  if (quotes.length !== uniqueIds.length) {
+    return throwHttpProblem({
+      status: 404,
+      detail: "报价不存在或已不可用。",
+      code: "ORDERING_QUOTE_NOT_FOUND",
+    });
+  }
+  const byId = new Map(quotes.map((quote) => [quote.id, quote]));
+  const now = new Date();
+  return Promise.all(
+    uniqueIds.map((id) => {
+      const quote = byId.get(id);
+      if (!quote) {
+        return throwHttpProblem({
+          status: 404,
+          detail: "报价不存在或已不可用。",
+          code: "ORDERING_QUOTE_NOT_FOUND",
+        });
+      }
+      return validateQuote(quote, now);
+    }),
+  );
+}
+
+const assertSameListingContext = (quotes: ValidatedOfferQuote[]): string => {
+  const listingSessionId = quotes[0]?.quote.listingSessionId;
+  const offerId = quotes[0]?.quote.offerId;
+  const productType = quotes[0]?.quote.productType;
+  if (!listingSessionId) {
+    return throwHttpProblem({
+      status: 409,
+      detail: "报价组合无效。",
+      code: "ORDERING_QUOTE_GROUP_INVALID",
+    });
+  }
+  if (quotes.some((quote) => quote.quote.listingSessionId !== listingSessionId)) {
+    return throwHttpProblem({
+      status: 409,
+      detail: "请选择同一次报价中的车型。",
+      code: "ORDERING_QUOTE_GROUP_INVALID",
+    });
+  }
+  if (
+    !offerId ||
+    !productType ||
+    quotes.some(
+      (quote) =>
+        quote.quote.offerId !== offerId ||
+        quote.quote.productType !== productType ||
+        quote.offer.id !== offerId ||
+        quote.offer.productType !== productType,
+    )
+  ) {
+    return throwHttpProblem({
+      status: 409,
+      detail: "请选择同一 Offer 的报价。",
+      code: "ORDERING_QUOTE_GROUP_INVALID",
+    });
+  }
+  return listingSessionId;
+};
+
+export async function resolveQuoteBoundOrderItems(
+  items: QuoteBoundOrderItemInput[],
+): Promise<ValidatedQuoteItem[]> {
+  if (items.length === 0) {
+    return throwHttpProblem({
+      status: 400,
+      detail: "CreateOrder requires at least one quote-bound item",
+    });
+  }
+  return Promise.all(
+    items.map(async (item) => {
+      if (item.kind === "FIXED") {
+        if ((item.quantity ?? 1) !== 1) {
+          return throwHttpProblem({
+            status: 409,
+            detail: "Commerce MVP supports quantity 1 only",
+          });
+        }
+        const [quote] = await readValidatedQuotes([item.quoteId]);
+        if (!quote || quote.quote.itemKind !== "FIXED") {
+          return throwHttpProblem({
+            status: 409,
+            detail: "报价不是固定商品报价。",
+            code: "ORDERING_QUOTE_ITEM_KIND_MISMATCH",
+          });
+        }
+        return {
+          kind: "FIXED",
+          quote,
+        };
+      }
+
+      if ((item.quantity ?? 1) !== 1) {
+        return throwHttpProblem({
+          status: 409,
+          detail: "Choice-set quantity must be 1",
+        });
+      }
+      const candidateQuotes = await readValidatedQuotes(item.candidateQuoteIds);
+      if (candidateQuotes.some((quote) => quote.quote.itemKind !== "CHOICE_CANDIDATE")) {
+        return throwHttpProblem({
+          status: 409,
+          detail: "报价不是候选商品报价。",
+          code: "ORDERING_QUOTE_ITEM_KIND_MISMATCH",
+        });
+      }
+      const listingSessionId = assertSameListingContext(candidateQuotes);
+      return {
+        kind: "CHOICE_SET",
+        listingSessionId,
+        candidateQuotes,
+      };
+    }),
+  );
+}
diff --git a/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts b/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts
index 75c0f5fc8..11ca3f799 100644
--- a/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts
+++ b/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts
@@ -1,15 +1,9 @@
-import type { Offer } from "../../../entities/offer";
-import type { ProductSku } from "../../../entities/product-sku";
-import type { ProductSpu } from "../../../entities/product-spu";
 import type { RideHailingProviderInstanceId } from "../../../entities/ride-hailing-provider";
 import type { TradeOrder, TradeOrderId } from "../../../entities/trade-order";
-import { ProductSkuRepository } from "../../../repositories/ProductSkuRepository";
-import { ProductSpuRepository } from "../../../repositories/ProductSpuRepository";
 import { RideHailingOrderRepository } from "../../../repositories/RideHailingOrderRepository";
 import { RideHailingProviderInstanceRepository } from "../../../repositories/RideHailingProviderInstanceRepository";
 import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository";
 import { throwHttpProblem } from "../../../lib/problem-details";
-import type { PriceExplanation, RideHailingSkuFacts } from "../../merchandising";
 import { createRideHailingProviderPort } from "../../ride-hailing";
 import type {
   RideHailingDriverSnapshot,
@@ -22,59 +16,15 @@ import {
   getOrderItemSkuName,
   getRideHailingChoiceSetItem,
   getRideHailingProviderBinding,
-  PricingApplication,
 } from "../services";
 
-const productSpuRepo = new ProductSpuRepository();
-const productSkuRepo = new ProductSkuRepository();
 const providerRepo = new RideHailingProviderInstanceRepository();
 const rideOrderRepo = new RideHailingOrderRepository();
 const tradeOrderRepo = new TradeOrderRepository();
-const pricingApplication = new PricingApplication();
-
-type RideSku = ProductSku & { facts: RideHailingSkuFacts };
-
-export type RideQuoteOption = {
-  skuId: number;
-  spuId: number;
-  name: string;
-  providerName: string;
-  carTypeName: string;
-  displayName: string;
-  providerVehicleTypeCode: string;
-  providerInstanceId: string;
-  selected: boolean;
-  selectable: boolean;
-  disabledReason: string | null;
-  estimateAmountFen: number | null;
-  quoteAmountFen: number | null;
-  priceExplanations: PriceExplanation[];
-};
 
 const isRecord = (value: unknown): value is Record<string, unknown> =>
   typeof value === "object" && value !== null && !Array.isArray(value);
 
-const isRideHailingSkuFacts = (value: unknown): value is RideHailingSkuFacts =>
-  isRecord(value) &&
-  typeof value.rideHailingProviderInstanceId === "string" &&
-  typeof value.providerVehicleTypeCode === "string";
-
-async function listRideSkus(offer: Offer): Promise<Array<{ spu: ProductSpu; sku: RideSku }>> {
-  const result: Array<{ spu: ProductSpu; sku: RideSku }> = [];
-  for (const spuId of offer.spuIds) {
-    const spu = await productSpuRepo.findById(spuId);
-    if (!spu || spu.status !== "ACTIVE" || spu.productType !== "RIDE_HAILING") {
-      continue;
-    }
-    const skus = await productSkuRepo.listBySpuId(spu.id);
-    for (const sku of skus) {
-      if (sku.status !== "ACTIVE" || !isRideHailingSkuFacts(sku.facts)) continue;
-      result.push({ spu, sku: { ...sku, facts: sku.facts } });
-    }
-  }
-  return result;
-}
-
 const readNumber = (value: unknown, keys: string[]): number | null => {
   if (!isRecord(value)) return null;
   for (const key of keys) {
@@ -97,137 +47,6 @@ const readString = (value: unknown, keys: string[]): string | null => {
   return null;
 };
 
-async function quoteSku(input: {
-  sku: RideSku;
-  spu: ProductSpu;
-  providerNameFallback?: string;
-  route: RideHailingRouteSnapshot;
-  offer: Offer;
-}): Promise<RideQuoteOption> {
-  const provider = await providerRepo.findById(
-    input.sku.facts.rideHailingProviderInstanceId as RideHailingProviderInstanceId,
-  );
-  if (!provider || provider.status !== "ACTIVE") {
-    return {
-      skuId: input.sku.id,
-      spuId: input.spu.id,
-      name: input.sku.name,
-      providerName: input.providerNameFallback ?? "服务商",
-      carTypeName: input.sku.name,
-      displayName: `${input.providerNameFallback ?? "服务商"}${input.sku.name}`,
-      providerVehicleTypeCode: input.sku.facts.providerVehicleTypeCode,
-      providerInstanceId: input.sku.facts.rideHailingProviderInstanceId,
-      selected: false,
-      selectable: false,
-      disabledReason: "Provider instance is not active",
-      estimateAmountFen: null,
-      quoteAmountFen: null,
-      priceExplanations: [],
-    };
-  }
-
-  const port = createRideHailingProviderPort({ providerInstance: provider });
-  let rawEstimate: unknown;
-  try {
-    rawEstimate = await port.estimate({
-      params: {
-        car_type: input.sku.facts.providerVehicleTypeCode,
-        flat: input.route.origin.latitude,
-        flng: input.route.origin.longitude,
-        tlat: input.route.destination.latitude,
-        tlng: input.route.destination.longitude,
-      },
-    });
-  } catch (error) {
-    return {
-      skuId: input.sku.id,
-      spuId: input.spu.id,
-      name: input.sku.name,
-      providerName: provider.displayName,
-      carTypeName: input.sku.name,
-      displayName: `${provider.displayName}${input.sku.name}`,
-      providerVehicleTypeCode: input.sku.facts.providerVehicleTypeCode,
-      providerInstanceId: provider.id,
-      selected: false,
-      selectable: false,
-      disabledReason: error instanceof Error ? error.message : "Provider quote failed",
-      estimateAmountFen: null,
-      quoteAmountFen: null,
-      priceExplanations: [],
-    };
-  }
-  const estimateAmountFen =
-    readNumber(rawEstimate, ["estimateAmountFen", "estimatePriceFen", "estimate_price", "price"]) ??
-    0;
-  const carTypeName = readString(rawEstimate, ["carTypeName", "car_type_name"]) ?? input.sku.name;
-  const pricingSnapshot = pricingApplication.resolve({
-    offer: input.offer,
-    items: [
-      {
-        itemId: "preview",
-        spu: input.spu,
-        sku: input.sku,
-        quantity: 1,
-      },
-    ],
-    orderContext: {
-      quoteTotalFen: estimateAmountFen,
-    },
-  });
-
-  return {
-    skuId: input.sku.id,
-    spuId: input.spu.id,
-    name: input.sku.name,
-    providerName: provider.displayName,
-    carTypeName,
-    displayName: `${provider.displayName}${carTypeName}`,
-    providerVehicleTypeCode: input.sku.facts.providerVehicleTypeCode,
-    providerInstanceId: provider.id,
-    selected: false,
-    selectable: true,
-    disabledReason: null,
-    estimateAmountFen,
-    quoteAmountFen: pricingSnapshot.totalFen,
-    priceExplanations: [
-      ...pricingSnapshot.itemBreakdowns.flatMap((breakdown) => breakdown.explanations),
-      ...pricingSnapshot.orderLevelExplanations,
-    ],
-  };
-}
-
-export async function evaluateRideOptions(input: {
-  offer: Offer;
-  route: RideHailingRouteSnapshot;
-  selectedSkuId?: number | null;
-  candidateSkuIds?: number[] | null;
-}): Promise<RideQuoteOption[]> {
-  const candidateSkuIds = new Set(input.candidateSkuIds ?? []);
-  const skus = (await listRideSkus(input.offer)).filter(
-    ({ sku }) => candidateSkuIds.size === 0 || candidateSkuIds.has(sku.id),
-  );
-  const options = await Promise.all(
-    skus.map(({ spu, sku }) =>
-      quoteSku({
-        offer: input.offer,
-        route: input.route,
-        sku,
-        spu,
-      }),
-    ),
-  );
-  const selectedSkuId =
-    input.selectedSkuId ??
-    options
-      .filter((option) => option.selectable && option.quoteAmountFen !== null)
-      .sort((left, right) => (left.quoteAmountFen ?? 0) - (right.quoteAmountFen ?? 0))[0]?.skuId ??
-    null;
-  return options.map((option) => ({
-    ...option,
-    selected: option.skuId === selectedSkuId,
-  }));
-}
-
 type ProviderDetailProjection = {
   phase: string;
   statusLabel: string;
diff --git a/apps/backend/src/entities/commerce-quote.ts b/apps/backend/src/entities/commerce-quote.ts
new file mode 100644
index 000000000..185f0bf00
--- /dev/null
+++ b/apps/backend/src/entities/commerce-quote.ts
@@ -0,0 +1,119 @@
+import { bigint, index, integer, jsonb, pgTable, text, timestamp, uuid } from "drizzle-orm/pg-core";
+import { sql } from "drizzle-orm";
+import type { OfferId } from "./offer";
+import { offers } from "./offer";
+import type { ProductSkuId } from "./product-sku";
+import { productSkus } from "./product-sku";
+import type { ProductSpuId } from "./product-spu";
+import { productSpus } from "./product-spu";
+import type { ProductType } from "../domains/merchandising/model";
+import type { PriceExplanation } from "../domains/merchandising";
+import type {
+  OrderParticipantSnapshot,
+  RentalRegistrant,
+  RideHailingRiderSnapshot,
+  RideHailingRouteSnapshot,
+} from "../domains/trade/model";
+
+export type OfferQuoteId = string & { readonly __brand: "OfferQuoteId" };
+export type OfferListingSessionId = string & {
+  readonly __brand: "OfferListingSessionId";
+};
+
+export type OfferQuoteItemKind = "FIXED" | "CHOICE_CANDIDATE";
+
+export type OfferQuotePriceSnapshot = {
+  currency: "CNY";
+  totalFen: number | null;
+  range?: {
+    minFen: number | null;
+    maxFen: number | null;
+  } | null;
+  explanations: PriceExplanation[];
+};
+
+export type RentalQuoteListingContextSnapshot = {
+  productType: "RENTAL";
+  participants: OrderParticipantSnapshot[];
+  serviceStartAt: string;
+  serviceEndAt: string;
+  contactPhone: string;
+  registrants: RentalRegistrant[];
+};
+
+export type RideHailingQuoteListingContextSnapshot = {
+  productType: "RIDE_HAILING";
+  participants: OrderParticipantSnapshot[];
+  route: RideHailingRouteSnapshot;
+  departureAt: string | null;
+  riders: RideHailingRiderSnapshot[];
+  contactPhone: string;
+};
+
+export type OfferQuoteListingContextSnapshot =
+  | RentalQuoteListingContextSnapshot
+  | RideHailingQuoteListingContextSnapshot;
+
+export type RentalFulfillmentQuoteSnapshot = {
+  productType: "RENTAL";
+};
+
+export type RideHailingFulfillmentQuoteSnapshot = {
+  productType: "RIDE_HAILING";
+  providerInstanceId: string;
+  providerName: string;
+  providerVehicleTypeCode: string;
+  providerVehicleTypeName: string;
+  providerQuoteId: string | null;
+  providerQuoteExpiresAt: string | null;
+  providerSnapshot: unknown;
+  estimateAmountFen: number;
+  distanceMeters: number | null;
+  durationSeconds: number | null;
+  displayName: string;
+};
+
+export type OfferQuoteFulfillmentSnapshot =
+  | RentalFulfillmentQuoteSnapshot
+  | RideHailingFulfillmentQuoteSnapshot;
+
+export const commerceQuotes = pgTable(
+  "commerce_quotes",
+  {
+    id: uuid("id").$type<OfferQuoteId>().primaryKey().default(sql`gen_random_uuid()`),
+    listingSessionId: uuid("listing_session_id").$type<OfferListingSessionId>().notNull(),
+    offerId: bigint("offer_id", { mode: "number" })
+      .$type<OfferId>()
+      .notNull()
+      .references(() => offers.id, { onDelete: "restrict" }),
+    productType: text("product_type").$type<ProductType>().notNull(),
+    itemKind: text("item_kind").$type<OfferQuoteItemKind>().notNull(),
+    spuId: bigint("spu_id", { mode: "number" })
+      .$type<ProductSpuId>()
+      .notNull()
+      .references(() => productSpus.id, { onDelete: "restrict" }),
+    skuId: bigint("sku_id", { mode: "number" })
+      .$type<ProductSkuId>()
+      .notNull()
+      .references(() => productSkus.id, { onDelete: "restrict" }),
+    quantity: integer("quantity").notNull().default(1),
+    listingContextSnapshot: jsonb("listing_context_snapshot")
+      .$type<OfferQuoteListingContextSnapshot>()
+      .notNull(),
+    fulfillmentQuoteSnapshot: jsonb("fulfillment_quote_snapshot")
+      .$type<OfferQuoteFulfillmentSnapshot>()
+      .notNull(),
+    pricingSnapshot: jsonb("pricing_snapshot").$type<OfferQuotePriceSnapshot>().notNull(),
+    expiresAt: timestamp("expires_at", { withTimezone: true }),
+    createdAt: timestamp("created_at", { withTimezone: true }).notNull().defaultNow(),
+    updatedAt: timestamp("updated_at", { withTimezone: true }).notNull().defaultNow(),
+  },
+  (table) => ({
+    listingSessionIdx: index("commerce_quotes_listing_session_idx").on(table.listingSessionId),
+    offerSkuIdx: index("commerce_quotes_offer_sku_idx").on(table.offerId, table.skuId),
+    expiresAtIdx: index("commerce_quotes_expires_at_idx").on(table.expiresAt),
+  }),
+);
+
+export type CommerceQuote = typeof commerceQuotes.$inferSelect;
+export type NewCommerceQuote = typeof commerceQuotes.$inferInsert;
diff --git a/apps/backend/src/repositories/CommerceQuoteRepository.ts b/apps/backend/src/repositories/CommerceQuoteRepository.ts
new file mode 100644
index 000000000..f07388935
--- /dev/null
+++ b/apps/backend/src/repositories/CommerceQuoteRepository.ts
@@ -0,0 +1,36 @@
+import { eq, inArray } from "drizzle-orm";
+import {
+  commerceQuotes,
+  type CommerceQuote,
+  type NewCommerceQuote,
+  type OfferQuoteId,
+} from "../entities/commerce-quote";
+import { db } from "../lib/db";
+import type { RepositoryExecutor } from "./_executor";
+
+export class CommerceQuoteRepository {
+  constructor(private readonly executor: RepositoryExecutor = db) {}
+
+  async create(data: NewCommerceQuote): Promise<CommerceQuote> {
+    const result = await this.executor.insert(commerceQuotes).values(data).returning();
+    return result[0]!;
+  }
+
+  async createMany(data: NewCommerceQuote[]): Promise<CommerceQuote[]> {
+    if (data.length === 0) return [];
+    return this.executor.insert(commerceQuotes).values(data).returning();
+  }
+
+  async findById(id: OfferQuoteId): Promise<CommerceQuote | null> {
+    const result = await this.executor
+      .select()
+      .from(commerceQuotes)
+      .where(eq(commerceQuotes.id, id));
+    return result[0] ?? null;
+  }
+
+  async listByIds(ids: OfferQuoteId[]): Promise<CommerceQuote[]> {
+    if (ids.length === 0) return [];
+    return this.executor.select().from(commerceQuotes).where(inArray(commerceQuotes.id, ids));
+  }
+}
diff --git a/apps/backend/tests/commerce/offer-quote-resolution.scenario.test.ts b/apps/backend/tests/commerce/offer-quote-resolution.scenario.test.ts
new file mode 100644
index 000000000..cace5c5c5
--- /dev/null
+++ b/apps/backend/tests/commerce/offer-quote-resolution.scenario.test.ts
@@ -0,0 +1,264 @@
+import assert from "node:assert/strict";
+import { randomUUID } from "node:crypto";
+import {
+  createEmptyProductPresentation,
+  createOffer,
+  createProductSku,
+  createProductSpu,
+  type PricingModel,
+} from "../../src/domains/merchandising";
+import { resolveQuoteBoundOrderItems } from "../../src/domains/trade/use-cases/offer-quote";
+import {
+  type CommerceQuote,
+  type OfferListingSessionId,
+  type OfferQuoteId,
+} from "../../src/entities/commerce-quote";
+import type { Offer } from "../../src/entities/offer";
+import type { ProductSku } from "../../src/entities/product-sku";
+import type { ProductSpu } from "../../src/entities/product-spu";
+import { ProblemDetailsError } from "../../src/lib/problem-details";
+import { CommerceQuoteRepository } from "../../src/repositories/CommerceQuoteRepository";
+import { OfferRepository } from "../../src/repositories/OfferRepository";
+import { ProductSkuRepository } from "../../src/repositories/ProductSkuRepository";
+import { scenario } from "../_infra/scenario/scenario";
+
+const quoteRepo = new CommerceQuoteRepository();
+const offerRepo = new OfferRepository();
+const productSkuRepo = new ProductSkuRepository();
+
+const providerEstimatePricingModel: PricingModel = {
+  type: "DYNAMIC_QUOTE",
+  calculatorSpec: {
+    components: [
+      {
+        amount: {
+          path: "provider.estimateAmountFen",
+          type: "INPUT",
+        },
+        id: "caocao-provider-estimate",
+        label: "曹操预估价",
+      },
+    ],
+    currency: "CNY",
+    version: 1,
+  },
+};
+
+async function givenRideQuoteCatalog(input: {
+  skuName?: string;
+  providerVehicleTypeCode?: string;
+}): Promise<{
+  offer: Offer;
+  sku: ProductSku;
+  spu: ProductSpu;
+}> {
+  const spu = await createProductSpu({
+    name: `Quote resolver ride SPU ${randomUUID()}`,
+    productType: "RIDE_HAILING",
+    presentation: createEmptyProductPresentation(),
+    salesPolicy: {
+      quantityPolicy: {
+        quantity: 1,
+        type: "FIXED",
+      },
+      skuSelectionPolicy: {
+        max: null,
+        min: 1,
+        resolvesTo: 1,
+        type: "CHOICE_SET",
+      },
+    },
+    servicePolicy: {
+      type: "RIDE_HAILING",
+    },
+    status: "ACTIVE",
+  });
+  const sku = await createProductSku({
+    facts: {
+      providerVehicleTypeCode: input.providerVehicleTypeCode ?? "EXPRESS",
+      rideHailingProviderInstanceId: randomUUID(),
+    },
+    name: input.skuName ?? "Quote resolver ride SKU",
+    pricingModel: providerEstimatePricingModel,
+    sortOrder: 10,
+    spuId: spu.id,
+    status: "ACTIVE",
+  });
+  const offer = await createOffer({
+    pricingRules: [],
+    productType: "RIDE_HAILING",
+    spuIds: [spu.id],
+    status: "ACTIVE",
+    termsVersion: 1,
+  });
+  return { offer, sku, spu };
+}
+
+async function createRideCandidateQuote(input: {
+  offer: Offer;
+  sku: ProductSku;
+  spu: ProductSpu;
+  listingSessionId?: OfferListingSessionId;
+  quoteId?: OfferQuoteId;
+}): Promise<CommerceQuote> {
+  const quoteId = input.quoteId ?? (randomUUID() as OfferQuoteId);
+  const listingSessionId = input.listingSessionId ?? (randomUUID() as OfferListingSessionId);
+  const participantUserId = randomUUID();
+  return quoteRepo.create({
+    expiresAt: new Date(Date.now() + 5 * 60 * 1000),
+    fulfillmentQuoteSnapshot: {
+      displayName: `系统曹操${input.sku.name}`,
+      distanceMeters: 8200,
+      durationSeconds: 1500,
+      estimateAmountFen: 3600,
+      productType: "RIDE_HAILING",
+      providerInstanceId: randomUUID(),
+      providerName: "系统曹操",
+      providerQuoteExpiresAt: null,
+      providerQuoteId: `fake_quote_${input.sku.id}`,
+      providerSnapshot: {},
+      providerVehicleTypeCode: "EXPRESS",
+      providerVehicleTypeName: input.sku.name,
+    },
+    id: quoteId,
+    itemKind: "CHOICE_CANDIDATE",
+    listingContextSnapshot: {
+      contactPhone: "13800138000",
+      departureAt: null,
+      participants: [
+        {
+          displayName: "Quote User",
+          phoneMasked: null,
+          userId: participantUserId,
+        },
+      ],
+      productType: "RIDE_HAILING",
+      riders: [
+        {
+          displayName: "Quote User",
+          phoneMasked: null,
+          userId: participantUserId,
+        },
+      ],
+      route: {
+        destination: {
+          address: "杭州市西湖区灵隐路1号",
+          latitude: 30.24,
+          longitude: 120.102,
+          name: "灵隐寺",
+        },
+        drivingPlan: null,
+        origin: {
+          address: "杭州市上城区全福桥路2号",
+          latitude: 30.2912,
+          longitude: 120.212,
+          name: "杭州东站",
+        },
+        waypoints: [],
+      },
+    },
+    listingSessionId,
+    offerId: input.offer.id,
+    pricingSnapshot: {
+      currency: "CNY",
+      explanations: [],
+      totalFen: 3600,
+    },
+    productType: "RIDE_HAILING",
+    quantity: 1,
+    skuId: input.sku.id,
+    spuId: input.spu.id,
+  });
+}
+
+async function assertProblemCode(run: () => Promise<unknown>, expectedCode: string): Promise<void> {
+  let thrown: unknown = null;
+  try {
+    await run();
+  } catch (error) {
+    thrown = error;
+  }
+  assert.ok(thrown instanceof ProblemDetailsError);
+  assert.equal(thrown.code, expectedCode);
+}
+
+scenario("commerce_quote_validity_rejects_inactive_offer_and_sku", async () => {
+  const inactiveOfferCatalog = await givenRideQuoteCatalog({
+    skuName: "快车",
+    providerVehicleTypeCode: "EXPRESS",
+  });
+  const inactiveOfferQuote = await createRideCandidateQuote(inactiveOfferCatalog);
+  await offerRepo.updateById(inactiveOfferCatalog.offer.id, {
+    status: "PAUSED",
+  });
+
+  await assertProblemCode(
+    () =>
+      resolveQuoteBoundOrderItems([
+        {
+          candidateQuoteIds: [inactiveOfferQuote.id],
+          kind: "CHOICE_SET",
+        },
+      ]),
+    "ORDERING_QUOTE_OFFER_INVALID",
+  );
+
+  const inactiveSkuCatalog = await givenRideQuoteCatalog({
+    skuName: "专车",
+    providerVehicleTypeCode: "PREMIER",
+  });
+  const inactiveSkuQuote = await createRideCandidateQuote(inactiveSkuCatalog);
+  await productSkuRepo.updateById(inactiveSkuCatalog.sku.id, {
+    status: "ARCHIVED",
+  });
+
+  await assertProblemCode(
+    () =>
+      resolveQuoteBoundOrderItems([
+        {
+          candidateQuoteIds: [inactiveSkuQuote.id],
+          kind: "CHOICE_SET",
+        },
+      ]),
+    "ORDERING_QUOTE_SKU_INVALID",
+  );
+});
+
+scenario("commerce_choice_set_quotes_must_share_one_listing_session", async () => {
+  const expressCatalog = await givenRideQuoteCatalog({
+    skuName: "快车",
+    providerVehicleTypeCode: "EXPRESS",
+  });
+  const premierSku = await createProductSku({
+    facts: {
+      providerVehicleTypeCode: "PREMIER",
+      rideHailingProviderInstanceId: randomUUID(),
+    },
+    name: "专车",
+    pricingModel: providerEstimatePricingModel,
+    sortOrder: 20,
+    spuId: expressCatalog.spu.id,
+    status: "ACTIVE",
+  });
+  const expressQuote = await createRideCandidateQuote({
+    ...expressCatalog,
+    listingSessionId: randomUUID() as OfferListingSessionId,
+  });
+  const premierQuote = await createRideCandidateQuote({
+    offer: expressCatalog.offer,
+    sku: premierSku,
+    spu: expressCatalog.spu,
+    listingSessionId: randomUUID() as OfferListingSessionId,
+  });
+
+  await assertProblemCode(
+    () =>
+      resolveQuoteBoundOrderItems([
+        {
+          candidateQuoteIds: [expressQuote.id, premierQuote.id],
+          kind: "CHOICE_SET",
+        },
+      ]),
+    "ORDERING_QUOTE_GROUP_INVALID",
+  );
+});
diff --git a/apps/frontend/src/domains/commerce/model/ordering-content.ts b/apps/frontend/src/domains/commerce/model/ordering-content.ts
index 18ce54a11..70ea07690 100644
--- a/apps/frontend/src/domains/commerce/model/ordering-content.ts
+++ b/apps/frontend/src/domains/commerce/model/ordering-content.ts
@@ -9,9 +9,7 @@ export type OrderingContentInput = {
 };
 
 export type OrderingContentOutput = {
-  participants: CreateOrderInput["participants"];
   items: CreateOrderInput["items"];
-  productTypedExtraProperties: CreateOrderInput["productTypedExtraProperties"];
 };
 
 export type OrderingContentPriceExplanation = {
@@ -42,10 +40,8 @@ export type BoundOrderParticipant = {
   phoneMasked: string | null;
 };
 
-export const readBindingValue = (
-  bindings: Record<string, unknown>,
-  key: string,
-): unknown | null => bindings[key] ?? null;
+export const readBindingValue = (bindings: Record<string, unknown>, key: string): unknown | null =>
+  bindings[key] ?? null;
 
 export const isBindingLocked = (
   input: Pick<OrderingContentInput, "bindingLocks">,
@@ -66,10 +62,8 @@ export const readBoundOrderParticipants = (
     return [
       {
         userId: record.userId,
-        displayName:
-          typeof record.displayName === "string" ? record.displayName : "参与者",
-        phoneMasked:
-          typeof record.phoneMasked === "string" ? record.phoneMasked : null,
+        displayName: typeof record.displayName === "string" ? record.displayName : "参与者",
+        phoneMasked: typeof record.phoneMasked === "string" ? record.phoneMasked : null,
       },
     ];
   });
diff --git a/apps/frontend/src/domains/commerce/queries/useCommerce.ts b/apps/frontend/src/domains/commerce/queries/useCommerce.ts
index bfb1a5adf..67c6e52d1 100644
--- a/apps/frontend/src/domains/commerce/queries/useCommerce.ts
+++ b/apps/frontend/src/domains/commerce/queries/useCommerce.ts
@@ -15,20 +15,12 @@ export type OrderingEntryResponse = InferResponseType<
   PlacementApi[":instanceId"]["ordering-entry"]["$post"]
 >;
 
-export type OrderingEvaluationInput = Parameters<
-  CommerceApi["ordering"]["evaluate"]["$post"]
+export type OfferListingInput = Parameters<
+  CommerceApi["offers"][":offerId"]["listing"]["$post"]
 >[0]["json"];
 
-export type OrderingEvaluationResponse = InferResponseType<
-  CommerceApi["ordering"]["evaluate"]["$post"]
->;
-
-export type RideHailingQuoteOptionsInput = Parameters<
-  CommerceApi["ordering"]["ride-hailing"]["options"]["$post"]
->[0]["json"];
-
-export type RideHailingQuoteOptionsResponse = InferResponseType<
-  CommerceApi["ordering"]["ride-hailing"]["options"]["$post"]
+export type OfferListingResponse = InferResponseType<
+  CommerceApi["offers"][":offerId"]["listing"]["$post"]
 >;
 
 export type CreateOrderInput = Parameters<CommerceApi["orders"]["$post"]>[0]["json"];
@@ -117,48 +109,33 @@ export const resolvePlacementOrderingEntry = async (input: {
   return readJsonOrThrow<OrderingEntryResponse>(response, "Failed to resolve ordering entry");
 };
 
-export const useEvaluateOrdering = () =>
-  useMutation({
-    mutationFn: async (input: OrderingEvaluationInput) => {
-      const response = await client.api.commerce.ordering.evaluate.$post(
-        { json: input },
-        {
-          init: {
-            credentials: "include",
-          },
-        },
-      );
-      return readJsonOrThrow<OrderingEvaluationResponse>(
-        response,
-        "Failed to evaluate ordering",
-      );
-    },
-  });
-
-export const useRideHailingQuoteOptions = (
-  input: Ref<RideHailingQuoteOptionsInput | null>,
+export const useOfferListing = (
+  input: Ref<{
+    offerId: number;
+    listingInput: OfferListingInput;
+  } | null>,
 ) =>
-  useQuery<RideHailingQuoteOptionsResponse>({
+  useQuery<OfferListingResponse>({
     queryKey: computed(
-      () => ["commerce", "ordering", "ride-hailing", "options", input.value] as const,
+      () => ["commerce", "offers", input.value?.offerId, "listing", input.value] as const,
     ),
     queryFn: async () => {
       if (input.value === null) {
-        throw new Error("Missing RideHailing quote input");
+        throw new Error("Missing Offer Listing input");
       }
 
-      const response = await client.api.commerce.ordering["ride-hailing"].options.$post(
-        { json: input.value },
+      const response = await client.api.commerce.offers[":offerId"].listing.$post(
+        {
+          param: { offerId: input.value.offerId },
+          json: input.value.listingInput,
+        },
         {
           init: {
             credentials: "include",
           },
         },
       );
-      return readJsonOrThrow<RideHailingQuoteOptionsResponse>(
-        response,
-        "Failed to load ride hailing quote options",
-      );
+      return readJsonOrThrow<OfferListingResponse>(response, "Failed to load offer listing");
     },
     enabled: () => input.value !== null,
   });
diff --git a/apps/frontend/src/domains/commerce/ui/ordering/OrderingFloatingNoticeLayer.vue b/apps/frontend/src/domains/commerce/ui/ordering/OrderingFloatingNoticeLayer.vue
deleted file mode 100644
index 619687fc0..000000000
--- a/apps/frontend/src/domains/commerce/ui/ordering/OrderingFloatingNoticeLayer.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-  <div
-    v-if="message"
-    class="ordering-floating-notice-layer"
-    :class="`ordering-floating-notice-layer--${tone}`"
-    :data-testid="dataTestid"
-    role="status"
-  >
-    <span :class="iconClass" aria-hidden="true"></span>
-    <span>{{ message }}</span>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-
-const props = withDefaults(
-  defineProps<{
-    message: string | null;
-    tone?: "warning" | "error";
-    dataTestid?: string;
-  }>(),
-  {
-    tone: "warning",
-    dataTestid: "ordering.notice.blocked",
-  },
-);
-
-const iconClass = computed(() =>
-  props.tone === "error" ? "i-mdi-alert-circle" : "i-mdi-alert-outline",
-);
-</script>
-
-<style scoped lang="scss">
-.ordering-floating-notice-layer {
-  position: absolute;
-  right: var(--sys-spacing-medium);
-  bottom: calc(calc(var(--sys-spacing-large) + var(--sys-spacing-small) + var(--sys-spacing-xsmall)) + var(--sys-spacing-xlarge));
-  left: var(--sys-spacing-medium);
-  z-index: 20;
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  gap: var(--sys-spacing-xsmall);
-  align-items: center;
-  padding: var(--sys-spacing-small);
-  border-radius: var(--sys-radius-small);
-  box-shadow: var(--sys-shadow-3);
-
-  span:first-child {
-    @include mx.pu-icon(small);
-  }
-
-  span:last-child {
-    @include mx.pu-font(support);
-    overflow-wrap: anywhere;
-  }
-}
-
-.ordering-floating-notice-layer--warning {
-  background: var(--sys-color-warning);
-  color: var(--sys-color-on-warning);
-}
-
-.ordering-floating-notice-layer--error {
-  background: var(--sys-color-error);
-  color: var(--sys-color-on-error);
-}
-</style>
diff --git a/apps/frontend/src/domains/commerce/ui/ordering/RentalOrderingForm.vue b/apps/frontend/src/domains/commerce/ui/ordering/RentalOrderingForm.vue
index 35d21434a..f660c4c76 100644
--- a/apps/frontend/src/domains/commerce/ui/ordering/RentalOrderingForm.vue
+++ b/apps/frontend/src/domains/commerce/ui/ordering/RentalOrderingForm.vue
@@ -67,7 +67,7 @@
                 {{ Math.round(rentalSkuDurationMinutes(sku) / 60) }} 小时
               </small>
             </span>
-            <b>{{ formatFen(rentalSkuAmountFen(sku)) }}</b>
+            <b>{{ formatFen(rentalListedPriceFen(sku.skuId) ?? rentalSkuAmountFen(sku)) }}</b>
           </button>
         </div>
       </div>
@@ -157,6 +157,7 @@ import {
   readBindingValue,
   readBoundOrderParticipants,
 } from "@/domains/commerce/model/ordering-content";
+import { type OfferListingInput, useOfferListing } from "@/domains/commerce/queries/useCommerce";
 
 type RentalOffer = OrderingContentInput["offerDetail"];
 type RentalSpu = RentalOffer["spus"][number];
@@ -164,6 +165,7 @@ type RentalSku = RentalSpu["skuOptions"][number];
 
 const props = defineProps<{
   input: OrderingContentInput;
+  listingRefreshKey: number;
 }>();
 
 const emit = defineEmits<{
@@ -176,17 +178,12 @@ const contactPhone = ref("");
 const registrantNames = ref<string[]>([]);
 
 const rentalOffer = computed<RentalOffer | null>(() =>
-  props.input.offerDetail.productType === "RENTAL"
-    ? props.input.offerDetail
-    : null,
+  props.input.offerDetail.productType === "RENTAL" ? props.input.offerDetail : null,
 );
 
-const bindingValue = (key: string): unknown | null =>
-  readBindingValue(props.input.bindings, key);
+const bindingValue = (key: string): unknown | null => readBindingValue(props.input.bindings, key);
 
-const boundOrderParticipants = computed(() =>
-  readBoundOrderParticipants(props.input.bindings),
-);
+const boundOrderParticipants = computed(() => readBoundOrderParticipants(props.input.bindings));
 
 const participantCount = computed(() => {
   const value = bindingValue("participantCount");
@@ -212,20 +209,16 @@ const isRentalSku = (sku: RentalSku): boolean =>
   sku.pricingModel.type === "FIXED_TOTAL";
 
 const rentalSkuParticipantCount = (sku: RentalSku): number =>
-  isRentalSku(sku) && "participantCount" in sku.facts
-    ? sku.facts.participantCount
-    : 0;
+  isRentalSku(sku) && "participantCount" in sku.facts ? sku.facts.participantCount : 0;
 
 const rentalSkuDurationMinutes = (sku: RentalSku): number =>
-  isRentalSku(sku) && "durationMinutes" in sku.facts
-    ? sku.facts.durationMinutes
-    : 0;
+  isRentalSku(sku) && "durationMinutes" in sku.facts ? sku.facts.durationMinutes : 0;
 
 const rentalSkuAmountFen = (sku: RentalSku): number | null =>
   sku.pricingModel.type === "FIXED_TOTAL" ? sku.pricingModel.amountFen : null;
 
-const allSkus = computed<RentalSku[]>(() =>
-  rentalOffer.value?.spus.flatMap((spu) => spu.skuOptions) ?? [],
+const allSkus = computed<RentalSku[]>(
+  () => rentalOffer.value?.spus.flatMap((spu) => spu.skuOptions) ?? [],
 );
 
 const selectableSkus = computed<RentalSku[]>(() =>
@@ -250,37 +243,83 @@ const selectedSpu = computed<RentalSpu | null>(() => {
   );
 });
 
-const primarySpu = computed(
-  () => selectedSpu.value ?? rentalOffer.value?.spus[0] ?? null,
-);
+const primarySpu = computed(() => selectedSpu.value ?? rentalOffer.value?.spus[0] ?? null);
 
-const spuDescription = computed(() =>
-  primarySpu.value?.presentation.sellingPoints.slice(0, 2).join(" · ") ?? null,
+const spuDescription = computed(
+  () => primarySpu.value?.presentation.sellingPoints.slice(0, 2).join(" · ") ?? null,
 );
 
 const spuThumbnailSrc = computed(() => {
   const presentation = primarySpu.value?.presentation;
-  return (
-    presentation?.heroImageAssetIds[0] ??
-    presentation?.detailImageAssetIds[0] ??
-    null
-  );
+  return presentation?.heroImageAssetIds[0] ?? presentation?.detailImageAssetIds[0] ?? null;
 });
 
 const selectedCancellationSummary = computed(
   () => selectedSku.value?.cancellationPolicySummary ?? [],
 );
 
+const completedRegistrantNames = computed(() =>
+  registrantNames.value.map((name) => name.trim()).filter((name) => name.length > 0),
+);
+
+const offerListingInput = computed<OfferListingInput | null>(() => {
+  if (!rentalOffer.value || !serviceStartAt.value || !serviceEndAt.value) return null;
+  const phone = contactPhone.value.trim();
+  if (!phone) return null;
+  if (boundOrderParticipants.value.length === 0) return null;
+  if (completedRegistrantNames.value.length !== participantCount.value) return null;
+  return {
+    productType: "RENTAL",
+    participants: boundOrderParticipants.value,
+    serviceStartAt: serviceStartAt.value,
+    serviceEndAt: serviceEndAt.value,
+    contactPhone: phone,
+    registrants: completedRegistrantNames.value.map((fullName) => ({ fullName })),
+  };
+});
+
+const offerListingQueryInput = computed(() =>
+  offerListingInput.value
+    ? {
+        offerId: props.input.source.offerId,
+        listingInput: offerListingInput.value,
+      }
+    : null,
+);
+
+const offerListingQuery = useOfferListing(offerListingQueryInput);
+
+watch(
+  () => props.listingRefreshKey,
+  () => {
+    if (offerListingQueryInput.value) {
+      void offerListingQuery.refetch();
+    }
+  },
+);
+
+const listedRentalItems = computed(() =>
+  (offerListingQuery.data.value?.items ?? []).filter((item) => item.kind === "FIXED"),
+);
+
+const selectedListedItem = computed(
+  () => listedRentalItems.value.find((item) => item.skuId === selectedSkuId.value) ?? null,
+);
+
+const rentalListedPriceFen = (skuId: number): number | null =>
+  listedRentalItems.value.find((item) => item.skuId === skuId)?.price.totalFen ?? null;
+
 const summary = computed<OrderingContentSummary>(() => {
   const sku = selectedSku.value;
-  const amountFen = sku ? rentalSkuAmountFen(sku) : null;
+  const listedItem = selectedListedItem.value;
+  const amountFen = listedItem?.price.totalFen ?? (sku ? rentalSkuAmountFen(sku) : null);
   return {
     price: sku
       ? {
           currency: "CNY",
           totalFen: amountFen,
           range: null,
-          explanations: [
+          explanations: listedItem?.price.explanations ?? [
             {
               sourceId: `sku:${sku.skuId}`,
               label: sku.name,
@@ -295,35 +334,16 @@ const summary = computed<OrderingContentSummary>(() => {
 });
 
 const output = computed<OrderingContentOutput | null>(() => {
-  if (!rentalOffer.value || !selectedSku.value) return null;
-  if (!serviceStartAt.value || !serviceEndAt.value) return null;
-  const phone = contactPhone.value.trim();
-  const names = registrantNames.value.map((name) => name.trim());
-  if (
-    !phone ||
-    names.length !== participantCount.value ||
-    names.some((name) => !name)
-  ) {
-    return null;
-  }
-  if (boundOrderParticipants.value.length === 0) return null;
+  if (!rentalOffer.value || !selectedSku.value || !selectedListedItem.value) return null;
 
   return {
-    participants: boundOrderParticipants.value.map((participant) => ({
-      userId: participant.userId,
-    })),
     items: [
       {
-        skuId: selectedSku.value.skuId,
+        kind: "FIXED",
+        quoteId: selectedListedItem.value.quoteId,
         quantity: 1,
       },
     ],
-    productTypedExtraProperties: {
-      serviceStartAt: serviceStartAt.value,
-      serviceEndAt: serviceEndAt.value,
-      contactPhone: phone,
-      registrants: names.map((fullName) => ({ fullName })),
-    },
   };
 });
 
@@ -353,9 +373,7 @@ watch(
       next.spus
         .flatMap((spu) => spu.skuOptions)
         .find(
-          (sku) =>
-            isRentalSku(sku) &&
-            rentalSkuParticipantCount(sku) === participantCount.value,
+          (sku) => isRentalSku(sku) && rentalSkuParticipantCount(sku) === participantCount.value,
         ) ??
       next.spus.flatMap((spu) => spu.skuOptions).find(isRentalSku) ??
       null;
diff --git a/apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue b/apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue
index b5132b431..b7c9cc5b4 100644
--- a/apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue
+++ b/apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue
@@ -24,16 +24,47 @@
         :z-index="20"
       >
         <div class="ride-hailing-ordering-content__vehicles">
-          <RideHailingSkuCard
-            v-for="option in visibleRideQuoteOptions"
-            :key="option.skuId"
-            :display-name="option.displayName"
-            :price-label="formatFen(option.quoteAmountFen)"
-            :selectable="option.selectable"
-            :selected="rideSkuSelection.isSelected(option.skuId)"
-            :preview-src="skuPreviewSrc(option.skuId)"
-            @select="rideSkuSelection.toggle(option.skuId)"
-          />
+          <template v-if="showsRideQuoteSkeleton">
+            <div
+              v-for="index in 2"
+              :key="index"
+              class="ride-hailing-ordering-content__vehicle-skeleton"
+              data-testid="ordering.ride-hailing.vehicle-card.skeleton"
+            >
+              <div class="ride-hailing-ordering-content__vehicle-skeleton-meta">
+                <div class="ride-hailing-ordering-content__vehicle-skeleton-name">
+                  <PuSkeleton width="1.25rem" height="1.25rem" radius="sm" />
+                  <PuSkeleton width="8.5rem" height="1.125rem" radius="pill" />
+                </div>
+                <PuSkeleton
+                  class="ride-hailing-ordering-content__vehicle-skeleton-preview"
+                  width="min(13.5rem, 100%)"
+                  height="5rem"
+                  radius="sm"
+                  block
+                />
+              </div>
+              <div class="ride-hailing-ordering-content__vehicle-skeleton-price">
+                <PuSkeleton width="2.5rem" height="0.875rem" radius="pill" />
+                <div class="ride-hailing-ordering-content__vehicle-skeleton-amount">
+                  <PuSkeleton width="4.25rem" height="1.25rem" radius="pill" />
+                  <PuSkeleton width="1.25rem" height="1.25rem" radius="sm" />
+                </div>
+              </div>
+            </div>
+          </template>
+          <template v-else>
+            <RideHailingSkuCard
+              v-for="option in visibleRideQuoteOptions"
+              :key="option.quoteId"
+              :display-name="option.displayName"
+              :price-label="formatFen(option.price.totalFen)"
+              :selectable="true"
+              :selected="rideSkuSelection.isSelected(option.skuId)"
+              :preview-src="skuPreviewSrc(option.skuId)"
+              @select="rideSkuSelection.toggle(option.skuId)"
+            />
+          </template>
         </div>
       </PuFloatPanel>
 
@@ -116,6 +147,26 @@
             tone="info"
             message="出发时间由当前搭子请求锁定。"
           />
+          <PuButton
+            v-if="rideDepartureAt && editableDepartureAt !== rideDepartureAt"
+            type="button"
+            variant="soft"
+            tone="neutral"
+            data-testid="ordering.ride-hailing.departure-time.apply-imported"
+            @click="applyImportedDepartureAt"
+          >
+            使用带入时间
+          </PuButton>
+          <PuButton
+            v-if="editableDepartureAt"
+            type="button"
+            variant="soft"
+            tone="neutral"
+            data-testid="ordering.ride-hailing.departure-time.use-now"
+            @click="keepDepartNow"
+          >
+            现在出发
+          </PuButton>
           <PuFormItem
             label="出发时间"
             for-id="ride-hailing-departure-at"
@@ -132,19 +183,35 @@
           </PuFormItem>
         </div>
       </PuDrawer>
+
+      <PuDialog
+        :open="departureImportDialogOpen"
+        title="使用带入的出发时间？"
+        :description="departureImportDialogDescription"
+        confirm-text="使用"
+        cancel-text="现在出发"
+        :show-cancel="true"
+        :show-confirm="true"
+        @confirm="applyImportedDepartureAt"
+        @cancel="keepDepartNow"
+        @close="keepDepartNow"
+      />
     </div>
   </template>
 </template>
 
 <script setup lang="ts">
 import {
+  PuButton,
+  PuDialog,
   PuDrawer,
   PuFloatPanel,
+  type PuFloatPanelStop,
   PuFormItem,
   PuInlineNotice,
   PuInput,
+  PuSkeleton,
   usePuSelect,
-  type PuFloatPanelStop,
 } from "@partner-up-dev/design-web";
 import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 import type {
@@ -159,10 +226,9 @@ import {
   readBoundOrderParticipants,
 } from "@/domains/commerce/model/ordering-content";
 import {
-  type CreateOrderInput,
-  type RideHailingQuoteOptionsInput,
-  type RideHailingQuoteOptionsResponse,
-  useRideHailingQuoteOptions,
+  type OfferListingInput,
+  type OfferListingResponse,
+  useOfferListing,
 } from "@/domains/commerce/queries/useCommerce";
 import type { PickedLocation } from "@/domains/location/model/location-picker";
 import LocationPickerPanel from "@/domains/location/ui/LocationPickerPanel.vue";
@@ -179,18 +245,19 @@ import RouteMap from "@/domains/route/ui/RouteMap.vue";
 import type { MapFitPadding } from "@/shared/map/types";
 import RideHailingSkuCard from "./RideHailingSkuCard.vue";
 
-export type RideVehicleOption = RideHailingQuoteOptionsResponse["options"][number];
+export type RideVehicleOption = Extract<
+  OfferListingResponse["items"][number],
+  { kind: "CHOICE_CANDIDATE" }
+>;
 
-type RideRouteSnapshot = Extract<
-  CreateOrderInput["productTypedExtraProperties"],
-  { route: unknown }
->["route"];
+type RideRouteSnapshot = Extract<OfferListingInput, { productType: "RIDE_HAILING" }>["route"];
 type RideOffer = OrderingContentInput["offerDetail"];
 type RideSkuOption = RideOffer["spus"][number]["skuOptions"][number];
 type RidePanelStopValue = "minimized" | "normal" | "expanded";
 
 const props = defineProps<{
   input: OrderingContentInput;
+  listingRefreshKey: number;
 }>();
 
 const emit = defineEmits<{
@@ -211,6 +278,8 @@ const selectedRoutePointIndex = ref<number | null>(null);
 const ridersDrawerOpen = ref(false);
 const departureDrawerOpen = ref(false);
 const editableDepartureAt = ref<string | null>(null);
+const departureImportDialogOpen = ref(false);
+const importedDeparturePromptSeen = ref(false);
 
 const rideOffer = computed<RideOffer | null>(() =>
   props.input.offerDetail.productType === "RIDE_HAILING" ? props.input.offerDetail : null,
@@ -424,28 +493,6 @@ const routeMapFitPadding = computed<MapFitPadding>(() => ({
   left: 32,
 }));
 
-const rideBaseOptions = computed<RideVehicleOption[]>(
-  () =>
-    rideOffer.value?.spus.flatMap((spu) =>
-      spu.skuOptions.map((sku) => ({
-        skuId: sku.skuId,
-        spuId: sku.spuId,
-        name: sku.name,
-        providerName: "服务商",
-        carTypeName: sku.name,
-        displayName: sku.name,
-        providerVehicleTypeCode: "",
-        providerInstanceId: "",
-        selectable: true,
-        selected: false,
-        disabledReason: null,
-        estimateAmountFen: null,
-        quoteAmountFen: null,
-        priceExplanations: [],
-      })),
-    ) ?? [],
-);
-
 const rideSkuOptions = computed<RideSkuOption[]>(
   () => rideOffer.value?.spus.flatMap((spu) => spu.skuOptions) ?? [],
 );
@@ -473,40 +520,62 @@ const skuPreviewSrc = (skuId: number): string | null => {
   );
 };
 
-const quoteOptionsInput = computed<RideHailingQuoteOptionsInput | null>(() => {
+const offerListingInput = computed<OfferListingInput | null>(() => {
   const route = rideRouteForSubmit.value;
   if (!rideOffer.value || !route) return null;
+  const phone = rideContactPhone.value.trim();
+  if (!phone || rideRiders.value.length === 0) return null;
   return {
-    source: {
-      offerId: props.input.source.offerId,
-    },
+    productType: "RIDE_HAILING",
+    participants: rideRiders.value,
     route,
+    departureAt: editableDepartureAt.value,
+    riders: rideRiders.value,
+    contactPhone: phone,
   };
 });
 
-const quoteOptionsQuery = useRideHailingQuoteOptions(quoteOptionsInput);
+const offerListingQueryInput = computed(() =>
+  offerListingInput.value
+    ? {
+        offerId: props.input.source.offerId,
+        listingInput: offerListingInput.value,
+      }
+    : null,
+);
+
+const offerListingQuery = useOfferListing(offerListingQueryInput);
+
+watch(
+  () => props.listingRefreshKey,
+  () => {
+    if (offerListingQueryInput.value) {
+      void offerListingQuery.refetch();
+    }
+  },
+);
 
-const rideQuoteOptions = computed<RideVehicleOption[]>(
-  () => quoteOptionsQuery.data.value?.options ?? rideBaseOptions.value,
+const rideQuoteOptions = computed<RideVehicleOption[]>(() =>
+  (offerListingQuery.data.value?.items ?? []).filter(
+    (item): item is RideVehicleOption => item.kind === "CHOICE_CANDIDATE",
+  ),
 );
 
-const hasQuotedOptions = computed(() => (quoteOptionsQuery.data.value?.options.length ?? 0) > 0);
+const visibleRideQuoteOptions = computed<RideVehicleOption[]>(() => rideQuoteOptions.value);
 
-const visibleRideQuoteOptions = computed<RideVehicleOption[]>(() =>
-  hasQuotedOptions.value
-    ? rideQuoteOptions.value.filter((option) => option.selectable)
-    : rideQuoteOptions.value,
+const showsRideQuoteSkeleton = computed(
+  () => offerListingQuery.isPending.value && visibleRideQuoteOptions.value.length === 0,
 );
 
 const rideSkuSelection = usePuSelect<number>({
   multiple: true,
   isOptionDisabled: (skuId) =>
-    !visibleRideQuoteOptions.value.some((option) => option.skuId === skuId && option.selectable),
+    !visibleRideQuoteOptions.value.some((option) => option.skuId === skuId),
 });
 
 const selectedCandidateSkuIds = computed<number[]>(() =>
   rideSkuSelection.selectedValues.value.filter((skuId) =>
-    visibleRideQuoteOptions.value.some((option) => option.skuId === skuId && option.selectable),
+    visibleRideQuoteOptions.value.some((option) => option.skuId === skuId),
   ),
 );
 
@@ -517,59 +586,54 @@ const selectedRideQuoteOptions = computed<RideVehicleOption[]>(() =>
   }),
 );
 
+const selectedCandidateQuoteIds = computed<string[]>(() =>
+  selectedRideQuoteOptions.value.map((option) => option.quoteId),
+);
+
 const rideDepartureLabel = computed(() => {
   const departureAt = editableDepartureAt.value;
   if (!departureAt) return "现在出发";
   return `${formatTime(departureAt)}出发`;
 });
 
+const importedDepartureLabel = computed(() =>
+  rideDepartureAt.value ? formatDateTime(rideDepartureAt.value) : "未确定",
+);
+
+const departureImportDialogDescription = computed(
+  () => `当前搭子请求带入出发时间：${importedDepartureLabel.value}。`,
+);
+
 const editableDepartureInput = computed(() =>
   editableDepartureAt.value ? toDateTimeLocalValue(editableDepartureAt.value) : "",
 );
 
 const output = computed<OrderingContentOutput | null>(() => {
-  if (!rideOffer.value || selectedCandidateSkuIds.value.length === 0 || !rideRouteForSubmit.value) {
-    return null;
-  }
   if (
-    selectedRideQuoteOptions.value.some(
-      (option) => !option.selectable || typeof option.quoteAmountFen !== "number",
-    )
+    !rideOffer.value ||
+    selectedCandidateQuoteIds.value.length === 0 ||
+    !rideRouteForSubmit.value
   ) {
     return null;
   }
-  const phone = rideContactPhone.value.trim();
-  if (!phone) return null;
-  if (rideRiders.value.length === 0) return null;
   return {
-    participants: rideRiders.value.map((rider) => ({
-      userId: rider.userId,
-    })),
     items: [
       {
         kind: "CHOICE_SET",
-        productType: "RIDE_HAILING",
-        candidateSkuIds: selectedCandidateSkuIds.value,
+        candidateQuoteIds: selectedCandidateQuoteIds.value,
         quantity: 1,
       },
     ],
-    productTypedExtraProperties: {
-      route: rideRouteForSubmit.value,
-      departureAt: editableDepartureAt.value,
-      riders: rideRiders.value.map((rider) => rider.userId),
-      contactPhone: phone,
-    },
   };
 });
 
 const summary = computed<OrderingContentSummary>(() => {
   const selectablePrices = selectedRideQuoteOptions.value
-    .filter((option) => option.selectable)
-    .map((option) => option.quoteAmountFen)
+    .map((option) => option.price.totalFen)
     .filter((value): value is number => typeof value === "number");
   const cheapestSelectedOption = [...selectedRideQuoteOptions.value]
-    .filter((option) => option.selectable && typeof option.quoteAmountFen === "number")
-    .sort((left, right) => (left.quoteAmountFen ?? 0) - (right.quoteAmountFen ?? 0))[0];
+    .filter((option) => typeof option.price.totalFen === "number")
+    .sort((left, right) => (left.price.totalFen ?? 0) - (right.price.totalFen ?? 0))[0];
   const range =
     selectablePrices.length > 0
       ? {
@@ -586,7 +650,7 @@ const summary = computed<OrderingContentSummary>(() => {
           ? (selectablePrices[0] ?? null)
           : null,
       range,
-      explanations: cheapestSelectedOption?.priceExplanations ?? [],
+      explanations: cheapestSelectedOption?.price.explanations ?? [],
     },
   };
 });
@@ -633,6 +697,16 @@ const formatTime = (value: string): string =>
     hour12: false,
   }).format(new Date(value));
 
+const formatDateTime = (value: string): string =>
+  new Intl.DateTimeFormat("zh-CN", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+  }).format(new Date(value));
+
 const toDateTimeLocalValue = (value: string): string => {
   const date = new Date(value);
   if (Number.isNaN(date.getTime())) return "";
@@ -655,12 +729,24 @@ const handleDepartureInput = (value: string) => {
   editableDepartureAt.value = value.length > 0 ? new Date(value).toISOString() : null;
 };
 
+const applyImportedDepartureAt = () => {
+  if (rideDepartureAt.value) {
+    editableDepartureAt.value = rideDepartureAt.value;
+  }
+  importedDeparturePromptSeen.value = true;
+  departureImportDialogOpen.value = false;
+};
+
+const keepDepartNow = () => {
+  editableDepartureAt.value = null;
+  importedDeparturePromptSeen.value = true;
+  departureImportDialogOpen.value = false;
+};
+
 watch(
   visibleRideQuoteOptions,
   (next) => {
-    const selectableSkuIds = new Set(
-      next.filter((option) => option.selectable).map((option) => option.skuId),
-    );
+    const selectableSkuIds = new Set(next.map((option) => option.skuId));
     const currentSelection = rideSkuSelection.selectedValues.value.filter((skuId) =>
       selectableSkuIds.has(skuId),
     );
@@ -669,11 +755,9 @@ watch(
     }
     if (currentSelection.length > 0) return;
     const defaultOption =
-      next.find((option) => option.selected && option.selectable) ??
-      [...next]
-        .filter((option) => option.selectable)
-        .sort((left, right) => (left.quoteAmountFen ?? 0) - (right.quoteAmountFen ?? 0))[0] ??
-      null;
+      [...next].sort(
+        (left, right) => (left.price.totalFen ?? 0) - (right.price.totalFen ?? 0),
+      )[0] ?? null;
     rideSkuSelection.setValue(defaultOption ? [defaultOption.skuId] : []);
   },
   { immediate: true },
@@ -690,7 +774,14 @@ watch(
 watch(
   rideDepartureAt,
   (next) => {
-    editableDepartureAt.value = next;
+    if (!next) {
+      editableDepartureAt.value = null;
+      return;
+    }
+    if (!importedDeparturePromptSeen.value) {
+      editableDepartureAt.value = null;
+      departureImportDialogOpen.value = true;
+    }
   },
   { immediate: true },
 );
@@ -750,6 +841,55 @@ watch(
   padding: 0 var(--sys-spacing-medium) var(--sys-spacing-small);
 }
 
+.ride-hailing-ordering-content__vehicle-skeleton {
+  display: flex;
+  min-width: 0;
+  align-items: stretch;
+  justify-content: space-between;
+  gap: var(--sys-spacing-medium);
+  border: 1px solid var(--sys-color-outline-variant);
+  border-radius: var(--sys-radius-small);
+  padding: var(--sys-spacing-small);
+  background: var(--sys-color-surface-container-low);
+}
+
+.ride-hailing-ordering-content__vehicle-skeleton-meta {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: var(--sys-spacing-small);
+}
+
+.ride-hailing-ordering-content__vehicle-skeleton-name {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: var(--sys-spacing-xsmall);
+}
+
+.ride-hailing-ordering-content__vehicle-skeleton-preview {
+  min-height: 5rem;
+  aspect-ratio: 16 / 9;
+}
+
+.ride-hailing-ordering-content__vehicle-skeleton-price {
+  display: flex;
+  flex: 0 0 auto;
+  min-width: 5.25rem;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: var(--sys-spacing-medium);
+}
+
+.ride-hailing-ordering-content__vehicle-skeleton-amount {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--sys-spacing-xsmall);
+}
+
 .ride-hailing-ordering-content__controls {
   position: absolute;
   right: 0;
diff --git a/apps/frontend/src/pages/OrderingFromPlacementPage.vue b/apps/frontend/src/pages/OrderingFromPlacementPage.vue
index e2a499b43..67d60876c 100644
--- a/apps/frontend/src/pages/OrderingFromPlacementPage.vue
+++ b/apps/frontend/src/pages/OrderingFromPlacementPage.vue
@@ -29,6 +29,7 @@
       <RentalOrderingForm
         v-else-if="rentalOrdering && orderingContentInput"
         :input="orderingContentInput"
+        :listing-refresh-key="listingRefreshKey"
         @update:output="contentOutput = $event"
         @update:summary="contentSummary = $event"
       />
@@ -36,6 +37,7 @@
       <RideHailingOrderingContent
         v-else-if="rideOrdering && orderingContentInput"
         :input="orderingContentInput"
+        :listing-refresh-key="listingRefreshKey"
         @update:output="contentOutput = $event"
         @update:summary="contentSummary = $event"
       />
@@ -46,7 +48,7 @@
         v-if="rentalOrdering"
         :amount-label="priceDisplayLabel"
         :can-create="canCreate"
-        :loading="createOrderMutation.isPending.value || evaluateMutation.isPending.value"
+        :loading="createOrderMutation.isPending.value"
         :price-detail-enabled="true"
         price-testid="ordering.rental.price"
         price-detail-testid="ordering.rental.price-detail.toggle"
@@ -59,7 +61,7 @@
         v-if="rideOrdering"
         :amount-label="priceDisplayLabel"
         :can-create="canCreate"
-        :loading="createOrderMutation.isPending.value || evaluateMutation.isPending.value"
+        :loading="createOrderMutation.isPending.value"
         :price-detail-enabled="true"
         price-testid="ordering.ride-hailing.quote-price-range"
         price-detail-testid="ordering.ride-hailing.price-detail.toggle"
@@ -70,15 +72,6 @@
       />
     </template>
 
-    <template #floating>
-      <OrderingFloatingNoticeLayer
-        v-if="rentalOrdering || rideOrdering"
-        :message="floatingNoticeMessage"
-        :tone="floatingNoticeTone"
-        data-testid="ordering.notice.blocked"
-      />
-    </template>
-
     <template #drawer>
       <OrderingPriceDetailDrawer
         :open="priceDetailOpen"
@@ -93,19 +86,18 @@
     </template>
 
     <PuDialog
-      :open="preflightDialog.open"
-      :title="preflightDialog.title"
-      :description="preflightDialog.description"
-      :confirm-text="preflightDialog.confirmText"
+      :open="orderingDialog.open"
+      :title="orderingDialog.title"
+      :description="orderingDialog.description"
+      :confirm-text="orderingDialog.confirmText"
       cancel-text="取消"
-      :show-cancel="preflightDialog.showCancel"
+      :show-cancel="orderingDialog.showCancel"
       :show-confirm="true"
       :confirm-loading="createOrderMutation.isPending.value"
-      :tone="preflightDialog.kind === 'price-change' ? 'warning' : 'info'"
-      data-testid="ordering.preflight-dialog"
-      @close="closePreflightDialog"
-      @cancel="closePreflightDialog"
-      @confirm="handlePreflightDialogConfirm"
+      tone="info"
+      @close="closeOrderingDialog"
+      @cancel="closeOrderingDialog"
+      @confirm="handleOrderingDialogConfirm"
     />
   </OrderingPageShell>
 </template>
@@ -124,13 +116,7 @@ import {
   ORDERING_ENTRY_STORAGE_KEY,
   type OrderingEntryPayload,
 } from "@/domains/commerce/model/ordering-entry-storage";
-import {
-  type CreateOrderInput,
-  type OrderingEvaluationResponse,
-  useCreateOrder,
-  useEvaluateOrdering,
-} from "@/domains/commerce/queries/useCommerce";
-import OrderingFloatingNoticeLayer from "@/domains/commerce/ui/ordering/OrderingFloatingNoticeLayer.vue";
+import { type CreateOrderInput, useCreateOrder } from "@/domains/commerce/queries/useCommerce";
 import OrderingFooterActionBar from "@/domains/commerce/ui/ordering/OrderingFooterActionBar.vue";
 import OrderingPageShell from "@/domains/commerce/ui/ordering/OrderingPageShell.vue";
 import OrderingPriceDetailDrawer from "@/domains/commerce/ui/ordering/OrderingPriceDetailDrawer.vue";
@@ -138,19 +124,19 @@ import RentalOrderingForm from "@/domains/commerce/ui/ordering/RentalOrderingFor
 import RideHailingOrderingContent from "@/domains/commerce/ui/ordering/RideHailingOrderingContent.vue";
 
 type OrderingOfferDetail = OrderingEntryPayload["offerDetail"];
-type PreflightDialogKind = "blocked" | "price-change";
-type PreflightDialogState = {
+type OrderingDialogKind = "blocked";
+type OrderingDialogState = {
   open: boolean;
-  kind: PreflightDialogKind;
+  kind: OrderingDialogKind;
   title: string;
   description: string;
   confirmText: string;
   showCancel: boolean;
-  pendingInput: CreateOrderInput | null;
 };
-type OrderingActionProblem = NonNullable<
-  OrderingEvaluationResponse["actions"]["create_order"]["problem"]
->;
+type OrderingActionProblem = {
+  title?: string | null;
+  detail?: string | null;
+};
 
 const { t } = useI18n();
 const router = useRouter();
@@ -184,7 +170,6 @@ const orderingEntry = ref<OrderingEntryPayload | null>(readOrderingEntry());
 const missingInput = computed(() => orderingEntry.value === null);
 
 const createOrderMutation = useCreateOrder();
-const evaluateMutation = useEvaluateOrdering();
 
 const ordering = computed(() => orderingEntry.value?.offerDetail ?? null);
 const rentalOrdering = computed<OrderingOfferDetail | null>(() =>
@@ -199,15 +184,15 @@ const orderingPageTestId = computed(() =>
 
 const contentOutput = ref<OrderingContentOutput | null>(null);
 const contentSummary = ref<OrderingContentSummary>({ price: null });
+const listingRefreshKey = ref(0);
 const priceDetailOpen = ref(false);
-const preflightDialog = ref<PreflightDialogState>({
+const orderingDialog = ref<OrderingDialogState>({
   open: false,
   kind: "blocked",
   title: "",
   description: "",
   confirmText: "我知道了",
   showCancel: false,
-  pendingInput: null,
 });
 
 const orderingContentInput = computed<OrderingContentInput | null>(() => {
@@ -225,11 +210,8 @@ const buildOrderInput = (output: OrderingContentOutput | null): CreateOrderInput
   const entry = orderingEntry.value;
   if (!entry || !output) return null;
   return {
-    source: entry.source,
     prId: entry.prId ?? null,
-    participants: output.participants,
     items: output.items,
-    productTypedExtraProperties: output.productTypedExtraProperties,
   };
 };
 
@@ -237,16 +219,7 @@ const createOrderInput = computed<CreateOrderInput | null>(() =>
   buildOrderInput(contentOutput.value),
 );
 
-const createOrderErrorMessage = computed(() =>
-  createOrderMutation.error.value instanceof Error ? createOrderMutation.error.value.message : null,
-);
-
-const canCreate = computed(
-  () =>
-    !!createOrderInput.value &&
-    !createOrderMutation.isPending.value &&
-    !evaluateMutation.isPending.value,
-);
+const canCreate = computed(() => !!createOrderInput.value && !createOrderMutation.isPending.value);
 
 const priceSummary = computed(() => contentSummary.value.price);
 
@@ -265,12 +238,6 @@ const priceDisplayLabel = computed(() => {
   return formatPriceAmount(priceSummary.value?.totalFen ?? null);
 });
 
-const floatingNoticeMessage = computed(() => createOrderErrorMessage.value);
-
-const floatingNoticeTone = computed<"warning" | "error">(() =>
-  createOrderErrorMessage.value ? "error" : "warning",
-);
-
 const backFallbackTo = computed(() =>
   orderingEntry.value?.prId ? { path: `/pr/${orderingEntry.value.prId}` } : { path: "/" },
 );
@@ -283,74 +250,24 @@ const formatPriceAmount = (amountFen: number | null | undefined): string =>
     : t("ordering.summary.currencyPending");
 
 const openBlockedDialog = (problem: Partial<OrderingActionProblem>): void => {
-  preflightDialog.value = {
+  orderingDialog.value = {
     open: true,
     kind: "blocked",
     title: problem.title ?? "暂不能创建订单",
     description: problem.detail ?? "请稍后重试。",
     confirmText: "我知道了",
     showCancel: false,
-    pendingInput: null,
-  };
-};
-
-type ComparablePrice = NonNullable<OrderingContentSummary["price"]>;
-type PriceRangeTuple = readonly [number, number];
-
-const comparableRange = (price: ComparablePrice | null): PriceRangeTuple | null => {
-  const range = price?.range ?? null;
-  const rangePrices = range
-    ? [range.minFen, range.maxFen].filter((value): value is number => typeof value === "number")
-    : [];
-  if (rangePrices.length > 0) {
-    return [Math.min(...rangePrices), Math.max(...rangePrices)];
-  }
-  return typeof price?.totalFen === "number" ? [price.totalFen, price.totalFen] : null;
-};
-
-const formatPriceComparable = (price: ComparablePrice | null): string => {
-  const range = comparableRange(price);
-  if (!range) return formatPriceAmount(null);
-  const [min, max] = range;
-  return min === max ? formatPriceAmount(min) : `${formatPriceAmount(min)}~${formatYuan(max)}`;
-};
-
-const openPriceChangeDialog = (
-  input: CreateOrderInput,
-  evaluation: OrderingEvaluationResponse,
-): void => {
-  preflightDialog.value = {
-    open: true,
-    kind: "price-change",
-    title: "价格发生变化",
-    description: `当前价格已从 ${formatPriceComparable(
-      priceSummary.value,
-    )} 更新为 ${formatPriceComparable(evaluation.price)}。是否继续下单？`,
-    confirmText: "继续下单",
-    showCancel: true,
-    pendingInput: input,
   };
 };
 
-const closePreflightDialog = (): void => {
-  preflightDialog.value = {
-    ...preflightDialog.value,
+const closeOrderingDialog = (): void => {
+  orderingDialog.value = {
+    ...orderingDialog.value,
     open: false,
-    pendingInput: null,
   };
 };
 
-const shouldConfirmPriceChange = (evaluation: OrderingEvaluationResponse): boolean => {
-  const displayedRange = comparableRange(priceSummary.value);
-  const evaluatedRange = comparableRange(evaluation.price);
-  return (
-    displayedRange !== null &&
-    evaluatedRange !== null &&
-    (displayedRange[0] !== evaluatedRange[0] || displayedRange[1] !== evaluatedRange[1])
-  );
-};
-
-const createOrderAfterPreflight = async (input: CreateOrderInput): Promise<void> => {
+const createOrderFromQuoteDraft = async (input: CreateOrderInput): Promise<void> => {
   try {
     const created = await createOrderMutation.mutateAsync(input);
     if (created.outcome === "CANCELLED") {
@@ -361,8 +278,21 @@ const createOrderAfterPreflight = async (input: CreateOrderInput): Promise<void>
       return;
     }
     await router.push({ path: `/orders/${created.orderId}` });
-  } catch {
-    closePreflightDialog();
+  } catch (error) {
+    closeOrderingDialog();
+    const apiError = error as { code?: string; message?: string };
+    if (apiError.code === "ORDERING_QUOTE_EXPIRED") {
+      listingRefreshKey.value += 1;
+      openBlockedDialog({
+        title: "报价已过期",
+        detail: apiError.message ?? "请确认刷新后的报价后重新下单。",
+      });
+      return;
+    }
+    openBlockedDialog({
+      title: "暂不能创建订单",
+      detail: error instanceof Error ? error.message : "请稍后重试。",
+    });
   }
 };
 
@@ -372,9 +302,8 @@ watch(
     contentOutput.value = null;
     contentSummary.value = { price: null };
     priceDetailOpen.value = false;
-    closePreflightDialog();
+    closeOrderingDialog();
     createOrderMutation.reset();
-    evaluateMutation.reset();
   },
 );
 
@@ -392,37 +321,11 @@ const submitOrder = async (): Promise<void> => {
   const input = createOrderInput.value;
   if (!input) return;
 
-  try {
-    const evaluation = await evaluateMutation.mutateAsync(input);
-    const createOrderDecision = evaluation.actions.create_order;
-    if (!createOrderDecision.allowed) {
-      openBlockedDialog(createOrderDecision.problem);
-      return;
-    }
-    if (shouldConfirmPriceChange(evaluation)) {
-      openPriceChangeDialog(input, evaluation);
-      return;
-    }
-    await createOrderAfterPreflight(input);
-  } catch (error) {
-    openBlockedDialog({
-      title: "暂不能创建订单",
-      detail: error instanceof Error ? error.message : "请稍后重试。",
-    });
-  }
+  await createOrderFromQuoteDraft(input);
 };
 
-const handlePreflightDialogConfirm = async (): Promise<void> => {
-  if (preflightDialog.value.kind !== "price-change") {
-    closePreflightDialog();
-    return;
-  }
-  const input = preflightDialog.value.pendingInput;
-  if (!input) {
-    closePreflightDialog();
-    return;
-  }
-  await createOrderAfterPreflight(input);
+const handleOrderingDialogConfirm = async (): Promise<void> => {
+  closeOrderingDialog();
 };
 </script>
 
diff --git a/docs/20-product-tdd/ecommerce-contracts.md b/docs/20-product-tdd/ecommerce-contracts.md
index ee1617b6f..ef9079586 100644
--- a/docs/20-product-tdd/ecommerce-contracts.md
+++ b/docs/20-product-tdd/ecommerce-contracts.md
@@ -256,38 +256,45 @@ Pricing ownership:
 
 - `/order/new` receives transient `OrderingEntryPayload` from the entry surface:
   `{ source: { offerId }, offerDetail, prId?, bindings }`.
-- `source.offerId` is the commercial source reference. It is not enough by
-  itself to render Ordering Content.
+- `source.offerId` is the commercial source reference and the stable entry for
+  dynamic listing/quote issuance.
 - `offerDetail` is an Offer-owned ordering projection containing the product
   type, SPU/SKU ids, display facts, base SKU pricing models, cancellation
-  policy summaries, and Offer pricing policy needed to assemble an order draft.
+  policy summaries, and Offer pricing policy needed to render the initial
+  ordering surface. It is not the dynamic quote authority.
 - Ordering Content is selected from `offerDetail.productType`.
 - Bindings only prefill and lock client fields; they are not submitted as
   authoritative server input.
-- Ordering Content receives `{ source, offerDetail, bindings }` and emits:
-  command fields (`participants`, `items`, `productTypedExtraProperties`) plus
-  local display summary for the footer price and price detail.
+- Ordering Content receives `{ source, offerDetail, bindings }`, calls
+  `POST /api/commerce/offers/:offerId/listing` with product-specific listing
+  input, and emits quote-bound draft items plus local display summary for the
+  footer price and price detail.
 - Ordering Content does not receive `prId`, does not know Placement, and does
   not evaluate or submit orders.
-- Product-specific Ordering Content owns product-specific list/quote state. For
-  RideHailing, SKU quote options are loaded by Ordering Content through
-  `POST /api/commerce/ordering/ride-hailing/options`; changing the selected SKU
-  must not refresh the options list by itself.
-- Ordering Page creates evaluation and creation commands on submit:
-  `{ source: { offerId }, prId?, participants, items, productTypedExtraProperties }`.
-- This command is not coupled to Placement or `matchingContext`.
-- command `items` are a discriminated union:
-  - fixed items: `{ kind?: "FIXED", skuId, quantity }`
-  - choice-set items:
-    `{ kind: "CHOICE_SET", productType: "RIDE_HAILING", candidateSkuIds, quantity: 1 }`
-- backend resolves all SKU ids -> SPU and verifies they belong to the Offer.
-- Ordering evaluation uses the same command shape through
-  `POST /api/commerce/ordering/evaluate`. It is submit-time preflight only,
-  returns price total/range/detail and `actions.create_order` in the
-  action-preflight shape, and does not return product-specific option lists.
-- Ordering creation uses `POST /api/commerce/orders`. It re-reads
-  authoritative Offer/SPU/SKU truth and performs the transactional validations
-  again. Successful transport responses are a discriminated result:
+- Offer Listing is Offer-domain owned. It resolves active Offer/SPU/SKU truth,
+  applies product-specific availability masks, executes product-specific
+  quote/pricing logic, persists quote snapshots, and returns listed items with
+  product-type-independent `quoteId`s.
+- For RideHailing, listing uses route/departureAt to query provider vehicle
+  availability/estimates, joins provider results to local ACTIVE SKUs, and does
+  not return unavailable SKUs.
+- For Rental, listing issues fixed quotes for the available rental SKUs matching
+  the current listing facts.
+- Ordering Page owns create-order orchestration. Ordering Content must not call
+  create-order.
+- Create-order product item payload is quote-only and does not repeat
+  participants, riders, contact phone, route, departureAt, offer id, or SKU ids:
+  - fixed items: `{ kind: "FIXED", quoteId, quantity: 1 }`
+  - choice-set items: `{ kind: "CHOICE_SET", candidateQuoteIds, quantity: 1 }`
+- Quote owns quote validity. Order asks Quote to resolve quote-bound item facts;
+  Order does not hand-check quote existence, expiry, active Offer, active SKU,
+  product membership, or quote-set coherence.
+- Expired quotes are rejected from create-order with HTTP 409 problem details
+  code `ORDERING_QUOTE_EXPIRED`; the frontend refreshes listing and asks the
+  user to click create again. Quote-expired failures are not mixed into HTTP 200
+  results.
+- Ordering creation uses `POST /api/commerce/orders`. Successful transport
+  responses are a discriminated result:
   - `CREATED` navigates to Order Detail
   - `CANCELLED` carries a cancelled order id and user-displayable reason; the
     Ordering Page shows a failure dialog and does not navigate
@@ -304,8 +311,8 @@ Pricing ownership:
 The baseline Rental user-visible chain is:
 
 1. PR Page placement entry
-2. Offer Detail ordering
-3. Order creation
+2. Offer Detail ordering and Offer Listing quote issuance
+3. Order creation from fixed quote id
 4. Order Detail `待支付`
 5. same Order Detail `待确认预订`
 6. same Order Detail resolves to:
@@ -323,8 +330,8 @@ route.
 The baseline RideHailing user-visible chain is:
 
 1. PR Page placement entry
-2. Offer Detail quote assembly
-3. Order creation from quote snapshot
+2. Offer Detail ordering and route/time-based Offer Listing quote issuance
+3. Order creation from selected candidate quote ids
 4. Order Detail with quote basis and fulfillment state
 5. same Order Detail with final bill after trip finish
 6. same Order Detail with final payment/completed state
diff --git a/packages/fake-caocao-server/src/routes.ts b/packages/fake-caocao-server/src/routes.ts
index 83ae2ec3f..1fcfdb186 100644
--- a/packages/fake-caocao-server/src/routes.ts
+++ b/packages/fake-caocao-server/src/routes.ts
@@ -140,6 +140,13 @@ const readOptionalNumberParam = (
   return parsed;
 };
 
+const readRequiredBooleanParam = (params: Record<string, string>, keys: string[]): boolean => {
+  const raw = readFirstParam(params, keys)?.toLowerCase();
+  if (raw === "true" || raw === "1") return true;
+  if (raw === "false" || raw === "0") return false;
+  throw new Error(`Missing boolean fake Caocao parameter: ${keys[0]}`);
+};
+
 const estimatePayload = (estimate: FakeCaocaoVehicleEstimate): unknown => ({
   carType: estimate.carType,
   carTypeName: estimate.carTypeName,
@@ -324,6 +331,20 @@ export async function handleFakeCaocaoRequest(
       return;
     }
 
+    if (url.pathname === "/__fake_caocao/estimates/availability" && req.method === "POST") {
+      const params = await readParams(req, url);
+      const carType = readFirstParam(params, ["carType", "car_type"]);
+      if (!carType) {
+        throw new Error("Missing fake Caocao car type");
+      }
+      const estimate = input.state.setEstimateAvailability({
+        carType,
+        available: readRequiredBooleanParam(params, ["available"]),
+      });
+      sendJson(res, 200, { estimate, ok: true });
+      return;
+    }
+
     if (url.pathname === "/__fake_caocao/state" && req.method === "GET") {
       sendJson(res, 200, input.state.snapshot());
       return;
@@ -338,7 +359,11 @@ export async function handleFakeCaocaoRequest(
 
     if (url.pathname === "/common/estimatePriceWithDetail") {
       const carType = readFirstParam(params, ["car_type", "carType", "vehicle_type"]) ?? "EXPRESS";
-      const estimate = input.state.findEstimate(carType);
+      const estimate = input.state.findAvailableEstimate(carType);
+      if (!estimate) {
+        sendJson(res, 200, caocaoFailure(47001, "Fake Caocao vehicle unavailable"));
+        return;
+      }
       sendJson(res, 200, caocaoSuccess(estimatePayload(estimate)));
       return;
     }
diff --git a/packages/fake-caocao-server/src/state.ts b/packages/fake-caocao-server/src/state.ts
index ba6501dd9..e3cdc7392 100644
--- a/packages/fake-caocao-server/src/state.ts
+++ b/packages/fake-caocao-server/src/state.ts
@@ -41,6 +41,7 @@ export type FakeCaocaoFeeConfirmState = {
 export type FakeCaocaoStateSnapshot = {
   readonly failNextCreate: boolean;
   readonly estimates: readonly FakeCaocaoVehicleEstimate[];
+  readonly unavailableEstimateCarTypes: readonly string[];
   readonly orders: readonly FakeCaocaoOrderState[];
   readonly feeConfirms: readonly FakeCaocaoFeeConfirmState[];
 };
@@ -70,6 +71,7 @@ const defaultEstimates = (): FakeCaocaoVehicleEstimate[] => [
 export class FakeCaocaoState {
   private failNextCreate = false;
   private readonly estimates = new Map<string, FakeCaocaoVehicleEstimate>();
+  private readonly unavailableEstimateCarTypes = new Set<string>();
   private readonly orders = new Map<string, FakeCaocaoOrderState>();
   private readonly feeConfirms: FakeCaocaoFeeConfirmState[] = [];
 
@@ -80,6 +82,7 @@ export class FakeCaocaoState {
   reset(): void {
     this.failNextCreate = false;
     this.estimates.clear();
+    this.unavailableEstimateCarTypes.clear();
     for (const estimate of defaultEstimates()) {
       this.estimates.set(estimate.carType, estimate);
     }
@@ -93,6 +96,7 @@ export class FakeCaocaoState {
       failNextCreate: this.failNextCreate,
       feeConfirms: [...this.feeConfirms],
       orders: [...this.orders.values()],
+      unavailableEstimateCarTypes: [...this.unavailableEstimateCarTypes],
     };
   }
 
@@ -110,6 +114,31 @@ export class FakeCaocaoState {
     return this.estimates.get(carType) ?? this.estimates.get("EXPRESS") ?? defaultEstimates()[0]!;
   }
 
+  findAvailableEstimate(carType: string): FakeCaocaoVehicleEstimate | null {
+    const estimate = this.findEstimate(carType);
+    return this.unavailableEstimateCarTypes.has(estimate.carType) ? null : estimate;
+  }
+
+  setEstimateAvailability(input: {
+    carType: string;
+    available: boolean;
+  }): FakeCaocaoVehicleEstimate {
+    const carType = input.carType.trim();
+    if (!carType) {
+      throw new Error("Missing fake Caocao car type");
+    }
+    const current = this.estimates.get(carType);
+    if (!current) {
+      throw new Error(`Unknown fake Caocao car type: ${carType}`);
+    }
+    if (input.available) {
+      this.unavailableEstimateCarTypes.delete(carType);
+    } else {
+      this.unavailableEstimateCarTypes.add(carType);
+    }
+    return current;
+  }
+
   updateEstimate(input: {
     carType: string;
     estimateAmountFen: number;
diff --git a/tasks/ride-hailing-ui-fixes/change-log.md b/tasks/ride-hailing-ui-fixes/change-log.md
index 7d230dea2..b9b983ee3 100644
--- a/tasks/ride-hailing-ui-fixes/change-log.md
+++ b/tasks/ride-hailing-ui-fixes/change-log.md
@@ -258,3 +258,168 @@
   - `pnpm check:type:frontend`
   - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
   - `git diff --check`
+
+## Slice: Offer Listing And Quote Identity
+
+- Backend:
+  - added persisted product-type-independent `commerce_quotes`
+  - added `CommerceQuoteRepository`
+  - added Offer-owned `POST /api/commerce/offers/:offerId/listing`
+  - added typed RideHailing provider quote output for estimate adapters
+  - added Quote-domain quote-bound order item resolver
+  - made create-order product items quote-only:
+    `FIXED.quoteId` and `CHOICE_SET.candidateQuoteIds`
+  - moved participants, Rental registrants/contact, RideHailing riders/contact,
+    route, departureAt, price, SKU, and Offer facts into validated quote/listing
+    snapshots
+  - removed old backend `/ordering/evaluate`,
+    `/ordering/ride-hailing/options`, and unused `evaluateRideOptions`
+    surfaces
+  - quote expiry now returns HTTP 409 with code `ORDERING_QUOTE_EXPIRED`
+- Frontend:
+  - added `useOfferListing`
+  - migrated Rental Ordering Content to unified listing quotes
+  - migrated RideHailing Ordering Content to unified listing quotes keyed by
+    route + departureAt
+  - removed create-order preflight/evaluate orchestration from the Ordering
+    Page
+  - quote-expired create failure refreshes listing, preserves matching selected
+    SKU ids, and requires a second explicit create click
+  - added imported departure-time prompt with default "now" behavior and drawer
+    apply action
+  - updated the imported departure-time prompt to display the concrete imported
+    date/time value, not only a generic "has departure time" message
+  - added a Drawer one-tap "现在出发" action so users can switch back from an
+    imported/manual departure time to depart-now
+  - removed `data-testid` attributes from `PuDialog` calls that could not
+    inherit them and caused Vue warnings
+- Durable docs:
+  - updated `docs/20-product-tdd/ecommerce-contracts.md` for Offer Listing,
+    quote identity, quote-only create-order payloads, Quote-owned validity, and
+    quote-expired HTTP 409 behavior
+- Scenario:
+  - replaced the old RideHailing price-change preflight scenario with
+    quote-expired refresh/preserve-selection coverage
+  - updated Rental PR blocker scenarios to assert create-click dialog behavior
+    after unified listing quote issuance
+- Verification:
+  - `pnpm check:type:backend`
+  - `pnpm check:type:frontend`
+  - `pnpm check:type:frontend` after the imported departure-time display
+    follow-up
+  - `pnpm check:type:frontend` after the Drawer depart-now follow-up
+  - `pnpm check:format`
+  - `pnpm check:lint`
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+    after the imported departure-time display follow-up
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+    after the Drawer depart-now follow-up
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/rental-ordering.scenario.test.ts`
+- Non-blocking:
+  - `pnpm check:lint` reports the existing report-only naming audit finding for
+    `RideHailingOrderingContent`; this is intentionally retained because the
+    name matches the reviewed Ordering shell content role.
+
+## Slice: Offer Listing And Quote Identity Test Hardening
+
+- Fake Caocao:
+  - added a test-control estimate availability switch per car type
+  - unavailable estimate requests now return provider failure, letting the
+    Offer Listing resolver exercise its "omit unavailable SKU" behavior
+- RideHailing system scenario:
+  - added coverage that a provider-unavailable vehicle type is hidden from the
+    Ordering Page SKU list
+  - added coverage that quote-expired refresh preserves still-listed selected
+    SKUs but prunes selected SKUs that disappeared from the refreshed listing
+  - added coverage that all provider-unavailable vehicle types produce no
+    vehicle cards, a pending price, a disabled create action, and no provider
+    order
+- Backend Quote-domain scenario:
+  - added coverage that quote validity rejects inactive Offer and inactive SKU
+  - added coverage that `CHOICE_SET` candidate quotes must come from one
+    `listingSessionId`
+- Verification:
+  - `pnpm exec vitest run --project backend-scenario apps/backend/tests/commerce/offer-quote-resolution.scenario.test.ts`
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+  - `pnpm check:type:backend`
+  - `pnpm check:type:frontend`
+  - `pnpm --filter @partner-up-dev/fake-caocao-server typecheck`
+  - `pnpm exec biome check packages/fake-caocao-server/src/state.ts packages/fake-caocao-server/src/routes.ts tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts apps/backend/tests/commerce/offer-quote-resolution.scenario.test.ts`
+  - `git diff --check`
+
+## Slice: Ordering Error Feedback Simplification
+
+- Frontend:
+  - removed `OrderingFloatingNoticeLayer` from `OrderingFromPlacementPage`
+  - deleted the unused floating notice component
+  - removed the duplicate floating error-message state now that create-order
+    failures and quote-expired cases are explained by Dialog
+- Verification:
+  - `pnpm check:type:frontend`
+  - `pnpm exec biome check apps/frontend/src/pages/OrderingFromPlacementPage.vue`
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/rental-ordering.scenario.test.ts`
+  - `git diff --check`
+
+## Slice: RideHailing SKU List Loading Skeleton
+
+- Frontend:
+  - added `PuSkeleton` placeholders inside the RideHailing SKU list area
+  - skeletons follow the reviewed vehicle-card left/right layout shape
+  - skeletons show only for the initial listing load when no visible quote
+    options exist; background refetch keeps the existing cards visible
+- Verification:
+  - `pnpm check:type:frontend`
+  - `pnpm exec biome check apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue`
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+  - `git diff --check`
+
+## Slice: Offer Listing And Quote Identity Planning
+
+- Added standalone plan:
+  `tasks/ride-hailing-ui-fixes/offer-listing-quote-identity-plan.md`.
+- Captured accepted direction:
+  - public listing query uses `offerId`
+  - listing is Offer-owned because it includes commercial membership and price
+  - RideHailing dynamic availability depends on route and departure time
+  - RideHailing unavailable SKUs are omitted, not returned as
+    `selectable=false`
+  - Provider Port should return typed app-level quote shapes instead of
+    `unknown`
+  - listing returns quote identity and create-order submits quote identity
+  - expired quote replaces RideHailing price-diff preflight
+- Added plan review sections covering owner fit, main objections/risks, and
+  review questions before implementation.
+- Revised the plan after review:
+  - quote identity is now product-type-independent and commerce/order native,
+    not RideHailing-specific
+  - order and pricing should support quote ids natively
+  - create-order should derive Offer/SKU/route/departureAt/price from quote
+    snapshots instead of repeating them in the payload
+  - quote snapshots are persisted in the database
+  - expired quote is HTTP 409 problem details with a stable code
+  - the route shape is fixed as `POST /api/commerce/offers/:offerId/listing`
+- Re-reviewed the plan for maintainability, readability, and complexity:
+  - moved quote existence, expiry, active Offer/SKU, membership, and
+    listing-context coherence behind a Quote-domain validity resolver
+  - rejected `QUOTE_SET` as a command item kind and kept order item semantics as
+    `FIXED` / `CHOICE_SET` with quote ids as evidence fields
+  - renamed the working domain concept from `CommerceQuoteSnapshot` to
+    `OfferQuote`
+  - renamed `listingId` to `listingSessionId`
+  - clarified that generic quote JSON snapshots are persistence envelopes and
+    must be decoded before Order, Pricing, or RideHailing lifecycle consumes
+    them
+  - added topology and sequence reviews to the standalone plan
+- Revised the plan after additional review:
+  - corrected the frontend topology so Ordering Content emits quote-bound draft
+    state and Ordering Page / shell calls Create Order
+  - resolved quote-expired refresh behavior as preserving matching selected SKU
+    ids while still requiring a second click
+  - resolved create-order product item payload as quote-only, excluding
+    participants/riders/contact phone
+  - resolved Rental migration into the unified Offer Listing endpoint for this
+    slice
+  - added `quoteId` to fixed listed items and renamed RideHailing listed item
+    kind from `QUOTE` to `CHOICE_CANDIDATE`
diff --git a/tasks/ride-hailing-ui-fixes/control.md b/tasks/ride-hailing-ui-fixes/control.md
index 03445fcdb..fab0957f9 100644
--- a/tasks/ride-hailing-ui-fixes/control.md
+++ b/tasks/ride-hailing-ui-fixes/control.md
@@ -19,10 +19,12 @@ Hypothesis:
 ## Classification
 
 - Primary route: `Reality`
-- Active mode: `Execute` for approved implementation segments
+- Active mode: `Execute` for Offer Listing / quote identity implementation
+  verification and cleanup
 - Current collaboration state: choice-set backend/domain foundation, Ordering
-  UI primitive/control, and SKU Card layout remediation segments implemented;
-  pending human review / commit packaging
+  UI primitive/control, and SKU Card layout remediation segments committed;
+  current Offer Listing / quote identity slice is implemented locally and not
+  committed
 
 ## Inherited Effective Truth
 
@@ -74,8 +76,12 @@ Hypothesis:
 - `apps/frontend/src/domains/route/ui/RouteMap.vue`
 - `apps/frontend/src/shared/map/`
 - `apps/backend/src/entities/product-sku.ts`
+- `apps/backend/src/entities/offer.ts`
 - `apps/backend/src/domains/merchandising/`
+- `apps/backend/src/domains/ride-hailing/`
+- `apps/backend/src/domains/trade/`
 - `apps/backend/drizzle/`
+- `packages/fake-caocao-server/`
 - `tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
 
 ## Verification
@@ -87,6 +93,8 @@ Choose the narrowest sufficient proof per approved slice:
   interaction-specific
 - `pnpm vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
   when browser-visible workflow behavior or stable test IDs change
+- `pnpm exec vitest run --project system-scenario tests/scenario/commerce/rental-ordering.scenario.test.ts`
+  when Rental ordering is affected by unified listing / quote identity
 
 ## Current State
 
@@ -97,12 +105,33 @@ Choose the narrowest sufficient proof per approved slice:
   (`bbb47413`).
 - Committed slice: RideHailing preflight price-change scenario
   (`f25baf62`).
-- Implemented but not committed slice: Choice-set backend/domain foundation
-  segment 1.
-- Implemented but not committed slice: Choice-set Ordering UI primitive/control
-  segment 2.
-- Implemented but not committed slice: Choice-set SKU Card layout remediation
-  segment 3.
+- Committed slice: choice-set backend/domain foundation, Ordering UI
+  primitive/control, FloatPanel migration, and SKU Card layout remediation
+  (`42eb1a61`).
+- Uncommitted slice: Offer-owned Listing and product-type-independent quote
+  identity implemented:
+  - added `POST /api/commerce/offers/:offerId/listing`
+  - added persisted `commerce_quotes`
+  - added Quote-domain resolver for quote existence, expiry, active
+    Offer/SKU/SPU, Offer membership, item kind, and choice-set grouping
+  - made create-order product items quote-only:
+    `FIXED.quoteId` / `CHOICE_SET.candidateQuoteIds`
+  - removed frontend submit-time evaluate/preflight path and old
+    RideHailing options hook
+  - removed backend `/ordering/evaluate`,
+    `/ordering/ride-hailing/options`, and unused `evaluateRideOptions`
+    surfaces
+  - migrated Rental and RideHailing Ordering Content to unified Offer Listing
+  - RideHailing listing uses route + departureAt and stores provider quote
+    facts in quote snapshots
+  - quote expiry returns HTTP 409 `ORDERING_QUOTE_EXPIRED`; frontend refreshes
+    listing, preserves matching selected SKU ids, and requires another click
+  - create-order derives participants, riders, contact phone, route,
+    departureAt, SKU, Offer, and price facts from validated quote snapshots
+  - departureAt binding now prompts the user to keep "now" by default while
+    keeping a one-tap apply action in the drawer
+  - removed non-inherited `data-testid` attributes from `PuDialog` usage to
+    avoid the known Vue extraneous-attribute warning
 - Current target model now reflected in code:
   - parent-page evaluation runs only after submit/create-order click
   - blocking pre-flight results open an acknowledgement dialog
@@ -121,9 +150,13 @@ Choose the narrowest sufficient proof per approved slice:
     binding from the resolved choice-set item
   - RideHailing vehicle cards use `PuCard selectable` with a visual
     `PuCheckbox`
+  - RideHailing SKU list uses `PuSkeleton` placeholders for initial quote
+    listing load
   - RideHailing vehicle cards use the reviewed left/right layout:
     SKU name + info icon and preview on the meta side, estimated price + amount
     + checkbox on the right-aligned price side
+  - Ordering Page no longer renders the permanent floating error notice layer;
+    create-order failures are explained by Dialog only
   - RideHailing vehicle cards no longer render card-internal status/reason
     text; unavailable quoted options remain hidden at the list layer
   - RideHailing vehicle selection uses `usePuSelect` multiple and submits an
@@ -140,6 +173,8 @@ Choose the narrowest sufficient proof per approved slice:
     concepts
 - Implemented scenario coverage:
   - fake Caocao can mutate vehicle estimates through an admin-only test route
+  - fake Caocao can mark per-car-type estimates unavailable for dynamic
+    listing scenarios
   - RideHailing system scenario now covers submit-time price-change preflight
     and verifies provider order creation is blocked until the user confirms
   - RideHailing provider-create-failure scenario now verifies the failure dialog
@@ -148,10 +183,21 @@ Choose the narrowest sufficient proof per approved slice:
     foundation and provider binding in resolution
   - RideHailing system scenario now covers multi-candidate selection range and
     cheapest-first dispatch result
+  - RideHailing system scenario now covers provider-unavailable vehicle types
+    being omitted, quote refresh pruning vanished selected SKUs, and the
+    all-unavailable no-create state
+  - backend Quote-domain scenario now covers inactive Offer/SKU quote validity
+    and invalid `CHOICE_SET` listing-session mixing
 - Map diagnostic:
   - the gray RideHailing Ordering map observation was confirmed as a browser
     client issue; shared map code is not part of the active fix.
 - Verified:
+  - `pnpm check:type:backend`
+  - `pnpm check:type:frontend`
+  - `pnpm check:format`
+  - `pnpm check:lint`
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/rental-ordering.scenario.test.ts`
   - `pnpm exec biome check --write packages/fake-caocao-server/src/state.ts packages/fake-caocao-server/src/routes.ts packages/fake-caocao-server/src/state.test.ts packages/fake-caocao-server/src/server.test.ts tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
   - `pnpm --filter @partner-up-dev/fake-caocao-server typecheck`
   - `pnpm --filter @partner-up-dev/fake-caocao-server test`
@@ -167,14 +213,72 @@ Choose the narrowest sufficient proof per approved slice:
   - `pnpm exec biome lint apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue apps/frontend/src/domains/commerce/ui/ordering/RideHailingSkuCard.vue tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
   - `pnpm exec biome format --write apps/frontend/src/domains/commerce/ui/ordering/RideHailingSkuCard.vue apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue`
   - `pnpm exec biome lint apps/frontend/src/domains/commerce/ui/ordering/RideHailingSkuCard.vue apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue`
+  - `pnpm exec vitest run --project backend-scenario apps/backend/tests/commerce/offer-quote-resolution.scenario.test.ts`
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+  - `pnpm --filter @partner-up-dev/fake-caocao-server typecheck`
+  - `pnpm exec biome check packages/fake-caocao-server/src/state.ts packages/fake-caocao-server/src/routes.ts tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts apps/backend/tests/commerce/offer-quote-resolution.scenario.test.ts`
+  - `pnpm exec biome check apps/frontend/src/pages/OrderingFromPlacementPage.vue`
+  - `pnpm exec biome check apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue`
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/rental-ordering.scenario.test.ts`
   - `git diff --check`
 - Non-blocking note:
-  - `pnpm exec biome check ...` reports whole-file formatting differences in
-    already-touched large files; this slice did not auto-format those whole
-    files to avoid unrelated churn.
-- Active exploration:
-  - choice-set SKU / float-panel implementation is complete in three
-    uncommitted segments
+  - `pnpm check:lint` includes a report-only UI naming audit finding that
+    `RideHailingOrderingContent` uses the weak word `Content`; this is kept
+    because the human explicitly chose the name to align with the Ordering
+    shell header/content/footer concepts.
+- Historical exploration, superseded by the implemented Offer Listing / quote
+  identity slice where it mentions old evaluate/options endpoints:
+  - current slice: Offer-owned Product Listing and RideHailing quote identity
+  - target problem: which RideHailing SKUs are listed should depend on route and
+    departure time
+  - current frontend chain: `RideHailingOrderingContent` uses catalog
+    `offerDetail.spu.skuOptions` as fallback, then replaces it with
+    `useRideHailingQuoteOptions({ source.offerId, route })` results
+  - current backend chain: `/ordering/ride-hailing/options` accepts
+    `offerId + route`, then `evaluateRideOptions` enumerates all active
+    RideHailing catalog SKUs under the offer and calls provider estimate once
+    per local SKU/provider vehicle type
+  - current gap: `departureAt` already exists in bindings/create-order extras
+    but is not included in quote-options input, query key, endpoint schema, or
+    provider estimate params
+  - current model limitation: provider availability is represented by local
+    catalog SKUs whose estimates succeed/fail; there is no provider-owned
+    "available vehicle types for route/time" capability yet
+  - accepted plan direction: public listing query should use `offerId`, include
+    price, and be Offer-owned
+  - accepted plan direction: RideHailing listing returns only available local
+    ACTIVE SKUs, omitting unavailable SKUs instead of returning
+    `selectable=false`
+  - accepted plan direction: Provider Port should return typed app-level quote
+    shapes rather than raw `unknown`
+  - accepted plan direction: listing returns product-type-independent commerce
+    quote identity; order and pricing should natively support quote ids
+  - accepted plan direction: quote validity belongs to the Quote domain; Order
+    consumes validated quote facts instead of checking quote existence, expiry,
+    active Offer/SKU, membership, or listing context one by one
+  - accepted plan direction: create-order submits selected quote ids and derives
+    Offer/SKU/route/departureAt/price from validated Quote-domain results
+    instead of repeating those fields
+  - accepted plan direction: order item command kinds remain semantic
+    `FIXED` / `CHOICE_SET`; quote ids are carried as evidence fields such as
+    `quoteId` or `candidateQuoteIds`, not as a `QUOTE_SET` item kind
+  - accepted plan direction: quote snapshots are persisted to the database
+  - accepted plan direction: quote expiry returns HTTP 409 problem details with
+    a stable code, not an HTTP 200 result branch
+  - accepted plan direction: new listing route is
+    `POST /api/commerce/offers/:offerId/listing`
+  - accepted plan direction: Rental migrates to the same unified Offer Listing
+    endpoint in this slice
+  - accepted plan direction: Ordering Content owns product listing/selection
+    state and emits quote-bound draft output; Ordering Page / shell owns
+    submit orchestration and create-order mutation
+  - accepted plan direction: create-order product item payload is quote-only and
+    does not include participants, riders, or contact phone
+  - accepted plan direction: quote-expired refresh preserves selected SKU ids
+    when the refreshed listing still contains matching SKUs, then requires
+    another explicit create click
+  - active plan artifact:
+    `tasks/ride-hailing-ui-fixes/offer-listing-quote-identity-plan.md`
   - SKU should own full `ProductPresentation`; SKU preview images are not
     currently SKU-owned in the catalog contract
   - RideHailing vehicle selection should be multi-select
@@ -215,6 +319,5 @@ Choose the narrowest sufficient proof per approved slice:
     `tasks/ride-hailing-ui-fixes/sequence-diagram.md`
   - large-slice implementation planning and information collection are captured
     in `tasks/ride-hailing-ui-fixes/choice-set-sku-float-panel-plan.md`
-  - first backend/domain implementation segment is complete and uncommitted
-  - second Ordering UI primitive/control segment is complete and uncommitted
-  - third SKU Card layout remediation segment is complete and uncommitted
+  - choice-set SKU / float-panel implementation has been committed in
+    `42eb1a61`
diff --git a/tasks/ride-hailing-ui-fixes/discussion-log.md b/tasks/ride-hailing-ui-fixes/discussion-log.md
index cb26dcddf..4d4e18be3 100644
--- a/tasks/ride-hailing-ui-fixes/discussion-log.md
+++ b/tasks/ride-hailing-ui-fixes/discussion-log.md
@@ -488,3 +488,408 @@
 - Verification finding:
   formatting, directed lint, frontend typecheck, focused RideHailing system
   scenario, and `git diff --check` passed after Segment 3.
+
+## Exploration: RideHailing Dynamic SKU Loading
+
+- Human next-slice intent:
+  RideHailing SKU availability should become dynamic. Which RideHailing SKUs are
+  listed depends on route and departure time. The proposed direction is querying
+  the provider for available vehicle types based on those dynamic factors.
+- Human interaction requirement:
+  when Ordering entry includes a `departureAt` binding, `RideHailingOrderingContent`
+  should not silently adopt it. After mount it should open a dialog asking
+  whether to use the imported departure time. The default is no, meaning
+  "depart now" and submitted `departureAt: null`.
+- Offer detail source:
+  PR Page resolves a placement ordering entry through
+  `POST /api/placements/:instanceId/ordering-entry`, stores the returned
+  `OrderingEntryPayload` in `sessionStorage`, and navigates to `/order/new`.
+  The backend ordering-entry use case reads `placement.offerId`, resolves
+  bindings from matching context, then calls `getOrderingOfferDetail`.
+- Offer detail projection:
+  `getOrderingOfferDetail` reads the active Offer, then reads each active SPU
+  from `offer.spuIds`, filters by offer product type, reads active SKUs under
+  those SPUs, and returns SPU/SKU projection data: ids, status, sales/service
+  policy, presentation, SKU facts, SKU pricing model, cancellation summary, and
+  offer pricing/terms.
+- Current frontend chain:
+  `RideHailingOrderingContent` receives catalog `offerDetail` from the Ordering
+  entry. It builds `rideBaseOptions` by flattening all active catalog
+  `spu.skuOptions` from the offer. It then builds `quoteOptionsInput` with
+  `{ source.offerId, route }` and calls `useRideHailingQuoteOptions`.
+- Current query behavior:
+  `useRideHailingQuoteOptions` calls
+  `POST /api/commerce/ordering/ride-hailing/options` and keys the query by the
+  full input object. Because the input currently contains route but not
+  departure time, route changes can refetch options while departure-time changes
+  cannot.
+- Current list replacement behavior:
+  once the quote-options query returns any options, `rideQuoteOptions` uses the
+  provider/evaluated options instead of catalog fallback options. If quoted
+  options exist, `visibleRideQuoteOptions` hides non-selectable options.
+- Current backend chain:
+  `/ordering/ride-hailing/options` validates only `{ source.offerId, route }`
+  and calls `quoteRideHailingOrderingOptions({ offerId, route })`.
+- Current backend option source:
+  `quoteRideHailingOrderingOptions` resolves the offer, then
+  `evaluateRideOptions` enumerates every active RideHailing catalog SKU attached
+  to the offer. It filters only by optional `candidateSkuIds` for submit-time
+  paths; browsing/options mode has no candidate filter.
+- Current provider interaction:
+  each catalog SKU maps to provider facts
+  `{ rideHailingProviderInstanceId, providerVehicleTypeCode }`. The backend then
+  calls the provider estimate endpoint once per SKU with that SKU's
+  `car_type` plus origin/destination coordinates.
+- Selectability source:
+  `selectable=false` is not a provider response field in the current model. It
+  is backend-local interpretation. The backend returns `selectable=false` when
+  the mapped provider instance is missing/inactive or when the provider estimate
+  call throws/fails. Successful estimate parsing produces `selectable=true`.
+- Current departure-time gap:
+  `departureAt` already flows from PR `startAt` into Ordering bindings and into
+  create-order extras, but it is not part of quote-options input, provider
+  estimate params, query key, or options endpoint schema.
+- Current provider abstraction gap:
+  `RideHailingProviderPort.estimate` is a thin raw-params method. It has no
+  provider-owned "list available vehicle options for route/time" capability.
+  Dynamic availability currently emerges only by trying known catalog SKUs and
+  marking failed estimates as non-selectable.
+- Current provider quote / vehicle interfaces:
+  the app-level provider port has `estimate`, `createRide`, `queryOrderDetail`,
+  `cancelRide`, `queryCancelFee`, `confirmFee`, and callback parsing. There is
+  no typed "list available vehicle types" method. The Caocao adapter maps
+  `estimate` to `GET /common/estimatePriceWithDetail` and maps `createRide` to
+  `POST /common/orderCarV2`.
+- Current estimate IO:
+  input is raw provider params. The app currently sends `car_type`, `flat`,
+  `flng`, `tlat`, and `tlng`. Output is provider-raw `unknown`; Trade parses
+  price from `estimateAmountFen | estimatePriceFen | estimate_price | price`
+  and vehicle display name from `carTypeName | car_type_name`.
+- Current create-ride IO:
+  input is local `orderId` plus raw provider params. The app currently sends
+  `callback_url`, `car_type`, `flat`, `flng`, `tlat`, and `tlng`; the adapter
+  adds `ext_order_id`. Output is normalized to `{ providerOrderId,
+  externalOrderId, providerSnapshot }`.
+- Current fake-provider gap:
+  fake Caocao stores static estimates keyed by car type. Its estimate response
+  does not vary by route or departure time, and there is no dynamic availability
+  control beyond changing a car type's estimate amount or forcing next create
+  failure.
+- Options endpoint timing and return:
+  `/ordering/ride-hailing/options` is called by TanStack Query when
+  `RideHailingOrderingContent` has non-null `quoteOptionsInput`. The query key
+  includes the full input object, so it refetches when `offerId` or route input
+  changes. It currently returns `{ quoteExpiresAt, options }`, where each option
+  is a backend `RideQuoteOption` containing local SKU id/SPU id, provider and
+  vehicle labels/codes, selected/selectable flags, disabled reason, estimate
+  amount, quoted amount, and price explanations.
+- Initial objection / boundary:
+  provider-driven dynamic SKU discovery must still reconcile with catalog SKU
+  ownership. Orders, billing, and SKU presentation require local SKU identity,
+  so provider-returned vehicle types need a clean mapping to local SKUs rather
+  than becoming anonymous frontend options.
+
+## Model Direction: Dynamic RideHailing Product Listing
+
+- Human model direction:
+  the long-term clean model is to query the Provider for available vehicle
+  classes by SPU + route + departureAt, then merge provider availability/quote
+  facts with local RideHailing SKU catalog facts. A RideHailing SKU is listed
+  only when:
+  - provider estimate/availability returns that vehicle type for the dynamic
+    route/time
+  - the corresponding local SKU exists and is `ACTIVE`
+- Human correction:
+  do not continue returning `selectable=true/false` to the frontend for
+  unavailable RideHailing SKUs. Unavailable options should be absent from the
+  listing result.
+- Human objection:
+  Provider Port `estimate` returning `Promise<unknown>` is not a clean boundary.
+  The Provider Port should define a standard app-level estimate/listing shape,
+  and each adapter should translate provider-specific responses into that
+  shape.
+- Human routing concern:
+  `/ordering/ride-hailing/options` is semantically misnamed for the target
+  model. A more unified Product Listing query interface may be preferable. That
+  interface could route by product type internally or perform product-specific
+  pre/post processing, but the exact route boundary needs review against current
+  Product Catalog and Offer responsibilities.
+- Current Catalog/Offer boundary finding:
+  user-facing ordering has no standalone public Product Catalog route today.
+  Product/SPU/SKU/Offer authoring is admin-owned under admin commerce routes.
+  User-facing product truth enters ordering through Placement's
+  `OrderingEntryPayload.offerDetail`, and dynamic RideHailing option loading is
+  currently under Commerce Ordering.
+- Current Offer model finding:
+  Offer is a commercial wrapper over one or more SPUs of the same product type.
+  It owns product type, SPU ids, terms version, active window, and pricing
+  policy. SPU/SKU own catalog facts/presentation/base pricing/service policy.
+- Implication:
+  even if the provider query is conceptually "SPU + route + departureAt", the
+  public listing request likely still needs `offerId` or an Offer-scoped source
+  so pricing policy, terms, and offer membership remain authoritative. The
+  listing use case can then resolve offer -> SPUs -> product-specific listing
+  query.
+- Departure-time UX refinement:
+  imported `departureAt` binding should remain available in the departure-time
+  drawer as a one-tap apply action even when the initial dialog default keeps
+  `departureAt` null / "depart now".
+
+## Model Direction: Offer-Owned Product Listing Query
+
+- Human decision:
+  the unified listing query should use `offerId` as its public entrypoint. This
+  means the query is not only "list product catalog"; it should include listing
+  prices because Offer owns commercial pricing policy and membership.
+- Human sketch:
+  the conceptual pipeline is:
+  - `offerId -> SPU -> SKUs`
+  - product-type-specific mask logic takes local SKUs plus product-specific
+    context, such as RideHailing route/departureAt, and returns listed SKUs
+  - pricing is resolved behind a product-type-specific path
+- Modeling concern:
+  for RideHailing, provider availability/mask and provider quote are the same
+  provider interaction. Splitting mask and price into two physical calls would
+  be redundant.
+- Working model:
+  keep mask and pricing as conceptual phases, but implement them through a
+  product-specific listing resolver that may do both in one pass. For
+  RideHailing, `Offer + SPUs + route + departureAt` calls the Provider once per
+  mapped vehicle type or through a future provider listing method, joins
+  returned provider vehicle quotes to local ACTIVE SKUs, applies Offer pricing,
+  and returns priced listed SKUs. This satisfies the target without forcing two
+  provider calls.
+- Ownership direction:
+  the unified query is Offer-owned. Offer resolves the commercial context,
+  active window, SPU membership, terms, and pricing policy, then dispatches to
+  product-type-specific listing logic for dynamic availability and base quote
+  facts.
+- Boundary reminder:
+  the listing result is display/draft truth. Under the later quote-identity
+  model, create-order should still re-read Offer/SPU/SKU truth, but price
+  freshness is enforced by validating submitted quote identity rather than
+  silently re-quoting dynamic provider prices.
+
+## Model Direction: Quote Identity Instead Of Price-Diff Preflight
+
+- Human correction:
+  a better stale-price model is for Offer Listing to return quote/estimate
+  identity, not only display prices. Create-order should submit the selected
+  quote/estimate ids. If the quote is expired, backend should reject with a
+  quote-expired result; frontend refreshes listing and the user explicitly
+  clicks order again.
+- Reasoning:
+  this is cleaner than comparing frontend displayed price with submit-time
+  evaluation price. The quote identity becomes the authoritative draft-price
+  boundary, and expiration/change handling aligns with RideHailing provider
+  quote semantics.
+- Consequence:
+  the current submit-time price-change preflight dialog becomes unnecessary for
+  RideHailing. Price freshness is enforced by quote identity validity rather
+  than price comparison.
+- Open modeling detail:
+  if a provider returns a durable quote token/estimate id, the listing resolver
+  should preserve it and pass it through dispatch/create when required. If a
+  provider only returns raw estimate data, the app can mint a local quote id
+  bound to offer, route, departureAt, SKU/provider vehicle, provider snapshot,
+  price, and `expiresAt`.
+- Choice-set consequence:
+  create-order should carry product-type-independent quote identity for the
+  selected candidate set. The preferred payload keeps order item semantics as
+  `FIXED.quoteId` or `CHOICE_SET.candidateQuoteIds`; backend asks the Quote
+  domain to resolve Offer, SKU, route/departureAt, price, quote ownership, SKU
+  activity, expiry, and quote-set coherence before dispatch.
+- Remaining non-price validation:
+  PR/order lifecycle blockers may still be validated at create-order time, but
+  they do not require a separate price preflight endpoint. They can return
+  ordinary blocked/create-failed dialog states.
+
+## Review: Commerce-Native Quote Identity Corrections
+
+- Human correction:
+  quote id should be a higher-level commerce/order concept, not RideHailing
+  specific. Order and pricing should natively support quote id.
+- Human correction:
+  create-order should avoid repeating quote-owned data such as route,
+  departureAt, SKU ids, and Offer. These should resolve from submitted quote
+  identity.
+- Boundary note:
+  quote identity should own commercial/listing facts: Offer, SKU, product
+  context such as route/departureAt, provider quote snapshot, and price.
+  Customer/fulfillment facts such as participants, riders, and contact phone
+  still need explicit ownership and should not be casually hidden inside quote.
+- Human decision:
+  quote-expired should be an HTTP 409 problem detail with a stable code, not an
+  HTTP 200 `CreateOrderResult` branch.
+- Human decision:
+  quote snapshots should be persisted to the database.
+- Human decision:
+  the new listing route should be
+  `POST /api/commerce/offers/:offerId/listing`.
+- Artifact update:
+  revised `offer-listing-quote-identity-plan.md` so quote identity is
+  product-type-independent, quote snapshots are DB-backed, create-order is
+  quote-bound, expired quote uses HTTP 409, and the route shape is fixed.
+
+## Review: Quote Validity Ownership And Plan Topology
+
+- Human correction:
+  quote validity checks such as quote existence, not expired, issuing Offer
+  still active, referenced SKU still active, SKU membership, and listing-context
+  coherence should be owned and encapsulated by the Quote domain. Order should
+  not perform these checks one by one.
+- Naming finding:
+  `QUOTE_SET` is a poor command item kind because it names the freshness
+  mechanism instead of the order item semantics. The cleaner shape keeps
+  `FIXED` and `CHOICE_SET` as item kinds, and carries quote identity as
+  `quoteId` or `candidateQuoteIds`.
+- Naming finding:
+  `CommerceQuoteSnapshot` is too persistence-shaped for the domain concept.
+  The working domain name is `OfferQuote`; the database may persist snapshots,
+  but the application should treat quote as an object that can be resolved and
+  validated.
+- Naming finding:
+  `listingId` is ambiguous. `listingSessionId` better communicates that it
+  groups one Offer Listing response/context.
+- Boundary finding:
+  broad `unknown` quote snapshots are acceptable as database JSON envelopes,
+  but they must be decoded behind the Quote boundary before Order, Pricing, or
+  RideHailing lifecycle consumes them.
+- Topology finding:
+  Offer Listing mints quotes by joining Offer, Product Catalog,
+  product-specific resolver, Provider, and pricing. Create Order consumes
+  validated Quote-domain results and turns them into order items / lifecycle
+  rows. Bill reads resolved order/fulfillment facts and should not decide quote
+  validity.
+- Artifact update:
+  revised `offer-listing-quote-identity-plan.md` with a Quote Domain topology
+  diagram, updated sequence diagram, Quote validity ownership, command naming
+  correction, and naming/boundary review sections.
+
+## Review: Ordering Shell Boundary And Resolved Listing Decisions
+
+- Human correction:
+  `OrderingContent` should not call Create Order. That responsibility belongs
+  to the Ordering Page / shell submit flow. Product-specific Ordering Content
+  owns listing, selection, and price-summary output, then emits a quote-bound
+  draft to the shell.
+- Human decision:
+  when quote expires after create click, frontend refreshes listing and
+  preserves selected SKU ids when the refreshed listing still contains matching
+  SKUs. The user still needs a second explicit create click.
+- Human decision:
+  create-order quote-only payload should not include participants, riders, or
+  contact phone. If those facts remain necessary, they need Quote/listing
+  session ownership or another explicit pre-create owner rather than returning
+  to create-order input.
+- Human decision:
+  Rental should migrate to the unified Offer Listing endpoint in this slice,
+  using a thin fixed-item resolver if no dynamic Rental mask is needed.
+- Naming refinement:
+  fixed listed items also carry quote ids, so `OfferListedItem.kind: "QUOTE"`
+  is misleading. The plan now uses `FIXED` and `CHOICE_CANDIDATE`.
+- Artifact update:
+  revised `offer-listing-quote-identity-plan.md` sequence/topology to route
+  create-order through Ordering Page / shell, resolved the Rental and
+  quote-expiry selection questions, and tightened the quote-only create-order
+  payload boundary.
+
+## Implementation: Offer Listing And Quote Identity
+
+- Impact Handshake accepted with explicit `开始`.
+- Backend implementation:
+  - Offer Listing now owns quote issuance through
+    `POST /api/commerce/offers/:offerId/listing`.
+  - Quote identity is persisted in `commerce_quotes` and is not RideHailing
+    specific.
+  - Quote validity is centralized in a Quote-domain resolver. It validates
+    existence, expiry, active Offer/SKU/SPU, Offer membership, item kind, and
+    choice-set grouping before Order sees product facts.
+  - Create-order product item payloads are quote-only:
+    `FIXED.quoteId` or `CHOICE_SET.candidateQuoteIds`.
+  - Create-order derives participants, Rental registrants/contact, RideHailing
+    riders/contact, route, departureAt, price, Offer, and SKU facts from
+    validated quote/listing snapshots.
+  - Old backend submit-time evaluation and RideHailing options surfaces were
+    removed rather than kept as parallel legacy API semantics.
+- Frontend implementation:
+  - Ordering Content owns unified listing queries and emits quote-bound draft
+    output plus footer summary.
+  - Ordering Page / shell owns create-order mutation and no longer performs
+    price preflight/evaluate.
+  - Quote-expired create failure refreshes listing, preserves matching
+    selected SKU ids, and requires another explicit create click.
+  - Imported `departureAt` binding now opens a prompt that defaults to "now";
+    the drawer keeps a one-tap action to apply the imported time.
+- Human follow-up:
+  the imported departure prompt must show the concrete imported departure
+  date/time value so the user can decide whether to use it. The prompt now
+  displays the formatted imported timestamp in the dialog description.
+- Human follow-up:
+  the departure-time Drawer should also provide a one-tap way to switch back to
+  "现在出发". The Drawer now has a `现在出发` action whenever a concrete
+  departure time is active, clearing `departureAt` back to null.
+- Test/diagnostic finding:
+  `PuDialog` does not inherit arbitrary `data-testid` attributes because of
+  its rendered root/teleport shape. This slice removed those attributes from
+  affected dialogs and updated scenarios to assert via dialog role/text.
+- Verification result:
+  RideHailing and Rental system scenarios pass with the unified listing and
+  quote-only create-order path.
+- Non-blocking lint note:
+  UI naming audit still reports `RideHailingOrderingContent` because it treats
+  "Content" as weak. The name is intentionally retained because it was reviewed
+  as the correct shell concept alongside header and footer.
+
+## Review: Offer Listing And Quote Identity Test Gaps
+
+- Human question:
+  whether tests cover the case where provider estimate reports some
+  RideHailing vehicle types unavailable and the Ordering Page omits those SKUs.
+- Finding:
+  the production listing path already catches failed provider estimates and
+  omits those local SKU rows, but fake Caocao only supported price mutation and
+  could not express per-vehicle estimate unavailability.
+- Test-gap review:
+  the important missing branches were:
+  - partial provider unavailability should hide the unavailable vehicle type
+  - quote-expired refresh should preserve matching selected SKU ids but prune
+    selected SKUs that disappeared from the refreshed listing
+  - all provider-unavailable vehicle types should leave no vehicle cards and
+    disable create
+  - quote validity should reject inactive Offer/SKU behind the Quote boundary
+  - `CHOICE_SET` candidate quote ids must not mix different listing sessions
+- Implementation decision:
+  add fake Caocao estimate availability controls rather than reintroducing a
+  frontend `selectable=false` concept. This keeps unavailable RideHailing SKUs
+  absent from the listing result, matching the accepted model.
+- Verification result:
+  the new backend quote-domain scenario and the expanded RideHailing system
+  scenario both pass.
+
+## Review: Ordering Error Feedback Channel
+
+- Human correction:
+  `ordering-floating-notice-layer` should be removed because it permanently
+  overlays other UI information while Dialog already explains create-order
+  failure reasons.
+- Finding:
+  the floating notice component was only used by `OrderingFromPlacementPage` as
+  a duplicate display of `createOrderMutation.error`.
+- Decision:
+  keep create-order feedback single-channel through Dialog. Quote expired,
+  provider create failure, PR blocker, and generic create-order errors continue
+  to open an acknowledgement Dialog, without a persistent floating notice.
+
+## Review: RideHailing SKU List Loading State
+
+- Human correction:
+  RideHailing SKU list should show a loading skeleton with `PuSkeleton`.
+- Design decision:
+  the loading state belongs inside the SKU list region, not over the whole
+  Ordering Page. The map and bottom control row should remain stable while
+  quote options load.
+- Interaction decision:
+  show skeletons only during initial listing load when there are no visible
+  quote options. During background refetch, keep the existing cards visible to
+  avoid selection/list flicker.
diff --git a/tasks/ride-hailing-ui-fixes/offer-listing-quote-identity-plan.md b/tasks/ride-hailing-ui-fixes/offer-listing-quote-identity-plan.md
new file mode 100644
index 000000000..221ee358a
--- /dev/null
+++ b/tasks/ride-hailing-ui-fixes/offer-listing-quote-identity-plan.md
@@ -0,0 +1,748 @@
+# Offer Listing And Quote Identity Plan
+
+## Purpose
+
+This plan covers the large slice that replaces the current RideHailing
+`/ordering/ride-hailing/options` model with an Offer-owned listing query and a
+quote-identity freshness boundary.
+
+The slice combines:
+
+- Offer-owned product listing query
+- RideHailing dynamic SKU availability by route and departure time
+- typed RideHailing provider quote / estimate port outputs
+- removal of frontend `selectable=false` option semantics
+- quote / estimate identity returned by listing and submitted to create-order
+- commerce-native quote identity and create-order quote-expiry handling
+- removal of RideHailing price-diff preflight
+- departure-time binding confirmation UX
+
+This is a review artifact. It is not an implementation start signal.
+
+## Classification
+
+- Primary input route: `Intent`
+- Current mode: `Solidify` with targeted review
+- Implementation mode: blocked until plan review, Impact Handshake, and
+  explicit `开始`
+
+The slice changes API contracts, backend domain boundaries, frontend ordering
+state, scenario tests, and durable ecommerce contract text. It should not be
+implemented as a UI-only cleanup.
+
+## Accepted Direction
+
+- Public listing query should use `offerId` as its entrypoint.
+- The unified listing query is Offer-owned, because Offer owns commercial
+  membership, active window, terms version, and pricing policy.
+- The query should return priced listed products, not only catalog products.
+- Product-specific mask and pricing can remain conceptual phases; they do not
+  need to be separate physical calls.
+- RideHailing listing can do provider availability/quote and pricing in one
+  product-specific resolver pass.
+- RideHailing listed SKUs are the intersection of:
+  - provider returned availability/estimate for route + departureAt
+  - local SKU exists, belongs to an Offer SPU, and is `ACTIVE`
+- Do not return unavailable RideHailing SKUs with `selectable=false`; omit them
+  from listing results.
+- Provider Port should expose standard app-level quote / estimate shapes. Raw
+  provider response parsing belongs inside adapters, not in Trade use cases.
+- Listing should return product-type-independent quote identity.
+- Order, create-order commands, and pricing should natively understand quote
+  identity instead of treating quote ids as RideHailing-only fields.
+- Create-order should submit selected quote ids rather than repeating quote-owned
+  context such as `offerId`, route, departureAt, SKU ids, or price.
+- Quote validity is owned and encapsulated by the Quote domain. Create-order
+  must ask Quote to resolve valid quote-bound order facts; it should not
+  hand-check quote existence, expiry, active Offer, active SKU, membership, or
+  listing-context consistency one condition at a time.
+- Order item kinds should keep describing fulfillment semantics, such as `FIXED`
+  or `CHOICE_SET`. Quote ids are freshness/authorization evidence carried by
+  those commands; a command kind named `QUOTE_SET` is too mechanism-oriented and
+  hides whether the user is buying one fixed SKU or authorizing a candidate set.
+- Quote expiry should replace RideHailing price-diff preflight. If a quote is
+  expired, create-order returns HTTP 409 problem details with a stable
+  quote-expired code; frontend refreshes the listing and the user clicks order
+  again.
+- PR/order lifecycle blockers may still be validated at create-order time, but
+  they should not require a separate RideHailing price preflight endpoint.
+- Persist quotes to Postgres.
+- If a provider returns a durable quote token, preserve it. If not, the app can
+  mint a local quote id bound to provider snapshot, product type, local SKU,
+  Offer, route/departureAt or other product context, price, and expiry.
+- Imported `departureAt` binding should not be silently applied. The initial
+  default remains "depart now" with `departureAt: null`.
+- The imported departure time should remain available in the departure-time
+  drawer as a one-tap apply action.
+
+## Current Facts
+
+### Existing Offer Detail Entry
+
+- PR Page calls `POST /api/placements/:instanceId/ordering-entry`, stores the
+  returned `OrderingEntryPayload` in `sessionStorage`, and routes to
+  `/order/new`.
+- The placement ordering-entry use case resolves placement bindings and calls
+  `getOrderingOfferDetail({ offerId: placement.offerId })`.
+- `getOrderingOfferDetail` reads the active Offer, active SPUs under the Offer,
+  and active SKUs under those SPUs.
+- `offerDetail` is currently an Offer-owned ordering projection containing
+  catalog facts plus Offer pricing policy and terms.
+
+### Existing RideHailing Listing Path
+
+- `RideHailingOrderingContent` builds catalog fallback options from
+  `offerDetail.spu.skuOptions`.
+- It then calls `useRideHailingQuoteOptions({ source: { offerId }, route })`.
+- `useRideHailingQuoteOptions` calls
+  `POST /api/commerce/ordering/ride-hailing/options`.
+- The TanStack query key includes the full input object, so route changes can
+  refetch options.
+- `departureAt` is not part of the input, query key, endpoint schema, or
+  provider params.
+- The backend endpoint accepts only `{ source.offerId, route }`.
+- The backend resolves the Offer, enumerates all active local RideHailing SKUs
+  under the Offer, then calls provider estimate once per SKU/provider vehicle
+  type.
+- `selectable=false` is backend-local interpretation when provider instance is
+  missing/inactive or estimate fails. It is not a provider response field.
+
+### Existing Provider Port
+
+- `RideHailingProviderPort.estimate` returns `Promise<unknown>`.
+- Caocao adapter maps it to `GET /common/estimatePriceWithDetail`.
+- Trade currently parses estimate amount and vehicle name from provider raw
+  fields.
+- There is no standard app-level provider quote type.
+- There is no provider-owned "list available vehicle types" method.
+- Fake Caocao stores static estimates keyed by car type and does not vary by
+  route or departure time.
+
+### Existing Preflight
+
+- Current Ordering Page runs submit-time evaluation before create-order.
+- RideHailing price-change preflight compares displayed candidate range with
+  evaluated candidate range.
+- This is a useful guard in the current implementation, but it becomes the wrong
+  stale-price boundary once quote identity is introduced.
+
+## Target Model
+
+### Offer Listing Query
+
+Preferred public shape:
+
+```text
+POST /api/commerce/offers/:offerId/listing
+```
+
+Sketch:
+
+```ts
+type OfferListingInput =
+  | {
+      productType: "RIDE_HAILING";
+      route: RideHailingRouteSnapshot;
+      departureAt?: string | null;
+    }
+  | {
+      productType: "RENTAL";
+      serviceStartAt?: string | null;
+      serviceEndAt?: string | null;
+    };
+```
+
+Rental should migrate to this unified listing endpoint in this slice. Its
+resolver can stay thin if Rental has no dynamic mask logic yet, but the frontend
+should stop treating Rental as outside the listing model.
+
+Target response sketch:
+
+```ts
+type OfferListingResult = {
+  offerId: number;
+  productType: ProductType;
+  listingSessionId: string;
+  expiresAt: string | null;
+  items: OfferListedItem[];
+};
+
+type OfferListedItem =
+  | {
+      kind: "FIXED";
+      productType: "RENTAL";
+      skuId: number;
+      quoteId: string;
+      displayName: string;
+      presentation: ProductPresentation;
+      price: ListingPriceSnapshot;
+    }
+  | {
+      kind: "CHOICE_CANDIDATE";
+      productType: "RIDE_HAILING";
+      skuId: number;
+      quoteId: string;
+      displayName: string;
+      providerName: string;
+      providerVehicleTypeCode: string;
+      providerVehicleTypeName: string;
+      presentation: ProductPresentation;
+      estimateSnapshot: RideHailingProviderEstimateSnapshot;
+      price: ListingPriceSnapshot;
+    };
+```
+
+Rules:
+
+- Offer resolver validates Offer existence, status, active window, product type,
+  and SPU membership.
+- Product-specific listing resolver receives Offer, active SPUs/SKUs, and
+  product context.
+- Product-specific resolver returns only listed items.
+- Pricing is applied inside the listing use case so the frontend footer and
+  cards read listing price directly.
+- Listing result is display/draft truth. Create-order still validates quote
+  identity and product truth.
+
+### RideHailing Provider Quote Shape
+
+Provider Port should stop returning raw `unknown` for estimates.
+
+Sketch:
+
+```ts
+type RideHailingProviderEstimateRequest = {
+  route: RideHailingRouteSnapshot;
+  departureAt: string | null;
+  providerVehicleTypeCode?: string | null;
+};
+
+type RideHailingProviderVehicleQuote = {
+  providerVehicleTypeCode: string;
+  providerVehicleTypeName: string;
+  estimateAmountFen: number;
+  distanceMeters?: number | null;
+  durationSeconds?: number | null;
+  providerQuoteId?: string | null;
+  providerQuoteExpiresAt?: string | null;
+  providerSnapshot: unknown;
+};
+```
+
+Provider capabilities can be modeled in two tiers:
+
+- known-vehicle estimate: quote one provider vehicle type
+- vehicle listing: return all available vehicle quotes for route/time
+
+Caocao can initially implement known-vehicle estimate if that matches the
+available fake/current API. A future provider can implement vehicle listing
+without changing the Offer Listing API.
+
+### Commerce Quote Identity
+
+Introduce product-type-independent quote identity for Offer Listing and
+create-order.
+
+Decision:
+
+- persist quote snapshots in Postgres
+- quote id is server-minted
+- quote identity is not RideHailing-specific
+- order, pricing, and create-order should understand quote ids natively
+- quote validity is a Quote-domain concept, not a scattered set of Order use
+  case checks
+
+Quote domain object sketch:
+
+```ts
+type OfferQuote = {
+  quoteId: string;
+  listingSessionId: string;
+  offerId: number;
+  productType: ProductType;
+  spuId: number;
+  skuId: number;
+  quantity: number;
+  listingContextSnapshot: unknown;
+  fulfillmentQuoteSnapshot: unknown;
+  pricingSnapshot: ListingPriceSnapshot;
+  expiresAt: string | null;
+  createdAt: string;
+};
+```
+
+For RideHailing, `listingContextSnapshot` contains route and departureAt. The
+RideHailing `fulfillmentQuoteSnapshot` contains provider instance id, provider
+vehicle type code/name, provider quote token if any, provider raw snapshot, and
+provider estimate facts.
+
+The `unknown` fields above are persistence-level JSON envelopes. The application
+boundary should decode them into product-type-specific quote facts before Order,
+Pricing, or RideHailing lifecycle code consumes them.
+
+Quote domain validates and resolves:
+
+- quote id exists
+- quote is not expired
+- issuing Offer is still active enough for order creation
+- referenced SKU still exists, is `ACTIVE`, and still belongs to the issuing
+  Offer/SPU membership
+- candidate quote ids form a compatible quote group for the requested order item
+  shape, such as one fixed quote or one choice-set candidate group
+- quote listing context is sufficient to create the product-specific order
+  branch without repeating route/departureAt/SKU/offer in the create-order
+  payload
+
+Create-order consumes a resolved Quote-domain value, for example:
+
+```ts
+type ValidatedQuoteItem =
+  | {
+      kind: "FIXED";
+      quote: OfferQuote;
+    }
+  | {
+      kind: "CHOICE_SET";
+      candidateQuotes: OfferQuote[];
+      listingSessionId: string;
+    };
+```
+
+This keeps Order responsible for order lifecycle and item persistence, while
+Quote remains responsible for quote freshness, commercial eligibility, and quote
+set coherence.
+
+Expired quote result:
+
+- return HTTP 409 problem details
+- include a stable code, for example `ORDERING_QUOTE_EXPIRED`
+- do not mix quote-expired failure into HTTP 200 create-order results
+
+### Quote-Based Create Command
+
+Current command:
+
+```ts
+{
+  kind: "CHOICE_SET";
+  productType: "RIDE_HAILING";
+  candidateSkuIds: number[];
+  quantity: 1;
+}
+```
+
+Target sketch:
+
+```ts
+type QuoteBoundCreateOrderItem =
+  | {
+      kind: "FIXED";
+      quoteId: string;
+      quantity: number;
+    }
+  | {
+      kind: "CHOICE_SET";
+      candidateQuoteIds: string[];
+      quantity: 1;
+    };
+```
+
+The create-order payload should not repeat product/source commercial or
+fulfillment facts if selected quote ids resolve them. That includes `offerId`,
+route, departureAt, SKU ids, price, participants, riders, and contact phone.
+If a product still needs those non-price facts, they must be captured by the
+listing/quote session or another explicit pre-create owner before create-order,
+not reintroduced into the create-order command body.
+
+The persisted order item should continue storing candidate SKU quote snapshots,
+but the source of those snapshots becomes validated quote identity rather than
+submit-time re-quote.
+
+Dispatch still resolves cheapest-first unless the policy changes.
+
+Create-order should become quote-only for product items. Any remaining
+non-product attachment, such as PR attachment, needs its own owner and should
+not be smuggled into product item input.
+
+### Frontend Ordering Content
+
+RideHailingOrderingContent should:
+
+- call the Offer Listing query instead of `/ordering/ride-hailing/options`
+- include route and `editableDepartureAt` in listing input
+- default imported `departureAt` binding to not applied
+- open a dialog after mount when imported departure time exists
+- let the drawer one-tap apply the imported departure time later
+- render listed items only
+- store selection by quote id, while rendering SKU facts from listed items
+- emit quote ids to the Ordering Page / shell through the fulfillment-shaped
+  draft item:
+  `FIXED.quoteId` for fixed products, or `CHOICE_SET.candidateQuoteIds` for
+  RideHailing candidate sets
+- derive footer price range from listing item prices
+- on quote-expired create result, refresh listing, preserve selected SKU ids
+  when the refreshed listing still contains matching SKUs, and show a dialog
+  requiring the user to click order again
+
+### Ordering Page Preflight
+
+RideHailing price-diff preflight should be removed once quote identity is live.
+
+Target:
+
+- Rental also uses the unified Offer Listing endpoint in this slice.
+- RideHailing bypasses price-change preflight and relies on create-order quote
+  validation.
+- Common PR/order blockers remain create-order validations. If the UI still
+  wants early disabled state, that should be a separate non-price eligibility
+  query, not a dynamic price preflight.
+
+## Suggested Sequence
+
+```mermaid
+sequenceDiagram
+  participant Content as "RideHailingOrderingContent"
+  participant Page as "Ordering Page Shell"
+  participant Offer as "Offer Listing API"
+  participant Product as "RideHailing Listing Resolver"
+  participant Provider as "RideHailing Provider"
+  participant Quote as "Quote Domain"
+  participant Order as "Create Order"
+
+  Content->>Offer: query listing(offerId, route, departureAt)
+  Offer->>Product: resolve Offer + active SPUs/SKUs + context
+  Product->>Provider: estimate/list vehicle quotes(route, departureAt, vehicle mappings)
+  Provider-->>Product: provider vehicle quotes
+  Product->>Product: join quotes to ACTIVE local SKUs
+  Product->>Product: apply Offer pricing
+  Product->>Quote: persist quote snapshots
+  Product-->>Offer: priced listed SKUs + quote ids
+  Offer-->>Content: listingSessionId, expiresAt, items
+  Content-->>Page: quote-bound draft item + price summary
+  Page->>Order: create fixed/choice-set item with selected quote ids
+  Order->>Quote: resolve valid quote-bound item
+  Quote->>Quote: enforce expiry + Offer/SKU eligibility + quote-set coherence
+  alt quote valid
+    Quote-->>Order: ValidatedQuoteItem
+    Order->>Provider: create ride using quote/provider token if available
+    Order-->>Page: CREATED/CANCELLED
+  else quote expired
+    Order-->>Page: HTTP 409 ORDERING_QUOTE_EXPIRED
+    Page->>Content: request listing refresh, preserve matching selected SKUs
+    Content->>Offer: refresh listing
+  end
+```
+
+## Topology Review
+
+The intended dependency direction is:
+
+```mermaid
+flowchart TD
+  Content["Ordering Content"] --> Listing["Offer Listing Use Case"]
+  Listing --> Offer["Offer Domain"]
+  Listing --> Catalog["Product Catalog"]
+  Listing --> ProductResolver["Product-Specific Listing Resolver"]
+  ProductResolver --> Provider["Provider Adapter / Port"]
+  ProductResolver --> Quote["Quote Domain"]
+  Quote --> QuoteRepo["commerce_quotes Repository"]
+
+  Content --> Page["Ordering Page Shell"]
+  Page --> CreateOrder["Create Order Use Case"]
+  CreateOrder --> Quote
+  Quote --> Offer
+  Quote --> Catalog
+  CreateOrder --> TradeOrder["Trade Order Aggregate"]
+  CreateOrder --> RideLifecycle["RideHailing Order Lifecycle"]
+  RideLifecycle --> Provider
+  RideLifecycle --> Bill["Bill / Settlement"]
+```
+
+Review claims:
+
+- Offer Listing may depend on Offer, Catalog, product-specific resolvers,
+  Provider, and Quote because it mints priced listed items.
+- Ordering Content owns product-specific listing state, selection state, and
+  price summary output. It should not call Create Order directly.
+- Ordering Page / shell owns submit orchestration and calls Create Order using
+  the quote-bound draft emitted by Ordering Content.
+- Create Order may depend on Quote, but should not know how Quote validates
+  Offer/SKU activity or listing-context coherence.
+- Quote may read Offer and Catalog facts to decide whether a previously issued
+  quote is still valid. That dependency is acceptable because validity is a
+  quote-owned policy, not an order-owned policy.
+- Provider raw shape terminates at the adapter. Quote stores provider snapshots
+  for audit and later fulfillment, but Order should consume decoded
+  product-type quote facts.
+- Bill should read resolved order/fulfillment facts. It should not decide quote
+  validity.
+
+## Implementation Phases
+
+### Phase 1: Durable Contract And API Shape
+
+- Update ecommerce contract for Offer-owned listing and quote identity.
+- Define request/response types for Offer Listing.
+- Define listed item, listing session, and product-type-independent quote
+  identity concepts.
+- Define quote-bound command item shape while preserving semantic order item
+  kinds: `FIXED` and `CHOICE_SET`.
+- Define quote-expired problem details code and HTTP 409 behavior.
+
+Verification:
+
+- typecheck after contract-backed schema changes once implemented
+
+### Phase 2: Provider Port Normalization
+
+- Replace raw estimate `Promise<unknown>` with typed provider quote output.
+- Keep provider raw snapshot inside the typed output for diagnostics.
+- Update Caocao adapter to parse raw response into app-level quote.
+- Update fake Caocao tests around typed quote parsing.
+
+Verification:
+
+- provider adapter unit tests
+- fake Caocao package tests
+
+### Phase 3: Offer Quote Domain And Store
+
+- Add product-type-independent quote persistence in Postgres.
+- Store enough context to validate create-order without re-quoting.
+- Add a Quote-domain resolver that encapsulates quote existence, expiry,
+  Offer/SKU eligibility, membership, and quote-set coherence.
+- Ensure pricing/order services can read quote snapshots without knowing the
+  provider raw shape directly.
+
+Verification:
+
+- backend unit tests for quote creation, expiry, eligibility, and quote-set
+  coherence
+- migration/config checks if DB-backed
+
+### Phase 4: Offer Listing Use Case And Route
+
+- Add Offer-owned listing use case.
+- Add public route, likely under Commerce API:
+  `POST /api/commerce/offers/:offerId/listing`.
+- Implement product-type dispatch.
+- Implement RideHailing listing resolver:
+  - resolve active local RideHailing SKUs under Offer
+  - call provider quote/listing by route/departureAt
+  - join provider vehicle quotes to local ACTIVE SKUs
+  - apply Offer pricing
+  - persist quote snapshots
+  - return listed items only
+- Migrate Rental to the unified listing endpoint with a thin fixed-item
+  resolver.
+
+Verification:
+
+- backend scenario/unit coverage for listed vs omitted SKUs
+- backend typecheck
+
+### Phase 5: Create-Order Quote Identity
+
+- Promote create-order items to quote-bound `FIXED` / `CHOICE_SET` items, not
+  RideHailing-only quote fields and not a mechanism-named `QUOTE_SET`.
+- Delegate quote identity validity to the Quote domain.
+- Build choice-set candidate snapshots from validated Quote-domain results.
+- Derive offer, SKU, route/departureAt, price, participants, riders, contact
+  phone, and other product create facts from validated Quote-domain results
+  instead of repeating them in the create-order payload.
+- Remove RideHailing submit-time re-quote for price freshness.
+- Preserve cheapest-first dispatch from validated quote candidates.
+- Return HTTP 409 problem details with a stable code when a submitted quote is
+  expired.
+
+Verification:
+
+- backend RideHailing foundation scenarios
+- quote-expired create-order scenario
+- provider-create-failure scenario still passes
+
+### Phase 6: Frontend Ordering Migration
+
+- Replace `useRideHailingQuoteOptions` with Offer Listing query.
+- Migrate Rental Ordering Content to use the same Offer Listing route for fixed
+  listed items.
+- Update RideHailing selection state to track quote ids.
+- Include route + departureAt in listing input.
+- Handle quote-expired HTTP 409 by refreshing listing, preserving selected SKU
+  ids when the refreshed listing still contains matching SKUs, and requiring
+  another explicit click.
+- Remove RideHailing price-diff preflight path.
+- Add departureAt binding dialog defaulting to "depart now".
+- Add drawer one-tap apply imported departure time.
+
+Verification:
+
+- frontend typecheck
+- focused browser/system scenario
+
+### Phase 7: Test And Fixture Updates
+
+- Update fake Caocao to support route/time-dependent availability if needed for
+  scenario coverage.
+- Update system RideHailing scenario:
+  - listing returns only available SKUs
+  - departureAt changes trigger listing refresh
+  - imported departureAt prompt defaults to now
+  - drawer can apply imported departureAt
+  - quote expired blocks create, refreshes listing, preserves matching selected
+    SKU ids, and requires second click
+  - successful create uses quote identity
+- Update Rental ordering scenario/coverage to prove the fixed-product path also
+  consumes unified listing quotes.
+
+Verification:
+
+- `pnpm check:type:backend`
+- `pnpm check:type:frontend`
+- relevant fake provider tests
+- backend RideHailing scenarios
+- focused RideHailing system scenario
+- `git diff --check`
+
+## Plan Review
+
+### Fit With Current Owners
+
+- Offer ownership is a good fit because listing now includes pricing and
+  membership, not only catalog data.
+- Product Catalog should not own dynamic RideHailing availability. It owns local
+  SKU facts and presentation.
+- Trade should not parse provider raw estimate responses. It should consume
+  validated Quote-domain results or provider-normalized quotes.
+- Ordering Content remains the right frontend owner for product-specific listing
+  state.
+- Ordering Page / shell remains the right frontend owner for submit
+  orchestration and create-order mutation. Ordering Content emits quote-bound
+  draft state; it does not call Create Order.
+
+### Naming Review
+
+- `QUOTE_SET` is rejected as a command item kind. It names the freshness
+  mechanism, not the order item semantics. Use `FIXED.quoteId` and
+  `CHOICE_SET.candidateQuoteIds` instead.
+- `OfferListedItem.kind: "QUOTE"` is also rejected because fixed listed items
+  now carry quote ids too. Use `FIXED` for fixed-purchase items and
+  `CHOICE_CANDIDATE` for RideHailing candidate rows.
+- Prefer `listingSessionId` over `listingId` so the id reads as a grouping for
+  one listing response/context, not an id for the route or endpoint itself.
+- Prefer `OfferQuote` as the domain name over `CommerceQuoteSnapshot`.
+  Persistence stores snapshots, but the domain concept is a quote issued from
+  an Offer listing and later consumed by create-order.
+- Prefer `listingContextSnapshot` over `productContextSnapshot` for route/time
+  facts. These are the input facts that scoped the listing.
+- Prefer `fulfillmentQuoteSnapshot` over `productQuoteSnapshot` for provider or
+  product-specific facts needed to fulfill from the quote. This avoids confusing
+  it with `pricingSnapshot`.
+
+### Boundary Review
+
+- Quote validity belongs to Quote. Order should call a Quote resolver and
+  receive validated fixed/choice-set quote facts, not perform repeated
+  point-checks against Offer, SKU, membership, expiry, and context.
+- Offer Listing creates quotes. It may consult Provider and Product Catalog
+  because listing is where dynamic availability and local catalog facts are
+  joined.
+- Create Order consumes quotes. It should not call Provider for price freshness
+  and should not reconstruct route/departureAt/SKU/Offer facts from the request
+  body.
+- Create Order should not reconstruct participants, riders, contact phone, or
+  other product create facts from the request body either. If those facts remain
+  required, their owner must be Quote/listing session or another pre-create
+  domain object.
+- Ordering Content owns the product-specific draft. Ordering Page / shell owns
+  mutation orchestration. A direct Ordering Content -> Create Order dependency
+  would blur the shell/content split.
+- Product-specific quote JSON should be decoded at the Quote boundary. Passing
+  generic `unknown` snapshots into Order, Pricing, or RideHailing lifecycle
+  would recreate the current provider-raw parsing problem in a new location.
+
+### Main Objections / Risks
+
+- A DB-backed quote snapshot table adds operational cleanup needs. This is still
+  preferable to re-quoting silently at create time if quote identity is the
+  domain boundary.
+- Making quote identity product-type-independent expands the slice beyond
+  RideHailing. The upside is a cleaner Order/Pricing contract; the risk is that
+  Rental or other products need compatibility bridges if they are not migrated
+  immediately.
+- If Caocao does not provide a durable provider quote id, app-minted quote ids
+  are only as strong as the stored provider snapshot and expiry. This is still
+  cleaner than frontend/backend price diffing.
+- Removing preflight entirely may conflate non-price create blockers with
+  mutation results. Keep a clean blocked/create-failed dialog path for PR/order
+  lifecycle failures.
+- A unified listing route that only RideHailing uses at first can look
+  over-modeled. This slice resolves that by migrating Rental too, while keeping
+  its resolver thin.
+- Route/departureAt equality validation must be strict enough to prevent stale
+  quote misuse but tolerant enough to avoid false mismatch from object ordering
+  or coordinate normalization. Prefer canonical route hash plus stored snapshot.
+- If Quote validation starts calling back into Order or RideHailing lifecycle,
+  the ownership will invert. Quote should return validated quote facts; Order
+  should turn those facts into order items and lifecycle rows.
+- Broad `unknown` snapshots are acceptable at the persistence edge only. They
+  become a maintainability problem if they leak into use cases instead of being
+  decoded behind product-type quote adapters.
+- A strict quote-only create-order payload means the system needs a real owner
+  for non-price product create facts before implementation. Do not solve that by
+  sneaking participants/riders/contact phone back into create-order.
+
+### Review Questions
+
+- Resolved: quote snapshots should be persisted in Postgres.
+- Resolved: expired quote should return HTTP 409 problem details with a stable
+  code, not an HTTP 200 result branch.
+- Resolved: the new route should be
+  `POST /api/commerce/offers/:offerId/listing`.
+- Resolved: Rental migrates to the unified listing endpoint in this slice.
+- Resolved: when quote expires after create click, the frontend refreshes
+  listing and preserves selected SKU ids if refreshed listing contains matching
+  SKUs.
+- Resolved: create-order quote-only payload should not include participants,
+  riders, or contact phone. Required product create facts must come from
+  validated quote/listing session ownership or another explicit pre-create
+  owner.
+- Should RideHailing provider abstraction introduce a "list vehicle quotes"
+  method now, or start with typed per-known-vehicle estimates and leave bulk
+  provider listing as a capability extension?
+- Which pre-create owner should capture non-price product create facts for
+  quote-only create-order, if they are still required after route-specific
+  simplification?
+
+## Suggested Next Step
+
+Implemented in this slice:
+
+- Offer-owned `POST /api/commerce/offers/:offerId/listing`
+- DB-backed product-type-independent commerce quotes
+- Quote-domain validity resolver
+- quote-only create-order product items
+- Rental migration to unified listing
+- RideHailing migration to route/departureAt listing and quote ids
+- quote-expired HTTP 409 handling with frontend listing refresh and selected
+  SKU preservation
+- removal of old backend/frontend evaluate/options surfaces
+
+Verified with:
+
+- `pnpm check:type:backend`
+- `pnpm check:type:frontend`
+- `pnpm check:format`
+- `pnpm check:lint`
+- `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+- `pnpm exec vitest run --project system-scenario tests/scenario/commerce/rental-ordering.scenario.test.ts`
+
+Remaining future questions:
+
+- Provider bulk vehicle listing can still be introduced later. This
+  implementation starts with typed per-known-vehicle estimates and only returns
+  local ACTIVE SKUs whose provider estimate succeeds.
+- Quote retention/cleanup policy is not solved in this slice.
+- Product-type-specific quote snapshots are typed at the application boundary,
+  but future products may need dedicated quote adapter modules as the Quote
+  domain grows.
diff --git a/tests/scenario/commerce/rental-ordering.scenario.test.ts b/tests/scenario/commerce/rental-ordering.scenario.test.ts
index bda3c4ac6..fb3055967 100644
--- a/tests/scenario/commerce/rental-ordering.scenario.test.ts
+++ b/tests/scenario/commerce/rental-ordering.scenario.test.ts
@@ -272,6 +272,28 @@ async function fillRentalOrderingRequiredFields(page: Page): Promise<void> {
   await page.getByTestId("ordering.rental.registrant-name.1").fill("李四");
 }
 
+async function waitForRentalQuoteReady(page: Page, expectedPrice = "20.00"): Promise<void> {
+  await page.waitForFunction((priceText) => {
+    const price = document.querySelector('[data-testid="ordering.rental.price"]')?.textContent;
+    return price?.includes(priceText);
+  }, expectedPrice);
+}
+
+async function assertOrderingBlockedDialog(input: {
+  page: Page;
+  expectedDetail: string;
+}): Promise<void> {
+  const dialog = input.page.getByRole("dialog", { name: "暂不能创建订单" });
+  await dialog.waitFor({
+    state: "visible",
+    timeout: 10_000,
+  });
+  await dialog.getByText(input.expectedDetail).waitFor({
+    state: "visible",
+    timeout: 10_000,
+  });
+}
+
 async function assertRentalOrderDetail(input: {
   page: Page;
   expectedItemName: string;
@@ -292,137 +314,124 @@ async function assertRentalOrderDetail(input: {
   });
 }
 
-scenario(
-  "commerce_rental_ordering_reaches_order_detail",
-  async (ctx) => {
-    const creator = await givenUser("system-commerce-rental-creator");
-    const joiner = await givenUser("system-commerce-rental-joiner");
-    await bindScenarioWeChatOpenId({
-      user: creator,
-      openId: "fake-openid-commerce-rental-creator",
+scenario("commerce_rental_ordering_reaches_order_detail", async (ctx) => {
+  const creator = await givenUser("system-commerce-rental-creator");
+  const joiner = await givenUser("system-commerce-rental-joiner");
+  await bindScenarioWeChatOpenId({
+    user: creator,
+    openId: "fake-openid-commerce-rental-creator",
+  });
+  await bindScenarioWeChatOpenId({
+    user: joiner,
+    openId: "fake-openid-commerce-rental-joiner",
+  });
+  const pr = await givenCommerceRentalPr({
+    creator,
+    minPartners: 2,
+    maxPartners: null,
+    title: "System commerce rental partner request",
+  });
+  await addJoinedParticipant({ pr, user: joiner });
+  await configurePRStatus({ pr, status: "READY" });
+  const placement = await givenRentalOrderingPlacement();
+
+  ctx.record("creatorUserId", creator.user.id);
+  ctx.record("joinerUserId", joiner.user.id);
+  ctx.record("prId", pr.id);
+  ctx.record("placementId", placement.id);
+
+  let createdOrderPath: string | null = null;
+
+  await withScenarioPage(async (page) => {
+    await installScenarioUserSession(page, creator);
+    await installDeterministicShareSidecarStubs(page);
+    await installFakeWeChatPayBridge(page, getScenarioEnvironment().fakeWeChatPay.origin);
+
+    await page.goto(`/pr/${pr.id}`);
+    await page.getByTestId("pr-detail.commerce-placement.open").click();
+    await page.getByTestId("ordering.rental.page").waitFor({
+      state: "visible",
+      timeout: 10_000,
     });
-    await bindScenarioWeChatOpenId({
-      user: joiner,
-      openId: "fake-openid-commerce-rental-joiner",
+    await page.getByText("系统测试烘焙空间").waitFor({
+      state: "visible",
+      timeout: 10_000,
     });
-    const pr = await givenCommerceRentalPr({
-      creator,
-      minPartners: 2,
-      maxPartners: null,
-      title: "System commerce rental partner request",
+    await assertLocatorTextIncludes({
+      actual: page.getByTestId("ordering.rental.product-summary").textContent(),
+      expected: "适合 2 人烘焙体验",
+      label: "Ordering rental product summary",
+    });
+    await page.getByTestId("ordering.rental.product-summary").locator("img").waitFor({
+      state: "visible",
+      timeout: 10_000,
+    });
+    await assertLocatorTextIncludes({
+      actual: page.getByTestId("ordering.rental.participant-count").textContent(),
+      expected: "2 人",
+      label: "Ordering participant count",
     });
-    await addJoinedParticipant({ pr, user: joiner });
-    await configurePRStatus({ pr, status: "READY" });
-    const placement = await givenRentalOrderingPlacement();
-
-    ctx.record("creatorUserId", creator.user.id);
-    ctx.record("joinerUserId", joiner.user.id);
-    ctx.record("prId", pr.id);
-    ctx.record("placementId", placement.id);
-
-    let createdOrderPath: string | null = null;
-
-    await withScenarioPage(async (page) => {
-      await installScenarioUserSession(page, creator);
-      await installDeterministicShareSidecarStubs(page);
-      await installFakeWeChatPayBridge(
-        page,
-        getScenarioEnvironment().fakeWeChatPay.origin,
-      );
-
-      await page.goto(`/pr/${pr.id}`);
-      await page.getByTestId("pr-detail.commerce-placement.open").click();
-      await page.getByTestId("ordering.rental.page").waitFor({
-        state: "visible",
-        timeout: 10_000,
-      });
-      await page.getByText("系统测试烘焙空间").waitFor({
-        state: "visible",
-        timeout: 10_000,
-      });
-      await assertLocatorTextIncludes({
-        actual: page.getByTestId("ordering.rental.product-summary").textContent(),
-        expected: "适合 2 人烘焙体验",
-        label: "Ordering rental product summary",
-      });
-      await page
-        .getByTestId("ordering.rental.product-summary")
-        .locator("img")
-        .waitFor({
-          state: "visible",
-          timeout: 10_000,
-        });
-      await assertLocatorTextIncludes({
-        actual: page.getByTestId("ordering.rental.participant-count").textContent(),
-        expected: "2 人",
-        label: "Ordering participant count",
-      });
 
-      const skuOptions = page.getByTestId("ordering.rental.sku-option");
-      assert.equal(await skuOptions.count(), 2);
-      await skuOptions.filter({ hasText: "烘焙区 A" }).waitFor({
-        state: "visible",
-        timeout: 10_000,
-      });
-      await skuOptions.filter({ hasText: "烘焙区 B" }).waitFor({
-        state: "visible",
-        timeout: 10_000,
-      });
-      await assertLocatorTextIncludes({
-        actual: page.getByTestId("ordering.rental.cancellation-policy").textContent(),
-        expected: "开始前可退",
-        label: "Ordering cancellation policy summary",
-      });
+    const skuOptions = page.getByTestId("ordering.rental.sku-option");
+    assert.equal(await skuOptions.count(), 2);
+    await skuOptions.filter({ hasText: "烘焙区 A" }).waitFor({
+      state: "visible",
+      timeout: 10_000,
+    });
+    await skuOptions.filter({ hasText: "烘焙区 B" }).waitFor({
+      state: "visible",
+      timeout: 10_000,
+    });
+    await assertLocatorTextIncludes({
+      actual: page.getByTestId("ordering.rental.cancellation-policy").textContent(),
+      expected: "开始前可退",
+      label: "Ordering cancellation policy summary",
+    });
 
-      await fillRentalOrderingRequiredFields(page);
-      await page.waitForFunction(() => {
-        const price = document.querySelector(
-          '[data-testid="ordering.rental.price"]',
-        )?.textContent;
-        return price?.includes("20.00");
-      });
-      await assertLocatorTextMatches({
-        actual: page.getByTestId("ordering.rental.price").textContent(),
-        pattern: /20\.00/,
-        label: "Default selected SKU price",
-      });
-      await page.getByTestId("ordering.rental.price-detail.toggle").click();
-      await page.getByTestId("ordering.rental.price-detail").waitFor({
-        state: "visible",
-        timeout: 10_000,
-      });
-      await assertLocatorTextIncludes({
-        actual: page.getByTestId("ordering.rental.price-detail").textContent(),
-        expected: "固定总价",
-        label: "Ordering price detail explanation",
-      });
-      await page.getByRole("button", { name: "Close drawer" }).click();
-
-      await skuOptions.filter({ hasText: "烘焙区 B" }).click();
-      await page.waitForFunction(() => {
-        const price = document.querySelector(
-          '[data-testid="ordering.rental.price"]',
-        )?.textContent;
-        return price?.includes("32.00");
-      });
-      await assertLocatorTextMatches({
-        actual: page.getByTestId("ordering.rental.price").textContent(),
-        pattern: /32\.00/,
-        label: "Price after switching rental zone",
-      });
-      await page.getByTestId("ordering.rental.create-order").click();
+    await fillRentalOrderingRequiredFields(page);
+    await page.waitForFunction(() => {
+      const price = document.querySelector('[data-testid="ordering.rental.price"]')?.textContent;
+      return price?.includes("20.00");
+    });
+    await assertLocatorTextMatches({
+      actual: page.getByTestId("ordering.rental.price").textContent(),
+      pattern: /20\.00/,
+      label: "Default selected SKU price",
+    });
+    await page.getByTestId("ordering.rental.price-detail.toggle").click();
+    await page.getByTestId("ordering.rental.price-detail").waitFor({
+      state: "visible",
+      timeout: 10_000,
+    });
+    await assertLocatorTextIncludes({
+      actual: page.getByTestId("ordering.rental.price-detail").textContent(),
+      expected: "固定总价",
+      label: "Ordering price detail explanation",
+    });
+    await page.getByRole("button", { name: "Close drawer" }).click();
 
-      await assertRentalOrderDetail({
-        page,
-        expectedItemName: "烘焙区 B · 2人 · 2小时",
-      });
-      createdOrderPath = new URL(page.url()).pathname;
+    await skuOptions.filter({ hasText: "烘焙区 B" }).click();
+    await page.waitForFunction(() => {
+      const price = document.querySelector('[data-testid="ordering.rental.price"]')?.textContent;
+      return price?.includes("32.00");
+    });
+    await assertLocatorTextMatches({
+      actual: page.getByTestId("ordering.rental.price").textContent(),
+      pattern: /32\.00/,
+      label: "Price after switching rental zone",
     });
+    await page.getByTestId("ordering.rental.create-order").click();
 
-    const orderPath = createdOrderPath;
-    assert.match(orderPath ?? "", /^\/orders\/[0-9a-f-]+$/);
-  },
-);
+    await assertRentalOrderDetail({
+      page,
+      expectedItemName: "烘焙区 B · 2人 · 2小时",
+    });
+    createdOrderPath = new URL(page.url()).pathname;
+  });
+
+  const orderPath = createdOrderPath;
+  assert.match(orderPath ?? "", /^\/orders\/[0-9a-f-]+$/);
+});
 
 scenario("commerce_rental_pr_button_requires_matching_rule", async (ctx) => {
   const creator = await givenUser("system-commerce-placement-mismatch-creator");
@@ -447,8 +456,8 @@ scenario("commerce_rental_pr_button_requires_matching_rule", async (ctx) => {
         name: "System commerce placement mismatch PR",
       })
       .waitFor({
-      state: "visible",
-      timeout: 10_000,
+        state: "visible",
+        timeout: 10_000,
       });
     await page.waitForLoadState("networkidle");
     assert.equal(
@@ -485,11 +494,13 @@ scenario("commerce_rental_ordering_blocks_non_ready_pr", async (ctx) => {
       timeout: 10_000,
     });
     await fillRentalOrderingRequiredFields(page);
-    await page.getByText("订单创建需要 PR 处于 READY 状态").waitFor({
-      state: "visible",
-      timeout: 10_000,
+    await waitForRentalQuoteReady(page);
+    await page.getByTestId("ordering.rental.create-order").click();
+    await assertOrderingBlockedDialog({
+      page,
+      expectedDetail: "订单创建需要 PR 处于 READY 状态",
     });
-    assert.equal(await page.getByTestId("ordering.rental.create-order").isDisabled(), true);
+    assert.equal(new URL(page.url()).pathname, "/order/new");
   });
 });
 
@@ -520,11 +531,13 @@ scenario("commerce_rental_ordering_blocks_non_creator", async (ctx) => {
       timeout: 10_000,
     });
     await fillRentalOrderingRequiredFields(page);
-    await page.getByText("仅 PR 创建者可以创建订单").waitFor({
-      state: "visible",
-      timeout: 10_000,
+    await waitForRentalQuoteReady(page);
+    await page.getByTestId("ordering.rental.create-order").click();
+    await assertOrderingBlockedDialog({
+      page,
+      expectedDetail: "仅 PR 创建者可以创建订单",
     });
-    assert.equal(await page.getByTestId("ordering.rental.create-order").isDisabled(), true);
+    assert.equal(new URL(page.url()).pathname, "/order/new");
   });
 });
 
@@ -556,9 +569,7 @@ scenario("commerce_rental_cancel_entry_reaches_order_detail", async (ctx) => {
     });
     await fillRentalOrderingRequiredFields(page);
     await page.waitForFunction(() => {
-      const price = document.querySelector(
-        '[data-testid="ordering.rental.price"]',
-      )?.textContent;
+      const price = document.querySelector('[data-testid="ordering.rental.price"]')?.textContent;
       return price?.includes("20.00");
     });
     await page.getByTestId("ordering.rental.create-order").click();
@@ -591,10 +602,7 @@ scenario("commerce_rental_refund_entry_reaches_order_detail", async (ctx) => {
   await withScenarioPage(async (page) => {
     await installScenarioUserSession(page, creator);
     await installDeterministicShareSidecarStubs(page);
-    await installFakeWeChatPayBridge(
-      page,
-      getScenarioEnvironment().fakeWeChatPay.origin,
-    );
+    await installFakeWeChatPayBridge(page, getScenarioEnvironment().fakeWeChatPay.origin);
 
     await page.goto(`/pr/${pr.id}`);
     await page.getByTestId("pr-detail.commerce-placement.open").click();
@@ -604,9 +612,7 @@ scenario("commerce_rental_refund_entry_reaches_order_detail", async (ctx) => {
     });
     await fillRentalOrderingRequiredFields(page);
     await page.waitForFunction(() => {
-      const price = document.querySelector(
-        '[data-testid="ordering.rental.price"]',
-      )?.textContent;
+      const price = document.querySelector('[data-testid="ordering.rental.price"]')?.textContent;
       return price?.includes("20.00");
     });
     await page.getByTestId("ordering.rental.create-order").click();
diff --git a/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts b/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
index 589f93e89..2da40a9cc 100644
--- a/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
+++ b/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
@@ -10,7 +10,9 @@ import {
 } from "../../../apps/backend/src/domains/merchandising";
 import { registerPaymentProviderInstance } from "../../../apps/backend/src/domains/payment";
 import { registerRideHailingProviderInstance } from "../../../apps/backend/src/domains/ride-hailing";
+import { commerceQuotes } from "../../../apps/backend/src/entities/commerce-quote";
 import type { PRRoute } from "../../../apps/backend/src/entities/partner-request";
+import { db } from "../../../apps/backend/src/lib/db";
 import { PartnerRepository } from "../../../apps/backend/src/repositories/PartnerRepository";
 import { PartnerRequestRepository } from "../../../apps/backend/src/repositories/PartnerRequestRepository";
 import { ProductSkuRepository } from "../../../apps/backend/src/repositories/ProductSkuRepository";
@@ -93,18 +95,21 @@ async function armFakeCaocaoCreateFailure(): Promise<void> {
   });
 }
 
-async function updateFakeCaocaoEstimate(input: {
+async function setFakeCaocaoEstimateAvailability(input: {
   carType: string;
-  estimateAmountFen: number;
+  available: boolean;
 }): Promise<void> {
   const { fakeCaocao } = getScenarioEnvironment();
-  const response = await fetch(new URL("/__fake_caocao/estimates", fakeCaocao.origin), {
-    body: JSON.stringify(input),
-    headers: {
-      "Content-Type": "application/json",
+  const response = await fetch(
+    new URL("/__fake_caocao/estimates/availability", fakeCaocao.origin),
+    {
+      body: JSON.stringify(input),
+      headers: {
+        "Content-Type": "application/json",
+      },
+      method: "POST",
     },
-    method: "POST",
-  });
+  );
   assert.equal(response.ok, true);
 }
 
@@ -117,6 +122,28 @@ async function readFakeCaocaoOrderCount(): Promise<number> {
   return body.orders.length;
 }
 
+async function expireCommerceQuotes(): Promise<number> {
+  const before = await db.select().from(commerceQuotes);
+  await db.update(commerceQuotes).set({
+    expiresAt: new Date(Date.now() - 1000),
+  });
+  return before.length;
+}
+
+async function waitForCommerceQuoteCountAtLeast(expected: number): Promise<void> {
+  const deadline = Date.now() + 10_000;
+  while (Date.now() < deadline) {
+    const quotes = await db.select().from(commerceQuotes);
+    if (quotes.length >= expected) return;
+    await new Promise((resolve) => setTimeout(resolve, 100));
+  }
+  const quotes = await db.select().from(commerceQuotes);
+  assert.ok(
+    quotes.length >= expected,
+    `Expected at least ${expected} commerce quotes, got ${quotes.length}`,
+  );
+}
+
 async function givenRideHailingPr(input: {
   creator: ScenarioUser;
   title: string;
@@ -311,6 +338,59 @@ async function openRideHailingOrderingFromPr(input: { page: Page; prId: number }
   });
 }
 
+const waitForOfferListingResponse = (page: Page): Promise<unknown> =>
+  page.waitForResponse(
+    (response) => {
+      const url = new URL(response.url());
+      return (
+        response.request().method() === "POST" &&
+        /^\/api\/commerce\/offers\/\d+\/listing$/.test(url.pathname) &&
+        response.status() === 200
+      );
+    },
+    { timeout: 10_000 },
+  );
+
+async function openRideHailingOrderingFromPrAndWaitForListing(input: {
+  page: Page;
+  prId: number;
+}): Promise<void> {
+  const listingResponse = waitForOfferListingResponse(input.page);
+  await openRideHailingOrderingFromPr(input);
+  await listingResponse;
+}
+
+async function waitForVehicleCardCount(page: Page, expected: number): Promise<void> {
+  const vehicleCards = page.getByTestId("ordering.ride-hailing.vehicle-card");
+  const deadline = Date.now() + 10_000;
+  while (Date.now() < deadline) {
+    if ((await vehicleCards.count()) === expected) return;
+    await new Promise((resolve) => setTimeout(resolve, 100));
+  }
+  assert.equal(await vehicleCards.count(), expected);
+}
+
+async function keepDepartNowIfPrompted(page: Page): Promise<void> {
+  const dialog = page.getByRole("dialog").filter({ hasText: "使用带入的出发时间？" });
+  const visible = await dialog
+    .waitFor({
+      state: "visible",
+      timeout: 1_000,
+    })
+    .then(() => true)
+    .catch(() => false);
+  if (!visible) return;
+  await dialog.getByText(/2031\/04\/01.*10:00/).waitFor({
+    state: "visible",
+    timeout: 10_000,
+  });
+  await dialog.getByRole("button", { name: "现在出发", exact: true }).click();
+  await dialog.waitFor({
+    state: "hidden",
+    timeout: 10_000,
+  });
+}
+
 async function assertRideHailingOrderingContent(page: Page): Promise<void> {
   await page.getByTestId("ordering.ride-hailing.route-map").waitFor({
     state: "visible",
@@ -334,9 +414,28 @@ async function assertRideHailingOrderingContent(page: Page): Promise<void> {
     state: "visible",
     timeout: 10_000,
   });
+  await keepDepartNowIfPrompted(page);
+}
+
+async function assertDepartureDrawerCanSwitchBetweenImportedAndNow(page: Page): Promise<void> {
+  await page.getByTestId("ordering.ride-hailing.departure-time.open").click();
+  await page.getByTestId("ordering.ride-hailing.departure-time.apply-imported").click();
+  await assertLocatorTextMatches({
+    actual: page.getByTestId("ordering.ride-hailing.departure-time").textContent(),
+    label: "RideHailing imported departure row",
+    pattern: /10:00出发/,
+  });
+  await page.getByTestId("ordering.ride-hailing.departure-time.use-now").click();
+  await assertLocatorTextIncludes({
+    actual: page.getByTestId("ordering.ride-hailing.departure-time").textContent(),
+    expected: "现在出发",
+    label: "RideHailing depart now row",
+  });
+  await page.keyboard.press("Escape");
 }
 
 async function selectPremierAsAdditionalCandidate(page: Page): Promise<void> {
+  await keepDepartNowIfPrompted(page);
   const vehicleCards = page.getByTestId("ordering.ride-hailing.vehicle-card");
   await vehicleCards.first().waitFor({
     state: "visible",
@@ -427,6 +526,7 @@ scenario("commerce_ride_hailing_ordering_reaches_order_detail", async (ctx) => {
 
     await openRideHailingOrderingFromPr({ page, prId: pr.id });
     await assertRideHailingOrderingContent(page);
+    await assertDepartureDrawerCanSwitchBetweenImportedAndNow(page);
     await selectPremierAsAdditionalCandidate(page);
 
     await page.getByTestId("ordering.ride-hailing.create-order").click();
@@ -480,18 +580,135 @@ scenario("commerce_ride_hailing_provider_create_failure_stays_on_ordering_page",
   });
 });
 
-scenario("commerce_ride_hailing_preflight_price_change_requires_confirmation", async (ctx) => {
+scenario("commerce_ride_hailing_unavailable_provider_vehicle_is_hidden", async (ctx) => {
+  await resetFakeCaocao();
+  await setFakeCaocaoEstimateAvailability({
+    carType: "PREMIER",
+    available: false,
+  });
+  const creator = await givenUser("system-ride-hailing-unavailable-vehicle-creator", {
+    phoneNumber: "13800138003",
+  });
+  await bindScenarioWeChatOpenId({
+    openId: "fake-openid-commerce-ride-hailing-unavailable-vehicle-creator",
+    user: creator,
+  });
+  const pr = await givenRideHailingPr({
+    creator,
+    title: "System ride hailing unavailable vehicle PR",
+  });
+  await configurePRStatus({ pr, status: "READY" });
+  await registerScenarioPaymentProvider();
+  const placement = await givenRideHailingOrderingPlacement();
+
+  ctx.record("creatorUserId", creator.user.id);
+  ctx.record("prId", pr.id);
+  ctx.record("placementId", placement.placementId);
+
+  await withScenarioPage(async (page) => {
+    await installScenarioUserSession(page, creator);
+    await installDeterministicShareSidecarStubs(page);
+
+    await openRideHailingOrderingFromPrAndWaitForListing({ page, prId: pr.id });
+    await assertRideHailingOrderingContent(page);
+    await keepDepartNowIfPrompted(page);
+
+    await waitForVehicleCardCount(page, 1);
+    await page
+      .getByTestId("ordering.ride-hailing.vehicle-card")
+      .filter({
+        hasText: "系统曹操快车",
+      })
+      .waitFor({
+        state: "visible",
+        timeout: 10_000,
+      });
+    await page
+      .getByTestId("ordering.ride-hailing.vehicle-card")
+      .filter({
+        hasText: "系统曹操专车",
+      })
+      .waitFor({
+        state: "hidden",
+        timeout: 10_000,
+      });
+    await assertLocatorTextMatches({
+      actual: page.getByTestId("ordering.ride-hailing.quote-price-range").textContent(),
+      label: "RideHailing only available candidate price",
+      pattern: /￥36\.00/,
+    });
+
+    await page.getByTestId("ordering.ride-hailing.create-order").click();
+    await assertRideHailingOrderDetail(page);
+    assert.equal(await readFakeCaocaoOrderCount(), 1);
+  });
+});
+
+scenario("commerce_ride_hailing_quote_expired_refreshes_and_preserves_selection", async (ctx) => {
   await resetFakeCaocao();
-  const creator = await givenUser("system-ride-hailing-price-change-creator", {
+  const creator = await givenUser("system-ride-hailing-quote-expired-creator", {
     phoneNumber: "13800138002",
   });
   await bindScenarioWeChatOpenId({
-    openId: "fake-openid-commerce-ride-hailing-price-change-creator",
+    openId: "fake-openid-commerce-ride-hailing-quote-expired-creator",
+    user: creator,
+  });
+  const pr = await givenRideHailingPr({
+    creator,
+    title: "System ride hailing quote expired PR",
+  });
+  await configurePRStatus({ pr, status: "READY" });
+  await registerScenarioPaymentProvider();
+  const placement = await givenRideHailingOrderingPlacement();
+
+  ctx.record("creatorUserId", creator.user.id);
+  ctx.record("prId", pr.id);
+  ctx.record("placementId", placement.placementId);
+  ctx.record("providerInstanceId", placement.providerInstanceId);
+
+  await withScenarioPage(async (page) => {
+    await installScenarioUserSession(page, creator);
+    await installDeterministicShareSidecarStubs(page);
+
+    await openRideHailingOrderingFromPr({ page, prId: pr.id });
+    await assertRideHailingOrderingContent(page);
+    await selectPremierAsAdditionalCandidate(page);
+
+    const quoteCountBeforeExpire = await expireCommerceQuotes();
+
+    await page.getByTestId("ordering.ride-hailing.create-order").click();
+    await page.getByRole("heading", { name: "报价已过期" }).waitFor({
+      state: "visible",
+      timeout: 10_000,
+    });
+    assert.equal(await readFakeCaocaoOrderCount(), 0);
+    await waitForCommerceQuoteCountAtLeast(quoteCountBeforeExpire + 2);
+    await page.getByRole("button", { name: "我知道了" }).click();
+
+    const selectedMarkers = page.getByTestId("ordering.ride-hailing.vehicle-card.selected");
+    await selectedMarkers.first().waitFor({
+      state: "visible",
+      timeout: 10_000,
+    });
+    assert.equal(await selectedMarkers.count(), 2);
+    await page.getByTestId("ordering.ride-hailing.create-order").click();
+    await assertRideHailingOrderDetail(page);
+    assert.equal(await readFakeCaocaoOrderCount(), 1);
+  });
+});
+
+scenario("commerce_ride_hailing_quote_refresh_prunes_unavailable_selected_vehicle", async (ctx) => {
+  await resetFakeCaocao();
+  const creator = await givenUser("system-ride-hailing-quote-prune-creator", {
+    phoneNumber: "13800138004",
+  });
+  await bindScenarioWeChatOpenId({
+    openId: "fake-openid-commerce-ride-hailing-quote-prune-creator",
     user: creator,
   });
   const pr = await givenRideHailingPr({
     creator,
-    title: "System ride hailing price change PR",
+    title: "System ride hailing quote prune PR",
   });
   await configurePRStatus({ pr, status: "READY" });
   await registerScenarioPaymentProvider();
@@ -510,25 +727,92 @@ scenario("commerce_ride_hailing_preflight_price_change_requires_confirmation", a
     await assertRideHailingOrderingContent(page);
     await selectPremierAsAdditionalCandidate(page);
 
-    await updateFakeCaocaoEstimate({
+    const quoteCountBeforeExpire = await expireCommerceQuotes();
+    await setFakeCaocaoEstimateAvailability({
       carType: "PREMIER",
-      estimateAmountFen: 6100,
+      available: false,
     });
 
     await page.getByTestId("ordering.ride-hailing.create-order").click();
-    await page.getByText("价格发生变化").waitFor({
+    await page.getByRole("heading", { name: "报价已过期" }).waitFor({
       state: "visible",
       timeout: 10_000,
     });
-    await assertLocatorTextIncludes({
-      actual: page.locator("body").textContent(),
-      expected: "当前价格已从 ￥36.00~52.00 更新为 ￥36.00~61.00。是否继续下单？",
-      label: "RideHailing price-change preflight dialog",
-    });
     assert.equal(await readFakeCaocaoOrderCount(), 0);
+    await waitForCommerceQuoteCountAtLeast(quoteCountBeforeExpire + 1);
+    await page.getByRole("button", { name: "我知道了" }).click();
+
+    await waitForVehicleCardCount(page, 1);
+    await page
+      .getByTestId("ordering.ride-hailing.vehicle-card")
+      .filter({
+        hasText: "系统曹操专车",
+      })
+      .waitFor({
+        state: "hidden",
+        timeout: 10_000,
+      });
+    const selectedMarkers = page.getByTestId("ordering.ride-hailing.vehicle-card.selected");
+    await selectedMarkers.first().waitFor({
+      state: "visible",
+      timeout: 10_000,
+    });
+    assert.equal(await selectedMarkers.count(), 1);
+    await assertLocatorTextMatches({
+      actual: page.getByTestId("ordering.ride-hailing.quote-price-range").textContent(),
+      label: "RideHailing pruned candidate price",
+      pattern: /￥36\.00/,
+    });
 
-    await page.getByRole("button", { name: "继续下单" }).click();
+    await page.getByTestId("ordering.ride-hailing.create-order").click();
     await assertRideHailingOrderDetail(page);
     assert.equal(await readFakeCaocaoOrderCount(), 1);
   });
 });
+
+scenario("commerce_ride_hailing_all_provider_vehicles_unavailable_blocks_ordering", async (ctx) => {
+  await resetFakeCaocao();
+  await setFakeCaocaoEstimateAvailability({
+    carType: "EXPRESS",
+    available: false,
+  });
+  await setFakeCaocaoEstimateAvailability({
+    carType: "PREMIER",
+    available: false,
+  });
+  const creator = await givenUser("system-ride-hailing-no-vehicles-creator", {
+    phoneNumber: "13800138005",
+  });
+  await bindScenarioWeChatOpenId({
+    openId: "fake-openid-commerce-ride-hailing-no-vehicles-creator",
+    user: creator,
+  });
+  const pr = await givenRideHailingPr({
+    creator,
+    title: "System ride hailing no vehicles PR",
+  });
+  await configurePRStatus({ pr, status: "READY" });
+  await registerScenarioPaymentProvider();
+  const placement = await givenRideHailingOrderingPlacement();
+
+  ctx.record("creatorUserId", creator.user.id);
+  ctx.record("prId", pr.id);
+  ctx.record("placementId", placement.placementId);
+
+  await withScenarioPage(async (page) => {
+    await installScenarioUserSession(page, creator);
+    await installDeterministicShareSidecarStubs(page);
+
+    await openRideHailingOrderingFromPrAndWaitForListing({ page, prId: pr.id });
+    await assertRideHailingOrderingContent(page);
+    await keepDepartNowIfPrompted(page);
+    await waitForVehicleCardCount(page, 0);
+    await assertLocatorTextIncludes({
+      actual: page.getByTestId("ordering.ride-hailing.quote-price-range").textContent(),
+      expected: "待确认",
+      label: "RideHailing unavailable candidate price",
+    });
+    assert.equal(await page.getByTestId("ordering.ride-hailing.create-order").isDisabled(), true);
+    assert.equal(await readFakeCaocaoOrderCount(), 0);
+  });
+});

From 7bae27c3a535a6579f53e9aa3553c9933d2554ad Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Mon, 22 Jun 2026 21:42:13 +0800
Subject: [PATCH 33/94] fix(pr): canonicalize time window instants

- require PR time window endpoints to be offset ISO datetimes

- materialize NL date-only input into product-local all-day instant windows

- add local input conversion helpers, docs, tests, and contract guardrail
---
 .../controllers/anchor-event.controller.ts    |  57 +++-----
 .../create-form-mode-auto-pr.test.ts          |   4 +-
 .../pr-time-window-instant.service.test.ts    |  27 ++++
 .../pr-time-window-instant.service.ts         | 126 ++++++++++++++++++
 .../use-cases/create-pr-natural-language.ts   |  33 ++---
 .../pr-core/use-cases/create-pr-structured.ts |  35 ++---
 .../pr-core/use-cases/update-pr-content.ts    |  51 +++----
 .../partner-request-time.schema.test.ts       |  49 +++++++
 apps/backend/src/entities/partner-request.ts  | 124 ++++++++---------
 .../src/services/PartnerRequestAIService.ts   |  11 +-
 .../prompts/partnerRequestParsePrompt.test.ts |  20 +--
 .../prompts/partnerRequestParsePrompt.ts      |   6 +-
 .../src/domains/event/model/form-mode.test.ts |  34 ++---
 .../src/domains/event/model/form-mode.ts      |  88 ++++--------
 .../event/model/pr-time-window-editor.test.ts |  25 +---
 .../queries/useCreateEventAssistedPR.test.ts  |  10 +-
 .../queries/useCreateFormModeAutoPR.test.ts   |  15 +--
 .../pr/ui/forms/DateTimeRangePicker.vue       |  39 ++----
 apps/frontend/src/lib/validation.ts           |  76 +++--------
 .../datetime/formatLocalDateTime.test.ts      |  33 +++--
 .../shared/datetime/formatLocalDateTime.ts    |  32 ++---
 .../datetime/localDateTimeInput.test.ts       |  35 +++++
 .../src/shared/datetime/localDateTimeInput.ts |  59 ++++++++
 docs/10-prd/behavior/rules-and-invariants.md  |   6 +-
 docs/20-product-tdd/cross-unit-contracts.md   |   3 +-
 package.json                                  |   3 +-
 scripts/check-pr-time-contract.mjs            |  60 +++++++++
 .../control.md                                |  61 +++++++++
 .../pr-core/pr-detail-edit.scenario.test.ts   | 113 ++++++++--------
 29 files changed, 724 insertions(+), 511 deletions(-)
 create mode 100644 apps/backend/src/domains/pr-core/services/pr-time-window-instant.service.test.ts
 create mode 100644 apps/backend/src/domains/pr-core/services/pr-time-window-instant.service.ts
 create mode 100644 apps/backend/src/entities/partner-request-time.schema.test.ts
 create mode 100644 apps/frontend/src/shared/datetime/localDateTimeInput.test.ts
 create mode 100644 apps/frontend/src/shared/datetime/localDateTimeInput.ts
 create mode 100644 scripts/check-pr-time-contract.mjs
 create mode 100644 tasks/pr-time-window-serialization-diagnosis/control.md

diff --git a/apps/backend/src/controllers/anchor-event.controller.ts b/apps/backend/src/controllers/anchor-event.controller.ts
index 657eedd9a..17f44fbbc 100644
--- a/apps/backend/src/controllers/anchor-event.controller.ts
+++ b/apps/backend/src/controllers/anchor-event.controller.ts
@@ -19,10 +19,7 @@ import {
   submitAnchorEventRouteApplication,
 } from "../domains/anchor-event-route-application";
 import { authMiddleware, type AuthEnv } from "../auth/middleware";
-import {
-  prAllowEditAfterReadySchema,
-  prRouteSchema,
-} from "../entities/partner-request";
+import { prAllowEditAfterReadySchema, prRouteSchema } from "../entities/partner-request";
 import type { UserId } from "../entities/user";
 import { throwHttpProblem } from "../lib/problem-details";
 
@@ -51,10 +48,12 @@ const formModeRecommendationBaseSchema = z.object({
   preferences: z.array(z.string().trim().min(1).max(80)).max(16),
 });
 
+const instantDateTimeSchema = z.string().datetime({ offset: true });
+
 const formModeRecommendationTimeWindowSchema = z
   .object({
-    startAt: z.string().datetime(),
-    endAt: z.string().datetime(),
+    startAt: instantDateTimeSchema,
+    endAt: instantDateTimeSchema,
   })
   .superRefine((timeWindow, ctx) => {
     if (new Date(timeWindow.startAt).getTime() > new Date(timeWindow.endAt).getTime()) {
@@ -67,7 +66,7 @@ const formModeRecommendationTimeWindowSchema = z
   });
 
 const dummyPRMaterializationTimeWindowSchema = z
-  .tuple([z.string().datetime(), z.string().datetime()])
+  .tuple([instantDateTimeSchema, instantDateTimeSchema])
   .superRefine((timeWindow, ctx) => {
     if (new Date(timeWindow[0]).getTime() > new Date(timeWindow[1]).getTime()) {
       ctx.addIssue({
@@ -109,13 +108,11 @@ const formModeRecommendationSchema = z.union([
   }),
   formModeRecommendationBaseSchema.extend({
     locationId: z.string().trim().min(1),
-    startAt: z.string().datetime(),
+    startAt: instantDateTimeSchema,
   }),
 ]);
 
-type FormModeRecommendationPayload = z.infer<
-  typeof formModeRecommendationSchema
->;
+type FormModeRecommendationPayload = z.infer<typeof formModeRecommendationSchema>;
 
 const resolveFormModeRecommendationPlace = (
   payload: FormModeRecommendationPayload,
@@ -186,27 +183,16 @@ export const anchorEventRoute = app
     const detail = await getAnchorEventFormModeData(eventId);
     return c.json(detail);
   })
-  .get(
-    "/:eventId/landing-assignment",
-    zValidator("param", eventIdParamSchema),
-    async (c) => {
-      const { eventId } = c.req.valid("param");
-      const assignment = await assignAnchorEventLandingMode(eventId);
-      return c.json(assignment);
-    },
-  )
-  .get(
-    "/:eventId/demand-cards",
-    zValidator("param", eventIdParamSchema),
-    async (c) => {
-      const { eventId } = c.req.valid("param");
-      const cards = await getAnchorEventDemandCards(
-        eventId,
-        readSessionUserId(c),
-      );
-      return c.json(cards);
-    },
-  )
+  .get("/:eventId/landing-assignment", zValidator("param", eventIdParamSchema), async (c) => {
+    const { eventId } = c.req.valid("param");
+    const assignment = await assignAnchorEventLandingMode(eventId);
+    return c.json(assignment);
+  })
+  .get("/:eventId/demand-cards", zValidator("param", eventIdParamSchema), async (c) => {
+    const { eventId } = c.req.valid("param");
+    const cards = await getAnchorEventDemandCards(eventId, readSessionUserId(c));
+    return c.json(cards);
+  })
   .post(
     "/:eventId/preference-tags/submissions",
     zValidator("param", eventIdParamSchema),
@@ -246,9 +232,10 @@ export const anchorEventRoute = app
         eventId,
         viewerUserId: readSessionUserId(c),
         place: resolveFormModeRecommendationPlace(payload),
-        timeWindows: "timeWindows" in payload
-          ? payload.timeWindows
-          : [{ startAt: payload.startAt, endAt: payload.startAt }],
+        timeWindows:
+          "timeWindows" in payload
+            ? payload.timeWindows
+            : [{ startAt: payload.startAt, endAt: payload.startAt }],
         preferences: payload.preferences,
       });
       return c.json(result);
diff --git a/apps/backend/src/domains/anchor-event/use-cases/create-form-mode-auto-pr.test.ts b/apps/backend/src/domains/anchor-event/use-cases/create-form-mode-auto-pr.test.ts
index 99bc63542..3a5e2f452 100644
--- a/apps/backend/src/domains/anchor-event/use-cases/create-form-mode-auto-pr.test.ts
+++ b/apps/backend/src/domains/anchor-event/use-cases/create-form-mode-auto-pr.test.ts
@@ -91,7 +91,7 @@ describe("createAnchorEventFormModeAutoPR", () => {
     const allowEditAfterReady = {
       timeWindow: [
         "2038-01-02T00:00:00.000Z",
-        "2038-01-02T23:59:00.000Z",
+        "2038-01-03T00:00:00.000Z",
       ] satisfies [string, string],
     };
 
@@ -161,7 +161,7 @@ describe("createAnchorEventFormModeAutoPR", () => {
   test("accepts a fuzzy activity window outside the event time pool", async () => {
     const fuzzyAllDayWindow: [string, string] = [
       "2038-01-01T16:00:00.000Z",
-      "2038-01-02T15:59:00.000Z",
+      "2038-01-02T16:00:00.000Z",
     ];
 
     await createAnchorEventFormModeAutoPR({
diff --git a/apps/backend/src/domains/pr-core/services/pr-time-window-instant.service.test.ts b/apps/backend/src/domains/pr-core/services/pr-time-window-instant.service.test.ts
new file mode 100644
index 000000000..29f053261
--- /dev/null
+++ b/apps/backend/src/domains/pr-core/services/pr-time-window-instant.service.test.ts
@@ -0,0 +1,27 @@
+import assert from "node:assert/strict";
+import { test } from "vitest";
+import {
+  canonicalizePRTimeWindow,
+  materializeNaturalLanguageTimeWindow,
+} from "./pr-time-window-instant.service";
+
+test("canonicalizePRTimeWindow accepts offset datetimes and stores UTC instants", () => {
+  assert.deepEqual(
+    canonicalizePRTimeWindow(["2026-06-27T00:00:00+08:00", "2026-06-27T01:00:00+08:00"]),
+    ["2026-06-26T16:00:00.000Z", "2026-06-26T17:00:00.000Z"],
+  );
+});
+
+test("materializeNaturalLanguageTimeWindow turns date-only into product-local all-day instants", () => {
+  assert.deepEqual(materializeNaturalLanguageTimeWindow(["2026-06-27", null]), [
+    "2026-06-26T16:00:00.000Z",
+    "2026-06-27T16:00:00.000Z",
+  ]);
+});
+
+test("materializeNaturalLanguageTimeWindow treats date-only end as exclusive next-day boundary", () => {
+  assert.deepEqual(materializeNaturalLanguageTimeWindow(["2026-06-27", "2026-06-28"]), [
+    "2026-06-26T16:00:00.000Z",
+    "2026-06-28T16:00:00.000Z",
+  ]);
+});
diff --git a/apps/backend/src/domains/pr-core/services/pr-time-window-instant.service.ts b/apps/backend/src/domains/pr-core/services/pr-time-window-instant.service.ts
new file mode 100644
index 000000000..6ac9aa6dc
--- /dev/null
+++ b/apps/backend/src/domains/pr-core/services/pr-time-window-instant.service.ts
@@ -0,0 +1,126 @@
+import { throwHttpProblem } from "../../../lib/problem-details";
+import type {
+  NaturalLanguagePartnerRequestFields,
+  PartnerRequestFields,
+  PRAllowEditAfterReady,
+} from "../../../entities/partner-request";
+
+const ISO_DATE_ONLY_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
+const PRODUCT_TIME_ZONE_OFFSET = "+08:00";
+
+const parseDateOnly = (value: string): { year: number; month: number; day: number } | null => {
+  if (!ISO_DATE_ONLY_PATTERN.test(value)) {
+    return null;
+  }
+
+  const [yearRaw, monthRaw, dayRaw] = value.split("-");
+  const year = Number(yearRaw);
+  const month = Number(monthRaw);
+  const day = Number(dayRaw);
+  if (!Number.isInteger(year) || !Number.isInteger(month) || !Number.isInteger(day)) {
+    return null;
+  }
+
+  return { year, month, day };
+};
+
+const addProductLocalDays = (dateKey: string, days: number): string => {
+  const parsed = parseDateOnly(dateKey);
+  if (!parsed) {
+    return throwHttpProblem({
+      status: 400,
+      detail: "Invalid PR date-only time value",
+    });
+  }
+
+  const date = new Date(Date.UTC(parsed.year, parsed.month - 1, parsed.day));
+  date.setUTCDate(date.getUTCDate() + days);
+  return [
+    date.getUTCFullYear(),
+    String(date.getUTCMonth() + 1).padStart(2, "0"),
+    String(date.getUTCDate()).padStart(2, "0"),
+  ].join("-");
+};
+
+const productLocalBoundaryToInstant = (dateKey: string): string => {
+  const date = new Date(`${dateKey}T00:00:00${PRODUCT_TIME_ZONE_OFFSET}`);
+  if (Number.isNaN(date.getTime())) {
+    return throwHttpProblem({
+      status: 400,
+      detail: "Invalid PR product-local date boundary",
+    });
+  }
+  return date.toISOString();
+};
+
+const canonicalizeInstant = (value: string | null): string | null => {
+  if (value === null) return null;
+
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return throwHttpProblem({
+      status: 400,
+      detail: "Invalid PR instant datetime",
+    });
+  }
+
+  return date.toISOString();
+};
+
+export const canonicalizePRTimeWindow = (
+  timeWindow: PartnerRequestFields["time"],
+): PartnerRequestFields["time"] => [
+  canonicalizeInstant(timeWindow[0]),
+  canonicalizeInstant(timeWindow[1]),
+];
+
+export const canonicalizePRAllowEditAfterReady = (
+  policy: PRAllowEditAfterReady | null | undefined,
+): PRAllowEditAfterReady | null => {
+  if (!policy) return null;
+
+  return {
+    ...policy,
+    ...(policy.timeWindow
+      ? { timeWindow: canonicalizePRTimeWindow(policy.timeWindow) as [string, string] }
+      : {}),
+  };
+};
+
+export const canonicalizePartnerRequestFieldsTime = (
+  fields: PartnerRequestFields,
+): PartnerRequestFields => ({
+  ...fields,
+  time: canonicalizePRTimeWindow(fields.time),
+});
+
+export const materializeNaturalLanguageTimeWindow = (
+  timeWindow: NaturalLanguagePartnerRequestFields["time"],
+): PartnerRequestFields["time"] => {
+  const [startRaw, endRaw] = timeWindow;
+  const startIsDateOnly = typeof startRaw === "string" && ISO_DATE_ONLY_PATTERN.test(startRaw);
+  const endIsDateOnly = typeof endRaw === "string" && ISO_DATE_ONLY_PATTERN.test(endRaw);
+
+  if (!startIsDateOnly && !endIsDateOnly) {
+    return [canonicalizeInstant(startRaw), canonicalizeInstant(endRaw)];
+  }
+
+  const start = startIsDateOnly
+    ? productLocalBoundaryToInstant(startRaw)
+    : canonicalizeInstant(startRaw);
+  const end =
+    endRaw === null && startIsDateOnly
+      ? productLocalBoundaryToInstant(addProductLocalDays(startRaw, 1))
+      : endIsDateOnly
+        ? productLocalBoundaryToInstant(addProductLocalDays(endRaw, 1))
+        : canonicalizeInstant(endRaw);
+
+  return [start, end];
+};
+
+export const materializeNaturalLanguagePartnerRequestFields = (
+  fields: NaturalLanguagePartnerRequestFields,
+): PartnerRequestFields => ({
+  ...fields,
+  time: materializeNaturalLanguageTimeWindow(fields.time),
+});
diff --git a/apps/backend/src/domains/pr-core/use-cases/create-pr-natural-language.ts b/apps/backend/src/domains/pr-core/use-cases/create-pr-natural-language.ts
index 259ceddd0..79e51f7fd 100644
--- a/apps/backend/src/domains/pr-core/use-cases/create-pr-natural-language.ts
+++ b/apps/backend/src/domains/pr-core/use-cases/create-pr-natural-language.ts
@@ -1,18 +1,13 @@
 import { PartnerRequestAIService } from "../../../services/PartnerRequestAIService";
-import type {
-  WeekdayLabel,
-} from "../../../entities/partner-request";
-import {
-  type CreatorIdentityInput,
-} from "../services/creator-identity.service";
-import {
-  type CreatePRCommandResult,
-} from "./create-pr.shared";
+import type { WeekdayLabel } from "../../../entities/partner-request";
+import { type CreatorIdentityInput } from "../services/creator-identity.service";
+import { type CreatePRCommandResult } from "./create-pr.shared";
 import { resolveNaturalLanguagePRTypeCandidates } from "../services/pr-type-options.service";
 import {
   canonicalizeNaturalLanguagePRType,
   toNaturalLanguagePRTypePromptHints,
 } from "../services/pr-type-options";
+import { materializeNaturalLanguagePartnerRequestFields } from "../services/pr-time-window-instant.service";
 import { createPRFromStructured } from "./create-pr-structured";
 
 const aiService = new PartnerRequestAIService();
@@ -30,20 +25,16 @@ export async function createPRFromNaturalLanguage(
     nowWeekday,
     toNaturalLanguagePRTypePromptHints(typeCandidates),
   );
-  const canonicalizedFields = {
+  const canonicalizedFields = materializeNaturalLanguagePartnerRequestFields({
     ...fields,
     type: canonicalizeNaturalLanguagePRType(fields.type, typeCandidates),
-  };
+  });
 
-  return createPRFromStructured(
-    canonicalizedFields,
-    creatorIdentity,
-    {
-      createSource: "NATURAL_LANGUAGE",
-      partnerBoundsMode: "automatic",
-      operationLog: {
-        detail: { rawText },
-      },
+  return createPRFromStructured(canonicalizedFields, creatorIdentity, {
+    createSource: "NATURAL_LANGUAGE",
+    partnerBoundsMode: "automatic",
+    operationLog: {
+      detail: { rawText },
     },
-  );
+  });
 }
diff --git a/apps/backend/src/domains/pr-core/use-cases/create-pr-structured.ts b/apps/backend/src/domains/pr-core/use-cases/create-pr-structured.ts
index 019778164..0bf9ff033 100644
--- a/apps/backend/src/domains/pr-core/use-cases/create-pr-structured.ts
+++ b/apps/backend/src/domains/pr-core/use-cases/create-pr-structured.ts
@@ -1,8 +1,5 @@
 import { PartnerRequestRepository } from "../../../repositories/PartnerRequestRepository";
-import type {
-  AnchorEventId,
-  PRJoinGateConfig,
-} from "../../../entities";
+import type { AnchorEventId, PRJoinGateConfig } from "../../../entities";
 import type {
   PartnerRequestFields,
   PRAllowEditAfterReady,
@@ -19,14 +16,15 @@ import {
   type CreatorIdentityInput,
 } from "../services/creator-identity.service";
 import { operationLogService } from "../../../infra/operation-log";
-import {
-  finalizeCreatedPR,
-  type CreatePRCommandResult,
-} from "./create-pr.shared";
+import { finalizeCreatedPR, type CreatePRCommandResult } from "./create-pr.shared";
 import { materializeEventDefaultsForPR } from "../services/event-default-materialization.service";
 import { assertUserPRCreationAllowedForAnchorEvent } from "../services/event-pr-creation-policy.service";
 import { normalizePartnerRequestFieldsForPersistence } from "../services/pr-place-mode.service";
 import { assertPRStartTimeHasNotPassed } from "../services/pr-time-window-guard.service";
+import {
+  canonicalizePartnerRequestFieldsTime,
+  canonicalizePRAllowEditAfterReady,
+} from "../services/pr-time-window-instant.service";
 
 const prRepo = new PartnerRequestRepository();
 
@@ -64,11 +62,7 @@ const resolvePartnerBounds = (
   mode: PartnerBoundsMode,
 ): { minPartners: number; maxPartners: number | null } => {
   if (mode === "automatic") {
-    return normalizeAutomaticPartnerBounds(
-      fields.minPartners,
-      fields.maxPartners,
-      0,
-    );
+    return normalizeAutomaticPartnerBounds(fields.minPartners, fields.maxPartners, 0);
   }
 
   const minPartners = fields.minPartners;
@@ -101,7 +95,10 @@ export async function createPRFromStructured(
   creatorIdentity: CreatorIdentityInput,
   options: StructuredCreateOptions = {},
 ): Promise<CreatePRCommandResult> {
-  const normalizedFields = normalizePartnerRequestFieldsForPersistence(fields);
+  const normalizedFields = normalizePartnerRequestFieldsForPersistence(
+    canonicalizePartnerRequestFieldsTime(fields),
+  );
+  const allowEditAfterReady = canonicalizePRAllowEditAfterReady(options.allowEditAfterReady);
   assertPRStartTimeHasNotPassed(normalizedFields.time);
   const partnerBounds = resolvePartnerBounds(
     normalizedFields,
@@ -122,8 +119,7 @@ export async function createPRFromStructured(
   const createdBy = creator?.id ?? null;
   const createSource = options.createSource ?? "FORM";
   const publicationMode = options.publicationMode ?? "finalize-by-creator-identity";
-  const initialStatus: PRStatus =
-    publicationMode === "create-open" ? "OPEN" : "DRAFT";
+  const initialStatus: PRStatus = publicationMode === "create-open" ? "OPEN" : "DRAFT";
 
   const request = await prRepo.create({
     title: normalizedFields.title,
@@ -144,13 +140,10 @@ export async function createPRFromStructured(
     confirmationStartOffsetMinutes: options.confirmationStartOffsetMinutes,
     confirmationEndOffsetMinutes: options.confirmationEndOffsetMinutes,
     joinLockOffsetMinutes: options.joinLockOffsetMinutes,
-    allowEditAfterReady: options.allowEditAfterReady ?? null,
+    allowEditAfterReady,
   });
 
-  await initializeSlotsForPR(
-    request.id,
-    null,
-  );
+  await initializeSlotsForPR(request.id, null);
 
   await materializeEventDefaultsForPR({
     prId: request.id,
diff --git a/apps/backend/src/domains/pr-core/use-cases/update-pr-content.ts b/apps/backend/src/domains/pr-core/use-cases/update-pr-content.ts
index 49f918be8..7557e5818 100644
--- a/apps/backend/src/domains/pr-core/use-cases/update-pr-content.ts
+++ b/apps/backend/src/domains/pr-core/use-cases/update-pr-content.ts
@@ -1,10 +1,7 @@
 import { throwHttpProblem } from "../../../lib/problem-details";
 import { PartnerRequestRepository } from "../../../repositories/PartnerRequestRepository";
 import { PartnerRepository } from "../../../repositories/PartnerRepository";
-import type {
-  PRId,
-  PartnerRequestFields,
-} from "../../../entities/partner-request";
+import type { PRId, PartnerRequestFields } from "../../../entities/partner-request";
 import type { UserId } from "../../../entities/user";
 import {
   countActivePartnersForPR,
@@ -32,6 +29,7 @@ import {
   assertPRContentEditable,
   resolveChangedPRContentFields,
 } from "../services/pr-edit-capability.service";
+import { canonicalizePartnerRequestFieldsTime } from "../services/pr-time-window-instant.service";
 import {
   cancelWeChatActivityStartReminderJobsForParticipant,
   cancelWeChatReminderJobsForParticipant,
@@ -42,8 +40,7 @@ const prRepo = new PartnerRequestRepository();
 const partnerRepo = new PartnerRepository();
 const RELEASE_REASON_TIME_CONFLICT_AFTER_CORE_FIELD_CHANGE =
   "TIME_CONFLICT_AFTER_CORE_FIELD_CHANGE";
-export const PARTICIPANT_RELEASE_REQUIRED_CODE =
-  "PARTICIPANT_RELEASE_REQUIRED";
+export const PARTICIPANT_RELEASE_REQUIRED_CODE = "PARTICIPANT_RELEASE_REQUIRED";
 
 export interface UpdatePRContentOptions {
   bypassEditableStatusGuard?: boolean;
@@ -67,10 +64,10 @@ const CORE_FIELD_NOTIFICATION_LABELS: Partial<
 
 const buildCoreFieldChangeMessageBody = (changedFields: string[]): string | null => {
   const labels = changedFields
-    .map((field) =>
-      CORE_FIELD_NOTIFICATION_LABELS[
-        field as keyof typeof CORE_FIELD_NOTIFICATION_LABELS
-      ] ?? null,
+    .map(
+      (field) =>
+        CORE_FIELD_NOTIFICATION_LABELS[field as keyof typeof CORE_FIELD_NOTIFICATION_LABELS] ??
+        null,
     )
     .filter((label): label is string => label !== null);
 
@@ -95,7 +92,9 @@ export async function updatePRContent(
   actorUserId: UserId | null,
   options: UpdatePRContentOptions = {},
 ): Promise<PublicPR> {
-  const normalizedFields = normalizePartnerRequestFieldsForPersistence(fields);
+  const normalizedFields = normalizePartnerRequestFieldsForPersistence(
+    canonicalizePartnerRequestFieldsTime(fields),
+  );
   const request = await prRepo.findById(id);
   if (!request) {
     return throwHttpProblem({ status: 404, detail: "Partner request not found" });
@@ -108,12 +107,8 @@ export async function updatePRContent(
   const timeChanged =
     refreshedRequest.time[0] !== normalizedFields.time[0] ||
     refreshedRequest.time[1] !== normalizedFields.time[1];
-  const typeChanged =
-    refreshedRequest.type.trim() !== normalizedFields.type.trim();
-  const changedFields = resolveChangedPRContentFields(
-    refreshedRequest,
-    normalizedFields,
-  );
+  const typeChanged = refreshedRequest.type.trim() !== normalizedFields.type.trim();
+  const changedFields = resolveChangedPRContentFields(refreshedRequest, normalizedFields);
   assertPRContentEditable({
     request: refreshedRequest,
     fields: normalizedFields,
@@ -138,9 +133,7 @@ export async function updatePRContent(
     location: normalizedFields.location,
     timeWindow: normalizedFields.time,
   });
-  const previousMeetingPoints = await captureEffectiveMeetingPointsForRequests([
-    refreshedRequest,
-  ]);
+  const previousMeetingPoints = await captureEffectiveMeetingPointsForRequests([refreshedRequest]);
 
   if (timeChanged && refreshedRequest.status !== "DRAFT") {
     const activeParticipants = await listActiveParticipantSummariesForPR(id);
@@ -170,7 +163,8 @@ export async function updatePRContent(
       if (activeParticipants.length - conflictedParticipants.length < minPartners) {
         return throwHttpProblem({
           status: 409,
-          detail: "Cannot release conflicted participants because the PR would fall below minPartners",
+          detail:
+            "Cannot release conflicted participants because the PR would fall below minPartners",
           code: "PARTICIPANT_RELEASE_BELOW_MIN_PARTNERS",
         });
       }
@@ -186,10 +180,7 @@ export async function updatePRContent(
           });
         }
         await cancelWeChatReminderJobsForParticipant(id, participant.userId);
-        await cancelWeChatActivityStartReminderJobsForParticipant(
-          id,
-          participant.userId,
-        );
+        await cancelWeChatActivityStartReminderJobsForParticipant(id, participant.userId);
         operationLogService.log({
           actorId: actorUserId,
           action: "partner.release_after_pr_core_field_change",
@@ -223,11 +214,7 @@ export async function updatePRContent(
   }
   await prRepo.clearPosterCache(id);
 
-  if (
-    minMaxChanged &&
-    refreshedRequest.status !== "DRAFT" &&
-    !options.preserveStatus
-  ) {
+  if (minMaxChanged && refreshedRequest.status !== "DRAFT" && !options.preserveStatus) {
     await recalculatePRStatus(id);
   }
 
@@ -247,9 +234,7 @@ export async function updatePRContent(
   });
 
   const coreFieldChangeMessageBody =
-    refreshedRequest.status === "DRAFT"
-      ? null
-      : buildCoreFieldChangeMessageBody(changedFields);
+    refreshedRequest.status === "DRAFT" ? null : buildCoreFieldChangeMessageBody(changedFields);
   if (coreFieldChangeMessageBody !== null && actorUserId !== null) {
     await createPersistedPRMessage({
       request: latest,
diff --git a/apps/backend/src/entities/partner-request-time.schema.test.ts b/apps/backend/src/entities/partner-request-time.schema.test.ts
new file mode 100644
index 000000000..18565560e
--- /dev/null
+++ b/apps/backend/src/entities/partner-request-time.schema.test.ts
@@ -0,0 +1,49 @@
+import assert from "node:assert/strict";
+import { test } from "vitest";
+import {
+  naturalLanguagePartnerRequestFieldsSchema,
+  partnerRequestFieldsSchema,
+} from "./partner-request";
+
+const baseFields = {
+  title: "Badminton partner",
+  type: "badminton",
+  location: "Scenario Court",
+  route: null,
+  minPartners: 2,
+  maxPartners: null,
+  partners: [],
+  budget: null,
+  preferences: [],
+  notes: null,
+};
+
+test("partnerRequestFieldsSchema accepts offset datetime PR time windows", () => {
+  assert.equal(
+    partnerRequestFieldsSchema.safeParse({
+      ...baseFields,
+      time: ["2026-06-27T00:00:00+08:00", "2026-06-27T01:00:00+08:00"],
+    }).success,
+    true,
+  );
+});
+
+test("partnerRequestFieldsSchema rejects persisted date-only PR time windows", () => {
+  assert.equal(
+    partnerRequestFieldsSchema.safeParse({
+      ...baseFields,
+      time: ["2026-06-27", null],
+    }).success,
+    false,
+  );
+});
+
+test("naturalLanguagePartnerRequestFieldsSchema keeps date-only as parse-only input", () => {
+  assert.equal(
+    naturalLanguagePartnerRequestFieldsSchema.safeParse({
+      ...baseFields,
+      time: ["2026-06-27", null],
+    }).success,
+    true,
+  );
+});
diff --git a/apps/backend/src/entities/partner-request.ts b/apps/backend/src/entities/partner-request.ts
index 307c449fe..fa9cb8f43 100644
--- a/apps/backend/src/entities/partner-request.ts
+++ b/apps/backend/src/entities/partner-request.ts
@@ -12,14 +12,8 @@ import {
 import { sql } from "drizzle-orm";
 import { createInsertSchema, createSelectSchema } from "drizzle-zod";
 import { z } from "zod";
-import {
-  meetingPointConfigSchema,
-  type MeetingPointConfig,
-} from "./meeting-point";
-import {
-  prJoinGateConfigSchema,
-  type PRJoinGateConfig,
-} from "./join-gate";
+import { meetingPointConfigSchema, type MeetingPointConfig } from "./meeting-point";
+import { prJoinGateConfigSchema, type PRJoinGateConfig } from "./join-gate";
 import { users, type UserId } from "./user";
 import {
   feedbackQuestionnaireInstances,
@@ -28,15 +22,12 @@ import {
 import type { TradeOrderId } from "./trade-order";
 
 const isoDateSchema = z.string().regex(/^\d{4}-\d{2}-\d{2}$/);
-const isoDateTimeSchema = z.string().datetime();
-const isoDateOrDateTimeSchema = z.union([isoDateTimeSchema, isoDateSchema]);
+const instantDateTimeSchema = z.string().datetime({ offset: true });
+const naturalLanguageDateOrInstantSchema = z.union([instantDateTimeSchema, isoDateSchema]);
 const partnerSlotIdSchema = z.number().int().positive();
 const weekdayLabelSchema = z.string().trim().min(1).max(32);
 export type WeekdayLabel = z.infer<typeof weekdayLabelSchema>;
-export const coordinatePairSchema = z.tuple([
-  z.number(),
-  z.number(),
-]);
+export const coordinatePairSchema = z.tuple([z.number(), z.number()]);
 export type CoordinatePair = z.infer<typeof coordinatePairSchema>;
 export const prRoutePointSchema = z
   .object({
@@ -63,25 +54,18 @@ export type PRRoute = z.infer<typeof prRouteSchema>;
 
 export const prAllowEditAfterReadySchema = z
   .object({
-    timeWindow: z
-      .tuple([isoDateOrDateTimeSchema, isoDateOrDateTimeSchema])
-      .optional(),
+    timeWindow: z.tuple([instantDateTimeSchema, instantDateTimeSchema]).optional(),
     location: z.literal(true).optional(),
     route: z.literal(true).optional(),
   })
   .strict();
-export type PRAllowEditAfterReady = z.infer<
-  typeof prAllowEditAfterReadySchema
->;
+export type PRAllowEditAfterReady = z.infer<typeof prAllowEditAfterReadySchema>;
 
 // Partner request fields (from LLM / client edits)
 export const partnerRequestFieldsObjectSchema = z.object({
   title: z.string().optional(),
   type: z.string(),
-  time: z.tuple([
-    isoDateOrDateTimeSchema.nullable(),
-    isoDateOrDateTimeSchema.nullable(),
-  ]),
+  time: z.tuple([instantDateTimeSchema.nullable(), instantDateTimeSchema.nullable()]),
   location: z.string().nullable(),
   route: prRouteSchema.nullable().default(null),
   minPartners: z.number().int().nonnegative().nullable(),
@@ -93,35 +77,49 @@ export const partnerRequestFieldsObjectSchema = z.object({
   meetingPoint: meetingPointConfigSchema.nullable().optional(),
 });
 
-export const partnerRequestFieldsSchema = partnerRequestFieldsObjectSchema.superRefine((fields, ctx) => {
-  const hasLocation = (fields.location?.trim() ?? "").length > 0;
-  if (hasLocation && fields.route !== null) {
-    ctx.addIssue({
-      code: z.ZodIssueCode.custom,
-      message: "PartnerRequest must use either location or route",
-      path: ["route"],
-    });
-  }
-});
+export const partnerRequestFieldsSchema = partnerRequestFieldsObjectSchema.superRefine(
+  (fields, ctx) => {
+    const hasLocation = (fields.location?.trim() ?? "").length > 0;
+    if (hasLocation && fields.route !== null) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "PartnerRequest must use either location or route",
+        path: ["route"],
+      });
+    }
+  },
+);
 
 export type PartnerRequestFields = z.infer<typeof partnerRequestFieldsSchema>;
 
+export const naturalLanguagePartnerRequestFieldsObjectSchema =
+  partnerRequestFieldsObjectSchema.extend({
+    time: z.tuple([
+      naturalLanguageDateOrInstantSchema.nullable(),
+      naturalLanguageDateOrInstantSchema.nullable(),
+    ]),
+  });
+
+export const naturalLanguagePartnerRequestFieldsSchema =
+  naturalLanguagePartnerRequestFieldsObjectSchema.superRefine((fields, ctx) => {
+    const hasLocation = (fields.location?.trim() ?? "").length > 0;
+    if (hasLocation && fields.route !== null) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "PartnerRequest must use either location or route",
+        path: ["route"],
+      });
+    }
+  });
+
+export type NaturalLanguagePartnerRequestFields = z.infer<
+  typeof naturalLanguagePartnerRequestFieldsSchema
+>;
+
 // Status enum
-export const prStatusSchema = z.enum([
-  "DRAFT",
-  "OPEN",
-  "READY",
-  "ACTIVE",
-  "CLOSED",
-  "EXPIRED",
-]);
+export const prStatusSchema = z.enum(["DRAFT", "OPEN", "READY", "ACTIVE", "CLOSED", "EXPIRED"]);
 export type PRStatus = z.infer<typeof prStatusSchema>;
-export const prStatusManualSchema = z.enum([
-  "OPEN",
-  "READY",
-  "ACTIVE",
-  "CLOSED",
-]);
+export const prStatusManualSchema = z.enum(["OPEN", "READY", "ACTIVE", "CLOSED"]);
 export type PRStatusManual = z.infer<typeof prStatusManualSchema>;
 
 export const visibilityStatusSchema = z.enum(["VISIBLE", "HIDDEN"]);
@@ -130,22 +128,17 @@ export type VisibilityStatus = z.infer<typeof visibilityStatusSchema>;
 export const paymentModelSchema = z.enum(["A", "C"]);
 export type PaymentModel = z.infer<typeof paymentModelSchema>;
 
-export const economicPolicyScopeSchema = z.enum([
-  "EVENT_DEFAULT",
-  "BATCH_OVERRIDE",
-]);
+export const economicPolicyScopeSchema = z.enum(["EVENT_DEFAULT", "BATCH_OVERRIDE"]);
 export type EconomicPolicyScope = z.infer<typeof economicPolicyScopeSchema>;
 
 export const createPRStructuredStatusSchema = z.literal("DRAFT");
-export type CreatePRStructuredStatus = z.infer<
-  typeof createPRStructuredStatusSchema
->;
+export type CreatePRStructuredStatus = z.infer<typeof createPRStructuredStatusSchema>;
 
 export const createStructuredPRSchema = partnerRequestFieldsSchema;
 
 export const createNaturalLanguagePRSchema = z.object({
   rawText: z.string().min(1).max(2000),
-  nowIso: z.string().datetime(),
+  nowIso: instantDateTimeSchema,
   nowWeekday: weekdayLabelSchema.nullable().optional(),
 });
 
@@ -191,14 +184,9 @@ export const partnerRequests = pgTable("partner_requests", {
   maxPartners: integer("max_partners"),
   budget: text("budget"),
   createdAt: timestamp("created_at").notNull().defaultNow(),
-  preferences: text("preferences")
-    .array()
-    .notNull()
-    .default(sql`ARRAY[]::text[]`),
+  preferences: text("preferences").array().notNull().default(sql`ARRAY[]::text[]`),
   notes: text("notes"),
-  meetingPoint: jsonb("meeting_point")
-    .$type<MeetingPointConfig | null>()
-    .default(null),
+  meetingPoint: jsonb("meeting_point").$type<MeetingPointConfig | null>().default(null),
   allowEditAfterReady: jsonb("allow_edit_after_ready")
     .$type<PRAllowEditAfterReady | null>()
     .default(null),
@@ -206,11 +194,7 @@ export const partnerRequests = pgTable("partner_requests", {
     .$type<PRJoinGateConfig>()
     .notNull()
     .default(sql`'[]'::jsonb`),
-  orders: uuid("orders")
-    .array()
-    .$type<TradeOrderId[]>()
-    .notNull()
-    .default(sql`ARRAY[]::uuid[]`),
+  orders: uuid("orders").array().$type<TradeOrderId[]>().notNull().default(sql`ARRAY[]::uuid[]`),
   feedbackQuestionnaireInstanceId: bigint("feedback_questionnaire_instance_id", {
     mode: "number",
   })
@@ -224,9 +208,7 @@ export const partnerRequests = pgTable("partner_requests", {
   xiaohongshuPoster: jsonb("xiaohongshu_poster")
     .$type<XiaohongshuPosterCache | null>()
     .default(null),
-  wechatThumbnail: jsonb("wechat_thumbnail")
-    .$type<WechatThumbnailCache | null>()
-    .default(null),
+  wechatThumbnail: jsonb("wechat_thumbnail").$type<WechatThumbnailCache | null>().default(null),
 });
 
 // Zod schemas for validation
diff --git a/apps/backend/src/services/PartnerRequestAIService.ts b/apps/backend/src/services/PartnerRequestAIService.ts
index d715e7fac..1fb51f78e 100644
--- a/apps/backend/src/services/PartnerRequestAIService.ts
+++ b/apps/backend/src/services/PartnerRequestAIService.ts
@@ -1,8 +1,8 @@
 import { generateObject } from "ai";
 import { createOpenAI, openai } from "@ai-sdk/openai";
 import {
-  partnerRequestFieldsSchema,
-  type PartnerRequestFields,
+  naturalLanguagePartnerRequestFieldsSchema,
+  type NaturalLanguagePartnerRequestFields,
   type WeekdayLabel,
 } from "../entities/partner-request";
 import { env } from "../lib/env";
@@ -11,8 +11,7 @@ import { ConfigService } from "./ConfigService";
 import { buildPartnerRequestParsePromptVariablesJson } from "./llm/prompt-variables";
 import { DEFAULT_PARTNER_REQUEST_PARSE_SYSTEM_PROMPT } from "./prompts/partnerRequestParsePrompt";
 
-const CONFIG_KEY_PARTNER_REQUEST_PARSE_SYSTEM_PROMPT =
-  "partner_request.parse_system_prompt";
+const CONFIG_KEY_PARTNER_REQUEST_PARSE_SYSTEM_PROMPT = "partner_request.parse_system_prompt";
 
 type PartnerRequestParseTypeHints = {
   existingPRTypes: string[];
@@ -54,7 +53,7 @@ export class PartnerRequestAIService {
     nowIso: string,
     nowWeekday: WeekdayLabel | null,
     typeHints?: PartnerRequestParseTypeHints,
-  ): Promise<PartnerRequestFields> {
+  ): Promise<NaturalLanguagePartnerRequestFields> {
     const systemPrompt = await this.configService.getValueOrFallback(
       CONFIG_KEY_PARTNER_REQUEST_PARSE_SYSTEM_PROMPT,
       DEFAULT_PARTNER_REQUEST_PARSE_SYSTEM_PROMPT,
@@ -72,7 +71,7 @@ export class PartnerRequestAIService {
 
     const { object } = await generateObject({
       model: this.client(env.LLM_DEFAULT_MODEL),
-      schema: partnerRequestFieldsSchema,
+      schema: naturalLanguagePartnerRequestFieldsSchema,
       system: systemPrompt,
       prompt,
       temperature: 0.3,
diff --git a/apps/backend/src/services/prompts/partnerRequestParsePrompt.test.ts b/apps/backend/src/services/prompts/partnerRequestParsePrompt.test.ts
index e6a7a4960..0c8abf601 100644
--- a/apps/backend/src/services/prompts/partnerRequestParsePrompt.test.ts
+++ b/apps/backend/src/services/prompts/partnerRequestParsePrompt.test.ts
@@ -4,21 +4,23 @@ import { DEFAULT_PARTNER_REQUEST_PARSE_SYSTEM_PROMPT } from "./partnerRequestPar
 
 test("default PR parse prompt explains type candidate priority", () => {
   assert.equal(
-    DEFAULT_PARTNER_REQUEST_PARSE_SYSTEM_PROMPT.includes(
-      "typeSelection.existingPRTypes",
-    ),
+    DEFAULT_PARTNER_REQUEST_PARSE_SYSTEM_PROMPT.includes("typeSelection.existingPRTypes"),
     true,
   );
   assert.equal(
-    DEFAULT_PARTNER_REQUEST_PARSE_SYSTEM_PROMPT.includes(
-      "typeSelection.anchorEventTypes",
-    ),
+    DEFAULT_PARTNER_REQUEST_PARSE_SYSTEM_PROMPT.includes("typeSelection.anchorEventTypes"),
     true,
   );
   assert.equal(
-    DEFAULT_PARTNER_REQUEST_PARSE_SYSTEM_PROMPT.includes(
-      "候选缺少匹配时，概括一个新的活动类型",
-    ),
+    DEFAULT_PARTNER_REQUEST_PARSE_SYSTEM_PROMPT.includes("候选缺少匹配时，概括一个新的活动类型"),
     true,
   );
 });
+
+test("default PR parse prompt maps date-only input to all-day instants", () => {
+  assert.equal(
+    DEFAULT_PARTNER_REQUEST_PARSE_SYSTEM_PROMPT.includes("start 为该日期 00:00，end 为次日 00:00"),
+    true,
+  );
+  assert.equal(DEFAULT_PARTNER_REQUEST_PARSE_SYSTEM_PROMPT.includes('["2026-02-08", null]'), false);
+});
diff --git a/apps/backend/src/services/prompts/partnerRequestParsePrompt.ts b/apps/backend/src/services/prompts/partnerRequestParsePrompt.ts
index dc3feb8a9..27540ef54 100644
--- a/apps/backend/src/services/prompts/partnerRequestParsePrompt.ts
+++ b/apps/backend/src/services/prompts/partnerRequestParsePrompt.ts
@@ -7,9 +7,9 @@ export const DEFAULT_PARTNER_REQUEST_PARSE_SYSTEM_PROMPT = `你是一个搭子
   - 其次从 typeSelection.anchorEventTypes 中选择语义匹配的原始 type 字符串
   - 候选缺少匹配时，概括一个新的活动类型
   - 输出候选时保持候选 type 的原始字面值
-- time: [start, end]，每一项为 ISO 8601 datetime 或日期(YYYY-MM-DD)或 null
+- time: [start, end]，每一项为带时区的 ISO 8601 datetime 或 null
   - 仅当用户明确给出时间点/时段时才填入 datetime
-  - 若用户只给出日期，输出日期字符串
+  - 若用户只给出日期，将该日期解析为产品本地全天窗口：start 为该日期 00:00，end 为次日 00:00，均输出带时区 datetime
   - 相对时间词（如“今天/明天/周末/下周末”）优先结合 nowIso 与 nowWeekday（若提供）解析
   - 无约束为 null
 - location: 地点，无则 null
@@ -21,5 +21,5 @@ export const DEFAULT_PARTNER_REQUEST_PARSE_SYSTEM_PROMPT = `你是一个搭子
 - notes: 备注，无则 null
 
 示例：
-- time: ["2026-02-08", null]
+- time: ["2026-02-08T00:00:00+08:00", "2026-02-09T00:00:00+08:00"]
 - time: ["2026-02-08T09:00:00.000Z", "2026-02-08T12:00:00.000Z"]`;
diff --git a/apps/frontend/src/domains/event/model/form-mode.test.ts b/apps/frontend/src/domains/event/model/form-mode.test.ts
index 9f50f6bb8..cdd399610 100644
--- a/apps/frontend/src/domains/event/model/form-mode.test.ts
+++ b/apps/frontend/src/domains/event/model/form-mode.test.ts
@@ -23,12 +23,11 @@ const presetStartOption = {
 
 describe("form mode time options", () => {
   test("buildAdvancedModeStartOptions rounds from now and stops at earliest lead boundary", () => {
-    expect(buildAdvancedModeStartOptions(15, now).map((option) => option.startAt))
-      .toEqual([
-        "2026-05-17T10:05:00.000Z",
-        "2026-05-17T10:10:00.000Z",
-        "2026-05-17T10:15:00.000Z",
-      ]);
+    expect(buildAdvancedModeStartOptions(15, now).map((option) => option.startAt)).toEqual([
+      "2026-05-17T10:05:00.000Z",
+      "2026-05-17T10:10:00.000Z",
+      "2026-05-17T10:15:00.000Z",
+    ]);
   });
 
   test("shouldAutoOpenAdvancedFormModeTime opens when no preset time is available and earliest lead can produce options", () => {
@@ -36,9 +35,7 @@ describe("form mode time options", () => {
   });
 
   test("shouldAutoOpenAdvancedFormModeTime keeps preset mode when preset time is available", () => {
-    expect(
-      shouldAutoOpenAdvancedFormModeTime([presetStartOption], 15, now),
-    ).toBe(false);
+    expect(shouldAutoOpenAdvancedFormModeTime([presetStartOption], 15, now)).toBe(false);
   });
 
   test("shouldAutoOpenAdvancedFormModeTime stays closed when earliest lead cannot produce options", () => {
@@ -46,15 +43,10 @@ describe("form mode time options", () => {
   });
 
   test("buildFormModeFuzzyDateOptions derives fixed seven-day relative dates from now", () => {
-    const options = buildFormModeFuzzyDateOptions(
-      new Date("2026-05-19T01:00:00.000Z"),
-    );
+    const options = buildFormModeFuzzyDateOptions(new Date("2026-05-19T01:00:00.000Z"));
 
     expect(options).toHaveLength(7);
-    expect(options.map((option) => option.label).slice(0, 2)).toEqual([
-      "今天",
-      "明天",
-    ]);
+    expect(options.map((option) => option.label).slice(0, 2)).toEqual(["今天", "明天"]);
     expect(options.map((option) => option.value)).toEqual([
       "2026-05-19",
       "2026-05-20",
@@ -74,7 +66,7 @@ describe("form mode time options", () => {
       { label: "傍晚", value: "DUSK", startTime: "17:00", endTime: "19:00" },
       { label: "夜晚", value: "NIGHT", startTime: "19:00", endTime: "23:00" },
       { label: "午夜", value: "LATE_NIGHT", startTime: "23:00", endTime: "06:00" },
-      { label: "全天", value: "ALL_DAY", startTime: "00:00", endTime: "23:59" },
+      { label: "全天", value: "ALL_DAY", startTime: "00:00", endTime: "00:00" },
     ]);
   });
 
@@ -95,11 +87,7 @@ describe("form mode time options", () => {
       },
     ]);
     expect(
-      formatFormModeFuzzySelectionLabel(
-        "2026-05-20",
-        "DUSK",
-        new Date("2026-05-19T01:00:00.000Z"),
-      ),
+      formatFormModeFuzzySelectionLabel("2026-05-20", "DUSK", new Date("2026-05-19T01:00:00.000Z")),
     ).toBe("明天傍晚");
   });
 
@@ -107,7 +95,7 @@ describe("form mode time options", () => {
     expect(buildFormModeFuzzyTimeWindows("2026-05-20", "ALL_DAY")).toEqual([
       {
         startAt: "2026-05-19T16:00:00.000Z",
-        endAt: "2026-05-20T15:59:00.000Z",
+        endAt: "2026-05-20T16:00:00.000Z",
       },
     ]);
     expect(
diff --git a/apps/frontend/src/domains/event/model/form-mode.ts b/apps/frontend/src/domains/event/model/form-mode.ts
index cbc531d91..3c1e09484 100644
--- a/apps/frontend/src/domains/event/model/form-mode.ts
+++ b/apps/frontend/src/domains/event/model/form-mode.ts
@@ -43,13 +43,12 @@ export type FormModeFuzzyTimePreset =
   | "LATE_NIGHT"
   | "ALL_DAY";
 
-export type FormModeTimeSelection =
-  {
-    mode: FormModeTimeMode;
-    label: string;
-    timeWindows: FormModeRecommendationTimeWindow[];
-    createTimeWindow: FormModeCreateTimeWindow | null;
-  };
+export type FormModeTimeSelection = {
+  mode: FormModeTimeMode;
+  label: string;
+  timeWindows: FormModeRecommendationTimeWindow[];
+  createTimeWindow: FormModeCreateTimeWindow | null;
+};
 
 export type FormModeRecommendationTimeWindow = {
   startAt: string;
@@ -79,9 +78,7 @@ const parseFormModeDateTime = (value: string): Date | null => {
   return Number.isNaN(date.getTime()) ? null : date;
 };
 
-export const isValidFormModeDateTime = (
-  value: string | null | undefined,
-): value is string =>
+export const isValidFormModeDateTime = (value: string | null | undefined): value is string =>
   typeof value === "string" && parseFormModeDateTime(value) !== null;
 
 export const buildFormModeDateKey = (isoDateTime: string): string => {
@@ -107,11 +104,7 @@ const parseDateKeyAsUtc = (dateKey: string): Date | null => {
   const year = Number(yearText);
   const month = Number(monthText);
   const day = Number(dayText);
-  if (
-    !Number.isInteger(year) ||
-    !Number.isInteger(month) ||
-    !Number.isInteger(day)
-  ) {
+  if (!Number.isInteger(year) || !Number.isInteger(month) || !Number.isInteger(day)) {
     return null;
   }
   return new Date(Date.UTC(year, month - 1, day));
@@ -157,10 +150,7 @@ const formatMonthDayFromDateKey = (dateKey: string): string => {
   return `${date.getUTCMonth() + 1}月${date.getUTCDate()}日`;
 };
 
-const formatRelativeDateOptionLabel = (
-  dateKey: string,
-  now: Date,
-): string => {
+const formatRelativeDateOptionLabel = (dateKey: string, now: Date): string => {
   const todayKey = dateKeyFormatter.format(now);
   const tomorrowKey = addDaysToDateKey(todayKey, 1);
   if (dateKey === todayKey) {
@@ -171,12 +161,10 @@ const formatRelativeDateOptionLabel = (
   }
 
   const weekday = getDateKeyDayOfWeek(dateKey);
-  const weekdayLabel = weekday === null ? "" : WEEKDAY_LABELS[weekday] ?? "";
+  const weekdayLabel = weekday === null ? "" : (WEEKDAY_LABELS[weekday] ?? "");
   const currentWeekStart = getDateKeyWeekStart(todayKey);
   const optionWeekStart = getDateKeyWeekStart(dateKey);
-  const nextWeekStart = currentWeekStart
-    ? addDaysToDateKey(currentWeekStart, 7)
-    : null;
+  const nextWeekStart = currentWeekStart ? addDaysToDateKey(currentWeekStart, 7) : null;
   if (optionWeekStart && optionWeekStart === currentWeekStart) {
     return `本${weekdayLabel}`;
   }
@@ -208,7 +196,7 @@ export const buildFormModeFuzzyTimeOptions = (): FormModeFuzzyTimeOption[] => [
   { label: "傍晚", value: "DUSK", startTime: "17:00", endTime: "19:00" },
   { label: "夜晚", value: "NIGHT", startTime: "19:00", endTime: "23:00" },
   { label: "午夜", value: "LATE_NIGHT", startTime: "23:00", endTime: "06:00" },
-  { label: "全天", value: "ALL_DAY", startTime: "00:00", endTime: "23:59" },
+  { label: "全天", value: "ALL_DAY", startTime: "00:00", endTime: "00:00" },
 ];
 
 const buildProductLocalIso = (dateKey: string, timeKey: string): string | null => {
@@ -235,9 +223,7 @@ export const buildFormModeCreateTimeWindow = (
 
   return {
     startAt,
-    endAt: new Date(
-      new Date(startAt).getTime() + durationMinutes * MINUTE_MS,
-    ).toISOString(),
+    endAt: new Date(new Date(startAt).getTime() + durationMinutes * MINUTE_MS).toISOString(),
   };
 };
 
@@ -245,21 +231,14 @@ export const buildFormModeFuzzyTimeWindows = (
   dateKey: string,
   timePreset: FormModeFuzzyTimePreset,
 ): FormModeRecommendationTimeWindow[] => {
-  const option = buildFormModeFuzzyTimeOptions().find(
-    (item) => item.value === timePreset,
-  );
+  const option = buildFormModeFuzzyTimeOptions().find((item) => item.value === timePreset);
   if (!option) {
     return [];
   }
 
   const startAt = buildProductLocalIso(dateKey, option.startTime);
-  const endDateKey =
-    option.endTime <= option.startTime
-      ? addDaysToDateKey(dateKey, 1)
-      : dateKey;
-  const endAt = endDateKey
-    ? buildProductLocalIso(endDateKey, option.endTime)
-    : null;
+  const endDateKey = option.endTime <= option.startTime ? addDaysToDateKey(dateKey, 1) : dateKey;
+  const endAt = endDateKey ? buildProductLocalIso(endDateKey, option.endTime) : null;
   if (!startAt || !endAt) {
     return [];
   }
@@ -275,9 +254,7 @@ export const formatFormModeFuzzySelectionLabel = (
   const dateOption = buildFormModeFuzzyDateOptions(now).find(
     (option) => option.value === dateValue,
   );
-  const timeOption = buildFormModeFuzzyTimeOptions().find(
-    (option) => option.value === timePreset,
-  );
+  const timeOption = buildFormModeFuzzyTimeOptions().find((option) => option.value === timePreset);
   const dateLabel = dateOption?.label ?? "";
   const timeLabel = timeOption?.label ?? "";
   return dateLabel || timeLabel ? `${dateLabel}${timeLabel}` : "";
@@ -330,9 +307,7 @@ export const buildFormModeStartAtFromRouteParts = (
   return isoDateTime;
 };
 
-export const formatFormModeDurationLabel = (
-  durationMinutes: number | null,
-): string => {
+export const formatFormModeDurationLabel = (durationMinutes: number | null): string => {
   if (durationMinutes === null || durationMinutes <= 0) {
     return "";
   }
@@ -349,18 +324,10 @@ export const formatFormModeDurationLabel = (
 };
 
 const buildStableSeed = (seed: string): number =>
-  Array.from(seed).reduce(
-    (accumulator, character) => accumulator + character.charCodeAt(0),
-    0,
-  );
+  Array.from(seed).reduce((accumulator, character) => accumulator + character.charCodeAt(0), 0);
 
-export const pickStableGalleryImage = (
-  gallery: readonly string[],
-  seed: string,
-): string | null => {
-  const normalizedGallery = gallery
-    .map((item) => item.trim())
-    .filter((item) => item.length > 0);
+export const pickStableGalleryImage = (gallery: readonly string[], seed: string): string | null => {
+  const normalizedGallery = gallery.map((item) => item.trim()).filter((item) => item.length > 0);
   if (normalizedGallery.length === 0) {
     return null;
   }
@@ -413,8 +380,7 @@ export const buildPreferenceTagGroups = (tags: readonly PresetTag[]) => {
       tags: items,
     })),
     uncategorized,
-    uncategorizedLabel:
-      categorized.size === 0 && uncategorized.length > 0 ? "偏好" : "其它",
+    uncategorizedLabel: categorized.size === 0 && uncategorized.length > 0 ? "偏好" : "其它",
   };
 };
 
@@ -436,11 +402,7 @@ export const buildAdvancedModeStartOptions = (
   const boundary = new Date(now.getTime() + earliestLeadMinutes * MINUTE_MS);
   const values: StartOption[] = [];
 
-  for (
-    let cursor = start.getTime();
-    cursor <= boundary.getTime();
-    cursor += FIVE_MINUTE_MS
-  ) {
+  for (let cursor = start.getTime(); cursor <= boundary.getTime(); cursor += FIVE_MINUTE_MS) {
     const startAt = new Date(cursor).toISOString();
     values.push({
       key: `${startAt}::advanced`,
@@ -473,9 +435,7 @@ export const buildStartOptionsByDate = (startOptions: readonly StartOption[]) =>
     .map(([dateKey, options]) => ({
       dateKey,
       dateLabel: formatFormModeDateLabel(options[0]?.startAt ?? dateKey),
-      options: [...options].sort((left, right) =>
-        left.startAt.localeCompare(right.startAt),
-      ),
+      options: [...options].sort((left, right) => left.startAt.localeCompare(right.startAt)),
     }))
     .sort((left, right) => left.dateKey.localeCompare(right.dateKey));
 };
diff --git a/apps/frontend/src/domains/event/model/pr-time-window-editor.test.ts b/apps/frontend/src/domains/event/model/pr-time-window-editor.test.ts
index 0f99fe0c8..3cdea443d 100644
--- a/apps/frontend/src/domains/event/model/pr-time-window-editor.test.ts
+++ b/apps/frontend/src/domains/event/model/pr-time-window-editor.test.ts
@@ -6,33 +6,18 @@ import {
 
 describe("PR time window editor model", () => {
   test("builds ready-edit policy only for fuzzy complete time windows", () => {
-    const timeWindow: [string, string] = [
-      "2026-06-01T16:00:00.000Z",
-      "2026-06-02T15:59:00.000Z",
-    ];
+    const timeWindow: [string, string] = ["2026-06-01T16:00:00.000Z", "2026-06-02T16:00:00.000Z"];
 
-    expect(
-      buildAllowEditAfterReadyForTimeWindowMode("FUZZY", timeWindow),
-    ).toEqual({
+    expect(buildAllowEditAfterReadyForTimeWindowMode("FUZZY", timeWindow)).toEqual({
       timeWindow,
     });
-    expect(
-      buildAllowEditAfterReadyForTimeWindowMode("NORMAL", timeWindow),
-    ).toBeNull();
-    expect(
-      buildAllowEditAfterReadyForTimeWindowMode("FUZZY", [
-        timeWindow[0],
-        null,
-      ]),
-    ).toBeNull();
+    expect(buildAllowEditAfterReadyForTimeWindowMode("NORMAL", timeWindow)).toBeNull();
+    expect(buildAllowEditAfterReadyForTimeWindowMode("FUZZY", [timeWindow[0], null])).toBeNull();
   });
 
   test("resolves all-day fuzzy preset from a PR time window", () => {
     expect(
-      findFuzzyPresetForTimeWindow([
-        "2026-06-01T16:00:00.000Z",
-        "2026-06-02T15:59:00.000Z",
-      ]),
+      findFuzzyPresetForTimeWindow(["2026-06-01T16:00:00.000Z", "2026-06-02T16:00:00.000Z"]),
     ).toEqual({
       dateValue: "2026-06-02",
       timePreset: "ALL_DAY",
diff --git a/apps/frontend/src/domains/event/queries/useCreateEventAssistedPR.test.ts b/apps/frontend/src/domains/event/queries/useCreateEventAssistedPR.test.ts
index 5d09feb0a..7d42be98a 100644
--- a/apps/frontend/src/domains/event/queries/useCreateEventAssistedPR.test.ts
+++ b/apps/frontend/src/domains/event/queries/useCreateEventAssistedPR.test.ts
@@ -1,8 +1,5 @@
 import { describe, expect, test } from "vitest";
-import type {
-  PartnerRequestFields,
-  PRAllowEditAfterReady,
-} from "@partner-up-dev/backend";
+import type { PartnerRequestFields, PRAllowEditAfterReady } from "@partner-up-dev/backend";
 import { buildEventAssistedPRCreateBody } from "./useCreateEventAssistedPR";
 
 const fields: PartnerRequestFields = {
@@ -54,10 +51,7 @@ describe("event-assisted PR create query", () => {
 
   test("buildEventAssistedPRCreateBody carries fuzzy ready-edit policy", () => {
     const allowEditAfterReady: PRAllowEditAfterReady = {
-      timeWindow: [
-        "2038-01-01T16:00:00.000Z",
-        "2038-01-02T15:59:00.000Z",
-      ],
+      timeWindow: ["2038-01-01T16:00:00.000Z", "2038-01-02T16:00:00.000Z"],
     };
 
     expect(
diff --git a/apps/frontend/src/domains/event/queries/useCreateFormModeAutoPR.test.ts b/apps/frontend/src/domains/event/queries/useCreateFormModeAutoPR.test.ts
index 59dd0581d..96ed56732 100644
--- a/apps/frontend/src/domains/event/queries/useCreateFormModeAutoPR.test.ts
+++ b/apps/frontend/src/domains/event/queries/useCreateFormModeAutoPR.test.ts
@@ -22,16 +22,10 @@ const route: PRRoute = [
 describe("Form Mode auto PR create query", () => {
   test("submits auto-create route scope without user-owned structured fields", () => {
     const allowEditAfterReady: PRAllowEditAfterReady = {
-      timeWindow: [
-        "2038-01-01T16:00:00.000Z",
-        "2038-01-02T15:59:00.000Z",
-      ],
+      timeWindow: ["2038-01-01T16:00:00.000Z", "2038-01-02T16:00:00.000Z"],
     };
     const body = buildFormModeAutoCreateBody({
-      timeWindow: [
-        "2038-01-02T12:35:00.000Z",
-        "2038-01-02T13:35:00.000Z",
-      ],
+      timeWindow: ["2038-01-02T12:35:00.000Z", "2038-01-02T13:35:00.000Z"],
       place: {
         kind: "route",
         route,
@@ -41,10 +35,7 @@ describe("Form Mode auto PR create query", () => {
     });
 
     expect(body).toEqual({
-      timeWindow: [
-        "2038-01-02T12:35:00.000Z",
-        "2038-01-02T13:35:00.000Z",
-      ],
+      timeWindow: ["2038-01-02T12:35:00.000Z", "2038-01-02T13:35:00.000Z"],
       place: {
         kind: "route",
         route,
diff --git a/apps/frontend/src/domains/pr/ui/forms/DateTimeRangePicker.vue b/apps/frontend/src/domains/pr/ui/forms/DateTimeRangePicker.vue
index aafee6e45..4ee4a1953 100644
--- a/apps/frontend/src/domains/pr/ui/forms/DateTimeRangePicker.vue
+++ b/apps/frontend/src/domains/pr/ui/forms/DateTimeRangePicker.vue
@@ -90,6 +90,10 @@ import { computed, nextTick, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import type { PartnerRequestFields } from "@partner-up-dev/backend";
 import { PuButton } from "@partner-up-dev/design-web";
+import {
+  instantToLocalDateTimeInputParts,
+  localDateTimeInputPartsToInstant,
+} from "@/shared/datetime/localDateTimeInput";
 
 type TimeWindow = PartnerRequestFields["time"];
 
@@ -109,37 +113,14 @@ const props = withDefaults(defineProps<Props>(), {
 const { t } = useI18n();
 const testIdPrefix = computed(() => props.testIdPrefix);
 
-const labelText = computed(
-  () => props.label ?? t("dateTimeRangePicker.defaultLabel"),
-);
+const labelText = computed(() => props.label ?? t("dateTimeRangePicker.defaultLabel"));
 
-const hintText = computed(
-  () => props.hint ?? t("dateTimeRangePicker.defaultHint"),
-);
+const hintText = computed(() => props.hint ?? t("dateTimeRangePicker.defaultHint"));
 
 const emit = defineEmits<{
   "update:modelValue": [TimeWindow];
 }>();
 
-const splitTimeValue = (
-  value: string | null,
-): { date: string | null; time: string | null } => {
-  if (!value) return { date: null, time: null };
-  if (!value.includes("T")) return { date: value, time: null };
-  const [datePart, timePart = ""] = value.split("T");
-  const timeMatch = timePart.match(/^\d{2}:\d{2}/);
-  return { date: datePart || null, time: timeMatch ? timeMatch[0] : null };
-};
-
-const buildTimeValue = (
-  date: string | null,
-  time: string | null,
-): string | null => {
-  if (!date) return null;
-  if (!time) return date;
-  return `${date}T${time}`;
-};
-
 const startDate = ref<string | null>(null);
 const startTime = ref<string | null>(null);
 const endDate = ref<string | null>(null);
@@ -148,8 +129,8 @@ const endTime = ref<string | null>(null);
 const isSyncing = ref(false);
 
 const syncFromModel = (value: TimeWindow) => {
-  const start = splitTimeValue(value?.[0] ?? null);
-  const end = splitTimeValue(value?.[1] ?? null);
+  const start = instantToLocalDateTimeInputParts(value?.[0] ?? null);
+  const end = instantToLocalDateTimeInputParts(value?.[1] ?? null);
   startDate.value = start.date;
   startTime.value = start.time;
   endDate.value = end.date;
@@ -178,8 +159,8 @@ watch(endDate, (value) => {
 watch([startDate, startTime, endDate, endTime], () => {
   if (isSyncing.value) return;
   emit("update:modelValue", [
-    buildTimeValue(startDate.value, startTime.value),
-    buildTimeValue(endDate.value, endTime.value),
+    localDateTimeInputPartsToInstant(startDate.value, startTime.value),
+    localDateTimeInputPartsToInstant(endDate.value, endTime.value),
   ]);
 });
 
diff --git a/apps/frontend/src/lib/validation.ts b/apps/frontend/src/lib/validation.ts
index fd4245e8b..9ba7b980c 100644
--- a/apps/frontend/src/lib/validation.ts
+++ b/apps/frontend/src/lib/validation.ts
@@ -4,21 +4,15 @@ import { i18n } from "@/locales/i18n";
 import type { PRFormFields } from "@/domains/pr/model/types";
 import { getPRRouteValidationIssue } from "@/domains/pr/model/pr-route";
 
-const isoDateSchema = z.string().regex(/^\d{4}-\d{2}-\d{2}$/);
-const isoDateTimeSchema = z.string().datetime();
-const isoDateOrDateTimeSchema = z.union([isoDateTimeSchema, isoDateSchema]);
+const instantDateTimeSchema = z.string().datetime({ offset: true });
 
 const MIN_MANUAL_PARTNERS = 1;
 const MIN_PRESENT_MAX_PARTNERS = 2;
 
-const hasRouteDraft = (
-  route: PRFormFields["route"],
-): route is NonNullable<PRFormFields["route"]> => Array.isArray(route);
+const hasRouteDraft = (route: PRFormFields["route"]): route is NonNullable<PRFormFields["route"]> =>
+  Array.isArray(route);
 
-const addRouteIssue = (
-  context: z.RefinementCtx,
-  message: string,
-): void => {
+const addRouteIssue = (context: z.RefinementCtx, message: string): void => {
   context.addIssue({
     code: z.ZodIssueCode.custom,
     path: ["route"],
@@ -58,13 +52,11 @@ type PartnerRequestFormSchemaOptions = {
 
 const buildTimeSchema = (validateTime: boolean) =>
   z.tuple([
-    (validateTime ? isoDateOrDateTimeSchema : z.string()).nullable(),
-    (validateTime ? isoDateOrDateTimeSchema : z.string()).nullable(),
+    (validateTime ? instantDateTimeSchema : z.string()).nullable(),
+    (validateTime ? instantDateTimeSchema : z.string()).nullable(),
   ]);
 
-const buildFieldsSchema = ({
-  validateTime = true,
-}: PartnerRequestFormSchemaOptions = {}) =>
+const buildFieldsSchema = ({ validateTime = true }: PartnerRequestFormSchemaOptions = {}) =>
   z
     .object({
       title: z.string().optional(),
@@ -72,9 +64,7 @@ const buildFieldsSchema = ({
       time: buildTimeSchema(validateTime),
       location: z.string().nullable(),
       route: z
-        .custom<PRFormFields["route"]>(
-          (value) => value === null || Array.isArray(value),
-        )
+        .custom<PRFormFields["route"]>((value) => value === null || Array.isArray(value))
         .default(null),
       minPartners: z.number().int().nonnegative().nullable(),
       maxPartners: z.number().int().nonnegative().nullable(),
@@ -91,20 +81,14 @@ const buildFieldsSchema = ({
         .optional(),
     })
     .superRefine((value, context) => {
-      if (
-        value.minPartners === null ||
-        value.minPartners < MIN_MANUAL_PARTNERS
-      ) {
+      if (value.minPartners === null || value.minPartners < MIN_MANUAL_PARTNERS) {
         context.addIssue({
           code: z.ZodIssueCode.custom,
           path: ["minPartners"],
           message: getMinPartnersAtLeastOneMessage(),
         });
       }
-      if (
-        value.maxPartners !== null &&
-        value.maxPartners < MIN_PRESENT_MAX_PARTNERS
-      ) {
+      if (value.maxPartners !== null && value.maxPartners < MIN_PRESENT_MAX_PARTNERS) {
         context.addIssue({
           code: z.ZodIssueCode.custom,
           path: ["maxPartners"],
@@ -134,38 +118,24 @@ const buildFieldsSchema = ({
         addRouteIssue(context, i18n.global.t("validation.routeMinPoints"));
       }
       if (issue === "name-required") {
-        addRouteIssue(
-          context,
-          i18n.global.t("validation.routePointNameRequired"),
-        );
+        addRouteIssue(context, i18n.global.t("validation.routePointNameRequired"));
       }
       if (issue === "coordinate-required") {
-        addRouteIssue(
-          context,
-          i18n.global.t("validation.routePointCoordinateRequired"),
-        );
+        addRouteIssue(context, i18n.global.t("validation.routePointCoordinateRequired"));
       }
     });
 
 export const createNaturalLanguagePRSchema = z
   .object({
-    rawText: z
-      .string()
-      .min(1, i18n.global.t("validation.naturalLanguageRequired"))
-      .max(2000),
+    rawText: z.string().min(1, i18n.global.t("validation.naturalLanguageRequired")).max(2000),
   })
-  .refine(
-    ({ rawText }) => rawText.trim().split(/\s+/).filter(Boolean).length <= 50,
-    { message: i18n.global.t("validation.naturalLanguageWordLimit") },
-  );
+  .refine(({ rawText }) => rawText.trim().split(/\s+/).filter(Boolean).length <= 50, {
+    message: i18n.global.t("validation.naturalLanguageWordLimit"),
+  });
 
-export const createNaturalLanguagePRValidationSchema = toTypedSchema(
-  createNaturalLanguagePRSchema,
-);
+export const createNaturalLanguagePRValidationSchema = toTypedSchema(createNaturalLanguagePRSchema);
 
-export const buildPartnerRequestFormSchema = (
-  options: PartnerRequestFormSchemaOptions = {},
-) =>
+export const buildPartnerRequestFormSchema = (options: PartnerRequestFormSchemaOptions = {}) =>
   z.object({
     fields: buildFieldsSchema(options),
   });
@@ -174,13 +144,9 @@ export const partnerRequestFormSchema = buildPartnerRequestFormSchema();
 
 export const buildPartnerRequestFormValidationSchema = (
   options: PartnerRequestFormSchemaOptions = {},
-) =>
-  toTypedSchema(buildPartnerRequestFormSchema(options));
+) => toTypedSchema(buildPartnerRequestFormSchema(options));
 
-export const partnerRequestFormValidationSchema = buildPartnerRequestFormValidationSchema(
-);
+export const partnerRequestFormValidationSchema = buildPartnerRequestFormValidationSchema();
 
-export type CreateNaturalLanguagePRInput = z.infer<
-  typeof createNaturalLanguagePRSchema
->;
+export type CreateNaturalLanguagePRInput = z.infer<typeof createNaturalLanguagePRSchema>;
 export type PartnerRequestFormInput = z.infer<typeof partnerRequestFormSchema>;
diff --git a/apps/frontend/src/shared/datetime/formatLocalDateTime.test.ts b/apps/frontend/src/shared/datetime/formatLocalDateTime.test.ts
index 019700771..23bef4fe3 100644
--- a/apps/frontend/src/shared/datetime/formatLocalDateTime.test.ts
+++ b/apps/frontend/src/shared/datetime/formatLocalDateTime.test.ts
@@ -3,29 +3,26 @@ import { formatFriendlyTimeWindowLabel } from "./formatLocalDateTime";
 
 describe("formatFriendlyTimeWindowLabel", () => {
   test("hides time for same-day all-day windows", () => {
-    expect(
-      formatFriendlyTimeWindowLabel([
-        "2026-06-02T00:00:00",
-        "2026-06-02T23:59:00",
-      ]),
-    ).toBe("2026-06-02");
+    expect(formatFriendlyTimeWindowLabel(["2026-06-02T00:00:00", "2026-06-03T00:00:00"])).toBe(
+      "2026-06-02",
+    );
   });
 
   test("keeps only one date for same-day partial windows", () => {
-    expect(
-      formatFriendlyTimeWindowLabel([
-        "2026-06-02T17:00:00",
-        "2026-06-02T19:00:00",
-      ]),
-    ).toBe("2026-06-02 17:00 - 19:00");
+    expect(formatFriendlyTimeWindowLabel(["2026-06-02T17:00:00", "2026-06-02T19:00:00"])).toBe(
+      "2026-06-02 17:00 - 19:00",
+    );
   });
 
   test("renders date range for multi-day all-day windows", () => {
-    expect(
-      formatFriendlyTimeWindowLabel([
-        "2026-06-02T00:00:00",
-        "2026-06-04T23:59:00",
-      ]),
-    ).toBe("2026-06-02 - 2026-06-04");
+    expect(formatFriendlyTimeWindowLabel(["2026-06-02T00:00:00", "2026-06-04T00:00:00"])).toBe(
+      "2026-06-02 - 2026-06-04",
+    );
+  });
+
+  test("keeps legacy 23:59 all-day windows readable", () => {
+    expect(formatFriendlyTimeWindowLabel(["2026-06-02T00:00:00", "2026-06-02T23:59:00"])).toBe(
+      "2026-06-02",
+    );
   });
 });
diff --git a/apps/frontend/src/shared/datetime/formatLocalDateTime.ts b/apps/frontend/src/shared/datetime/formatLocalDateTime.ts
index 7441580bd..77fe7624c 100644
--- a/apps/frontend/src/shared/datetime/formatLocalDateTime.ts
+++ b/apps/frontend/src/shared/datetime/formatLocalDateTime.ts
@@ -15,11 +15,7 @@ const parseIsoDateOnlyAsLocalDate = (value: string): Date | null => {
   const year = Number(yearRaw);
   const month = Number(monthRaw);
   const day = Number(dayRaw);
-  if (
-    !Number.isInteger(year) ||
-    !Number.isInteger(month) ||
-    !Number.isInteger(day)
-  ) {
+  if (!Number.isInteger(year) || !Number.isInteger(month) || !Number.isInteger(day)) {
     return null;
   }
 
@@ -60,11 +56,7 @@ export const formatLocalDateTime = (
     return "";
   }
 
-  const datePart = [
-    date.getFullYear(),
-    pad2(date.getMonth() + 1),
-    pad2(date.getDate()),
-  ].join("-");
+  const datePart = [date.getFullYear(), pad2(date.getMonth() + 1), pad2(date.getDate())].join("-");
   const timePart = [pad2(date.getHours()), pad2(date.getMinutes())].join(":");
 
   if (includeDate && includeTime) {
@@ -116,11 +108,9 @@ const normalizeToDate = (value: DateLike): Date | null => {
   return normalized instanceof Date ? normalized : null;
 };
 
-const isStartOfLocalDay = (date: Date): boolean =>
-  date.getHours() === 0 && date.getMinutes() === 0;
+const isStartOfLocalDay = (date: Date): boolean => date.getHours() === 0 && date.getMinutes() === 0;
 
-const isEndOfLocalDay = (date: Date): boolean =>
-  date.getHours() === 23 && date.getMinutes() === 59;
+const isEndOfLocalDay = (date: Date): boolean => date.getHours() === 23 && date.getMinutes() === 59;
 
 const addLocalDays = (date: Date, days: number): Date => {
   const next = new Date(date);
@@ -133,21 +123,15 @@ const isSameLocalDate = (left: Date, right: Date): boolean =>
   left.getMonth() === right.getMonth() &&
   left.getDate() === right.getDate();
 
-const formatLocalDate = (date: Date): string =>
-  formatLocalDateTime(date, { includeTime: false });
+const formatLocalDate = (date: Date): string => formatLocalDateTime(date, { includeTime: false });
 
-const formatLocalTime = (date: Date): string =>
-  formatLocalDateTime(date, { includeDate: false });
+const formatLocalTime = (date: Date): string => formatLocalDateTime(date, { includeDate: false });
 
 const resolveFullDayEndDate = (start: Date, end: Date): Date | null => {
   if (!isStartOfLocalDay(start)) return null;
   if (isEndOfLocalDay(end)) return end;
-  if (
-    isStartOfLocalDay(end) &&
-    end.getTime() > start.getTime() &&
-    isSameLocalDate(addLocalDays(start, 1), end)
-  ) {
-    return start;
+  if (isStartOfLocalDay(end) && end.getTime() > start.getTime()) {
+    return isSameLocalDate(addLocalDays(start, 1), end) ? start : end;
   }
   return null;
 };
diff --git a/apps/frontend/src/shared/datetime/localDateTimeInput.test.ts b/apps/frontend/src/shared/datetime/localDateTimeInput.test.ts
new file mode 100644
index 000000000..a539315a6
--- /dev/null
+++ b/apps/frontend/src/shared/datetime/localDateTimeInput.test.ts
@@ -0,0 +1,35 @@
+import { describe, expect, test } from "vitest";
+import {
+  instantToLocalDateTimeInputParts,
+  localDateTimeInputPartsToInstant,
+} from "./localDateTimeInput";
+
+const pad2 = (value: number): string => String(value).padStart(2, "0");
+
+const toExpectedLocalParts = (value: string) => {
+  const date = new Date(value);
+  return {
+    date: [date.getFullYear(), pad2(date.getMonth() + 1), pad2(date.getDate())].join("-"),
+    time: [pad2(date.getHours()), pad2(date.getMinutes())].join(":"),
+  };
+};
+
+describe("local date-time input adapters", () => {
+  test("deserializes instants through local Date instead of string splitting", () => {
+    const instant = "2026-06-26T16:00:00.000Z";
+
+    expect(instantToLocalDateTimeInputParts(instant)).toEqual(toExpectedLocalParts(instant));
+  });
+
+  test("serializes local input parts to canonical ISO instants", () => {
+    expect(localDateTimeInputPartsToInstant("2026-06-27", "00:00")).toBe(
+      new Date(2026, 5, 27, 0, 0, 0, 0).toISOString(),
+    );
+  });
+
+  test("uses local midnight when time is omitted", () => {
+    expect(localDateTimeInputPartsToInstant("2026-06-27", null)).toBe(
+      new Date(2026, 5, 27, 0, 0, 0, 0).toISOString(),
+    );
+  });
+});
diff --git a/apps/frontend/src/shared/datetime/localDateTimeInput.ts b/apps/frontend/src/shared/datetime/localDateTimeInput.ts
new file mode 100644
index 000000000..dcc03582a
--- /dev/null
+++ b/apps/frontend/src/shared/datetime/localDateTimeInput.ts
@@ -0,0 +1,59 @@
+export interface LocalDateTimeInputParts {
+  date: string | null;
+  time: string | null;
+}
+
+const ISO_DATE_ONLY_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
+const TIME_PATTERN = /^([01]\d|2[0-3]):([0-5]\d)$/;
+
+const pad2 = (value: number): string => String(value).padStart(2, "0");
+
+export const instantToLocalDateTimeInputParts = (value: string | null): LocalDateTimeInputParts => {
+  if (!value) return { date: null, time: null };
+
+  if (ISO_DATE_ONLY_PATTERN.test(value)) {
+    return { date: value, time: null };
+  }
+
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return { date: null, time: null };
+  }
+
+  return {
+    date: [date.getFullYear(), pad2(date.getMonth() + 1), pad2(date.getDate())].join("-"),
+    time: [pad2(date.getHours()), pad2(date.getMinutes())].join(":"),
+  };
+};
+
+export const localDateTimeInputPartsToInstant = (
+  dateValue: string | null,
+  timeValue: string | null,
+): string | null => {
+  if (!dateValue || !ISO_DATE_ONLY_PATTERN.test(dateValue)) {
+    return null;
+  }
+
+  const resolvedTime = timeValue ?? "00:00";
+  const timeMatch = resolvedTime.match(TIME_PATTERN);
+  if (!timeMatch) {
+    return null;
+  }
+
+  const [yearRaw, monthRaw, dayRaw] = dateValue.split("-");
+  const year = Number(yearRaw);
+  const month = Number(monthRaw);
+  const day = Number(dayRaw);
+  const hour = Number(timeMatch[1]);
+  const minute = Number(timeMatch[2]);
+  if (!Number.isInteger(year) || !Number.isInteger(month) || !Number.isInteger(day)) {
+    return null;
+  }
+
+  const date = new Date(year, month - 1, day, hour, minute, 0, 0);
+  if (Number.isNaN(date.getTime())) {
+    return null;
+  }
+
+  return date.toISOString();
+};
diff --git a/docs/10-prd/behavior/rules-and-invariants.md b/docs/10-prd/behavior/rules-and-invariants.md
index 1df69583c..0438230ba 100644
--- a/docs/10-prd/behavior/rules-and-invariants.md
+++ b/docs/10-prd/behavior/rules-and-invariants.md
@@ -21,7 +21,7 @@
 - If the creator already has an authenticated account, that create flow persists and publishes the PR in one operation.
 - If the creator is anonymous, that create flow persists a `DRAFT` and waits for a later authenticated publish step.
 - Structured creation uses one PR-owned form contract. Its `type` field accepts arbitrary input and may offer suggestion options from known event types.
-- Structured creation uses one PR-owned `time_window` result. The UI may expose batch and free modes, while the persisted PR still owns one resolved time window.
+- Structured creation uses one PR-owned `time_window` result. The UI may expose batch and free modes, while the persisted PR still owns one resolved time window. Persisted non-null PR time-window endpoints are instant datetimes, not date-only strings; request inputs may carry timezone offsets, and command boundaries canonicalize them before persistence.
 - Structured creation uses one PR-owned place-mode result. Route-mode structured creation stores `route` and clears `location`; location-mode structured creation stores `location` and clears `route`.
 - PR creation resolves Anchor Event context by PR type when a matching Anchor Event exists. Event-owned PR defaults such as default notes, join gates, and feedback questionnaire template selection materialize into PR-owned runtime state at creation time. Existing PR notes remain PR-owned content when the event default later changes.
 - Event-context PR creation is frontend assistance from Anchor Event surfaces into unified structured PR creation.
@@ -42,10 +42,10 @@
 - A valid `/e/:eventId?mode=` value is explicit route state and owns the current landing mode. Without valid route mode, the same user should keep a stable landing mode for the same event until the operator changes that event's landing assignment revision.
 - If `/e/:eventId` cannot obtain its landing mode decision in time, it should still enter a usable `LIST` fallback experience.
 - Form Mode recommendation and candidate ordering are backend-authored even though the user chooses location, start time, and preferences on the page.
-- Form Mode may accept a fuzzy time preference as recommendation input by converting it in the frontend into concrete PR start-time match windows. The fuzzy time choices include part-of-day windows and an all-day option for one selected product-local date. These windows match candidate `PR.time_window[0]` only, are not constrained by the Anchor Event's configured time pool, and are not persisted as PR facts.
+- Form Mode may accept a fuzzy time preference as recommendation input by converting it in the frontend into concrete PR start-time match windows. The fuzzy time choices include part-of-day windows and an all-day option for one selected product-local date. These recommendation windows match candidate `PR.time_window[0]` only, are not constrained by the Anchor Event's configured time pool, and are not themselves persisted as fuzzy PR facts.
 - Form Mode fuzzy date choices cover today plus the next 6 product-local days as individual dates; aggregate choices such as weekend or any day are not part of the first contract.
 - Form Mode directly creates a system-owned `OPEN` PR when recommendation returns no matched PR and no ordered candidates; the viewer is not assigned as creator and the created PR detail page does not show the user-created request notice.
-- Form Mode zero-candidate auto-create still creates a `PR` with one resolved `time_window`. In fuzzy mode, that resolved window is the selected fuzzy activity window itself, such as a product-local all-day or part-of-day window, and the created PR may materialize the same range into `allowEditAfterReady.timeWindow`.
+- Form Mode zero-candidate auto-create still creates a `PR` with one resolved `time_window`. In fuzzy mode, that resolved window is the selected fuzzy activity window materialized into instant datetimes, such as a product-local all-day or part-of-day window, and the created PR may materialize the same range into `allowEditAfterReady.timeWindow`. Product-local all-day windows use the half-open interval `[T 00:00, T+1 00:00)`.
 - Form Mode bootstrap may preselect location and start time from the nearest joinable PR in the current Anchor Event context when that PR's start time is inside the event `earliestLeadMinutes` boundary.
 - Anchor Event owns the event-specific preset preference tag pool, its moderation state, and which published tags later visitors may see in Form Mode.
 - Anchor Event start rules may own optional description copy. Generated time windows inherit the first non-empty matching start-rule description by configured start-rule order, and that copy remains presentation context rather than a persisted PR fact.
diff --git a/docs/20-product-tdd/cross-unit-contracts.md b/docs/20-product-tdd/cross-unit-contracts.md
index 8ca67c44e..d2f7e1a06 100644
--- a/docs/20-product-tdd/cross-unit-contracts.md
+++ b/docs/20-product-tdd/cross-unit-contracts.md
@@ -178,7 +178,8 @@ Important coordination note:
 - Form Mode location creation is a route entry into POI application, not an Anchor Event mutation. `POST /api/pois/applications` creates a `PENDING` POI from one name and one image URL. `GET /api/pois/applications/mine` returns the current user's submitted POI applications. POIs have integer `id` identity and a unique `name`; `PR.location` remains an arbitrary string and matches POI-owned data by `POI.name`.
 - Public POI reads return only `PUBLISHED` POIs. Admin POI reads include all statuses and admin POI commands may publish or reject user-submitted POIs.
 - POI coordinate fields are nullable two-number tuples: `gcj02`, `wgs84`, and `bd09`, each encoded as `[lat, lng]`. `fullAddress` is nullable text.
-- `POST /api/events/:eventId/form-mode/recommendation` accepts one selected place (`{ kind: "location", locationId }` or `{ kind: "route", route }`), a concrete `timeWindows: Array<{ startAt, endAt }>` set, and the current preference labels, then returns one matched recommendation plus an ordered candidate list. Route selection is matched against the submitted concrete route rather than a route-pool entry id; the submitted route may be a local reverse of a route-pool source option. `timeWindows` are PR start-time match windows: point windows require candidate `PR.time_window[0]` equality, and non-point windows use the half-open rule `startAt <= PR.time_window[0] < endAt`. The backend does not interpret fuzzy UI presets and does not match against PR duration overlap. Fuzzy time preference is frontend UI input only and is not persisted on `PR`; the frontend expands all-day fuzzy input to one product-local day window from `00:00` inclusive to the next local `00:00` exclusive. When the request has a current viewer user id, backend excludes PRs where that viewer is already an active partner (`JOINED`, `CONFIRMED`, or `ATTENDED`) before ranking recommendations. When both recommendation result lists are empty, frontend submits `POST /api/events/:eventId/form-mode/auto-create` with the concrete selected creation time window, selected place, full preference-label set, and optional READY-after edit policy. The backend creates a system-owned `OPEN` PR (`createdBy = null`) and returns its canonical detail path; the frontend routes to that PR detail without the created-request notice handoff. The first later active join claims current creator responsibility through the shared PR join contract.
+- `POST /api/events/:eventId/form-mode/recommendation` accepts one selected place (`{ kind: "location", locationId }` or `{ kind: "route", route }`), a concrete `timeWindows: Array<{ startAt, endAt }>` set, and the current preference labels, then returns one matched recommendation plus an ordered candidate list. Route selection is matched against the submitted concrete route rather than a route-pool entry id; the submitted route may be a local reverse of a route-pool source option. `timeWindows` are PR start-time match windows: point windows require candidate `PR.time_window[0]` equality, and non-point windows use the half-open rule `startAt <= PR.time_window[0] < endAt`. The backend does not interpret fuzzy UI presets and does not match against PR duration overlap. Fuzzy time preference is frontend UI input only and is not persisted as fuzzy state on `PR`; the frontend expands all-day fuzzy input to one product-local day window from `00:00` inclusive to the next local `00:00` exclusive. When the request has a current viewer user id, backend excludes PRs where that viewer is already an active partner (`JOINED`, `CONFIRMED`, or `ATTENDED`) before ranking recommendations. When both recommendation result lists are empty, frontend submits `POST /api/events/:eventId/form-mode/auto-create` with the concrete selected creation time window, selected place, full preference-label set, and optional READY-after edit policy. The backend creates a system-owned `OPEN` PR (`createdBy = null`) and returns its canonical detail path; the frontend routes to that PR detail without the created-request notice handoff. The first later active join claims current creator responsibility through the shared PR join contract.
+- PR create and content-edit command boundaries accept non-null `PR.time_window` endpoints only as instant datetimes with timezone offsets. They canonicalize offset input, such as `2026-06-27T00:00:00+08:00`, before persistence. Date-only user input is not persisted directly; natural-language date-only intent materializes into a product-local all-day instant window using `[T 00:00, T+1 00:00)`.
 - `POST /api/events/:eventId/preference-tags/submissions` accepts visitor-authored label-only tags, records them as pending event-owned preference-tag moderation items, and does not automatically expose them to later visitors
 - `GET /api/events/:eventId/demand-cards` is the backend-authored card-mode demand projection contract; it returns only joinable `OPEN` demand-card groups for that event after excluding PR candidates where the current viewer is already an active partner.
 - the old public demand-card join route is retired from the public contract surface
diff --git a/package.json b/package.json
index e6a041050..941792849 100644
--- a/package.json
+++ b/package.json
@@ -49,10 +49,11 @@
     "lint:backend": "pnpm --filter @partner-up-dev/backend lint",
     "lint:structure": "pnpm lint:structure:backend",
     "lint:structure:backend": "ast-grep scan apps/backend/src --config sgconfig.yml --globs '*.ts' --globs '!**/*.test.ts' --globs '!apps/backend/src/index.ts' --globs '!apps/backend/src/scripts/lint/problem-details.ts'",
-    "lint:policy": "pnpm lint:backend && pnpm --filter @partner-up-dev/frontend lint:tokens:strict && pnpm --filter @partner-up-dev/frontend audit:naming && pnpm lint:payment-supply-chain",
+    "lint:policy": "pnpm lint:backend && pnpm --filter @partner-up-dev/frontend lint:tokens:strict && pnpm --filter @partner-up-dev/frontend audit:naming && pnpm lint:payment-supply-chain && pnpm lint:pr-time-contract",
     "lint:dead-code": "knip",
     "lint:dead-code:report": "knip --no-exit-code --reporter compact --max-show-issues 50",
     "lint:payment-supply-chain": "node ./scripts/check-payment-supply-chain.mjs",
+    "lint:pr-time-contract": "node ./scripts/check-pr-time-contract.mjs",
     "lint:security": "node ./scripts/run-semgrep.mjs --strict",
     "lint:security:report": "node ./scripts/run-semgrep.mjs --report",
     "test": "pnpm test:unit && pnpm test:scenario:all",
diff --git a/scripts/check-pr-time-contract.mjs b/scripts/check-pr-time-contract.mjs
new file mode 100644
index 000000000..72901d796
--- /dev/null
+++ b/scripts/check-pr-time-contract.mjs
@@ -0,0 +1,60 @@
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+
+const read = (path) => readFileSync(resolve(path), "utf8");
+
+const checks = [
+  {
+    file: "apps/backend/src/entities/partner-request.ts",
+    message: "PR time schema must allow offset datetime instants.",
+    pass: (content) =>
+      content.includes("const instantDateTimeSchema = z.string().datetime({ offset: true });"),
+  },
+  {
+    file: "apps/backend/src/entities/partner-request.ts",
+    message: "Persisted PR time schema must not use date-or-datetime union.",
+    pass: (content) => !content.includes("isoDateOrDateTimeSchema"),
+  },
+  {
+    file: "apps/frontend/src/lib/validation.ts",
+    message: "Frontend PR form time validation must allow offset datetime instants.",
+    pass: (content) =>
+      content.includes("const instantDateTimeSchema = z.string().datetime({ offset: true });"),
+  },
+  {
+    file: "apps/backend/src/services/prompts/partnerRequestParsePrompt.ts",
+    message: "NL prompt must not ask the model to output date-only PR time values.",
+    pass: (content) => !content.includes('time: ["2026-02-08", null]'),
+  },
+  {
+    file: "apps/frontend/src/domains/event/model/form-mode.ts",
+    message: "Form Mode all-day windows must end at the next product-local midnight.",
+    pass: (content) =>
+      content.includes('{ label: "全天", value: "ALL_DAY", startTime: "00:00", endTime: "00:00" }'),
+  },
+  {
+    file: "apps/backend/src/controllers/anchor-event.controller.ts",
+    message: "Anchor Event PR time-window inputs must allow offset datetime instants.",
+    pass: (content) =>
+      content.includes("const instantDateTimeSchema = z.string().datetime({ offset: true });") &&
+      !content.includes("z.string().datetime(), z.string().datetime()"),
+  },
+];
+
+const failures = [];
+
+for (const check of checks) {
+  const content = read(check.file);
+  if (!check.pass(content)) {
+    failures.push(`[pr-time-contract] ${check.file}: ${check.message}`);
+  }
+}
+
+if (failures.length > 0) {
+  for (const failure of failures) {
+    console.error(failure);
+  }
+  process.exit(1);
+}
+
+console.info("[pr-time-contract] checks passed");
diff --git a/tasks/pr-time-window-serialization-diagnosis/control.md b/tasks/pr-time-window-serialization-diagnosis/control.md
new file mode 100644
index 000000000..4e8e04d50
--- /dev/null
+++ b/tasks/pr-time-window-serialization-diagnosis/control.md
@@ -0,0 +1,61 @@
+# PR Time Window Serialization Diagnosis
+
+## Objective & Hypothesis
+
+- Objective: verify whether `/pr/42` displays different time-window values between PR Facts and PREditor, then identify the most likely serialization/deserialization boundary.
+- Initial symptom: PR Facts shows `2026-06-27 00:00`, while PR Editor shows `2026-06-26 16:00`.
+- Working hypothesis: one surface treats a timestamp as product-local calendar time while another surface treats it as UTC/local browser time, creating an 8-hour Asia/Shanghai offset.
+
+## Guardrails Touched
+
+- Input route: Reality.
+- Active mode: Diagnose.
+- Durable owner under investigation: frontend PR UI time-window presentation/editing, with possible backend PR API contract involvement.
+- Code mutation status: not started. Code changes require explicit user confirmation.
+
+## Verification
+
+- Directly inspect `https://partner-up.local/pr/42`.
+- Compare API payload for PR 42 with rendered PR Facts and PREditor values.
+- Inspect frontend parse/format paths for `PRFactsCard`, `PREditor`, and `DateTimeRangePicker`.
+- Implemented verification:
+  - `pnpm lint:pr-time-contract`
+  - backend focused unit tests for PR time schema, instant canonicalization, NL prompt, and Form Mode auto-create
+  - frontend focused unit tests for local input adapter, friendly time-window labels, Form Mode all-day materialization, and fuzzy ready-edit policy
+  - `pnpm check:type:backend`
+  - `pnpm check:type:frontend`
+  - `pnpm exec vitest run --project system-scenario tests/scenario/pr-core/pr-detail-edit.scenario.test.ts`
+  - targeted Biome lint for changed files
+- Final implementation notes:
+  - PR and Anchor Event/Form Mode PR-time-window inputs now allow offset datetime strings.
+  - PR command boundaries canonicalize offset inputs to UTC ISO instants before persistence.
+  - NL date-only parse output materializes into product-local all-day instant windows.
+  - Form Mode all-day fuzzy windows now use `[T 00:00, T+1 00:00)`.
+  - Date/time input editors round-trip through local Date conversion instead of string splitting.
+  - `lint:pr-time-contract` is wired into `lint:policy`.
+
+## Current Understanding
+
+- `GET https://api.partner-up.local/api/pr/42` returns `core.time` as `["2026-06-26T16:00:00.000Z","2026-06-26T17:00:00.000Z"]`.
+- Playwright verified `https://partner-up.local/pr/42` renders PR Facts time as `2026-06-27 00:00 - 01:00`.
+- Anonymous PR 42 page does not expose the edit button; the user-visible editor symptom is still explained by the code path:
+  - `PRFactsCard` formats `core.time` through `formatFriendlyTimeWindowLabel`, which parses the UTC timestamp and displays local wall time.
+  - `PREditor` copies `detail.core.time` into form state unchanged.
+  - `DateTimeRangePicker` deserializes by string-splitting at `T`, so `2026-06-26T16:00:00.000Z` becomes date `2026-06-26` and time `16:00`.
+  - `DateTimeRangePicker` serializes edited datetime values as `YYYY-MM-DDTHH:mm`, which current frontend/backend zod `datetime()` schemas reject.
+- Likely cause: frontend editor lacks a PR-time-window adapter that converts API instants to local date/time input values and converts edited local date/time values back to canonical ISO instants.
+- Offset validation finding: current `z.string().datetime()` accepts `Z` but rejects `+08:00`; `z.string().datetime({ offset: true })` accepts both. PR time schemas currently use the non-offset form.
+- Fuzzy/all-day finding: frontend Form Mode materializes product-local fuzzy/all-day windows into concrete ISO instants before submission. Canonical all-day should be represented as product-local `[T 00:00, T+1 00:00)`, e.g. `2026-06-02` becomes `2026-06-01T16:00:00.000Z` to `2026-06-02T16:00:00.000Z` after UTC canonicalization.
+- Documentation mismatch: product docs say fuzzy time choices are not persisted as PR facts, but zero-candidate auto-create docs/tests show fuzzy activity windows can become the PR-owned resolved time window and `allowEditAfterReady.timeWindow`.
+- Date-only finding: date-only is not only legacy/backfill. It is currently allowed by frontend validation, backend PR entity schema, `allowEditAfterReady`, and the natural-language PR parse prompt/schema. The prompt explicitly asks the model to output `YYYY-MM-DD` when the user only gives a date.
+- Clarified target: `PR.time_window` / API `core.time` should persist concrete instant datetimes only. Input may accept offset datetimes, but command boundaries should canonicalize them. NL date-only input should be transformed into a product-local all-day instant window rather than persisted as `YYYY-MM-DD`.
+- Display target: PR date/time display surfaces should recognize product-local all-day instant windows and display date-range semantics instead of raw endpoint clock times. Single-day all-day should render as date-level text; multi-day all-day should render as a date range.
+
+## Confirmed Constraints
+
+- Do not modify code before explicit user start.
+- Avoid unrelated dirty worktree changes.
+
+## Next Step
+
+- Review the implemented fix and decide whether a data migration/backfill is needed for any existing persisted date-only PR rows.
diff --git a/tests/scenario/pr-core/pr-detail-edit.scenario.test.ts b/tests/scenario/pr-core/pr-detail-edit.scenario.test.ts
index 07f7bb12e..35aebc548 100644
--- a/tests/scenario/pr-core/pr-detail-edit.scenario.test.ts
+++ b/tests/scenario/pr-core/pr-detail-edit.scenario.test.ts
@@ -10,7 +10,7 @@ import { givenUser } from "../../../apps/backend/tests/pr-core/_kit/builders/use
 const readyEditableTimeFields: PartnerRequestFields = {
   title: "System scenario ready editable time PR",
   type: "badminton",
-  time: ["2030-01-01", "2030-01-02"],
+  time: ["2030-01-01T00:00:00+08:00", "2030-01-02T00:00:00+08:00"],
   location: "Scenario Court",
   route: null,
   minPartners: 2,
@@ -28,7 +28,7 @@ scenario("pr_detail_ready_creator_edits_time_window_from_pr_page", async (ctx) =
     fields: readyEditableTimeFields,
     status: "READY",
     allowEditAfterReady: {
-      timeWindow: ["2030-01-01", "2030-01-04"],
+      timeWindow: ["2030-01-01T00:00:00+08:00", "2030-01-04T00:00:00+08:00"],
     },
   });
 
@@ -53,67 +53,76 @@ scenario("pr_detail_ready_creator_edits_time_window_from_pr_page", async (ctx) =
       state: "visible",
       timeout: 10_000,
     });
-    await page.waitForFunction(() => {
-      const startDate = document.querySelector<HTMLInputElement>(
-        '[data-testid="pr-editor.form.start-date"]',
-      )?.value;
-      const startTime = document.querySelector<HTMLInputElement>(
-        '[data-testid="pr-editor.form.start-time"]',
-      )?.value;
-      const endDate = document.querySelector<HTMLInputElement>(
-        '[data-testid="pr-editor.form.end-date"]',
-      )?.value;
-      const endTime = document.querySelector<HTMLInputElement>(
-        '[data-testid="pr-editor.form.end-time"]',
-      )?.value;
-      return (
-        startDate === "2030-01-01" &&
-        startTime === "" &&
-        endDate === "2030-01-02" &&
-        endTime === ""
-      );
-    }, undefined, { timeout: 10_000 });
+    await page.waitForFunction(
+      () => {
+        const startDate = document.querySelector<HTMLInputElement>(
+          '[data-testid="pr-editor.form.start-date"]',
+        )?.value;
+        const startTime = document.querySelector<HTMLInputElement>(
+          '[data-testid="pr-editor.form.start-time"]',
+        )?.value;
+        const endDate = document.querySelector<HTMLInputElement>(
+          '[data-testid="pr-editor.form.end-date"]',
+        )?.value;
+        const endTime = document.querySelector<HTMLInputElement>(
+          '[data-testid="pr-editor.form.end-time"]',
+        )?.value;
+        return (
+          startDate === "2030-01-01" &&
+          startTime === "00:00" &&
+          endDate === "2030-01-02" &&
+          endTime === "00:00"
+        );
+      },
+      undefined,
+      { timeout: 10_000 },
+    );
 
     assert.equal(await page.getByTestId("pr-editor.form.title").count(), 0);
     assert.equal(await page.getByTestId("pr-editor.form.type").count(), 0);
-    assert.equal(
-      await page.getByTestId("pr-editor.form.place.location").count(),
-      0,
-    );
+    assert.equal(await page.getByTestId("pr-editor.form.place.location").count(), 0);
 
     await page.getByTestId("pr-editor.form.start-date").fill("2030-01-02");
     await page.getByTestId("pr-editor.form.end-date").fill("2030-01-03");
-    await page.waitForFunction(() => {
-      const startDate = document.querySelector<HTMLInputElement>(
-        '[data-testid="pr-editor.form.start-date"]',
-      )?.value;
-      const startTime = document.querySelector<HTMLInputElement>(
-        '[data-testid="pr-editor.form.start-time"]',
-      )?.value;
-      const endDate = document.querySelector<HTMLInputElement>(
-        '[data-testid="pr-editor.form.end-date"]',
-      )?.value;
-      const endTime = document.querySelector<HTMLInputElement>(
-        '[data-testid="pr-editor.form.end-time"]',
-      )?.value;
-      return (
-        startDate === "2030-01-02" &&
-        startTime === "" &&
-        endDate === "2030-01-03" &&
-        endTime === ""
-      );
-    }, undefined, { timeout: 10_000 });
+    await page.waitForFunction(
+      () => {
+        const startDate = document.querySelector<HTMLInputElement>(
+          '[data-testid="pr-editor.form.start-date"]',
+        )?.value;
+        const startTime = document.querySelector<HTMLInputElement>(
+          '[data-testid="pr-editor.form.start-time"]',
+        )?.value;
+        const endDate = document.querySelector<HTMLInputElement>(
+          '[data-testid="pr-editor.form.end-date"]',
+        )?.value;
+        const endTime = document.querySelector<HTMLInputElement>(
+          '[data-testid="pr-editor.form.end-time"]',
+        )?.value;
+        return (
+          startDate === "2030-01-02" &&
+          startTime === "00:00" &&
+          endDate === "2030-01-03" &&
+          endTime === "00:00"
+        );
+      },
+      undefined,
+      { timeout: 10_000 },
+    );
     await page.getByTestId("pr-detail.creator.edit-content.submit").click();
 
     await page.getByTestId("pr-editor.form").waitFor({
       state: "detached",
       timeout: 10_000,
     });
-    await page.waitForFunction(() => {
-      const text = document
-        .querySelector('[data-testid="pr-detail.facts.time-value"]')
-        ?.textContent?.trim();
-      return text === "2030-01-02";
-    }, undefined, { timeout: 10_000 });
+    await page.waitForFunction(
+      () => {
+        const text = document
+          .querySelector('[data-testid="pr-detail.facts.time-value"]')
+          ?.textContent?.trim();
+        return text === "2030-01-02";
+      },
+      undefined,
+      { timeout: 10_000 },
+    );
   });
 });

From 6d416be1ccaa639b6c95f2bb9a5d0f9dc1e45e9f Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Mon, 22 Jun 2026 21:43:34 +0800
Subject: [PATCH 34/94] fix(frontend-map): use Tencent custom map style

- add Tencent GL mapStyleId option typing

- initialize shared Tencent map provider with style1
---
 apps/frontend/src/shared/map/tencent/tencent-lbs-provider.ts | 2 ++
 apps/frontend/src/shared/map/tencent/types.ts                | 1 +
 2 files changed, 3 insertions(+)

diff --git a/apps/frontend/src/shared/map/tencent/tencent-lbs-provider.ts b/apps/frontend/src/shared/map/tencent/tencent-lbs-provider.ts
index 152cf3aaa..18f337ca3 100644
--- a/apps/frontend/src/shared/map/tencent/tencent-lbs-provider.ts
+++ b/apps/frontend/src/shared/map/tencent/tencent-lbs-provider.ts
@@ -28,6 +28,7 @@ const DEFAULT_CENTER: MapCoordinate = {
 };
 const DEFAULT_ZOOM = 12;
 const SINGLE_POINT_ZOOM = 15;
+const TENCENT_MAP_STYLE_ID = "style1";
 
 const MARKER_COLORS: Record<MapGeometryTone | "active", string> = {
   primary: "#1D63ED",
@@ -332,6 +333,7 @@ export const createTencentLBSMapProvider = async ({
   const mapOptions: TencentMapOptions = {
     center: toTencentLatLng(sdk, center),
     zoom,
+    mapStyleId: TENCENT_MAP_STYLE_ID,
     viewMode: "2D",
     showControl: showDefaultControls,
     draggable: interactive,
diff --git a/apps/frontend/src/shared/map/tencent/types.ts b/apps/frontend/src/shared/map/tencent/types.ts
index 47ef642c3..dd3bcbb2d 100644
--- a/apps/frontend/src/shared/map/tencent/types.ts
+++ b/apps/frontend/src/shared/map/tencent/types.ts
@@ -21,6 +21,7 @@ export type TencentMapOptions = {
   zoom?: number;
   minZoom?: number;
   maxZoom?: number;
+  mapStyleId?: string;
   viewMode?: "2D" | "3D";
   showControl?: boolean;
   draggable?: boolean;

From 1f0bcc830e8555f2a7467f7b2ab3a9b63738bc88 Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Mon, 22 Jun 2026 21:48:01 +0800
Subject: [PATCH 35/94] ref(commerce): decouple ordering entry handoff

- move placement ordering entry flow from PR page into ButtonPlacement composable

- add Pinia ordering handoff store and generic OrderingPage route component

- update ecommerce contract and task packet for the new ownership boundary
---
 apps/frontend/src/app/router.ts               | 310 ++++++++----------
 .../commerce/model/ordering-entry-storage.ts  |  36 ++
 .../domains/commerce/queries/useCommerce.ts   |  21 ++
 .../domains/commerce/ui/ButtonPlacement.vue   |  34 +-
 .../use-cases/useOrderingHandoffStore.ts      |  59 ++++
 .../usePlacementOrderingEntryFlow.ts          |  52 +++
 ...FromPlacementPage.vue => OrderingPage.vue} |  36 +-
 .../src/pages/OrderingSupportPage.vue         |  69 +---
 apps/frontend/src/pages/PRPage.vue            | 143 ++------
 docs/20-product-tdd/ecommerce-contracts.md    |  23 +-
 tasks/ride-hailing-ui-fixes/change-log.md     |  44 +++
 tasks/ride-hailing-ui-fixes/control.md        |  48 ++-
 tasks/ride-hailing-ui-fixes/discussion-log.md |  47 +++
 .../ordering-entry-decoupling-plan.md         | 217 ++++++++++++
 14 files changed, 753 insertions(+), 386 deletions(-)
 create mode 100644 apps/frontend/src/domains/commerce/use-cases/useOrderingHandoffStore.ts
 create mode 100644 apps/frontend/src/domains/commerce/use-cases/usePlacementOrderingEntryFlow.ts
 rename apps/frontend/src/pages/{OrderingFromPlacementPage.vue => OrderingPage.vue} (90%)
 create mode 100644 tasks/ride-hailing-ui-fixes/ordering-entry-decoupling-plan.md

diff --git a/apps/frontend/src/app/router.ts b/apps/frontend/src/app/router.ts
index a51a0ecff..263827e55 100644
--- a/apps/frontend/src/app/router.ts
+++ b/apps/frontend/src/app/router.ts
@@ -1,82 +1,62 @@
-import {
-  createRouter,
-  createWebHistory,
-  type RouteRecordRaw,
-} from "vue-router";
-import { trackEvent } from "@/shared/telemetry/track";
-import { captureSpmAttributionFromUrl } from "@/shared/telemetry/spm-attribution";
+import { createRouter, createWebHistory, type RouteRecordRaw } from "vue-router";
 import { getStoredAdminHasAnyRole } from "@/domains/admin/model/admin-session-storage";
+import { captureSpmAttributionFromUrl } from "@/shared/telemetry/spm-attribution";
+import { trackEvent } from "@/shared/telemetry/track";
 import { sanitizeSensitiveRoutePath } from "@/shared/url/sanitizeSensitiveRoutePath";
-
-const HomePage = () => import("@/pages/HomePage.vue");
+
+const HomePage = () => import("@/pages/HomePage.vue");
 const MePage = () => import("@/pages/MePage.vue");
-const LocationApplicationPage = () =>
-  import("@/pages/LocationApplicationPage.vue");
+const LocationApplicationPage = () => import("@/pages/LocationApplicationPage.vue");
 const LocationPickerPage = () => import("@/pages/LocationPickerPage.vue");
 const RouteApplicationPage = () => import("@/pages/RouteApplicationPage.vue");
 const MyPRsPage = () => import("@/pages/MyPRsPage.vue");
 const PRCreatePage = () => import("@/pages/PRCreatePage.vue");
 const PRPage = () => import("@/pages/PRPage.vue");
-const StudySprintPomodoroPage = () =>
-  import("@/pages/StudySprintPomodoroPage.vue");
+const StudySprintPomodoroPage = () => import("@/pages/StudySprintPomodoroPage.vue");
 const PRPairingCodePage = () => import("@/pages/PRPairingCodePage.vue");
 const PRMessagesPage = () => import("@/pages/PRMessagesPage.vue");
-const OrderingFromPlacementPage = () =>
-  import("@/pages/OrderingFromPlacementPage.vue");
+const OrderingPage = () => import("@/pages/OrderingPage.vue");
 const OrderingSupportPage = () => import("@/pages/OrderingSupportPage.vue");
-const CommerceOrderDetailPage = () =>
-  import("@/pages/CommerceOrderDetailPage.vue");
-const CommerceBillDetailPage = () =>
-  import("@/pages/CommerceBillDetailPage.vue");
-const PaymentCheckoutPage = () =>
-  import("@/pages/PaymentCheckoutPage.vue");
+const CommerceOrderDetailPage = () => import("@/pages/CommerceOrderDetailPage.vue");
+const CommerceBillDetailPage = () => import("@/pages/CommerceBillDetailPage.vue");
+const PaymentCheckoutPage = () => import("@/pages/PaymentCheckoutPage.vue");
 const UserProfilePage = () => import("@/pages/UserProfilePage.vue");
 const AdminLoginPage = () => import("@/pages/AdminLoginPage.vue");
 const AdminAnalyticsPage = () => import("@/pages/AdminAnalyticsPage.vue");
 const BIEntryPage = () => import("@/pages/BIEntryPage.vue");
-const AdminAnchorEventPage = () =>
-  import("@/pages/AdminAnchorEventPage.vue");
+const AdminAnchorEventPage = () => import("@/pages/AdminAnchorEventPage.vue");
 const AdminPRPage = () => import("@/pages/AdminPRPage.vue");
 const AdminPoisPage = () => import("@/pages/AdminPoisPage.vue");
-const AdminCommerceProductPage = () =>
-  import("@/pages/AdminCommerceProductPage.vue");
-const AdminCommerceOfferPage = () =>
-  import("@/pages/AdminCommerceOfferPage.vue");
-const AdminCommercePlacementPage = () =>
-  import("@/pages/AdminCommercePlacementPage.vue");
-const AdminCommerceOrderBillPage = () =>
-  import("@/pages/AdminCommerceOrderBillPage.vue");
-const AdminCommerceFulfillmentPage = () =>
-  import("@/pages/AdminCommerceFulfillmentPage.vue");
-const AdminPaymentPage = () =>
-  import("@/pages/AdminPaymentPage.vue");
-const AdminRideHailingPage = () =>
-  import("@/pages/AdminRideHailingPage.vue");
-const AdminFeedbackQuestionnairesPage = () =>
-  import("@/pages/AdminFeedbackQuestionnairesPage.vue");
-const ContactAuthorPage = () => import("@/pages/ContactAuthorPage.vue");
-const ContactSupportPage = () => import("@/pages/ContactSupportPage.vue");
+const AdminCommerceProductPage = () => import("@/pages/AdminCommerceProductPage.vue");
+const AdminCommerceOfferPage = () => import("@/pages/AdminCommerceOfferPage.vue");
+const AdminCommercePlacementPage = () => import("@/pages/AdminCommercePlacementPage.vue");
+const AdminCommerceOrderBillPage = () => import("@/pages/AdminCommerceOrderBillPage.vue");
+const AdminCommerceFulfillmentPage = () => import("@/pages/AdminCommerceFulfillmentPage.vue");
+const AdminPaymentPage = () => import("@/pages/AdminPaymentPage.vue");
+const AdminRideHailingPage = () => import("@/pages/AdminRideHailingPage.vue");
+const AdminFeedbackQuestionnairesPage = () => import("@/pages/AdminFeedbackQuestionnairesPage.vue");
+const ContactAuthorPage = () => import("@/pages/ContactAuthorPage.vue");
+const ContactSupportPage = () => import("@/pages/ContactSupportPage.vue");
 const AboutPage = () => import("@/pages/AboutPage.vue");
 const EventPlazaPage = () => import("@/pages/EventPlazaPage.vue");
 const EventPRSearchPage = () => import("@/pages/EventPRSearchPage.vue");
 const AnchorEventLandingPage = () => import("@/pages/AnchorEventLandingPage.vue");
-const WeChatOAuthCallbackPage = () =>
-  import("@/pages/WeChatOAuthCallbackPage.vue");
-
-const routes: RouteRecordRaw[] = [
-  {
-    path: "/",
-    name: "home",
-    component: HomePage,
-    meta: {
-      wechatSharePolicy: "route",
-    },
-  },
+const WeChatOAuthCallbackPage = () => import("@/pages/WeChatOAuthCallbackPage.vue");
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: "/",
+    name: "home",
+    component: HomePage,
+    meta: {
+      wechatSharePolicy: "route",
+    },
+  },
   {
     path: "/me",
     name: "me",
     component: MePage,
-    meta: {
+    meta: {
       wechatSharePolicy: "route",
     },
   },
@@ -89,14 +69,14 @@ const routes: RouteRecordRaw[] = [
       wechatAutoLoginPolicy: "skip",
     },
   },
-  {
-    path: "/pr/mine",
-    name: "pr-mine",
-    component: MyPRsPage,
-    meta: {
-      wechatSharePolicy: "route",
-    },
-  },
+  {
+    path: "/pr/mine",
+    name: "pr-mine",
+    component: MyPRsPage,
+    meta: {
+      wechatSharePolicy: "route",
+    },
+  },
   {
     path: "/pr/:id",
     name: "pr-detail",
@@ -125,32 +105,32 @@ const routes: RouteRecordRaw[] = [
   {
     path: "/pr/new",
     name: "pr-create",
-    component: PRCreatePage,
-    meta: {
-      wechatSharePolicy: "route",
-    },
-  },
-  {
-    path: "/pr/:id/partners/:partnerId",
-    name: "pr-partner-profile",
-    component: UserProfilePage,
-    meta: {
-      wechatSharePolicy: "skip",
-    },
-  },
+    component: PRCreatePage,
+    meta: {
+      wechatSharePolicy: "route",
+    },
+  },
+  {
+    path: "/pr/:id/partners/:partnerId",
+    name: "pr-partner-profile",
+    component: UserProfilePage,
+    meta: {
+      wechatSharePolicy: "skip",
+    },
+  },
   {
     path: "/pr/:id/messages",
     name: "pr-messages",
     component: PRMessagesPage,
-    meta: {
-      wechatSharePolicy: "skip",
+    meta: {
+      wechatSharePolicy: "skip",
       wechatAutoLoginPolicy: "skip",
     },
   },
   {
     path: "/order/new",
     name: "order-new",
-    component: OrderingFromPlacementPage,
+    component: OrderingPage,
     meta: {
       wechatSharePolicy: "skip",
     },
@@ -375,46 +355,46 @@ const routes: RouteRecordRaw[] = [
       requiredRoles: ["service"],
     },
   },
-  {
-    path: "/contact-support",
-    name: "contact-support",
-    component: ContactSupportPage,
-    meta: {
-      wechatSharePolicy: "route",
-    },
-  },
-  {
-    path: "/contact-author",
-    name: "contact-author",
-    component: ContactAuthorPage,
-    meta: {
-      wechatSharePolicy: "route",
-    },
-  },
-  {
-    path: "/about",
-    name: "about",
-    component: AboutPage,
-    meta: {
-      wechatSharePolicy: "route",
-    },
-  },
-  {
-    path: "/events",
-    name: "event-plaza",
-    component: EventPlazaPage,
-    meta: {
-      wechatSharePolicy: "route",
-    },
-  },
-  {
-    path: "/events/search",
-    name: "event-pr-search",
-    component: EventPRSearchPage,
-    meta: {
-      wechatSharePolicy: "route",
-    },
-  },
+  {
+    path: "/contact-support",
+    name: "contact-support",
+    component: ContactSupportPage,
+    meta: {
+      wechatSharePolicy: "route",
+    },
+  },
+  {
+    path: "/contact-author",
+    name: "contact-author",
+    component: ContactAuthorPage,
+    meta: {
+      wechatSharePolicy: "route",
+    },
+  },
+  {
+    path: "/about",
+    name: "about",
+    component: AboutPage,
+    meta: {
+      wechatSharePolicy: "route",
+    },
+  },
+  {
+    path: "/events",
+    name: "event-plaza",
+    component: EventPlazaPage,
+    meta: {
+      wechatSharePolicy: "route",
+    },
+  },
+  {
+    path: "/events/search",
+    name: "event-pr-search",
+    component: EventPRSearchPage,
+    meta: {
+      wechatSharePolicy: "route",
+    },
+  },
   {
     path: "/events/:eventId",
     name: "anchor-event",
@@ -442,18 +422,18 @@ const routes: RouteRecordRaw[] = [
     path: "/wechat/oauth/callback",
     name: "wechat-oauth-callback",
     component: WeChatOAuthCallbackPage,
-    meta: {
-      wechatSharePolicy: "skip",
-    },
-  },
-];
-
-export const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
-  routes,
-  scrollBehavior(to, _from, savedPosition) {
-    if (savedPosition) return savedPosition;
-
+    meta: {
+      wechatSharePolicy: "skip",
+    },
+  },
+];
+
+export const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes,
+  scrollBehavior(to, _from, savedPosition) {
+    if (savedPosition) return savedPosition;
+
     if (to.path.startsWith("/admin/") && to.hash) {
       return { left: 0, top: 0 };
     }
@@ -462,14 +442,14 @@ export const router = createRouter({
       return {
         el: to.hash,
         top: 0,
-        behavior: "smooth",
-      };
-    }
-
-    return { left: 0, top: 0 };
-  },
-});
-
+        behavior: "smooth",
+      };
+    }
+
+    return { left: 0, top: 0 };
+  },
+});
+
 router.beforeEach((to) => {
   const requiredRoles = to.meta.requiredRoles;
   if (!requiredRoles?.length) {
@@ -479,30 +459,30 @@ router.beforeEach((to) => {
   if (getStoredAdminHasAnyRole(requiredRoles)) {
     return true;
   }
-
-  return {
-    name: "admin-login",
-    query: {
-      redirect: to.fullPath,
-    },
-  };
-});
-
-const parsePositiveInt = (value: unknown): number | undefined => {
-  if (typeof value !== "string") return undefined;
-  const parsed = Number.parseInt(value, 10);
-  if (!Number.isFinite(parsed) || parsed <= 0) return undefined;
-  return parsed;
-};
-
-router.afterEach((to) => {
-  if (typeof window !== "undefined") {
-    captureSpmAttributionFromUrl(window.location.href);
-  }
-
-  trackEvent("page_view", {
-    page: sanitizeSensitiveRoutePath(to.fullPath),
-    routeName: typeof to.name === "string" ? to.name : undefined,
-    prId: parsePositiveInt(to.params.id),
-  });
-});
+
+  return {
+    name: "admin-login",
+    query: {
+      redirect: to.fullPath,
+    },
+  };
+});
+
+const parsePositiveInt = (value: unknown): number | undefined => {
+  if (typeof value !== "string") return undefined;
+  const parsed = Number.parseInt(value, 10);
+  if (!Number.isFinite(parsed) || parsed <= 0) return undefined;
+  return parsed;
+};
+
+router.afterEach((to) => {
+  if (typeof window !== "undefined") {
+    captureSpmAttributionFromUrl(window.location.href);
+  }
+
+  trackEvent("page_view", {
+    page: sanitizeSensitiveRoutePath(to.fullPath),
+    routeName: typeof to.name === "string" ? to.name : undefined,
+    prId: parsePositiveInt(to.params.id),
+  });
+});
diff --git a/apps/frontend/src/domains/commerce/model/ordering-entry-storage.ts b/apps/frontend/src/domains/commerce/model/ordering-entry-storage.ts
index bc5e72d1a..2fc730d45 100644
--- a/apps/frontend/src/domains/commerce/model/ordering-entry-storage.ts
+++ b/apps/frontend/src/domains/commerce/model/ordering-entry-storage.ts
@@ -11,3 +11,39 @@ export type OrderingEntryPayload = {
   bindings: Record<string, unknown>;
   bindingLocks: Record<string, true>;
 };
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  typeof value === "object" && value !== null && !Array.isArray(value);
+
+const normalizeBindingLocks = (value: unknown): Record<string, true> => {
+  if (!isRecord(value)) return {};
+  return Object.fromEntries(
+    Object.entries(value).filter((entry): entry is [string, true] => entry[1] === true),
+  );
+};
+
+export const normalizeOrderingEntryPayload = (value: unknown): OrderingEntryPayload | null => {
+  if (!isRecord(value)) return null;
+  const source = value.source;
+  if (!isRecord(source) || typeof source.offerId !== "number") return null;
+  if (!isRecord(value.offerDetail)) return null;
+
+  return {
+    source: {
+      offerId: source.offerId,
+    },
+    offerDetail: value.offerDetail as OrderingOfferDetail,
+    prId: typeof value.prId === "number" ? value.prId : undefined,
+    bindings: isRecord(value.bindings) ? value.bindings : {},
+    bindingLocks: normalizeBindingLocks(value.bindingLocks),
+  };
+};
+
+export const parseOrderingEntryPayload = (raw: string | null): OrderingEntryPayload | null => {
+  if (!raw) return null;
+  try {
+    return normalizeOrderingEntryPayload(JSON.parse(raw));
+  } catch {
+    return null;
+  }
+};
diff --git a/apps/frontend/src/domains/commerce/queries/useCommerce.ts b/apps/frontend/src/domains/commerce/queries/useCommerce.ts
index 67c6e52d1..d9f1c4ae9 100644
--- a/apps/frontend/src/domains/commerce/queries/useCommerce.ts
+++ b/apps/frontend/src/domains/commerce/queries/useCommerce.ts
@@ -7,6 +7,7 @@ import { queryKeys } from "@/shared/api/query-keys";
 
 type CommerceApi = typeof client.api.commerce;
 type PlacementApi = typeof client.api.placements;
+type PrApi = typeof client.api.pr;
 
 export type PlacementMatchResponse = InferResponseType<PlacementApi["$post"]>;
 export type PlacementInstanceProjection = PlacementMatchResponse["placements"][number];
@@ -15,6 +16,8 @@ export type OrderingEntryResponse = InferResponseType<
   PlacementApi[":instanceId"]["ordering-entry"]["$post"]
 >;
 
+export type PrOfferOrderLookupResponse = InferResponseType<PrApi[":id"]["orders"]["$get"]>;
+
 export type OfferListingInput = Parameters<
   CommerceApi["offers"][":offerId"]["listing"]["$post"]
 >[0]["json"];
@@ -109,6 +112,24 @@ export const resolvePlacementOrderingEntry = async (input: {
   return readJsonOrThrow<OrderingEntryResponse>(response, "Failed to resolve ordering entry");
 };
 
+export const listPrOrdersForOffer = async (input: {
+  prId: number;
+  offerId: number;
+  statusIn: Array<"INITIATING" | "OPEN">;
+}): Promise<PrOfferOrderLookupResponse> => {
+  const response = await client.api.pr[":id"].orders.$get(
+    {
+      param: { id: String(input.prId) },
+      query: {
+        offerId: String(input.offerId),
+        statusIn: input.statusIn,
+      },
+    },
+    { init: { credentials: "include" } },
+  );
+  return readJsonOrThrow<PrOfferOrderLookupResponse>(response, "Failed to load PR orders");
+};
+
 export const useOfferListing = (
   input: Ref<{
     offerId: number;
diff --git a/apps/frontend/src/domains/commerce/ui/ButtonPlacement.vue b/apps/frontend/src/domains/commerce/ui/ButtonPlacement.vue
index 50682b442..d1ab44fba 100644
--- a/apps/frontend/src/domains/commerce/ui/ButtonPlacement.vue
+++ b/apps/frontend/src/domains/commerce/ui/ButtonPlacement.vue
@@ -5,8 +5,9 @@
       tone="neutral" variant="soft"
       size="md"
 
+      :loading="isOpeningPlacement"
       data-testid="pr-detail.commerce-placement.open"
-      @click="emit('placement-click', placement)"
+      @click="openPlacementOrdering(placement)"
     >
       <template #leading>
         <span class="i-mdi-storefront-outline"></span>
@@ -20,24 +21,41 @@
 </template>
 
 <script setup lang="ts">
+import { PuButton } from "@partner-up-dev/design-web";
 import { computed, toRef } from "vue";
 import {
-  usePlacementMatch,
   type PlacementInstanceProjection,
+  usePlacementMatch,
 } from "@/domains/commerce/queries/useCommerce";
-import { PuButton } from "@partner-up-dev/design-web";
+import { usePlacementOrderingEntryFlow } from "@/domains/commerce/use-cases/usePlacementOrderingEntryFlow";
 
 const props = defineProps<{
   matchingContext: unknown;
-}>();
-
-const emit = defineEmits<{
-  "placement-click": [placement: PlacementInstanceProjection];
+  prId: number | null;
 }>();
 
 const matchingContext = toRef(props, "matchingContext");
-const placementQuery = usePlacementMatch(computed(() => matchingContext.value), "BUTTON");
+const placementQuery = usePlacementMatch(
+  computed(() => matchingContext.value),
+  "BUTTON",
+);
 const placement = computed(() => placementQuery.data.value?.placements[0] ?? null);
+const placementOrderingFlow = usePlacementOrderingEntryFlow();
+const isOpeningPlacement = computed(
+  () =>
+    placement.value !== null &&
+    placementOrderingFlow.pendingPlacementId.value === placement.value.id,
+);
+
+const openPlacementOrdering = async (
+  selectedPlacement: PlacementInstanceProjection,
+): Promise<void> => {
+  await placementOrderingFlow.openPlacementOrdering({
+    placement: selectedPlacement,
+    matchingContext: matchingContext.value,
+    prId: props.prId,
+  });
+};
 </script>
 
 <style scoped lang="scss">
diff --git a/apps/frontend/src/domains/commerce/use-cases/useOrderingHandoffStore.ts b/apps/frontend/src/domains/commerce/use-cases/useOrderingHandoffStore.ts
new file mode 100644
index 000000000..4d4065598
--- /dev/null
+++ b/apps/frontend/src/domains/commerce/use-cases/useOrderingHandoffStore.ts
@@ -0,0 +1,59 @@
+import { defineStore } from "pinia";
+import { computed, ref } from "vue";
+import {
+  normalizeOrderingEntryPayload,
+  ORDERING_ENTRY_STORAGE_KEY,
+  type OrderingEntryPayload,
+  parseOrderingEntryPayload,
+} from "@/domains/commerce/model/ordering-entry-storage";
+
+const readStoredOrderingEntry = (): OrderingEntryPayload | null => {
+  if (typeof window === "undefined") return null;
+  try {
+    return parseOrderingEntryPayload(window.sessionStorage.getItem(ORDERING_ENTRY_STORAGE_KEY));
+  } catch {
+    return null;
+  }
+};
+
+const writeStoredOrderingEntry = (entry: OrderingEntryPayload | null): void => {
+  if (typeof window === "undefined") return;
+  try {
+    if (entry) {
+      window.sessionStorage.setItem(ORDERING_ENTRY_STORAGE_KEY, JSON.stringify(entry));
+      return;
+    }
+    window.sessionStorage.removeItem(ORDERING_ENTRY_STORAGE_KEY);
+  } catch {
+    // Storage can be unavailable in private or embedded contexts; Pinia still
+    // keeps the handoff alive for the current app session.
+  }
+};
+
+export const useOrderingHandoffStore = defineStore("orderingHandoff", () => {
+  const orderingEntry = ref<OrderingEntryPayload | null>(readStoredOrderingEntry());
+  const hasOrderingEntry = computed(() => orderingEntry.value !== null);
+
+  const setOrderingEntry = (entry: OrderingEntryPayload): void => {
+    const normalized = normalizeOrderingEntryPayload(entry);
+    orderingEntry.value = normalized;
+    writeStoredOrderingEntry(normalized);
+  };
+
+  const clearOrderingEntry = (): void => {
+    orderingEntry.value = null;
+    writeStoredOrderingEntry(null);
+  };
+
+  const reloadOrderingEntry = (): void => {
+    orderingEntry.value = readStoredOrderingEntry();
+  };
+
+  return {
+    orderingEntry,
+    hasOrderingEntry,
+    setOrderingEntry,
+    clearOrderingEntry,
+    reloadOrderingEntry,
+  };
+});
diff --git a/apps/frontend/src/domains/commerce/use-cases/usePlacementOrderingEntryFlow.ts b/apps/frontend/src/domains/commerce/use-cases/usePlacementOrderingEntryFlow.ts
new file mode 100644
index 000000000..dbcc3f248
--- /dev/null
+++ b/apps/frontend/src/domains/commerce/use-cases/usePlacementOrderingEntryFlow.ts
@@ -0,0 +1,52 @@
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+import {
+  listPrOrdersForOffer,
+  type PlacementInstanceProjection,
+  resolvePlacementOrderingEntry,
+} from "@/domains/commerce/queries/useCommerce";
+import { useOrderingHandoffStore } from "@/domains/commerce/use-cases/useOrderingHandoffStore";
+
+export type OpenPlacementOrderingInput = {
+  placement: PlacementInstanceProjection;
+  matchingContext: unknown;
+  prId: number | null;
+};
+
+export const usePlacementOrderingEntryFlow = () => {
+  const router = useRouter();
+  const orderingHandoff = useOrderingHandoffStore();
+  const pendingPlacementId = ref<number | null>(null);
+
+  const openPlacementOrdering = async (input: OpenPlacementOrderingInput): Promise<void> => {
+    pendingPlacementId.value = input.placement.id;
+    try {
+      if (input.prId !== null) {
+        const orderPayload = await listPrOrdersForOffer({
+          prId: input.prId,
+          offerId: input.placement.offerId,
+          statusIn: ["INITIATING", "OPEN"],
+        });
+        const existingOrder = orderPayload.orders[0];
+        if (existingOrder) {
+          await router.push({ path: `/orders/${existingOrder.id}` });
+          return;
+        }
+      }
+
+      const orderingEntry = await resolvePlacementOrderingEntry({
+        placementInstanceId: input.placement.id,
+        matchingContext: input.matchingContext,
+      });
+      orderingHandoff.setOrderingEntry(orderingEntry);
+      await router.push({ path: "/order/new" });
+    } finally {
+      pendingPlacementId.value = null;
+    }
+  };
+
+  return {
+    pendingPlacementId,
+    openPlacementOrdering,
+  };
+};
diff --git a/apps/frontend/src/pages/OrderingFromPlacementPage.vue b/apps/frontend/src/pages/OrderingPage.vue
similarity index 90%
rename from apps/frontend/src/pages/OrderingFromPlacementPage.vue
rename to apps/frontend/src/pages/OrderingPage.vue
index 67d60876c..42e2442b0 100644
--- a/apps/frontend/src/pages/OrderingFromPlacementPage.vue
+++ b/apps/frontend/src/pages/OrderingPage.vue
@@ -104,6 +104,7 @@
 
 <script setup lang="ts">
 import { PuButton, PuDialog, PuInlineNotice } from "@partner-up-dev/design-web";
+import { storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
@@ -112,16 +113,14 @@ import type {
   OrderingContentOutput,
   OrderingContentSummary,
 } from "@/domains/commerce/model/ordering-content";
-import {
-  ORDERING_ENTRY_STORAGE_KEY,
-  type OrderingEntryPayload,
-} from "@/domains/commerce/model/ordering-entry-storage";
+import type { OrderingEntryPayload } from "@/domains/commerce/model/ordering-entry-storage";
 import { type CreateOrderInput, useCreateOrder } from "@/domains/commerce/queries/useCommerce";
 import OrderingFooterActionBar from "@/domains/commerce/ui/ordering/OrderingFooterActionBar.vue";
 import OrderingPageShell from "@/domains/commerce/ui/ordering/OrderingPageShell.vue";
 import OrderingPriceDetailDrawer from "@/domains/commerce/ui/ordering/OrderingPriceDetailDrawer.vue";
 import RentalOrderingForm from "@/domains/commerce/ui/ordering/RentalOrderingForm.vue";
 import RideHailingOrderingContent from "@/domains/commerce/ui/ordering/RideHailingOrderingContent.vue";
+import { useOrderingHandoffStore } from "@/domains/commerce/use-cases/useOrderingHandoffStore";
 
 type OrderingOfferDetail = OrderingEntryPayload["offerDetail"];
 type OrderingDialogKind = "blocked";
@@ -140,33 +139,8 @@ type OrderingActionProblem = {
 
 const { t } = useI18n();
 const router = useRouter();
-
-const readOrderingEntry = (): OrderingEntryPayload | null => {
-  const raw = sessionStorage.getItem(ORDERING_ENTRY_STORAGE_KEY);
-  if (!raw) return null;
-  try {
-    const parsed = JSON.parse(raw) as Partial<OrderingEntryPayload>;
-    if (typeof parsed.source?.offerId !== "number") return null;
-    if (!parsed.offerDetail) return null;
-    return {
-      source: {
-        offerId: parsed.source.offerId,
-      },
-      offerDetail: parsed.offerDetail,
-      prId: typeof parsed.prId === "number" ? parsed.prId : undefined,
-      bindings:
-        typeof parsed.bindings === "object" && parsed.bindings !== null ? parsed.bindings : {},
-      bindingLocks:
-        typeof parsed.bindingLocks === "object" && parsed.bindingLocks !== null
-          ? parsed.bindingLocks
-          : {},
-    };
-  } catch {
-    return null;
-  }
-};
-
-const orderingEntry = ref<OrderingEntryPayload | null>(readOrderingEntry());
+const orderingHandoff = useOrderingHandoffStore();
+const { orderingEntry } = storeToRefs(orderingHandoff);
 const missingInput = computed(() => orderingEntry.value === null);
 
 const createOrderMutation = useCreateOrder();
diff --git a/apps/frontend/src/pages/OrderingSupportPage.vue b/apps/frontend/src/pages/OrderingSupportPage.vue
index 1de3483a3..e94bb1dc3 100644
--- a/apps/frontend/src/pages/OrderingSupportPage.vue
+++ b/apps/frontend/src/pages/OrderingSupportPage.vue
@@ -146,55 +146,25 @@
 
 <script setup lang="ts">
 import { PuButton, PuModal } from "@partner-up-dev/design-web";
+import { storeToRefs } from "pinia";
 import { computed, nextTick, onMounted, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
-import OrderingPageShell from "@/domains/commerce/ui/ordering/OrderingPageShell.vue";
-import {
-  ORDERING_ENTRY_STORAGE_KEY,
-  type OrderingEntryPayload,
-} from "@/domains/commerce/model/ordering-entry-storage";
 import {
-  ORDERING_SUPPORT_HANDOFF_STORAGE_KEY,
   isOrderingSupportHandoffPayload,
+  ORDERING_SUPPORT_HANDOFF_STORAGE_KEY,
   type OrderingSupportHandoffPayload,
 } from "@/domains/commerce/model/ordering-support-handoff";
+import OrderingPageShell from "@/domains/commerce/ui/ordering/OrderingPageShell.vue";
 import OrderingSupportSummaryCard from "@/domains/commerce/ui/ordering/OrderingSupportSummaryCard.vue";
-import {
-  PUBLIC_CONFIG_KEYS,
-  usePublicConfig,
-} from "@/shared/config/queries/usePublicConfig";
+import { useOrderingHandoffStore } from "@/domains/commerce/use-cases/useOrderingHandoffStore";
+import { PUBLIC_CONFIG_KEYS, usePublicConfig } from "@/shared/config/queries/usePublicConfig";
 import { useCloudStorage } from "@/shared/upload/useCloudStorage";
 
 const { t } = useI18n();
 const router = useRouter();
-
-const readOrderingEntry = (): OrderingEntryPayload | null => {
-  const raw = sessionStorage.getItem(ORDERING_ENTRY_STORAGE_KEY);
-  if (!raw) return null;
-  try {
-    const parsed = JSON.parse(raw) as Partial<OrderingEntryPayload>;
-    if (typeof parsed.source?.offerId !== "number") return null;
-    if (!parsed.offerDetail) return null;
-    return {
-      source: {
-        offerId: parsed.source.offerId,
-      },
-      offerDetail: parsed.offerDetail,
-      prId: typeof parsed.prId === "number" ? parsed.prId : undefined,
-      bindings:
-        typeof parsed.bindings === "object" && parsed.bindings !== null
-          ? parsed.bindings
-          : {},
-      bindingLocks:
-        typeof parsed.bindingLocks === "object" && parsed.bindingLocks !== null
-          ? parsed.bindingLocks
-          : {},
-    };
-  } catch {
-    return null;
-  }
-};
+const orderingHandoff = useOrderingHandoffStore();
+const { orderingEntry } = storeToRefs(orderingHandoff);
 
 const readSupportHandoff = (): OrderingSupportHandoffPayload | null => {
   const raw = sessionStorage.getItem(ORDERING_SUPPORT_HANDOFF_STORAGE_KEY);
@@ -207,13 +177,8 @@ const readSupportHandoff = (): OrderingSupportHandoffPayload | null => {
   }
 };
 
-const orderingEntry = ref<OrderingEntryPayload | null>(readOrderingEntry());
-const supportHandoff = ref<OrderingSupportHandoffPayload | null>(
-  readSupportHandoff(),
-);
-const summaryCardRef = ref<InstanceType<
-  typeof OrderingSupportSummaryCard
-> | null>(null);
+const supportHandoff = ref<OrderingSupportHandoffPayload | null>(readSupportHandoff());
+const summaryCardRef = ref<InstanceType<typeof OrderingSupportSummaryCard> | null>(null);
 const summaryPosterUrl = ref<string | null>(null);
 const summaryPosterGenerating = ref(false);
 const summaryPosterError = ref<string | null>(null);
@@ -268,15 +233,11 @@ const summaryPosterHint = computed(() =>
 );
 
 const backFallbackTo = computed(() =>
-  orderingEntry.value?.prId
-    ? { path: `/pr/${orderingEntry.value.prId}` }
-    : { path: "/" },
+  orderingEntry.value?.prId ? { path: `/pr/${orderingEntry.value.prId}` } : { path: "/" },
 );
 
 const pageTitle = computed(() =>
-  supportHandoff.value
-    ? t("ordering.support.pageTitle")
-    : t("ordering.support.recoveryPageTitle"),
+  supportHandoff.value ? t("ordering.support.pageTitle") : t("ordering.support.recoveryPageTitle"),
 );
 
 const recoveryActionLabel = computed(() =>
@@ -295,9 +256,7 @@ const handleRecoveryAction = (): void => {
   void router.push(orderingEntry.value ? { name: "order-new" } : { path: "/" });
 };
 
-const loadHtml2Canvas = async (): Promise<
-  (typeof import("html2canvas"))["default"]
-> => {
+const loadHtml2Canvas = async (): Promise<typeof import("html2canvas")["default"]> => {
   const module = await import("html2canvas");
   return module.default;
 };
@@ -349,9 +308,7 @@ const generateSummaryPoster = async (): Promise<void> => {
     summaryPosterUrl.value = await uploadImage(blob, { purpose: "poster" });
   } catch (error) {
     summaryPosterError.value =
-      error instanceof Error
-        ? error.message
-        : t("ordering.support.posterGenerationFailed");
+      error instanceof Error ? error.message : t("ordering.support.posterGenerationFailed");
   } finally {
     summaryPosterGenerating.value = false;
   }
diff --git a/apps/frontend/src/pages/PRPage.vue b/apps/frontend/src/pages/PRPage.vue
index 2a6fc5b83..2728581e2 100644
--- a/apps/frontend/src/pages/PRPage.vue
+++ b/apps/frontend/src/pages/PRPage.vue
@@ -164,7 +164,7 @@
           <ButtonPlacement
             v-if="canMountButtonPlacement && placementMatchingContext"
             :matching-context="placementMatchingContext"
-            @placement-click="handlePlacementClick"
+            :pr-id="prDetail.id"
           />
         </div>
 
@@ -189,12 +189,28 @@
 </template>
 
 <script setup lang="ts">
+import type { PRStatusManual } from "@partner-up-dev/backend";
+import {
+  PuButton,
+  PuInlineNotice,
+  PuLoadingState,
+  PuModal,
+  PuPageHeader,
+  PuPageScaffold,
+  PuTag,
+} from "@partner-up-dev/design-web";
 import { computed, isRef, nextTick, ref, watch } from "vue";
-import { useRoute, useRouter } from "vue-router";
 import { useI18n } from "vue-i18n";
-import type { PRStatusManual } from "@partner-up-dev/backend";
-import PageFooter from "@/shared/ui/sections/PageFooter.vue";
+import { useRoute, useRouter } from "vue-router";
+import ButtonPlacement from "@/domains/commerce/ui/ButtonPlacement.vue";
+import { resolvePRDisplayStatus } from "@/domains/pr/model/pr-display-status";
+import type { PRJoinEntryContext } from "@/domains/pr/model/pr-join-entry-context";
+import { resolvePRStatusTagText, resolvePRStatusTagTone } from "@/domains/pr/model/pr-status-tag";
+import { usePRDetail } from "@/domains/pr/queries/usePRDetail";
+import { usePRRouteId } from "@/domains/pr/routing/usePRRouteId";
 import PRFactsCard from "@/domains/pr/ui/composites/PRFactsCard.vue";
+import PREditor from "@/domains/pr/ui/forms/PREditor.vue";
+import UpdatePRStatusForm from "@/domains/pr/ui/forms/UpdatePRStatusForm.vue";
 import PRBetaGroupAction from "@/domains/pr/ui/sections/PRBetaGroupAction.vue";
 import PRCheckInFeedbackActions from "@/domains/pr/ui/sections/PRCheckInFeedbackActions.vue";
 import PRConfirmationAction from "@/domains/pr/ui/sections/PRConfirmationAction.vue";
@@ -208,48 +224,21 @@ import PRPairingCodeAction from "@/domains/pr/ui/sections/PRPairingCodeAction.vu
 import PRShareAction from "@/domains/pr/ui/sections/PRShareAction.vue";
 import PRStudySprintPomodoroAction from "@/domains/pr/ui/sections/PRStudySprintPomodoroAction.vue";
 import PRWaitlistActions from "@/domains/pr/ui/sections/PRWaitlistActions.vue";
-import ButtonPlacement from "@/domains/commerce/ui/ButtonPlacement.vue";
-import PREditor from "@/domains/pr/ui/forms/PREditor.vue";
-import UpdatePRStatusForm from "@/domains/pr/ui/forms/UpdatePRStatusForm.vue";
-import { usePRDetail } from "@/domains/pr/queries/usePRDetail";
-import { resolvePRDisplayStatus } from "@/domains/pr/model/pr-display-status";
-import {
-  resolvePRStatusTagText,
-  resolvePRStatusTagTone,
-} from "@/domains/pr/model/pr-status-tag";
-import { usePRDetailHead } from "@/domains/pr/use-cases/usePRDetailHead";
-import { usePRRouteShareDescriptor } from "@/domains/pr/use-cases/usePRRouteShareDescriptor";
-import { usePRShareContext } from "@/domains/pr/use-cases/usePRShareContext";
 import { usePRCreatorActions } from "@/domains/pr/use-cases/usePRCreatorActions";
-import type { PRJoinEntryContext } from "@/domains/pr/model/pr-join-entry-context";
-import { useRouteShareDescriptorRegistration } from "@/domains/share/use-cases/route-share-controller";
-import { usePRRouteId } from "@/domains/pr/routing/usePRRouteId";
-import { trackEvent } from "@/shared/telemetry/track";
+import { usePRDetailHead } from "@/domains/pr/use-cases/usePRDetailHead";
 import {
   providePRPendingReplayRegistry,
   usePRPendingWeChatReplay,
 } from "@/domains/pr/use-cases/usePRPendingWeChatReplay";
+import { usePRRouteShareDescriptor } from "@/domains/pr/use-cases/usePRRouteShareDescriptor";
+import { usePRShareContext } from "@/domains/pr/use-cases/usePRShareContext";
+import { useRouteShareDescriptorRegistration } from "@/domains/share/use-cases/route-share-controller";
 import { useMatchedPRHandoff } from "@/processes/route-handoff/useMatchedPRHandoff";
-import { client } from "@/lib/rpc";
-import {
-  resolvePlacementOrderingEntry,
-  type PlacementInstanceProjection,
-} from "@/domains/commerce/queries/useCommerce";
-import { ORDERING_ENTRY_STORAGE_KEY } from "@/domains/commerce/model/ordering-entry-storage";
 import { useFallbackBack } from "@/shared/routing/useFallbackBack";
-import {
-  PuButton,
-  PuInlineNotice,
-  PuLoadingState,
-  PuModal,
-  PuPageHeader,
-  PuPageScaffold,
-  PuTag,
-} from "@partner-up-dev/design-web";
+import { trackEvent } from "@/shared/telemetry/track";
+import PageFooter from "@/shared/ui/sections/PageFooter.vue";
 
-type CreatorSecondaryActionType =
-  | "CREATOR_EDIT_CONTENT"
-  | "CREATOR_MODIFY_STATUS";
+type CreatorSecondaryActionType = "CREATOR_EDIT_CONTENT" | "CREATOR_MODIFY_STATUS";
 
 const route = useRoute();
 const router = useRouter();
@@ -260,17 +249,12 @@ const prDetail = computed(() => data.value);
 const pendingReplayRegistry = providePRPendingReplayRegistry();
 const factsCardTargetRef = ref<HTMLElement | null>(null);
 const editorRef = ref<InstanceType<typeof PREditor> | null>(null);
-const updateStatusFormRef = ref<InstanceType<typeof UpdatePRStatusForm> | null>(
-  null,
-);
+const updateStatusFormRef = ref<InstanceType<typeof UpdatePRStatusForm> | null>(null);
 const showEditContentModal = ref(false);
 const showModifyStatusModal = ref(false);
 const matchedPRHandoff = useMatchedPRHandoff();
 const prReadyForPendingReplay = computed(
-  () =>
-    id.value !== null &&
-    prDetail.value !== undefined &&
-    prDetail.value !== null,
+  () => id.value !== null && prDetail.value !== undefined && prDetail.value !== null,
 );
 
 const prDisplayTitle = computed(() => {
@@ -283,12 +267,8 @@ const prDisplayStatus = computed(() => {
   if (!detail) return "OPEN";
   return resolvePRDisplayStatus(detail.status, detail.partnerSection.capacity);
 });
-const prStatusTagText = computed(() =>
-  resolvePRStatusTagText(prDisplayStatus.value, t),
-);
-const prStatusTagTone = computed(() =>
-  resolvePRStatusTagTone(prDisplayStatus.value),
-);
+const prStatusTagText = computed(() => resolvePRStatusTagText(prDisplayStatus.value, t));
+const prStatusTagTone = computed(() => resolvePRStatusTagTone(prDisplayStatus.value));
 const updateStatusInitialStatus = computed<PRStatusManual>(() => {
   const status = prDetail.value?.status;
   if (status === "READY" || status === "ACTIVE" || status === "CLOSED") {
@@ -301,13 +281,8 @@ const supportsEventContextFeatures = computed(
 );
 const routeEventId = computed(() => {
   const routeEventIdRaw = route.query.fromEvent;
-  const routeEventId =
-    typeof routeEventIdRaw === "string" ? Number(routeEventIdRaw) : null;
-  if (
-    routeEventId !== null &&
-    Number.isFinite(routeEventId) &&
-    routeEventId > 0
-  ) {
+  const routeEventId = typeof routeEventIdRaw === "string" ? Number(routeEventIdRaw) : null;
+  if (routeEventId !== null && Number.isFinite(routeEventId) && routeEventId > 0) {
     return routeEventId;
   }
   return null;
@@ -444,9 +419,7 @@ const submitUpdateStatusForm = () => {
   updateStatusFormRef.value?.submitForm();
 };
 
-const handleUpdateStatusSubmit = async (
-  status: PRStatusManual,
-): Promise<void> => {
+const handleUpdateStatusSubmit = async (status: PRStatusManual): Promise<void> => {
   await submitStatusUpdate(status);
   closeModifyStatusModal();
 };
@@ -465,53 +438,7 @@ const handleJoinSuccessClosed = async (): Promise<void> => {
   });
 };
 
-const readJsonOrThrow = async <T,>(response: Response): Promise<T> => {
-  if (!response.ok) {
-    throw new Error("Request failed");
-  }
-  return (await response.json()) as T;
-};
-
-const handlePlacementClick = async (
-  placement: PlacementInstanceProjection,
-): Promise<void> => {
-  const pr = prDetail.value;
-  const matchingContext = placementMatchingContext.value;
-  if (!pr || !matchingContext) return;
-
-  const orderResponse = await client.api.pr[":id"].orders.$get(
-    {
-      param: { id: String(pr.id) },
-      query: {
-        offerId: String(placement.offerId),
-        statusIn: ["INITIATING", "OPEN"],
-      },
-    },
-    { init: { credentials: "include" } },
-  );
-  const orderPayload = await readJsonOrThrow<{
-    orders: Array<{ id: string }>;
-  }>(orderResponse);
-  const existingOrder = orderPayload.orders[0];
-  if (existingOrder) {
-    await router.push({ path: `/orders/${existingOrder.id}` });
-    return;
-  }
-
-  const orderingEntry = await resolvePlacementOrderingEntry({
-    placementInstanceId: placement.id,
-    matchingContext,
-  });
-  sessionStorage.setItem(
-    ORDERING_ENTRY_STORAGE_KEY,
-    JSON.stringify(orderingEntry),
-  );
-  await router.push({ path: "/order/new" });
-};
-
-const shouldHideFactsForHandoff = computed(() =>
-  matchedPRHandoff.shouldHideTargetForPR(id.value),
-);
+const shouldHideFactsForHandoff = computed(() => matchedPRHandoff.shouldHideTargetForPR(id.value));
 
 const registerFactsCardTarget = () => {
   if (id.value === null || !matchedPRHandoff.isActiveForPR(id.value)) {
diff --git a/docs/20-product-tdd/ecommerce-contracts.md b/docs/20-product-tdd/ecommerce-contracts.md
index ef9079586..63bbed89f 100644
--- a/docs/20-product-tdd/ecommerce-contracts.md
+++ b/docs/20-product-tdd/ecommerce-contracts.md
@@ -182,16 +182,20 @@ This means:
 - This task implements only `BUTTON` Placement.
 - Button Placement is rendered inside the PR Page Utility Actions row when the
   PR Page determines the current user is an active participant.
-- PR Page builds `matchingContext` from PR Detail and calls
-  `POST /api/placements?type=BUTTON`.
-- `matchPlacementInstance(type, matchingContext)` is the Placement boundary.
-  Placement does not receive `userId`, `prId`, `contextType`, `slotKey`, or a
-  PR-specific roster.
+- PR Page builds PR-derived `matchingContext` from PR Detail and passes it,
+  together with `prId`, into Button Placement.
+- Button Placement calls `POST /api/placements?type=BUTTON` through its
+  Placement entry flow.
+- `matchPlacementInstance(type, matchingContext)` is the Placement matching
+  boundary. Placement does not receive `userId`, `prId`, `contextType`,
+  `slotKey`, or a PR-specific roster as separate parameters; PR-derived facts
+  are contained only inside `matchingContext`.
 - A Placement Instance contains `offerId` and creative
   `{ ctaLabel, description? }`. It does not contain a navigation target.
-- On click, PR Page checks existing PR-linked orders with explicit status enum
-  values, then either routes to Order Detail or resolves an Ordering entry with
-  `POST /api/placements/:instanceId/ordering-entry` and opens `/order/new`.
+- On click, Button Placement's entry flow checks existing PR-linked orders with
+  explicit status enum values, then either routes to Order Detail or resolves an
+  Ordering entry with `POST /api/placements/:instanceId/ordering-entry`, stores
+  the generic Ordering handoff, and opens `/order/new`.
 - Ordering entry resolution is a Placement boundary operation that calls the
   Offer domain for an `OrderingOfferDetail` projection, resolves bindings, and
   assembles `OrderingEntryPayload`.
@@ -254,7 +258,8 @@ Pricing ownership:
 
 ## Ordering Command Contract
 
-- `/order/new` receives transient `OrderingEntryPayload` from the entry surface:
+- `/order/new` receives transient `OrderingEntryPayload` from the Commerce
+  Ordering handoff store:
   `{ source: { offerId }, offerDetail, prId?, bindings }`.
 - `source.offerId` is the commercial source reference and the stable entry for
   dynamic listing/quote issuance.
diff --git a/tasks/ride-hailing-ui-fixes/change-log.md b/tasks/ride-hailing-ui-fixes/change-log.md
index b9b983ee3..18ddb799a 100644
--- a/tasks/ride-hailing-ui-fixes/change-log.md
+++ b/tasks/ride-hailing-ui-fixes/change-log.md
@@ -423,3 +423,47 @@
     slice
   - added `quoteId` to fixed listed items and renamed RideHailing listed item
     kind from `QUOTE` to `CHOICE_CANDIDATE`
+
+## Slice: Ordering Entry Decoupling Planning
+
+- Added standalone plan:
+  `tasks/ride-hailing-ui-fixes/ordering-entry-decoupling-plan.md`.
+- Captured current coupling:
+  - PR Page owns existing-order lookup, Placement ordering-entry resolution,
+    raw `sessionStorage` write, and `/order/new` navigation
+  - Ordering Page and Ordering Support duplicate raw handoff parsing
+  - backend Placement ordering-entry already owns binding/context resolution
+- Captured target direction:
+  - Button Placement or its dedicated composable owns the
+    Placement-to-Ordering entry flow
+  - existing-order lookup, Placement ordering-entry resolution, handoff write,
+    and `/order/new` navigation all move out of PR Page
+  - PR Page may pass `matchingContext` and `prId` to Button Placement
+  - Ordering handoff moves behind a Commerce/Ordering Pinia store
+  - `/order/new` keeps its route path/name but the page becomes generic
+    `OrderingPage`
+  - PR Page only mounts Button Placement and passes matching context
+
+## Slice: Ordering Entry Decoupling Implementation
+
+- Frontend:
+  - added `useOrderingHandoffStore` for `OrderingEntryPayload`
+  - added payload normalization/parsing helpers beside the ordering-entry model
+  - moved existing-order lookup, Placement ordering-entry resolution, handoff
+    write, and navigation into `usePlacementOrderingEntryFlow`
+  - updated `ButtonPlacement` to call the entry-flow composable directly and
+    accept `prId`
+  - removed Commerce/Ordering entry-flow logic from `PRPage`
+  - renamed `OrderingFromPlacementPage.vue` to `OrderingPage.vue`
+  - updated `/order/new` lazy import without changing route path/name
+  - updated `OrderingSupportPage` to read ordering entry handoff from the same
+    store
+- Durable docs:
+  - updated ecommerce contract to assign entry-flow ownership to Button
+    Placement and the Commerce Ordering handoff store
+- Verification:
+  - `pnpm check:type:frontend`
+  - `pnpm exec biome check apps/frontend/src/app/router.ts apps/frontend/src/pages/PRPage.vue apps/frontend/src/pages/OrderingPage.vue apps/frontend/src/pages/OrderingSupportPage.vue apps/frontend/src/domains/commerce/model/ordering-entry-storage.ts apps/frontend/src/domains/commerce/queries/useCommerce.ts apps/frontend/src/domains/commerce/ui/ButtonPlacement.vue apps/frontend/src/domains/commerce/use-cases/useOrderingHandoffStore.ts apps/frontend/src/domains/commerce/use-cases/usePlacementOrderingEntryFlow.ts docs/20-product-tdd/ecommerce-contracts.md tasks/ride-hailing-ui-fixes/control.md tasks/ride-hailing-ui-fixes/discussion-log.md tasks/ride-hailing-ui-fixes/change-log.md tasks/ride-hailing-ui-fixes/ordering-entry-decoupling-plan.md`
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/rental-ordering.scenario.test.ts`
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+  - `git diff --check`
diff --git a/tasks/ride-hailing-ui-fixes/control.md b/tasks/ride-hailing-ui-fixes/control.md
index fab0957f9..0036e0187 100644
--- a/tasks/ride-hailing-ui-fixes/control.md
+++ b/tasks/ride-hailing-ui-fixes/control.md
@@ -18,13 +18,12 @@ Hypothesis:
 
 ## Classification
 
-- Primary route: `Reality`
-- Active mode: `Execute` for Offer Listing / quote identity implementation
-  verification and cleanup
+- Primary route: `Constraint`
+- Active mode: `Explore` for Ordering entry decoupling
 - Current collaboration state: choice-set backend/domain foundation, Ordering
-  UI primitive/control, and SKU Card layout remediation segments committed;
-  current Offer Listing / quote identity slice is implemented locally and not
-  committed
+  UI primitive/control, SKU Card layout remediation, and Offer Listing / quote
+  identity segments committed; current slice is Ordering entry decoupling
+  exploration with no production-code mutation yet
 
 ## Inherited Effective Truth
 
@@ -37,7 +36,9 @@ Hypothesis:
 - RideHailing candidate options are currently catalog-seeded, then evaluated by
   provider estimate. Provider-authored option discovery is a separate contract
   decision and is not part of ordinary UI fixes.
-- `OrderingFromPlacementPage.vue` is the shared ordering shell.
+- `OrderingFromPlacementPage.vue` is the current shared ordering route
+  entrypoint, but its name is now a known coupling smell because `/order/new`
+  is generic Ordering.
 - `RideHailingOrderingContent.vue` owns the RideHailing ordering content.
 - `RideHailingSkuCard.vue` owns RideHailing vehicle card display.
 - `CommerceOrderDetailPage.vue` currently owns both Rental and RideHailing order
@@ -108,8 +109,9 @@ Choose the narrowest sufficient proof per approved slice:
 - Committed slice: choice-set backend/domain foundation, Ordering UI
   primitive/control, FloatPanel migration, and SKU Card layout remediation
   (`42eb1a61`).
-- Uncommitted slice: Offer-owned Listing and product-type-independent quote
-  identity implemented:
+- Committed slice: Offer-owned Listing and product-type-independent quote
+  identity
+  (`499291ea`):
   - added `POST /api/commerce/offers/:offerId/listing`
   - added persisted `commerce_quotes`
   - added Quote-domain resolver for quote existence, expiry, active
@@ -188,6 +190,34 @@ Choose the narrowest sufficient proof per approved slice:
     all-unavailable no-create state
   - backend Quote-domain scenario now covers inactive Offer/SKU quote validity
     and invalid `CHOICE_SET` listing-session mixing
+- Current slice exploration: Ordering entry decoupling
+  - observed coupling point: `PRPage.vue` owns Button Placement click
+    orchestration, existing PR order lookup, Placement ordering-entry
+    resolution, raw handoff storage write, and `/order/new` navigation
+  - observed non-coupling point: `OrderingFromPlacementPage.vue` itself only
+    reads a handoff payload; it does not call Placement APIs
+  - observed duplication: `OrderingSupportPage.vue` repeats raw
+    `sessionStorage` parsing for `OrderingEntryPayload`
+  - target direction: Button Placement or a composable called only by Button
+    Placement owns the Placement-to-Ordering entry flow, and Ordering consumes a
+    Commerce/Ordering Pinia handoff store
+  - human decision: existing-order lookup, Placement ordering-entry resolution,
+    handoff write, and `/order/new` navigation should all move into
+    ButtonPlacement / `usePlacement...`; PR Page may pass `matchingContext` and
+    `prId`
+  - implementation status: production code changed locally; verification in
+    complete
+  - implementation shape: `PRPage` now passes only `matchingContext` and `prId`;
+    `ButtonPlacement` calls `usePlacementOrderingEntryFlow`; `OrderingPage`
+    reads `useOrderingHandoffStore`
+  - verified:
+    - `pnpm check:type:frontend`
+    - `pnpm exec biome check` on the changed frontend/doc/task files
+    - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/rental-ordering.scenario.test.ts`
+    - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+    - `git diff --check`
+  - planning artifact:
+    `tasks/ride-hailing-ui-fixes/ordering-entry-decoupling-plan.md`
 - Map diagnostic:
   - the gray RideHailing Ordering map observation was confirmed as a browser
     client issue; shared map code is not part of the active fix.
diff --git a/tasks/ride-hailing-ui-fixes/discussion-log.md b/tasks/ride-hailing-ui-fixes/discussion-log.md
index 4d4e18be3..e9a30c0e5 100644
--- a/tasks/ride-hailing-ui-fixes/discussion-log.md
+++ b/tasks/ride-hailing-ui-fixes/discussion-log.md
@@ -893,3 +893,50 @@
   show skeletons only during initial listing load when there are no visible
   quote options. During background refetch, keep the existing cards visible to
   avoid selection/list flicker.
+
+## Explore: Ordering Entry Decoupling
+
+- Human observation:
+  `OrderingFromPlacement` is a product of over-coupling Order and Placement.
+  Placement should resolve the context needed by Ordering, then hand off through
+  Pinia / Bindings-like intermediate state instead of leaving the Ordering route
+  named and wired as Placement-specific.
+- Finding:
+  `/order/new` already behaves as a generic Ordering route, but the route
+  component is still named `OrderingFromPlacementPage.vue`.
+- Finding:
+  `OrderingFromPlacementPage.vue` itself does not call Placement APIs. It reads
+  a serialized `OrderingEntryPayload` from raw `sessionStorage`.
+- Finding:
+  `PRPage.vue` is the real frontend coupling point. It receives
+  `placement-click` from `ButtonPlacement`, then checks existing PR orders,
+  resolves Placement ordering entry, writes the handoff payload to
+  `sessionStorage`, and navigates to `/order/new`.
+- Finding:
+  backend `resolvePlacementOrderingEntry` is already a Placement boundary
+  operation and already resolves binding rules, PR-derived route/time/participant
+  enrichment, and Offer detail.
+- Finding:
+  `OrderingSupportPage.vue` duplicates raw ordering-entry storage parsing.
+- Direction:
+  keep backend Placement ordering-entry as the binding-resolution authority, but
+  move frontend click orchestration into Button Placement or a composable called
+  only by Button Placement. Add a Commerce/Ordering-owned Pinia handoff store
+  and rename the page to generic `OrderingPage`.
+- Artifact:
+  added `ordering-entry-decoupling-plan.md` with topology, target model,
+  candidate Impact Handshake, invariants, and verification.
+- Human decision:
+  the full ButtonPlacement click flow belongs in ButtonPlacement or a dedicated
+  `usePlacement...` composable, not PR Page. This includes existing-order
+  lookup, Placement ordering-entry resolution, Ordering handoff write, and
+  `/order/new` navigation. PR Page may pass `matchingContext` and `prId`.
+- Implementation:
+  added a Commerce/Ordering Pinia handoff store for `OrderingEntryPayload`,
+  moved Button Placement click orchestration into
+  `usePlacementOrderingEntryFlow`, and renamed the route component to generic
+  `OrderingPage.vue` while keeping `/order/new` stable.
+- Boundary correction:
+  docs now phrase `prId` as not being a separate Placement matching parameter;
+  PR-derived facts may still be present inside `matchingContext`, and PR Page may
+  pass explicit `prId` to Button Placement for existing-order lookup.
diff --git a/tasks/ride-hailing-ui-fixes/ordering-entry-decoupling-plan.md b/tasks/ride-hailing-ui-fixes/ordering-entry-decoupling-plan.md
new file mode 100644
index 000000000..fb50bc7f7
--- /dev/null
+++ b/tasks/ride-hailing-ui-fixes/ordering-entry-decoupling-plan.md
@@ -0,0 +1,217 @@
+# Ordering Entry Decoupling Plan
+
+## Objective
+
+Decouple `/order/new` from the historical "from Placement" assumption.
+
+Target direction:
+
+- Placement entry surfaces resolve and hand off Ordering entry context.
+- Ordering Page consumes a generic Ordering handoff, not Placement-specific
+  storage or naming.
+- PR Page mounts Button Placement and provides PR matching context, but does not
+  know Ordering handoff storage, entry resolution, existing-order redirect, or
+  `/order/new` navigation details.
+
+## Current Facts
+
+- Route `/order/new` currently lazy-loads `OrderingFromPlacementPage.vue`.
+- `OrderingFromPlacementPage.vue` does not call Placement APIs; it reads
+  `OrderingEntryPayload` from `sessionStorage` key
+  `partner-up.ordering-entry`.
+- `OrderingSupportPage.vue` duplicates the same raw `sessionStorage` parsing
+  logic.
+- `PRPage.vue` currently owns the full click flow after Button Placement emits
+  a placement:
+  - check PR-linked non-terminal orders through `GET /api/pr/:id/orders`
+  - call `POST /api/placements/:instanceId/ordering-entry`
+  - write `OrderingEntryPayload` to `sessionStorage`
+  - navigate to `/order/new`
+- `ButtonPlacement.vue` currently only loads matching placements and emits
+  `placement-click`.
+- Backend `resolvePlacementOrderingEntry` is already a Placement boundary
+  operation. It reads Placement `offerId`, resolves placement binding rules,
+  enriches PR-derived route/time/participants/contact facts, calls Offer for
+  `OrderingOfferDetail`, and returns `OrderingEntryPayload`.
+- The repo has Pinia and `pinia-plugin-persistedstate`, but Ordering handoff is
+  still a bare `sessionStorage` seam.
+
+## Existing Topology
+
+```mermaid
+flowchart LR
+  PRPage["PRPage"]
+  Button["ButtonPlacement"]
+  PROrders["GET /api/pr/:id/orders"]
+  PlacementEntry["POST /api/placements/:instanceId/ordering-entry"]
+  Session["sessionStorage partner-up.ordering-entry"]
+  OrderingPage["OrderingFromPlacementPage"]
+
+  PRPage --> Button
+  Button --> PRPage
+  PRPage --> PROrders
+  PRPage --> PlacementEntry
+  PRPage --> Session
+  PRPage --> OrderingPage
+  OrderingPage --> Session
+```
+
+Problems:
+
+- PR Page imports Commerce client, Placement ordering-entry resolver, and
+  Ordering entry storage key.
+- The page file name `OrderingFromPlacementPage` encodes one entry source even
+  though the runtime route is already the generic `/order/new`.
+- Raw storage parsing is duplicated by Ordering Page and Ordering Support Page.
+- The handoff model exists as `OrderingEntryPayload`, but it is not owned by a
+  Pinia store or a single access API.
+
+## Target Topology
+
+```mermaid
+flowchart LR
+  PRPage["PRPage"]
+  Button["ButtonPlacement"]
+  EntryFlow["usePlacementOrderingEntry / ButtonPlacement-owned flow"]
+  Handoff["useOrderingHandoffStore"]
+  PlacementEntry["POST /api/placements/:instanceId/ordering-entry"]
+  PROrders["GET /api/pr/:id/orders"]
+  OrderingPage["OrderingPage"]
+
+  PRPage --> Button
+  Button --> EntryFlow
+  EntryFlow --> PROrders
+  EntryFlow --> PlacementEntry
+  EntryFlow --> Handoff
+  EntryFlow --> OrderingPage
+  OrderingPage --> Handoff
+```
+
+Target properties:
+
+- PR Page passes `matchingContext` and `prId` into Button Placement.
+- Button Placement or a composable called only by Button Placement owns the
+  Placement-to-Ordering entry flow.
+- Ordering Page is named and typed as generic Ordering, not
+  Placement-specific Ordering.
+- Ordering handoff storage is a Commerce/Ordering-owned Pinia store with a
+  single normalization boundary.
+- The route path `/order/new` and route name `order-new` remain stable.
+- Backend `POST /api/placements/:instanceId/ordering-entry` can remain the
+  source of truth for Placement binding resolution; this slice does not need to
+  move that logic unless implementation evidence shows a cleaner server-side
+  discriminated response is necessary.
+
+## Boundary Notes
+
+- "Placement resolves Ordering context" is already true on the backend. The
+  frontend smell is that PR Page is still orchestrating the flow and storage.
+- Moving the existing-order redirect out of PR Page still crosses PR and Order
+  facts. Human decision: this belongs in Button Placement /
+  `usePlacement...` entry-flow code, not in PR Page. PR Page may pass `prId` so
+  the entry flow can query existing PR-linked orders by `prId + offerId`.
+- A larger alternative is to let the backend ordering-entry endpoint return a
+  discriminated union such as `EXISTING_ORDER | ORDERING_ENTRY`. That would
+  remove one frontend API call, but it also expands the backend Placement use
+  case into order lookup. Current evidence does not require that larger move.
+
+## Likely Production Changes
+
+- Rename `apps/frontend/src/pages/OrderingFromPlacementPage.vue` to
+  `apps/frontend/src/pages/OrderingPage.vue`.
+- Update `apps/frontend/src/app/router.ts` lazy import only; keep `/order/new`
+  and `order-new`.
+- Add a Pinia handoff store under Commerce, likely
+  `apps/frontend/src/domains/commerce/use-cases/useOrderingHandoffStore.ts`.
+- Replace raw `sessionStorage` readers in Ordering Page and Ordering Support
+  Page with the store.
+- Move Button Placement click orchestration out of `PRPage.vue` into
+  `ButtonPlacement.vue` or a commerce use-case composable used only there.
+- Change `ButtonPlacement.vue` props to accept `matchingContext` and `prId`;
+  the component/composable uses `prId` only for existing-order redirect lookup.
+- Keep `OrderingEntryPayload` as the handoff payload type, but move validation
+  / normalization into the store or adjacent model helper.
+- Update `docs/20-product-tdd/ecommerce-contracts.md` so it no longer says
+  PR Page resolves and stores the Ordering entry.
+
+## Candidate Impact Handshake
+
+Address and Object:
+
+- Frontend route entrypoint: `OrderingFromPlacementPage.vue` -> `OrderingPage.vue`
+- Frontend router import for `/order/new`
+- Commerce Ordering handoff model/store
+- `PRPage.vue` Button Placement integration
+- `ButtonPlacement.vue` click behavior
+- Ordering Support storage read path
+- `docs/20-product-tdd/ecommerce-contracts.md` Ordering command contract
+
+State Diff:
+
+- From: PR Page orchestrates Placement click into Ordering entry storage and
+  navigation; Ordering page name assumes Placement origin; raw session storage
+  parsing is duplicated.
+- To: Button Placement entry flow prepares Ordering handoff through Pinia and
+  opens generic Ordering Page; PR Page only supplies matching context and
+  PR identity, then mounts the placement.
+
+Blast Radius Forecast:
+
+- PR Detail utility action rendering and click behavior.
+- Rental and RideHailing Ordering route entry.
+- Ordering Support handoff summary page.
+- Scenario tests that click `pr-detail.commerce-placement.open` and assert
+  `/order/new`.
+- Frontend type/lint around route lazy imports and store persistence.
+
+Invariants Check:
+
+- Keep `/order/new` route path and `order-new` route name.
+- Keep `pr-detail.commerce-placement.open` test id.
+- Keep PR Page free from direct Ordering handoff storage, Placement
+  ordering-entry resolution, and `/order/new` navigation.
+- Keep `OrderingContentInput` contract unchanged unless implementation proves a
+  store-level shape improvement is necessary.
+- Keep backend `OrderingEntryPayload` semantics and quote/listing model intact.
+- Do not touch unrelated PR time-window worktree changes.
+
+Verification:
+
+- `pnpm check:type:frontend`
+- `pnpm exec biome check` on changed frontend/docs files
+- `pnpm exec vitest run --project system-scenario tests/scenario/commerce/rental-ordering.scenario.test.ts`
+- `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+
+## Resolved Review Questions
+
+- Existing-order redirect stays in the frontend Button Placement /
+  `usePlacement...` entry flow for this slice. PR Page may pass `prId`, but PR
+  Page should not perform the lookup or decide the Ordering navigation.
+
+## Open Review Questions
+
+- Should the Ordering handoff store also own `ORDERING_SUPPORT_HANDOFF` now, or
+  should this slice only migrate `OrderingEntryPayload` and leave support
+  summary for a follow-up?
+- Should `ButtonPlacement.vue` become a smart entry component, or should the
+  smart behavior live in a composable so the visual component stays small?
+
+## Implementation Notes
+
+- Implemented the smart behavior as a dedicated composable:
+  `usePlacementOrderingEntryFlow`.
+- `ButtonPlacement.vue` remains the visual entry component, but owns the click
+  call into the composable instead of emitting a `placement-click` event to
+  PR Page.
+- `PRPage.vue` now only passes `matchingContext` and `prId`.
+- `OrderingEntryPayload` is read/written through `useOrderingHandoffStore`, a
+  Commerce/Ordering Pinia store that still persists to session storage for
+  route survival.
+- `OrderingSupportPage.vue` now reads the ordering entry handoff from the same
+  store. `ORDERING_SUPPORT_HANDOFF` remains a separate support-summary storage
+  seam for now.
+- `/order/new` now lazy-loads `OrderingPage.vue`; the path and route name remain
+  unchanged.
+- Durable docs were refined so Placement matching does not receive `prId` as a
+  separate parameter, while PR-derived facts can still exist inside
+  `matchingContext`.

From 8e09b4a4def0d6f56901f6bb2c97fb6d4263cd90 Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Tue, 23 Jun 2026 11:28:40 +0800
Subject: [PATCH 36/94] docs(commerce): promote ordering model contracts

- add PRD workflow and rules for quote-bound commerce ordering

- align Product TDD authority for RideHailing choice-set resolution

- update ride-hailing task packet with durable-docs promotion
---
 docs/10-prd/behavior/rules-and-invariants.md  | 14 +++++++++
 docs/10-prd/behavior/workflows.md             | 13 ++++++++
 docs/10-prd/glossary.md                       |  5 ++++
 docs/20-product-tdd/ecommerce-contracts.md    | 23 ++++++++++----
 .../system-state-and-authority.md             |  7 +++--
 tasks/ride-hailing-ui-fixes/change-log.md     | 24 +++++++++++++++
 tasks/ride-hailing-ui-fixes/control.md        | 16 ++++++++--
 tasks/ride-hailing-ui-fixes/discussion-log.md | 30 +++++++++++++++++++
 8 files changed, 121 insertions(+), 11 deletions(-)

diff --git a/docs/10-prd/behavior/rules-and-invariants.md b/docs/10-prd/behavior/rules-and-invariants.md
index 0438230ba..ac486d6a5 100644
--- a/docs/10-prd/behavior/rules-and-invariants.md
+++ b/docs/10-prd/behavior/rules-and-invariants.md
@@ -125,6 +125,20 @@
 5. The participant may exit, be released, or complete check-in.
 6. Once no longer active, the participant must not be treated as a current participant.
 
+## 3.1 Commerce Ordering Rules
+
+- PR-attached ordering is entered through a backend-authored Button Placement on PR detail and assembled on `/order/new`.
+- At most one non-terminal order should exist for one PR and Offer pair. Re-opening the matching placement should continue the existing order instead of creating a second one.
+- Offer Listing is the user-visible quote surface. A listing may include only products and SKUs that are currently offerable for the selected context.
+- Quote identity is the freshness and authorization boundary between listing and create-order. Create-order should use quote identity instead of trusting browser-copied product, route, participant, or price fields.
+- Expired quotes require a fresh listing and a second explicit user create action. The system should preserve matching user selections after refresh when those selections are still listed.
+- Rental ordering buys one fixed quoted SKU.
+- RideHailing ordering authorizes a choice set: the user selects one or more acceptable vehicle candidates, and the provider/order lifecycle resolves one final vehicle after dispatch.
+- RideHailing visible vehicle candidates depend on route and departure time. Provider-unavailable candidates should be absent from the list, not shown as disabled options with reasons.
+- RideHailing displayed price before create is the selected candidate range, not the final bill cap.
+- RideHailing final bill follows the resolved provider settlement. A provider upgrade or substitution outside the selected candidate set is recorded rather than rejected, and the final settlement remains the bill basis.
+- If RideHailing provider dispatch fails during create-order, the domain may create and cancel an order, but the user experience remains an ordering failure dialog on `/order/new` rather than navigation to Order Detail.
+
 ## 4. Identity And Authentication Rules
 
 - Browsing does not require upfront login.
diff --git a/docs/10-prd/behavior/workflows.md b/docs/10-prd/behavior/workflows.md
index 25f0b66f9..4361d9d44 100644
--- a/docs/10-prd/behavior/workflows.md
+++ b/docs/10-prd/behavior/workflows.md
@@ -76,6 +76,19 @@
 6. Publishing changes the POI status to `PUBLISHED`; rejected applications remain hidden from public location reads and may carry a rejection reason.
 7. Published POIs are available to the global POI library, but Form Mode still shows only locations referenced by the current Anchor Event location pool.
 
+## 4.2 Order A PR-Attached Commerce Offer
+
+1. A current active participant views a PR detail page that has a matching commerce Button Placement.
+2. The user opens the placement. If a non-terminal order already exists for the same PR and offer, the system opens that Order Detail instead of starting a new order.
+3. If no such order exists, the placement resolves an Ordering entry, carries PR-derived context and bindings into the generic Ordering handoff, and opens `/order/new`.
+4. `/order/new` renders product-specific Ordering Content from the Offer-backed ordering projection. The Ordering page remains the pre-order assembly surface; Order Detail remains the long-lived post-create surface.
+5. Ordering Content requests a priced Offer Listing. Listed items include quote identity, display price, and product-specific listing facts.
+6. For Rental, the user confirms one fixed quoted SKU and submits the order.
+7. For RideHailing, the user chooses one or more acceptable vehicle candidates. The displayed price is the selected candidate range. Unavailable provider vehicle types are omitted from the list rather than shown as disabled choices.
+8. If a PR-derived departure time is carried into RideHailing Ordering, the default is still depart now. The imported time is shown with its concrete value and remains available as a one-tap option in the departure-time drawer.
+9. Create order submits quote identity, not copied route, participant, SKU, or price facts. If the quote expired, the page refreshes listing, preserves matching selected vehicles when possible, and requires the user to click order again.
+10. If create succeeds, the user enters Order Detail. If provider dispatch creates then immediately cancels a RideHailing order, the user stays on `/order/new` and sees a failure dialog with the reason.
+
 ## 5. Revisit and History Entry
 
 1. When the user returns, the system restores existing session continuity when possible.
diff --git a/docs/10-prd/glossary.md b/docs/10-prd/glossary.md
index 298b9217f..d247f06cf 100644
--- a/docs/10-prd/glossary.md
+++ b/docs/10-prd/glossary.md
@@ -11,3 +11,8 @@ Business vocabulary stays here. The file is written in English, but the product-
 | 地点兴趣点 | `POI` | The semantic carrier for event locations, related gallery or venue context, per-time-window capacity, location-owned availability windows, and user-submitted location application lifecycle. |
 | 锚点活动 | `Anchor Event` | An operator-maintained event context for discovery, assisted PR creation, event-owned defaults, time-pool behavior, and event-specific support surfaces. It is not the same object as `PR.type`. |
 | 搭子请求类型 | `PR.type` | A PR-owned classification string. It may resolve a PR into an Anchor Event context, but it remains a PR field rather than the Anchor Event's user-facing label. |
+| 商品投放 | `Placement` | A backend-authored commerce entry surface rendered in a collaboration context, such as a PR detail utility action. It owns matching and creative, not price or order lifecycle. |
+| 商品报价列表 | `Offer Listing` | The priced, context-specific list of offerable products or candidates shown during ordering. |
+| 报价 | `Quote` | A server-issued freshness and authorization token for a listed commerce item. Create-order uses quote identity instead of trusting browser-copied product or price facts. |
+| 候选集合 | `Choice Set` | A commerce order item shape where the user authorizes multiple acceptable candidates and fulfillment resolves one final product or provider vehicle. |
+| 网约车 | `RideHailing` | The commerce product type for route-based ride ordering, where available vehicles and prices depend on route and departure time. |
diff --git a/docs/20-product-tdd/ecommerce-contracts.md b/docs/20-product-tdd/ecommerce-contracts.md
index 63bbed89f..9abf66c2c 100644
--- a/docs/20-product-tdd/ecommerce-contracts.md
+++ b/docs/20-product-tdd/ecommerce-contracts.md
@@ -160,7 +160,7 @@ Current constraints:
 The preferred baseline user-visible route spine is:
 
 1. `PR Page`
-2. `Offer Detail`
+2. `/order/new`
 3. `Order Detail`
 
 Why this topology is durable:
@@ -168,6 +168,8 @@ Why this topology is durable:
 - `PR Page` is the contextual entry surface where Button Placement is rendered.
 - `/order/new` is the pre-order explanation and ordering-assembly surface.
 - `Order Detail` is the long-lived post-create lifecycle surface.
+- `/offers/:offerId` may remain a user-facing offer route family, but
+  PR-attached ordering does not require routing through Offer Detail.
 
 This means:
 
@@ -266,7 +268,8 @@ Pricing ownership:
 - `offerDetail` is an Offer-owned ordering projection containing the product
   type, SPU/SKU ids, display facts, base SKU pricing models, cancellation
   policy summaries, and Offer pricing policy needed to render the initial
-  ordering surface. It is not the dynamic quote authority.
+  ordering surface. It is not a user-facing Offer Detail page and is not the
+  dynamic quote authority.
 - Ordering Content is selected from `offerDetail.productType`.
 - Bindings only prefill and lock client fields; they are not submitted as
   authoritative server input.
@@ -283,6 +286,9 @@ Pricing ownership:
 - For RideHailing, listing uses route/departureAt to query provider vehicle
   availability/estimates, joins provider results to local ACTIVE SKUs, and does
   not return unavailable SKUs.
+- RideHailing `departureAt` bindings are not silently applied. Ordering starts
+  from depart-now by default, shows the imported concrete time value, and keeps
+  one-tap actions for using the imported time or switching back to depart-now.
 - For Rental, listing issues fixed quotes for the available rental SKUs matching
   the current listing facts.
 - Ordering Page owns create-order orchestration. Ordering Content must not call
@@ -296,8 +302,10 @@ Pricing ownership:
   product membership, or quote-set coherence.
 - Expired quotes are rejected from create-order with HTTP 409 problem details
   code `ORDERING_QUOTE_EXPIRED`; the frontend refreshes listing and asks the
-  user to click create again. Quote-expired failures are not mixed into HTTP 200
-  results.
+  user to click create again. When the refreshed listing still contains
+  matching RideHailing SKUs, the frontend preserves those selected candidate
+  ids; vanished selected SKUs are pruned. Quote-expired failures are not mixed
+  into HTTP 200 results.
 - Ordering creation uses `POST /api/commerce/orders`. Successful transport
   responses are a discriminated result:
   - `CREATED` navigates to Order Detail
@@ -316,7 +324,7 @@ Pricing ownership:
 The baseline Rental user-visible chain is:
 
 1. PR Page placement entry
-2. Offer Detail ordering and Offer Listing quote issuance
+2. `/order/new` ordering assembly and Offer Listing quote issuance
 3. Order creation from fixed quote id
 4. Order Detail `待支付`
 5. same Order Detail `待确认预订`
@@ -335,7 +343,7 @@ route.
 The baseline RideHailing user-visible chain is:
 
 1. PR Page placement entry
-2. Offer Detail ordering and route/time-based Offer Listing quote issuance
+2. `/order/new` ordering assembly and route/time-based Offer Listing quote issuance
 3. Order creation from selected candidate quote ids
 4. Order Detail with quote basis and fulfillment state
 5. same Order Detail with final bill after trip finish
@@ -361,6 +369,9 @@ RideHailing:
 - Order is created from candidate quote snapshots. For RideHailing, the user
   orders one unresolved choice-set item: several acceptable vehicle SKU
   candidates, with one final resolution.
+- create-order dispatches the cheapest quoted candidate first. Provider create
+  failure cancels the local order without retrying the next candidate/provider
+  and returns the `CANCELLED` create-order result to the Ordering Page.
 - provider binding is stored on the choice-set resolution, not on
   `ride_hailing_orders`
 - execution phase and ride execution snapshots are stored on
diff --git a/docs/20-product-tdd/system-state-and-authority.md b/docs/20-product-tdd/system-state-and-authority.md
index 84f48803c..0284b11f7 100644
--- a/docs/20-product-tdd/system-state-and-authority.md
+++ b/docs/20-product-tdd/system-state-and-authority.md
@@ -16,11 +16,14 @@ Persisted in Postgres via backend entities and repositories:
 - ecommerce merchandising truth, including Product Catalog (`SPU` / `SKU`),
   Offer, Placement Instance, Offer pricing rules, SKU pricing models, SKU
   facts, and SKU base cancellation policy
+- ecommerce listing / quote truth, including persisted Offer Listing quote
+  snapshots and quote validity state
 - ecommerce trade truth, including Order, order snapshots, PR-attached order
   relation, and order termination attempts
 - ecommerce family execution truth, including Rental execution fields on
-  `rental_orders` and RideHailing provider binding / execution fields on
-  `ride_hailing_orders`
+  `rental_orders` and RideHailing execution fields on `ride_hailing_orders`;
+  RideHailing provider binding lives in Trade order choice-set resolution
+  snapshots
 - ecommerce bill truth, including Bill, BillLine, BillLine payment execution
   slot identity, BillLine settlement confirmation, and settlement derivation
 - ecommerce payment provider registry truth, including configured provider
diff --git a/tasks/ride-hailing-ui-fixes/change-log.md b/tasks/ride-hailing-ui-fixes/change-log.md
index 18ddb799a..5ed398b91 100644
--- a/tasks/ride-hailing-ui-fixes/change-log.md
+++ b/tasks/ride-hailing-ui-fixes/change-log.md
@@ -467,3 +467,27 @@
   - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/rental-ordering.scenario.test.ts`
   - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
   - `git diff --check`
+
+## Slice: Durable Docs Promotion
+
+- PRD:
+  - added PR-attached commerce ordering workflow to
+    `docs/10-prd/behavior/workflows.md`
+  - added commerce ordering invariants to
+    `docs/10-prd/behavior/rules-and-invariants.md`
+  - added stable commerce terms to `docs/10-prd/glossary.md`
+- Product TDD:
+  - corrected `docs/20-product-tdd/system-state-and-authority.md` so
+    RideHailing provider binding is owned by Trade order choice-set resolution,
+    not `ride_hailing_orders`
+  - refined `docs/20-product-tdd/ecommerce-contracts.md` for `/order/new`
+    ordering topology, `offerDetail` projection semantics, departure-time
+    binding UX, quote-expired selection preservation, and RideHailing
+    cancelled-create behavior
+- Verification:
+  - `pnpm check:format` (markdown files are ignored by Biome changed-file
+    formatting; command completed successfully with no processed files)
+  - `git diff --check`
+  - `rg` stale-contract search for old Offer Detail ordering, old
+    `OrderingFromPlacementPage`, old provider-binding wording, old
+    evaluate/options endpoints, and `selectable=false`
diff --git a/tasks/ride-hailing-ui-fixes/control.md b/tasks/ride-hailing-ui-fixes/control.md
index 0036e0187..5e2270ddc 100644
--- a/tasks/ride-hailing-ui-fixes/control.md
+++ b/tasks/ride-hailing-ui-fixes/control.md
@@ -19,11 +19,11 @@ Hypothesis:
 ## Classification
 
 - Primary route: `Constraint`
-- Active mode: `Explore` for Ordering entry decoupling
+- Active mode: `Solidify` for durable docs promotion
 - Current collaboration state: choice-set backend/domain foundation, Ordering
   UI primitive/control, SKU Card layout remediation, and Offer Listing / quote
-  identity segments committed; current slice is Ordering entry decoupling
-  exploration with no production-code mutation yet
+  identity segments committed; Ordering entry decoupling committed; current
+  slice promotes stable task-packet facts into durable PRD / Product TDD docs
 
 ## Inherited Effective Truth
 
@@ -218,6 +218,16 @@ Choose the narrowest sufficient proof per approved slice:
     - `git diff --check`
   - planning artifact:
     `tasks/ride-hailing-ui-fixes/ordering-entry-decoupling-plan.md`
+- Current docs-promotion slice:
+  - promoted stable product behavior into `docs/10-prd/behavior/workflows.md`
+    and `docs/10-prd/behavior/rules-and-invariants.md`
+  - added stable commerce vocabulary to `docs/10-prd/glossary.md`
+  - corrected `docs/20-product-tdd/system-state-and-authority.md` so
+    RideHailing provider binding lives in Trade order choice-set resolution,
+    not on `ride_hailing_orders`
+  - refined `docs/20-product-tdd/ecommerce-contracts.md` for `/order/new`
+    topology, departure-time binding UX, quote-expired selection preservation,
+    and RideHailing cancelled-create behavior
 - Map diagnostic:
   - the gray RideHailing Ordering map observation was confirmed as a browser
     client issue; shared map code is not part of the active fix.
diff --git a/tasks/ride-hailing-ui-fixes/discussion-log.md b/tasks/ride-hailing-ui-fixes/discussion-log.md
index e9a30c0e5..0dec84652 100644
--- a/tasks/ride-hailing-ui-fixes/discussion-log.md
+++ b/tasks/ride-hailing-ui-fixes/discussion-log.md
@@ -940,3 +940,33 @@
   docs now phrase `prId` as not being a separate Placement matching parameter;
   PR-derived facts may still be present inside `matchingContext`, and PR Page may
   pass explicit `prId` to Button Placement for existing-order lookup.
+
+## Solidify: Durable Docs Promotion
+
+- Human request:
+  review all completed slices and update durable docs where task-packet truths
+  have become stable product or cross-unit technical truth.
+- Promotion decision:
+  do not promote component-level UI implementation details such as `PuCard`,
+  `PuFloatPanel`, or `PuSkeleton` into durable docs. Those remain source-level
+  implementation facts unless they become cross-unit contracts.
+- Promotion decision:
+  promote stable user-visible commerce behavior into PRD:
+  - PR-attached ordering enters through Button Placement and assembles on
+    `/order/new`
+  - Offer Listing is the user-visible quote surface
+  - expired quotes refresh listing, preserve matching selection when possible,
+    and require another explicit create click
+  - RideHailing users authorize a selected candidate set, see a candidate price
+    range, and unavailable provider vehicles are omitted
+  - RideHailing provider-create failure keeps the user on `/order/new` with a
+    failure dialog
+- Product TDD correction:
+  `system-state-and-authority.md` had stale wording that put RideHailing
+  provider binding on `ride_hailing_orders`. It now separates RideHailing
+  execution fields on `ride_hailing_orders` from provider binding in the Trade
+  order choice-set resolution snapshot.
+- Ecommerce contract refinement:
+  `/order/new` is now named as the PR-attached ordering assembly route in the
+  journey chain. `offerDetail` is clarified as an ordering projection, not a
+  user-facing Offer Detail page or dynamic quote authority.

From 566539edf89e5ba1e911f4cc32728deba48890be Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Tue, 23 Jun 2026 12:54:45 +0800
Subject: [PATCH 37/94] feat(ride-hailing): add fake order phase controls

- make fake Caocao detail reads read-only for order phase

- add explicit fake order phase control routes and Admin dev action

- cover polling stability in RideHailing ordering scenario
---
 .../src/pages/AdminRideHailingPage.vue        | 176 ++++++++++++++----
 packages/fake-caocao-server/src/routes.ts     | 107 ++++++++++-
 .../fake-caocao-server/src/server.test.ts     |  49 ++++-
 packages/fake-caocao-server/src/state.test.ts |  31 ++-
 packages/fake-caocao-server/src/state.ts      |  43 +++--
 tasks/ride-hailing-ui-fixes/change-log.md     |  44 +++++
 tasks/ride-hailing-ui-fixes/control.md        |  24 ++-
 tasks/ride-hailing-ui-fixes/discussion-log.md |  62 ++++++
 .../order-detail-mock-control-plan.md         | 133 +++++++++++++
 .../ride-hailing-ordering.scenario.test.ts    |  25 ++-
 10 files changed, 620 insertions(+), 74 deletions(-)
 create mode 100644 tasks/ride-hailing-ui-fixes/order-detail-mock-control-plan.md

diff --git a/apps/frontend/src/pages/AdminRideHailingPage.vue b/apps/frontend/src/pages/AdminRideHailingPage.vue
index 30768ba49..184dc9344 100644
--- a/apps/frontend/src/pages/AdminRideHailingPage.vue
+++ b/apps/frontend/src/pages/AdminRideHailingPage.vue
@@ -165,6 +165,37 @@
             </form>
           </BentoItem>
 
+          <BentoItem v-if="showFakeCaocaoDevTools" title="开发调试" span="full">
+            <div class="dev-tool-card">
+              <p class="hint">
+                直接调用当前 Provider Instance Endpoint 上的 fake Caocao 控制接口。
+              </p>
+              <PuButton
+                size="sm"
+                tone="neutral"
+                variant="outline"
+                :loading="isAdvancingFakePhase"
+                :disabled="isAdvancingFakePhase"
+                data-testid="admin-ride-hailing.dev.advance-phase"
+                @click="advanceFakeCaocaoPhase"
+              >
+                推进最新订单状态
+              </PuButton>
+              <PuInlineNotice
+                v-if="fakeAdvanceResultMessage"
+                tone="success"
+                :message="fakeAdvanceResultMessage"
+                data-testid="admin-ride-hailing.dev.advance-phase.result"
+              />
+              <PuInlineNotice
+                v-if="fakeAdvanceErrorMessage"
+                tone="error"
+                :message="fakeAdvanceErrorMessage"
+                data-testid="admin-ride-hailing.dev.advance-phase.error"
+              />
+            </div>
+          </BentoItem>
+
           <BentoItem title="实例输出" span="full">
             <dl class="summary-grid">
               <div>
@@ -206,36 +237,35 @@
 </template>
 
 <script setup lang="ts">
+import {
+  PuButton,
+  PuCard,
+  PuFormItem,
+  PuInlineNotice,
+  PuLoadingState,
+  PuSelect,
+  type PuSelectOption,
+  type PuSelectValue,
+  PuTag,
+} from "@partner-up-dev/design-web";
 import { computed, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import AdminPageScaffold from "@/domains/admin/ui/layout/AdminPageScaffold.vue";
 import AdminRailPanel from "@/domains/admin/ui/layout/AdminRailPanel.vue";
-import AdminNavigationPanel from "@/domains/admin/ui/navigation/AdminNavigationPanel.vue";
 import BentoItem from "@/domains/admin/ui/layout/BentoItem.vue";
+import AdminNavigationPanel from "@/domains/admin/ui/navigation/AdminNavigationPanel.vue";
 import { useAdminAccess } from "@/domains/admin/use-cases/useAdminAccess";
 import {
+  type AdminRideHailingProviderInstanceInput,
+  type AdminRideHailingProviderWorkspaceResponse,
   useAdminRideHailingProviderWorkspace,
   useCreateAdminRideHailingProviderInstance,
   useUpdateAdminRideHailingProviderInstance,
-  type AdminRideHailingProviderInstanceInput,
-  type AdminRideHailingProviderWorkspaceResponse,
 } from "@/domains/admin-ride-hailing/queries/useAdminRideHailing";
-import {
-  PuButton,
-  PuCard,
-  PuFormItem,
-  PuInlineNotice,
-  PuLoadingState,
-  PuSelect,
-  PuTag,
-  type PuSelectOption,
-  type PuSelectValue,
-} from "@partner-up-dev/design-web";
 
 const CREATE_PROVIDER_ID = "__create__";
 
-type ProviderInstance =
-  AdminRideHailingProviderWorkspaceResponse["providerInstances"][number];
+type ProviderInstance = AdminRideHailingProviderWorkspaceResponse["providerInstances"][number];
 
 type ProviderForm = {
   providerType: "CAOCAO";
@@ -258,27 +288,21 @@ const updateMutation = useUpdateAdminRideHailingProviderInstance();
 const selectedProviderIdRaw = ref("");
 const form = ref<ProviderForm>(createBlankForm());
 const localErrorMessage = ref<string | null>(null);
+const isAdvancingFakePhase = ref(false);
+const fakeAdvanceResultMessage = ref<string | null>(null);
+const fakeAdvanceErrorMessage = ref<string | null>(null);
 
-const providerInstances = computed(
-  () => workspaceQuery.data.value?.providerInstances ?? [],
-);
+const providerInstances = computed(() => workspaceQuery.data.value?.providerInstances ?? []);
 const selectedProviderId = computed(
-  () =>
-    selectedProviderIdRaw.value ||
-    providerInstances.value[0]?.id ||
-    CREATE_PROVIDER_ID,
+  () => selectedProviderIdRaw.value || providerInstances.value[0]?.id || CREATE_PROVIDER_ID,
 );
 const selectedProvider = computed(
-  () =>
-    providerInstances.value.find(
-      (record) => record.id === selectedProviderId.value,
-    ) ?? null,
-);
-const isCreateMode = computed(
-  () => selectedProviderId.value === CREATE_PROVIDER_ID,
+  () => providerInstances.value.find((record) => record.id === selectedProviderId.value) ?? null,
 );
-const isSaving = computed(
-  () => createMutation.isPending.value || updateMutation.isPending.value,
+const isCreateMode = computed(() => selectedProviderId.value === CREATE_PROVIDER_ID);
+const isSaving = computed(() => createMutation.isPending.value || updateMutation.isPending.value);
+const showFakeCaocaoDevTools = computed(
+  () => import.meta.env.DEV && selectedProvider.value !== null && !isCreateMode.value,
 );
 const formTitle = computed(() =>
   isCreateMode.value ? "新建 Provider Instance" : "编辑 Provider Instance",
@@ -290,9 +314,7 @@ const providerStatusOptions = computed<PuSelectOption[]>(() => [
   { label: "ACTIVE", value: "ACTIVE" },
   { label: "DISABLED", value: "DISABLED" },
 ]);
-const signKeyPlaceholder = computed(() =>
-  isCreateMode.value ? "新建实例必填" : "留空则保留",
-);
+const signKeyPlaceholder = computed(() => (isCreateMode.value ? "新建实例必填" : "留空则保留"));
 const signKeyStateLabel = computed(() => {
   if (isCreateMode.value) return "-";
   return selectedProvider.value?.config.signKeyConfigured ? "已配置" : "未配置";
@@ -330,8 +352,7 @@ function formFromProvider(provider: ProviderInstance): ProviderForm {
     endpointBaseUrl: provider.config.endpointBaseUrl,
     callbackBaseUrl: provider.config.callbackBaseUrl ?? "",
     requestTimeoutMs:
-      provider.config.requestTimeoutMs === null ||
-      provider.config.requestTimeoutMs === undefined
+      provider.config.requestTimeoutMs === null || provider.config.requestTimeoutMs === undefined
         ? ""
         : String(provider.config.requestTimeoutMs),
   };
@@ -398,6 +419,46 @@ const buildInput = (): AdminRideHailingProviderInstanceInput => {
   };
 };
 
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  typeof value === "object" && value !== null && !Array.isArray(value);
+
+const readStringField = (value: unknown, key: string): string | null =>
+  isRecord(value) && typeof value[key] === "string" ? value[key] : null;
+
+const buildFakeControlUrl = (provider: ProviderInstance, path: string): string => {
+  const baseUrl = provider.config.endpointBaseUrl.trim();
+  return new URL(path, baseUrl.endsWith("/") ? baseUrl : `${baseUrl}/`).toString();
+};
+
+const readFakeCaocaoErrorMessage = (payload: unknown): string | null =>
+  readStringField(payload, "message") || readStringField(payload, "detail");
+
+const readFakeCaocaoAdvanceResult = (
+  payload: unknown,
+): {
+  providerOrderId: string;
+  phase: string;
+} => {
+  if (!isRecord(payload) || payload.ok !== true || !isRecord(payload.order)) {
+    throw new Error("Fake Caocao advance response is invalid");
+  }
+  const providerOrderId = readStringField(payload.order, "providerOrderId");
+  const phase = readStringField(payload.order, "phase");
+  if (!providerOrderId || !phase) {
+    throw new Error("Fake Caocao advance response is incomplete");
+  }
+  return { providerOrderId, phase };
+};
+
+const phaseLabel = (phase: string): string => {
+  if (phase === "CREATED") return "已创建";
+  if (phase === "ACCEPTED") return "已接单";
+  if (phase === "IN_TRIP") return "行程中";
+  if (phase === "FINISHED") return "已完成";
+  if (phase === "CANCELLED") return "已取消";
+  return phase;
+};
+
 const startCreate = () => {
   selectedProviderIdRaw.value = CREATE_PROVIDER_ID;
 };
@@ -415,8 +476,7 @@ const handleSave = async () => {
     selectedProviderIdRaw.value = saved.id;
     form.value = formFromProvider(saved);
   } catch (error) {
-    localErrorMessage.value =
-      error instanceof Error ? error.message : t("common.operationFailed");
+    localErrorMessage.value = error instanceof Error ? error.message : t("common.operationFailed");
   }
 };
 
@@ -426,6 +486,37 @@ const clearErrors = () => {
   updateMutation.reset();
 };
 
+const clearFakeAdvanceFeedback = () => {
+  fakeAdvanceResultMessage.value = null;
+  fakeAdvanceErrorMessage.value = null;
+};
+
+const advanceFakeCaocaoPhase = async (): Promise<void> => {
+  clearFakeAdvanceFeedback();
+  const provider = selectedProvider.value;
+  if (!provider) return;
+  isAdvancingFakePhase.value = true;
+  try {
+    const response = await fetch(
+      buildFakeControlUrl(provider, "/__fake_caocao/orders/latest/advance"),
+      {
+        method: "POST",
+      },
+    );
+    const payload = (await response.json().catch(() => null)) as unknown;
+    if (!response.ok) {
+      throw new Error(readFakeCaocaoErrorMessage(payload) ?? "推进 fake 曹操订单状态失败");
+    }
+    const result = readFakeCaocaoAdvanceResult(payload);
+    fakeAdvanceResultMessage.value = `已推进 ${result.providerOrderId} 到 ${phaseLabel(result.phase)}`;
+  } catch (error) {
+    fakeAdvanceErrorMessage.value =
+      error instanceof Error ? error.message : "推进 fake 曹操订单状态失败";
+  } finally {
+    isAdvancingFakePhase.value = false;
+  }
+};
+
 const formatTimestamp = (value: Date | string): string =>
   new Date(value).toLocaleString("zh-CN", { hour12: false });
 
@@ -450,6 +541,7 @@ watch(
       ? formFromProvider(selectedProvider.value)
       : createBlankForm();
     clearErrors();
+    clearFakeAdvanceFeedback();
   },
   { immediate: true },
 );
@@ -458,13 +550,15 @@ watch(
 <style lang="scss" scoped>
 .stack,
 .provider-rail-list,
-.form-stack {
+.form-stack,
+.dev-tool-card {
   display: flex;
   flex-direction: column;
 }
 
 .stack,
-.provider-rail-list {
+.provider-rail-list,
+.dev-tool-card {
   gap: var(--sys-spacing-medium);
 }
 
diff --git a/packages/fake-caocao-server/src/routes.ts b/packages/fake-caocao-server/src/routes.ts
index 1fcfdb186..57c72eae1 100644
--- a/packages/fake-caocao-server/src/routes.ts
+++ b/packages/fake-caocao-server/src/routes.ts
@@ -7,6 +7,7 @@ import {
 } from "./signature";
 import type {
   FakeCaocaoDriverSnapshot,
+  FakeCaocaoOrderPhase,
   FakeCaocaoOrderState,
   FakeCaocaoState,
   FakeCaocaoVehicleEstimate,
@@ -180,6 +181,19 @@ const phaseEvent = (phase: FakeCaocaoOrderState["phase"]): number => {
   return 1;
 };
 
+const parseOrderPhase = (phase: string | null): FakeCaocaoOrderPhase | null => {
+  if (
+    phase === "CREATED" ||
+    phase === "ACCEPTED" ||
+    phase === "IN_TRIP" ||
+    phase === "FINISHED" ||
+    phase === "CANCELLED"
+  ) {
+    return phase;
+  }
+  return null;
+};
+
 const orderDetailPayload = (order: FakeCaocaoOrderState): unknown => {
   const driver =
     order.phase === "ACCEPTED" || order.phase === "IN_TRIP" || order.phase === "FINISHED"
@@ -260,18 +274,34 @@ const postCallback = async (input: {
   });
 };
 
+const postOrderPhaseCallback = async (input: {
+  fixture: FakeCaocaoFixture;
+  order: FakeCaocaoOrderState;
+}): Promise<void> => {
+  if (!input.order.callbackUrl) return;
+  await postCallback({
+    callbackUrl: input.order.callbackUrl,
+    event: phaseEvent(input.order.phase),
+    fixture: input.fixture,
+    order: input.order,
+  });
+};
+
 const maybePostCreateCallback = (input: {
   callbackUrl: string | null;
   fixture: FakeCaocaoFixture;
   order: FakeCaocaoOrderState;
+  state: FakeCaocaoState;
 }): void => {
   if (!input.callbackUrl) return;
+  const acceptedOrder = input.state.setOrderPhase(input.order.providerOrderId, "ACCEPTED");
+  if (!acceptedOrder) return;
   setTimeout(() => {
     postCallback({
       callbackUrl: input.callbackUrl!,
       event: 20,
       fixture: input.fixture,
-      order: input.order,
+      order: acceptedOrder,
     }).catch(() => undefined);
   }, 0);
 };
@@ -350,6 +380,70 @@ export async function handleFakeCaocaoRequest(
       return;
     }
 
+    if (url.pathname === "/__fake_caocao/orders/latest/advance" && req.method === "POST") {
+      await readBodyText(req);
+      const order = input.state.advanceLatestNonTerminalOrder();
+      if (!order) {
+        sendJson(res, 404, {
+          code: "FAKE_CAOCAO_ORDER_NOT_FOUND",
+          message: "No non-terminal fake Caocao order found",
+        });
+        return;
+      }
+      await postOrderPhaseCallback({
+        fixture: input.fixture,
+        order,
+      });
+      sendJson(res, 200, { ok: true, order });
+      return;
+    }
+
+    const orderAdvanceMatch = url.pathname.match(/^\/__fake_caocao\/orders\/([^/]+)\/advance$/);
+    if (orderAdvanceMatch && req.method === "POST") {
+      await readBodyText(req);
+      const order = input.state.advanceOrderPhase(decodeURIComponent(orderAdvanceMatch[1]!));
+      if (!order) {
+        sendJson(res, 404, {
+          code: "FAKE_CAOCAO_ORDER_NOT_FOUND",
+          message: "Fake Caocao order not found",
+        });
+        return;
+      }
+      await postOrderPhaseCallback({
+        fixture: input.fixture,
+        order,
+      });
+      sendJson(res, 200, { ok: true, order });
+      return;
+    }
+
+    const orderPhaseMatch = url.pathname.match(/^\/__fake_caocao\/orders\/([^/]+)\/phase$/);
+    if (orderPhaseMatch && req.method === "POST") {
+      const phaseParams = await readParams(req, url);
+      const phase = parseOrderPhase(readFirstParam(phaseParams, ["phase"]));
+      if (!phase) {
+        sendJson(res, 400, {
+          code: "FAKE_CAOCAO_UNSUPPORTED_ORDER_PHASE",
+          message: "Unsupported fake Caocao order phase",
+        });
+        return;
+      }
+      const order = input.state.setOrderPhase(decodeURIComponent(orderPhaseMatch[1]!), phase);
+      if (!order) {
+        sendJson(res, 404, {
+          code: "FAKE_CAOCAO_ORDER_NOT_FOUND",
+          message: "Fake Caocao order not found",
+        });
+        return;
+      }
+      await postOrderPhaseCallback({
+        fixture: input.fixture,
+        order,
+      });
+      sendJson(res, 200, { ok: true, order });
+      return;
+    }
+
     const params = await readParams(req, url);
     verifySignedParams({
       fixture: input.fixture,
@@ -396,6 +490,7 @@ export async function handleFakeCaocaoRequest(
         callbackUrl,
         fixture: input.fixture,
         order,
+        state: input.state,
       });
       sendJson(
         res,
@@ -411,15 +506,7 @@ export async function handleFakeCaocaoRequest(
 
     if (url.pathname === "/common/queryOrderDetailV2") {
       const providerOrderId = readFirstParam(params, ["order_id", "order_no"]);
-      const order = providerOrderId ? input.state.advanceOrderDetail(providerOrderId) : null;
-      if (order?.callbackUrl) {
-        postCallback({
-          callbackUrl: order.callbackUrl,
-          event: phaseEvent(order.phase),
-          fixture: input.fixture,
-          order,
-        }).catch(() => undefined);
-      }
+      const order = providerOrderId ? input.state.findOrder(providerOrderId) : null;
       sendJson(
         res,
         200,
diff --git a/packages/fake-caocao-server/src/server.test.ts b/packages/fake-caocao-server/src/server.test.ts
index 372316e5e..23d0675f0 100644
--- a/packages/fake-caocao-server/src/server.test.ts
+++ b/packages/fake-caocao-server/src/server.test.ts
@@ -104,7 +104,54 @@ describe("startFakeCaocaoServer", () => {
 
     expect(detailResponse.ok).toBe(true);
     expect(detailBody.success).toBe(true);
-    expect(detailBody.data.phase).toBe("ACCEPTED");
+    expect(detailBody.data.phase).toBe("CREATED");
+
+    const advanceResponse = await fetch(`${server.origin}/__fake_caocao/orders/latest/advance`, {
+      method: "POST",
+    });
+    const advanceBody = (await advanceResponse.json()) as {
+      ok: boolean;
+      order: { phase: string; providerOrderId: string };
+    };
+
+    expect(advanceResponse.ok).toBe(true);
+    expect(advanceBody.ok).toBe(true);
+    expect(advanceBody.order.providerOrderId).toBe(createBody.data.orderNo);
+    expect(advanceBody.order.phase).toBe("ACCEPTED");
+
+    const detailAfterAdvanceResponse = await fetch(
+      `${server.origin}/common/queryOrderDetailV2?${signedSearchParams({
+        clientId: server.fixture.clientId,
+        params: {
+          order_id: createBody.data.orderNo,
+          timestamp: "3-after-advance",
+        },
+        signKey: server.fixture.signKey,
+      }).toString()}`,
+    );
+    const detailAfterAdvanceBody = (await detailAfterAdvanceResponse.json()) as {
+      code: number;
+      data: { phase: string };
+      success: boolean;
+    };
+
+    expect(detailAfterAdvanceResponse.ok).toBe(true);
+    expect(detailAfterAdvanceBody.success).toBe(true);
+    expect(detailAfterAdvanceBody.data.phase).toBe("ACCEPTED");
+
+    const invalidPhaseResponse = await fetch(
+      `${server.origin}/__fake_caocao/orders/${createBody.data.orderNo}/phase?phase=BOARDING`,
+      {
+        method: "POST",
+      },
+    );
+    const invalidPhaseBody = (await invalidPhaseResponse.json()) as {
+      code: string;
+      message: string;
+    };
+
+    expect(invalidPhaseResponse.status).toBe(400);
+    expect(invalidPhaseBody.code).toBe("FAKE_CAOCAO_UNSUPPORTED_ORDER_PHASE");
   });
 
   test("supports admin estimate controls", async () => {
diff --git a/packages/fake-caocao-server/src/state.test.ts b/packages/fake-caocao-server/src/state.test.ts
index cc8d5420d..7456c8cb4 100644
--- a/packages/fake-caocao-server/src/state.test.ts
+++ b/packages/fake-caocao-server/src/state.test.ts
@@ -2,7 +2,7 @@ import { describe, expect, test } from "vitest";
 import { FakeCaocaoState } from "./state";
 
 describe("FakeCaocaoState", () => {
-  test("creates idempotent orders and advances them to finished", () => {
+  test("creates idempotent orders and advances them explicitly to finished", () => {
     const state = new FakeCaocaoState();
 
     const created = state.createOrder({
@@ -18,15 +18,36 @@ describe("FakeCaocaoState", () => {
     expect(created.phase).toBe("CREATED");
     expect(created.finalAmountFen).toBe(5600);
 
-    const accepted = state.advanceOrderDetail(created.providerOrderId);
-    const inTrip = state.advanceOrderDetail(created.providerOrderId);
-    const finished = state.advanceOrderDetail(created.providerOrderId);
+    expect(state.findOrder(created.providerOrderId)?.phase).toBe("CREATED");
+
+    const accepted = state.advanceOrderPhase(created.providerOrderId);
+    const inTrip = state.advanceOrderPhase(created.providerOrderId);
+    const finished = state.advanceOrderPhase(created.providerOrderId);
 
     expect(accepted?.phase).toBe("ACCEPTED");
     expect(inTrip?.phase).toBe("IN_TRIP");
     expect(finished?.phase).toBe("FINISHED");
   });
 
+  test("advances the latest non-terminal order", () => {
+    const state = new FakeCaocaoState();
+
+    const older = state.createOrder({
+      carType: "EXPRESS",
+      externalOrderId: "external-order-older",
+    });
+    const newer = state.createOrder({
+      carType: "PREMIER",
+      externalOrderId: "external-order-newer",
+    });
+
+    const advanced = state.advanceLatestNonTerminalOrder();
+
+    expect(advanced?.providerOrderId).toBe(newer.providerOrderId);
+    expect(advanced?.phase).toBe("ACCEPTED");
+    expect(state.findOrder(older.providerOrderId)?.phase).toBe("CREATED");
+  });
+
   test("updates estimates for later quotes and orders", () => {
     const state = new FakeCaocaoState();
 
@@ -59,7 +80,7 @@ describe("FakeCaocaoState", () => {
       carType: "EXPRESS",
       externalOrderId: "external-order-2",
     });
-    state.advanceOrderDetail(created.providerOrderId);
+    state.advanceOrderPhase(created.providerOrderId);
     const cancelled = state.cancelOrder(created.providerOrderId);
     const feeConfirm = state.confirmFee({
       allowanceAmountFen: 120,
diff --git a/packages/fake-caocao-server/src/state.ts b/packages/fake-caocao-server/src/state.ts
index e3cdc7392..9ae438dcb 100644
--- a/packages/fake-caocao-server/src/state.ts
+++ b/packages/fake-caocao-server/src/state.ts
@@ -68,6 +68,15 @@ const defaultEstimates = (): FakeCaocaoVehicleEstimate[] => [
   },
 ];
 
+const terminalOrderPhases = new Set<FakeCaocaoOrderPhase>(["FINISHED", "CANCELLED"]);
+
+const nextOrderPhase = (phase: FakeCaocaoOrderPhase): FakeCaocaoOrderPhase => {
+  if (phase === "CREATED") return "ACCEPTED";
+  if (phase === "ACCEPTED") return "IN_TRIP";
+  if (phase === "IN_TRIP") return "FINISHED";
+  return phase;
+};
+
 export class FakeCaocaoState {
   private failNextCreate = false;
   private readonly estimates = new Map<string, FakeCaocaoVehicleEstimate>();
@@ -202,30 +211,38 @@ export class FakeCaocaoState {
     return this.orders.get(providerOrderId) ?? null;
   }
 
-  advanceOrderDetail(providerOrderId: string): FakeCaocaoOrderState | null {
+  findLatestNonTerminalOrder(): FakeCaocaoOrderState | null {
+    return (
+      [...this.orders.values()].reverse().find((order) => !terminalOrderPhases.has(order.phase)) ??
+      null
+    );
+  }
+
+  setOrderPhase(providerOrderId: string, phase: FakeCaocaoOrderPhase): FakeCaocaoOrderState | null {
     const order = this.orders.get(providerOrderId);
     if (!order) return null;
 
-    const nextQueryCount = order.queryCount + 1;
-    const nextPhase: FakeCaocaoOrderPhase =
-      order.phase === "CANCELLED"
-        ? "CANCELLED"
-        : nextQueryCount <= 1
-          ? "ACCEPTED"
-          : nextQueryCount === 2
-            ? "IN_TRIP"
-            : "FINISHED";
-
     const updated: FakeCaocaoOrderState = {
       ...order,
-      phase: nextPhase,
-      queryCount: nextQueryCount,
+      phase,
       updatedAt: nowIso(),
     };
     this.orders.set(providerOrderId, updated);
     return updated;
   }
 
+  advanceOrderPhase(providerOrderId: string): FakeCaocaoOrderState | null {
+    const order = this.orders.get(providerOrderId);
+    if (!order) return null;
+    return this.setOrderPhase(providerOrderId, nextOrderPhase(order.phase));
+  }
+
+  advanceLatestNonTerminalOrder(): FakeCaocaoOrderState | null {
+    const order = this.findLatestNonTerminalOrder();
+    if (!order) return null;
+    return this.advanceOrderPhase(order.providerOrderId);
+  }
+
   cancelOrder(providerOrderId: string): FakeCaocaoOrderState | null {
     const order = this.orders.get(providerOrderId);
     if (!order) return null;
diff --git a/tasks/ride-hailing-ui-fixes/change-log.md b/tasks/ride-hailing-ui-fixes/change-log.md
index 5ed398b91..628a86c58 100644
--- a/tasks/ride-hailing-ui-fixes/change-log.md
+++ b/tasks/ride-hailing-ui-fixes/change-log.md
@@ -491,3 +491,47 @@
   - `rg` stale-contract search for old Offer Detail ordering, old
     `OrderingFromPlacementPage`, old provider-binding wording, old
     evaluate/options endpoints, and `selectable=false`
+
+## Slice: RideHailing Order Detail Mock Control Planning
+
+- Added standalone plan:
+  `tasks/ride-hailing-ui-fixes/order-detail-mock-control-plan.md`.
+- Recorded diagnosis:
+  - fake Caocao currently advances order phase on provider detail reads
+  - Order Detail polling every 1500 ms indirectly drives fake lifecycle
+  - backend callbacks from those fake reads move persisted execution phase and
+    create final bill after `FINISHED`
+- Proposed direction:
+  - make fake provider detail reads read-only by default
+  - add explicit fake admin/test-control routes for phase set/advance
+  - post callbacks from explicit fake lifecycle controls
+
+## Slice: RideHailing Order Detail Mock Control Implementation
+
+- Fake Caocao:
+  - made `/common/queryOrderDetailV2` read-only for order phase
+  - replaced read-driven phase advancement with explicit state helpers for
+    setting and advancing order phase
+  - added fake control routes:
+    `POST /__fake_caocao/orders/latest/advance`,
+    `POST /__fake_caocao/orders/:providerOrderId/advance`, and
+    `POST /__fake_caocao/orders/:providerOrderId/phase`
+  - control routes post the corresponding provider callback after moving fake
+    state, so backend order execution state still changes through provider
+    callback handling
+  - preserved create-time accepted callback behavior
+- Frontend Admin:
+  - added a separate dev-only RideHailing Provider Instance debug card
+  - the card directly calls the selected provider instance
+    `config.endpointBaseUrl` fake Caocao control route
+  - no backend admin proxy was introduced
+- Scenario:
+  - strengthened RideHailing order-detail scenario coverage so repeated detail
+    polling does not auto-advance fake provider phase past `ACCEPTED`
+- Verification:
+  - `pnpm --filter @partner-up-dev/fake-caocao-server typecheck`
+  - `pnpm --filter @partner-up-dev/fake-caocao-server test`
+  - `pnpm check:type:frontend`
+  - `pnpm exec biome check packages/fake-caocao-server/src/state.ts packages/fake-caocao-server/src/routes.ts packages/fake-caocao-server/src/state.test.ts packages/fake-caocao-server/src/server.test.ts apps/frontend/src/pages/AdminRideHailingPage.vue tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+  - `git diff --check`
diff --git a/tasks/ride-hailing-ui-fixes/control.md b/tasks/ride-hailing-ui-fixes/control.md
index 5e2270ddc..00bcc24bd 100644
--- a/tasks/ride-hailing-ui-fixes/control.md
+++ b/tasks/ride-hailing-ui-fixes/control.md
@@ -19,11 +19,12 @@ Hypothesis:
 ## Classification
 
 - Primary route: `Constraint`
-- Active mode: `Solidify` for durable docs promotion
+- Active mode: `Diagnose` for RideHailing Order Detail mock control
 - Current collaboration state: choice-set backend/domain foundation, Ordering
   UI primitive/control, SKU Card layout remediation, and Offer Listing / quote
-  identity segments committed; Ordering entry decoupling committed; current
-  slice promotes stable task-packet facts into durable PRD / Product TDD docs
+  identity segments committed; Ordering entry decoupling and durable docs
+  promotion committed; current slice explores fake provider lifecycle control
+  for RideHailing Order Detail review
 
 ## Inherited Effective Truth
 
@@ -228,6 +229,21 @@ Choose the narrowest sufficient proof per approved slice:
   - refined `docs/20-product-tdd/ecommerce-contracts.md` for `/order/new`
     topology, departure-time binding UX, quote-expired selection preservation,
     and RideHailing cancelled-create behavior
+- Current mock-control slice implemented locally:
+  - observed cause of rapid state collapse: `CommerceOrderDetailPage` polls
+    order detail every 1500 ms, backend detail projection queries provider
+    detail, and fake Caocao used to advance phase on each detail query
+  - fake Caocao provider detail reads are now read-only by default
+  - lifecycle movement is explicit through fake control routes that also post
+    provider callbacks:
+    - `POST /__fake_caocao/orders/latest/advance`
+    - `POST /__fake_caocao/orders/:providerOrderId/advance`
+    - `POST /__fake_caocao/orders/:providerOrderId/phase`
+  - RideHailing Provider Instance Admin has a separate dev-only debug card that
+    directly calls the selected provider instance `config.endpointBaseUrl`
+    fake-control route; no backend proxy is introduced
+  - planning artifact:
+    `tasks/ride-hailing-ui-fixes/order-detail-mock-control-plan.md`
 - Map diagnostic:
   - the gray RideHailing Ordering map observation was confirmed as a browser
     client issue; shared map code is not part of the active fix.
@@ -237,6 +253,8 @@ Choose the narrowest sufficient proof per approved slice:
   - `pnpm check:format`
   - `pnpm check:lint`
   - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+  - `pnpm --filter @partner-up-dev/fake-caocao-server typecheck`
+  - `pnpm --filter @partner-up-dev/fake-caocao-server test`
   - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/rental-ordering.scenario.test.ts`
   - `pnpm exec biome check --write packages/fake-caocao-server/src/state.ts packages/fake-caocao-server/src/routes.ts packages/fake-caocao-server/src/state.test.ts packages/fake-caocao-server/src/server.test.ts tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
   - `pnpm --filter @partner-up-dev/fake-caocao-server typecheck`
diff --git a/tasks/ride-hailing-ui-fixes/discussion-log.md b/tasks/ride-hailing-ui-fixes/discussion-log.md
index 0dec84652..2d87a748e 100644
--- a/tasks/ride-hailing-ui-fixes/discussion-log.md
+++ b/tasks/ride-hailing-ui-fixes/discussion-log.md
@@ -970,3 +970,65 @@
   `/order/new` is now named as the PR-attached ordering assembly route in the
   journey chain. `offerDetail` is clarified as an ordering projection, not a
   user-facing Offer Detail page or dynamic quote authority.
+
+## Diagnose: RideHailing Order Detail Mock Lifecycle Control
+
+- Human observation:
+  after order creation, the fake RideHailing order moves too quickly from
+  dispatching to in-trip and pending-payment states, which makes manual Order
+  Detail state review difficult.
+- Finding:
+  fake Caocao has no timer-based lifecycle. The rapid movement comes from
+  `queryOrderDetailV2`: every provider detail read calls
+  `FakeCaocaoState.advanceOrderDetail`.
+- Finding:
+  backend `buildRideHailingDetailProjection` queries provider detail every time
+  Order Detail is loaded if provider binding exists.
+- Finding:
+  frontend `CommerceOrderDetailPage` polls RideHailing order detail every
+  1500 ms until a bill exists.
+- Consequence:
+  opening Order Detail causes the frontend polling loop to drive fake provider
+  state through `CREATED -> ACCEPTED -> IN_TRIP -> FINISHED`; the fake server
+  then posts callbacks and final settlement creates a bill.
+- Target direction:
+  make fake provider detail reads read-only by default and add explicit fake
+  admin/test-control routes to set or advance order phase and post callbacks.
+- Planning artifact:
+  added `order-detail-mock-control-plan.md`.
+- Human proposal:
+  add a dev-only "advance phase" button around the RideHailing Provider Instance
+  Admin editing surface.
+- Review:
+  this is feasible, but the Provider Instance card is provider-level while fake
+  orders are order-level. A no-argument button needs a target policy.
+- Recommended target policy:
+  advance the latest non-terminal fake Caocao order behind the selected provider
+  endpoint, and return/display the affected provider order id and phase.
+- Human correction:
+  the button was intended for the main "编辑 Provider Instance" card, not the
+  left selectable Provider Instance card.
+- Updated UI direction:
+  add a separate dev-only main-area card for fake lifecycle controls, rather
+  than nesting the action inside either the left selection card or the edit form
+  card.
+- Human correction:
+  Frontend Admin should call fake Caocao directly. Do not introduce a backend
+  admin proxy endpoint for advancing fake phases.
+- Boundary note:
+  with direct frontend calls, `import.meta.env.DEV` gating keeps the control out
+  of production UI, but it is not a server-side security boundary. This is
+  acceptable for fake-provider developer tooling as long as the target route is
+  the fake endpoint from the selected Provider Instance config.
+- Implementation:
+  fake Caocao provider detail reads are now read-only; explicit fake control
+  routes own phase set/advance and callback posting.
+- Implementation:
+  RideHailing Provider Instance Admin has a separate dev-only "开发调试" card
+  that directly calls the selected Provider Instance endpoint to advance the
+  latest non-terminal fake order.
+- Verification note:
+  fake server unit tests cover explicit phase advancement and latest
+  non-terminal targeting, while the RideHailing system scenario now asserts
+  repeated Order Detail polling does not auto-advance the fake provider order
+  beyond the create-time accepted callback.
diff --git a/tasks/ride-hailing-ui-fixes/order-detail-mock-control-plan.md b/tasks/ride-hailing-ui-fixes/order-detail-mock-control-plan.md
new file mode 100644
index 000000000..36d94821a
--- /dev/null
+++ b/tasks/ride-hailing-ui-fixes/order-detail-mock-control-plan.md
@@ -0,0 +1,133 @@
+# RideHailing Order Detail Mock Control Plan
+
+## Purpose
+
+This slice improves fake Caocao ride lifecycle control so manual and scenario
+checks can inspect RideHailing Order Detail states one by one.
+
+It is an infrastructure slice for later RideHailing Order Detail UI slices.
+
+## Classification
+
+- Primary input route: `Reality`
+- Current mode: `Execute`
+- Production-code mutation was performed after Impact Handshake and explicit
+  `开始`.
+
+## Current Facts
+
+- Fake Caocao order state lives in `packages/fake-caocao-server/src/state.ts`.
+- Fake Caocao phases are:
+  `CREATED`, `ACCEPTED`, `IN_TRIP`, `FINISHED`, `CANCELLED`.
+- Fake Caocao currently advances phase inside
+  `FakeCaocaoState.advanceOrderDetail`.
+- `/common/queryOrderDetailV2` calls `advanceOrderDetail`, then posts a callback
+  for the new phase when `callbackUrl` exists.
+- Backend `buildRideHailingDetailProjection` calls provider
+  `queryOrderDetail` whenever a provider binding exists.
+- Frontend `CommerceOrderDetailPage.vue` refetches RideHailing order detail
+  every 1500 ms until a bill exists.
+- Therefore merely opening Order Detail drives fake Caocao through:
+  `CREATED -> ACCEPTED -> IN_TRIP -> FINISHED`, then final settlement callback
+  creates the bill. This prevents stable manual inspection of intermediate
+  states.
+
+## Target Model
+
+- Provider detail reads must be read-only in fake Caocao by default.
+- Fake Caocao lifecycle movement should be explicit through admin/test-control
+  routes.
+- The fake server should support inspecting and setting or advancing an order
+  phase without knowing the internal provider order id in advance when practical.
+- Callback posting should happen when an admin/test-control route moves the fake
+  order phase, because backend state changes through provider callbacks.
+- Existing quote, estimate availability, next-create failure, cancellation, and
+  fee-confirm controls should remain stable.
+
+## Candidate Implementation
+
+- Replace `advanceOrderDetail(providerOrderId)` with read-only detail lookup for
+  `/common/queryOrderDetailV2`.
+- Add explicit state helpers:
+  - `setOrderPhase(providerOrderId, phase)`
+  - `advanceOrderPhase(providerOrderId)` using the existing phase order
+  - optionally `findOrderByExternalOrderId(externalOrderId)` or route support
+    for addressing by provider id or external id
+- Add fake admin/test routes:
+  - `POST /__fake_caocao/orders/:providerOrderId/phase`
+  - `POST /__fake_caocao/orders/:providerOrderId/advance`
+  - `POST /__fake_caocao/orders/latest/advance`
+- Each route returns the updated order and posts the corresponding callback when
+  `callbackUrl` exists.
+- Keep create-time immediate accepted callback as a separate decision:
+  - conservative first step: keep it, so newly created orders enter
+    `ACCEPTED` on the backend without relying on detail polling
+  - follow-up option: make create callback behavior configurable if manual
+    inspection needs a stable `DISPATCHING` state immediately after create
+
+## Open Decision
+
+- Whether this slice should also disable create-time callback by default.
+- Whether RideHailing Provider Instance Admin should expose a dev-only "advance
+  phase" action for the selected fake provider instance.
+
+Admin action recommendation:
+
+- Add the action, but do not model it as provider-instance lifecycle. It is a
+  developer control for the fake provider endpoint behind that Provider
+  Instance.
+- Because a Provider Instance can have multiple orders, the button needs an
+  explicit target policy. Recommended MVP policy: advance the latest
+  non-terminal fake Caocao order for that endpoint, returning the advanced
+  `providerOrderId` and phase.
+- If later manual review needs more precision, add an order selector or provider
+  order id input. Do not overload one provider card action with ambiguous
+  multi-order semantics.
+- The action should live in a separate dev-only card in the Admin main area, not
+  inside the left Provider Instance selection card or the edit form card. This
+  keeps selection, editing, and fake lifecycle controls as separate UI concerns.
+- Frontend Admin should call the fake Caocao control route directly through the
+  selected Provider Instance `config.endpointBaseUrl`; do not add a backend
+  admin proxy for this control.
+- Because this bypasses backend, the "dev-only" constraint is a frontend UI /
+  build constraint, not a security boundary. The action must be rendered only
+  under `import.meta.env.DEV`, and the fake server remains the only expected
+  receiver of `/__fake_caocao/*` control routes.
+
+Current recommendation:
+
+- Do not disable it in the first mutation. The immediate accepted callback is not
+  the main source of rapid state collapse; detail polling is. Keeping it reduces
+  behavior change and preserves current "driver assigned quickly" tests.
+- Add explicit phase controls first. If Order Detail UI needs a stable
+  `DISPATCHING` state next, add a second control such as
+  `/__fake_caocao/callback-mode` or create options.
+
+## Implemented Shape
+
+- `/common/queryOrderDetailV2` is now read-only for fake Caocao order phase.
+- Fake Caocao exposes explicit control routes:
+  - `POST /__fake_caocao/orders/latest/advance`
+  - `POST /__fake_caocao/orders/:providerOrderId/advance`
+  - `POST /__fake_caocao/orders/:providerOrderId/phase`
+- Control routes update fake state, post the matching provider callback when a
+  callback URL exists, and return the updated fake order.
+- "Latest" means the latest inserted non-terminal fake order; `FINISHED` and
+  `CANCELLED` orders are skipped.
+- Create-time callback still moves a callback-enabled order to `ACCEPTED`. This
+  preserves current "driver assigned quickly" behavior while preventing polling
+  from collapsing the remaining lifecycle.
+- Frontend RideHailing Provider Instance Admin renders a separate dev-only
+  "开发调试" card when a provider instance is selected. The card directly calls
+  the selected instance `config.endpointBaseUrl` fake control route; it does not
+  use a backend proxy.
+- The dev-only Admin control is a convenience UI and not a security boundary.
+
+## Verification
+
+- `pnpm --filter @partner-up-dev/fake-caocao-server test`
+- `pnpm --filter @partner-up-dev/fake-caocao-server typecheck`
+- Focused RideHailing system scenario:
+  `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+- Scenario coverage proves repeated Order Detail reads do not advance fake
+  provider phase beyond the create-time accepted callback.
diff --git a/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts b/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
index 2da40a9cc..0b949e848 100644
--- a/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
+++ b/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
@@ -114,12 +114,31 @@ async function setFakeCaocaoEstimateAvailability(input: {
 }
 
 async function readFakeCaocaoOrderCount(): Promise<number> {
+  return (await readFakeCaocaoOrders()).length;
+}
+
+async function readFakeCaocaoOrders(): Promise<
+  Array<{
+    providerOrderId: string;
+    phase: string;
+  }>
+> {
   const { fakeCaocao } = getScenarioEnvironment();
   const response = await fetch(new URL("/__fake_caocao/state", fakeCaocao.origin));
   assert.equal(response.ok, true);
   const body = (await response.json()) as { orders?: unknown[] };
   assert.ok(Array.isArray(body.orders));
-  return body.orders.length;
+  return body.orders.map((order) => {
+    assert.equal(typeof order, "object");
+    assert.notEqual(order, null);
+    const record = order as Record<string, unknown>;
+    assert.equal(typeof record.providerOrderId, "string");
+    assert.equal(typeof record.phase, "string");
+    return {
+      phase: record.phase,
+      providerOrderId: record.providerOrderId,
+    };
+  });
 }
 
 async function expireCommerceQuotes(): Promise<number> {
@@ -531,6 +550,10 @@ scenario("commerce_ride_hailing_ordering_reaches_order_detail", async (ctx) => {
 
     await page.getByTestId("ordering.ride-hailing.create-order").click();
     await assertRideHailingOrderDetail(page);
+    await page.waitForTimeout(3500);
+    const fakeOrders = await readFakeCaocaoOrders();
+    assert.equal(fakeOrders.length, 1);
+    assert.equal(fakeOrders[0]?.phase, "ACCEPTED");
     orderPath = new URL(page.url()).pathname;
   });
 

From 3c1eccb0bf3b981019b2c2a0a8b83c937a485670 Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Tue, 23 Jun 2026 17:14:47 +0800
Subject: [PATCH 38/94] feat(ride-hailing): expose provider live geometry

- type Caocao order detail, driver location, and route provider responses
- project sanitized live geometry into ride-hailing order detail
- extend fake Caocao lifecycle and route/location endpoints
---
 .../domains/ride-hailing/model/provider.ts    |  59 ++++-
 .../services/caocao-provider.test.ts          | 126 +++++++++-
 .../ride-hailing/services/caocao-provider.ts  | 236 +++++++++++++++++-
 .../handle-caocao-order-status-callback.ts    |  22 +-
 .../domains/trade/model/ride-hailing-order.ts |   1 +
 .../use-cases/ride-hailing-ordering-flow.ts   | 164 +++++++-----
 .../caocao-callback-route.scenario.test.ts    |   2 +-
 packages/fake-caocao-server/src/routes.ts     | 230 +++++++++++++++--
 .../fake-caocao-server/src/server.test.ts     |  50 ++++
 packages/fake-caocao-server/src/state.test.ts |   2 +
 packages/fake-caocao-server/src/state.ts      |  36 ++-
 11 files changed, 818 insertions(+), 110 deletions(-)

diff --git a/apps/backend/src/domains/ride-hailing/model/provider.ts b/apps/backend/src/domains/ride-hailing/model/provider.ts
index 2c56b2549..52218f7d2 100644
--- a/apps/backend/src/domains/ride-hailing/model/provider.ts
+++ b/apps/backend/src/domains/ride-hailing/model/provider.ts
@@ -44,6 +44,7 @@ export type CaocaoOrderStatusCallbackEvent =
   | 11
   | 12
   | 13
+  | 14
   | 20
   | 21
   | 22
@@ -60,7 +61,9 @@ export type CaocaoOrderStatusCallbackEvent =
   | 45
   | 46
   | 47
-  | 48;
+  | 48
+  | 49
+  | 50;
 
 export type CaocaoOrderStatusCallback = {
   providerType: "CAOCAO";
@@ -87,6 +90,52 @@ export type RideHailingProviderVehicleQuote = {
   providerSnapshot: unknown;
 };
 
+export type RideHailingProviderCoordinate = {
+  latitude: number;
+  longitude: number;
+};
+
+export type RideHailingProviderVehicleLocation = RideHailingProviderCoordinate & {
+  capturedAt: string | null;
+  headingDegrees: number | null;
+  speedKph: number | null;
+  providerSnapshot: unknown;
+};
+
+export type RideHailingProviderNavigationRouteKind =
+  | "PICKUP"
+  | "DROPOFF"
+  | "WAITING"
+  | "RELAY_PREVIOUS_DROPOFF"
+  | "UNKNOWN";
+
+export type RideHailingProviderNavigationRoute = {
+  routeKind: RideHailingProviderNavigationRouteKind;
+  polyline: RideHailingProviderCoordinate[];
+  remainingDistanceMeters: number | null;
+  remainingDurationSeconds: number | null;
+  trafficLightCount: number | null;
+  vehicleLocation: RideHailingProviderVehicleLocation | null;
+  providerSnapshot: unknown;
+};
+
+export type RideHailingProviderOrderDetail = {
+  phase: string;
+  statusLabel: string;
+  finalAmountFen: number | null;
+  driver: {
+    driverName: string;
+    driverPhone: string;
+  } | null;
+  vehicle: {
+    plate: string;
+    brand: string;
+    color: string;
+  } | null;
+  vehicleLocation: RideHailingProviderVehicleLocation | null;
+  providerSnapshot: unknown;
+};
+
 export type RideHailingProviderCreateRideInput = {
   orderId: string;
   params: Record<string, string | number | boolean | null | undefined>;
@@ -114,7 +163,13 @@ export type RideHailingProviderPort = {
     externalOrderId: string;
     providerSnapshot: unknown;
   }>;
-  queryOrderDetail(input: { providerOrderId: string }): Promise<unknown>;
+  queryOrderDetail(input: { providerOrderId: string }): Promise<RideHailingProviderOrderDetail>;
+  queryDriverLocation(input: {
+    providerOrderId: string;
+  }): Promise<RideHailingProviderVehicleLocation | null>;
+  queryDriverRoute(input: {
+    providerOrderId: string;
+  }): Promise<RideHailingProviderNavigationRoute | null>;
   cancelRide(input: RideHailingProviderCancelInput): Promise<{
     providerOrderId: string;
     cancelFeeFen: number;
diff --git a/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts b/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
index 9f8c83314..853959e1e 100644
--- a/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
+++ b/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
@@ -13,8 +13,7 @@ import {
   resolveCaocaoOrderStatusCallbackUrl,
 } from ".";
 
-const providerInstanceId =
-  "00000000-0000-0000-0000-000000000501" as RideHailingProviderInstanceId;
+const providerInstanceId = "00000000-0000-0000-0000-000000000501" as RideHailingProviderInstanceId;
 const orderId = "123e4567-e89b-12d3-a456-426614174000";
 const now = new Date("2031-01-01T00:00:00.000Z");
 
@@ -100,11 +99,7 @@ describe("Caocao signer", () => {
     let requestUrl: string | null = null;
     const fetchImpl: typeof fetch = async (input) => {
       requestUrl =
-        typeof input === "string"
-          ? input
-          : input instanceof URL
-            ? input.toString()
-            : input.url;
+        typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
       return new Response(
         JSON.stringify({
           code: 200,
@@ -220,3 +215,120 @@ describe("Caocao callback verification", () => {
     );
   });
 });
+
+describe("Caocao live order projection", () => {
+  it("normalizes order detail, driver location, and navigation route responses", async () => {
+    const requestPaths: string[] = [];
+    const fetchImpl: typeof fetch = async (input) => {
+      const requestUrl =
+        typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
+      const url = new URL(requestUrl);
+      requestPaths.push(url.pathname);
+
+      if (url.pathname.endsWith("/common/queryOrderDetailV2")) {
+        return new Response(
+          JSON.stringify({
+            code: 200,
+            data: {
+              basicOrderVO: {
+                status: "12",
+              },
+              driverInfoVO: {
+                carBrand: "几何",
+                card: "浙A12345",
+                color: "白色",
+                location: {
+                  direction: 90,
+                  latitude: 30.2688,
+                  longitude: 120.1608,
+                  speed: 0,
+                },
+                name: "张师傅",
+                phone: "13800138001",
+              },
+            },
+            success: true,
+          }),
+          { status: 200 },
+        );
+      }
+
+      if (url.pathname.endsWith("/common/queryDriverLocationByOrderId")) {
+        return new Response(
+          JSON.stringify({
+            code: 200,
+            data: {
+              direction: 88,
+              latitude: 30.27,
+              longitude: 120.16,
+              speed: 12,
+            },
+            success: true,
+          }),
+          { status: 200 },
+        );
+      }
+
+      if (url.pathname.endsWith("/common/queryDriverPolylineV2")) {
+        return new Response(
+          JSON.stringify({
+            code: 200,
+            data: {
+              driverEtaInfoVO: {
+                direction: 88,
+                lat: 30.27,
+                lng: 120.16,
+                remainDistance: 820,
+                remainLightCount: 2,
+                remainTime: 240,
+                speed: 12,
+                timestamp: "1755571305064",
+              },
+              navigationPolylineType: 1,
+              steps: [
+                {
+                  links: [
+                    {
+                      coords: "30.270000,120.160000;30.268800,120.160800",
+                    },
+                  ],
+                },
+              ],
+            },
+            success: true,
+          }),
+          { status: 200 },
+        );
+      }
+
+      return new Response(JSON.stringify({ code: 404, success: false }), { status: 200 });
+    };
+    const adapter = new CaocaoProviderAdapter({
+      providerInstance: caocaoProviderInstance(),
+      fetchImpl,
+    });
+
+    const detail = await adapter.queryOrderDetail({ providerOrderId: "CC123456" });
+    const location = await adapter.queryDriverLocation({ providerOrderId: "CC123456" });
+    const route = await adapter.queryDriverRoute({ providerOrderId: "CC123456" });
+
+    expect(detail.phase).toBe("12");
+    expect(detail.statusLabel).toBe("司机已到达");
+    expect(detail.driver?.driverName).toBe("张师傅");
+    expect(detail.vehicle?.plate).toBe("浙A12345");
+    expect(detail.vehicleLocation?.headingDegrees).toBe(90);
+    expect(location?.headingDegrees).toBe(88);
+    expect(route?.routeKind).toBe("PICKUP");
+    expect(route?.remainingDistanceMeters).toBe(820);
+    expect(route?.trafficLightCount).toBe(2);
+    expect(route?.polyline).toEqual([
+      { latitude: 30.27, longitude: 120.16 },
+      { latitude: 30.2688, longitude: 120.1608 },
+    ]);
+    expect(requestPaths).toEqual([
+      "/v2/common/queryOrderDetailV2",
+      "/v2/common/queryDriverLocationByOrderId",
+      "/v2/common/queryDriverPolylineV2",
+    ]);
+  });
+});
diff --git a/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts b/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
index 63bdfdcee..19d683aa1 100644
--- a/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
+++ b/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
@@ -11,7 +11,11 @@ import type {
   RideHailingProviderConfirmFeeInput,
   RideHailingProviderCreateRideInput,
   RideHailingProviderEstimateInput,
+  RideHailingProviderNavigationRoute,
+  RideHailingProviderNavigationRouteKind,
+  RideHailingProviderOrderDetail,
   RideHailingProviderVehicleQuote,
+  RideHailingProviderVehicleLocation,
   RideHailingProviderPort,
 } from "../model";
 
@@ -21,8 +25,8 @@ type CaocaoParamInput = Record<string, CaocaoParamValue>;
 const EXTERNAL_ORDER_ID_PREFIX = "rh";
 const UUID_BASE36_ALPHABET = /^[0-9a-z]+$/;
 const CAOCAO_ORDER_STATUS_CALLBACK_EVENTS: ReadonlySet<number> = new Set([
-  1, 2, 3, 4, 5, 6, 9, 11, 12, 13, 20, 21, 22, 23, 24, 25, 26, 27, 40, 41, 42, 43, 44, 45, 46, 47,
-  48,
+  1, 2, 3, 4, 5, 6, 9, 11, 12, 13, 14, 20, 21, 22, 23, 24, 25, 26, 27, 40, 41, 42, 43, 44, 45, 46,
+  47, 48, 49, 50,
 ]);
 
 const isRecord = (value: unknown): value is Record<string, unknown> =>
@@ -68,6 +72,201 @@ const readOptionalStringField = (value: unknown, keys: string[]): string | null
   return null;
 };
 
+const readOptionalRecordField = (
+  value: unknown,
+  keys: string[],
+): Record<string, unknown> | null => {
+  if (!isRecord(value)) return null;
+  for (const key of keys) {
+    const candidate = value[key];
+    if (isRecord(candidate)) return candidate;
+  }
+  return null;
+};
+
+const readOptionalArrayField = (value: unknown, keys: string[]): unknown[] | null => {
+  if (!isRecord(value)) return null;
+  for (const key of keys) {
+    const candidate = value[key];
+    if (Array.isArray(candidate)) return candidate;
+  }
+  return null;
+};
+
+const readOptionalNumberFromRecord = (
+  value: Record<string, unknown> | null,
+  keys: string[],
+): number | null => readOptionalNumberField(value, keys);
+
+const buildCaocaoStatusLabel = (phase: string): string => {
+  if (phase === "FINISHED" || ["5", "6", "7", "8"].includes(phase)) return "待支付";
+  if (phase === "IN_TRIP" || phase === "3") return "行程中";
+  if (phase === "ARRIVED_AT_PICKUP" || phase === "12") return "司机已到达";
+  if (phase === "ACCEPTED" || ["2", "9"].includes(phase)) return "已接单";
+  if (phase === "CANCELLED" || ["4", "10", "13", "14", "20", "21", "26", "27"].includes(phase)) {
+    return "已取消";
+  }
+  return "正在呼叫";
+};
+
+const parseCaocaoVehicleLocation = (raw: unknown): RideHailingProviderVehicleLocation | null => {
+  if (!isRecord(raw)) return null;
+  const locationRaw = readOptionalRecordField(raw, [
+    "location",
+    "driverLocation",
+    "driverLocationVO",
+    "driverEtaInfoVO",
+    "driverEtaInfoVo",
+  ]);
+  const source = locationRaw ?? raw;
+  const latitude = readOptionalNumberField(source, ["latitude", "lat"]);
+  const longitude = readOptionalNumberField(source, ["longitude", "lng"]);
+  if (latitude === null || longitude === null) return null;
+  return {
+    capturedAt: readOptionalStringField(source, [
+      "capturedAt",
+      "timestamp",
+      "locationTime",
+      "location_time",
+    ]),
+    headingDegrees: readOptionalNumberField(source, ["headingDegrees", "direction", "heading"]),
+    latitude,
+    longitude,
+    providerSnapshot: raw,
+    speedKph: readOptionalNumberField(source, ["speedKph", "speed"]),
+  };
+};
+
+const parseCaocaoCoordinates = (coords: string): RideHailingProviderNavigationRoute["polyline"] =>
+  coords
+    .split(";")
+    .map((item) => item.trim())
+    .filter((item) => item.length > 0)
+    .map((item) => {
+      const [latitudeRaw, longitudeRaw] = item.split(",");
+      const latitude = Number(latitudeRaw);
+      const longitude = Number(longitudeRaw);
+      return Number.isFinite(latitude) && Number.isFinite(longitude)
+        ? { latitude, longitude }
+        : null;
+    })
+    .filter((point): point is { latitude: number; longitude: number } => point !== null);
+
+const parseCaocaoStepPolyline = (
+  stepsRaw: unknown[] | null,
+): RideHailingProviderNavigationRoute["polyline"] => {
+  if (!stepsRaw) return [];
+  const points: RideHailingProviderNavigationRoute["polyline"] = [];
+  for (const stepRaw of stepsRaw) {
+    const linksRaw = readOptionalArrayField(stepRaw, ["links"]);
+    if (!linksRaw) continue;
+    for (const linkRaw of linksRaw) {
+      const coords = readOptionalStringField(linkRaw, ["coords"]);
+      if (coords) points.push(...parseCaocaoCoordinates(coords));
+    }
+  }
+  return points;
+};
+
+const mapCaocaoNavigationRouteKind = (
+  value: number | null,
+): RideHailingProviderNavigationRouteKind => {
+  if (value === 0) return "RELAY_PREVIOUS_DROPOFF";
+  if (value === 1) return "PICKUP";
+  if (value === 2) return "WAITING";
+  if (value === 3) return "DROPOFF";
+  return "UNKNOWN";
+};
+
+const parseCaocaoOrderDetail = (data: Record<string, unknown>): RideHailingProviderOrderDetail => {
+  const basicOrder = readOptionalRecordField(data, ["basicOrderVO", "basicOrderVo", "basic_order"]);
+  const driverRaw = readOptionalRecordField(data, [
+    "driver",
+    "driverInfoVO",
+    "driverInfoVo",
+    "driver_info",
+  ]);
+  const vehicleRaw = readOptionalRecordField(data, [
+    "vehicle",
+    "driverInfoVO",
+    "driverInfoVo",
+    "driver_info",
+  ]);
+  const phase =
+    readOptionalStringField(data, ["phase", "status"]) ??
+    readOptionalStringField(basicOrder, ["phase", "status"]) ??
+    "UNKNOWN";
+  const driverName = readOptionalStringField(driverRaw, ["driverName", "driver_name", "name"]);
+  const driverPhone = readOptionalStringField(driverRaw, ["driverPhone", "driver_phone", "phone"]);
+  const plate = readOptionalStringField(vehicleRaw, [
+    "plate",
+    "vehiclePlate",
+    "vehicle_plate",
+    "carNo",
+    "car_no",
+    "card",
+  ]);
+  const brand = readOptionalStringField(vehicleRaw, [
+    "brand",
+    "vehicleBrand",
+    "vehicle_brand",
+    "carBrand",
+  ]);
+  const color = readOptionalStringField(vehicleRaw, ["color", "vehicleColor", "vehicle_color"]);
+  const finalAmountFen =
+    readOptionalNumberField(data, ["finalAmountFen", "actual_price"]) ??
+    readOptionalNumberField(
+      readOptionalRecordField(data, ["orderFeeVO", "orderFeeVo", "order_fee"]),
+      ["totalFee", "actualPrice", "actual_price"],
+    );
+
+  return {
+    driver:
+      driverName || driverPhone
+        ? {
+            driverName: driverName ?? "司机",
+            driverPhone: driverPhone ?? "",
+          }
+        : null,
+    finalAmountFen,
+    phase,
+    providerSnapshot: data,
+    statusLabel: buildCaocaoStatusLabel(phase),
+    vehicle:
+      plate || brand || color
+        ? {
+            brand: brand ?? "",
+            color: color ?? "",
+            plate: plate ?? "",
+          }
+        : null,
+    vehicleLocation: driverRaw ? parseCaocaoVehicleLocation(driverRaw) : null,
+  };
+};
+
+const parseCaocaoDriverRoute = (
+  data: Record<string, unknown>,
+): RideHailingProviderNavigationRoute => {
+  const routeType = readOptionalNumberField(data, ["navigationPolylineType"]);
+  const stepsRaw = readOptionalArrayField(data, ["steps"]);
+  const nextStepsRaw = readOptionalArrayField(data, ["nextSteps"]);
+  const etaRaw =
+    readOptionalRecordField(data, ["driverEtaInfoVO", "driverEtaInfoVo"]) ??
+    readOptionalRecordField(data, ["nextDriverEtaInfoVO", "nextDriverEtaInfoVo"]);
+  const polyline = parseCaocaoStepPolyline(stepsRaw);
+  const fallbackPolyline = polyline.length > 0 ? polyline : parseCaocaoStepPolyline(nextStepsRaw);
+
+  return {
+    polyline: fallbackPolyline,
+    providerSnapshot: data,
+    remainingDistanceMeters: readOptionalNumberFromRecord(etaRaw, ["remainDistance"]),
+    remainingDurationSeconds: readOptionalNumberFromRecord(etaRaw, ["remainTime"]),
+    routeKind: mapCaocaoNavigationRouteKind(routeType),
+    trafficLightCount: readOptionalNumberFromRecord(etaRaw, ["remainLightCount"]),
+    vehicleLocation: etaRaw ? parseCaocaoVehicleLocation(etaRaw) : null,
+  };
+};
+
 const normalizeCaocaoParams = (params: CaocaoParamInput): CaocaoSignedParams => {
   const normalized: CaocaoSignedParams = {};
   for (const [key, value] of Object.entries(params)) {
@@ -304,10 +503,39 @@ export class CaocaoProviderAdapter implements RideHailingProviderPort {
     };
   }
 
-  async queryOrderDetail(input: { providerOrderId: string }): Promise<unknown> {
-    return this.request("GET", "/common/queryOrderDetailV2", {
+  async queryOrderDetail(input: {
+    providerOrderId: string;
+  }): Promise<RideHailingProviderOrderDetail> {
+    const data = await this.request<Record<string, unknown>>("GET", "/common/queryOrderDetailV2", {
       order_id: input.providerOrderId,
     });
+    return parseCaocaoOrderDetail(data);
+  }
+
+  async queryDriverLocation(input: {
+    providerOrderId: string;
+  }): Promise<RideHailingProviderVehicleLocation | null> {
+    const data = await this.request<Record<string, unknown>>(
+      "GET",
+      "/common/queryDriverLocationByOrderId",
+      {
+        order_id: input.providerOrderId,
+      },
+    );
+    return parseCaocaoVehicleLocation(data);
+  }
+
+  async queryDriverRoute(input: {
+    providerOrderId: string;
+  }): Promise<RideHailingProviderNavigationRoute | null> {
+    const data = await this.request<Record<string, unknown>>(
+      "POST",
+      "/common/queryDriverPolylineV2",
+      {
+        order_id: input.providerOrderId,
+      },
+    );
+    return parseCaocaoDriverRoute(data);
   }
 
   async cancelRide(input: RideHailingProviderCancelInput): Promise<{
diff --git a/apps/backend/src/domains/ride-hailing/use-cases/handle-caocao-order-status-callback.ts b/apps/backend/src/domains/ride-hailing/use-cases/handle-caocao-order-status-callback.ts
index e653c9206..9988ad2cb 100644
--- a/apps/backend/src/domains/ride-hailing/use-cases/handle-caocao-order-status-callback.ts
+++ b/apps/backend/src/domains/ride-hailing/use-cases/handle-caocao-order-status-callback.ts
@@ -15,6 +15,7 @@ import type { UserId } from "../../../entities/user";
 import { createRideHailingProviderPort } from "../services";
 import type { CaocaoOrderStatusCallback } from "../model/provider";
 import { getRideHailingChoiceSetItem, getRideHailingProviderBinding } from "../../trade/services";
+import type { RideHailingExecutionPhase } from "../../trade/model";
 
 const providerRepo = new RideHailingProviderInstanceRepository();
 const rideOrderRepo = new RideHailingOrderRepository();
@@ -38,14 +39,17 @@ const readNumber = (value: Record<string, string>, keys: string[]): number | nul
   return null;
 };
 
-const mapCaocaoEventToExecutionPhase = (event: number) => {
-  if ([40, 41, 42, 43, 44, 45, 46, 47, 48].includes(event)) {
-    return "CANCELLED" as const;
-  }
-  if ([25, 26, 27].includes(event)) return "FINISHED" as const;
-  if ([23, 24].includes(event)) return "IN_TRIP" as const;
-  if ([20, 21, 22].includes(event)) return "ACCEPTED" as const;
-  return "DISPATCHING" as const;
+const mapCaocaoEventToExecutionPhase = (
+  event: number,
+  currentPhase: RideHailingExecutionPhase,
+): RideHailingExecutionPhase => {
+  if ([20, 21, 22, 26, 27, 40, 41, 44, 45].includes(event)) return "CANCELLED";
+  if ([5, 6, 11, 12, 13].includes(event)) return "FINISHED";
+  if ([4, 48].includes(event)) return "IN_TRIP";
+  if (event === 3) return "ARRIVED_AT_PICKUP";
+  if ([1, 2, 42].includes(event)) return "ACCEPTED";
+  if (event === 14) return "DISPATCHING";
+  return currentPhase;
 };
 
 const emptyToNull = <T extends Record<string, string | null>>(value: T): T | null =>
@@ -184,7 +188,7 @@ async function applyCaocaoCallbackWithProviderInstance(input: {
   });
 
   await rideOrderRepo.updateByOrderId(orderId, {
-    executionPhase: mapCaocaoEventToExecutionPhase(parsed.event),
+    executionPhase: mapCaocaoEventToExecutionPhase(parsed.event, rideOrder.executionPhase),
     driverSnapshot,
     vehicleSnapshot,
   });
diff --git a/apps/backend/src/domains/trade/model/ride-hailing-order.ts b/apps/backend/src/domains/trade/model/ride-hailing-order.ts
index c1fc5a610..2ef7fad11 100644
--- a/apps/backend/src/domains/trade/model/ride-hailing-order.ts
+++ b/apps/backend/src/domains/trade/model/ride-hailing-order.ts
@@ -32,6 +32,7 @@ export type RideHailingExecutionPhase =
   | "INITIATING"
   | "DISPATCHING"
   | "ACCEPTED"
+  | "ARRIVED_AT_PICKUP"
   | "IN_TRIP"
   | "FINISHED"
   | "CANCELLED"
diff --git a/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts b/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts
index 11ca3f799..031228403 100644
--- a/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts
+++ b/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts
@@ -5,6 +5,11 @@ import { RideHailingProviderInstanceRepository } from "../../../repositories/Rid
 import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository";
 import { throwHttpProblem } from "../../../lib/problem-details";
 import { createRideHailingProviderPort } from "../../ride-hailing";
+import type {
+  RideHailingProviderNavigationRoute,
+  RideHailingProviderOrderDetail,
+  RideHailingProviderVehicleLocation,
+} from "../../ride-hailing";
 import type {
   RideHailingDriverSnapshot,
   RideHailingExecutionPhase,
@@ -22,44 +27,24 @@ const providerRepo = new RideHailingProviderInstanceRepository();
 const rideOrderRepo = new RideHailingOrderRepository();
 const tradeOrderRepo = new TradeOrderRepository();
 
-const isRecord = (value: unknown): value is Record<string, unknown> =>
-  typeof value === "object" && value !== null && !Array.isArray(value);
+type ProviderVehicleLocationProjection = Omit<
+  RideHailingProviderVehicleLocation,
+  "providerSnapshot"
+>;
 
-const readNumber = (value: unknown, keys: string[]): number | null => {
-  if (!isRecord(value)) return null;
-  for (const key of keys) {
-    const candidate = value[key];
-    if (typeof candidate === "number" && Number.isFinite(candidate)) return candidate;
-    if (typeof candidate === "string" && candidate.trim().length > 0) {
-      const parsed = Number(candidate);
-      if (Number.isFinite(parsed)) return parsed;
-    }
-  }
-  return null;
+type ProviderNavigationRouteProjection = Omit<
+  RideHailingProviderNavigationRoute,
+  "providerSnapshot" | "vehicleLocation"
+> & {
+  vehicleLocation: ProviderVehicleLocationProjection | null;
 };
 
-const readString = (value: unknown, keys: string[]): string | null => {
-  if (!isRecord(value)) return null;
-  for (const key of keys) {
-    const candidate = value[key];
-    if (typeof candidate === "string" && candidate.length > 0) return candidate;
-  }
-  return null;
-};
-
-type ProviderDetailProjection = {
-  phase: string;
-  statusLabel: string;
-  finalAmountFen: number | null;
-  driver: {
-    driverName: string;
-    driverPhone: string;
-  } | null;
-  vehicle: {
-    plate: string;
-    brand: string;
-    color: string;
-  } | null;
+type ProviderDetailProjection = Omit<
+  RideHailingProviderOrderDetail,
+  "providerSnapshot" | "vehicleLocation"
+> & {
+  navigationRoute: ProviderNavigationRouteProjection | null;
+  vehicleLocation: ProviderVehicleLocationProjection | null;
 };
 
 export type RideHailingOrderDetailProjection = {
@@ -77,36 +62,59 @@ export type RideHailingOrderDetailProjection = {
   live: ProviderDetailProjection | null;
 };
 
-const parseProviderDetail = (raw: unknown): ProviderDetailProjection => {
-  const phase = readString(raw, ["phase", "status"]) ?? "CREATED";
-  const finalAmountFen = readNumber(raw, ["finalAmountFen", "actual_price"]);
-  const driverRaw = isRecord(raw) ? raw.driver : null;
-  const vehicleRaw = isRecord(raw) ? raw.vehicle : null;
-  const statusLabel =
-    phase === "FINISHED"
-      ? "待支付"
-      : phase === "IN_TRIP"
-        ? "行程中"
-        : phase === "ACCEPTED"
-          ? "已接单"
-          : "正在呼叫";
+const projectProviderVehicleLocation = (
+  location: RideHailingProviderVehicleLocation | null,
+): ProviderVehicleLocationProjection | null => {
+  if (!location) return null;
+  return {
+    capturedAt: location.capturedAt,
+    headingDegrees: location.headingDegrees,
+    latitude: location.latitude,
+    longitude: location.longitude,
+    speedKph: location.speedKph,
+  };
+};
+
+const projectProviderNavigationRoute = (
+  route: RideHailingProviderNavigationRoute | null,
+): ProviderNavigationRouteProjection | null => {
+  if (!route) return null;
+  return {
+    polyline: route.polyline,
+    remainingDistanceMeters: route.remainingDistanceMeters,
+    remainingDurationSeconds: route.remainingDurationSeconds,
+    routeKind: route.routeKind,
+    trafficLightCount: route.trafficLightCount,
+    vehicleLocation: projectProviderVehicleLocation(route.vehicleLocation),
+  };
+};
+
+const shouldQueryProviderLiveGeometry = (phase: RideHailingExecutionPhase): boolean =>
+  phase === "ACCEPTED" || phase === "ARRIVED_AT_PICKUP" || phase === "IN_TRIP";
+
+const queryOptionalProviderLive = async <T>(operation: () => Promise<T>): Promise<T | null> => {
+  try {
+    return await operation();
+  } catch {
+    return null;
+  }
+};
+
+const projectProviderDetail = (input: {
+  detail: RideHailingProviderOrderDetail;
+  navigationRoute: RideHailingProviderNavigationRoute | null;
+  vehicleLocation: RideHailingProviderVehicleLocation | null;
+}): ProviderDetailProjection => {
   return {
-    phase,
-    statusLabel,
-    finalAmountFen,
-    driver: isRecord(driverRaw)
-      ? {
-          driverName: readString(driverRaw, ["driverName", "name"]) ?? "司机",
-          driverPhone: readString(driverRaw, ["driverPhone", "phone"]) ?? "",
-        }
-      : null,
-    vehicle: isRecord(vehicleRaw)
-      ? {
-          plate: readString(vehicleRaw, ["plate"]) ?? "",
-          brand: readString(vehicleRaw, ["brand"]) ?? "",
-          color: readString(vehicleRaw, ["color"]) ?? "",
-        }
-      : null,
+    driver: input.detail.driver,
+    finalAmountFen: input.detail.finalAmountFen,
+    navigationRoute: projectProviderNavigationRoute(input.navigationRoute),
+    phase: input.detail.phase,
+    statusLabel: input.detail.statusLabel,
+    vehicle: input.detail.vehicle,
+    vehicleLocation: projectProviderVehicleLocation(
+      input.vehicleLocation ?? input.detail.vehicleLocation,
+    ),
   };
 };
 
@@ -130,11 +138,29 @@ export async function buildRideHailingDetailProjection(input: {
     );
     if (provider) {
       const port = createRideHailingProviderPort({ providerInstance: provider });
-      providerDetail = parseProviderDetail(
-        await port.queryOrderDetail({
-          providerOrderId: providerBinding.providerOrderId,
-        }),
-      );
+      const detail = await port.queryOrderDetail({
+        providerOrderId: providerBinding.providerOrderId,
+      });
+      const shouldQueryLiveGeometry = shouldQueryProviderLiveGeometry(rideOrder.executionPhase);
+      const vehicleLocation = shouldQueryLiveGeometry
+        ? await queryOptionalProviderLive(() =>
+            port.queryDriverLocation({
+              providerOrderId: providerBinding.providerOrderId,
+            }),
+          )
+        : null;
+      const navigationRoute = shouldQueryLiveGeometry
+        ? await queryOptionalProviderLive(() =>
+            port.queryDriverRoute({
+              providerOrderId: providerBinding.providerOrderId,
+            }),
+          )
+        : null;
+      providerDetail = projectProviderDetail({
+        detail,
+        navigationRoute,
+        vehicleLocation,
+      });
     }
   }
 
diff --git a/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts b/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts
index 7ef4cda2f..328115aba 100644
--- a/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts
+++ b/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts
@@ -305,7 +305,7 @@ scenario("Caocao callback updates ride execution and creates final bill", async
         signKey: "scenario-caocao-callback-secret",
         orderId: order.id,
         providerOrderId: "CC-FINAL-123",
-        event: "25",
+        event: "6",
         finalAmountFen: "4321",
       }).toString(),
     },
diff --git a/packages/fake-caocao-server/src/routes.ts b/packages/fake-caocao-server/src/routes.ts
index 57c72eae1..c0ba7e649 100644
--- a/packages/fake-caocao-server/src/routes.ts
+++ b/packages/fake-caocao-server/src/routes.ts
@@ -6,6 +6,7 @@ import {
   fakeCaocaoSignaturesMatch,
 } from "./signature";
 import type {
+  FakeCaocaoCoordinate,
   FakeCaocaoDriverSnapshot,
   FakeCaocaoOrderPhase,
   FakeCaocaoOrderState,
@@ -163,28 +164,58 @@ const estimatePayload = (estimate: FakeCaocaoVehicleEstimate): unknown => ({
   price_token: `fake_quote_${estimate.carType}`,
 });
 
-const driverSnapshot = (): FakeCaocaoDriverSnapshot => ({
-  driverName: "曹操测试司机",
-  driverPhone: "13900139000",
+const defaultDriverLocation = (): FakeCaocaoCoordinate => ({
   latitude: 30.2688,
   longitude: 120.1608,
-  vehicleBrand: "几何",
-  vehicleColor: "白色",
-  vehiclePlate: "浙A·TEST",
 });
 
+const interpolateCoordinate = (
+  from: FakeCaocaoCoordinate,
+  to: FakeCaocaoCoordinate,
+  ratio: number,
+): FakeCaocaoCoordinate => ({
+  latitude: from.latitude + (to.latitude - from.latitude) * ratio,
+  longitude: from.longitude + (to.longitude - from.longitude) * ratio,
+});
+
+const driverCoordinate = (order: FakeCaocaoOrderState | null): FakeCaocaoCoordinate => {
+  if (!order) return defaultDriverLocation();
+  if (order.phase === "ARRIVED_AT_PICKUP") return order.origin;
+  if (order.phase === "IN_TRIP")
+    return interpolateCoordinate(order.origin, order.destination, 0.45);
+  if (order.phase === "FINISHED") return order.destination;
+  return interpolateCoordinate(order.origin, order.destination, -0.12);
+};
+
+const driverSnapshot = (order: FakeCaocaoOrderState | null = null): FakeCaocaoDriverSnapshot => {
+  const coordinate = driverCoordinate(order);
+  return {
+    driverName: "曹操测试司机",
+    driverPhone: "13900139000",
+    direction: order?.phase === "IN_TRIP" ? 88 : 15,
+    latitude: coordinate.latitude,
+    longitude: coordinate.longitude,
+    speedKph: order?.phase === "ARRIVED_AT_PICKUP" ? 0 : 28,
+    vehicleBrand: "几何",
+    vehicleColor: "白色",
+    vehiclePlate: "浙A·TEST",
+  };
+};
+
 const phaseEvent = (phase: FakeCaocaoOrderState["phase"]): number => {
-  if (phase === "ACCEPTED") return 20;
-  if (phase === "IN_TRIP") return 23;
-  if (phase === "FINISHED") return 25;
-  if (phase === "CANCELLED") return 40;
-  return 1;
+  if (phase === "ACCEPTED") return 1;
+  if (phase === "ARRIVED_AT_PICKUP") return 3;
+  if (phase === "IN_TRIP") return 4;
+  if (phase === "FINISHED") return 6;
+  if (phase === "CANCELLED") return 21;
+  return 14;
 };
 
 const parseOrderPhase = (phase: string | null): FakeCaocaoOrderPhase | null => {
   if (
     phase === "CREATED" ||
     phase === "ACCEPTED" ||
+    phase === "ARRIVED_AT_PICKUP" ||
     phase === "IN_TRIP" ||
     phase === "FINISHED" ||
     phase === "CANCELLED"
@@ -194,17 +225,151 @@ const parseOrderPhase = (phase: string | null): FakeCaocaoOrderPhase | null => {
   return null;
 };
 
+const readOptionalCoordinateParam = (
+  params: Record<string, string>,
+  keys: { latitude: string[]; longitude: string[] },
+): FakeCaocaoCoordinate | null => {
+  const latitudeRaw = readFirstParam(params, keys.latitude);
+  const longitudeRaw = readFirstParam(params, keys.longitude);
+  const latitude = latitudeRaw === null ? Number.NaN : Number(latitudeRaw);
+  const longitude = longitudeRaw === null ? Number.NaN : Number(longitudeRaw);
+  if (!Number.isFinite(latitude) || !Number.isFinite(longitude)) return null;
+  return { latitude, longitude };
+};
+
+const routePolyline = (order: FakeCaocaoOrderState): FakeCaocaoCoordinate[] => {
+  if (order.phase === "ACCEPTED") {
+    return [driverCoordinate(order), order.origin];
+  }
+  if (order.phase === "IN_TRIP") {
+    return [
+      driverCoordinate(order),
+      interpolateCoordinate(order.origin, order.destination, 0.72),
+      order.destination,
+    ];
+  }
+  return [];
+};
+
+const formatRouteCoordinates = (coordinates: FakeCaocaoCoordinate[]): string =>
+  coordinates.map((point) => `${point.latitude},${point.longitude}`).join(";");
+
+const navigationPolylineType = (order: FakeCaocaoOrderState): number => {
+  if (order.phase === "ACCEPTED") return 1;
+  if (order.phase === "ARRIVED_AT_PICKUP") return 2;
+  if (order.phase === "IN_TRIP") return 3;
+  return 2;
+};
+
+const driverLocationPayload = (order: FakeCaocaoOrderState): unknown => {
+  const driver = driverSnapshot(order);
+  return {
+    direction: driver.direction,
+    latitude: driver.latitude,
+    longitude: driver.longitude,
+    speed: driver.speedKph,
+  };
+};
+
+const driverPolylinePayload = (order: FakeCaocaoOrderState): unknown => {
+  const polyline = routePolyline(order);
+  const driver = driverSnapshot(order);
+  return {
+    allLength: order.phase === "ACCEPTED" ? 820 : order.phase === "IN_TRIP" ? 4300 : 0,
+    allTime: order.phase === "ACCEPTED" ? 240 : order.phase === "IN_TRIP" ? 900 : 0,
+    driverEtaInfoVO: {
+      direction: driver.direction,
+      isMatchNaviPath: 1,
+      lat: driver.latitude,
+      lng: driver.longitude,
+      remainDistance: order.phase === "ACCEPTED" ? 820 : order.phase === "IN_TRIP" ? 4300 : 0,
+      remainLightCount: order.phase === "IN_TRIP" ? 3 : 0,
+      remainTime: order.phase === "ACCEPTED" ? 240 : order.phase === "IN_TRIP" ? 900 : 0,
+      speed: driver.speedKph,
+      timestamp: String(Date.now()),
+    },
+    navigationPolylineType: navigationPolylineType(order),
+    orderNo: order.providerOrderId,
+    pathId: `${order.providerOrderId}-fake-path`,
+    steps:
+      polyline.length > 0
+        ? [
+            {
+              length: order.phase === "ACCEPTED" ? 820 : 4300,
+              links: [
+                {
+                  coords: formatRouteCoordinates(polyline),
+                  length: order.phase === "ACCEPTED" ? 820 : 4300,
+                  time: order.phase === "ACCEPTED" ? 240 : 900,
+                },
+              ],
+              time: order.phase === "ACCEPTED" ? 240 : 900,
+            },
+          ]
+        : [],
+  };
+};
+
 const orderDetailPayload = (order: FakeCaocaoOrderState): unknown => {
   const driver =
-    order.phase === "ACCEPTED" || order.phase === "IN_TRIP" || order.phase === "FINISHED"
-      ? driverSnapshot()
+    order.phase === "ACCEPTED" ||
+    order.phase === "ARRIVED_AT_PICKUP" ||
+    order.phase === "IN_TRIP" ||
+    order.phase === "FINISHED"
+      ? driverSnapshot(order)
       : null;
+  const statusCode =
+    order.phase === "CREATED"
+      ? "1"
+      : order.phase === "ACCEPTED"
+        ? "9"
+        : order.phase === "ARRIVED_AT_PICKUP"
+          ? "12"
+          : order.phase === "IN_TRIP"
+            ? "3"
+            : order.phase === "FINISHED"
+              ? "5"
+              : "20";
   return {
     actual_price: order.phase === "FINISHED" ? order.finalAmountFen : null,
+    basicOrderVO: {
+      endName: "Fake Destination",
+      estimatePrice: order.finalAmountFen - 400,
+      extOrderId: order.externalOrderId,
+      fromLocation: {
+        lat: order.origin.latitude,
+        lng: order.origin.longitude,
+      },
+      orderId: order.providerOrderId,
+      startName: "Fake Origin",
+      status: statusCode,
+      toLocation: {
+        lat: order.destination.latitude,
+        lng: order.destination.longitude,
+      },
+    },
     driver,
+    driverInfoVO: driver
+      ? {
+          carBrand: driver.vehicleBrand,
+          card: driver.vehiclePlate,
+          color: driver.vehicleColor,
+          location: {
+            direction: driver.direction,
+            latitude: driver.latitude,
+            longitude: driver.longitude,
+            speed: driver.speedKph,
+          },
+          name: driver.driverName,
+          phone: driver.driverPhone,
+        }
+      : null,
     event: phaseEvent(order.phase),
     ext_order_id: order.externalOrderId,
     finalAmountFen: order.phase === "FINISHED" ? order.finalAmountFen : null,
+    orderFeeVO: {
+      totalFee: order.phase === "FINISHED" ? order.finalAmountFen : null,
+    },
     orderNo: order.providerOrderId,
     order_id: order.providerOrderId,
     phase: order.phase,
@@ -226,9 +391,10 @@ const buildCallbackForm = (input: {
 }): URLSearchParams => {
   const driver =
     input.order.phase === "ACCEPTED" ||
+    input.order.phase === "ARRIVED_AT_PICKUP" ||
     input.order.phase === "IN_TRIP" ||
     input.order.phase === "FINISHED"
-      ? driverSnapshot()
+      ? driverSnapshot(input.order)
       : null;
   const unsigned: FakeCaocaoSignedParams = {
     event: String(input.event),
@@ -299,7 +465,7 @@ const maybePostCreateCallback = (input: {
   setTimeout(() => {
     postCallback({
       callbackUrl: input.callbackUrl!,
-      event: 20,
+      event: phaseEvent(acceptedOrder.phase),
       fixture: input.fixture,
       order: acceptedOrder,
     }).catch(() => undefined);
@@ -484,7 +650,15 @@ export async function handleFakeCaocaoRequest(
       const order = input.state.createOrder({
         callbackUrl,
         carType,
+        destination: readOptionalCoordinateParam(params, {
+          latitude: ["tlat", "to_lat", "toLatitude"],
+          longitude: ["tlng", "to_lng", "toLongitude"],
+        }),
         externalOrderId,
+        origin: readOptionalCoordinateParam(params, {
+          latitude: ["flat", "from_lat", "fromLatitude"],
+          longitude: ["flng", "from_lng", "fromLongitude"],
+        }),
       });
       maybePostCreateCallback({
         callbackUrl,
@@ -517,6 +691,32 @@ export async function handleFakeCaocaoRequest(
       return;
     }
 
+    if (url.pathname === "/common/queryDriverLocationByOrderId") {
+      const providerOrderId = readFirstParam(params, ["order_id", "order_no"]);
+      const order = providerOrderId ? input.state.findOrder(providerOrderId) : null;
+      sendJson(
+        res,
+        200,
+        order
+          ? caocaoSuccess(driverLocationPayload(order))
+          : caocaoFailure(40401, "Fake Caocao order not found"),
+      );
+      return;
+    }
+
+    if (url.pathname === "/common/queryDriverPolylineV2" && req.method === "POST") {
+      const providerOrderId = readFirstParam(params, ["order_id", "order_no"]);
+      const order = providerOrderId ? input.state.findOrder(providerOrderId) : null;
+      sendJson(
+        res,
+        200,
+        order
+          ? caocaoSuccess(driverPolylinePayload(order))
+          : caocaoFailure(40401, "Fake Caocao order not found"),
+      );
+      return;
+    }
+
     if (url.pathname === "/common/queryCancelFee") {
       const providerOrderId = readFirstParam(params, ["order_no", "order_id"]);
       const order = providerOrderId ? input.state.findOrder(providerOrderId) : null;
diff --git a/packages/fake-caocao-server/src/server.test.ts b/packages/fake-caocao-server/src/server.test.ts
index 23d0675f0..b82624cf8 100644
--- a/packages/fake-caocao-server/src/server.test.ts
+++ b/packages/fake-caocao-server/src/server.test.ts
@@ -139,6 +139,56 @@ describe("startFakeCaocaoServer", () => {
     expect(detailAfterAdvanceBody.success).toBe(true);
     expect(detailAfterAdvanceBody.data.phase).toBe("ACCEPTED");
 
+    const driverLocationResponse = await fetch(
+      `${server.origin}/common/queryDriverLocationByOrderId?${signedSearchParams({
+        clientId: server.fixture.clientId,
+        params: {
+          order_id: createBody.data.orderNo,
+          timestamp: "3-driver-location",
+        },
+        signKey: server.fixture.signKey,
+      }).toString()}`,
+    );
+    const driverLocationBody = (await driverLocationResponse.json()) as {
+      code: number;
+      data: { direction: number; latitude: number; longitude: number };
+      success: boolean;
+    };
+
+    expect(driverLocationResponse.ok).toBe(true);
+    expect(driverLocationBody.success).toBe(true);
+    expect(driverLocationBody.data.latitude).toBeTypeOf("number");
+    expect(driverLocationBody.data.longitude).toBeTypeOf("number");
+
+    const driverPolylineResponse = await fetch(`${server.origin}/common/queryDriverPolylineV2`, {
+      body: signedSearchParams({
+        clientId: server.fixture.clientId,
+        params: {
+          order_id: createBody.data.orderNo,
+          timestamp: "3-driver-polyline",
+        },
+        signKey: server.fixture.signKey,
+      }).toString(),
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+      method: "POST",
+    });
+    const driverPolylineBody = (await driverPolylineResponse.json()) as {
+      code: number;
+      data: {
+        driverEtaInfoVO: { lat: number; lng: number };
+        navigationPolylineType: number;
+        steps: Array<{ links: Array<{ coords: string }> }>;
+      };
+      success: boolean;
+    };
+
+    expect(driverPolylineResponse.ok).toBe(true);
+    expect(driverPolylineBody.success).toBe(true);
+    expect(driverPolylineBody.data.navigationPolylineType).toBe(1);
+    expect(driverPolylineBody.data.steps[0]?.links[0]?.coords).toContain(";");
+
     const invalidPhaseResponse = await fetch(
       `${server.origin}/__fake_caocao/orders/${createBody.data.orderNo}/phase?phase=BOARDING`,
       {
diff --git a/packages/fake-caocao-server/src/state.test.ts b/packages/fake-caocao-server/src/state.test.ts
index 7456c8cb4..0637f9e74 100644
--- a/packages/fake-caocao-server/src/state.test.ts
+++ b/packages/fake-caocao-server/src/state.test.ts
@@ -21,10 +21,12 @@ describe("FakeCaocaoState", () => {
     expect(state.findOrder(created.providerOrderId)?.phase).toBe("CREATED");
 
     const accepted = state.advanceOrderPhase(created.providerOrderId);
+    const arrived = state.advanceOrderPhase(created.providerOrderId);
     const inTrip = state.advanceOrderPhase(created.providerOrderId);
     const finished = state.advanceOrderPhase(created.providerOrderId);
 
     expect(accepted?.phase).toBe("ACCEPTED");
+    expect(arrived?.phase).toBe("ARRIVED_AT_PICKUP");
     expect(inTrip?.phase).toBe("IN_TRIP");
     expect(finished?.phase).toBe("FINISHED");
   });
diff --git a/packages/fake-caocao-server/src/state.ts b/packages/fake-caocao-server/src/state.ts
index 9ae438dcb..61a690798 100644
--- a/packages/fake-caocao-server/src/state.ts
+++ b/packages/fake-caocao-server/src/state.ts
@@ -6,6 +6,11 @@ export type FakeCaocaoVehicleEstimate = {
   durationSeconds: number;
 };
 
+export type FakeCaocaoCoordinate = {
+  latitude: number;
+  longitude: number;
+};
+
 export type FakeCaocaoDriverSnapshot = {
   driverName: string;
   driverPhone: string;
@@ -14,9 +19,17 @@ export type FakeCaocaoDriverSnapshot = {
   vehicleColor: string;
   latitude: number;
   longitude: number;
+  direction: number;
+  speedKph: number;
 };
 
-export type FakeCaocaoOrderPhase = "CREATED" | "ACCEPTED" | "IN_TRIP" | "FINISHED" | "CANCELLED";
+export type FakeCaocaoOrderPhase =
+  | "CREATED"
+  | "ACCEPTED"
+  | "ARRIVED_AT_PICKUP"
+  | "IN_TRIP"
+  | "FINISHED"
+  | "CANCELLED";
 
 export type FakeCaocaoOrderState = {
   providerOrderId: string;
@@ -24,6 +37,8 @@ export type FakeCaocaoOrderState = {
   callbackUrl: string | null;
   carType: string;
   phase: FakeCaocaoOrderPhase;
+  origin: FakeCaocaoCoordinate;
+  destination: FakeCaocaoCoordinate;
   queryCount: number;
   finalAmountFen: number;
   cancelFeeFen: number;
@@ -68,11 +83,22 @@ const defaultEstimates = (): FakeCaocaoVehicleEstimate[] => [
   },
 ];
 
+const defaultOrigin = (): FakeCaocaoCoordinate => ({
+  latitude: 30.2688,
+  longitude: 120.1608,
+});
+
+const defaultDestination = (): FakeCaocaoCoordinate => ({
+  latitude: 30.2872,
+  longitude: 120.1766,
+});
+
 const terminalOrderPhases = new Set<FakeCaocaoOrderPhase>(["FINISHED", "CANCELLED"]);
 
 const nextOrderPhase = (phase: FakeCaocaoOrderPhase): FakeCaocaoOrderPhase => {
   if (phase === "CREATED") return "ACCEPTED";
-  if (phase === "ACCEPTED") return "IN_TRIP";
+  if (phase === "ACCEPTED") return "ARRIVED_AT_PICKUP";
+  if (phase === "ARRIVED_AT_PICKUP") return "IN_TRIP";
   if (phase === "IN_TRIP") return "FINISHED";
   return phase;
 };
@@ -183,6 +209,8 @@ export class FakeCaocaoState {
     externalOrderId: string;
     carType: string;
     callbackUrl?: string | null;
+    origin?: FakeCaocaoCoordinate | null;
+    destination?: FakeCaocaoCoordinate | null;
   }): FakeCaocaoOrderState {
     const existing = [...this.orders.values()].find(
       (order) => order.externalOrderId === input.externalOrderId,
@@ -196,8 +224,10 @@ export class FakeCaocaoState {
       callbackUrl: input.callbackUrl ?? null,
       carType: estimate.carType,
       createdAt: timestamp,
+      destination: input.destination ?? defaultDestination(),
       externalOrderId: input.externalOrderId,
       finalAmountFen: estimate.estimateAmountFen + 400,
+      origin: input.origin ?? defaultOrigin(),
       phase: "CREATED",
       providerOrderId: `CC${sanitizeProviderId(input.externalOrderId)}`,
       queryCount: 0,
@@ -249,7 +279,7 @@ export class FakeCaocaoState {
 
     const updated: FakeCaocaoOrderState = {
       ...order,
-      cancelFeeFen: order.phase === "ACCEPTED" ? 800 : 0,
+      cancelFeeFen: order.phase === "ACCEPTED" || order.phase === "ARRIVED_AT_PICKUP" ? 800 : 0,
       phase: "CANCELLED",
       updatedAt: nowIso(),
     };

From 413cb260d22b010770cc3b780bad7f3207bf337c Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Tue, 23 Jun 2026 17:15:01 +0800
Subject: [PATCH 39/94] feat(frontend): render ride-hailing order detail map
 states

- extract ride-hailing order detail content and map view-model
- add route map live markers, polylines, and fallback controls
- cover manual fake Caocao phase advancement in system scenario
---
 .../order-detail/RideHailingOrderContent.vue  | 204 +++++++++++++
 .../ride-hailing-order-map-view-model.test.ts | 181 +++++++++++
 .../ride-hailing-order-map-view-model.ts      | 218 +++++++++++++
 .../src/domains/route/ui/RouteMap.vue         |  49 +--
 .../src/pages/CommerceOrderDetailPage.vue     | 289 ++++--------------
 .../ride-hailing-ordering.scenario.test.ts    | 110 ++++++-
 6 files changed, 799 insertions(+), 252 deletions(-)
 create mode 100644 apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue
 create mode 100644 apps/frontend/src/domains/commerce/ui/order-detail/ride-hailing-order-map-view-model.test.ts
 create mode 100644 apps/frontend/src/domains/commerce/ui/order-detail/ride-hailing-order-map-view-model.ts

diff --git a/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue b/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue
new file mode 100644
index 000000000..b2642e7d5
--- /dev/null
+++ b/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue
@@ -0,0 +1,204 @@
+<template>
+  <section
+    ref="contentRoot"
+    class="ride-hailing-order-content"
+    data-testid="order-detail.ride-hailing.page"
+    :data-map-mode="orderMapViewModel.mode"
+  >
+    <RouteMap
+      class="ride-hailing-order-content__route-map"
+      data-testid="order-detail.ride-hailing.route-map"
+      :data-map-mode="orderMapViewModel.mode"
+      :route="routeForMap"
+      :planned-polyline="orderMapViewModel.plannedPolyline"
+      :extra-markers="orderMapViewModel.extraMarkers"
+      :extra-polylines="orderMapViewModel.extraPolylines"
+      :plan-route="orderMapViewModel.planRoute"
+      :show-fallback-polyline="orderMapViewModel.showFallbackPolyline"
+      :active-geometry="orderMapViewModel.activeGeometry"
+      :fit-padding="routeMapFitPadding"
+      :interactive="true"
+      variant="immersive"
+      hide-bottom-attribution
+    />
+
+    <PuFloatPanel
+      v-model="panelStop"
+      class="ride-hailing-order-content__panel"
+      :stops="panelStops"
+      position="absolute"
+      :content-padding="false"
+      aria-label="网约车订单状态面板"
+      :z-index="20"
+    >
+      <div class="ride-hailing-order-content__panel-body">
+        <pre
+          class="ride-hailing-order-content__raw-data"
+          data-testid="order-detail.ride-hailing.raw-data"
+        >{{ rawDebugData }}</pre>
+      </div>
+    </PuFloatPanel>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { PuFloatPanel, type PuFloatPanelStop } from "@partner-up-dev/design-web";
+import { computed, onMounted, onUnmounted, ref } from "vue";
+import type { CommerceOrderDetailResponse } from "@/domains/commerce/queries/useCommerce";
+import type { Route, RoutePoint } from "@/domains/route/model/route";
+import RouteMap from "@/domains/route/ui/RouteMap.vue";
+import type { MapFitPadding } from "@/shared/map/types";
+import { buildRideHailingOrderMapViewModel } from "./ride-hailing-order-map-view-model";
+
+type RideHailingDetail = NonNullable<CommerceOrderDetailResponse["rideHailing"]>;
+type RidePanelStopValue = "peek" | "normal" | "expanded";
+
+const props = defineProps<{
+  detail: CommerceOrderDetailResponse;
+  ride: RideHailingDetail;
+}>();
+
+const DEFAULT_CONTENT_HEIGHT = 720;
+
+const contentRoot = ref<HTMLElement | null>(null);
+const contentHeight = ref(DEFAULT_CONTENT_HEIGHT);
+const panelStop = ref<RidePanelStopValue>("normal");
+
+let contentResizeObserver: ResizeObserver | null = null;
+
+const updateContentHeight = (): void => {
+  const height = contentRoot.value?.getBoundingClientRect().height ?? DEFAULT_CONTENT_HEIGHT;
+  contentHeight.value = Number.isFinite(height) && height > 0 ? height : DEFAULT_CONTENT_HEIGHT;
+};
+
+onMounted(() => {
+  updateContentHeight();
+  if (typeof ResizeObserver === "undefined" || !contentRoot.value) return;
+  contentResizeObserver = new ResizeObserver(() => updateContentHeight());
+  contentResizeObserver.observe(contentRoot.value);
+});
+
+onUnmounted(() => {
+  contentResizeObserver?.disconnect();
+  contentResizeObserver = null;
+});
+
+const toRoutePoint = (place: RideHailingDetail["route"]["origin"]): RoutePoint => ({
+  bd09: null,
+  full_address: place.address ?? null,
+  gcj02: [place.latitude, place.longitude],
+  name: place.name,
+  wgs84: null,
+});
+
+const routeForMap = computed<Route>(() => [
+  toRoutePoint(props.ride.route.origin),
+  ...props.ride.route.waypoints.map(toRoutePoint),
+  toRoutePoint(props.ride.route.destination),
+]);
+
+const panelStops = computed<PuFloatPanelStop[]>(() => {
+  const rootHeight = contentHeight.value || DEFAULT_CONTENT_HEIGHT;
+  const maxPanelHeight = Math.max(180, rootHeight - 16);
+  const peek = Math.min(172, maxPanelHeight);
+  const normal = Math.min(Math.max(360, peek + 128), maxPanelHeight);
+  const expanded = Math.min(Math.max(Math.round(rootHeight * 0.72), normal + 120), maxPanelHeight);
+  return [
+    { value: "peek", label: "概览", height: peek },
+    { value: "normal", label: "详情", height: normal },
+    { value: "expanded", label: "展开", height: expanded },
+  ];
+});
+
+const activePanelStop = computed(
+  () =>
+    panelStops.value.find((stop) => stop.value === panelStop.value) ??
+    panelStops.value[1] ??
+    panelStops.value[0] ??
+    null,
+);
+
+const routeMapFitPadding = computed<MapFitPadding>(() => ({
+  top: 48,
+  right: 32,
+  bottom: (activePanelStop.value?.height ?? 360) + 32,
+  left: 32,
+}));
+
+const orderMapViewModel = computed(() =>
+  buildRideHailingOrderMapViewModel({
+    executionPhase: props.ride.executionPhase,
+    live: props.ride.live,
+    route: props.ride.route,
+  }),
+);
+
+const rawDebugData = computed(() =>
+  JSON.stringify(
+    {
+      order: props.detail.order,
+      rideHailing: props.ride,
+      bill: props.detail.bill,
+      payment: props.detail.payment,
+      mapViewModel: orderMapViewModel.value,
+    },
+    null,
+    2,
+  ),
+);
+</script>
+
+<style scoped lang="scss">
+.ride-hailing-order-content {
+  position: relative;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+
+.ride-hailing-order-content,
+.ride-hailing-order-content__route-map {
+  height: 100%;
+}
+
+.ride-hailing-order-content__route-map :deep(.route-map),
+.ride-hailing-order-content__route-map :deep(.map-shell) {
+  height: 100%;
+  border: 0;
+  border-radius: 0;
+}
+
+.ride-hailing-order-content__panel {
+  bottom: 0;
+  z-index: 20;
+  border-radius: var(--sys-radius-large) var(--sys-radius-large) 0 0;
+}
+
+.ride-hailing-order-content__panel-body {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  padding: 0 var(--sys-spacing-medium) var(--sys-spacing-medium);
+}
+
+.ride-hailing-order-content__raw-data {
+  overflow: auto;
+  max-height: calc(100dvh - 6rem);
+  margin: 0;
+  border: 1px solid var(--sys-color-outline-variant);
+  border-radius: var(--sys-radius-medium);
+  padding: var(--sys-spacing-medium);
+  background: var(--sys-color-surface-container-low);
+  color: var(--sys-color-on-surface);
+  font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.ride-hailing-order-content__raw-data::selection {
+  background: var(--sys-color-primary-container);
+  color: var(--sys-color-on-surface);
+}
+
+</style>
diff --git a/apps/frontend/src/domains/commerce/ui/order-detail/ride-hailing-order-map-view-model.test.ts b/apps/frontend/src/domains/commerce/ui/order-detail/ride-hailing-order-map-view-model.test.ts
new file mode 100644
index 000000000..a1c216929
--- /dev/null
+++ b/apps/frontend/src/domains/commerce/ui/order-detail/ride-hailing-order-map-view-model.test.ts
@@ -0,0 +1,181 @@
+import { describe, expect, test } from "vitest";
+import {
+  buildRideHailingOrderMapViewModel,
+  type RideHailingOrderMapRouteSnapshot,
+} from "./ride-hailing-order-map-view-model";
+
+const route = (): RideHailingOrderMapRouteSnapshot => ({
+  origin: {
+    latitude: 30.2912,
+    longitude: 120.212,
+  },
+  waypoints: [],
+  destination: {
+    latitude: 30.24,
+    longitude: 120.102,
+  },
+  drivingPlan: {
+    polyline: [
+      { latitude: 30.2912, longitude: 120.212 },
+      { latitude: 30.27, longitude: 120.16 },
+      { latitude: 30.24, longitude: 120.102 },
+    ],
+  },
+});
+
+describe("buildRideHailingOrderMapViewModel", () => {
+  test("centers origin while dispatching", () => {
+    const viewModel = buildRideHailingOrderMapViewModel({
+      executionPhase: "DISPATCHING",
+      live: null,
+      route: route(),
+    });
+
+    expect(viewModel.mode).toBe("SEARCHING_ORIGIN");
+    expect(viewModel.activeGeometry).toEqual({
+      kind: "marker",
+      id: "route-point-0",
+    });
+    expect(viewModel.plannedPolyline).toBeNull();
+    expect(viewModel.planRoute).toBe(false);
+    expect(viewModel.showFallbackPolyline).toBe(false);
+  });
+
+  test("uses provider pickup route and driver marker after acceptance", () => {
+    const viewModel = buildRideHailingOrderMapViewModel({
+      executionPhase: "ACCEPTED",
+      route: route(),
+      live: {
+        vehicleLocation: {
+          latitude: 30.286,
+          longitude: 120.19,
+        },
+        navigationRoute: {
+          routeKind: "PICKUP",
+          polyline: [
+            { latitude: 30.286, longitude: 120.19 },
+            { latitude: 30.2912, longitude: 120.212 },
+          ],
+        },
+      },
+    });
+
+    expect(viewModel.mode).toBe("PICKING_UP");
+    expect(viewModel.activeGeometry).toEqual({
+      kind: "polyline",
+      id: "ride-hailing-provider-route",
+    });
+    expect(viewModel.extraMarkers).toHaveLength(1);
+    expect(viewModel.extraMarkers[0]?.icon).toBe("routeDriver");
+    expect(viewModel.extraPolylines).toHaveLength(1);
+    expect(viewModel.extraPolylines[0]?.path).toEqual([
+      { lat: 30.286, lng: 120.19 },
+      { lat: 30.2912, lng: 120.212 },
+    ]);
+    expect(viewModel.plannedPolyline).toBeNull();
+  });
+
+  test("does not use provider live phase while local phase is still dispatching", () => {
+    const viewModel = buildRideHailingOrderMapViewModel({
+      executionPhase: "DISPATCHING",
+      route: route(),
+      live: {
+        phase: "ACCEPTED",
+        vehicleLocation: {
+          latitude: 30.286,
+          longitude: 120.19,
+        },
+      },
+    });
+
+    expect(viewModel.mode).toBe("SEARCHING_ORIGIN");
+    expect(viewModel.activeGeometry).toEqual({
+      kind: "marker",
+      id: "route-point-0",
+    });
+    expect(viewModel.extraMarkers).toEqual([]);
+    expect(viewModel.extraPolylines).toEqual([]);
+  });
+
+  test("shows only driver marker when the driver has arrived at pickup", () => {
+    const viewModel = buildRideHailingOrderMapViewModel({
+      executionPhase: "ARRIVED_AT_PICKUP",
+      route: route(),
+      live: {
+        vehicleLocation: {
+          latitude: 30.2912,
+          longitude: 120.212,
+        },
+        navigationRoute: {
+          routeKind: "WAITING",
+          polyline: [
+            { latitude: 30.2912, longitude: 120.212 },
+            { latitude: 30.24, longitude: 120.102 },
+          ],
+        },
+      },
+    });
+
+    expect(viewModel.mode).toBe("ARRIVED_AT_PICKUP");
+    expect(viewModel.activeGeometry).toEqual({
+      kind: "marker",
+      id: "ride-hailing-driver",
+    });
+    expect(viewModel.extraMarkers).toHaveLength(1);
+    expect(viewModel.extraPolylines).toEqual([]);
+    expect(viewModel.plannedPolyline).toBeNull();
+  });
+
+  test("uses muted planned route fallback during trip when provider route is missing", () => {
+    const viewModel = buildRideHailingOrderMapViewModel({
+      executionPhase: "IN_TRIP",
+      route: route(),
+      live: {
+        vehicleLocation: {
+          latitude: 30.27,
+          longitude: 120.16,
+        },
+        navigationRoute: null,
+      },
+    });
+
+    expect(viewModel.mode).toBe("IN_TRIP");
+    expect(viewModel.activeGeometry).toEqual({
+      kind: "marker",
+      id: "ride-hailing-driver",
+    });
+    expect(viewModel.extraMarkers).toHaveLength(1);
+    expect(viewModel.extraPolylines).toEqual([
+      {
+        id: "ride-hailing-planned-fallback",
+        path: [
+          { lat: 30.2912, lng: 120.212 },
+          { lat: 30.27, lng: 120.16 },
+          { lat: 30.24, lng: 120.102 },
+        ],
+        title: "原始规划路线",
+        tone: "muted",
+      },
+    ]);
+    expect(viewModel.plannedPolyline).toBeNull();
+  });
+
+  test("keeps planned route for terminal phases", () => {
+    const viewModel = buildRideHailingOrderMapViewModel({
+      executionPhase: "FINISHED",
+      live: null,
+      route: route(),
+    });
+
+    expect(viewModel.mode).toBe("PLANNED_ROUTE");
+    expect(viewModel.activeGeometry).toEqual({ kind: "all" });
+    expect(viewModel.extraMarkers).toEqual([]);
+    expect(viewModel.extraPolylines).toEqual([]);
+    expect(viewModel.plannedPolyline).toEqual([
+      { lat: 30.2912, lng: 120.212 },
+      { lat: 30.27, lng: 120.16 },
+      { lat: 30.24, lng: 120.102 },
+    ]);
+    expect(viewModel.planRoute).toBe(true);
+  });
+});
diff --git a/apps/frontend/src/domains/commerce/ui/order-detail/ride-hailing-order-map-view-model.ts b/apps/frontend/src/domains/commerce/ui/order-detail/ride-hailing-order-map-view-model.ts
new file mode 100644
index 000000000..0e35c09e2
--- /dev/null
+++ b/apps/frontend/src/domains/commerce/ui/order-detail/ride-hailing-order-map-view-model.ts
@@ -0,0 +1,218 @@
+import type { MapActiveGeometry, MapCoordinate, MapMarker, MapPolyline } from "@/shared/map/types";
+
+export type RideHailingOrderMapMode =
+  | "SEARCHING_ORIGIN"
+  | "PICKING_UP"
+  | "ARRIVED_AT_PICKUP"
+  | "IN_TRIP"
+  | "PLANNED_ROUTE";
+
+export type RideHailingMapExecutionPhase =
+  | "INITIATING"
+  | "DISPATCHING"
+  | "ACCEPTED"
+  | "ARRIVED_AT_PICKUP"
+  | "IN_TRIP"
+  | "FINISHED"
+  | "CANCELLED"
+  | "FAILED";
+
+export type RideHailingOrderMapCoordinateSnapshot = {
+  latitude: number;
+  longitude: number;
+};
+
+export type RideHailingOrderMapRouteSnapshot = {
+  origin: RideHailingOrderMapCoordinateSnapshot;
+  waypoints: RideHailingOrderMapCoordinateSnapshot[];
+  destination: RideHailingOrderMapCoordinateSnapshot;
+  drivingPlan?: {
+    polyline?: RideHailingOrderMapCoordinateSnapshot[] | null;
+  } | null;
+};
+
+export type RideHailingOrderMapVehicleLocation = RideHailingOrderMapCoordinateSnapshot & {
+  headingDegrees?: number | null;
+};
+
+export type RideHailingOrderMapLiveProjection = {
+  phase?: string | null;
+  vehicleLocation?: RideHailingOrderMapVehicleLocation | null;
+  navigationRoute?: {
+    routeKind?: string;
+    polyline?: readonly RideHailingOrderMapCoordinateSnapshot[] | null;
+    vehicleLocation?: RideHailingOrderMapVehicleLocation | null;
+  } | null;
+} | null;
+
+export type RideHailingOrderMapViewModel = {
+  mode: RideHailingOrderMapMode;
+  plannedPolyline: MapCoordinate[] | null;
+  planRoute: boolean;
+  showFallbackPolyline: boolean;
+  extraMarkers: MapMarker[];
+  extraPolylines: MapPolyline[];
+  activeGeometry: MapActiveGeometry;
+};
+
+const DRIVER_MARKER_ID = "ride-hailing-driver";
+const PROVIDER_ROUTE_POLYLINE_ID = "ride-hailing-provider-route";
+const PLANNED_FALLBACK_POLYLINE_ID = "ride-hailing-planned-fallback";
+const ORIGIN_MARKER_ID = "route-point-0";
+
+const toMapCoordinate = (
+  point: RideHailingOrderMapCoordinateSnapshot | null | undefined,
+): MapCoordinate | null => {
+  if (!point) return null;
+  if (!Number.isFinite(point.latitude) || !Number.isFinite(point.longitude)) return null;
+  return {
+    lat: point.latitude,
+    lng: point.longitude,
+  };
+};
+
+const toMapPolyline = (
+  points: readonly RideHailingOrderMapCoordinateSnapshot[] | null | undefined,
+): MapCoordinate[] | null => {
+  const path = points
+    ?.map(toMapCoordinate)
+    .filter((point): point is MapCoordinate => point !== null);
+  return path && path.length >= 2 ? path : null;
+};
+
+const buildPlannedPolyline = (route: RideHailingOrderMapRouteSnapshot): MapCoordinate[] | null =>
+  toMapPolyline(route.drivingPlan?.polyline);
+
+const buildDriverMarker = (
+  location: RideHailingOrderMapVehicleLocation | null,
+): MapMarker | null => {
+  const position = toMapCoordinate(location);
+  if (!position) return null;
+  return {
+    id: DRIVER_MARKER_ID,
+    position,
+    title: "司机车辆",
+    icon: "routeDriver",
+    active: true,
+  };
+};
+
+const buildProviderRoutePolyline = (path: MapCoordinate[] | null): MapPolyline | null =>
+  path
+    ? {
+        id: PROVIDER_ROUTE_POLYLINE_ID,
+        path,
+        title: "服务商实时路线",
+        tone: "routePrimary",
+        active: true,
+      }
+    : null;
+
+const buildMutedPlannedFallbackPolyline = (path: MapCoordinate[] | null): MapPolyline | null =>
+  path
+    ? {
+        id: PLANNED_FALLBACK_POLYLINE_ID,
+        path,
+        title: "原始规划路线",
+        tone: "muted",
+      }
+    : null;
+
+const resolveMode = (phase: RideHailingMapExecutionPhase): RideHailingOrderMapMode => {
+  if (phase === "ACCEPTED") return "PICKING_UP";
+  if (phase === "ARRIVED_AT_PICKUP") return "ARRIVED_AT_PICKUP";
+  if (phase === "IN_TRIP") return "IN_TRIP";
+  if (phase === "FINISHED" || phase === "CANCELLED" || phase === "FAILED") {
+    return "PLANNED_ROUTE";
+  }
+  return "SEARCHING_ORIGIN";
+};
+
+export function buildRideHailingOrderMapViewModel(input: {
+  executionPhase: RideHailingMapExecutionPhase;
+  route: RideHailingOrderMapRouteSnapshot;
+  live: RideHailingOrderMapLiveProjection;
+}): RideHailingOrderMapViewModel {
+  const mode = resolveMode(input.executionPhase);
+  const plannedPolyline = buildPlannedPolyline(input.route);
+  const liveVehicleLocation =
+    input.live?.vehicleLocation ?? input.live?.navigationRoute?.vehicleLocation ?? null;
+  const driverMarker = buildDriverMarker(liveVehicleLocation);
+  const providerRoutePath = toMapPolyline(input.live?.navigationRoute?.polyline);
+  const providerRoutePolyline = buildProviderRoutePolyline(providerRoutePath);
+
+  if (mode === "SEARCHING_ORIGIN") {
+    return {
+      activeGeometry: { kind: "marker", id: ORIGIN_MARKER_ID },
+      extraMarkers: [],
+      extraPolylines: [],
+      mode,
+      plannedPolyline: null,
+      planRoute: false,
+      showFallbackPolyline: false,
+    };
+  }
+
+  if (mode === "PICKING_UP") {
+    const hasLiveGeometry = Boolean(providerRoutePolyline || driverMarker);
+    return {
+      activeGeometry: providerRoutePolyline
+        ? { kind: "polyline", id: PROVIDER_ROUTE_POLYLINE_ID }
+        : driverMarker
+          ? { kind: "marker", id: DRIVER_MARKER_ID }
+          : { kind: "all" },
+      extraMarkers: driverMarker ? [driverMarker] : [],
+      extraPolylines: providerRoutePolyline ? [providerRoutePolyline] : [],
+      mode,
+      plannedPolyline: hasLiveGeometry ? null : plannedPolyline,
+      planRoute: !hasLiveGeometry,
+      showFallbackPolyline: !hasLiveGeometry,
+    };
+  }
+
+  if (mode === "ARRIVED_AT_PICKUP") {
+    return {
+      activeGeometry: driverMarker
+        ? { kind: "marker", id: DRIVER_MARKER_ID }
+        : { kind: "marker", id: ORIGIN_MARKER_ID },
+      extraMarkers: driverMarker ? [driverMarker] : [],
+      extraPolylines: [],
+      mode,
+      plannedPolyline: null,
+      planRoute: false,
+      showFallbackPolyline: false,
+    };
+  }
+
+  if (mode === "IN_TRIP") {
+    const mutedPlannedFallback = providerRoutePolyline
+      ? null
+      : buildMutedPlannedFallbackPolyline(plannedPolyline);
+    return {
+      activeGeometry: providerRoutePolyline
+        ? { kind: "polyline", id: PROVIDER_ROUTE_POLYLINE_ID }
+        : driverMarker
+          ? { kind: "marker", id: DRIVER_MARKER_ID }
+          : { kind: "all" },
+      extraMarkers: driverMarker ? [driverMarker] : [],
+      extraPolylines: [
+        ...(mutedPlannedFallback ? [mutedPlannedFallback] : []),
+        ...(providerRoutePolyline ? [providerRoutePolyline] : []),
+      ],
+      mode,
+      plannedPolyline: providerRoutePolyline || driverMarker ? null : plannedPolyline,
+      planRoute: !providerRoutePolyline && !driverMarker,
+      showFallbackPolyline: !providerRoutePolyline && !driverMarker,
+    };
+  }
+
+  return {
+    activeGeometry: { kind: "all" },
+    extraMarkers: [],
+    extraPolylines: [],
+    mode,
+    plannedPolyline,
+    planRoute: true,
+    showFallbackPolyline: true,
+  };
+}
diff --git a/apps/frontend/src/domains/route/ui/RouteMap.vue b/apps/frontend/src/domains/route/ui/RouteMap.vue
index ad9a7c9f0..fdbbead09 100644
--- a/apps/frontend/src/domains/route/ui/RouteMap.vue
+++ b/apps/frontend/src/domains/route/ui/RouteMap.vue
@@ -52,14 +52,6 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
-import SharedMap from "@/shared/map/Map.vue";
-import type {
-  MapActiveGeometry,
-  MapCoordinate,
-  MapFitPadding,
-  MapMarker,
-  MapPolyline,
-} from "@/shared/map/types";
 import type { Route, RoutePoint } from "@/domains/route/model/route";
 import {
   buildRouteSummary,
@@ -72,11 +64,21 @@ import {
   fetchTencentDrivingRoutePlans,
   type TencentDrivingRoutePlan,
 } from "@/domains/route/model/route-planning";
+import SharedMap from "@/shared/map/Map.vue";
+import type {
+  MapActiveGeometry,
+  MapCoordinate,
+  MapFitPadding,
+  MapMarker,
+  MapPolyline,
+} from "@/shared/map/types";
 
 const props = withDefaults(
   defineProps<{
     route: Route | null;
     plannedPolyline?: readonly MapCoordinate[] | null;
+    extraMarkers?: readonly MapMarker[];
+    extraPolylines?: readonly MapPolyline[];
     planRoute?: boolean;
     planningApiKey?: string;
     activeGeometry?: MapActiveGeometry;
@@ -89,9 +91,12 @@ const props = withDefaults(
     routePointsEditable?: boolean;
     variant?: "inline" | "immersive";
     hideBottomAttribution?: boolean;
+    showFallbackPolyline?: boolean;
   }>(),
   {
     plannedPolyline: null,
+    extraMarkers: () => [],
+    extraPolylines: () => [],
     planRoute: true,
     planningApiKey: undefined,
     activeGeometry: null,
@@ -104,6 +109,7 @@ const props = withDefaults(
     routePointsEditable: false,
     variant: "inline",
     hideBottomAttribution: false,
+    showFallbackPolyline: true,
   },
 );
 
@@ -172,12 +178,7 @@ const buildPointMarker = ({
     position,
     calloutLabel: props.routePointsEditable ? `${title} ›` : title,
     title,
-    icon:
-      role === "departure"
-        ? "routeStart"
-        : role === "arrival"
-          ? "routeEnd"
-          : "routeWaypoint",
+    icon: role === "departure" ? "routeStart" : role === "arrival" ? "routeEnd" : "routeWaypoint",
   };
 };
 
@@ -211,7 +212,7 @@ const handleMarkerClick = (markerId: string) => {
   emit("routePointClick", index);
 };
 
-const markers = computed<MapMarker[]>(() => {
+const routeMarkers = computed<MapMarker[]>(() => {
   const primaryPlan = routePlanningPrimary.value;
   if (!primaryPlan || primaryPlan.polyline.length < 2) {
     return fallbackMarkers.value;
@@ -247,7 +248,9 @@ const markers = computed<MapMarker[]>(() => {
   ];
 });
 
-const polylines = computed<MapPolyline[]>(() => {
+const markers = computed<MapMarker[]>(() => [...routeMarkers.value, ...props.extraMarkers]);
+
+const routePolylines = computed<MapPolyline[]>(() => {
   if (externalPlannedPolyline.value) {
     return [
       {
@@ -279,15 +282,19 @@ const polylines = computed<MapPolyline[]>(() => {
     return [];
   }
 
+  if (!props.showFallbackPolyline) {
+    return [];
+  }
+
   return projection.value.polylines.map((polyline) => ({
     ...polyline,
     tone: "routeInvalid",
   }));
 });
 
-const hasGeometry = computed(
-  () => markers.value.length > 0 || polylines.value.length > 0,
-);
+const polylines = computed<MapPolyline[]>(() => [...routePolylines.value, ...props.extraPolylines]);
+
+const hasGeometry = computed(() => markers.value.length > 0 || polylines.value.length > 0);
 
 const clearPlanning = () => {
   planningAbortController.value?.abort();
@@ -341,9 +348,7 @@ const formatPointLabel = (point: RoutePoint, index: number): string => {
     index: index + 1,
   });
   const address = point.full_address?.trim() ?? "";
-  return address.length > 0
-    ? `${name || fallback} · ${address}`
-    : name || fallback;
+  return address.length > 0 ? `${name || fallback} · ${address}` : name || fallback;
 };
 </script>
 
diff --git a/apps/frontend/src/pages/CommerceOrderDetailPage.vue b/apps/frontend/src/pages/CommerceOrderDetailPage.vue
index 0ea0528f4..e9a5d9db0 100644
--- a/apps/frontend/src/pages/CommerceOrderDetailPage.vue
+++ b/apps/frontend/src/pages/CommerceOrderDetailPage.vue
@@ -1,6 +1,8 @@
 <template>
   <PuPageScaffold
     viewport="screen"
+    width="full"
+    padding="none"
     class="order-detail-page"
     data-testid="order-detail.page"
   >
@@ -26,7 +28,10 @@
       </PuPageHeader>
     </template>
 
-    <div class="order-detail-page__body">
+    <div
+      class="order-detail-page__body"
+      :class="{ 'order-detail-page__body--immersive': rideHailingDetail }"
+    >
       <PuInlineNotice
         v-if="orderId === null"
         tone="error"
@@ -49,123 +54,41 @@
       </div>
 
       <template v-else-if="detail">
-        <PuCard as="section" gap="md">
-          <div class="order-detail-page__section-heading">
-            <p class="order-detail-page__eyebrow">Order</p>
-            <h2 data-testid="order-detail.item-name">{{ primaryItemName }}</h2>
-          </div>
-
-          <div class="order-detail-page__facts">
-            <div>
-              <span>订单状态</span>
-              <strong data-testid="order-detail.order-status">
-                {{ orderStatusLabel }}
-              </strong>
-            </div>
-            <div>
-              <span>服务时间</span>
-              <strong data-testid="order-detail.service-window">
-                {{ serviceWindowLabel }}
-              </strong>
-            </div>
-            <div>
-              <span>参与人数</span>
-              <strong data-testid="order-detail.participant-count">
-                {{ participantCountLabel }}
-              </strong>
-            </div>
-          </div>
-        </PuCard>
+        <RideHailingOrderContent
+          v-if="rideHailingDetail"
+          :detail="detail"
+          :ride="rideHailingDetail"
+        />
 
-        <template v-if="rideHailingDetail">
-          <section
-            class="order-detail-page__ride"
-            data-testid="order-detail.ride-hailing.page"
-          >
-            <div
-              class="order-detail-page__ride-map"
-              data-testid="order-detail.ride-hailing.route-map"
-            >
-              <div class="order-detail-page__ride-polyline"></div>
-              <div
-                class="order-detail-page__ride-callout order-detail-page__ride-callout--origin"
-              >
-                {{ rideHailingDetail.route.origin.name }}
-              </div>
-              <div
-                class="order-detail-page__ride-callout order-detail-page__ride-callout--destination"
-              >
-                {{ rideHailingDetail.route.destination.name }}
-              </div>
+        <div v-else class="order-detail-page__document-body">
+          <PuCard as="section" gap="md">
+            <div class="order-detail-page__section-heading">
+              <p class="order-detail-page__eyebrow">Order</p>
+              <h2 data-testid="order-detail.item-name">{{ primaryItemName }}</h2>
             </div>
 
-            <PuCard as="section" gap="md">
-              <div class="order-detail-page__section-heading">
-                <p class="order-detail-page__eyebrow">Ride</p>
-                <h2 data-testid="order-detail.ride-hailing.status">
-                  {{ rideStatusLabel }}
-                </h2>
+            <div class="order-detail-page__facts">
+              <div>
+                <span>订单状态</span>
+                <strong data-testid="order-detail.order-status">
+                  {{ orderStatusLabel }}
+                </strong>
               </div>
-
-              <div class="order-detail-page__facts">
-                <div>
-                  <span>车型</span>
-                  <strong
-                    data-testid="order-detail.ride-hailing.selected-vehicle"
-                  >
-                    {{ rideHailingDetail.selectedVehicleName }}
-                  </strong>
-                </div>
-                <div>
-                  <span>路线</span>
-                  <strong data-testid="order-detail.ride-hailing.route-summary">
-                    {{ rideRouteSummary }}
-                  </strong>
-                </div>
-                <div>
-                  <span>乘客</span>
-                  <strong data-testid="order-detail.ride-hailing.passengers">
-                    {{ ridePassengersLabel }}
-                  </strong>
-                </div>
-                <div
-                  v-if="
-                    rideHailingDetail.driver || rideHailingDetail.live?.driver
-                  "
-                >
-                  <span>司机</span>
-                  <strong data-testid="order-detail.ride-hailing.driver">
-                    {{ rideDriverLabel }}
-                  </strong>
-                </div>
-                <div
-                  v-if="
-                    rideHailingDetail.vehicle || rideHailingDetail.live?.vehicle
-                  "
-                >
-                  <span>车辆</span>
-                  <strong data-testid="order-detail.ride-hailing.vehicle">
-                    {{ rideVehicleLabel }}
-                  </strong>
-                </div>
+              <div>
+                <span>服务时间</span>
+                <strong data-testid="order-detail.service-window">
+                  {{ serviceWindowLabel }}
+                </strong>
               </div>
+              <div>
+                <span>参与人数</span>
+                <strong data-testid="order-detail.participant-count">
+                  {{ participantCountLabel }}
+                </strong>
+              </div>
+            </div>
+          </PuCard>
 
-              <PuButton
-                v-if="detail.bill"
-                :action="{ to: { path: `/bills/${detail.bill.id}` } }"
-                shape="rect"
-                tone="primary"
-                variant="solid"
-                size="lg"
-                data-testid="order-detail.ride-hailing.bill-detail-link"
-              >
-                查看账单并支付
-              </PuButton>
-            </PuCard>
-          </section>
-        </template>
-
-        <template v-else>
           <PuCard as="section" gap="md">
             <div class="order-detail-page__section-heading">
               <p class="order-detail-page__eyebrow">Bill</p>
@@ -222,7 +145,8 @@
 
             <PuButton
               v-if="detail.cancellation.canRequest"
-              tone="danger" variant="outline"
+              tone="danger"
+              variant="outline"
               :loading="cancelMutation.isPending.value"
               data-testid="order-detail.cancel-rental"
               @click="cancelRentalOrder"
@@ -263,7 +187,8 @@
             <PuButton
               v-if="canConfirmRentalBooking"
               size="lg"
-              tone="secondary" variant="solid"
+              tone="secondary"
+              variant="solid"
               :loading="confirmationMutation.isPending.value"
               data-testid="order-detail.mock-rental-confirm"
               @click="simulateBookingConfirmation"
@@ -279,15 +204,13 @@
               data-testid="order-detail.rental.booking-confirmed"
             />
           </PuCard>
-        </template>
+        </div>
       </template>
     </div>
   </PuPageScaffold>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted } from "vue";
-import { useRoute } from "vue-router";
 import {
   PuButton,
   PuCard,
@@ -295,13 +218,16 @@ import {
   PuPageHeader,
   PuPageScaffold,
 } from "@partner-up-dev/design-web";
-import { useFallbackBack } from "@/shared/routing/useFallbackBack";
+import { computed, onMounted, onUnmounted } from "vue";
+import { useRoute } from "vue-router";
 import {
   type CommerceOrderDetailResponse,
   useCancelRentalOrder,
   useCommerceOrderDetail,
   useMockRentalBookingConfirmation,
 } from "@/domains/commerce/queries/useCommerce";
+import RideHailingOrderContent from "@/domains/commerce/ui/order-detail/RideHailingOrderContent.vue";
+import { useFallbackBack } from "@/shared/routing/useFallbackBack";
 
 type OrderItemSnapshot = CommerceOrderDetailResponse["order"]["items"][number];
 type OrderSkuSnapshot = Extract<OrderItemSnapshot, { kind?: "FIXED"; sku: unknown }>["sku"];
@@ -355,12 +281,7 @@ const orderStatusLabel = computed(() => {
   return detail.value?.order.status ?? "未知";
 });
 
-const participantCountLabel = computed(() => {
-  if (rideHailingDetail.value) {
-    return `${rideHailingDetail.value.riders.length} 人`;
-  }
-  return `${detail.value?.order.participantCount ?? 0} 人`;
-});
+const participantCountLabel = computed(() => `${detail.value?.order.participantCount ?? 0} 人`);
 
 const fulfillmentStatusLabel = computed(() => {
   if (detail.value?.order.status === "CANCELLED") {
@@ -412,55 +333,11 @@ const backFallbackTo = computed(() => ({ path: "/" }));
 const { handleBack } = useFallbackBack(backFallbackTo);
 
 const serviceWindowLabel = computed(() => {
-  if (rideHailingDetail.value) {
-    return rideHailingDetail.value.departureAt
-      ? `${formatDateTime(rideHailingDetail.value.departureAt)} 出发`
-      : "现在出发";
-  }
   const start = detail.value?.order.serviceStartAt ?? null;
   const end = detail.value?.order.serviceEndAt ?? null;
   return `${formatDateTime(start)} - ${formatDateTime(end)}`;
 });
 
-const rideStatusLabel = computed(() => {
-  const ride = rideHailingDetail.value;
-  if (!ride) return "未知状态";
-  if (ride.live?.statusLabel) return ride.live.statusLabel;
-  if (detail.value?.order.status === "FAILED") return "呼叫失败";
-  if (ride.executionPhase === "FINISHED") return "待支付";
-  if (ride.executionPhase === "CANCELLED") return "已取消";
-  if (ride.executionPhase === "FAILED") return "呼叫失败";
-  if (ride.executionPhase === "IN_TRIP") return "行程中";
-  if (ride.executionPhase === "ACCEPTED") return "已接单";
-  if (ride.executionPhase === "DISPATCHING") return "正在呼叫";
-  return "正在创建";
-});
-
-const rideRouteSummary = computed(() => {
-  const route = rideHailingDetail.value?.route;
-  if (!route) return "路线待确认";
-  const waypoints = route.waypoints.map((point) => point.name);
-  return [route.origin.name, ...waypoints, route.destination.name].join(" → ");
-});
-
-const ridePassengersLabel = computed(() => {
-  const riders = rideHailingDetail.value?.riders ?? [];
-  if (riders.length === 0) return "同乘人待确认";
-  return `同乘人：${riders.map((rider) => rider.displayName).join("、")}`;
-});
-
-const rideDriverLabel = computed(() => {
-  const driver = rideHailingDetail.value?.driver ?? rideHailingDetail.value?.live?.driver;
-  if (!driver) return "";
-  return [driver.driverName, driver.driverPhone].filter(Boolean).join(" ");
-});
-
-const rideVehicleLabel = computed(() => {
-  const vehicle = rideHailingDetail.value?.vehicle ?? rideHailingDetail.value?.live?.vehicle;
-  if (!vehicle) return "";
-  return [vehicle.plate, vehicle.color, vehicle.brand].filter(Boolean).join(" ");
-});
-
 const orderErrorMessage = computed(() =>
   orderQuery.error.value instanceof Error ? orderQuery.error.value.message : "加载订单失败。",
 );
@@ -512,7 +389,6 @@ onUnmounted(() => {
 <style scoped lang="scss">
 .order-detail-page {
   min-width: 0;
-  --pu-page-max-width: 44rem;
 }
 
 .order-detail-page__body {
@@ -520,8 +396,25 @@ onUnmounted(() => {
   flex: 1 1 auto;
   flex-direction: column;
   gap: var(--sys-spacing-medium);
+  width: 100%;
   min-height: 0;
   overflow: auto;
+  padding: var(--sys-spacing-medium);
+}
+
+.order-detail-page__body--immersive {
+  gap: 0;
+  overflow: hidden;
+  padding: 0;
+}
+
+.order-detail-page__document-body {
+  display: flex;
+  width: min(100%, var(--pu-page-max-width, 44rem));
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--sys-spacing-medium);
+  margin: 0 auto;
   padding-bottom: var(--sys-spacing-medium);
 }
 
@@ -562,11 +455,11 @@ onUnmounted(() => {
 
   div {
     display: flex;
+    min-width: 0;
     justify-content: space-between;
     gap: var(--sys-spacing-medium);
-    min-width: 0;
-    padding: var(--sys-spacing-small);
     border-radius: var(--sys-radius-small);
+    padding: var(--sys-spacing-small);
     background: var(--sys-color-surface-container-high);
   }
 
@@ -580,64 +473,12 @@ onUnmounted(() => {
   }
 }
 
-.order-detail-page__ride {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sys-spacing-medium);
-}
-
-.order-detail-page__ride-map {
-  position: relative;
-  min-height: 18rem;
-  overflow: hidden;
-  border-radius: var(--sys-radius-medium);
-  background:
-    linear-gradient(135deg, rgb(226 236 229 / 0.95), rgb(223 232 241 / 0.96)),
-    repeating-linear-gradient(
-      45deg,
-      rgb(255 255 255 / 0.36) 0,
-      rgb(255 255 255 / 0.36) 0.5rem,
-      transparent 0.5rem,
-      transparent 2rem
-    );
-}
-
-.order-detail-page__ride-polyline {
-  position: absolute;
-  inset: 27% 18% 30% 18%;
-  border-bottom: 0.28rem solid var(--sys-color-primary);
-  border-left: 0.28rem solid var(--sys-color-primary);
-  border-radius: 0 0 0 5rem;
-}
-
-.order-detail-page__ride-callout {
-  position: absolute;
-  max-width: min(74%, 18rem);
-  min-height: 2.5rem;
-  border: 1px solid var(--sys-color-outline-variant);
-  border-radius: var(--sys-radius-small);
-  padding: var(--sys-spacing-xsmall) var(--sys-spacing-small);
-  background: var(--sys-color-surface);
-  color: var(--sys-color-on-surface);
-  box-shadow: var(--sys-shadow-2);
-}
-
-.order-detail-page__ride-callout--origin {
-  top: 16%;
-  left: 10%;
-}
-
-.order-detail-page__ride-callout--destination {
-  right: 10%;
-  bottom: 15%;
-}
-
 .order-detail-page__policy {
   display: flex;
   flex-direction: column;
   gap: var(--sys-spacing-xsmall);
-  padding: var(--sys-spacing-small);
   border-radius: var(--sys-radius-small);
+  padding: var(--sys-spacing-small);
   background: var(--sys-color-surface-container-high);
 
   p {
diff --git a/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts b/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
index 0b949e848..ee03ee64b 100644
--- a/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
+++ b/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
@@ -141,6 +141,65 @@ async function readFakeCaocaoOrders(): Promise<
   });
 }
 
+async function advanceLatestFakeCaocaoOrder(): Promise<{
+  providerOrderId: string;
+  phase: string;
+}> {
+  const { fakeCaocao } = getScenarioEnvironment();
+  const response = await fetch(new URL("/__fake_caocao/orders/latest/advance", fakeCaocao.origin), {
+    method: "POST",
+  });
+  assert.equal(response.ok, true);
+  const body = (await response.json()) as {
+    order?: {
+      providerOrderId?: unknown;
+      phase?: unknown;
+    };
+  };
+  assert.equal(typeof body.order?.providerOrderId, "string");
+  assert.equal(typeof body.order?.phase, "string");
+  return {
+    phase: body.order.phase,
+    providerOrderId: body.order.providerOrderId,
+  };
+}
+
+async function setFakeCaocaoOrderPhase(input: {
+  providerOrderId: string;
+  phase: "ACCEPTED" | "ARRIVED_AT_PICKUP" | "IN_TRIP" | "FINISHED";
+}): Promise<{
+  providerOrderId: string;
+  phase: string;
+}> {
+  const { fakeCaocao } = getScenarioEnvironment();
+  const response = await fetch(
+    new URL(
+      `/__fake_caocao/orders/${encodeURIComponent(input.providerOrderId)}/phase`,
+      fakeCaocao.origin,
+    ),
+    {
+      body: new URLSearchParams({ phase: input.phase }).toString(),
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+      method: "POST",
+    },
+  );
+  assert.equal(response.ok, true);
+  const body = (await response.json()) as {
+    order?: {
+      providerOrderId?: unknown;
+      phase?: unknown;
+    };
+  };
+  assert.equal(typeof body.order?.providerOrderId, "string");
+  assert.equal(typeof body.order?.phase, "string");
+  return {
+    phase: body.order.phase,
+    providerOrderId: body.order.providerOrderId,
+  };
+}
+
 async function expireCommerceQuotes(): Promise<number> {
   const before = await db.select().from(commerceQuotes);
   await db.update(commerceQuotes).set({
@@ -498,23 +557,36 @@ async function assertRideHailingOrderDetail(page: Page): Promise<void> {
     state: "visible",
     timeout: 10_000,
   });
+  const rawData = page.getByTestId("order-detail.ride-hailing.raw-data");
   await assertLocatorTextIncludes({
-    actual: page.getByTestId("order-detail.ride-hailing.selected-vehicle").textContent(),
+    actual: rawData.textContent(),
     expected: "系统曹操快车",
-    label: "RideHailing selected vehicle",
+    label: "RideHailing raw selected vehicle",
   });
   await assertLocatorTextIncludes({
-    actual: page.getByTestId("order-detail.ride-hailing.route-summary").textContent(),
+    actual: rawData.textContent(),
     expected: "杭州东站",
-    label: "RideHailing route summary origin",
+    label: "RideHailing raw route summary origin",
   });
   await assertLocatorTextIncludes({
-    actual: page.getByTestId("order-detail.ride-hailing.route-summary").textContent(),
+    actual: rawData.textContent(),
     expected: "灵隐寺",
-    label: "RideHailing route summary destination",
+    label: "RideHailing raw route summary destination",
   });
 }
 
+async function waitForRideHailingMapMode(
+  page: Page,
+  mode: "SEARCHING_ORIGIN" | "PICKING_UP" | "ARRIVED_AT_PICKUP" | "IN_TRIP" | "PLANNED_ROUTE",
+): Promise<void> {
+  await page
+    .locator(`[data-testid="order-detail.ride-hailing.page"][data-map-mode="${mode}"]`)
+    .waitFor({
+      state: "visible",
+      timeout: 10_000,
+    });
+}
+
 scenario("commerce_ride_hailing_ordering_reaches_order_detail", async (ctx) => {
   await resetFakeCaocao();
   const creator = await givenUser("system-ride-hailing-creator", {
@@ -554,6 +626,32 @@ scenario("commerce_ride_hailing_ordering_reaches_order_detail", async (ctx) => {
     const fakeOrders = await readFakeCaocaoOrders();
     assert.equal(fakeOrders.length, 1);
     assert.equal(fakeOrders[0]?.phase, "ACCEPTED");
+    await waitForRideHailingMapMode(page, "SEARCHING_ORIGIN");
+
+    const acceptedOrder = await setFakeCaocaoOrderPhase({
+      providerOrderId: fakeOrders[0].providerOrderId,
+      phase: "ACCEPTED",
+    });
+    assert.equal(acceptedOrder.phase, "ACCEPTED");
+    await waitForRideHailingMapMode(page, "PICKING_UP");
+
+    const arrivedOrder = await advanceLatestFakeCaocaoOrder();
+    assert.equal(arrivedOrder.phase, "ARRIVED_AT_PICKUP");
+    await waitForRideHailingMapMode(page, "ARRIVED_AT_PICKUP");
+
+    const inTripOrder = await advanceLatestFakeCaocaoOrder();
+    assert.equal(inTripOrder.phase, "IN_TRIP");
+    await waitForRideHailingMapMode(page, "IN_TRIP");
+
+    const finishedOrder = await advanceLatestFakeCaocaoOrder();
+    assert.equal(finishedOrder.phase, "FINISHED");
+    await waitForRideHailingMapMode(page, "PLANNED_ROUTE");
+    await assertLocatorTextIncludes({
+      actual: page.getByTestId("order-detail.ride-hailing.raw-data").textContent(),
+      expected: '"bill"',
+      label: "RideHailing raw data includes bill after finished",
+    });
+
     orderPath = new URL(page.url()).pathname;
   });
 

From b568eefa07970977bd500bfd73cc06fe5a0b59bd Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Tue, 23 Jun 2026 17:15:14 +0800
Subject: [PATCH 40/94] fix(map): respect padding for single-marker fit

- use tiny fitBounds area for single active Tencent map coordinates
- preserve the existing single-point max zoom cap
- record ride-hailing order detail map slice decisions in task packet
---
 .../map/tencent/tencent-lbs-provider.ts       |  68 +--
 tasks/ride-hailing-ui-fixes/change-log.md     | 165 ++++++
 tasks/ride-hailing-ui-fixes/control.md        |  45 +-
 tasks/ride-hailing-ui-fixes/discussion-log.md | 169 ++++++
 .../order-detail-ride-hailing-content-plan.md | 157 ++++++
 .../order-detail-ride-hailing-map-plan.md     | 486 ++++++++++++++++++
 6 files changed, 1053 insertions(+), 37 deletions(-)
 create mode 100644 tasks/ride-hailing-ui-fixes/order-detail-ride-hailing-content-plan.md
 create mode 100644 tasks/ride-hailing-ui-fixes/order-detail-ride-hailing-map-plan.md

diff --git a/apps/frontend/src/shared/map/tencent/tencent-lbs-provider.ts b/apps/frontend/src/shared/map/tencent/tencent-lbs-provider.ts
index 18f337ca3..14c32bc17 100644
--- a/apps/frontend/src/shared/map/tencent/tencent-lbs-provider.ts
+++ b/apps/frontend/src/shared/map/tencent/tencent-lbs-provider.ts
@@ -3,15 +3,16 @@ import type {
   MapCoordinate,
   MapFitPadding,
   MapGeometryTone,
-  MapMarkerIcon,
   MapMarker,
+  MapMarkerIcon,
   MapPolyline,
 } from "@/shared/map/types";
 import { loadTencentLBSSdk } from "./tencent-lbs-loader";
 import type {
+  TencentLatLng,
+  TencentLatLngBounds,
   TencentLBSMapProvider,
   TencentLBSMapProviderInput,
-  TencentLatLng,
   TencentMap,
   TencentMapOptions,
   TencentMapSdk,
@@ -28,6 +29,7 @@ const DEFAULT_CENTER: MapCoordinate = {
 };
 const DEFAULT_ZOOM = 12;
 const SINGLE_POINT_ZOOM = 15;
+const SINGLE_POINT_BOUNDS_DELTA = 0.0001;
 const TENCENT_MAP_STYLE_ID = "style1";
 
 const MARKER_COLORS: Record<MapGeometryTone | "active", string> = {
@@ -65,19 +67,30 @@ const createMarkerSvg = (color: string): string => {
 const isFiniteCoordinate = (coordinate: MapCoordinate): boolean =>
   Number.isFinite(coordinate.lat) && Number.isFinite(coordinate.lng);
 
-const toTencentLatLng = (
+const toTencentLatLng = (sdk: TencentMapSdk, coordinate: MapCoordinate): TencentLatLng =>
+  new sdk.LatLng(coordinate.lat, coordinate.lng);
+
+const createSinglePointBounds = (
   sdk: TencentMapSdk,
   coordinate: MapCoordinate,
-): TencentLatLng => new sdk.LatLng(coordinate.lat, coordinate.lng);
+): TencentLatLngBounds => {
+  // Tencent fitBounds is the viewport API that honors padding; give one point a tiny area.
+  return new sdk.LatLngBounds(
+    toTencentLatLng(sdk, {
+      lat: coordinate.lat - SINGLE_POINT_BOUNDS_DELTA,
+      lng: coordinate.lng - SINGLE_POINT_BOUNDS_DELTA,
+    }),
+    toTencentLatLng(sdk, {
+      lat: coordinate.lat + SINGLE_POINT_BOUNDS_DELTA,
+      lng: coordinate.lng + SINGLE_POINT_BOUNDS_DELTA,
+    }),
+  );
+};
 
-const resolveMarkerStyleId = (
-  marker: MapMarker,
-): MapGeometryTone | MapMarkerIcon | "active" =>
+const resolveMarkerStyleId = (marker: MapMarker): MapGeometryTone | MapMarkerIcon | "active" =>
   marker.active ? "active" : (marker.icon ?? marker.tone ?? "primary");
 
-const resolvePolylineStyleId = (
-  polyline: MapPolyline,
-): MapGeometryTone | "active" =>
+const resolvePolylineStyleId = (polyline: MapPolyline): MapGeometryTone | "active" =>
   polyline.active ? "active" : (polyline.tone ?? "primary");
 
 const createMarkerStyles = (sdk: TencentMapSdk) => ({
@@ -238,9 +251,7 @@ const toPolylineGeometries = (
     .map((polyline, index) => ({
       id: polyline.id,
       styleId: resolvePolylineStyleId(polyline),
-      paths: polyline.path
-        .filter(isFiniteCoordinate)
-        .map((point) => toTencentLatLng(sdk, point)),
+      paths: polyline.path.filter(isFiniteCoordinate).map((point) => toTencentLatLng(sdk, point)),
       rank: polyline.active ? 10_000 : index,
       properties: {
         title: polyline.title ?? polyline.id,
@@ -266,9 +277,7 @@ const collectActiveCoordinates = ({
 
   if (activeGeometry.kind === "marker") {
     const marker = markers.find((item) => item.id === activeGeometry.id);
-    return marker && isFiniteCoordinate(marker.position)
-      ? [marker.position]
-      : [];
+    return marker && isFiniteCoordinate(marker.position) ? [marker.position] : [];
   }
 
   const polyline = polylines.find((item) => item.id === activeGeometry.id);
@@ -295,24 +304,21 @@ const fitCoordinates = ({
   }
 
   const firstLatLng = toTencentLatLng(sdk, firstCoordinate);
-  if (validCoordinates.length === 1) {
-    map.easeTo(
-      {
-        center: firstLatLng,
-        zoom: Math.min(maxZoom ?? SINGLE_POINT_ZOOM, SINGLE_POINT_ZOOM),
-      },
-      { duration: 240 },
-    );
-    return;
+  const bounds =
+    validCoordinates.length === 1
+      ? createSinglePointBounds(sdk, firstCoordinate)
+      : new sdk.LatLngBounds(firstLatLng, firstLatLng);
+  if (validCoordinates.length > 1) {
+    validCoordinates.slice(1).forEach((coordinate) => {
+      bounds.extend(toTencentLatLng(sdk, coordinate));
+    });
   }
-
-  const bounds = new sdk.LatLngBounds(firstLatLng, firstLatLng);
-  validCoordinates.slice(1).forEach((coordinate) => {
-    bounds.extend(toTencentLatLng(sdk, coordinate));
-  });
   map.fitBounds(bounds, {
     padding,
-    maxZoom,
+    maxZoom:
+      validCoordinates.length === 1
+        ? Math.min(maxZoom ?? SINGLE_POINT_ZOOM, SINGLE_POINT_ZOOM)
+        : maxZoom,
     ease: { duration: 240 },
   });
 };
diff --git a/tasks/ride-hailing-ui-fixes/change-log.md b/tasks/ride-hailing-ui-fixes/change-log.md
index 628a86c58..2e8780787 100644
--- a/tasks/ride-hailing-ui-fixes/change-log.md
+++ b/tasks/ride-hailing-ui-fixes/change-log.md
@@ -535,3 +535,168 @@
   - `pnpm exec biome check packages/fake-caocao-server/src/state.ts packages/fake-caocao-server/src/routes.ts packages/fake-caocao-server/src/state.test.ts packages/fake-caocao-server/src/server.test.ts apps/frontend/src/pages/AdminRideHailingPage.vue tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
   - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
   - `git diff --check`
+
+## Slice: RideHailing Order Detail Content Redesign Planning
+
+- Added standalone plan:
+  `tasks/ride-hailing-ui-fixes/order-detail-ride-hailing-content-plan.md`.
+- Recorded current implementation facts:
+  - RideHailing detail content is still inline in `CommerceOrderDetailPage.vue`
+  - current detail map is a CSS placeholder
+  - no extracted `RideHailingOrderContent` component exists yet
+  - current scenario IDs to preserve are
+    `order-detail.ride-hailing.page`,
+    `order-detail.ride-hailing.selected-vehicle`, and
+    `order-detail.ride-hailing.route-summary`
+- Recorded target direction:
+  - use `PuPageScaffold padding="none"` for Order Detail Page
+  - extract RideHailing full-screen map / float-panel content into
+    `RideHailingOrderContent.vue`
+  - reuse shared `RouteMap` and `PuFloatPanel`
+  - keep Rental detail on the existing card-stack path
+
+## Slice: RideHailing Order Detail Content Redesign Implementation
+
+- Frontend:
+  - changed `CommerceOrderDetailPage.vue` to
+    `PuPageScaffold viewport="screen" width="full" padding="none"`
+  - kept Rental order detail on the existing document/card stack with explicit
+    page-local padding and max width
+  - extracted RideHailing order detail UI into
+    `apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue`
+  - replaced the CSS fake route illustration with shared immersive `RouteMap`
+  - added a RideHailing bottom `PuFloatPanel` with overview, detail, and
+    expanded stops
+  - preserved existing RideHailing Order Detail scenario test ids on
+    equivalent semantic nodes
+- Verification so far:
+  - `pnpm check:type:frontend`
+  - `pnpm exec biome check apps/frontend/src/pages/CommerceOrderDetailPage.vue apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue tasks/ride-hailing-ui-fixes/control.md tasks/ride-hailing-ui-fixes/discussion-log.md tasks/ride-hailing-ui-fixes/change-log.md tasks/ride-hailing-ui-fixes/order-detail-ride-hailing-content-plan.md`
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/rental-ordering.scenario.test.ts`
+
+## Slice: RideHailing Order Detail Map And Live Route Planning
+
+- Added standalone plan:
+  `tasks/ride-hailing-ui-fixes/order-detail-ride-hailing-map-plan.md`.
+- Recorded current implementation gaps:
+  - Order Detail map currently renders only persisted planned route geometry
+  - backend projection lacks provider live route, vehicle coordinate, and
+    vehicle heading
+  - local RideHailing lifecycle lacks an arrived-at-pickup phase
+  - `RouteMap` is generic and should not absorb RideHailing lifecycle semantics
+- Recorded target model:
+  - introduce typed provider order detail, driver location, and driver route
+    snapshots
+  - promote Caocao driver-location and pickup/dropoff route APIs into the
+    provider port
+  - add `ARRIVED_AT_PICKUP` to RideHailing execution phase
+  - build a pure frontend map view-model for phase-specific map rendering
+- Recorded verification direction:
+  - fake Caocao unit coverage for phase/live geometry
+  - backend provider/callback projection coverage
+  - frontend pure map view-model tests
+  - RideHailing system scenario coverage for accepted, arrived, in-trip, and
+    finished map states
+
+## Slice: RideHailing Order Detail Map And Live Route Backend Segment
+
+- Provider port:
+  - changed `RideHailingProviderPort.queryOrderDetail` from raw `unknown` to
+    typed `RideHailingProviderOrderDetail`
+  - added typed `queryDriverLocation` and `queryDriverRoute` provider methods
+  - added provider-level coordinate, vehicle-location, and navigation-route
+    models
+- Caocao adapter:
+  - normalizes `queryOrderDetailV2` into typed driver, vehicle, status label,
+    final amount, and optional vehicle location snapshots
+  - implements `queryDriverLocationByOrderId`
+  - implements `queryDriverPolylineV2` and parses route kind, polyline,
+    remaining distance/time, traffic-light count, and ETA vehicle location
+- RideHailing lifecycle:
+  - added local execution phase `ARRIVED_AT_PICKUP`
+  - corrected Caocao callback mapping for accepted, arrived, in-trip,
+    finished, and cancellation events
+  - preserves current execution phase for non-lifecycle Caocao events such as
+    route/price/invoice style callbacks
+- Order Detail projection:
+  - strips provider raw snapshots before returning `ride.live`
+  - includes typed `vehicleLocation` and `navigationRoute`
+  - keeps provider location/route query failures from failing the whole Order
+    Detail projection
+- Fake Caocao:
+  - added fake `ARRIVED_AT_PICKUP`
+  - changed explicit advance chain to
+    `CREATED -> ACCEPTED -> ARRIVED_AT_PICKUP -> IN_TRIP -> FINISHED`
+  - stores fake order origin/destination from order-create route params
+  - added fake driver location and route V2 endpoints
+  - switched fake callbacks to official-like lifecycle events while preserving
+    create-time accepted callback behavior
+- Verification:
+  - `pnpm --filter @partner-up-dev/fake-caocao-server typecheck`
+  - `pnpm --filter @partner-up-dev/fake-caocao-server test`
+  - `pnpm --dir apps/backend exec tsc --noEmit -p tsconfig.json`
+  - `pnpm --dir apps/frontend exec vue-tsc --noEmit`
+  - `pnpm exec vitest run --config vitest.backend.config.ts --project backend-unit -t "Caocao"`
+  - `pnpm exec vitest run --config vitest.backend.config.ts --project backend-scenario -t "Caocao callback"`
+  - `pnpm exec vitest run --config vitest.config.ts --project system-scenario -t "commerce_ride_hailing_ordering_reaches_order_detail"`
+  - `pnpm exec biome format --write` on the changed backend/fake files
+  - `git diff --check`
+
+## Slice: RideHailing Order Detail Map And Live Route Frontend Segment
+
+- Route map:
+  - added generic `extraMarkers` and `extraPolylines` props to `RouteMap`
+  - added `showFallbackPolyline` so callers can hide RouteMap's straight-line
+    fallback when a domain-specific mode needs marker-only geometry
+  - kept RideHailing lifecycle semantics out of `RouteMap`
+- RideHailing Order Detail:
+  - added a pure `buildRideHailingOrderMapViewModel` helper
+  - maps `DISPATCHING` / `INITIATING` to an origin-focused searching mode
+  - maps `ACCEPTED` to provider pickup route plus driver marker when live data
+    is available
+  - maps `ARRIVED_AT_PICKUP` to driver-marker-only display
+  - maps `IN_TRIP` to provider remaining route plus driver marker, with muted
+    planned-route fallback when provider route is unavailable
+  - keeps `FINISHED`, `CANCELLED`, and `FAILED` on planned route behavior
+  - uses only local `ride.executionPhase` to decide map mode; provider live
+    phase/status no longer advances map state ahead of the persisted lifecycle
+  - added fallback copy for the arrived-at-pickup phase
+  - exposes `data-map-mode` on the route map for stable scenario assertions
+  - temporarily replaced the `PuFloatPanel` content with raw order /
+    RideHailing / bill / payment / map-view-model JSON for manual diagnosis
+  - removed the temporary absolute-positioned ripple overlay because it was not
+    actually bound to the route origin marker
+- Tests:
+  - added frontend unit tests for the RideHailing map view-model phase matrix
+  - extended the RideHailing system scenario to manually advance fake Caocao
+    through accepted, arrived-at-pickup, in-trip, and finished map modes
+  - system scenario now verifies initial post-create local `DISPATCHING`
+    remains `SEARCHING_ORIGIN`, then explicitly posts accepted callback before
+    expecting pickup geometry
+- Verification:
+  - `pnpm --dir apps/frontend exec vue-tsc --noEmit`
+  - `pnpm exec vitest run --config vitest.config.ts --project frontend-unit -t "buildRideHailingOrderMapViewModel"`
+  - `pnpm exec vitest run --config vitest.config.ts --project system-scenario -t "commerce_ride_hailing_ordering_reaches_order_detail"`
+  - `pnpm --filter @partner-up-dev/fake-caocao-server typecheck`
+  - `pnpm --filter @partner-up-dev/fake-caocao-server test`
+  - `pnpm --dir apps/backend exec tsc --noEmit -p tsconfig.json`
+  - `pnpm exec biome format --write` on the changed frontend/scenario files
+  - `git diff --check`
+
+## Slice: RideHailing Order Detail Map Manual Review Corrections
+
+- Shared Tencent map provider:
+  - changed single-coordinate fitting from `easeTo(center)` to a tiny
+    `fitBounds` area so `fitPadding` is respected for one active marker
+  - preserved the existing single-point max zoom cap
+  - kept the fix generic in shared map infrastructure rather than adding a
+    RideHailing-specific offset
+- RideHailing impact:
+  - `DISPATCHING` origin focus can now account for the bottom `PuFloatPanel`
+    overlay when the active geometry is only `route-point-0`
+- Verification:
+  - `pnpm --dir apps/frontend exec vue-tsc --noEmit`
+  - `pnpm exec vitest run --config vitest.config.ts --project frontend-unit -t "buildRideHailingOrderMapViewModel"`
+  - `pnpm exec biome check apps/frontend/src/shared/map/tencent/tencent-lbs-provider.ts`
+  - `git diff --check -- apps/frontend/src/shared/map/tencent/tencent-lbs-provider.ts`
diff --git a/tasks/ride-hailing-ui-fixes/control.md b/tasks/ride-hailing-ui-fixes/control.md
index 00bcc24bd..99c65d9d6 100644
--- a/tasks/ride-hailing-ui-fixes/control.md
+++ b/tasks/ride-hailing-ui-fixes/control.md
@@ -18,13 +18,14 @@ Hypothesis:
 
 ## Classification
 
-- Primary route: `Constraint`
-- Active mode: `Diagnose` for RideHailing Order Detail mock control
+- Primary route: `Reality`
+- Active mode: `Explore` / `Solidify` for RideHailing Order Detail map and
+  live route behavior
 - Current collaboration state: choice-set backend/domain foundation, Ordering
-  UI primitive/control, SKU Card layout remediation, and Offer Listing / quote
-  identity segments committed; Ordering entry decoupling and durable docs
-  promotion committed; current slice explores fake provider lifecycle control
-  for RideHailing Order Detail review
+  UI primitive/control, SKU Card layout remediation, Offer Listing / quote
+  identity, Ordering entry decoupling, durable docs promotion, and fake provider
+  lifecycle control committed; current slice prepares the RideHailing Order
+  Detail content redesign
 
 ## Inherited Effective Truth
 
@@ -44,6 +45,26 @@ Hypothesis:
 - `RideHailingSkuCard.vue` owns RideHailing vehicle card display.
 - `CommerceOrderDetailPage.vue` currently owns both Rental and RideHailing order
   detail rendering.
+- Current RideHailing Order Detail map/live-route slice:
+  - backend segment now exposes typed provider live route, vehicle coordinates,
+    vehicle heading, and sanitized live projection fields
+  - local RideHailing execution phase now distinguishes `ACCEPTED` from
+    `ARRIVED_AT_PICKUP`
+  - shared lower-level map already supports arbitrary markers, polylines, and
+    active geometry; `RouteMap` now exposes generic extra live geometry
+  - fake Caocao now has explicit `ARRIVED_AT_PICKUP`,
+    driver-location, and driver-route test data
+  - frontend segment now builds a pure RideHailing map view-model and renders
+    dispatching origin focus, provider live route, driver marker, arrived
+    marker-only state, in-trip remaining route, and terminal planned route
+  - map mode is driven by local persisted `ride.executionPhase`, not provider
+    live phase/status
+  - RideHailing `PuFloatPanel` currently shows raw JSON diagnostic data only
+  - shared Tencent map single-coordinate fitting now respects `fitPadding` by
+    using a tiny `fitBounds` area instead of direct `easeTo(center)`
+  - manual browser validation remains pending
+  - standalone plan:
+    `tasks/ride-hailing-ui-fixes/order-detail-ride-hailing-map-plan.md`
 - `RouteMap.vue` / shared map code are relevant when a UI issue concerns route
   geometry, marker behavior, or zoom/pan behavior.
 
@@ -244,6 +265,18 @@ Choose the narrowest sufficient proof per approved slice:
     fake-control route; no backend proxy is introduced
   - planning artifact:
     `tasks/ride-hailing-ui-fixes/order-detail-mock-control-plan.md`
+- Current Order Detail content slice implemented locally:
+  - `CommerceOrderDetailPage.vue` still renders RideHailing UI inline
+    historical note only; local implementation extracts it
+  - current local code uses `PuPageScaffold padding="none"` for Order Detail
+    Page
+  - Rental detail keeps a document/card-stack wrapper with explicit padding and
+    max width
+  - RideHailing detail is extracted to `RideHailingOrderContent.vue`
+  - RideHailing detail now uses shared immersive `RouteMap` plus a bottom
+    `PuFloatPanel`
+  - planning artifact:
+    `tasks/ride-hailing-ui-fixes/order-detail-ride-hailing-content-plan.md`
 - Map diagnostic:
   - the gray RideHailing Ordering map observation was confirmed as a browser
     client issue; shared map code is not part of the active fix.
diff --git a/tasks/ride-hailing-ui-fixes/discussion-log.md b/tasks/ride-hailing-ui-fixes/discussion-log.md
index 2d87a748e..8b342476b 100644
--- a/tasks/ride-hailing-ui-fixes/discussion-log.md
+++ b/tasks/ride-hailing-ui-fixes/discussion-log.md
@@ -1032,3 +1032,172 @@
   non-terminal targeting, while the RideHailing system scenario now asserts
   repeated Order Detail polling does not auto-advance the fake provider order
   beyond the create-time accepted callback.
+
+## Explore: RideHailing Order Detail Content Redesign
+
+- Human request:
+  update Order Detail Page and RideHailing Order Content. Order Detail Page
+  should use no-padding `PuPageScaffold`, and RideHailing Order Content should
+  follow the old uniapp RideHailing page reference because the current
+  implementation is structurally wrong.
+- Finding:
+  current Web code has no extracted `RideHailingOrderContent` component. The
+  RideHailing detail surface is inline inside `CommerceOrderDetailPage.vue`.
+- Finding:
+  current RideHailing detail uses a CSS fake map and generic fact cards. This
+  is the main mismatch with the RideHailing interaction model.
+- Reference interpretation:
+  the uniapp file is a RideHailing ordering page, not an order-detail page. The
+  transferable model is full-screen map plus bottom panel, not its exact
+  ordering-specific controls.
+- Implementation direction:
+  split RideHailing detail into a Commerce-domain
+  `RideHailingOrderContent.vue` component that owns the full-screen `RouteMap`
+  and bottom `PuFloatPanel`, while `CommerceOrderDetailPage.vue` keeps route
+  parsing, querying, polling, and Rental detail behavior.
+- API detail:
+  `PuPageScaffold` supports `padding="none"`; this should be used instead of a
+  page-local no-padding class/variable trick.
+- Implementation:
+  `CommerceOrderDetailPage.vue` now uses the actual no-padding scaffold API and
+  keeps Rental-specific document padding in its own body wrapper.
+- Implementation:
+  `RideHailingOrderContent.vue` is a Commerce-domain component that owns the
+  full-screen `RouteMap`, bottom `PuFloatPanel`, and RideHailing-specific
+  status/fact/payment display. The page still owns order querying, route
+  parsing, polling, and Rental mutations.
+- Review note:
+  the uniapp reference was treated as a topology reference, not a literal
+  content copy, because it is an ordering page while the active target is Order
+  Detail.
+
+## Explore: RideHailing Order Detail Map And Live Route
+
+- Human request:
+  continue on `RideHailingOrderContent`, focusing on map and route behavior
+  across RideHailing phases:
+  - dispatching should center the origin and show a searching ripple
+  - accepted / picking up should show provider route polyline and vehicle marker
+  - arrived at pickup should center the vehicle marker and hide polyline
+  - in trip should show provider remaining route and vehicle marker, without
+    already-driven route
+  - finished / cancelled should show the persisted planned driving route
+- Finding:
+  current web `RideHailingOrderContent` always passes
+  `ride.route.drivingPlan?.polyline` to `RouteMap` as planned route geometry.
+- Finding:
+  lower-level `SharedMap` already accepts arbitrary `markers`, `polylines`, and
+  `activeGeometry`, and the Tencent adapter already has a `routeDriver` marker
+  style backed by `/route-map/map-marker-driver.png`.
+- Finding:
+  `RouteMap` is a generic route-domain wrapper and currently does not accept
+  RideHailing live markers/polylines as extra geometry.
+- Finding:
+  backend Order Detail projection exposes `executionPhase`, driver/vehicle
+  text, and loose provider live detail, but not provider route polyline,
+  vehicle coordinates, or vehicle heading.
+- Finding:
+  current local `RideHailingExecutionPhase` has no `ARRIVED_AT_PICKUP`, so it
+  cannot drive the requested marker-only arrived state without a lifecycle
+  model change.
+- Finding:
+  official Caocao docs expose separate driver location and driver pickup /
+  dropoff route APIs. This supports promoting live geometry into typed provider
+  port methods instead of inferring route geometry from raw order detail.
+- Reference note:
+  uniapp detail uses dynamic navigation only for on-the-way states and treats
+  server navigation polyline as the current / remaining route; already-driven
+  history is a separate grey polyline.
+- Plan:
+  added `order-detail-ride-hailing-map-plan.md`.
+
+## Execute: RideHailing Order Detail Map Backend Segment
+
+- Segment split:
+  human approved splitting the slice into backend first, frontend second, and
+  then manual validation.
+- Backend boundary:
+  this segment intentionally avoids frontend map rendering changes. It only
+  prepares the typed provider/live-geometry data needed by the future frontend
+  segment.
+- Provider-port decision:
+  `queryOrderDetail` should not leak raw provider response shape across domain
+  boundaries. The adapter now owns raw Caocao parsing, and Trade consumes typed
+  provider detail/location/route snapshots.
+- Callback mapping decision:
+  official Caocao lifecycle events are now mapped explicitly. Non-lifecycle
+  provider events preserve the current local execution phase instead of being
+  guessed into a lifecycle state.
+- Official-event correction:
+  the backend callback scenario now uses event `6` for final settlement /
+  service end. Event `25` is treated as a non-lifecycle provider event and no
+  longer advances execution phase by itself.
+- Projection decision:
+  `RideHailingOrderDetailProjection.live` exposes typed and sanitized live
+  fields. Provider raw snapshots remain internal to provider/bill audit data
+  and are not returned to the frontend detail payload.
+- Resilience decision:
+  provider order detail remains required when a provider binding exists, but
+  live geometry queries are optional. A location/route endpoint failure should
+  degrade the map, not fail the entire Order Detail page.
+- Fake-provider decision:
+  fake Caocao now stores order origin/destination from `orderCarV2` params so
+  driver position and provider route responses can be deterministic and tied to
+  the created order.
+
+## Execute: RideHailing Order Detail Map Frontend Segment
+
+- Boundary decision:
+  `RouteMap` gained generic extra geometry inputs only. RideHailing phase
+  semantics remain in Commerce RideHailing Order Detail code.
+- View-model decision:
+  the phase-to-map behavior is implemented as a pure helper next to
+  `RideHailingOrderContent` so the frontend can test lifecycle geometry
+  without relying on Tencent map canvas internals.
+- Dispatching decision:
+  `DISPATCHING` centers the route origin marker through `activeGeometry:
+  route-point-0`. The temporary CSS absolute ripple was removed because it was
+  not truly bound to the route origin marker; a correct marker-bound ripple
+  should wait for shared map overlay or marker-decoration support.
+- Accepted / in-trip decision:
+  provider route polylines are treated as current remaining navigation routes.
+  The frontend does not trim them unless future provider evidence shows Caocao
+  returns historical full-trip trails.
+- Fallback decision:
+  accepted without live geometry falls back to planned route; arrived without a
+  driver coordinate centers the origin; in-trip without provider route shows
+  the driver marker with a muted planned-route fallback.
+- Effective-phase correction:
+  map rendering must use local persisted `ride.executionPhase` only. Provider
+  live phase/status may be useful raw data, but it must not advance map state
+  ahead of the order lifecycle. This prevents a persisted `DISPATCHING` order
+  from showing accepted-provider geometry, losing the origin marker focus, and
+  hiding the dispatch ripple.
+- Raw-panel decision:
+  the `PuFloatPanel` content is temporarily reduced to raw JSON for manual
+  diagnosis of order state, RideHailing projection, provider live data, bill,
+  payment, and computed map view-model.
+- Scenario decision:
+  the system scenario asserts stable semantic `data-map-mode` values while
+  manually posting fake Caocao phase callbacks. It does not assert canvas pixels
+  or SDK layer internals.
+
+## Diagnose: Single Marker Fit Padding Under PuFloatPanel
+
+- Observation:
+  in `DISPATCHING`, the route origin marker looked too close to the bottom of
+  the visible map area after accounting for the absolute `PuFloatPanel`
+  overlay.
+- Root cause:
+  RideHailing correctly passed bottom-heavy `fitPadding` into `RouteMap`, but
+  the Tencent provider used `easeTo(center)` for a single active coordinate.
+  That single-point branch ignored padding entirely. Padding was only honored
+  by the multi-coordinate `fitBounds` branch.
+- Secondary note:
+  panel stop height is still an estimate of the visual overlay height. That may
+  explain small future polyline-frame deviations, but it was not the primary
+  cause of the origin marker being centered against the full map container.
+- Decision:
+  fix the shared provider's single-coordinate fit path by using a tiny
+  `fitBounds` area with the same padding and single-point max zoom cap. Keep
+  RideHailing-specific offset logic out of the map caller.
diff --git a/tasks/ride-hailing-ui-fixes/order-detail-ride-hailing-content-plan.md b/tasks/ride-hailing-ui-fixes/order-detail-ride-hailing-content-plan.md
new file mode 100644
index 000000000..7f003e744
--- /dev/null
+++ b/tasks/ride-hailing-ui-fixes/order-detail-ride-hailing-content-plan.md
@@ -0,0 +1,157 @@
+# RideHailing Order Detail Content Redesign Plan
+
+## Purpose
+
+This slice corrects the RideHailing Order Detail surface. The current web
+implementation is a generic order-detail card stack plus a static fake route
+illustration; it does not match the RideHailing full-screen map + bottom panel
+interaction model already used by the RideHailing ordering flow and the legacy
+uniapp reference.
+
+## Classification
+
+- Primary input route: `Reality`
+- Current mode: `Execute`
+- Production-code mutation was performed after Impact Handshake and explicit
+  `开始`.
+
+## Current Facts
+
+- Route page: `apps/frontend/src/pages/CommerceOrderDetailPage.vue`.
+- Current page uses `PuPageScaffold viewport="screen"` without
+  `padding="none"`.
+- RideHailing detail UI currently lives inline inside
+  `CommerceOrderDetailPage.vue`; there is no extracted
+  `RideHailingOrderContent` component yet.
+- Current RideHailing detail map is a CSS placeholder:
+  `order-detail-page__ride-map`, `order-detail-page__ride-polyline`, and
+  callout blocks.
+- Existing `RouteMap` already supports immersive full-height route display,
+  planned polylines, callouts, fit padding, and marker rendering.
+- Backend detail projection already provides the facts needed by the UI:
+  - `rideHailing.route`
+  - `rideHailing.departureAt`
+  - `rideHailing.riders`
+  - `rideHailing.selectedVehicleName`
+  - `rideHailing.provider.providerOrderId`
+  - `rideHailing.executionPhase`
+  - `rideHailing.driver` / `rideHailing.live.driver`
+  - `rideHailing.vehicle` / `rideHailing.live.vehicle`
+  - `detail.bill`
+  - `detail.payment.status`
+- Current RideHailing scenario test depends on these semantic nodes:
+  - `order-detail.page`
+  - `order-detail.ride-hailing.page`
+  - `order-detail.ride-hailing.selected-vehicle`
+  - `order-detail.ride-hailing.route-summary`
+
+## Reference Findings
+
+Reference:
+
+`/mnt/f/CODING/Project/Anana/Application/uniapp/src/sub_packages/ride_hailing/pages/order.vue`
+
+The reference is a RideHailing ordering page, not an order-detail page, so it
+should not be copied literally. The useful layout model is:
+
+- full-screen map owns the visual background
+- bottom panel overlays the map
+- panel can fold / normal / expand
+- compact footer/action area is visually separated from the scrollable panel
+  content
+- route/time/passenger/order facts are grouped in the panel, not scattered as
+  generic cards above a map
+
+For the web Order Detail slice, the corresponding shape should be:
+
+- `CommerceOrderDetailPage` becomes a no-padding `PuPageScaffold`
+- RideHailing orders render a dedicated `RideHailingOrderContent`
+- `RideHailingOrderContent` owns:
+  - full-screen `RouteMap`
+  - `PuFloatPanel` bottom sheet
+  - order status / vehicle / driver / route / rider / provider facts
+  - bill/payment action when `detail.bill` exists
+- Rental order detail keeps the existing generic card stack path.
+
+## Proposed UI Topology
+
+```text
+CommerceOrderDetailPage
+├─ PuPageScaffold viewport="screen" padding="none"
+├─ header: PuPageHeader
+└─ body
+   ├─ loading / error states
+   ├─ if rideHailingDetail:
+   │  └─ RideHailingOrderContent
+   │     ├─ RouteMap immersive full-screen
+   │     └─ PuFloatPanel
+   │        ├─ status hero row
+   │        ├─ ride facts
+   │        ├─ driver / vehicle facts when available
+   │        ├─ route / riders facts
+   │        └─ bill/payment action when available
+   └─ else:
+      └─ existing Rental detail card stack
+```
+
+## Implemented Shape
+
+- `CommerceOrderDetailPage.vue` uses
+  `PuPageScaffold viewport="screen" width="full" padding="none"`.
+- Page-level responsibilities remain:
+  - route param parsing
+  - order detail query
+  - RideHailing polling
+  - Rental cancellation / booking-confirmation mutations
+  - Rental card-stack rendering
+- RideHailing detail rendering is extracted to:
+  `apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue`.
+- `RideHailingOrderContent` owns:
+  - immersive `RouteMap`
+  - `PuFloatPanel` bottom panel with overview / detail / expanded stops
+  - RideHailing status, vehicle, route, departure time, riders, provider order,
+    driver, vehicle, and bill/payment action display
+- Existing RideHailing semantic test ids are preserved on equivalent nodes.
+
+## Implementation Notes
+
+- New component should live under
+  `apps/frontend/src/domains/commerce/ui/order-detail/` because the UI is
+  Commerce-domain order detail content, not a generic page shell.
+- `CommerceOrderDetailPage.vue` should keep data fetching, route parsing,
+  mutations, and polling.
+- `RideHailingOrderContent.vue` should be presentational with typed props:
+  `detail`, `ride`, and preformatted labels/callbacks only when the page owns
+  the behavior. It should not fetch order detail itself.
+- The current scenario test IDs should be preserved on equivalent semantic
+  nodes.
+- Use `PuDescriptionList` / `PuDescriptionItem` for compact read-only facts
+  where they fit; use local layout only for RideHailing-specific map/panel
+  composition.
+- Use `RouteMap` rather than CSS placeholder map.
+- Use `PuFloatPanel` rather than hand-built resizer logic.
+
+## Open Review Points
+
+- Whether this slice should also add explicit phase-advance Admin/manual test
+  instructions for checking each Order Detail state. The fake control now
+  exists, but browser-driven visual verification may still be manual.
+- Whether pending-payment (`FINISHED` with bill) should place the payment CTA in
+  the panel footer or inside the panel content. Initial recommendation: keep it
+  inside the panel content for this slice and avoid introducing another bottom
+  action bar contract until the visual review requires it.
+- Whether driver/vehicle unavailable state should show placeholder copy or
+  hide those sections. Initial recommendation: show compact placeholders for
+  state clarity before assignment; hide only values that would produce empty
+  visual noise.
+
+## Verification
+
+- `pnpm check:type:frontend`
+- `pnpm exec biome check` on changed frontend and task files
+- `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+- `pnpm exec vitest run --project system-scenario tests/scenario/commerce/rental-ordering.scenario.test.ts`
+- Browser/manual check for RideHailing Order Detail:
+  - dispatching / accepted / in-trip / pending-payment states
+  - map visible and bottom panel usable at mobile viewport
+  - payment CTA visible only when bill exists
diff --git a/tasks/ride-hailing-ui-fixes/order-detail-ride-hailing-map-plan.md b/tasks/ride-hailing-ui-fixes/order-detail-ride-hailing-map-plan.md
new file mode 100644
index 000000000..5cba3a8df
--- /dev/null
+++ b/tasks/ride-hailing-ui-fixes/order-detail-ride-hailing-map-plan.md
@@ -0,0 +1,486 @@
+# RideHailing Order Detail Map And Live Route Plan
+
+## Purpose
+
+This slice makes the RideHailing Order Detail map stateful. The current
+`RideHailingOrderContent` shows the persisted planned route for every phase.
+The target behavior is phase-specific:
+
+- dispatching: center the origin and show a searching ripple around it
+- accepted / picking up passenger: show provider live route plus vehicle marker
+- arrived at pickup: center the vehicle marker and hide polyline
+- in trip: show provider live route plus vehicle marker, with already-driven
+  path omitted
+- finished / cancelled: show the persisted planned driving route
+
+## Classification
+
+- Primary input route: `Reality`
+- Current mode: `Execute`
+- Segment state:
+  - backend Segment 1 completed locally
+  - frontend Segment 2 completed locally
+  - manual validation segment pending
+
+## Current Facts
+
+- Current web component:
+  `apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue`.
+- Current map wrapper:
+  `apps/frontend/src/domains/route/ui/RouteMap.vue`.
+- Lower-level shared map:
+  `apps/frontend/src/shared/map/Map.vue`.
+- Tencent LBS adapter:
+  `apps/frontend/src/shared/map/tencent/tencent-lbs-provider.ts`.
+- Current `RouteMap` accepts `route`, `plannedPolyline`, `activeGeometry`,
+  fit padding, generic `extraMarkers`, generic `extraPolylines`, and
+  `showFallbackPolyline`.
+- Lower-level `SharedMap` already accepts arbitrary `markers`, `polylines`,
+  and `activeGeometry`.
+- Shared map marker types already include `routeDriver`.
+- Existing vehicle marker asset already exists at
+  `apps/frontend/public/route-map/map-marker-driver.png`.
+- Current Order Detail backend projection:
+  `RideHailingOrderDetailProjection` in
+  `apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts`.
+- Current projection exposes:
+  - route snapshot with `drivingPlan.polyline`
+  - `executionPhase`
+  - driver / vehicle text snapshots
+  - loose provider `live.phase`, `live.statusLabel`, and `live.finalAmountFen`
+- Backend Segment 1 now exposes:
+  - typed provider order detail
+  - provider live route polyline
+  - provider live vehicle coordinate / heading
+  - a distinct `ARRIVED_AT_PICKUP` local phase
+- `RideHailingProviderPort.queryOrderDetail` now returns
+  `Promise<RideHailingProviderOrderDetail>` instead of `Promise<unknown>`.
+- Provider port also exposes typed `queryDriverLocation` and
+  `queryDriverRoute` methods.
+- Current fake Caocao:
+  - detail reads are now read-only
+  - explicit fake control routes advance phases
+  - phases are
+    `CREATED -> ACCEPTED -> ARRIVED_AT_PICKUP -> IN_TRIP -> FINISHED`
+- fake detail, driver location, and driver route payloads now provide typed
+  test data for backend projection and future frontend map states
+- Frontend Segment 2 now:
+  - adds a pure RideHailing map view-model helper
+  - renders origin ripple for dispatching/searching
+  - renders provider live route and driver marker for accepted/in-trip phases
+  - renders driver-marker-only map for arrived-at-pickup
+  - keeps terminal phases on planned route
+
+## Reference Findings
+
+Uniapp references:
+
+- `/mnt/f/CODING/Project/Anana/Application/uniapp/src/sub_packages/ride_hailing/pages/detail.vue`
+- `/mnt/f/CODING/Project/Anana/Application/uniapp/src/components/base/routeMap/routeMap.vue`
+- `/mnt/f/CODING/Project/Anana/Application/uniapp/src/components/base/routeMap/types.ts`
+
+Useful reference model:
+
+- order detail refreshes order status separately from navigation info
+- live navigation info is fetched only while the order is on the way
+- old status groups show dynamic map only for
+  `picking_up / arrived / picked / in_progress / dropped`; dispatching and
+  accepted states still use static route/markers in uniapp
+- `RouteMap` receives:
+  - `centerMode`
+  - `customPolylinePoints`
+  - `carPosition`
+  - `showCarHistory`
+  - `stickCarToPolyline`
+- `customPolylinePoints` is used for provider navigation route
+- `carPosition` is used for the vehicle marker
+- `showCarHistory` is used to avoid showing already-driven route as the active
+  route
+- the main `customPolylinePoints` route is treated as the current server
+  navigation / remaining route; already-driven history is a separate grey
+  polyline
+- vehicle marker asset is a 38x38 top-view car marker
+
+Official Caocao docs checked:
+
+- Order status/event docs expose separate "driver arrived" and "meter start"
+  states/events:
+  `https://open.caocaokeji.cn/zh-cn/docs/caocao_open/travel/1.5orderProperties.html`
+- Driver location query exists and returns latitude, longitude, and direction:
+  `https://open.caocaokeji.cn/zh-cn/docs/caocao_open/travel/2.5queryDriverPosition.html`
+- Order detail query exposes order status and driver location information:
+  `https://open.caocaokeji.cn/zh-cn/docs/caocao_open/travel/2.9queryOrderDetail.html`
+- Driver pickup/dropoff route query exists. It returns route steps/links,
+  coordinate strings, remaining distance/time, and driver ETA location:
+  `https://open.caocaokeji.cn/zh-cn/docs/caocao_open/travel/2.27queryDriverPolyline.html`
+- V2 driver pickup/dropoff route query removes the route-type request argument
+  and returns the route type in the response:
+  `https://open.caocaokeji.cn/zh-cn/docs/caocao_open/travel/2.27queryDriverPolylineV2.html`
+
+Implication:
+
+- The provider route polyline should not be inferred from
+  `queryOrderDetailV2`.
+- Caocao has dedicated route and driver-location APIs that should be promoted
+  into the provider port instead of being parsed opportunistically from raw
+  order detail.
+
+## Model Gap
+
+The requested UI state cannot be implemented cleanly as a frontend-only change.
+There are three model gaps:
+
+1. Provider live geometry is missing from our backend projection.
+2. Provider port still returns unknown detail data instead of a typed domain
+   shape.
+3. Local RideHailing lifecycle does not distinguish "accepted / picking up"
+   from "arrived at pickup".
+
+The most important correction is not visual; it is to introduce a typed
+RideHailing live-navigation snapshot that Order Detail can consume.
+
+## Proposed Backend Topology
+
+```mermaid
+flowchart TD
+  A["CommerceOrderDetailPage"] --> B["GET /api/commerce/orders/:orderId"]
+  B --> C["getCommerceOrderDetail"]
+  C --> D["buildRideHailingDetailProjection"]
+  D --> E["Trade order choice-set resolution"]
+  D --> F["RideHailingOrder record"]
+  D --> G["RideHailingProviderPort"]
+  G --> H["queryOrderDetail"]
+  G --> I["queryDriverLocation"]
+  G --> J["queryDriverRoute"]
+  D --> K["RideHailingOrderDetailProjection.live"]
+  K --> L["RideHailingOrderContent map view-model"]
+```
+
+Provider port should expose stable methods:
+
+```ts
+type RideHailingProviderOrderDetail = {
+  phase: string;
+  statusLabel: string;
+  finalAmountFen: number | null;
+  driver: RideHailingDriverSnapshot | null;
+  vehicle: RideHailingVehicleSnapshot | null;
+  vehicleLocation: RideHailingProviderVehicleLocation | null;
+  providerSnapshot: unknown;
+};
+
+type RideHailingProviderVehicleLocation = {
+  latitude: number;
+  longitude: number;
+  headingDegrees: number | null;
+  speedKph: number | null;
+  capturedAt: string | null;
+  providerSnapshot: unknown;
+};
+
+type RideHailingProviderNavigationRoute = {
+  routeKind: "PICKUP" | "DROPOFF" | "WAITING" | "RELAY_PREVIOUS_DROPOFF" | "UNKNOWN";
+  polyline: RideHailingCoordinateSnapshot[];
+  remainingDistanceMeters: number | null;
+  remainingDurationSeconds: number | null;
+  trafficLightCount: number | null;
+  vehicleLocation: RideHailingProviderVehicleLocation | null;
+  providerSnapshot: unknown;
+};
+```
+
+Recommended port additions:
+
+- `queryOrderDetail(input): Promise<RideHailingProviderOrderDetail>`
+- `queryDriverLocation(input): Promise<RideHailingProviderVehicleLocation | null>`
+- `queryDriverRoute(input): Promise<RideHailingProviderNavigationRoute | null>`
+
+`queryDriverRoute` should be null-safe. If the provider rejects the route query
+for a phase, Order Detail falls back to planned route or marker-only display
+depending on phase.
+
+## Lifecycle Mapping
+
+Current local phases:
+
+| Current Phase | Problem |
+| --- | --- |
+| `INITIATING` | usable as creating/dispatch preparation |
+| `DISPATCHING` | usable as searching/dispatching |
+| `ACCEPTED` | conflates picking up and arrived at pickup |
+| `IN_TRIP` | usable as passenger onboard |
+| `FINISHED` | usable as finished / pending payment |
+| `CANCELLED` | usable as cancelled |
+| `FAILED` | usable as failure |
+
+Recommended change:
+
+- Add `ARRIVED_AT_PICKUP` to `RideHailingExecutionPhase`.
+- Map Caocao "driver arrived" event/status to `ARRIVED_AT_PICKUP`.
+- Keep `ACCEPTED` for "driver accepted / heading to pickup".
+
+Caocao mapping should be corrected against the official status/event model:
+
+| Caocao Signal | Local Phase |
+| --- | --- |
+| no provider order yet / created but no accepted callback | `DISPATCHING` |
+| driver accepted / started pickup service | `ACCEPTED` |
+| driver arrived / status 12 | `ARRIVED_AT_PICKUP` |
+| meter started / status 3 | `IN_TRIP` |
+| meter ended / order finished / pending fee confirmation | `FINISHED` |
+| cancellation statuses/events | `CANCELLED` |
+
+The exact callback event IDs used by the current Caocao integration should be
+reviewed during implementation because the existing fake callback numbering is
+not aligned with the current official event table.
+
+## Proposed Frontend Topology
+
+`RideHailingOrderContent` should build an explicit map view-model:
+
+```ts
+type RideHailingOrderMapMode =
+  | "SEARCHING_ORIGIN"
+  | "PICKING_UP"
+  | "ARRIVED_AT_PICKUP"
+  | "IN_TRIP"
+  | "PLANNED_ROUTE";
+
+type RideHailingOrderMapViewModel = {
+  mode: RideHailingOrderMapMode;
+  route: Route;
+  markers: MapMarker[];
+  polylines: MapPolyline[];
+  activeGeometry: MapActiveGeometry;
+  center: MapCoordinate | null;
+  showOriginRipple: boolean;
+};
+```
+
+Recommended implementation direction:
+
+- Keep `RouteMap` generic. Do not make it understand RideHailing lifecycle.
+- Add a small generic extension to `RouteMap` only if it stays domain-neutral:
+  `extraMarkers` / `extraPolylines`, or `markerOverrides`.
+- If the required shape makes `RouteMap` awkward, use lower-level `SharedMap`
+  directly inside `RideHailingOrderContent` and build route point markers with
+  shared route helpers.
+- Keep the phase-to-map decision in a pure helper next to
+  `RideHailingOrderContent`, for focused unit tests.
+
+## Map Behavior Matrix
+
+| Local Phase | Geometry | Active Geometry | Notes |
+| --- | --- | --- | --- |
+| `INITIATING` / `DISPATCHING` | origin marker only or route points muted | origin marker | show ripple around origin |
+| `ACCEPTED` | provider pickup route + driver marker | all, or provider route | provider route is pickup route |
+| `ARRIVED_AT_PICKUP` | driver marker + route points optional/muted | driver marker | no polyline |
+| `IN_TRIP` | provider dropoff route + driver marker | provider route | provider route should be remaining route; do not render driven part |
+| `FINISHED` | planned route from order snapshot | all | same as current planned route behavior |
+| `CANCELLED` / `FAILED` | planned route from order snapshot | all | no live provider geometry |
+
+If provider live route is unavailable:
+
+- `ACCEPTED`: show driver marker if present, otherwise origin/destination
+  planned route.
+- `ARRIVED_AT_PICKUP`: show driver marker if present, otherwise origin marker.
+- `IN_TRIP`: show driver marker plus planned route as muted fallback, not as
+  active remaining route.
+
+## Origin Ripple
+
+The ripple should be owned by `RideHailingOrderContent`, not `SharedMap`.
+
+Reason:
+
+- It is RideHailing phase-specific semantics, not a generic map primitive.
+- Tencent LBS marker layers do not need to know about this animation.
+
+Implementation options:
+
+- Use an absolutely positioned overlay anchored approximately at the map center
+  when the map is fit to a single origin active geometry.
+- Prefer a CSS layer over a synthetic provider marker style because it is a
+  temporary visual state and does not need provider SDK support.
+- Keep the ripple non-interactive and hidden outside dispatching/searching
+  phases.
+
+Open implementation detail:
+
+- Pixel-perfect anchoring to a geo coordinate would require map projection
+  access, which the current `SharedMap` provider abstraction does not expose.
+  For this slice, centering the origin and placing the ripple at visual center
+  is sufficient and keeps the abstraction small.
+
+## Provider Live Route Semantics
+
+Caocao route APIs expose a route polyline together with remaining ETA metadata.
+The docs imply this is the driver's current navigation route for pickup or
+dropoff, not a historical full trip trail.
+
+Plan assumption:
+
+- Treat provider route polyline as "remaining route" for the active phase.
+- Do not additionally trim it on the frontend unless the provider returns a
+  full-route trail. If manual/provider evidence later proves the polyline is
+  full-route, add a pure geometry trim helper using current driver position and
+  nearest point.
+
+## Fake Caocao Needs
+
+Fake Caocao should be extended so this slice is manually and scenario-testable:
+
+- add `ARRIVED_AT_PICKUP` fake phase
+- advance order phase:
+  `CREATED -> ACCEPTED -> ARRIVED_AT_PICKUP -> IN_TRIP -> FINISHED`
+- expose driver location in fake route/detail-compatible responses
+- expose fake pickup/dropoff route data from a dedicated driver-route endpoint
+- allow test control to set phase directly, including `ARRIVED_AT_PICKUP`
+- keep phase changes callback-driven so backend persistence still follows the
+  provider callback path
+
+## Sequence
+
+```mermaid
+sequenceDiagram
+  participant UI as RideHailingOrderContent
+  participant API as Commerce Order Detail API
+  participant Domain as RideHailing Detail Projection
+  participant Provider as RideHailingProviderPort
+  participant Caocao as Caocao API/Fake
+
+  UI->>API: GET /api/commerce/orders/:orderId
+  API->>Domain: buildRideHailingDetailProjection(order)
+  Domain->>Provider: queryOrderDetail(providerOrderId)
+  alt active live phase
+    Domain->>Provider: queryDriverLocation(providerOrderId)
+    Domain->>Provider: queryDriverRoute(providerOrderId)
+    Provider->>Caocao: queryDriverLocationByOrderId
+    Provider->>Caocao: queryDriverPolylineV2
+  end
+  Domain-->>API: rideHailing.detail + live geometry
+  API-->>UI: CommerceOrderDetailProjection
+  UI->>UI: build map view-model from executionPhase + live geometry
+  UI->>UI: render SharedMap/RouteMap + FloatPanel
+```
+
+## Implementation Segments
+
+### Segment 1: Domain Contract And Fake Support
+
+- Add typed provider order-detail / driver-location / route models.
+- Change `queryOrderDetail` from `Promise<unknown>` to typed provider detail.
+- Add `queryDriverLocation` and `queryDriverRoute` to the provider port.
+- Implement Caocao adapter parsing for:
+  - `queryOrderDetailV2`
+  - `queryDriverLocationByOrderId`
+  - `queryDriverPolylineV2`
+- Add `ARRIVED_AT_PICKUP` to local execution phase model.
+- Correct callback/status mapping for accepted, arrived, in-trip, finished,
+  and cancelled states.
+- Extend fake Caocao state/routes/tests for the new live geometry and phase.
+- Extend `RideHailingOrderDetailProjection.live` with a typed
+  navigation/vehicle-location snapshot.
+
+### Segment 2: Frontend Map View-Model And Rendering
+
+- Add a pure map view-model builder for `RideHailingOrderContent`.
+- Render phase-specific markers and polylines.
+- Center the route origin marker for dispatching. A marker-bound ripple is
+  deferred until shared map overlay or marker-decoration support exists.
+- Render driver marker from `routeDriver` icon.
+- Use provider live route in accepted/in-trip phases.
+- Center driver marker in `ARRIVED_AT_PICKUP`.
+- Keep planned route for finished/cancelled/failed phases.
+- Temporarily replace bottom `PuFloatPanel` content with raw diagnostic JSON
+  during manual review.
+
+### Segment 3: Verification And Manual Review
+
+- Add provider/fake unit tests for:
+  - phase progression including arrived-at-pickup
+  - typed detail parsing
+  - driver location parsing
+  - driver route parsing from `coords`
+- Add frontend pure-helper tests for phase-to-map view-model.
+- Extend RideHailing system scenario to:
+  - create order
+  - advance fake phase to accepted
+  - verify driver marker / provider route appear
+  - advance to arrived-at-pickup
+  - verify marker-only state
+  - advance to in-trip
+  - verify live route appears
+  - advance to finished
+  - verify planned route / bill state
+- Manual browser verification through dev fake controls remains necessary for
+  visual details:
+  - map is nonblank
+  - panel does not occlude active geometry
+  - ripple is visible only during dispatching
+  - driver marker is visible at mobile viewport
+
+## Risks And Objections
+
+- A frontend-only implementation would be misleading because current API data
+  cannot support the requested accepted/arrived/in-trip map differences.
+- Extending `RouteMap` with RideHailing-specific props would damage the route
+  domain boundary. Use generic extra geometry props or compose `SharedMap`
+  directly.
+- Current fake callback event numbering does not match the current official
+  Caocao docs. Do not continue building more behavior on that mismatch without
+  correcting or isolating it.
+- Adding `ARRIVED_AT_PICKUP` changes backend model, fake provider, frontend
+  rendering, and tests. This is still the cleaner model because the UI
+  requirement has a real lifecycle distinction.
+- Vehicle marker rotation may need a follow-up because current shared map
+  marker abstraction does not expose per-marker rotation. The first
+  implementation can show the marker position without heading rotation.
+
+## Impact Handshake Draft For Implementation
+
+Address and Object:
+
+- Backend:
+  - RideHailing provider port model and Caocao adapter
+  - RideHailing execution phase model and callback mapping
+  - Order Detail projection
+  - fake Caocao server state/routes/tests
+- Frontend:
+  - `RideHailingOrderContent.vue`
+  - route/shared map geometry support if needed
+  - focused helper tests / scenario assertions
+
+State Diff:
+
+- From: Order Detail always renders planned route and no live driver geometry.
+- To: Order Detail renders phase-specific planned/live route, driver marker,
+  and dispatch ripple from a typed live-navigation projection.
+
+Blast Radius Forecast:
+
+- Backend type exports affect Hono RPC inferred frontend types.
+- Fake Caocao changes affect RideHailing system scenarios and Admin fake
+  controls.
+- Shared map changes, if any, affect all `RouteMap` consumers and need to stay
+  generic.
+- Callback mapping changes affect RideHailing order lifecycle states.
+
+Invariants:
+
+- Existing `/api/commerce/orders/:orderId` access control remains unchanged.
+- Provider binding remains owned by Trade order choice-set resolution.
+- Order Detail page route and existing semantic test IDs remain stable.
+- Rental Order Detail path remains unchanged.
+- Finished/cancelled orders still show the persisted planned route.
+
+Verification:
+
+- `pnpm --filter @partner-up-dev/fake-caocao-server typecheck`
+- `pnpm --filter @partner-up-dev/fake-caocao-server test`
+- `pnpm check:type:backend`
+- `pnpm check:type:frontend`
+- focused backend RideHailing provider/callback tests
+- focused frontend map view-model tests
+- `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+- `git diff --check`

From 8f3d5fdb11b9fd5bf7a00839b6c6166ff0825e11 Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Tue, 23 Jun 2026 19:39:08 +0800
Subject: [PATCH 41/94] feat(ride-hailing): render order detail panel content

- replace diagnostic raw panel with status hero, dispatching candidates, route, and riders
- add readonly ride-hailing SKU card display and candidate vehicle projection
- archive long task logs and keep current task packet concise
---
 .../use-cases/ride-hailing-ordering-flow.ts   |   34 +-
 .../order-detail/RideHailingOrderContent.vue  |  315 ++++-
 .../ui/ordering/RideHailingSkuCard.vue        |   53 +-
 ...e-log-ordering-through-order-detail-map.md |  720 ++++++++++
 ...n-log-ordering-through-order-detail-map.md | 1234 ++++++++++++++++
 tasks/ride-hailing-ui-fixes/change-log.md     |  750 +---------
 tasks/ride-hailing-ui-fixes/control.md        |   36 +-
 tasks/ride-hailing-ui-fixes/discussion-log.md | 1256 +----------------
 .../ride-hailing-ordering.scenario.test.ts    |   40 +-
 9 files changed, 2471 insertions(+), 1967 deletions(-)
 create mode 100644 tasks/ride-hailing-ui-fixes/archive/change-log-ordering-through-order-detail-map.md
 create mode 100644 tasks/ride-hailing-ui-fixes/archive/discussion-log-ordering-through-order-detail-map.md

diff --git a/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts b/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts
index 031228403..ea6c88383 100644
--- a/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts
+++ b/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts
@@ -1,16 +1,17 @@
 import type { RideHailingProviderInstanceId } from "../../../entities/ride-hailing-provider";
 import type { TradeOrder, TradeOrderId } from "../../../entities/trade-order";
+import { throwHttpProblem } from "../../../lib/problem-details";
 import { RideHailingOrderRepository } from "../../../repositories/RideHailingOrderRepository";
 import { RideHailingProviderInstanceRepository } from "../../../repositories/RideHailingProviderInstanceRepository";
 import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository";
-import { throwHttpProblem } from "../../../lib/problem-details";
-import { createRideHailingProviderPort } from "../../ride-hailing";
 import type {
   RideHailingProviderNavigationRoute,
   RideHailingProviderOrderDetail,
   RideHailingProviderVehicleLocation,
 } from "../../ride-hailing";
+import { createRideHailingProviderPort } from "../../ride-hailing";
 import type {
+  RideHailingChoiceSetCandidateSnapshot,
   RideHailingDriverSnapshot,
   RideHailingExecutionPhase,
   RideHailingRiderSnapshot,
@@ -47,12 +48,20 @@ type ProviderDetailProjection = Omit<
   vehicleLocation: ProviderVehicleLocationProjection | null;
 };
 
+type RideHailingCandidateVehicleProjection = {
+  skuId: number;
+  displayName: string;
+  quoteAmountFen: number;
+  previewImageAssetId: string | null;
+};
+
 export type RideHailingOrderDetailProjection = {
   route: RideHailingRouteSnapshot;
   departureAt: string | null;
   riders: RideHailingRiderSnapshot[];
   contactPhone: string;
   selectedVehicleName: string;
+  candidateVehicles: RideHailingCandidateVehicleProjection[];
   provider: {
     providerOrderId: string | null;
   };
@@ -75,6 +84,26 @@ const projectProviderVehicleLocation = (
   };
 };
 
+const firstPresentString = (values: readonly (string | null | undefined)[]): string | null => {
+  for (const value of values) {
+    const normalized = value?.trim() ?? "";
+    if (normalized.length > 0) return normalized;
+  }
+  return null;
+};
+
+const projectCandidateVehicle = (
+  candidate: RideHailingChoiceSetCandidateSnapshot,
+): RideHailingCandidateVehicleProjection => ({
+  displayName: candidate.quoteSnapshot.displayName || candidate.sku.name,
+  previewImageAssetId: firstPresentString([
+    candidate.sku.presentationSnapshot.heroImageAssetIds[0],
+    candidate.sku.presentationSnapshot.detailImageAssetIds[0],
+  ]),
+  quoteAmountFen: candidate.quoteSnapshot.amountFen,
+  skuId: candidate.sku.id,
+});
+
 const projectProviderNavigationRoute = (
   route: RideHailingProviderNavigationRoute | null,
 ): ProviderNavigationRouteProjection | null => {
@@ -174,6 +203,7 @@ export async function buildRideHailingDetailProjection(input: {
       : input.order.items[0]
         ? getOrderItemSkuName(input.order.items[0])
         : "曹操出行",
+    candidateVehicles: choiceSetItem?.candidates.map(projectCandidateVehicle) ?? [],
     provider: {
       providerOrderId: providerBinding?.providerOrderId ?? null,
     },
diff --git a/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue b/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue
index b2642e7d5..12b637d61 100644
--- a/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue
+++ b/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue
@@ -32,21 +32,113 @@
       :z-index="20"
     >
       <div class="ride-hailing-order-content__panel-body">
-        <pre
-          class="ride-hailing-order-content__raw-data"
-          data-testid="order-detail.ride-hailing.raw-data"
-        >{{ rawDebugData }}</pre>
+        <header
+          class="ride-hailing-order-content__status-hero"
+          data-testid="order-detail.ride-hailing.status-hero"
+        >
+          <div class="ride-hailing-order-content__status-copy">
+            <h2 data-testid="order-detail.ride-hailing.status-title">
+              {{ statusHero.title }}
+            </h2>
+            <p data-testid="order-detail.ride-hailing.status-description">
+              {{ statusHero.description }}
+            </p>
+          </div>
+
+          <div class="ride-hailing-order-content__status-actions">
+            <PuButton
+              v-if="showsCancelAction"
+              type="button"
+              size="sm"
+              shape="pill"
+              tone="neutral"
+              variant="outline"
+              disabled
+              title="取消订单能力待接入"
+              data-testid="order-detail.ride-hailing.cancel"
+            >
+              取消订单
+            </PuButton>
+            <PuButton
+              type="button"
+              size="sm"
+              shape="circle"
+              tone="neutral"
+              variant="ghost"
+              disabled
+              aria-label="更多操作"
+              title="更多操作待接入"
+              data-testid="order-detail.ride-hailing.more"
+            >
+              <span class="i-mdi-dots-horizontal" aria-hidden="true"></span>
+            </PuButton>
+          </div>
+        </header>
+
+        <section
+          v-if="showsDispatchingCandidateVehicles"
+          class="ride-hailing-order-content__candidate-section"
+          data-testid="order-detail.ride-hailing.dispatching-skus"
+        >
+          <RideHailingSkuCard
+            v-for="candidate in props.ride.candidateVehicles"
+            :key="candidate.skuId"
+            readonly
+            :display-name="candidate.displayName"
+            :price-label="formatFen(candidate.quoteAmountFen)"
+            :preview-src="directImageSrc(candidate.previewImageAssetId)"
+            :selectable="false"
+            :selected="false"
+          />
+        </section>
+
+        <div class="ride-hailing-order-content__facts">
+          <section
+            class="ride-hailing-order-content__fact-section"
+            data-testid="order-detail.ride-hailing.route-section"
+          >
+            <h3>路线</h3>
+            <RoutePointList
+              class="ride-hailing-order-content__route-list"
+              :route="routeForMap"
+              variant="detail"
+              show-address
+            />
+          </section>
+
+          <section
+            class="ride-hailing-order-content__fact-section"
+            data-testid="order-detail.ride-hailing.riders-section"
+          >
+            <h3>乘车人</h3>
+            <div class="ride-hailing-order-content__rider-list">
+              <div
+                v-for="rider in props.ride.riders"
+                :key="rider.userId"
+                class="ride-hailing-order-content__rider-row"
+              >
+                <span class="i-mdi-account-circle" aria-hidden="true"></span>
+                <div>
+                  <strong>{{ rider.displayName }}</strong>
+                  <small>{{ rider.phoneMasked ?? "暂无手机号" }}</small>
+                </div>
+              </div>
+            </div>
+          </section>
+        </div>
       </div>
     </PuFloatPanel>
   </section>
 </template>
 
 <script setup lang="ts">
-import { PuFloatPanel, type PuFloatPanelStop } from "@partner-up-dev/design-web";
+import { PuButton, PuFloatPanel, type PuFloatPanelStop } from "@partner-up-dev/design-web";
 import { computed, onMounted, onUnmounted, ref } from "vue";
 import type { CommerceOrderDetailResponse } from "@/domains/commerce/queries/useCommerce";
+import RideHailingSkuCard from "@/domains/commerce/ui/ordering/RideHailingSkuCard.vue";
 import type { Route, RoutePoint } from "@/domains/route/model/route";
 import RouteMap from "@/domains/route/ui/RouteMap.vue";
+import RoutePointList from "@/domains/route/ui/RoutePointList.vue";
 import type { MapFitPadding } from "@/shared/map/types";
 import { buildRideHailingOrderMapViewModel } from "./ride-hailing-order-map-view-model";
 
@@ -125,6 +217,55 @@ const routeMapFitPadding = computed<MapFitPadding>(() => ({
   left: 32,
 }));
 
+const statusCopyByPhase: Record<
+  RideHailingDetail["executionPhase"],
+  {
+    title: string;
+    description: string;
+  }
+> = {
+  ACCEPTED: {
+    title: "已接单",
+    description: "已接单，等待司机出发接客",
+  },
+  ARRIVED_AT_PICKUP: {
+    title: "已到达上车点",
+    description: "请尽快上车",
+  },
+  CANCELLED: {
+    title: "已取消",
+    description: "订单已取消",
+  },
+  DISPATCHING: {
+    title: "派单中",
+    description: "努力为您寻找司机中...",
+  },
+  FAILED: {
+    title: "订单异常",
+    description: "请联系客服介入",
+  },
+  FINISHED: {
+    title: "行程已结束",
+    description: "感谢使用，请留意账单状态",
+  },
+  INITIATING: {
+    title: "正在创建",
+    description: "正在准备派单",
+  },
+  IN_TRIP: {
+    title: "行程中",
+    description: "司机正在前往目的地",
+  },
+};
+
+const statusHero = computed(() => statusCopyByPhase[props.ride.executionPhase]);
+
+const showsCancelAction = computed(() => props.ride.executionPhase === "DISPATCHING");
+
+const showsDispatchingCandidateVehicles = computed(
+  () => props.ride.executionPhase === "DISPATCHING" && props.ride.candidateVehicles.length > 0,
+);
+
 const orderMapViewModel = computed(() =>
   buildRideHailingOrderMapViewModel({
     executionPhase: props.ride.executionPhase,
@@ -133,19 +274,28 @@ const orderMapViewModel = computed(() =>
   }),
 );
 
-const rawDebugData = computed(() =>
-  JSON.stringify(
-    {
-      order: props.detail.order,
-      rideHailing: props.ride,
-      bill: props.detail.bill,
-      payment: props.detail.payment,
-      mapViewModel: orderMapViewModel.value,
-    },
-    null,
-    2,
-  ),
-);
+const directImageSrc = (value: string | null | undefined): string | null => {
+  const normalized = value?.trim() ?? "";
+  if (!normalized) return null;
+  if (
+    normalized.startsWith("http://") ||
+    normalized.startsWith("https://") ||
+    normalized.startsWith("data:") ||
+    normalized.startsWith("blob:") ||
+    normalized.startsWith("/")
+  ) {
+    return normalized;
+  }
+  return null;
+};
+
+const formatFen = (amountFen: number | null | undefined): string => {
+  if (typeof amountFen !== "number") return "待确认";
+  return new Intl.NumberFormat("zh-CN", {
+    style: "currency",
+    currency: "CNY",
+  }).format(amountFen / 100);
+};
 </script>
 
 <style scoped lang="scss">
@@ -178,27 +328,122 @@ const rawDebugData = computed(() =>
   display: flex;
   min-width: 0;
   flex-direction: column;
-  padding: 0 var(--sys-spacing-medium) var(--sys-spacing-medium);
+  padding: 0 var(--sys-spacing-medium) var(--sys-spacing-large);
 }
 
-.ride-hailing-order-content__raw-data {
-  overflow: auto;
-  max-height: calc(100dvh - 6rem);
-  margin: 0;
-  border: 1px solid var(--sys-color-outline-variant);
-  border-radius: var(--sys-radius-medium);
-  padding: var(--sys-spacing-medium);
-  background: var(--sys-color-surface-container-low);
-  color: var(--sys-color-on-surface);
-  font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
-    "Courier New", monospace;
-  white-space: pre-wrap;
-  word-break: break-word;
+.ride-hailing-order-content__status-hero {
+  display: flex;
+  min-width: 0;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--sys-spacing-medium);
+}
+
+.ride-hailing-order-content__status-copy {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 0;
+  flex-direction: column;
+  gap: calc(var(--sys-spacing-xsmall) / 2);
+
+  h2,
+  p {
+    margin: 0;
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  h2 {
+    @include mx.pu-font(title);
+    color: var(--sys-color-on-surface);
+  }
+
+  p {
+    @include mx.pu-font(caption);
+    color: var(--sys-color-on-surface-variant);
+  }
+}
+
+.ride-hailing-order-content__status-actions {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--sys-spacing-xsmall);
+
+  span {
+    @include mx.pu-icon(small);
+  }
 }
 
-.ride-hailing-order-content__raw-data::selection {
-  background: var(--sys-color-primary-container);
-  color: var(--sys-color-on-surface);
+.ride-hailing-order-content__candidate-section {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--sys-spacing-small);
+  margin-top: var(--sys-spacing-medium);
+}
+
+.ride-hailing-order-content__facts {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--sys-spacing-large);
+  margin-top: var(--sys-spacing-xlarge);
+}
+
+.ride-hailing-order-content__fact-section {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--sys-spacing-small);
+
+  h3 {
+    @include mx.pu-font(section);
+    margin: 0;
+    color: var(--sys-color-on-surface);
+  }
+}
+
+.ride-hailing-order-content__route-list {
+  min-width: 0;
+}
+
+.ride-hailing-order-content__rider-list {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+}
+
+.ride-hailing-order-content__rider-row {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: var(--sys-spacing-small);
+  align-items: center;
+  padding: var(--sys-spacing-small) 0;
+  border-bottom: 1px solid var(--sys-color-outline-variant);
+
+  > span {
+    @include mx.pu-icon(medium);
+    color: var(--sys-color-on-surface-variant);
+  }
+
+  div {
+    display: flex;
+    min-width: 0;
+    flex-direction: column;
+    gap: calc(var(--sys-spacing-xsmall) / 2);
+  }
+
+  strong {
+    @include mx.pu-font(body);
+    color: var(--sys-color-on-surface);
+  }
+
+  small {
+    @include mx.pu-font(support);
+    color: var(--sys-color-on-surface-variant);
+  }
 }
 
 </style>
diff --git a/apps/frontend/src/domains/commerce/ui/ordering/RideHailingSkuCard.vue b/apps/frontend/src/domains/commerce/ui/ordering/RideHailingSkuCard.vue
index ccc93ef0d..273a88f9b 100644
--- a/apps/frontend/src/domains/commerce/ui/ordering/RideHailingSkuCard.vue
+++ b/apps/frontend/src/domains/commerce/ui/ordering/RideHailingSkuCard.vue
@@ -1,18 +1,18 @@
 <template>
   <PuCard
-    as="button"
+    :as="cardAs"
     class="ride-hailing-sku-card"
-    :class="{ 'is-selected': selected }"
-    type="button"
-    selectable
-    :active="selected"
-    :disabled="!selectable"
+    :class="{ 'is-readonly': readonly, 'is-selected': selected && !readonly }"
+    :type="cardType"
+    :selectable="!readonly"
+    :active="selected && !readonly"
+    :disabled="readonly ? undefined : !selectable"
     variant="soft"
     tone="neutral"
     padding="sm"
     gap="sm"
-    data-testid="ordering.ride-hailing.vehicle-card"
-    @click="$emit('select')"
+    :data-testid="dataTestId"
+    @click="handleSelect"
   >
     <div class="ride-hailing-sku-card__layout">
       <div class="ride-hailing-sku-card__meta">
@@ -40,6 +40,7 @@
         <div class="ride-hailing-sku-card__amount-stack">
           <strong>{{ priceLabel }}</strong>
           <span
+            v-if="!readonly"
             class="ride-hailing-sku-card__checkbox"
             :class="{ 'is-checked': selected }"
             :data-testid="
@@ -65,19 +66,30 @@
 import { PuCard, PuCheckbox } from "@partner-up-dev/design-web";
 import { computed, ref, watch } from "vue";
 
-const props = defineProps<{
-  displayName: string;
-  priceLabel: string;
-  selectable: boolean;
-  selected: boolean;
-  previewSrc?: string | null;
-}>();
+const props = withDefaults(
+  defineProps<{
+    displayName: string;
+    priceLabel: string;
+    selectable: boolean;
+    selected: boolean;
+    previewSrc?: string | null;
+    readonly?: boolean;
+  }>(),
+  {
+    readonly: false,
+  },
+);
 
-defineEmits<{
+const emit = defineEmits<{
   select: [];
 }>();
 
 const previewFailed = ref(false);
+const cardAs = computed(() => (props.readonly ? "article" : "button"));
+const cardType = computed(() => (props.readonly ? undefined : "button"));
+const dataTestId = computed(() =>
+  props.readonly ? "order-detail.ride-hailing.vehicle-card" : "ordering.ride-hailing.vehicle-card",
+);
 
 const resolvedPreviewSrc = computed(() => {
   const value = props.previewSrc?.trim() ?? "";
@@ -100,6 +112,11 @@ watch(
     previewFailed.value = false;
   },
 );
+
+const handleSelect = (): void => {
+  if (props.readonly || !props.selectable) return;
+  emit("select");
+};
 </script>
 
 <style scoped lang="scss">
@@ -108,6 +125,10 @@ watch(
   min-width: 0;
   border-radius: var(--sys-radius-small);
   text-align: left;
+
+  &.is-readonly {
+    cursor: default;
+  }
 }
 
 .ride-hailing-sku-card__layout {
diff --git a/tasks/ride-hailing-ui-fixes/archive/change-log-ordering-through-order-detail-map.md b/tasks/ride-hailing-ui-fixes/archive/change-log-ordering-through-order-detail-map.md
new file mode 100644
index 000000000..b7d921d9a
--- /dev/null
+++ b/tasks/ride-hailing-ui-fixes/archive/change-log-ordering-through-order-detail-map.md
@@ -0,0 +1,720 @@
+# Change Log
+
+## Slice: Packet Setup
+
+- Added task packet `tasks/ride-hailing-ui-fixes/` to replace the noisy
+  historical `tasks/ride-hailing-mvp/` packet for new focused UI fixes.
+- Added protocol requirement that Codex should raise objections when a proposed
+  slice may harm functionality, boundaries, maintainability, readability, or UI
+  contracts.
+- Added `discussion-log.md` and `change-log.md` for ongoing packet history.
+
+## Slice: RideHailing Ordering Content Layout
+
+- Committed `f7ac1aa3 fix(ride-hailing): align ordering content layout`:
+  - renamed `RideHailingOrderingPanel.vue` to
+    `RideHailingOrderingContent.vue`
+  - wired ride ordering content through the Ordering page shell as content
+  - added ride-only no-padding shell support
+  - removed `ordering-page__body` bottom padding
+  - split RideHailing bottom sheet and drawer control row into sibling layers
+  - changed price-detail toggle to a ghost circle `PuButton`
+- Verification:
+  - `pnpm check:type:frontend`
+  - explicit Biome check on changed frontend files
+  - `pnpm check:lint:frontend`
+
+## Slice: Evaluation And RideHailing SKU Model Clarification
+
+- Reorganized packet logs by event / slice instead of by calendar date.
+- Recorded current implementation findings:
+  - parent page evaluation currently owns price summary, create-order
+    availability, blocking notice, and RideHailing evaluated options
+  - RideHailing SKU options currently come from both catalog offer detail and
+    evaluated provider quote options
+- Recorded target model decision:
+  - parent-page evaluation becomes submit-time create-order pre-flight only
+  - footer price summary comes from Ordering Content
+  - RideHailing SKU list ownership moves fully into RideHailing Ordering Content
+  - parent-page evaluation no longer returns or owns `rideHailing.options`
+
+## Slice: Submit-Time Preflight And RideHailing SKU Ownership
+
+- Frontend:
+  - added `OrderingContentSummary` price summary model
+  - made Rental and RideHailing Ordering Content emit local price summary
+  - moved footer price label and price detail source from evaluation output to
+    Ordering Content summary
+  - removed parent-page auto-evaluate watch
+  - changed submit flow to `evaluate -> dialog if blocked/changed -> create`
+  - moved RideHailing quote option fetching into
+    `RideHailingOrderingContent`
+- Backend:
+  - added `POST /api/commerce/ordering/ride-hailing/options`
+  - removed `rideHailing.options` from ordering evaluation response
+  - added price explanations to RideHailing quote options
+  - avoided double-applying dynamic-quote pricing policy during RideHailing
+    pre-flight/create price resolution
+- Docs:
+  - updated `docs/20-product-tdd/ecommerce-contracts.md` for the submit-time
+    pre-flight model and RideHailing options endpoint.
+- Verification:
+  - `pnpm check:type:frontend`
+  - `pnpm check:type:backend`
+  - explicit `pnpm exec biome lint` on changed source files
+  - `pnpm check:lint:frontend`
+  - `pnpm check:lint:backend`
+  - `pnpm exec vitest run tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts --project system-scenario --reporter=verbose`
+
+## Slice: RideHailing Preflight Price-Change Scenario
+
+- Fake Caocao:
+  - added an admin-only `POST /__fake_caocao/estimates` test control route
+    for updating a vehicle estimate during scenario setup
+  - added `FakeCaocaoState.updateEstimate`
+  - covered estimate mutation in fake server state and HTTP server tests
+- Scenario:
+  - added
+    `commerce_ride_hailing_preflight_price_change_requires_confirmation`
+  - the scenario opens RideHailing Ordering with the original provider quote,
+    mutates the selected vehicle quote, clicks create order, verifies the
+    price-change confirmation dialog, verifies no provider order exists before
+    confirmation, then confirms and reaches order detail
+- Verification:
+  - `pnpm exec biome check --write packages/fake-caocao-server/src/state.ts packages/fake-caocao-server/src/routes.ts packages/fake-caocao-server/src/state.test.ts packages/fake-caocao-server/src/server.test.ts tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+  - `pnpm --filter @partner-up-dev/fake-caocao-server typecheck`
+  - `pnpm --filter @partner-up-dev/fake-caocao-server test`
+  - `pnpm exec vitest run tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts --project system-scenario --reporter=verbose`
+  - `pnpm check:type:backend`
+  - `pnpm check:type:frontend`
+
+## Slice: Choice-Set SKU And Float Panel Planning
+
+- Added
+  `tasks/ride-hailing-ui-fixes/choice-set-sku-float-panel-plan.md`.
+- Recorded pre-implementation information collection across:
+  - durable ecommerce contract
+  - backend catalog/order/ride-hailing/bill/job-runner implementation
+  - frontend ordering/order-detail implementation
+  - design-web primitive contracts
+  - current RideHailing system scenario expectations
+- Updated control and discussion logs to mark this slice as blocked on plan
+  review, Impact Handshake, and explicit `开始` before production-code work.
+
+## Slice: Choice-Set Plan Review Corrections
+
+- Revised the large-slice plan according to review:
+  - prioritize long-term clean domain model over low-risk shortcuts
+  - remove `productTypedExtraProperties.acceptableSkuIds` from the target
+  - promote command `items` to a generic discriminated union
+  - remove required create-time provider pre-binding from
+    `ride_hailing_orders`
+  - record cheapest-first dispatch policy
+  - record provider dispatch failure as order cancellation
+  - record final settlement billing as-is for provider substitution outside
+    candidates
+- Updated the sequence diagram to match the corrected command and provider
+  ownership model.
+
+## Slice: Choice-Set Dispatch Lifecycle Review
+
+- Revised the planning artifacts according to review:
+  - keep provider dispatch inside the create-order transaction for this slice
+    because dispatch is also RideHailing Order lifecycle
+  - store post-dispatch provider binding only in the choice-set resolution
+    snapshot
+  - cancel on provider create failure without retrying the next cheapest
+    candidate, another vehicle type, or another provider
+  - return the cancelled order id for provider create failure while keeping the
+    user on Ordering Page with a failure-reason dialog
+  - exclude Order Detail redesign from this slice and preserve the current
+    legacy detail implementation
+- Removed the previous async JobRunner dispatch direction from the active plan
+  and sequence diagram.
+
+## Slice: Choice-Set Final Plan Review
+
+- Reviewed the large-slice plan against current durable docs and key backend /
+  frontend code paths.
+- Added implementation-readiness findings to the plan:
+  - RideHailing SPUs need a native choice-set `SkuSelectionPolicy`
+  - provider order id moves with provider instance id into choice-set
+    resolution
+  - callback/detail/payment-confirmation paths need a shared provider-binding
+    reader
+  - Trade order-item helpers must become union-aware
+  - create-order result becomes a `CREATED` / `CANCELLED` discriminated union
+  - RideHailing preflight compares selected candidate range instead of total
+  - implementation should start with durable contract/schema/model changes
+
+## Slice: Choice-Set Backend Foundation Segment 1
+
+- Durable contract:
+  - updated `docs/20-product-tdd/ecommerce-contracts.md` for SKU-level
+    presentation, `CHOICE_SET` SKU selection policy, fixed vs choice-set command
+    items, create-order `CREATED` / `CANCELLED` result, RideHailing provider
+    binding ownership, and final bill timing.
+- Catalog/backend schema:
+  - added `product_skus.presentation` with an empty-presentation default
+  - extended SKU model/create/update/admin schemas/projections to carry SKU
+    presentation
+  - extended `SkuSelectionPolicy` with `CHOICE_SET`
+  - removed `ride_hailing_orders.provider_instance_id` and
+    `provider_order_id`
+- Trade/RideHailing model:
+  - promoted order item snapshots to a union of `FIXED` and `CHOICE_SET`
+  - added RideHailing choice-set candidate, quote, resolution, and provider
+    binding snapshots
+  - made order-item helpers fixed-aware and added RideHailing choice-set /
+    provider-binding readers
+  - added `TradeOrderRepository.replaceItems`
+- Create/evaluate lifecycle:
+  - promoted commerce command `items` to a generic discriminated union
+  - RideHailing submit/evaluate now use one `CHOICE_SET` item with candidate
+    SKU ids
+  - submit-time RideHailing evaluation quotes only selected candidates and
+    returns candidate range
+  - create-order creates an unresolved choice-set item, creates the
+    RideHailing order lifecycle row, dispatches cheapest-first, writes
+    provider binding into resolution, and opens the base order
+  - provider create failure marks the order cancelled and returns
+    `outcome: "CANCELLED"` with a user-displayable reason
+  - no retry is attempted against the next candidate/provider
+- Callback/detail/payment compatibility:
+  - Caocao callback, live detail projection, and provider fee confirmation now
+    recover provider binding from the choice-set resolution
+  - current Order Detail is preserved with compatibility SKU readers and legacy
+    selected-vehicle projection
+- Frontend bridge:
+  - RideHailing Ordering Content now emits a `CHOICE_SET` item; in segment 1 it
+    remains single-select, so the candidate set contains the selected SKU only
+  - Ordering Page compares preflight price ranges and branches on
+    create-order `CANCELLED` without navigating to Order Detail
+- Scenario/test updates:
+  - backend RideHailing foundation and Caocao callback scenarios were updated to
+    the choice-set / resolution provider-binding model
+  - RideHailing system scenario now expects selected-candidate pricing and a
+    provider-create-failure dialog
+- Verification:
+  - `pnpm check:type:backend`
+  - `pnpm check:type:frontend`
+  - `pnpm exec vitest run --config vitest.backend.config.ts --project backend-scenario apps/backend/tests/ride-hailing/ride-hailing-order-foundation.scenario.test.ts apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts`
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+  - `pnpm check:config:backend`
+  - `git diff --check`
+  - explicit `pnpm exec biome lint` on changed source/test files
+
+## Slice: Choice-Set Ordering UI Segment 2
+
+- RideHailing Ordering UI:
+  - migrated `RideHailingSkuCard` from a custom button implementation to
+    `PuCard selectable` composition
+  - composed `PuCheckbox` as the visual selection affordance while keeping the
+    card as the single interactive option target
+  - added SKU hero/detail image preview resolution with the existing direct URL
+    fallback rule; non-displayable asset ids fall back to the car icon preview
+  - migrated RideHailing selection state to `usePuSelect<number>` with
+    `multiple: true`
+  - default selection keeps the cheapest/default selectable candidate, and
+    additional card taps add/remove candidates
+  - Ordering Content now submits actual multi-candidate `CHOICE_SET`
+    candidate ids and derives footer range from the selected candidate set
+  - price explanations are taken from the cheapest selected candidate as the
+    dispatch basis
+- Float panel:
+  - replaced the custom absolute bottom sheet with `PuFloatPanel`
+  - added three stops: minimized, normal, expanded
+  - panel stops are calculated from the Ordering Content container height via
+    `ResizeObserver`
+  - route-map fit padding now follows the active panel stop while preserving the
+    bottom control row as a sibling layer
+- Scenario:
+  - updated RideHailing system scenario to select both 快车 and 专车, assert the
+    selected candidate price range, and expect cheapest-first dispatch to 快车
+  - updated price-change dialog expectation from single-price comparison to
+    selected-candidate range comparison
+- Verification:
+  - `pnpm check:type:frontend`
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+  - `pnpm exec biome lint apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue apps/frontend/src/domains/commerce/ui/ordering/RideHailingSkuCard.vue tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+  - `git diff --check`
+
+## Slice: Choice-Set SKU Card Layout Remediation Segment 3
+
+- RideHailing SKU Card:
+  - corrected the Segment 2 card from a list-item-like layout to the reviewed
+    left/right layout
+  - left side now owns SKU name + info icon and the SKU preview area
+  - right side now owns estimated text, amount, and checkbox, all right-aligned
+  - checkbox now sits below the amount
+  - removed the card-internal status/reason display concept; unavailable quoted
+    options continue to be hidden by the list layer
+  - removed the 420px media rule that hid the preview
+  - kept `PuCard selectable`, visual-only `PuCheckbox`, `usePuSelect`
+    multi-select ownership, preview fallback, and semantic test ids stable
+- Verification:
+  - `pnpm exec biome format --write apps/frontend/src/domains/commerce/ui/ordering/RideHailingSkuCard.vue apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue`
+  - `pnpm exec biome lint apps/frontend/src/domains/commerce/ui/ordering/RideHailingSkuCard.vue apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue`
+  - `pnpm check:type:frontend`
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+  - `git diff --check`
+
+## Slice: Offer Listing And Quote Identity
+
+- Backend:
+  - added persisted product-type-independent `commerce_quotes`
+  - added `CommerceQuoteRepository`
+  - added Offer-owned `POST /api/commerce/offers/:offerId/listing`
+  - added typed RideHailing provider quote output for estimate adapters
+  - added Quote-domain quote-bound order item resolver
+  - made create-order product items quote-only:
+    `FIXED.quoteId` and `CHOICE_SET.candidateQuoteIds`
+  - moved participants, Rental registrants/contact, RideHailing riders/contact,
+    route, departureAt, price, SKU, and Offer facts into validated quote/listing
+    snapshots
+  - removed old backend `/ordering/evaluate`,
+    `/ordering/ride-hailing/options`, and unused `evaluateRideOptions`
+    surfaces
+  - quote expiry now returns HTTP 409 with code `ORDERING_QUOTE_EXPIRED`
+- Frontend:
+  - added `useOfferListing`
+  - migrated Rental Ordering Content to unified listing quotes
+  - migrated RideHailing Ordering Content to unified listing quotes keyed by
+    route + departureAt
+  - removed create-order preflight/evaluate orchestration from the Ordering
+    Page
+  - quote-expired create failure refreshes listing, preserves matching selected
+    SKU ids, and requires a second explicit create click
+  - added imported departure-time prompt with default "now" behavior and drawer
+    apply action
+  - updated the imported departure-time prompt to display the concrete imported
+    date/time value, not only a generic "has departure time" message
+  - added a Drawer one-tap "现在出发" action so users can switch back from an
+    imported/manual departure time to depart-now
+  - removed `data-testid` attributes from `PuDialog` calls that could not
+    inherit them and caused Vue warnings
+- Durable docs:
+  - updated `docs/20-product-tdd/ecommerce-contracts.md` for Offer Listing,
+    quote identity, quote-only create-order payloads, Quote-owned validity, and
+    quote-expired HTTP 409 behavior
+- Scenario:
+  - replaced the old RideHailing price-change preflight scenario with
+    quote-expired refresh/preserve-selection coverage
+  - updated Rental PR blocker scenarios to assert create-click dialog behavior
+    after unified listing quote issuance
+- Verification:
+  - `pnpm check:type:backend`
+  - `pnpm check:type:frontend`
+  - `pnpm check:type:frontend` after the imported departure-time display
+    follow-up
+  - `pnpm check:type:frontend` after the Drawer depart-now follow-up
+  - `pnpm check:format`
+  - `pnpm check:lint`
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+    after the imported departure-time display follow-up
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+    after the Drawer depart-now follow-up
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/rental-ordering.scenario.test.ts`
+- Non-blocking:
+  - `pnpm check:lint` reports the existing report-only naming audit finding for
+    `RideHailingOrderingContent`; this is intentionally retained because the
+    name matches the reviewed Ordering shell content role.
+
+## Slice: Offer Listing And Quote Identity Test Hardening
+
+- Fake Caocao:
+  - added a test-control estimate availability switch per car type
+  - unavailable estimate requests now return provider failure, letting the
+    Offer Listing resolver exercise its "omit unavailable SKU" behavior
+- RideHailing system scenario:
+  - added coverage that a provider-unavailable vehicle type is hidden from the
+    Ordering Page SKU list
+  - added coverage that quote-expired refresh preserves still-listed selected
+    SKUs but prunes selected SKUs that disappeared from the refreshed listing
+  - added coverage that all provider-unavailable vehicle types produce no
+    vehicle cards, a pending price, a disabled create action, and no provider
+    order
+- Backend Quote-domain scenario:
+  - added coverage that quote validity rejects inactive Offer and inactive SKU
+  - added coverage that `CHOICE_SET` candidate quotes must come from one
+    `listingSessionId`
+- Verification:
+  - `pnpm exec vitest run --project backend-scenario apps/backend/tests/commerce/offer-quote-resolution.scenario.test.ts`
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+  - `pnpm check:type:backend`
+  - `pnpm check:type:frontend`
+  - `pnpm --filter @partner-up-dev/fake-caocao-server typecheck`
+  - `pnpm exec biome check packages/fake-caocao-server/src/state.ts packages/fake-caocao-server/src/routes.ts tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts apps/backend/tests/commerce/offer-quote-resolution.scenario.test.ts`
+  - `git diff --check`
+
+## Slice: Ordering Error Feedback Simplification
+
+- Frontend:
+  - removed `OrderingFloatingNoticeLayer` from `OrderingFromPlacementPage`
+  - deleted the unused floating notice component
+  - removed the duplicate floating error-message state now that create-order
+    failures and quote-expired cases are explained by Dialog
+- Verification:
+  - `pnpm check:type:frontend`
+  - `pnpm exec biome check apps/frontend/src/pages/OrderingFromPlacementPage.vue`
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/rental-ordering.scenario.test.ts`
+  - `git diff --check`
+
+## Slice: RideHailing SKU List Loading Skeleton
+
+- Frontend:
+  - added `PuSkeleton` placeholders inside the RideHailing SKU list area
+  - skeletons follow the reviewed vehicle-card left/right layout shape
+  - skeletons show only for the initial listing load when no visible quote
+    options exist; background refetch keeps the existing cards visible
+- Verification:
+  - `pnpm check:type:frontend`
+  - `pnpm exec biome check apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue`
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+  - `git diff --check`
+
+## Slice: Offer Listing And Quote Identity Planning
+
+- Added standalone plan:
+  `tasks/ride-hailing-ui-fixes/offer-listing-quote-identity-plan.md`.
+- Captured accepted direction:
+  - public listing query uses `offerId`
+  - listing is Offer-owned because it includes commercial membership and price
+  - RideHailing dynamic availability depends on route and departure time
+  - RideHailing unavailable SKUs are omitted, not returned as
+    `selectable=false`
+  - Provider Port should return typed app-level quote shapes instead of
+    `unknown`
+  - listing returns quote identity and create-order submits quote identity
+  - expired quote replaces RideHailing price-diff preflight
+- Added plan review sections covering owner fit, main objections/risks, and
+  review questions before implementation.
+- Revised the plan after review:
+  - quote identity is now product-type-independent and commerce/order native,
+    not RideHailing-specific
+  - order and pricing should support quote ids natively
+  - create-order should derive Offer/SKU/route/departureAt/price from quote
+    snapshots instead of repeating them in the payload
+  - quote snapshots are persisted in the database
+  - expired quote is HTTP 409 problem details with a stable code
+  - the route shape is fixed as `POST /api/commerce/offers/:offerId/listing`
+- Re-reviewed the plan for maintainability, readability, and complexity:
+  - moved quote existence, expiry, active Offer/SKU, membership, and
+    listing-context coherence behind a Quote-domain validity resolver
+  - rejected `QUOTE_SET` as a command item kind and kept order item semantics as
+    `FIXED` / `CHOICE_SET` with quote ids as evidence fields
+  - renamed the working domain concept from `CommerceQuoteSnapshot` to
+    `OfferQuote`
+  - renamed `listingId` to `listingSessionId`
+  - clarified that generic quote JSON snapshots are persistence envelopes and
+    must be decoded before Order, Pricing, or RideHailing lifecycle consumes
+    them
+  - added topology and sequence reviews to the standalone plan
+- Revised the plan after additional review:
+  - corrected the frontend topology so Ordering Content emits quote-bound draft
+    state and Ordering Page / shell calls Create Order
+  - resolved quote-expired refresh behavior as preserving matching selected SKU
+    ids while still requiring a second click
+  - resolved create-order product item payload as quote-only, excluding
+    participants/riders/contact phone
+  - resolved Rental migration into the unified Offer Listing endpoint for this
+    slice
+  - added `quoteId` to fixed listed items and renamed RideHailing listed item
+    kind from `QUOTE` to `CHOICE_CANDIDATE`
+
+## Slice: Ordering Entry Decoupling Planning
+
+- Added standalone plan:
+  `tasks/ride-hailing-ui-fixes/ordering-entry-decoupling-plan.md`.
+- Captured current coupling:
+  - PR Page owns existing-order lookup, Placement ordering-entry resolution,
+    raw `sessionStorage` write, and `/order/new` navigation
+  - Ordering Page and Ordering Support duplicate raw handoff parsing
+  - backend Placement ordering-entry already owns binding/context resolution
+- Captured target direction:
+  - Button Placement or its dedicated composable owns the
+    Placement-to-Ordering entry flow
+  - existing-order lookup, Placement ordering-entry resolution, handoff write,
+    and `/order/new` navigation all move out of PR Page
+  - PR Page may pass `matchingContext` and `prId` to Button Placement
+  - Ordering handoff moves behind a Commerce/Ordering Pinia store
+  - `/order/new` keeps its route path/name but the page becomes generic
+    `OrderingPage`
+  - PR Page only mounts Button Placement and passes matching context
+
+## Slice: Ordering Entry Decoupling Implementation
+
+- Frontend:
+  - added `useOrderingHandoffStore` for `OrderingEntryPayload`
+  - added payload normalization/parsing helpers beside the ordering-entry model
+  - moved existing-order lookup, Placement ordering-entry resolution, handoff
+    write, and navigation into `usePlacementOrderingEntryFlow`
+  - updated `ButtonPlacement` to call the entry-flow composable directly and
+    accept `prId`
+  - removed Commerce/Ordering entry-flow logic from `PRPage`
+  - renamed `OrderingFromPlacementPage.vue` to `OrderingPage.vue`
+  - updated `/order/new` lazy import without changing route path/name
+  - updated `OrderingSupportPage` to read ordering entry handoff from the same
+    store
+- Durable docs:
+  - updated ecommerce contract to assign entry-flow ownership to Button
+    Placement and the Commerce Ordering handoff store
+- Verification:
+  - `pnpm check:type:frontend`
+  - `pnpm exec biome check apps/frontend/src/app/router.ts apps/frontend/src/pages/PRPage.vue apps/frontend/src/pages/OrderingPage.vue apps/frontend/src/pages/OrderingSupportPage.vue apps/frontend/src/domains/commerce/model/ordering-entry-storage.ts apps/frontend/src/domains/commerce/queries/useCommerce.ts apps/frontend/src/domains/commerce/ui/ButtonPlacement.vue apps/frontend/src/domains/commerce/use-cases/useOrderingHandoffStore.ts apps/frontend/src/domains/commerce/use-cases/usePlacementOrderingEntryFlow.ts docs/20-product-tdd/ecommerce-contracts.md tasks/ride-hailing-ui-fixes/control.md tasks/ride-hailing-ui-fixes/discussion-log.md tasks/ride-hailing-ui-fixes/change-log.md tasks/ride-hailing-ui-fixes/ordering-entry-decoupling-plan.md`
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/rental-ordering.scenario.test.ts`
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+  - `git diff --check`
+
+## Slice: Durable Docs Promotion
+
+- PRD:
+  - added PR-attached commerce ordering workflow to
+    `docs/10-prd/behavior/workflows.md`
+  - added commerce ordering invariants to
+    `docs/10-prd/behavior/rules-and-invariants.md`
+  - added stable commerce terms to `docs/10-prd/glossary.md`
+- Product TDD:
+  - corrected `docs/20-product-tdd/system-state-and-authority.md` so
+    RideHailing provider binding is owned by Trade order choice-set resolution,
+    not `ride_hailing_orders`
+  - refined `docs/20-product-tdd/ecommerce-contracts.md` for `/order/new`
+    ordering topology, `offerDetail` projection semantics, departure-time
+    binding UX, quote-expired selection preservation, and RideHailing
+    cancelled-create behavior
+- Verification:
+  - `pnpm check:format` (markdown files are ignored by Biome changed-file
+    formatting; command completed successfully with no processed files)
+  - `git diff --check`
+  - `rg` stale-contract search for old Offer Detail ordering, old
+    `OrderingFromPlacementPage`, old provider-binding wording, old
+    evaluate/options endpoints, and `selectable=false`
+
+## Slice: RideHailing Order Detail Mock Control Planning
+
+- Added standalone plan:
+  `tasks/ride-hailing-ui-fixes/order-detail-mock-control-plan.md`.
+- Recorded diagnosis:
+  - fake Caocao currently advances order phase on provider detail reads
+  - Order Detail polling every 1500 ms indirectly drives fake lifecycle
+  - backend callbacks from those fake reads move persisted execution phase and
+    create final bill after `FINISHED`
+- Proposed direction:
+  - make fake provider detail reads read-only by default
+  - add explicit fake admin/test-control routes for phase set/advance
+  - post callbacks from explicit fake lifecycle controls
+
+## Slice: RideHailing Order Detail Mock Control Implementation
+
+- Fake Caocao:
+  - made `/common/queryOrderDetailV2` read-only for order phase
+  - replaced read-driven phase advancement with explicit state helpers for
+    setting and advancing order phase
+  - added fake control routes:
+    `POST /__fake_caocao/orders/latest/advance`,
+    `POST /__fake_caocao/orders/:providerOrderId/advance`, and
+    `POST /__fake_caocao/orders/:providerOrderId/phase`
+  - control routes post the corresponding provider callback after moving fake
+    state, so backend order execution state still changes through provider
+    callback handling
+  - preserved create-time accepted callback behavior
+- Frontend Admin:
+  - added a separate dev-only RideHailing Provider Instance debug card
+  - the card directly calls the selected provider instance
+    `config.endpointBaseUrl` fake Caocao control route
+  - no backend admin proxy was introduced
+- Scenario:
+  - strengthened RideHailing order-detail scenario coverage so repeated detail
+    polling does not auto-advance fake provider phase past `ACCEPTED`
+- Verification:
+  - `pnpm --filter @partner-up-dev/fake-caocao-server typecheck`
+  - `pnpm --filter @partner-up-dev/fake-caocao-server test`
+  - `pnpm check:type:frontend`
+  - `pnpm exec biome check packages/fake-caocao-server/src/state.ts packages/fake-caocao-server/src/routes.ts packages/fake-caocao-server/src/state.test.ts packages/fake-caocao-server/src/server.test.ts apps/frontend/src/pages/AdminRideHailingPage.vue tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+  - `git diff --check`
+
+## Slice: RideHailing Order Detail Content Redesign Planning
+
+- Added standalone plan:
+  `tasks/ride-hailing-ui-fixes/order-detail-ride-hailing-content-plan.md`.
+- Recorded current implementation facts:
+  - RideHailing detail content is still inline in `CommerceOrderDetailPage.vue`
+  - current detail map is a CSS placeholder
+  - no extracted `RideHailingOrderContent` component exists yet
+  - current scenario IDs to preserve are
+    `order-detail.ride-hailing.page`,
+    `order-detail.ride-hailing.selected-vehicle`, and
+    `order-detail.ride-hailing.route-summary`
+- Recorded target direction:
+  - use `PuPageScaffold padding="none"` for Order Detail Page
+  - extract RideHailing full-screen map / float-panel content into
+    `RideHailingOrderContent.vue`
+  - reuse shared `RouteMap` and `PuFloatPanel`
+  - keep Rental detail on the existing card-stack path
+
+## Slice: RideHailing Order Detail Content Redesign Implementation
+
+- Frontend:
+  - changed `CommerceOrderDetailPage.vue` to
+    `PuPageScaffold viewport="screen" width="full" padding="none"`
+  - kept Rental order detail on the existing document/card stack with explicit
+    page-local padding and max width
+  - extracted RideHailing order detail UI into
+    `apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue`
+  - replaced the CSS fake route illustration with shared immersive `RouteMap`
+  - added a RideHailing bottom `PuFloatPanel` with overview, detail, and
+    expanded stops
+  - preserved existing RideHailing Order Detail scenario test ids on
+    equivalent semantic nodes
+- Verification so far:
+  - `pnpm check:type:frontend`
+  - `pnpm exec biome check apps/frontend/src/pages/CommerceOrderDetailPage.vue apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue tasks/ride-hailing-ui-fixes/control.md tasks/ride-hailing-ui-fixes/discussion-log.md tasks/ride-hailing-ui-fixes/change-log.md tasks/ride-hailing-ui-fixes/order-detail-ride-hailing-content-plan.md`
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/rental-ordering.scenario.test.ts`
+
+## Slice: RideHailing Order Detail Map And Live Route Planning
+
+- Added standalone plan:
+  `tasks/ride-hailing-ui-fixes/order-detail-ride-hailing-map-plan.md`.
+- Recorded current implementation gaps:
+  - Order Detail map currently renders only persisted planned route geometry
+  - backend projection lacks provider live route, vehicle coordinate, and
+    vehicle heading
+  - local RideHailing lifecycle lacks an arrived-at-pickup phase
+  - `RouteMap` is generic and should not absorb RideHailing lifecycle semantics
+- Recorded target model:
+  - introduce typed provider order detail, driver location, and driver route
+    snapshots
+  - promote Caocao driver-location and pickup/dropoff route APIs into the
+    provider port
+  - add `ARRIVED_AT_PICKUP` to RideHailing execution phase
+  - build a pure frontend map view-model for phase-specific map rendering
+- Recorded verification direction:
+  - fake Caocao unit coverage for phase/live geometry
+  - backend provider/callback projection coverage
+  - frontend pure map view-model tests
+  - RideHailing system scenario coverage for accepted, arrived, in-trip, and
+    finished map states
+
+## Slice: RideHailing Order Detail Map And Live Route Backend Segment
+
+- Provider port:
+  - changed `RideHailingProviderPort.queryOrderDetail` from raw `unknown` to
+    typed `RideHailingProviderOrderDetail`
+  - added typed `queryDriverLocation` and `queryDriverRoute` provider methods
+  - added provider-level coordinate, vehicle-location, and navigation-route
+    models
+- Caocao adapter:
+  - normalizes `queryOrderDetailV2` into typed driver, vehicle, status label,
+    final amount, and optional vehicle location snapshots
+  - implements `queryDriverLocationByOrderId`
+  - implements `queryDriverPolylineV2` and parses route kind, polyline,
+    remaining distance/time, traffic-light count, and ETA vehicle location
+- RideHailing lifecycle:
+  - added local execution phase `ARRIVED_AT_PICKUP`
+  - corrected Caocao callback mapping for accepted, arrived, in-trip,
+    finished, and cancellation events
+  - preserves current execution phase for non-lifecycle Caocao events such as
+    route/price/invoice style callbacks
+- Order Detail projection:
+  - strips provider raw snapshots before returning `ride.live`
+  - includes typed `vehicleLocation` and `navigationRoute`
+  - keeps provider location/route query failures from failing the whole Order
+    Detail projection
+- Fake Caocao:
+  - added fake `ARRIVED_AT_PICKUP`
+  - changed explicit advance chain to
+    `CREATED -> ACCEPTED -> ARRIVED_AT_PICKUP -> IN_TRIP -> FINISHED`
+  - stores fake order origin/destination from order-create route params
+  - added fake driver location and route V2 endpoints
+  - switched fake callbacks to official-like lifecycle events while preserving
+    create-time accepted callback behavior
+- Verification:
+  - `pnpm --filter @partner-up-dev/fake-caocao-server typecheck`
+  - `pnpm --filter @partner-up-dev/fake-caocao-server test`
+  - `pnpm --dir apps/backend exec tsc --noEmit -p tsconfig.json`
+  - `pnpm --dir apps/frontend exec vue-tsc --noEmit`
+  - `pnpm exec vitest run --config vitest.backend.config.ts --project backend-unit -t "Caocao"`
+  - `pnpm exec vitest run --config vitest.backend.config.ts --project backend-scenario -t "Caocao callback"`
+  - `pnpm exec vitest run --config vitest.config.ts --project system-scenario -t "commerce_ride_hailing_ordering_reaches_order_detail"`
+  - `pnpm exec biome format --write` on the changed backend/fake files
+  - `git diff --check`
+
+## Slice: RideHailing Order Detail Map And Live Route Frontend Segment
+
+- Route map:
+  - added generic `extraMarkers` and `extraPolylines` props to `RouteMap`
+  - added `showFallbackPolyline` so callers can hide RouteMap's straight-line
+    fallback when a domain-specific mode needs marker-only geometry
+  - kept RideHailing lifecycle semantics out of `RouteMap`
+- RideHailing Order Detail:
+  - added a pure `buildRideHailingOrderMapViewModel` helper
+  - maps `DISPATCHING` / `INITIATING` to an origin-focused searching mode
+  - maps `ACCEPTED` to provider pickup route plus driver marker when live data
+    is available
+  - maps `ARRIVED_AT_PICKUP` to driver-marker-only display
+  - maps `IN_TRIP` to provider remaining route plus driver marker, with muted
+    planned-route fallback when provider route is unavailable
+  - keeps `FINISHED`, `CANCELLED`, and `FAILED` on planned route behavior
+  - uses only local `ride.executionPhase` to decide map mode; provider live
+    phase/status no longer advances map state ahead of the persisted lifecycle
+  - added fallback copy for the arrived-at-pickup phase
+  - exposes `data-map-mode` on the route map for stable scenario assertions
+  - temporarily replaced the `PuFloatPanel` content with raw order /
+    RideHailing / bill / payment / map-view-model JSON for manual diagnosis
+  - removed the temporary absolute-positioned ripple overlay because it was not
+    actually bound to the route origin marker
+- Tests:
+  - added frontend unit tests for the RideHailing map view-model phase matrix
+  - extended the RideHailing system scenario to manually advance fake Caocao
+    through accepted, arrived-at-pickup, in-trip, and finished map modes
+  - system scenario now verifies initial post-create local `DISPATCHING`
+    remains `SEARCHING_ORIGIN`, then explicitly posts accepted callback before
+    expecting pickup geometry
+- Verification:
+  - `pnpm --dir apps/frontend exec vue-tsc --noEmit`
+  - `pnpm exec vitest run --config vitest.config.ts --project frontend-unit -t "buildRideHailingOrderMapViewModel"`
+  - `pnpm exec vitest run --config vitest.config.ts --project system-scenario -t "commerce_ride_hailing_ordering_reaches_order_detail"`
+  - `pnpm --filter @partner-up-dev/fake-caocao-server typecheck`
+  - `pnpm --filter @partner-up-dev/fake-caocao-server test`
+  - `pnpm --dir apps/backend exec tsc --noEmit -p tsconfig.json`
+  - `pnpm exec biome format --write` on the changed frontend/scenario files
+  - `git diff --check`
+
+## Slice: RideHailing Order Detail Map Manual Review Corrections
+
+- Shared Tencent map provider:
+  - changed single-coordinate fitting from `easeTo(center)` to a tiny
+    `fitBounds` area so `fitPadding` is respected for one active marker
+  - preserved the existing single-point max zoom cap
+  - kept the fix generic in shared map infrastructure rather than adding a
+    RideHailing-specific offset
+- RideHailing impact:
+  - `DISPATCHING` origin focus can now account for the bottom `PuFloatPanel`
+    overlay when the active geometry is only `route-point-0`
+- Verification:
+  - `pnpm --dir apps/frontend exec vue-tsc --noEmit`
+  - `pnpm exec vitest run --config vitest.config.ts --project frontend-unit -t "buildRideHailingOrderMapViewModel"`
+  - `pnpm exec biome check apps/frontend/src/shared/map/tencent/tencent-lbs-provider.ts`
+  - `git diff --check -- apps/frontend/src/shared/map/tencent/tencent-lbs-provider.ts`
+
+## Planned Slice: RideHailing Order Detail PuFloatPanel Content
+
+- Planned panel content:
+  - replace raw JSON diagnostic content
+  - add Status Hero with status title/description, cancel action, and more
+    operation button
+  - show readonly RideHailing SKU candidate cards only while dispatching
+  - add larger spacing before lifecycle-independent ride facts
+  - render exactly two ride fact sections: route and riders
+- Planned component support:
+  - extend `RideHailingSkuCard` with a readonly/no-checkbox shape while keeping
+    the Ordering Page default selectable behavior unchanged
+- Explicit non-goals:
+  - no provider facts
+  - no bill/payment facts
+  - no driver facts
+  - no extra card stack or summary content
diff --git a/tasks/ride-hailing-ui-fixes/archive/discussion-log-ordering-through-order-detail-map.md b/tasks/ride-hailing-ui-fixes/archive/discussion-log-ordering-through-order-detail-map.md
new file mode 100644
index 000000000..7dcd9abc4
--- /dev/null
+++ b/tasks/ride-hailing-ui-fixes/archive/discussion-log-ordering-through-order-detail-map.md
@@ -0,0 +1,1234 @@
+# Discussion Log
+
+## Slice: Packet Reset And Collaboration Protocol
+
+- Created a clean task packet for incremental RideHailing Ordering UI and Order
+  Detail UI fixes.
+- Confirmed collaboration protocol:
+  - perform Impact Handshake before every production-code fix
+  - wait for explicit `开始` before implementation
+  - do not auto-commit unless explicitly requested
+  - raise objections when requested changes may damage functionality,
+    ownership boundaries, maintainability, readability, or established UI
+    contracts
+
+## Slice: RideHailing Ordering Content Layout
+
+- Implemented and committed:
+  `f7ac1aa3 fix(ride-hailing): align ordering content layout`.
+- Naming decision:
+  `RideHailingOrderingContent` should match the Ordering page shell assembly
+  concepts: header, content, and footer / bottom action bar.
+- Layout decision:
+  RideHailing content should use a no-padding Ordering shell; content and footer
+  should sit directly adjacent.
+- Layout decision:
+  `ordering.ride-hailing.drawer-control-row` is a sibling of
+  `ordering.ride-hailing.bottom-sheet`, anchored at the content bottom and
+  visually separated with `surface-container`.
+
+## Investigation: Current Evaluation And SKU Ownership Model
+
+- Observed model concern:
+  changing the selected RideHailing SKU currently feeds into ordering
+  evaluation, which re-evaluates and replaces the whole RideHailing options
+  payload.
+- Clarified current implementation:
+  - Ordering parent page evaluation owns price summary, create-order
+    availability, error notice text, and RideHailing evaluated option payload.
+  - Current RideHailing SKU list has two effective sources: catalog SKU
+    candidates from `offerDetail.spus[].skuOptions`, and provider-priced
+    options from `/api/commerce/ordering/evaluate`.
+  - Switching selected RideHailing SKU changes evaluation input, which triggers
+    a full evaluate request and replaces the evaluated options array.
+- Problem statement:
+  candidate discovery, selected SKU state, quote refresh, price summary, and
+  create-order pre-flight validation are currently coupled through one
+  evaluation model.
+
+## Decision: Target Evaluation And RideHailing SKU Model
+
+- `evaluationOrderInput` should be produced and evaluated only after the user
+  clicks the submit / create-order button.
+- Evaluation should act as create-order pre-flight:
+  - if key data such as quoted price has changed from what the page displayed,
+    show a dialog asking whether the user wants to continue with the changed
+    terms
+  - if blocking reasons exist, such as PR readiness or other create-order
+    pre-flight failures, show a dialog with only an acknowledgement action
+  - after a successful evaluation, request create order
+- `ordering-footer-action-bar__price-summary`, including price and price detail,
+  should come from Ordering Content output, not from parent-page evaluation.
+- RideHailing SKU list data ownership belongs to `RideHailingOrderingContent`.
+- Parent-page evaluation should not include `rideHailing.options` and should
+  not feed evaluated options back into `RideHailingOrderingContent`.
+
+## Slice: Submit-Time Preflight And RideHailing SKU Ownership
+
+- Impact Handshake accepted with explicit `开始`.
+- Implementation decision:
+  parent page still builds the same create-order command shape, but only calls
+  `POST /api/commerce/ordering/evaluate` inside the submit handler.
+- Implementation decision:
+  RideHailing content owns quote option loading through a dedicated
+  `POST /api/commerce/ordering/ride-hailing/options` endpoint keyed by
+  `offerId + route`, not by selected SKU.
+- Implementation decision:
+  Ordering Content emits a local price summary for the footer and price-detail
+  drawer; the parent page no longer reads footer price from evaluation output.
+- Implementation decision:
+  evaluate still performs authoritative submit-time pre-flight and pricing, but
+  its response no longer contains product-specific RideHailing option lists.
+- Runtime finding:
+  moving the quote query into `RideHailingOrderingContent` caused setup-time
+  evaluation of `rideRouteForSubmit`; its route conversion helper had to be
+  declared before the computed chain to avoid a JavaScript temporal dead zone.
+- Verification result:
+  the focused RideHailing system scenario passes after the TDZ fix.
+
+## Investigation: RideHailing Ordering Map Appears Gray
+
+- Observed report:
+  RideHailing Ordering page map appeared gray in the user's browser, while
+  price, SKU list, and selected SKU behavior looked correct.
+- Browser reproduction finding:
+  local Playwright reproduction loaded Tencent Maps SDK, direction JSONP, map
+  canvas, controls, attribution, and endpoint labels without failed requests.
+- Warning finding:
+  the Vue warning about `data-testid` on `PuDialog` is unrelated to the map; it
+  comes from passing an inheritable attribute to a dialog component whose root
+  cannot inherit attributes automatically.
+- Final classification:
+  the gray-map observation was confirmed by the user to be a browser-client
+  issue, not a product-code or shared-map implementation issue.
+- Follow-up decision:
+  do not change shared map code for this observation. Keep the remaining active
+  need focused on adding the RideHailing preflight price-change scenario.
+
+## Slice: RideHailing Preflight Price-Change Scenario
+
+- Impact Handshake accepted with explicit `开始`.
+- Scenario need:
+  RideHailing must cover the case where the page displays one provider quote,
+  then submit-time pre-flight receives a changed quote and asks the user whether
+  to continue.
+- Test-support decision:
+  the cleanest way to create this state is a fake Caocao admin-only estimate
+  mutation route. This avoids adding artificial hooks to production commerce or
+  provider adapter code.
+- Scenario decision:
+  assert not only that the price-change dialog appears, but also that no fake
+  provider order exists before the user confirms. This proves the pre-flight
+  confirmation gates order creation rather than merely appearing in parallel.
+- Selector decision:
+  the scenario does not use `ordering.preflight-dialog` because `PuDialog`
+  cannot inherit that `data-testid` reliably. It asserts visible dialog text and
+  the `继续下单` action instead.
+
+## Investigation: RideHailing SKU Card, Multi-Select, And Float Panel
+
+- Requested next slice:
+  migrate RideHailing SKU card to package primitives, make the vehicle option
+  list use `usePuSelect` with multi-select, and replace the custom bottom sheet
+  with `PuFloatPanel`.
+- Design-web finding:
+  `PuCard` supports `selectable` and `active`, `PuCheckbox` is a boolean native
+  checkbox primitive, `usePuSelect` supports single and multiple selection
+  state, and `PuFloatPanel` supports bottom-attached draggable height stops.
+- Design-web caveat:
+  `PuCard` usage guidance says interactive cards must not contain nested
+  interactive controls. A card plus checkbox composition must avoid creating
+  two independent focusable controls for one option.
+- SKU presentation finding:
+  current durable merchandising contract gives `presentation` to SPU only.
+  `product_skus`, admin SKU input, create/update SKU use cases, and
+  `OrderingOfferDetailSku` do not currently expose SKU-level presentation or
+  image fields.
+- Model concern:
+  RideHailing ordering currently has an `EXACTLY_ONE` SKU selection policy and
+  order/evaluation commands use concrete `items: [{ skuId, quantity }]`.
+  A multi-select vehicle UI should likely represent a quote candidate set /
+  user preference set, while the create-order command still needs one selected
+  SKU unless the order model is deliberately widened.
+- Implementation boundary to confirm:
+  this slice may need a small catalog-contract expansion for SKU preview images
+  and a frontend summary/output model change so Ordering Shell can receive
+  multi-selected quote data without confusing it with the authoritative
+  create-order item.
+- Human decision:
+  SKU should own full `ProductPresentation`, not a reduced preview-only
+  presentation field.
+- Human decision:
+  RideHailing vehicle selection should be multi-select. A user selects multiple
+  acceptable vehicle SKUs; dispatch should search for a suitable driver within
+  that selected SKU set.
+- Interaction decision:
+  the `PuCard` + `PuCheckbox` composition should behave as one unified option
+  target, avoiding independent nested card and checkbox interactions.
+
+## Model Direction: Choice-Set Order Item For RideHailing
+
+- Human model proposal:
+  extend the Order model so it can natively represent the RideHailing shape:
+  the user orders a set of acceptable products, while fulfillment ultimately
+  grants exactly one product from that set.
+- Model correction:
+  `productTypedExtraProperties.acceptableSkuIds` is cleaner than overloading
+  `items` with multiple ordinary order items, but it may still be too
+  product-specific if the same "choose one from this acceptable set" shape is a
+  first-class Order concept.
+- Emerging order-item distinction:
+  ordinary order item means "the user buys/receives this SKU"; RideHailing needs
+  a choice-set item meaning "the user authorizes this SKU set, and the system or
+  provider resolves one final SKU before or during fulfillment."
+- Candidate vocabulary:
+  - `ORDER_ITEM_FIXED`: one concrete SKU is ordered
+  - `ORDER_ITEM_CHOICE_SET`: several candidate SKUs are ordered as one logical
+    item, with one eventually resolved SKU
+- Important invariant under discussion:
+  billing, order detail, provider dispatch, and audit need both the candidate
+  SKU set and the resolved SKU snapshot. The resolved SKU cannot erase the
+  accepted candidate set because the user's consent was to a bounded set.
+- Open modeling question:
+  whether the resolved SKU must exist at create-order time after pre-flight
+  quoting, or whether the order can be created with an unresolved choice set and
+  resolved later during provider dispatch.
+- Human decision:
+  choose the unresolved-at-create model. Order creation records the accepted
+  candidate SKU set; fulfillment / dispatch later resolves exactly one SKU from
+  that set.
+- Human decision:
+  Ordering UI shows the candidate set price range, not a single resolved SKU
+  price.
+- Human decision:
+  Bill is created from the resolved SKU quote / provider settlement amount,
+  not from the unresolved candidate set range.
+- Current implementation mismatch:
+  existing RideHailing create-order synchronously calls the provider and stores
+  one selected SKU immediately. The target model requires creating an
+  unresolved choice-set item first, then resolving it through the RideHailing
+  order lifecycle dispatch step.
+- Human correction:
+  resolution should not be constrained to candidates only. Providers may grant a
+  better or different vehicle class, such as a free upgrade. Candidate SKUs are
+  the user's accepted quote/search basis, while resolution must record whether
+  the provider result was inside the candidate set, an upgrade, or another
+  provider substitution.
+- Artifact:
+  saved the target RideHailing Order / Fulfillment / Bill sequence diagram in
+  `tasks/ride-hailing-ui-fixes/sequence-diagram.md`.
+
+## Planning: Choice-Set SKU, Dispatch, Billing, And Float Panel
+
+- Human direction:
+  this large slice needs a separate plan file and pre-implementation information
+  collection before review and coding.
+- Classification:
+  the slice is now an `Intent`-level product semantics change, not a local UI
+  fix. It likely needs durable PRD / Product TDD updates before or with
+  production implementation.
+- Information finding:
+  existing ecommerce contract says SPU owns presentation, persisted order items
+  are concrete SKU snapshots, and command `items` are `{ skuId, quantity }`.
+  Choice-set order items therefore require a native Trade Order contract change.
+- Information finding:
+  current `product_skus` has no presentation, and SKU create/update/admin
+  schema/ordering projection paths do not expose presentation.
+- Information finding:
+  current RideHailing create-order calls provider `createRide` inside the
+  create-order transaction. The target unresolved model needs an explicit
+  dispatch lifecycle step after the choice-set item exists.
+- Information finding:
+  current `ride_hailing_orders.providerInstanceId` is non-null at create time.
+  A mixed-provider candidate set would require either an MVP same-provider
+  constraint or a larger provider-resolution model.
+- Information finding:
+  current Caocao dispatch sends one `car_type`. Multi-select candidate SKUs need
+  an explicit local dispatch policy rather than assuming provider-side
+  multi-vehicle search.
+- Design-web finding:
+  `PuFloatPanel`, `PuCard`, `PuCheckbox`, and `usePuSelect` are exported from
+  `@partner-up-dev/design-web@0.4.6`; `PuCard` selectable composition must avoid
+  nested independent interactive controls.
+- Artifact:
+  added
+  `tasks/ride-hailing-ui-fixes/choice-set-sku-float-panel-plan.md` with the
+  collected facts, proposed phases, objections, and review questions.
+
+## Review: Clean Long-Term Choice-Set Model Corrections
+
+- Human principle:
+  pursue a long-term clean and stable model. MVP means simpler capability, not
+  a less maintainable or more complex domain model.
+- Human correction:
+  `ride_hailing_orders.providerInstanceId` should be removed as a required
+  create-time field. Provider instance belongs to the RideHailing SKU facts and
+  should be resolved from the chosen candidate during dispatch.
+- Human correction:
+  do not introduce `productTypedExtraProperties.acceptableSkuIds`. The
+  create/evaluate command path should promote `items` to a generic
+  discriminated union and support `CHOICE_SET` natively.
+- Human decision:
+  first dispatch policy is cheapest-first.
+- Human decision:
+  provider dispatch failure causes order cancellation.
+- Human decision:
+  if provider substitution outside candidates produces a higher final settlement
+  than the displayed quote range, Bill keeps the final settlement as-is.
+- Later correction:
+  dispatch is not only a RideHailing Fulfillment command, it is also
+  RideHailing Order lifecycle. Provider dispatch should stay inside the
+  create-order transaction for this slice.
+- Artifact update:
+  revised `choice-set-sku-float-panel-plan.md` and `sequence-diagram.md` to
+  remove `acceptableSkuIds`, promote command item union, remove provider
+  pre-binding, and record the resolved review decisions.
+
+## Review: Dispatch Lifecycle And Provider Binding Corrections
+
+- Human correction:
+  dispatch is not only a RideHailing Fulfillment command. It is also part of the
+  RideHailing Order lifecycle, so this slice should not move provider dispatch
+  out of the create-order transaction.
+- Human decision:
+  post-dispatch provider binding should live only in the choice-set resolution
+  snapshot.
+- Human decision:
+  if provider create fails, cancel the order and do not retry the next cheapest
+  candidate, another vehicle type, or another provider. Candidate sets may span
+  multiple providers and multiple vehicle types per provider, but provider
+  dispatch failure is not retried.
+- Human decision:
+  provider create failure returns the cancelled order id to the frontend.
+  Ordering Page should not navigate to Order Detail; it should show a dialog
+  explaining that ordering failed and why. To the user this is a failed order
+  creation, while the domain records an order that was created and cancelled.
+- Human scoping decision:
+  Order Detail is out of scope for this slice. Keep the current legacy Order
+  Detail implementation and preserve the data shape it already reads.
+- Artifact update:
+  revised the plan and sequence diagram to remove the async JobRunner dispatch
+  direction, put provider binding only in choice-set resolution, remove retry
+  behavior, define the cancelled-order API/UI behavior for provider create
+  failure, and exclude Order Detail redesign from this slice.
+
+## Final Review: Implementation Readiness Information
+
+- Plan consistency finding:
+  the target model is now coherent, but implementation must start from durable
+  model/schema contracts rather than a UI-only primitive migration.
+- Catalog contract finding:
+  current `SkuSelectionPolicy` only supports `EXACTLY_ONE`. RideHailing
+  multi-select candidate authorization needs a native choice-set selection
+  policy on the SPU sales policy, otherwise the UI and Order command would
+  contradict catalog truth.
+- Provider binding finding:
+  "provider binding lives only in choice-set resolution" includes both provider
+  instance id and provider order id. Current code stores and reads both from
+  `ride_hailing_orders`, so callback, live detail query, provider fee
+  confirmation, and persistence mapping need a shared resolution-binding reader.
+- Order item helper finding:
+  current Trade item helpers assume every item has a fixed `sku` and quantity.
+  After introducing `OrderItemSnapshot` union, fixed-only helpers must assert the
+  fixed kind and choice-set helper functions must own candidates/resolution
+  reads.
+- Frontend/API finding:
+  create-order result should become a discriminated union. Provider create
+  failure is a successful transport response with `outcome: "CANCELLED"`,
+  cancelled order id, and user-displayable reason. The Ordering Page mutation
+  success branch must show a dialog and skip navigation for that outcome.
+- Preflight finding:
+  RideHailing choice-set price-change preflight must compare displayed/evaluated
+  ranges, not `totalFen`. Fixed-order products can keep the current total
+  comparison.
+- Artifact update:
+  added these implementation-readiness findings to
+  `choice-set-sku-float-panel-plan.md`.
+
+## Implementation: Choice-Set Backend Foundation Segment 1
+
+- Human start:
+  user accepted splitting the large slice into two implementation segments and
+  explicitly started the first segment.
+- Segment boundary:
+  first segment implements durable contract/schema/order lifecycle foundation
+  and only the minimum frontend bridge needed to keep Ordering Page working.
+  It intentionally does not migrate the RideHailing SKU card to `PuCard`,
+  vehicle selection to `usePuSelect`, or bottom sheet to `PuFloatPanel`.
+- Implementation decision:
+  segment 1 keeps RideHailing UI single-select while sending a `CHOICE_SET`
+  command item containing the selected SKU as a one-item candidate set. This
+  lets the backend model become correct before the multi-select visual/control
+  migration.
+- Implementation decision:
+  provider create failure is represented as a successful transport response
+  with `outcome: "CANCELLED"`, the cancelled order id, and an
+  `OrderingActionProblem`. The Ordering Page handles it like a user-visible
+  order failure and does not navigate.
+- Implementation decision:
+  provider binding is now read from the resolved choice-set item in callback,
+  live-detail query, and provider-fee confirmation paths. The
+  `ride_hailing_orders` row keeps lifecycle snapshots only.
+- Compatibility decision:
+  Order Detail remains visually unchanged for this segment. Compatibility
+  readers project the selected/resolved SKU name from either fixed items or
+  choice-set resolution/candidates.
+- Test finding:
+  old backend scenarios were still asserting provider fields directly on
+  `ride_hailing_orders`; those were corrected to assert unresolved choice-set
+  foundation and resolved provider binding in item resolution.
+- Verification finding:
+  backend typecheck, frontend typecheck, focused backend RideHailing scenarios,
+  focused browser RideHailing system scenario, DB config checks, whitespace
+  check, and directed Biome lint all passed after segment 1.
+- Remaining work:
+  second segment should handle the original visual/control migration:
+  `RideHailingSkuCard` -> `PuCard` + `PuCheckbox`, list selection ->
+  `usePuSelect` multiple, actual multi-select candidate ranges, and
+  `ordering.ride-hailing.bottom-sheet` -> `PuFloatPanel` with three stops.
+
+## Implementation: Choice-Set Ordering UI Segment 2
+
+- Human start:
+  user explicitly started the second segment and requested the slice validation
+  and closure work.
+- Implementation boundary:
+  this segment stayed in the Ordering UI/control layer. It did not further
+  change the backend create-order lifecycle or Order Detail redesign scope.
+- UI primitive decision:
+  `RideHailingSkuCard` now uses `PuCard selectable` as the option control.
+  `PuCheckbox` is rendered as a visual state affordance inside the card; the
+  checkbox itself does not own a separate option interaction. This preserves a
+  single click/keyboard target per vehicle option.
+- Preview decision:
+  SKU hero image is resolved from `sku.presentation.heroImageAssetIds[0]`, then
+  detail image fallback. Because current presentation values are plain strings
+  and may be non-displayable asset ids, the frontend only renders direct
+  `http(s)`, `data:`, `blob:`, or `/` URLs and falls back to the existing car
+  icon otherwise.
+- Selection decision:
+  `usePuSelect<number>({ multiple: true })` owns selected RideHailing SKU ids.
+  The default selected candidate is the provider/default selectable option or
+  the cheapest selectable option. Tapping another card adds it to the candidate
+  set instead of replacing the existing candidate.
+- Pricing consequence:
+  with 快车 default-selected and 专车 added, the footer shows the candidate range
+  `￥36.00~52.00`; preflight range comparison detects changes as range changes,
+  such as `￥36.00~52.00 -> ￥36.00~61.00`.
+- Dispatch consequence:
+  because the backend dispatch policy is cheapest-first, a candidate set
+  containing 快车 and 专车 resolves to 快车 unless quotes change the ordering.
+  The system scenario now asserts this explicitly.
+- Float-panel decision:
+  `PuFloatPanel` replaces the custom bottom sheet. The three stops are computed
+  from the Ordering Content container height, and map fit padding follows the
+  active stop. The drawer control row remains a sibling absolute layer at the
+  bottom.
+- Verification finding:
+  frontend typecheck, focused RideHailing system scenario, directed Biome lint,
+  and `git diff --check` passed after segment 2.
+
+## Review: SKU Card Layout Remediation
+
+- Human correction:
+  Segment 2's `RideHailingSkuCard` layout is not correct. The card should not
+  be a horizontal three-column list item shaped as
+  `[preview][vehicle summary][price / checkbox]`.
+- Human correction:
+  this is not a new slice. It is a continuation of the current choice-set SKU /
+  float-panel slice, and can be tracked as Segment 3: SKU Card Layout
+  Remediation.
+- Target layout:
+  the card should be a left/right layout:
+  `flex-row(meta-flex-col(flex-row(name, info-icon-btn), preview), price-flex-col(estimated-text, flex-col(amount, checkbox)))`.
+- Target alignment:
+  the price column is `items-end`; both amount and checkbox are right-aligned.
+- Human correction:
+  checkbox belongs below the price amount, not in the name row and not beside
+  the amount.
+- Human correction:
+  there is no separate product concept called `vehicle summary`; it should be
+  treated as the SKU name.
+- Human correction:
+  `status/reason` should not exist inside the card. Unavailable RideHailing
+  vehicle options should be hidden by the list layer, not rendered as disabled
+  cards with reason text.
+- Invariants for remediation:
+  keep `PuCard selectable`; keep `PuCheckbox` as visual state only; keep the
+  card as the single interactive target; keep multi-select `usePuSelect`; keep
+  SKU preview fallback; keep existing semantic test ids stable.
+- Implementation status:
+  remediation was later started explicitly and implemented as Segment 3.
+
+## Implementation: Choice-Set SKU Card Layout Remediation Segment 3
+
+- Human start:
+  user explicitly started Segment 3 after the task packet was updated.
+- Implementation boundary:
+  this segment only changed the RideHailing SKU card display and its immediate
+  caller. It did not change the choice-set order model, provider dispatch,
+  `PuFloatPanel`, or Order Detail scope.
+- Layout decision:
+  `RideHailingSkuCard` now uses the reviewed left/right structure:
+  meta column with SKU name + info icon and preview, plus a right-aligned price
+  column with estimated text, amount, and checkbox below the amount.
+- Interaction decision:
+  the info icon remains visual-only rather than an actual nested button because
+  the card itself is the single selectable target.
+- Interaction decision:
+  the checkbox remains a visual `PuCheckbox` state affordance controlled by
+  `usePuSelect`; it does not own independent selection state.
+- Content decision:
+  the card no longer receives or displays `disabledReason`. Unavailable quoted
+  options continue to be filtered out by `visibleRideQuoteOptions`, so status /
+  reason text does not become a card concept.
+- Responsive decision:
+  the 420px media rule no longer hides the preview. On narrow widths the preview
+  shrinks but remains visible.
+- Verification finding:
+  formatting, directed lint, frontend typecheck, focused RideHailing system
+  scenario, and `git diff --check` passed after Segment 3.
+
+## Exploration: RideHailing Dynamic SKU Loading
+
+- Human next-slice intent:
+  RideHailing SKU availability should become dynamic. Which RideHailing SKUs are
+  listed depends on route and departure time. The proposed direction is querying
+  the provider for available vehicle types based on those dynamic factors.
+- Human interaction requirement:
+  when Ordering entry includes a `departureAt` binding, `RideHailingOrderingContent`
+  should not silently adopt it. After mount it should open a dialog asking
+  whether to use the imported departure time. The default is no, meaning
+  "depart now" and submitted `departureAt: null`.
+- Offer detail source:
+  PR Page resolves a placement ordering entry through
+  `POST /api/placements/:instanceId/ordering-entry`, stores the returned
+  `OrderingEntryPayload` in `sessionStorage`, and navigates to `/order/new`.
+  The backend ordering-entry use case reads `placement.offerId`, resolves
+  bindings from matching context, then calls `getOrderingOfferDetail`.
+- Offer detail projection:
+  `getOrderingOfferDetail` reads the active Offer, then reads each active SPU
+  from `offer.spuIds`, filters by offer product type, reads active SKUs under
+  those SPUs, and returns SPU/SKU projection data: ids, status, sales/service
+  policy, presentation, SKU facts, SKU pricing model, cancellation summary, and
+  offer pricing/terms.
+- Current frontend chain:
+  `RideHailingOrderingContent` receives catalog `offerDetail` from the Ordering
+  entry. It builds `rideBaseOptions` by flattening all active catalog
+  `spu.skuOptions` from the offer. It then builds `quoteOptionsInput` with
+  `{ source.offerId, route }` and calls `useRideHailingQuoteOptions`.
+- Current query behavior:
+  `useRideHailingQuoteOptions` calls
+  `POST /api/commerce/ordering/ride-hailing/options` and keys the query by the
+  full input object. Because the input currently contains route but not
+  departure time, route changes can refetch options while departure-time changes
+  cannot.
+- Current list replacement behavior:
+  once the quote-options query returns any options, `rideQuoteOptions` uses the
+  provider/evaluated options instead of catalog fallback options. If quoted
+  options exist, `visibleRideQuoteOptions` hides non-selectable options.
+- Current backend chain:
+  `/ordering/ride-hailing/options` validates only `{ source.offerId, route }`
+  and calls `quoteRideHailingOrderingOptions({ offerId, route })`.
+- Current backend option source:
+  `quoteRideHailingOrderingOptions` resolves the offer, then
+  `evaluateRideOptions` enumerates every active RideHailing catalog SKU attached
+  to the offer. It filters only by optional `candidateSkuIds` for submit-time
+  paths; browsing/options mode has no candidate filter.
+- Current provider interaction:
+  each catalog SKU maps to provider facts
+  `{ rideHailingProviderInstanceId, providerVehicleTypeCode }`. The backend then
+  calls the provider estimate endpoint once per SKU with that SKU's
+  `car_type` plus origin/destination coordinates.
+- Selectability source:
+  `selectable=false` is not a provider response field in the current model. It
+  is backend-local interpretation. The backend returns `selectable=false` when
+  the mapped provider instance is missing/inactive or when the provider estimate
+  call throws/fails. Successful estimate parsing produces `selectable=true`.
+- Current departure-time gap:
+  `departureAt` already flows from PR `startAt` into Ordering bindings and into
+  create-order extras, but it is not part of quote-options input, provider
+  estimate params, query key, or options endpoint schema.
+- Current provider abstraction gap:
+  `RideHailingProviderPort.estimate` is a thin raw-params method. It has no
+  provider-owned "list available vehicle options for route/time" capability.
+  Dynamic availability currently emerges only by trying known catalog SKUs and
+  marking failed estimates as non-selectable.
+- Current provider quote / vehicle interfaces:
+  the app-level provider port has `estimate`, `createRide`, `queryOrderDetail`,
+  `cancelRide`, `queryCancelFee`, `confirmFee`, and callback parsing. There is
+  no typed "list available vehicle types" method. The Caocao adapter maps
+  `estimate` to `GET /common/estimatePriceWithDetail` and maps `createRide` to
+  `POST /common/orderCarV2`.
+- Current estimate IO:
+  input is raw provider params. The app currently sends `car_type`, `flat`,
+  `flng`, `tlat`, and `tlng`. Output is provider-raw `unknown`; Trade parses
+  price from `estimateAmountFen | estimatePriceFen | estimate_price | price`
+  and vehicle display name from `carTypeName | car_type_name`.
+- Current create-ride IO:
+  input is local `orderId` plus raw provider params. The app currently sends
+  `callback_url`, `car_type`, `flat`, `flng`, `tlat`, and `tlng`; the adapter
+  adds `ext_order_id`. Output is normalized to `{ providerOrderId,
+  externalOrderId, providerSnapshot }`.
+- Current fake-provider gap:
+  fake Caocao stores static estimates keyed by car type. Its estimate response
+  does not vary by route or departure time, and there is no dynamic availability
+  control beyond changing a car type's estimate amount or forcing next create
+  failure.
+- Options endpoint timing and return:
+  `/ordering/ride-hailing/options` is called by TanStack Query when
+  `RideHailingOrderingContent` has non-null `quoteOptionsInput`. The query key
+  includes the full input object, so it refetches when `offerId` or route input
+  changes. It currently returns `{ quoteExpiresAt, options }`, where each option
+  is a backend `RideQuoteOption` containing local SKU id/SPU id, provider and
+  vehicle labels/codes, selected/selectable flags, disabled reason, estimate
+  amount, quoted amount, and price explanations.
+- Initial objection / boundary:
+  provider-driven dynamic SKU discovery must still reconcile with catalog SKU
+  ownership. Orders, billing, and SKU presentation require local SKU identity,
+  so provider-returned vehicle types need a clean mapping to local SKUs rather
+  than becoming anonymous frontend options.
+
+## Model Direction: Dynamic RideHailing Product Listing
+
+- Human model direction:
+  the long-term clean model is to query the Provider for available vehicle
+  classes by SPU + route + departureAt, then merge provider availability/quote
+  facts with local RideHailing SKU catalog facts. A RideHailing SKU is listed
+  only when:
+  - provider estimate/availability returns that vehicle type for the dynamic
+    route/time
+  - the corresponding local SKU exists and is `ACTIVE`
+- Human correction:
+  do not continue returning `selectable=true/false` to the frontend for
+  unavailable RideHailing SKUs. Unavailable options should be absent from the
+  listing result.
+- Human objection:
+  Provider Port `estimate` returning `Promise<unknown>` is not a clean boundary.
+  The Provider Port should define a standard app-level estimate/listing shape,
+  and each adapter should translate provider-specific responses into that
+  shape.
+- Human routing concern:
+  `/ordering/ride-hailing/options` is semantically misnamed for the target
+  model. A more unified Product Listing query interface may be preferable. That
+  interface could route by product type internally or perform product-specific
+  pre/post processing, but the exact route boundary needs review against current
+  Product Catalog and Offer responsibilities.
+- Current Catalog/Offer boundary finding:
+  user-facing ordering has no standalone public Product Catalog route today.
+  Product/SPU/SKU/Offer authoring is admin-owned under admin commerce routes.
+  User-facing product truth enters ordering through Placement's
+  `OrderingEntryPayload.offerDetail`, and dynamic RideHailing option loading is
+  currently under Commerce Ordering.
+- Current Offer model finding:
+  Offer is a commercial wrapper over one or more SPUs of the same product type.
+  It owns product type, SPU ids, terms version, active window, and pricing
+  policy. SPU/SKU own catalog facts/presentation/base pricing/service policy.
+- Implication:
+  even if the provider query is conceptually "SPU + route + departureAt", the
+  public listing request likely still needs `offerId` or an Offer-scoped source
+  so pricing policy, terms, and offer membership remain authoritative. The
+  listing use case can then resolve offer -> SPUs -> product-specific listing
+  query.
+- Departure-time UX refinement:
+  imported `departureAt` binding should remain available in the departure-time
+  drawer as a one-tap apply action even when the initial dialog default keeps
+  `departureAt` null / "depart now".
+
+## Model Direction: Offer-Owned Product Listing Query
+
+- Human decision:
+  the unified listing query should use `offerId` as its public entrypoint. This
+  means the query is not only "list product catalog"; it should include listing
+  prices because Offer owns commercial pricing policy and membership.
+- Human sketch:
+  the conceptual pipeline is:
+  - `offerId -> SPU -> SKUs`
+  - product-type-specific mask logic takes local SKUs plus product-specific
+    context, such as RideHailing route/departureAt, and returns listed SKUs
+  - pricing is resolved behind a product-type-specific path
+- Modeling concern:
+  for RideHailing, provider availability/mask and provider quote are the same
+  provider interaction. Splitting mask and price into two physical calls would
+  be redundant.
+- Working model:
+  keep mask and pricing as conceptual phases, but implement them through a
+  product-specific listing resolver that may do both in one pass. For
+  RideHailing, `Offer + SPUs + route + departureAt` calls the Provider once per
+  mapped vehicle type or through a future provider listing method, joins
+  returned provider vehicle quotes to local ACTIVE SKUs, applies Offer pricing,
+  and returns priced listed SKUs. This satisfies the target without forcing two
+  provider calls.
+- Ownership direction:
+  the unified query is Offer-owned. Offer resolves the commercial context,
+  active window, SPU membership, terms, and pricing policy, then dispatches to
+  product-type-specific listing logic for dynamic availability and base quote
+  facts.
+- Boundary reminder:
+  the listing result is display/draft truth. Under the later quote-identity
+  model, create-order should still re-read Offer/SPU/SKU truth, but price
+  freshness is enforced by validating submitted quote identity rather than
+  silently re-quoting dynamic provider prices.
+
+## Model Direction: Quote Identity Instead Of Price-Diff Preflight
+
+- Human correction:
+  a better stale-price model is for Offer Listing to return quote/estimate
+  identity, not only display prices. Create-order should submit the selected
+  quote/estimate ids. If the quote is expired, backend should reject with a
+  quote-expired result; frontend refreshes listing and the user explicitly
+  clicks order again.
+- Reasoning:
+  this is cleaner than comparing frontend displayed price with submit-time
+  evaluation price. The quote identity becomes the authoritative draft-price
+  boundary, and expiration/change handling aligns with RideHailing provider
+  quote semantics.
+- Consequence:
+  the current submit-time price-change preflight dialog becomes unnecessary for
+  RideHailing. Price freshness is enforced by quote identity validity rather
+  than price comparison.
+- Open modeling detail:
+  if a provider returns a durable quote token/estimate id, the listing resolver
+  should preserve it and pass it through dispatch/create when required. If a
+  provider only returns raw estimate data, the app can mint a local quote id
+  bound to offer, route, departureAt, SKU/provider vehicle, provider snapshot,
+  price, and `expiresAt`.
+- Choice-set consequence:
+  create-order should carry product-type-independent quote identity for the
+  selected candidate set. The preferred payload keeps order item semantics as
+  `FIXED.quoteId` or `CHOICE_SET.candidateQuoteIds`; backend asks the Quote
+  domain to resolve Offer, SKU, route/departureAt, price, quote ownership, SKU
+  activity, expiry, and quote-set coherence before dispatch.
+- Remaining non-price validation:
+  PR/order lifecycle blockers may still be validated at create-order time, but
+  they do not require a separate price preflight endpoint. They can return
+  ordinary blocked/create-failed dialog states.
+
+## Review: Commerce-Native Quote Identity Corrections
+
+- Human correction:
+  quote id should be a higher-level commerce/order concept, not RideHailing
+  specific. Order and pricing should natively support quote id.
+- Human correction:
+  create-order should avoid repeating quote-owned data such as route,
+  departureAt, SKU ids, and Offer. These should resolve from submitted quote
+  identity.
+- Boundary note:
+  quote identity should own commercial/listing facts: Offer, SKU, product
+  context such as route/departureAt, provider quote snapshot, and price.
+  Customer/fulfillment facts such as participants, riders, and contact phone
+  still need explicit ownership and should not be casually hidden inside quote.
+- Human decision:
+  quote-expired should be an HTTP 409 problem detail with a stable code, not an
+  HTTP 200 `CreateOrderResult` branch.
+- Human decision:
+  quote snapshots should be persisted to the database.
+- Human decision:
+  the new listing route should be
+  `POST /api/commerce/offers/:offerId/listing`.
+- Artifact update:
+  revised `offer-listing-quote-identity-plan.md` so quote identity is
+  product-type-independent, quote snapshots are DB-backed, create-order is
+  quote-bound, expired quote uses HTTP 409, and the route shape is fixed.
+
+## Review: Quote Validity Ownership And Plan Topology
+
+- Human correction:
+  quote validity checks such as quote existence, not expired, issuing Offer
+  still active, referenced SKU still active, SKU membership, and listing-context
+  coherence should be owned and encapsulated by the Quote domain. Order should
+  not perform these checks one by one.
+- Naming finding:
+  `QUOTE_SET` is a poor command item kind because it names the freshness
+  mechanism instead of the order item semantics. The cleaner shape keeps
+  `FIXED` and `CHOICE_SET` as item kinds, and carries quote identity as
+  `quoteId` or `candidateQuoteIds`.
+- Naming finding:
+  `CommerceQuoteSnapshot` is too persistence-shaped for the domain concept.
+  The working domain name is `OfferQuote`; the database may persist snapshots,
+  but the application should treat quote as an object that can be resolved and
+  validated.
+- Naming finding:
+  `listingId` is ambiguous. `listingSessionId` better communicates that it
+  groups one Offer Listing response/context.
+- Boundary finding:
+  broad `unknown` quote snapshots are acceptable as database JSON envelopes,
+  but they must be decoded behind the Quote boundary before Order, Pricing, or
+  RideHailing lifecycle consumes them.
+- Topology finding:
+  Offer Listing mints quotes by joining Offer, Product Catalog,
+  product-specific resolver, Provider, and pricing. Create Order consumes
+  validated Quote-domain results and turns them into order items / lifecycle
+  rows. Bill reads resolved order/fulfillment facts and should not decide quote
+  validity.
+- Artifact update:
+  revised `offer-listing-quote-identity-plan.md` with a Quote Domain topology
+  diagram, updated sequence diagram, Quote validity ownership, command naming
+  correction, and naming/boundary review sections.
+
+## Review: Ordering Shell Boundary And Resolved Listing Decisions
+
+- Human correction:
+  `OrderingContent` should not call Create Order. That responsibility belongs
+  to the Ordering Page / shell submit flow. Product-specific Ordering Content
+  owns listing, selection, and price-summary output, then emits a quote-bound
+  draft to the shell.
+- Human decision:
+  when quote expires after create click, frontend refreshes listing and
+  preserves selected SKU ids when the refreshed listing still contains matching
+  SKUs. The user still needs a second explicit create click.
+- Human decision:
+  create-order quote-only payload should not include participants, riders, or
+  contact phone. If those facts remain necessary, they need Quote/listing
+  session ownership or another explicit pre-create owner rather than returning
+  to create-order input.
+- Human decision:
+  Rental should migrate to the unified Offer Listing endpoint in this slice,
+  using a thin fixed-item resolver if no dynamic Rental mask is needed.
+- Naming refinement:
+  fixed listed items also carry quote ids, so `OfferListedItem.kind: "QUOTE"`
+  is misleading. The plan now uses `FIXED` and `CHOICE_CANDIDATE`.
+- Artifact update:
+  revised `offer-listing-quote-identity-plan.md` sequence/topology to route
+  create-order through Ordering Page / shell, resolved the Rental and
+  quote-expiry selection questions, and tightened the quote-only create-order
+  payload boundary.
+
+## Implementation: Offer Listing And Quote Identity
+
+- Impact Handshake accepted with explicit `开始`.
+- Backend implementation:
+  - Offer Listing now owns quote issuance through
+    `POST /api/commerce/offers/:offerId/listing`.
+  - Quote identity is persisted in `commerce_quotes` and is not RideHailing
+    specific.
+  - Quote validity is centralized in a Quote-domain resolver. It validates
+    existence, expiry, active Offer/SKU/SPU, Offer membership, item kind, and
+    choice-set grouping before Order sees product facts.
+  - Create-order product item payloads are quote-only:
+    `FIXED.quoteId` or `CHOICE_SET.candidateQuoteIds`.
+  - Create-order derives participants, Rental registrants/contact, RideHailing
+    riders/contact, route, departureAt, price, Offer, and SKU facts from
+    validated quote/listing snapshots.
+  - Old backend submit-time evaluation and RideHailing options surfaces were
+    removed rather than kept as parallel legacy API semantics.
+- Frontend implementation:
+  - Ordering Content owns unified listing queries and emits quote-bound draft
+    output plus footer summary.
+  - Ordering Page / shell owns create-order mutation and no longer performs
+    price preflight/evaluate.
+  - Quote-expired create failure refreshes listing, preserves matching
+    selected SKU ids, and requires another explicit create click.
+  - Imported `departureAt` binding now opens a prompt that defaults to "now";
+    the drawer keeps a one-tap action to apply the imported time.
+- Human follow-up:
+  the imported departure prompt must show the concrete imported departure
+  date/time value so the user can decide whether to use it. The prompt now
+  displays the formatted imported timestamp in the dialog description.
+- Human follow-up:
+  the departure-time Drawer should also provide a one-tap way to switch back to
+  "现在出发". The Drawer now has a `现在出发` action whenever a concrete
+  departure time is active, clearing `departureAt` back to null.
+- Test/diagnostic finding:
+  `PuDialog` does not inherit arbitrary `data-testid` attributes because of
+  its rendered root/teleport shape. This slice removed those attributes from
+  affected dialogs and updated scenarios to assert via dialog role/text.
+- Verification result:
+  RideHailing and Rental system scenarios pass with the unified listing and
+  quote-only create-order path.
+- Non-blocking lint note:
+  UI naming audit still reports `RideHailingOrderingContent` because it treats
+  "Content" as weak. The name is intentionally retained because it was reviewed
+  as the correct shell concept alongside header and footer.
+
+## Review: Offer Listing And Quote Identity Test Gaps
+
+- Human question:
+  whether tests cover the case where provider estimate reports some
+  RideHailing vehicle types unavailable and the Ordering Page omits those SKUs.
+- Finding:
+  the production listing path already catches failed provider estimates and
+  omits those local SKU rows, but fake Caocao only supported price mutation and
+  could not express per-vehicle estimate unavailability.
+- Test-gap review:
+  the important missing branches were:
+  - partial provider unavailability should hide the unavailable vehicle type
+  - quote-expired refresh should preserve matching selected SKU ids but prune
+    selected SKUs that disappeared from the refreshed listing
+  - all provider-unavailable vehicle types should leave no vehicle cards and
+    disable create
+  - quote validity should reject inactive Offer/SKU behind the Quote boundary
+  - `CHOICE_SET` candidate quote ids must not mix different listing sessions
+- Implementation decision:
+  add fake Caocao estimate availability controls rather than reintroducing a
+  frontend `selectable=false` concept. This keeps unavailable RideHailing SKUs
+  absent from the listing result, matching the accepted model.
+- Verification result:
+  the new backend quote-domain scenario and the expanded RideHailing system
+  scenario both pass.
+
+## Review: Ordering Error Feedback Channel
+
+- Human correction:
+  `ordering-floating-notice-layer` should be removed because it permanently
+  overlays other UI information while Dialog already explains create-order
+  failure reasons.
+- Finding:
+  the floating notice component was only used by `OrderingFromPlacementPage` as
+  a duplicate display of `createOrderMutation.error`.
+- Decision:
+  keep create-order feedback single-channel through Dialog. Quote expired,
+  provider create failure, PR blocker, and generic create-order errors continue
+  to open an acknowledgement Dialog, without a persistent floating notice.
+
+## Review: RideHailing SKU List Loading State
+
+- Human correction:
+  RideHailing SKU list should show a loading skeleton with `PuSkeleton`.
+- Design decision:
+  the loading state belongs inside the SKU list region, not over the whole
+  Ordering Page. The map and bottom control row should remain stable while
+  quote options load.
+- Interaction decision:
+  show skeletons only during initial listing load when there are no visible
+  quote options. During background refetch, keep the existing cards visible to
+  avoid selection/list flicker.
+
+## Explore: Ordering Entry Decoupling
+
+- Human observation:
+  `OrderingFromPlacement` is a product of over-coupling Order and Placement.
+  Placement should resolve the context needed by Ordering, then hand off through
+  Pinia / Bindings-like intermediate state instead of leaving the Ordering route
+  named and wired as Placement-specific.
+- Finding:
+  `/order/new` already behaves as a generic Ordering route, but the route
+  component is still named `OrderingFromPlacementPage.vue`.
+- Finding:
+  `OrderingFromPlacementPage.vue` itself does not call Placement APIs. It reads
+  a serialized `OrderingEntryPayload` from raw `sessionStorage`.
+- Finding:
+  `PRPage.vue` is the real frontend coupling point. It receives
+  `placement-click` from `ButtonPlacement`, then checks existing PR orders,
+  resolves Placement ordering entry, writes the handoff payload to
+  `sessionStorage`, and navigates to `/order/new`.
+- Finding:
+  backend `resolvePlacementOrderingEntry` is already a Placement boundary
+  operation and already resolves binding rules, PR-derived route/time/participant
+  enrichment, and Offer detail.
+- Finding:
+  `OrderingSupportPage.vue` duplicates raw ordering-entry storage parsing.
+- Direction:
+  keep backend Placement ordering-entry as the binding-resolution authority, but
+  move frontend click orchestration into Button Placement or a composable called
+  only by Button Placement. Add a Commerce/Ordering-owned Pinia handoff store
+  and rename the page to generic `OrderingPage`.
+- Artifact:
+  added `ordering-entry-decoupling-plan.md` with topology, target model,
+  candidate Impact Handshake, invariants, and verification.
+- Human decision:
+  the full ButtonPlacement click flow belongs in ButtonPlacement or a dedicated
+  `usePlacement...` composable, not PR Page. This includes existing-order
+  lookup, Placement ordering-entry resolution, Ordering handoff write, and
+  `/order/new` navigation. PR Page may pass `matchingContext` and `prId`.
+- Implementation:
+  added a Commerce/Ordering Pinia handoff store for `OrderingEntryPayload`,
+  moved Button Placement click orchestration into
+  `usePlacementOrderingEntryFlow`, and renamed the route component to generic
+  `OrderingPage.vue` while keeping `/order/new` stable.
+- Boundary correction:
+  docs now phrase `prId` as not being a separate Placement matching parameter;
+  PR-derived facts may still be present inside `matchingContext`, and PR Page may
+  pass explicit `prId` to Button Placement for existing-order lookup.
+
+## Solidify: Durable Docs Promotion
+
+- Human request:
+  review all completed slices and update durable docs where task-packet truths
+  have become stable product or cross-unit technical truth.
+- Promotion decision:
+  do not promote component-level UI implementation details such as `PuCard`,
+  `PuFloatPanel`, or `PuSkeleton` into durable docs. Those remain source-level
+  implementation facts unless they become cross-unit contracts.
+- Promotion decision:
+  promote stable user-visible commerce behavior into PRD:
+  - PR-attached ordering enters through Button Placement and assembles on
+    `/order/new`
+  - Offer Listing is the user-visible quote surface
+  - expired quotes refresh listing, preserve matching selection when possible,
+    and require another explicit create click
+  - RideHailing users authorize a selected candidate set, see a candidate price
+    range, and unavailable provider vehicles are omitted
+  - RideHailing provider-create failure keeps the user on `/order/new` with a
+    failure dialog
+- Product TDD correction:
+  `system-state-and-authority.md` had stale wording that put RideHailing
+  provider binding on `ride_hailing_orders`. It now separates RideHailing
+  execution fields on `ride_hailing_orders` from provider binding in the Trade
+  order choice-set resolution snapshot.
+- Ecommerce contract refinement:
+  `/order/new` is now named as the PR-attached ordering assembly route in the
+  journey chain. `offerDetail` is clarified as an ordering projection, not a
+  user-facing Offer Detail page or dynamic quote authority.
+
+## Diagnose: RideHailing Order Detail Mock Lifecycle Control
+
+- Human observation:
+  after order creation, the fake RideHailing order moves too quickly from
+  dispatching to in-trip and pending-payment states, which makes manual Order
+  Detail state review difficult.
+- Finding:
+  fake Caocao has no timer-based lifecycle. The rapid movement comes from
+  `queryOrderDetailV2`: every provider detail read calls
+  `FakeCaocaoState.advanceOrderDetail`.
+- Finding:
+  backend `buildRideHailingDetailProjection` queries provider detail every time
+  Order Detail is loaded if provider binding exists.
+- Finding:
+  frontend `CommerceOrderDetailPage` polls RideHailing order detail every
+  1500 ms until a bill exists.
+- Consequence:
+  opening Order Detail causes the frontend polling loop to drive fake provider
+  state through `CREATED -> ACCEPTED -> IN_TRIP -> FINISHED`; the fake server
+  then posts callbacks and final settlement creates a bill.
+- Target direction:
+  make fake provider detail reads read-only by default and add explicit fake
+  admin/test-control routes to set or advance order phase and post callbacks.
+- Planning artifact:
+  added `order-detail-mock-control-plan.md`.
+- Human proposal:
+  add a dev-only "advance phase" button around the RideHailing Provider Instance
+  Admin editing surface.
+- Review:
+  this is feasible, but the Provider Instance card is provider-level while fake
+  orders are order-level. A no-argument button needs a target policy.
+- Recommended target policy:
+  advance the latest non-terminal fake Caocao order behind the selected provider
+  endpoint, and return/display the affected provider order id and phase.
+- Human correction:
+  the button was intended for the main "编辑 Provider Instance" card, not the
+  left selectable Provider Instance card.
+- Updated UI direction:
+  add a separate dev-only main-area card for fake lifecycle controls, rather
+  than nesting the action inside either the left selection card or the edit form
+  card.
+- Human correction:
+  Frontend Admin should call fake Caocao directly. Do not introduce a backend
+  admin proxy endpoint for advancing fake phases.
+- Boundary note:
+  with direct frontend calls, `import.meta.env.DEV` gating keeps the control out
+  of production UI, but it is not a server-side security boundary. This is
+  acceptable for fake-provider developer tooling as long as the target route is
+  the fake endpoint from the selected Provider Instance config.
+- Implementation:
+  fake Caocao provider detail reads are now read-only; explicit fake control
+  routes own phase set/advance and callback posting.
+- Implementation:
+  RideHailing Provider Instance Admin has a separate dev-only "开发调试" card
+  that directly calls the selected Provider Instance endpoint to advance the
+  latest non-terminal fake order.
+- Verification note:
+  fake server unit tests cover explicit phase advancement and latest
+  non-terminal targeting, while the RideHailing system scenario now asserts
+  repeated Order Detail polling does not auto-advance the fake provider order
+  beyond the create-time accepted callback.
+
+## Explore: RideHailing Order Detail Content Redesign
+
+- Human request:
+  update Order Detail Page and RideHailing Order Content. Order Detail Page
+  should use no-padding `PuPageScaffold`, and RideHailing Order Content should
+  follow the old uniapp RideHailing page reference because the current
+  implementation is structurally wrong.
+- Finding:
+  current Web code has no extracted `RideHailingOrderContent` component. The
+  RideHailing detail surface is inline inside `CommerceOrderDetailPage.vue`.
+- Finding:
+  current RideHailing detail uses a CSS fake map and generic fact cards. This
+  is the main mismatch with the RideHailing interaction model.
+- Reference interpretation:
+  the uniapp file is a RideHailing ordering page, not an order-detail page. The
+  transferable model is full-screen map plus bottom panel, not its exact
+  ordering-specific controls.
+- Implementation direction:
+  split RideHailing detail into a Commerce-domain
+  `RideHailingOrderContent.vue` component that owns the full-screen `RouteMap`
+  and bottom `PuFloatPanel`, while `CommerceOrderDetailPage.vue` keeps route
+  parsing, querying, polling, and Rental detail behavior.
+- API detail:
+  `PuPageScaffold` supports `padding="none"`; this should be used instead of a
+  page-local no-padding class/variable trick.
+- Implementation:
+  `CommerceOrderDetailPage.vue` now uses the actual no-padding scaffold API and
+  keeps Rental-specific document padding in its own body wrapper.
+- Implementation:
+  `RideHailingOrderContent.vue` is a Commerce-domain component that owns the
+  full-screen `RouteMap`, bottom `PuFloatPanel`, and RideHailing-specific
+  status/fact/payment display. The page still owns order querying, route
+  parsing, polling, and Rental mutations.
+- Review note:
+  the uniapp reference was treated as a topology reference, not a literal
+  content copy, because it is an ordering page while the active target is Order
+  Detail.
+
+## Explore: RideHailing Order Detail Map And Live Route
+
+- Human request:
+  continue on `RideHailingOrderContent`, focusing on map and route behavior
+  across RideHailing phases:
+  - dispatching should center the origin and show a searching ripple
+  - accepted / picking up should show provider route polyline and vehicle marker
+  - arrived at pickup should center the vehicle marker and hide polyline
+  - in trip should show provider remaining route and vehicle marker, without
+    already-driven route
+  - finished / cancelled should show the persisted planned driving route
+- Finding:
+  current web `RideHailingOrderContent` always passes
+  `ride.route.drivingPlan?.polyline` to `RouteMap` as planned route geometry.
+- Finding:
+  lower-level `SharedMap` already accepts arbitrary `markers`, `polylines`, and
+  `activeGeometry`, and the Tencent adapter already has a `routeDriver` marker
+  style backed by `/route-map/map-marker-driver.png`.
+- Finding:
+  `RouteMap` is a generic route-domain wrapper and currently does not accept
+  RideHailing live markers/polylines as extra geometry.
+- Finding:
+  backend Order Detail projection exposes `executionPhase`, driver/vehicle
+  text, and loose provider live detail, but not provider route polyline,
+  vehicle coordinates, or vehicle heading.
+- Finding:
+  current local `RideHailingExecutionPhase` has no `ARRIVED_AT_PICKUP`, so it
+  cannot drive the requested marker-only arrived state without a lifecycle
+  model change.
+- Finding:
+  official Caocao docs expose separate driver location and driver pickup /
+  dropoff route APIs. This supports promoting live geometry into typed provider
+  port methods instead of inferring route geometry from raw order detail.
+- Reference note:
+  uniapp detail uses dynamic navigation only for on-the-way states and treats
+  server navigation polyline as the current / remaining route; already-driven
+  history is a separate grey polyline.
+- Plan:
+  added `order-detail-ride-hailing-map-plan.md`.
+
+## Execute: RideHailing Order Detail Map Backend Segment
+
+- Segment split:
+  human approved splitting the slice into backend first, frontend second, and
+  then manual validation.
+- Backend boundary:
+  this segment intentionally avoids frontend map rendering changes. It only
+  prepares the typed provider/live-geometry data needed by the future frontend
+  segment.
+- Provider-port decision:
+  `queryOrderDetail` should not leak raw provider response shape across domain
+  boundaries. The adapter now owns raw Caocao parsing, and Trade consumes typed
+  provider detail/location/route snapshots.
+- Callback mapping decision:
+  official Caocao lifecycle events are now mapped explicitly. Non-lifecycle
+  provider events preserve the current local execution phase instead of being
+  guessed into a lifecycle state.
+- Official-event correction:
+  the backend callback scenario now uses event `6` for final settlement /
+  service end. Event `25` is treated as a non-lifecycle provider event and no
+  longer advances execution phase by itself.
+- Projection decision:
+  `RideHailingOrderDetailProjection.live` exposes typed and sanitized live
+  fields. Provider raw snapshots remain internal to provider/bill audit data
+  and are not returned to the frontend detail payload.
+- Resilience decision:
+  provider order detail remains required when a provider binding exists, but
+  live geometry queries are optional. A location/route endpoint failure should
+  degrade the map, not fail the entire Order Detail page.
+- Fake-provider decision:
+  fake Caocao now stores order origin/destination from `orderCarV2` params so
+  driver position and provider route responses can be deterministic and tied to
+  the created order.
+
+## Execute: RideHailing Order Detail Map Frontend Segment
+
+- Boundary decision:
+  `RouteMap` gained generic extra geometry inputs only. RideHailing phase
+  semantics remain in Commerce RideHailing Order Detail code.
+- View-model decision:
+  the phase-to-map behavior is implemented as a pure helper next to
+  `RideHailingOrderContent` so the frontend can test lifecycle geometry
+  without relying on Tencent map canvas internals.
+- Dispatching decision:
+  `DISPATCHING` centers the route origin marker through `activeGeometry:
+  route-point-0`. The temporary CSS absolute ripple was removed because it was
+  not truly bound to the route origin marker; a correct marker-bound ripple
+  should wait for shared map overlay or marker-decoration support.
+- Accepted / in-trip decision:
+  provider route polylines are treated as current remaining navigation routes.
+  The frontend does not trim them unless future provider evidence shows Caocao
+  returns historical full-trip trails.
+- Fallback decision:
+  accepted without live geometry falls back to planned route; arrived without a
+  driver coordinate centers the origin; in-trip without provider route shows
+  the driver marker with a muted planned-route fallback.
+- Effective-phase correction:
+  map rendering must use local persisted `ride.executionPhase` only. Provider
+  live phase/status may be useful raw data, but it must not advance map state
+  ahead of the order lifecycle. This prevents a persisted `DISPATCHING` order
+  from showing accepted-provider geometry, losing the origin marker focus, and
+  hiding the dispatch ripple.
+- Raw-panel decision:
+  the `PuFloatPanel` content is temporarily reduced to raw JSON for manual
+  diagnosis of order state, RideHailing projection, provider live data, bill,
+  payment, and computed map view-model.
+- Scenario decision:
+  the system scenario asserts stable semantic `data-map-mode` values while
+  manually posting fake Caocao phase callbacks. It does not assert canvas pixels
+  or SDK layer internals.
+
+## Diagnose: Single Marker Fit Padding Under PuFloatPanel
+
+- Observation:
+  in `DISPATCHING`, the route origin marker looked too close to the bottom of
+  the visible map area after accounting for the absolute `PuFloatPanel`
+  overlay.
+- Root cause:
+  RideHailing correctly passed bottom-heavy `fitPadding` into `RouteMap`, but
+  the Tencent provider used `easeTo(center)` for a single active coordinate.
+  That single-point branch ignored padding entirely. Padding was only honored
+  by the multi-coordinate `fitBounds` branch.
+- Secondary note:
+  panel stop height is still an estimate of the visual overlay height. That may
+  explain small future polyline-frame deviations, but it was not the primary
+  cause of the origin marker being centered against the full map container.
+- Decision:
+  fix the shared provider's single-coordinate fit path by using a tiny
+  `fitBounds` area with the same padding and single-point max zoom cap. Keep
+  RideHailing-specific offset logic out of the map caller.
+
+## Review: RideHailing Order Detail PuFloatPanel Content
+
+- Scope correction:
+  after the map/live-route segment, `RideHailingOrderContent` still shows raw
+  JSON in `PuFloatPanel` for diagnosis. The next content segment should replace
+  that raw panel with the reviewed order-detail content only.
+- Header decision:
+  the panel top is the Status Hero. It contains status title and description on
+  the left, with the cancel-order action immediately to the left of the more
+  operation button on the right when cancellation is available.
+- Dispatching-only SKU decision:
+  only while dispatching, the content immediately after Status Hero is the
+  placed RideHailing SKU candidate list. It should reuse the same visual shape
+  as `RideHailingSkuCard`, but in read-only mode: non-selectable and without a
+  checkbox.
+- Shared SKU card decision:
+  `RideHailingSkuCard` may gain a readonly display shape. Default Ordering Page
+  behavior must remain selectable with checkbox.
+- Ride facts decision:
+  after the dispatching-only SKU list there is a larger spacing, then ride
+  facts that are independent of order lifecycle and always visible.
+- Ride facts structure:
+  ride facts are exactly two sections:
+  - `路线`: section title plus a route item list in the same style as PR Facts
+    Card route items
+  - `乘车人`: section title plus rider list items in the same style as the
+    RideHailing OrderingContent rider drawer
+- Explicit exclusions:
+  do not add provider facts, bill/payment facts, driver facts, route summaries,
+  extra eyebrows, extra cards, or other content in this segment.
diff --git a/tasks/ride-hailing-ui-fixes/change-log.md b/tasks/ride-hailing-ui-fixes/change-log.md
index 2e8780787..329672b54 100644
--- a/tasks/ride-hailing-ui-fixes/change-log.md
+++ b/tasks/ride-hailing-ui-fixes/change-log.md
@@ -1,702 +1,58 @@
 # Change Log
 
-## Slice: Packet Setup
-
-- Added task packet `tasks/ride-hailing-ui-fixes/` to replace the noisy
-  historical `tasks/ride-hailing-mvp/` packet for new focused UI fixes.
-- Added protocol requirement that Codex should raise objections when a proposed
-  slice may harm functionality, boundaries, maintainability, readability, or UI
-  contracts.
-- Added `discussion-log.md` and `change-log.md` for ongoing packet history.
-
-## Slice: RideHailing Ordering Content Layout
-
-- Committed `f7ac1aa3 fix(ride-hailing): align ordering content layout`:
-  - renamed `RideHailingOrderingPanel.vue` to
-    `RideHailingOrderingContent.vue`
-  - wired ride ordering content through the Ordering page shell as content
-  - added ride-only no-padding shell support
-  - removed `ordering-page__body` bottom padding
-  - split RideHailing bottom sheet and drawer control row into sibling layers
-  - changed price-detail toggle to a ghost circle `PuButton`
-- Verification:
-  - `pnpm check:type:frontend`
-  - explicit Biome check on changed frontend files
-  - `pnpm check:lint:frontend`
-
-## Slice: Evaluation And RideHailing SKU Model Clarification
-
-- Reorganized packet logs by event / slice instead of by calendar date.
-- Recorded current implementation findings:
-  - parent page evaluation currently owns price summary, create-order
-    availability, blocking notice, and RideHailing evaluated options
-  - RideHailing SKU options currently come from both catalog offer detail and
-    evaluated provider quote options
-- Recorded target model decision:
-  - parent-page evaluation becomes submit-time create-order pre-flight only
-  - footer price summary comes from Ordering Content
-  - RideHailing SKU list ownership moves fully into RideHailing Ordering Content
-  - parent-page evaluation no longer returns or owns `rideHailing.options`
-
-## Slice: Submit-Time Preflight And RideHailing SKU Ownership
-
-- Frontend:
-  - added `OrderingContentSummary` price summary model
-  - made Rental and RideHailing Ordering Content emit local price summary
-  - moved footer price label and price detail source from evaluation output to
-    Ordering Content summary
-  - removed parent-page auto-evaluate watch
-  - changed submit flow to `evaluate -> dialog if blocked/changed -> create`
-  - moved RideHailing quote option fetching into
-    `RideHailingOrderingContent`
-- Backend:
-  - added `POST /api/commerce/ordering/ride-hailing/options`
-  - removed `rideHailing.options` from ordering evaluation response
-  - added price explanations to RideHailing quote options
-  - avoided double-applying dynamic-quote pricing policy during RideHailing
-    pre-flight/create price resolution
-- Docs:
-  - updated `docs/20-product-tdd/ecommerce-contracts.md` for the submit-time
-    pre-flight model and RideHailing options endpoint.
-- Verification:
-  - `pnpm check:type:frontend`
-  - `pnpm check:type:backend`
-  - explicit `pnpm exec biome lint` on changed source files
-  - `pnpm check:lint:frontend`
-  - `pnpm check:lint:backend`
-  - `pnpm exec vitest run tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts --project system-scenario --reporter=verbose`
-
-## Slice: RideHailing Preflight Price-Change Scenario
-
-- Fake Caocao:
-  - added an admin-only `POST /__fake_caocao/estimates` test control route
-    for updating a vehicle estimate during scenario setup
-  - added `FakeCaocaoState.updateEstimate`
-  - covered estimate mutation in fake server state and HTTP server tests
-- Scenario:
-  - added
-    `commerce_ride_hailing_preflight_price_change_requires_confirmation`
-  - the scenario opens RideHailing Ordering with the original provider quote,
-    mutates the selected vehicle quote, clicks create order, verifies the
-    price-change confirmation dialog, verifies no provider order exists before
-    confirmation, then confirms and reaches order detail
-- Verification:
-  - `pnpm exec biome check --write packages/fake-caocao-server/src/state.ts packages/fake-caocao-server/src/routes.ts packages/fake-caocao-server/src/state.test.ts packages/fake-caocao-server/src/server.test.ts tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
-  - `pnpm --filter @partner-up-dev/fake-caocao-server typecheck`
-  - `pnpm --filter @partner-up-dev/fake-caocao-server test`
-  - `pnpm exec vitest run tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts --project system-scenario --reporter=verbose`
-  - `pnpm check:type:backend`
-  - `pnpm check:type:frontend`
-
-## Slice: Choice-Set SKU And Float Panel Planning
-
-- Added
-  `tasks/ride-hailing-ui-fixes/choice-set-sku-float-panel-plan.md`.
-- Recorded pre-implementation information collection across:
-  - durable ecommerce contract
-  - backend catalog/order/ride-hailing/bill/job-runner implementation
-  - frontend ordering/order-detail implementation
-  - design-web primitive contracts
-  - current RideHailing system scenario expectations
-- Updated control and discussion logs to mark this slice as blocked on plan
-  review, Impact Handshake, and explicit `开始` before production-code work.
-
-## Slice: Choice-Set Plan Review Corrections
-
-- Revised the large-slice plan according to review:
-  - prioritize long-term clean domain model over low-risk shortcuts
-  - remove `productTypedExtraProperties.acceptableSkuIds` from the target
-  - promote command `items` to a generic discriminated union
-  - remove required create-time provider pre-binding from
-    `ride_hailing_orders`
-  - record cheapest-first dispatch policy
-  - record provider dispatch failure as order cancellation
-  - record final settlement billing as-is for provider substitution outside
-    candidates
-- Updated the sequence diagram to match the corrected command and provider
-  ownership model.
-
-## Slice: Choice-Set Dispatch Lifecycle Review
-
-- Revised the planning artifacts according to review:
-  - keep provider dispatch inside the create-order transaction for this slice
-    because dispatch is also RideHailing Order lifecycle
-  - store post-dispatch provider binding only in the choice-set resolution
-    snapshot
-  - cancel on provider create failure without retrying the next cheapest
-    candidate, another vehicle type, or another provider
-  - return the cancelled order id for provider create failure while keeping the
-    user on Ordering Page with a failure-reason dialog
-  - exclude Order Detail redesign from this slice and preserve the current
-    legacy detail implementation
-- Removed the previous async JobRunner dispatch direction from the active plan
-  and sequence diagram.
-
-## Slice: Choice-Set Final Plan Review
-
-- Reviewed the large-slice plan against current durable docs and key backend /
-  frontend code paths.
-- Added implementation-readiness findings to the plan:
-  - RideHailing SPUs need a native choice-set `SkuSelectionPolicy`
-  - provider order id moves with provider instance id into choice-set
-    resolution
-  - callback/detail/payment-confirmation paths need a shared provider-binding
-    reader
-  - Trade order-item helpers must become union-aware
-  - create-order result becomes a `CREATED` / `CANCELLED` discriminated union
-  - RideHailing preflight compares selected candidate range instead of total
-  - implementation should start with durable contract/schema/model changes
-
-## Slice: Choice-Set Backend Foundation Segment 1
-
-- Durable contract:
-  - updated `docs/20-product-tdd/ecommerce-contracts.md` for SKU-level
-    presentation, `CHOICE_SET` SKU selection policy, fixed vs choice-set command
-    items, create-order `CREATED` / `CANCELLED` result, RideHailing provider
-    binding ownership, and final bill timing.
-- Catalog/backend schema:
-  - added `product_skus.presentation` with an empty-presentation default
-  - extended SKU model/create/update/admin schemas/projections to carry SKU
-    presentation
-  - extended `SkuSelectionPolicy` with `CHOICE_SET`
-  - removed `ride_hailing_orders.provider_instance_id` and
-    `provider_order_id`
-- Trade/RideHailing model:
-  - promoted order item snapshots to a union of `FIXED` and `CHOICE_SET`
-  - added RideHailing choice-set candidate, quote, resolution, and provider
-    binding snapshots
-  - made order-item helpers fixed-aware and added RideHailing choice-set /
-    provider-binding readers
-  - added `TradeOrderRepository.replaceItems`
-- Create/evaluate lifecycle:
-  - promoted commerce command `items` to a generic discriminated union
-  - RideHailing submit/evaluate now use one `CHOICE_SET` item with candidate
-    SKU ids
-  - submit-time RideHailing evaluation quotes only selected candidates and
-    returns candidate range
-  - create-order creates an unresolved choice-set item, creates the
-    RideHailing order lifecycle row, dispatches cheapest-first, writes
-    provider binding into resolution, and opens the base order
-  - provider create failure marks the order cancelled and returns
-    `outcome: "CANCELLED"` with a user-displayable reason
-  - no retry is attempted against the next candidate/provider
-- Callback/detail/payment compatibility:
-  - Caocao callback, live detail projection, and provider fee confirmation now
-    recover provider binding from the choice-set resolution
-  - current Order Detail is preserved with compatibility SKU readers and legacy
-    selected-vehicle projection
-- Frontend bridge:
-  - RideHailing Ordering Content now emits a `CHOICE_SET` item; in segment 1 it
-    remains single-select, so the candidate set contains the selected SKU only
-  - Ordering Page compares preflight price ranges and branches on
-    create-order `CANCELLED` without navigating to Order Detail
-- Scenario/test updates:
-  - backend RideHailing foundation and Caocao callback scenarios were updated to
-    the choice-set / resolution provider-binding model
-  - RideHailing system scenario now expects selected-candidate pricing and a
-    provider-create-failure dialog
-- Verification:
-  - `pnpm check:type:backend`
-  - `pnpm check:type:frontend`
-  - `pnpm exec vitest run --config vitest.backend.config.ts --project backend-scenario apps/backend/tests/ride-hailing/ride-hailing-order-foundation.scenario.test.ts apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts`
-  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
-  - `pnpm check:config:backend`
-  - `git diff --check`
-  - explicit `pnpm exec biome lint` on changed source/test files
-
-## Slice: Choice-Set Ordering UI Segment 2
-
-- RideHailing Ordering UI:
-  - migrated `RideHailingSkuCard` from a custom button implementation to
-    `PuCard selectable` composition
-  - composed `PuCheckbox` as the visual selection affordance while keeping the
-    card as the single interactive option target
-  - added SKU hero/detail image preview resolution with the existing direct URL
-    fallback rule; non-displayable asset ids fall back to the car icon preview
-  - migrated RideHailing selection state to `usePuSelect<number>` with
-    `multiple: true`
-  - default selection keeps the cheapest/default selectable candidate, and
-    additional card taps add/remove candidates
-  - Ordering Content now submits actual multi-candidate `CHOICE_SET`
-    candidate ids and derives footer range from the selected candidate set
-  - price explanations are taken from the cheapest selected candidate as the
-    dispatch basis
-- Float panel:
-  - replaced the custom absolute bottom sheet with `PuFloatPanel`
-  - added three stops: minimized, normal, expanded
-  - panel stops are calculated from the Ordering Content container height via
-    `ResizeObserver`
-  - route-map fit padding now follows the active panel stop while preserving the
-    bottom control row as a sibling layer
-- Scenario:
-  - updated RideHailing system scenario to select both 快车 and 专车, assert the
-    selected candidate price range, and expect cheapest-first dispatch to 快车
-  - updated price-change dialog expectation from single-price comparison to
-    selected-candidate range comparison
-- Verification:
-  - `pnpm check:type:frontend`
-  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
-  - `pnpm exec biome lint apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue apps/frontend/src/domains/commerce/ui/ordering/RideHailingSkuCard.vue tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
-  - `git diff --check`
-
-## Slice: Choice-Set SKU Card Layout Remediation Segment 3
-
-- RideHailing SKU Card:
-  - corrected the Segment 2 card from a list-item-like layout to the reviewed
-    left/right layout
-  - left side now owns SKU name + info icon and the SKU preview area
-  - right side now owns estimated text, amount, and checkbox, all right-aligned
-  - checkbox now sits below the amount
-  - removed the card-internal status/reason display concept; unavailable quoted
-    options continue to be hidden by the list layer
-  - removed the 420px media rule that hid the preview
-  - kept `PuCard selectable`, visual-only `PuCheckbox`, `usePuSelect`
-    multi-select ownership, preview fallback, and semantic test ids stable
-- Verification:
-  - `pnpm exec biome format --write apps/frontend/src/domains/commerce/ui/ordering/RideHailingSkuCard.vue apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue`
-  - `pnpm exec biome lint apps/frontend/src/domains/commerce/ui/ordering/RideHailingSkuCard.vue apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue`
-  - `pnpm check:type:frontend`
-  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
-  - `git diff --check`
-
-## Slice: Offer Listing And Quote Identity
-
-- Backend:
-  - added persisted product-type-independent `commerce_quotes`
-  - added `CommerceQuoteRepository`
-  - added Offer-owned `POST /api/commerce/offers/:offerId/listing`
-  - added typed RideHailing provider quote output for estimate adapters
-  - added Quote-domain quote-bound order item resolver
-  - made create-order product items quote-only:
-    `FIXED.quoteId` and `CHOICE_SET.candidateQuoteIds`
-  - moved participants, Rental registrants/contact, RideHailing riders/contact,
-    route, departureAt, price, SKU, and Offer facts into validated quote/listing
-    snapshots
-  - removed old backend `/ordering/evaluate`,
-    `/ordering/ride-hailing/options`, and unused `evaluateRideOptions`
-    surfaces
-  - quote expiry now returns HTTP 409 with code `ORDERING_QUOTE_EXPIRED`
-- Frontend:
-  - added `useOfferListing`
-  - migrated Rental Ordering Content to unified listing quotes
-  - migrated RideHailing Ordering Content to unified listing quotes keyed by
-    route + departureAt
-  - removed create-order preflight/evaluate orchestration from the Ordering
-    Page
-  - quote-expired create failure refreshes listing, preserves matching selected
-    SKU ids, and requires a second explicit create click
-  - added imported departure-time prompt with default "now" behavior and drawer
-    apply action
-  - updated the imported departure-time prompt to display the concrete imported
-    date/time value, not only a generic "has departure time" message
-  - added a Drawer one-tap "现在出发" action so users can switch back from an
-    imported/manual departure time to depart-now
-  - removed `data-testid` attributes from `PuDialog` calls that could not
-    inherit them and caused Vue warnings
-- Durable docs:
-  - updated `docs/20-product-tdd/ecommerce-contracts.md` for Offer Listing,
-    quote identity, quote-only create-order payloads, Quote-owned validity, and
-    quote-expired HTTP 409 behavior
-- Scenario:
-  - replaced the old RideHailing price-change preflight scenario with
-    quote-expired refresh/preserve-selection coverage
-  - updated Rental PR blocker scenarios to assert create-click dialog behavior
-    after unified listing quote issuance
-- Verification:
-  - `pnpm check:type:backend`
-  - `pnpm check:type:frontend`
-  - `pnpm check:type:frontend` after the imported departure-time display
-    follow-up
-  - `pnpm check:type:frontend` after the Drawer depart-now follow-up
-  - `pnpm check:format`
-  - `pnpm check:lint`
-  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
-  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
-    after the imported departure-time display follow-up
-  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
-    after the Drawer depart-now follow-up
-  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/rental-ordering.scenario.test.ts`
-- Non-blocking:
-  - `pnpm check:lint` reports the existing report-only naming audit finding for
-    `RideHailingOrderingContent`; this is intentionally retained because the
-    name matches the reviewed Ordering shell content role.
-
-## Slice: Offer Listing And Quote Identity Test Hardening
-
-- Fake Caocao:
-  - added a test-control estimate availability switch per car type
-  - unavailable estimate requests now return provider failure, letting the
-    Offer Listing resolver exercise its "omit unavailable SKU" behavior
-- RideHailing system scenario:
-  - added coverage that a provider-unavailable vehicle type is hidden from the
-    Ordering Page SKU list
-  - added coverage that quote-expired refresh preserves still-listed selected
-    SKUs but prunes selected SKUs that disappeared from the refreshed listing
-  - added coverage that all provider-unavailable vehicle types produce no
-    vehicle cards, a pending price, a disabled create action, and no provider
-    order
-- Backend Quote-domain scenario:
-  - added coverage that quote validity rejects inactive Offer and inactive SKU
-  - added coverage that `CHOICE_SET` candidate quotes must come from one
-    `listingSessionId`
-- Verification:
-  - `pnpm exec vitest run --project backend-scenario apps/backend/tests/commerce/offer-quote-resolution.scenario.test.ts`
-  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
-  - `pnpm check:type:backend`
-  - `pnpm check:type:frontend`
-  - `pnpm --filter @partner-up-dev/fake-caocao-server typecheck`
-  - `pnpm exec biome check packages/fake-caocao-server/src/state.ts packages/fake-caocao-server/src/routes.ts tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts apps/backend/tests/commerce/offer-quote-resolution.scenario.test.ts`
-  - `git diff --check`
-
-## Slice: Ordering Error Feedback Simplification
-
-- Frontend:
-  - removed `OrderingFloatingNoticeLayer` from `OrderingFromPlacementPage`
-  - deleted the unused floating notice component
-  - removed the duplicate floating error-message state now that create-order
-    failures and quote-expired cases are explained by Dialog
-- Verification:
-  - `pnpm check:type:frontend`
-  - `pnpm exec biome check apps/frontend/src/pages/OrderingFromPlacementPage.vue`
-  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
-  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/rental-ordering.scenario.test.ts`
-  - `git diff --check`
-
-## Slice: RideHailing SKU List Loading Skeleton
-
-- Frontend:
-  - added `PuSkeleton` placeholders inside the RideHailing SKU list area
-  - skeletons follow the reviewed vehicle-card left/right layout shape
-  - skeletons show only for the initial listing load when no visible quote
-    options exist; background refetch keeps the existing cards visible
-- Verification:
-  - `pnpm check:type:frontend`
-  - `pnpm exec biome check apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue`
-  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
-  - `git diff --check`
-
-## Slice: Offer Listing And Quote Identity Planning
-
-- Added standalone plan:
-  `tasks/ride-hailing-ui-fixes/offer-listing-quote-identity-plan.md`.
-- Captured accepted direction:
-  - public listing query uses `offerId`
-  - listing is Offer-owned because it includes commercial membership and price
-  - RideHailing dynamic availability depends on route and departure time
-  - RideHailing unavailable SKUs are omitted, not returned as
-    `selectable=false`
-  - Provider Port should return typed app-level quote shapes instead of
-    `unknown`
-  - listing returns quote identity and create-order submits quote identity
-  - expired quote replaces RideHailing price-diff preflight
-- Added plan review sections covering owner fit, main objections/risks, and
-  review questions before implementation.
-- Revised the plan after review:
-  - quote identity is now product-type-independent and commerce/order native,
-    not RideHailing-specific
-  - order and pricing should support quote ids natively
-  - create-order should derive Offer/SKU/route/departureAt/price from quote
-    snapshots instead of repeating them in the payload
-  - quote snapshots are persisted in the database
-  - expired quote is HTTP 409 problem details with a stable code
-  - the route shape is fixed as `POST /api/commerce/offers/:offerId/listing`
-- Re-reviewed the plan for maintainability, readability, and complexity:
-  - moved quote existence, expiry, active Offer/SKU, membership, and
-    listing-context coherence behind a Quote-domain validity resolver
-  - rejected `QUOTE_SET` as a command item kind and kept order item semantics as
-    `FIXED` / `CHOICE_SET` with quote ids as evidence fields
-  - renamed the working domain concept from `CommerceQuoteSnapshot` to
-    `OfferQuote`
-  - renamed `listingId` to `listingSessionId`
-  - clarified that generic quote JSON snapshots are persistence envelopes and
-    must be decoded before Order, Pricing, or RideHailing lifecycle consumes
-    them
-  - added topology and sequence reviews to the standalone plan
-- Revised the plan after additional review:
-  - corrected the frontend topology so Ordering Content emits quote-bound draft
-    state and Ordering Page / shell calls Create Order
-  - resolved quote-expired refresh behavior as preserving matching selected SKU
-    ids while still requiring a second click
-  - resolved create-order product item payload as quote-only, excluding
-    participants/riders/contact phone
-  - resolved Rental migration into the unified Offer Listing endpoint for this
-    slice
-  - added `quoteId` to fixed listed items and renamed RideHailing listed item
-    kind from `QUOTE` to `CHOICE_CANDIDATE`
-
-## Slice: Ordering Entry Decoupling Planning
-
-- Added standalone plan:
-  `tasks/ride-hailing-ui-fixes/ordering-entry-decoupling-plan.md`.
-- Captured current coupling:
-  - PR Page owns existing-order lookup, Placement ordering-entry resolution,
-    raw `sessionStorage` write, and `/order/new` navigation
-  - Ordering Page and Ordering Support duplicate raw handoff parsing
-  - backend Placement ordering-entry already owns binding/context resolution
-- Captured target direction:
-  - Button Placement or its dedicated composable owns the
-    Placement-to-Ordering entry flow
-  - existing-order lookup, Placement ordering-entry resolution, handoff write,
-    and `/order/new` navigation all move out of PR Page
-  - PR Page may pass `matchingContext` and `prId` to Button Placement
-  - Ordering handoff moves behind a Commerce/Ordering Pinia store
-  - `/order/new` keeps its route path/name but the page becomes generic
-    `OrderingPage`
-  - PR Page only mounts Button Placement and passes matching context
-
-## Slice: Ordering Entry Decoupling Implementation
-
-- Frontend:
-  - added `useOrderingHandoffStore` for `OrderingEntryPayload`
-  - added payload normalization/parsing helpers beside the ordering-entry model
-  - moved existing-order lookup, Placement ordering-entry resolution, handoff
-    write, and navigation into `usePlacementOrderingEntryFlow`
-  - updated `ButtonPlacement` to call the entry-flow composable directly and
-    accept `prId`
-  - removed Commerce/Ordering entry-flow logic from `PRPage`
-  - renamed `OrderingFromPlacementPage.vue` to `OrderingPage.vue`
-  - updated `/order/new` lazy import without changing route path/name
-  - updated `OrderingSupportPage` to read ordering entry handoff from the same
-    store
-- Durable docs:
-  - updated ecommerce contract to assign entry-flow ownership to Button
-    Placement and the Commerce Ordering handoff store
-- Verification:
-  - `pnpm check:type:frontend`
-  - `pnpm exec biome check apps/frontend/src/app/router.ts apps/frontend/src/pages/PRPage.vue apps/frontend/src/pages/OrderingPage.vue apps/frontend/src/pages/OrderingSupportPage.vue apps/frontend/src/domains/commerce/model/ordering-entry-storage.ts apps/frontend/src/domains/commerce/queries/useCommerce.ts apps/frontend/src/domains/commerce/ui/ButtonPlacement.vue apps/frontend/src/domains/commerce/use-cases/useOrderingHandoffStore.ts apps/frontend/src/domains/commerce/use-cases/usePlacementOrderingEntryFlow.ts docs/20-product-tdd/ecommerce-contracts.md tasks/ride-hailing-ui-fixes/control.md tasks/ride-hailing-ui-fixes/discussion-log.md tasks/ride-hailing-ui-fixes/change-log.md tasks/ride-hailing-ui-fixes/ordering-entry-decoupling-plan.md`
-  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/rental-ordering.scenario.test.ts`
-  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
-  - `git diff --check`
-
-## Slice: Durable Docs Promotion
-
-- PRD:
-  - added PR-attached commerce ordering workflow to
-    `docs/10-prd/behavior/workflows.md`
-  - added commerce ordering invariants to
-    `docs/10-prd/behavior/rules-and-invariants.md`
-  - added stable commerce terms to `docs/10-prd/glossary.md`
-- Product TDD:
-  - corrected `docs/20-product-tdd/system-state-and-authority.md` so
-    RideHailing provider binding is owned by Trade order choice-set resolution,
-    not `ride_hailing_orders`
-  - refined `docs/20-product-tdd/ecommerce-contracts.md` for `/order/new`
-    ordering topology, `offerDetail` projection semantics, departure-time
-    binding UX, quote-expired selection preservation, and RideHailing
-    cancelled-create behavior
-- Verification:
-  - `pnpm check:format` (markdown files are ignored by Biome changed-file
-    formatting; command completed successfully with no processed files)
-  - `git diff --check`
-  - `rg` stale-contract search for old Offer Detail ordering, old
-    `OrderingFromPlacementPage`, old provider-binding wording, old
-    evaluate/options endpoints, and `selectable=false`
-
-## Slice: RideHailing Order Detail Mock Control Planning
-
-- Added standalone plan:
-  `tasks/ride-hailing-ui-fixes/order-detail-mock-control-plan.md`.
-- Recorded diagnosis:
-  - fake Caocao currently advances order phase on provider detail reads
-  - Order Detail polling every 1500 ms indirectly drives fake lifecycle
-  - backend callbacks from those fake reads move persisted execution phase and
-    create final bill after `FINISHED`
-- Proposed direction:
-  - make fake provider detail reads read-only by default
-  - add explicit fake admin/test-control routes for phase set/advance
-  - post callbacks from explicit fake lifecycle controls
-
-## Slice: RideHailing Order Detail Mock Control Implementation
-
-- Fake Caocao:
-  - made `/common/queryOrderDetailV2` read-only for order phase
-  - replaced read-driven phase advancement with explicit state helpers for
-    setting and advancing order phase
-  - added fake control routes:
-    `POST /__fake_caocao/orders/latest/advance`,
-    `POST /__fake_caocao/orders/:providerOrderId/advance`, and
-    `POST /__fake_caocao/orders/:providerOrderId/phase`
-  - control routes post the corresponding provider callback after moving fake
-    state, so backend order execution state still changes through provider
-    callback handling
-  - preserved create-time accepted callback behavior
-- Frontend Admin:
-  - added a separate dev-only RideHailing Provider Instance debug card
-  - the card directly calls the selected provider instance
-    `config.endpointBaseUrl` fake Caocao control route
-  - no backend admin proxy was introduced
-- Scenario:
-  - strengthened RideHailing order-detail scenario coverage so repeated detail
-    polling does not auto-advance fake provider phase past `ACCEPTED`
-- Verification:
-  - `pnpm --filter @partner-up-dev/fake-caocao-server typecheck`
-  - `pnpm --filter @partner-up-dev/fake-caocao-server test`
-  - `pnpm check:type:frontend`
-  - `pnpm exec biome check packages/fake-caocao-server/src/state.ts packages/fake-caocao-server/src/routes.ts packages/fake-caocao-server/src/state.test.ts packages/fake-caocao-server/src/server.test.ts apps/frontend/src/pages/AdminRideHailingPage.vue tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
-  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
-  - `git diff --check`
-
-## Slice: RideHailing Order Detail Content Redesign Planning
-
-- Added standalone plan:
-  `tasks/ride-hailing-ui-fixes/order-detail-ride-hailing-content-plan.md`.
-- Recorded current implementation facts:
-  - RideHailing detail content is still inline in `CommerceOrderDetailPage.vue`
-  - current detail map is a CSS placeholder
-  - no extracted `RideHailingOrderContent` component exists yet
-  - current scenario IDs to preserve are
-    `order-detail.ride-hailing.page`,
-    `order-detail.ride-hailing.selected-vehicle`, and
-    `order-detail.ride-hailing.route-summary`
-- Recorded target direction:
-  - use `PuPageScaffold padding="none"` for Order Detail Page
-  - extract RideHailing full-screen map / float-panel content into
-    `RideHailingOrderContent.vue`
-  - reuse shared `RouteMap` and `PuFloatPanel`
-  - keep Rental detail on the existing card-stack path
-
-## Slice: RideHailing Order Detail Content Redesign Implementation
-
-- Frontend:
-  - changed `CommerceOrderDetailPage.vue` to
-    `PuPageScaffold viewport="screen" width="full" padding="none"`
-  - kept Rental order detail on the existing document/card stack with explicit
-    page-local padding and max width
-  - extracted RideHailing order detail UI into
-    `apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue`
-  - replaced the CSS fake route illustration with shared immersive `RouteMap`
-  - added a RideHailing bottom `PuFloatPanel` with overview, detail, and
-    expanded stops
-  - preserved existing RideHailing Order Detail scenario test ids on
-    equivalent semantic nodes
-- Verification so far:
-  - `pnpm check:type:frontend`
-  - `pnpm exec biome check apps/frontend/src/pages/CommerceOrderDetailPage.vue apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue tasks/ride-hailing-ui-fixes/control.md tasks/ride-hailing-ui-fixes/discussion-log.md tasks/ride-hailing-ui-fixes/change-log.md tasks/ride-hailing-ui-fixes/order-detail-ride-hailing-content-plan.md`
-  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
-  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/rental-ordering.scenario.test.ts`
-
-## Slice: RideHailing Order Detail Map And Live Route Planning
-
-- Added standalone plan:
-  `tasks/ride-hailing-ui-fixes/order-detail-ride-hailing-map-plan.md`.
-- Recorded current implementation gaps:
-  - Order Detail map currently renders only persisted planned route geometry
-  - backend projection lacks provider live route, vehicle coordinate, and
-    vehicle heading
-  - local RideHailing lifecycle lacks an arrived-at-pickup phase
-  - `RouteMap` is generic and should not absorb RideHailing lifecycle semantics
-- Recorded target model:
-  - introduce typed provider order detail, driver location, and driver route
-    snapshots
-  - promote Caocao driver-location and pickup/dropoff route APIs into the
-    provider port
-  - add `ARRIVED_AT_PICKUP` to RideHailing execution phase
-  - build a pure frontend map view-model for phase-specific map rendering
-- Recorded verification direction:
-  - fake Caocao unit coverage for phase/live geometry
-  - backend provider/callback projection coverage
-  - frontend pure map view-model tests
-  - RideHailing system scenario coverage for accepted, arrived, in-trip, and
-    finished map states
-
-## Slice: RideHailing Order Detail Map And Live Route Backend Segment
-
-- Provider port:
-  - changed `RideHailingProviderPort.queryOrderDetail` from raw `unknown` to
-    typed `RideHailingProviderOrderDetail`
-  - added typed `queryDriverLocation` and `queryDriverRoute` provider methods
-  - added provider-level coordinate, vehicle-location, and navigation-route
-    models
-- Caocao adapter:
-  - normalizes `queryOrderDetailV2` into typed driver, vehicle, status label,
-    final amount, and optional vehicle location snapshots
-  - implements `queryDriverLocationByOrderId`
-  - implements `queryDriverPolylineV2` and parses route kind, polyline,
-    remaining distance/time, traffic-light count, and ETA vehicle location
-- RideHailing lifecycle:
-  - added local execution phase `ARRIVED_AT_PICKUP`
-  - corrected Caocao callback mapping for accepted, arrived, in-trip,
-    finished, and cancellation events
-  - preserves current execution phase for non-lifecycle Caocao events such as
-    route/price/invoice style callbacks
-- Order Detail projection:
-  - strips provider raw snapshots before returning `ride.live`
-  - includes typed `vehicleLocation` and `navigationRoute`
-  - keeps provider location/route query failures from failing the whole Order
-    Detail projection
-- Fake Caocao:
-  - added fake `ARRIVED_AT_PICKUP`
-  - changed explicit advance chain to
-    `CREATED -> ACCEPTED -> ARRIVED_AT_PICKUP -> IN_TRIP -> FINISHED`
-  - stores fake order origin/destination from order-create route params
-  - added fake driver location and route V2 endpoints
-  - switched fake callbacks to official-like lifecycle events while preserving
-    create-time accepted callback behavior
-- Verification:
-  - `pnpm --filter @partner-up-dev/fake-caocao-server typecheck`
-  - `pnpm --filter @partner-up-dev/fake-caocao-server test`
-  - `pnpm --dir apps/backend exec tsc --noEmit -p tsconfig.json`
-  - `pnpm --dir apps/frontend exec vue-tsc --noEmit`
-  - `pnpm exec vitest run --config vitest.backend.config.ts --project backend-unit -t "Caocao"`
-  - `pnpm exec vitest run --config vitest.backend.config.ts --project backend-scenario -t "Caocao callback"`
-  - `pnpm exec vitest run --config vitest.config.ts --project system-scenario -t "commerce_ride_hailing_ordering_reaches_order_detail"`
-  - `pnpm exec biome format --write` on the changed backend/fake files
-  - `git diff --check`
-
-## Slice: RideHailing Order Detail Map And Live Route Frontend Segment
-
-- Route map:
-  - added generic `extraMarkers` and `extraPolylines` props to `RouteMap`
-  - added `showFallbackPolyline` so callers can hide RouteMap's straight-line
-    fallback when a domain-specific mode needs marker-only geometry
-  - kept RideHailing lifecycle semantics out of `RouteMap`
-- RideHailing Order Detail:
-  - added a pure `buildRideHailingOrderMapViewModel` helper
-  - maps `DISPATCHING` / `INITIATING` to an origin-focused searching mode
-  - maps `ACCEPTED` to provider pickup route plus driver marker when live data
-    is available
-  - maps `ARRIVED_AT_PICKUP` to driver-marker-only display
-  - maps `IN_TRIP` to provider remaining route plus driver marker, with muted
-    planned-route fallback when provider route is unavailable
-  - keeps `FINISHED`, `CANCELLED`, and `FAILED` on planned route behavior
-  - uses only local `ride.executionPhase` to decide map mode; provider live
-    phase/status no longer advances map state ahead of the persisted lifecycle
-  - added fallback copy for the arrived-at-pickup phase
-  - exposes `data-map-mode` on the route map for stable scenario assertions
-  - temporarily replaced the `PuFloatPanel` content with raw order /
-    RideHailing / bill / payment / map-view-model JSON for manual diagnosis
-  - removed the temporary absolute-positioned ripple overlay because it was not
-    actually bound to the route origin marker
-- Tests:
-  - added frontend unit tests for the RideHailing map view-model phase matrix
-  - extended the RideHailing system scenario to manually advance fake Caocao
-    through accepted, arrived-at-pickup, in-trip, and finished map modes
-  - system scenario now verifies initial post-create local `DISPATCHING`
-    remains `SEARCHING_ORIGIN`, then explicitly posts accepted callback before
-    expecting pickup geometry
-- Verification:
+This file is the current working change surface. Keep completed slice details
+compact and move old completed history to archive.
+
+Archived full history:
+
+- `archive/change-log-ordering-through-order-detail-map.md`
+
+## Last Completed Slice: RideHailing Order Detail Map Manual Review Corrections
+
+- Fixed shared Tencent map single-coordinate fitting so active single markers
+  respect `fitPadding`.
+- Preserved the existing single-point max zoom cap.
+- User manually confirmed the marker padding correction.
+- Committed as:
+  - `3c1eccb0 feat(ride-hailing): expose provider live geometry`
+  - `413cb260 feat(frontend): render ride-hailing order detail map states`
+  - `b568eefa fix(map): respect padding for single-marker fit`
+
+## Last Completed Slice: RideHailing Order Detail PuFloatPanel Content
+
+- Replaced raw JSON diagnostic panel content.
+- Added Status Hero with status title/description and right-side action slots.
+- Added readonly RideHailing SKU candidate cards only while dispatching.
+- Added larger spacing before lifecycle-independent ride facts.
+- Rendered exactly two ride fact sections:
+  - route
+  - riders
+- Extended `RideHailingSkuCard` with a readonly/no-checkbox shape while keeping
+  Ordering Page default selectable behavior unchanged.
+- Extended RideHailing Order Detail projection with minimal candidate vehicle
+  card facts derived from the order choice-set item.
+- Updated the RideHailing system scenario from raw JSON assertions to semantic
+  panel assertions.
+- Limitation:
+  cancel/more controls are rendered disabled because RideHailing cancel and
+  more-operation domain actions do not exist yet.
+- Manual review correction:
+  Status Hero remains a single row on narrow screens; the actions side does not
+  shrink, and the status copy side takes compression.
+
+## Verification
+
+- `pnpm --dir apps/backend exec tsc --noEmit -p tsconfig.json`
+- `pnpm --dir apps/frontend exec vue-tsc --noEmit`
+- `pnpm exec biome check apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts apps/frontend/src/domains/commerce/ui/ordering/RideHailingSkuCard.vue apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts tasks/ride-hailing-ui-fixes`
+- `pnpm exec vitest run --config vitest.config.ts --project system-scenario -t "commerce_ride_hailing_ordering_reaches_order_detail"`
+- `git diff --check`
+- Status Hero single-row correction:
   - `pnpm --dir apps/frontend exec vue-tsc --noEmit`
-  - `pnpm exec vitest run --config vitest.config.ts --project frontend-unit -t "buildRideHailingOrderMapViewModel"`
-  - `pnpm exec vitest run --config vitest.config.ts --project system-scenario -t "commerce_ride_hailing_ordering_reaches_order_detail"`
-  - `pnpm --filter @partner-up-dev/fake-caocao-server typecheck`
-  - `pnpm --filter @partner-up-dev/fake-caocao-server test`
-  - `pnpm --dir apps/backend exec tsc --noEmit -p tsconfig.json`
-  - `pnpm exec biome format --write` on the changed frontend/scenario files
-  - `git diff --check`
+  - `pnpm exec biome check apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue`
+  - `git diff --check -- apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue`
 
-## Slice: RideHailing Order Detail Map Manual Review Corrections
+## Next Manual Review
 
-- Shared Tencent map provider:
-  - changed single-coordinate fitting from `easeTo(center)` to a tiny
-    `fitBounds` area so `fitPadding` is respected for one active marker
-  - preserved the existing single-point max zoom cap
-  - kept the fix generic in shared map infrastructure rather than adding a
-    RideHailing-specific offset
-- RideHailing impact:
-  - `DISPATCHING` origin focus can now account for the bottom `PuFloatPanel`
-    overlay when the active geometry is only `route-point-0`
-- Verification:
-  - `pnpm --dir apps/frontend exec vue-tsc --noEmit`
-  - `pnpm exec vitest run --config vitest.config.ts --project frontend-unit -t "buildRideHailingOrderMapViewModel"`
-  - `pnpm exec biome check apps/frontend/src/shared/map/tencent/tencent-lbs-provider.ts`
-  - `git diff --check -- apps/frontend/src/shared/map/tencent/tencent-lbs-provider.ts`
+- Browser review of `PuFloatPanel` at dispatching and post-dispatch phases.
+- Decide whether RideHailing cancellation should become a separate domain slice.
diff --git a/tasks/ride-hailing-ui-fixes/control.md b/tasks/ride-hailing-ui-fixes/control.md
index 99c65d9d6..b0a6d6451 100644
--- a/tasks/ride-hailing-ui-fixes/control.md
+++ b/tasks/ride-hailing-ui-fixes/control.md
@@ -19,13 +19,13 @@ Hypothesis:
 ## Classification
 
 - Primary route: `Reality`
-- Active mode: `Explore` / `Solidify` for RideHailing Order Detail map and
-  live route behavior
+- Active mode: `Execute` for RideHailing Order Detail `PuFloatPanel` content
+  correction
 - Current collaboration state: choice-set backend/domain foundation, Ordering
   UI primitive/control, SKU Card layout remediation, Offer Listing / quote
   identity, Ordering entry decoupling, durable docs promotion, and fake provider
-  lifecycle control committed; current slice prepares the RideHailing Order
-  Detail content redesign
+  lifecycle control committed; current slice replaces the RideHailing Order
+  Detail `PuFloatPanel` diagnostic content and awaits manual browser review
 
 ## Inherited Effective Truth
 
@@ -59,14 +59,24 @@ Hypothesis:
     marker-only state, in-trip remaining route, and terminal planned route
   - map mode is driven by local persisted `ride.executionPhase`, not provider
     live phase/status
-  - RideHailing `PuFloatPanel` currently shows raw JSON diagnostic data only
+  - RideHailing `PuFloatPanel` no longer shows raw JSON diagnostic data
   - shared Tencent map single-coordinate fitting now respects `fitPadding` by
     using a tiny `fitBounds` area instead of direct `easeTo(center)`
-  - manual browser validation remains pending
+  - manual browser validation confirmed the map padding correction
+  - panel content now contains Status Hero, dispatching-only readonly SKU list,
+    route section, and rider section only
+  - `RideHailingSkuCard.vue` has a readonly/no-checkbox shape for detail
+    display while preserving the Ordering Page default selectable behavior
+  - RideHailing Order Detail projection now exposes minimal candidate vehicle
+    card facts from the persisted choice-set item
+  - cancel/more controls in the Status Hero are disabled visual controls until
+    RideHailing cancellation/more-operation use cases exist
   - standalone plan:
     `tasks/ride-hailing-ui-fixes/order-detail-ride-hailing-map-plan.md`
 - `RouteMap.vue` / shared map code are relevant when a UI issue concerns route
   geometry, marker behavior, or zoom/pan behavior.
+- `RideHailingSkuCard.vue` is reusable for order detail dispatching candidate
+  SKU display only if it supports a readonly shape without checkbox.
 
 ## Collaboration Protocol
 
@@ -90,6 +100,20 @@ Hypothesis:
 - Keep old `tasks/ride-hailing-mvp/` as historical evidence only; do not expand
   it for new UI-fix work.
 
+## Log Hygiene
+
+- Root `discussion-log.md` and `change-log.md` are current working surfaces,
+  not complete history dumps.
+- Keep root logs short enough to reload before a slice. Prefer:
+  - current segment decisions
+  - pinned cross-slice decisions
+  - open implementation checks
+  - latest completed slice and planned verification
+- Move old completed history into scope-named files under `archive/`.
+- Current archive files:
+  - `archive/discussion-log-ordering-through-order-detail-map.md`
+  - `archive/change-log-ordering-through-order-detail-map.md`
+
 ## Durable Owners Likely Touched
 
 - `docs/20-product-tdd/ecommerce-contracts.md`
diff --git a/tasks/ride-hailing-ui-fixes/discussion-log.md b/tasks/ride-hailing-ui-fixes/discussion-log.md
index 8b342476b..a3b87a89d 100644
--- a/tasks/ride-hailing-ui-fixes/discussion-log.md
+++ b/tasks/ride-hailing-ui-fixes/discussion-log.md
@@ -1,1203 +1,59 @@
 # Discussion Log
 
-## Slice: Packet Reset And Collaboration Protocol
-
-- Created a clean task packet for incremental RideHailing Ordering UI and Order
-  Detail UI fixes.
-- Confirmed collaboration protocol:
-  - perform Impact Handshake before every production-code fix
-  - wait for explicit `开始` before implementation
-  - do not auto-commit unless explicitly requested
-  - raise objections when requested changes may damage functionality,
-    ownership boundaries, maintainability, readability, or established UI
-    contracts
-
-## Slice: RideHailing Ordering Content Layout
-
-- Implemented and committed:
-  `f7ac1aa3 fix(ride-hailing): align ordering content layout`.
-- Naming decision:
-  `RideHailingOrderingContent` should match the Ordering page shell assembly
-  concepts: header, content, and footer / bottom action bar.
-- Layout decision:
-  RideHailing content should use a no-padding Ordering shell; content and footer
-  should sit directly adjacent.
-- Layout decision:
-  `ordering.ride-hailing.drawer-control-row` is a sibling of
-  `ordering.ride-hailing.bottom-sheet`, anchored at the content bottom and
-  visually separated with `surface-container`.
-
-## Investigation: Current Evaluation And SKU Ownership Model
-
-- Observed model concern:
-  changing the selected RideHailing SKU currently feeds into ordering
-  evaluation, which re-evaluates and replaces the whole RideHailing options
-  payload.
-- Clarified current implementation:
-  - Ordering parent page evaluation owns price summary, create-order
-    availability, error notice text, and RideHailing evaluated option payload.
-  - Current RideHailing SKU list has two effective sources: catalog SKU
-    candidates from `offerDetail.spus[].skuOptions`, and provider-priced
-    options from `/api/commerce/ordering/evaluate`.
-  - Switching selected RideHailing SKU changes evaluation input, which triggers
-    a full evaluate request and replaces the evaluated options array.
-- Problem statement:
-  candidate discovery, selected SKU state, quote refresh, price summary, and
-  create-order pre-flight validation are currently coupled through one
-  evaluation model.
-
-## Decision: Target Evaluation And RideHailing SKU Model
-
-- `evaluationOrderInput` should be produced and evaluated only after the user
-  clicks the submit / create-order button.
-- Evaluation should act as create-order pre-flight:
-  - if key data such as quoted price has changed from what the page displayed,
-    show a dialog asking whether the user wants to continue with the changed
-    terms
-  - if blocking reasons exist, such as PR readiness or other create-order
-    pre-flight failures, show a dialog with only an acknowledgement action
-  - after a successful evaluation, request create order
-- `ordering-footer-action-bar__price-summary`, including price and price detail,
-  should come from Ordering Content output, not from parent-page evaluation.
-- RideHailing SKU list data ownership belongs to `RideHailingOrderingContent`.
-- Parent-page evaluation should not include `rideHailing.options` and should
-  not feed evaluated options back into `RideHailingOrderingContent`.
-
-## Slice: Submit-Time Preflight And RideHailing SKU Ownership
-
-- Impact Handshake accepted with explicit `开始`.
-- Implementation decision:
-  parent page still builds the same create-order command shape, but only calls
-  `POST /api/commerce/ordering/evaluate` inside the submit handler.
-- Implementation decision:
-  RideHailing content owns quote option loading through a dedicated
-  `POST /api/commerce/ordering/ride-hailing/options` endpoint keyed by
-  `offerId + route`, not by selected SKU.
-- Implementation decision:
-  Ordering Content emits a local price summary for the footer and price-detail
-  drawer; the parent page no longer reads footer price from evaluation output.
-- Implementation decision:
-  evaluate still performs authoritative submit-time pre-flight and pricing, but
-  its response no longer contains product-specific RideHailing option lists.
-- Runtime finding:
-  moving the quote query into `RideHailingOrderingContent` caused setup-time
-  evaluation of `rideRouteForSubmit`; its route conversion helper had to be
-  declared before the computed chain to avoid a JavaScript temporal dead zone.
-- Verification result:
-  the focused RideHailing system scenario passes after the TDZ fix.
-
-## Investigation: RideHailing Ordering Map Appears Gray
-
-- Observed report:
-  RideHailing Ordering page map appeared gray in the user's browser, while
-  price, SKU list, and selected SKU behavior looked correct.
-- Browser reproduction finding:
-  local Playwright reproduction loaded Tencent Maps SDK, direction JSONP, map
-  canvas, controls, attribution, and endpoint labels without failed requests.
-- Warning finding:
-  the Vue warning about `data-testid` on `PuDialog` is unrelated to the map; it
-  comes from passing an inheritable attribute to a dialog component whose root
-  cannot inherit attributes automatically.
-- Final classification:
-  the gray-map observation was confirmed by the user to be a browser-client
-  issue, not a product-code or shared-map implementation issue.
-- Follow-up decision:
-  do not change shared map code for this observation. Keep the remaining active
-  need focused on adding the RideHailing preflight price-change scenario.
-
-## Slice: RideHailing Preflight Price-Change Scenario
-
-- Impact Handshake accepted with explicit `开始`.
-- Scenario need:
-  RideHailing must cover the case where the page displays one provider quote,
-  then submit-time pre-flight receives a changed quote and asks the user whether
-  to continue.
-- Test-support decision:
-  the cleanest way to create this state is a fake Caocao admin-only estimate
-  mutation route. This avoids adding artificial hooks to production commerce or
-  provider adapter code.
-- Scenario decision:
-  assert not only that the price-change dialog appears, but also that no fake
-  provider order exists before the user confirms. This proves the pre-flight
-  confirmation gates order creation rather than merely appearing in parallel.
-- Selector decision:
-  the scenario does not use `ordering.preflight-dialog` because `PuDialog`
-  cannot inherit that `data-testid` reliably. It asserts visible dialog text and
-  the `继续下单` action instead.
-
-## Investigation: RideHailing SKU Card, Multi-Select, And Float Panel
-
-- Requested next slice:
-  migrate RideHailing SKU card to package primitives, make the vehicle option
-  list use `usePuSelect` with multi-select, and replace the custom bottom sheet
-  with `PuFloatPanel`.
-- Design-web finding:
-  `PuCard` supports `selectable` and `active`, `PuCheckbox` is a boolean native
-  checkbox primitive, `usePuSelect` supports single and multiple selection
-  state, and `PuFloatPanel` supports bottom-attached draggable height stops.
-- Design-web caveat:
-  `PuCard` usage guidance says interactive cards must not contain nested
-  interactive controls. A card plus checkbox composition must avoid creating
-  two independent focusable controls for one option.
-- SKU presentation finding:
-  current durable merchandising contract gives `presentation` to SPU only.
-  `product_skus`, admin SKU input, create/update SKU use cases, and
-  `OrderingOfferDetailSku` do not currently expose SKU-level presentation or
-  image fields.
-- Model concern:
-  RideHailing ordering currently has an `EXACTLY_ONE` SKU selection policy and
-  order/evaluation commands use concrete `items: [{ skuId, quantity }]`.
-  A multi-select vehicle UI should likely represent a quote candidate set /
-  user preference set, while the create-order command still needs one selected
-  SKU unless the order model is deliberately widened.
-- Implementation boundary to confirm:
-  this slice may need a small catalog-contract expansion for SKU preview images
-  and a frontend summary/output model change so Ordering Shell can receive
-  multi-selected quote data without confusing it with the authoritative
-  create-order item.
-- Human decision:
-  SKU should own full `ProductPresentation`, not a reduced preview-only
-  presentation field.
-- Human decision:
-  RideHailing vehicle selection should be multi-select. A user selects multiple
-  acceptable vehicle SKUs; dispatch should search for a suitable driver within
-  that selected SKU set.
-- Interaction decision:
-  the `PuCard` + `PuCheckbox` composition should behave as one unified option
-  target, avoiding independent nested card and checkbox interactions.
-
-## Model Direction: Choice-Set Order Item For RideHailing
-
-- Human model proposal:
-  extend the Order model so it can natively represent the RideHailing shape:
-  the user orders a set of acceptable products, while fulfillment ultimately
-  grants exactly one product from that set.
-- Model correction:
-  `productTypedExtraProperties.acceptableSkuIds` is cleaner than overloading
-  `items` with multiple ordinary order items, but it may still be too
-  product-specific if the same "choose one from this acceptable set" shape is a
-  first-class Order concept.
-- Emerging order-item distinction:
-  ordinary order item means "the user buys/receives this SKU"; RideHailing needs
-  a choice-set item meaning "the user authorizes this SKU set, and the system or
-  provider resolves one final SKU before or during fulfillment."
-- Candidate vocabulary:
-  - `ORDER_ITEM_FIXED`: one concrete SKU is ordered
-  - `ORDER_ITEM_CHOICE_SET`: several candidate SKUs are ordered as one logical
-    item, with one eventually resolved SKU
-- Important invariant under discussion:
-  billing, order detail, provider dispatch, and audit need both the candidate
-  SKU set and the resolved SKU snapshot. The resolved SKU cannot erase the
-  accepted candidate set because the user's consent was to a bounded set.
-- Open modeling question:
-  whether the resolved SKU must exist at create-order time after pre-flight
-  quoting, or whether the order can be created with an unresolved choice set and
-  resolved later during provider dispatch.
-- Human decision:
-  choose the unresolved-at-create model. Order creation records the accepted
-  candidate SKU set; fulfillment / dispatch later resolves exactly one SKU from
-  that set.
-- Human decision:
-  Ordering UI shows the candidate set price range, not a single resolved SKU
-  price.
-- Human decision:
-  Bill is created from the resolved SKU quote / provider settlement amount,
-  not from the unresolved candidate set range.
-- Current implementation mismatch:
-  existing RideHailing create-order synchronously calls the provider and stores
-  one selected SKU immediately. The target model requires creating an
-  unresolved choice-set item first, then resolving it through the RideHailing
-  order lifecycle dispatch step.
-- Human correction:
-  resolution should not be constrained to candidates only. Providers may grant a
-  better or different vehicle class, such as a free upgrade. Candidate SKUs are
-  the user's accepted quote/search basis, while resolution must record whether
-  the provider result was inside the candidate set, an upgrade, or another
-  provider substitution.
-- Artifact:
-  saved the target RideHailing Order / Fulfillment / Bill sequence diagram in
-  `tasks/ride-hailing-ui-fixes/sequence-diagram.md`.
-
-## Planning: Choice-Set SKU, Dispatch, Billing, And Float Panel
-
-- Human direction:
-  this large slice needs a separate plan file and pre-implementation information
-  collection before review and coding.
-- Classification:
-  the slice is now an `Intent`-level product semantics change, not a local UI
-  fix. It likely needs durable PRD / Product TDD updates before or with
-  production implementation.
-- Information finding:
-  existing ecommerce contract says SPU owns presentation, persisted order items
-  are concrete SKU snapshots, and command `items` are `{ skuId, quantity }`.
-  Choice-set order items therefore require a native Trade Order contract change.
-- Information finding:
-  current `product_skus` has no presentation, and SKU create/update/admin
-  schema/ordering projection paths do not expose presentation.
-- Information finding:
-  current RideHailing create-order calls provider `createRide` inside the
-  create-order transaction. The target unresolved model needs an explicit
-  dispatch lifecycle step after the choice-set item exists.
-- Information finding:
-  current `ride_hailing_orders.providerInstanceId` is non-null at create time.
-  A mixed-provider candidate set would require either an MVP same-provider
-  constraint or a larger provider-resolution model.
-- Information finding:
-  current Caocao dispatch sends one `car_type`. Multi-select candidate SKUs need
-  an explicit local dispatch policy rather than assuming provider-side
-  multi-vehicle search.
-- Design-web finding:
-  `PuFloatPanel`, `PuCard`, `PuCheckbox`, and `usePuSelect` are exported from
-  `@partner-up-dev/design-web@0.4.6`; `PuCard` selectable composition must avoid
-  nested independent interactive controls.
-- Artifact:
-  added
-  `tasks/ride-hailing-ui-fixes/choice-set-sku-float-panel-plan.md` with the
-  collected facts, proposed phases, objections, and review questions.
-
-## Review: Clean Long-Term Choice-Set Model Corrections
-
-- Human principle:
-  pursue a long-term clean and stable model. MVP means simpler capability, not
-  a less maintainable or more complex domain model.
-- Human correction:
-  `ride_hailing_orders.providerInstanceId` should be removed as a required
-  create-time field. Provider instance belongs to the RideHailing SKU facts and
-  should be resolved from the chosen candidate during dispatch.
-- Human correction:
-  do not introduce `productTypedExtraProperties.acceptableSkuIds`. The
-  create/evaluate command path should promote `items` to a generic
-  discriminated union and support `CHOICE_SET` natively.
-- Human decision:
-  first dispatch policy is cheapest-first.
-- Human decision:
-  provider dispatch failure causes order cancellation.
-- Human decision:
-  if provider substitution outside candidates produces a higher final settlement
-  than the displayed quote range, Bill keeps the final settlement as-is.
-- Later correction:
-  dispatch is not only a RideHailing Fulfillment command, it is also
-  RideHailing Order lifecycle. Provider dispatch should stay inside the
-  create-order transaction for this slice.
-- Artifact update:
-  revised `choice-set-sku-float-panel-plan.md` and `sequence-diagram.md` to
-  remove `acceptableSkuIds`, promote command item union, remove provider
-  pre-binding, and record the resolved review decisions.
-
-## Review: Dispatch Lifecycle And Provider Binding Corrections
-
-- Human correction:
-  dispatch is not only a RideHailing Fulfillment command. It is also part of the
-  RideHailing Order lifecycle, so this slice should not move provider dispatch
-  out of the create-order transaction.
-- Human decision:
-  post-dispatch provider binding should live only in the choice-set resolution
-  snapshot.
-- Human decision:
-  if provider create fails, cancel the order and do not retry the next cheapest
-  candidate, another vehicle type, or another provider. Candidate sets may span
-  multiple providers and multiple vehicle types per provider, but provider
-  dispatch failure is not retried.
-- Human decision:
-  provider create failure returns the cancelled order id to the frontend.
-  Ordering Page should not navigate to Order Detail; it should show a dialog
-  explaining that ordering failed and why. To the user this is a failed order
-  creation, while the domain records an order that was created and cancelled.
-- Human scoping decision:
-  Order Detail is out of scope for this slice. Keep the current legacy Order
-  Detail implementation and preserve the data shape it already reads.
-- Artifact update:
-  revised the plan and sequence diagram to remove the async JobRunner dispatch
-  direction, put provider binding only in choice-set resolution, remove retry
-  behavior, define the cancelled-order API/UI behavior for provider create
-  failure, and exclude Order Detail redesign from this slice.
-
-## Final Review: Implementation Readiness Information
-
-- Plan consistency finding:
-  the target model is now coherent, but implementation must start from durable
-  model/schema contracts rather than a UI-only primitive migration.
-- Catalog contract finding:
-  current `SkuSelectionPolicy` only supports `EXACTLY_ONE`. RideHailing
-  multi-select candidate authorization needs a native choice-set selection
-  policy on the SPU sales policy, otherwise the UI and Order command would
-  contradict catalog truth.
-- Provider binding finding:
-  "provider binding lives only in choice-set resolution" includes both provider
-  instance id and provider order id. Current code stores and reads both from
-  `ride_hailing_orders`, so callback, live detail query, provider fee
-  confirmation, and persistence mapping need a shared resolution-binding reader.
-- Order item helper finding:
-  current Trade item helpers assume every item has a fixed `sku` and quantity.
-  After introducing `OrderItemSnapshot` union, fixed-only helpers must assert the
-  fixed kind and choice-set helper functions must own candidates/resolution
-  reads.
-- Frontend/API finding:
-  create-order result should become a discriminated union. Provider create
-  failure is a successful transport response with `outcome: "CANCELLED"`,
-  cancelled order id, and user-displayable reason. The Ordering Page mutation
-  success branch must show a dialog and skip navigation for that outcome.
-- Preflight finding:
-  RideHailing choice-set price-change preflight must compare displayed/evaluated
-  ranges, not `totalFen`. Fixed-order products can keep the current total
-  comparison.
-- Artifact update:
-  added these implementation-readiness findings to
-  `choice-set-sku-float-panel-plan.md`.
-
-## Implementation: Choice-Set Backend Foundation Segment 1
-
-- Human start:
-  user accepted splitting the large slice into two implementation segments and
-  explicitly started the first segment.
-- Segment boundary:
-  first segment implements durable contract/schema/order lifecycle foundation
-  and only the minimum frontend bridge needed to keep Ordering Page working.
-  It intentionally does not migrate the RideHailing SKU card to `PuCard`,
-  vehicle selection to `usePuSelect`, or bottom sheet to `PuFloatPanel`.
-- Implementation decision:
-  segment 1 keeps RideHailing UI single-select while sending a `CHOICE_SET`
-  command item containing the selected SKU as a one-item candidate set. This
-  lets the backend model become correct before the multi-select visual/control
-  migration.
-- Implementation decision:
-  provider create failure is represented as a successful transport response
-  with `outcome: "CANCELLED"`, the cancelled order id, and an
-  `OrderingActionProblem`. The Ordering Page handles it like a user-visible
-  order failure and does not navigate.
-- Implementation decision:
-  provider binding is now read from the resolved choice-set item in callback,
-  live-detail query, and provider-fee confirmation paths. The
-  `ride_hailing_orders` row keeps lifecycle snapshots only.
-- Compatibility decision:
-  Order Detail remains visually unchanged for this segment. Compatibility
-  readers project the selected/resolved SKU name from either fixed items or
-  choice-set resolution/candidates.
-- Test finding:
-  old backend scenarios were still asserting provider fields directly on
-  `ride_hailing_orders`; those were corrected to assert unresolved choice-set
-  foundation and resolved provider binding in item resolution.
-- Verification finding:
-  backend typecheck, frontend typecheck, focused backend RideHailing scenarios,
-  focused browser RideHailing system scenario, DB config checks, whitespace
-  check, and directed Biome lint all passed after segment 1.
-- Remaining work:
-  second segment should handle the original visual/control migration:
-  `RideHailingSkuCard` -> `PuCard` + `PuCheckbox`, list selection ->
-  `usePuSelect` multiple, actual multi-select candidate ranges, and
-  `ordering.ride-hailing.bottom-sheet` -> `PuFloatPanel` with three stops.
-
-## Implementation: Choice-Set Ordering UI Segment 2
-
-- Human start:
-  user explicitly started the second segment and requested the slice validation
-  and closure work.
-- Implementation boundary:
-  this segment stayed in the Ordering UI/control layer. It did not further
-  change the backend create-order lifecycle or Order Detail redesign scope.
-- UI primitive decision:
-  `RideHailingSkuCard` now uses `PuCard selectable` as the option control.
-  `PuCheckbox` is rendered as a visual state affordance inside the card; the
-  checkbox itself does not own a separate option interaction. This preserves a
-  single click/keyboard target per vehicle option.
-- Preview decision:
-  SKU hero image is resolved from `sku.presentation.heroImageAssetIds[0]`, then
-  detail image fallback. Because current presentation values are plain strings
-  and may be non-displayable asset ids, the frontend only renders direct
-  `http(s)`, `data:`, `blob:`, or `/` URLs and falls back to the existing car
-  icon otherwise.
-- Selection decision:
-  `usePuSelect<number>({ multiple: true })` owns selected RideHailing SKU ids.
-  The default selected candidate is the provider/default selectable option or
-  the cheapest selectable option. Tapping another card adds it to the candidate
-  set instead of replacing the existing candidate.
-- Pricing consequence:
-  with 快车 default-selected and 专车 added, the footer shows the candidate range
-  `￥36.00~52.00`; preflight range comparison detects changes as range changes,
-  such as `￥36.00~52.00 -> ￥36.00~61.00`.
-- Dispatch consequence:
-  because the backend dispatch policy is cheapest-first, a candidate set
-  containing 快车 and 专车 resolves to 快车 unless quotes change the ordering.
-  The system scenario now asserts this explicitly.
-- Float-panel decision:
-  `PuFloatPanel` replaces the custom bottom sheet. The three stops are computed
-  from the Ordering Content container height, and map fit padding follows the
-  active stop. The drawer control row remains a sibling absolute layer at the
-  bottom.
-- Verification finding:
-  frontend typecheck, focused RideHailing system scenario, directed Biome lint,
-  and `git diff --check` passed after segment 2.
-
-## Review: SKU Card Layout Remediation
-
-- Human correction:
-  Segment 2's `RideHailingSkuCard` layout is not correct. The card should not
-  be a horizontal three-column list item shaped as
-  `[preview][vehicle summary][price / checkbox]`.
-- Human correction:
-  this is not a new slice. It is a continuation of the current choice-set SKU /
-  float-panel slice, and can be tracked as Segment 3: SKU Card Layout
-  Remediation.
-- Target layout:
-  the card should be a left/right layout:
-  `flex-row(meta-flex-col(flex-row(name, info-icon-btn), preview), price-flex-col(estimated-text, flex-col(amount, checkbox)))`.
-- Target alignment:
-  the price column is `items-end`; both amount and checkbox are right-aligned.
-- Human correction:
-  checkbox belongs below the price amount, not in the name row and not beside
-  the amount.
-- Human correction:
-  there is no separate product concept called `vehicle summary`; it should be
-  treated as the SKU name.
-- Human correction:
-  `status/reason` should not exist inside the card. Unavailable RideHailing
-  vehicle options should be hidden by the list layer, not rendered as disabled
-  cards with reason text.
-- Invariants for remediation:
-  keep `PuCard selectable`; keep `PuCheckbox` as visual state only; keep the
-  card as the single interactive target; keep multi-select `usePuSelect`; keep
-  SKU preview fallback; keep existing semantic test ids stable.
-- Implementation status:
-  remediation was later started explicitly and implemented as Segment 3.
-
-## Implementation: Choice-Set SKU Card Layout Remediation Segment 3
-
-- Human start:
-  user explicitly started Segment 3 after the task packet was updated.
-- Implementation boundary:
-  this segment only changed the RideHailing SKU card display and its immediate
-  caller. It did not change the choice-set order model, provider dispatch,
-  `PuFloatPanel`, or Order Detail scope.
-- Layout decision:
-  `RideHailingSkuCard` now uses the reviewed left/right structure:
-  meta column with SKU name + info icon and preview, plus a right-aligned price
-  column with estimated text, amount, and checkbox below the amount.
-- Interaction decision:
-  the info icon remains visual-only rather than an actual nested button because
-  the card itself is the single selectable target.
-- Interaction decision:
-  the checkbox remains a visual `PuCheckbox` state affordance controlled by
-  `usePuSelect`; it does not own independent selection state.
-- Content decision:
-  the card no longer receives or displays `disabledReason`. Unavailable quoted
-  options continue to be filtered out by `visibleRideQuoteOptions`, so status /
-  reason text does not become a card concept.
-- Responsive decision:
-  the 420px media rule no longer hides the preview. On narrow widths the preview
-  shrinks but remains visible.
-- Verification finding:
-  formatting, directed lint, frontend typecheck, focused RideHailing system
-  scenario, and `git diff --check` passed after Segment 3.
-
-## Exploration: RideHailing Dynamic SKU Loading
-
-- Human next-slice intent:
-  RideHailing SKU availability should become dynamic. Which RideHailing SKUs are
-  listed depends on route and departure time. The proposed direction is querying
-  the provider for available vehicle types based on those dynamic factors.
-- Human interaction requirement:
-  when Ordering entry includes a `departureAt` binding, `RideHailingOrderingContent`
-  should not silently adopt it. After mount it should open a dialog asking
-  whether to use the imported departure time. The default is no, meaning
-  "depart now" and submitted `departureAt: null`.
-- Offer detail source:
-  PR Page resolves a placement ordering entry through
-  `POST /api/placements/:instanceId/ordering-entry`, stores the returned
-  `OrderingEntryPayload` in `sessionStorage`, and navigates to `/order/new`.
-  The backend ordering-entry use case reads `placement.offerId`, resolves
-  bindings from matching context, then calls `getOrderingOfferDetail`.
-- Offer detail projection:
-  `getOrderingOfferDetail` reads the active Offer, then reads each active SPU
-  from `offer.spuIds`, filters by offer product type, reads active SKUs under
-  those SPUs, and returns SPU/SKU projection data: ids, status, sales/service
-  policy, presentation, SKU facts, SKU pricing model, cancellation summary, and
-  offer pricing/terms.
-- Current frontend chain:
-  `RideHailingOrderingContent` receives catalog `offerDetail` from the Ordering
-  entry. It builds `rideBaseOptions` by flattening all active catalog
-  `spu.skuOptions` from the offer. It then builds `quoteOptionsInput` with
-  `{ source.offerId, route }` and calls `useRideHailingQuoteOptions`.
-- Current query behavior:
-  `useRideHailingQuoteOptions` calls
-  `POST /api/commerce/ordering/ride-hailing/options` and keys the query by the
-  full input object. Because the input currently contains route but not
-  departure time, route changes can refetch options while departure-time changes
-  cannot.
-- Current list replacement behavior:
-  once the quote-options query returns any options, `rideQuoteOptions` uses the
-  provider/evaluated options instead of catalog fallback options. If quoted
-  options exist, `visibleRideQuoteOptions` hides non-selectable options.
-- Current backend chain:
-  `/ordering/ride-hailing/options` validates only `{ source.offerId, route }`
-  and calls `quoteRideHailingOrderingOptions({ offerId, route })`.
-- Current backend option source:
-  `quoteRideHailingOrderingOptions` resolves the offer, then
-  `evaluateRideOptions` enumerates every active RideHailing catalog SKU attached
-  to the offer. It filters only by optional `candidateSkuIds` for submit-time
-  paths; browsing/options mode has no candidate filter.
-- Current provider interaction:
-  each catalog SKU maps to provider facts
-  `{ rideHailingProviderInstanceId, providerVehicleTypeCode }`. The backend then
-  calls the provider estimate endpoint once per SKU with that SKU's
-  `car_type` plus origin/destination coordinates.
-- Selectability source:
-  `selectable=false` is not a provider response field in the current model. It
-  is backend-local interpretation. The backend returns `selectable=false` when
-  the mapped provider instance is missing/inactive or when the provider estimate
-  call throws/fails. Successful estimate parsing produces `selectable=true`.
-- Current departure-time gap:
-  `departureAt` already flows from PR `startAt` into Ordering bindings and into
-  create-order extras, but it is not part of quote-options input, provider
-  estimate params, query key, or options endpoint schema.
-- Current provider abstraction gap:
-  `RideHailingProviderPort.estimate` is a thin raw-params method. It has no
-  provider-owned "list available vehicle options for route/time" capability.
-  Dynamic availability currently emerges only by trying known catalog SKUs and
-  marking failed estimates as non-selectable.
-- Current provider quote / vehicle interfaces:
-  the app-level provider port has `estimate`, `createRide`, `queryOrderDetail`,
-  `cancelRide`, `queryCancelFee`, `confirmFee`, and callback parsing. There is
-  no typed "list available vehicle types" method. The Caocao adapter maps
-  `estimate` to `GET /common/estimatePriceWithDetail` and maps `createRide` to
-  `POST /common/orderCarV2`.
-- Current estimate IO:
-  input is raw provider params. The app currently sends `car_type`, `flat`,
-  `flng`, `tlat`, and `tlng`. Output is provider-raw `unknown`; Trade parses
-  price from `estimateAmountFen | estimatePriceFen | estimate_price | price`
-  and vehicle display name from `carTypeName | car_type_name`.
-- Current create-ride IO:
-  input is local `orderId` plus raw provider params. The app currently sends
-  `callback_url`, `car_type`, `flat`, `flng`, `tlat`, and `tlng`; the adapter
-  adds `ext_order_id`. Output is normalized to `{ providerOrderId,
-  externalOrderId, providerSnapshot }`.
-- Current fake-provider gap:
-  fake Caocao stores static estimates keyed by car type. Its estimate response
-  does not vary by route or departure time, and there is no dynamic availability
-  control beyond changing a car type's estimate amount or forcing next create
-  failure.
-- Options endpoint timing and return:
-  `/ordering/ride-hailing/options` is called by TanStack Query when
-  `RideHailingOrderingContent` has non-null `quoteOptionsInput`. The query key
-  includes the full input object, so it refetches when `offerId` or route input
-  changes. It currently returns `{ quoteExpiresAt, options }`, where each option
-  is a backend `RideQuoteOption` containing local SKU id/SPU id, provider and
-  vehicle labels/codes, selected/selectable flags, disabled reason, estimate
-  amount, quoted amount, and price explanations.
-- Initial objection / boundary:
-  provider-driven dynamic SKU discovery must still reconcile with catalog SKU
-  ownership. Orders, billing, and SKU presentation require local SKU identity,
-  so provider-returned vehicle types need a clean mapping to local SKUs rather
-  than becoming anonymous frontend options.
-
-## Model Direction: Dynamic RideHailing Product Listing
-
-- Human model direction:
-  the long-term clean model is to query the Provider for available vehicle
-  classes by SPU + route + departureAt, then merge provider availability/quote
-  facts with local RideHailing SKU catalog facts. A RideHailing SKU is listed
-  only when:
-  - provider estimate/availability returns that vehicle type for the dynamic
-    route/time
-  - the corresponding local SKU exists and is `ACTIVE`
-- Human correction:
-  do not continue returning `selectable=true/false` to the frontend for
-  unavailable RideHailing SKUs. Unavailable options should be absent from the
-  listing result.
-- Human objection:
-  Provider Port `estimate` returning `Promise<unknown>` is not a clean boundary.
-  The Provider Port should define a standard app-level estimate/listing shape,
-  and each adapter should translate provider-specific responses into that
-  shape.
-- Human routing concern:
-  `/ordering/ride-hailing/options` is semantically misnamed for the target
-  model. A more unified Product Listing query interface may be preferable. That
-  interface could route by product type internally or perform product-specific
-  pre/post processing, but the exact route boundary needs review against current
-  Product Catalog and Offer responsibilities.
-- Current Catalog/Offer boundary finding:
-  user-facing ordering has no standalone public Product Catalog route today.
-  Product/SPU/SKU/Offer authoring is admin-owned under admin commerce routes.
-  User-facing product truth enters ordering through Placement's
-  `OrderingEntryPayload.offerDetail`, and dynamic RideHailing option loading is
-  currently under Commerce Ordering.
-- Current Offer model finding:
-  Offer is a commercial wrapper over one or more SPUs of the same product type.
-  It owns product type, SPU ids, terms version, active window, and pricing
-  policy. SPU/SKU own catalog facts/presentation/base pricing/service policy.
-- Implication:
-  even if the provider query is conceptually "SPU + route + departureAt", the
-  public listing request likely still needs `offerId` or an Offer-scoped source
-  so pricing policy, terms, and offer membership remain authoritative. The
-  listing use case can then resolve offer -> SPUs -> product-specific listing
-  query.
-- Departure-time UX refinement:
-  imported `departureAt` binding should remain available in the departure-time
-  drawer as a one-tap apply action even when the initial dialog default keeps
-  `departureAt` null / "depart now".
-
-## Model Direction: Offer-Owned Product Listing Query
-
-- Human decision:
-  the unified listing query should use `offerId` as its public entrypoint. This
-  means the query is not only "list product catalog"; it should include listing
-  prices because Offer owns commercial pricing policy and membership.
-- Human sketch:
-  the conceptual pipeline is:
-  - `offerId -> SPU -> SKUs`
-  - product-type-specific mask logic takes local SKUs plus product-specific
-    context, such as RideHailing route/departureAt, and returns listed SKUs
-  - pricing is resolved behind a product-type-specific path
-- Modeling concern:
-  for RideHailing, provider availability/mask and provider quote are the same
-  provider interaction. Splitting mask and price into two physical calls would
-  be redundant.
-- Working model:
-  keep mask and pricing as conceptual phases, but implement them through a
-  product-specific listing resolver that may do both in one pass. For
-  RideHailing, `Offer + SPUs + route + departureAt` calls the Provider once per
-  mapped vehicle type or through a future provider listing method, joins
-  returned provider vehicle quotes to local ACTIVE SKUs, applies Offer pricing,
-  and returns priced listed SKUs. This satisfies the target without forcing two
-  provider calls.
-- Ownership direction:
-  the unified query is Offer-owned. Offer resolves the commercial context,
-  active window, SPU membership, terms, and pricing policy, then dispatches to
-  product-type-specific listing logic for dynamic availability and base quote
-  facts.
-- Boundary reminder:
-  the listing result is display/draft truth. Under the later quote-identity
-  model, create-order should still re-read Offer/SPU/SKU truth, but price
-  freshness is enforced by validating submitted quote identity rather than
-  silently re-quoting dynamic provider prices.
-
-## Model Direction: Quote Identity Instead Of Price-Diff Preflight
-
-- Human correction:
-  a better stale-price model is for Offer Listing to return quote/estimate
-  identity, not only display prices. Create-order should submit the selected
-  quote/estimate ids. If the quote is expired, backend should reject with a
-  quote-expired result; frontend refreshes listing and the user explicitly
-  clicks order again.
-- Reasoning:
-  this is cleaner than comparing frontend displayed price with submit-time
-  evaluation price. The quote identity becomes the authoritative draft-price
-  boundary, and expiration/change handling aligns with RideHailing provider
-  quote semantics.
-- Consequence:
-  the current submit-time price-change preflight dialog becomes unnecessary for
-  RideHailing. Price freshness is enforced by quote identity validity rather
-  than price comparison.
-- Open modeling detail:
-  if a provider returns a durable quote token/estimate id, the listing resolver
-  should preserve it and pass it through dispatch/create when required. If a
-  provider only returns raw estimate data, the app can mint a local quote id
-  bound to offer, route, departureAt, SKU/provider vehicle, provider snapshot,
-  price, and `expiresAt`.
-- Choice-set consequence:
-  create-order should carry product-type-independent quote identity for the
-  selected candidate set. The preferred payload keeps order item semantics as
-  `FIXED.quoteId` or `CHOICE_SET.candidateQuoteIds`; backend asks the Quote
-  domain to resolve Offer, SKU, route/departureAt, price, quote ownership, SKU
-  activity, expiry, and quote-set coherence before dispatch.
-- Remaining non-price validation:
-  PR/order lifecycle blockers may still be validated at create-order time, but
-  they do not require a separate price preflight endpoint. They can return
-  ordinary blocked/create-failed dialog states.
-
-## Review: Commerce-Native Quote Identity Corrections
-
-- Human correction:
-  quote id should be a higher-level commerce/order concept, not RideHailing
-  specific. Order and pricing should natively support quote id.
-- Human correction:
-  create-order should avoid repeating quote-owned data such as route,
-  departureAt, SKU ids, and Offer. These should resolve from submitted quote
-  identity.
-- Boundary note:
-  quote identity should own commercial/listing facts: Offer, SKU, product
-  context such as route/departureAt, provider quote snapshot, and price.
-  Customer/fulfillment facts such as participants, riders, and contact phone
-  still need explicit ownership and should not be casually hidden inside quote.
-- Human decision:
-  quote-expired should be an HTTP 409 problem detail with a stable code, not an
-  HTTP 200 `CreateOrderResult` branch.
-- Human decision:
-  quote snapshots should be persisted to the database.
-- Human decision:
-  the new listing route should be
-  `POST /api/commerce/offers/:offerId/listing`.
-- Artifact update:
-  revised `offer-listing-quote-identity-plan.md` so quote identity is
-  product-type-independent, quote snapshots are DB-backed, create-order is
-  quote-bound, expired quote uses HTTP 409, and the route shape is fixed.
-
-## Review: Quote Validity Ownership And Plan Topology
-
-- Human correction:
-  quote validity checks such as quote existence, not expired, issuing Offer
-  still active, referenced SKU still active, SKU membership, and listing-context
-  coherence should be owned and encapsulated by the Quote domain. Order should
-  not perform these checks one by one.
-- Naming finding:
-  `QUOTE_SET` is a poor command item kind because it names the freshness
-  mechanism instead of the order item semantics. The cleaner shape keeps
-  `FIXED` and `CHOICE_SET` as item kinds, and carries quote identity as
-  `quoteId` or `candidateQuoteIds`.
-- Naming finding:
-  `CommerceQuoteSnapshot` is too persistence-shaped for the domain concept.
-  The working domain name is `OfferQuote`; the database may persist snapshots,
-  but the application should treat quote as an object that can be resolved and
-  validated.
-- Naming finding:
-  `listingId` is ambiguous. `listingSessionId` better communicates that it
-  groups one Offer Listing response/context.
-- Boundary finding:
-  broad `unknown` quote snapshots are acceptable as database JSON envelopes,
-  but they must be decoded behind the Quote boundary before Order, Pricing, or
-  RideHailing lifecycle consumes them.
-- Topology finding:
-  Offer Listing mints quotes by joining Offer, Product Catalog,
-  product-specific resolver, Provider, and pricing. Create Order consumes
-  validated Quote-domain results and turns them into order items / lifecycle
-  rows. Bill reads resolved order/fulfillment facts and should not decide quote
-  validity.
-- Artifact update:
-  revised `offer-listing-quote-identity-plan.md` with a Quote Domain topology
-  diagram, updated sequence diagram, Quote validity ownership, command naming
-  correction, and naming/boundary review sections.
-
-## Review: Ordering Shell Boundary And Resolved Listing Decisions
-
-- Human correction:
-  `OrderingContent` should not call Create Order. That responsibility belongs
-  to the Ordering Page / shell submit flow. Product-specific Ordering Content
-  owns listing, selection, and price-summary output, then emits a quote-bound
-  draft to the shell.
-- Human decision:
-  when quote expires after create click, frontend refreshes listing and
-  preserves selected SKU ids when the refreshed listing still contains matching
-  SKUs. The user still needs a second explicit create click.
-- Human decision:
-  create-order quote-only payload should not include participants, riders, or
-  contact phone. If those facts remain necessary, they need Quote/listing
-  session ownership or another explicit pre-create owner rather than returning
-  to create-order input.
-- Human decision:
-  Rental should migrate to the unified Offer Listing endpoint in this slice,
-  using a thin fixed-item resolver if no dynamic Rental mask is needed.
-- Naming refinement:
-  fixed listed items also carry quote ids, so `OfferListedItem.kind: "QUOTE"`
-  is misleading. The plan now uses `FIXED` and `CHOICE_CANDIDATE`.
-- Artifact update:
-  revised `offer-listing-quote-identity-plan.md` sequence/topology to route
-  create-order through Ordering Page / shell, resolved the Rental and
-  quote-expiry selection questions, and tightened the quote-only create-order
-  payload boundary.
-
-## Implementation: Offer Listing And Quote Identity
-
-- Impact Handshake accepted with explicit `开始`.
-- Backend implementation:
-  - Offer Listing now owns quote issuance through
-    `POST /api/commerce/offers/:offerId/listing`.
-  - Quote identity is persisted in `commerce_quotes` and is not RideHailing
-    specific.
-  - Quote validity is centralized in a Quote-domain resolver. It validates
-    existence, expiry, active Offer/SKU/SPU, Offer membership, item kind, and
-    choice-set grouping before Order sees product facts.
-  - Create-order product item payloads are quote-only:
-    `FIXED.quoteId` or `CHOICE_SET.candidateQuoteIds`.
-  - Create-order derives participants, Rental registrants/contact, RideHailing
-    riders/contact, route, departureAt, price, Offer, and SKU facts from
-    validated quote/listing snapshots.
-  - Old backend submit-time evaluation and RideHailing options surfaces were
-    removed rather than kept as parallel legacy API semantics.
-- Frontend implementation:
-  - Ordering Content owns unified listing queries and emits quote-bound draft
-    output plus footer summary.
-  - Ordering Page / shell owns create-order mutation and no longer performs
-    price preflight/evaluate.
-  - Quote-expired create failure refreshes listing, preserves matching
-    selected SKU ids, and requires another explicit create click.
-  - Imported `departureAt` binding now opens a prompt that defaults to "now";
-    the drawer keeps a one-tap action to apply the imported time.
-- Human follow-up:
-  the imported departure prompt must show the concrete imported departure
-  date/time value so the user can decide whether to use it. The prompt now
-  displays the formatted imported timestamp in the dialog description.
-- Human follow-up:
-  the departure-time Drawer should also provide a one-tap way to switch back to
-  "现在出发". The Drawer now has a `现在出发` action whenever a concrete
-  departure time is active, clearing `departureAt` back to null.
-- Test/diagnostic finding:
-  `PuDialog` does not inherit arbitrary `data-testid` attributes because of
-  its rendered root/teleport shape. This slice removed those attributes from
-  affected dialogs and updated scenarios to assert via dialog role/text.
-- Verification result:
-  RideHailing and Rental system scenarios pass with the unified listing and
-  quote-only create-order path.
-- Non-blocking lint note:
-  UI naming audit still reports `RideHailingOrderingContent` because it treats
-  "Content" as weak. The name is intentionally retained because it was reviewed
-  as the correct shell concept alongside header and footer.
-
-## Review: Offer Listing And Quote Identity Test Gaps
-
-- Human question:
-  whether tests cover the case where provider estimate reports some
-  RideHailing vehicle types unavailable and the Ordering Page omits those SKUs.
-- Finding:
-  the production listing path already catches failed provider estimates and
-  omits those local SKU rows, but fake Caocao only supported price mutation and
-  could not express per-vehicle estimate unavailability.
-- Test-gap review:
-  the important missing branches were:
-  - partial provider unavailability should hide the unavailable vehicle type
-  - quote-expired refresh should preserve matching selected SKU ids but prune
-    selected SKUs that disappeared from the refreshed listing
-  - all provider-unavailable vehicle types should leave no vehicle cards and
-    disable create
-  - quote validity should reject inactive Offer/SKU behind the Quote boundary
-  - `CHOICE_SET` candidate quote ids must not mix different listing sessions
-- Implementation decision:
-  add fake Caocao estimate availability controls rather than reintroducing a
-  frontend `selectable=false` concept. This keeps unavailable RideHailing SKUs
-  absent from the listing result, matching the accepted model.
-- Verification result:
-  the new backend quote-domain scenario and the expanded RideHailing system
-  scenario both pass.
-
-## Review: Ordering Error Feedback Channel
-
-- Human correction:
-  `ordering-floating-notice-layer` should be removed because it permanently
-  overlays other UI information while Dialog already explains create-order
-  failure reasons.
-- Finding:
-  the floating notice component was only used by `OrderingFromPlacementPage` as
-  a duplicate display of `createOrderMutation.error`.
-- Decision:
-  keep create-order feedback single-channel through Dialog. Quote expired,
-  provider create failure, PR blocker, and generic create-order errors continue
-  to open an acknowledgement Dialog, without a persistent floating notice.
-
-## Review: RideHailing SKU List Loading State
-
-- Human correction:
-  RideHailing SKU list should show a loading skeleton with `PuSkeleton`.
-- Design decision:
-  the loading state belongs inside the SKU list region, not over the whole
-  Ordering Page. The map and bottom control row should remain stable while
-  quote options load.
-- Interaction decision:
-  show skeletons only during initial listing load when there are no visible
-  quote options. During background refetch, keep the existing cards visible to
-  avoid selection/list flicker.
-
-## Explore: Ordering Entry Decoupling
-
-- Human observation:
-  `OrderingFromPlacement` is a product of over-coupling Order and Placement.
-  Placement should resolve the context needed by Ordering, then hand off through
-  Pinia / Bindings-like intermediate state instead of leaving the Ordering route
-  named and wired as Placement-specific.
-- Finding:
-  `/order/new` already behaves as a generic Ordering route, but the route
-  component is still named `OrderingFromPlacementPage.vue`.
-- Finding:
-  `OrderingFromPlacementPage.vue` itself does not call Placement APIs. It reads
-  a serialized `OrderingEntryPayload` from raw `sessionStorage`.
-- Finding:
-  `PRPage.vue` is the real frontend coupling point. It receives
-  `placement-click` from `ButtonPlacement`, then checks existing PR orders,
-  resolves Placement ordering entry, writes the handoff payload to
-  `sessionStorage`, and navigates to `/order/new`.
-- Finding:
-  backend `resolvePlacementOrderingEntry` is already a Placement boundary
-  operation and already resolves binding rules, PR-derived route/time/participant
-  enrichment, and Offer detail.
-- Finding:
-  `OrderingSupportPage.vue` duplicates raw ordering-entry storage parsing.
-- Direction:
-  keep backend Placement ordering-entry as the binding-resolution authority, but
-  move frontend click orchestration into Button Placement or a composable called
-  only by Button Placement. Add a Commerce/Ordering-owned Pinia handoff store
-  and rename the page to generic `OrderingPage`.
-- Artifact:
-  added `ordering-entry-decoupling-plan.md` with topology, target model,
-  candidate Impact Handshake, invariants, and verification.
-- Human decision:
-  the full ButtonPlacement click flow belongs in ButtonPlacement or a dedicated
-  `usePlacement...` composable, not PR Page. This includes existing-order
-  lookup, Placement ordering-entry resolution, Ordering handoff write, and
-  `/order/new` navigation. PR Page may pass `matchingContext` and `prId`.
-- Implementation:
-  added a Commerce/Ordering Pinia handoff store for `OrderingEntryPayload`,
-  moved Button Placement click orchestration into
-  `usePlacementOrderingEntryFlow`, and renamed the route component to generic
-  `OrderingPage.vue` while keeping `/order/new` stable.
-- Boundary correction:
-  docs now phrase `prId` as not being a separate Placement matching parameter;
-  PR-derived facts may still be present inside `matchingContext`, and PR Page may
-  pass explicit `prId` to Button Placement for existing-order lookup.
-
-## Solidify: Durable Docs Promotion
-
-- Human request:
-  review all completed slices and update durable docs where task-packet truths
-  have become stable product or cross-unit technical truth.
-- Promotion decision:
-  do not promote component-level UI implementation details such as `PuCard`,
-  `PuFloatPanel`, or `PuSkeleton` into durable docs. Those remain source-level
-  implementation facts unless they become cross-unit contracts.
-- Promotion decision:
-  promote stable user-visible commerce behavior into PRD:
-  - PR-attached ordering enters through Button Placement and assembles on
-    `/order/new`
-  - Offer Listing is the user-visible quote surface
-  - expired quotes refresh listing, preserve matching selection when possible,
-    and require another explicit create click
-  - RideHailing users authorize a selected candidate set, see a candidate price
-    range, and unavailable provider vehicles are omitted
-  - RideHailing provider-create failure keeps the user on `/order/new` with a
-    failure dialog
-- Product TDD correction:
-  `system-state-and-authority.md` had stale wording that put RideHailing
-  provider binding on `ride_hailing_orders`. It now separates RideHailing
-  execution fields on `ride_hailing_orders` from provider binding in the Trade
-  order choice-set resolution snapshot.
-- Ecommerce contract refinement:
-  `/order/new` is now named as the PR-attached ordering assembly route in the
-  journey chain. `offerDetail` is clarified as an ordering projection, not a
-  user-facing Offer Detail page or dynamic quote authority.
-
-## Diagnose: RideHailing Order Detail Mock Lifecycle Control
-
-- Human observation:
-  after order creation, the fake RideHailing order moves too quickly from
-  dispatching to in-trip and pending-payment states, which makes manual Order
-  Detail state review difficult.
-- Finding:
-  fake Caocao has no timer-based lifecycle. The rapid movement comes from
-  `queryOrderDetailV2`: every provider detail read calls
-  `FakeCaocaoState.advanceOrderDetail`.
-- Finding:
-  backend `buildRideHailingDetailProjection` queries provider detail every time
-  Order Detail is loaded if provider binding exists.
-- Finding:
-  frontend `CommerceOrderDetailPage` polls RideHailing order detail every
-  1500 ms until a bill exists.
-- Consequence:
-  opening Order Detail causes the frontend polling loop to drive fake provider
-  state through `CREATED -> ACCEPTED -> IN_TRIP -> FINISHED`; the fake server
-  then posts callbacks and final settlement creates a bill.
-- Target direction:
-  make fake provider detail reads read-only by default and add explicit fake
-  admin/test-control routes to set or advance order phase and post callbacks.
-- Planning artifact:
-  added `order-detail-mock-control-plan.md`.
-- Human proposal:
-  add a dev-only "advance phase" button around the RideHailing Provider Instance
-  Admin editing surface.
-- Review:
-  this is feasible, but the Provider Instance card is provider-level while fake
-  orders are order-level. A no-argument button needs a target policy.
-- Recommended target policy:
-  advance the latest non-terminal fake Caocao order behind the selected provider
-  endpoint, and return/display the affected provider order id and phase.
-- Human correction:
-  the button was intended for the main "编辑 Provider Instance" card, not the
-  left selectable Provider Instance card.
-- Updated UI direction:
-  add a separate dev-only main-area card for fake lifecycle controls, rather
-  than nesting the action inside either the left selection card or the edit form
-  card.
-- Human correction:
-  Frontend Admin should call fake Caocao directly. Do not introduce a backend
-  admin proxy endpoint for advancing fake phases.
-- Boundary note:
-  with direct frontend calls, `import.meta.env.DEV` gating keeps the control out
-  of production UI, but it is not a server-side security boundary. This is
-  acceptable for fake-provider developer tooling as long as the target route is
-  the fake endpoint from the selected Provider Instance config.
-- Implementation:
-  fake Caocao provider detail reads are now read-only; explicit fake control
-  routes own phase set/advance and callback posting.
-- Implementation:
-  RideHailing Provider Instance Admin has a separate dev-only "开发调试" card
-  that directly calls the selected Provider Instance endpoint to advance the
-  latest non-terminal fake order.
-- Verification note:
-  fake server unit tests cover explicit phase advancement and latest
-  non-terminal targeting, while the RideHailing system scenario now asserts
-  repeated Order Detail polling does not auto-advance the fake provider order
-  beyond the create-time accepted callback.
-
-## Explore: RideHailing Order Detail Content Redesign
-
-- Human request:
-  update Order Detail Page and RideHailing Order Content. Order Detail Page
-  should use no-padding `PuPageScaffold`, and RideHailing Order Content should
-  follow the old uniapp RideHailing page reference because the current
-  implementation is structurally wrong.
-- Finding:
-  current Web code has no extracted `RideHailingOrderContent` component. The
-  RideHailing detail surface is inline inside `CommerceOrderDetailPage.vue`.
-- Finding:
-  current RideHailing detail uses a CSS fake map and generic fact cards. This
-  is the main mismatch with the RideHailing interaction model.
-- Reference interpretation:
-  the uniapp file is a RideHailing ordering page, not an order-detail page. The
-  transferable model is full-screen map plus bottom panel, not its exact
-  ordering-specific controls.
-- Implementation direction:
-  split RideHailing detail into a Commerce-domain
-  `RideHailingOrderContent.vue` component that owns the full-screen `RouteMap`
-  and bottom `PuFloatPanel`, while `CommerceOrderDetailPage.vue` keeps route
-  parsing, querying, polling, and Rental detail behavior.
-- API detail:
-  `PuPageScaffold` supports `padding="none"`; this should be used instead of a
-  page-local no-padding class/variable trick.
-- Implementation:
-  `CommerceOrderDetailPage.vue` now uses the actual no-padding scaffold API and
-  keeps Rental-specific document padding in its own body wrapper.
-- Implementation:
-  `RideHailingOrderContent.vue` is a Commerce-domain component that owns the
-  full-screen `RouteMap`, bottom `PuFloatPanel`, and RideHailing-specific
-  status/fact/payment display. The page still owns order querying, route
-  parsing, polling, and Rental mutations.
-- Review note:
-  the uniapp reference was treated as a topology reference, not a literal
-  content copy, because it is an ordering page while the active target is Order
-  Detail.
-
-## Explore: RideHailing Order Detail Map And Live Route
-
-- Human request:
-  continue on `RideHailingOrderContent`, focusing on map and route behavior
-  across RideHailing phases:
-  - dispatching should center the origin and show a searching ripple
-  - accepted / picking up should show provider route polyline and vehicle marker
-  - arrived at pickup should center the vehicle marker and hide polyline
-  - in trip should show provider remaining route and vehicle marker, without
-    already-driven route
-  - finished / cancelled should show the persisted planned driving route
-- Finding:
-  current web `RideHailingOrderContent` always passes
-  `ride.route.drivingPlan?.polyline` to `RouteMap` as planned route geometry.
-- Finding:
-  lower-level `SharedMap` already accepts arbitrary `markers`, `polylines`, and
-  `activeGeometry`, and the Tencent adapter already has a `routeDriver` marker
-  style backed by `/route-map/map-marker-driver.png`.
-- Finding:
-  `RouteMap` is a generic route-domain wrapper and currently does not accept
-  RideHailing live markers/polylines as extra geometry.
-- Finding:
-  backend Order Detail projection exposes `executionPhase`, driver/vehicle
-  text, and loose provider live detail, but not provider route polyline,
-  vehicle coordinates, or vehicle heading.
-- Finding:
-  current local `RideHailingExecutionPhase` has no `ARRIVED_AT_PICKUP`, so it
-  cannot drive the requested marker-only arrived state without a lifecycle
-  model change.
-- Finding:
-  official Caocao docs expose separate driver location and driver pickup /
-  dropoff route APIs. This supports promoting live geometry into typed provider
-  port methods instead of inferring route geometry from raw order detail.
-- Reference note:
-  uniapp detail uses dynamic navigation only for on-the-way states and treats
-  server navigation polyline as the current / remaining route; already-driven
-  history is a separate grey polyline.
-- Plan:
-  added `order-detail-ride-hailing-map-plan.md`.
-
-## Execute: RideHailing Order Detail Map Backend Segment
-
-- Segment split:
-  human approved splitting the slice into backend first, frontend second, and
-  then manual validation.
-- Backend boundary:
-  this segment intentionally avoids frontend map rendering changes. It only
-  prepares the typed provider/live-geometry data needed by the future frontend
-  segment.
-- Provider-port decision:
-  `queryOrderDetail` should not leak raw provider response shape across domain
-  boundaries. The adapter now owns raw Caocao parsing, and Trade consumes typed
-  provider detail/location/route snapshots.
-- Callback mapping decision:
-  official Caocao lifecycle events are now mapped explicitly. Non-lifecycle
-  provider events preserve the current local execution phase instead of being
-  guessed into a lifecycle state.
-- Official-event correction:
-  the backend callback scenario now uses event `6` for final settlement /
-  service end. Event `25` is treated as a non-lifecycle provider event and no
-  longer advances execution phase by itself.
+This file is the current working discussion surface. Keep it short enough to
+reload at the start of a slice.
+
+Archived full history:
+
+- `archive/discussion-log-ordering-through-order-detail-map.md`
+
+## Current Segment: RideHailing Order Detail PuFloatPanel Content
+
+- Result:
+  `RideHailingOrderContent` now replaces the raw JSON diagnostic panel with the
+  reviewed content model.
+- Status Hero:
+  panel header contains status title and status description on the left.
+  Cancellation, when available, sits immediately to the left of the more
+  operation button on the right. This header should stay a single row on narrow
+  screens; the actions side must not shrink, and the status copy side absorbs
+  tight width.
+- Dispatching-only SKU list:
+  while dispatching, render the placed RideHailing SKU candidate list
+  immediately after Status Hero. Reuse the `RideHailingSkuCard` visual shape in
+  readonly mode: non-selectable and no checkbox.
 - Projection decision:
-  `RideHailingOrderDetailProjection.live` exposes typed and sanitized live
-  fields. Provider raw snapshots remain internal to provider/bill audit data
-  and are not returned to the frontend detail payload.
-- Resilience decision:
-  provider order detail remains required when a provider binding exists, but
-  live geometry queries are optional. A location/route endpoint failure should
-  degrade the map, not fail the entire Order Detail page.
-- Fake-provider decision:
-  fake Caocao now stores order origin/destination from `orderCarV2` params so
-  driver position and provider route responses can be deterministic and tied to
-  the created order.
-
-## Execute: RideHailing Order Detail Map Frontend Segment
-
-- Boundary decision:
-  `RouteMap` gained generic extra geometry inputs only. RideHailing phase
-  semantics remain in Commerce RideHailing Order Detail code.
-- View-model decision:
-  the phase-to-map behavior is implemented as a pure helper next to
-  `RideHailingOrderContent` so the frontend can test lifecycle geometry
-  without relying on Tencent map canvas internals.
-- Dispatching decision:
-  `DISPATCHING` centers the route origin marker through `activeGeometry:
-  route-point-0`. The temporary CSS absolute ripple was removed because it was
-  not truly bound to the route origin marker; a correct marker-bound ripple
-  should wait for shared map overlay or marker-decoration support.
-- Accepted / in-trip decision:
-  provider route polylines are treated as current remaining navigation routes.
-  The frontend does not trim them unless future provider evidence shows Caocao
-  returns historical full-trip trails.
-- Fallback decision:
-  accepted without live geometry falls back to planned route; arrived without a
-  driver coordinate centers the origin; in-trip without provider route shows
-  the driver marker with a muted planned-route fallback.
-- Effective-phase correction:
-  map rendering must use local persisted `ride.executionPhase` only. Provider
-  live phase/status may be useful raw data, but it must not advance map state
-  ahead of the order lifecycle. This prevents a persisted `DISPATCHING` order
-  from showing accepted-provider geometry, losing the origin marker focus, and
-  hiding the dispatch ripple.
-- Raw-panel decision:
-  the `PuFloatPanel` content is temporarily reduced to raw JSON for manual
-  diagnosis of order state, RideHailing projection, provider live data, bill,
-  payment, and computed map view-model.
-- Scenario decision:
-  the system scenario asserts stable semantic `data-map-mode` values while
-  manually posting fake Caocao phase callbacks. It does not assert canvas pixels
-  or SDK layer internals.
-
-## Diagnose: Single Marker Fit Padding Under PuFloatPanel
-
-- Observation:
-  in `DISPATCHING`, the route origin marker looked too close to the bottom of
-  the visible map area after accounting for the absolute `PuFloatPanel`
-  overlay.
-- Root cause:
-  RideHailing correctly passed bottom-heavy `fitPadding` into `RouteMap`, but
-  the Tencent provider used `easeTo(center)` for a single active coordinate.
-  That single-point branch ignored padding entirely. Padding was only honored
-  by the multi-coordinate `fitBounds` branch.
-- Secondary note:
-  panel stop height is still an estimate of the visual overlay height. That may
-  explain small future polyline-frame deviations, but it was not the primary
-  cause of the origin marker being centered against the full map container.
-- Decision:
-  fix the shared provider's single-coordinate fit path by using a tiny
-  `fitBounds` area with the same padding and single-point max zoom cap. Keep
-  RideHailing-specific offset logic out of the map caller.
+  Order Detail now exposes minimal `candidateVehicles` facts derived from the
+  persisted choice-set item. The frontend does not inspect raw order item
+  snapshots to render readonly candidate cards.
+- Ride facts:
+  after a larger spacing, always render exactly two lifecycle-independent
+  sections:
+  - `路线`: section title plus PR Facts Card style route item list
+  - `乘车人`: section title plus RideHailing Ordering rider drawer style list
+    items
+- Explicit exclusions:
+  no provider facts, bill/payment facts, driver facts, route summaries, extra
+  eyebrows, extra cards, or additional content in this segment.
+- Interaction limitation:
+  cancel and more controls are currently disabled visual controls because
+  RideHailing cancellation/more-operation use cases are not implemented in this
+  slice.
+
+## Pinned Decisions
+
+- Production code mutations still require Impact Handshake and explicit
+  `开始`.
+- `RideHailingOrderContent` owns RideHailing Order Detail panel content and map
+  presentation; `CommerceOrderDetailPage` owns route/query/page-level shell.
+- Map mode is driven by local persisted `ride.executionPhase`, not provider
+  live phase/status.
+- Raw JSON diagnostic UI has been removed from the panel content.
+- `RideHailingSkuCard` may gain a readonly/no-checkbox shape, but its Ordering
+  Page default must stay selectable with checkbox.
+
+## Open Checks
+
+- Manual browser review of dispatching and post-dispatch panel layout.
+- Decide in a separate slice whether RideHailing cancellation should be
+  implemented end-to-end.
diff --git a/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts b/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
index ee03ee64b..ae8f1ebbc 100644
--- a/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
+++ b/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
@@ -557,21 +557,39 @@ async function assertRideHailingOrderDetail(page: Page): Promise<void> {
     state: "visible",
     timeout: 10_000,
   });
-  const rawData = page.getByTestId("order-detail.ride-hailing.raw-data");
   await assertLocatorTextIncludes({
-    actual: rawData.textContent(),
-    expected: "系统曹操快车",
-    label: "RideHailing raw selected vehicle",
+    actual: page.getByTestId("order-detail.ride-hailing.status-title").textContent(),
+    expected: "派单中",
+    label: "RideHailing status hero title",
+  });
+  const vehicleCards = page.getByTestId("order-detail.ride-hailing.vehicle-card");
+  await vehicleCards.first().waitFor({
+    state: "visible",
+    timeout: 10_000,
+  });
+  assert.equal(await vehicleCards.count(), 2);
+  await vehicleCards.filter({ hasText: "系统曹操快车" }).waitFor({
+    state: "visible",
+    timeout: 10_000,
+  });
+  await vehicleCards.filter({ hasText: "系统曹操专车" }).waitFor({
+    state: "visible",
+    timeout: 10_000,
   });
   await assertLocatorTextIncludes({
-    actual: rawData.textContent(),
+    actual: page.getByTestId("order-detail.ride-hailing.route-section").textContent(),
     expected: "杭州东站",
-    label: "RideHailing raw route summary origin",
+    label: "RideHailing route section origin",
   });
   await assertLocatorTextIncludes({
-    actual: rawData.textContent(),
+    actual: page.getByTestId("order-detail.ride-hailing.route-section").textContent(),
     expected: "灵隐寺",
-    label: "RideHailing raw route summary destination",
+    label: "RideHailing route section destination",
+  });
+  await assertLocatorTextIncludes({
+    actual: page.getByTestId("order-detail.ride-hailing.riders-section").textContent(),
+    expected: "scenario-system-ride-hailing-creator",
+    label: "RideHailing riders section",
   });
 }
 
@@ -647,9 +665,9 @@ scenario("commerce_ride_hailing_ordering_reaches_order_detail", async (ctx) => {
     assert.equal(finishedOrder.phase, "FINISHED");
     await waitForRideHailingMapMode(page, "PLANNED_ROUTE");
     await assertLocatorTextIncludes({
-      actual: page.getByTestId("order-detail.ride-hailing.raw-data").textContent(),
-      expected: '"bill"',
-      label: "RideHailing raw data includes bill after finished",
+      actual: page.getByTestId("order-detail.ride-hailing.status-title").textContent(),
+      expected: "行程已结束",
+      label: "RideHailing finished status hero",
     });
 
     orderPath = new URL(page.url()).pathname;

From d9ee5eb3e0ecf00cfd57447033f2d8f714e71ca8 Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Wed, 24 Jun 2026 11:32:15 +0800
Subject: [PATCH 42/94] feat(ride-hailing): improve live order detail mocks

- add fake Caocao route contract validation, Tencent planned-route support, movement simulation, and phase controls
- render driver card/live geometry with heading-aware Tencent vehicle marker smoothing
- add active order-detail polling and focused backend/frontend/fake-provider coverage
---
 .../domains/ride-hailing/model/provider.ts    |   3 +
 .../services/caocao-provider.test.ts          |  44 +-
 .../ride-hailing/services/caocao-provider.ts  |  16 +-
 .../use-cases/ride-hailing-ordering-flow.ts   |  15 +-
 .../commerce/queries/useCommerce.test.ts      |  32 ++
 .../domains/commerce/queries/useCommerce.ts   |  53 +-
 .../order-detail/RideHailingOrderContent.vue  | 161 +++++-
 .../ride-hailing-order-map-view-model.test.ts |   6 +
 .../ride-hailing-order-map-view-model.ts      |   2 +
 .../src/pages/AdminRideHailingPage.vue        | 162 ++++--
 .../map/tencent/tencent-lbs-provider.test.ts  |  83 +++
 .../map/tencent/tencent-lbs-provider.ts       | 253 ++++++---
 apps/frontend/src/shared/map/tencent/types.ts |  52 +-
 apps/frontend/src/shared/map/types.ts         |   7 +-
 .../bin/fake-caocao-server.ts                 |  34 ++
 packages/fake-caocao-server/src/index.ts      |   7 +
 .../fake-caocao-server/src/movement.test.ts   |  77 +++
 packages/fake-caocao-server/src/movement.ts   | 123 +++++
 .../src/route-planning.test.ts                |  99 ++++
 .../fake-caocao-server/src/route-planning.ts  | 170 ++++++
 packages/fake-caocao-server/src/routes.ts     | 518 ++++++++++++++++--
 .../fake-caocao-server/src/server.test.ts     | 413 +++++++++++++-
 packages/fake-caocao-server/src/server.ts     |   3 +
 packages/fake-caocao-server/src/state.test.ts |  44 ++
 packages/fake-caocao-server/src/state.ts      |  72 +++
 .../caocao-driver-movement-mock-research.md   | 470 ++++++++++++++++
 tasks/ride-hailing-ui-fixes/change-log.md     | 118 ++++
 tasks/ride-hailing-ui-fixes/control.md        |  58 +-
 tasks/ride-hailing-ui-fixes/discussion-log.md | 140 ++++-
 .../ride-hailing-ordering.scenario.test.ts    |  20 +
 30 files changed, 3035 insertions(+), 220 deletions(-)
 create mode 100644 apps/frontend/src/domains/commerce/queries/useCommerce.test.ts
 create mode 100644 apps/frontend/src/shared/map/tencent/tencent-lbs-provider.test.ts
 create mode 100644 packages/fake-caocao-server/src/movement.test.ts
 create mode 100644 packages/fake-caocao-server/src/movement.ts
 create mode 100644 packages/fake-caocao-server/src/route-planning.test.ts
 create mode 100644 packages/fake-caocao-server/src/route-planning.ts
 create mode 100644 tasks/ride-hailing-ui-fixes/caocao-driver-movement-mock-research.md

diff --git a/apps/backend/src/domains/ride-hailing/model/provider.ts b/apps/backend/src/domains/ride-hailing/model/provider.ts
index 52218f7d2..fde843694 100644
--- a/apps/backend/src/domains/ride-hailing/model/provider.ts
+++ b/apps/backend/src/domains/ride-hailing/model/provider.ts
@@ -109,6 +109,8 @@ export type RideHailingProviderNavigationRouteKind =
   | "RELAY_PREVIOUS_DROPOFF"
   | "UNKNOWN";
 
+export type RideHailingProviderNavigationRouteQueryKind = "PICKUP" | "DROPOFF";
+
 export type RideHailingProviderNavigationRoute = {
   routeKind: RideHailingProviderNavigationRouteKind;
   polyline: RideHailingProviderCoordinate[];
@@ -169,6 +171,7 @@ export type RideHailingProviderPort = {
   }): Promise<RideHailingProviderVehicleLocation | null>;
   queryDriverRoute(input: {
     providerOrderId: string;
+    routeKind: RideHailingProviderNavigationRouteQueryKind;
   }): Promise<RideHailingProviderNavigationRoute | null>;
   cancelRide(input: RideHailingProviderCancelInput): Promise<{
     providerOrderId: string;
diff --git a/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts b/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
index 853959e1e..7aa687179 100644
--- a/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
+++ b/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
@@ -219,7 +219,8 @@ describe("Caocao callback verification", () => {
 describe("Caocao live order projection", () => {
   it("normalizes order detail, driver location, and navigation route responses", async () => {
     const requestPaths: string[] = [];
-    const fetchImpl: typeof fetch = async (input) => {
+    const routeRequestBodies: string[] = [];
+    const fetchImpl: typeof fetch = async (input, init) => {
       const requestUrl =
         typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
       const url = new URL(requestUrl);
@@ -270,6 +271,7 @@ describe("Caocao live order projection", () => {
       }
 
       if (url.pathname.endsWith("/common/queryDriverPolylineV2")) {
+        routeRequestBodies.push(init?.body?.toString() ?? "");
         return new Response(
           JSON.stringify({
             code: 200,
@@ -289,7 +291,10 @@ describe("Caocao live order projection", () => {
                 {
                   links: [
                     {
-                      coords: "30.270000,120.160000;30.268800,120.160800",
+                      coords: "30.270000,120.160000;30.269700,120.160600;30.269100,120.160900",
+                    },
+                    {
+                      coords: "30.268900,120.160850;30.268800,120.160800",
                     },
                   ],
                 },
@@ -310,7 +315,10 @@ describe("Caocao live order projection", () => {
 
     const detail = await adapter.queryOrderDetail({ providerOrderId: "CC123456" });
     const location = await adapter.queryDriverLocation({ providerOrderId: "CC123456" });
-    const route = await adapter.queryDriverRoute({ providerOrderId: "CC123456" });
+    const route = await adapter.queryDriverRoute({
+      providerOrderId: "CC123456",
+      routeKind: "PICKUP",
+    });
 
     expect(detail.phase).toBe("12");
     expect(detail.statusLabel).toBe("司机已到达");
@@ -323,12 +331,42 @@ describe("Caocao live order projection", () => {
     expect(route?.trafficLightCount).toBe(2);
     expect(route?.polyline).toEqual([
       { latitude: 30.27, longitude: 120.16 },
+      { latitude: 30.2697, longitude: 120.1606 },
+      { latitude: 30.2691, longitude: 120.1609 },
+      { latitude: 30.2689, longitude: 120.16085 },
       { latitude: 30.2688, longitude: 120.1608 },
     ]);
+    expect(routeRequestBodies).toHaveLength(1);
+    expect(new URLSearchParams(routeRequestBodies[0]).get("navigation_polyline_type")).toBe("1");
     expect(requestPaths).toEqual([
       "/v2/common/queryOrderDetailV2",
       "/v2/common/queryDriverLocationByOrderId",
       "/v2/common/queryDriverPolylineV2",
     ]);
   });
+
+  it("labels realtime accepted status as picking up", async () => {
+    const fetchImpl: typeof fetch = async () =>
+      new Response(
+        JSON.stringify({
+          code: 200,
+          data: {
+            basicOrderVO: {
+              status: "9",
+            },
+          },
+          success: true,
+        }),
+        { status: 200 },
+      );
+    const adapter = new CaocaoProviderAdapter({
+      providerInstance: caocaoProviderInstance(),
+      fetchImpl,
+    });
+
+    const detail = await adapter.queryOrderDetail({ providerOrderId: "CC123456" });
+
+    expect(detail.phase).toBe("9");
+    expect(detail.statusLabel).toBe("接客中");
+  });
 });
diff --git a/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts b/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
index 19d683aa1..8c7a44b5f 100644
--- a/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
+++ b/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
@@ -1,6 +1,6 @@
 import { createHash, timingSafeEqual } from "node:crypto";
-import { throwHttpProblem } from "../../../lib/problem-details";
 import type { RideHailingProviderInstance } from "../../../entities/ride-hailing-provider";
+import { throwHttpProblem } from "../../../lib/problem-details";
 import type {
   CaocaoOrderStatusCallback,
   CaocaoOrderStatusCallbackEvent,
@@ -13,10 +13,11 @@ import type {
   RideHailingProviderEstimateInput,
   RideHailingProviderNavigationRoute,
   RideHailingProviderNavigationRouteKind,
+  RideHailingProviderNavigationRouteQueryKind,
   RideHailingProviderOrderDetail,
-  RideHailingProviderVehicleQuote,
-  RideHailingProviderVehicleLocation,
   RideHailingProviderPort,
+  RideHailingProviderVehicleLocation,
+  RideHailingProviderVehicleQuote,
 } from "../model";
 
 type CaocaoParamValue = string | number | boolean | null | undefined;
@@ -102,7 +103,8 @@ const buildCaocaoStatusLabel = (phase: string): string => {
   if (phase === "FINISHED" || ["5", "6", "7", "8"].includes(phase)) return "待支付";
   if (phase === "IN_TRIP" || phase === "3") return "行程中";
   if (phase === "ARRIVED_AT_PICKUP" || phase === "12") return "司机已到达";
-  if (phase === "ACCEPTED" || ["2", "9"].includes(phase)) return "已接单";
+  if (phase === "ACCEPTED" || phase === "9") return "接客中";
+  if (phase === "2") return "已派单";
   if (phase === "CANCELLED" || ["4", "10", "13", "14", "20", "21", "26", "27"].includes(phase)) {
     return "已取消";
   }
@@ -178,6 +180,10 @@ const mapCaocaoNavigationRouteKind = (
   return "UNKNOWN";
 };
 
+const toCaocaoNavigationPolylineType = (
+  routeKind: RideHailingProviderNavigationRouteQueryKind,
+): number => (routeKind === "PICKUP" ? 1 : 3);
+
 const parseCaocaoOrderDetail = (data: Record<string, unknown>): RideHailingProviderOrderDetail => {
   const basicOrder = readOptionalRecordField(data, ["basicOrderVO", "basicOrderVo", "basic_order"]);
   const driverRaw = readOptionalRecordField(data, [
@@ -527,11 +533,13 @@ export class CaocaoProviderAdapter implements RideHailingProviderPort {
 
   async queryDriverRoute(input: {
     providerOrderId: string;
+    routeKind: RideHailingProviderNavigationRouteQueryKind;
   }): Promise<RideHailingProviderNavigationRoute | null> {
     const data = await this.request<Record<string, unknown>>(
       "POST",
       "/common/queryDriverPolylineV2",
       {
+        navigation_polyline_type: toCaocaoNavigationPolylineType(input.routeKind),
         order_id: input.providerOrderId,
       },
     );
diff --git a/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts b/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts
index ea6c88383..1be342b0c 100644
--- a/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts
+++ b/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts
@@ -6,6 +6,7 @@ import { RideHailingProviderInstanceRepository } from "../../../repositories/Rid
 import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository";
 import type {
   RideHailingProviderNavigationRoute,
+  RideHailingProviderNavigationRouteQueryKind,
   RideHailingProviderOrderDetail,
   RideHailingProviderVehicleLocation,
 } from "../../ride-hailing";
@@ -121,6 +122,14 @@ const projectProviderNavigationRoute = (
 const shouldQueryProviderLiveGeometry = (phase: RideHailingExecutionPhase): boolean =>
   phase === "ACCEPTED" || phase === "ARRIVED_AT_PICKUP" || phase === "IN_TRIP";
 
+const resolveProviderNavigationRouteQueryKind = (
+  phase: RideHailingExecutionPhase,
+): RideHailingProviderNavigationRouteQueryKind | null => {
+  if (phase === "ACCEPTED" || phase === "ARRIVED_AT_PICKUP") return "PICKUP";
+  if (phase === "IN_TRIP") return "DROPOFF";
+  return null;
+};
+
 const queryOptionalProviderLive = async <T>(operation: () => Promise<T>): Promise<T | null> => {
   try {
     return await operation();
@@ -171,6 +180,9 @@ export async function buildRideHailingDetailProjection(input: {
         providerOrderId: providerBinding.providerOrderId,
       });
       const shouldQueryLiveGeometry = shouldQueryProviderLiveGeometry(rideOrder.executionPhase);
+      const navigationRouteQueryKind = resolveProviderNavigationRouteQueryKind(
+        rideOrder.executionPhase,
+      );
       const vehicleLocation = shouldQueryLiveGeometry
         ? await queryOptionalProviderLive(() =>
             port.queryDriverLocation({
@@ -178,10 +190,11 @@ export async function buildRideHailingDetailProjection(input: {
             }),
           )
         : null;
-      const navigationRoute = shouldQueryLiveGeometry
+      const navigationRoute = navigationRouteQueryKind
         ? await queryOptionalProviderLive(() =>
             port.queryDriverRoute({
               providerOrderId: providerBinding.providerOrderId,
+              routeKind: navigationRouteQueryKind,
             }),
           )
         : null;
diff --git a/apps/frontend/src/domains/commerce/queries/useCommerce.test.ts b/apps/frontend/src/domains/commerce/queries/useCommerce.test.ts
new file mode 100644
index 000000000..e70e61a5d
--- /dev/null
+++ b/apps/frontend/src/domains/commerce/queries/useCommerce.test.ts
@@ -0,0 +1,32 @@
+import { describe, expect, test } from "vitest";
+import { shouldPollCommerceOrderDetail } from "./useCommerce";
+
+describe("commerce order detail polling", () => {
+  test("polls active ride-hailing phases", () => {
+    expect(
+      shouldPollCommerceOrderDetail({
+        rideHailing: { executionPhase: "ACCEPTED" },
+      }),
+    ).toBe(true);
+    expect(
+      shouldPollCommerceOrderDetail({
+        rideHailing: { executionPhase: "IN_TRIP" },
+      }),
+    ).toBe(true);
+  });
+
+  test("does not poll terminal or non ride-hailing order details", () => {
+    expect(
+      shouldPollCommerceOrderDetail({
+        rideHailing: { executionPhase: "FINISHED" },
+      }),
+    ).toBe(false);
+    expect(
+      shouldPollCommerceOrderDetail({
+        rideHailing: { executionPhase: "CANCELLED" },
+      }),
+    ).toBe(false);
+    expect(shouldPollCommerceOrderDetail({ rideHailing: null })).toBe(false);
+    expect(shouldPollCommerceOrderDetail(null)).toBe(false);
+  });
+});
diff --git a/apps/frontend/src/domains/commerce/queries/useCommerce.ts b/apps/frontend/src/domains/commerce/queries/useCommerce.ts
index d9f1c4ae9..e0cfc73df 100644
--- a/apps/frontend/src/domains/commerce/queries/useCommerce.ts
+++ b/apps/frontend/src/domains/commerce/queries/useCommerce.ts
@@ -1,6 +1,6 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
 import type { InferResponseType } from "hono";
-import { computed, type Ref } from "vue";
+import { computed, onScopeDispose, type Ref, watch } from "vue";
 import { client } from "@/lib/rpc";
 import { buildApiError, readApiErrorPayload, resolveApiErrorMessage } from "@/shared/api/error";
 import { queryKeys } from "@/shared/api/query-keys";
@@ -38,6 +38,29 @@ export type PaymentCheckoutResponse = InferResponseType<
   CommerceApi["bill-lines"][":billLineId"]["checkout"]["$get"]
 >;
 
+const ACTIVE_RIDE_HAILING_DETAIL_POLLING_MS = 2_000;
+const activeRideHailingDetailPollingPhases = new Set([
+  "INITIATING",
+  "DISPATCHING",
+  "ACCEPTED",
+  "ARRIVED_AT_PICKUP",
+  "IN_TRIP",
+]);
+
+export const shouldPollCommerceOrderDetail = (
+  detail:
+    | {
+        rideHailing?: {
+          executionPhase?: string | null;
+        } | null;
+      }
+    | null
+    | undefined,
+): boolean => {
+  const phase = detail?.rideHailing?.executionPhase ?? null;
+  return phase !== null && activeRideHailingDetailPollingPhases.has(phase);
+};
+
 const readJsonOrThrow = async <T>(response: Response, fallback: string): Promise<T> => {
   if (!response.ok) {
     const payload = await readApiErrorPayload(response);
@@ -187,8 +210,8 @@ export const useCreateOrder = () => {
   });
 };
 
-export const useCommerceOrderDetail = (orderId: Ref<string | null>) =>
-  useQuery<CommerceOrderDetailResponse>({
+export const useCommerceOrderDetail = (orderId: Ref<string | null>) => {
+  const query = useQuery<CommerceOrderDetailResponse>({
     queryKey: computed(() => queryKeys.commerce.orderDetail(orderId.value)),
     queryFn: async () => {
       if (orderId.value === null) {
@@ -212,6 +235,30 @@ export const useCommerceOrderDetail = (orderId: Ref<string | null>) =>
     enabled: () => orderId.value !== null,
   });
 
+  let pollingIntervalId: ReturnType<typeof setInterval> | null = null;
+  const stopPolling = () => {
+    if (pollingIntervalId === null) return;
+    clearInterval(pollingIntervalId);
+    pollingIntervalId = null;
+  };
+
+  watch(
+    () => orderId.value !== null && shouldPollCommerceOrderDetail(query.data.value),
+    (shouldPoll) => {
+      stopPolling();
+      if (!shouldPoll) return;
+      pollingIntervalId = setInterval(() => {
+        void query.refetch();
+      }, ACTIVE_RIDE_HAILING_DETAIL_POLLING_MS);
+    },
+    { immediate: true },
+  );
+
+  onScopeDispose(stopPolling);
+
+  return query;
+};
+
 export const useBillDetail = (billId: Ref<string | null>) =>
   useQuery<BillDetailResponse>({
     queryKey: computed(() => queryKeys.commerce.billDetail(billId.value)),
diff --git a/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue b/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue
index 12b637d61..0dafdd7df 100644
--- a/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue
+++ b/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue
@@ -75,6 +75,61 @@
           </div>
         </header>
 
+        <PuCard
+          v-if="showsDriverCard"
+          as="section"
+          class="ride-hailing-order-content__driver-card"
+          variant="soft"
+          tone="neutral"
+          padding="sm"
+          gap="sm"
+          data-testid="order-detail.ride-hailing.driver-card"
+        >
+          <div class="ride-hailing-order-content__driver-layout">
+            <div class="ride-hailing-order-content__driver-profile">
+              <PuImg
+                src=""
+                :alt="driverName"
+                :name="driverName"
+                :fallback-initial="driverAvatarInitial"
+                size="medium"
+                shape="circle"
+                :show-loading="false"
+                bordered
+              />
+              <strong data-testid="order-detail.ride-hailing.driver-name">
+                {{ driverName }}
+              </strong>
+            </div>
+
+            <div class="ride-hailing-order-content__vehicle-copy">
+              <strong data-testid="order-detail.ride-hailing.vehicle-plate">
+                {{ vehiclePlate }}
+              </strong>
+              <span data-testid="order-detail.ride-hailing.vehicle-description">
+                {{ vehicleDescription }}
+              </span>
+            </div>
+
+            <PuButton
+              type="button"
+              size="sm"
+              shape="rect"
+              tone="primary"
+              variant="outline"
+              :disabled="!driverCallHref"
+              :action="driverCallHref ? { href: driverCallHref } : undefined"
+              aria-label="联系司机"
+              title="联系司机"
+              data-testid="order-detail.ride-hailing.driver-call"
+            >
+              <template #leading>
+                <span class="i-mdi-phone" aria-hidden="true"></span>
+              </template>
+            </PuButton>
+          </div>
+        </PuCard>
+
         <section
           v-if="showsDispatchingCandidateVehicles"
           class="ride-hailing-order-content__candidate-section"
@@ -132,7 +187,13 @@
 </template>
 
 <script setup lang="ts">
-import { PuButton, PuFloatPanel, type PuFloatPanelStop } from "@partner-up-dev/design-web";
+import {
+  PuButton,
+  PuCard,
+  PuFloatPanel,
+  type PuFloatPanelStop,
+  PuImg,
+} from "@partner-up-dev/design-web";
 import { computed, onMounted, onUnmounted, ref } from "vue";
 import type { CommerceOrderDetailResponse } from "@/domains/commerce/queries/useCommerce";
 import RideHailingSkuCard from "@/domains/commerce/ui/ordering/RideHailingSkuCard.vue";
@@ -225,8 +286,8 @@ const statusCopyByPhase: Record<
   }
 > = {
   ACCEPTED: {
-    title: "已接单",
-    description: "已接单，等待司机出发接客",
+    title: "接客中",
+    description: "司机正在前往上车点，请提前到达约定地点",
   },
   ARRIVED_AT_PICKUP: {
     title: "已到达上车点",
@@ -262,6 +323,38 @@ const statusHero = computed(() => statusCopyByPhase[props.ride.executionPhase]);
 
 const showsCancelAction = computed(() => props.ride.executionPhase === "DISPATCHING");
 
+const firstPresentString = (values: readonly (string | null | undefined)[]): string | null => {
+  for (const value of values) {
+    const normalized = value?.trim() ?? "";
+    if (normalized.length > 0) return normalized;
+  }
+  return null;
+};
+
+const showsDriverCard = computed(() => Boolean(props.ride.driver || props.ride.vehicle));
+
+const driverName = computed(() => firstPresentString([props.ride.driver?.driverName]) ?? "司机");
+
+const driverAvatarInitial = computed(() => driverName.value.trim().slice(0, 1) || "司");
+
+const driverCallHref = computed(() => {
+  const phone = firstPresentString([props.ride.driver?.driverPhone]);
+  if (!phone) return null;
+  return `tel:${phone.replace(/\s+/g, "")}`;
+});
+
+const vehiclePlate = computed(
+  () => firstPresentString([props.ride.vehicle?.plate]) ?? "车牌待确认",
+);
+
+const vehicleDescription = computed(() => {
+  const description = [props.ride.vehicle?.brand, props.ride.vehicle?.color]
+    .map((item) => item?.trim() ?? "")
+    .filter((item) => item.length > 0)
+    .join(" · ");
+  return description || "车辆信息待确认";
+});
+
 const showsDispatchingCandidateVehicles = computed(
   () => props.ride.executionPhase === "DISPATCHING" && props.ride.candidateVehicles.length > 0,
 );
@@ -376,6 +469,68 @@ const formatFen = (amountFen: number | null | undefined): string => {
   }
 }
 
+.ride-hailing-order-content__driver-card {
+  margin-top: var(--sys-spacing-medium);
+  border-radius: var(--sys-radius-small);
+}
+
+.ride-hailing-order-content__driver-layout {
+  display: grid;
+  min-width: 0;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--sys-spacing-medium);
+}
+
+.ride-hailing-order-content__driver-profile {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--sys-spacing-xsmall);
+
+  strong {
+    @include mx.pu-font(caption);
+    max-width: 4.5rem;
+    overflow: hidden;
+    color: var(--sys-color-on-surface);
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.ride-hailing-order-content__vehicle-copy {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: calc(var(--sys-spacing-xsmall) / 2);
+
+  strong,
+  span {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  strong {
+    @include mx.pu-font(title);
+    color: var(--sys-color-on-surface);
+  }
+
+  span {
+    @include mx.pu-font(caption);
+    color: var(--sys-color-on-surface-variant);
+  }
+}
+
+.ride-hailing-order-content__driver-layout :deep(.pu-button) {
+  flex: 0 0 auto;
+
+  span {
+    @include mx.pu-icon(small);
+  }
+}
+
 .ride-hailing-order-content__candidate-section {
   display: flex;
   min-width: 0;
diff --git a/apps/frontend/src/domains/commerce/ui/order-detail/ride-hailing-order-map-view-model.test.ts b/apps/frontend/src/domains/commerce/ui/order-detail/ride-hailing-order-map-view-model.test.ts
index a1c216929..f7e51354c 100644
--- a/apps/frontend/src/domains/commerce/ui/order-detail/ride-hailing-order-map-view-model.test.ts
+++ b/apps/frontend/src/domains/commerce/ui/order-detail/ride-hailing-order-map-view-model.test.ts
@@ -47,6 +47,7 @@ describe("buildRideHailingOrderMapViewModel", () => {
       route: route(),
       live: {
         vehicleLocation: {
+          headingDegrees: 90,
           latitude: 30.286,
           longitude: 120.19,
         },
@@ -54,6 +55,8 @@ describe("buildRideHailingOrderMapViewModel", () => {
           routeKind: "PICKUP",
           polyline: [
             { latitude: 30.286, longitude: 120.19 },
+            { latitude: 30.2871, longitude: 120.197 },
+            { latitude: 30.2893, longitude: 120.203 },
             { latitude: 30.2912, longitude: 120.212 },
           ],
         },
@@ -67,9 +70,12 @@ describe("buildRideHailingOrderMapViewModel", () => {
     });
     expect(viewModel.extraMarkers).toHaveLength(1);
     expect(viewModel.extraMarkers[0]?.icon).toBe("routeDriver");
+    expect(viewModel.extraMarkers[0]?.headingDegrees).toBe(90);
     expect(viewModel.extraPolylines).toHaveLength(1);
     expect(viewModel.extraPolylines[0]?.path).toEqual([
       { lat: 30.286, lng: 120.19 },
+      { lat: 30.2871, lng: 120.197 },
+      { lat: 30.2893, lng: 120.203 },
       { lat: 30.2912, lng: 120.212 },
     ]);
     expect(viewModel.plannedPolyline).toBeNull();
diff --git a/apps/frontend/src/domains/commerce/ui/order-detail/ride-hailing-order-map-view-model.ts b/apps/frontend/src/domains/commerce/ui/order-detail/ride-hailing-order-map-view-model.ts
index 0e35c09e2..29fcf6eaa 100644
--- a/apps/frontend/src/domains/commerce/ui/order-detail/ride-hailing-order-map-view-model.ts
+++ b/apps/frontend/src/domains/commerce/ui/order-detail/ride-hailing-order-map-view-model.ts
@@ -88,11 +88,13 @@ const buildDriverMarker = (
 ): MapMarker | null => {
   const position = toMapCoordinate(location);
   if (!position) return null;
+  const headingDegrees = location?.headingDegrees ?? null;
   return {
     id: DRIVER_MARKER_ID,
     position,
     title: "司机车辆",
     icon: "routeDriver",
+    headingDegrees,
     active: true,
   };
 };
diff --git a/apps/frontend/src/pages/AdminRideHailingPage.vue b/apps/frontend/src/pages/AdminRideHailingPage.vue
index 184dc9344..54e34c1af 100644
--- a/apps/frontend/src/pages/AdminRideHailingPage.vue
+++ b/apps/frontend/src/pages/AdminRideHailingPage.vue
@@ -170,28 +170,41 @@
               <p class="hint">
                 直接调用当前 Provider Instance Endpoint 上的 fake Caocao 控制接口。
               </p>
-              <PuButton
-                size="sm"
-                tone="neutral"
-                variant="outline"
-                :loading="isAdvancingFakePhase"
-                :disabled="isAdvancingFakePhase"
-                data-testid="admin-ride-hailing.dev.advance-phase"
-                @click="advanceFakeCaocaoPhase"
-              >
-                推进最新订单状态
-              </PuButton>
+              <div class="inline-actions">
+                <PuButton
+                  size="sm"
+                  tone="neutral"
+                  variant="outline"
+                  :loading="isMutatingFakePhase"
+                  :disabled="isMutatingFakePhase"
+                  data-testid="admin-ride-hailing.dev.advance-phase"
+                  @click="advanceFakeCaocaoPhase"
+                >
+                  推进最新订单状态
+                </PuButton>
+                <PuButton
+                  size="sm"
+                  tone="neutral"
+                  variant="outline"
+                  :loading="isMutatingFakePhase"
+                  :disabled="isMutatingFakePhase"
+                  data-testid="admin-ride-hailing.dev.retreat-phase"
+                  @click="retreatFakeCaocaoPhase"
+                >
+                  回退最新订单状态
+                </PuButton>
+              </div>
               <PuInlineNotice
-                v-if="fakeAdvanceResultMessage"
+                v-if="fakePhaseControlResultMessage"
                 tone="success"
-                :message="fakeAdvanceResultMessage"
-                data-testid="admin-ride-hailing.dev.advance-phase.result"
+                :message="fakePhaseControlResultMessage"
+                data-testid="admin-ride-hailing.dev.phase-control.result"
               />
               <PuInlineNotice
-                v-if="fakeAdvanceErrorMessage"
+                v-if="fakePhaseControlErrorMessage"
                 tone="error"
-                :message="fakeAdvanceErrorMessage"
-                data-testid="admin-ride-hailing.dev.advance-phase.error"
+                :message="fakePhaseControlErrorMessage"
+                data-testid="admin-ride-hailing.dev.phase-control.error"
               />
             </div>
           </BentoItem>
@@ -288,9 +301,9 @@ const updateMutation = useUpdateAdminRideHailingProviderInstance();
 const selectedProviderIdRaw = ref("");
 const form = ref<ProviderForm>(createBlankForm());
 const localErrorMessage = ref<string | null>(null);
-const isAdvancingFakePhase = ref(false);
-const fakeAdvanceResultMessage = ref<string | null>(null);
-const fakeAdvanceErrorMessage = ref<string | null>(null);
+const isMutatingFakePhase = ref(false);
+const fakePhaseControlResultMessage = ref<string | null>(null);
+const fakePhaseControlErrorMessage = ref<string | null>(null);
 
 const providerInstances = computed(() => workspaceQuery.data.value?.providerInstances ?? []);
 const selectedProviderId = computed(
@@ -425,34 +438,83 @@ const isRecord = (value: unknown): value is Record<string, unknown> =>
 const readStringField = (value: unknown, key: string): string | null =>
   isRecord(value) && typeof value[key] === "string" ? value[key] : null;
 
+const readNumberField = (value: unknown, key: string): number | null =>
+  isRecord(value) && typeof value[key] === "number" ? value[key] : null;
+
 const buildFakeControlUrl = (provider: ProviderInstance, path: string): string => {
   const baseUrl = provider.config.endpointBaseUrl.trim();
   return new URL(path, baseUrl.endsWith("/") ? baseUrl : `${baseUrl}/`).toString();
 };
 
-const readFakeCaocaoErrorMessage = (payload: unknown): string | null =>
-  readStringField(payload, "message") || readStringField(payload, "detail");
+const readFakeCaocaoCallbackErrorMessage = (payload: unknown): string | null => {
+  if (!isRecord(payload) || !isRecord(payload.callback)) return null;
+  const callbackMessage = readStringField(payload.callback, "message");
+  const callbackStatus = readNumberField(payload.callback, "status");
+  const callbackBodyPreview = readStringField(payload.callback, "bodyPreview");
+  const deliveryMessage =
+    callbackMessage ??
+    (callbackStatus === null
+      ? null
+      : `Fake Caocao callback POST failed with HTTP ${callbackStatus}`);
+  if (!deliveryMessage) return callbackBodyPreview;
+  return callbackBodyPreview ? `${deliveryMessage}: ${callbackBodyPreview}` : deliveryMessage;
+};
+
+const readFakeCaocaoFailedOrderMessage = (payload: unknown): string | null => {
+  if (!isRecord(payload) || !isRecord(payload.order)) return null;
+  const providerOrderId = readStringField(payload.order, "providerOrderId");
+  const phase = readStringField(payload.order, "phase");
+  if (!providerOrderId || !phase) return null;
+  return `fake provider 已变更 ${providerOrderId} 到 ${phase}`;
+};
 
-const readFakeCaocaoAdvanceResult = (
+const readFakeCaocaoErrorMessage = (payload: unknown): string | null => {
+  const baseMessage = readStringField(payload, "message") || readStringField(payload, "detail");
+  const callbackMessage = readFakeCaocaoCallbackErrorMessage(payload);
+  const failureMessage =
+    baseMessage && callbackMessage
+      ? `${baseMessage}: ${callbackMessage}`
+      : (baseMessage ?? callbackMessage);
+  const orderMessage = readFakeCaocaoFailedOrderMessage(payload);
+  if (orderMessage && failureMessage) return `${orderMessage}；${failureMessage}`;
+  return failureMessage ?? orderMessage;
+};
+
+const readFakeCaocaoCallbackSuccessMessage = (payload: unknown): string | null => {
+  if (!isRecord(payload) || !isRecord(payload.callback)) return null;
+  if (payload.callback.skipped === true) return "callback 未配置";
+  if (payload.callback.ok === true) {
+    const status = readNumberField(payload.callback, "status");
+    return status === null ? "callback 已送达" : `callback HTTP ${status}`;
+  }
+  return null;
+};
+
+const readFakeCaocaoPhaseControlResult = (
   payload: unknown,
 ): {
+  callbackMessage: string | null;
   providerOrderId: string;
   phase: string;
 } => {
   if (!isRecord(payload) || payload.ok !== true || !isRecord(payload.order)) {
-    throw new Error("Fake Caocao advance response is invalid");
+    throw new Error("Fake Caocao phase control response is invalid");
   }
   const providerOrderId = readStringField(payload.order, "providerOrderId");
   const phase = readStringField(payload.order, "phase");
   if (!providerOrderId || !phase) {
-    throw new Error("Fake Caocao advance response is incomplete");
+    throw new Error("Fake Caocao phase control response is incomplete");
   }
-  return { providerOrderId, phase };
+  return {
+    callbackMessage: readFakeCaocaoCallbackSuccessMessage(payload),
+    phase,
+    providerOrderId,
+  };
 };
 
 const phaseLabel = (phase: string): string => {
   if (phase === "CREATED") return "已创建";
-  if (phase === "ACCEPTED") return "已接单";
+  if (phase === "ACCEPTED") return "接客中";
   if (phase === "IN_TRIP") return "行程中";
   if (phase === "FINISHED") return "已完成";
   if (phase === "CANCELLED") return "已取消";
@@ -486,37 +548,54 @@ const clearErrors = () => {
   updateMutation.reset();
 };
 
-const clearFakeAdvanceFeedback = () => {
-  fakeAdvanceResultMessage.value = null;
-  fakeAdvanceErrorMessage.value = null;
+const clearFakePhaseControlFeedback = () => {
+  fakePhaseControlResultMessage.value = null;
+  fakePhaseControlErrorMessage.value = null;
 };
 
-const advanceFakeCaocaoPhase = async (): Promise<void> => {
-  clearFakeAdvanceFeedback();
+type FakeCaocaoPhaseControlAction = "advance" | "retreat";
+
+const fakeCaocaoPhaseControlActionLabel = (action: FakeCaocaoPhaseControlAction): string =>
+  action === "advance" ? "推进" : "回退";
+
+const mutateFakeCaocaoPhase = async (action: FakeCaocaoPhaseControlAction): Promise<void> => {
+  clearFakePhaseControlFeedback();
   const provider = selectedProvider.value;
   if (!provider) return;
-  isAdvancingFakePhase.value = true;
+  isMutatingFakePhase.value = true;
+  const actionLabel = fakeCaocaoPhaseControlActionLabel(action);
   try {
     const response = await fetch(
-      buildFakeControlUrl(provider, "/__fake_caocao/orders/latest/advance"),
+      buildFakeControlUrl(provider, `/__fake_caocao/orders/latest/${action}`),
       {
         method: "POST",
       },
     );
     const payload = (await response.json().catch(() => null)) as unknown;
     if (!response.ok) {
-      throw new Error(readFakeCaocaoErrorMessage(payload) ?? "推进 fake 曹操订单状态失败");
+      throw new Error(
+        readFakeCaocaoErrorMessage(payload) ?? `${actionLabel} fake 曹操订单状态失败`,
+      );
     }
-    const result = readFakeCaocaoAdvanceResult(payload);
-    fakeAdvanceResultMessage.value = `已推进 ${result.providerOrderId} 到 ${phaseLabel(result.phase)}`;
+    const result = readFakeCaocaoPhaseControlResult(payload);
+    const callbackSuffix = result.callbackMessage ? `（${result.callbackMessage}）` : "";
+    fakePhaseControlResultMessage.value = `已${actionLabel} ${result.providerOrderId} 到 ${phaseLabel(result.phase)}${callbackSuffix}`;
   } catch (error) {
-    fakeAdvanceErrorMessage.value =
-      error instanceof Error ? error.message : "推进 fake 曹操订单状态失败";
+    fakePhaseControlErrorMessage.value =
+      error instanceof Error ? error.message : `${actionLabel} fake 曹操订单状态失败`;
   } finally {
-    isAdvancingFakePhase.value = false;
+    isMutatingFakePhase.value = false;
   }
 };
 
+const advanceFakeCaocaoPhase = async (): Promise<void> => {
+  await mutateFakeCaocaoPhase("advance");
+};
+
+const retreatFakeCaocaoPhase = async (): Promise<void> => {
+  await mutateFakeCaocaoPhase("retreat");
+};
+
 const formatTimestamp = (value: Date | string): string =>
   new Date(value).toLocaleString("zh-CN", { hour12: false });
 
@@ -541,7 +620,7 @@ watch(
       ? formFromProvider(selectedProvider.value)
       : createBlankForm();
     clearErrors();
-    clearFakeAdvanceFeedback();
+    clearFakePhaseControlFeedback();
   },
   { immediate: true },
 );
@@ -622,6 +701,7 @@ small,
 
 .inline-actions {
   display: flex;
+  gap: var(--sys-spacing-small);
   justify-content: flex-end;
 }
 
diff --git a/apps/frontend/src/shared/map/tencent/tencent-lbs-provider.test.ts b/apps/frontend/src/shared/map/tencent/tencent-lbs-provider.test.ts
new file mode 100644
index 000000000..36f67c1bd
--- /dev/null
+++ b/apps/frontend/src/shared/map/tencent/tencent-lbs-provider.test.ts
@@ -0,0 +1,83 @@
+import { describe, expect, test } from "vitest";
+import {
+  resolveTencentMarkerStyleId,
+  shouldAnimateTencentMarkerMove,
+  toTencentMarkerRotateDegrees,
+} from "./tencent-lbs-provider";
+
+describe("Tencent LBS marker heading", () => {
+  test("converts north-clockwise provider heading to Tencent counter-clockwise rotate", () => {
+    expect(toTencentMarkerRotateDegrees(0)).toBe(0);
+    expect(toTencentMarkerRotateDegrees(90)).toBe(270);
+    expect(toTencentMarkerRotateDegrees(180)).toBe(180);
+    expect(toTencentMarkerRotateDegrees(270)).toBe(90);
+    expect(toTencentMarkerRotateDegrees(-90)).toBe(90);
+  });
+
+  test("uses heading-aware route driver style id without replacing the driver icon style", () => {
+    expect(
+      resolveTencentMarkerStyleId({
+        headingDegrees: 90,
+        icon: "routeDriver",
+        id: "driver",
+        position: { lat: 30, lng: 120 },
+      }),
+    ).toBe("routeDriverHeading-270");
+
+    expect(
+      resolveTencentMarkerStyleId({
+        active: true,
+        icon: "routeDriver",
+        id: "driver",
+        position: { lat: 30, lng: 120 },
+      }),
+    ).toBe("routeDriver");
+  });
+
+  test("animates only route driver marker coordinate changes", () => {
+    expect(
+      shouldAnimateTencentMarkerMove({
+        previous: {
+          icon: "routeDriver",
+          id: "driver",
+          position: { lat: 30, lng: 120 },
+        },
+        next: {
+          icon: "routeDriver",
+          id: "driver",
+          position: { lat: 30.001, lng: 120.001 },
+        },
+      }),
+    ).toBe(true);
+
+    expect(
+      shouldAnimateTencentMarkerMove({
+        previous: {
+          icon: "routeStart",
+          id: "start",
+          position: { lat: 30, lng: 120 },
+        },
+        next: {
+          icon: "routeStart",
+          id: "start",
+          position: { lat: 30.001, lng: 120.001 },
+        },
+      }),
+    ).toBe(false);
+
+    expect(
+      shouldAnimateTencentMarkerMove({
+        previous: {
+          icon: "routeDriver",
+          id: "driver",
+          position: { lat: 30, lng: 120 },
+        },
+        next: {
+          icon: "routeDriver",
+          id: "driver",
+          position: { lat: 30, lng: 120 },
+        },
+      }),
+    ).toBe(false);
+  });
+});
diff --git a/apps/frontend/src/shared/map/tencent/tencent-lbs-provider.ts b/apps/frontend/src/shared/map/tencent/tencent-lbs-provider.ts
index 14c32bc17..80144d110 100644
--- a/apps/frontend/src/shared/map/tencent/tencent-lbs-provider.ts
+++ b/apps/frontend/src/shared/map/tencent/tencent-lbs-provider.ts
@@ -17,6 +17,9 @@ import type {
   TencentMapOptions,
   TencentMapSdk,
   TencentMarkerClickEvent,
+  TencentMarkerStyle,
+  TencentMarkerStyleOptions,
+  TencentMoveAlongParamSet,
   TencentMultiMarker,
   TencentMultiPolyline,
   TencentPointGeometry,
@@ -31,6 +34,8 @@ const DEFAULT_ZOOM = 12;
 const SINGLE_POINT_ZOOM = 15;
 const SINGLE_POINT_BOUNDS_DELTA = 0.0001;
 const TENCENT_MAP_STYLE_ID = "style1";
+const DRIVER_MARKER_MOVE_DURATION_MS = 1_900;
+const MARKER_MOVE_COORDINATE_EPSILON = 0.000001;
 
 const MARKER_COLORS: Record<MapGeometryTone | "active", string> = {
   primary: "#1D63ED",
@@ -58,6 +63,7 @@ const ROUTE_MARKER_ICON_SRC: Record<MapMarkerIcon, string> = {
   routeEnd: "/route-map/map-marker-to.png",
   routeDriver: "/route-map/map-marker-driver.png",
 };
+const ROUTE_DRIVER_HEADING_STYLE_PREFIX = "routeDriverHeading";
 
 const createMarkerSvg = (color: string): string => {
   const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="28" height="36" viewBox="0 0 28 36"><path fill="${color}" d="M14 0C6.7 0 .8 5.9.8 13.2c0 9.9 13.2 22.8 13.2 22.8s13.2-12.9 13.2-22.8C27.2 5.9 21.3 0 14 0Z"/><circle cx="14" cy="13.2" r="5.2" fill="white"/></svg>`;
@@ -67,6 +73,10 @@ const createMarkerSvg = (color: string): string => {
 const isFiniteCoordinate = (coordinate: MapCoordinate): boolean =>
   Number.isFinite(coordinate.lat) && Number.isFinite(coordinate.lng);
 
+const coordinatesEqual = (first: MapCoordinate, second: MapCoordinate): boolean =>
+  Math.abs(first.lat - second.lat) < MARKER_MOVE_COORDINATE_EPSILON &&
+  Math.abs(first.lng - second.lng) < MARKER_MOVE_COORDINATE_EPSILON;
+
 const toTencentLatLng = (sdk: TencentMapSdk, coordinate: MapCoordinate): TencentLatLng =>
   new sdk.LatLng(coordinate.lat, coordinate.lng);
 
@@ -87,82 +97,126 @@ const createSinglePointBounds = (
   );
 };
 
-const resolveMarkerStyleId = (marker: MapMarker): MapGeometryTone | MapMarkerIcon | "active" =>
-  marker.active ? "active" : (marker.icon ?? marker.tone ?? "primary");
+export const toTencentMarkerRotateDegrees = (
+  headingDegrees: number | null | undefined,
+): number | null => {
+  if (typeof headingDegrees !== "number" || !Number.isFinite(headingDegrees)) return null;
+  const normalizedHeading = ((headingDegrees % 360) + 360) % 360;
+  return (360 - normalizedHeading) % 360;
+};
+
+export const resolveTencentMarkerStyleId = (
+  marker: MapMarker,
+): MapGeometryTone | MapMarkerIcon | "active" | string => {
+  if (marker.icon === "routeDriver") {
+    const rotateDegrees = toTencentMarkerRotateDegrees(marker.headingDegrees);
+    return typeof rotateDegrees === "number"
+      ? `${ROUTE_DRIVER_HEADING_STYLE_PREFIX}-${Math.round(rotateDegrees)}`
+      : "routeDriver";
+  }
+  return marker.icon ?? (marker.active ? "active" : (marker.tone ?? "primary"));
+};
 
 const resolvePolylineStyleId = (polyline: MapPolyline): MapGeometryTone | "active" =>
   polyline.active ? "active" : (polyline.tone ?? "primary");
 
-const createMarkerStyles = (sdk: TencentMapSdk) => ({
-  primary: new sdk.MarkerStyle({
-    width: 28,
-    height: 36,
-    anchor: { x: 14, y: 36 },
-    src: createMarkerSvg(MARKER_COLORS.primary),
-    color: "#FFFFFF",
-    strokeColor: "rgba(0,0,0,0)",
-    size: 12,
-    direction: "center",
-    offset: { x: 0, y: -7 },
-  }),
-  secondary: new sdk.MarkerStyle({
-    width: 28,
-    height: 36,
-    anchor: { x: 14, y: 36 },
-    src: createMarkerSvg(MARKER_COLORS.secondary),
-    color: "#FFFFFF",
-    strokeColor: "rgba(0,0,0,0)",
-    size: 12,
-    direction: "center",
-    offset: { x: 0, y: -7 },
-  }),
-  muted: new sdk.MarkerStyle({
-    width: 28,
-    height: 36,
-    anchor: { x: 14, y: 36 },
-    src: createMarkerSvg(MARKER_COLORS.muted),
-    color: "#FFFFFF",
-    strokeColor: "rgba(0,0,0,0)",
-    size: 12,
-    direction: "center",
-    offset: { x: 0, y: -7 },
-  }),
-  active: new sdk.MarkerStyle({
-    width: 32,
-    height: 40,
-    anchor: { x: 16, y: 40 },
-    src: createMarkerSvg(MARKER_COLORS.active),
-    color: "#FFFFFF",
-    strokeColor: "rgba(0,0,0,0)",
-    size: 12,
-    direction: "center",
-    offset: { x: 0, y: -8 },
-  }),
-  routeStart: new sdk.MarkerStyle({
-    width: 24,
-    height: 24,
-    anchor: { x: 12, y: 12 },
-    src: ROUTE_MARKER_ICON_SRC.routeStart,
-  }),
-  routeWaypoint: new sdk.MarkerStyle({
-    width: 24,
-    height: 24,
-    anchor: { x: 12, y: 12 },
-    src: ROUTE_MARKER_ICON_SRC.routeWaypoint,
-  }),
-  routeEnd: new sdk.MarkerStyle({
-    width: 24,
-    height: 24,
-    anchor: { x: 12, y: 12 },
-    src: ROUTE_MARKER_ICON_SRC.routeEnd,
-  }),
-  routeDriver: new sdk.MarkerStyle({
+const createRouteDriverMarkerStyle = (
+  sdk: TencentMapSdk,
+  rotateDegrees?: number,
+): TencentMarkerStyle => {
+  const options: TencentMarkerStyleOptions = {
     width: 38,
     height: 38,
     anchor: { x: 19, y: 19 },
+    faceTo: "map",
     src: ROUTE_MARKER_ICON_SRC.routeDriver,
-  }),
-});
+  };
+  if (typeof rotateDegrees === "number") {
+    options.rotate = rotateDegrees;
+  }
+  return new sdk.MarkerStyle(options);
+};
+
+const createMarkerStyles = (
+  sdk: TencentMapSdk,
+  markers: readonly MapMarker[] = [],
+): Record<string, TencentMarkerStyle> => {
+  const styles: Record<string, TencentMarkerStyle> = {
+    primary: new sdk.MarkerStyle({
+      width: 28,
+      height: 36,
+      anchor: { x: 14, y: 36 },
+      src: createMarkerSvg(MARKER_COLORS.primary),
+      color: "#FFFFFF",
+      strokeColor: "rgba(0,0,0,0)",
+      size: 12,
+      direction: "center",
+      offset: { x: 0, y: -7 },
+    }),
+    secondary: new sdk.MarkerStyle({
+      width: 28,
+      height: 36,
+      anchor: { x: 14, y: 36 },
+      src: createMarkerSvg(MARKER_COLORS.secondary),
+      color: "#FFFFFF",
+      strokeColor: "rgba(0,0,0,0)",
+      size: 12,
+      direction: "center",
+      offset: { x: 0, y: -7 },
+    }),
+    muted: new sdk.MarkerStyle({
+      width: 28,
+      height: 36,
+      anchor: { x: 14, y: 36 },
+      src: createMarkerSvg(MARKER_COLORS.muted),
+      color: "#FFFFFF",
+      strokeColor: "rgba(0,0,0,0)",
+      size: 12,
+      direction: "center",
+      offset: { x: 0, y: -7 },
+    }),
+    active: new sdk.MarkerStyle({
+      width: 32,
+      height: 40,
+      anchor: { x: 16, y: 40 },
+      src: createMarkerSvg(MARKER_COLORS.active),
+      color: "#FFFFFF",
+      strokeColor: "rgba(0,0,0,0)",
+      size: 12,
+      direction: "center",
+      offset: { x: 0, y: -8 },
+    }),
+    routeStart: new sdk.MarkerStyle({
+      width: 24,
+      height: 24,
+      anchor: { x: 12, y: 12 },
+      src: ROUTE_MARKER_ICON_SRC.routeStart,
+    }),
+    routeWaypoint: new sdk.MarkerStyle({
+      width: 24,
+      height: 24,
+      anchor: { x: 12, y: 12 },
+      src: ROUTE_MARKER_ICON_SRC.routeWaypoint,
+    }),
+    routeEnd: new sdk.MarkerStyle({
+      width: 24,
+      height: 24,
+      anchor: { x: 12, y: 12 },
+      src: ROUTE_MARKER_ICON_SRC.routeEnd,
+    }),
+    routeDriver: createRouteDriverMarkerStyle(sdk),
+  };
+  for (const marker of markers) {
+    if (marker.icon !== "routeDriver") continue;
+    const rotateDegrees = toTencentMarkerRotateDegrees(marker.headingDegrees);
+    if (typeof rotateDegrees !== "number") continue;
+    styles[resolveTencentMarkerStyleId(marker)] = createRouteDriverMarkerStyle(
+      sdk,
+      Math.round(rotateDegrees),
+    );
+  }
+  return styles;
+};
 
 const createPolylineStyles = (sdk: TencentMapSdk) => ({
   primary: new sdk.PolylineStyle({
@@ -229,7 +283,7 @@ const toMarkerGeometries = (
     .map((marker, index) => {
       const geometry: TencentPointGeometry = {
         id: marker.id,
-        styleId: resolveMarkerStyleId(marker),
+        styleId: resolveTencentMarkerStyleId(marker),
         position: toTencentLatLng(sdk, marker.position),
         rank: marker.active ? 10_000 : index,
         properties: {
@@ -243,6 +297,52 @@ const toMarkerGeometries = (
       return geometry;
     });
 
+export const shouldAnimateTencentMarkerMove = (input: {
+  previous: MapMarker | null | undefined;
+  next: MapMarker;
+}): boolean => {
+  if (input.next.icon !== "routeDriver") return false;
+  if (!input.previous || input.previous.icon !== "routeDriver") return false;
+  if (!isFiniteCoordinate(input.previous.position) || !isFiniteCoordinate(input.next.position)) {
+    return false;
+  }
+  return !coordinatesEqual(input.previous.position, input.next.position);
+};
+
+const toRenderedMarkerForMove = (
+  marker: MapMarker,
+  previousMarkersById: ReadonlyMap<string, MapMarker>,
+): MapMarker => {
+  const previous = previousMarkersById.get(marker.id);
+  if (!shouldAnimateTencentMarkerMove({ next: marker, previous }) || !previous) {
+    return marker;
+  }
+  return {
+    ...marker,
+    position: previous.position,
+  };
+};
+
+const toMarkerMoveAlongParams = (
+  sdk: TencentMapSdk,
+  markers: readonly MapMarker[],
+  previousMarkersById: ReadonlyMap<string, MapMarker>,
+): TencentMoveAlongParamSet => {
+  const params: TencentMoveAlongParamSet = {};
+  for (const marker of markers) {
+    const previous = previousMarkersById.get(marker.id);
+    if (!shouldAnimateTencentMarkerMove({ next: marker, previous }) || !previous) continue;
+    params[marker.id] = {
+      duration: DRIVER_MARKER_MOVE_DURATION_MS,
+      path: [toTencentLatLng(sdk, previous.position), toTencentLatLng(sdk, marker.position)],
+    };
+  }
+  return params;
+};
+
+const toMarkerMap = (markers: readonly MapMarker[]): Map<string, MapMarker> =>
+  new Map(markers.map((marker) => [marker.id, marker]));
+
 const toPolylineGeometries = (
   sdk: TencentMapSdk,
   polylines: readonly MapPolyline[],
@@ -363,6 +463,7 @@ export const createTencentLBSMapProvider = async ({
     geometries: [],
     disableInteractive: false,
   });
+  let previousMarkerTargetsById = new Map<string, MapMarker>();
 
   const handleMarkerClick = (event: TencentMarkerClickEvent) => {
     const markerId = event.geometry?.id;
@@ -383,7 +484,18 @@ export const createTencentLBSMapProvider = async ({
 
   return {
     setMarkers(markers) {
-      markerLayer?.setGeometries(toMarkerGeometries(sdk, markers));
+      markerLayer?.setStyles(createMarkerStyles(sdk, markers));
+      const moveAlongParams = toMarkerMoveAlongParams(sdk, markers, previousMarkerTargetsById);
+      const renderedMarkers = markers.map((marker) =>
+        toRenderedMarkerForMove(marker, previousMarkerTargetsById),
+      );
+      markerLayer?.setGeometries(toMarkerGeometries(sdk, renderedMarkers));
+      if (Object.keys(moveAlongParams).length > 0) {
+        markerLayer?.moveAlong(moveAlongParams, {
+          autoRotation: true,
+        });
+      }
+      previousMarkerTargetsById = toMarkerMap(markers);
     },
     setPolylines(polylines) {
       polylineLayer?.setGeometries(toPolylineGeometries(sdk, polylines));
@@ -417,6 +529,7 @@ export const createTencentLBSMapProvider = async ({
     },
     destroy() {
       markerLayer?.off("click", handleMarkerClick);
+      markerLayer?.stopMove();
       markerLayer?.setMap(null);
       markerLayer = null;
       polylineLayer?.setMap(null);
diff --git a/apps/frontend/src/shared/map/tencent/types.ts b/apps/frontend/src/shared/map/tencent/types.ts
index dd3bcbb2d..b2395e0d1 100644
--- a/apps/frontend/src/shared/map/tencent/types.ts
+++ b/apps/frontend/src/shared/map/tencent/types.ts
@@ -1,11 +1,12 @@
-import type {
-  MapCoordinate,
-  MapFitPadding,
-  MapMarker,
-  MapPolyline,
-} from "@/shared/map/types";
+import type { MapCoordinate, MapFitPadding, MapMarker, MapPolyline } from "@/shared/map/types";
 
-export type TencentLBSLibrary = "visualization" | "tools" | "geometry" | "model" | "view" | "service";
+export type TencentLBSLibrary =
+  | "visualization"
+  | "tools"
+  | "geometry"
+  | "model"
+  | "view"
+  | "service";
 
 export type TencentFitBoundsOptions = {
   padding?: MapFitPadding;
@@ -52,10 +53,7 @@ export type TencentMap = {
   setCenter(center: TencentLatLng): TencentMap;
   setZoom(zoom: number): TencentMap;
   getZoom(): number;
-  fitBounds(
-    bounds: TencentLatLngBounds,
-    options?: TencentFitBoundsOptions,
-  ): TencentMap;
+  fitBounds(bounds: TencentLatLngBounds, options?: TencentFitBoundsOptions): TencentMap;
   easeTo(
     status: { center?: TencentLatLng; zoom?: number },
     options?: { duration?: number },
@@ -72,6 +70,8 @@ export type TencentMarkerStyleOptions = {
   height: number;
   anchor?: { x: number; y: number };
   src?: string;
+  faceTo?: "map" | "screen";
+  rotate?: number;
   color?: string;
   strokeColor?: string;
   strokeWidth?: number;
@@ -95,17 +95,26 @@ export type TencentPointGeometry = {
   properties?: Record<string, string>;
 };
 
+export type TencentMoveAlongParam = {
+  path: TencentLatLng[];
+  duration?: number;
+  speed?: number;
+};
+
+export type TencentMoveAlongParamSet = Record<string, TencentMoveAlongParam>;
+
+export type TencentMoveAlongOptions = {
+  autoRotation?: boolean;
+};
+
 export type TencentMultiMarker = {
   setGeometries(geometries: TencentPointGeometry[]): TencentMultiMarker;
+  setStyles(styles: Record<string, TencentMarkerStyle>): TencentMultiMarker;
+  moveAlong(param: TencentMoveAlongParamSet, options?: TencentMoveAlongOptions): TencentMultiMarker;
+  stopMove(): TencentMultiMarker;
   setMap(map: TencentMap | null): TencentMultiMarker;
-  on(
-    eventName: "click",
-    handler: (event: TencentMarkerClickEvent) => void,
-  ): TencentMultiMarker;
-  off(
-    eventName: "click",
-    handler: (event: TencentMarkerClickEvent) => void,
-  ): TencentMultiMarker;
+  on(eventName: "click", handler: (event: TencentMarkerClickEvent) => void): TencentMultiMarker;
+  off(eventName: "click", handler: (event: TencentMarkerClickEvent) => void): TencentMultiMarker;
 };
 
 export type TencentMarkerClickEvent = {
@@ -198,10 +207,7 @@ export type TencentLBSMapProvider = {
     padding?: MapFitPadding;
     maxZoom?: number;
   }): void;
-  setViewport(input: {
-    center?: MapCoordinate;
-    zoom?: number;
-  }): void;
+  setViewport(input: { center?: MapCoordinate; zoom?: number }): void;
   zoomIn(): void;
   zoomOut(): void;
   destroy(): void;
diff --git a/apps/frontend/src/shared/map/types.ts b/apps/frontend/src/shared/map/types.ts
index c3804ca21..6141b6f03 100644
--- a/apps/frontend/src/shared/map/types.ts
+++ b/apps/frontend/src/shared/map/types.ts
@@ -20,11 +20,7 @@ export type MapGeometryTone =
   | "routeSecondary"
   | "routeInvalid";
 
-export type MapMarkerIcon =
-  | "routeStart"
-  | "routeWaypoint"
-  | "routeEnd"
-  | "routeDriver";
+export type MapMarkerIcon = "routeStart" | "routeWaypoint" | "routeEnd" | "routeDriver";
 
 export type MapMarker = {
   id: string;
@@ -34,6 +30,7 @@ export type MapMarker = {
   title?: string;
   tone?: MapGeometryTone;
   icon?: MapMarkerIcon;
+  headingDegrees?: number | null;
   active?: boolean;
 };
 
diff --git a/packages/fake-caocao-server/bin/fake-caocao-server.ts b/packages/fake-caocao-server/bin/fake-caocao-server.ts
index b41fe52a7..8c5ca2302 100644
--- a/packages/fake-caocao-server/bin/fake-caocao-server.ts
+++ b/packages/fake-caocao-server/bin/fake-caocao-server.ts
@@ -1,12 +1,46 @@
+import { existsSync, readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { createTencentDrivingRoutePlanner } from "../src/route-planning";
 import { startFakeCaocaoServer } from "../src/server";
 
+const frontendEnvPath = fileURLToPath(new URL("../../../apps/frontend/.env", import.meta.url));
+
+const loadFrontendEnvFile = (): void => {
+  if (!existsSync(frontendEnvPath)) return;
+  const lines = readFileSync(frontendEnvPath, "utf8").split(/\r?\n/);
+  for (const line of lines) {
+    const trimmed = line.trim();
+    if (!trimmed || trimmed.startsWith("#")) continue;
+    const separatorIndex = trimmed.indexOf("=");
+    if (separatorIndex <= 0) continue;
+    const key = trimmed.slice(0, separatorIndex).trim();
+    if (!key.startsWith("VITE_TENCENT_LBS_")) continue;
+    if (process.env[key]) continue;
+    const rawValue = trimmed.slice(separatorIndex + 1).trim();
+    process.env[key] = rawValue.replace(/^['"]|['"]$/g, "");
+  }
+};
+
+loadFrontendEnvFile();
+
 const portRaw = process.env.PORT;
 const port = portRaw ? Number.parseInt(portRaw, 10) : 0;
 const hostname = process.env.HOST || undefined;
+const tencentLbsKey =
+  process.env.VITE_TENCENT_LBS_WEB_SERVICE_KEY?.trim() ||
+  process.env.VITE_TENCENT_LBS_JS_KEY?.trim() ||
+  "";
+const routePlanner =
+  tencentLbsKey.length > 0
+    ? createTencentDrivingRoutePlanner({
+        apiKey: tencentLbsKey,
+      })
+    : null;
 
 const server = await startFakeCaocaoServer({
   hostname,
   port: Number.isFinite(port) ? port : 0,
+  routePlanner,
 });
 const publicOrigin = process.env.PORTLESS_URL || server.origin;
 
diff --git a/packages/fake-caocao-server/src/index.ts b/packages/fake-caocao-server/src/index.ts
index 72f6155b9..6e7b44175 100644
--- a/packages/fake-caocao-server/src/index.ts
+++ b/packages/fake-caocao-server/src/index.ts
@@ -1,5 +1,12 @@
 export type { FakeCaocaoFixture } from "./fixtures";
 export { createFakeCaocaoFixture } from "./fixtures";
+export type {
+  FakeCaocaoRouteKind,
+  FakeCaocaoRoutePlan,
+  FakeCaocaoRoutePlanner,
+  FakeCaocaoRoutePlannerInput,
+} from "./route-planning";
+export { createTencentDrivingRoutePlanner } from "./route-planning";
 export type { FakeCaocaoServerOptions, StartedFakeCaocaoServer } from "./server";
 export { startFakeCaocaoServer } from "./server";
 export type {
diff --git a/packages/fake-caocao-server/src/movement.test.ts b/packages/fake-caocao-server/src/movement.test.ts
new file mode 100644
index 000000000..16c153f7e
--- /dev/null
+++ b/packages/fake-caocao-server/src/movement.test.ts
@@ -0,0 +1,77 @@
+import { describe, expect, test } from "vitest";
+import { bearingDegrees, movementSnapshotFromRoute, remainingRouteFromDistance } from "./movement";
+
+describe("fake Caocao movement helpers", () => {
+  test("keeps Caocao heading convention as north-clockwise", () => {
+    expect(
+      bearingDegrees({ latitude: 30, longitude: 120 }, { latitude: 31, longitude: 120 }),
+    ).toBeCloseTo(0, 0);
+    expect(
+      bearingDegrees({ latitude: 30, longitude: 120 }, { latitude: 30, longitude: 121 }),
+    ).toBeCloseTo(90, 0);
+  });
+
+  test("returns remaining route from the current point", () => {
+    const route = [
+      { latitude: 30, longitude: 120 },
+      { latitude: 30, longitude: 120.01 },
+      { latitude: 30.01, longitude: 120.01 },
+    ];
+
+    const remainingRoute = remainingRouteFromDistance(route, 600);
+
+    expect(remainingRoute).toHaveLength(3);
+    expect(remainingRoute[0]?.latitude).toBeCloseTo(30, 6);
+    expect(remainingRoute[0]?.longitude).toBeGreaterThan(120);
+    expect(remainingRoute[1]).toEqual(route[1]);
+    expect(remainingRoute[2]).toEqual(route[2]);
+  });
+
+  test("creates a movement snapshot with current coordinate, heading, and remaining path", () => {
+    const route = [
+      { latitude: 30, longitude: 120 },
+      { latitude: 30, longitude: 120.01 },
+      { latitude: 30.01, longitude: 120.01 },
+    ];
+
+    const snapshot = movementSnapshotFromRoute({
+      progressRatio: 0.5,
+      route,
+    });
+
+    expect(snapshot.coordinate.longitude).toBeGreaterThan(120);
+    expect(snapshot.remainingRoute[0]).toEqual(snapshot.coordinate);
+    expect(snapshot.remainingRoute.length).toBeGreaterThan(1);
+    expect(snapshot.remainingDistanceMeters).toBeGreaterThan(0);
+    expect(snapshot.headingDegrees).toBeGreaterThanOrEqual(0);
+    expect(snapshot.headingDegrees).toBeLessThan(360);
+  });
+
+  test("can create movement snapshot from distance instead of route percentage", () => {
+    const shortRoute = [
+      { latitude: 30, longitude: 120 },
+      { latitude: 30, longitude: 120.01 },
+    ];
+    const longRoute = [
+      { latitude: 30, longitude: 120 },
+      { latitude: 30, longitude: 120.02 },
+    ];
+
+    const shortSnapshot = movementSnapshotFromRoute({
+      distanceAlongRouteMeters: 300,
+      route: shortRoute,
+    });
+    const longSnapshot = movementSnapshotFromRoute({
+      distanceAlongRouteMeters: 300,
+      route: longRoute,
+    });
+
+    expect(shortSnapshot.coordinate.longitude - 120).toBeCloseTo(
+      longSnapshot.coordinate.longitude - 120,
+      4,
+    );
+    expect(shortSnapshot.remainingDistanceMeters).toBeLessThan(
+      longSnapshot.remainingDistanceMeters,
+    );
+  });
+});
diff --git a/packages/fake-caocao-server/src/movement.ts b/packages/fake-caocao-server/src/movement.ts
new file mode 100644
index 000000000..cc6eb6e36
--- /dev/null
+++ b/packages/fake-caocao-server/src/movement.ts
@@ -0,0 +1,123 @@
+export type FakeCaocaoMovementCoordinate = {
+  latitude: number;
+  longitude: number;
+};
+
+export type FakeCaocaoMovementSnapshot = {
+  coordinate: FakeCaocaoMovementCoordinate;
+  headingDegrees: number;
+  remainingDistanceMeters: number;
+  remainingRoute: FakeCaocaoMovementCoordinate[];
+};
+
+const EARTH_RADIUS_METERS = 6_371_000;
+const MINIMUM_SEGMENT_DISTANCE_METERS = 0.01;
+
+const toRadians = (degrees: number): number => (degrees * Math.PI) / 180;
+const toDegrees = (radians: number): number => (radians * 180) / Math.PI;
+
+export const normalizeHeadingDegrees = (degrees: number): number => {
+  if (!Number.isFinite(degrees)) return 0;
+  return ((degrees % 360) + 360) % 360;
+};
+
+export const distanceMeters = (
+  from: FakeCaocaoMovementCoordinate,
+  to: FakeCaocaoMovementCoordinate,
+): number => {
+  const fromLat = toRadians(from.latitude);
+  const toLat = toRadians(to.latitude);
+  const deltaLat = toRadians(to.latitude - from.latitude);
+  const deltaLng = toRadians(to.longitude - from.longitude);
+  const haversine =
+    Math.sin(deltaLat / 2) ** 2 + Math.cos(fromLat) * Math.cos(toLat) * Math.sin(deltaLng / 2) ** 2;
+  return 2 * EARTH_RADIUS_METERS * Math.atan2(Math.sqrt(haversine), Math.sqrt(1 - haversine));
+};
+
+export const bearingDegrees = (
+  from: FakeCaocaoMovementCoordinate,
+  to: FakeCaocaoMovementCoordinate,
+): number => {
+  const fromLat = toRadians(from.latitude);
+  const toLat = toRadians(to.latitude);
+  const deltaLng = toRadians(to.longitude - from.longitude);
+  const y = Math.sin(deltaLng) * Math.cos(toLat);
+  const x =
+    Math.cos(fromLat) * Math.sin(toLat) - Math.sin(fromLat) * Math.cos(toLat) * Math.cos(deltaLng);
+  return normalizeHeadingDegrees(toDegrees(Math.atan2(y, x)));
+};
+
+export const polylineLengthMeters = (route: readonly FakeCaocaoMovementCoordinate[]): number =>
+  route.slice(1).reduce((total, point, index) => total + distanceMeters(route[index]!, point), 0);
+
+const interpolateCoordinate = (
+  from: FakeCaocaoMovementCoordinate,
+  to: FakeCaocaoMovementCoordinate,
+  ratio: number,
+): FakeCaocaoMovementCoordinate => ({
+  latitude: from.latitude + (to.latitude - from.latitude) * ratio,
+  longitude: from.longitude + (to.longitude - from.longitude) * ratio,
+});
+
+export const remainingRouteFromDistance = (
+  route: readonly FakeCaocaoMovementCoordinate[],
+  distanceAlongRouteMeters: number,
+): FakeCaocaoMovementCoordinate[] => {
+  const first = route[0];
+  if (!first) return [];
+  if (route.length === 1) return [first];
+
+  const targetDistance = Math.max(0, distanceAlongRouteMeters);
+  let consumedDistance = 0;
+  for (let index = 1; index < route.length; index += 1) {
+    const previous = route[index - 1]!;
+    const current = route[index]!;
+    const segmentDistance = distanceMeters(previous, current);
+    if (segmentDistance <= MINIMUM_SEGMENT_DISTANCE_METERS) continue;
+
+    const nextConsumedDistance = consumedDistance + segmentDistance;
+    if (targetDistance <= nextConsumedDistance) {
+      const segmentRatio = (targetDistance - consumedDistance) / segmentDistance;
+      return [interpolateCoordinate(previous, current, segmentRatio), ...route.slice(index)];
+    }
+    consumedDistance = nextConsumedDistance;
+  }
+
+  return [route[route.length - 1]!];
+};
+
+export const movementSnapshotFromRoute = (input: {
+  route: readonly FakeCaocaoMovementCoordinate[];
+  distanceAlongRouteMeters?: number;
+  fallbackHeadingDegrees?: number;
+  progressRatio?: number;
+}): FakeCaocaoMovementSnapshot => {
+  const first = input.route[0];
+  if (!first) {
+    return {
+      coordinate: { latitude: 0, longitude: 0 },
+      headingDegrees: normalizeHeadingDegrees(input.fallbackHeadingDegrees ?? 0),
+      remainingDistanceMeters: 0,
+      remainingRoute: [],
+    };
+  }
+
+  const totalDistance = polylineLengthMeters(input.route);
+  const clampedProgressRatio = Math.min(Math.max(input.progressRatio ?? 0, 0), 1);
+  const distanceAlongRouteMeters =
+    input.distanceAlongRouteMeters ?? totalDistance * clampedProgressRatio;
+  const remainingRoute = remainingRouteFromDistance(
+    input.route,
+    Math.min(Math.max(distanceAlongRouteMeters, 0), totalDistance),
+  );
+  const coordinate = remainingRoute[0] ?? first;
+  const nextPoint = remainingRoute.find((point) => distanceMeters(coordinate, point) > 0.5);
+  return {
+    coordinate,
+    headingDegrees: nextPoint
+      ? bearingDegrees(coordinate, nextPoint)
+      : normalizeHeadingDegrees(input.fallbackHeadingDegrees ?? 0),
+    remainingDistanceMeters: polylineLengthMeters(remainingRoute),
+    remainingRoute,
+  };
+};
diff --git a/packages/fake-caocao-server/src/route-planning.test.ts b/packages/fake-caocao-server/src/route-planning.test.ts
new file mode 100644
index 000000000..8986cf1b9
--- /dev/null
+++ b/packages/fake-caocao-server/src/route-planning.test.ts
@@ -0,0 +1,99 @@
+import { describe, expect, test } from "vitest";
+import {
+  buildTencentDrivingDirectionUrl,
+  createTencentDrivingRoutePlanner,
+  decompressTencentDirectionPolyline,
+  parseTencentDrivingDirectionResponse,
+} from "./route-planning";
+
+describe("fake Caocao Tencent route planning", () => {
+  test("builds Tencent driving direction URL with Caocao coordinates", () => {
+    const url = buildTencentDrivingDirectionUrl({
+      apiKey: "test-key",
+      from: { latitude: 30.1, longitude: 120.2 },
+      to: { latitude: 30.3, longitude: 120.4 },
+    });
+
+    const parsed = new URL(url);
+    expect(parsed.origin + parsed.pathname).toBe(
+      "https://apis.map.qq.com/ws/direction/v1/driving/",
+    );
+    expect(parsed.searchParams.get("from")).toBe("30.1,120.2");
+    expect(parsed.searchParams.get("to")).toBe("30.3,120.4");
+    expect(parsed.searchParams.get("no_step")).toBe("1");
+    expect(parsed.searchParams.get("key")).toBe("test-key");
+  });
+
+  test("decompresses Tencent delta polyline to Caocao latitude-longitude coordinates", () => {
+    expect(decompressTencentDirectionPolyline([39.91522, 116.403857, -20, -697])).toEqual([
+      { latitude: 39.91522, longitude: 116.403857 },
+      { latitude: 39.9152, longitude: 116.40316 },
+    ]);
+  });
+
+  test("parses Tencent driving direction response", () => {
+    const plans = parseTencentDrivingDirectionResponse({
+      status: 0,
+      result: {
+        routes: [
+          {
+            distance: 100,
+            duration: 12,
+            polyline: [39.91522, 116.403857, -20, -697],
+          },
+        ],
+      },
+    });
+
+    expect(plans).toEqual([
+      {
+        distance: 100,
+        duration: 12,
+        polyline: [
+          { latitude: 39.91522, longitude: 116.403857 },
+          { latitude: 39.9152, longitude: 116.40316 },
+        ],
+      },
+    ]);
+  });
+
+  test("creates route planner backed by Tencent response parser", async () => {
+    const requestedUrls: string[] = [];
+    const planner = createTencentDrivingRoutePlanner({
+      apiKey: "test-key",
+      fetcher: async (url) => {
+        requestedUrls.push(String(url));
+        return new Response(
+          JSON.stringify({
+            status: 0,
+            result: {
+              routes: [
+                {
+                  distance: 100,
+                  duration: 12,
+                  polyline: [39.91522, 116.403857, -20, -697],
+                },
+              ],
+            },
+          }),
+          {
+            status: 200,
+          },
+        );
+      },
+    });
+
+    const plan = await planner({
+      from: { latitude: 30.1, longitude: 120.2 },
+      providerOrderId: "CC1",
+      routeKind: "PICKUP",
+      to: { latitude: 30.3, longitude: 120.4 },
+    });
+
+    expect(requestedUrls).toHaveLength(1);
+    expect(new URL(requestedUrls[0] ?? "").searchParams.get("key")).toBe("test-key");
+    expect(plan.coordinates).toHaveLength(2);
+    expect(plan.distanceMeters).toBe(100);
+    expect(plan.durationSeconds).toBe(12);
+  });
+});
diff --git a/packages/fake-caocao-server/src/route-planning.ts b/packages/fake-caocao-server/src/route-planning.ts
new file mode 100644
index 000000000..843129560
--- /dev/null
+++ b/packages/fake-caocao-server/src/route-planning.ts
@@ -0,0 +1,170 @@
+import type { FakeCaocaoCoordinate } from "./state";
+
+const TENCENT_DRIVING_DIRECTION_ENDPOINT = "https://apis.map.qq.com/ws/direction/v1/driving/";
+
+export type FakeCaocaoRouteKind = "PICKUP" | "DROPOFF";
+
+export type FakeCaocaoRoutePlan = {
+  coordinates: FakeCaocaoCoordinate[];
+  distanceMeters: number | null;
+  durationSeconds: number | null;
+};
+
+export type FakeCaocaoRoutePlannerInput = {
+  providerOrderId: string;
+  routeKind: FakeCaocaoRouteKind;
+  from: FakeCaocaoCoordinate;
+  to: FakeCaocaoCoordinate;
+};
+
+export type FakeCaocaoRoutePlanner = (
+  input: FakeCaocaoRoutePlannerInput,
+) => Promise<FakeCaocaoRoutePlan>;
+
+type Fetcher = (input: string | URL, init?: RequestInit) => Promise<Response>;
+
+type TencentDrivingRoutePlan = {
+  distance: number | null;
+  duration: number | null;
+  polyline: FakeCaocaoCoordinate[];
+};
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  typeof value === "object" && value !== null;
+
+const asFiniteNumber = (value: unknown): number | null =>
+  typeof value === "number" && Number.isFinite(value) ? value : null;
+
+const formatCoordinate = (coordinate: FakeCaocaoCoordinate): string =>
+  `${coordinate.latitude},${coordinate.longitude}`;
+
+export class FakeCaocaoRoutePlanningError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = "FakeCaocaoRoutePlanningError";
+  }
+}
+
+export const decompressTencentDirectionPolyline = (
+  raw: readonly number[],
+): FakeCaocaoCoordinate[] => {
+  const points = raw.map((value) => Number(value));
+  if (points.length < 2 || points.some((value) => !Number.isFinite(value))) {
+    return [];
+  }
+
+  for (let index = 2; index < points.length; index += 1) {
+    points[index] = Number(points[index - 2]) + Number(points[index]) / 1_000_000;
+  }
+
+  const coordinates: FakeCaocaoCoordinate[] = [];
+  for (let index = 0; index + 1 < points.length; index += 2) {
+    coordinates.push({
+      latitude: points[index]!,
+      longitude: points[index + 1]!,
+    });
+  }
+  return coordinates;
+};
+
+export const buildTencentDrivingDirectionUrl = ({
+  from,
+  to,
+  apiKey,
+  endpoint = TENCENT_DRIVING_DIRECTION_ENDPOINT,
+}: {
+  from: FakeCaocaoCoordinate;
+  to: FakeCaocaoCoordinate;
+  apiKey: string;
+  endpoint?: string;
+}): string => {
+  const trimmedKey = apiKey.trim();
+  if (trimmedKey.length === 0) {
+    throw new FakeCaocaoRoutePlanningError("Tencent LBS key is required");
+  }
+
+  const url = new URL(endpoint);
+  url.searchParams.set("from", formatCoordinate(from));
+  url.searchParams.set("to", formatCoordinate(to));
+  url.searchParams.set("output", "json");
+  url.searchParams.set("no_step", "1");
+  url.searchParams.set("key", trimmedKey);
+  return url.toString();
+};
+
+const parseRoute = (value: unknown): TencentDrivingRoutePlan | null => {
+  if (!isRecord(value) || !Array.isArray(value.polyline)) {
+    return null;
+  }
+
+  const rawPolyline = value.polyline.filter((point): point is number => typeof point === "number");
+  const polyline = decompressTencentDirectionPolyline(rawPolyline);
+  if (polyline.length < 2) {
+    return null;
+  }
+
+  return {
+    distance: asFiniteNumber(value.distance),
+    duration: asFiniteNumber(value.duration),
+    polyline,
+  };
+};
+
+export const parseTencentDrivingDirectionResponse = (
+  payload: unknown,
+): TencentDrivingRoutePlan[] => {
+  if (!isRecord(payload)) {
+    throw new FakeCaocaoRoutePlanningError("Invalid Tencent route response.");
+  }
+
+  const status = asFiniteNumber(payload.status);
+  if (status !== 0) {
+    throw new FakeCaocaoRoutePlanningError(
+      typeof payload.message === "string" ? payload.message : "Tencent route planning failed.",
+    );
+  }
+
+  const routes = isRecord(payload.result) ? payload.result.routes : null;
+  if (!Array.isArray(routes)) {
+    return [];
+  }
+
+  return routes.map(parseRoute).filter((route): route is TencentDrivingRoutePlan => route !== null);
+};
+
+export const createTencentDrivingRoutePlanner = ({
+  apiKey,
+  fetcher = fetch,
+}: {
+  apiKey: string;
+  fetcher?: Fetcher;
+}): FakeCaocaoRoutePlanner => {
+  const trimmedKey = apiKey.trim();
+  if (trimmedKey.length === 0) {
+    throw new FakeCaocaoRoutePlanningError("Tencent LBS key is required");
+  }
+
+  return async (input) => {
+    const url = buildTencentDrivingDirectionUrl({
+      apiKey: trimmedKey,
+      from: input.from,
+      to: input.to,
+    });
+    const response = await fetcher(url);
+    if (!response.ok) {
+      throw new FakeCaocaoRoutePlanningError(
+        `Tencent route planning request failed with HTTP ${response.status}.`,
+      );
+    }
+    const plans = parseTencentDrivingDirectionResponse((await response.json()) as unknown);
+    const primary = plans[0];
+    if (!primary) {
+      throw new FakeCaocaoRoutePlanningError("Tencent route planning returned no usable route.");
+    }
+    return {
+      coordinates: primary.polyline,
+      distanceMeters: primary.distance,
+      durationSeconds: primary.duration,
+    };
+  };
+};
diff --git a/packages/fake-caocao-server/src/routes.ts b/packages/fake-caocao-server/src/routes.ts
index c0ba7e649..9868e0415 100644
--- a/packages/fake-caocao-server/src/routes.ts
+++ b/packages/fake-caocao-server/src/routes.ts
@@ -1,5 +1,12 @@
 import type { IncomingMessage, ServerResponse } from "node:http";
 import type { FakeCaocaoFixture } from "./fixtures";
+import {
+  bearingDegrees,
+  type FakeCaocaoMovementSnapshot,
+  movementSnapshotFromRoute,
+  polylineLengthMeters,
+} from "./movement";
+import type { FakeCaocaoRouteKind, FakeCaocaoRoutePlanner } from "./route-planning";
 import {
   createFakeCaocaoSignature,
   type FakeCaocaoSignedParams,
@@ -16,6 +23,7 @@ import type {
 
 export type FakeCaocaoRouteInput = {
   fixture: FakeCaocaoFixture;
+  routePlanner?: FakeCaocaoRoutePlanner | null;
   state: FakeCaocaoState;
   verifyRequests: boolean;
 };
@@ -169,6 +177,12 @@ const defaultDriverLocation = (): FakeCaocaoCoordinate => ({
   longitude: 120.1608,
 });
 
+const ACTIVE_MOVEMENT_POLL_INTERVAL_SECONDS = 2;
+const ACTIVE_MOVEMENT_TIME_SCALE = 4;
+const ACTIVE_MOVEMENT_MAX_PROGRESS_RATIO = 0.94;
+const PICKUP_SPEED_KPH = 28;
+const IN_TRIP_SPEED_KPH = 36;
+
 const interpolateCoordinate = (
   from: FakeCaocaoCoordinate,
   to: FakeCaocaoCoordinate,
@@ -178,24 +192,209 @@ const interpolateCoordinate = (
   longitude: from.longitude + (to.longitude - from.longitude) * ratio,
 });
 
-const driverCoordinate = (order: FakeCaocaoOrderState | null): FakeCaocaoCoordinate => {
-  if (!order) return defaultDriverLocation();
-  if (order.phase === "ARRIVED_AT_PICKUP") return order.origin;
-  if (order.phase === "IN_TRIP")
-    return interpolateCoordinate(order.origin, order.destination, 0.45);
-  if (order.phase === "FINISHED") return order.destination;
-  return interpolateCoordinate(order.origin, order.destination, -0.12);
+const bendCoordinate = (
+  from: FakeCaocaoCoordinate,
+  to: FakeCaocaoCoordinate,
+  ratio: number,
+  bendRatio: number,
+): FakeCaocaoCoordinate => {
+  const base = interpolateCoordinate(from, to, ratio);
+  const latitudeSpan = to.latitude - from.latitude;
+  const longitudeSpan = to.longitude - from.longitude;
+  return {
+    latitude: base.latitude - longitudeSpan * bendRatio,
+    longitude: base.longitude + latitudeSpan * bendRatio,
+  };
+};
+
+const curvedPolyline = (input: {
+  from: FakeCaocaoCoordinate;
+  to: FakeCaocaoCoordinate;
+  bendRatio: number;
+}): FakeCaocaoCoordinate[] =>
+  [
+    [0, 0],
+    [0.16, input.bendRatio * 0.35],
+    [0.34, input.bendRatio * 0.72],
+    [0.52, input.bendRatio],
+    [0.68, input.bendRatio * 0.82],
+    [0.84, input.bendRatio * 0.42],
+    [1, 0],
+  ].map(([ratio, bendRatio]) =>
+    ratio === 0
+      ? input.from
+      : ratio === 1
+        ? input.to
+        : bendCoordinate(input.from, input.to, ratio, bendRatio),
+  );
+
+const driverStartCoordinate = (order: FakeCaocaoOrderState): FakeCaocaoCoordinate =>
+  interpolateCoordinate(order.origin, order.destination, -0.12);
+
+const fallbackPickupRoute = (order: FakeCaocaoOrderState): FakeCaocaoCoordinate[] =>
+  curvedPolyline({
+    bendRatio: 0.24,
+    from: driverStartCoordinate(order),
+    to: order.origin,
+  });
+
+const fallbackDropoffRoute = (order: FakeCaocaoOrderState): FakeCaocaoCoordinate[] =>
+  curvedPolyline({
+    bendRatio: -0.18,
+    from: order.origin,
+    to: order.destination,
+  });
+
+const fallbackRoute = (
+  order: FakeCaocaoOrderState,
+  routeKind: FakeCaocaoRouteKind,
+): FakeCaocaoCoordinate[] =>
+  routeKind === "PICKUP" ? fallbackPickupRoute(order) : fallbackDropoffRoute(order);
+
+const movementRouteKind = (order: FakeCaocaoOrderState): FakeCaocaoRouteKind => {
+  if (order.phase === "IN_TRIP" || order.phase === "FINISHED") return "DROPOFF";
+  return "PICKUP";
 };
 
-const driverSnapshot = (order: FakeCaocaoOrderState | null = null): FakeCaocaoDriverSnapshot => {
-  const coordinate = driverCoordinate(order);
+const resolveMovementRoute = async (input: {
+  order: FakeCaocaoOrderState;
+  routeKind: FakeCaocaoRouteKind;
+  routePlanner?: FakeCaocaoRoutePlanner | null;
+  state: FakeCaocaoState;
+}): Promise<FakeCaocaoCoordinate[]> => {
+  const cached = input.state.findRoutePlan(input.order.providerOrderId, input.routeKind);
+  if (cached) return cached;
+
+  const fallback = fallbackRoute(input.order, input.routeKind);
+  if (!input.routePlanner) return fallback;
+
+  const from = fallback[0];
+  const to = fallback[fallback.length - 1];
+  if (!from || !to) return fallback;
+
+  try {
+    const plan = await input.routePlanner({
+      from,
+      providerOrderId: input.order.providerOrderId,
+      routeKind: input.routeKind,
+      to,
+    });
+    if (plan.coordinates.length >= 2) {
+      input.state.cacheRoutePlan({
+        coordinates: plan.coordinates,
+        providerOrderId: input.order.providerOrderId,
+        routeKind: input.routeKind,
+      });
+      return plan.coordinates;
+    }
+  } catch {
+    return fallback;
+  }
+
+  return fallback;
+};
+
+const movementSpeedKph = (order: FakeCaocaoOrderState): number =>
+  order.phase === "IN_TRIP" ? IN_TRIP_SPEED_KPH : PICKUP_SPEED_KPH;
+
+const activeMovementDistanceMeters = (
+  order: FakeCaocaoOrderState,
+  route: readonly FakeCaocaoCoordinate[],
+): number => {
+  const routeLengthMeters = polylineLengthMeters(route);
+  const scaledSeconds =
+    order.queryCount * ACTIVE_MOVEMENT_POLL_INTERVAL_SECONDS * ACTIVE_MOVEMENT_TIME_SCALE;
+  const speedMetersPerSecond = movementSpeedKph(order) / 3.6;
+  return Math.min(
+    speedMetersPerSecond * scaledSeconds,
+    routeLengthMeters * ACTIVE_MOVEMENT_MAX_PROGRESS_RATIO,
+  );
+};
+
+const terminalRouteHeading = (route: readonly FakeCaocaoCoordinate[]): number => {
+  const destination = route[route.length - 1];
+  const previous = route[route.length - 2];
+  return destination && previous ? bearingDegrees(previous, destination) : 0;
+};
+
+const stationaryMovementSnapshot = (input: {
+  coordinate: FakeCaocaoCoordinate;
+  headingDegrees: number;
+}): FakeCaocaoMovementSnapshot => ({
+  coordinate: input.coordinate,
+  headingDegrees: input.headingDegrees,
+  remainingDistanceMeters: 0,
+  remainingRoute: [],
+});
+
+const movementSnapshot = (
+  order: FakeCaocaoOrderState | null,
+  plannedRoute?: readonly FakeCaocaoCoordinate[] | null,
+): FakeCaocaoMovementSnapshot => {
+  if (!order) {
+    return stationaryMovementSnapshot({
+      coordinate: defaultDriverLocation(),
+      headingDegrees: 0,
+    });
+  }
+
+  if (order.phase === "ACCEPTED") {
+    const route = plannedRoute ?? fallbackPickupRoute(order);
+    return movementSnapshotFromRoute({
+      distanceAlongRouteMeters: activeMovementDistanceMeters(order, route),
+      fallbackHeadingDegrees: terminalRouteHeading(route),
+      route,
+    });
+  }
+
+  if (order.phase === "ARRIVED_AT_PICKUP") {
+    return stationaryMovementSnapshot({
+      coordinate: order.origin,
+      headingDegrees: terminalRouteHeading(plannedRoute ?? fallbackPickupRoute(order)),
+    });
+  }
+
+  if (order.phase === "IN_TRIP") {
+    const route = plannedRoute ?? fallbackDropoffRoute(order);
+    return movementSnapshotFromRoute({
+      distanceAlongRouteMeters: activeMovementDistanceMeters(order, route),
+      fallbackHeadingDegrees: terminalRouteHeading(route),
+      route,
+    });
+  }
+
+  if (order.phase === "FINISHED") {
+    return stationaryMovementSnapshot({
+      coordinate: order.destination,
+      headingDegrees: terminalRouteHeading(plannedRoute ?? fallbackDropoffRoute(order)),
+    });
+  }
+
+  const route = plannedRoute ?? fallbackPickupRoute(order);
+  return movementSnapshotFromRoute({
+    fallbackHeadingDegrees: terminalRouteHeading(route),
+    progressRatio: 0,
+    route,
+  });
+};
+
+const driverSnapshot = (
+  order: FakeCaocaoOrderState | null = null,
+  plannedRoute?: readonly FakeCaocaoCoordinate[] | null,
+): FakeCaocaoDriverSnapshot => {
+  const snapshot = movementSnapshot(order, plannedRoute);
   return {
     driverName: "曹操测试司机",
     driverPhone: "13900139000",
-    direction: order?.phase === "IN_TRIP" ? 88 : 15,
-    latitude: coordinate.latitude,
-    longitude: coordinate.longitude,
-    speedKph: order?.phase === "ARRIVED_AT_PICKUP" ? 0 : 28,
+    direction: snapshot.headingDegrees,
+    latitude: snapshot.coordinate.latitude,
+    longitude: snapshot.coordinate.longitude,
+    speedKph:
+      order?.phase === "ACCEPTED" || order?.phase === "IN_TRIP"
+        ? order.phase === "IN_TRIP"
+          ? 36
+          : 28
+        : 0,
     vehicleBrand: "几何",
     vehicleColor: "白色",
     vehiclePlate: "浙A·TEST",
@@ -237,16 +436,12 @@ const readOptionalCoordinateParam = (
   return { latitude, longitude };
 };
 
-const routePolyline = (order: FakeCaocaoOrderState): FakeCaocaoCoordinate[] => {
-  if (order.phase === "ACCEPTED") {
-    return [driverCoordinate(order), order.origin];
-  }
-  if (order.phase === "IN_TRIP") {
-    return [
-      driverCoordinate(order),
-      interpolateCoordinate(order.origin, order.destination, 0.72),
-      order.destination,
-    ];
+const routePolyline = (
+  order: FakeCaocaoOrderState,
+  plannedRoute: readonly FakeCaocaoCoordinate[],
+): FakeCaocaoCoordinate[] => {
+  if (order.phase === "ACCEPTED" || order.phase === "IN_TRIP") {
+    return movementSnapshot(order, plannedRoute).remainingRoute;
   }
   return [];
 };
@@ -261,8 +456,24 @@ const navigationPolylineType = (order: FakeCaocaoOrderState): number => {
   return 2;
 };
 
-const driverLocationPayload = (order: FakeCaocaoOrderState): unknown => {
-  const driver = driverSnapshot(order);
+const expectedNavigationPolylineRequestType = (order: FakeCaocaoOrderState): number | null => {
+  if (order.phase === "ACCEPTED" || order.phase === "ARRIVED_AT_PICKUP") return 1;
+  if (order.phase === "IN_TRIP") return 3;
+  return null;
+};
+
+const readNavigationPolylineRequestType = (params: Record<string, string>): number | null => {
+  const raw = readFirstParam(params, ["navigation_polyline_type", "navigationPolylineType"]);
+  if (!raw) return null;
+  const parsed = Number(raw);
+  return Number.isInteger(parsed) ? parsed : null;
+};
+
+const driverLocationPayload = (
+  order: FakeCaocaoOrderState,
+  plannedRoute: readonly FakeCaocaoCoordinate[],
+): unknown => {
+  const driver = driverSnapshot(order, plannedRoute);
   return {
     direction: driver.direction,
     latitude: driver.latitude,
@@ -271,20 +482,27 @@ const driverLocationPayload = (order: FakeCaocaoOrderState): unknown => {
   };
 };
 
-const driverPolylinePayload = (order: FakeCaocaoOrderState): unknown => {
-  const polyline = routePolyline(order);
-  const driver = driverSnapshot(order);
+const driverPolylinePayload = (
+  order: FakeCaocaoOrderState,
+  plannedRoute: readonly FakeCaocaoCoordinate[],
+): unknown => {
+  const polyline = routePolyline(order, plannedRoute);
+  const driver = driverSnapshot(order, plannedRoute);
+  const remainingDistanceMeters = Math.round(polylineLengthMeters(polyline));
+  const speedKph = driver.speedKph > 0 ? driver.speedKph : 28;
+  const remainingDurationSeconds =
+    remainingDistanceMeters > 0 ? Math.round(remainingDistanceMeters / (speedKph / 3.6)) : 0;
   return {
-    allLength: order.phase === "ACCEPTED" ? 820 : order.phase === "IN_TRIP" ? 4300 : 0,
-    allTime: order.phase === "ACCEPTED" ? 240 : order.phase === "IN_TRIP" ? 900 : 0,
+    allLength: remainingDistanceMeters,
+    allTime: remainingDurationSeconds,
     driverEtaInfoVO: {
       direction: driver.direction,
       isMatchNaviPath: 1,
       lat: driver.latitude,
       lng: driver.longitude,
-      remainDistance: order.phase === "ACCEPTED" ? 820 : order.phase === "IN_TRIP" ? 4300 : 0,
+      remainDistance: remainingDistanceMeters,
       remainLightCount: order.phase === "IN_TRIP" ? 3 : 0,
-      remainTime: order.phase === "ACCEPTED" ? 240 : order.phase === "IN_TRIP" ? 900 : 0,
+      remainTime: remainingDurationSeconds,
       speed: driver.speedKph,
       timestamp: String(Date.now()),
     },
@@ -299,11 +517,11 @@ const driverPolylinePayload = (order: FakeCaocaoOrderState): unknown => {
               links: [
                 {
                   coords: formatRouteCoordinates(polyline),
-                  length: order.phase === "ACCEPTED" ? 820 : 4300,
-                  time: order.phase === "ACCEPTED" ? 240 : 900,
+                  length: remainingDistanceMeters,
+                  time: remainingDurationSeconds,
                 },
               ],
-              time: order.phase === "ACCEPTED" ? 240 : 900,
+              time: remainingDurationSeconds,
             },
           ]
         : [],
@@ -425,27 +643,112 @@ const buildCallbackForm = (input: {
   });
 };
 
+type FakeCaocaoCallbackDelivery =
+  | {
+      ok: true;
+      skipped: true;
+      callbackUrl: null;
+      message: string;
+    }
+  | {
+      ok: true;
+      skipped: false;
+      callbackUrl: string;
+      status: number;
+      statusText: string;
+      bodyPreview: string | null;
+    }
+  | {
+      ok: false;
+      skipped: false;
+      callbackUrl: string;
+      status: number | null;
+      statusText: string | null;
+      message: string;
+      bodyPreview: string | null;
+    };
+
+class FakeCaocaoCallbackDeliveryError extends Error {
+  readonly delivery: Extract<FakeCaocaoCallbackDelivery, { ok: false }>;
+  readonly order: FakeCaocaoOrderState;
+
+  constructor(
+    delivery: Extract<FakeCaocaoCallbackDelivery, { ok: false }>,
+    order: FakeCaocaoOrderState,
+  ) {
+    super(delivery.message);
+    this.delivery = delivery;
+    this.order = order;
+  }
+}
+
+const readResponseBodyPreview = async (response: Response): Promise<string | null> => {
+  const body = await response.text().catch(() => "");
+  const trimmed = body.trim();
+  if (!trimmed) return null;
+  return trimmed.length > 500 ? `${trimmed.slice(0, 500)}...` : trimmed;
+};
+
 const postCallback = async (input: {
   callbackUrl: string;
   fixture: FakeCaocaoFixture;
   order: FakeCaocaoOrderState;
   event: number;
-}): Promise<void> => {
-  await fetch(input.callbackUrl, {
-    body: buildCallbackForm(input).toString(),
-    headers: {
-      "Content-Type": "application/x-www-form-urlencoded",
-    },
-    method: "POST",
-  });
+}): Promise<FakeCaocaoCallbackDelivery> => {
+  try {
+    const response = await fetch(input.callbackUrl, {
+      body: buildCallbackForm(input).toString(),
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+      method: "POST",
+    });
+    const bodyPreview = await readResponseBodyPreview(response);
+    if (response.ok) {
+      return {
+        bodyPreview,
+        callbackUrl: input.callbackUrl,
+        ok: true,
+        skipped: false,
+        status: response.status,
+        statusText: response.statusText,
+      };
+    }
+    return {
+      bodyPreview,
+      callbackUrl: input.callbackUrl,
+      message: `Fake Caocao callback POST failed with HTTP ${response.status}`,
+      ok: false,
+      skipped: false,
+      status: response.status,
+      statusText: response.statusText,
+    };
+  } catch (error) {
+    return {
+      bodyPreview: null,
+      callbackUrl: input.callbackUrl,
+      message: error instanceof Error ? error.message : "Fake Caocao callback POST failed",
+      ok: false,
+      skipped: false,
+      status: null,
+      statusText: null,
+    };
+  }
 };
 
 const postOrderPhaseCallback = async (input: {
   fixture: FakeCaocaoFixture;
   order: FakeCaocaoOrderState;
-}): Promise<void> => {
-  if (!input.order.callbackUrl) return;
-  await postCallback({
+}): Promise<FakeCaocaoCallbackDelivery> => {
+  if (!input.order.callbackUrl) {
+    return {
+      callbackUrl: null,
+      message: "No callback URL configured",
+      ok: true,
+      skipped: true,
+    };
+  }
+  return await postCallback({
     callbackUrl: input.order.callbackUrl,
     event: phaseEvent(input.order.phase),
     fixture: input.fixture,
@@ -453,6 +756,14 @@ const postOrderPhaseCallback = async (input: {
   });
 };
 
+const assertCallbackDelivered = (
+  delivery: FakeCaocaoCallbackDelivery,
+  order: FakeCaocaoOrderState,
+): void => {
+  if (delivery.ok) return;
+  throw new FakeCaocaoCallbackDeliveryError(delivery, order);
+};
+
 const maybePostCreateCallback = (input: {
   callbackUrl: string | null;
   fixture: FakeCaocaoFixture;
@@ -556,11 +867,31 @@ export async function handleFakeCaocaoRequest(
         });
         return;
       }
-      await postOrderPhaseCallback({
+      const callback = await postOrderPhaseCallback({
         fixture: input.fixture,
         order,
       });
-      sendJson(res, 200, { ok: true, order });
+      assertCallbackDelivered(callback, order);
+      sendJson(res, 200, { callback, ok: true, order });
+      return;
+    }
+
+    if (url.pathname === "/__fake_caocao/orders/latest/retreat" && req.method === "POST") {
+      await readBodyText(req);
+      const order = input.state.retreatLatestOrder();
+      if (!order) {
+        sendJson(res, 404, {
+          code: "FAKE_CAOCAO_ORDER_NOT_FOUND",
+          message: "No retreatable fake Caocao order found",
+        });
+        return;
+      }
+      const callback = await postOrderPhaseCallback({
+        fixture: input.fixture,
+        order,
+      });
+      assertCallbackDelivered(callback, order);
+      sendJson(res, 200, { callback, ok: true, order });
       return;
     }
 
@@ -575,11 +906,41 @@ export async function handleFakeCaocaoRequest(
         });
         return;
       }
-      await postOrderPhaseCallback({
+      const callback = await postOrderPhaseCallback({
         fixture: input.fixture,
         order,
       });
-      sendJson(res, 200, { ok: true, order });
+      assertCallbackDelivered(callback, order);
+      sendJson(res, 200, { callback, ok: true, order });
+      return;
+    }
+
+    const orderRetreatMatch = url.pathname.match(/^\/__fake_caocao\/orders\/([^/]+)\/retreat$/);
+    if (orderRetreatMatch && req.method === "POST") {
+      await readBodyText(req);
+      const providerOrderId = decodeURIComponent(orderRetreatMatch[1]!);
+      const existingOrder = input.state.findOrder(providerOrderId);
+      if (!existingOrder) {
+        sendJson(res, 404, {
+          code: "FAKE_CAOCAO_ORDER_NOT_FOUND",
+          message: "Fake Caocao order not found",
+        });
+        return;
+      }
+      const order = input.state.retreatOrderPhase(providerOrderId);
+      if (!order) {
+        sendJson(res, 409, {
+          code: "FAKE_CAOCAO_ORDER_PHASE_NOT_RETREATABLE",
+          message: `Fake Caocao order phase cannot retreat: ${existingOrder.phase}`,
+        });
+        return;
+      }
+      const callback = await postOrderPhaseCallback({
+        fixture: input.fixture,
+        order,
+      });
+      assertCallbackDelivered(callback, order);
+      sendJson(res, 200, { callback, ok: true, order });
       return;
     }
 
@@ -602,11 +963,12 @@ export async function handleFakeCaocaoRequest(
         });
         return;
       }
-      await postOrderPhaseCallback({
+      const callback = await postOrderPhaseCallback({
         fixture: input.fixture,
         order,
       });
-      sendJson(res, 200, { ok: true, order });
+      assertCallbackDelivered(callback, order);
+      sendJson(res, 200, { callback, ok: true, order });
       return;
     }
 
@@ -694,11 +1056,19 @@ export async function handleFakeCaocaoRequest(
     if (url.pathname === "/common/queryDriverLocationByOrderId") {
       const providerOrderId = readFirstParam(params, ["order_id", "order_no"]);
       const order = providerOrderId ? input.state.findOrder(providerOrderId) : null;
+      const plannedRoute = order
+        ? await resolveMovementRoute({
+            order,
+            routeKind: movementRouteKind(order),
+            routePlanner: input.routePlanner,
+            state: input.state,
+          })
+        : null;
       sendJson(
         res,
         200,
         order
-          ? caocaoSuccess(driverLocationPayload(order))
+          ? caocaoSuccess(driverLocationPayload(order, plannedRoute ?? fallbackPickupRoute(order)))
           : caocaoFailure(40401, "Fake Caocao order not found"),
       );
       return;
@@ -707,13 +1077,32 @@ export async function handleFakeCaocaoRequest(
     if (url.pathname === "/common/queryDriverPolylineV2" && req.method === "POST") {
       const providerOrderId = readFirstParam(params, ["order_id", "order_no"]);
       const order = providerOrderId ? input.state.findOrder(providerOrderId) : null;
-      sendJson(
-        res,
-        200,
-        order
-          ? caocaoSuccess(driverPolylinePayload(order))
-          : caocaoFailure(40401, "Fake Caocao order not found"),
-      );
+      const requestedRouteType = readNavigationPolylineRequestType(params);
+      const expectedRouteType = order ? expectedNavigationPolylineRequestType(order) : null;
+      if (!order) {
+        sendJson(res, 200, caocaoFailure(40401, "Fake Caocao order not found"));
+        return;
+      }
+      if (requestedRouteType === null) {
+        sendJson(res, 200, caocaoFailure(40001, "Missing fake Caocao navigation_polyline_type"));
+        return;
+      }
+      if (expectedRouteType === null || requestedRouteType !== expectedRouteType) {
+        sendJson(res, 200, caocaoFailure(40002, "Unexpected fake Caocao navigation_polyline_type"));
+        return;
+      }
+
+      const routeKind = movementRouteKind(order);
+      const plannedRoute = await resolveMovementRoute({
+        order,
+        routeKind,
+        routePlanner: input.routePlanner,
+        state: input.state,
+      });
+      sendJson(res, 200, caocaoSuccess(driverPolylinePayload(order, plannedRoute)));
+      if (order.phase === "ACCEPTED" || order.phase === "IN_TRIP") {
+        input.state.advanceOrderMovement(order.providerOrderId);
+      }
       return;
     }
 
@@ -769,6 +1158,15 @@ export async function handleFakeCaocaoRequest(
       message: `Unknown fake Caocao route: ${url.pathname}`,
     });
   } catch (error) {
+    if (error instanceof FakeCaocaoCallbackDeliveryError) {
+      sendJson(res, 502, {
+        callback: error.delivery,
+        code: "FAKE_CAOCAO_CALLBACK_DELIVERY_FAILED",
+        message: error.message,
+        order: error.order,
+      });
+      return;
+    }
     sendJson(res, 400, {
       code: "FAKE_CAOCAO_ERROR",
       message: error instanceof Error ? error.message : "Unknown fake error",
diff --git a/packages/fake-caocao-server/src/server.test.ts b/packages/fake-caocao-server/src/server.test.ts
index b82624cf8..032841f0d 100644
--- a/packages/fake-caocao-server/src/server.test.ts
+++ b/packages/fake-caocao-server/src/server.test.ts
@@ -1,3 +1,5 @@
+import { createServer, type Server } from "node:http";
+import type { AddressInfo } from "node:net";
 import { afterEach, describe, expect, test } from "vitest";
 import { type StartedFakeCaocaoServer, startFakeCaocaoServer } from "./server";
 import { createFakeCaocaoSignature } from "./signature";
@@ -20,6 +22,83 @@ const signedSearchParams = (input: {
   });
 };
 
+const closeServer = (server: Server): Promise<void> =>
+  new Promise((resolve, reject) => {
+    server.close((error) => {
+      if (error) {
+        reject(error);
+        return;
+      }
+      resolve();
+    });
+  });
+
+const countPolylineCoordinates = (coords: string | undefined): number =>
+  coords
+    ?.split(";")
+    .map((item) => item.trim())
+    .filter((item) => item.length > 0).length ?? 0;
+
+const parsePolylineCoordinates = (
+  coords: string | undefined,
+): Array<{ latitude: number; longitude: number }> =>
+  coords
+    ?.split(";")
+    .map((item) => item.trim())
+    .filter((item) => item.length > 0)
+    .map((item) => {
+      const [latitudeRaw, longitudeRaw] = item.split(",");
+      return {
+        latitude: Number(latitudeRaw),
+        longitude: Number(longitudeRaw),
+      };
+    }) ?? [];
+
+const coordinateDelta = (
+  first: { latitude: number; longitude: number },
+  second: { latitude: number; longitude: number },
+): number =>
+  Math.abs(first.latitude - second.latitude) + Math.abs(first.longitude - second.longitude);
+
+const startCallbackResponseServer = async (input: {
+  body: string;
+  status: number;
+}): Promise<{
+  readonly origin: string;
+  readonly receivedBodies: string[];
+  close(): Promise<void>;
+}> => {
+  const receivedBodies: string[] = [];
+  const server = createServer((req, res) => {
+    let body = "";
+    req.setEncoding("utf8");
+    req.on("data", (chunk: string) => {
+      body += chunk;
+    });
+    req.on("end", () => {
+      receivedBodies.push(body);
+      res.writeHead(input.status, { "Content-Type": "application/json; charset=utf-8" });
+      res.end(input.body);
+    });
+  });
+
+  await new Promise<void>((resolve, reject) => {
+    server.once("error", reject);
+    server.listen(0, "127.0.0.1", resolve);
+  });
+
+  const address = server.address();
+  if (!address || typeof address === "string") {
+    throw new Error("Callback response server did not expose a TCP address");
+  }
+
+  return {
+    close: () => closeServer(server),
+    origin: `http://127.0.0.1:${(address as AddressInfo).port}`,
+    receivedBodies,
+  };
+};
+
 describe("startFakeCaocaoServer", () => {
   let server: StartedFakeCaocaoServer | null = null;
 
@@ -159,11 +238,13 @@ describe("startFakeCaocaoServer", () => {
     expect(driverLocationBody.success).toBe(true);
     expect(driverLocationBody.data.latitude).toBeTypeOf("number");
     expect(driverLocationBody.data.longitude).toBeTypeOf("number");
+    expect(driverLocationBody.data.direction).toBeTypeOf("number");
 
     const driverPolylineResponse = await fetch(`${server.origin}/common/queryDriverPolylineV2`, {
       body: signedSearchParams({
         clientId: server.fixture.clientId,
         params: {
+          navigation_polyline_type: "1",
           order_id: createBody.data.orderNo,
           timestamp: "3-driver-polyline",
         },
@@ -177,7 +258,7 @@ describe("startFakeCaocaoServer", () => {
     const driverPolylineBody = (await driverPolylineResponse.json()) as {
       code: number;
       data: {
-        driverEtaInfoVO: { lat: number; lng: number };
+        driverEtaInfoVO: { direction: number; lat: number; lng: number };
         navigationPolylineType: number;
         steps: Array<{ links: Array<{ coords: string }> }>;
       };
@@ -188,6 +269,148 @@ describe("startFakeCaocaoServer", () => {
     expect(driverPolylineBody.success).toBe(true);
     expect(driverPolylineBody.data.navigationPolylineType).toBe(1);
     expect(driverPolylineBody.data.steps[0]?.links[0]?.coords).toContain(";");
+    expect(
+      countPolylineCoordinates(driverPolylineBody.data.steps[0]?.links[0]?.coords),
+    ).toBeGreaterThan(2);
+    const pickupRoute = parsePolylineCoordinates(
+      driverPolylineBody.data.steps[0]?.links[0]?.coords,
+    );
+    expect(pickupRoute[0]?.latitude).toBeCloseTo(driverLocationBody.data.latitude, 6);
+    expect(pickupRoute[0]?.longitude).toBeCloseTo(driverLocationBody.data.longitude, 6);
+    expect(driverPolylineBody.data.driverEtaInfoVO.lat).toBeCloseTo(
+      driverLocationBody.data.latitude,
+      6,
+    );
+    expect(driverPolylineBody.data.driverEtaInfoVO.lng).toBeCloseTo(
+      driverLocationBody.data.longitude,
+      6,
+    );
+
+    const advancedDriverLocationResponse = await fetch(
+      `${server.origin}/common/queryDriverLocationByOrderId?${signedSearchParams({
+        clientId: server.fixture.clientId,
+        params: {
+          order_id: createBody.data.orderNo,
+          timestamp: "3-driver-location-after-route",
+        },
+        signKey: server.fixture.signKey,
+      }).toString()}`,
+    );
+    const advancedDriverLocationBody = (await advancedDriverLocationResponse.json()) as {
+      data: { direction: number; latitude: number; longitude: number };
+      success: boolean;
+    };
+    expect(advancedDriverLocationBody.success).toBe(true);
+    expect(
+      coordinateDelta(driverLocationBody.data, advancedDriverLocationBody.data),
+    ).toBeGreaterThan(0.00001);
+
+    const missingNavigationTypeResponse = await fetch(
+      `${server.origin}/common/queryDriverPolylineV2`,
+      {
+        body: signedSearchParams({
+          clientId: server.fixture.clientId,
+          params: {
+            order_id: createBody.data.orderNo,
+            timestamp: "3-driver-polyline-missing-type",
+          },
+          signKey: server.fixture.signKey,
+        }).toString(),
+        headers: {
+          "Content-Type": "application/x-www-form-urlencoded",
+        },
+        method: "POST",
+      },
+    );
+    const missingNavigationTypeBody = (await missingNavigationTypeResponse.json()) as {
+      code: number;
+      success: boolean;
+    };
+    expect(missingNavigationTypeResponse.ok).toBe(true);
+    expect(missingNavigationTypeBody.success).toBe(false);
+    expect(missingNavigationTypeBody.code).toBe(40001);
+
+    const arrivedPhaseResponse = await fetch(
+      `${server.origin}/__fake_caocao/orders/${createBody.data.orderNo}/advance`,
+      {
+        method: "POST",
+      },
+    );
+    const arrivedPhaseBody = (await arrivedPhaseResponse.json()) as {
+      ok: boolean;
+      order: { phase: string };
+    };
+    expect(arrivedPhaseResponse.ok).toBe(true);
+    expect(arrivedPhaseBody.ok).toBe(true);
+    expect(arrivedPhaseBody.order.phase).toBe("ARRIVED_AT_PICKUP");
+
+    const inTripPhaseResponse = await fetch(
+      `${server.origin}/__fake_caocao/orders/${createBody.data.orderNo}/advance`,
+      {
+        method: "POST",
+      },
+    );
+    const inTripPhaseBody = (await inTripPhaseResponse.json()) as {
+      ok: boolean;
+      order: { phase: string };
+    };
+
+    expect(inTripPhaseResponse.ok).toBe(true);
+    expect(inTripPhaseBody.ok).toBe(true);
+    expect(inTripPhaseBody.order.phase).toBe("IN_TRIP");
+
+    const inTripDriverLocationResponse = await fetch(
+      `${server.origin}/common/queryDriverLocationByOrderId?${signedSearchParams({
+        clientId: server.fixture.clientId,
+        params: {
+          order_id: createBody.data.orderNo,
+          timestamp: "3-driver-location-in-trip",
+        },
+        signKey: server.fixture.signKey,
+      }).toString()}`,
+    );
+    const inTripDriverLocationBody = (await inTripDriverLocationResponse.json()) as {
+      data: { direction: number; latitude: number; longitude: number };
+      success: boolean;
+    };
+    expect(inTripDriverLocationBody.success).toBe(true);
+
+    const inTripPolylineResponse = await fetch(`${server.origin}/common/queryDriverPolylineV2`, {
+      body: signedSearchParams({
+        clientId: server.fixture.clientId,
+        params: {
+          navigation_polyline_type: "3",
+          order_id: createBody.data.orderNo,
+          timestamp: "3-driver-polyline-in-trip",
+        },
+        signKey: server.fixture.signKey,
+      }).toString(),
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+      method: "POST",
+    });
+    const inTripPolylineBody = (await inTripPolylineResponse.json()) as {
+      code: number;
+      data: {
+        driverEtaInfoVO: { direction: number; lat: number; lng: number };
+        navigationPolylineType: number;
+        steps: Array<{ links: Array<{ coords: string }> }>;
+      };
+      success: boolean;
+    };
+
+    expect(inTripPolylineResponse.ok).toBe(true);
+    expect(inTripPolylineBody.success).toBe(true);
+    expect(inTripPolylineBody.data.navigationPolylineType).toBe(3);
+    expect(
+      countPolylineCoordinates(inTripPolylineBody.data.steps[0]?.links[0]?.coords),
+    ).toBeGreaterThan(2);
+    const inTripRoute = parsePolylineCoordinates(
+      inTripPolylineBody.data.steps[0]?.links[0]?.coords,
+    );
+    expect(inTripRoute[0]?.latitude).toBeCloseTo(inTripDriverLocationBody.data.latitude, 6);
+    expect(inTripRoute[0]?.longitude).toBeCloseTo(inTripDriverLocationBody.data.longitude, 6);
 
     const invalidPhaseResponse = await fetch(
       `${server.origin}/__fake_caocao/orders/${createBody.data.orderNo}/phase?phase=BOARDING`,
@@ -204,6 +427,194 @@ describe("startFakeCaocaoServer", () => {
     expect(invalidPhaseBody.code).toBe("FAKE_CAOCAO_UNSUPPORTED_ORDER_PHASE");
   });
 
+  test("supports admin retreat controls", async () => {
+    server = await startFakeCaocaoServer();
+
+    const created = server.state.createOrder({
+      carType: "EXPRESS",
+      externalOrderId: "external-order-retreat",
+    });
+    server.state.setOrderPhase(created.providerOrderId, "ARRIVED_AT_PICKUP");
+
+    const retreatResponse = await fetch(`${server.origin}/__fake_caocao/orders/latest/retreat`, {
+      method: "POST",
+    });
+    const retreatBody = (await retreatResponse.json()) as {
+      callback: { skipped: boolean };
+      ok: boolean;
+      order: { phase: string; providerOrderId: string };
+    };
+
+    expect(retreatResponse.ok).toBe(true);
+    expect(retreatBody.ok).toBe(true);
+    expect(retreatBody.callback.skipped).toBe(true);
+    expect(retreatBody.order.providerOrderId).toBe(created.providerOrderId);
+    expect(retreatBody.order.phase).toBe("ACCEPTED");
+
+    const secondRetreatResponse = await fetch(
+      `${server.origin}/__fake_caocao/orders/${created.providerOrderId}/retreat`,
+      { method: "POST" },
+    );
+    const secondRetreatBody = (await secondRetreatResponse.json()) as {
+      order: { phase: string; providerOrderId: string };
+    };
+
+    expect(secondRetreatResponse.ok).toBe(true);
+    expect(secondRetreatBody.order.phase).toBe("CREATED");
+
+    const nonRetreatableResponse = await fetch(
+      `${server.origin}/__fake_caocao/orders/${created.providerOrderId}/retreat`,
+      { method: "POST" },
+    );
+    const nonRetreatableBody = (await nonRetreatableResponse.json()) as {
+      code: string;
+    };
+
+    expect(nonRetreatableResponse.status).toBe(409);
+    expect(nonRetreatableBody.code).toBe("FAKE_CAOCAO_ORDER_PHASE_NOT_RETREATABLE");
+  });
+
+  test("uses cached planned routes for driver movement geometry", async () => {
+    const plannerCalls: Array<{
+      routeKind: string;
+      from: { latitude: number; longitude: number };
+      to: { latitude: number; longitude: number };
+    }> = [];
+    server = await startFakeCaocaoServer({
+      routePlanner: async (input) => {
+        plannerCalls.push({
+          from: input.from,
+          routeKind: input.routeKind,
+          to: input.to,
+        });
+        return {
+          coordinates: [
+            input.from,
+            { latitude: input.from.latitude + 0.03, longitude: input.from.longitude + 0.001 },
+            { latitude: input.to.latitude - 0.01, longitude: input.to.longitude - 0.02 },
+            input.to,
+          ],
+          distanceMeters: 4200,
+          durationSeconds: 900,
+        };
+      },
+    });
+
+    const created = server.state.createOrder({
+      carType: "EXPRESS",
+      destination: { latitude: 30.35, longitude: 120.3 },
+      externalOrderId: "external-order-planned-route",
+      origin: { latitude: 30.25, longitude: 120.2 },
+    });
+    server.state.setOrderPhase(created.providerOrderId, "IN_TRIP");
+
+    const firstResponse = await fetch(`${server.origin}/common/queryDriverPolylineV2`, {
+      body: signedSearchParams({
+        clientId: server.fixture.clientId,
+        params: {
+          navigation_polyline_type: "3",
+          order_id: created.providerOrderId,
+          timestamp: "planned-route-1",
+        },
+        signKey: server.fixture.signKey,
+      }).toString(),
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+      method: "POST",
+    });
+    const firstBody = (await firstResponse.json()) as {
+      data: {
+        steps: Array<{ links: Array<{ coords: string }> }>;
+      };
+      success: boolean;
+    };
+    const firstRoute = parsePolylineCoordinates(firstBody.data.steps[0]?.links[0]?.coords);
+
+    expect(firstBody.success).toBe(true);
+    expect(plannerCalls).toHaveLength(1);
+    expect(plannerCalls[0]?.routeKind).toBe("DROPOFF");
+    expect(firstRoute).toHaveLength(4);
+    expect(firstRoute[1]?.latitude).toBeCloseTo(30.28, 6);
+    expect(firstRoute[1]?.longitude).toBeCloseTo(120.201, 6);
+
+    const secondResponse = await fetch(`${server.origin}/common/queryDriverPolylineV2`, {
+      body: signedSearchParams({
+        clientId: server.fixture.clientId,
+        params: {
+          navigation_polyline_type: "3",
+          order_id: created.providerOrderId,
+          timestamp: "planned-route-2",
+        },
+        signKey: server.fixture.signKey,
+      }).toString(),
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+      method: "POST",
+    });
+    const secondBody = (await secondResponse.json()) as {
+      data: {
+        steps: Array<{ links: Array<{ coords: string }> }>;
+      };
+      success: boolean;
+    };
+    const secondRoute = parsePolylineCoordinates(secondBody.data.steps[0]?.links[0]?.coords);
+
+    expect(secondBody.success).toBe(true);
+    expect(plannerCalls).toHaveLength(1);
+    expect(firstRoute[0]).not.toEqual(secondRoute[0]);
+    expect(secondRoute.at(-1)).toEqual({
+      latitude: 30.35,
+      longitude: 120.3,
+    });
+  });
+
+  test("reports admin callback delivery failures", async () => {
+    server = await startFakeCaocaoServer();
+    const callbackServer = await startCallbackResponseServer({
+      body: JSON.stringify({ error: "backend callback rejected" }),
+      status: 503,
+    });
+
+    try {
+      const created = server.state.createOrder({
+        callbackUrl: `${callbackServer.origin}/callback`,
+        carType: "EXPRESS",
+        externalOrderId: "external-order-callback-failure",
+      });
+
+      const advanceResponse = await fetch(
+        `${server.origin}/__fake_caocao/orders/${created.providerOrderId}/advance`,
+        { method: "POST" },
+      );
+      const advanceBody = (await advanceResponse.json()) as {
+        callback: {
+          bodyPreview: string | null;
+          callbackUrl: string;
+          ok: boolean;
+          status: number | null;
+        };
+        code: string;
+        message: string;
+        order: { phase: string; providerOrderId: string };
+      };
+
+      expect(advanceResponse.status).toBe(502);
+      expect(advanceBody.code).toBe("FAKE_CAOCAO_CALLBACK_DELIVERY_FAILED");
+      expect(advanceBody.callback.ok).toBe(false);
+      expect(advanceBody.callback.callbackUrl).toBe(`${callbackServer.origin}/callback`);
+      expect(advanceBody.callback.status).toBe(503);
+      expect(advanceBody.callback.bodyPreview).toContain("backend callback rejected");
+      expect(advanceBody.order.providerOrderId).toBe(created.providerOrderId);
+      expect(advanceBody.order.phase).toBe("ACCEPTED");
+      expect(server.state.findOrder(created.providerOrderId)?.phase).toBe("ACCEPTED");
+      expect(callbackServer.receivedBodies[0]).toContain("order_id=");
+    } finally {
+      await callbackServer.close();
+    }
+  });
+
   test("supports admin estimate controls", async () => {
     server = await startFakeCaocaoServer();
 
diff --git a/packages/fake-caocao-server/src/server.ts b/packages/fake-caocao-server/src/server.ts
index defb189b2..d9fa08656 100644
--- a/packages/fake-caocao-server/src/server.ts
+++ b/packages/fake-caocao-server/src/server.ts
@@ -1,12 +1,14 @@
 import { createServer, type Server } from "node:http";
 import type { AddressInfo } from "node:net";
 import { createFakeCaocaoFixture } from "./fixtures";
+import type { FakeCaocaoRoutePlanner } from "./route-planning";
 import { handleFakeCaocaoRequest } from "./routes";
 import { FakeCaocaoState } from "./state";
 
 export type FakeCaocaoServerOptions = {
   hostname?: string;
   port?: number;
+  routePlanner?: FakeCaocaoRoutePlanner | null;
   verifyRequests?: boolean;
 };
 
@@ -37,6 +39,7 @@ export async function startFakeCaocaoServer(
   const server = createServer((req, res) => {
     void handleFakeCaocaoRequest(req, res, {
       fixture,
+      routePlanner: options.routePlanner,
       state,
       verifyRequests,
     });
diff --git a/packages/fake-caocao-server/src/state.test.ts b/packages/fake-caocao-server/src/state.test.ts
index 0637f9e74..be07069ea 100644
--- a/packages/fake-caocao-server/src/state.test.ts
+++ b/packages/fake-caocao-server/src/state.test.ts
@@ -95,4 +95,48 @@ describe("FakeCaocaoState", () => {
     expect(feeConfirm.providerOrderId).toBe(created.providerOrderId);
     expect(state.snapshot().feeConfirms).toHaveLength(1);
   });
+
+  test("retreats only phases with a deterministic previous phase", () => {
+    const state = new FakeCaocaoState();
+    const created = state.createOrder({
+      carType: "EXPRESS",
+      externalOrderId: "external-order-3",
+    });
+
+    expect(state.retreatOrderPhase(created.providerOrderId)).toBeNull();
+
+    const accepted = state.advanceOrderPhase(created.providerOrderId);
+    expect(accepted?.phase).toBe("ACCEPTED");
+
+    const retreated = state.retreatOrderPhase(created.providerOrderId);
+    expect(retreated?.phase).toBe("CREATED");
+
+    state.setOrderPhase(created.providerOrderId, "FINISHED");
+    const latestRetreated = state.retreatLatestOrder();
+    expect(latestRetreated?.phase).toBe("IN_TRIP");
+
+    state.setOrderPhase(created.providerOrderId, "CANCELLED");
+    expect(state.retreatLatestOrder()).toBeNull();
+  });
+
+  test("tracks movement ticks and resets them across phase changes", () => {
+    const state = new FakeCaocaoState();
+    const created = state.createOrder({
+      carType: "EXPRESS",
+      externalOrderId: "external-order-movement",
+    });
+
+    state.advanceOrderMovement(created.providerOrderId);
+    state.advanceOrderMovement(created.providerOrderId);
+    expect(state.findOrder(created.providerOrderId)?.queryCount).toBe(2);
+
+    state.setOrderPhase(created.providerOrderId, "ACCEPTED");
+    expect(state.findOrder(created.providerOrderId)?.queryCount).toBe(0);
+
+    state.advanceOrderMovement(created.providerOrderId);
+    expect(state.findOrder(created.providerOrderId)?.queryCount).toBe(1);
+
+    state.setOrderPhase(created.providerOrderId, "ACCEPTED");
+    expect(state.findOrder(created.providerOrderId)?.queryCount).toBe(1);
+  });
 });
diff --git a/packages/fake-caocao-server/src/state.ts b/packages/fake-caocao-server/src/state.ts
index 61a690798..97f7808f3 100644
--- a/packages/fake-caocao-server/src/state.ts
+++ b/packages/fake-caocao-server/src/state.ts
@@ -11,6 +11,8 @@ export type FakeCaocaoCoordinate = {
   longitude: number;
 };
 
+export type FakeCaocaoCachedRouteKind = "PICKUP" | "DROPOFF";
+
 export type FakeCaocaoDriverSnapshot = {
   driverName: string;
   driverPhone: string;
@@ -94,6 +96,7 @@ const defaultDestination = (): FakeCaocaoCoordinate => ({
 });
 
 const terminalOrderPhases = new Set<FakeCaocaoOrderPhase>(["FINISHED", "CANCELLED"]);
+const nonRetreatableOrderPhases = new Set<FakeCaocaoOrderPhase>(["CREATED", "CANCELLED"]);
 
 const nextOrderPhase = (phase: FakeCaocaoOrderPhase): FakeCaocaoOrderPhase => {
   if (phase === "CREATED") return "ACCEPTED";
@@ -103,11 +106,23 @@ const nextOrderPhase = (phase: FakeCaocaoOrderPhase): FakeCaocaoOrderPhase => {
   return phase;
 };
 
+const previousOrderPhase = (phase: FakeCaocaoOrderPhase): FakeCaocaoOrderPhase => {
+  if (phase === "ACCEPTED") return "CREATED";
+  if (phase === "ARRIVED_AT_PICKUP") return "ACCEPTED";
+  if (phase === "IN_TRIP") return "ARRIVED_AT_PICKUP";
+  if (phase === "FINISHED") return "IN_TRIP";
+  return phase;
+};
+
 export class FakeCaocaoState {
   private failNextCreate = false;
   private readonly estimates = new Map<string, FakeCaocaoVehicleEstimate>();
   private readonly unavailableEstimateCarTypes = new Set<string>();
   private readonly orders = new Map<string, FakeCaocaoOrderState>();
+  private readonly routePlans = new Map<
+    string,
+    Partial<Record<FakeCaocaoCachedRouteKind, FakeCaocaoCoordinate[]>>
+  >();
   private readonly feeConfirms: FakeCaocaoFeeConfirmState[] = [];
 
   constructor() {
@@ -122,6 +137,7 @@ export class FakeCaocaoState {
       this.estimates.set(estimate.carType, estimate);
     }
     this.orders.clear();
+    this.routePlans.clear();
     this.feeConfirms.length = 0;
   }
 
@@ -237,6 +253,29 @@ export class FakeCaocaoState {
     return order;
   }
 
+  findRoutePlan(
+    providerOrderId: string,
+    routeKind: FakeCaocaoCachedRouteKind,
+  ): FakeCaocaoCoordinate[] | null {
+    return this.routePlans.get(providerOrderId)?.[routeKind] ?? null;
+  }
+
+  cacheRoutePlan(input: {
+    providerOrderId: string;
+    routeKind: FakeCaocaoCachedRouteKind;
+    coordinates: readonly FakeCaocaoCoordinate[];
+  }): void {
+    const coordinates = input.coordinates.filter(
+      (point) => Number.isFinite(point.latitude) && Number.isFinite(point.longitude),
+    );
+    if (coordinates.length < 2) return;
+    const current = this.routePlans.get(input.providerOrderId) ?? {};
+    this.routePlans.set(input.providerOrderId, {
+      ...current,
+      [input.routeKind]: coordinates.map((point) => ({ ...point })),
+    });
+  }
+
   findOrder(providerOrderId: string): FakeCaocaoOrderState | null {
     return this.orders.get(providerOrderId) ?? null;
   }
@@ -248,6 +287,14 @@ export class FakeCaocaoState {
     );
   }
 
+  findLatestRetreatableOrder(): FakeCaocaoOrderState | null {
+    return (
+      [...this.orders.values()]
+        .reverse()
+        .find((order) => !nonRetreatableOrderPhases.has(order.phase)) ?? null
+    );
+  }
+
   setOrderPhase(providerOrderId: string, phase: FakeCaocaoOrderPhase): FakeCaocaoOrderState | null {
     const order = this.orders.get(providerOrderId);
     if (!order) return null;
@@ -255,6 +302,7 @@ export class FakeCaocaoState {
     const updated: FakeCaocaoOrderState = {
       ...order,
       phase,
+      queryCount: phase === order.phase ? order.queryCount : 0,
       updatedAt: nowIso(),
     };
     this.orders.set(providerOrderId, updated);
@@ -273,6 +321,30 @@ export class FakeCaocaoState {
     return this.advanceOrderPhase(order.providerOrderId);
   }
 
+  retreatOrderPhase(providerOrderId: string): FakeCaocaoOrderState | null {
+    const order = this.orders.get(providerOrderId);
+    if (!order || nonRetreatableOrderPhases.has(order.phase)) return null;
+    return this.setOrderPhase(providerOrderId, previousOrderPhase(order.phase));
+  }
+
+  retreatLatestOrder(): FakeCaocaoOrderState | null {
+    const order = this.findLatestRetreatableOrder();
+    if (!order) return null;
+    return this.retreatOrderPhase(order.providerOrderId);
+  }
+
+  advanceOrderMovement(providerOrderId: string): FakeCaocaoOrderState | null {
+    const order = this.orders.get(providerOrderId);
+    if (!order) return null;
+    const updated: FakeCaocaoOrderState = {
+      ...order,
+      queryCount: order.queryCount + 1,
+      updatedAt: nowIso(),
+    };
+    this.orders.set(providerOrderId, updated);
+    return updated;
+  }
+
   cancelOrder(providerOrderId: string): FakeCaocaoOrderState | null {
     const order = this.orders.get(providerOrderId);
     if (!order) return null;
diff --git a/tasks/ride-hailing-ui-fixes/caocao-driver-movement-mock-research.md b/tasks/ride-hailing-ui-fixes/caocao-driver-movement-mock-research.md
new file mode 100644
index 000000000..3cb25666e
--- /dev/null
+++ b/tasks/ride-hailing-ui-fixes/caocao-driver-movement-mock-research.md
@@ -0,0 +1,470 @@
+# Caocao Driver Movement Mock Research
+
+## Objective
+
+Improve RideHailing Order Detail live map reviewability by making the fake
+Caocao provider simulate driver movement along route geometry, while preserving
+Caocao API semantics.
+
+This is a separate slice from Driver Card UI corrections.
+
+## Current Trigger
+
+- Manual review still sees provider polyline rendered as a straight line.
+- The current fake provider does not simulate continuous driver movement along
+  a route.
+- The likely first risk is not "fake server should return a Tencent-specific
+  shape"; it is whether the adapter path correctly converts Caocao route data
+  into Tencent Map input.
+
+## Topology To Verify
+
+```text
+Fake Caocao / Real Caocao
+  queryDriverPolylineV2.data.steps[].links[].coords
+    "latitude,longitude;latitude,longitude"
+        |
+        v
+CaocaoProviderAdapter.parseCaocaoCoordinates
+  RideHailingProviderNavigationRoute.polyline[]
+    { latitude, longitude }
+        |
+        v
+Trade RideHailing detail projection
+  rideHailing.live.navigationRoute.polyline[]
+    { latitude, longitude }
+        |
+        v
+RideHailing order map view model
+  MapPolyline.path[]
+    { lat: latitude, lng: longitude }
+        |
+        v
+Tencent LBS provider
+  new TMap.LatLng(lat, lng)
+  MultiPolylineGeometry.paths
+```
+
+## External Contract Findings
+
+- Caocao `queryDriverPolylineV2` response documents
+  `steps[].links[].coords` as
+  `"latitude,longitude;latitude,longitude"`.
+- Caocao `queryDriverLocationByOrderId` documents driver position as separate
+  `longitude`, `latitude`, and `direction`, where `direction` is the vehicle
+  heading in degrees, 0 as north and clockwise.
+- Tencent JavaScript API GL `MultiPolyline` examples pass route path as an
+  array of `new TMap.LatLng(lat, lng)`.
+
+Implication:
+
+- Do not change fake Caocao to emit `longitude,latitude` unless a real Caocao
+  payload proves the published docs are wrong.
+- The fake server should remain provider-shaped; Tencent-specific conversion
+  belongs in frontend map adapter code, not fake provider output.
+
+Sources:
+
+- https://open.caocaokeji.cn/zh-cn/docs/caocao_open/travel/2.27queryDriverPolyline.html
+- https://open.caocaokeji.cn/zh-cn/docs/caocao_open/travel/2.5queryDriverPosition.html
+- https://lbs.qq.com/javascript_gl/guide-polyline.html
+
+## Local Code Findings
+
+- Backend parser currently reads Caocao `coords` as `latitude,longitude` and
+  returns `{ latitude, longitude }`. This matches Caocao docs.
+- Frontend map view-model converts `{ latitude, longitude }` into
+  `{ lat, lng }`.
+- Tencent provider converts `{ lat, lng }` into `new TMap.LatLng(lat, lng)`.
+  This matches Tencent examples.
+- Current fake route has only five points and very short pickup geometry. Even
+  when coordinates are valid, the visual bend may be too weak for manual review.
+- Driver heading reaches backend provider models as `headingDegrees`, but the
+  shared map marker model currently does not expose heading to Tencent marker
+  rendering.
+
+## Chain Diagnosis Evidence
+
+- Direct fake server payload for an `ACCEPTED` order:
+  - `steps[0].links[0].coords` contains 5 semicolon-separated points.
+  - Example shape:
+    `30.266592,120.158904;30.266959968,120.159726336;...;30.2688,120.1608`.
+- Passing the same fake order through `CaocaoProviderAdapter.queryDriverRoute`
+  preserved all 5 points in order and produced `routeKind: PICKUP`.
+- Passing the adapter-shaped polyline into
+  `buildRideHailingOrderMapViewModel` preserved all 5 points and produced one
+  `extraPolylines[0].path` with `{ lat, lng }` points in the same order.
+- `RouteMap` appends `extraPolylines` after route/planned polylines; for
+  accepted/in-trip states the RideHailing view-model suppresses planned route
+  when provider geometry exists.
+- `SharedMap` forwards `props.polylines` directly to the Tencent provider.
+- Tencent provider uses `geometries[].paths` with `new TMap.LatLng(lat, lng)`,
+  matching the Tencent `MultiPolyline` guide.
+- Captured `CaocaoProviderAdapter.queryDriverRoute` request body:
+  `order_id=...&client_id=...&timestamp=...&sign=...`.
+  It does not include `navigation_polyline_type`.
+
+Current evidence does not support "backend adapter drops intermediate points"
+or "latitude/longitude are reversed" for the fake payload path.
+
+## Additional Adapter Contract Risk
+
+- Caocao `queryDriverPolyline` docs mark `navigation_polyline_type` as required:
+  `1` for pickup route and `3` for dropoff route.
+- Current `CaocaoProviderAdapter.queryDriverRoute` only sends `order_id`.
+- Current fake server ignores `navigation_polyline_type`, so the tests do not
+  guard the real provider request contract.
+- The provider port also does not pass local phase or desired route kind into
+  `queryDriverRoute`, so the adapter cannot currently choose the required
+  route type explicitly.
+
+This is a stronger adapter issue than coordinate order, and should be handled
+before or together with richer fake movement.
+
+## Implemented Contract Guardrail
+
+- Provider live route query now carries an explicit route kind:
+  - `PICKUP`
+  - `DROPOFF`
+- Trade projection maps local execution phase to provider route kind:
+  - `ACCEPTED` / `ARRIVED_AT_PICKUP` -> `PICKUP`
+  - `IN_TRIP` -> `DROPOFF`
+  - other phases do not query provider navigation route
+- Caocao adapter converts the route kind to provider request contract:
+  - `PICKUP` -> `navigation_polyline_type=1`
+  - `DROPOFF` -> `navigation_polyline_type=3`
+- Fake Caocao route endpoint now validates `navigation_polyline_type`:
+  - missing parameter returns a fake Caocao failure response
+  - phase/type mismatch returns a fake Caocao failure response
+- Tests now guard:
+  - multi-link / multi-point Caocao `coords` preservation in the backend
+    adapter
+  - request body includes the required provider route type
+  - fake server rejects missing route type
+  - frontend map view-model preserves intermediate provider route points
+
+This does not yet simulate driver movement. It closes the provider-route
+contract gap so the next movement slice can build on a faithful fake provider
+shape.
+
+## Current Geometry Diagnosis
+
+- The current fake route is not mathematically a two-point straight segment, but
+  it is visually weak:
+  - accepted route length is about 338m with about 71m max deviation from the
+    endpoint chord
+  - in-trip route length is about 1.5km with about 244m max deviation
+- For pickup review, a short route plus viewport fitting can easily read as a
+  straight line even when 5 points are present.
+- The fake server also returns a static driver coordinate for a phase. It does
+  not return the remaining route from the current driver location as polling
+  progresses.
+
+## Test Coverage Gaps
+
+- Backend adapter test uses a two-point `coords` fixture, so it proves basic
+  parsing but not multi-link / multi-point preservation.
+- Frontend view-model test uses a two-point provider route fixture, so it does
+  not guard against intermediate point loss.
+- Fake server tests assert route `coords` contains more than two points, but do
+  not assert:
+  - the exact point order
+  - route type request validation
+  - driver location progressing across repeated queries
+  - returned route being the remaining route from the simulated driver point
+
+## Open Questions For Implementation Slice
+
+1. Is the actual browser receiving the provider polyline path with all expected
+   points, or is it collapsed before reaching `RouteMap`?
+2. Does Tencent `MultiPolyline` require any additional geometry option, update
+   call, or coordinate wrapping beyond `paths: TMap.LatLng[]`?
+3. Is the observed straight line from:
+   - fake fixture geometry too close to a straight segment
+   - adapter path losing intermediate points
+   - RouteMap/Tencent layer update behavior
+   - map viewport/padding making bend visually hard to see
+4. Should driver movement be query-count based, time-based, or explicitly
+   admin-controlled?
+
+## Candidate Implementation Models
+
+### A. Realistic Fixture First
+
+- Store pickup and dropoff route fixtures as Caocao-shaped `steps/links/coords`
+  payload fragments.
+- Simulate movement by keeping an index/progress over fixture points.
+- Return only remaining route from current driver point.
+- Pros:
+  - preserves provider semantics
+  - deterministic tests
+  - good manual-review visuals
+- Cons:
+  - needs good fixture data or handcrafted road-like coordinates
+
+### B. Geospatial Library
+
+- Add a dev dependency to fake Caocao server only.
+- Candidate libraries:
+  - Turf modular packages such as `@turf/along`, `@turf/length`,
+    `@turf/bearing`, `@turf/line-slice`
+  - `geolib` for distance/bearing/interpolation helpers
+- Pros:
+  - less hand-rolled geometry math
+  - easier heading and distance/progress calculations
+- Cons:
+  - Turf uses GeoJSON coordinate order `[longitude, latitude]`, which must be
+    carefully isolated from Caocao `latitude,longitude`
+  - adds package surface to a fake-server-only tool
+
+### C. Small Local Geometry Helper
+
+- Keep a deterministic polyline fixture and implement minimal segment length,
+  point-at-distance, remaining-route, and bearing helpers locally.
+- Pros:
+  - no new dependency
+  - enough for fake server
+- Cons:
+  - less mature than library logic
+  - must keep helper narrow and well-tested
+
+## Segment Plan: Driver Movement And Heading Marker
+
+Chosen implementation model:
+
+- Use realistic-enough deterministic fake route fixtures plus a small local
+  geometry helper inside `packages/fake-caocao-server`.
+- Do not add Turf/geolib yet. Their GeoJSON `[longitude, latitude]` convention
+  would add a second coordinate convention to a provider fake whose public
+  contract is Caocao `latitude,longitude`.
+
+Backend/fake-provider behavior:
+
+- Keep fake Caocao API provider-shaped.
+- For pickup phases:
+  - simulate driver progress from an off-origin start point to order origin
+  - return driver location at the current simulated point
+  - return route polyline as the remaining pickup route from current driver
+    point to origin
+- For in-trip phase:
+  - simulate progress from origin to destination
+  - return driver location at the current simulated point
+  - return route polyline as the remaining dropoff route from current driver
+    point to destination
+- For arrived-at-pickup:
+  - driver location stays at origin
+  - route polyline stays empty for frontend marker-only display
+- Query progress should be deterministic and review-friendly:
+  - repeated polling advances the simulated point gradually
+  - phase transitions reset the movement progress for that phase
+  - route query and driver-location query should agree on the same simulated
+    point during one polling cycle as much as the current fake architecture
+    allows
+
+Frontend marker behavior:
+
+- Extend shared map marker model with optional `headingDegrees`.
+- RideHailing map view-model passes provider `headingDegrees` into the driver
+  marker.
+- Tencent LBS provider renders `routeDriver` marker with heading-aware
+  `MarkerStyle.rotate`.
+- Tencent `rotate` is counter-clockwise-positive; Caocao heading is
+  north-clockwise-positive. Because the car asset points north/up, convert with:
+  `(360 - headingDegrees) % 360`.
+- Keep heading support generic in shared map types; only the Tencent provider
+  and RideHailing driver marker consume it in this segment.
+
+Test expectations:
+
+- Fake server:
+  - repeated driver-location/route queries progress along the fake route
+  - remaining route starts at or near the current driver point
+  - heading changes according to the route segment
+- Frontend view-model:
+  - driver marker contains the backend heading
+- Tencent provider:
+  - heading-aware route-driver styles are generated with converted rotation
+    rather than losing the existing icon style
+
+## Segment Implementation Result
+
+- Added a narrow fake Caocao movement helper:
+  - haversine distance
+  - Caocao heading convention: north as `0`, clockwise positive
+  - remaining route from distance-along-polyline
+  - movement snapshot with current coordinate, heading, and remaining route
+- Fake Caocao state now uses `queryCount` as a movement tick:
+  - phase changes reset movement tick
+  - successful driver-route queries advance movement for `ACCEPTED` and
+    `IN_TRIP`
+- Fake Caocao live payloads now agree on simulated movement:
+  - driver location uses the current simulated point
+  - driver route starts from that same point
+  - route response returns remaining pickup/dropoff geometry
+  - `ARRIVED_AT_PICKUP` remains marker-only from the frontend perspective
+- Shared frontend map marker model now carries optional `headingDegrees`.
+- RideHailing order map view-model passes provider heading into the driver
+  marker.
+- Tencent LBS provider now creates heading-aware `routeDriver` marker styles:
+  - preserves the car icon style
+  - converts Caocao clockwise heading to Tencent counter-clockwise `rotate`
+  - keeps heading support generic and optional for other marker types
+
+Verification:
+
+- `pnpm --filter @partner-up-dev/fake-caocao-server test`
+- `pnpm --filter @partner-up-dev/fake-caocao-server typecheck`
+- `pnpm exec vitest run --config vitest.config.ts --project frontend-unit apps/frontend/src/domains/commerce/ui/order-detail/ride-hailing-order-map-view-model.test.ts apps/frontend/src/shared/map/tencent/tencent-lbs-provider.test.ts`
+- `pnpm --dir apps/frontend exec vue-tsc --noEmit`
+- `pnpm --dir apps/backend exec tsc --noEmit -p tsconfig.json`
+- `pnpm exec vitest run --config vitest.config.ts --project system-scenario -t "commerce_ride_hailing_ordering_reaches_order_detail"`
+- `pnpm exec biome check ...` for touched fake-server/frontend files
+
+## Initial Recommendation
+
+Start implementation with a diagnostic guardrail before enhancing movement:
+
+1. Add/adjust adapter tests with a multi-link, visibly bent Caocao `coords`
+   fixture and assert every point survives parsing in order.
+2. Add/adjust frontend map view-model tests to assert provider polyline points
+   survive into `MapPolyline.path`.
+3. Fix the provider route-query contract so the route kind required by Caocao
+   can be supplied explicitly, and make fake server validate it.
+4. If conversion is correct, improve fake movement using either:
+   - fixture-first route data plus a small local helper, or
+   - Turf modular packages if the helper starts growing beyond simple
+     point-at-distance and bearing calculations.
+5. Extend shared marker heading only after route path correctness is proven.
+
+Status:
+
+- Steps 1-3 are complete and verified.
+- Steps 4-5 are complete and verified in focused automated tests.
+- Remaining check is manual browser review of the visual movement cadence and
+  vehicle rotation.
+
+## Manual Review Finding: Movement Still Not Visible
+
+Observed after implementation:
+
+- browser still renders the route like a straight line
+- vehicle marker does not visibly move
+
+Current diagnosis:
+
+- `useCommerceOrderDetail` has no `refetchInterval`, so the Order Detail Page
+  does not automatically reload live provider geometry. The fake movement tick
+  can advance on route query, but the browser will not see movement without
+  repeated order-detail requests.
+- Current fake route source is still a handcrafted 7-point curve. It is
+  provider-shaped, but not road-shaped. Tuning `bendRatio` is not a maintainable
+  path to realistic map review.
+- The more complete model should reuse Tencent LBS in two different places:
+  - Tencent WebService Direction API in fake Caocao to generate realistic
+    provider-shaped route fixtures/polylines
+  - Tencent JavaScript GL marker movement (`moveAlong`) in the frontend map
+    provider if smooth marker animation between polling samples is needed
+
+Recommended next segment:
+
+1. Add lifecycle-aware polling for active RideHailing Order Detail phases.
+2. Replace handcrafted fake route geometry with cached Tencent driving-route
+   plans, converted back into Caocao `latitude,longitude` `coords` payloads.
+3. Keep a deterministic fallback fixture when the Tencent key/network is absent
+   so local tests and offline development remain stable.
+4. Consider Tencent `MultiMarker.moveAlong` after route generation and polling
+   are correct; it improves visual smoothness but does not fix route realism by
+   itself.
+
+## Follow-up Implementation Result: Visible Movement Foundations
+
+- Added lifecycle-aware Order Detail polling:
+  - active RideHailing phases poll every 2 seconds
+  - terminal/non-RideHailing details do not poll
+  - this fixes the first visibility gap where fake movement advanced only when
+    the browser reloaded order detail
+- Added fake Caocao Tencent route-planning support:
+  - fake server bin reads Tencent LBS keys from `apps/frontend/.env` at runtime
+    without committing or logging the secret
+  - route planner calls Tencent Direction WebService and parses compressed
+    route polyline
+  - planner output is converted back into Caocao-shaped
+    `{ latitude, longitude }` and `coords` payloads
+  - planned routes are cached by provider order and route kind
+  - tests still default to no-network deterministic fallback
+- Kept deterministic fallback route behavior:
+  - local tests do not require Tencent network/key
+  - runtime falls back to the existing generated route when planning fails
+- Added guardrail tests:
+  - Tencent route URL / polyline parser / planner
+  - fake server planner cache and route movement behavior
+  - active phase polling predicate
+
+Verification:
+
+- `pnpm --filter @partner-up-dev/fake-caocao-server test`
+- `pnpm --filter @partner-up-dev/fake-caocao-server typecheck`
+- `pnpm exec vitest run --config vitest.config.ts --project frontend-unit apps/frontend/src/domains/commerce/queries/useCommerce.test.ts apps/frontend/src/domains/commerce/ui/order-detail/ride-hailing-order-map-view-model.test.ts apps/frontend/src/shared/map/tencent/tencent-lbs-provider.test.ts`
+- `pnpm --dir apps/frontend exec vue-tsc --noEmit`
+- `pnpm --dir apps/backend exec tsc --noEmit -p tsconfig.json`
+- `pnpm exec vitest run --config vitest.config.ts --project system-scenario -t "commerce_ride_hailing_ordering_reaches_order_detail"`
+- `pnpm exec biome check ...` for touched fake-server/frontend files
+
+Remaining visual review:
+
+- Restart fake Caocao dev server so the bin loads the new env/planner code.
+- Confirm Tencent route planning succeeds in runtime network diagnostics.
+- Confirm marker movement cadence feels acceptable; if motion still appears
+  jumpy, add frontend Tencent `MultiMarker.moveAlong` as a separate smoothing
+  segment.
+
+## Follow-up Implementation Result: Tencent Marker Smoothing
+
+- Added Tencent `MultiMarker.moveAlong` support in the shared Tencent map
+  provider.
+- Only `routeDriver` marker coordinate changes animate; route start/end/waypoint
+  markers still update directly.
+- The provider keeps the previous driver marker target position and, when a new
+  polling sample arrives, renders the marker at the previous point before
+  moving it to the new point.
+- Route driver marker style now uses `faceTo: "map"` so Tencent
+  `autoRotation` can keep the vehicle facing along the movement path.
+- Existing heading-specific static rotation is retained for initial/non-moving
+  marker display.
+
+Verification:
+
+- `pnpm exec vitest run --config vitest.config.ts --project frontend-unit apps/frontend/src/shared/map/tencent/tencent-lbs-provider.test.ts apps/frontend/src/domains/commerce/queries/useCommerce.test.ts apps/frontend/src/domains/commerce/ui/order-detail/ride-hailing-order-map-view-model.test.ts`
+- `pnpm --dir apps/frontend exec vue-tsc --noEmit`
+- `pnpm exec biome check apps/frontend/src/shared/map/tencent/tencent-lbs-provider.ts apps/frontend/src/shared/map/tencent/tencent-lbs-provider.test.ts apps/frontend/src/shared/map/tencent/types.ts`
+
+Remaining visual review:
+
+- Confirm Tencent marker animation is active in a browser with a real Tencent
+  map instance.
+- If Tencent `moveAlong` conflicts with frequent geometry refreshes, keep route
+  generation/polling and adjust animation duration or switch to a lower-level
+  custom marker animation.
+
+## Follow-up Implementation Result: Movement Speed Calibration
+
+- Manual review found the marker moved correctly but too quickly.
+- Root cause:
+  fake movement advanced by a fixed route ratio per provider route query, so
+  movement speed depended on route length and felt unrealistic.
+- Changed fake movement to advance by distance:
+  - distance = speed kph * polling interval * mock time scale * query tick
+  - pickup speed starts at `28 kph`
+  - in-trip speed starts at `36 kph`
+  - mock time scale starts at `4x`
+  - progress is capped near the destination so the vehicle does not overshoot
+- Adjusted Tencent `moveAlong` duration to `1900ms`, close to the 2s active
+  Order Detail polling interval, to reduce visible stop/start gaps.
+
+Verification:
+
+- `pnpm --filter @partner-up-dev/fake-caocao-server test`
+- `pnpm --filter @partner-up-dev/fake-caocao-server typecheck`
+- `pnpm exec vitest run --config vitest.config.ts --project frontend-unit apps/frontend/src/shared/map/tencent/tencent-lbs-provider.test.ts`
+- `pnpm --dir apps/frontend exec vue-tsc --noEmit`
+- `pnpm exec biome check packages/fake-caocao-server/src/movement.ts packages/fake-caocao-server/src/movement.test.ts packages/fake-caocao-server/src/routes.ts apps/frontend/src/shared/map/tencent/tencent-lbs-provider.ts`
diff --git a/tasks/ride-hailing-ui-fixes/change-log.md b/tasks/ride-hailing-ui-fixes/change-log.md
index 329672b54..831157009 100644
--- a/tasks/ride-hailing-ui-fixes/change-log.md
+++ b/tasks/ride-hailing-ui-fixes/change-log.md
@@ -40,8 +40,126 @@ Archived full history:
   Status Hero remains a single row on narrow screens; the actions side does not
   shrink, and the status copy side takes compression.
 
+## Uncommitted Slice: Fake Caocao Admin Phase Control Observability
+
+- Added fake Caocao phase retreat state support:
+  - `ACCEPTED -> CREATED`
+  - `ARRIVED_AT_PICKUP -> ACCEPTED`
+  - `IN_TRIP -> ARRIVED_AT_PICKUP`
+  - `FINISHED -> IN_TRIP`
+  - `CREATED` and `CANCELLED` are not retreatable
+- Added dev-control routes:
+  - `POST /__fake_caocao/orders/latest/retreat`
+  - `POST /__fake_caocao/orders/:providerOrderId/retreat`
+- Changed phase control routes to include callback delivery details in success
+  responses.
+- Changed phase control routes to return
+  `502 FAKE_CAOCAO_CALLBACK_DELIVERY_FAILED` when backend callback delivery
+  returns non-2xx or cannot be delivered.
+- Callback failure responses include the already-mutated fake order so the
+  provider/local lifecycle drift is visible from Admin/network diagnostics.
+- Updated RideHailing Provider Instance Admin dev tools:
+  - added a "回退最新订单状态" button
+  - shared loading and feedback for advance/retreat
+  - success feedback now reports callback delivery status
+  - error feedback now includes callback failure details
+
+## Current Slice: RideHailing Order Detail Driver Card And Live Geometry
+
+- Added a Driver Card to `RideHailingOrderContent` when projected
+  `ride.driver` or `ride.vehicle` exists.
+- The Driver Card displays driver avatar/name, vehicle plate/description, and a
+  call action backed by `driverPhone`.
+- Manual review correction: the Driver Card call action uses normal rect shape,
+  outline variant, and primary tone.
+- Manual review correction: the Driver Card call icon now uses the `PuButton`
+  `#leading` slot.
+- Clarified that `曹操测试司机` is fake/provider example data flowing through
+  `driverName` / callback `driver_name`, not a UI field name.
+- Corrected Driver Card action wording: the right-side button is `Call`, not
+  `Phone`.
+- Changed shared Tencent marker style resolution so explicit marker icons, such
+  as `routeDriver`, are preserved even when the marker is active.
+- Changed fake Caocao pickup and in-trip driver routes from endpoint-only /
+  simple interpolation output to multi-point curved polylines for manual map
+  review.
+- Changed Caocao `ACCEPTED` / status `9` user-facing copy to `接客中` in the
+  current simplified phase model.
+- Added focused backend, fake-provider, and system scenario coverage for the
+  new behavior.
+
+## Opened Slice: Caocao Driver Movement Mock
+
+- Created `caocao-driver-movement-mock-research.md`.
+- Confirmed this slice should start from adapter conversion diagnosis:
+  Caocao `coords` -> backend provider route projection -> frontend map
+  view-model -> Tencent `MultiPolyline`.
+- Confirmed fake Caocao should remain Caocao-shaped and should not emit
+  Tencent-specific route data.
+- First chain diagnosis result:
+  - fake server raw `coords` preserved 5 points
+  - `CaocaoProviderAdapter.queryDriverRoute` preserved the same 5 points
+  - frontend order map view-model preserved the same 5 points as `{ lat, lng }`
+  - Tencent provider assembles `geometries[].paths` with
+    `new TMap.LatLng(lat, lng)`
+- Found adapter contract risk:
+  `queryDriverRoute` does not send required `navigation_polyline_type`.
+- Implemented route-query contract guardrail:
+  - provider route query now carries `PICKUP` / `DROPOFF`
+  - trade live projection maps local execution phase to route kind
+  - Caocao adapter sends `navigation_polyline_type=1` for pickup and `3` for
+    dropoff
+  - fake Caocao route endpoint validates required route type and rejects
+    missing/mismatched requests
+  - backend adapter, fake server, frontend view-model, typecheck, and system
+    scenario tests pass
+- Captured candidate implementation models:
+  - realistic Caocao-shaped fixtures
+  - geospatial library such as Turf modular packages or `geolib`
+  - narrow local geometry helper
+- Implemented driver movement and heading marker segment:
+  - added fake Caocao movement helper for distance, heading, and remaining-route
+    snapshots
+  - made fake driver location and route polyline progress with successful route
+    polling
+  - reset movement ticks on phase changes
+  - returned remaining pickup/dropoff geometry from the current driver point
+  - added optional shared map marker `headingDegrees`
+  - passed RideHailing provider heading into driver marker
+  - rendered Tencent `routeDriver` marker with heading-aware rotated styles
+    while preserving the car icon
+- Implemented Tencent marker smoothing follow-up:
+  - shared Tencent map provider now uses `MultiMarker.moveAlong` for
+    `routeDriver` coordinate changes
+  - route-driver marker style uses `faceTo: "map"` for Tencent auto-rotation
+  - non-driver route markers still update directly
+
 ## Verification
 
+- Current in-progress slice:
+  - `pnpm --filter @partner-up-dev/fake-caocao-server test`
+  - `pnpm --filter @partner-up-dev/fake-caocao-server typecheck`
+  - `pnpm --dir apps/backend exec tsc --noEmit -p tsconfig.json`
+  - `pnpm --dir apps/frontend exec vue-tsc --noEmit`
+  - `pnpm exec vitest run --config vitest.config.ts --project frontend-unit apps/frontend/src/shared/map/tencent/tencent-lbs-provider.test.ts apps/frontend/src/domains/commerce/queries/useCommerce.test.ts apps/frontend/src/domains/commerce/ui/order-detail/ride-hailing-order-map-view-model.test.ts`
+  - `pnpm exec vitest run --config vitest.config.ts --project frontend-unit apps/frontend/src/domains/commerce/ui/order-detail/ride-hailing-order-map-view-model.test.ts apps/frontend/src/shared/map/tencent/tencent-lbs-provider.test.ts`
+  - `pnpm exec vitest run --config vitest.config.ts --project backend-unit apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts`
+  - `pnpm exec vitest run --config vitest.config.ts --project frontend-unit apps/frontend/src/domains/commerce/ui/order-detail/ride-hailing-order-map-view-model.test.ts`
+  - `pnpm exec vitest run --config vitest.config.ts --project system-scenario -t "commerce_ride_hailing_ordering_reaches_order_detail"`
+  - `pnpm exec biome check apps/backend/src/domains/ride-hailing/model/provider.ts apps/backend/src/domains/ride-hailing/services/caocao-provider.ts apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts apps/frontend/src/domains/commerce/ui/order-detail/ride-hailing-order-map-view-model.ts apps/frontend/src/domains/commerce/ui/order-detail/ride-hailing-order-map-view-model.test.ts apps/frontend/src/shared/map/types.ts apps/frontend/src/shared/map/tencent/types.ts apps/frontend/src/shared/map/tencent/tencent-lbs-provider.ts apps/frontend/src/shared/map/tencent/tencent-lbs-provider.test.ts packages/fake-caocao-server/src/movement.ts packages/fake-caocao-server/src/movement.test.ts packages/fake-caocao-server/src/routes.ts packages/fake-caocao-server/src/server.test.ts packages/fake-caocao-server/src/state.ts packages/fake-caocao-server/src/state.test.ts`
+- Current Driver Card / live geometry slice:
+  - `pnpm exec biome check apps/backend/src/domains/ride-hailing/services/caocao-provider.ts apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue apps/frontend/src/shared/map/tencent/tencent-lbs-provider.ts apps/frontend/src/pages/AdminRideHailingPage.vue packages/fake-caocao-server/src/routes.ts packages/fake-caocao-server/src/server.test.ts tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts tasks/ride-hailing-ui-fixes/control.md tasks/ride-hailing-ui-fixes/discussion-log.md tasks/ride-hailing-ui-fixes/change-log.md`
+  - `pnpm --filter @partner-up-dev/fake-caocao-server test`
+  - `pnpm --filter @partner-up-dev/fake-caocao-server typecheck`
+  - `pnpm --dir apps/frontend exec vue-tsc --noEmit`
+  - `pnpm --dir apps/backend exec tsc --noEmit -p tsconfig.json`
+  - `pnpm exec vitest run --config vitest.config.ts --project backend-unit apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts`
+  - `pnpm exec vitest run --config vitest.config.ts --project system-scenario -t "commerce_ride_hailing_ordering_reaches_order_detail"`
+  - `git diff --check`
+- Driver Card Call slot correction:
+  - `pnpm exec biome check apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue`
+  - `pnpm --dir apps/frontend exec vue-tsc --noEmit`
+  - `git diff --check -- apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue tasks/ride-hailing-ui-fixes`
 - `pnpm --dir apps/backend exec tsc --noEmit -p tsconfig.json`
 - `pnpm --dir apps/frontend exec vue-tsc --noEmit`
 - `pnpm exec biome check apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts apps/frontend/src/domains/commerce/ui/ordering/RideHailingSkuCard.vue apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts tasks/ride-hailing-ui-fixes`
diff --git a/tasks/ride-hailing-ui-fixes/control.md b/tasks/ride-hailing-ui-fixes/control.md
index b0a6d6451..52b5a53ac 100644
--- a/tasks/ride-hailing-ui-fixes/control.md
+++ b/tasks/ride-hailing-ui-fixes/control.md
@@ -19,13 +19,18 @@ Hypothesis:
 ## Classification
 
 - Primary route: `Reality`
-- Active mode: `Execute` for RideHailing Order Detail `PuFloatPanel` content
-  correction
+- Active mode: `Diagnose` for RideHailing Order Detail accepted/pickup driver
+  card, vehicle marker, fake provider route geometry, and Caocao phase semantics
 - Current collaboration state: choice-set backend/domain foundation, Ordering
   UI primitive/control, SKU Card layout remediation, Offer Listing / quote
   identity, Ordering entry decoupling, durable docs promotion, and fake provider
-  lifecycle control committed; current slice replaces the RideHailing Order
-  Detail `PuFloatPanel` diagnostic content and awaits manual browser review
+  lifecycle control committed; current slice adds accepted/pickup Driver Card
+  behavior, preserves driver marker icons, improves fake provider route
+  geometry, aligns `ACCEPTED` user-facing copy with `接客中`, and corrected the
+  Driver Card Call button icon slot; current Caocao route diagnosis found no
+  intermediate-point loss in the fake -> backend -> frontend -> Tencent chain,
+  fixed the stronger `navigation_polyline_type` provider contract gap, and added
+  deterministic fake driver movement plus heading-aware vehicle marker rotation
 
 ## Inherited Effective Truth
 
@@ -71,6 +76,30 @@ Hypothesis:
     card facts from the persisted choice-set item
   - cancel/more controls in the Status Hero are disabled visual controls until
     RideHailing cancellation/more-operation use cases exist
+  - Order Detail phase display remains driven by local persisted
+    `ride.executionPhase`, not provider `live.phase`
+  - fake Caocao Admin phase controls must expose callback delivery failure
+    rather than silently allowing provider/local lifecycle drift
+  - Driver Card should render from `ride.driver` / `ride.vehicle` when either
+    exists; `driverName` is display data, and call action labels should be
+    action-oriented (`Call`) rather than data-oriented (`Phone`)
+  - the shared map provider must preserve the `routeDriver` icon style for
+    driver markers even when the marker is active
+  - fake Caocao pickup/in-trip route geometry must include enough route points
+    to support meaningful map review; two endpoint-only points are insufficient
+  - in the current simplified phase model, Caocao event `1` / order status `9`
+    maps to local `ACCEPTED`, but user-facing copy should treat that phase as
+    `接客中`
+  - provider live route query must carry the Caocao route kind explicitly:
+    pickup navigation uses `navigation_polyline_type=1`, and dropoff navigation
+    uses `navigation_polyline_type=3`
+  - fake Caocao driver movement is deterministic and route-query driven:
+    successful route polling advances a phase-local movement tick, driver
+    location and returned route start agree on the same simulated point, and
+    phase changes reset movement progress
+  - shared map marker heading is optional; RideHailing driver marker is the
+    first consumer, and Tencent conversion must account for Caocao clockwise
+    heading versus Tencent counter-clockwise marker rotation
   - standalone plan:
     `tasks/ride-hailing-ui-fixes/order-detail-ride-hailing-map-plan.md`
 - `RouteMap.vue` / shared map code are relevant when a UI issue concerns route
@@ -218,7 +247,26 @@ Choose the narrowest sufficient proof per approved slice:
     `price(estimated text, amount, checkbox)`
   - checkbox belongs below price amount and is right-aligned
   - card does not expose separate `vehicle summary` or `status/reason`
-    concepts
+- Current implementation slice:
+  - fake Caocao phase-control responses include callback delivery details
+  - callback non-2xx/network failures return
+    `FAKE_CAOCAO_CALLBACK_DELIVERY_FAILED`
+  - Admin Provider Instance dev tools expose both advance and retreat latest
+    order phase controls
+  - Driver Card renders from projected driver/vehicle data when present
+  - active driver markers preserve the explicit `routeDriver` icon style
+  - fake Caocao pickup/in-trip route output has multi-point curved geometry
+  - accepted/provider status `9` copy is user-facing `接客中`
+  - Driver Card Call action renders its icon via `PuButton` `#leading`
+  - next separate slice: Caocao Fake Server driver-movement mock should start
+    by verifying Caocao `coords` parsing and Tencent Map SDK path input rather
+    than changing fake server away from Caocao API semantics
+  - slice research file:
+    `tasks/ride-hailing-ui-fixes/caocao-driver-movement-mock-research.md`
+  - current diagnosis result: fake server raw `coords`, backend adapter
+    projection, frontend view-model path, and Tencent `paths` assembly preserve
+    the same multi-point latitude/longitude route shape; a stronger adapter
+    issue is missing `navigation_polyline_type` in `queryDriverRoute`
 - Implemented scenario coverage:
   - fake Caocao can mutate vehicle estimates through an admin-only test route
   - fake Caocao can mark per-car-type estimates unavailable for dynamic
diff --git a/tasks/ride-hailing-ui-fixes/discussion-log.md b/tasks/ride-hailing-ui-fixes/discussion-log.md
index a3b87a89d..b4de4592a 100644
--- a/tasks/ride-hailing-ui-fixes/discussion-log.md
+++ b/tasks/ride-hailing-ui-fixes/discussion-log.md
@@ -7,7 +7,145 @@ Archived full history:
 
 - `archive/discussion-log-ordering-through-order-detail-map.md`
 
-## Current Segment: RideHailing Order Detail PuFloatPanel Content
+## Current Segment: RideHailing Order Detail Driver Card And Live Geometry
+
+- Requested fixes:
+  - show a Driver Card whenever RideHailing order detail has driver or vehicle
+    information, including accepted/pickup/in-trip/finished-like phases
+  - make the map vehicle marker use the small top-view car icon from the
+    uniapp route-map implementation
+  - improve fake Caocao driver route / vehicle coordinate simulation so pickup
+    and in-trip routes do not visually collapse into a straight endpoint line
+  - verify whether fake Caocao `ACCEPTED` matches Caocao Open API semantics
+- Driver data model:
+  - `曹操测试司机` is example data, not a field name
+  - fake Caocao emits it as `driverName`, callback form field
+    `driver_name`, backend stores/projects it as `ride.driver.driverName`
+  - frontend Driver Card should display `ride.driver.driverName` when present
+  - the right-side action is a call action and should be modeled/labeled as
+    `Call`, not `Phone`; phone number is the data value behind that action
+- Proposed Driver Card wireframe:
+
+```text
+┌─────────────────────────────────────────────────┐
+│ ┌──────────┐  浙A·TEST                 ┌──────┐ │
+│ │  Avatar  │  几何 · 白色              │ Call │ │
+│ └──────────┘                           └──────┘ │
+│ 曹操测试司机                                      │
+└─────────────────────────────────────────────────┘
+```
+
+- Uniapp reference:
+  `sub_packages/ride_hailing/components/driverInfoDisplay/driverInfoDisplay.vue`
+  renders driver avatar/name on the left, vehicle plate plus brand/model/color
+  in the middle, and an icon call button on the right.
+- Confirmed marker root cause:
+  the repo already has the same driver marker asset as uniapp at
+  `/route-map/map-marker-driver.png`. The shared Tencent map provider currently
+  resolves `marker.active` before `marker.icon`, so the active driver marker
+  uses the generic active pin style instead of the `routeDriver` car icon.
+- Confirmed fake route root cause:
+  fake Caocao `ACCEPTED` currently returns only
+  `[driverCoordinate(order), order.origin]`, so the provider route necessarily
+  renders as a straight line. `IN_TRIP` is also only interpolated points, not a
+  road-like path.
+- Caocao API semantics:
+  official docs say event `1` is driver accepted; for realtime orders it maps
+  to order status `9`, and status `9` is "start service" / pickup-route
+  queryable. Driver route docs state pickup route is queryable for status `9`
+  and `12`, and dropoff route for status `3`.
+- Product interpretation for this slice:
+  in the current simplified MVP phase model, backend `ACCEPTED` should be
+  presented as `接客中`, not as a separate stable `已接单` UI state. Creating a
+  true `已接单但未接客` phase would require provider semantics that distinguish
+  it.
+- Implementation result:
+  - `RideHailingOrderContent` now renders a Driver Card from projected
+    driver/vehicle data and exposes a call action when `driverPhone` exists
+  - frontend/backend/Admin display copy now treats local `ACCEPTED` / provider
+    status `9` as `接客中`
+  - shared Tencent marker style resolution now lets explicit marker icons win
+    over active styling, so the route driver car marker is preserved
+  - fake Caocao pickup and in-trip provider route responses now return
+    multi-point curved polylines instead of endpoint-only lines
+  - scenario coverage asserts accepted status copy plus Driver Card name/plate
+- Follow-up review findings:
+  - Driver Card Call action should use the `PuButton` `leading` slot for its
+    icon; placing the icon span directly in default content is inconsistent
+    with the design-web button contract. This is a separate small correction.
+  - Caocao Fake Server driving-process enhancement should be a separate slice.
+    It should first diagnose the adapter path from Caocao `coords` to backend
+    provider route projection to Tencent Map SDK input, because a rendered
+    straight line is more likely a conversion/format mismatch than evidence
+    that the fake server should deviate from Caocao API shape.
+  - Fake Caocao should continue to follow Caocao API semantics. Better driving
+    simulation options should prefer mature routing/polyline tooling or
+    captured realistic route fixtures over hand-authored provider-incompatible
+    coordinate formats.
+  - Follow-up slice research is captured in
+    `caocao-driver-movement-mock-research.md`.
+  - Caocao driver-movement chain diagnosis result:
+    fake server raw `coords`, backend adapter parsed polyline, frontend
+    view-model `extraPolylines`, and Tencent provider `geometries[].paths`
+    all preserve the same multi-point `latitude,longitude` route shape.
+    Current evidence does not support coordinate reversal or intermediate point
+    loss as the primary cause.
+  - Stronger adapter contract issue:
+    Caocao docs require `navigation_polyline_type` for driver route query, but
+    `CaocaoProviderAdapter.queryDriverRoute` currently sends only `order_id`.
+    The fake server also ignores this missing required parameter, so current
+    tests hide the contract mismatch.
+  - Route-contract implementation result:
+    provider route query now carries an explicit `PICKUP` / `DROPOFF` route
+    kind, the trade live projection maps local lifecycle phase to that route
+    kind, Caocao adapter sends `navigation_polyline_type=1` or `3`, and fake
+    Caocao rejects missing/mismatched route-type requests. This fixes the
+    adapter contract before adding richer movement simulation.
+  - Current movement/heading plan:
+    implement deterministic fake movement with a narrow local geometry helper,
+    not a geospatial dependency. The fake server should return the remaining
+    provider-shaped route from the current simulated driver point, and the
+    shared map marker contract should carry optional heading into Tencent
+    marker style rotation.
+  - Movement/heading implementation result:
+    fake Caocao now advances simulated driver movement on successful route
+    polling, keeps driver location and remaining route aligned, resets movement
+    ticks on phase changes, and exposes calculated heading. Frontend map marker
+    data now carries optional heading, and Tencent route-driver marker styles
+    convert Caocao clockwise heading to Tencent counter-clockwise rotation
+    without replacing the car icon.
+
+## Previous Segment: Fake Caocao Admin Phase Control Observability
+
+- Observation:
+  Admin advanced the fake provider order to provider live `IN_TRIP`, but Order
+  Detail still displayed `派单中`.
+- Diagnosis:
+  Order Detail intentionally renders local persisted
+  `rideHailing.executionPhase`, not provider `rideHailing.live.phase`. For the
+  reported order, local `executionPhase` remained `DISPATCHING`; therefore the
+  UI was rendering the canonical local lifecycle correctly.
+- Root problem:
+  fake provider phase control could update fake provider state while the
+  callback delivery to backend failed or was rejected without being surfaced to
+  the Admin user. That creates visible drift between provider live state and
+  local lifecycle.
+- Repair direction:
+  keep Order Detail UI driven by local lifecycle; make fake Caocao/Admin phase
+  controls expose callback delivery success/failure explicitly.
+- Added scope:
+  provide both advance and retreat controls for the latest fake Caocao order.
+  `CANCELLED` is not retreatable because fake state has no previous-phase
+  history.
+- Runtime finding:
+  `Missing Caocao sign` on the new retreat control means the running fake
+  server did not recognize the `__fake_caocao` route and fell through to signed
+  Caocao request verification. Restarting the caocao portless route loaded the
+  new route; an empty fresh fake state now returns
+  `FAKE_CAOCAO_ORDER_NOT_FOUND` instead, which proves the dev-control route is
+  matched.
+
+## Previous Segment: RideHailing Order Detail PuFloatPanel Content
 
 - Result:
   `RideHailingOrderContent` now replaces the raw JSON diagnostic panel with the
diff --git a/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts b/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
index ae8f1ebbc..b12f23973 100644
--- a/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
+++ b/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
@@ -652,6 +652,26 @@ scenario("commerce_ride_hailing_ordering_reaches_order_detail", async (ctx) => {
     });
     assert.equal(acceptedOrder.phase, "ACCEPTED");
     await waitForRideHailingMapMode(page, "PICKING_UP");
+    await assertLocatorTextIncludes({
+      actual: page.getByTestId("order-detail.ride-hailing.status-title").textContent(),
+      expected: "接客中",
+      label: "RideHailing accepted status hero",
+    });
+    const driverCard = page.getByTestId("order-detail.ride-hailing.driver-card");
+    await driverCard.waitFor({
+      state: "visible",
+      timeout: 10_000,
+    });
+    await assertLocatorTextIncludes({
+      actual: driverCard.textContent(),
+      expected: "曹操测试司机",
+      label: "RideHailing driver card driver name",
+    });
+    await assertLocatorTextIncludes({
+      actual: driverCard.textContent(),
+      expected: "浙A·TEST",
+      label: "RideHailing driver card vehicle plate",
+    });
 
     const arrivedOrder = await advanceLatestFakeCaocaoOrder();
     assert.equal(arrivedOrder.phase, "ARRIVED_AT_PICKUP");

From 51597a105e2984f474f143127a313aadb8cc1c97 Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Wed, 24 Jun 2026 15:02:54 +0800
Subject: [PATCH 43/94] fix(map): stabilize ride-hailing live follow mode

- add shared active-marker follow mode with pause, resume, and overview controls
- keep ride-hailing live maps north-up while following the driver at zoom 15
- route polylines now use design-token tones and avoid active danger coloring
- keep Tencent marker text out of GL styles while preserving heading-aware vehicle markers
- update ride-hailing map view-model overview geometry and task packet log
---
 .../order-detail/RideHailingOrderContent.vue  |  14 +-
 .../ride-hailing-order-map-view-model.test.ts |  44 ++-
 .../ride-hailing-order-map-view-model.ts      |  68 +++-
 .../frontend/src/domains/route/model/route.ts |  65 +---
 .../src/domains/route/ui/RouteMap.vue         |  52 ++-
 .../route/ui/route-map-polylines.test.ts      |  64 ++++
 .../domains/route/ui/route-map-polylines.ts   |  45 +++
 apps/frontend/src/shared/map/Map.vue          | 241 ++++++++++++--
 .../map/tencent/tencent-lbs-provider.test.ts  | 310 ++++++++++++++++-
 .../map/tencent/tencent-lbs-provider.ts       | 311 +++++++++++-------
 apps/frontend/src/shared/map/tencent/types.ts |  18 +-
 apps/frontend/src/shared/map/types.ts         |  19 +-
 .../src/shared/map/viewport-follow.test.ts    |  79 +++++
 .../src/shared/map/viewport-follow.ts         |  50 +++
 tasks/ride-hailing-ui-fixes/change-log.md     |  35 ++
 15 files changed, 1172 insertions(+), 243 deletions(-)
 create mode 100644 apps/frontend/src/domains/route/ui/route-map-polylines.test.ts
 create mode 100644 apps/frontend/src/domains/route/ui/route-map-polylines.ts
 create mode 100644 apps/frontend/src/shared/map/viewport-follow.test.ts
 create mode 100644 apps/frontend/src/shared/map/viewport-follow.ts

diff --git a/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue b/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue
index 0dafdd7df..9206e0b5e 100644
--- a/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue
+++ b/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue
@@ -16,6 +16,11 @@
       :plan-route="orderMapViewModel.planRoute"
       :show-fallback-polyline="orderMapViewModel.showFallbackPolyline"
       :active-geometry="orderMapViewModel.activeGeometry"
+      :overview-geometry="orderMapViewModel.overviewGeometry"
+      :viewport-follow-mode="routeMapViewportFollowMode"
+      :follow-reset-key="orderMapViewModel.mode"
+      :follow-zoom="15"
+      :show-viewport-follow-controls="routeMapViewportFollowMode !== 'none'"
       :fit-padding="routeMapFitPadding"
       :interactive="true"
       variant="immersive"
@@ -200,7 +205,7 @@ import RideHailingSkuCard from "@/domains/commerce/ui/ordering/RideHailingSkuCar
 import type { Route, RoutePoint } from "@/domains/route/model/route";
 import RouteMap from "@/domains/route/ui/RouteMap.vue";
 import RoutePointList from "@/domains/route/ui/RoutePointList.vue";
-import type { MapFitPadding } from "@/shared/map/types";
+import type { MapFitPadding, MapViewportFollowMode } from "@/shared/map/types";
 import { buildRideHailingOrderMapViewModel } from "./ride-hailing-order-map-view-model";
 
 type RideHailingDetail = NonNullable<CommerceOrderDetailResponse["rideHailing"]>;
@@ -367,6 +372,13 @@ const orderMapViewModel = computed(() =>
   }),
 );
 
+const routeMapViewportFollowMode = computed<MapViewportFollowMode>(() =>
+  orderMapViewModel.value.activeGeometry?.kind === "marker" &&
+  (orderMapViewModel.value.mode === "PICKING_UP" || orderMapViewModel.value.mode === "IN_TRIP")
+    ? "active-marker"
+    : "none",
+);
+
 const directImageSrc = (value: string | null | undefined): string | null => {
   const normalized = value?.trim() ?? "";
   if (!normalized) return null;
diff --git a/apps/frontend/src/domains/commerce/ui/order-detail/ride-hailing-order-map-view-model.test.ts b/apps/frontend/src/domains/commerce/ui/order-detail/ride-hailing-order-map-view-model.test.ts
index f7e51354c..6e096e398 100644
--- a/apps/frontend/src/domains/commerce/ui/order-detail/ride-hailing-order-map-view-model.test.ts
+++ b/apps/frontend/src/domains/commerce/ui/order-detail/ride-hailing-order-map-view-model.test.ts
@@ -65,8 +65,13 @@ describe("buildRideHailingOrderMapViewModel", () => {
 
     expect(viewModel.mode).toBe("PICKING_UP");
     expect(viewModel.activeGeometry).toEqual({
-      kind: "polyline",
-      id: "ride-hailing-provider-route",
+      kind: "marker",
+      id: "ride-hailing-driver",
+    });
+    expect(viewModel.overviewGeometry).toEqual({
+      kind: "selection",
+      markerIds: ["route-point-0", "ride-hailing-driver"],
+      polylineIds: ["ride-hailing-provider-route"],
     });
     expect(viewModel.extraMarkers).toHaveLength(1);
     expect(viewModel.extraMarkers[0]?.icon).toBe("routeDriver");
@@ -78,6 +83,8 @@ describe("buildRideHailingOrderMapViewModel", () => {
       { lat: 30.2893, lng: 120.203 },
       { lat: 30.2912, lng: 120.212 },
     ]);
+    expect(viewModel.extraPolylines[0]?.tone).toBe("secondary");
+    expect(viewModel.extraPolylines[0]?.active).toBeUndefined();
     expect(viewModel.plannedPolyline).toBeNull();
   });
 
@@ -160,12 +167,43 @@ describe("buildRideHailingOrderMapViewModel", () => {
           { lat: 30.24, lng: 120.102 },
         ],
         title: "原始规划路线",
-        tone: "muted",
+        tone: "tertiary",
       },
     ]);
     expect(viewModel.plannedPolyline).toBeNull();
   });
 
+  test("follows driver marker during trip even when provider route exists", () => {
+    const viewModel = buildRideHailingOrderMapViewModel({
+      executionPhase: "IN_TRIP",
+      route: route(),
+      live: {
+        vehicleLocation: {
+          headingDegrees: 180,
+          latitude: 30.27,
+          longitude: 120.16,
+        },
+        navigationRoute: {
+          routeKind: "DROPOFF",
+          polyline: [
+            { latitude: 30.27, longitude: 120.16 },
+            { latitude: 30.255, longitude: 120.13 },
+            { latitude: 30.24, longitude: 120.102 },
+          ],
+        },
+      },
+    });
+
+    expect(viewModel.mode).toBe("IN_TRIP");
+    expect(viewModel.activeGeometry).toEqual({
+      kind: "marker",
+      id: "ride-hailing-driver",
+    });
+    expect(viewModel.overviewGeometry).toEqual({ kind: "all" });
+    expect(viewModel.extraPolylines[0]?.id).toBe("ride-hailing-provider-route");
+    expect(viewModel.extraPolylines[0]?.tone).toBe("secondary");
+  });
+
   test("keeps planned route for terminal phases", () => {
     const viewModel = buildRideHailingOrderMapViewModel({
       executionPhase: "FINISHED",
diff --git a/apps/frontend/src/domains/commerce/ui/order-detail/ride-hailing-order-map-view-model.ts b/apps/frontend/src/domains/commerce/ui/order-detail/ride-hailing-order-map-view-model.ts
index 29fcf6eaa..da3a3e475 100644
--- a/apps/frontend/src/domains/commerce/ui/order-detail/ride-hailing-order-map-view-model.ts
+++ b/apps/frontend/src/domains/commerce/ui/order-detail/ride-hailing-order-map-view-model.ts
@@ -53,6 +53,7 @@ export type RideHailingOrderMapViewModel = {
   extraMarkers: MapMarker[];
   extraPolylines: MapPolyline[];
   activeGeometry: MapActiveGeometry;
+  overviewGeometry: MapActiveGeometry;
 };
 
 const DRIVER_MARKER_ID = "ride-hailing-driver";
@@ -105,21 +106,44 @@ const buildProviderRoutePolyline = (path: MapCoordinate[] | null): MapPolyline |
         id: PROVIDER_ROUTE_POLYLINE_ID,
         path,
         title: "服务商实时路线",
-        tone: "routePrimary",
-        active: true,
+        tone: "secondary",
       }
     : null;
 
-const buildMutedPlannedFallbackPolyline = (path: MapCoordinate[] | null): MapPolyline | null =>
+const buildPlannedFallbackPolyline = (path: MapCoordinate[] | null): MapPolyline | null =>
   path
     ? {
         id: PLANNED_FALLBACK_POLYLINE_ID,
         path,
         title: "原始规划路线",
-        tone: "muted",
+        tone: "tertiary",
       }
     : null;
 
+const buildRideHailingLiveOverviewGeometry = ({
+  includeOrigin,
+  driverMarker,
+  providerRoutePolyline,
+}: {
+  includeOrigin: boolean;
+  driverMarker: MapMarker | null;
+  providerRoutePolyline: MapPolyline | null;
+}): MapActiveGeometry => {
+  const markerIds = [
+    ...(includeOrigin ? [ORIGIN_MARKER_ID] : []),
+    ...(driverMarker ? [DRIVER_MARKER_ID] : []),
+  ];
+  const polylineIds = providerRoutePolyline ? [PROVIDER_ROUTE_POLYLINE_ID] : [];
+
+  return markerIds.length > 0 || polylineIds.length > 0
+    ? {
+        kind: "selection",
+        markerIds,
+        polylineIds,
+      }
+    : { kind: "all" };
+};
+
 const resolveMode = (phase: RideHailingMapExecutionPhase): RideHailingOrderMapMode => {
   if (phase === "ACCEPTED") return "PICKING_UP";
   if (phase === "ARRIVED_AT_PICKUP") return "ARRIVED_AT_PICKUP";
@@ -146,6 +170,7 @@ export function buildRideHailingOrderMapViewModel(input: {
   if (mode === "SEARCHING_ORIGIN") {
     return {
       activeGeometry: { kind: "marker", id: ORIGIN_MARKER_ID },
+      overviewGeometry: { kind: "marker", id: ORIGIN_MARKER_ID },
       extraMarkers: [],
       extraPolylines: [],
       mode,
@@ -158,11 +183,16 @@ export function buildRideHailingOrderMapViewModel(input: {
   if (mode === "PICKING_UP") {
     const hasLiveGeometry = Boolean(providerRoutePolyline || driverMarker);
     return {
-      activeGeometry: providerRoutePolyline
-        ? { kind: "polyline", id: PROVIDER_ROUTE_POLYLINE_ID }
-        : driverMarker
-          ? { kind: "marker", id: DRIVER_MARKER_ID }
+      activeGeometry: driverMarker
+        ? { kind: "marker", id: DRIVER_MARKER_ID }
+        : providerRoutePolyline
+          ? { kind: "polyline", id: PROVIDER_ROUTE_POLYLINE_ID }
           : { kind: "all" },
+      overviewGeometry: buildRideHailingLiveOverviewGeometry({
+        includeOrigin: true,
+        driverMarker,
+        providerRoutePolyline,
+      }),
       extraMarkers: driverMarker ? [driverMarker] : [],
       extraPolylines: providerRoutePolyline ? [providerRoutePolyline] : [],
       mode,
@@ -177,6 +207,12 @@ export function buildRideHailingOrderMapViewModel(input: {
       activeGeometry: driverMarker
         ? { kind: "marker", id: DRIVER_MARKER_ID }
         : { kind: "marker", id: ORIGIN_MARKER_ID },
+      overviewGeometry: driverMarker
+        ? {
+            kind: "selection",
+            markerIds: [ORIGIN_MARKER_ID, DRIVER_MARKER_ID],
+          }
+        : { kind: "marker", id: ORIGIN_MARKER_ID },
       extraMarkers: driverMarker ? [driverMarker] : [],
       extraPolylines: [],
       mode,
@@ -187,18 +223,19 @@ export function buildRideHailingOrderMapViewModel(input: {
   }
 
   if (mode === "IN_TRIP") {
-    const mutedPlannedFallback = providerRoutePolyline
+    const plannedFallback = providerRoutePolyline
       ? null
-      : buildMutedPlannedFallbackPolyline(plannedPolyline);
+      : buildPlannedFallbackPolyline(plannedPolyline);
     return {
-      activeGeometry: providerRoutePolyline
-        ? { kind: "polyline", id: PROVIDER_ROUTE_POLYLINE_ID }
-        : driverMarker
-          ? { kind: "marker", id: DRIVER_MARKER_ID }
+      activeGeometry: driverMarker
+        ? { kind: "marker", id: DRIVER_MARKER_ID }
+        : providerRoutePolyline
+          ? { kind: "polyline", id: PROVIDER_ROUTE_POLYLINE_ID }
           : { kind: "all" },
+      overviewGeometry: { kind: "all" },
       extraMarkers: driverMarker ? [driverMarker] : [],
       extraPolylines: [
-        ...(mutedPlannedFallback ? [mutedPlannedFallback] : []),
+        ...(plannedFallback ? [plannedFallback] : []),
         ...(providerRoutePolyline ? [providerRoutePolyline] : []),
       ],
       mode,
@@ -210,6 +247,7 @@ export function buildRideHailingOrderMapViewModel(input: {
 
   return {
     activeGeometry: { kind: "all" },
+    overviewGeometry: { kind: "all" },
     extraMarkers: [],
     extraPolylines: [],
     mode,
diff --git a/apps/frontend/src/domains/route/model/route.ts b/apps/frontend/src/domains/route/model/route.ts
index 88d2f3edb..8fd8a07b7 100644
--- a/apps/frontend/src/domains/route/model/route.ts
+++ b/apps/frontend/src/domains/route/model/route.ts
@@ -1,8 +1,4 @@
-import type {
-  MapCoordinate,
-  MapMarker,
-  MapPolyline,
-} from "@/shared/map/types";
+import type { MapCoordinate, MapMarker, MapPolyline } from "@/shared/map/types";
 
 export type RouteCoordinate = [number, number];
 
@@ -17,10 +13,7 @@ export type RoutePoint = {
 export type Route = RoutePoint[];
 
 export type RoutePointRole = "departure" | "waypoint" | "arrival";
-export type RouteValidationIssue =
-  | "min-points"
-  | "name-required"
-  | "coordinate-required";
+export type RouteValidationIssue = "min-points" | "name-required" | "coordinate-required";
 
 export type PickedRoutePointLocation = {
   name: string;
@@ -44,9 +37,7 @@ export const createEmptyRouteDraft = (): Route => [
   createEmptyRoutePoint(),
 ];
 
-const cloneCoordinate = (
-  coordinate: RouteCoordinate | null,
-): RouteCoordinate | null =>
+const cloneCoordinate = (coordinate: RouteCoordinate | null): RouteCoordinate | null =>
   coordinate === null ? null : [coordinate[0], coordinate[1]];
 
 export const cloneRoutePoint = (point: RoutePoint): RoutePoint => ({
@@ -60,10 +51,7 @@ export const cloneRoutePoint = (point: RoutePoint): RoutePoint => ({
 export const cloneRoute = (route: Route | null | undefined): Route | null =>
   route ? route.map(cloneRoutePoint) : null;
 
-export const resolveRoutePointRole = (
-  index: number,
-  total: number,
-): RoutePointRole => {
+export const resolveRoutePointRole = (index: number, total: number): RoutePointRole => {
   if (index === 0) {
     return "departure";
   }
@@ -75,8 +63,7 @@ export const resolveRoutePointRole = (
   return "waypoint";
 };
 
-const normalizeRoutePointText = (value: string | null | undefined): string =>
-  value?.trim() ?? "";
+const normalizeRoutePointText = (value: string | null | undefined): string => value?.trim() ?? "";
 
 const truncateText = (value: string, maxLength: number): string =>
   Array.from(value).slice(0, Math.max(0, maxLength)).join("");
@@ -108,15 +95,12 @@ export const buildRouteSummary = (
     endLimit = endLength;
   }
 
-  return [
-    truncateText(startName, startLimit),
-    truncateText(endName, endLimit),
-  ].join(ROUTE_SUMMARY_SEPARATOR);
+  return [truncateText(startName, startLimit), truncateText(endName, endLimit)].join(
+    ROUTE_SUMMARY_SEPARATOR,
+  );
 };
 
-export const buildRouteEndpointLabel = (
-  route: Route | null | undefined,
-): string | null => {
+export const buildRouteEndpointLabel = (route: Route | null | undefined): string | null => {
   const first = route?.[0];
   const last = route?.[route.length - 1];
   const startName = normalizeRoutePointText(first?.name);
@@ -128,9 +112,7 @@ export const buildRouteEndpointLabel = (
   return [startName, endName].join(ROUTE_SUMMARY_SEPARATOR);
 };
 
-export const pickRoutePointCoordinate = (
-  point: RoutePoint,
-): MapCoordinate | null => {
+export const pickRoutePointCoordinate = (point: RoutePoint): MapCoordinate | null => {
   const coordinate = point.gcj02 ?? point.wgs84 ?? point.bd09;
   if (!coordinate) {
     return null;
@@ -165,9 +147,7 @@ export const getRouteValidationIssue = (
   return null;
 };
 
-export const normalizeRouteForSubmit = (
-  route: Route | null | undefined,
-): Route | null => {
+export const normalizeRouteForSubmit = (route: Route | null | undefined): Route | null => {
   if (!route) {
     return null;
   }
@@ -184,18 +164,13 @@ export const normalizeRouteForSubmit = (
   });
 };
 
-export const insertRouteWaypoint = (
-  route: Route | null | undefined,
-): Route => {
+export const insertRouteWaypoint = (route: Route | null | undefined): Route => {
   const draft = cloneRoute(route) ?? createEmptyRouteDraft();
   const waypoint = createEmptyRoutePoint();
   return [...draft.slice(0, -1), waypoint, draft[draft.length - 1]];
 };
 
-export const removeRoutePointAt = (
-  route: Route,
-  index: number,
-): Route => {
+export const removeRoutePointAt = (route: Route, index: number): Route => {
   const role = resolveRoutePointRole(index, route.length);
   if (role !== "waypoint") {
     return cloneRoute(route) ?? createEmptyRouteDraft();
@@ -214,12 +189,7 @@ export const swapRoutePointWithNeighbor = ({
   direction: "up" | "down";
 }): Route => {
   const nextIndex = direction === "up" ? index - 1 : index + 1;
-  if (
-    index < 0 ||
-    index >= route.length ||
-    nextIndex < 0 ||
-    nextIndex >= route.length
-  ) {
+  if (index < 0 || index >= route.length || nextIndex < 0 || nextIndex >= route.length) {
     return cloneRoute(route) ?? createEmptyRouteDraft();
   }
 
@@ -287,11 +257,7 @@ export const toRouteMapProjection = (
         position,
         title: point.name,
         icon:
-          role === "departure"
-            ? "routeStart"
-            : role === "arrival"
-              ? "routeEnd"
-              : "routeWaypoint",
+          role === "departure" ? "routeStart" : role === "arrival" ? "routeEnd" : "routeWaypoint",
       },
     ];
   });
@@ -309,7 +275,6 @@ export const toRouteMapProjection = (
               id: "route",
               path,
               title: buildRouteSummary(route) ?? undefined,
-              tone: "routeInvalid",
             },
           ]
         : [],
diff --git a/apps/frontend/src/domains/route/ui/RouteMap.vue b/apps/frontend/src/domains/route/ui/RouteMap.vue
index fdbbead09..209d500fa 100644
--- a/apps/frontend/src/domains/route/ui/RouteMap.vue
+++ b/apps/frontend/src/domains/route/ui/RouteMap.vue
@@ -6,6 +6,14 @@
       :markers="markers"
       :polylines="polylines"
       :active-geometry="activeGeometry ?? { kind: 'all' }"
+      :overview-geometry="overviewGeometry"
+      :viewport-follow-mode="viewportFollowMode"
+      :fit-on-geometry-change="fitOnGeometryChange"
+      :follow-reset-key="followResetKey"
+      :follow-zoom="followZoom"
+      :show-viewport-follow-controls="showViewportFollowControls"
+      :resume-follow-label="resumeFollowLabel"
+      :overview-label="overviewLabel"
       :fit-padding="fitPadding"
       :max-zoom="maxZoom"
       :interactive="interactive"
@@ -71,7 +79,14 @@ import type {
   MapFitPadding,
   MapMarker,
   MapPolyline,
+  MapPolylineTone,
+  MapViewportFollowMode,
 } from "@/shared/map/types";
+import {
+  normalizeRouteMapExtraPolylines,
+  ROUTE_MAP_FALLBACK_POLYLINE_TONE,
+  resolveRouteMapPlannedPolylineTone,
+} from "./route-map-polylines";
 
 const props = withDefaults(
   defineProps<{
@@ -82,6 +97,14 @@ const props = withDefaults(
     planRoute?: boolean;
     planningApiKey?: string;
     activeGeometry?: MapActiveGeometry;
+    overviewGeometry?: MapActiveGeometry;
+    viewportFollowMode?: MapViewportFollowMode;
+    fitOnGeometryChange?: boolean;
+    followResetKey?: string | number | null;
+    followZoom?: number;
+    showViewportFollowControls?: boolean;
+    resumeFollowLabel?: string;
+    overviewLabel?: string;
     fitPadding?: MapFitPadding;
     maxZoom?: number;
     apiKey?: string;
@@ -100,6 +123,14 @@ const props = withDefaults(
     planRoute: true,
     planningApiKey: undefined,
     activeGeometry: null,
+    overviewGeometry: null,
+    viewportFollowMode: "none",
+    fitOnGeometryChange: true,
+    followResetKey: null,
+    followZoom: 17,
+    showViewportFollowControls: false,
+    resumeFollowLabel: "回到跟随",
+    overviewLabel: "查看全程",
     fitPadding: 28,
     maxZoom: 16,
     apiKey: undefined,
@@ -257,7 +288,7 @@ const routePolylines = computed<MapPolyline[]>(() => {
         id: "route",
         path: externalPlannedPolyline.value,
         title: buildRouteSummary(props.route) ?? undefined,
-        tone: "routePrimary",
+        tone: resolveRouteMapPlannedPolylineTone(0),
       },
     ];
   }
@@ -269,7 +300,7 @@ const routePolylines = computed<MapPolyline[]>(() => {
             id: plan.id,
             path: plan.polyline,
             title: buildRouteSummary(props.route) ?? undefined,
-            tone: index === 0 ? "routePrimary" : "routeSecondary",
+            tone: resolveRouteMapPlannedPolylineTone(index),
           }
         : null,
     )
@@ -288,11 +319,24 @@ const routePolylines = computed<MapPolyline[]>(() => {
 
   return projection.value.polylines.map((polyline) => ({
     ...polyline,
-    tone: "routeInvalid",
+    tone: ROUTE_MAP_FALLBACK_POLYLINE_TONE,
   }));
 });
 
-const polylines = computed<MapPolyline[]>(() => [...routePolylines.value, ...props.extraPolylines]);
+const polylines = computed<MapPolyline[]>(() => {
+  const usedTones = new Set(
+    routePolylines.value
+      .map((polyline) => polyline.tone)
+      .filter((tone): tone is MapPolylineTone => Boolean(tone)),
+  );
+  return [
+    ...routePolylines.value,
+    ...normalizeRouteMapExtraPolylines({
+      polylines: props.extraPolylines,
+      usedTones,
+    }),
+  ];
+});
 
 const hasGeometry = computed(() => markers.value.length > 0 || polylines.value.length > 0);
 
diff --git a/apps/frontend/src/domains/route/ui/route-map-polylines.test.ts b/apps/frontend/src/domains/route/ui/route-map-polylines.test.ts
new file mode 100644
index 000000000..fa6fa7aab
--- /dev/null
+++ b/apps/frontend/src/domains/route/ui/route-map-polylines.test.ts
@@ -0,0 +1,64 @@
+import { describe, expect, test } from "vitest";
+import type { MapPolylineTone } from "@/shared/map/types";
+import {
+  normalizeRouteMapExtraPolylines,
+  ROUTE_MAP_FALLBACK_POLYLINE_TONE,
+  resolveRouteMapPlannedPolylineTone,
+} from "./route-map-polylines";
+
+describe("route map polyline tones", () => {
+  test("defaults route polylines to secondary and avoids duplicate tones for alternatives", () => {
+    expect(resolveRouteMapPlannedPolylineTone(0)).toBe("secondary");
+    expect(resolveRouteMapPlannedPolylineTone(1)).toBe("tertiary");
+    expect(resolveRouteMapPlannedPolylineTone(2)).toBe("primary");
+    expect(resolveRouteMapPlannedPolylineTone(3)).toBe("secondary");
+  });
+
+  test("uses danger only for route map fallback geometry", () => {
+    expect(ROUTE_MAP_FALLBACK_POLYLINE_TONE).toBe("danger");
+  });
+
+  test("assigns extra polylines without colliding with existing route tones", () => {
+    expect(
+      normalizeRouteMapExtraPolylines({
+        polylines: [
+          {
+            id: "provider-route",
+            path: [
+              { lat: 30, lng: 120 },
+              { lat: 31, lng: 121 },
+            ],
+          },
+        ],
+        usedTones: new Set<MapPolylineTone>(["secondary"]),
+      }),
+    ).toEqual([
+      {
+        id: "provider-route",
+        path: [
+          { lat: 30, lng: 120 },
+          { lat: 31, lng: 121 },
+        ],
+        tone: "tertiary",
+      },
+    ]);
+  });
+
+  test("preserves explicit extra polyline tones", () => {
+    expect(
+      normalizeRouteMapExtraPolylines({
+        polylines: [
+          {
+            id: "live-route",
+            path: [
+              { lat: 30, lng: 120 },
+              { lat: 31, lng: 121 },
+            ],
+            tone: "secondary",
+          },
+        ],
+        usedTones: new Set<MapPolylineTone>(["secondary"]),
+      })[0]?.tone,
+    ).toBe("secondary");
+  });
+});
diff --git a/apps/frontend/src/domains/route/ui/route-map-polylines.ts b/apps/frontend/src/domains/route/ui/route-map-polylines.ts
new file mode 100644
index 000000000..def4b9172
--- /dev/null
+++ b/apps/frontend/src/domains/route/ui/route-map-polylines.ts
@@ -0,0 +1,45 @@
+import type { MapPolyline, MapPolylineTone } from "@/shared/map/types";
+
+const ROUTE_MAP_POLYLINE_TONE_SEQUENCE: readonly MapPolylineTone[] = [
+  "secondary",
+  "tertiary",
+  "primary",
+];
+
+export const ROUTE_MAP_FALLBACK_POLYLINE_TONE: MapPolylineTone = "danger";
+
+export const resolveRouteMapPlannedPolylineTone = (index: number): MapPolylineTone => {
+  const normalizedIndex = Number.isInteger(index) && index >= 0 ? index : 0;
+  return (
+    ROUTE_MAP_POLYLINE_TONE_SEQUENCE[normalizedIndex % ROUTE_MAP_POLYLINE_TONE_SEQUENCE.length] ??
+    "secondary"
+  );
+};
+
+const pickFirstAvailableRouteMapTone = (
+  usedTones: ReadonlySet<MapPolylineTone>,
+  index: number,
+): MapPolylineTone => {
+  for (const tone of ROUTE_MAP_POLYLINE_TONE_SEQUENCE) {
+    if (!usedTones.has(tone)) return tone;
+  }
+  return resolveRouteMapPlannedPolylineTone(index);
+};
+
+export const normalizeRouteMapExtraPolylines = ({
+  polylines,
+  usedTones,
+}: {
+  polylines: readonly MapPolyline[];
+  usedTones: ReadonlySet<MapPolylineTone>;
+}): MapPolyline[] => {
+  const assignedTones = new Set(usedTones);
+  return polylines.map((polyline, index) => {
+    const tone = polyline.tone ?? pickFirstAvailableRouteMapTone(assignedTones, index);
+    assignedTones.add(tone);
+    return {
+      ...polyline,
+      tone,
+    };
+  });
+};
diff --git a/apps/frontend/src/shared/map/Map.vue b/apps/frontend/src/shared/map/Map.vue
index 06e8346ed..ddaa1a2ce 100644
--- a/apps/frontend/src/shared/map/Map.vue
+++ b/apps/frontend/src/shared/map/Map.vue
@@ -5,8 +5,36 @@
       class="map-shell__canvas"
       :style="canvasStyle"
       aria-hidden="true"
+      @wheel.passive="handleUserViewportInteraction"
     ></div>
 
+    <div
+      v-if="viewportFollowControlsVisible"
+      class="map-shell__viewport-controls"
+      aria-label="地图视野"
+    >
+      <button
+        v-if="followPausedByUser"
+        type="button"
+        class="map-shell__viewport-button"
+        data-testid="shared-map.follow.resume"
+        @click.stop="resumeViewportFollow"
+      >
+        <span class="i-mdi-crosshairs-gps" aria-hidden="true"></span>
+        <span>{{ resumeFollowLabel }}</span>
+      </button>
+      <button
+        v-else
+        type="button"
+        class="map-shell__viewport-button"
+        data-testid="shared-map.follow.overview"
+        @click.stop="showAllGeometry"
+      >
+        <span class="i-mdi-map-marker-path" aria-hidden="true"></span>
+        <span>{{ overviewLabel }}</span>
+      </button>
+    </div>
+
     <div
       v-if="customZoomControlsVisible"
       class="map-shell__zoom-controls"
@@ -50,14 +78,16 @@
 
 <script setup lang="ts">
 import {
+  type CSSProperties,
   computed,
   nextTick,
   onBeforeUnmount,
   onMounted,
   ref,
   watch,
-  type CSSProperties,
 } from "vue";
+import { createTencentLBSMapProvider } from "@/shared/map/tencent/tencent-lbs-provider";
+import type { TencentLBSLibrary, TencentLBSMapProvider } from "@/shared/map/tencent/types";
 import type {
   MapActiveGeometry,
   MapCoordinate,
@@ -65,12 +95,12 @@ import type {
   MapMarker,
   MapPolyline,
   MapProviderStatus,
+  MapViewportFollowMode,
 } from "@/shared/map/types";
-import { createTencentLBSMapProvider } from "@/shared/map/tencent/tencent-lbs-provider";
-import type {
-  TencentLBSLibrary,
-  TencentLBSMapProvider,
-} from "@/shared/map/tencent/types";
+import {
+  type MapAutomaticViewportSource,
+  resolveMapAutomaticViewportAction,
+} from "./viewport-follow";
 
 const props = withDefaults(
   defineProps<{
@@ -83,6 +113,14 @@ const props = withDefaults(
     maxZoom?: number;
     fitPadding?: MapFitPadding;
     activeGeometry?: MapActiveGeometry;
+    overviewGeometry?: MapActiveGeometry;
+    viewportFollowMode?: MapViewportFollowMode;
+    fitOnGeometryChange?: boolean;
+    followResetKey?: string | number | null;
+    followZoom?: number;
+    showViewportFollowControls?: boolean;
+    resumeFollowLabel?: string;
+    overviewLabel?: string;
     libraries?: readonly TencentLBSLibrary[];
     interactive?: boolean;
     variant?: "inline" | "immersive";
@@ -103,6 +141,14 @@ const props = withDefaults(
     maxZoom: undefined,
     fitPadding: 28,
     activeGeometry: null,
+    overviewGeometry: null,
+    viewportFollowMode: "none",
+    fitOnGeometryChange: true,
+    followResetKey: null,
+    followZoom: 17,
+    showViewportFollowControls: false,
+    resumeFollowLabel: "回到跟随",
+    overviewLabel: "查看全程",
     libraries: () => [],
     interactive: true,
     variant: "inline",
@@ -128,11 +174,10 @@ const containerRef = ref<HTMLElement | null>(null);
 const provider = ref<TencentLBSMapProvider | null>(null);
 const status = ref<MapProviderStatus>("idle");
 const isInitializing = ref(false);
+const followPausedByUser = ref(false);
 let initFrameId: number | null = null;
 let initRetryTimeoutId: number | null = null;
-const hiddenBottomAttributionBleedPx = computed(() =>
-  props.hideBottomAttribution ? 20 : 0,
-);
+const hiddenBottomAttributionBleedPx = computed(() => (props.hideBottomAttribution ? 20 : 0));
 
 const canvasStyle = computed<CSSProperties>(() => ({
   bottom: `-${hiddenBottomAttributionBleedPx.value}px`,
@@ -185,12 +230,37 @@ const customZoomControlsVisible = computed(
   () => props.showZoomControls && props.interactive && !overlayVisible.value,
 );
 
+const resolvedMaxZoom = computed(() => {
+  if (props.viewportFollowMode === "none") {
+    return props.maxZoom;
+  }
+
+  return Math.max(props.maxZoom ?? props.followZoom, props.followZoom);
+});
+
+const activeFollowMarker = computed(() => {
+  const activeGeometry = props.activeGeometry;
+  if (activeGeometry?.kind !== "marker") {
+    return null;
+  }
+  return props.markers.find((marker) => marker.id === activeGeometry.id) ?? null;
+});
+
+const viewportFollowControlsVisible = computed(
+  () =>
+    props.showViewportFollowControls &&
+    props.viewportFollowMode !== "none" &&
+    (!followPausedByUser.value || activeFollowMarker.value !== null) &&
+    props.interactive &&
+    !overlayVisible.value,
+);
+
 const hasUsableContainerSize = (container: HTMLElement): boolean => {
   const rect = container.getBoundingClientRect();
   return rect.width > 0 && rect.height > 0;
 };
 
-const applyMapData = () => {
+const syncMapData = () => {
   const currentProvider = provider.value;
   if (!currentProvider) {
     return;
@@ -202,15 +272,57 @@ const applyMapData = () => {
     center: props.center,
     zoom: props.zoom,
   });
-  currentProvider.fitGeometry({
+};
+
+const fitActiveGeometry = (
+  activeGeometry: MapActiveGeometry = props.activeGeometry ?? { kind: "all" },
+) => {
+  provider.value?.fitGeometry({
     markers: props.markers,
     polylines: props.polylines,
-    activeGeometry: props.activeGeometry ?? { kind: "all" },
+    activeGeometry,
     padding: compensatedFitPadding.value,
-    maxZoom: props.maxZoom,
+    maxZoom: resolvedMaxZoom.value,
   });
 };
 
+const followActiveMarker = (markerId: string) => {
+  const marker = props.markers.find((item) => item.id === markerId);
+  if (!marker) {
+    return;
+  }
+
+  provider.value?.fitMarker({
+    marker,
+    padding: compensatedFitPadding.value,
+    zoom: props.followZoom,
+  });
+};
+
+const applyAutomaticViewport = (source: MapAutomaticViewportSource) => {
+  const action = resolveMapAutomaticViewportAction({
+    activeGeometry: props.activeGeometry ?? { kind: "all" },
+    fitOnGeometryChange: props.fitOnGeometryChange,
+    followPausedByUser: followPausedByUser.value,
+    source,
+    viewportFollowMode: props.viewportFollowMode,
+  });
+
+  if (action.kind === "fit-geometry") {
+    fitActiveGeometry();
+    return;
+  }
+
+  if (action.kind === "follow-active-marker") {
+    followActiveMarker(action.markerId);
+  }
+};
+
+const applyMapData = (source: MapAutomaticViewportSource) => {
+  syncMapData();
+  applyAutomaticViewport(source);
+};
+
 const initMap = async () => {
   const container = containerRef.value;
   if (!container || normalizedApiKey.value.length === 0) {
@@ -237,17 +349,19 @@ const initMap = async () => {
       center: props.center,
       zoom: props.zoom,
       minZoom: props.minZoom,
-      maxZoom: props.maxZoom,
+      maxZoom: resolvedMaxZoom.value,
       interactive: props.interactive,
       showDefaultControls: props.showDefaultControls,
       onMarkerClick: (markerId) => emit("markerClick", markerId),
+      onUserViewportInteraction: () => {
+        handleUserViewportInteraction();
+      },
     });
     status.value = "ready";
-    applyMapData();
+    applyMapData("init");
     emit("ready");
   } catch (error) {
-    const normalizedError =
-      error instanceof Error ? error : new Error(String(error));
+    const normalizedError = error instanceof Error ? error : new Error(String(error));
     status.value = "error";
     emit("error", normalizedError);
   } finally {
@@ -256,13 +370,32 @@ const initMap = async () => {
 };
 
 const zoomIn = () => {
+  handleUserViewportInteraction();
   provider.value?.zoomIn();
 };
 
 const zoomOut = () => {
+  handleUserViewportInteraction();
   provider.value?.zoomOut();
 };
 
+const handleUserViewportInteraction = () => {
+  if (props.viewportFollowMode === "none" || !props.interactive || status.value !== "ready") {
+    return;
+  }
+  followPausedByUser.value = true;
+};
+
+const resumeViewportFollow = () => {
+  followPausedByUser.value = false;
+  applyAutomaticViewport("reset");
+};
+
+const showAllGeometry = () => {
+  followPausedByUser.value = true;
+  fitActiveGeometry(props.overviewGeometry ?? { kind: "all" });
+};
+
 const clearScheduledInitialMapInit = () => {
   if (typeof window === "undefined") {
     return;
@@ -315,16 +448,9 @@ const scheduleInitialMapInit = async (attempt = 0) => {
     initFrameId = null;
     const container = containerRef.value;
     const waitingForSize =
-      container !== null &&
-      normalizedApiKey.value.length > 0 &&
-      !hasUsableContainerSize(container);
-
-    if (
-      !provider.value &&
-      !isInitializing.value &&
-      waitingForSize &&
-      attempt < MAX_INIT_ATTEMPTS
-    ) {
+      container !== null && normalizedApiKey.value.length > 0 && !hasUsableContainerSize(container);
+
+    if (!provider.value && !isInitializing.value && waitingForSize && attempt < MAX_INIT_ATTEMPTS) {
       status.value = "loading";
       scheduleInitialMapInitRetry(attempt + 1);
       return;
@@ -344,22 +470,38 @@ onBeforeUnmount(() => {
   provider.value = null;
 });
 
+watch(
+  () => [props.markers, props.polylines, props.center, props.zoom],
+  () => {
+    applyMapData("geometry");
+  },
+  { deep: true },
+);
+
 watch(
   () => [
-    props.markers,
-    props.polylines,
-    props.center,
-    props.zoom,
     props.fitPadding,
     props.hideBottomAttribution,
     props.activeGeometry,
-    props.maxZoom,
+    props.overviewGeometry,
+    resolvedMaxZoom.value,
+    props.viewportFollowMode,
+    props.fitOnGeometryChange,
+    props.followZoom,
   ],
   () => {
-    applyMapData();
+    applyAutomaticViewport("view-context");
   },
   { deep: true },
 );
+
+watch(
+  () => props.followResetKey,
+  () => {
+    followPausedByUser.value = false;
+    applyAutomaticViewport("reset");
+  },
+);
 </script>
 
 <style scoped lang="scss">
@@ -406,6 +548,39 @@ watch(
   box-shadow: var(--sys-shadow-2);
 }
 
+.map-shell__viewport-controls {
+  position: absolute;
+  left: var(--sys-spacing-small);
+  top: var(--sys-spacing-small);
+  z-index: 10;
+  display: flex;
+  max-width: calc(100% - var(--sys-spacing-small) * 2);
+}
+
+.map-shell__viewport-button {
+  display: inline-flex;
+  min-width: 0;
+  align-items: center;
+  gap: var(--sys-spacing-xsmall);
+  padding: var(--sys-spacing-xsmall) var(--sys-spacing-small);
+  border: 1px solid var(--sys-color-outline-variant);
+  border-radius: var(--sys-radius-pill);
+  background: var(--sys-color-surface);
+  color: var(--sys-color-on-surface);
+  box-shadow: var(--sys-shadow-2);
+  cursor: pointer;
+  font-size: var(--sys-typo-caption-size);
+  font-weight: var(--sys-typo-caption-weight);
+  line-height: var(--sys-typo-caption-line-height);
+
+  span:last-child {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
 .map-shell__zoom-button {
   display: grid;
   width: 2.25rem;
diff --git a/apps/frontend/src/shared/map/tencent/tencent-lbs-provider.test.ts b/apps/frontend/src/shared/map/tencent/tencent-lbs-provider.test.ts
index 36f67c1bd..ae2057625 100644
--- a/apps/frontend/src/shared/map/tencent/tencent-lbs-provider.test.ts
+++ b/apps/frontend/src/shared/map/tencent/tencent-lbs-provider.test.ts
@@ -1,9 +1,249 @@
-import { describe, expect, test } from "vitest";
+// @vitest-environment happy-dom
+
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import {
+  createTencentLBSMapProvider,
+  resolveTencentMapDesignColor,
   resolveTencentMarkerStyleId,
   shouldAnimateTencentMarkerMove,
   toTencentMarkerRotateDegrees,
 } from "./tencent-lbs-provider";
+import type {
+  TencentFitBoundsOptions,
+  TencentLatLng,
+  TencentLatLngBounds,
+  TencentMap,
+  TencentMapEventName,
+  TencentMapOptions,
+  TencentMapSdk,
+  TencentMarkerClickEvent,
+  TencentMarkerStyleOptions,
+  TencentMoveAlongOptions,
+  TencentMoveAlongParamSet,
+  TencentMultiMarker,
+  TencentMultiPolyline,
+  TencentPointGeometry,
+  TencentPolylineGeometry,
+  TencentPolylineStyleOptions,
+} from "./types";
+
+type TencentMapListener = () => void;
+
+class FakeLatLng implements TencentLatLng {
+  constructor(
+    private readonly lat: number,
+    private readonly lng: number,
+  ) {}
+
+  getLat(): number {
+    return this.lat;
+  }
+
+  getLng(): number {
+    return this.lng;
+  }
+}
+
+class FakeLatLngBounds implements TencentLatLngBounds {
+  readonly points: TencentLatLng[];
+
+  constructor(sw: TencentLatLng, ne: TencentLatLng) {
+    this.points = [sw, ne];
+  }
+
+  extend(latLng: TencentLatLng): TencentLatLngBounds {
+    this.points.push(latLng);
+    return this;
+  }
+
+  isEmpty(): boolean {
+    return this.points.length === 0;
+  }
+}
+
+class FakeTencentMap implements TencentMap {
+  static lastInstance: FakeTencentMap | null = null;
+
+  readonly fitBoundsCalls: {
+    bounds: TencentLatLngBounds;
+    options?: TencentFitBoundsOptions;
+  }[] = [];
+  readonly easeToCalls: {
+    options?: { duration?: number };
+    status: { center?: TencentLatLng; zoom?: number; rotation?: number };
+  }[] = [];
+
+  private readonly listeners = new Map<TencentMapEventName, Set<TencentMapListener>>();
+  private rotation: number;
+  private zoom: number;
+
+  constructor(
+    _container: HTMLElement | string,
+    readonly options: TencentMapOptions,
+  ) {
+    this.rotation = options.rotation ?? 0;
+    this.zoom = options.zoom ?? 12;
+    FakeTencentMap.lastInstance = this;
+  }
+
+  setCenter(_center: TencentLatLng): TencentMap {
+    return this;
+  }
+
+  setZoom(zoom: number): TencentMap {
+    this.zoom = zoom;
+    return this;
+  }
+
+  setRotation(rotation: number): TencentMap {
+    this.rotation = rotation;
+    return this;
+  }
+
+  getZoom(): number {
+    return this.zoom;
+  }
+
+  getRotation(): number {
+    return this.rotation;
+  }
+
+  fitBounds(bounds: TencentLatLngBounds, options?: TencentFitBoundsOptions): TencentMap {
+    this.fitBoundsCalls.push({ bounds, options });
+    return this;
+  }
+
+  easeTo(
+    status: { center?: TencentLatLng; zoom?: number; rotation?: number },
+    options?: { duration?: number },
+  ): TencentMap {
+    this.easeToCalls.push({ status, options });
+    if (typeof status.zoom === "number") {
+      this.zoom = status.zoom;
+    }
+    if (typeof status.rotation === "number") {
+      this.rotation = status.rotation;
+    }
+    return this;
+  }
+
+  on(eventName: TencentMapEventName, listener: TencentMapListener): TencentMap {
+    const listeners = this.listeners.get(eventName) ?? new Set<TencentMapListener>();
+    listeners.add(listener);
+    this.listeners.set(eventName, listeners);
+    return this;
+  }
+
+  off(eventName: TencentMapEventName, listener: TencentMapListener): TencentMap {
+    this.listeners.get(eventName)?.delete(listener);
+    return this;
+  }
+
+  emit(eventName: TencentMapEventName): void {
+    for (const listener of this.listeners.get(eventName) ?? []) {
+      listener();
+    }
+  }
+
+  destroy(): void {
+    this.listeners.clear();
+  }
+}
+
+class FakeMarkerStyle {
+  constructor(readonly options: TencentMarkerStyleOptions) {}
+}
+
+class FakePolylineStyle {
+  constructor(readonly options: TencentPolylineStyleOptions) {}
+}
+
+class FakeMultiMarker implements TencentMultiMarker {
+  setGeometries(_geometries: TencentPointGeometry[]): TencentMultiMarker {
+    return this;
+  }
+
+  setStyles(_styles: Record<string, object>): TencentMultiMarker {
+    return this;
+  }
+
+  moveAlong(
+    _param: TencentMoveAlongParamSet,
+    _options?: TencentMoveAlongOptions,
+  ): TencentMultiMarker {
+    return this;
+  }
+
+  stopMove(): TencentMultiMarker {
+    return this;
+  }
+
+  setMap(_map: TencentMap | null): TencentMultiMarker {
+    return this;
+  }
+
+  on(_eventName: "click", _handler: (event: TencentMarkerClickEvent) => void): TencentMultiMarker {
+    return this;
+  }
+
+  off(_eventName: "click", _handler: (event: TencentMarkerClickEvent) => void): TencentMultiMarker {
+    return this;
+  }
+}
+
+class FakeMultiPolyline implements TencentMultiPolyline {
+  setGeometries(_geometries: TencentPolylineGeometry[]): TencentMultiPolyline {
+    return this;
+  }
+
+  setMap(_map: TencentMap | null): TencentMultiPolyline {
+    return this;
+  }
+}
+
+const installFakeTencentSdk = () => {
+  const sdk: TencentMapSdk = {
+    LatLng: FakeLatLng,
+    LatLngBounds: FakeLatLngBounds,
+    Map: FakeTencentMap,
+    MarkerStyle: FakeMarkerStyle,
+    MultiMarker: FakeMultiMarker,
+    MultiPolyline: FakeMultiPolyline,
+    PolylineStyle: FakePolylineStyle,
+  };
+  window.TMap = sdk;
+};
+
+const getLastFakeMap = (): FakeTencentMap => {
+  const map = FakeTencentMap.lastInstance;
+  if (!map) {
+    throw new Error("Expected fake Tencent map instance.");
+  }
+  return map;
+};
+
+afterEach(() => {
+  document.documentElement.removeAttribute("style");
+  window.TMap = undefined;
+  FakeTencentMap.lastInstance = null;
+  vi.useRealTimers();
+});
+
+describe("Tencent LBS design colors", () => {
+  test("falls back to design-web sys token values when CSS variables are unavailable", () => {
+    expect(resolveTencentMapDesignColor("primary")).toBe("#96d945");
+    expect(resolveTencentMapDesignColor("secondary")).toBe("#85976e");
+    expect(resolveTencentMapDesignColor("tertiary")).toBe("#4c9e99");
+    expect(resolveTencentMapDesignColor("danger")).toBe("#d32f2f");
+    expect(resolveTencentMapDesignColor("muted")).toBe("#44483d");
+  });
+
+  test("reads runtime sys color variables for map SDK color values", () => {
+    document.documentElement.style.setProperty("--sys-color-secondary", "#123456");
+
+    expect(resolveTencentMapDesignColor("secondary")).toBe("#123456");
+  });
+});
 
 describe("Tencent LBS marker heading", () => {
   test("converts north-clockwise provider heading to Tencent counter-clockwise rotate", () => {
@@ -81,3 +321,71 @@ describe("Tencent LBS marker heading", () => {
     ).toBe(false);
   });
 });
+
+describe("Tencent LBS viewport following", () => {
+  beforeEach(() => {
+    installFakeTencentSdk();
+  });
+
+  test("follows a single marker with caller supplied follow zoom", async () => {
+    const provider = await createTencentLBSMapProvider({
+      apiKey: "test-key",
+      container: document.createElement("div"),
+    });
+
+    provider.fitMarker({
+      marker: {
+        id: "driver",
+        position: { lat: 30.27, lng: 120.16 },
+      },
+      padding: {
+        top: 12,
+        right: 16,
+        bottom: 240,
+        left: 16,
+      },
+      zoom: 17,
+    });
+
+    const map = getLastFakeMap();
+    expect(map.fitBoundsCalls).toHaveLength(0);
+    expect(map.easeToCalls).toHaveLength(1);
+    expect(map.easeToCalls[0]?.status.center?.getLat()).toBe(30.27);
+    expect(map.easeToCalls[0]?.status.center?.getLng()).toBe(120.16);
+    expect(map.easeToCalls[0]?.status.zoom).toBe(17);
+    expect(map.easeToCalls[0]?.status.rotation).toBeUndefined();
+    expect(map.easeToCalls[0]?.options?.duration).toBe(240);
+    expect(map.getZoom()).toBe(17);
+  });
+
+  test("reports user viewport interactions while suppressing programmatic zoom events", async () => {
+    vi.useFakeTimers();
+    vi.setSystemTime(new Date("2026-01-01T00:00:00.000Z"));
+    const interactions: string[] = [];
+    const provider = await createTencentLBSMapProvider({
+      apiKey: "test-key",
+      container: document.createElement("div"),
+      onUserViewportInteraction: () => {
+        interactions.push("user");
+      },
+    });
+    const map = getLastFakeMap();
+
+    map.emit("dragstart");
+    expect(interactions).toHaveLength(1);
+
+    provider.fitMarker({
+      marker: {
+        id: "driver",
+        position: { lat: 30.27, lng: 120.16 },
+      },
+      zoom: 17,
+    });
+    map.emit("zoom");
+    expect(interactions).toHaveLength(1);
+
+    vi.setSystemTime(new Date("2026-01-01T00:00:00.400Z"));
+    map.emit("zoom");
+    expect(interactions).toHaveLength(2);
+  });
+});
diff --git a/apps/frontend/src/shared/map/tencent/tencent-lbs-provider.ts b/apps/frontend/src/shared/map/tencent/tencent-lbs-provider.ts
index 80144d110..b78aa6173 100644
--- a/apps/frontend/src/shared/map/tencent/tencent-lbs-provider.ts
+++ b/apps/frontend/src/shared/map/tencent/tencent-lbs-provider.ts
@@ -6,6 +6,7 @@ import type {
   MapMarker,
   MapMarkerIcon,
   MapPolyline,
+  MapPolylineTone,
 } from "@/shared/map/types";
 import { loadTencentLBSSdk } from "./tencent-lbs-loader";
 import type {
@@ -14,6 +15,7 @@ import type {
   TencentLBSMapProvider,
   TencentLBSMapProviderInput,
   TencentMap,
+  TencentMapEventName,
   TencentMapOptions,
   TencentMapSdk,
   TencentMarkerClickEvent,
@@ -36,25 +38,31 @@ const SINGLE_POINT_BOUNDS_DELTA = 0.0001;
 const TENCENT_MAP_STYLE_ID = "style1";
 const DRIVER_MARKER_MOVE_DURATION_MS = 1_900;
 const MARKER_MOVE_COORDINATE_EPSILON = 0.000001;
+const PROGRAMMATIC_VIEWPORT_CHANGE_SUPPRESSION_MS = 360;
+const DIRECT_USER_VIEWPORT_INTERACTION_EVENTS: readonly TencentMapEventName[] = [
+  "dragstart",
+  "touchmove",
+  "dblclick",
+];
 
-const MARKER_COLORS: Record<MapGeometryTone | "active", string> = {
-  primary: "#1D63ED",
-  secondary: "#008765",
-  muted: "#5F6B7A",
-  routePrimary: "#85976e",
-  routeSecondary: "#dbe7c8",
-  routeInvalid: "#abaca5",
-  active: "#C7472F",
+type TencentMapDesignColorRole = MapPolylineTone | "muted" | "active";
+
+const DESIGN_COLOR_VARIABLES: Record<TencentMapDesignColorRole, string> = {
+  primary: "--sys-color-primary",
+  secondary: "--sys-color-secondary",
+  tertiary: "--sys-color-tertiary",
+  danger: "--sys-color-error",
+  muted: "--sys-color-on-surface-variant",
+  active: "--sys-color-primary",
 };
 
-const POLYLINE_COLORS: Record<MapGeometryTone | "active", string> = {
-  primary: "#1D63ED",
-  secondary: "#008765",
-  muted: "#5F6B7A",
-  routePrimary: "#85976e",
-  routeSecondary: "#dbe7c8",
-  routeInvalid: "#abaca5",
-  active: "#C7472F",
+const DESIGN_COLOR_FALLBACKS: Record<TencentMapDesignColorRole, string> = {
+  primary: "#96d945",
+  secondary: "#85976e",
+  tertiary: "#4c9e99",
+  danger: "#d32f2f",
+  muted: "#44483d",
+  active: "#96d945",
 };
 
 const ROUTE_MARKER_ICON_SRC: Record<MapMarkerIcon, string> = {
@@ -70,6 +78,39 @@ const createMarkerSvg = (color: string): string => {
   return `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(svg)}`;
 };
 
+const readDocumentCssVariable = (variableName: string): string | null => {
+  if (
+    typeof window === "undefined" ||
+    typeof document === "undefined" ||
+    typeof window.getComputedStyle !== "function"
+  ) {
+    return null;
+  }
+
+  const value = window.getComputedStyle(document.documentElement).getPropertyValue(variableName);
+  const trimmedValue = value.trim();
+  return trimmedValue.length > 0 ? trimmedValue : null;
+};
+
+export const resolveTencentMapDesignColor = (role: TencentMapDesignColorRole): string =>
+  readDocumentCssVariable(DESIGN_COLOR_VARIABLES[role]) ?? DESIGN_COLOR_FALLBACKS[role];
+
+const resolveMarkerColors = (): Record<MapGeometryTone | "active", string> => ({
+  primary: resolveTencentMapDesignColor("primary"),
+  secondary: resolveTencentMapDesignColor("secondary"),
+  tertiary: resolveTencentMapDesignColor("tertiary"),
+  danger: resolveTencentMapDesignColor("danger"),
+  muted: resolveTencentMapDesignColor("muted"),
+  active: resolveTencentMapDesignColor("active"),
+});
+
+const resolvePolylineColors = (): Record<MapPolylineTone, string> => ({
+  primary: resolveTencentMapDesignColor("primary"),
+  secondary: resolveTencentMapDesignColor("secondary"),
+  tertiary: resolveTencentMapDesignColor("tertiary"),
+  danger: resolveTencentMapDesignColor("danger"),
+});
+
 const isFiniteCoordinate = (coordinate: MapCoordinate): boolean =>
   Number.isFinite(coordinate.lat) && Number.isFinite(coordinate.lng);
 
@@ -117,8 +158,8 @@ export const resolveTencentMarkerStyleId = (
   return marker.icon ?? (marker.active ? "active" : (marker.tone ?? "primary"));
 };
 
-const resolvePolylineStyleId = (polyline: MapPolyline): MapGeometryTone | "active" =>
-  polyline.active ? "active" : (polyline.tone ?? "primary");
+const resolvePolylineStyleId = (polyline: MapPolyline): MapPolylineTone =>
+  polyline.tone ?? "primary";
 
 const createRouteDriverMarkerStyle = (
   sdk: TencentMapSdk,
@@ -141,50 +182,43 @@ const createMarkerStyles = (
   sdk: TencentMapSdk,
   markers: readonly MapMarker[] = [],
 ): Record<string, TencentMarkerStyle> => {
+  const markerColors = resolveMarkerColors();
   const styles: Record<string, TencentMarkerStyle> = {
     primary: new sdk.MarkerStyle({
       width: 28,
       height: 36,
       anchor: { x: 14, y: 36 },
-      src: createMarkerSvg(MARKER_COLORS.primary),
-      color: "#FFFFFF",
-      strokeColor: "rgba(0,0,0,0)",
-      size: 12,
-      direction: "center",
-      offset: { x: 0, y: -7 },
+      src: createMarkerSvg(markerColors.primary),
     }),
     secondary: new sdk.MarkerStyle({
       width: 28,
       height: 36,
       anchor: { x: 14, y: 36 },
-      src: createMarkerSvg(MARKER_COLORS.secondary),
-      color: "#FFFFFF",
-      strokeColor: "rgba(0,0,0,0)",
-      size: 12,
-      direction: "center",
-      offset: { x: 0, y: -7 },
+      src: createMarkerSvg(markerColors.secondary),
+    }),
+    tertiary: new sdk.MarkerStyle({
+      width: 28,
+      height: 36,
+      anchor: { x: 14, y: 36 },
+      src: createMarkerSvg(markerColors.tertiary),
+    }),
+    danger: new sdk.MarkerStyle({
+      width: 28,
+      height: 36,
+      anchor: { x: 14, y: 36 },
+      src: createMarkerSvg(markerColors.danger),
     }),
     muted: new sdk.MarkerStyle({
       width: 28,
       height: 36,
       anchor: { x: 14, y: 36 },
-      src: createMarkerSvg(MARKER_COLORS.muted),
-      color: "#FFFFFF",
-      strokeColor: "rgba(0,0,0,0)",
-      size: 12,
-      direction: "center",
-      offset: { x: 0, y: -7 },
+      src: createMarkerSvg(markerColors.muted),
     }),
     active: new sdk.MarkerStyle({
       width: 32,
       height: 40,
       anchor: { x: 16, y: 40 },
-      src: createMarkerSvg(MARKER_COLORS.active),
-      color: "#FFFFFF",
-      strokeColor: "rgba(0,0,0,0)",
-      size: 12,
-      direction: "center",
-      offset: { x: 0, y: -8 },
+      src: createMarkerSvg(markerColors.active),
     }),
     routeStart: new sdk.MarkerStyle({
       width: 24,
@@ -218,61 +252,43 @@ const createMarkerStyles = (
   return styles;
 };
 
-const createPolylineStyles = (sdk: TencentMapSdk) => ({
-  primary: new sdk.PolylineStyle({
-    color: POLYLINE_COLORS.primary,
-    width: 5,
-    borderWidth: 2,
-    borderColor: "rgba(255,255,255,0.9)",
-    lineCap: "round",
-  }),
-  secondary: new sdk.PolylineStyle({
-    color: POLYLINE_COLORS.secondary,
-    width: 5,
-    borderWidth: 2,
-    borderColor: "rgba(255,255,255,0.9)",
-    lineCap: "round",
-  }),
-  muted: new sdk.PolylineStyle({
-    color: POLYLINE_COLORS.muted,
-    width: 4,
-    borderWidth: 2,
-    borderColor: "rgba(255,255,255,0.88)",
-    lineCap: "round",
-    dashArray: [8, 8],
-  }),
-  routePrimary: new sdk.PolylineStyle({
-    color: POLYLINE_COLORS.routePrimary,
-    width: 7,
-    borderWidth: 1,
-    borderColor: "#ffffff",
-    lineCap: "round",
-    showArrow: true,
-  }),
-  routeSecondary: new sdk.PolylineStyle({
-    color: POLYLINE_COLORS.routeSecondary,
-    width: 7,
-    borderWidth: 1,
-    borderColor: "#ffffff",
-    lineCap: "round",
-    showArrow: true,
-  }),
-  routeInvalid: new sdk.PolylineStyle({
-    color: POLYLINE_COLORS.routeInvalid,
-    width: 7,
-    borderWidth: 1,
-    borderColor: "#5e5f59",
-    lineCap: "round",
-    showArrow: true,
-  }),
-  active: new sdk.PolylineStyle({
-    color: POLYLINE_COLORS.active,
-    width: 6,
-    borderWidth: 2,
-    borderColor: "rgba(255,255,255,0.95)",
-    lineCap: "round",
-  }),
-});
+const createPolylineStyles = (sdk: TencentMapSdk) => {
+  const polylineColors = resolvePolylineColors();
+  return {
+    primary: new sdk.PolylineStyle({
+      color: polylineColors.primary,
+      width: 7,
+      borderWidth: 1,
+      borderColor: "rgba(255,255,255,0.95)",
+      lineCap: "round",
+      showArrow: true,
+    }),
+    secondary: new sdk.PolylineStyle({
+      color: polylineColors.secondary,
+      width: 7,
+      borderWidth: 1,
+      borderColor: "rgba(255,255,255,0.95)",
+      lineCap: "round",
+      showArrow: true,
+    }),
+    tertiary: new sdk.PolylineStyle({
+      color: polylineColors.tertiary,
+      width: 7,
+      borderWidth: 1,
+      borderColor: "rgba(255,255,255,0.95)",
+      lineCap: "round",
+      showArrow: true,
+    }),
+    danger: new sdk.PolylineStyle({
+      color: polylineColors.danger,
+      width: 7,
+      borderWidth: 1,
+      borderColor: "rgba(255,255,255,0.95)",
+      lineCap: "round",
+      showArrow: true,
+    }),
+  };
+};
 
 const toMarkerGeometries = (
   sdk: TencentMapSdk,
@@ -290,10 +306,6 @@ const toMarkerGeometries = (
           title: marker.title ?? marker.label ?? marker.id,
         },
       };
-      const content = marker.calloutLabel ?? marker.label ?? "";
-      if (content.length > 0) {
-        geometry.content = content;
-      }
       return geometry;
     });
 
@@ -380,6 +392,17 @@ const collectActiveCoordinates = ({
     return marker && isFiniteCoordinate(marker.position) ? [marker.position] : [];
   }
 
+  if (activeGeometry.kind === "selection") {
+    const markerIds = new Set(activeGeometry.markerIds ?? []);
+    const polylineIds = new Set(activeGeometry.polylineIds ?? []);
+    return [
+      ...markers.filter((marker) => markerIds.has(marker.id)).map((marker) => marker.position),
+      ...polylines
+        .filter((polyline) => polylineIds.has(polyline.id))
+        .flatMap((polyline) => polyline.path),
+    ].filter(isFiniteCoordinate);
+  }
+
   const polyline = polylines.find((item) => item.id === activeGeometry.id);
   return polyline ? polyline.path.filter(isFiniteCoordinate) : [];
 };
@@ -390,12 +413,14 @@ const fitCoordinates = ({
   coordinates,
   padding,
   maxZoom,
+  singlePointMaxZoom,
 }: {
   sdk: TencentMapSdk;
   map: TencentMap;
   coordinates: readonly MapCoordinate[];
   padding?: MapFitPadding;
   maxZoom?: number;
+  singlePointMaxZoom?: number;
 }) => {
   const validCoordinates = coordinates.filter(isFiniteCoordinate);
   const firstCoordinate = validCoordinates[0];
@@ -413,11 +438,12 @@ const fitCoordinates = ({
       bounds.extend(toTencentLatLng(sdk, coordinate));
     });
   }
+  const resolvedSinglePointMaxZoom = singlePointMaxZoom ?? SINGLE_POINT_ZOOM;
   map.fitBounds(bounds, {
     padding,
     maxZoom:
       validCoordinates.length === 1
-        ? Math.min(maxZoom ?? SINGLE_POINT_ZOOM, SINGLE_POINT_ZOOM)
+        ? Math.min(maxZoom ?? resolvedSinglePointMaxZoom, resolvedSinglePointMaxZoom)
         : maxZoom,
     ease: { duration: 240 },
   });
@@ -434,6 +460,7 @@ export const createTencentLBSMapProvider = async ({
   interactive = true,
   showDefaultControls = true,
   onMarkerClick,
+  onUserViewportInteraction,
 }: TencentLBSMapProviderInput): Promise<TencentLBSMapProvider> => {
   const sdk = await loadTencentLBSSdk({ key: apiKey, libraries });
   const mapOptions: TencentMapOptions = {
@@ -454,6 +481,24 @@ export const createTencentLBSMapProvider = async ({
     mapOptions.maxZoom = maxZoom;
   }
   const map = new sdk.Map(container, mapOptions);
+  let suppressUserViewportInteractionUntil = 0;
+  const runProgrammaticViewportChange = (callback: () => void) => {
+    suppressUserViewportInteractionUntil = Date.now() + PROGRAMMATIC_VIEWPORT_CHANGE_SUPPRESSION_MS;
+    callback();
+  };
+  const emitUserViewportInteraction = () => {
+    onUserViewportInteraction?.();
+  };
+  const handleMaybeUserViewportInteraction = () => {
+    if (Date.now() < suppressUserViewportInteractionUntil) {
+      return;
+    }
+    emitUserViewportInteraction();
+  };
+  for (const eventName of DIRECT_USER_VIEWPORT_INTERACTION_EVENTS) {
+    map.on(eventName, emitUserViewportInteraction);
+  }
+  map.on("zoom", handleMaybeUserViewportInteraction);
 
   let markerLayer: TencentMultiMarker | null = new sdk.MultiMarker({
     id: "partner-up-marker-layer",
@@ -501,33 +546,59 @@ export const createTencentLBSMapProvider = async ({
       polylineLayer?.setGeometries(toPolylineGeometries(sdk, polylines));
     },
     fitGeometry({ markers, polylines, activeGeometry, padding, maxZoom }) {
-      fitCoordinates({
-        sdk,
-        map,
-        coordinates: collectActiveCoordinates({
-          markers,
-          polylines,
-          activeGeometry,
-        }),
-        padding,
-        maxZoom,
+      runProgrammaticViewportChange(() => {
+        fitCoordinates({
+          sdk,
+          map,
+          coordinates: collectActiveCoordinates({
+            markers,
+            polylines,
+            activeGeometry,
+          }),
+          padding,
+          maxZoom,
+        });
+      });
+    },
+    fitMarker({ marker, zoom: markerZoom }) {
+      runProgrammaticViewportChange(() => {
+        if (!isFiniteCoordinate(marker.position)) {
+          return;
+        }
+        map.easeTo(
+          {
+            center: toTencentLatLng(sdk, marker.position),
+            zoom: markerZoom,
+          },
+          { duration: 240 },
+        );
       });
     },
     setViewport({ center: nextCenter, zoom: nextZoom }) {
-      if (nextCenter) {
-        map.setCenter(toTencentLatLng(sdk, nextCenter));
-      }
-      if (typeof nextZoom === "number") {
-        map.setZoom(nextZoom);
-      }
+      runProgrammaticViewportChange(() => {
+        if (nextCenter) {
+          map.setCenter(toTencentLatLng(sdk, nextCenter));
+        }
+        if (typeof nextZoom === "number") {
+          map.setZoom(nextZoom);
+        }
+      });
     },
     zoomIn() {
-      map.setZoom(Math.min(map.getZoom() + 1, maxZoom ?? 20));
+      runProgrammaticViewportChange(() => {
+        map.setZoom(Math.min(map.getZoom() + 1, maxZoom ?? 20));
+      });
     },
     zoomOut() {
-      map.setZoom(Math.max(map.getZoom() - 1, minZoom ?? 3));
+      runProgrammaticViewportChange(() => {
+        map.setZoom(Math.max(map.getZoom() - 1, minZoom ?? 3));
+      });
     },
     destroy() {
+      for (const eventName of DIRECT_USER_VIEWPORT_INTERACTION_EVENTS) {
+        map.off(eventName, emitUserViewportInteraction);
+      }
+      map.off("zoom", handleMaybeUserViewportInteraction);
       markerLayer?.off("click", handleMarkerClick);
       markerLayer?.stopMove();
       markerLayer?.setMap(null);
diff --git a/apps/frontend/src/shared/map/tencent/types.ts b/apps/frontend/src/shared/map/tencent/types.ts
index b2395e0d1..445a8e1b8 100644
--- a/apps/frontend/src/shared/map/tencent/types.ts
+++ b/apps/frontend/src/shared/map/tencent/types.ts
@@ -20,6 +20,7 @@ export type TencentFitBoundsOptions = {
 export type TencentMapOptions = {
   center: TencentLatLng;
   zoom?: number;
+  rotation?: number;
   minZoom?: number;
   maxZoom?: number;
   mapStyleId?: string;
@@ -52,15 +53,21 @@ export type TencentLatLngBoundsConstructor = {
 export type TencentMap = {
   setCenter(center: TencentLatLng): TencentMap;
   setZoom(zoom: number): TencentMap;
+  setRotation(rotation: number): TencentMap;
   getZoom(): number;
+  getRotation(): number;
   fitBounds(bounds: TencentLatLngBounds, options?: TencentFitBoundsOptions): TencentMap;
   easeTo(
-    status: { center?: TencentLatLng; zoom?: number },
+    status: { center?: TencentLatLng; zoom?: number; rotation?: number },
     options?: { duration?: number },
   ): TencentMap;
+  on(eventName: TencentMapEventName, listener: () => void): TencentMap;
+  off(eventName: TencentMapEventName, listener: () => void): TencentMap;
   destroy(): void;
 };
 
+export type TencentMapEventName = "dragstart" | "touchmove" | "dblclick" | "zoom";
+
 export type TencentMapConstructor = {
   new (container: HTMLElement | string, options: TencentMapOptions): TencentMap;
 };
@@ -72,12 +79,6 @@ export type TencentMarkerStyleOptions = {
   src?: string;
   faceTo?: "map" | "screen";
   rotate?: number;
-  color?: string;
-  strokeColor?: string;
-  strokeWidth?: number;
-  size?: number;
-  direction?: "center" | "top" | "bottom" | "left" | "right";
-  offset?: { x: number; y: number };
 };
 
 export type TencentMarkerStyle = object;
@@ -91,7 +92,6 @@ export type TencentPointGeometry = {
   styleId: string;
   position: TencentLatLng;
   rank?: number;
-  content?: string;
   properties?: Record<string, string>;
 };
 
@@ -195,6 +195,7 @@ export type TencentLBSMapProviderInput = {
   interactive?: boolean;
   showDefaultControls?: boolean;
   onMarkerClick?: (markerId: string) => void;
+  onUserViewportInteraction?: () => void;
 };
 
 export type TencentLBSMapProvider = {
@@ -207,6 +208,7 @@ export type TencentLBSMapProvider = {
     padding?: MapFitPadding;
     maxZoom?: number;
   }): void;
+  fitMarker(input: { marker: MapMarker; padding?: MapFitPadding; zoom: number }): void;
   setViewport(input: { center?: MapCoordinate; zoom?: number }): void;
   zoomIn(): void;
   zoomOut(): void;
diff --git a/apps/frontend/src/shared/map/types.ts b/apps/frontend/src/shared/map/types.ts
index 6141b6f03..0ec4d9b2d 100644
--- a/apps/frontend/src/shared/map/types.ts
+++ b/apps/frontend/src/shared/map/types.ts
@@ -12,13 +12,11 @@ export type MapFitPadding =
       left: number;
     };
 
-export type MapGeometryTone =
-  | "primary"
-  | "secondary"
-  | "muted"
-  | "routePrimary"
-  | "routeSecondary"
-  | "routeInvalid";
+export type MapGeometryTone = "primary" | "secondary" | "tertiary" | "danger" | "muted";
+
+export type MapPolylineTone = "primary" | "secondary" | "tertiary" | "danger";
+
+export type MapViewportFollowMode = "none" | "active-marker";
 
 export type MapMarkerIcon = "routeStart" | "routeWaypoint" | "routeEnd" | "routeDriver";
 
@@ -38,7 +36,7 @@ export type MapPolyline = {
   id: string;
   path: readonly MapCoordinate[];
   title?: string;
-  tone?: MapGeometryTone;
+  tone?: MapPolylineTone;
   active?: boolean;
 };
 
@@ -47,6 +45,11 @@ export type MapActiveGeometry =
       kind: "marker" | "polyline";
       id: string;
     }
+  | {
+      kind: "selection";
+      markerIds?: readonly string[];
+      polylineIds?: readonly string[];
+    }
   | {
       kind: "all";
     }
diff --git a/apps/frontend/src/shared/map/viewport-follow.test.ts b/apps/frontend/src/shared/map/viewport-follow.test.ts
new file mode 100644
index 000000000..1305e0856
--- /dev/null
+++ b/apps/frontend/src/shared/map/viewport-follow.test.ts
@@ -0,0 +1,79 @@
+import { describe, expect, test } from "vitest";
+import { resolveMapAutomaticViewportAction } from "./viewport-follow";
+
+describe("resolveMapAutomaticViewportAction", () => {
+  test("keeps static maps fitting on geometry changes by default", () => {
+    expect(
+      resolveMapAutomaticViewportAction({
+        activeGeometry: { kind: "all" },
+        fitOnGeometryChange: true,
+        followPausedByUser: false,
+        source: "geometry",
+        viewportFollowMode: "none",
+      }),
+    ).toEqual({ kind: "fit-geometry" });
+  });
+
+  test("does not auto-fit static map geometry changes when disabled", () => {
+    expect(
+      resolveMapAutomaticViewportAction({
+        activeGeometry: { kind: "all" },
+        fitOnGeometryChange: false,
+        followPausedByUser: false,
+        source: "geometry",
+        viewportFollowMode: "none",
+      }),
+    ).toEqual({ kind: "none" });
+  });
+
+  test("follows active marker instead of fitting all geometry", () => {
+    expect(
+      resolveMapAutomaticViewportAction({
+        activeGeometry: { kind: "marker", id: "driver" },
+        fitOnGeometryChange: true,
+        followPausedByUser: false,
+        source: "geometry",
+        viewportFollowMode: "active-marker",
+      }),
+    ).toEqual({
+      kind: "follow-active-marker",
+      markerId: "driver",
+    });
+  });
+
+  test("pauses all automatic viewport changes after user interaction", () => {
+    expect(
+      resolveMapAutomaticViewportAction({
+        activeGeometry: { kind: "marker", id: "driver" },
+        fitOnGeometryChange: true,
+        followPausedByUser: true,
+        source: "geometry",
+        viewportFollowMode: "active-marker",
+      }),
+    ).toEqual({ kind: "none" });
+  });
+
+  test("does not fit dynamic route geometry updates when no marker target is available", () => {
+    expect(
+      resolveMapAutomaticViewportAction({
+        activeGeometry: { kind: "polyline", id: "live-route" },
+        fitOnGeometryChange: true,
+        followPausedByUser: false,
+        source: "geometry",
+        viewportFollowMode: "active-marker",
+      }),
+    ).toEqual({ kind: "none" });
+  });
+
+  test("allows explicit reset to fit non-marker dynamic geometry", () => {
+    expect(
+      resolveMapAutomaticViewportAction({
+        activeGeometry: { kind: "polyline", id: "live-route" },
+        fitOnGeometryChange: true,
+        followPausedByUser: false,
+        source: "reset",
+        viewportFollowMode: "active-marker",
+      }),
+    ).toEqual({ kind: "fit-geometry" });
+  });
+});
diff --git a/apps/frontend/src/shared/map/viewport-follow.ts b/apps/frontend/src/shared/map/viewport-follow.ts
new file mode 100644
index 000000000..57b52257a
--- /dev/null
+++ b/apps/frontend/src/shared/map/viewport-follow.ts
@@ -0,0 +1,50 @@
+import type { MapActiveGeometry, MapViewportFollowMode } from "@/shared/map/types";
+
+export type MapAutomaticViewportSource = "init" | "geometry" | "view-context" | "reset";
+
+export type MapAutomaticViewportAction =
+  | {
+      kind: "none";
+    }
+  | {
+      kind: "fit-geometry";
+    }
+  | {
+      kind: "follow-active-marker";
+      markerId: string;
+    };
+
+export const resolveMapAutomaticViewportAction = ({
+  activeGeometry,
+  fitOnGeometryChange,
+  followPausedByUser,
+  source,
+  viewportFollowMode,
+}: {
+  activeGeometry: MapActiveGeometry;
+  fitOnGeometryChange: boolean;
+  followPausedByUser: boolean;
+  source: MapAutomaticViewportSource;
+  viewportFollowMode: MapViewportFollowMode;
+}): MapAutomaticViewportAction => {
+  if (viewportFollowMode === "active-marker") {
+    if (followPausedByUser) {
+      return { kind: "none" };
+    }
+
+    if (activeGeometry?.kind === "marker") {
+      return {
+        kind: "follow-active-marker",
+        markerId: activeGeometry.id,
+      };
+    }
+
+    return source === "geometry" ? { kind: "none" } : { kind: "fit-geometry" };
+  }
+
+  if (source === "geometry" && !fitOnGeometryChange) {
+    return { kind: "none" };
+  }
+
+  return { kind: "fit-geometry" };
+};
diff --git a/tasks/ride-hailing-ui-fixes/change-log.md b/tasks/ride-hailing-ui-fixes/change-log.md
index 831157009..3926d41c2 100644
--- a/tasks/ride-hailing-ui-fixes/change-log.md
+++ b/tasks/ride-hailing-ui-fixes/change-log.md
@@ -133,6 +133,41 @@ Archived full history:
     `routeDriver` coordinate changes
   - route-driver marker style uses `faceTo: "map"` for Tencent auto-rotation
   - non-driver route markers still update directly
+- Implemented route map polyline tone correction:
+  - moved route-specific polyline tone policy into `RouteMap`
+  - route polylines now use `secondary` by default
+  - multiple planned polylines allocate `secondary` / `tertiary` / `primary`
+    to reduce same-color overlap
+  - fallback straight-line geometry uses `danger`
+  - RideHailing provider live route is no longer recolored by `active`
+    polyline state
+- Corrected map tone colors to design-system tokens:
+  - Tencent map provider now resolves tone colors from `--sys-color-*`
+    variables
+  - `danger` maps to `--sys-color-error`
+  - fallback values match the current `@partner-up-dev/design-web` sys tokens
+    instead of private map hex values
+- Implemented route map viewport follow mode:
+  - `SharedMap` now supports active-marker following, user-paused follow, resume
+    follow, and "view full route" controls
+  - `RouteMap` exposes generic follow-mode props without coupling to RideHailing
+    lifecycle state
+  - RideHailing order detail follows the driver marker during pickup and trip
+    phases at a fixed follow zoom
+  - RideHailing order detail follow zoom was reduced from `17` to `15` to keep
+    more surrounding route context visible
+  - live route or driver geometry updates no longer force full-route fit while
+    the user is browsing the map
+  - follow resume now restores the configured zoom and recenters on the driver
+    marker
+  - follow marker recenter now uses `easeTo(center, zoom)` instead of
+    `fitBounds` followed by `setZoom`, avoiding zoom-only resume failures
+  - follow mode now raises the map provider max zoom to at least the configured
+    follow zoom, avoiding SDK clamp from the generic RouteMap max zoom
+  - map-level driver-heading rotation was reverted; the map stays north-up while
+    the vehicle marker itself still uses heading-aware rendering
+  - pickup overview now fits the provider route, driver marker, and origin
+    marker instead of every route point
 
 ## Verification
 

From a71beb965d028c000ff80cf838a082757f477d5a Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Wed, 24 Jun 2026 17:40:04 +0800
Subject: [PATCH 44/94] fix(ride-hailing): correct order detail backflow

- skip the intermediate ordering page when returning from ride-hailing order detail
- show a readonly resolved service-vehicle section above route facts
- update scenario coverage and task packet state for the completed slice
---
 .../order-detail/RideHailingOrderContent.vue  | 235 ++++++++----------
 .../src/pages/CommerceOrderDetailPage.vue     |  56 ++++-
 tasks/ride-hailing-ui-fixes/change-log.md     |  23 ++
 tasks/ride-hailing-ui-fixes/control.md        |  56 ++++-
 tasks/ride-hailing-ui-fixes/discussion-log.md |  54 +++-
 ...r-detail-back-and-resolved-vehicle-plan.md | 123 +++++++++
 .../ride-hailing-ordering.scenario.test.ts    |  38 ++-
 7 files changed, 433 insertions(+), 152 deletions(-)
 create mode 100644 tasks/ride-hailing-ui-fixes/order-detail-back-and-resolved-vehicle-plan.md

diff --git a/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue b/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue
index 9206e0b5e..350562e41 100644
--- a/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue
+++ b/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue
@@ -1,46 +1,19 @@
 <template>
-  <section
-    ref="contentRoot"
-    class="ride-hailing-order-content"
-    data-testid="order-detail.ride-hailing.page"
-    :data-map-mode="orderMapViewModel.mode"
-  >
-    <RouteMap
-      class="ride-hailing-order-content__route-map"
-      data-testid="order-detail.ride-hailing.route-map"
-      :data-map-mode="orderMapViewModel.mode"
-      :route="routeForMap"
-      :planned-polyline="orderMapViewModel.plannedPolyline"
-      :extra-markers="orderMapViewModel.extraMarkers"
-      :extra-polylines="orderMapViewModel.extraPolylines"
-      :plan-route="orderMapViewModel.planRoute"
-      :show-fallback-polyline="orderMapViewModel.showFallbackPolyline"
-      :active-geometry="orderMapViewModel.activeGeometry"
-      :overview-geometry="orderMapViewModel.overviewGeometry"
-      :viewport-follow-mode="routeMapViewportFollowMode"
-      :follow-reset-key="orderMapViewModel.mode"
-      :follow-zoom="15"
-      :show-viewport-follow-controls="routeMapViewportFollowMode !== 'none'"
-      :fit-padding="routeMapFitPadding"
-      :interactive="true"
-      variant="immersive"
-      hide-bottom-attribution
-    />
-
-    <PuFloatPanel
-      v-model="panelStop"
-      class="ride-hailing-order-content__panel"
-      :stops="panelStops"
-      position="absolute"
-      :content-padding="false"
-      aria-label="网约车订单状态面板"
-      :z-index="20"
-    >
+  <section ref="contentRoot" class="ride-hailing-order-content" data-testid="order-detail.ride-hailing.page"
+    :data-map-mode="orderMapViewModel.mode">
+    <RouteMap class="ride-hailing-order-content__route-map" data-testid="order-detail.ride-hailing.route-map"
+      :data-map-mode="orderMapViewModel.mode" :route="routeForMap" :planned-polyline="orderMapViewModel.plannedPolyline"
+      :extra-markers="orderMapViewModel.extraMarkers" :extra-polylines="orderMapViewModel.extraPolylines"
+      :plan-route="orderMapViewModel.planRoute" :show-fallback-polyline="orderMapViewModel.showFallbackPolyline"
+      :active-geometry="orderMapViewModel.activeGeometry" :overview-geometry="orderMapViewModel.overviewGeometry"
+      :viewport-follow-mode="routeMapViewportFollowMode" :follow-reset-key="orderMapViewModel.mode" :follow-zoom="15"
+      :show-viewport-follow-controls="routeMapViewportFollowMode !== 'none'" :fit-padding="routeMapFitPadding"
+      :interactive="true" variant="immersive" hide-bottom-attribution />
+
+    <PuFloatPanel v-model="panelStop" class="ride-hailing-order-content__panel" :stops="panelStops" position="absolute"
+      :content-padding="false" aria-label="网约车订单状态面板" :z-index="20">
       <div class="ride-hailing-order-content__panel-body">
-        <header
-          class="ride-hailing-order-content__status-hero"
-          data-testid="order-detail.ride-hailing.status-hero"
-        >
+        <header class="ride-hailing-order-content__status-hero" data-testid="order-detail.ride-hailing.status-hero">
           <div class="ride-hailing-order-content__status-copy">
             <h2 data-testid="order-detail.ride-hailing.status-title">
               {{ statusHero.title }}
@@ -51,57 +24,23 @@
           </div>
 
           <div class="ride-hailing-order-content__status-actions">
-            <PuButton
-              v-if="showsCancelAction"
-              type="button"
-              size="sm"
-              shape="pill"
-              tone="neutral"
-              variant="outline"
-              disabled
-              title="取消订单能力待接入"
-              data-testid="order-detail.ride-hailing.cancel"
-            >
+            <PuButton v-if="showsCancelAction" type="button" size="sm" shape="pill" tone="neutral" variant="outline"
+              disabled title="取消订单能力待接入" data-testid="order-detail.ride-hailing.cancel">
               取消订单
             </PuButton>
-            <PuButton
-              type="button"
-              size="sm"
-              shape="circle"
-              tone="neutral"
-              variant="ghost"
-              disabled
-              aria-label="更多操作"
-              title="更多操作待接入"
-              data-testid="order-detail.ride-hailing.more"
-            >
+            <PuButton type="button" size="sm" shape="circle" tone="neutral" variant="ghost" disabled aria-label="更多操作"
+              title="更多操作待接入" data-testid="order-detail.ride-hailing.more">
               <span class="i-mdi-dots-horizontal" aria-hidden="true"></span>
             </PuButton>
           </div>
         </header>
 
-        <PuCard
-          v-if="showsDriverCard"
-          as="section"
-          class="ride-hailing-order-content__driver-card"
-          variant="soft"
-          tone="neutral"
-          padding="sm"
-          gap="sm"
-          data-testid="order-detail.ride-hailing.driver-card"
-        >
+        <PuCard v-if="showsDriverCard" as="section" class="ride-hailing-order-content__driver-card" variant="soft"
+          tone="neutral" padding="sm" gap="sm" data-testid="order-detail.ride-hailing.driver-card">
           <div class="ride-hailing-order-content__driver-layout">
             <div class="ride-hailing-order-content__driver-profile">
-              <PuImg
-                src=""
-                :alt="driverName"
-                :name="driverName"
-                :fallback-initial="driverAvatarInitial"
-                size="medium"
-                shape="circle"
-                :show-loading="false"
-                bordered
-              />
+              <PuImg src="" :alt="driverName" :name="driverName" :fallback-initial="driverAvatarInitial" size="medium"
+                shape="circle" :show-loading="false" bordered />
               <strong data-testid="order-detail.ride-hailing.driver-name">
                 {{ driverName }}
               </strong>
@@ -116,18 +55,9 @@
               </span>
             </div>
 
-            <PuButton
-              type="button"
-              size="sm"
-              shape="rect"
-              tone="primary"
-              variant="outline"
-              :disabled="!driverCallHref"
-              :action="driverCallHref ? { href: driverCallHref } : undefined"
-              aria-label="联系司机"
-              title="联系司机"
-              data-testid="order-detail.ride-hailing.driver-call"
-            >
+            <PuButton type="button" size="sm" shape="rect" tone="primary" variant="outline" :disabled="!driverCallHref"
+              :action="driverCallHref ? { href: driverCallHref } : undefined" aria-label="联系司机" title="联系司机"
+              data-testid="order-detail.ride-hailing.driver-call">
               <template #leading>
                 <span class="i-mdi-phone" aria-hidden="true"></span>
               </template>
@@ -135,48 +65,36 @@
           </div>
         </PuCard>
 
-        <section
-          v-if="showsDispatchingCandidateVehicles"
-          class="ride-hailing-order-content__candidate-section"
-          data-testid="order-detail.ride-hailing.dispatching-skus"
-        >
-          <RideHailingSkuCard
-            v-for="candidate in props.ride.candidateVehicles"
-            :key="candidate.skuId"
-            readonly
-            :display-name="candidate.displayName"
-            :price-label="formatFen(candidate.quoteAmountFen)"
-            :preview-src="directImageSrc(candidate.previewImageAssetId)"
-            :selectable="false"
-            :selected="false"
-          />
+        <section v-if="showsDispatchingCandidateVehicles" class="ride-hailing-order-content__candidate-section"
+          data-testid="order-detail.ride-hailing.dispatching-skus">
+          <RideHailingSkuCard v-for="candidate in props.ride.candidateVehicles" :key="candidate.skuId" readonly
+            :display-name="candidate.displayName" :price-label="formatFen(candidate.quoteAmountFen)"
+            :preview-src="directImageSrc(candidate.previewImageAssetId)" :selectable="false" :selected="false" />
         </section>
 
         <div class="ride-hailing-order-content__facts">
-          <section
-            class="ride-hailing-order-content__fact-section"
-            data-testid="order-detail.ride-hailing.route-section"
-          >
+          <section v-if="resolvedServiceVehicles.length > 0" class="ride-hailing-order-content__fact-section"
+            data-testid="order-detail.ride-hailing.resolved-vehicle-section">
+            <h3>服务车型</h3>
+            <div class="ride-hailing-order-content__resolved-vehicle-list">
+              <RideHailingSkuCard v-for="vehicle in resolvedServiceVehicles" :key="vehicle.itemId" readonly
+                :display-name="vehicle.displayName" :price-label="vehicle.priceLabel" :preview-src="vehicle.previewSrc"
+                :selectable="false" :selected="false" />
+            </div>
+          </section>
+
+          <section class="ride-hailing-order-content__fact-section"
+            data-testid="order-detail.ride-hailing.route-section">
             <h3>路线</h3>
-            <RoutePointList
-              class="ride-hailing-order-content__route-list"
-              :route="routeForMap"
-              variant="detail"
-              show-address
-            />
+            <RoutePointList class="ride-hailing-order-content__route-list" :route="routeForMap" variant="detail"
+              show-address />
           </section>
 
-          <section
-            class="ride-hailing-order-content__fact-section"
-            data-testid="order-detail.ride-hailing.riders-section"
-          >
+          <section class="ride-hailing-order-content__fact-section"
+            data-testid="order-detail.ride-hailing.riders-section">
             <h3>乘车人</h3>
             <div class="ride-hailing-order-content__rider-list">
-              <div
-                v-for="rider in props.ride.riders"
-                :key="rider.userId"
-                class="ride-hailing-order-content__rider-row"
-              >
+              <div v-for="rider in props.ride.riders" :key="rider.userId" class="ride-hailing-order-content__rider-row">
                 <span class="i-mdi-account-circle" aria-hidden="true"></span>
                 <div>
                   <strong>{{ rider.displayName }}</strong>
@@ -209,7 +127,21 @@ import type { MapFitPadding, MapViewportFollowMode } from "@/shared/map/types";
 import { buildRideHailingOrderMapViewModel } from "./ride-hailing-order-map-view-model";
 
 type RideHailingDetail = NonNullable<CommerceOrderDetailResponse["rideHailing"]>;
+type OrderItemSnapshot = CommerceOrderDetailResponse["order"]["items"][number];
+type RideHailingChoiceSetItemSnapshot = Extract<
+  OrderItemSnapshot,
+  { kind: "CHOICE_SET"; productType: "RIDE_HAILING" }
+>;
+type ResolvedRideHailingSkuSnapshot = NonNullable<
+  NonNullable<RideHailingChoiceSetItemSnapshot["resolution"]>["sku"]
+>;
 type RidePanelStopValue = "peek" | "normal" | "expanded";
+type ResolvedRideHailingVehicleCard = {
+  itemId: string;
+  displayName: string;
+  previewSrc: string | null;
+  priceLabel: string;
+};
 
 const props = defineProps<{
   detail: CommerceOrderDetailResponse;
@@ -364,6 +296,37 @@ const showsDispatchingCandidateVehicles = computed(
   () => props.ride.executionPhase === "DISPATCHING" && props.ride.candidateVehicles.length > 0,
 );
 
+const isRideHailingChoiceSetItem = (
+  item: OrderItemSnapshot,
+): item is RideHailingChoiceSetItemSnapshot =>
+  item.kind === "CHOICE_SET" && item.productType === "RIDE_HAILING";
+
+const readResolvedSkuPreviewSrc = (sku: ResolvedRideHailingSkuSnapshot): string | null =>
+  directImageSrc(
+    firstPresentString([
+      sku?.presentationSnapshot.heroImageAssetIds[0],
+      sku?.presentationSnapshot.detailImageAssetIds[0],
+    ]),
+  );
+
+const resolvedServiceVehicles = computed<ResolvedRideHailingVehicleCard[]>(() =>
+  props.detail.order.items.flatMap((item) => {
+    if (!isRideHailingChoiceSetItem(item)) return [];
+    const resolvedSku = item.resolution?.sku;
+    if (!resolvedSku) return [];
+    return [
+      {
+        itemId: item.itemId,
+        displayName:
+          firstPresentString([item.resolution?.quoteSnapshot?.displayName, resolvedSku.name]) ??
+          "服务车型",
+        previewSrc: readResolvedSkuPreviewSrc(resolvedSku),
+        priceLabel: formatFen(item.resolution?.quoteSnapshot?.amountFen),
+      },
+    ];
+  }),
+);
+
 const orderMapViewModel = computed(() =>
   buildRideHailingOrderMapViewModel({
     executionPhase: props.ride.executionPhase,
@@ -374,7 +337,7 @@ const orderMapViewModel = computed(() =>
 
 const routeMapViewportFollowMode = computed<MapViewportFollowMode>(() =>
   orderMapViewModel.value.activeGeometry?.kind === "marker" &&
-  (orderMapViewModel.value.mode === "PICKING_UP" || orderMapViewModel.value.mode === "IN_TRIP")
+    (orderMapViewModel.value.mode === "PICKING_UP" || orderMapViewModel.value.mode === "IN_TRIP")
     ? "active-marker"
     : "none",
 );
@@ -555,7 +518,7 @@ const formatFen = (amountFen: number | null | undefined): string => {
   display: flex;
   min-width: 0;
   flex-direction: column;
-  gap: var(--sys-spacing-large);
+  gap: var(--sys-spacing-medium);
   margin-top: var(--sys-spacing-xlarge);
 }
 
@@ -576,6 +539,13 @@ const formatFen = (amountFen: number | null | undefined): string => {
   min-width: 0;
 }
 
+.ride-hailing-order-content__resolved-vehicle-list {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--sys-spacing-small);
+}
+
 .ride-hailing-order-content__rider-list {
   display: flex;
   min-width: 0;
@@ -590,7 +560,7 @@ const formatFen = (amountFen: number | null | undefined): string => {
   padding: var(--sys-spacing-small) 0;
   border-bottom: 1px solid var(--sys-color-outline-variant);
 
-  > span {
+  >span {
     @include mx.pu-icon(medium);
     color: var(--sys-color-on-surface-variant);
   }
@@ -612,5 +582,4 @@ const formatFen = (amountFen: number | null | undefined): string => {
     color: var(--sys-color-on-surface-variant);
   }
 }
-
 </style>
diff --git a/apps/frontend/src/pages/CommerceOrderDetailPage.vue b/apps/frontend/src/pages/CommerceOrderDetailPage.vue
index e9a5d9db0..05f7c0ee7 100644
--- a/apps/frontend/src/pages/CommerceOrderDetailPage.vue
+++ b/apps/frontend/src/pages/CommerceOrderDetailPage.vue
@@ -218,8 +218,9 @@ import {
   PuPageHeader,
   PuPageScaffold,
 } from "@partner-up-dev/design-web";
+import { storeToRefs } from "pinia";
 import { computed, onMounted, onUnmounted } from "vue";
-import { useRoute } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 import {
   type CommerceOrderDetailResponse,
   useCancelRentalOrder,
@@ -227,12 +228,19 @@ import {
   useMockRentalBookingConfirmation,
 } from "@/domains/commerce/queries/useCommerce";
 import RideHailingOrderContent from "@/domains/commerce/ui/order-detail/RideHailingOrderContent.vue";
-import { useFallbackBack } from "@/shared/routing/useFallbackBack";
+import { useOrderingHandoffStore } from "@/domains/commerce/use-cases/useOrderingHandoffStore";
 
 type OrderItemSnapshot = CommerceOrderDetailResponse["order"]["items"][number];
 type OrderSkuSnapshot = Extract<OrderItemSnapshot, { kind?: "FIXED"; sku: unknown }>["sku"];
+type RouterHistoryState = {
+  back?: string | null;
+  position?: number | null;
+};
 
 const route = useRoute();
+const router = useRouter();
+const orderingHandoff = useOrderingHandoffStore();
+const { orderingEntry } = storeToRefs(orderingHandoff);
 
 const orderId = computed(() => {
   const value = route.params.orderId;
@@ -329,8 +337,48 @@ const cancellationResultMessage = computed(() => {
 const latestCancellationAttempt = computed(() => detail.value?.cancellation.latestAttempt ?? null);
 const isCancellationPending = computed(() => latestCancellationAttempt.value?.status === "PENDING");
 
-const backFallbackTo = computed(() => ({ path: "/" }));
-const { handleBack } = useFallbackBack(backFallbackTo);
+const backFallbackTo = computed(() =>
+  orderingEntry.value?.prId ? { path: `/pr/${orderingEntry.value.prId}` } : { path: "/" },
+);
+
+const readRouterHistoryState = (): RouterHistoryState | null => {
+  if (typeof window === "undefined") return null;
+  return window.history.state as RouterHistoryState | null;
+};
+
+const hasRouterBackEntry = (): boolean => {
+  const historyState = readRouterHistoryState();
+  return typeof historyState?.back === "string" && historyState.back.length > 0;
+};
+
+const shouldSkipOrderingPageBack = (): boolean => {
+  const backPath = readRouterHistoryState()?.back;
+  return typeof backPath === "string" && backPath.startsWith("/order/new");
+};
+
+const canGoBackTwice = (): boolean => {
+  const position = readRouterHistoryState()?.position;
+  return typeof position === "number" && position >= 2;
+};
+
+const handleBack = async (): Promise<void> => {
+  if (shouldSkipOrderingPageBack()) {
+    if (canGoBackTwice()) {
+      router.go(-2);
+      return;
+    }
+
+    await router.replace(backFallbackTo.value);
+    return;
+  }
+
+  if (hasRouterBackEntry()) {
+    router.back();
+    return;
+  }
+
+  await router.replace(backFallbackTo.value);
+};
 
 const serviceWindowLabel = computed(() => {
   const start = detail.value?.order.serviceStartAt ?? null;
diff --git a/tasks/ride-hailing-ui-fixes/change-log.md b/tasks/ride-hailing-ui-fixes/change-log.md
index 3926d41c2..700ce41f4 100644
--- a/tasks/ride-hailing-ui-fixes/change-log.md
+++ b/tasks/ride-hailing-ui-fixes/change-log.md
@@ -7,6 +7,29 @@ Archived full history:
 
 - `archive/change-log-ordering-through-order-detail-map.md`
 
+## Last Completed Slice: Order Detail Back Navigation And Resolved Vehicle Section
+
+- Corrected task-packet wording for the Driver Card action:
+  - the current icon-led call affordance is acceptable
+  - the real contract is action-oriented call semantics, not a required visible
+    `Call` text label
+- Implemented Order Detail back-navigation correction:
+  - header back skips `/order/new` when that page is the immediate router back
+    entry
+  - when two-step history back is unavailable, the page falls back to the PR
+    path from the ordering handoff store
+- Implemented resolved service-vehicle section:
+  - RideHailing Order Detail now shows `服务车型` above `路线` when a resolved
+    RideHailing SKU exists
+  - the section reuses readonly `RideHailingSkuCard`
+  - the existing dispatching-only candidate-vehicle section remains intact
+- Updated focused scenario coverage:
+  - dispatching candidate cards are asserted within their own section
+  - resolved service-vehicle section is asserted independently
+  - header back action is asserted to return to `/pr/:id`
+- Slice artifact:
+  - `order-detail-back-and-resolved-vehicle-plan.md`
+
 ## Last Completed Slice: RideHailing Order Detail Map Manual Review Corrections
 
 - Fixed shared Tencent map single-coordinate fitting so active single markers
diff --git a/tasks/ride-hailing-ui-fixes/control.md b/tasks/ride-hailing-ui-fixes/control.md
index 52b5a53ac..0fc1e095b 100644
--- a/tasks/ride-hailing-ui-fixes/control.md
+++ b/tasks/ride-hailing-ui-fixes/control.md
@@ -19,8 +19,8 @@ Hypothesis:
 ## Classification
 
 - Primary route: `Reality`
-- Active mode: `Diagnose` for RideHailing Order Detail accepted/pickup driver
-  card, vehicle marker, fake provider route geometry, and Caocao phase semantics
+- Active mode: `Execute` for RideHailing Order Detail back navigation and
+  resolved-vehicle section behavior
 - Current collaboration state: choice-set backend/domain foundation, Ordering
   UI primitive/control, SKU Card layout remediation, Offer Listing / quote
   identity, Ordering entry decoupling, durable docs promotion, and fake provider
@@ -30,7 +30,11 @@ Hypothesis:
   Driver Card Call button icon slot; current Caocao route diagnosis found no
   intermediate-point loss in the fake -> backend -> frontend -> Tencent chain,
   fixed the stronger `navigation_polyline_type` provider contract gap, and added
-  deterministic fake driver movement plus heading-aware vehicle marker rotation
+  deterministic fake driver movement plus heading-aware vehicle marker rotation;
+  task-packet wording is now corrected so the Driver Card call affordance is
+  treated as an action, not as a required visible `Call` text label; current
+  implementation slice covers order-detail back-navigation semantics and a
+  resolved-vehicle section above route facts
 
 ## Inherited Effective Truth
 
@@ -81,8 +85,10 @@ Hypothesis:
   - fake Caocao Admin phase controls must expose callback delivery failure
     rather than silently allowing provider/local lifecycle drift
   - Driver Card should render from `ride.driver` / `ride.vehicle` when either
-    exists; `driverName` is display data, and call action labels should be
-    action-oriented (`Call`) rather than data-oriented (`Phone`)
+    exists; `driverName` is display data, and the right-side affordance is a
+    call action backed by `driverPhone`, not a static phone-data field; visible
+    button text is optional, and the current icon-led button shape is
+    acceptable when it keeps accessible call semantics
   - the shared map provider must preserve the `routeDriver` icon style for
     driver markers even when the marker is active
   - fake Caocao pickup/in-trip route geometry must include enough route points
@@ -106,6 +112,13 @@ Hypothesis:
   geometry, marker behavior, or zoom/pan behavior.
 - `RideHailingSkuCard.vue` is reusable for order detail dispatching candidate
   SKU display only if it supports a readonly shape without checkbox.
+- RideHailing order-detail back navigation currently uses generic
+  `useFallbackBack` and therefore returns to the immediate previous page when a
+  router back entry exists; for the standard PR -> Ordering -> Order Detail
+  flow, this means it returns to `/order/new` instead of the initiating page.
+- RideHailing order detail already receives full `detail.order.items`
+  snapshots; a resolved RideHailing choice-set item can be identified from
+  `item.resolution?.sku` without introducing a new backend projection first.
 
 ## Collaboration Protocol
 
@@ -267,6 +280,39 @@ Choose the narrowest sufficient proof per approved slice:
     projection, frontend view-model path, and Tencent `paths` assembly preserve
     the same multi-point latitude/longitude route shape; a stronger adapter
     issue is missing `navigation_polyline_type` in `queryDriverRoute`
+- Current implementation slice: Order Detail back navigation and resolved
+  vehicle section
+  - task-packet wording correction: previous notes overstated a visible `Call`
+    label requirement on the Driver Card action; the real UI contract is an
+    action-oriented call affordance, and the current icon-led implementation is
+    acceptable
+  - current back-navigation behavior: `CommerceOrderDetailPage` uses
+    `useFallbackBack`, which calls `router.back()` whenever a history back entry
+    exists; in the normal PR -> `/order/new` -> `/orders/:orderId` flow, this
+    returns to the ordering page rather than the initiating page
+  - current data availability: RideHailing order detail already carries the
+    raw order item snapshots, and existing page code already prefers
+    `item.resolution?.sku` over unresolved candidates when deriving an item SKU
+  - current UI gap: `RideHailingOrderContent` renders dispatching-only
+    candidate vehicles and then route/rider sections; it does not render a
+    dedicated resolved service-vehicle section above route facts
+  - implementation result:
+    - Order Detail back now skips `/order/new` when the current router back
+      entry is the ordering page; when two-step back is unavailable, it falls
+      back to the initiating PR path from the ordering handoff store
+    - RideHailing Order Detail now renders a readonly `服务车型` section above
+      `路线` when the order item has a resolved RideHailing SKU
+    - the new section reuses readonly `RideHailingSkuCard` and does not alter
+      the existing dispatching candidate section contract
+    - focused system scenario now asserts the resolved service-vehicle section
+      and verifies that the header back action returns to the PR page instead
+      of `/order/new`
+  - verified:
+    - `pnpm --dir apps/frontend exec vue-tsc --noEmit`
+    - `pnpm exec biome check apps/frontend/src/pages/CommerceOrderDetailPage.vue apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+    - `pnpm exec vitest run --config vitest.config.ts --project system-scenario -t "commerce_ride_hailing_ordering_reaches_order_detail"`
+  - planning artifact:
+    `tasks/ride-hailing-ui-fixes/order-detail-back-and-resolved-vehicle-plan.md`
 - Implemented scenario coverage:
   - fake Caocao can mutate vehicle estimates through an admin-only test route
   - fake Caocao can mark per-car-type estimates unavailable for dynamic
diff --git a/tasks/ride-hailing-ui-fixes/discussion-log.md b/tasks/ride-hailing-ui-fixes/discussion-log.md
index b4de4592a..4d211a8aa 100644
--- a/tasks/ride-hailing-ui-fixes/discussion-log.md
+++ b/tasks/ride-hailing-ui-fixes/discussion-log.md
@@ -7,7 +7,51 @@ Archived full history:
 
 - `archive/discussion-log-ordering-through-order-detail-map.md`
 
-## Current Segment: RideHailing Order Detail Driver Card And Live Geometry
+## Current Segment: Order Detail Back Navigation And Resolved Vehicle Section
+
+- Task-packet correction:
+  previous notes overstated a visible `Call` text-label requirement on the
+  Driver Card action. The actual accepted contract is that the right-side
+  control is an action-oriented call affordance backed by `driverPhone`; the
+  current icon-led button with accessible `联系司机` semantics is acceptable.
+- New requested fixes:
+  - Order Detail page back button should return to the initiating page rather
+    than the immediate previous `/order/new` page
+  - when a RideHailing order item has a resolved SKU, render a `服务车型`
+    section above `路线`
+  - reuse readonly `RideHailingSkuCard` for that resolved service vehicle
+- Current code findings:
+  - `CommerceOrderDetailPage` binds header back to `useFallbackBack`, and
+    `useFallbackBack` calls `router.back()` whenever a back entry exists
+  - in the normal PR -> `/order/new` -> `/orders/:orderId` flow, current back
+    behavior therefore returns to the ordering page instead of the initiating
+    page
+  - current Order Detail data already contains raw `detail.order.items`
+    snapshots; existing page code already prefers `item.resolution?.sku` over
+    unresolved candidate SKU data
+  - `RideHailingOrderContent` currently renders dispatching-only candidate
+    cards, then route section, then rider section; no resolved service-vehicle
+    section exists yet
+- Implementation result:
+  - `CommerceOrderDetailPage` no longer uses the generic single-step
+    `useFallbackBack` policy; it now skips `/order/new` when that page is the
+    immediate router back entry
+  - when skip-back cannot safely use router history depth, the page falls back
+    to the PR path held in the ordering handoff store
+  - `RideHailingOrderContent` now renders a `服务车型` section above `路线`
+    whenever a RideHailing choice-set item has `resolution.sku`
+  - the new section reuses readonly `RideHailingSkuCard` and stays separate
+    from the existing dispatching-only candidate list
+- Verification result:
+  - `pnpm --dir apps/frontend exec vue-tsc --noEmit`
+  - focused `biome check` on the changed frontend and scenario files
+  - focused RideHailing system scenario passed and now asserts:
+    - resolved service-vehicle section content
+    - back button returns to `/pr/:id`
+- New slice planning artifact:
+  `order-detail-back-and-resolved-vehicle-plan.md`
+
+## Previous Segment: RideHailing Order Detail Driver Card And Live Geometry
 
 - Requested fixes:
   - show a Driver Card whenever RideHailing order detail has driver or vehicle
@@ -22,14 +66,14 @@ Archived full history:
   - fake Caocao emits it as `driverName`, callback form field
     `driver_name`, backend stores/projects it as `ride.driver.driverName`
   - frontend Driver Card should display `ride.driver.driverName` when present
-  - the right-side action is a call action and should be modeled/labeled as
-    `Call`, not `Phone`; phone number is the data value behind that action
+  - the right-side control is a call action, not a phone-data field; the old
+    packet wording incorrectly implied a required visible `Call` label
 - Proposed Driver Card wireframe:
 
 ```text
 ┌─────────────────────────────────────────────────┐
 │ ┌──────────┐  浙A·TEST                 ┌──────┐ │
-│ │  Avatar  │  几何 · 白色              │ Call │ │
+│ │  Avatar  │  几何 · 白色              │  📞  │ │
 │ └──────────┘                           └──────┘ │
 │ 曹操测试司机                                      │
 └─────────────────────────────────────────────────┘
@@ -72,7 +116,7 @@ Archived full history:
 - Follow-up review findings:
   - Driver Card Call action should use the `PuButton` `leading` slot for its
     icon; placing the icon span directly in default content is inconsistent
-    with the design-web button contract. This is a separate small correction.
+    with the design-web button contract. This correction is now implemented.
   - Caocao Fake Server driving-process enhancement should be a separate slice.
     It should first diagnose the adapter path from Caocao `coords` to backend
     provider route projection to Tencent Map SDK input, because a rendered
diff --git a/tasks/ride-hailing-ui-fixes/order-detail-back-and-resolved-vehicle-plan.md b/tasks/ride-hailing-ui-fixes/order-detail-back-and-resolved-vehicle-plan.md
new file mode 100644
index 000000000..ad3bb936a
--- /dev/null
+++ b/tasks/ride-hailing-ui-fixes/order-detail-back-and-resolved-vehicle-plan.md
@@ -0,0 +1,123 @@
+# RideHailing Order Detail Back Navigation And Resolved Vehicle Plan
+
+## Purpose
+
+Open a new RideHailing Order Detail slice for two concrete UI problems:
+
+- the header back button should return to the initiating page rather than the
+  immediate previous `/order/new` page
+- when the order has a resolved RideHailing item, the panel should show a
+  `服务车型` section above `路线` and reuse the readonly `RideHailingSkuCard`
+
+## Classification
+
+- Primary input route: `Reality`
+- Current mode: `Execute`
+- Production-code mutation has now been completed for this slice
+
+## Current Facts
+
+- Current page shell:
+  `apps/frontend/src/pages/CommerceOrderDetailPage.vue`
+- Current RideHailing detail content:
+  `apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue`
+- Current shared back behavior:
+  `apps/frontend/src/shared/routing/useFallbackBack.ts`
+- Current shared readonly card:
+  `apps/frontend/src/domains/commerce/ui/ordering/RideHailingSkuCard.vue`
+- Current order-detail scenario:
+  `tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+
+Current back-navigation behavior:
+
+- `CommerceOrderDetailPage` binds the page-header back event to
+  `useFallbackBack`.
+- `useFallbackBack` calls `router.back()` whenever the browser/router history
+  contains a back entry.
+- In the standard RideHailing ordering flow
+  `PR Page -> /order/new -> /orders/:orderId`, that means Order Detail returns
+  to `/order/new`, not to the initiating page.
+
+Current resolved-item data availability:
+
+- RideHailing order detail already contains the raw `detail.order.items`
+  snapshots.
+- The page already has a concrete SKU-resolution preference:
+  `item.resolution?.sku ?? item.candidates[0]?.sku`.
+- Therefore this slice does not need a new backend projection just to detect a
+  resolved RideHailing service vehicle.
+
+Current panel-content behavior:
+
+- `RideHailingOrderContent` renders:
+  - status hero
+  - optional driver card
+  - dispatching-only candidate vehicles
+  - route section
+  - rider section
+- There is no dedicated resolved service-vehicle section.
+
+## Target Behavior
+
+Back navigation:
+
+- In the normal RideHailing order-creation handoff flow, Order Detail back
+  should skip the intermediate ordering page and return to the initiating page.
+- Generic fallback behavior outside this flow must remain safe.
+
+Resolved service vehicle section:
+
+- When the RideHailing order item has a resolution with a resolved SKU, the
+  panel should render a `服务车型` section above `路线`.
+- The section should reuse `RideHailingSkuCard` in readonly mode.
+- The existing dispatching-only candidate-vehicle section remains a separate
+  concern and should not be conflated with the resolved service-vehicle section.
+
+## Likely Touch Surface
+
+- `apps/frontend/src/pages/CommerceOrderDetailPage.vue`
+- `apps/frontend/src/shared/routing/useFallbackBack.ts` or a RideHailing-order
+  specific back-navigation seam near page scope
+- `apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue`
+- `tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+
+## Open Design Checks
+
+- Whether the “return to initiating page” rule should be implemented as:
+  - a RideHailing Order Detail page-local back policy
+  - a reusable routing helper that can skip one history entry when the current
+    route is known to be the second hop of an ordering handoff
+- For the resolved vehicle card price label, prefer:
+  - `resolution.quoteSnapshot.amountFen` when available
+  - a stable fallback when only resolved SKU facts exist
+- Whether a dedicated section test id should be added, for example
+  `order-detail.ride-hailing.resolved-vehicle-section`
+
+## Implemented Decisions
+
+- Back navigation is page-local to `CommerceOrderDetailPage`; the slice does
+  not widen `useFallbackBack` into a more complex shared helper.
+- The page skips `/order/new` only when that path is the current immediate
+  router back entry.
+- When safe two-step history back is unavailable, the page falls back to the
+  PR path stored in the ordering handoff store.
+- Resolved service vehicle rendering stays in `RideHailingOrderContent` because
+  the page already passes full order detail into the presentational component.
+- The new `服务车型` section is independent from the dispatching-only candidate
+  list; it does not replace that list.
+
+## Verification Candidate
+
+- `pnpm --dir apps/frontend exec vue-tsc --noEmit`
+- `pnpm exec biome check` on changed frontend and task files
+- `pnpm exec vitest run --config vitest.config.ts --project system-scenario -t "commerce_ride_hailing_ordering_reaches_order_detail"`
+- focused browser/manual check:
+  - create RideHailing order from PR
+  - verify Order Detail back skips `/order/new`
+  - verify resolved vehicle card appears above route facts after resolution
+
+## Verification Result
+
+- `pnpm --dir apps/frontend exec vue-tsc --noEmit`
+- `pnpm exec biome check apps/frontend/src/pages/CommerceOrderDetailPage.vue apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+- `pnpm exec vitest run --config vitest.config.ts --project system-scenario -t "commerce_ride_hailing_ordering_reaches_order_detail"`
diff --git a/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts b/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
index b12f23973..bf1b00777 100644
--- a/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
+++ b/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
@@ -562,20 +562,44 @@ async function assertRideHailingOrderDetail(page: Page): Promise<void> {
     expected: "派单中",
     label: "RideHailing status hero title",
   });
-  const vehicleCards = page.getByTestId("order-detail.ride-hailing.vehicle-card");
-  await vehicleCards.first().waitFor({
+  const dispatchingVehicleSection = page.getByTestId("order-detail.ride-hailing.dispatching-skus");
+  await dispatchingVehicleSection.waitFor({
     state: "visible",
     timeout: 10_000,
   });
-  assert.equal(await vehicleCards.count(), 2);
-  await vehicleCards.filter({ hasText: "系统曹操快车" }).waitFor({
+  const dispatchingVehicleCards = dispatchingVehicleSection.getByTestId(
+    "order-detail.ride-hailing.vehicle-card",
+  );
+  assert.equal(await dispatchingVehicleCards.count(), 2);
+  await dispatchingVehicleCards.filter({ hasText: "系统曹操快车" }).waitFor({
     state: "visible",
     timeout: 10_000,
   });
-  await vehicleCards.filter({ hasText: "系统曹操专车" }).waitFor({
+  await dispatchingVehicleCards.filter({ hasText: "系统曹操专车" }).waitFor({
+    state: "visible",
+    timeout: 10_000,
+  });
+  const resolvedVehicleSection = page.getByTestId(
+    "order-detail.ride-hailing.resolved-vehicle-section",
+  );
+  await resolvedVehicleSection.waitFor({
     state: "visible",
     timeout: 10_000,
   });
+  const resolvedVehicleCards = resolvedVehicleSection.getByTestId(
+    "order-detail.ride-hailing.vehicle-card",
+  );
+  assert.equal(await resolvedVehicleCards.count(), 1);
+  await assertLocatorTextIncludes({
+    actual: resolvedVehicleSection.textContent(),
+    expected: "服务车型",
+    label: "RideHailing resolved vehicle section title",
+  });
+  await assertLocatorTextIncludes({
+    actual: resolvedVehicleSection.textContent(),
+    expected: "系统曹操快车",
+    label: "RideHailing resolved vehicle section item",
+  });
   await assertLocatorTextIncludes({
     actual: page.getByTestId("order-detail.ride-hailing.route-section").textContent(),
     expected: "杭州东站",
@@ -691,6 +715,10 @@ scenario("commerce_ride_hailing_ordering_reaches_order_detail", async (ctx) => {
     });
 
     orderPath = new URL(page.url()).pathname;
+    await page.getByLabel("Back").click();
+    await page.waitForURL((url) => new URL(url).pathname === `/pr/${pr.id}`, {
+      timeout: 10_000,
+    });
   });
 
   const createdOrderPath = orderPath;

From 0bcfdc2928a7104c391d30ae8cce94eb6846b0cd Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Wed, 24 Jun 2026 19:48:54 +0800
Subject: [PATCH 45/94] fix(frontend): add ride-hailing bill card

- add a self-fetch BillCard for ride-hailing order detail
- place the bill section above resolved vehicle information
- extend scenario coverage for bill appearance and bill-detail navigation
---
 .../domains/commerce/model/bill-display.ts    |  33 +++++
 .../commerce/ui/order-detail/BillCard.vue     | 115 ++++++++++++++++++
 .../order-detail/RideHailingOrderContent.vue  |  14 ++-
 .../src/pages/CommerceBillDetailPage.vue      |  29 ++---
 tasks/ride-hailing-ui-fixes/change-log.md     |  33 +++++
 tasks/ride-hailing-ui-fixes/control.md        |  49 +++++++-
 tasks/ride-hailing-ui-fixes/discussion-log.md |  52 +++++++-
 .../order-detail-bill-card-plan.md            |  91 ++++++++++++++
 .../ride-hailing-ordering.scenario.test.ts    |  89 +++++++++++++-
 9 files changed, 482 insertions(+), 23 deletions(-)
 create mode 100644 apps/frontend/src/domains/commerce/model/bill-display.ts
 create mode 100644 apps/frontend/src/domains/commerce/ui/order-detail/BillCard.vue
 create mode 100644 tasks/ride-hailing-ui-fixes/order-detail-bill-card-plan.md

diff --git a/apps/frontend/src/domains/commerce/model/bill-display.ts b/apps/frontend/src/domains/commerce/model/bill-display.ts
new file mode 100644
index 000000000..444db09d5
--- /dev/null
+++ b/apps/frontend/src/domains/commerce/model/bill-display.ts
@@ -0,0 +1,33 @@
+type BillDisplaySnapshot = {
+  chargeTotalFen: number;
+  refundTotalFen: number;
+  refundedFen: number;
+  settlementStatus: "UNPAID" | "PARTIALLY_PAID" | "PAID";
+};
+
+export type BillSettlementTagTone = "neutral" | "primary" | "secondary" | "success";
+
+export type BillSettlementTagDisplay = {
+  label: "待支付" | "部分已支付" | "已支付" | "退款处理中" | "已退款";
+  tone: BillSettlementTagTone;
+};
+
+export const resolveBillSettlementTag = (bill: BillDisplaySnapshot): BillSettlementTagDisplay => {
+  if (bill.refundTotalFen > 0 && bill.refundedFen >= bill.refundTotalFen) {
+    return { label: "已退款", tone: "secondary" };
+  }
+  if (bill.refundTotalFen > 0) {
+    return { label: "退款处理中", tone: "secondary" };
+  }
+  if (bill.settlementStatus === "PAID") {
+    return { label: "已支付", tone: "success" };
+  }
+  if (bill.settlementStatus === "PARTIALLY_PAID") {
+    return { label: "部分已支付", tone: "primary" };
+  }
+  return { label: "待支付", tone: "neutral" };
+};
+
+export const calculateBillEffectiveTotalFen = (
+  bill: Pick<BillDisplaySnapshot, "chargeTotalFen" | "refundTotalFen">,
+): number => bill.chargeTotalFen - bill.refundTotalFen;
diff --git a/apps/frontend/src/domains/commerce/ui/order-detail/BillCard.vue b/apps/frontend/src/domains/commerce/ui/order-detail/BillCard.vue
new file mode 100644
index 000000000..e9dfc19ad
--- /dev/null
+++ b/apps/frontend/src/domains/commerce/ui/order-detail/BillCard.vue
@@ -0,0 +1,115 @@
+<template>
+  <PuCard
+    as="article"
+    class="bill-card"
+    variant="outline"
+    padding="sm"
+    gap="sm"
+    data-testid="order-detail.ride-hailing.bill-card"
+  >
+    <div class="bill-card__header">
+      <PuTag
+        v-if="settlementTag"
+        :text="settlementTag.label"
+        :tone="settlementTag.tone"
+        variant="soft"
+        shape="pill"
+        size="sm"
+        data-testid="order-detail.ride-hailing.bill-card.status"
+      />
+      <span v-else class="bill-card__status-placeholder">
+        {{ statusPlaceholder }}
+      </span>
+
+      <PuButton
+        :action="billLinkAction"
+        shape="rect"
+        tone="primary"
+        variant="outline"
+        size="sm"
+        data-testid="order-detail.ride-hailing.bill-card.view"
+      >
+        查看
+      </PuButton>
+    </div>
+
+    <strong
+      class="bill-card__amount"
+      data-testid="order-detail.ride-hailing.bill-card.amount"
+    >
+      {{ amountLabel }}
+    </strong>
+  </PuCard>
+</template>
+
+<script setup lang="ts">
+import { PuButton, PuCard, PuTag } from "@partner-up-dev/design-web";
+import { computed } from "vue";
+import {
+  calculateBillEffectiveTotalFen,
+  resolveBillSettlementTag,
+} from "@/domains/commerce/model/bill-display";
+import { useBillDetail } from "@/domains/commerce/queries/useCommerce";
+
+const props = defineProps<{
+  billId: string;
+}>();
+
+const normalizedBillId = computed(() => {
+  const value = props.billId.trim();
+  return value.length > 0 ? value : null;
+});
+
+const billQuery = useBillDetail(normalizedBillId);
+const detail = computed(() => billQuery.data.value ?? null);
+
+const settlementTag = computed(() =>
+  detail.value ? resolveBillSettlementTag(detail.value.bill) : null,
+);
+
+const statusPlaceholder = computed(() => (billQuery.isError.value ? "状态待确认" : "正在加载账单"));
+
+const amountLabel = computed(() => {
+  if (detail.value) {
+    return formatFen(calculateBillEffectiveTotalFen(detail.value.bill));
+  }
+  return billQuery.isError.value ? "暂时无法加载金额" : "正在加载金额...";
+});
+
+const billLinkAction = computed(() =>
+  normalizedBillId.value ? { to: { path: `/bills/${normalizedBillId.value}` } } : undefined,
+);
+
+const formatFen = (amountFen: number | null | undefined): string => {
+  if (typeof amountFen !== "number") return "待确认";
+  return new Intl.NumberFormat("zh-CN", {
+    style: "currency",
+    currency: "CNY",
+  }).format(amountFen / 100);
+};
+</script>
+
+<style scoped lang="scss">
+.bill-card {
+  border-radius: var(--sys-radius-small);
+}
+
+.bill-card__header {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sys-spacing-small);
+}
+
+.bill-card__status-placeholder {
+  @include mx.pu-font(caption);
+  min-width: 0;
+  color: var(--sys-color-on-surface-variant);
+}
+
+.bill-card__amount {
+  @include mx.pu-font(title);
+  color: var(--sys-color-on-surface);
+}
+</style>
diff --git a/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue b/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue
index 350562e41..e11b29310 100644
--- a/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue
+++ b/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue
@@ -73,6 +73,12 @@
         </section>
 
         <div class="ride-hailing-order-content__facts">
+          <section v-if="billId" class="ride-hailing-order-content__fact-section"
+            data-testid="order-detail.ride-hailing.bill-section">
+            <h3>账单</h3>
+            <BillCard :bill-id="billId" />
+          </section>
+
           <section v-if="resolvedServiceVehicles.length > 0" class="ride-hailing-order-content__fact-section"
             data-testid="order-detail.ride-hailing.resolved-vehicle-section">
             <h3>服务车型</h3>
@@ -119,6 +125,7 @@ import {
 } from "@partner-up-dev/design-web";
 import { computed, onMounted, onUnmounted, ref } from "vue";
 import type { CommerceOrderDetailResponse } from "@/domains/commerce/queries/useCommerce";
+import BillCard from "@/domains/commerce/ui/order-detail/BillCard.vue";
 import RideHailingSkuCard from "@/domains/commerce/ui/ordering/RideHailingSkuCard.vue";
 import type { Route, RoutePoint } from "@/domains/route/model/route";
 import RouteMap from "@/domains/route/ui/RouteMap.vue";
@@ -327,6 +334,11 @@ const resolvedServiceVehicles = computed<ResolvedRideHailingVehicleCard[]>(() =>
   }),
 );
 
+const billId = computed(() => {
+  const value = props.detail.bill?.id?.trim() ?? "";
+  return value.length > 0 ? value : null;
+});
+
 const orderMapViewModel = computed(() =>
   buildRideHailingOrderMapViewModel({
     executionPhase: props.ride.executionPhase,
@@ -337,7 +349,7 @@ const orderMapViewModel = computed(() =>
 
 const routeMapViewportFollowMode = computed<MapViewportFollowMode>(() =>
   orderMapViewModel.value.activeGeometry?.kind === "marker" &&
-    (orderMapViewModel.value.mode === "PICKING_UP" || orderMapViewModel.value.mode === "IN_TRIP")
+  (orderMapViewModel.value.mode === "PICKING_UP" || orderMapViewModel.value.mode === "IN_TRIP")
     ? "active-marker"
     : "none",
 );
diff --git a/apps/frontend/src/pages/CommerceBillDetailPage.vue b/apps/frontend/src/pages/CommerceBillDetailPage.vue
index 5c2c4c23e..a4157d848 100644
--- a/apps/frontend/src/pages/CommerceBillDetailPage.vue
+++ b/apps/frontend/src/pages/CommerceBillDetailPage.vue
@@ -142,11 +142,18 @@
 </template>
 
 <script setup lang="ts">
+import {
+  PuButton,
+  PuCard,
+  PuInlineNotice,
+  PuPageHeader,
+  PuPageScaffold,
+} from "@partner-up-dev/design-web";
 import { computed } from "vue";
 import { useRoute } from "vue-router";
-import { PuButton, PuCard, PuInlineNotice, PuPageHeader, PuPageScaffold } from "@partner-up-dev/design-web";
-import { useFallbackBack } from "@/shared/routing/useFallbackBack";
+import { resolveBillSettlementTag } from "@/domains/commerce/model/bill-display";
 import { useBillDetail } from "@/domains/commerce/queries/useCommerce";
+import { useFallbackBack } from "@/shared/routing/useFallbackBack";
 
 const route = useRoute();
 
@@ -160,18 +167,8 @@ const billQuery = useBillDetail(billId);
 const detail = computed(() => billQuery.data.value ?? null);
 
 const settlementStatusLabel = computed(() => {
-  if (
-    detail.value &&
-    detail.value.bill.refundTotalFen > 0 &&
-    detail.value.bill.refundedFen >= detail.value.bill.refundTotalFen
-  ) {
-    return "已退款";
-  }
-  if (detail.value && detail.value.bill.refundTotalFen > 0) return "退款处理中";
-  if (detail.value?.bill.settlementStatus === "PAID") return "已支付";
-  if (detail.value?.bill.settlementStatus === "PARTIALLY_PAID")
-    return "部分已支付";
-  return "待支付";
+  if (!detail.value) return "待支付";
+  return resolveBillSettlementTag(detail.value.bill).label;
 });
 
 const backFallbackTo = computed(() =>
@@ -180,9 +177,7 @@ const backFallbackTo = computed(() =>
 const { handleBack } = useFallbackBack(backFallbackTo);
 
 const billErrorMessage = computed(() =>
-  billQuery.error.value instanceof Error
-    ? billQuery.error.value.message
-    : "加载账单失败。",
+  billQuery.error.value instanceof Error ? billQuery.error.value.message : "加载账单失败。",
 );
 
 const lineStatusLabel = (status: string): string => {
diff --git a/tasks/ride-hailing-ui-fixes/change-log.md b/tasks/ride-hailing-ui-fixes/change-log.md
index 700ce41f4..b76e04ab9 100644
--- a/tasks/ride-hailing-ui-fixes/change-log.md
+++ b/tasks/ride-hailing-ui-fixes/change-log.md
@@ -7,6 +7,39 @@ Archived full history:
 
 - `archive/change-log-ordering-through-order-detail-map.md`
 
+## Current Slice: RideHailing Order Detail Bill Card
+
+- Target component contract:
+  - Bill Card is a reusable component
+  - input is `billId`
+  - the component fetches canonical bill data by itself
+  - the component shows bill price and a `查看` action to `/bills/:billId`
+- Placement decision:
+  - RideHailing order detail should render the Bill Card only when
+    `detail.bill?.id` exists
+  - the Bill Card belongs above
+    `order-detail.ride-hailing.resolved-vehicle-section`
+- Current dependency decision:
+  - prefer existing `useBillDetail(billId)` rather than adding a new query
+    owner
+  - existing `/orders/:orderId/bill` API remains available but is not the
+    preferred contract for this component slice
+- Implementation result:
+  - added `apps/frontend/src/domains/commerce/ui/order-detail/BillCard.vue`
+  - added shared bill settlement display helper at
+    `apps/frontend/src/domains/commerce/model/bill-display.ts`
+  - RideHailing order detail now shows a `账单` section above
+    `order-detail.ride-hailing.resolved-vehicle-section` when bill id exists
+  - Bill Card shows status tag, effective-total amount, and `查看`
+  - `CommerceBillDetailPage` now reuses the shared bill settlement label
+    helper
+- Verification result:
+  - frontend typecheck passed
+  - focused biome check passed
+  - focused RideHailing system scenario passed with bill-card assertions
+- Slice artifact:
+  - `order-detail-bill-card-plan.md`
+
 ## Last Completed Slice: Order Detail Back Navigation And Resolved Vehicle Section
 
 - Corrected task-packet wording for the Driver Card action:
diff --git a/tasks/ride-hailing-ui-fixes/control.md b/tasks/ride-hailing-ui-fixes/control.md
index 0fc1e095b..453909426 100644
--- a/tasks/ride-hailing-ui-fixes/control.md
+++ b/tasks/ride-hailing-ui-fixes/control.md
@@ -19,8 +19,7 @@ Hypothesis:
 ## Classification
 
 - Primary route: `Reality`
-- Active mode: `Execute` for RideHailing Order Detail back navigation and
-  resolved-vehicle section behavior
+- Active mode: `Execute` for RideHailing Order Detail Bill Card integration
 - Current collaboration state: choice-set backend/domain foundation, Ordering
   UI primitive/control, SKU Card layout remediation, Offer Listing / quote
   identity, Ordering entry decoupling, durable docs promotion, and fake provider
@@ -34,7 +33,9 @@ Hypothesis:
   task-packet wording is now corrected so the Driver Card call affordance is
   treated as an action, not as a required visible `Call` text label; current
   implementation slice covers order-detail back-navigation semantics and a
-  resolved-vehicle section above route facts
+  resolved-vehicle section above route facts; next requested slice adds a
+  self-fetch Bill Card above the resolved-vehicle section when a RideHailing
+  order already has a bill
 
 ## Inherited Effective Truth
 
@@ -119,6 +120,19 @@ Hypothesis:
 - RideHailing order detail already receives full `detail.order.items`
   snapshots; a resolved RideHailing choice-set item can be identified from
   `item.resolution?.sku` without introducing a new backend projection first.
+- Commerce already exposes both `GET /api/commerce/bills/:billId` and
+  `GET /api/commerce/orders/:orderId/bill`; the frontend already has
+  `useBillDetail(billId)` and `CommerceBillDetailPage` at `/bills/:billId`.
+- `CommerceOrderDetailPage` already receives `detail.bill` with bill id,
+  status, currency, and lightweight line snapshots; that is enough to detect
+  bill existence and hand canonical data ownership to an id-owned Bill Card.
+- RideHailing final bill creation already happens in the Caocao callback path:
+  when the provider callback carries a final amount, backend
+  `ensureRideFinalBill` creates the order bill and per-participant charge
+  lines.
+- Current RideHailing order detail content renders status hero, optional driver
+  card, dispatching-only candidate vehicles, resolved service vehicle, route,
+  and riders; it does not yet render any bill-specific section.
 
 ## Collaboration Protocol
 
@@ -187,6 +201,9 @@ Choose the narrowest sufficient proof per approved slice:
 
 ## Current State
 
+- Opened slice: RideHailing Order Detail Bill Card placement and self-fetch
+  component planning.
+
 - Committed slice: RideHailing ordering content naming and layout correction
   (`f7ac1aa3`).
 - Committed slice: submit-time ordering pre-flight and RideHailing SKU
@@ -313,6 +330,32 @@ Choose the narrowest sufficient proof per approved slice:
     - `pnpm exec vitest run --config vitest.config.ts --project system-scenario -t "commerce_ride_hailing_ordering_reaches_order_detail"`
   - planning artifact:
     `tasks/ride-hailing-ui-fixes/order-detail-back-and-resolved-vehicle-plan.md`
+- Current implementation slice: RideHailing Order Detail Bill Card
+  - `BillCard.vue` is now a domain-owned component whose only input is
+    `billId`
+  - the card fetches canonical bill detail via `useBillDetail(billId)`
+  - the card does not repeat a local `账单` title or `Bill` eyebrow; it shows
+    status tag, amount, and `查看` action only
+  - RideHailing order detail now renders a `账单` section above
+    `服务车型` whenever `detail.bill?.id` exists
+  - bill amount currently uses the lightweight effective-total summary
+    `chargeTotalFen - refundTotalFen`, matching the older Order Detail bill
+    summary pattern
+  - bill settlement display logic is now shared through
+    `domains/commerce/model/bill-display.ts`
+  - focused system scenario now asserts:
+    - bill section appears after finished-state bill creation
+    - bill section is ordered before resolved vehicle section
+    - bill card shows `待支付` plus the expected amount
+    - `查看` routes to `/bills/:billId`
+    - bill detail can return to the order detail page
+  - verified:
+    - `pnpm --dir apps/frontend exec vue-tsc --noEmit`
+    - `pnpm exec biome check apps/frontend/src/domains/commerce/model/bill-display.ts apps/frontend/src/domains/commerce/ui/order-detail/BillCard.vue apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue apps/frontend/src/pages/CommerceBillDetailPage.vue tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+    - `pnpm exec vitest run --config vitest.config.ts --project system-scenario -t "commerce_ride_hailing_ordering_reaches_order_detail"`
+    - `git diff --check`
+  - planning artifact:
+    `tasks/ride-hailing-ui-fixes/order-detail-bill-card-plan.md`
 - Implemented scenario coverage:
   - fake Caocao can mutate vehicle estimates through an admin-only test route
   - fake Caocao can mark per-car-type estimates unavailable for dynamic
diff --git a/tasks/ride-hailing-ui-fixes/discussion-log.md b/tasks/ride-hailing-ui-fixes/discussion-log.md
index 4d211a8aa..2baea5cc1 100644
--- a/tasks/ride-hailing-ui-fixes/discussion-log.md
+++ b/tasks/ride-hailing-ui-fixes/discussion-log.md
@@ -7,7 +7,57 @@ Archived full history:
 
 - `archive/discussion-log-ordering-through-order-detail-map.md`
 
-## Current Segment: Order Detail Back Navigation And Resolved Vehicle Section
+## Current Segment: RideHailing Order Detail Bill Card
+
+- New requested fix:
+  - add a Bill Card component whose input is `billId`
+  - the component should fetch canonical bill data by itself
+  - the card should show bill price and a `查看` action that routes to bill
+    detail
+  - `RideHailingOrderContent` should render this card only when the order
+    already has a bill
+  - placement must be above
+    `order-detail.ride-hailing.resolved-vehicle-section`
+- Current code findings:
+  - RideHailing order detail currently renders no bill-related UI inside
+    `RideHailingOrderContent`
+  - `CommerceOrderDetailPage` already receives `detail.bill?.id`, so the page
+    can decide presence without widening the backend contract
+  - frontend already has `useBillDetail(billId)` and routed bill detail page
+    `/bills/:billId`
+  - backend also exposes `GET /api/commerce/orders/:orderId/bill`, but the
+    requested component contract is bill-id-owned, so that route is not
+    required for this slice unless we hit an API-shape gap
+  - Caocao final-amount callback already creates the RideHailing final bill,
+    so the existing order-detail polling should be able to observe bill
+    appearance after trip completion
+- Implementation result:
+  - added domain-owned `BillCard.vue` under RideHailing order-detail UI; the
+    component input is only `billId`
+  - the card fetches bill detail via `useBillDetail(billId)` and renders:
+    - bill settlement `PuTag`
+    - effective total amount
+    - `查看` button to `/bills/:billId`
+  - the card intentionally does not repeat a local `账单` title or `Bill`
+    eyebrow because the parent section already owns the title
+  - `RideHailingOrderContent` now renders a `账单` section above
+    `order-detail.ride-hailing.resolved-vehicle-section` when `detail.bill?.id`
+    exists
+  - bill settlement label logic is now shared with `CommerceBillDetailPage`
+    through `domains/commerce/model/bill-display.ts`
+- Verification result:
+  - `pnpm --dir apps/frontend exec vue-tsc --noEmit`
+  - focused `biome check` on the changed frontend and scenario files
+  - focused RideHailing system scenario now asserts:
+    - bill section appears after the finished-state bill is created
+    - bill section is ordered above resolved vehicle section
+    - bill card displays `待支付`
+    - `查看` routes to bill detail
+    - bill detail can route back to order detail
+- New slice planning artifact:
+  `order-detail-bill-card-plan.md`
+
+## Previous Segment: Order Detail Back Navigation And Resolved Vehicle Section
 
 - Task-packet correction:
   previous notes overstated a visible `Call` text-label requirement on the
diff --git a/tasks/ride-hailing-ui-fixes/order-detail-bill-card-plan.md b/tasks/ride-hailing-ui-fixes/order-detail-bill-card-plan.md
new file mode 100644
index 000000000..b51122f48
--- /dev/null
+++ b/tasks/ride-hailing-ui-fixes/order-detail-bill-card-plan.md
@@ -0,0 +1,91 @@
+# RideHailing Order Detail Bill Card Plan
+
+## Objective
+
+- add a reusable Bill Card component that takes `billId`, loads bill detail by
+  itself, and renders price plus a `查看` action
+- render that Bill Card in RideHailing order detail when the order already has
+  a bill
+- place the card above
+  `order-detail.ride-hailing.resolved-vehicle-section`
+
+## Classification
+
+- Primary route: `Reality`
+- Active mode: `Execute`
+
+## Confirmed Truth
+
+- frontend already has `useBillDetail(billId)` in
+  `apps/frontend/src/domains/commerce/queries/useCommerce.ts`
+- bill detail route already exists at `/bills/:billId`
+- `CommerceOrderDetailPage` already gets `detail.bill?.id`
+- RideHailing final bill is created from the provider final-amount callback,
+  not from a separate manual admin action
+- current RideHailing order detail has no bill card section
+
+## Proposed Address And Object
+
+- `apps/frontend/src/domains/commerce/ui/order-detail/`
+  - add Bill Card component
+- `apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue`
+  - insert Bill Card above resolved vehicle section
+- `tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+  - assert bill-card appearance and bill-detail navigation
+- task packet logs
+  - record the implementation result and verification
+
+## State Diff
+
+- From:
+  RideHailing order detail has no bill-specific entry even after bill creation.
+- To:
+  once `detail.bill?.id` exists, RideHailing order detail shows a Bill Card
+  above resolved vehicle information; the card owns its own bill fetch and
+  links to bill detail.
+
+## Blast Radius Forecast
+
+- frontend only unless bill-detail query shape proves insufficient
+- scenario coverage should expand because the RideHailing finished state is the
+  first likely bill-appearance point
+- existing Rental order detail bill section should remain unchanged
+
+## Invariants Check
+
+- do not widen the Bill Card input contract beyond `billId` unless evidence
+  forces it
+- do not regress the existing resolved-vehicle section placement
+- keep RideHailing `RideHailingSkuCard` usage unchanged
+- keep existing `/bills/:billId` destination stable
+
+## Verification Plan
+
+- `pnpm --dir apps/frontend exec vue-tsc --noEmit`
+- `pnpm exec biome check apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue apps/frontend/src/domains/commerce/ui/order-detail/*.vue tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+- `pnpm exec vitest run --config vitest.config.ts --project system-scenario -t "commerce_ride_hailing_ordering_reaches_order_detail"`
+
+## Implementation Result
+
+- added `apps/frontend/src/domains/commerce/ui/order-detail/BillCard.vue`
+- added shared bill display helper
+  `apps/frontend/src/domains/commerce/model/bill-display.ts`
+- Bill Card stays bill-id-owned and fetches canonical detail with
+  `useBillDetail(billId)`
+- RideHailing order detail now renders:
+  - `账单`
+  - `服务车型`
+  - `路线`
+  in that order whenever both bill and resolved vehicle exist
+- Bill Card UI shape is:
+  - status tag
+  - amount
+  - `查看`
+  with no repeated internal `账单` title or `Bill` eyebrow
+
+## Verification Result
+
+- `pnpm --dir apps/frontend exec vue-tsc --noEmit`
+- `pnpm exec biome check apps/frontend/src/domains/commerce/model/bill-display.ts apps/frontend/src/domains/commerce/ui/order-detail/BillCard.vue apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue apps/frontend/src/pages/CommerceBillDetailPage.vue tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+- `pnpm exec vitest run --config vitest.config.ts --project system-scenario -t "commerce_ride_hailing_ordering_reaches_order_detail"`
+- `git diff --check`
diff --git a/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts b/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
index bf1b00777..7d04c888c 100644
--- a/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
+++ b/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
@@ -617,6 +617,60 @@ async function assertRideHailingOrderDetail(page: Page): Promise<void> {
   });
 }
 
+async function assertRideHailingFactSectionOrder(input: {
+  page: Page;
+  before: string;
+  after: string;
+}): Promise<void> {
+  const order = await input.page.evaluate(
+    ({ after, before }) => {
+      const beforeElement = document.querySelector<HTMLElement>(`[data-testid="${before}"]`);
+      const afterElement = document.querySelector<HTMLElement>(`[data-testid="${after}"]`);
+      if (!beforeElement || !afterElement) return null;
+      const parent = beforeElement.parentElement;
+      if (!parent || parent !== afterElement.parentElement) return null;
+      return {
+        afterIndex: Array.from(parent.children).indexOf(afterElement),
+        beforeIndex: Array.from(parent.children).indexOf(beforeElement),
+      };
+    },
+    { after: input.after, before: input.before },
+  );
+  assert.ok(order !== null, "RideHailing fact sections should share a common parent");
+  assert.ok(
+    order.beforeIndex >= 0 && order.beforeIndex < order.afterIndex,
+    `Expected ${input.before} to appear before ${input.after}`,
+  );
+}
+
+async function assertRideHailingBillCard(page: Page): Promise<void> {
+  const billSection = page.getByTestId("order-detail.ride-hailing.bill-section");
+  await billSection.waitFor({
+    state: "visible",
+    timeout: 10_000,
+  });
+  await assertLocatorTextIncludes({
+    actual: billSection.textContent(),
+    expected: "账单",
+    label: "RideHailing bill section title",
+  });
+  await assertRideHailingFactSectionOrder({
+    page,
+    before: "order-detail.ride-hailing.bill-section",
+    after: "order-detail.ride-hailing.resolved-vehicle-section",
+  });
+  await assertLocatorTextIncludes({
+    actual: page.getByTestId("order-detail.ride-hailing.bill-card.status").textContent(),
+    expected: "待支付",
+    label: "RideHailing bill card status",
+  });
+  await assertLocatorTextMatches({
+    actual: page.getByTestId("order-detail.ride-hailing.bill-card.amount").textContent(),
+    pattern: /[¥￥]40\.00/,
+    label: "RideHailing bill card amount",
+  });
+}
+
 async function waitForRideHailingMapMode(
   page: Page,
   mode: "SEARCHING_ORIGIN" | "PICKING_UP" | "ARRIVED_AT_PICKUP" | "IN_TRIP" | "PLANNED_ROUTE",
@@ -713,12 +767,45 @@ scenario("commerce_ride_hailing_ordering_reaches_order_detail", async (ctx) => {
       expected: "行程已结束",
       label: "RideHailing finished status hero",
     });
+    await assertRideHailingBillCard(page);
 
-    orderPath = new URL(page.url()).pathname;
+    const orderDetailPath = new URL(page.url()).pathname;
+    orderPath = orderDetailPath;
     await page.getByLabel("Back").click();
     await page.waitForURL((url) => new URL(url).pathname === `/pr/${pr.id}`, {
       timeout: 10_000,
     });
+    await page.goto(orderDetailPath);
+    await page.getByTestId("order-detail.page").waitFor({
+      state: "visible",
+      timeout: 10_000,
+    });
+    await page.getByTestId("order-detail.ride-hailing.bill-card.view").click();
+    await page.waitForURL((url) => /^\/bills\/[0-9a-f-]+$/.test(new URL(url).pathname), {
+      timeout: 10_000,
+    });
+    await page.getByTestId("bill-detail.page").waitFor({
+      state: "visible",
+      timeout: 10_000,
+    });
+    await assertLocatorTextIncludes({
+      actual: page.getByTestId("bill-detail.settlement-status").textContent(),
+      expected: "待支付",
+      label: "RideHailing bill detail settlement status",
+    });
+    await assertLocatorTextMatches({
+      actual: page.getByTestId("bill-detail.charge-total").textContent(),
+      pattern: /[¥￥]40\.00/,
+      label: "RideHailing bill detail charge total",
+    });
+    await page.getByTestId("bill-detail.order-link").click();
+    await page.waitForURL((url) => new URL(url).pathname === orderDetailPath, {
+      timeout: 10_000,
+    });
+    await page.getByTestId("order-detail.page").waitFor({
+      state: "visible",
+      timeout: 10_000,
+    });
   });
 
   const createdOrderPath = orderPath;

From ea343509d4c7a0710daa93082bff1683ab5f57be Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Wed, 24 Jun 2026 22:15:26 +0800
Subject: [PATCH 46/94] fix(commerce): rebuild bill detail payment flow UI

- add backend-owned bill total and payer-enriched bill line projection
- rebuild bill detail page around selectable bill lines and bottom CTA
- update ride-hailing scenario coverage for bill detail and checkout routing
---
 .../payment/use-cases/get-bill-detail.ts      |  43 ++-
 .../src/repositories/UserRepository.ts        |  37 +-
 .../domains/commerce/model/bill-display.ts    |  41 +-
 .../commerce/ui/bill-detail/BillLineCard.vue  | 190 ++++++++++
 .../commerce/ui/order-detail/BillCard.vue     |  32 +-
 .../src/pages/CommerceBillDetailPage.vue      | 352 +++++++-----------
 .../bill-detail-page-reset-plan.md            | 225 +++++++++++
 tasks/ride-hailing-ui-fixes/change-log.md     |  69 +++-
 tasks/ride-hailing-ui-fixes/control.md        |  26 +-
 tasks/ride-hailing-ui-fixes/discussion-log.md | 109 +++++-
 .../ride-hailing-ordering.scenario.test.ts    | 141 ++++++-
 11 files changed, 974 insertions(+), 291 deletions(-)
 create mode 100644 apps/frontend/src/domains/commerce/ui/bill-detail/BillLineCard.vue
 create mode 100644 tasks/ride-hailing-ui-fixes/bill-detail-page-reset-plan.md

diff --git a/apps/backend/src/domains/payment/use-cases/get-bill-detail.ts b/apps/backend/src/domains/payment/use-cases/get-bill-detail.ts
index a285172bd..6d4666605 100644
--- a/apps/backend/src/domains/payment/use-cases/get-bill-detail.ts
+++ b/apps/backend/src/domains/payment/use-cases/get-bill-detail.ts
@@ -1,16 +1,18 @@
-import { throwHttpProblem } from "../../../lib/problem-details";
 import type { BillId, BillLine } from "../../../entities/bill";
 import type { TradeOrder, TradeOrderId } from "../../../entities/trade-order";
 import type { UserId } from "../../../entities/user";
+import { throwHttpProblem } from "../../../lib/problem-details";
 import { BillLineRepository } from "../../../repositories/BillLineRepository";
 import { BillRepository } from "../../../repositories/BillRepository";
 import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository";
-import { deriveBillPaymentState } from "../services";
+import { UserRepository } from "../../../repositories/UserRepository";
 import { getOrderItemSkuName } from "../../trade";
+import { deriveBillPaymentState } from "../services";
 
 const billRepo = new BillRepository();
 const billLineRepo = new BillLineRepository();
 const tradeOrderRepo = new TradeOrderRepository();
+const userRepo = new UserRepository();
 
 export type BillDetailProjection = {
   bill: {
@@ -18,6 +20,7 @@ export type BillDetailProjection = {
     sourceOrderId: string;
     status: string;
     currency: "CNY";
+    totalAmountFen: number;
     chargeTotalFen: number;
     paidChargeFen: number;
     refundTotalFen: number;
@@ -36,6 +39,13 @@ export type BillDetailProjection = {
   lines: Array<{
     id: string;
     userId: string;
+    payer: {
+      userId: string;
+      nickname: string | null;
+      displayName: string;
+      avatarUrl: string | null;
+      isViewer: boolean;
+    };
     kind: BillLine["kind"];
     amountFen: number;
     currency: "CNY";
@@ -68,6 +78,12 @@ const resolveSettlementStatus = (input: {
   return "UNPAID";
 };
 
+const resolvePayerDisplayName = (input: { nickname: string | null; isViewer: boolean }): string => {
+  const normalizedNickname = input.nickname?.trim() ?? "";
+  if (normalizedNickname.length > 0) return normalizedNickname;
+  return input.isViewer ? "你" : "参与者";
+};
+
 async function buildBillDetail(input: {
   billId: BillId;
   viewerUserId: UserId;
@@ -87,9 +103,9 @@ async function buildBillDetail(input: {
 
   const lines = await billLineRepo.listByBillId(bill.id);
   const paymentState = deriveBillPaymentState({ lines });
-  const paymentByLineId = new Map(
-    paymentState.lines.map((line) => [line.billLineId, line]),
-  );
+  const paymentByLineId = new Map(paymentState.lines.map((line) => [line.billLineId, line]));
+  const payers = await userRepo.findByIds(lines.map((line) => line.userId));
+  const payerByUserId = new Map(payers.map((payer) => [payer.id, payer]));
 
   return {
     bill: {
@@ -97,6 +113,7 @@ async function buildBillDetail(input: {
       sourceOrderId: bill.sourceOrderId,
       status: bill.status,
       currency: bill.currency,
+      totalAmountFen: paymentState.chargeTotalFen - paymentState.refundTotalFen,
       chargeTotalFen: paymentState.chargeTotalFen,
       paidChargeFen: paymentState.paidChargeFen,
       refundTotalFen: paymentState.refundTotalFen,
@@ -120,10 +137,22 @@ async function buildBillDetail(input: {
         line.kind === "CHARGE" &&
         line.userId === input.viewerUserId &&
         payment?.status !== "PAID";
+      const payer = payerByUserId.get(line.userId);
+      const isViewer = line.userId === input.viewerUserId;
 
       return {
         id: line.id,
         userId: line.userId,
+        payer: {
+          userId: line.userId,
+          nickname: payer?.nickname ?? null,
+          displayName: resolvePayerDisplayName({
+            nickname: payer?.nickname ?? null,
+            isViewer,
+          }),
+          avatarUrl: payer?.avatar ?? null,
+          isViewer,
+        },
         kind: line.kind,
         amountFen: line.amountFen,
         currency: line.currency,
@@ -134,9 +163,7 @@ async function buildBillDetail(input: {
         paidFen: payment?.paidFen ?? 0,
         refundedFen: payment?.refundableFen ?? 0,
         payableByViewer,
-        checkoutHref: payableByViewer
-          ? `/bill-lines/${line.id}/checkout`
-          : null,
+        checkoutHref: payableByViewer ? `/bill-lines/${line.id}/checkout` : null,
         paymentProviderInstanceId: line.paymentProviderInstanceId,
         attemptCount: line.attemptCount,
         settledAt: line.settledAt?.toISOString() ?? null,
diff --git a/apps/backend/src/repositories/UserRepository.ts b/apps/backend/src/repositories/UserRepository.ts
index 913d553ec..04fc59e25 100644
--- a/apps/backend/src/repositories/UserRepository.ts
+++ b/apps/backend/src/repositories/UserRepository.ts
@@ -1,13 +1,8 @@
 import { and, eq, inArray, isNull } from "drizzle-orm";
-import { db } from "../lib/db";
-import {
-  users,
-  type NewUser,
-  type UserId,
-  type UserSex,
-} from "../entities/user";
-import { userReliability } from "../entities/user-reliability";
+import { type NewUser, type UserId, type UserSex, users } from "../entities/user";
 import { userNotificationOpts } from "../entities/user-notification-opt";
+import { userReliability } from "../entities/user-reliability";
+import { db } from "../lib/db";
 
 const OFFICIAL_ACCOUNT_FOLLOW_UPDATE_CHUNK_SIZE = 500;
 
@@ -47,11 +42,17 @@ export class UserRepository {
     return result[0] ?? null;
   }
 
+  async findByIds(userIds: UserId[]) {
+    const uniqueIds = Array.from(new Set(userIds));
+    if (uniqueIds.length === 0) {
+      return [];
+    }
+
+    return db.select().from(users).where(inArray(users.id, uniqueIds));
+  }
+
   async findByOpenId(openId: string) {
-    const result = await db
-      .select()
-      .from(users)
-      .where(eq(users.openId, openId));
+    const result = await db.select().from(users).where(eq(users.openId, openId));
     return result[0] ?? null;
   }
 
@@ -222,22 +223,14 @@ export class UserRepository {
       index < uniqueOpenIds.length;
       index += OFFICIAL_ACCOUNT_FOLLOW_UPDATE_CHUNK_SIZE
     ) {
-      const chunk = uniqueOpenIds.slice(
-        index,
-        index + OFFICIAL_ACCOUNT_FOLLOW_UPDATE_CHUNK_SIZE,
-      );
+      const chunk = uniqueOpenIds.slice(index, index + OFFICIAL_ACCOUNT_FOLLOW_UPDATE_CHUNK_SIZE);
       const updatedRows = await db
         .update(users)
         .set({
           wechatOfficialAccountFollowedAt: followedAt,
           updatedAt,
         })
-        .where(
-          and(
-            inArray(users.openId, chunk),
-            isNull(users.wechatOfficialAccountFollowedAt),
-          ),
-        )
+        .where(and(inArray(users.openId, chunk), isNull(users.wechatOfficialAccountFollowedAt)))
         .returning({ id: users.id });
       updatedCount += updatedRows.length;
     }
diff --git a/apps/frontend/src/domains/commerce/model/bill-display.ts b/apps/frontend/src/domains/commerce/model/bill-display.ts
index 444db09d5..0b2746626 100644
--- a/apps/frontend/src/domains/commerce/model/bill-display.ts
+++ b/apps/frontend/src/domains/commerce/model/bill-display.ts
@@ -1,4 +1,6 @@
 type BillDisplaySnapshot = {
+  currency: string;
+  totalAmountFen: number;
   chargeTotalFen: number;
   refundTotalFen: number;
   refundedFen: number;
@@ -12,6 +14,11 @@ export type BillSettlementTagDisplay = {
   tone: BillSettlementTagTone;
 };
 
+export type BillLineSettlementTagDisplay = {
+  label: "待支付" | "支付中" | "已支付" | "支付失败" | "退款处理中" | "已退款";
+  tone: BillSettlementTagTone | "danger";
+};
+
 export const resolveBillSettlementTag = (bill: BillDisplaySnapshot): BillSettlementTagDisplay => {
   if (bill.refundTotalFen > 0 && bill.refundedFen >= bill.refundTotalFen) {
     return { label: "已退款", tone: "secondary" };
@@ -28,6 +35,34 @@ export const resolveBillSettlementTag = (bill: BillDisplaySnapshot): BillSettlem
   return { label: "待支付", tone: "neutral" };
 };
 
-export const calculateBillEffectiveTotalFen = (
-  bill: Pick<BillDisplaySnapshot, "chargeTotalFen" | "refundTotalFen">,
-): number => bill.chargeTotalFen - bill.refundTotalFen;
+export const resolveBillLineSettlementTag = (status: string): BillLineSettlementTagDisplay => {
+  if (status === "PAID") return { label: "已支付", tone: "success" };
+  if (status === "PROCESSING" || status === "ACTION_REQUIRED") {
+    return { label: "支付中", tone: "primary" };
+  }
+  if (status === "FAILED") return { label: "支付失败", tone: "danger" };
+  if (status === "REFUND_PENDING") {
+    return { label: "退款处理中", tone: "secondary" };
+  }
+  if (status === "REFUNDED") return { label: "已退款", tone: "secondary" };
+  return { label: "待支付", tone: "neutral" };
+};
+
+export const formatCurrencyAmount = (
+  amountFen: number | null | undefined,
+  currency: string | null | undefined,
+): string => {
+  if (typeof amountFen !== "number") return "待确认";
+  const normalizedCurrency = currency?.trim() || "CNY";
+  try {
+    return new Intl.NumberFormat("zh-CN", {
+      style: "currency",
+      currency: normalizedCurrency,
+    }).format(amountFen / 100);
+  } catch {
+    return new Intl.NumberFormat("zh-CN", {
+      style: "currency",
+      currency: "CNY",
+    }).format(amountFen / 100);
+  }
+};
diff --git a/apps/frontend/src/domains/commerce/ui/bill-detail/BillLineCard.vue b/apps/frontend/src/domains/commerce/ui/bill-detail/BillLineCard.vue
new file mode 100644
index 000000000..4cfa4c9e6
--- /dev/null
+++ b/apps/frontend/src/domains/commerce/ui/bill-detail/BillLineCard.vue
@@ -0,0 +1,190 @@
+<template>
+  <div
+    class="bill-line-card"
+    data-testid="bill-detail.line"
+    :data-payable="isSelectable ? 'true' : 'false'"
+    :data-selected="selected ? 'true' : 'false'"
+  >
+    <PuCard
+      as="div"
+      class="bill-line-card__control"
+      :active="selected"
+      :disabled="!isSelectable"
+      selectable
+      variant="soft"
+      tone="neutral"
+      padding="sm"
+      gap="sm"
+      @click="handleSelect"
+    >
+      <div class="bill-line-card__top-row">
+        <span class="bill-line-card__checkbox" aria-hidden="true">
+          <PuCheckbox
+            :model-value="selected"
+            :disabled="!isSelectable"
+            size="sm"
+            tabindex="-1"
+            aria-label="选择账单行"
+          />
+        </span>
+
+        <div class="bill-line-card__amount-row">
+          <strong class="bill-line-card__amount" data-testid="bill-detail.line-amount">
+            {{ amountLabel }}
+          </strong>
+
+          <PuTag
+            :text="statusTag.label"
+            :tone="statusTag.tone"
+            variant="soft"
+            shape="pill"
+            size="sm"
+            data-testid="bill-detail.line-status"
+          />
+        </div>
+
+        <div class="bill-line-card__payer" data-testid="bill-detail.line-payer">
+          <PuImg
+            :src="props.line.payer.avatarUrl ?? ''"
+            :alt="payerLabel"
+            :name="payerLabel"
+            :fallback-initial="payerInitial"
+            size="small"
+            shape="circle"
+            :show-loading="false"
+            bordered
+          />
+          <strong class="bill-line-card__payer-name">{{ payerLabel }}</strong>
+        </div>
+      </div>
+
+      <p class="bill-line-card__description" data-testid="bill-detail.line-description">
+        {{ descriptionText }}
+      </p>
+    </PuCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PuCard, PuCheckbox, PuImg, PuTag } from "@partner-up-dev/design-web";
+import { computed } from "vue";
+import {
+  formatCurrencyAmount,
+  resolveBillLineSettlementTag,
+} from "@/domains/commerce/model/bill-display";
+import type { BillDetailResponse } from "@/domains/commerce/queries/useCommerce";
+
+const props = defineProps<{
+  line: BillDetailResponse["lines"][number];
+  selected: boolean;
+}>();
+
+const emit = defineEmits<{
+  select: [];
+}>();
+
+const isSelectable = computed(() => props.line.payableByViewer && Boolean(props.line.checkoutHref));
+
+const signedAmountFen = computed(() =>
+  props.line.kind === "REFUND" ? -props.line.amountFen : props.line.amountFen,
+);
+
+const amountLabel = computed(() =>
+  formatCurrencyAmount(signedAmountFen.value, props.line.currency),
+);
+
+const statusTag = computed(() => resolveBillLineSettlementTag(props.line.settlementStatus));
+
+const descriptionText = computed(() => props.line.description?.trim() || props.line.label);
+
+const payerLabel = computed(() => props.line.payer.displayName);
+
+const payerInitial = computed(() => payerLabel.value.trim().slice(0, 1) || "付");
+
+const handleSelect = (): void => {
+  if (!isSelectable.value) return;
+  emit("select");
+};
+</script>
+
+<style scoped lang="scss">
+.bill-line-card {
+  width: 100%;
+  min-width: 0;
+  container-name: bill-line-card;
+  container-type: inline-size;
+}
+
+.bill-line-card__control {
+  width: 100%;
+  min-width: 0;
+  border-radius: var(--sys-radius-small);
+  text-align: left;
+}
+
+.bill-line-card__top-row {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: var(--sys-spacing-medium);
+}
+
+.bill-line-card__amount-row {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 auto;
+  align-items: center;
+  gap: var(--sys-spacing-small);
+  flex-wrap: wrap;
+}
+
+.bill-line-card__checkbox {
+  display: grid;
+  flex: 0 0 auto;
+  place-items: center;
+  pointer-events: none;
+
+  :deep(.pu-checkbox) {
+    pointer-events: none;
+  }
+}
+
+.bill-line-card__amount {
+  @include mx.pu-font(section);
+  color: var(--sys-color-on-surface);
+  white-space: nowrap;
+}
+
+.bill-line-card__payer {
+  display: flex;
+  min-width: 0;
+  flex: 0 1 auto;
+  align-items: center;
+  gap: var(--sys-spacing-xsmall);
+  margin-left: auto;
+}
+
+.bill-line-card__payer-name {
+  @include mx.pu-font(control);
+  min-width: 0;
+  max-inline-size: 8rem;
+  overflow: hidden;
+  color: var(--sys-color-on-surface);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bill-line-card__description {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  @include mx.pu-font(caption);
+  margin: 0;
+  color: var(--sys-color-on-surface-variant);
+}
+
+@supports (width: 1cqi) {
+  .bill-line-card__payer-name {
+    max-inline-size: 20cqi;
+  }
+}
+</style>
diff --git a/apps/frontend/src/domains/commerce/ui/order-detail/BillCard.vue b/apps/frontend/src/domains/commerce/ui/order-detail/BillCard.vue
index e9dfc19ad..6d98ec941 100644
--- a/apps/frontend/src/domains/commerce/ui/order-detail/BillCard.vue
+++ b/apps/frontend/src/domains/commerce/ui/order-detail/BillCard.vue
@@ -21,24 +21,24 @@
         {{ statusPlaceholder }}
       </span>
 
-      <PuButton
+      <strong
+        class="bill-card__amount"
+        data-testid="order-detail.ride-hailing.bill-card.amount"
+      >
+        {{ amountLabel }}
+      </strong>
+    </div>
+    <PuButton
         :action="billLinkAction"
         shape="rect"
-        tone="primary"
-        variant="outline"
+        tone="neutral"
+        variant="soft"
         size="sm"
         data-testid="order-detail.ride-hailing.bill-card.view"
       >
         查看
       </PuButton>
-    </div>
 
-    <strong
-      class="bill-card__amount"
-      data-testid="order-detail.ride-hailing.bill-card.amount"
-    >
-      {{ amountLabel }}
-    </strong>
   </PuCard>
 </template>
 
@@ -46,7 +46,7 @@
 import { PuButton, PuCard, PuTag } from "@partner-up-dev/design-web";
 import { computed } from "vue";
 import {
-  calculateBillEffectiveTotalFen,
+  formatCurrencyAmount,
   resolveBillSettlementTag,
 } from "@/domains/commerce/model/bill-display";
 import { useBillDetail } from "@/domains/commerce/queries/useCommerce";
@@ -71,7 +71,7 @@ const statusPlaceholder = computed(() => (billQuery.isError.value ? "状态待
 
 const amountLabel = computed(() => {
   if (detail.value) {
-    return formatFen(calculateBillEffectiveTotalFen(detail.value.bill));
+    return formatCurrencyAmount(detail.value.bill.totalAmountFen, detail.value.bill.currency);
   }
   return billQuery.isError.value ? "暂时无法加载金额" : "正在加载金额...";
 });
@@ -79,14 +79,6 @@ const amountLabel = computed(() => {
 const billLinkAction = computed(() =>
   normalizedBillId.value ? { to: { path: `/bills/${normalizedBillId.value}` } } : undefined,
 );
-
-const formatFen = (amountFen: number | null | undefined): string => {
-  if (typeof amountFen !== "number") return "待确认";
-  return new Intl.NumberFormat("zh-CN", {
-    style: "currency",
-    currency: "CNY",
-  }).format(amountFen / 100);
-};
 </script>
 
 <style scoped lang="scss">
diff --git a/apps/frontend/src/pages/CommerceBillDetailPage.vue b/apps/frontend/src/pages/CommerceBillDetailPage.vue
index a4157d848..bea41c6f4 100644
--- a/apps/frontend/src/pages/CommerceBillDetailPage.vue
+++ b/apps/frontend/src/pages/CommerceBillDetailPage.vue
@@ -7,10 +7,41 @@
     <template #header>
       <PuPageHeader
         title="账单详情"
-        subtitle="每个人只支付自己的账单行"
         show-back
         @back="handleBack"
-      />
+      >
+        <template v-if="detail" #actions>
+          <PuButton
+            :action="{ to: { path: `/orders/${detail.order.id}` } }"
+            shape="pill"
+            tone="neutral"
+            variant="outline"
+            size="sm"
+            data-testid="bill-detail.order-link"
+          >
+            查看订单
+          </PuButton>
+        </template>
+
+        <template v-if="detail" #meta>
+          <div class="bill-detail-page__header-meta">
+            <PuTag
+              :text="billStatusTag.label"
+              :tone="billStatusTag.tone"
+              variant="soft"
+              shape="pill"
+              size="md"
+              data-testid="bill-detail.status"
+            />
+            <span
+              class="bill-detail-page__total-amount"
+              data-testid="bill-detail.total-amount"
+            >
+              总金额 {{ totalAmountLabel }}
+            </span>
+          </div>
+        </template>
+      </PuPageHeader>
     </template>
 
     <div class="bill-detail-page__body">
@@ -35,108 +66,31 @@
         正在加载账单...
       </div>
 
-      <template v-else-if="detail">
-        <PuCard as="section" gap="md">
-          <div class="bill-detail-page__section-heading">
-            <p class="bill-detail-page__eyebrow">Bill</p>
-            <h2>{{ detail.order.itemName }}</h2>
-          </div>
-
-          <div class="bill-detail-page__summary-grid">
-            <div>
-              <span>应付合计</span>
-              <strong data-testid="bill-detail.charge-total">
-                {{ formatFen(detail.bill.chargeTotalFen) }}
-              </strong>
-            </div>
-            <div>
-              <span>已支付</span>
-              <strong data-testid="bill-detail.paid-total">
-                {{ formatFen(detail.bill.paidChargeFen) }}
-              </strong>
-            </div>
-            <div>
-              <span>应退合计</span>
-              <strong data-testid="bill-detail.refund-total">
-                {{ formatFen(detail.bill.refundTotalFen) }}
-              </strong>
-            </div>
-            <div>
-              <span>已退款</span>
-              <strong data-testid="bill-detail.refunded-total">
-                {{ formatFen(detail.bill.refundedFen) }}
-              </strong>
-            </div>
-            <div>
-              <span>结算状态</span>
-              <strong data-testid="bill-detail.settlement-status">
-                {{ settlementStatusLabel }}
-              </strong>
-            </div>
-          </div>
-
+      <div v-else-if="detail" class="bill-detail-page__content">
+        <section class="bill-detail-page__line-list" data-testid="bill-detail.lines">
+          <BillLineCard
+            v-for="line in detail.lines"
+            :key="line.id"
+            :line="line"
+            :selected="selectedPayableLineId === line.id"
+            @select="billLineSelection.select(line.id)"
+          />
+        </section>
+
+        <div v-if="selectedPayableLine" class="bill-detail-page__footer">
           <PuButton
-            :action="{ to: { path: `/orders/${detail.order.id}` } }"
+            :action="{ to: { path: selectedPayableLine.checkoutHref } }"
             shape="rect"
             tone="primary"
-            variant="outline"
-            data-testid="bill-detail.order-link"
+            variant="solid"
+            size="lg"
+            block
+            data-testid="bill-detail.pay-selected"
           >
-            返回订单详情
+            支付 {{ selectedPayableLineAmountLabel }}
           </PuButton>
-        </PuCard>
-
-        <PuCard as="section" gap="md">
-          <div class="bill-detail-page__section-heading">
-            <p class="bill-detail-page__eyebrow">Lines</p>
-            <h2>账单责任</h2>
-          </div>
-
-          <div class="bill-detail-page__line-list">
-            <div
-              v-for="line in detail.lines"
-              :key="line.id"
-              class="bill-detail-page__line"
-              data-testid="bill-detail.line"
-            >
-              <div class="bill-detail-page__line-summary">
-                <div>
-                  <strong>{{ line.label }}</strong>
-                  <span>{{ line.description ?? "无补充说明" }}</span>
-                  <small>
-                    {{
-                      line.userId === detail.viewer.userId
-                        ? "你的账单行"
-                        : "其他参与者账单行"
-                    }}
-                  </small>
-                </div>
-                <b
-                  >{{ line.kind === "REFUND" ? "-" : ""
-                  }}{{ formatFen(line.amountFen) }}</b
-                >
-              </div>
-
-              <div class="bill-detail-page__line-footer">
-                <span data-testid="bill-detail.line-status">
-                  {{ lineStatusLabel(line.settlementStatus) }}
-                </span>
-                <PuButton
-                  v-if="line.payableByViewer && line.checkoutHref"
-                  :action="{ to: { path: line.checkoutHref } }"
-                  shape="rect"
-                  tone="primary"
-                  variant="solid"
-                  size="sm"
-                  data-testid="bill-detail.pay-line"
-                >
-                  去支付
-                </PuButton>
-              </div>
-            </div>
-          </div>
-        </PuCard>
-      </template>
+        </div>
+      </div>
     </div>
   </PuPageScaffold>
 </template>
@@ -144,15 +98,21 @@
 <script setup lang="ts">
 import {
   PuButton,
-  PuCard,
   PuInlineNotice,
   PuPageHeader,
   PuPageScaffold,
+  PuTag,
+  usePuSelect,
 } from "@partner-up-dev/design-web";
-import { computed } from "vue";
+import { computed, watch } from "vue";
 import { useRoute } from "vue-router";
-import { resolveBillSettlementTag } from "@/domains/commerce/model/bill-display";
+import {
+  formatCurrencyAmount,
+  resolveBillSettlementTag,
+} from "@/domains/commerce/model/bill-display";
+import type { BillDetailResponse } from "@/domains/commerce/queries/useCommerce";
 import { useBillDetail } from "@/domains/commerce/queries/useCommerce";
+import BillLineCard from "@/domains/commerce/ui/bill-detail/BillLineCard.vue";
 import { useFallbackBack } from "@/shared/routing/useFallbackBack";
 
 const route = useRoute();
@@ -166,11 +126,6 @@ const billId = computed(() => {
 const billQuery = useBillDetail(billId);
 const detail = computed(() => billQuery.data.value ?? null);
 
-const settlementStatusLabel = computed(() => {
-  if (!detail.value) return "待支付";
-  return resolveBillSettlementTag(detail.value.bill).label;
-});
-
 const backFallbackTo = computed(() =>
   detail.value ? { path: `/orders/${detail.value.order.id}` } : { path: "/" },
 );
@@ -180,148 +135,117 @@ const billErrorMessage = computed(() =>
   billQuery.error.value instanceof Error ? billQuery.error.value.message : "加载账单失败。",
 );
 
-const lineStatusLabel = (status: string): string => {
-  if (status === "PAID") return "已支付";
-  if (status === "ACTION_REQUIRED") return "待完成支付";
-  if (status === "PROCESSING") return "支付处理中";
-  if (status === "FAILED") return "支付失败，可重试";
-  if (status === "REFUND_PENDING") return "退款处理中";
-  if (status === "REFUNDED") return "已退款";
-  return "待支付";
-};
+const billStatusTag = computed(() =>
+  detail.value
+    ? resolveBillSettlementTag(detail.value.bill)
+    : { label: "待支付" as const, tone: "neutral" as const },
+);
+
+const totalAmountLabel = computed(() =>
+  detail.value
+    ? formatCurrencyAmount(detail.value.bill.totalAmountFen, detail.value.bill.currency)
+    : "待确认",
+);
 
-const formatFen = (amountFen: number | null | undefined): string => {
-  if (typeof amountFen !== "number") return "待确认";
-  return new Intl.NumberFormat("zh-CN", {
-    style: "currency",
-    currency: "CNY",
-  }).format(amountFen / 100);
+type PayableBillLine = BillDetailResponse["lines"][number] & {
+  checkoutHref: string;
 };
+
+const isPayableBillLine = (line: BillDetailResponse["lines"][number]): line is PayableBillLine =>
+  line.payableByViewer && typeof line.checkoutHref === "string" && line.checkoutHref.length > 0;
+
+const payableLines = computed<PayableBillLine[]>(() =>
+  (detail.value?.lines ?? []).filter(isPayableBillLine),
+);
+
+const payableLineIds = computed(() => payableLines.value.map((line) => line.id));
+const payableLineIdSet = computed(() => new Set(payableLineIds.value));
+
+const billLineSelection = usePuSelect<string>({
+  multiple: false,
+  isOptionDisabled: (lineId) => !payableLineIdSet.value.has(lineId),
+});
+
+watch(
+  payableLineIds,
+  (nextIds) => {
+    const currentSelected = billLineSelection.selectedValues.value[0];
+    if (currentSelected && nextIds.includes(currentSelected)) return;
+    billLineSelection.setValue(nextIds[0]);
+  },
+  { immediate: true },
+);
+
+const selectedPayableLineId = computed(() => billLineSelection.selectedValues.value[0] ?? null);
+
+const selectedPayableLine = computed(
+  () => payableLines.value.find((line) => line.id === selectedPayableLineId.value) ?? null,
+);
+
+const selectedPayableLineAmountLabel = computed(() =>
+  selectedPayableLine.value
+    ? formatCurrencyAmount(selectedPayableLine.value.amountFen, selectedPayableLine.value.currency)
+    : "待确认",
+);
 </script>
 
 <style scoped lang="scss">
 .bill-detail-page {
   min-width: 0;
   --pu-page-max-width: 44rem;
+  --pu-page-padding-bottom: 0;
 }
 
 .bill-detail-page__body {
   display: flex;
   flex: 1 1 auto;
   flex-direction: column;
-  gap: var(--sys-spacing-medium);
   min-height: 0;
-  overflow: auto;
-  padding-bottom: var(--sys-spacing-medium);
 }
 
 .bill-detail-page__loading {
   color: var(--sys-color-on-surface-variant);
 }
 
-.bill-detail-page__section-heading {
+.bill-detail-page__header-meta {
   display: flex;
-  flex-direction: column;
-  gap: calc(var(--sys-spacing-xsmall) / 2);
-
-  h2,
-  p {
-    margin: 0;
-  }
-
-  h2 {
-    @include mx.pu-font(title);
-    color: var(--sys-color-on-surface);
-  }
+  width: 100%;
+  min-width: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sys-spacing-medium);
 }
 
-.bill-detail-page__eyebrow {
+.bill-detail-page__total-amount {
   @include mx.pu-font(control);
-  color: var(--sys-color-primary);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-.bill-detail-page__summary-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
-  gap: var(--sys-spacing-small);
-
-  div {
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--sys-spacing-xsmall) / 2);
-    padding: var(--sys-spacing-small);
-    border-radius: var(--sys-radius-small);
-    background: var(--sys-color-surface-container-high);
-  }
-
-  span {
-    @include mx.pu-font(control);
-    color: var(--sys-color-on-surface-variant);
-  }
-
-  strong {
-    color: var(--sys-color-on-surface);
-  }
+  flex: 0 0 auto;
+  color: var(--sys-color-on-surface);
+  white-space: nowrap;
 }
 
-.bill-detail-page__line-list {
+.bill-detail-page__content {
   display: flex;
+  min-height: 0;
+  flex: 1 1 auto;
   flex-direction: column;
-  gap: var(--sys-spacing-small);
+  justify-content: space-between;
+  gap: var(--sys-spacing-medium);
 }
 
-.bill-detail-page__line {
+.bill-detail-page__line-list {
   display: flex;
+  min-height: 0;
+  flex: 1 1 auto;
   flex-direction: column;
   gap: var(--sys-spacing-small);
-  padding: var(--sys-spacing-small);
-  border-radius: var(--sys-radius-medium);
-  background: var(--sys-color-surface-container-high);
-}
-
-.bill-detail-page__line-summary,
-.bill-detail-page__line-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--sys-spacing-medium);
-}
-
-.bill-detail-page__line-summary {
-  div {
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--sys-spacing-xsmall) / 2);
-  }
-
-  span,
-  small {
-    color: var(--sys-color-on-surface-variant);
-  }
-
-  b {
-    color: var(--sys-color-on-surface);
-    white-space: nowrap;
-  }
-}
-
-.bill-detail-page__line-footer {
-  span {
-    color: var(--sys-color-primary);
-  }
+  overflow: auto;
+  padding-bottom: var(--sys-spacing-small);
 }
 
-@media (max-width: 42rem) {
-  .bill-detail-page__summary-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .bill-detail-page__line-summary,
-  .bill-detail-page__line-footer {
-    align-items: flex-start;
-    flex-direction: column;
-  }
+.bill-detail-page__footer {
+  flex: 0 0 auto;
+  padding-top: var(--sys-spacing-small);
+  padding-bottom: calc(var(--sys-spacing-medium) + env(safe-area-inset-bottom, 0px));
+  background: var(--sys-color-surface);
 }
 </style>
diff --git a/tasks/ride-hailing-ui-fixes/bill-detail-page-reset-plan.md b/tasks/ride-hailing-ui-fixes/bill-detail-page-reset-plan.md
new file mode 100644
index 000000000..bef8a1da2
--- /dev/null
+++ b/tasks/ride-hailing-ui-fixes/bill-detail-page-reset-plan.md
@@ -0,0 +1,225 @@
+# Bill Detail Page Reset Plan
+
+## Objective
+
+- remove the current Bill Detail page body content
+- remove the current Bill Detail page header subtitle
+- then redesign the page only after grounding the UI in real Bill and BillLine
+  data
+
+## Classification
+
+- Primary route: `Reality`
+- Active mode: `Explore`
+
+## Confirmed Truth
+
+- current frontend page:
+  `apps/frontend/src/pages/CommerceBillDetailPage.vue`
+- current page structure is a two-card document layout:
+  - bill summary card
+  - line list card
+- requested first code mutation is intentionally destructive:
+  delete the current body content and header subtitle before new UI is designed
+- current backend bill detail projection:
+  - `bill`: id, sourceOrderId, status, currency, chargeTotalFen,
+    paidChargeFen, refundTotalFen, refundedFen, settlementStatus
+  - `order`: id, family, status, itemName
+  - `viewer`: userId
+  - `lines[]`: id, userId, kind, amountFen, currency, label, description,
+    refundOfBillLineId, settlementStatus, paidFen, refundedFen,
+    payableByViewer, checkoutHref, paymentProviderInstanceId, attemptCount,
+    settledAt
+- current line settlement status in `getBillDetail` is derived from
+  `deriveBillPaymentState`; stable outputs are:
+  - `UNPAID`
+  - `PROCESSING`
+  - `PAID`
+  - `REFUND_PENDING`
+  - `REFUNDED`
+
+## Proposed Address And Object
+
+- `apps/frontend/src/pages/CommerceBillDetailPage.vue`
+  - first reset body content
+  - remove header subtitle
+- task packet logs
+  - record the reset and post-reset design discussion
+
+## State Diff
+
+- From:
+  Bill Detail page is a filled-out generic summary/list document page.
+- To:
+  Bill Detail page becomes an intentionally cleared shell so the next UI can be
+  designed from real bill information instead of incrementally patching the old
+  layout.
+
+## Blast Radius Forecast
+
+- frontend page only for the first reset mutation
+- current scenario coverage may need temporary adjustment if any tests assert
+  Bill Detail content instead of route reachability
+- payment checkout back-link still depends on `/bills/:billId` remaining valid
+
+## Invariants Check
+
+- keep Bill Detail route `/bills/:billId`
+- keep loading/error/invalid-id handling unless the human asks to reset those
+  too
+- keep back navigation behavior intact
+- keep `bill-detail.page` and stable route-level testability
+
+## Prerequisite Reset Result
+
+- removed `PuPageHeader` subtitle from `CommerceBillDetailPage.vue`
+- removed the current successful-state body content
+- retained:
+  - invalid bill-id notice
+  - loading state
+  - error state
+  - bill-detail back navigation
+
+## Verification Result
+
+- `pnpm exec biome check apps/frontend/src/pages/CommerceBillDetailPage.vue`
+- `pnpm --dir apps/frontend exec vue-tsc --noEmit`
+- `git diff --check -- apps/frontend/src/pages/CommerceBillDetailPage.vue`
+
+## Current IA Direction
+
+- requested information architecture should include:
+  - order entry (`查看订单`)
+  - status
+  - bill-line subtotal entries with signed amount, payer, and description
+  - total amount
+  - payment action when payable bill lines exist
+- current product/data interpretation:
+  - primary user-facing `状态` should be bill settlement state, not raw
+    `bill.status`
+  - `总金额` should be returned by backend, not recomputed in frontend
+  - header meta should keep `总金额 ￥40.00` on one row, not wrap into stacked
+    label/value lines
+  - payment checkout is bill-line-scoped, not bill-scoped
+- current API constraint:
+  - bill lines expose `userId`, but not payer display name
+  - if UI must show explicit payer names, backend projection needs enrichment
+- current action constraint:
+  - page uses one selection-driven checkout CTA, not mixed page-level plus
+    row-level pay buttons
+  - selectable eligibility should follow backend `payableByViewer`, not a
+    frontend `userId` equality guess
+
+## Current Wireframe Direction
+
+- page header:
+  - `查看订单` moves into `PuPageHeader` actions
+  - `状态` and `总金额` move into the `meta` slot
+  - meta layout should be `flex-row justify-between`
+  - amount copy should stay inline, for example `总金额 ￥40.00`
+- bill summary:
+  - user-facing `状态` remains settlement-oriented
+  - `总金额` should be returned by backend, not recomputed in frontend
+  - currency symbol must follow actual bill currency data
+- bill lines:
+  - use `PuCard(selectable)` plus `PuCheckbox` as the carrier
+  - line layout should contain:
+    - amount
+    - status tag
+    - payer avatar and payer name
+    - description text
+  - only `payableByViewer` bill lines are selectable/payable
+  - non-payable lines should render disabled checkbox state
+  - selected bill line drives the page-level checkout CTA
+- footer CTA:
+  - single CTA text is `支付 $XX.YY`
+  - CTA hides completely when no payable line exists
+- backend enrichment now implied by IA:
+  - bill should expose backend-computed total amount
+  - bill line payer needs enriched avatar/name, not only `userId`
+
+## Scheme Review
+
+- `PuCard(selectable)` plus `PuCheckbox` is still a good fit, but selection
+  ownership must stay on the card layer.
+- `PuCheckbox` should be visual-only inside the card:
+  - current design-web guidance says interactive cards must not contain nested
+    interactive controls
+  - therefore the checkbox should use disabled/read-only presentation and
+    pointer-blocked semantics, like the current `RideHailingSkuCard`
+  - actual single-select state should come from `usePuSelect`
+- non-payable lines should disable both:
+  - checkbox visual state
+  - card selection interaction
+- default selection should be:
+  - first payable bill line, if any
+  - otherwise no selection and no footer CTA
+- page-level CTA should bind strictly to the selected payable line:
+  - label `支付 $XX.YY`
+  - target selected line `checkoutHref`
+- payer area should be treated as enriched projection, not client stitching:
+  - avatar src
+  - display name
+  - optional viewer hint such as `你`
+
+## Implementation Steps
+
+1. Expand backend `BillDetailProjection.bill` with a backend-owned total amount
+   field and explicit currency presentation source.
+2. Expand backend `BillDetailProjection.lines[]` with payer presentation data:
+   avatar src, display name, and any viewer/self marker the UI needs.
+3. Keep `payableByViewer` as the only selectable/payable guard; do not
+   duplicate that business rule in frontend.
+4. Rebuild `CommerceBillDetailPage` header:
+   move `查看订单` into actions and render `状态` plus inline `总金额` in the
+   meta slot.
+5. Build a BillLine card surface:
+   `PuCard(selectable)` owns interaction, while `PuCheckbox` is visual-only and
+   mirrors selected/disabled state.
+6. Use `usePuSelect` in single-select mode for payable bill lines and seed the
+   first payable line as default selection.
+7. Render non-payable lines in the same layout but with disabled card/checkbox
+   interaction state.
+8. Add a single footer CTA bound to the selected line:
+   text `支付 $XX.YY`, action to that line's checkout page, hidden when no
+   payable line exists.
+9. Update or add focused tests for:
+   header meta rendering, default selection, disabled non-payable lines, CTA
+   label, and selected-line checkout routing.
+
+## Implementation Result
+
+- completed step 1:
+  backend now returns `bill.totalAmountFen`
+- completed step 2:
+  backend now enriches `lines[].payer` from user records
+- completed step 3:
+  frontend selection/payability follows backend `payableByViewer` only
+- completed step 4:
+  `CommerceBillDetailPage` header now uses actions + meta slots as planned
+- completed step 5:
+  `BillLineCard.vue` renders amount, status tag, payer avatar/name, and
+  description with a visual-only checkbox
+- completed step 6:
+  payable line selection uses `usePuSelect` in explicit single-select mode with
+  first-payable defaulting
+- completed step 7:
+  non-payable lines remain visible and disabled
+- completed step 8:
+  footer CTA now routes only the selected payable bill line to checkout
+- completed step 9:
+  RideHailing system scenario now covers two-participant bill detail and
+  checkout routing
+
+## Implementation Note
+
+- design-web `PuCard` does not inherit arbitrary attrs, so stable
+  `bill-detail.line` anchors live on a native wrapper; the inner selectable
+  `PuCard` keeps the role/button interaction surface.
+
+## Verification Result
+
+- `pnpm exec biome check apps/frontend/src/pages/CommerceBillDetailPage.vue apps/frontend/src/domains/commerce/ui/bill-detail/BillLineCard.vue apps/frontend/src/domains/commerce/ui/order-detail/BillCard.vue apps/frontend/src/domains/commerce/model/bill-display.ts tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts apps/backend/src/domains/payment/use-cases/get-bill-detail.ts apps/backend/src/repositories/UserRepository.ts`
+- `pnpm --dir apps/frontend exec vue-tsc --noEmit`
+- `pnpm --dir apps/backend exec tsc --noEmit -p tsconfig.json`
+- `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts -t "commerce_ride_hailing_ordering_reaches_order_detail"`
diff --git a/tasks/ride-hailing-ui-fixes/change-log.md b/tasks/ride-hailing-ui-fixes/change-log.md
index b76e04ab9..2b242cdef 100644
--- a/tasks/ride-hailing-ui-fixes/change-log.md
+++ b/tasks/ride-hailing-ui-fixes/change-log.md
@@ -7,7 +7,74 @@ Archived full history:
 
 - `archive/change-log-ordering-through-order-detail-map.md`
 
-## Current Slice: RideHailing Order Detail Bill Card
+## Current Slice: Bill Detail Page Reset And Backend Contract Segment
+
+- Requested first mutation for the next slice:
+  - remove Bill Detail page body content
+  - remove Bill Detail header subtitle
+- Confirmed current backend Bill projection fields:
+  - `bill`: id, sourceOrderId, status, currency, chargeTotalFen,
+    paidChargeFen, refundTotalFen, refundedFen, settlementStatus
+  - `order`: id, family, status, itemName
+  - `lines[]`: id, userId, kind, amountFen, currency, label, description,
+    refundOfBillLineId, settlementStatus, paidFen, refundedFen,
+    payableByViewer, checkoutHref, paymentProviderInstanceId, attemptCount,
+    settledAt
+- Important status reality:
+  - current bill detail line status is derived from `deriveBillPaymentState`
+  - current stable outputs are
+    `UNPAID / PROCESSING / PAID / REFUND_PENDING / REFUNDED`
+  - existing frontend `ACTION_REQUIRED` / `FAILED` line-label branches are not
+    currently exercised by `getBillDetail`
+- Prerequisite reset implemented:
+  - removed Bill Detail header subtitle
+  - removed current successful-state Bill Detail body content
+  - preserved invalid-id, loading, error, and back-navigation handling
+- Backend contract implementation:
+  - expanded `BillDetailProjection.bill` with backend-owned `totalAmountFen`
+  - expanded `BillDetailProjection.lines[]` with enriched payer presentation:
+    - `userId`
+    - `nickname`
+    - `displayName`
+    - `avatarUrl`
+    - `isViewer`
+  - added repository support to load payer records by id set
+- Frontend implementation:
+  - added `domains/commerce/ui/bill-detail/BillLineCard.vue`
+  - rebuilt `CommerceBillDetailPage` header:
+    - `查看订单` in actions
+    - settlement tag and inline `总金额` in meta
+  - bill lines now render as amount/status/payer/description cards
+  - page selection is single-select via `usePuSelect`
+  - only backend-payable lines are selectable
+  - disabled non-payable lines remain visible with disabled checkbox state
+  - page footer CTA now routes only the selected payable line to checkout
+  - `BillCard.vue` now reads backend-owned `totalAmountFen`
+  - follow-up layout correction:
+    - BillLine card now uses:
+      checkbox / amount+status / payer-avatar+nickname
+    - card body now renders description text only
+    - payer nickname no longer appends viewer copy
+    - payer nickname width is container-constrained from the BillLine card
+    - bill-detail success state now uses a true `space-between` flex column;
+      CTA no longer relies on `sticky`
+- Scenario coverage update:
+  - RideHailing bill-detail flow now uses a two-participant order
+  - scenario asserts:
+    - header status and total amount
+    - two bill lines render
+    - viewer-owned line is default-selected and payable
+    - non-viewer line stays disabled
+    - CTA label reflects the selected bill-line amount
+    - bill-detail -> checkout -> bill-detail -> order-detail routing works
+- Verification result:
+  - focused biome check passed
+  - frontend typecheck passed
+  - backend typecheck passed
+  - focused RideHailing system scenario passed
+  - `git diff --check` passed
+
+## Previous Slice: RideHailing Order Detail Bill Card
 
 - Target component contract:
   - Bill Card is a reusable component
diff --git a/tasks/ride-hailing-ui-fixes/control.md b/tasks/ride-hailing-ui-fixes/control.md
index 453909426..212546745 100644
--- a/tasks/ride-hailing-ui-fixes/control.md
+++ b/tasks/ride-hailing-ui-fixes/control.md
@@ -19,7 +19,7 @@ Hypothesis:
 ## Classification
 
 - Primary route: `Reality`
-- Active mode: `Execute` for RideHailing Order Detail Bill Card integration
+- Active mode: `Execute` for Bill Detail page reset and backend-contract segment
 - Current collaboration state: choice-set backend/domain foundation, Ordering
   UI primitive/control, SKU Card layout remediation, Offer Listing / quote
   identity, Ordering entry decoupling, durable docs promotion, and fake provider
@@ -33,9 +33,10 @@ Hypothesis:
   task-packet wording is now corrected so the Driver Card call affordance is
   treated as an action, not as a required visible `Call` text label; current
   implementation slice covers order-detail back-navigation semantics and a
-  resolved-vehicle section above route facts; next requested slice adds a
-  self-fetch Bill Card above the resolved-vehicle section when a RideHailing
-  order already has a bill
+  resolved-vehicle section above route facts; Bill Card integration is now
+  committed; current slice resets and rebuilds Bill Detail page around
+  backend-owned bill totals, payer-enriched bill lines, single-select checkout,
+  and verified RideHailing bill-detail -> checkout routing
 
 ## Inherited Effective Truth
 
@@ -123,6 +124,13 @@ Hypothesis:
 - Commerce already exposes both `GET /api/commerce/bills/:billId` and
   `GET /api/commerce/orders/:orderId/bill`; the frontend already has
   `useBillDetail(billId)` and `CommerceBillDetailPage` at `/bills/:billId`.
+- Bill Detail backend contract now also exposes:
+  - `bill.totalAmountFen` as the backend-owned signed total shown by frontend
+  - `lines[].payer.userId`
+  - `lines[].payer.nickname`
+  - `lines[].payer.displayName`
+  - `lines[].payer.avatarUrl`
+  - `lines[].payer.isViewer`
 - `CommerceOrderDetailPage` already receives `detail.bill` with bill id,
   status, currency, and lightweight line snapshots; that is enough to detect
   bill existence and hand canonical data ownership to an id-owned Bill Card.
@@ -133,6 +141,9 @@ Hypothesis:
 - Current RideHailing order detail content renders status hero, optional driver
   card, dispatching-only candidate vehicles, resolved service vehicle, route,
   and riders; it does not yet render any bill-specific section.
+- Bill Detail page reset slice already removed the old header subtitle and the
+  old successful-state body content; the page is now rebuilt from the real
+  Bill / BillLine projection with card-based payable-line selection.
 
 ## Collaboration Protocol
 
@@ -192,6 +203,7 @@ Hypothesis:
 Choose the narrowest sufficient proof per approved slice:
 
 - `pnpm check:type:frontend`
+- `pnpm --dir apps/backend exec tsc --noEmit -p tsconfig.json`
 - focused browser/manual check through PR placement when the issue is visual or
   interaction-specific
 - `pnpm vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
@@ -201,8 +213,10 @@ Choose the narrowest sufficient proof per approved slice:
 
 ## Current State
 
-- Opened slice: RideHailing Order Detail Bill Card placement and self-fetch
-  component planning.
+- Implemented slice: Bill Detail page reset and backend-contract segment
+  (uncommitted).
+- Committed slice: RideHailing Order Detail Bill Card
+  (`0bcfdc29`).
 
 - Committed slice: RideHailing ordering content naming and layout correction
   (`f7ac1aa3`).
diff --git a/tasks/ride-hailing-ui-fixes/discussion-log.md b/tasks/ride-hailing-ui-fixes/discussion-log.md
index 2baea5cc1..5d4a49791 100644
--- a/tasks/ride-hailing-ui-fixes/discussion-log.md
+++ b/tasks/ride-hailing-ui-fixes/discussion-log.md
@@ -7,7 +7,114 @@ Archived full history:
 
 - `archive/discussion-log-ordering-through-order-detail-map.md`
 
-## Current Segment: RideHailing Order Detail Bill Card
+## Current Segment: Bill Detail Page Reset And Data Audit
+
+- New requested slice:
+  - first remove the current Bill Detail page body content
+  - remove the Bill Detail header description/subtitle
+  - then inspect actual Bill and BillLine information before deciding the new
+    UI
+- Current code findings:
+  - current `CommerceBillDetailPage` is still a generic two-card document page
+    with duplicated `Bill` / `Lines` eyebrows and a summary-grid-first layout
+  - current page-level copy assumes a stable model of "每个人只支付自己的账单行",
+    but the backend projection already contains both charge and refund facts
+  - backend `BillDetailProjection.bill` currently exposes:
+    - id
+    - sourceOrderId
+    - status
+    - currency
+    - chargeTotalFen
+    - paidChargeFen
+    - refundTotalFen
+    - refundedFen
+    - settlementStatus
+  - backend `BillDetailProjection.order` currently exposes:
+    - id
+    - family
+    - status
+    - itemName
+  - backend `BillDetailProjection.lines[]` currently exposes:
+    - id
+    - userId
+    - kind
+    - amountFen
+    - currency
+    - label
+    - description
+    - refundOfBillLineId
+    - settlementStatus
+    - paidFen
+    - refundedFen
+    - payableByViewer
+    - checkoutHref
+    - paymentProviderInstanceId
+    - attemptCount
+    - settledAt
+  - important reality check:
+    frontend currently handles `ACTION_REQUIRED` and `FAILED` line labels, but
+    present `getBillDetail` line status is derived from `deriveBillPaymentState`
+    and, in the current implementation, reliably yields
+    `UNPAID / PROCESSING / PAID / REFUND_PENDING / REFUNDED`
+- Design pressure observed:
+  - bill-level data should own header summary only; page body should stay
+    line-driven
+  - payment action belongs only to viewer-payable charge lines, not to the bill
+    shell as a whole
+  - payer avatar/name is required for the chosen line-card layout, so
+    `userId`-only projection is insufficient
+- Implementation result:
+  - removed the current Bill Detail header subtitle
+  - removed the current successful-state Bill Detail body content
+  - kept invalid-id, loading, error, and back-navigation behavior intact
+  - backend `BillDetailProjection.bill` now exposes backend-owned
+    `totalAmountFen`
+  - backend `BillDetailProjection.lines[]` now exposes enriched payer
+    presentation data:
+    - `userId`
+    - `nickname`
+    - `displayName`
+    - `avatarUrl`
+    - `isViewer`
+  - rebuilt `CommerceBillDetailPage` IA:
+    - `查看订单` moved into `PuPageHeader` actions
+    - `状态` and inline `总金额` moved into header meta
+    - bill lines render as card rows with amount, status tag, payer, and
+      description
+    - footer CTA is single-select and bill-line-scoped
+  - selection model follows backend `payableByViewer` only; non-payable lines
+    stay visible but disabled
+  - `BillLineCard` uses a visual-only checkbox and `usePuSelect` single-select
+    state
+  - implementation note:
+    design-web `PuCard` does not inherit arbitrary attrs, so stable
+    `bill-detail.line` anchors live on a native outer wrapper while the inner
+    selectable `PuCard` keeps the role/button interaction model
+- Follow-up layout correction:
+  - BillLine card top row now matches the agreed structure:
+    checkbox, amount/status cluster, payer avatar/nickname cluster
+  - card body now shows description text only; the extra standalone label row
+    was removed
+  - payer nickname no longer appends `你`
+  - payer name width is constrained from the BillLine card container with
+    container-query units when available
+  - bill-detail success state now uses a real `justify-content: space-between`
+    column layout so the CTA sits at the bottom of the `PuPageScaffold`
+    screen viewport without relying on `sticky`
+- Verification result:
+  - `pnpm exec biome check` on changed frontend/backend/scenario files
+  - `pnpm --dir apps/frontend exec vue-tsc --noEmit`
+  - `pnpm --dir apps/backend exec tsc --noEmit -p tsconfig.json`
+  - targeted system scenario passed:
+    `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts -t "commerce_ride_hailing_ordering_reaches_order_detail"`
+- Follow-up verification result:
+  - `pnpm exec biome check apps/frontend/src/domains/commerce/ui/bill-detail/BillLineCard.vue apps/frontend/src/pages/CommerceBillDetailPage.vue tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+  - `pnpm --dir apps/frontend exec vue-tsc --noEmit`
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts -t "commerce_ride_hailing_ordering_reaches_order_detail"`
+- Next step:
+  - ready for the next bill-detail slice or commit request
+
+## Previous Segment: RideHailing Order Detail Bill Card
 
 - New requested fix:
   - add a Bill Card component whose input is `billId`
diff --git a/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts b/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
index 7d04c888c..bb7f13505 100644
--- a/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
+++ b/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
@@ -547,7 +547,10 @@ async function selectPremierAsAdditionalCandidate(page: Page): Promise<void> {
   });
 }
 
-async function assertRideHailingOrderDetail(page: Page): Promise<void> {
+async function assertRideHailingOrderDetail(
+  page: Page,
+  expectedRiderNames: string[] = ["scenario-system-ride-hailing-creator"],
+): Promise<void> {
   await page.getByTestId("order-detail.page").waitFor({
     state: "visible",
     timeout: 10_000,
@@ -610,11 +613,13 @@ async function assertRideHailingOrderDetail(page: Page): Promise<void> {
     expected: "灵隐寺",
     label: "RideHailing route section destination",
   });
-  await assertLocatorTextIncludes({
-    actual: page.getByTestId("order-detail.ride-hailing.riders-section").textContent(),
-    expected: "scenario-system-ride-hailing-creator",
-    label: "RideHailing riders section",
-  });
+  for (const expectedRiderName of expectedRiderNames) {
+    await assertLocatorTextIncludes({
+      actual: page.getByTestId("order-detail.ride-hailing.riders-section").textContent(),
+      expected: expectedRiderName,
+      label: `RideHailing riders section (${expectedRiderName})`,
+    });
+  }
 }
 
 async function assertRideHailingFactSectionOrder(input: {
@@ -671,6 +676,84 @@ async function assertRideHailingBillCard(page: Page): Promise<void> {
   });
 }
 
+async function assertRideHailingBillDetailPage(input: {
+  page: Page;
+  viewerPayerName: string;
+  otherPayerName: string;
+}): Promise<void> {
+  const { page } = input;
+  const billLines = page.getByTestId("bill-detail.line");
+
+  await page.getByTestId("bill-detail.page").waitFor({
+    state: "visible",
+    timeout: 10_000,
+  });
+  await assertLocatorTextIncludes({
+    actual: page.getByTestId("bill-detail.status").textContent(),
+    expected: "待支付",
+    label: "RideHailing bill detail settlement status",
+  });
+  await assertLocatorTextMatches({
+    actual: page.getByTestId("bill-detail.total-amount").textContent(),
+    pattern: /总金额\s*[¥￥]40\.00/,
+    label: "RideHailing bill detail total amount",
+  });
+  await billLines.first().waitFor({
+    state: "visible",
+    timeout: 10_000,
+  });
+  assert.equal(await billLines.count(), 2);
+
+  const viewerLine = billLines.filter({ hasText: input.viewerPayerName });
+  const otherLine = billLines.filter({ hasText: input.otherPayerName });
+
+  await viewerLine.waitFor({
+    state: "visible",
+    timeout: 10_000,
+  });
+  await otherLine.waitFor({
+    state: "visible",
+    timeout: 10_000,
+  });
+
+  await assertLocatorTextIncludes({
+    actual: viewerLine.getByTestId("bill-detail.line-payer").textContent(),
+    expected: input.viewerPayerName,
+    label: "RideHailing bill detail viewer payer",
+  });
+  await assertLocatorTextIncludes({
+    actual: otherLine.getByTestId("bill-detail.line-payer").textContent(),
+    expected: input.otherPayerName,
+    label: "RideHailing bill detail other payer",
+  });
+  await assertLocatorTextMatches({
+    actual: viewerLine.getByTestId("bill-detail.line-amount").textContent(),
+    pattern: /[¥￥]20\.00/,
+    label: "RideHailing bill detail viewer line amount",
+  });
+  await assertLocatorTextMatches({
+    actual: otherLine.getByTestId("bill-detail.line-amount").textContent(),
+    pattern: /[¥￥]20\.00/,
+    label: "RideHailing bill detail other line amount",
+  });
+
+  const viewerLineControl = viewerLine.locator('[role="button"]');
+  const otherLineControl = otherLine.locator('[role="button"]');
+
+  assert.equal(await viewerLine.getAttribute("data-payable"), "true");
+  assert.equal(await viewerLine.getAttribute("data-selected"), "true");
+  assert.equal(await viewerLineControl.getAttribute("aria-disabled"), null);
+  assert.equal(await otherLine.getAttribute("data-payable"), "false");
+  assert.equal(await otherLine.getAttribute("data-selected"), "false");
+  assert.equal(await otherLineControl.getAttribute("aria-disabled"), "true");
+
+  await assertLocatorTextMatches({
+    actual: page.getByTestId("bill-detail.pay-selected").textContent(),
+    pattern: /支付\s*[¥￥]20\.00/,
+    label: "RideHailing bill detail pay selected CTA",
+  });
+}
+
 async function waitForRideHailingMapMode(
   page: Page,
   mode: "SEARCHING_ORIGIN" | "PICKING_UP" | "ARRIVED_AT_PICKUP" | "IN_TRIP" | "PLANNED_ROUTE",
@@ -688,6 +771,7 @@ scenario("commerce_ride_hailing_ordering_reaches_order_detail", async (ctx) => {
   const creator = await givenUser("system-ride-hailing-creator", {
     phoneNumber: "13800138000",
   });
+  const passenger = await givenUser("system-ride-hailing-passenger");
   await bindScenarioWeChatOpenId({
     openId: "fake-openid-commerce-ride-hailing-creator",
     user: creator,
@@ -696,11 +780,17 @@ scenario("commerce_ride_hailing_ordering_reaches_order_detail", async (ctx) => {
     creator,
     title: "System ride hailing partner request",
   });
+  await partnerRepo.createSlot({
+    prId: pr.id,
+    status: "JOINED",
+    userId: passenger.user.id,
+  });
   await configurePRStatus({ pr, status: "READY" });
   await registerScenarioPaymentProvider();
   const placement = await givenRideHailingOrderingPlacement();
 
   ctx.record("creatorUserId", creator.user.id);
+  ctx.record("passengerUserId", passenger.user.id);
   ctx.record("prId", pr.id);
   ctx.record("placementId", placement.placementId);
   ctx.record("providerInstanceId", placement.providerInstanceId);
@@ -717,7 +807,10 @@ scenario("commerce_ride_hailing_ordering_reaches_order_detail", async (ctx) => {
     await selectPremierAsAdditionalCandidate(page);
 
     await page.getByTestId("ordering.ride-hailing.create-order").click();
-    await assertRideHailingOrderDetail(page);
+    await assertRideHailingOrderDetail(page, [
+      "scenario-system-ride-hailing-creator",
+      "scenario-system-ride-hailing-passenger",
+    ]);
     await page.waitForTimeout(3500);
     const fakeOrders = await readFakeCaocaoOrders();
     assert.equal(fakeOrders.length, 1);
@@ -784,19 +877,35 @@ scenario("commerce_ride_hailing_ordering_reaches_order_detail", async (ctx) => {
     await page.waitForURL((url) => /^\/bills\/[0-9a-f-]+$/.test(new URL(url).pathname), {
       timeout: 10_000,
     });
-    await page.getByTestId("bill-detail.page").waitFor({
+    const billDetailPath = new URL(page.url()).pathname;
+    await assertRideHailingBillDetailPage({
+      page,
+      viewerPayerName: "scenario-system-ride-hailing-creator",
+      otherPayerName: "scenario-system-ride-hailing-passenger",
+    });
+    await page.getByTestId("bill-detail.pay-selected").click();
+    await page.waitForURL(
+      (url) => /^\/bill-lines\/[0-9a-f-]+\/checkout$/.test(new URL(url).pathname),
+      {
+        timeout: 10_000,
+      },
+    );
+    await page.getByTestId("payment-checkout.page").waitFor({
       state: "visible",
       timeout: 10_000,
     });
-    await assertLocatorTextIncludes({
-      actual: page.getByTestId("bill-detail.settlement-status").textContent(),
-      expected: "待支付",
-      label: "RideHailing bill detail settlement status",
-    });
     await assertLocatorTextMatches({
-      actual: page.getByTestId("bill-detail.charge-total").textContent(),
-      pattern: /[¥￥]40\.00/,
-      label: "RideHailing bill detail charge total",
+      actual: page.getByTestId("payment-checkout.amount").textContent(),
+      pattern: /[¥￥]20\.00/,
+      label: "RideHailing payment checkout amount",
+    });
+    await page.getByTestId("payment-checkout.bill-link").click();
+    await page.waitForURL((url) => new URL(url).pathname === billDetailPath, {
+      timeout: 10_000,
+    });
+    await page.getByTestId("bill-detail.page").waitFor({
+      state: "visible",
+      timeout: 10_000,
     });
     await page.getByTestId("bill-detail.order-link").click();
     await page.waitForURL((url) => new URL(url).pathname === orderDetailPath, {

From a8c4fc46325fd83c211bbaae95245f375d8930ae Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Thu, 25 Jun 2026 17:55:40 +0800
Subject: [PATCH 47/94] chore(frontend): migrate design-web 0.4.7 page chrome

- upgrade @partner-up-dev/design-web to 0.4.7 and refresh lockfile
- replace removed PuPageHeader usage with PuHeader in scaffold pageHeader slots
- restore icon-only back semantics and align scaffold padding contracts
---
 apps/frontend/package.json                    |   2 +-
 .../commerce/ui/bill-detail/BillLineCard.vue  |   1 -
 .../ui/ordering/OrderingPageShell.vue         |  36 +++--
 .../domains/pr/ui/composites/PRHeroHeader.vue |  63 --------
 .../domains/pr/ui/sections/PRCreateHeader.vue |  54 -------
 apps/frontend/src/pages/AboutPage.vue         |  26 +++-
 .../src/pages/AnchorEventLandingPage.vue      |  25 ++-
 .../src/pages/CommerceBillDetailPage.vue      |  25 ++-
 .../src/pages/CommerceOrderDetailPage.vue     |  24 ++-
 apps/frontend/src/pages/ContactAuthorPage.vue |  26 +++-
 .../frontend/src/pages/ContactSupportPage.vue |  26 +++-
 apps/frontend/src/pages/EventPRSearchPage.vue |  52 ++++---
 apps/frontend/src/pages/EventPlazaPage.vue    |  56 ++++---
 .../src/pages/LocationApplicationPage.vue     |  26 +++-
 .../frontend/src/pages/LocationPickerPage.vue |  49 +++---
 apps/frontend/src/pages/MePage.vue            |  26 +++-
 apps/frontend/src/pages/MyPRsPage.vue         |  26 +++-
 apps/frontend/src/pages/PRCreatePage.vue      |  21 ++-
 apps/frontend/src/pages/PRMessagesPage.vue    |  26 +++-
 apps/frontend/src/pages/PRPage.vue            |  35 +++--
 .../src/pages/PaymentCheckoutPage.vue         |  25 ++-
 .../src/pages/RouteApplicationPage.vue        |  26 +++-
 apps/frontend/src/pages/UserProfilePage.vue   |  27 +++-
 apps/frontend/src/shared/ui/AGENTS.md         |   1 +
 pnpm-lock.yaml                                |  16 +-
 tasks/design-web-0.4.7-update/README.md       | 143 ++++++++++++++++++
 26 files changed, 546 insertions(+), 317 deletions(-)
 delete mode 100644 apps/frontend/src/domains/pr/ui/composites/PRHeroHeader.vue
 delete mode 100644 apps/frontend/src/domains/pr/ui/sections/PRCreateHeader.vue
 create mode 100644 tasks/design-web-0.4.7-update/README.md

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
index 8f4436727..595fd2711 100644
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@@ -13,7 +13,7 @@
     "lint:tokens:strict": "node ./scripts/check-token-governance.mjs --strict"
   },
   "dependencies": {
-    "@partner-up-dev/design-web": "0.4.6",
+    "@partner-up-dev/design-web": "0.4.7",
     "@tanstack/vue-query": "^5.60.0",
     "@unhead/vue": "^2.1.2",
     "@vee-validate/zod": "^4.15.1",
diff --git a/apps/frontend/src/domains/commerce/ui/bill-detail/BillLineCard.vue b/apps/frontend/src/domains/commerce/ui/bill-detail/BillLineCard.vue
index 4cfa4c9e6..f64f04622 100644
--- a/apps/frontend/src/domains/commerce/ui/bill-detail/BillLineCard.vue
+++ b/apps/frontend/src/domains/commerce/ui/bill-detail/BillLineCard.vue
@@ -22,7 +22,6 @@
           <PuCheckbox
             :model-value="selected"
             :disabled="!isSelectable"
-            size="sm"
             tabindex="-1"
             aria-label="选择账单行"
           />
diff --git a/apps/frontend/src/domains/commerce/ui/ordering/OrderingPageShell.vue b/apps/frontend/src/domains/commerce/ui/ordering/OrderingPageShell.vue
index eb8ce2ba5..95d5acbbb 100644
--- a/apps/frontend/src/domains/commerce/ui/ordering/OrderingPageShell.vue
+++ b/apps/frontend/src/domains/commerce/ui/ordering/OrderingPageShell.vue
@@ -1,22 +1,34 @@
 <template>
   <PuPageScaffold
     viewport="screen"
+    :padding="noPadding ? 'none' : undefined"
     class="ordering-page-shell"
-    :class="{ 'ordering-page-shell--no-padding': noPadding }"
     :data-testid="dataTestid"
   >
-    <template #header>
-      <PuPageHeader
+    <template #pageHeader>
+      <PuHeader
         :title="title"
         :subtitle="subtitle"
+        title-as="h1"
         size="sm"
-        show-back
-        @back="handleBack"
       >
+        <template #leading>
+          <PuButton
+            tone="neutral"
+            variant="ghost"
+            size="sm"
+            :aria-label="t('common.backToPrevious')"
+            @click="handleBack"
+          >
+            <template #leading>
+              <span class="i-mdi-arrow-left" aria-hidden="true"></span>
+            </template>
+          </PuButton>
+        </template>
         <template v-if="$slots.actions" #actions>
           <slot name="actions" />
         </template>
-      </PuPageHeader>
+      </PuHeader>
     </template>
 
     <main class="ordering-page-shell__body">
@@ -33,7 +45,8 @@
 </template>
 
 <script setup lang="ts">
-import { PuPageHeader, PuPageScaffold } from "@partner-up-dev/design-web";
+import { PuButton, PuHeader, PuPageScaffold } from "@partner-up-dev/design-web";
+import { useI18n } from "vue-i18n";
 import type { RouteLocationRaw } from "vue-router";
 import { useFallbackBack } from "@/shared/routing/useFallbackBack";
 
@@ -45,6 +58,7 @@ const props = defineProps<{
   noPadding?: boolean;
 }>();
 
+const { t } = useI18n();
 const { handleBack } = useFallbackBack(() => props.backFallbackTo);
 </script>
 
@@ -54,13 +68,7 @@ const { handleBack } = useFallbackBack(() => props.backFallbackTo);
   min-width: 0;
   --pu-page-max-width: 44rem;
   --pu-page-padding-bottom: 0;
-}
-
-.ordering-page-shell--no-padding {
-  --pu-page-padding-top: 0;
-  --pu-page-padding-right: 0;
-  --pu-page-padding-bottom: 0;
-  --pu-page-padding-left: 0;
+  --pu-page-scaffold-region-gap: 0;
 }
 
 .ordering-page-shell :deep(.pu-page-scaffold__footer) {
diff --git a/apps/frontend/src/domains/pr/ui/composites/PRHeroHeader.vue b/apps/frontend/src/domains/pr/ui/composites/PRHeroHeader.vue
deleted file mode 100644
index 3a13b2557..000000000
--- a/apps/frontend/src/domains/pr/ui/composites/PRHeroHeader.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-  <PuPageHeader
-    :title="title ?? t('prPage.metaFallbackTitle')"
-    show-back
-    :back-label="t('common.backToHome')"
-    @back="emit('back')"
-  >
-    <template #meta>
-      <div class="pr-hero-header__meta">
-        <PuTag
-          :text="statusTagText"
-          :tone="statusTagTone"
-          variant="soft"
-          shape="pill"
-          size="md"
-        />
-        <time class="created-at">{{ createdAtLabel }}</time>
-      </div>
-    </template>
-  </PuPageHeader>
-</template>
-
-<script setup lang="ts">
-import { computed } from "vue";
-import { useI18n } from "vue-i18n";
-import type { PRStatus } from "@partner-up-dev/backend";
-import { PuPageHeader, PuTag } from "@partner-up-dev/design-web";
-import {
-  resolvePRStatusTagText,
-  resolvePRStatusTagTone,
-} from "@/domains/pr/model/pr-status-tag";
-
-const props = defineProps<{
-  title?: string;
-  status: PRStatus;
-  createdAtLabel: string;
-}>();
-
-const emit = defineEmits<{
-  back: [];
-}>();
-
-const { t } = useI18n();
-const statusTagText = computed(() => resolvePRStatusTagText(props.status, t));
-const statusTagTone = computed(() => resolvePRStatusTagTone(props.status));
-</script>
-
-<style lang="scss" scoped>
-.pr-hero-header__meta {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--sys-spacing-small);
-  width: 100%;
-  min-width: 0;
-}
-
-.created-at {
-  @include mx.pu-font(control);
-  color: var(--sys-color-on-surface-variant);
-}
-</style>
diff --git a/apps/frontend/src/domains/pr/ui/sections/PRCreateHeader.vue b/apps/frontend/src/domains/pr/ui/sections/PRCreateHeader.vue
deleted file mode 100644
index ae648893d..000000000
--- a/apps/frontend/src/domains/pr/ui/sections/PRCreateHeader.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<template>
-  <header class="page-header">
-    <button
-      class="home-action"
-      @click="emit('back')"
-      :aria-label="t('common.backToHome')"
-    >
-      <div class="i-mdi-arrow-left font-title-large"></div>
-    </button>
-    <h1>{{ t("createPage.title") }}</h1>
-  </header>
-</template>
-
-<script setup lang="ts">
-import { useI18n } from "vue-i18n";
-
-const emit = defineEmits<{
-  back: [];
-}>();
-
-const { t } = useI18n();
-</script>
-
-<style lang="scss" scoped>
-.page-header {
-  display: flex;
-  align-items: center;
-  gap: var(--sys-spacing-small);
-  margin-bottom: var(--sys-spacing-medium);
-
-  h1 {
-    @include mx.pu-font(title);
-    color: var(--sys-color-on-surface);
-    margin: 0;
-  }
-}
-
-.home-action {
-  display: flex;
-  background: transparent;
-  border: none;
-  color: var(--sys-color-on-surface);
-  cursor: pointer;
-  min-width: calc(var(--sys-spacing-large) + var(--sys-spacing-small) + var(--sys-spacing-xsmall));
-  min-height: calc(var(--sys-spacing-large) + var(--sys-spacing-small) + var(--sys-spacing-xsmall));
-  border-radius: 999px;
-  align-items: center;
-  justify-content: center;
-
-  &:hover {
-    background: var(--sys-color-surface-container);
-  }
-}
-</style>
diff --git a/apps/frontend/src/pages/AboutPage.vue b/apps/frontend/src/pages/AboutPage.vue
index 85eaec037..326de344c 100644
--- a/apps/frontend/src/pages/AboutPage.vue
+++ b/apps/frontend/src/pages/AboutPage.vue
@@ -1,13 +1,25 @@
 <template>
   <PuPageScaffold content-placement="center" class="about-page">
-    <template #header>
-      <PuPageHeader
+    <template #pageHeader>
+      <PuHeader
         :title="t('aboutPage.title')"
         :subtitle="t('aboutPage.description')"
-        show-back
-        :back-label="t('common.backToHome')"
-        @back="handleBack"
-      />
+        title-as="h1"
+      >
+        <template #leading>
+          <PuButton
+            tone="neutral"
+            variant="ghost"
+            size="sm"
+            :aria-label="t('common.backToHome')"
+            @click="handleBack"
+          >
+            <template #leading>
+              <span class="i-mdi-arrow-left" aria-hidden="true"></span>
+            </template>
+          </PuButton>
+        </template>
+      </PuHeader>
     </template>
 
     <section class="about-body" :aria-label="t('aboutPage.sectionTitle')">
@@ -148,8 +160,8 @@ import { useFallbackBack } from "@/shared/routing/useFallbackBack";
 import OfficialAccountQrModal from "@/shared/wechat/OfficialAccountQrModal.vue";
 import {
   PuButton,
+  PuHeader,
   PuModal,
-  PuPageHeader,
   PuPageScaffold,
 } from "@partner-up-dev/design-web";
 
diff --git a/apps/frontend/src/pages/AnchorEventLandingPage.vue b/apps/frontend/src/pages/AnchorEventLandingPage.vue
index 7d2d14e43..786b9af3a 100644
--- a/apps/frontend/src/pages/AnchorEventLandingPage.vue
+++ b/apps/frontend/src/pages/AnchorEventLandingPage.vue
@@ -9,16 +9,27 @@
     data-testid="anchor-event-landing.page"
     :content-placement="pageStatePlacement"
   >
-    <template #header>
-      <PuPageHeader
+    <template #pageHeader>
+      <PuHeader
         v-if="detail"
         class="anchor-event-landing-page__header"
         :title="detail.title"
         :subtitle="detail.description ?? undefined"
-        show-back
-        :back-label="t('common.backToHome')"
-        @back="handleLandingBack"
+        title-as="h1"
       >
+        <template #leading>
+          <PuButton
+            tone="neutral"
+            variant="ghost"
+            size="sm"
+            :aria-label="t('common.backToHome')"
+            @click="handleLandingBack"
+          >
+            <template #leading>
+              <span class="i-mdi-arrow-left" aria-hidden="true"></span>
+            </template>
+          </PuButton>
+        </template>
         <template #actions>
           <PuButton
             shape="pill"
@@ -31,7 +42,7 @@
             {{ t("anchorEvent.otherEvents.action") }}
           </PuButton>
         </template>
-      </PuPageHeader>
+      </PuHeader>
     </template>
 
     <div v-if="isLoading" class="loading-state">
@@ -208,8 +219,8 @@ import { resolveTelemetryFailurePayload } from "@/shared/telemetry/result";
 import {
   PuButton,
   PuDrawer,
+  PuHeader,
   PuLoadingState,
-  PuPageHeader,
   PuPageScaffold,
   PuSegmented,
   PuSegmentedItem,
diff --git a/apps/frontend/src/pages/CommerceBillDetailPage.vue b/apps/frontend/src/pages/CommerceBillDetailPage.vue
index bea41c6f4..24d48fb93 100644
--- a/apps/frontend/src/pages/CommerceBillDetailPage.vue
+++ b/apps/frontend/src/pages/CommerceBillDetailPage.vue
@@ -4,12 +4,24 @@
     class="bill-detail-page"
     data-testid="bill-detail.page"
   >
-    <template #header>
-      <PuPageHeader
+    <template #pageHeader>
+      <PuHeader
         title="账单详情"
-        show-back
-        @back="handleBack"
+        title-as="h1"
       >
+        <template #leading>
+          <PuButton
+            tone="neutral"
+            variant="ghost"
+            size="sm"
+            aria-label="返回上一页"
+            @click="handleBack"
+          >
+            <template #leading>
+              <span class="i-mdi-arrow-left" aria-hidden="true"></span>
+            </template>
+          </PuButton>
+        </template>
         <template v-if="detail" #actions>
           <PuButton
             :action="{ to: { path: `/orders/${detail.order.id}` } }"
@@ -41,7 +53,7 @@
             </span>
           </div>
         </template>
-      </PuPageHeader>
+      </PuHeader>
     </template>
 
     <div class="bill-detail-page__body">
@@ -98,8 +110,8 @@
 <script setup lang="ts">
 import {
   PuButton,
+  PuHeader,
   PuInlineNotice,
-  PuPageHeader,
   PuPageScaffold,
   PuTag,
   usePuSelect,
@@ -193,7 +205,6 @@ const selectedPayableLineAmountLabel = computed(() =>
 .bill-detail-page {
   min-width: 0;
   --pu-page-max-width: 44rem;
-  --pu-page-padding-bottom: 0;
 }
 
 .bill-detail-page__body {
diff --git a/apps/frontend/src/pages/CommerceOrderDetailPage.vue b/apps/frontend/src/pages/CommerceOrderDetailPage.vue
index 05f7c0ee7..793a8cf48 100644
--- a/apps/frontend/src/pages/CommerceOrderDetailPage.vue
+++ b/apps/frontend/src/pages/CommerceOrderDetailPage.vue
@@ -6,13 +6,25 @@
     class="order-detail-page"
     data-testid="order-detail.page"
   >
-    <template #header>
-      <PuPageHeader
+    <template #pageHeader>
+      <PuHeader
         title="订单详情"
         subtitle="查看支付、账单和预约进度"
-        show-back
-        @back="handleBack"
+        title-as="h1"
       >
+        <template #leading>
+          <PuButton
+            tone="neutral"
+            variant="ghost"
+            size="sm"
+            aria-label="返回上一页"
+            @click="handleBack"
+          >
+            <template #leading>
+              <span class="i-mdi-arrow-left" aria-hidden="true"></span>
+            </template>
+          </PuButton>
+        </template>
         <template #actions>
           <PuButton
             :action="{ to: { name: 'contact-support' } }"
@@ -25,7 +37,7 @@
             客服
           </PuButton>
         </template>
-      </PuPageHeader>
+      </PuHeader>
     </template>
 
     <div
@@ -214,8 +226,8 @@
 import {
   PuButton,
   PuCard,
+  PuHeader,
   PuInlineNotice,
-  PuPageHeader,
   PuPageScaffold,
 } from "@partner-up-dev/design-web";
 import { storeToRefs } from "pinia";
diff --git a/apps/frontend/src/pages/ContactAuthorPage.vue b/apps/frontend/src/pages/ContactAuthorPage.vue
index 71b30388b..fdd9b2aa3 100644
--- a/apps/frontend/src/pages/ContactAuthorPage.vue
+++ b/apps/frontend/src/pages/ContactAuthorPage.vue
@@ -1,12 +1,24 @@
 <template>
   <PuPageScaffold content-placement="center" class="contact-author-page">
-    <template #header>
-      <PuPageHeader
+    <template #pageHeader>
+      <PuHeader
         :title="t('contactAuthorPage.title')"
-        show-back
-        :back-label="t('common.backToHome')"
-        @back="handleBack"
-      />
+        title-as="h1"
+      >
+        <template #leading>
+          <PuButton
+            tone="neutral"
+            variant="ghost"
+            size="sm"
+            :aria-label="t('common.backToHome')"
+            @click="handleBack"
+          >
+            <template #leading>
+              <span class="i-mdi-arrow-left" aria-hidden="true"></span>
+            </template>
+          </PuButton>
+        </template>
+      </PuHeader>
     </template>
 
     <PuLoadingState
@@ -48,7 +60,7 @@ import {
   usePublicConfig,
 } from "@/shared/config/queries/usePublicConfig";
 import { useFallbackBack } from "@/shared/routing/useFallbackBack";
-import { PuInlineNotice, PuLoadingState, PuPageHeader, PuPageScaffold } from "@partner-up-dev/design-web";
+import { PuButton, PuHeader, PuInlineNotice, PuLoadingState, PuPageScaffold } from "@partner-up-dev/design-web";
 
 const DEFAULT_AUTHOR_QR_CODE_URL =
   "https://oss-app.partner-up.cn/5264495b163398842ad04ee5ee42a3df.jpg";
diff --git a/apps/frontend/src/pages/ContactSupportPage.vue b/apps/frontend/src/pages/ContactSupportPage.vue
index 559a4a8f8..361ab6c62 100644
--- a/apps/frontend/src/pages/ContactSupportPage.vue
+++ b/apps/frontend/src/pages/ContactSupportPage.vue
@@ -1,12 +1,24 @@
 <template>
   <PuPageScaffold content-placement="center" class="contact-support-page">
-    <template #header>
-      <PuPageHeader
+    <template #pageHeader>
+      <PuHeader
         :title="t('contactSupportPage.title')"
-        show-back
-        :back-label="t('common.backToHome')"
-        @back="handleBack"
-      />
+        title-as="h1"
+      >
+        <template #leading>
+          <PuButton
+            tone="neutral"
+            variant="ghost"
+            size="sm"
+            :aria-label="t('common.backToHome')"
+            @click="handleBack"
+          >
+            <template #leading>
+              <span class="i-mdi-arrow-left" aria-hidden="true"></span>
+            </template>
+          </PuButton>
+        </template>
+      </PuHeader>
     </template>
 
     <section
@@ -94,7 +106,7 @@ import { useFallbackBack } from "@/shared/routing/useFallbackBack";
 import {
   PuButton,
   PuChip,
-  PuPageHeader,
+  PuHeader,
   PuPageScaffold,
 } from "@partner-up-dev/design-web";
 
diff --git a/apps/frontend/src/pages/EventPRSearchPage.vue b/apps/frontend/src/pages/EventPRSearchPage.vue
index b3811aa3f..a6f732ea3 100644
--- a/apps/frontend/src/pages/EventPRSearchPage.vue
+++ b/apps/frontend/src/pages/EventPRSearchPage.vue
@@ -1,23 +1,37 @@
 <template>
   <PuPageScaffold class="event-pr-search-page" data-page="event-pr-search">
-    <PuPageHeader
-      :title="pageTitle"
-      :subtitle="pageSubtitle"
-      show-back
-      :back-label="t('common.backToHome')"
-      @back="handleBack"
-    >
-      <template #actions>
-        <PuButton
-          v-if="isResultMode"
-          tone="neutral" variant="ghost"
-          size="sm"
-          @click="showCriteriaDrawer = true"
-        >
-          {{ t("eventPRSearch.actions.modifyCriteria") }}
-        </PuButton>
-      </template>
-    </PuPageHeader>
+    <template #pageHeader>
+      <PuHeader
+        :title="pageTitle"
+        :subtitle="pageSubtitle"
+        title-as="h1"
+      >
+        <template #leading>
+          <PuButton
+            tone="neutral"
+            variant="ghost"
+            size="sm"
+            :aria-label="t('common.backToHome')"
+            @click="handleBack"
+          >
+            <template #leading>
+              <span class="i-mdi-arrow-left" aria-hidden="true"></span>
+            </template>
+          </PuButton>
+        </template>
+
+        <template #actions>
+          <PuButton
+            v-if="isResultMode"
+            tone="neutral" variant="ghost"
+            size="sm"
+            @click="showCriteriaDrawer = true"
+          >
+            {{ t("eventPRSearch.actions.modifyCriteria") }}
+          </PuButton>
+        </template>
+      </PuHeader>
+    </template>
 
     <div v-if="eventsQuery.isLoading.value" class="event-pr-search-page__state">
       {{ t("common.loading") }}
@@ -168,7 +182,7 @@ import {
   PuButton,
   PuDrawer,
   PuEmptyState,
-  PuPageHeader,
+  PuHeader,
   PuPageScaffold,
 } from "@partner-up-dev/design-web";
 import { useAnchorEvents } from "@/domains/event/queries/useAnchorEvents";
diff --git a/apps/frontend/src/pages/EventPlazaPage.vue b/apps/frontend/src/pages/EventPlazaPage.vue
index 5e4242c21..a4c098a12 100644
--- a/apps/frontend/src/pages/EventPlazaPage.vue
+++ b/apps/frontend/src/pages/EventPlazaPage.vue
@@ -1,25 +1,39 @@
 <template>
   <PuPageScaffold class="event-plaza-page">
-    <PuPageHeader
-      :title="t('eventPlaza.title')"
-      :subtitle="t('eventPlaza.subtitle')"
-      show-back
-      :back-label="t('common.backToHome')"
-      @back="handleBack"
-    >
-      <template #actions>
-        <PuButton
-          :action="{ to: { name: 'event-pr-search' } }"
-          class="event-plaza-page__search-link"
-          shape="pill"
-          tone="primary"
-          variant="outline"
-          size="sm"
-        >
-          {{ t("eventPlaza.searchAction") }}
-        </PuButton>
-      </template>
-    </PuPageHeader>
+    <template #pageHeader>
+      <PuHeader
+        :title="t('eventPlaza.title')"
+        :subtitle="t('eventPlaza.subtitle')"
+        title-as="h1"
+      >
+        <template #leading>
+          <PuButton
+            tone="neutral"
+            variant="ghost"
+            size="sm"
+            :aria-label="t('common.backToHome')"
+            @click="handleBack"
+          >
+            <template #leading>
+              <span class="i-mdi-arrow-left" aria-hidden="true"></span>
+            </template>
+          </PuButton>
+        </template>
+
+        <template #actions>
+          <PuButton
+            :action="{ to: { name: 'event-pr-search' } }"
+            class="event-plaza-page__search-link"
+            shape="pill"
+            tone="primary"
+            variant="outline"
+            size="sm"
+          >
+            {{ t("eventPlaza.searchAction") }}
+          </PuButton>
+        </template>
+      </PuHeader>
+    </template>
 
     <div v-if="isLoading" class="loading-state">
       {{ t("common.loading") }}
@@ -52,7 +66,7 @@ import type { AnchorEventListResponse } from "@/domains/event/model/types";
 import { useFallbackBack } from "@/shared/routing/useFallbackBack";
 import {
   PuButton,
-  PuPageHeader,
+  PuHeader,
   PuPageScaffold,
 } from "@partner-up-dev/design-web";
 
diff --git a/apps/frontend/src/pages/LocationApplicationPage.vue b/apps/frontend/src/pages/LocationApplicationPage.vue
index 802b02410..982ce75c1 100644
--- a/apps/frontend/src/pages/LocationApplicationPage.vue
+++ b/apps/frontend/src/pages/LocationApplicationPage.vue
@@ -1,13 +1,25 @@
 <template>
   <PuPageScaffold class="location-application-page">
-    <template #header>
-      <PuPageHeader
+    <template #pageHeader>
+      <PuHeader
         :title="t('locationApplicationPage.title')"
         :subtitle="t('locationApplicationPage.subtitle')"
-        show-back
-        :back-label="t('common.backToHome')"
-        @back="handleBack"
-      />
+        title-as="h1"
+      >
+        <template #leading>
+          <PuButton
+            tone="neutral"
+            variant="ghost"
+            size="sm"
+            :aria-label="t('common.backToHome')"
+            @click="handleBack"
+          >
+            <template #leading>
+              <span class="i-mdi-arrow-left" aria-hidden="true"></span>
+            </template>
+          </PuButton>
+        </template>
+      </PuHeader>
     </template>
 
     <div class="location-application-page__body">
@@ -137,9 +149,9 @@ import {
   PuCard,
   PuFileUpload,
   PuFormItem,
+  PuHeader,
   PuInlineNotice,
   PuLoadingState,
-  PuPageHeader,
   PuPageScaffold,
   PuTag,
 } from "@partner-up-dev/design-web";
diff --git a/apps/frontend/src/pages/LocationPickerPage.vue b/apps/frontend/src/pages/LocationPickerPage.vue
index c9658d2c8..0feb58d45 100644
--- a/apps/frontend/src/pages/LocationPickerPage.vue
+++ b/apps/frontend/src/pages/LocationPickerPage.vue
@@ -1,21 +1,22 @@
 <template>
   <PuPageScaffold viewport="screen" class="location-picker-page">
-    <template #header>
-      <div class="location-picker-page__header">
-        <PuButton
-
-          tone="neutral" variant="ghost"
-          size="sm"
-          data-testid="location-picker-page.back"
-          @click="goBack"
-        >
-          <template #leading>
-            <span class="i-mdi-arrow-left" aria-hidden="true"></span>
-          </template>
-          {{ t("common.backToPrevious") }}
-        </PuButton>
-        <h1>{{ t("locationPicker.title") }}</h1>
-      </div>
+    <template #pageHeader>
+      <PuHeader :title="t('locationPicker.title')" title-as="h1">
+        <template #leading>
+          <PuButton
+            tone="neutral"
+            variant="ghost"
+            size="sm"
+            data-testid="location-picker-page.back"
+            @click="goBack"
+          >
+            <template #leading>
+              <span class="i-mdi-arrow-left" aria-hidden="true"></span>
+            </template>
+            {{ t("common.backToPrevious") }}
+          </PuButton>
+        </template>
+      </PuHeader>
     </template>
 
     <LocationPickerPanel
@@ -33,7 +34,7 @@ import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
 import LocationPickerPanel from "@/domains/location/ui/LocationPickerPanel.vue";
 import type { PickedLocation } from "@/domains/location/model/location-picker";
-import { PuButton, PuPageScaffold } from "@partner-up-dev/design-web";
+import { PuButton, PuHeader, PuPageScaffold } from "@partner-up-dev/design-web";
 import {
   readLastPickedLocation,
   saveLastPickedLocation,
@@ -54,20 +55,6 @@ const handlePick = (location: PickedLocation) => {
 </script>
 
 <style scoped lang="scss">
-.location-picker-page__header {
-  display: flex;
-  align-items: center;
-  gap: var(--sys-spacing-small);
-  padding: var(--sys-spacing-small) 0;
-}
-
-.location-picker-page__header h1 {
-  @include mx.pu-font(title);
-  min-width: 0;
-  margin: 0;
-  color: var(--sys-color-on-surface);
-}
-
 .location-picker-page__panel {
   flex: 1 1 auto;
   min-height: 0;
diff --git a/apps/frontend/src/pages/MePage.vue b/apps/frontend/src/pages/MePage.vue
index e889bcbaf..6cc081f0f 100644
--- a/apps/frontend/src/pages/MePage.vue
+++ b/apps/frontend/src/pages/MePage.vue
@@ -1,13 +1,25 @@
 <template>
   <PuPageScaffold class="me-page">
-    <template #header>
-      <PuPageHeader
+    <template #pageHeader>
+      <PuHeader
         :title="t('mePage.title')"
         :subtitle="t('mePage.description')"
-        show-back
-        :back-label="t('common.backToHome')"
-        @back="handleBack"
-      />
+        title-as="h1"
+      >
+        <template #leading>
+          <PuButton
+            tone="neutral"
+            variant="ghost"
+            size="sm"
+            :aria-label="t('common.backToHome')"
+            @click="handleBack"
+          >
+            <template #leading>
+              <span class="i-mdi-arrow-left" aria-hidden="true"></span>
+            </template>
+          </PuButton>
+        </template>
+      </PuHeader>
     </template>
 
     <div class="me-page__body">
@@ -275,10 +287,10 @@ import {
   PuCard,
   PuFileUpload,
   PuFormItem,
+  PuHeader,
   PuImg,
   PuInlineNotice,
   PuLoadingState,
-  PuPageHeader,
   PuPageScaffold,
   PuTag,
   type PuFileUploadItem,
diff --git a/apps/frontend/src/pages/MyPRsPage.vue b/apps/frontend/src/pages/MyPRsPage.vue
index b5f8fe88a..d748f512e 100644
--- a/apps/frontend/src/pages/MyPRsPage.vue
+++ b/apps/frontend/src/pages/MyPRsPage.vue
@@ -1,13 +1,25 @@
 <template>
   <PuPageScaffold class="my-prs-page">
-    <template #header>
-      <PuPageHeader
+    <template #pageHeader>
+      <PuHeader
         :title="t('myPrsPage.title')"
         :subtitle="t('myPrsPage.description')"
-        show-back
-        :back-label="t('common.backToHome')"
-        @back="handleBack"
-      />
+        title-as="h1"
+      >
+        <template #leading>
+          <PuButton
+            tone="neutral"
+            variant="ghost"
+            size="sm"
+            :aria-label="t('common.backToHome')"
+            @click="handleBack"
+          >
+            <template #leading>
+              <span class="i-mdi-arrow-left" aria-hidden="true"></span>
+            </template>
+          </PuButton>
+        </template>
+      </PuHeader>
     </template>
 
     <div class="my-prs-page__body">
@@ -83,7 +95,7 @@ import { useMyCreatedPRs } from "@/domains/pr/queries/useMyCreatedPRs";
 import { useMyJoinedPRs } from "@/domains/pr/queries/useMyJoinedPRs";
 import { useUserSessionStore } from "@/shared/auth/useUserSessionStore";
 import { useFallbackBack } from "@/shared/routing/useFallbackBack";
-import { PuLoadingState, PuPageHeader, PuPageScaffold } from "@partner-up-dev/design-web";
+import { PuButton, PuHeader, PuLoadingState, PuPageScaffold } from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const { handleBack } = useFallbackBack();
diff --git a/apps/frontend/src/pages/PRCreatePage.vue b/apps/frontend/src/pages/PRCreatePage.vue
index ed6d3bd45..cb4bfeb1c 100644
--- a/apps/frontend/src/pages/PRCreatePage.vue
+++ b/apps/frontend/src/pages/PRCreatePage.vue
@@ -1,7 +1,21 @@
 <template>
   <PuPageScaffold class="pr-create-page" data-page="pr-create">
-    <template #header>
-      <PRCreateHeader @back="goHome" />
+    <template #pageHeader>
+      <PuHeader :title="t('createPage.title')" title-as="h1">
+        <template #leading>
+          <PuButton
+            tone="neutral"
+            variant="ghost"
+            size="sm"
+            :aria-label="t('common.backToHome')"
+            @click="goHome"
+          >
+            <template #leading>
+              <span class="i-mdi-arrow-left" aria-hidden="true"></span>
+            </template>
+          </PuButton>
+        </template>
+      </PuHeader>
     </template>
 
     <div class="pr-create-page__body">
@@ -67,10 +81,9 @@ import { useRoute, useRouter } from "vue-router";
 import PREditor from "@/domains/pr/ui/forms/PREditor.vue";
 import NLPRForm from "@/domains/pr/ui/forms/NLPRForm.vue";
 import PageFooter from "@/shared/ui/sections/PageFooter.vue";
-import PRCreateHeader from "@/domains/pr/ui/sections/PRCreateHeader.vue";
 import PRCreateFooterActions from "@/domains/pr/ui/sections/PRCreateFooterActions.vue";
 import type { CreateSubmissionMode } from "@/domains/pr/model/pr-editor";
-import { PuPageScaffold, PuTabs } from "@partner-up-dev/design-web";
+import { PuButton, PuHeader, PuPageScaffold, PuTabs } from "@partner-up-dev/design-web";
 
 const resolveQueryMode = (value: unknown): "nl" | "form" | null => {
   if (value === "nl" || value === "form") return value;
diff --git a/apps/frontend/src/pages/PRMessagesPage.vue b/apps/frontend/src/pages/PRMessagesPage.vue
index 1a455eb1f..f0591dc47 100644
--- a/apps/frontend/src/pages/PRMessagesPage.vue
+++ b/apps/frontend/src/pages/PRMessagesPage.vue
@@ -3,13 +3,25 @@
     class="pr-messages-page"
     data-page="pr-messages"
   >
-    <template #header>
-      <PuPageHeader
+    <template #pageHeader>
+      <PuHeader
         :title="t('prPage.messagePage.title')"
-        :back-label="t('prPage.messagePage.backToDetail')"
-        show-back
-        @back="handleBack"
-      />
+        title-as="h1"
+      >
+        <template #leading>
+          <PuButton
+            tone="neutral"
+            variant="ghost"
+            size="sm"
+            :aria-label="t('prPage.messagePage.backToDetail')"
+            @click="handleBack"
+          >
+            <template #leading>
+              <span class="i-mdi-arrow-left" aria-hidden="true"></span>
+            </template>
+          </PuButton>
+        </template>
+      </PuHeader>
     </template>
 
     <PuInlineNotice tone="error"
@@ -38,7 +50,7 @@ import PageFooter from "@/shared/ui/sections/PageFooter.vue";
 import { prDetailPath } from "@/domains/pr/routing/routes";
 import { usePRRouteId } from "@/domains/pr/routing/usePRRouteId";
 import { useFallbackBack } from "@/shared/routing/useFallbackBack";
-import { PuInlineNotice, PuPageHeader, PuPageScaffold } from "@partner-up-dev/design-web";
+import { PuButton, PuHeader, PuInlineNotice, PuPageScaffold } from "@partner-up-dev/design-web";
 
 const { t } = useI18n();
 const id = usePRRouteId();
diff --git a/apps/frontend/src/pages/PRPage.vue b/apps/frontend/src/pages/PRPage.vue
index 2728581e2..a6e2ec63d 100644
--- a/apps/frontend/src/pages/PRPage.vue
+++ b/apps/frontend/src/pages/PRPage.vue
@@ -1,16 +1,26 @@
 <template>
   <PuPageScaffold class="pr-page" data-page="pr-detail">
-    <PuLoadingState v-if="isLoading" :message="t('common.loading')" />
-    <PuInlineNotice tone="error" v-else-if="error" :message="error.message" />
-
-    <template v-else-if="prDetail">
-      <PuPageHeader
+    <template #pageHeader>
+      <PuHeader
+        v-if="prDetail"
         :title="prDisplayTitle"
         data-region="summary"
-        show-back
-        :back-label="t('common.backToHome')"
-        @back="handleBack"
+        title-as="h1"
       >
+        <template #leading>
+          <PuButton
+            tone="neutral"
+            variant="ghost"
+            size="sm"
+            :aria-label="t('common.backToHome')"
+            @click="handleBack"
+          >
+            <template #leading>
+              <span class="i-mdi-arrow-left" aria-hidden="true"></span>
+            </template>
+          </PuButton>
+        </template>
+
         <template #actions>
           <div v-if="showHeaderQuickActions" class="header-quick-actions">
             <PuButton
@@ -54,8 +64,13 @@
             />
           </div>
         </template>
-      </PuPageHeader>
+      </PuHeader>
+    </template>
 
+    <PuLoadingState v-if="isLoading" :message="t('common.loading')" />
+    <PuInlineNotice tone="error" v-else-if="error" :message="error.message" />
+
+    <template v-else-if="prDetail">
       <PuModal
         v-if="showEditContentModal && id !== null"
         :open="showEditContentModal"
@@ -192,10 +207,10 @@
 import type { PRStatusManual } from "@partner-up-dev/backend";
 import {
   PuButton,
+  PuHeader,
   PuInlineNotice,
   PuLoadingState,
   PuModal,
-  PuPageHeader,
   PuPageScaffold,
   PuTag,
 } from "@partner-up-dev/design-web";
diff --git a/apps/frontend/src/pages/PaymentCheckoutPage.vue b/apps/frontend/src/pages/PaymentCheckoutPage.vue
index 5e6ef95f7..d15fa587a 100644
--- a/apps/frontend/src/pages/PaymentCheckoutPage.vue
+++ b/apps/frontend/src/pages/PaymentCheckoutPage.vue
@@ -4,13 +4,26 @@
     class="payment-checkout-page"
     data-testid="payment-checkout.page"
   >
-    <template #header>
-      <PuPageHeader
+    <template #pageHeader>
+      <PuHeader
         title="支付"
         subtitle="本页只支付当前这一条账单行"
-        show-back
-        @back="handleBack"
-      />
+        title-as="h1"
+      >
+        <template #leading>
+          <PuButton
+            tone="neutral"
+            variant="ghost"
+            size="sm"
+            aria-label="返回上一页"
+            @click="handleBack"
+          >
+            <template #leading>
+              <span class="i-mdi-arrow-left" aria-hidden="true"></span>
+            </template>
+          </PuButton>
+        </template>
+      </PuHeader>
     </template>
 
     <div class="payment-checkout-page__body">
@@ -162,8 +175,8 @@
 import {
   PuButton,
   PuCard,
+  PuHeader,
   PuInlineNotice,
-  PuPageHeader,
   PuPageScaffold,
 } from "@partner-up-dev/design-web";
 import { computed, ref } from "vue";
diff --git a/apps/frontend/src/pages/RouteApplicationPage.vue b/apps/frontend/src/pages/RouteApplicationPage.vue
index a87540e19..2087a71c1 100644
--- a/apps/frontend/src/pages/RouteApplicationPage.vue
+++ b/apps/frontend/src/pages/RouteApplicationPage.vue
@@ -1,13 +1,25 @@
 <template>
   <PuPageScaffold class="route-application-page">
-    <template #header>
-      <PuPageHeader
+    <template #pageHeader>
+      <PuHeader
         :title="t('routeApplicationPage.title')"
         :subtitle="t('routeApplicationPage.subtitle')"
-        show-back
-        :back-label="t('common.backToHome')"
-        @back="handleBack"
-      />
+        title-as="h1"
+      >
+        <template #leading>
+          <PuButton
+            tone="neutral"
+            variant="ghost"
+            size="sm"
+            :aria-label="t('common.backToHome')"
+            @click="handleBack"
+          >
+            <template #leading>
+              <span class="i-mdi-arrow-left" aria-hidden="true"></span>
+            </template>
+          </PuButton>
+        </template>
+      </PuHeader>
     </template>
 
     <div class="route-application-page__body">
@@ -108,9 +120,9 @@ import {
   PuButton,
   PuCard,
   PuFormItem,
+  PuHeader,
   PuInlineNotice,
   PuLoadingState,
-  PuPageHeader,
   PuPageScaffold,
   PuTag,
 } from "@partner-up-dev/design-web";
diff --git a/apps/frontend/src/pages/UserProfilePage.vue b/apps/frontend/src/pages/UserProfilePage.vue
index 9ca839f9a..6913f5807 100644
--- a/apps/frontend/src/pages/UserProfilePage.vue
+++ b/apps/frontend/src/pages/UserProfilePage.vue
@@ -1,13 +1,25 @@
 <template>
   <PuPageScaffold class="user-profile-page">
-    <template #header>
-      <PuPageHeader
+    <template #pageHeader>
+      <PuHeader
         :title="t('userProfilePage.title')"
         :subtitle="subtitle"
-        show-back
-        :back-label="t('common.backToHome')"
-        @back="handleBack"
-      />
+        title-as="h1"
+      >
+        <template #leading>
+          <PuButton
+            tone="neutral"
+            variant="ghost"
+            size="sm"
+            :aria-label="t('common.backToHome')"
+            @click="handleBack"
+          >
+            <template #leading>
+              <span class="i-mdi-arrow-left" aria-hidden="true"></span>
+            </template>
+          </PuButton>
+        </template>
+      </PuHeader>
     </template>
 
     <PuLoadingState
@@ -69,12 +81,13 @@ import { RouterLink, useRoute } from "vue-router";
 import { useI18n } from "vue-i18n";
 import type { PRId } from "@partner-up-dev/backend";
 import {
+  PuButton,
   PuCard,
   PuEmptyState,
+  PuHeader,
   PuImg,
   PuInlineNotice,
   PuLoadingState,
-  PuPageHeader,
   PuPageScaffold,
 } from "@partner-up-dev/design-web";
 import PageFooter from "@/shared/ui/sections/PageFooter.vue";
diff --git a/apps/frontend/src/shared/ui/AGENTS.md b/apps/frontend/src/shared/ui/AGENTS.md
index 30509e9f2..04f4dc39d 100644
--- a/apps/frontend/src/shared/ui/AGENTS.md
+++ b/apps/frontend/src/shared/ui/AGENTS.md
@@ -20,6 +20,7 @@ Containers and layout:
 - `PuCard` from `@partner-up-dev/design-web`: standard card shell for reusable grouped content, outline surfaces, and collapsible sections. Use `variant` for treatment and `keep-content-mounted` only when collapsed content owns local state that must survive collapse.
 - `PuCard` from `@partner-up-dev/design-web`: use `selectable` for button-like choices and `action` for route or href card targets instead of adding a local choice-card wrapper.
 - `PuPageScaffold` from `@partner-up-dev/design-web`: page scaffold for route pages, centered flows, full-screen flows, desktop aside pages, and reveal-footer layouts. Prefer direct package usage instead of recreating safe-area page chrome locally.
+- `PuHeader` from `@partner-up-dev/design-web`: standard page, panel, and surface header. For route pages inside `PuPageScaffold`, use the scaffold `pageHeader` slot so the scaffold keeps owning standard inset and spacing; reserve raw `header` for custom header structures with consumer-owned spacing.
 - `sections/PageFooter.vue`: product page footer chrome with `variant="minimal"` for compact support/navigation footers and `variant="brand"` for landing-style brand/legal footers. Prefer extending this variant API over creating another page footer component.
 
 Forms and controls:
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9efe11848..e039049cf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -134,8 +134,8 @@ importers:
   apps/frontend:
     dependencies:
       '@partner-up-dev/design-web':
-        specifier: 0.4.6
-        version: 0.4.6(sass@1.97.3)(unocss@66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0)))(vue@3.5.35(typescript@6.0.3))
+        specifier: 0.4.7
+        version: 0.4.7(sass@1.97.3)(unocss@66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0)))(vue@3.5.35(typescript@6.0.3))
       '@tanstack/vue-query':
         specifier: ^5.60.0
         version: 5.92.9(vue@3.5.35(typescript@6.0.3))
@@ -1522,15 +1522,12 @@ packages:
     resolution: {integrity: sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==}
     engines: {node: '>= 10.0.0'}
 
-  '@partner-up-dev/design-web@0.4.6':
-    resolution: {integrity: sha512-kPt0gK/WTr9lowK90SRYqgmKL7nGc0rNSy/9AQi1W/VnONFFVR/jp8rRGj8PDc4gT4wKhiwoTg5mfIsjPrp2pQ==, tarball: https://npm.pkg.github.com/download/@partner-up-dev/design-web/0.4.6/0081f4d6cc8f88554775455fc510bd64e689881a}
+  '@partner-up-dev/design-web@0.4.7':
+    resolution: {integrity: sha512-iPLd59RFvig5gaqRI8pMsuvnyEWOqFBtnoLZw95EeIB9e6P4iRGHxbTwme3MXQPno2K8wzoSO1Sc/AY9BG5UpA==, tarball: https://npm.pkg.github.com/download/@partner-up-dev/design-web/0.4.7/30685523b16375b285398da17773e1aee44d5f7c}
     peerDependencies:
       sass: ^1.94.2
       unocss: ^66.6.8
       vue: ^3.5.34
-    peerDependenciesMeta:
-      unocss:
-        optional: true
 
   '@polka/url@1.0.0-next.29':
     resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
@@ -3963,12 +3960,11 @@ snapshots:
       '@parcel/watcher-win32-x64': 2.5.6
     optional: true
 
-  '@partner-up-dev/design-web@0.4.6(sass@1.97.3)(unocss@66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0)))(vue@3.5.35(typescript@6.0.3))':
+  '@partner-up-dev/design-web@0.4.7(sass@1.97.3)(unocss@66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0)))(vue@3.5.35(typescript@6.0.3))':
     dependencies:
       sass: 1.97.3
-      vue: 3.5.35(typescript@6.0.3)
-    optionalDependencies:
       unocss: 66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0))
+      vue: 3.5.35(typescript@6.0.3)
 
   '@polka/url@1.0.0-next.29': {}
 
diff --git a/tasks/design-web-0.4.7-update/README.md b/tasks/design-web-0.4.7-update/README.md
new file mode 100644
index 000000000..088ac2931
--- /dev/null
+++ b/tasks/design-web-0.4.7-update/README.md
@@ -0,0 +1,143 @@
+# design-web 0.4.7 Update
+
+## Objective & Hypothesis
+
+Upgrade the frontend `@partner-up-dev/design-web` dependency from `0.4.6` to
+`0.4.7`, validate the package-shipped `skills/design-web` agent skill, and
+apply any required consumer migrations inside `apps/frontend`.
+
+Hypothesis: this is a `Constraint` change. Product behavior should remain the
+same, while the package public API and package-shipped skill may require
+consumer-side adjustments.
+
+## Guardrails Touched
+
+- Constraint route: dependency and package boundary change without intended PRD
+  changes.
+- Frontend durable owner: `apps/frontend` package boundary and consumer code.
+- Deployment / skill guidance: package dependency update is the skill update
+  mechanism; do not hand-edit local skill copies.
+
+## Current Understanding
+
+- Frontend dependency is now `@partner-up-dev/design-web@0.4.7`.
+- Registry verification:
+  - `dist-tags.latest` resolves to `0.4.7`.
+  - publish time for `0.4.7` is `2026-06-25T07:25:19Z`.
+- A previous `pnpm view ... versions` call returned stale data without
+  `0.4.7`, so migration evidence should be taken from the downloaded package
+  tarball rather than that initial listing.
+- Source-of-truth release evidence from
+  `https://raw.githubusercontent.com/partner-up-dev/design/main/packages/web/`:
+  - `package.json` version is `0.4.7`
+  - `CHANGELOG.md` documents `PuHeader` introduction and `PuPageHeader`
+    removal
+  - `MIGRATION.md` requires consumer migration for `PuPageHeader` removal and
+    the prior `PuCheckbox` reset
+- Consumer scan in `apps/frontend/src` found:
+  - `PuPageHeader` usage in 18 files
+  - `PuPageScaffold` `#header` slot usage in 18 files
+  - `PuCheckbox` usage in 2 files
+- Applied migration outcome:
+  - all `PuPageHeader` consumers in `apps/frontend/src` were removed
+  - standard page headers now use `PuPageScaffold` `pageHeader` + `PuHeader`
+  - custom raw headers remain only on pages that still need non-standard
+    layout structure such as `AdminLoginPage.vue` and
+    `WeChatOAuthCallbackPage.vue`
+  - adjacent page-header consumers were also normalized:
+    `LocationPickerPage.vue`
+  - follow-up runtime repair:
+    - `PRPage.vue` originally used `v-if` directly on the `#pageHeader` slot
+      template, which prevented the scaffold from receiving the named slot at
+      runtime on `/pr/:id`
+    - fix: keep the `pageHeader` slot itself unconditional and move the
+      condition onto the nested `PuHeader`
+  - follow-up cleanup:
+    - inline former `PRCreateHeader.vue` into `PRCreatePage.vue`
+    - delete unused `PRHeroHeader.vue`
+  - follow-up back-affordance repair:
+    - old `PuPageHeader showBack` semantics were restored on migrated pages:
+      keep the back arrow icon visible, remove mistaken visible `返回首页`
+      text, and preserve the previous `backLabel` meaning through
+      `aria-label`
+    - `LocationPickerPage.vue` remains a custom-header exception because it
+      did not come from `PuPageHeader showBack`
+  - follow-up scaffold-padding audit:
+    - widened the `PuPageScaffold` scan to cover CSS custom-property
+      overrides, internal scaffold-class deep selectors, and wrapper shells
+    - `OrderingPageShell.vue` now uses the `PuPageScaffold` `padding` prop for
+      its `noPadding` mode instead of zeroing scaffold padding with a wrapper
+      class
+    - `OrderingPageShell.vue` also pins
+      `--pu-page-scaffold-region-gap` to zero so the ordering shell keeps the
+      previous zero-gap header/body/footer stacking semantics after the
+      scaffold migration
+    - `CommerceBillDetailPage.vue` now declares `padding=\"none\"` directly on
+      `PuPageScaffold` instead of simulating the layout through
+      `--pu-page-padding-bottom`
+    - remaining hits such as `StudySprintPomodoroPage.vue`,
+      `ContactSupportPage.vue`, and `AnchorEventLandingPage.vue` still need
+      case-by-case treatment because they tune safe-area rhythm, alignment, or
+      reveal-layout internals rather than mapping cleanly to scaffold
+      `padding=\"none\"`
+
+## Migration Signals
+
+- `0.4.7` additive changes:
+  - `PuButton` adds `xs`
+  - `PuRadio` is added
+  - visual adjustments for `PuCheckbox`, `PuCard`, `PuMultiStopToggle`
+- `0.4.7` compatibility-sensitive changes:
+  - `PuPageHeader` is removed in favor of public `PuHeader`
+  - `PuPageScaffold` now differentiates scaffold-owned `pageHeader` from raw
+    custom `header`
+  - header outer padding moves from header component ownership to the page or
+    surface host
+- Consumer migration likely needs more than an import rename because the new
+  `PuHeader` migration guide explicitly requires:
+  - move page-level headers into the `PuPageScaffold` `pageHeader` slot
+  - set `titleAs=\"h1\"` when the page title remains the primary heading
+  - move back affordances into `leading`
+  - move outer padding to the containing page or slot wrapper
+- Verified old `PuPageHeader@0.4.6` back behavior from the cached package
+  bundle:
+  - `showBack` rendered an icon-only back button
+  - `backLabel` was wired to the button `aria-label`, not visible button text
+  - app-side `PuHeader` migration should preserve that icon-only affordance
+    instead of rendering visible `返回首页` copy in the header leading area
+
+## Evidence Sources
+
+- `apps/frontend/package.json`
+- `pnpm-lock.yaml`
+- `docs/40-deployment/rollout.md`
+- downloaded `@partner-up-dev/design-web@0.4.7` package contents
+
+## Verification
+
+Passed:
+
+- `pnpm dlx @tanstack/intent@latest list --json`
+  - discovered local `@partner-up-dev/design-web@0.4.7`
+- `pnpm dlx @tanstack/intent@latest load @partner-up-dev/design-web#design-web`
+- `pnpm dlx @tanstack/intent@latest validate apps/frontend/node_modules/@partner-up-dev/design-web/skills/design-web`
+  - `Validated 1 skill files — all passed`
+- `pnpm check:type:frontend`
+- `pnpm check:lint:frontend`
+- `pnpm check:build:frontend`
+- Playwright runtime spot checks
+  - `https://partner-up.local/pr/39`
+  - `https://partner-up.local/pr/new`
+  - `https://partner-up.local/events`
+  - each page exposed a `PuPageScaffold` page header with an icon-only back
+    button and the expected `aria-label`
+
+Notes:
+
+- `pnpm check:lint:frontend` still reports the existing report-only weak-name
+  findings for `RideHailingOrderContent.vue` and
+  `RideHailingOrderingContent.vue`; they are unrelated to this migration.
+
+## Next Step
+
+Ready for review.

From 4d4f9cd055c66d9daaabacff0dc5a939b1678b4b Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Sun, 28 Jun 2026 17:24:49 +0800
Subject: [PATCH 48/94] feat(payment): rebuild checkout workstream

- move checkout onto frontend-owned routing and payment-domain contracts
- add local fake WeChatPay baseline, JSAPI bridge, and interactive payment client controls
- stabilize checkout reconciliation UX and keep ride-hailing final-bill payment untimed
---
 apps/backend/.env.example                     |   2 +-
 ...081_dev_mock_payment_provider_baseline.sql | 135 ++++
 ...yment_provider_multi_active_per_client.sql |   1 +
 .../src/controllers/commerce.controller.ts    |  99 +--
 .../src/controllers/payment.controller.ts     |  98 +++
 .../save-admin-payment-provider-instance.ts   |  51 +-
 .../bill/services/bill-payment-state.test.ts  | 129 ++++
 .../services/bill-payment-state.ts            |  40 +-
 .../src/domains/bill/services/index.ts        |   1 +
 .../use-cases/get-bill-detail.ts              |   2 -
 .../get-bill-line-checkout-target.ts          | 153 ++++
 .../src/domains/bill/use-cases/index.ts       |   2 +
 .../services/bill-payment-state.test.ts       | 128 ----
 .../src/domains/payment/services/index.ts     |   2 +-
 .../domains/payment/services/payment-tx.ts    |  74 ++
 .../src/domains/payment/use-cases/index.ts    |   3 +-
 .../payment/use-cases/payment-checkout.ts     | 454 ------------
 .../payment/use-cases/payment-contract.ts     | 392 ++++++++++
 .../payment/use-cases/payment-execution.ts    | 128 ++++
 .../apply-bill-settlement-to-order.ts         |   2 +-
 .../domains/trade/use-cases/create-order.ts   |  24 +-
 .../finalize-rental-order-termination.ts      |   7 +-
 .../trade/use-cases/rental-ordering-flow.ts   |   2 +-
 apps/backend/src/entities/payment.ts          |  38 +-
 apps/backend/src/index.ts                     |   2 +
 .../PaymentProviderInstanceRepository.ts      |  30 +-
 .../rental-order-persistence.scenario.test.ts |   7 +
 .../payment-provider-ssot.scenario.test.ts    | 328 +++++----
 ...-hailing-order-foundation.scenario.test.ts |   2 +
 apps/frontend/.env.example                    |   2 +
 apps/frontend/src/app/create-app.ts           |  12 +-
 apps/frontend/src/app/router.ts               |   2 +-
 .../domains/commerce/queries/useCommerce.ts   |  76 +-
 .../routing/payment-checkout-route.ts         |  26 +
 .../commerce/ui/bill-detail/BillLineCard.vue  |   2 +-
 .../ui/ordering/OrderingPageShell.vue         |   7 +-
 .../src/domains/payment/queries/usePayment.ts |  91 +++
 .../ui/primitives/PaymentCheckoutHero.vue     |  80 +++
 .../ui/surfaces/PaymentCheckoutFlow.vue       | 672 ++++++++++++++++++
 .../launch-payment-client-action.test.ts      |  72 ++
 .../use-cases/launch-payment-client-action.ts | 119 ++++
 .../src/pages/CommerceBillDetailPage.vue      |  15 +-
 .../src/pages/CommerceOrderDetailPage.vue     |   2 +-
 .../src/pages/PaymentCheckoutPage.vue         | 474 +-----------
 apps/frontend/src/shared/api/query-keys.ts    | 102 ++-
 .../wechat/fake-wechatpay-bridge.test.ts      | 218 ++++++
 .../shared/wechat/fake-wechatpay-bridge.ts    | 327 +++++++++
 apps/frontend/src/types/wechat-jssdk.d.ts     |  29 +-
 apps/frontend/src/vite-env.d.ts               |   7 +-
 docs/20-product-tdd/ecommerce-contracts.md    |  28 +
 .../fake-wechatpay-server/src/fixtures.ts     |  57 +-
 .../src/fixtures/stable-dev-fixture.json      |  15 +
 packages/fake-wechatpay-server/src/routes.ts  |  46 +-
 .../fake-wechatpay-server/src/server.test.ts  |  93 +++
 tasks/ride-hailing-ui-fixes/change-log.md     | 374 +++++++++-
 tasks/ride-hailing-ui-fixes/control.md        | 288 +++++++-
 tasks/ride-hailing-ui-fixes/discussion-log.md | 547 ++++++++++++++
 ...cal-mock-payment-provider-baseline-plan.md | 203 ++++++
 .../payment-checkout-backend-contract-plan.md | 370 ++++++++++
 ...payment-checkout-fake-jsapi-bridge-plan.md | 242 +++++++
 .../payment-checkout-interaction-ui-plan.md   | 281 ++++++++
 .../payment-checkout-page-reset-plan.md       | 518 ++++++++++++++
 ...payment-client-ui-attempt-identity-plan.md | 303 ++++++++
 .../ride-hailing-ordering.scenario.test.ts    | 137 +++-
 64 files changed, 6558 insertions(+), 1615 deletions(-)
 create mode 100644 apps/backend/data-migrations/0081_dev_mock_payment_provider_baseline.sql
 create mode 100644 apps/backend/drizzle/0082_payment_provider_multi_active_per_client.sql
 create mode 100644 apps/backend/src/controllers/payment.controller.ts
 create mode 100644 apps/backend/src/domains/bill/services/bill-payment-state.test.ts
 rename apps/backend/src/domains/{payment => bill}/services/bill-payment-state.ts (77%)
 rename apps/backend/src/domains/{payment => bill}/use-cases/get-bill-detail.ts (98%)
 create mode 100644 apps/backend/src/domains/bill/use-cases/get-bill-line-checkout-target.ts
 delete mode 100644 apps/backend/src/domains/payment/services/bill-payment-state.test.ts
 create mode 100644 apps/backend/src/domains/payment/services/payment-tx.ts
 delete mode 100644 apps/backend/src/domains/payment/use-cases/payment-checkout.ts
 create mode 100644 apps/backend/src/domains/payment/use-cases/payment-contract.ts
 create mode 100644 apps/backend/src/domains/payment/use-cases/payment-execution.ts
 create mode 100644 apps/frontend/src/domains/commerce/routing/payment-checkout-route.ts
 create mode 100644 apps/frontend/src/domains/payment/queries/usePayment.ts
 create mode 100644 apps/frontend/src/domains/payment/ui/primitives/PaymentCheckoutHero.vue
 create mode 100644 apps/frontend/src/domains/payment/ui/surfaces/PaymentCheckoutFlow.vue
 create mode 100644 apps/frontend/src/domains/payment/use-cases/launch-payment-client-action.test.ts
 create mode 100644 apps/frontend/src/domains/payment/use-cases/launch-payment-client-action.ts
 create mode 100644 apps/frontend/src/shared/wechat/fake-wechatpay-bridge.test.ts
 create mode 100644 apps/frontend/src/shared/wechat/fake-wechatpay-bridge.ts
 create mode 100644 packages/fake-wechatpay-server/src/fixtures/stable-dev-fixture.json
 create mode 100644 tasks/ride-hailing-ui-fixes/local-mock-payment-provider-baseline-plan.md
 create mode 100644 tasks/ride-hailing-ui-fixes/payment-checkout-backend-contract-plan.md
 create mode 100644 tasks/ride-hailing-ui-fixes/payment-checkout-fake-jsapi-bridge-plan.md
 create mode 100644 tasks/ride-hailing-ui-fixes/payment-checkout-interaction-ui-plan.md
 create mode 100644 tasks/ride-hailing-ui-fixes/payment-checkout-page-reset-plan.md
 create mode 100644 tasks/ride-hailing-ui-fixes/payment-client-ui-attempt-identity-plan.md

diff --git a/apps/backend/.env.example b/apps/backend/.env.example
index d3d6e2343..4f91b7f7d 100644
--- a/apps/backend/.env.example
+++ b/apps/backend/.env.example
@@ -41,4 +41,4 @@ AVATARS_DIR=
 
 # Mock
 WECHAT_ABILITY_MOCKING_ENABLED=
-WECHAT_ABILITY_MOCK_OPEN_ID=  # optional
+WECHAT_ABILITY_MOCK_OPEN_ID=  # optional
\ No newline at end of file
diff --git a/apps/backend/data-migrations/0081_dev_mock_payment_provider_baseline.sql b/apps/backend/data-migrations/0081_dev_mock_payment_provider_baseline.sql
new file mode 100644
index 000000000..210a2babe
--- /dev/null
+++ b/apps/backend/data-migrations/0081_dev_mock_payment_provider_baseline.sql
@@ -0,0 +1,135 @@
+-- Stable development-only payment-provider baseline for local checkout work.
+-- migration: environments=development
+--
+-- Keep this file limited to long-lived local baseline data. Do not add
+-- scenario-only providers, real credentials, or per-run cleanup logic here.
+
+do $$
+declare
+  provider_instance_key constant text := 'dev-fake-wechatpay-web';
+  provider_client_id constant text := 'web';
+  provider_display_name constant text := 'Local Fake WeChatPay Web';
+  provider_endpoint_base_url constant text := 'https://wechatpay.partner-up.local';
+  provider_app_id constant text := 'wx_fake_partnerup_web';
+  provider_mch_id constant text := '1900000001';
+  provider_api_v3_key constant text := '0123456789abcdef0123456789abcdef';
+  provider_charge_mode constant text := 'JSAPI';
+  merchant_serial_no constant text := 'FAKE_MERCHANT_SERIAL_000000000001';
+  merchant_private_key_pem constant text := $merchant_private$
+-----BEGIN PRIVATE KEY-----
+MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQCijFRIVWtysoSJ
+ziyobX78pf83LVov3gwBDZwLN4eUJ2hLHB34/9xJc4tSsyu7LUThxtVaKSisoUi8
+BzFkA9A+jAmr7/PPhdg3gcJ24hOFM/JjaoPQJ12woqAaVeTEgqyEHGRh3k/3tJOI
+ToTBjWjbdxZ1P/MQnDfx/zFZSCmZE+3DBVuSkqWQjRMHAik0PE6+whsRoekcHZzo
+rBrKRk7C54TrjE3pa/OLmC5efQwFtjuZ2qODiHDxrtDTLoW2IZohYddv8cddLSoZ
+1Rwe16yAia4HHNB/HzMZkCDYSMJ4dt+tsKa17H3cO4LqoBM0LPSKaJe4Rr2Zszof
+ZfdbAEGVAgMBAAECggEAD9lK5nqdrWNGlQErTYjPlubAiaq8XmpyFTA0hMt3RrTI
+8HnfWkXoPqkrbnbVzrxNOQ5gAxh8RMi9BMhWwn+0sESLNN6CkTtlp5PZWCoW6Sf1
+fEgIbiVId06D+c1iLt7m30K9buV0Opy6vdGaFB0rmip0YB5KHtZ8hfXx49irZadp
+/oi9g3dIvBehrGuPLdJ3zuehhj/nV9aB63TN8eBPuffqREqUIsUB/e7aKvPM3tuB
+YhBChhYPdxeI0ihKH8Lq/63wvfBA3TNrKUGuULDU8pMrkLNFJvUK2NzKQoEydvPY
+k7jHuh2K7dwKhQbT5gQ8JZPe6o9fvYjWoLi+uHY7QQKBgQDRKoEezGKCbPFy6JTQ
+4URN3RbJ7Npy9RNXRadV7qfTdIvQrYKmbztjC6gp4cuaPDbo8x/PQh5Gcx0z9pQS
+VIuIvq8w8R1ATQFHksdjbZHo7McDvcUVagdLXVYQnIbWtukF6Y6H0WYbvOZRcjIR
+BW4Zt+pET3JTSta/QPf26l0oTQKBgQDG8aqdjqEbEklEIhBBbt3RO26Qm4wvaYzO
+QG+FDQvJ0UwR+wTo4rUPnumF+iukeuElZde7FRUCyUkaWaJfMAbvEWnMuFH4s9sa
+qxOB87sAan3AfIJdAZ17VGYq3P28UOK42h0DxkRRevUHHx3EIcKIs5B+lGf+bFL6
+hqM6KXKiaQKBgHiDhOG54QhEvNj4KMYxBKnYOMkfLr4NdpdSCpf4abnr7KLPVfeP
+HyhyDvISpry29OxDKJDCB6+Po8PMzoPBMqQXOdl5EuF5fMNATqF7ABa0VfZR4Lv1
+2z4RCQWJKieMO7asWvLmM27H5+wFX9NuzYED9nZlT/mtpQ2M4VHitsoBAoGASiEa
+lgLjfRbfPggDTp5lAOXIWRHctn35/ZB8/XLTBax7T+fc+HohRWTNVyLUyEERS8Ib
+FJbScWtXVf44Roe6zbILXkEAKk+6QMGmTzHmaE1F9kduvAEyERZty2L1GQp6sK51
+SUbDhijuzGyHxuFdf1qJaOEbru3mLXulrrJrCKECgYEAxnxm9yv/TulmJm486Ljk
+jhCmFxCj8gW71R5iEOc4kHoOcBBamAdapeBp8UoK9tCkksgGjMfJ2+yMo992/gY0
+MoWRKTLPy5UiimRwZz35hz/5ul1CljvcEmbpnLRfRmndNqse27fKxmZbzGH6hU7I
+plVhsSlu1LQ6e1EbD689whE=
+-----END PRIVATE KEY-----
+$merchant_private$;
+  merchant_certificate_pem constant text := $merchant_public$
+-----BEGIN PUBLIC KEY-----
+MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAooxUSFVrcrKEic4sqG1+
+/KX/Ny1aL94MAQ2cCzeHlCdoSxwd+P/cSXOLUrMruy1E4cbVWikorKFIvAcxZAPQ
+PowJq+/zz4XYN4HCduIThTPyY2qD0CddsKKgGlXkxIKshBxkYd5P97STiE6EwY1o
+23cWdT/zEJw38f8xWUgpmRPtwwVbkpKlkI0TBwIpNDxOvsIbEaHpHB2c6KwaykZO
+wueE64xN6Wvzi5guXn0MBbY7mdqjg4hw8a7Q0y6FtiGaIWHXb/HHXS0qGdUcHtes
+gImuBxzQfx8zGZAg2EjCeHbfrbCmtex93DuC6qATNCz0imiXuEa9mbM6H2X3WwBB
+lQIDAQAB
+-----END PUBLIC KEY-----
+$merchant_public$;
+
+  v_provider_instance_id uuid;
+begin
+  update payment_provider_instances
+     set status = 'DISABLED',
+         updated_at = now()
+   where client_id = provider_client_id
+     and status = 'ACTIVE'
+     and instance_key <> provider_instance_key;
+
+  select id
+    into v_provider_instance_id
+    from payment_provider_instances
+   where provider_type = 'WECHAT_PAY'
+     and instance_key = provider_instance_key
+   order by created_at asc
+   limit 1;
+
+  if v_provider_instance_id is null then
+    insert into payment_provider_instances (
+      provider_type,
+      instance_key,
+      status,
+      display_name,
+      client_id,
+      config,
+      created_at,
+      updated_at
+    )
+    values (
+      'WECHAT_PAY',
+      provider_instance_key,
+      'ACTIVE',
+      provider_display_name,
+      provider_client_id,
+      jsonb_build_object(
+        'adapterMode', 'WECHAT_PAY_API_V3',
+        'appId', provider_app_id,
+        'mchId', provider_mch_id,
+        'chargeMode', provider_charge_mode,
+        'endpointBaseUrl', provider_endpoint_base_url,
+        'apiV3Key', provider_api_v3_key,
+        'merchantCertificate', jsonb_build_object(
+          'serialNo', merchant_serial_no,
+          'privateKeyPem', merchant_private_key_pem,
+          'certificatePem', merchant_certificate_pem
+        ),
+        'platformCertificates', null
+      ),
+      now(),
+      now()
+    )
+    returning id into v_provider_instance_id;
+  else
+    update payment_provider_instances
+       set status = 'ACTIVE',
+           display_name = provider_display_name,
+           client_id = provider_client_id,
+           config = jsonb_build_object(
+             'adapterMode', 'WECHAT_PAY_API_V3',
+             'appId', provider_app_id,
+             'mchId', provider_mch_id,
+             'chargeMode', provider_charge_mode,
+             'endpointBaseUrl', provider_endpoint_base_url,
+             'apiV3Key', provider_api_v3_key,
+             'merchantCertificate', jsonb_build_object(
+               'serialNo', merchant_serial_no,
+               'privateKeyPem', merchant_private_key_pem,
+               'certificatePem', merchant_certificate_pem
+             ),
+             'platformCertificates', null
+           ),
+           updated_at = now()
+     where id = v_provider_instance_id;
+  end if;
+end
+$$;
\ No newline at end of file
diff --git a/apps/backend/drizzle/0082_payment_provider_multi_active_per_client.sql b/apps/backend/drizzle/0082_payment_provider_multi_active_per_client.sql
new file mode 100644
index 000000000..5cf5b3279
--- /dev/null
+++ b/apps/backend/drizzle/0082_payment_provider_multi_active_per_client.sql
@@ -0,0 +1 @@
+drop index if exists "payment_provider_instances_active_client_unique";
diff --git a/apps/backend/src/controllers/commerce.controller.ts b/apps/backend/src/controllers/commerce.controller.ts
index fdecfe257..0f14d1b13 100644
--- a/apps/backend/src/controllers/commerce.controller.ts
+++ b/apps/backend/src/controllers/commerce.controller.ts
@@ -1,9 +1,8 @@
-import { Hono } from "hono";
 import { zValidator } from "@hono/zod-validator";
+import { Hono } from "hono";
 import { z } from "zod";
-import { authMiddleware, type AuthEnv } from "../auth/middleware";
-import { requireAuthenticatedUserId } from "./pr-controller.shared";
-import { throwHttpProblem } from "../lib/problem-details";
+import { type AuthEnv, authMiddleware } from "../auth/middleware";
+import { getBillDetail, getBillDetailByOrderId, getBillLineCheckoutTarget } from "../domains/bill";
 import {
   cancelRentalOrderFromOrderDetail,
   createOrderCommand,
@@ -11,13 +10,7 @@ import {
   listOfferListing,
   simulateRentalBookingConfirmation,
 } from "../domains/trade";
-import {
-  createOrReuseChargeForBillLine,
-  getBillDetail,
-  getBillDetailByOrderId,
-  getPaymentCheckout,
-  syncPaymentForBillLine,
-} from "../domains/payment";
+import { requireAuthenticatedUserId } from "./pr-controller.shared";
 
 const app = new Hono<AuthEnv>();
 
@@ -33,8 +26,6 @@ const billLineIdParamSchema = z.object({
   billLineId: z.string().uuid(),
 });
 
-const CLIENT_ID_HEADER = "x-client-id";
-
 const registrantSchema = z.object({
   fullName: z.string().trim().min(1),
   nationalId: z.string().trim().nullable().optional(),
@@ -115,17 +106,6 @@ const offerListingInputSchema = z.union([
   }),
 ]);
 
-const readClientId = (headerValue: string | undefined): string => {
-  const clientId = headerValue?.trim();
-  if (!clientId) {
-    return throwHttpProblem({
-      status: 400,
-      detail: "Missing x-client-id header",
-    });
-  }
-  return clientId;
-};
-
 type JsonEndpoint<Input, Output, Status extends number = 200> = {
   input: Input;
   output: Output;
@@ -133,7 +113,6 @@ type JsonEndpoint<Input, Output, Status extends number = 200> = {
   status: Status;
 };
 
-type EmptyInput = {};
 type UuidParam<Key extends string> = {
   param: Record<Key, string>;
 };
@@ -161,30 +140,21 @@ type CommerceRouteSchema = {
   "/bills/:billId": {
     $get: JsonEndpoint<UuidParam<"billId">, Awaited<ReturnType<typeof getBillDetail>>>;
   };
-  "/bill-lines/:billLineId/checkout": {
-    $get: JsonEndpoint<UuidParam<"billLineId">, Awaited<ReturnType<typeof getPaymentCheckout>>>;
-  };
-  "/bill-lines/:billLineId/charges": {
-    $post: JsonEndpoint<
-      UuidParam<"billLineId"> & EmptyInput,
-      Awaited<ReturnType<typeof createOrReuseChargeForBillLine>>
-    >;
-  };
-  "/bill-lines/:billLineId/payment/sync": {
-    $post: JsonEndpoint<
-      UuidParam<"billLineId"> & EmptyInput,
-      Awaited<ReturnType<typeof syncPaymentForBillLine>>
+  "/bill-lines/:billLineId": {
+    $get: JsonEndpoint<
+      UuidParam<"billLineId">,
+      Awaited<ReturnType<typeof getBillLineCheckoutTarget>>
     >;
   };
   "/orders/:orderId/cancel-rental": {
     $post: JsonEndpoint<
-      UuidParam<"orderId"> & EmptyInput,
+      UuidParam<"orderId">,
       Awaited<ReturnType<typeof cancelRentalOrderFromOrderDetail>>
     >;
   };
   "/orders/:orderId/mock-rental-booking-confirmation": {
     $post: JsonEndpoint<
-      UuidParam<"orderId"> & EmptyInput,
+      UuidParam<"orderId">,
       Awaited<ReturnType<typeof simulateRentalBookingConfirmation>>
     >;
   };
@@ -244,46 +214,15 @@ export const commerceRoute: Hono<AuthEnv, CommerceRouteSchema> = app
     });
     return c.json(result);
   })
-  .get(
-    "/bill-lines/:billLineId/checkout",
-    zValidator("param", billLineIdParamSchema),
-    async (c) => {
-      const { billLineId } = c.req.valid("param");
-      const auth = c.get("auth");
-      const result = await getPaymentCheckout({
-        billLineId,
-        viewerUserId: auth.userId,
-      });
-      return c.json(result);
-    },
-  )
-  .post(
-    "/bill-lines/:billLineId/charges",
-    zValidator("param", billLineIdParamSchema),
-    async (c) => {
-      const { billLineId } = c.req.valid("param");
-      const auth = c.get("auth");
-      const result = await createOrReuseChargeForBillLine({
-        billLineId,
-        viewerUserId: auth.userId,
-        clientId: readClientId(c.req.header(CLIENT_ID_HEADER)),
-      });
-      return c.json(result);
-    },
-  )
-  .post(
-    "/bill-lines/:billLineId/payment/sync",
-    zValidator("param", billLineIdParamSchema),
-    async (c) => {
-      const { billLineId } = c.req.valid("param");
-      const auth = c.get("auth");
-      const result = await syncPaymentForBillLine({
-        billLineId,
-        viewerUserId: auth.userId,
-      });
-      return c.json(result);
-    },
-  )
+  .get("/bill-lines/:billLineId", zValidator("param", billLineIdParamSchema), async (c) => {
+    const { billLineId } = c.req.valid("param");
+    const auth = c.get("auth");
+    const result = await getBillLineCheckoutTarget({
+      billLineId,
+      viewerUserId: auth.userId,
+    });
+    return c.json(result);
+  })
   .post("/orders/:orderId/cancel-rental", zValidator("param", orderIdParamSchema), async (c) => {
     const { orderId } = c.req.valid("param");
     const userId = requireAuthenticatedUserId(c);
diff --git a/apps/backend/src/controllers/payment.controller.ts b/apps/backend/src/controllers/payment.controller.ts
new file mode 100644
index 000000000..4269d0da3
--- /dev/null
+++ b/apps/backend/src/controllers/payment.controller.ts
@@ -0,0 +1,98 @@
+import { zValidator } from "@hono/zod-validator";
+import { Hono } from "hono";
+import { z } from "zod";
+import { type AuthEnv, authMiddleware } from "../auth/middleware";
+import { createPaymentCharge, getPaymentTx, listPaymentProviders } from "../domains/payment";
+import { throwHttpProblem } from "../lib/problem-details";
+
+const app = new Hono<AuthEnv>();
+
+const CLIENT_ID_HEADER = "x-client-id";
+
+const paymentProviderInstanceParamSchema = z.object({
+  paymentProviderInstanceId: z.string().uuid(),
+});
+
+const paymentTxParamSchema = z.object({
+  paymentTxId: z.string().trim().min(1),
+});
+
+const billLineQuerySchema = z.object({
+  "bill-line": z.string().uuid(),
+});
+
+const readClientId = (headerValue: string | undefined): string => {
+  const clientId = headerValue?.trim();
+  if (!clientId) {
+    return throwHttpProblem({
+      status: 400,
+      detail: "Missing x-client-id header",
+    });
+  }
+  return clientId;
+};
+
+type JsonEndpoint<Input, Output, Status extends number = 200> = {
+  input: Input;
+  output: Output;
+  outputFormat: "json";
+  status: Status;
+};
+
+type PaymentRouteSchema = {
+  "/providers": {
+    $get: JsonEndpoint<{}, Awaited<ReturnType<typeof listPaymentProviders>>>;
+  };
+  "/:paymentProviderInstanceId/charge": {
+    $post: JsonEndpoint<
+      {
+        param: z.infer<typeof paymentProviderInstanceParamSchema>;
+        query: z.infer<typeof billLineQuerySchema>;
+      },
+      Awaited<ReturnType<typeof createPaymentCharge>>
+    >;
+  };
+  "/:paymentTxId": {
+    $get: JsonEndpoint<
+      { param: z.infer<typeof paymentTxParamSchema> },
+      Awaited<ReturnType<typeof getPaymentTx>>
+    >;
+  };
+};
+
+export const paymentRoute: Hono<AuthEnv, PaymentRouteSchema> = app
+  .use("*", authMiddleware)
+  .get("/providers", async (c) => {
+    const auth = c.get("auth");
+    const result = await listPaymentProviders({
+      viewerUserId: auth.userId,
+      clientId: readClientId(c.req.header(CLIENT_ID_HEADER)),
+    });
+    return c.json(result);
+  })
+  .post(
+    "/:paymentProviderInstanceId/charge",
+    zValidator("param", paymentProviderInstanceParamSchema),
+    zValidator("query", billLineQuerySchema),
+    async (c) => {
+      const { paymentProviderInstanceId } = c.req.valid("param");
+      const query = c.req.valid("query");
+      const auth = c.get("auth");
+      const result = await createPaymentCharge({
+        paymentProviderInstanceId,
+        billLineId: query["bill-line"],
+        viewerUserId: auth.userId,
+        clientId: readClientId(c.req.header(CLIENT_ID_HEADER)),
+      });
+      return c.json(result);
+    },
+  )
+  .get("/:paymentTxId", zValidator("param", paymentTxParamSchema), async (c) => {
+    const { paymentTxId } = c.req.valid("param");
+    const auth = c.get("auth");
+    const result = await getPaymentTx({
+      paymentTxId,
+      viewerUserId: auth.userId,
+    });
+    return c.json(result);
+  });
diff --git a/apps/backend/src/domains/admin-payment-management/use-cases/save-admin-payment-provider-instance.ts b/apps/backend/src/domains/admin-payment-management/use-cases/save-admin-payment-provider-instance.ts
index 4874c9c87..a3e64e060 100644
--- a/apps/backend/src/domains/admin-payment-management/use-cases/save-admin-payment-provider-instance.ts
+++ b/apps/backend/src/domains/admin-payment-management/use-cases/save-admin-payment-provider-instance.ts
@@ -1,7 +1,4 @@
-import type {
-  PaymentProviderInstance,
-  PaymentProviderInstanceId,
-} from "../../../entities/payment";
+import type { PaymentProviderInstance, PaymentProviderInstanceId } from "../../../entities/payment";
 import { throwHttpProblem } from "../../../lib/problem-details";
 import { PaymentProviderInstanceRepository } from "../../../repositories/PaymentProviderInstanceRepository";
 import type {
@@ -10,11 +7,11 @@ import type {
   WeChatPayChargeMode,
   WeChatPayProviderInstanceConfig,
 } from "../../payment/model";
+import { normalizeAndValidateWeChatPayProviderConfig } from "../../payment/services/wechatpay-config-validation";
 import {
-  toAdminPaymentProviderInstanceView,
   type AdminPaymentProviderInstanceView,
+  toAdminPaymentProviderInstanceView,
 } from "./provider-instance-view";
-import { normalizeAndValidateWeChatPayProviderConfig } from "../../payment/services/wechatpay-config-validation";
 
 const providerRepo = new PaymentProviderInstanceRepository();
 
@@ -38,9 +35,7 @@ export type AdminPaymentProviderInstanceInput = {
   };
 };
 
-const derivePaymentProviderInstanceKey = (
-  input: AdminPaymentProviderInstanceInput,
-): string => {
+const derivePaymentProviderInstanceKey = (input: AdminPaymentProviderInstanceInput): string => {
   if (input.providerType === "WECHAT_PAY") {
     return `mch:${input.config.mchId.trim()}:app:${input.config.appId.trim()}`;
   }
@@ -51,9 +46,7 @@ const derivePaymentProviderInstanceKey = (
   });
 };
 
-const normalizeOptionalString = (
-  value: string | null | undefined,
-): string | null => {
+const normalizeOptionalString = (value: string | null | undefined): string | null => {
   const normalized = value?.trim() ?? "";
   return normalized.length > 0 ? normalized : null;
 };
@@ -119,8 +112,7 @@ const assertUniqueInstanceKey = async (input: {
 
   if (
     existing &&
-    (!input.currentProviderInstanceId ||
-      existing.id !== input.currentProviderInstanceId)
+    (!input.currentProviderInstanceId || existing.id !== input.currentProviderInstanceId)
   ) {
     return throwHttpProblem({
       status: 409,
@@ -129,28 +121,6 @@ const assertUniqueInstanceKey = async (input: {
   }
 };
 
-const assertActiveClientAvailable = async (input: {
-  status: PaymentProviderInstanceStatus;
-  clientId: string;
-  currentProviderInstanceId?: PaymentProviderInstanceId;
-}): Promise<void> => {
-  if (input.status !== "ACTIVE") {
-    return;
-  }
-
-  const existing = await providerRepo.findActiveByClientId(input.clientId);
-  if (
-    existing &&
-    (!input.currentProviderInstanceId ||
-      existing.id !== input.currentProviderInstanceId)
-  ) {
-    return throwHttpProblem({
-      status: 409,
-      detail: "Active payment provider instance already exists for clientId",
-    });
-  }
-};
-
 const assertProviderIdentityUnchanged = (input: {
   existingProviderInstance: PaymentProviderInstance;
   payload: AdminPaymentProviderInstanceInput;
@@ -175,10 +145,6 @@ export async function createAdminPaymentProviderInstance(
     providerType: input.providerType,
     instanceKey,
   });
-  await assertActiveClientAvailable({
-    status: input.status,
-    clientId: input.clientId,
-  });
 
   const created = await providerRepo.create({
     providerType: input.providerType,
@@ -215,11 +181,6 @@ export async function updateAdminPaymentProviderInstance(input: {
     instanceKey,
     currentProviderInstanceId: existing.id,
   });
-  await assertActiveClientAvailable({
-    status: input.payload.status,
-    clientId: input.payload.clientId,
-    currentProviderInstanceId: existing.id,
-  });
 
   const updated = await providerRepo.updateAdminConfiguration({
     id: existing.id,
diff --git a/apps/backend/src/domains/bill/services/bill-payment-state.test.ts b/apps/backend/src/domains/bill/services/bill-payment-state.test.ts
new file mode 100644
index 000000000..30186f4eb
--- /dev/null
+++ b/apps/backend/src/domains/bill/services/bill-payment-state.test.ts
@@ -0,0 +1,129 @@
+import assert from "node:assert/strict";
+import { describe, it } from "vitest";
+import type { BillLine } from "../../../entities/bill";
+import { deriveBillPaymentState } from "./bill-payment-state";
+
+const chargeLineId = "11111111-1111-4111-8111-111111111111" as BillLine["id"];
+const refundLineId = "44444444-4444-4444-8444-444444444444" as BillLine["id"];
+const billId = "22222222-2222-4222-8222-222222222222" as BillLine["billId"];
+const userId = "33333333-3333-4333-8333-333333333333" as BillLine["userId"];
+const paymentProviderInstanceId = "55555555-5555-4555-8555-555555555555" as NonNullable<
+  BillLine["paymentProviderInstanceId"]
+>;
+
+const buildChargeLine = (overrides: Partial<BillLine> = {}): BillLine => ({
+  id: chargeLineId,
+  billId,
+  userId,
+  kind: "CHARGE",
+  amountFen: 1200,
+  currency: "CNY",
+  label: "Charge",
+  description: null,
+  refundOfBillLineId: null,
+  paymentProviderInstanceId: null,
+  attemptCount: 0,
+  createdAt: new Date("2030-01-01T00:00:00.000Z"),
+  settledAt: null,
+  ...overrides,
+});
+
+const buildRefundLine = (overrides: Partial<BillLine> = {}): BillLine => ({
+  id: refundLineId,
+  billId,
+  userId,
+  kind: "REFUND",
+  amountFen: 300,
+  currency: "CNY",
+  label: "Refund",
+  description: null,
+  refundOfBillLineId: chargeLineId,
+  paymentProviderInstanceId: null,
+  attemptCount: 0,
+  createdAt: new Date("2030-01-01T00:00:00.000Z"),
+  settledAt: null,
+  ...overrides,
+});
+
+describe("deriveBillPaymentState", () => {
+  it("returns unpaid state for fresh charge lines", () => {
+    const line = buildChargeLine();
+
+    const result = deriveBillPaymentState({
+      lines: [line],
+    });
+
+    assert.equal(result.chargeTotalFen, 1200);
+    assert.equal(result.paidChargeFen, 0);
+    assert.equal(result.refundTotalFen, 0);
+    assert.equal(result.refundedFen, 0);
+    assert.equal(result.allChargesPaid, false);
+    assert.equal(result.hasPendingPayment, false);
+    assert.deepEqual(result.lines, [
+      {
+        billLineId: line.id,
+        status: "UNPAID",
+        paidFen: 0,
+        refundableFen: 0,
+      },
+    ]);
+  });
+
+  it("returns processing state for open charge execution", () => {
+    const line = buildChargeLine({
+      paymentProviderInstanceId,
+      attemptCount: 1,
+    });
+
+    const result = deriveBillPaymentState({
+      lines: [line],
+    });
+
+    assert.equal(result.hasPendingPayment, true);
+    assert.deepEqual(result.lines, [
+      {
+        billLineId: line.id,
+        status: "PROCESSING",
+        paidFen: 0,
+        refundableFen: 0,
+      },
+    ]);
+  });
+
+  it("returns paid and refunded totals from settled lines", () => {
+    const settledAt = new Date("2030-01-01T00:00:00.000Z");
+    const charge = buildChargeLine({
+      amountFen: 1200,
+      settledAt,
+    });
+    const refund = buildRefundLine({
+      amountFen: 300,
+      settledAt,
+    });
+
+    const result = deriveBillPaymentState({
+      lines: [charge, refund],
+    });
+
+    assert.equal(result.chargeTotalFen, 1200);
+    assert.equal(result.paidChargeFen, 1200);
+    assert.equal(result.refundTotalFen, 300);
+    assert.equal(result.refundedFen, 300);
+    assert.equal(result.allChargesPaid, true);
+    assert.equal(result.hasPendingPayment, false);
+    assert.deepEqual(result.lines, [
+      {
+        billLineId: charge.id,
+        status: "PAID",
+        paidFen: 1200,
+        refundableFen: 0,
+      },
+      {
+        billLineId: refund.id,
+        status: "REFUNDED",
+        paidFen: 0,
+        refundableFen: 300,
+      },
+    ]);
+  });
+});
diff --git a/apps/backend/src/domains/payment/services/bill-payment-state.ts b/apps/backend/src/domains/bill/services/bill-payment-state.ts
similarity index 77%
rename from apps/backend/src/domains/payment/services/bill-payment-state.ts
rename to apps/backend/src/domains/bill/services/bill-payment-state.ts
index 427549b16..4e639a297 100644
--- a/apps/backend/src/domains/payment/services/bill-payment-state.ts
+++ b/apps/backend/src/domains/bill/services/bill-payment-state.ts
@@ -1,13 +1,5 @@
 import type { BillLine, BillLineId } from "../../../entities/bill";
-
-export type BillLineSettlementStatus =
-  | "UNPAID"
-  | "ACTION_REQUIRED"
-  | "PROCESSING"
-  | "PAID"
-  | "FAILED"
-  | "REFUND_PENDING"
-  | "REFUNDED";
+import type { BillLineSettlementStatus } from "../model";
 
 export type BillLinePaymentProjection = {
   billLineId: BillLineId;
@@ -31,24 +23,22 @@ const toLinePaymentProjection = (line: BillLine): BillLinePaymentProjection => {
     const refundedFen = line.settledAt ? line.amountFen : 0;
     return {
       billLineId: line.id,
-      status:
-        line.settledAt
-          ? "REFUNDED"
-          : line.paymentProviderInstanceId
-            ? "REFUND_PENDING"
-            : "UNPAID",
+      status: line.settledAt
+        ? "REFUNDED"
+        : line.paymentProviderInstanceId
+          ? "REFUND_PENDING"
+          : "UNPAID",
       paidFen: 0,
       refundableFen: refundedFen,
     };
   }
 
   const paidFen = line.settledAt ? line.amountFen : 0;
-  const status: BillLineSettlementStatus =
-    line.settledAt
-      ? "PAID"
-      : line.paymentProviderInstanceId
-        ? "PROCESSING"
-        : "UNPAID";
+  const status: BillLineSettlementStatus = line.settledAt
+    ? "PAID"
+    : line.paymentProviderInstanceId
+      ? "PROCESSING"
+      : "UNPAID";
 
   return {
     billLineId: line.id,
@@ -58,9 +48,7 @@ const toLinePaymentProjection = (line: BillLine): BillLinePaymentProjection => {
   };
 };
 
-export function deriveBillPaymentState(input: {
-  lines: BillLine[];
-}): BillPaymentState {
+export function deriveBillPaymentState(input: { lines: BillLine[] }): BillPaymentState {
   const projections = input.lines.map((line) => toLinePaymentProjection(line));
   const projectionByLineId = new Map(
     projections.map((projection) => [projection.billLineId, projection]),
@@ -89,9 +77,7 @@ export function deriveBillPaymentState(input: {
         (line) => (projectionByLineId.get(line.id)?.paidFen ?? 0) >= line.amountFen,
       ),
     hasPendingPayment: projections.some((projection) =>
-      ["ACTION_REQUIRED", "PROCESSING", "REFUND_PENDING"].includes(
-        projection.status,
-      ),
+      ["ACTION_REQUIRED", "PROCESSING", "REFUND_PENDING"].includes(projection.status),
     ),
     lines: projections,
   };
diff --git a/apps/backend/src/domains/bill/services/index.ts b/apps/backend/src/domains/bill/services/index.ts
index 828e9ba0e..284738a23 100644
--- a/apps/backend/src/domains/bill/services/index.ts
+++ b/apps/backend/src/domains/bill/services/index.ts
@@ -1,3 +1,4 @@
+export * from "./bill-payment-state";
 export * from "./bill-totals";
 export * from "./materialize-charge-lines";
 export * from "./reconcile-lines";
diff --git a/apps/backend/src/domains/payment/use-cases/get-bill-detail.ts b/apps/backend/src/domains/bill/use-cases/get-bill-detail.ts
similarity index 98%
rename from apps/backend/src/domains/payment/use-cases/get-bill-detail.ts
rename to apps/backend/src/domains/bill/use-cases/get-bill-detail.ts
index 6d4666605..b2a811576 100644
--- a/apps/backend/src/domains/payment/use-cases/get-bill-detail.ts
+++ b/apps/backend/src/domains/bill/use-cases/get-bill-detail.ts
@@ -56,7 +56,6 @@ export type BillDetailProjection = {
     paidFen: number;
     refundedFen: number;
     payableByViewer: boolean;
-    checkoutHref: string | null;
     paymentProviderInstanceId: string | null;
     attemptCount: number;
     settledAt: string | null;
@@ -163,7 +162,6 @@ async function buildBillDetail(input: {
         paidFen: payment?.paidFen ?? 0,
         refundedFen: payment?.refundableFen ?? 0,
         payableByViewer,
-        checkoutHref: payableByViewer ? `/bill-lines/${line.id}/checkout` : null,
         paymentProviderInstanceId: line.paymentProviderInstanceId,
         attemptCount: line.attemptCount,
         settledAt: line.settledAt?.toISOString() ?? null,
diff --git a/apps/backend/src/domains/bill/use-cases/get-bill-line-checkout-target.ts b/apps/backend/src/domains/bill/use-cases/get-bill-line-checkout-target.ts
new file mode 100644
index 000000000..6ba3a1a29
--- /dev/null
+++ b/apps/backend/src/domains/bill/use-cases/get-bill-line-checkout-target.ts
@@ -0,0 +1,153 @@
+import type { BillId, BillLine, BillLineId } from "../../../entities/bill";
+import type { TradeOrder } from "../../../entities/trade-order";
+import type { UserId } from "../../../entities/user";
+import { throwHttpProblem } from "../../../lib/problem-details";
+import { BillLineRepository } from "../../../repositories/BillLineRepository";
+import { BillRepository } from "../../../repositories/BillRepository";
+import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository";
+import type { BillLineSettlementStatus } from "../model";
+import { deriveBillPaymentState } from "../services";
+
+const billRepo = new BillRepository();
+const billLineRepo = new BillLineRepository();
+const tradeOrderRepo = new TradeOrderRepository();
+
+export type BillLineCheckoutTargetProjection = {
+  bill: {
+    id: string;
+    sourceOrderId: string;
+    status: string;
+    currency: "CNY";
+  };
+  order: {
+    id: string;
+    family: TradeOrder["family"];
+    status: TradeOrder["status"];
+  };
+  line: {
+    id: string;
+    billId: string;
+    userId: string;
+    kind: BillLine["kind"];
+    amountFen: number;
+    currency: "CNY";
+    label: string;
+    description: string | null;
+    settlementStatus: BillLineSettlementStatus;
+    paymentProviderInstanceId: string | null;
+    attemptCount: number;
+    settledAt: string | null;
+  };
+  eligibility: {
+    payable: boolean;
+    disabledReason: string | null;
+  };
+};
+
+const canViewOrder = (order: TradeOrder, userId: string): boolean =>
+  order.createdBy === userId ||
+  order.participants.some((participant) => participant.userId === userId);
+
+export async function resolveBillLineCheckoutBasis(input: {
+  billLineId: BillLineId;
+  viewerUserId: UserId;
+}): Promise<{
+  line: BillLine;
+  bill: NonNullable<Awaited<ReturnType<BillRepository["findById"]>>>;
+  order: TradeOrder;
+  settlementStatus: BillLineSettlementStatus;
+  disabledReason: string | null;
+}> {
+  const line = await billLineRepo.findById(input.billLineId);
+  if (!line) {
+    return throwHttpProblem({ status: 404, detail: "BillLine not found" });
+  }
+
+  const bill = await billRepo.findById(line.billId as BillId);
+  if (!bill) {
+    return throwHttpProblem({ status: 404, detail: "Bill not found" });
+  }
+
+  const order = await tradeOrderRepo.findById(bill.sourceOrderId);
+  if (!order) {
+    return throwHttpProblem({ status: 404, detail: "Order not found for BillLine" });
+  }
+
+  if (!canViewOrder(order, input.viewerUserId)) {
+    return throwHttpProblem({ status: 403, detail: "Payment checkout is not accessible" });
+  }
+
+  if (line.userId !== input.viewerUserId) {
+    return throwHttpProblem({
+      status: 403,
+      detail: "Users can only pay their own BillLine",
+    });
+  }
+
+  const paymentState = deriveBillPaymentState({ lines: [line] });
+  const settlementStatus = paymentState.lines[0]?.status ?? "UNPAID";
+  const disabledReason =
+    bill.status !== "ACTIVE"
+      ? "账单当前不可支付"
+      : order.status !== "OPEN"
+        ? "订单当前不可支付"
+        : line.kind !== "CHARGE"
+          ? "退款账单行不能由用户发起支付"
+          : settlementStatus === "PAID"
+            ? "该账单行已支付"
+            : null;
+
+  return {
+    line,
+    bill,
+    order,
+    settlementStatus,
+    disabledReason,
+  };
+}
+
+export async function getBillLineCheckoutTarget(input: {
+  billLineId: string;
+  viewerUserId: string | null;
+}): Promise<BillLineCheckoutTargetProjection> {
+  if (!input.viewerUserId) {
+    return throwHttpProblem({ status: 401, detail: "Authentication required" });
+  }
+
+  const basis = await resolveBillLineCheckoutBasis({
+    billLineId: input.billLineId as BillLineId,
+    viewerUserId: input.viewerUserId as UserId,
+  });
+
+  return {
+    bill: {
+      id: basis.bill.id,
+      sourceOrderId: basis.bill.sourceOrderId,
+      status: basis.bill.status,
+      currency: basis.bill.currency,
+    },
+    order: {
+      id: basis.order.id,
+      family: basis.order.family,
+      status: basis.order.status,
+    },
+    line: {
+      id: basis.line.id,
+      billId: basis.line.billId,
+      userId: basis.line.userId,
+      kind: basis.line.kind,
+      amountFen: basis.line.amountFen,
+      currency: basis.line.currency,
+      label: basis.line.label,
+      description: basis.line.description,
+      settlementStatus: basis.settlementStatus,
+      paymentProviderInstanceId: basis.line.paymentProviderInstanceId,
+      attemptCount: basis.line.attemptCount,
+      settledAt: basis.line.settledAt?.toISOString() ?? null,
+    },
+    eligibility: {
+      payable: basis.disabledReason === null,
+      disabledReason: basis.disabledReason,
+    },
+  };
+}
diff --git a/apps/backend/src/domains/bill/use-cases/index.ts b/apps/backend/src/domains/bill/use-cases/index.ts
index aa1df4372..db45ddf79 100644
--- a/apps/backend/src/domains/bill/use-cases/index.ts
+++ b/apps/backend/src/domains/bill/use-cases/index.ts
@@ -1,2 +1,4 @@
 export * from "./create-bill-from-seed";
+export * from "./get-bill-detail";
+export * from "./get-bill-line-checkout-target";
 export * from "./reconcile-bill-to-target-amount";
diff --git a/apps/backend/src/domains/payment/services/bill-payment-state.test.ts b/apps/backend/src/domains/payment/services/bill-payment-state.test.ts
deleted file mode 100644
index 3ea827213..000000000
--- a/apps/backend/src/domains/payment/services/bill-payment-state.test.ts
+++ /dev/null
@@ -1,128 +0,0 @@
-import { describe, expect, it } from "vitest";
-import type { BillId, BillLine, BillLineId } from "../../../entities/bill";
-import type { PaymentProviderInstanceId } from "../../../entities/payment";
-import type { UserId } from "../../../entities/user";
-import { deriveBillPaymentState } from "./bill-payment-state";
-
-const billId = "00000000-0000-0000-0000-000000000001" as BillId;
-const providerInstanceId =
-  "00000000-0000-0000-0000-000000000010" as PaymentProviderInstanceId;
-const userA = "00000000-0000-0000-0000-000000000101" as UserId;
-const userB = "00000000-0000-0000-0000-000000000102" as UserId;
-const now = new Date("2031-01-01T00:00:00.000Z");
-
-const billLine = (input: {
-  id: string;
-  userId: UserId;
-  kind: BillLine["kind"];
-  amountFen: number;
-  refundOfBillLineId?: BillLineId | null;
-  paymentProviderInstanceId?: PaymentProviderInstanceId | null;
-  attemptCount?: number;
-  settledAt?: Date | null;
-}): BillLine => ({
-  id: input.id as BillLineId,
-  billId,
-  userId: input.userId,
-  kind: input.kind,
-  amountFen: input.amountFen,
-  currency: "CNY",
-  label: input.kind,
-  description: null,
-  refundOfBillLineId: input.refundOfBillLineId ?? null,
-  paymentProviderInstanceId: input.paymentProviderInstanceId ?? null,
-  attemptCount: input.attemptCount ?? 0,
-  settledAt: input.settledAt ?? null,
-  createdAt: now,
-});
-
-describe("deriveBillPaymentState", () => {
-  it("derives partial settlement from settled charge BillLines", () => {
-    const creatorLine = billLine({
-      id: "00000000-0000-0000-0000-000000000201",
-      userId: userA,
-      kind: "CHARGE",
-      amountFen: 1000,
-      settledAt: now,
-      paymentProviderInstanceId: providerInstanceId,
-      attemptCount: 1,
-    });
-    const joinerLine = billLine({
-      id: "00000000-0000-0000-0000-000000000202",
-      userId: userB,
-      kind: "CHARGE",
-      amountFen: 1000,
-    });
-
-    const result = deriveBillPaymentState({
-      lines: [creatorLine, joinerLine],
-    });
-
-    expect(result.chargeTotalFen).toBe(2000);
-    expect(result.paidChargeFen).toBe(1000);
-    expect(result.allChargesPaid).toBe(false);
-    expect(result.lines.map((line) => line.status)).toEqual(["PAID", "UNPAID"]);
-  });
-
-  it("derives refunded state from settled refund BillLines", () => {
-    const chargeLine = billLine({
-      id: "00000000-0000-0000-0000-000000000211",
-      userId: userA,
-      kind: "CHARGE",
-      amountFen: 1000,
-      settledAt: now,
-      paymentProviderInstanceId: providerInstanceId,
-      attemptCount: 1,
-    });
-    const refundLine = billLine({
-      id: "00000000-0000-0000-0000-000000000212",
-      userId: userA,
-      kind: "REFUND",
-      amountFen: 1000,
-      refundOfBillLineId: chargeLine.id,
-      settledAt: now,
-      paymentProviderInstanceId: providerInstanceId,
-      attemptCount: 1,
-    });
-
-    const result = deriveBillPaymentState({
-      lines: [chargeLine, refundLine],
-    });
-
-    expect(result.refundTotalFen).toBe(1000);
-    expect(result.refundedFen).toBe(1000);
-    expect(result.lines.find((line) => line.billLineId === refundLine.id)?.status).toBe(
-      "REFUNDED",
-    );
-  });
-
-  it("marks active charge and refund provider bindings as pending", () => {
-    const chargeLine = billLine({
-      id: "00000000-0000-0000-0000-000000000221",
-      userId: userA,
-      kind: "CHARGE",
-      amountFen: 1000,
-      paymentProviderInstanceId: providerInstanceId,
-      attemptCount: 1,
-    });
-    const refundLine = billLine({
-      id: "00000000-0000-0000-0000-000000000222",
-      userId: userA,
-      kind: "REFUND",
-      amountFen: 500,
-      refundOfBillLineId: chargeLine.id,
-      paymentProviderInstanceId: providerInstanceId,
-      attemptCount: 1,
-    });
-
-    const result = deriveBillPaymentState({
-      lines: [chargeLine, refundLine],
-    });
-
-    expect(result.hasPendingPayment).toBe(true);
-    expect(result.lines.map((line) => line.status)).toEqual([
-      "PROCESSING",
-      "REFUND_PENDING",
-    ]);
-  });
-});
diff --git a/apps/backend/src/domains/payment/services/index.ts b/apps/backend/src/domains/payment/services/index.ts
index 88f8e4a0a..bf0d9f60c 100644
--- a/apps/backend/src/domains/payment/services/index.ts
+++ b/apps/backend/src/domains/payment/services/index.ts
@@ -1,3 +1,3 @@
 export {};
-export * from "./bill-payment-state";
 export * from "./payment-provider";
+export * from "./payment-tx";
diff --git a/apps/backend/src/domains/payment/services/payment-tx.ts b/apps/backend/src/domains/payment/services/payment-tx.ts
new file mode 100644
index 000000000..e5a12c46f
--- /dev/null
+++ b/apps/backend/src/domains/payment/services/payment-tx.ts
@@ -0,0 +1,74 @@
+import { throwHttpProblem } from "../../../lib/problem-details";
+import type { ProviderPaymentReferenceKind } from "../model";
+
+const paymentTxIdPrefix = "ptx1";
+const uuidPattern = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  typeof value === "object" && value !== null;
+
+export type PaymentTxReference = {
+  kind: ProviderPaymentReferenceKind;
+  billLineId: string;
+  paymentProviderInstanceId: string;
+  attemptCount: number;
+};
+
+const isValidReference = (value: PaymentTxReference): boolean =>
+  uuidPattern.test(value.billLineId) &&
+  uuidPattern.test(value.paymentProviderInstanceId) &&
+  (value.kind === "CHARGE" || value.kind === "REFUND") &&
+  Number.isInteger(value.attemptCount) &&
+  value.attemptCount > 0;
+
+export const encodePaymentTxId = (reference: PaymentTxReference): string => {
+  if (!isValidReference(reference)) {
+    return throwHttpProblem({
+      status: 500,
+      detail: "PaymentTx reference is invalid",
+    });
+  }
+
+  const payload = Buffer.from(JSON.stringify(reference), "utf8").toString("base64url");
+  return `${paymentTxIdPrefix}_${payload}`;
+};
+
+export const decodePaymentTxId = (paymentTxId: string): PaymentTxReference => {
+  const [prefix, encoded] = paymentTxId.split("_", 2);
+  if (prefix !== paymentTxIdPrefix || !encoded) {
+    return throwHttpProblem({
+      status: 404,
+      detail: "PaymentTx not found",
+    });
+  }
+
+  try {
+    const parsed: unknown = JSON.parse(Buffer.from(encoded, "base64url").toString("utf8"));
+    if (
+      !isRecord(parsed) ||
+      typeof parsed.kind !== "string" ||
+      typeof parsed.billLineId !== "string" ||
+      typeof parsed.paymentProviderInstanceId !== "string" ||
+      typeof parsed.attemptCount !== "number"
+    ) {
+      throw new Error("Invalid PaymentTx payload");
+    }
+
+    const reference: PaymentTxReference = {
+      kind: parsed.kind as ProviderPaymentReferenceKind,
+      billLineId: parsed.billLineId,
+      paymentProviderInstanceId: parsed.paymentProviderInstanceId,
+      attemptCount: parsed.attemptCount,
+    };
+
+    if (!isValidReference(reference)) {
+      throw new Error("Invalid PaymentTx reference");
+    }
+
+    return reference;
+  } catch {
+    return throwHttpProblem({
+      status: 404,
+      detail: "PaymentTx not found",
+    });
+  }
+};
diff --git a/apps/backend/src/domains/payment/use-cases/index.ts b/apps/backend/src/domains/payment/use-cases/index.ts
index 4b322390c..c7ee73f06 100644
--- a/apps/backend/src/domains/payment/use-cases/index.ts
+++ b/apps/backend/src/domains/payment/use-cases/index.ts
@@ -1,7 +1,6 @@
 export {};
 export * from "./create-refund-execution";
-export * from "./get-bill-detail";
-export * from "./payment-checkout";
+export * from "./payment-contract";
 export * from "./payment-notifications";
 export * from "./payment-settlement-consequence";
 export * from "./register-payment-provider-instance";
diff --git a/apps/backend/src/domains/payment/use-cases/payment-checkout.ts b/apps/backend/src/domains/payment/use-cases/payment-checkout.ts
deleted file mode 100644
index 6070696d5..000000000
--- a/apps/backend/src/domains/payment/use-cases/payment-checkout.ts
+++ /dev/null
@@ -1,454 +0,0 @@
-import type { BillId, BillLine, BillLineId } from "../../../entities/bill";
-import type { PaymentProviderInstance, PaymentProviderInstanceId } from "../../../entities/payment";
-import type { TradeOrder } from "../../../entities/trade-order";
-import type { UserId } from "../../../entities/user";
-import { throwHttpProblem } from "../../../lib/problem-details";
-import { BillLineRepository } from "../../../repositories/BillLineRepository";
-import { BillRepository } from "../../../repositories/BillRepository";
-import { PaymentProviderInstanceRepository } from "../../../repositories/PaymentProviderInstanceRepository";
-import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository";
-import { UserRepository } from "../../../repositories/UserRepository";
-import { getOrderItemSkuName } from "../../trade";
-import type { NormalizedPaymentStatus, PaymentClientAction } from "../model";
-import {
-  createPaymentProviderPort,
-  deriveBillPaymentState,
-  ensureWeChatPayPlatformCertificates,
-  resolveWeChatPayChargeNotifyUrl,
-} from "../services";
-import { applyPaymentSettlementConsequence } from "./payment-settlement-consequence";
-
-const billRepo = new BillRepository();
-const billLineRepo = new BillLineRepository();
-const providerInstanceRepo = new PaymentProviderInstanceRepository();
-const tradeOrderRepo = new TradeOrderRepository();
-const userRepo = new UserRepository();
-
-export type PaymentCheckoutProjection = {
-  billLine: {
-    id: string;
-    billId: string;
-    userId: string;
-    kind: BillLine["kind"];
-    amountFen: number;
-    currency: "CNY";
-    label: string;
-    description: string | null;
-  };
-  bill: {
-    id: string;
-    sourceOrderId: string;
-  };
-  order: {
-    id: string;
-    family: TradeOrder["family"];
-    status: TradeOrder["status"];
-    itemName: string;
-  };
-  eligibility: {
-    payable: boolean;
-    disabledReason: string | null;
-  };
-  payment: PaymentExecutionProjection | null;
-};
-
-export type PaymentExecutionStatus =
-  | "ACTION_REQUIRED"
-  | "PROCESSING"
-  | "SUCCEEDED"
-  | "FAILED"
-  | "CLOSED";
-
-export type PaymentExecutionProjection = {
-  billLineId: string;
-  kind: BillLine["kind"];
-  status: PaymentExecutionStatus;
-  amountFen: number;
-  currency: "CNY";
-  providerInstanceId: string | null;
-  providerStatus: string | null;
-  clientAction: PaymentClientAction | null;
-  attemptCount: number;
-  settledAt: string | null;
-};
-
-const canViewOrder = (order: TradeOrder, userId: string): boolean =>
-  order.createdBy === userId ||
-  order.participants.some((participant) => participant.userId === userId);
-
-const isTerminalUnsettledProviderStatus = (status: NormalizedPaymentStatus): boolean =>
-  status === "FAILED" || status === "CLOSED";
-
-const toExecutionStatus = (status: NormalizedPaymentStatus): PaymentExecutionStatus => {
-  if (status === "SUCCEEDED") return "SUCCEEDED";
-  if (status === "FAILED") return "FAILED";
-  if (status === "CLOSED") return "CLOSED";
-  return "PROCESSING";
-};
-
-async function resolveCheckoutBasis(input: {
-  billLineId: BillLineId;
-  viewerUserId: UserId;
-}): Promise<{
-  line: BillLine;
-  bill: NonNullable<Awaited<ReturnType<BillRepository["findById"]>>>;
-  order: TradeOrder;
-  disabledReason: string | null;
-}> {
-  const line = await billLineRepo.findById(input.billLineId);
-  if (!line) {
-    return throwHttpProblem({ status: 404, detail: "BillLine not found" });
-  }
-  const bill = await billRepo.findById(line.billId as BillId);
-  if (!bill) {
-    return throwHttpProblem({ status: 404, detail: "Bill not found" });
-  }
-  const order = await tradeOrderRepo.findById(bill.sourceOrderId);
-  if (!order) {
-    return throwHttpProblem({ status: 404, detail: "Order not found for BillLine" });
-  }
-  if (!canViewOrder(order, input.viewerUserId)) {
-    return throwHttpProblem({ status: 403, detail: "Payment checkout is not accessible" });
-  }
-  if (line.userId !== input.viewerUserId) {
-    return throwHttpProblem({
-      status: 403,
-      detail: "Users can only pay their own BillLine",
-    });
-  }
-
-  const paymentState = deriveBillPaymentState({ lines: [line] });
-  const lineState = paymentState.lines[0];
-  const disabledReason =
-    bill.status !== "ACTIVE"
-      ? "账单当前不可支付"
-      : order.status !== "OPEN"
-        ? "订单当前不可支付"
-        : line.kind !== "CHARGE"
-          ? "退款账单行不能由用户发起支付"
-          : lineState?.status === "PAID"
-            ? "该账单行已支付"
-            : null;
-
-  return {
-    line,
-    bill,
-    order,
-    disabledReason,
-  };
-}
-
-const toPaymentExecutionProjection = (input: {
-  line: BillLine;
-  status: PaymentExecutionStatus;
-  providerStatus?: string | null;
-  clientAction?: PaymentClientAction | null;
-  providerInstanceId?: string | null;
-}): PaymentExecutionProjection => ({
-  billLineId: input.line.id,
-  kind: input.line.kind,
-  status: input.status,
-  amountFen: input.line.amountFen,
-  currency: input.line.currency,
-  providerInstanceId: input.providerInstanceId ?? input.line.paymentProviderInstanceId ?? null,
-  providerStatus: input.providerStatus ?? null,
-  clientAction: input.clientAction ?? null,
-  attemptCount: input.line.attemptCount,
-  settledAt: input.line.settledAt?.toISOString() ?? null,
-});
-
-const buildCheckoutProjection = (input: {
-  line: BillLine;
-  bill: NonNullable<Awaited<ReturnType<BillRepository["findById"]>>>;
-  order: TradeOrder;
-  payment: PaymentExecutionProjection | null;
-  disabledReason: string | null;
-}): PaymentCheckoutProjection => ({
-  billLine: {
-    id: input.line.id,
-    billId: input.line.billId,
-    userId: input.line.userId,
-    kind: input.line.kind,
-    amountFen: input.line.amountFen,
-    currency: input.line.currency,
-    label: input.line.label,
-    description: input.line.description,
-  },
-  bill: {
-    id: input.bill.id,
-    sourceOrderId: input.bill.sourceOrderId,
-  },
-  order: {
-    id: input.order.id,
-    family: input.order.family,
-    status: input.order.status,
-    itemName: input.order.items[0] ? getOrderItemSkuName(input.order.items[0]) : "订单项目",
-  },
-  eligibility: {
-    payable: input.disabledReason === null,
-    disabledReason: input.disabledReason,
-  },
-  payment: input.payment,
-});
-
-async function resolveProviderForClient(input: {
-  clientId: string;
-}): Promise<PaymentProviderInstance> {
-  const providerInstance = await providerInstanceRepo.findActiveByClientId(input.clientId);
-  if (!providerInstance) {
-    return throwHttpProblem({
-      status: 409,
-      detail: `No active payment provider instance for client ${input.clientId}`,
-    });
-  }
-
-  return ensureWeChatPayPlatformCertificates(providerInstance);
-}
-
-async function loadProviderInstance(
-  providerInstanceId: PaymentProviderInstanceId,
-): Promise<PaymentProviderInstance> {
-  const providerInstance = await providerInstanceRepo.findById(providerInstanceId);
-  if (!providerInstance || providerInstance.status !== "ACTIVE") {
-    return throwHttpProblem({
-      status: 404,
-      detail: "Payment provider instance not found",
-    });
-  }
-
-  return ensureWeChatPayPlatformCertificates(providerInstance);
-}
-
-async function queryChargePaymentForLine(
-  line: BillLine,
-): Promise<PaymentExecutionProjection | null> {
-  if (line.settledAt) {
-    return toPaymentExecutionProjection({
-      line,
-      status: "SUCCEEDED",
-      providerStatus: "SETTLED",
-    });
-  }
-  if (!line.paymentProviderInstanceId) {
-    return null;
-  }
-
-  const providerInstance = await loadProviderInstance(line.paymentProviderInstanceId);
-  const port = createPaymentProviderPort({ providerInstance });
-  const merchantOrderNo = port.deriveChargeMerchantOrderNo({
-    providerInstanceId: providerInstance.id,
-    billLineId: line.id,
-    kind: "CHARGE",
-    attemptCount: line.attemptCount,
-  });
-  const normalized = await port.queryCharge({
-    providerInstanceId: providerInstance.id,
-    merchantOrderNo,
-  });
-
-  if (normalized.status === "SUCCEEDED") {
-    const settledLine =
-      (await billLineRepo.markSettledFromProvider({
-        id: line.id,
-        paymentProviderInstanceId: providerInstance.id,
-        attemptCount: line.attemptCount,
-        settledAt: new Date(),
-      })) ??
-      (await billLineRepo.findById(line.id)) ??
-      line;
-    await applyPaymentSettlementConsequence({ billLineId: settledLine.id });
-    return toPaymentExecutionProjection({
-      line: settledLine,
-      status: "SUCCEEDED",
-      providerStatus: normalized.providerStatus,
-    });
-  }
-
-  if (isTerminalUnsettledProviderStatus(normalized.status)) {
-    const clearedLine =
-      (await billLineRepo.clearProviderExecutionSlot({
-        id: line.id,
-        paymentProviderInstanceId: providerInstance.id,
-        attemptCount: line.attemptCount,
-      })) ?? line;
-    return toPaymentExecutionProjection({
-      line: clearedLine,
-      status: toExecutionStatus(normalized.status),
-      providerStatus: normalized.providerStatus,
-      providerInstanceId: providerInstance.id,
-    });
-  }
-
-  return toPaymentExecutionProjection({
-    line,
-    status: toExecutionStatus(normalized.status),
-    providerStatus: normalized.providerStatus,
-  });
-}
-
-export async function getPaymentCheckout(input: {
-  billLineId: string;
-  viewerUserId: string | null;
-}): Promise<PaymentCheckoutProjection> {
-  if (!input.viewerUserId) {
-    return throwHttpProblem({ status: 401, detail: "Authentication required" });
-  }
-
-  const basis = await resolveCheckoutBasis({
-    billLineId: input.billLineId as BillLineId,
-    viewerUserId: input.viewerUserId as UserId,
-  });
-  const payment = await queryChargePaymentForLine(basis.line);
-  const line = payment ? ((await billLineRepo.findById(basis.line.id)) ?? basis.line) : basis.line;
-
-  return buildCheckoutProjection({
-    line,
-    bill: basis.bill,
-    order: basis.order,
-    payment,
-    disabledReason: basis.disabledReason,
-  });
-}
-
-async function openOrLoadChargeExecution(input: {
-  line: BillLine;
-  providerInstance: PaymentProviderInstance;
-}): Promise<BillLine> {
-  if (input.line.paymentProviderInstanceId) {
-    return input.line;
-  }
-
-  const opened = await billLineRepo.openProviderExecutionSlot({
-    id: input.line.id,
-    paymentProviderInstanceId: input.providerInstance.id,
-  });
-  if (opened) return opened;
-
-  const current = await billLineRepo.findById(input.line.id);
-  if (!current) {
-    return throwHttpProblem({ status: 404, detail: "BillLine not found" });
-  }
-  if (current.settledAt) {
-    return throwHttpProblem({ status: 409, detail: "该账单行已支付" });
-  }
-  if (current.paymentProviderInstanceId) {
-    return current;
-  }
-
-  return throwHttpProblem({
-    status: 409,
-    detail: "Payment execution could not be opened",
-  });
-}
-
-export async function createOrReuseChargeForBillLine(input: {
-  billLineId: string;
-  viewerUserId: string | null;
-  clientId: string;
-}): Promise<PaymentCheckoutProjection> {
-  if (!input.viewerUserId) {
-    return throwHttpProblem({ status: 401, detail: "Authentication required" });
-  }
-
-  const basis = await resolveCheckoutBasis({
-    billLineId: input.billLineId as BillLineId,
-    viewerUserId: input.viewerUserId as UserId,
-  });
-  if (basis.disabledReason) {
-    return throwHttpProblem({ status: 409, detail: basis.disabledReason });
-  }
-
-  const selectedProvider = basis.line.paymentProviderInstanceId
-    ? await loadProviderInstance(basis.line.paymentProviderInstanceId)
-    : await resolveProviderForClient({ clientId: input.clientId });
-  const line = await openOrLoadChargeExecution({
-    line: basis.line,
-    providerInstance: selectedProvider,
-  });
-  if (line.kind !== "CHARGE") {
-    return throwHttpProblem({
-      status: 409,
-      detail: "Only charge BillLine can create charge execution",
-    });
-  }
-  if (line.settledAt) {
-    return throwHttpProblem({ status: 409, detail: "该账单行已支付" });
-  }
-  if (!line.paymentProviderInstanceId) {
-    return throwHttpProblem({
-      status: 409,
-      detail: "Payment provider execution slot is missing",
-    });
-  }
-
-  const providerInstance = await loadProviderInstance(line.paymentProviderInstanceId);
-  const port = createPaymentProviderPort({ providerInstance });
-  const user = await userRepo.findById(input.viewerUserId as UserId);
-  const requiresOpenId = providerInstance.config.chargeMode === "JSAPI";
-  if (requiresOpenId && !user?.openId) {
-    return throwHttpProblem({
-      status: 409,
-      detail: "WeChatPay charge requires a bound WeChat openid",
-    });
-  }
-
-  const expiresAt = new Date(basis.order.timeout.unpaidExpiresAt);
-  if (Number.isNaN(expiresAt.getTime()) || expiresAt <= new Date()) {
-    return throwHttpProblem({
-      status: 409,
-      detail: "Order unpaid window has expired",
-    });
-  }
-
-  const merchantOrderNo = port.deriveChargeMerchantOrderNo({
-    providerInstanceId: providerInstance.id,
-    billLineId: line.id,
-    kind: "CHARGE",
-    attemptCount: line.attemptCount,
-  });
-  const prepay = await port.createChargePrepay({
-    providerInstanceId: providerInstance.id,
-    merchantOrderNo,
-    amountFen: line.amountFen,
-    currency: line.currency,
-    description: line.label,
-    payerOpenId: user?.openId ?? null,
-    notifyUrl: resolveWeChatPayChargeNotifyUrl(providerInstance),
-    expiresAt,
-  });
-
-  return buildCheckoutProjection({
-    line,
-    bill: basis.bill,
-    order: basis.order,
-    payment: toPaymentExecutionProjection({
-      line,
-      status: "ACTION_REQUIRED",
-      providerStatus: prepay.providerStatus,
-      clientAction: prepay.clientAction,
-    }),
-    disabledReason: null,
-  });
-}
-
-export async function syncPaymentForBillLine(input: {
-  billLineId: string;
-  viewerUserId: string | null;
-}): Promise<PaymentExecutionProjection> {
-  if (!input.viewerUserId) {
-    return throwHttpProblem({ status: 401, detail: "Authentication required" });
-  }
-
-  const basis = await resolveCheckoutBasis({
-    billLineId: input.billLineId as BillLineId,
-    viewerUserId: input.viewerUserId as UserId,
-  });
-  const payment = await queryChargePaymentForLine(basis.line);
-  if (payment) return payment;
-
-  return toPaymentExecutionProjection({
-    line: basis.line,
-    status: "CLOSED",
-    providerStatus: "NO_PROVIDER_EXECUTION",
-  });
-}
diff --git a/apps/backend/src/domains/payment/use-cases/payment-contract.ts b/apps/backend/src/domains/payment/use-cases/payment-contract.ts
new file mode 100644
index 000000000..a447b8585
--- /dev/null
+++ b/apps/backend/src/domains/payment/use-cases/payment-contract.ts
@@ -0,0 +1,392 @@
+import type { BillLine, BillLineId } from "../../../entities/bill";
+import type { PaymentProviderInstance, PaymentProviderInstanceId } from "../../../entities/payment";
+import type { UserId } from "../../../entities/user";
+import { resolveBillLineCheckoutBasis } from "../../bill";
+import { throwHttpProblem } from "../../../lib/problem-details";
+import { BillLineRepository } from "../../../repositories/BillLineRepository";
+import { PaymentProviderInstanceRepository } from "../../../repositories/PaymentProviderInstanceRepository";
+import { UserRepository } from "../../../repositories/UserRepository";
+import type { NormalizedPaymentStatus, PaymentClientAction } from "../model";
+import {
+  createPaymentProviderPort,
+  decodePaymentTxId,
+  encodePaymentTxId,
+  ensureWeChatPayPlatformCertificates,
+  resolveWeChatPayChargeNotifyUrl,
+} from "../services";
+import { openOrLoadChargeExecution, queryChargePaymentForLineAndReload } from "./payment-execution";
+import { applyPaymentSettlementConsequence } from "./payment-settlement-consequence";
+
+const providerRepo = new PaymentProviderInstanceRepository();
+const billLineRepo = new BillLineRepository();
+const userRepo = new UserRepository();
+
+export type PaymentProviderOptionProjection = {
+  paymentProviderInstanceId: string;
+  label: string;
+  providerType: PaymentProviderInstance["providerType"];
+  channel: PaymentProviderInstance["config"]["chargeMode"];
+  disabled: boolean;
+  disabledReason: string | null;
+};
+
+export type PaymentProviderCatalogProjection = {
+  providers: PaymentProviderOptionProjection[];
+};
+
+export type PaymentTxProjection = {
+  paymentTxId: string;
+  status: "ACTION_REQUIRED" | "PROCESSING" | "SUCCEEDED" | "FAILED" | "CLOSED";
+  billLineId: string;
+  billId: string;
+  orderId: string;
+  kind: BillLine["kind"];
+  amountFen: number;
+  currency: "CNY";
+  attemptCount: number;
+  providerStatus: string | null;
+  settledAt: string | null;
+  provider: {
+    paymentProviderInstanceId: string;
+    label: string;
+    providerType: PaymentProviderInstance["providerType"];
+    channel: PaymentProviderInstance["config"]["chargeMode"];
+  };
+};
+
+export type CreatePaymentChargeProjection = {
+  paymentTx: PaymentTxProjection;
+  clientAction: PaymentClientAction;
+};
+
+const toPaymentTxStatus = (status: NormalizedPaymentStatus): PaymentTxProjection["status"] => {
+  if (status === "SUCCEEDED") return "SUCCEEDED";
+  if (status === "FAILED") return "FAILED";
+  if (status === "CLOSED") return "CLOSED";
+  return "PROCESSING";
+};
+
+const buildProviderSummary = (
+  providerInstance: PaymentProviderInstance,
+): PaymentTxProjection["provider"] => ({
+  paymentProviderInstanceId: providerInstance.id,
+  label: providerInstance.displayName,
+  providerType: providerInstance.providerType,
+  channel: providerInstance.config.chargeMode,
+});
+
+const buildProviderOption = (
+  providerInstance: PaymentProviderInstance,
+): PaymentProviderOptionProjection => ({
+  paymentProviderInstanceId: providerInstance.id,
+  label: providerInstance.displayName,
+  providerType: providerInstance.providerType,
+  channel: providerInstance.config.chargeMode,
+  disabled: false,
+  disabledReason: null,
+});
+
+const buildPaymentTxProjection = (input: {
+  paymentTxId: string;
+  line: BillLine;
+  orderId: string;
+  providerInstance: PaymentProviderInstance;
+  status: PaymentTxProjection["status"];
+  providerStatus: string | null;
+  attemptCount: number;
+  settledAt?: string | null;
+}): PaymentTxProjection => ({
+  paymentTxId: input.paymentTxId,
+  status: input.status,
+  billLineId: input.line.id,
+  billId: input.line.billId,
+  orderId: input.orderId,
+  kind: input.line.kind,
+  amountFen: input.line.amountFen,
+  currency: input.line.currency,
+  attemptCount: input.attemptCount,
+  providerStatus: input.providerStatus,
+  settledAt:
+    input.settledAt !== undefined ? input.settledAt : (input.line.settledAt?.toISOString() ?? null),
+  provider: buildProviderSummary(input.providerInstance),
+});
+
+const loadChargeProviderForClient = async (input: {
+  paymentProviderInstanceId: PaymentProviderInstanceId;
+  clientId: string;
+}): Promise<PaymentProviderInstance> => {
+  const providerInstance = await providerRepo.findById(input.paymentProviderInstanceId);
+  if (
+    !providerInstance ||
+    providerInstance.status !== "ACTIVE" ||
+    providerInstance.clientId !== input.clientId
+  ) {
+    return throwHttpProblem({
+      status: 404,
+      detail: "Payment provider instance not found",
+    });
+  }
+
+  return ensureWeChatPayPlatformCertificates(providerInstance);
+};
+
+const loadProviderInstanceForQuery = async (
+  paymentProviderInstanceId: PaymentProviderInstanceId,
+): Promise<PaymentProviderInstance> => {
+  const providerInstance = await providerRepo.findById(paymentProviderInstanceId);
+  if (!providerInstance) {
+    return throwHttpProblem({
+      status: 404,
+      detail: "Payment provider instance not found",
+    });
+  }
+
+  return ensureWeChatPayPlatformCertificates(providerInstance);
+};
+
+const queryChargePaymentTx = async (input: {
+  paymentTxId: string;
+  paymentProviderInstance: PaymentProviderInstance;
+  line: BillLine;
+  orderId: string;
+  attemptCount: number;
+}): Promise<PaymentTxProjection> => {
+  if (
+    input.line.settledAt &&
+    input.line.paymentProviderInstanceId === input.paymentProviderInstance.id &&
+    input.line.attemptCount === input.attemptCount
+  ) {
+    return buildPaymentTxProjection({
+      paymentTxId: input.paymentTxId,
+      line: input.line,
+      orderId: input.orderId,
+      providerInstance: input.paymentProviderInstance,
+      status: "SUCCEEDED",
+      providerStatus: "SETTLED",
+      attemptCount: input.attemptCount,
+      settledAt: input.line.settledAt?.toISOString() ?? null,
+    });
+  }
+
+  const port = createPaymentProviderPort({
+    providerInstance: input.paymentProviderInstance,
+  });
+  const merchantOrderNo = port.deriveChargeMerchantOrderNo({
+    providerInstanceId: input.paymentProviderInstance.id,
+    billLineId: input.line.id,
+    kind: "CHARGE",
+    attemptCount: input.attemptCount,
+  });
+  const normalized = await port.queryCharge({
+    providerInstanceId: input.paymentProviderInstance.id,
+    merchantOrderNo,
+  });
+
+  if (normalized.status === "SUCCEEDED") {
+    const settledLine =
+      (await billLineRepo.markSettledFromProvider({
+        id: input.line.id as BillLineId,
+        paymentProviderInstanceId: input.paymentProviderInstance.id,
+        attemptCount: input.attemptCount,
+        settledAt: new Date(),
+      })) ??
+      (await billLineRepo.findById(input.line.id as BillLineId)) ??
+      input.line;
+    await applyPaymentSettlementConsequence({ billLineId: settledLine.id });
+    return buildPaymentTxProjection({
+      paymentTxId: input.paymentTxId,
+      line: settledLine,
+      orderId: input.orderId,
+      providerInstance: input.paymentProviderInstance,
+      status: "SUCCEEDED",
+      providerStatus: normalized.providerStatus,
+      attemptCount: input.attemptCount,
+      settledAt: settledLine.settledAt?.toISOString() ?? null,
+    });
+  }
+
+  let line = input.line;
+  if (
+    (normalized.status === "FAILED" || normalized.status === "CLOSED") &&
+    input.line.paymentProviderInstanceId === input.paymentProviderInstance.id &&
+    input.line.attemptCount === input.attemptCount &&
+    !input.line.settledAt
+  ) {
+    line =
+      (await billLineRepo.clearProviderExecutionSlot({
+        id: input.line.id as BillLineId,
+        paymentProviderInstanceId: input.paymentProviderInstance.id,
+        attemptCount: input.attemptCount,
+      })) ?? input.line;
+  }
+
+  return buildPaymentTxProjection({
+    paymentTxId: input.paymentTxId,
+    line,
+    orderId: input.orderId,
+    providerInstance: input.paymentProviderInstance,
+    status: toPaymentTxStatus(normalized.status),
+    providerStatus: normalized.providerStatus,
+    attemptCount: input.attemptCount,
+    settledAt: null,
+  });
+};
+
+export async function listPaymentProviders(input: {
+  viewerUserId: string | null;
+  clientId: string;
+}): Promise<PaymentProviderCatalogProjection> {
+  if (!input.viewerUserId) {
+    return throwHttpProblem({ status: 401, detail: "Authentication required" });
+  }
+
+  const providers = await providerRepo.listActiveByClientId(input.clientId);
+  return {
+    providers: providers.map(buildProviderOption),
+  };
+}
+
+export async function createPaymentCharge(input: {
+  paymentProviderInstanceId: string;
+  billLineId: string;
+  viewerUserId: string | null;
+  clientId: string;
+}): Promise<CreatePaymentChargeProjection> {
+  if (!input.viewerUserId) {
+    return throwHttpProblem({ status: 401, detail: "Authentication required" });
+  }
+
+  const basis = await resolveBillLineCheckoutBasis({
+    billLineId: input.billLineId as BillLineId,
+    viewerUserId: input.viewerUserId as UserId,
+  });
+  if (basis.disabledReason) {
+    return throwHttpProblem({ status: 409, detail: basis.disabledReason });
+  }
+
+  const requestedProvider = await loadChargeProviderForClient({
+    paymentProviderInstanceId: input.paymentProviderInstanceId as PaymentProviderInstanceId,
+    clientId: input.clientId,
+  });
+  const syncedLine = basis.line.paymentProviderInstanceId
+    ? await queryChargePaymentForLineAndReload(basis.line)
+    : basis.line;
+  if (syncedLine.settledAt) {
+    return throwHttpProblem({ status: 409, detail: "该账单行已支付" });
+  }
+  if (
+    syncedLine.paymentProviderInstanceId &&
+    syncedLine.paymentProviderInstanceId !== requestedProvider.id
+  ) {
+    return throwHttpProblem({
+      status: 409,
+      detail: "An unfinished payment is already bound to another provider",
+      code: "PAYMENT_PROVIDER_CONFLICT",
+    });
+  }
+
+  const line = await openOrLoadChargeExecution({
+    line: syncedLine,
+    providerInstance: requestedProvider,
+  });
+  if (line.kind !== "CHARGE") {
+    return throwHttpProblem({
+      status: 409,
+      detail: "Only charge BillLine can create charge execution",
+    });
+  }
+  if (line.settledAt || !line.paymentProviderInstanceId) {
+    return throwHttpProblem({
+      status: 409,
+      detail: "BillLine is no longer chargeable",
+    });
+  }
+
+  const user = await userRepo.findById(input.viewerUserId as UserId);
+  if (requestedProvider.config.chargeMode === "JSAPI" && !user?.openId) {
+    return throwHttpProblem({
+      status: 409,
+      detail: "WeChatPay charge requires a bound WeChat openid",
+    });
+  }
+
+  const expiresAt = new Date(basis.order.timeout.unpaidExpiresAt);
+  if (Number.isNaN(expiresAt.getTime()) || expiresAt <= new Date()) {
+    return throwHttpProblem({
+      status: 409,
+      detail: "Order unpaid window has expired",
+    });
+  }
+
+  const port = createPaymentProviderPort({ providerInstance: requestedProvider });
+  const merchantOrderNo = port.deriveChargeMerchantOrderNo({
+    providerInstanceId: requestedProvider.id,
+    billLineId: line.id,
+    kind: "CHARGE",
+    attemptCount: line.attemptCount,
+  });
+  const prepay = await port.createChargePrepay({
+    providerInstanceId: requestedProvider.id,
+    merchantOrderNo,
+    amountFen: line.amountFen,
+    currency: line.currency,
+    description: line.label,
+    payerOpenId: user?.openId ?? null,
+    notifyUrl: resolveWeChatPayChargeNotifyUrl(requestedProvider),
+    expiresAt,
+  });
+
+  const paymentTxId = encodePaymentTxId({
+    kind: "CHARGE",
+    billLineId: line.id,
+    paymentProviderInstanceId: requestedProvider.id,
+    attemptCount: line.attemptCount,
+  });
+
+  return {
+    paymentTx: buildPaymentTxProjection({
+      paymentTxId,
+      line,
+      orderId: basis.order.id,
+      providerInstance: requestedProvider,
+      status: "ACTION_REQUIRED",
+      providerStatus: prepay.providerStatus,
+      attemptCount: line.attemptCount,
+      settledAt: null,
+    }),
+    clientAction: prepay.clientAction,
+  };
+}
+
+export async function getPaymentTx(input: {
+  paymentTxId: string;
+  viewerUserId: string | null;
+}): Promise<PaymentTxProjection> {
+  if (!input.viewerUserId) {
+    return throwHttpProblem({ status: 401, detail: "Authentication required" });
+  }
+
+  const reference = decodePaymentTxId(input.paymentTxId);
+  if (reference.kind !== "CHARGE") {
+    return throwHttpProblem({
+      status: 404,
+      detail: "PaymentTx not found",
+    });
+  }
+
+  const basis = await resolveBillLineCheckoutBasis({
+    billLineId: reference.billLineId as BillLineId,
+    viewerUserId: input.viewerUserId as UserId,
+  });
+  const providerInstance = await loadProviderInstanceForQuery(
+    reference.paymentProviderInstanceId as PaymentProviderInstanceId,
+  );
+
+  return queryChargePaymentTx({
+    paymentTxId: input.paymentTxId,
+    paymentProviderInstance: providerInstance,
+    line: basis.line,
+    orderId: basis.order.id,
+    attemptCount: reference.attemptCount,
+  });
+}
diff --git a/apps/backend/src/domains/payment/use-cases/payment-execution.ts b/apps/backend/src/domains/payment/use-cases/payment-execution.ts
new file mode 100644
index 000000000..05c330196
--- /dev/null
+++ b/apps/backend/src/domains/payment/use-cases/payment-execution.ts
@@ -0,0 +1,128 @@
+import type { BillLine } from "../../../entities/bill";
+import type { PaymentProviderInstance, PaymentProviderInstanceId } from "../../../entities/payment";
+import { throwHttpProblem } from "../../../lib/problem-details";
+import { BillLineRepository } from "../../../repositories/BillLineRepository";
+import { PaymentProviderInstanceRepository } from "../../../repositories/PaymentProviderInstanceRepository";
+import {
+  createPaymentProviderPort,
+  ensureWeChatPayPlatformCertificates,
+} from "../services";
+import { applyPaymentSettlementConsequence } from "./payment-settlement-consequence";
+
+const billLineRepo = new BillLineRepository();
+const providerInstanceRepo = new PaymentProviderInstanceRepository();
+
+async function loadProviderInstanceForQuery(
+  providerInstanceId: PaymentProviderInstanceId,
+): Promise<PaymentProviderInstance> {
+  const providerInstance = await providerInstanceRepo.findById(providerInstanceId);
+  if (!providerInstance) {
+    return throwHttpProblem({
+      status: 404,
+      detail: "Payment provider instance not found",
+    });
+  }
+
+  return ensureWeChatPayPlatformCertificates(providerInstance);
+}
+
+async function reconcileChargePaymentExecution(line: BillLine): Promise<BillLine> {
+  if (line.settledAt || !line.paymentProviderInstanceId) {
+    return line;
+  }
+
+  const providerInstance = await loadProviderInstanceForQuery(
+    line.paymentProviderInstanceId as PaymentProviderInstanceId,
+  );
+  const port = createPaymentProviderPort({ providerInstance });
+  const merchantOrderNo = port.deriveChargeMerchantOrderNo({
+    providerInstanceId: providerInstance.id,
+    billLineId: line.id,
+    kind: "CHARGE",
+    attemptCount: line.attemptCount,
+  });
+  const normalized = await port.queryCharge({
+    providerInstanceId: providerInstance.id,
+    merchantOrderNo,
+  });
+
+  if (normalized.status === "SUCCEEDED") {
+    const settledLine =
+      (await billLineRepo.markSettledFromProvider({
+        id: line.id,
+        paymentProviderInstanceId: providerInstance.id,
+        attemptCount: line.attemptCount,
+        settledAt: new Date(),
+      })) ??
+      (await billLineRepo.findById(line.id)) ??
+      line;
+    await applyPaymentSettlementConsequence({ billLineId: settledLine.id });
+    return settledLine;
+  }
+
+  if (normalized.status === "FAILED" || normalized.status === "CLOSED") {
+    return (
+      (await billLineRepo.clearProviderExecutionSlot({
+        id: line.id,
+        paymentProviderInstanceId: providerInstance.id,
+        attemptCount: line.attemptCount,
+      })) ?? line
+    );
+  }
+
+  return line;
+}
+
+export async function openOrLoadChargeExecution(input: {
+  line: BillLine;
+  providerInstance: PaymentProviderInstance;
+}): Promise<BillLine> {
+  if (!input.line.paymentProviderInstanceId) {
+    const opened = await billLineRepo.openProviderExecutionSlot({
+      id: input.line.id,
+      paymentProviderInstanceId: input.providerInstance.id,
+    });
+    if (opened) return opened;
+
+    const current = await billLineRepo.findById(input.line.id);
+    if (!current) {
+      return throwHttpProblem({ status: 404, detail: "BillLine not found" });
+    }
+    if (current.settledAt) {
+      return throwHttpProblem({ status: 409, detail: "该账单行已支付" });
+    }
+    if (
+      current.paymentProviderInstanceId &&
+      current.paymentProviderInstanceId !== input.providerInstance.id
+    ) {
+      return throwHttpProblem({
+        status: 409,
+        detail: "BillLine is already bound to another payment provider execution",
+        code: "PAYMENT_PROVIDER_CONFLICT",
+      });
+    }
+    if (current.paymentProviderInstanceId) {
+      return current;
+    }
+
+    return throwHttpProblem({
+      status: 409,
+      detail: "Payment execution could not be opened",
+    });
+  }
+
+  if (input.line.paymentProviderInstanceId !== input.providerInstance.id) {
+    return throwHttpProblem({
+      status: 409,
+      detail: "BillLine is already bound to another payment provider execution",
+      code: "PAYMENT_PROVIDER_CONFLICT",
+    });
+  }
+
+  return input.line;
+}
+
+export const queryChargePaymentForLineAndReload = async (line: BillLine): Promise<BillLine> => {
+  const reconciled = await reconcileChargePaymentExecution(line);
+  return (await billLineRepo.findById(reconciled.id)) ?? reconciled;
+};
diff --git a/apps/backend/src/domains/trade/use-cases/apply-bill-settlement-to-order.ts b/apps/backend/src/domains/trade/use-cases/apply-bill-settlement-to-order.ts
index 0af7bee3e..e805ba344 100644
--- a/apps/backend/src/domains/trade/use-cases/apply-bill-settlement-to-order.ts
+++ b/apps/backend/src/domains/trade/use-cases/apply-bill-settlement-to-order.ts
@@ -3,8 +3,8 @@ import type { BillId } from "../../../entities/bill";
 import { BillLineRepository } from "../../../repositories/BillLineRepository";
 import { BillRepository } from "../../../repositories/BillRepository";
 import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository";
+import { deriveBillPaymentState } from "../../bill";
 import { applyOrderPrepaidSettlementFulfillmentConsequence } from "../../fulfillment";
-import { deriveBillPaymentState } from "../../payment/services";
 import { confirmRideHailingProviderFeeAfterPayment } from "./ride-hailing-ordering-flow";
 
 const billRepo = new BillRepository();
diff --git a/apps/backend/src/domains/trade/use-cases/create-order.ts b/apps/backend/src/domains/trade/use-cases/create-order.ts
index 21427e26d..3185fc227 100644
--- a/apps/backend/src/domains/trade/use-cases/create-order.ts
+++ b/apps/backend/src/domains/trade/use-cases/create-order.ts
@@ -43,6 +43,7 @@ import type {
   OrderParticipantSnapshot,
   OrderPricingSnapshot,
   OrderStatus,
+  OrderTimeout,
   RentalRegistrant,
   RideHailingChoiceSetCandidateSnapshot,
   RideHailingChoiceSetResolutionSnapshot,
@@ -66,7 +67,7 @@ const skuCancellationPolicyRepo = new SkuCancellationPolicyRepository();
 const providerRepo = new RideHailingProviderInstanceRepository();
 
 const DEFAULT_UNPAID_WINDOW_MINUTES = 30;
-const DEFAULT_INITIATING_WINDOW_MINUTES = 30;
+const NON_EXPIRING_UNPAID_EXPIRES_AT = "9999-12-31T23:59:59.999Z";
 
 export type OrderItemInput = QuoteBoundOrderItemInput;
 
@@ -552,7 +553,7 @@ async function buildRideChoiceSetItemSnapshot(input: {
   };
 }
 
-function buildTimeout(minutes: number) {
+function buildTimeout(minutes: number): OrderTimeout {
   const now = new Date();
   return {
     unpaidExpiresAt: new Date(now.getTime() + minutes * 60 * 1000).toISOString(),
@@ -560,6 +561,13 @@ function buildTimeout(minutes: number) {
   };
 }
 
+function buildNonExpiringTimeout(): OrderTimeout {
+  return {
+    unpaidExpiresAt: NON_EXPIRING_UNPAID_EXPIRES_AT,
+    defaultWindowMinutes: 0,
+  };
+}
+
 async function createBaseOrder(input: {
   executor: RepositoryExecutor;
   offer: Offer;
@@ -567,7 +575,7 @@ async function createBaseOrder(input: {
   createdBy: string;
   participants: OrderParticipantSnapshot[];
   items: OrderItemSnapshot[];
-  unpaidWindowMinutes: number;
+  timeout: OrderTimeout;
 }) {
   const participantError = validateOrderParticipants({
     participants: input.participants,
@@ -589,7 +597,7 @@ async function createBaseOrder(input: {
     participants: input.participants,
     splitRuleSnapshot,
     items: input.items,
-    timeout: buildTimeout(input.unpaidWindowMinutes),
+    timeout: input.timeout,
   });
 
   return {
@@ -635,7 +643,7 @@ async function createRentalOrderInExecutor(
     createdBy: input.createdBy,
     participants: input.participants,
     items: input.items,
-    unpaidWindowMinutes: DEFAULT_UNPAID_WINDOW_MINUTES,
+    timeout: buildTimeout(DEFAULT_UNPAID_WINDOW_MINUTES),
   });
 
   const rentalOrderRepo = new RentalOrderRepository(executor);
@@ -701,7 +709,7 @@ async function createRideHailingOrderFoundationInExecutor(
     createdBy: input.createdBy,
     participants: input.participants,
     items: input.items,
-    unpaidWindowMinutes: DEFAULT_INITIATING_WINDOW_MINUTES,
+    timeout: buildNonExpiringTimeout(),
   });
 
   const rideRepo = new RideHailingOrderRepository(executor);
@@ -749,7 +757,7 @@ async function createRentalOrderBranch(input: {
       createdBy: input.createdBy,
       participants,
       items: [item],
-      unpaidWindowMinutes: DEFAULT_UNPAID_WINDOW_MINUTES,
+      timeout: buildTimeout(DEFAULT_UNPAID_WINDOW_MINUTES),
     });
 
     await attachPrIfPresent({
@@ -826,7 +834,7 @@ async function createRideHailingOrderBranch(input: {
         createdBy: input.createdBy,
         participants,
         items: [unresolvedItem],
-        unpaidWindowMinutes: DEFAULT_INITIATING_WINDOW_MINUTES,
+        timeout: buildNonExpiringTimeout(),
       });
 
       await attachPrIfPresent({
diff --git a/apps/backend/src/domains/trade/use-cases/finalize-rental-order-termination.ts b/apps/backend/src/domains/trade/use-cases/finalize-rental-order-termination.ts
index a0d29d17f..0e61595eb 100644
--- a/apps/backend/src/domains/trade/use-cases/finalize-rental-order-termination.ts
+++ b/apps/backend/src/domains/trade/use-cases/finalize-rental-order-termination.ts
@@ -5,11 +5,8 @@ import { BillLineRepository } from "../../../repositories/BillLineRepository";
 import { BillRepository } from "../../../repositories/BillRepository";
 import { RentalOrderRepository } from "../../../repositories/RentalOrderRepository";
 import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository";
-import { reconcileBillToTargetAmount } from "../../bill";
-import {
-  createRefundExecutionForRefundLine,
-  deriveBillPaymentState,
-} from "../../payment";
+import { deriveBillPaymentState, reconcileBillToTargetAmount } from "../../bill";
+import { createRefundExecutionForRefundLine } from "../../payment";
 import type { FulfillmentTerminationDecision, OrderTerminationAttempt } from "../model";
 import {
   approveTerminationAttempt,
diff --git a/apps/backend/src/domains/trade/use-cases/rental-ordering-flow.ts b/apps/backend/src/domains/trade/use-cases/rental-ordering-flow.ts
index 280bf5e45..b75b35a94 100644
--- a/apps/backend/src/domains/trade/use-cases/rental-ordering-flow.ts
+++ b/apps/backend/src/domains/trade/use-cases/rental-ordering-flow.ts
@@ -4,9 +4,9 @@ import { BillLineRepository } from "../../../repositories/BillLineRepository";
 import { BillRepository } from "../../../repositories/BillRepository";
 import { RentalOrderRepository } from "../../../repositories/RentalOrderRepository";
 import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository";
+import { deriveBillPaymentState } from "../../bill";
 import { requestRentalCancellationHandling } from "../../fulfillment";
 import { confirmRentalBooking } from "../../fulfillment/use-cases/confirm-rental-booking";
-import { deriveBillPaymentState } from "../../payment";
 import {
   canRequestOrderTermination,
   resolveRentalTerminationPolicy,
diff --git a/apps/backend/src/entities/payment.ts b/apps/backend/src/entities/payment.ts
index c91cdd34a..303243eb9 100644
--- a/apps/backend/src/entities/payment.ts
+++ b/apps/backend/src/entities/payment.ts
@@ -1,13 +1,5 @@
-import {
-  index,
-  jsonb,
-  pgTable,
-  text,
-  timestamp,
-  uniqueIndex,
-  uuid,
-} from "drizzle-orm/pg-core";
 import { sql } from "drizzle-orm";
+import { index, jsonb, pgTable, text, timestamp, uniqueIndex, uuid } from "drizzle-orm/pg-core";
 import type {
   PaymentProviderInstanceConfig,
   PaymentProviderInstanceStatus,
@@ -21,16 +13,10 @@ export type PaymentProviderInstanceId = string & {
 export const paymentProviderInstances = pgTable(
   "payment_provider_instances",
   {
-    id: uuid("id")
-      .$type<PaymentProviderInstanceId>()
-      .primaryKey()
-      .default(sql`gen_random_uuid()`),
+    id: uuid("id").$type<PaymentProviderInstanceId>().primaryKey().default(sql`gen_random_uuid()`),
     providerType: text("provider_type").$type<PaymentProviderType>().notNull(),
     instanceKey: text("instance_key").notNull(),
-    status: text("status")
-      .$type<PaymentProviderInstanceStatus>()
-      .notNull()
-      .default("ACTIVE"),
+    status: text("status").$type<PaymentProviderInstanceStatus>().notNull().default("ACTIVE"),
     displayName: text("display_name").notNull(),
     clientId: text("client_id").notNull(),
     config: jsonb("config").$type<PaymentProviderInstanceConfig>().notNull(),
@@ -42,18 +28,12 @@ export const paymentProviderInstances = pgTable(
       table.providerType,
       table.status,
     ),
-    providerInstanceUnique: uniqueIndex(
-      "payment_provider_instances_type_key_unique",
-    ).on(table.providerType, table.instanceKey),
-    activeClientUnique: uniqueIndex(
-      "payment_provider_instances_active_client_unique",
-    )
-      .on(table.clientId)
-      .where(sql`${table.status} = 'ACTIVE'`),
+    providerInstanceUnique: uniqueIndex("payment_provider_instances_type_key_unique").on(
+      table.providerType,
+      table.instanceKey,
+    ),
   }),
 );
 
-export type PaymentProviderInstance =
-  typeof paymentProviderInstances.$inferSelect;
-export type NewPaymentProviderInstance =
-  typeof paymentProviderInstances.$inferInsert;
+export type PaymentProviderInstance = typeof paymentProviderInstances.$inferSelect;
+export type NewPaymentProviderInstance = typeof paymentProviderInstances.$inferInsert;
diff --git a/apps/backend/src/index.ts b/apps/backend/src/index.ts
index da18cfea6..97dfcb8d1 100644
--- a/apps/backend/src/index.ts
+++ b/apps/backend/src/index.ts
@@ -33,6 +33,7 @@ import { adminCommerceManagementRoute } from "./controllers/admin-commerce-manag
 import { adminPaymentManagementRoute } from "./controllers/admin-payment-management.controller";
 import { adminRideHailingManagementRoute } from "./controllers/admin-ride-hailing-management.controller";
 import { commerceRoute } from "./controllers/commerce.controller";
+import { paymentRoute } from "./controllers/payment.controller";
 import { placementRoute } from "./controllers/placement.controller";
 import { studySprintRoute } from "./controllers/study-sprint.controller";
 import { paymentProviderRoute } from "./controllers/payment-provider.controller";
@@ -207,6 +208,7 @@ export const routes = app
   .route("/api/commerce", commerceRoute)
   .route("/api/placements", placementRoute)
   .route("/api/study-sprint", studySprintRoute)
+  .route("/api/payment", paymentRoute)
   .route("/api/payment", paymentProviderRoute)
   .route("/api/ride-hailing", rideHailingProviderRoute)
   .route("/api/v1/service_provider", legacyRideHailingProviderRoute)
diff --git a/apps/backend/src/repositories/PaymentProviderInstanceRepository.ts b/apps/backend/src/repositories/PaymentProviderInstanceRepository.ts
index 055ad71ce..363c75016 100644
--- a/apps/backend/src/repositories/PaymentProviderInstanceRepository.ts
+++ b/apps/backend/src/repositories/PaymentProviderInstanceRepository.ts
@@ -1,26 +1,23 @@
 import { and, asc, eq } from "drizzle-orm";
-import { db } from "../lib/db";
-import {
-  paymentProviderInstances,
-  type NewPaymentProviderInstance,
-  type PaymentProviderInstance,
-  type PaymentProviderInstanceId,
-} from "../entities/payment";
 import type {
   PaymentProviderInstanceConfig,
   PaymentProviderInstanceStatus,
   PaymentProviderType,
 } from "../domains/payment/model";
+import {
+  type NewPaymentProviderInstance,
+  type PaymentProviderInstance,
+  type PaymentProviderInstanceId,
+  paymentProviderInstances,
+} from "../entities/payment";
+import { db } from "../lib/db";
 import type { RepositoryExecutor } from "./_executor";
 
 export class PaymentProviderInstanceRepository {
   constructor(private readonly executor: RepositoryExecutor = db) {}
 
   async create(data: NewPaymentProviderInstance): Promise<PaymentProviderInstance> {
-    const result = await this.executor
-      .insert(paymentProviderInstances)
-      .values(data)
-      .returning();
+    const result = await this.executor.insert(paymentProviderInstances).values(data).returning();
     return result[0]!;
   }
 
@@ -36,9 +33,7 @@ export class PaymentProviderInstanceRepository {
       );
   }
 
-  async findById(
-    id: PaymentProviderInstanceId,
-  ): Promise<PaymentProviderInstance | null> {
+  async findById(id: PaymentProviderInstanceId): Promise<PaymentProviderInstance | null> {
     const result = await this.executor
       .select()
       .from(paymentProviderInstances)
@@ -64,6 +59,11 @@ export class PaymentProviderInstanceRepository {
   }
 
   async findActiveByClientId(clientId: string): Promise<PaymentProviderInstance | null> {
+    const providers = await this.listActiveByClientId(clientId);
+    return providers[0] ?? null;
+  }
+
+  async listActiveByClientId(clientId: string): Promise<PaymentProviderInstance[]> {
     const result = await this.executor
       .select()
       .from(paymentProviderInstances)
@@ -74,7 +74,7 @@ export class PaymentProviderInstanceRepository {
         ),
       )
       .orderBy(asc(paymentProviderInstances.createdAt));
-    return result[0] ?? null;
+    return result;
   }
 
   async updateRegistration(input: {
diff --git a/apps/backend/tests/commerce/rental-order-persistence.scenario.test.ts b/apps/backend/tests/commerce/rental-order-persistence.scenario.test.ts
index 18866a000..ca12e8f7b 100644
--- a/apps/backend/tests/commerce/rental-order-persistence.scenario.test.ts
+++ b/apps/backend/tests/commerce/rental-order-persistence.scenario.test.ts
@@ -234,6 +234,13 @@ scenario("commerce_rental_order_persists_base_and_typed_rows", async (ctx) => {
   assert.equal(baseOrder.family, "RENTAL");
   assert.equal(baseOrder.offerId, offer.id);
   assert.equal(baseOrder.createdBy, creator.user.id);
+  assert.equal(baseOrder.timeout.defaultWindowMinutes, 30);
+  const unpaidExpiresAtMs = new Date(baseOrder.timeout.unpaidExpiresAt).getTime();
+  const unpaidWindowMs = unpaidExpiresAtMs - baseOrder.createdAt.getTime();
+  assert.ok(
+    unpaidWindowMs >= 29 * 60 * 1000 && unpaidWindowMs <= 31 * 60 * 1000,
+    "Rental base order should keep a 30-minute unpaid window",
+  );
   assert.equal(hasOwnKey(baseOrder, "selectedZoneCodes"), false);
   assert.equal(hasOwnKey(baseOrder, "serviceStartAt"), false);
   assert.equal(hasOwnKey(baseOrder, "serviceEndAt"), false);
diff --git a/apps/backend/tests/payment/payment-provider-ssot.scenario.test.ts b/apps/backend/tests/payment/payment-provider-ssot.scenario.test.ts
index 94d7f0529..c16df969c 100644
--- a/apps/backend/tests/payment/payment-provider-ssot.scenario.test.ts
+++ b/apps/backend/tests/payment/payment-provider-ssot.scenario.test.ts
@@ -18,22 +18,34 @@ type PaymentClientActionProjection = {
   package?: string;
 };
 
-type PaymentCheckoutProjection = {
-  payment: {
+type PaymentProviderCatalogProjection = {
+  providers: Array<{
+    paymentProviderInstanceId: string;
+    label: string;
+  }>;
+};
+
+type PaymentChargeProjection = {
+  paymentTx: {
+    paymentTxId: string;
     status: string;
     providerStatus: string | null;
-    clientAction: PaymentClientActionProjection | null;
     attemptCount: number;
-  } | null;
+  };
+  clientAction: PaymentClientActionProjection;
 };
 
-type PaymentExecutionProjection = {
+type PaymentTxProjection = {
   status: string;
   providerStatus: string | null;
   attemptCount: number;
   settledAt: string | null;
 };
 
+type ProblemDetailsResponse = {
+  code?: string;
+};
+
 const billLineRepo = new BillLineRepository();
 
 async function givenRentalBillLineForPayment(input: { userId: string }): Promise<string> {
@@ -146,10 +158,10 @@ async function givenRentalBillLineForPayment(input: { userId: string }): Promise
   return chargeLine.id;
 }
 
-const readPrepayId = (projection: PaymentCheckoutProjection): string => {
-  const clientAction = projection.payment?.clientAction;
+const readPrepayId = (projection: PaymentChargeProjection): string => {
+  const clientAction = projection.clientAction;
   assert.equal(clientAction?.type, "WECHAT_BRIDGE");
-  assert.equal(projection.payment?.status, "ACTION_REQUIRED");
+  assert.equal(projection.paymentTx.status, "ACTION_REQUIRED");
   const packageValue = clientAction?.package ?? "";
   assert.ok(
     packageValue.startsWith("prepay_id="),
@@ -158,124 +170,198 @@ const readPrepayId = (projection: PaymentCheckoutProjection): string => {
   return packageValue.slice("prepay_id=".length);
 };
 
-scenario("payment_provider_ssot_charge_retry_and_settlement_uses_provider_query", async (ctx) => {
-  const fakeWeChatPay = await startFakeWeChatPayServer();
-  try {
-    const payer = await givenUser("provider-ssot-payer");
-    await bindScenarioWeChatOpenId({
-      user: payer,
-      openId: "fake-openid-provider-ssot-payer",
-    });
-    await registerPaymentProviderInstance({
-      providerType: "WECHAT_PAY",
-      instanceKey: `provider-ssot-${randomUUID()}`,
-      displayName: "Provider SSOT Fake WeChatPay",
-      clientId: "web",
-      config: {
-        adapterMode: "WECHAT_PAY_API_V3",
-        appId: fakeWeChatPay.fixture.appId,
-        mchId: fakeWeChatPay.fixture.mchId,
-        chargeMode: "JSAPI",
-        endpointBaseUrl: fakeWeChatPay.origin,
-        apiV3Key: fakeWeChatPay.fixture.apiV3Key,
-        merchantCertificate: fakeWeChatPay.fixture.merchantCertificate,
-        platformCertificates: null,
-      },
-    });
-    const billLineId = await givenRentalBillLineForPayment({
-      userId: payer.user.id,
-    });
-
-    const firstCharge = await expectJsonResponse<PaymentCheckoutProjection>(
-      await requestJson(`/api/commerce/bill-lines/${billLineId}/charges`, {
-        method: "POST",
-        token: payer.token,
-        headers: {
-          "x-client-id": "web",
+scenario(
+  "payment_provider_contract_supports_multi_provider_conflict_and_transient_payment_tx_polling",
+  async (ctx) => {
+    const fakeWeChatPay = await startFakeWeChatPayServer();
+    try {
+      const payer = await givenUser("provider-ssot-payer");
+      await bindScenarioWeChatOpenId({
+        user: payer,
+        openId: "fake-openid-provider-ssot-payer",
+      });
+      const providerOne = await registerPaymentProviderInstance({
+        providerType: "WECHAT_PAY",
+        instanceKey: `provider-ssot-one-${randomUUID()}`,
+        displayName: "Provider SSOT Fake WeChatPay One",
+        clientId: "web",
+        config: {
+          adapterMode: "WECHAT_PAY_API_V3",
+          appId: fakeWeChatPay.fixture.appId,
+          mchId: fakeWeChatPay.fixture.mchId,
+          chargeMode: "JSAPI",
+          endpointBaseUrl: fakeWeChatPay.origin,
+          apiV3Key: fakeWeChatPay.fixture.apiV3Key,
+          merchantCertificate: fakeWeChatPay.fixture.merchantCertificate,
+          platformCertificates: null,
         },
-      }),
-      200,
-    );
-    const firstPrepayId = readPrepayId(firstCharge);
-    const firstTransaction = fakeWeChatPay.state
-      .snapshot()
-      .transactions.find((transaction) => transaction.prepayId === firstPrepayId);
-    assert.ok(firstTransaction, "Fake WeChatPay should create first transaction");
-    assert.equal(firstTransaction.outTradeNo.length, 32);
-    assert.equal(firstTransaction.amount.total, 1200);
-    ctx.record("firstOutTradeNo", firstTransaction.outTradeNo);
-
-    await fetch(
-      `${fakeWeChatPay.origin}/__fake_wechatpay/transactions/${firstTransaction.outTradeNo}/fail`,
-      {
-        method: "POST",
-        headers: {
-          "content-type": "application/json",
+      });
+      const providerTwo = await registerPaymentProviderInstance({
+        providerType: "WECHAT_PAY",
+        instanceKey: `provider-ssot-two-${randomUUID()}`,
+        displayName: "Provider SSOT Fake WeChatPay Two",
+        clientId: "web",
+        config: {
+          adapterMode: "WECHAT_PAY_API_V3",
+          appId: fakeWeChatPay.fixture.appId,
+          mchId: fakeWeChatPay.fixture.mchId,
+          chargeMode: "JSAPI",
+          endpointBaseUrl: fakeWeChatPay.origin,
+          apiV3Key: fakeWeChatPay.fixture.apiV3Key,
+          merchantCertificate: fakeWeChatPay.fixture.merchantCertificate,
+          platformCertificates: null,
         },
-        body: JSON.stringify({ reason: "scenario retry" }),
-      },
-    );
-    const failedSync = await expectJsonResponse<PaymentExecutionProjection>(
-      await requestJson(`/api/commerce/bill-lines/${billLineId}/payment/sync`, {
-        method: "POST",
-        token: payer.token,
-      }),
-      200,
-    );
-    assert.equal(failedSync.status, "FAILED");
-    assert.equal(failedSync.attemptCount, 1);
+      });
+      const billLineId = await givenRentalBillLineForPayment({
+        userId: payer.user.id,
+      });
+
+      const providerCatalog = await expectJsonResponse<PaymentProviderCatalogProjection>(
+        await requestJson("/api/payment/providers", {
+          method: "GET",
+          token: payer.token,
+          headers: {
+            "x-client-id": "web",
+          },
+        }),
+        200,
+      );
+      assert.equal(providerCatalog.providers.length, 2);
+      assert.deepEqual(
+        providerCatalog.providers.map((provider) => provider.paymentProviderInstanceId).sort(),
+        [providerOne.providerInstanceId, providerTwo.providerInstanceId].sort(),
+      );
 
-    const afterFailure = await billLineRepo.findById(billLineId);
-    assert.ok(afterFailure, "BillLine should still exist after failed attempt");
-    assert.equal(afterFailure.paymentProviderInstanceId, null);
-    assert.equal(afterFailure.attemptCount, 1);
-    assert.equal(afterFailure.settledAt, null);
+      const firstCharge = await expectJsonResponse<PaymentChargeProjection>(
+        await requestJson(
+          `/api/payment/${providerOne.providerInstanceId}/charge?bill-line=${billLineId}`,
+          {
+            method: "POST",
+            token: payer.token,
+            headers: {
+              "x-client-id": "web",
+            },
+          },
+        ),
+        200,
+      );
+      const firstPaymentTxId = firstCharge.paymentTx.paymentTxId;
+      const firstPrepayId = readPrepayId(firstCharge);
+      const firstTransaction = fakeWeChatPay.state
+        .snapshot()
+        .transactions.find((transaction) => transaction.prepayId === firstPrepayId);
+      assert.ok(firstTransaction, "Fake WeChatPay should create first transaction");
+      assert.equal(firstTransaction.outTradeNo.length, 32);
+      assert.equal(firstTransaction.amount.total, 1200);
+      ctx.record("firstOutTradeNo", firstTransaction.outTradeNo);
 
-    const secondCharge = await expectJsonResponse<PaymentCheckoutProjection>(
-      await requestJson(`/api/commerce/bill-lines/${billLineId}/charges`, {
-        method: "POST",
-        token: payer.token,
-        headers: {
-          "x-client-id": "web",
+      const conflict = await expectJsonResponse<ProblemDetailsResponse>(
+        await requestJson(
+          `/api/payment/${providerTwo.providerInstanceId}/charge?bill-line=${billLineId}`,
+          {
+            method: "POST",
+            token: payer.token,
+            headers: {
+              "x-client-id": "web",
+            },
+          },
+        ),
+        409,
+      );
+      assert.equal(conflict.code, "PAYMENT_PROVIDER_CONFLICT");
+
+      await fetch(
+        `${fakeWeChatPay.origin}/__fake_wechatpay/transactions/${firstTransaction.outTradeNo}/fail`,
+        {
+          method: "POST",
+          headers: {
+            "content-type": "application/json",
+          },
+          body: JSON.stringify({ reason: "scenario retry" }),
         },
-      }),
-      200,
-    );
-    const secondPrepayId = readPrepayId(secondCharge);
-    const secondTransaction = fakeWeChatPay.state
-      .snapshot()
-      .transactions.find((transaction) => transaction.prepayId === secondPrepayId);
-    assert.ok(secondTransaction, "Fake WeChatPay should create second transaction");
-    assert.notEqual(secondTransaction.outTradeNo, firstTransaction.outTradeNo);
-    assert.equal(secondTransaction.outTradeNo.length, 32);
-    ctx.record("secondOutTradeNo", secondTransaction.outTradeNo);
+      );
+      const failedTx = await expectJsonResponse<PaymentTxProjection>(
+        await requestJson(`/api/payment/${firstPaymentTxId}`, {
+          method: "GET",
+          token: payer.token,
+        }),
+        200,
+      );
+      assert.equal(failedTx.status, "FAILED");
+      assert.equal(failedTx.attemptCount, 1);
+      assert.equal(failedTx.settledAt, null);
+
+      const afterFailure = await billLineRepo.findById(billLineId);
+      assert.ok(afterFailure, "BillLine should still exist after failed attempt");
+      assert.equal(afterFailure.paymentProviderInstanceId, null);
+      assert.equal(afterFailure.attemptCount, 1);
+      assert.equal(afterFailure.settledAt, null);
+
+      const secondCharge = await expectJsonResponse<PaymentChargeProjection>(
+        await requestJson(
+          `/api/payment/${providerTwo.providerInstanceId}/charge?bill-line=${billLineId}`,
+          {
+            method: "POST",
+            token: payer.token,
+            headers: {
+              "x-client-id": "web",
+            },
+          },
+        ),
+        200,
+      );
+      const secondPaymentTxId = secondCharge.paymentTx.paymentTxId;
+      const secondPrepayId = readPrepayId(secondCharge);
+      const secondTransaction = fakeWeChatPay.state
+        .snapshot()
+        .transactions.find((transaction) => transaction.prepayId === secondPrepayId);
+      assert.ok(secondTransaction, "Fake WeChatPay should create second transaction");
+      assert.notEqual(secondTransaction.outTradeNo, firstTransaction.outTradeNo);
+      assert.equal(secondTransaction.outTradeNo.length, 32);
+      ctx.record("secondOutTradeNo", secondTransaction.outTradeNo);
+
+      fakeWeChatPay.state.markTransaction({
+        outTradeNo: secondTransaction.outTradeNo,
+        tradeState: "SUCCESS",
+      });
+      const settledTx = await expectJsonResponse<PaymentTxProjection>(
+        await requestJson(`/api/payment/${secondPaymentTxId}`, {
+          method: "GET",
+          token: payer.token,
+        }),
+        200,
+      );
+      assert.equal(settledTx.status, "SUCCEEDED");
+      assert.equal(settledTx.attemptCount, 2);
+      assert.ok(settledTx.settledAt, "PaymentTx poll should project settledAt");
 
-    fakeWeChatPay.state.markTransaction({
-      outTradeNo: secondTransaction.outTradeNo,
-      tradeState: "SUCCESS",
-    });
-    const settledSync = await expectJsonResponse<PaymentExecutionProjection>(
-      await requestJson(`/api/commerce/bill-lines/${billLineId}/payment/sync`, {
-        method: "POST",
-        token: payer.token,
-      }),
-      200,
-    );
-    assert.equal(settledSync.status, "SUCCEEDED");
-    assert.equal(settledSync.attemptCount, 2);
-    assert.ok(settledSync.settledAt, "Sync should project settledAt");
+      const historicalFailedTx = await expectJsonResponse<PaymentTxProjection>(
+        await requestJson(`/api/payment/${firstPaymentTxId}`, {
+          method: "GET",
+          token: payer.token,
+        }),
+        200,
+      );
+      assert.equal(historicalFailedTx.status, "FAILED");
+      assert.equal(historicalFailedTx.attemptCount, 1);
+      assert.equal(
+        historicalFailedTx.settledAt,
+        null,
+        "Historical failed tx should not inherit later settledAt",
+      );
 
-    const settledLine = await billLineRepo.findById(billLineId);
-    assert.ok(settledLine, "BillLine should exist after settlement");
-    assert.ok(settledLine.paymentProviderInstanceId);
-    assert.equal(settledLine.attemptCount, 2);
-    assert.ok(settledLine.settledAt);
+      const settledLine = await billLineRepo.findById(billLineId);
+      assert.ok(settledLine, "BillLine should exist after settlement");
+      assert.equal(settledLine.paymentProviderInstanceId, providerTwo.providerInstanceId);
+      assert.equal(settledLine.attemptCount, 2);
+      assert.ok(settledLine.settledAt);
 
-    const txTableRows = await db.execute<{ payment_txs: string | null }>(
-      sql`select to_regclass('public.payment_txs')::text as payment_txs`,
-    );
-    assert.equal(txTableRows[0]?.payment_txs ?? null, null);
-  } finally {
-    await fakeWeChatPay.close();
-  }
-});
+      const txTableRows = await db.execute<{ payment_txs: string | null }>(
+        sql`select to_regclass('public.payment_txs')::text as payment_txs`,
+      );
+      assert.equal(txTableRows[0]?.payment_txs ?? null, null);
+    } finally {
+      await fakeWeChatPay.close();
+    }
+  },
+);
diff --git a/apps/backend/tests/ride-hailing/ride-hailing-order-foundation.scenario.test.ts b/apps/backend/tests/ride-hailing/ride-hailing-order-foundation.scenario.test.ts
index e1d7d443d..293be65bf 100644
--- a/apps/backend/tests/ride-hailing/ride-hailing-order-foundation.scenario.test.ts
+++ b/apps/backend/tests/ride-hailing/ride-hailing-order-foundation.scenario.test.ts
@@ -249,6 +249,8 @@ scenario("ride_hailing_order_foundation_persists_base_typed_and_provider_binding
   assert.equal(baseOrder.family, "RIDE_HAILING");
   assert.equal(baseOrder.offerId, offer.id);
   assert.equal(baseOrder.status, "INITIATING");
+  assert.equal(baseOrder.timeout.defaultWindowMinutes, 0);
+  assert.equal(baseOrder.timeout.unpaidExpiresAt, "9999-12-31T23:59:59.999Z");
   assert.equal(baseOrder.items[0]?.kind, "CHOICE_SET");
   const choiceSetItem = baseOrder.items[0]?.kind === "CHOICE_SET" ? baseOrder.items[0] : null;
   assert.ok(choiceSetItem, "RideHailing base item should be a choice set");
diff --git a/apps/frontend/.env.example b/apps/frontend/.env.example
index 10042a37f..cbc922e02 100644
--- a/apps/frontend/.env.example
+++ b/apps/frontend/.env.example
@@ -12,6 +12,8 @@ VITE_BACKEND_HOST=localhost
 VITE_BACKEND_PORT=4002
 VITE_BACKEND_PROXY_TARGET=
 VITE_USE_MOCK=false
+VITE_FAKE_WECHATPAY_BRIDGE_ENABLED=false
+VITE_FAKE_WECHATPAY_ORIGIN=https://wechatpay.partner-up.localhost
 VITE_WECHAT_ABILITY_MOCKING_ENABLED=false
 VITE_TENCENT_LBS_JS_KEY=
 VITE_TENCENT_LBS_WEB_SERVICE_KEY=
diff --git a/apps/frontend/src/app/create-app.ts b/apps/frontend/src/app/create-app.ts
index 0ba15713d..a2c019339 100644
--- a/apps/frontend/src/app/create-app.ts
+++ b/apps/frontend/src/app/create-app.ts
@@ -1,20 +1,20 @@
-import { createApp } from "vue";
 import { VueQueryPlugin } from "@tanstack/vue-query";
+import { createHead } from "@unhead/vue/client";
 import { createPinia } from "pinia";
 import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
-import { createHead } from "@unhead/vue/client";
+import { createApp } from "vue";
 import AppRoot from "@/app/AppRoot.vue";
 import { router } from "@/app/router";
 import { i18n } from "@/locales/i18n";
+import { installFakeWeChatPayBridge } from "@/shared/wechat/fake-wechatpay-bridge";
 
 export const createPartnerUpApp = () => {
-  if (
-    typeof window !== "undefined" &&
-    "scrollRestoration" in window.history
-  ) {
+  if (typeof window !== "undefined" && "scrollRestoration" in window.history) {
     window.history.scrollRestoration = "manual";
   }
 
+  installFakeWeChatPayBridge();
+
   const app = createApp(AppRoot);
   const head = createHead();
   const pinia = createPinia();
diff --git a/apps/frontend/src/app/router.ts b/apps/frontend/src/app/router.ts
index 263827e55..621c05ea5 100644
--- a/apps/frontend/src/app/router.ts
+++ b/apps/frontend/src/app/router.ts
@@ -160,7 +160,7 @@ const routes: RouteRecordRaw[] = [
     },
   },
   {
-    path: "/bill-lines/:billLineId/checkout",
+    path: "/payment/checkout",
     name: "payment-checkout",
     component: PaymentCheckoutPage,
     meta: {
diff --git a/apps/frontend/src/domains/commerce/queries/useCommerce.ts b/apps/frontend/src/domains/commerce/queries/useCommerce.ts
index e0cfc73df..8ab1b136c 100644
--- a/apps/frontend/src/domains/commerce/queries/useCommerce.ts
+++ b/apps/frontend/src/domains/commerce/queries/useCommerce.ts
@@ -34,8 +34,8 @@ export type CommerceOrderDetailResponse = InferResponseType<
 
 export type BillDetailResponse = InferResponseType<CommerceApi["bills"][":billId"]["$get"]>;
 
-export type PaymentCheckoutResponse = InferResponseType<
-  CommerceApi["bill-lines"][":billLineId"]["checkout"]["$get"]
+export type BillLineCheckoutTargetResponse = InferResponseType<
+  CommerceApi["bill-lines"][":billLineId"]["$get"]
 >;
 
 const ACTIVE_RIDE_HAILING_DETAIL_POLLING_MS = 2_000;
@@ -285,15 +285,15 @@ export const useBillDetail = (billId: Ref<string | null>) =>
     refetchOnMount: "always",
   });
 
-export const usePaymentCheckout = (billLineId: Ref<string | null>) =>
-  useQuery<PaymentCheckoutResponse>({
-    queryKey: computed(() => queryKeys.commerce.paymentCheckout(billLineId.value)),
+export const useBillLineCheckoutTarget = (billLineId: Ref<string | null>) =>
+  useQuery<BillLineCheckoutTargetResponse>({
+    queryKey: computed(() => queryKeys.commerce.billLineCheckoutTarget(billLineId.value)),
     queryFn: async () => {
       if (billLineId.value === null) {
         throw new Error("Missing bill line id");
       }
 
-      const response = await client.api.commerce["bill-lines"][":billLineId"].checkout.$get(
+      const response = await client.api.commerce["bill-lines"][":billLineId"].$get(
         {
           param: {
             billLineId: billLineId.value,
@@ -305,69 +305,13 @@ export const usePaymentCheckout = (billLineId: Ref<string | null>) =>
           },
         },
       );
-      return readJsonOrThrow<PaymentCheckoutResponse>(response, "Failed to load checkout");
-    },
-    enabled: () => billLineId.value !== null,
-  });
-
-export const useCreateChargeForBillLine = () => {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: async (billLineId: string) => {
-      const response = await client.api.commerce["bill-lines"][":billLineId"].charges.$post(
-        {
-          param: { billLineId },
-        },
-        {
-          init: {
-            credentials: "include",
-          },
-        },
-      );
-      return readJsonOrThrow<
-        InferResponseType<CommerceApi["bill-lines"][":billLineId"]["charges"]["$post"]>
-      >(response, "Failed to create charge");
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({
-        queryKey: ["commerce"],
-      });
-    },
-  });
-};
-
-export const useSyncBillLinePayment = () => {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: async (billLineId: string) => {
-      const response = await client.api.commerce["bill-lines"][":billLineId"].payment.sync.$post(
-        {
-          param: {
-            billLineId,
-          },
-        },
-        {
-          init: {
-            credentials: "include",
-          },
-        },
+      return readJsonOrThrow<BillLineCheckoutTargetResponse>(
+        response,
+        "Failed to load bill line checkout target",
       );
-      return readJsonOrThrow<
-        InferResponseType<CommerceApi["bill-lines"][":billLineId"]["payment"]["sync"]["$post"]>
-      >(response, "Failed to sync payment");
-    },
-    onSuccess: (_, billLineId) => {
-      queryClient.invalidateQueries({
-        queryKey: queryKeys.commerce.billLinePayment(billLineId),
-      });
-      queryClient.invalidateQueries({
-        queryKey: ["commerce"],
-      });
     },
+    enabled: () => billLineId.value !== null,
   });
-};
 
 export const useCancelRentalOrder = () => {
   const queryClient = useQueryClient();
diff --git a/apps/frontend/src/domains/commerce/routing/payment-checkout-route.ts b/apps/frontend/src/domains/commerce/routing/payment-checkout-route.ts
new file mode 100644
index 000000000..bef98e9d5
--- /dev/null
+++ b/apps/frontend/src/domains/commerce/routing/payment-checkout-route.ts
@@ -0,0 +1,26 @@
+import type { LocationQuery, LocationQueryValue, RouteLocationRaw } from "vue-router";
+
+const PAYMENT_CHECKOUT_PATH = "/payment/checkout";
+const PAYMENT_CHECKOUT_BILL_LINE_QUERY_KEY = "bill-line";
+
+const readSingleQueryValue = (
+  value: LocationQueryValue | LocationQueryValue[] | undefined,
+): string | null => {
+  const normalizedValue = Array.isArray(value) ? value[0] : value;
+  if (typeof normalizedValue !== "string" || normalizedValue.length === 0) {
+    return null;
+  }
+  return normalizedValue;
+};
+
+export const buildPaymentCheckoutRouteLocation = (input: {
+  billLineId: string;
+}): RouteLocationRaw => ({
+  path: PAYMENT_CHECKOUT_PATH,
+  query: {
+    [PAYMENT_CHECKOUT_BILL_LINE_QUERY_KEY]: input.billLineId,
+  },
+});
+
+export const readPaymentCheckoutBillLineId = (query: LocationQuery): string | null =>
+  readSingleQueryValue(query[PAYMENT_CHECKOUT_BILL_LINE_QUERY_KEY]);
diff --git a/apps/frontend/src/domains/commerce/ui/bill-detail/BillLineCard.vue b/apps/frontend/src/domains/commerce/ui/bill-detail/BillLineCard.vue
index f64f04622..b465d78a7 100644
--- a/apps/frontend/src/domains/commerce/ui/bill-detail/BillLineCard.vue
+++ b/apps/frontend/src/domains/commerce/ui/bill-detail/BillLineCard.vue
@@ -82,7 +82,7 @@ const emit = defineEmits<{
   select: [];
 }>();
 
-const isSelectable = computed(() => props.line.payableByViewer && Boolean(props.line.checkoutHref));
+const isSelectable = computed(() => props.line.payableByViewer);
 
 const signedAmountFen = computed(() =>
   props.line.kind === "REFUND" ? -props.line.amountFen : props.line.amountFen,
diff --git a/apps/frontend/src/domains/commerce/ui/ordering/OrderingPageShell.vue b/apps/frontend/src/domains/commerce/ui/ordering/OrderingPageShell.vue
index 95d5acbbb..776314996 100644
--- a/apps/frontend/src/domains/commerce/ui/ordering/OrderingPageShell.vue
+++ b/apps/frontend/src/domains/commerce/ui/ordering/OrderingPageShell.vue
@@ -5,12 +5,13 @@
     class="ordering-page-shell"
     :data-testid="dataTestid"
   >
-    <template #pageHeader>
+    <template #header>
       <PuHeader
         :title="title"
         :subtitle="subtitle"
         title-as="h1"
         size="sm"
+        class="ordering-page-shell__header"
       >
         <template #leading>
           <PuButton
@@ -69,6 +70,10 @@ const { handleBack } = useFallbackBack(() => props.backFallbackTo);
   --pu-page-max-width: 44rem;
   --pu-page-padding-bottom: 0;
   --pu-page-scaffold-region-gap: 0;
+
+  :deep(.ordering-page-shell__header) {
+    padding: var(--sys-spacing-small) var(--sys-spacing-small);
+  }
 }
 
 .ordering-page-shell :deep(.pu-page-scaffold__footer) {
diff --git a/apps/frontend/src/domains/payment/queries/usePayment.ts b/apps/frontend/src/domains/payment/queries/usePayment.ts
new file mode 100644
index 000000000..67512a7fa
--- /dev/null
+++ b/apps/frontend/src/domains/payment/queries/usePayment.ts
@@ -0,0 +1,91 @@
+import { useMutation, useQuery } from "@tanstack/vue-query";
+import type { InferResponseType } from "hono";
+import { computed, type Ref } from "vue";
+import { client } from "@/lib/rpc";
+import { buildApiError, readApiErrorPayload, resolveApiErrorMessage } from "@/shared/api/error";
+import { queryKeys } from "@/shared/api/query-keys";
+
+type PaymentApi = typeof client.api.payment;
+
+export type PaymentProviderCatalogResponse = InferResponseType<PaymentApi["providers"]["$get"]>;
+export type PaymentTxResponse = InferResponseType<PaymentApi[":paymentTxId"]["$get"]>;
+export type CreatePaymentChargeResponse = InferResponseType<
+  PaymentApi[":paymentProviderInstanceId"]["charge"]["$post"]
+>;
+
+const readJsonOrThrow = async <T>(response: Response, fallback: string): Promise<T> => {
+  if (!response.ok) {
+    const payload = await readApiErrorPayload(response);
+    throw buildApiError(resolveApiErrorMessage(payload, fallback), payload);
+  }
+  return (await response.json()) as T;
+};
+
+export const fetchPaymentTx = async (paymentTxId: string): Promise<PaymentTxResponse> => {
+  const response = await client.api.payment[":paymentTxId"].$get(
+    {
+      param: {
+        paymentTxId,
+      },
+    },
+    {
+      init: {
+        credentials: "include",
+      },
+    },
+  );
+  return readJsonOrThrow<PaymentTxResponse>(response, "Failed to load payment status");
+};
+
+export const usePaymentProviders = () =>
+  useQuery<PaymentProviderCatalogResponse>({
+    queryKey: queryKeys.payment.providers(),
+    queryFn: async () => {
+      const response = await client.api.payment.providers.$get(
+        {},
+        {
+          init: {
+            credentials: "include",
+          },
+        },
+      );
+      return readJsonOrThrow<PaymentProviderCatalogResponse>(
+        response,
+        "Failed to load payment providers",
+      );
+    },
+  });
+
+export const usePaymentTx = (paymentTxId: Ref<string | null>) =>
+  useQuery<PaymentTxResponse>({
+    queryKey: computed(() => queryKeys.payment.tx(paymentTxId.value)),
+    queryFn: async () => {
+      if (paymentTxId.value === null) {
+        throw new Error("Missing payment tx id");
+      }
+      return fetchPaymentTx(paymentTxId.value);
+    },
+    enabled: () => paymentTxId.value !== null,
+  });
+
+export const useCreatePaymentCharge = () =>
+  useMutation({
+    mutationFn: async (input: { paymentProviderInstanceId: string; billLineId: string }) => {
+      const response = await client.api.payment[":paymentProviderInstanceId"].charge.$post(
+        {
+          param: {
+            paymentProviderInstanceId: input.paymentProviderInstanceId,
+          },
+          query: {
+            "bill-line": input.billLineId,
+          },
+        },
+        {
+          init: {
+            credentials: "include",
+          },
+        },
+      );
+      return readJsonOrThrow<CreatePaymentChargeResponse>(response, "Failed to create payment");
+    },
+  });
diff --git a/apps/frontend/src/domains/payment/ui/primitives/PaymentCheckoutHero.vue b/apps/frontend/src/domains/payment/ui/primitives/PaymentCheckoutHero.vue
new file mode 100644
index 000000000..9fa277761
--- /dev/null
+++ b/apps/frontend/src/domains/payment/ui/primitives/PaymentCheckoutHero.vue
@@ -0,0 +1,80 @@
+<template>
+  <PuCard
+    as="section"
+    class="payment-checkout-hero"
+    variant="soft"
+    tone="neutral"
+    padding="sm"
+    gap="xs"
+    data-testid="payment-checkout.hero"
+  >
+    <div class="payment-checkout-hero__top-row">
+      <strong class="payment-checkout-hero__amount" data-testid="payment-checkout.amount">
+        {{ amountLabel }}
+      </strong>
+      <PuTag
+        :text="statusTag.label"
+        :tone="statusTag.tone"
+        variant="soft"
+        shape="pill"
+        size="sm"
+        data-testid="payment-checkout.status"
+      />
+    </div>
+
+    <strong class="payment-checkout-hero__title">
+      {{ title }}
+    </strong>
+
+    <p class="payment-checkout-hero__description">
+      {{ description }}
+    </p>
+  </PuCard>
+</template>
+
+<script setup lang="ts">
+import { PuCard, PuTag } from "@partner-up-dev/design-web";
+import type { BillLineSettlementTagDisplay } from "@/domains/commerce/model/bill-display";
+
+defineProps<{
+  amountLabel: string;
+  title: string;
+  description: string;
+  statusTag: BillLineSettlementTagDisplay;
+}>();
+</script>
+
+<style scoped lang="scss">
+.payment-checkout-hero {
+  width: 100%;
+  min-width: 0;
+  border-radius: var(--sys-radius-small);
+}
+
+.payment-checkout-hero__top-row {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sys-spacing-small);
+}
+
+.payment-checkout-hero__amount {
+  @include mx.pu-font(title);
+  color: var(--sys-color-on-surface);
+  white-space: nowrap;
+}
+
+.payment-checkout-hero__title {
+  @include mx.pu-font(section);
+  color: var(--sys-color-on-surface);
+  overflow-wrap: anywhere;
+}
+
+.payment-checkout-hero__description {
+  @include mx.pu-font(caption);
+  margin: 0;
+  color: var(--sys-color-on-surface-variant);
+  overflow-wrap: anywhere;
+}
+</style>
diff --git a/apps/frontend/src/domains/payment/ui/surfaces/PaymentCheckoutFlow.vue b/apps/frontend/src/domains/payment/ui/surfaces/PaymentCheckoutFlow.vue
new file mode 100644
index 000000000..35e839a3f
--- /dev/null
+++ b/apps/frontend/src/domains/payment/ui/surfaces/PaymentCheckoutFlow.vue
@@ -0,0 +1,672 @@
+<template>
+  <PuPageScaffold
+    viewport="screen"
+    class="payment-checkout-page"
+    data-testid="payment-checkout.page"
+  >
+    <template #pageHeader>
+      <PuHeader
+        title="支付"
+        title-as="h1"
+      >
+        <template #leading>
+          <PuButton
+            tone="neutral"
+            variant="ghost"
+            size="sm"
+            aria-label="返回上一页"
+            @click="handleBack"
+          >
+            <template #leading>
+              <span class="i-mdi-arrow-left" aria-hidden="true"></span>
+            </template>
+          </PuButton>
+        </template>
+      </PuHeader>
+    </template>
+
+    <div class="payment-checkout-page__body">
+      <PuInlineNotice
+        v-if="props.billLineId === null"
+        tone="error"
+        title="支付入口无效"
+        message="缺少账单行编号。"
+      />
+
+      <PuInlineNotice
+        v-else-if="targetQuery.isError.value"
+        tone="error"
+        title="无法加载支付信息"
+        :message="targetErrorMessage"
+      />
+
+      <PuLoadingState
+        v-else-if="targetQuery.isPending.value"
+        title="正在加载支付信息"
+        message="请稍候。"
+        variant="soft"
+        surface-level="section"
+      />
+
+      <div v-else-if="target" class="payment-checkout-page__content">
+        <PaymentCheckoutHero
+          :amount-label="amountLabel"
+          :title="target.line.label"
+          :description="lineDescription"
+          :status-tag="statusTag"
+        />
+
+        <section class="payment-checkout-page__section" data-testid="payment-checkout.providers">
+          <div class="payment-checkout-page__section-header">
+            <h2 class="payment-checkout-page__section-title">支付方式</h2>
+          </div>
+
+          <PuInlineNotice
+            v-if="errorNoticeMessage"
+            class="payment-checkout-page__notice"
+            tone="error"
+            title="支付暂时不可用"
+            :message="errorNoticeMessage"
+            data-testid="payment-checkout.notice"
+          />
+
+          <PuInlineNotice
+            v-if="providersQuery.isError.value"
+            tone="error"
+            title="无法加载支付方式"
+            :message="providersErrorMessage"
+          />
+
+          <PuInlineNotice
+            v-else-if="!target.eligibility.payable && target.eligibility.disabledReason"
+            tone="warning"
+            title="当前不可支付"
+            :message="target.eligibility.disabledReason"
+          />
+
+          <PuLoadingState
+            v-else-if="providersQuery.isPending.value"
+            title="正在加载支付方式"
+            compact
+            variant="plain"
+            surface-level="plain"
+            align="start"
+          />
+
+          <PuInlineNotice
+            v-else-if="providers.length === 0"
+            tone="warning"
+            title="暂无可用支付方式"
+            message="请稍后再试。"
+          />
+
+          <div v-else class="payment-checkout-page__provider-list">
+            <PuCell
+              v-for="provider in providers"
+              :key="provider.paymentProviderInstanceId"
+              as="button"
+              type="button"
+              padding="md"
+              class="payment-checkout-page__provider-cell"
+              :class="{
+                'is-selected': selectedProviderId === provider.paymentProviderInstanceId,
+                'is-disabled': providerSelection.isDisabled(provider.paymentProviderInstanceId),
+              }"
+              :title="provider.label"
+              :disabled="providerSelection.isDisabled(provider.paymentProviderInstanceId)"
+              :aria-disabled="
+                providerSelection.isDisabled(provider.paymentProviderInstanceId) ? 'true' : 'false'
+              "
+              data-testid="payment-checkout.provider-option"
+              @click="providerSelection.select(provider.paymentProviderInstanceId)"
+            >
+              <template #suffix>
+                <PuRadio
+                  :model-value="selectedProviderId ?? undefined"
+                  :value="provider.paymentProviderInstanceId"
+                  :disabled="providerSelection.isDisabled(provider.paymentProviderInstanceId)"
+                  name="payment-provider"
+                  aria-label="选择支付方式"
+                />
+              </template>
+            </PuCell>
+          </div>
+        </section>
+      </div>
+    </div>
+
+    <template #footer>
+      <div v-if="showsFooter" class="payment-checkout-page__footer">
+        <PuButton
+          shape="rect"
+          tone="primary"
+          variant="solid"
+          size="lg"
+          block
+          :disabled="payDisabled"
+          :loading="createPaymentChargeMutation.isPending.value"
+          data-testid="payment-checkout.pay"
+          @click="handlePay"
+        >
+          {{ payButtonLabel }}
+        </PuButton>
+      </div>
+    </template>
+
+    <PuDialog
+      :open="isProgressDialogOpen"
+      title="正在确认支付"
+      aria-label="正在确认支付"
+      :show-close="false"
+      :show-cancel="false"
+      :show-confirm="false"
+      :close-on-overlay="false"
+      :close-on-escape="false"
+      tone="info"
+    >
+      <div class="payment-checkout-page__progress-dialog">
+        <PuLoadingState
+          label="正在确认支付"
+          message="请稍候，不要重复发起支付。"
+          align="start"
+          surface-level="plain"
+          variant="plain"
+        />
+      </div>
+    </PuDialog>
+
+    <PuDialog
+      :open="dialogState.open"
+      :title="dialogState.title"
+      :description="dialogState.description"
+      :confirm-text="dialogState.confirmText"
+      :show-cancel="false"
+      :show-confirm="true"
+      tone="info"
+      @close="closeDialog"
+      @confirm="closeDialog"
+    />
+  </PuPageScaffold>
+</template>
+
+<script setup lang="ts">
+import {
+  PuButton,
+  PuCell,
+  PuDialog,
+  PuHeader,
+  PuInlineNotice,
+  PuLoadingState,
+  PuPageScaffold,
+  PuRadio,
+  usePuSelect,
+} from "@partner-up-dev/design-web";
+import { useQueryClient } from "@tanstack/vue-query";
+import { computed, onScopeDispose, ref, toRef, watch } from "vue";
+import { useRouter } from "vue-router";
+import {
+  formatCurrencyAmount,
+  resolveBillLineSettlementTag,
+} from "@/domains/commerce/model/bill-display";
+import { useBillLineCheckoutTarget } from "@/domains/commerce/queries/useCommerce";
+import {
+  fetchPaymentTx,
+  type PaymentTxResponse,
+  useCreatePaymentCharge,
+  usePaymentProviders,
+} from "@/domains/payment/queries/usePayment";
+import PaymentCheckoutHero from "@/domains/payment/ui/primitives/PaymentCheckoutHero.vue";
+import {
+  launchPaymentClientAction,
+  type PaymentClientActionResult,
+} from "@/domains/payment/use-cases/launch-payment-client-action";
+import { queryKeys } from "@/shared/api/query-keys";
+import { useFallbackBack } from "@/shared/routing/useFallbackBack";
+
+type DialogState = {
+  open: boolean;
+  title: string;
+  description: string;
+  confirmText: string;
+};
+type PaymentAttemptPhase = "IDLE" | "WAITING_FOR_CLIENT" | "RECONCILING" | "SUCCEEDED";
+
+const PAYMENT_TX_POLLING_MS = 1_500;
+const PAYMENT_SUCCESS_RETURN_DELAY_MS = 1_200;
+
+const props = defineProps<{
+  billLineId: string | null;
+}>();
+
+const router = useRouter();
+const queryClient = useQueryClient();
+const billLineIdRef = toRef(props, "billLineId");
+
+const targetQuery = useBillLineCheckoutTarget(billLineIdRef);
+const providersQuery = usePaymentProviders();
+const createPaymentChargeMutation = useCreatePaymentCharge();
+
+const paymentTx = ref<PaymentTxResponse | null>(null);
+const attemptPhase = ref<PaymentAttemptPhase>("IDLE");
+const isReconcilingPaymentTx = ref(false);
+const lastClientActionResult = ref<PaymentClientActionResult | null>(null);
+const errorNoticeMessage = ref<string | null>(null);
+const handledTerminalKey = ref<string | null>(null);
+const dialogState = ref<DialogState>({
+  open: false,
+  title: "",
+  description: "",
+  confirmText: "我知道了",
+});
+
+let paymentTxPollingTimer: ReturnType<typeof setTimeout> | null = null;
+let successReturnTimer: ReturnType<typeof setTimeout> | null = null;
+
+const clearPaymentTxPollingTimer = (): void => {
+  if (paymentTxPollingTimer === null) return;
+  clearTimeout(paymentTxPollingTimer);
+  paymentTxPollingTimer = null;
+};
+
+const clearSuccessReturnTimer = (): void => {
+  if (successReturnTimer === null) return;
+  clearTimeout(successReturnTimer);
+  successReturnTimer = null;
+};
+
+onScopeDispose(() => {
+  clearPaymentTxPollingTimer();
+  clearSuccessReturnTimer();
+});
+
+const target = computed(() => targetQuery.data.value ?? null);
+const providers = computed(() => providersQuery.data.value?.providers ?? []);
+
+const backFallbackTo = computed(() =>
+  target.value ? { path: `/bills/${target.value.bill.id}` } : { path: "/" },
+);
+const { handleBack } = useFallbackBack(backFallbackTo);
+
+const targetErrorMessage = computed(() =>
+  targetQuery.error.value instanceof Error ? targetQuery.error.value.message : "加载支付信息失败。",
+);
+
+const providersErrorMessage = computed(() =>
+  providersQuery.error.value instanceof Error
+    ? providersQuery.error.value.message
+    : "加载支付方式失败。",
+);
+
+const selectableProviderIds = computed(() =>
+  providers.value
+    .filter((provider) => !provider.disabled)
+    .map((provider) => provider.paymentProviderInstanceId),
+);
+const selectableProviderIdSet = computed(() => new Set(selectableProviderIds.value));
+
+const isPaymentTxTerminal = (status: PaymentTxResponse["status"] | null | undefined): boolean =>
+  status === "SUCCEEDED" || status === "FAILED" || status === "CLOSED";
+
+const isPaymentTxNonTerminal = (status: PaymentTxResponse["status"] | null | undefined): boolean =>
+  status === "ACTION_REQUIRED" || status === "PROCESSING";
+
+const providerSelection = usePuSelect<string>({
+  multiple: false,
+  isOptionDisabled: (paymentProviderInstanceId) =>
+    !selectableProviderIdSet.value.has(paymentProviderInstanceId) || selectionLocked.value,
+});
+
+watch(
+  selectableProviderIds,
+  (nextIds) => {
+    const currentSelected = providerSelection.selectedValues.value[0];
+    if (currentSelected && nextIds.includes(currentSelected)) return;
+    providerSelection.setValue(nextIds[0]);
+  },
+  { immediate: true },
+);
+
+watch(
+  billLineIdRef,
+  () => {
+    resetAttemptFeedback();
+  },
+);
+
+const selectedProviderId = computed(() => providerSelection.selectedValues.value[0] ?? null);
+const selectedProvider = computed(
+  () =>
+    providers.value.find(
+      (provider) => provider.paymentProviderInstanceId === selectedProviderId.value,
+    ) ?? null,
+);
+
+const amountLabel = computed(() =>
+  target.value
+    ? formatCurrencyAmount(target.value.line.amountFen, target.value.line.currency)
+    : "待确认",
+);
+
+const currentStatus = computed<PaymentTxResponse["status"] | string>(
+  () => paymentTx.value?.status ?? target.value?.line.settlementStatus ?? "UNPAID",
+);
+
+const statusTag = computed(() => resolveBillLineSettlementTag(currentStatus.value));
+
+const lineDescription = computed(
+  () => target.value?.line.description?.trim() || "请确认金额与支付方式后完成支付。",
+);
+
+const selectionLocked = computed(
+  () =>
+    createPaymentChargeMutation.isPending.value ||
+    attemptPhase.value === "WAITING_FOR_CLIENT" ||
+    attemptPhase.value === "RECONCILING" ||
+    paymentTx.value?.status === "SUCCEEDED",
+);
+
+const isProgressDialogOpen = computed(() => attemptPhase.value === "RECONCILING");
+
+const showsFooter = computed(() => target.value?.eligibility.payable === true);
+
+const payDisabled = computed(() => {
+  if (!target.value?.eligibility.payable) return true;
+  if (providersQuery.isPending.value || providers.value.length === 0) return true;
+  if (providersQuery.isError.value) return true;
+  if (selectedProvider.value === null) return true;
+  return selectionLocked.value;
+});
+
+const payButtonLabel = computed(() => {
+  if (paymentTx.value?.status === "SUCCEEDED") return "支付成功";
+  if (attemptPhase.value === "WAITING_FOR_CLIENT") return "请在微信中完成支付";
+  if (attemptPhase.value === "RECONCILING") return "正在确认支付";
+  if (providersQuery.isPending.value) return "正在加载支付方式";
+  if (providers.value.length === 0) return "暂无可用支付方式";
+  return `支付 ${amountLabel.value}`;
+});
+
+const closeDialog = (): void => {
+  dialogState.value.open = false;
+};
+
+const openDialog = (input: Omit<DialogState, "open">): void => {
+  dialogState.value = {
+    open: true,
+    ...input,
+  };
+};
+
+const resetAttemptFeedback = (): void => {
+  attemptPhase.value = "IDLE";
+  paymentTx.value = null;
+  lastClientActionResult.value = null;
+  errorNoticeMessage.value = null;
+  handledTerminalKey.value = null;
+  clearPaymentTxPollingTimer();
+  clearSuccessReturnTimer();
+  closeDialog();
+};
+
+const schedulePaymentTxReconciliation = (): void => {
+  clearPaymentTxPollingTimer();
+  if (attemptPhase.value !== "RECONCILING") return;
+  if (!isPaymentTxNonTerminal(paymentTx.value?.status)) return;
+  paymentTxPollingTimer = setTimeout(() => {
+    void reconcilePaymentTx();
+  }, PAYMENT_TX_POLLING_MS);
+};
+
+const invalidateCheckoutQueries = async (): Promise<void> => {
+  const checkoutTarget = target.value;
+  if (!checkoutTarget) return;
+
+  await queryClient.invalidateQueries({
+    queryKey: queryKeys.commerce.billLineCheckoutTarget(checkoutTarget.line.id),
+  });
+  await queryClient.invalidateQueries({
+    queryKey: queryKeys.commerce.billDetail(checkoutTarget.bill.id),
+  });
+  await queryClient.invalidateQueries({
+    queryKey: queryKeys.commerce.orderDetail(checkoutTarget.order.id),
+  });
+  if (paymentTx.value) {
+    await queryClient.invalidateQueries({
+      queryKey: queryKeys.payment.tx(paymentTx.value.paymentTxId),
+    });
+  }
+
+  await Promise.all([
+    queryClient.refetchQueries({
+      queryKey: queryKeys.commerce.billLineCheckoutTarget(checkoutTarget.line.id),
+      type: "all",
+    }),
+    queryClient.refetchQueries({
+      queryKey: queryKeys.commerce.billDetail(checkoutTarget.bill.id),
+      type: "all",
+    }),
+    queryClient.refetchQueries({
+      queryKey: queryKeys.commerce.orderDetail(checkoutTarget.order.id),
+      type: "all",
+    }),
+  ]);
+};
+
+const scheduleSuccessfulReturn = async (): Promise<void> => {
+  const checkoutTarget = target.value;
+  if (!checkoutTarget || successReturnTimer !== null) return;
+
+  await invalidateCheckoutQueries();
+  if (successReturnTimer !== null) return;
+  successReturnTimer = setTimeout(() => {
+    void router.replace({
+      path: `/bills/${checkoutTarget.bill.id}`,
+    });
+  }, PAYMENT_SUCCESS_RETURN_DELAY_MS);
+};
+
+const buildTerminalDialog = (nextPaymentTx: PaymentTxResponse): Omit<DialogState, "open"> => {
+  if (nextPaymentTx.status === "FAILED") {
+    return {
+      title: "支付失败",
+      description: "当前支付未完成，请稍后重试。",
+      confirmText: "我知道了",
+    };
+  }
+
+  const wasCancelledByClient =
+    lastClientActionResult.value?.clientKind === "WECHAT_BRIDGE" &&
+    lastClientActionResult.value.clientStatus === "CANCELLED";
+  return {
+    title: wasCancelledByClient ? "支付已取消" : "支付已关闭",
+    description: "本次支付未完成，请重新发起支付。",
+    confirmText: "我知道了",
+  };
+};
+
+const handlePaymentTxSnapshot = async (
+  nextPaymentTx: PaymentTxResponse,
+): Promise<PaymentTxResponse> => {
+  paymentTx.value = nextPaymentTx;
+  errorNoticeMessage.value = null;
+
+  if (!isPaymentTxTerminal(nextPaymentTx.status)) {
+    attemptPhase.value = "RECONCILING";
+    schedulePaymentTxReconciliation();
+    return nextPaymentTx;
+  }
+
+  clearPaymentTxPollingTimer();
+  const terminalKey = `${nextPaymentTx.paymentTxId}:${nextPaymentTx.status}`;
+  if (handledTerminalKey.value === terminalKey) {
+    return nextPaymentTx;
+  }
+  handledTerminalKey.value = terminalKey;
+
+  if (nextPaymentTx.status === "SUCCEEDED") {
+    attemptPhase.value = "SUCCEEDED";
+    await scheduleSuccessfulReturn();
+    return nextPaymentTx;
+  }
+
+  attemptPhase.value = "IDLE";
+  openDialog(buildTerminalDialog(nextPaymentTx));
+  await invalidateCheckoutQueries();
+  return nextPaymentTx;
+};
+
+const reconcilePaymentTx = async (): Promise<PaymentTxResponse | null> => {
+  const paymentTxId = paymentTx.value?.paymentTxId ?? null;
+  if (paymentTxId === null || isReconcilingPaymentTx.value) {
+    return paymentTx.value;
+  }
+
+  isReconcilingPaymentTx.value = true;
+  try {
+    const nextPaymentTx = await fetchPaymentTx(paymentTxId);
+    return await handlePaymentTxSnapshot(nextPaymentTx);
+  } catch (error) {
+    clearPaymentTxPollingTimer();
+    attemptPhase.value = "IDLE";
+    errorNoticeMessage.value =
+      error instanceof Error ? error.message : "确认支付结果失败，请稍后重试。";
+    return paymentTx.value;
+  } finally {
+    isReconcilingPaymentTx.value = false;
+  }
+};
+
+const handlePay = async (): Promise<void> => {
+  const checkoutTarget = target.value;
+  const provider = selectedProvider.value;
+  if (!checkoutTarget?.eligibility.payable || provider === null) {
+    return;
+  }
+
+  resetAttemptFeedback();
+
+  try {
+    const result = await createPaymentChargeMutation.mutateAsync({
+      paymentProviderInstanceId: provider.paymentProviderInstanceId,
+      billLineId: checkoutTarget.line.id,
+    });
+    paymentTx.value = result.paymentTx;
+    attemptPhase.value = "WAITING_FOR_CLIENT";
+    const clientActionResult = await launchPaymentClientAction(result.clientAction);
+    lastClientActionResult.value = clientActionResult;
+    if (clientActionResult.clientKind === "PAYMENT_REDIRECT") {
+      attemptPhase.value = "IDLE";
+      return;
+    }
+
+    attemptPhase.value = "RECONCILING";
+    await reconcilePaymentTx();
+  } catch (error) {
+    if (paymentTx.value !== null) {
+      attemptPhase.value = "RECONCILING";
+      await reconcilePaymentTx();
+      return;
+    }
+
+    attemptPhase.value = "IDLE";
+    const errorCode =
+      error instanceof Error ? ("code" in error ? error.code : undefined) : undefined;
+    if (errorCode === "PAYMENT_PROVIDER_CONFLICT") {
+      openDialog({
+        title: "支付方式不可切换",
+        description: "当前账单行已有未完成支付，请先完成当前支付流程。",
+        confirmText: "我知道了",
+      });
+      return;
+    }
+
+    errorNoticeMessage.value =
+      error instanceof Error ? error.message : "发起支付失败，请稍后重试。";
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.payment-checkout-page {
+  min-width: 0;
+  --pu-page-max-width: 40rem;
+}
+
+.payment-checkout-page__body {
+  display: flex;
+  min-height: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+
+.payment-checkout-page__content {
+  display: flex;
+  min-height: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: var(--sys-spacing-medium);
+}
+
+.payment-checkout-page__section {
+  display: flex;
+  min-height: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: var(--sys-spacing-small);
+}
+
+.payment-checkout-page__section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sys-spacing-small);
+}
+
+.payment-checkout-page__section-title {
+  @include mx.pu-font(section);
+  margin: 0;
+  color: var(--sys-color-on-surface);
+}
+
+.payment-checkout-page__notice {
+  margin-bottom: var(--sys-spacing-xsmall);
+}
+
+.payment-checkout-page__provider-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sys-spacing-small);
+}
+
+.payment-checkout-page__provider-cell {
+  width: 100%;
+  min-width: 0;
+  border: 1px solid var(--sys-color-outline-muted);
+  border-radius: var(--sys-radius-small);
+  background: var(--sys-color-surface);
+  text-align: left;
+  transition:
+    border-color 160ms ease,
+    background-color 160ms ease,
+    box-shadow 160ms ease;
+}
+
+.payment-checkout-page__provider-cell.is-selected {
+  border-color: var(--sys-color-primary);
+  background: color-mix(in srgb, var(--sys-color-primary-container) 24%, var(--sys-color-surface));
+}
+
+.payment-checkout-page__provider-cell.is-disabled {
+  opacity: 0.56;
+}
+
+.payment-checkout-page__footer {
+  padding-top: var(--sys-spacing-small);
+  padding-bottom: calc(var(--sys-spacing-medium) + env(safe-area-inset-bottom, 0px));
+  background: var(--sys-color-surface);
+}
+
+.payment-checkout-page__progress-dialog {
+  padding-bottom: var(--sys-spacing-small);
+}
+</style>
diff --git a/apps/frontend/src/domains/payment/use-cases/launch-payment-client-action.test.ts b/apps/frontend/src/domains/payment/use-cases/launch-payment-client-action.test.ts
new file mode 100644
index 000000000..16f9eacce
--- /dev/null
+++ b/apps/frontend/src/domains/payment/use-cases/launch-payment-client-action.test.ts
@@ -0,0 +1,72 @@
+import assert from "node:assert/strict";
+import { afterEach, test } from "vitest";
+import { launchPaymentClientAction } from "./launch-payment-client-action";
+
+const buildBridgeAction = (): Extract<
+  Parameters<typeof launchPaymentClientAction>[0],
+  { type: "WECHAT_BRIDGE" }
+> => ({
+  type: "WECHAT_BRIDGE",
+  appId: "wx-dev-app",
+  timeStamp: "1710000000",
+  nonceStr: "fake-nonce",
+  package: "prepay_id=fake_prepay_123",
+  signType: "RSA",
+  paySign: "fake-signature",
+});
+
+afterEach(() => {
+  Reflect.deleteProperty(globalThis, "window");
+  Reflect.deleteProperty(globalThis, "document");
+});
+
+test("launchPaymentClientAction maps WeixinJSBridge cancel callback to CANCELLED", async () => {
+  const bridge: WeixinJsBridgeApi = {
+    invoke(_method, _payload, callback) {
+      callback({
+        err_msg: "get_brand_wcpay_request:cancel",
+      });
+    },
+  };
+
+  Object.assign(globalThis, {
+    document: {},
+    window: {
+      WeixinJSBridge: bridge,
+    },
+  });
+
+  const result = await launchPaymentClientAction(buildBridgeAction());
+
+  assert.deepEqual(result, {
+    clientKind: "WECHAT_BRIDGE",
+    clientStatus: "CANCELLED",
+    rawMessage: "get_brand_wcpay_request:cancel",
+  });
+});
+
+test("launchPaymentClientAction returns redirect result after assigning location", async () => {
+  const assignedUrls: string[] = [];
+
+  Object.assign(globalThis, {
+    window: {
+      location: {
+        assign(url: string) {
+          assignedUrls.push(url);
+        },
+      },
+    },
+  });
+
+  const result = await launchPaymentClientAction({
+    type: "PAYMENT_REDIRECT",
+    url: "https://payments.partner-up.localhost/checkout",
+  });
+
+  assert.deepEqual(assignedUrls, ["https://payments.partner-up.localhost/checkout"]);
+  assert.deepEqual(result, {
+    clientKind: "PAYMENT_REDIRECT",
+    clientStatus: "REDIRECTED",
+    rawMessage: null,
+  });
+});
diff --git a/apps/frontend/src/domains/payment/use-cases/launch-payment-client-action.ts b/apps/frontend/src/domains/payment/use-cases/launch-payment-client-action.ts
new file mode 100644
index 000000000..fdf1a15c9
--- /dev/null
+++ b/apps/frontend/src/domains/payment/use-cases/launch-payment-client-action.ts
@@ -0,0 +1,119 @@
+import type { CreatePaymentChargeResponse } from "../queries/usePayment";
+
+type PaymentClientAction = CreatePaymentChargeResponse["clientAction"];
+export type PaymentClientActionResult =
+  | {
+      clientKind: "PAYMENT_REDIRECT";
+      clientStatus: "REDIRECTED";
+      rawMessage: null;
+    }
+  | {
+      clientKind: "WECHAT_BRIDGE";
+      clientStatus: "SUCCEEDED" | "CANCELLED" | "FAILED";
+      rawMessage: string | null;
+    };
+
+const WECHAT_BRIDGE_READY_EVENT = "WeixinJSBridgeReady";
+const WECHAT_BRIDGE_METHOD = "getBrandWCPayRequest";
+const WECHAT_BRIDGE_TIMEOUT_MS = 5_000;
+
+const waitForWeixinJsBridge = async (): Promise<NonNullable<Window["WeixinJSBridge"]>> => {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    throw new Error("Current runtime cannot launch payment client actions");
+  }
+
+  const existingBridge = window.WeixinJSBridge;
+  if (typeof existingBridge?.invoke === "function") {
+    return existingBridge;
+  }
+
+  return new Promise((resolve, reject) => {
+    let timeoutId: number | null = null;
+
+    const cleanup = (): void => {
+      document.removeEventListener(WECHAT_BRIDGE_READY_EVENT, handleReady);
+      if (timeoutId !== null) {
+        window.clearTimeout(timeoutId);
+      }
+    };
+
+    const handleReady = (): void => {
+      const readyBridge = window.WeixinJSBridge;
+      cleanup();
+      if (typeof readyBridge?.invoke === "function") {
+        resolve(readyBridge);
+        return;
+      }
+      reject(new Error("WeixinJSBridge is unavailable"));
+    };
+
+    document.addEventListener(WECHAT_BRIDGE_READY_EVENT, handleReady);
+    timeoutId = window.setTimeout(() => {
+      cleanup();
+      reject(new Error("WeixinJSBridge is unavailable"));
+    }, WECHAT_BRIDGE_TIMEOUT_MS);
+  });
+};
+
+const invokeWeChatBridge = async (
+  action: Extract<PaymentClientAction, { type: "WECHAT_BRIDGE" }>,
+): Promise<Extract<PaymentClientActionResult, { clientKind: "WECHAT_BRIDGE" }>> => {
+  const bridge = await waitForWeixinJsBridge();
+  const response = await new Promise<WeixinJsBridgeCallbackPayload>((resolve) => {
+    bridge.invoke(
+      WECHAT_BRIDGE_METHOD,
+      {
+        appId: action.appId,
+        timeStamp: action.timeStamp,
+        nonceStr: action.nonceStr,
+        package: action.package,
+        signType: action.signType,
+        paySign: action.paySign,
+      },
+      (payload) => {
+        resolve(payload);
+      },
+    );
+  });
+
+  const rawMessage = response.err_msg?.trim() ?? null;
+  if (rawMessage?.includes(":ok")) {
+    return {
+      clientKind: "WECHAT_BRIDGE",
+      clientStatus: "SUCCEEDED",
+      rawMessage,
+    };
+  }
+
+  if (rawMessage?.includes(":cancel")) {
+    return {
+      clientKind: "WECHAT_BRIDGE",
+      clientStatus: "CANCELLED",
+      rawMessage,
+    };
+  }
+
+  return {
+    clientKind: "WECHAT_BRIDGE",
+    clientStatus: "FAILED",
+    rawMessage,
+  };
+};
+
+export async function launchPaymentClientAction(
+  action: PaymentClientAction,
+): Promise<PaymentClientActionResult> {
+  if (action.type === "PAYMENT_REDIRECT") {
+    if (typeof window === "undefined") {
+      throw new Error("Current runtime cannot launch payment redirects");
+    }
+    window.location.assign(action.url);
+    return {
+      clientKind: "PAYMENT_REDIRECT",
+      clientStatus: "REDIRECTED",
+      rawMessage: null,
+    };
+  }
+
+  return invokeWeChatBridge(action);
+}
diff --git a/apps/frontend/src/pages/CommerceBillDetailPage.vue b/apps/frontend/src/pages/CommerceBillDetailPage.vue
index 24d48fb93..e8c82b730 100644
--- a/apps/frontend/src/pages/CommerceBillDetailPage.vue
+++ b/apps/frontend/src/pages/CommerceBillDetailPage.vue
@@ -91,7 +91,9 @@
 
         <div v-if="selectedPayableLine" class="bill-detail-page__footer">
           <PuButton
-            :action="{ to: { path: selectedPayableLine.checkoutHref } }"
+            :action="{
+              to: buildPaymentCheckoutRouteLocation({ billLineId: selectedPayableLine.id }),
+            }"
             shape="rect"
             tone="primary"
             variant="solid"
@@ -124,6 +126,7 @@ import {
 } from "@/domains/commerce/model/bill-display";
 import type { BillDetailResponse } from "@/domains/commerce/queries/useCommerce";
 import { useBillDetail } from "@/domains/commerce/queries/useCommerce";
+import { buildPaymentCheckoutRouteLocation } from "@/domains/commerce/routing/payment-checkout-route";
 import BillLineCard from "@/domains/commerce/ui/bill-detail/BillLineCard.vue";
 import { useFallbackBack } from "@/shared/routing/useFallbackBack";
 
@@ -159,14 +162,10 @@ const totalAmountLabel = computed(() =>
     : "待确认",
 );
 
-type PayableBillLine = BillDetailResponse["lines"][number] & {
-  checkoutHref: string;
-};
+const isPayableBillLine = (line: BillDetailResponse["lines"][number]): boolean =>
+  line.payableByViewer;
 
-const isPayableBillLine = (line: BillDetailResponse["lines"][number]): line is PayableBillLine =>
-  line.payableByViewer && typeof line.checkoutHref === "string" && line.checkoutHref.length > 0;
-
-const payableLines = computed<PayableBillLine[]>(() =>
+const payableLines = computed<BillDetailResponse["lines"][number][]>(() =>
   (detail.value?.lines ?? []).filter(isPayableBillLine),
 );
 
diff --git a/apps/frontend/src/pages/CommerceOrderDetailPage.vue b/apps/frontend/src/pages/CommerceOrderDetailPage.vue
index 793a8cf48..13af2e8b4 100644
--- a/apps/frontend/src/pages/CommerceOrderDetailPage.vue
+++ b/apps/frontend/src/pages/CommerceOrderDetailPage.vue
@@ -9,7 +9,6 @@
     <template #pageHeader>
       <PuHeader
         title="订单详情"
-        subtitle="查看支付、账单和预约进度"
         title-as="h1"
       >
         <template #leading>
@@ -449,6 +448,7 @@ onUnmounted(() => {
 <style scoped lang="scss">
 .order-detail-page {
   min-width: 0;
+  --pu-page-scaffold-region-gap: var(--sys-spacing-small);
 }
 
 .order-detail-page__body {
diff --git a/apps/frontend/src/pages/PaymentCheckoutPage.vue b/apps/frontend/src/pages/PaymentCheckoutPage.vue
index d15fa587a..e1bd14592 100644
--- a/apps/frontend/src/pages/PaymentCheckoutPage.vue
+++ b/apps/frontend/src/pages/PaymentCheckoutPage.vue
@@ -1,478 +1,14 @@
 <template>
-  <PuPageScaffold
-    viewport="screen"
-    class="payment-checkout-page"
-    data-testid="payment-checkout.page"
-  >
-    <template #pageHeader>
-      <PuHeader
-        title="支付"
-        subtitle="本页只支付当前这一条账单行"
-        title-as="h1"
-      >
-        <template #leading>
-          <PuButton
-            tone="neutral"
-            variant="ghost"
-            size="sm"
-            aria-label="返回上一页"
-            @click="handleBack"
-          >
-            <template #leading>
-              <span class="i-mdi-arrow-left" aria-hidden="true"></span>
-            </template>
-          </PuButton>
-        </template>
-      </PuHeader>
-    </template>
-
-    <div class="payment-checkout-page__body">
-      <PuInlineNotice
-        v-if="billLineId === null"
-        tone="error"
-        title="支付入口无效"
-        message="缺少账单行编号。"
-      />
-
-      <PuInlineNotice
-        v-else-if="checkoutQuery.isError.value"
-        tone="error"
-        title="无法加载支付信息"
-        :message="checkoutErrorMessage"
-      />
-
-      <div
-        v-else-if="checkoutQuery.isPending.value"
-        class="payment-checkout-page__loading"
-      >
-        正在加载支付信息...
-      </div>
-
-      <template v-else-if="checkout">
-        <PuCard as="section" gap="md">
-          <div class="payment-checkout-page__section-heading">
-            <p class="payment-checkout-page__eyebrow">Checkout</p>
-            <h2>{{ checkout.order.itemName }}</h2>
-          </div>
-
-          <div class="payment-checkout-page__amount">
-            <span>{{ checkout.billLine.label }}</span>
-            <strong data-testid="payment-checkout.amount">
-              {{ formatFen(checkout.billLine.amountFen) }}
-            </strong>
-          </div>
-
-          <p
-            class="payment-checkout-page__status"
-            data-testid="payment-checkout.status"
-          >
-            支付状态：{{ paymentStatusLabel }}
-          </p>
-        </PuCard>
-
-        <PuCard as="section" gap="md">
-          <div class="payment-checkout-page__section-heading">
-            <p class="payment-checkout-page__eyebrow">Provider</p>
-            <h2>微信支付</h2>
-          </div>
-
-          <PuInlineNotice
-            v-if="
-              !checkout.eligibility.payable &&
-              activePayment?.status !== 'SUCCEEDED'
-            "
-            tone="warning"
-            title="当前不可支付"
-            :message="checkout.eligibility.disabledReason ?? '支付条件不满足。'"
-          />
-
-          <PuButton
-            v-if="canCreateCharge"
-            size="lg"
-            :loading="createChargeMutation.isPending.value"
-            data-testid="payment-checkout.create-charge"
-            @click="createCharge"
-          >
-            发起微信支付
-          </PuButton>
-
-          <template
-            v-if="activePayment && activePayment.status !== 'SUCCEEDED'"
-          >
-            <PuButton
-              v-if="
-                activePaymentClientActionType === 'PAYMENT_REDIRECT' &&
-                redirectUrl
-              "
-              tone="secondary" variant="solid"
-              data-testid="payment-checkout.redirect-open"
-              @click="openRedirectPayment"
-            >
-              继续支付
-            </PuButton>
-            <PuButton
-              v-if="activePaymentClientActionType === 'WECHAT_BRIDGE'"
-              tone="secondary" variant="solid"
-              data-testid="payment-checkout.wechat-bridge-open"
-              @click="runActiveClientPaymentAction"
-            >
-              继续微信支付
-            </PuButton>
-            <PuButton
-              v-if="activePaymentClientActionType !== 'PAYMENT_REDIRECT'"
-              tone="secondary" variant="solid"
-              :loading="syncMutation.isPending.value"
-              data-testid="payment-checkout.sync"
-              @click="syncPayment"
-            >
-              同步支付状态
-            </PuButton>
-          </template>
-
-          <PuInlineNotice
-            v-if="activePayment?.status === 'SUCCEEDED'"
-            tone="success"
-            title="支付成功"
-            message="后端已确认该账单行支付成功。"
-            data-testid="payment-checkout.success"
-          />
-
-          <PuInlineNotice
-            v-if="
-              createChargeMutation.isError.value || syncMutation.isError.value
-            "
-            tone="error"
-            title="支付处理失败"
-            :message="mutationErrorMessage"
-          />
-
-          <PuInlineNotice
-            v-if="clientPaymentError"
-            tone="error"
-            title="微信支付未完成"
-            :message="clientPaymentError"
-            data-testid="payment-checkout.client-error"
-          />
-        </PuCard>
-
-        <PuCard as="section" gap="sm" padding="sm" variant="outline">
-          <PuButton
-            :action="{ to: { path: `/bills/${checkout.bill.id}` } }"
-            shape="rect"
-            tone="primary"
-            variant="outline"
-            data-testid="payment-checkout.bill-link"
-          >
-            返回账单
-          </PuButton>
-        </PuCard>
-      </template>
-    </div>
-  </PuPageScaffold>
+  <PaymentCheckoutFlow :bill-line-id="billLineId" />
 </template>
 
 <script setup lang="ts">
-import {
-  PuButton,
-  PuCard,
-  PuHeader,
-  PuInlineNotice,
-  PuPageScaffold,
-} from "@partner-up-dev/design-web";
-import { computed, ref } from "vue";
+import { computed } from "vue";
 import { useRoute } from "vue-router";
-import {
-  useCreateChargeForBillLine,
-  usePaymentCheckout,
-  useSyncBillLinePayment,
-} from "@/domains/commerce/queries/useCommerce";
-import { useFallbackBack } from "@/shared/routing/useFallbackBack";
+import { readPaymentCheckoutBillLineId } from "@/domains/commerce/routing/payment-checkout-route";
+import PaymentCheckoutFlow from "@/domains/payment/ui/surfaces/PaymentCheckoutFlow.vue";
 
 const route = useRoute();
 
-const billLineId = computed(() => {
-  const value = route.params.billLineId;
-  if (typeof value !== "string" || value.length === 0) return null;
-  return value;
-});
-
-const checkoutQuery = usePaymentCheckout(billLineId);
-const createChargeMutation = useCreateChargeForBillLine();
-const syncMutation = useSyncBillLinePayment();
-const clientPaymentError = ref<string | null>(null);
-
-type WeChatBridgeClientAction = {
-  type: "WECHAT_BRIDGE";
-  appId: string;
-  timeStamp: string;
-  nonceStr: string;
-  package: string;
-  signType: "RSA";
-  paySign: string;
-};
-
-type PaymentRedirectClientAction = {
-  type: "PAYMENT_REDIRECT";
-  url: string;
-};
-
-type PaymentClientAction = WeChatBridgeClientAction | PaymentRedirectClientAction;
-
-type WeixinJSBridgeResponse = {
-  err_msg?: string;
-};
-
-type WeixinJSBridgeLike = {
-  invoke(
-    method: "getBrandWCPayRequest",
-    payload: Omit<WeChatBridgeClientAction, "type">,
-    callback: (response: WeixinJSBridgeResponse) => void,
-  ): void;
-};
-
-declare global {
-  interface Window {
-    WeixinJSBridge?: WeixinJSBridgeLike;
-  }
-}
-
-const checkout = computed(
-  () => createChargeMutation.data.value ?? checkoutQuery.data.value ?? null,
-);
-
-const activePayment = computed(
-  () =>
-    syncMutation.data.value ??
-    createChargeMutation.data.value?.payment ??
-    checkoutQuery.data.value?.payment ??
-    null,
-);
-
-const isRecord = (value: unknown): value is Record<string, unknown> =>
-  typeof value === "object" && value !== null && !Array.isArray(value);
-
-const readString = (record: Record<string, unknown>, key: string): string | null => {
-  const value = record[key];
-  return typeof value === "string" && value.length > 0 ? value : null;
-};
-
-const parsePaymentClientAction = (value: unknown): PaymentClientAction | null => {
-  if (!isRecord(value)) return null;
-  const type = readString(value, "type");
-
-  if (type === "WECHAT_BRIDGE") {
-    const appId = readString(value, "appId");
-    const timeStamp = readString(value, "timeStamp");
-    const nonceStr = readString(value, "nonceStr");
-    const packageValue = readString(value, "package");
-    const paySign = readString(value, "paySign");
-    if (!appId || !timeStamp || !nonceStr || !packageValue || !paySign) {
-      return null;
-    }
-    return {
-      type,
-      appId,
-      timeStamp,
-      nonceStr,
-      package: packageValue,
-      signType: "RSA",
-      paySign,
-    };
-  }
-
-  if (type === "PAYMENT_REDIRECT") {
-    const url = readString(value, "url");
-    return url ? { type, url } : null;
-  }
-
-  return null;
-};
-
-const activePaymentClientAction = computed(() =>
-  parsePaymentClientAction(activePayment.value?.clientAction),
-);
-
-const activePaymentClientActionType = computed(() => activePaymentClientAction.value?.type ?? null);
-
-const redirectUrl = computed(() =>
-  activePaymentClientAction.value?.type === "PAYMENT_REDIRECT"
-    ? activePaymentClientAction.value.url
-    : null,
-);
-
-const canCreateCharge = computed(
-  () =>
-    checkout.value?.eligibility.payable === true &&
-    activePayment.value?.status !== "SUCCEEDED" &&
-    activePaymentClientActionType.value === null,
-);
-
-const paymentStatusLabel = computed(() => {
-  if (!activePayment.value) return "未发起";
-  if (activePayment.value.status === "SUCCEEDED") return "已支付";
-  if (activePayment.value.status === "ACTION_REQUIRED") return "待完成支付";
-  if (activePayment.value.status === "PROCESSING") return "支付处理中";
-  if (activePayment.value.status === "FAILED") return "支付失败";
-  if (activePayment.value.status === "CLOSED") return "已关闭";
-  return activePayment.value.status;
-});
-
-const backFallbackTo = computed(() =>
-  checkout.value ? { path: `/bills/${checkout.value.bill.id}` } : { path: "/" },
-);
-const { handleBack } = useFallbackBack(backFallbackTo);
-
-const checkoutErrorMessage = computed(() =>
-  checkoutQuery.error.value instanceof Error
-    ? checkoutQuery.error.value.message
-    : "加载支付信息失败。",
-);
-
-const mutationErrorMessage = computed(() => {
-  const error = createChargeMutation.error.value ?? syncMutation.error.value;
-  return error instanceof Error ? error.message : "支付处理失败。";
-});
-
-const createCharge = async (): Promise<void> => {
-  if (!billLineId.value) return;
-  clientPaymentError.value = null;
-  const result = await createChargeMutation.mutateAsync(billLineId.value);
-  await runClientPaymentAction(result.payment?.clientAction);
-};
-
-const syncPayment = async (): Promise<void> => {
-  if (!billLineId.value) return;
-  await syncMutation.mutateAsync(billLineId.value);
-};
-
-const runClientPaymentAction = async (value: unknown): Promise<void> => {
-  const action = parsePaymentClientAction(value);
-  if (!action) {
-    return;
-  }
-
-  if (action.type === "PAYMENT_REDIRECT") {
-    window.location.assign(action.url);
-    return;
-  }
-
-  try {
-    await invokeWeChatBridgePayment(action);
-    await syncPayment();
-  } catch (error) {
-    clientPaymentError.value = error instanceof Error ? error.message : "微信支付调用失败。";
-  }
-};
-
-const invokeWeChatBridgePayment = (action: WeChatBridgeClientAction): Promise<void> =>
-  new Promise((resolve, reject) => {
-    const bridge = window.WeixinJSBridge;
-    if (!bridge) {
-      reject(new Error("当前环境缺少 WeixinJSBridge，无法拉起微信支付。"));
-      return;
-    }
-
-    bridge.invoke(
-      "getBrandWCPayRequest",
-      {
-        appId: action.appId,
-        timeStamp: action.timeStamp,
-        nonceStr: action.nonceStr,
-        package: action.package,
-        signType: action.signType,
-        paySign: action.paySign,
-      },
-      (response) => {
-        const message = response.err_msg ?? "";
-        if (message.endsWith(":ok")) {
-          resolve();
-          return;
-        }
-        reject(new Error(message || "用户未完成微信支付。"));
-      },
-    );
-  });
-
-const openRedirectPayment = (): void => {
-  if (!redirectUrl.value) return;
-  window.location.assign(redirectUrl.value);
-};
-
-const runActiveClientPaymentAction = async (): Promise<void> => {
-  clientPaymentError.value = null;
-  await runClientPaymentAction(activePayment.value?.clientAction);
-};
-
-const formatFen = (amountFen: number | null | undefined): string => {
-  if (typeof amountFen !== "number") return "待确认";
-  return new Intl.NumberFormat("zh-CN", {
-    style: "currency",
-    currency: "CNY",
-  }).format(amountFen / 100);
-};
+const billLineId = computed(() => readPaymentCheckoutBillLineId(route.query));
 </script>
-
-<style scoped lang="scss">
-.payment-checkout-page {
-  min-width: 0;
-  --pu-page-max-width: 40rem;
-}
-
-.payment-checkout-page__body {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  gap: var(--sys-spacing-medium);
-  min-height: 0;
-  overflow: auto;
-  padding-bottom: var(--sys-spacing-medium);
-}
-
-.payment-checkout-page__loading,
-.payment-checkout-page__status {
-  margin: 0;
-  color: var(--sys-color-on-surface-variant);
-}
-
-.payment-checkout-page__section-heading {
-  display: flex;
-  flex-direction: column;
-  gap: calc(var(--sys-spacing-xsmall) / 2);
-
-  h2,
-  p {
-    margin: 0;
-  }
-
-  h2 {
-    @include mx.pu-font(title);
-    color: var(--sys-color-on-surface);
-  }
-}
-
-.payment-checkout-page__eyebrow {
-  @include mx.pu-font(control);
-  color: var(--sys-color-primary);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-.payment-checkout-page__amount {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--sys-spacing-medium);
-  padding: var(--sys-spacing-medium);
-  border-radius: var(--sys-radius-medium);
-  background: var(--sys-color-surface-container-high);
-
-  span {
-    color: var(--sys-color-on-surface-variant);
-  }
-
-  strong {
-    @include mx.pu-font(title);
-    color: var(--sys-color-on-surface);
-  }
-}
-</style>
diff --git a/apps/frontend/src/shared/api/query-keys.ts b/apps/frontend/src/shared/api/query-keys.ts
index ccbbc86f3..6cb13a59b 100644
--- a/apps/frontend/src/shared/api/query-keys.ts
+++ b/apps/frontend/src/shared/api/query-keys.ts
@@ -1,36 +1,31 @@
-import type { PRId } from "@partner-up-dev/backend";
-
-export const queryKeys = {
+import type { PRId } from "@partner-up-dev/backend";
+
+export const queryKeys = {
   pr: {
     detail: (id: PRId | null) => ["partner-request", "detail", id] as const,
     search: (eventId: number | null, dates: string[]) =>
       ["partner-request", "search", eventId, ...dates] as const,
     messages: (id: PRId | null) => ["partner-request", "messages", id] as const,
-    joinGates: (id: PRId | null) =>
-      ["partner-request", "join-gates", id] as const,
+    joinGates: (id: PRId | null) => ["partner-request", "join-gates", id] as const,
     mineCreated: () => ["partner-request", "mine", "created"] as const,
     mineJoined: () => ["partner-request", "mine", "joined"] as const,
     partnerProfile: (prId: PRId | null, partnerId: number | null) =>
       ["partner-request", "partner-profile", prId, partnerId] as const,
   },
-  config: {
-    public: (key: string) => ["config", "public", key] as const,
-  },
-  meta: {
-    build: () => ["meta", "build"] as const,
-  },
+  config: {
+    public: (key: string) => ["config", "public", key] as const,
+  },
+  meta: {
+    build: () => ["meta", "build"] as const,
+  },
   anchorEvent: {
     list: () => ["anchor-event", "list"] as const,
-    detail: (eventId: number | null) =>
-      ["anchor-event", "detail", eventId] as const,
-    formMode: (eventId: number | null) =>
-      ["anchor-event", "form-mode", eventId] as const,
-    routeApplicationsMine: () =>
-      ["anchor-event", "route-applications", "mine"] as const,
+    detail: (eventId: number | null) => ["anchor-event", "detail", eventId] as const,
+    formMode: (eventId: number | null) => ["anchor-event", "form-mode", eventId] as const,
+    routeApplicationsMine: () => ["anchor-event", "route-applications", "mine"] as const,
     landingAssignment: (eventId: number | null) =>
       ["anchor-event", "landing-assignment", eventId] as const,
-    demandCards: (eventId: number | null) =>
-      ["anchor-event", "demand-cards", eventId] as const,
+    demandCards: (eventId: number | null) => ["anchor-event", "demand-cards", eventId] as const,
     formModeRecommendation: (
       eventId: number | null,
       locationId: string | null,
@@ -54,45 +49,38 @@ export const queryKeys = {
   commerce: {
     placement: (contextId: number | null, type: "BUTTON") =>
       ["commerce", "placement", contextId, type] as const,
-    orderDetail: (orderId: string | null) =>
-      ["commerce", "order", orderId] as const,
-    billDetail: (billId: string | null) =>
-      ["commerce", "bill", billId] as const,
-    paymentCheckout: (billLineId: string | null) =>
-      ["commerce", "bill-line", billLineId, "checkout"] as const,
-    billLinePayment: (billLineId: string | null) =>
-      ["commerce", "bill-line", billLineId, "payment"] as const,
+    orderDetail: (orderId: string | null) => ["commerce", "order", orderId] as const,
+    billDetail: (billId: string | null) => ["commerce", "bill", billId] as const,
+    billLineCheckoutTarget: (billLineId: string | null) =>
+      ["commerce", "bill-line", billLineId] as const,
+  },
+  payment: {
+    providers: () => ["payment", "providers"] as const,
+    tx: (paymentTxId: string | null) => ["payment", "tx", paymentTxId] as const,
   },
   studySprint: {
     room: (prId: PRId | null) => ["study-sprint", "room", prId] as const,
   },
   admin: {
     anchorEventWorkspace: () => ["admin", "anchor-events", "workspace"] as const,
-    commerceProductsWorkspace: () =>
-      ["admin", "commerce", "products", "workspace"] as const,
+    commerceProductsWorkspace: () => ["admin", "commerce", "products", "workspace"] as const,
     commercePlacementOfferWorkspace: () =>
       ["admin", "commerce", "placement-offer", "workspace"] as const,
-    commerceOrderBillWorkspace: () =>
-      ["admin", "commerce", "orders-bills", "workspace"] as const,
-    commerceFulfillmentWorkspace: () =>
-      ["admin", "commerce", "fulfillments", "workspace"] as const,
-    paymentProviderInstances: () =>
-      ["admin", "payment", "provider-instances"] as const,
-    rideHailingProviderInstances: () =>
-      ["admin", "ride-hailing", "provider-instances"] as const,
+    commerceOrderBillWorkspace: () => ["admin", "commerce", "orders-bills", "workspace"] as const,
+    commerceFulfillmentWorkspace: () => ["admin", "commerce", "fulfillments", "workspace"] as const,
+    paymentProviderInstances: () => ["admin", "payment", "provider-instances"] as const,
+    rideHailingProviderInstances: () => ["admin", "ride-hailing", "provider-instances"] as const,
     anchorEventLandingConfig: (eventId: number | null) =>
       ["admin", "anchor-events", "landing-config", eventId] as const,
     anchorEventPreferenceTags: (eventId: number | null) =>
       ["admin", "anchor-events", "preference-tags", eventId] as const,
     pois: () => ["admin", "pois"] as const,
     poisByIds: (idsCsv: string) => ["admin", "pois", "by-ids", idsCsv] as const,
-    poisByNames: (namesCsv: string) =>
-      ["admin", "pois", "by-names", namesCsv] as const,
+    poisByNames: (namesCsv: string) => ["admin", "pois", "by-names", namesCsv] as const,
     feedbackQuestionnaireTemplates: () =>
       ["admin", "feedback-questionnaires", "templates"] as const,
     prWorkspace: () => ["admin", "pr-workspace"] as const,
-    prMessages: (id: PRId | null) =>
-      ["admin", "pr", "messages", id] as const,
+    prMessages: (id: PRId | null) => ["admin", "pr", "messages", id] as const,
     anchorEventFunnelAnalytics: (filters: {
       startAt?: string;
       endAt?: string;
@@ -102,27 +90,19 @@ export const queryKeys = {
       assignmentRevision?: string | null;
       renderedMode?: string | null;
     }) => ["admin", "analytics", "anchor-event-funnel", filters] as const,
-    biOverviewAnalytics: (filters: {
-      startAt?: string;
-      endAt?: string;
-    }) => ["admin", "analytics", "overview", filters] as const,
-    prJoinFunnelAnalytics: (filters: {
-      startAt?: string;
-      endAt?: string;
-    }) => ["admin", "analytics", "pr-join-funnel", filters] as const,
-    prCreateFunnelAnalytics: (filters: {
-      startAt?: string;
-      endAt?: string;
-    }) => ["admin", "analytics", "pr-create-funnel", filters] as const,
+    biOverviewAnalytics: (filters: { startAt?: string; endAt?: string }) =>
+      ["admin", "analytics", "overview", filters] as const,
+    prJoinFunnelAnalytics: (filters: { startAt?: string; endAt?: string }) =>
+      ["admin", "analytics", "pr-join-funnel", filters] as const,
+    prCreateFunnelAnalytics: (filters: { startAt?: string; endAt?: string }) =>
+      ["admin", "analytics", "pr-create-funnel", filters] as const,
   },
   wechat: {
-    notificationSubscriptions: () =>
-      ["wechat", "notification-subscriptions"] as const,
+    notificationSubscriptions: () => ["wechat", "notification-subscriptions"] as const,
     reminderSubscription: () => ["wechat", "reminder-subscription"] as const,
-    officialAccountFollowStatus: () =>
-      ["wechat", "official-account-follow-status"] as const,
+    officialAccountFollowStatus: () => ["wechat", "official-account-follow-status"] as const,
+  },
+  user: {
+    me: () => ["user", "me"] as const,
   },
-  user: {
-    me: () => ["user", "me"] as const,
-  },
-} as const;
+} as const;
diff --git a/apps/frontend/src/shared/wechat/fake-wechatpay-bridge.test.ts b/apps/frontend/src/shared/wechat/fake-wechatpay-bridge.test.ts
new file mode 100644
index 000000000..9d77fd44e
--- /dev/null
+++ b/apps/frontend/src/shared/wechat/fake-wechatpay-bridge.test.ts
@@ -0,0 +1,218 @@
+import assert from "node:assert/strict";
+import { test } from "vitest";
+import { installFakeWeChatPayBridgeForTesting } from "./fake-wechatpay-bridge";
+
+const buildBridgePayload = (): WeChatPayBridgePayload => ({
+  appId: "fake-app-id",
+  timeStamp: "1710000000",
+  nonceStr: "fake-nonce",
+  package: "prepay_id=fake_prepay_123",
+  signType: "RSA",
+  paySign: "fake-signature",
+});
+
+test("fake WeChatPay bridge installs and completes JSAPI happy path", async () => {
+  const dispatchedEvents: string[] = [];
+  const fetchCalls: Array<{ url: string; init: RequestInit | undefined }> = [];
+  const bridgeWindow: Pick<Window, "WeixinJSBridge"> = {};
+  const bridgeDocument = {
+    dispatchEvent(event: Event) {
+      dispatchedEvents.push(event.type);
+      return true;
+    },
+  };
+
+  const installed = installFakeWeChatPayBridgeForTesting({
+    bridgeWindow,
+    bridgeDocument,
+    fakeWeChatPayOrigin: "https://wechatpay.partner-up.localhost",
+    fetchImpl: async (url, init) => {
+      fetchCalls.push({
+        url: String(url),
+        init,
+      });
+      return new Response("{}", { status: 200 });
+    },
+    presentPaymentClient: async () => "SUCCESS",
+    scheduleTask: (task) => task(),
+  });
+
+  assert.equal(installed, true);
+  assert.deepEqual(dispatchedEvents, ["WeixinJSBridgeReady"]);
+  assert.ok(bridgeWindow.WeixinJSBridge);
+
+  const response = await new Promise<WeixinJsBridgeCallbackPayload>((resolve) => {
+    bridgeWindow.WeixinJSBridge?.invoke("getBrandWCPayRequest", buildBridgePayload(), resolve);
+  });
+
+  assert.equal(response.err_msg, "get_brand_wcpay_request:ok");
+  assert.equal(fetchCalls.length, 1);
+  assert.equal(
+    fetchCalls[0]?.url,
+    "https://wechatpay.partner-up.localhost/__fake_wechatpay/prepays/fake_prepay_123/succeed",
+  );
+  assert.equal(fetchCalls[0]?.init?.method, "POST");
+});
+
+test("fake WeChatPay bridge rejects unsupported bridge methods", async () => {
+  const bridgeWindow: Pick<Window, "WeixinJSBridge"> = {};
+
+  installFakeWeChatPayBridgeForTesting({
+    bridgeWindow,
+    bridgeDocument: {
+      dispatchEvent() {
+        return true;
+      },
+    },
+    fakeWeChatPayOrigin: "https://wechatpay.partner-up.localhost",
+    fetchImpl: async () => {
+      throw new Error("fetch should not be called");
+    },
+    presentPaymentClient: async () => "SUCCESS",
+    scheduleTask: (task) => task(),
+  });
+
+  const response = await new Promise<WeixinJsBridgeCallbackPayload>((resolve) => {
+    bridgeWindow.WeixinJSBridge?.invoke("chooseWXPay", buildBridgePayload(), resolve);
+  });
+
+  assert.equal(response.err_msg, "chooseWXPay:fail");
+});
+
+test("fake WeChatPay bridge does not override an existing bridge", () => {
+  let existingInvokeCalls = 0;
+  const existingBridge: WeixinJsBridgeApi = {
+    invoke(_method, _payload, callback) {
+      existingInvokeCalls += 1;
+      callback({
+        err_msg: "existing:ok",
+      });
+    },
+  };
+  const bridgeWindow: Pick<Window, "WeixinJSBridge"> = {
+    WeixinJSBridge: existingBridge,
+  };
+  const dispatchedEvents: string[] = [];
+
+  const installed = installFakeWeChatPayBridgeForTesting({
+    bridgeWindow,
+    bridgeDocument: {
+      dispatchEvent(event: Event) {
+        dispatchedEvents.push(event.type);
+        return true;
+      },
+    },
+    fakeWeChatPayOrigin: "https://wechatpay.partner-up.localhost",
+    fetchImpl: async () => new Response("{}", { status: 200 }),
+    presentPaymentClient: async () => "SUCCESS",
+    scheduleTask: (task) => task(),
+  });
+
+  assert.equal(installed, false);
+  assert.equal(bridgeWindow.WeixinJSBridge, existingBridge);
+  assert.deepEqual(dispatchedEvents, []);
+
+  bridgeWindow.WeixinJSBridge?.invoke("getBrandWCPayRequest", buildBridgePayload(), () => {});
+  assert.equal(existingInvokeCalls, 1);
+});
+
+test("fake WeChatPay bridge reports invalid prepay packages as failure", async () => {
+  const bridgeWindow: Pick<Window, "WeixinJSBridge"> = {};
+
+  installFakeWeChatPayBridgeForTesting({
+    bridgeWindow,
+    bridgeDocument: {
+      dispatchEvent() {
+        return true;
+      },
+    },
+    fakeWeChatPayOrigin: "https://wechatpay.partner-up.localhost",
+    fetchImpl: async () => new Response("{}", { status: 200 }),
+    presentPaymentClient: async () => "SUCCESS",
+    scheduleTask: (task) => task(),
+  });
+
+  const response = await new Promise<WeixinJsBridgeCallbackPayload>((resolve) => {
+    bridgeWindow.WeixinJSBridge?.invoke(
+      "getBrandWCPayRequest",
+      {
+        ...buildBridgePayload(),
+        package: "invalid-package",
+      },
+      resolve,
+    );
+  });
+
+  assert.match(
+    response.err_msg ?? "",
+    /^get_brand_wcpay_request:fail Fake WeChatPay bridge missing prepay_id package$/,
+  );
+});
+
+test("fake WeChatPay bridge can cancel a JSAPI payment attempt", async () => {
+  const fetchCalls: Array<{ url: string; init: RequestInit | undefined }> = [];
+  const bridgeWindow: Pick<Window, "WeixinJSBridge"> = {};
+
+  installFakeWeChatPayBridgeForTesting({
+    bridgeWindow,
+    bridgeDocument: {
+      dispatchEvent() {
+        return true;
+      },
+    },
+    fakeWeChatPayOrigin: "https://wechatpay.partner-up.localhost",
+    fetchImpl: async (url, init) => {
+      fetchCalls.push({
+        url: String(url),
+        init,
+      });
+      return new Response("{}", { status: 200 });
+    },
+    presentPaymentClient: async () => "CANCEL",
+    scheduleTask: (task) => task(),
+  });
+
+  const response = await new Promise<WeixinJsBridgeCallbackPayload>((resolve) => {
+    bridgeWindow.WeixinJSBridge?.invoke("getBrandWCPayRequest", buildBridgePayload(), resolve);
+  });
+
+  assert.equal(response.err_msg, "get_brand_wcpay_request:cancel");
+  assert.equal(
+    fetchCalls[0]?.url,
+    "https://wechatpay.partner-up.localhost/__fake_wechatpay/prepays/fake_prepay_123/close",
+  );
+});
+
+test("fake WeChatPay bridge can fail a JSAPI payment attempt", async () => {
+  const fetchCalls: Array<{ url: string; init: RequestInit | undefined }> = [];
+  const bridgeWindow: Pick<Window, "WeixinJSBridge"> = {};
+
+  installFakeWeChatPayBridgeForTesting({
+    bridgeWindow,
+    bridgeDocument: {
+      dispatchEvent() {
+        return true;
+      },
+    },
+    fakeWeChatPayOrigin: "https://wechatpay.partner-up.localhost",
+    fetchImpl: async (url, init) => {
+      fetchCalls.push({
+        url: String(url),
+        init,
+      });
+      return new Response("{}", { status: 200 });
+    },
+    presentPaymentClient: async () => "FAIL",
+    scheduleTask: (task) => task(),
+  });
+
+  const response = await new Promise<WeixinJsBridgeCallbackPayload>((resolve) => {
+    bridgeWindow.WeixinJSBridge?.invoke("getBrandWCPayRequest", buildBridgePayload(), resolve);
+  });
+
+  assert.equal(response.err_msg, "get_brand_wcpay_request:fail mock payment failed");
+  assert.equal(
+    fetchCalls[0]?.url,
+    "https://wechatpay.partner-up.localhost/__fake_wechatpay/prepays/fake_prepay_123/fail",
+  );
+});
diff --git a/apps/frontend/src/shared/wechat/fake-wechatpay-bridge.ts b/apps/frontend/src/shared/wechat/fake-wechatpay-bridge.ts
new file mode 100644
index 000000000..99af0c055
--- /dev/null
+++ b/apps/frontend/src/shared/wechat/fake-wechatpay-bridge.ts
@@ -0,0 +1,327 @@
+type WeixinJSBridgeApi = NonNullable<Window["WeixinJSBridge"]>;
+
+type BridgeWindow = Pick<Window, "WeixinJSBridge">;
+type BridgeDocument = Pick<Document, "dispatchEvent">;
+type BridgeFetch = (input: RequestInfo | URL, init?: RequestInit) => Promise<Response>;
+
+type FakeWeChatPayClientDecision = "SUCCESS" | "CANCEL" | "FAIL";
+
+type FakeWeChatPayBridgeDependencies = {
+  bridgeWindow: BridgeWindow;
+  bridgeDocument: BridgeDocument;
+  fetchImpl: BridgeFetch;
+  fakeWeChatPayOrigin: string;
+  presentPaymentClient?: (input: {
+    packageValue: string;
+  }) => Promise<FakeWeChatPayClientDecision>;
+  scheduleTask?: (task: () => void) => void;
+};
+
+const supportedBridgeMethod = "getBrandWCPayRequest";
+const supportedBridgeCallbackName = "get_brand_wcpay_request";
+const fakeClientOverlayAttribute = "data-partnerup-fake-wechatpay-client";
+const fakeClientTitle = "模拟微信支付";
+const fakeClientDescription = "开发环境支付面板，仅用于本地 checkout 调试。";
+
+const normalizeFakeWeChatPayOrigin = (origin: string | null | undefined): string | null => {
+  const normalized = origin?.trim() ?? "";
+  if (normalized.length === 0) {
+    return null;
+  }
+
+  try {
+    return new URL(normalized).toString();
+  } catch {
+    return null;
+  }
+};
+
+const buildBridgeFailureMessage = (detail: string | null = null): string =>
+  detail ? `${supportedBridgeCallbackName}:fail ${detail}` : `${supportedBridgeCallbackName}:fail`;
+
+const extractPrepayId = (packageValue: string): string => {
+  const prefix = "prepay_id=";
+  if (!packageValue.startsWith(prefix)) {
+    throw new Error("Fake WeChatPay bridge missing prepay_id package");
+  }
+
+  const prepayId = packageValue.slice(prefix.length).trim();
+  if (prepayId.length === 0) {
+    throw new Error("Fake WeChatPay bridge missing prepay_id package");
+  }
+
+  return prepayId;
+};
+
+const updateFakeWeChatPayState = async (input: {
+  decision: FakeWeChatPayClientDecision;
+  fakeWeChatPayOrigin: string;
+  packageValue: string;
+  fetchImpl: BridgeFetch;
+}): Promise<WeixinJsBridgeCallbackPayload> => {
+  const prepayId = extractPrepayId(input.packageValue);
+  const actionPath =
+    input.decision === "SUCCESS"
+      ? "succeed"
+      : input.decision === "CANCEL"
+        ? "close"
+        : "fail";
+  const url = new URL(
+    `/__fake_wechatpay/prepays/${encodeURIComponent(prepayId)}/${actionPath}`,
+    input.fakeWeChatPayOrigin,
+  );
+  const response = await input.fetchImpl(url, {
+    method: "POST",
+    headers: {
+      "content-type": "application/json",
+    },
+    body:
+      input.decision === "SUCCESS"
+        ? JSON.stringify({})
+        : JSON.stringify({
+            reason: input.decision === "CANCEL" ? "client cancel" : "client fail",
+          }),
+  });
+
+  if (!response.ok) {
+    throw new Error(`Fake WeChatPay bridge failed: ${response.status}`);
+  }
+
+  if (input.decision === "SUCCESS") {
+    return {
+      err_msg: `${supportedBridgeCallbackName}:ok`,
+    };
+  }
+
+  if (input.decision === "CANCEL") {
+    return {
+      err_msg: `${supportedBridgeCallbackName}:cancel`,
+    };
+  }
+
+  return {
+    err_msg: `${supportedBridgeCallbackName}:fail mock payment failed`,
+  };
+};
+
+const cleanupExistingFakeClientOverlay = (): void => {
+  if (typeof document === "undefined") return;
+  document.querySelector(`[${fakeClientOverlayAttribute}]`)?.remove();
+};
+
+const presentFakePaymentClient = async (input: {
+  packageValue: string;
+}): Promise<FakeWeChatPayClientDecision> => {
+  if (typeof document === "undefined") {
+    throw new Error("Fake WeChatPay payment client requires document");
+  }
+  const body = document.body;
+  if (!body) {
+    throw new Error("Fake WeChatPay payment client requires document.body");
+  }
+
+  cleanupExistingFakeClientOverlay();
+
+  return new Promise<FakeWeChatPayClientDecision>((resolve) => {
+    const overlay = document.createElement("div");
+    overlay.setAttribute(fakeClientOverlayAttribute, "true");
+    overlay.setAttribute("role", "presentation");
+    overlay.setAttribute(
+      "style",
+      [
+        "position:fixed",
+        "inset:0",
+        "z-index:2147483647",
+        "display:flex",
+        "align-items:center",
+        "justify-content:center",
+        "padding:24px",
+        "background:rgba(15, 23, 42, 0.56)",
+      ].join(";"),
+    );
+
+    const panel = document.createElement("div");
+    panel.setAttribute("role", "dialog");
+    panel.setAttribute("aria-modal", "true");
+    panel.setAttribute("aria-label", fakeClientTitle);
+    panel.setAttribute(
+      "style",
+      [
+        "width:min(100%, 360px)",
+        "border-radius:20px",
+        "background:#ffffff",
+        "box-shadow:0 24px 80px rgba(15, 23, 42, 0.24)",
+        "padding:20px",
+        "display:flex",
+        "flex-direction:column",
+        "gap:12px",
+        "font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+      ].join(";"),
+    );
+
+    const title = document.createElement("h2");
+    title.textContent = fakeClientTitle;
+    title.setAttribute(
+      "style",
+      "margin:0;font-size:18px;line-height:1.4;font-weight:700;color:#111827",
+    );
+
+    const description = document.createElement("p");
+    description.textContent = fakeClientDescription;
+    description.setAttribute(
+      "style",
+      "margin:0;font-size:14px;line-height:1.5;color:#4b5563",
+    );
+
+    const reference = document.createElement("p");
+    reference.textContent = `prepay_id=${extractPrepayId(input.packageValue)}`;
+    reference.setAttribute(
+      "style",
+      "margin:0;font-size:12px;line-height:1.5;color:#6b7280;word-break:break-all",
+    );
+
+    const actionGroup = document.createElement("div");
+    actionGroup.setAttribute(
+      "style",
+      "display:flex;flex-direction:column;gap:8px;margin-top:4px",
+    );
+
+    const finish = (decision: FakeWeChatPayClientDecision): void => {
+      cleanupExistingFakeClientOverlay();
+      window.removeEventListener("keydown", handleKeyDown);
+      resolve(decision);
+    };
+
+    const buildActionButton = (
+      label: string,
+      decision: FakeWeChatPayClientDecision,
+      background: string,
+      foreground: string,
+    ): HTMLButtonElement => {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.textContent = label;
+      button.setAttribute(
+        "style",
+        [
+          "appearance:none",
+          "border:none",
+          "border-radius:999px",
+          "padding:12px 16px",
+          "font-size:14px",
+          "font-weight:600",
+          "cursor:pointer",
+          `background:${background}`,
+          `color:${foreground}`,
+        ].join(";"),
+      );
+      button.addEventListener("click", () => finish(decision));
+      return button;
+    };
+
+    const handleKeyDown = (event: KeyboardEvent): void => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        finish("CANCEL");
+      }
+    };
+
+    overlay.addEventListener("click", (event) => {
+      if (event.target === overlay) {
+        finish("CANCEL");
+      }
+    });
+    window.addEventListener("keydown", handleKeyDown);
+
+    actionGroup.append(
+      buildActionButton("支付成功", "SUCCESS", "#16a34a", "#ffffff"),
+      buildActionButton("取消支付", "CANCEL", "#e5e7eb", "#111827"),
+      buildActionButton("模拟失败", "FAIL", "#dc2626", "#ffffff"),
+    );
+
+    panel.append(title, description, reference, actionGroup);
+    overlay.append(panel);
+    body.append(overlay);
+  });
+};
+
+const buildFakeWeChatPayBridge = (deps: FakeWeChatPayBridgeDependencies): WeixinJSBridgeApi => ({
+  invoke(method, payload, callback) {
+    if (method !== supportedBridgeMethod) {
+      callback({
+        err_msg: `${method}:fail`,
+      });
+      return;
+    }
+
+    const presentPaymentClient = deps.presentPaymentClient ?? presentFakePaymentClient;
+
+    void presentPaymentClient({
+      packageValue: payload.package,
+    })
+      .then((decision) =>
+        updateFakeWeChatPayState({
+          decision,
+          fakeWeChatPayOrigin: deps.fakeWeChatPayOrigin,
+          packageValue: payload.package,
+          fetchImpl: deps.fetchImpl,
+        }),
+      )
+      .then((response) => {
+        callback(response);
+      })
+      .catch((error: unknown) => {
+        callback({
+          err_msg:
+            error instanceof Error
+              ? buildBridgeFailureMessage(error.message)
+              : buildBridgeFailureMessage(),
+        });
+      });
+  },
+});
+
+export const installFakeWeChatPayBridgeForTesting = (
+  deps: FakeWeChatPayBridgeDependencies,
+): boolean => {
+  if (typeof deps.bridgeWindow.WeixinJSBridge?.invoke === "function") {
+    return false;
+  }
+
+  deps.bridgeWindow.WeixinJSBridge = buildFakeWeChatPayBridge(deps);
+  const scheduleTask = deps.scheduleTask ?? ((task: () => void) => window.setTimeout(task, 0));
+  scheduleTask(() => {
+    deps.bridgeDocument.dispatchEvent(new Event("WeixinJSBridgeReady"));
+  });
+  return true;
+};
+
+export const isFakeWeChatPayBridgeEnabled = (): boolean =>
+  import.meta.env.DEV &&
+  import.meta.env.VITE_FAKE_WECHATPAY_BRIDGE_ENABLED === "true" &&
+  normalizeFakeWeChatPayOrigin(import.meta.env.VITE_FAKE_WECHATPAY_ORIGIN) !== null;
+
+export const installFakeWeChatPayBridge = (): boolean => {
+  if (
+    !isFakeWeChatPayBridgeEnabled() ||
+    typeof window === "undefined" ||
+    typeof document === "undefined" ||
+    typeof fetch !== "function"
+  ) {
+    return false;
+  }
+
+  const fakeWeChatPayOrigin = normalizeFakeWeChatPayOrigin(
+    import.meta.env.VITE_FAKE_WECHATPAY_ORIGIN,
+  );
+  if (fakeWeChatPayOrigin === null) {
+    return false;
+  }
+
+  return installFakeWeChatPayBridgeForTesting({
+    bridgeWindow: window,
+    bridgeDocument: document,
+    fetchImpl: window.fetch.bind(window),
+    fakeWeChatPayOrigin,
+  });
+};
diff --git a/apps/frontend/src/types/wechat-jssdk.d.ts b/apps/frontend/src/types/wechat-jssdk.d.ts
index 7fd27942c..0c72cd558 100644
--- a/apps/frontend/src/types/wechat-jssdk.d.ts
+++ b/apps/frontend/src/types/wechat-jssdk.d.ts
@@ -19,6 +19,27 @@ declare global {
     getEnv: (callback: (res: WeChatMiniProgramEnv) => void) => void;
   };
 
+  type WeChatPayBridgePayload = {
+    appId: string;
+    timeStamp: string;
+    nonceStr: string;
+    package: string;
+    signType: "RSA";
+    paySign: string;
+  };
+
+  type WeixinJsBridgeCallbackPayload = {
+    err_msg?: string;
+  };
+
+  type WeixinJsBridgeApi = {
+    invoke: (
+      method: string,
+      payload: WeChatPayBridgePayload,
+      callback: (response: WeixinJsBridgeCallbackPayload) => void,
+    ) => void;
+  };
+
   type WeChatConfigPayload = {
     debug?: boolean;
     appId: string;
@@ -61,9 +82,7 @@ declare global {
       success?: (res: { localId: string }) => void;
       fail?: (error: unknown) => void;
     }) => void;
-    onVoiceRecordEnd: (callbacks: {
-      complete: (res: { localId: string }) => void;
-    }) => void;
+    onVoiceRecordEnd: (callbacks: { complete: (res: { localId: string }) => void }) => void;
     translateVoice: (payload: {
       localId: string;
       isShowProgressTips?: 0 | 1;
@@ -75,9 +94,7 @@ declare global {
 
   interface Window {
     __wxjs_environment?: string;
-    WeixinJSBridge?: {
-      invoke?: unknown;
-    };
+    WeixinJSBridge?: WeixinJsBridgeApi;
   }
 
   const wx: WeChatJssdk | undefined;
diff --git a/apps/frontend/src/vite-env.d.ts b/apps/frontend/src/vite-env.d.ts
index 242cf0e26..cea783a05 100644
--- a/apps/frontend/src/vite-env.d.ts
+++ b/apps/frontend/src/vite-env.d.ts
@@ -1,13 +1,16 @@
 /// <reference types="vite/client" />
 
-declare module '*.vue' {
-  import type { DefineComponent } from 'vue';
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+
   const component: DefineComponent<object, object, unknown>;
   export default component;
 }
 
 interface ImportMetaEnv {
   readonly VITE_API_URL: string;
+  readonly VITE_FAKE_WECHATPAY_BRIDGE_ENABLED?: "true" | "false";
+  readonly VITE_FAKE_WECHATPAY_ORIGIN?: string;
   readonly VITE_WECHAT_ABILITY_MOCKING_ENABLED?: "true" | "false";
   readonly VITE_WECHAT_MINIPROGRAM_WEBVIEW_MOCKING_ENABLED?: "true" | "false";
   readonly VITE_FRONTEND_COMMIT_HASH: string;
diff --git a/docs/20-product-tdd/ecommerce-contracts.md b/docs/20-product-tdd/ecommerce-contracts.md
index 9abf66c2c..a36cc7db5 100644
--- a/docs/20-product-tdd/ecommerce-contracts.md
+++ b/docs/20-product-tdd/ecommerce-contracts.md
@@ -100,6 +100,10 @@ Owns:
 
 - charge/refund obligation lines
 - BillLine-local provider execution slot identity
+- checkout target truth for a concrete bill line, including:
+  - whether the line is payable by the current viewer
+  - which provider instance is currently bound to an unfinished execution slot
+  - hero facts needed by checkout UI
 - BillLine settlement confirmation
 - settlement derivation over successful payment movements
 - reconciliation from current buyer-side total to target buyer-side total
@@ -117,11 +121,15 @@ Owns:
 - gateway callback verification and provider queries
 - provider-specific merchant order/refund reference derivation and parsing
 - payment provider registry and routing credentials
+- provider catalog discovery for a concrete client runtime
+- transient `PaymentTx` API resource reconstruction for polling current provider
+  execution state
 
 Does not own:
 
 - bill obligation semantics
 - persisted provider transaction lifecycle truth
+- synthetic checkout-target aggregate reads
 - service execution semantics
 
 Payment provider systems own gateway-facing payment lifecycle truth. Backend
@@ -140,6 +148,22 @@ BillLine owns the local provider execution slot for an obligation line:
 - provider-specific merchant order/refund numbers are derived by the provider
   adapter from BillLine-local key material and are not persisted as Bill truth.
 
+Current checkout interaction contract:
+
+- billing-owned reads provide checkout target truth
+- payment-owned writes and polling provide provider execution truth
+- `GET /api/payment/providers` returns the current client-scoped provider
+  catalog and must stay target-agnostic
+- `POST /api/payment/:paymentProviderInstanceId/charge?bill-line=...` initiates
+  or resumes charge execution for one bill line using an explicit provider
+  choice
+- `GET /api/payment/:paymentTxId` returns a transient `PaymentTx` resource view
+  reconstructed from BillLine execution-slot state plus live provider query
+  truth
+- if a bill line already has an unfinished provider binding, selecting a
+  different provider is rejected at charge-initiation time rather than hidden in
+  provider discovery
+
 ## User-Facing Route Spine
 
 Stable user-facing ecommerce route families are:
@@ -360,12 +384,16 @@ Rental:
 
 - prepaid
 - Bill exists before execution begins
+- typed order creation keeps the standard unpaid payment window on the base
+  Order timeout snapshot
 - Rental execution state is stored on `rental_orders`
 - booking state becomes actionable after prepaid settlement
 
 RideHailing:
 
 - usage-based final settlement
+- typed order creation overrides the base Order timeout snapshot so final-bill
+  payment is not constrained by the standard unpaid payment window
 - Order is created from candidate quote snapshots. For RideHailing, the user
   orders one unresolved choice-set item: several acceptable vehicle SKU
   candidates, with one final resolution.
diff --git a/packages/fake-wechatpay-server/src/fixtures.ts b/packages/fake-wechatpay-server/src/fixtures.ts
index 1a0d11d83..2e98efc11 100644
--- a/packages/fake-wechatpay-server/src/fixtures.ts
+++ b/packages/fake-wechatpay-server/src/fixtures.ts
@@ -1,4 +1,4 @@
-import { generateKeyPairSync } from "node:crypto";
+import { readFileSync } from "node:fs";
 import { z } from "zod";
 
 export const fakeMerchantCertificateSchema = z.object({
@@ -14,9 +14,7 @@ export const fakeWeChatPayConfigSchema = z.object({
   merchantCertificate: fakeMerchantCertificateSchema,
 });
 
-export type FakeMerchantCertificate = z.infer<
-  typeof fakeMerchantCertificateSchema
->;
+export type FakeMerchantCertificate = z.infer<typeof fakeMerchantCertificateSchema>;
 
 export type FakeWeChatPayConfig = z.infer<typeof fakeWeChatPayConfigSchema>;
 
@@ -28,45 +26,20 @@ export type FakeWeChatPayFixture = FakeWeChatPayConfig & {
   };
 };
 
-const generateRsaKeyPairPem = (): {
-  privateKeyPem: string;
-  publicKeyPem: string;
-} => {
-  const { privateKey, publicKey } = generateKeyPairSync("rsa", {
-    modulusLength: 2048,
-    privateKeyEncoding: {
-      format: "pem",
-      type: "pkcs8",
-    },
-    publicKeyEncoding: {
-      format: "pem",
-      type: "spki",
-    },
-  });
+const fakeWeChatPayFixtureSchema = fakeWeChatPayConfigSchema.extend({
+  platformCertificate: z.object({
+    serialNo: z.string().min(1),
+    publicKeyPem: z.string().min(1),
+    privateKeyPem: z.string().min(1),
+  }),
+});
 
-  return {
-    privateKeyPem: privateKey,
-    publicKeyPem: publicKey,
-  };
-};
+const stableDevFixture = fakeWeChatPayFixtureSchema.parse(
+  JSON.parse(
+    readFileSync(new URL("./fixtures/stable-dev-fixture.json", import.meta.url), "utf8"),
+  ) as unknown,
+);
 
 export function createFakeWeChatPayFixture(): FakeWeChatPayFixture {
-  const merchant = generateRsaKeyPairPem();
-  const platform = generateRsaKeyPairPem();
-
-  return {
-    appId: "wx_fake_partnerup_web",
-    mchId: "1900000001",
-    apiV3Key: "0123456789abcdef0123456789abcdef",
-    merchantCertificate: {
-      serialNo: "FAKE_MERCHANT_SERIAL_000000000001",
-      privateKeyPem: merchant.privateKeyPem,
-      certificatePem: merchant.publicKeyPem,
-    },
-    platformCertificate: {
-      serialNo: "FAKE_PLATFORM_SERIAL_000000000001",
-      publicKeyPem: platform.publicKeyPem,
-      privateKeyPem: platform.privateKeyPem,
-    },
-  };
+  return structuredClone(stableDevFixture);
 }
diff --git a/packages/fake-wechatpay-server/src/fixtures/stable-dev-fixture.json b/packages/fake-wechatpay-server/src/fixtures/stable-dev-fixture.json
new file mode 100644
index 000000000..b099aab8d
--- /dev/null
+++ b/packages/fake-wechatpay-server/src/fixtures/stable-dev-fixture.json
@@ -0,0 +1,15 @@
+{
+  "appId": "wx_fake_partnerup_web",
+  "mchId": "1900000001",
+  "apiV3Key": "0123456789abcdef0123456789abcdef",
+  "merchantCertificate": {
+    "serialNo": "FAKE_MERCHANT_SERIAL_000000000001",
+    "privateKeyPem": "-----BEGIN PRIVATE KEY-----\nMIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQCijFRIVWtysoSJ\nziyobX78pf83LVov3gwBDZwLN4eUJ2hLHB34/9xJc4tSsyu7LUThxtVaKSisoUi8\nBzFkA9A+jAmr7/PPhdg3gcJ24hOFM/JjaoPQJ12woqAaVeTEgqyEHGRh3k/3tJOI\nToTBjWjbdxZ1P/MQnDfx/zFZSCmZE+3DBVuSkqWQjRMHAik0PE6+whsRoekcHZzo\nrBrKRk7C54TrjE3pa/OLmC5efQwFtjuZ2qODiHDxrtDTLoW2IZohYddv8cddLSoZ\n1Rwe16yAia4HHNB/HzMZkCDYSMJ4dt+tsKa17H3cO4LqoBM0LPSKaJe4Rr2Zszof\nZfdbAEGVAgMBAAECggEAD9lK5nqdrWNGlQErTYjPlubAiaq8XmpyFTA0hMt3RrTI\n8HnfWkXoPqkrbnbVzrxNOQ5gAxh8RMi9BMhWwn+0sESLNN6CkTtlp5PZWCoW6Sf1\nfEgIbiVId06D+c1iLt7m30K9buV0Opy6vdGaFB0rmip0YB5KHtZ8hfXx49irZadp\n/oi9g3dIvBehrGuPLdJ3zuehhj/nV9aB63TN8eBPuffqREqUIsUB/e7aKvPM3tuB\nYhBChhYPdxeI0ihKH8Lq/63wvfBA3TNrKUGuULDU8pMrkLNFJvUK2NzKQoEydvPY\nk7jHuh2K7dwKhQbT5gQ8JZPe6o9fvYjWoLi+uHY7QQKBgQDRKoEezGKCbPFy6JTQ\n4URN3RbJ7Npy9RNXRadV7qfTdIvQrYKmbztjC6gp4cuaPDbo8x/PQh5Gcx0z9pQS\nVIuIvq8w8R1ATQFHksdjbZHo7McDvcUVagdLXVYQnIbWtukF6Y6H0WYbvOZRcjIR\nBW4Zt+pET3JTSta/QPf26l0oTQKBgQDG8aqdjqEbEklEIhBBbt3RO26Qm4wvaYzO\nQG+FDQvJ0UwR+wTo4rUPnumF+iukeuElZde7FRUCyUkaWaJfMAbvEWnMuFH4s9sa\nqxOB87sAan3AfIJdAZ17VGYq3P28UOK42h0DxkRRevUHHx3EIcKIs5B+lGf+bFL6\nhqM6KXKiaQKBgHiDhOG54QhEvNj4KMYxBKnYOMkfLr4NdpdSCpf4abnr7KLPVfeP\nHyhyDvISpry29OxDKJDCB6+Po8PMzoPBMqQXOdl5EuF5fMNATqF7ABa0VfZR4Lv1\n2z4RCQWJKieMO7asWvLmM27H5+wFX9NuzYED9nZlT/mtpQ2M4VHitsoBAoGASiEa\nlgLjfRbfPggDTp5lAOXIWRHctn35/ZB8/XLTBax7T+fc+HohRWTNVyLUyEERS8Ib\nFJbScWtXVf44Roe6zbILXkEAKk+6QMGmTzHmaE1F9kduvAEyERZty2L1GQp6sK51\nSUbDhijuzGyHxuFdf1qJaOEbru3mLXulrrJrCKECgYEAxnxm9yv/TulmJm486Ljk\njhCmFxCj8gW71R5iEOc4kHoOcBBamAdapeBp8UoK9tCkksgGjMfJ2+yMo992/gY0\nMoWRKTLPy5UiimRwZz35hz/5ul1CljvcEmbpnLRfRmndNqse27fKxmZbzGH6hU7I\nplVhsSlu1LQ6e1EbD689whE=\n-----END PRIVATE KEY-----\n",
+    "certificatePem": "-----BEGIN PUBLIC KEY-----\nMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAooxUSFVrcrKEic4sqG1+\n/KX/Ny1aL94MAQ2cCzeHlCdoSxwd+P/cSXOLUrMruy1E4cbVWikorKFIvAcxZAPQ\nPowJq+/zz4XYN4HCduIThTPyY2qD0CddsKKgGlXkxIKshBxkYd5P97STiE6EwY1o\n23cWdT/zEJw38f8xWUgpmRPtwwVbkpKlkI0TBwIpNDxOvsIbEaHpHB2c6KwaykZO\nwueE64xN6Wvzi5guXn0MBbY7mdqjg4hw8a7Q0y6FtiGaIWHXb/HHXS0qGdUcHtes\ngImuBxzQfx8zGZAg2EjCeHbfrbCmtex93DuC6qATNCz0imiXuEa9mbM6H2X3WwBB\nlQIDAQAB\n-----END PUBLIC KEY-----\n"
+  },
+  "platformCertificate": {
+    "serialNo": "FAKE_PLATFORM_SERIAL_000000000001",
+    "publicKeyPem": "-----BEGIN PUBLIC KEY-----\nMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEArbBo2UeMmuLJXZJ5G1nq\n3s0Z3pvHwYbCJejNvFjejoGdyRh+ehQB/XRA6BeKIfNJAF7kOPnnBrS1BGpSOLF4\n0w7nqNvAqziNAopoh3j0PsPnkvbjgt/1PwbbwMoWnuewm0B1zgaO+wtRgYaAFSyC\n5M6T8pv/ZyzxKZpTAJ4ZdGitmAn40mXOMmTcDYdLTakYc81bpeePl5WYO/5Jz67s\ntNguc/pZXl72VJXVvhomEsfPgelXvGtDJ2t+gewrDWvgzFzWLj3cFuxHwqXBbZUd\n0l50SVHyX6xSfOiTLrXDC2lup7t4BAwp4JN2i0IhN/viGZvBh4LzJGcl7A82Eq2L\nRQIDAQAB\n-----END PUBLIC KEY-----\n",
+    "privateKeyPem": "-----BEGIN PRIVATE KEY-----\nMIIEvAIBADANBgkqhkiG9w0BAQEFAASCBKYwggSiAgEAAoIBAQCtsGjZR4ya4sld\nknkbWerezRnem8fBhsIl6M28WN6OgZ3JGH56FAH9dEDoF4oh80kAXuQ4+ecGtLUE\nalI4sXjTDueo28CrOI0CimiHePQ+w+eS9uOC3/U/BtvAyhae57CbQHXOBo77C1GB\nhoAVLILkzpPym/9nLPEpmlMAnhl0aK2YCfjSZc4yZNwNh0tNqRhzzVul54+XlZg7\n/knPruy02C5z+lleXvZUldW+GiYSx8+B6Ve8a0Mna36B7CsNa+DMXNYuPdwW7EfC\npcFtlR3SXnRJUfJfrFJ86JMutcMLaW6nu3gEDCngk3aLQiE3++IZm8GHgvMkZyXs\nDzYSrYtFAgMBAAECggEAFJaGPHMfDIujTiR67INiXsSLCM2zBj02AuOvN2CFXk5T\nk1mu7EOLii00iw5MllejKJhsOati93Lbc3Qy3iYolJlTW7r+AeMIe+ucwP9/sXeW\nmd9f+ncXjT//3mtV9myvjMeS7zfsd397oCcpmYOW2bj5j9bD6x6dpiPKgOvnR9qf\nZXTWQw9Z2S2cekTh5C7KnPvUtHGmr038zMCMKPzf+LqFs5tjCOCl5JPy6XdOEEq6\njMbv8u3LLrb0ASOykQOpuRM5DJ75bdNmTMXf666fZlhsF328qE6nmfrvVqZ9WKYD\n/OuHbnz+cf/rQEavuERjUKK0gtSn1FMLq+IzbFwIxQKBgQD0ufjrHKhYKcN7Qls1\nB4iBKv6eVcYmQ/f9PZZK7IFiNdYwqSgX4H5zdcrXDPjoegAGMrh+x5ToaLQmynF2\nBMMahsYhSCfqbrP34H3+hOmfaeAkPBeqGNIqClxKCQuB2AxQX3wRl8WpKe/W5U4a\nu9K8Wq6tRE3LO7STixgGyH5BxwKBgQC1sLPsSWNbJcTQuKxI8cv1xZR0H5lcYIXG\nqrOsL/tzqS8aRYHb8Jcj+faneF1JsX3ztHF9qpmKBIUYuh1QOaH+nD/S8n9rBf3Y\n0yfFfnC2KvwNSgMUN++BIOcK2B5GojAonCpMOUUkkst6pSdE98ed0cwZGaLDGjiT\nOhg9H4QKkwKBgHlk6unNjGA3T0WMM+wJMZhJOIZYK/N9Ub1n2G6QBNovtHDs5/t4\nG6Gwc47bW3kOU4a/kC8rV1012u9HCqMtV46H/i4yOcKbaWBzFmyzh6PRBCNVP7Pb\nnhzGiOMcu32MKwePZd7gN2djaxphIq42LyHJpc5DDIfctQVfQOrUd3SvAoGANYc1\nuut0Jipebc+6klMKcAIh1oRovlqBjyJDhPst7cluYyMPOykKnkLKdFR1x3xPSzli\nJk/YpFzoiXxrnnMcUtLdytw+xd0iCHtNQFYcBs9rKs8fURmZqkVzTDKX2N93qL85\nhvNod3n4EM4PX7ZQTSK+KrbuyOQ0vsti0L80O5kCgYByf5spLtL7H9yYVt9efkuB\nuG4DV3H1bP8TP4881HhTli4iKeYHhcg9j4tDyKNOePGr5ZHz00He07ZPOblMxecV\nwTEA+mwdvLZmgwWLPHWSKzMhnU1udU8t+nms0AgdniN00OWR1KlPCO6GYAAI79c7\nzTfnFvIM53un14STptuZKw==\n-----END PRIVATE KEY-----\n"
+  }
+}
diff --git a/packages/fake-wechatpay-server/src/routes.ts b/packages/fake-wechatpay-server/src/routes.ts
index 00addd3d9..73e12722b 100644
--- a/packages/fake-wechatpay-server/src/routes.ts
+++ b/packages/fake-wechatpay-server/src/routes.ts
@@ -177,6 +177,11 @@ const refundResource = (refund: FakeRefundState): unknown => ({
   amount: refund.amount,
 });
 
+const findTransactionByPrepayIdOrThrow = (
+  state: FakeWeChatPayState,
+  prepayId: string,
+): FakeTransactionState | null => state.findTransactionByPrepayId(prepayId);
+
 const encryptedNotificationBody = (input: {
   apiV3Key: string;
   eventType: string;
@@ -372,7 +377,10 @@ export function createFakeWeChatPayApp(input: FakeWeChatPayServerAppInput): Hono
 
   app.post("/__fake_wechatpay/prepays/:prepayId/succeed", async (c) => {
     await readJson(c);
-    const transaction = state.findTransactionByPrepayId(c.req.param("prepayId"));
+    const transaction = findTransactionByPrepayIdOrThrow(
+      state,
+      c.req.param("prepayId"),
+    );
     if (!transaction) {
       return plainJson({ message: "Fake prepay not found" }, { status: 404 });
     }
@@ -396,6 +404,42 @@ export function createFakeWeChatPayApp(input: FakeWeChatPayServerAppInput): Hono
     return plainJson(fakeTransactionStateSchema.parse(updated));
   });
 
+  app.post("/__fake_wechatpay/prepays/:prepayId/close", async (c) => {
+    failBodySchema.parse(await readJson(c));
+    const transaction = findTransactionByPrepayIdOrThrow(
+      state,
+      c.req.param("prepayId"),
+    );
+    if (!transaction) {
+      return plainJson({ message: "Fake prepay not found" }, { status: 404 });
+    }
+    const updated = state.markTransaction({
+      outTradeNo: transaction.outTradeNo,
+      tradeState: "CLOSED",
+    });
+    return updated
+      ? plainJson(fakeTransactionStateSchema.parse(updated))
+      : plainJson({ message: "Fake prepay not found" }, { status: 404 });
+  });
+
+  app.post("/__fake_wechatpay/prepays/:prepayId/fail", async (c) => {
+    failBodySchema.parse(await readJson(c));
+    const transaction = findTransactionByPrepayIdOrThrow(
+      state,
+      c.req.param("prepayId"),
+    );
+    if (!transaction) {
+      return plainJson({ message: "Fake prepay not found" }, { status: 404 });
+    }
+    const updated = state.markTransaction({
+      outTradeNo: transaction.outTradeNo,
+      tradeState: "PAYERROR",
+    });
+    return updated
+      ? plainJson(fakeTransactionStateSchema.parse(updated))
+      : plainJson({ message: "Fake prepay not found" }, { status: 404 });
+  });
+
   app.post("/__fake_wechatpay/transactions/:outTradeNo/succeed", async (c) => {
     await readJson(c);
     const updated = state.markTransaction({
diff --git a/packages/fake-wechatpay-server/src/server.test.ts b/packages/fake-wechatpay-server/src/server.test.ts
index 01139d72d..56c561a3b 100644
--- a/packages/fake-wechatpay-server/src/server.test.ts
+++ b/packages/fake-wechatpay-server/src/server.test.ts
@@ -18,4 +18,97 @@ describe("startFakeWeChatPayServer", () => {
 
     expect(response.ok).toBe(true);
   });
+
+  test("supports prepay keyed success, close, and fail transitions", async () => {
+    server = await startFakeWeChatPayServer({
+      verifyRequests: false,
+    });
+
+    const transaction = server.state.createTransaction({
+      amount: {
+        total: 4_000,
+        currency: "CNY",
+      },
+      appid: "wx-dev-app",
+      description: "Ride hailing payment",
+      h5Url: null,
+      mchid: "mch-dev-001",
+      notifyUrl: `${server.origin}/health`,
+      outTradeNo: "merchant-order-001",
+      payerOpenid: "openid-dev-001",
+    });
+
+    const succeedResponse = await fetch(
+      `${server.origin}/__fake_wechatpay/prepays/${encodeURIComponent(transaction.prepayId)}/succeed`,
+      {
+        method: "POST",
+      },
+    );
+    expect(succeedResponse.ok).toBe(true);
+    expect(server.state.findTransactionByOutTradeNo(transaction.outTradeNo)?.tradeState).toBe(
+      "SUCCESS",
+    );
+
+    const secondTransaction = server.state.createTransaction({
+      amount: {
+        total: 4_000,
+        currency: "CNY",
+      },
+      appid: "wx-dev-app",
+      description: "Ride hailing payment",
+      h5Url: null,
+      mchid: "mch-dev-001",
+      notifyUrl: `${server.origin}/health`,
+      outTradeNo: "merchant-order-002",
+      payerOpenid: "openid-dev-002",
+    });
+
+    const closeResponse = await fetch(
+      `${server.origin}/__fake_wechatpay/prepays/${encodeURIComponent(secondTransaction.prepayId)}/close`,
+      {
+        method: "POST",
+        headers: {
+          "content-type": "application/json",
+        },
+        body: JSON.stringify({
+          reason: "client cancel",
+        }),
+      },
+    );
+    expect(closeResponse.ok).toBe(true);
+    expect(server.state.findTransactionByOutTradeNo(secondTransaction.outTradeNo)?.tradeState).toBe(
+      "CLOSED",
+    );
+
+    const thirdTransaction = server.state.createTransaction({
+      amount: {
+        total: 4_000,
+        currency: "CNY",
+      },
+      appid: "wx-dev-app",
+      description: "Ride hailing payment",
+      h5Url: null,
+      mchid: "mch-dev-001",
+      notifyUrl: `${server.origin}/health`,
+      outTradeNo: "merchant-order-003",
+      payerOpenid: "openid-dev-003",
+    });
+
+    const failResponse = await fetch(
+      `${server.origin}/__fake_wechatpay/prepays/${encodeURIComponent(thirdTransaction.prepayId)}/fail`,
+      {
+        method: "POST",
+        headers: {
+          "content-type": "application/json",
+        },
+        body: JSON.stringify({
+          reason: "client fail",
+        }),
+      },
+    );
+    expect(failResponse.ok).toBe(true);
+    expect(server.state.findTransactionByOutTradeNo(thirdTransaction.outTradeNo)?.tradeState).toBe(
+      "PAYERROR",
+    );
+  });
 });
diff --git a/tasks/ride-hailing-ui-fixes/change-log.md b/tasks/ride-hailing-ui-fixes/change-log.md
index 2b242cdef..f51c8dc68 100644
--- a/tasks/ride-hailing-ui-fixes/change-log.md
+++ b/tasks/ride-hailing-ui-fixes/change-log.md
@@ -7,7 +7,379 @@ Archived full history:
 
 - `archive/change-log-ordering-through-order-detail-map.md`
 
-## Current Slice: Bill Detail Page Reset And Backend Contract Segment
+## Current Slice: Payment Client UI / Attempt Identity
+
+- Requested slice:
+  - turn the checkout repair into a usable local payment-client loop
+  - diagnose whether the long `paymentTxId` means the system has two competing
+    payment-transaction identities
+- Implementation result:
+  - repaired the runtime fake `WeixinJSBridge` by binding native browser
+    `fetch` before the bridge calls the fake payment provider
+  - widened the fake bridge into a dev-only payment-client overlay with:
+    - `支付成功`
+    - `取消支付`
+    - `模拟失败`
+  - added fake-provider prepay-keyed transitions for:
+    - `succeed`
+    - `close`
+    - `fail`
+  - changed `launch-payment-client-action` to return structured client result
+    semantics instead of discarding bridge callback `err_msg`
+  - refactored `PaymentCheckoutFlow` from request-level loading into
+    attempt-phase orchestration with:
+    - stable CTA labels
+    - polling dialog + spinner
+    - no CTA loading flicker during reconciliation
+    - backend-authoritative terminal handling
+  - ratified the current attempt identity model instead of forcing convergence:
+    - canonical tuple:
+      `kind + billLineId + paymentProviderInstanceId + attemptCount`
+    - backend projection: `paymentTxId`
+    - provider projection: `merchantOrderNo / out_trade_no`
+- Verification result:
+  - focused frontend unit tests passed:
+    - `apps/frontend/src/shared/wechat/fake-wechatpay-bridge.test.ts`
+    - `apps/frontend/src/domains/payment/use-cases/launch-payment-client-action.test.ts`
+  - fake WeChatPay server unit tests passed
+  - frontend typecheck passed
+  - focused RideHailing system scenario passed:
+    `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts -t commerce_ride_hailing_ordering_reaches_order_detail`
+
+## Current Slice: Typed-Order Timeout Override For RideHailing Final-Bill Payment
+
+- Requested slice:
+  - fix RideHailing final-bill payment without introducing payment-side family
+    branching
+  - keep timeout override owned by typed order creation
+- Implementation result:
+  - `createBaseOrder` now accepts a full timeout snapshot from the typed-order
+    caller
+  - Rental creation paths still write the standard 30-minute unpaid-window
+    timeout
+  - RideHailing creation paths now write a non-expiring timeout snapshot:
+    - `unpaidExpiresAt = 9999-12-31T23:59:59.999Z`
+    - `defaultWindowMinutes = 0`
+  - payment-side timeout readers remain family-agnostic
+  - durable contract wording now records the owner split:
+    - Rental keeps the standard unpaid payment window on the base-order timeout
+      snapshot
+    - RideHailing overrides that snapshot so final-bill payment is not bounded
+      by the standard unpaid window
+- Verification result:
+  - backend typecheck passed
+  - focused backend scenarios for RideHailing foundation and Rental persistence
+    passed
+  - focused RideHailing system scenario passed
+  - `git diff --check` passed
+
+## Current Slice: Payment Checkout Interaction / UI Implementation
+
+- Requested slice:
+  - replace the legacy commerce checkout aggregate with Billing-owned
+    bill-line target reads plus Payment-owned provider / `PaymentTx` facts
+  - implement the real checkout interaction:
+    provider single-select, JSAPI launch, backend reconciliation, and
+    success auto-return
+- Implementation result:
+  - removed legacy frontend checkout data hooks:
+    - `usePaymentCheckout`
+    - `useCreateChargeForBillLine`
+    - `useSyncBillLinePayment`
+  - removed legacy backend compatibility implementation files:
+    - `domains/payment/use-cases/payment-checkout.ts`
+    - `domains/payment/use-cases/get-bill-detail.ts`
+    - `domains/payment/services/bill-payment-state.ts`
+  - frontend checkout now reads:
+    - Billing-owned `GET /api/commerce/bill-lines/:billLineId`
+    - Payment-owned `GET /api/payment/providers`
+    - Payment-owned `POST /api/payment/:paymentProviderInstanceId/charge?bill-line=...`
+    - Payment-owned `GET /api/payment/:paymentTxId`
+  - added checkout feature files:
+    - `apps/frontend/src/domains/payment/queries/usePayment.ts`
+    - `apps/frontend/src/domains/payment/use-cases/launch-payment-client-action.ts`
+    - `apps/frontend/src/domains/payment/ui/primitives/PaymentCheckoutHero.vue`
+    - `apps/frontend/src/domains/payment/ui/surfaces/PaymentCheckoutFlow.vue`
+  - `PaymentCheckoutPage.vue` is now a route-only entrypoint that delegates to
+    the payment-domain surface
+  - checkout UI now provides:
+    - `PuCell + PuRadio + usePuSelect` provider selection
+    - checkout-specific BillLine hero
+    - bottom-anchored CTA
+    - generic provider-conflict dialog
+    - backend-authoritative payment status reconciliation after bridge return
+    - short success state followed by automatic return to Bill Detail
+  - focused RideHailing scenario now:
+    - installs fake WeChatPay bridge
+    - clicks the checkout pay CTA
+    - verifies automatic return to Bill Detail
+    - waits for post-payment Bill Detail state convergence before asserting
+- Verification result:
+  - backend typecheck passed
+  - frontend typecheck passed
+  - bill payment-state unit test passed
+  - focused RideHailing system scenario passed
+
+## Current Slice: Payment Checkout Page Reset And IA Grounding
+
+- Requested next slice:
+  - user-facing route should become `/payment/checkout?bill-line=`
+  - checkout page semantics should be payment-first instead of bill-line-first
+  - first action should mirror the Bill Detail workflow:
+    reset the current page body before redesign
+- Confirmed current implementation facts:
+  - current route is `/bill-lines/:billLineId/checkout`
+  - current frontend page parses `route.params.billLineId`
+  - current query owner is `usePaymentCheckout(billLineId)`
+  - current backend route is `GET /api/commerce/bill-lines/:billLineId/checkout`
+  - current Bill Detail CTA uses backend-authored
+    `lines[].checkoutHref = /bill-lines/:billLineId/checkout`
+  - current system scenario asserts the same route shape
+  - local prerequisite reset is partially done by user:
+    `PaymentCheckoutPage.vue` subtitle removed, not yet committed
+- Confirmed design/ownership decisions:
+  - Bill Detail CTA should stop depending on backend-authored checkout hrefs
+  - frontend should own the eventual `/payment/checkout?...` route shape
+  - backend should instead own payable-target facts, not user-facing route text
+- Confirmed dev-environment decisions:
+  - local mock payment provider baseline belongs in
+    `apps/backend/data-migrations/` with `-- migration: environments=development`
+  - it must not use `apps/backend/drizzle/`
+  - that seed depends on stabilizing the fake WeChatPay fixture first, because
+    the current fake server generates merchant credentials per boot
+- Opened slice artifact:
+  - `payment-checkout-page-reset-plan.md`
+- Frontend reset implementation:
+  - removed the current `PaymentCheckoutPage` successful-state body content
+  - preserved invalid-id, loading, error, and back-navigation shell behavior
+  - intentionally cleared the old bill-line-first amount/provider UI
+- Scenario adjustment:
+  - removed old checkout body assertions for amount and return-to-bill action
+  - scenario now asserts checkout page reachability and back-navigation to Bill
+    Detail
+  - aligned one stale order-detail back-button locator to the real accessible
+    label `返回上一页`
+- Verification result:
+  - focused biome check passed
+  - frontend typecheck passed
+  - focused RideHailing system scenario passed
+
+## Current Slice: Payment Checkout Route / Ownership
+
+- Requested segment:
+  - move the user-facing checkout route to `/payment/checkout?bill-line=`
+  - frontend should own route topology; backend should stop returning
+    `checkoutHref`
+- Confirmed implementation direction:
+  - keep backend checkout/charge/sync endpoints bill-line-scoped for now
+  - keep checkout page reset shell intact
+  - use a frontend-owned route helper instead of scattering path strings
+- Planned address:
+  - frontend router, checkout page, bill-detail page, bill-line card
+  - backend bill-detail projection
+  - focused RideHailing system scenario
+- Open next implementation artifact inside:
+  - `payment-checkout-page-reset-plan.md`
+- Implementation result:
+  - added frontend-owned checkout route helper at
+    `apps/frontend/src/domains/commerce/routing/payment-checkout-route.ts`
+  - moved frontend checkout route to `/payment/checkout`
+  - switched checkout page target parsing from route param to `bill-line` query
+  - removed backend `checkoutHref` from bill-detail projection
+  - switched Bill Detail CTA to frontend-built checkout navigation
+  - simplified BillLine Card selectable gating to `payableByViewer`
+- Verification result:
+  - focused biome check passed
+  - frontend typecheck passed
+  - backend typecheck passed
+  - focused RideHailing system scenario passed
+
+## Current Slice: Payment Checkout Interaction / Contract Planning
+
+- Requested planning update:
+  - lock checkout runtime behavior before wireframe
+  - define CTA behavior and payment-method ownership/source
+- Confirmed runtime findings:
+  - current CTA backend path is `POST /api/commerce/bill-lines/:billLineId/charges`
+  - current payment sync path is
+    `POST /api/commerce/bill-lines/:billLineId/payment/sync`
+  - current provider client actions are `WECHAT_BRIDGE` and
+    `PAYMENT_REDIRECT`
+  - current frontend has no checkout-specific WeChat bridge execution layer yet
+  - backend currently owns provider selection by `clientId` or existing line
+    execution slot
+  - backend model currently supports only one active provider instance per
+    `clientId`
+  - provider config currently supports only one `chargeMode` per provider
+    instance
+  - local fake WeChatPay server exists, but runtime dev frontend does not yet
+    have a fake JSAPI bridge adapter; only scenario stub exists
+- Confirmed contract conflict:
+  - older schema created `payment_txs`
+  - later migration `0078_bill_line_payment_slot.sql` removed `payment_txs`
+  - current durable doc says provider transaction lifecycle truth is not
+    persisted as backend payment transaction truth
+- Latest human-corrected direction:
+  - `PaymentTx` concept stays, but the deleted historical `payment_txs` table
+    must not return
+  - payment initiation should move under `/api/payment/*`
+  - initiation should return `PaymentTx`
+  - payment result polling should become `GET /api/payment/:paymentTxId`
+  - provider discovery should become a separate backend query surface
+  - active-provider-per-client uniqueness should be removed
+- Confirmed planning direction:
+  - the next slice is a backend contract reset, not UI-only implementation
+  - provider choice should not be pre-restricted in UI
+  - if an in-progress `PaymentTx` already binds a provider, mismatched choice
+    should fail at charge-initiation time and be handled by dialog
+  - recommended `PaymentTx` direction is an explicit API/domain resource with
+    opaque id resolution, not a restoration of the old `payment_txs` table
+  - checkout target truth should remain on billing-owned reads rather than a
+    new synthetic payment checkout read
+  - provider discovery does not need stable default-provider semantics
+  - preferred charge-initiation path shape is now
+    `POST /api/payment/:paymentProviderInstanceId/charge?bill-line=...`
+  - wireframe discussion should happen after the `PaymentTx` contract direction
+    is agreed
+- Standalone artifact opened:
+  - `payment-checkout-backend-contract-plan.md`
+- Implementation result:
+  - durable contract doc now explicitly states:
+    - Billing owns checkout target truth
+    - Payment owns provider discovery and transient `PaymentTx`
+  - removed the single-active-provider-per-client constraint from payment
+    provider instances
+  - added schema migration:
+    `apps/backend/drizzle/0082_payment_provider_multi_active_per_client.sql`
+  - added authenticated payment routes:
+    - `GET /api/payment/providers`
+    - `POST /api/payment/:paymentProviderInstanceId/charge?bill-line=...`
+    - `GET /api/payment/:paymentTxId`
+  - added transient `PaymentTx` id encoding/decoding and provider-query-backed
+    polling
+  - charge initiation now rejects unfinished mismatched-provider choice with
+    `PAYMENT_PROVIDER_CONFLICT`
+  - provider notify routes stay unchanged under `/api/payment/wechat-pay/*`
+  - legacy commerce checkout endpoints remain for compatibility while frontend
+    migrates
+- Verification result:
+  - backend typecheck passed
+  - backend migration lint/check passed
+  - focused backend payment scenario passed against the new `/api/payment/*`
+    contract
+  - scenario proves multi-provider support, charge-time conflict, transient
+    `PaymentTx` polling, and absence of `payment_txs`
+
+## Opened Slice: Payment Checkout Fake JSAPI Bridge Planning
+
+- Requested segment:
+  - verify fake runtime direction against official WeChatPay v3 JSAPI docs
+  - update task packet before implementation
+- Confirmed doc-aligned direction:
+  - frontend payment invocation must model
+    `WeixinJSBridge.invoke("getBrandWCPayRequest", payload, callback)`
+  - payload field names and casing must stay exactly:
+    `appId / timeStamp / nonceStr / package / signType / paySign`
+  - `WeixinJSBridgeReady` remains the correct structural readiness event
+  - bridge callback result is not final payment truth; checkout must still poll
+    backend `PaymentTx`
+- Confirmed local-runtime findings:
+  - scenario-only fake bridge already exists at
+    `tests/scenario/_infra/browser/wechatpay.ts`
+  - fake WeChatPay server already supports
+    `POST /__fake_wechatpay/prepays/:prepayId/succeed`
+  - runtime frontend still has no dev-only fake `WeixinJSBridge`
+- Opened slice artifact:
+  - `payment-checkout-fake-jsapi-bridge-plan.md`
+- Recommended segment boundary:
+  - dev-only fake bridge shim only
+  - no backend contract mutation
+  - no page IA or wireframe mutation
+  - no H5 mocking
+- Implementation result:
+  - added frontend fake bridge module:
+    `apps/frontend/src/shared/wechat/fake-wechatpay-bridge.ts`
+  - installed the bridge from app bootstrap:
+    `apps/frontend/src/app/create-app.ts`
+  - added env typing and example vars for:
+    - `VITE_FAKE_WECHATPAY_BRIDGE_ENABLED`
+    - `VITE_FAKE_WECHATPAY_ORIGIN`
+  - refined `window.WeixinJSBridge` typing
+  - added focused frontend unit tests
+  - local ignored `apps/frontend/.env` is now enabled for this bridge against
+    `https://wechatpay.partner-up.localhost`
+- Verification result:
+  - frontend typecheck passed
+  - focused frontend unit tests passed
+  - bridge module now proves install, supported invoke, unsupported invoke,
+    non-override behavior, and invalid prepay package failure handling
+  - remaining gap: Payment Checkout page still lacks the user-visible JSAPI
+    invocation path, so local manual button-flow proof belongs to the next UI
+    slice
+
+## Opened Slice: Payment Checkout Interaction / UI Planning
+
+- Requested planning correction:
+  - stop treating IA / wireframe as separable from interaction and contract
+    alignment
+  - revisit the page against the approved backend contract changes
+  - prepare a standalone segment plan file
+- Confirmed corrections:
+  - provider discovery must stay target-agnostic
+  - checkout UI must not pre-announce unfinished provider binding from the
+    provider list
+  - channel implementation details such as `JSAPI` / `H5` should not be shown
+    in the primary method list
+  - current frontend still depends on the legacy commerce checkout aggregate,
+    which is the wrong assembly direction for the approved owner model
+- New standalone artifact:
+  - `payment-checkout-interaction-ui-plan.md`
+- Planned direction:
+  - likely merge route shape adjustment, frontend query-owner migration, page
+    IA, pay-action state machine, and minimal backend conflict-payload
+    alignment into one implementation slice
+  - corrected route conclusion:
+    `billLineId` itself is enough for the user-facing checkout route; the real
+    owner-alignment gap is the absence of a Billing-owned bill-line read
+    surface that can replace the legacy checkout aggregate
+
+## Opened Slice: Local Mock Payment Provider Baseline Planning
+
+- Requested segment:
+  - create a stable local payment-provider baseline for checkout development
+- Confirmed planning direction:
+  - baseline should target `clientId = web`
+  - baseline should prefer `chargeMode = JSAPI`
+  - stable fake fixture source must land before provider-instance seed
+  - development-only seed belongs in `apps/backend/data-migrations/`
+- Confirmed implementation decisions:
+  - stable fake fixture will be stored as a committed asset
+  - development-only seed will rely on runtime platform-certificate refresh
+- Opened slice artifact:
+  - `local-mock-payment-provider-baseline-plan.md`
+- Implementation result:
+  - added committed fake fixture asset at
+    `packages/fake-wechatpay-server/src/fixtures/stable-dev-fixture.json`
+  - changed fake WeChatPay fixture loading to parse that committed asset
+  - added development-only provider baseline migration:
+    `apps/backend/data-migrations/0081_dev_mock_payment_provider_baseline.sql`
+  - baseline seeds active client `web` provider
+    `dev-fake-wechatpay-web` with `JSAPI` mode and
+    `https://wechatpay.partner-up.localhost`
+  - baseline leaves `platformCertificates = null` for runtime refresh
+  - baseline disables conflicting active `web` payment-provider rows before
+    activating the seeded row
+- Verification result:
+  - fake WeChatPay package typecheck passed
+  - fake WeChatPay package tests passed
+  - backend typecheck passed
+  - migration lint passed
+  - `git diff --check` passed
+  - current local `db:migrate:dev` remains blocked by a pre-existing local
+    issue in historical migration `0061_user_telemetry_v2.sql`
+  - isolated temporary-database `db:migrate:dev` passed and applied `0081`
+
+## Previous Slice: Bill Detail Page Reset And Backend Contract Segment
 
 - Requested first mutation for the next slice:
   - remove Bill Detail page body content
diff --git a/tasks/ride-hailing-ui-fixes/control.md b/tasks/ride-hailing-ui-fixes/control.md
index 212546745..1370a7629 100644
--- a/tasks/ride-hailing-ui-fixes/control.md
+++ b/tasks/ride-hailing-ui-fixes/control.md
@@ -19,7 +19,9 @@ Hypothesis:
 ## Classification
 
 - Primary route: `Reality`
-- Active mode: `Execute` for Bill Detail page reset and backend-contract segment
+- Active mode: `Execute` completed for the Payment Checkout interaction/UI
+  slice; backend contract, fake JSAPI bridge groundwork, and checkout runtime
+  interaction are now connected end-to-end
 - Current collaboration state: choice-set backend/domain foundation, Ordering
   UI primitive/control, SKU Card layout remediation, Offer Listing / quote
   identity, Ordering entry decoupling, durable docs promotion, and fake provider
@@ -34,9 +36,26 @@ Hypothesis:
   treated as an action, not as a required visible `Call` text label; current
   implementation slice covers order-detail back-navigation semantics and a
   resolved-vehicle section above route facts; Bill Card integration is now
-  committed; current slice resets and rebuilds Bill Detail page around
+  committed; previous slice reset and rebuilt Bill Detail page around
   backend-owned bill totals, payer-enriched bill lines, single-select checkout,
-  and verified RideHailing bill-detail -> checkout routing
+  and verified RideHailing bill-detail -> checkout routing; current workstream
+  moved to Payment Checkout reset, route decoupling, and IA/wireframe
+  grounding; local mock payment provider baseline is now prepared, checkout
+  route ownership is already frontend-owned, checkout runtime now uses
+  Billing-owned bill-line target reads plus Payment-owned provider /
+  `PaymentTx` execution facts, and focused RideHailing checkout success flow is
+  verified end-to-end; typed-order timeout override is now corrected so
+  RideHailing writes a non-expiring base-order timeout snapshot at create time
+  while Rental keeps the standard unpaid window; the widened payment-client
+  repair slice is now also implemented and verified:
+  - runtime fake `WeixinJSBridge` no longer breaks on detached native `fetch`
+  - local development now has a dev-only fake payment-client UI with
+    `支付成功 / 取消支付 / 模拟失败`
+  - checkout reconciliation is now attempt-phase-based with a blocking dialog
+    instead of request-level CTA flicker
+  - WeChatPay attempt identity is now explicitly treated as one canonical
+    attempt tuple with backend/provider string projections, not as two separate
+    business truths
 
 ## Inherited Effective Truth
 
@@ -144,6 +163,93 @@ Hypothesis:
 - Bill Detail page reset slice already removed the old header subtitle and the
   old successful-state body content; the page is now rebuilt from the real
   Bill / BillLine projection with card-based payable-line selection.
+- Payment Checkout page currently has:
+  - user-facing route `/bill-lines/:billLineId/checkout`
+  - path-param parsing from `route.params.billLineId`
+  - a bill-line-first projection and page layout
+  - local uncommitted prerequisite change removing the header subtitle
+- Current Payment Checkout query and mutation contracts remain bill-line-scoped,
+  but the requested next slice wants the user-facing route and page semantics
+  to be payment-first rather than bill-line-resource-first.
+- Current direction for checkout route ownership:
+  - backend should not own user-facing checkout href topology
+  - bill detail no longer depends on backend-authored `checkoutHref`
+  - frontend now builds `/payment/checkout?bill-line=...` from stable
+    payable-target facts
+- Current checkout payment contract remains intentionally unstable:
+  - current source still uses BillLine-local execution slot endpoints
+  - human direction now wants a `PaymentTx`-centric backend contract instead
+  - durable docs and historical schema currently disagree with that direction,
+    so an explicit backend contract segment is required before UI build-out
+  - `PaymentTx` should be treated as a real domain concept, but not by
+    reintroducing the deleted `payment_txs` table
+  - current recommended implementation direction is a pollable opaque
+    `paymentTxId` resource over approved payment-domain contracts, not a
+    restoration of the removed historical table
+  - checkout target truth should stay on billing-owned reads; payment domain
+    should not introduce a synthetic target aggregate read
+  - backend contract reset is tracked in standalone artifact:
+    `tasks/ride-hailing-ui-fixes/payment-checkout-backend-contract-plan.md`
+  - backend contract reset is now implemented:
+    - multiple active providers per client are allowed
+    - `/api/payment/providers` is available for client-scoped provider
+      discovery
+    - `POST /api/payment/:paymentProviderInstanceId/charge?bill-line=...`
+      returns `paymentTx + clientAction`
+    - `GET /api/payment/:paymentTxId` polls transient provider-backed payment
+      state
+    - legacy commerce checkout endpoints remain temporarily for compatibility
+- official WeChatPay v3 JSAPI contract is now re-verified:
+  - frontend invocation entry is
+    `WeixinJSBridge.invoke("getBrandWCPayRequest", payload, callback)`
+  - payload fields are
+    `appId / timeStamp / nonceStr / package / signType / paySign`
+  - `WeixinJSBridgeReady` remains the right structural readiness event
+  - frontend callback result is not final payment truth; backend poll/query is
+    still authoritative
+- current local runtime still lacks a development-only fake JSAPI bridge even
+  though:
+  - scenario-only bridge stub already exists
+  - fake WeChatPay server already supports `prepay -> succeed`
+  - local seeded fake provider baseline already targets `JSAPI`
+- new active planning artifact:
+- completed bridge artifact:
+  `tasks/ride-hailing-ui-fixes/payment-checkout-fake-jsapi-bridge-plan.md`
+- fake JSAPI bridge segment is now implemented:
+  - app bootstrap installs a dev-only fake `WeixinJSBridge` when enabled
+  - fake bridge supports only `getBrandWCPayRequest`
+  - fake bridge now owns a dev-only payment-client overlay and drives the fake
+    provider through `prepay -> succeed / close / fail`
+  - existing real bridge is never overridden
+  - frontend type and unit coverage are in place
+- standalone next-slice artifact:
+  `tasks/ride-hailing-ui-fixes/payment-checkout-interaction-ui-plan.md`
+- current planning correction:
+  interaction, IA, route shape, frontend data assembly, and minimal backend
+  conflict-dialog alignment should be treated as one slice rather than split
+  into fake-independent subsegments
+- new active planning artifact:
+  `tasks/ride-hailing-ui-fixes/payment-client-ui-attempt-identity-plan.md`
+- current planning correction:
+  the widened checkout repair segment is now completed:
+  - fake `WeixinJSBridge` runtime repair is implemented
+  - dev-only payment-client UI is implemented
+  - checkout reconciliation UX is stabilized
+  - WeChatPay attempt-id topology is reviewed and ratified as canonical tuple
+    plus backend/provider projections
+- Local payment development readiness also needs a separate dev-infra segment:
+  - fake WeChatPay fixture is currently process-ephemeral
+  - a development-only provider-instance seed must therefore be paired with a
+    stable fake fixture source
+  - this belongs in `data-migrations/`, not `drizzle/`
+- PaymentTx identity diagnosis now has an explicit effective truth:
+  - current provider-facing `merchantOrderNo / out_trade_no` is already a short
+    WeChatPay-safe token and is not blocked by the long backend `paymentTxId`
+  - the long `paymentTxId` is the backend resource-id projection of the same
+    canonical attempt tuple
+  - no provider-side id regression exists in the current runtime path; the
+    current pressure is naming/architecture clarity, not broken provider
+    length compliance
 
 ## Collaboration Protocol
 
@@ -151,6 +257,21 @@ Hypothesis:
 - Codex is expected to raise objections before implementation when a requested
   slice appears likely to damage functionality, ownership boundaries,
   maintainability, readability, or established UI contracts.
+- Apply shift-left packet discipline:
+  - before production-code implementation starts, the active task packet must
+    already contain:
+    - overall objective and active segment objective
+    - confirmed truth sufficient to constrain mutation
+    - Address and Object
+    - State Diff
+    - Blast Radius Forecast
+    - Invariants Check
+    - explicit Verification Plan
+    - implementation steps for the active segment
+  - implementation result and verification result are append-only follow-up
+    records; they do not replace pre-implementation planning
+  - if new evidence changes the plan materially during implementation, pause
+    and update the packet before continuing broader mutation
 - Before every production-code fix, perform an Impact Handshake covering:
   - Address and Object: exact files, anchors, components, symbols, or test IDs
     expected to change
@@ -213,8 +334,99 @@ Choose the narrowest sufficient proof per approved slice:
 
 ## Current State
 
-- Implemented slice: Bill Detail page reset and backend-contract segment
-  (uncommitted).
+- Completed segment: typed-order timeout override for RideHailing final-bill
+  payment.
+  - current diagnosis:
+    - RideHailing is already modeled durably as `trip finish -> final bill ->
+      user pays bill lines`
+    - payment-side readers currently consume persisted `order.timeout` without
+      family awareness:
+      - `apps/backend/src/domains/payment/use-cases/payment-contract.ts`
+        gates payment initiation by `basis.order.timeout.unpaidExpiresAt`
+    - the current owner mistake is upstream:
+      - RideHailing order creation still writes the same unpaid-window-style
+        timeout shape as prepaid flows
+      - `apps/backend/src/domains/trade/use-cases/create-order.ts` currently
+        passes `DEFAULT_INITIATING_WINDOW_MINUTES` into RideHailing base-order
+        creation
+    - current segment direction:
+      - keep payment family-agnostic
+      - keep shared `TradeOrder.timeout` shape unchanged for now
+      - let typed order sub-domains override base-order timeout at create time
+  - approved handshake for the next production-code segment:
+    - Address and Object:
+      - `docs/20-product-tdd/ecommerce-contracts.md`
+      - `apps/backend/src/domains/trade/use-cases/create-order.ts`
+      - focused tests that prove family-specific timeout snapshots at order
+        creation and RideHailing final-bill payment behavior
+    - State Diff:
+      - from:
+        RideHailing orders are created with the same unpaid-window-style timeout
+        defaults as prepaid flows, so later timeout readers can reject final
+        bill payment as expired
+      - to:
+        typed order creation owns timeout override; Rental keeps current unpaid
+        window semantics, while RideHailing writes a non-expiring override value
+        suitable for final-bill payment, and downstream payment continues to
+        read `order.timeout` without family branches
+    - Blast Radius Forecast:
+      - order creation snapshots for Rental and RideHailing
+      - Payment Checkout only insofar as it consumes persisted timeout facts
+      - RideHailing `FINISHED -> bill detail -> checkout -> payment` flow
+      - potential Rental regression if default unpaid-window behavior changes
+        accidentally
+    - Invariants Check:
+      - do not add `order.family` branching to payment checkout logic in this
+        segment
+      - do not introduce prepaid/postpaid technical fields onto `Bill`
+      - do not change the shared `TradeOrder.timeout` shape in this segment
+      - do not loosen Rental unpaid-window behavior
+      - do not change checkout route shape
+      - RideHailing final bill creation stays callback-driven after provider
+        final settlement input
+    - Verification Plan:
+      - `pnpm check:type:backend`
+      - focused backend tests for family-specific timeout snapshots at create
+        time
+      - focused RideHailing system scenario covering `FINISHED -> bill detail ->
+        checkout -> payment`
+      - regression proof that Rental still keeps current unpaid-window semantics
+  - implementation result:
+    - `apps/backend/src/domains/trade/use-cases/create-order.ts` now lets
+      typed order creation pass a complete timeout snapshot into base-order
+      creation instead of always deriving it from a minute count
+    - Rental creation paths still write the standard 30-minute unpaid-window
+      timeout
+    - RideHailing creation paths now override the base-order timeout with a
+      non-expiring snapshot:
+      - `unpaidExpiresAt = 9999-12-31T23:59:59.999Z`
+      - `defaultWindowMinutes = 0`
+    - payment-side timeout readers remain family-agnostic
+    - durable contract wording now states:
+      - Rental keeps the standard unpaid payment window on the base-order
+        timeout snapshot
+      - RideHailing overrides the base-order timeout so final-bill payment is
+        not constrained by that standard window
+  - verification result:
+    - `pnpm check:type:backend` passed
+    - `pnpm exec vitest run --project backend-scenario apps/backend/tests/ride-hailing/ride-hailing-order-foundation.scenario.test.ts apps/backend/tests/commerce/rental-order-persistence.scenario.test.ts`
+      passed
+    - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts -t "commerce_ride_hailing_ordering_reaches_order_detail"`
+      passed
+    - `git diff --check` passed
+- Active slice: Local mock payment provider baseline
+  (`tasks/ride-hailing-ui-fixes/local-mock-payment-provider-baseline-plan.md`).
+  - implementation completed
+  - verification passed in isolated temporary database
+  - current local `db:migrate:dev` remains blocked by an unrelated pre-existing
+    historical migration/index collision
+- Payment Checkout workstream packet:
+  (`tasks/ride-hailing-ui-fixes/payment-checkout-page-reset-plan.md`).
+  - reset prerequisite is implemented
+  - next checkout product step remains IA / wireframe discussion on the cleared
+    shell
+- Committed slice: Bill Detail page reset and backend-contract segment
+  (`ea343509`).
 - Committed slice: RideHailing Order Detail Bill Card
   (`0bcfdc29`).
 
@@ -587,3 +799,69 @@ Choose the narrowest sufficient proof per approved slice:
     in `tasks/ride-hailing-ui-fixes/choice-set-sku-float-panel-plan.md`
   - choice-set SKU / float-panel implementation has been committed in
     `42eb1a61`
+  - payment checkout runtime diagnosis:
+    - current local `apps/backend/.env` is missing `PAYMENT_NOTIFY_BASE_URL`
+    - WeChatPay notify URLs are runtime-derived from
+      `PAYMENT_NOTIFY_BASE_URL + /api/payment/wechat-pay/:providerInstanceId/notify/*`
+    - Admin Payment Provider Instance `Charge Notify URL` / `Refund Notify URL`
+      are read-only projections of that runtime env and therefore display empty
+      when the env is absent
+    - provider `config.endpointBaseUrl` is upstream WeChatPay API origin
+      ownership, not callback ownership, so `0081` does not and should not
+      persist notify URLs
+    - current `500 PAYMENT_NOTIFY_BASE_URL is required for WeChatPay
+      notifications` is an environment baseline gap, not a provider-instance
+      config mutation failure
+  - current payment checkout diagnosis after notify-base-url repair:
+    - current `paymentTxId` encoding is confirmed as JSON payload +
+      base64url token and produces very long ids, but provider-facing
+      `merchantOrderNo` / WeChatPay `out_trade_no` is already a separate
+      32-character short reference
+    - current local runtime is in `.local` portless mode:
+      `https://api.partner-up.local/health` and
+      `https://wechatpay.partner-up.local/health` respond `200`
+    - current frontend fake bridge still targets
+      `https://wechatpay.partner-up.localhost`, while the active seeded local
+      provider instance and backend notify base use `.local`
+    - this `.local` / `.localhost` split is the leading diagnosis for local
+      "payment stays unpaid" behavior despite the mainline scenario passing
+    - fake JSAPI bridge currently supports only the happy path
+      `POST /__fake_wechatpay/prepays/:prepayId/succeed`; there is still no
+      payment-sheet mock or user-selectable cancel/fail/escape path
+    - `PaymentCheckoutFlow.vue` currently renders polling state through
+      `PuInlineNotice`, and the footer button `loading` state is tied to each
+      reconciliation request; because `shouldPollPaymentTx` becomes false while
+      `isReconcilingPaymentTx` is true, the notice/label/timer all oscillate
+      during polling
+    - latest human runtime verification:
+      - `VITE_FAKE_WECHATPAY_ORIGIN` has been corrected and local servers were
+        restarted
+      - local "payment stays unpaid after 5-6 seconds" still reproduces
+    - therefore the previous `.local` / `.localhost` split is no longer
+      sufficient to explain the unpaid symptom and should be treated as a
+      downgraded / partially falsified diagnosis rather than the current lead
+    - next diagnosis focus should move deeper into:
+      - fake bridge success call actually reaching the active fake-provider
+      - fake-provider transaction state after bridge success
+      - backend `GET /api/payment/:paymentTxId` reconciliation path
+      - client-side polling state machine stability
+    - deeper diagnosis result:
+      - fake provider state proves charge creation succeeds but browser-side
+        payment completion does not:
+        latest transaction was created with `tradeState = NOTPAY`
+      - hand-triggering
+        `POST /__fake_wechatpay/prepays/:prepayId/succeed`
+        moves the fake provider transaction to `SUCCESS`
+      - the corresponding `bill_lines` row is then marked settled immediately,
+        which proves backend notify / settlement is healthy once the fake
+        provider is actually advanced
+      - real-browser runtime probe on `https://partner-up.local/` confirms
+        `window.WeixinJSBridge.invoke(...)` currently returns:
+        `get_brand_wcpay_request:fail Failed to execute 'fetch' on 'Window': Illegal invocation`
+      - control probe shows the same browser can reach the fake provider when
+        `window.fetch` is explicitly bound, so the failure is the fake bridge's
+        detached native `fetch` invocation rather than network reachability
+      - current `launchPaymentClientAction()` resolves on any WeixinJSBridge
+        callback and discards `err_msg`, so the bridge failure is swallowed and
+        checkout falls through into polling against a provider transaction that
+        never left `NOTPAY`
diff --git a/tasks/ride-hailing-ui-fixes/discussion-log.md b/tasks/ride-hailing-ui-fixes/discussion-log.md
index 5d4a49791..fd6a11df8 100644
--- a/tasks/ride-hailing-ui-fixes/discussion-log.md
+++ b/tasks/ride-hailing-ui-fixes/discussion-log.md
@@ -7,6 +7,109 @@ Archived full history:
 
 - `archive/discussion-log-ordering-through-order-detail-map.md`
 
+## Current Segment: Payment Client UI / Attempt Identity
+
+- Requested segment:
+  - confirm the widened checkout repair is real before fixing:
+    - fake `WeixinJSBridge` runtime bug
+    - dev-only payment-client UI
+    - polling UX instability
+    - possible `PaymentTx` identity confusion
+- Diagnosis findings:
+  - the local "支付后一直未支付" failure was real
+  - root cause was the runtime fake bridge calling a detached native `fetch`,
+    which fails in browser with:
+    `Failed to execute 'fetch' on 'Window': Illegal invocation`
+  - fake provider state and backend settlement path were both already healthy:
+    manually advancing the fake prepay to `SUCCESS` immediately settled the
+    corresponding BillLine
+  - the long `paymentTxId` is not the provider-facing merchant order number;
+    WeChatPay already uses a separate short `merchantOrderNo / out_trade_no`
+    projection
+- Implementation result:
+  - fake bridge now binds browser `fetch` correctly
+  - fake bridge now owns a dev-only payment-client overlay with explicit
+    `支付成功 / 取消支付 / 模拟失败`
+  - fake provider now supports prepay-keyed `close / fail` alongside `succeed`
+  - `launch-payment-client-action` now returns structured client results
+    instead of swallowing bridge callback semantics
+  - `PaymentCheckoutFlow` now uses attempt phases:
+    - `IDLE`
+    - `WAITING_FOR_CLIENT`
+    - `RECONCILING`
+    - `SUCCEEDED`
+  - checkout reconciliation now uses a blocking dialog + spinner and no longer
+    ties CTA loading to each poll request
+- Attempt identity decision:
+  - keep one canonical attempt tuple:
+    `kind + billLineId + paymentProviderInstanceId + attemptCount`
+  - keep two explicit string projections:
+    - backend resource id: `paymentTxId`
+    - provider protocol id: `merchantOrderNo / out_trade_no`
+  - do not force one-token convergence in this slice
+- Verification result:
+  - focused frontend unit tests passed:
+    - fake bridge success/cancel/fail
+    - launch-payment-client-action result mapping
+  - fake WeChatPay server unit tests passed
+  - frontend typecheck passed
+  - focused RideHailing system scenario passed:
+    `commerce_ride_hailing_ordering_reaches_order_detail`
+- Next step:
+  - the current packet is ready for the next payment or ride-hailing slice
+  - the remaining `PAYMENT_NOTIFY_BASE_URL` / platform certificate caveat stays
+    outside this segment by prior agreement
+
+## Current Segment: Payment Checkout Fake JSAPI Bridge Planning
+
+- New requested segment:
+  - re-check the fake JSAPI runtime direction against official WeChatPay v3
+    JSAPI docs
+  - update task packet and write the segment plan before implementation
+- Official contract findings:
+  - JSAPI client entry is
+    `WeixinJSBridge.invoke("getBrandWCPayRequest", payload, callback)`
+  - required payload fields are:
+    - `appId`
+    - `timeStamp`
+    - `nonceStr`
+    - `package`
+    - `signType`
+    - `paySign`
+  - `WeixinJSBridgeReady` is the right readiness event when bridge is not yet
+    available
+  - bridge callback `ok/cancel/fail` is not final payment truth; backend query
+    or polling still decides final state
+- Current code findings:
+  - backend `WECHAT_BRIDGE` client action already matches the official JSAPI
+    payload shape
+  - scenario-only fake bridge already exists at
+    `tests/scenario/_infra/browser/wechatpay.ts`
+  - fake WeChatPay server already supports `prepay -> succeed`
+  - runtime frontend still has no development-only fake `WeixinJSBridge`
+- Planning direction:
+  - open a standalone Fake JSAPI Bridge segment
+  - keep it dev-only and bootstrap-level
+  - emulate only payment bridge behavior, not the full WeChat JSSDK
+  - keep backend `PaymentTx` polling as the only final payment truth
+- Opened slice artifact:
+  - `payment-checkout-fake-jsapi-bridge-plan.md`
+- first recommended implementation scope is happy-path `success` only;
+  local `cancel/fail` provider-state alignment should not be smuggled into
+  this segment without explicit need
+- Implementation result:
+  - dev-only fake `WeixinJSBridge` is now installed from app bootstrap
+  - the fake bridge is intentionally narrow and payment-only
+  - success path reuses fake-provider `prepay -> succeed`
+  - unsupported methods and invalid prepay payloads fail deterministically
+  - existing real `WeixinJSBridge` is preserved
+- Verification result:
+  - focused frontend unit tests passed
+  - frontend typecheck passed
+- Next step:
+  - return to Payment Checkout interaction/UI slice and let the page consume
+    the now-ready fake JSAPI bridge when it grows a real pay-action path
+
 ## Current Segment: Bill Detail Page Reset And Data Audit
 
 - New requested slice:
@@ -114,6 +217,312 @@ Archived full history:
 - Next step:
   - ready for the next bill-detail slice or commit request
 
+## Current Segment: Payment Checkout Page Reset And IA Grounding
+
+- New requested slice:
+  - user-facing route should become `/payment/checkout?bill-line=`
+  - the page should not be over-coupled to BillLine, even if the current
+    payment implementation is BillLine-backed
+  - the page core should be price plus payment method/channel, not BillLine
+    narrative
+  - same workflow as Bill Detail:
+    reset first, then discuss IA and wireframe
+- Current code findings:
+  - current frontend route is `/bill-lines/:billLineId/checkout`
+  - current frontend page parses `route.params.billLineId`
+  - current frontend page already has a local prerequisite change:
+    header subtitle removed
+  - current successful-state page layout is bill-line-first:
+    - `Checkout` eyebrow
+    - `checkout.order.itemName` heading
+    - amount block labeled by `checkout.billLine.label`
+    - provider card rendered as a second section
+  - current frontend query owner is `usePaymentCheckout(billLineId)`
+  - current backend contract is `GET /api/commerce/bill-lines/:billLineId/checkout`
+  - current checkout projection is centered on:
+    - `billLine`
+    - `bill`
+    - `order`
+    - `eligibility`
+    - `payment`
+  - current Bill Detail flow depends on backend-authored
+    `lines[].checkoutHref = /bill-lines/:billLineId/checkout`
+  - current RideHailing scenario asserts the same path shape
+- Product/contract reading:
+  - `docs/20-product-tdd/ecommerce-contracts.md` says payment should stay
+    inside the Order Detail journey by default and should not introduce a broad
+    user-facing `/checkout/*` route family
+  - that makes `/payment/checkout?...` materially better than the current
+    bill-line resource path, because it frames the page as a payment tool
+    surface rather than a raw domain entity route
+- Design pressure observed:
+  - current user-facing route leaks a backend-owned resource shape
+  - current page information hierarchy emphasizes what is being paid for,
+    instead of how much the user is paying and through which channel
+  - we likely need to distinguish:
+    - transport/keying still bill-line-scoped for now
+    - UI semantics and route semantics becoming payment-first
+- Additional contract conclusion:
+  - `BillDetailPage` should not depend on backend-authored checkout hrefs
+  - current `checkoutHref` is only mirroring a frontend route choice, so it
+    expands blast radius for no business gain
+  - better ownership split:
+    backend returns payable-target facts; frontend builds the user-facing
+    checkout route
+- Additional dev-environment finding:
+  - local payment provider readiness cannot be solved by a dev-only SQL seed
+    alone
+  - current fake WeChatPay fixture is generated per process start, including
+    merchant key pair and certificate
+  - therefore a development-seeded `payment_provider_instances` row would drift
+    unless the fake provider fixture becomes stable first
+  - the correct durable bucket is:
+    stable fake fixture source + `apps/backend/data-migrations/` dev-only seed
+- Implementation result:
+  - `PaymentCheckoutPage.vue` successful-state body is now intentionally empty
+  - invalid-id, loading, error, and back-navigation shell remain intact
+  - the old bill-line-first content and provider controls are removed so IA can
+    be redesigned from a cleared page
+  - focused RideHailing scenario no longer asserts amount text or inline
+    `返回账单` action from the old page body
+  - scenario now proves only:
+    checkout route reachability and back-navigation to Bill Detail
+- Next step:
+  - discuss `PaymentCheckoutPage` information architecture against the cleared
+    shell
+  - decide the eventual frontend-owned checkout route builder contract
+  - open the separate dev-infra segment for stable fake WeChatPay fixture plus
+    development-only provider seed
+
+## Current Segment: Payment Checkout Backend Contract
+
+- New requested segment:
+  - update the checkout task packet before wireframe
+  - discuss dynamic behavior first:
+    - what happens after clicking `支付`
+    - where payment methods come from
+    - how runtime states should evolve
+- Confirmed dynamic truths from source:
+  - checkout read contract:
+    `GET /api/commerce/bill-lines/:billLineId/checkout`
+  - charge creation contract:
+    `POST /api/commerce/bill-lines/:billLineId/charges`
+  - payment sync contract:
+    `POST /api/commerce/bill-lines/:billLineId/payment/sync`
+  - current charge creation may return `payment.clientAction`
+  - current client actions are:
+    - `WECHAT_BRIDGE`
+    - `PAYMENT_REDIRECT`
+  - current frontend has no checkout-specific `WeixinJSBridge` invocation
+    layer yet
+  - local fake WeChatPay server exists, but runtime dev frontend does not yet
+    have a fake JSAPI bridge layer
+  - only a scenario-only fake bridge stub exists at
+    `tests/scenario/_infra/browser/wechatpay.ts`
+  - provider choice is backend-owned today:
+    existing execution slot provider wins, otherwise backend chooses the active
+    provider by `clientId`
+  - payment-provider model allows only one active provider instance per
+    `clientId`
+  - each provider instance currently has exactly one `chargeMode`
+  - therefore true multi-method user choice is not yet implemented at the
+    backend/domain level
+- Contract conflict confirmed:
+  - `drizzle/0071_payment_foundation.sql` once created `payment_txs`
+  - `drizzle/0078_bill_line_payment_slot.sql` later dropped `payment_txs` and
+    moved execution identity onto `bill_lines`
+  - `docs/20-product-tdd/ecommerce-contracts.md` currently says provider
+    transaction lifecycle truth is not persisted as backend payment transaction
+    truth
+- Latest human corrections:
+  - `PaymentTx` concept remains valid
+  - deleted `payment_txs` table must not be reintroduced
+  - `POST /api/commerce/bill-lines/:billLineId/charges` should be replaced by
+    payment-domain initiation returning `PaymentTx`
+  - payment result polling should become `GET /api/payment/:paymentTxId`
+  - payment method options should come from a separate backend query surface
+  - single-active-provider-per-client constraint is not acceptable and should
+    be removed
+  - do not pre-restrict provider choice in UI
+  - if an in-progress `PaymentTx` already binds a provider, mismatched provider
+    choice should fail at charge-initiation time and be surfaced by dialog
+- IA decisions already locked:
+  - checkout Hero can reuse a simplified BillLineCard shape
+  - Hero should hide payer and checkbox
+  - payment method section should use `PuCell + PuRadio + usePuSelect`
+- Current recommendation:
+  - treat this as a backend contract reset segment, not merely an IA segment
+  - model checkout around `PaymentTx`
+  - recommended `PaymentTx` shape is an explicit API/domain resource with an
+    opaque pollable id, not a restoration of the old `payment_txs` table
+  - do not add a new synthetic checkout-target read; target truth should stay
+    on billing-owned read surfaces
+  - provider discovery does not need stable default-provider semantics
+  - JSAPI should be the first-class path for the current slice
+  - H5 should stay secondary until a real return-to-app flow is designed
+- Standalone artifact opened:
+  - `payment-checkout-backend-contract-plan.md`
+- Implementation result:
+  - active-provider-per-client uniqueness is removed both in schema and admin
+    runtime checks
+  - payment domain now exposes:
+    - `GET /api/payment/providers`
+    - `POST /api/payment/:paymentProviderInstanceId/charge?bill-line=...`
+    - `GET /api/payment/:paymentTxId`
+  - `PaymentTx` is implemented as a transient opaque id over
+    `billLineId + paymentProviderInstanceId + attemptCount`, not as a revived
+    table
+  - current bound execution is queried and normalized before accepting a new
+    explicit-provider charge request
+  - unfinished mismatched-provider choice now fails with
+    `PAYMENT_PROVIDER_CONFLICT`
+  - historical failed `PaymentTx` polling is isolated from later successful
+    attempts on the same BillLine
+- Verification result:
+  - backend typecheck passed
+  - backend migration lint/check passed
+  - focused payment backend scenario passed on the new contract
+- Next step:
+  - use the implemented backend contract to continue Payment Checkout IA,
+    runtime UI state, and wireframe work
+
+## Current Segment: Payment Checkout Interaction / Contract
+
+- Status:
+  - pending until backend contract is settled
+- Locked frontend truth already agreed:
+  - page stays payment-first
+  - Hero may reuse a simplified BillLineCard shape
+  - payment method selection uses `PuCell + PuRadio + usePuSelect`
+  - provider choice is not pre-restricted in UI
+  - if an in-progress `PaymentTx` already binds a provider, choosing another
+    provider should produce a conflict dialog at charge-initiation time
+
+## Proposed Segment: Payment Checkout IA / Wireframe Recovery
+
+- Status:
+  - proposed, previous draft partially rejected, awaiting revised review
+- Reconfirmed topology before wireframe:
+  - Payment Checkout page is still mounted on the reset shell
+  - current frontend implementation still reads the old commerce checkout
+    aggregate:
+    `GET /api/commerce/bill-lines/:billLineId/checkout`
+  - this remains a transition reality only; target truth should still migrate
+    toward Billing-owned reads plus Payment-owned provider discovery and
+    `PaymentTx` polling
+- Proposed page hierarchy:
+  - `PuPageScaffold(viewport="screen")`
+  - scrollable content region:
+    - simplified BillLine Hero card
+    - payment method section
+    - optional soft notice / method helper for unfinished payment reuse
+  - bottom anchored CTA region:
+    - primary button text: `支付 {amount}`
+- Proposed Hero treatment:
+  - reuse the BillLineCard visual language, but remove:
+    - payer
+    - checkbox
+    - selectable affordance
+  - keep:
+    - amount as the primary signal
+    - settlement / runtime tag
+    - one line of label or description
+- Proposed payment-method section:
+  - use `PuCell + PuRadio + usePuSelect`
+  - no target-aware pre-restriction in the option list itself
+  - do not surface unfinished-binding hints before charge-initiation because
+    current approved contract deliberately keeps provider discovery target-
+    agnostic
+  - do not expose provider channel internals such as `JSAPI` / `H5` in the
+    primary user-facing list unless a later slice proves they are necessary
+- Proposed dynamic layout rule:
+  - keep the same page structure across idle / launching / polling states
+  - evolve only:
+    - CTA text / disabled-loading state
+    - Hero tag
+    - optional helper notice or dialog
+- Revised alignment requirement from review:
+  - this slice should not keep depending on the legacy payment-owned checkout
+    aggregate read
+  - related backend alignment and checkout page route changes should be handled
+    together with the interaction/UI slice
+  - corrected route conclusion:
+    the current `/payment/checkout?bill-line=...` shape is already enough; the
+    real missing piece is a Billing-owned bill-line read surface
+- standalone follow-up artifact opened:
+  - `payment-checkout-interaction-ui-plan.md`
+- segment framing correction:
+  - do not continue splitting `Interaction / Contract` and
+    `IA / Wireframe Recovery` as if they were independent implementation
+    slices
+  - treat route shape, data assembly, page IA, pay-action runtime, and minimal
+    backend dialog-alignment as one coherent checkout slice
+- final review decisions now locked:
+  - checkout success should show a short-lived success state and then
+    auto-return
+  - do not add a separate payment-domain status for
+    "paymentTx created but bridge launch did not complete cleanly"
+  - all user-visible payment outcome text must be derived from backend
+    `PaymentTx`, not from bridge callback wording
+  - after any bridge return / fail / throw, immediately reconcile through
+    `GET /api/payment/:paymentTxId`
+  - do not expand `PAYMENT_PROVIDER_CONFLICT` payload in this slice
+  - dedicated checkout Hero is preferred over extending `BillLineCard`
+
+## Current Segment: Payment Checkout Route / Ownership
+
+- New requested segment:
+  - move checkout to `/payment/checkout?bill-line=...`
+  - make frontend own the user-facing checkout route shape
+  - keep backend ownership on payable facts and execution endpoints
+- Confirmed current coupling points:
+  - frontend route is still `/bill-lines/:billLineId/checkout`
+  - `PaymentCheckoutPage.vue` still parses `route.params.billLineId`
+  - backend `BillDetailProjection.lines[]` still exposes `checkoutHref`
+  - `CommerceBillDetailPage.vue` CTA still consumes `checkoutHref`
+  - `BillLineCard.vue` still gates selectability on `checkoutHref`
+  - focused system scenario still asserts the old pathname shape
+- Confirmed segment boundary:
+  - this slice changes route ownership only
+  - backend checkout transport stays bill-line-scoped for now:
+    `GET /api/commerce/bill-lines/:billLineId/checkout`
+  - charge creation and payment sync endpoint shapes also stay unchanged
+  - checkout reset shell remains as-is; body redesign belongs to a later slice
+- Planned implementation:
+  - add a frontend-owned commerce checkout route helper
+  - move the page route to `/payment/checkout`
+  - parse `bill-line` from query in `PaymentCheckoutPage.vue`
+  - remove backend `checkoutHref` from bill-detail projection
+  - make Bill Detail CTA derive checkout route from selected bill-line id
+  - make BillLine Card selectable based on `payableByViewer` only
+  - update focused scenario to assert pathname plus query
+- Implementation result:
+  - frontend now owns the user-facing checkout route
+  - backend `BillDetailProjection.lines[]` no longer returns `checkoutHref`
+  - Bill Detail CTA now derives checkout location from selected bill-line id
+  - `PaymentCheckoutPage.vue` now reads `bill-line` from query
+  - `BillLineCard.vue` no longer couples selectability to a backend href field
+- Verification result:
+  - focused `biome` check passed
+  - frontend typecheck passed
+  - backend typecheck passed
+  - focused RideHailing system scenario passed against
+    `/payment/checkout?bill-line=...`
+- Prior segment result kept active:
+  - local fake WeChatPay fixture is now stable across restarts
+  - local development-only `web` payment-provider baseline exists via
+    `0081_dev_mock_payment_provider_baseline.sql`
+- Next step:
+  - continue into the next Payment Checkout slice:
+    IA/body redesign or broader target contract discussion
+  - implemented stable fake fixture asset and development-only provider seed
+  - current local `db:migrate:dev` is blocked by an unrelated historical local
+    migration/index collision at `0061_user_telemetry_v2.sql`
+  - isolated temporary-database migration proof passed, including the new
+    `0081_dev_mock_payment_provider_baseline.sql`
+  - next product step can return to Payment Checkout IA / wireframe, or the
+    user can ask for commit cleanup first
+
 ## Previous Segment: RideHailing Order Detail Bill Card
 
 - New requested fix:
@@ -316,6 +725,29 @@ Archived full history:
     convert Caocao clockwise heading to Tencent counter-clockwise rotation
     without replacing the car icon.
 
+## Current Segment: Typed-Order Timeout Override Owner
+
+- Clarified owner:
+  RideHailing unpaid-window correction should not be implemented by adding
+  `order.family` checks into payment checkout use cases.
+- Approved direction:
+  keep payment-side timeout readers family-agnostic and let typed order
+  sub-domains override base-order timeout at create time.
+- Concrete meaning:
+  - `RENTAL` keeps the current unpaid-window timeout behavior
+  - `RIDE_HAILING` writes a non-expiring timeout override suitable for final
+    bill payment after trip finish
+- Explicit non-goals for this segment:
+  - do not refactor the shared `TradeOrder.timeout` shape yet
+  - do not introduce prepaid/postpaid technical fields on `Bill`
+  - do not solve this by scattered family-specific branching inside payment
+    checkout
+- Implemented result:
+  - base-order creation now accepts a typed-order-provided timeout snapshot
+  - Rental keeps the standard 30-minute unpaid window
+  - RideHailing overrides the timeout snapshot to a non-expiring value so final
+    bill payment is not bounded by the standard unpaid window
+
 ## Previous Segment: Fake Caocao Admin Phase Control Observability
 
 - Observation:
@@ -396,3 +828,118 @@ Archived full history:
 - Manual browser review of dispatching and post-dispatch panel layout.
 - Decide in a separate slice whether RideHailing cancellation should be
   implemented end-to-end.
+
+## Current Diagnostic Note: Payment Notify Base URL
+
+- Observed failure:
+  `POST /api/payment/:paymentProviderInstanceId/charge?bill-line=...` returned
+  HTTP 500 with detail
+  `PAYMENT_NOTIFY_BASE_URL is required for WeChatPay notifications`.
+- Code-path diagnosis:
+  `payment-contract.ts` calls `resolveWeChatPayChargeNotifyUrl()`, which
+  delegates to `resolvePaymentNotifyBaseUrl()` in
+  `domains/payment/services/payment-provider.ts`.
+- Ownership clarification:
+  `PAYMENT_NOTIFY_BASE_URL` is runtime environment ownership for backend
+  callback origin; it is not stored on `payment_provider_instances`.
+- Admin UI clarification:
+  Admin Payment page `Charge Notify URL` and `Refund Notify URL` are
+  read-only projections built from `PAYMENT_NOTIFY_BASE_URL`; when the env is
+  absent they correctly render empty.
+- Migration clarification:
+  `0081_dev_mock_payment_provider_baseline.sql` seeds provider credentials plus
+  upstream `config.endpointBaseUrl`, but it does not and should not persist
+  notify URLs because callback origin is system-owned rather than
+  provider-instance-owned.
+
+## Current Diagnostic Note: Payment Checkout Runtime Gaps
+
+- Long `paymentTxId` is confirmed:
+  `encodePaymentTxId()` currently serializes
+  `{ kind, billLineId, paymentProviderInstanceId, attemptCount }` to JSON and
+  then base64url, yielding ids around 200+ characters.
+- Provider-length concern is *not* currently the same bug:
+  WeChatPay-facing `merchantOrderNo` / `out_trade_no` is generated separately
+  as a fixed 32-character signed reference, so the long `paymentTxId` is not
+  currently sent to WeChatPay.
+- Local "still unpaid after pay" diagnosis is currently strongest at runtime
+  baseline split rather than shared checkout logic failure:
+  - active local provider instance in the database points to
+    `https://wechatpay.partner-up.local`
+  - current backend notify base env uses `https://api.partner-up.local`
+  - current frontend fake bridge env still uses
+    `https://wechatpay.partner-up.localhost`
+  - direct health probes show `.local` endpoints respond `200` while the
+    `.localhost` counterparts are not the active provider runtime
+- Mainline regression check:
+  the system scenario happy path still passes end-to-end, so the "stays unpaid"
+  symptom is not a universal contract failure; local drift is currently the
+  first suspect.
+- New runtime update:
+  - local `VITE_FAKE_WECHATPAY_ORIGIN` has now been corrected to match the
+    active portless `.local` runtime
+  - local servers were restarted after the env correction
+  - the "payment stays unpaid after 5-6 seconds" symptom still reproduces
+- Diagnostic consequence:
+  the earlier `.local` / `.localhost` mismatch was a real configuration drift,
+  but it is no longer sufficient to explain the current unpaid symptom. The
+  active diagnosis should now move deeper into bridge -> fake-provider state ->
+  backend poll reconciliation rather than staying at environment-baseline level.
+- Deeper runtime evidence:
+  - `GET https://wechatpay.partner-up.local/__fake_wechatpay/state` showed the
+    latest local checkout transaction existed but remained `tradeState = NOTPAY`
+  - therefore backend `createChargePrepay` succeeded, but browser-side payment
+    completion did not reach the fake provider
+  - manually calling
+    `POST /__fake_wechatpay/prepays/:prepayId/succeed` advanced the fake
+    transaction to `SUCCESS`
+  - the referenced `bill_lines` row was then observed as settled in the local
+    database, which proves backend notify / settlement is healthy after the
+    provider is actually advanced
+- Root-cause probe:
+  - a real-browser Playwright probe against `https://partner-up.local/`
+    confirmed `window.WeixinJSBridge` is installed
+  - the same browser can call the fake provider origin directly
+  - but invoking the runtime fake bridge returns:
+    `get_brand_wcpay_request:fail Failed to execute 'fetch' on 'Window': Illegal invocation`
+  - this points to `fake-wechatpay-bridge.ts` passing detached native `fetch`
+    as `fetchImpl: fetch` and later calling it as a plain function, which is an
+    illegal invocation in the browser runtime
+- UX consequence:
+  `launchPaymentClientAction()` currently ignores WeixinJSBridge callback
+  `err_msg`, so this bridge failure is swallowed. Checkout then starts polling
+  a provider transaction that never left `NOTPAY`, which matches the reported
+  "still unpaid after 5-6 seconds" symptom.
+- Latest discussion direction:
+  - next repair segment may be widened beyond a narrow bug fix to include the
+    local payment-client UI itself, so development runtime can truly operate
+    `pay` / `cancel` rather than only auto-success
+  - preferred terminology for the current slice:
+    - payment client: `WeixinJSBridge`
+    - payment server: selected payment provider / provider adapter
+    - `launch-payment-client-action.ts` is only a frontend orchestration seam,
+      not the payment client itself
+- Open architecture question:
+  - current WeChatPay path appears to expose two serialized identifiers for the
+    same payment attempt:
+    - backend-facing `paymentTxId`
+    - provider-facing `merchantOrderNo` / `out_trade_no`
+  - both are derived from the same durable attempt tuple
+    `{ kind, billLineId, paymentProviderInstanceId, attemptCount }`
+  - this may not be "two truths", but it is still a duplicated identity codec
+    and should be reviewed as part of the checkout/payment workstream
+- Active planning artifact:
+  `tasks/ride-hailing-ui-fixes/payment-client-ui-attempt-identity-plan.md`
+- Fake JSAPI bridge completeness gap is confirmed:
+  runtime fake bridge only calls
+  `POST /__fake_wechatpay/prepays/:prepayId/succeed`; there is no mocked
+  payment sheet or user-selectable `cancel` / `fail` / `escape` path.
+- Payment client interpretation gap is also confirmed:
+  `launchPaymentClientAction()` resolves on any WeixinJSBridge callback and
+  does not inspect `err_msg`, so even if the fake bridge later grows cancel or
+  failure callbacks, the checkout page would not yet distinguish them.
+- Polling UX gap is confirmed by implementation:
+  `PaymentCheckoutFlow.vue` shows polling through inline notice and binds the
+  footer button loading state to each reconciliation request. Because polling
+  eligibility depends on `!isReconcilingPaymentTx`, the notice and button label
+  oscillate while each poll request is in flight.
diff --git a/tasks/ride-hailing-ui-fixes/local-mock-payment-provider-baseline-plan.md b/tasks/ride-hailing-ui-fixes/local-mock-payment-provider-baseline-plan.md
new file mode 100644
index 000000000..f201aec9e
--- /dev/null
+++ b/tasks/ride-hailing-ui-fixes/local-mock-payment-provider-baseline-plan.md
@@ -0,0 +1,203 @@
+# Local Mock Payment Provider Baseline Plan
+
+## Objective
+
+- make local payment checkout usable without manual Admin payment-provider
+  setup
+- keep the local payment-provider baseline stable across process restarts
+- establish a development-only baseline that supports iterative Payment
+  Checkout UI work
+
+## Classification
+
+- Primary route: `Constraint`
+- Active mode: `Execute`
+
+## Confirmed Truth
+
+- current local checkout provider lookup resolves by active client id:
+  - `payment-checkout.ts` uses `findActiveByClientId(input.clientId)`
+  - current frontend/client path already has a stable client id: `web`
+- current fake WeChatPay fixture is process-ephemeral:
+  - `packages/fake-wechatpay-server/src/fixtures.ts` generates a fresh merchant
+    key pair per boot
+  - a seeded provider instance would drift after every fake-provider restart
+    unless the fixture becomes stable first
+- current local WeChat ability mocking already provides a stable dev openid
+  fallback:
+  - `WECHAT_ABILITY_MOCKING_ENABLED=true`
+  - `WECHAT_ABILITY_MOCK_OPEN_ID`, defaulting to `dev-mock-openid`
+- current scenario and current intended runtime path already use `JSAPI`
+  charge mode
+- development-only baseline data belongs in:
+  `apps/backend/data-migrations/`
+- development-only data migrations must be:
+  - forward-only
+  - stable local baseline only
+  - environment-gated with `-- migration: environments=development`
+- development-only fake-provider baseline must not use:
+  - `apps/backend/drizzle/`
+  - per-run scenario fixtures
+  - production or real credentials
+
+## Segment Scope
+
+- included:
+  - stable fake WeChatPay fixture source for local runtime
+  - development-only provider-instance seed for client `web`
+  - packet and verification updates
+- excluded:
+  - Payment Checkout page IA or route migration
+  - backend payment contract redesign
+  - scenario-specific temporary provider registration cleanup
+
+## Proposed Address And Object
+
+- `packages/fake-wechatpay-server/`
+  - introduce a stable local fake fixture source
+- `apps/backend/data-migrations/`
+  - add a development-only SQL migration that seeds one active
+    `WECHAT_PAY` provider instance for client `web`
+- possibly `docs/40-deployment/environments.md`
+  - if local baseline workflow needs a new durable note
+- task packet logs
+  - record the segment result and verification
+
+## State Diff
+
+- From:
+  local payment checkout requires manual provider setup or scenario-only
+  registration, and any database-seeded provider credentials would drift across
+  fake-provider restarts.
+- To:
+  local development has a stable fake WeChatPay fixture and a development-only
+  seeded active provider instance for client `web`, so checkout can resolve a
+  provider out of the box.
+
+## Blast Radius Forecast
+
+- fake WeChatPay local runtime behavior
+- local development database baseline
+- payment provider instance uniqueness for active client `web`
+- possible local manual checkout workflow
+- scenario tests should remain unaffected if they keep registering their own
+  isolated provider setup
+
+## Invariants Check
+
+- do not change production or staging provider behavior
+- do not put environment-gated logic into schema migrations
+- do not introduce real credentials into repo history
+- keep `clientId = web` active-provider resolution semantics intact
+- do not break current scenario provider registration paths
+- keep the default recommendation aligned with the existing mainline payment
+  path: `JSAPI`
+
+## Design / Ownership Decisions
+
+- preferred local baseline charge mode:
+  - `JSAPI`
+- preferred stable fake fixture strategy:
+  - repo-committed fake-only fixture data
+- preferred provider seed ownership:
+  - development-only SQL data migration
+- frontend route ownership is out of scope for this segment
+
+## Resolved Decisions
+
+- stable fake fixture should be stored as a committed asset inside the
+  fake-provider package
+- development-only provider seed should rely on runtime platform-certificate
+  refresh, not pre-populate platform certificates
+
+## Confirmed Implementation Direction
+
+- keep `chargeMode = JSAPI`
+- store stable fake-only credentials inside the fake-provider package, not in
+  environment variables
+- let the development-only provider seed omit platform certificates initially
+  and rely on runtime refresh against the local fake provider
+
+## Verification Plan
+
+- static / type checks on changed backend and fake-provider files
+- `pnpm db:migrate:dev`
+- local fake WeChatPay server boot sanity
+- local backend can resolve an active payment provider instance for client
+  `web`
+- if implementation touches durable docs, include a doc consistency read-back
+
+## Implementation Steps
+
+1. Introduce a stable fake WeChatPay fixture source that survives local
+   process restarts.
+2. Ensure the local fake-provider runtime reads that stable fixture by default.
+3. Add a new development-only SQL data migration under
+   `apps/backend/data-migrations/` that seeds one active `WECHAT_PAY` provider
+   instance for `clientId = web`.
+4. Keep the seeded config aligned with local fake-provider routing:
+   - fake app id
+   - fake mch id
+   - fake apiV3 key
+   - fake merchant certificate
+   - local endpoint base url
+   - `chargeMode = JSAPI`
+5. Verify the migration can be applied through `pnpm db:migrate:dev`.
+6. Verify the local checkout path can resolve an active provider for client
+   `web` without manual admin setup.
+7. Record implementation result and verification result in the task packet.
+
+## Segment Start Preconditions
+
+- explicit user start signal has been received: `开始`
+- if implementation reveals that runtime platform-certificate refresh cannot
+  work against the seeded fake setup, pause and update this plan before
+  broadening the change
+
+## Implementation Result
+
+- added committed stable fake fixture asset:
+  `packages/fake-wechatpay-server/src/fixtures/stable-dev-fixture.json`
+- changed `packages/fake-wechatpay-server/src/fixtures.ts` to load and parse
+  that committed asset instead of generating a fresh RSA key pair per process
+  start
+- added development-only data migration:
+  `apps/backend/data-migrations/0081_dev_mock_payment_provider_baseline.sql`
+- the new migration seeds one active `WECHAT_PAY` provider baseline for:
+  - `clientId = web`
+  - `instanceKey = dev-fake-wechatpay-web`
+  - `chargeMode = JSAPI`
+  - `endpointBaseUrl = https://wechatpay.partner-up.localhost`
+- the new migration intentionally leaves `platformCertificates` as JSON `null`
+  so runtime refresh remains the first source of truth
+- the new migration disables other active `payment_provider_instances` rows for
+  client `web` before activating the baseline row, so the active-client unique
+  constraint stays deterministic for local development
+
+## Verification Result
+
+- passed:
+  - `pnpm --filter @partner-up-dev/fake-wechatpay-server typecheck`
+  - `pnpm --filter @partner-up-dev/fake-wechatpay-server test`
+  - `pnpm --dir apps/backend exec tsc --noEmit -p tsconfig.json`
+  - `pnpm --dir apps/backend db:lint`
+  - `git diff --check`
+- current local database caveat:
+  - `pnpm --dir apps/backend db:migrate:dev` against the existing local
+    database failed before reaching `0081`
+  - the failure is a pre-existing local-history issue at
+    `drizzle/0061_user_telemetry_v2.sql`:
+    `relation "user_telemetry_events_family_occurred_at_idx" already exists`
+- isolated migration proof:
+  - created a temporary verification database
+  - ran `pnpm --dir apps/backend db:migrate:dev` against that temporary
+    database successfully
+  - confirmed the seeded row shape after migration:
+    - `provider_type = WECHAT_PAY`
+    - `instance_key = dev-fake-wechatpay-web`
+    - `status = ACTIVE`
+    - `client_id = web`
+    - `chargeMode = JSAPI`
+    - `endpointBaseUrl = https://wechatpay.partner-up.localhost`
+    - `platformCertificates = null`
+  - dropped the temporary verification database after validation
diff --git a/tasks/ride-hailing-ui-fixes/payment-checkout-backend-contract-plan.md b/tasks/ride-hailing-ui-fixes/payment-checkout-backend-contract-plan.md
new file mode 100644
index 000000000..509c906c8
--- /dev/null
+++ b/tasks/ride-hailing-ui-fixes/payment-checkout-backend-contract-plan.md
@@ -0,0 +1,370 @@
+# Payment Checkout Backend Contract Plan
+
+## Objective
+
+- reset Payment Checkout backend contracts around explicit provider choice and
+  explicit `PaymentTx` resource semantics
+- keep `PaymentTx` as a real domain/API concept without restoring the deleted
+  historical `payment_txs` table shape
+- define payment-provider discovery, charge initiation, and payment-status
+  polling contracts before frontend interaction and wireframe work
+
+## Classification
+
+- Primary route: `Constraint`
+- Slice mode: `Execute`
+
+## Confirmed Truth
+
+- current checkout read contract is:
+  `GET /api/commerce/bill-lines/:billLineId/checkout`
+- current charge-initiation contract is:
+  `POST /api/commerce/bill-lines/:billLineId/charges`
+- current payment-status sync contract is:
+  `POST /api/commerce/bill-lines/:billLineId/payment/sync`
+- current provider choice is backend-owned:
+  - if a line already has `paymentProviderInstanceId`, backend reuses it
+  - otherwise backend resolves the active provider by `clientId`
+- current payment-provider data model still enforces at most one active
+  provider instance per `clientId`
+- current provider config has exactly one `chargeMode` per provider instance
+- current frontend has no runtime fake JSAPI bridge; only scenario stub exists
+  at
+  `tests/scenario/_infra/browser/wechatpay.ts`
+- historical truth:
+  - `drizzle/0071_payment_foundation.sql` created `payment_txs`
+  - `drizzle/0078_bill_line_payment_slot.sql` dropped `payment_txs` and moved
+    execution identity onto `bill_lines`
+- latest human corrections:
+  - `PaymentTx` concept remains valid
+  - deleted `payment_txs` table must not be reintroduced
+  - charge initiation should prefer:
+    `POST /api/payment/:paymentProviderInstanceId/charge?bill-line=...`
+  - payment result polling should prefer:
+    `GET /api/payment/:paymentTxId`
+  - provider discovery should be a separate backend query surface
+  - do not pre-restrict provider choice in UI
+  - if an in-progress `PaymentTx` already binds a provider, mismatched provider
+    choice should be rejected at charge-initiation time and surfaced by
+    frontend dialog
+
+## Address And Object
+
+- durable contract doc:
+  `docs/20-product-tdd/ecommerce-contracts.md`
+- backend controllers:
+  - current `apps/backend/src/controllers/commerce.controller.ts`
+  - likely new payment-domain controller surface under
+    `apps/backend/src/controllers/`
+- backend payment domain:
+  - current `apps/backend/src/domains/payment/use-cases/payment-checkout.ts`
+  - new `PaymentTx`-centric use cases under `apps/backend/src/domains/payment/`
+- payment/provider data model:
+  - `apps/backend/src/entities/payment.ts`
+  - `apps/backend/src/entities/bill.ts`
+  - provider repository and admin-payment management flows
+- frontend query ownership:
+  - current `apps/frontend/src/domains/commerce/queries/useCommerce.ts`
+  - likely new payment-domain query owner
+- verification surfaces:
+  - backend unit/scenario tests
+  - system scenario for checkout launch and polling
+
+## State Diff
+
+- From:
+  - checkout read/write/sync are bill-line-scoped commerce endpoints
+  - provider selection is implicit through `findActiveByClientId`
+  - backend allows only one active provider per client
+  - `PaymentTx` is not an explicit HTTP resource
+- To:
+  - payment-provider discovery is explicit and backend-owned
+  - charge initiation uses explicit provider choice in the route:
+    `POST /api/payment/:paymentProviderInstanceId/charge?bill-line=...`
+  - payment status polling uses explicit `PaymentTx` resource reads:
+    `GET /api/payment/:paymentTxId`
+  - multiple active providers per client are allowed
+  - `PaymentTx` becomes an explicit backend resource concept and API shape
+    without restoring the deleted `payment_txs` table design
+
+## Blast Radius Forecast
+
+- durable product TDD payment ownership section
+- backend route typing and controller topology
+- payment provider selection logic and admin-payment constraints
+- bill-line payment execution-slot semantics
+- frontend checkout queries and page state machine
+- scenario coverage for JSAPI path and provider-conflict-on-charge flow
+
+## Invariants
+
+- `Bill` and `BillLine` remain the owners of obligation and settlement truth
+- checkout page route stays `/payment/checkout?bill-line=...`
+- final successful payment still resolves into bill-line settlement state
+- JSAPI remains the first-class checkout path for the current slice
+- H5 is not promoted to first-class UX until return-flow design exists
+- local fake provider baseline remains valid after contract reset
+
+## Recommended Direction
+
+- keep `PaymentTx` as an API/domain resource, not necessarily a database table
+- recommended `PaymentTx` identity model:
+  - `paymentTxId` is an opaque token that can be resolved back to:
+    - `billLineId`
+    - `attemptCount`
+    - `paymentProviderInstanceId`
+  - this preserves a stable pollable resource id without restoring the old
+    `payment_txs` table
+- recommended provider discovery shape:
+  - path family: `GET /api/payment/providers`
+  - it can stay context-free if its responsibility is only:
+    - what provider/method options are installed and available for this client
+    - how they should be labeled
+  - return ordered options with:
+    - `paymentProviderInstanceId`
+    - `label`
+    - `channel`
+    - `disabled`
+    - `disabledReason`
+  - do not overload this endpoint with bill-line-specific lock state or
+    in-progress tx conflict semantics
+- do not introduce a new synthetic `checkout target read`
+- instead, resolve target facts structurally from the existing durable owner:
+  - Billing owns target truth
+  - Payment owns provider catalog and payment execution
+- target-side facts should come from billing-owned read surfaces, not from a
+  payment-owned aggregate checkout read
+- recommended charge-initiation shape:
+  - path:
+    `POST /api/payment/:paymentProviderInstanceId/charge?bill-line=...`
+  - response should return:
+    - `paymentTx`
+    - launchable `clientAction`
+    - provider-conflict semantics when another in-progress provider binding
+      already exists
+- recommended payment-status read shape:
+  - path:
+    `GET /api/payment/:paymentTxId`
+  - response should return:
+    - `paymentTxId`
+    - status
+    - target refs:
+      - `billLineId`
+      - `billId`
+    - `orderId`
+    - provider summary
+    - amount and currency
+    - retryability / lock state
+    - terminal timestamps / failure summary as needed for UI
+  - this read should not require backend persistence of the whole transaction
+    snapshot; it may be reconstructed from:
+    - `billLineId`
+    - `paymentProviderInstanceId`
+    - `attemptCount`
+    - current provider query result
+  - launch-only fields such as `clientAction` do not need to be re-readable
+    from `GET /api/payment/:paymentTxId`
+
+## Contract Risks
+
+- if `paymentTxId` is opaque/derived rather than table-backed, callback and
+  retry flows must still resolve unambiguously across provider changes
+- provider discovery and checkout-target read must agree on conflict semantics
+  when an in-progress `PaymentTx` already exists
+- charge initiation must define a precise conflict response when selected
+  provider mismatches an unfinished in-progress `PaymentTx`
+- durable docs must be updated before implementation because current payment
+  ownership language explicitly rejects persisted backend transaction truth
+
+## Questions To Resolve
+
+1. Where does `PaymentTx` persist now if not as a resurrected `payment_txs`
+   table?
+2. Which existing billing-owned read should feed checkout target truth:
+   - current commerce checkout read
+   - bill detail / bill-line detail
+   - or another billing-owned read
+3. What exact response shape should
+   `POST /api/payment/:paymentProviderInstanceId/charge?bill-line=...` return?
+4. What exact status model and error model should `GET /api/payment/:paymentTxId`
+   expose?
+5. How should BillLine retain linkage to:
+   - latest in-progress `PaymentTx`
+   - selected provider
+   - settled result
+
+## Implementation Steps
+
+1. update durable ownership wording in
+   `docs/20-product-tdd/ecommerce-contracts.md` so Billing-owned target truth,
+   Payment-owned provider catalog, and transient `PaymentTx` resource semantics
+   are explicit before code mutation
+2. remove the single-active-provider-per-client schema/runtime constraint and
+   expose list-by-client provider reads
+3. add authenticated `/api/payment/*` endpoints for:
+   - `GET /providers`
+   - `POST /:paymentProviderInstanceId/charge?bill-line=...`
+   - `GET /:paymentTxId`
+4. keep legacy commerce checkout endpoints temporarily for compatibility, but
+   implement new payment flows through payment-domain use cases
+5. verify:
+   - multiple active providers can coexist for one client
+   - charge initiation returns `paymentTx + clientAction`
+   - mismatched provider selection conflicts at charge time
+   - polled `PaymentTx` reflects provider query truth without restoring
+     `payment_txs`
+
+## Implementation Result
+
+- updated durable contract wording in
+  `docs/20-product-tdd/ecommerce-contracts.md`:
+  - Billing-owned checkout target truth is explicit
+  - Payment-owned provider discovery and transient `PaymentTx` resource are
+    explicit
+  - payment domain does not own a synthetic checkout-target aggregate read
+- removed the single-active-provider-per-client constraint:
+  - entity no longer declares
+    `payment_provider_instances_active_client_unique`
+  - schema migration added:
+    `apps/backend/drizzle/0082_payment_provider_multi_active_per_client.sql`
+  - admin payment-provider management no longer rejects multiple active
+    provider instances for one client
+  - provider repository now exposes `listActiveByClientId(clientId)`
+- introduced transient `PaymentTx` identity encoding at
+  `apps/backend/src/domains/payment/services/payment-tx.ts`
+- added authenticated payment-domain user routes at
+  `apps/backend/src/controllers/payment.controller.ts`:
+  - `GET /api/payment/providers`
+  - `POST /api/payment/:paymentProviderInstanceId/charge?bill-line=...`
+  - `GET /api/payment/:paymentTxId`
+- kept existing provider notify routes under `/api/payment/wechat-pay/*`
+  unchanged
+- implemented new payment-domain use cases at
+  `apps/backend/src/domains/payment/use-cases/payment-contract.ts`:
+  - explicit provider discovery
+  - explicit-provider charge initiation
+  - transient `PaymentTx` polling
+- charge-initiation semantics now:
+  - sync current bound execution first
+  - clear stale failed/closed current bindings through provider query truth
+  - reject mismatched explicit provider choice with
+    `code = PAYMENT_PROVIDER_CONFLICT` when an unfinished binding still exists
+  - return `paymentTx + clientAction` on success
+- transient `PaymentTx` polling now reconstructs state from:
+  - `billLineId`
+  - `paymentProviderInstanceId`
+  - `attemptCount`
+  - live provider query result
+  - BillLine settlement truth
+- legacy commerce checkout endpoints remain in place temporarily for
+  compatibility:
+  - `GET /api/commerce/bill-lines/:billLineId/checkout`
+  - `POST /api/commerce/bill-lines/:billLineId/charges`
+  - `POST /api/commerce/bill-lines/:billLineId/payment/sync`
+
+## Verification Result
+
+- `pnpm exec biome check --write` on changed backend/task/doc files
+- `pnpm check:type:backend`
+- `pnpm check:config:backend`
+- `pnpm exec vitest run --config vitest.backend.config.ts --project backend-scenario apps/backend/tests/payment/payment-provider-ssot.scenario.test.ts`
+- focused backend scenario now proves:
+  - one client can have two active providers
+  - provider discovery returns both
+  - explicit-provider charge initiation works
+  - mismatched provider choice conflicts at charge time
+  - failed current tx clears slot and allows retry on another provider
+  - historical failed `PaymentTx` does not inherit later successful
+    `settledAt`
+  - `payment_txs` table remains absent
+
+## Topology Diagram
+
+```mermaid
+graph TD
+  A["Bill"] --> B["BillLine"]
+  B --> C["Execution Slot<br/>paymentProviderInstanceId<br/>attemptCount<br/>settledAt"]
+  C --> D["Payment Domain"]
+  D --> E["Payment Provider"]
+  D --> F["PaymentTx API Resource<br/>(transient / reconstructed)"]
+
+  G["GET /api/payment/providers"] --> H["Provider Catalog<br/>(client-scoped)"]
+  I["Billing-owned Read"] --> J["Hero / eligibility / current in-progress binding"]
+  K["POST /api/payment/:paymentProviderInstanceId/charge?bill-line=..."] --> F
+  L["GET /api/payment/:paymentTxId"] --> F
+```
+
+## Flow Diagram
+
+```mermaid
+flowchart TD
+  A["进入 /payment/checkout?bill-line=..."] --> B["GET billing-owned target read"]
+  A --> C["GET /api/payment/providers"]
+
+  B --> D{"bill-line 是否可支付"}
+  D -->|"否"| E["显示 blocked state"]
+  D -->|"是"| F["渲染 Hero + provider radios"]
+
+  F --> G["用户自由选择 provider"]
+  G --> H["点击 支付"]
+  H --> I["POST /api/payment/:paymentProviderInstanceId/charge?bill-line=..."]
+
+  I --> J{"是否与未结束 PaymentTx 绑定 provider 冲突"}
+  J -->|"是"| K["返回 conflict"]
+  K --> L["前端 dialog：不能切换到其它 provider\n取消 / 改用已绑定 provider继续"]
+  L --> H
+
+  J -->|"否"| M["返回 paymentTx + clientAction"]
+  M --> N{"clientAction 类型"}
+  N -->|"WECHAT_BRIDGE"| O["调用 WeixinJSBridge"]
+  N -->|"PAYMENT_REDIRECT"| P["跳转 provider"]
+
+  O --> Q["SDK 返回 / 页面恢复"]
+  P --> Q
+
+  Q --> R["GET /api/payment/:paymentTxId"]
+  R --> S{"终态?"}
+  S -->|"否"| R
+  S -->|"SUCCEEDED"| T["展示成功态"]
+  S -->|"FAILED/CLOSED"| U["展示失败或关闭态"]
+```
+
+## Verification Plan
+
+- doc review:
+  - payment ownership section no longer conflicts with approved contract
+- backend static checks after implementation:
+  - payment controller typings
+  - payment use-case/unit tests
+  - migration/config lint if provider uniqueness or metadata changes
+- focused runtime proof:
+  - checkout can list multiple provider options for one client
+  - checkout does not pre-restrict provider options in UI
+  - charge initiation returns provider-conflict error when selected provider
+    mismatches an in-progress `PaymentTx`
+  - `POST /api/payment/:paymentProviderInstanceId/charge?bill-line=...`
+    returns `PaymentTx` plus launchable client action
+  - `GET /api/payment/:paymentTxId` reaches terminal state correctly
+
+## Implementation Steps
+
+1. Promote the approved payment contract into
+   `docs/20-product-tdd/ecommerce-contracts.md`.
+2. Replace implicit active-provider-by-client resolution with explicit provider
+   discovery and explicit provider selection.
+3. Remove `payment_provider_instances_active_client_unique` and add explicit
+   provider multiplicity support without introducing default-provider
+   requirements.
+4. Introduce payment-domain endpoints for:
+   - `GET /api/payment/providers`
+   - `POST /api/payment/:paymentProviderInstanceId/charge?bill-line=...`
+   - `GET /api/payment/:paymentTxId`
+5. Keep checkout target truth on billing-owned reads rather than adding a new
+   synthetic payment checkout read.
+6. Implement `PaymentTx` identity resolution without restoring the deleted
+   `payment_txs` table design.
+7. Rewire frontend checkout queries and state machine to the approved payment
+   contract.
+8. Add frontend dialog handling for provider-conflict response.
+9. Add runtime/dev support for fake JSAPI bridge execution after backend
+   contract stabilizes.
diff --git a/tasks/ride-hailing-ui-fixes/payment-checkout-fake-jsapi-bridge-plan.md b/tasks/ride-hailing-ui-fixes/payment-checkout-fake-jsapi-bridge-plan.md
new file mode 100644
index 000000000..ebd0b3e72
--- /dev/null
+++ b/tasks/ride-hailing-ui-fixes/payment-checkout-fake-jsapi-bridge-plan.md
@@ -0,0 +1,242 @@
+# Payment Checkout Fake JSAPI Bridge Plan
+
+## Objective
+
+- make local Payment Checkout able to execute the JSAPI client step without a
+  real WeChat container
+- keep the local bridge aligned with the official WeChatPay v3 JSAPI payment
+  invocation contract
+- preserve the approved ownership split:
+  backend/provider query remains payment truth, while the fake bridge only
+  simulates the client launch-and-return step
+
+## Classification
+
+- Primary route: `Constraint`
+- Active mode: `Execute`
+
+## Official References
+
+- WeChatPay v3 JSAPI client invocation:
+  [调起支付API](https://pay.weixin.qq.com/doc/v3/partner/4012089542)
+- WeChatPay v3 client callback / order-query guidance:
+  [支付回调和查单实现指引](https://pay.weixin.qq.com/doc/v3/merchant/4012791870)
+- WeChatPay v3 JSAPI order creation:
+  [JSAPI下单](https://pay.wechatpay.cn/doc/v3/merchant/4012791856)
+
+## Confirmed Truth
+
+- official JSAPI payment invocation is:
+  - `WeixinJSBridge.invoke("getBrandWCPayRequest", payload, callback)`
+  - official payload fields are:
+    - `appId`
+    - `timeStamp`
+    - `nonceStr`
+    - `package`
+    - `signType`
+    - `paySign`
+- official JSAPI guidance requires waiting for `WeixinJSBridgeReady` when the
+  bridge is not yet available
+- official guidance also says frontend callback `err_msg` is not final payment
+  truth; backend should still query order/payment state after the bridge
+  returns
+- current backend `WECHAT_BRIDGE` client action already matches the official
+  JSAPI payload shape exactly:
+  - `apps/backend/src/domains/payment/services/payment-provider.ts`
+- current scenario-only fake bridge already proves the minimum happy-path shim:
+  - `tests/scenario/_infra/browser/wechatpay.ts`
+- current fake WeChatPay server already supports:
+  - JSAPI prepay creation
+  - `POST /__fake_wechatpay/prepays/:prepayId/succeed`
+  - provider-side transaction query
+- current runtime frontend still has no development-only bridge shim
+- current local provider baseline already targets:
+  - `chargeMode = JSAPI`
+  - origin `https://wechatpay.partner-up.localhost`
+- current frontend already has shared WeChat runtime seams:
+  - `apps/frontend/src/shared/wechat/useWeChatMiniProgramWebView.ts`
+  - `apps/frontend/src/types/wechat-jssdk.d.ts`
+
+## Segment Scope
+
+- included:
+  - development-only `WeixinJSBridge` payment shim
+  - development-only bridge bootstrap wiring
+  - environment typing / flags for bridge enablement and fake-provider origin
+  - packet/log updates
+- excluded:
+  - Payment Checkout page IA or wireframe
+  - backend payment contract changes
+  - H5 checkout mocking
+  - full `wx` / WeChat JSSDK emulation beyond payment bridge needs
+  - non-happy-path provider-state simulation unless the checkout UI slice
+    proves it is required
+
+## Proposed Address And Object
+
+- `apps/frontend/src/shared/wechat/`
+  - likely new dev-only fake bridge installer module
+- `apps/frontend/src/app/create-app.ts`
+  - install the fake bridge during app bootstrap when enabled
+- `apps/frontend/src/vite-env.d.ts`
+  - add env typing for dev-only fake bridge controls
+- `tests/scenario/_infra/browser/wechatpay.ts`
+  - optionally refactor to share semantics with runtime fake bridge
+- task packet logs
+  - record the segment result and verification
+
+## State Diff
+
+- From:
+  local Payment Checkout can only complete the JSAPI client step inside
+  scenario tests; the real dev runtime has no `WeixinJSBridge` payment shim.
+- To:
+  local Payment Checkout can execute the JSAPI client step in dev runtime
+  through a narrow fake `WeixinJSBridge`, then continue through the approved
+  backend `PaymentTx` polling flow.
+
+## Blast Radius Forecast
+
+- frontend app bootstrap in development
+- Payment Checkout client-action execution path
+- local fake WeChatPay runtime assumptions
+- scenario/runtime parity for JSAPI payment launch
+- env surface for frontend local development
+
+## Invariants Check
+
+- do not affect production or non-fake provider runtime
+- do not turn frontend callback `ok/cancel/fail` into payment truth
+- do not add a fake full `wx` SDK when only payment bridge is needed
+- keep payload field names and casing aligned with the official JSAPI contract
+- keep backend `GET /api/payment/:paymentTxId` polling as the only settlement
+  truth used by checkout
+- keep fake bridge install explicitly gated by development config
+- do not widen this segment into H5 or non-payment WeChat features
+
+## Recommended Direction
+
+- install the fake bridge at app-bootstrap level, not page-local level
+- gate it behind explicit frontend env flags:
+  - `VITE_FAKE_WECHATPAY_BRIDGE_ENABLED`
+  - `VITE_FAKE_WECHATPAY_ORIGIN`
+- dispatch `WeixinJSBridgeReady` after installation so existing
+  WeChat-runtime seams remain structurally correct
+- support only:
+  - `invoke("getBrandWCPayRequest", payload, callback)`
+- unsupported bridge methods should respond with callback failure
+- first implementation should target the happy path:
+  - parse `package = prepay_id=...`
+  - call fake-provider
+    `POST /__fake_wechatpay/prepays/:prepayId/succeed`
+  - callback with official-style `err_msg`
+- do not add browser-side cryptographic signature verification in the fake
+  bridge; that is not the owner boundary here
+- if later UI slices need local `cancel` or `fail` differentiation, reopen a
+  separate sub-segment because provider-state alignment for those paths is not
+  free
+
+## Sequence Diagram
+
+```mermaid
+sequenceDiagram
+  participant UI as "PaymentCheckoutPage"
+  participant Bridge as "Fake WeixinJSBridge"
+  participant Fake as "fake-wechatpay-server"
+  participant BE as "Backend PaymentTx Poll"
+
+  UI->>BE: "POST /api/payment/:provider/charge?bill-line=..."
+  BE-->>UI: "paymentTx + clientAction(WECHAT_BRIDGE)"
+  UI->>Bridge: "invoke(getBrandWCPayRequest, payload, callback)"
+  Bridge->>Fake: "POST /__fake_wechatpay/prepays/:prepayId/succeed"
+  Fake-->>Bridge: "ok"
+  Bridge-->>UI: "err_msg = get_brand_wcpay_request:ok"
+  UI->>BE: "GET /api/payment/:paymentTxId"
+  BE-->>UI: "SUCCEEDED"
+```
+
+## Verification Plan
+
+- frontend static verification:
+  - `pnpm check:type:frontend`
+- focused source validation:
+  - `pnpm exec biome check ...`
+- local runtime proof:
+  - `pnpm dev:ensure`
+  - open `/payment/checkout?bill-line=...` against the local fake provider
+  - confirm JSAPI client action can be launched without a real WeChat container
+  - confirm page still resolves terminal truth through `PaymentTx` polling
+- if scenario helpers are refactored, rerun the focused checkout/ordering
+  system scenario
+
+## Implementation Steps
+
+1. add explicit frontend env typing for dev-only fake bridge controls
+2. introduce a dev-only fake `WeixinJSBridge` installer under
+   `apps/frontend/src/shared/wechat/`
+3. install the bridge during app bootstrap only when:
+   - frontend is in development
+   - fake bridge env flag is enabled
+4. expose `WeixinJSBridge.invoke` with support for
+   `getBrandWCPayRequest` only
+5. parse `package` into `prepay_id=...` and call the fake-provider success
+   endpoint
+6. dispatch `WeixinJSBridgeReady` after injection so runtime structure matches
+   the official integration model
+7. keep checkout flow behavior separated:
+   - bridge callback only means the client returned
+   - backend `PaymentTx` poll still decides final state
+8. run the verification plan and update packet logs before any UI slice starts
+
+## Segment Start Preconditions
+
+- official JSAPI contract has been re-verified
+- current backend `WECHAT_BRIDGE` payload shape is already aligned
+- explicit user start signal is still required before implementation
+
+## Implementation Result
+
+- added frontend fake bridge module:
+  `apps/frontend/src/shared/wechat/fake-wechatpay-bridge.ts`
+- the new module:
+  - installs only in development and only when explicitly enabled by env
+  - refuses to override an existing real `WeixinJSBridge`
+  - supports only
+    `WeixinJSBridge.invoke("getBrandWCPayRequest", payload, callback)`
+  - parses `package = prepay_id=...`
+  - calls fake-provider
+    `POST /__fake_wechatpay/prepays/:prepayId/succeed`
+  - returns official-style callback strings:
+    - `get_brand_wcpay_request:ok`
+    - `get_brand_wcpay_request:fail ...`
+  - dispatches `WeixinJSBridgeReady` after installation
+- installed the bridge from app bootstrap in:
+  `apps/frontend/src/app/create-app.ts`
+- expanded frontend env typing in:
+  `apps/frontend/src/vite-env.d.ts`
+- refined global bridge typing in:
+  `apps/frontend/src/types/wechat-jssdk.d.ts`
+- added focused unit coverage in:
+  `apps/frontend/src/shared/wechat/fake-wechatpay-bridge.test.ts`
+- added durable env example entries in:
+  `apps/frontend/.env.example`
+- enabled the fake bridge in the local ignored development env:
+  `apps/frontend/.env`
+
+## Verification Result
+
+- passed:
+  - `pnpm exec biome check --write apps/frontend/src/app/create-app.ts apps/frontend/src/vite-env.d.ts apps/frontend/src/types/wechat-jssdk.d.ts apps/frontend/src/shared/wechat/fake-wechatpay-bridge.ts apps/frontend/src/shared/wechat/fake-wechatpay-bridge.test.ts apps/frontend/.env.example`
+  - `pnpm check:type:frontend`
+  - `pnpm exec vitest run --project frontend-unit apps/frontend/src/shared/wechat/fake-wechatpay-bridge.test.ts`
+- unit tests prove:
+  - bridge installs and emits `WeixinJSBridgeReady`
+  - happy-path JSAPI invocation hits the fake-provider success endpoint
+  - unsupported methods fail without fetch
+  - an existing bridge is not overridden
+  - invalid `prepay_id` packages fail deterministically
+- known remaining gap:
+  - current `PaymentCheckoutPage` is still a reset shell and does not yet own
+    the JSAPI invocation path
+  - therefore end-to-end local manual proof of “点击支付 -> fake bridge ->
+    poll PaymentTx” still belongs to the later checkout interaction/UI slice
diff --git a/tasks/ride-hailing-ui-fixes/payment-checkout-interaction-ui-plan.md b/tasks/ride-hailing-ui-fixes/payment-checkout-interaction-ui-plan.md
new file mode 100644
index 000000000..8df5918fc
--- /dev/null
+++ b/tasks/ride-hailing-ui-fixes/payment-checkout-interaction-ui-plan.md
@@ -0,0 +1,281 @@
+# Payment Checkout Interaction / UI Plan
+
+## Objective
+
+- rebuild `PaymentCheckoutPage` around the approved payment-domain runtime
+  contract instead of the legacy commerce checkout aggregate
+- restore a payment-first IA where the page centers on amount, payment method,
+  and payment progress rather than on raw BillLine narrative
+- align frontend route, frontend data assembly, and minimal backend response
+  shape so the slice can run end-to-end in local fake-JSAPI development
+
+## Classification
+
+- Primary route: `Constraint`
+- Active mode: `Explore`
+
+## Confirmed Truth
+
+- Billing owns checkout target truth; Payment must not introduce a synthetic
+  checkout-target aggregate read
+- provider discovery is intentionally target-agnostic:
+  `GET /api/payment/providers`
+- provider mismatch due to an unfinished in-progress execution is exposed only
+  at charge-initiation time:
+  `POST /api/payment/:paymentProviderInstanceId/charge?bill-line=...`
+- payment result truth is polled through:
+  `GET /api/payment/:paymentTxId`
+- every user-visible payment outcome must be derived from backend-returned
+  `PaymentTx` state, not from the bridge callback result itself
+- current frontend page still depends on the legacy commerce aggregate:
+  `GET /api/commerce/bill-lines/:billLineId/checkout`
+- current user-facing route is already frontend-owned, but the present
+  `/payment/checkout?bill-line=...` shape is already sufficient if Billing
+  exposes a bill-line-keyed read surface for checkout target truth
+- user-facing IA corrections already confirmed:
+  - do not pre-announce unfinished provider binding in the payment-method list
+  - do not expose channel internals such as `JSAPI` / `H5` in the primary list
+  - payment method list should use `PuCell + PuRadio + usePuSelect`
+  - Hero may reuse a simplified BillLineCard shape
+- local fake JSAPI bridge is now available, but the page does not yet invoke
+  it through a real pay-action path
+
+## Segment Scope
+
+- included:
+  - frontend checkout route confirmation around the existing `bill-line` key
+  - frontend query-owner migration away from the legacy checkout aggregate
+  - page IA, wireframe, and runtime state machine
+  - bottom CTA behavior, provider selection, charge launch, bridge handoff,
+    poll loop, and conflict dialog
+  - minimal backend alignment required specifically by this page flow
+- excluded:
+  - provider admin/configuration UI
+  - new payment methods beyond the existing provider catalog
+  - H5 return-to-app experience design
+  - reintroducing persisted `payment_txs`
+
+## Address And Object
+
+- frontend route / assembly:
+  - `apps/frontend/src/domains/commerce/routing/payment-checkout-route.ts`
+  - `apps/frontend/src/app/router.ts`
+  - `apps/frontend/src/pages/CommerceBillDetailPage.vue`
+- frontend page / feature logic:
+  - `apps/frontend/src/pages/PaymentCheckoutPage.vue`
+  - likely new payment-domain query/mutation owner under
+    `apps/frontend/src/domains/payment/`
+  - likely new checkout-scoped UI component(s) under
+    `apps/frontend/src/domains/payment/ui/`
+- backend alignment, only if required:
+  - `apps/backend/src/controllers/payment.controller.ts`
+  - `apps/backend/src/domains/payment/use-cases/payment-contract.ts`
+- durable truth if route ownership or runtime contract wording changes:
+  - `docs/20-product-tdd/ecommerce-contracts.md`
+
+## State Diff
+
+- From:
+  `PaymentCheckoutPage` is a reset shell that still keys itself through the
+  legacy commerce checkout aggregate and has no real payment interaction path.
+- To:
+  `PaymentCheckoutPage` is a payment-first route that assembles Billing-owned
+  target facts plus Payment-owned provider and `PaymentTx` facts, launches the
+  provider action, and converges to terminal payment state through polling.
+
+## Blast Radius Forecast
+
+- Bill Detail -> Payment Checkout navigation topology
+- frontend query ownership between `commerce` and `payment`
+- backend conflict/error payload shape for charge initiation
+- focused checkout scenario coverage
+- local fake-JSAPI runtime proof
+
+## Invariants Check
+
+- do not reintroduce a payment-owned synthetic checkout-target read
+- do not make `GET /api/payment/providers` target-aware
+- do not leak raw provider channel internals into the primary payment-method UI
+- do not persist `PaymentTx` lifecycle truth in backend storage
+- keep Bill and BillLine as the owners of obligation and settlement truth
+- keep backend polling as final payment truth after SDK/bridge callback returns
+
+## Recommended Direction
+
+- frontend should assemble checkout from two owner surfaces:
+  - Billing-owned target truth
+  - Payment-owned provider catalog and `PaymentTx` execution truth
+- recommended route shape:
+  - keep `/payment/checkout?bill-line=:billLineId`
+  - reason:
+    `billLineId` is already enough to identify the target; the real missing
+    piece is a Billing-owned bill-line read surface that can replace the
+    legacy payment-owned checkout aggregate
+- recommended backend-alignment direction:
+  - replace the legacy checkout aggregate with a Billing-owned bill-line-target
+    read keyed by `billLineId`
+  - keep Payment responsible only for:
+    - provider catalog discovery
+    - charge initiation
+    - `PaymentTx` polling
+- bridge callback handling should stay thin:
+  - do not introduce a new frontend payment-domain status just for
+    "paymentTx created but client launch did not complete cleanly"
+  - after any bridge return, throw, `fail`, or `cancel`, immediately reconcile
+    by querying/polling `PaymentTx`
+  - dialogs such as `支付取消` / `支付关闭` should be derived from reconciled
+    backend truth, not from bridge callback wording
+- current deliberate simplification:
+  - do not expand `PAYMENT_PROVIDER_CONFLICT` payload in this slice
+  - conflict UX may stay as a generic blocking/informational dialog for now
+    rather than a smart "continue with bound provider" recovery flow
+- success-path UX should be:
+  - show a short-lived success state
+  - auto-return after the success state instead of keeping checkout as a
+    long-lived terminal page
+
+## IA
+
+- `PuPageScaffold(viewport="screen")`
+- `PuHeader`
+  - title only: `支付`
+  - leading back action
+- scrollable content area:
+  - simplified BillLine Hero
+  - payment method section
+  - transient notice area only for post-click runtime outcomes, not for
+    speculative pre-charge provider binding hints
+- bottom anchored CTA:
+  - primary text: `支付 {amount}`
+
+## Wireframe
+
+```text
+┌────────────────────────────────────────────────┐
+│ ← 支付                                         │
+├────────────────────────────────────────────────┤
+│ ┌────────────────────────────────────────────┐ │
+│ │ ￥40.00                         [待支付]   │ │
+│ │ 网约车车费                                  │ │
+│ │ 行程完成后生成                              │ │
+│ └────────────────────────────────────────────┘ │
+│                                                │
+│ 支付方式                                       │
+│ ┌────────────────────────────────────────────┐ │
+│ │ (●) 微信支付                                │ │
+│ │     PartnerUp 测试商户                     │ │
+│ └────────────────────────────────────────────┘ │
+│ ┌────────────────────────────────────────────┐ │
+│ │ ( ) 另一支付方式                            │ │
+│ │     商户名称 / 品牌名                       │ │
+│ └────────────────────────────────────────────┘ │
+│                                                │
+│        "可滚动内容，但不再引入额外叙事层"      │
+├────────────────────────────────────────────────┤
+│ ┌────────────────────────────────────────────┐ │
+│ │                 支付 ￥40.00               │ │
+│ └────────────────────────────────────────────┘ │
+└────────────────────────────────────────────────┘
+```
+
+## Runtime States
+
+- idle:
+  - Billing target loaded
+  - provider catalog loaded
+  - one provider selected
+  - CTA enabled
+- launching:
+  - charge mutation in flight or bridge invoke in flight
+  - CTA loading / disabled
+- polling:
+  - `paymentTxId` exists
+  - CTA disabled with progress copy
+  - page polls `GET /api/payment/:paymentTxId`
+- bridge-return reconciliation:
+  - this is not a new domain payment status
+  - after any bridge completion or failure, the page immediately checks the
+    backend `PaymentTx` and routes UX from that result
+- succeeded:
+  - show a short-lived success state
+  - auto-return after the success state
+- failed / closed:
+  - show dialog or notice from reconciled backend truth such as `支付取消` /
+    `支付关闭`
+  - allow provider re-selection and a fresh pay attempt when backend state is
+    again chargeable
+- provider conflict:
+  - show dialog after charge-initiation rejection
+  - keep it generic in this slice; do not add provider-aware recovery actions
+
+## Sequence Diagram
+
+```mermaid
+sequenceDiagram
+  participant Bill as "Billing Read"
+  participant UI as "PaymentCheckoutPage"
+  participant Pay as "Payment API"
+  participant Bridge as "WeixinJSBridge / Fake Bridge"
+
+  UI->>Bill: "load bill + target bill line"
+  UI->>Pay: "GET /api/payment/providers"
+  UI->>Pay: "POST /api/payment/:provider/charge?bill-line=..."
+  alt provider conflict
+    Pay-->>UI: "409 PAYMENT_PROVIDER_CONFLICT"
+    UI-->>UI: "show conflict dialog"
+  else action created
+    Pay-->>UI: "paymentTx + clientAction"
+    UI->>Bridge: "invoke provider action"
+    Bridge-->>UI: "client returned or failed"
+    loop until terminal
+      UI->>Pay: "GET /api/payment/:paymentTxId"
+      Pay-->>UI: "PROCESSING / SUCCEEDED / FAILED / CLOSED"
+    end
+  end
+```
+
+## Verification Plan
+
+- frontend static:
+  - `pnpm check:type:frontend`
+  - `pnpm exec biome check ...`
+- backend static if contract payload changes:
+  - `pnpm check:type:backend`
+- focused backend scenario if conflict payload changes:
+  - payment scenario covering `PAYMENT_PROVIDER_CONFLICT`
+- focused system scenario:
+  - Bill Detail -> Payment Checkout route navigation
+  - provider selection
+  - local fake-JSAPI pay launch
+  - `PaymentTx` polling to terminal state
+
+## Implementation Steps
+
+1. confirm and lock the existing `/payment/checkout?bill-line=...` route as
+   sufficient for Billing-owned target assembly
+2. align a Billing-owned bill-line read surface so frontend can drop the
+   legacy checkout aggregate without introducing a payment-owned replacement
+3. migrate frontend checkout data assembly away from the legacy commerce
+   checkout aggregate
+4. add or refine frontend payment-domain query/mutation owners for:
+   - provider catalog
+   - charge initiation
+   - `PaymentTx` polling
+5. align backend conflict payload only if the current `PAYMENT_PROVIDER_CONFLICT`
+   response is too weak for the approved dialog UX
+6. implement the payment-first page layout and bottom CTA structure
+7. wire the pay-action runtime:
+   - selected provider
+   - charge mutation
+   - bridge/client action invoke
+   - poll loop
+   - terminal-state handling
+8. add focused verification before closing the slice
+
+## Segment Start Preconditions
+
+- standalone packet exists
+- workstream plan references this standalone segment
+- Billing-owned bill-line read direction is either accepted or narrowed before
+  code mutation
+- explicit human start signal is still required before implementation
diff --git a/tasks/ride-hailing-ui-fixes/payment-checkout-page-reset-plan.md b/tasks/ride-hailing-ui-fixes/payment-checkout-page-reset-plan.md
new file mode 100644
index 000000000..811321564
--- /dev/null
+++ b/tasks/ride-hailing-ui-fixes/payment-checkout-page-reset-plan.md
@@ -0,0 +1,518 @@
+# Payment Checkout Workstream Plan
+
+## Overall
+
+### Objective
+
+- rebuild Payment Checkout as a payment-first user surface instead of a
+  bill-line-resource-first page
+- make frontend own the user-facing checkout route topology
+- prepare a stable local payment development baseline for iterative checkout UI
+  work
+- prepare a development-only fake JSAPI bridge so local checkout can execute
+  the client payment step end-to-end
+
+### Classification
+
+- Primary route: `Reality`
+- Workstream mode: `Explore` with backend contract and fake JSAPI bridge
+  segments completed, and interaction/UI segment opened as the next active
+  standalone slice
+
+### Guardrails
+
+- do not let backend own frontend-only route text such as
+  `/payment/checkout?...`
+- do not widen the current blast radius by mixing page reset, route migration,
+  and local provider baseline into one opaque mutation
+- do not use `apps/backend/drizzle/` for development-only fake provider seeds
+- keep payment execution semantics intact while the UI shell is being reset
+
+### Confirmed Durable Direction
+
+- current user-facing checkout route is wrong-shaped for the intended IA:
+  `/bill-lines/:billLineId/checkout`
+- `BillDetailPage` should stop depending on backend-authored checkout hrefs
+- preferred ownership split before the latest contract correction was:
+  - backend owns payable target facts and payment execution facts
+  - frontend owns the user-facing checkout route shape
+- local payment development baseline needs two coordinated inputs:
+  - stable fake WeChatPay fixture
+  - development-only provider-instance seed in
+    `apps/backend/data-migrations/`
+- latest human correction changes the contract direction materially:
+  - payment initiation should move under `/api/payment/*`
+  - payment should return and later poll an explicit `PaymentTx` resource
+  - payment-method discovery should be a separate backend-owned query surface
+  - `PaymentTx` stays as a domain concept, but the deleted historical
+    `payment_txs` table should not be reintroduced
+- official JSAPI contract has now been re-verified:
+  - frontend invocation is `WeixinJSBridge.invoke("getBrandWCPayRequest", ...)`
+  - payload field casing must match the official docs exactly
+  - frontend callback is not final payment truth; backend query/polling still
+    decides final state
+- current runtime still lacks a development-only fake `WeixinJSBridge`, even
+  though:
+  - scenario-only stub already exists
+  - fake WeChatPay server already supports `prepay -> succeed`
+- provider discovery must stay target-agnostic at `GET /api/payment/providers`
+- unfinished-provider-binding knowledge must not be surfaced pre-charge through
+  the provider list
+- current `/payment/checkout?bill-line=...` route shape is sufficient; the
+  missing owner-aligned piece is a Billing-owned bill-line read surface that
+  can replace the legacy payment-owned checkout aggregate
+
+### Workstream Segments
+
+1. Reset Segment
+   clear the current checkout successful-state body so IA can be redesigned
+   from a neutral shell
+2. Route / Ownership Segment
+   migrate from backend-authored `checkoutHref` and path-param bill-line route
+   to a frontend-owned checkout route contract
+3. Local Mock Provider Baseline Segment
+   stabilize fake WeChatPay fixture and seed a development-only local provider
+   instance
+4. Backend Contract Segment
+   moved to standalone artifact:
+   `payment-checkout-backend-contract-plan.md`
+5. Fake JSAPI Bridge Segment
+   introduce a development-only fake `WeixinJSBridge` aligned with official
+   WeChatPay v3 JSAPI client invocation semantics
+6. Interaction / UI Segment
+   moved to standalone artifact:
+   `payment-checkout-interaction-ui-plan.md`
+
+### Open Decisions
+
+- fake JSAPI bridge enablement surface:
+  - explicit frontend env flag only
+  - or env flag plus fake-provider-origin guard
+- fake JSAPI non-happy-path scope:
+  - success-only in the first segment
+  - or include local cancel/fail semantics immediately
+- H5 return-flow contract:
+  - support raw redirect only
+  - or defer H5 until an explicit return-to-app flow is designed
+- Billing-owned target read shape for checkout assembly:
+  - keep using `billLineId` as the user-facing route key
+  - add or reshape a Billing-owned bill-line read surface to replace the
+    legacy checkout aggregate
+- charge-conflict payload shape:
+  - keep generic `PAYMENT_PROVIDER_CONFLICT`
+  - or return structured provider summary for dialog recovery UX
+
+### Current Recommendation
+
+- payment method source should be backend-authored even if the initial option
+  list has length 1
+- provider discovery should stay context-free at `GET /api/payment/providers`;
+  target truth belongs to billing-owned reads
+- prefer `JSAPI` as the first-class checkout path because:
+  - existing scenario path already uses `JSAPI`
+  - the active local development baseline now uses `JSAPI`
+  - current H5 support only yields a redirect URL and does not yet define a
+    polished return-to-app flow
+- payment should be modeled as:
+  - create or resume a provider execution through explicit-provider charge
+  - invoke the returned payment-provider client action
+  - poll the transient `PaymentTx` resource until terminal state
+- checkout should treat bridge callback output as transport-only:
+  - any `ok / cancel / fail / throw` branch must reconcile through backend
+    `PaymentTx` before showing user-visible payment outcome
+- checkout UI should not expose raw provider channel internals such as
+  `JSAPI` / `H5` in the main payment-method list
+- checkout success should be short-lived and then auto-return rather than
+  remain as a long-lived terminal page
+- fake runtime JSAPI support should:
+  - emulate only `WeixinJSBridge.invoke("getBrandWCPayRequest", ...)`
+  - keep backend polling as final payment truth
+  - avoid pretending to be a full WeChat JSSDK
+
+## Segment: Fake JSAPI Bridge
+
+### Segment Objective
+
+- make local dev runtime able to execute the JSAPI client step without a real
+  WeChat container
+- keep the fake bridge aligned with official WeChatPay v3 JSAPI invocation
+  semantics
+- avoid mixing bridge bootstrap into page IA or checkout interaction UI work
+
+### Segment Status
+
+- Status: completed
+- Slice mode used: `Execute`
+
+### Confirmed Truth Before Implementation
+
+- current runtime frontend has no fake `WeixinJSBridge`
+- current scenario-only fake bridge already exists
+- current fake-provider already supports `prepay -> succeed`
+- official JSAPI contract requires:
+  - `getBrandWCPayRequest`
+  - exact payload casing
+  - `WeixinJSBridgeReady`
+  - backend query/poll as final payment truth
+
+### Implementation Result
+
+- added a dev-only fake bridge installer at:
+  `apps/frontend/src/shared/wechat/fake-wechatpay-bridge.ts`
+- installed it during app bootstrap from:
+  `apps/frontend/src/app/create-app.ts`
+- added frontend env flags:
+  - `VITE_FAKE_WECHATPAY_BRIDGE_ENABLED`
+  - `VITE_FAKE_WECHATPAY_ORIGIN`
+- added focused unit coverage for install and invoke semantics
+- fake bridge scope is intentionally narrow:
+  - supported:
+    `invoke("getBrandWCPayRequest", ...)`
+  - excluded:
+    full `wx` emulation, H5, and non-happy-path provider-state simulation
+
+### Verification Result
+
+- `pnpm check:type:frontend`
+- `pnpm exec vitest run --project frontend-unit apps/frontend/src/shared/wechat/fake-wechatpay-bridge.test.ts`
+- remaining reality:
+  Payment Checkout page still has no user-visible JSAPI invocation path, so
+  local manual “点击支付” proof belongs to the later interaction/UI segment
+
+## Segment: Reset
+
+### Segment Objective
+
+- remove the current successful-state body content from
+  `PaymentCheckoutPage.vue`
+- preserve the page shell and loading/error/back behavior
+- keep the reset reviewable and small before IA and route redesign
+
+### Segment Status
+
+- Status: completed
+- Slice mode used: `Execute`
+
+### Confirmed Truth Before Implementation
+
+- current frontend page:
+  `apps/frontend/src/pages/PaymentCheckoutPage.vue`
+- current frontend route parsing was path-param based:
+  - `route.params.billLineId`
+- current frontend query owner is bill-line-keyed:
+  - `usePaymentCheckout(billLineId)`
+- current backend API contract is bill-line-keyed:
+  - `GET /api/commerce/bill-lines/:billLineId/checkout`
+- current successful-state page hierarchy was bill-line-first:
+  - `Checkout` eyebrow
+  - order item heading
+  - bill-line label plus amount
+  - provider section
+  - return-to-bill inline action
+- user had already removed the header subtitle locally before this segment
+
+### Address And Object
+
+- `apps/frontend/src/pages/PaymentCheckoutPage.vue`
+  - clear successful-state body content only
+- `tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+  - narrow checkout assertions to page reachability and return navigation
+- task packet logs
+  - record the reset result and verification
+
+### State Diff
+
+- From:
+  Payment Checkout rendered a bill-line-first successful-state layout.
+- To:
+  Payment Checkout is an intentionally cleared shell, preserving route
+  reachability and page framing only.
+
+### Blast Radius Forecast
+
+- frontend page shell
+- focused RideHailing system scenario
+- no backend contract mutation in this segment
+
+### Invariants
+
+- preserve invalid-id handling
+- preserve loading state
+- preserve error state
+- preserve bill-detail fallback for the back button
+- do not overwrite the user's subtitle-removal change
+- do not change payment execution behavior in this reset segment
+
+### Verification Plan
+
+- `pnpm exec biome check apps/frontend/src/pages/PaymentCheckoutPage.vue tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+- `pnpm --dir apps/frontend exec vue-tsc --noEmit`
+- `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts -t "commerce_ride_hailing_ordering_reaches_order_detail"`
+
+### Implementation Steps
+
+1. Remove the current successful-state body content from
+   `apps/frontend/src/pages/PaymentCheckoutPage.vue`.
+2. Keep the page shell behaviors in place:
+   invalid-id, loading, error, and back navigation.
+3. Remove scenario assertions that depend on the old successful-state body
+   structure.
+4. Keep scenario coverage for:
+   checkout route reachability, page shell visibility, and return navigation to
+   Bill Detail.
+5. Run the focused verification plan and record the result in this packet.
+
+### Implementation Result
+
+- removed the current successful-state body content from
+  `apps/frontend/src/pages/PaymentCheckoutPage.vue`
+- preserved:
+  - invalid-id notice
+  - loading state
+  - error state
+  - back navigation to bill detail fallback
+- intentionally removed the old bill-line-first content hierarchy:
+  - `Checkout` eyebrow
+  - bill-line label plus amount card
+  - provider section
+  - return-to-bill inline action card
+- narrowed the focused RideHailing scenario checkout assertions to:
+  - route reachability
+  - checkout page shell visibility
+  - back navigation to Bill Detail
+- aligned one stale scenario locator from `Back` to the real accessible label
+  `返回上一页`
+
+### Verification Result
+
+- `pnpm exec biome check apps/frontend/src/pages/PaymentCheckoutPage.vue tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+- `pnpm --dir apps/frontend exec vue-tsc --noEmit`
+- `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts -t "commerce_ride_hailing_ordering_reaches_order_detail"`
+
+## Segment: Route / Ownership
+
+### Segment Objective
+
+- move the user-facing checkout route to `/payment/checkout?bill-line=...`
+- stop backend bill-detail projection from owning frontend route text
+- keep checkout transport temporarily bill-line-scoped while UI ownership moves
+  to the frontend
+
+### Segment Status
+
+- Status: completed
+- Slice mode used: `Execute`
+
+### Confirmed Truth Before Implementation
+
+- current frontend route is path-param based:
+  `/bill-lines/:billLineId/checkout`
+- current frontend page parses `route.params.billLineId`
+- current frontend checkout data query remains bill-line-keyed:
+  `usePaymentCheckout(billLineId)`
+- current backend API contract remains bill-line-keyed:
+  `GET /api/commerce/bill-lines/:billLineId/checkout`
+- current bill detail projection includes frontend-owned route text:
+  `lines[].checkoutHref`
+- current frontend bill-detail CTA consumes that backend-authored route text
+- current `BillLineCard` selectable state is also coupled to `checkoutHref`
+- current focused system scenario asserts the old pathname shape
+
+### Address And Object
+
+- `apps/frontend/src/app/router.ts`
+  - move the user-facing checkout page route to `/payment/checkout`
+- `apps/frontend/src/domains/commerce/`
+  - add a frontend-owned checkout route helper
+- `apps/frontend/src/pages/PaymentCheckoutPage.vue`
+  - parse checkout target from query instead of path params
+- `apps/frontend/src/pages/CommerceBillDetailPage.vue`
+  - build checkout navigation from payable line facts, not backend href text
+- `apps/frontend/src/domains/commerce/ui/bill-detail/BillLineCard.vue`
+  - make selectable state depend on `payableByViewer` only
+- `apps/backend/src/domains/payment/use-cases/get-bill-detail.ts`
+  - remove `checkoutHref` from the bill-detail projection
+- `tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+  - assert the new route shape and preserve back-navigation coverage
+- task packet logs
+  - record the segment result and verification
+
+### State Diff
+
+- From:
+  backend bill-detail projection includes `checkoutHref`, and frontend exposes
+  `/bill-lines/:billLineId/checkout`.
+- To:
+  backend returns payable facts only, and frontend owns
+  `/payment/checkout?bill-line=...`.
+
+### Blast Radius Forecast
+
+- bill-detail -> checkout navigation
+- checkout page route parsing
+- bill-detail line selectable gating
+- focused RideHailing system scenario
+- no change to backend checkout execution endpoints in this segment
+
+### Invariants
+
+- preserve the current backend checkout query endpoint:
+  `GET /api/commerce/bill-lines/:billLineId/checkout`
+- preserve current charge creation and payment sync endpoint shapes
+- preserve current bill-detail single-select payment behavior
+- preserve current checkout page reset shell:
+  invalid-id, loading, error, and back-navigation
+- do not widen this segment into checkout body redesign or target-model
+  generalization
+
+### Verification Plan
+
+- `pnpm exec biome check apps/frontend/src/app/router.ts apps/frontend/src/domains/commerce/routing/payment-checkout-route.ts apps/frontend/src/pages/PaymentCheckoutPage.vue apps/frontend/src/pages/CommerceBillDetailPage.vue apps/frontend/src/domains/commerce/ui/bill-detail/BillLineCard.vue apps/backend/src/domains/payment/use-cases/get-bill-detail.ts tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+- `pnpm --dir apps/frontend exec vue-tsc --noEmit`
+- `pnpm --dir apps/backend exec tsc --noEmit -p tsconfig.json`
+- `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts -t "commerce_ride_hailing_ordering_reaches_order_detail"`
+
+### Implementation Steps
+
+1. Add a frontend-owned checkout route helper under the commerce domain.
+2. Move the checkout page route from `/bill-lines/:billLineId/checkout` to
+   `/payment/checkout`.
+3. Update `PaymentCheckoutPage.vue` to read `bill-line` from route query while
+   keeping `usePaymentCheckout(billLineId)`.
+4. Remove backend `checkoutHref` from the bill-detail projection.
+5. Update Bill Detail page CTA to use the frontend route helper.
+6. Update BillLine Card selectable gating to depend on `payableByViewer`.
+7. Update the focused system scenario to assert the new pathname and query
+   shape.
+8. Run the focused verification plan and record the result.
+
+### Implementation Result
+
+- added frontend-owned checkout route helper at
+  `apps/frontend/src/domains/commerce/routing/payment-checkout-route.ts`
+- moved the checkout page route from `/bill-lines/:billLineId/checkout` to
+  `/payment/checkout`
+- changed `PaymentCheckoutPage.vue` to parse `bill-line` from route query
+- removed backend `checkoutHref` from `BillDetailProjection.lines[]`
+- changed Bill Detail CTA to build checkout navigation from the selected
+  bill-line id
+- changed `BillLineCard.vue` selectable gating to depend on `payableByViewer`
+  only
+- updated the focused RideHailing system scenario to assert:
+  - pathname `/payment/checkout`
+  - non-empty `bill-line` query value
+  - back-navigation to Bill Detail remains intact
+
+### Verification Result
+
+- `pnpm exec biome check apps/frontend/src/app/router.ts apps/frontend/src/domains/commerce/routing/payment-checkout-route.ts apps/frontend/src/pages/PaymentCheckoutPage.vue apps/frontend/src/pages/CommerceBillDetailPage.vue apps/frontend/src/domains/commerce/ui/bill-detail/BillLineCard.vue apps/backend/src/domains/payment/use-cases/get-bill-detail.ts tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+- `pnpm --dir apps/frontend exec vue-tsc --noEmit`
+- `pnpm --dir apps/backend exec tsc --noEmit -p tsconfig.json`
+- `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts -t "commerce_ride_hailing_ordering_reaches_order_detail"`
+
+## Segment: Local Mock Payment Provider Baseline
+
+### Segment Objective
+
+- make local payment checkout work without manual admin provider setup
+- keep the baseline stable across local process restarts
+
+### Segment Status
+
+- Status: completed
+- Slice mode used: `Execute`
+
+### Confirmed Truth
+
+- current fake WeChatPay fixture is process-ephemeral:
+  `packages/fake-wechatpay-server/src/fixtures.ts`
+- a development-seeded provider instance would drift unless that fixture is
+  made stable first
+- current checkout provider selection already has a stable client id:
+  `web`
+- development-only provider seed belongs in:
+  `apps/backend/data-migrations/`
+
+### Planned Address And Object
+
+- `packages/fake-wechatpay-server/`
+  - provide a stable dev fixture source
+- `apps/backend/data-migrations/`
+  - add a development-only provider-instance seed
+- task packet logs
+  - record the baseline decision and verification
+
+### Planned Verification
+
+- focused backend/static checks for changed files
+- `pnpm db:migrate:dev`
+- local fake WeChatPay provider boot sanity
+- checkout path can resolve an active provider for client `web`
+
+### Segment Start Preconditions
+
+- confirm default local charge mode:
+  current recommendation is `JSAPI`
+- confirm stable fake fixture source strategy:
+  current recommendation is repo-committed fake-only fixture data
+
+### Implementation Result
+
+- added committed fake fixture asset at
+  `packages/fake-wechatpay-server/src/fixtures/stable-dev-fixture.json`
+- changed fake WeChatPay fixture loading to parse that committed asset
+- added development-only provider baseline migration:
+  `apps/backend/data-migrations/0081_dev_mock_payment_provider_baseline.sql`
+- baseline seeds active client `web` provider
+  `dev-fake-wechatpay-web` with `JSAPI` mode and
+  `https://wechatpay.partner-up.localhost`
+- baseline leaves `platformCertificates = null` for runtime refresh
+- baseline disables conflicting active `web` payment-provider rows before
+  activating the seeded row
+
+### Verification Result
+
+- `pnpm --filter @partner-up-dev/fake-wechatpay-server typecheck`
+- `pnpm --filter @partner-up-dev/fake-wechatpay-server test`
+- `pnpm --dir apps/backend exec tsc --noEmit -p tsconfig.json`
+- `pnpm --dir apps/backend db:lint`
+- `git diff --check`
+- current local `db:migrate:dev` remains blocked by a pre-existing local issue
+  in historical migration `0061_user_telemetry_v2.sql`
+- isolated temporary-database `db:migrate:dev` passed and applied `0081`
+
+## Segment: Backend Contract
+
+- tracked in standalone artifact:
+  `payment-checkout-backend-contract-plan.md`
+
+## Segment: Interaction / Contract
+
+### Segment Objective
+
+- define what the checkout CTA actually does after click
+- define runtime state transitions after provider SDK handoff
+- define how the frontend reflects locked provider choice when an in-progress
+  `PaymentTx` already exists
+
+### Segment Status
+
+- Status: pending
+- Slice mode used: `Explore`
+
+### IA Decisions Already Locked Before Wireframe
+
+- the page remains payment-first
+- Hero may reuse a simplified BillLineCard shape
+- Hero should hide payer and checkbox
+- payment method selection should use `PuCell + PuRadio + usePuSelect`
+- bottom CTA remains the page's single primary action
+
+### Follow-up
+
+- this segment is now superseded by the standalone artifact:
+  `payment-checkout-interaction-ui-plan.md`
+- reason:
+  IA, wireframe, route shape, frontend query-owner migration, and minimal
+  backend dialog-alignment concerns are too coupled to keep as a stub inside
+  the broad workstream file
diff --git a/tasks/ride-hailing-ui-fixes/payment-client-ui-attempt-identity-plan.md b/tasks/ride-hailing-ui-fixes/payment-client-ui-attempt-identity-plan.md
new file mode 100644
index 000000000..06cb5fbf9
--- /dev/null
+++ b/tasks/ride-hailing-ui-fixes/payment-client-ui-attempt-identity-plan.md
@@ -0,0 +1,303 @@
+# Payment Client UI / Attempt Identity Plan
+
+## Objective
+
+- widen the current checkout repair slice from a narrow fake-bridge bug fix
+  into a usable local payment-client loop:
+  - fake `WeixinJSBridge` runtime repair
+  - dev-only payment-client UI for `pay / cancel / fail`
+  - checkout reconciliation UX that stays stable while polling
+- review the current WeChatPay payment-attempt identity topology and decide
+  whether the system can safely converge to one provider-level id codec, or
+  whether it must explicitly document one canonical attempt tuple plus two
+  different string projections
+
+## Classification
+
+- Primary route: `Reality`
+- Active mode: `Explore`
+
+## Overall Workstream Plan
+
+### Overall Objective
+
+- keep Payment Checkout architecturally correct:
+  - Billing owns target truth
+  - Payment provider owns provider-side transaction truth
+  - frontend checkout owns only client invocation and reconciliation UX
+- keep the current shift-left rule explicit:
+  exploration, topology, and identity decisions must be written before any
+  implementation starts
+
+### Overall Confirmed Truth
+
+- backend charge creation succeeds; fake provider creates a transaction
+- backend notify / settlement path is healthy once the fake provider
+  transaction actually reaches `SUCCESS`
+- current local fake `WeixinJSBridge` fails before advancing the fake provider:
+  real-browser probe returns
+  `get_brand_wcpay_request:fail Failed to execute 'fetch' on 'Window': Illegal invocation`
+- current frontend orchestration ignores bridge callback `err_msg`, so client
+  failure is swallowed and checkout falls through into polling against a
+  provider transaction that remains `NOTPAY`
+- current checkout polling UX is unstable:
+  inline notice is used for progress, and CTA loading is tied to each poll
+  request instead of the whole active attempt
+- current WeChatPay path already has two different serialized strings derived
+  from the same attempt tuple:
+  - backend-facing `paymentTxId`
+  - provider-facing `merchantOrderNo` / `out_trade_no`
+
+### Overall Topology
+
+```mermaid
+flowchart LR
+  A["Billing-owned target truth"] --> B["PaymentCheckoutPage"]
+  B --> C["Payment client<br/>WeixinJSBridge"]
+  C --> D["Payment provider<br/>WeChatPay / fake-wechatpay-server"]
+  B --> E["GET /api/payment/:paymentTxId"]
+  E --> D
+  D --> F["BillLine settlement truth"]
+  F --> B
+```
+
+### Overall Shift-Left Control
+
+- do not implement until this segment plan and the task-packet control surface
+  both reflect:
+  - current reality
+  - chosen owner boundaries
+  - identity decision gate
+  - verification plan
+  - implementation steps
+- if the identity review proves that one provider-level id codec is impossible
+  under current non-persisted `PaymentTx` constraints, pause and ratify the
+  explicit alternative before broader mutation continues
+
+## Segment-Specific Plan
+
+### Segment Goal
+
+- make local checkout manually operable through a dev-only fake payment-client
+  UI instead of auto-success-only bridge behavior
+- make checkout render a stable reconciliation experience after the payment
+  client returns
+- settle the current PaymentTx identity ambiguity enough that implementation
+  does not deepen the confusion
+
+### Segment Scope
+
+- included:
+  - `WeixinJSBridge` runtime repair
+  - dev-only fake payment-client UI
+  - fake provider dev endpoints needed for `success / cancel / fail`
+  - checkout reconciliation dialog / spinner / CTA stabilization
+  - WeChatPay attempt-id topology review and implementation decision
+  - task-packet updates and focused verification
+- excluded:
+  - real WeChat container behavior
+  - H5 payment UX
+  - new provider types beyond the current WeChatPay path
+  - reintroducing persisted `payment_txs`
+  - broad admin payment-provider UI work
+
+### Address And Object
+
+- fake payment client runtime:
+  - `apps/frontend/src/shared/wechat/fake-wechatpay-bridge.ts`
+  - `apps/frontend/src/app/create-app.ts`
+  - `apps/frontend/src/types/wechat-jssdk.d.ts`
+  - `apps/frontend/src/vite-env.d.ts`
+- checkout orchestration and UX:
+  - `apps/frontend/src/domains/payment/use-cases/launch-payment-client-action.ts`
+  - `apps/frontend/src/domains/payment/ui/surfaces/PaymentCheckoutFlow.vue`
+  - likely new checkout-scoped UI primitive(s) under
+    `apps/frontend/src/domains/payment/ui/`
+- fake provider support:
+  - `packages/fake-wechatpay-server/src/routes.ts`
+  - `packages/fake-wechatpay-server/src/state.ts`
+- identity review surfaces:
+  - `apps/backend/src/domains/payment/services/payment-tx.ts`
+  - `apps/backend/src/domains/payment/services/payment-provider.ts`
+  - `apps/backend/src/domains/payment/use-cases/payment-contract.ts`
+  - durable wording only if the chosen identity model needs promotion
+
+### State Diff
+
+- From:
+  - local fake `WeixinJSBridge` can only auto-attempt success
+  - current runtime fake bridge is broken by detached native `fetch`
+  - checkout swallows bridge failure and polls forever against `NOTPAY`
+  - polling progress is shown inline and CTA state flickers per request
+  - same payment attempt is represented by a long backend token and a separate
+    short provider token without explicit architectural explanation
+- To:
+  - local fake `WeixinJSBridge` becomes a usable dev payment client with
+    explicit `pay / cancel / fail` actions
+  - checkout reconciles all client returns through a stable dialog + spinner
+    flow and a non-flickering CTA state machine
+  - the WeChatPay attempt identity model is either converged or explicitly
+    formalized as one canonical attempt tuple with well-defined projections
+
+### Blast Radius Forecast
+
+- frontend app bootstrap in development
+- frontend payment-client orchestration semantics
+- checkout page interaction and stable test ids
+- fake WeChatPay dev workflow
+- provider-facing fake endpoints and their tests
+- backend payment identity wording and future maintainability
+
+### Invariants Check
+
+- keep backend `GET /api/payment/:paymentTxId` polling as the final settlement
+  truth for checkout
+- do not let bridge callback wording become settlement truth
+- keep Billing as the owner of bill / bill-line settlement state
+- do not restore the deleted `payment_txs` table
+- keep the fake payment-client UI development-only
+- keep provider discovery target-agnostic
+- do not widen this slice into H5 or real WeChat SDK work
+
+### Payment Client Ownership Decision
+
+- the payment client for this slice is `WeixinJSBridge`
+- therefore the fake payment-client UI should belong to the dev-only fake
+  `WeixinJSBridge` runtime, not to `PaymentCheckoutPage`
+- `PaymentCheckoutPage` should only:
+  - invoke the payment client
+  - react to client return
+  - reconcile by polling backend payment truth
+  - present checkout-owned status dialog / CTA state
+
+### Attempt Identity Review
+
+#### Observed Current Model
+
+- current durable attempt tuple is:
+  - `kind`
+  - `billLineId`
+  - `paymentProviderInstanceId`
+  - `attemptCount`
+- current backend-facing string is:
+  - `paymentTxId`
+  - self-decoding JSON + base64url token
+- current provider-facing string is:
+  - `merchantOrderNo` / `out_trade_no`
+  - short signed token tailored to WeChatPay length constraints
+
+#### Topology Tension
+
+```mermaid
+flowchart TD
+  A["Canonical attempt tuple<br/>kind + billLineId + providerInstanceId + attemptCount"]
+  A --> B["paymentTxId<br/>backend route resource"]
+  A --> C["merchantOrderNo / out_trade_no<br/>provider protocol reference"]
+```
+
+- this is not two different business truths
+- but it is two different codecs for one payment attempt
+- the tension comes from two simultaneous constraints:
+  - `GET /api/payment/:paymentTxId` currently needs a self-resolving token
+    because `PaymentTx` is not persisted
+  - WeChatPay imposes a short provider-side merchant reference shape
+
+#### Decision Gate
+
+- preferred outcome:
+  - converge to one provider-safe canonical string only if all are true:
+    - provider length / charset constraints are satisfied
+    - the token can still resolve
+      `billLineId + paymentProviderInstanceId + attemptCount`
+      without adding new persistence
+    - historical attempt queries remain unambiguous after retries or provider
+      changes
+- fallback outcome:
+  - explicitly formalize:
+    - one canonical attempt tuple
+    - one backend resource-id projection
+    - one provider protocol projection
+  - if fallback is chosen, implementation must reduce naming confusion instead
+    of pretending the two strings are interchangeable
+
+### Recommended Direction
+
+- repair the fake bridge first at the runtime seam:
+  use a bound native `fetch` when the fake bridge calls the fake provider
+- widen the fake bridge into a dev-only payment-client UI with explicit user
+  actions:
+  - `支付成功`
+  - `取消支付`
+  - `模拟失败`
+- add fake provider prepay-keyed dev endpoints as needed so the bridge can
+  change provider state by `prepayId` without guessing `outTradeNo`
+- map payment-client UI actions to provider-side truth before returning bridge
+  callback:
+  - success -> provider `SUCCESS`
+  - cancel / dismiss -> provider `CLOSED`
+  - fail -> provider `PAYERROR`
+- change frontend orchestration so bridge callback `err_msg` is interpreted,
+  not discarded, even though final settlement still comes from backend truth
+- refactor checkout from per-request loading into attempt-phase state:
+  - `idle`
+  - `launching_client`
+  - `reconciling`
+  - `succeeded`
+  - `retryable_terminal`
+- use a blocking dialog + spinner for reconciliation instead of inline notice
+- keep the footer CTA visually stable across the whole active attempt
+
+### Verification Plan
+
+- frontend static:
+  - `pnpm check:type:frontend`
+  - focused `biome check`
+- fake-provider static:
+  - `pnpm --filter @partner-up-dev/fake-wechatpay-server typecheck`
+  - `pnpm --filter @partner-up-dev/fake-wechatpay-server test`
+- browser/runtime proof:
+  - real-browser probe confirms:
+    - fake `WeixinJSBridge` is installed
+    - success action advances fake provider state
+    - cancel action advances fake provider state to closed
+    - fail action advances fake provider state to failed
+- focused system scenario:
+  - RideHailing bill-detail -> checkout success path
+  - at least one non-success branch through the fake payment-client UI
+- local diagnostic proof:
+  - fake provider `/__fake_wechatpay/state`
+  - corresponding `bill_lines` settlement state
+- identity proof:
+  - if one-token convergence is attempted, add explicit proof that the chosen
+    token satisfies both backend resolution and provider length constraints
+  - if convergence is rejected, record the ratified canonical tuple /
+    projection model in packet wording before implementation continues
+
+### Implementation Steps
+
+1. update task packet control/log surfaces with this widened segment and its
+   identity decision gate
+2. repair the fake bridge runtime bug by binding the native browser `fetch`
+   correctly
+3. add dev-only fake payment-client UI ownership to the fake
+   `WeixinJSBridge` runtime rather than the checkout page
+4. add or refine fake provider prepay-keyed dev endpoints for
+   `success / cancel / fail`
+5. change frontend payment-client orchestration so bridge callback `err_msg`
+   is parsed into a client-return result instead of being ignored
+6. refactor `PaymentCheckoutFlow.vue` to a stable attempt-phase state machine
+   with dialog + spinner reconciliation and non-flickering CTA behavior
+7. run the verification plan
+8. only after the runtime/UI loop is stable, finalize the attempt-identity
+   implementation decision:
+   - converge to one codec if proven feasible
+   - otherwise ratify canonical tuple + projection layering and clean up naming
+
+### Segment Start Preconditions
+
+- explicit human start signal is still required before implementation
+- if the identity review implies:
+  - new persistence
+  - provider-instance id redesign
+  - or durable contract wording changes broader than this workstream
+  pause for a fresh handshake before broadening the mutation
diff --git a/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts b/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
index bb7f13505..4844d04de 100644
--- a/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
+++ b/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
@@ -27,6 +27,7 @@ import {
 import { withScenarioPage } from "../_infra/browser/browser";
 import { installScenarioUserSession } from "../_infra/browser/session";
 import { installDeterministicShareSidecarStubs } from "../_infra/browser/share-sidecars";
+import { installFakeWeChatPayBridge } from "../_infra/browser/wechatpay";
 import { getScenarioEnvironment } from "../_infra/environment/scenario-environment";
 import { scenario } from "../_infra/scenario/scenario";
 
@@ -407,6 +408,30 @@ async function assertLocatorTextMatches(input: {
   assert.match(actual, input.pattern, input.label);
 }
 
+async function waitForTextIncludes(input: {
+  read: () => Promise<string | null>;
+  expected: string;
+  label: string;
+  timeoutMs?: number;
+}): Promise<void> {
+  const timeoutMs = input.timeoutMs ?? 5_000;
+  const startedAt = Date.now();
+  let actual = "";
+
+  while (Date.now() - startedAt < timeoutMs) {
+    actual = (await input.read()) ?? "";
+    if (actual.includes(input.expected)) {
+      return;
+    }
+    await new Promise((resolve) => setTimeout(resolve, 200));
+  }
+
+  assert.ok(
+    actual.includes(input.expected),
+    `${input.label}: expected text to include "${input.expected}", got "${actual}"`,
+  );
+}
+
 async function openRideHailingOrderingFromPr(input: { page: Page; prId: number }): Promise<void> {
   await input.page.goto(`/pr/${input.prId}`);
   await input.page.getByTestId("pr-detail.commerce-placement.open").click();
@@ -680,17 +705,38 @@ async function assertRideHailingBillDetailPage(input: {
   page: Page;
   viewerPayerName: string;
   otherPayerName: string;
+  expectedBillStatus?: string;
+  expectedViewerSettlementStatus?: string;
+  expectedOtherSettlementStatus?: string;
+  expectedViewerPayable?: boolean;
+  expectedOtherPayable?: boolean;
+  expectPayCta?: boolean;
+  expectedViewerSelected?: boolean;
+  expectedOtherSelected?: boolean;
 }): Promise<void> {
   const { page } = input;
   const billLines = page.getByTestId("bill-detail.line");
+  const expectedBillStatus = input.expectedBillStatus ?? "待支付";
+  const expectedViewerSettlementStatus = input.expectedViewerSettlementStatus ?? "待支付";
+  const expectedOtherSettlementStatus = input.expectedOtherSettlementStatus ?? "待支付";
+  const expectedViewerPayable = input.expectedViewerPayable ?? true;
+  const expectedOtherPayable = input.expectedOtherPayable ?? false;
+  const expectPayCta = input.expectPayCta ?? true;
+  const expectedViewerSelected = input.expectedViewerSelected ?? expectPayCta;
+  const expectedOtherSelected = input.expectedOtherSelected ?? false;
 
   await page.getByTestId("bill-detail.page").waitFor({
     state: "visible",
     timeout: 10_000,
   });
+  await waitForTextIncludes({
+    read: () => page.getByTestId("bill-detail.status").textContent(),
+    expected: expectedBillStatus,
+    label: "RideHailing bill detail settlement status",
+  });
   await assertLocatorTextIncludes({
     actual: page.getByTestId("bill-detail.status").textContent(),
-    expected: "待支付",
+    expected: expectedBillStatus,
     label: "RideHailing bill detail settlement status",
   });
   await assertLocatorTextMatches({
@@ -740,18 +786,52 @@ async function assertRideHailingBillDetailPage(input: {
   const viewerLineControl = viewerLine.locator('[role="button"]');
   const otherLineControl = otherLine.locator('[role="button"]');
 
-  assert.equal(await viewerLine.getAttribute("data-payable"), "true");
-  assert.equal(await viewerLine.getAttribute("data-selected"), "true");
-  assert.equal(await viewerLineControl.getAttribute("aria-disabled"), null);
-  assert.equal(await otherLine.getAttribute("data-payable"), "false");
-  assert.equal(await otherLine.getAttribute("data-selected"), "false");
-  assert.equal(await otherLineControl.getAttribute("aria-disabled"), "true");
-
-  await assertLocatorTextMatches({
-    actual: page.getByTestId("bill-detail.pay-selected").textContent(),
-    pattern: /支付\s*[¥￥]20\.00/,
-    label: "RideHailing bill detail pay selected CTA",
+  await assertLocatorTextIncludes({
+    actual: viewerLine.getByTestId("bill-detail.line-status").textContent(),
+    expected: expectedViewerSettlementStatus,
+    label: "RideHailing bill detail viewer line status",
+  });
+  await assertLocatorTextIncludes({
+    actual: otherLine.getByTestId("bill-detail.line-status").textContent(),
+    expected: expectedOtherSettlementStatus,
+    label: "RideHailing bill detail other line status",
   });
+
+  assert.equal(
+    await viewerLine.getAttribute("data-payable"),
+    expectedViewerPayable ? "true" : "false",
+  );
+  assert.equal(
+    await viewerLine.getAttribute("data-selected"),
+    expectedViewerSelected ? "true" : "false",
+  );
+  assert.equal(
+    await viewerLineControl.getAttribute("aria-disabled"),
+    expectedViewerPayable ? null : "true",
+  );
+  assert.equal(
+    await otherLine.getAttribute("data-payable"),
+    expectedOtherPayable ? "true" : "false",
+  );
+  assert.equal(
+    await otherLine.getAttribute("data-selected"),
+    expectedOtherSelected ? "true" : "false",
+  );
+  assert.equal(
+    await otherLineControl.getAttribute("aria-disabled"),
+    expectedOtherPayable ? null : "true",
+  );
+
+  if (expectPayCta) {
+    await assertLocatorTextMatches({
+      actual: page.getByTestId("bill-detail.pay-selected").textContent(),
+      pattern: /支付\s*[¥￥]20\.00/,
+      label: "RideHailing bill detail pay selected CTA",
+    });
+    return;
+  }
+
+  assert.equal(await page.getByTestId("bill-detail.pay-selected").count(), 0);
 }
 
 async function waitForRideHailingMapMode(
@@ -800,6 +880,7 @@ scenario("commerce_ride_hailing_ordering_reaches_order_detail", async (ctx) => {
   await withScenarioPage(async (page) => {
     await installScenarioUserSession(page, creator);
     await installDeterministicShareSidecarStubs(page);
+    await installFakeWeChatPayBridge(page, getScenarioEnvironment().fakeWeChatPay.origin);
 
     await openRideHailingOrderingFromPr({ page, prId: pr.id });
     await assertRideHailingOrderingContent(page);
@@ -864,7 +945,7 @@ scenario("commerce_ride_hailing_ordering_reaches_order_detail", async (ctx) => {
 
     const orderDetailPath = new URL(page.url()).pathname;
     orderPath = orderDetailPath;
-    await page.getByLabel("Back").click();
+    await page.getByRole("button", { name: "返回上一页" }).click();
     await page.waitForURL((url) => new URL(url).pathname === `/pr/${pr.id}`, {
       timeout: 10_000,
     });
@@ -885,7 +966,13 @@ scenario("commerce_ride_hailing_ordering_reaches_order_detail", async (ctx) => {
     });
     await page.getByTestId("bill-detail.pay-selected").click();
     await page.waitForURL(
-      (url) => /^\/bill-lines\/[0-9a-f-]+\/checkout$/.test(new URL(url).pathname),
+      (url) => {
+        const checkoutUrl = new URL(url);
+        return (
+          checkoutUrl.pathname === "/payment/checkout" &&
+          /^[0-9a-f-]+$/.test(checkoutUrl.searchParams.get("bill-line") ?? "")
+        );
+      },
       {
         timeout: 10_000,
       },
@@ -894,18 +981,20 @@ scenario("commerce_ride_hailing_ordering_reaches_order_detail", async (ctx) => {
       state: "visible",
       timeout: 10_000,
     });
-    await assertLocatorTextMatches({
-      actual: page.getByTestId("payment-checkout.amount").textContent(),
-      pattern: /[¥￥]20\.00/,
-      label: "RideHailing payment checkout amount",
-    });
-    await page.getByTestId("payment-checkout.bill-link").click();
+    await page.getByTestId("payment-checkout.pay").click();
     await page.waitForURL((url) => new URL(url).pathname === billDetailPath, {
-      timeout: 10_000,
+      timeout: 15_000,
     });
-    await page.getByTestId("bill-detail.page").waitFor({
-      state: "visible",
-      timeout: 10_000,
+    await assertRideHailingBillDetailPage({
+      page,
+      viewerPayerName: "scenario-system-ride-hailing-creator",
+      otherPayerName: "scenario-system-ride-hailing-passenger",
+      expectedBillStatus: "部分已支付",
+      expectedViewerSettlementStatus: "已支付",
+      expectedOtherSettlementStatus: "待支付",
+      expectedViewerPayable: false,
+      expectPayCta: false,
+      expectedViewerSelected: false,
     });
     await page.getByTestId("bill-detail.order-link").click();
     await page.waitForURL((url) => new URL(url).pathname === orderDetailPath, {

From 83a5b95d7ab7720dc258e2fb24dc85ede283cb4b Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Sun, 28 Jun 2026 19:14:52 +0800
Subject: [PATCH 49/94] fix(ride-hailing): enable dispatching cancellation and
 depart-now ordering

- add generic order-detail cancellation transport with ride-hailing family dispatch
- short-circuit ride-hailing ordering departure time to fixed depart-now behavior
- align scenarios, docs, and task packet with the shipped slice
---
 .../src/controllers/commerce.controller.ts    |  10 +-
 .../use-cases/match-placement-instance.ts     |   2 +-
 .../cancel-order-from-order-detail.ts         |  30 +++
 ...el-ride-hailing-order-from-order-detail.ts | 191 ++++++++++++++
 .../src/domains/trade/use-cases/index.ts      |   4 +-
 .../trade/use-cases/rental-ordering-flow.ts   |   4 +-
 ...nation.ts => request-order-termination.ts} |   8 +-
 .../domains/commerce/queries/useCommerce.ts   |  11 +-
 .../order-detail/RideHailingOrderContent.vue  |  41 ++-
 .../ordering/RideHailingOrderingContent.vue   | 184 ++-----------
 .../src/pages/CommerceOrderDetailPage.vue     |  10 +-
 docs/10-prd/behavior/workflows.md             |   2 +-
 docs/20-product-tdd/ecommerce-contracts.md    |   7 +-
 tasks/ride-hailing-ui-fixes/change-log.md     |  26 ++
 tasks/ride-hailing-ui-fixes/control.md        |  26 +-
 tasks/ride-hailing-ui-fixes/discussion-log.md |  30 +++
 ...cancel-and-departure-short-circuit-plan.md | 242 ++++++++++++++++++
 .../ride-hailing-ordering.scenario.test.ts    | 169 +++++++-----
 18 files changed, 732 insertions(+), 265 deletions(-)
 create mode 100644 apps/backend/src/domains/trade/use-cases/cancel-order-from-order-detail.ts
 create mode 100644 apps/backend/src/domains/trade/use-cases/cancel-ride-hailing-order-from-order-detail.ts
 rename apps/backend/src/domains/trade/use-cases/{request-rental-order-termination.ts => request-order-termination.ts} (87%)
 create mode 100644 tasks/ride-hailing-ui-fixes/ride-hailing-cancel-and-departure-short-circuit-plan.md

diff --git a/apps/backend/src/controllers/commerce.controller.ts b/apps/backend/src/controllers/commerce.controller.ts
index 0f14d1b13..4efe37b2b 100644
--- a/apps/backend/src/controllers/commerce.controller.ts
+++ b/apps/backend/src/controllers/commerce.controller.ts
@@ -4,7 +4,7 @@ import { z } from "zod";
 import { type AuthEnv, authMiddleware } from "../auth/middleware";
 import { getBillDetail, getBillDetailByOrderId, getBillLineCheckoutTarget } from "../domains/bill";
 import {
-  cancelRentalOrderFromOrderDetail,
+  cancelOrderFromOrderDetail,
   createOrderCommand,
   getCommerceOrderDetail,
   listOfferListing,
@@ -146,10 +146,10 @@ type CommerceRouteSchema = {
       Awaited<ReturnType<typeof getBillLineCheckoutTarget>>
     >;
   };
-  "/orders/:orderId/cancel-rental": {
+  "/orders/:orderId/cancel": {
     $post: JsonEndpoint<
       UuidParam<"orderId">,
-      Awaited<ReturnType<typeof cancelRentalOrderFromOrderDetail>>
+      Awaited<ReturnType<typeof cancelOrderFromOrderDetail>>
     >;
   };
   "/orders/:orderId/mock-rental-booking-confirmation": {
@@ -223,10 +223,10 @@ export const commerceRoute: Hono<AuthEnv, CommerceRouteSchema> = app
     });
     return c.json(result);
   })
-  .post("/orders/:orderId/cancel-rental", zValidator("param", orderIdParamSchema), async (c) => {
+  .post("/orders/:orderId/cancel", zValidator("param", orderIdParamSchema), async (c) => {
     const { orderId } = c.req.valid("param");
     const userId = requireAuthenticatedUserId(c);
-    const result = await cancelRentalOrderFromOrderDetail({
+    const result = await cancelOrderFromOrderDetail({
       orderId,
       actorUserId: userId,
     });
diff --git a/apps/backend/src/domains/merchandising/use-cases/match-placement-instance.ts b/apps/backend/src/domains/merchandising/use-cases/match-placement-instance.ts
index ff314de82..f2d65bb8f 100644
--- a/apps/backend/src/domains/merchandising/use-cases/match-placement-instance.ts
+++ b/apps/backend/src/domains/merchandising/use-cases/match-placement-instance.ts
@@ -252,7 +252,7 @@ export async function resolvePlacementOrderingEntry(input: {
       ...(typeof activeParticipantCount === "number"
         ? { participantCount: activeParticipantCount }
         : {}),
-      ...(startAt ? { serviceStartAt: startAt, departureAt: startAt } : {}),
+      ...(startAt ? { serviceStartAt: startAt } : {}),
       ...(endAt ? { serviceEndAt: endAt } : {}),
       ...(routeSnapshot ? { route: routeSnapshot } : {}),
       ...(viewerParticipant?.phoneNumber?.trim()
diff --git a/apps/backend/src/domains/trade/use-cases/cancel-order-from-order-detail.ts b/apps/backend/src/domains/trade/use-cases/cancel-order-from-order-detail.ts
new file mode 100644
index 000000000..d55997690
--- /dev/null
+++ b/apps/backend/src/domains/trade/use-cases/cancel-order-from-order-detail.ts
@@ -0,0 +1,30 @@
+import { throwHttpProblem } from "../../../lib/problem-details";
+import type { TradeOrderId } from "../../../entities/trade-order";
+import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository";
+import { cancelRideHailingOrderFromOrderDetail } from "./cancel-ride-hailing-order-from-order-detail";
+import { cancelRentalOrderFromOrderDetail } from "./rental-ordering-flow";
+
+const tradeOrderRepo = new TradeOrderRepository();
+
+export async function cancelOrderFromOrderDetail(input: {
+  orderId: string;
+  actorUserId: string;
+}) {
+  const order = await tradeOrderRepo.findById(input.orderId as TradeOrderId);
+  if (!order) {
+    return throwHttpProblem({ status: 404, detail: "Order not found" });
+  }
+
+  if (order.family === "RENTAL") {
+    return cancelRentalOrderFromOrderDetail(input);
+  }
+
+  if (order.family === "RIDE_HAILING") {
+    return cancelRideHailingOrderFromOrderDetail(input);
+  }
+
+  return throwHttpProblem({
+    status: 409,
+    detail: "Order does not support cancellation from Order Detail",
+  });
+}
diff --git a/apps/backend/src/domains/trade/use-cases/cancel-ride-hailing-order-from-order-detail.ts b/apps/backend/src/domains/trade/use-cases/cancel-ride-hailing-order-from-order-detail.ts
new file mode 100644
index 000000000..16ca6d9bc
--- /dev/null
+++ b/apps/backend/src/domains/trade/use-cases/cancel-ride-hailing-order-from-order-detail.ts
@@ -0,0 +1,191 @@
+import { throwHttpProblem } from "../../../lib/problem-details";
+import { db } from "../../../lib/db";
+import type { RideHailingProviderInstanceId } from "../../../entities/ride-hailing-provider";
+import type { TradeOrderId } from "../../../entities/trade-order";
+import type { UserId } from "../../../entities/user";
+import { RideHailingProviderInstanceRepository } from "../../../repositories/RideHailingProviderInstanceRepository";
+import { RideHailingOrderRepository } from "../../../repositories/RideHailingOrderRepository";
+import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository";
+import { createRideHailingProviderPort } from "../../ride-hailing";
+import {
+  appendTerminationAttempt,
+  approveTerminationAttempt,
+  getRideHailingChoiceSetItem,
+  getRideHailingProviderBinding,
+  markTerminationAttemptResolving,
+  toTradeOrderModel,
+} from "../services";
+
+const tradeOrderRepo = new TradeOrderRepository();
+const rideOrderRepo = new RideHailingOrderRepository();
+const providerRepo = new RideHailingProviderInstanceRepository();
+
+const isCancellableRideHailingExecutionPhase = (phase: string): boolean =>
+  phase === "DISPATCHING";
+
+function createAttemptId(): string {
+  return `term_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
+}
+
+export async function cancelRideHailingOrderFromOrderDetail(input: {
+  orderId: string;
+  actorUserId: string;
+}) {
+  const orderRecord = await tradeOrderRepo.findById(input.orderId as TradeOrderId);
+  if (!orderRecord) {
+    return throwHttpProblem({ status: 404, detail: "Order not found" });
+  }
+  if (orderRecord.family !== "RIDE_HAILING") {
+    return throwHttpProblem({
+      status: 409,
+      detail: "Only RideHailing orders can use this cancellation flow",
+    });
+  }
+  if (orderRecord.createdBy !== input.actorUserId) {
+    return throwHttpProblem({
+      status: 403,
+      detail: "Only order creator can cancel this order",
+    });
+  }
+  if (orderRecord.status !== "OPEN") {
+    return throwHttpProblem({
+      status: 409,
+      detail: "Order cannot be cancelled from its current status",
+    });
+  }
+
+  const rideOrder = await rideOrderRepo.findByOrderId(orderRecord.id);
+  if (!rideOrder) {
+    return throwHttpProblem({
+      status: 500,
+      detail: "RideHailing order facts are missing",
+    });
+  }
+  if (!isCancellableRideHailingExecutionPhase(rideOrder.executionPhase)) {
+    return throwHttpProblem({
+      status: 409,
+      detail: "RideHailing order cannot be cancelled from its current phase",
+    });
+  }
+
+  const rideChoiceSetItem = getRideHailingChoiceSetItem(orderRecord.items);
+  const providerBinding = rideChoiceSetItem ? getRideHailingProviderBinding(rideChoiceSetItem) : null;
+  if (!providerBinding?.providerOrderId) {
+    return throwHttpProblem({
+      status: 409,
+      detail: "RideHailing order is missing provider binding",
+    });
+  }
+
+  const providerInstance = await providerRepo.findById(
+    providerBinding.providerInstanceId as RideHailingProviderInstanceId,
+  );
+  if (!providerInstance || providerInstance.status !== "ACTIVE") {
+    return throwHttpProblem({
+      status: 404,
+      detail: "RideHailing provider instance not found",
+    });
+  }
+
+  const port = createRideHailingProviderPort({ providerInstance });
+  const providerCancellation = await port.cancelRide({
+    providerOrderId: providerBinding.providerOrderId,
+    cancelCode: "USER_CANCEL",
+    cancelReason: "用户取消订单",
+    whoCancel: "USER",
+  });
+  const decidedAt = new Date().toISOString();
+
+  return db.transaction(async (tx) => {
+    const transactionalTradeOrderRepo = new TradeOrderRepository(tx);
+    const transactionalRideOrderRepo = new RideHailingOrderRepository(tx);
+
+    const currentOrderRecord = await transactionalTradeOrderRepo.findById(orderRecord.id);
+    if (!currentOrderRecord) {
+      return throwHttpProblem({ status: 404, detail: "Order not found" });
+    }
+    if (currentOrderRecord.family !== "RIDE_HAILING") {
+      return throwHttpProblem({
+        status: 409,
+        detail: "Only RideHailing orders can use this cancellation flow",
+      });
+    }
+    if (currentOrderRecord.createdBy !== input.actorUserId) {
+      return throwHttpProblem({
+        status: 403,
+        detail: "Only order creator can cancel this order",
+      });
+    }
+    if (currentOrderRecord.status !== "OPEN") {
+      return throwHttpProblem({
+        status: 409,
+        detail: "Order cannot be cancelled from its current status",
+      });
+    }
+
+    const currentRideOrder = await transactionalRideOrderRepo.findByOrderId(currentOrderRecord.id);
+    if (!currentRideOrder) {
+      return throwHttpProblem({
+        status: 500,
+        detail: "RideHailing order facts are missing",
+      });
+    }
+    if (!isCancellableRideHailingExecutionPhase(currentRideOrder.executionPhase)) {
+      return throwHttpProblem({
+        status: 409,
+        detail: "RideHailing order cannot be cancelled from its current phase",
+      });
+    }
+
+    const order = toTradeOrderModel(currentOrderRecord);
+    const attemptId = createAttemptId();
+    const appended = appendTerminationAttempt(order, {
+      attemptId,
+      requestedAt: decidedAt,
+      requestedBy: input.actorUserId as UserId,
+    });
+    const resolving = markTerminationAttemptResolving(
+      appended,
+      attemptId,
+      "RIDE_HAILING_FULFILLMENT",
+    );
+    const approved = approveTerminationAttempt(resolving, {
+      attemptId,
+      decidedAt,
+      reason: "用户取消订单",
+      effectKind: providerCancellation.cancelFeeFen > 0 ? "ABORT_FEE" : "NONE",
+      effectAmountFen: providerCancellation.cancelFeeFen,
+    });
+
+    const persisted = await transactionalTradeOrderRepo.applyTerminationState({
+      id: order.id as TradeOrderId,
+      status: approved.status,
+      terminationAttempts: approved.terminationAttempts,
+    });
+    if (!persisted) {
+      return throwHttpProblem({
+        status: 500,
+        detail: "Failed to persist approved RideHailing termination",
+      });
+    }
+
+    const updatedRideOrder = await transactionalRideOrderRepo.updateByOrderId(order.id as TradeOrderId, {
+      executionPhase: "CANCELLED",
+    });
+    if (!updatedRideOrder) {
+      return throwHttpProblem({
+        status: 500,
+        detail: "Failed to persist RideHailing cancellation state",
+      });
+    }
+
+    return {
+      orderId: persisted.id,
+      attemptId,
+      status: persisted.status,
+      effectKind: providerCancellation.cancelFeeFen > 0 ? ("ABORT_FEE" as const) : ("NONE" as const),
+      effectAmountFen: providerCancellation.cancelFeeFen,
+      refunds: [],
+    };
+  });
+}
diff --git a/apps/backend/src/domains/trade/use-cases/index.ts b/apps/backend/src/domains/trade/use-cases/index.ts
index 51e74c485..8cf09efa1 100644
--- a/apps/backend/src/domains/trade/use-cases/index.ts
+++ b/apps/backend/src/domains/trade/use-cases/index.ts
@@ -1,8 +1,10 @@
 export * from "./apply-bill-settlement-to-order";
+export * from "./cancel-order-from-order-detail";
+export * from "./cancel-ride-hailing-order-from-order-detail";
 export * from "./create-order";
 export * from "./finalize-rental-order-termination";
 export * from "./offer-listing";
 export * from "./offer-quote";
 export * from "./rental-ordering-flow";
+export * from "./request-order-termination";
 export * from "./ride-hailing-ordering-flow";
-export * from "./request-rental-order-termination";
diff --git a/apps/backend/src/domains/trade/use-cases/rental-ordering-flow.ts b/apps/backend/src/domains/trade/use-cases/rental-ordering-flow.ts
index b75b35a94..a8bf6a79a 100644
--- a/apps/backend/src/domains/trade/use-cases/rental-ordering-flow.ts
+++ b/apps/backend/src/domains/trade/use-cases/rental-ordering-flow.ts
@@ -22,7 +22,7 @@ import {
   buildRideHailingDetailProjection,
   type RideHailingOrderDetailProjection,
 } from "./ride-hailing-ordering-flow";
-import { requestRentalOrderTermination } from "./request-rental-order-termination";
+import { requestOrderTermination } from "./request-order-termination";
 
 const tradeOrderRepo = new TradeOrderRepository();
 const rentalOrderRepo = new RentalOrderRepository();
@@ -214,7 +214,7 @@ export async function cancelRentalOrderFromOrderDetail(input: {
   const requiresFulfillmentGate =
     policyResolution.requiresOperatorHandling && paymentState.paidChargeFen > 0;
 
-  const requested = await requestRentalOrderTermination({
+  const requested = await requestOrderTermination({
     orderId: input.orderId,
     requestedBy: input.actorUserId,
     requestedAt,
diff --git a/apps/backend/src/domains/trade/use-cases/request-rental-order-termination.ts b/apps/backend/src/domains/trade/use-cases/request-order-termination.ts
similarity index 87%
rename from apps/backend/src/domains/trade/use-cases/request-rental-order-termination.ts
rename to apps/backend/src/domains/trade/use-cases/request-order-termination.ts
index 529ced7b7..d861b23e5 100644
--- a/apps/backend/src/domains/trade/use-cases/request-rental-order-termination.ts
+++ b/apps/backend/src/domains/trade/use-cases/request-order-termination.ts
@@ -15,7 +15,7 @@ function createAttemptId(): string {
   return `term_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
 }
 
-export async function requestRentalOrderTermination(input: {
+export async function requestOrderTermination(input: {
   orderId: string;
   requestedBy: string;
   requestedAt?: string;
@@ -27,10 +27,6 @@ export async function requestRentalOrderTermination(input: {
   }
   const order = toTradeOrderModel(orderRecord);
 
-  if (order.family !== "RENTAL") {
-    return throwHttpProblem({ status: 409, detail: "Only Rental orders use this termination flow" });
-  }
-
   const requestedAt = input.requestedAt ?? new Date().toISOString();
   const attemptId = createAttemptId();
   const appended = appendTerminationAttempt(order, {
@@ -51,7 +47,7 @@ export async function requestRentalOrderTermination(input: {
   });
 
   if (!persisted) {
-    return throwHttpProblem({ status: 500, detail: "Failed to persist rental termination request" });
+    return throwHttpProblem({ status: 500, detail: "Failed to persist order termination request" });
   }
 
   return {
diff --git a/apps/frontend/src/domains/commerce/queries/useCommerce.ts b/apps/frontend/src/domains/commerce/queries/useCommerce.ts
index 8ab1b136c..16a5a298a 100644
--- a/apps/frontend/src/domains/commerce/queries/useCommerce.ts
+++ b/apps/frontend/src/domains/commerce/queries/useCommerce.ts
@@ -313,12 +313,12 @@ export const useBillLineCheckoutTarget = (billLineId: Ref<string | null>) =>
     enabled: () => billLineId.value !== null,
   });
 
-export const useCancelRentalOrder = () => {
+export const useCancelOrder = () => {
   const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: async (orderId: string) => {
-      const response = await client.api.commerce.orders[":orderId"]["cancel-rental"].$post(
+      const response = await client.api.commerce.orders[":orderId"].cancel.$post(
         {
           param: {
             orderId,
@@ -331,13 +331,16 @@ export const useCancelRentalOrder = () => {
         },
       );
       return readJsonOrThrow<
-        InferResponseType<CommerceApi["orders"][":orderId"]["cancel-rental"]["$post"]>
-      >(response, "Failed to cancel rental order");
+        InferResponseType<CommerceApi["orders"][":orderId"]["cancel"]["$post"]>
+      >(response, "Failed to cancel order");
     },
     onSuccess: (_, orderId) => {
       queryClient.invalidateQueries({
         queryKey: queryKeys.commerce.orderDetail(orderId),
       });
+      queryClient.invalidateQueries({
+        queryKey: ["commerce"],
+      });
     },
   });
 };
diff --git a/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue b/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue
index e11b29310..0fd803017 100644
--- a/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue
+++ b/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue
@@ -24,8 +24,18 @@
           </div>
 
           <div class="ride-hailing-order-content__status-actions">
-            <PuButton v-if="showsCancelAction" type="button" size="sm" shape="pill" tone="neutral" variant="outline"
-              disabled title="取消订单能力待接入" data-testid="order-detail.ride-hailing.cancel">
+            <PuButton
+              v-if="showsCancelAction"
+              type="button"
+              size="sm"
+              shape="pill"
+              tone="neutral"
+              variant="outline"
+              :loading="cancelMutation.isPending.value"
+              :disabled="!canRequestCancellation"
+              data-testid="order-detail.ride-hailing.cancel"
+              @click="cancelRideHailingOrder"
+            >
               取消订单
             </PuButton>
             <PuButton type="button" size="sm" shape="circle" tone="neutral" variant="ghost" disabled aria-label="更多操作"
@@ -35,6 +45,14 @@
           </div>
         </header>
 
+        <PuInlineNotice
+          v-if="cancelErrorMessage"
+          tone="error"
+          title="取消失败"
+          :message="cancelErrorMessage"
+          data-testid="order-detail.ride-hailing.cancel-error"
+        />
+
         <PuCard v-if="showsDriverCard" as="section" class="ride-hailing-order-content__driver-card" variant="soft"
           tone="neutral" padding="sm" gap="sm" data-testid="order-detail.ride-hailing.driver-card">
           <div class="ride-hailing-order-content__driver-layout">
@@ -120,11 +138,12 @@ import {
   PuButton,
   PuCard,
   PuFloatPanel,
+  PuInlineNotice,
   type PuFloatPanelStop,
   PuImg,
 } from "@partner-up-dev/design-web";
 import { computed, onMounted, onUnmounted, ref } from "vue";
-import type { CommerceOrderDetailResponse } from "@/domains/commerce/queries/useCommerce";
+import { useCancelOrder, type CommerceOrderDetailResponse } from "@/domains/commerce/queries/useCommerce";
 import BillCard from "@/domains/commerce/ui/order-detail/BillCard.vue";
 import RideHailingSkuCard from "@/domains/commerce/ui/ordering/RideHailingSkuCard.vue";
 import type { Route, RoutePoint } from "@/domains/route/model/route";
@@ -155,6 +174,8 @@ const props = defineProps<{
   ride: RideHailingDetail;
 }>();
 
+const cancelMutation = useCancelOrder();
+
 const DEFAULT_CONTENT_HEIGHT = 720;
 
 const contentRoot = ref<HTMLElement | null>(null);
@@ -265,7 +286,15 @@ const statusCopyByPhase: Record<
 
 const statusHero = computed(() => statusCopyByPhase[props.ride.executionPhase]);
 
-const showsCancelAction = computed(() => props.ride.executionPhase === "DISPATCHING");
+const canRequestCancellation = computed(() => props.detail.cancellation.canRequest);
+
+const showsCancelAction = computed(
+  () => props.ride.executionPhase === "DISPATCHING" && canRequestCancellation.value,
+);
+
+const cancelErrorMessage = computed(() =>
+  cancelMutation.error.value instanceof Error ? cancelMutation.error.value.message : null,
+);
 
 const firstPresentString = (values: readonly (string | null | undefined)[]): string | null => {
   for (const value of values) {
@@ -339,6 +368,10 @@ const billId = computed(() => {
   return value.length > 0 ? value : null;
 });
 
+const cancelRideHailingOrder = async (): Promise<void> => {
+  await cancelMutation.mutateAsync(props.detail.order.id);
+};
+
 const orderMapViewModel = computed(() =>
   buildRideHailingOrderMapViewModel({
     executionPhase: props.ride.executionPhase,
diff --git a/apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue b/apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue
index b7c9cc5b4..68bfbf37f 100644
--- a/apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue
+++ b/apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue
@@ -82,18 +82,15 @@
           <strong>{{ riderSummary }}</strong>
           <i class="i-mdi-chevron-right" aria-hidden="true"></i>
         </button>
-        <button
-          type="button"
-          class="ride-hailing-ordering-content__control"
-          data-testid="ordering.ride-hailing.departure-time.open"
-          @click="departureDrawerOpen = true"
+        <div
+          class="ride-hailing-ordering-content__control ride-hailing-ordering-content__control--static"
+          data-testid="ordering.ride-hailing.departure-time.row"
         >
           <span>出发时间</span>
           <strong data-testid="ordering.ride-hailing.departure-time">
             {{ rideDepartureLabel }}
           </strong>
-          <i class="i-mdi-chevron-right" aria-hidden="true"></i>
-        </button>
+        </div>
       </div>
 
       <PuDrawer
@@ -135,81 +132,16 @@
           </div>
         </div>
       </PuDrawer>
-
-      <PuDrawer
-        v-model:visible="departureDrawerOpen"
-        title="出发时间"
-        max-width="44rem"
-      >
-        <div class="ride-hailing-ordering-content__drawer-content">
-          <PuInlineNotice
-            v-if="departureLocked"
-            tone="info"
-            message="出发时间由当前搭子请求锁定。"
-          />
-          <PuButton
-            v-if="rideDepartureAt && editableDepartureAt !== rideDepartureAt"
-            type="button"
-            variant="soft"
-            tone="neutral"
-            data-testid="ordering.ride-hailing.departure-time.apply-imported"
-            @click="applyImportedDepartureAt"
-          >
-            使用带入时间
-          </PuButton>
-          <PuButton
-            v-if="editableDepartureAt"
-            type="button"
-            variant="soft"
-            tone="neutral"
-            data-testid="ordering.ride-hailing.departure-time.use-now"
-            @click="keepDepartNow"
-          >
-            现在出发
-          </PuButton>
-          <PuFormItem
-            label="出发时间"
-            for-id="ride-hailing-departure-at"
-            required
-          >
-            <PuInput
-              id="ride-hailing-departure-at"
-              :model-value="editableDepartureInput"
-              native-type="datetime-local"
-              :disabled="departureLocked"
-              data-testid="ordering.ride-hailing.departure-time.input"
-              @update:model-value="handleDepartureInput"
-            />
-          </PuFormItem>
-        </div>
-      </PuDrawer>
-
-      <PuDialog
-        :open="departureImportDialogOpen"
-        title="使用带入的出发时间？"
-        :description="departureImportDialogDescription"
-        confirm-text="使用"
-        cancel-text="现在出发"
-        :show-cancel="true"
-        :show-confirm="true"
-        @confirm="applyImportedDepartureAt"
-        @cancel="keepDepartNow"
-        @close="keepDepartNow"
-      />
     </div>
   </template>
 </template>
 
 <script setup lang="ts">
 import {
-  PuButton,
-  PuDialog,
   PuDrawer,
   PuFloatPanel,
   type PuFloatPanelStop,
-  PuFormItem,
   PuInlineNotice,
-  PuInput,
   PuSkeleton,
   usePuSelect,
 } from "@partner-up-dev/design-web";
@@ -276,10 +208,6 @@ const editableRoute = ref<Route | null>(null);
 const routePointDrawerOpen = ref(false);
 const selectedRoutePointIndex = ref<number | null>(null);
 const ridersDrawerOpen = ref(false);
-const departureDrawerOpen = ref(false);
-const editableDepartureAt = ref<string | null>(null);
-const departureImportDialogOpen = ref(false);
-const importedDeparturePromptSeen = ref(false);
 
 const rideOffer = computed<RideOffer | null>(() =>
   props.input.offerDetail.productType === "RIDE_HAILING" ? props.input.offerDetail : null,
@@ -324,11 +252,6 @@ const rideRoute = computed<RideRouteSnapshot | null>(() => {
   return isRideRouteSnapshot(value) ? value : null;
 });
 
-const rideDepartureAt = computed(() => {
-  const value = bindingValue("departureAt");
-  return typeof value === "string" ? value : null;
-});
-
 const boundContactPhone = computed(() => {
   const value = bindingValue("contactPhone");
   return typeof value === "string" ? value.trim() : "";
@@ -336,7 +259,6 @@ const boundContactPhone = computed(() => {
 
 const routeEditable = computed(() => !isBindingLocked(props.input, "route"));
 const ridersLocked = computed(() => isBindingLocked(props.input, "orderParticipants"));
-const departureLocked = computed(() => isBindingLocked(props.input, "departureAt"));
 
 const rideRiders = computed<BoundOrderParticipant[]>(() =>
   readBoundOrderParticipants(props.input.bindings),
@@ -529,7 +451,7 @@ const offerListingInput = computed<OfferListingInput | null>(() => {
     productType: "RIDE_HAILING",
     participants: rideRiders.value,
     route,
-    departureAt: editableDepartureAt.value,
+    departureAt: null,
     riders: rideRiders.value,
     contactPhone: phone,
   };
@@ -590,23 +512,7 @@ const selectedCandidateQuoteIds = computed<string[]>(() =>
   selectedRideQuoteOptions.value.map((option) => option.quoteId),
 );
 
-const rideDepartureLabel = computed(() => {
-  const departureAt = editableDepartureAt.value;
-  if (!departureAt) return "现在出发";
-  return `${formatTime(departureAt)}出发`;
-});
-
-const importedDepartureLabel = computed(() =>
-  rideDepartureAt.value ? formatDateTime(rideDepartureAt.value) : "未确定",
-);
-
-const departureImportDialogDescription = computed(
-  () => `当前搭子请求带入出发时间：${importedDepartureLabel.value}。`,
-);
-
-const editableDepartureInput = computed(() =>
-  editableDepartureAt.value ? toDateTimeLocalValue(editableDepartureAt.value) : "",
-);
+const rideDepartureLabel = computed(() => "现在出发");
 
 const output = computed<OrderingContentOutput | null>(() => {
   if (
@@ -690,59 +596,6 @@ const handleRoutePointPicked = (location: PickedLocation) => {
   closeRoutePointDrawer();
 };
 
-const formatTime = (value: string): string =>
-  new Intl.DateTimeFormat("zh-CN", {
-    hour: "2-digit",
-    minute: "2-digit",
-    hour12: false,
-  }).format(new Date(value));
-
-const formatDateTime = (value: string): string =>
-  new Intl.DateTimeFormat("zh-CN", {
-    year: "numeric",
-    month: "2-digit",
-    day: "2-digit",
-    hour: "2-digit",
-    minute: "2-digit",
-    hour12: false,
-  }).format(new Date(value));
-
-const toDateTimeLocalValue = (value: string): string => {
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) return "";
-  const pad = (input: number) => input.toString().padStart(2, "0");
-  return [
-    date.getFullYear(),
-    "-",
-    pad(date.getMonth() + 1),
-    "-",
-    pad(date.getDate()),
-    "T",
-    pad(date.getHours()),
-    ":",
-    pad(date.getMinutes()),
-  ].join("");
-};
-
-const handleDepartureInput = (value: string) => {
-  if (departureLocked.value) return;
-  editableDepartureAt.value = value.length > 0 ? new Date(value).toISOString() : null;
-};
-
-const applyImportedDepartureAt = () => {
-  if (rideDepartureAt.value) {
-    editableDepartureAt.value = rideDepartureAt.value;
-  }
-  importedDeparturePromptSeen.value = true;
-  departureImportDialogOpen.value = false;
-};
-
-const keepDepartNow = () => {
-  editableDepartureAt.value = null;
-  importedDeparturePromptSeen.value = true;
-  departureImportDialogOpen.value = false;
-};
-
 watch(
   visibleRideQuoteOptions,
   (next) => {
@@ -772,24 +625,13 @@ watch(
 );
 
 watch(
-  rideDepartureAt,
-  (next) => {
-    if (!next) {
-      editableDepartureAt.value = null;
-      return;
-    }
-    if (!importedDeparturePromptSeen.value) {
-      editableDepartureAt.value = null;
-      departureImportDialogOpen.value = true;
-    }
-  },
-  { immediate: true },
-);
-
-watch(output, (next) => emit("update:output", next), {
+  output,
+  (next) => emit("update:output", next),
+  {
   immediate: true,
   deep: true,
-});
+  },
+);
 
 watch(summary, (next) => emit("update:summary", next), {
   immediate: true,
@@ -944,6 +786,10 @@ watch(
   }
 }
 
+.ride-hailing-ordering-content__control--static {
+  cursor: default;
+}
+
 .ride-hailing-ordering-content__drawer-content {
   display: flex;
   flex-direction: column;
diff --git a/apps/frontend/src/pages/CommerceOrderDetailPage.vue b/apps/frontend/src/pages/CommerceOrderDetailPage.vue
index 13af2e8b4..816a1662e 100644
--- a/apps/frontend/src/pages/CommerceOrderDetailPage.vue
+++ b/apps/frontend/src/pages/CommerceOrderDetailPage.vue
@@ -159,8 +159,8 @@
               tone="danger"
               variant="outline"
               :loading="cancelMutation.isPending.value"
-              data-testid="order-detail.cancel-rental"
-              @click="cancelRentalOrder"
+              data-testid="order-detail.cancel"
+              @click="cancelOrder"
             >
               取消订单
             </PuButton>
@@ -234,7 +234,7 @@ import { computed, onMounted, onUnmounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import {
   type CommerceOrderDetailResponse,
-  useCancelRentalOrder,
+  useCancelOrder,
   useCommerceOrderDetail,
   useMockRentalBookingConfirmation,
 } from "@/domains/commerce/queries/useCommerce";
@@ -260,7 +260,7 @@ const orderId = computed(() => {
 });
 
 const orderQuery = useCommerceOrderDetail(orderId);
-const cancelMutation = useCancelRentalOrder();
+const cancelMutation = useCancelOrder();
 const confirmationMutation = useMockRentalBookingConfirmation();
 
 const detail = computed(() => orderQuery.data.value ?? null);
@@ -419,7 +419,7 @@ const formatDateTime = (value: string | null): string => {
   }).format(new Date(value));
 };
 
-const cancelRentalOrder = async (): Promise<void> => {
+const cancelOrder = async (): Promise<void> => {
   if (!orderId.value) return;
   await cancelMutation.mutateAsync(orderId.value);
 };
diff --git a/docs/10-prd/behavior/workflows.md b/docs/10-prd/behavior/workflows.md
index 4361d9d44..829fca731 100644
--- a/docs/10-prd/behavior/workflows.md
+++ b/docs/10-prd/behavior/workflows.md
@@ -85,7 +85,7 @@
 5. Ordering Content requests a priced Offer Listing. Listed items include quote identity, display price, and product-specific listing facts.
 6. For Rental, the user confirms one fixed quoted SKU and submits the order.
 7. For RideHailing, the user chooses one or more acceptable vehicle candidates. The displayed price is the selected candidate range. Unavailable provider vehicle types are omitted from the list rather than shown as disabled choices.
-8. If a PR-derived departure time is carried into RideHailing Ordering, the default is still depart now. The imported time is shown with its concrete value and remains available as a one-tap option in the departure-time drawer.
+8. RideHailing Ordering currently short-circuits departure-time editing and always behaves as `现在出发`, even when the PR itself carries a concrete start time.
 9. Create order submits quote identity, not copied route, participant, SKU, or price facts. If the quote expired, the page refreshes listing, preserves matching selected vehicles when possible, and requires the user to click order again.
 10. If create succeeds, the user enters Order Detail. If provider dispatch creates then immediately cancels a RideHailing order, the user stays on `/order/new` and sees a failure dialog with the reason.
 
diff --git a/docs/20-product-tdd/ecommerce-contracts.md b/docs/20-product-tdd/ecommerce-contracts.md
index a36cc7db5..b29d94c56 100644
--- a/docs/20-product-tdd/ecommerce-contracts.md
+++ b/docs/20-product-tdd/ecommerce-contracts.md
@@ -310,9 +310,10 @@ Pricing ownership:
 - For RideHailing, listing uses route/departureAt to query provider vehicle
   availability/estimates, joins provider results to local ACTIVE SKUs, and does
   not return unavailable SKUs.
-- RideHailing `departureAt` bindings are not silently applied. Ordering starts
-  from depart-now by default, shows the imported concrete time value, and keeps
-  one-tap actions for using the imported time or switching back to depart-now.
+- RideHailing `departureAt` remains part of the backend listing/order contract,
+  but the current Ordering UI short-circuits the user-facing behavior to
+  `现在出发`; PR-derived time is not imported into the active ordering surface
+  for this slice.
 - For Rental, listing issues fixed quotes for the available rental SKUs matching
   the current listing facts.
 - Ordering Page owns create-order orchestration. Ordering Content must not call
diff --git a/tasks/ride-hailing-ui-fixes/change-log.md b/tasks/ride-hailing-ui-fixes/change-log.md
index f51c8dc68..f9d818bb6 100644
--- a/tasks/ride-hailing-ui-fixes/change-log.md
+++ b/tasks/ride-hailing-ui-fixes/change-log.md
@@ -7,6 +7,32 @@ Archived full history:
 
 - `archive/change-log-ordering-through-order-detail-map.md`
 
+## Current Slice: RideHailing Cancel + Departure-Time Short-Circuit
+
+- Requested slice:
+  - implement RideHailing order cancellation from Order Detail
+  - short-circuit RideHailing departure-time binding so ordering always uses
+    `现在出发`
+- Implementation result:
+  - added generic order-detail cancellation transport:
+    `POST /api/commerce/orders/:orderId/cancel`
+  - added family-dispatched trade cancellation so Rental keeps its existing
+    path while RideHailing calls provider `cancelRide` and converges local
+    termination state plus `executionPhase = CANCELLED`
+  - enabled the RideHailing Order Detail cancel CTA during `DISPATCHING`
+  - removed PR-time import and manual editing from RideHailing departure-time
+    UX; ordering now visibly stays on `现在出发`
+  - stopped injecting RideHailing `departureAt` from ordering-entry and stopped
+    sending it into Offer Listing
+  - updated RideHailing system scenarios to cover:
+    - dispatching-order cancellation
+    - fixed `现在出发` ordering assertions
+    - variable dispatching candidate-card counts driven by selected vehicles
+- Verification result:
+  - backend typecheck passed
+  - frontend typecheck passed
+  - focused RideHailing system scenario file passed
+
 ## Current Slice: Payment Client UI / Attempt Identity
 
 - Requested slice:
diff --git a/tasks/ride-hailing-ui-fixes/control.md b/tasks/ride-hailing-ui-fixes/control.md
index 1370a7629..25188a8d7 100644
--- a/tasks/ride-hailing-ui-fixes/control.md
+++ b/tasks/ride-hailing-ui-fixes/control.md
@@ -19,9 +19,9 @@ Hypothesis:
 ## Classification
 
 - Primary route: `Reality`
-- Active mode: `Execute` completed for the Payment Checkout interaction/UI
-  slice; backend contract, fake JSAPI bridge groundwork, and checkout runtime
-  interaction are now connected end-to-end
+- Active mode: `Explore`; RideHailing cancellation + departure-time
+  short-circuit is now completed and verified, and the packet is ready for the
+  next slice
 - Current collaboration state: choice-set backend/domain foundation, Ordering
   UI primitive/control, SKU Card layout remediation, Offer Listing / quote
   identity, Ordering entry decoupling, durable docs promotion, and fake provider
@@ -56,6 +56,11 @@ Hypothesis:
   - WeChatPay attempt identity is now explicitly treated as one canonical
     attempt tuple with backend/provider string projections, not as two separate
     business truths
+  - the latest completed slice:
+    - RideHailing Order Detail now cancels through a generic order cancel
+      transport during `DISPATCHING`
+    - RideHailing Ordering now short-circuits departure-time UX to fixed
+      `现在出发`
 
 ## Inherited Effective Truth
 
@@ -133,6 +138,21 @@ Hypothesis:
   geometry, marker behavior, or zoom/pan behavior.
 - `RideHailingSkuCard.vue` is reusable for order detail dispatching candidate
   SKU display only if it supports a readonly shape without checkbox.
+- RideHailing cancellation slice is now implemented:
+  - Order Detail cancel CTA is live during `DISPATCHING`
+  - backend cancellation transport is now generic:
+    `POST /api/commerce/orders/:orderId/cancel`
+  - trade cancellation dispatches by order family
+  - fake Caocao and local order state both converge to `CANCELLED`
+- RideHailing departure-time short-circuit is now implemented:
+  - placement ordering entry no longer injects RideHailing `departureAt`
+  - Ordering UI no longer exposes imported-time or manual departure-time
+    controls
+  - Offer Listing currently always sees `departureAt = null`
+  - backend `departureAt` contract is intentionally preserved for later
+    restoration
+- Standalone planning artifact for the new slice:
+  `tasks/ride-hailing-ui-fixes/ride-hailing-cancel-and-departure-short-circuit-plan.md`
 - RideHailing order-detail back navigation currently uses generic
   `useFallbackBack` and therefore returns to the immediate previous page when a
   router back entry exists; for the standard PR -> Ordering -> Order Detail
diff --git a/tasks/ride-hailing-ui-fixes/discussion-log.md b/tasks/ride-hailing-ui-fixes/discussion-log.md
index fd6a11df8..cbeca79d8 100644
--- a/tasks/ride-hailing-ui-fixes/discussion-log.md
+++ b/tasks/ride-hailing-ui-fixes/discussion-log.md
@@ -7,6 +7,36 @@ Archived full history:
 
 - `archive/discussion-log-ordering-through-order-detail-map.md`
 
+## Current Segment: RideHailing Cancel + Departure-Time Short-Circuit
+
+- Requested slice:
+  - implement RideHailing order cancellation
+  - short-circuit RideHailing departure-time binding so ordering always uses
+    `现在出发`
+- Implementation result:
+  - backend cancellation transport is now generic:
+    `POST /api/commerce/orders/:orderId/cancel`
+  - trade cancellation now dispatches by order family:
+    - Rental reuses the existing cancellation flow
+    - RideHailing calls provider `cancelRide`, then converges local trade
+      termination state plus RideHailing `executionPhase = CANCELLED`
+  - RideHailing Order Detail cancel CTA is now live during `DISPATCHING`
+  - ordering-entry no longer injects PR `time.startAt` into RideHailing
+    `departureAt`
+  - `RideHailingOrderingContent.vue` no longer exposes imported-time prompt,
+    drawer actions, or manual departure-time editing
+  - RideHailing Offer Listing now always sees `departureAt = null`, so the
+    visible ordering behavior is fixed to `现在出发`
+  - durable docs now match the shipped short-circuit behavior
+- Verification result:
+  - `pnpm check:type:backend`
+  - `pnpm check:type:frontend`
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+- Opened slice artifact:
+  - `ride-hailing-cancel-and-departure-short-circuit-plan.md`
+- Next step:
+  - return to the next RideHailing / payment slice by explicit user direction
+
 ## Current Segment: Payment Client UI / Attempt Identity
 
 - Requested segment:
diff --git a/tasks/ride-hailing-ui-fixes/ride-hailing-cancel-and-departure-short-circuit-plan.md b/tasks/ride-hailing-ui-fixes/ride-hailing-cancel-and-departure-short-circuit-plan.md
new file mode 100644
index 000000000..7f96197b7
--- /dev/null
+++ b/tasks/ride-hailing-ui-fixes/ride-hailing-cancel-and-departure-short-circuit-plan.md
@@ -0,0 +1,242 @@
+# RideHailing Cancel And Departure-Time Short-Circuit Plan
+
+## Objective
+
+- implement RideHailing order cancellation from Order Detail
+- temporarily short-circuit RideHailing departure-time binding so ordering
+  always uses `现在出发`
+
+## Classification
+
+- Primary route: `Intent`
+- Secondary route: `Constraint`
+- Active mode: `Explore`
+
+## Overall Workstream Plan
+
+### Overall Objective
+
+- keep cancellation on the existing Order Detail journey instead of introducing
+  a new user-facing route
+- treat departure-time short-circuiting as a temporary behavior narrowing, not
+  as deletion of the underlying `departureAt` contract
+
+### Overall Confirmed Truth
+
+- Before implementation, RideHailing Order Detail already had a cancel CTA, but
+  it was disabled and shown only during `DISPATCHING`
+- Before implementation, backend HTTP cancellation was Rental-specific:
+  `POST /api/commerce/orders/:orderId/cancel-rental`
+- trade termination primitives are already family-agnostic and already model
+  `RIDE_HAILING_FULFILLMENT`
+- Caocao provider adapter already supports `cancelRide`
+- fake Caocao already supports provider cancellation and converges local ride
+  state to `CANCELLED`
+- Before implementation, placement ordering entry injected PR `time.startAt`
+  into RideHailing bindings as `departureAt`
+- `RideHailingOrderingContent.vue` currently exposes imported-time and manual
+  departure editing, and passes `departureAt` into RideHailing Offer Listing
+- create-order remains quote-bound, so the meaningful short-circuit seam is
+  listing input, not create-order payload shape
+- durable docs currently promise imported-time affordances, so the short-circuit
+  requires doc updates
+
+### Overall Topology
+
+```mermaid
+flowchart LR
+  A["PR matching context<br/>time.startAt"] --> B["Placement ordering entry<br/>bindings.departureAt"]
+  B --> C["RideHailingOrderingContent"]
+  C --> D["POST /api/commerce/offers/:offerId/listing"]
+  D --> E["Quote listing context.departureAt"]
+  E --> F["POST /api/commerce/orders"]
+  F --> G["RideHailing order foundation.departureAt"]
+```
+
+```mermaid
+flowchart LR
+  A["Order Detail cancel CTA"] --> B["POST /api/commerce/orders/:orderId/cancel"]
+  B --> C["Trade cancellation dispatcher"]
+  C --> D["RideHailing provider cancelRide"]
+  D --> E["Local termination state + order status"]
+  E --> F["RideHailing Order Detail"]
+```
+
+### Overall Shift-Left Control
+
+- keep the slice explicit before implementation:
+  - owner split
+  - transport path
+  - phase scope
+  - verification plan
+  - implementation steps
+- human start was required before mutation and was received before execution
+
+## Segment-Specific Plan
+
+### Segment Goal
+
+- make the existing RideHailing cancel CTA real for the current visible phase
+  window
+- remove current imported-time / manual departure-time behavior from the
+  RideHailing ordering surface without deleting future restoration seams
+
+### Segment Scope
+
+- included:
+  - generic order-detail cancel transport
+  - backend family dispatch for Rental and RideHailing cancellation
+  - RideHailing provider cancel integration
+  - RideHailing Order Detail cancel CTA enablement and refetch flow
+  - RideHailing departure-time UI short-circuit to fixed `现在出发`
+  - scenario and durable-doc updates
+- excluded:
+  - expanding RideHailing cancellation into `ACCEPTED / ARRIVED_AT_PICKUP /
+    IN_TRIP`
+  - cancel-fee UX for later phases
+  - deleting `departureAt` from backend quote/order contracts
+  - broader pricing or checkout changes
+
+### Address And Object
+
+- backend transport and use cases:
+  - `apps/backend/src/controllers/commerce.controller.ts`
+  - `apps/backend/src/domains/trade/use-cases/rental-ordering-flow.ts`
+  - likely new generic / RideHailing-specific trade use-case files under
+    `apps/backend/src/domains/trade/use-cases/`
+  - `apps/backend/src/domains/trade/use-cases/index.ts`
+- backend provider / model support:
+  - `apps/backend/src/domains/ride-hailing/services/caocao-provider.ts`
+  - `apps/backend/src/repositories/RideHailingOrderRepository.ts`
+- frontend order detail and ordering:
+  - `apps/frontend/src/domains/commerce/queries/useCommerce.ts`
+  - `apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue`
+  - `apps/frontend/src/pages/CommerceOrderDetailPage.vue`
+  - `apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue`
+- ordering-entry binding:
+  - `apps/backend/src/domains/merchandising/use-cases/match-placement-instance.ts`
+- durable truth and volatile packet:
+  - `docs/10-prd/behavior/workflows.md`
+  - `docs/20-product-tdd/ecommerce-contracts.md`
+  - `tasks/ride-hailing-ui-fixes/control.md`
+  - `tasks/ride-hailing-ui-fixes/discussion-log.md`
+  - `tasks/ride-hailing-ui-fixes/change-log.md`
+- verification:
+  - `tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+  - targeted backend scenario if needed
+
+### State Diff
+
+- From:
+  - RideHailing cancel CTA is disabled placeholder UI
+  - cancellation HTTP transport is Rental-specific
+  - PR `time.startAt` becomes RideHailing `departureAt`
+  - RideHailing ordering exposes imported-time and manual departure editing
+- To:
+  - RideHailing cancel CTA becomes real during the current `DISPATCHING` phase
+  - order-detail cancellation uses a generic order cancel transport that
+    dispatches by family
+  - RideHailing ordering always behaves as depart-now for this slice
+  - imported-time prompt, imported-time action, and manual departure editing are
+    short-circuited out of the active UX
+
+### Blast Radius Forecast
+
+- backend commerce controller contract
+- trade cancellation use-case naming and ownership
+- RideHailing provider integration and cancellation convergence
+- frontend Rental and RideHailing order-detail mutation hooks
+- RideHailing ordering UX and scenario assertions
+- durable workflow / contract docs
+
+### Invariants Check
+
+- keep cancellation entry on Order Detail
+- keep provider cancellation as provider-owned truth for RideHailing
+- keep create-order quote-bound; do not reintroduce copied route/time facts into
+  create-order payload
+- do not delete backend `departureAt` contract fields; only short-circuit the
+  current frontend behavior
+- keep Rental cancellation behavior intact while moving transport to a generic
+  order-detail endpoint
+
+### Recommended Direction
+
+- introduce:
+  - `POST /api/commerce/orders/:orderId/cancel`
+- backend dispatcher:
+  - Rental delegates to existing cancellation path
+  - RideHailing:
+    - validate creator ownership
+    - validate order is cancellable in the current phase window
+    - append a termination attempt with `RIDE_HAILING_FULFILLMENT`
+    - call provider `cancelRide`
+    - mark local order cancelled and RideHailing execution phase cancelled
+- frontend:
+  - replace the disabled RideHailing cancel CTA with a live mutation-backed CTA
+  - invalidate/refetch order detail after cancel success
+  - short-circuit RideHailing departure-time UX to a fixed `现在出发`
+  - stop sending PR-imported `departureAt` into RideHailing listing input
+- docs:
+  - explicitly record the temporary short-circuit so durable truth matches the
+    shipped product
+
+### Verification Plan
+
+- frontend static:
+  - `pnpm check:type:frontend`
+- backend static:
+  - `pnpm check:type:backend`
+- focused scenario:
+  - RideHailing create -> Order Detail -> cancel in `DISPATCHING`
+  - assert:
+    - CTA is enabled before cancel
+    - order detail converges to cancelled state
+    - fake Caocao provider state becomes `CANCELLED`
+- focused RideHailing ordering scenario update:
+  - remove imported-time prompt/drawer expectations
+  - assert departure row stays `现在出发`
+- doc proof:
+  - workflow / contract wording no longer claims the short-circuited affordance
+
+### Implementation Steps
+
+1. add a generic order-detail cancel transport in backend controller
+2. extract or add a family-dispatched trade cancellation use case
+3. wire RideHailing cancellation through provider `cancelRide` plus local order
+   / ride termination convergence
+4. migrate Rental frontend/backend cancellation callers onto the generic cancel
+   endpoint so transport ownership is no longer family-specific
+5. enable the RideHailing cancel CTA and refetch path in Order Detail
+6. short-circuit RideHailing departure-time binding at ordering-entry and
+   ordering-content seams so listing always behaves as depart-now
+7. update scenario coverage and durable docs
+8. run focused verification
+
+### Implementation Result
+
+- backend transport now uses:
+  `POST /api/commerce/orders/:orderId/cancel`
+- trade cancellation dispatch now routes by order family:
+  - Rental delegates to the existing cancellation flow
+  - RideHailing validates `DISPATCHING`, calls provider `cancelRide`, approves
+    a `RIDE_HAILING_FULFILLMENT` termination attempt, and persists local
+    `CANCELLED` phase/state
+- RideHailing Order Detail cancel CTA is now enabled during `DISPATCHING`
+- ordering-entry no longer injects RideHailing `departureAt`
+- RideHailing Ordering no longer exposes imported-time or manual departure-time
+  interaction; listing now always sees `departureAt = null`
+- scenario coverage now includes the dispatching cancel path and the fixed
+  `现在出发` ordering assertion
+
+### Verification Result
+
+- `pnpm check:type:backend`
+- `pnpm check:type:frontend`
+- `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+
+### Segment Status
+
+- completed and verified
+- if a later slice wants cancellation expanded beyond `DISPATCHING`, reopen a
+  new handshake because cancel-fee and UX scope will widen
diff --git a/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts b/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
index 4844d04de..3840384cf 100644
--- a/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
+++ b/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
@@ -223,6 +223,32 @@ async function waitForCommerceQuoteCountAtLeast(expected: number): Promise<void>
   );
 }
 
+async function waitForFakeCaocaoOrderCount(expected: number): Promise<void> {
+  const deadline = Date.now() + 10_000;
+  while (Date.now() < deadline) {
+    if ((await readFakeCaocaoOrderCount()) === expected) return;
+    await new Promise((resolve) => setTimeout(resolve, 100));
+  }
+  assert.equal(await readFakeCaocaoOrderCount(), expected);
+}
+
+async function waitForFakeCaocaoOrderPhase(input: {
+  providerOrderId: string;
+  phase: string;
+}): Promise<void> {
+  const deadline = Date.now() + 10_000;
+  let latestPhase: string | null = null;
+  while (Date.now() < deadline) {
+    const order = (await readFakeCaocaoOrders()).find(
+      (candidate) => candidate.providerOrderId === input.providerOrderId,
+    );
+    latestPhase = order?.phase ?? null;
+    if (latestPhase === input.phase) return;
+    await new Promise((resolve) => setTimeout(resolve, 100));
+  }
+  assert.equal(latestPhase, input.phase);
+}
+
 async function givenRideHailingPr(input: {
   creator: ScenarioUser;
   title: string;
@@ -473,27 +499,6 @@ async function waitForVehicleCardCount(page: Page, expected: number): Promise<vo
   assert.equal(await vehicleCards.count(), expected);
 }
 
-async function keepDepartNowIfPrompted(page: Page): Promise<void> {
-  const dialog = page.getByRole("dialog").filter({ hasText: "使用带入的出发时间？" });
-  const visible = await dialog
-    .waitFor({
-      state: "visible",
-      timeout: 1_000,
-    })
-    .then(() => true)
-    .catch(() => false);
-  if (!visible) return;
-  await dialog.getByText(/2031\/04\/01.*10:00/).waitFor({
-    state: "visible",
-    timeout: 10_000,
-  });
-  await dialog.getByRole("button", { name: "现在出发", exact: true }).click();
-  await dialog.waitFor({
-    state: "hidden",
-    timeout: 10_000,
-  });
-}
-
 async function assertRideHailingOrderingContent(page: Page): Promise<void> {
   await page.getByTestId("ordering.ride-hailing.route-map").waitFor({
     state: "visible",
@@ -503,10 +508,10 @@ async function assertRideHailingOrderingContent(page: Page): Promise<void> {
     state: "visible",
     timeout: 10_000,
   });
-  await assertLocatorTextMatches({
+  await assertLocatorTextIncludes({
     actual: page.getByTestId("ordering.ride-hailing.departure-time").textContent(),
     label: "RideHailing departure row",
-    pattern: /(现在|\d{2}:\d{2})出发/,
+    expected: "现在出发",
   });
   await assertLocatorTextIncludes({
     actual: page.getByTestId("ordering.ride-hailing.riders").textContent(),
@@ -517,28 +522,9 @@ async function assertRideHailingOrderingContent(page: Page): Promise<void> {
     state: "visible",
     timeout: 10_000,
   });
-  await keepDepartNowIfPrompted(page);
-}
-
-async function assertDepartureDrawerCanSwitchBetweenImportedAndNow(page: Page): Promise<void> {
-  await page.getByTestId("ordering.ride-hailing.departure-time.open").click();
-  await page.getByTestId("ordering.ride-hailing.departure-time.apply-imported").click();
-  await assertLocatorTextMatches({
-    actual: page.getByTestId("ordering.ride-hailing.departure-time").textContent(),
-    label: "RideHailing imported departure row",
-    pattern: /10:00出发/,
-  });
-  await page.getByTestId("ordering.ride-hailing.departure-time.use-now").click();
-  await assertLocatorTextIncludes({
-    actual: page.getByTestId("ordering.ride-hailing.departure-time").textContent(),
-    expected: "现在出发",
-    label: "RideHailing depart now row",
-  });
-  await page.keyboard.press("Escape");
 }
 
 async function selectPremierAsAdditionalCandidate(page: Page): Promise<void> {
-  await keepDepartNowIfPrompted(page);
   const vehicleCards = page.getByTestId("ordering.ride-hailing.vehicle-card");
   await vehicleCards.first().waitFor({
     state: "visible",
@@ -574,8 +560,18 @@ async function selectPremierAsAdditionalCandidate(page: Page): Promise<void> {
 
 async function assertRideHailingOrderDetail(
   page: Page,
-  expectedRiderNames: string[] = ["scenario-system-ride-hailing-creator"],
+  input: {
+    expectedDispatchingVehicleLabels?: string[];
+    expectedResolvedVehicleLabel?: string;
+    expectedRiderNames?: string[];
+  } = {},
 ): Promise<void> {
+  const expectedDispatchingVehicleLabels = input.expectedDispatchingVehicleLabels ?? [
+    "系统曹操快车",
+  ];
+  const expectedResolvedVehicleLabel = input.expectedResolvedVehicleLabel ?? "系统曹操快车";
+  const expectedRiderNames = input.expectedRiderNames ?? [];
+
   await page.getByTestId("order-detail.page").waitFor({
     state: "visible",
     timeout: 10_000,
@@ -598,15 +594,13 @@ async function assertRideHailingOrderDetail(
   const dispatchingVehicleCards = dispatchingVehicleSection.getByTestId(
     "order-detail.ride-hailing.vehicle-card",
   );
-  assert.equal(await dispatchingVehicleCards.count(), 2);
-  await dispatchingVehicleCards.filter({ hasText: "系统曹操快车" }).waitFor({
-    state: "visible",
-    timeout: 10_000,
-  });
-  await dispatchingVehicleCards.filter({ hasText: "系统曹操专车" }).waitFor({
-    state: "visible",
-    timeout: 10_000,
-  });
+  assert.equal(await dispatchingVehicleCards.count(), expectedDispatchingVehicleLabels.length);
+  for (const label of expectedDispatchingVehicleLabels) {
+    await dispatchingVehicleCards.filter({ hasText: label }).waitFor({
+      state: "visible",
+      timeout: 10_000,
+    });
+  }
   const resolvedVehicleSection = page.getByTestId(
     "order-detail.ride-hailing.resolved-vehicle-section",
   );
@@ -625,7 +619,7 @@ async function assertRideHailingOrderDetail(
   });
   await assertLocatorTextIncludes({
     actual: resolvedVehicleSection.textContent(),
-    expected: "系统曹操快车",
+    expected: expectedResolvedVehicleLabel,
     label: "RideHailing resolved vehicle section item",
   });
   await assertLocatorTextIncludes({
@@ -884,14 +878,16 @@ scenario("commerce_ride_hailing_ordering_reaches_order_detail", async (ctx) => {
 
     await openRideHailingOrderingFromPr({ page, prId: pr.id });
     await assertRideHailingOrderingContent(page);
-    await assertDepartureDrawerCanSwitchBetweenImportedAndNow(page);
     await selectPremierAsAdditionalCandidate(page);
 
     await page.getByTestId("ordering.ride-hailing.create-order").click();
-    await assertRideHailingOrderDetail(page, [
-      "scenario-system-ride-hailing-creator",
-      "scenario-system-ride-hailing-passenger",
-    ]);
+    await assertRideHailingOrderDetail(page, {
+      expectedDispatchingVehicleLabels: ["系统曹操快车", "系统曹操专车"],
+      expectedRiderNames: [
+        "scenario-system-ride-hailing-creator",
+        "scenario-system-ride-hailing-passenger",
+      ],
+    });
     await page.waitForTimeout(3500);
     const fakeOrders = await readFakeCaocaoOrders();
     assert.equal(fakeOrders.length, 1);
@@ -1010,6 +1006,57 @@ scenario("commerce_ride_hailing_ordering_reaches_order_detail", async (ctx) => {
   assert.match(createdOrderPath ?? "", /^\/orders\/[0-9a-f-]+$/);
 });
 
+scenario("commerce_ride_hailing_order_detail_cancel_dispatching_order", async (ctx) => {
+  await resetFakeCaocao();
+  const creator = await givenUser("system-ride-hailing-cancel-creator", {
+    phoneNumber: "13800138006",
+  });
+  await bindScenarioWeChatOpenId({
+    openId: "fake-openid-commerce-ride-hailing-cancel-creator",
+    user: creator,
+  });
+  const pr = await givenRideHailingPr({
+    creator,
+    title: "System ride hailing cancel PR",
+  });
+  await configurePRStatus({ pr, status: "READY" });
+  await registerScenarioPaymentProvider();
+  const placement = await givenRideHailingOrderingPlacement();
+
+  ctx.record("creatorUserId", creator.user.id);
+  ctx.record("prId", pr.id);
+  ctx.record("placementId", placement.placementId);
+  ctx.record("providerInstanceId", placement.providerInstanceId);
+
+  await withScenarioPage(async (page) => {
+    await installScenarioUserSession(page, creator);
+    await installDeterministicShareSidecarStubs(page);
+
+    await openRideHailingOrderingFromPr({ page, prId: pr.id });
+    await assertRideHailingOrderingContent(page);
+    await page.getByTestId("ordering.ride-hailing.create-order").click();
+    await assertRideHailingOrderDetail(page);
+    await waitForFakeCaocaoOrderCount(1);
+
+    const fakeOrders = await readFakeCaocaoOrders();
+    assert.equal(fakeOrders.length, 1);
+    const providerOrderId = fakeOrders[0]?.providerOrderId;
+    assert.ok(providerOrderId);
+
+    await page.getByTestId("order-detail.ride-hailing.cancel").click();
+    await waitForTextIncludes({
+      read: () => page.getByTestId("order-detail.ride-hailing.status-title").textContent(),
+      expected: "已取消",
+      label: "RideHailing cancelled status hero",
+    });
+    await waitForFakeCaocaoOrderPhase({
+      providerOrderId,
+      phase: "CANCELLED",
+    });
+    assert.equal(await page.getByTestId("order-detail.ride-hailing.cancel").count(), 0);
+  });
+});
+
 scenario("commerce_ride_hailing_provider_create_failure_stays_on_ordering_page", async (ctx) => {
   await resetFakeCaocao();
   await armFakeCaocaoCreateFailure();
@@ -1083,7 +1130,6 @@ scenario("commerce_ride_hailing_unavailable_provider_vehicle_is_hidden", async (
 
     await openRideHailingOrderingFromPrAndWaitForListing({ page, prId: pr.id });
     await assertRideHailingOrderingContent(page);
-    await keepDepartNowIfPrompted(page);
 
     await waitForVehicleCardCount(page, 1);
     await page
@@ -1164,7 +1210,9 @@ scenario("commerce_ride_hailing_quote_expired_refreshes_and_preserves_selection"
     });
     assert.equal(await selectedMarkers.count(), 2);
     await page.getByTestId("ordering.ride-hailing.create-order").click();
-    await assertRideHailingOrderDetail(page);
+    await assertRideHailingOrderDetail(page, {
+      expectedDispatchingVehicleLabels: ["系统曹操快车", "系统曹操专车"],
+    });
     assert.equal(await readFakeCaocaoOrderCount(), 1);
   });
 });
@@ -1277,7 +1325,6 @@ scenario("commerce_ride_hailing_all_provider_vehicles_unavailable_blocks_orderin
 
     await openRideHailingOrderingFromPrAndWaitForListing({ page, prId: pr.id });
     await assertRideHailingOrderingContent(page);
-    await keepDepartNowIfPrompted(page);
     await waitForVehicleCardCount(page, 0);
     await assertLocatorTextIncludes({
       actual: page.getByTestId("ordering.ride-hailing.quote-price-range").textContent(),

From eafd9f1d6a41e27aa52932d02d2ab9752e5692e1 Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Sun, 28 Jun 2026 19:39:40 +0800
Subject: [PATCH 50/94] fix(ordering): stop terminal polling and add pr-ready
 recovery

- remove page-local ride-hailing detail polling after terminal order states
- add PR_NOT_READY recovery dialogs that let creators mark the PR ready in-place
- sync rental scenario coverage and task packet for the new slice
---
 .../0077_dev_ride_hailing_caocao_fixture.sql  |  26 ++--
 .../domains/trade/use-cases/create-order.ts   |  18 +--
 .../src/pages/CommerceOrderDetailPage.vue     |  17 +--
 apps/frontend/src/pages/OrderingPage.vue      | 118 +++++++++++++++++-
 tasks/ride-hailing-ui-fixes/change-log.md     |  24 ++++
 tasks/ride-hailing-ui-fixes/control.md        |  34 ++++-
 tasks/ride-hailing-ui-fixes/discussion-log.md |  29 +++++
 ...inal-polling-and-pr-ready-recovery-plan.md |  79 ++++++++++++
 .../commerce/rental-ordering.scenario.test.ts |  64 ++++++++++
 9 files changed, 362 insertions(+), 47 deletions(-)
 create mode 100644 tasks/ride-hailing-ui-fixes/order-detail-terminal-polling-and-pr-ready-recovery-plan.md

diff --git a/apps/backend/data-migrations/0077_dev_ride_hailing_caocao_fixture.sql b/apps/backend/data-migrations/0077_dev_ride_hailing_caocao_fixture.sql
index e98351d74..457f4989f 100644
--- a/apps/backend/data-migrations/0077_dev_ride_hailing_caocao_fixture.sql
+++ b/apps/backend/data-migrations/0077_dev_ride_hailing_caocao_fixture.sql
@@ -43,7 +43,7 @@ begin
       'CAOCAO',
       provider_instance_key,
       'ACTIVE',
-      '系统曹操',
+      '曹操出行',
       jsonb_build_object(
         'adapterMode', 'CAOCAO_OPEN_API',
         'caocaoClientId', 'fake-caocao-client',
@@ -59,7 +59,7 @@ begin
   else
     update ride_hailing_provider_instances
        set status = 'ACTIVE',
-           display_name = '系统曹操',
+           display_name = '曹操出行',
            config = jsonb_build_object(
              'adapterMode', 'CAOCAO_OPEN_API',
              'caocaoClientId', 'fake-caocao-client',
@@ -76,7 +76,7 @@ begin
     into v_spu_id
     from product_spus
    where product_type = 'RIDE_HAILING'
-     and name = '系统曹操出行'
+     and name = '曹操出行'
    order by created_at asc
    limit 1;
 
@@ -96,11 +96,11 @@ begin
     values (
       1,
       'ACTIVE',
-      '系统曹操出行',
+      '曹操出行',
       'RIDE_HAILING',
       '{"quantityPolicy":{"type":"FIXED","quantity":1},"skuSelectionPolicy":{"type":"EXACTLY_ONE"}}'::jsonb,
       '{"type":"RIDE_HAILING"}'::jsonb,
-      '{"detailImageAssetIds":[],"heroImageAssetIds":[],"noticeBlocks":[],"parameterGroups":[],"sellingPoints":["曹操实时预估","行程结束后按实际费用结算"]}'::jsonb,
+      '{"detailImageAssetIds":[],"heroImageAssetIds":[],"noticeBlocks":[],"parameterGroups":[],"sellingPoints":["实时预估","行程结束后按实际费用结算"]}'::jsonb,
       '{}'::jsonb,
       now(),
       now()
@@ -112,7 +112,7 @@ begin
            status = 'ACTIVE',
            sales_policy = '{"quantityPolicy":{"type":"FIXED","quantity":1},"skuSelectionPolicy":{"type":"EXACTLY_ONE"}}'::jsonb,
            service_policy = '{"type":"RIDE_HAILING"}'::jsonb,
-           presentation = '{"detailImageAssetIds":[],"heroImageAssetIds":[],"noticeBlocks":[],"parameterGroups":[],"sellingPoints":["曹操实时预估","行程结束后按实际费用结算"]}'::jsonb,
+           presentation = '{"detailImageAssetIds":[],"heroImageAssetIds":[],"noticeBlocks":[],"parameterGroups":[],"sellingPoints":["实时预估","行程结束后按实际费用结算"]}'::jsonb,
            facts = '{}'::jsonb,
            updated_at = now()
      where id = v_spu_id;
@@ -148,7 +148,7 @@ begin
         'rideHailingProviderInstanceId', v_provider_instance_id::text,
         'providerVehicleTypeCode', 'EXPRESS'
       ),
-      '{"type":"DYNAMIC_QUOTE","calculatorSpec":{"version":1,"currency":"CNY","components":[{"id":"caocao-provider-estimate","label":"曹操预估价","amount":{"type":"INPUT","path":"provider.estimateAmountFen"}}]}}'::jsonb,
+      '{"type":"DYNAMIC_QUOTE","calculatorSpec":{"version":1,"currency":"CNY","components":[{"id":"caocao-provider-estimate","label":"预估价","amount":{"type":"INPUT","path":"provider.estimateAmountFen"}}]}}'::jsonb,
       now(),
       now()
     )
@@ -162,7 +162,7 @@ begin
              'rideHailingProviderInstanceId', v_provider_instance_id::text,
              'providerVehicleTypeCode', 'EXPRESS'
            ),
-           pricing_model = '{"type":"DYNAMIC_QUOTE","calculatorSpec":{"version":1,"currency":"CNY","components":[{"id":"caocao-provider-estimate","label":"曹操预估价","amount":{"type":"INPUT","path":"provider.estimateAmountFen"}}]}}'::jsonb,
+           pricing_model = '{"type":"DYNAMIC_QUOTE","calculatorSpec":{"version":1,"currency":"CNY","components":[{"id":"caocao-provider-estimate","label":"预估价","amount":{"type":"INPUT","path":"provider.estimateAmountFen"}}]}}'::jsonb,
            cancellation_policy_ref = null,
            updated_at = now()
      where id = v_express_sku_id;
@@ -212,7 +212,7 @@ begin
              'rideHailingProviderInstanceId', v_provider_instance_id::text,
              'providerVehicleTypeCode', 'PREMIER'
            ),
-           pricing_model = '{"type":"DYNAMIC_QUOTE","calculatorSpec":{"version":1,"currency":"CNY","components":[{"id":"caocao-provider-estimate","label":"曹操预估价","amount":{"type":"INPUT","path":"provider.estimateAmountFen"}}]}}'::jsonb,
+           pricing_model = '{"type":"DYNAMIC_QUOTE","calculatorSpec":{"version":1,"currency":"CNY","components":[{"id":"caocao-provider-estimate","label":"预估价","amount":{"type":"INPUT","path":"provider.estimateAmountFen"}}]}}'::jsonb,
            cancellation_policy_ref = null,
            updated_at = now()
      where id = v_premier_sku_id;
@@ -282,7 +282,7 @@ begin
      and (
        matching_rule::text like '%' || placement_pr_type || '%'
        or matching_rule::text like '%' || old_task_private_pr_type || '%'
-       or creative ->> 'ctaLabel' = '叫曹操'
+       or creative ->> 'ctaLabel' = '打车'
      )
    order by
      case
@@ -315,7 +315,7 @@ begin
       10000,
       now() - interval '1 minute',
       null,
-      '{"ctaLabel":"叫曹操","description":"按当前路线预估网约车费用"}'::jsonb,
+      '{"ctaLabel":"打车","description":"按当前路线预估网约车费用"}'::jsonb,
       '[{"fieldKey":"route","contextPath":"route","lock":true}]'::jsonb,
       now(),
       now()
@@ -330,7 +330,7 @@ begin
            priority = 10000,
            effective_from = now() - interval '1 minute',
            effective_to = null,
-           creative = '{"ctaLabel":"叫曹操","description":"按当前路线预估网约车费用"}'::jsonb,
+           creative = '{"ctaLabel":"打车","description":"按当前路线预估网约车费用"}'::jsonb,
            binding_rules = '[{"fieldKey":"route","contextPath":"route","lock":true}]'::jsonb,
            updated_at = now()
      where id = v_placement_id;
@@ -343,4 +343,4 @@ begin
      and offer_id = v_offer_id
      and placement_type = 'BUTTON'
      and matching_rule::text like '%' || old_task_private_pr_type || '%';
-end $$;
+end $$;
\ No newline at end of file
diff --git a/apps/backend/src/domains/trade/use-cases/create-order.ts b/apps/backend/src/domains/trade/use-cases/create-order.ts
index 3185fc227..044881e1b 100644
--- a/apps/backend/src/domains/trade/use-cases/create-order.ts
+++ b/apps/backend/src/domains/trade/use-cases/create-order.ts
@@ -109,15 +109,15 @@ export type OrderingActionProblem = {
 
 export type CreateOrderCommandResult =
   | {
-      outcome: "CREATED";
-      orderId: string;
-      billId?: string | null;
-    }
+    outcome: "CREATED";
+    orderId: string;
+    billId?: string | null;
+  }
   | {
-      outcome: "CANCELLED";
-      orderId: string;
-      reason: OrderingActionProblem;
-    };
+    outcome: "CANCELLED";
+    orderId: string;
+    reason: OrderingActionProblem;
+  };
 
 type RideQuoteOption = {
   skuId: number;
@@ -249,7 +249,7 @@ async function validatePrAttachmentForEvaluation(input: {
     return actionProblem({
       code: "PR_NOT_READY",
       title: "暂不能创建订单",
-      detail: "订单创建需要 PR 处于 READY 状态。",
+      detail: "创建订单需要搭子请求「已成团」",
     });
   }
   if (!input.viewerUserId || pr.createdBy !== input.viewerUserId) {
diff --git a/apps/frontend/src/pages/CommerceOrderDetailPage.vue b/apps/frontend/src/pages/CommerceOrderDetailPage.vue
index 816a1662e..a2e5d6613 100644
--- a/apps/frontend/src/pages/CommerceOrderDetailPage.vue
+++ b/apps/frontend/src/pages/CommerceOrderDetailPage.vue
@@ -230,7 +230,7 @@ import {
   PuPageScaffold,
 } from "@partner-up-dev/design-web";
 import { storeToRefs } from "pinia";
-import { computed, onMounted, onUnmounted } from "vue";
+import { computed } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import {
   type CommerceOrderDetailResponse,
@@ -428,21 +428,6 @@ const simulateBookingConfirmation = async (): Promise<void> => {
   if (!orderId.value) return;
   await confirmationMutation.mutateAsync(orderId.value);
 };
-
-let ridePollingTimer: number | undefined;
-
-onMounted(() => {
-  ridePollingTimer = window.setInterval(() => {
-    if (detail.value?.order.family !== "RIDE_HAILING" || detail.value.bill) return;
-    void orderQuery.refetch();
-  }, 1500);
-});
-
-onUnmounted(() => {
-  if (ridePollingTimer !== undefined) {
-    window.clearInterval(ridePollingTimer);
-  }
-});
 </script>
 
 <style scoped lang="scss">
diff --git a/apps/frontend/src/pages/OrderingPage.vue b/apps/frontend/src/pages/OrderingPage.vue
index 42e2442b0..9b33b1f6a 100644
--- a/apps/frontend/src/pages/OrderingPage.vue
+++ b/apps/frontend/src/pages/OrderingPage.vue
@@ -93,7 +93,7 @@
       cancel-text="取消"
       :show-cancel="orderingDialog.showCancel"
       :show-confirm="true"
-      :confirm-loading="createOrderMutation.isPending.value"
+      :confirm-loading="orderingDialogConfirmLoading"
       tone="info"
       @close="closeOrderingDialog"
       @cancel="closeOrderingDialog"
@@ -105,7 +105,7 @@
 <script setup lang="ts">
 import { PuButton, PuDialog, PuInlineNotice } from "@partner-up-dev/design-web";
 import { storeToRefs } from "pinia";
-import { computed, ref, watch } from "vue";
+import { computed, nextTick, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRouter } from "vue-router";
 import type {
@@ -121,9 +121,14 @@ import OrderingPriceDetailDrawer from "@/domains/commerce/ui/ordering/OrderingPr
 import RentalOrderingForm from "@/domains/commerce/ui/ordering/RentalOrderingForm.vue";
 import RideHailingOrderingContent from "@/domains/commerce/ui/ordering/RideHailingOrderingContent.vue";
 import { useOrderingHandoffStore } from "@/domains/commerce/use-cases/useOrderingHandoffStore";
+import { usePRDetail } from "@/domains/pr/queries/usePRDetail";
+import { useUpdatePRStatus } from "@/domains/pr/queries/usePRActions";
 
 type OrderingOfferDetail = OrderingEntryPayload["offerDetail"];
-type OrderingDialogKind = "blocked";
+type OrderingDialogKind =
+  | "info"
+  | "blocked-pr-not-ready"
+  | "confirm-mark-pr-ready";
 type OrderingDialogState = {
   open: boolean;
   kind: OrderingDialogKind;
@@ -144,8 +149,11 @@ const { orderingEntry } = storeToRefs(orderingHandoff);
 const missingInput = computed(() => orderingEntry.value === null);
 
 const createOrderMutation = useCreateOrder();
+const updatePrStatusMutation = useUpdatePRStatus();
 
 const ordering = computed(() => orderingEntry.value?.offerDetail ?? null);
+const orderingPrId = computed(() => orderingEntry.value?.prId ?? null);
+const orderingPrDetailQuery = usePRDetail(orderingPrId);
 const rentalOrdering = computed<OrderingOfferDetail | null>(() =>
   ordering.value?.productType === "RENTAL" ? ordering.value : null,
 );
@@ -162,7 +170,7 @@ const listingRefreshKey = ref(0);
 const priceDetailOpen = ref(false);
 const orderingDialog = ref<OrderingDialogState>({
   open: false,
-  kind: "blocked",
+  kind: "info",
   title: "",
   description: "",
   confirmText: "我知道了",
@@ -215,6 +223,17 @@ const priceDisplayLabel = computed(() => {
 const backFallbackTo = computed(() =>
   orderingEntry.value?.prId ? { path: `/pr/${orderingEntry.value.prId}` } : { path: "/" },
 );
+const orderingViewerIsCreator = computed(
+  () => orderingPrDetailQuery.data.value?.partnerSection.viewer.isCreator === true,
+);
+const canOfferPrReadyRecovery = computed(
+  () => orderingPrId.value !== null && orderingViewerIsCreator.value,
+);
+const orderingDialogConfirmLoading = computed(() =>
+  orderingDialog.value.kind === "confirm-mark-pr-ready"
+    ? updatePrStatusMutation.isPending.value
+    : createOrderMutation.isPending.value,
+);
 
 const formatYuan = (amountFen: number): string => (amountFen / 100).toFixed(2);
 
@@ -226,7 +245,7 @@ const formatPriceAmount = (amountFen: number | null | undefined): string =>
 const openBlockedDialog = (problem: Partial<OrderingActionProblem>): void => {
   orderingDialog.value = {
     open: true,
-    kind: "blocked",
+    kind: "info",
     title: problem.title ?? "暂不能创建订单",
     description: problem.detail ?? "请稍后重试。",
     confirmText: "我知道了",
@@ -234,6 +253,43 @@ const openBlockedDialog = (problem: Partial<OrderingActionProblem>): void => {
   };
 };
 
+const openPrNotReadyRecoveryDialog = (problem: Partial<OrderingActionProblem>): void => {
+  orderingDialog.value = {
+    open: true,
+    kind: "blocked-pr-not-ready",
+    title: problem.title ?? "暂不能创建订单",
+    description: problem.detail ?? "创建订单需要搭子请求「已成团」",
+    confirmText: "切换到已成团",
+    showCancel: true,
+  };
+};
+
+const openPrReadyConfirmationDialog = (): void => {
+  orderingDialog.value = {
+    open: true,
+    kind: "confirm-mark-pr-ready",
+    title: "确认标记为已成团？",
+    description: "将当前搭子请求切换到「已成团」，此状态下不可以加入/退出。确认后请重新点击下单。",
+    confirmText: "确认成团",
+    showCancel: true,
+  };
+};
+
+const openInfoDialog = (input: {
+  title: string;
+  description: string;
+  confirmText?: string;
+}): void => {
+  orderingDialog.value = {
+    open: true,
+    kind: "info",
+    title: input.title,
+    description: input.description,
+    confirmText: input.confirmText ?? "我知道了",
+    showCancel: false,
+  };
+};
+
 const closeOrderingDialog = (): void => {
   orderingDialog.value = {
     ...orderingDialog.value,
@@ -263,6 +319,13 @@ const createOrderFromQuoteDraft = async (input: CreateOrderInput): Promise<void>
       });
       return;
     }
+    if (apiError.code === "PR_NOT_READY" && canOfferPrReadyRecovery.value) {
+      openPrNotReadyRecoveryDialog({
+        title: "暂不能创建订单",
+        detail: apiError.message ?? "订单创建需要 PR 处于 READY 状态。",
+      });
+      return;
+    }
     openBlockedDialog({
       title: "暂不能创建订单",
       detail: error instanceof Error ? error.message : "请稍后重试。",
@@ -278,6 +341,7 @@ watch(
     priceDetailOpen.value = false;
     closeOrderingDialog();
     createOrderMutation.reset();
+    updatePrStatusMutation.reset();
   },
 );
 
@@ -298,7 +362,51 @@ const submitOrder = async (): Promise<void> => {
   await createOrderFromQuoteDraft(input);
 };
 
+const markCurrentPrReady = async (): Promise<void> => {
+  const prId = orderingPrId.value;
+  if (prId === null) {
+    closeOrderingDialog();
+    openInfoDialog({
+      title: "无法修改成团状态",
+      description: "当前订单入口没有关联 PR。",
+    });
+    return;
+  }
+
+  try {
+    await updatePrStatusMutation.mutateAsync({
+      id: prId,
+      status: "READY",
+    });
+    closeOrderingDialog();
+    await nextTick();
+    openInfoDialog({
+      title: "已成团",
+      description: "PR 已标记为已成团，请重新点击下单。",
+    });
+  } catch (error) {
+    closeOrderingDialog();
+    await nextTick();
+    openInfoDialog({
+      title: "无法修改成团状态",
+      description: error instanceof Error ? error.message : "请稍后重试。",
+    });
+  }
+};
+
 const handleOrderingDialogConfirm = async (): Promise<void> => {
+  if (orderingDialog.value.kind === "blocked-pr-not-ready") {
+    closeOrderingDialog();
+    await nextTick();
+    openPrReadyConfirmationDialog();
+    return;
+  }
+
+  if (orderingDialog.value.kind === "confirm-mark-pr-ready") {
+    await markCurrentPrReady();
+    return;
+  }
+
   closeOrderingDialog();
 };
 </script>
diff --git a/tasks/ride-hailing-ui-fixes/change-log.md b/tasks/ride-hailing-ui-fixes/change-log.md
index f9d818bb6..b58a85c74 100644
--- a/tasks/ride-hailing-ui-fixes/change-log.md
+++ b/tasks/ride-hailing-ui-fixes/change-log.md
@@ -7,6 +7,30 @@ Archived full history:
 
 - `archive/change-log-ordering-through-order-detail-map.md`
 
+## Current Slice: Terminal Polling Stop + PR-Ready Recovery CTA
+
+- Requested slice:
+  - stop polling terminal RideHailing orders
+  - add a PR-ready recovery path when create-order is blocked by `PR_NOT_READY`
+- Implementation result:
+  - removed the extra page-local RideHailing order-detail polling timer from
+    `CommerceOrderDetailPage.vue`
+  - kept polling ownership solely inside `useCommerceOrderDetail()`
+  - extended `OrderingPage.vue` dialog orchestration so `PR_NOT_READY` can
+    branch into:
+    - `去成团`
+    - close original dialog
+    - second confirmation
+    - `useUpdatePRStatus()` mutation
+    - explicit user retry from the same Ordering page
+  - kept the recovery UI in `OrderingPage.vue` instead of promoting dialog
+    ownership into `OrderingPageShell.vue`
+  - added a Rental system scenario covering the new recovery flow end-to-end
+- Verification result:
+  - frontend typecheck passed
+  - Rental ordering system scenario file passed
+  - RideHailing ordering system scenario file passed
+
 ## Current Slice: RideHailing Cancel + Departure-Time Short-Circuit
 
 - Requested slice:
diff --git a/tasks/ride-hailing-ui-fixes/control.md b/tasks/ride-hailing-ui-fixes/control.md
index 25188a8d7..c42c7ed73 100644
--- a/tasks/ride-hailing-ui-fixes/control.md
+++ b/tasks/ride-hailing-ui-fixes/control.md
@@ -20,8 +20,8 @@ Hypothesis:
 
 - Primary route: `Reality`
 - Active mode: `Explore`; RideHailing cancellation + departure-time
-  short-circuit is now completed and verified, and the packet is ready for the
-  next slice
+  short-circuit and the follow-up polling / PR-ready recovery slice are now
+  completed and verified, and the packet is ready for the next slice
 - Current collaboration state: choice-set backend/domain foundation, Ordering
   UI primitive/control, SKU Card layout remediation, Offer Listing / quote
   identity, Ordering entry decoupling, durable docs promotion, and fake provider
@@ -61,6 +61,17 @@ Hypothesis:
       transport during `DISPATCHING`
     - RideHailing Ordering now short-circuits departure-time UX to fixed
       `现在出发`
+  - the next requested slice:
+    - terminal RideHailing orders such as `CANCELLED` / `FINISHED` should stop
+      frontend order-detail polling
+    - when create-order is blocked by `PR_NOT_READY`, the ordering blocked
+      dialog should offer a fast path to mark the PR `READY` after a second
+      confirmation and then retry from the same Ordering flow
+  - the latest completed slice:
+    - `CommerceOrderDetailPage.vue` no longer adds bill-existence-based
+      RideHailing polling on top of `useCommerceOrderDetail()`
+    - `OrderingPage.vue` now turns `PR_NOT_READY` into a two-step recovery
+      dialog backed by `useUpdatePRStatus()`
 
 ## Inherited Effective Truth
 
@@ -151,8 +162,23 @@ Hypothesis:
   - Offer Listing currently always sees `departureAt = null`
   - backend `departureAt` contract is intentionally preserved for later
     restoration
-- Standalone planning artifact for the new slice:
-  `tasks/ride-hailing-ui-fixes/ride-hailing-cancel-and-departure-short-circuit-plan.md`
+- Current polling truth for RideHailing Order Detail is split:
+  - `useCommerceOrderDetail()` now remains the only RideHailing order-detail
+    polling owner
+  - terminal phases such as `CANCELLED` and `FINISHED` no longer keep polling
+    through page-local timers
+- Current create-order blocked-dialog truth:
+  - backend `create-order` already returns business problem code
+    `PR_NOT_READY` with detail `订单创建需要 PR 处于 READY 状态。`
+  - the recovery dialog is owned by `OrderingPage.vue`, not by the structural
+    `OrderingPageShell.vue`
+  - frontend now uses `useUpdatePRStatus()` for the creator-owned fast path to
+    `READY`
+- Standalone planning artifacts:
+  - completed previous slice:
+    `tasks/ride-hailing-ui-fixes/ride-hailing-cancel-and-departure-short-circuit-plan.md`
+  - completed current slice:
+  `tasks/ride-hailing-ui-fixes/order-detail-terminal-polling-and-pr-ready-recovery-plan.md`
 - RideHailing order-detail back navigation currently uses generic
   `useFallbackBack` and therefore returns to the immediate previous page when a
   router back entry exists; for the standard PR -> Ordering -> Order Detail
diff --git a/tasks/ride-hailing-ui-fixes/discussion-log.md b/tasks/ride-hailing-ui-fixes/discussion-log.md
index cbeca79d8..3dddc2d2b 100644
--- a/tasks/ride-hailing-ui-fixes/discussion-log.md
+++ b/tasks/ride-hailing-ui-fixes/discussion-log.md
@@ -7,6 +7,35 @@ Archived full history:
 
 - `archive/discussion-log-ordering-through-order-detail-map.md`
 
+## Current Segment: Terminal Polling Stop + PR-Ready Recovery CTA
+
+- Requested slice:
+  - stop polling terminal RideHailing orders such as `CANCELLED` / `FINISHED`
+  - when create-order is blocked by `PR_NOT_READY`, the blocked dialog should
+    offer a fast path to mark the PR `READY` after a second confirmation
+- Implementation result:
+  - removed the page-local RideHailing `ridePollingTimer` from
+    `CommerceOrderDetailPage.vue`, so terminal orders no longer keep refetching
+    on bill-existence heuristics
+  - kept polling ownership solely inside `useCommerceOrderDetail()`
+  - kept dialog ownership in `OrderingPage.vue` rather than promoting it into
+    `OrderingPageShell.vue`
+  - added a `PR_NOT_READY` recovery dialog flow:
+    - blocked dialog shows `去成团` for creator-owned PR ordering
+    - confirming closes the original dialog first
+    - a second confirmation dialog asks whether to mark the PR `READY`
+    - success keeps the user in Ordering and asks them to click create-order
+      again explicitly
+  - recovery path reuses existing frontend `useUpdatePRStatus()` transport
+- Verification result:
+  - `pnpm check:type:frontend`
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/rental-ordering.scenario.test.ts`
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+- Opened slice artifact:
+  - `order-detail-terminal-polling-and-pr-ready-recovery-plan.md`
+- Next step:
+  - packet is ready for the next ride-hailing / ordering slice by your direction
+
 ## Current Segment: RideHailing Cancel + Departure-Time Short-Circuit
 
 - Requested slice:
diff --git a/tasks/ride-hailing-ui-fixes/order-detail-terminal-polling-and-pr-ready-recovery-plan.md b/tasks/ride-hailing-ui-fixes/order-detail-terminal-polling-and-pr-ready-recovery-plan.md
new file mode 100644
index 000000000..cfb22e8b2
--- /dev/null
+++ b/tasks/ride-hailing-ui-fixes/order-detail-terminal-polling-and-pr-ready-recovery-plan.md
@@ -0,0 +1,79 @@
+# Terminal Polling Stop And PR-Ready Recovery Plan
+
+## Objective
+
+- stop unnecessary RideHailing order-detail polling after terminal order states
+- add a creator-oriented recovery path when create-order is blocked by
+  `PR_NOT_READY`
+
+## Classification
+
+- Primary route: `Reality`
+- Active mode: `Explore`
+
+## Confirmed Truth
+
+- `useCommerceOrderDetail()` already has the right high-level polling boundary:
+  only active RideHailing execution phases should poll
+- `CommerceOrderDetailPage.vue` still adds a second RideHailing-only refetch
+  timer that is bill-existence-based instead of phase-based
+- `OrderingPage.vue` already maps business failures into a blocked dialog
+- backend `create-order` already returns `PR_NOT_READY`
+- frontend already has `useUpdatePRStatus()` and does not need a new PR-status
+  transport for this slice
+
+## Address And Object
+
+- polling behavior:
+  - `apps/frontend/src/domains/commerce/queries/useCommerce.ts`
+  - `apps/frontend/src/pages/CommerceOrderDetailPage.vue`
+- create-order recovery dialog:
+  - `apps/frontend/src/pages/OrderingPage.vue`
+  - `apps/frontend/src/domains/commerce/ui/ordering/OrderingPageShell.vue`
+    if shared-shell promotion proves justified
+- verification:
+  - `apps/frontend/src/domains/commerce/queries/useCommerce.test.ts`
+  - relevant ordering / ride-hailing scenario coverage under
+    `tests/scenario/commerce/`
+
+## State Diff
+
+- From:
+  - terminal RideHailing orders may still refetch because page-local polling is
+    keyed to bill existence
+  - `PR_NOT_READY` only shows a passive blocked dialog
+- To:
+  - terminal RideHailing orders stop polling
+  - creators blocked by `PR_NOT_READY` can choose a dialog path to mark the PR
+    `READY` after explicit confirmation, then remain in Ordering
+
+## Verification
+
+- no further polling requests after RideHailing terminal order states
+- `PR_NOT_READY` dialog exposes the recovery action only when it is actually
+  admissible
+- successful PR status update keeps the user in Ordering and closes the
+  confirmation flow cleanly
+
+## Implementation Result
+
+- `CommerceOrderDetailPage.vue` no longer adds a page-local RideHailing polling
+  timer; `useCommerceOrderDetail()` remains the only polling owner
+- `OrderingPage.vue` now distinguishes generic info dialogs from:
+  - recoverable `PR_NOT_READY` blocked dialogs
+  - second-step PR-ready confirmation dialogs
+- the PR-ready recovery path reuses `usePRDetail()` for creator gating and
+  `useUpdatePRStatus()` for the mutation
+- after successful PR status update, the flow stays in Ordering and asks the
+  user to re-click create-order explicitly
+- `OrderingPageShell.vue` stays structural-only in this slice
+
+## Verification Result
+
+- `pnpm check:type:frontend`
+- `pnpm exec vitest run --project system-scenario tests/scenario/commerce/rental-ordering.scenario.test.ts`
+- `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+
+## Segment Status
+
+- completed and verified
diff --git a/tests/scenario/commerce/rental-ordering.scenario.test.ts b/tests/scenario/commerce/rental-ordering.scenario.test.ts
index fb3055967..00b9a0e2d 100644
--- a/tests/scenario/commerce/rental-ordering.scenario.test.ts
+++ b/tests/scenario/commerce/rental-ordering.scenario.test.ts
@@ -504,6 +504,70 @@ scenario("commerce_rental_ordering_blocks_non_ready_pr", async (ctx) => {
   });
 });
 
+scenario("commerce_rental_ordering_recovers_non_ready_pr_by_marking_ready", async (ctx) => {
+  const creator = await givenUser("system-commerce-non-ready-recovery-creator");
+  const joiner = await givenUser("system-commerce-non-ready-recovery-joiner");
+  const pr = await givenCommerceRentalPr({
+    creator,
+    minPartners: 2,
+    maxPartners: null,
+    title: "System commerce non ready recovery rental PR",
+  });
+  await addJoinedParticipant({ pr, user: joiner });
+  const placement = await givenRentalOrderingPlacement();
+
+  ctx.record("prId", pr.id);
+  ctx.record("placementId", placement.id);
+
+  await withScenarioPage(async (page) => {
+    await installScenarioUserSession(page, creator);
+    await installDeterministicShareSidecarStubs(page);
+
+    await page.goto(`/pr/${pr.id}`);
+    await page.getByTestId("pr-detail.commerce-placement.open").click();
+    await page.getByTestId("ordering.rental.page").waitFor({
+      state: "visible",
+      timeout: 10_000,
+    });
+    await fillRentalOrderingRequiredFields(page);
+    await waitForRentalQuoteReady(page);
+    await page.getByTestId("ordering.rental.create-order").click();
+    await assertOrderingBlockedDialog({
+      page,
+      expectedDetail: "订单创建需要 PR 处于 READY 状态",
+    });
+
+    await page.getByRole("button", { name: "去成团" }).click();
+    const confirmDialog = page.getByRole("dialog", { name: "确认标记为已成团？" });
+    await confirmDialog.waitFor({
+      state: "visible",
+      timeout: 10_000,
+    });
+    await confirmDialog.getByText("这会立即将当前 PR 标记为已成团。确认后请重新点击下单。").waitFor({
+      state: "visible",
+      timeout: 10_000,
+    });
+    await confirmDialog.getByRole("button", { name: "确认成团" }).click();
+
+    const successDialog = page.getByRole("dialog", { name: "已成团" });
+    await successDialog.waitFor({
+      state: "visible",
+      timeout: 10_000,
+    });
+    await successDialog.getByText("PR 已标记为已成团，请重新点击下单。").waitFor({
+      state: "visible",
+      timeout: 10_000,
+    });
+    await successDialog.getByRole("button", { name: "我知道了" }).click();
+
+    await page.getByTestId("ordering.rental.create-order").click();
+    await assertRentalOrderDetail({
+      page,
+      expectedItemName: "烘焙区 A · 2人 · 2小时",
+    });
+  });
+});
+
 scenario("commerce_rental_ordering_blocks_non_creator", async (ctx) => {
   const creator = await givenUser("system-commerce-non-creator-creator");
   const joiner = await givenUser("system-commerce-non-creator-joiner");

From b4ae8c3c7c16a3b3ab691d83b4ce6ec545df0c59 Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Sun, 28 Jun 2026 21:26:00 +0800
Subject: [PATCH 51/94] fix(frontend): refresh partner discovery copy
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- replace anchor-event discovery CTA copy with "找其它搭子" across frontend locales\n- remove the redundant discoverOthers locale key and reuse the existing otherEvents action copy\n- record scope and verification in the task packet
---
 .../surfaces/AnchorEventListModeSurface.vue   |  2 +-
 apps/frontend/src/locales/schema.ts           |  1 -
 apps/frontend/src/locales/zh-CN.jsonc         |  9 +++---
 .../00-task-packet.md                         | 29 +++++++++++++++++++
 4 files changed, 34 insertions(+), 7 deletions(-)
 create mode 100644 tasks/find-other-partners-copy-refresh/00-task-packet.md

diff --git a/apps/frontend/src/domains/event/ui/surfaces/AnchorEventListModeSurface.vue b/apps/frontend/src/domains/event/ui/surfaces/AnchorEventListModeSurface.vue
index 8e820d7f8..ec843bb70 100644
--- a/apps/frontend/src/domains/event/ui/surfaces/AnchorEventListModeSurface.vue
+++ b/apps/frontend/src/domains/event/ui/surfaces/AnchorEventListModeSurface.vue
@@ -77,7 +77,7 @@
               :to="{ name: 'event-plaza' }"
               class="state-action-link"
             >
-              {{ t("anchorEvent.discoverOthers") }}
+              {{ t("anchorEvent.otherEvents.action") }}
             </router-link>
           </template>
         </PuEmptyState>
diff --git a/apps/frontend/src/locales/schema.ts b/apps/frontend/src/locales/schema.ts
index 094817c6b..477d2926e 100644
--- a/apps/frontend/src/locales/schema.ts
+++ b/apps/frontend/src/locales/schema.ts
@@ -772,7 +772,6 @@ export interface MessageSchema {
       locationPlaceholder: string;
       otherEventsLoadFailed: string;
     };
-    discoverOthers: string;
     createCard: {
       title: string;
       titleWhenNoAvailablePR: string;
diff --git a/apps/frontend/src/locales/zh-CN.jsonc b/apps/frontend/src/locales/zh-CN.jsonc
index 7b6532e74..c72953f31 100644
--- a/apps/frontend/src/locales/zh-CN.jsonc
+++ b/apps/frontend/src/locales/zh-CN.jsonc
@@ -1956,8 +1956,8 @@
       "qrMissing": "该活动暂未配置搭子群二维码。"
     },
     "otherEvents": {
-      "title": "看看其它活动",
-      "action": "看看其它活动"
+      "title": "找其它搭子",
+      "action": "找其它搭子"
     },
     "landing": {
       "eyebrow": "Landing Entry",
@@ -2019,7 +2019,7 @@
       "candidateListEyebrow": "候选列表",
       "candidateListTitle": "我们没有找到符合条件的场次，下面是候选场次",
       "noCandidateTitle": "暂时没有符合条件的场次",
-      "noCandidateBody": "可以调整条件继续查找，或看看其它活动。",
+      "noCandidateBody": "可以调整条件继续查找，或找其它搭子。",
       "createFallbackAction": "都不合适，帮我找",
       "recommendationFailed": "获取推荐失败，请稍后重试。",
       "recommendationCardHeadline": "{time} · {location}",
@@ -2027,9 +2027,8 @@
       "partnerCountWithoutMax": "当前 {current} 人",
       "timePlaceholder": "请选择开始时间",
       "locationPlaceholder": "请选择地点",
-      "otherEventsLoadFailed": "加载其它活动失败，请稍后再试。"
+      "otherEventsLoadFailed": "加载找其它搭子入口失败，请稍后再试。"
     },
-    "discoverOthers": "看看其它活动",
     "createCard": {
       "title": "都不合适？",
       "titleWhenNoAvailablePR": "想自己发一个？",
diff --git a/tasks/find-other-partners-copy-refresh/00-task-packet.md b/tasks/find-other-partners-copy-refresh/00-task-packet.md
new file mode 100644
index 000000000..c350a6a1a
--- /dev/null
+++ b/tasks/find-other-partners-copy-refresh/00-task-packet.md
@@ -0,0 +1,29 @@
+# Task Packet - Find Other Partners Copy Refresh
+
+## MVT Core
+
+- Objective & Hypothesis: Replace frontend user-facing copy such as `看看其它活动` with `找其它搭子` where the product intent is partner discovery rather than literal event catalog wording. Hypothesis: the primary mutation is frontend locale copy plus a narrow set of naming cleanups around CTA-oriented keys and local variables, while event-catalog owner names should remain event-shaped unless the product truth itself changes.
+- Guardrails Touched:
+  - docs/10-prd workflow truth that the secondary browsing path is currently other active Anchor Events
+  - frontend naming clarity so internal names continue to match the actual queried data shape
+  - locale/schema consistency between `zh-CN.jsonc`, schema typing, and consuming Vue surfaces
+- Verification:
+  - passed targeted frontend search proving no stale `看看其它活动` / `discoverOthers` remains in frontend source
+  - passed `pnpm --filter @partner-up-dev/frontend build`
+
+## Current Understanding
+
+- The current CTA copy is concentrated under `anchorEvent.otherEvents.*` and `anchorEvent.discoverOthers`.
+- The main consuming surfaces are Anchor Event landing, Anchor Event list mode, and PR detail's Event Plaza entry.
+- The actual queried data is still `Anchor Event` catalog data from `useAnchorEvents()`, not partner-request lists.
+- The approved execution scope is to refresh partner-discovery phrasing while preserving event-shaped internal owners.
+
+## Confirmed Constraints
+
+- User-facing Chinese copy should move toward `找其它搭子`.
+- Exploration and task-packet work are allowed before explicit start.
+- Product-code mutation requires explicit user start.
+
+## Next Step
+
+- Done. Keep only literal event semantics such as other-event reminder/admin copy, and remove stale CTA wording from partner-discovery surfaces.

From ab991b99017924c4061b75c76b4c1a3709601b37 Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Sun, 28 Jun 2026 23:16:13 +0800
Subject: [PATCH 52/94] feat(ride-hailing): route caocao callbacks by token

- add signed callback_info routing token to CaoCao order creation

- resolve fixed callback provider instance from callback_info with legacy fallback

- update fake CaoCao callbacks and coverage for routing token behavior
---
 .../services/caocao-provider.test.ts          | 21 +++++
 .../ride-hailing/services/caocao-provider.ts  | 61 +++++++++++++++
 .../handle-caocao-order-status-callback.ts    | 77 +++++++++++++++++--
 .../domains/trade/use-cases/create-order.ts   |  2 +
 .../caocao-callback-route.scenario.test.ts    | 42 +++++++++-
 packages/fake-caocao-server/src/routes.ts     | 27 ++++++-
 .../fake-caocao-server/src/server.test.ts     | 49 ++++++++++++
 packages/fake-caocao-server/src/state.ts      |  3 +
 .../caocao-callback-routing/00-task-packet.md | 58 ++++++++++++++
 9 files changed, 329 insertions(+), 11 deletions(-)
 create mode 100644 tasks/caocao-callback-routing/00-task-packet.md

diff --git a/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts b/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
index 7aa687179..c01edca26 100644
--- a/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
+++ b/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
@@ -4,11 +4,13 @@ import type {
   RideHailingProviderInstanceId,
 } from "../../../entities/ride-hailing-provider";
 import {
+  buildCaocaoCallbackInfo,
   buildCaocaoSignedParams,
   CaocaoProviderAdapter,
   createCaocaoSignature,
   decodeCaocaoExternalOrderId,
   encodeCaocaoExternalOrderId,
+  parseCaocaoCallbackInfo,
   parseRideHailingProviderRegistrationConfig,
   resolveCaocaoOrderStatusCallbackUrl,
 } from ".";
@@ -144,12 +146,30 @@ describe("Caocao external order id", () => {
 });
 
 describe("Caocao callback verification", () => {
+  it("builds and parses callback_info routing tokens", () => {
+    const callbackInfo = buildCaocaoCallbackInfo({
+      providerInstance: caocaoProviderInstance(),
+      routingToken: "stg",
+    });
+
+    expect(callbackInfo).toBe("pu.rhc.v1.stg.00000000-0000-0000-0000-000000000501");
+    expect(parseCaocaoCallbackInfo(callbackInfo)).toEqual({
+      providerInstanceId,
+      routingToken: "stg",
+    });
+    expect(parseCaocaoCallbackInfo("pu.rhc.v1.prod.not-a-uuid")).toBeNull();
+  });
+
   it("verifies callback signature and resolves local order id", () => {
     const adapter = new CaocaoProviderAdapter({
       providerInstance: caocaoProviderInstance(),
     });
     const unsigned = {
       timestamp: "1700000000000",
+      callback_info: buildCaocaoCallbackInfo({
+        providerInstance: caocaoProviderInstance(),
+        routingToken: "stg",
+      }),
       order_id: "CC123456",
       ext_order_id: adapter.buildExternalOrderId(orderId),
       event: "20",
@@ -169,6 +189,7 @@ describe("Caocao callback verification", () => {
     expect(parsed.localOrderId).toBe(orderId);
     expect(parsed.event).toBe(20);
     expect(parsed.timestampMs).toBe(1700000000000);
+    expect(parsed.raw.callback_info).toBe("pu.rhc.v1.stg.00000000-0000-0000-0000-000000000501");
   });
 
   it("rejects callbacks with invalid signatures or unsupported events", () => {
diff --git a/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts b/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
index 8c7a44b5f..67e443f57 100644
--- a/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
+++ b/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
@@ -25,11 +25,21 @@ type CaocaoParamInput = Record<string, CaocaoParamValue>;
 
 const EXTERNAL_ORDER_ID_PREFIX = "rh";
 const UUID_BASE36_ALPHABET = /^[0-9a-z]+$/;
+const CAOCAO_CALLBACK_INFO_PREFIX = "pu.rhc.v1";
+const CAOCAO_CALLBACK_INFO_PROVIDER_INSTANCE_ID =
+  /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
 const CAOCAO_ORDER_STATUS_CALLBACK_EVENTS: ReadonlySet<number> = new Set([
   1, 2, 3, 4, 5, 6, 9, 11, 12, 13, 14, 20, 21, 22, 23, 24, 25, 26, 27, 40, 41, 42, 43, 44, 45, 46,
   47, 48, 49, 50,
 ]);
 
+export type CaocaoCallbackRoutingToken = "dev" | "prod" | "stg";
+
+export type CaocaoCallbackInfoRoute = {
+  providerInstanceId: string;
+  routingToken: CaocaoCallbackRoutingToken;
+};
+
 const isRecord = (value: unknown): value is Record<string, unknown> =>
   typeof value === "object" && value !== null && !Array.isArray(value);
 
@@ -324,6 +334,57 @@ export function buildCaocaoSignedParams(input: {
   };
 }
 
+export function resolveCurrentCaocaoCallbackRoutingToken(): CaocaoCallbackRoutingToken {
+  if (process.env.PARTNERUP_ENVIRONMENT === "production") return "prod";
+  if (process.env.PARTNERUP_ENVIRONMENT === "staging") return "stg";
+  return "dev";
+}
+
+export function buildCaocaoCallbackInfo(input: {
+  providerInstance: RideHailingProviderInstance;
+  routingToken?: CaocaoCallbackRoutingToken;
+}): string {
+  if (input.providerInstance.providerType !== "CAOCAO") {
+    throw new Error("Caocao callback_info requires a CAOCAO provider instance");
+  }
+
+  return [
+    CAOCAO_CALLBACK_INFO_PREFIX,
+    input.routingToken ?? resolveCurrentCaocaoCallbackRoutingToken(),
+    input.providerInstance.id,
+  ].join(".");
+}
+
+export function parseCaocaoCallbackInfo(
+  value: string | null | undefined,
+): CaocaoCallbackInfoRoute | null {
+  const normalized = value?.trim() ?? "";
+  if (normalized.length === 0) return null;
+
+  const parts = normalized.split(".");
+  if (parts.length !== 5) return null;
+  const [prefixNamespace, prefixDomain, prefixVersion, routingToken, providerInstanceId] = parts;
+  if (
+    `${prefixNamespace}.${prefixDomain}.${prefixVersion}` !== CAOCAO_CALLBACK_INFO_PREFIX ||
+    (routingToken !== "dev" && routingToken !== "prod" && routingToken !== "stg") ||
+    !providerInstanceId ||
+    !CAOCAO_CALLBACK_INFO_PROVIDER_INSTANCE_ID.test(providerInstanceId)
+  ) {
+    return null;
+  }
+
+  return {
+    providerInstanceId,
+    routingToken,
+  };
+}
+
+export function caocaoCallbackRoutingTokenMatchesCurrent(
+  routingToken: CaocaoCallbackRoutingToken,
+): boolean {
+  return routingToken === resolveCurrentCaocaoCallbackRoutingToken();
+}
+
 export const serializeCaocaoFormBody = (params: CaocaoSignedParams): URLSearchParams => {
   const body = new URLSearchParams();
   for (const [key, value] of Object.entries(params)) {
diff --git a/apps/backend/src/domains/ride-hailing/use-cases/handle-caocao-order-status-callback.ts b/apps/backend/src/domains/ride-hailing/use-cases/handle-caocao-order-status-callback.ts
index 9988ad2cb..268cec75f 100644
--- a/apps/backend/src/domains/ride-hailing/use-cases/handle-caocao-order-status-callback.ts
+++ b/apps/backend/src/domains/ride-hailing/use-cases/handle-caocao-order-status-callback.ts
@@ -12,7 +12,11 @@ import { RideHailingOrderRepository } from "../../../repositories/RideHailingOrd
 import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository";
 import type { TradeOrderId } from "../../../entities/trade-order";
 import type { UserId } from "../../../entities/user";
-import { createRideHailingProviderPort } from "../services";
+import {
+  caocaoCallbackRoutingTokenMatchesCurrent,
+  createRideHailingProviderPort,
+  parseCaocaoCallbackInfo,
+} from "../services";
 import type { CaocaoOrderStatusCallback } from "../model/provider";
 import { getRideHailingChoiceSetItem, getRideHailingProviderBinding } from "../../trade/services";
 import type { RideHailingExecutionPhase } from "../../trade/model";
@@ -21,6 +25,11 @@ const providerRepo = new RideHailingProviderInstanceRepository();
 const rideOrderRepo = new RideHailingOrderRepository();
 const tradeOrderRepo = new TradeOrderRepository();
 
+export type CaocaoOrderStatusCallbackAck = {
+  code: 200;
+  success: true;
+};
+
 const readString = (value: Record<string, string>, keys: string[]): string | null => {
   for (const key of keys) {
     const candidate = value[key];
@@ -128,10 +137,62 @@ async function loadFirstActiveCaocaoProviderInstance(): Promise<RideHailingProvi
   return providerInstance;
 }
 
+const readCallbackInfoRoute = (form: Record<string, string>) => {
+  const callbackInfo = readString(form, ["callback_info", "callbackInfo"]);
+  if (!callbackInfo) return null;
+  const route = parseCaocaoCallbackInfo(callbackInfo);
+  if (!route) {
+    return throwHttpProblem({
+      status: 400,
+      detail: "Caocao callback_info is invalid",
+    });
+  }
+  return route;
+};
+
+async function loadCaocaoProviderInstanceFromCallbackInfo(
+  form: Record<string, string>,
+): Promise<RideHailingProviderInstance | null> {
+  const route = readCallbackInfoRoute(form);
+  if (!route) return null;
+  if (!caocaoCallbackRoutingTokenMatchesCurrent(route.routingToken)) {
+    return throwHttpProblem({
+      status: 404,
+      detail: "Caocao callback_info does not belong to this backend environment",
+    });
+  }
+  return loadActiveCaocaoProviderInstance(route.providerInstanceId);
+}
+
+const assertCallbackInfoMatchesProviderInstance = (input: {
+  form: Record<string, string>;
+  providerInstance: RideHailingProviderInstance;
+}): void => {
+  const route = readCallbackInfoRoute(input.form);
+  if (!route) return;
+  if (!caocaoCallbackRoutingTokenMatchesCurrent(route.routingToken)) {
+    return throwHttpProblem({
+      status: 404,
+      detail: "Caocao callback_info does not belong to this backend environment",
+    });
+  }
+  if (route.providerInstanceId !== input.providerInstance.id) {
+    return throwHttpProblem({
+      status: 409,
+      detail: "Caocao callback_info provider instance does not match callback route",
+    });
+  }
+};
+
 async function applyCaocaoCallbackWithProviderInstance(input: {
   providerInstance: RideHailingProviderInstance;
   form: Record<string, string>;
-}): Promise<{ code: "SUCCESS"; message: string }> {
+}): Promise<CaocaoOrderStatusCallbackAck> {
+  assertCallbackInfoMatchesProviderInstance({
+    form: input.form,
+    providerInstance: input.providerInstance,
+  });
+
   const port = createRideHailingProviderPort({
     providerInstance: input.providerInstance,
   });
@@ -221,15 +282,15 @@ async function applyCaocaoCallbackWithProviderInstance(input: {
   }
 
   return {
-    code: "SUCCESS",
-    message: "成功",
+    code: 200,
+    success: true,
   };
 }
 
 export async function handleCaocaoOrderStatusCallback(input: {
   providerInstanceId: string;
   form: Record<string, string>;
-}): Promise<{ code: "SUCCESS"; message: string }> {
+}): Promise<CaocaoOrderStatusCallbackAck> {
   return applyCaocaoCallbackWithProviderInstance({
     providerInstance: await loadActiveCaocaoProviderInstance(input.providerInstanceId),
     form: input.form,
@@ -238,9 +299,11 @@ export async function handleCaocaoOrderStatusCallback(input: {
 
 export async function handleLegacyCaocaoOrderStatusCallback(input: {
   form: Record<string, string>;
-}): Promise<{ code: "SUCCESS"; message: string }> {
+}): Promise<CaocaoOrderStatusCallbackAck> {
   return applyCaocaoCallbackWithProviderInstance({
-    providerInstance: await loadFirstActiveCaocaoProviderInstance(),
+    providerInstance:
+      (await loadCaocaoProviderInstanceFromCallbackInfo(input.form)) ??
+      (await loadFirstActiveCaocaoProviderInstance()),
     form: input.form,
   });
 }
diff --git a/apps/backend/src/domains/trade/use-cases/create-order.ts b/apps/backend/src/domains/trade/use-cases/create-order.ts
index 044881e1b..ee5ccab3c 100644
--- a/apps/backend/src/domains/trade/use-cases/create-order.ts
+++ b/apps/backend/src/domains/trade/use-cases/create-order.ts
@@ -32,6 +32,7 @@ import {
   type RideHailingSkuFacts,
 } from "../../merchandising";
 import {
+  buildCaocaoCallbackInfo,
   createRideHailingProviderPort,
   resolveCaocaoOrderStatusCallbackUrl,
 } from "../../ride-hailing";
@@ -862,6 +863,7 @@ async function createRideHailingOrderBranch(input: {
         created = await port.createRide({
           orderId: base.order.id,
           params: {
+            callback_info: buildCaocaoCallbackInfo({ providerInstance: provider }),
             callback_url: resolveCaocaoOrderStatusCallbackUrl(provider),
             car_type: input.selected.dispatchCandidate.fulfillmentQuote.providerVehicleTypeCode,
             price_token: input.selected.dispatchCandidate.fulfillmentQuote.providerQuoteId,
diff --git a/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts b/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts
index 328115aba..e2a420820 100644
--- a/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts
+++ b/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts
@@ -9,7 +9,11 @@ import { RideHailingOrderRepository } from "../../src/repositories/RideHailingOr
 import { TradeOrderRepository } from "../../src/repositories/TradeOrderRepository";
 import { BillLineRepository } from "../../src/repositories/BillLineRepository";
 import { BillRepository } from "../../src/repositories/BillRepository";
-import { createCaocaoSignature, encodeCaocaoExternalOrderId } from "../../src/domains/ride-hailing";
+import {
+  buildCaocaoCallbackInfo,
+  createCaocaoSignature,
+  encodeCaocaoExternalOrderId,
+} from "../../src/domains/ride-hailing";
 import type { TradeOrderId } from "../../src/entities/trade-order";
 
 const providerRepo = new RideHailingProviderInstanceRepository();
@@ -24,9 +28,11 @@ const buildCallbackForm = (input: {
   providerOrderId?: string;
   event?: string;
   finalAmountFen?: string;
+  callbackInfo?: string;
 }): URLSearchParams => {
   const unsigned = {
     timestamp: "1700000000000",
+    ...(input.callbackInfo ? { callback_info: input.callbackInfo } : {}),
     order_id: input.providerOrderId ?? "CC123456",
     ext_order_id: encodeCaocaoExternalOrderId(
       input.orderId ?? "123e4567-e89b-12d3-a456-426614174000",
@@ -64,7 +70,7 @@ scenario("legacy Caocao callback alias resolves provider and requires local orde
     createdAt: new Date("2020-01-01T00:00:00.000Z"),
     updatedAt: new Date("2020-01-01T00:00:00.000Z"),
   });
-  await providerRepo.create({
+  const secondProvider = await providerRepo.create({
     providerType: "CAOCAO",
     instanceKey: "scenario-caocao-second",
     status: "ACTIVE",
@@ -107,6 +113,26 @@ scenario("legacy Caocao callback alias resolves provider and requires local orde
   );
 
   assert.equal(wrongInstanceResponse.status, 400);
+
+  const secondViaCallbackInfoResponse = await requestJson(
+    "/api/v1/service_provider/caocao/callback/order",
+    {
+      method: "POST",
+      headers: {
+        "content-type": "application/x-www-form-urlencoded",
+      },
+      body: buildCallbackForm({
+        callbackInfo: buildCaocaoCallbackInfo({
+          providerInstance: secondProvider,
+          routingToken: "stg",
+        }),
+        signKey: "scenario-caocao-secret-second",
+        providerOrderId: "CC654321",
+      }).toString(),
+    },
+  );
+
+  assert.equal(secondViaCallbackInfoResponse.status, 404);
 });
 
 scenario("Caocao callback updates ride execution and creates final bill", async () => {
@@ -302,6 +328,10 @@ scenario("Caocao callback updates ride execution and creates final bill", async
         "content-type": "application/x-www-form-urlencoded",
       },
       body: buildCallbackForm({
+        callbackInfo: buildCaocaoCallbackInfo({
+          providerInstance: provider,
+          routingToken: "stg",
+        }),
         signKey: "scenario-caocao-callback-secret",
         orderId: order.id,
         providerOrderId: "CC-FINAL-123",
@@ -312,6 +342,14 @@ scenario("Caocao callback updates ride execution and creates final bill", async
   );
 
   assert.equal(response.status, 200);
+  const responseBody = (await response.json()) as {
+    code: number;
+    success: boolean;
+  };
+  assert.deepEqual(responseBody, {
+    code: 200,
+    success: true,
+  });
   const updatedOrder = await tradeOrderRepo.findById(order.id);
   assert.equal(updatedOrder?.status, "OPEN");
   const updatedRide = await rideOrderRepo.findByOrderId(order.id as TradeOrderId);
diff --git a/packages/fake-caocao-server/src/routes.ts b/packages/fake-caocao-server/src/routes.ts
index 9868e0415..f6adef0bc 100644
--- a/packages/fake-caocao-server/src/routes.ts
+++ b/packages/fake-caocao-server/src/routes.ts
@@ -583,6 +583,7 @@ const orderDetailPayload = (order: FakeCaocaoOrderState): unknown => {
         }
       : null,
     event: phaseEvent(order.phase),
+    ...(order.callbackInfo ? { callback_info: order.callbackInfo } : {}),
     ext_order_id: order.externalOrderId,
     finalAmountFen: order.phase === "FINISHED" ? order.finalAmountFen : null,
     orderFeeVO: {
@@ -616,6 +617,7 @@ const buildCallbackForm = (input: {
       : null;
   const unsigned: FakeCaocaoSignedParams = {
     event: String(input.event),
+    ...(input.order.callbackInfo ? { callback_info: input.order.callbackInfo } : {}),
     ext_order_id: input.order.externalOrderId,
     order_id: input.order.providerOrderId,
     timestamp: String(Date.now()),
@@ -689,6 +691,23 @@ const readResponseBodyPreview = async (response: Response): Promise<string | nul
   return trimmed.length > 500 ? `${trimmed.slice(0, 500)}...` : trimmed;
 };
 
+const isSuccessfulCallbackAck = (bodyPreview: string | null): boolean => {
+  if (!bodyPreview) return false;
+  try {
+    const parsed = JSON.parse(bodyPreview) as unknown;
+    return (
+      typeof parsed === "object" &&
+      parsed !== null &&
+      "code" in parsed &&
+      "success" in parsed &&
+      (parsed as { code: unknown }).code === 200 &&
+      (parsed as { success: unknown }).success === true
+    );
+  } catch {
+    return false;
+  }
+};
+
 const postCallback = async (input: {
   callbackUrl: string;
   fixture: FakeCaocaoFixture;
@@ -704,7 +723,7 @@ const postCallback = async (input: {
       method: "POST",
     });
     const bodyPreview = await readResponseBodyPreview(response);
-    if (response.ok) {
+    if (response.ok && isSuccessfulCallbackAck(bodyPreview)) {
       return {
         bodyPreview,
         callbackUrl: input.callbackUrl,
@@ -717,7 +736,9 @@ const postCallback = async (input: {
     return {
       bodyPreview,
       callbackUrl: input.callbackUrl,
-      message: `Fake Caocao callback POST failed with HTTP ${response.status}`,
+      message: response.ok
+        ? "Fake Caocao callback response did not acknowledge success"
+        : `Fake Caocao callback POST failed with HTTP ${response.status}`,
       ok: false,
       skipped: false,
       status: response.status,
@@ -1009,7 +1030,9 @@ export async function handleFakeCaocaoRequest(
         "notifyUrl",
         "order_status_callback_url",
       ]);
+      const callbackInfo = readFirstParam(params, ["callback_info", "callbackInfo"]);
       const order = input.state.createOrder({
+        callbackInfo,
         callbackUrl,
         carType,
         destination: readOptionalCoordinateParam(params, {
diff --git a/packages/fake-caocao-server/src/server.test.ts b/packages/fake-caocao-server/src/server.test.ts
index 032841f0d..218fcb482 100644
--- a/packages/fake-caocao-server/src/server.test.ts
+++ b/packages/fake-caocao-server/src/server.test.ts
@@ -144,6 +144,7 @@ describe("startFakeCaocaoServer", () => {
       body: signedSearchParams({
         clientId: server.fixture.clientId,
         params: {
+          callback_info: "pu.rhc.v1.stg.00000000-0000-0000-0000-000000000501",
           car_type: "PREMIER",
           ext_order_id: "external-order-1",
           timestamp: "2",
@@ -164,6 +165,9 @@ describe("startFakeCaocaoServer", () => {
     expect(createResponse.ok).toBe(true);
     expect(createBody.success).toBe(true);
     expect(createBody.data.orderNo).toBe("CCexternalorder1");
+    expect(server.state.findOrder(createBody.data.orderNo)?.callbackInfo).toBe(
+      "pu.rhc.v1.stg.00000000-0000-0000-0000-000000000501",
+    );
 
     const detailResponse = await fetch(
       `${server.origin}/common/queryOrderDetailV2?${signedSearchParams({
@@ -615,6 +619,51 @@ describe("startFakeCaocaoServer", () => {
     }
   });
 
+  test("posts callback_info during successful callback delivery", async () => {
+    server = await startFakeCaocaoServer();
+    const callbackServer = await startCallbackResponseServer({
+      body: JSON.stringify({ code: 200, success: true }),
+      status: 200,
+    });
+
+    try {
+      const callbackInfo = "pu.rhc.v1.stg.00000000-0000-0000-0000-000000000501";
+      const created = server.state.createOrder({
+        callbackInfo,
+        callbackUrl: `${callbackServer.origin}/callback`,
+        carType: "EXPRESS",
+        externalOrderId: "external-order-callback-success",
+      });
+
+      const advanceResponse = await fetch(
+        `${server.origin}/__fake_caocao/orders/${created.providerOrderId}/advance`,
+        { method: "POST" },
+      );
+      const advanceBody = (await advanceResponse.json()) as {
+        callback: {
+          callbackUrl: string;
+          ok: boolean;
+          status: number | null;
+        };
+        ok: boolean;
+        order: { phase: string; providerOrderId: string };
+      };
+
+      expect(advanceResponse.ok).toBe(true);
+      expect(advanceBody.ok).toBe(true);
+      expect(advanceBody.callback.ok).toBe(true);
+      expect(advanceBody.callback.callbackUrl).toBe(`${callbackServer.origin}/callback`);
+      expect(advanceBody.callback.status).toBe(200);
+      expect(advanceBody.order.providerOrderId).toBe(created.providerOrderId);
+      expect(advanceBody.order.phase).toBe("ACCEPTED");
+      expect(new URLSearchParams(callbackServer.receivedBodies[0]).get("callback_info")).toBe(
+        callbackInfo,
+      );
+    } finally {
+      await callbackServer.close();
+    }
+  });
+
   test("supports admin estimate controls", async () => {
     server = await startFakeCaocaoServer();
 
diff --git a/packages/fake-caocao-server/src/state.ts b/packages/fake-caocao-server/src/state.ts
index 97f7808f3..fd12ad2f9 100644
--- a/packages/fake-caocao-server/src/state.ts
+++ b/packages/fake-caocao-server/src/state.ts
@@ -37,6 +37,7 @@ export type FakeCaocaoOrderState = {
   providerOrderId: string;
   externalOrderId: string;
   callbackUrl: string | null;
+  callbackInfo: string | null;
   carType: string;
   phase: FakeCaocaoOrderPhase;
   origin: FakeCaocaoCoordinate;
@@ -224,6 +225,7 @@ export class FakeCaocaoState {
   createOrder(input: {
     externalOrderId: string;
     carType: string;
+    callbackInfo?: string | null;
     callbackUrl?: string | null;
     origin?: FakeCaocaoCoordinate | null;
     destination?: FakeCaocaoCoordinate | null;
@@ -237,6 +239,7 @@ export class FakeCaocaoState {
     const timestamp = nowIso();
     const order: FakeCaocaoOrderState = {
       cancelFeeFen: 0,
+      callbackInfo: input.callbackInfo ?? null,
       callbackUrl: input.callbackUrl ?? null,
       carType: estimate.carType,
       createdAt: timestamp,
diff --git a/tasks/caocao-callback-routing/00-task-packet.md b/tasks/caocao-callback-routing/00-task-packet.md
new file mode 100644
index 000000000..3c9a77851
--- /dev/null
+++ b/tasks/caocao-callback-routing/00-task-packet.md
@@ -0,0 +1,58 @@
+# CaoCao Callback Routing
+
+## Objective & Hypothesis
+
+- Objective: design a temporary-to-durable routing scheme so one CaoCao callback URL can safely dispatch callbacks to preview or production while CaoCao URL changes are delayed.
+- Hypothesis: nginx should route by a stable discriminator present in signed CaoCao callback input or by an edge-owned tokenized path; backend should remain the authority for business idempotency and order-state mutation.
+
+## Guardrails Touched
+
+- RideHailing provider callback authenticity and idempotency.
+- Production / preview environment isolation.
+- Deployment edge routing and rollback.
+
+## Verification
+
+- Confirm CaoCao callback payload and signature shape from local API/mock material.
+- Confirm current provider instance config, callback URL construction, and callback route.
+- Confirm deployment edge capabilities and whether nginx can read the required request attribute without breaking signature validation.
+
+## Current Understanding
+
+- Input type: Constraint. Product behavior stays the same; external callback address cannot change quickly.
+- Active mode: Execute.
+- Durable owner spans deployment docs and backend RideHailing provider contract; mutation proceeded after explicit user confirmation.
+- Current backend has a provider-instance callback route:
+  `POST /api/ride-hailing/caocao/:providerInstanceId/callback/order-status`.
+- Current backend also keeps a legacy alias:
+  `POST /api/v1/service_provider/caocao/callback/order`; it resolves the first active CaoCao provider instance and should not be used as the primary multi-environment topology.
+- CaoCao callback signature covers all received form fields except `sign`; nginx must not mutate callback body or add body fields.
+- Current repo create-order sends `callback_url` to `orderCarV2`; the callback URL is derived from the provider instance `callbackBaseUrl` and includes the concrete provider instance id.
+- Current public CaoCao docs for `orderCarV2` do not list `callback_url`; they list fixed callback delivery to the address supplied by the integrator and support `callback_info` as status-notification pass-through.
+- Callback body fields confirmed by implementation / fake provider: `order_id`, `ext_order_id`, `event`, `timestamp`, `sign`, plus optional driver, vehicle, and final amount fields.
+- `ext_order_id` is `rh` + base36-compressed local order UUID. It maps to the local order, not directly to an environment unless order id ranges or an external registry are introduced.
+
+## Open Questions
+
+- Which exact callback URL is already registered at CaoCao.
+- Whether preview and production use distinct CaoCao client/account identifiers.
+
+## Implemented Direction
+
+- Prefer edge routing by signed/pass-through `callback_info` when the CaoCao-registered callback address cannot change.
+- Encode a short route token in `callback_info`: `pu.rhc.v1.<routing-token>.<providerInstanceId>`.
+- Supported routing tokens: `stg`, `prod`, `dev`.
+- nginx/OpenResty reads but does not mutate the form body, then proxies the original request to staging or production.
+- The backend legacy fixed callback route can now load the concrete provider instance from valid `callback_info`; absent `callback_info` still falls back to the historical first-active CaoCao provider instance for compatibility.
+- Backend remains the final safety gate by verifying signature against that environment's provider instance and checking `ext_order_id` plus `providerBinding.providerInstanceId/providerOrderId`.
+
+## Verification Results
+
+- `pnpm --filter @partner-up-dev/fake-caocao-server test` passed.
+- `pnpm exec vitest run apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts --config vitest.backend.config.ts --project backend-unit` passed.
+- `pnpm exec vitest run apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts --config vitest.backend.config.ts --project backend-scenario` passed.
+- `pnpm check:type:backend` passed.
+- `pnpm --filter @partner-up-dev/fake-caocao-server typecheck` passed.
+- `pnpm exec biome lint <changed CaoCao/backend/fake files>` passed.
+- `pnpm exec vitest run tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts --project system-scenario` passed.
+- A broad `pnpm test:scenario:backend -- ...` attempt did not filter to the intended file and ran 25 backend scenario files; it failed in unrelated `admin_payment_provider_instance_rejects_duplicate_active_client`.

From 0eb873812a67713d074d8513231f620e3872c3f3 Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Sun, 28 Jun 2026 23:16:54 +0800
Subject: [PATCH 53/94] feat(backend): add caocao callback router

- add backend-owned localhost router for CaoCao callback environment dispatch

- build router as a separate backend tsup entry with runtime scripts

- document nginx and systemd deployment templates for staging cutover
---
 .../caocao-callback-router.location.conf      |   8 +
 .../caocao-callback-router.service.example    |  25 +
 apps/backend/package.json                     |   4 +-
 .../infra/edge/caocao-callback-router.test.ts | 285 ++++++++++
 .../src/infra/edge/caocao-callback-router.ts  | 499 ++++++++++++++++++
 .../ride-hailing/caocao-callback-router.ts    |  54 ++
 apps/backend/tsup.config.ts                   |   5 +-
 docs/40-deployment/environments.md            |  62 +++
 .../caocao-callback-router/00-task-packet.md  | 141 +++++
 9 files changed, 1081 insertions(+), 2 deletions(-)
 create mode 100644 apps/backend/deploy/nginx/caocao-callback-router.location.conf
 create mode 100644 apps/backend/deploy/systemd/caocao-callback-router.service.example
 create mode 100644 apps/backend/src/infra/edge/caocao-callback-router.test.ts
 create mode 100644 apps/backend/src/infra/edge/caocao-callback-router.ts
 create mode 100644 apps/backend/src/scripts/ride-hailing/caocao-callback-router.ts
 create mode 100644 tasks/caocao-callback-router/00-task-packet.md

diff --git a/apps/backend/deploy/nginx/caocao-callback-router.location.conf b/apps/backend/deploy/nginx/caocao-callback-router.location.conf
new file mode 100644
index 000000000..5eb0f37cc
--- /dev/null
+++ b/apps/backend/deploy/nginx/caocao-callback-router.location.conf
@@ -0,0 +1,8 @@
+# Include this inside the public ride-hailing server block before the generic
+# `location /api/v1` block.
+location = /api/v1/service_provider/caocao/callback/order {
+    client_max_body_size 16k;
+    proxy_pass http://127.0.0.1:6080;
+    proxy_set_header Host $host;
+    include nginxconfig.io/proxy.conf;
+}
diff --git a/apps/backend/deploy/systemd/caocao-callback-router.service.example b/apps/backend/deploy/systemd/caocao-callback-router.service.example
new file mode 100644
index 000000000..d06c65939
--- /dev/null
+++ b/apps/backend/deploy/systemd/caocao-callback-router.service.example
@@ -0,0 +1,25 @@
+[Unit]
+Description=PartnerUp CaoCao callback router
+Wants=network-online.target
+After=network-online.target
+
+[Service]
+Type=simple
+WorkingDirectory=/opt/partner-up/backend
+Environment=NODE_ENV=production
+Environment=CAOCAO_CALLBACK_ROUTER_HOST=127.0.0.1
+Environment=CAOCAO_CALLBACK_ROUTER_PORT=6080
+Environment=CAOCAO_CALLBACK_ROUTER_CALLBACK_PATH=/api/v1/service_provider/caocao/callback/order
+Environment=CAOCAO_CALLBACK_ROUTER_STAGING_ORIGIN=https://test.app-api.partner-up.cn
+Environment=CAOCAO_CALLBACK_ROUTER_PRODUCTION_ORIGIN=https://app-api.partner-up.cn
+Environment=CAOCAO_CALLBACK_ROUTER_MAX_BODY_BYTES=16384
+Environment=CAOCAO_CALLBACK_ROUTER_UPSTREAM_TIMEOUT_MS=15000
+ExecStart=/usr/bin/node dist/caocao-callback-router.js
+Restart=on-failure
+RestartSec=3
+NoNewPrivileges=true
+PrivateTmp=true
+ProtectSystem=full
+
+[Install]
+WantedBy=multi-user.target
diff --git a/apps/backend/package.json b/apps/backend/package.json
index c9b83ad42..e895aff15 100644
--- a/apps/backend/package.json
+++ b/apps/backend/package.json
@@ -28,7 +28,9 @@
     "db:next-migration": "tsx src/scripts/db/next-migration.ts",
     "db:studio": "drizzle-kit studio",
     "payment:register-provider": "tsx src/scripts/payment/register-provider.ts",
-    "ride-hailing:register-provider": "tsx src/scripts/ride-hailing/register-provider.ts"
+    "ride-hailing:register-provider": "tsx src/scripts/ride-hailing/register-provider.ts",
+    "ride-hailing:caocao-callback-router": "tsx src/scripts/ride-hailing/caocao-callback-router.ts",
+    "start:caocao-callback-router": "node dist/caocao-callback-router.js"
   },
   "dependencies": {
     "@ai-sdk/openai": "^1.0.0",
diff --git a/apps/backend/src/infra/edge/caocao-callback-router.test.ts b/apps/backend/src/infra/edge/caocao-callback-router.test.ts
new file mode 100644
index 000000000..028ecd88a
--- /dev/null
+++ b/apps/backend/src/infra/edge/caocao-callback-router.test.ts
@@ -0,0 +1,285 @@
+import assert from "node:assert/strict";
+import { once } from "node:events";
+import {
+  createServer,
+  type IncomingHttpHeaders,
+  type IncomingMessage,
+  type Server,
+} from "node:http";
+import type { AddressInfo } from "node:net";
+import { afterEach, test } from "vitest";
+import {
+  createCaocaoCallbackRouterServer,
+  resolveCaocaoCallbackRouterDecision,
+  type CaocaoCallbackRouterLogEvent,
+} from "./caocao-callback-router";
+
+type CapturedRequest = {
+  body: Buffer;
+  headers: IncomingHttpHeaders;
+  method: string;
+  url: string;
+};
+
+type TestServer = {
+  origin: string;
+  server: Server;
+};
+
+const activeServers: Server[] = [];
+
+const readBody = async (request: IncomingMessage): Promise<Buffer> =>
+  new Promise((resolve, reject) => {
+    const chunks: Buffer[] = [];
+    let totalBytes = 0;
+
+    request.on("data", (chunk: Buffer | string) => {
+      const buffer = Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk);
+      totalBytes += buffer.length;
+      chunks.push(buffer);
+    });
+
+    request.on("end", () => resolve(Buffer.concat(chunks, totalBytes)));
+    request.on("error", reject);
+  });
+
+const closeServer = async (server: Server): Promise<void> =>
+  new Promise((resolve, reject) => {
+    server.close((error) => {
+      if (error) {
+        reject(error);
+        return;
+      }
+      resolve();
+    });
+  });
+
+const listen = async (server: Server): Promise<TestServer> => {
+  server.listen(0, "127.0.0.1");
+  await once(server, "listening");
+  activeServers.push(server);
+  const address = server.address() as AddressInfo;
+  return {
+    origin: `http://127.0.0.1:${address.port}`,
+    server,
+  };
+};
+
+const createUpstream = async (
+  name: string,
+): Promise<TestServer & { requests: CapturedRequest[] }> => {
+  const requests: CapturedRequest[] = [];
+  const server = createServer(async (request, response) => {
+    requests.push({
+      body: await readBody(request),
+      headers: request.headers,
+      method: request.method ?? "",
+      url: request.url ?? "",
+    });
+    const payload = Buffer.from(JSON.stringify({ upstream: name }));
+    response.writeHead(202, {
+      "content-length": String(payload.length),
+      "content-type": "application/json; charset=utf-8",
+    });
+    response.end(payload);
+  });
+  return {
+    ...(await listen(server)),
+    requests,
+  };
+};
+
+const createRouter = async (input: {
+  logs?: CaocaoCallbackRouterLogEvent[];
+  maxBodyBytes?: number;
+  productionOrigin: string;
+  stagingOrigin: string;
+}): Promise<TestServer> =>
+  listen(
+    createCaocaoCallbackRouterServer({
+      logger: (event) => input.logs?.push(event),
+      maxBodyBytes: input.maxBodyBytes,
+      productionOrigin: input.productionOrigin,
+      stagingOrigin: input.stagingOrigin,
+    }),
+  );
+
+afterEach(async () => {
+  const servers = activeServers.splice(0);
+  await Promise.all(servers.map((server) => closeServer(server)));
+});
+
+test("resolveCaocaoCallbackRouterDecision maps callback_info tokens", () => {
+  assert.deepEqual(
+    resolveCaocaoCallbackRouterDecision(
+      Buffer.from("callback_info=pu.rhc.v1.stg.provider-1&sign=s"),
+    ),
+    {
+      reason: "stg-token",
+      targetEnvironment: "staging",
+    },
+  );
+  assert.deepEqual(
+    resolveCaocaoCallbackRouterDecision(
+      Buffer.from("callback_info=pu.rhc.v1.prod.provider-1&sign=s"),
+    ),
+    {
+      reason: "prod-token",
+      targetEnvironment: "production",
+    },
+  );
+  assert.deepEqual(resolveCaocaoCallbackRouterDecision(Buffer.from("sign=s")), {
+    reason: "missing-callback-info",
+    targetEnvironment: "production",
+  });
+  assert.deepEqual(
+    resolveCaocaoCallbackRouterDecision(Buffer.from("callback_info=pu.rhc.v1.dev.provider-1")),
+    {
+      reason: "invalid-callback-info",
+      targetEnvironment: null,
+    },
+  );
+});
+
+test("router forwards stg callback_info requests to the staging origin with raw body", async () => {
+  const staging = await createUpstream("staging");
+  const production = await createUpstream("production");
+  const logs: CaocaoCallbackRouterLogEvent[] = [];
+  const router = await createRouter({
+    logs,
+    productionOrigin: production.origin,
+    stagingOrigin: staging.origin,
+  });
+  const rawBody = Buffer.from(
+    "order_id=caocao-1&callback_info=pu.rhc.v1.stg.provider%2Bencoded&sign=abc",
+  );
+
+  const response = await fetch(
+    `${router.origin}/api/v1/service_provider/caocao/callback/order?from=caocao`,
+    {
+      body: rawBody,
+      headers: {
+        "content-type": "application/x-www-form-urlencoded",
+        "x-request-id": "stg-request",
+      },
+      method: "POST",
+    },
+  );
+
+  assert.equal(response.status, 202);
+  assert.deepEqual(await response.json(), { upstream: "staging" });
+  assert.equal(staging.requests.length, 1);
+  assert.equal(production.requests.length, 0);
+  assert.equal(
+    staging.requests[0].url,
+    "/api/v1/service_provider/caocao/callback/order?from=caocao",
+  );
+  assert.equal(staging.requests[0].method, "POST");
+  assert.deepEqual(staging.requests[0].body, rawBody);
+  assert.equal(staging.requests[0].headers["content-type"], "application/x-www-form-urlencoded");
+  assert.equal(logs.at(-1)?.targetEnvironment, "staging");
+  assert.equal(logs.at(-1)?.routingReason, "stg-token");
+});
+
+test("router forwards prod and missing callback_info requests to production", async () => {
+  const staging = await createUpstream("staging");
+  const production = await createUpstream("production");
+  const router = await createRouter({
+    productionOrigin: production.origin,
+    stagingOrigin: staging.origin,
+  });
+
+  const prodResponse = await fetch(
+    `${router.origin}/api/v1/service_provider/caocao/callback/order`,
+    {
+      body: "callback_info=pu.rhc.v1.prod.provider-1&sign=s",
+      headers: {
+        "content-type": "application/x-www-form-urlencoded",
+      },
+      method: "POST",
+    },
+  );
+  const missingResponse = await fetch(
+    `${router.origin}/api/v1/service_provider/caocao/callback/order`,
+    {
+      body: "order_id=legacy&sign=s",
+      headers: {
+        "content-type": "application/x-www-form-urlencoded",
+      },
+      method: "POST",
+    },
+  );
+
+  assert.equal(prodResponse.status, 202);
+  assert.equal(missingResponse.status, 202);
+  assert.equal(production.requests.length, 2);
+  assert.equal(staging.requests.length, 0);
+});
+
+test("router rejects present but invalid or duplicated callback_info values", async () => {
+  const staging = await createUpstream("staging");
+  const production = await createUpstream("production");
+  const router = await createRouter({
+    productionOrigin: production.origin,
+    stagingOrigin: staging.origin,
+  });
+
+  const invalidResponse = await fetch(
+    `${router.origin}/api/v1/service_provider/caocao/callback/order`,
+    {
+      body: "callback_info=unknown&sign=s",
+      headers: {
+        "content-type": "application/x-www-form-urlencoded",
+      },
+      method: "POST",
+    },
+  );
+  const duplicateResponse = await fetch(
+    `${router.origin}/api/v1/service_provider/caocao/callback/order`,
+    {
+      body: "callback_info=pu.rhc.v1.stg.one&callback_info=pu.rhc.v1.prod.two&sign=s",
+      headers: {
+        "content-type": "application/x-www-form-urlencoded",
+      },
+      method: "POST",
+    },
+  );
+
+  assert.equal(invalidResponse.status, 400);
+  assert.equal(duplicateResponse.status, 400);
+  assert.equal(staging.requests.length, 0);
+  assert.equal(production.requests.length, 0);
+});
+
+test("router applies method, path, and body size guards", async () => {
+  const staging = await createUpstream("staging");
+  const production = await createUpstream("production");
+  const router = await createRouter({
+    maxBodyBytes: 8,
+    productionOrigin: production.origin,
+    stagingOrigin: staging.origin,
+  });
+
+  const wrongMethodResponse = await fetch(
+    `${router.origin}/api/v1/service_provider/caocao/callback/order`,
+  );
+  const wrongPathResponse = await fetch(`${router.origin}/healthz`, {
+    method: "POST",
+  });
+  const largeBodyResponse = await fetch(
+    `${router.origin}/api/v1/service_provider/caocao/callback/order`,
+    {
+      body: "callback_info=pu.rhc.v1.stg.provider-1",
+      headers: {
+        "content-type": "application/x-www-form-urlencoded",
+      },
+      method: "POST",
+    },
+  );
+
+  assert.equal(wrongMethodResponse.status, 405);
+  assert.equal(wrongPathResponse.status, 404);
+  assert.equal(largeBodyResponse.status, 413);
+  assert.equal(staging.requests.length, 0);
+  assert.equal(production.requests.length, 0);
+});
diff --git a/apps/backend/src/infra/edge/caocao-callback-router.ts b/apps/backend/src/infra/edge/caocao-callback-router.ts
new file mode 100644
index 000000000..a8e293682
--- /dev/null
+++ b/apps/backend/src/infra/edge/caocao-callback-router.ts
@@ -0,0 +1,499 @@
+import {
+  createServer,
+  type IncomingHttpHeaders,
+  type IncomingMessage,
+  type Server,
+  type ServerResponse,
+} from "node:http";
+import { URL } from "node:url";
+
+export const CAOCAO_CALLBACK_ROUTER_DEFAULT_CALLBACK_PATH =
+  "/api/v1/service_provider/caocao/callback/order";
+export const CAOCAO_CALLBACK_ROUTER_DEFAULT_HOST = "127.0.0.1";
+export const CAOCAO_CALLBACK_ROUTER_DEFAULT_PORT = 6080;
+export const CAOCAO_CALLBACK_ROUTER_DEFAULT_MAX_BODY_BYTES = 16 * 1024;
+export const CAOCAO_CALLBACK_ROUTER_DEFAULT_UPSTREAM_TIMEOUT_MS = 15_000;
+export const CAOCAO_CALLBACK_ROUTER_DEFAULT_STAGING_ORIGIN = "https://test.app-api.partner-up.cn";
+export const CAOCAO_CALLBACK_ROUTER_DEFAULT_PRODUCTION_ORIGIN = "https://app-api.partner-up.cn";
+
+export type CaocaoCallbackRouterTargetEnvironment = "production" | "staging";
+
+export type CaocaoCallbackRouterDecision =
+  | {
+      targetEnvironment: "production";
+      reason: "missing-callback-info" | "prod-token";
+    }
+  | {
+      targetEnvironment: "staging";
+      reason: "stg-token";
+    }
+  | {
+      targetEnvironment: null;
+      reason: "duplicate-callback-info" | "invalid-callback-info";
+    };
+
+export type CaocaoCallbackRouterLogEvent = {
+  event: "caocao_callback_router_request";
+  method: string;
+  path: string;
+  requestId: string | null;
+  routingReason:
+    | CaocaoCallbackRouterDecision["reason"]
+    | "body-too-large"
+    | "method-not-allowed"
+    | "not-found"
+    | "upstream-error"
+    | "upstream-timeout";
+  targetEnvironment: CaocaoCallbackRouterTargetEnvironment | null;
+  upstreamStatus: number | null;
+  responseStatus: number;
+  durationMs: number;
+};
+
+export type CaocaoCallbackRouterLogger = (event: CaocaoCallbackRouterLogEvent) => void;
+
+export type CaocaoCallbackRouterConfig = {
+  callbackPath: string;
+  host: string;
+  port: number;
+  maxBodyBytes: number;
+  upstreamTimeoutMs: number;
+  stagingOrigin: URL;
+  productionOrigin: URL;
+  logger: CaocaoCallbackRouterLogger;
+};
+
+type CreateCaocaoCallbackRouterInput = Partial<
+  Omit<CaocaoCallbackRouterConfig, "stagingOrigin" | "productionOrigin">
+> & {
+  stagingOrigin?: URL | string;
+  productionOrigin?: URL | string;
+};
+
+class CaocaoCallbackRouterHttpError extends Error {
+  constructor(
+    readonly status: number,
+    message: string,
+  ) {
+    super(message);
+  }
+}
+
+const isHttpOrigin = (url: URL): boolean => url.protocol === "http:" || url.protocol === "https:";
+
+const parseOrigin = (value: string | URL, name: string): URL => {
+  const url = value instanceof URL ? value : new URL(value);
+  if (!isHttpOrigin(url)) {
+    throw new Error(`${name} must use http or https`);
+  }
+  url.pathname = "";
+  url.search = "";
+  url.hash = "";
+  return url;
+};
+
+const parsePositiveInteger = (
+  value: string | undefined,
+  fallback: number,
+  name: string,
+): number => {
+  if (value === undefined || value.trim().length === 0) return fallback;
+  const parsed = Number(value);
+  if (!Number.isInteger(parsed) || parsed <= 0) {
+    throw new Error(`${name} must be a positive integer`);
+  }
+  return parsed;
+};
+
+const defaultLogger: CaocaoCallbackRouterLogger = (event) => {
+  console.info(JSON.stringify(event));
+};
+
+export function createCaocaoCallbackRouterConfig(
+  input: CreateCaocaoCallbackRouterInput = {},
+): CaocaoCallbackRouterConfig {
+  return {
+    callbackPath: input.callbackPath ?? CAOCAO_CALLBACK_ROUTER_DEFAULT_CALLBACK_PATH,
+    host: input.host ?? CAOCAO_CALLBACK_ROUTER_DEFAULT_HOST,
+    port: input.port ?? CAOCAO_CALLBACK_ROUTER_DEFAULT_PORT,
+    maxBodyBytes: input.maxBodyBytes ?? CAOCAO_CALLBACK_ROUTER_DEFAULT_MAX_BODY_BYTES,
+    upstreamTimeoutMs:
+      input.upstreamTimeoutMs ?? CAOCAO_CALLBACK_ROUTER_DEFAULT_UPSTREAM_TIMEOUT_MS,
+    stagingOrigin: parseOrigin(
+      input.stagingOrigin ?? CAOCAO_CALLBACK_ROUTER_DEFAULT_STAGING_ORIGIN,
+      "stagingOrigin",
+    ),
+    productionOrigin: parseOrigin(
+      input.productionOrigin ?? CAOCAO_CALLBACK_ROUTER_DEFAULT_PRODUCTION_ORIGIN,
+      "productionOrigin",
+    ),
+    logger: input.logger ?? defaultLogger,
+  };
+}
+
+export function createCaocaoCallbackRouterConfigFromEnv(
+  env: NodeJS.ProcessEnv,
+): CaocaoCallbackRouterConfig {
+  return createCaocaoCallbackRouterConfig({
+    callbackPath:
+      env.CAOCAO_CALLBACK_ROUTER_CALLBACK_PATH ?? CAOCAO_CALLBACK_ROUTER_DEFAULT_CALLBACK_PATH,
+    host: env.CAOCAO_CALLBACK_ROUTER_HOST ?? CAOCAO_CALLBACK_ROUTER_DEFAULT_HOST,
+    port: parsePositiveInteger(
+      env.CAOCAO_CALLBACK_ROUTER_PORT,
+      CAOCAO_CALLBACK_ROUTER_DEFAULT_PORT,
+      "CAOCAO_CALLBACK_ROUTER_PORT",
+    ),
+    maxBodyBytes: parsePositiveInteger(
+      env.CAOCAO_CALLBACK_ROUTER_MAX_BODY_BYTES,
+      CAOCAO_CALLBACK_ROUTER_DEFAULT_MAX_BODY_BYTES,
+      "CAOCAO_CALLBACK_ROUTER_MAX_BODY_BYTES",
+    ),
+    upstreamTimeoutMs: parsePositiveInteger(
+      env.CAOCAO_CALLBACK_ROUTER_UPSTREAM_TIMEOUT_MS,
+      CAOCAO_CALLBACK_ROUTER_DEFAULT_UPSTREAM_TIMEOUT_MS,
+      "CAOCAO_CALLBACK_ROUTER_UPSTREAM_TIMEOUT_MS",
+    ),
+    stagingOrigin:
+      env.CAOCAO_CALLBACK_ROUTER_STAGING_ORIGIN ?? CAOCAO_CALLBACK_ROUTER_DEFAULT_STAGING_ORIGIN,
+    productionOrigin:
+      env.CAOCAO_CALLBACK_ROUTER_PRODUCTION_ORIGIN ??
+      CAOCAO_CALLBACK_ROUTER_DEFAULT_PRODUCTION_ORIGIN,
+  });
+}
+
+export function resolveCaocaoCallbackRouterDecision(rawBody: Buffer): CaocaoCallbackRouterDecision {
+  const params = new URLSearchParams(rawBody.toString("utf8"));
+  const callbackInfoValues = params.getAll("callback_info");
+
+  if (callbackInfoValues.length === 0) {
+    return {
+      targetEnvironment: "production",
+      reason: "missing-callback-info",
+    };
+  }
+
+  if (callbackInfoValues.length > 1) {
+    return {
+      targetEnvironment: null,
+      reason: "duplicate-callback-info",
+    };
+  }
+
+  const callbackInfo = callbackInfoValues[0];
+  if (callbackInfo.startsWith("pu.rhc.v1.stg.")) {
+    return {
+      targetEnvironment: "staging",
+      reason: "stg-token",
+    };
+  }
+
+  if (callbackInfo.startsWith("pu.rhc.v1.prod.")) {
+    return {
+      targetEnvironment: "production",
+      reason: "prod-token",
+    };
+  }
+
+  return {
+    targetEnvironment: null,
+    reason: "invalid-callback-info",
+  };
+}
+
+const readRequestBody = async (request: IncomingMessage, maxBodyBytes: number): Promise<Buffer> =>
+  new Promise((resolve, reject) => {
+    const chunks: Buffer[] = [];
+    let totalBytes = 0;
+    let rejected = false;
+
+    request.on("data", (chunk: Buffer | string) => {
+      if (rejected) return;
+
+      const buffer = Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk);
+      totalBytes += buffer.length;
+
+      if (totalBytes > maxBodyBytes) {
+        rejected = true;
+        chunks.length = 0;
+        request.resume();
+        reject(new CaocaoCallbackRouterHttpError(413, "Request body is too large"));
+        return;
+      }
+
+      chunks.push(buffer);
+    });
+
+    request.on("end", () => {
+      if (rejected) return;
+      resolve(Buffer.concat(chunks, totalBytes));
+    });
+
+    request.on("error", (error) => {
+      if (rejected) return;
+      rejected = true;
+      reject(error);
+    });
+  });
+
+const readHeader = (headers: IncomingHttpHeaders, name: string): string | null => {
+  const value = headers[name.toLowerCase()];
+  if (typeof value === "string") return value;
+  if (Array.isArray(value)) return value.join(", ");
+  return null;
+};
+
+const buildForwardHeaders = (headers: IncomingHttpHeaders, bodyLength: number): Headers => {
+  const forwarded = new Headers();
+  const copyHeaderNames = [
+    "content-type",
+    "user-agent",
+    "x-request-id",
+    "x-correlation-id",
+    "x-real-ip",
+    "x-forwarded-for",
+    "x-forwarded-proto",
+    "x-forwarded-host",
+    "x-forwarded-port",
+    "forwarded",
+  ];
+
+  for (const name of copyHeaderNames) {
+    const value = readHeader(headers, name);
+    if (value) forwarded.set(name, value);
+  }
+
+  forwarded.set("content-length", String(bodyLength));
+  return forwarded;
+};
+
+const buildUpstreamUrl = (requestUrl: URL, origin: URL): URL =>
+  new URL(`${requestUrl.pathname}${requestUrl.search}`, origin);
+
+const writeJson = (
+  response: ServerResponse,
+  status: number,
+  body: Record<string, string | number | boolean>,
+): void => {
+  const payload = Buffer.from(JSON.stringify(body));
+  response.writeHead(status, {
+    "content-type": "application/json; charset=utf-8",
+    "content-length": String(payload.length),
+  });
+  response.end(payload);
+};
+
+const writeUpstreamResponse = async (
+  response: ServerResponse,
+  upstreamResponse: Response,
+): Promise<void> => {
+  const payload = Buffer.from(await upstreamResponse.arrayBuffer());
+  const headers: Record<string, string> = {
+    "content-length": String(payload.length),
+  };
+  const contentType = upstreamResponse.headers.get("content-type");
+  if (contentType) headers["content-type"] = contentType;
+
+  response.writeHead(upstreamResponse.status, headers);
+  response.end(payload);
+};
+
+const isAbortError = (error: unknown): boolean =>
+  error instanceof Error && error.name === "AbortError";
+
+const forwardToUpstream = async (input: {
+  body: Buffer;
+  config: CaocaoCallbackRouterConfig;
+  origin: URL;
+  request: IncomingMessage;
+  requestUrl: URL;
+}): Promise<Response> => {
+  const controller = new AbortController();
+  const timeout = setTimeout(() => controller.abort(), input.config.upstreamTimeoutMs);
+  timeout.unref();
+
+  try {
+    return await fetch(buildUpstreamUrl(input.requestUrl, input.origin), {
+      body: input.body,
+      headers: buildForwardHeaders(input.request.headers, input.body.length),
+      method: "POST",
+      redirect: "manual",
+      signal: controller.signal,
+    });
+  } finally {
+    clearTimeout(timeout);
+  }
+};
+
+const getRequestId = (headers: IncomingHttpHeaders): string | null =>
+  readHeader(headers, "x-request-id") ?? readHeader(headers, "x-correlation-id");
+
+const logRequest = (input: {
+  config: CaocaoCallbackRouterConfig;
+  startedAtMs: number;
+  method: string;
+  requestUrl: URL;
+  requestId: string | null;
+  routingReason: CaocaoCallbackRouterLogEvent["routingReason"];
+  targetEnvironment: CaocaoCallbackRouterTargetEnvironment | null;
+  upstreamStatus: number | null;
+  responseStatus: number;
+}): void => {
+  input.config.logger({
+    event: "caocao_callback_router_request",
+    method: input.method,
+    path: input.requestUrl.pathname,
+    requestId: input.requestId,
+    routingReason: input.routingReason,
+    targetEnvironment: input.targetEnvironment,
+    upstreamStatus: input.upstreamStatus,
+    responseStatus: input.responseStatus,
+    durationMs: Date.now() - input.startedAtMs,
+  });
+};
+
+export function createCaocaoCallbackRouterHandler(
+  configInput: CreateCaocaoCallbackRouterInput = {},
+): (request: IncomingMessage, response: ServerResponse) => void {
+  const config = createCaocaoCallbackRouterConfig(configInput);
+
+  return (request, response) => {
+    const startedAtMs = Date.now();
+    const method = request.method ?? "";
+    const requestUrl = new URL(request.url ?? "/", "http://localhost");
+    const requestId = getRequestId(request.headers);
+
+    void (async () => {
+      if (requestUrl.pathname !== config.callbackPath) {
+        writeJson(response, 404, {
+          code: 404,
+          success: false,
+          message: "Not found",
+        });
+        logRequest({
+          config,
+          startedAtMs,
+          method,
+          requestUrl,
+          requestId,
+          routingReason: "not-found",
+          targetEnvironment: null,
+          upstreamStatus: null,
+          responseStatus: 404,
+        });
+        return;
+      }
+
+      if (method !== "POST") {
+        response.setHeader("allow", "POST");
+        writeJson(response, 405, {
+          code: 405,
+          success: false,
+          message: "Method not allowed",
+        });
+        logRequest({
+          config,
+          startedAtMs,
+          method,
+          requestUrl,
+          requestId,
+          routingReason: "method-not-allowed",
+          targetEnvironment: null,
+          upstreamStatus: null,
+          responseStatus: 405,
+        });
+        return;
+      }
+
+      const rawBody = await readRequestBody(request, config.maxBodyBytes);
+      const decision = resolveCaocaoCallbackRouterDecision(rawBody);
+      if (!decision.targetEnvironment) {
+        writeJson(response, 400, {
+          code: 400,
+          success: false,
+          message: "Invalid callback_info",
+        });
+        logRequest({
+          config,
+          startedAtMs,
+          method,
+          requestUrl,
+          requestId,
+          routingReason: decision.reason,
+          targetEnvironment: null,
+          upstreamStatus: null,
+          responseStatus: 400,
+        });
+        return;
+      }
+
+      const origin =
+        decision.targetEnvironment === "staging" ? config.stagingOrigin : config.productionOrigin;
+      const upstreamResponse = await forwardToUpstream({
+        body: rawBody,
+        config,
+        origin,
+        request,
+        requestUrl,
+      });
+      await writeUpstreamResponse(response, upstreamResponse);
+      logRequest({
+        config,
+        startedAtMs,
+        method,
+        requestUrl,
+        requestId,
+        routingReason: decision.reason,
+        targetEnvironment: decision.targetEnvironment,
+        upstreamStatus: upstreamResponse.status,
+        responseStatus: upstreamResponse.status,
+      });
+    })().catch((error: unknown) => {
+      const responseStatus =
+        error instanceof CaocaoCallbackRouterHttpError
+          ? error.status
+          : isAbortError(error)
+            ? 504
+            : 502;
+      const message =
+        error instanceof CaocaoCallbackRouterHttpError
+          ? error.message
+          : isAbortError(error)
+            ? "Upstream request timed out"
+            : "Upstream request failed";
+      const routingReason =
+        error instanceof CaocaoCallbackRouterHttpError && error.status === 413
+          ? "body-too-large"
+          : isAbortError(error)
+            ? "upstream-timeout"
+            : "upstream-error";
+
+      if (!response.headersSent) {
+        writeJson(response, responseStatus, {
+          code: responseStatus,
+          success: false,
+          message,
+        });
+      } else {
+        response.end();
+      }
+
+      logRequest({
+        config,
+        startedAtMs,
+        method,
+        requestUrl,
+        requestId,
+        routingReason,
+        targetEnvironment: null,
+        upstreamStatus: null,
+        responseStatus,
+      });
+    });
+  };
+}
+
+export function createCaocaoCallbackRouterServer(
+  configInput: CreateCaocaoCallbackRouterInput = {},
+): Server {
+  return createServer(createCaocaoCallbackRouterHandler(configInput));
+}
diff --git a/apps/backend/src/scripts/ride-hailing/caocao-callback-router.ts b/apps/backend/src/scripts/ride-hailing/caocao-callback-router.ts
new file mode 100644
index 000000000..04f116bc8
--- /dev/null
+++ b/apps/backend/src/scripts/ride-hailing/caocao-callback-router.ts
@@ -0,0 +1,54 @@
+import {
+  createCaocaoCallbackRouterConfigFromEnv,
+  createCaocaoCallbackRouterServer,
+} from "../../infra/edge/caocao-callback-router";
+
+const config = createCaocaoCallbackRouterConfigFromEnv(process.env);
+const server = createCaocaoCallbackRouterServer(config);
+
+server.listen(config.port, config.host, () => {
+  console.info(
+    JSON.stringify({
+      event: "caocao_callback_router_started",
+      host: config.host,
+      port: config.port,
+      callbackPath: config.callbackPath,
+      stagingOrigin: config.stagingOrigin.origin,
+      productionOrigin: config.productionOrigin.origin,
+      maxBodyBytes: config.maxBodyBytes,
+      upstreamTimeoutMs: config.upstreamTimeoutMs,
+    }),
+  );
+});
+
+const shutdown = (signal: NodeJS.Signals): void => {
+  console.info(
+    JSON.stringify({
+      event: "caocao_callback_router_stopping",
+      signal,
+    }),
+  );
+
+  server.close((error) => {
+    if (error) {
+      console.error(
+        JSON.stringify({
+          event: "caocao_callback_router_stop_failed",
+          message: error.message,
+        }),
+      );
+      process.exit(1);
+      return;
+    }
+
+    console.info(
+      JSON.stringify({
+        event: "caocao_callback_router_stopped",
+      }),
+    );
+    process.exit(0);
+  });
+};
+
+process.on("SIGINT", shutdown);
+process.on("SIGTERM", shutdown);
diff --git a/apps/backend/tsup.config.ts b/apps/backend/tsup.config.ts
index 7c30d8147..d47fa0102 100644
--- a/apps/backend/tsup.config.ts
+++ b/apps/backend/tsup.config.ts
@@ -1,7 +1,10 @@
 import { defineConfig } from "tsup";
 
 export default defineConfig({
-  entry: ["src/index.ts"],
+  entry: {
+    index: "src/index.ts",
+    "caocao-callback-router": "src/scripts/ride-hailing/caocao-callback-router.ts",
+  },
   outDir: "dist",
   format: ["esm"],
   platform: "node",
diff --git a/docs/40-deployment/environments.md b/docs/40-deployment/environments.md
index 2d6a0668b..cff8fe4ae 100644
--- a/docs/40-deployment/environments.md
+++ b/docs/40-deployment/environments.md
@@ -195,6 +195,68 @@ WeChatPay can reach for unauthenticated payment callbacks. Do not point it at
 the frontend origin unless that origin also routes `/api/payment/*` to the
 backend.
 
+## CaoCao Callback Edge Routing
+
+CaoCao order-status callbacks use a fixed callback URL configured on the CaoCao
+side. When that registered URL cannot be changed quickly, route staging and
+production through one public callback edge instead of asking CaoCao to switch
+addresses during rollout.
+
+New CaoCao orders must include a signed pass-through `callback_info` value:
+
+```text
+pu.rhc.v1.<routing-token>.<provider-instance-id>
+```
+
+Current routing tokens:
+
+- `stg`: staging backend
+- `prod`: production backend
+- `dev`: local or non-shared development callbacks
+
+The edge must preserve the original form body. `callback_info` participates in
+CaoCao's callback signature, so the edge may read it only for routing and must
+not rewrite, remove, or append form fields. The target backend still verifies
+the CaoCao signature, validates that `callback_info` matches its own
+environment, loads the concrete provider instance, resolves `ext_order_id`, and
+checks the stored provider binding before mutating any RideHailing order state.
+
+Plain URI-only nginx routing is insufficient for this topology because the
+environment discriminator is in the POST form body. On `ec1.sz.partner-up.host`,
+public ride-hailing traffic enters system nginx `1.20.1`; that nginx has no
+enabled Lua/njs body-inspection module. The selected deployment shape is
+therefore a backend-owned callback router behind an exact nginx location:
+
+```nginx
+location = /api/v1/service_provider/caocao/callback/order {
+    client_max_body_size 16k;
+    proxy_pass http://127.0.0.1:6080;
+    proxy_set_header Host $host;
+    include nginxconfig.io/proxy.conf;
+}
+```
+
+The repo-owned implementation lives under the backend package:
+
+- router entry: `apps/backend/src/scripts/ride-hailing/caocao-callback-router.ts`
+- nginx snippet: `apps/backend/deploy/nginx/caocao-callback-router.location.conf`
+- systemd template:
+  `apps/backend/deploy/systemd/caocao-callback-router.service.example`
+
+The router binds only to `127.0.0.1:6080`, accepts only
+`POST /api/v1/service_provider/caocao/callback/order`, reads
+`callback_info`, and forwards the original body to:
+
+- `pu.rhc.v1.stg.*`: `https://test.app-api.partner-up.cn`
+- `pu.rhc.v1.prod.*`: `https://app-api.partner-up.cn`
+- missing `callback_info`: `https://app-api.partner-up.cn`
+- present but invalid `callback_info`: `400 Bad Request`
+
+During the compatibility window, callbacks with no `callback_info` may continue
+to default to production if there are already CaoCao orders created before this
+contract was deployed. New staging test orders must carry `stg` so the edge can
+send them to staging and production data remains isolated.
+
 ## Environment Split
 
 ### `develop`
diff --git a/tasks/caocao-callback-router/00-task-packet.md b/tasks/caocao-callback-router/00-task-packet.md
new file mode 100644
index 000000000..21d886fe6
--- /dev/null
+++ b/tasks/caocao-callback-router/00-task-packet.md
@@ -0,0 +1,141 @@
+# CaoCao Callback Router
+
+## Objective & Hypothesis
+
+- Objective: implement a repo-owned callback router so one CaoCao-registered callback URL can dispatch callbacks to staging or production while CaoCao callback address changes are delayed.
+- Hypothesis: a narrow local-only router is safer than changing the system nginx runtime on `ec1.sz.partner-up.host`, because the current nginx has no Lua/njs body-inspection module and the router can constrain blast radius to one exact callback path.
+
+## Guardrails Touched
+
+- CaoCao callback signature preservation.
+- Staging / production data isolation.
+- Production edge routing and rollback.
+- Deployment ownership: router code must live in this repository, not as an ad hoc server-side script.
+
+## Current Understanding
+
+- Input type: Constraint. Product behavior stays unchanged, but the external callback address cannot be updated quickly.
+- Active mode: Execute.
+- Existing backend changes send `callback_info` as:
+  `pu.rhc.v1.<routing-token>.<providerInstanceId>`.
+- Routing tokens:
+  - `stg`: staging backend
+  - `prod`: production backend
+  - `dev`: local or non-shared development callbacks
+- Confirmed staging backend origin: `https://test.app-api.partner-up.cn`.
+- Confirmed production backend origin: `https://app-api.partner-up.cn`.
+- CaoCao public callback path remains:
+  `/api/v1/service_provider/caocao/callback/order`.
+- The router must preserve the original request body byte-for-byte for upstream forwarding. `callback_info` participates in CaoCao signature calculation, so the router must not rewrite, remove, append, or re-encode form fields.
+
+## Remote Edge Facts
+
+- Host checked: `ec1.sz.partner-up.host`.
+- Public `80/443` are served by system nginx `1.20.1`.
+- Current system nginx has no enabled Lua/njs modules and no module files under `/usr/lib64/nginx/modules`.
+- Supabase Kong/OpenResty runs separately on container ports `8000/8443`; ride-hailing traffic does not currently pass through Kong.
+- Current ride-hailing nginx routes:
+  - `ride-hailing1.sz.partner-up.ltd /api/v1 -> http://127.0.0.1:6070/v1`
+  - `ride-hailing1.test.sz.partner-up.ltd /api/v1 -> http://127.0.0.1:6070/v1`
+- Current backend service on `127.0.0.1:6070` exposes:
+  `/v1/service_provider/caocao/callback/order`.
+
+## Proposed Topology
+
+```mermaid
+sequenceDiagram
+  participant C as CaoCao
+  participant N as nginx
+  participant R as callback-router
+  participant S as staging backend
+  participant P as production backend
+
+  C->>N: POST /api/v1/service_provider/caocao/callback/order
+  N->>R: proxy exact callback path to 127.0.0.1:6080
+  R->>R: read callback_info from form body only for routing
+  alt callback_info starts with pu.rhc.v1.stg.
+    R->>S: forward original request to test.app-api.partner-up.cn
+  else callback_info starts with pu.rhc.v1.prod. or callback_info is absent
+    R->>P: forward original request to app-api.partner-up.cn
+  else callback_info is present but invalid
+    R-->>C: 400
+  end
+```
+
+## Router Contract
+
+- Bind only to localhost, proposed port `127.0.0.1:6080`.
+- Accept only `POST /api/v1/service_provider/caocao/callback/order`.
+- Read request body with a small maximum size, proposed `16 KiB`.
+- Parse `application/x-www-form-urlencoded` enough to read `callback_info`.
+- Route:
+  - missing `callback_info` -> production for compatibility with already-created orders
+  - `pu.rhc.v1.stg.*` -> staging origin
+  - `pu.rhc.v1.prod.*` -> production origin
+  - any other present `callback_info` -> `400 Bad Request`
+- Forward method, path, query, content type, and raw body to the selected backend.
+- Do not connect to the database.
+- Do not verify CaoCao signature.
+- Do not know provider instance semantics beyond token prefix routing.
+- Emit concise structured logs with route decision, target environment, status, latency, and request id when available. Do not log full request bodies.
+
+## Nginx Shape
+
+```nginx
+location = /api/v1/service_provider/caocao/callback/order {
+    client_max_body_size 16k;
+    proxy_pass http://127.0.0.1:6080;
+    proxy_set_header Host $host;
+    include nginxconfig.io/proxy.conf;
+}
+```
+
+The existing catch-all `/api/v1` proxy remains unchanged.
+
+## Implementation Decisions
+
+- Package location: backend-owned utility under `apps/backend`.
+- Core module: `apps/backend/src/infra/edge/caocao-callback-router.ts`.
+- Runtime entry:
+  `apps/backend/src/scripts/ride-hailing/caocao-callback-router.ts`.
+- Build output: `apps/backend/dist/caocao-callback-router.js` through the
+  backend `tsup` build.
+- Runtime language: Node/TypeScript, using Node HTTP server and native `fetch`.
+- Service manager template:
+  `apps/backend/deploy/systemd/caocao-callback-router.service.example`.
+- Nginx location template:
+  `apps/backend/deploy/nginx/caocao-callback-router.location.conf`.
+- Observability: structured JSON logs to stdout/stderr, suitable for journald.
+
+## Verification Plan
+
+- Unit tests:
+  - routes `stg` token to staging origin: covered
+  - routes `prod` token to production origin: covered
+  - missing token routes to production: covered
+  - malformed present token returns `400`: covered
+  - upstream receives the original raw body: covered
+- Local integration test with fake upstreams and real HTTP requests: covered in
+  `apps/backend/src/infra/edge/caocao-callback-router.test.ts`.
+- Build/typecheck/lint through root scripts or package-local scripts.
+- Remote dry-run:
+  - deploy router binary/package without nginx cutover
+  - curl router directly on localhost using dummy signed-like form bodies
+  - `nginx -t` after adding exact location
+  - reload nginx only after explicit confirmation
+- Rollback:
+  - remove exact nginx location and reload nginx
+  - stop/disable callback-router service
+
+## Next Step
+
+- Local verification completed:
+  - `pnpm exec vitest run apps/backend/src/infra/edge/caocao-callback-router.test.ts --config vitest.backend.config.ts --project backend-unit` passed.
+  - `pnpm check:type:backend` passed.
+  - `pnpm exec biome lint <callback-router files>` passed.
+  - `pnpm check:lint:backend` passed.
+  - `pnpm build:backend` passed and produced
+    `apps/backend/dist/caocao-callback-router.js`.
+  - compiled router short-start check passed with SIGTERM shutdown.
+- After local verification, perform a remote dry-run only after explicit
+  deployment confirmation.

From 5e45733565f18eb4e251f9be2dafc75310d0f8fe Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Sun, 28 Jun 2026 23:30:59 +0800
Subject: [PATCH 54/94] fix(backend): correct caocao router upstream origins

- use deployed api-app domains for staging and production callback routing

- align systemd template, deployment docs, and task packet with verified DNS
---
 .../deploy/systemd/caocao-callback-router.service.example | 4 ++--
 apps/backend/src/infra/edge/caocao-callback-router.ts     | 4 ++--
 docs/40-deployment/environments.md                        | 6 +++---
 tasks/caocao-callback-router/00-task-packet.md            | 8 ++++----
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/apps/backend/deploy/systemd/caocao-callback-router.service.example b/apps/backend/deploy/systemd/caocao-callback-router.service.example
index d06c65939..a74910ef9 100644
--- a/apps/backend/deploy/systemd/caocao-callback-router.service.example
+++ b/apps/backend/deploy/systemd/caocao-callback-router.service.example
@@ -10,8 +10,8 @@ Environment=NODE_ENV=production
 Environment=CAOCAO_CALLBACK_ROUTER_HOST=127.0.0.1
 Environment=CAOCAO_CALLBACK_ROUTER_PORT=6080
 Environment=CAOCAO_CALLBACK_ROUTER_CALLBACK_PATH=/api/v1/service_provider/caocao/callback/order
-Environment=CAOCAO_CALLBACK_ROUTER_STAGING_ORIGIN=https://test.app-api.partner-up.cn
-Environment=CAOCAO_CALLBACK_ROUTER_PRODUCTION_ORIGIN=https://app-api.partner-up.cn
+Environment=CAOCAO_CALLBACK_ROUTER_STAGING_ORIGIN=https://test.api-app.partner-up.cn
+Environment=CAOCAO_CALLBACK_ROUTER_PRODUCTION_ORIGIN=https://api-app.partner-up.cn
 Environment=CAOCAO_CALLBACK_ROUTER_MAX_BODY_BYTES=16384
 Environment=CAOCAO_CALLBACK_ROUTER_UPSTREAM_TIMEOUT_MS=15000
 ExecStart=/usr/bin/node dist/caocao-callback-router.js
diff --git a/apps/backend/src/infra/edge/caocao-callback-router.ts b/apps/backend/src/infra/edge/caocao-callback-router.ts
index a8e293682..2ac4a4097 100644
--- a/apps/backend/src/infra/edge/caocao-callback-router.ts
+++ b/apps/backend/src/infra/edge/caocao-callback-router.ts
@@ -13,8 +13,8 @@ export const CAOCAO_CALLBACK_ROUTER_DEFAULT_HOST = "127.0.0.1";
 export const CAOCAO_CALLBACK_ROUTER_DEFAULT_PORT = 6080;
 export const CAOCAO_CALLBACK_ROUTER_DEFAULT_MAX_BODY_BYTES = 16 * 1024;
 export const CAOCAO_CALLBACK_ROUTER_DEFAULT_UPSTREAM_TIMEOUT_MS = 15_000;
-export const CAOCAO_CALLBACK_ROUTER_DEFAULT_STAGING_ORIGIN = "https://test.app-api.partner-up.cn";
-export const CAOCAO_CALLBACK_ROUTER_DEFAULT_PRODUCTION_ORIGIN = "https://app-api.partner-up.cn";
+export const CAOCAO_CALLBACK_ROUTER_DEFAULT_STAGING_ORIGIN = "https://test.api-app.partner-up.cn";
+export const CAOCAO_CALLBACK_ROUTER_DEFAULT_PRODUCTION_ORIGIN = "https://api-app.partner-up.cn";
 
 export type CaocaoCallbackRouterTargetEnvironment = "production" | "staging";
 
diff --git a/docs/40-deployment/environments.md b/docs/40-deployment/environments.md
index cff8fe4ae..fc935d8ab 100644
--- a/docs/40-deployment/environments.md
+++ b/docs/40-deployment/environments.md
@@ -247,9 +247,9 @@ The router binds only to `127.0.0.1:6080`, accepts only
 `POST /api/v1/service_provider/caocao/callback/order`, reads
 `callback_info`, and forwards the original body to:
 
-- `pu.rhc.v1.stg.*`: `https://test.app-api.partner-up.cn`
-- `pu.rhc.v1.prod.*`: `https://app-api.partner-up.cn`
-- missing `callback_info`: `https://app-api.partner-up.cn`
+- `pu.rhc.v1.stg.*`: `https://test.api-app.partner-up.cn`
+- `pu.rhc.v1.prod.*`: `https://api-app.partner-up.cn`
+- missing `callback_info`: `https://api-app.partner-up.cn`
 - present but invalid `callback_info`: `400 Bad Request`
 
 During the compatibility window, callbacks with no `callback_info` may continue
diff --git a/tasks/caocao-callback-router/00-task-packet.md b/tasks/caocao-callback-router/00-task-packet.md
index 21d886fe6..e6fa4bccb 100644
--- a/tasks/caocao-callback-router/00-task-packet.md
+++ b/tasks/caocao-callback-router/00-task-packet.md
@@ -22,8 +22,8 @@
   - `stg`: staging backend
   - `prod`: production backend
   - `dev`: local or non-shared development callbacks
-- Confirmed staging backend origin: `https://test.app-api.partner-up.cn`.
-- Confirmed production backend origin: `https://app-api.partner-up.cn`.
+- Confirmed staging backend origin: `https://test.api-app.partner-up.cn`.
+- Confirmed production backend origin: `https://api-app.partner-up.cn`.
 - CaoCao public callback path remains:
   `/api/v1/service_provider/caocao/callback/order`.
 - The router must preserve the original request body byte-for-byte for upstream forwarding. `callback_info` participates in CaoCao signature calculation, so the router must not rewrite, remove, append, or re-encode form fields.
@@ -54,9 +54,9 @@ sequenceDiagram
   N->>R: proxy exact callback path to 127.0.0.1:6080
   R->>R: read callback_info from form body only for routing
   alt callback_info starts with pu.rhc.v1.stg.
-    R->>S: forward original request to test.app-api.partner-up.cn
+    R->>S: forward original request to test.api-app.partner-up.cn
   else callback_info starts with pu.rhc.v1.prod. or callback_info is absent
-    R->>P: forward original request to app-api.partner-up.cn
+    R->>P: forward original request to api-app.partner-up.cn
   else callback_info is present but invalid
     R-->>C: 400
   end

From 505eecbfc9953a0c3e38698577a598d5def91cd9 Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Mon, 29 Jun 2026 00:02:41 +0800
Subject: [PATCH 55/94] fix(backend): pass environment to runtime

- inject PARTNERUP_ENVIRONMENT into backend FC runtime\n- document branch environment mapping for runtime behavior\n- record ec1 dry-run finding before nginx cutover
---
 apps/backend/s.yaml                           |  1 +
 docs/40-deployment/environments.md            | 10 ++++++++++
 .../caocao-callback-router/00-task-packet.md  | 19 +++++++++++++++++--
 3 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/apps/backend/s.yaml b/apps/backend/s.yaml
index 54fe8125f..eb29bc3db 100644
--- a/apps/backend/s.yaml
+++ b/apps/backend/s.yaml
@@ -59,6 +59,7 @@ resources:
       environmentVariables:
         PORT: "3000"
         NODE_ENV: production
+        PARTNERUP_ENVIRONMENT: ${env('PARTNERUP_ENVIRONMENT')}
         PATH: ${env('ALIYUN_FC_PATH')}
         NODE_PATH: /opt/nodejs/node_modules
         LD_LIBRARY_PATH: /code:/code/lib:/usr/lib:/opt/lib:/usr/local/lib
diff --git a/docs/40-deployment/environments.md b/docs/40-deployment/environments.md
index fc935d8ab..24cb63160 100644
--- a/docs/40-deployment/environments.md
+++ b/docs/40-deployment/environments.md
@@ -195,6 +195,16 @@ WeChatPay can reach for unauthenticated payment callbacks. Do not point it at
 the frontend origin unless that origin also routes `/api/payment/*` to the
 backend.
 
+Backend deploy maps the Git branch into `PARTNERUP_ENVIRONMENT` and passes that
+value to both the migration function and the backend runtime:
+
+- `develop`: `staging`
+- `master`: `production`
+
+Runtime code that needs to separate staging and production behavior must use
+`PARTNERUP_ENVIRONMENT`, not `NODE_ENV`, because both deployed backend runtimes
+use `NODE_ENV=production`.
+
 ## CaoCao Callback Edge Routing
 
 CaoCao order-status callbacks use a fixed callback URL configured on the CaoCao
diff --git a/tasks/caocao-callback-router/00-task-packet.md b/tasks/caocao-callback-router/00-task-packet.md
index e6fa4bccb..c137b7121 100644
--- a/tasks/caocao-callback-router/00-task-packet.md
+++ b/tasks/caocao-callback-router/00-task-packet.md
@@ -39,6 +39,9 @@
   - `ride-hailing1.test.sz.partner-up.ltd /api/v1 -> http://127.0.0.1:6070/v1`
 - Current backend service on `127.0.0.1:6070` exposes:
   `/v1/service_provider/caocao/callback/order`.
+- Runtime preparation:
+  - installed nvm `0.40.3` for root on ec1
+  - installed Node `v22.23.1` through nvm
 
 ## Proposed Topology
 
@@ -137,5 +140,17 @@ The existing catch-all `/api/v1` proxy remains unchanged.
   - `pnpm build:backend` passed and produced
     `apps/backend/dist/caocao-callback-router.js`.
   - compiled router short-start check passed with SIGTERM shutdown.
-- After local verification, perform a remote dry-run only after explicit
-  deployment confirmation.
+- Remote dry-run on ec1 without nginx cutover:
+  - uploaded repo-built router bundle from commit `5e457335` to
+    `/opt/partner-up/caocao-callback-router`
+  - started router on `127.0.0.1:6080`
+  - `pu.rhc.v1.stg.*` routed to staging with
+    `targetEnvironment:"staging"`
+  - `pu.rhc.v1.prod.*` routed to production with
+    `targetEnvironment:"production"`
+  - invalid present `callback_info` returned `400` and did not reach upstream
+- Dry-run exposed a deployment-template gap: backend CI computed
+  `PARTNERUP_ENVIRONMENT`, but `apps/backend/s.yaml` did not pass it into the
+  backend runtime. Staging runtime therefore treated itself as `dev`, which
+  would make real staging order callbacks incompatible with the router. Fix the
+  runtime env injection before nginx cutover.

From 01b7a129f959a8ed8cd0a19b68af17ba49767409 Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Mon, 29 Jun 2026 00:22:04 +0800
Subject: [PATCH 56/94] fix(backend): sanitize caocao router headers

- stop forwarding edge Host metadata to backend origins\n- cover forwarded header stripping in router tests\n- document the nginx cutover finding
---
 .../src/infra/edge/caocao-callback-router.test.ts  | 13 +++++++++++++
 .../src/infra/edge/caocao-callback-router.ts       | 14 ++------------
 docs/40-deployment/environments.md                 |  5 +++++
 tasks/caocao-callback-router/00-task-packet.md     |  7 +++++++
 4 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/apps/backend/src/infra/edge/caocao-callback-router.test.ts b/apps/backend/src/infra/edge/caocao-callback-router.test.ts
index 028ecd88a..60f792802 100644
--- a/apps/backend/src/infra/edge/caocao-callback-router.test.ts
+++ b/apps/backend/src/infra/edge/caocao-callback-router.test.ts
@@ -160,6 +160,12 @@ test("router forwards stg callback_info requests to the staging origin with raw
       body: rawBody,
       headers: {
         "content-type": "application/x-www-form-urlencoded",
+        forwarded: "for=203.0.113.10;host=ride-hailing1.sz.partner-up.ltd;proto=https",
+        "x-forwarded-for": "203.0.113.10",
+        "x-forwarded-host": "ride-hailing1.sz.partner-up.ltd",
+        "x-forwarded-port": "443",
+        "x-forwarded-proto": "https",
+        "x-real-ip": "203.0.113.10",
         "x-request-id": "stg-request",
       },
       method: "POST",
@@ -177,6 +183,13 @@ test("router forwards stg callback_info requests to the staging origin with raw
   assert.equal(staging.requests[0].method, "POST");
   assert.deepEqual(staging.requests[0].body, rawBody);
   assert.equal(staging.requests[0].headers["content-type"], "application/x-www-form-urlencoded");
+  assert.equal(staging.requests[0].headers["x-request-id"], "stg-request");
+  assert.equal(staging.requests[0].headers.forwarded, undefined);
+  assert.equal(staging.requests[0].headers["x-forwarded-for"], undefined);
+  assert.equal(staging.requests[0].headers["x-forwarded-host"], undefined);
+  assert.equal(staging.requests[0].headers["x-forwarded-port"], undefined);
+  assert.equal(staging.requests[0].headers["x-forwarded-proto"], undefined);
+  assert.equal(staging.requests[0].headers["x-real-ip"], undefined);
   assert.equal(logs.at(-1)?.targetEnvironment, "staging");
   assert.equal(logs.at(-1)?.routingReason, "stg-token");
 });
diff --git a/apps/backend/src/infra/edge/caocao-callback-router.ts b/apps/backend/src/infra/edge/caocao-callback-router.ts
index 2ac4a4097..e70dcd442 100644
--- a/apps/backend/src/infra/edge/caocao-callback-router.ts
+++ b/apps/backend/src/infra/edge/caocao-callback-router.ts
@@ -244,18 +244,8 @@ const readHeader = (headers: IncomingHttpHeaders, name: string): string | null =
 
 const buildForwardHeaders = (headers: IncomingHttpHeaders, bodyLength: number): Headers => {
   const forwarded = new Headers();
-  const copyHeaderNames = [
-    "content-type",
-    "user-agent",
-    "x-request-id",
-    "x-correlation-id",
-    "x-real-ip",
-    "x-forwarded-for",
-    "x-forwarded-proto",
-    "x-forwarded-host",
-    "x-forwarded-port",
-    "forwarded",
-  ];
+  // Upstream origin is selected by this router; edge host metadata must not leak across environments.
+  const copyHeaderNames = ["content-type", "user-agent", "x-request-id", "x-correlation-id"];
 
   for (const name of copyHeaderNames) {
     const value = readHeader(headers, name);
diff --git a/docs/40-deployment/environments.md b/docs/40-deployment/environments.md
index 24cb63160..6832d3faa 100644
--- a/docs/40-deployment/environments.md
+++ b/docs/40-deployment/environments.md
@@ -262,6 +262,11 @@ The router binds only to `127.0.0.1:6080`, accepts only
 - missing `callback_info`: `https://api-app.partner-up.cn`
 - present but invalid `callback_info`: `400 Bad Request`
 
+The router must not forward the public edge `Host`, `Forwarded`, or
+`X-Forwarded-*` headers to the selected backend origin. Those headers describe
+the CaoCao-facing callback edge, not the FC backend origin, and can cause the
+upstream backend to resolve request metadata against the wrong environment.
+
 During the compatibility window, callbacks with no `callback_info` may continue
 to default to production if there are already CaoCao orders created before this
 contract was deployed. New staging test orders must carry `stg` so the edge can
diff --git a/tasks/caocao-callback-router/00-task-packet.md b/tasks/caocao-callback-router/00-task-packet.md
index c137b7121..af381d2a7 100644
--- a/tasks/caocao-callback-router/00-task-packet.md
+++ b/tasks/caocao-callback-router/00-task-packet.md
@@ -77,6 +77,8 @@ sequenceDiagram
   - `pu.rhc.v1.prod.*` -> production origin
   - any other present `callback_info` -> `400 Bad Request`
 - Forward method, path, query, content type, and raw body to the selected backend.
+- Do not forward the public edge `Host`, `Forwarded`, or `X-Forwarded-*`
+  metadata to the selected backend origin.
 - Do not connect to the database.
 - Do not verify CaoCao signature.
 - Do not know provider instance semantics beyond token prefix routing.
@@ -154,3 +156,8 @@ The existing catch-all `/api/v1` proxy remains unchanged.
   backend runtime. Staging runtime therefore treated itself as `dev`, which
   would make real staging order callbacks incompatible with the router. Fix the
   runtime env injection before nginx cutover.
+- Nginx cutover exposed an edge-header leak: when nginx passed
+  `X-Forwarded-Host: ride-hailing1...` to the router and the router forwarded it
+  to FC, staging returned a generic `500`. Clearing edge forwarded headers made
+  the same `stg` dry-run return the expected provider-not-found `404`; the
+  repo-owned router must sanitize those headers itself so nginx can stay simple.

From 1c0a9a2c5d43ec4884494eb5e54db34b7b81a1d7 Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Mon, 29 Jun 2026 12:08:27 +0800
Subject: [PATCH 57/94] chore(intent): add tanstack intent package sync
 workflow

---
 .codex/hooks.json                   |  17 ++
 .intent/hooks/intent-codex-gate.mjs | 308 ++++++++++++++++++++++++++++
 AGENTS.md                           |   4 +-
 apps/frontend/AGENTS.md             |   1 +
 docs/40-deployment/rollout.md       |  25 ++-
 package.json                        |   1 +
 pnpm-lock.yaml                      |  34 ++-
 scripts/sync-design-web-package.mjs | 160 +++++++++++++++
 8 files changed, 539 insertions(+), 11 deletions(-)
 create mode 100644 .codex/hooks.json
 create mode 100644 .intent/hooks/intent-codex-gate.mjs
 create mode 100644 scripts/sync-design-web-package.mjs

diff --git a/.codex/hooks.json b/.codex/hooks.json
new file mode 100644
index 000000000..a1451c35a
--- /dev/null
+++ b/.codex/hooks.json
@@ -0,0 +1,17 @@
+{
+  "hooks": {
+    "SessionStart": [
+      {
+        "matcher": "startup|resume|clear|compact",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "node \"$(git rev-parse --show-toplevel)/.intent/hooks/intent-codex-gate.mjs\"",
+            "timeout": 60,
+            "statusMessage": "Loading Intent skill catalog"
+          }
+        ]
+      }
+    ]
+  }
+}
diff --git a/.intent/hooks/intent-codex-gate.mjs b/.intent/hooks/intent-codex-gate.mjs
new file mode 100644
index 000000000..895efbbdf
--- /dev/null
+++ b/.intent/hooks/intent-codex-gate.mjs
@@ -0,0 +1,308 @@
+#!/usr/bin/env node
+import { appendFileSync, existsSync, mkdirSync, readFileSync } from 'node:fs'
+import { execFileSync, execSync } from 'node:child_process'
+import { tmpdir } from 'node:os'
+import { basename, dirname, join } from 'node:path'
+import { createHash } from 'node:crypto'
+import { performance } from 'node:perf_hooks'
+
+const AGENT = "codex"
+const CATALOG_COMMAND = 'pnpm exec intent list --json'
+const DEFAULT_CATALOG_COMMAND = {
+  file: 'pnpm',
+  args: ['exec', 'intent', 'list', '--json'],
+}
+const EDIT_TOOLS = new Set(["Edit", "Write", "apply_patch"])
+const GATE_DENY_REASON = "Blocked: load matching TanStack guidance before editing. Follow this repo's TanStack guidance setup, then retry the edit."
+const INTENT_COMMAND_PATTERN = /(?:^|&&|\|\||;|\|)\s*((?:bunx\s+@tanstack\/intent(?:@latest)?)|(?:pnpm\s+exec\s+intent)|(?:pnpm\s+dlx\s+@tanstack\/intent(?:@latest)?)|(?:npx\s+@tanstack\/intent(?:@latest)?)|(?:yarn\s+dlx\s+@tanstack\/intent(?:@latest)?)|(?:intent))\s+(list|load)(?:\s+([^\s|;&]+))?/i
+
+try {
+  await main()
+} catch {
+}
+
+process.exit(0)
+
+async function main() {
+  const event = readEventFromStdin()
+
+  if (isSessionStartEvent(event)) {
+    const additionalContext = await createSessionCatalogContext(rootForEvent(event))
+    if (additionalContext) {
+      process.stdout.write(JSON.stringify(sessionStartOutput(additionalContext)))
+    }
+    return
+  }
+
+  const stateFile = stateFileForEvent(event)
+  const observation = observationFromEvent(event)
+
+  if (observation) {
+    appendObservation(stateFile, observation)
+  }
+
+  const toolName = event?.tool_name ?? event?.toolName
+  if (typeof toolName === 'string' && EDIT_TOOLS.has(toolName) && !hasLoad(stateFile)) {
+    process.stdout.write(JSON.stringify(denyOutput()))
+  }
+}
+
+function readEventFromStdin() {
+  try {
+    return JSON.parse(readFileSync(0, 'utf8'))
+  } catch {
+    return {}
+  }
+}
+
+function isSessionStartEvent(event) {
+  return (event?.hook_event_name ?? event?.hookEventName) === 'SessionStart'
+}
+
+function rootForEvent(event) {
+  return typeof event?.cwd === 'string' ? event.cwd : process.cwd()
+}
+
+async function createSessionCatalogContext(root) {
+  try {
+    const start = performance.now()
+    const result = readIntentList(root)
+    const durationMs = performance.now() - start
+    console.error(
+      `[intent-${AGENT}-session-catalog] listIntentSkills found ${result.skills.length} skills from ${result.packages.length} packages in ${formatDuration(durationMs)} (packageJsonReadCount=${result.debug?.scan.packageJsonReadCount ?? 'unknown'})`,
+    )
+    return formatSessionCatalog(result)
+  } catch (error) {
+    console.error(`[intent-${AGENT}-session-catalog] failed to load skill catalog: ${formatError(error)}`)
+    return ''
+  }
+}
+
+function readIntentList(root) {
+  const command = process.env.INTENT_LIST_COMMAND
+  const commandOptions = {
+    cwd: root,
+    encoding: 'utf8',
+    env: { ...process.env, INTENT_AUDIENCE: 'agent' },
+    maxBuffer: 1024 * 1024,
+    stdio: ['ignore', 'pipe', 'pipe'],
+  }
+  const output = command
+    ? execSync(command, { ...commandOptions, shell: true })
+    : execFileSync(DEFAULT_CATALOG_COMMAND.file, DEFAULT_CATALOG_COMMAND.args, commandOptions)
+
+  if (typeof output === 'string' && output.trim()) {
+    return JSON.parse(output)
+  }
+
+  console.error(
+    `[intent-${AGENT}-session-catalog] ${command || CATALOG_COMMAND} returned empty output; falling back to installed package skill scan`,
+  )
+  return readInstalledPackageSkillCatalog(root)
+}
+
+function readInstalledPackageSkillCatalog(root) {
+  const packageName = '@partner-up-dev/design-web'
+  const packageRoot = join(root, 'apps', 'frontend', 'node_modules', '@partner-up-dev', 'design-web')
+  const packageJsonPath = join(packageRoot, 'package.json')
+  const skillsRoot = join(packageRoot, 'skills')
+
+  if (!existsSync(packageJsonPath) || !existsSync(skillsRoot)) {
+    return { skills: [], packages: [], warnings: [`Fallback package skill scan found no installed ${packageName}`], conflicts: [] }
+  }
+
+  const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf8'))
+  const skill = readPackageSkill(packageName, packageRoot, packageJson.version, join(skillsRoot, 'design-web'))
+  const skills = skill ? [skill] : []
+
+  return {
+    skills,
+    packages: [
+      {
+        name: packageName,
+        version: packageJson.version,
+        source: 'local-fallback',
+        packageRoot,
+        skillCount: skills.length,
+      },
+    ],
+    warnings: skills.length === 0 ? [`Fallback package skill scan found no ${packageName} skills`] : [],
+    conflicts: [],
+  }
+}
+
+function readPackageSkill(packageName, packageRoot, packageVersion, skillRoot) {
+  const skillPath = join(skillRoot, 'SKILL.md')
+  if (!existsSync(skillPath)) return undefined
+
+  const skillSource = readFileSync(skillPath, 'utf8')
+  const skillName = readFrontmatterField(skillSource, 'name') || basename(skillRoot)
+  const description = readFrontmatterField(skillSource, 'description') || ''
+
+  return {
+    use: `${packageName}#${skillName}`,
+    packageName,
+    packageRoot,
+    packageVersion,
+    packageSource: 'local-fallback',
+    skillName,
+    description,
+  }
+}
+
+function readFrontmatterField(source, field) {
+  const match = source.match(new RegExp(`^${field}:\\s*(.+)$`, 'm'))
+  return match?.[1]?.trim()
+}
+
+function formatDuration(durationMs) {
+  return `${durationMs.toFixed(1)}ms`
+}
+
+function formatError(error) {
+  if (error instanceof Error) {
+    return error.message
+  }
+
+  return String(error)
+}
+
+function formatSessionCatalog(result) {
+  if (!Array.isArray(result.skills) || result.skills.length === 0) return ''
+
+  return [
+    'TanStack Intent skills are available in this repository.',
+    '',
+    'If the user asks what skills are available, include these local Intent skills in the answer.',
+    '',
+    'Before substantial work, check whether one listed skill clearly matches the user task. If one clearly matches, load that full skill guidance with the Intent CLI before proceeding.',
+    '',
+    'If no skill clearly matches, continue normally. Do not load a skill just to improve phrasing or gather nonessential context.',
+    '',
+    'Available local Intent skills:',
+    formatSkillCatalog(result.skills),
+    formatWarnings(result),
+  ]
+    .filter(Boolean)
+    .join('\n')
+}
+
+function formatSkillCatalog(skills) {
+  return skills
+    .map((skill) => `- ${skill.use}: ${normalizeDescription(skill.description)}`)
+    .join('\n')
+}
+
+function normalizeDescription(description) {
+  return typeof description === 'string' ? description.replace(/\s+/g, ' ').trim() : ''
+}
+
+function formatWarnings(result) {
+  const warnings = [
+    ...(Array.isArray(result.warnings) ? result.warnings : []),
+    ...(Array.isArray(result.conflicts)
+      ? result.conflicts.map(
+        (conflict) =>
+          `Version conflict for ${conflict.packageName}; using ${conflict.chosen.version}`,
+      )
+      : []),
+  ]
+
+  if (warnings.length === 0) return ''
+  return `\nWarnings:\n${warnings.map((warning) => `- ${warning}`).join('\n')}`
+}
+
+function sessionStartOutput(additionalContext) {
+  if (AGENT === 'copilot') {
+    return { additionalContext }
+  }
+
+  return {
+    hookSpecificOutput: {
+      hookEventName: 'SessionStart',
+      additionalContext,
+    },
+  }
+}
+
+function stateFileForEvent(event) {
+  const sessionId = typeof event?.session_id === 'string' ? event.session_id : 'unknown'
+  const cwd = typeof event?.cwd === 'string' ? event.cwd : process.cwd()
+  const key = createHash('sha256').update(AGENT + '\0' + cwd + '\0' + sessionId).digest('hex')
+  return join(tmpdir(), 'tanstack-intent-hooks', key + '.jsonl')
+}
+
+function observationFromEvent(event) {
+  if (!event || typeof event !== 'object') return undefined
+  const toolName = event.tool_name ?? event.toolName
+  const toolInput = event.tool_input ?? event.toolArgs
+  if (toolName !== 'Bash') return undefined
+  const command = typeof toolInput === 'string' ? safeCommandFromString(toolInput) : commandFromObject(toolInput)
+  const parsed = parseIntentInvocation(command)
+  if (!parsed || typeof command !== 'string') return undefined
+  return { action: parsed.action, skillUse: parsed.skillUse, raw: command }
+}
+
+function parseIntentInvocation(command) {
+  if (typeof command !== 'string') return undefined
+  const match = command.match(INTENT_COMMAND_PATTERN)
+  if (!match?.[1] || !match[2]) return undefined
+  const action = match[2].toLowerCase()
+  if (action !== 'list' && action !== 'load') return undefined
+  const skillUse = action === 'load' ? match[3] : undefined
+  if (action === 'load' && !skillUse) return undefined
+  return action === 'load' ? { action, skillUse } : { action }
+}
+
+function commandFromObject(value) {
+  return value && typeof value === 'object' ? value.command : undefined
+}
+
+function safeCommandFromString(value) {
+  try {
+    const command = commandFromObject(JSON.parse(value))
+    return typeof command === 'string' ? command : value
+  } catch {
+    return value
+  }
+}
+
+function appendObservation(stateFile, observation) {
+  try {
+    mkdirSync(dirname(stateFile), { recursive: true })
+    appendFileSync(stateFile, JSON.stringify({ ts: new Date().toISOString(), ...observation }) + '\n')
+  } catch {
+  }
+}
+
+function hasLoad(stateFile) {
+  if (!existsSync(stateFile)) return false
+  try {
+    return readFileSync(stateFile, 'utf8')
+      .split('\n')
+      .filter(Boolean)
+      .some((line) => {
+        try {
+          return JSON.parse(line).action === 'load'
+        } catch {
+          return false
+        }
+      })
+  } catch {
+    return false
+  }
+}
+
+function denyOutput() {
+  if (AGENT === 'copilot') {
+    return { permissionDecision: 'deny', permissionDecisionReason: GATE_DENY_REASON }
+  }
+
+  return {
+    hookSpecificOutput: {
+      hookEventName: 'PreToolUse',
+      permissionDecision: 'deny',
+      permissionDecisionReason: GATE_DENY_REASON,
+    },
+  }
+}
diff --git a/AGENTS.md b/AGENTS.md
index 1dc8234f4..21c42c491 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -108,7 +108,8 @@ Pause and ask for human confirmation when:
 - Use GitHub CLI (`gh`) for GitHub operations and issue workflows.
 - When local frontend/backend services must be available for browser or manual validation, run `pnpm dev:ensure` from the repository root first. It reuses existing `portless` routes and starts only missing dev servers.
 - Use `pnpm dev:portless` as the underlying full-stack local development entry. `portless.json` owns the stable app names for the frontend (`partner-up`) and backend (`api.partner-up`). Do not start ad hoc duplicate dev servers with raw `pnpm dev`, `pnpm dev:frontend`, or `pnpm dev:backend` when the goal is only to ensure services are running.
-- When updating `@partner-up-dev/design-web`, do not hand-edit local agent skill copies. After installing the new package version, verify the package-shipped TanStack Intent skill with `pnpm dlx @tanstack/intent@latest list --json`, `pnpm dlx @tanstack/intent@latest load @partner-up-dev/design-web#design-web`, and `pnpm dlx @tanstack/intent@latest validate apps/frontend/node_modules/@partner-up-dev/design-web/skills/design-web`. Do not add an `intent-skills` managed block unless explicitly requested.
+- When updating `@partner-up-dev/design-web`, use `node scripts/sync-design-web-package.mjs <version>`. 
+- Do not add an `intent-skills` managed block unless explicitly requested.
 - Keep tests and guardrails aligned with behavior changes; do not ship by build-only confidence.
 - Use the root `pnpm check:*` scripts as canonical static-validation entrypoints. Run `pnpm check:static` for the full local gate, or a narrower layer: `check:format`, `check:lint`, `check:type`, `check:config`, `check:dead-code`, `check:security`, or `check:build`.
 - Biome default checks are changed-file scoped; use `pnpm format:check:all` and `pnpm lint:biome:all` only when intentionally working on all-repo baselines.
@@ -118,6 +119,7 @@ Pause and ask for human confirmation when:
 - Frontend route workflow changes that may be covered by scenario tests should expose stable `data-testid` semantic nodes for primary actions, modal actions, and result-state affordances.
 - Prefer the smallest reviewable mutation that moves the repo toward the declared owner model.
 - Follow `./CONTRIBUTING.md` for commit message format and release policy.
+- Do not revert formatter's change.
 
 ## Coding Guidelines
 
diff --git a/apps/frontend/AGENTS.md b/apps/frontend/AGENTS.md
index 4bebb8f0b..7b7be49f4 100644
--- a/apps/frontend/AGENTS.md
+++ b/apps/frontend/AGENTS.md
@@ -30,6 +30,7 @@ Useful commands:
 - `pnpm check:lint:frontend`
 - `pnpm check:type:frontend`
 - `pnpm check:build:frontend`
+- Package maintenance: `node scripts/sync-design-web-package.mjs` (or `node scripts/sync-design-web-package.mjs <version>`) for install/upgrade `@partner-up-dev/design-web`, Codex hook refresh, and packaged Agent Skill checks.
 
 Focused local checks:
 
diff --git a/docs/40-deployment/rollout.md b/docs/40-deployment/rollout.md
index 6f8cfb34e..f451f8c01 100644
--- a/docs/40-deployment/rollout.md
+++ b/docs/40-deployment/rollout.md
@@ -200,21 +200,28 @@ Release after production ESA deployment succeeds.
 
 `@partner-up-dev/design-web` publishes its TanStack Intent agent skill inside
 the package under `skills/design-web`. Updating the package dependency is the
-skill update mechanism; do not manually edit local copies such as
+skill update mechanism. Do not manually edit local copies such as
 `~/.codex/skills/design-web`.
 
-After changing the installed design-web version, run these checks from the
-repository root:
+After changing the installed design-web version, run this single command from
+the repository root:
 
 ```powershell
-pnpm dlx @tanstack/intent@latest list --json
-pnpm dlx @tanstack/intent@latest load @partner-up-dev/design-web#design-web
-pnpm dlx @tanstack/intent@latest validate apps/frontend/node_modules/@partner-up-dev/design-web/skills/design-web
+node scripts/sync-design-web-package.mjs [<version-or-spec>]
 ```
 
-The `load` command is the agent-facing source of truth for the current
-package-shipped skill. Do not run `intent install` or add an `intent-skills`
-managed block unless the repository intentionally adopts that mapping format.
+The script also installs/refreshes the `codex` `SessionStart` hook (no
+`PreToolUse` hook), so Codex sessions inherit the same skill catalog on startup.
+
+`load` remains the agent-facing source of truth for the current package-shipped
+skill. Do not run `intent install` or add an `intent-skills` managed block unless
+the repository intentionally adopts that mapping format.
+
+To skip hook refresh only (not recommended), pass:
+
+```powershell
+node scripts/sync-design-web-package.mjs --skip-hooks
+```
 
 ## Manual Rollout Reality
 
diff --git a/package.json b/package.json
index 941792849..0854f8702 100644
--- a/package.json
+++ b/package.json
@@ -80,6 +80,7 @@
     "@biomejs/biome": "2.5.0",
     "@hono/node-server": "^1.19.9",
     "@partner-up-dev/fake-wechatpay-server": "workspace:*",
+    "@tanstack/intent": "^0.0.41",
     "@vitejs/plugin-vue": "^5.2.4",
     "happy-dom": "^20.9.0",
     "knip": "6.17.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e039049cf..61d03daf6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -27,6 +27,9 @@ importers:
       '@partner-up-dev/fake-wechatpay-server':
         specifier: workspace:*
         version: link:packages/fake-wechatpay-server
+      '@tanstack/intent':
+        specifier: ^0.0.41
+        version: 0.0.41
       '@vitejs/plugin-vue':
         specifier: ^5.2.4
         version: 5.2.4(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0))(vue@3.5.35(typescript@6.0.3))
@@ -1528,6 +1531,9 @@ packages:
       sass: ^1.94.2
       unocss: ^66.6.8
       vue: ^3.5.34
+    peerDependenciesMeta:
+      unocss:
+        optional: true
 
   '@polka/url@1.0.0-next.29':
     resolution: {integrity: sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==}
@@ -1663,6 +1669,10 @@ packages:
   '@standard-schema/spec@1.1.0':
     resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
 
+  '@tanstack/intent@0.0.41':
+    resolution: {integrity: sha512-Psl+oDiidLvtctswkTQ1P6sQIihwrMLcdfQVfkLpO42oKwxWEr1lodWUHiOG5jFXsGwDDvpUv/WAdlmJF+yGpw==}
+    hasBin: true
+
   '@tanstack/match-sorter-utils@8.19.4':
     resolution: {integrity: sha512-Wo1iKt2b9OT7d+YGhvEPD3DXvPv2etTusIMhMUoG7fbhmxcXCtIjJDEygy91Y2JFlwGyjqiBPRozme7UD8hoqg==}
     engines: {node: '>=12'}
@@ -2744,6 +2754,11 @@ packages:
   secure-json-parse@2.7.0:
     resolution: {integrity: sha512-6aU+Rwsezw7VR8/nyvKTx8QpWH9FrcYiXXlqC4z5d5XQBDRqtbfsRjnwGyqbi3gddNtWHuEk9OANUotL26qKUw==}
 
+  semver@7.8.5:
+    resolution: {integrity: sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
   set-blocking@2.0.0:
     resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
 
@@ -3151,6 +3166,11 @@ packages:
   y18n@4.0.3:
     resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}
 
+  yaml@2.8.3:
+    resolution: {integrity: sha512-AvbaCLOO2Otw/lW5bmh9d/WEdcDFdQp2Z2ZUH3pX9U2ihyUY0nvLv7J6TrWowklRGPYbB/IuIMfYgxaCPg5Bpg==}
+    engines: {node: '>= 14.6'}
+    hasBin: true
+
   yaml@2.9.0:
     resolution: {integrity: sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==}
     engines: {node: '>= 14.6'}
@@ -3963,8 +3983,9 @@ snapshots:
   '@partner-up-dev/design-web@0.4.7(sass@1.97.3)(unocss@66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0)))(vue@3.5.35(typescript@6.0.3))':
     dependencies:
       sass: 1.97.3
-      unocss: 66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0))
       vue: 3.5.35(typescript@6.0.3)
+    optionalDependencies:
+      unocss: 66.6.8(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)(vite@6.4.1(@types/node@22.19.7)(jiti@2.7.0)(sass@1.97.3)(tsx@4.21.0)(yaml@2.9.0))
 
   '@polka/url@1.0.0-next.29': {}
 
@@ -4049,6 +4070,13 @@ snapshots:
 
   '@standard-schema/spec@1.1.0': {}
 
+  '@tanstack/intent@0.0.41':
+    dependencies:
+      cac: 6.7.14
+      jsonc-parser: 3.3.1
+      semver: 7.8.5
+      yaml: 2.8.3
+
   '@tanstack/match-sorter-utils@8.19.4':
     dependencies:
       remove-accents: 0.5.0
@@ -5253,6 +5281,8 @@ snapshots:
 
   secure-json-parse@2.7.0: {}
 
+  semver@7.8.5: {}
+
   set-blocking@2.0.0: {}
 
   siginfo@2.0.0: {}
@@ -5614,6 +5644,8 @@ snapshots:
 
   y18n@4.0.3: {}
 
+  yaml@2.8.3: {}
+
   yaml@2.9.0: {}
 
   yargs-parser@18.1.3:
diff --git a/scripts/sync-design-web-package.mjs b/scripts/sync-design-web-package.mjs
new file mode 100644
index 000000000..b9005080b
--- /dev/null
+++ b/scripts/sync-design-web-package.mjs
@@ -0,0 +1,160 @@
+#!/usr/bin/env node
+
+import { existsSync, readFileSync, writeFileSync } from "node:fs";
+import { spawnSync } from "node:child_process";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const repoRoot = resolve(dirname(fileURLToPath(import.meta.url)), "..");
+const frontendFilter = "@partner-up-dev/frontend";
+const packageName = "@partner-up-dev/design-web";
+const skillName = "design-web";
+const skillRoot = resolve(
+  repoRoot,
+  "apps/frontend/node_modules",
+  packageName,
+  "skills",
+  skillName,
+);
+const codexHookPath = resolve(repoRoot, ".codex", "hooks.json");
+const doHookInstall = !process.argv.includes("--skip-hooks");
+const sessionStartHookTimeoutSeconds = 60;
+const hookArgs = [
+  "exec",
+  "intent",
+  "hooks",
+  "install",
+  "--scope",
+  "project",
+  "--agents",
+  "codex",
+];
+
+const usage = `Usage:
+  node scripts/sync-design-web-package.mjs [version-or-spec]
+
+Examples:
+  node scripts/sync-design-web-package.mjs
+  node scripts/sync-design-web-package.mjs latest
+  node scripts/sync-design-web-package.mjs 0.4.8
+  node scripts/sync-design-web-package.mjs @partner-up-dev/design-web@0.4.8
+  node scripts/sync-design-web-package.mjs --skip-hooks 0.4.9
+`;
+
+const print = (...args) => process.stdout.write(`${args.join(" ")}\n`);
+const warn = (...args) => process.stderr.write(`Warning: ${args.join(" ")}\n`);
+
+const configureProjectHooks = () => {
+  if (!existsSync(codexHookPath)) {
+    return;
+  }
+
+  try {
+    const hooksConfig = JSON.parse(readFileSync(codexHookPath, "utf8"));
+    if (!hooksConfig?.hooks || typeof hooksConfig.hooks !== "object") {
+      return;
+    }
+
+    if (Array.isArray(hooksConfig.hooks.SessionStart)) {
+      hooksConfig.hooks.SessionStart = hooksConfig.hooks.SessionStart.map((entry) => {
+        if (!entry || typeof entry !== "object") {
+          return entry;
+        }
+
+        if (Array.isArray(entry.hooks)) {
+          entry.hooks = entry.hooks.map((hook) => {
+            if (!hook || typeof hook !== "object") {
+              return hook;
+            }
+
+            return {
+              ...hook,
+              timeout: sessionStartHookTimeoutSeconds,
+            };
+          });
+        }
+
+        return entry;
+      });
+    }
+
+    delete hooksConfig.hooks.PreToolUse;
+
+    writeFileSync(codexHookPath, JSON.stringify(hooksConfig, null, 2) + "\n", "utf8");
+  } catch {
+    warn(`Unable to parse or rewrite ${codexHookPath}, keep hook install result as-is.`);
+  }
+};
+
+
+const run = (command, args) => {
+  const result = spawnSync(command, args, {
+    cwd: repoRoot,
+    encoding: "utf8",
+  });
+
+  const output = [result.stdout, result.stderr].filter(Boolean).join("\n").trim();
+
+  if (result.status !== 0) {
+    throw new Error(`${command} ${args.join(" ")} failed:\n${output}`);
+  }
+
+  return result.stdout ?? "";
+};
+
+const ensureSkillInIntentList = (jsonText) => {
+  if (!jsonText.includes(`${packageName}#${skillName}`)) {
+    throw new Error(`Intent list output does not include ${packageName}#${skillName}.`);
+  }
+};
+
+const main = () => {
+  const args = process.argv.slice(2);
+  if (args.includes("-h") || args.includes("--help")) {
+    print(usage);
+    return;
+  }
+
+  const positionalArgs = args.filter((arg) => !arg.startsWith("-"));
+  const input = positionalArgs[0] ?? "latest";
+  const packageSpec = input.includes(packageName) ? input : `${packageName}@${input}`;
+  const totalSteps = 3 + (doHookInstall ? 1 : 0);
+
+  print(`[step 1/${totalSteps}] Sync package in frontend workspace: ${packageSpec}`);
+  run("pnpm", ["--filter", frontendFilter, "add", packageSpec]);
+
+  if (doHookInstall) {
+    print(`[step 2/${totalSteps}] Install/refresh Codex session hook for design-web skill loading`);
+    run("pnpm", hookArgs);
+  } else {
+    print(`[step 2/${totalSteps}] Skip Codex hook install (passed --skip-hooks)`);
+  }
+  configureProjectHooks();
+  print(`[step 2/${totalSteps}] SessionStart hook policy applied; PreToolUse removed; timeout set to ${sessionStartHookTimeoutSeconds}s`);
+
+  print(`[step 3/${totalSteps}] Verify intent skill discovery for ${packageName}#${skillName}`);
+  const listOutput = run("pnpm", ["exec", "intent", "list", "--json"]);
+  ensureSkillInIntentList(listOutput);
+
+  print(`[step ${totalSteps}/${totalSteps}] Load + validate package-shipped skill`);
+  run("pnpm", ["exec", "intent", "load", `${packageName}#${skillName}`]);
+  run("pnpm", [
+    "exec",
+    "intent",
+    "validate",
+    skillRoot,
+  ]);
+
+  const packageJsonPath = resolve(repoRoot, "apps/frontend/node_modules", packageName, "package.json");
+  try {
+    const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf8"));
+    print(
+      `Done. Current installed version: ${packageName}@${packageJson.version} (stored in apps/frontend/package.json).`,
+    );
+  } catch {
+    warn(`Installed package file not found or unreadable: ${packageJsonPath}`);
+    print("Done.");
+  }
+};
+
+main();

From b71a505e6c0d77913fca0aa56c1b608b6db69b38 Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Mon, 29 Jun 2026 12:31:21 +0800
Subject: [PATCH 58/94] feat(ride-hailing): lock final pricing substrate

- add base order pricing execution snapshot for later runtime pricing

- materialize RideHailing final bill through locked pricing and split rules
---
 ...trade_order_pricing_execution_snapshot.sql |   2 +
 ...de-hailing-final-settlement-consequence.ts | 102 +++++++++++++
 apps/backend/src/domains/trade/model/order.ts |  41 +++++
 .../src/domains/trade/services/index.ts       |   1 +
 .../trade/services/order-persistence.ts       |   1 +
 .../services/order-pricing-execution.test.ts  | 140 ++++++++++++++++++
 .../trade/services/order-pricing-execution.ts |  85 +++++++++++
 .../trade/services/pricing-application.ts     |  43 ++----
 .../domains/trade/use-cases/create-order.ts   |  55 +++++--
 .../domains/trade/use-cases/offer-listing.ts  |   1 +
 apps/backend/src/entities/trade-order.ts      |  19 +--
 11 files changed, 438 insertions(+), 52 deletions(-)
 create mode 100644 apps/backend/drizzle/0083_trade_order_pricing_execution_snapshot.sql
 create mode 100644 apps/backend/src/domains/ride-hailing/use-cases/apply-ride-hailing-final-settlement-consequence.ts
 create mode 100644 apps/backend/src/domains/trade/services/order-pricing-execution.test.ts
 create mode 100644 apps/backend/src/domains/trade/services/order-pricing-execution.ts

diff --git a/apps/backend/drizzle/0083_trade_order_pricing_execution_snapshot.sql b/apps/backend/drizzle/0083_trade_order_pricing_execution_snapshot.sql
new file mode 100644
index 000000000..5674bae23
--- /dev/null
+++ b/apps/backend/drizzle/0083_trade_order_pricing_execution_snapshot.sql
@@ -0,0 +1,2 @@
+alter table "trade_orders"
+  add column "pricing_execution_snapshot" jsonb default null;
diff --git a/apps/backend/src/domains/ride-hailing/use-cases/apply-ride-hailing-final-settlement-consequence.ts b/apps/backend/src/domains/ride-hailing/use-cases/apply-ride-hailing-final-settlement-consequence.ts
new file mode 100644
index 000000000..54937f2e7
--- /dev/null
+++ b/apps/backend/src/domains/ride-hailing/use-cases/apply-ride-hailing-final-settlement-consequence.ts
@@ -0,0 +1,102 @@
+import type { BillId } from "../../../entities/bill";
+import type { TradeOrderId } from "../../../entities/trade-order";
+import { db } from "../../../lib/db";
+import { throwHttpProblem } from "../../../lib/problem-details";
+import { BillRepository } from "../../../repositories/BillRepository";
+import { RideHailingOrderRepository } from "../../../repositories/RideHailingOrderRepository";
+import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository";
+import type { RepositoryExecutor } from "../../../repositories/_executor";
+import { createBillFromSeed } from "../../bill";
+import { materializeChargeLinesFromSplitRule } from "../../bill/services";
+import { resolvePricingFromExecutionSnapshot } from "../../trade/services";
+
+export async function applyRideHailingFinalSettlementConsequence(
+  input: {
+    orderId: TradeOrderId;
+  },
+  executor: RepositoryExecutor = db,
+): Promise<{
+  applied: boolean;
+  reason: string;
+  billId?: BillId | string;
+  targetChargeTotalFen?: number;
+}> {
+  if (executor === db) {
+    return db.transaction((tx) => applyRideHailingFinalSettlementConsequence(input, tx));
+  }
+
+  const tradeOrderRepo = new TradeOrderRepository(executor);
+  const rideOrderRepo = new RideHailingOrderRepository(executor);
+  const billRepo = new BillRepository(executor);
+
+  const existingBill = await billRepo.findBySourceOrderId(input.orderId);
+  if (existingBill) {
+    return {
+      applied: false,
+      reason: "RideHailing final bill already exists",
+      billId: existingBill.id,
+    };
+  }
+
+  const order = await tradeOrderRepo.findById(input.orderId);
+  if (!order || order.family !== "RIDE_HAILING") {
+    return throwHttpProblem({
+      status: 404,
+      detail: "RideHailing order not found for final settlement",
+    });
+  }
+
+  const rideOrder = await rideOrderRepo.findByOrderId(input.orderId);
+  if (!rideOrder) {
+    return throwHttpProblem({
+      status: 500,
+      detail: "RideHailing order facts are missing for final settlement",
+    });
+  }
+
+  if (!rideOrder.finalSettlementInput) {
+    return {
+      applied: false,
+      reason: "RideHailing final settlement input is missing",
+    };
+  }
+
+  if (!order.pricingExecutionSnapshot) {
+    return throwHttpProblem({
+      status: 500,
+      detail: "Order pricing execution snapshot is missing for RideHailing final bill",
+    });
+  }
+
+  const pricingSnapshot = resolvePricingFromExecutionSnapshot({
+    snapshot: order.pricingExecutionSnapshot,
+    orderContext: {
+      serviceTime: rideOrder.departureAt?.toISOString() ?? null,
+      quoteTotalFen: rideOrder.finalSettlementInput.amountFen,
+    },
+  });
+  const chargeLines = materializeChargeLinesFromSplitRule({
+    totalFen: pricingSnapshot.totalFen,
+    splitRule: order.splitRuleSnapshot,
+  });
+  const created = await createBillFromSeed(
+    {
+      sourceOrderId: order.id,
+      currency: pricingSnapshot.currency,
+      chargeLines: chargeLines.map((line) => ({
+        userId: line.userId,
+        amountFen: line.amountFen,
+        label: "曹操出行费用",
+        description: "行程结束后按实际费用结算",
+      })),
+    },
+    executor,
+  );
+
+  return {
+    applied: true,
+    reason: "RideHailing final bill created",
+    billId: created.billId,
+    targetChargeTotalFen: pricingSnapshot.totalFen,
+  };
+}
diff --git a/apps/backend/src/domains/trade/model/order.ts b/apps/backend/src/domains/trade/model/order.ts
index ebac4be1b..9ec1a82b9 100644
--- a/apps/backend/src/domains/trade/model/order.ts
+++ b/apps/backend/src/domains/trade/model/order.ts
@@ -1,8 +1,11 @@
 import type {
   PriceExplanation,
   PricingModel,
+  PricingRule,
   ProductPresentation,
+  ProductType,
   SkuFacts,
+  SpuSalesPolicy,
 } from "../../merchandising";
 
 export type OrderFamily = "RENTAL" | "RIDE_HAILING";
@@ -39,6 +42,43 @@ export type SkuSnapshot = {
   cancellationPolicySnapshot?: CancellationPolicySnapshot | null;
 };
 
+export type OrderPricingSkuSnapshot = {
+  id: number;
+  version: number;
+  name: string;
+  factsSnapshot: SkuFacts;
+  pricingModelSnapshot: PricingModel;
+};
+
+export type OrderPricingSpuSnapshot = {
+  id: number;
+  version: number;
+  productType: ProductType;
+  factsSnapshot: Record<string, unknown>;
+  salesPolicySnapshot: SpuSalesPolicy;
+};
+
+export type OrderPricingExecutionSnapshot = {
+  version: 1;
+  offer: {
+    id: number;
+    productType: ProductType;
+    termsVersion: number;
+    pricingPolicySnapshot: {
+      rules: PricingRule[];
+    };
+  };
+  items: Array<{
+    itemId: string;
+    quantity: number;
+    spu: OrderPricingSpuSnapshot;
+    sku: OrderPricingSkuSnapshot;
+  }>;
+  orderContext: {
+    serviceTime?: string | null;
+  };
+};
+
 export type FixedOrderItemSnapshot = {
   kind?: "FIXED";
   itemId: string;
@@ -179,6 +219,7 @@ export type TradeOrder = {
   status: OrderStatus;
   participants: OrderParticipantSnapshot[];
   splitRuleSnapshot: SplitRuleSnapshot;
+  pricingExecutionSnapshot?: OrderPricingExecutionSnapshot | null;
   items: OrderItemSnapshot[];
   timeout: OrderTimeout;
   terminationAttempts: OrderTerminationAttempt[];
diff --git a/apps/backend/src/domains/trade/services/index.ts b/apps/backend/src/domains/trade/services/index.ts
index f2cd98696..d301e1c30 100644
--- a/apps/backend/src/domains/trade/services/index.ts
+++ b/apps/backend/src/domains/trade/services/index.ts
@@ -3,6 +3,7 @@ export * from "./order-persistence";
 export * from "./order-status";
 export * from "./order-participants";
 export * from "./order-items";
+export * from "./order-pricing-execution";
 export * from "./pricing-application";
 export * from "./rental-termination-pricing";
 export * from "./split-rule";
diff --git a/apps/backend/src/domains/trade/services/order-persistence.ts b/apps/backend/src/domains/trade/services/order-persistence.ts
index a6afb87d2..37c02f597 100644
--- a/apps/backend/src/domains/trade/services/order-persistence.ts
+++ b/apps/backend/src/domains/trade/services/order-persistence.ts
@@ -16,6 +16,7 @@ export function toTradeOrderModel(record: TradeOrderRecord): TradeOrder {
     status: record.status,
     participants: record.participants,
     splitRuleSnapshot: record.splitRuleSnapshot,
+    pricingExecutionSnapshot: record.pricingExecutionSnapshot,
     items: record.items,
     timeout: record.timeout,
     terminationAttempts: record.terminationAttempts,
diff --git a/apps/backend/src/domains/trade/services/order-pricing-execution.test.ts b/apps/backend/src/domains/trade/services/order-pricing-execution.test.ts
new file mode 100644
index 000000000..63109a5d1
--- /dev/null
+++ b/apps/backend/src/domains/trade/services/order-pricing-execution.test.ts
@@ -0,0 +1,140 @@
+import { describe, expect, it } from "vitest";
+import type { Offer } from "../../../entities/offer";
+import type { ProductSku } from "../../../entities/product-sku";
+import type { ProductSpu } from "../../../entities/product-spu";
+import type { PricingRule } from "../../merchandising";
+import {
+  buildOrderPricingExecutionSnapshot,
+  resolvePricingFromExecutionSnapshot,
+} from "./order-pricing-execution";
+
+const now = new Date("2026-06-01T00:00:00.000Z");
+
+const ratioRule = (input: { id: number; ratioBps: number }): PricingRule => ({
+  id: input.id,
+  label: `ratio-${input.id}`,
+  description: "ratio policy",
+  conditionRule: true,
+  action: {
+    type: "RATIO",
+    payload: {
+      ratioBps: input.ratioBps,
+    },
+  },
+  target: {
+    level: "ORDER",
+  },
+  continue: true,
+});
+
+const buildOffer = (rules: PricingRule[]): Offer => ({
+  id: 100,
+  status: "ACTIVE",
+  productType: "RIDE_HAILING",
+  spuIds: [1],
+  pricingPolicy: {
+    rules,
+  },
+  termsVersion: 1,
+  startsAt: null,
+  endsAt: null,
+  createdAt: now,
+  updatedAt: now,
+});
+
+const buildSpu = (): ProductSpu => ({
+  id: 1,
+  version: 1,
+  status: "ACTIVE",
+  name: "Ride hailing",
+  productType: "RIDE_HAILING",
+  salesPolicy: {
+    skuSelectionPolicy: {
+      type: "CHOICE_SET",
+      min: 1,
+      max: null,
+      resolvesTo: 1,
+    },
+    quantityPolicy: {
+      type: "FIXED",
+      quantity: 1,
+    },
+  },
+  servicePolicy: {
+    type: "RIDE_HAILING",
+  },
+  presentation: {
+    heroImageAssetIds: [],
+    detailImageAssetIds: [],
+    sellingPoints: [],
+    parameterGroups: [],
+    noticeBlocks: [],
+  },
+  facts: {
+    provider: "CAOCAO",
+  },
+  createdAt: now,
+  updatedAt: now,
+});
+
+const buildSku = (): ProductSku => ({
+  id: 10,
+  spuId: 1,
+  version: 1,
+  status: "ACTIVE",
+  name: "Express",
+  sortOrder: 1,
+  presentation: {
+    heroImageAssetIds: [],
+    detailImageAssetIds: [],
+    sellingPoints: [],
+    parameterGroups: [],
+    noticeBlocks: [],
+  },
+  facts: {
+    rideHailingProviderInstanceId: "provider-1",
+    providerVehicleTypeCode: "EXPRESS",
+  },
+  pricingModel: {
+    type: "DYNAMIC_QUOTE",
+    calculatorSpec: {
+      version: 1,
+      currency: "CNY",
+      components: [],
+    },
+  },
+  cancellationPolicyRef: null,
+  createdAt: now,
+  updatedAt: now,
+});
+
+describe("order pricing execution snapshot", () => {
+  it("prices runtime dynamic quote input through the locked offer policy", () => {
+    const offerAtCreate = buildOffer([ratioRule({ id: 1, ratioBps: 5000 })]);
+    const snapshot = buildOrderPricingExecutionSnapshot({
+      offer: offerAtCreate,
+      items: [
+        {
+          itemId: "ride-item",
+          spu: buildSpu(),
+          sku: buildSku(),
+          quantity: 1,
+        },
+      ],
+    });
+
+    offerAtCreate.pricingPolicy = {
+      rules: [ratioRule({ id: 2, ratioBps: 1000 })],
+    };
+
+    const pricing = resolvePricingFromExecutionSnapshot({
+      snapshot,
+      orderContext: {
+        quoteTotalFen: 5000,
+      },
+    });
+
+    expect(pricing.totalFen).toBe(2500);
+    expect(pricing.orderLevelExplanations[0]?.sourceId).toBe("rule:OFFER_POLICY:ORDER:1");
+  });
+});
diff --git a/apps/backend/src/domains/trade/services/order-pricing-execution.ts b/apps/backend/src/domains/trade/services/order-pricing-execution.ts
new file mode 100644
index 000000000..925b6745f
--- /dev/null
+++ b/apps/backend/src/domains/trade/services/order-pricing-execution.ts
@@ -0,0 +1,85 @@
+import type { Offer } from "../../../entities/offer";
+import type { ProductSku } from "../../../entities/product-sku";
+import type { ProductSpu } from "../../../entities/product-spu";
+import type { OrderPricingExecutionSnapshot, OrderPricingSnapshot } from "../model";
+import { PricingApplication } from "./pricing-application";
+
+const pricingApplication = new PricingApplication();
+
+export function buildOrderPricingExecutionSnapshot(input: {
+  offer: Offer;
+  items: Array<{
+    itemId: string;
+    quantity: number;
+    spu: ProductSpu;
+    sku: ProductSku;
+  }>;
+  orderContext?: {
+    serviceTime?: string | null;
+  };
+}): OrderPricingExecutionSnapshot {
+  return {
+    version: 1,
+    offer: {
+      id: input.offer.id,
+      productType: input.offer.productType,
+      termsVersion: input.offer.termsVersion,
+      pricingPolicySnapshot: input.offer.pricingPolicy,
+    },
+    items: input.items.map((item) => ({
+      itemId: item.itemId,
+      quantity: item.quantity,
+      spu: {
+        id: item.spu.id,
+        version: item.spu.version,
+        productType: item.spu.productType,
+        factsSnapshot: item.spu.facts,
+        salesPolicySnapshot: item.spu.salesPolicy,
+      },
+      sku: {
+        id: item.sku.id,
+        version: item.sku.version,
+        name: item.sku.name,
+        factsSnapshot: item.sku.facts,
+        pricingModelSnapshot: item.sku.pricingModel,
+      },
+    })),
+    orderContext: {
+      serviceTime: input.orderContext?.serviceTime ?? null,
+    },
+  };
+}
+
+export function resolvePricingFromExecutionSnapshot(input: {
+  snapshot: OrderPricingExecutionSnapshot;
+  orderContext?: {
+    serviceTime?: string | null;
+    quoteTotalFen?: number | null;
+  };
+}): OrderPricingSnapshot {
+  return pricingApplication.resolve({
+    offer: {
+      pricingPolicy: input.snapshot.offer.pricingPolicySnapshot,
+    },
+    items: input.snapshot.items.map((item) => ({
+      itemId: item.itemId,
+      quantity: item.quantity,
+      spu: {
+        id: item.spu.id,
+        facts: item.spu.factsSnapshot,
+        salesPolicy: item.spu.salesPolicySnapshot,
+      },
+      sku: {
+        id: item.sku.id,
+        name: item.sku.name,
+        facts: item.sku.factsSnapshot,
+        pricingModel: item.sku.pricingModelSnapshot,
+      },
+    })),
+    orderContext: {
+      serviceTime:
+        input.orderContext?.serviceTime ?? input.snapshot.orderContext.serviceTime ?? null,
+      quoteTotalFen: input.orderContext?.quoteTotalFen ?? null,
+    },
+  });
+}
diff --git a/apps/backend/src/domains/trade/services/pricing-application.ts b/apps/backend/src/domains/trade/services/pricing-application.ts
index a561bbc1e..73e66719d 100644
--- a/apps/backend/src/domains/trade/services/pricing-application.ts
+++ b/apps/backend/src/domains/trade/services/pricing-application.ts
@@ -10,10 +10,7 @@ import type {
   PricingRule,
   PricingRuleTarget,
 } from "../../merchandising";
-import type {
-  OrderItemPricingSnapshot,
-  OrderPricingSnapshot,
-} from "../model";
+import type { OrderItemPricingSnapshot, OrderPricingSnapshot } from "../model";
 
 const jsonLogicModule = jsonLogicNamespace as typeof jsonLogicNamespace & {
   default?: typeof jsonLogicNamespace;
@@ -44,13 +41,13 @@ type PricingTargetData = {
 
 type PricingItemInput = {
   itemId: string;
-  spu: ProductSpu;
-  sku: ProductSku;
+  spu: Pick<ProductSpu, "id" | "facts" | "salesPolicy">;
+  sku: Pick<ProductSku, "id" | "name" | "facts" | "pricingModel">;
   quantity: number;
 };
 
 export type PricingApplicationInput = {
-  offer: Offer;
+  offer: Pick<Offer, "pricingPolicy">;
   items: PricingItemInput[];
   orderContext?: {
     serviceTime?: string | null;
@@ -74,9 +71,8 @@ const isJsonLogicRule = (value: unknown): value is RulesLogic =>
   typeof value === "string" ||
   (isRecord(value) && jsonLogic.is_logic(value));
 
-const isFixedTotalPricingModel = (
-  value: PricingModel,
-): value is FixedTotalPricingModel => value.type === "FIXED_TOTAL";
+const isFixedTotalPricingModel = (value: PricingModel): value is FixedTotalPricingModel =>
+  value.type === "FIXED_TOTAL";
 
 function resolvePricingModelAmount(pricingModel: PricingModel): number {
   if (isFixedTotalPricingModel(pricingModel)) {
@@ -86,10 +82,7 @@ function resolvePricingModelAmount(pricingModel: PricingModel): number {
   throw new Error("Dynamic quote pricing requires a resolved quote input");
 }
 
-function matchesTarget(
-  ruleTarget: PricingRuleTarget,
-  candidateTarget: PricingRuleTarget,
-): boolean {
+function matchesTarget(ruleTarget: PricingRuleTarget, candidateTarget: PricingRuleTarget): boolean {
   if (ruleTarget.level !== candidateTarget.level) return false;
 
   if (ruleTarget.level === "SKU" && candidateTarget.level === "SKU") {
@@ -108,9 +101,7 @@ function doesRuleMatch(rule: PricingRule, targetData: PricingTargetData): boolea
   if (!isJsonLogicRule(rule.conditionRule)) return false;
 
   try {
-    return jsonLogic.truthy(
-      jsonLogic.apply(rule.conditionRule as RulesLogic, targetData),
-    );
+    return jsonLogic.truthy(jsonLogic.apply(rule.conditionRule as RulesLogic, targetData));
   } catch {
     return false;
   }
@@ -132,16 +123,11 @@ function applyPricingRule(input: {
   }
 
   if (input.rule.action.type === "MINUS") {
-    nextAmountFen = Math.max(
-      0,
-      beforeAmountFen - input.rule.action.payload.amountFen,
-    );
+    nextAmountFen = Math.max(0, beforeAmountFen - input.rule.action.payload.amountFen);
   }
 
   if (input.rule.action.type === "RATIO") {
-    nextAmountFen = Math.round(
-      (beforeAmountFen * input.rule.action.payload.ratioBps) / 10_000,
-    );
+    nextAmountFen = Math.round((beforeAmountFen * input.rule.action.payload.ratioBps) / 10_000);
   }
 
   return {
@@ -216,9 +202,7 @@ function buildSkuBaseState(input: {
         sourceId: `sku:${input.item.sku.id}`,
         label: input.item.sku.name,
         description:
-          input.item.sku.pricingModel.type === "DYNAMIC_QUOTE"
-            ? "实时预估价"
-            : "固定总价",
+          input.item.sku.pricingModel.type === "DYNAMIC_QUOTE" ? "实时预估价" : "固定总价",
         deltaFen: amountFen,
         resultAmountFen: amountFen,
       },
@@ -301,10 +285,7 @@ export class PricingApplication {
       });
     }
 
-    const subtotalFen = itemBreakdowns.reduce(
-      (sum, item) => sum + item.resolvedAmountFen,
-      0,
-    );
+    const subtotalFen = itemBreakdowns.reduce((sum, item) => sum + item.resolvedAmountFen, 0);
     const orderInitialState: PricingState = {
       pricingModel: {
         type: "FIXED_TOTAL",
diff --git a/apps/backend/src/domains/trade/use-cases/create-order.ts b/apps/backend/src/domains/trade/use-cases/create-order.ts
index ee5ccab3c..7eddd30c0 100644
--- a/apps/backend/src/domains/trade/use-cases/create-order.ts
+++ b/apps/backend/src/domains/trade/use-cases/create-order.ts
@@ -42,6 +42,7 @@ import type {
   FixedOrderItemSnapshot,
   OrderItemSnapshot,
   OrderParticipantSnapshot,
+  OrderPricingExecutionSnapshot,
   OrderPricingSnapshot,
   OrderStatus,
   OrderTimeout,
@@ -54,7 +55,11 @@ import type {
   RideHailingRouteSnapshot,
   SkuSnapshot,
 } from "../model";
-import { buildEqualRelativeSplitRule, validateOrderParticipants } from "../services";
+import {
+  buildEqualRelativeSplitRule,
+  buildOrderPricingExecutionSnapshot,
+  validateOrderParticipants,
+} from "../services";
 import {
   resolveQuoteBoundOrderItems,
   type QuoteBoundOrderItemInput,
@@ -110,15 +115,15 @@ export type OrderingActionProblem = {
 
 export type CreateOrderCommandResult =
   | {
-    outcome: "CREATED";
-    orderId: string;
-    billId?: string | null;
-  }
+      outcome: "CREATED";
+      orderId: string;
+      billId?: string | null;
+    }
   | {
-    outcome: "CANCELLED";
-    orderId: string;
-    reason: OrderingActionProblem;
-  };
+      outcome: "CANCELLED";
+      orderId: string;
+      reason: OrderingActionProblem;
+    };
 
 type RideQuoteOption = {
   skuId: number;
@@ -576,6 +581,7 @@ async function createBaseOrder(input: {
   createdBy: string;
   participants: OrderParticipantSnapshot[];
   items: OrderItemSnapshot[];
+  pricingExecutionSnapshot?: OrderPricingExecutionSnapshot | null;
   timeout: OrderTimeout;
 }) {
   const participantError = validateOrderParticipants({
@@ -597,6 +603,7 @@ async function createBaseOrder(input: {
     ...(input.status ? { status: input.status } : {}),
     participants: input.participants,
     splitRuleSnapshot,
+    pricingExecutionSnapshot: input.pricingExecutionSnapshot ?? null,
     items: input.items,
     timeout: input.timeout,
   });
@@ -752,12 +759,27 @@ async function createRentalOrderBranch(input: {
       quantity: input.selected.quantity,
       cancellationPolicySnapshot: input.selected.cancellationPolicySnapshot,
     });
+    const pricingExecutionSnapshot = buildOrderPricingExecutionSnapshot({
+      offer: input.selected.offer,
+      items: [
+        {
+          itemId: input.selected.itemId,
+          spu: input.selected.spu,
+          sku: input.selected.sku,
+          quantity: input.selected.quantity,
+        },
+      ],
+      orderContext: {
+        serviceTime: input.selected.listingContext.serviceStartAt,
+      },
+    });
     const base = await createBaseOrder({
       executor: tx,
       offer: input.selected.offer,
       createdBy: input.createdBy,
       participants,
       items: [item],
+      pricingExecutionSnapshot,
       timeout: buildTimeout(DEFAULT_UNPAID_WINDOW_MINUTES),
     });
 
@@ -828,6 +850,20 @@ async function createRideHailingOrderBranch(input: {
         selected: input.selected,
         resolution: null,
       });
+      const pricingExecutionSnapshot = buildOrderPricingExecutionSnapshot({
+        offer: input.selected.offer,
+        items: [
+          {
+            itemId: input.selected.itemId,
+            spu: input.selected.dispatchCandidate.spu,
+            sku: input.selected.dispatchCandidate.sku,
+            quantity: input.selected.dispatchCandidate.quantity,
+          },
+        ],
+        orderContext: {
+          serviceTime: input.selected.listingContext.departureAt,
+        },
+      });
       const base = await createBaseOrder({
         executor: tx,
         offer: input.selected.offer,
@@ -835,6 +871,7 @@ async function createRideHailingOrderBranch(input: {
         createdBy: input.createdBy,
         participants,
         items: [unresolvedItem],
+        pricingExecutionSnapshot,
         timeout: buildNonExpiringTimeout(),
       });
 
diff --git a/apps/backend/src/domains/trade/use-cases/offer-listing.ts b/apps/backend/src/domains/trade/use-cases/offer-listing.ts
index e4c29ef64..6a55f2810 100644
--- a/apps/backend/src/domains/trade/use-cases/offer-listing.ts
+++ b/apps/backend/src/domains/trade/use-cases/offer-listing.ts
@@ -394,6 +394,7 @@ async function quoteRideSku(input: {
       },
     ],
     orderContext: {
+      serviceTime: input.departureAt,
       quoteTotalFen: providerQuote.estimateAmountFen,
     },
   });
diff --git a/apps/backend/src/entities/trade-order.ts b/apps/backend/src/entities/trade-order.ts
index 0c3ea0847..5b0b65d9a 100644
--- a/apps/backend/src/entities/trade-order.ts
+++ b/apps/backend/src/entities/trade-order.ts
@@ -3,6 +3,7 @@ import { sql } from "drizzle-orm";
 import type {
   OrderFamily,
   OrderParticipantSnapshot,
+  OrderPricingExecutionSnapshot,
   OrderStatus,
   OrderTerminationAttempt,
   OrderTimeout,
@@ -17,10 +18,7 @@ export type TradeOrderId = string & { readonly __brand: "TradeOrderId" };
 export const tradeOrders = pgTable(
   "trade_orders",
   {
-    id: uuid("id")
-      .$type<TradeOrderId>()
-      .primaryKey()
-      .default(sql`gen_random_uuid()`),
+    id: uuid("id").$type<TradeOrderId>().primaryKey().default(sql`gen_random_uuid()`),
     family: text("family").$type<OrderFamily>().notNull(),
     offerId: bigint("offer_id", { mode: "number" })
       .$type<OfferId>()
@@ -33,6 +31,9 @@ export const tradeOrders = pgTable(
     status: text("status").$type<OrderStatus>().notNull().default("OPEN"),
     participants: jsonb("participants").$type<OrderParticipantSnapshot[]>().notNull(),
     splitRuleSnapshot: jsonb("split_rule_snapshot").$type<SplitRuleSnapshot>().notNull(),
+    pricingExecutionSnapshot: jsonb("pricing_execution_snapshot")
+      .$type<OrderPricingExecutionSnapshot | null>()
+      .default(null),
     items: jsonb("items").$type<OrderItemSnapshot[]>().notNull(),
     timeout: jsonb("timeout").$type<OrderTimeout>().notNull(),
     terminationAttempts: jsonb("termination_attempts")
@@ -44,14 +45,8 @@ export const tradeOrders = pgTable(
     updatedAt: timestamp("updated_at", { withTimezone: true }).notNull().defaultNow(),
   },
   (table) => ({
-    familyStatusIdx: index("trade_orders_family_status_idx").on(
-      table.family,
-      table.status,
-    ),
-    offerStatusIdx: index("trade_orders_offer_status_idx").on(
-      table.offerId,
-      table.status,
-    ),
+    familyStatusIdx: index("trade_orders_family_status_idx").on(table.family, table.status),
+    offerStatusIdx: index("trade_orders_offer_status_idx").on(table.offerId, table.status),
   }),
 );
 

From b164c44009cbbc8fd045480b8cee90d95a5167f9 Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Mon, 29 Jun 2026 12:31:48 +0800
Subject: [PATCH 59/94] feat(ride-hailing): reconcile provider detail callbacks

- treat CaoCao callback as reconcile notification and query provider detail as SSoT

- sync order detail polling and cancellation through shared provider context

- add callback retry and system scenario coverage
---
 .../domains/ride-hailing/services/index.ts    |   1 +
 .../provider-order-observation.test.ts        |  83 ++
 .../services/provider-order-observation.ts    | 113 +++
 .../handle-caocao-order-status-callback.ts    | 173 +----
 .../domains/ride-hailing/use-cases/index.ts   |   2 +
 .../use-cases/provider-execution-context.ts   |  98 +++
 .../sync-ride-hailing-order-with-provider.ts  | 157 ++++
 ...el-ride-hailing-order-from-order-detail.ts |  69 +-
 .../use-cases/ride-hailing-ordering-flow.ts   |  49 +-
 .../caocao-callback-route.scenario.test.ts    | 707 +++++++++++++-----
 .../order-detail/RideHailingOrderContent.vue  |   9 +-
 .../00-task-packet.md                         | 537 +++++++++++++
 .../01-implementation-plan.md                 | 433 +++++++++++
 .../ride-hailing-ordering.scenario.test.ts    |  32 +-
 14 files changed, 2080 insertions(+), 383 deletions(-)
 create mode 100644 apps/backend/src/domains/ride-hailing/services/provider-order-observation.test.ts
 create mode 100644 apps/backend/src/domains/ride-hailing/services/provider-order-observation.ts
 create mode 100644 apps/backend/src/domains/ride-hailing/use-cases/provider-execution-context.ts
 create mode 100644 apps/backend/src/domains/ride-hailing/use-cases/sync-ride-hailing-order-with-provider.ts
 create mode 100644 tasks/ride-hailing-provider-reconcile/00-task-packet.md
 create mode 100644 tasks/ride-hailing-provider-reconcile/01-implementation-plan.md

diff --git a/apps/backend/src/domains/ride-hailing/services/index.ts b/apps/backend/src/domains/ride-hailing/services/index.ts
index 5dd1ff002..fe2e10e8a 100644
--- a/apps/backend/src/domains/ride-hailing/services/index.ts
+++ b/apps/backend/src/domains/ride-hailing/services/index.ts
@@ -1,3 +1,4 @@
 export * from "./caocao-provider";
+export * from "./provider-order-observation";
 export * from "./provider-config";
 export * from "./ride-hailing-provider-registry";
diff --git a/apps/backend/src/domains/ride-hailing/services/provider-order-observation.test.ts b/apps/backend/src/domains/ride-hailing/services/provider-order-observation.test.ts
new file mode 100644
index 000000000..ac4678f12
--- /dev/null
+++ b/apps/backend/src/domains/ride-hailing/services/provider-order-observation.test.ts
@@ -0,0 +1,83 @@
+import { describe, expect, it } from "vitest";
+import {
+  mapProviderDetailPhaseToExecutionPhase,
+  mergeDriverSnapshot,
+  observeProviderOrderDetail,
+} from "./provider-order-observation";
+
+describe("RideHailing provider order observation", () => {
+  it("maps provider detail phase into local execution phase", () => {
+    expect(mapProviderDetailPhaseToExecutionPhase({ phase: "9", finalAmountFen: null })).toBe(
+      "ACCEPTED",
+    );
+    expect(mapProviderDetailPhaseToExecutionPhase({ phase: "12", finalAmountFen: null })).toBe(
+      "ARRIVED_AT_PICKUP",
+    );
+    expect(mapProviderDetailPhaseToExecutionPhase({ phase: "3", finalAmountFen: null })).toBe(
+      "IN_TRIP",
+    );
+    expect(
+      mapProviderDetailPhaseToExecutionPhase({ phase: "FINISHED", finalAmountFen: null }),
+    ).toBe("FINISHED");
+    expect(mapProviderDetailPhaseToExecutionPhase({ phase: "UNKNOWN", finalAmountFen: 4800 })).toBe(
+      "FINISHED",
+    );
+    expect(mapProviderDetailPhaseToExecutionPhase({ phase: "UNKNOWN", finalAmountFen: null })).toBe(
+      null,
+    );
+  });
+
+  it("builds final settlement only from provider detail", () => {
+    const observed = observeProviderOrderDetail({
+      providerOrderId: "CC-DETAIL-1",
+      detail: {
+        phase: "FINISHED",
+        statusLabel: "待支付",
+        finalAmountFen: 4800,
+        driver: {
+          driverName: "李师傅",
+          driverPhone: "13900139000",
+        },
+        vehicle: {
+          plate: "浙B99999",
+          brand: "曹操快车",
+          color: "蓝色",
+        },
+        vehicleLocation: null,
+        providerSnapshot: {
+          source: "provider-detail",
+        },
+      },
+    });
+
+    expect(observed.executionPhase).toBe("FINISHED");
+    expect(observed.finalSettlementInput).toEqual({
+      amountFen: 4800,
+      currency: "CNY",
+      providerOrderId: "CC-DETAIL-1",
+      providerSnapshot: {
+        source: "provider-detail",
+      },
+    });
+    expect(observed.driverSnapshot?.driverName).toBe("李师傅");
+    expect(observed.vehicleSnapshot?.plate).toBe("浙B99999");
+  });
+
+  it("does not erase existing snapshot fields when provider detail is sparse", () => {
+    expect(
+      mergeDriverSnapshot({
+        current: {
+          driverName: "张师傅",
+          driverPhone: "13800138001",
+        },
+        observed: {
+          driverName: "李师傅",
+          driverPhone: null,
+        },
+      }),
+    ).toEqual({
+      driverName: "李师傅",
+      driverPhone: "13800138001",
+    });
+  });
+});
diff --git a/apps/backend/src/domains/ride-hailing/services/provider-order-observation.ts b/apps/backend/src/domains/ride-hailing/services/provider-order-observation.ts
new file mode 100644
index 000000000..9ab0c10e9
--- /dev/null
+++ b/apps/backend/src/domains/ride-hailing/services/provider-order-observation.ts
@@ -0,0 +1,113 @@
+import type {
+  RideHailingDriverSnapshot,
+  RideHailingExecutionPhase,
+  RideHailingFinalSettlementInput,
+  RideHailingVehicleSnapshot,
+} from "../../trade/model";
+import type { RideHailingProviderOrderDetail } from "../model";
+
+export type RideHailingProviderOrderObservation = {
+  executionPhase: RideHailingExecutionPhase | null;
+  driverSnapshot: RideHailingDriverSnapshot | null;
+  vehicleSnapshot: RideHailingVehicleSnapshot | null;
+  finalSettlementInput: Omit<RideHailingFinalSettlementInput, "committedAt"> | null;
+};
+
+const normalizePhase = (phase: string): string => phase.trim().toUpperCase();
+
+export function mapProviderDetailPhaseToExecutionPhase(
+  detail: Pick<RideHailingProviderOrderDetail, "phase" | "finalAmountFen">,
+): RideHailingExecutionPhase | null {
+  const phase = normalizePhase(detail.phase);
+  if (phase === "FINISHED" || ["5", "6", "7", "8"].includes(phase)) {
+    return "FINISHED";
+  }
+  if (phase === "IN_TRIP" || phase === "3") return "IN_TRIP";
+  if (phase === "ARRIVED_AT_PICKUP" || phase === "12") return "ARRIVED_AT_PICKUP";
+  if (phase === "ACCEPTED" || phase === "9") return "ACCEPTED";
+  if (phase === "DISPATCHING" || phase === "2") return "DISPATCHING";
+  if (phase === "CANCELLED" || ["4", "10", "13", "14", "20", "21", "26", "27"].includes(phase)) {
+    return "CANCELLED";
+  }
+  if (phase === "FAILED" || phase === "FAIL" || phase === "FAILURE") {
+    return "FAILED";
+  }
+  if (detail.finalAmountFen !== null) return "FINISHED";
+  return null;
+}
+
+const normalizeOptionalString = (value: string | null | undefined): string | null => {
+  const normalized = value?.trim() ?? "";
+  return normalized.length > 0 ? normalized : null;
+};
+
+const normalizeDriverSnapshot = (
+  driver: RideHailingProviderOrderDetail["driver"],
+): RideHailingDriverSnapshot | null => {
+  if (!driver) return null;
+  const driverName = normalizeOptionalString(driver.driverName);
+  const driverPhone = normalizeOptionalString(driver.driverPhone);
+  if (!driverName && !driverPhone) return null;
+  return {
+    driverName,
+    driverPhone,
+  };
+};
+
+const normalizeVehicleSnapshot = (
+  vehicle: RideHailingProviderOrderDetail["vehicle"],
+): RideHailingVehicleSnapshot | null => {
+  if (!vehicle) return null;
+  const plate = normalizeOptionalString(vehicle.plate);
+  const brand = normalizeOptionalString(vehicle.brand);
+  const color = normalizeOptionalString(vehicle.color);
+  if (!plate && !brand && !color) return null;
+  return {
+    plate,
+    brand,
+    color,
+  };
+};
+
+export function observeProviderOrderDetail(input: {
+  detail: RideHailingProviderOrderDetail;
+  providerOrderId: string;
+}): RideHailingProviderOrderObservation {
+  return {
+    executionPhase: mapProviderDetailPhaseToExecutionPhase(input.detail),
+    driverSnapshot: normalizeDriverSnapshot(input.detail.driver),
+    vehicleSnapshot: normalizeVehicleSnapshot(input.detail.vehicle),
+    finalSettlementInput:
+      input.detail.finalAmountFen !== null
+        ? {
+            amountFen: input.detail.finalAmountFen,
+            currency: "CNY",
+            providerOrderId: input.providerOrderId,
+            providerSnapshot: input.detail.providerSnapshot,
+          }
+        : null,
+  };
+}
+
+export function mergeDriverSnapshot(input: {
+  current: RideHailingDriverSnapshot | null;
+  observed: RideHailingDriverSnapshot | null;
+}): RideHailingDriverSnapshot | null {
+  if (!input.observed) return input.current;
+  return {
+    driverName: input.observed.driverName ?? input.current?.driverName ?? null,
+    driverPhone: input.observed.driverPhone ?? input.current?.driverPhone ?? null,
+  };
+}
+
+export function mergeVehicleSnapshot(input: {
+  current: RideHailingVehicleSnapshot | null;
+  observed: RideHailingVehicleSnapshot | null;
+}): RideHailingVehicleSnapshot | null {
+  if (!input.observed) return input.current;
+  return {
+    plate: input.observed.plate ?? input.current?.plate ?? null,
+    brand: input.observed.brand ?? input.current?.brand ?? null,
+    color: input.observed.color ?? input.current?.color ?? null,
+  };
+}
diff --git a/apps/backend/src/domains/ride-hailing/use-cases/handle-caocao-order-status-callback.ts b/apps/backend/src/domains/ride-hailing/use-cases/handle-caocao-order-status-callback.ts
index 268cec75f..374bfbf03 100644
--- a/apps/backend/src/domains/ride-hailing/use-cases/handle-caocao-order-status-callback.ts
+++ b/apps/backend/src/domains/ride-hailing/use-cases/handle-caocao-order-status-callback.ts
@@ -1,29 +1,22 @@
-import {
-  type RideHailingProviderInstance,
-  type RideHailingProviderInstanceId,
+import type {
+  RideHailingProviderInstance,
+  RideHailingProviderInstanceId,
 } from "../../../entities/ride-hailing-provider";
-import type { BillId } from "../../../entities/bill";
+import type { TradeOrderId } from "../../../entities/trade-order";
 import { throwHttpProblem } from "../../../lib/problem-details";
-import { db } from "../../../lib/db";
-import { BillLineRepository } from "../../../repositories/BillLineRepository";
-import { BillRepository } from "../../../repositories/BillRepository";
 import { RideHailingProviderInstanceRepository } from "../../../repositories/RideHailingProviderInstanceRepository";
-import { RideHailingOrderRepository } from "../../../repositories/RideHailingOrderRepository";
-import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository";
-import type { TradeOrderId } from "../../../entities/trade-order";
-import type { UserId } from "../../../entities/user";
 import {
   caocaoCallbackRoutingTokenMatchesCurrent,
   createRideHailingProviderPort,
   parseCaocaoCallbackInfo,
 } from "../services";
-import type { CaocaoOrderStatusCallback } from "../model/provider";
-import { getRideHailingChoiceSetItem, getRideHailingProviderBinding } from "../../trade/services";
-import type { RideHailingExecutionPhase } from "../../trade/model";
+import type { CaocaoOrderStatusCallback } from "../model";
+import {
+  RideHailingProviderSyncQueryError,
+  syncRideHailingOrderWithProvider,
+} from "./sync-ride-hailing-order-with-provider";
 
 const providerRepo = new RideHailingProviderInstanceRepository();
-const rideOrderRepo = new RideHailingOrderRepository();
-const tradeOrderRepo = new TradeOrderRepository();
 
 export type CaocaoOrderStatusCallbackAck = {
   code: 200;
@@ -38,71 +31,6 @@ const readString = (value: Record<string, string>, keys: string[]): string | nul
   return null;
 };
 
-const readNumber = (value: Record<string, string>, keys: string[]): number | null => {
-  for (const key of keys) {
-    const candidate = value[key];
-    if (!candidate || candidate.trim().length === 0) continue;
-    const parsed = Number(candidate);
-    if (Number.isFinite(parsed)) return parsed;
-  }
-  return null;
-};
-
-const mapCaocaoEventToExecutionPhase = (
-  event: number,
-  currentPhase: RideHailingExecutionPhase,
-): RideHailingExecutionPhase => {
-  if ([20, 21, 22, 26, 27, 40, 41, 44, 45].includes(event)) return "CANCELLED";
-  if ([5, 6, 11, 12, 13].includes(event)) return "FINISHED";
-  if ([4, 48].includes(event)) return "IN_TRIP";
-  if (event === 3) return "ARRIVED_AT_PICKUP";
-  if ([1, 2, 42].includes(event)) return "ACCEPTED";
-  if (event === 14) return "DISPATCHING";
-  return currentPhase;
-};
-
-const emptyToNull = <T extends Record<string, string | null>>(value: T): T | null =>
-  Object.values(value).some((entry) => entry !== null) ? value : null;
-
-async function ensureRideFinalBill(input: {
-  orderId: TradeOrderId;
-  finalAmountFen: number;
-}): Promise<void> {
-  const order = await tradeOrderRepo.findById(input.orderId);
-  if (!order) {
-    return throwHttpProblem({ status: 404, detail: "Order not found for RideHailing bill" });
-  }
-  const existing = await new BillRepository().findBySourceOrderId(input.orderId);
-  if (existing) return;
-
-  await db.transaction(async (tx) => {
-    const billRepo = new BillRepository(tx);
-    const billLineRepo = new BillLineRepository(tx);
-    const bill = await billRepo.create({
-      sourceOrderId: input.orderId,
-      status: "ACTIVE",
-      currency: "CNY",
-    });
-    const baseShare = Math.floor(input.finalAmountFen / order.participants.length);
-    let remainder = input.finalAmountFen - baseShare * order.participants.length;
-    await billLineRepo.createMany(
-      order.participants.map((participant) => {
-        const extra = remainder > 0 ? 1 : 0;
-        remainder -= extra;
-        return {
-          billId: bill.id as BillId,
-          userId: participant.userId as UserId,
-          kind: "CHARGE",
-          amountFen: baseShare + extra,
-          currency: "CNY",
-          label: "曹操出行费用",
-          description: "行程结束后按实际费用结算",
-        };
-      }),
-    );
-  });
-}
-
 async function loadActiveCaocaoProviderInstance(
   providerInstanceId: string,
 ): Promise<RideHailingProviderInstance> {
@@ -200,12 +128,6 @@ async function applyCaocaoCallbackWithProviderInstance(input: {
   let parsed: CaocaoOrderStatusCallback;
   try {
     parsed = port.parseOrderStatusCallback(input.form);
-    if (!parsed.localOrderId) {
-      return throwHttpProblem({
-        status: 400,
-        detail: "Caocao callback ext_order_id is not a ride-hailing order id",
-      });
-    }
   } catch (error) {
     if (error instanceof Error) {
       return throwHttpProblem({
@@ -215,70 +137,29 @@ async function applyCaocaoCallbackWithProviderInstance(input: {
     }
     throw error;
   }
-
-  const orderId = parsed.localOrderId as TradeOrderId;
-  const rideOrder = await rideOrderRepo.findByOrderId(orderId);
-  const order = await tradeOrderRepo.findById(orderId);
-  const choiceSetItem = order ? getRideHailingChoiceSetItem(order.items) : null;
-  const providerBinding = choiceSetItem ? getRideHailingProviderBinding(choiceSetItem) : null;
-  if (
-    !rideOrder ||
-    !providerBinding ||
-    providerBinding.providerInstanceId !== input.providerInstance.id
-  ) {
-    return throwHttpProblem({
-      status: 404,
-      detail: "RideHailing order not found for Caocao callback",
-    });
-  }
-  if (providerBinding.providerOrderId !== parsed.providerOrderId) {
+  if (!parsed.localOrderId) {
     return throwHttpProblem({
-      status: 409,
-      detail: "Caocao callback provider order does not match local order",
+      status: 400,
+      detail: "Caocao callback ext_order_id is not a ride-hailing order id",
     });
   }
 
-  const driverSnapshot = emptyToNull({
-    driverName: readString(parsed.raw, ["driver_name", "driverName", "driver"]),
-    driverPhone: readString(parsed.raw, ["driver_phone", "driverPhone", "driver_mobile"]),
-  });
-  const vehicleSnapshot = emptyToNull({
-    plate: readString(parsed.raw, ["plate", "car_no", "vehicle_plate"]),
-    brand: readString(parsed.raw, ["brand", "vehicle_brand"]),
-    color: readString(parsed.raw, ["color", "vehicle_color"]),
-  });
-
-  await rideOrderRepo.updateByOrderId(orderId, {
-    executionPhase: mapCaocaoEventToExecutionPhase(parsed.event, rideOrder.executionPhase),
-    driverSnapshot,
-    vehicleSnapshot,
-  });
-
-  if (order?.status === "INITIATING") {
-    await tradeOrderRepo.updateStatus(orderId, "OPEN");
-  }
-
-  const finalAmountFen = readNumber(parsed.raw, [
-    "final_amount_fen",
-    "finalAmountFen",
-    "actual_price_fen",
-    "actualPriceFen",
-  ]);
-  if (finalAmountFen !== null) {
-    await rideOrderRepo.updateByOrderId(orderId, {
-      finalSettlementInput: {
-        amountFen: finalAmountFen,
-        currency: "CNY",
-        providerOrderId: parsed.providerOrderId,
-        committedAt: new Date(parsed.timestampMs).toISOString(),
-        providerSnapshot: parsed.raw,
-      },
-      executionPhase: "FINISHED",
-    });
-    await ensureRideFinalBill({
-      orderId,
-      finalAmountFen,
+  try {
+    await syncRideHailingOrderWithProvider({
+      orderId: parsed.localOrderId as TradeOrderId,
+      expectedProviderInstanceId: input.providerInstance.id,
+      expectedProviderOrderId: parsed.providerOrderId,
+      trigger: "CAOCAO_CALLBACK",
     });
+  } catch (error) {
+    if (error instanceof RideHailingProviderSyncQueryError) {
+      return throwHttpProblem({
+        status: 503,
+        detail: "RideHailing provider detail query failed for Caocao callback",
+        code: "RIDE_HAILING_PROVIDER_DETAIL_QUERY_FAILED",
+      });
+    }
+    throw error;
   }
 
   return {
diff --git a/apps/backend/src/domains/ride-hailing/use-cases/index.ts b/apps/backend/src/domains/ride-hailing/use-cases/index.ts
index b8b973855..effd1e079 100644
--- a/apps/backend/src/domains/ride-hailing/use-cases/index.ts
+++ b/apps/backend/src/domains/ride-hailing/use-cases/index.ts
@@ -1,2 +1,4 @@
+export * from "./apply-ride-hailing-final-settlement-consequence";
 export * from "./handle-caocao-order-status-callback";
 export * from "./register-ride-hailing-provider-instance";
+export * from "./sync-ride-hailing-order-with-provider";
diff --git a/apps/backend/src/domains/ride-hailing/use-cases/provider-execution-context.ts b/apps/backend/src/domains/ride-hailing/use-cases/provider-execution-context.ts
new file mode 100644
index 000000000..a90427a0b
--- /dev/null
+++ b/apps/backend/src/domains/ride-hailing/use-cases/provider-execution-context.ts
@@ -0,0 +1,98 @@
+import type {
+  RideHailingProviderInstance,
+  RideHailingProviderInstanceId,
+} from "../../../entities/ride-hailing-provider";
+import type { RideHailingOrder } from "../../../entities/ride-hailing-order";
+import type { TradeOrder, TradeOrderId } from "../../../entities/trade-order";
+import { throwHttpProblem } from "../../../lib/problem-details";
+import { RideHailingOrderRepository } from "../../../repositories/RideHailingOrderRepository";
+import { RideHailingProviderInstanceRepository } from "../../../repositories/RideHailingProviderInstanceRepository";
+import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository";
+import type { RepositoryExecutor } from "../../../repositories/_executor";
+import { getRideHailingChoiceSetItem, getRideHailingProviderBinding } from "../../trade/services";
+import type { RideHailingProviderPort } from "../model";
+import { createRideHailingProviderPort } from "../services";
+
+export type RideHailingProviderExecutionContext = {
+  order: TradeOrder;
+  rideOrder: RideHailingOrder;
+  providerInstance: RideHailingProviderInstance;
+  providerOrderId: string;
+  port: RideHailingProviderPort;
+};
+
+export async function loadRideHailingProviderExecutionContext(
+  input: {
+    orderId: TradeOrderId;
+    expectedProviderInstanceId?: string | null;
+    expectedProviderOrderId?: string | null;
+  },
+  executor?: RepositoryExecutor,
+): Promise<RideHailingProviderExecutionContext> {
+  const tradeOrderRepo = new TradeOrderRepository(executor);
+  const rideOrderRepo = new RideHailingOrderRepository(executor);
+  const providerRepo = new RideHailingProviderInstanceRepository(executor);
+
+  const order = await tradeOrderRepo.findById(input.orderId);
+  if (!order || order.family !== "RIDE_HAILING") {
+    return throwHttpProblem({
+      status: 404,
+      detail: "RideHailing order not found",
+    });
+  }
+
+  const rideOrder = await rideOrderRepo.findByOrderId(input.orderId);
+  if (!rideOrder) {
+    return throwHttpProblem({
+      status: 500,
+      detail: "RideHailing order facts are missing",
+    });
+  }
+
+  const choiceSetItem = getRideHailingChoiceSetItem(order.items);
+  const providerBinding = choiceSetItem ? getRideHailingProviderBinding(choiceSetItem) : null;
+  if (!providerBinding?.providerOrderId) {
+    return throwHttpProblem({
+      status: 409,
+      detail: "RideHailing order is missing provider binding",
+    });
+  }
+
+  if (
+    input.expectedProviderInstanceId &&
+    providerBinding.providerInstanceId !== input.expectedProviderInstanceId
+  ) {
+    return throwHttpProblem({
+      status: 409,
+      detail: "RideHailing provider instance does not match local order",
+    });
+  }
+
+  if (
+    input.expectedProviderOrderId &&
+    providerBinding.providerOrderId !== input.expectedProviderOrderId
+  ) {
+    return throwHttpProblem({
+      status: 409,
+      detail: "RideHailing provider order does not match local order",
+    });
+  }
+
+  const providerInstance = await providerRepo.findById(
+    providerBinding.providerInstanceId as RideHailingProviderInstanceId,
+  );
+  if (!providerInstance || providerInstance.status !== "ACTIVE") {
+    return throwHttpProblem({
+      status: 404,
+      detail: "RideHailing provider instance not found",
+    });
+  }
+
+  return {
+    order,
+    rideOrder,
+    providerInstance,
+    providerOrderId: providerBinding.providerOrderId,
+    port: createRideHailingProviderPort({ providerInstance }),
+  };
+}
diff --git a/apps/backend/src/domains/ride-hailing/use-cases/sync-ride-hailing-order-with-provider.ts b/apps/backend/src/domains/ride-hailing/use-cases/sync-ride-hailing-order-with-provider.ts
new file mode 100644
index 000000000..6f2e983b4
--- /dev/null
+++ b/apps/backend/src/domains/ride-hailing/use-cases/sync-ride-hailing-order-with-provider.ts
@@ -0,0 +1,157 @@
+import type { NewRideHailingOrder } from "../../../entities/ride-hailing-order";
+import type { TradeOrderId } from "../../../entities/trade-order";
+import { db } from "../../../lib/db";
+import { throwHttpProblem } from "../../../lib/problem-details";
+import { RideHailingOrderRepository } from "../../../repositories/RideHailingOrderRepository";
+import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository";
+import type { RideHailingProviderOrderDetail } from "../model";
+import { mergeDriverSnapshot, mergeVehicleSnapshot, observeProviderOrderDetail } from "../services";
+import { applyRideHailingFinalSettlementConsequence } from "./apply-ride-hailing-final-settlement-consequence";
+import { loadRideHailingProviderExecutionContext } from "./provider-execution-context";
+
+export class RideHailingProviderSyncQueryError extends Error {
+  constructor(
+    message: string,
+    readonly originalError: unknown,
+  ) {
+    super(message);
+    this.name = "RideHailingProviderSyncQueryError";
+  }
+}
+
+export type RideHailingProviderSyncTrigger =
+  | "ORDER_DETAIL_POLL"
+  | "CAOCAO_CALLBACK"
+  | "CANCEL_REQUEST";
+
+const jsonEqual = (left: unknown, right: unknown): boolean =>
+  JSON.stringify(left) === JSON.stringify(right);
+
+export async function syncRideHailingOrderWithProvider(input: {
+  orderId: TradeOrderId;
+  expectedProviderInstanceId?: string | null;
+  expectedProviderOrderId?: string | null;
+  trigger: RideHailingProviderSyncTrigger;
+}): Promise<{
+  mutated: boolean;
+  providerDetail: RideHailingProviderOrderDetail;
+}> {
+  const context = await loadRideHailingProviderExecutionContext({
+    orderId: input.orderId,
+    expectedProviderInstanceId: input.expectedProviderInstanceId,
+    expectedProviderOrderId: input.expectedProviderOrderId,
+  });
+
+  let providerDetail: RideHailingProviderOrderDetail;
+  try {
+    providerDetail = await context.port.queryOrderDetail({
+      providerOrderId: context.providerOrderId,
+    });
+  } catch (error) {
+    throw new RideHailingProviderSyncQueryError(
+      "RideHailing provider order detail query failed",
+      error,
+    );
+  }
+
+  const observation = observeProviderOrderDetail({
+    detail: providerDetail,
+    providerOrderId: context.providerOrderId,
+  });
+
+  const mutated = await db.transaction(async (tx) => {
+    const transactionalContext = await loadRideHailingProviderExecutionContext(
+      {
+        orderId: input.orderId,
+        expectedProviderInstanceId: input.expectedProviderInstanceId,
+        expectedProviderOrderId: input.expectedProviderOrderId,
+      },
+      tx,
+    );
+    const tradeOrderRepo = new TradeOrderRepository(tx);
+    const rideOrderRepo = new RideHailingOrderRepository(tx);
+    const patch: Partial<NewRideHailingOrder> = {};
+
+    if (
+      observation.executionPhase &&
+      observation.executionPhase !== transactionalContext.rideOrder.executionPhase
+    ) {
+      patch.executionPhase = observation.executionPhase;
+    }
+
+    const driverSnapshot = mergeDriverSnapshot({
+      current: transactionalContext.rideOrder.driverSnapshot,
+      observed: observation.driverSnapshot,
+    });
+    if (!jsonEqual(driverSnapshot, transactionalContext.rideOrder.driverSnapshot)) {
+      patch.driverSnapshot = driverSnapshot;
+    }
+
+    const vehicleSnapshot = mergeVehicleSnapshot({
+      current: transactionalContext.rideOrder.vehicleSnapshot,
+      observed: observation.vehicleSnapshot,
+    });
+    if (!jsonEqual(vehicleSnapshot, transactionalContext.rideOrder.vehicleSnapshot)) {
+      patch.vehicleSnapshot = vehicleSnapshot;
+    }
+
+    const shouldEnsureFinalBill =
+      observation.finalSettlementInput !== null ||
+      transactionalContext.rideOrder.finalSettlementInput !== null;
+    if (observation.finalSettlementInput) {
+      const currentFinalSettlementInput = transactionalContext.rideOrder.finalSettlementInput;
+      if (!currentFinalSettlementInput) {
+        patch.finalSettlementInput = {
+          ...observation.finalSettlementInput,
+          committedAt: new Date().toISOString(),
+        };
+      } else if (
+        currentFinalSettlementInput.providerOrderId !==
+          observation.finalSettlementInput.providerOrderId ||
+        currentFinalSettlementInput.amountFen !== observation.finalSettlementInput.amountFen
+      ) {
+        return throwHttpProblem({
+          status: 409,
+          detail: "RideHailing final settlement input conflicts with committed value",
+        });
+      }
+    }
+
+    let mutatedInTransaction = false;
+    if (Object.keys(patch).length > 0) {
+      const updated = await rideOrderRepo.updateByOrderId(
+        transactionalContext.rideOrder.orderId,
+        patch,
+      );
+      if (!updated) {
+        return throwHttpProblem({
+          status: 500,
+          detail: "Failed to persist RideHailing provider sync",
+        });
+      }
+      mutatedInTransaction = true;
+    }
+
+    if (transactionalContext.order.status === "INITIATING") {
+      await tradeOrderRepo.updateStatus(transactionalContext.order.id, "OPEN");
+      mutatedInTransaction = true;
+    }
+
+    if (shouldEnsureFinalBill) {
+      const consequence = await applyRideHailingFinalSettlementConsequence(
+        {
+          orderId: transactionalContext.order.id,
+        },
+        tx,
+      );
+      mutatedInTransaction = mutatedInTransaction || consequence.applied;
+    }
+
+    return mutatedInTransaction;
+  });
+
+  return {
+    mutated,
+    providerDetail,
+  };
+}
diff --git a/apps/backend/src/domains/trade/use-cases/cancel-ride-hailing-order-from-order-detail.ts b/apps/backend/src/domains/trade/use-cases/cancel-ride-hailing-order-from-order-detail.ts
index 16ca6d9bc..b0e3ad274 100644
--- a/apps/backend/src/domains/trade/use-cases/cancel-ride-hailing-order-from-order-detail.ts
+++ b/apps/backend/src/domains/trade/use-cases/cancel-ride-hailing-order-from-order-detail.ts
@@ -6,7 +6,11 @@ import type { UserId } from "../../../entities/user";
 import { RideHailingProviderInstanceRepository } from "../../../repositories/RideHailingProviderInstanceRepository";
 import { RideHailingOrderRepository } from "../../../repositories/RideHailingOrderRepository";
 import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository";
-import { createRideHailingProviderPort } from "../../ride-hailing";
+import {
+  createRideHailingProviderPort,
+  RideHailingProviderSyncQueryError,
+  syncRideHailingOrderWithProvider,
+} from "../../ride-hailing";
 import {
   appendTerminationAttempt,
   approveTerminationAttempt,
@@ -21,7 +25,7 @@ const rideOrderRepo = new RideHailingOrderRepository();
 const providerRepo = new RideHailingProviderInstanceRepository();
 
 const isCancellableRideHailingExecutionPhase = (phase: string): boolean =>
-  phase === "DISPATCHING";
+  phase === "DISPATCHING" || phase === "ACCEPTED" || phase === "ARRIVED_AT_PICKUP";
 
 function createAttemptId(): string {
   return `term_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
@@ -47,29 +51,66 @@ export async function cancelRideHailingOrderFromOrderDetail(input: {
       detail: "Only order creator can cancel this order",
     });
   }
-  if (orderRecord.status !== "OPEN") {
+  if (orderRecord.status !== "OPEN" && orderRecord.status !== "INITIATING") {
     return throwHttpProblem({
       status: 409,
       detail: "Order cannot be cancelled from its current status",
     });
   }
 
-  const rideOrder = await rideOrderRepo.findByOrderId(orderRecord.id);
-  if (!rideOrder) {
+  const initialRideOrder = await rideOrderRepo.findByOrderId(orderRecord.id);
+  if (!initialRideOrder) {
     return throwHttpProblem({
       status: 500,
       detail: "RideHailing order facts are missing",
     });
   }
-  if (!isCancellableRideHailingExecutionPhase(rideOrder.executionPhase)) {
+
+  try {
+    await syncRideHailingOrderWithProvider({
+      orderId: orderRecord.id,
+      trigger: "CANCEL_REQUEST",
+    });
+  } catch (error) {
+    if (error instanceof RideHailingProviderSyncQueryError) {
+      return throwHttpProblem({
+        status: 503,
+        detail: "RideHailing provider detail query failed before cancellation",
+        code: "RIDE_HAILING_PROVIDER_DETAIL_QUERY_FAILED",
+      });
+    }
+    throw error;
+  }
+
+  const syncedOrderRecord = await tradeOrderRepo.findById(orderRecord.id);
+  if (!syncedOrderRecord) {
+    return throwHttpProblem({ status: 404, detail: "Order not found" });
+  }
+  if (syncedOrderRecord.status !== "OPEN") {
+    return throwHttpProblem({
+      status: 409,
+      detail: "Order cannot be cancelled from its current status",
+    });
+  }
+
+  const syncedRideOrder = await rideOrderRepo.findByOrderId(orderRecord.id);
+  if (!syncedRideOrder) {
+    return throwHttpProblem({
+      status: 500,
+      detail: "RideHailing order facts are missing",
+    });
+  }
+  if (!isCancellableRideHailingExecutionPhase(syncedRideOrder.executionPhase)) {
     return throwHttpProblem({
       status: 409,
       detail: "RideHailing order cannot be cancelled from its current phase",
     });
   }
 
-  const rideChoiceSetItem = getRideHailingChoiceSetItem(orderRecord.items);
-  const providerBinding = rideChoiceSetItem ? getRideHailingProviderBinding(rideChoiceSetItem) : null;
+  const rideChoiceSetItem = getRideHailingChoiceSetItem(syncedOrderRecord.items);
+  const providerBinding = rideChoiceSetItem
+    ? getRideHailingProviderBinding(rideChoiceSetItem)
+    : null;
   if (!providerBinding?.providerOrderId) {
     return throwHttpProblem({
       status: 409,
@@ -169,9 +210,12 @@ export async function cancelRideHailingOrderFromOrderDetail(input: {
       });
     }
 
-    const updatedRideOrder = await transactionalRideOrderRepo.updateByOrderId(order.id as TradeOrderId, {
-      executionPhase: "CANCELLED",
-    });
+    const updatedRideOrder = await transactionalRideOrderRepo.updateByOrderId(
+      order.id as TradeOrderId,
+      {
+        executionPhase: "CANCELLED",
+      },
+    );
     if (!updatedRideOrder) {
       return throwHttpProblem({
         status: 500,
@@ -183,7 +227,8 @@ export async function cancelRideHailingOrderFromOrderDetail(input: {
       orderId: persisted.id,
       attemptId,
       status: persisted.status,
-      effectKind: providerCancellation.cancelFeeFen > 0 ? ("ABORT_FEE" as const) : ("NONE" as const),
+      effectKind:
+        providerCancellation.cancelFeeFen > 0 ? ("ABORT_FEE" as const) : ("NONE" as const),
       effectAmountFen: providerCancellation.cancelFeeFen,
       refunds: [],
     };
diff --git a/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts b/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts
index 1be342b0c..0c7ef26e3 100644
--- a/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts
+++ b/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts
@@ -10,7 +10,11 @@ import type {
   RideHailingProviderOrderDetail,
   RideHailingProviderVehicleLocation,
 } from "../../ride-hailing";
-import { createRideHailingProviderPort } from "../../ride-hailing";
+import {
+  createRideHailingProviderPort,
+  RideHailingProviderSyncQueryError,
+  syncRideHailingOrderWithProvider,
+} from "../../ride-hailing";
 import type {
   RideHailingChoiceSetCandidateSnapshot,
   RideHailingDriverSnapshot,
@@ -159,7 +163,35 @@ const projectProviderDetail = (input: {
 export async function buildRideHailingDetailProjection(input: {
   order: TradeOrder;
 }): Promise<RideHailingOrderDetailProjection> {
-  const rideOrder = await rideOrderRepo.findByOrderId(input.order.id);
+  let order = input.order;
+  let choiceSetItem = getRideHailingChoiceSetItem(order.items);
+  let providerBinding = choiceSetItem ? getRideHailingProviderBinding(choiceSetItem) : null;
+  let syncedProviderDetail: RideHailingProviderOrderDetail | null = null;
+  if (providerBinding?.providerOrderId) {
+    try {
+      const syncResult = await syncRideHailingOrderWithProvider({
+        orderId: order.id,
+        expectedProviderInstanceId: providerBinding.providerInstanceId,
+        expectedProviderOrderId: providerBinding.providerOrderId,
+        trigger: "ORDER_DETAIL_POLL",
+      });
+      syncedProviderDetail = syncResult.providerDetail;
+      if (syncResult.mutated) {
+        const reloadedOrder = await tradeOrderRepo.findById(order.id);
+        if (reloadedOrder) {
+          order = reloadedOrder;
+          choiceSetItem = getRideHailingChoiceSetItem(order.items);
+          providerBinding = choiceSetItem ? getRideHailingProviderBinding(choiceSetItem) : null;
+        }
+      }
+    } catch (error) {
+      if (!(error instanceof RideHailingProviderSyncQueryError)) {
+        throw error;
+      }
+    }
+  }
+
+  const rideOrder = await rideOrderRepo.findByOrderId(order.id);
   if (!rideOrder) {
     return throwHttpProblem({
       status: 500,
@@ -167,18 +199,13 @@ export async function buildRideHailingDetailProjection(input: {
     });
   }
 
-  const choiceSetItem = getRideHailingChoiceSetItem(input.order.items);
-  const providerBinding = choiceSetItem ? getRideHailingProviderBinding(choiceSetItem) : null;
   let providerDetail: ProviderDetailProjection | null = null;
-  if (providerBinding?.providerOrderId) {
+  if (providerBinding?.providerOrderId && syncedProviderDetail) {
     const provider = await providerRepo.findById(
       providerBinding.providerInstanceId as RideHailingProviderInstanceId,
     );
     if (provider) {
       const port = createRideHailingProviderPort({ providerInstance: provider });
-      const detail = await port.queryOrderDetail({
-        providerOrderId: providerBinding.providerOrderId,
-      });
       const shouldQueryLiveGeometry = shouldQueryProviderLiveGeometry(rideOrder.executionPhase);
       const navigationRouteQueryKind = resolveProviderNavigationRouteQueryKind(
         rideOrder.executionPhase,
@@ -199,7 +226,7 @@ export async function buildRideHailingDetailProjection(input: {
           )
         : null;
       providerDetail = projectProviderDetail({
-        detail,
+        detail: syncedProviderDetail,
         navigationRoute,
         vehicleLocation,
       });
@@ -213,8 +240,8 @@ export async function buildRideHailingDetailProjection(input: {
     contactPhone: rideOrder.contactPhone,
     selectedVehicleName: choiceSetItem
       ? getOrderItemSkuName(choiceSetItem)
-      : input.order.items[0]
-        ? getOrderItemSkuName(input.order.items[0])
+      : order.items[0]
+        ? getOrderItemSkuName(order.items[0])
         : "曹操出行",
     candidateVehicles: choiceSetItem?.candidates.map(projectCandidateVehicle) ?? [],
     provider: {
diff --git a/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts b/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts
index e2a420820..cf06b4f55 100644
--- a/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts
+++ b/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts
@@ -1,5 +1,6 @@
 import assert from "node:assert/strict";
 import { randomUUID } from "node:crypto";
+import { createServer, type Server } from "node:http";
 import { scenario } from "../_infra/scenario/scenario";
 import { requestJson } from "../_infra/http/backend-app";
 import { givenUser } from "../pr-core/_kit/builders/users";
@@ -22,6 +23,27 @@ const tradeOrderRepo = new TradeOrderRepository();
 const billRepo = new BillRepository();
 const billLineRepo = new BillLineRepository();
 
+const listen = (server: Server): Promise<string> =>
+  new Promise((resolve) => {
+    server.listen(0, "127.0.0.1", () => {
+      const address = server.address();
+      assert.equal(typeof address, "object");
+      assert.notEqual(address, null);
+      resolve(`http://127.0.0.1:${address.port}/v2`);
+    });
+  });
+
+const closeServer = (server: Server): Promise<void> =>
+  new Promise((resolve, reject) => {
+    server.close((error) => {
+      if (error) {
+        reject(error);
+        return;
+      }
+      resolve();
+    });
+  });
+
 const buildCallbackForm = (input: {
   signKey: string;
   orderId?: string;
@@ -137,100 +159,201 @@ scenario("legacy Caocao callback alias resolves provider and requires local orde
 
 scenario("Caocao callback updates ride execution and creates final bill", async () => {
   const creator = await givenUser("caocao-callback-order-owner");
-  const provider = await providerRepo.create({
-    providerType: "CAOCAO",
-    instanceKey: `scenario-caocao-callback-${randomUUID()}`,
-    status: "ACTIVE",
-    displayName: "Scenario Caocao Callback",
-    config: {
-      adapterMode: "CAOCAO_OPEN_API",
-      caocaoClientId: "scenario-caocao-callback-client",
-      signKey: "scenario-caocao-callback-secret",
-      endpointBaseUrl: "https://openapi.caocaokeji.cn/v2",
-      callbackBaseUrl: "https://api.partner-up.test",
-    },
-    createdAt: new Date("2032-01-01T00:00:00.000Z"),
-    updatedAt: new Date("2032-01-01T00:00:00.000Z"),
+  let detailQueryCount = 0;
+  const fakeCaocao = createServer((request, response) => {
+    if (request.url?.startsWith("/v2/common/queryOrderDetailV2")) {
+      detailQueryCount += 1;
+      response.writeHead(200, { "Content-Type": "application/json" });
+      response.end(
+        JSON.stringify({
+          code: 200,
+          data: {
+            phase: "FINISHED",
+            finalAmountFen: 5000,
+            driver: {
+              driverName: "李师傅",
+              driverPhone: "13900139000",
+            },
+            vehicle: {
+              brand: "曹操快车",
+              color: "蓝色",
+              plate: "浙B99999",
+            },
+          },
+          success: true,
+        }),
+      );
+      return;
+    }
+    response.writeHead(404, { "Content-Type": "application/json" });
+    response.end(JSON.stringify({ code: 404, success: false }));
   });
-  const spu = await createProductSpu({
-    name: "Scenario Caocao Callback SPU",
-    productType: "RIDE_HAILING",
-    status: "ACTIVE",
-    salesPolicy: {
-      skuSelectionPolicy: {
-        type: "CHOICE_SET",
-        min: 1,
-        max: null,
-        resolvesTo: 1,
+  const endpointBaseUrl = await listen(fakeCaocao);
+
+  try {
+    const provider = await providerRepo.create({
+      providerType: "CAOCAO",
+      instanceKey: `scenario-caocao-callback-${randomUUID()}`,
+      status: "ACTIVE",
+      displayName: "Scenario Caocao Callback",
+      config: {
+        adapterMode: "CAOCAO_OPEN_API",
+        caocaoClientId: "scenario-caocao-callback-client",
+        signKey: "scenario-caocao-callback-secret",
+        endpointBaseUrl,
+        callbackBaseUrl: "https://api.partner-up.test",
       },
-      quantityPolicy: {
-        type: "FIXED",
-        quantity: 1,
+      createdAt: new Date("2032-01-01T00:00:00.000Z"),
+      updatedAt: new Date("2032-01-01T00:00:00.000Z"),
+    });
+    const spu = await createProductSpu({
+      name: "Scenario Caocao Callback SPU",
+      productType: "RIDE_HAILING",
+      status: "ACTIVE",
+      salesPolicy: {
+        skuSelectionPolicy: {
+          type: "CHOICE_SET",
+          min: 1,
+          max: null,
+          resolvesTo: 1,
+        },
+        quantityPolicy: {
+          type: "FIXED",
+          quantity: 1,
+        },
       },
-    },
-    servicePolicy: {
-      type: "RIDE_HAILING",
-    },
-    presentation: {
-      heroImageAssetIds: [],
-      detailImageAssetIds: [],
-      sellingPoints: [],
-      parameterGroups: [],
-      noticeBlocks: [],
-    },
-  });
-  const offer = await createOffer({
-    productType: "RIDE_HAILING",
-    spuIds: [spu.id],
-    status: "ACTIVE",
-    pricingRules: [],
-    termsVersion: 1,
-  });
-  const order = await tradeOrderRepo.create({
-    family: "RIDE_HAILING",
-    offerId: offer.id,
-    createdBy: creator.user.id,
-    status: "INITIATING",
-    participants: [
-      {
-        participantId: creator.user.id,
-        userId: creator.user.id,
-        role: "CREATOR",
-        joinedVia: "API",
+      servicePolicy: {
+        type: "RIDE_HAILING",
       },
-    ],
-    splitRuleSnapshot: {
-      type: "RELATIVE",
-      shares: [{ userId: creator.user.id, percentBps: 10000 }],
-    },
-    items: [
-      {
-        kind: "CHOICE_SET",
-        itemId: randomUUID(),
-        productType: "RIDE_HAILING",
-        candidates: [
+      presentation: {
+        heroImageAssetIds: [],
+        detailImageAssetIds: [],
+        sellingPoints: [],
+        parameterGroups: [],
+        noticeBlocks: [],
+      },
+    });
+    const offer = await createOffer({
+      productType: "RIDE_HAILING",
+      spuIds: [spu.id],
+      status: "ACTIVE",
+      pricingRules: [
+        {
+          id: 1,
+          label: "五折结算",
+          description: "测试锁定 Offer policy",
+          conditionRule: true,
+          action: {
+            type: "RATIO",
+            payload: {
+              ratioBps: 5000,
+            },
+          },
+          target: {
+            level: "ORDER",
+          },
+          continue: true,
+        },
+      ],
+      termsVersion: 1,
+    });
+    const itemId = randomUUID();
+    const skuSnapshot = {
+      id: 930001,
+      version: 1,
+      name: "Scenario Caocao Express",
+      presentationSnapshot: {
+        heroImageAssetIds: [],
+        detailImageAssetIds: [],
+        sellingPoints: [],
+        parameterGroups: [],
+        noticeBlocks: [],
+      },
+      factsSnapshot: {
+        rideHailingProviderInstanceId: provider.id,
+        providerVehicleTypeCode: "EXPRESS",
+      },
+      pricingModelSnapshot: {
+        type: "DYNAMIC_QUOTE" as const,
+        calculatorSpec: {
+          version: 1 as const,
+          currency: "CNY" as const,
+          components: [],
+        },
+      },
+      cancellationPolicySnapshot: null,
+    };
+    const order = await tradeOrderRepo.create({
+      family: "RIDE_HAILING",
+      offerId: offer.id,
+      createdBy: creator.user.id,
+      status: "INITIATING",
+      participants: [
+        {
+          participantId: creator.user.id,
+          userId: creator.user.id,
+          role: "CREATOR",
+          joinedVia: "API",
+        },
+      ],
+      splitRuleSnapshot: {
+        type: "RELATIVE",
+        shares: [{ userId: creator.user.id, percentBps: 10000 }],
+      },
+      pricingExecutionSnapshot: {
+        version: 1,
+        offer: {
+          id: offer.id,
+          productType: "RIDE_HAILING",
+          termsVersion: offer.termsVersion,
+          pricingPolicySnapshot: offer.pricingPolicy,
+        },
+        items: [
           {
+            itemId,
+            quantity: 1,
+            spu: {
+              id: spu.id,
+              version: spu.version,
+              productType: spu.productType,
+              factsSnapshot: spu.facts,
+              salesPolicySnapshot: spu.salesPolicy,
+            },
             sku: {
-              id: 930001,
-              version: 1,
-              name: "Scenario Caocao Express",
-              presentationSnapshot: {
-                heroImageAssetIds: [],
-                detailImageAssetIds: [],
-                sellingPoints: [],
-                parameterGroups: [],
-                noticeBlocks: [],
-              },
-              factsSnapshot: {
-                rideHailingProviderInstanceId: provider.id,
-                providerVehicleTypeCode: "EXPRESS",
-              },
-              pricingModelSnapshot: {
-                type: "DYNAMIC_QUOTE",
-                calculatorSpec: {},
+              id: skuSnapshot.id,
+              version: skuSnapshot.version,
+              name: skuSnapshot.name,
+              factsSnapshot: skuSnapshot.factsSnapshot,
+              pricingModelSnapshot: skuSnapshot.pricingModelSnapshot,
+            },
+          },
+        ],
+        orderContext: {
+          serviceTime: null,
+        },
+      },
+      items: [
+        {
+          kind: "CHOICE_SET",
+          itemId,
+          productType: "RIDE_HAILING",
+          candidates: [
+            {
+              sku: skuSnapshot,
+              quoteSnapshot: {
+                amountFen: 3600,
+                currency: "CNY",
+                displayName: "Scenario Caocao Express",
+                estimateAmountFen: 3600,
+                quotedAt: "2031-01-01T00:00:00.000Z",
+                explanations: [],
               },
-              cancellationPolicySnapshot: null,
             },
+          ],
+          resolution: {
+            sku: skuSnapshot,
+            providerVehicleTypeCode: "EXPRESS",
+            providerVehicleTypeName: "Scenario Caocao Express",
             quoteSnapshot: {
               amountFen: 3600,
               currency: "CNY",
@@ -239,128 +362,314 @@ scenario("Caocao callback updates ride execution and creates final bill", async
               quotedAt: "2031-01-01T00:00:00.000Z",
               explanations: [],
             },
-          },
-        ],
-        resolution: {
-          sku: {
-            id: 930001,
-            version: 1,
-            name: "Scenario Caocao Express",
-            presentationSnapshot: {
-              heroImageAssetIds: [],
-              detailImageAssetIds: [],
-              sellingPoints: [],
-              parameterGroups: [],
-              noticeBlocks: [],
-            },
-            factsSnapshot: {
-              rideHailingProviderInstanceId: provider.id,
-              providerVehicleTypeCode: "EXPRESS",
+            providerBinding: {
+              providerInstanceId: provider.id,
+              providerType: "CAOCAO",
+              providerOrderId: "CC-FINAL-123",
             },
-            pricingModelSnapshot: {
-              type: "DYNAMIC_QUOTE",
-              calculatorSpec: {},
-            },
-            cancellationPolicySnapshot: null,
-          },
-          providerVehicleTypeCode: "EXPRESS",
-          providerVehicleTypeName: "Scenario Caocao Express",
-          quoteSnapshot: {
-            amountFen: 3600,
-            currency: "CNY",
-            displayName: "Scenario Caocao Express",
-            estimateAmountFen: 3600,
-            quotedAt: "2031-01-01T00:00:00.000Z",
-            explanations: [],
+            source: "DISPATCH_POLICY",
+            candidateRelation: "IN_CANDIDATES",
+            reason: null,
+            resolvedAt: "2031-01-01T00:00:00.000Z",
           },
-          providerBinding: {
-            providerInstanceId: provider.id,
-            providerType: "CAOCAO",
-            providerOrderId: "CC-FINAL-123",
-          },
-          source: "DISPATCH_POLICY",
-          candidateRelation: "IN_CANDIDATES",
-          reason: null,
-          resolvedAt: "2031-01-01T00:00:00.000Z",
+          quantity: 1,
         },
-        quantity: 1,
+      ],
+      timeout: {
+        unpaidExpiresAt: "2031-01-01T00:15:00.000Z",
+        defaultWindowMinutes: 15,
       },
-    ],
-    timeout: {
-      unpaidExpiresAt: "2031-01-01T00:15:00.000Z",
-      defaultWindowMinutes: 15,
-    },
-    terminationAttempts: [],
-  });
-  await rideOrderRepo.create({
-    orderId: order.id,
-    routeSnapshot: {
-      origin: {
-        name: "起点",
-        latitude: 30.26,
-        longitude: 120.15,
-      },
-      waypoints: [],
-      destination: {
-        name: "终点",
-        latitude: 30.28,
-        longitude: 120.17,
+      terminationAttempts: [],
+    });
+    await rideOrderRepo.create({
+      orderId: order.id,
+      routeSnapshot: {
+        origin: {
+          name: "起点",
+          latitude: 30.26,
+          longitude: 120.15,
+        },
+        waypoints: [],
+        destination: {
+          name: "终点",
+          latitude: 30.28,
+          longitude: 120.17,
+        },
+        drivingPlan: null,
       },
-      drivingPlan: null,
-    },
-    departureAt: null,
-    riders: [
+      departureAt: null,
+      riders: [
+        {
+          userId: creator.user.id,
+          displayName: "乘客",
+          phoneMasked: "138****8000",
+        },
+      ],
+      contactPhone: "13800138000",
+      executionPhase: "INITIATING",
+    });
+
+    const response = await requestJson(
+      `/api/ride-hailing/caocao/${provider.id}/callback/order-status`,
       {
-        userId: creator.user.id,
-        displayName: "乘客",
-        phoneMasked: "138****8000",
+        method: "POST",
+        headers: {
+          "content-type": "application/x-www-form-urlencoded",
+        },
+        body: buildCallbackForm({
+          callbackInfo: buildCaocaoCallbackInfo({
+            providerInstance: provider,
+            routingToken: "stg",
+          }),
+          signKey: "scenario-caocao-callback-secret",
+          orderId: order.id,
+          providerOrderId: "CC-FINAL-123",
+          event: "6",
+          finalAmountFen: "4321",
+        }).toString(),
       },
-    ],
-    contactPhone: "13800138000",
-    executionPhase: "INITIATING",
+    );
+
+    assert.equal(response.status, 200);
+    assert.equal(detailQueryCount, 1);
+    const responseBody = (await response.json()) as {
+      code: number;
+      success: boolean;
+    };
+    assert.deepEqual(responseBody, {
+      code: 200,
+      success: true,
+    });
+    const updatedOrder = await tradeOrderRepo.findById(order.id);
+    assert.equal(updatedOrder?.status, "OPEN");
+    const updatedRide = await rideOrderRepo.findByOrderId(order.id as TradeOrderId);
+    assert.equal(updatedRide?.executionPhase, "FINISHED");
+    assert.equal(updatedRide?.finalSettlementInput?.amountFen, 5000);
+    assert.equal(updatedRide?.finalSettlementInput?.providerOrderId, "CC-FINAL-123");
+    assert.equal(updatedRide?.driverSnapshot?.driverName, "李师傅");
+    assert.equal(updatedRide?.vehicleSnapshot?.plate, "浙B99999");
+    const bill = await billRepo.findBySourceOrderId(order.id);
+    assert.ok(bill);
+    const lines = await billLineRepo.listByBillId(bill.id);
+    assert.equal(lines.length, 1);
+    assert.equal(lines[0]?.amountFen, 2500);
+  } finally {
+    await closeServer(fakeCaocao);
+  }
+});
+
+scenario("Caocao callback returns retryable failure when provider detail query fails", async () => {
+  const creator = await givenUser("caocao-callback-query-failure-owner");
+  const fakeCaocao = createServer((request, response) => {
+    if (request.url?.startsWith("/v2/common/queryOrderDetailV2")) {
+      response.writeHead(500, { "Content-Type": "application/json" });
+      response.end(JSON.stringify({ code: 500, success: false }));
+      return;
+    }
+    response.writeHead(404, { "Content-Type": "application/json" });
+    response.end(JSON.stringify({ code: 404, success: false }));
   });
+  const endpointBaseUrl = await listen(fakeCaocao);
 
-  const response = await requestJson(
-    `/api/ride-hailing/caocao/${provider.id}/callback/order-status`,
-    {
-      method: "POST",
-      headers: {
-        "content-type": "application/x-www-form-urlencoded",
+  try {
+    const provider = await providerRepo.create({
+      providerType: "CAOCAO",
+      instanceKey: `scenario-caocao-callback-query-failure-${randomUUID()}`,
+      status: "ACTIVE",
+      displayName: "Scenario Caocao Callback Query Failure",
+      config: {
+        adapterMode: "CAOCAO_OPEN_API",
+        caocaoClientId: "scenario-caocao-callback-query-failure-client",
+        signKey: "scenario-caocao-callback-query-failure-secret",
+        endpointBaseUrl,
+        callbackBaseUrl: "https://api.partner-up.test",
       },
-      body: buildCallbackForm({
-        callbackInfo: buildCaocaoCallbackInfo({
-          providerInstance: provider,
-          routingToken: "stg",
-        }),
-        signKey: "scenario-caocao-callback-secret",
-        orderId: order.id,
-        providerOrderId: "CC-FINAL-123",
-        event: "6",
-        finalAmountFen: "4321",
-      }).toString(),
-    },
-  );
+      createdAt: new Date("2032-01-01T00:00:00.000Z"),
+      updatedAt: new Date("2032-01-01T00:00:00.000Z"),
+    });
+    const spu = await createProductSpu({
+      name: "Scenario Caocao Query Failure SPU",
+      productType: "RIDE_HAILING",
+      status: "ACTIVE",
+      salesPolicy: {
+        skuSelectionPolicy: {
+          type: "CHOICE_SET",
+          min: 1,
+          max: null,
+          resolvesTo: 1,
+        },
+        quantityPolicy: {
+          type: "FIXED",
+          quantity: 1,
+        },
+      },
+      servicePolicy: {
+        type: "RIDE_HAILING",
+      },
+      presentation: {
+        heroImageAssetIds: [],
+        detailImageAssetIds: [],
+        sellingPoints: [],
+        parameterGroups: [],
+        noticeBlocks: [],
+      },
+    });
+    const offer = await createOffer({
+      productType: "RIDE_HAILING",
+      spuIds: [spu.id],
+      status: "ACTIVE",
+      pricingRules: [],
+      termsVersion: 1,
+    });
+    const itemId = randomUUID();
+    const skuSnapshot = {
+      id: 930002,
+      version: 1,
+      name: "Scenario Caocao Query Failure Express",
+      presentationSnapshot: {
+        heroImageAssetIds: [],
+        detailImageAssetIds: [],
+        sellingPoints: [],
+        parameterGroups: [],
+        noticeBlocks: [],
+      },
+      factsSnapshot: {
+        rideHailingProviderInstanceId: provider.id,
+        providerVehicleTypeCode: "EXPRESS",
+      },
+      pricingModelSnapshot: {
+        type: "DYNAMIC_QUOTE" as const,
+        calculatorSpec: {
+          version: 1 as const,
+          currency: "CNY" as const,
+          components: [],
+        },
+      },
+      cancellationPolicySnapshot: null,
+    };
+    const order = await tradeOrderRepo.create({
+      family: "RIDE_HAILING",
+      offerId: offer.id,
+      createdBy: creator.user.id,
+      status: "OPEN",
+      participants: [
+        {
+          participantId: creator.user.id,
+          userId: creator.user.id,
+          role: "CREATOR",
+          joinedVia: "API",
+        },
+      ],
+      splitRuleSnapshot: {
+        type: "RELATIVE",
+        shares: [{ userId: creator.user.id, percentBps: 10000 }],
+      },
+      items: [
+        {
+          kind: "CHOICE_SET",
+          itemId,
+          productType: "RIDE_HAILING",
+          candidates: [
+            {
+              sku: skuSnapshot,
+              quoteSnapshot: {
+                amountFen: 3600,
+                currency: "CNY",
+                displayName: "Scenario Caocao Query Failure Express",
+                estimateAmountFen: 3600,
+                quotedAt: "2031-01-01T00:00:00.000Z",
+                explanations: [],
+              },
+            },
+          ],
+          resolution: {
+            sku: skuSnapshot,
+            providerVehicleTypeCode: "EXPRESS",
+            providerVehicleTypeName: "Scenario Caocao Query Failure Express",
+            quoteSnapshot: {
+              amountFen: 3600,
+              currency: "CNY",
+              displayName: "Scenario Caocao Query Failure Express",
+              estimateAmountFen: 3600,
+              quotedAt: "2031-01-01T00:00:00.000Z",
+              explanations: [],
+            },
+            providerBinding: {
+              providerInstanceId: provider.id,
+              providerType: "CAOCAO",
+              providerOrderId: "CC-QUERY-FAILURE-123",
+            },
+            source: "DISPATCH_POLICY",
+            candidateRelation: "IN_CANDIDATES",
+            reason: null,
+            resolvedAt: "2031-01-01T00:00:00.000Z",
+          },
+          quantity: 1,
+        },
+      ],
+      timeout: {
+        unpaidExpiresAt: "2031-01-01T00:15:00.000Z",
+        defaultWindowMinutes: 15,
+      },
+      terminationAttempts: [],
+    });
+    await rideOrderRepo.create({
+      orderId: order.id,
+      routeSnapshot: {
+        origin: {
+          name: "起点",
+          latitude: 30.26,
+          longitude: 120.15,
+        },
+        waypoints: [],
+        destination: {
+          name: "终点",
+          latitude: 30.28,
+          longitude: 120.17,
+        },
+        drivingPlan: null,
+      },
+      departureAt: null,
+      riders: [
+        {
+          userId: creator.user.id,
+          displayName: "乘客",
+          phoneMasked: "138****8000",
+        },
+      ],
+      contactPhone: "13800138000",
+      executionPhase: "DISPATCHING",
+    });
 
-  assert.equal(response.status, 200);
-  const responseBody = (await response.json()) as {
-    code: number;
-    success: boolean;
-  };
-  assert.deepEqual(responseBody, {
-    code: 200,
-    success: true,
-  });
-  const updatedOrder = await tradeOrderRepo.findById(order.id);
-  assert.equal(updatedOrder?.status, "OPEN");
-  const updatedRide = await rideOrderRepo.findByOrderId(order.id as TradeOrderId);
-  assert.equal(updatedRide?.executionPhase, "FINISHED");
-  assert.equal(updatedRide?.finalSettlementInput?.amountFen, 4321);
-  assert.equal(updatedRide?.finalSettlementInput?.providerOrderId, "CC-FINAL-123");
-  assert.equal(updatedRide?.driverSnapshot?.driverName, "张师傅");
-  assert.equal(updatedRide?.vehicleSnapshot?.plate, "浙A12345");
-  const bill = await billRepo.findBySourceOrderId(order.id);
-  assert.ok(bill);
-  const lines = await billLineRepo.listByBillId(bill.id);
-  assert.equal(lines.length, 1);
-  assert.equal(lines[0]?.amountFen, 4321);
+    const response = await requestJson(
+      `/api/ride-hailing/caocao/${provider.id}/callback/order-status`,
+      {
+        method: "POST",
+        headers: {
+          "content-type": "application/x-www-form-urlencoded",
+        },
+        body: buildCallbackForm({
+          callbackInfo: buildCaocaoCallbackInfo({
+            providerInstance: provider,
+            routingToken: "stg",
+          }),
+          signKey: "scenario-caocao-callback-query-failure-secret",
+          orderId: order.id,
+          providerOrderId: "CC-QUERY-FAILURE-123",
+          event: "6",
+          finalAmountFen: "4321",
+        }).toString(),
+      },
+    );
+
+    assert.equal(response.status, 503);
+    const updatedRide = await rideOrderRepo.findByOrderId(order.id as TradeOrderId);
+    assert.equal(updatedRide?.executionPhase, "DISPATCHING");
+    assert.equal(updatedRide?.finalSettlementInput, null);
+    assert.equal(updatedRide?.driverSnapshot, null);
+    assert.equal(updatedRide?.vehicleSnapshot, null);
+    assert.equal(await billRepo.findBySourceOrderId(order.id), null);
+  } finally {
+    await closeServer(fakeCaocao);
+  }
 });
diff --git a/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue b/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue
index 0fd803017..283c989cf 100644
--- a/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue
+++ b/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue
@@ -143,7 +143,10 @@ import {
   PuImg,
 } from "@partner-up-dev/design-web";
 import { computed, onMounted, onUnmounted, ref } from "vue";
-import { useCancelOrder, type CommerceOrderDetailResponse } from "@/domains/commerce/queries/useCommerce";
+import {
+  useCancelOrder,
+  type CommerceOrderDetailResponse,
+} from "@/domains/commerce/queries/useCommerce";
 import BillCard from "@/domains/commerce/ui/order-detail/BillCard.vue";
 import RideHailingSkuCard from "@/domains/commerce/ui/ordering/RideHailingSkuCard.vue";
 import type { Route, RoutePoint } from "@/domains/route/model/route";
@@ -289,7 +292,9 @@ const statusHero = computed(() => statusCopyByPhase[props.ride.executionPhase]);
 const canRequestCancellation = computed(() => props.detail.cancellation.canRequest);
 
 const showsCancelAction = computed(
-  () => props.ride.executionPhase === "DISPATCHING" && canRequestCancellation.value,
+  () =>
+    ["DISPATCHING", "ACCEPTED", "ARRIVED_AT_PICKUP"].includes(props.ride.executionPhase) &&
+    canRequestCancellation.value,
 );
 
 const cancelErrorMessage = computed(() =>
diff --git a/tasks/ride-hailing-provider-reconcile/00-task-packet.md b/tasks/ride-hailing-provider-reconcile/00-task-packet.md
new file mode 100644
index 000000000..db8a69ad1
--- /dev/null
+++ b/tasks/ride-hailing-provider-reconcile/00-task-packet.md
@@ -0,0 +1,537 @@
+# RideHailing Provider Reconcile
+
+## Objective & Hypothesis
+
+- Objective: make RideHailing order status durable even when CaoCao callback
+  notifications are delayed, missing, duplicated, or incomplete.
+- Hypothesis: RideHailing should follow the payment provider pattern: both user
+  polling and provider callbacks may trigger provider-side status queries. CaoCao
+  callback payload should be treated as routing / authentication / notification
+  material, not as execution truth. The provider sync path should query provider
+  detail as the SSoT, normalize and commit local RideHailing execution facts,
+  then apply create-order-time locked Offer / SPU / SKU pricing semantics to the
+  final provider amount and materialize final billing in the same database
+  transaction.
+
+## Guardrails Touched
+
+- Order detail polling performance and provider API load.
+- CaoCao callback reliability and idempotency.
+- RideHailing execution phase correctness.
+- Final settlement bill creation.
+- Payment-like reconciliation semantics: query paths and notify paths should
+  converge on the same provider sync code, while downstream bill creation stays
+  a separate effect/consequence after local facts are committed.
+
+## Current Understanding
+
+- Input type: Reality / Constraint.
+- Active mode: Explore / Solidify.
+- The frontend `OrderDetailPage` calls `useCommerceOrderDetail`.
+- `useCommerceOrderDetail` polls `GET /api/commerce/orders/:orderId` every
+  `2s` while RideHailing execution phase is one of:
+  - `INITIATING`
+  - `DISPATCHING`
+  - `ACCEPTED`
+  - `ARRIVED_AT_PICKUP`
+  - `IN_TRIP`
+- Backend order detail path:
+  - `apps/backend/src/controllers/commerce.controller.ts`
+  - `apps/backend/src/domains/trade/use-cases/rental-ordering-flow.ts`
+  - `apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts`
+- Current RideHailing detail projection does call
+  `RideHailingProviderPort.queryOrderDetail` when a provider order id exists.
+- Current provider query result is projection-only:
+  - it populates `rideHailing.live`
+  - it can enrich driver and vehicle display if local snapshots are empty
+  - it does not update `ride_hailing_orders`
+  - it does not update `trade_orders`
+  - it does not create final bills
+- CaoCao callback currently verifies and parses callback payload, then updates
+  local `RideHailingOrder` from callback fields. It does not re-query provider
+  detail before applying local consequences.
+- Existing final Bill creation in the callback handler manually splits the final
+  amount over `order.participants`. That bypasses the existing order
+  `splitRuleSnapshot`, Bill seed/use-case, and any explicit decision about how
+  RideHailing final settlement should relate to SKU dynamic quote pricing and
+  Offer pricing policy.
+- Confirmed decision: CaoCao provider detail is the SSoT for final amount,
+  driver / vehicle snapshots, and terminal provider state. Callback payload is
+  only a notification / routing / authentication input.
+- Confirmed decision: CaoCao provider final amount is not the Bill target total
+  by itself. It is the final provider usage amount that must still go through
+  create-order-time locked Offer / SPU / SKU pricing policy semantics before Bill
+  materialization.
+- Revised decision: do not extend the order snapshot model solely for historical
+  recomputation safety, because RideHailing final billing is not launched and
+  there are no production historical RideHailing orders to protect.
+- Confirmed decision: final billing uses create-order-time locked Offer / SPU /
+  SKU pricing policy for future active orders. This makes order-owned pricing
+  substrate persistence part of this task.
+- Confirmed non-goal for this task: do not use SKU / quote snapshots merely to
+  polish stable vehicle display or Bill label / description copy.
+
+## Payment Pattern Reference
+
+Payment already uses a stronger model:
+
+- `getPaymentTx` decodes the payment tx reference, queries the payment provider,
+  and reconciles local `BillLine` state.
+- If provider query reports success, local state is marked settled and
+  `applyPaymentSettlementConsequence` runs.
+- Payment notifications also parse provider notification, update local state,
+  and run the same settlement consequence.
+- Charge creation checks existing provider execution by querying provider first
+  when a line is already bound.
+
+Relevant files:
+
+- `apps/backend/src/domains/payment/use-cases/payment-contract.ts`
+- `apps/backend/src/domains/payment/use-cases/payment-execution.ts`
+- `apps/backend/src/domains/payment/use-cases/payment-notifications.ts`
+
+## Gap
+
+RideHailing currently has provider polling as a display-time read, not a durable
+reconciliation step.
+
+This means:
+
+- if CaoCao callback is lost, local `executionPhase` may remain stale even
+  though order detail polling already queried provider status;
+- if CaoCao callback arrives with partial fields, local snapshots and final
+  settlement may remain weaker than provider detail;
+- if callback and polling race, there is no single idempotent provider sync that
+  owns local execution fact updates, nor a separate idempotent consequence for
+  final bill creation;
+- provider query failure can currently endanger the detail endpoint instead of
+  being treated as best-effort reconciliation.
+
+## Architecture Review
+
+The earlier contract was too broad when it said one reconciler should own
+provider phase mapping, driver/vehicle snapshots, final settlement, and final
+Bill creation.
+
+Better boundary:
+
+- Provider sync owns provider truth ingestion:
+  - verify local order/provider binding assertions from the caller;
+  - use callback payload only to authenticate, route, and locate the referenced
+    provider order;
+  - query provider detail as the authoritative provider observation;
+  - normalize provider phase into local `RideHailingExecutionPhase`;
+  - commit stronger driver and vehicle snapshots;
+  - commit `finalSettlementInput` when provider final amount is authoritative.
+- Final billing stays a downstream consequence:
+  - triggered when final settlement input is committed on
+    `ride_hailing_orders`;
+  - applied in the same database transaction as the final settlement commit so a
+    local `FINISHED` / final settlement state cannot be persisted without its
+    final Bill;
+  - implemented as an idempotent use case such as
+    `applyRideHailingFinalSettlementConsequence`;
+  - owns final Bill / BillLine creation rules and no-ops if the final Bill
+    already exists.
+
+This matches the existing Product TDD claim that the final Bill is created only
+after provider final settlement input is committed, not lazily from Order
+Detail reads. If Order Detail polling triggers provider sync, that request may
+also invoke the consequence in the same transaction, but the consequence is
+still driven by the committed RideHailing fact, not by projection assembly.
+
+## Deeper Architecture Risks
+
+The final-Bill boundary issue points to several broader design risks in the
+current plan and implementation.
+
+### Durable Facts vs Live Projection
+
+Do not let one provider sync path own both durable execution facts and live map
+telemetry.
+
+- Durable facts:
+  - provider order phase normalized into local execution phase;
+  - driver / vehicle snapshots worth persisting;
+  - final settlement input.
+- Live projection:
+  - driver location;
+  - navigation route;
+  - ETA / remaining distance.
+
+Live geometry is high-frequency display state. It should remain best-effort
+projection data or move to a dedicated tracking API, consistent with the
+Product TDD note that high-frequency ride tracking should not force the whole
+Order Detail projection to become a high-frequency payload.
+
+### Provider Detail As State Machine Source
+
+The current code has two phase surfaces:
+
+- callback event ids are mapped in
+  `handle-caocao-order-status-callback.ts`;
+- query detail exposes raw provider `phase/status` strings from the CaoCao
+  adapter.
+
+The target design should remove callback event ids from business state updates.
+Callback should only notify the backend to reconcile by provider detail. This
+avoids delayed callback payloads regressing local state.
+
+The implementation still needs one provider-detail mapping rule for:
+
+- provider detail observation -> local `RideHailingExecutionPhase`;
+- unsupported / unknown provider detail phases;
+- provider detail terminal states such as `FINISHED` and `CANCELLED`.
+
+No separate callback-event state machine should remain.
+
+### Snapshot Merge Semantics
+
+Provider-detail observations should merge snapshots, not blindly replace them.
+
+- non-empty provider fields may fill missing local fields;
+- missing / empty provider detail fields should not erase existing driver /
+  vehicle snapshots;
+- if two non-empty values conflict, the rule should be explicit:
+  provider-detail observation wins, or newer observation wins only when
+  timestamp is trustworthy.
+
+### Callback Query Failure Policy
+
+Because callback payload is not business truth, a provider detail query failure
+means the callback cannot safely update local execution facts.
+
+Preferred shape:
+
+- verify signature and local provider binding;
+- use callback fields only to locate the referenced local order / provider
+  binding;
+- attempt provider detail query;
+- if query succeeds, apply provider-detail observation;
+- if query fails, do not mutate local execution facts and make the failure
+  observable;
+- return retryable non-2xx to CaoCao because there is no callback-payload
+  fallback.
+
+Confirmed decision: callback-triggered provider detail query failure returns a
+retryable non-2xx response to CaoCao.
+
+### Read Path Side Effects
+
+`GET /api/commerce/orders/:orderId` may trigger best-effort provider sync, but
+the read projection must be built from a coherent post-sync state.
+
+Implications:
+
+- after sync mutates local order / ride facts / bill state, reload the facts
+  used for the response or build the response from returned synchronized facts;
+- provider query failure should not fail the whole order detail response;
+- avoid writing on every 2s poll when the normalized facts have not changed;
+- terminal phases should stop high-frequency provider polling once local state
+  is caught up.
+
+### Consequence Reliability
+
+If final settlement is committed and Bill creation fails, frontend polling may
+stop because the phase is already `FINISHED`. Relying only on the next Order
+Detail poll is therefore unsafe.
+
+Decision for this slice: commit final settlement input and final Bill creation
+inside one database transaction. The consequence remains a separate use case /
+domain boundary, but it must be callable with the same transaction executor so
+there is no durable `finalSettlementInput` without a matching final Bill.
+
+### Final Bill Derivation
+
+The final Bill should not be hand-built from `order.participants.length`.
+
+Required existing capabilities to reuse:
+
+- `TradeOrder.splitRuleSnapshot` for payer allocation;
+- `materializeChargeLinesFromSplitRule` for deterministic fen distribution;
+- `createBillFromSeed` / Bill-owned creation semantics;
+- order-time SKU snapshots already present in choice-set candidates /
+  resolution.
+
+Provider final amount is the authoritative usage-based settlement input, but it
+is not the customer-facing Bill target total by itself. The final Bill target
+must be derived by applying Offer / SPU / SKU pricing policy to that provider
+amount.
+
+Historical-order compatibility is not a driver for snapshot expansion in this
+slice because the RideHailing final-billing flow is not launched. The driver is
+forward-looking active-order semantics: final billing must use the pricing
+policy locked at create-order time, not whatever policy is current when the
+bill is created.
+
+This is a Trade order-base responsibility, not a RideHailing-only durable
+concept. RideHailing is the first order family that needs to consume the locked
+pricing substrate after execution because its final provider amount arrives
+later. The substrate should therefore live on the base order / order item
+snapshot surface, while RideHailing-specific facts remain on
+`ride_hailing_orders`.
+
+Therefore this task should extend the order snapshot model with the missing
+base-order pricing substrate needed for later final pricing.
+
+- final provider amount from CaoCao detail becomes the final dynamic quote input;
+- create-order-time locked pricing policy derives the final customer-facing Bill
+  target total;
+- allocate the derived Bill target total via the order split rule;
+- use Bill seed/use-case for materialization;
+- keep SKU / quote snapshot display-copy improvements out of this task unless
+  they are required for pricing substrate correctness.
+
+### Cancellation Freshness
+
+RideHailing cancellation currently gates on local `DISPATCHING`. If callbacks
+are delayed or lost, that phase may be stale. The cancellation write path should
+sync provider execution state before deciding whether cancellation is still
+allowed, then re-check local eligibility.
+
+## Impact Handshake For Execute
+
+Address and object:
+
+- `apps/backend/src/domains/trade/services/pricing-application.ts`: add or reuse
+  an entrypoint that can price RideHailing final provider amount through the
+  create-order-time locked Offer / SPU / SKU pricing policy.
+- `apps/backend/src/domains/trade/use-cases/create-order.ts`: populate the base
+  order locked pricing substrate at create-order time for order types that may
+  need later pricing re-application.
+- `apps/backend/src/domains/trade/model/order.ts` and
+  `apps/backend/src/entities/trade-order.ts`: persist the order-owned pricing
+  substrate needed for locked final pricing.
+- `apps/backend/src/domains/ride-hailing/use-cases/*`: provider-detail sync and
+  callback notify handling.
+- `apps/backend/src/domains/bill/use-cases/*` and bill services: final Bill
+  materialization via Bill seed and split rule.
+- Scenario fixtures / migrations / tests that construct RideHailing order item
+  snapshots.
+
+State diff:
+
+- From: RideHailing final amount is persisted from callback and final Bill is
+  manually split over participants.
+- To: provider detail final amount is a SSoT usage input; create-order-time
+  locked Offer / SPU / SKU pricing policy derives final Bill target; Bill lines
+  are materialized from the order split rule in the same transaction as final
+  settlement commit.
+
+Blast radius forecast:
+
+- Trade order item snapshot schema and test fixtures.
+- RideHailing create-order and order-detail projection.
+- CaoCao callback semantics and retry behavior.
+- Bill creation idempotency and split allocation.
+- PricingApplication API surface.
+- Scenario tests for RideHailing order finish and final payment.
+
+Invariants:
+
+- Callback payload never writes business execution facts.
+- There is no production historical RideHailing final-billing data to preserve.
+- Final Bill derivation must use create-order-time locked pricing policy.
+- `finalSettlementInput` must not commit without its corresponding final Bill.
+- Provider query failure must not break normal Order Detail reads.
+- Final Bill materialization remains idempotent.
+
+Verification:
+
+- Unit tests for final pricing derivation through create-order-time locked
+  pricing policy.
+- Unit tests for pricing substrate persistence.
+- Unit tests for callback-as-notify and provider-detail-only fact updates.
+- Unit tests for same-transaction final settlement + final Bill materialization.
+- Backend scenario tests for lost callback, callback retryable provider-detail
+  failure, final Bill pricing policy application, and split-rule allocation.
+- Existing RideHailing browser scenario remains green after final Bill flow.
+
+## Debt Cleanup In Scope
+
+Clean these debts while implementing this task because they sit on the same
+behavioral surface:
+
+- Move `ensureRideFinalBill` out of
+  `handle-caocao-order-status-callback.ts` into a dedicated final-settlement
+  consequence/use-case.
+- Remove callback-derived business writes:
+  - callback event id -> execution phase mapping;
+  - callback raw driver / vehicle snapshot extraction;
+  - callback raw final amount parsing for business state.
+- Keep callback parsing for signature, route, external order id, provider order
+  id, and local binding validation only.
+- Replace manual participant-count splitting with
+  `materializeChargeLinesFromSplitRule` and Bill seed materialization.
+- Split provider-detail synchronization from live geometry projection so
+  `queryDriverLocation` / `queryDriverRoute` remain projection-only.
+- Make `GET /api/commerce/orders/:orderId` provider-detail sync best-effort and
+  response-coherent after any mutation.
+- Make RideHailing cancellation sync provider detail before deciding local
+  cancellability.
+- Extract shared RideHailing provider execution context loading so callback,
+  order detail sync, cancellation, and fee confirmation do not each reimplement
+  provider binding resolution.
+- Update tests that currently assert callback-payload-derived final settlement
+  to assert provider-detail-derived settlement instead.
+
+## Proposed Topology
+
+```mermaid
+sequenceDiagram
+  participant P as OrderDetailPage
+  participant API as GET /api/commerce/orders/:orderId
+  participant S as Provider sync
+  participant E as Final settlement consequence
+  participant C as CaoCao provider
+  participant DB as Local DB
+
+  P->>API: poll while order is active
+  API->>S: syncRideHailingOrderWithProvider(orderId)
+  S->>DB: load order, ride facts, provider binding
+  S->>C: queryOrderDetail(providerOrderId)
+  S->>DB: transactionally commit phase, snapshots, finalSettlementInput
+  opt finalSettlementInput committed
+    S->>E: applyRideHailingFinalSettlementConsequence(orderId)
+    E->>DB: same transaction creates final Bill / BillLines if missing
+  end
+  API->>DB: reload coherent post-sync order facts
+  opt accepted / arrived / in trip projection only
+    API->>C: queryDriverLocation / queryDriverRoute
+  end
+  API-->>P: local state plus live projection
+```
+
+```mermaid
+sequenceDiagram
+  participant C as CaoCao callback
+  participant API as Callback handler
+  participant S as Provider sync
+  participant E as Final settlement consequence
+  participant Provider as CaoCao provider
+  participant DB as Local DB
+
+  C->>API: signed callback
+  API->>API: verify signature, route, and referenced binding
+  API->>S: syncRideHailingOrderWithProvider(orderId)
+  S->>Provider: queryOrderDetail(providerOrderId)
+  alt provider detail succeeds
+    S->>DB: commit provider-detail execution facts
+    opt finalSettlementInput committed
+      S->>E: applyRideHailingFinalSettlementConsequence(orderId)
+      E->>DB: same transaction creates final Bill / BillLines if missing
+    end
+    API-->>C: ack
+  else provider detail fails
+    S-->>API: retryable sync failure
+    API-->>C: retryable non-2xx
+  end
+```
+
+## Proposed Contract
+
+- Add a backend-owned use case, likely under
+  `apps/backend/src/domains/ride-hailing/use-cases/`, named around
+  `syncRideHailingOrderWithProvider`.
+- Inputs:
+  - `orderId`
+  - optional `providerInstanceId` / `providerOrderId` assertions from callback
+    for routing and binding validation only
+  - optional `trigger`: `ORDER_DETAIL_POLL` | `CAOCAO_CALLBACK` | future job
+- Behavior:
+  - load local trade order and ride-hailing facts;
+  - resolve provider binding from order items;
+  - no-op if there is no provider order id;
+  - query provider order detail as the authoritative provider observation;
+  - normalize provider detail through one shared mapping service;
+  - merge driver and vehicle snapshots when provider has stronger data;
+  - persist `finalSettlementInput` when provider final amount is authoritative,
+    with an explicit conflict rule when a different final amount was already
+    committed;
+  - derive the final customer-facing Bill target by applying create-order-time
+    locked Offer / SPU / SKU pricing policy semantics to provider final amount;
+  - update `TradeOrder` from `INITIATING` to `OPEN` when provider order is live,
+    then ensure callers reload any response facts affected by this update;
+  - invoke final settlement consequence when a final settlement input is present
+    or newly committed, without embedding Bill creation rules in provider sync;
+  - run final settlement commit and final Bill creation in the same transaction;
+  - preserve idempotency for repeated callbacks and polling.
+- Add a separate idempotent use case, likely named
+  `applyRideHailingFinalSettlementConsequence`, that:
+  - loads `ride_hailing_orders.finalSettlementInput`;
+  - no-ops if final settlement is missing or final Bill already exists;
+  - creates the final Bill and BillLines from the committed final settlement
+    input, locked pricing policy result, order split rule, and Bill seed
+    semantics;
+  - remains callable from callback, provider sync, and future repair jobs.
+- Error policy:
+  - order detail polling should not fail solely because provider query fails;
+  - Bill consequence failure should be observable, but should not turn provider
+    detail projection assembly into lazy Bill ownership;
+  - callback should reject invalid signature / route / provider binding mismatch;
+  - callback provider-detail query failure should not apply callback status /
+    amount / snapshot fields as fallback;
+  - callback provider-detail query failure returns retryable non-2xx to CaoCao;
+  - provider query failures should be observable but best-effort for user polling.
+
+## Open Questions
+
+- What is the authoritative CaoCao detail field for final amount in query detail?
+  Current parser exposes `finalAmountFen`, but production payload should be
+  verified against CaoCao docs / pre-prod traces.
+- Which provider phases should map to local terminal states?
+  Callback event ids should no longer drive local business state; query detail
+  exposes `phase/status` and should be the provider SSoT.
+- Should order detail return live provider projection from the provider sync
+  result, from freshly reloaded DB state, or both?
+- Should polling reconciliation be synchronous on every poll, rate-limited, or
+  fire-and-forget with a short freshness window?
+- If final settlement consequence fails after `finalSettlementInput` is
+  committed, the selected answer for this slice is: it should not be committed
+  separately; final settlement input and final Bill creation should share one
+  transaction.
+- Should committed final settlement be immutable, or should a later provider
+  correction reconcile the existing final Bill to a new target amount?
+- Which use-case owns final Bill creation:
+  `domains/bill/use-cases` as Bill-owned materialization, or
+  `domains/trade/use-cases` as order lifecycle consequence orchestration?
+- What is the minimal locked pricing substrate shape, and should it live inside
+  choice-set item snapshots, a base order pricing snapshot, or a dedicated
+  order-owned pricing snapshot?
+
+## Verification Plan
+
+- Unit tests:
+  - provider detail phase maps to local execution phase;
+  - callback event/status/amount fields are ignored for local business facts;
+  - provider final amount commits `finalSettlementInput`;
+  - final settlement consequence creates exactly one final Bill in the same
+    transaction as final settlement commit;
+  - final provider amount is passed through create-order-time locked Offer / SPU
+    / SKU pricing policy semantics before Bill target derivation;
+  - final Bill uses `splitRuleSnapshot` allocation instead of manual participant
+    count splitting;
+  - repeated provider sync and repeated consequence application are idempotent;
+  - provider query failure does not break order detail projection.
+- Backend scenario tests:
+  - lost callback: fake provider advances order, `GET /api/commerce/orders/:id`
+    poll reconciles local phase;
+  - cancellation path syncs provider state before allowing / rejecting cancel;
+  - callback path: callback triggers provider query and persists only
+    provider-detail-derived final amount / snapshots;
+  - callback failure path: provider detail query fails after a valid callback and
+    no callback status / amount / snapshot is applied, while the response is
+    retryable non-2xx;
+  - final Bill applies create-order-time locked Offer / SPU / SKU pricing policy
+    semantics to CaoCao final amount before split allocation;
+  - callback and polling race remains idempotent.
+- System scenario:
+  - `OrderDetailPage` polling eventually reflects provider state without relying
+    on callback delivery.
+
+## Next Step
+
+- Move from Explore/Solidify to Execute after confirming the exact final amount
+  and provider phase mapping for CaoCao query detail.
+- Use `tasks/ride-hailing-provider-reconcile/01-implementation-plan.md` as the
+  execution checklist once implementation starts.
diff --git a/tasks/ride-hailing-provider-reconcile/01-implementation-plan.md b/tasks/ride-hailing-provider-reconcile/01-implementation-plan.md
new file mode 100644
index 000000000..8383a080b
--- /dev/null
+++ b/tasks/ride-hailing-provider-reconcile/01-implementation-plan.md
@@ -0,0 +1,433 @@
+# RideHailing Provider Reconcile Implementation Plan
+
+## Purpose
+
+This file turns the task packet decisions into an execution plan.
+
+Target outcome:
+
+- callback is a provider reconcile notification, not business truth;
+- CaoCao query detail is the SSoT for provider phase, final provider amount,
+  driver snapshot, and vehicle snapshot;
+- final provider amount is priced through create-order-time locked Offer / SPU /
+  SKU policy before Bill materialization;
+- final settlement input and final Bill creation commit in the same database
+  transaction;
+- order detail polling and callback handling converge on the same provider sync
+  path.
+
+## Commit Shape
+
+Prefer two reviewable commits.
+
+1. `feat(ride-hailing): reconcile orders from provider detail`
+   - provider detail observation model and phase mapping;
+   - shared provider execution context loader;
+   - provider sync use case;
+   - callback-as-notify refactor;
+   - order detail best-effort sync;
+   - cancellation pre-sync.
+2. `feat(ride-hailing): materialize final bills from locked pricing`
+   - order-time pricing substrate persistence;
+   - final settlement consequence use case;
+   - Bill seed / split rule materialization;
+   - tests for pricing, idempotency, and callback/polling convergence.
+
+If the pricing substrate migration forces large fixture churn, keep the two
+commit boundary but put schema/model/fixture work in commit 2 with the final
+Bill consequence.
+
+## Phase 0 - Lock Provider Detail Contract
+
+Goal: avoid building reconciliation against a vague CaoCao detail shape.
+
+Actions:
+
+- inspect current CaoCao adapter detail parser and tests;
+- verify the provider detail fields used for:
+  - provider order id;
+  - raw provider phase / status;
+  - final provider amount in fen;
+  - driver snapshot;
+  - vehicle snapshot;
+  - cancellation / terminal state indicators;
+- add focused adapter tests around the confirmed detail payload shapes;
+- keep callback event id mapping out of the new business-state path.
+
+Primary files:
+
+- `apps/backend/src/domains/ride-hailing/services/caocao-provider.ts`
+- existing CaoCao provider tests / fixtures.
+
+Acceptance:
+
+- one normalized provider-detail observation can be produced without reading
+  callback status/event fields;
+- unknown provider detail phases are explicit and observable;
+- final amount field precedence is tested.
+
+## Phase 1 - Add Shared Provider Execution Context
+
+Goal: callback, order detail polling, cancellation, and fee confirmation should
+not each resolve provider binding differently.
+
+Actions:
+
+- extract a backend-owned loader for local RideHailing provider execution
+  context;
+- load:
+  - trade order;
+  - ride-hailing order facts;
+  - selected ride-hailing order item / choice-set binding;
+  - provider instance;
+  - provider order id when present;
+  - split rule snapshot;
+  - order-time pricing substrate once Phase 5 adds it;
+- support optional caller assertions:
+  - provider instance id;
+  - provider order id;
+  - external order id / order reference from callback;
+- return typed mismatch errors for invalid callback binding.
+
+Primary files:
+
+- `apps/backend/src/domains/ride-hailing/use-cases/*`
+- `apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts`
+- `apps/backend/src/controllers/commerce.controller.ts`
+
+Acceptance:
+
+- callback path can validate route/binding without applying callback business
+  facts;
+- order detail and cancellation can reuse the same context loader;
+- no duplicate provider binding lookup logic is introduced.
+
+## Phase 2 - Normalize Provider Detail Into Local Execution Facts
+
+Goal: create one mapping from provider detail observation to durable local
+RideHailing facts.
+
+Actions:
+
+- introduce a normalized observation type, for example
+  `RideHailingProviderOrderObservation`;
+- map provider detail phase/status to `RideHailingExecutionPhase`;
+- define terminal handling for `FINISHED`, `CANCELLED`, and provider failure
+  states;
+- define snapshot merge semantics:
+  - non-empty provider fields may overwrite stale local provider fields;
+  - empty provider fields must not erase existing snapshots;
+  - conflicts use provider detail as the SSoT unless there is a stronger
+    timestamped rule already available;
+- keep driver location and route geometry out of durable sync.
+
+Primary files:
+
+- `apps/backend/src/domains/ride-hailing/model/*`
+- `apps/backend/src/domains/ride-hailing/services/*`
+- `apps/backend/src/domains/ride-hailing/use-cases/*`
+
+Acceptance:
+
+- callback event id to execution phase mapping is no longer used for business
+  writes;
+- provider detail phase mapping is unit-tested;
+- snapshot merge behavior is unit-tested.
+
+## Phase 3 - Build Provider Sync Use Case
+
+Goal: make provider query the common reconciliation primitive.
+
+Actions:
+
+- add `syncRideHailingOrderWithProvider` under RideHailing use cases;
+- inputs:
+  - `orderId`;
+  - optional provider assertion fields from callback;
+  - `trigger`: `ORDER_DETAIL_POLL`, `CAOCAO_CALLBACK`, `CANCEL_REQUEST`, future
+    job;
+- behavior:
+  - load shared execution context;
+  - no-op when no provider order id exists;
+  - query provider order detail;
+  - normalize provider observation;
+  - avoid DB writes when normalized facts are unchanged;
+  - update execution phase, driver snapshot, vehicle snapshot, and final
+    settlement input from provider detail only;
+  - return the synchronized facts needed by callers or a reload hint;
+  - expose provider query failures distinctly from binding/auth failures.
+
+Primary files:
+
+- `apps/backend/src/domains/ride-hailing/use-cases/sync-ride-hailing-order-with-provider.ts`
+- `apps/backend/src/domains/ride-hailing/use-cases/handle-caocao-order-status-callback.ts`
+- `apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts`
+
+Acceptance:
+
+- repeated sync is idempotent;
+- provider query failure does not mutate local execution facts;
+- local terminal state is derived from provider detail, not protected by
+  callback-specific guards;
+- provider detail is the only source used for final settlement input.
+
+## Phase 4 - Refactor CaoCao Callback As Notify
+
+Goal: callback should authenticate, route, and trigger reconcile.
+
+Actions:
+
+- keep callback signature verification and route parsing;
+- keep callback fields needed to locate and validate local binding;
+- remove callback-derived business writes:
+  - event id to execution phase;
+  - raw callback driver / vehicle snapshots;
+  - raw callback final amount;
+- call `syncRideHailingOrderWithProvider` after binding validation;
+- if provider detail query fails, return retryable non-2xx to CaoCao;
+- if binding/signature validation fails, return the existing invalid-callback
+  error semantics.
+
+Primary files:
+
+- `apps/backend/src/domains/ride-hailing/use-cases/handle-caocao-order-status-callback.ts`
+- callback controller route files.
+
+Acceptance:
+
+- callback tests prove callback payload status/amount/snapshot are ignored;
+- callback-triggered provider query failure returns retryable non-2xx;
+- valid callback plus provider detail success updates local facts from provider
+  detail.
+
+## Phase 5 - Persist Base Order Pricing Substrate
+
+Goal: later Bill creation must use the Trade order's create-order-time pricing
+policy snapshot, not mutable current Offer / SPU / SKU rows.
+
+Ownership:
+
+- the durable snapshot is a Trade order-base concern;
+- RideHailing consumes it because final usage amount arrives after execution;
+- RideHailing-specific provider facts stay on `ride_hailing_orders`;
+- do not introduce a `ride_hailing_orders`-owned pricing policy field unless a
+  genuinely provider-specific pricing fact is discovered.
+
+Actions:
+
+- inspect `PricingApplication` required inputs for dynamic quote pricing;
+- define the minimal base-order pricing substrate needed to price a runtime
+  amount later;
+- persist that substrate at create-order time on the base order / order item
+  snapshot surface;
+- prefer a shape that is explicit enough for active-order correctness without
+  expanding display snapshots for this task;
+- add migration / entity / model changes;
+- update factories and fixtures that create RideHailing orders.
+
+Important constraint:
+
+- this is not for historical recomputation. There are no launched historical
+  RideHailing final-billing orders to preserve. The reason is forward active
+  order correctness.
+
+Primary files:
+
+- `apps/backend/src/domains/trade/model/order.ts`
+- `apps/backend/src/entities/trade-order.ts`
+- `apps/backend/src/domains/trade/use-cases/create-order.ts`
+- `apps/backend/src/domains/trade/services/pricing-application.ts`
+- migrations under the backend migration owner.
+
+Acceptance:
+
+- newly created orders that may need later pricing re-application carry the
+  locked policy substrate needed for final pricing;
+- the substrate is not stored as a RideHailing-only field;
+- final pricing can run without reading current Offer / SPU / SKU policy rows;
+- tests prove policy changes after create-order do not affect final billing.
+
+## Phase 6 - Extract Final Settlement Consequence
+
+Goal: move final Bill creation out of callback and make it an order-fact
+consequence.
+
+Actions:
+
+- create `applyRideHailingFinalSettlementConsequence`;
+- input should include a transaction executor or run inside the provider sync
+  transaction;
+- load committed `finalSettlementInput`;
+- no-op if final settlement is absent or final Bill already exists;
+- derive customer-facing Bill target by applying locked pricing policy to the
+  provider final amount;
+- materialize charge lines through:
+  - `TradeOrder.splitRuleSnapshot`;
+  - `materializeChargeLinesFromSplitRule`;
+  - Bill seed / Bill use case semantics;
+- preserve existing Bill idempotency and unique `source_order_id` behavior.
+
+Primary files:
+
+- `apps/backend/src/domains/ride-hailing/use-cases/*`
+- `apps/backend/src/domains/bill/services/materialize-charge-lines.ts`
+- `apps/backend/src/domains/bill/use-cases/create-bill-from-seed.ts`
+- `apps/backend/src/entities/bill.ts`
+
+Acceptance:
+
+- `ensureRideFinalBill` is removed from callback handler;
+- final settlement input and final Bill creation commit in one DB transaction;
+- manual participant-count splitting is gone;
+- final Bill total uses locked pricing result, not raw provider amount directly;
+- repeated consequence application creates one Bill only.
+
+## Phase 7 - Wire Order Detail Polling
+
+Goal: user polling should reconcile stale local state without making provider
+failure break the detail page.
+
+Actions:
+
+- before building RideHailing detail projection, best-effort call provider sync
+  when local phase is active and provider order id exists;
+- catch provider query failures and keep the order detail response available;
+- after a successful sync mutation, reload local order / ride facts or build the
+  response from synchronized facts;
+- keep `queryDriverLocation` and `queryDriverRoute` as projection-only live
+  geometry calls;
+- avoid provider sync once local terminal state is already coherent.
+
+Primary files:
+
+- `apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts`
+- `apps/backend/src/domains/trade/use-cases/rental-ordering-flow.ts`
+- `apps/backend/src/controllers/commerce.controller.ts`
+
+Acceptance:
+
+- lost callback scenario is repaired by order detail polling;
+- provider query failure does not fail `GET /api/commerce/orders/:orderId`;
+- response reflects post-sync durable facts when sync succeeds.
+
+## Phase 8 - Wire Cancellation Freshness
+
+Goal: local stale phase should not allow or deny cancellation incorrectly.
+
+Actions:
+
+- call provider sync before local cancellation eligibility check;
+- re-check local ride phase after sync;
+- keep provider cancellation command behavior separate from detail sync;
+- return existing user-facing cancellation errors when provider state makes
+  cancellation invalid.
+
+Primary files:
+
+- RideHailing cancellation use case / controller files.
+
+Acceptance:
+
+- if provider has already advanced beyond cancellable phase, local cancellation
+  is rejected after sync;
+- if provider still allows cancellation, existing cancellation behavior remains
+  unchanged.
+
+## Phase 9 - Verification Matrix
+
+Run focused tests first, then broader gates.
+
+Unit tests:
+
+- provider detail phase mapping;
+- snapshot merge semantics;
+- callback ignores payload status / amount / snapshot;
+- provider query failure in callback returns retryable non-2xx and mutates
+  nothing;
+- final settlement consequence:
+  - same transaction with final settlement input;
+  - locked pricing policy application;
+  - split rule allocation;
+  - idempotency;
+- order detail provider sync failure remains best-effort.
+
+Backend scenario tests:
+
+- lost callback repaired by `GET /api/commerce/orders/:orderId`;
+- callback success path persists provider-detail-derived facts only;
+- callback provider-detail failure is retryable;
+- final bill uses create-order-time locked policy even if current policy changes;
+- cancellation pre-sync closes stale local loopholes;
+- callback and polling race remains idempotent.
+
+Commands:
+
+- `pnpm test:unit:backend`
+- `pnpm test:scenario:backend`
+- narrower test commands during development as needed;
+- `pnpm check:static` before final push if time and unrelated baseline permit.
+
+## Phase 10 - Pre-Deployment Notes
+
+Before pushing for CI / preprod deployment:
+
+- ensure migrations are included and reversible according to the repo migration
+  pattern;
+- ensure env-limited migration SQL is added only if preprod test data needs it;
+- confirm the task packet and this plan reflect any implementation deviations;
+- prepare a short deployment note:
+  - callback now triggers provider detail reconcile;
+  - callback provider-detail failure returns retryable non-2xx;
+  - order detail polling can mutate local RideHailing facts best-effort;
+  - final settlement and final Bill commit atomically.
+
+## Stop Conditions
+
+Pause and return to design review if any of these happen:
+
+- CaoCao query detail cannot reliably expose final amount or terminal phase;
+- locked pricing substrate requires reading mutable current Offer / SPU / SKU
+  rows at final settlement time;
+- Bill creation cannot be called safely inside the same transaction;
+- order detail polling would need to perform high-frequency live geometry writes;
+- final Bill derivation conflicts with existing product or Bill ownership docs.
+
+## Implementation Notes
+
+- Implemented base-order `pricingExecutionSnapshot` on `trade_orders`, not a
+  RideHailing-owned pricing field.
+- RideHailing callback now verifies callback routing/signature, then queries
+  provider detail through the shared sync path. Callback status, driver,
+  vehicle, and amount fields are not used as business truth.
+- `syncRideHailingOrderWithProvider` owns provider-detail-derived local facts:
+  execution phase, driver snapshot, vehicle snapshot, and final settlement
+  input.
+- `applyRideHailingFinalSettlementConsequence` owns final Bill creation from the
+  committed RideHailing final settlement input, locked base-order pricing
+  snapshot, split rule, and Bill seed.
+- Order Detail polling now best-effort reconciles provider detail before
+  response projection, and skips provider live projection if detail query fails.
+- RideHailing cancellation pre-syncs provider detail and permits cancellation
+  before trip start (`DISPATCHING`, `ACCEPTED`, `ARRIVED_AT_PICKUP`).
+- Frontend cancellation affordance was aligned with the backend pre-trip
+  cancellable phases.
+
+## Verification Completed
+
+- `pnpm check:type:backend`
+- `pnpm check:type:frontend`
+- `pnpm test:unit:backend`
+- `pnpm exec vitest run --config vitest.backend.config.ts --project backend-scenario apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts`
+- `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+- `pnpm db:lint`
+- `pnpm db:check`
+- `pnpm exec biome lint ...` over the changed backend/frontend source and
+  scenario files.
+
+Observed unrelated baseline:
+
+- `pnpm test:scenario:backend -- apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts`
+  did not filter by file in this workspace and ran all backend scenarios; it
+  exposed an unrelated payment provider duplicate-active-client failure. The
+  RideHailing callback scenario was verified with the explicit `pnpm exec
+  vitest run ... <file>` command above.
diff --git a/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts b/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
index 3840384cf..23536ad22 100644
--- a/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
+++ b/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
@@ -564,6 +564,7 @@ async function assertRideHailingOrderDetail(
     expectedDispatchingVehicleLabels?: string[];
     expectedResolvedVehicleLabel?: string;
     expectedRiderNames?: string[];
+    expectedStatusTitle?: string;
   } = {},
 ): Promise<void> {
   const expectedDispatchingVehicleLabels = input.expectedDispatchingVehicleLabels ?? [
@@ -571,6 +572,7 @@ async function assertRideHailingOrderDetail(
   ];
   const expectedResolvedVehicleLabel = input.expectedResolvedVehicleLabel ?? "系统曹操快车";
   const expectedRiderNames = input.expectedRiderNames ?? [];
+  const expectedStatusTitle = input.expectedStatusTitle ?? "接客中";
 
   await page.getByTestId("order-detail.page").waitFor({
     state: "visible",
@@ -583,23 +585,27 @@ async function assertRideHailingOrderDetail(
   });
   await assertLocatorTextIncludes({
     actual: page.getByTestId("order-detail.ride-hailing.status-title").textContent(),
-    expected: "派单中",
+    expected: expectedStatusTitle,
     label: "RideHailing status hero title",
   });
-  const dispatchingVehicleSection = page.getByTestId("order-detail.ride-hailing.dispatching-skus");
-  await dispatchingVehicleSection.waitFor({
-    state: "visible",
-    timeout: 10_000,
-  });
-  const dispatchingVehicleCards = dispatchingVehicleSection.getByTestId(
-    "order-detail.ride-hailing.vehicle-card",
-  );
-  assert.equal(await dispatchingVehicleCards.count(), expectedDispatchingVehicleLabels.length);
-  for (const label of expectedDispatchingVehicleLabels) {
-    await dispatchingVehicleCards.filter({ hasText: label }).waitFor({
+  if (expectedStatusTitle === "派单中") {
+    const dispatchingVehicleSection = page.getByTestId(
+      "order-detail.ride-hailing.dispatching-skus",
+    );
+    await dispatchingVehicleSection.waitFor({
       state: "visible",
       timeout: 10_000,
     });
+    const dispatchingVehicleCards = dispatchingVehicleSection.getByTestId(
+      "order-detail.ride-hailing.vehicle-card",
+    );
+    assert.equal(await dispatchingVehicleCards.count(), expectedDispatchingVehicleLabels.length);
+    for (const label of expectedDispatchingVehicleLabels) {
+      await dispatchingVehicleCards.filter({ hasText: label }).waitFor({
+        state: "visible",
+        timeout: 10_000,
+      });
+    }
   }
   const resolvedVehicleSection = page.getByTestId(
     "order-detail.ride-hailing.resolved-vehicle-section",
@@ -892,7 +898,7 @@ scenario("commerce_ride_hailing_ordering_reaches_order_detail", async (ctx) => {
     const fakeOrders = await readFakeCaocaoOrders();
     assert.equal(fakeOrders.length, 1);
     assert.equal(fakeOrders[0]?.phase, "ACCEPTED");
-    await waitForRideHailingMapMode(page, "SEARCHING_ORIGIN");
+    await waitForRideHailingMapMode(page, "PICKING_UP");
 
     const acceptedOrder = await setFakeCaocaoOrderPhase({
       providerOrderId: fakeOrders[0].providerOrderId,

From d3f91029c2201ceba99f97214d2bc08abab16483 Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Mon, 29 Jun 2026 14:18:34 +0800
Subject: [PATCH 60/94] fix(frontend): satisfy payment checkout token guard

- replace undefined outline token with existing sys outline variant
- remove local selected-provider tint math from payment checkout
---
 .../src/domains/payment/ui/surfaces/PaymentCheckoutFlow.vue   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/domains/payment/ui/surfaces/PaymentCheckoutFlow.vue b/apps/frontend/src/domains/payment/ui/surfaces/PaymentCheckoutFlow.vue
index 35e839a3f..d6d63c918 100644
--- a/apps/frontend/src/domains/payment/ui/surfaces/PaymentCheckoutFlow.vue
+++ b/apps/frontend/src/domains/payment/ui/surfaces/PaymentCheckoutFlow.vue
@@ -641,7 +641,7 @@ const handlePay = async (): Promise<void> => {
 .payment-checkout-page__provider-cell {
   width: 100%;
   min-width: 0;
-  border: 1px solid var(--sys-color-outline-muted);
+  border: 1px solid var(--sys-color-outline-variant);
   border-radius: var(--sys-radius-small);
   background: var(--sys-color-surface);
   text-align: left;
@@ -653,7 +653,7 @@ const handlePay = async (): Promise<void> => {
 
 .payment-checkout-page__provider-cell.is-selected {
   border-color: var(--sys-color-primary);
-  background: color-mix(in srgb, var(--sys-color-primary-container) 24%, var(--sys-color-surface));
+  background: var(--sys-color-primary-container);
 }
 
 .payment-checkout-page__provider-cell.is-disabled {

From 7f415098a2cc1450afe893202e999a59447d0f65 Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Mon, 29 Jun 2026 14:42:34 +0800
Subject: [PATCH 61/94] fix(payment): align admin provider multi-active
 scenario

- replace stale duplicate-active-client rejection with positive multi-provider coverage
- assert admin workspace lists both active providers for the same client
---
 ...payment-provider-instance.scenario.test.ts | 428 +++++++++---------
 1 file changed, 202 insertions(+), 226 deletions(-)

diff --git a/apps/backend/tests/payment/admin-payment-provider-instance.scenario.test.ts b/apps/backend/tests/payment/admin-payment-provider-instance.scenario.test.ts
index 12b8161bb..c52c812cd 100644
--- a/apps/backend/tests/payment/admin-payment-provider-instance.scenario.test.ts
+++ b/apps/backend/tests/payment/admin-payment-provider-instance.scenario.test.ts
@@ -101,257 +101,233 @@ const buildProviderPayload = (input: {
   },
 });
 
-scenario(
-  "admin_payment_provider_instance_create_list_update_preserves_secrets",
-  async () => {
-    const admin = await givenAdminUser("payment-provider-admin");
-    const clientId = `web-${randomUUID()}`;
-    const appId = `wx-scenario-admin-${randomUUID()}`;
-    const mchId = `1900000001-${randomUUID()}`;
-    const instanceKey = deriveInstanceKey({ appId, mchId });
-    const merchantCertificate = generateRsaPemPair();
+scenario("admin_payment_provider_instance_create_list_update_preserves_secrets", async () => {
+  const admin = await givenAdminUser("payment-provider-admin");
+  const clientId = `web-${randomUUID()}`;
+  const appId = `wx-scenario-admin-${randomUUID()}`;
+  const mchId = `1900000001-${randomUUID()}`;
+  const instanceKey = deriveInstanceKey({ appId, mchId });
+  const merchantCertificate = generateRsaPemPair();
 
-    const createResponse = await requestJson(
-      "/api/admin/payment/provider-instances",
-      {
-        method: "POST",
-        token: admin.token,
-        body: buildProviderPayload({
-          clientId,
-          appId,
-          mchId,
-          apiV3Key: "0123456789abcdef0123456789abcdef",
-          privateKeyPem: merchantCertificate.privateKeyPem,
-          certificatePem: merchantCertificate.publicKeyPem,
-        }),
-      },
-    );
-    const created =
-      await expectJsonResponse<AdminPaymentProviderInstanceResponse>(
-        createResponse,
-        200,
-      );
+  const createResponse = await requestJson("/api/admin/payment/provider-instances", {
+    method: "POST",
+    token: admin.token,
+    body: buildProviderPayload({
+      clientId,
+      appId,
+      mchId,
+      apiV3Key: "0123456789abcdef0123456789abcdef",
+      privateKeyPem: merchantCertificate.privateKeyPem,
+      certificatePem: merchantCertificate.publicKeyPem,
+    }),
+  });
+  const created = await expectJsonResponse<AdminPaymentProviderInstanceResponse>(
+    createResponse,
+    200,
+  );
 
-    assert.equal(created.providerType, "WECHAT_PAY");
-    assert.equal(created.instanceKey, instanceKey);
-    assert.equal(created.clientId, clientId);
-    assert.equal(created.config.apiV3KeyConfigured, true);
-    assert.equal("apiV3Key" in created.config, false);
-    assert.equal(
-      created.config.merchantCertificate.privateKeyPemConfigured,
-      true,
-    );
-    assert.equal(
-      "privateKeyPem" in created.config.merchantCertificate,
-      false,
-    );
-    assert.equal(
-      "certificatePem" in created.config.merchantCertificate,
-      false,
-    );
+  assert.equal(created.providerType, "WECHAT_PAY");
+  assert.equal(created.instanceKey, instanceKey);
+  assert.equal(created.clientId, clientId);
+  assert.equal(created.config.apiV3KeyConfigured, true);
+  assert.equal("apiV3Key" in created.config, false);
+  assert.equal(created.config.merchantCertificate.privateKeyPemConfigured, true);
+  assert.equal("privateKeyPem" in created.config.merchantCertificate, false);
+  assert.equal("certificatePem" in created.config.merchantCertificate, false);
 
-    const storedAfterCreate = await providerRepo.findById(
-      created.id as PaymentProviderInstanceId,
-    );
-    assert.ok(storedAfterCreate);
-    const platformCertificate = generateRsaPemPair();
-    await providerRepo.updateConfig({
-      id: storedAfterCreate.id,
-      config: {
-        ...storedAfterCreate.config,
-        platformCertificates: [
-          {
-            serialNo: "scenario-platform-serial",
-            certificatePem: platformCertificate.publicKeyPem,
-            effectiveTime: "2026-01-01T00:00:00Z",
-            expireTime: "2027-01-01T00:00:00Z",
-          },
-        ],
-      },
-    });
+  const storedAfterCreate = await providerRepo.findById(created.id as PaymentProviderInstanceId);
+  assert.ok(storedAfterCreate);
+  const platformCertificate = generateRsaPemPair();
+  await providerRepo.updateConfig({
+    id: storedAfterCreate.id,
+    config: {
+      ...storedAfterCreate.config,
+      platformCertificates: [
+        {
+          serialNo: "scenario-platform-serial",
+          certificatePem: platformCertificate.publicKeyPem,
+          effectiveTime: "2026-01-01T00:00:00Z",
+          expireTime: "2027-01-01T00:00:00Z",
+        },
+      ],
+    },
+  });
 
-    const workspaceResponse = await requestJson(
-      "/api/admin/payment/provider-instances/workspace",
-      {
-        method: "GET",
-        token: admin.token,
-      },
-    );
-    const workspace =
-      await expectJsonResponse<AdminPaymentProviderWorkspaceResponse>(
-        workspaceResponse,
-        200,
-      );
-    const listed = workspace.providerInstances.find(
-      (providerInstance) => providerInstance.id === created.id,
-    );
-    assert.ok(listed);
-    assert.equal("apiV3Key" in listed.config, false);
-    assert.equal(
-      "privateKeyPem" in listed.config.merchantCertificate,
-      false,
-    );
-    assert.equal(listed.config.platformCertificates.count, 1);
-    assert.equal(
-      "certificatePem" in listed.config.platformCertificates.items[0]!,
-      false,
-    );
+  const workspaceResponse = await requestJson("/api/admin/payment/provider-instances/workspace", {
+    method: "GET",
+    token: admin.token,
+  });
+  const workspace = await expectJsonResponse<AdminPaymentProviderWorkspaceResponse>(
+    workspaceResponse,
+    200,
+  );
+  const listed = workspace.providerInstances.find(
+    (providerInstance) => providerInstance.id === created.id,
+  );
+  assert.ok(listed);
+  assert.equal("apiV3Key" in listed.config, false);
+  assert.equal("privateKeyPem" in listed.config.merchantCertificate, false);
+  assert.equal(listed.config.platformCertificates.count, 1);
+  assert.equal("certificatePem" in listed.config.platformCertificates.items[0]!, false);
 
-    const updateResponse = await requestJson(
-      `/api/admin/payment/provider-instances/${created.id}`,
-      {
-        method: "PATCH",
-        token: admin.token,
-        body: {
-          ...buildProviderPayload({
-            clientId,
-            appId,
-            mchId,
-            apiV3Key: "",
-            privateKeyPem: "",
-            certificatePem: "",
-          }),
-          displayName: "Scenario WeChatPay Admin Updated",
-          status: "DISABLED",
-          config: {
-            ...buildProviderPayload({
-              clientId,
-              appId,
-              mchId,
-              apiV3Key: "",
-              privateKeyPem: "",
-              certificatePem: "",
-            }).config,
-          },
-        },
+  const updateResponse = await requestJson(`/api/admin/payment/provider-instances/${created.id}`, {
+    method: "PATCH",
+    token: admin.token,
+    body: {
+      ...buildProviderPayload({
+        clientId,
+        appId,
+        mchId,
+        apiV3Key: "",
+        privateKeyPem: "",
+        certificatePem: "",
+      }),
+      displayName: "Scenario WeChatPay Admin Updated",
+      status: "DISABLED",
+      config: {
+        ...buildProviderPayload({
+          clientId,
+          appId,
+          mchId,
+          apiV3Key: "",
+          privateKeyPem: "",
+          certificatePem: "",
+        }).config,
       },
-    );
-    const updated =
-      await expectJsonResponse<AdminPaymentProviderInstanceResponse>(
-        updateResponse,
-        200,
-      );
+    },
+  });
+  const updated = await expectJsonResponse<AdminPaymentProviderInstanceResponse>(
+    updateResponse,
+    200,
+  );
 
-    assert.equal(updated.displayName, "Scenario WeChatPay Admin Updated");
-    assert.equal(updated.status, "DISABLED");
-    assert.equal(updated.instanceKey, instanceKey);
-    assert.equal(updated.config.appId, appId);
-    assert.equal(updated.config.platformCertificates.count, 1);
-    assert.equal("apiV3Key" in updated.config, false);
+  assert.equal(updated.displayName, "Scenario WeChatPay Admin Updated");
+  assert.equal(updated.status, "DISABLED");
+  assert.equal(updated.instanceKey, instanceKey);
+  assert.equal(updated.config.appId, appId);
+  assert.equal(updated.config.platformCertificates.count, 1);
+  assert.equal("apiV3Key" in updated.config, false);
 
-    const storedAfterUpdate = await providerRepo.findById(
-      created.id as PaymentProviderInstanceId,
-    );
-    assert.ok(storedAfterUpdate);
-    assert.equal(
-      storedAfterUpdate.config.apiV3Key,
-      "0123456789abcdef0123456789abcdef",
-    );
-    assert.equal(
-      storedAfterUpdate.config.merchantCertificate.privateKeyPem,
-      merchantCertificate.privateKeyPem.trim(),
-    );
-    assert.equal(
-      storedAfterUpdate.config.merchantCertificate.certificatePem,
-      merchantCertificate.publicKeyPem.trim(),
-    );
-    assert.equal(storedAfterUpdate.config.platformCertificates?.length, 1);
-    assert.equal(
-      storedAfterUpdate.config.platformCertificates?.[0]?.certificatePem,
-      platformCertificate.publicKeyPem.trim(),
-    );
+  const storedAfterUpdate = await providerRepo.findById(created.id as PaymentProviderInstanceId);
+  assert.ok(storedAfterUpdate);
+  assert.equal(storedAfterUpdate.config.apiV3Key, "0123456789abcdef0123456789abcdef");
+  assert.equal(
+    storedAfterUpdate.config.merchantCertificate.privateKeyPem,
+    merchantCertificate.privateKeyPem.trim(),
+  );
+  assert.equal(
+    storedAfterUpdate.config.merchantCertificate.certificatePem,
+    merchantCertificate.publicKeyPem.trim(),
+  );
+  assert.equal(storedAfterUpdate.config.platformCertificates?.length, 1);
+  assert.equal(
+    storedAfterUpdate.config.platformCertificates?.[0]?.certificatePem,
+    platformCertificate.publicKeyPem.trim(),
+  );
 
-    const identityChangeResponse = await requestJson(
-      `/api/admin/payment/provider-instances/${created.id}`,
-      {
-        method: "PATCH",
-        token: admin.token,
-        body: {
-          ...buildProviderPayload({
-            clientId,
-            appId: "wx-scenario-admin-replacement",
-            mchId,
-            apiV3Key: "",
-            privateKeyPem: "",
-            certificatePem: "",
-          }),
-          status: "DISABLED",
-        },
+  const identityChangeResponse = await requestJson(
+    `/api/admin/payment/provider-instances/${created.id}`,
+    {
+      method: "PATCH",
+      token: admin.token,
+      body: {
+        ...buildProviderPayload({
+          clientId,
+          appId: "wx-scenario-admin-replacement",
+          mchId,
+          apiV3Key: "",
+          privateKeyPem: "",
+          certificatePem: "",
+        }),
+        status: "DISABLED",
       },
-    );
-    await expectJsonResponse(identityChangeResponse, 422);
-  },
-);
+    },
+  );
+  await expectJsonResponse(identityChangeResponse, 422);
+});
 
 scenario(
-  "admin_payment_provider_instance_rejects_duplicate_active_client",
+  "admin_payment_provider_instance_allows_multiple_active_providers_for_same_client",
   async () => {
     const admin = await givenAdminUser("payment-provider-admin-conflict");
     const clientId = `web-${randomUUID()}`;
     const firstCertificate = generateRsaPemPair();
-    const duplicateCertificate = generateRsaPemPair();
+    const secondCertificate = generateRsaPemPair();
 
-    const firstResponse = await requestJson(
-      "/api/admin/payment/provider-instances",
-      {
-        method: "POST",
-        token: admin.token,
-        body: buildProviderPayload({
-          clientId,
-          appId: `wx-scenario-admin-${randomUUID()}`,
-          mchId: `1900000001-${randomUUID()}`,
-          apiV3Key: "0123456789abcdef0123456789abcdef",
-          privateKeyPem: firstCertificate.privateKeyPem,
-          certificatePem: null,
-        }),
-      },
-    );
-    await expectJsonResponse<AdminPaymentProviderInstanceResponse>(
+    const firstResponse = await requestJson("/api/admin/payment/provider-instances", {
+      method: "POST",
+      token: admin.token,
+      body: buildProviderPayload({
+        clientId,
+        appId: `wx-scenario-admin-${randomUUID()}`,
+        mchId: `1900000001-${randomUUID()}`,
+        apiV3Key: "0123456789abcdef0123456789abcdef",
+        privateKeyPem: firstCertificate.privateKeyPem,
+        certificatePem: null,
+      }),
+    });
+    const firstProvider = await expectJsonResponse<AdminPaymentProviderInstanceResponse>(
       firstResponse,
       200,
     );
 
-    const duplicateResponse = await requestJson(
-      "/api/admin/payment/provider-instances",
-      {
-        method: "POST",
-        token: admin.token,
-        body: buildProviderPayload({
-          clientId,
-          appId: `wx-scenario-admin-${randomUUID()}`,
-          mchId: `1900000001-${randomUUID()}`,
-          apiV3Key: "0123456789abcdef0123456789abcdef",
-          privateKeyPem: duplicateCertificate.privateKeyPem,
-          certificatePem: null,
-        }),
-      },
+    const secondResponse = await requestJson("/api/admin/payment/provider-instances", {
+      method: "POST",
+      token: admin.token,
+      body: buildProviderPayload({
+        clientId,
+        appId: `wx-scenario-admin-${randomUUID()}`,
+        mchId: `1900000001-${randomUUID()}`,
+        apiV3Key: "0123456789abcdef0123456789abcdef",
+        privateKeyPem: secondCertificate.privateKeyPem,
+        certificatePem: null,
+      }),
+    });
+
+    const secondProvider = await expectJsonResponse<AdminPaymentProviderInstanceResponse>(
+      secondResponse,
+      200,
     );
 
-    await expectJsonResponse(duplicateResponse, 409);
+    assert.equal(firstProvider.clientId, clientId);
+    assert.equal(secondProvider.clientId, clientId);
+    assert.equal(firstProvider.status, "ACTIVE");
+    assert.equal(secondProvider.status, "ACTIVE");
+    assert.notEqual(firstProvider.id, secondProvider.id);
+    assert.notEqual(firstProvider.instanceKey, secondProvider.instanceKey);
+
+    const workspaceResponse = await requestJson("/api/admin/payment/provider-instances/workspace", {
+      method: "GET",
+      token: admin.token,
+    });
+    const workspace = await expectJsonResponse<AdminPaymentProviderWorkspaceResponse>(
+      workspaceResponse,
+      200,
+    );
+    const listedProviderIds = new Set(
+      workspace.providerInstances
+        .filter((providerInstance) => providerInstance.clientId === clientId)
+        .map((providerInstance) => providerInstance.id),
+    );
+    assert.deepEqual(listedProviderIds, new Set([firstProvider.id, secondProvider.id]));
   },
 );
 
-scenario(
-  "admin_payment_provider_instance_rejects_invalid_wechatpay_private_key",
-  async () => {
-    const admin = await givenAdminUser("payment-provider-admin-invalid-key");
+scenario("admin_payment_provider_instance_rejects_invalid_wechatpay_private_key", async () => {
+  const admin = await givenAdminUser("payment-provider-admin-invalid-key");
 
-    const response = await requestJson(
-      "/api/admin/payment/provider-instances",
-      {
-        method: "POST",
-        token: admin.token,
-        body: buildProviderPayload({
-          clientId: `web-${randomUUID()}`,
-          appId: `wx-scenario-admin-${randomUUID()}`,
-          mchId: `1900000001-${randomUUID()}`,
-          apiV3Key: "0123456789abcdef0123456789abcdef",
-          privateKeyPem: "not-a-private-key",
-          certificatePem: null,
-        }),
-      },
-    );
+  const response = await requestJson("/api/admin/payment/provider-instances", {
+    method: "POST",
+    token: admin.token,
+    body: buildProviderPayload({
+      clientId: `web-${randomUUID()}`,
+      appId: `wx-scenario-admin-${randomUUID()}`,
+      mchId: `1900000001-${randomUUID()}`,
+      apiV3Key: "0123456789abcdef0123456789abcdef",
+      privateKeyPem: "not-a-private-key",
+      certificatePem: null,
+    }),
+  });
 
-    await expectJsonResponse(response, 422);
-  },
-);
+  await expectJsonResponse(response, 422);
+});

From f64f2decf5005107e7a8c221b2d640344696ffc1 Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Mon, 29 Jun 2026 15:12:04 +0800
Subject: [PATCH 62/94] fix(e2e): restore system scenario gate

- render PR create actions through supported scaffold footer slot

- align rental PR readiness assertions with current copy

- keep beta-group QR images visible without remote image load
---
 .../primitives/AnchorEventBetaGroupCard.vue   |  15 +-
 .../AnchorEventBetaGroupQrPanel.vue           |   7 +-
 apps/frontend/src/pages/OrderingPage.vue      |   9 +-
 apps/frontend/src/pages/PRCreatePage.vue      |  41 ++--
 .../00-task-packet.md                         | 221 ++++++++++++++++++
 .../commerce/rental-ordering.scenario.test.ts |  44 ++--
 6 files changed, 275 insertions(+), 62 deletions(-)
 create mode 100644 tasks/pr-255-e2e-gate-system-scenario-diagnosis/00-task-packet.md

diff --git a/apps/frontend/src/domains/event/ui/primitives/AnchorEventBetaGroupCard.vue b/apps/frontend/src/domains/event/ui/primitives/AnchorEventBetaGroupCard.vue
index fc2cb19e0..8aaa51c06 100644
--- a/apps/frontend/src/domains/event/ui/primitives/AnchorEventBetaGroupCard.vue
+++ b/apps/frontend/src/domains/event/ui/primitives/AnchorEventBetaGroupCard.vue
@@ -63,9 +63,9 @@
 </template>
 
 <script setup lang="ts">
+import { PuCard } from "@partner-up-dev/design-web";
 import { computed, toRef } from "vue";
 import { useI18n } from "vue-i18n";
-import { PuCard } from "@partner-up-dev/design-web";
 import { usePuCardAttention } from "./usePuCardAttention";
 
 const props = withDefaults(
@@ -87,11 +87,7 @@ const props = withDefaults(
 );
 
 const { t } = useI18n();
-const {
-  autoExpandHighlightActive,
-  cardDefaultExpanded,
-  cardResetKey,
-} = usePuCardAttention({
+const { autoExpandHighlightActive, cardDefaultExpanded, cardResetKey } = usePuCardAttention({
   defaultExpanded: toRef(props, "defaultExpanded"),
   autoExpandContextKey: toRef(props, "autoExpandContextKey"),
 });
@@ -116,9 +112,7 @@ const qrAlt = computed(() =>
 const normalizedQrCodeUrl = computed(() => normalizeHttpUrl(props.qrCodeUrl));
 const cardTitle = computed(() => {
   const title = props.eventTitle.trim();
-  return title.length > 0
-    ? `${title}群`
-    : t("anchorEvent.betaGroupCard.kicker");
+  return title.length > 0 ? `${title}群` : t("anchorEvent.betaGroupCard.kicker");
 });
 const description = computed(() => t("anchorEvent.betaGroupCard.description"));
 </script>
@@ -184,7 +178,10 @@ const description = computed(() => t("anchorEvent.betaGroupCard.description"));
 }
 
 .anchor-event-beta-group-card__qr {
+  display: block;
   width: min(100%, 220px);
+  aspect-ratio: 1 / 1;
+  object-fit: cover;
   border-radius: var(--sys-radius-medium);
 }
 
diff --git a/apps/frontend/src/domains/event/ui/primitives/AnchorEventBetaGroupQrPanel.vue b/apps/frontend/src/domains/event/ui/primitives/AnchorEventBetaGroupQrPanel.vue
index d100b4950..1f53bade0 100644
--- a/apps/frontend/src/domains/event/ui/primitives/AnchorEventBetaGroupQrPanel.vue
+++ b/apps/frontend/src/domains/event/ui/primitives/AnchorEventBetaGroupQrPanel.vue
@@ -58,9 +58,7 @@ const normalizeHttpUrl = (value: string | null | undefined): string | null => {
 };
 
 const normalizedQrCodeUrl = computed(() => normalizeHttpUrl(props.qrCodeUrl));
-const qrAlt = computed(() =>
-  t("prPage.betaGroupEntry.qrAlt", { eventTitle: props.eventTitle }),
-);
+const qrAlt = computed(() => t("prPage.betaGroupEntry.qrAlt", { eventTitle: props.eventTitle }));
 </script>
 
 <style lang="scss" scoped>
@@ -108,7 +106,10 @@ const qrAlt = computed(() =>
 }
 
 .beta-group-qr-panel__qr-image {
+  display: block;
   width: min(100%, 240px);
+  aspect-ratio: 1 / 1;
+  object-fit: cover;
   border-radius: var(--sys-radius-small);
 }
 
diff --git a/apps/frontend/src/pages/OrderingPage.vue b/apps/frontend/src/pages/OrderingPage.vue
index 9b33b1f6a..b19d50156 100644
--- a/apps/frontend/src/pages/OrderingPage.vue
+++ b/apps/frontend/src/pages/OrderingPage.vue
@@ -121,14 +121,11 @@ import OrderingPriceDetailDrawer from "@/domains/commerce/ui/ordering/OrderingPr
 import RentalOrderingForm from "@/domains/commerce/ui/ordering/RentalOrderingForm.vue";
 import RideHailingOrderingContent from "@/domains/commerce/ui/ordering/RideHailingOrderingContent.vue";
 import { useOrderingHandoffStore } from "@/domains/commerce/use-cases/useOrderingHandoffStore";
-import { usePRDetail } from "@/domains/pr/queries/usePRDetail";
 import { useUpdatePRStatus } from "@/domains/pr/queries/usePRActions";
+import { usePRDetail } from "@/domains/pr/queries/usePRDetail";
 
 type OrderingOfferDetail = OrderingEntryPayload["offerDetail"];
-type OrderingDialogKind =
-  | "info"
-  | "blocked-pr-not-ready"
-  | "confirm-mark-pr-ready";
+type OrderingDialogKind = "info" | "blocked-pr-not-ready" | "confirm-mark-pr-ready";
 type OrderingDialogState = {
   open: boolean;
   kind: OrderingDialogKind;
@@ -322,7 +319,7 @@ const createOrderFromQuoteDraft = async (input: CreateOrderInput): Promise<void>
     if (apiError.code === "PR_NOT_READY" && canOfferPrReadyRecovery.value) {
       openPrNotReadyRecoveryDialog({
         title: "暂不能创建订单",
-        detail: apiError.message ?? "订单创建需要 PR 处于 READY 状态。",
+        detail: apiError.message ?? "创建订单需要搭子请求「已成团」",
       });
       return;
     }
diff --git a/apps/frontend/src/pages/PRCreatePage.vue b/apps/frontend/src/pages/PRCreatePage.vue
index cb4bfeb1c..728850f10 100644
--- a/apps/frontend/src/pages/PRCreatePage.vue
+++ b/apps/frontend/src/pages/PRCreatePage.vue
@@ -55,35 +55,32 @@
       </section>
     </div>
 
-    <template #actions>
-      <div data-region="actions">
+    <template #footer>
+      <div class="pr-create-page__footer">
         <PRCreateFooterActions
           v-if="activeMode === 'form'"
           :pending="editorPending"
           :pending-status="editorPendingStatus"
           :allow-draft-save="editorAllowDraftSave"
           @submit-as="submitEditorAs"
+          data-region="actions"
         />
+        <PageFooter variant="minimal" data-region="support" />
       </div>
     </template>
-
-    <template #footer>
-      <PageFooter variant="minimal" data-region="support" />
-    </template>
-
   </PuPageScaffold>
 </template>
 
 <script setup lang="ts">
+import { PuButton, PuHeader, PuPageScaffold, PuTabs } from "@partner-up-dev/design-web";
 import { computed, isRef, ref } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRoute, useRouter } from "vue-router";
-import PREditor from "@/domains/pr/ui/forms/PREditor.vue";
+import type { CreateSubmissionMode } from "@/domains/pr/model/pr-editor";
 import NLPRForm from "@/domains/pr/ui/forms/NLPRForm.vue";
-import PageFooter from "@/shared/ui/sections/PageFooter.vue";
+import PREditor from "@/domains/pr/ui/forms/PREditor.vue";
 import PRCreateFooterActions from "@/domains/pr/ui/sections/PRCreateFooterActions.vue";
-import type { CreateSubmissionMode } from "@/domains/pr/model/pr-editor";
-import { PuButton, PuHeader, PuPageScaffold, PuTabs } from "@partner-up-dev/design-web";
+import PageFooter from "@/shared/ui/sections/PageFooter.vue";
 
 const resolveQueryMode = (value: unknown): "nl" | "form" | null => {
   if (value === "nl" || value === "form") return value;
@@ -93,9 +90,7 @@ const resolveQueryMode = (value: unknown): "nl" | "form" | null => {
 const hasTopicQuery = (value: unknown): boolean => {
   if (typeof value === "string") return value.trim().length > 0;
   if (!Array.isArray(value)) return false;
-  return value.some(
-    (item) => typeof item === "string" && item.trim().length > 0,
-  );
+  return value.some((item) => typeof item === "string" && item.trim().length > 0);
 };
 
 const { t } = useI18n();
@@ -104,8 +99,7 @@ const router = useRouter();
 const editorRef = ref<InstanceType<typeof PREditor> | null>(null);
 
 const initialMode =
-  resolveQueryMode(route.query.mode) ??
-  (hasTopicQuery(route.query.topic) ? "form" : "nl");
+  resolveQueryMode(route.query.mode) ?? (hasTopicQuery(route.query.topic) ? "form" : "nl");
 
 const activeMode = ref<"nl" | "form">(initialMode);
 const modeTabs = computed(() => [
@@ -130,20 +124,16 @@ const handleModeChange = (value: string | number) => {
   setMode(value);
 };
 
-const readExposed = <T,>(value: unknown, fallback: T): T => {
+const readExposed = <T>(value: unknown, fallback: T): T => {
   if (isRef<T>(value)) return value.value;
   return value === undefined || value === null ? fallback : (value as T);
 };
 
-const editorPending = computed(() =>
-  readExposed(editorRef.value?.isPending, false),
-);
+const editorPending = computed(() => readExposed(editorRef.value?.isPending, false));
 const editorPendingStatus = computed(() =>
   readExposed<CreateSubmissionMode>(editorRef.value?.pendingStatus, "PUBLISH"),
 );
-const editorAllowDraftSave = computed(() =>
-  readExposed(editorRef.value?.allowDraftSave, false),
-);
+const editorAllowDraftSave = computed(() => readExposed(editorRef.value?.allowDraftSave, false));
 
 const submitEditorAs = (status: CreateSubmissionMode) => {
   editorRef.value?.submitAs(status);
@@ -188,4 +178,9 @@ const goHome = () => {
     margin: 0;
   }
 }
+
+.pr-create-page__footer {
+  display: flex;
+  flex-direction: column;
+}
 </style>
diff --git a/tasks/pr-255-e2e-gate-system-scenario-diagnosis/00-task-packet.md b/tasks/pr-255-e2e-gate-system-scenario-diagnosis/00-task-packet.md
new file mode 100644
index 000000000..6c13286c8
--- /dev/null
+++ b/tasks/pr-255-e2e-gate-system-scenario-diagnosis/00-task-packet.md
@@ -0,0 +1,221 @@
+# PR 255 E2E Gate System Scenario Diagnosis
+
+## Objective & Hypothesis
+
+Diagnose and fix GitHub Actions run:
+
+- Run: `https://github.com/partner-up-dev/mvp-HA/actions/runs/28353679895`
+- Job: `https://github.com/partner-up-dev/mvp-HA/actions/runs/28353679895/job/83991709228?pr=255`
+- Job name: `e2e-gate`
+- Failed step: `Run system scenario tests`
+
+Hypothesis after diagnosis: the failure is real and locally reproducible. It is not caused by the payment admin scenario test change itself. The failures come from stale system assertions plus frontend regressions introduced by earlier page chrome/design-web migration.
+
+## Current State
+
+- Local branch: `develop`
+- Local `HEAD`: `7f415098 fix(payment): align admin provider multi-active scenario`
+- `origin/develop`: `7f415098`
+- PR 255 head fetched as `origin/pr/255/head`: `7f415098`
+- CI checkout merge ref: `a3a43022 Merge 7f415098... into fc79564...`
+- Diff from `origin/develop` to PR merge ref only changes release metadata:
+  - `.release-please-manifest.json`
+  - `apps/backend/CHANGELOG.md`
+  - `apps/backend/package.json`
+  - `apps/frontend/CHANGELOG.md`
+  - `apps/frontend/package.json`
+
+Working tree has unrelated local changes that must not be staged unless explicitly requested:
+
+- `.npmrc`
+- `pnpm-workspace.yaml`
+- deleted `scratch/OnePersonCompany-E2E-software-development.md`
+
+## Guardrails Touched
+
+- Frontend system scenarios under `tests/scenario/**`
+- Frontend page shell / design-web slot usage
+- Anchor event beta-group QR rendering
+- Commerce rental ordering non-ready PR recovery assertions
+- PR create form CTA rendering
+
+No durable docs have been updated yet.
+
+## Verification Already Run
+
+Fetched the failing job logs through the GitHub Actions connector.
+
+Local reproduction command:
+
+```bash
+pnpm test:scenario:system
+```
+
+Local result:
+
+- 4 failed files / 6 passed
+- 7 failed tests / 38 passed
+- 3 unhandled errors from PR create waitForResponse promises
+
+This confirms the failure is not CI-only.
+
+## CI Failure Summary
+
+CI failed in `e2e-gate > Run system scenario tests`.
+
+The log explicitly shows failures in:
+
+- `commerce/rental-ordering.scenario.test.ts`
+  - `commerce_rental_ordering_blocks_non_ready_pr`
+  - `commerce_rental_ordering_recovers_non_ready_pr_by_marking_ready`
+- unhandled PR create waitForResponse errors from `pr-core/pr-create.scenario.test.ts`
+
+Local full run additionally surfaced the same root classes more clearly:
+
+- `anchor-event/anchor-event-landing-distribution.scenario.test.ts`
+  - `anchor_event_list_mode_admin_only_highlights_beta_group_card`
+- `pr-core/pr-detail-join.scenario.test.ts`
+  - `pr_detail_join_success_shows_event_beta_group_followup`
+- `pr-core/pr-create.scenario.test.ts`
+  - all 3 PR create form scenarios failed because submit buttons were not found
+
+## Root Causes
+
+### 1. `PRCreatePage` Uses An Invalid `PuPageScaffold` Slot
+
+File:
+
+- `apps/frontend/src/pages/PRCreatePage.vue`
+
+Evidence:
+
+- `PRCreatePage.vue` puts `PRCreateFooterActions` under `<template #actions>`.
+- `@partner-up-dev/design-web` `PuPageScaffold` supports only:
+  - `default`
+  - `aside`
+  - `footer`
+  - `header`
+  - `pageHeader`
+- `PuPageScaffold` does not support `actions`.
+
+Effect:
+
+- `PRCreateFooterActions` never renders.
+- `pr-create.save-draft` and `pr-create.publish` are not in DOM.
+- PR create tests time out while waiting/clicking these test IDs.
+- The `page.waitForResponse(...)` promises then time out as unhandled rejections because no POST is ever made.
+
+Likely fix:
+
+- Move `PRCreateFooterActions` into `PuPageScaffold #footer`, or wrap it in a page-owned footer area.
+- Keep `PageFooter variant="minimal"` only if layout still has a valid place for it, likely below main content or another footer-compatible region.
+
+### 2. Rental Ordering Non-Ready PR Tests Assert Stale Copy
+
+Files:
+
+- `tests/scenario/commerce/rental-ordering.scenario.test.ts`
+- `apps/frontend/src/pages/OrderingPage.vue`
+- `apps/backend/src/domains/trade/use-cases/create-order.ts`
+
+Evidence:
+
+- Tests wait for: `订单创建需要 PR 处于 READY 状态`
+- Current backend problem detail is: `创建订单需要搭子请求「已成团」`
+- Current frontend PR-not-ready recovery dialog fallback also uses: `创建订单需要搭子请求「已成团」`
+
+Effect:
+
+- Dialog opens with title `暂不能创建订单`, but the test waits for obsolete detail copy and times out.
+
+Likely fix:
+
+- Update the two rental system scenario expected details to the current product copy:
+  - `创建订单需要搭子请求「已成团」`
+- Also update follow-up recovery dialog assertion if it still expects old copy:
+  - Current frontend confirm dialog copy: `将当前搭子请求切换到「已成团」，此状态下不可以加入/退出。确认后请重新点击下单。`
+  - Test currently expects: `这会立即将当前 PR 标记为已成团。确认后请重新点击下单。`
+
+### 3. Beta Group QR Images Exist But Are Hidden
+
+Files:
+
+- `apps/frontend/src/domains/event/ui/primitives/AnchorEventBetaGroupCard.vue`
+- `apps/frontend/src/domains/event/ui/primitives/AnchorEventBetaGroupQrPanel.vue`
+- `tests/scenario/anchor-event/anchor-event-landing-distribution.scenario.test.ts`
+- `tests/scenario/pr-core/pr-detail-join.scenario.test.ts`
+
+Evidence:
+
+- Playwright resolves the QR `<img>` elements, but reports them as hidden:
+  - `locator resolved to hidden <img ... src="https://example.com/list-beta-group.png" ...>`
+  - `locator resolved to hidden <img ... src="https://example.com/system-event-beta-group.png" ...>`
+- Fixtures use `https://example.com/...` URLs.
+- CSS gives the QR image width, but no stable height/aspect ratio:
+  - `.anchor-event-beta-group-card__qr { width: min(100%, 220px); ... }`
+  - `.beta-group-qr-panel__qr-image { width: min(100%, 240px); ... }`
+
+Interpretation:
+
+- When remote image loading fails or is blocked, the image has no intrinsic dimensions and becomes 0-height; Playwright therefore treats it as not visible even though the element exists.
+
+Likely fix options:
+
+- Prefer fixture-side fix: use deterministic local/data URL image fixtures for QR URLs in system scenarios.
+- Also acceptable frontend hardening: give QR images stable dimensions/aspect ratio, e.g. `aspect-ratio: 1 / 1; object-fit: cover; display: block;`, so broken-but-present test fixtures do not collapse.
+
+## Suggested Fix Plan
+
+1. Fix `PRCreatePage` actions placement.
+   - Move `PRCreateFooterActions` out of invalid `#actions`.
+   - Use `#footer` or a valid page-level layout region.
+   - Re-run `tests/scenario/pr-core/pr-create.scenario.test.ts`.
+
+2. Update rental ordering stale assertions.
+   - Replace old READY copy with current `已成团` wording.
+   - Check both blocked and recovery flows.
+   - Re-run `tests/scenario/commerce/rental-ordering.scenario.test.ts`.
+
+3. Stabilize QR visibility.
+   - Either replace system QR fixture URLs with local/data image URLs, or add stable QR image dimensions.
+   - Re-run:
+     - `tests/scenario/anchor-event/anchor-event-landing-distribution.scenario.test.ts`
+     - `tests/scenario/pr-core/pr-detail-join.scenario.test.ts`
+
+4. Run full system gate:
+
+```bash
+pnpm test:scenario:system
+```
+
+5. If passing, commit and push to `develop`.
+
+## Implementation Update
+
+Applied fixes:
+
+- Moved `PRCreateFooterActions` from the unsupported `PuPageScaffold #actions` slot into the supported `#footer` slot in `PRCreatePage.vue`.
+- Updated rental ordering PR-not-ready fallback copy and system scenario assertions to the current `已成团` product language.
+- Updated the stale rental recovery button assertion from `去成团` to `切换到已成团`.
+- Added stable square layout to Anchor Event beta-group QR images so externally unreachable fixture images do not collapse to a hidden zero-height image.
+
+Verification:
+
+```bash
+pnpm exec biome check --write apps/frontend/src/pages/PRCreatePage.vue apps/frontend/src/pages/OrderingPage.vue apps/frontend/src/domains/event/ui/primitives/AnchorEventBetaGroupCard.vue apps/frontend/src/domains/event/ui/primitives/AnchorEventBetaGroupQrPanel.vue tests/scenario/commerce/rental-ordering.scenario.test.ts
+pnpm exec vitest run --project system-scenario tests/scenario/pr-core/pr-create.scenario.test.ts tests/scenario/commerce/rental-ordering.scenario.test.ts tests/scenario/anchor-event/anchor-event-landing-distribution.scenario.test.ts tests/scenario/pr-core/pr-detail-join.scenario.test.ts
+pnpm check:type:frontend
+pnpm test:scenario:system
+```
+
+Results:
+
+- Targeted system scenario files: 4 passed / 23 tests passed.
+- Frontend type check: passed.
+- Full system scenario gate: 10 passed / 45 tests passed.
+
+## Notes For Next Agent
+
+- The user asked for diagnosis only for the last turn, then asked to write this task packet because context is low.
+- Do not assume all failures are caused by the latest payment scenario test commit. The E2E failures are reproducible on current `develop` and are frontend/system-scenario issues.
+- Do not stage unrelated working tree changes listed in Current State.
diff --git a/tests/scenario/commerce/rental-ordering.scenario.test.ts b/tests/scenario/commerce/rental-ordering.scenario.test.ts
index 00b9a0e2d..3d5f51257 100644
--- a/tests/scenario/commerce/rental-ordering.scenario.test.ts
+++ b/tests/scenario/commerce/rental-ordering.scenario.test.ts
@@ -1,19 +1,5 @@
 import assert from "node:assert/strict";
 import type { Page } from "playwright";
-import { installScenarioUserSession } from "../_infra/browser/session";
-import { installDeterministicShareSidecarStubs } from "../_infra/browser/share-sidecars";
-import { installFakeWeChatPayBridge } from "../_infra/browser/wechatpay";
-import { withScenarioPage } from "../_infra/browser/browser";
-import { getScenarioEnvironment } from "../_infra/environment/scenario-environment";
-import { scenario } from "../_infra/scenario/scenario";
-import {
-  bindScenarioWeChatOpenId,
-  configurePRStatus,
-} from "../../../apps/backend/tests/pr-core/_kit/actions/system-state";
-import {
-  givenUser,
-  type ScenarioUser,
-} from "../../../apps/backend/tests/pr-core/_kit/builders/users";
 import {
   createOffer,
   createPlacement,
@@ -24,6 +10,20 @@ import {
 import { registerPaymentProviderInstance } from "../../../apps/backend/src/domains/payment";
 import { PartnerRepository } from "../../../apps/backend/src/repositories/PartnerRepository";
 import { PartnerRequestRepository } from "../../../apps/backend/src/repositories/PartnerRequestRepository";
+import {
+  bindScenarioWeChatOpenId,
+  configurePRStatus,
+} from "../../../apps/backend/tests/pr-core/_kit/actions/system-state";
+import {
+  givenUser,
+  type ScenarioUser,
+} from "../../../apps/backend/tests/pr-core/_kit/builders/users";
+import { withScenarioPage } from "../_infra/browser/browser";
+import { installScenarioUserSession } from "../_infra/browser/session";
+import { installDeterministicShareSidecarStubs } from "../_infra/browser/share-sidecars";
+import { installFakeWeChatPayBridge } from "../_infra/browser/wechatpay";
+import { getScenarioEnvironment } from "../_infra/environment/scenario-environment";
+import { scenario } from "../_infra/scenario/scenario";
 
 const partnerRepo = new PartnerRepository();
 const partnerRequestRepo = new PartnerRequestRepository();
@@ -498,7 +498,7 @@ scenario("commerce_rental_ordering_blocks_non_ready_pr", async (ctx) => {
     await page.getByTestId("ordering.rental.create-order").click();
     await assertOrderingBlockedDialog({
       page,
-      expectedDetail: "订单创建需要 PR 处于 READY 状态",
+      expectedDetail: "创建订单需要搭子请求「已成团」",
     });
     assert.equal(new URL(page.url()).pathname, "/order/new");
   });
@@ -534,19 +534,21 @@ scenario("commerce_rental_ordering_recovers_non_ready_pr_by_marking_ready", asyn
     await page.getByTestId("ordering.rental.create-order").click();
     await assertOrderingBlockedDialog({
       page,
-      expectedDetail: "订单创建需要 PR 处于 READY 状态",
+      expectedDetail: "创建订单需要搭子请求「已成团」",
     });
 
-    await page.getByRole("button", { name: "去成团" }).click();
+    await page.getByRole("button", { name: "切换到已成团" }).click();
     const confirmDialog = page.getByRole("dialog", { name: "确认标记为已成团？" });
     await confirmDialog.waitFor({
       state: "visible",
       timeout: 10_000,
     });
-    await confirmDialog.getByText("这会立即将当前 PR 标记为已成团。确认后请重新点击下单。").waitFor({
-      state: "visible",
-      timeout: 10_000,
-    });
+    await confirmDialog
+      .getByText("将当前搭子请求切换到「已成团」，此状态下不可以加入/退出。确认后请重新点击下单。")
+      .waitFor({
+        state: "visible",
+        timeout: 10_000,
+      });
     await confirmDialog.getByRole("button", { name: "确认成团" }).click();
 
     const successDialog = page.getByRole("dialog", { name: "已成团" });

From ed791450a89317304c2da0b0da6ee04f1177f0cf Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Mon, 29 Jun 2026 16:01:47 +0800
Subject: [PATCH 63/94] fix(e2e): make pr edit time assertions timezone aware

- derive PR edit form date-time expectations from browser local time

- keep system scenario runtime timezone unchanged

- document UTC CI reproduction and verification
---
 .../00-task-packet.md                         |  71 ++++++++++
 .../pr-core/pr-detail-edit.scenario.test.ts   | 134 ++++++++++++------
 2 files changed, 162 insertions(+), 43 deletions(-)

diff --git a/tasks/pr-255-e2e-gate-system-scenario-diagnosis/00-task-packet.md b/tasks/pr-255-e2e-gate-system-scenario-diagnosis/00-task-packet.md
index 6c13286c8..d0256d120 100644
--- a/tasks/pr-255-e2e-gate-system-scenario-diagnosis/00-task-packet.md
+++ b/tasks/pr-255-e2e-gate-system-scenario-diagnosis/00-task-packet.md
@@ -214,6 +214,77 @@ Results:
 - Frontend type check: passed.
 - Full system scenario gate: 10 passed / 45 tests passed.
 
+## Follow-up CI Failure: PR Detail Edit Timezone
+
+New failed job:
+
+- Run: `https://github.com/partner-up-dev/mvp-HA/actions/runs/28355567358`
+- Job: `https://github.com/partner-up-dev/mvp-HA/actions/runs/28355567358/job/83997627722?pr=255`
+- Checkout ref: `99f043b908f3dcd73ceedb067caf3a75081ba485`
+- Checkout meaning: `Merge f64f2decf5005107e7a8c221b2d640344696ffc1 into fc79564d13a56f17d88104fde2599cf321a18091`
+- `develop` and `pull/255/head` are identical at `f64f2decf5005107e7a8c221b2d640344696ffc1`.
+
+Failure:
+
+- File: `tests/scenario/pr-core/pr-detail-edit.scenario.test.ts`
+- Test: `pr_detail_ready_creator_edits_time_window_from_pr_page`
+- Error: `page.waitForFunction: Timeout 10000ms exceeded`
+- Location: wait for edit form initial values:
+  - `startDate === "2030-01-01"`
+  - `startTime === "00:00"`
+  - `endDate === "2030-01-02"`
+  - `endTime === "00:00"`
+
+Diagnosis:
+
+- The test fixture stores the time window as `2030-01-01T00:00:00+08:00` to `2030-01-02T00:00:00+08:00`.
+- `DateTimeRangePicker` deserializes instants through `new Date(...)` and local browser time, by design.
+- CI runner/browser context uses UTC unless pinned, so the first instant renders as `2029-12-31 16:00` instead of `2030-01-01 00:00`.
+- Local reproduction confirms the root cause:
+
+```bash
+TZ=UTC pnpm exec vitest run --project system-scenario tests/scenario/pr-core/pr-detail-edit.scenario.test.ts
+TZ=Asia/Shanghai pnpm exec vitest run --project system-scenario tests/scenario/pr-core/pr-detail-edit.scenario.test.ts
+```
+
+Results:
+
+- `TZ=UTC`: failed with the same timeout.
+- `TZ=Asia/Shanghai`: passed.
+
+Corrected fix direction:
+
+- Do not change the scenario browser timezone to match the test.
+- Keep the browser context as the runtime truth for local date-time rendering.
+- Update `tests/scenario/pr-core/pr-detail-edit.scenario.test.ts` so expected date/time input values are derived in the browser context from the fixture instants.
+- The assertion should use browser-side `new Date(instant)` / local getters, matching `DateTimeRangePicker` behavior.
+- This keeps the scenario valid under both CI UTC and local `Asia/Shanghai` browser contexts.
+- Re-run:
+
+```bash
+TZ=UTC pnpm exec vitest run --project system-scenario tests/scenario/pr-core/pr-detail-edit.scenario.test.ts
+TZ=UTC pnpm test:scenario:system
+TZ=Asia/Shanghai pnpm exec vitest run --project system-scenario tests/scenario/pr-core/pr-detail-edit.scenario.test.ts
+```
+
+Implementation:
+
+- Updated `tests/scenario/pr-core/pr-detail-edit.scenario.test.ts` to derive initial form input expectations from the browser context with `new Date(instant)` local getters.
+- Updated the post-submit detail assertion to wait for the browser-local edited start date instead of hard-coding `2030-01-02`.
+- Kept scenario browser timezone unchanged.
+
+Verification:
+
+```bash
+TZ=UTC pnpm exec vitest run --project system-scenario tests/scenario/pr-core/pr-detail-edit.scenario.test.ts
+TZ=Asia/Shanghai pnpm exec vitest run --project system-scenario tests/scenario/pr-core/pr-detail-edit.scenario.test.ts
+```
+
+Results:
+
+- UTC target scenario: passed.
+- Asia/Shanghai target scenario: passed.
+
 ## Notes For Next Agent
 
 - The user asked for diagnosis only for the last turn, then asked to write this task packet because context is low.
diff --git a/tests/scenario/pr-core/pr-detail-edit.scenario.test.ts b/tests/scenario/pr-core/pr-detail-edit.scenario.test.ts
index 35aebc548..94fe4970a 100644
--- a/tests/scenario/pr-core/pr-detail-edit.scenario.test.ts
+++ b/tests/scenario/pr-core/pr-detail-edit.scenario.test.ts
@@ -1,11 +1,12 @@
 import assert from "node:assert/strict";
 import type { PartnerRequestFields } from "@partner-up-dev/backend";
-import { installDeterministicShareSidecarStubs } from "../_infra/browser/share-sidecars";
-import { installScenarioUserSession } from "../_infra/browser/session";
-import { withScenarioPage } from "../_infra/browser/browser";
-import { scenario } from "../_infra/scenario/scenario";
+import type { Page } from "playwright";
 import { givenPersistedPartnerRequest } from "../../../apps/backend/tests/pr-core/_kit/builders/partner-requests";
 import { givenUser } from "../../../apps/backend/tests/pr-core/_kit/builders/users";
+import { withScenarioPage } from "../_infra/browser/browser";
+import { installScenarioUserSession } from "../_infra/browser/session";
+import { installDeterministicShareSidecarStubs } from "../_infra/browser/share-sidecars";
+import { scenario } from "../_infra/scenario/scenario";
 
 const readyEditableTimeFields: PartnerRequestFields = {
   title: "System scenario ready editable time PR",
@@ -21,6 +22,49 @@ const readyEditableTimeFields: PartnerRequestFields = {
   notes: null,
 };
 
+type DateTimeInputParts = {
+  date: string;
+  time: string;
+};
+
+type DateTimeRangeInputParts = {
+  start: DateTimeInputParts;
+  end: DateTimeInputParts;
+};
+
+const toBrowserLocalDateTimeParts = async (
+  page: Page,
+  value: string,
+): Promise<DateTimeInputParts> =>
+  page.evaluate((instant) => {
+    const date = new Date(instant);
+    const pad2 = (numberValue: number): string => String(numberValue).padStart(2, "0");
+    return {
+      date: [date.getFullYear(), pad2(date.getMonth() + 1), pad2(date.getDate())].join("-"),
+      time: [pad2(date.getHours()), pad2(date.getMinutes())].join(":"),
+    };
+  }, value);
+
+const readDateTimeRangeInputs = async (page: Page): Promise<DateTimeRangeInputParts> =>
+  page.evaluate(() => ({
+    start: {
+      date:
+        document.querySelector<HTMLInputElement>('[data-testid="pr-editor.form.start-date"]')
+          ?.value ?? "",
+      time:
+        document.querySelector<HTMLInputElement>('[data-testid="pr-editor.form.start-time"]')
+          ?.value ?? "",
+    },
+    end: {
+      date:
+        document.querySelector<HTMLInputElement>('[data-testid="pr-editor.form.end-date"]')
+          ?.value ?? "",
+      time:
+        document.querySelector<HTMLInputElement>('[data-testid="pr-editor.form.end-time"]')
+          ?.value ?? "",
+    },
+  }));
+
 scenario("pr_detail_ready_creator_edits_time_window_from_pr_page", async (ctx) => {
   const creator = await givenUser("system-pr-detail-edit-ready-creator");
   const pr = await givenPersistedPartnerRequest({
@@ -53,30 +97,44 @@ scenario("pr_detail_ready_creator_edits_time_window_from_pr_page", async (ctx) =
       state: "visible",
       timeout: 10_000,
     });
+
+    const readyStart = readyEditableTimeFields.time[0];
+    const readyEnd = readyEditableTimeFields.time[1];
+    assert.ok(readyStart);
+    assert.ok(readyEnd);
+    const expectedInitialRange: DateTimeRangeInputParts = {
+      start: await toBrowserLocalDateTimeParts(page, readyStart),
+      end: await toBrowserLocalDateTimeParts(page, readyEnd),
+    };
+    const editedRange: DateTimeRangeInputParts = {
+      start: {
+        ...expectedInitialRange.start,
+        date: "2030-01-02",
+      },
+      end: {
+        ...expectedInitialRange.end,
+        date: "2030-01-03",
+      },
+    };
     await page.waitForFunction(
-      () => {
-        const startDate = document.querySelector<HTMLInputElement>(
-          '[data-testid="pr-editor.form.start-date"]',
-        )?.value;
-        const startTime = document.querySelector<HTMLInputElement>(
-          '[data-testid="pr-editor.form.start-time"]',
-        )?.value;
-        const endDate = document.querySelector<HTMLInputElement>(
-          '[data-testid="pr-editor.form.end-date"]',
-        )?.value;
-        const endTime = document.querySelector<HTMLInputElement>(
-          '[data-testid="pr-editor.form.end-time"]',
-        )?.value;
+      (expected) => {
+        const readInput = (testId: string): string | undefined =>
+          document.querySelector<HTMLInputElement>(`[data-testid="${testId}"]`)?.value;
         return (
-          startDate === "2030-01-01" &&
-          startTime === "00:00" &&
-          endDate === "2030-01-02" &&
-          endTime === "00:00"
+          readInput("pr-editor.form.start-date") === expected.start.date &&
+          readInput("pr-editor.form.start-time") === expected.start.time &&
+          readInput("pr-editor.form.end-date") === expected.end.date &&
+          readInput("pr-editor.form.end-time") === expected.end.time
         );
       },
-      undefined,
+      expectedInitialRange,
       { timeout: 10_000 },
     );
+    assert.deepEqual(
+      await readDateTimeRangeInputs(page),
+      expectedInitialRange,
+      "PR edit initial time inputs should match browser-local fixture instants",
+    );
 
     assert.equal(await page.getByTestId("pr-editor.form.title").count(), 0);
     assert.equal(await page.getByTestId("pr-editor.form.type").count(), 0);
@@ -85,27 +143,17 @@ scenario("pr_detail_ready_creator_edits_time_window_from_pr_page", async (ctx) =
     await page.getByTestId("pr-editor.form.start-date").fill("2030-01-02");
     await page.getByTestId("pr-editor.form.end-date").fill("2030-01-03");
     await page.waitForFunction(
-      () => {
-        const startDate = document.querySelector<HTMLInputElement>(
-          '[data-testid="pr-editor.form.start-date"]',
-        )?.value;
-        const startTime = document.querySelector<HTMLInputElement>(
-          '[data-testid="pr-editor.form.start-time"]',
-        )?.value;
-        const endDate = document.querySelector<HTMLInputElement>(
-          '[data-testid="pr-editor.form.end-date"]',
-        )?.value;
-        const endTime = document.querySelector<HTMLInputElement>(
-          '[data-testid="pr-editor.form.end-time"]',
-        )?.value;
+      (expected) => {
+        const readInput = (testId: string): string | undefined =>
+          document.querySelector<HTMLInputElement>(`[data-testid="${testId}"]`)?.value;
         return (
-          startDate === "2030-01-02" &&
-          startTime === "00:00" &&
-          endDate === "2030-01-03" &&
-          endTime === "00:00"
+          readInput("pr-editor.form.start-date") === expected.start.date &&
+          readInput("pr-editor.form.start-time") === expected.start.time &&
+          readInput("pr-editor.form.end-date") === expected.end.date &&
+          readInput("pr-editor.form.end-time") === expected.end.time
         );
       },
-      undefined,
+      editedRange,
       { timeout: 10_000 },
     );
     await page.getByTestId("pr-detail.creator.edit-content.submit").click();
@@ -115,13 +163,13 @@ scenario("pr_detail_ready_creator_edits_time_window_from_pr_page", async (ctx) =
       timeout: 10_000,
     });
     await page.waitForFunction(
-      () => {
+      (expected) => {
         const text = document
           .querySelector('[data-testid="pr-detail.facts.time-value"]')
           ?.textContent?.trim();
-        return text === "2030-01-02";
+        return text?.includes(expected) === true;
       },
-      undefined,
+      editedRange.start.date,
       { timeout: 10_000 },
     );
   });

From b714998452eedc600ea56fff05d4178058e43d74 Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Mon, 29 Jun 2026 17:15:16 +0800
Subject: [PATCH 64/94] fix(admin): prevent placement create freeze

- initialize new placement as a blank draft without implicit offer selection

- remove binding rule auto-fill watcher that caused recursive Vue updates

- add explicit missing Offer ID validation message
---
 apps/frontend/src/locales/schema.ts           |   1 +
 apps/frontend/src/locales/zh-CN.jsonc         |   1 +
 .../src/pages/AdminCommercePlacementPage.vue  | 131 ++++++++----------
 .../README.md                                 |  44 ++++++
 4 files changed, 100 insertions(+), 77 deletions(-)
 create mode 100644 tasks/admin-placement-create-freeze-diagnosis/README.md

diff --git a/apps/frontend/src/locales/schema.ts b/apps/frontend/src/locales/schema.ts
index 477d2926e..b230ff43c 100644
--- a/apps/frontend/src/locales/schema.ts
+++ b/apps/frontend/src/locales/schema.ts
@@ -1689,6 +1689,7 @@ export interface MessageSchema {
     placementEffectiveFromLabel: string;
     placementEffectiveToLabel: string;
     offerIdLabel: string;
+    offerIdRequiredMessage: string;
     ctaLabel: string;
     creativeDescriptionLabel: string;
     matchingRuleLabel: string;
diff --git a/apps/frontend/src/locales/zh-CN.jsonc b/apps/frontend/src/locales/zh-CN.jsonc
index c72953f31..9b87433d7 100644
--- a/apps/frontend/src/locales/zh-CN.jsonc
+++ b/apps/frontend/src/locales/zh-CN.jsonc
@@ -1069,6 +1069,7 @@
     "placementEffectiveFromLabel": "Placement 生效开始（ISO 8601，可留空）",
     "placementEffectiveToLabel": "Placement 生效结束（ISO 8601，可留空）",
     "offerIdLabel": "Offer ID",
+    "offerIdRequiredMessage": "请先填写 Offer ID。",
     "ctaLabel": "CTA 文案",
     "creativeDescriptionLabel": "按钮说明",
     "matchingRuleLabel": "Matching Rule",
diff --git a/apps/frontend/src/pages/AdminCommercePlacementPage.vue b/apps/frontend/src/pages/AdminCommercePlacementPage.vue
index 721ee56c4..1200c45ad 100644
--- a/apps/frontend/src/pages/AdminCommercePlacementPage.vue
+++ b/apps/frontend/src/pages/AdminCommercePlacementPage.vue
@@ -112,9 +112,10 @@
                   t("adminCommercePlacementOffer.offerIdLabel")
                 }}</span>
                 <input
-                  v-model.number="placementForm.offerId"
+                  :value="placementForm.offerId ?? ''"
                   class="text-input"
                   type="number"
+                  @input="handleOfferIdInput"
                 />
               </label>
 
@@ -305,7 +306,7 @@ type PlacementEditorForm = {
   priority: number;
   effectiveFrom: string;
   effectiveTo: string;
-  offerId: number;
+  offerId: number | null;
   ctaLabel: string;
   creativeDescription: string;
   matchingRule: JsonLogicRuleDraft;
@@ -321,46 +322,17 @@ const createBindingRuleDraft = (
   id: `binding-${++bindingRuleIdSequence}`,
 });
 
-const defaultPlacementBindingRules = (): PlacementBindingRuleDraft[] => [
-  createBindingRuleDraft({
-    fieldKey: "participantCount",
-    contextPath: "activeParticipantCount",
-    lock: true,
-  }),
-  createBindingRuleDraft({
-    fieldKey: "serviceStartAt",
-    contextPath: "time.startAt",
-    lock: true,
-  }),
-  createBindingRuleDraft({
-    fieldKey: "serviceEndAt",
-    contextPath: "time.endAt",
-    lock: true,
-  }),
-];
-
-const bindingRulesForOfferId = (
-  offerId: number,
-): PlacementBindingRuleDraft[] => {
-  const offer = offers.value.find((item) => item.id === offerId) ?? null;
-  if (offer?.productType !== "RENTAL") return [];
-  return defaultPlacementBindingRules();
-};
-
-const emptyPlacementForm = (): PlacementEditorForm => {
-  const offerId = offers.value[0]?.id ?? 0;
-  return {
-    status: "DRAFT",
-    priority: 0,
-    effectiveFrom: "",
-    effectiveTo: "",
-    offerId,
-    ctaLabel: "",
-    creativeDescription: "",
-    matchingRule: createPlacementMatchingRuleDraft(),
-    bindingRules: bindingRulesForOfferId(offerId),
-  };
-};
+const emptyPlacementForm = (): PlacementEditorForm => ({
+  status: "DRAFT",
+  priority: 0,
+  effectiveFrom: "",
+  effectiveTo: "",
+  offerId: null,
+  ctaLabel: "",
+  creativeDescription: "",
+  matchingRule: createPlacementMatchingRuleDraft(),
+  bindingRules: [],
+});
 
 const placementForm = ref<PlacementEditorForm>(emptyPlacementForm());
 
@@ -419,28 +391,14 @@ watch(
       ctaLabel: placement.creative.ctaLabel,
       creativeDescription: placement.creative.description ?? "",
       matchingRule: toPlacementMatchingRuleDraft(placement.matchingRule),
-      bindingRules:
-        placement.bindingRules.length > 0
-          ? placement.bindingRules.map((rule) => createBindingRuleDraft(rule))
-          : bindingRulesForOfferId(placement.offerId),
+      bindingRules: placement.bindingRules.map((rule) =>
+        createBindingRuleDraft(rule),
+      ),
     };
   },
   { immediate: true },
 );
 
-watch(
-  () =>
-    [
-      isCreatingPlacement.value,
-      placementForm.value.offerId,
-      placementForm.value.bindingRules.length,
-    ] as const,
-  ([creating, offerId, bindingRuleCount]) => {
-    if (!creating || bindingRuleCount > 0) return;
-    placementForm.value.bindingRules = bindingRulesForOfferId(offerId);
-  },
-);
-
 const prepareNewPlacement = () => {
   isCreatingPlacement.value = true;
 };
@@ -466,24 +424,43 @@ const removeBindingRule = (id: string) => {
   );
 };
 
-const buildPlacementInput = (): AdminPlacementInput => ({
-  placementType: "BUTTON",
-  offerId: placementForm.value.offerId,
-  status: placementForm.value.status,
-  priority: placementForm.value.priority,
-  effectiveFrom: placementForm.value.effectiveFrom.trim() || null,
-  effectiveTo: placementForm.value.effectiveTo.trim() || null,
-  matchingRule: buildPlacementMatchingRule(placementForm.value.matchingRule),
-  creative: {
-    ctaLabel: placementForm.value.ctaLabel.trim(),
-    description: placementForm.value.creativeDescription.trim() || null,
-  },
-  bindingRules: placementForm.value.bindingRules.map((rule) => ({
-    fieldKey: rule.fieldKey.trim(),
-    contextPath: rule.contextPath.trim(),
-    lock: true,
-  })),
-});
+const handleOfferIdInput = (event: Event) => {
+  if (!(event.target instanceof HTMLInputElement)) return;
+  const rawValue = event.target.value.trim();
+  if (!rawValue) {
+    placementForm.value.offerId = null;
+    return;
+  }
+
+  const parsed = Number(rawValue);
+  placementForm.value.offerId =
+    Number.isInteger(parsed) && parsed > 0 ? parsed : null;
+};
+
+const buildPlacementInput = (): AdminPlacementInput => {
+  if (placementForm.value.offerId === null) {
+    throw new Error(t("adminCommercePlacementOffer.offerIdRequiredMessage"));
+  }
+
+  return {
+    placementType: "BUTTON",
+    offerId: placementForm.value.offerId,
+    status: placementForm.value.status,
+    priority: placementForm.value.priority,
+    effectiveFrom: placementForm.value.effectiveFrom.trim() || null,
+    effectiveTo: placementForm.value.effectiveTo.trim() || null,
+    matchingRule: buildPlacementMatchingRule(placementForm.value.matchingRule),
+    creative: {
+      ctaLabel: placementForm.value.ctaLabel.trim(),
+      description: placementForm.value.creativeDescription.trim() || null,
+    },
+    bindingRules: placementForm.value.bindingRules.map((rule) => ({
+      fieldKey: rule.fieldKey.trim(),
+      contextPath: rule.contextPath.trim(),
+      lock: true,
+    })),
+  };
+};
 
 const handleSavePlacement = async () => {
   localErrorMessage.value = null;
diff --git a/tasks/admin-placement-create-freeze-diagnosis/README.md b/tasks/admin-placement-create-freeze-diagnosis/README.md
new file mode 100644
index 000000000..cd1bed60c
--- /dev/null
+++ b/tasks/admin-placement-create-freeze-diagnosis/README.md
@@ -0,0 +1,44 @@
+# Admin Placement Create Freeze Diagnosis
+
+## Objective & Hypothesis
+
+- Objective: diagnose why clicking `新建 Placement` on `/admin/commerce/placements` makes the page unresponsive.
+- Confirmed hypothesis: the click toggles create mode, then a page watcher repeatedly writes an empty `bindingRules` array back into its own reactive source.
+
+## Guardrails Touched
+
+- Frontend admin commerce page only during exploration.
+- No durable product or source mutation without explicit user confirmation.
+- `@partner-up-dev/design-web#design-web` skill loaded because the trigger is a `PuButton` interaction.
+
+## Verification
+
+- Static trace: `prepareNewPlacement -> isCreatingPlacement -> placementForm -> PlacementMatchingRulesEditor -> JsonLogicRuleEditor`.
+- Runtime reproduction with Playwright on `https://partner-up.local/admin/commerce/placements`.
+- Browser error: `Maximum recursive updates exceeded in component <AdminCommercePlacementPage>`.
+- Workspace data at reproduction time:
+  - first offer: `id=3`, `productType=RIDE_HAILING`, `status=ACTIVE`
+  - rental offer: `id=1`, `productType=RENTAL`, `status=ACTIVE`
+- Fix verification:
+  - `pnpm check:type:frontend`
+  - `pnpm check:format`
+  - `pnpm check:lint:frontend`
+  - Playwright click path: after `新建 Placement`, page shows `创建 Placement`, `Offer ID` is empty, binding row count is `0`, and no browser warning/error is emitted.
+
+## Current Understanding
+
+- `PuButton @click` is a documented public event and does not look like the direct cause.
+- The local `JsonLogicRuleEditor` watcher was a candidate but is not the root cause.
+- `emptyPlacementForm()` picks `offers.value[0]?.id`, which is currently the ride-hailing offer.
+- `bindingRulesForOfferId(3)` returns `[]` because only `RENTAL` gets default binding rules.
+- The watcher at `AdminCommercePlacementPage.vue:431` watches a freshly returned array containing `bindingRules.length`.
+- In create mode with zero binding rules, it assigns `placementForm.value.bindingRules = []`.
+- That assignment invalidates the watched dependency while the next computed tuple is still `[true, 3, 0]`, and the new returned array makes the watcher run again.
+
+## Resolution
+
+- `emptyPlacementForm()` now creates a blank draft with `offerId: null` and `bindingRules: []`.
+- The page no longer auto-selects `offers[0]`.
+- The page no longer derives or auto-fills binding rules from offer type.
+- The recursive binding-rule auto-fill watcher was removed.
+- Save now fails locally with an explicit message when `Offer ID` is missing.

From b9f8dac4fcc0a8641b6bb3a568d8648b34eef0df Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Mon, 29 Jun 2026 19:22:59 +0800
Subject: [PATCH 65/94] fix(commerce): model ride hailing listing state

- distinguish waiting-for-input from listing loading
- show recoverable RideHailing listing blockers in-place
- add focused listing state coverage
---
 .../ordering/RideHailingOrderingContent.vue   | 396 ++++++++++++------
 .../ride-hailing-listing-state.test.ts        |  67 +++
 .../ui/ordering/ride-hailing-listing-state.ts |  82 ++++
 apps/frontend/src/pages/OrderingPage.vue      |  85 +++-
 .../00-task-packet.md                         | 161 +++++++
 5 files changed, 656 insertions(+), 135 deletions(-)
 create mode 100644 apps/frontend/src/domains/commerce/ui/ordering/ride-hailing-listing-state.test.ts
 create mode 100644 apps/frontend/src/domains/commerce/ui/ordering/ride-hailing-listing-state.ts
 create mode 100644 tasks/ride-hailing-listing-state/00-task-packet.md

diff --git a/apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue b/apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue
index 68bfbf37f..3aa72f36c 100644
--- a/apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue
+++ b/apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue
@@ -1,147 +1,235 @@
 <template>
-  <template v-if="rideOffer">
-    <div ref="contentRoot" class="ride-hailing-ordering-content">
-      <RouteMap
-        class="ride-hailing-ordering-content__route-map"
-        data-testid="ordering.ride-hailing.route-map"
-        :route="routeForMap"
-        :fit-padding="routeMapFitPadding"
-        :interactive="true"
-        :route-points-editable="routeEditable"
-        variant="immersive"
-        hide-bottom-attribution
-        @route-point-click="openRoutePointDrawer"
-      />
-
-      <PuFloatPanel
-        v-model="ridePanelStop"
-        class="ride-hailing-ordering-content__sheet"
-        data-testid="ordering.ride-hailing.bottom-sheet"
-        :stops="ridePanelStops"
-        position="absolute"
-        :content-padding="false"
-        aria-label="车型面板"
-        :z-index="20"
-      >
-        <div class="ride-hailing-ordering-content__vehicles">
-          <template v-if="showsRideQuoteSkeleton">
-            <div
-              v-for="index in 2"
-              :key="index"
-              class="ride-hailing-ordering-content__vehicle-skeleton"
-              data-testid="ordering.ride-hailing.vehicle-card.skeleton"
-            >
-              <div class="ride-hailing-ordering-content__vehicle-skeleton-meta">
-                <div class="ride-hailing-ordering-content__vehicle-skeleton-name">
-                  <PuSkeleton width="1.25rem" height="1.25rem" radius="sm" />
-                  <PuSkeleton width="8.5rem" height="1.125rem" radius="pill" />
-                </div>
-                <PuSkeleton
-                  class="ride-hailing-ordering-content__vehicle-skeleton-preview"
-                  width="min(13.5rem, 100%)"
-                  height="5rem"
-                  radius="sm"
-                  block
-                />
-              </div>
-              <div class="ride-hailing-ordering-content__vehicle-skeleton-price">
-                <PuSkeleton width="2.5rem" height="0.875rem" radius="pill" />
-                <div class="ride-hailing-ordering-content__vehicle-skeleton-amount">
-                  <PuSkeleton width="4.25rem" height="1.25rem" radius="pill" />
-                  <PuSkeleton width="1.25rem" height="1.25rem" radius="sm" />
-                </div>
-              </div>
-            </div>
-          </template>
-          <template v-else>
-            <RideHailingSkuCard
-              v-for="option in visibleRideQuoteOptions"
-              :key="option.quoteId"
-              :display-name="option.displayName"
-              :price-label="formatFen(option.price.totalFen)"
-              :selectable="true"
-              :selected="rideSkuSelection.isSelected(option.skuId)"
-              :preview-src="skuPreviewSrc(option.skuId)"
-              @select="rideSkuSelection.toggle(option.skuId)"
+  <div ref="contentRoot" class="ride-hailing-ordering-content">
+    <RouteMap
+      class="ride-hailing-ordering-content__route-map"
+      data-testid="ordering.ride-hailing.route-map"
+      :route="routeForMap"
+      :fit-padding="routeMapFitPadding"
+      :interactive="true"
+      :route-points-editable="routeEditable"
+      variant="immersive"
+      hide-bottom-attribution
+      @route-point-click="openRoutePointDrawer"
+    />
+
+    <PuFloatPanel
+      v-model="ridePanelStop"
+      class="ride-hailing-ordering-content__sheet"
+      data-testid="ordering.ride-hailing.bottom-sheet"
+      :stops="ridePanelStops"
+      position="absolute"
+      :content-padding="false"
+      aria-label="车型面板"
+      :z-index="20"
+    >
+      <div class="ride-hailing-ordering-content__vehicles">
+        <div
+          v-if="listingBlocker"
+          class="ride-hailing-ordering-content__listing-state"
+          data-testid="ordering.ride-hailing.listing-blocker"
+          :data-reason="listingBlocker.reason"
+        >
+          <PuInlineNotice
+            tone="error"
+            :title="listingBlocker.title"
+            :message="listingBlocker.message"
+          >
+            <template v-if="listingBlocker.actionLabel" #actions>
+              <PuButton
+                size="sm"
+                tone="primary"
+                variant="soft"
+                data-testid="ordering.ride-hailing.listing-blocker.action"
+                @click="emit('resolve:blocker', listingBlocker)"
+              >
+                {{ listingBlocker.actionLabel }}
+              </PuButton>
+            </template>
+          </PuInlineNotice>
+          <PuFormItem
+            v-if="listingBlocker.reason === 'missing-contact-phone'"
+            label="联系人电话"
+            for-id="ride-hailing-contact-phone"
+            required
+          >
+            <PuInput
+              id="ride-hailing-contact-phone"
+              v-model="rideContactPhone"
+              native-type="tel"
+              inputmode="tel"
+              autocomplete="tel"
+              clearable
+              placeholder="请输入联系人手机号"
+              data-testid="ordering.ride-hailing.contact-phone"
             />
-          </template>
+          </PuFormItem>
         </div>
-      </PuFloatPanel>
-
-      <div
-        class="ride-hailing-ordering-content__controls"
-        data-testid="ordering.ride-hailing.drawer-control-row"
-      >
-        <button
-          type="button"
-          class="ride-hailing-ordering-content__control"
-          data-testid="ordering.ride-hailing.riders.open"
-          @click="ridersDrawerOpen = true"
-        >
-          <span data-testid="ordering.ride-hailing.riders">同乘人</span>
-          <strong>{{ riderSummary }}</strong>
-          <i class="i-mdi-chevron-right" aria-hidden="true"></i>
-        </button>
         <div
-          class="ride-hailing-ordering-content__control ride-hailing-ordering-content__control--static"
-          data-testid="ordering.ride-hailing.departure-time.row"
+          v-else-if="showsRideListingError"
+          class="ride-hailing-ordering-content__listing-state"
+          data-testid="ordering.ride-hailing.listing-error"
         >
-          <span>出发时间</span>
-          <strong data-testid="ordering.ride-hailing.departure-time">
-            {{ rideDepartureLabel }}
-          </strong>
+          <PuInlineNotice
+            tone="error"
+            title="车型报价加载失败"
+            :message="rideListingErrorMessage"
+          >
+            <template #actions>
+              <PuButton
+                size="sm"
+                tone="primary"
+                variant="soft"
+                data-testid="ordering.ride-hailing.listing.retry"
+                @click="refetchRideListing"
+              >
+                重新加载
+              </PuButton>
+            </template>
+          </PuInlineNotice>
         </div>
-      </div>
-
-      <PuDrawer
-        :visible="routePointDrawerOpen"
-        :title="routePointDrawerTitle"
-        max-width="44rem"
-        @close="closeRoutePointDrawer"
-      >
-        <LocationPickerPanel
-          v-if="selectedRoutePoint"
-          :initial-location="selectedRoutePointInitialLocation"
-          data-testid="ordering.ride-hailing.route-point.drawer"
-          @pick="handleRoutePointPicked"
-          @cancel="closeRoutePointDrawer"
-        />
-      </PuDrawer>
-
-      <PuDrawer
-        v-model:visible="ridersDrawerOpen"
-        title="同乘人"
-        max-width="44rem"
-      >
-        <div class="ride-hailing-ordering-content__drawer-content">
+        <div
+          v-else-if="showsEmptyRideListing"
+          class="ride-hailing-ordering-content__listing-state"
+          data-testid="ordering.ride-hailing.listing-empty"
+        >
           <PuInlineNotice
-            v-if="ridersLocked"
-            tone="info"
-            message="同乘人由当前搭子请求锁定。"
-          />
+            tone="error"
+            title="未加载到可下单车型"
+            message="当前路线没有返回可下单车型，请重新加载或联系支持。"
+          >
+            <template #actions>
+              <PuButton
+                size="sm"
+                tone="primary"
+                variant="soft"
+                data-testid="ordering.ride-hailing.listing.retry"
+                @click="refetchRideListing"
+              >
+                重新加载
+              </PuButton>
+            </template>
+          </PuInlineNotice>
+        </div>
+        <template v-else-if="showsRideQuoteSkeleton">
           <div
-            v-for="rider in rideRiders"
-            :key="rider.userId"
-            class="ride-hailing-ordering-content__rider-row"
+            v-for="index in 2"
+            :key="index"
+            class="ride-hailing-ordering-content__vehicle-skeleton"
+            data-testid="ordering.ride-hailing.vehicle-card.skeleton"
           >
-            <span class="i-mdi-account-circle" aria-hidden="true"></span>
-            <div>
-              <strong>{{ rider.displayName }}</strong>
-              <small>{{ rider.phoneMasked ?? "暂无手机号" }}</small>
+            <div class="ride-hailing-ordering-content__vehicle-skeleton-meta">
+              <div class="ride-hailing-ordering-content__vehicle-skeleton-name">
+                <PuSkeleton width="1.25rem" height="1.25rem" radius="sm" />
+                <PuSkeleton width="8.5rem" height="1.125rem" radius="pill" />
+              </div>
+              <PuSkeleton
+                class="ride-hailing-ordering-content__vehicle-skeleton-preview"
+                width="min(13.5rem, 100%)"
+                height="5rem"
+                radius="sm"
+                block
+              />
+            </div>
+            <div class="ride-hailing-ordering-content__vehicle-skeleton-price">
+              <PuSkeleton width="2.5rem" height="0.875rem" radius="pill" />
+              <div class="ride-hailing-ordering-content__vehicle-skeleton-amount">
+                <PuSkeleton width="4.25rem" height="1.25rem" radius="pill" />
+                <PuSkeleton width="1.25rem" height="1.25rem" radius="sm" />
+              </div>
             </div>
           </div>
-        </div>
-      </PuDrawer>
+        </template>
+        <template v-else>
+          <RideHailingSkuCard
+            v-for="option in visibleRideQuoteOptions"
+            :key="option.quoteId"
+            :display-name="option.displayName"
+            :price-label="formatFen(option.price.totalFen)"
+            :selectable="true"
+            :selected="rideSkuSelection.isSelected(option.skuId)"
+            :preview-src="skuPreviewSrc(option.skuId)"
+            @select="rideSkuSelection.toggle(option.skuId)"
+          />
+        </template>
+      </div>
+    </PuFloatPanel>
+
+    <div
+      class="ride-hailing-ordering-content__controls"
+      data-testid="ordering.ride-hailing.drawer-control-row"
+    >
+      <button
+        type="button"
+        class="ride-hailing-ordering-content__control"
+        data-testid="ordering.ride-hailing.riders.open"
+        @click="ridersDrawerOpen = true"
+      >
+        <span data-testid="ordering.ride-hailing.riders">同乘人</span>
+        <strong>{{ riderSummary }}</strong>
+        <i class="i-mdi-chevron-right" aria-hidden="true"></i>
+      </button>
+      <div
+        class="ride-hailing-ordering-content__control ride-hailing-ordering-content__control--static"
+        data-testid="ordering.ride-hailing.departure-time.row"
+      >
+        <span>出发时间</span>
+        <strong data-testid="ordering.ride-hailing.departure-time">
+          {{ rideDepartureLabel }}
+        </strong>
+      </div>
     </div>
-  </template>
+
+    <PuDrawer
+      :visible="routePointDrawerOpen"
+      :title="routePointDrawerTitle"
+      max-width="44rem"
+      @close="closeRoutePointDrawer"
+    >
+      <LocationPickerPanel
+        v-if="selectedRoutePoint"
+        :initial-location="selectedRoutePointInitialLocation"
+        data-testid="ordering.ride-hailing.route-point.drawer"
+        @pick="handleRoutePointPicked"
+        @cancel="closeRoutePointDrawer"
+      />
+    </PuDrawer>
+
+    <PuDrawer
+      v-model:visible="ridersDrawerOpen"
+      title="同乘人"
+      max-width="44rem"
+    >
+      <div class="ride-hailing-ordering-content__drawer-content">
+        <PuInlineNotice
+          v-if="ridersLocked"
+          tone="info"
+          message="同乘人由当前搭子请求锁定。"
+        />
+        <div
+          v-for="rider in rideRiders"
+          :key="rider.userId"
+          class="ride-hailing-ordering-content__rider-row"
+        >
+          <span class="i-mdi-account-circle" aria-hidden="true"></span>
+          <div>
+            <strong>{{ rider.displayName }}</strong>
+            <small>{{ rider.phoneMasked ?? "暂无手机号" }}</small>
+          </div>
+        </div>
+      </div>
+    </PuDrawer>
+  </div>
 </template>
 
 <script setup lang="ts">
 import {
+  PuButton,
   PuDrawer,
   PuFloatPanel,
   type PuFloatPanelStop,
+  PuFormItem,
   PuInlineNotice,
+  PuInput,
   PuSkeleton,
   usePuSelect,
 } from "@partner-up-dev/design-web";
@@ -176,6 +264,11 @@ import {
 import RouteMap from "@/domains/route/ui/RouteMap.vue";
 import type { MapFitPadding } from "@/shared/map/types";
 import RideHailingSkuCard from "./RideHailingSkuCard.vue";
+import {
+  type RideHailingListingBlocker,
+  resolveRideHailingListingBlocker,
+  resolveRideHailingListingSurfaceState,
+} from "./ride-hailing-listing-state";
 
 export type RideVehicleOption = Extract<
   OfferListingResponse["items"][number],
@@ -195,6 +288,7 @@ const props = defineProps<{
 const emit = defineEmits<{
   "update:output": [value: OrderingContentOutput | null];
   "update:summary": [value: OrderingContentSummary];
+  "resolve:blocker": [value: RideHailingListingBlocker];
 }>();
 
 const CONTROL_ROW_HEIGHT = 44;
@@ -442,11 +536,19 @@ const skuPreviewSrc = (skuId: number): string | null => {
   );
 };
 
+const listingBlocker = computed<RideHailingListingBlocker | null>(() => {
+  return resolveRideHailingListingBlocker({
+    hasRideOffer: rideOffer.value !== null,
+    hasRoute: rideRouteForSubmit.value !== null,
+    contactPhone: rideContactPhone.value,
+    riderCount: rideRiders.value.length,
+  });
+});
+
 const offerListingInput = computed<OfferListingInput | null>(() => {
   const route = rideRouteForSubmit.value;
-  if (!rideOffer.value || !route) return null;
+  if (listingBlocker.value || !rideOffer.value || !route) return null;
   const phone = rideContactPhone.value.trim();
-  if (!phone || rideRiders.value.length === 0) return null;
   return {
     productType: "RIDE_HAILING",
     participants: rideRiders.value,
@@ -485,10 +587,33 @@ const rideQuoteOptions = computed<RideVehicleOption[]>(() =>
 
 const visibleRideQuoteOptions = computed<RideVehicleOption[]>(() => rideQuoteOptions.value);
 
-const showsRideQuoteSkeleton = computed(
-  () => offerListingQuery.isPending.value && visibleRideQuoteOptions.value.length === 0,
+const rideListingSurfaceState = computed(() =>
+  resolveRideHailingListingSurfaceState({
+    blocker: listingBlocker.value,
+    hasListingInput: offerListingQueryInput.value !== null,
+    isPending: offerListingQuery.isPending.value,
+    isError: offerListingQuery.isError.value,
+    isSuccess: offerListingQuery.isSuccess.value,
+    visibleOptionCount: visibleRideQuoteOptions.value.length,
+  }),
 );
 
+const showsRideQuoteSkeleton = computed(() => rideListingSurfaceState.value === "loading");
+
+const showsRideListingError = computed(() => rideListingSurfaceState.value === "error");
+
+const showsEmptyRideListing = computed(() => rideListingSurfaceState.value === "empty");
+
+const rideListingErrorMessage = computed(() => {
+  const error = offerListingQuery.error.value;
+  return error instanceof Error ? error.message : "请稍后重试或联系支持。";
+});
+
+const refetchRideListing = (): void => {
+  if (!offerListingQueryInput.value) return;
+  void offerListingQuery.refetch();
+};
+
 const rideSkuSelection = usePuSelect<number>({
   multiple: true,
   isOptionDisabled: (skuId) =>
@@ -624,14 +749,10 @@ watch(
   { immediate: true },
 );
 
-watch(
-  output,
-  (next) => emit("update:output", next),
-  {
+watch(output, (next) => emit("update:output", next), {
   immediate: true,
   deep: true,
-  },
-);
+});
 
 watch(summary, (next) => emit("update:summary", next), {
   immediate: true,
@@ -683,6 +804,13 @@ watch(
   padding: 0 var(--sys-spacing-medium) var(--sys-spacing-small);
 }
 
+.ride-hailing-ordering-content__listing-state {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--sys-spacing-small);
+}
+
 .ride-hailing-ordering-content__vehicle-skeleton {
   display: flex;
   min-width: 0;
diff --git a/apps/frontend/src/domains/commerce/ui/ordering/ride-hailing-listing-state.test.ts b/apps/frontend/src/domains/commerce/ui/ordering/ride-hailing-listing-state.test.ts
new file mode 100644
index 000000000..0f77043a8
--- /dev/null
+++ b/apps/frontend/src/domains/commerce/ui/ordering/ride-hailing-listing-state.test.ts
@@ -0,0 +1,67 @@
+import { describe, expect, it } from "vitest";
+import {
+  resolveRideHailingListingBlocker,
+  resolveRideHailingListingSurfaceState,
+} from "./ride-hailing-listing-state";
+
+describe("RideHailing listing state", () => {
+  it("treats missing contact phone as waiting for input", () => {
+    const blocker = resolveRideHailingListingBlocker({
+      hasRideOffer: true,
+      hasRoute: true,
+      contactPhone: "",
+      riderCount: 2,
+    });
+
+    expect(blocker?.reason).toBe("missing-contact-phone");
+    expect(
+      resolveRideHailingListingSurfaceState({
+        blocker,
+        hasListingInput: false,
+        isPending: true,
+        isError: false,
+        isSuccess: false,
+        visibleOptionCount: 0,
+      }),
+    ).toBe("waiting-for-input");
+  });
+
+  it("shows loading only when listing input exists and the request is pending", () => {
+    expect(
+      resolveRideHailingListingSurfaceState({
+        blocker: null,
+        hasListingInput: true,
+        isPending: true,
+        isError: false,
+        isSuccess: false,
+        visibleOptionCount: 0,
+      }),
+    ).toBe("loading");
+  });
+
+  it("treats successful listing without visible options as empty", () => {
+    expect(
+      resolveRideHailingListingSurfaceState({
+        blocker: null,
+        hasListingInput: true,
+        isPending: false,
+        isError: false,
+        isSuccess: true,
+        visibleOptionCount: 0,
+      }),
+    ).toBe("empty");
+  });
+
+  it("treats listed vehicle candidates as ready", () => {
+    expect(
+      resolveRideHailingListingSurfaceState({
+        blocker: null,
+        hasListingInput: true,
+        isPending: false,
+        isError: false,
+        isSuccess: true,
+        visibleOptionCount: 1,
+      }),
+    ).toBe("ready");
+  });
+});
diff --git a/apps/frontend/src/domains/commerce/ui/ordering/ride-hailing-listing-state.ts b/apps/frontend/src/domains/commerce/ui/ordering/ride-hailing-listing-state.ts
new file mode 100644
index 000000000..64a6e1365
--- /dev/null
+++ b/apps/frontend/src/domains/commerce/ui/ordering/ride-hailing-listing-state.ts
@@ -0,0 +1,82 @@
+export type RideHailingListingBlockerReason =
+  | "missing-offer"
+  | "missing-route"
+  | "missing-contact-phone"
+  | "missing-riders";
+
+export type RideHailingListingBlocker = {
+  reason: RideHailingListingBlockerReason;
+  title: string;
+  message: string;
+  actionLabel?: string;
+};
+
+export type RideHailingListingBlockerInput = {
+  hasRideOffer: boolean;
+  hasRoute: boolean;
+  contactPhone: string;
+  riderCount: number;
+};
+
+export type RideHailingListingSurfaceState =
+  | "waiting-for-input"
+  | "loading"
+  | "error"
+  | "empty"
+  | "ready";
+
+export type RideHailingListingSurfaceStateInput = {
+  blocker: RideHailingListingBlocker | null;
+  hasListingInput: boolean;
+  isPending: boolean;
+  isError: boolean;
+  isSuccess: boolean;
+  visibleOptionCount: number;
+};
+
+export const resolveRideHailingListingBlocker = (
+  input: RideHailingListingBlockerInput,
+): RideHailingListingBlocker | null => {
+  if (!input.hasRideOffer) {
+    return {
+      reason: "missing-offer",
+      title: "暂不能加载车型",
+      message: "当前商品配置不可用，请联系支持处理。",
+      actionLabel: "联系支持",
+    };
+  }
+  if (!input.hasRoute) {
+    return {
+      reason: "missing-route",
+      title: "需要补全行程路线",
+      message: "网约车报价需要上车点和目的地，请先补全路线后再下单。",
+      actionLabel: "查看处理方式",
+    };
+  }
+  if (input.contactPhone.trim().length === 0) {
+    return {
+      reason: "missing-contact-phone",
+      title: "需要联系人电话",
+      message: "用于司机或平台在行程异常时联系你。填写后会自动加载车型报价。",
+    };
+  }
+  if (input.riderCount === 0) {
+    return {
+      reason: "missing-riders",
+      title: "需要确认同乘人",
+      message: "当前没有可用于下单的搭子参与者，请确认搭子请求成员和状态。",
+      actionLabel: "查看处理方式",
+    };
+  }
+  return null;
+};
+
+export const resolveRideHailingListingSurfaceState = (
+  input: RideHailingListingSurfaceStateInput,
+): RideHailingListingSurfaceState => {
+  if (input.blocker || !input.hasListingInput) return "waiting-for-input";
+  if (input.isError) return "error";
+  if (input.isPending && input.visibleOptionCount === 0) return "loading";
+  if (input.isSuccess && input.visibleOptionCount === 0) return "empty";
+  return "ready";
+};
diff --git a/apps/frontend/src/pages/OrderingPage.vue b/apps/frontend/src/pages/OrderingPage.vue
index b19d50156..a2d81bb48 100644
--- a/apps/frontend/src/pages/OrderingPage.vue
+++ b/apps/frontend/src/pages/OrderingPage.vue
@@ -40,6 +40,7 @@
         :listing-refresh-key="listingRefreshKey"
         @update:output="contentOutput = $event"
         @update:summary="contentSummary = $event"
+        @resolve:blocker="handleRideListingBlocker"
       />
     </div>
 
@@ -120,12 +121,18 @@ import OrderingPageShell from "@/domains/commerce/ui/ordering/OrderingPageShell.
 import OrderingPriceDetailDrawer from "@/domains/commerce/ui/ordering/OrderingPriceDetailDrawer.vue";
 import RentalOrderingForm from "@/domains/commerce/ui/ordering/RentalOrderingForm.vue";
 import RideHailingOrderingContent from "@/domains/commerce/ui/ordering/RideHailingOrderingContent.vue";
+import type { RideHailingListingBlocker } from "@/domains/commerce/ui/ordering/ride-hailing-listing-state";
 import { useOrderingHandoffStore } from "@/domains/commerce/use-cases/useOrderingHandoffStore";
 import { useUpdatePRStatus } from "@/domains/pr/queries/usePRActions";
 import { usePRDetail } from "@/domains/pr/queries/usePRDetail";
 
 type OrderingOfferDetail = OrderingEntryPayload["offerDetail"];
-type OrderingDialogKind = "info" | "blocked-pr-not-ready" | "confirm-mark-pr-ready";
+type OrderingDialogKind =
+  | "info"
+  | "blocked-pr-not-ready"
+  | "confirm-mark-pr-ready"
+  | "return-to-pr"
+  | "contact-support";
 type OrderingDialogState = {
   open: boolean;
   kind: OrderingDialogKind;
@@ -287,6 +294,36 @@ const openInfoDialog = (input: {
   };
 };
 
+const openReturnToPrDialog = (input: {
+  title: string;
+  description: string;
+  confirmText?: string;
+}): void => {
+  orderingDialog.value = {
+    open: true,
+    kind: "return-to-pr",
+    title: input.title,
+    description: input.description,
+    confirmText: input.confirmText ?? "返回搭子请求",
+    showCancel: true,
+  };
+};
+
+const openContactSupportDialog = (input: {
+  title: string;
+  description: string;
+  confirmText?: string;
+}): void => {
+  orderingDialog.value = {
+    open: true,
+    kind: "contact-support",
+    title: input.title,
+    description: input.description,
+    confirmText: input.confirmText ?? "联系支持",
+    showCancel: true,
+  };
+};
+
 const closeOrderingDialog = (): void => {
   orderingDialog.value = {
     ...orderingDialog.value,
@@ -359,6 +396,40 @@ const submitOrder = async (): Promise<void> => {
   await createOrderFromQuoteDraft(input);
 };
 
+const handleRideListingBlocker = (blocker: RideHailingListingBlocker): void => {
+  if (blocker.reason === "missing-riders" && canOfferPrReadyRecovery.value) {
+    openPrNotReadyRecoveryDialog({
+      title: blocker.title,
+      detail: "当前没有可用于下单的搭子参与者。可以先将搭子请求切换到「已成团」，再重新进入下单。",
+    });
+    return;
+  }
+
+  if (blocker.reason === "missing-route" || blocker.reason === "missing-riders") {
+    openReturnToPrDialog({
+      title: blocker.title,
+      description:
+        blocker.reason === "missing-route"
+          ? "请回到搭子请求补全上车点和目的地，再重新进入下单。"
+          : "请回到搭子请求确认成员和状态，再重新进入下单。",
+    });
+    return;
+  }
+
+  if (blocker.reason === "missing-offer") {
+    openContactSupportDialog({
+      title: blocker.title,
+      description: blocker.message,
+    });
+    return;
+  }
+
+  openInfoDialog({
+    title: blocker.title,
+    description: blocker.message,
+  });
+};
+
 const markCurrentPrReady = async (): Promise<void> => {
   const prId = orderingPrId.value;
   if (prId === null) {
@@ -399,6 +470,18 @@ const handleOrderingDialogConfirm = async (): Promise<void> => {
     return;
   }
 
+  if (orderingDialog.value.kind === "return-to-pr") {
+    closeOrderingDialog();
+    await router.push(backFallbackTo.value);
+    return;
+  }
+
+  if (orderingDialog.value.kind === "contact-support") {
+    closeOrderingDialog();
+    await router.push({ name: "contact-support" });
+    return;
+  }
+
   if (orderingDialog.value.kind === "confirm-mark-pr-ready") {
     await markCurrentPrReady();
     return;
diff --git a/tasks/ride-hailing-listing-state/00-task-packet.md b/tasks/ride-hailing-listing-state/00-task-packet.md
new file mode 100644
index 000000000..3a2d4e602
--- /dev/null
+++ b/tasks/ride-hailing-listing-state/00-task-packet.md
@@ -0,0 +1,161 @@
+# Ride Hailing Listing State UX
+
+## Objective & Hypothesis
+
+Fix the RideHailing ordering surface so Offer Listing state is modeled against
+the correct object.
+
+Current observed behavior:
+
+- `RideHailingOrderingContent` derives `offerListingInput` as `null` when
+  required ordering context is missing.
+- `useOfferListing` is correctly disabled when input is `null`.
+- The UI still renders RideHailing SKU skeletons because it treats query
+  `isPending` as loading even when no listing request can start.
+- Users see an indefinite loading state with no recovery path.
+
+Hypothesis:
+
+- The root issue is not missing copy or a durable UX rule. It is a state-modeling
+  bug: `waiting for required input`, `request in flight`, `empty result`, and
+  `request failure` are not distinct UI states.
+- Listing is a core page capability. If it cannot start or cannot produce a
+  usable listing, the page should surface a blocking problem state with an
+  in-place recovery path when possible.
+
+## Guardrails Touched
+
+- Frontend ordering UX:
+  - `apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue`
+  - likely `apps/frontend/src/pages/OrderingPage.vue`
+- Query semantics:
+  - `apps/frontend/src/domains/commerce/queries/useCommerce.ts` should remain the
+    RPC/query owner; avoid calling API directly from components.
+- Product authority:
+  - Offer Listing remains backend-owned.
+  - Frontend may collect missing local context but must not submit copied SKU,
+    price, route, or participant facts to create-order.
+- Design system:
+  - Use `@partner-up-dev/design-web` components. `PuInlineNotice` is preferred
+    for local blocking state; `PuDialog` is acceptable for focused recovery
+    flows. `PuSnackbar` is not preferred for this blocking/core capability state.
+- Durable docs:
+  - Do not add a broad ordering UX rule as the primary fix.
+  - Promote durable docs only if implementation reveals a cross-unit contract or
+    product invariant that is not already represented.
+
+## Current Understanding
+
+The reproduced `ordering-entry` response has:
+
+- `offerDetail.productType = "RIDE_HAILING"`
+- `bindings.route` present
+- `bindings.orderParticipants` present
+- `bindings.contactPhone` absent
+
+Therefore `RideHailingOrderingContent` returns `offerListingInput = null`,
+which disables `useOfferListing`. This is correct from a request-safety
+perspective, but the UI incorrectly renders loading skeletons.
+
+Known blockers that can make RideHailing listing input unavailable:
+
+- missing ride offer / product type mismatch
+- missing route
+- missing contact phone
+- missing riders/order participants
+
+Known downstream non-success states after a request starts:
+
+- network/API failure
+- successful listing with no listed items
+- stale listing requiring refresh after quote expiration
+
+## Candidate State Model
+
+Represent the listing capability as an explicit state before mapping to UI:
+
+- `waiting-for-input`: required local/handoff context is incomplete.
+- `loading`: listing input exists and the query is fetching.
+- `ready`: listed choice candidates exist.
+- `empty`: listing returned but no candidates are available.
+- `error`: listing request failed.
+
+This prevents disabled queries from being rendered as loading.
+
+## Candidate UX
+
+For `missing-contact-phone`:
+
+- Show an in-place `PuInlineNotice` in the RideHailing vehicle panel.
+- Provide a telephone input in-place so the user can complete the missing
+  contact phone without leaving the page.
+- Once filled, listing should request automatically through the existing query
+  path.
+
+For `missing-route`:
+
+- Show an in-place blocking notice.
+- Provide a clear action back to the PR or route editing surface if available.
+
+For `missing-riders`:
+
+- Show an in-place blocking notice explaining that no active participants are
+  available for ordering.
+- If the existing PR NOT READY recovery applies, reuse the parent `PuDialog`
+  flow rather than inventing a parallel one.
+
+For `empty`:
+
+- Show a clear unavailable state instead of empty skeletons.
+- Explain that no vehicle candidates are currently available for the route.
+
+## Verification
+
+Planned verification after implementation starts:
+
+- Focused frontend tests for:
+  - missing contact phone renders blocker/in-place input, not skeleton
+  - filling contact phone enables listing
+  - missing route does not show skeleton
+  - query pending shows skeleton only when listing input exists
+  - successful empty listing shows unavailable state
+- Static checks:
+  - `pnpm check:type:frontend`
+  - `pnpm check:lint:frontend`
+- Scenario confidence:
+  - run the focused RideHailing ordering scenario if changes touch the normal
+    listing flow or create-order readiness.
+
+## Implementation Notes
+
+- Added an explicit RideHailing listing state helper:
+  - `waiting-for-input`
+  - `loading`
+  - `error`
+  - `empty`
+  - `ready`
+- `RideHailingOrderingContent` now shows skeletons only when listing input exists
+  and the listing query is pending.
+- Missing contact phone is recoverable in-place through a telephone input in the
+  RideHailing vehicle panel.
+- Missing route / missing riders / missing offer surface blocking notices with
+  action paths into the parent `PuDialog` recovery flow.
+- Successful listing with zero visible vehicle candidates is treated as an error
+  surface, not as loading.
+
+## Verification Run
+
+- `pnpm --filter @partner-up-dev/frontend test:unit -- src/domains/commerce/ui/ordering/ride-hailing-listing-state.test.ts`
+  - passed; Vitest selected the frontend project and reported 35 files / 159
+    tests passed.
+- `pnpm check:type:frontend`
+  - passed.
+- `pnpm check:lint:frontend`
+  - passed; naming audit still reports the pre-existing weak-name findings for
+    `RideHailingOrderContent` and `RideHailingOrderingContent`.
+- Direct file Biome check over touched frontend files and this packet passed.
+
+## Next Step
+
+Optional manual/scenario validation in a browser or scenario test if we want
+full confidence over the interactive phone-entry path.

From fea66d1975ccad70bcc6fea876821ffb1288edbe Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Mon, 29 Jun 2026 19:49:46 +0800
Subject: [PATCH 66/94] chore(backend): log caocao estimate responses

---
 .../ride-hailing/services/caocao-provider.ts  | 26 ++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts b/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
index 67e443f57..4a83a0e3f 100644
--- a/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
+++ b/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
@@ -292,6 +292,18 @@ const normalizeCaocaoParams = (params: CaocaoParamInput): CaocaoSignedParams =>
   return normalized;
 };
 
+const parseCaocaoResponseJson = async (response: Response): Promise<unknown> => {
+  const text = await response.text();
+  if (text.trim().length === 0) return null;
+  try {
+    return JSON.parse(text) as unknown;
+  } catch {
+    return {
+      unparseableBody: text,
+    };
+  }
+};
+
 export function createCaocaoSignature(input: {
   params: CaocaoSignedParams;
   signKey: string;
@@ -714,6 +726,18 @@ export class CaocaoProviderAdapter implements RideHailingProviderPort {
             },
             body: serializeCaocaoFormBody(signedParams),
           });
+    const responseBody = await parseCaocaoResponseJson(response);
+    if (endpointPath === "/common/estimatePriceWithDetail") {
+      console.info("[RideHailingProviderEstimate] Caocao response", {
+        endpointPath,
+        httpStatus: response.status,
+        ok: response.ok,
+        params: normalizeCaocaoParams(params),
+        providerInstanceId: this.input.providerInstance.id,
+        providerType: this.input.providerInstance.providerType,
+        responseBody,
+      });
+    }
     if (!response.ok) {
       return throwHttpProblem({
         status: 502,
@@ -721,6 +745,6 @@ export class CaocaoProviderAdapter implements RideHailingProviderPort {
       });
     }
 
-    return assertCaocaoSuccess(parseCaocaoResponseBody<TData>(await response.json()));
+    return assertCaocaoSuccess(parseCaocaoResponseBody<TData>(responseBody));
   }
 }

From 7ca872e77289a2fcbfb1ee004a3ad8db96b51a2c Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Mon, 29 Jun 2026 20:20:02 +0800
Subject: [PATCH 67/94] chore(backend): trace ride hailing listing diagnostics

---
 .../ride-hailing/services/caocao-provider.ts  | 12 ++-
 .../domains/trade/use-cases/offer-listing.ts  | 92 ++++++++++++++++++-
 2 files changed, 101 insertions(+), 3 deletions(-)

diff --git a/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts b/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
index 4a83a0e3f..2ff6fe794 100644
--- a/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
+++ b/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
@@ -304,6 +304,15 @@ const parseCaocaoResponseJson = async (response: Response): Promise<unknown> =>
   }
 };
 
+const writeCaocaoDiagnosticLog = (payload: Record<string, unknown>): void => {
+  process.stdout.write(
+    `${JSON.stringify({
+      marker: "RideHailingProviderEstimate",
+      ...payload,
+    })}\n`,
+  );
+};
+
 export function createCaocaoSignature(input: {
   params: CaocaoSignedParams;
   signKey: string;
@@ -728,7 +737,8 @@ export class CaocaoProviderAdapter implements RideHailingProviderPort {
           });
     const responseBody = await parseCaocaoResponseJson(response);
     if (endpointPath === "/common/estimatePriceWithDetail") {
-      console.info("[RideHailingProviderEstimate] Caocao response", {
+      writeCaocaoDiagnosticLog({
+        event: "caocao_estimate_response",
         endpointPath,
         httpStatus: response.status,
         ok: response.ok,
diff --git a/apps/backend/src/domains/trade/use-cases/offer-listing.ts b/apps/backend/src/domains/trade/use-cases/offer-listing.ts
index 6a55f2810..853f9c427 100644
--- a/apps/backend/src/domains/trade/use-cases/offer-listing.ts
+++ b/apps/backend/src/domains/trade/use-cases/offer-listing.ts
@@ -48,6 +48,44 @@ const pricingApplication = new PricingApplication();
 
 const RIDE_QUOTE_TTL_MS = 2 * 60 * 1000;
 
+const writeRideHailingListingDiagnostic = (payload: Record<string, unknown>): void => {
+  process.stdout.write(
+    `${JSON.stringify({
+      marker: "RideHailingListingDiagnostic",
+      ...payload,
+    })}\n`,
+  );
+};
+
+const summarizeRideHailingRoute = (route: RideHailingRouteSnapshot) => ({
+  destination: {
+    latitude: route.destination.latitude,
+    longitude: route.destination.longitude,
+    name: route.destination.name,
+  },
+  origin: {
+    latitude: route.origin.latitude,
+    longitude: route.origin.longitude,
+    name: route.origin.name,
+  },
+  waypointCount: route.waypoints.length,
+});
+
+const serializeDiagnosticError = (error: unknown): Record<string, unknown> => {
+  if (error instanceof Error) {
+    return {
+      message: error.message,
+      name: error.name,
+      stack: error.stack?.split("\n").slice(0, 6).join("\n") ?? null,
+    };
+  }
+  return {
+    message: String(error),
+    name: typeof error,
+    stack: null,
+  };
+};
+
 export type OfferListingParticipantInput = {
   userId: string;
   displayName?: string | null;
@@ -360,6 +398,7 @@ async function listRentalItems(input: {
 async function quoteRideSku(input: {
   offer: Offer;
   context: RideSkuContext;
+  listingSessionId: OfferListingSessionId;
   route: RideHailingRouteSnapshot;
   departureAt: string | null;
 }): Promise<{
@@ -370,9 +409,34 @@ async function quoteRideSku(input: {
   const provider = await providerRepo.findById(
     input.context.sku.facts.rideHailingProviderInstanceId as RideHailingProviderInstanceId,
   );
-  if (!provider || provider.status !== "ACTIVE") return null;
+  if (!provider || provider.status !== "ACTIVE") {
+    writeRideHailingListingDiagnostic({
+      event: "ride_provider_unavailable",
+      listingSessionId: input.listingSessionId,
+      offerId: input.offer.id,
+      providerFound: provider !== null,
+      providerInstanceId: input.context.sku.facts.rideHailingProviderInstanceId,
+      providerStatus: provider?.status ?? null,
+      providerVehicleTypeCode: input.context.sku.facts.providerVehicleTypeCode,
+      skuId: input.context.sku.id,
+      spuId: input.context.spu.id,
+    });
+    return null;
+  }
 
   const port = createRideHailingProviderPort({ providerInstance: provider });
+  writeRideHailingListingDiagnostic({
+    event: "ride_provider_estimate_start",
+    listingSessionId: input.listingSessionId,
+    offerId: input.offer.id,
+    providerInstanceId: provider.id,
+    providerStatus: provider.status,
+    providerType: provider.providerType,
+    providerVehicleTypeCode: input.context.sku.facts.providerVehicleTypeCode,
+    route: summarizeRideHailingRoute(input.route),
+    skuId: input.context.sku.id,
+    spuId: input.context.spu.id,
+  });
   const providerQuote = await port.estimate({
     params: {
       car_type: input.context.sku.facts.providerVehicleTypeCode,
@@ -431,6 +495,19 @@ async function listRideItems(input: {
           ]
         : [],
   );
+  writeRideHailingListingDiagnostic({
+    event: "ride_listing_contexts_resolved",
+    contextCount: contexts.length,
+    listingSessionId: input.listingSessionId,
+    offerId: input.offer.id,
+    route: summarizeRideHailingRoute(input.listingContext.route),
+    skus: contexts.map((context) => ({
+      providerInstanceId: context.sku.facts.rideHailingProviderInstanceId,
+      providerVehicleTypeCode: context.sku.facts.providerVehicleTypeCode,
+      skuId: context.sku.id,
+      spuId: context.spu.id,
+    })),
+  });
   const rows = (
     await Promise.all(
       contexts.map(async (context) => {
@@ -439,10 +516,21 @@ async function listRideItems(input: {
           quoted = await quoteRideSku({
             offer: input.offer,
             context,
+            listingSessionId: input.listingSessionId,
             route: input.listingContext.route,
             departureAt: input.listingContext.departureAt,
           });
-        } catch {
+        } catch (error) {
+          writeRideHailingListingDiagnostic({
+            event: "ride_listing_candidate_failed",
+            error: serializeDiagnosticError(error),
+            listingSessionId: input.listingSessionId,
+            offerId: input.offer.id,
+            providerInstanceId: context.sku.facts.rideHailingProviderInstanceId,
+            providerVehicleTypeCode: context.sku.facts.providerVehicleTypeCode,
+            skuId: context.sku.id,
+            spuId: context.spu.id,
+          });
           quoted = null;
         }
         if (!quoted) return null;

From 9a4fdcad872e0ced6f337bd5bbf5dd3dbb764947 Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Mon, 29 Jun 2026 21:04:01 +0800
Subject: [PATCH 68/94] fix(backend): align caocao estimate params

- normalize ride-hailing estimate requests to Caocao official 2.6 params

- query city code before estimate when listing context does not provide it

- cover official estimate params and legacy listing route param normalization
---
 .../services/caocao-provider.test.ts          | 107 ++++++++++-
 .../ride-hailing/services/caocao-provider.ts  | 180 ++++++++++++++++--
 2 files changed, 270 insertions(+), 17 deletions(-)

diff --git a/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts b/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
index c01edca26..fb3040857 100644
--- a/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
+++ b/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
@@ -97,7 +97,7 @@ describe("Caocao signer", () => {
     expect(signed).not.toHaveProperty("sign_key");
   });
 
-  it("serializes signed GET requests without leaking sign_key", async () => {
+  it("serializes official estimate params without leaking sign_key", async () => {
     let requestUrl: string | null = null;
     const fetchImpl: typeof fetch = async (input) => {
       requestUrl =
@@ -106,7 +106,16 @@ describe("Caocao signer", () => {
         JSON.stringify({
           code: 200,
           success: true,
-          data: { quoted: true },
+          data: [
+            {
+              carType: 3,
+              distance: 15100,
+              duration: 1800,
+              name: "曹操快车",
+              price: 4200,
+              priceKey: "price-key-3",
+            },
+          ],
         }),
         { status: 200 },
       );
@@ -116,16 +125,106 @@ describe("Caocao signer", () => {
       fetchImpl,
     });
 
-    await adapter.estimate({ params: { city_code: "0571" } });
+    const quote = await adapter.estimate({
+      params: {
+        car_type: "3",
+        city_code: "020",
+        from_latitude: 23.12908,
+        from_longitude: 113.26436,
+        to_latitude: 23.063968,
+        to_longitude: 113.397681,
+      },
+    });
 
     expect(requestUrl).not.toBeNull();
     const url = new URL(requestUrl ?? "");
     expect(url.pathname).toBe("/v2/common/estimatePriceWithDetail");
     expect(url.searchParams.get("client_id")).toBe("caocao-client");
-    expect(url.searchParams.get("city_code")).toBe("0571");
+    expect(url.searchParams.get("city_code")).toBe("020");
+    expect(url.searchParams.get("from_latitude")).toBe("23.12908");
+    expect(url.searchParams.get("from_longitude")).toBe("113.26436");
+    expect(url.searchParams.get("to_latitude")).toBe("23.063968");
+    expect(url.searchParams.get("to_longitude")).toBe("113.397681");
+    expect(url.searchParams.has("flat")).toBe(false);
+    expect(url.searchParams.has("flng")).toBe(false);
+    expect(url.searchParams.has("tlat")).toBe(false);
+    expect(url.searchParams.has("tlng")).toBe(false);
     expect(url.searchParams.has("timestamp")).toBe(true);
     expect(url.searchParams.has("sign")).toBe(true);
     expect(url.searchParams.has("sign_key")).toBe(false);
+    expect(quote).toMatchObject({
+      distanceMeters: 15100,
+      durationSeconds: 1800,
+      estimateAmountFen: 4200,
+      providerQuoteId: "price-key-3",
+      providerVehicleTypeCode: "3",
+      providerVehicleTypeName: "曹操快车",
+    });
+  });
+
+  it("queries city code and normalizes legacy route params before estimating", async () => {
+    const requestUrls: string[] = [];
+    const fetchImpl: typeof fetch = async (input) => {
+      const requestUrl =
+        typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
+      requestUrls.push(requestUrl);
+      const url = new URL(requestUrl);
+      if (url.pathname.endsWith("/common/queryCity")) {
+        return new Response(
+          JSON.stringify({
+            code: 200,
+            data: { city_code: "020" },
+            success: true,
+          }),
+          { status: 200 },
+        );
+      }
+      return new Response(
+        JSON.stringify({
+          code: 200,
+          data: {
+            carType: "3",
+            name: "曹操快车",
+            price: 4200,
+            priceKey: "price-key-3",
+          },
+          success: true,
+        }),
+        { status: 200 },
+      );
+    };
+    const adapter = new CaocaoProviderAdapter({
+      providerInstance: caocaoProviderInstance(),
+      fetchImpl,
+    });
+
+    await adapter.estimate({
+      params: {
+        car_type: "3",
+        departure_at: "2026-06-29T03:00:00.000Z",
+        flat: 23.12908,
+        flng: 113.26436,
+        tlat: 23.063968,
+        tlng: 113.397681,
+      },
+    });
+
+    expect(requestUrls).toHaveLength(2);
+    const queryCityUrl = new URL(requestUrls[0]);
+    expect(queryCityUrl.pathname).toBe("/v2/common/queryCity");
+    expect(queryCityUrl.searchParams.get("latitude")).toBe("23.12908");
+    expect(queryCityUrl.searchParams.get("longitude")).toBe("113.26436");
+    const estimateUrl = new URL(requestUrls[1]);
+    expect(estimateUrl.pathname).toBe("/v2/common/estimatePriceWithDetail");
+    expect(estimateUrl.searchParams.get("city_code")).toBe("020");
+    expect(estimateUrl.searchParams.get("from_latitude")).toBe("23.12908");
+    expect(estimateUrl.searchParams.get("from_longitude")).toBe("113.26436");
+    expect(estimateUrl.searchParams.get("to_latitude")).toBe("23.063968");
+    expect(estimateUrl.searchParams.get("to_longitude")).toBe("113.397681");
+    expect(estimateUrl.searchParams.get("departure_time")).toBe("2026-06-29 11:00:00");
+    expect(estimateUrl.searchParams.get("order_type")).toBe("1");
+    expect(estimateUrl.searchParams.get("carpool_type")).toBe("0");
+    expect(estimateUrl.searchParams.get("count_person")).toBe("2");
   });
 });
 
diff --git a/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts b/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
index 2ff6fe794..93213b7d1 100644
--- a/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
+++ b/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
@@ -22,6 +22,15 @@ import type {
 
 type CaocaoParamValue = string | number | boolean | null | undefined;
 type CaocaoParamInput = Record<string, CaocaoParamValue>;
+type RequiredCaocaoEstimateParams = {
+  car_type: string;
+  city_code: string;
+  from_latitude: number;
+  from_longitude: number;
+  order_type: number;
+  to_latitude: number;
+  to_longitude: number;
+};
 
 const EXTERNAL_ORDER_ID_PREFIX = "rh";
 const UUID_BASE36_ALPHABET = /^[0-9a-z]+$/;
@@ -109,6 +118,69 @@ const readOptionalNumberFromRecord = (
   keys: string[],
 ): number | null => readOptionalNumberField(value, keys);
 
+const readOptionalParamString = (params: CaocaoParamInput, keys: string[]): string | null => {
+  for (const key of keys) {
+    const candidate = params[key];
+    if (typeof candidate === "string" && candidate.trim().length > 0) return candidate.trim();
+    if (typeof candidate === "number" && Number.isFinite(candidate)) return String(candidate);
+  }
+  return null;
+};
+
+const readOptionalParamNumber = (params: CaocaoParamInput, keys: string[]): number | null => {
+  for (const key of keys) {
+    const candidate = params[key];
+    if (typeof candidate === "number" && Number.isFinite(candidate)) return candidate;
+    if (typeof candidate === "string" && candidate.trim().length > 0) {
+      const parsed = Number(candidate);
+      if (Number.isFinite(parsed)) return parsed;
+    }
+  }
+  return null;
+};
+
+const readRequiredParamString = (params: CaocaoParamInput, keys: string[]): string => {
+  const value = readOptionalParamString(params, keys);
+  if (value) return value;
+  throw new Error(`Expected Caocao request param ${keys.join("/")}`);
+};
+
+const readRequiredParamNumber = (params: CaocaoParamInput, keys: string[]): number => {
+  const value = readOptionalParamNumber(params, keys);
+  if (value !== null) return value;
+  throw new Error(`Expected numeric Caocao request param ${keys.join("/")}`);
+};
+
+const formatCaocaoDateTime = (value: CaocaoParamValue): string | null => {
+  if (typeof value === "string" && /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/.test(value)) {
+    return value;
+  }
+  if (value === null || value === undefined || value === false) return null;
+  const date =
+    typeof value === "number"
+      ? new Date(value)
+      : typeof value === "string" && value.trim().length > 0
+        ? new Date(value)
+        : null;
+  if (!date || Number.isNaN(date.getTime())) return null;
+  const parts = new Intl.DateTimeFormat("en-CA", {
+    day: "2-digit",
+    hour: "2-digit",
+    hourCycle: "h23",
+    minute: "2-digit",
+    month: "2-digit",
+    second: "2-digit",
+    timeZone: "Asia/Shanghai",
+    year: "numeric",
+  })
+    .formatToParts(date)
+    .reduce<Record<string, string>>((acc, part) => {
+      acc[part.type] = part.value;
+      return acc;
+    }, {});
+  return `${parts.year}-${parts.month}-${parts.day} ${parts.hour}:${parts.minute}:${parts.second}`;
+};
+
 const buildCaocaoStatusLabel = (phase: string): string => {
   if (phase === "FINISHED" || ["5", "6", "7", "8"].includes(phase)) return "待支付";
   if (phase === "IN_TRIP" || phase === "3") return "行程中";
@@ -283,6 +355,21 @@ const parseCaocaoDriverRoute = (
   };
 };
 
+const selectCaocaoEstimateItem = (
+  data: unknown,
+  providerVehicleTypeCode: string,
+): Record<string, unknown> => {
+  if (Array.isArray(data)) {
+    const matching = data.find(
+      (item) => readOptionalStringField(item, ["carType", "car_type"]) === providerVehicleTypeCode,
+    );
+    const selected = matching ?? data[0];
+    if (isRecord(selected)) return selected;
+  }
+  if (isRecord(data)) return data;
+  throw new Error("Caocao estimate response data must be an object or object array");
+};
+
 const normalizeCaocaoParams = (params: CaocaoParamInput): CaocaoSignedParams => {
   const normalized: CaocaoSignedParams = {};
   for (const [key, value] of Object.entries(params)) {
@@ -545,32 +632,43 @@ export class CaocaoProviderAdapter implements RideHailingProviderPort {
   async estimate(
     input: RideHailingProviderEstimateInput,
   ): Promise<RideHailingProviderVehicleQuote> {
-    const data = await this.request<Record<string, unknown>>(
+    const requestParams = await this.buildEstimateRequestParams(input.params);
+    const data = await this.request<unknown>(
       "GET",
       "/common/estimatePriceWithDetail",
-      input.params,
+      requestParams,
     );
+    const estimateData = selectCaocaoEstimateItem(data, requestParams.car_type);
     const providerVehicleTypeCode =
-      readOptionalStringField(data, ["carType", "car_type", "vehicle_type"]) ??
-      (typeof input.params.car_type === "string" ? input.params.car_type : null) ??
-      (typeof input.params.carType === "string" ? input.params.carType : null) ??
-      "UNKNOWN";
+      readOptionalStringField(estimateData, ["carType", "car_type", "vehicle_type"]) ??
+      requestParams.car_type;
     return {
       providerVehicleTypeCode,
       providerVehicleTypeName:
-        readOptionalStringField(data, ["carTypeName", "car_type_name"]) ?? providerVehicleTypeCode,
+        readOptionalStringField(estimateData, ["carTypeName", "car_type_name", "name"]) ??
+        providerVehicleTypeCode,
       estimateAmountFen:
-        readOptionalNumberField(data, [
+        readOptionalNumberField(estimateData, [
           "estimateAmountFen",
           "estimatePriceFen",
           "estimate_price",
           "price",
+          "originPrice",
         ]) ?? 0,
-      distanceMeters: readOptionalNumberField(data, ["distanceMeters", "distance"]),
-      durationSeconds: readOptionalNumberField(data, ["durationSeconds", "duration"]),
-      providerQuoteId: readOptionalStringField(data, ["price_token", "quoteId", "quote_id"]),
-      providerQuoteExpiresAt: readOptionalStringField(data, ["quoteExpiresAt", "quote_expires_at"]),
-      providerSnapshot: data,
+      distanceMeters: readOptionalNumberField(estimateData, ["distanceMeters", "distance"]),
+      durationSeconds: readOptionalNumberField(estimateData, ["durationSeconds", "duration"]),
+      providerQuoteId: readOptionalStringField(estimateData, [
+        "priceKey",
+        "price_key",
+        "price_token",
+        "quoteId",
+        "quote_id",
+      ]),
+      providerQuoteExpiresAt: readOptionalStringField(estimateData, [
+        "quoteExpiresAt",
+        "quote_expires_at",
+      ]),
+      providerSnapshot: estimateData,
     };
   }
 
@@ -713,6 +811,62 @@ export class CaocaoProviderAdapter implements RideHailingProviderPort {
     });
   }
 
+  private async buildEstimateRequestParams(
+    params: CaocaoParamInput,
+  ): Promise<RequiredCaocaoEstimateParams & CaocaoParamInput> {
+    const fromLatitude = readRequiredParamNumber(params, ["from_latitude", "fromLatitude", "flat"]);
+    const fromLongitude = readRequiredParamNumber(params, [
+      "from_longitude",
+      "fromLongitude",
+      "flng",
+    ]);
+    const cityCode =
+      readOptionalParamString(params, ["city_code", "cityCode"]) ??
+      (await this.queryCityCode({
+        latitude: fromLatitude,
+        longitude: fromLongitude,
+      }));
+    const requestParams: RequiredCaocaoEstimateParams & CaocaoParamInput = {
+      car_type: readRequiredParamString(params, ["car_type", "carType", "vehicle_type"]),
+      city_code: cityCode,
+      from_latitude: fromLatitude,
+      from_longitude: fromLongitude,
+      order_type: readOptionalParamNumber(params, ["order_type", "orderType"]) ?? 1,
+      to_latitude: readRequiredParamNumber(params, ["to_latitude", "toLatitude", "tlat"]),
+      to_longitude: readRequiredParamNumber(params, ["to_longitude", "toLongitude", "tlng"]),
+    };
+    const departureTime =
+      readOptionalParamString(params, ["departure_time", "departureTime"]) ??
+      formatCaocaoDateTime(params.departure_at ?? params.departureAt);
+    if (departureTime) requestParams.departure_time = departureTime;
+    requestParams.carpool_type =
+      readOptionalParamNumber(params, ["carpool_type", "carpoolType"]) ?? 0;
+    requestParams.count_person =
+      readOptionalParamNumber(params, ["count_person", "countPerson"]) ?? 2;
+    for (const key of [
+      "order_tags",
+      "passenger_phone",
+      "route_strategy",
+      "waypointList",
+    ] as const) {
+      const value = params[key];
+      if (value !== null && value !== undefined) requestParams[key] = value;
+    }
+    return requestParams;
+  }
+
+  private async queryCityCode(input: { latitude: number; longitude: number }): Promise<string> {
+    const data = await this.request<Record<string, unknown>>("GET", "/common/queryCity", {
+      latitude: input.latitude,
+      longitude: input.longitude,
+    });
+    const cityCode = readOptionalStringField(data, ["city_code", "cityCode"]);
+    if (!cityCode) {
+      throw new Error("Caocao queryCity response is missing city_code");
+    }
+    return cityCode;
+  }
+
   private async request<TData = unknown>(
     method: "GET" | "POST",
     endpointPath: string,

From 3d06de2b7f419a9ad81e468a97b441676e77d02b Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Mon, 29 Jun 2026 21:07:56 +0800
Subject: [PATCH 69/94] fix(pr): facts card time field use start value align

---
 apps/frontend/src/domains/pr/ui/composites/PRFactsCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/src/domains/pr/ui/composites/PRFactsCard.vue b/apps/frontend/src/domains/pr/ui/composites/PRFactsCard.vue
index 65e1af0c8..132862b14 100644
--- a/apps/frontend/src/domains/pr/ui/composites/PRFactsCard.vue
+++ b/apps/frontend/src/domains/pr/ui/composites/PRFactsCard.vue
@@ -172,7 +172,7 @@
           </p>
         </section>
 
-        <PuDescriptionItem :label="t('prCard.time')" value-align="end">
+        <PuDescriptionItem :label="t('prCard.time')" value-align="start">
           <span class="facts-inline-value">
             <span data-testid="pr-detail.facts.time-value">
               {{ localizedTimeText }}

From 7cadc08f31782b6b9a25a4edf8544a1ed1547300 Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Mon, 29 Jun 2026 21:23:31 +0800
Subject: [PATCH 70/94] fix(backend): surface caocao errno responses

- log queryCity responses alongside estimate diagnostics

- normalize Caocao errno/errmsg error bodies into provider failures

- cover city-code lookup signature errors in provider tests
---
 .../services/caocao-provider.test.ts          | 27 +++++++++++++++++++
 .../ride-hailing/services/caocao-provider.ts  | 19 ++++++++++---
 2 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts b/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
index fb3040857..d508342a1 100644
--- a/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
+++ b/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
@@ -226,6 +226,33 @@ describe("Caocao signer", () => {
     expect(estimateUrl.searchParams.get("carpool_type")).toBe("0");
     expect(estimateUrl.searchParams.get("count_person")).toBe("2");
   });
+
+  it("surfaces Caocao errno error bodies from city code lookup", async () => {
+    const fetchImpl: typeof fetch = async () =>
+      new Response(
+        JSON.stringify({
+          errno: 10002,
+          errmsg: "参数签名错误",
+        }),
+        { status: 200 },
+      );
+    const adapter = new CaocaoProviderAdapter({
+      providerInstance: caocaoProviderInstance(),
+      fetchImpl,
+    });
+
+    await expect(
+      adapter.estimate({
+        params: {
+          car_type: "3",
+          flat: 23.12908,
+          flng: 113.26436,
+          tlat: 23.063968,
+          tlng: 113.397681,
+        },
+      }),
+    ).rejects.toThrow("Caocao API failed: 10002 参数签名错误");
+  });
 });
 
 describe("Caocao external order id", () => {
diff --git a/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts b/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
index 93213b7d1..7654122f3 100644
--- a/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
+++ b/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
@@ -539,9 +539,13 @@ const parseCaocaoResponseBody = <TData>(body: unknown): CaocaoRawResponse<TData>
   if (!isRecord(body)) {
     throw new Error("Caocao response must be a JSON object");
   }
-  const code = readRequiredNumberField(body, "code");
+  const code = readOptionalNumberField(body, ["code"]) ?? readOptionalNumberField(body, ["errno"]);
+  if (code === null) {
+    throw new Error("Caocao response is missing code/errno");
+  }
   const success = typeof body.success === "boolean" ? body.success : null;
-  const msg = typeof body.msg === "string" ? body.msg : null;
+  const msg =
+    typeof body.msg === "string" ? body.msg : typeof body.errmsg === "string" ? body.errmsg : null;
 
   return {
     code,
@@ -890,11 +894,18 @@ export class CaocaoProviderAdapter implements RideHailingProviderPort {
             body: serializeCaocaoFormBody(signedParams),
           });
     const responseBody = await parseCaocaoResponseJson(response);
-    if (endpointPath === "/common/estimatePriceWithDetail") {
+    if (
+      endpointPath === "/common/queryCity" ||
+      endpointPath === "/common/estimatePriceWithDetail"
+    ) {
       writeCaocaoDiagnosticLog({
-        event: "caocao_estimate_response",
+        event:
+          endpointPath === "/common/estimatePriceWithDetail"
+            ? "caocao_estimate_response"
+            : "caocao_response",
         endpointPath,
         httpStatus: response.status,
+        method,
         ok: response.ok,
         params: normalizeCaocaoParams(params),
         providerInstanceId: this.input.providerInstance.id,

From 2f0c989de89c51fe073b858cb088b105485e4468 Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Mon, 29 Jun 2026 22:00:44 +0800
Subject: [PATCH 71/94] fix(commerce): require ride listing phone confirmation

- keep RideHailing contact phone input as a draft until confirmed
- require complete mainland mobile phone before loading listing
- cover uncommitted phone state in listing state tests
---
 .../ordering/RideHailingOrderingContent.vue   | 47 ++++++++++++++++++-
 .../ride-hailing-listing-state.test.ts        | 28 +++++++++++
 .../ui/ordering/ride-hailing-listing-state.ts |  3 ++
 .../00-task-packet.md                         |  9 ++--
 4 files changed, 81 insertions(+), 6 deletions(-)

diff --git a/apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue b/apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue
index 3aa72f36c..5a8224359 100644
--- a/apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue
+++ b/apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue
@@ -50,18 +50,33 @@
             v-if="listingBlocker.reason === 'missing-contact-phone'"
             label="联系人电话"
             for-id="ride-hailing-contact-phone"
+            :hint="rideContactPhoneHint"
+            :error="rideContactPhoneDraftError ?? undefined"
             required
           >
             <PuInput
               id="ride-hailing-contact-phone"
-              v-model="rideContactPhone"
+              v-model="rideContactPhoneDraft"
               native-type="tel"
-              inputmode="tel"
+              inputmode="numeric"
               autocomplete="tel"
+              :maxlength="11"
               clearable
               placeholder="请输入联系人手机号"
               data-testid="ordering.ride-hailing.contact-phone"
             />
+            <template #labelTrailing>
+              <PuButton
+                size="sm"
+                tone="primary"
+                variant="soft"
+                :disabled="!canCommitRideContactPhone"
+                data-testid="ordering.ride-hailing.contact-phone.confirm"
+                @click="commitRideContactPhone"
+              >
+                确认并加载
+              </PuButton>
+            </template>
           </PuFormItem>
         </div>
         <div
@@ -265,6 +280,7 @@ import RouteMap from "@/domains/route/ui/RouteMap.vue";
 import type { MapFitPadding } from "@/shared/map/types";
 import RideHailingSkuCard from "./RideHailingSkuCard.vue";
 import {
+  isRideHailingContactPhoneComplete,
   type RideHailingListingBlocker,
   resolveRideHailingListingBlocker,
   resolveRideHailingListingSurfaceState,
@@ -298,6 +314,7 @@ const contentRoot = ref<HTMLElement | null>(null);
 const contentHeight = ref(DEFAULT_CONTENT_HEIGHT);
 const ridePanelStop = ref<RidePanelStopValue>("normal");
 const rideContactPhone = ref("");
+const rideContactPhoneDraft = ref("");
 const editableRoute = ref<Route | null>(null);
 const routePointDrawerOpen = ref(false);
 const selectedRoutePointIndex = ref<number | null>(null);
@@ -545,6 +562,29 @@ const listingBlocker = computed<RideHailingListingBlocker | null>(() => {
   });
 });
 
+const normalizedRideContactPhoneDraft = computed(() => rideContactPhoneDraft.value.trim());
+
+const rideContactPhoneDraftError = computed(() => {
+  const phone = normalizedRideContactPhoneDraft.value;
+  if (!phone) return null;
+  return isRideHailingContactPhoneComplete(phone) ? null : "请输入 11 位大陆手机号";
+});
+
+const rideContactPhoneHint = computed(
+  () => rideContactPhoneDraftError.value ?? "输入 11 位大陆手机号后点击确认加载车型。",
+);
+
+const canCommitRideContactPhone = computed(
+  () =>
+    isRideHailingContactPhoneComplete(normalizedRideContactPhoneDraft.value) &&
+    normalizedRideContactPhoneDraft.value !== rideContactPhone.value.trim(),
+);
+
+const commitRideContactPhone = (): void => {
+  if (!canCommitRideContactPhone.value) return;
+  rideContactPhone.value = normalizedRideContactPhoneDraft.value;
+};
+
 const offerListingInput = computed<OfferListingInput | null>(() => {
   const route = rideRouteForSubmit.value;
   if (listingBlocker.value || !rideOffer.value || !route) return null;
@@ -765,6 +805,9 @@ watch(
     if (rideContactPhone.value.trim().length === 0) {
       rideContactPhone.value = next;
     }
+    if (rideContactPhoneDraft.value.trim().length === 0) {
+      rideContactPhoneDraft.value = next;
+    }
   },
   { immediate: true },
 );
diff --git a/apps/frontend/src/domains/commerce/ui/ordering/ride-hailing-listing-state.test.ts b/apps/frontend/src/domains/commerce/ui/ordering/ride-hailing-listing-state.test.ts
index 0f77043a8..80537ab59 100644
--- a/apps/frontend/src/domains/commerce/ui/ordering/ride-hailing-listing-state.test.ts
+++ b/apps/frontend/src/domains/commerce/ui/ordering/ride-hailing-listing-state.test.ts
@@ -1,10 +1,16 @@
 import { describe, expect, it } from "vitest";
 import {
+  isRideHailingContactPhoneComplete,
   resolveRideHailingListingBlocker,
   resolveRideHailingListingSurfaceState,
 } from "./ride-hailing-listing-state";
 
 describe("RideHailing listing state", () => {
+  it("requires a complete mainland China mobile phone before commit", () => {
+    expect(isRideHailingContactPhoneComplete("1380013800")).toBe(false);
+    expect(isRideHailingContactPhoneComplete("13800138000")).toBe(true);
+  });
+
   it("treats missing contact phone as waiting for input", () => {
     const blocker = resolveRideHailingListingBlocker({
       hasRideOffer: true,
@@ -26,6 +32,28 @@ describe("RideHailing listing state", () => {
     ).toBe("waiting-for-input");
   });
 
+  it("keeps listing waiting while a typed phone has not been committed", () => {
+    const committedPhone = "";
+    const blocker = resolveRideHailingListingBlocker({
+      hasRideOffer: true,
+      hasRoute: true,
+      contactPhone: committedPhone,
+      riderCount: 2,
+    });
+
+    expect(isRideHailingContactPhoneComplete("13800138000")).toBe(true);
+    expect(
+      resolveRideHailingListingSurfaceState({
+        blocker,
+        hasListingInput: false,
+        isPending: true,
+        isError: false,
+        isSuccess: false,
+        visibleOptionCount: 0,
+      }),
+    ).toBe("waiting-for-input");
+  });
+
   it("shows loading only when listing input exists and the request is pending", () => {
     expect(
       resolveRideHailingListingSurfaceState({
diff --git a/apps/frontend/src/domains/commerce/ui/ordering/ride-hailing-listing-state.ts b/apps/frontend/src/domains/commerce/ui/ordering/ride-hailing-listing-state.ts
index 64a6e1365..b13b279fe 100644
--- a/apps/frontend/src/domains/commerce/ui/ordering/ride-hailing-listing-state.ts
+++ b/apps/frontend/src/domains/commerce/ui/ordering/ride-hailing-listing-state.ts
@@ -34,6 +34,9 @@ export type RideHailingListingSurfaceStateInput = {
   visibleOptionCount: number;
 };
 
+export const isRideHailingContactPhoneComplete = (value: string): boolean =>
+  /^1\d{10}$/.test(value.trim());
+
 export const resolveRideHailingListingBlocker = (
   input: RideHailingListingBlockerInput,
 ): RideHailingListingBlocker | null => {
diff --git a/tasks/ride-hailing-listing-state/00-task-packet.md b/tasks/ride-hailing-listing-state/00-task-packet.md
index 3a2d4e602..e9b702b81 100644
--- a/tasks/ride-hailing-listing-state/00-task-packet.md
+++ b/tasks/ride-hailing-listing-state/00-task-packet.md
@@ -89,8 +89,8 @@ For `missing-contact-phone`:
 - Show an in-place `PuInlineNotice` in the RideHailing vehicle panel.
 - Provide a telephone input in-place so the user can complete the missing
   contact phone without leaving the page.
-- Once filled, listing should request automatically through the existing query
-  path.
+- The typed phone is only a draft. Listing may start only after the user
+  explicitly confirms the complete phone value.
 
 For `missing-route`:
 
@@ -136,8 +136,9 @@ Planned verification after implementation starts:
   - `ready`
 - `RideHailingOrderingContent` now shows skeletons only when listing input exists
   and the listing query is pending.
-- Missing contact phone is recoverable in-place through a telephone input in the
-  RideHailing vehicle panel.
+- Missing contact phone is recoverable in-place through a telephone input plus
+  explicit confirm action in the RideHailing vehicle panel. The live draft does
+  not participate in listing input.
 - Missing route / missing riders / missing offer surface blocking notices with
   action paths into the parent `PuDialog` recovery flow.
 - Successful listing with zero visible vehicle candidates is treated as an error

From 7468546f468e236ff9c89c0bd73f7da5239ab6a0 Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Tue, 30 Jun 2026 00:13:35 +0800
Subject: [PATCH 72/94] fix(ride-hailing): align fake caocao with official
 openapi

- rebuild fake caocao around OpenAPI contracts and runtime validation
- switch backend adapter, fixtures, and dev baseline to official fields and numeric enums
- prove backend and system scenarios run through the fake caocao server
---
 .../0077_dev_ride_hailing_caocao_fixture.sql  |   10 +-
 .../services/catalog-contract.test.ts         |    2 +-
 .../services/caocao-provider.test.ts          |   23 +-
 .../ride-hailing/services/caocao-provider.ts  |   94 +-
 .../services/order-pricing-execution.test.ts  |    2 +-
 ...el-ride-hailing-order-from-order-detail.ts |    4 +-
 .../domains/trade/use-cases/create-order.ts   |   25 +-
 .../domains/trade/use-cases/offer-listing.ts  |    8 +-
 .../offer-quote-resolution.scenario.test.ts   |   12 +-
 .../caocao-callback-route.scenario.test.ts    |    8 +-
 .../control/fake-caocao-control.openapi.yaml  |  513 +++++
 .../caocao-provider-minimal.openapi.yaml      | 1207 ++++++++++++
 packages/fake-caocao-server/package.json      |    8 +
 packages/fake-caocao-server/src/openapi.ts    |  422 +++++
 packages/fake-caocao-server/src/routes.ts     | 1662 ++++++++++-------
 .../fake-caocao-server/src/server.test.ts     |  132 +-
 packages/fake-caocao-server/src/server.ts     |   59 +-
 packages/fake-caocao-server/src/state.test.ts |   22 +-
 packages/fake-caocao-server/src/state.ts      |  174 +-
 pnpm-lock.yaml                                |   62 +
 .../00-task-packet.md                         |  177 ++
 tests/scenario/_infra/vitest/global-setup.ts  |    4 +-
 .../ride-hailing-ordering.scenario.test.ts    |   18 +-
 23 files changed, 3818 insertions(+), 830 deletions(-)
 create mode 100644 packages/fake-caocao-server/openapi/control/fake-caocao-control.openapi.yaml
 create mode 100644 packages/fake-caocao-server/openapi/provider/caocao-provider-minimal.openapi.yaml
 create mode 100644 packages/fake-caocao-server/src/openapi.ts
 create mode 100644 tasks/caocao-openapi-alignment-review/00-task-packet.md

diff --git a/apps/backend/data-migrations/0077_dev_ride_hailing_caocao_fixture.sql b/apps/backend/data-migrations/0077_dev_ride_hailing_caocao_fixture.sql
index 457f4989f..e0b2cbc48 100644
--- a/apps/backend/data-migrations/0077_dev_ride_hailing_caocao_fixture.sql
+++ b/apps/backend/data-migrations/0077_dev_ride_hailing_caocao_fixture.sql
@@ -146,7 +146,7 @@ begin
       10,
       jsonb_build_object(
         'rideHailingProviderInstanceId', v_provider_instance_id::text,
-        'providerVehicleTypeCode', 'EXPRESS'
+        'providerVehicleTypeCode', '3'
       ),
       '{"type":"DYNAMIC_QUOTE","calculatorSpec":{"version":1,"currency":"CNY","components":[{"id":"caocao-provider-estimate","label":"预估价","amount":{"type":"INPUT","path":"provider.estimateAmountFen"}}]}}'::jsonb,
       now(),
@@ -160,7 +160,7 @@ begin
            sort_order = 10,
            facts = jsonb_build_object(
              'rideHailingProviderInstanceId', v_provider_instance_id::text,
-             'providerVehicleTypeCode', 'EXPRESS'
+             'providerVehicleTypeCode', '3'
            ),
            pricing_model = '{"type":"DYNAMIC_QUOTE","calculatorSpec":{"version":1,"currency":"CNY","components":[{"id":"caocao-provider-estimate","label":"预估价","amount":{"type":"INPUT","path":"provider.estimateAmountFen"}}]}}'::jsonb,
            cancellation_policy_ref = null,
@@ -196,7 +196,7 @@ begin
       20,
       jsonb_build_object(
         'rideHailingProviderInstanceId', v_provider_instance_id::text,
-        'providerVehicleTypeCode', 'PREMIER'
+        'providerVehicleTypeCode', '5'
       ),
       '{"type":"DYNAMIC_QUOTE","calculatorSpec":{"version":1,"currency":"CNY","components":[{"id":"caocao-provider-estimate","label":"曹操预估价","amount":{"type":"INPUT","path":"provider.estimateAmountFen"}}]}}'::jsonb,
       now(),
@@ -210,7 +210,7 @@ begin
            sort_order = 20,
            facts = jsonb_build_object(
              'rideHailingProviderInstanceId', v_provider_instance_id::text,
-             'providerVehicleTypeCode', 'PREMIER'
+             'providerVehicleTypeCode', '5'
            ),
            pricing_model = '{"type":"DYNAMIC_QUOTE","calculatorSpec":{"version":1,"currency":"CNY","components":[{"id":"caocao-provider-estimate","label":"预估价","amount":{"type":"INPUT","path":"provider.estimateAmountFen"}}]}}'::jsonb,
            cancellation_policy_ref = null,
@@ -343,4 +343,4 @@ begin
      and offer_id = v_offer_id
      and placement_type = 'BUTTON'
      and matching_rule::text like '%' || old_task_private_pr_type || '%';
-end $$;
\ No newline at end of file
+end $$;
diff --git a/apps/backend/src/domains/merchandising/services/catalog-contract.test.ts b/apps/backend/src/domains/merchandising/services/catalog-contract.test.ts
index 6c6f4822e..108132882 100644
--- a/apps/backend/src/domains/merchandising/services/catalog-contract.test.ts
+++ b/apps/backend/src/domains/merchandising/services/catalog-contract.test.ts
@@ -39,7 +39,7 @@ describe("catalog contract guards", () => {
         spu: { productType: "RENTAL" },
         facts: {
           rideHailingProviderInstanceId: "caocao-main",
-          providerVehicleTypeCode: "EXPRESS",
+          providerVehicleTypeCode: "3",
         },
       }),
     ).toThrow("Rental SKU facts must match SPU productType");
diff --git a/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts b/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
index d508342a1..02019ea62 100644
--- a/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
+++ b/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
@@ -162,7 +162,7 @@ describe("Caocao signer", () => {
     });
   });
 
-  it("queries city code and normalizes legacy route params before estimating", async () => {
+  it("queries city code when estimate params omit city_code", async () => {
     const requestUrls: string[] = [];
     const fetchImpl: typeof fetch = async (input) => {
       const requestUrl =
@@ -202,10 +202,10 @@ describe("Caocao signer", () => {
       params: {
         car_type: "3",
         departure_at: "2026-06-29T03:00:00.000Z",
-        flat: 23.12908,
-        flng: 113.26436,
-        tlat: 23.063968,
-        tlng: 113.397681,
+        from_latitude: 23.12908,
+        from_longitude: 113.26436,
+        to_latitude: 23.063968,
+        to_longitude: 113.397681,
       },
     });
 
@@ -245,14 +245,15 @@ describe("Caocao signer", () => {
       adapter.estimate({
         params: {
           car_type: "3",
-          flat: 23.12908,
-          flng: 113.26436,
-          tlat: 23.063968,
-          tlng: 113.397681,
+          from_latitude: 23.12908,
+          from_longitude: 113.26436,
+          to_latitude: 23.063968,
+          to_longitude: 113.397681,
         },
       }),
     ).rejects.toThrow("Caocao API failed: 10002 参数签名错误");
   });
+
 });
 
 describe("Caocao external order id", () => {
@@ -418,7 +419,7 @@ describe("Caocao live order projection", () => {
       }
 
       if (url.pathname.endsWith("/common/queryDriverPolylineV2")) {
-        routeRequestBodies.push(init?.body?.toString() ?? "");
+      routeRequestBodies.push(init?.body?.toString() ?? "");
         return new Response(
           JSON.stringify({
             code: 200,
@@ -484,7 +485,7 @@ describe("Caocao live order projection", () => {
       { latitude: 30.2688, longitude: 120.1608 },
     ]);
     expect(routeRequestBodies).toHaveLength(1);
-    expect(new URLSearchParams(routeRequestBodies[0]).get("navigation_polyline_type")).toBe("1");
+    expect(new URLSearchParams(routeRequestBodies[0]).get("navigation_polyline_type")).toBeNull();
     expect(requestPaths).toEqual([
       "/v2/common/queryOrderDetailV2",
       "/v2/common/queryDriverLocationByOrderId",
diff --git a/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts b/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
index 7654122f3..8ea4c1088 100644
--- a/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
+++ b/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
@@ -262,10 +262,6 @@ const mapCaocaoNavigationRouteKind = (
   return "UNKNOWN";
 };
 
-const toCaocaoNavigationPolylineType = (
-  routeKind: RideHailingProviderNavigationRouteQueryKind,
-): number => (routeKind === "PICKUP" ? 1 : 3);
-
 const parseCaocaoOrderDetail = (data: Record<string, unknown>): RideHailingProviderOrderDetail => {
   const basicOrder = readOptionalRecordField(data, ["basicOrderVO", "basicOrderVo", "basic_order"]);
   const driverRaw = readOptionalRecordField(data, [
@@ -664,7 +660,6 @@ export class CaocaoProviderAdapter implements RideHailingProviderPort {
       providerQuoteId: readOptionalStringField(estimateData, [
         "priceKey",
         "price_key",
-        "price_token",
         "quoteId",
         "quote_id",
       ]),
@@ -682,10 +677,15 @@ export class CaocaoProviderAdapter implements RideHailingProviderPort {
     providerSnapshot: unknown;
   }> {
     const externalOrderId = this.buildExternalOrderId(input.orderId);
-    const data = await this.request<Record<string, unknown>>("POST", "/common/orderCarV2", {
+    const requestParams = await this.buildCreateRideRequestParams({
       ...input.params,
       ext_order_id: externalOrderId,
     });
+    const data = await this.request<Record<string, unknown>>(
+      "POST",
+      "/common/orderCarV2",
+      requestParams,
+    );
     return {
       providerOrderId: readRequiredStringField(data, "orderNo"),
       externalOrderId,
@@ -723,7 +723,6 @@ export class CaocaoProviderAdapter implements RideHailingProviderPort {
       "POST",
       "/common/queryDriverPolylineV2",
       {
-        navigation_polyline_type: toCaocaoNavigationPolylineType(input.routeKind),
         order_id: input.providerOrderId,
       },
     );
@@ -818,12 +817,8 @@ export class CaocaoProviderAdapter implements RideHailingProviderPort {
   private async buildEstimateRequestParams(
     params: CaocaoParamInput,
   ): Promise<RequiredCaocaoEstimateParams & CaocaoParamInput> {
-    const fromLatitude = readRequiredParamNumber(params, ["from_latitude", "fromLatitude", "flat"]);
-    const fromLongitude = readRequiredParamNumber(params, [
-      "from_longitude",
-      "fromLongitude",
-      "flng",
-    ]);
+    const fromLatitude = readRequiredParamNumber(params, ["from_latitude"]);
+    const fromLongitude = readRequiredParamNumber(params, ["from_longitude"]);
     const cityCode =
       readOptionalParamString(params, ["city_code", "cityCode"]) ??
       (await this.queryCityCode({
@@ -836,8 +831,8 @@ export class CaocaoProviderAdapter implements RideHailingProviderPort {
       from_latitude: fromLatitude,
       from_longitude: fromLongitude,
       order_type: readOptionalParamNumber(params, ["order_type", "orderType"]) ?? 1,
-      to_latitude: readRequiredParamNumber(params, ["to_latitude", "toLatitude", "tlat"]),
-      to_longitude: readRequiredParamNumber(params, ["to_longitude", "toLongitude", "tlng"]),
+      to_latitude: readRequiredParamNumber(params, ["to_latitude"]),
+      to_longitude: readRequiredParamNumber(params, ["to_longitude"]),
     };
     const departureTime =
       readOptionalParamString(params, ["departure_time", "departureTime"]) ??
@@ -859,6 +854,75 @@ export class CaocaoProviderAdapter implements RideHailingProviderPort {
     return requestParams;
   }
 
+  private async buildCreateRideRequestParams(params: CaocaoParamInput): Promise<CaocaoParamInput> {
+    const fromLatitude = readRequiredParamNumber(params, ["from_latitude"]);
+    const fromLongitude = readRequiredParamNumber(params, ["from_longitude"]);
+    const cityCode =
+      readOptionalParamString(params, ["city_code", "cityCode"]) ??
+      (await this.queryCityCode({
+        latitude: fromLatitude,
+        longitude: fromLongitude,
+      }));
+
+    const requestParams: CaocaoParamInput = {
+      callback_info: readOptionalParamString(params, ["callback_info"]),
+      caller_phone: readRequiredParamString(params, ["caller_phone"]),
+      car_type: readRequiredParamString(params, ["car_type"]),
+      city_code: cityCode,
+      end_address: readRequiredParamString(params, ["end_address"]),
+      end_name: readRequiredParamString(params, ["end_name"]),
+      estimate_price: readRequiredParamNumber(params, ["estimate_price"]),
+      estimate_price_key: readRequiredParamString(params, ["estimate_price_key"]),
+      ext_order_id: readRequiredParamString(params, ["ext_order_id"]),
+      from_latitude: fromLatitude,
+      from_longitude: fromLongitude,
+      is_simultaneously_call:
+        readOptionalParamString(params, ["is_simultaneously_call"]) ?? "0",
+      order_type: readOptionalParamNumber(params, ["order_type"]) ?? 1,
+      start_address: readRequiredParamString(params, ["start_address"]),
+      start_name: readRequiredParamString(params, ["start_name"]),
+      to_latitude: readRequiredParamNumber(params, ["to_latitude"]),
+      to_longitude: readRequiredParamNumber(params, ["to_longitude"]),
+    };
+
+    const departureTime =
+      readOptionalParamString(params, ["departure_time"]) ??
+      formatCaocaoDateTime(params.departure_at ?? params.departureAt);
+    if (departureTime) requestParams.departure_time = departureTime;
+
+    const passengerPhone =
+      readOptionalParamString(params, ["passenger_phone"]) ?? requestParams.caller_phone;
+    if (passengerPhone) requestParams.passenger_phone = passengerPhone;
+
+    for (const key of [
+      "accept_cp_driver",
+      "accept_relay_order",
+      "count_person",
+      "dynamic_rule_id",
+      "end_poi_id",
+      "ext_uid",
+      "extra_info",
+      "flight_no",
+      "flt_takeoff_time",
+      "line_type",
+      "order_latitude",
+      "order_longitude",
+      "order_tags",
+      "passenger_hide_phone",
+      "passenger_name",
+      "sms_policy",
+      "start_poi_id",
+      "waypointList",
+    ] as const) {
+      const value = params[key];
+      if (value !== null && value !== undefined) {
+        requestParams[key] = value;
+      }
+    }
+
+    return requestParams;
+  }
+
   private async queryCityCode(input: { latitude: number; longitude: number }): Promise<string> {
     const data = await this.request<Record<string, unknown>>("GET", "/common/queryCity", {
       latitude: input.latitude,
diff --git a/apps/backend/src/domains/trade/services/order-pricing-execution.test.ts b/apps/backend/src/domains/trade/services/order-pricing-execution.test.ts
index 63109a5d1..37b9fa5b3 100644
--- a/apps/backend/src/domains/trade/services/order-pricing-execution.test.ts
+++ b/apps/backend/src/domains/trade/services/order-pricing-execution.test.ts
@@ -93,7 +93,7 @@ const buildSku = (): ProductSku => ({
   },
   facts: {
     rideHailingProviderInstanceId: "provider-1",
-    providerVehicleTypeCode: "EXPRESS",
+    providerVehicleTypeCode: "3",
   },
   pricingModel: {
     type: "DYNAMIC_QUOTE",
diff --git a/apps/backend/src/domains/trade/use-cases/cancel-ride-hailing-order-from-order-detail.ts b/apps/backend/src/domains/trade/use-cases/cancel-ride-hailing-order-from-order-detail.ts
index b0e3ad274..cc9507f99 100644
--- a/apps/backend/src/domains/trade/use-cases/cancel-ride-hailing-order-from-order-detail.ts
+++ b/apps/backend/src/domains/trade/use-cases/cancel-ride-hailing-order-from-order-detail.ts
@@ -131,9 +131,9 @@ export async function cancelRideHailingOrderFromOrderDetail(input: {
   const port = createRideHailingProviderPort({ providerInstance });
   const providerCancellation = await port.cancelRide({
     providerOrderId: providerBinding.providerOrderId,
-    cancelCode: "USER_CANCEL",
+    cancelCode: 12,
     cancelReason: "用户取消订单",
-    whoCancel: "USER",
+    whoCancel: 1,
   });
   const decidedAt = new Date().toISOString();
 
diff --git a/apps/backend/src/domains/trade/use-cases/create-order.ts b/apps/backend/src/domains/trade/use-cases/create-order.ts
index 7eddd30c0..95c706d29 100644
--- a/apps/backend/src/domains/trade/use-cases/create-order.ts
+++ b/apps/backend/src/domains/trade/use-cases/create-order.ts
@@ -34,7 +34,6 @@ import {
 import {
   buildCaocaoCallbackInfo,
   createRideHailingProviderPort,
-  resolveCaocaoOrderStatusCallbackUrl,
 } from "../../ride-hailing";
 import { attachOrderToPr } from "../../pr-core";
 import type {
@@ -901,13 +900,21 @@ async function createRideHailingOrderBranch(input: {
           orderId: base.order.id,
           params: {
             callback_info: buildCaocaoCallbackInfo({ providerInstance: provider }),
-            callback_url: resolveCaocaoOrderStatusCallbackUrl(provider),
             car_type: input.selected.dispatchCandidate.fulfillmentQuote.providerVehicleTypeCode,
-            price_token: input.selected.dispatchCandidate.fulfillmentQuote.providerQuoteId,
-            flat: input.selected.listingContext.route.origin.latitude,
-            flng: input.selected.listingContext.route.origin.longitude,
-            tlat: input.selected.listingContext.route.destination.latitude,
-            tlng: input.selected.listingContext.route.destination.longitude,
+            caller_phone: input.selected.listingContext.contactPhone,
+            departure_at: input.selected.listingContext.departureAt,
+            end_address: input.selected.listingContext.route.destination.address,
+            end_name: input.selected.listingContext.route.destination.name,
+            estimate_price: input.selected.dispatchCandidate.fulfillmentQuote.estimateAmountFen,
+            estimate_price_key: input.selected.dispatchCandidate.fulfillmentQuote.providerQuoteId,
+            from_latitude: input.selected.listingContext.route.origin.latitude,
+            from_longitude: input.selected.listingContext.route.origin.longitude,
+            passenger_name: input.selected.listingContext.riders[0]?.displayName ?? "乘客",
+            passenger_phone: input.selected.listingContext.contactPhone,
+            start_address: input.selected.listingContext.route.origin.address,
+            start_name: input.selected.listingContext.route.origin.name,
+            to_latitude: input.selected.listingContext.route.destination.latitude,
+            to_longitude: input.selected.listingContext.route.destination.longitude,
           },
         });
       } catch (error) {
@@ -973,9 +980,9 @@ async function createRideHailingOrderBranch(input: {
       try {
         await port.cancelRide({
           providerOrderId: providerOrderIdToCompensate,
-          cancelCode: "LOCAL_CREATE_ROLLBACK",
+          cancelCode: 20,
           cancelReason: "Local create-order transaction failed after provider creation",
-          whoCancel: "SYSTEM",
+          whoCancel: 2,
         });
       } catch {
         // Best-effort compensation. The original create failure remains the
diff --git a/apps/backend/src/domains/trade/use-cases/offer-listing.ts b/apps/backend/src/domains/trade/use-cases/offer-listing.ts
index 853f9c427..e361fc2e4 100644
--- a/apps/backend/src/domains/trade/use-cases/offer-listing.ts
+++ b/apps/backend/src/domains/trade/use-cases/offer-listing.ts
@@ -440,11 +440,11 @@ async function quoteRideSku(input: {
   const providerQuote = await port.estimate({
     params: {
       car_type: input.context.sku.facts.providerVehicleTypeCode,
-      flat: input.route.origin.latitude,
-      flng: input.route.origin.longitude,
-      tlat: input.route.destination.latitude,
-      tlng: input.route.destination.longitude,
+      from_latitude: input.route.origin.latitude,
+      from_longitude: input.route.origin.longitude,
       departure_at: input.departureAt,
+      to_latitude: input.route.destination.latitude,
+      to_longitude: input.route.destination.longitude,
     },
   });
   const pricingSnapshot = pricingApplication.resolve({
diff --git a/apps/backend/tests/commerce/offer-quote-resolution.scenario.test.ts b/apps/backend/tests/commerce/offer-quote-resolution.scenario.test.ts
index cace5c5c5..372b8663c 100644
--- a/apps/backend/tests/commerce/offer-quote-resolution.scenario.test.ts
+++ b/apps/backend/tests/commerce/offer-quote-resolution.scenario.test.ts
@@ -75,7 +75,7 @@ async function givenRideQuoteCatalog(input: {
   });
   const sku = await createProductSku({
     facts: {
-      providerVehicleTypeCode: input.providerVehicleTypeCode ?? "EXPRESS",
+      providerVehicleTypeCode: input.providerVehicleTypeCode ?? "3",
       rideHailingProviderInstanceId: randomUUID(),
     },
     name: input.skuName ?? "Quote resolver ride SKU",
@@ -117,7 +117,7 @@ async function createRideCandidateQuote(input: {
       providerQuoteExpiresAt: null,
       providerQuoteId: `fake_quote_${input.sku.id}`,
       providerSnapshot: {},
-      providerVehicleTypeCode: "EXPRESS",
+      providerVehicleTypeCode: "3",
       providerVehicleTypeName: input.sku.name,
     },
     id: quoteId,
@@ -185,7 +185,7 @@ async function assertProblemCode(run: () => Promise<unknown>, expectedCode: stri
 scenario("commerce_quote_validity_rejects_inactive_offer_and_sku", async () => {
   const inactiveOfferCatalog = await givenRideQuoteCatalog({
     skuName: "快车",
-    providerVehicleTypeCode: "EXPRESS",
+    providerVehicleTypeCode: "3",
   });
   const inactiveOfferQuote = await createRideCandidateQuote(inactiveOfferCatalog);
   await offerRepo.updateById(inactiveOfferCatalog.offer.id, {
@@ -205,7 +205,7 @@ scenario("commerce_quote_validity_rejects_inactive_offer_and_sku", async () => {
 
   const inactiveSkuCatalog = await givenRideQuoteCatalog({
     skuName: "专车",
-    providerVehicleTypeCode: "PREMIER",
+    providerVehicleTypeCode: "5",
   });
   const inactiveSkuQuote = await createRideCandidateQuote(inactiveSkuCatalog);
   await productSkuRepo.updateById(inactiveSkuCatalog.sku.id, {
@@ -227,11 +227,11 @@ scenario("commerce_quote_validity_rejects_inactive_offer_and_sku", async () => {
 scenario("commerce_choice_set_quotes_must_share_one_listing_session", async () => {
   const expressCatalog = await givenRideQuoteCatalog({
     skuName: "快车",
-    providerVehicleTypeCode: "EXPRESS",
+    providerVehicleTypeCode: "3",
   });
   const premierSku = await createProductSku({
     facts: {
-      providerVehicleTypeCode: "PREMIER",
+      providerVehicleTypeCode: "5",
       rideHailingProviderInstanceId: randomUUID(),
     },
     name: "专车",
diff --git a/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts b/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts
index cf06b4f55..4a897f02a 100644
--- a/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts
+++ b/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts
@@ -271,7 +271,7 @@ scenario("Caocao callback updates ride execution and creates final bill", async
       },
       factsSnapshot: {
         rideHailingProviderInstanceId: provider.id,
-        providerVehicleTypeCode: "EXPRESS",
+        providerVehicleTypeCode: "3",
       },
       pricingModelSnapshot: {
         type: "DYNAMIC_QUOTE" as const,
@@ -352,7 +352,7 @@ scenario("Caocao callback updates ride execution and creates final bill", async
           ],
           resolution: {
             sku: skuSnapshot,
-            providerVehicleTypeCode: "EXPRESS",
+            providerVehicleTypeCode: "3",
             providerVehicleTypeName: "Scenario Caocao Express",
             quoteSnapshot: {
               amountFen: 3600,
@@ -535,7 +535,7 @@ scenario("Caocao callback returns retryable failure when provider detail query f
       },
       factsSnapshot: {
         rideHailingProviderInstanceId: provider.id,
-        providerVehicleTypeCode: "EXPRESS",
+        providerVehicleTypeCode: "3",
       },
       pricingModelSnapshot: {
         type: "DYNAMIC_QUOTE" as const,
@@ -584,7 +584,7 @@ scenario("Caocao callback returns retryable failure when provider detail query f
           ],
           resolution: {
             sku: skuSnapshot,
-            providerVehicleTypeCode: "EXPRESS",
+            providerVehicleTypeCode: "3",
             providerVehicleTypeName: "Scenario Caocao Query Failure Express",
             quoteSnapshot: {
               amountFen: 3600,
diff --git a/packages/fake-caocao-server/openapi/control/fake-caocao-control.openapi.yaml b/packages/fake-caocao-server/openapi/control/fake-caocao-control.openapi.yaml
new file mode 100644
index 000000000..cf8e73bb7
--- /dev/null
+++ b/packages/fake-caocao-server/openapi/control/fake-caocao-control.openapi.yaml
@@ -0,0 +1,513 @@
+openapi: 3.1.0
+info:
+  title: Fake Caocao Control API
+  version: 0.0.0
+  description: Fake-server-only control surface for deterministic tests.
+paths:
+  /__fake_caocao/reset:
+    post:
+      operationId: controlReset
+      responses:
+        '200':
+          description: Reset success
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/OkResponse'
+  /__fake_caocao/create-failure/next:
+    post:
+      operationId: controlNextCreateFailure
+      responses:
+        '200':
+          description: Configure next-create failure success
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/OkResponse'
+  /__fake_caocao/estimates:
+    post:
+      operationId: controlUpdateEstimate
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/UpdateEstimateRequest'
+      responses:
+        '200':
+          description: Update estimate success
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/EstimateMutationResponse'
+  /__fake_caocao/estimates/availability:
+    post:
+      operationId: controlEstimateAvailability
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/EstimateAvailabilityRequest'
+      responses:
+        '200':
+          description: Estimate availability success
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/EstimateMutationResponse'
+  /__fake_caocao/state:
+    get:
+      operationId: controlState
+      responses:
+        '200':
+          description: State snapshot success
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/FakeCaocaoStateSnapshot'
+  /__fake_caocao/orders/latest/advance:
+    post:
+      operationId: controlAdvanceLatestOrder
+      responses:
+        '200':
+          description: Advance latest order success
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/OrderMutationResponse'
+  /__fake_caocao/orders/latest/retreat:
+    post:
+      operationId: controlRetreatLatestOrder
+      responses:
+        '200':
+          description: Retreat latest order success
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/OrderMutationResponse'
+  /__fake_caocao/orders/{providerOrderId}/advance:
+    post:
+      operationId: controlAdvanceOrder
+      parameters:
+        - $ref: '#/components/parameters/ProviderOrderId'
+      responses:
+        '200':
+          description: Advance one order success
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/OrderMutationResponse'
+  /__fake_caocao/orders/{providerOrderId}/retreat:
+    post:
+      operationId: controlRetreatOrder
+      parameters:
+        - $ref: '#/components/parameters/ProviderOrderId'
+      responses:
+        '200':
+          description: Retreat one order success
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/OrderMutationResponse'
+  /__fake_caocao/orders/{providerOrderId}/phase:
+    post:
+      operationId: controlSetOrderPhase
+      parameters:
+        - $ref: '#/components/parameters/ProviderOrderId'
+        - name: phase
+          in: query
+          required: true
+          schema:
+            type: string
+            minLength: 1
+      responses:
+        '200':
+          description: Set one order phase success
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/OrderMutationResponse'
+components:
+  parameters:
+    ProviderOrderId:
+      name: providerOrderId
+      in: path
+      required: true
+      schema:
+        type: string
+        minLength: 1
+  schemas:
+    CarType:
+      type: string
+      enum: ['2', '3', '4', '5', '7', '12', '14', '15']
+    IsoDateTime:
+      type: string
+      format: date-time
+    Coordinate:
+      type: object
+      additionalProperties: false
+      required:
+        - latitude
+        - longitude
+      properties:
+        latitude:
+          type: number
+        longitude:
+          type: number
+    OrderPhase:
+      type: string
+      enum: ['CREATED', 'ACCEPTED', 'ARRIVED_AT_PICKUP', 'IN_TRIP', 'FINISHED', 'CANCELLED']
+    FakeCaocaoVehicleEstimate:
+      type: object
+      additionalProperties: false
+      required:
+        - carType
+        - carTypeName
+        - distanceMeters
+        - durationSeconds
+        - estimateAmountFen
+      properties:
+        carType:
+          $ref: '#/components/schemas/CarType'
+        carTypeName:
+          type: string
+          minLength: 1
+        distanceMeters:
+          type: integer
+        durationSeconds:
+          type: integer
+        estimateAmountFen:
+          type: integer
+    CallbackSkipped:
+      type: object
+      additionalProperties: false
+      required:
+        - callbackUrl
+        - message
+        - ok
+        - skipped
+      properties:
+        callbackUrl:
+          type: 'null'
+        message:
+          type: string
+          minLength: 1
+        ok:
+          type: boolean
+          const: true
+        skipped:
+          type: boolean
+          const: true
+    CallbackDelivered:
+      type: object
+      additionalProperties: false
+      required:
+        - bodyPreview
+        - callbackUrl
+        - ok
+        - skipped
+        - status
+        - statusText
+      properties:
+        bodyPreview:
+          type:
+            - string
+            - 'null'
+        callbackUrl:
+          type: string
+          format: uri
+        ok:
+          type: boolean
+          const: true
+        skipped:
+          type: boolean
+          const: false
+        status:
+          type: integer
+        statusText:
+          type: string
+          minLength: 1
+    CallbackFailed:
+      type: object
+      additionalProperties: false
+      required:
+        - bodyPreview
+        - callbackUrl
+        - message
+        - ok
+        - skipped
+        - status
+        - statusText
+      properties:
+        bodyPreview:
+          type:
+            - string
+            - 'null'
+        callbackUrl:
+          type: string
+          format: uri
+        message:
+          type: string
+          minLength: 1
+        ok:
+          type: boolean
+          const: false
+        skipped:
+          type: boolean
+          const: false
+        status:
+          type:
+            - integer
+            - 'null'
+        statusText:
+          type:
+            - string
+            - 'null'
+    CallbackDelivery:
+      type:
+        - object
+      anyOf:
+        - $ref: '#/components/schemas/CallbackSkipped'
+        - $ref: '#/components/schemas/CallbackDelivered'
+        - $ref: '#/components/schemas/CallbackFailed'
+    FakeCaocaoOrderState:
+      type: object
+      additionalProperties: false
+      required:
+        - acceptedAt
+        - arrivedAt
+        - callbackInfo
+        - callbackUrl
+        - cancelFeeFen
+        - callerPhone
+        - canceledAt
+        - carType
+        - cityCode
+        - createdAt
+        - departureTime
+        - destination
+        - endAddress
+        - endName
+        - estimatePriceFen
+        - externalOrderId
+        - finalAmountFen
+        - finishedAt
+        - orderType
+        - origin
+        - passengerName
+        - passengerPhone
+        - phase
+        - providerOrderId
+        - queryCount
+        - serviceStartedAt
+        - startAddress
+        - startName
+        - updatedAt
+      properties:
+        acceptedAt:
+          type:
+            - string
+            - 'null'
+          format: date-time
+        arrivedAt:
+          type:
+            - string
+            - 'null'
+          format: date-time
+        callbackInfo:
+          type:
+            - string
+            - 'null'
+        callbackUrl:
+          type:
+            - string
+            - 'null'
+          format: uri
+        cancelFeeFen:
+          type: integer
+        callerPhone:
+          type: string
+          pattern: '^1\d{10}$'
+        canceledAt:
+          type:
+            - string
+            - 'null'
+          format: date-time
+        carType:
+          $ref: '#/components/schemas/CarType'
+        cityCode:
+          type: string
+          pattern: '^\d+$'
+        createdAt:
+          $ref: '#/components/schemas/IsoDateTime'
+        departureTime:
+          type:
+            - string
+            - 'null'
+        destination:
+          $ref: '#/components/schemas/Coordinate'
+        endAddress:
+          type: string
+          minLength: 1
+        endName:
+          type: string
+          minLength: 1
+        estimatePriceFen:
+          type: integer
+        externalOrderId:
+          type: string
+          minLength: 1
+        finalAmountFen:
+          type: integer
+        finishedAt:
+          type:
+            - string
+            - 'null'
+          format: date-time
+        orderType:
+          type: integer
+          enum: [1, 2, 3, 4, 5, 6]
+        origin:
+          $ref: '#/components/schemas/Coordinate'
+        passengerName:
+          type: string
+          minLength: 1
+        passengerPhone:
+          type: string
+          pattern: '^1\d{10}$'
+        phase:
+          $ref: '#/components/schemas/OrderPhase'
+        providerOrderId:
+          type: string
+          minLength: 1
+        queryCount:
+          type: integer
+        serviceStartedAt:
+          type:
+            - string
+            - 'null'
+          format: date-time
+        startAddress:
+          type: string
+          minLength: 1
+        startName:
+          type: string
+          minLength: 1
+        updatedAt:
+          $ref: '#/components/schemas/IsoDateTime'
+    FakeCaocaoFeeConfirmState:
+      type: object
+      additionalProperties: false
+      required:
+        - allowanceAmountFen
+        - caocaoAllowanceAmountFen
+        - confirmedAt
+        - providerOrderId
+      properties:
+        allowanceAmountFen:
+          type:
+            - integer
+            - 'null'
+        caocaoAllowanceAmountFen:
+          type:
+            - integer
+            - 'null'
+        confirmedAt:
+          $ref: '#/components/schemas/IsoDateTime'
+        providerOrderId:
+          type: string
+          minLength: 1
+    FakeCaocaoStateSnapshot:
+      type: object
+      additionalProperties: false
+      required:
+        - estimates
+        - failNextCreate
+        - feeConfirms
+        - orders
+        - unavailableEstimateCarTypes
+      properties:
+        estimates:
+          type: array
+          items:
+            $ref: '#/components/schemas/FakeCaocaoVehicleEstimate'
+        failNextCreate:
+          type: boolean
+        feeConfirms:
+          type: array
+          items:
+            $ref: '#/components/schemas/FakeCaocaoFeeConfirmState'
+        orders:
+          type: array
+          items:
+            $ref: '#/components/schemas/FakeCaocaoOrderState'
+        unavailableEstimateCarTypes:
+          type: array
+          items:
+            $ref: '#/components/schemas/CarType'
+    UpdateEstimateRequest:
+      type: object
+      additionalProperties: false
+      required:
+        - carType
+        - estimateAmountFen
+      properties:
+        carType:
+          $ref: '#/components/schemas/CarType'
+        carTypeName:
+          type: string
+          minLength: 1
+        distanceMeters:
+          type: integer
+        durationSeconds:
+          type: integer
+        estimateAmountFen:
+          type: integer
+    EstimateAvailabilityRequest:
+      type: object
+      additionalProperties: false
+      required:
+        - available
+        - carType
+      properties:
+        available:
+          type: boolean
+        carType:
+          $ref: '#/components/schemas/CarType'
+    OkResponse:
+      type: object
+      additionalProperties: false
+      required:
+        - ok
+      properties:
+        ok:
+          type: boolean
+          const: true
+    EstimateMutationResponse:
+      type: object
+      additionalProperties: false
+      required:
+        - estimate
+        - ok
+      properties:
+        estimate:
+          $ref: '#/components/schemas/FakeCaocaoVehicleEstimate'
+        ok:
+          type: boolean
+          const: true
+    OrderMutationResponse:
+      type: object
+      additionalProperties: false
+      required:
+        - callback
+        - ok
+        - order
+      properties:
+        callback:
+          $ref: '#/components/schemas/CallbackDelivery'
+        ok:
+          type: boolean
+          const: true
+        order:
+          $ref: '#/components/schemas/FakeCaocaoOrderState'
diff --git a/packages/fake-caocao-server/openapi/provider/caocao-provider-minimal.openapi.yaml b/packages/fake-caocao-server/openapi/provider/caocao-provider-minimal.openapi.yaml
new file mode 100644
index 000000000..5630fd2cd
--- /dev/null
+++ b/packages/fake-caocao-server/openapi/provider/caocao-provider-minimal.openapi.yaml
@@ -0,0 +1,1207 @@
+openapi: 3.1.0
+info:
+  title: Fake Caocao Provider Minimal API
+  version: 0.0.0
+  description: >
+    Minimal CaoCao OpenAPI surface implemented by the fake server. The covered
+    routes align to the official travel OpenAPI contract for the system-tested
+    ride-hailing flow.
+paths:
+  /common/queryCity:
+    get:
+      operationId: queryCity
+      parameters:
+        - $ref: '#/components/parameters/ClientId'
+        - $ref: '#/components/parameters/Timestamp'
+        - $ref: '#/components/parameters/Sign'
+        - name: latitude
+          in: query
+          required: true
+          schema:
+            $ref: '#/components/schemas/DecimalString'
+        - name: longitude
+          in: query
+          required: true
+          schema:
+            $ref: '#/components/schemas/DecimalString'
+      responses:
+        '200':
+          description: Query city success
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/QueryCitySuccessResponse'
+  /common/estimatePriceWithDetail:
+    get:
+      operationId: estimatePriceWithDetail
+      parameters:
+        - $ref: '#/components/parameters/ClientId'
+        - $ref: '#/components/parameters/Timestamp'
+        - $ref: '#/components/parameters/Sign'
+        - name: city_code
+          in: query
+          required: true
+          schema:
+            $ref: '#/components/schemas/CityCode'
+        - name: car_type
+          in: query
+          required: true
+          schema:
+            type: string
+            enum: ['2', '3', '5', '7', '14', '15']
+        - name: from_latitude
+          in: query
+          required: true
+          schema:
+            $ref: '#/components/schemas/DecimalString'
+        - name: from_longitude
+          in: query
+          required: true
+          schema:
+            $ref: '#/components/schemas/DecimalString'
+        - name: to_latitude
+          in: query
+          required: true
+          schema:
+            $ref: '#/components/schemas/DecimalString'
+        - name: to_longitude
+          in: query
+          required: true
+          schema:
+            $ref: '#/components/schemas/DecimalString'
+        - name: order_type
+          in: query
+          required: false
+          schema:
+            type: string
+            enum: ['1', '2', '3', '4', '5', '6']
+        - name: departure_time
+          in: query
+          required: false
+          schema:
+            $ref: '#/components/schemas/CaocaoDateTimeString'
+        - name: carpool_type
+          in: query
+          required: false
+          schema:
+            type: string
+            enum: ['0', '1']
+        - name: count_person
+          in: query
+          required: false
+          schema:
+            type: string
+            pattern: '^\d+$'
+        - name: order_tags
+          in: query
+          required: false
+          schema:
+            type: string
+            minLength: 1
+        - name: passenger_phone
+          in: query
+          required: false
+          schema:
+            $ref: '#/components/schemas/PhoneNumber'
+        - name: route_strategy
+          in: query
+          required: false
+          schema:
+            type: string
+            minLength: 1
+        - name: waypointList
+          in: query
+          required: false
+          schema:
+            type: string
+            minLength: 1
+      responses:
+        '200':
+          description: Estimate success
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/EstimatePriceSuccessResponse'
+  /common/orderCarV2:
+    post:
+      operationId: orderCarV2
+      requestBody:
+        required: true
+        content:
+          application/x-www-form-urlencoded:
+            schema:
+              $ref: '#/components/schemas/OrderCarV2Request'
+      responses:
+        '200':
+          description: Create order success
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/OrderCarV2SuccessResponse'
+  /common/queryOrderDetailV2:
+    get:
+      operationId: queryOrderDetailV2
+      parameters:
+        - $ref: '#/components/parameters/ClientId'
+        - $ref: '#/components/parameters/Timestamp'
+        - $ref: '#/components/parameters/Sign'
+        - name: order_id
+          in: query
+          required: true
+          schema:
+            type: string
+            minLength: 1
+      responses:
+        '200':
+          description: Query order detail success
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/QueryOrderDetailSuccessResponse'
+  /common/queryDriverLocationByOrderId:
+    get:
+      operationId: queryDriverLocationByOrderId
+      parameters:
+        - $ref: '#/components/parameters/ClientId'
+        - $ref: '#/components/parameters/Timestamp'
+        - $ref: '#/components/parameters/Sign'
+        - name: order_id
+          in: query
+          required: true
+          schema:
+            type: string
+            minLength: 1
+      responses:
+        '200':
+          description: Query driver location success
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/QueryDriverLocationSuccessResponse'
+  /common/queryDriverPolylineV2:
+    post:
+      operationId: queryDriverPolylineV2
+      requestBody:
+        required: true
+        content:
+          application/x-www-form-urlencoded:
+            schema:
+              $ref: '#/components/schemas/QueryDriverPolylineV2Request'
+      responses:
+        '200':
+          description: Query driver polyline success
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/QueryDriverPolylineSuccessResponse'
+  /common/cancelOrderV3:
+    post:
+      operationId: cancelOrderV3
+      requestBody:
+        required: true
+        content:
+          application/x-www-form-urlencoded:
+            schema:
+              $ref: '#/components/schemas/CancelOrderV3Request'
+      responses:
+        '200':
+          description: Cancel order success
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/CancelOrderSuccessResponse'
+  /common/queryCancelFee:
+    get:
+      operationId: queryCancelFee
+      parameters:
+        - $ref: '#/components/parameters/ClientId'
+        - $ref: '#/components/parameters/Timestamp'
+        - $ref: '#/components/parameters/Sign'
+        - name: order_no
+          in: query
+          required: true
+          schema:
+            type: string
+            minLength: 1
+      responses:
+        '200':
+          description: Query cancel fee success
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/QueryCancelFeeSuccessResponse'
+  /common/feeConfirm:
+    post:
+      operationId: feeConfirm
+      requestBody:
+        required: true
+        content:
+          application/x-www-form-urlencoded:
+            schema:
+              $ref: '#/components/schemas/FeeConfirmRequest'
+      responses:
+        '200':
+          description: Fee confirm success
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/FeeConfirmSuccessResponse'
+webhooks:
+  notifyOrderStatus:
+    post:
+      operationId: notifyOrderStatus
+      requestBody:
+        required: true
+        content:
+          application/x-www-form-urlencoded:
+            schema:
+              $ref: '#/components/schemas/NotifyOrderStatusForm'
+      responses:
+        '200':
+          description: Callback ack
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/CallbackAckResponse'
+components:
+  parameters:
+    ClientId:
+      name: client_id
+      in: query
+      required: true
+      schema:
+        type: string
+        minLength: 1
+    Timestamp:
+      name: timestamp
+      in: query
+      required: true
+      schema:
+        type: string
+        pattern: '^\d+$'
+    Sign:
+      name: sign
+      in: query
+      required: true
+      schema:
+        type: string
+        minLength: 1
+  schemas:
+    DecimalString:
+      type: string
+      pattern: '^-?\d+(\.\d+)?$'
+    IntegerString:
+      type: string
+      pattern: '^\d+$'
+    PhoneNumber:
+      type: string
+      pattern: '^1\d{10}$'
+    CityCode:
+      type: string
+      pattern: '^\d+$'
+    CaocaoDateTimeString:
+      type: string
+      pattern: '^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$'
+    Coordinate:
+      type: object
+      additionalProperties: false
+      required:
+        - lat
+        - lng
+      properties:
+        lat:
+          type: number
+        lng:
+          type: number
+    DriverLocation:
+      type: object
+      additionalProperties: false
+      required:
+        - direction
+        - latitude
+        - longitude
+        - speed
+        - travelKm
+        - travelMinute
+      properties:
+        direction:
+          type: number
+        latitude:
+          type: number
+        longitude:
+          type: number
+        speed:
+          type: number
+        travelKm:
+          type: integer
+        travelMinute:
+          type: integer
+    DriverInfoLocation:
+      type: object
+      additionalProperties: false
+      required:
+        - direction
+        - lat
+        - lng
+        - speed
+      properties:
+        direction:
+          type: number
+        lat:
+          type: number
+        lng:
+          type: number
+        speed:
+          type: number
+    DriverInfoVo:
+      type: object
+      nullable: true
+      additionalProperties: false
+      required:
+        - driverName
+        - driverPhone
+        - driverNo
+        - carNo
+        - carBrand
+        - color
+        - location
+      properties:
+        driverName:
+          type: string
+          minLength: 1
+        driverPhone:
+          $ref: '#/components/schemas/PhoneNumber'
+        driverNo:
+          type: string
+          minLength: 1
+        carNo:
+          type: string
+          minLength: 1
+        carBrand:
+          type: string
+          minLength: 1
+        color:
+          type: string
+          minLength: 1
+        location:
+          $ref: '#/components/schemas/DriverInfoLocation'
+    OrderFeeVo:
+      type: object
+      additionalProperties: false
+      required:
+        - totalFee
+      properties:
+        totalFee:
+          type:
+            - integer
+            - 'null'
+    DriverPolylineLink:
+      type: object
+      additionalProperties: false
+      required:
+        - coords
+        - length
+        - time
+      properties:
+        coords:
+          type: string
+          minLength: 1
+        length:
+          type: integer
+        time:
+          type: integer
+    DriverPolylineStep:
+      type: object
+      additionalProperties: false
+      required:
+        - length
+        - links
+        - time
+      properties:
+        length:
+          type: integer
+        links:
+          type: array
+          items:
+            $ref: '#/components/schemas/DriverPolylineLink'
+        time:
+          type: integer
+    DriverEtaInfoVO:
+      type: object
+      additionalProperties: false
+      required:
+        - curLinkIndex
+        - curPointIndex
+        - curStepIndex
+        - direction
+        - isMatchNaviPath
+        - lat
+        - lng
+        - remainDistance
+        - remainLightCount
+        - remainTime
+        - speed
+        - timestamp
+      properties:
+        curLinkIndex:
+          type: integer
+        curPointIndex:
+          type: integer
+        curStepIndex:
+          type: integer
+        direction:
+          type: number
+        isMatchNaviPath:
+          type: integer
+          enum: [0, 1]
+        lat:
+          type: number
+        lng:
+          type: number
+        remainDistance:
+          type: integer
+        remainLightCount:
+          type: integer
+        remainTime:
+          type: integer
+        speed:
+          type: number
+        timestamp:
+          type: string
+          pattern: '^\d+$'
+    EstimateChargeDetail:
+      type: object
+      additionalProperties: false
+      required:
+        - amount
+        - chargeCode
+        - chargeDesc
+      properties:
+        amount:
+          type: integer
+        chargeCode:
+          type: string
+          minLength: 1
+        chargeDesc:
+          type: string
+          minLength: 1
+    QueryCityData:
+      type: object
+      additionalProperties: false
+      required:
+        - city_code
+        - city_name
+      properties:
+        city_code:
+          $ref: '#/components/schemas/CityCode'
+        city_name:
+          type: string
+          minLength: 1
+    EstimatePriceData:
+      type: object
+      additionalProperties: false
+      required:
+        - carType
+        - detail
+        - distance
+        - duration
+        - lineType
+        - name
+        - originPrice
+        - price
+        - priceKey
+      properties:
+        carType:
+          type: integer
+          enum: [2, 3, 5, 7, 14, 15]
+        detail:
+          type: array
+          items:
+            $ref: '#/components/schemas/EstimateChargeDetail'
+        distance:
+          type: integer
+        duration:
+          type: integer
+        lineType:
+          type: integer
+          enum: [0, 1]
+        name:
+          type: string
+          minLength: 1
+        originPrice:
+          type: integer
+        price:
+          type: integer
+        priceKey:
+          type: string
+          minLength: 1
+    OrderCarV2Data:
+      type: object
+      additionalProperties: false
+      required:
+        - orderNo
+      properties:
+        orderNo:
+          type: string
+          minLength: 1
+    QueryOrderDetailBasicOrderVO:
+      type: object
+      additionalProperties: false
+      required:
+        - acceptCPDriver
+        - allowModifyDest
+        - beginChargeTime
+        - callbackInfo
+        - callerPhone
+        - cityCode
+        - departureTime
+        - endAddress
+        - endName
+        - estimatePrice
+        - extOrderId
+        - fromLocation
+        - invoiceStatus
+        - invoiced
+        - isRelayOrder
+        - orderId
+        - orderLocation
+        - orderTime
+        - passengerName
+        - passengerPhone
+        - preOrderEndFlag
+        - realEndLocation
+        - realStartLocation
+        - requireLevel
+        - startAddress
+        - startName
+        - startServiceTime
+        - status
+        - toLocation
+        - type
+      properties:
+        acceptCPDriver:
+          type: integer
+          enum: [0, 1]
+        allowModifyDest:
+          type: integer
+          enum: [0, 1]
+        beginChargeTime:
+          type:
+            - string
+            - 'null'
+          pattern: '^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$'
+        callbackInfo:
+          type:
+            - string
+            - 'null'
+        callerPhone:
+          $ref: '#/components/schemas/PhoneNumber'
+        cityCode:
+          $ref: '#/components/schemas/CityCode'
+        departureTime:
+          type:
+            - string
+            - 'null'
+          pattern: '^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$'
+        endAddress:
+          type: string
+          minLength: 1
+        endName:
+          type: string
+          minLength: 1
+        estimatePrice:
+          type: integer
+        extOrderId:
+          type: string
+          minLength: 1
+        fromLocation:
+          $ref: '#/components/schemas/Coordinate'
+        invoiceStatus:
+          type: integer
+          enum: [0, 1]
+        invoiced:
+          type: integer
+          enum: [0, 1]
+        isRelayOrder:
+          type: integer
+          enum: [0, 1]
+        orderId:
+          type: string
+          minLength: 1
+        orderLocation:
+          $ref: '#/components/schemas/Coordinate'
+        orderTime:
+          $ref: '#/components/schemas/CaocaoDateTimeString'
+        passengerName:
+          type: string
+          minLength: 1
+        passengerPhone:
+          $ref: '#/components/schemas/PhoneNumber'
+        preOrderEndFlag:
+          type: integer
+          enum: [0, 1]
+        realEndLocation:
+          $ref: '#/components/schemas/Coordinate'
+        realStartLocation:
+          $ref: '#/components/schemas/Coordinate'
+        requireLevel:
+          type: integer
+          enum: [0, 1]
+        startAddress:
+          type: string
+          minLength: 1
+        startName:
+          type: string
+          minLength: 1
+        startServiceTime:
+          type:
+            - string
+            - 'null'
+          pattern: '^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$'
+        status:
+          type: string
+          enum: ['1', '3', '5', '9', '12', '20']
+        toLocation:
+          $ref: '#/components/schemas/Coordinate'
+        type:
+          type: integer
+          enum: [1, 2, 3, 4, 5, 6]
+    QueryOrderDetailData:
+      type: object
+      additionalProperties: false
+      required:
+        - basicOrderVO
+        - driverInfoVo
+        - orderFeeVo
+      properties:
+        basicOrderVO:
+          $ref: '#/components/schemas/QueryOrderDetailBasicOrderVO'
+        driverInfoVo:
+          $ref: '#/components/schemas/DriverInfoVo'
+        orderFeeVo:
+          $ref: '#/components/schemas/OrderFeeVo'
+    QueryDriverPolylineData:
+      type: object
+      additionalProperties: false
+      required:
+        - allLength
+        - allTime
+        - driverEtaInfoVO
+        - driverNo
+        - navigationPolylineType
+        - orderNo
+        - pathId
+        - steps
+      properties:
+        allLength:
+          type: integer
+        allTime:
+          type: integer
+        driverEtaInfoVO:
+          $ref: '#/components/schemas/DriverEtaInfoVO'
+        driverNo:
+          type: string
+          minLength: 1
+        navigationPolylineType:
+          type: integer
+          enum: [0, 1, 2, 3]
+        orderNo:
+          type: string
+          minLength: 1
+        pathId:
+          type: string
+          minLength: 1
+        steps:
+          type: array
+          items:
+            $ref: '#/components/schemas/DriverPolylineStep'
+    CancelFeeData:
+      type: object
+      additionalProperties: false
+      required:
+        - cancelFee
+        - orderNo
+      properties:
+        cancelFee:
+          type: integer
+        orderNo:
+          type: string
+          minLength: 1
+    SuccessEnvelopeBase:
+      type: object
+      additionalProperties: false
+      required:
+        - code
+        - data
+        - msg
+        - success
+      properties:
+        code:
+          type: integer
+          const: 200
+        data: {}
+        msg:
+          type: string
+          const: OK
+        success:
+          type: boolean
+          const: true
+    FailureEnvelope:
+      type: object
+      additionalProperties: false
+      required:
+        - code
+        - data
+        - msg
+        - success
+      properties:
+        code:
+          type: integer
+        data:
+          type: 'null'
+        msg:
+          type: string
+          minLength: 1
+        success:
+          type: boolean
+          const: false
+    QueryCitySuccessResponse:
+      type: object
+      additionalProperties: false
+      required:
+        - code
+        - data
+        - msg
+        - success
+      properties:
+        code:
+          type: integer
+          const: 200
+        data:
+          $ref: '#/components/schemas/QueryCityData'
+        msg:
+          type: string
+          const: OK
+        success:
+          type: boolean
+          const: true
+    EstimatePriceSuccessResponse:
+      type: object
+      additionalProperties: false
+      required:
+        - code
+        - data
+        - msg
+        - success
+      properties:
+        code:
+          type: integer
+          const: 200
+        data:
+          $ref: '#/components/schemas/EstimatePriceData'
+        msg:
+          type: string
+          const: OK
+        success:
+          type: boolean
+          const: true
+    OrderCarV2SuccessResponse:
+      type: object
+      additionalProperties: false
+      required:
+        - code
+        - data
+        - msg
+        - success
+      properties:
+        code:
+          type: integer
+          const: 200
+        data:
+          $ref: '#/components/schemas/OrderCarV2Data'
+        msg:
+          type: string
+          const: OK
+        success:
+          type: boolean
+          const: true
+    QueryOrderDetailSuccessResponse:
+      type: object
+      additionalProperties: false
+      required:
+        - code
+        - data
+        - msg
+        - success
+      properties:
+        code:
+          type: integer
+          const: 200
+        data:
+          $ref: '#/components/schemas/QueryOrderDetailData'
+        msg:
+          type: string
+          const: OK
+        success:
+          type: boolean
+          const: true
+    QueryDriverLocationSuccessResponse:
+      type: object
+      additionalProperties: false
+      required:
+        - code
+        - data
+        - msg
+        - success
+      properties:
+        code:
+          type: integer
+          const: 200
+        data:
+          $ref: '#/components/schemas/DriverLocation'
+        msg:
+          type: string
+          const: OK
+        success:
+          type: boolean
+          const: true
+    QueryDriverPolylineSuccessResponse:
+      type: object
+      additionalProperties: false
+      required:
+        - code
+        - data
+        - msg
+        - success
+      properties:
+        code:
+          type: integer
+          const: 200
+        data:
+          $ref: '#/components/schemas/QueryDriverPolylineData'
+        msg:
+          type: string
+          const: OK
+        success:
+          type: boolean
+          const: true
+    CancelOrderSuccessResponse:
+      type: object
+      additionalProperties: false
+      required:
+        - code
+        - data
+        - msg
+        - success
+      properties:
+        code:
+          type: integer
+          const: 200
+        data:
+          $ref: '#/components/schemas/CancelFeeData'
+        msg:
+          type: string
+          const: OK
+        success:
+          type: boolean
+          const: true
+    QueryCancelFeeSuccessResponse:
+      type: object
+      additionalProperties: false
+      required:
+        - code
+        - data
+        - msg
+        - success
+      properties:
+        code:
+          type: integer
+          const: 200
+        data:
+          $ref: '#/components/schemas/CancelFeeData'
+        msg:
+          type: string
+          const: OK
+        success:
+          type: boolean
+          const: true
+    FeeConfirmSuccessResponse:
+      type: object
+      additionalProperties: false
+      required:
+        - code
+        - data
+        - msg
+        - success
+      properties:
+        code:
+          type: integer
+          const: 200
+        data:
+          type: 'null'
+        msg:
+          type: string
+          const: OK
+        success:
+          type: boolean
+          const: true
+    CallbackAckResponse:
+      type: object
+      additionalProperties: false
+      required:
+        - code
+        - success
+      properties:
+        code:
+          type: integer
+          const: 200
+        success:
+          type: boolean
+          const: true
+    OrderCarV2Request:
+      type: object
+      additionalProperties: false
+      required:
+        - callback_info
+        - caller_phone
+        - car_type
+        - city_code
+        - client_id
+        - end_address
+        - end_name
+        - estimate_price
+        - estimate_price_key
+        - ext_order_id
+        - from_latitude
+        - from_longitude
+        - is_simultaneously_call
+        - order_type
+        - sign
+        - start_address
+        - start_name
+        - timestamp
+        - to_latitude
+        - to_longitude
+      properties:
+        accept_cp_driver:
+          type: string
+          enum: ['0', '1']
+        accept_relay_order:
+          type: string
+          enum: ['0', '1']
+        callback_info:
+          type: string
+          minLength: 1
+        caller_phone:
+          $ref: '#/components/schemas/PhoneNumber'
+        car_type:
+          type: string
+          enum: ['2', '3', '4', '5', '7', '12', '14', '15']
+        city_code:
+          $ref: '#/components/schemas/CityCode'
+        client_id:
+          type: string
+          minLength: 1
+        count_person:
+          $ref: '#/components/schemas/IntegerString'
+        departure_time:
+          $ref: '#/components/schemas/CaocaoDateTimeString'
+        dynamic_rule_id:
+          type: string
+        end_address:
+          type: string
+          minLength: 1
+        end_name:
+          type: string
+          minLength: 1
+        end_poi_id:
+          type: string
+        estimate_price:
+          $ref: '#/components/schemas/IntegerString'
+        estimate_price_key:
+          type: string
+          minLength: 1
+        ext_order_id:
+          type: string
+          minLength: 1
+        ext_uid:
+          type: string
+        extra_info:
+          type: string
+        flight_no:
+          type: string
+        flt_takeoff_time:
+          $ref: '#/components/schemas/CaocaoDateTimeString'
+        from_latitude:
+          $ref: '#/components/schemas/DecimalString'
+        from_longitude:
+          $ref: '#/components/schemas/DecimalString'
+        is_simultaneously_call:
+          type: string
+          enum: ['0', '1']
+        line_type:
+          type: string
+          pattern: '^\d+$'
+        order_latitude:
+          $ref: '#/components/schemas/DecimalString'
+        order_longitude:
+          $ref: '#/components/schemas/DecimalString'
+        order_tags:
+          type: string
+        order_type:
+          type: string
+          enum: ['1', '2', '3', '4', '5', '6']
+        passenger_hide_phone:
+          type: string
+          enum: ['0', '1']
+        passenger_name:
+          type: string
+        passenger_phone:
+          $ref: '#/components/schemas/PhoneNumber'
+        sign:
+          type: string
+          minLength: 1
+        sms_policy:
+          type: string
+        start_address:
+          type: string
+          minLength: 1
+        start_name:
+          type: string
+          minLength: 1
+        start_poi_id:
+          type: string
+        timestamp:
+          type: string
+          pattern: '^\d+$'
+        to_latitude:
+          $ref: '#/components/schemas/DecimalString'
+        to_longitude:
+          $ref: '#/components/schemas/DecimalString'
+        waypointList:
+          type: string
+    QueryDriverPolylineV2Request:
+      type: object
+      additionalProperties: false
+      required:
+        - client_id
+        - order_id
+        - sign
+        - timestamp
+      properties:
+        client_id:
+          type: string
+          minLength: 1
+        order_id:
+          type: string
+          minLength: 1
+        sign:
+          type: string
+          minLength: 1
+        timestamp:
+          type: string
+          pattern: '^\d+$'
+    CancelOrderV3Request:
+      type: object
+      additionalProperties: false
+      required:
+        - cancel_code
+        - cancel_reason
+        - client_id
+        - order_id
+        - sign
+        - timestamp
+        - who_cancel
+      properties:
+        cancel_code:
+          type: string
+          enum: ['1', '2', '3', '4', '5', '6', '8', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '24', '25']
+        cancel_reason:
+          type: string
+          minLength: 1
+        client_id:
+          type: string
+          minLength: 1
+        order_id:
+          type: string
+          minLength: 1
+        sign:
+          type: string
+          minLength: 1
+        timestamp:
+          type: string
+          pattern: '^\d+$'
+        who_cancel:
+          type: string
+          enum: ['1', '2']
+    FeeConfirmRequest:
+      type: object
+      additionalProperties: false
+      required:
+        - allowance_amount
+        - cao_allowance_amount
+        - client_id
+        - order_id
+        - sign
+        - timestamp
+      properties:
+        allowance_amount:
+          $ref: '#/components/schemas/IntegerString'
+        cao_allowance_amount:
+          $ref: '#/components/schemas/IntegerString'
+        client_id:
+          type: string
+          minLength: 1
+        order_id:
+          type: string
+          minLength: 1
+        sign:
+          type: string
+          minLength: 1
+        timestamp:
+          type: string
+          pattern: '^\d+$'
+    NotifyOrderStatusForm:
+      type: object
+      additionalProperties: false
+      required:
+        - event
+        - ext_order_id
+        - order_id
+        - sign
+        - timestamp
+      properties:
+        callback_info:
+          type: string
+          minLength: 1
+        car_no:
+          type: string
+          minLength: 1
+        driver_name:
+          type: string
+          minLength: 1
+        driver_phone:
+          $ref: '#/components/schemas/PhoneNumber'
+        event:
+          type: string
+          enum: ['1', '2', '3', '4', '5', '6', '9', '11', '12', '13', '14', '20', '21', '22', '23', '24', '25', '26', '27', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50']
+        ext_order_id:
+          type: string
+          minLength: 1
+        final_amount_fen:
+          $ref: '#/components/schemas/IntegerString'
+        order_id:
+          type: string
+          minLength: 1
+        sign:
+          type: string
+          minLength: 1
+        timestamp:
+          type: string
+          pattern: '^\d+$'
+        vehicle_brand:
+          type: string
+          minLength: 1
+        vehicle_color:
+          type: string
+          minLength: 1
diff --git a/packages/fake-caocao-server/package.json b/packages/fake-caocao-server/package.json
index 898a9105c..7c68e59dd 100644
--- a/packages/fake-caocao-server/package.json
+++ b/packages/fake-caocao-server/package.json
@@ -14,6 +14,14 @@
     "test": "vitest run --config vitest.config.ts",
     "typecheck": "tsc --noEmit"
   },
+  "dependencies": {
+    "@hono/node-server": "^1.19.9",
+    "ajv": "^8.20.0",
+    "ajv-formats": "^3.0.1",
+    "hono": "^4.11.5",
+    "yaml": "^2.9.0",
+    "zod": "^3.25.76"
+  },
   "devDependencies": {
     "@types/node": "^22.0.0",
     "tsx": "^4.21.0",
diff --git a/packages/fake-caocao-server/src/openapi.ts b/packages/fake-caocao-server/src/openapi.ts
new file mode 100644
index 000000000..89f0a9177
--- /dev/null
+++ b/packages/fake-caocao-server/src/openapi.ts
@@ -0,0 +1,422 @@
+import { readFileSync } from "node:fs";
+import Ajv, { type ErrorObject, type ValidateFunction } from "ajv";
+import addFormats from "ajv-formats";
+import { parse as parseYaml } from "yaml";
+
+type JsonSchema = {
+  $ref?: string;
+  additionalProperties?: boolean | JsonSchema;
+  anyOf?: JsonSchema[];
+  const?: boolean | null | number | string;
+  enum?: Array<boolean | null | number | string>;
+  format?: string;
+  items?: JsonSchema;
+  maxItems?: number;
+  maxLength?: number;
+  minItems?: number;
+  minLength?: number;
+  nullable?: boolean;
+  oneOf?: JsonSchema[];
+  pattern?: string;
+  properties?: Record<string, JsonSchema>;
+  required?: string[];
+  type?: string | string[];
+};
+
+type OpenApiParameter = {
+  $ref?: string;
+  in?: "path" | "query";
+  name?: string;
+  required?: boolean;
+  schema?: JsonSchema;
+};
+
+type OpenApiOperation = {
+  operationId?: string;
+  parameters?: OpenApiParameter[];
+  requestBody?: {
+    required?: boolean;
+    content?: Record<string, { schema?: JsonSchema }>;
+  };
+  responses?: Record<string, { content?: Record<string, { schema?: JsonSchema }> }>;
+};
+
+type OpenApiDocument = {
+  components?: {
+    parameters?: Record<string, OpenApiParameter>;
+    schemas?: Record<string, JsonSchema>;
+  };
+  paths?: Record<string, Partial<Record<Lowercase<string>, OpenApiOperation>>>;
+  webhooks?: Record<string, Partial<Record<Lowercase<string>, OpenApiOperation>>>;
+};
+
+type ValidationLocation = "body" | "path" | "query" | "response";
+
+type OperationContentType = "application/json" | "application/x-www-form-urlencoded";
+
+type ValidationRequestSchema = {
+  contentType: OperationContentType;
+  schema: JsonSchema;
+  validator: ValidateFunction;
+};
+
+export type OpenApiIndexedOperation = {
+  method: string;
+  operationId: string;
+  path: string;
+  requestBody: ValidationRequestSchema | null;
+  requestPathSchema: JsonSchema | null;
+  requestPathValidator: ValidateFunction | null;
+  requestQuerySchema: JsonSchema | null;
+  requestQueryValidator: ValidateFunction | null;
+  responseSchemas: Map<number, JsonSchema>;
+  responseValidators: Map<number, ValidateFunction>;
+};
+
+export class OpenApiValidationError extends Error {
+  constructor(
+    readonly location: ValidationLocation,
+    readonly issues: string[],
+  ) {
+    super(issues[0] ?? "OpenAPI validation failed");
+  }
+}
+
+const ajv = new Ajv({
+  allErrors: true,
+  allowUnionTypes: true,
+  strict: false,
+});
+addFormats(ajv);
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  typeof value === "object" && value !== null && !Array.isArray(value);
+
+const isPlainObject = (value: unknown): value is Record<string, unknown> =>
+  Object.prototype.toString.call(value) === "[object Object]";
+
+const objectSchemaFromParameters = (parameters: OpenApiParameter[]): JsonSchema | null => {
+  if (parameters.length === 0) return null;
+  const properties: Record<string, JsonSchema> = {};
+  const required: string[] = [];
+  for (const parameter of parameters) {
+    if (!parameter.name || !parameter.schema) {
+      throw new Error("OpenAPI parameter is missing name or schema");
+    }
+    properties[parameter.name] = parameter.schema;
+    if (parameter.required) required.push(parameter.name);
+  }
+  return {
+    additionalProperties: false,
+    properties,
+    required,
+    type: "object",
+  };
+};
+
+const normalizePath = (value: string): string => value.replace(/:([A-Za-z0-9_]+)/g, "{$1}");
+
+const formatAjvErrors = (
+  errors: ErrorObject[] | null | undefined,
+  location: ValidationLocation,
+  operationId: string,
+): string[] => {
+  if (!errors || errors.length === 0) {
+    return [`${location}(${operationId}) failed validation`];
+  }
+  return errors.map((error) => {
+    const instancePath = error.instancePath.length > 0 ? error.instancePath : "/";
+    if (error.keyword === "required") {
+      const missingProperty = String((error.params as { missingProperty?: unknown }).missingProperty);
+      return `${location}(${operationId})${instancePath}${instancePath.endsWith("/") ? "" : "/"}${missingProperty} is required`;
+    }
+    if (error.keyword === "additionalProperties") {
+      const additionalProperty = String(
+        (error.params as { additionalProperty?: unknown }).additionalProperty,
+      );
+      return `${location}(${operationId})${instancePath}${instancePath.endsWith("/") ? "" : "/"}${additionalProperty} is not allowed`;
+    }
+    return `${location}(${operationId})${instancePath} ${error.message ?? "is invalid"}`;
+  });
+};
+
+export class OpenApiContract {
+  private readonly operations = new Map<string, OpenApiIndexedOperation>();
+
+  constructor(
+    private readonly document: OpenApiDocument,
+    readonly sourcePath: string,
+  ) {
+    this.indexOperations(this.document.paths ?? {});
+    this.indexOperations(this.document.webhooks ?? {});
+  }
+
+  static load(sourcePath: string): OpenApiContract {
+    const document = parseYaml(readFileSync(sourcePath, "utf8")) as OpenApiDocument;
+    return new OpenApiContract(document, sourcePath);
+  }
+
+  getOperation(operationId: string): OpenApiIndexedOperation {
+    const operation = this.operations.get(operationId);
+    if (!operation) {
+      throw new Error(`Unknown OpenAPI operation: ${operationId}`);
+    }
+    return operation;
+  }
+
+  validatePath(operationId: string, value: unknown): Record<string, string> {
+    return this.validateObject(operationId, "path", value);
+  }
+
+  validateQuery(operationId: string, value: unknown): Record<string, string> {
+    return this.validateObject(operationId, "query", value);
+  }
+
+  validateBody(operationId: string, value: unknown): unknown {
+    const operation = this.getOperation(operationId);
+    if (!operation.requestBody) {
+      if (
+        value === null ||
+        value === undefined ||
+        (isPlainObject(value) && Object.keys(value).length === 0)
+      ) {
+        return value ?? {};
+      }
+      throw new OpenApiValidationError("body", [
+        `${operationId} does not accept a request body`,
+      ]);
+    }
+
+    const valid = operation.requestBody.validator(value);
+    if (!valid) {
+      throw new OpenApiValidationError(
+        "body",
+        formatAjvErrors(operation.requestBody.validator.errors, "body", operationId),
+      );
+    }
+    return value;
+  }
+
+  validateResponse(operationId: string, status: number, value: unknown): void {
+    const operation = this.getOperation(operationId);
+    const validator =
+      operation.responseValidators.get(status) ??
+      operation.responseValidators.get(200) ??
+      null;
+    if (!validator) {
+      throw new Error(`OpenAPI response schema missing: ${operationId} ${status}`);
+    }
+    const valid = validator(value);
+    if (!valid) {
+      throw new OpenApiValidationError(
+        "response",
+        formatAjvErrors(validator.errors, "response", operationId),
+      );
+    }
+  }
+
+  private validateObject(
+    operationId: string,
+    location: "path" | "query",
+    value: unknown,
+  ): Record<string, string> {
+    const operation = this.getOperation(operationId);
+    const validator =
+      location === "path" ? operation.requestPathValidator : operation.requestQueryValidator;
+    if (!validator) {
+      return Object.fromEntries(
+        Object.entries(isRecord(value) ? value : {}).map(([key, item]) => [key, String(item)]),
+      );
+    }
+    const valid = validator(value);
+    if (!valid) {
+      throw new OpenApiValidationError(
+        location,
+        formatAjvErrors(validator.errors, location, operationId),
+      );
+    }
+    return Object.fromEntries(
+      Object.entries(isRecord(value) ? value : {}).map(([key, item]) => [key, String(item)]),
+    );
+  }
+
+  private indexOperations(
+    source: Record<string, Partial<Record<Lowercase<string>, OpenApiOperation>>>,
+  ): void {
+    for (const [path, pathItem] of Object.entries(source)) {
+      for (const [method, operation] of Object.entries(pathItem)) {
+        if (!operation?.operationId) continue;
+        const parameters = (operation.parameters ?? []).map((parameter) =>
+          this.resolveParameter(parameter),
+        );
+        const pathSchema = objectSchemaFromParameters(
+          parameters.filter((parameter) => parameter.in === "path"),
+        );
+        const querySchema = objectSchemaFromParameters(
+          parameters.filter((parameter) => parameter.in === "query"),
+        );
+        const requestBodyEntry = this.resolveRequestBody(operation);
+        const responseSchemas = new Map<number, JsonSchema>();
+        const responseValidators = new Map<number, ValidateFunction>();
+        for (const [status, response] of Object.entries(operation.responses ?? {})) {
+          const schema = this.resolveResponseSchema(response);
+          if (!schema) continue;
+          const dereferenced = this.dereferenceSchema(schema);
+          responseSchemas.set(Number(status), dereferenced);
+          responseValidators.set(Number(status), ajv.compile(dereferenced));
+        }
+
+        const dereferencedPathSchema = pathSchema ? this.dereferenceSchema(pathSchema) : null;
+        const dereferencedQuerySchema = querySchema ? this.dereferenceSchema(querySchema) : null;
+
+        this.operations.set(operation.operationId, {
+          method: method.toUpperCase(),
+          operationId: operation.operationId,
+          path: normalizePath(path),
+          requestBody: requestBodyEntry,
+          requestPathSchema: dereferencedPathSchema,
+          requestPathValidator: dereferencedPathSchema ? ajv.compile(dereferencedPathSchema) : null,
+          requestQuerySchema: dereferencedQuerySchema,
+          requestQueryValidator: dereferencedQuerySchema
+            ? ajv.compile(dereferencedQuerySchema)
+            : null,
+          responseSchemas,
+          responseValidators,
+        });
+      }
+    }
+  }
+
+  private resolveParameter(parameter: OpenApiParameter): OpenApiParameter {
+    if (!parameter.$ref) return parameter;
+    return this.resolveRef(parameter.$ref) as OpenApiParameter;
+  }
+
+  private resolveRequestBody(operation: OpenApiOperation): ValidationRequestSchema | null {
+    const content = operation.requestBody?.content;
+    if (!content) return null;
+    for (const contentType of [
+      "application/json",
+      "application/x-www-form-urlencoded",
+    ] as const) {
+      const schema = content[contentType]?.schema;
+      if (!schema) continue;
+      const dereferenced = this.dereferenceSchema(schema);
+      return {
+        contentType,
+        schema: dereferenced,
+        validator: ajv.compile(dereferenced),
+      };
+    }
+    return null;
+  }
+
+  private resolveResponseSchema(
+    response: { content?: Record<string, { schema?: JsonSchema }> },
+  ): JsonSchema | null {
+    for (const contentType of [
+      "application/json",
+      "application/x-www-form-urlencoded",
+    ] as const) {
+      const schema = response.content?.[contentType]?.schema;
+      if (schema) return schema;
+    }
+    return null;
+  }
+
+  private resolveRef(ref: string): unknown {
+    if (!ref.startsWith("#/")) {
+      throw new Error(`Unsupported OpenAPI ref: ${ref}`);
+    }
+    const segments = ref
+      .slice(2)
+      .split("/")
+      .map((segment) => segment.replace(/~1/g, "/").replace(/~0/g, "~"));
+
+    let current: unknown = this.document;
+    for (const segment of segments) {
+      if (!isRecord(current) || !(segment in current)) {
+        throw new Error(`OpenAPI ref not found: ${ref}`);
+      }
+      current = current[segment];
+    }
+    return current;
+  }
+
+  private dereferenceSchema(schema: JsonSchema, refs = new Map<string, JsonSchema>()): JsonSchema {
+    if (schema.$ref) {
+      const ref = schema.$ref;
+      if (refs.has(ref)) {
+        return refs.get(ref)!;
+      }
+      const resolved = this.resolveRef(ref);
+      if (!isRecord(resolved)) {
+        throw new Error(`OpenAPI schema ref did not resolve to an object: ${ref}`);
+      }
+      const placeholder: JsonSchema = {};
+      refs.set(ref, placeholder);
+      const dereferenced = this.dereferenceSchema(resolved as JsonSchema, refs);
+      Object.assign(placeholder, dereferenced);
+      const siblings = Object.fromEntries(
+        Object.entries(schema).filter(([key]) => key !== "$ref"),
+      ) as JsonSchema;
+      return Object.keys(siblings).length === 0 ? placeholder : { ...placeholder, ...siblings };
+    }
+
+    const next: JsonSchema = { ...schema };
+    if (schema.properties) {
+      next.properties = Object.fromEntries(
+        Object.entries(schema.properties).map(([key, value]) => [
+          key,
+          this.dereferenceSchema(value, refs),
+        ]),
+      );
+    }
+    if (schema.items) {
+      next.items = this.dereferenceSchema(schema.items, refs);
+    }
+    if (Array.isArray(schema.anyOf)) {
+      next.anyOf = schema.anyOf.map((branch) => this.dereferenceSchema(branch, refs));
+    }
+    if (Array.isArray(schema.oneOf)) {
+      next.oneOf = schema.oneOf.map((branch) => this.dereferenceSchema(branch, refs));
+    }
+    if (isRecord(schema.additionalProperties)) {
+      next.additionalProperties = this.dereferenceSchema(
+        schema.additionalProperties as JsonSchema,
+        refs,
+      );
+    }
+    return next;
+  }
+}
+
+export const readPathParams = (pathValue: Record<string, string>): Record<string, string> =>
+  Object.fromEntries(Object.entries(pathValue).map(([key, value]) => [key, String(value)]));
+
+export const readQueryParams = (url: URL): Record<string, string> =>
+  Object.fromEntries(url.searchParams.entries());
+
+export const readFormBody = (bodyText: string): Record<string, string> =>
+  Object.fromEntries(new URLSearchParams(bodyText).entries());
+
+export const expectJsonObject = (value: unknown): Record<string, unknown> => {
+  if (!isPlainObject(value)) {
+    throw new Error("Expected a JSON object");
+  }
+  return value;
+};
+
+export const normalizeOpenApiPath = (value: string): string => normalizePath(value);
+
+export const assertOperationMatches = (
+  operation: OpenApiIndexedOperation,
+  method: string,
+  path: string,
+): void => {
+  if (operation.method !== method.toUpperCase() || operation.path !== normalizePath(path)) {
+    throw new Error(
+      `OpenAPI operation mismatch for ${operation.operationId}: expected ${operation.method} ${operation.path}, got ${method.toUpperCase()} ${normalizePath(path)}`,
+    );
+  }
+};
diff --git a/packages/fake-caocao-server/src/routes.ts b/packages/fake-caocao-server/src/routes.ts
index f6adef0bc..5291c2f46 100644
--- a/packages/fake-caocao-server/src/routes.ts
+++ b/packages/fake-caocao-server/src/routes.ts
@@ -1,4 +1,5 @@
-import type { IncomingMessage, ServerResponse } from "node:http";
+import { fileURLToPath } from "node:url";
+import { type Context, Hono } from "hono";
 import type { FakeCaocaoFixture } from "./fixtures";
 import {
   bearingDegrees,
@@ -6,6 +7,16 @@ import {
   movementSnapshotFromRoute,
   polylineLengthMeters,
 } from "./movement";
+import {
+  assertOperationMatches,
+  expectJsonObject,
+  OpenApiContract,
+  type OpenApiIndexedOperation,
+  OpenApiValidationError,
+  readFormBody,
+  readPathParams,
+  readQueryParams,
+} from "./openapi";
 import type { FakeCaocaoRouteKind, FakeCaocaoRoutePlanner } from "./route-planning";
 import {
   createFakeCaocaoSignature,
@@ -20,67 +31,105 @@ import type {
   FakeCaocaoState,
   FakeCaocaoVehicleEstimate,
 } from "./state";
-
-export type FakeCaocaoRouteInput = {
-  fixture: FakeCaocaoFixture;
-  routePlanner?: FakeCaocaoRoutePlanner | null;
-  state: FakeCaocaoState;
-  verifyRequests: boolean;
-};
-
-const defaultHeaders = {
+import { FakeCaocaoState as FakeCaocaoStateStore } from "./state";
+
+const providerContract = OpenApiContract.load(
+  fileURLToPath(
+    new URL("../openapi/provider/caocao-provider-minimal.openapi.yaml", import.meta.url),
+  ),
+);
+const controlContract = OpenApiContract.load(
+  fileURLToPath(
+    new URL("../openapi/control/fake-caocao-control.openapi.yaml", import.meta.url),
+  ),
+);
+
+const defaultControlCorsHeaders = {
   "Access-Control-Allow-Headers": "Content-Type",
   "Access-Control-Allow-Methods": "GET,POST,OPTIONS",
   "Access-Control-Allow-Origin": "*",
-  "Content-Type": "application/json; charset=utf-8",
 };
 
-const sendJson = (res: ServerResponse, status: number, value: unknown): void => {
-  res.writeHead(status, defaultHeaders);
-  res.end(JSON.stringify(value));
-};
+const DRIVER_NO = "FAKE_DRIVER_001";
+const DRIVER_NAME = "曹操测试司机";
+const DRIVER_PHONE = "13900139000";
+const VEHICLE_BRAND = "几何";
+const VEHICLE_COLOR = "白色";
+const VEHICLE_PLATE = "浙A·TEST";
+const CALLBACK_INFO_PATTERN =
+  /^pu\.rhc\.v1\.(dev|stg|prod)\.([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})$/i;
+const HANGZHOU_CITY_CODE = "0571";
+const HANGZHOU_CITY_NAME = "杭州市";
+
+const ACTIVE_MOVEMENT_POLL_INTERVAL_SECONDS = 2;
+const ACTIVE_MOVEMENT_TIME_SCALE = 4;
+const ACTIVE_MOVEMENT_MAX_PROGRESS_RATIO = 0.94;
+const PICKUP_SPEED_KPH = 28;
+const IN_TRIP_SPEED_KPH = 36;
 
-const sendHealth = (req: IncomingMessage, res: ServerResponse): void => {
-  res.writeHead(200, defaultHeaders);
-  res.end(req.method === "HEAD" ? undefined : JSON.stringify({ status: "ok" }));
+export type FakeCaocaoServerAppInput = {
+  readonly callbackBaseUrl?: string | null;
+  readonly fixture: FakeCaocaoFixture;
+  readonly routePlanner?: FakeCaocaoRoutePlanner | null;
+  readonly state?: FakeCaocaoState;
+  readonly verifyRequests?: boolean;
 };
 
-const readBodyText = (req: IncomingMessage): Promise<string> =>
-  new Promise((resolve, reject) => {
-    let body = "";
-    req.setEncoding("utf8");
-    req.on("data", (chunk: string) => {
-      body += chunk;
-    });
-    req.on("error", reject);
-    req.on("end", () => resolve(body));
-  });
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  typeof value === "object" && value !== null && !Array.isArray(value);
 
-const formToRecord = (params: URLSearchParams): Record<string, string> => {
-  const record: Record<string, string> = {};
-  for (const [key, value] of params.entries()) {
-    record[key] = value;
+class FakeCaocaoProviderError extends Error {
+  constructor(
+    readonly code: number,
+    message: string,
+  ) {
+    super(message);
   }
-  return record;
-};
+}
 
-const readParams = async (req: IncomingMessage, url: URL): Promise<Record<string, string>> => {
-  if (req.method === "GET") {
-    return formToRecord(url.searchParams);
+class FakeCaocaoControlError extends Error {
+  constructor(
+    readonly code: string,
+    readonly status: number,
+    message: string,
+  ) {
+    super(message);
   }
+}
 
-  const body = await readBodyText(req);
-  if (body.length === 0) return {};
-  const contentType = req.headers["content-type"] ?? "";
-  if (contentType.includes("application/json")) {
-    const parsed = JSON.parse(body) as unknown;
-    if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) {
-      return {};
+type FakeCaocaoCallbackDelivery =
+  | {
+      ok: true;
+      skipped: true;
+      callbackUrl: null;
+      message: string;
     }
-    return Object.fromEntries(Object.entries(parsed).map(([key, value]) => [key, String(value)]));
+  | {
+      ok: true;
+      skipped: false;
+      callbackUrl: string;
+      status: number;
+      statusText: string;
+      bodyPreview: string | null;
+    }
+  | {
+      ok: false;
+      skipped: false;
+      callbackUrl: string;
+      status: number | null;
+      statusText: string | null;
+      message: string;
+      bodyPreview: string | null;
+    };
+
+class FakeCaocaoCallbackDeliveryError extends Error {
+  constructor(
+    readonly delivery: Extract<FakeCaocaoCallbackDelivery, { ok: false }>,
+    readonly order: FakeCaocaoOrderState,
+  ) {
+    super(delivery.message);
   }
-  return formToRecord(new URLSearchParams(body));
-};
+}
 
 const caocaoSuccess = (data: unknown): unknown => ({
   code: 200,
@@ -96,6 +145,66 @@ const caocaoFailure = (code: number, msg: string): unknown => ({
   success: false,
 });
 
+const jsonResponse = (
+  payload: unknown,
+  status: number,
+  headers?: Record<string, string>,
+): Response =>
+  new Response(JSON.stringify(payload), {
+    headers: {
+      "Content-Type": "application/json; charset=utf-8",
+      ...(headers ?? {}),
+    },
+    status,
+  });
+
+const readFirst = (value: Record<string, string>, key: string): string | null => {
+  const raw = value[key]?.trim();
+  return raw && raw.length > 0 ? raw : null;
+};
+
+const parseInteger = (value: string | null, field: string): number => {
+  const parsed = value === null ? Number.NaN : Number(value);
+  if (!Number.isInteger(parsed)) {
+    throw new Error(`Expected integer field ${field}`);
+  }
+  return parsed;
+};
+
+const parseNumber = (value: string | null, field: string): number => {
+  const parsed = value === null ? Number.NaN : Number(value);
+  if (!Number.isFinite(parsed)) {
+    throw new Error(`Expected numeric field ${field}`);
+  }
+  return parsed;
+};
+
+const toCaocaoDateTime = (value: string | null | undefined): string | null => {
+  if (!value) return null;
+  if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/.test(value)) return value;
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return null;
+  const parts = new Intl.DateTimeFormat("en-CA", {
+    day: "2-digit",
+    hour: "2-digit",
+    hourCycle: "h23",
+    minute: "2-digit",
+    month: "2-digit",
+    second: "2-digit",
+    timeZone: "Asia/Shanghai",
+    year: "numeric",
+  })
+    .formatToParts(date)
+    .reduce<Record<string, string>>((acc, part) => {
+      acc[part.type] = part.value;
+      return acc;
+    }, {});
+  return `${parts.year}-${parts.month}-${parts.day} ${parts.hour}:${parts.minute}:${parts.second}`;
+};
+
+const fromIsoToCaocaoDateTime = (value: string | null | undefined): string | null =>
+  value ? toCaocaoDateTime(value) : null;
+
 const verifySignedParams = (input: {
   fixture: FakeCaocaoFixture;
   params: Record<string, string>;
@@ -105,10 +214,10 @@ const verifySignedParams = (input: {
 
   const { sign, ...unsigned } = input.params;
   if (!sign) {
-    throw new Error("Missing Caocao sign");
+    throw new FakeCaocaoProviderError(406, "Missing Caocao sign");
   }
   if (unsigned.client_id !== input.fixture.clientId) {
-    throw new Error("Unexpected Caocao client_id");
+    throw new FakeCaocaoProviderError(406, "Unexpected Caocao client_id");
   }
 
   const expected = createFakeCaocaoSignature({
@@ -116,73 +225,10 @@ const verifySignedParams = (input: {
     signKey: input.fixture.signKey,
   });
   if (!fakeCaocaoSignaturesMatch(expected, sign)) {
-    throw new Error("Fake Caocao request signature verification failed");
+    throw new FakeCaocaoProviderError(406, "Fake Caocao request signature verification failed");
   }
 };
 
-const readFirstParam = (params: Record<string, string>, keys: string[]): string | null => {
-  for (const key of keys) {
-    const value = params[key]?.trim();
-    if (value) return value;
-  }
-  return null;
-};
-
-const readRequiredNumberParam = (params: Record<string, string>, keys: string[]): number => {
-  const raw = readFirstParam(params, keys);
-  const parsed = raw === null ? Number.NaN : Number(raw);
-  if (!Number.isFinite(parsed)) {
-    throw new Error(`Missing numeric fake Caocao parameter: ${keys[0]}`);
-  }
-  return parsed;
-};
-
-const readOptionalNumberParam = (
-  params: Record<string, string>,
-  keys: string[],
-): number | undefined => {
-  const raw = readFirstParam(params, keys);
-  if (raw === null) return undefined;
-  const parsed = Number(raw);
-  if (!Number.isFinite(parsed)) {
-    throw new Error(`Invalid numeric fake Caocao parameter: ${keys[0]}`);
-  }
-  return parsed;
-};
-
-const readRequiredBooleanParam = (params: Record<string, string>, keys: string[]): boolean => {
-  const raw = readFirstParam(params, keys)?.toLowerCase();
-  if (raw === "true" || raw === "1") return true;
-  if (raw === "false" || raw === "0") return false;
-  throw new Error(`Missing boolean fake Caocao parameter: ${keys[0]}`);
-};
-
-const estimatePayload = (estimate: FakeCaocaoVehicleEstimate): unknown => ({
-  carType: estimate.carType,
-  carTypeName: estimate.carTypeName,
-  car_type: estimate.carType,
-  car_type_name: estimate.carTypeName,
-  distance: estimate.distanceMeters,
-  distanceMeters: estimate.distanceMeters,
-  duration: estimate.durationSeconds,
-  durationSeconds: estimate.durationSeconds,
-  estimateAmountFen: estimate.estimateAmountFen,
-  estimatePriceFen: estimate.estimateAmountFen,
-  estimate_price: estimate.estimateAmountFen,
-  price_token: `fake_quote_${estimate.carType}`,
-});
-
-const defaultDriverLocation = (): FakeCaocaoCoordinate => ({
-  latitude: 30.2688,
-  longitude: 120.1608,
-});
-
-const ACTIVE_MOVEMENT_POLL_INTERVAL_SECONDS = 2;
-const ACTIVE_MOVEMENT_TIME_SCALE = 4;
-const ACTIVE_MOVEMENT_MAX_PROGRESS_RATIO = 0.94;
-const PICKUP_SPEED_KPH = 28;
-const IN_TRIP_SPEED_KPH = 36;
-
 const interpolateCoordinate = (
   from: FakeCaocaoCoordinate,
   to: FakeCaocaoCoordinate,
@@ -333,7 +379,10 @@ const movementSnapshot = (
 ): FakeCaocaoMovementSnapshot => {
   if (!order) {
     return stationaryMovementSnapshot({
-      coordinate: defaultDriverLocation(),
+      coordinate: {
+        latitude: 30.2688,
+        longitude: 120.1608,
+      },
       headingDegrees: 0,
     });
   }
@@ -384,56 +433,136 @@ const driverSnapshot = (
 ): FakeCaocaoDriverSnapshot => {
   const snapshot = movementSnapshot(order, plannedRoute);
   return {
-    driverName: "曹操测试司机",
-    driverPhone: "13900139000",
     direction: snapshot.headingDegrees,
+    driverName: DRIVER_NAME,
+    driverPhone: DRIVER_PHONE,
     latitude: snapshot.coordinate.latitude,
     longitude: snapshot.coordinate.longitude,
     speedKph:
       order?.phase === "ACCEPTED" || order?.phase === "IN_TRIP"
         ? order.phase === "IN_TRIP"
-          ? 36
-          : 28
+          ? IN_TRIP_SPEED_KPH
+          : PICKUP_SPEED_KPH
         : 0,
-    vehicleBrand: "几何",
-    vehicleColor: "白色",
-    vehiclePlate: "浙A·TEST",
+    vehicleBrand: VEHICLE_BRAND,
+    vehicleColor: VEHICLE_COLOR,
+    vehiclePlate: VEHICLE_PLATE,
   };
 };
 
-const phaseEvent = (phase: FakeCaocaoOrderState["phase"]): number => {
-  if (phase === "ACCEPTED") return 1;
-  if (phase === "ARRIVED_AT_PICKUP") return 3;
-  if (phase === "IN_TRIP") return 4;
-  if (phase === "FINISHED") return 6;
-  if (phase === "CANCELLED") return 21;
-  return 14;
+const estimatePriceKey = (estimate: FakeCaocaoVehicleEstimate): string =>
+  `fake_quote_${estimate.carType}_${estimate.estimateAmountFen}`;
+
+const estimateDetail = (estimate: FakeCaocaoVehicleEstimate) => {
+  const baseAmount = Math.round(estimate.estimateAmountFen * 0.65);
+  return [
+    {
+      amount: baseAmount,
+      chargeCode: "base_fee",
+      chargeDesc: "基础费",
+    },
+    {
+      amount: estimate.estimateAmountFen - baseAmount,
+      chargeCode: "distance_fee",
+      chargeDesc: "里程费",
+    },
+  ];
 };
 
-const parseOrderPhase = (phase: string | null): FakeCaocaoOrderPhase | null => {
-  if (
-    phase === "CREATED" ||
-    phase === "ACCEPTED" ||
-    phase === "ARRIVED_AT_PICKUP" ||
-    phase === "IN_TRIP" ||
-    phase === "FINISHED" ||
-    phase === "CANCELLED"
-  ) {
-    return phase;
-  }
-  return null;
+const estimatePayload = (estimate: FakeCaocaoVehicleEstimate): unknown => ({
+  carType: Number(estimate.carType),
+  detail: estimateDetail(estimate),
+  distance: estimate.distanceMeters,
+  duration: estimate.durationSeconds,
+  lineType: 0,
+  name: estimate.carTypeName,
+  originPrice: estimate.estimateAmountFen,
+  price: estimate.estimateAmountFen,
+  priceKey: estimatePriceKey(estimate),
+});
+
+const phaseStatusCode = (phase: FakeCaocaoOrderState["phase"]): string => {
+  if (phase === "CREATED") return "1";
+  if (phase === "ACCEPTED") return "9";
+  if (phase === "ARRIVED_AT_PICKUP") return "12";
+  if (phase === "IN_TRIP") return "3";
+  if (phase === "FINISHED") return "5";
+  return "20";
 };
 
-const readOptionalCoordinateParam = (
-  params: Record<string, string>,
-  keys: { latitude: string[]; longitude: string[] },
-): FakeCaocaoCoordinate | null => {
-  const latitudeRaw = readFirstParam(params, keys.latitude);
-  const longitudeRaw = readFirstParam(params, keys.longitude);
-  const latitude = latitudeRaw === null ? Number.NaN : Number(latitudeRaw);
-  const longitude = longitudeRaw === null ? Number.NaN : Number(longitudeRaw);
-  if (!Number.isFinite(latitude) || !Number.isFinite(longitude)) return null;
-  return { latitude, longitude };
+const hasDriverInfo = (order: FakeCaocaoOrderState): boolean =>
+  order.acceptedAt !== null || order.phase === "ACCEPTED" || order.phase === "ARRIVED_AT_PICKUP" || order.phase === "IN_TRIP" || order.phase === "FINISHED";
+
+const queryOrderDetailPayload = (order: FakeCaocaoOrderState): unknown => {
+  const driver = hasDriverInfo(order) ? driverSnapshot(order) : null;
+  return {
+    basicOrderVO: {
+      acceptCPDriver: 0,
+      allowModifyDest: 1,
+      beginChargeTime: fromIsoToCaocaoDateTime(order.serviceStartedAt),
+      callbackInfo: order.callbackInfo,
+      callerPhone: order.callerPhone,
+      cityCode: order.cityCode,
+      departureTime: order.departureTime,
+      endAddress: order.endAddress,
+      endName: order.endName,
+      estimatePrice: order.estimatePriceFen,
+      extOrderId: order.externalOrderId,
+      fromLocation: {
+        lat: order.origin.latitude,
+        lng: order.origin.longitude,
+      },
+      invoiceStatus: 0,
+      invoiced: 0,
+      isRelayOrder: 0,
+      orderId: order.providerOrderId,
+      orderLocation: {
+        lat: order.origin.latitude,
+        lng: order.origin.longitude,
+      },
+      orderTime: fromIsoToCaocaoDateTime(order.createdAt),
+      passengerName: order.passengerName,
+      passengerPhone: order.passengerPhone,
+      preOrderEndFlag: 0,
+      realEndLocation: {
+        lat: order.destination.latitude,
+        lng: order.destination.longitude,
+      },
+      realStartLocation: {
+        lat: order.origin.latitude,
+        lng: order.origin.longitude,
+      },
+      requireLevel: 0,
+      startAddress: order.startAddress,
+      startName: order.startName,
+      startServiceTime: fromIsoToCaocaoDateTime(order.acceptedAt),
+      status: phaseStatusCode(order.phase),
+      toLocation: {
+        lat: order.destination.latitude,
+        lng: order.destination.longitude,
+      },
+      type: order.orderType,
+    },
+    driverInfoVo: driver
+      ? {
+          carBrand: driver.vehicleBrand,
+          carNo: driver.vehiclePlate,
+          color: driver.vehicleColor,
+          driverName: driver.driverName,
+          driverNo: DRIVER_NO,
+          driverPhone: driver.driverPhone,
+          location: {
+            direction: driver.direction,
+            lat: driver.latitude,
+            lng: driver.longitude,
+            speed: driver.speedKph,
+          },
+        }
+      : null,
+    orderFeeVo: {
+      totalFee: order.phase === "FINISHED" ? order.finalAmountFen : null,
+    },
+  };
 };
 
 const routePolyline = (
@@ -453,49 +582,42 @@ const navigationPolylineType = (order: FakeCaocaoOrderState): number => {
   if (order.phase === "ACCEPTED") return 1;
   if (order.phase === "ARRIVED_AT_PICKUP") return 2;
   if (order.phase === "IN_TRIP") return 3;
-  return 2;
-};
-
-const expectedNavigationPolylineRequestType = (order: FakeCaocaoOrderState): number | null => {
-  if (order.phase === "ACCEPTED" || order.phase === "ARRIVED_AT_PICKUP") return 1;
-  if (order.phase === "IN_TRIP") return 3;
-  return null;
-};
-
-const readNavigationPolylineRequestType = (params: Record<string, string>): number | null => {
-  const raw = readFirstParam(params, ["navigation_polyline_type", "navigationPolylineType"]);
-  if (!raw) return null;
-  const parsed = Number(raw);
-  return Number.isInteger(parsed) ? parsed : null;
+  return 0;
 };
 
-const driverLocationPayload = (
+const queryDriverLocationPayload = (
   order: FakeCaocaoOrderState,
   plannedRoute: readonly FakeCaocaoCoordinate[],
 ): unknown => {
   const driver = driverSnapshot(order, plannedRoute);
+  const movement = movementSnapshot(order, plannedRoute);
   return {
     direction: driver.direction,
     latitude: driver.latitude,
     longitude: driver.longitude,
     speed: driver.speedKph,
+    travelKm: Math.max(0, Math.round(movement.remainingDistanceMeters / 1000)),
+    travelMinute: Math.max(0, Math.round(movement.remainingDistanceMeters / 1000 / 0.45)),
   };
 };
 
-const driverPolylinePayload = (
+const queryDriverPolylinePayload = (
   order: FakeCaocaoOrderState,
   plannedRoute: readonly FakeCaocaoCoordinate[],
 ): unknown => {
   const polyline = routePolyline(order, plannedRoute);
   const driver = driverSnapshot(order, plannedRoute);
   const remainingDistanceMeters = Math.round(polylineLengthMeters(polyline));
-  const speedKph = driver.speedKph > 0 ? driver.speedKph : 28;
+  const speedKph = driver.speedKph > 0 ? driver.speedKph : PICKUP_SPEED_KPH;
   const remainingDurationSeconds =
     remainingDistanceMeters > 0 ? Math.round(remainingDistanceMeters / (speedKph / 3.6)) : 0;
   return {
     allLength: remainingDistanceMeters,
     allTime: remainingDurationSeconds,
     driverEtaInfoVO: {
+      curLinkIndex: polyline.length > 0 ? 0 : -1,
+      curPointIndex: polyline.length > 0 ? 0 : -1,
+      curStepIndex: polyline.length > 0 ? 0 : -1,
       direction: driver.direction,
       isMatchNaviPath: 1,
       lat: driver.latitude,
@@ -506,6 +628,7 @@ const driverPolylinePayload = (
       speed: driver.speedKph,
       timestamp: String(Date.now()),
     },
+    driverNo: DRIVER_NO,
     navigationPolylineType: navigationPolylineType(order),
     orderNo: order.providerOrderId,
     pathId: `${order.providerOrderId}-fake-path`,
@@ -513,7 +636,7 @@ const driverPolylinePayload = (
       polyline.length > 0
         ? [
             {
-              length: order.phase === "ACCEPTED" ? 820 : 4300,
+              length: remainingDistanceMeters,
               links: [
                 {
                   coords: formatRouteCoordinates(polyline),
@@ -528,93 +651,35 @@ const driverPolylinePayload = (
   };
 };
 
-const orderDetailPayload = (order: FakeCaocaoOrderState): unknown => {
-  const driver =
-    order.phase === "ACCEPTED" ||
-    order.phase === "ARRIVED_AT_PICKUP" ||
-    order.phase === "IN_TRIP" ||
-    order.phase === "FINISHED"
-      ? driverSnapshot(order)
-      : null;
-  const statusCode =
-    order.phase === "CREATED"
-      ? "1"
-      : order.phase === "ACCEPTED"
-        ? "9"
-        : order.phase === "ARRIVED_AT_PICKUP"
-          ? "12"
-          : order.phase === "IN_TRIP"
-            ? "3"
-            : order.phase === "FINISHED"
-              ? "5"
-              : "20";
-  return {
-    actual_price: order.phase === "FINISHED" ? order.finalAmountFen : null,
-    basicOrderVO: {
-      endName: "Fake Destination",
-      estimatePrice: order.finalAmountFen - 400,
-      extOrderId: order.externalOrderId,
-      fromLocation: {
-        lat: order.origin.latitude,
-        lng: order.origin.longitude,
-      },
-      orderId: order.providerOrderId,
-      startName: "Fake Origin",
-      status: statusCode,
-      toLocation: {
-        lat: order.destination.latitude,
-        lng: order.destination.longitude,
-      },
-    },
-    driver,
-    driverInfoVO: driver
-      ? {
-          carBrand: driver.vehicleBrand,
-          card: driver.vehiclePlate,
-          color: driver.vehicleColor,
-          location: {
-            direction: driver.direction,
-            latitude: driver.latitude,
-            longitude: driver.longitude,
-            speed: driver.speedKph,
-          },
-          name: driver.driverName,
-          phone: driver.driverPhone,
-        }
-      : null,
-    event: phaseEvent(order.phase),
-    ...(order.callbackInfo ? { callback_info: order.callbackInfo } : {}),
-    ext_order_id: order.externalOrderId,
-    finalAmountFen: order.phase === "FINISHED" ? order.finalAmountFen : null,
-    orderFeeVO: {
-      totalFee: order.phase === "FINISHED" ? order.finalAmountFen : null,
-    },
-    orderNo: order.providerOrderId,
-    order_id: order.providerOrderId,
-    phase: order.phase,
-    status: order.phase,
-    vehicle: driver
-      ? {
-          brand: driver.vehicleBrand,
-          color: driver.vehicleColor,
-          plate: driver.vehiclePlate,
-        }
-      : null,
-  };
+const phaseEvent = (phase: FakeCaocaoOrderState["phase"]): number => {
+  if (phase === "ACCEPTED") return 1;
+  if (phase === "ARRIVED_AT_PICKUP") return 3;
+  if (phase === "IN_TRIP") return 4;
+  if (phase === "FINISHED") return 6;
+  if (phase === "CANCELLED") return 21;
+  return 14;
+};
+
+const parseOrderPhase = (phase: string | null): FakeCaocaoOrderPhase | null => {
+  if (
+    phase === "CREATED" ||
+    phase === "ACCEPTED" ||
+    phase === "ARRIVED_AT_PICKUP" ||
+    phase === "IN_TRIP" ||
+    phase === "FINISHED" ||
+    phase === "CANCELLED"
+  ) {
+    return phase;
+  }
+  return null;
 };
 
-const buildCallbackForm = (input: {
+const buildCallbackFormRecord = (input: {
   fixture: FakeCaocaoFixture;
   order: FakeCaocaoOrderState;
   event: number;
-}): URLSearchParams => {
-  const driver =
-    input.order.phase === "ACCEPTED" ||
-    input.order.phase === "ARRIVED_AT_PICKUP" ||
-    input.order.phase === "IN_TRIP" ||
-    input.order.phase === "FINISHED"
-      ? driverSnapshot(input.order)
-      : null;
+}): FakeCaocaoSignedParams => {
+  const driver = hasDriverInfo(input.order) ? driverSnapshot(input.order) : null;
   const unsigned: FakeCaocaoSignedParams = {
     event: String(input.event),
     ...(input.order.callbackInfo ? { callback_info: input.order.callbackInfo } : {}),
@@ -636,54 +701,15 @@ const buildCallbackForm = (input: {
         }
       : {}),
   };
-  return new URLSearchParams({
+  return {
     ...unsigned,
     sign: createFakeCaocaoSignature({
       params: unsigned,
       signKey: input.fixture.signKey,
     }),
-  });
+  };
 };
 
-type FakeCaocaoCallbackDelivery =
-  | {
-      ok: true;
-      skipped: true;
-      callbackUrl: null;
-      message: string;
-    }
-  | {
-      ok: true;
-      skipped: false;
-      callbackUrl: string;
-      status: number;
-      statusText: string;
-      bodyPreview: string | null;
-    }
-  | {
-      ok: false;
-      skipped: false;
-      callbackUrl: string;
-      status: number | null;
-      statusText: string | null;
-      message: string;
-      bodyPreview: string | null;
-    };
-
-class FakeCaocaoCallbackDeliveryError extends Error {
-  readonly delivery: Extract<FakeCaocaoCallbackDelivery, { ok: false }>;
-  readonly order: FakeCaocaoOrderState;
-
-  constructor(
-    delivery: Extract<FakeCaocaoCallbackDelivery, { ok: false }>,
-    order: FakeCaocaoOrderState,
-  ) {
-    super(delivery.message);
-    this.delivery = delivery;
-    this.order = order;
-  }
-}
-
 const readResponseBodyPreview = async (response: Response): Promise<string | null> => {
   const body = await response.text().catch(() => "");
   const trimmed = body.trim();
@@ -696,18 +722,28 @@ const isSuccessfulCallbackAck = (bodyPreview: string | null): boolean => {
   try {
     const parsed = JSON.parse(bodyPreview) as unknown;
     return (
-      typeof parsed === "object" &&
-      parsed !== null &&
-      "code" in parsed &&
-      "success" in parsed &&
-      (parsed as { code: unknown }).code === 200 &&
-      (parsed as { success: unknown }).success === true
+      isRecord(parsed) &&
+      parsed.code === 200 &&
+      parsed.success === true
     );
   } catch {
     return false;
   }
 };
 
+const resolveCallbackUrl = (input: {
+  callbackBaseUrl?: string | null;
+  callbackInfo: string | null;
+}): string | null => {
+  if (!input.callbackBaseUrl || !input.callbackInfo) return null;
+  const match = CALLBACK_INFO_PATTERN.exec(input.callbackInfo);
+  if (!match?.[2]) return null;
+  return new URL(
+    `/api/ride-hailing/caocao/${match[2]}/callback/order-status`,
+    input.callbackBaseUrl,
+  ).toString();
+};
+
 const postCallback = async (input: {
   callbackUrl: string;
   fixture: FakeCaocaoFixture;
@@ -715,8 +751,10 @@ const postCallback = async (input: {
   event: number;
 }): Promise<FakeCaocaoCallbackDelivery> => {
   try {
+    const formRecord = buildCallbackFormRecord(input);
+    providerContract.validateBody("notifyOrderStatus", formRecord);
     const response = await fetch(input.callbackUrl, {
-      body: buildCallbackForm(input).toString(),
+      body: new URLSearchParams(formRecord).toString(),
       headers: {
         "Content-Type": "application/x-www-form-urlencoded",
       },
@@ -786,17 +824,16 @@ const assertCallbackDelivered = (
 };
 
 const maybePostCreateCallback = (input: {
-  callbackUrl: string | null;
   fixture: FakeCaocaoFixture;
   order: FakeCaocaoOrderState;
   state: FakeCaocaoState;
 }): void => {
-  if (!input.callbackUrl) return;
+  if (!input.order.callbackUrl) return;
   const acceptedOrder = input.state.setOrderPhase(input.order.providerOrderId, "ACCEPTED");
   if (!acceptedOrder) return;
   setTimeout(() => {
     postCallback({
-      callbackUrl: input.callbackUrl!,
+      callbackUrl: input.order.callbackUrl!,
       event: phaseEvent(acceptedOrder.phase),
       fixture: input.fixture,
       order: acceptedOrder,
@@ -804,395 +841,718 @@ const maybePostCreateCallback = (input: {
   }, 0);
 };
 
-export async function handleFakeCaocaoRequest(
-  req: IncomingMessage,
-  res: ServerResponse,
-  input: FakeCaocaoRouteInput,
-): Promise<void> {
-  if (req.method === "OPTIONS") {
-    res.writeHead(204, defaultHeaders);
-    res.end();
-    return;
+const providerJson = (
+  c: Context,
+  operationId: string,
+  payload: unknown,
+): Response => {
+  providerContract.validateResponse(operationId, 200, payload);
+  return c.json(payload, 200);
+};
+
+const controlJson = (
+  c: Context,
+  operationId: string,
+  payload: unknown,
+): Response => {
+  controlContract.validateResponse(operationId, 200, payload);
+  return c.json(payload, 200);
+};
+
+const parseProviderRequest = async (
+  c: Context,
+  operation: OpenApiIndexedOperation,
+): Promise<{
+  body: Record<string, string> | Record<string, unknown>;
+  path: Record<string, string>;
+  query: Record<string, string>;
+  signedParams: Record<string, string>;
+}> => {
+  const url = new URL(c.req.url);
+  const path = providerContract.validatePath(operation.operationId, readPathParams(c.req.param()));
+  const query = providerContract.validateQuery(operation.operationId, readQueryParams(url));
+  if (!operation.requestBody) {
+    return {
+      body: {},
+      path,
+      query,
+      signedParams: query,
+    };
   }
 
-  const host = req.headers.host ?? "127.0.0.1";
-  const url = new URL(req.url ?? "/", `http://${host}`);
+  if (operation.requestBody.contentType === "application/x-www-form-urlencoded") {
+    const bodyText = await c.req.text();
+    const form = providerContract.validateBody(operation.operationId, readFormBody(bodyText)) as Record<
+      string,
+      string
+    >;
+    return {
+      body: form,
+      path,
+      query,
+      signedParams: form,
+    };
+  }
 
-  try {
-    if (url.pathname === "/health" && (req.method === "GET" || req.method === "HEAD")) {
-      sendHealth(req, res);
-      return;
-    }
+  const json = providerContract.validateBody(
+    operation.operationId,
+    expectJsonObject(await c.req.json()),
+  ) as Record<string, unknown>;
+  return {
+    body: json,
+    path,
+    query,
+    signedParams: {},
+  };
+};
 
-    if (url.pathname === "/__fake_caocao/reset" && req.method === "POST") {
-      await readBodyText(req);
-      input.state.reset();
-      sendJson(res, 200, { ok: true });
-      return;
-    }
+const parseControlRequest = async (
+  c: Context,
+  operation: OpenApiIndexedOperation,
+): Promise<{
+  body: Record<string, string> | Record<string, unknown>;
+  path: Record<string, string>;
+  query: Record<string, string>;
+}> => {
+  const url = new URL(c.req.url);
+  const path = controlContract.validatePath(operation.operationId, readPathParams(c.req.param()));
+  const query = controlContract.validateQuery(operation.operationId, readQueryParams(url));
+  if (!operation.requestBody) {
+    return {
+      body: {},
+      path,
+      query,
+    };
+  }
 
-    if (url.pathname === "/__fake_caocao/create-failure/next" && req.method === "POST") {
-      await readBodyText(req);
-      input.state.configureNextCreateFailure();
-      sendJson(res, 200, { ok: true });
-      return;
-    }
+  if (operation.requestBody.contentType === "application/json") {
+    const body = controlContract.validateBody(
+      operation.operationId,
+      expectJsonObject(await c.req.json()),
+    ) as Record<string, unknown>;
+    return {
+      body,
+      path,
+      query,
+    };
+  }
 
-    if (url.pathname === "/__fake_caocao/estimates" && req.method === "POST") {
-      const params = await readParams(req, url);
-      const carType = readFirstParam(params, ["carType", "car_type"]);
-      if (!carType) {
-        throw new Error("Missing fake Caocao car type");
-      }
-      const estimate = input.state.updateEstimate({
-        carType,
-        carTypeName: readFirstParam(params, ["carTypeName", "car_type_name"]) ?? undefined,
-        distanceMeters: readOptionalNumberParam(params, ["distanceMeters", "distance"]),
-        durationSeconds: readOptionalNumberParam(params, ["durationSeconds", "duration"]),
-        estimateAmountFen: readRequiredNumberParam(params, [
-          "estimateAmountFen",
-          "estimatePriceFen",
-          "estimate_price",
-        ]),
+  const bodyText = await c.req.text();
+  const body = controlContract.validateBody(
+    operation.operationId,
+    readFormBody(bodyText),
+  ) as Record<string, string>;
+  return {
+    body,
+    path,
+    query,
+  };
+};
+
+const providerRoute =
+  (
+    operationId: string,
+    path: string,
+    handler: (input: {
+      body: Record<string, string> | Record<string, unknown>;
+      path: Record<string, string>;
+      query: Record<string, string>;
+    }) => Promise<unknown>,
+    input: Required<Pick<FakeCaocaoServerAppInput, "fixture" | "verifyRequests">>,
+  ) =>
+  async (c: Context): Promise<Response> => {
+    const operation = providerContract.getOperation(operationId);
+    assertOperationMatches(operation, c.req.method, path);
+    try {
+      const request = await parseProviderRequest(c, operation);
+      verifySignedParams({
+        fixture: input.fixture,
+        params: request.signedParams,
+        verifyRequests: input.verifyRequests,
       });
-      sendJson(res, 200, { estimate, ok: true });
-      return;
+      const payload = await handler(request);
+      return providerJson(c, operationId, payload);
+    } catch (error) {
+      if (error instanceof FakeCaocaoProviderError) {
+        return c.json(caocaoFailure(error.code, error.message), 200);
+      }
+      if (error instanceof OpenApiValidationError) {
+        return c.json(caocaoFailure(40001, error.issues.join("; ")), 200);
+      }
+      return c.json(
+        caocaoFailure(40001, error instanceof Error ? error.message : "Unknown fake error"),
+        200,
+      );
     }
+  };
 
-    if (url.pathname === "/__fake_caocao/estimates/availability" && req.method === "POST") {
-      const params = await readParams(req, url);
-      const carType = readFirstParam(params, ["carType", "car_type"]);
-      if (!carType) {
-        throw new Error("Missing fake Caocao car type");
+const controlRoute =
+  (
+    operationId: string,
+    path: string,
+    handler: (input: {
+      body: Record<string, string> | Record<string, unknown>;
+      path: Record<string, string>;
+      query: Record<string, string>;
+    }) => Promise<unknown>,
+  ) =>
+  async (c: Context): Promise<Response> => {
+    const operation = controlContract.getOperation(operationId);
+    assertOperationMatches(operation, c.req.method, path);
+    try {
+      const request = await parseControlRequest(c, operation);
+      const payload = await handler(request);
+      return controlJson(c, operationId, payload);
+    } catch (error) {
+      if (error instanceof FakeCaocaoCallbackDeliveryError) {
+        return jsonResponse(
+          {
+            callback: error.delivery,
+            code: "FAKE_CAOCAO_CALLBACK_DELIVERY_FAILED",
+            message: error.message,
+            order: error.order,
+          },
+          502,
+        );
       }
-      const estimate = input.state.setEstimateAvailability({
-        carType,
-        available: readRequiredBooleanParam(params, ["available"]),
-      });
-      sendJson(res, 200, { estimate, ok: true });
-      return;
+      if (error instanceof FakeCaocaoControlError) {
+        return jsonResponse(
+          {
+            code: error.code,
+            message: error.message,
+          },
+          error.status,
+        );
+      }
+      if (error instanceof OpenApiValidationError) {
+        return jsonResponse(
+          {
+            code: "FAKE_CAOCAO_CONTROL_VALIDATION_FAILED",
+            message: error.issues.join("; "),
+          },
+          400,
+        );
+      }
+      return jsonResponse(
+        {
+          code: "FAKE_CAOCAO_ERROR",
+          message: error instanceof Error ? error.message : "Unknown fake error",
+        },
+        400,
+      );
     }
+  };
 
-    if (url.pathname === "/__fake_caocao/state" && req.method === "GET") {
-      sendJson(res, 200, input.state.snapshot());
-      return;
-    }
+export function createFakeCaocaoApp(input: FakeCaocaoServerAppInput): Hono {
+  const state = input.state ?? new FakeCaocaoStateStore();
+  const verifyRequests = input.verifyRequests ?? true;
+  const app = new Hono();
 
-    if (url.pathname === "/__fake_caocao/orders/latest/advance" && req.method === "POST") {
-      await readBodyText(req);
-      const order = input.state.advanceLatestNonTerminalOrder();
-      if (!order) {
-        sendJson(res, 404, {
-          code: "FAKE_CAOCAO_ORDER_NOT_FOUND",
-          message: "No non-terminal fake Caocao order found",
-        });
-        return;
-      }
-      const callback = await postOrderPhaseCallback({
-        fixture: input.fixture,
-        order,
+  app.use("/__fake_caocao/*", async (c, next) => {
+    if (c.req.method === "OPTIONS") {
+      return new Response(null, {
+        headers: defaultControlCorsHeaders,
+        status: 204,
       });
-      assertCallbackDelivered(callback, order);
-      sendJson(res, 200, { callback, ok: true, order });
-      return;
     }
+    await next();
+    for (const [key, value] of Object.entries(defaultControlCorsHeaders)) {
+      c.res.headers.set(key, value);
+    }
+  });
+
+  app.get("/health", (c) => c.json({ status: "ok" }));
+
+  app.get(
+    "/common/queryCity",
+    providerRoute(
+      "queryCity",
+      "/common/queryCity",
+      async () =>
+        caocaoSuccess({
+          city_code: HANGZHOU_CITY_CODE,
+          city_name: HANGZHOU_CITY_NAME,
+        }),
+      {
+        fixture: input.fixture,
+        verifyRequests,
+      },
+    ),
+  );
 
-    if (url.pathname === "/__fake_caocao/orders/latest/retreat" && req.method === "POST") {
-      await readBodyText(req);
-      const order = input.state.retreatLatestOrder();
-      if (!order) {
-        sendJson(res, 404, {
-          code: "FAKE_CAOCAO_ORDER_NOT_FOUND",
-          message: "No retreatable fake Caocao order found",
+  app.get(
+    "/common/estimatePriceWithDetail",
+    providerRoute(
+      "estimatePriceWithDetail",
+      "/common/estimatePriceWithDetail",
+      async ({ query }) => {
+        const carType = readFirst(query, "car_type");
+        if (!carType) {
+          throw new FakeCaocaoProviderError(40001, "Missing car_type");
+        }
+        const estimate = state.findAvailableEstimate(carType);
+        if (!estimate) {
+          throw new FakeCaocaoProviderError(47001, "Fake Caocao vehicle unavailable");
+        }
+        return caocaoSuccess(estimatePayload(estimate));
+      },
+      {
+        fixture: input.fixture,
+        verifyRequests,
+      },
+    ),
+  );
+
+  app.post(
+    "/common/orderCarV2",
+    providerRoute(
+      "orderCarV2",
+      "/common/orderCarV2",
+      async ({ body }) => {
+        const form = body as Record<string, string>;
+        if (state.consumeNextCreateFailure()) {
+          throw new FakeCaocaoProviderError(50001, "Fake Caocao create failed");
+        }
+
+        const carType = readFirst(form, "car_type");
+        const externalOrderId = readFirst(form, "ext_order_id");
+        if (!carType || !externalOrderId) {
+          throw new FakeCaocaoProviderError(40001, "Missing create order payload");
+        }
+        const callbackInfo = readFirst(form, "callback_info");
+        const callbackUrl = resolveCallbackUrl({
+          callbackBaseUrl: input.callbackBaseUrl,
+          callbackInfo,
         });
-        return;
-      }
-      const callback = await postOrderPhaseCallback({
+        const order = state.createOrder({
+          callbackInfo,
+          callbackUrl,
+          callerPhone: readFirst(form, "caller_phone"),
+          carType,
+          cityCode: readFirst(form, "city_code"),
+          departureTime: readFirst(form, "departure_time"),
+          destination: {
+            latitude: parseNumber(readFirst(form, "to_latitude"), "to_latitude"),
+            longitude: parseNumber(readFirst(form, "to_longitude"), "to_longitude"),
+          },
+          endAddress: readFirst(form, "end_address"),
+          endName: readFirst(form, "end_name"),
+          estimatePriceFen: parseInteger(readFirst(form, "estimate_price"), "estimate_price"),
+          externalOrderId,
+          orderType: parseInteger(readFirst(form, "order_type"), "order_type"),
+          origin: {
+            latitude: parseNumber(readFirst(form, "from_latitude"), "from_latitude"),
+            longitude: parseNumber(readFirst(form, "from_longitude"), "from_longitude"),
+          },
+          passengerName: readFirst(form, "passenger_name"),
+          passengerPhone: readFirst(form, "passenger_phone") ?? readFirst(form, "caller_phone"),
+          startAddress: readFirst(form, "start_address"),
+          startName: readFirst(form, "start_name"),
+        });
+        maybePostCreateCallback({
+          fixture: input.fixture,
+          order,
+          state,
+        });
+        return caocaoSuccess({
+          orderNo: order.providerOrderId,
+        });
+      },
+      {
         fixture: input.fixture,
-        order,
-      });
-      assertCallbackDelivered(callback, order);
-      sendJson(res, 200, { callback, ok: true, order });
-      return;
-    }
+        verifyRequests,
+      },
+    ),
+  );
+
+  app.get(
+    "/common/queryOrderDetailV2",
+    providerRoute(
+      "queryOrderDetailV2",
+      "/common/queryOrderDetailV2",
+      async ({ query }) => {
+        const providerOrderId = readFirst(query, "order_id");
+        const order = providerOrderId ? state.findOrder(providerOrderId) : null;
+        if (!order) {
+          throw new FakeCaocaoProviderError(40401, "Fake Caocao order not found");
+        }
+        return caocaoSuccess(queryOrderDetailPayload(order));
+      },
+      {
+        fixture: input.fixture,
+        verifyRequests,
+      },
+    ),
+  );
 
-    const orderAdvanceMatch = url.pathname.match(/^\/__fake_caocao\/orders\/([^/]+)\/advance$/);
-    if (orderAdvanceMatch && req.method === "POST") {
-      await readBodyText(req);
-      const order = input.state.advanceOrderPhase(decodeURIComponent(orderAdvanceMatch[1]!));
-      if (!order) {
-        sendJson(res, 404, {
-          code: "FAKE_CAOCAO_ORDER_NOT_FOUND",
-          message: "Fake Caocao order not found",
+  app.get(
+    "/common/queryDriverLocationByOrderId",
+    providerRoute(
+      "queryDriverLocationByOrderId",
+      "/common/queryDriverLocationByOrderId",
+      async ({ query }) => {
+        const providerOrderId = readFirst(query, "order_id");
+        const order = providerOrderId ? state.findOrder(providerOrderId) : null;
+        if (!order) {
+          throw new FakeCaocaoProviderError(40401, "Fake Caocao order not found");
+        }
+        const plannedRoute = await resolveMovementRoute({
+          order,
+          routeKind: movementRouteKind(order),
+          routePlanner: input.routePlanner,
+          state,
         });
-        return;
-      }
-      const callback = await postOrderPhaseCallback({
+        return caocaoSuccess(queryDriverLocationPayload(order, plannedRoute));
+      },
+      {
         fixture: input.fixture,
-        order,
-      });
-      assertCallbackDelivered(callback, order);
-      sendJson(res, 200, { callback, ok: true, order });
-      return;
-    }
+        verifyRequests,
+      },
+    ),
+  );
 
-    const orderRetreatMatch = url.pathname.match(/^\/__fake_caocao\/orders\/([^/]+)\/retreat$/);
-    if (orderRetreatMatch && req.method === "POST") {
-      await readBodyText(req);
-      const providerOrderId = decodeURIComponent(orderRetreatMatch[1]!);
-      const existingOrder = input.state.findOrder(providerOrderId);
-      if (!existingOrder) {
-        sendJson(res, 404, {
-          code: "FAKE_CAOCAO_ORDER_NOT_FOUND",
-          message: "Fake Caocao order not found",
+  app.post(
+    "/common/queryDriverPolylineV2",
+    providerRoute(
+      "queryDriverPolylineV2",
+      "/common/queryDriverPolylineV2",
+      async ({ body }) => {
+        const form = body as Record<string, string>;
+        const providerOrderId = readFirst(form, "order_id");
+        const order = providerOrderId ? state.findOrder(providerOrderId) : null;
+        if (!order) {
+          throw new FakeCaocaoProviderError(40401, "Fake Caocao order not found");
+        }
+        const plannedRoute = await resolveMovementRoute({
+          order,
+          routeKind: movementRouteKind(order),
+          routePlanner: input.routePlanner,
+          state,
         });
-        return;
-      }
-      const order = input.state.retreatOrderPhase(providerOrderId);
-      if (!order) {
-        sendJson(res, 409, {
-          code: "FAKE_CAOCAO_ORDER_PHASE_NOT_RETREATABLE",
-          message: `Fake Caocao order phase cannot retreat: ${existingOrder.phase}`,
+        const payload = queryDriverPolylinePayload(order, plannedRoute);
+        if (order.phase === "ACCEPTED" || order.phase === "IN_TRIP") {
+          state.advanceOrderMovement(order.providerOrderId);
+        }
+        return caocaoSuccess(payload);
+      },
+      {
+        fixture: input.fixture,
+        verifyRequests,
+      },
+    ),
+  );
+
+  app.post(
+    "/common/cancelOrderV3",
+    providerRoute(
+      "cancelOrderV3",
+      "/common/cancelOrderV3",
+      async ({ body }) => {
+        const form = body as Record<string, string>;
+        const providerOrderId = readFirst(form, "order_id");
+        const order = providerOrderId ? state.cancelOrder(providerOrderId) : null;
+        if (!order) {
+          throw new FakeCaocaoProviderError(40401, "Fake Caocao order not found");
+        }
+        return caocaoSuccess({
+          cancelFee: order.cancelFeeFen,
+          orderNo: order.providerOrderId,
         });
-        return;
-      }
-      const callback = await postOrderPhaseCallback({
+      },
+      {
         fixture: input.fixture,
-        order,
-      });
-      assertCallbackDelivered(callback, order);
-      sendJson(res, 200, { callback, ok: true, order });
-      return;
-    }
+        verifyRequests,
+      },
+    ),
+  );
 
-    const orderPhaseMatch = url.pathname.match(/^\/__fake_caocao\/orders\/([^/]+)\/phase$/);
-    if (orderPhaseMatch && req.method === "POST") {
-      const phaseParams = await readParams(req, url);
-      const phase = parseOrderPhase(readFirstParam(phaseParams, ["phase"]));
-      if (!phase) {
-        sendJson(res, 400, {
-          code: "FAKE_CAOCAO_UNSUPPORTED_ORDER_PHASE",
-          message: "Unsupported fake Caocao order phase",
+  app.get(
+    "/common/queryCancelFee",
+    providerRoute(
+      "queryCancelFee",
+      "/common/queryCancelFee",
+      async ({ query }) => {
+        const providerOrderId = readFirst(query, "order_no");
+        const order = providerOrderId ? state.findOrder(providerOrderId) : null;
+        if (!order) {
+          throw new FakeCaocaoProviderError(40401, "Fake Caocao order not found");
+        }
+        return caocaoSuccess({
+          cancelFee: order.cancelFeeFen,
+          orderNo: order.providerOrderId,
         });
-        return;
-      }
-      const order = input.state.setOrderPhase(decodeURIComponent(orderPhaseMatch[1]!), phase);
-      if (!order) {
-        sendJson(res, 404, {
-          code: "FAKE_CAOCAO_ORDER_NOT_FOUND",
-          message: "Fake Caocao order not found",
+      },
+      {
+        fixture: input.fixture,
+        verifyRequests,
+      },
+    ),
+  );
+
+  app.post(
+    "/common/feeConfirm",
+    providerRoute(
+      "feeConfirm",
+      "/common/feeConfirm",
+      async ({ body }) => {
+        const form = body as Record<string, string>;
+        const providerOrderId = readFirst(form, "order_id");
+        if (!providerOrderId) {
+          throw new FakeCaocaoProviderError(40001, "Missing order_id");
+        }
+        state.confirmFee({
+          allowanceAmountFen: parseInteger(readFirst(form, "allowance_amount"), "allowance_amount"),
+          caocaoAllowanceAmountFen: parseInteger(
+            readFirst(form, "cao_allowance_amount"),
+            "cao_allowance_amount",
+          ),
+          providerOrderId,
         });
-        return;
-      }
-      const callback = await postOrderPhaseCallback({
+        return caocaoSuccess(null);
+      },
+      {
         fixture: input.fixture,
-        order,
-      });
-      assertCallbackDelivered(callback, order);
-      sendJson(res, 200, { callback, ok: true, order });
-      return;
-    }
+        verifyRequests,
+      },
+    ),
+  );
 
-    const params = await readParams(req, url);
-    verifySignedParams({
-      fixture: input.fixture,
-      params,
-      verifyRequests: input.verifyRequests,
-    });
+  app.post(
+    "/__fake_caocao/reset",
+    controlRoute("controlReset", "/__fake_caocao/reset", async () => {
+      state.reset();
+      return {
+        ok: true,
+      };
+    }),
+  );
 
-    if (url.pathname === "/common/estimatePriceWithDetail") {
-      const carType = readFirstParam(params, ["car_type", "carType", "vehicle_type"]) ?? "EXPRESS";
-      const estimate = input.state.findAvailableEstimate(carType);
-      if (!estimate) {
-        sendJson(res, 200, caocaoFailure(47001, "Fake Caocao vehicle unavailable"));
-        return;
-      }
-      sendJson(res, 200, caocaoSuccess(estimatePayload(estimate)));
-      return;
-    }
+  app.post(
+    "/__fake_caocao/create-failure/next",
+    controlRoute(
+      "controlNextCreateFailure",
+      "/__fake_caocao/create-failure/next",
+      async () => {
+        state.configureNextCreateFailure();
+        return {
+          ok: true,
+        };
+      },
+    ),
+  );
 
-    if (url.pathname === "/common/orderCarV2" && req.method === "POST") {
-      if (input.state.consumeNextCreateFailure()) {
-        sendJson(res, 200, caocaoFailure(50001, "Fake Caocao create failed"));
-        return;
-      }
+  app.post(
+    "/__fake_caocao/estimates",
+    controlRoute(
+      "controlUpdateEstimate",
+      "/__fake_caocao/estimates",
+      async ({ body }) => {
+        const json = body as Record<string, unknown>;
+        const estimate = state.updateEstimate({
+          carType: String(json.carType),
+          carTypeName: typeof json.carTypeName === "string" ? json.carTypeName : undefined,
+          distanceMeters: typeof json.distanceMeters === "number" ? json.distanceMeters : undefined,
+          durationSeconds:
+            typeof json.durationSeconds === "number" ? json.durationSeconds : undefined,
+          estimateAmountFen: Number(json.estimateAmountFen),
+        });
+        return {
+          estimate,
+          ok: true,
+        };
+      },
+    ),
+  );
 
-      const externalOrderId = readFirstParam(params, ["ext_order_id"]);
-      if (!externalOrderId) {
-        sendJson(res, 200, caocaoFailure(40001, "Missing ext_order_id"));
-        return;
-      }
-      const carType = readFirstParam(params, ["car_type", "carType", "vehicle_type"]) ?? "EXPRESS";
-      const callbackUrl = readFirstParam(params, [
-        "callback_url",
-        "callbackUrl",
-        "notify_url",
-        "notifyUrl",
-        "order_status_callback_url",
-      ]);
-      const callbackInfo = readFirstParam(params, ["callback_info", "callbackInfo"]);
-      const order = input.state.createOrder({
-        callbackInfo,
-        callbackUrl,
-        carType,
-        destination: readOptionalCoordinateParam(params, {
-          latitude: ["tlat", "to_lat", "toLatitude"],
-          longitude: ["tlng", "to_lng", "toLongitude"],
-        }),
-        externalOrderId,
-        origin: readOptionalCoordinateParam(params, {
-          latitude: ["flat", "from_lat", "fromLatitude"],
-          longitude: ["flng", "from_lng", "fromLongitude"],
-        }),
-      });
-      maybePostCreateCallback({
-        callbackUrl,
-        fixture: input.fixture,
-        order,
-        state: input.state,
-      });
-      sendJson(
-        res,
-        200,
-        caocaoSuccess({
-          ext_order_id: order.externalOrderId,
-          orderNo: order.providerOrderId,
-          order_id: order.providerOrderId,
-        }),
-      );
-      return;
-    }
+  app.post(
+    "/__fake_caocao/estimates/availability",
+    controlRoute(
+      "controlEstimateAvailability",
+      "/__fake_caocao/estimates/availability",
+      async ({ body }) => {
+        const json = body as Record<string, unknown>;
+        const estimate = state.setEstimateAvailability({
+          available: Boolean(json.available),
+          carType: String(json.carType),
+        });
+        return {
+          estimate,
+          ok: true,
+        };
+      },
+    ),
+  );
 
-    if (url.pathname === "/common/queryOrderDetailV2") {
-      const providerOrderId = readFirstParam(params, ["order_id", "order_no"]);
-      const order = providerOrderId ? input.state.findOrder(providerOrderId) : null;
-      sendJson(
-        res,
-        200,
-        order
-          ? caocaoSuccess(orderDetailPayload(order))
-          : caocaoFailure(40401, "Fake Caocao order not found"),
-      );
-      return;
-    }
+  app.get(
+    "/__fake_caocao/state",
+    controlRoute("controlState", "/__fake_caocao/state", async () => state.snapshot()),
+  );
 
-    if (url.pathname === "/common/queryDriverLocationByOrderId") {
-      const providerOrderId = readFirstParam(params, ["order_id", "order_no"]);
-      const order = providerOrderId ? input.state.findOrder(providerOrderId) : null;
-      const plannedRoute = order
-        ? await resolveMovementRoute({
-            order,
-            routeKind: movementRouteKind(order),
-            routePlanner: input.routePlanner,
-            state: input.state,
-          })
-        : null;
-      sendJson(
-        res,
-        200,
-        order
-          ? caocaoSuccess(driverLocationPayload(order, plannedRoute ?? fallbackPickupRoute(order)))
-          : caocaoFailure(40401, "Fake Caocao order not found"),
-      );
-      return;
-    }
+  app.post(
+    "/__fake_caocao/orders/latest/advance",
+    controlRoute(
+      "controlAdvanceLatestOrder",
+      "/__fake_caocao/orders/latest/advance",
+      async () => {
+        const order = state.advanceLatestNonTerminalOrder();
+        if (!order) {
+          throw new FakeCaocaoControlError(
+            "FAKE_CAOCAO_ORDER_NOT_FOUND",
+            404,
+            "No non-terminal fake Caocao order found",
+          );
+        }
+        const callback = await postOrderPhaseCallback({
+          fixture: input.fixture,
+          order,
+        });
+        assertCallbackDelivered(callback, order);
+        return {
+          callback,
+          ok: true,
+          order,
+        };
+      },
+    ),
+  );
 
-    if (url.pathname === "/common/queryDriverPolylineV2" && req.method === "POST") {
-      const providerOrderId = readFirstParam(params, ["order_id", "order_no"]);
-      const order = providerOrderId ? input.state.findOrder(providerOrderId) : null;
-      const requestedRouteType = readNavigationPolylineRequestType(params);
-      const expectedRouteType = order ? expectedNavigationPolylineRequestType(order) : null;
-      if (!order) {
-        sendJson(res, 200, caocaoFailure(40401, "Fake Caocao order not found"));
-        return;
-      }
-      if (requestedRouteType === null) {
-        sendJson(res, 200, caocaoFailure(40001, "Missing fake Caocao navigation_polyline_type"));
-        return;
-      }
-      if (expectedRouteType === null || requestedRouteType !== expectedRouteType) {
-        sendJson(res, 200, caocaoFailure(40002, "Unexpected fake Caocao navigation_polyline_type"));
-        return;
-      }
+  app.post(
+    "/__fake_caocao/orders/latest/retreat",
+    controlRoute(
+      "controlRetreatLatestOrder",
+      "/__fake_caocao/orders/latest/retreat",
+      async () => {
+        const order = state.retreatLatestOrder();
+        if (!order) {
+          throw new FakeCaocaoControlError(
+            "FAKE_CAOCAO_ORDER_NOT_FOUND",
+            404,
+            "No retreatable fake Caocao order found",
+          );
+        }
+        const callback = await postOrderPhaseCallback({
+          fixture: input.fixture,
+          order,
+        });
+        assertCallbackDelivered(callback, order);
+        return {
+          callback,
+          ok: true,
+          order,
+        };
+      },
+    ),
+  );
 
-      const routeKind = movementRouteKind(order);
-      const plannedRoute = await resolveMovementRoute({
-        order,
-        routeKind,
-        routePlanner: input.routePlanner,
-        state: input.state,
-      });
-      sendJson(res, 200, caocaoSuccess(driverPolylinePayload(order, plannedRoute)));
-      if (order.phase === "ACCEPTED" || order.phase === "IN_TRIP") {
-        input.state.advanceOrderMovement(order.providerOrderId);
-      }
-      return;
-    }
+  app.post(
+    "/__fake_caocao/orders/:providerOrderId/advance",
+    controlRoute(
+      "controlAdvanceOrder",
+      "/__fake_caocao/orders/:providerOrderId/advance",
+      async ({ path }) => {
+        const order = state.advanceOrderPhase(path.providerOrderId);
+        if (!order) {
+          throw new FakeCaocaoControlError(
+            "FAKE_CAOCAO_ORDER_NOT_FOUND",
+            404,
+            "Fake Caocao order not found",
+          );
+        }
+        const callback = await postOrderPhaseCallback({
+          fixture: input.fixture,
+          order,
+        });
+        assertCallbackDelivered(callback, order);
+        return {
+          callback,
+          ok: true,
+          order,
+        };
+      },
+    ),
+  );
 
-    if (url.pathname === "/common/queryCancelFee") {
-      const providerOrderId = readFirstParam(params, ["order_no", "order_id"]);
-      const order = providerOrderId ? input.state.findOrder(providerOrderId) : null;
-      sendJson(
-        res,
-        200,
-        order
-          ? caocaoSuccess({
-              cancelFee: order.cancelFeeFen,
-              orderNo: order.providerOrderId,
-            })
-          : caocaoFailure(40401, "Fake Caocao order not found"),
-      );
-      return;
-    }
+  app.post(
+    "/__fake_caocao/orders/:providerOrderId/retreat",
+    controlRoute(
+      "controlRetreatOrder",
+      "/__fake_caocao/orders/:providerOrderId/retreat",
+      async ({ path }) => {
+        const existingOrder = state.findOrder(path.providerOrderId);
+        if (!existingOrder) {
+          throw new FakeCaocaoControlError(
+            "FAKE_CAOCAO_ORDER_NOT_FOUND",
+            404,
+            "Fake Caocao order not found",
+          );
+        }
+        const order = state.retreatOrderPhase(path.providerOrderId);
+        if (!order) {
+          throw new FakeCaocaoControlError(
+            "FAKE_CAOCAO_ORDER_PHASE_NOT_RETREATABLE",
+            409,
+            `Fake Caocao order phase cannot retreat: ${existingOrder.phase}`,
+          );
+        }
+        const callback = await postOrderPhaseCallback({
+          fixture: input.fixture,
+          order,
+        });
+        assertCallbackDelivered(callback, order);
+        return {
+          callback,
+          ok: true,
+          order,
+        };
+      },
+    ),
+  );
 
-    if (url.pathname === "/common/cancelOrderV3" && req.method === "POST") {
-      const providerOrderId = readFirstParam(params, ["order_id", "order_no"]);
-      const order = providerOrderId ? input.state.cancelOrder(providerOrderId) : null;
-      sendJson(
-        res,
-        200,
-        order
-          ? caocaoSuccess({
-              cancelFee: order.cancelFeeFen,
-              orderNo: order.providerOrderId,
-            })
-          : caocaoFailure(40401, "Fake Caocao order not found"),
-      );
-      return;
-    }
+  app.post(
+    "/__fake_caocao/orders/:providerOrderId/phase",
+    controlRoute(
+      "controlSetOrderPhase",
+      "/__fake_caocao/orders/:providerOrderId/phase",
+      async ({ path, query }) => {
+        const phase = parseOrderPhase(readFirst(query, "phase"));
+        if (!phase) {
+          throw new FakeCaocaoControlError(
+            "FAKE_CAOCAO_UNSUPPORTED_ORDER_PHASE",
+            400,
+            "Unsupported fake Caocao order phase",
+          );
+        }
+        const order = state.setOrderPhase(path.providerOrderId, phase);
+        if (!order) {
+          throw new FakeCaocaoControlError(
+            "FAKE_CAOCAO_ORDER_NOT_FOUND",
+            404,
+            "Fake Caocao order not found",
+          );
+        }
+        const callback = await postOrderPhaseCallback({
+          fixture: input.fixture,
+          order,
+        });
+        assertCallbackDelivered(callback, order);
+        return {
+          callback,
+          ok: true,
+          order,
+        };
+      },
+    ),
+  );
 
-    if (url.pathname === "/common/feeConfirm" && req.method === "POST") {
-      const providerOrderId = readFirstParam(params, ["order_id", "order_no"]);
-      if (!providerOrderId) {
-        sendJson(res, 200, caocaoFailure(40001, "Missing order_id"));
-        return;
-      }
-      input.state.confirmFee({
-        allowanceAmountFen: Number(params.allowance_amount ?? 0) || null,
-        caocaoAllowanceAmountFen: Number(params.cao_allowance_amount ?? 0) || null,
-        providerOrderId,
-      });
-      sendJson(res, 200, caocaoSuccess({ orderNo: providerOrderId }));
-      return;
-    }
+  app.notFound((c) =>
+    jsonResponse(
+      {
+        code: "FAKE_CAOCAO_NOT_FOUND",
+        message: `Unknown fake Caocao route: ${new URL(c.req.url).pathname}`,
+      },
+      404,
+    ),
+  );
 
-    sendJson(res, 404, {
-      code: "FAKE_CAOCAO_NOT_FOUND",
-      message: `Unknown fake Caocao route: ${url.pathname}`,
-    });
-  } catch (error) {
-    if (error instanceof FakeCaocaoCallbackDeliveryError) {
-      sendJson(res, 502, {
-        callback: error.delivery,
-        code: "FAKE_CAOCAO_CALLBACK_DELIVERY_FAILED",
-        message: error.message,
-        order: error.order,
-      });
-      return;
-    }
-    sendJson(res, 400, {
-      code: "FAKE_CAOCAO_ERROR",
-      message: error instanceof Error ? error.message : "Unknown fake error",
-    });
-  }
+  return app;
 }
diff --git a/packages/fake-caocao-server/src/server.test.ts b/packages/fake-caocao-server/src/server.test.ts
index 218fcb482..5788efcb3 100644
--- a/packages/fake-caocao-server/src/server.test.ts
+++ b/packages/fake-caocao-server/src/server.test.ts
@@ -22,6 +22,39 @@ const signedSearchParams = (input: {
   });
 };
 
+const defaultEstimateParams = (input: Partial<Record<string, string>> = {}): Record<string, string> => ({
+  car_type: "5",
+  city_code: "0571",
+  from_latitude: "30.2500",
+  from_longitude: "120.2000",
+  timestamp: "1",
+  to_latitude: "30.3000",
+  to_longitude: "120.2500",
+  ...input,
+});
+
+const defaultCreateParams = (input: Partial<Record<string, string>> = {}): Record<string, string> => ({
+  callback_info: "pu.rhc.v1.stg.00000000-0000-0000-0000-000000000501",
+  caller_phone: "13800138000",
+  car_type: "5",
+  city_code: "0571",
+  end_address: "杭州市西湖区灵隐路1号",
+  end_name: "灵隐寺",
+  estimate_price: "5200",
+  estimate_price_key: "fake_quote_5_5200",
+  ext_order_id: "external-order-1",
+  from_latitude: "30.2500",
+  from_longitude: "120.2000",
+  is_simultaneously_call: "0",
+  order_type: "1",
+  start_address: "杭州市上城区全福桥路2号",
+  start_name: "杭州东站",
+  timestamp: "2",
+  to_latitude: "30.3000",
+  to_longitude: "120.2500",
+  ...input,
+});
+
 const closeServer = (server: Server): Promise<void> =>
   new Promise((resolve, reject) => {
     server.close((error) => {
@@ -123,32 +156,24 @@ describe("startFakeCaocaoServer", () => {
     const estimateResponse = await fetch(
       `${server.origin}/common/estimatePriceWithDetail?${signedSearchParams({
         clientId: server.fixture.clientId,
-        params: {
-          car_type: "PREMIER",
-          timestamp: "1",
-        },
+        params: defaultEstimateParams(),
         signKey: server.fixture.signKey,
       }).toString()}`,
     );
     const estimateBody = (await estimateResponse.json()) as {
       code: number;
-      data: { estimateAmountFen: number };
+      data: { price: number };
       success: boolean;
     };
 
     expect(estimateResponse.ok).toBe(true);
     expect(estimateBody.success).toBe(true);
-    expect(estimateBody.data.estimateAmountFen).toBe(5200);
+    expect(estimateBody.data.price).toBe(5200);
 
     const createResponse = await fetch(`${server.origin}/common/orderCarV2`, {
       body: signedSearchParams({
         clientId: server.fixture.clientId,
-        params: {
-          callback_info: "pu.rhc.v1.stg.00000000-0000-0000-0000-000000000501",
-          car_type: "PREMIER",
-          ext_order_id: "external-order-1",
-          timestamp: "2",
-        },
+        params: defaultCreateParams(),
         signKey: server.fixture.signKey,
       }).toString(),
       headers: {
@@ -181,13 +206,13 @@ describe("startFakeCaocaoServer", () => {
     );
     const detailBody = (await detailResponse.json()) as {
       code: number;
-      data: { phase: string };
+      data: { basicOrderVO: { status: string } };
       success: boolean;
     };
 
     expect(detailResponse.ok).toBe(true);
     expect(detailBody.success).toBe(true);
-    expect(detailBody.data.phase).toBe("CREATED");
+    expect(detailBody.data.basicOrderVO.status).toBe("1");
 
     const advanceResponse = await fetch(`${server.origin}/__fake_caocao/orders/latest/advance`, {
       method: "POST",
@@ -207,27 +232,27 @@ describe("startFakeCaocaoServer", () => {
         clientId: server.fixture.clientId,
         params: {
           order_id: createBody.data.orderNo,
-          timestamp: "3-after-advance",
+          timestamp: "31",
         },
         signKey: server.fixture.signKey,
       }).toString()}`,
     );
     const detailAfterAdvanceBody = (await detailAfterAdvanceResponse.json()) as {
       code: number;
-      data: { phase: string };
+      data: { basicOrderVO: { status: string } };
       success: boolean;
     };
 
     expect(detailAfterAdvanceResponse.ok).toBe(true);
     expect(detailAfterAdvanceBody.success).toBe(true);
-    expect(detailAfterAdvanceBody.data.phase).toBe("ACCEPTED");
+    expect(detailAfterAdvanceBody.data.basicOrderVO.status).toBe("9");
 
     const driverLocationResponse = await fetch(
       `${server.origin}/common/queryDriverLocationByOrderId?${signedSearchParams({
         clientId: server.fixture.clientId,
         params: {
           order_id: createBody.data.orderNo,
-          timestamp: "3-driver-location",
+          timestamp: "32",
         },
         signKey: server.fixture.signKey,
       }).toString()}`,
@@ -248,9 +273,8 @@ describe("startFakeCaocaoServer", () => {
       body: signedSearchParams({
         clientId: server.fixture.clientId,
         params: {
-          navigation_polyline_type: "1",
           order_id: createBody.data.orderNo,
-          timestamp: "3-driver-polyline",
+          timestamp: "33",
         },
         signKey: server.fixture.signKey,
       }).toString(),
@@ -295,7 +319,7 @@ describe("startFakeCaocaoServer", () => {
         clientId: server.fixture.clientId,
         params: {
           order_id: createBody.data.orderNo,
-          timestamp: "3-driver-location-after-route",
+          timestamp: "34",
         },
         signKey: server.fixture.signKey,
       }).toString()}`,
@@ -309,31 +333,6 @@ describe("startFakeCaocaoServer", () => {
       coordinateDelta(driverLocationBody.data, advancedDriverLocationBody.data),
     ).toBeGreaterThan(0.00001);
 
-    const missingNavigationTypeResponse = await fetch(
-      `${server.origin}/common/queryDriverPolylineV2`,
-      {
-        body: signedSearchParams({
-          clientId: server.fixture.clientId,
-          params: {
-            order_id: createBody.data.orderNo,
-            timestamp: "3-driver-polyline-missing-type",
-          },
-          signKey: server.fixture.signKey,
-        }).toString(),
-        headers: {
-          "Content-Type": "application/x-www-form-urlencoded",
-        },
-        method: "POST",
-      },
-    );
-    const missingNavigationTypeBody = (await missingNavigationTypeResponse.json()) as {
-      code: number;
-      success: boolean;
-    };
-    expect(missingNavigationTypeResponse.ok).toBe(true);
-    expect(missingNavigationTypeBody.success).toBe(false);
-    expect(missingNavigationTypeBody.code).toBe(40001);
-
     const arrivedPhaseResponse = await fetch(
       `${server.origin}/__fake_caocao/orders/${createBody.data.orderNo}/advance`,
       {
@@ -368,7 +367,7 @@ describe("startFakeCaocaoServer", () => {
         clientId: server.fixture.clientId,
         params: {
           order_id: createBody.data.orderNo,
-          timestamp: "3-driver-location-in-trip",
+          timestamp: "35",
         },
         signKey: server.fixture.signKey,
       }).toString()}`,
@@ -383,9 +382,8 @@ describe("startFakeCaocaoServer", () => {
       body: signedSearchParams({
         clientId: server.fixture.clientId,
         params: {
-          navigation_polyline_type: "3",
           order_id: createBody.data.orderNo,
-          timestamp: "3-driver-polyline-in-trip",
+          timestamp: "36",
         },
         signKey: server.fixture.signKey,
       }).toString(),
@@ -435,7 +433,7 @@ describe("startFakeCaocaoServer", () => {
     server = await startFakeCaocaoServer();
 
     const created = server.state.createOrder({
-      carType: "EXPRESS",
+      carType: "3",
       externalOrderId: "external-order-retreat",
     });
     server.state.setOrderPhase(created.providerOrderId, "ARRIVED_AT_PICKUP");
@@ -505,7 +503,7 @@ describe("startFakeCaocaoServer", () => {
     });
 
     const created = server.state.createOrder({
-      carType: "EXPRESS",
+      carType: "3",
       destination: { latitude: 30.35, longitude: 120.3 },
       externalOrderId: "external-order-planned-route",
       origin: { latitude: 30.25, longitude: 120.2 },
@@ -516,9 +514,8 @@ describe("startFakeCaocaoServer", () => {
       body: signedSearchParams({
         clientId: server.fixture.clientId,
         params: {
-          navigation_polyline_type: "3",
           order_id: created.providerOrderId,
-          timestamp: "planned-route-1",
+          timestamp: "41",
         },
         signKey: server.fixture.signKey,
       }).toString(),
@@ -546,9 +543,8 @@ describe("startFakeCaocaoServer", () => {
       body: signedSearchParams({
         clientId: server.fixture.clientId,
         params: {
-          navigation_polyline_type: "3",
           order_id: created.providerOrderId,
-          timestamp: "planned-route-2",
+          timestamp: "42",
         },
         signKey: server.fixture.signKey,
       }).toString(),
@@ -584,7 +580,7 @@ describe("startFakeCaocaoServer", () => {
     try {
       const created = server.state.createOrder({
         callbackUrl: `${callbackServer.origin}/callback`,
-        carType: "EXPRESS",
+        carType: "3",
         externalOrderId: "external-order-callback-failure",
       });
 
@@ -631,7 +627,7 @@ describe("startFakeCaocaoServer", () => {
       const created = server.state.createOrder({
         callbackInfo,
         callbackUrl: `${callbackServer.origin}/callback`,
-        carType: "EXPRESS",
+        carType: "3",
         externalOrderId: "external-order-callback-success",
       });
 
@@ -669,7 +665,7 @@ describe("startFakeCaocaoServer", () => {
 
     const updateResponse = await fetch(`${server.origin}/__fake_caocao/estimates`, {
       body: JSON.stringify({
-        carType: "EXPRESS",
+        carType: "3",
         estimateAmountFen: 4100,
       }),
       headers: {
@@ -689,20 +685,20 @@ describe("startFakeCaocaoServer", () => {
     const estimateResponse = await fetch(
       `${server.origin}/common/estimatePriceWithDetail?${signedSearchParams({
         clientId: server.fixture.clientId,
-        params: {
-          car_type: "EXPRESS",
-          timestamp: "estimate-after-admin-update",
-        },
+        params: defaultEstimateParams({
+          car_type: "3",
+          timestamp: "51",
+        }),
         signKey: server.fixture.signKey,
       }).toString()}`,
     );
     const estimateBody = (await estimateResponse.json()) as {
-      data: { estimateAmountFen: number };
+      data: { price: number };
       success: boolean;
     };
 
     expect(estimateBody.success).toBe(true);
-    expect(estimateBody.data.estimateAmountFen).toBe(4100);
+    expect(estimateBody.data.price).toBe(4100);
   });
 
   test("supports admin reset and next-create failure controls", async () => {
@@ -716,11 +712,13 @@ describe("startFakeCaocaoServer", () => {
     const createResponse = await fetch(`${server.origin}/common/orderCarV2`, {
       body: signedSearchParams({
         clientId: server.fixture.clientId,
-        params: {
-          car_type: "EXPRESS",
+        params: defaultCreateParams({
+          car_type: "3",
+          estimate_price: "3600",
+          estimate_price_key: "fake_quote_3_3600",
           ext_order_id: "external-order-2",
           timestamp: "4",
-        },
+        }),
         signKey: server.fixture.signKey,
       }).toString(),
       headers: {
diff --git a/packages/fake-caocao-server/src/server.ts b/packages/fake-caocao-server/src/server.ts
index d9fa08656..f01ddd54b 100644
--- a/packages/fake-caocao-server/src/server.ts
+++ b/packages/fake-caocao-server/src/server.ts
@@ -1,15 +1,21 @@
-import { createServer, type Server } from "node:http";
-import type { AddressInfo } from "node:net";
+import { serve, type ServerType } from "@hono/node-server";
+import { z } from "zod";
 import { createFakeCaocaoFixture } from "./fixtures";
 import type { FakeCaocaoRoutePlanner } from "./route-planning";
-import { handleFakeCaocaoRequest } from "./routes";
+import { createFakeCaocaoApp } from "./routes";
 import { FakeCaocaoState } from "./state";
 
-export type FakeCaocaoServerOptions = {
-  hostname?: string;
-  port?: number;
+export const fakeCaocaoServerOptionsSchema = z.object({
+  callbackBaseUrl: z.string().url().nullable().optional(),
+  hostname: z.string().min(1).default("127.0.0.1"),
+  port: z.number().int().nonnegative().default(0),
+  verifyRequests: z.boolean().default(true),
+});
+
+export type FakeCaocaoServerOptions = Partial<
+  z.input<typeof fakeCaocaoServerOptionsSchema>
+> & {
   routePlanner?: FakeCaocaoRoutePlanner | null;
-  verifyRequests?: boolean;
 };
 
 export type StartedFakeCaocaoServer = {
@@ -19,35 +25,38 @@ export type StartedFakeCaocaoServer = {
   close(): Promise<void>;
 };
 
-const resolveServerOrigin = (server: Server, hostname: string): string => {
+const resolveServerOrigin = (server: ServerType, hostname: string): string => {
   const address = server.address();
   if (!address || typeof address === "string") {
     throw new Error("Fake Caocao server did not expose a TCP address");
   }
-  return `http://${hostname}:${(address as AddressInfo).port}`;
+  return `http://${hostname}:${address.port}`;
 };
 
 export async function startFakeCaocaoServer(
-  options: FakeCaocaoServerOptions = {},
+  rawOptions: FakeCaocaoServerOptions = {},
 ): Promise<StartedFakeCaocaoServer> {
-  const hostname = options.hostname ?? "127.0.0.1";
-  const port = options.port ?? 0;
+  const options = fakeCaocaoServerOptionsSchema.parse(rawOptions);
   const fixture = createFakeCaocaoFixture();
   const state = new FakeCaocaoState();
-  const verifyRequests = options.verifyRequests ?? true;
-
-  const server = createServer((req, res) => {
-    void handleFakeCaocaoRequest(req, res, {
-      fixture,
-      routePlanner: options.routePlanner,
-      state,
-      verifyRequests,
-    });
+  const app = createFakeCaocaoApp({
+    callbackBaseUrl: options.callbackBaseUrl ?? null,
+    fixture,
+    routePlanner: rawOptions.routePlanner,
+    state,
+    verifyRequests: options.verifyRequests,
   });
 
-  await new Promise<void>((resolve, reject) => {
-    server.once("error", reject);
-    server.listen(port, hostname, resolve);
+  const server = await new Promise<ServerType>((resolve, reject) => {
+    const startedServer = serve(
+      {
+        fetch: app.fetch,
+        hostname: options.hostname,
+        port: options.port,
+      },
+      () => resolve(startedServer),
+    );
+    startedServer.once("error", reject);
   });
 
   return {
@@ -64,7 +73,7 @@ export async function startFakeCaocaoServer(
       });
     },
     fixture,
-    origin: resolveServerOrigin(server, hostname),
+    origin: resolveServerOrigin(server, options.hostname),
     state,
   };
 }
diff --git a/packages/fake-caocao-server/src/state.test.ts b/packages/fake-caocao-server/src/state.test.ts
index be07069ea..9b4d60f02 100644
--- a/packages/fake-caocao-server/src/state.test.ts
+++ b/packages/fake-caocao-server/src/state.test.ts
@@ -6,11 +6,11 @@ describe("FakeCaocaoState", () => {
     const state = new FakeCaocaoState();
 
     const created = state.createOrder({
-      carType: "PREMIER",
+      carType: "5",
       externalOrderId: "external-order-1",
     });
     const duplicate = state.createOrder({
-      carType: "EXPRESS",
+      carType: "3",
       externalOrderId: "external-order-1",
     });
 
@@ -35,11 +35,11 @@ describe("FakeCaocaoState", () => {
     const state = new FakeCaocaoState();
 
     const older = state.createOrder({
-      carType: "EXPRESS",
+      carType: "3",
       externalOrderId: "external-order-older",
     });
     const newer = state.createOrder({
-      carType: "PREMIER",
+      carType: "5",
       externalOrderId: "external-order-newer",
     });
 
@@ -54,20 +54,20 @@ describe("FakeCaocaoState", () => {
     const state = new FakeCaocaoState();
 
     const updated = state.updateEstimate({
-      carType: "PREMIER",
+      carType: "5",
       estimateAmountFen: 6100,
     });
     const created = state.createOrder({
-      carType: "PREMIER",
+      carType: "5",
       externalOrderId: "external-order-price-change",
     });
 
     expect(updated.estimateAmountFen).toBe(6100);
-    expect(state.findEstimate("PREMIER").estimateAmountFen).toBe(6100);
+    expect(state.findEstimate("5").estimateAmountFen).toBe(6100);
     expect(created.finalAmountFen).toBe(6500);
 
     state.reset();
-    expect(state.findEstimate("PREMIER").estimateAmountFen).toBe(5200);
+    expect(state.findEstimate("5").estimateAmountFen).toBe(5200);
   });
 
   test("supports next-create failure, cancellation, and fee confirmation", () => {
@@ -79,7 +79,7 @@ describe("FakeCaocaoState", () => {
 
     const created = state.createOrder({
       callbackUrl: "http://127.0.0.1:4000/callback",
-      carType: "EXPRESS",
+      carType: "3",
       externalOrderId: "external-order-2",
     });
     state.advanceOrderPhase(created.providerOrderId);
@@ -99,7 +99,7 @@ describe("FakeCaocaoState", () => {
   test("retreats only phases with a deterministic previous phase", () => {
     const state = new FakeCaocaoState();
     const created = state.createOrder({
-      carType: "EXPRESS",
+      carType: "3",
       externalOrderId: "external-order-3",
     });
 
@@ -122,7 +122,7 @@ describe("FakeCaocaoState", () => {
   test("tracks movement ticks and resets them across phase changes", () => {
     const state = new FakeCaocaoState();
     const created = state.createOrder({
-      carType: "EXPRESS",
+      carType: "3",
       externalOrderId: "external-order-movement",
     });
 
diff --git a/packages/fake-caocao-server/src/state.ts b/packages/fake-caocao-server/src/state.ts
index fd12ad2f9..3a4123f77 100644
--- a/packages/fake-caocao-server/src/state.ts
+++ b/packages/fake-caocao-server/src/state.ts
@@ -34,17 +34,33 @@ export type FakeCaocaoOrderPhase =
   | "CANCELLED";
 
 export type FakeCaocaoOrderState = {
+  acceptedAt: string | null;
+  arrivedAt: string | null;
   providerOrderId: string;
   externalOrderId: string;
   callbackUrl: string | null;
   callbackInfo: string | null;
+  callerPhone: string;
+  canceledAt: string | null;
   carType: string;
+  cityCode: string;
+  departureTime: string | null;
+  endAddress: string;
+  endName: string;
+  estimatePriceFen: number;
+  finishedAt: string | null;
+  orderType: number;
   phase: FakeCaocaoOrderPhase;
+  passengerName: string;
+  passengerPhone: string;
   origin: FakeCaocaoCoordinate;
   destination: FakeCaocaoCoordinate;
   queryCount: number;
   finalAmountFen: number;
   cancelFeeFen: number;
+  serviceStartedAt: string | null;
+  startAddress: string;
+  startName: string;
   createdAt: string;
   updatedAt: string;
 };
@@ -71,19 +87,61 @@ const sanitizeProviderId = (value: string): string =>
 
 const defaultEstimates = (): FakeCaocaoVehicleEstimate[] => [
   {
-    carType: "EXPRESS",
+    carType: "2",
+    carTypeName: "新能源",
+    distanceMeters: 8200,
+    durationSeconds: 1500,
+    estimateAmountFen: 3200,
+  },
+  {
+    carType: "3",
     carTypeName: "快车",
     distanceMeters: 8200,
     durationSeconds: 1500,
     estimateAmountFen: 3600,
   },
   {
-    carType: "PREMIER",
+    carType: "4",
+    carTypeName: "豪华型",
+    distanceMeters: 8200,
+    durationSeconds: 1500,
+    estimateAmountFen: 4800,
+  },
+  {
+    carType: "5",
     carTypeName: "专车",
     distanceMeters: 8200,
     durationSeconds: 1500,
     estimateAmountFen: 5200,
   },
+  {
+    carType: "7",
+    carTypeName: "优选",
+    distanceMeters: 8200,
+    durationSeconds: 1500,
+    estimateAmountFen: 4100,
+  },
+  {
+    carType: "12",
+    carTypeName: "超惠",
+    distanceMeters: 8200,
+    durationSeconds: 1500,
+    estimateAmountFen: 3000,
+  },
+  {
+    carType: "14",
+    carTypeName: "智能大白车",
+    distanceMeters: 8200,
+    durationSeconds: 1500,
+    estimateAmountFen: 3900,
+  },
+  {
+    carType: "15",
+    carTypeName: "礼帽专车",
+    distanceMeters: 8200,
+    durationSeconds: 1500,
+    estimateAmountFen: 6800,
+  },
 ];
 
 const defaultOrigin = (): FakeCaocaoCoordinate => ({
@@ -98,6 +156,13 @@ const defaultDestination = (): FakeCaocaoCoordinate => ({
 
 const terminalOrderPhases = new Set<FakeCaocaoOrderPhase>(["FINISHED", "CANCELLED"]);
 const nonRetreatableOrderPhases = new Set<FakeCaocaoOrderPhase>(["CREATED", "CANCELLED"]);
+const activeOrderPhases: FakeCaocaoOrderPhase[] = [
+  "CREATED",
+  "ACCEPTED",
+  "ARRIVED_AT_PICKUP",
+  "IN_TRIP",
+  "FINISHED",
+];
 
 const nextOrderPhase = (phase: FakeCaocaoOrderPhase): FakeCaocaoOrderPhase => {
   if (phase === "CREATED") return "ACCEPTED";
@@ -115,6 +180,64 @@ const previousOrderPhase = (phase: FakeCaocaoOrderPhase): FakeCaocaoOrderPhase =
   return phase;
 };
 
+const phaseRank = (phase: FakeCaocaoOrderPhase): number => {
+  if (phase === "CANCELLED") return activeOrderPhases.length;
+  return activeOrderPhases.indexOf(phase);
+};
+
+const syncPhaseTimestamps = (
+  order: FakeCaocaoOrderState,
+  phase: FakeCaocaoOrderPhase,
+  timestamp: string,
+): Pick<
+  FakeCaocaoOrderState,
+  "acceptedAt" | "arrivedAt" | "canceledAt" | "finishedAt" | "serviceStartedAt"
+> => {
+  const next: Pick<
+    FakeCaocaoOrderState,
+    "acceptedAt" | "arrivedAt" | "canceledAt" | "finishedAt" | "serviceStartedAt"
+  > = {
+    acceptedAt: order.acceptedAt,
+    arrivedAt: order.arrivedAt,
+    canceledAt: order.canceledAt,
+    finishedAt: order.finishedAt,
+    serviceStartedAt: order.serviceStartedAt,
+  };
+
+  if (phase === "CREATED") {
+    return {
+      acceptedAt: null,
+      arrivedAt: null,
+      canceledAt: null,
+      finishedAt: null,
+      serviceStartedAt: null,
+    };
+  }
+
+  if (phase === "CANCELLED") {
+    if (!next.canceledAt) next.canceledAt = timestamp;
+    if (phaseRank(order.phase) >= phaseRank("ACCEPTED") && !next.acceptedAt) {
+      next.acceptedAt = timestamp;
+    }
+    return next;
+  }
+
+  next.canceledAt = null;
+  if (phaseRank(phase) < phaseRank("FINISHED")) next.finishedAt = null;
+  if (phaseRank(phase) < phaseRank("IN_TRIP")) next.serviceStartedAt = null;
+  if (phaseRank(phase) < phaseRank("ARRIVED_AT_PICKUP")) next.arrivedAt = null;
+
+  if (phaseRank(phase) >= phaseRank("ACCEPTED") && !next.acceptedAt) next.acceptedAt = timestamp;
+  if (phaseRank(phase) >= phaseRank("ARRIVED_AT_PICKUP") && !next.arrivedAt) {
+    next.arrivedAt = timestamp;
+  }
+  if (phaseRank(phase) >= phaseRank("IN_TRIP") && !next.serviceStartedAt) {
+    next.serviceStartedAt = timestamp;
+  }
+  if (phaseRank(phase) >= phaseRank("FINISHED") && !next.finishedAt) next.finishedAt = timestamp;
+  return next;
+};
+
 export class FakeCaocaoState {
   private failNextCreate = false;
   private readonly estimates = new Map<string, FakeCaocaoVehicleEstimate>();
@@ -163,7 +286,7 @@ export class FakeCaocaoState {
   }
 
   findEstimate(carType: string): FakeCaocaoVehicleEstimate {
-    return this.estimates.get(carType) ?? this.estimates.get("EXPRESS") ?? defaultEstimates()[0]!;
+    return this.estimates.get(carType) ?? this.estimates.get("3") ?? defaultEstimates()[0]!;
   }
 
   findAvailableEstimate(carType: string): FakeCaocaoVehicleEstimate | null {
@@ -227,8 +350,19 @@ export class FakeCaocaoState {
     carType: string;
     callbackInfo?: string | null;
     callbackUrl?: string | null;
+    callerPhone?: string | null;
+    cityCode?: string | null;
+    departureTime?: string | null;
+    endAddress?: string | null;
+    endName?: string | null;
+    estimatePriceFen?: number | null;
+    orderType?: number | null;
     origin?: FakeCaocaoCoordinate | null;
     destination?: FakeCaocaoCoordinate | null;
+    passengerName?: string | null;
+    passengerPhone?: string | null;
+    startAddress?: string | null;
+    startName?: string | null;
   }): FakeCaocaoOrderState {
     const existing = [...this.orders.values()].find(
       (order) => order.externalOrderId === input.externalOrderId,
@@ -237,19 +371,42 @@ export class FakeCaocaoState {
 
     const estimate = this.findEstimate(input.carType);
     const timestamp = nowIso();
+    const estimatePriceFen =
+      typeof input.estimatePriceFen === "number" && Number.isFinite(input.estimatePriceFen)
+        ? Math.round(input.estimatePriceFen)
+        : estimate.estimateAmountFen;
     const order: FakeCaocaoOrderState = {
+      acceptedAt: null,
+      arrivedAt: null,
       cancelFeeFen: 0,
       callbackInfo: input.callbackInfo ?? null,
       callbackUrl: input.callbackUrl ?? null,
+      callerPhone: input.callerPhone?.trim() || "13800138000",
+      canceledAt: null,
       carType: estimate.carType,
+      cityCode: input.cityCode?.trim() || "0571",
       createdAt: timestamp,
+      departureTime: input.departureTime?.trim() || null,
       destination: input.destination ?? defaultDestination(),
+      endAddress: input.endAddress?.trim() || "Fake Destination Address",
+      endName: input.endName?.trim() || "Fake Destination",
+      estimatePriceFen,
       externalOrderId: input.externalOrderId,
-      finalAmountFen: estimate.estimateAmountFen + 400,
+      finalAmountFen: estimatePriceFen + 400,
+      finishedAt: null,
+      orderType:
+        typeof input.orderType === "number" && Number.isInteger(input.orderType)
+          ? input.orderType
+          : 1,
       origin: input.origin ?? defaultOrigin(),
+      passengerName: input.passengerName?.trim() || "测试乘客",
+      passengerPhone: input.passengerPhone?.trim() || input.callerPhone?.trim() || "13800138000",
       phase: "CREATED",
       providerOrderId: `CC${sanitizeProviderId(input.externalOrderId)}`,
       queryCount: 0,
+      serviceStartedAt: null,
+      startAddress: input.startAddress?.trim() || "Fake Origin Address",
+      startName: input.startName?.trim() || "Fake Origin",
       updatedAt: timestamp,
     };
     this.orders.set(order.providerOrderId, order);
@@ -301,12 +458,14 @@ export class FakeCaocaoState {
   setOrderPhase(providerOrderId: string, phase: FakeCaocaoOrderPhase): FakeCaocaoOrderState | null {
     const order = this.orders.get(providerOrderId);
     if (!order) return null;
+    const timestamp = nowIso();
 
     const updated: FakeCaocaoOrderState = {
       ...order,
       phase,
       queryCount: phase === order.phase ? order.queryCount : 0,
-      updatedAt: nowIso(),
+      updatedAt: timestamp,
+      ...syncPhaseTimestamps(order, phase, timestamp),
     };
     this.orders.set(providerOrderId, updated);
     return updated;
@@ -351,12 +510,15 @@ export class FakeCaocaoState {
   cancelOrder(providerOrderId: string): FakeCaocaoOrderState | null {
     const order = this.orders.get(providerOrderId);
     if (!order) return null;
+    const timestamp = nowIso();
 
     const updated: FakeCaocaoOrderState = {
       ...order,
       cancelFeeFen: order.phase === "ACCEPTED" || order.phase === "ARRIVED_AT_PICKUP" ? 800 : 0,
       phase: "CANCELLED",
-      updatedAt: nowIso(),
+      queryCount: 0,
+      updatedAt: timestamp,
+      ...syncPhaseTimestamps(order, "CANCELLED", timestamp),
     };
     this.orders.set(providerOrderId, updated);
     return updated;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 61d03daf6..cc746144a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -223,6 +223,25 @@ importers:
         version: 2.2.12(typescript@6.0.3)
 
   packages/fake-caocao-server:
+    dependencies:
+      '@hono/node-server':
+        specifier: ^1.19.9
+        version: 1.19.9(hono@4.11.5)
+      ajv:
+        specifier: ^8.20.0
+        version: 8.20.0
+      ajv-formats:
+        specifier: ^3.0.1
+        version: 3.0.1(ajv@8.20.0)
+      hono:
+        specifier: ^4.11.5
+        version: 4.11.5
+      yaml:
+        specifier: ^2.9.0
+        version: 2.9.0
+      zod:
+        specifier: ^3.25.76
+        version: 3.25.76
     devDependencies:
       '@types/node':
         specifier: ^22.0.0
@@ -1953,6 +1972,17 @@ packages:
       react:
         optional: true
 
+  ajv-formats@3.0.1:
+    resolution: {integrity: sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==}
+    peerDependencies:
+      ajv: ^8.0.0
+    peerDependenciesMeta:
+      ajv:
+        optional: true
+
+  ajv@8.20.0:
+    resolution: {integrity: sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==}
+
   alien-signals@1.0.13:
     resolution: {integrity: sha512-OGj9yyTnJEttvzhTUWuscOvtqxq5vrhF7vL9oS0xJ2mK0ItPYP1/y+vCFebfxoEyAz0++1AIwJ5CMr+Fk3nDmg==}
 
@@ -2299,6 +2329,12 @@ packages:
     resolution: {integrity: sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==}
     engines: {node: '>=12.0.0'}
 
+  fast-deep-equal@3.1.3:
+    resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
+
+  fast-uri@3.1.3:
+    resolution: {integrity: sha512-i70LwGWUduXqzicKXWshooq+sWL1K3WUU5rKZNG/0i3a1OSoX3HqhH5WbWwTmqWfor4urUakGPiRQcleRZTwOg==}
+
   fast-xml-builder@1.2.0:
     resolution: {integrity: sha512-00aAWieqff+ZJhsXA4g1g7M8k+7AYoMUUHF+/zFb5U6Uv/P0Vl4QZo84/IcufzYalLuEj9928bXN9PbbFzMF0Q==}
 
@@ -2453,6 +2489,9 @@ packages:
   json-logic-js@2.0.5:
     resolution: {integrity: sha512-rTT2+lqcuUmj4DgWfmzupZqQDA64AdmYqizzMPWj3DxGdfFNsxPpcNVSaTj4l8W2tG/+hg7/mQhxjU3aPacO6g==}
 
+  json-schema-traverse@1.0.0:
+    resolution: {integrity: sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==}
+
   json-schema@0.4.0:
     resolution: {integrity: sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==}
 
@@ -2728,6 +2767,10 @@ packages:
     resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
     engines: {node: '>=0.10.0'}
 
+  require-from-string@2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
+
   require-main-filename@2.0.0:
     resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==}
 
@@ -4476,6 +4519,17 @@ snapshots:
     optionalDependencies:
       react: 19.2.3
 
+  ajv-formats@3.0.1(ajv@8.20.0):
+    optionalDependencies:
+      ajv: 8.20.0
+
+  ajv@8.20.0:
+    dependencies:
+      fast-deep-equal: 3.1.3
+      fast-uri: 3.1.3
+      json-schema-traverse: 1.0.0
+      require-from-string: 2.0.2
+
   alien-signals@1.0.13: {}
 
   ansi-regex@5.0.1: {}
@@ -4784,6 +4838,10 @@ snapshots:
 
   expect-type@1.3.0: {}
 
+  fast-deep-equal@3.1.3: {}
+
+  fast-uri@3.1.3: {}
+
   fast-xml-builder@1.2.0:
     dependencies:
       path-expression-matcher: 1.5.0
@@ -4940,6 +4998,8 @@ snapshots:
 
   json-logic-js@2.0.5: {}
 
+  json-schema-traverse@1.0.0: {}
+
   json-schema@0.4.0: {}
 
   jsonc-parser@3.3.1: {}
@@ -5232,6 +5292,8 @@ snapshots:
 
   require-directory@2.1.1: {}
 
+  require-from-string@2.0.2: {}
+
   require-main-filename@2.0.0: {}
 
   resolve-from@5.0.0: {}
diff --git a/tasks/caocao-openapi-alignment-review/00-task-packet.md b/tasks/caocao-openapi-alignment-review/00-task-packet.md
new file mode 100644
index 000000000..a54a39521
--- /dev/null
+++ b/tasks/caocao-openapi-alignment-review/00-task-packet.md
@@ -0,0 +1,177 @@
+# Caocao OpenAPI Alignment Review
+
+## Status
+
+Completed for the minimum official surface; one residual contract note remains
+recorded below.
+
+## Objective & Hypothesis
+
+Objective:
+
+- audit `packages/fake-caocao-server` against the current CaoCao OpenAPI travel
+  docs, define the minimum official surface, and rebuild the fake server around
+  spec-driven validation plus minimal behavior
+
+Hypothesis:
+
+- the fake server has drifted from the documented contract beyond the recently
+  fixed estimate-price fields
+- the highest-risk drift is where backend code still passes because it accepts
+  multiple field aliases, while the fake server no longer reflects the provider
+  contract truth
+
+## Guardrails Touched
+
+- package owner: `packages/fake-caocao-server/`
+- backend adapter reference: `apps/backend/src/domains/ride-hailing/services/caocao-provider.ts`
+- external authority: CaoCao OpenAPI travel docs
+
+## Verification
+
+- inspect fake server route implementations and tests
+- inspect backend adapter request and response expectations
+- compare each implemented fake provider endpoint to the current official docs
+- run fake-server package tests
+- run backend unit and backend scenario tests
+- run system-scenario ride-hailing ordering flow to prove the fake server is in
+  the real test path
+
+## Current Understanding
+
+- the fake server now exposes the minimum provider-facing official surface:
+  - `/common/queryCity`
+  - `/common/estimatePriceWithDetail`
+  - `/common/orderCarV2`
+  - `/common/queryOrderDetailV2`
+  - `/common/queryDriverLocationByOrderId`
+  - `/common/queryDriverPolylineV2`
+  - `/common/queryCancelFee`
+  - `/common/cancelOrderV3`
+  - `/common/feeConfirm`
+  - `notifyOrderStatus` as an OpenAPI webhook contract used to validate emitted
+    callbacks
+- provider-facing request and response validation is now driven from local
+  OpenAPI sources under `packages/fake-caocao-server/openapi/`
+- backend adapter and test data now use official CaoCao field names and numeric
+  enum/code values instead of fake aliases
+
+## Outcome Snapshot
+
+- fake server was rebuilt around Hono plus OpenAPI-driven request/response
+  validation, with provider contracts separated from fake-only control
+  contracts
+- `/common/queryCity` is now implemented, which unblocks backend city-code
+  fallback during estimate and create-order flows
+- estimate, create-order, cancel, route, detail, and callback contracts now use
+  documented field names and documented enum/code values
+- backend adapter no longer sends fake-only aliases such as `flat` / `flng`,
+  `price_token`, `callback_url`, or `navigation_polyline_type`
+- backend tests, backend scenario tests, system scenarios, and dev-only ride-
+  hailing baseline data now use official numeric vehicle codes `3` and `5`
+- dev-only fixture baseline was corrected at `0077`; the temporary forward
+  migration was removed after it collided with the shared numeric migration
+  prefix ledger
+- current-doc note: I did not find a request-side `require_level` enum in the
+  current 2026-06-29 CaoCao travel docs used for this task; no such request
+  constraint was implemented without a source anchor
+
+## Verification Update
+
+- `pnpm --filter @partner-up-dev/fake-caocao-server typecheck` passed
+- `pnpm --filter @partner-up-dev/fake-caocao-server test` passed
+- `pnpm --filter @partner-up-dev/backend typecheck` passed
+- `pnpm exec vitest run --config vitest.backend.config.ts --project backend-unit apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts apps/backend/src/domains/trade/services/order-pricing-execution.test.ts apps/backend/src/domains/merchandising/services/catalog-contract.test.ts` passed
+- `pnpm exec vitest run --config vitest.backend.config.ts --project backend-scenario apps/backend/tests/commerce/offer-quote-resolution.scenario.test.ts apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts` passed
+- `pnpm test:scenario:system -- tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts` passed with 45 tests green
+- `pnpm db:lint` passed after folding dev-only vehicle-code alignment back into
+  `0077`
+
+## Residual Note
+
+- official docs currently allow a wider `car_type` set on `orderCarV2`
+  (`2,3,4,5,7,12,14,15`) than on `estimatePriceWithDetail`
+  (`2,3,5,7,14,15`); the local provider spec preserves that difference, and the
+  fake state still keeps default estimate records for `4` and `12` to avoid
+  needlessly shrinking order-car coverage beyond the documented order contract
+
+## Proposed Rebuild Shape
+
+### Provider-facing minimum official surface
+
+- `GET /common/queryCity`
+- `GET /common/estimatePriceWithDetail`
+- `POST /common/orderCarV2`
+- `GET /common/queryOrderDetailV2`
+- `GET /common/queryDriverLocationByOrderId`
+- `POST /common/queryDriverPolylineV2`
+- `POST /common/cancelOrderV3`
+- `GET /common/queryCancelFee`
+- `POST /common/feeConfirm`
+- callback form contract for `2.13 notifyOrderStatus`
+
+Reason:
+
+- this is the smallest set that covers current backend provider adapter methods,
+  current ordering/order-detail scenario flow, and settlement/cancellation
+  paths
+
+### Non-provider fake control surface that must remain
+
+- `POST /__fake_caocao/reset`
+- `POST /__fake_caocao/create-failure/next`
+- `POST /__fake_caocao/estimates`
+- `POST /__fake_caocao/estimates/availability`
+- `GET /__fake_caocao/state`
+- `POST /__fake_caocao/orders/latest/advance`
+- `POST /__fake_caocao/orders/latest/retreat`
+- `POST /__fake_caocao/orders/:providerOrderId/advance`
+- `POST /__fake_caocao/orders/:providerOrderId/retreat`
+- `POST /__fake_caocao/orders/:providerOrderId/phase`
+
+Reason:
+
+- current system scenarios and fake-server package tests use these controls to
+  deterministically move provider state
+
+### Rebuild sequence
+
+1. write official provider-facing contracts as OpenAPI sources under a dedicated
+   fake-caocao spec area
+2. generate or hand-wire runtime validation from those specs so fake server
+   stops accepting repo-invented aliases and invalid enum values
+3. reimplement fake provider handlers as:
+   - validated transport layer from OpenAPI
+   - minimal stateful service layer for estimate/create/detail/route/cancel
+     behavior
+   - separate fake-only control handlers under `__fake_caocao`
+4. update backend and scenario fixtures away from invented values where current
+   system code still emits them
+5. prove system scenarios still hit fake server by explicit assertions on fake
+   state and callback-driven order progression
+
+### Horizontal sub-agent split for pre-implementation work
+
+1. shared-contracts lane
+   - common signature params
+   - common response envelopes
+   - shared enums and naming inconsistencies
+2. pricing-ordering lane
+   - `queryCity`
+   - `estimatePriceWithDetail`
+   - `orderCarV2`
+3. lifecycle-settlement lane
+   - `cancelOrderV3`
+   - `queryCancelFee`
+   - `feeConfirm`
+   - `notifyOrderStatus`
+4. live-observation lane
+   - `queryOrderDetailV2`
+   - `queryDriverLocationByOrderId`
+   - `queryDriverPolylineV2`
+
+Guardrail:
+
+- sub-agents stay read-only and produce OpenAPI-ready contract material,
+  verification checklists, and evidence summaries only
+- fake server implementation and integration remain in the main thread
diff --git a/tests/scenario/_infra/vitest/global-setup.ts b/tests/scenario/_infra/vitest/global-setup.ts
index d9a9bd20a..cf27a4891 100644
--- a/tests/scenario/_infra/vitest/global-setup.ts
+++ b/tests/scenario/_infra/vitest/global-setup.ts
@@ -52,7 +52,9 @@ export async function setup(project: TestProject): Promise<void> {
   process.env.VITE_API_URL = frontendBaseUrl;
 
   fakeWeChatPayServer = await startFakeWeChatPayServer();
-  fakeCaocaoServer = await startFakeCaocaoServer();
+  fakeCaocaoServer = await startFakeCaocaoServer({
+    callbackBaseUrl: `http://127.0.0.1:${backendPort}`,
+  });
 
   database = await createScenarioDatabase();
   const databaseUrl = installScenarioDatabaseEnv(database.databaseUrl);
diff --git a/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts b/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
index 23536ad22..6a2728788 100644
--- a/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
+++ b/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
@@ -175,14 +175,10 @@ async function setFakeCaocaoOrderPhase(input: {
   const { fakeCaocao } = getScenarioEnvironment();
   const response = await fetch(
     new URL(
-      `/__fake_caocao/orders/${encodeURIComponent(input.providerOrderId)}/phase`,
+      `/__fake_caocao/orders/${encodeURIComponent(input.providerOrderId)}/phase?phase=${encodeURIComponent(input.phase)}`,
       fakeCaocao.origin,
     ),
     {
-      body: new URLSearchParams({ phase: input.phase }).toString(),
-      headers: {
-        "Content-Type": "application/x-www-form-urlencoded",
-      },
       method: "POST",
     },
   );
@@ -350,7 +346,7 @@ async function givenRideHailingOrderingPlacement(): Promise<{
 
   await productSkuRepo.create({
     facts: asCurrentSkuFacts({
-      providerVehicleTypeCode: "EXPRESS",
+      providerVehicleTypeCode: "3",
       rideHailingProviderInstanceId: provider.providerInstanceId,
     }),
     name: "快车",
@@ -362,7 +358,7 @@ async function givenRideHailingOrderingPlacement(): Promise<{
 
   await productSkuRepo.create({
     facts: asCurrentSkuFacts({
-      providerVehicleTypeCode: "PREMIER",
+      providerVehicleTypeCode: "5",
       rideHailingProviderInstanceId: provider.providerInstanceId,
     }),
     name: "专车",
@@ -1108,7 +1104,7 @@ scenario("commerce_ride_hailing_provider_create_failure_stays_on_ordering_page",
 scenario("commerce_ride_hailing_unavailable_provider_vehicle_is_hidden", async (ctx) => {
   await resetFakeCaocao();
   await setFakeCaocaoEstimateAvailability({
-    carType: "PREMIER",
+    carType: "5",
     available: false,
   });
   const creator = await givenUser("system-ride-hailing-unavailable-vehicle-creator", {
@@ -1255,7 +1251,7 @@ scenario("commerce_ride_hailing_quote_refresh_prunes_unavailable_selected_vehicl
 
     const quoteCountBeforeExpire = await expireCommerceQuotes();
     await setFakeCaocaoEstimateAvailability({
-      carType: "PREMIER",
+      carType: "5",
       available: false,
     });
 
@@ -1299,11 +1295,11 @@ scenario("commerce_ride_hailing_quote_refresh_prunes_unavailable_selected_vehicl
 scenario("commerce_ride_hailing_all_provider_vehicles_unavailable_blocks_ordering", async (ctx) => {
   await resetFakeCaocao();
   await setFakeCaocaoEstimateAvailability({
-    carType: "EXPRESS",
+    carType: "3",
     available: false,
   });
   await setFakeCaocaoEstimateAvailability({
-    carType: "PREMIER",
+    carType: "5",
     available: false,
   });
   const creator = await givenUser("system-ride-hailing-no-vehicles-creator", {

From 6e5fb8a2cf8927a23c9f59e674f19889bb0affec Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Tue, 30 Jun 2026 08:31:01 +0800
Subject: [PATCH 73/94] fix(frontend): refresh ride entry after phone save

---
 .../model/ordering-entry-storage.test.ts      |  45 +++++
 .../commerce/model/ordering-entry-storage.ts  |  23 +++
 .../ordering/RideHailingOrderingContent.vue   |  87 ++-------
 .../ride-hailing-listing-state.test.ts        |  28 ---
 .../ui/ordering/ride-hailing-listing-state.ts |   3 -
 .../usePlacementOrderingEntryFlow.ts          |  10 +-
 .../domains/user/model/phone-number.test.ts   |  13 ++
 .../src/domains/user/model/phone-number.ts    |   4 +
 .../domains/user/ui/UserPhoneNumberEditor.vue | 174 ++++++++++++++++++
 apps/frontend/src/pages/MePage.vue            | 129 +++----------
 apps/frontend/src/pages/OrderingPage.vue      |  46 ++++-
 .../00-task-packet.md                         |  46 ++++-
 12 files changed, 392 insertions(+), 216 deletions(-)
 create mode 100644 apps/frontend/src/domains/commerce/model/ordering-entry-storage.test.ts
 create mode 100644 apps/frontend/src/domains/user/model/phone-number.test.ts
 create mode 100644 apps/frontend/src/domains/user/model/phone-number.ts
 create mode 100644 apps/frontend/src/domains/user/ui/UserPhoneNumberEditor.vue

diff --git a/apps/frontend/src/domains/commerce/model/ordering-entry-storage.test.ts b/apps/frontend/src/domains/commerce/model/ordering-entry-storage.test.ts
new file mode 100644
index 000000000..3e8a92124
--- /dev/null
+++ b/apps/frontend/src/domains/commerce/model/ordering-entry-storage.test.ts
@@ -0,0 +1,45 @@
+import { describe, expect, it } from "vitest";
+import type { OrderingEntryPayload } from "./ordering-entry-storage";
+import { normalizeOrderingEntryPayload } from "./ordering-entry-storage";
+
+const offerDetail = {
+  offerId: 2,
+  productType: "RIDE_HAILING",
+  spus: [],
+} as unknown as OrderingEntryPayload["offerDetail"];
+
+describe("ordering entry storage", () => {
+  it("preserves placement context for ordering-entry refresh", () => {
+    const payload = normalizeOrderingEntryPayload({
+      source: { offerId: 2 },
+      offerDetail,
+      bindings: {},
+      bindingLocks: {},
+      placementContext: {
+        placementInstanceId: 12,
+        matchingContext: { prId: 29 },
+      },
+    });
+
+    expect(payload?.placementContext).toEqual({
+      placementInstanceId: 12,
+      matchingContext: { prId: 29 },
+    });
+  });
+
+  it("drops invalid placement context without rejecting the entry", () => {
+    const payload = normalizeOrderingEntryPayload({
+      source: { offerId: 2 },
+      offerDetail,
+      bindings: {},
+      bindingLocks: {},
+      placementContext: {
+        placementInstanceId: "12",
+        matchingContext: { prId: 29 },
+      },
+    });
+
+    expect(payload).not.toBeNull();
+    expect(payload?.placementContext).toBeUndefined();
+  });
+});
diff --git a/apps/frontend/src/domains/commerce/model/ordering-entry-storage.ts b/apps/frontend/src/domains/commerce/model/ordering-entry-storage.ts
index 2fc730d45..a0b99e1e4 100644
--- a/apps/frontend/src/domains/commerce/model/ordering-entry-storage.ts
+++ b/apps/frontend/src/domains/commerce/model/ordering-entry-storage.ts
@@ -10,6 +10,12 @@ export type OrderingEntryPayload = {
   prId?: number;
   bindings: Record<string, unknown>;
   bindingLocks: Record<string, true>;
+  placementContext?: OrderingEntryPlacementContext;
+};
+
+export type OrderingEntryPlacementContext = {
+  placementInstanceId: number;
+  matchingContext: unknown;
 };
 
 const isRecord = (value: unknown): value is Record<string, unknown> =>
@@ -22,11 +28,27 @@ const normalizeBindingLocks = (value: unknown): Record<string, true> => {
   );
 };
 
+const normalizePlacementContext = (value: unknown): OrderingEntryPlacementContext | undefined => {
+  if (!isRecord(value)) return undefined;
+  if (
+    typeof value.placementInstanceId !== "number" ||
+    !Number.isInteger(value.placementInstanceId) ||
+    value.placementInstanceId <= 0
+  ) {
+    return undefined;
+  }
+  return {
+    placementInstanceId: value.placementInstanceId,
+    matchingContext: value.matchingContext,
+  };
+};
+
 export const normalizeOrderingEntryPayload = (value: unknown): OrderingEntryPayload | null => {
   if (!isRecord(value)) return null;
   const source = value.source;
   if (!isRecord(source) || typeof source.offerId !== "number") return null;
   if (!isRecord(value.offerDetail)) return null;
+  const placementContext = normalizePlacementContext(value.placementContext);
 
   return {
     source: {
@@ -36,6 +58,7 @@ export const normalizeOrderingEntryPayload = (value: unknown): OrderingEntryPayl
     prId: typeof value.prId === "number" ? value.prId : undefined,
     bindings: isRecord(value.bindings) ? value.bindings : {},
     bindingLocks: normalizeBindingLocks(value.bindingLocks),
+    ...(placementContext ? { placementContext } : {}),
   };
 };
 
diff --git a/apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue b/apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue
index 5a8224359..4fc2991b4 100644
--- a/apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue
+++ b/apps/frontend/src/domains/commerce/ui/ordering/RideHailingOrderingContent.vue
@@ -46,38 +46,19 @@
               </PuButton>
             </template>
           </PuInlineNotice>
-          <PuFormItem
+          <UserPhoneNumberEditor
             v-if="listingBlocker.reason === 'missing-contact-phone'"
+            id="ride-hailing-contact-phone"
             label="联系人电话"
-            for-id="ride-hailing-contact-phone"
-            :hint="rideContactPhoneHint"
-            :error="rideContactPhoneDraftError ?? undefined"
+            placeholder="请输入联系人手机号"
+            submit-label="保存并刷新"
+            data-testid-prefix="ordering.ride-hailing.contact-phone"
+            :allow-clear="false"
             required
-          >
-            <PuInput
-              id="ride-hailing-contact-phone"
-              v-model="rideContactPhoneDraft"
-              native-type="tel"
-              inputmode="numeric"
-              autocomplete="tel"
-              :maxlength="11"
-              clearable
-              placeholder="请输入联系人手机号"
-              data-testid="ordering.ride-hailing.contact-phone"
-            />
-            <template #labelTrailing>
-              <PuButton
-                size="sm"
-                tone="primary"
-                variant="soft"
-                :disabled="!canCommitRideContactPhone"
-                data-testid="ordering.ride-hailing.contact-phone.confirm"
-                @click="commitRideContactPhone"
-              >
-                确认并加载
-              </PuButton>
-            </template>
-          </PuFormItem>
+            :disabled="orderingEntryRefreshing"
+            :external-loading="orderingEntryRefreshing"
+            @saved="emit('refresh:ordering-entry')"
+          />
         </div>
         <div
           v-else-if="showsRideListingError"
@@ -242,9 +223,7 @@ import {
   PuDrawer,
   PuFloatPanel,
   type PuFloatPanelStop,
-  PuFormItem,
   PuInlineNotice,
-  PuInput,
   PuSkeleton,
   usePuSelect,
 } from "@partner-up-dev/design-web";
@@ -277,10 +256,10 @@ import {
   resolveRoutePointRole,
 } from "@/domains/route/model/route";
 import RouteMap from "@/domains/route/ui/RouteMap.vue";
+import UserPhoneNumberEditor from "@/domains/user/ui/UserPhoneNumberEditor.vue";
 import type { MapFitPadding } from "@/shared/map/types";
 import RideHailingSkuCard from "./RideHailingSkuCard.vue";
 import {
-  isRideHailingContactPhoneComplete,
   type RideHailingListingBlocker,
   resolveRideHailingListingBlocker,
   resolveRideHailingListingSurfaceState,
@@ -299,12 +278,14 @@ type RidePanelStopValue = "minimized" | "normal" | "expanded";
 const props = defineProps<{
   input: OrderingContentInput;
   listingRefreshKey: number;
+  orderingEntryRefreshing: boolean;
 }>();
 
 const emit = defineEmits<{
   "update:output": [value: OrderingContentOutput | null];
   "update:summary": [value: OrderingContentSummary];
   "resolve:blocker": [value: RideHailingListingBlocker];
+  "refresh:ordering-entry": [];
 }>();
 
 const CONTROL_ROW_HEIGHT = 44;
@@ -313,8 +294,6 @@ const DEFAULT_CONTENT_HEIGHT = 720;
 const contentRoot = ref<HTMLElement | null>(null);
 const contentHeight = ref(DEFAULT_CONTENT_HEIGHT);
 const ridePanelStop = ref<RidePanelStopValue>("normal");
-const rideContactPhone = ref("");
-const rideContactPhoneDraft = ref("");
 const editableRoute = ref<Route | null>(null);
 const routePointDrawerOpen = ref(false);
 const selectedRoutePointIndex = ref<number | null>(null);
@@ -557,38 +536,15 @@ const listingBlocker = computed<RideHailingListingBlocker | null>(() => {
   return resolveRideHailingListingBlocker({
     hasRideOffer: rideOffer.value !== null,
     hasRoute: rideRouteForSubmit.value !== null,
-    contactPhone: rideContactPhone.value,
+    contactPhone: boundContactPhone.value,
     riderCount: rideRiders.value.length,
   });
 });
 
-const normalizedRideContactPhoneDraft = computed(() => rideContactPhoneDraft.value.trim());
-
-const rideContactPhoneDraftError = computed(() => {
-  const phone = normalizedRideContactPhoneDraft.value;
-  if (!phone) return null;
-  return isRideHailingContactPhoneComplete(phone) ? null : "请输入 11 位大陆手机号";
-});
-
-const rideContactPhoneHint = computed(
-  () => rideContactPhoneDraftError.value ?? "输入 11 位大陆手机号后点击确认加载车型。",
-);
-
-const canCommitRideContactPhone = computed(
-  () =>
-    isRideHailingContactPhoneComplete(normalizedRideContactPhoneDraft.value) &&
-    normalizedRideContactPhoneDraft.value !== rideContactPhone.value.trim(),
-);
-
-const commitRideContactPhone = (): void => {
-  if (!canCommitRideContactPhone.value) return;
-  rideContactPhone.value = normalizedRideContactPhoneDraft.value;
-};
-
 const offerListingInput = computed<OfferListingInput | null>(() => {
   const route = rideRouteForSubmit.value;
   if (listingBlocker.value || !rideOffer.value || !route) return null;
-  const phone = rideContactPhone.value.trim();
+  const phone = boundContactPhone.value.trim();
   return {
     productType: "RIDE_HAILING",
     participants: rideRiders.value,
@@ -798,19 +754,6 @@ watch(summary, (next) => emit("update:summary", next), {
   immediate: true,
   deep: true,
 });
-
-watch(
-  boundContactPhone,
-  (next) => {
-    if (rideContactPhone.value.trim().length === 0) {
-      rideContactPhone.value = next;
-    }
-    if (rideContactPhoneDraft.value.trim().length === 0) {
-      rideContactPhoneDraft.value = next;
-    }
-  },
-  { immediate: true },
-);
 </script>
 
 <style scoped lang="scss">
diff --git a/apps/frontend/src/domains/commerce/ui/ordering/ride-hailing-listing-state.test.ts b/apps/frontend/src/domains/commerce/ui/ordering/ride-hailing-listing-state.test.ts
index 80537ab59..0f77043a8 100644
--- a/apps/frontend/src/domains/commerce/ui/ordering/ride-hailing-listing-state.test.ts
+++ b/apps/frontend/src/domains/commerce/ui/ordering/ride-hailing-listing-state.test.ts
@@ -1,16 +1,10 @@
 import { describe, expect, it } from "vitest";
 import {
-  isRideHailingContactPhoneComplete,
   resolveRideHailingListingBlocker,
   resolveRideHailingListingSurfaceState,
 } from "./ride-hailing-listing-state";
 
 describe("RideHailing listing state", () => {
-  it("requires a complete mainland China mobile phone before commit", () => {
-    expect(isRideHailingContactPhoneComplete("1380013800")).toBe(false);
-    expect(isRideHailingContactPhoneComplete("13800138000")).toBe(true);
-  });
-
   it("treats missing contact phone as waiting for input", () => {
     const blocker = resolveRideHailingListingBlocker({
       hasRideOffer: true,
@@ -32,28 +26,6 @@ describe("RideHailing listing state", () => {
     ).toBe("waiting-for-input");
   });
 
-  it("keeps listing waiting while a typed phone has not been committed", () => {
-    const committedPhone = "";
-    const blocker = resolveRideHailingListingBlocker({
-      hasRideOffer: true,
-      hasRoute: true,
-      contactPhone: committedPhone,
-      riderCount: 2,
-    });
-
-    expect(isRideHailingContactPhoneComplete("13800138000")).toBe(true);
-    expect(
-      resolveRideHailingListingSurfaceState({
-        blocker,
-        hasListingInput: false,
-        isPending: true,
-        isError: false,
-        isSuccess: false,
-        visibleOptionCount: 0,
-      }),
-    ).toBe("waiting-for-input");
-  });
-
   it("shows loading only when listing input exists and the request is pending", () => {
     expect(
       resolveRideHailingListingSurfaceState({
diff --git a/apps/frontend/src/domains/commerce/ui/ordering/ride-hailing-listing-state.ts b/apps/frontend/src/domains/commerce/ui/ordering/ride-hailing-listing-state.ts
index b13b279fe..64a6e1365 100644
--- a/apps/frontend/src/domains/commerce/ui/ordering/ride-hailing-listing-state.ts
+++ b/apps/frontend/src/domains/commerce/ui/ordering/ride-hailing-listing-state.ts
@@ -34,9 +34,6 @@ export type RideHailingListingSurfaceStateInput = {
   visibleOptionCount: number;
 };
 
-export const isRideHailingContactPhoneComplete = (value: string): boolean =>
-  /^1\d{10}$/.test(value.trim());
-
 export const resolveRideHailingListingBlocker = (
   input: RideHailingListingBlockerInput,
 ): RideHailingListingBlocker | null => {
diff --git a/apps/frontend/src/domains/commerce/use-cases/usePlacementOrderingEntryFlow.ts b/apps/frontend/src/domains/commerce/use-cases/usePlacementOrderingEntryFlow.ts
index dbcc3f248..778059442 100644
--- a/apps/frontend/src/domains/commerce/use-cases/usePlacementOrderingEntryFlow.ts
+++ b/apps/frontend/src/domains/commerce/use-cases/usePlacementOrderingEntryFlow.ts
@@ -1,5 +1,6 @@
 import { ref } from "vue";
 import { useRouter } from "vue-router";
+import type { OrderingEntryPayload } from "@/domains/commerce/model/ordering-entry-storage";
 import {
   listPrOrdersForOffer,
   type PlacementInstanceProjection,
@@ -38,7 +39,14 @@ export const usePlacementOrderingEntryFlow = () => {
         placementInstanceId: input.placement.id,
         matchingContext: input.matchingContext,
       });
-      orderingHandoff.setOrderingEntry(orderingEntry);
+      const orderingEntryPayload: OrderingEntryPayload = {
+        ...orderingEntry,
+        placementContext: {
+          placementInstanceId: input.placement.id,
+          matchingContext: input.matchingContext,
+        },
+      };
+      orderingHandoff.setOrderingEntry(orderingEntryPayload);
       await router.push({ path: "/order/new" });
     } finally {
       pendingPlacementId.value = null;
diff --git a/apps/frontend/src/domains/user/model/phone-number.test.ts b/apps/frontend/src/domains/user/model/phone-number.test.ts
new file mode 100644
index 000000000..71fe11fe4
--- /dev/null
+++ b/apps/frontend/src/domains/user/model/phone-number.test.ts
@@ -0,0 +1,13 @@
+import { describe, expect, it } from "vitest";
+import { isMainlandChinaMobilePhone, normalizeUserPhoneNumberDraft } from "./phone-number";
+
+describe("user phone number model", () => {
+  it("normalizes surrounding whitespace", () => {
+    expect(normalizeUserPhoneNumberDraft(" 13800138000 ")).toBe("13800138000");
+  });
+
+  it("accepts complete mainland China mobile phone numbers only", () => {
+    expect(isMainlandChinaMobilePhone("1380013800")).toBe(false);
+    expect(isMainlandChinaMobilePhone("13800138000")).toBe(true);
+  });
+});
diff --git a/apps/frontend/src/domains/user/model/phone-number.ts b/apps/frontend/src/domains/user/model/phone-number.ts
new file mode 100644
index 000000000..43717fd9d
--- /dev/null
+++ b/apps/frontend/src/domains/user/model/phone-number.ts
@@ -0,0 +1,4 @@
+export const normalizeUserPhoneNumberDraft = (value: string): string => value.trim();
+
+export const isMainlandChinaMobilePhone = (value: string): boolean =>
+  /^1\d{10}$/.test(normalizeUserPhoneNumberDraft(value));
diff --git a/apps/frontend/src/domains/user/ui/UserPhoneNumberEditor.vue b/apps/frontend/src/domains/user/ui/UserPhoneNumberEditor.vue
new file mode 100644
index 000000000..31c8737ea
--- /dev/null
+++ b/apps/frontend/src/domains/user/ui/UserPhoneNumberEditor.vue
@@ -0,0 +1,174 @@
+<template>
+  <div class="user-phone-number-editor">
+    <PuFormItem
+      :label="label"
+      :for-id="inputId"
+      :hint="hintText"
+      :error="draftError ?? undefined"
+      :required="required"
+    >
+      <div class="user-phone-number-editor__controls">
+        <PuInput
+          :id="inputId"
+          v-model="phoneDraft"
+          class="user-phone-number-editor__input"
+          native-type="tel"
+          inputmode="numeric"
+          autocomplete="tel"
+          :maxlength="11"
+          clearable
+          :placeholder="placeholder"
+          :disabled="fieldDisabled"
+          :data-testid="`${dataTestidPrefix}.input`"
+          @keydown.enter.prevent="handleSave"
+        />
+        <PuButton
+          class="user-phone-number-editor__submit"
+          shape="pill"
+          size="sm"
+          :disabled="!canSavePhoneNumber"
+          :loading="submitPending"
+          :data-testid="`${dataTestidPrefix}.save`"
+          @click="handleSave"
+        >
+          {{ resolvedSubmitLabel }}
+        </PuButton>
+      </div>
+    </PuFormItem>
+
+    <PuInlineNotice
+      v-if="mutationErrorMessage"
+      tone="error"
+      :message="mutationErrorMessage"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PuButton, PuFormItem, PuInlineNotice, PuInput } from "@partner-up-dev/design-web";
+import { computed, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import {
+  isMainlandChinaMobilePhone,
+  normalizeUserPhoneNumberDraft,
+} from "@/domains/user/model/phone-number";
+import { useUpdateCurrentUserPhoneNumber } from "@/domains/user/queries/useUpdateCurrentUserPhoneNumber";
+
+const props = withDefaults(
+  defineProps<{
+    id?: string;
+    label?: string;
+    placeholder?: string;
+    submitLabel?: string;
+    currentPhoneMasked?: string | null;
+    hasPhoneNumber?: boolean;
+    allowClear?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    externalLoading?: boolean;
+    dataTestidPrefix?: string;
+  }>(),
+  {
+    id: "user-phone-number",
+    label: undefined,
+    placeholder: undefined,
+    submitLabel: undefined,
+    currentPhoneMasked: null,
+    hasPhoneNumber: false,
+    allowClear: true,
+    required: false,
+    disabled: false,
+    externalLoading: false,
+    dataTestidPrefix: "user.phone",
+  },
+);
+
+const emit = defineEmits<{
+  saved: [value: { phoneNumber: string | null }];
+}>();
+
+const { t } = useI18n();
+const updatePhoneNumberMutation = useUpdateCurrentUserPhoneNumber();
+const phoneDraft = ref("");
+const submitted = ref(false);
+
+const inputId = computed(() => props.id);
+const label = computed(() => props.label ?? t("mePage.profile.phoneLabel"));
+const placeholder = computed(() => props.placeholder ?? t("mePage.profile.phonePlaceholder"));
+const resolvedSubmitLabel = computed(() => props.submitLabel ?? t("mePage.profile.savePhone"));
+const normalizedPhoneDraft = computed(() => normalizeUserPhoneNumberDraft(phoneDraft.value));
+const submitPending = computed(
+  () => updatePhoneNumberMutation.isPending.value || props.externalLoading,
+);
+const fieldDisabled = computed(() => props.disabled || submitPending.value);
+
+const draftError = computed(() => {
+  const value = normalizedPhoneDraft.value;
+  if (!value) {
+    return props.required && submitted.value ? t("mePage.profile.phoneInvalid") : null;
+  }
+  return isMainlandChinaMobilePhone(value) ? null : t("mePage.profile.phoneInvalid");
+});
+
+const canSavePhoneNumber = computed(() => {
+  const value = normalizedPhoneDraft.value;
+  const canClear = props.allowClear && props.hasPhoneNumber && value.length === 0;
+  return (
+    !fieldDisabled.value &&
+    draftError.value === null &&
+    (isMainlandChinaMobilePhone(value) || canClear)
+  );
+});
+
+const hintText = computed(() => {
+  if (draftError.value) return draftError.value;
+  if (props.currentPhoneMasked) {
+    return t("mePage.profile.phoneCurrent", {
+      phone: props.currentPhoneMasked,
+    });
+  }
+  return t("mePage.profile.phoneHint");
+});
+
+const mutationErrorMessage = computed(() => {
+  const error = updatePhoneNumberMutation.error.value;
+  return error instanceof Error ? error.message : null;
+});
+
+const handleSave = async (): Promise<void> => {
+  submitted.value = true;
+  if (!canSavePhoneNumber.value) return;
+
+  const phoneNumber = normalizedPhoneDraft.value || null;
+  await updatePhoneNumberMutation.mutateAsync({ phoneNumber });
+  phoneDraft.value = "";
+  submitted.value = false;
+  emit("saved", { phoneNumber });
+};
+</script>
+
+<style scoped lang="scss">
+.user-phone-number-editor {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: var(--sys-spacing-xsmall);
+}
+
+.user-phone-number-editor__controls {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: var(--sys-spacing-small);
+}
+
+.user-phone-number-editor__input {
+  flex: 1 1 12rem;
+  min-width: min(100%, 12rem);
+}
+
+.user-phone-number-editor__submit {
+  flex: 0 0 auto;
+}
+</style>
diff --git a/apps/frontend/src/pages/MePage.vue b/apps/frontend/src/pages/MePage.vue
index 6cc081f0f..e190e73ca 100644
--- a/apps/frontend/src/pages/MePage.vue
+++ b/apps/frontend/src/pages/MePage.vue
@@ -94,26 +94,13 @@
               />
             </PuFormItem>
 
-            <PuFormItem
-              :label="t('mePage.profile.phoneLabel')"
-              for-id="me-profile-phone"
-            >
-              <input
-                id="me-profile-phone"
-                v-model="phoneDraft"
-                class="text-input"
-                type="tel"
-                data-testid="me.profile.phone.input"
-                inputmode="numeric"
-                maxlength="11"
-                :placeholder="t('mePage.profile.phonePlaceholder')"
-                :disabled="!canEditProfile"
-                @keydown.enter.prevent="handleSavePhoneNumber"
-              />
-            </PuFormItem>
-            <p v-if="phoneHintText" class="profile-field-hint">
-              {{ phoneHintText }}
-            </p>
+            <UserPhoneNumberEditor
+              id="me-profile-phone"
+              data-testid-prefix="me.profile.phone"
+              :current-phone-masked="currentUser?.phoneMasked ?? null"
+              :has-phone-number="currentUser?.hasPhoneNumber ?? false"
+              :disabled="!canEditProfile"
+            />
 
             <div class="profile-actions">
               <PuButton
@@ -127,17 +114,6 @@
                 {{ t("mePage.profile.saveNickname") }}
               </PuButton>
 
-              <PuButton
-                shape="pill"
-                size="sm"
-
-                data-testid="me.profile.phone.save"
-                :disabled="!canSavePhoneNumber"
-                :loading="updatePhoneNumberMutation.isPending.value"
-                @click="handleSavePhoneNumber"
-              >
-                {{ t("mePage.profile.savePhone") }}
-              </PuButton>
             </div>
 
             <PuFileUpload
@@ -278,14 +254,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from "vue";
-import { RouterLink, useRoute } from "vue-router";
-import { useI18n } from "vue-i18n";
-import { useQueryClient } from "@tanstack/vue-query";
 import {
   PuButton,
   PuCard,
   PuFileUpload,
+  type PuFileUploadItem,
+  type PuFileUploadRejection,
+  type PuFileUploadValue,
   PuFormItem,
   PuHeader,
   PuImg,
@@ -293,26 +268,27 @@ import {
   PuLoadingState,
   PuPageScaffold,
   PuTag,
-  type PuFileUploadItem,
-  type PuFileUploadRejection,
-  type PuFileUploadValue,
 } from "@partner-up-dev/design-web";
-import { IMAGE_UPLOAD_ACCEPT } from "@/shared/upload/useDesignWebImageUpload";
-import PageFooter from "@/shared/ui/sections/PageFooter.vue";
-import { useFallbackBack } from "@/shared/routing/useFallbackBack";
-import WeChatNotificationSubscriptionsCard from "@/shared/ui/sections/WeChatNotificationSubscriptionsCard.vue";
-import APRNotificationSubscriptions from "@/shared/ui/sections/APRNotificationSubscriptions.vue";
-import { useUserSessionStore } from "@/shared/auth/useUserSessionStore";
+import { useQueryClient } from "@tanstack/vue-query";
+import { computed, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { RouterLink, useRoute } from "vue-router";
 import { useCurrentUserProfile } from "@/domains/user/queries/useCurrentUserProfile";
-import { useUpdateCurrentUserProfile } from "@/domains/user/queries/useUpdateCurrentUserProfile";
-import { useUpdateCurrentUserAvatar } from "@/domains/user/queries/useUpdateCurrentUserAvatar";
-import { useUpdateCurrentUserPhoneNumber } from "@/domains/user/queries/useUpdateCurrentUserPhoneNumber";
 import { useStartWeChatBind } from "@/domains/user/queries/useStartWeChatBind";
-import { isWeChatBrowser } from "@/shared/browser/isWeChatBrowser";
+import { useUpdateCurrentUserAvatar } from "@/domains/user/queries/useUpdateCurrentUserAvatar";
+import { useUpdateCurrentUserProfile } from "@/domains/user/queries/useUpdateCurrentUserProfile";
+import UserPhoneNumberEditor from "@/domains/user/ui/UserPhoneNumberEditor.vue";
 import { copyToClipboard } from "@/lib/clipboard";
-import { redirectToWeChatOAuthLogin } from "@/processes/wechat/oauth-login";
 import { resetAuthSessionToFreshAnonymous } from "@/processes/auth/useAuthSessionBootstrap";
+import { redirectToWeChatOAuthLogin } from "@/processes/wechat/oauth-login";
 import { queryKeys } from "@/shared/api/query-keys";
+import { useUserSessionStore } from "@/shared/auth/useUserSessionStore";
+import { isWeChatBrowser } from "@/shared/browser/isWeChatBrowser";
+import { useFallbackBack } from "@/shared/routing/useFallbackBack";
+import APRNotificationSubscriptions from "@/shared/ui/sections/APRNotificationSubscriptions.vue";
+import PageFooter from "@/shared/ui/sections/PageFooter.vue";
+import WeChatNotificationSubscriptionsCard from "@/shared/ui/sections/WeChatNotificationSubscriptionsCard.vue";
+import { IMAGE_UPLOAD_ACCEPT } from "@/shared/upload/useDesignWebImageUpload";
 
 const route = useRoute();
 const { t } = useI18n();
@@ -323,13 +299,11 @@ const queryClient = useQueryClient();
 const currentUserQuery = useCurrentUserProfile();
 const updateProfileMutation = useUpdateCurrentUserProfile();
 const updateAvatarMutation = useUpdateCurrentUserAvatar();
-const updatePhoneNumberMutation = useUpdateCurrentUserPhoneNumber();
 const startWeChatBindMutation = useStartWeChatBind();
 
 const avatarUploadValue = ref<PuFileUploadValue>(null);
 const avatarUploadError = ref<string | null>(null);
 const nicknameDraft = ref("");
-const phoneDraft = ref("");
 const copiedField = ref<"userId" | null>(null);
 const copyErrorMessage = ref<string | null>(null);
 const logoutErrorMessage = ref<string | null>(null);
@@ -349,9 +323,7 @@ const storedUserId = computed(() => userSessionStore.userId ?? null);
 const storedUserIdLabel = computed(
   () => storedUserId.value ?? t("mePage.credentials.missingUserId"),
 );
-const isWeChatEnv = computed(() =>
-  typeof navigator === "undefined" ? false : isWeChatBrowser(),
-);
+const isWeChatEnv = computed(() => (typeof navigator === "undefined" ? false : isWeChatBrowser()));
 const bindFeedbackCode = computed(() => {
   const raw = route.query.wechatBind;
   if (typeof raw === "string") return raw;
@@ -385,35 +357,6 @@ const canSaveNickname = computed(() => {
     !updateProfileMutation.isPending.value
   );
 });
-const normalizedPhoneDraft = computed(() => phoneDraft.value.trim());
-const currentPhoneLabel = computed(() => currentUser.value?.phoneMasked ?? "");
-const phoneDraftError = computed(() => {
-  const value = normalizedPhoneDraft.value;
-  if (!value) return null;
-  return /^1\d{10}$/.test(value)
-    ? null
-    : t("mePage.profile.phoneInvalid");
-});
-const canSavePhoneNumber = computed(() => {
-  const value = normalizedPhoneDraft.value;
-  const hasPhone = currentUser.value?.hasPhoneNumber ?? false;
-  return (
-    canEditProfile.value &&
-    !phoneDraftError.value &&
-    (value.length > 0 || hasPhone) &&
-    value !== currentPhoneLabel.value &&
-    !updatePhoneNumberMutation.isPending.value
-  );
-});
-const phoneHintText = computed(() => {
-  if (phoneDraftError.value) return phoneDraftError.value;
-  if (currentUser.value?.phoneMasked) {
-    return t("mePage.profile.phoneCurrent", {
-      phone: currentUser.value.phoneMasked,
-    });
-  }
-  return t("mePage.profile.phoneHint");
-});
 const wechatIdentityActionPending = computed(() =>
   userSessionStore.isAuthenticated
     ? startWeChatBindMutation.isPending.value
@@ -449,7 +392,6 @@ const errorMessage = computed(() => {
     currentUserQuery.error.value,
     updateProfileMutation.error.value,
     updateAvatarMutation.error.value,
-    updatePhoneNumberMutation.error.value,
     startWeChatBindMutation.error.value,
     notificationSubscriptionsPanelError.value,
   ];
@@ -477,22 +419,12 @@ const handleSaveNickname = async () => {
   });
 };
 
-const handleSavePhoneNumber = async () => {
-  if (!canSavePhoneNumber.value) return;
-  await updatePhoneNumberMutation.mutateAsync({
-    phoneNumber: normalizedPhoneDraft.value || null,
-  });
-  phoneDraft.value = "";
-};
-
 const handleAvatarUploadUpdate = (value: PuFileUploadValue) => {
   avatarUploadValue.value = value;
   avatarUploadError.value = null;
 };
 
-const handleAvatarUploadAdd = async (
-  item: PuFileUploadItem,
-): Promise<void> => {
+const handleAvatarUploadAdd = async (item: PuFileUploadItem): Promise<void> => {
   if (!item.file) {
     avatarUploadValue.value = item;
     return;
@@ -569,10 +501,8 @@ const handleLogout = async () => {
     queryClient.setQueryData(queryKeys.user.me(), null);
     queryClient.removeQueries({ queryKey: queryKeys.user.me() });
     nicknameDraft.value = "";
-    phoneDraft.value = "";
   } catch (error) {
-    logoutErrorMessage.value =
-      error instanceof Error ? error.message : t("mePage.logout.failed");
+    logoutErrorMessage.value = error instanceof Error ? error.message : t("mePage.logout.failed");
   } finally {
     logoutPending.value = false;
   }
@@ -595,8 +525,7 @@ const handleCopyCredential = async (value: string | null) => {
       }
     }, 1500);
   } catch (error) {
-    copyErrorMessage.value =
-      error instanceof Error ? error.message : t("common.copyFailed");
+    copyErrorMessage.value = error instanceof Error ? error.message : t("common.copyFailed");
   }
 };
 </script>
diff --git a/apps/frontend/src/pages/OrderingPage.vue b/apps/frontend/src/pages/OrderingPage.vue
index a2d81bb48..fea17f487 100644
--- a/apps/frontend/src/pages/OrderingPage.vue
+++ b/apps/frontend/src/pages/OrderingPage.vue
@@ -38,9 +38,11 @@
         v-else-if="rideOrdering && orderingContentInput"
         :input="orderingContentInput"
         :listing-refresh-key="listingRefreshKey"
+        :ordering-entry-refreshing="orderingEntryRefreshPending"
         @update:output="contentOutput = $event"
         @update:summary="contentSummary = $event"
         @resolve:blocker="handleRideListingBlocker"
+        @refresh:ordering-entry="refreshOrderingEntryFromPlacementContext"
       />
     </div>
 
@@ -115,7 +117,11 @@ import type {
   OrderingContentSummary,
 } from "@/domains/commerce/model/ordering-content";
 import type { OrderingEntryPayload } from "@/domains/commerce/model/ordering-entry-storage";
-import { type CreateOrderInput, useCreateOrder } from "@/domains/commerce/queries/useCommerce";
+import {
+  type CreateOrderInput,
+  resolvePlacementOrderingEntry,
+  useCreateOrder,
+} from "@/domains/commerce/queries/useCommerce";
 import OrderingFooterActionBar from "@/domains/commerce/ui/ordering/OrderingFooterActionBar.vue";
 import OrderingPageShell from "@/domains/commerce/ui/ordering/OrderingPageShell.vue";
 import OrderingPriceDetailDrawer from "@/domains/commerce/ui/ordering/OrderingPriceDetailDrawer.vue";
@@ -172,6 +178,7 @@ const contentOutput = ref<OrderingContentOutput | null>(null);
 const contentSummary = ref<OrderingContentSummary>({ price: null });
 const listingRefreshKey = ref(0);
 const priceDetailOpen = ref(false);
+const orderingEntryRefreshPending = ref(false);
 const orderingDialog = ref<OrderingDialogState>({
   open: false,
   kind: "info",
@@ -205,7 +212,12 @@ const createOrderInput = computed<CreateOrderInput | null>(() =>
   buildOrderInput(contentOutput.value),
 );
 
-const canCreate = computed(() => !!createOrderInput.value && !createOrderMutation.isPending.value);
+const canCreate = computed(
+  () =>
+    !!createOrderInput.value &&
+    !createOrderMutation.isPending.value &&
+    !orderingEntryRefreshPending.value,
+);
 
 const priceSummary = computed(() => contentSummary.value.price);
 
@@ -396,6 +408,36 @@ const submitOrder = async (): Promise<void> => {
   await createOrderFromQuoteDraft(input);
 };
 
+const refreshOrderingEntryFromPlacementContext = async (): Promise<void> => {
+  const placementContext = orderingEntry.value?.placementContext ?? null;
+  if (!placementContext) {
+    openReturnToPrDialog({
+      title: "无法刷新下单信息",
+      description: "当前下单入口缺少刷新上下文，请返回搭子请求后重新进入下单。",
+    });
+    return;
+  }
+
+  orderingEntryRefreshPending.value = true;
+  try {
+    const refreshedEntry = await resolvePlacementOrderingEntry({
+      placementInstanceId: placementContext.placementInstanceId,
+      matchingContext: placementContext.matchingContext,
+    });
+    orderingHandoff.setOrderingEntry({
+      ...refreshedEntry,
+      placementContext,
+    });
+  } catch (error) {
+    openInfoDialog({
+      title: "无法刷新下单信息",
+      description: error instanceof Error ? error.message : "请稍后重试。",
+    });
+  } finally {
+    orderingEntryRefreshPending.value = false;
+  }
+};
+
 const handleRideListingBlocker = (blocker: RideHailingListingBlocker): void => {
   if (blocker.reason === "missing-riders" && canOfferPrReadyRecovery.value) {
     openPrNotReadyRecoveryDialog({
diff --git a/tasks/ride-hailing-listing-state/00-task-packet.md b/tasks/ride-hailing-listing-state/00-task-packet.md
index e9b702b81..b49c103a1 100644
--- a/tasks/ride-hailing-listing-state/00-task-packet.md
+++ b/tasks/ride-hailing-listing-state/00-task-packet.md
@@ -87,10 +87,11 @@ This prevents disabled queries from being rendered as loading.
 For `missing-contact-phone`:
 
 - Show an in-place `PuInlineNotice` in the RideHailing vehicle panel.
-- Provide a telephone input in-place so the user can complete the missing
-  contact phone without leaving the page.
-- The typed phone is only a draft. Listing may start only after the user
-  explicitly confirms the complete phone value.
+- Reuse the user-domain phone editor in-place so the user can update their
+  profile phone without leaving the page.
+- After phone save succeeds, re-resolve ordering-entry from the original
+  placement context. Listing may start only from the refreshed ordering-entry
+  bindings.
 
 For `missing-route`:
 
@@ -136,25 +137,50 @@ Planned verification after implementation starts:
   - `ready`
 - `RideHailingOrderingContent` now shows skeletons only when listing input exists
   and the listing query is pending.
-- Missing contact phone is recoverable in-place through a telephone input plus
-  explicit confirm action in the RideHailing vehicle panel. The live draft does
-  not participate in listing input.
+- Missing contact phone is recoverable in-place through the same user-domain
+  phone editor used by Me Page.
+- The RideHailing page does not commit a page-local contact phone. Phone save
+  updates current-user profile truth, then the page refreshes ordering-entry and
+  lets the normal listing query start from refreshed `bindings.contactPhone`.
 - Missing route / missing riders / missing offer surface blocking notices with
   action paths into the parent `PuDialog` recovery flow.
 - Successful listing with zero visible vehicle candidates is treated as an error
   surface, not as loading.
 
+## Correction: Phone Owner Boundary
+
+The in-place phone recovery should not write a page-local listing phone at all.
+`contactPhone` in ordering-entry is a derived binding from current user /
+participant profile truth. The correct recovery chain is:
+
+1. User edits and submits their profile phone number through the same user-domain
+   phone edit capability used by Me Page.
+2. Frontend re-resolves `POST /api/placements/:instanceId/ordering-entry` with
+   the original placement id and matching context.
+3. Ordering handoff store is replaced with the fresh ordering-entry.
+4. RideHailing listing input becomes available from refreshed bindings and the
+   normal listing query starts.
+
+Implication:
+
+- A reusable high-cohesion user phone editor should own phone draft validation,
+  submit button, backend mutation, loading/error state, and current-phone hint.
+- Me Page should consume that component instead of duplicating phone-edit logic.
+- RideHailing ordering should consume the same component and, on successful
+  phone save, refresh ordering-entry rather than committing a local contact
+  phone into listing input.
+
 ## Verification Run
 
-- `pnpm --filter @partner-up-dev/frontend test:unit -- src/domains/commerce/ui/ordering/ride-hailing-listing-state.test.ts`
-  - passed; Vitest selected the frontend project and reported 35 files / 159
+- `pnpm --filter @partner-up-dev/frontend test:unit -- src/domains/commerce/ui/ordering/ride-hailing-listing-state.test.ts src/domains/commerce/model/ordering-entry-storage.test.ts src/domains/user/model/phone-number.test.ts`
+  - passed; Vitest selected the frontend project and reported 37 files / 163
     tests passed.
 - `pnpm check:type:frontend`
   - passed.
 - `pnpm check:lint:frontend`
   - passed; naming audit still reports the pre-existing weak-name findings for
     `RideHailingOrderContent` and `RideHailingOrderingContent`.
-- Direct file Biome check over touched frontend files and this packet passed.
+- Direct file Biome check over touched frontend files passed.
 
 ## Next Step
 

From b4a73992326440cc153d57ba979f7aa500b929b0 Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Tue, 30 Jun 2026 11:05:01 +0800
Subject: [PATCH 74/94] feat(ride-hailing-admin): add ride-hailing order admin
 cancel flow

- add admin ride-hailing order workspace query and admin cancellation use cases + routes

- add admin RideHailing Order Admin page under RideHailing nav with cancel action

- extend API query keys/localization/navigation and routing for new page

- update product and unit contracts for admin order workspace/cancel API

- add scenario test covering admin cancel dispatching order
---
 ...dmin-ride-hailing-management.controller.ts |  35 ++
 .../admin-ride-hailing-management/index.ts    |   2 +
 .../cancel-admin-ride-hailing-order.ts        |   8 +
 .../get-admin-ride-hailing-order-workspace.ts |  70 +++
 .../use-cases/order-workspace-view.ts         |  56 ++
 ...el-ride-hailing-order-from-order-detail.ts |  81 ++-
 .../admin-ride-hailing-order.scenario.test.ts | 406 ++++++++++++++
 apps/frontend/src/app/router.ts               |  10 +
 .../queries/useAdminRideHailing.ts            |  40 ++
 .../ui/navigation/adminNavigationModel.ts     |   6 +
 apps/frontend/src/locales/schema.ts           |   2 +
 apps/frontend/src/locales/zh-CN.jsonc         |   2 +
 .../src/pages/AdminRideHailingOrderPage.vue   | 506 ++++++++++++++++++
 apps/frontend/src/shared/api/query-keys.ts    |   1 +
 docs/10-prd/behavior/capabilities.md          |   1 +
 docs/20-product-tdd/cross-unit-contracts.md   |   3 +
 docs/20-product-tdd/ecommerce-contracts.md    |   2 +
 .../00-task-packet.md                         |  34 ++
 18 files changed, 1247 insertions(+), 18 deletions(-)
 create mode 100644 apps/backend/src/domains/admin-ride-hailing-management/use-cases/cancel-admin-ride-hailing-order.ts
 create mode 100644 apps/backend/src/domains/admin-ride-hailing-management/use-cases/get-admin-ride-hailing-order-workspace.ts
 create mode 100644 apps/backend/src/domains/admin-ride-hailing-management/use-cases/order-workspace-view.ts
 create mode 100644 apps/backend/tests/ride-hailing/admin-ride-hailing-order.scenario.test.ts
 create mode 100644 apps/frontend/src/pages/AdminRideHailingOrderPage.vue
 create mode 100644 tasks/admin-ride-hailing-order-admin/00-task-packet.md

diff --git a/apps/backend/src/controllers/admin-ride-hailing-management.controller.ts b/apps/backend/src/controllers/admin-ride-hailing-management.controller.ts
index 5af562433..ad65f6878 100644
--- a/apps/backend/src/controllers/admin-ride-hailing-management.controller.ts
+++ b/apps/backend/src/controllers/admin-ride-hailing-management.controller.ts
@@ -2,6 +2,8 @@ import { Hono } from "hono";
 import { zValidator } from "@hono/zod-validator";
 import { z } from "zod";
 import {
+  cancelAdminRideHailingOrder,
+  getAdminRideHailingOrderWorkspace,
   createAdminRideHailingProviderInstance,
   getAdminRideHailingProviderWorkspace,
   updateAdminRideHailingProviderInstance,
@@ -42,6 +44,10 @@ const providerInstanceIdParamSchema = z.object({
   providerInstanceId: z.string().uuid(),
 });
 
+const orderIdParamSchema = z.object({
+  orderId: z.string().uuid(),
+});
+
 const adminRideHailingProviderInstanceInputSchema = z.object({
   providerType: z.literal("CAOCAO"),
   instanceKey: z.string().trim().min(1),
@@ -94,6 +100,18 @@ type AdminRideHailingManagementSchema = {
       Awaited<ReturnType<typeof updateAdminRideHailingProviderInstance>>
     >;
   };
+  "/ride-hailing/orders/workspace": {
+    $get: JsonEndpoint<
+      EmptyInput,
+      Awaited<ReturnType<typeof getAdminRideHailingOrderWorkspace>>
+    >;
+  };
+  "/ride-hailing/orders/:orderId/cancel": {
+    $post: JsonEndpoint<
+      UuidParam<"orderId">,
+      Awaited<ReturnType<typeof cancelAdminRideHailingOrder>>
+    >;
+  };
 };
 
 export const adminRideHailingManagementRoute: Hono<
@@ -105,6 +123,10 @@ export const adminRideHailingManagementRoute: Hono<
     const result = await getAdminRideHailingProviderWorkspace();
     return c.json(result);
   })
+  .get("/ride-hailing/orders/workspace", async (c) => {
+    const result = await getAdminRideHailingOrderWorkspace();
+    return c.json(result);
+  })
   .post(
     "/ride-hailing/provider-instances",
     zValidator("json", adminRideHailingProviderInstanceInputSchema),
@@ -128,4 +150,17 @@ export const adminRideHailingManagementRoute: Hono<
       });
       return c.json(result);
     },
+  )
+  .post(
+    "/ride-hailing/orders/:orderId/cancel",
+    zValidator("param", orderIdParamSchema),
+    async (c) => {
+      const { orderId } = c.req.valid("param");
+      const auth = c.get("auth");
+      const result = await cancelAdminRideHailingOrder({
+        orderId,
+        actorUserId: auth.userId!,
+      });
+      return c.json(result);
+    },
   );
diff --git a/apps/backend/src/domains/admin-ride-hailing-management/index.ts b/apps/backend/src/domains/admin-ride-hailing-management/index.ts
index e39cbb020..695b6f53d 100644
--- a/apps/backend/src/domains/admin-ride-hailing-management/index.ts
+++ b/apps/backend/src/domains/admin-ride-hailing-management/index.ts
@@ -1,2 +1,4 @@
+export * from "./use-cases/cancel-admin-ride-hailing-order";
+export * from "./use-cases/get-admin-ride-hailing-order-workspace";
 export * from "./use-cases/get-admin-ride-hailing-provider-workspace";
 export * from "./use-cases/save-admin-ride-hailing-provider-instance";
diff --git a/apps/backend/src/domains/admin-ride-hailing-management/use-cases/cancel-admin-ride-hailing-order.ts b/apps/backend/src/domains/admin-ride-hailing-management/use-cases/cancel-admin-ride-hailing-order.ts
new file mode 100644
index 000000000..d66d87830
--- /dev/null
+++ b/apps/backend/src/domains/admin-ride-hailing-management/use-cases/cancel-admin-ride-hailing-order.ts
@@ -0,0 +1,8 @@
+import { cancelRideHailingOrderFromAdmin } from "../../trade/use-cases/cancel-ride-hailing-order-from-order-detail";
+
+export async function cancelAdminRideHailingOrder(input: {
+  orderId: string;
+  actorUserId: string;
+}) {
+  return cancelRideHailingOrderFromAdmin(input);
+}
diff --git a/apps/backend/src/domains/admin-ride-hailing-management/use-cases/get-admin-ride-hailing-order-workspace.ts b/apps/backend/src/domains/admin-ride-hailing-management/use-cases/get-admin-ride-hailing-order-workspace.ts
new file mode 100644
index 000000000..5f65e7189
--- /dev/null
+++ b/apps/backend/src/domains/admin-ride-hailing-management/use-cases/get-admin-ride-hailing-order-workspace.ts
@@ -0,0 +1,70 @@
+import { BillRepository } from "../../../repositories/BillRepository";
+import { RideHailingOrderRepository } from "../../../repositories/RideHailingOrderRepository";
+import { RideHailingProviderInstanceRepository } from "../../../repositories/RideHailingProviderInstanceRepository";
+import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository";
+import type { RideHailingProviderInstanceId } from "../../../entities/ride-hailing-provider";
+import { getRideHailingChoiceSetItem, getRideHailingProviderBinding } from "../../trade/services";
+import {
+  toAdminRideHailingOrderRecordView,
+  type AdminRideHailingOrderRecordView,
+} from "./order-workspace-view";
+
+const tradeOrderRepo = new TradeOrderRepository();
+const rideOrderRepo = new RideHailingOrderRepository();
+const providerRepo = new RideHailingProviderInstanceRepository();
+const billRepo = new BillRepository();
+
+export type AdminRideHailingOrderWorkspace = {
+  orders: AdminRideHailingOrderRecordView[];
+};
+
+export async function getAdminRideHailingOrderWorkspace(): Promise<AdminRideHailingOrderWorkspace> {
+  const rideHailingOrders = (await tradeOrderRepo.listAll()).filter(
+    (order) => order.family === "RIDE_HAILING",
+  );
+  const rideHailingOrderIds = rideHailingOrders.map((order) => order.id);
+
+  const [typedOrders, providerInstances, bills] = await Promise.all([
+    rideOrderRepo.listByOrderIds(rideHailingOrderIds),
+    providerRepo.listAll(),
+    billRepo.listAll(),
+  ]);
+
+  const typedOrderByOrderId = new Map(
+    typedOrders.map((rideHailingOrder) => [rideHailingOrder.orderId, rideHailingOrder]),
+  );
+  const providerInstanceById = new Map(
+    providerInstances.map((providerInstance) => [providerInstance.id, providerInstance]),
+  );
+  const billByOrderId = new Map(
+    bills
+      .filter((bill) => rideHailingOrderIds.includes(bill.sourceOrderId))
+      .map((bill) => [bill.sourceOrderId, bill]),
+  );
+
+  return {
+    orders: rideHailingOrders.flatMap((order) => {
+      const rideHailingOrder = typedOrderByOrderId.get(order.id);
+      if (!rideHailingOrder) return [];
+
+      const rideChoiceSetItem = getRideHailingChoiceSetItem(order.items);
+      const providerBinding = rideChoiceSetItem
+        ? getRideHailingProviderBinding(rideChoiceSetItem)
+        : null;
+
+      return [
+        toAdminRideHailingOrderRecordView({
+          order,
+          rideHailingOrder,
+          providerBinding,
+          providerInstance: providerBinding
+            ? (providerInstanceById.get(
+                providerBinding.providerInstanceId as RideHailingProviderInstanceId,
+              ) ?? null)
+            : null,
+          bill: billByOrderId.get(order.id) ?? null,
+        }),
+      ];
+    }),
+  };
+}
diff --git a/apps/backend/src/domains/admin-ride-hailing-management/use-cases/order-workspace-view.ts b/apps/backend/src/domains/admin-ride-hailing-management/use-cases/order-workspace-view.ts
new file mode 100644
index 000000000..509ea77f1
--- /dev/null
+++ b/apps/backend/src/domains/admin-ride-hailing-management/use-cases/order-workspace-view.ts
@@ -0,0 +1,56 @@
+import type { Bill } from "../../../entities/bill";
+import type { RideHailingOrder } from "../../../entities/ride-hailing-order";
+import type { RideHailingProviderInstance } from "../../../entities/ride-hailing-provider";
+import type { TradeOrder } from "../../../entities/trade-order";
+import type { RideHailingProviderBindingSnapshot } from "../../trade/model";
+
+export type AdminRideHailingProviderInstanceSummaryView = Pick<
+  RideHailingProviderInstance,
+  "id" | "providerType" | "instanceKey" | "status" | "displayName"
+>;
+
+export type AdminRideHailingBillSummaryView = Pick<
+  Bill,
+  "id" | "status" | "currency" | "closedAt" | "createdAt" | "updatedAt"
+>;
+
+export type AdminRideHailingOrderRecordView = {
+  order: TradeOrder;
+  rideHailingOrder: RideHailingOrder;
+  providerBinding: RideHailingProviderBindingSnapshot | null;
+  providerInstance: AdminRideHailingProviderInstanceSummaryView | null;
+  bill: AdminRideHailingBillSummaryView | null;
+};
+
+export function toAdminRideHailingOrderRecordView(input: {
+  order: TradeOrder;
+  rideHailingOrder: RideHailingOrder;
+  providerBinding: RideHailingProviderBindingSnapshot | null;
+  providerInstance: RideHailingProviderInstance | null;
+  bill: Bill | null;
+}): AdminRideHailingOrderRecordView {
+  return {
+    order: input.order,
+    rideHailingOrder: input.rideHailingOrder,
+    providerBinding: input.providerBinding,
+    providerInstance: input.providerInstance
+      ? {
+          id: input.providerInstance.id,
+          providerType: input.providerInstance.providerType,
+          instanceKey: input.providerInstance.instanceKey,
+          status: input.providerInstance.status,
+          displayName: input.providerInstance.displayName,
+        }
+      : null,
+    bill: input.bill
+      ? {
+          id: input.bill.id,
+          status: input.bill.status,
+          currency: input.bill.currency,
+          closedAt: input.bill.closedAt,
+          createdAt: input.bill.createdAt,
+          updatedAt: input.bill.updatedAt,
+        }
+      : null,
+  };
+}
diff --git a/apps/backend/src/domains/trade/use-cases/cancel-ride-hailing-order-from-order-detail.ts b/apps/backend/src/domains/trade/use-cases/cancel-ride-hailing-order-from-order-detail.ts
index cc9507f99..cb4d83497 100644
--- a/apps/backend/src/domains/trade/use-cases/cancel-ride-hailing-order-from-order-detail.ts
+++ b/apps/backend/src/domains/trade/use-cases/cancel-ride-hailing-order-from-order-detail.ts
@@ -27,13 +27,36 @@ const providerRepo = new RideHailingProviderInstanceRepository();
 const isCancellableRideHailingExecutionPhase = (phase: string): boolean =>
   phase === "DISPATCHING" || phase === "ACCEPTED" || phase === "ARRIVED_AT_PICKUP";
 
+type RideHailingCancellationActor = {
+  actorUserId: string;
+  authority: "ORDER_CREATOR" | "ADMIN";
+  providerCancelReason: string;
+  providerWhoCancel: 1 | 2;
+  terminationReason: string;
+};
+
 function createAttemptId(): string {
   return `term_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
 }
 
-export async function cancelRideHailingOrderFromOrderDetail(input: {
+const assertActorMayCancelRideHailingOrder = (
+  orderRecord: { createdBy: string },
+  actor: RideHailingCancellationActor,
+) => {
+  if (
+    actor.authority === "ORDER_CREATOR" &&
+    orderRecord.createdBy !== actor.actorUserId
+  ) {
+    return throwHttpProblem({
+      status: 403,
+      detail: "Only order creator can cancel this order",
+    });
+  }
+};
+
+async function cancelRideHailingOrder(input: {
   orderId: string;
-  actorUserId: string;
+  actor: RideHailingCancellationActor;
 }) {
   const orderRecord = await tradeOrderRepo.findById(input.orderId as TradeOrderId);
   if (!orderRecord) {
@@ -45,12 +68,7 @@ export async function cancelRideHailingOrderFromOrderDetail(input: {
       detail: "Only RideHailing orders can use this cancellation flow",
     });
   }
-  if (orderRecord.createdBy !== input.actorUserId) {
-    return throwHttpProblem({
-      status: 403,
-      detail: "Only order creator can cancel this order",
-    });
-  }
+  assertActorMayCancelRideHailingOrder(orderRecord, input.actor);
   if (orderRecord.status !== "OPEN" && orderRecord.status !== "INITIATING") {
     return throwHttpProblem({
       status: 409,
@@ -132,8 +150,8 @@ export async function cancelRideHailingOrderFromOrderDetail(input: {
   const providerCancellation = await port.cancelRide({
     providerOrderId: providerBinding.providerOrderId,
     cancelCode: 12,
-    cancelReason: "用户取消订单",
-    whoCancel: 1,
+    cancelReason: input.actor.providerCancelReason,
+    whoCancel: input.actor.providerWhoCancel,
   });
   const decidedAt = new Date().toISOString();
 
@@ -151,12 +169,7 @@ export async function cancelRideHailingOrderFromOrderDetail(input: {
         detail: "Only RideHailing orders can use this cancellation flow",
       });
     }
-    if (currentOrderRecord.createdBy !== input.actorUserId) {
-      return throwHttpProblem({
-        status: 403,
-        detail: "Only order creator can cancel this order",
-      });
-    }
+    assertActorMayCancelRideHailingOrder(currentOrderRecord, input.actor);
     if (currentOrderRecord.status !== "OPEN") {
       return throwHttpProblem({
         status: 409,
@@ -183,7 +196,7 @@ export async function cancelRideHailingOrderFromOrderDetail(input: {
     const appended = appendTerminationAttempt(order, {
       attemptId,
       requestedAt: decidedAt,
-      requestedBy: input.actorUserId as UserId,
+      requestedBy: input.actor.actorUserId as UserId,
     });
     const resolving = markTerminationAttemptResolving(
       appended,
@@ -193,7 +206,7 @@ export async function cancelRideHailingOrderFromOrderDetail(input: {
     const approved = approveTerminationAttempt(resolving, {
       attemptId,
       decidedAt,
-      reason: "用户取消订单",
+      reason: input.actor.terminationReason,
       effectKind: providerCancellation.cancelFeeFen > 0 ? "ABORT_FEE" : "NONE",
       effectAmountFen: providerCancellation.cancelFeeFen,
     });
@@ -234,3 +247,35 @@ export async function cancelRideHailingOrderFromOrderDetail(input: {
     };
   });
 }
+
+export async function cancelRideHailingOrderFromOrderDetail(input: {
+  orderId: string;
+  actorUserId: string;
+}) {
+  return cancelRideHailingOrder({
+    orderId: input.orderId,
+    actor: {
+      actorUserId: input.actorUserId,
+      authority: "ORDER_CREATOR",
+      providerCancelReason: "用户取消订单",
+      providerWhoCancel: 1,
+      terminationReason: "用户取消订单",
+    },
+  });
+}
+
+export async function cancelRideHailingOrderFromAdmin(input: {
+  orderId: string;
+  actorUserId: string;
+}) {
+  return cancelRideHailingOrder({
+    orderId: input.orderId,
+    actor: {
+      actorUserId: input.actorUserId,
+      authority: "ADMIN",
+      providerCancelReason: "管理员取消订单",
+      providerWhoCancel: 2,
+      terminationReason: "管理员取消订单",
+    },
+  });
+}
diff --git a/apps/backend/tests/ride-hailing/admin-ride-hailing-order.scenario.test.ts b/apps/backend/tests/ride-hailing/admin-ride-hailing-order.scenario.test.ts
new file mode 100644
index 000000000..83bc118e1
--- /dev/null
+++ b/apps/backend/tests/ride-hailing/admin-ride-hailing-order.scenario.test.ts
@@ -0,0 +1,406 @@
+import assert from "node:assert/strict";
+import { randomUUID } from "node:crypto";
+import { createServer, type Server } from "node:http";
+import { scenario } from "../_infra/scenario/scenario";
+import {
+  expectJsonResponse,
+  requestJson,
+} from "../_infra/http/backend-app";
+import {
+  givenAdminUser,
+  givenUser,
+  type ScenarioUser,
+} from "../pr-core/_kit/builders/users";
+import { createOffer, createProductSpu } from "../../src/domains/merchandising";
+import {
+  buildOrderParticipantsFromContext,
+  createRideHailingOrderFoundation,
+} from "../../src/domains/trade";
+import { RideHailingOrderRepository } from "../../src/repositories/RideHailingOrderRepository";
+import { RideHailingProviderInstanceRepository } from "../../src/repositories/RideHailingProviderInstanceRepository";
+import { TradeOrderRepository } from "../../src/repositories/TradeOrderRepository";
+
+const tradeOrderRepo = new TradeOrderRepository();
+const rideOrderRepo = new RideHailingOrderRepository();
+const providerRepo = new RideHailingProviderInstanceRepository();
+
+type AdminRideHailingOrderWorkspaceResponse = {
+  orders: Array<{
+    order: {
+      id: string;
+      status: string;
+      terminationAttempts: Array<{
+        status: string;
+        reason?: string | null;
+      }>;
+    };
+    rideHailingOrder: {
+      executionPhase: string;
+      routeSnapshot: {
+        origin: { name: string };
+        destination: { name: string };
+      };
+      riders: Array<{
+        displayName: string;
+      }>;
+    };
+    providerBinding: {
+      providerInstanceId: string;
+      providerOrderId: string;
+    } | null;
+    providerInstance: {
+      id: string;
+      displayName: string;
+    } | null;
+    bill: {
+      id: string;
+      status: string;
+    } | null;
+  }>;
+};
+
+type RideHailingCancelResponse = {
+  orderId: string;
+  attemptId: string;
+  status: string;
+  effectKind: string;
+  effectAmountFen: number;
+};
+
+const listen = (server: Server): Promise<string> =>
+  new Promise((resolve) => {
+    server.listen(0, "127.0.0.1", () => {
+      const address = server.address();
+      assert.equal(typeof address, "object");
+      assert.notEqual(address, null);
+      resolve(`http://127.0.0.1:${address.port}/v2`);
+    });
+  });
+
+const closeServer = (server: Server): Promise<void> =>
+  new Promise((resolve, reject) => {
+    server.close((error) => {
+      if (error) {
+        reject(error);
+        return;
+      }
+      resolve();
+    });
+  });
+
+async function listOrderParticipants(user: ScenarioUser) {
+  return buildOrderParticipantsFromContext({
+    participants: [
+      {
+        participantId: `scenario-${user.user.id}`,
+        userId: user.user.id,
+        joinedVia: "API",
+      },
+    ],
+    createdBy: user.user.id,
+  });
+}
+
+async function givenRideHailingOffer() {
+  const spu = await createProductSpu({
+    name: "Scenario ride hailing admin order",
+    productType: "RIDE_HAILING",
+    status: "ACTIVE",
+    salesPolicy: {
+      skuSelectionPolicy: {
+        type: "CHOICE_SET",
+        min: 1,
+        max: null,
+        resolvesTo: 1,
+      },
+      quantityPolicy: {
+        type: "FIXED",
+        quantity: 1,
+      },
+    },
+    servicePolicy: {
+      type: "RIDE_HAILING",
+    },
+    presentation: {
+      heroImageAssetIds: [],
+      detailImageAssetIds: [],
+      sellingPoints: [],
+      parameterGroups: [],
+      noticeBlocks: [],
+    },
+  });
+
+  const offer = await createOffer({
+    productType: "RIDE_HAILING",
+    spuIds: [spu.id],
+    status: "ACTIVE",
+    pricingRules: [],
+    termsVersion: 1,
+  });
+
+  return { offer, spu };
+}
+
+scenario("admin_ride_hailing_order_workspace_can_cancel_dispatching_order", async () => {
+  const admin = await givenAdminUser("ride-hailing-order-admin");
+  const creator = await givenUser("ride-hailing-order-owner");
+  const participants = await listOrderParticipants(creator);
+  const { offer } = await givenRideHailingOffer();
+  const providerOrderId = `CC-ADMIN-${randomUUID().slice(0, 8)}`;
+
+  const fakeCaocao = createServer((request, response) => {
+    if (request.url?.startsWith("/v2/common/queryOrderDetailV2")) {
+      response.writeHead(200, { "Content-Type": "application/json" });
+      response.end(
+        JSON.stringify({
+          code: 200,
+          success: true,
+          data: {
+            phase: "DISPATCHING",
+            finalAmountFen: null,
+            driver: null,
+            vehicle: null,
+          },
+        }),
+      );
+      return;
+    }
+
+    if (request.url === "/v2/common/cancelOrderV3" && request.method === "POST") {
+      response.writeHead(200, { "Content-Type": "application/json" });
+      response.end(
+        JSON.stringify({
+          code: 200,
+          success: true,
+          data: {
+            orderNo: providerOrderId,
+            cancelFee: 800,
+          },
+        }),
+      );
+      return;
+    }
+
+    response.writeHead(404, { "Content-Type": "application/json" });
+    response.end(JSON.stringify({ code: 404, success: false }));
+  });
+
+  const endpointBaseUrl = await listen(fakeCaocao);
+
+  try {
+    const provider = await providerRepo.create({
+      providerType: "CAOCAO",
+      instanceKey: `scenario-admin-order-${randomUUID()}`,
+      status: "ACTIVE",
+      displayName: "Scenario Admin Caocao",
+      config: {
+        adapterMode: "CAOCAO_OPEN_API",
+        caocaoClientId: "scenario-admin-order-client",
+        signKey: "scenario-admin-order-secret",
+        endpointBaseUrl,
+        callbackBaseUrl: "https://api.partner-up.test",
+      },
+    });
+
+    const itemId = randomUUID();
+    const result = await createRideHailingOrderFoundation({
+      createdBy: creator.user.id,
+      participants,
+      offerId: offer.id,
+      items: [
+        {
+          kind: "CHOICE_SET",
+          itemId,
+          productType: "RIDE_HAILING",
+          candidates: [
+            {
+              sku: {
+                id: 901001,
+                version: 1,
+                name: "Scenario Admin Ride",
+                presentationSnapshot: {
+                  heroImageAssetIds: [],
+                  detailImageAssetIds: [],
+                  sellingPoints: [],
+                  parameterGroups: [],
+                  noticeBlocks: [],
+                },
+                factsSnapshot: {
+                  rideHailingProviderInstanceId: provider.id,
+                  providerVehicleTypeCode: "1",
+                },
+                pricingModelSnapshot: {
+                  type: "DYNAMIC_QUOTE",
+                  calculatorSpec: {},
+                },
+                cancellationPolicySnapshot: null,
+              },
+              quoteSnapshot: {
+                amountFen: 3600,
+                currency: "CNY",
+                displayName: "Scenario Admin Ride",
+                estimateAmountFen: 3600,
+                quotedAt: "2031-03-01T09:00:00.000Z",
+                explanations: [],
+              },
+            },
+          ],
+          resolution: null,
+          quantity: 1,
+        },
+      ],
+      pricingSnapshot: {
+        currency: "CNY",
+        itemBreakdowns: [
+          {
+            itemId,
+            resolvedAmountFen: 3600,
+            explanations: [],
+          },
+        ],
+        orderLevelExplanations: [],
+        subtotalFen: 3600,
+        totalFen: 3600,
+      },
+      routeSnapshot: {
+        origin: {
+          name: "Scenario pickup",
+          address: "A road",
+          latitude: 30.2601,
+          longitude: 120.1531,
+        },
+        waypoints: [],
+        destination: {
+          name: "Scenario destination",
+          address: "B road",
+          latitude: 30.2801,
+          longitude: 120.1731,
+        },
+        drivingPlan: {
+          distanceMeters: 8200,
+          durationSeconds: 1500,
+          polyline: [
+            {
+              latitude: 30.2601,
+              longitude: 120.1531,
+            },
+            {
+              latitude: 30.2801,
+              longitude: 120.1731,
+            },
+          ],
+        },
+      },
+      departureAt: null,
+      riders: [
+        {
+          userId: creator.user.id,
+          displayName: "Scenario rider",
+          phoneMasked: "138****8000",
+        },
+      ],
+      contactPhone: "13800138000",
+    });
+
+    const baseOrder = await tradeOrderRepo.findById(result.orderId);
+    assert.ok(baseOrder);
+    const choiceSetItem =
+      baseOrder.items[0]?.kind === "CHOICE_SET" ? baseOrder.items[0] : null;
+    assert.ok(choiceSetItem);
+
+    const resolvedItems = [
+      {
+        ...choiceSetItem,
+        resolution: {
+          sku: choiceSetItem.candidates[0]?.sku ?? null,
+          providerVehicleTypeCode: "1",
+          providerVehicleTypeName: "Scenario Admin Ride",
+          quoteSnapshot: choiceSetItem.candidates[0]?.quoteSnapshot ?? null,
+          providerBinding: {
+            providerInstanceId: provider.id,
+            providerType: provider.providerType,
+            providerOrderId,
+            providerSnapshot: null,
+          },
+          source: "DISPATCH_POLICY" as const,
+          candidateRelation: "IN_CANDIDATES" as const,
+          reason: "Scenario dispatch",
+          resolvedAt: "2031-03-01T09:01:00.000Z",
+        },
+      },
+    ];
+
+    await tradeOrderRepo.replaceItems(baseOrder.id, resolvedItems);
+    await tradeOrderRepo.updateStatus(baseOrder.id, "OPEN");
+    await rideOrderRepo.updateByOrderId(baseOrder.id, {
+      executionPhase: "DISPATCHING",
+    });
+
+    const workspaceResponse = await requestJson(
+      "/api/admin/ride-hailing/orders/workspace",
+      {
+        method: "GET",
+        token: admin.token,
+      },
+    );
+    const workspace =
+      await expectJsonResponse<AdminRideHailingOrderWorkspaceResponse>(
+        workspaceResponse,
+        200,
+      );
+    const record = workspace.orders.find((order) => order.order.id === baseOrder.id);
+    assert.ok(record);
+    assert.equal(record.order.status, "OPEN");
+    assert.equal(record.rideHailingOrder.executionPhase, "DISPATCHING");
+    assert.equal(record.providerBinding?.providerOrderId, providerOrderId);
+    assert.equal(record.providerInstance?.id, provider.id);
+
+    const cancelResponse = await requestJson(
+      `/api/admin/ride-hailing/orders/${baseOrder.id}/cancel`,
+      {
+        method: "POST",
+        token: admin.token,
+      },
+    );
+    const cancelled =
+      await expectJsonResponse<RideHailingCancelResponse>(cancelResponse, 200);
+
+    assert.equal(cancelled.orderId, baseOrder.id);
+    assert.equal(cancelled.status, "CANCELLED");
+    assert.equal(cancelled.effectKind, "ABORT_FEE");
+    assert.equal(cancelled.effectAmountFen, 800);
+
+    const persistedOrder = await tradeOrderRepo.findById(baseOrder.id);
+    assert.ok(persistedOrder);
+    assert.equal(persistedOrder.status, "CANCELLED");
+    assert.equal(persistedOrder.terminationAttempts.length, 1);
+    assert.equal(persistedOrder.terminationAttempts[0]?.status, "APPROVED");
+    assert.equal(persistedOrder.terminationAttempts[0]?.reason, "管理员取消订单");
+    assert.equal(persistedOrder.terminationAttempts[0]?.requestedBy, admin.user.id);
+
+    const persistedRideOrder = await rideOrderRepo.findByOrderId(baseOrder.id);
+    assert.ok(persistedRideOrder);
+    assert.equal(persistedRideOrder.executionPhase, "CANCELLED");
+
+    const refreshedWorkspaceResponse = await requestJson(
+      "/api/admin/ride-hailing/orders/workspace",
+      {
+        method: "GET",
+        token: admin.token,
+      },
+    );
+    const refreshedWorkspace =
+      await expectJsonResponse<AdminRideHailingOrderWorkspaceResponse>(
+        refreshedWorkspaceResponse,
+        200,
+      );
+    const refreshedRecord = refreshedWorkspace.orders.find(
+      (order) => order.order.id === baseOrder.id,
+    );
+    assert.ok(refreshedRecord);
+    assert.equal(refreshedRecord.order.status, "CANCELLED");
+    assert.equal(refreshedRecord.rideHailingOrder.executionPhase, "CANCELLED");
+  } finally {
+    await closeServer(fakeCaocao);
+  }
+});
diff --git a/apps/frontend/src/app/router.ts b/apps/frontend/src/app/router.ts
index 621c05ea5..505244010 100644
--- a/apps/frontend/src/app/router.ts
+++ b/apps/frontend/src/app/router.ts
@@ -34,6 +34,7 @@ const AdminCommerceOrderBillPage = () => import("@/pages/AdminCommerceOrderBillP
 const AdminCommerceFulfillmentPage = () => import("@/pages/AdminCommerceFulfillmentPage.vue");
 const AdminPaymentPage = () => import("@/pages/AdminPaymentPage.vue");
 const AdminRideHailingPage = () => import("@/pages/AdminRideHailingPage.vue");
+const AdminRideHailingOrderPage = () => import("@/pages/AdminRideHailingOrderPage.vue");
 const AdminFeedbackQuestionnairesPage = () => import("@/pages/AdminFeedbackQuestionnairesPage.vue");
 const ContactAuthorPage = () => import("@/pages/ContactAuthorPage.vue");
 const ContactSupportPage = () => import("@/pages/ContactSupportPage.vue");
@@ -346,6 +347,15 @@ const routes: RouteRecordRaw[] = [
       requiredRoles: ["service"],
     },
   },
+  {
+    path: "/admin/ride-hailing/orders",
+    name: "admin-ride-hailing-orders",
+    component: AdminRideHailingOrderPage,
+    meta: {
+      wechatSharePolicy: "route",
+      requiredRoles: ["service"],
+    },
+  },
   {
     path: "/admin/feedback-questionnaires",
     name: "admin-feedback-questionnaires",
diff --git a/apps/frontend/src/domains/admin-ride-hailing/queries/useAdminRideHailing.ts b/apps/frontend/src/domains/admin-ride-hailing/queries/useAdminRideHailing.ts
index eb012efc6..31a19a24c 100644
--- a/apps/frontend/src/domains/admin-ride-hailing/queries/useAdminRideHailing.ts
+++ b/apps/frontend/src/domains/admin-ride-hailing/queries/useAdminRideHailing.ts
@@ -15,10 +15,14 @@ const readErrorMessage = async (
 type AdminApi = typeof adminClient.api.admin;
 type RideHailingApi = AdminApi["ride-hailing"];
 type ProviderInstancesApi = RideHailingApi["provider-instances"];
+type OrdersApi = RideHailingApi["orders"];
 
 export type AdminRideHailingProviderWorkspaceResponse = InferResponseType<
   ProviderInstancesApi["workspace"]["$get"]
 >;
+export type AdminRideHailingOrderWorkspaceResponse = InferResponseType<
+  OrdersApi["workspace"]["$get"]
+>;
 
 export type AdminRideHailingProviderInstanceInput = {
   providerType: "CAOCAO";
@@ -51,6 +55,21 @@ export const useAdminRideHailingProviderWorkspace = (
     enabled: computed(() => unref(enabled)),
   });
 
+export const useAdminRideHailingOrderWorkspace = (
+  enabled: MaybeRef<boolean> = true,
+) =>
+  useQuery<AdminRideHailingOrderWorkspaceResponse>({
+    queryKey: queryKeys.admin.rideHailingOrdersWorkspace(),
+    queryFn: async () => {
+      const res = await adminClient.api.admin["ride-hailing"].orders.workspace.$get();
+      if (!res.ok) {
+        throw new Error(await readErrorMessage(res, "获取网约车订单工作台失败"));
+      }
+      return await res.json();
+    },
+    enabled: computed(() => unref(enabled)),
+  });
+
 export const useCreateAdminRideHailingProviderInstance = () => {
   const queryClient = useQueryClient();
 
@@ -73,6 +92,27 @@ export const useCreateAdminRideHailingProviderInstance = () => {
   });
 };
 
+export const useCancelAdminRideHailingOrder = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({ orderId }: { orderId: string }) => {
+      const res = await adminClient.api.admin["ride-hailing"].orders[":orderId"].cancel.$post({
+        param: { orderId },
+      });
+      if (!res.ok) {
+        throw new Error(await readErrorMessage(res, "取消网约车订单失败"));
+      }
+      return await res.json();
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.admin.rideHailingOrdersWorkspace(),
+      });
+    },
+  });
+};
+
 export const useUpdateAdminRideHailingProviderInstance = () => {
   const queryClient = useQueryClient();
 
diff --git a/apps/frontend/src/domains/admin/ui/navigation/adminNavigationModel.ts b/apps/frontend/src/domains/admin/ui/navigation/adminNavigationModel.ts
index c5a7ed55d..3d2bd2bcc 100644
--- a/apps/frontend/src/domains/admin/ui/navigation/adminNavigationModel.ts
+++ b/apps/frontend/src/domains/admin/ui/navigation/adminNavigationModel.ts
@@ -220,6 +220,12 @@ export const adminNavigationGroups: AdminNavigationGroup[] = [
         subtitleKey: "adminCommon.navRideHailingProviderInstancesSubtitle",
         routeName: "admin-ride-hailing",
       },
+      {
+        id: "ride-hailing-orders",
+        labelKey: "adminCommon.navRideHailingOrders",
+        subtitleKey: "adminCommon.navRideHailingOrdersSubtitle",
+        routeName: "admin-ride-hailing-orders",
+      },
     ],
   },
   {
diff --git a/apps/frontend/src/locales/schema.ts b/apps/frontend/src/locales/schema.ts
index b230ff43c..d6e4a4414 100644
--- a/apps/frontend/src/locales/schema.ts
+++ b/apps/frontend/src/locales/schema.ts
@@ -1247,6 +1247,8 @@ export interface MessageSchema {
     navRideHailingGroup: string;
     navRideHailingProviderInstances: string;
     navRideHailingProviderInstancesSubtitle: string;
+    navRideHailingOrders: string;
+    navRideHailingOrdersSubtitle: string;
     navFeedbackQuestionnairesGroup: string;
     navFeedbackQuestionnaireTemplates: string;
     navFeedbackQuestionnaireTemplatesSubtitle: string;
diff --git a/apps/frontend/src/locales/zh-CN.jsonc b/apps/frontend/src/locales/zh-CN.jsonc
index 9b87433d7..e5d920c71 100644
--- a/apps/frontend/src/locales/zh-CN.jsonc
+++ b/apps/frontend/src/locales/zh-CN.jsonc
@@ -638,6 +638,8 @@
     "navRideHailingGroup": "RideHailing",
     "navRideHailingProviderInstances": "Provider Instance",
     "navRideHailingProviderInstancesSubtitle": "维护曹操服务商实例",
+    "navRideHailingOrders": "Order Admin",
+    "navRideHailingOrdersSubtitle": "查看并取消网约车订单",
     "navFeedbackQuestionnairesGroup": "反馈问卷",
     "navFeedbackQuestionnaireTemplates": "反馈问卷模板",
     "navFeedbackQuestionnaireTemplatesSubtitle": "维护可挂载到活动的问卷模板。",
diff --git a/apps/frontend/src/pages/AdminRideHailingOrderPage.vue b/apps/frontend/src/pages/AdminRideHailingOrderPage.vue
new file mode 100644
index 000000000..972802b7e
--- /dev/null
+++ b/apps/frontend/src/pages/AdminRideHailingOrderPage.vue
@@ -0,0 +1,506 @@
+<template>
+  <AdminPageScaffold class="page" data-testid="admin-ride-hailing-orders.page">
+    <template #navigation>
+      <AdminNavigationPanel show-logout @logout="logout" />
+    </template>
+
+    <template #rail>
+      <AdminRailPanel title="网约车订单">
+        <div v-if="orders.length === 0" class="hint">暂无网约车订单</div>
+        <div v-else class="order-rail-list">
+          <PuCard
+            v-for="record in orders"
+            :key="record.order.id"
+            :active="selectedOrderId === record.order.id"
+            data-testid="admin-ride-hailing-orders.order-card"
+            @click="selectedOrderIdRaw = record.order.id"
+            selectable
+            variant="outline"
+            padding="sm"
+            gap="xs"
+          >
+            <div class="order-rail-card__header">
+              <strong>{{ routeTitle(record) }}</strong>
+              <PuTag
+                :text="executionPhaseLabel(record.rideHailingOrder.executionPhase)"
+                :tone="executionPhaseTone(record.rideHailingOrder.executionPhase)"
+                variant="outline"
+                shape="rect"
+                size="xs"
+              />
+            </div>
+            <small>{{ record.order.id }}</small>
+            <small>
+              {{ orderStatusLabel(record.order.status) }} / {{ providerLabel(record) }}
+            </small>
+          </PuCard>
+        </div>
+      </AdminRailPanel>
+    </template>
+
+    <template #main>
+      <div class="stack">
+        <PuLoadingState
+          v-if="workspaceQuery.isLoading.value"
+          :message="t('common.loading')"
+        />
+        <PuInlineNotice
+          v-else-if="workspaceQuery.error.value"
+          tone="error"
+          :message="workspaceQuery.error.value.message"
+        />
+        <PuEmptyState
+          v-else-if="orders.length === 0"
+          title="暂无网约车订单"
+          description="当前还没有可供运营查看的网约车订单记录。"
+          icon="i-mdi-car-clock"
+          align="start"
+        />
+        <template v-else-if="selectedRecord">
+          <BentoItem title="订单概览" span="full">
+            <dl class="summary-grid">
+              <div>
+                <dt>Order ID</dt>
+                <dd>{{ selectedRecord.order.id }}</dd>
+              </div>
+              <div>
+                <dt>订单状态</dt>
+                <dd>{{ orderStatusLabel(selectedRecord.order.status) }}</dd>
+              </div>
+              <div>
+                <dt>执行阶段</dt>
+                <dd>
+                  {{
+                    executionPhaseLabel(
+                      selectedRecord.rideHailingOrder.executionPhase,
+                    )
+                  }}
+                </dd>
+              </div>
+              <div>
+                <dt>Provider</dt>
+                <dd>{{ providerLabel(selectedRecord) }}</dd>
+              </div>
+              <div>
+                <dt>Provider Order ID</dt>
+                <dd>{{ selectedRecord.providerBinding?.providerOrderId ?? "-" }}</dd>
+              </div>
+              <div>
+                <dt>Bill</dt>
+                <dd>
+                  {{
+                    selectedRecord.bill
+                      ? `${selectedRecord.bill.id} / ${selectedRecord.bill.status}`
+                      : "-"
+                  }}
+                </dd>
+              </div>
+              <div>
+                <dt>Created At</dt>
+                <dd>{{ formatTimestamp(selectedRecord.order.createdAt) }}</dd>
+              </div>
+              <div>
+                <dt>Updated At</dt>
+                <dd>
+                  {{ formatTimestamp(selectedRecord.rideHailingOrder.updatedAt) }}
+                </dd>
+              </div>
+            </dl>
+          </BentoItem>
+
+          <BentoItem title="路线" span="full">
+            <dl class="summary-grid">
+              <div>
+                <dt>出发地</dt>
+                <dd>{{ selectedRecord.rideHailingOrder.routeSnapshot.origin.name }}</dd>
+              </div>
+              <div>
+                <dt>目的地</dt>
+                <dd>
+                  {{ selectedRecord.rideHailingOrder.routeSnapshot.destination.name }}
+                </dd>
+              </div>
+              <div>
+                <dt>途经点</dt>
+                <dd>
+                  {{ selectedRecord.rideHailingOrder.routeSnapshot.waypoints.length }}
+                </dd>
+              </div>
+              <div>
+                <dt>预估里程</dt>
+                <dd>{{ routeDistanceLabel(selectedRecord) }}</dd>
+              </div>
+              <div>
+                <dt>预估时长</dt>
+                <dd>{{ routeDurationLabel(selectedRecord) }}</dd>
+              </div>
+              <div>
+                <dt>出发时间</dt>
+                <dd>
+                  {{
+                    selectedRecord.rideHailingOrder.departureAt
+                      ? formatTimestamp(selectedRecord.rideHailingOrder.departureAt)
+                      : "-"
+                  }}
+                </dd>
+              </div>
+            </dl>
+          </BentoItem>
+
+          <BentoItem title="乘车人" span="full">
+            <div class="rider-list">
+              <div
+                v-for="rider in selectedRecord.rideHailingOrder.riders"
+                :key="rider.userId"
+                class="rider-row"
+              >
+                <div>
+                  <strong>{{ rider.displayName }}</strong>
+                  <small>{{ rider.phoneMasked ?? "暂无手机号" }}</small>
+                </div>
+              </div>
+            </div>
+          </BentoItem>
+
+          <BentoItem title="取消订单" span="full">
+            <div class="form-stack">
+              <PuInlineNotice
+                tone="info"
+                title="运营取消边界"
+                message="当前 Admin 取消沿用用户侧可取消阶段，仅支持派单中、已接单、已到达上车点的网约车订单。"
+              />
+              <PuInlineNotice
+                v-if="cancelSuccessMessage"
+                tone="success"
+                :message="cancelSuccessMessage"
+              />
+              <PuInlineNotice
+                v-if="cancellationBlockedMessage"
+                tone="warning"
+                :message="cancellationBlockedMessage"
+              />
+              <div class="inline-actions">
+                <PuButton
+                  tone="danger"
+                  variant="outline"
+                  size="sm"
+                  :disabled="!canCancelSelectedOrder"
+                  data-testid="admin-ride-hailing-orders.cancel.open"
+                  @click="openCancelConfirm"
+                >
+                  取消订单
+                </PuButton>
+              </div>
+            </div>
+          </BentoItem>
+
+          <BentoItem title="原始状态" span="full">
+            <pre class="json-pre">{{ prettyJson(selectedRecord) }}</pre>
+          </BentoItem>
+
+          <PuInlineNotice
+            v-if="pageErrorMessage"
+            tone="error"
+            dismissible
+            :message="pageErrorMessage"
+            @close="clearMessages"
+          />
+
+          <PuDialog
+            :open="showCancelConfirmDialog"
+            title="确认取消网约车订单"
+            description="取消后会向服务商发起撤单，并将本地订单状态推进到已取消。确认继续？"
+            cancel-text="先不取消"
+            :confirm-text="cancelMutation.isPending.value ? '取消中' : '确认取消'"
+            tone="error"
+            :confirm-loading="cancelMutation.isPending.value"
+            @close="showCancelConfirmDialog = false"
+            @cancel="showCancelConfirmDialog = false"
+            @confirm="confirmCancelOrder"
+          />
+        </template>
+      </div>
+    </template>
+  </AdminPageScaffold>
+</template>
+
+<script setup lang="ts">
+import {
+  PuButton,
+  PuCard,
+  PuDialog,
+  PuEmptyState,
+  PuInlineNotice,
+  PuLoadingState,
+  PuTag,
+} from "@partner-up-dev/design-web";
+import { computed, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import AdminPageScaffold from "@/domains/admin/ui/layout/AdminPageScaffold.vue";
+import AdminRailPanel from "@/domains/admin/ui/layout/AdminRailPanel.vue";
+import BentoItem from "@/domains/admin/ui/layout/BentoItem.vue";
+import AdminNavigationPanel from "@/domains/admin/ui/navigation/AdminNavigationPanel.vue";
+import { useAdminAccess } from "@/domains/admin/use-cases/useAdminAccess";
+import {
+  useAdminRideHailingOrderWorkspace,
+  useCancelAdminRideHailingOrder,
+  type AdminRideHailingOrderWorkspaceResponse,
+} from "@/domains/admin-ride-hailing/queries/useAdminRideHailing";
+
+const cancellableExecutionPhases = new Set([
+  "DISPATCHING",
+  "ACCEPTED",
+  "ARRIVED_AT_PICKUP",
+]);
+
+type OrderRecord =
+  AdminRideHailingOrderWorkspaceResponse["orders"][number];
+
+const { t } = useI18n();
+const { isAdmin, logout } = useAdminAccess();
+const workspaceQuery = useAdminRideHailingOrderWorkspace(isAdmin);
+const cancelMutation = useCancelAdminRideHailingOrder();
+
+const selectedOrderIdRaw = ref("");
+const localErrorMessage = ref<string | null>(null);
+const cancelSuccessMessage = ref<string | null>(null);
+const showCancelConfirmDialog = ref(false);
+
+const orders = computed(() => workspaceQuery.data.value?.orders ?? []);
+const selectedOrderId = computed(
+  () => selectedOrderIdRaw.value || orders.value[0]?.order.id || "",
+);
+const selectedRecord = computed(
+  () =>
+    orders.value.find((record) => record.order.id === selectedOrderId.value) ??
+    null,
+);
+
+const canCancelSelectedOrder = computed(() => {
+  if (!selectedRecord.value) return false;
+  return (
+    selectedRecord.value.order.status === "OPEN" &&
+    cancellableExecutionPhases.has(
+      selectedRecord.value.rideHailingOrder.executionPhase,
+    )
+  );
+});
+
+const cancellationBlockedMessage = computed(() => {
+  if (!selectedRecord.value) return null;
+  if (selectedRecord.value.order.status !== "OPEN") {
+    return "当前订单状态不是 OPEN，不能取消。";
+  }
+  if (
+    !cancellableExecutionPhases.has(
+      selectedRecord.value.rideHailingOrder.executionPhase,
+    )
+  ) {
+    return "当前执行阶段不支持取消。";
+  }
+  return null;
+});
+
+const pageErrorMessage = computed(
+  () =>
+    localErrorMessage.value || cancelMutation.error.value?.message || null,
+);
+
+const routeTitle = (record: OrderRecord): string =>
+  `${record.rideHailingOrder.routeSnapshot.origin.name} → ${record.rideHailingOrder.routeSnapshot.destination.name}`;
+
+const providerLabel = (record: OrderRecord): string =>
+  record.providerInstance
+    ? `${record.providerInstance.displayName} / ${record.providerInstance.instanceKey}`
+    : "-";
+
+const orderStatusLabel = (status: OrderRecord["order"]["status"]): string => {
+  if (status === "INITIATING") return "初始化中";
+  if (status === "OPEN") return "进行中";
+  if (status === "CANCELLED") return "已取消";
+  if (status === "FAILED") return "失败";
+  if (status === "EXPIRED") return "已过期";
+  return "已完成";
+};
+
+const executionPhaseLabel = (
+  phase: OrderRecord["rideHailingOrder"]["executionPhase"],
+): string => {
+  if (phase === "INITIATING") return "初始化中";
+  if (phase === "DISPATCHING") return "派单中";
+  if (phase === "ACCEPTED") return "已接单";
+  if (phase === "ARRIVED_AT_PICKUP") return "已到达上车点";
+  if (phase === "IN_TRIP") return "行程中";
+  if (phase === "FINISHED") return "已完成";
+  if (phase === "CANCELLED") return "已取消";
+  return "失败";
+};
+
+const executionPhaseTone = (
+  phase: OrderRecord["rideHailingOrder"]["executionPhase"],
+): "neutral" | "primary" | "danger" => {
+  if (phase === "FAILED") return "danger";
+  if (phase === "CANCELLED" || phase === "FINISHED") return "neutral";
+  return "primary";
+};
+
+const formatTimestamp = (value: Date | string): string =>
+  new Date(value).toLocaleString("zh-CN", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  });
+
+const formatCurrencyFen = (amountFen: number): string =>
+  new Intl.NumberFormat("zh-CN", {
+    style: "currency",
+    currency: "CNY",
+  }).format(amountFen / 100);
+
+const routeDistanceLabel = (record: OrderRecord): string => {
+  const meters =
+    record.rideHailingOrder.routeSnapshot.drivingPlan?.distanceMeters ?? null;
+  if (meters === null) return "-";
+  return meters >= 1000 ? `${(meters / 1000).toFixed(1)} km` : `${meters} m`;
+};
+
+const routeDurationLabel = (record: OrderRecord): string => {
+  const seconds =
+    record.rideHailingOrder.routeSnapshot.drivingPlan?.durationSeconds ?? null;
+  if (seconds === null) return "-";
+  const minutes = Math.round(seconds / 60);
+  return `${minutes} 分钟`;
+};
+
+const prettyJson = (value: unknown): string => JSON.stringify(value, null, 2);
+
+const clearMessages = (): void => {
+  localErrorMessage.value = null;
+  cancelSuccessMessage.value = null;
+};
+
+const openCancelConfirm = (): void => {
+  clearMessages();
+  if (!canCancelSelectedOrder.value) return;
+  showCancelConfirmDialog.value = true;
+};
+
+const confirmCancelOrder = async (): Promise<void> => {
+  if (!selectedRecord.value || !canCancelSelectedOrder.value) return;
+  clearMessages();
+  try {
+    const result = await cancelMutation.mutateAsync({
+      orderId: selectedRecord.value.order.id,
+    });
+    cancelSuccessMessage.value =
+      result.effectAmountFen > 0
+        ? `取消成功，产生取消费 ${formatCurrencyFen(result.effectAmountFen)}。`
+        : "取消成功。";
+    showCancelConfirmDialog.value = false;
+  } catch (error) {
+    localErrorMessage.value =
+      error instanceof Error ? error.message : "取消网约车订单失败";
+  }
+};
+
+watch(
+  orders,
+  (nextOrders) => {
+    if (!nextOrders.some((record) => record.order.id === selectedOrderIdRaw.value)) {
+      selectedOrderIdRaw.value = nextOrders[0]?.order.id ?? "";
+    }
+  },
+  { immediate: true },
+);
+
+watch(selectedOrderId, () => {
+  clearMessages();
+  showCancelConfirmDialog.value = false;
+});
+</script>
+
+<style lang="scss" scoped>
+.stack,
+.order-rail-list,
+.rider-list,
+.form-stack {
+  display: flex;
+  flex-direction: column;
+}
+
+.stack,
+.order-rail-list,
+.rider-list,
+.form-stack {
+  gap: var(--sys-spacing-medium);
+}
+
+.order-rail-card__header,
+.inline-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--sys-spacing-small);
+}
+
+.summary-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--sys-spacing-medium);
+  margin: 0;
+}
+
+.summary-grid dt,
+.hint,
+small {
+  @include mx.pu-font(body);
+  color: var(--sys-color-on-surface-variant);
+}
+
+.summary-grid dd {
+  margin: 0;
+  @include mx.pu-font(section);
+  word-break: break-word;
+}
+
+.rider-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--sys-spacing-medium);
+  border-radius: var(--sys-radius-medium);
+  border: 1px solid var(--sys-color-outline-variant);
+  background: var(--sys-color-surface);
+}
+
+.rider-row strong,
+.order-rail-card__header strong {
+  @include mx.pu-font(section);
+}
+
+.json-pre {
+  margin: 0;
+  padding: var(--sys-spacing-medium);
+  overflow: auto;
+  border-radius: var(--sys-radius-medium);
+  background: var(--sys-color-surface);
+  border: 1px solid var(--sys-color-outline-variant);
+  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+  white-space: pre-wrap;
+}
+
+@media (max-width: 720px) {
+  .summary-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .order-rail-card__header,
+  .inline-actions {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}
+</style>
diff --git a/apps/frontend/src/shared/api/query-keys.ts b/apps/frontend/src/shared/api/query-keys.ts
index 6cb13a59b..8a527a450 100644
--- a/apps/frontend/src/shared/api/query-keys.ts
+++ b/apps/frontend/src/shared/api/query-keys.ts
@@ -70,6 +70,7 @@ export const queryKeys = {
     commerceFulfillmentWorkspace: () => ["admin", "commerce", "fulfillments", "workspace"] as const,
     paymentProviderInstances: () => ["admin", "payment", "provider-instances"] as const,
     rideHailingProviderInstances: () => ["admin", "ride-hailing", "provider-instances"] as const,
+    rideHailingOrdersWorkspace: () => ["admin", "ride-hailing", "orders", "workspace"] as const,
     anchorEventLandingConfig: (eventId: number | null) =>
       ["admin", "anchor-events", "landing-config", eventId] as const,
     anchorEventPreferenceTags: (eventId: number | null) =>
diff --git a/docs/10-prd/behavior/capabilities.md b/docs/10-prd/behavior/capabilities.md
index 29866ff25..66b84a87f 100644
--- a/docs/10-prd/behavior/capabilities.md
+++ b/docs/10-prd/behavior/capabilities.md
@@ -77,4 +77,5 @@
 - let operator tooling publish or reject user-submitted POI location applications
 - let operator tooling upload and maintain POI gallery images, Anchor Event cover images, and event beta-group QR images
 - let operator tooling select Anchor Event feedback questionnaire templates and override a PR's mounted questionnaire instance pointer
+- let operator tooling inspect and cancel cancellable RideHailing orders from dedicated admin tooling
 - let configuration materially shape the real user experience
diff --git a/docs/20-product-tdd/cross-unit-contracts.md b/docs/20-product-tdd/cross-unit-contracts.md
index d2f7e1a06..89b72b98d 100644
--- a/docs/20-product-tdd/cross-unit-contracts.md
+++ b/docs/20-product-tdd/cross-unit-contracts.md
@@ -166,6 +166,8 @@ Important coordination note:
 - The frontend waitlist flow owns only the opt-in checkbox presentation and submits the checkbox value through the typed waitlist command. Backend owns alternative candidate selection, dispatch-time eligibility, source-slot closure, and notification delivery persistence.
 - `DELETE /api/admin/prs/:id` is an admin-only hard-delete command for one PR. Backend deletes the `partner_requests` root row and relies on PR-owned cascade constraints to remove Partner rows, messages, and notification records. Frontend must show an explicit destructive confirmation before sending this command and refresh Admin PR workspace caches after success.
 - `PATCH /api/admin/prs/:id/feedback-questionnaire-instance` is the admin-only PR feedback override command. It replaces the PR's mounted feedback questionnaire instance pointer and leaves general PR content, Anchor Event template selection, and prior response records under their owning persistence rules.
+- `GET /api/admin/ride-hailing/orders/workspace` is the admin-only RideHailing order workspace read. It returns ride-hailing order records with the base trade order, ride execution state, provider binding summary, and bill summary needed by the dedicated operator surface.
+- `POST /api/admin/ride-hailing/orders/:orderId/cancel` is the admin-only RideHailing cancel command. It reuses the same backend-owned ride-hailing termination admissibility as user-side cancellation for cancellable phases, but it does not require the operator to be the order creator. Frontend must show an explicit destructive confirmation before sending this command and refresh the RideHailing order workspace after success.
 - `/events/search` is a PR discovery route scoped by one active `Anchor Event` plus one or more local dates; its route state should be recoverable through query parameters such as `eventId` and repeated date values
 - `/e/:eventId` is the ad-scan-first canonical Anchor Event landing entry; it may render `FORM`, `CARD_RICH`, or `LIST` mode, while `/events/:eventId` forwards legacy traffic to the landing route
 - `/` and `/e/:eventId` may trigger the official-account follow nudge through one shared frontend 6-hour local cooldown. The Home page uses a later timed prompt, while the event route may prompt after 3 seconds.
@@ -223,6 +225,7 @@ Important coordination note:
 - Frontend Admin Anchor Event management exposes section-level use-case surfaces for basic info, locations, time policy, tags, and other event-owned settings. A section-level frontend use-case may initially merge the current backend workspace event with the section draft and submit the existing full-object Anchor Event mutation. Future backend endpoint splits should preserve the section-level frontend contract while moving persistence granularity closer to the edited business surface.
 - Frontend Admin PR management exposes separate PR basic and PR messages views backed by section-level use-case surfaces. PR basic uses existing PR content, status, visibility, feedback-questionnaire, create, and delete admin endpoints. PR messages use existing PR message list, create, edit, and delete admin endpoints.
 - Frontend Admin POI management exposes section-level use-case surfaces for POI basic maintenance and POI review. POI basic uses the existing POI upsert admin endpoint for gallery, per-window capacity, meeting-point, and availability-rule state; POI review uses publish and reject commands. Shared POI edit drafts should stay in one editor state owner so server refreshes do not overwrite unsaved local edits.
+- Frontend Admin RideHailing management exposes separate provider-instance and order-admin views. Provider Instance uses the existing ride-hailing provider-instance admin endpoints. Order Admin uses the dedicated ride-hailing order workspace read plus the admin ride-hailing cancel command and stays route-local to the RideHailing admin group.
 - Frontend Admin pages use a shared two-column operator shell. The left column owns global Admin navigation plus route-context modules shared across second-level views, including Anchor Event selection, PR filters, POI selection, and feedback questionnaire template selection. The right workspace owns the page header and active second-level business section content.
 
 ## 8. Share Descriptor Contract
diff --git a/docs/20-product-tdd/ecommerce-contracts.md b/docs/20-product-tdd/ecommerce-contracts.md
index b29d94c56..2ab47d840 100644
--- a/docs/20-product-tdd/ecommerce-contracts.md
+++ b/docs/20-product-tdd/ecommerce-contracts.md
@@ -40,6 +40,8 @@ Frontend should reflect the same coarse grouping on admin navigation:
 - `Merchandising`
 - `Trade`
 - `Payment`
+- `RideHailing` for provider-instance configuration and ride-hailing-specific
+  operator tools
 
 Rental execution operations belong under `Trade`-adjacent operator work rather
 than under Merchandising configuration.
diff --git a/tasks/admin-ride-hailing-order-admin/00-task-packet.md b/tasks/admin-ride-hailing-order-admin/00-task-packet.md
new file mode 100644
index 000000000..b928864af
--- /dev/null
+++ b/tasks/admin-ride-hailing-order-admin/00-task-packet.md
@@ -0,0 +1,34 @@
+# Task Packet - RideHailing Order Admin
+
+## Objective & Hypothesis
+
+- Objective & Hypothesis: add a dedicated `RideHailing Order Admin` surface under the existing `RideHailing` admin group so operators can inspect ride-hailing orders and cancel orders from admin tooling. Hypothesis: a focused admin workspace plus one admin-only cancel command can reuse the existing ride-hailing cancellation core if the creator-only guard is refactored into an explicit actor policy.
+
+## Guardrails Touched
+
+- Typed input: Intent.
+- Durable owner: RideHailing operator tooling across admin frontend and admin backend contracts.
+- Product / contract docs:
+  - `docs/10-prd/behavior/capabilities.md`
+  - `docs/20-product-tdd/cross-unit-contracts.md`
+  - `docs/20-product-tdd/ecommerce-contracts.md`
+- Backend surfaces:
+  - `GET /api/admin/ride-hailing/orders/workspace`
+  - `POST /api/admin/ride-hailing/orders/:orderId/cancel`
+  - `admin-ride-hailing-management` read/write use cases and controller typing
+  - shared ride-hailing cancellation domain flow
+- Frontend surfaces:
+  - `/admin/ride-hailing/orders`
+  - RideHailing admin navigation model and locale copy
+  - RideHailing admin query/mutation hooks
+  - dedicated order admin page with destructive confirmation
+
+## Verification
+
+- Results:
+  - `pnpm check:type:backend` passed.
+  - `pnpm check:build:frontend` passed.
+  - `pnpm exec vitest run --project backend-scenario apps/backend/tests/ride-hailing/admin-ride-hailing-order.scenario.test.ts` passed.
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts -t commerce_ride_hailing_order_detail_cancel_dispatching_order` passed.
+  - `pnpm check:lint:backend` passed.
+  - `pnpm check:lint:frontend` completed without new blocking findings; naming audit reported two existing `RideHailing*Content` weak-name findings outside this slice.

From 0ba59f5cd6cb0c6aae9e8a32862f39b52587a1be Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Tue, 30 Jun 2026 15:17:54 +0800
Subject: [PATCH 75/94] fix(ride-hailing): add CaoCao provider diagnostics for
 route failures

- add unified CaoCao response diagnostic logging helper for provider requests

- surface route query failures as structured RideHailingLiveRouteQueryError logs with context

- add unit coverage to assert failed route query log payload

- update task packet with diagnosis and evidence path
---
 .../services/caocao-provider.test.ts          |  41 +++-
 .../ride-hailing/services/caocao-provider.ts  |  76 +++++--
 .../use-cases/ride-hailing-ordering-flow.ts   | 193 ++++++++++++++++--
 .../00-task-packet.md                         | 118 +++++++++++
 4 files changed, 390 insertions(+), 38 deletions(-)
 create mode 100644 tasks/ride-hailing-navigation-route-diagnosis/00-task-packet.md

diff --git a/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts b/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
index 02019ea62..438a5d6cb 100644
--- a/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
+++ b/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
@@ -1,4 +1,4 @@
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import type {
   RideHailingProviderInstance,
   RideHailingProviderInstanceId,
@@ -517,4 +517,43 @@ describe("Caocao live order projection", () => {
     expect(detail.phase).toBe("9");
     expect(detail.statusLabel).toBe("接客中");
   });
+
+  it("logs provider diagnostics for failed route queries", async () => {
+    const stdoutWrite = vi
+      .spyOn(process.stdout, "write")
+      .mockImplementation(() => true);
+    try {
+      const fetchImpl: typeof fetch = async () =>
+        new Response(
+          JSON.stringify({
+            code: 25011,
+            msg: "订单状态不正确",
+            success: false,
+          }),
+          { status: 200 },
+        );
+      const adapter = new CaocaoProviderAdapter({
+        providerInstance: caocaoProviderInstance(),
+        fetchImpl,
+      });
+
+      await expect(
+        adapter.queryDriverRoute({
+          providerOrderId: "CC123456",
+          routeKind: "PICKUP",
+        }),
+      ).rejects.toThrow("Caocao API failed: 25011 订单状态不正确");
+
+      const logOutput = stdoutWrite.mock.calls
+        .map(([chunk]) => String(chunk))
+        .join("");
+      expect(logOutput).toContain('"marker":"RideHailingProviderCaocao"');
+      expect(logOutput).toContain('"event":"caocao_provider_failure"');
+      expect(logOutput).toContain('"endpointPath":"/common/queryDriverPolylineV2"');
+      expect(logOutput).toContain('"providerCode":25011');
+      expect(logOutput).toContain('"providerMsg":"订单状态不正确"');
+    } finally {
+      stdoutWrite.mockRestore();
+    }
+  });
 });
diff --git a/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts b/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
index 8ea4c1088..9b6757e7a 100644
--- a/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
+++ b/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
@@ -390,12 +390,57 @@ const parseCaocaoResponseJson = async (response: Response): Promise<unknown> =>
 const writeCaocaoDiagnosticLog = (payload: Record<string, unknown>): void => {
   process.stdout.write(
     `${JSON.stringify({
-      marker: "RideHailingProviderEstimate",
+      marker: "RideHailingProviderCaocao",
       ...payload,
     })}\n`,
   );
 };
 
+const tryParseCaocaoResponseBody = <TData>(body: unknown): CaocaoRawResponse<TData> | null => {
+  try {
+    return parseCaocaoResponseBody<TData>(body);
+  } catch {
+    return null;
+  }
+};
+
+const buildCaocaoResponseDiagnostic = (input: {
+  endpointPath: string;
+  httpStatus: number;
+  method: "GET" | "POST";
+  params: CaocaoParamInput;
+  providerInstanceId: string;
+  providerType: RideHailingProviderInstance["providerType"];
+  responseBody: unknown;
+}) => {
+  const parsed = tryParseCaocaoResponseBody(input.responseBody);
+  return {
+    endpointPath: input.endpointPath,
+    event:
+      input.httpStatus !== 200 || parsed?.code !== 200 || parsed?.success !== true
+        ? "caocao_provider_failure"
+        : input.endpointPath === "/common/estimatePriceWithDetail"
+          ? "caocao_estimate_response"
+          : "caocao_response",
+    httpStatus: input.httpStatus,
+    method: input.method,
+    params: normalizeCaocaoParams(input.params),
+    providerCode: parsed?.code ?? null,
+    providerInstanceId: input.providerInstanceId,
+    providerMsg: parsed?.msg ?? null,
+    providerSuccess: parsed?.success ?? null,
+    providerType: input.providerType,
+    responseBody: input.responseBody,
+  };
+};
+
+const shouldLogCaocaoDiagnostic = (input: {
+  diagnostic: ReturnType<typeof buildCaocaoResponseDiagnostic>;
+}): boolean =>
+  input.diagnostic.event === "caocao_provider_failure" ||
+  input.diagnostic.endpointPath === "/common/queryCity" ||
+  input.diagnostic.endpointPath === "/common/estimatePriceWithDetail";
+
 export function createCaocaoSignature(input: {
   params: CaocaoSignedParams;
   signKey: string;
@@ -958,24 +1003,17 @@ export class CaocaoProviderAdapter implements RideHailingProviderPort {
             body: serializeCaocaoFormBody(signedParams),
           });
     const responseBody = await parseCaocaoResponseJson(response);
-    if (
-      endpointPath === "/common/queryCity" ||
-      endpointPath === "/common/estimatePriceWithDetail"
-    ) {
-      writeCaocaoDiagnosticLog({
-        event:
-          endpointPath === "/common/estimatePriceWithDetail"
-            ? "caocao_estimate_response"
-            : "caocao_response",
-        endpointPath,
-        httpStatus: response.status,
-        method,
-        ok: response.ok,
-        params: normalizeCaocaoParams(params),
-        providerInstanceId: this.input.providerInstance.id,
-        providerType: this.input.providerInstance.providerType,
-        responseBody,
-      });
+    const diagnostic = buildCaocaoResponseDiagnostic({
+      endpointPath,
+      httpStatus: response.status,
+      method,
+      params,
+      providerInstanceId: this.input.providerInstance.id,
+      providerType: this.input.providerInstance.providerType,
+      responseBody,
+    });
+    if (shouldLogCaocaoDiagnostic({ diagnostic })) {
+      writeCaocaoDiagnosticLog(diagnostic);
     }
     if (!response.ok) {
       return throwHttpProblem({
diff --git a/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts b/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts
index 0c7ef26e3..baf26a81e 100644
--- a/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts
+++ b/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts
@@ -1,6 +1,10 @@
 import type { RideHailingProviderInstanceId } from "../../../entities/ride-hailing-provider";
 import type { TradeOrder, TradeOrderId } from "../../../entities/trade-order";
-import { throwHttpProblem } from "../../../lib/problem-details";
+import {
+  type CommerceOrderDetailDebugContext,
+  logCommerceOrderDetailDebug,
+} from "../../../lib/commerce-order-detail-debug";
+import { ProblemDetailsError, throwHttpProblem } from "../../../lib/problem-details";
 import { RideHailingOrderRepository } from "../../../repositories/RideHailingOrderRepository";
 import { RideHailingProviderInstanceRepository } from "../../../repositories/RideHailingProviderInstanceRepository";
 import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository";
@@ -134,10 +138,57 @@ const resolveProviderNavigationRouteQueryKind = (
   return null;
 };
 
-const queryOptionalProviderLive = async <T>(operation: () => Promise<T>): Promise<T | null> => {
+const summarizeProviderLiveError = (error: unknown): Record<string, unknown> => {
+  if (error instanceof ProblemDetailsError) {
+    return {
+      errorCode: error.code,
+      errorMessage: error.message,
+      errorName: error.name,
+      errorStatus: error.status,
+      errorType: error.type,
+    };
+  }
+  if (error instanceof Error) {
+    return {
+      errorMessage: error.message,
+      errorName: error.name,
+      errorStack: error.stack ?? null,
+    };
+  }
+  return {
+    errorValue: error,
+  };
+};
+
+const summarizeProviderDetailProjection = (
+  detail: ProviderDetailProjection | null,
+): Record<string, unknown> => ({
+  providerPhase: detail?.phase ?? null,
+  providerStatusLabel: detail?.statusLabel ?? null,
+  providerDriverName: detail?.driver?.driverName ?? null,
+  providerVehiclePlate: detail?.vehicle?.plate ?? null,
+  providerHasVehicleLocation: detail?.vehicleLocation != null,
+  providerHasNavigationRoute: detail?.navigationRoute != null,
+  providerFinalAmountFen: detail?.finalAmountFen ?? null,
+});
+
+const writeRideHailingLiveRouteQueryErrorLog = (payload: Record<string, unknown>): void => {
+  process.stdout.write(
+    `${JSON.stringify({
+      marker: "RideHailingLiveRouteQueryError",
+      ...payload,
+    })}\n`,
+  );
+};
+
+const queryOptionalProviderLive = async <T>(input: {
+  onError?: (error: unknown) => void;
+  operation: () => Promise<T>;
+}): Promise<T | null> => {
   try {
-    return await operation();
-  } catch {
+    return await input.operation();
+  } catch (error) {
+    input.onError?.(error);
     return null;
   }
 };
@@ -162,37 +213,75 @@ const projectProviderDetail = (input: {
 
 export async function buildRideHailingDetailProjection(input: {
   order: TradeOrder;
+  debug?: CommerceOrderDetailDebugContext;
 }): Promise<RideHailingOrderDetailProjection> {
   let order = input.order;
   let choiceSetItem = getRideHailingChoiceSetItem(order.items);
   let providerBinding = choiceSetItem ? getRideHailingProviderBinding(choiceSetItem) : null;
   let syncedProviderDetail: RideHailingProviderOrderDetail | null = null;
+
+  logCommerceOrderDetailDebug(input.debug, "ride-detail.build.start", {
+    localOrderId: order.id,
+    localOrderStatus: order.status,
+    providerInstanceId: providerBinding?.providerInstanceId ?? null,
+    providerOrderId: providerBinding?.providerOrderId ?? null,
+  });
+
   if (providerBinding?.providerOrderId) {
+    const syncProviderInstanceId = providerBinding.providerInstanceId;
+    const syncProviderOrderId = providerBinding.providerOrderId;
     try {
       const syncResult = await syncRideHailingOrderWithProvider({
         orderId: order.id,
-        expectedProviderInstanceId: providerBinding.providerInstanceId,
-        expectedProviderOrderId: providerBinding.providerOrderId,
+        expectedProviderInstanceId: syncProviderInstanceId,
+        expectedProviderOrderId: syncProviderOrderId,
         trigger: "ORDER_DETAIL_POLL",
+        debug: input.debug,
       });
       syncedProviderDetail = syncResult.providerDetail;
+      logCommerceOrderDetailDebug(input.debug, "ride-detail.build.sync-result", {
+        localOrderId: order.id,
+        providerInstanceId: syncProviderInstanceId,
+        providerOrderId: syncProviderOrderId,
+        syncMutated: syncResult.mutated,
+        providerPhase: syncedProviderDetail.phase,
+        providerStatusLabel: syncedProviderDetail.statusLabel,
+        providerDriverName: syncedProviderDetail.driver?.driverName ?? null,
+        providerVehiclePlate: syncedProviderDetail.vehicle?.plate ?? null,
+      });
       if (syncResult.mutated) {
         const reloadedOrder = await tradeOrderRepo.findById(order.id);
         if (reloadedOrder) {
           order = reloadedOrder;
           choiceSetItem = getRideHailingChoiceSetItem(order.items);
           providerBinding = choiceSetItem ? getRideHailingProviderBinding(choiceSetItem) : null;
+          logCommerceOrderDetailDebug(input.debug, "ride-detail.build.reload-after-sync", {
+            localOrderId: order.id,
+            localOrderStatus: order.status,
+            providerInstanceId: providerBinding?.providerInstanceId ?? null,
+            providerOrderId: providerBinding?.providerOrderId ?? null,
+          });
         }
       }
     } catch (error) {
       if (!(error instanceof RideHailingProviderSyncQueryError)) {
         throw error;
       }
+      logCommerceOrderDetailDebug(input.debug, "ride-detail.build.sync-query-error", {
+        localOrderId: order.id,
+        providerInstanceId: syncProviderInstanceId,
+        providerOrderId: syncProviderOrderId,
+        error: summarizeProviderLiveError(error.originalError),
+      });
     }
   }
 
   const rideOrder = await rideOrderRepo.findByOrderId(order.id);
   if (!rideOrder) {
+    logCommerceOrderDetailDebug(input.debug, "ride-detail.build.ride-order-missing", {
+      localOrderId: order.id,
+      localOrderStatus: order.status,
+    });
     return throwHttpProblem({
       status: 500,
       detail: "RideHailing order facts are missing",
@@ -210,30 +299,84 @@ export async function buildRideHailingDetailProjection(input: {
       const navigationRouteQueryKind = resolveProviderNavigationRouteQueryKind(
         rideOrder.executionPhase,
       );
+      logCommerceOrderDetailDebug(input.debug, "ride-detail.build.live-query-plan", {
+        localOrderId: order.id,
+        rideExecutionPhase: rideOrder.executionPhase,
+        providerInstanceId: providerBinding.providerInstanceId,
+        providerOrderId: providerBinding.providerOrderId,
+        shouldQueryLiveGeometry,
+        navigationRouteQueryKind,
+      });
       const vehicleLocation = shouldQueryLiveGeometry
-        ? await queryOptionalProviderLive(() =>
-            port.queryDriverLocation({
-              providerOrderId: providerBinding.providerOrderId,
-            }),
-          )
+        ? await queryOptionalProviderLive({
+            onError: (error) => {
+              logCommerceOrderDetailDebug(input.debug, "ride-detail.build.driver-location.error", {
+                localOrderId: order.id,
+                rideExecutionPhase: rideOrder.executionPhase,
+                providerInstanceId: providerBinding?.providerInstanceId ?? null,
+                providerOrderId: providerBinding?.providerOrderId ?? null,
+                ...summarizeProviderLiveError(error),
+              });
+            },
+            operation: () =>
+              port.queryDriverLocation({
+                providerOrderId: providerBinding.providerOrderId,
+              }),
+          })
         : null;
       const navigationRoute = navigationRouteQueryKind
-        ? await queryOptionalProviderLive(() =>
-            port.queryDriverRoute({
-              providerOrderId: providerBinding.providerOrderId,
-              routeKind: navigationRouteQueryKind,
-            }),
-          )
+        ? await queryOptionalProviderLive({
+            onError: (error) => {
+              writeRideHailingLiveRouteQueryErrorLog({
+                executionPhase: rideOrder.executionPhase,
+                orderId: order.id,
+                providerInstanceId: providerBinding?.providerInstanceId ?? null,
+                providerOrderId: providerBinding?.providerOrderId ?? null,
+                routeKind: navigationRouteQueryKind,
+                ...summarizeProviderLiveError(error),
+              });
+              logCommerceOrderDetailDebug(input.debug, "ride-detail.build.driver-route.error", {
+                localOrderId: order.id,
+                rideExecutionPhase: rideOrder.executionPhase,
+                providerInstanceId: providerBinding?.providerInstanceId ?? null,
+                providerOrderId: providerBinding?.providerOrderId ?? null,
+                routeKind: navigationRouteQueryKind,
+                ...summarizeProviderLiveError(error),
+              });
+            },
+            operation: () =>
+              port.queryDriverRoute({
+                providerOrderId: providerBinding.providerOrderId,
+                routeKind: navigationRouteQueryKind,
+              }),
+          })
         : null;
       providerDetail = projectProviderDetail({
         detail: syncedProviderDetail,
         navigationRoute,
         vehicleLocation,
       });
+      logCommerceOrderDetailDebug(input.debug, "ride-detail.build.live-query-result", {
+        localOrderId: order.id,
+        rideExecutionPhase: rideOrder.executionPhase,
+        providerInstanceId: providerBinding.providerInstanceId,
+        providerOrderId: providerBinding.providerOrderId,
+        shouldQueryLiveGeometry,
+        navigationRouteQueryKind,
+        vehicleLocationCapturedAt: vehicleLocation?.capturedAt ?? null,
+        navigationRouteKind: navigationRoute?.routeKind ?? null,
+        ...summarizeProviderDetailProjection(providerDetail),
+      });
+    } else {
+      logCommerceOrderDetailDebug(input.debug, "ride-detail.build.provider-instance-missing", {
+        localOrderId: order.id,
+        providerInstanceId: providerBinding.providerInstanceId,
+        providerOrderId: providerBinding.providerOrderId,
+      });
     }
   }
 
-  return {
+  const result = {
     route: rideOrder.routeSnapshot,
     departureAt: rideOrder.departureAt?.toISOString() ?? null,
     riders: rideOrder.riders,
@@ -252,6 +395,20 @@ export async function buildRideHailingDetailProjection(input: {
     vehicle: rideOrder.vehicleSnapshot ?? providerDetail?.vehicle ?? null,
     live: providerDetail,
   };
+
+  logCommerceOrderDetailDebug(input.debug, "ride-detail.build.complete", {
+    localOrderId: order.id,
+    localOrderStatus: order.status,
+    rideExecutionPhase: result.executionPhase,
+    rideDriverName: result.driver?.driverName ?? null,
+    rideVehiclePlate: result.vehicle?.plate ?? null,
+    candidateVehicleCount: result.candidateVehicles.length,
+    providerInstanceId: providerBinding?.providerInstanceId ?? null,
+    providerOrderId: result.provider.providerOrderId,
+    ...summarizeProviderDetailProjection(result.live),
+  });
+
+  return result;
 }
 
 export async function confirmRideHailingProviderFeeAfterPayment(input: { orderId: string }) {
diff --git a/tasks/ride-hailing-navigation-route-diagnosis/00-task-packet.md b/tasks/ride-hailing-navigation-route-diagnosis/00-task-packet.md
new file mode 100644
index 000000000..2a8f07466
--- /dev/null
+++ b/tasks/ride-hailing-navigation-route-diagnosis/00-task-packet.md
@@ -0,0 +1,118 @@
+# RideHailing Navigation Route Diagnosis
+
+## Objective & Hypothesis
+
+- Reality: diagnose why `GET /api/commerce/orders/:orderId` returns
+  `rideHailing.live.navigationRoute = null` in staging for an active
+  RideHailing order while `rideHailing.live.vehicleLocation` is present.
+- Initial hypotheses:
+  - order-detail projection may be suppressing provider route queries for the
+    observed execution phases
+  - provider route query may be issued, but the CaoCao adapter may normalize
+    the returned payload to `null`
+  - staging provider callbacks / live detail may not contain the route fields
+    the current adapter expects
+
+## Guardrails Touched
+
+- Backend order-detail read path:
+  - `apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts`
+- RideHailing provider contracts and adapter:
+  - `apps/backend/src/domains/ride-hailing/model/provider.ts`
+  - `apps/backend/src/domains/ride-hailing/services/caocao-provider.ts`
+- Scenario and unit truth:
+  - `apps/backend/tests/ride-hailing/*.test.ts`
+  - `docs/20-product-tdd/ecommerce-contracts.md`
+
+## Verification
+
+- Completed code-trace checks:
+  - `buildRideHailingDetailProjection()` only assigns
+    `live.navigationRoute = null` in two cases:
+    - local `rideOrder.executionPhase` does not map to a live route query kind
+    - `port.queryDriverRoute()` throws and `queryOptionalProviderLive()` swallows
+      the error as `null`
+  - `live.vehicleLocation` and `live.navigationRoute` share the same phase gate
+    family:
+    - `ACCEPTED`
+    - `ARRIVED_AT_PICKUP`
+    - `IN_TRIP`
+  - therefore `vehicleLocation` present + `navigationRoute` null narrows the
+    failure to the route query branch itself, not frontend rendering and not the
+    top-level provider detail sync
+  - current CaoCao adapter `queryDriverRoute()` does call the documented
+    `POST /common/queryDriverPolylineV2` endpoint with `order_id`
+  - current adapter parse path always returns a route object on successful
+    provider response, even when polyline is empty; it does not return `null`
+    on parse alone
+- Remaining evidence gap:
+  - route-query failures are fully swallowed and are not logged today, so the
+    exact provider-side error code/message is not recoverable from current repo
+    instrumentation alone
+
+## Current Understanding
+
+- Input type: Reality.
+- Active mode: Diagnose.
+- User-provided symptom is phase-sensitive:
+  - `vehicleLocation` present
+  - `navigationRoute` always null in staging
+- Current investigation target is backend truth first, not frontend rendering.
+- Evidence-backed conclusion:
+  - the staging null does not come from frontend map code
+  - it does not come from route-polyline parsing returning `null`
+  - it comes from `queryDriverRoute()` failing at runtime and being downgraded
+    to `null` by the backend catch-all wrapper
+- External contract check:
+  - current official CaoCao `queryDriverPolylineV2` docs document `order_id` as
+    the request input for this endpoint; the earlier task-local suspicion about
+    a required request-side `navigation_polyline_type` is not supported by the
+    current official doc snapshot checked during this diagnosis
+  - the older Python implementation at
+    `/mnt/f/CODING/Project/Anana/main/ride_hailing/managers/service_provider/caocao.py`
+    targets the older `/common/queryDriverPolyline` endpoint, not the current
+    V2 endpoint:
+    - request includes `navigationPolylineType`
+    - route type is locally derived from provider status before the request
+  - current TypeScript adapter targets `POST /common/queryDriverPolylineV2`
+    and sends only `order_id`, which matches the current official V2 request
+    contract
+  - current TypeScript adapter still accepts a `routeKind` argument at the port
+    boundary, but `CaocaoProviderAdapter.queryDriverRoute()` does not use it in
+    the actual provider request; this looks like a leftover abstraction from an
+    older route-query model, not current-request non-compliance
+  - current response parsing is broadly aligned with the official V2 response:
+    - reads `navigationPolylineType`
+    - reads `steps`
+    - falls back to `nextSteps`
+    - reads `driverEtaInfoVO` / `nextDriverEtaInfoVO`
+    - parses `lat` / `lng` into vehicle coordinates
+  - one parser gap remains for future relay-order correctness:
+    - official docs say relay orders can return both `steps`/`driverEtaInfoVO`
+      and `nextSteps`/`nextDriverEtaInfoVO`
+    - current adapter chooses `next*` only when `steps` is empty, so it cannot
+      explicitly project the “next order” route while `steps` is also present
+      for the previous order
+
+## Next Step
+
+- if implementation starts:
+  1. add explicit diagnostics around `queryDriverRoute()` so staging captures
+     the provider response code/message instead of silently returning `null`
+  2. add a focused backend test covering the "vehicleLocation present, route
+     query failure -> navigationRoute null" path
+  3. align fake-server/test truth with the current V2 contract surface:
+     - current fake OpenAPI spec requires only `order_id`, matching official V2
+     - current backend unit test still asserts
+       `navigation_polyline_type` is absent, which matches the current official
+       V2 request contract
+     - current fake route handler always returns a success payload for any
+       existing order id and does not model provider-side route-query failures
+       by phase/capability/account
+      - official V2 docs restrict route queries to provider statuses `9`, `12`,
+        and `3`, but the fake route handler does not enforce that restriction,
+        so system scenarios cannot catch a status-window rejection from the real
+        provider
+  4. after one staging sample is captured, decide whether the real fix is
+     provider error handling, status-window alignment, or provider-account
+     capability/config correction

From 079d80c31d9ac0b97ed9432b4b256cac9a76290e Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Tue, 30 Jun 2026 15:18:35 +0800
Subject: [PATCH 76/94] chore(commerce): instrument ride-hailing order detail
 diagnostics

- add frontend order-detail/bill/cancel query correlation logs

- add backend detail sync/cancel/transport logs with request context

- add task packet for diagnosis steps and expected replay signal
---
 .../src/controllers/commerce.controller.ts    | 105 +++++-
 .../use-cases/provider-execution-context.ts   |  78 ++++-
 .../sync-ride-hailing-order-with-provider.ts  | 118 +++++++
 .../cancel-order-from-order-detail.ts         |  36 +-
 ...el-ride-hailing-order-from-order-detail.ts | 237 ++++++++++++-
 .../trade/use-cases/rental-ordering-flow.ts   |  68 +++-
 .../src/lib/commerce-order-detail-debug.ts    |  66 ++++
 .../domains/commerce/queries/useCommerce.ts   | 325 +++++++++++++++---
 .../commerce/ui/order-detail/BillCard.vue     |  32 +-
 .../order-detail/RideHailingOrderContent.vue  |  36 +-
 .../commerce/use-cases/order-detail-debug.ts  | 161 +++++++++
 .../src/pages/CommerceOrderDetailPage.vue     |  28 +-
 .../00-task-packet.md                         | 166 +++++++++
 13 files changed, 1369 insertions(+), 87 deletions(-)
 create mode 100644 apps/backend/src/lib/commerce-order-detail-debug.ts
 create mode 100644 apps/frontend/src/domains/commerce/use-cases/order-detail-debug.ts
 create mode 100644 tasks/ride-hailing-order-detail-stale-data-diagnosis/00-task-packet.md

diff --git a/apps/backend/src/controllers/commerce.controller.ts b/apps/backend/src/controllers/commerce.controller.ts
index 4efe37b2b..a1c275e01 100644
--- a/apps/backend/src/controllers/commerce.controller.ts
+++ b/apps/backend/src/controllers/commerce.controller.ts
@@ -10,6 +10,11 @@ import {
   listOfferListing,
   simulateRentalBookingConfirmation,
 } from "../domains/trade";
+import {
+  logCommerceOrderDetailDebug,
+  readCommerceOrderDetailDebugContext,
+  withCommerceOrderDetailDebugContext,
+} from "../lib/commerce-order-detail-debug";
 import { requireAuthenticatedUserId } from "./pr-controller.shared";
 
 const app = new Hono<AuthEnv>();
@@ -190,11 +195,40 @@ export const commerceRoute: Hono<AuthEnv, CommerceRouteSchema> = app
   .get("/orders/:orderId", zValidator("param", orderIdParamSchema), async (c) => {
     const { orderId } = c.req.valid("param");
     const auth = c.get("auth");
-    const result = await getCommerceOrderDetail({
-      orderId,
+    const debug = withCommerceOrderDetailDebugContext(
+      readCommerceOrderDetailDebugContext(c.req.raw.headers),
+      { orderId, routeOrderId: orderId, source: "commerce.controller.order-detail" },
+    );
+    const startedAtMs = Date.now();
+
+    logCommerceOrderDetailDebug(debug, "controller.order-detail.request", {
       viewerUserId: auth.userId,
     });
-    return c.json(result);
+
+    try {
+      const result = await getCommerceOrderDetail({
+        orderId,
+        viewerUserId: auth.userId,
+        debug,
+      });
+      logCommerceOrderDetailDebug(debug, "controller.order-detail.response", {
+        durationMs: Date.now() - startedAtMs,
+        responseOrderId: result.order.id,
+        responseOrderStatus: result.order.status,
+        responseOrderFamily: result.order.family,
+        responseRideExecutionPhase: result.rideHailing?.executionPhase ?? null,
+        responseRideProviderOrderId: result.rideHailing?.provider.providerOrderId ?? null,
+        responseBillId: result.bill?.id ?? null,
+        responseBillStatus: result.bill?.status ?? null,
+      });
+      return c.json(result);
+    } catch (error) {
+      logCommerceOrderDetailDebug(debug, "controller.order-detail.error", {
+        durationMs: Date.now() - startedAtMs,
+        error: error instanceof Error ? error.message : "unknown error",
+      });
+      throw error;
+    }
   })
   .get("/orders/:orderId/bill", zValidator("param", orderIdParamSchema), async (c) => {
     const { orderId } = c.req.valid("param");
@@ -208,11 +242,39 @@ export const commerceRoute: Hono<AuthEnv, CommerceRouteSchema> = app
   .get("/bills/:billId", zValidator("param", billIdParamSchema), async (c) => {
     const { billId } = c.req.valid("param");
     const auth = c.get("auth");
-    const result = await getBillDetail({
-      billId,
+    const debug = withCommerceOrderDetailDebugContext(
+      readCommerceOrderDetailDebugContext(c.req.raw.headers),
+      { billId, source: "commerce.controller.bill-detail" },
+    );
+    const startedAtMs = Date.now();
+
+    logCommerceOrderDetailDebug(debug, "controller.bill-detail.request", {
       viewerUserId: auth.userId,
     });
-    return c.json(result);
+
+    try {
+      const result = await getBillDetail({
+        billId,
+        viewerUserId: auth.userId,
+      });
+      logCommerceOrderDetailDebug(debug, "controller.bill-detail.response", {
+        durationMs: Date.now() - startedAtMs,
+        responseBillId: result.bill.id,
+        responseSourceOrderId: result.bill.sourceOrderId,
+        responseBillStatus: result.bill.status,
+        responseSettlementStatus: result.bill.settlementStatus,
+        responseOrderId: result.order.id,
+        responseOrderStatus: result.order.status,
+        responseLineCount: result.lines.length,
+      });
+      return c.json(result);
+    } catch (error) {
+      logCommerceOrderDetailDebug(debug, "controller.bill-detail.error", {
+        durationMs: Date.now() - startedAtMs,
+        error: error instanceof Error ? error.message : "unknown error",
+      });
+      throw error;
+    }
   })
   .get("/bill-lines/:billLineId", zValidator("param", billLineIdParamSchema), async (c) => {
     const { billLineId } = c.req.valid("param");
@@ -226,11 +288,36 @@ export const commerceRoute: Hono<AuthEnv, CommerceRouteSchema> = app
   .post("/orders/:orderId/cancel", zValidator("param", orderIdParamSchema), async (c) => {
     const { orderId } = c.req.valid("param");
     const userId = requireAuthenticatedUserId(c);
-    const result = await cancelOrderFromOrderDetail({
-      orderId,
+    const debug = withCommerceOrderDetailDebugContext(
+      readCommerceOrderDetailDebugContext(c.req.raw.headers),
+      { orderId, routeOrderId: orderId, source: "commerce.controller.cancel-order" },
+    );
+    const startedAtMs = Date.now();
+
+    logCommerceOrderDetailDebug(debug, "controller.cancel-order.request", {
       actorUserId: userId,
     });
-    return c.json(result);
+
+    try {
+      const result = await cancelOrderFromOrderDetail({
+        orderId,
+        actorUserId: userId,
+        debug,
+      });
+      logCommerceOrderDetailDebug(debug, "controller.cancel-order.response", {
+        durationMs: Date.now() - startedAtMs,
+        resultStatus: "status" in result ? result.status : null,
+        effectKind: "effectKind" in result ? result.effectKind : null,
+        effectAmountFen: "effectAmountFen" in result ? result.effectAmountFen : null,
+      });
+      return c.json(result);
+    } catch (error) {
+      logCommerceOrderDetailDebug(debug, "controller.cancel-order.error", {
+        durationMs: Date.now() - startedAtMs,
+        error: error instanceof Error ? error.message : "unknown error",
+      });
+      throw error;
+    }
   })
   .post(
     "/orders/:orderId/mock-rental-booking-confirmation",
diff --git a/apps/backend/src/domains/ride-hailing/use-cases/provider-execution-context.ts b/apps/backend/src/domains/ride-hailing/use-cases/provider-execution-context.ts
index a90427a0b..637c6b18b 100644
--- a/apps/backend/src/domains/ride-hailing/use-cases/provider-execution-context.ts
+++ b/apps/backend/src/domains/ride-hailing/use-cases/provider-execution-context.ts
@@ -1,14 +1,18 @@
+import type { RideHailingOrder } from "../../../entities/ride-hailing-order";
 import type {
   RideHailingProviderInstance,
   RideHailingProviderInstanceId,
 } from "../../../entities/ride-hailing-provider";
-import type { RideHailingOrder } from "../../../entities/ride-hailing-order";
 import type { TradeOrder, TradeOrderId } from "../../../entities/trade-order";
+import {
+  type CommerceOrderDetailDebugContext,
+  logCommerceOrderDetailDebug,
+} from "../../../lib/commerce-order-detail-debug";
 import { throwHttpProblem } from "../../../lib/problem-details";
+import type { RepositoryExecutor } from "../../../repositories/_executor";
 import { RideHailingOrderRepository } from "../../../repositories/RideHailingOrderRepository";
 import { RideHailingProviderInstanceRepository } from "../../../repositories/RideHailingProviderInstanceRepository";
 import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository";
-import type { RepositoryExecutor } from "../../../repositories/_executor";
 import { getRideHailingChoiceSetItem, getRideHailingProviderBinding } from "../../trade/services";
 import type { RideHailingProviderPort } from "../model";
 import { createRideHailingProviderPort } from "../services";
@@ -21,20 +25,50 @@ export type RideHailingProviderExecutionContext = {
   port: RideHailingProviderPort;
 };
 
+const summarizeExecutionContext = (
+  context: Pick<
+    RideHailingProviderExecutionContext,
+    "order" | "rideOrder" | "providerInstance" | "providerOrderId"
+  >,
+): Record<string, unknown> => ({
+  localOrderId: context.order.id,
+  localOrderStatus: context.order.status,
+  localOrderFamily: context.order.family,
+  rideExecutionPhase: context.rideOrder.executionPhase,
+  rideFinalSettlementCommitted: context.rideOrder.finalSettlementInput !== null,
+  providerInstanceId: context.providerInstance.id,
+  providerInstanceStatus: context.providerInstance.status,
+  providerOrderId: context.providerOrderId,
+});
+
 export async function loadRideHailingProviderExecutionContext(
   input: {
     orderId: TradeOrderId;
     expectedProviderInstanceId?: string | null;
     expectedProviderOrderId?: string | null;
+    debug?: CommerceOrderDetailDebugContext;
   },
   executor?: RepositoryExecutor,
 ): Promise<RideHailingProviderExecutionContext> {
+  logCommerceOrderDetailDebug(input.debug, "ride-provider-context.start", {
+    inputOrderId: input.orderId,
+    expectedProviderInstanceId: input.expectedProviderInstanceId ?? null,
+    expectedProviderOrderId: input.expectedProviderOrderId ?? null,
+    hasExecutor: executor !== undefined,
+  });
+
   const tradeOrderRepo = new TradeOrderRepository(executor);
   const rideOrderRepo = new RideHailingOrderRepository(executor);
   const providerRepo = new RideHailingProviderInstanceRepository(executor);
 
   const order = await tradeOrderRepo.findById(input.orderId);
   if (!order || order.family !== "RIDE_HAILING") {
+    logCommerceOrderDetailDebug(input.debug, "ride-provider-context.order-not-found", {
+      inputOrderId: input.orderId,
+      foundOrderId: order?.id ?? null,
+      foundOrderFamily: order?.family ?? null,
+      foundOrderStatus: order?.status ?? null,
+    });
     return throwHttpProblem({
       status: 404,
       detail: "RideHailing order not found",
@@ -43,6 +77,10 @@ export async function loadRideHailingProviderExecutionContext(
 
   const rideOrder = await rideOrderRepo.findByOrderId(input.orderId);
   if (!rideOrder) {
+    logCommerceOrderDetailDebug(input.debug, "ride-provider-context.ride-order-missing", {
+      inputOrderId: input.orderId,
+      localOrderId: order.id,
+    });
     return throwHttpProblem({
       status: 500,
       detail: "RideHailing order facts are missing",
@@ -52,6 +90,13 @@ export async function loadRideHailingProviderExecutionContext(
   const choiceSetItem = getRideHailingChoiceSetItem(order.items);
   const providerBinding = choiceSetItem ? getRideHailingProviderBinding(choiceSetItem) : null;
   if (!providerBinding?.providerOrderId) {
+    logCommerceOrderDetailDebug(input.debug, "ride-provider-context.binding-missing", {
+      localOrderId: order.id,
+      localOrderStatus: order.status,
+      rideExecutionPhase: rideOrder.executionPhase,
+      providerInstanceId: providerBinding?.providerInstanceId ?? null,
+      providerOrderId: providerBinding?.providerOrderId ?? null,
+    });
     return throwHttpProblem({
       status: 409,
       detail: "RideHailing order is missing provider binding",
@@ -62,6 +107,12 @@ export async function loadRideHailingProviderExecutionContext(
     input.expectedProviderInstanceId &&
     providerBinding.providerInstanceId !== input.expectedProviderInstanceId
   ) {
+    logCommerceOrderDetailDebug(input.debug, "ride-provider-context.instance-mismatch", {
+      localOrderId: order.id,
+      expectedProviderInstanceId: input.expectedProviderInstanceId,
+      actualProviderInstanceId: providerBinding.providerInstanceId,
+      providerOrderId: providerBinding.providerOrderId,
+    });
     return throwHttpProblem({
       status: 409,
       detail: "RideHailing provider instance does not match local order",
@@ -72,6 +123,12 @@ export async function loadRideHailingProviderExecutionContext(
     input.expectedProviderOrderId &&
     providerBinding.providerOrderId !== input.expectedProviderOrderId
   ) {
+    logCommerceOrderDetailDebug(input.debug, "ride-provider-context.order-mismatch", {
+      localOrderId: order.id,
+      providerInstanceId: providerBinding.providerInstanceId,
+      expectedProviderOrderId: input.expectedProviderOrderId,
+      actualProviderOrderId: providerBinding.providerOrderId,
+    });
     return throwHttpProblem({
       status: 409,
       detail: "RideHailing provider order does not match local order",
@@ -82,17 +139,32 @@ export async function loadRideHailingProviderExecutionContext(
     providerBinding.providerInstanceId as RideHailingProviderInstanceId,
   );
   if (!providerInstance || providerInstance.status !== "ACTIVE") {
+    logCommerceOrderDetailDebug(input.debug, "ride-provider-context.provider-missing", {
+      localOrderId: order.id,
+      providerInstanceId: providerBinding.providerInstanceId,
+      providerOrderId: providerBinding.providerOrderId,
+      foundProviderId: providerInstance?.id ?? null,
+      foundProviderStatus: providerInstance?.status ?? null,
+    });
     return throwHttpProblem({
       status: 404,
       detail: "RideHailing provider instance not found",
     });
   }
 
-  return {
+  const context = {
     order,
     rideOrder,
     providerInstance,
     providerOrderId: providerBinding.providerOrderId,
     port: createRideHailingProviderPort({ providerInstance }),
   };
+
+  logCommerceOrderDetailDebug(
+    input.debug,
+    "ride-provider-context.complete",
+    summarizeExecutionContext(context),
+  );
+
+  return context;
 }
diff --git a/apps/backend/src/domains/ride-hailing/use-cases/sync-ride-hailing-order-with-provider.ts b/apps/backend/src/domains/ride-hailing/use-cases/sync-ride-hailing-order-with-provider.ts
index 6f2e983b4..864806869 100644
--- a/apps/backend/src/domains/ride-hailing/use-cases/sync-ride-hailing-order-with-provider.ts
+++ b/apps/backend/src/domains/ride-hailing/use-cases/sync-ride-hailing-order-with-provider.ts
@@ -1,5 +1,9 @@
 import type { NewRideHailingOrder } from "../../../entities/ride-hailing-order";
 import type { TradeOrderId } from "../../../entities/trade-order";
+import {
+  type CommerceOrderDetailDebugContext,
+  logCommerceOrderDetailDebug,
+} from "../../../lib/commerce-order-detail-debug";
 import { db } from "../../../lib/db";
 import { throwHttpProblem } from "../../../lib/problem-details";
 import { RideHailingOrderRepository } from "../../../repositories/RideHailingOrderRepository";
@@ -27,19 +31,49 @@ export type RideHailingProviderSyncTrigger =
 const jsonEqual = (left: unknown, right: unknown): boolean =>
   JSON.stringify(left) === JSON.stringify(right);
 
+const summarizeProviderDetail = (
+  detail: RideHailingProviderOrderDetail,
+): Record<string, unknown> => ({
+  providerPhase: detail.phase,
+  providerStatusLabel: detail.statusLabel,
+  providerDriverName: detail.driver?.driverName ?? null,
+  providerVehiclePlate: detail.vehicle?.plate ?? null,
+  providerHasVehicleLocation: detail.vehicleLocation != null,
+  providerFinalAmountFen: detail.finalAmountFen,
+});
+
 export async function syncRideHailingOrderWithProvider(input: {
   orderId: TradeOrderId;
   expectedProviderInstanceId?: string | null;
   expectedProviderOrderId?: string | null;
   trigger: RideHailingProviderSyncTrigger;
+  debug?: CommerceOrderDetailDebugContext;
 }): Promise<{
   mutated: boolean;
   providerDetail: RideHailingProviderOrderDetail;
 }> {
+  logCommerceOrderDetailDebug(input.debug, "ride-provider-sync.start", {
+    inputOrderId: input.orderId,
+    expectedProviderInstanceId: input.expectedProviderInstanceId ?? null,
+    expectedProviderOrderId: input.expectedProviderOrderId ?? null,
+    trigger: input.trigger,
+  });
+
   const context = await loadRideHailingProviderExecutionContext({
     orderId: input.orderId,
     expectedProviderInstanceId: input.expectedProviderInstanceId,
     expectedProviderOrderId: input.expectedProviderOrderId,
+    debug: input.debug,
+  });
+
+  logCommerceOrderDetailDebug(input.debug, "ride-provider-sync.context", {
+    localOrderId: context.order.id,
+    localOrderStatus: context.order.status,
+    rideExecutionPhase: context.rideOrder.executionPhase,
+    rideDriverName: context.rideOrder.driverSnapshot?.driverName ?? null,
+    rideVehiclePlate: context.rideOrder.vehicleSnapshot?.plate ?? null,
+    providerInstanceId: context.providerInstance.id,
+    providerOrderId: context.providerOrderId,
   });
 
   let providerDetail: RideHailingProviderOrderDetail;
@@ -48,23 +82,58 @@ export async function syncRideHailingOrderWithProvider(input: {
       providerOrderId: context.providerOrderId,
     });
   } catch (error) {
+    logCommerceOrderDetailDebug(input.debug, "ride-provider-sync.provider-detail.error", {
+      localOrderId: context.order.id,
+      providerInstanceId: context.providerInstance.id,
+      providerOrderId: context.providerOrderId,
+      trigger: input.trigger,
+      error:
+        error instanceof Error
+          ? {
+              message: error.message,
+              name: error.name,
+              stack: error.stack ?? null,
+            }
+          : error,
+    });
     throw new RideHailingProviderSyncQueryError(
       "RideHailing provider order detail query failed",
       error,
     );
   }
 
+  logCommerceOrderDetailDebug(input.debug, "ride-provider-sync.provider-detail.success", {
+    localOrderId: context.order.id,
+    providerInstanceId: context.providerInstance.id,
+    providerOrderId: context.providerOrderId,
+    trigger: input.trigger,
+    ...summarizeProviderDetail(providerDetail),
+  });
+
   const observation = observeProviderOrderDetail({
     detail: providerDetail,
     providerOrderId: context.providerOrderId,
   });
 
+  logCommerceOrderDetailDebug(input.debug, "ride-provider-sync.observation", {
+    localOrderId: context.order.id,
+    providerOrderId: context.providerOrderId,
+    trigger: input.trigger,
+    observedExecutionPhase: observation.executionPhase ?? null,
+    observedDriverName: observation.driverSnapshot?.driverName ?? null,
+    observedVehiclePlate: observation.vehicleSnapshot?.plate ?? null,
+    observedFinalSettlementProviderOrderId:
+      observation.finalSettlementInput?.providerOrderId ?? null,
+    observedFinalSettlementAmountFen: observation.finalSettlementInput?.amountFen ?? null,
+  });
+
   const mutated = await db.transaction(async (tx) => {
     const transactionalContext = await loadRideHailingProviderExecutionContext(
       {
         orderId: input.orderId,
         expectedProviderInstanceId: input.expectedProviderInstanceId,
         expectedProviderOrderId: input.expectedProviderOrderId,
+        debug: input.debug,
       },
       tx,
     );
@@ -72,6 +141,17 @@ export async function syncRideHailingOrderWithProvider(input: {
     const rideOrderRepo = new RideHailingOrderRepository(tx);
     const patch: Partial<NewRideHailingOrder> = {};
 
+    logCommerceOrderDetailDebug(input.debug, "ride-provider-sync.tx.context", {
+      localOrderId: transactionalContext.order.id,
+      localOrderStatus: transactionalContext.order.status,
+      rideExecutionPhase: transactionalContext.rideOrder.executionPhase,
+      rideDriverName: transactionalContext.rideOrder.driverSnapshot?.driverName ?? null,
+      rideVehiclePlate: transactionalContext.rideOrder.vehicleSnapshot?.plate ?? null,
+      providerInstanceId: transactionalContext.providerInstance.id,
+      providerOrderId: transactionalContext.providerOrderId,
+      trigger: input.trigger,
+    });
+
     if (
       observation.executionPhase &&
       observation.executionPhase !== transactionalContext.rideOrder.executionPhase
@@ -117,6 +197,18 @@ export async function syncRideHailingOrderWithProvider(input: {
       }
     }
 
+    logCommerceOrderDetailDebug(input.debug, "ride-provider-sync.tx.patch", {
+      localOrderId: transactionalContext.order.id,
+      trigger: input.trigger,
+      patchKeys: Object.keys(patch),
+      executionPhaseBefore: transactionalContext.rideOrder.executionPhase,
+      executionPhaseAfter: patch.executionPhase ?? transactionalContext.rideOrder.executionPhase,
+      driverChanged: "driverSnapshot" in patch,
+      vehicleChanged: "vehicleSnapshot" in patch,
+      finalSettlementCommitted: patch.finalSettlementInput !== undefined,
+      shouldEnsureFinalBill,
+    });
+
     let mutatedInTransaction = false;
     if (Object.keys(patch).length > 0) {
       const updated = await rideOrderRepo.updateByOrderId(
@@ -130,11 +222,22 @@ export async function syncRideHailingOrderWithProvider(input: {
         });
       }
       mutatedInTransaction = true;
+      logCommerceOrderDetailDebug(input.debug, "ride-provider-sync.tx.persisted-ride-order", {
+        localOrderId: transactionalContext.order.id,
+        trigger: input.trigger,
+        patchKeys: Object.keys(patch),
+      });
     }
 
     if (transactionalContext.order.status === "INITIATING") {
       await tradeOrderRepo.updateStatus(transactionalContext.order.id, "OPEN");
       mutatedInTransaction = true;
+      logCommerceOrderDetailDebug(input.debug, "ride-provider-sync.tx.promote-order-status", {
+        localOrderId: transactionalContext.order.id,
+        fromStatus: transactionalContext.order.status,
+        toStatus: "OPEN",
+        trigger: input.trigger,
+      });
     }
 
     if (shouldEnsureFinalBill) {
@@ -145,11 +248,26 @@ export async function syncRideHailingOrderWithProvider(input: {
         tx,
       );
       mutatedInTransaction = mutatedInTransaction || consequence.applied;
+      logCommerceOrderDetailDebug(input.debug, "ride-provider-sync.tx.final-settlement", {
+        localOrderId: transactionalContext.order.id,
+        trigger: input.trigger,
+        applied: consequence.applied,
+        reason: consequence.reason ?? null,
+      });
     }
 
     return mutatedInTransaction;
   });
 
+  logCommerceOrderDetailDebug(input.debug, "ride-provider-sync.complete", {
+    inputOrderId: input.orderId,
+    expectedProviderInstanceId: input.expectedProviderInstanceId ?? null,
+    expectedProviderOrderId: input.expectedProviderOrderId ?? null,
+    trigger: input.trigger,
+    mutated,
+    ...summarizeProviderDetail(providerDetail),
+  });
+
   return {
     mutated,
     providerDetail,
diff --git a/apps/backend/src/domains/trade/use-cases/cancel-order-from-order-detail.ts b/apps/backend/src/domains/trade/use-cases/cancel-order-from-order-detail.ts
index d55997690..b828b8e5f 100644
--- a/apps/backend/src/domains/trade/use-cases/cancel-order-from-order-detail.ts
+++ b/apps/backend/src/domains/trade/use-cases/cancel-order-from-order-detail.ts
@@ -1,5 +1,9 @@
-import { throwHttpProblem } from "../../../lib/problem-details";
 import type { TradeOrderId } from "../../../entities/trade-order";
+import {
+  type CommerceOrderDetailDebugContext,
+  logCommerceOrderDetailDebug,
+} from "../../../lib/commerce-order-detail-debug";
+import { throwHttpProblem } from "../../../lib/problem-details";
 import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository";
 import { cancelRideHailingOrderFromOrderDetail } from "./cancel-ride-hailing-order-from-order-detail";
 import { cancelRentalOrderFromOrderDetail } from "./rental-ordering-flow";
@@ -9,20 +13,50 @@ const tradeOrderRepo = new TradeOrderRepository();
 export async function cancelOrderFromOrderDetail(input: {
   orderId: string;
   actorUserId: string;
+  debug?: CommerceOrderDetailDebugContext;
 }) {
+  logCommerceOrderDetailDebug(input.debug, "cancel.dispatch.start", {
+    inputOrderId: input.orderId,
+    actorUserId: input.actorUserId,
+  });
+
   const order = await tradeOrderRepo.findById(input.orderId as TradeOrderId);
   if (!order) {
+    logCommerceOrderDetailDebug(input.debug, "cancel.dispatch.order-not-found", {
+      inputOrderId: input.orderId,
+      actorUserId: input.actorUserId,
+    });
     return throwHttpProblem({ status: 404, detail: "Order not found" });
   }
 
+  logCommerceOrderDetailDebug(input.debug, "cancel.dispatch.order-loaded", {
+    localOrderId: order.id,
+    localOrderFamily: order.family,
+    localOrderStatus: order.status,
+    actorUserId: input.actorUserId,
+  });
+
   if (order.family === "RENTAL") {
+    logCommerceOrderDetailDebug(input.debug, "cancel.dispatch.family-rental", {
+      localOrderId: order.id,
+      localOrderStatus: order.status,
+    });
     return cancelRentalOrderFromOrderDetail(input);
   }
 
   if (order.family === "RIDE_HAILING") {
+    logCommerceOrderDetailDebug(input.debug, "cancel.dispatch.family-ride-hailing", {
+      localOrderId: order.id,
+      localOrderStatus: order.status,
+    });
     return cancelRideHailingOrderFromOrderDetail(input);
   }
 
+  logCommerceOrderDetailDebug(input.debug, "cancel.dispatch.unsupported-family", {
+    localOrderId: order.id,
+    localOrderFamily: order.family,
+    localOrderStatus: order.status,
+  });
   return throwHttpProblem({
     status: 409,
     detail: "Order does not support cancellation from Order Detail",
diff --git a/apps/backend/src/domains/trade/use-cases/cancel-ride-hailing-order-from-order-detail.ts b/apps/backend/src/domains/trade/use-cases/cancel-ride-hailing-order-from-order-detail.ts
index cb4d83497..98da53017 100644
--- a/apps/backend/src/domains/trade/use-cases/cancel-ride-hailing-order-from-order-detail.ts
+++ b/apps/backend/src/domains/trade/use-cases/cancel-ride-hailing-order-from-order-detail.ts
@@ -1,10 +1,14 @@
-import { throwHttpProblem } from "../../../lib/problem-details";
-import { db } from "../../../lib/db";
 import type { RideHailingProviderInstanceId } from "../../../entities/ride-hailing-provider";
 import type { TradeOrderId } from "../../../entities/trade-order";
 import type { UserId } from "../../../entities/user";
-import { RideHailingProviderInstanceRepository } from "../../../repositories/RideHailingProviderInstanceRepository";
+import {
+  type CommerceOrderDetailDebugContext,
+  logCommerceOrderDetailDebug,
+} from "../../../lib/commerce-order-detail-debug";
+import { db } from "../../../lib/db";
+import { throwHttpProblem } from "../../../lib/problem-details";
 import { RideHailingOrderRepository } from "../../../repositories/RideHailingOrderRepository";
+import { RideHailingProviderInstanceRepository } from "../../../repositories/RideHailingProviderInstanceRepository";
 import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository";
 import {
   createRideHailingProviderPort,
@@ -39,14 +43,37 @@ function createAttemptId(): string {
   return `term_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
 }
 
+const summarizeOrderRecord = (
+  orderRecord: {
+    id: string;
+    family: string;
+    status: string;
+    createdBy: string;
+  } | null,
+): Record<string, unknown> => ({
+  localOrderId: orderRecord?.id ?? null,
+  localOrderFamily: orderRecord?.family ?? null,
+  localOrderStatus: orderRecord?.status ?? null,
+  localOrderCreatedBy: orderRecord?.createdBy ?? null,
+});
+
+const summarizeRideOrder = (
+  rideOrder: {
+    executionPhase: string;
+    driverSnapshot: { driverName?: string | null } | null;
+    vehicleSnapshot: { plate?: string | null } | null;
+  } | null,
+): Record<string, unknown> => ({
+  rideExecutionPhase: rideOrder?.executionPhase ?? null,
+  rideDriverName: rideOrder?.driverSnapshot?.driverName ?? null,
+  rideVehiclePlate: rideOrder?.vehicleSnapshot?.plate ?? null,
+});
+
 const assertActorMayCancelRideHailingOrder = (
   orderRecord: { createdBy: string },
   actor: RideHailingCancellationActor,
 ) => {
-  if (
-    actor.authority === "ORDER_CREATOR" &&
-    orderRecord.createdBy !== actor.actorUserId
-  ) {
+  if (actor.authority === "ORDER_CREATOR" && orderRecord.createdBy !== actor.actorUserId) {
     return throwHttpProblem({
       status: 403,
       detail: "Only order creator can cancel this order",
@@ -57,12 +84,32 @@ const assertActorMayCancelRideHailingOrder = (
 async function cancelRideHailingOrder(input: {
   orderId: string;
   actor: RideHailingCancellationActor;
+  debug?: CommerceOrderDetailDebugContext;
 }) {
+  logCommerceOrderDetailDebug(input.debug, "ride-cancel.start", {
+    inputOrderId: input.orderId,
+    actorUserId: input.actor.actorUserId,
+    actorAuthority: input.actor.authority,
+  });
+
   const orderRecord = await tradeOrderRepo.findById(input.orderId as TradeOrderId);
   if (!orderRecord) {
+    logCommerceOrderDetailDebug(input.debug, "ride-cancel.order-not-found", {
+      inputOrderId: input.orderId,
+      actorUserId: input.actor.actorUserId,
+    });
     return throwHttpProblem({ status: 404, detail: "Order not found" });
   }
+  logCommerceOrderDetailDebug(input.debug, "ride-cancel.order-loaded", {
+    ...summarizeOrderRecord(orderRecord),
+    actorUserId: input.actor.actorUserId,
+    actorAuthority: input.actor.authority,
+  });
   if (orderRecord.family !== "RIDE_HAILING") {
+    logCommerceOrderDetailDebug(input.debug, "ride-cancel.family-mismatch", {
+      ...summarizeOrderRecord(orderRecord),
+      actorUserId: input.actor.actorUserId,
+    });
     return throwHttpProblem({
       status: 409,
       detail: "Only RideHailing orders can use this cancellation flow",
@@ -70,6 +117,10 @@ async function cancelRideHailingOrder(input: {
   }
   assertActorMayCancelRideHailingOrder(orderRecord, input.actor);
   if (orderRecord.status !== "OPEN" && orderRecord.status !== "INITIATING") {
+    logCommerceOrderDetailDebug(input.debug, "ride-cancel.order-status-blocked", {
+      ...summarizeOrderRecord(orderRecord),
+      actorUserId: input.actor.actorUserId,
+    });
     return throwHttpProblem({
       status: 409,
       detail: "Order cannot be cancelled from its current status",
@@ -78,33 +129,80 @@ async function cancelRideHailingOrder(input: {
 
   const initialRideOrder = await rideOrderRepo.findByOrderId(orderRecord.id);
   if (!initialRideOrder) {
+    logCommerceOrderDetailDebug(input.debug, "ride-cancel.initial-ride-order-missing", {
+      ...summarizeOrderRecord(orderRecord),
+    });
     return throwHttpProblem({
       status: 500,
       detail: "RideHailing order facts are missing",
     });
   }
 
+  logCommerceOrderDetailDebug(input.debug, "ride-cancel.initial-ride-order", {
+    ...summarizeOrderRecord(orderRecord),
+    ...summarizeRideOrder(initialRideOrder),
+  });
+
   try {
+    logCommerceOrderDetailDebug(input.debug, "ride-cancel.pre-sync.start", {
+      ...summarizeOrderRecord(orderRecord),
+      ...summarizeRideOrder(initialRideOrder),
+    });
     await syncRideHailingOrderWithProvider({
       orderId: orderRecord.id,
       trigger: "CANCEL_REQUEST",
+      debug: input.debug,
+    });
+    logCommerceOrderDetailDebug(input.debug, "ride-cancel.pre-sync.success", {
+      ...summarizeOrderRecord(orderRecord),
     });
   } catch (error) {
     if (error instanceof RideHailingProviderSyncQueryError) {
+      logCommerceOrderDetailDebug(input.debug, "ride-cancel.pre-sync.query-error", {
+        ...summarizeOrderRecord(orderRecord),
+        error:
+          error.originalError instanceof Error
+            ? {
+                message: error.originalError.message,
+                name: error.originalError.name,
+                stack: error.originalError.stack ?? null,
+              }
+            : error.originalError,
+      });
       return throwHttpProblem({
         status: 503,
         detail: "RideHailing provider detail query failed before cancellation",
         code: "RIDE_HAILING_PROVIDER_DETAIL_QUERY_FAILED",
       });
     }
+    logCommerceOrderDetailDebug(input.debug, "ride-cancel.pre-sync.error", {
+      ...summarizeOrderRecord(orderRecord),
+      error:
+        error instanceof Error
+          ? {
+              message: error.message,
+              name: error.name,
+              stack: error.stack ?? null,
+            }
+          : error,
+    });
     throw error;
   }
 
   const syncedOrderRecord = await tradeOrderRepo.findById(orderRecord.id);
   if (!syncedOrderRecord) {
+    logCommerceOrderDetailDebug(input.debug, "ride-cancel.synced-order-missing", {
+      localOrderId: orderRecord.id,
+    });
     return throwHttpProblem({ status: 404, detail: "Order not found" });
   }
+  logCommerceOrderDetailDebug(input.debug, "ride-cancel.synced-order", {
+    ...summarizeOrderRecord(syncedOrderRecord),
+  });
   if (syncedOrderRecord.status !== "OPEN") {
+    logCommerceOrderDetailDebug(input.debug, "ride-cancel.synced-order-status-blocked", {
+      ...summarizeOrderRecord(syncedOrderRecord),
+    });
     return throwHttpProblem({
       status: 409,
       detail: "Order cannot be cancelled from its current status",
@@ -113,12 +211,23 @@ async function cancelRideHailingOrder(input: {
 
   const syncedRideOrder = await rideOrderRepo.findByOrderId(orderRecord.id);
   if (!syncedRideOrder) {
+    logCommerceOrderDetailDebug(input.debug, "ride-cancel.synced-ride-order-missing", {
+      ...summarizeOrderRecord(syncedOrderRecord),
+    });
     return throwHttpProblem({
       status: 500,
       detail: "RideHailing order facts are missing",
     });
   }
+  logCommerceOrderDetailDebug(input.debug, "ride-cancel.synced-ride-order", {
+    ...summarizeOrderRecord(syncedOrderRecord),
+    ...summarizeRideOrder(syncedRideOrder),
+  });
   if (!isCancellableRideHailingExecutionPhase(syncedRideOrder.executionPhase)) {
+    logCommerceOrderDetailDebug(input.debug, "ride-cancel.synced-phase-blocked", {
+      ...summarizeOrderRecord(syncedOrderRecord),
+      ...summarizeRideOrder(syncedRideOrder),
+    });
     return throwHttpProblem({
       status: 409,
       detail: "RideHailing order cannot be cancelled from its current phase",
@@ -130,16 +239,36 @@ async function cancelRideHailingOrder(input: {
     ? getRideHailingProviderBinding(rideChoiceSetItem)
     : null;
   if (!providerBinding?.providerOrderId) {
+    logCommerceOrderDetailDebug(input.debug, "ride-cancel.binding-missing", {
+      ...summarizeOrderRecord(syncedOrderRecord),
+      ...summarizeRideOrder(syncedRideOrder),
+      providerInstanceId: providerBinding?.providerInstanceId ?? null,
+      providerOrderId: providerBinding?.providerOrderId ?? null,
+    });
     return throwHttpProblem({
       status: 409,
       detail: "RideHailing order is missing provider binding",
     });
   }
 
+  logCommerceOrderDetailDebug(input.debug, "ride-cancel.binding-loaded", {
+    ...summarizeOrderRecord(syncedOrderRecord),
+    ...summarizeRideOrder(syncedRideOrder),
+    providerInstanceId: providerBinding.providerInstanceId,
+    providerOrderId: providerBinding.providerOrderId,
+  });
+
   const providerInstance = await providerRepo.findById(
     providerBinding.providerInstanceId as RideHailingProviderInstanceId,
   );
   if (!providerInstance || providerInstance.status !== "ACTIVE") {
+    logCommerceOrderDetailDebug(input.debug, "ride-cancel.provider-missing", {
+      ...summarizeOrderRecord(syncedOrderRecord),
+      providerInstanceId: providerBinding.providerInstanceId,
+      providerOrderId: providerBinding.providerOrderId,
+      foundProviderId: providerInstance?.id ?? null,
+      foundProviderStatus: providerInstance?.status ?? null,
+    });
     return throwHttpProblem({
       status: 404,
       detail: "RideHailing provider instance not found",
@@ -147,11 +276,45 @@ async function cancelRideHailingOrder(input: {
   }
 
   const port = createRideHailingProviderPort({ providerInstance });
-  const providerCancellation = await port.cancelRide({
+  logCommerceOrderDetailDebug(input.debug, "ride-cancel.provider-request.start", {
+    ...summarizeOrderRecord(syncedOrderRecord),
+    ...summarizeRideOrder(syncedRideOrder),
+    providerInstanceId: providerBinding.providerInstanceId,
     providerOrderId: providerBinding.providerOrderId,
-    cancelCode: 12,
-    cancelReason: input.actor.providerCancelReason,
-    whoCancel: input.actor.providerWhoCancel,
+    actorAuthority: input.actor.authority,
+    providerWhoCancel: input.actor.providerWhoCancel,
+  });
+
+  let providerCancellation: Awaited<ReturnType<typeof port.cancelRide>>;
+  try {
+    providerCancellation = await port.cancelRide({
+      providerOrderId: providerBinding.providerOrderId,
+      cancelCode: 12,
+      cancelReason: input.actor.providerCancelReason,
+      whoCancel: input.actor.providerWhoCancel,
+    });
+  } catch (error) {
+    logCommerceOrderDetailDebug(input.debug, "ride-cancel.provider-request.error", {
+      ...summarizeOrderRecord(syncedOrderRecord),
+      providerInstanceId: providerBinding.providerInstanceId,
+      providerOrderId: providerBinding.providerOrderId,
+      error:
+        error instanceof Error
+          ? {
+              message: error.message,
+              name: error.name,
+              stack: error.stack ?? null,
+            }
+          : error,
+    });
+    throw error;
+  }
+
+  logCommerceOrderDetailDebug(input.debug, "ride-cancel.provider-request.success", {
+    ...summarizeOrderRecord(syncedOrderRecord),
+    providerInstanceId: providerBinding.providerInstanceId,
+    providerOrderId: providerBinding.providerOrderId,
+    cancelFeeFen: providerCancellation.cancelFeeFen,
   });
   const decidedAt = new Date().toISOString();
 
@@ -161,9 +324,15 @@ async function cancelRideHailingOrder(input: {
 
     const currentOrderRecord = await transactionalTradeOrderRepo.findById(orderRecord.id);
     if (!currentOrderRecord) {
+      logCommerceOrderDetailDebug(input.debug, "ride-cancel.tx.order-missing", {
+        localOrderId: orderRecord.id,
+      });
       return throwHttpProblem({ status: 404, detail: "Order not found" });
     }
     if (currentOrderRecord.family !== "RIDE_HAILING") {
+      logCommerceOrderDetailDebug(input.debug, "ride-cancel.tx.family-mismatch", {
+        ...summarizeOrderRecord(currentOrderRecord),
+      });
       return throwHttpProblem({
         status: 409,
         detail: "Only RideHailing orders can use this cancellation flow",
@@ -171,6 +340,9 @@ async function cancelRideHailingOrder(input: {
     }
     assertActorMayCancelRideHailingOrder(currentOrderRecord, input.actor);
     if (currentOrderRecord.status !== "OPEN") {
+      logCommerceOrderDetailDebug(input.debug, "ride-cancel.tx.order-status-blocked", {
+        ...summarizeOrderRecord(currentOrderRecord),
+      });
       return throwHttpProblem({
         status: 409,
         detail: "Order cannot be cancelled from its current status",
@@ -179,12 +351,23 @@ async function cancelRideHailingOrder(input: {
 
     const currentRideOrder = await transactionalRideOrderRepo.findByOrderId(currentOrderRecord.id);
     if (!currentRideOrder) {
+      logCommerceOrderDetailDebug(input.debug, "ride-cancel.tx.ride-order-missing", {
+        ...summarizeOrderRecord(currentOrderRecord),
+      });
       return throwHttpProblem({
         status: 500,
         detail: "RideHailing order facts are missing",
       });
     }
+    logCommerceOrderDetailDebug(input.debug, "ride-cancel.tx.ride-order", {
+      ...summarizeOrderRecord(currentOrderRecord),
+      ...summarizeRideOrder(currentRideOrder),
+    });
     if (!isCancellableRideHailingExecutionPhase(currentRideOrder.executionPhase)) {
+      logCommerceOrderDetailDebug(input.debug, "ride-cancel.tx.phase-blocked", {
+        ...summarizeOrderRecord(currentOrderRecord),
+        ...summarizeRideOrder(currentRideOrder),
+      });
       return throwHttpProblem({
         status: 409,
         detail: "RideHailing order cannot be cancelled from its current phase",
@@ -211,6 +394,15 @@ async function cancelRideHailingOrder(input: {
       effectAmountFen: providerCancellation.cancelFeeFen,
     });
 
+    logCommerceOrderDetailDebug(input.debug, "ride-cancel.tx.termination-approved", {
+      ...summarizeOrderRecord(currentOrderRecord),
+      ...summarizeRideOrder(currentRideOrder),
+      attemptId,
+      approvedStatus: approved.status,
+      effectKind: providerCancellation.cancelFeeFen > 0 ? "ABORT_FEE" : "NONE",
+      effectAmountFen: providerCancellation.cancelFeeFen,
+    });
+
     const persisted = await transactionalTradeOrderRepo.applyTerminationState({
       id: order.id as TradeOrderId,
       status: approved.status,
@@ -223,6 +415,12 @@ async function cancelRideHailingOrder(input: {
       });
     }
 
+    logCommerceOrderDetailDebug(input.debug, "ride-cancel.tx.order-persisted", {
+      localOrderId: persisted.id,
+      persistedOrderStatus: persisted.status,
+      attemptId,
+    });
+
     const updatedRideOrder = await transactionalRideOrderRepo.updateByOrderId(
       order.id as TradeOrderId,
       {
@@ -236,7 +434,7 @@ async function cancelRideHailingOrder(input: {
       });
     }
 
-    return {
+    const result = {
       orderId: persisted.id,
       attemptId,
       status: persisted.status,
@@ -245,12 +443,24 @@ async function cancelRideHailingOrder(input: {
       effectAmountFen: providerCancellation.cancelFeeFen,
       refunds: [],
     };
+
+    logCommerceOrderDetailDebug(input.debug, "ride-cancel.tx.complete", {
+      localOrderId: persisted.id,
+      persistedOrderStatus: persisted.status,
+      persistedRideExecutionPhase: updatedRideOrder.executionPhase,
+      attemptId,
+      effectKind: result.effectKind,
+      effectAmountFen: result.effectAmountFen,
+    });
+
+    return result;
   });
 }
 
 export async function cancelRideHailingOrderFromOrderDetail(input: {
   orderId: string;
   actorUserId: string;
+  debug?: CommerceOrderDetailDebugContext;
 }) {
   return cancelRideHailingOrder({
     orderId: input.orderId,
@@ -261,12 +471,14 @@ export async function cancelRideHailingOrderFromOrderDetail(input: {
       providerWhoCancel: 1,
       terminationReason: "用户取消订单",
     },
+    debug: input.debug,
   });
 }
 
 export async function cancelRideHailingOrderFromAdmin(input: {
   orderId: string;
   actorUserId: string;
+  debug?: CommerceOrderDetailDebugContext;
 }) {
   return cancelRideHailingOrder({
     orderId: input.orderId,
@@ -277,5 +489,6 @@ export async function cancelRideHailingOrderFromAdmin(input: {
       providerWhoCancel: 2,
       terminationReason: "管理员取消订单",
     },
+    debug: input.debug,
   });
 }
diff --git a/apps/backend/src/domains/trade/use-cases/rental-ordering-flow.ts b/apps/backend/src/domains/trade/use-cases/rental-ordering-flow.ts
index a8bf6a79a..2c132ad82 100644
--- a/apps/backend/src/domains/trade/use-cases/rental-ordering-flow.ts
+++ b/apps/backend/src/domains/trade/use-cases/rental-ordering-flow.ts
@@ -1,5 +1,9 @@
-import { throwHttpProblem } from "../../../lib/problem-details";
 import type { TradeOrder, TradeOrderId } from "../../../entities/trade-order";
+import {
+  type CommerceOrderDetailDebugContext,
+  logCommerceOrderDetailDebug,
+} from "../../../lib/commerce-order-detail-debug";
+import { throwHttpProblem } from "../../../lib/problem-details";
 import { BillLineRepository } from "../../../repositories/BillLineRepository";
 import { BillRepository } from "../../../repositories/BillRepository";
 import { RentalOrderRepository } from "../../../repositories/RentalOrderRepository";
@@ -7,22 +11,18 @@ import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository
 import { deriveBillPaymentState } from "../../bill";
 import { requestRentalCancellationHandling } from "../../fulfillment";
 import { confirmRentalBooking } from "../../fulfillment/use-cases/confirm-rental-booking";
+import type { OrderItemSnapshot, OrderTerminationAttempt, RentalRegistrant } from "../model";
 import {
   canRequestOrderTermination,
   resolveRentalTerminationPolicy,
   toRentalOrderModel,
 } from "../services";
-import type {
-  OrderItemSnapshot,
-  OrderTerminationAttempt,
-  RentalRegistrant,
-} from "../model";
 import { finalizeRentalOrderTermination } from "./finalize-rental-order-termination";
+import { requestOrderTermination } from "./request-order-termination";
 import {
   buildRideHailingDetailProjection,
   type RideHailingOrderDetailProjection,
 } from "./ride-hailing-ordering-flow";
-import { requestOrderTermination } from "./request-order-termination";
 
 const tradeOrderRepo = new TradeOrderRepository();
 const rentalOrderRepo = new RentalOrderRepository();
@@ -76,41 +76,67 @@ export type CommerceOrderDetailProjection = {
 export async function getCommerceOrderDetail(input: {
   orderId: string;
   viewerUserId: string | null;
+  debug?: CommerceOrderDetailDebugContext;
 }): Promise<CommerceOrderDetailProjection> {
+  logCommerceOrderDetailDebug(input.debug, "usecase.order-detail.start", {
+    inputOrderId: input.orderId,
+    viewerUserId: input.viewerUserId,
+  });
   if (!input.viewerUserId) {
+    logCommerceOrderDetailDebug(input.debug, "usecase.order-detail.auth-missing", {
+      inputOrderId: input.orderId,
+    });
     return throwHttpProblem({ status: 401, detail: "Authentication required" });
   }
 
   const order = await tradeOrderRepo.findById(input.orderId as TradeOrderId);
   if (!order) {
+    logCommerceOrderDetailDebug(input.debug, "usecase.order-detail.order-not-found", {
+      inputOrderId: input.orderId,
+    });
     return throwHttpProblem({ status: 404, detail: "Order not found" });
   }
   const canView =
     order.createdBy === input.viewerUserId ||
     order.participants.some((participant) => participant.userId === input.viewerUserId);
   if (!canView) {
+    logCommerceOrderDetailDebug(input.debug, "usecase.order-detail.forbidden", {
+      inputOrderId: input.orderId,
+      localOrderId: order.id,
+      localOrderStatus: order.status,
+      localOrderFamily: order.family,
+      viewerUserId: input.viewerUserId,
+    });
     return throwHttpProblem({ status: 403, detail: "Order is not accessible" });
   }
 
+  logCommerceOrderDetailDebug(input.debug, "usecase.order-detail.base-order", {
+    localOrderId: order.id,
+    localOrderFamily: order.family,
+    localOrderStatus: order.status,
+    participantCount: order.participants.length,
+  });
+
   const rideHailingDetail =
     order.family === "RIDE_HAILING"
-      ? await buildRideHailingDetailProjection({ order })
+      ? await buildRideHailingDetailProjection({ order, debug: input.debug })
       : null;
   const bill = await billRepo.findBySourceOrderId(order.id);
   const billLines = bill ? await billLineRepo.listByBillId(bill.id) : [];
   const paymentState = bill ? deriveBillPaymentState({ lines: billLines }) : null;
   const rentalOrder =
-    order.family === "RENTAL"
-      ? await rentalOrderRepo.findByOrderId(order.id)
-      : null;
+    order.family === "RENTAL" ? await rentalOrderRepo.findByOrderId(order.id) : null;
   if (order.family === "RENTAL" && !rentalOrder) {
+    logCommerceOrderDetailDebug(input.debug, "usecase.order-detail.rental-facts-missing", {
+      localOrderId: order.id,
+    });
     return throwHttpProblem({
       status: 500,
       detail: "Rental order facts are missing",
     });
   }
 
-  return {
+  const result: CommerceOrderDetailProjection = {
     order: {
       id: order.id,
       family: order.family,
@@ -164,6 +190,20 @@ export async function getCommerceOrderDetail(input: {
         }
       : null,
   };
+
+  logCommerceOrderDetailDebug(input.debug, "usecase.order-detail.complete", {
+    responseOrderId: result.order.id,
+    responseOrderFamily: result.order.family,
+    responseOrderStatus: result.order.status,
+    responseRideExecutionPhase: result.rideHailing?.executionPhase ?? null,
+    responseRideProviderOrderId: result.rideHailing?.provider.providerOrderId ?? null,
+    responseBillId: result.bill?.id ?? null,
+    responseBillStatus: result.bill?.status ?? null,
+    responsePaymentStatus: result.payment.status,
+    responseFulfillmentId: result.fulfillment?.id ?? null,
+  });
+
+  return result;
 }
 
 export async function cancelRentalOrderFromOrderDetail(input: {
@@ -218,9 +258,7 @@ export async function cancelRentalOrderFromOrderDetail(input: {
     orderId: input.orderId,
     requestedBy: input.actorUserId,
     requestedAt,
-    resolutionPath: requiresFulfillmentGate
-      ? "RENTAL_FULFILLMENT"
-      : "TRADE_LOCAL",
+    resolutionPath: requiresFulfillmentGate ? "RENTAL_FULFILLMENT" : "TRADE_LOCAL",
   });
 
   if (requiresFulfillmentGate) {
diff --git a/apps/backend/src/lib/commerce-order-detail-debug.ts b/apps/backend/src/lib/commerce-order-detail-debug.ts
new file mode 100644
index 000000000..05aea6d17
--- /dev/null
+++ b/apps/backend/src/lib/commerce-order-detail-debug.ts
@@ -0,0 +1,66 @@
+export type CommerceOrderDetailDebugContext = {
+  enabled: boolean;
+  sessionId: string | null;
+  requestId: string | null;
+  channel: string | null;
+  source: string | null;
+  trigger: string | null;
+  routeOrderId: string | null;
+  orderId: string | null;
+  billId: string | null;
+};
+
+const normalizeHeaderValue = (value: string | null): string | null => {
+  const normalized = value?.trim() ?? "";
+  return normalized.length > 0 ? normalized : null;
+};
+
+export const readCommerceOrderDetailDebugContext = (
+  headers: Headers,
+): CommerceOrderDetailDebugContext => {
+  const sessionId = normalizeHeaderValue(headers.get("x-commerce-order-debug-session"));
+  const requestId = normalizeHeaderValue(headers.get("x-commerce-order-debug-request"));
+  const enabledHeader = normalizeHeaderValue(headers.get("x-commerce-order-debug"));
+
+  return {
+    enabled: enabledHeader === "1" || sessionId !== null || requestId !== null,
+    sessionId,
+    requestId,
+    channel: normalizeHeaderValue(headers.get("x-commerce-order-debug-channel")),
+    source: normalizeHeaderValue(headers.get("x-commerce-order-debug-source")),
+    trigger: normalizeHeaderValue(headers.get("x-commerce-order-debug-trigger")),
+    routeOrderId: normalizeHeaderValue(headers.get("x-commerce-order-debug-route-order-id")),
+    orderId: normalizeHeaderValue(headers.get("x-commerce-order-debug-order-id")),
+    billId: normalizeHeaderValue(headers.get("x-commerce-order-debug-bill-id")),
+  };
+};
+
+export const withCommerceOrderDetailDebugContext = (
+  context: CommerceOrderDetailDebugContext,
+  patch: Partial<Omit<CommerceOrderDetailDebugContext, "enabled">>,
+): CommerceOrderDetailDebugContext => ({
+  ...context,
+  ...patch,
+});
+
+export const logCommerceOrderDetailDebug = (
+  context: CommerceOrderDetailDebugContext | null | undefined,
+  event: string,
+  payload: Record<string, unknown> = {},
+): void => {
+  if (!context?.enabled) return;
+
+  console.info("[CommerceOrderDetailDebug]", {
+    at: new Date().toISOString(),
+    event,
+    sessionId: context.sessionId,
+    requestId: context.requestId,
+    channel: context.channel,
+    source: context.source,
+    trigger: context.trigger,
+    routeOrderId: context.routeOrderId,
+    orderId: context.orderId,
+    billId: context.billId,
+    ...payload,
+  });
+};
diff --git a/apps/frontend/src/domains/commerce/queries/useCommerce.ts b/apps/frontend/src/domains/commerce/queries/useCommerce.ts
index 16a5a298a..42ce53480 100644
--- a/apps/frontend/src/domains/commerce/queries/useCommerce.ts
+++ b/apps/frontend/src/domains/commerce/queries/useCommerce.ts
@@ -1,6 +1,15 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
 import type { InferResponseType } from "hono";
-import { computed, onScopeDispose, type Ref, watch } from "vue";
+import { computed, onScopeDispose, type Ref, unref, watch } from "vue";
+import {
+  consumeNextCommerceOrderDetailTrigger,
+  createCommerceOrderDetailDebugHeaders,
+  createCommerceOrderDetailDebugId,
+  describeCommerceOrderDetailDebugError,
+  logCommerceOrderDetailDebug,
+  markNextCommerceOrderDetailTrigger,
+  readCommerceOrderDetailDebugValue,
+} from "@/domains/commerce/use-cases/order-detail-debug";
 import { client } from "@/lib/rpc";
 import { buildApiError, readApiErrorPayload, resolveApiErrorMessage } from "@/shared/api/error";
 import { queryKeys } from "@/shared/api/query-keys";
@@ -69,6 +78,37 @@ const readJsonOrThrow = async <T>(response: Response, fallback: string): Promise
   return (await response.json()) as T;
 };
 
+const summarizeOrderDetailDebug = (
+  detail: CommerceOrderDetailResponse | null | undefined,
+): Record<string, unknown> => ({
+  dataOrderId: detail?.order.id ?? null,
+  dataOrderFamily: detail?.order.family ?? null,
+  dataOrderStatus: detail?.order.status ?? null,
+  rideProviderOrderId: detail?.rideHailing?.provider.providerOrderId ?? null,
+  rideExecutionPhase: detail?.rideHailing?.executionPhase ?? null,
+  billId: detail?.bill?.id ?? null,
+  billStatus: detail?.bill?.status ?? null,
+  billLineCount: detail?.bill?.lines.length ?? 0,
+});
+
+const summarizeBillDetailDebug = (
+  detail: BillDetailResponse | null | undefined,
+): Record<string, unknown> => ({
+  responseBillId: detail?.bill.id ?? null,
+  responseSourceOrderId: detail?.bill.sourceOrderId ?? null,
+  responseBillStatus: detail?.bill.status ?? null,
+  responseBillSettlementStatus: detail?.bill.settlementStatus ?? null,
+  responseOrderId: detail?.order.id ?? null,
+  responseOrderStatus: detail?.order.status ?? null,
+  responseLineCount: detail?.lines.length ?? 0,
+});
+
+type BillDetailDebugOptions = {
+  source?: string;
+  orderId?: Ref<string | null> | string | null;
+  routeOrderId?: Ref<string | null> | string | null;
+};
+
 export const usePlacementMatch = (
   matchingContext: Ref<unknown | null>,
   type: "BUTTON" = "BUTTON",
@@ -211,26 +251,77 @@ export const useCreateOrder = () => {
 };
 
 export const useCommerceOrderDetail = (orderId: Ref<string | null>) => {
+  let lastRequestedOrderId: string | null = null;
+  let pollingTickCount = 0;
+
   const query = useQuery<CommerceOrderDetailResponse>({
     queryKey: computed(() => queryKeys.commerce.orderDetail(orderId.value)),
     queryFn: async () => {
-      if (orderId.value === null) {
+      const currentOrderId = orderId.value;
+      if (currentOrderId === null) {
         throw new Error("Missing order id");
       }
 
-      const response = await client.api.commerce.orders[":orderId"].$get(
-        {
-          param: {
-            orderId: orderId.value,
+      const requestId = createCommerceOrderDetailDebugId("detail");
+      const trigger =
+        consumeNextCommerceOrderDetailTrigger(currentOrderId) ??
+        (lastRequestedOrderId === null
+          ? "initial-order-load"
+          : lastRequestedOrderId === currentOrderId
+            ? "query-refetch"
+            : "order-id-change");
+      const startedAtMs = Date.now();
+
+      logCommerceOrderDetailDebug("detail.query.start", {
+        requestId,
+        trigger,
+        routeOrderId: currentOrderId,
+      });
+      lastRequestedOrderId = currentOrderId;
+
+      try {
+        const response = await client.api.commerce.orders[":orderId"].$get(
+          {
+            param: {
+              orderId: currentOrderId,
+            },
           },
-        },
-        {
-          init: {
-            credentials: "include",
+          {
+            init: {
+              credentials: "include",
+              headers: createCommerceOrderDetailDebugHeaders({
+                channel: "detail",
+                source: "useCommerceOrderDetail",
+                requestId,
+                orderId: currentOrderId,
+                routeOrderId: currentOrderId,
+                trigger,
+              }),
+            },
           },
-        },
-      );
-      return readJsonOrThrow<CommerceOrderDetailResponse>(response, "Failed to load order");
+        );
+        const detail = await readJsonOrThrow<CommerceOrderDetailResponse>(
+          response,
+          "Failed to load order",
+        );
+        logCommerceOrderDetailDebug("detail.query.success", {
+          requestId,
+          trigger,
+          routeOrderId: currentOrderId,
+          durationMs: Date.now() - startedAtMs,
+          ...summarizeOrderDetailDebug(detail),
+        });
+        return detail;
+      } catch (error) {
+        logCommerceOrderDetailDebug("detail.query.error", {
+          requestId,
+          trigger,
+          routeOrderId: currentOrderId,
+          durationMs: Date.now() - startedAtMs,
+          error: describeCommerceOrderDetailDebugError(error),
+        });
+        throw error;
+      }
     },
     enabled: () => orderId.value !== null,
   });
@@ -245,46 +336,154 @@ export const useCommerceOrderDetail = (orderId: Ref<string | null>) => {
   watch(
     () => orderId.value !== null && shouldPollCommerceOrderDetail(query.data.value),
     (shouldPoll) => {
+      logCommerceOrderDetailDebug("detail.poll.evaluate", {
+        routeOrderId: orderId.value,
+        shouldPoll,
+        ...summarizeOrderDetailDebug(query.data.value),
+      });
       stopPolling();
       if (!shouldPoll) return;
       pollingIntervalId = setInterval(() => {
+        pollingTickCount += 1;
+        markNextCommerceOrderDetailTrigger(orderId.value, "polling-interval");
+        logCommerceOrderDetailDebug("detail.poll.tick", {
+          routeOrderId: orderId.value,
+          pollingTickCount,
+          ...summarizeOrderDetailDebug(query.data.value),
+        });
         void query.refetch();
       }, ACTIVE_RIDE_HAILING_DETAIL_POLLING_MS);
     },
     { immediate: true },
   );
 
+  watch(
+    () => ({
+      routeOrderId: orderId.value,
+      status: query.status.value,
+      fetchStatus: query.fetchStatus.value,
+      isPending: query.isPending.value,
+      isFetching: query.isFetching.value,
+      isRefetching: query.isRefetching.value,
+      error: query.error.value ? describeCommerceOrderDetailDebugError(query.error.value) : null,
+      ...summarizeOrderDetailDebug(query.data.value),
+    }),
+    (snapshot) => {
+      logCommerceOrderDetailDebug("detail.query.state", snapshot);
+    },
+    { immediate: true },
+  );
+
   onScopeDispose(stopPolling);
 
   return query;
 };
 
-export const useBillDetail = (billId: Ref<string | null>) =>
-  useQuery<BillDetailResponse>({
+export const useBillDetail = (billId: Ref<string | null>, debug?: BillDetailDebugOptions) => {
+  let lastRequestedBillId: string | null = null;
+
+  const query = useQuery<BillDetailResponse>({
     queryKey: computed(() => queryKeys.commerce.billDetail(billId.value)),
     queryFn: async () => {
-      if (billId.value === null) {
+      const currentBillId = billId.value;
+      if (currentBillId === null) {
         throw new Error("Missing bill id");
       }
 
-      const response = await client.api.commerce.bills[":billId"].$get(
-        {
-          param: {
-            billId: billId.value,
+      const requestId = createCommerceOrderDetailDebugId("bill");
+      const trigger =
+        lastRequestedBillId === null
+          ? "initial-bill-load"
+          : lastRequestedBillId === currentBillId
+            ? "bill-refetch"
+            : "bill-id-change";
+      const startedAtMs = Date.now();
+      const debugOrderId = readCommerceOrderDetailDebugValue(debug?.orderId);
+      const debugRouteOrderId = readCommerceOrderDetailDebugValue(debug?.routeOrderId);
+
+      logCommerceOrderDetailDebug("bill.query.start", {
+        requestId,
+        trigger,
+        billId: currentBillId,
+        orderId: debugOrderId,
+        routeOrderId: debugRouteOrderId,
+        source: debug?.source ?? "useBillDetail",
+      });
+      lastRequestedBillId = currentBillId;
+
+      try {
+        const response = await client.api.commerce.bills[":billId"].$get(
+          {
+            param: {
+              billId: currentBillId,
+            },
           },
-        },
-        {
-          init: {
-            credentials: "include",
+          {
+            init: {
+              credentials: "include",
+              headers: createCommerceOrderDetailDebugHeaders({
+                channel: "bill",
+                source: debug?.source ?? "useBillDetail",
+                requestId,
+                orderId: debugOrderId,
+                routeOrderId: debugRouteOrderId,
+                billId: currentBillId,
+                trigger,
+              }),
+            },
           },
-        },
-      );
-      return readJsonOrThrow<BillDetailResponse>(response, "Failed to load bill");
+        );
+        const detail = await readJsonOrThrow<BillDetailResponse>(response, "Failed to load bill");
+        logCommerceOrderDetailDebug("bill.query.success", {
+          requestId,
+          trigger,
+          billId: currentBillId,
+          orderId: debugOrderId,
+          routeOrderId: debugRouteOrderId,
+          durationMs: Date.now() - startedAtMs,
+          ...summarizeBillDetailDebug(detail),
+        });
+        return detail;
+      } catch (error) {
+        logCommerceOrderDetailDebug("bill.query.error", {
+          requestId,
+          trigger,
+          billId: currentBillId,
+          orderId: debugOrderId,
+          routeOrderId: debugRouteOrderId,
+          durationMs: Date.now() - startedAtMs,
+          error: describeCommerceOrderDetailDebugError(error),
+        });
+        throw error;
+      }
     },
     enabled: () => billId.value !== null,
     refetchOnMount: "always",
   });
 
+  watch(
+    () => ({
+      billId: billId.value,
+      orderId: readCommerceOrderDetailDebugValue(debug?.orderId),
+      routeOrderId: readCommerceOrderDetailDebugValue(debug?.routeOrderId),
+      source: debug?.source ?? "useBillDetail",
+      status: query.status.value,
+      fetchStatus: query.fetchStatus.value,
+      isPending: query.isPending.value,
+      isFetching: query.isFetching.value,
+      isRefetching: query.isRefetching.value,
+      error: query.error.value ? describeCommerceOrderDetailDebugError(query.error.value) : null,
+      ...summarizeBillDetailDebug(query.data.value),
+    }),
+    (snapshot) => {
+      logCommerceOrderDetailDebug("bill.query.state", snapshot);
+    },
+    { immediate: true },
+  );
+
+  return query;
+};
+
 export const useBillLineCheckoutTarget = (billLineId: Ref<string | null>) =>
   useQuery<BillLineCheckoutTargetResponse>({
     queryKey: computed(() => queryKeys.commerce.billLineCheckoutTarget(billLineId.value)),
@@ -315,26 +514,69 @@ export const useBillLineCheckoutTarget = (billLineId: Ref<string | null>) =>
 
 export const useCancelOrder = () => {
   const queryClient = useQueryClient();
+  const pendingCancelRequestIds = new Map<string, string>();
 
   return useMutation({
     mutationFn: async (orderId: string) => {
-      const response = await client.api.commerce.orders[":orderId"].cancel.$post(
-        {
-          param: {
-            orderId,
+      const requestId = createCommerceOrderDetailDebugId("cancel");
+      pendingCancelRequestIds.set(orderId, requestId);
+      const startedAtMs = Date.now();
+
+      logCommerceOrderDetailDebug("cancel.mutation.start", {
+        requestId,
+        orderId,
+      });
+
+      try {
+        const response = await client.api.commerce.orders[":orderId"].cancel.$post(
+          {
+            param: {
+              orderId,
+            },
           },
-        },
-        {
-          init: {
-            credentials: "include",
+          {
+            init: {
+              credentials: "include",
+              headers: createCommerceOrderDetailDebugHeaders({
+                channel: "cancel",
+                source: "useCancelOrder",
+                requestId,
+                orderId,
+                routeOrderId: orderId,
+                trigger: "mutation",
+              }),
+            },
           },
-        },
-      );
-      return readJsonOrThrow<
-        InferResponseType<CommerceApi["orders"][":orderId"]["cancel"]["$post"]>
-      >(response, "Failed to cancel order");
+        );
+        const result = await readJsonOrThrow<
+          InferResponseType<CommerceApi["orders"][":orderId"]["cancel"]["$post"]>
+        >(response, "Failed to cancel order");
+        logCommerceOrderDetailDebug("cancel.mutation.success", {
+          requestId,
+          orderId,
+          durationMs: Date.now() - startedAtMs,
+          resultStatus: "status" in result ? result.status : null,
+          effectKind: "effectKind" in result ? result.effectKind : null,
+          effectAmountFen: "effectAmountFen" in result ? result.effectAmountFen : null,
+        });
+        return result;
+      } catch (error) {
+        logCommerceOrderDetailDebug("cancel.mutation.error", {
+          requestId,
+          orderId,
+          durationMs: Date.now() - startedAtMs,
+          error: describeCommerceOrderDetailDebugError(error),
+        });
+        throw error;
+      }
     },
     onSuccess: (_, orderId) => {
+      const requestId = pendingCancelRequestIds.get(orderId) ?? null;
+      markNextCommerceOrderDetailTrigger(orderId, "cancel-mutation-success");
+      logCommerceOrderDetailDebug("cancel.query.invalidate", {
+        requestId,
+        orderId,
+      });
       queryClient.invalidateQueries({
         queryKey: queryKeys.commerce.orderDetail(orderId),
       });
@@ -342,6 +584,9 @@ export const useCancelOrder = () => {
         queryKey: ["commerce"],
       });
     },
+    onSettled: (_, __, orderId) => {
+      pendingCancelRequestIds.delete(orderId);
+    },
   });
 };
 
diff --git a/apps/frontend/src/domains/commerce/ui/order-detail/BillCard.vue b/apps/frontend/src/domains/commerce/ui/order-detail/BillCard.vue
index 6d98ec941..0a9883e97 100644
--- a/apps/frontend/src/domains/commerce/ui/order-detail/BillCard.vue
+++ b/apps/frontend/src/domains/commerce/ui/order-detail/BillCard.vue
@@ -44,15 +44,18 @@
 
 <script setup lang="ts">
 import { PuButton, PuCard, PuTag } from "@partner-up-dev/design-web";
-import { computed } from "vue";
+import { computed, watch } from "vue";
 import {
   formatCurrencyAmount,
   resolveBillSettlementTag,
 } from "@/domains/commerce/model/bill-display";
 import { useBillDetail } from "@/domains/commerce/queries/useCommerce";
+import { logCommerceOrderDetailDebug } from "@/domains/commerce/use-cases/order-detail-debug";
 
 const props = defineProps<{
   billId: string;
+  orderId?: string | null;
+  routeOrderId?: string | null;
 }>();
 
 const normalizedBillId = computed(() => {
@@ -60,7 +63,11 @@ const normalizedBillId = computed(() => {
   return value.length > 0 ? value : null;
 });
 
-const billQuery = useBillDetail(normalizedBillId);
+const billQuery = useBillDetail(normalizedBillId, {
+  source: "BillCard",
+  orderId: computed(() => props.orderId ?? null),
+  routeOrderId: computed(() => props.routeOrderId ?? null),
+});
 const detail = computed(() => billQuery.data.value ?? null);
 
 const settlementTag = computed(() =>
@@ -79,6 +86,27 @@ const amountLabel = computed(() => {
 const billLinkAction = computed(() =>
   normalizedBillId.value ? { to: { path: `/bills/${normalizedBillId.value}` } } : undefined,
 );
+
+watch(
+  () => ({
+    routeOrderId: props.routeOrderId ?? null,
+    detailOrderId: props.orderId ?? null,
+    billId: normalizedBillId.value,
+    queryStatus: billQuery.status.value,
+    fetchStatus: billQuery.fetchStatus.value,
+    isPending: billQuery.isPending.value,
+    isFetching: billQuery.isFetching.value,
+    responseBillId: detail.value?.bill.id ?? null,
+    responseOrderId: detail.value?.order.id ?? null,
+    responseBillStatus: detail.value?.bill.status ?? null,
+    settlementStatus: detail.value?.bill.settlementStatus ?? null,
+    amountLabel: amountLabel.value,
+  }),
+  (snapshot) => {
+    logCommerceOrderDetailDebug("bill-card.snapshot", snapshot);
+  },
+  { immediate: true },
+);
 </script>
 
 <style scoped lang="scss">
diff --git a/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue b/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue
index 283c989cf..861693d45 100644
--- a/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue
+++ b/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue
@@ -94,7 +94,7 @@
           <section v-if="billId" class="ride-hailing-order-content__fact-section"
             data-testid="order-detail.ride-hailing.bill-section">
             <h3>账单</h3>
-            <BillCard :bill-id="billId" />
+            <BillCard :bill-id="billId" :order-id="props.detail.order.id" :route-order-id="props.routeOrderId" />
           </section>
 
           <section v-if="resolvedServiceVehicles.length > 0" class="ride-hailing-order-content__fact-section"
@@ -138,17 +138,18 @@ import {
   PuButton,
   PuCard,
   PuFloatPanel,
-  PuInlineNotice,
   type PuFloatPanelStop,
   PuImg,
+  PuInlineNotice,
 } from "@partner-up-dev/design-web";
-import { computed, onMounted, onUnmounted, ref } from "vue";
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 import {
-  useCancelOrder,
   type CommerceOrderDetailResponse,
+  useCancelOrder,
 } from "@/domains/commerce/queries/useCommerce";
 import BillCard from "@/domains/commerce/ui/order-detail/BillCard.vue";
 import RideHailingSkuCard from "@/domains/commerce/ui/ordering/RideHailingSkuCard.vue";
+import { logCommerceOrderDetailDebug } from "@/domains/commerce/use-cases/order-detail-debug";
 import type { Route, RoutePoint } from "@/domains/route/model/route";
 import RouteMap from "@/domains/route/ui/RouteMap.vue";
 import RoutePointList from "@/domains/route/ui/RoutePointList.vue";
@@ -175,6 +176,7 @@ type ResolvedRideHailingVehicleCard = {
 const props = defineProps<{
   detail: CommerceOrderDetailResponse;
   ride: RideHailingDetail;
+  routeOrderId: string | null;
 }>();
 
 const cancelMutation = useCancelOrder();
@@ -374,6 +376,12 @@ const billId = computed(() => {
 });
 
 const cancelRideHailingOrder = async (): Promise<void> => {
+  logCommerceOrderDetailDebug("ride-content.cancel.click", {
+    routeOrderId: props.routeOrderId,
+    detailOrderId: props.detail.order.id,
+    providerOrderId: props.ride.provider.providerOrderId,
+    executionPhase: props.ride.executionPhase,
+  });
   await cancelMutation.mutateAsync(props.detail.order.id);
 };
 
@@ -414,6 +422,26 @@ const formatFen = (amountFen: number | null | undefined): string => {
     currency: "CNY",
   }).format(amountFen / 100);
 };
+
+watch(
+  () => ({
+    routeOrderId: props.routeOrderId,
+    detailOrderId: props.detail.order.id,
+    detailOrderStatus: props.detail.order.status,
+    providerOrderId: props.ride.provider.providerOrderId,
+    executionPhase: props.ride.executionPhase,
+    driverName: props.ride.driver?.driverName ?? null,
+    vehiclePlate: props.ride.vehicle?.plate ?? null,
+    billId: billId.value,
+    mapMode: orderMapViewModel.value.mode,
+    viewportFollowMode: routeMapViewportFollowMode.value,
+    panelStop: panelStop.value,
+  }),
+  (snapshot) => {
+    logCommerceOrderDetailDebug("ride-content.snapshot", snapshot);
+  },
+  { immediate: true },
+);
 </script>
 
 <style scoped lang="scss">
diff --git a/apps/frontend/src/domains/commerce/use-cases/order-detail-debug.ts b/apps/frontend/src/domains/commerce/use-cases/order-detail-debug.ts
new file mode 100644
index 000000000..26124bbad
--- /dev/null
+++ b/apps/frontend/src/domains/commerce/use-cases/order-detail-debug.ts
@@ -0,0 +1,161 @@
+import type { Ref } from "vue";
+
+const ORDER_DETAIL_DEBUG_ENABLE_STORAGE_KEY = "__partner_up_order_detail_debug__";
+const ORDER_DETAIL_DEBUG_SESSION_STORAGE_KEY = "__partner_up_order_detail_debug_session__";
+
+const pendingOrderDetailTriggers = new Map<string, string[]>();
+let fallbackSessionId: string | null = null;
+
+const readWindow = (): Window | null => {
+  if (typeof window === "undefined") return null;
+  return window;
+};
+
+const createRandomPart = (): string => {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID().replace(/-/g, "").slice(0, 12);
+  }
+  return Math.random().toString(36).slice(2, 14);
+};
+
+const resolveStorageFlag = (): boolean => {
+  const currentWindow = readWindow();
+  if (!currentWindow) return false;
+  try {
+    return currentWindow.localStorage.getItem(ORDER_DETAIL_DEBUG_ENABLE_STORAGE_KEY) === "1";
+  } catch {
+    return false;
+  }
+};
+
+const readStoredSessionId = (): string | null => {
+  const currentWindow = readWindow();
+  if (!currentWindow) return null;
+  try {
+    const stored = currentWindow.sessionStorage.getItem(ORDER_DETAIL_DEBUG_SESSION_STORAGE_KEY);
+    return stored?.trim() || null;
+  } catch {
+    return null;
+  }
+};
+
+const writeStoredSessionId = (sessionId: string): void => {
+  const currentWindow = readWindow();
+  if (!currentWindow) return;
+  try {
+    currentWindow.sessionStorage.setItem(ORDER_DETAIL_DEBUG_SESSION_STORAGE_KEY, sessionId);
+  } catch {
+    // Ignore storage failures and keep the in-memory session id.
+  }
+};
+
+export const isCommerceOrderDetailDebugEnabled = (): boolean =>
+  import.meta.env.DEV || resolveStorageFlag();
+
+export const createCommerceOrderDetailDebugId = (prefix: string): string =>
+  `${prefix}_${Date.now()}_${createRandomPart()}`;
+
+export const resolveCommerceOrderDetailDebugSessionId = (): string | null => {
+  if (!isCommerceOrderDetailDebugEnabled()) return null;
+  const stored = readStoredSessionId();
+  if (stored) return stored;
+  if (fallbackSessionId) return fallbackSessionId;
+
+  fallbackSessionId = createCommerceOrderDetailDebugId("session");
+  writeStoredSessionId(fallbackSessionId);
+  return fallbackSessionId;
+};
+
+const normalizeString = (value: string | null | undefined): string | null => {
+  const normalized = value?.trim() ?? "";
+  return normalized.length > 0 ? normalized : null;
+};
+
+export const readCommerceOrderDetailDebugValue = (
+  value: Ref<string | null> | string | null | undefined,
+): string | null =>
+  typeof value === "string" || value === null || typeof value === "undefined"
+    ? normalizeString(value)
+    : normalizeString(value.value);
+
+export const markNextCommerceOrderDetailTrigger = (
+  orderId: string | null | undefined,
+  trigger: string,
+): void => {
+  const normalizedOrderId = normalizeString(orderId);
+  if (!normalizedOrderId || !trigger) return;
+  const current = pendingOrderDetailTriggers.get(normalizedOrderId) ?? [];
+  current.push(trigger);
+  pendingOrderDetailTriggers.set(normalizedOrderId, current);
+};
+
+export const consumeNextCommerceOrderDetailTrigger = (
+  orderId: string | null | undefined,
+): string | null => {
+  const normalizedOrderId = normalizeString(orderId);
+  if (!normalizedOrderId) return null;
+
+  const current = pendingOrderDetailTriggers.get(normalizedOrderId) ?? [];
+  const next = current.shift() ?? null;
+  if (current.length > 0) {
+    pendingOrderDetailTriggers.set(normalizedOrderId, current);
+  } else {
+    pendingOrderDetailTriggers.delete(normalizedOrderId);
+  }
+  return next;
+};
+
+export const createCommerceOrderDetailDebugHeaders = (input: {
+  channel: string;
+  source: string;
+  requestId: string;
+  orderId?: string | null;
+  routeOrderId?: string | null;
+  billId?: string | null;
+  trigger?: string | null;
+}): HeadersInit | undefined => {
+  const sessionId = resolveCommerceOrderDetailDebugSessionId();
+  if (!sessionId) return undefined;
+
+  const headers = new Headers();
+  headers.set("x-commerce-order-debug", "1");
+  headers.set("x-commerce-order-debug-session", sessionId);
+  headers.set("x-commerce-order-debug-request", input.requestId);
+  headers.set("x-commerce-order-debug-channel", input.channel);
+  headers.set("x-commerce-order-debug-source", input.source);
+
+  const orderId = normalizeString(input.orderId);
+  if (orderId) headers.set("x-commerce-order-debug-order-id", orderId);
+
+  const routeOrderId = normalizeString(input.routeOrderId);
+  if (routeOrderId) headers.set("x-commerce-order-debug-route-order-id", routeOrderId);
+
+  const billId = normalizeString(input.billId);
+  if (billId) headers.set("x-commerce-order-debug-bill-id", billId);
+
+  const trigger = normalizeString(input.trigger);
+  if (trigger) headers.set("x-commerce-order-debug-trigger", trigger);
+
+  return headers;
+};
+
+export const describeCommerceOrderDetailDebugError = (error: unknown): string => {
+  if (error instanceof Error) return error.message;
+  if (typeof error === "string") return error;
+  return "unknown error";
+};
+
+export const logCommerceOrderDetailDebug = (
+  event: string,
+  payload: Record<string, unknown> = {},
+): void => {
+  const sessionId = resolveCommerceOrderDetailDebugSessionId();
+  if (!sessionId) return;
+
+  console.info("[CommerceOrderDetailDebug]", {
+    at: new Date().toISOString(),
+    event,
+    sessionId,
+    ...payload,
+  });
+};
diff --git a/apps/frontend/src/pages/CommerceOrderDetailPage.vue b/apps/frontend/src/pages/CommerceOrderDetailPage.vue
index a2e5d6613..d1c16d1e2 100644
--- a/apps/frontend/src/pages/CommerceOrderDetailPage.vue
+++ b/apps/frontend/src/pages/CommerceOrderDetailPage.vue
@@ -69,6 +69,7 @@
           v-if="rideHailingDetail"
           :detail="detail"
           :ride="rideHailingDetail"
+          :route-order-id="orderId"
         />
 
         <div v-else class="order-detail-page__document-body">
@@ -230,7 +231,7 @@ import {
   PuPageScaffold,
 } from "@partner-up-dev/design-web";
 import { storeToRefs } from "pinia";
-import { computed } from "vue";
+import { computed, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import {
   type CommerceOrderDetailResponse,
@@ -239,6 +240,7 @@ import {
   useMockRentalBookingConfirmation,
 } from "@/domains/commerce/queries/useCommerce";
 import RideHailingOrderContent from "@/domains/commerce/ui/order-detail/RideHailingOrderContent.vue";
+import { logCommerceOrderDetailDebug } from "@/domains/commerce/use-cases/order-detail-debug";
 import { useOrderingHandoffStore } from "@/domains/commerce/use-cases/useOrderingHandoffStore";
 
 type OrderItemSnapshot = CommerceOrderDetailResponse["order"]["items"][number];
@@ -266,6 +268,30 @@ const confirmationMutation = useMockRentalBookingConfirmation();
 const detail = computed(() => orderQuery.data.value ?? null);
 const rideHailingDetail = computed(() => detail.value?.rideHailing ?? null);
 
+watch(
+  () => ({
+    routeOrderId: orderId.value,
+    queryStatus: orderQuery.status.value,
+    fetchStatus: orderQuery.fetchStatus.value,
+    isPending: orderQuery.isPending.value,
+    isFetching: orderQuery.isFetching.value,
+    dataOrderId: detail.value?.order.id ?? null,
+    dataOrderStatus: detail.value?.order.status ?? null,
+    dataOrderFamily: detail.value?.order.family ?? null,
+    rideProviderOrderId: rideHailingDetail.value?.provider.providerOrderId ?? null,
+    rideExecutionPhase: rideHailingDetail.value?.executionPhase ?? null,
+    rideDriverName: rideHailingDetail.value?.driver?.driverName ?? null,
+    rideVehiclePlate: rideHailingDetail.value?.vehicle?.plate ?? null,
+    billId: detail.value?.bill?.id ?? null,
+    billStatus: detail.value?.bill?.status ?? null,
+    error: orderQuery.error.value instanceof Error ? orderQuery.error.value.message : null,
+  }),
+  (snapshot) => {
+    logCommerceOrderDetailDebug("page.snapshot", snapshot);
+  },
+  { immediate: true },
+);
+
 const readOrderItemSku = (item: OrderItemSnapshot): OrderSkuSnapshot | null => {
   if ("sku" in item) return item.sku;
   return item.resolution?.sku ?? item.candidates[0]?.sku ?? null;
diff --git a/tasks/ride-hailing-order-detail-stale-data-diagnosis/00-task-packet.md b/tasks/ride-hailing-order-detail-stale-data-diagnosis/00-task-packet.md
new file mode 100644
index 000000000..57372c9e2
--- /dev/null
+++ b/tasks/ride-hailing-order-detail-stale-data-diagnosis/00-task-packet.md
@@ -0,0 +1,166 @@
+# Ride Hailing Order Detail Stale Data Diagnosis
+
+## Objective & Hypothesis
+
+- Reality: diagnose why a newly created RideHailing order can momentarily show
+  the previous finished RideHailing order detail, then later switch to the new
+  order detail.
+- Hypothesis:
+  - the symptom is not explained by TanStack Vue Query default
+    `keepPreviousData`-style caching alone
+  - the frontend currently lacks an order-identity guard on the Order Detail
+    route, so any transient mismatched `detail` payload can be rendered
+  - RideHailing order-detail reads are slower than ordinary detail reads because
+    backend `GET /api/commerce/orders/:orderId` synchronously queries the
+    provider on each detail read when a provider order id exists
+  - there is a second, separate backend/domain defect: finished RideHailing
+    orders still keep base `order.status = OPEN`, so frontend "existing active
+    order" lookup can misclassify terminal RideHailing orders as reusable
+    active orders
+
+## Guardrails Touched
+
+- Frontend order detail route:
+  - `apps/frontend/src/pages/CommerceOrderDetailPage.vue`
+  - `apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue`
+  - `apps/frontend/src/domains/commerce/queries/useCommerce.ts`
+- Frontend order entry / existing-order reuse:
+  - `apps/frontend/src/domains/commerce/use-cases/usePlacementOrderingEntryFlow.ts`
+- Backend order detail and provider sync:
+  - `apps/backend/src/domains/trade/use-cases/rental-ordering-flow.ts`
+  - `apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts`
+  - `apps/backend/src/domains/ride-hailing/use-cases/sync-ride-hailing-order-with-provider.ts`
+  - `apps/backend/src/controllers/partner-request.controller.ts`
+- Existing scenario truth:
+  - `tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+  - `apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts`
+
+## Verification
+
+- Completed code-trace checks:
+  - `queryKeys.commerce.orderDetail(orderId)` is keyed by explicit `orderId`;
+    no direct evidence of a reused cache key
+  - `VueQueryPlugin` is installed without custom `defaultOptions`
+  - repo search found no project-level `placeholderData`,
+    `keepPreviousData`, `setQueryDefaults`, or `RouterView` keep-alive/key
+    customization affecting this route
+  - runtime probe against `@tanstack/query-core` showed key switch default does
+    not keep previous data
+  - runtime probe against actual `@tanstack/vue-query` showed there is only an
+    immediate same-tick stale window before the watcher applies the new
+    `pending` state; this alone does not explain a multi-second stale render
+- Confirmed backend timing amplifier:
+  - RideHailing order detail projection calls
+    `syncRideHailingOrderWithProvider(... trigger: "ORDER_DETAIL_POLL")` before
+    returning detail when `providerOrderId` exists
+- Confirmed separate status-model issue:
+  - `apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts`
+    asserts `updatedOrder.status === "OPEN"` while
+    `updatedRide.executionPhase === "FINISHED"`
+
+## Current Understanding
+
+- Frontend cache-key collision is unlikely to be the primary cause.
+- A safer frontend invariant is currently missing:
+  - Order Detail should never render `detail.order.id !== route.params.orderId`
+  - without that guard, any transient mismatched payload can leak to the UI
+- Backend RideHailing detail reads are materially slower than Rental detail
+  reads because provider sync is in-band with the read path.
+- Finished RideHailing orders remaining `OPEN` is a likely adjacent bug and may
+  affect `usePlacementOrderingEntryFlow()` existing-order reuse from PR entry.
+
+## Proposed Next Step
+
+- Current active slice:
+  - instrumentation is now in place across frontend and backend
+  - next reproduction should answer, with a shared `sessionId/requestId`,
+    whether stale detail was retained on the frontend or returned by backend
+
+## Current Collaboration State
+
+- Human confirmed the stale view happens without leaving the Order Detail page.
+  That removes the `GET /pr/:id/orders` existing-order reuse path from the main
+  suspect set for this incident.
+- Human confirmed the stale view contains the previous order's driver, status,
+  map, and bill simultaneously. That means the stale UI behaves like a full old
+  `detail` snapshot rather than an isolated provider-live subsection mismatch.
+- Current working hypothesis:
+  - the page keeps rendering an old full `CommerceOrderDetailResponse` until a
+    slower fresh detail read returns
+  - the same stale-detail persistence likely explains the post-cancel
+    `接客中 -> 已取消` lag
+- Current non-goal:
+  - do not fix business logic yet
+  - first use the new instrumentation to answer whether the stale screen came
+    from:
+    - frontend retaining old `detail`
+    - backend returning an old `detail.order.id`
+    - backend returning a correct `order.id` but stale nested RideHailing/bill
+      content
+
+## Active Instrumentation Scope
+
+- Frontend:
+  - route `orderId` extraction
+  - `useCommerceOrderDetail()` request lifecycle, refetch cause, query result
+    snapshots, and polling transitions
+  - Order Detail page render snapshots keyed by route `orderId`,
+    `detail.order.id`, `ride.providerOrderId`, `executionPhase`, and `bill.id`
+  - RideHailing cancel mutation lifecycle
+  - Bill Card child query keyed by `detail.bill.id`
+- Backend:
+  - `GET /api/commerce/orders/:orderId` request entry and response summary
+  - `getCommerceOrderDetail()` basis: base order id/family/status, ride order
+    id/phase, bill id/status, and viewer
+  - RideHailing provider execution context load:
+    local `providerBinding.providerOrderId` and `providerInstanceId`
+  - provider sync request/response summary and local mutation summary
+  - RideHailing cancel flow before-sync, after-sync, provider cancel result,
+    persistence result, and returned payload summary
+
+## Instrumentation Control Surface
+
+- Frontend debug enablement:
+  - enabled automatically in `import.meta.env.DEV`
+  - can also be forced by setting
+    `localStorage["__partner_up_order_detail_debug__"] = "1"`
+- Correlation model:
+  - browser logs emit `[CommerceOrderDetailDebug]`
+  - request headers propagate `sessionId`, `requestId`, `channel`, `source`,
+    `trigger`, `routeOrderId`, `orderId`, and `billId`
+  - backend logs emit the same `[CommerceOrderDetailDebug]` marker so one
+    reproduction can be stitched across browser console and backend stdout
+- High-signal event families:
+  - frontend detail chain:
+    `detail.query.start|success|error|state`,
+    `detail.poll.evaluate|tick`,
+    `page.snapshot`,
+    `ride-content.snapshot`
+  - frontend bill/cancel chain:
+    `bill.query.start|success|error|state`,
+    `bill-card.snapshot`,
+    `cancel.mutation.start|success|error`,
+    `cancel.query.invalidate`
+  - backend detail/sync/cancel chain:
+    `controller.order-detail.*`,
+    `usecase.order-detail.*`,
+    `ride-detail.build.*`,
+    `ride-provider-context.*`,
+    `ride-provider-sync.*`,
+    `controller.cancel-order.*`,
+    `cancel.dispatch.*`,
+    `ride-cancel.*`
+
+## Verification
+
+- Completed after instrumentation:
+  - `pnpm check:type:backend`
+  - `pnpm check:type:frontend`
+  - `pnpm check:format`
+  - `pnpm check:lint`
+- Expected proof from the next reproduction:
+  - which route `orderId` the page believed it was on
+  - which `detail.order.id` the page rendered before and after recovery
+  - which `providerOrderId` backend used during detail reads and cancel flow
+  - whether post-cancel UI lag came from stale frontend detail or delayed
+    backend detail propagation

From 65144ccdf409dcf0dea602a5982d8cc9b55f451f Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Tue, 30 Jun 2026 16:04:25 +0800
Subject: [PATCH 77/94] chore(commerce): fix CORS issue of header
 x-commerce-order-debug-*

---
 .../sync-ride-hailing-order-with-provider.ts  | 28 ++++++++++++++++---
 apps/backend/src/index.ts                     |  9 ++++++
 2 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/apps/backend/src/domains/ride-hailing/use-cases/sync-ride-hailing-order-with-provider.ts b/apps/backend/src/domains/ride-hailing/use-cases/sync-ride-hailing-order-with-provider.ts
index 864806869..d2aaf8624 100644
--- a/apps/backend/src/domains/ride-hailing/use-cases/sync-ride-hailing-order-with-provider.ts
+++ b/apps/backend/src/domains/ride-hailing/use-cases/sync-ride-hailing-order-with-provider.ts
@@ -140,6 +140,14 @@ export async function syncRideHailingOrderWithProvider(input: {
     const tradeOrderRepo = new TradeOrderRepository(tx);
     const rideOrderRepo = new RideHailingOrderRepository(tx);
     const patch: Partial<NewRideHailingOrder> = {};
+    let finalSettlementConflict:
+      | {
+          currentAmountFen: number;
+          currentProviderOrderId: string;
+          observedAmountFen: number;
+          observedProviderOrderId: string;
+        }
+      | null = null;
 
     logCommerceOrderDetailDebug(input.debug, "ride-provider-sync.tx.context", {
       localOrderId: transactionalContext.order.id,
@@ -190,10 +198,21 @@ export async function syncRideHailingOrderWithProvider(input: {
           observation.finalSettlementInput.providerOrderId ||
         currentFinalSettlementInput.amountFen !== observation.finalSettlementInput.amountFen
       ) {
-        return throwHttpProblem({
-          status: 409,
-          detail: "RideHailing final settlement input conflicts with committed value",
-        });
+        finalSettlementConflict = {
+          currentAmountFen: currentFinalSettlementInput.amountFen,
+          currentProviderOrderId: currentFinalSettlementInput.providerOrderId,
+          observedAmountFen: observation.finalSettlementInput.amountFen,
+          observedProviderOrderId: observation.finalSettlementInput.providerOrderId,
+        };
+        logCommerceOrderDetailDebug(
+          input.debug,
+          "ride-provider-sync.tx.final-settlement-conflict",
+          {
+            localOrderId: transactionalContext.order.id,
+            trigger: input.trigger,
+            ...finalSettlementConflict,
+          },
+        );
       }
     }
 
@@ -206,6 +225,7 @@ export async function syncRideHailingOrderWithProvider(input: {
       driverChanged: "driverSnapshot" in patch,
       vehicleChanged: "vehicleSnapshot" in patch,
       finalSettlementCommitted: patch.finalSettlementInput !== undefined,
+      finalSettlementConflictDetected: finalSettlementConflict !== null,
       shouldEnsureFinalBill,
     });
 
diff --git a/apps/backend/src/index.ts b/apps/backend/src/index.ts
index 97dfcb8d1..fbc40b7f2 100644
--- a/apps/backend/src/index.ts
+++ b/apps/backend/src/index.ts
@@ -106,6 +106,15 @@ app.use(
       "Authorization",
       JOURNEY_ID_HEADER,
       "x-client-id",
+      "x-commerce-order-debug",
+      "x-commerce-order-debug-session",
+      "x-commerce-order-debug-request",
+      "x-commerce-order-debug-channel",
+      "x-commerce-order-debug-source",
+      "x-commerce-order-debug-trigger",
+      "x-commerce-order-debug-route-order-id",
+      "x-commerce-order-debug-order-id",
+      "x-commerce-order-debug-bill-id",
     ],
     exposeHeaders: ["x-access-token"],
   }),

From 7f7a9441848e41880a53fef1e1a14244be1278fa Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Tue, 30 Jun 2026 17:11:39 +0800
Subject: [PATCH 78/94] fix(ride-hailing): align Caocao status mapping

- map CaoCao order status 1/11 to dispatching and 2/9 to accepted
- align adapter status labels with official CaoCao order states
- add unit coverage for CaoCao status labels and local phase mapping
---
 .../services/caocao-provider.test.ts          |  59 ++++++++--
 .../ride-hailing/services/caocao-provider.ts  |  41 +++++--
 .../provider-order-observation.test.ts        |  48 +++++---
 .../services/provider-order-observation.ts    |  38 +++---
 .../00-task-packet.md                         | 108 ++++++++++++++++++
 5 files changed, 248 insertions(+), 46 deletions(-)
 create mode 100644 tasks/ride-hailing-immediate-finished-diagnosis/00-task-packet.md

diff --git a/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts b/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
index 438a5d6cb..5a2ec3298 100644
--- a/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
+++ b/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
@@ -37,6 +37,28 @@ const caocaoProviderInstance = (): RideHailingProviderInstance => ({
   updatedAt: now,
 });
 
+const queryCaocaoDetailForStatus = async (status: string | number) => {
+  const fetchImpl: typeof fetch = async () =>
+    new Response(
+      JSON.stringify({
+        code: 200,
+        data: {
+          basicOrderVO: {
+            status,
+          },
+        },
+        success: true,
+      }),
+      { status: 200 },
+    );
+  const adapter = new CaocaoProviderAdapter({
+    providerInstance: caocaoProviderInstance(),
+    fetchImpl,
+  });
+
+  return adapter.queryOrderDetail({ providerOrderId: "CC123456" });
+};
+
 describe("Caocao provider config", () => {
   it("validates registration config from stored provider config", () => {
     const parsed = parseRideHailingProviderRegistrationConfig({
@@ -253,7 +275,6 @@ describe("Caocao signer", () => {
       }),
     ).rejects.toThrow("Caocao API failed: 10002 参数签名错误");
   });
-
 });
 
 describe("Caocao external order id", () => {
@@ -365,6 +386,32 @@ describe("Caocao callback verification", () => {
 });
 
 describe("Caocao live order projection", () => {
+  it.each([
+    { label: "未派单", status: 1 },
+    { label: "已派单", status: "2" },
+    { label: "行程中", status: "3" },
+    { label: "系统取消", status: "4" },
+    { label: "待支付", status: "5" },
+    { label: "已评价", status: "6" },
+    { label: "已支付待评价", status: "7" },
+    { label: "计费结束", status: "8" },
+    { label: "接客中", status: "9" },
+    { label: "取消待付款", status: "10" },
+    { label: "改派中", status: "11" },
+    { label: "司机已到达", status: "12" },
+    { label: "取消已支付", status: "13" },
+    { label: "免责取消", status: "14" },
+    { label: "用户取消", status: "20" },
+    { label: "客服取消", status: "21" },
+    { label: "司机取消", status: "26" },
+    { label: "第三方取消", status: "27" },
+  ])("labels official order status $status as $label", async ({ status, label }) => {
+    const detail = await queryCaocaoDetailForStatus(status);
+
+    expect(detail.phase).toBe(String(status));
+    expect(detail.statusLabel).toBe(label);
+  });
+
   it("normalizes order detail, driver location, and navigation route responses", async () => {
     const requestPaths: string[] = [];
     const routeRequestBodies: string[] = [];
@@ -419,7 +466,7 @@ describe("Caocao live order projection", () => {
       }
 
       if (url.pathname.endsWith("/common/queryDriverPolylineV2")) {
-      routeRequestBodies.push(init?.body?.toString() ?? "");
+        routeRequestBodies.push(init?.body?.toString() ?? "");
         return new Response(
           JSON.stringify({
             code: 200,
@@ -519,9 +566,7 @@ describe("Caocao live order projection", () => {
   });
 
   it("logs provider diagnostics for failed route queries", async () => {
-    const stdoutWrite = vi
-      .spyOn(process.stdout, "write")
-      .mockImplementation(() => true);
+    const stdoutWrite = vi.spyOn(process.stdout, "write").mockImplementation(() => true);
     try {
       const fetchImpl: typeof fetch = async () =>
         new Response(
@@ -544,9 +589,7 @@ describe("Caocao live order projection", () => {
         }),
       ).rejects.toThrow("Caocao API failed: 25011 订单状态不正确");
 
-      const logOutput = stdoutWrite.mock.calls
-        .map(([chunk]) => String(chunk))
-        .join("");
+      const logOutput = stdoutWrite.mock.calls.map(([chunk]) => String(chunk)).join("");
       expect(logOutput).toContain('"marker":"RideHailingProviderCaocao"');
       expect(logOutput).toContain('"event":"caocao_provider_failure"');
       expect(logOutput).toContain('"endpointPath":"/common/queryDriverPolylineV2"');
diff --git a/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts b/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
index 9b6757e7a..3202e8155 100644
--- a/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
+++ b/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
@@ -181,18 +181,36 @@ const formatCaocaoDateTime = (value: CaocaoParamValue): string | null => {
   return `${parts.year}-${parts.month}-${parts.day} ${parts.hour}:${parts.minute}:${parts.second}`;
 };
 
-const buildCaocaoStatusLabel = (phase: string): string => {
-  if (phase === "FINISHED" || ["5", "6", "7", "8"].includes(phase)) return "待支付";
-  if (phase === "IN_TRIP" || phase === "3") return "行程中";
-  if (phase === "ARRIVED_AT_PICKUP" || phase === "12") return "司机已到达";
-  if (phase === "ACCEPTED" || phase === "9") return "接客中";
-  if (phase === "2") return "已派单";
-  if (phase === "CANCELLED" || ["4", "10", "13", "14", "20", "21", "26", "27"].includes(phase)) {
-    return "已取消";
-  }
-  return "正在呼叫";
+const CAOCAO_ORDER_STATUS_LABELS: Readonly<Record<string, string>> = {
+  "1": "未派单",
+  "2": "已派单",
+  "3": "行程中",
+  "4": "系统取消",
+  "5": "待支付",
+  "6": "已评价",
+  "7": "已支付待评价",
+  "8": "计费结束",
+  "9": "接客中",
+  "10": "取消待付款",
+  "11": "改派中",
+  "12": "司机已到达",
+  "13": "取消已支付",
+  "14": "免责取消",
+  "20": "用户取消",
+  "21": "客服取消",
+  "26": "司机取消",
+  "27": "第三方取消",
+  ACCEPTED: "接客中",
+  ARRIVED_AT_PICKUP: "司机已到达",
+  CANCELLED: "已取消",
+  DISPATCHING: "正在呼叫",
+  FINISHED: "行程已结束",
+  IN_TRIP: "行程中",
 };
 
+const buildCaocaoStatusLabel = (phase: string): string =>
+  CAOCAO_ORDER_STATUS_LABELS[phase.trim().toUpperCase()] ?? "正在呼叫";
+
 const parseCaocaoVehicleLocation = (raw: unknown): RideHailingProviderVehicleLocation | null => {
   if (!isRecord(raw)) return null;
   const locationRaw = readOptionalRecordField(raw, [
@@ -921,8 +939,7 @@ export class CaocaoProviderAdapter implements RideHailingProviderPort {
       ext_order_id: readRequiredParamString(params, ["ext_order_id"]),
       from_latitude: fromLatitude,
       from_longitude: fromLongitude,
-      is_simultaneously_call:
-        readOptionalParamString(params, ["is_simultaneously_call"]) ?? "0",
+      is_simultaneously_call: readOptionalParamString(params, ["is_simultaneously_call"]) ?? "0",
       order_type: readOptionalParamNumber(params, ["order_type"]) ?? 1,
       start_address: readRequiredParamString(params, ["start_address"]),
       start_name: readRequiredParamString(params, ["start_name"]),
diff --git a/apps/backend/src/domains/ride-hailing/services/provider-order-observation.test.ts b/apps/backend/src/domains/ride-hailing/services/provider-order-observation.test.ts
index ac4678f12..3f400d8ff 100644
--- a/apps/backend/src/domains/ride-hailing/services/provider-order-observation.test.ts
+++ b/apps/backend/src/domains/ride-hailing/services/provider-order-observation.test.ts
@@ -6,19 +6,41 @@ import {
 } from "./provider-order-observation";
 
 describe("RideHailing provider order observation", () => {
-  it("maps provider detail phase into local execution phase", () => {
-    expect(mapProviderDetailPhaseToExecutionPhase({ phase: "9", finalAmountFen: null })).toBe(
-      "ACCEPTED",
-    );
-    expect(mapProviderDetailPhaseToExecutionPhase({ phase: "12", finalAmountFen: null })).toBe(
-      "ARRIVED_AT_PICKUP",
-    );
-    expect(mapProviderDetailPhaseToExecutionPhase({ phase: "3", finalAmountFen: null })).toBe(
-      "IN_TRIP",
-    );
-    expect(
-      mapProviderDetailPhaseToExecutionPhase({ phase: "FINISHED", finalAmountFen: null }),
-    ).toBe("FINISHED");
+  it.each([
+    { phase: "1", finalAmountFen: null, expected: "DISPATCHING" },
+    { phase: "11", finalAmountFen: null, expected: "DISPATCHING" },
+    { phase: "DISPATCHING", finalAmountFen: null, expected: "DISPATCHING" },
+    { phase: "2", finalAmountFen: null, expected: "ACCEPTED" },
+    { phase: "9", finalAmountFen: null, expected: "ACCEPTED" },
+    { phase: "ACCEPTED", finalAmountFen: null, expected: "ACCEPTED" },
+    { phase: "12", finalAmountFen: null, expected: "ARRIVED_AT_PICKUP" },
+    { phase: "ARRIVED_AT_PICKUP", finalAmountFen: null, expected: "ARRIVED_AT_PICKUP" },
+    { phase: "3", finalAmountFen: null, expected: "IN_TRIP" },
+    { phase: "IN_TRIP", finalAmountFen: null, expected: "IN_TRIP" },
+    { phase: "8", finalAmountFen: null, expected: "FINISHED" },
+    { phase: "5", finalAmountFen: null, expected: "FINISHED" },
+    { phase: "7", finalAmountFen: null, expected: "FINISHED" },
+    { phase: "6", finalAmountFen: null, expected: "FINISHED" },
+    { phase: "FINISHED", finalAmountFen: null, expected: "FINISHED" },
+    { phase: "4", finalAmountFen: null, expected: "CANCELLED" },
+    { phase: "10", finalAmountFen: null, expected: "CANCELLED" },
+    { phase: "13", finalAmountFen: null, expected: "CANCELLED" },
+    { phase: "14", finalAmountFen: null, expected: "CANCELLED" },
+    { phase: "20", finalAmountFen: null, expected: "CANCELLED" },
+    { phase: "21", finalAmountFen: null, expected: "CANCELLED" },
+    { phase: "26", finalAmountFen: null, expected: "CANCELLED" },
+    { phase: "27", finalAmountFen: null, expected: "CANCELLED" },
+    { phase: "CANCELLED", finalAmountFen: null, expected: "CANCELLED" },
+    { phase: "FAILED", finalAmountFen: null, expected: "FAILED" },
+  ])("maps provider detail phase $phase into local execution phase $expected", ({
+    phase,
+    finalAmountFen,
+    expected,
+  }) => {
+    expect(mapProviderDetailPhaseToExecutionPhase({ phase, finalAmountFen })).toBe(expected);
+  });
+
+  it("still treats unmapped provider phases with a final amount as finished", () => {
     expect(mapProviderDetailPhaseToExecutionPhase({ phase: "UNKNOWN", finalAmountFen: 4800 })).toBe(
       "FINISHED",
     );
diff --git a/apps/backend/src/domains/ride-hailing/services/provider-order-observation.ts b/apps/backend/src/domains/ride-hailing/services/provider-order-observation.ts
index 9ab0c10e9..5f0ef77ea 100644
--- a/apps/backend/src/domains/ride-hailing/services/provider-order-observation.ts
+++ b/apps/backend/src/domains/ride-hailing/services/provider-order-observation.ts
@@ -15,23 +15,35 @@ export type RideHailingProviderOrderObservation = {
 
 const normalizePhase = (phase: string): string => phase.trim().toUpperCase();
 
+const providerFinishedPhases = new Set(["FINISHED", "5", "6", "7", "8"]);
+const providerInTripPhases = new Set(["IN_TRIP", "3"]);
+const providerArrivedAtPickupPhases = new Set(["ARRIVED_AT_PICKUP", "12"]);
+const providerAcceptedPhases = new Set(["ACCEPTED", "2", "9"]);
+const providerDispatchingPhases = new Set(["DISPATCHING", "1", "11"]);
+const providerCancelledPhases = new Set([
+  "CANCELLED",
+  "4",
+  "10",
+  "13",
+  "14",
+  "20",
+  "21",
+  "26",
+  "27",
+]);
+const providerFailedPhases = new Set(["FAILED", "FAIL", "FAILURE"]);
+
 export function mapProviderDetailPhaseToExecutionPhase(
   detail: Pick<RideHailingProviderOrderDetail, "phase" | "finalAmountFen">,
 ): RideHailingExecutionPhase | null {
   const phase = normalizePhase(detail.phase);
-  if (phase === "FINISHED" || ["5", "6", "7", "8"].includes(phase)) {
-    return "FINISHED";
-  }
-  if (phase === "IN_TRIP" || phase === "3") return "IN_TRIP";
-  if (phase === "ARRIVED_AT_PICKUP" || phase === "12") return "ARRIVED_AT_PICKUP";
-  if (phase === "ACCEPTED" || phase === "9") return "ACCEPTED";
-  if (phase === "DISPATCHING" || phase === "2") return "DISPATCHING";
-  if (phase === "CANCELLED" || ["4", "10", "13", "14", "20", "21", "26", "27"].includes(phase)) {
-    return "CANCELLED";
-  }
-  if (phase === "FAILED" || phase === "FAIL" || phase === "FAILURE") {
-    return "FAILED";
-  }
+  if (providerFinishedPhases.has(phase)) return "FINISHED";
+  if (providerInTripPhases.has(phase)) return "IN_TRIP";
+  if (providerArrivedAtPickupPhases.has(phase)) return "ARRIVED_AT_PICKUP";
+  if (providerAcceptedPhases.has(phase)) return "ACCEPTED";
+  if (providerDispatchingPhases.has(phase)) return "DISPATCHING";
+  if (providerCancelledPhases.has(phase)) return "CANCELLED";
+  if (providerFailedPhases.has(phase)) return "FAILED";
   if (detail.finalAmountFen !== null) return "FINISHED";
   return null;
 }
diff --git a/tasks/ride-hailing-immediate-finished-diagnosis/00-task-packet.md b/tasks/ride-hailing-immediate-finished-diagnosis/00-task-packet.md
new file mode 100644
index 000000000..71fe5e268
--- /dev/null
+++ b/tasks/ride-hailing-immediate-finished-diagnosis/00-task-packet.md
@@ -0,0 +1,108 @@
+# RideHailing Immediate Finished Diagnosis
+
+## Objective & Hypothesis
+
+- Objective: diagnose why a CaoCao ride-hailing order becomes locally `FINISHED`
+  immediately after creation while the provider-side order later times out during
+  dispatch.
+- Current hypothesis: the provider detail parser treats CaoCao `orderFeeVo.totalFee`
+  as a final settlement amount before the order is terminal. Because provider
+  status `1` is not mapped to a local active phase, the observation fallback
+  converts the non-null amount into `FINISHED`.
+- Current execution slice: only fix CaoCao status mapping completeness and
+  adapter label projection. The separate `finalSettlementInput` generation issue
+  is intentionally left to another thread.
+
+## Guardrails Touched
+
+- Input type: `Reality`.
+- Active mode: `Diagnose`.
+- Durable owner candidates:
+  - provider detail parsing: `apps/backend/src/domains/ride-hailing/services/caocao-provider.ts`
+  - provider observation/state mapping:
+    `apps/backend/src/domains/ride-hailing/services/provider-order-observation.ts`
+  - sync mutation path:
+    `apps/backend/src/domains/ride-hailing/use-cases/sync-ride-hailing-order-with-provider.ts`
+  - order detail trigger:
+    `apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts`
+- No product/business code changed during this diagnosis.
+
+## Evidence
+
+- Attached production-like snapshot:
+  - base `order.status` is `OPEN`
+  - ride `executionPhase` is `FINISHED`
+  - `finalSettlementInput.committedAt` is `2026-06-30T08:23:48.893Z`, about
+    843 ms after `order.createdAt`
+  - CaoCao `basicOrderVO.status` in the stored provider snapshot is `1`
+  - CaoCao `orderTime`, `updateTime`, and `departureTime` are all
+    `2026-06-30 16:23:48`, matching initial creation rather than trip finish
+  - driver and vehicle snapshots are null
+  - final bill was created at `2026-06-30T08:23:48.878Z`
+- Create-order path only persists ride phase `INITIATING -> DISPATCHING` and
+  base order `OPEN`; it does not write `FINISHED`.
+- Order detail path calls provider sync via `ORDER_DETAIL_POLL` whenever the
+  order has a provider binding.
+- `parseCaocaoOrderDetail` reads `phase` from top-level or `basicOrderVO.status`
+  and reads `finalAmountFen` from `orderFeeVO/orderFeeVo.totalFee`.
+- `mapProviderDetailPhaseToExecutionPhase` does not map phase/status `1`.
+  When phase is unmapped and `finalAmountFen !== null`, it returns `FINISHED`.
+- Existing unit test explicitly covers the fallback:
+  `phase: "UNKNOWN", finalAmountFen: 4800 -> FINISHED`.
+- CaoCao official order-status documentation maps:
+  - `1` 未派单
+  - `2` 已派单
+  - `3` 乘客上车，计费开始
+  - `8` 行程结束，计费结束
+  - `5` 待支付
+  - `7` 已支付，待评价
+  - `6` 已评价
+  - `11` 预约单改派中
+  - `12` 司机已到达
+  - `4/10/13/14/20/21/26/27` cancellation-related terminal states
+
+## Current Understanding
+
+Sequence:
+
+1. `POST /api/commerce/orders` creates local base order and ride-hailing facts.
+2. CaoCao create returns provider order id; local ride phase becomes
+   `DISPATCHING`, base order becomes `OPEN`.
+3. Frontend navigates to `/orders/:orderId`.
+4. `GET /api/commerce/orders/:orderId` builds ride detail and calls
+   `syncRideHailingOrderWithProvider`.
+5. Sync queries CaoCao detail. CaoCao detail contains `basicOrderVO.status = 1`
+   and `orderFeeVo.totalFee = 1362`.
+6. Parser returns `phase = "1"` and `finalAmountFen = 1362`.
+7. Observation has no status mapping for `1`; the non-null amount fallback marks
+   the local execution phase as `FINISHED` and commits final settlement.
+8. Final settlement consequence creates the bill.
+
+## Confirmed Constraints
+
+- The provider-side status in the snapshot is not a terminal local signal by the
+  current code's own label behavior: unmapped status falls back to `正在呼叫`.
+- The visible frontend state follows backend `rideHailing.executionPhase`; the
+  frontend maps `FINISHED` to `行程已结束`.
+- Root instruction requires explicit user start before modifying code.
+
+## Verification
+
+- Completed: static source trace from create order to order detail sync.
+- Completed: attached data inspected and matched against parser/observer logic.
+- Completed code changes:
+  - map CaoCao `1` and `11` to local `DISPATCHING`
+  - map CaoCao `2` and `9` to local `ACCEPTED`
+  - keep `3`, `12`, `5/6/7/8`, and cancellation statuses explicit
+  - replace broad CaoCao status labels with official-status labels
+  - keep status-mapping tests scoped to official phase mapping; non-terminal
+    `finalAmountFen` generation remains owned by the separate settlement thread
+- Completed verification:
+  - `pnpm test:unit:backend -- apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts apps/backend/src/domains/ride-hailing/services/provider-order-observation.test.ts`
+    - backend-unit project result: 66 files, 298 tests passed
+  - `pnpm exec biome check apps/backend/src/domains/ride-hailing/services/caocao-provider.ts apps/backend/src/domains/ride-hailing/services/provider-order-observation.ts apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts apps/backend/src/domains/ride-hailing/services/provider-order-observation.test.ts`
+  - `pnpm check:lint:backend`
+  - `pnpm check:type:backend`
+- Known out-of-scope:
+  - `finalSettlementInput` is still generated whenever provider detail exposes
+    `finalAmountFen`; another thread owns that fix.

From 8d6d492d71e9989a20ba3e390e392743cdebcc73 Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Tue, 30 Jun 2026 18:39:13 +0800
Subject: [PATCH 79/94] fix(backend): source ride-hailing final settlement from
 queryCalculateBill

- derive final settlement input from CaoCao queryCalculateBill companyFee instead of order detail fallbacks
- keep FINISHED/CANCELLED phase sync independent from settlement misses or provider errors
- update durable contract, fake provider, and scenario coverage for terminal settlement flow
---
 .../domains/ride-hailing/model/provider.ts    |  11 +-
 .../services/caocao-provider.test.ts          |  66 ++
 .../ride-hailing/services/caocao-provider.ts  |  74 ++-
 .../provider-order-observation.test.ts        |  74 +--
 .../services/provider-order-observation.ts    |  15 +-
 .../sync-ride-hailing-order-with-provider.ts  | 212 +++++--
 .../use-cases/ride-hailing-ordering-flow.ts   |   2 -
 .../caocao-callback-route.scenario.test.ts    | 578 +++++++++++++++++-
 docs/20-product-tdd/ecommerce-contracts.md    |  34 +-
 .../caocao-provider-minimal.openapi.yaml      |  70 +++
 packages/fake-caocao-server/src/routes.ts     | 216 ++++---
 .../fake-caocao-server/src/server.test.ts     |  55 +-
 .../00-task-packet.md                         | 215 +++++++
 13 files changed, 1372 insertions(+), 250 deletions(-)
 create mode 100644 tasks/ride-hailing-cancel-final-bill-diagnosis/00-task-packet.md

diff --git a/apps/backend/src/domains/ride-hailing/model/provider.ts b/apps/backend/src/domains/ride-hailing/model/provider.ts
index fde843694..647e7ba01 100644
--- a/apps/backend/src/domains/ride-hailing/model/provider.ts
+++ b/apps/backend/src/domains/ride-hailing/model/provider.ts
@@ -124,7 +124,6 @@ export type RideHailingProviderNavigationRoute = {
 export type RideHailingProviderOrderDetail = {
   phase: string;
   statusLabel: string;
-  finalAmountFen: number | null;
   driver: {
     driverName: string;
     driverPhone: string;
@@ -138,6 +137,13 @@ export type RideHailingProviderOrderDetail = {
   providerSnapshot: unknown;
 };
 
+export type RideHailingProviderFinalSettlementResult = {
+  amountFen: number;
+  currency: "CNY";
+  providerOrderId: string;
+  providerSnapshot: unknown;
+};
+
 export type RideHailingProviderCreateRideInput = {
   orderId: string;
   params: Record<string, string | number | boolean | null | undefined>;
@@ -166,6 +172,9 @@ export type RideHailingProviderPort = {
     providerSnapshot: unknown;
   }>;
   queryOrderDetail(input: { providerOrderId: string }): Promise<RideHailingProviderOrderDetail>;
+  queryFinalSettlement(input: {
+    providerOrderId: string;
+  }): Promise<RideHailingProviderFinalSettlementResult | null>;
   queryDriverLocation(input: {
     providerOrderId: string;
   }): Promise<RideHailingProviderVehicleLocation | null>;
diff --git a/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts b/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
index 5a2ec3298..f21f12cc7 100644
--- a/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
+++ b/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
@@ -540,6 +540,72 @@ describe("Caocao live order projection", () => {
     ]);
   });
 
+  it("queries authoritative final settlement from queryCalculateBill companyFee", async () => {
+    const requestPaths: string[] = [];
+    const requestBodies: string[] = [];
+    const fetchImpl: typeof fetch = async (input, init) => {
+      const requestUrl =
+        typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
+      const url = new URL(requestUrl);
+      requestPaths.push(url.pathname);
+
+      if (url.pathname.endsWith("/common/queryCalculateBill")) {
+        requestBodies.push(init?.body?.toString() ?? "");
+        return new Response(
+          JSON.stringify({
+            code: 200,
+            data: {
+              companyFee: 1200,
+              personalFee: 200,
+              totalFee: 1400,
+            },
+            success: true,
+          }),
+          { status: 200 },
+        );
+      }
+
+      return new Response(JSON.stringify({ code: 404, success: false }), { status: 200 });
+    };
+    const adapter = new CaocaoProviderAdapter({
+      providerInstance: caocaoProviderInstance(),
+      fetchImpl,
+    });
+
+    const bill = await adapter.queryFinalSettlement({ providerOrderId: "CC123456" });
+
+    expect(requestPaths).toEqual(["/v2/common/queryCalculateBill"]);
+    expect(new URLSearchParams(requestBodies[0] ?? "").get("order_id")).toBe("CC123456");
+    expect(bill).toEqual({
+      amountFen: 1200,
+      currency: "CNY",
+      providerOrderId: "CC123456",
+      providerSnapshot: {
+        companyFee: 1200,
+        personalFee: 200,
+        totalFee: 1400,
+      },
+    });
+  });
+
+  it("treats queryCalculateBill status-not-ready failures as no authoritative final settlement yet", async () => {
+    const fetchImpl: typeof fetch = async () =>
+      new Response(
+        JSON.stringify({
+          code: 25011,
+          msg: "订单状态不正确",
+          success: false,
+        }),
+        { status: 200 },
+      );
+    const adapter = new CaocaoProviderAdapter({
+      providerInstance: caocaoProviderInstance(),
+      fetchImpl,
+    });
+
+    await expect(adapter.queryFinalSettlement({ providerOrderId: "CC123456" })).resolves.toBeNull();
+  });
+
   it("labels realtime accepted status as picking up", async () => {
     const fetchImpl: typeof fetch = async () =>
       new Response(
diff --git a/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts b/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
index 3202e8155..addff3c62 100644
--- a/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
+++ b/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
@@ -1,6 +1,6 @@
 import { createHash, timingSafeEqual } from "node:crypto";
 import type { RideHailingProviderInstance } from "../../../entities/ride-hailing-provider";
-import { throwHttpProblem } from "../../../lib/problem-details";
+import { ProblemDetailsError, throwHttpProblem } from "../../../lib/problem-details";
 import type {
   CaocaoOrderStatusCallback,
   CaocaoOrderStatusCallbackEvent,
@@ -11,6 +11,7 @@ import type {
   RideHailingProviderConfirmFeeInput,
   RideHailingProviderCreateRideInput,
   RideHailingProviderEstimateInput,
+  RideHailingProviderFinalSettlementResult,
   RideHailingProviderNavigationRoute,
   RideHailingProviderNavigationRouteKind,
   RideHailingProviderNavigationRouteQueryKind,
@@ -315,12 +316,6 @@ const parseCaocaoOrderDetail = (data: Record<string, unknown>): RideHailingProvi
     "carBrand",
   ]);
   const color = readOptionalStringField(vehicleRaw, ["color", "vehicleColor", "vehicle_color"]);
-  const finalAmountFen =
-    readOptionalNumberField(data, ["finalAmountFen", "actual_price"]) ??
-    readOptionalNumberField(
-      readOptionalRecordField(data, ["orderFeeVO", "orderFeeVo", "order_fee"]),
-      ["totalFee", "actualPrice", "actual_price"],
-    );
 
   return {
     driver:
@@ -330,7 +325,6 @@ const parseCaocaoOrderDetail = (data: Record<string, unknown>): RideHailingProvi
             driverPhone: driverPhone ?? "",
           }
         : null,
-    finalAmountFen,
     phase,
     providerSnapshot: data,
     statusLabel: buildCaocaoStatusLabel(phase),
@@ -346,6 +340,47 @@ const parseCaocaoOrderDetail = (data: Record<string, unknown>): RideHailingProvi
   };
 };
 
+const normalizeFenAmount = (value: number): number => Math.round(value);
+
+const isCaocaoFinalSettlementNotReadyMessage = (message: string | null): boolean => {
+  if (!message) return false;
+  return (
+    message.includes("Caocao API failed: 25011") ||
+    message.includes("订单未支付") ||
+    message.includes("未支付") ||
+    message.includes("待支付") ||
+    message.includes("订单状态不正确") ||
+    message.includes("暂无账单") ||
+    message.includes("账单未生成")
+  );
+};
+
+const parseCaocaoCalculateBillResult = (input: {
+  data: Record<string, unknown>;
+  providerOrderId: string;
+}): RideHailingProviderFinalSettlementResult => {
+  const companyFee = readOptionalNumberField(input.data, ["companyFee", "company_fee"]);
+  if (companyFee === null) {
+    throw new Error("Caocao queryCalculateBill response is missing companyFee");
+  }
+  return {
+    amountFen: normalizeFenAmount(companyFee),
+    currency: "CNY",
+    providerOrderId: input.providerOrderId,
+    providerSnapshot: input.data,
+  };
+};
+
+const isCaocaoFinalSettlementNotReadyError = (error: unknown): boolean => {
+  const message =
+    error instanceof ProblemDetailsError
+      ? error.message
+      : error instanceof Error
+        ? error.message
+        : null;
+  return isCaocaoFinalSettlementNotReadyMessage(message);
+};
+
 const parseCaocaoDriverRoute = (
   data: Record<string, unknown>,
 ): RideHailingProviderNavigationRoute => {
@@ -765,6 +800,29 @@ export class CaocaoProviderAdapter implements RideHailingProviderPort {
     return parseCaocaoOrderDetail(data);
   }
 
+  async queryFinalSettlement(input: {
+    providerOrderId: string;
+  }): Promise<RideHailingProviderFinalSettlementResult | null> {
+    try {
+      const data = await this.request<Record<string, unknown>>(
+        "POST",
+        "/common/queryCalculateBill",
+        {
+          order_id: input.providerOrderId,
+        },
+      );
+      return parseCaocaoCalculateBillResult({
+        data,
+        providerOrderId: input.providerOrderId,
+      });
+    } catch (error) {
+      if (isCaocaoFinalSettlementNotReadyError(error)) {
+        return null;
+      }
+      throw error;
+    }
+  }
+
   async queryDriverLocation(input: {
     providerOrderId: string;
   }): Promise<RideHailingProviderVehicleLocation | null> {
diff --git a/apps/backend/src/domains/ride-hailing/services/provider-order-observation.test.ts b/apps/backend/src/domains/ride-hailing/services/provider-order-observation.test.ts
index 3f400d8ff..65a4048fc 100644
--- a/apps/backend/src/domains/ride-hailing/services/provider-order-observation.test.ts
+++ b/apps/backend/src/domains/ride-hailing/services/provider-order-observation.test.ts
@@ -7,55 +7,47 @@ import {
 
 describe("RideHailing provider order observation", () => {
   it.each([
-    { phase: "1", finalAmountFen: null, expected: "DISPATCHING" },
-    { phase: "11", finalAmountFen: null, expected: "DISPATCHING" },
-    { phase: "DISPATCHING", finalAmountFen: null, expected: "DISPATCHING" },
-    { phase: "2", finalAmountFen: null, expected: "ACCEPTED" },
-    { phase: "9", finalAmountFen: null, expected: "ACCEPTED" },
-    { phase: "ACCEPTED", finalAmountFen: null, expected: "ACCEPTED" },
-    { phase: "12", finalAmountFen: null, expected: "ARRIVED_AT_PICKUP" },
-    { phase: "ARRIVED_AT_PICKUP", finalAmountFen: null, expected: "ARRIVED_AT_PICKUP" },
-    { phase: "3", finalAmountFen: null, expected: "IN_TRIP" },
-    { phase: "IN_TRIP", finalAmountFen: null, expected: "IN_TRIP" },
-    { phase: "8", finalAmountFen: null, expected: "FINISHED" },
-    { phase: "5", finalAmountFen: null, expected: "FINISHED" },
-    { phase: "7", finalAmountFen: null, expected: "FINISHED" },
-    { phase: "6", finalAmountFen: null, expected: "FINISHED" },
-    { phase: "FINISHED", finalAmountFen: null, expected: "FINISHED" },
-    { phase: "4", finalAmountFen: null, expected: "CANCELLED" },
-    { phase: "10", finalAmountFen: null, expected: "CANCELLED" },
-    { phase: "13", finalAmountFen: null, expected: "CANCELLED" },
-    { phase: "14", finalAmountFen: null, expected: "CANCELLED" },
-    { phase: "20", finalAmountFen: null, expected: "CANCELLED" },
-    { phase: "21", finalAmountFen: null, expected: "CANCELLED" },
-    { phase: "26", finalAmountFen: null, expected: "CANCELLED" },
-    { phase: "27", finalAmountFen: null, expected: "CANCELLED" },
-    { phase: "CANCELLED", finalAmountFen: null, expected: "CANCELLED" },
-    { phase: "FAILED", finalAmountFen: null, expected: "FAILED" },
+    { phase: "1", expected: "DISPATCHING" },
+    { phase: "11", expected: "DISPATCHING" },
+    { phase: "DISPATCHING", expected: "DISPATCHING" },
+    { phase: "2", expected: "ACCEPTED" },
+    { phase: "9", expected: "ACCEPTED" },
+    { phase: "ACCEPTED", expected: "ACCEPTED" },
+    { phase: "12", expected: "ARRIVED_AT_PICKUP" },
+    { phase: "ARRIVED_AT_PICKUP", expected: "ARRIVED_AT_PICKUP" },
+    { phase: "3", expected: "IN_TRIP" },
+    { phase: "IN_TRIP", expected: "IN_TRIP" },
+    { phase: "8", expected: "FINISHED" },
+    { phase: "5", expected: "FINISHED" },
+    { phase: "7", expected: "FINISHED" },
+    { phase: "6", expected: "FINISHED" },
+    { phase: "FINISHED", expected: "FINISHED" },
+    { phase: "4", expected: "CANCELLED" },
+    { phase: "10", expected: "CANCELLED" },
+    { phase: "13", expected: "CANCELLED" },
+    { phase: "14", expected: "CANCELLED" },
+    { phase: "20", expected: "CANCELLED" },
+    { phase: "21", expected: "CANCELLED" },
+    { phase: "26", expected: "CANCELLED" },
+    { phase: "27", expected: "CANCELLED" },
+    { phase: "CANCELLED", expected: "CANCELLED" },
+    { phase: "FAILED", expected: "FAILED" },
   ])("maps provider detail phase $phase into local execution phase $expected", ({
     phase,
-    finalAmountFen,
     expected,
   }) => {
-    expect(mapProviderDetailPhaseToExecutionPhase({ phase, finalAmountFen })).toBe(expected);
+    expect(mapProviderDetailPhaseToExecutionPhase({ phase })).toBe(expected);
   });
 
-  it("still treats unmapped provider phases with a final amount as finished", () => {
-    expect(mapProviderDetailPhaseToExecutionPhase({ phase: "UNKNOWN", finalAmountFen: 4800 })).toBe(
-      "FINISHED",
-    );
-    expect(mapProviderDetailPhaseToExecutionPhase({ phase: "UNKNOWN", finalAmountFen: null })).toBe(
-      null,
-    );
+  it("keeps unmapped provider phases unresolved", () => {
+    expect(mapProviderDetailPhaseToExecutionPhase({ phase: "UNKNOWN" })).toBe(null);
   });
 
-  it("builds final settlement only from provider detail", () => {
+  it("observes execution and snapshots but does not derive final settlement", () => {
     const observed = observeProviderOrderDetail({
-      providerOrderId: "CC-DETAIL-1",
       detail: {
         phase: "FINISHED",
         statusLabel: "待支付",
-        finalAmountFen: 4800,
         driver: {
           driverName: "李师傅",
           driverPhone: "13900139000",
@@ -73,14 +65,6 @@ describe("RideHailing provider order observation", () => {
     });
 
     expect(observed.executionPhase).toBe("FINISHED");
-    expect(observed.finalSettlementInput).toEqual({
-      amountFen: 4800,
-      currency: "CNY",
-      providerOrderId: "CC-DETAIL-1",
-      providerSnapshot: {
-        source: "provider-detail",
-      },
-    });
     expect(observed.driverSnapshot?.driverName).toBe("李师傅");
     expect(observed.vehicleSnapshot?.plate).toBe("浙B99999");
   });
diff --git a/apps/backend/src/domains/ride-hailing/services/provider-order-observation.ts b/apps/backend/src/domains/ride-hailing/services/provider-order-observation.ts
index 5f0ef77ea..52e1cb058 100644
--- a/apps/backend/src/domains/ride-hailing/services/provider-order-observation.ts
+++ b/apps/backend/src/domains/ride-hailing/services/provider-order-observation.ts
@@ -1,7 +1,6 @@
 import type {
   RideHailingDriverSnapshot,
   RideHailingExecutionPhase,
-  RideHailingFinalSettlementInput,
   RideHailingVehicleSnapshot,
 } from "../../trade/model";
 import type { RideHailingProviderOrderDetail } from "../model";
@@ -10,7 +9,6 @@ export type RideHailingProviderOrderObservation = {
   executionPhase: RideHailingExecutionPhase | null;
   driverSnapshot: RideHailingDriverSnapshot | null;
   vehicleSnapshot: RideHailingVehicleSnapshot | null;
-  finalSettlementInput: Omit<RideHailingFinalSettlementInput, "committedAt"> | null;
 };
 
 const normalizePhase = (phase: string): string => phase.trim().toUpperCase();
@@ -34,7 +32,7 @@ const providerCancelledPhases = new Set([
 const providerFailedPhases = new Set(["FAILED", "FAIL", "FAILURE"]);
 
 export function mapProviderDetailPhaseToExecutionPhase(
-  detail: Pick<RideHailingProviderOrderDetail, "phase" | "finalAmountFen">,
+  detail: Pick<RideHailingProviderOrderDetail, "phase">,
 ): RideHailingExecutionPhase | null {
   const phase = normalizePhase(detail.phase);
   if (providerFinishedPhases.has(phase)) return "FINISHED";
@@ -44,7 +42,6 @@ export function mapProviderDetailPhaseToExecutionPhase(
   if (providerDispatchingPhases.has(phase)) return "DISPATCHING";
   if (providerCancelledPhases.has(phase)) return "CANCELLED";
   if (providerFailedPhases.has(phase)) return "FAILED";
-  if (detail.finalAmountFen !== null) return "FINISHED";
   return null;
 }
 
@@ -83,21 +80,11 @@ const normalizeVehicleSnapshot = (
 
 export function observeProviderOrderDetail(input: {
   detail: RideHailingProviderOrderDetail;
-  providerOrderId: string;
 }): RideHailingProviderOrderObservation {
   return {
     executionPhase: mapProviderDetailPhaseToExecutionPhase(input.detail),
     driverSnapshot: normalizeDriverSnapshot(input.detail.driver),
     vehicleSnapshot: normalizeVehicleSnapshot(input.detail.vehicle),
-    finalSettlementInput:
-      input.detail.finalAmountFen !== null
-        ? {
-            amountFen: input.detail.finalAmountFen,
-            currency: "CNY",
-            providerOrderId: input.providerOrderId,
-            providerSnapshot: input.detail.providerSnapshot,
-          }
-        : null,
   };
 }
 
diff --git a/apps/backend/src/domains/ride-hailing/use-cases/sync-ride-hailing-order-with-provider.ts b/apps/backend/src/domains/ride-hailing/use-cases/sync-ride-hailing-order-with-provider.ts
index d2aaf8624..6b22bb750 100644
--- a/apps/backend/src/domains/ride-hailing/use-cases/sync-ride-hailing-order-with-provider.ts
+++ b/apps/backend/src/domains/ride-hailing/use-cases/sync-ride-hailing-order-with-provider.ts
@@ -8,7 +8,10 @@ import { db } from "../../../lib/db";
 import { throwHttpProblem } from "../../../lib/problem-details";
 import { RideHailingOrderRepository } from "../../../repositories/RideHailingOrderRepository";
 import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository";
-import type { RideHailingProviderOrderDetail } from "../model";
+import type {
+  RideHailingProviderFinalSettlementResult,
+  RideHailingProviderOrderDetail,
+} from "../model";
 import { mergeDriverSnapshot, mergeVehicleSnapshot, observeProviderOrderDetail } from "../services";
 import { applyRideHailingFinalSettlementConsequence } from "./apply-ride-hailing-final-settlement-consequence";
 import { loadRideHailingProviderExecutionContext } from "./provider-execution-context";
@@ -39,9 +42,19 @@ const summarizeProviderDetail = (
   providerDriverName: detail.driver?.driverName ?? null,
   providerVehiclePlate: detail.vehicle?.plate ?? null,
   providerHasVehicleLocation: detail.vehicleLocation != null,
-  providerFinalAmountFen: detail.finalAmountFen,
 });
 
+const terminalFinalSettlementPhases = new Set(["FINISHED", "CANCELLED"]);
+
+const isTerminalFinalSettlementPhase = (phase: string | null | undefined): boolean =>
+  phase !== null && phase !== undefined && terminalFinalSettlementPhases.has(phase);
+
+const shouldAttemptTerminalFinalSettlementQuery = (input: {
+  executionPhase: string | null;
+  finalSettlementInputCommitted: boolean;
+}): boolean =>
+  isTerminalFinalSettlementPhase(input.executionPhase) && !input.finalSettlementInputCommitted;
+
 export async function syncRideHailingOrderWithProvider(input: {
   orderId: TradeOrderId;
   expectedProviderInstanceId?: string | null;
@@ -112,7 +125,6 @@ export async function syncRideHailingOrderWithProvider(input: {
 
   const observation = observeProviderOrderDetail({
     detail: providerDetail,
-    providerOrderId: context.providerOrderId,
   });
 
   logCommerceOrderDetailDebug(input.debug, "ride-provider-sync.observation", {
@@ -122,12 +134,9 @@ export async function syncRideHailingOrderWithProvider(input: {
     observedExecutionPhase: observation.executionPhase ?? null,
     observedDriverName: observation.driverSnapshot?.driverName ?? null,
     observedVehiclePlate: observation.vehicleSnapshot?.plate ?? null,
-    observedFinalSettlementProviderOrderId:
-      observation.finalSettlementInput?.providerOrderId ?? null,
-    observedFinalSettlementAmountFen: observation.finalSettlementInput?.amountFen ?? null,
   });
 
-  const mutated = await db.transaction(async (tx) => {
+  const phaseSyncMutated = await db.transaction(async (tx) => {
     const transactionalContext = await loadRideHailingProviderExecutionContext(
       {
         orderId: input.orderId,
@@ -140,14 +149,6 @@ export async function syncRideHailingOrderWithProvider(input: {
     const tradeOrderRepo = new TradeOrderRepository(tx);
     const rideOrderRepo = new RideHailingOrderRepository(tx);
     const patch: Partial<NewRideHailingOrder> = {};
-    let finalSettlementConflict:
-      | {
-          currentAmountFen: number;
-          currentProviderOrderId: string;
-          observedAmountFen: number;
-          observedProviderOrderId: string;
-        }
-      | null = null;
 
     logCommerceOrderDetailDebug(input.debug, "ride-provider-sync.tx.context", {
       localOrderId: transactionalContext.order.id,
@@ -183,39 +184,6 @@ export async function syncRideHailingOrderWithProvider(input: {
       patch.vehicleSnapshot = vehicleSnapshot;
     }
 
-    const shouldEnsureFinalBill =
-      observation.finalSettlementInput !== null ||
-      transactionalContext.rideOrder.finalSettlementInput !== null;
-    if (observation.finalSettlementInput) {
-      const currentFinalSettlementInput = transactionalContext.rideOrder.finalSettlementInput;
-      if (!currentFinalSettlementInput) {
-        patch.finalSettlementInput = {
-          ...observation.finalSettlementInput,
-          committedAt: new Date().toISOString(),
-        };
-      } else if (
-        currentFinalSettlementInput.providerOrderId !==
-          observation.finalSettlementInput.providerOrderId ||
-        currentFinalSettlementInput.amountFen !== observation.finalSettlementInput.amountFen
-      ) {
-        finalSettlementConflict = {
-          currentAmountFen: currentFinalSettlementInput.amountFen,
-          currentProviderOrderId: currentFinalSettlementInput.providerOrderId,
-          observedAmountFen: observation.finalSettlementInput.amountFen,
-          observedProviderOrderId: observation.finalSettlementInput.providerOrderId,
-        };
-        logCommerceOrderDetailDebug(
-          input.debug,
-          "ride-provider-sync.tx.final-settlement-conflict",
-          {
-            localOrderId: transactionalContext.order.id,
-            trigger: input.trigger,
-            ...finalSettlementConflict,
-          },
-        );
-      }
-    }
-
     logCommerceOrderDetailDebug(input.debug, "ride-provider-sync.tx.patch", {
       localOrderId: transactionalContext.order.id,
       trigger: input.trigger,
@@ -224,9 +192,6 @@ export async function syncRideHailingOrderWithProvider(input: {
       executionPhaseAfter: patch.executionPhase ?? transactionalContext.rideOrder.executionPhase,
       driverChanged: "driverSnapshot" in patch,
       vehicleChanged: "vehicleSnapshot" in patch,
-      finalSettlementCommitted: patch.finalSettlementInput !== undefined,
-      finalSettlementConflictDetected: finalSettlementConflict !== null,
-      shouldEnsureFinalBill,
     });
 
     let mutatedInTransaction = false;
@@ -260,24 +225,66 @@ export async function syncRideHailingOrderWithProvider(input: {
       });
     }
 
-    if (shouldEnsureFinalBill) {
-      const consequence = await applyRideHailingFinalSettlementConsequence(
-        {
-          orderId: transactionalContext.order.id,
-        },
-        tx,
-      );
-      mutatedInTransaction = mutatedInTransaction || consequence.applied;
-      logCommerceOrderDetailDebug(input.debug, "ride-provider-sync.tx.final-settlement", {
-        localOrderId: transactionalContext.order.id,
+    return mutatedInTransaction;
+  });
+
+  let finalSettlementMutated = false;
+  const effectiveExecutionPhase = observation.executionPhase ?? context.rideOrder.executionPhase;
+  const shouldAttemptFinalSettlementQuery = shouldAttemptTerminalFinalSettlementQuery({
+    executionPhase: effectiveExecutionPhase,
+    finalSettlementInputCommitted: context.rideOrder.finalSettlementInput !== null,
+  });
+
+  logCommerceOrderDetailDebug(input.debug, "ride-provider-sync.post-phase-sync", {
+    localOrderId: context.order.id,
+    providerOrderId: context.providerOrderId,
+    trigger: input.trigger,
+    effectiveExecutionPhase,
+    finalSettlementAlreadyCommitted: context.rideOrder.finalSettlementInput !== null,
+    shouldAttemptFinalSettlementQuery,
+  });
+
+  if (shouldAttemptFinalSettlementQuery) {
+    let finalSettlementResult: RideHailingProviderFinalSettlementResult | null = null;
+    try {
+      finalSettlementResult = await context.port.queryFinalSettlement({
+        providerOrderId: context.providerOrderId,
+      });
+    } catch (error) {
+      logCommerceOrderDetailDebug(input.debug, "ride-provider-sync.query-final-settlement.error", {
+        localOrderId: context.order.id,
+        providerInstanceId: context.providerInstance.id,
+        providerOrderId: context.providerOrderId,
         trigger: input.trigger,
-        applied: consequence.applied,
-        reason: consequence.reason ?? null,
+        error:
+          error instanceof Error
+            ? {
+                message: error.message,
+                name: error.name,
+                stack: error.stack ?? null,
+              }
+            : error,
       });
     }
 
-    return mutatedInTransaction;
-  });
+    if (finalSettlementResult) {
+      finalSettlementMutated = await commitRideHailingTerminalFinalSettlement({
+        debug: input.debug,
+        finalSettlement: finalSettlementResult,
+        orderId: input.orderId,
+        trigger: input.trigger,
+      });
+    } else {
+      logCommerceOrderDetailDebug(input.debug, "ride-provider-sync.query-final-settlement.miss", {
+        localOrderId: context.order.id,
+        providerOrderId: context.providerOrderId,
+        trigger: input.trigger,
+        effectiveExecutionPhase,
+      });
+    }
+  }
+
+  const mutated = phaseSyncMutated || finalSettlementMutated;
 
   logCommerceOrderDetailDebug(input.debug, "ride-provider-sync.complete", {
     inputOrderId: input.orderId,
@@ -293,3 +300,78 @@ export async function syncRideHailingOrderWithProvider(input: {
     providerDetail,
   };
 }
+
+async function commitRideHailingTerminalFinalSettlement(input: {
+  orderId: TradeOrderId;
+  finalSettlement: RideHailingProviderFinalSettlementResult;
+  trigger: RideHailingProviderSyncTrigger;
+  debug?: CommerceOrderDetailDebugContext;
+}): Promise<boolean> {
+  return db.transaction(async (tx) => {
+    const transactionalContext = await loadRideHailingProviderExecutionContext(
+      {
+        orderId: input.orderId,
+        expectedProviderOrderId: input.finalSettlement.providerOrderId,
+        debug: input.debug,
+      },
+      tx,
+    );
+    if (
+      !shouldAttemptTerminalFinalSettlementQuery({
+        executionPhase: transactionalContext.rideOrder.executionPhase,
+        finalSettlementInputCommitted: transactionalContext.rideOrder.finalSettlementInput !== null,
+      })
+    ) {
+      logCommerceOrderDetailDebug(
+        input.debug,
+        "ride-provider-sync.query-final-settlement.skip-commit",
+        {
+          localOrderId: transactionalContext.order.id,
+          providerOrderId: transactionalContext.providerOrderId,
+          trigger: input.trigger,
+          executionPhase: transactionalContext.rideOrder.executionPhase,
+          finalSettlementAlreadyCommitted:
+            transactionalContext.rideOrder.finalSettlementInput !== null,
+        },
+      );
+      return false;
+    }
+
+    const rideOrderRepo = new RideHailingOrderRepository(tx);
+    const updatedRideOrder = await rideOrderRepo.updateByOrderId(transactionalContext.order.id, {
+      finalSettlementInput: {
+        ...input.finalSettlement,
+        committedAt: new Date().toISOString(),
+      },
+    });
+    if (!updatedRideOrder) {
+      return throwHttpProblem({
+        status: 500,
+        detail: "Failed to persist RideHailing final settlement input",
+      });
+    }
+
+    const consequence = await applyRideHailingFinalSettlementConsequence(
+      {
+        orderId: transactionalContext.order.id,
+      },
+      tx,
+    );
+
+    logCommerceOrderDetailDebug(
+      input.debug,
+      "ride-provider-sync.query-final-settlement.persisted",
+      {
+        localOrderId: transactionalContext.order.id,
+        providerOrderId: transactionalContext.providerOrderId,
+        trigger: input.trigger,
+        executionPhase: transactionalContext.rideOrder.executionPhase,
+        finalSettlementAmountFen: input.finalSettlement.amountFen,
+        billApplied: consequence.applied,
+        billReason: consequence.reason ?? null,
+      },
+    );
+
+    return true;
+  });
+}
diff --git a/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts b/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts
index baf26a81e..14b89db99 100644
--- a/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts
+++ b/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts
@@ -169,7 +169,6 @@ const summarizeProviderDetailProjection = (
   providerVehiclePlate: detail?.vehicle?.plate ?? null,
   providerHasVehicleLocation: detail?.vehicleLocation != null,
   providerHasNavigationRoute: detail?.navigationRoute != null,
-  providerFinalAmountFen: detail?.finalAmountFen ?? null,
 });
 
 const writeRideHailingLiveRouteQueryErrorLog = (payload: Record<string, unknown>): void => {
@@ -200,7 +199,6 @@ const projectProviderDetail = (input: {
 }): ProviderDetailProjection => {
   return {
     driver: input.detail.driver,
-    finalAmountFen: input.detail.finalAmountFen,
     navigationRoute: projectProviderNavigationRoute(input.navigationRoute),
     phase: input.detail.phase,
     statusLabel: input.detail.statusLabel,
diff --git a/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts b/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts
index 4a897f02a..8931a281f 100644
--- a/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts
+++ b/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts
@@ -1,21 +1,22 @@
 import assert from "node:assert/strict";
 import { randomUUID } from "node:crypto";
 import { createServer, type Server } from "node:http";
-import { scenario } from "../_infra/scenario/scenario";
-import { requestJson } from "../_infra/http/backend-app";
-import { givenUser } from "../pr-core/_kit/builders/users";
-import { createOffer, createProductSpu } from "../../src/domains/merchandising";
-import { RideHailingProviderInstanceRepository } from "../../src/repositories/RideHailingProviderInstanceRepository";
-import { RideHailingOrderRepository } from "../../src/repositories/RideHailingOrderRepository";
-import { TradeOrderRepository } from "../../src/repositories/TradeOrderRepository";
-import { BillLineRepository } from "../../src/repositories/BillLineRepository";
-import { BillRepository } from "../../src/repositories/BillRepository";
+import { createOffer, createProductSpu, type PricingRule } from "../../src/domains/merchandising";
 import {
   buildCaocaoCallbackInfo,
   createCaocaoSignature,
   encodeCaocaoExternalOrderId,
 } from "../../src/domains/ride-hailing";
+import type { RideHailingExecutionPhase } from "../../src/domains/trade/model";
 import type { TradeOrderId } from "../../src/entities/trade-order";
+import { BillLineRepository } from "../../src/repositories/BillLineRepository";
+import { BillRepository } from "../../src/repositories/BillRepository";
+import { RideHailingOrderRepository } from "../../src/repositories/RideHailingOrderRepository";
+import { RideHailingProviderInstanceRepository } from "../../src/repositories/RideHailingProviderInstanceRepository";
+import { TradeOrderRepository } from "../../src/repositories/TradeOrderRepository";
+import { requestJson } from "../_infra/http/backend-app";
+import { scenario } from "../_infra/scenario/scenario";
+import { givenUser } from "../pr-core/_kit/builders/users";
 
 const providerRepo = new RideHailingProviderInstanceRepository();
 const rideOrderRepo = new RideHailingOrderRepository();
@@ -76,6 +77,228 @@ const buildCallbackForm = (input: {
   });
 };
 
+const createScenarioCaocaoProvider = async (input: {
+  endpointBaseUrl: string;
+  displayName: string;
+  instanceKey: string;
+  caocaoClientId: string;
+  signKey: string;
+}) =>
+  providerRepo.create({
+    providerType: "CAOCAO",
+    instanceKey: input.instanceKey,
+    status: "ACTIVE",
+    displayName: input.displayName,
+    config: {
+      adapterMode: "CAOCAO_OPEN_API",
+      caocaoClientId: input.caocaoClientId,
+      signKey: input.signKey,
+      endpointBaseUrl: input.endpointBaseUrl,
+      callbackBaseUrl: "https://api.partner-up.test",
+    },
+    createdAt: new Date("2032-01-01T00:00:00.000Z"),
+    updatedAt: new Date("2032-01-01T00:00:00.000Z"),
+  });
+
+const seedCallbackScenarioRideOrder = async (input: {
+  creatorUserId: string;
+  pricingRules?: PricingRule[];
+  providerId: string;
+  providerOrderId: string;
+  quoteAmountFen?: number;
+  rideExecutionPhase: RideHailingExecutionPhase;
+  tradeStatus: "INITIATING" | "OPEN";
+  skuName: string;
+  spuName: string;
+}) => {
+  const quoteAmountFen = input.quoteAmountFen ?? 3600;
+  const spu = await createProductSpu({
+    name: input.spuName,
+    productType: "RIDE_HAILING",
+    status: "ACTIVE",
+    salesPolicy: {
+      skuSelectionPolicy: {
+        type: "CHOICE_SET",
+        min: 1,
+        max: null,
+        resolvesTo: 1,
+      },
+      quantityPolicy: {
+        type: "FIXED",
+        quantity: 1,
+      },
+    },
+    servicePolicy: {
+      type: "RIDE_HAILING",
+    },
+    presentation: {
+      heroImageAssetIds: [],
+      detailImageAssetIds: [],
+      sellingPoints: [],
+      parameterGroups: [],
+      noticeBlocks: [],
+    },
+  });
+  const offer = await createOffer({
+    productType: "RIDE_HAILING",
+    spuIds: [spu.id],
+    status: "ACTIVE",
+    pricingRules: input.pricingRules ?? [],
+    termsVersion: 1,
+  });
+  const itemId = randomUUID();
+  const skuSnapshot = {
+    id: Number(`93${Math.floor(Math.random() * 1000000)}`),
+    version: 1,
+    name: input.skuName,
+    presentationSnapshot: {
+      heroImageAssetIds: [],
+      detailImageAssetIds: [],
+      sellingPoints: [],
+      parameterGroups: [],
+      noticeBlocks: [],
+    },
+    factsSnapshot: {
+      rideHailingProviderInstanceId: input.providerId,
+      providerVehicleTypeCode: "3",
+    },
+    pricingModelSnapshot: {
+      type: "DYNAMIC_QUOTE" as const,
+      calculatorSpec: {
+        version: 1 as const,
+        currency: "CNY" as const,
+        components: [],
+      },
+    },
+    cancellationPolicySnapshot: null,
+  };
+  const quoteSnapshot = {
+    amountFen: quoteAmountFen,
+    currency: "CNY" as const,
+    displayName: input.skuName,
+    estimateAmountFen: quoteAmountFen,
+    quotedAt: "2031-01-01T00:00:00.000Z",
+    explanations: [],
+  };
+  const order = await tradeOrderRepo.create({
+    family: "RIDE_HAILING",
+    offerId: offer.id,
+    createdBy: input.creatorUserId,
+    status: input.tradeStatus,
+    participants: [
+      {
+        participantId: input.creatorUserId,
+        userId: input.creatorUserId,
+        role: "CREATOR",
+        joinedVia: "API",
+      },
+    ],
+    splitRuleSnapshot: {
+      type: "RELATIVE",
+      shares: [{ userId: input.creatorUserId, percentBps: 10000 }],
+    },
+    pricingExecutionSnapshot: {
+      version: 1,
+      offer: {
+        id: offer.id,
+        productType: "RIDE_HAILING",
+        termsVersion: offer.termsVersion,
+        pricingPolicySnapshot: offer.pricingPolicy,
+      },
+      items: [
+        {
+          itemId,
+          quantity: 1,
+          spu: {
+            id: spu.id,
+            version: spu.version,
+            productType: spu.productType,
+            factsSnapshot: spu.facts,
+            salesPolicySnapshot: spu.salesPolicy,
+          },
+          sku: {
+            id: skuSnapshot.id,
+            version: skuSnapshot.version,
+            name: skuSnapshot.name,
+            factsSnapshot: skuSnapshot.factsSnapshot,
+            pricingModelSnapshot: skuSnapshot.pricingModelSnapshot,
+          },
+        },
+      ],
+      orderContext: {
+        serviceTime: null,
+      },
+    },
+    items: [
+      {
+        kind: "CHOICE_SET",
+        itemId,
+        productType: "RIDE_HAILING",
+        candidates: [
+          {
+            sku: skuSnapshot,
+            quoteSnapshot,
+          },
+        ],
+        resolution: {
+          sku: skuSnapshot,
+          providerVehicleTypeCode: "3",
+          providerVehicleTypeName: input.skuName,
+          quoteSnapshot,
+          providerBinding: {
+            providerInstanceId: input.providerId,
+            providerType: "CAOCAO",
+            providerOrderId: input.providerOrderId,
+          },
+          source: "DISPATCH_POLICY",
+          candidateRelation: "IN_CANDIDATES",
+          reason: null,
+          resolvedAt: "2031-01-01T00:00:00.000Z",
+        },
+        quantity: 1,
+      },
+    ],
+    timeout: {
+      unpaidExpiresAt: "2031-01-01T00:15:00.000Z",
+      defaultWindowMinutes: 15,
+    },
+    terminationAttempts: [],
+  });
+  await rideOrderRepo.create({
+    orderId: order.id,
+    routeSnapshot: {
+      origin: {
+        name: "起点",
+        latitude: 30.26,
+        longitude: 120.15,
+      },
+      waypoints: [],
+      destination: {
+        name: "终点",
+        latitude: 30.28,
+        longitude: 120.17,
+      },
+      drivingPlan: null,
+    },
+    departureAt: null,
+    riders: [
+      {
+        userId: input.creatorUserId,
+        displayName: "乘客",
+        phoneMasked: "138****8000",
+      },
+    ],
+    contactPhone: "13800138000",
+    executionPhase: input.rideExecutionPhase,
+  });
+  return {
+    offer,
+    order,
+    providerOrderId: input.providerOrderId,
+    spu,
+  };
+};
+
 scenario("legacy Caocao callback alias resolves provider and requires local order", async () => {
   await providerRepo.create({
     providerType: "CAOCAO",
@@ -160,6 +383,7 @@ scenario("legacy Caocao callback alias resolves provider and requires local orde
 scenario("Caocao callback updates ride execution and creates final bill", async () => {
   const creator = await givenUser("caocao-callback-order-owner");
   let detailQueryCount = 0;
+  let billQueryCount = 0;
   const fakeCaocao = createServer((request, response) => {
     if (request.url?.startsWith("/v2/common/queryOrderDetailV2")) {
       detailQueryCount += 1;
@@ -169,7 +393,6 @@ scenario("Caocao callback updates ride execution and creates final bill", async
           code: 200,
           data: {
             phase: "FINISHED",
-            finalAmountFen: 5000,
             driver: {
               driverName: "李师傅",
               driverPhone: "13900139000",
@@ -185,6 +408,22 @@ scenario("Caocao callback updates ride execution and creates final bill", async
       );
       return;
     }
+    if (request.url?.startsWith("/v2/common/queryCalculateBill")) {
+      billQueryCount += 1;
+      response.writeHead(200, { "Content-Type": "application/json" });
+      response.end(
+        JSON.stringify({
+          code: 200,
+          data: {
+            companyFee: 5000,
+            personalFee: 0,
+            totalFee: 5000,
+          },
+          success: true,
+        }),
+      );
+      return;
+    }
     response.writeHead(404, { "Content-Type": "application/json" });
     response.end(JSON.stringify({ code: 404, success: false }));
   });
@@ -432,6 +671,7 @@ scenario("Caocao callback updates ride execution and creates final bill", async
 
     assert.equal(response.status, 200);
     assert.equal(detailQueryCount, 1);
+    assert.equal(billQueryCount, 1);
     const responseBody = (await response.json()) as {
       code: number;
       success: boolean;
@@ -458,6 +698,324 @@ scenario("Caocao callback updates ride execution and creates final bill", async
   }
 });
 
+scenario(
+  "Caocao callback creates final bill for cancelled ride when queryCalculateBill returns non-zero companyFee",
+  async () => {
+    const creator = await givenUser("caocao-callback-cancelled-order-owner");
+    let detailQueryCount = 0;
+    let billQueryCount = 0;
+    const fakeCaocao = createServer((request, response) => {
+      if (request.url?.startsWith("/v2/common/queryOrderDetailV2")) {
+        detailQueryCount += 1;
+        response.writeHead(200, { "Content-Type": "application/json" });
+        response.end(
+          JSON.stringify({
+            code: 200,
+            data: {
+              phase: "CANCELLED",
+              driver: {
+                driverName: "王师傅",
+                driverPhone: "13700137000",
+              },
+              vehicle: {
+                brand: "曹操快车",
+                color: "白色",
+                plate: "浙C88888",
+              },
+            },
+            success: true,
+          }),
+        );
+        return;
+      }
+      if (request.url?.startsWith("/v2/common/queryCalculateBill")) {
+        billQueryCount += 1;
+        response.writeHead(200, { "Content-Type": "application/json" });
+        response.end(
+          JSON.stringify({
+            code: 200,
+            data: {
+              companyFee: 1270,
+              personalFee: 0,
+              totalFee: 1270,
+            },
+            success: true,
+          }),
+        );
+        return;
+      }
+      response.writeHead(404, { "Content-Type": "application/json" });
+      response.end(JSON.stringify({ code: 404, success: false }));
+    });
+    const endpointBaseUrl = await listen(fakeCaocao);
+
+    try {
+      const provider = await createScenarioCaocaoProvider({
+        endpointBaseUrl,
+        displayName: "Scenario Caocao Cancelled Callback",
+        instanceKey: `scenario-caocao-cancelled-callback-${randomUUID()}`,
+        caocaoClientId: "scenario-caocao-cancelled-callback-client",
+        signKey: "scenario-caocao-cancelled-callback-secret",
+      });
+      const orderSeed = await seedCallbackScenarioRideOrder({
+        creatorUserId: creator.user.id,
+        pricingRules: [
+          {
+            id: 1,
+            label: "五折结算",
+            description: "取消单仍按 final settlement 进入同一 bill 模型",
+            conditionRule: true,
+            action: {
+              type: "RATIO",
+              payload: {
+                ratioBps: 5000,
+              },
+            },
+            target: {
+              level: "ORDER",
+            },
+            continue: true,
+          },
+        ],
+        providerId: provider.id,
+        providerOrderId: "CC-CANCELLED-123",
+        rideExecutionPhase: "DISPATCHING",
+        tradeStatus: "OPEN",
+        skuName: "Scenario Caocao Cancelled Express",
+        spuName: "Scenario Caocao Cancelled Callback SPU",
+      });
+
+      const response = await requestJson(
+        `/api/ride-hailing/caocao/${provider.id}/callback/order-status`,
+        {
+          method: "POST",
+          headers: {
+            "content-type": "application/x-www-form-urlencoded",
+          },
+          body: buildCallbackForm({
+            callbackInfo: buildCaocaoCallbackInfo({
+              providerInstance: provider,
+              routingToken: "stg",
+            }),
+            signKey: "scenario-caocao-cancelled-callback-secret",
+            orderId: orderSeed.order.id,
+            providerOrderId: "CC-CANCELLED-123",
+            event: "20",
+          }).toString(),
+        },
+      );
+
+      assert.equal(response.status, 200);
+      assert.equal(detailQueryCount, 1);
+      assert.equal(billQueryCount, 1);
+      const updatedRide = await rideOrderRepo.findByOrderId(orderSeed.order.id as TradeOrderId);
+      assert.equal(updatedRide?.executionPhase, "CANCELLED");
+      assert.equal(updatedRide?.finalSettlementInput?.amountFen, 1270);
+      assert.equal(updatedRide?.finalSettlementInput?.providerOrderId, "CC-CANCELLED-123");
+      assert.equal(updatedRide?.driverSnapshot?.driverName, "王师傅");
+      assert.equal(updatedRide?.vehicleSnapshot?.plate, "浙C88888");
+      const bill = await billRepo.findBySourceOrderId(orderSeed.order.id);
+      assert.ok(bill);
+      const lines = await billLineRepo.listByBillId(bill.id);
+      assert.equal(lines.length, 1);
+      assert.equal(lines[0]?.amountFen, 635);
+    } finally {
+      await closeServer(fakeCaocao);
+    }
+  },
+);
+
+scenario(
+  "Caocao callback keeps terminal sync when queryCalculateBill has no authoritative result yet",
+  async () => {
+    const creator = await givenUser("caocao-callback-bill-miss-owner");
+    let detailQueryCount = 0;
+    let billQueryCount = 0;
+    const fakeCaocao = createServer((request, response) => {
+      if (request.url?.startsWith("/v2/common/queryOrderDetailV2")) {
+        detailQueryCount += 1;
+        response.writeHead(200, { "Content-Type": "application/json" });
+        response.end(
+          JSON.stringify({
+            code: 200,
+            data: {
+              phase: "CANCELLED",
+              driver: {
+                driverName: "赵师傅",
+                driverPhone: "13600136000",
+              },
+              vehicle: {
+                brand: "曹操快车",
+                color: "黑色",
+                plate: "浙D66666",
+              },
+            },
+            success: true,
+          }),
+        );
+        return;
+      }
+      if (request.url?.startsWith("/v2/common/queryCalculateBill")) {
+        billQueryCount += 1;
+        response.writeHead(200, { "Content-Type": "application/json" });
+        response.end(
+          JSON.stringify({
+            code: 25011,
+            msg: "订单状态不正确",
+            success: false,
+          }),
+        );
+        return;
+      }
+      response.writeHead(404, { "Content-Type": "application/json" });
+      response.end(JSON.stringify({ code: 404, success: false }));
+    });
+    const endpointBaseUrl = await listen(fakeCaocao);
+
+    try {
+      const provider = await createScenarioCaocaoProvider({
+        endpointBaseUrl,
+        displayName: "Scenario Caocao Bill Miss",
+        instanceKey: `scenario-caocao-bill-miss-${randomUUID()}`,
+        caocaoClientId: "scenario-caocao-bill-miss-client",
+        signKey: "scenario-caocao-bill-miss-secret",
+      });
+      const orderSeed = await seedCallbackScenarioRideOrder({
+        creatorUserId: creator.user.id,
+        providerId: provider.id,
+        providerOrderId: "CC-BILL-MISS-123",
+        rideExecutionPhase: "DISPATCHING",
+        tradeStatus: "OPEN",
+        skuName: "Scenario Caocao Bill Miss Express",
+        spuName: "Scenario Caocao Bill Miss SPU",
+      });
+
+      const response = await requestJson(
+        `/api/ride-hailing/caocao/${provider.id}/callback/order-status`,
+        {
+          method: "POST",
+          headers: {
+            "content-type": "application/x-www-form-urlencoded",
+          },
+          body: buildCallbackForm({
+            callbackInfo: buildCaocaoCallbackInfo({
+              providerInstance: provider,
+              routingToken: "stg",
+            }),
+            signKey: "scenario-caocao-bill-miss-secret",
+            orderId: orderSeed.order.id,
+            providerOrderId: "CC-BILL-MISS-123",
+            event: "20",
+          }).toString(),
+        },
+      );
+
+      assert.equal(response.status, 200);
+      assert.equal(detailQueryCount, 1);
+      assert.equal(billQueryCount, 1);
+      const updatedRide = await rideOrderRepo.findByOrderId(orderSeed.order.id as TradeOrderId);
+      assert.equal(updatedRide?.executionPhase, "CANCELLED");
+      assert.equal(updatedRide?.finalSettlementInput, null);
+      assert.equal(updatedRide?.driverSnapshot?.driverName, "赵师傅");
+      assert.equal(updatedRide?.vehicleSnapshot?.plate, "浙D66666");
+      assert.equal(await billRepo.findBySourceOrderId(orderSeed.order.id), null);
+    } finally {
+      await closeServer(fakeCaocao);
+    }
+  },
+);
+
+scenario("Caocao callback does not block terminal sync when queryCalculateBill fails", async () => {
+  const creator = await givenUser("caocao-callback-bill-failure-owner");
+  let detailQueryCount = 0;
+  let billQueryCount = 0;
+  const fakeCaocao = createServer((request, response) => {
+    if (request.url?.startsWith("/v2/common/queryOrderDetailV2")) {
+      detailQueryCount += 1;
+      response.writeHead(200, { "Content-Type": "application/json" });
+      response.end(
+        JSON.stringify({
+          code: 200,
+          data: {
+            phase: "FINISHED",
+            driver: {
+              driverName: "周师傅",
+              driverPhone: "13500135000",
+            },
+            vehicle: {
+              brand: "曹操快车",
+              color: "银色",
+              plate: "浙E55555",
+            },
+          },
+          success: true,
+        }),
+      );
+      return;
+    }
+    if (request.url?.startsWith("/v2/common/queryCalculateBill")) {
+      billQueryCount += 1;
+      response.writeHead(500, { "Content-Type": "application/json" });
+      response.end(JSON.stringify({ code: 500, success: false }));
+      return;
+    }
+    response.writeHead(404, { "Content-Type": "application/json" });
+    response.end(JSON.stringify({ code: 404, success: false }));
+  });
+  const endpointBaseUrl = await listen(fakeCaocao);
+
+  try {
+    const provider = await createScenarioCaocaoProvider({
+      endpointBaseUrl,
+      displayName: "Scenario Caocao Bill Failure",
+      instanceKey: `scenario-caocao-bill-failure-${randomUUID()}`,
+      caocaoClientId: "scenario-caocao-bill-failure-client",
+      signKey: "scenario-caocao-bill-failure-secret",
+    });
+    const orderSeed = await seedCallbackScenarioRideOrder({
+      creatorUserId: creator.user.id,
+      providerId: provider.id,
+      providerOrderId: "CC-BILL-FAILURE-123",
+      rideExecutionPhase: "IN_TRIP",
+      tradeStatus: "OPEN",
+      skuName: "Scenario Caocao Bill Failure Express",
+      spuName: "Scenario Caocao Bill Failure SPU",
+    });
+
+    const response = await requestJson(
+      `/api/ride-hailing/caocao/${provider.id}/callback/order-status`,
+      {
+        method: "POST",
+        headers: {
+          "content-type": "application/x-www-form-urlencoded",
+        },
+        body: buildCallbackForm({
+          callbackInfo: buildCaocaoCallbackInfo({
+            providerInstance: provider,
+            routingToken: "stg",
+          }),
+          signKey: "scenario-caocao-bill-failure-secret",
+          orderId: orderSeed.order.id,
+          providerOrderId: "CC-BILL-FAILURE-123",
+          event: "6",
+        }).toString(),
+      },
+    );
+
+    assert.equal(response.status, 200);
+    assert.equal(detailQueryCount, 1);
+    assert.equal(billQueryCount, 1);
+    const updatedRide = await rideOrderRepo.findByOrderId(orderSeed.order.id as TradeOrderId);
+    assert.equal(updatedRide?.executionPhase, "FINISHED");
+    assert.equal(updatedRide?.finalSettlementInput, null);
+    assert.equal(updatedRide?.driverSnapshot?.driverName, "周师傅");
+    assert.equal(updatedRide?.vehicleSnapshot?.plate, "浙E55555");
+    assert.equal(await billRepo.findBySourceOrderId(orderSeed.order.id), null);
+  } finally {
+    await closeServer(fakeCaocao);
+  }
+});
+
 scenario("Caocao callback returns retryable failure when provider detail query fails", async () => {
   const creator = await givenUser("caocao-callback-query-failure-owner");
   const fakeCaocao = createServer((request, response) => {
diff --git a/docs/20-product-tdd/ecommerce-contracts.md b/docs/20-product-tdd/ecommerce-contracts.md
index 2ab47d840..551c5a5a7 100644
--- a/docs/20-product-tdd/ecommerce-contracts.md
+++ b/docs/20-product-tdd/ecommerce-contracts.md
@@ -410,10 +410,40 @@ RideHailing:
 - provider adapter computes external order id dynamically; the provider-side
   order id returned by create is stored in the choice-set resolution together
   with provider instance identity
-- provider callback updates execution phase, driver / vehicle snapshots, and
-  committed final settlement input
+- provider detail sync owns execution truth only: execution phase, driver
+  snapshot, vehicle snapshot, and other ride-lifecycle facts come from
+  provider order-detail reads rather than from billing queries
+- provider authoritative final settlement truth is a separate source from
+  execution truth:
+  - provider order-detail reads must not directly materialize
+    `finalSettlementInput`
+  - `ride_hailing_orders.finalSettlementInput` must be derived only from the
+    provider's authoritative payable query
+  - for CaoCao, that source is `queryCalculateBill`
+  - for CaoCao, `finalSettlementInput.amountFen` binds `companyFee` rather
+    than `totalFee`:
+    `companyFee` is the amount the PartnerUp platform owes CaoCao, and
+    therefore the amount PartnerUp should charge the user for the fulfilled
+    ride or cancellation
+- local RideHailing terminal phases that may trigger final-settlement capture
+  are only `FINISHED` and `CANCELLED`
+- terminal final-settlement capture is best-effort:
+  - when a local RideHailing order is observed in `FINISHED` or `CANCELLED`
+    and `finalSettlementInput` is still null, backend may attempt the provider
+    payable query inline on that natural sync path
+  - if the provider payable query does not yet return an authoritative
+    result, backend keeps `finalSettlementInput = null` and relies on a later
+    natural sync trigger rather than fabricating settlement truth
+  - failure or no-result from the provider payable query must not block or
+    roll back the local terminal execution-phase sync
 - final Bill is created only after provider final settlement input is
   committed, not lazily from Order Detail reads
+- cancellation-fee query is a separate pre-cancel decision surface:
+  - it may inform whether cancellation is acceptable before cancellation
+  - it must not be reused as post-cancel final settlement truth
+- for cancelled RideHailing orders, if the provider authoritative payable query
+  later returns a non-zero `companyFee`, backend may still materialize that
+  result through the same final Bill model
 
 ## Termination Contract
 
diff --git a/packages/fake-caocao-server/openapi/provider/caocao-provider-minimal.openapi.yaml b/packages/fake-caocao-server/openapi/provider/caocao-provider-minimal.openapi.yaml
index 5630fd2cd..febb41b35 100644
--- a/packages/fake-caocao-server/openapi/provider/caocao-provider-minimal.openapi.yaml
+++ b/packages/fake-caocao-server/openapi/provider/caocao-provider-minimal.openapi.yaml
@@ -230,6 +230,22 @@ paths:
             application/json:
               schema:
                 $ref: '#/components/schemas/QueryCancelFeeSuccessResponse'
+  /common/queryCalculateBill:
+    post:
+      operationId: queryCalculateBill
+      requestBody:
+        required: true
+        content:
+          application/x-www-form-urlencoded:
+            schema:
+              $ref: '#/components/schemas/QueryCalculateBillRequest'
+      responses:
+        '200':
+          description: Query calculate bill success
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/QueryCalculateBillSuccessResponse'
   /common/feeConfirm:
     post:
       operationId: feeConfirm
@@ -925,6 +941,60 @@ components:
         success:
           type: boolean
           const: true
+    QueryCalculateBillRequest:
+      type: object
+      additionalProperties: false
+      required:
+        - client_id
+        - order_id
+        - sign
+        - timestamp
+      properties:
+        client_id:
+          type: string
+          minLength: 1
+        order_id:
+          type: string
+          minLength: 1
+        sign:
+          type: string
+          minLength: 1
+        timestamp:
+          $ref: '#/components/schemas/IntegerString'
+    QueryCalculateBillData:
+      type: object
+      additionalProperties: false
+      required:
+        - companyFee
+        - personalFee
+        - totalFee
+      properties:
+        companyFee:
+          type: integer
+        personalFee:
+          type: integer
+        totalFee:
+          type: integer
+    QueryCalculateBillSuccessResponse:
+      type: object
+      additionalProperties: false
+      required:
+        - code
+        - data
+        - msg
+        - success
+      properties:
+        code:
+          type: integer
+          const: 200
+        data:
+          $ref: '#/components/schemas/QueryCalculateBillData'
+        msg:
+          type: string
+          const: OK
+        success:
+          type: boolean
+          const: true
     FeeConfirmSuccessResponse:
       type: object
       additionalProperties: false
diff --git a/packages/fake-caocao-server/src/routes.ts b/packages/fake-caocao-server/src/routes.ts
index 5291c2f46..bdd809221 100644
--- a/packages/fake-caocao-server/src/routes.ts
+++ b/packages/fake-caocao-server/src/routes.ts
@@ -39,9 +39,7 @@ const providerContract = OpenApiContract.load(
   ),
 );
 const controlContract = OpenApiContract.load(
-  fileURLToPath(
-    new URL("../openapi/control/fake-caocao-control.openapi.yaml", import.meta.url),
-  ),
+  fileURLToPath(new URL("../openapi/control/fake-caocao-control.openapi.yaml", import.meta.url)),
 );
 
 const defaultControlCorsHeaders = {
@@ -491,7 +489,11 @@ const phaseStatusCode = (phase: FakeCaocaoOrderState["phase"]): string => {
 };
 
 const hasDriverInfo = (order: FakeCaocaoOrderState): boolean =>
-  order.acceptedAt !== null || order.phase === "ACCEPTED" || order.phase === "ARRIVED_AT_PICKUP" || order.phase === "IN_TRIP" || order.phase === "FINISHED";
+  order.acceptedAt !== null ||
+  order.phase === "ACCEPTED" ||
+  order.phase === "ARRIVED_AT_PICKUP" ||
+  order.phase === "IN_TRIP" ||
+  order.phase === "FINISHED";
 
 const queryOrderDetailPayload = (order: FakeCaocaoOrderState): unknown => {
   const driver = hasDriverInfo(order) ? driverSnapshot(order) : null;
@@ -565,6 +567,24 @@ const queryOrderDetailPayload = (order: FakeCaocaoOrderState): unknown => {
   };
 };
 
+const queryCalculateBillAmountFen = (order: FakeCaocaoOrderState): number | null => {
+  if (order.phase === "FINISHED") return order.finalAmountFen;
+  if (order.phase === "CANCELLED" && order.cancelFeeFen > 0) return order.cancelFeeFen;
+  return null;
+};
+
+const queryCalculateBillPayload = (order: FakeCaocaoOrderState): unknown => {
+  const companyFee = queryCalculateBillAmountFen(order);
+  if (companyFee === null) {
+    throw new FakeCaocaoProviderError(25011, "订单状态不正确");
+  }
+  return {
+    companyFee,
+    personalFee: 0,
+    totalFee: companyFee,
+  };
+};
+
 const routePolyline = (
   order: FakeCaocaoOrderState,
   plannedRoute: readonly FakeCaocaoCoordinate[],
@@ -721,11 +741,7 @@ const isSuccessfulCallbackAck = (bodyPreview: string | null): boolean => {
   if (!bodyPreview) return false;
   try {
     const parsed = JSON.parse(bodyPreview) as unknown;
-    return (
-      isRecord(parsed) &&
-      parsed.code === 200 &&
-      parsed.success === true
-    );
+    return isRecord(parsed) && parsed.code === 200 && parsed.success === true;
   } catch {
     return false;
   }
@@ -841,20 +857,12 @@ const maybePostCreateCallback = (input: {
   }, 0);
 };
 
-const providerJson = (
-  c: Context,
-  operationId: string,
-  payload: unknown,
-): Response => {
+const providerJson = (c: Context, operationId: string, payload: unknown): Response => {
   providerContract.validateResponse(operationId, 200, payload);
   return c.json(payload, 200);
 };
 
-const controlJson = (
-  c: Context,
-  operationId: string,
-  payload: unknown,
-): Response => {
+const controlJson = (c: Context, operationId: string, payload: unknown): Response => {
   controlContract.validateResponse(operationId, 200, payload);
   return c.json(payload, 200);
 };
@@ -882,10 +890,10 @@ const parseProviderRequest = async (
 
   if (operation.requestBody.contentType === "application/x-www-form-urlencoded") {
     const bodyText = await c.req.text();
-    const form = providerContract.validateBody(operation.operationId, readFormBody(bodyText)) as Record<
-      string,
-      string
-    >;
+    const form = providerContract.validateBody(
+      operation.operationId,
+      readFormBody(bodyText),
+    ) as Record<string, string>;
     return {
       body: form,
       path,
@@ -1289,6 +1297,30 @@ export function createFakeCaocaoApp(input: FakeCaocaoServerAppInput): Hono {
     ),
   );
 
+  app.post(
+    "/common/queryCalculateBill",
+    providerRoute(
+      "queryCalculateBill",
+      "/common/queryCalculateBill",
+      async ({ body }) => {
+        const form = body as Record<string, string>;
+        const providerOrderId = readFirst(form, "order_id");
+        if (!providerOrderId) {
+          throw new FakeCaocaoProviderError(40001, "Missing order_id");
+        }
+        const order = state.findOrder(providerOrderId);
+        if (!order) {
+          throw new FakeCaocaoProviderError(40401, "Fake Caocao order not found");
+        }
+        return caocaoSuccess(queryCalculateBillPayload(order));
+      },
+      {
+        fixture: input.fixture,
+        verifyRequests,
+      },
+    ),
+  );
+
   app.post(
     "/common/feeConfirm",
     providerRoute(
@@ -1329,39 +1361,31 @@ export function createFakeCaocaoApp(input: FakeCaocaoServerAppInput): Hono {
 
   app.post(
     "/__fake_caocao/create-failure/next",
-    controlRoute(
-      "controlNextCreateFailure",
-      "/__fake_caocao/create-failure/next",
-      async () => {
-        state.configureNextCreateFailure();
-        return {
-          ok: true,
-        };
-      },
-    ),
+    controlRoute("controlNextCreateFailure", "/__fake_caocao/create-failure/next", async () => {
+      state.configureNextCreateFailure();
+      return {
+        ok: true,
+      };
+    }),
   );
 
   app.post(
     "/__fake_caocao/estimates",
-    controlRoute(
-      "controlUpdateEstimate",
-      "/__fake_caocao/estimates",
-      async ({ body }) => {
-        const json = body as Record<string, unknown>;
-        const estimate = state.updateEstimate({
-          carType: String(json.carType),
-          carTypeName: typeof json.carTypeName === "string" ? json.carTypeName : undefined,
-          distanceMeters: typeof json.distanceMeters === "number" ? json.distanceMeters : undefined,
-          durationSeconds:
-            typeof json.durationSeconds === "number" ? json.durationSeconds : undefined,
-          estimateAmountFen: Number(json.estimateAmountFen),
-        });
-        return {
-          estimate,
-          ok: true,
-        };
-      },
-    ),
+    controlRoute("controlUpdateEstimate", "/__fake_caocao/estimates", async ({ body }) => {
+      const json = body as Record<string, unknown>;
+      const estimate = state.updateEstimate({
+        carType: String(json.carType),
+        carTypeName: typeof json.carTypeName === "string" ? json.carTypeName : undefined,
+        distanceMeters: typeof json.distanceMeters === "number" ? json.distanceMeters : undefined,
+        durationSeconds:
+          typeof json.durationSeconds === "number" ? json.durationSeconds : undefined,
+        estimateAmountFen: Number(json.estimateAmountFen),
+      });
+      return {
+        estimate,
+        ok: true,
+      };
+    }),
   );
 
   app.post(
@@ -1390,58 +1414,50 @@ export function createFakeCaocaoApp(input: FakeCaocaoServerAppInput): Hono {
 
   app.post(
     "/__fake_caocao/orders/latest/advance",
-    controlRoute(
-      "controlAdvanceLatestOrder",
-      "/__fake_caocao/orders/latest/advance",
-      async () => {
-        const order = state.advanceLatestNonTerminalOrder();
-        if (!order) {
-          throw new FakeCaocaoControlError(
-            "FAKE_CAOCAO_ORDER_NOT_FOUND",
-            404,
-            "No non-terminal fake Caocao order found",
-          );
-        }
-        const callback = await postOrderPhaseCallback({
-          fixture: input.fixture,
-          order,
-        });
-        assertCallbackDelivered(callback, order);
-        return {
-          callback,
-          ok: true,
-          order,
-        };
-      },
-    ),
+    controlRoute("controlAdvanceLatestOrder", "/__fake_caocao/orders/latest/advance", async () => {
+      const order = state.advanceLatestNonTerminalOrder();
+      if (!order) {
+        throw new FakeCaocaoControlError(
+          "FAKE_CAOCAO_ORDER_NOT_FOUND",
+          404,
+          "No non-terminal fake Caocao order found",
+        );
+      }
+      const callback = await postOrderPhaseCallback({
+        fixture: input.fixture,
+        order,
+      });
+      assertCallbackDelivered(callback, order);
+      return {
+        callback,
+        ok: true,
+        order,
+      };
+    }),
   );
 
   app.post(
     "/__fake_caocao/orders/latest/retreat",
-    controlRoute(
-      "controlRetreatLatestOrder",
-      "/__fake_caocao/orders/latest/retreat",
-      async () => {
-        const order = state.retreatLatestOrder();
-        if (!order) {
-          throw new FakeCaocaoControlError(
-            "FAKE_CAOCAO_ORDER_NOT_FOUND",
-            404,
-            "No retreatable fake Caocao order found",
-          );
-        }
-        const callback = await postOrderPhaseCallback({
-          fixture: input.fixture,
-          order,
-        });
-        assertCallbackDelivered(callback, order);
-        return {
-          callback,
-          ok: true,
-          order,
-        };
-      },
-    ),
+    controlRoute("controlRetreatLatestOrder", "/__fake_caocao/orders/latest/retreat", async () => {
+      const order = state.retreatLatestOrder();
+      if (!order) {
+        throw new FakeCaocaoControlError(
+          "FAKE_CAOCAO_ORDER_NOT_FOUND",
+          404,
+          "No retreatable fake Caocao order found",
+        );
+      }
+      const callback = await postOrderPhaseCallback({
+        fixture: input.fixture,
+        order,
+      });
+      assertCallbackDelivered(callback, order);
+      return {
+        callback,
+        ok: true,
+        order,
+      };
+    }),
   );
 
   app.post(
diff --git a/packages/fake-caocao-server/src/server.test.ts b/packages/fake-caocao-server/src/server.test.ts
index 5788efcb3..b419f09b9 100644
--- a/packages/fake-caocao-server/src/server.test.ts
+++ b/packages/fake-caocao-server/src/server.test.ts
@@ -22,7 +22,9 @@ const signedSearchParams = (input: {
   });
 };
 
-const defaultEstimateParams = (input: Partial<Record<string, string>> = {}): Record<string, string> => ({
+const defaultEstimateParams = (
+  input: Partial<Record<string, string>> = {},
+): Record<string, string> => ({
   car_type: "5",
   city_code: "0571",
   from_latitude: "30.2500",
@@ -33,7 +35,9 @@ const defaultEstimateParams = (input: Partial<Record<string, string>> = {}): Rec
   ...input,
 });
 
-const defaultCreateParams = (input: Partial<Record<string, string>> = {}): Record<string, string> => ({
+const defaultCreateParams = (
+  input: Partial<Record<string, string>> = {},
+): Record<string, string> => ({
   callback_info: "pu.rhc.v1.stg.00000000-0000-0000-0000-000000000501",
   caller_phone: "13800138000",
   car_type: "5",
@@ -150,7 +154,7 @@ describe("startFakeCaocaoServer", () => {
     expect(response.ok).toBe(true);
   });
 
-  test("serves signed estimate, create, and detail routes", async () => {
+  test("serves signed estimate, create, detail, and authoritative payable routes", async () => {
     server = await startFakeCaocaoServer();
 
     const estimateResponse = await fetch(
@@ -414,6 +418,51 @@ describe("startFakeCaocaoServer", () => {
     expect(inTripRoute[0]?.latitude).toBeCloseTo(inTripDriverLocationBody.data.latitude, 6);
     expect(inTripRoute[0]?.longitude).toBeCloseTo(inTripDriverLocationBody.data.longitude, 6);
 
+    const finishedPhaseResponse = await fetch(
+      `${server.origin}/__fake_caocao/orders/${createBody.data.orderNo}/advance`,
+      {
+        method: "POST",
+      },
+    );
+    const finishedPhaseBody = (await finishedPhaseResponse.json()) as {
+      ok: boolean;
+      order: { phase: string };
+    };
+
+    expect(finishedPhaseResponse.ok).toBe(true);
+    expect(finishedPhaseBody.ok).toBe(true);
+    expect(finishedPhaseBody.order.phase).toBe("FINISHED");
+
+    const queryCalculateBillResponse = await fetch(`${server.origin}/common/queryCalculateBill`, {
+      body: signedSearchParams({
+        clientId: server.fixture.clientId,
+        params: {
+          order_id: createBody.data.orderNo,
+          timestamp: "37",
+        },
+        signKey: server.fixture.signKey,
+      }).toString(),
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+      method: "POST",
+    });
+    const queryCalculateBillBody = (await queryCalculateBillResponse.json()) as {
+      code: number;
+      data: {
+        companyFee: number;
+        personalFee: number;
+        totalFee: number;
+      };
+      success: boolean;
+    };
+
+    expect(queryCalculateBillResponse.ok).toBe(true);
+    expect(queryCalculateBillBody.success).toBe(true);
+    expect(queryCalculateBillBody.data.companyFee).toBe(5600);
+    expect(queryCalculateBillBody.data.personalFee).toBe(0);
+    expect(queryCalculateBillBody.data.totalFee).toBe(5600);
+
     const invalidPhaseResponse = await fetch(
       `${server.origin}/__fake_caocao/orders/${createBody.data.orderNo}/phase?phase=BOARDING`,
       {
diff --git a/tasks/ride-hailing-cancel-final-bill-diagnosis/00-task-packet.md b/tasks/ride-hailing-cancel-final-bill-diagnosis/00-task-packet.md
new file mode 100644
index 000000000..27de56be0
--- /dev/null
+++ b/tasks/ride-hailing-cancel-final-bill-diagnosis/00-task-packet.md
@@ -0,0 +1,215 @@
+# RideHailing Cancel Final Bill Diagnosis
+
+Date: 2026-06-30
+
+## Objective & Hypothesis
+
+Objective:
+
+- explain why a pre-environment RideHailing order cancelled during `DISPATCHING`
+  still produced a `12.7` bill while provider fee query showed `0`
+- turn the diagnosis into two executable invariants for the RideHailing
+  fulfillment mechanism:
+  1. final settlement input must come from the ride-hailing provider's
+     authoritative payable-query result
+  2. cancellation-fee query is pre-cancellation only and must not be reused as
+     post-cancellation settlement truth
+
+Hypothesis:
+
+- the bill is not created by the cancellation flow itself
+- the current implementation mixes two provider truth surfaces:
+  `queryOrderDetailV2`-derived amount parsing and cancellation-fee querying
+- the correct durable fix is not "cancel => 0", but aligning
+  `ride_orders.final_settlement_input` to the provider's authoritative final
+  settlement payable-query path and restricting cancellation-fee queries to
+  pre-cancellation decision support
+
+## Guardrails Touched
+
+- Typed input route: `Reality`
+- Active mode: `Execute` after correcting the authoritative provider contract
+- Durable owners under inspection:
+  - `apps/backend/src/domains/ride-hailing/`
+  - `apps/backend/src/domains/trade/`
+  - `docs/20-product-tdd/ecommerce-contracts.md`
+- Mutation boundary:
+  - task packet
+  - durable contract doc
+  - RideHailing provider adapter, observation, sync use-case, and test fixtures
+
+## Verification
+
+- source trace completed for cancellation path and final-bill creation path
+- durable contract updated in `docs/20-product-tdd/ecommerce-contracts.md`
+- official CaoCao doc correction confirmed:
+  - `2.26 queryCalculateBill` is the payable source
+  - `2.15 queryBill` is payment/reconciliation truth, not the payable source
+- targeted verification completed:
+  - `pnpm --filter @partner-up-dev/backend typecheck`
+  - `pnpm --filter @partner-up-dev/fake-caocao-server typecheck`
+  - backend unit:
+    `provider-order-observation.test.ts`, `caocao-provider.test.ts`
+  - fake provider unit:
+    `packages/fake-caocao-server/src/server.test.ts`
+  - backend scenario:
+    `apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts`
+
+## Current Understanding
+
+- `cancelRideHailingOrder*` calls provider `cancelRide`, but does not create a
+  bill directly
+- the original broken path diagnosed at the start of this task was:
+  - `syncRideHailingOrderWithProvider()` triggered
+    `applyRideHailingFinalSettlementConsequence()` whenever
+    `observation.finalSettlementInput !== null` or an old settlement already
+    existed
+  - `observeProviderOrderDetail()` created `finalSettlementInput` from any
+    non-null `detail.finalAmountFen`
+  - `parseCaocaoOrderDetail()` derived `finalAmountFen` from:
+    - top-level `finalAmountFen`
+    - or top-level `actual_price`
+    - or nested `orderFeeVO.totalFee` / `actualPrice` / `actual_price`
+- `applyRideHailingFinalSettlementConsequence()` still creates the bill
+  whenever `rideOrder.finalSettlementInput` exists; it does not verify
+  `executionPhase === FINISHED`
+- local source-backed reproduction now confirms:
+  - provider detail `phase = CANCELLED`
+  - nested `orderFeeVO.totalFee = 1270`
+  - adapter output `detail.finalAmountFen = 1270`
+  - observer output `executionPhase = CANCELLED` and
+    `finalSettlementInput.amountFen = 1270` at the same time
+- latest source correction:
+  - earlier diagnosis used the wrong CaoCao source page
+  - the authoritative source for local final settlement input should be
+    `queryCalculateBill`, not `queryBill`
+- user-aligned target invariant is now:
+  - provider authoritative final settlement truth must come from the provider
+    payable query rather than current order-detail fallback parsing
+  - cancellation fee remains a pre-cancel decision/query surface only
+- current frontend order-detail polling stops on terminal RideHailing phases, so
+  `FINISHED` / `CANCELLED` do not create a high-frequency post-terminal retry
+  loop by default
+- for this slice, automatic background retry is not required yet; the simpler
+  accepted model is:
+  - terminal phase sync may best-effort call `queryCalculateBill`
+  - if `queryCalculateBill` has no authoritative result yet, keep
+    `finalSettlementInput = null`
+  - rely on the next natural sync trigger rather than introducing a
+    job-backed retry mechanism now
+- implementation now matches durable truth:
+  - provider order-detail sync only updates execution truth
+  - CaoCao final settlement now uses `queryCalculateBill`
+  - `finalSettlementInput.amountFen` now binds `companyFee`
+  - status-not-ready provider responses are normalized to `null`
+    final-settlement input rather than blocking terminal sync
+
+## Ranked Hypotheses
+
+1. Current final-settlement source is wrong: local code derives settlement from
+   order-detail parsing, while the intended provider-authoritative source should
+   be the dedicated payable query path.
+2. Current cancellation-fee surface is semantically narrow and should stay
+   pre-cancel only; comparing it with post-cancel order payable truth produces
+   a false contradiction.
+3. Even if `orderFeeVO.totalFee` can sometimes match provider truth, the local
+   mechanism is still structurally wrong because it does not bind
+   `finalSettlementInput` to the authoritative query contract.
+
+## Evidence Notes
+
+- Adapter fallback:
+  `apps/backend/src/domains/ride-hailing/services/caocao-provider.ts`
+  reads `orderFeeVO.totalFee` into `finalAmountFen`
+- Observation bug:
+  `apps/backend/src/domains/ride-hailing/services/provider-order-observation.ts`
+  emits `finalSettlementInput` on any non-null `finalAmountFen`, even when
+  phase maps to `CANCELLED`
+- Bill-creation gate:
+  `apps/backend/src/domains/ride-hailing/use-cases/sync-ride-hailing-order-with-provider.ts`
+  plus
+  `apps/backend/src/domains/ride-hailing/use-cases/apply-ride-hailing-final-settlement-consequence.ts`
+  only check presence of `finalSettlementInput`, not ride execution phase or
+  cancelled order status
+- Test gap:
+  `tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts` verifies
+  cancellation UI state but does not assert bill absence
+
+## Agreed Target Invariants
+
+1. `ride_orders.final_settlement_input` must be derived from the
+   ride-hailing provider's authoritative final payable query result.
+   For CaoCao, that means `queryCalculateBill`, not the current
+   `queryOrderDetailV2` amount fallback and not `queryBill`.
+2. For CaoCao, `ride_orders.final_settlement_input.amountFen` must bind
+   `companyFee`:
+   `companyFee` is the amount PartnerUp owes CaoCao, so it is also the amount
+   PartnerUp should charge the user.
+3. Cancellation-fee query is only used before cancellation to inform the
+   cancellation decision; it must not be treated as post-cancellation final
+   settlement truth.
+4. Local terminal RideHailing phases that may trigger `queryCalculateBill` are
+   only `FINISHED` and `CANCELLED`.
+5. `queryCalculateBill` failure or no-result must not roll back or block local
+   terminal phase synchronization.
+
+## Accepted Retry Model
+
+- This slice does not introduce a new job-backed retry mechanism.
+- `queryCalculateBill` runs as a best-effort follow-up when a local
+  RideHailing order is observed in `FINISHED` or `CANCELLED` and
+  `finalSettlementInput` is still `null`.
+- If `queryCalculateBill` returns no authoritative result yet, persist nothing
+  and keep `finalSettlementInput = null`.
+- Later natural sync triggers may retry implicitly, for example:
+  - provider callback
+  - user reopening order detail
+  - admin viewing the order
+- If runtime evidence later shows frequent first-attempt misses, a dedicated
+  retry mechanism can be added in a later slice.
+
+## Latest Sequence Diagram
+
+```mermaid
+sequenceDiagram
+  participant Trigger as "Natural Sync Trigger"
+  participant Sync as "syncRideHailingOrderWithProvider"
+  participant Provider as "Caocao Provider"
+  participant RideOrder as "ride_hailing_orders"
+  participant Bill as "Bill Consequence"
+
+  Trigger->>Sync: sync(orderId)
+  Sync->>Provider: queryOrderDetail(providerOrderId)
+  Provider-->>Sync: execution truth only
+  Sync->>RideOrder: persist executionPhase / driver / vehicle
+
+  alt executionPhase not terminal
+    Sync-->>Trigger: complete
+  else executionPhase is FINISHED or CANCELLED
+    alt finalSettlementInput already committed
+      Sync-->>Trigger: complete
+    else finalSettlementInput is null
+      Sync->>Provider: queryCalculateBill(providerOrderId)
+      alt authoritative result not ready
+        Provider-->>Sync: null
+        Sync-->>Trigger: keep terminal phase, no settlement write
+      else authoritative result returned
+        Provider-->>Sync: companyFee
+        Sync->>RideOrder: persist finalSettlementInput.amountFen = companyFee
+        Sync->>Bill: applyRideHailingFinalSettlementConsequence()
+        Bill-->>Sync: final bill materialized if applicable
+        Sync-->>Trigger: complete
+      end
+    end
+  end
+```
+
+## Next Step
+
+1. Durable contract and production code are now aligned on
+   `queryCalculateBill -> companyFee -> finalSettlementInput.amountFen`.
+2. Deferred by user choice for a later slice:
+   - `FAILED` semantic cleanup
+   - provider-driven vehicle type / order item resolution synchronization
+   - dedicated retry/backoff mechanism beyond natural sync triggers
+   - historical dirty-data repair

From dfa522f2dcbe7380a639b8109deda4e38170d06e Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Tue, 30 Jun 2026 19:13:03 +0800
Subject: [PATCH 80/94] fix(ride-hailing): precheck cancellation fee before
 user cancel

- add order-detail cancellation fee preview endpoint and frontend fee-confirm flow
- keep no-fee cancellation direct after successful precheck
- cover provider adapter, fake CaoCao, and system scenarios
---
 .../src/controllers/commerce.controller.ts    |  43 ++++
 .../services/caocao-provider.test.ts          |  43 ++++
 .../sync-ride-hailing-order-with-provider.ts  |   1 +
 ...el-ride-hailing-order-from-order-detail.ts | 190 +++++++++++++++++
 .../domains/commerce/queries/useCommerce.ts   |  61 ++++++
 .../order-detail/RideHailingOrderContent.vue  | 119 ++++++++++-
 docs/10-prd/behavior/rules-and-invariants.md  |   1 +
 docs/20-product-tdd/ecommerce-contracts.md    |   4 +
 packages/fake-caocao-server/src/routes.ts     |   5 +-
 packages/fake-caocao-server/src/state.test.ts |   3 +
 packages/fake-caocao-server/src/state.ts      |  12 +-
 .../00-task-packet.md                         | 197 ++++++++++++++++++
 .../ride-hailing-ordering.scenario.test.ts    |  73 ++++++-
 13 files changed, 741 insertions(+), 11 deletions(-)
 create mode 100644 tasks/ride-hailing-cancel-fee-precheck/00-task-packet.md

diff --git a/apps/backend/src/controllers/commerce.controller.ts b/apps/backend/src/controllers/commerce.controller.ts
index a1c275e01..fd6626e2b 100644
--- a/apps/backend/src/controllers/commerce.controller.ts
+++ b/apps/backend/src/controllers/commerce.controller.ts
@@ -8,6 +8,7 @@ import {
   createOrderCommand,
   getCommerceOrderDetail,
   listOfferListing,
+  queryRideHailingCancellationFeeFromOrderDetail,
   simulateRentalBookingConfirmation,
 } from "../domains/trade";
 import {
@@ -157,6 +158,12 @@ type CommerceRouteSchema = {
       Awaited<ReturnType<typeof cancelOrderFromOrderDetail>>
     >;
   };
+  "/orders/:orderId/cancel-fee-preview": {
+    $get: JsonEndpoint<
+      UuidParam<"orderId">,
+      Awaited<ReturnType<typeof queryRideHailingCancellationFeeFromOrderDetail>>
+    >;
+  };
   "/orders/:orderId/mock-rental-booking-confirmation": {
     $post: JsonEndpoint<
       UuidParam<"orderId">,
@@ -319,6 +326,42 @@ export const commerceRoute: Hono<AuthEnv, CommerceRouteSchema> = app
       throw error;
     }
   })
+  .get(
+    "/orders/:orderId/cancel-fee-preview",
+    zValidator("param", orderIdParamSchema),
+    async (c) => {
+      const { orderId } = c.req.valid("param");
+      const userId = requireAuthenticatedUserId(c);
+      const debug = withCommerceOrderDetailDebugContext(
+        readCommerceOrderDetailDebugContext(c.req.raw.headers),
+        { orderId, routeOrderId: orderId, source: "commerce.controller.cancel-fee-preview" },
+      );
+      const startedAtMs = Date.now();
+
+      logCommerceOrderDetailDebug(debug, "controller.cancel-fee-preview.request", {
+        actorUserId: userId,
+      });
+
+      try {
+        const result = await queryRideHailingCancellationFeeFromOrderDetail({
+          orderId,
+          actorUserId: userId,
+          debug,
+        });
+        logCommerceOrderDetailDebug(debug, "controller.cancel-fee-preview.response", {
+          durationMs: Date.now() - startedAtMs,
+          cancelFeeFen: result.cancelFeeFen,
+        });
+        return c.json(result);
+      } catch (error) {
+        logCommerceOrderDetailDebug(debug, "controller.cancel-fee-preview.error", {
+          durationMs: Date.now() - startedAtMs,
+          error: error instanceof Error ? error.message : "unknown error",
+        });
+        throw error;
+      }
+    },
+  )
   .post(
     "/orders/:orderId/mock-rental-booking-confirmation",
     zValidator("param", orderIdParamSchema),
diff --git a/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts b/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
index f21f12cc7..a274cfe50 100644
--- a/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
+++ b/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
@@ -588,6 +588,49 @@ describe("Caocao live order projection", () => {
     });
   });
 
+  it("queries cancellation fee preview from queryCancelFee", async () => {
+    const requestPaths: string[] = [];
+    const fetchImpl: typeof fetch = async (input) => {
+      const requestUrl =
+        typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
+      const url = new URL(requestUrl);
+      requestPaths.push(url.pathname);
+
+      if (url.pathname.endsWith("/common/queryCancelFee")) {
+        expect(url.searchParams.get("order_no")).toBe("CC123456");
+        return new Response(
+          JSON.stringify({
+            code: 200,
+            data: {
+              cancelFee: 800,
+              orderNo: "CC123456",
+            },
+            success: true,
+          }),
+          { status: 200 },
+        );
+      }
+
+      return new Response(JSON.stringify({ code: 404, success: false }), { status: 200 });
+    };
+    const adapter = new CaocaoProviderAdapter({
+      providerInstance: caocaoProviderInstance(),
+      fetchImpl,
+    });
+
+    const preview = await adapter.queryCancelFee({ providerOrderId: "CC123456" });
+
+    expect(requestPaths).toEqual(["/v2/common/queryCancelFee"]);
+    expect(preview).toEqual({
+      cancelFeeFen: 800,
+      providerOrderId: "CC123456",
+      providerSnapshot: {
+        cancelFee: 800,
+        orderNo: "CC123456",
+      },
+    });
+  });
+
   it("treats queryCalculateBill status-not-ready failures as no authoritative final settlement yet", async () => {
     const fetchImpl: typeof fetch = async () =>
       new Response(
diff --git a/apps/backend/src/domains/ride-hailing/use-cases/sync-ride-hailing-order-with-provider.ts b/apps/backend/src/domains/ride-hailing/use-cases/sync-ride-hailing-order-with-provider.ts
index 6b22bb750..35ee1d908 100644
--- a/apps/backend/src/domains/ride-hailing/use-cases/sync-ride-hailing-order-with-provider.ts
+++ b/apps/backend/src/domains/ride-hailing/use-cases/sync-ride-hailing-order-with-provider.ts
@@ -29,6 +29,7 @@ export class RideHailingProviderSyncQueryError extends Error {
 export type RideHailingProviderSyncTrigger =
   | "ORDER_DETAIL_POLL"
   | "CAOCAO_CALLBACK"
+  | "CANCEL_FEE_PREVIEW"
   | "CANCEL_REQUEST";
 
 const jsonEqual = (left: unknown, right: unknown): boolean =>
diff --git a/apps/backend/src/domains/trade/use-cases/cancel-ride-hailing-order-from-order-detail.ts b/apps/backend/src/domains/trade/use-cases/cancel-ride-hailing-order-from-order-detail.ts
index 98da53017..fd08d599f 100644
--- a/apps/backend/src/domains/trade/use-cases/cancel-ride-hailing-order-from-order-detail.ts
+++ b/apps/backend/src/domains/trade/use-cases/cancel-ride-hailing-order-from-order-detail.ts
@@ -13,6 +13,7 @@ import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository
 import {
   createRideHailingProviderPort,
   RideHailingProviderSyncQueryError,
+  type RideHailingProviderSyncTrigger,
   syncRideHailingOrderWithProvider,
 } from "../../ride-hailing";
 import {
@@ -81,6 +82,195 @@ const assertActorMayCancelRideHailingOrder = (
   }
 };
 
+async function syncRideHailingOrderBeforeCancellationDecision(input: {
+  orderId: TradeOrderId;
+  debug?: CommerceOrderDetailDebugContext;
+  trigger: RideHailingProviderSyncTrigger;
+}) {
+  try {
+    await syncRideHailingOrderWithProvider({
+      orderId: input.orderId,
+      trigger: input.trigger,
+      debug: input.debug,
+    });
+  } catch (error) {
+    if (error instanceof RideHailingProviderSyncQueryError) {
+      return throwHttpProblem({
+        status: 503,
+        detail: "RideHailing provider detail query failed before cancellation",
+        code: "RIDE_HAILING_PROVIDER_DETAIL_QUERY_FAILED",
+      });
+    }
+    throw error;
+  }
+}
+
+export async function queryRideHailingCancellationFeeFromOrderDetail(input: {
+  orderId: string;
+  actorUserId: string;
+  debug?: CommerceOrderDetailDebugContext;
+}) {
+  logCommerceOrderDetailDebug(input.debug, "ride-cancel-fee-preview.start", {
+    inputOrderId: input.orderId,
+    actorUserId: input.actorUserId,
+  });
+
+  const orderRecord = await tradeOrderRepo.findById(input.orderId as TradeOrderId);
+  if (!orderRecord) {
+    logCommerceOrderDetailDebug(input.debug, "ride-cancel-fee-preview.order-not-found", {
+      inputOrderId: input.orderId,
+      actorUserId: input.actorUserId,
+    });
+    return throwHttpProblem({ status: 404, detail: "Order not found" });
+  }
+  if (orderRecord.family !== "RIDE_HAILING") {
+    logCommerceOrderDetailDebug(input.debug, "ride-cancel-fee-preview.family-mismatch", {
+      ...summarizeOrderRecord(orderRecord),
+      actorUserId: input.actorUserId,
+    });
+    return throwHttpProblem({
+      status: 409,
+      detail: "Only RideHailing orders can use this cancellation flow",
+    });
+  }
+  assertActorMayCancelRideHailingOrder(orderRecord, {
+    actorUserId: input.actorUserId,
+    authority: "ORDER_CREATOR",
+    providerCancelReason: "用户取消订单",
+    providerWhoCancel: 1,
+    terminationReason: "用户取消订单",
+  });
+  if (orderRecord.status !== "OPEN" && orderRecord.status !== "INITIATING") {
+    logCommerceOrderDetailDebug(input.debug, "ride-cancel-fee-preview.order-status-blocked", {
+      ...summarizeOrderRecord(orderRecord),
+      actorUserId: input.actorUserId,
+    });
+    return throwHttpProblem({
+      status: 409,
+      detail: "Order cannot be cancelled from its current status",
+    });
+  }
+
+  const initialRideOrder = await rideOrderRepo.findByOrderId(orderRecord.id);
+  if (!initialRideOrder) {
+    logCommerceOrderDetailDebug(input.debug, "ride-cancel-fee-preview.ride-order-missing", {
+      ...summarizeOrderRecord(orderRecord),
+    });
+    return throwHttpProblem({
+      status: 500,
+      detail: "RideHailing order facts are missing",
+    });
+  }
+
+  await syncRideHailingOrderBeforeCancellationDecision({
+    orderId: orderRecord.id,
+    trigger: "CANCEL_FEE_PREVIEW",
+    debug: input.debug,
+  });
+
+  const syncedOrderRecord = await tradeOrderRepo.findById(orderRecord.id);
+  if (!syncedOrderRecord) {
+    return throwHttpProblem({ status: 404, detail: "Order not found" });
+  }
+  if (syncedOrderRecord.status !== "OPEN") {
+    logCommerceOrderDetailDebug(input.debug, "ride-cancel-fee-preview.synced-status-blocked", {
+      ...summarizeOrderRecord(syncedOrderRecord),
+      actorUserId: input.actorUserId,
+    });
+    return throwHttpProblem({
+      status: 409,
+      detail: "Order cannot be cancelled from its current status",
+    });
+  }
+
+  const syncedRideOrder = await rideOrderRepo.findByOrderId(orderRecord.id);
+  if (!syncedRideOrder) {
+    return throwHttpProblem({
+      status: 500,
+      detail: "RideHailing order facts are missing",
+    });
+  }
+  if (!isCancellableRideHailingExecutionPhase(syncedRideOrder.executionPhase)) {
+    logCommerceOrderDetailDebug(input.debug, "ride-cancel-fee-preview.phase-blocked", {
+      ...summarizeOrderRecord(syncedOrderRecord),
+      ...summarizeRideOrder(syncedRideOrder),
+      actorUserId: input.actorUserId,
+    });
+    return throwHttpProblem({
+      status: 409,
+      detail: "RideHailing order cannot be cancelled from its current phase",
+    });
+  }
+
+  const rideChoiceSetItem = getRideHailingChoiceSetItem(syncedOrderRecord.items);
+  const providerBinding = rideChoiceSetItem
+    ? getRideHailingProviderBinding(rideChoiceSetItem)
+    : null;
+  if (!providerBinding?.providerOrderId) {
+    return throwHttpProblem({
+      status: 409,
+      detail: "RideHailing order is missing provider binding",
+    });
+  }
+
+  const providerInstance = await providerRepo.findById(
+    providerBinding.providerInstanceId as RideHailingProviderInstanceId,
+  );
+  if (!providerInstance || providerInstance.status !== "ACTIVE") {
+    return throwHttpProblem({
+      status: 404,
+      detail: "RideHailing provider instance not found",
+    });
+  }
+
+  const port = createRideHailingProviderPort({ providerInstance });
+  logCommerceOrderDetailDebug(input.debug, "ride-cancel-fee-preview.provider-request.start", {
+    ...summarizeOrderRecord(syncedOrderRecord),
+    ...summarizeRideOrder(syncedRideOrder),
+    providerInstanceId: providerBinding.providerInstanceId,
+    providerOrderId: providerBinding.providerOrderId,
+  });
+
+  try {
+    const preview = await port.queryCancelFee({
+      providerOrderId: providerBinding.providerOrderId,
+    });
+    logCommerceOrderDetailDebug(input.debug, "ride-cancel-fee-preview.provider-request.success", {
+      ...summarizeOrderRecord(syncedOrderRecord),
+      ...summarizeRideOrder(syncedRideOrder),
+      providerInstanceId: providerBinding.providerInstanceId,
+      providerOrderId: providerBinding.providerOrderId,
+      cancelFeeFen: preview.cancelFeeFen,
+    });
+
+    return {
+      orderId: syncedOrderRecord.id,
+      cancelFeeFen: preview.cancelFeeFen,
+      currency: "CNY" as const,
+    };
+  } catch (error) {
+    logCommerceOrderDetailDebug(input.debug, "ride-cancel-fee-preview.provider-request.error", {
+      ...summarizeOrderRecord(syncedOrderRecord),
+      ...summarizeRideOrder(syncedRideOrder),
+      providerInstanceId: providerBinding.providerInstanceId,
+      providerOrderId: providerBinding.providerOrderId,
+      error:
+        error instanceof Error
+          ? {
+              message: error.message,
+              name: error.name,
+              stack: error.stack ?? null,
+            }
+          : error,
+    });
+    return throwHttpProblem({
+      status: 503,
+      detail: "RideHailing cancellation fee query failed",
+      code: "RIDE_HAILING_CANCELLATION_FEE_QUERY_FAILED",
+    });
+  }
+}
+
 async function cancelRideHailingOrder(input: {
   orderId: string;
   actor: RideHailingCancellationActor;
diff --git a/apps/frontend/src/domains/commerce/queries/useCommerce.ts b/apps/frontend/src/domains/commerce/queries/useCommerce.ts
index 42ce53480..b71d875ac 100644
--- a/apps/frontend/src/domains/commerce/queries/useCommerce.ts
+++ b/apps/frontend/src/domains/commerce/queries/useCommerce.ts
@@ -41,6 +41,10 @@ export type CommerceOrderDetailResponse = InferResponseType<
   CommerceApi["orders"][":orderId"]["$get"]
 >;
 
+export type RideHailingCancellationFeePreviewResponse = InferResponseType<
+  CommerceApi["orders"][":orderId"]["cancel-fee-preview"]["$get"]
+>;
+
 export type BillDetailResponse = InferResponseType<CommerceApi["bills"][":billId"]["$get"]>;
 
 export type BillLineCheckoutTargetResponse = InferResponseType<
@@ -590,6 +594,63 @@ export const useCancelOrder = () => {
   });
 };
 
+export const useRideHailingCancellationFeePreview = () =>
+  useMutation({
+    mutationFn: async (orderId: string) => {
+      const requestId = createCommerceOrderDetailDebugId("cancel-fee-preview");
+      const startedAtMs = Date.now();
+
+      logCommerceOrderDetailDebug("cancel-fee-preview.mutation.start", {
+        requestId,
+        orderId,
+      });
+
+      try {
+        const response = await client.api.commerce.orders[":orderId"][
+          "cancel-fee-preview"
+        ].$get(
+          {
+            param: {
+              orderId,
+            },
+          },
+          {
+            init: {
+              credentials: "include",
+              headers: createCommerceOrderDetailDebugHeaders({
+                channel: "cancel",
+                source: "useRideHailingCancellationFeePreview",
+                requestId,
+                orderId,
+                routeOrderId: orderId,
+                trigger: "mutation",
+              }),
+            },
+          },
+        );
+        const result = await readJsonOrThrow<RideHailingCancellationFeePreviewResponse>(
+          response,
+          "Failed to query cancellation fee",
+        );
+        logCommerceOrderDetailDebug("cancel-fee-preview.mutation.success", {
+          requestId,
+          orderId,
+          durationMs: Date.now() - startedAtMs,
+          cancelFeeFen: result.cancelFeeFen,
+        });
+        return result;
+      } catch (error) {
+        logCommerceOrderDetailDebug("cancel-fee-preview.mutation.error", {
+          requestId,
+          orderId,
+          durationMs: Date.now() - startedAtMs,
+          error: describeCommerceOrderDetailDebugError(error),
+        });
+        throw error;
+      }
+    },
+  });
+
 export const useMockRentalBookingConfirmation = () => {
   const queryClient = useQueryClient();
 
diff --git a/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue b/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue
index 861693d45..8c7ec6a7b 100644
--- a/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue
+++ b/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue
@@ -29,12 +29,12 @@
               type="button"
               size="sm"
               shape="pill"
-              tone="neutral"
+              tone="danger"
               variant="outline"
-              :loading="cancelMutation.isPending.value"
-              :disabled="!canRequestCancellation"
+              :loading="cancelActionPending"
+              :disabled="!canRequestCancellation || cancelActionPending"
               data-testid="order-detail.ride-hailing.cancel"
-              @click="cancelRideHailingOrder"
+              @click="previewRideHailingCancellationFee"
             >
               取消订单
             </PuButton>
@@ -130,6 +130,57 @@
         </div>
       </div>
     </PuFloatPanel>
+
+    <PuDialog
+      :open="showCancelConfirmDialog"
+      tone="error"
+      title="确认取消订单"
+      :description="cancelConfirmDescription"
+      :show-cancel="false"
+      :show-confirm="false"
+      :close-on-overlay="!cancelMutation.isPending.value"
+      :close-on-escape="!cancelMutation.isPending.value"
+      @close="closeCancelConfirmDialog"
+      @cancel="closeCancelConfirmDialog"
+      @confirm="confirmRideHailingCancellation"
+    >
+      <div
+        class="ride-hailing-order-content__cancel-confirm"
+        data-testid="order-detail.ride-hailing.cancel-confirm"
+      >
+        <div data-testid="order-detail.ride-hailing.cancel-fee">
+          <PuInlineNotice
+            :tone="cancelFeeFen > 0 ? 'warning' : 'info'"
+            :title="cancelFeeFen > 0 ? '将产生取消费' : '本次取消无取消费'"
+            :message="cancelFeeMessage"
+          />
+        </div>
+      </div>
+
+      <template #actions>
+        <PuButton
+          type="button"
+          tone="neutral"
+          variant="ghost"
+          :disabled="cancelMutation.isPending.value"
+          data-testid="order-detail.ride-hailing.cancel-confirm.dismiss"
+          @click="closeCancelConfirmDialog"
+        >
+          再想想
+        </PuButton>
+        <PuButton
+          type="button"
+          tone="danger"
+          variant="solid"
+          :loading="cancelMutation.isPending.value"
+          :disabled="cancelMutation.isPending.value"
+          data-testid="order-detail.ride-hailing.cancel-confirm.confirm"
+          @click="confirmRideHailingCancellation"
+        >
+          确认取消
+        </PuButton>
+      </template>
+    </PuDialog>
   </section>
 </template>
 
@@ -137,6 +188,7 @@
 import {
   PuButton,
   PuCard,
+  PuDialog,
   PuFloatPanel,
   type PuFloatPanelStop,
   PuImg,
@@ -146,6 +198,7 @@ import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 import {
   type CommerceOrderDetailResponse,
   useCancelOrder,
+  useRideHailingCancellationFeePreview,
 } from "@/domains/commerce/queries/useCommerce";
 import BillCard from "@/domains/commerce/ui/order-detail/BillCard.vue";
 import RideHailingSkuCard from "@/domains/commerce/ui/ordering/RideHailingSkuCard.vue";
@@ -180,12 +233,14 @@ const props = defineProps<{
 }>();
 
 const cancelMutation = useCancelOrder();
+const cancelFeePreviewMutation = useRideHailingCancellationFeePreview();
 
 const DEFAULT_CONTENT_HEIGHT = 720;
 
 const contentRoot = ref<HTMLElement | null>(null);
 const contentHeight = ref(DEFAULT_CONTENT_HEIGHT);
 const panelStop = ref<RidePanelStopValue>("normal");
+const showCancelConfirmDialog = ref(false);
 
 let contentResizeObserver: ResizeObserver | null = null;
 
@@ -300,7 +355,15 @@ const showsCancelAction = computed(
 );
 
 const cancelErrorMessage = computed(() =>
-  cancelMutation.error.value instanceof Error ? cancelMutation.error.value.message : null,
+  cancelFeePreviewMutation.error.value instanceof Error
+    ? cancelFeePreviewMutation.error.value.message
+    : cancelMutation.error.value instanceof Error
+      ? cancelMutation.error.value.message
+      : null,
+);
+
+const cancelActionPending = computed(
+  () => cancelFeePreviewMutation.isPending.value || cancelMutation.isPending.value,
 );
 
 const firstPresentString = (values: readonly (string | null | undefined)[]): string | null => {
@@ -375,14 +438,56 @@ const billId = computed(() => {
   return value.length > 0 ? value : null;
 });
 
-const cancelRideHailingOrder = async (): Promise<void> => {
-  logCommerceOrderDetailDebug("ride-content.cancel.click", {
+const cancelFeeFen = computed(() => cancelFeePreviewMutation.data.value?.cancelFeeFen ?? 0);
+
+const cancelFeeMessage = computed(() => {
+  if (cancelFeeFen.value > 0) {
+    return `服务商预估本次取消将收取 ${formatFen(cancelFeeFen.value)}，确认后将提交取消请求。`;
+  }
+  return "服务商预估本次取消不收取取消费，确认后将提交取消请求。";
+});
+
+const cancelConfirmDescription = computed(() =>
+  cancelFeeFen.value > 0 ? "取消后仍需承担取消费。" : "取消后订单将结束。",
+);
+
+const closeCancelConfirmDialog = (): void => {
+  if (cancelMutation.isPending.value) return;
+  showCancelConfirmDialog.value = false;
+};
+
+const previewRideHailingCancellationFee = async (): Promise<void> => {
+  logCommerceOrderDetailDebug("ride-content.cancel-preview.click", {
+    routeOrderId: props.routeOrderId,
+    detailOrderId: props.detail.order.id,
+    providerOrderId: props.ride.provider.providerOrderId,
+    executionPhase: props.ride.executionPhase,
+  });
+  const preview = await cancelFeePreviewMutation.mutateAsync(props.detail.order.id);
+  if (preview.cancelFeeFen <= 0) {
+    await executeRideHailingCancellation("no-fee-preview");
+    return;
+  }
+  showCancelConfirmDialog.value = true;
+};
+
+const executeRideHailingCancellation = async (
+  source: "fee-confirm" | "no-fee-preview",
+): Promise<void> => {
+  logCommerceOrderDetailDebug("ride-content.cancel.execute", {
+    source,
     routeOrderId: props.routeOrderId,
     detailOrderId: props.detail.order.id,
     providerOrderId: props.ride.provider.providerOrderId,
     executionPhase: props.ride.executionPhase,
+    cancelFeeFen: cancelFeeFen.value,
   });
   await cancelMutation.mutateAsync(props.detail.order.id);
+  showCancelConfirmDialog.value = false;
+};
+
+const confirmRideHailingCancellation = async (): Promise<void> => {
+  await executeRideHailingCancellation("fee-confirm");
 };
 
 const orderMapViewModel = computed(() =>
diff --git a/docs/10-prd/behavior/rules-and-invariants.md b/docs/10-prd/behavior/rules-and-invariants.md
index ac486d6a5..150b1c869 100644
--- a/docs/10-prd/behavior/rules-and-invariants.md
+++ b/docs/10-prd/behavior/rules-and-invariants.md
@@ -137,6 +137,7 @@
 - RideHailing visible vehicle candidates depend on route and departure time. Provider-unavailable candidates should be absent from the list, not shown as disabled options with reasons.
 - RideHailing displayed price before create is the selected candidate range, not the final bill cap.
 - RideHailing final bill follows the resolved provider settlement. A provider upgrade or substitution outside the selected candidate set is recorded rather than rejected, and the final settlement remains the bill basis.
+- Before a user cancels an active RideHailing order from Order Detail, the product should query the provider's current cancellation-fee preview and show the fee before the user confirms cancellation. If the previewed fee is greater than zero, the user must explicitly accept that fee before the cancellation request is sent.
 - If RideHailing provider dispatch fails during create-order, the domain may create and cancel an order, but the user experience remains an ordering failure dialog on `/order/new` rather than navigation to Order Detail.
 
 ## 4. Identity And Authentication Rules
diff --git a/docs/20-product-tdd/ecommerce-contracts.md b/docs/20-product-tdd/ecommerce-contracts.md
index 551c5a5a7..19ae7e0fe 100644
--- a/docs/20-product-tdd/ecommerce-contracts.md
+++ b/docs/20-product-tdd/ecommerce-contracts.md
@@ -440,6 +440,10 @@ RideHailing:
   committed, not lazily from Order Detail reads
 - cancellation-fee query is a separate pre-cancel decision surface:
   - it may inform whether cancellation is acceptable before cancellation
+  - user-side RideHailing cancellation from Order Detail must query this
+    surface before sending the destructive cancellation command
+  - if the previewed cancellation fee is greater than zero, frontend must show
+    the amount and require explicit confirmation before cancellation
   - it must not be reused as post-cancel final settlement truth
 - for cancelled RideHailing orders, if the provider authoritative payable query
   later returns a non-zero `companyFee`, backend may still materialize that
diff --git a/packages/fake-caocao-server/src/routes.ts b/packages/fake-caocao-server/src/routes.ts
index bdd809221..782327380 100644
--- a/packages/fake-caocao-server/src/routes.ts
+++ b/packages/fake-caocao-server/src/routes.ts
@@ -1282,11 +1282,12 @@ export function createFakeCaocaoApp(input: FakeCaocaoServerAppInput): Hono {
       async ({ query }) => {
         const providerOrderId = readFirst(query, "order_no");
         const order = providerOrderId ? state.findOrder(providerOrderId) : null;
-        if (!order) {
+        const cancelFeeFen = providerOrderId ? state.previewCancelFee(providerOrderId) : null;
+        if (!order || cancelFeeFen === null) {
           throw new FakeCaocaoProviderError(40401, "Fake Caocao order not found");
         }
         return caocaoSuccess({
-          cancelFee: order.cancelFeeFen,
+          cancelFee: cancelFeeFen,
           orderNo: order.providerOrderId,
         });
       },
diff --git a/packages/fake-caocao-server/src/state.test.ts b/packages/fake-caocao-server/src/state.test.ts
index 9b4d60f02..e4a497299 100644
--- a/packages/fake-caocao-server/src/state.test.ts
+++ b/packages/fake-caocao-server/src/state.test.ts
@@ -82,7 +82,9 @@ describe("FakeCaocaoState", () => {
       carType: "3",
       externalOrderId: "external-order-2",
     });
+    expect(state.previewCancelFee(created.providerOrderId)).toBe(0);
     state.advanceOrderPhase(created.providerOrderId);
+    expect(state.previewCancelFee(created.providerOrderId)).toBe(800);
     const cancelled = state.cancelOrder(created.providerOrderId);
     const feeConfirm = state.confirmFee({
       allowanceAmountFen: 120,
@@ -92,6 +94,7 @@ describe("FakeCaocaoState", () => {
 
     expect(cancelled?.phase).toBe("CANCELLED");
     expect(cancelled?.cancelFeeFen).toBe(800);
+    expect(state.previewCancelFee(created.providerOrderId)).toBe(800);
     expect(feeConfirm.providerOrderId).toBe(created.providerOrderId);
     expect(state.snapshot().feeConfirms).toHaveLength(1);
   });
diff --git a/packages/fake-caocao-server/src/state.ts b/packages/fake-caocao-server/src/state.ts
index 3a4123f77..0a38ef9fc 100644
--- a/packages/fake-caocao-server/src/state.ts
+++ b/packages/fake-caocao-server/src/state.ts
@@ -156,6 +156,9 @@ const defaultDestination = (): FakeCaocaoCoordinate => ({
 
 const terminalOrderPhases = new Set<FakeCaocaoOrderPhase>(["FINISHED", "CANCELLED"]);
 const nonRetreatableOrderPhases = new Set<FakeCaocaoOrderPhase>(["CREATED", "CANCELLED"]);
+
+const calculateCancelFeeFen = (phase: FakeCaocaoOrderPhase): number =>
+  phase === "ACCEPTED" || phase === "ARRIVED_AT_PICKUP" ? 800 : 0;
 const activeOrderPhases: FakeCaocaoOrderPhase[] = [
   "CREATED",
   "ACCEPTED",
@@ -514,7 +517,7 @@ export class FakeCaocaoState {
 
     const updated: FakeCaocaoOrderState = {
       ...order,
-      cancelFeeFen: order.phase === "ACCEPTED" || order.phase === "ARRIVED_AT_PICKUP" ? 800 : 0,
+      cancelFeeFen: calculateCancelFeeFen(order.phase),
       phase: "CANCELLED",
       queryCount: 0,
       updatedAt: timestamp,
@@ -524,6 +527,13 @@ export class FakeCaocaoState {
     return updated;
   }
 
+  previewCancelFee(providerOrderId: string): number | null {
+    const order = this.orders.get(providerOrderId);
+    if (!order) return null;
+    if (order.phase === "CANCELLED") return order.cancelFeeFen;
+    return calculateCancelFeeFen(order.phase);
+  }
+
   confirmFee(input: {
     providerOrderId: string;
     allowanceAmountFen: number | null;
diff --git a/tasks/ride-hailing-cancel-fee-precheck/00-task-packet.md b/tasks/ride-hailing-cancel-fee-precheck/00-task-packet.md
new file mode 100644
index 000000000..a2f651e3b
--- /dev/null
+++ b/tasks/ride-hailing-cancel-fee-precheck/00-task-packet.md
@@ -0,0 +1,197 @@
+# RideHailing Cancel Fee Precheck
+
+Date: 2026-06-30
+
+## Objective & Hypothesis
+
+Objective:
+
+- fix user-side RideHailing order cancellation so the flow queries the provider
+  cancellation fee before executing cancellation
+- when the pre-cancel fee is greater than `0`, show the user an explicit fee
+  prompt and require confirmation before the destructive cancellation request
+- keep cancellation fee as a pre-cancel decision surface only; do not reuse it
+  as post-cancel final settlement truth
+
+Hypothesis:
+
+- the provider adapter and fake CaoCao server already expose the required
+  cancellation-fee query capability
+- the missing slice is a user-facing API plus frontend confirmation workflow
+  in Order Detail
+- the final bill path should remain governed by provider final-settlement
+  query truth, not by the pre-cancel fee preview
+
+## Guardrails Touched
+
+- Typed input route: `Intent`.
+- Active mode: `Execute` after impact handshake and explicit start.
+- Durable owners:
+  - `docs/20-product-tdd/ecommerce-contracts.md`
+  - `apps/backend/src/domains/ride-hailing/`
+  - `apps/backend/src/domains/trade/`
+  - `apps/backend/src/controllers/commerce.controller.ts`
+  - `apps/frontend/src/domains/commerce/`
+- User-visible surface:
+  - `/orders/:orderId`
+  - `RideHailingOrderContent`
+- Expected local skill before substantial UI work:
+  - load `@partner-up-dev/design-web#design-web` guidance because the fix will
+    likely compose `@partner-up-dev/design-web` confirmation / dialog primitives
+
+## Current Understanding
+
+- `RideHailingOrderContent` currently calls `cancelRideHailingOrder` directly
+  from the cancel button.
+- `useCancelOrder()` currently posts directly to
+  `POST /api/commerce/orders/:orderId/cancel`.
+- The backend cancellation use case calls provider `cancelRide()` and receives
+  `cancelFeeFen` only after the order is already cancelled.
+- Provider port already has `queryCancelFee()`.
+- CaoCao adapter implements `queryCancelFee()` through
+  `/common/queryCancelFee`.
+- Fake CaoCao server implements `/common/queryCancelFee`.
+- Durable contract already says cancellation-fee query is a separate
+  pre-cancel decision surface and must not be reused as post-cancel final
+  settlement truth.
+- Implemented correction:
+  - user-side RideHailing cancel now calls
+    `GET /api/commerce/orders/:orderId/cancel-fee-preview` first
+  - backend validates order ownership, family, cancellable order status,
+    RideHailing phase, and provider binding before querying provider fee
+  - frontend opens a confirmation dialog with the fee amount only when
+    `cancelFeeFen > 0`; no-fee preview success continues to the existing
+    cancellation action without an extra confirmation step
+  - fake CaoCao now returns phase-based fee preview, so accepted / arrived
+    orders can exercise positive-fee UX before cancellation
+
+## Target Behavior
+
+For a cancellable RideHailing order:
+
+1. User taps `取消订单`.
+2. Frontend asks backend for a cancellation-fee preview.
+3. If preview fails with a recoverable provider/query error, UI should not
+   silently cancel; it should show a clear failure state.
+4. If `cancelFeeFen <= 0`, frontend proceeds to the destructive cancel mutation
+   without adding a new prompt.
+5. If `cancelFeeFen > 0`, user must see the fee amount and explicitly confirm
+   before frontend calls the destructive cancel mutation.
+6. After cancellation succeeds, order detail should refetch and show terminal
+   state through the existing order detail query path.
+
+## Candidate Sequence
+
+```mermaid
+sequenceDiagram
+  participant User as "User"
+  participant UI as "RideHailingOrderContent"
+  participant API as "Commerce API"
+  participant Provider as "RideHailing Provider"
+  participant Cancel as "Cancel Use Case"
+
+  User->>UI: tap cancel
+  UI->>API: query cancellation fee
+  API->>Provider: queryCancelFee(providerOrderId)
+  Provider-->>API: cancelFeeFen
+  API-->>UI: fee preview
+
+  alt cancelFeeFen > 0
+    UI-->>User: show fee prompt
+    User->>UI: confirm
+    UI->>API: POST cancel order
+  else no fee
+    UI->>API: POST cancel order
+  end
+  API->>Cancel: execute cancellation
+  Cancel->>Provider: cancelRide(providerOrderId)
+  Provider-->>Cancel: cancellation result
+  API-->>UI: cancellation result
+  UI->>API: refetch order detail
+```
+
+## Proposed Work Surface
+
+- Backend:
+  - added a narrow order-detail-owned cancellation-fee preview endpoint
+  - implemented a RideHailing-only query use case that performs access, family,
+    status, phase, and provider-binding checks before preview
+  - returns `{ orderId, cancelFeeFen, currency }` without provider internals
+  - preserved existing `cancelRideHailingOrderFromOrderDetail` execution
+    semantics
+- Frontend:
+  - added a mutation hook for the preview endpoint through Hono RPC client
+  - updated `RideHailingOrderContent` so the button opens the preview-confirm
+    flow for positive-fee cancellation instead of directly cancelling
+  - included stable `data-testid` nodes for confirmation, confirm action,
+    dismiss action, and fee text
+- Tests:
+  - added backend provider-adapter coverage for `queryCancelFee`
+  - added fake CaoCao state coverage for phase-based preview fee
+  - added system scenario for user-side cancel with positive fee requiring
+    prompt
+  - preserved and stabilized the existing no-fee cancellation scenario
+
+## Risks / Invariants
+
+- Do not treat `queryCancelFee()` as final bill truth.
+- Do not create a bill from the fee preview.
+- Do not bypass order creator access control.
+- Do not expose provider internals to the frontend payload.
+- Do not make zero-fee cancellation depend on stale frontend assumptions; the
+  destructive cancel response remains authoritative for the actual cancellation
+  result.
+- Keep the implementation reviewable; avoid broad cancellation architecture
+  refactors unless evidence requires them.
+
+## Verification
+
+Passed:
+
+- `pnpm --filter @partner-up-dev/backend typecheck`
+- `pnpm check:type:frontend`
+- `pnpm --filter @partner-up-dev/fake-caocao-server typecheck`
+- `pnpm exec vitest run --config vitest.backend.config.ts --project backend-unit apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts`
+- `pnpm --filter @partner-up-dev/fake-caocao-server exec vitest run src/state.test.ts`
+- `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts -t commerce_ride_hailing_order_detail --reporter=dot`
+- `pnpm check:format`
+- `pnpm check:lint`
+- `git diff --check`
+
+Observed evidence:
+
+- positive-fee scenario shows `¥8.00` before confirmation and then reaches
+  order status `CANCELLED`
+- no-fee scenario performs the precheck, does not require a new confirmation
+  prompt, and then reaches order status `CANCELLED`
+- lint naming audit remains report-only and reports the existing
+  `RideHailingOrderContent` / `RideHailingOrderingContent` weak-name findings
+
+## Next Step
+
+Implementation and focused verification complete. Ready for review or broader
+static gate if needed.
+
+Impact handshake:
+
+- Address and Object:
+  - `docs/10-prd/behavior/rules-and-invariants.md`
+  - `docs/20-product-tdd/ecommerce-contracts.md`
+  - `apps/backend/src/controllers/commerce.controller.ts`
+  - RideHailing / Trade backend use-case code
+  - `apps/frontend/src/domains/commerce/queries/useCommerce.ts`
+  - `apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue`
+  - focused fake-provider and scenario tests
+- State Diff: user-side RideHailing cancellation changes from direct destructive
+  cancel to pre-cancel fee preview, plus explicit confirmation before cancel
+  when the previewed fee is greater than zero.
+- Blast Radius Forecast: Hono RPC types, frontend query hook, RideHailing order
+  detail UI state, fake CaoCao fee-preview semantics, and focused scenarios.
+- Invariants Check:
+  - do not use cancellation-fee preview as final bill truth
+  - do not create bills from preview
+  - keep creator-only user-side access control
+  - do not expose provider snapshots in user payload
+  - keep admin cancellation behavior unchanged
+- Verification: typecheck backend/frontend plus focused provider and RideHailing
+  cancellation scenarios.
diff --git a/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts b/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
index 6a2728788..7eabc3885 100644
--- a/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
+++ b/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
@@ -167,7 +167,7 @@ async function advanceLatestFakeCaocaoOrder(): Promise<{
 
 async function setFakeCaocaoOrderPhase(input: {
   providerOrderId: string;
-  phase: "ACCEPTED" | "ARRIVED_AT_PICKUP" | "IN_TRIP" | "FINISHED";
+  phase: "CREATED" | "ACCEPTED" | "ARRIVED_AT_PICKUP" | "IN_TRIP" | "FINISHED";
 }): Promise<{
   providerOrderId: string;
   phase: string;
@@ -1045,6 +1045,11 @@ scenario("commerce_ride_hailing_order_detail_cancel_dispatching_order", async (c
     const providerOrderId = fakeOrders[0]?.providerOrderId;
     assert.ok(providerOrderId);
 
+    await setFakeCaocaoOrderPhase({
+      providerOrderId,
+      phase: "CREATED",
+    });
+
     await page.getByTestId("order-detail.ride-hailing.cancel").click();
     await waitForTextIncludes({
       read: () => page.getByTestId("order-detail.ride-hailing.status-title").textContent(),
@@ -1059,6 +1064,72 @@ scenario("commerce_ride_hailing_order_detail_cancel_dispatching_order", async (c
   });
 });
 
+scenario("commerce_ride_hailing_order_detail_prompts_positive_cancel_fee", async (ctx) => {
+  await resetFakeCaocao();
+  const creator = await givenUser("system-ride-hailing-cancel-fee-creator", {
+    phoneNumber: "13800138007",
+  });
+  await bindScenarioWeChatOpenId({
+    openId: "fake-openid-commerce-ride-hailing-cancel-fee-creator",
+    user: creator,
+  });
+  const pr = await givenRideHailingPr({
+    creator,
+    title: "System ride hailing cancel fee PR",
+  });
+  await configurePRStatus({ pr, status: "READY" });
+  await registerScenarioPaymentProvider();
+  const placement = await givenRideHailingOrderingPlacement();
+
+  ctx.record("creatorUserId", creator.user.id);
+  ctx.record("prId", pr.id);
+  ctx.record("placementId", placement.placementId);
+  ctx.record("providerInstanceId", placement.providerInstanceId);
+
+  await withScenarioPage(async (page) => {
+    await installScenarioUserSession(page, creator);
+    await installDeterministicShareSidecarStubs(page);
+
+    await openRideHailingOrderingFromPr({ page, prId: pr.id });
+    await assertRideHailingOrderingContent(page);
+    await page.getByTestId("ordering.ride-hailing.create-order").click();
+    await assertRideHailingOrderDetail(page);
+    await waitForFakeCaocaoOrderCount(1);
+
+    const fakeOrders = await readFakeCaocaoOrders();
+    assert.equal(fakeOrders.length, 1);
+    const providerOrderId = fakeOrders[0]?.providerOrderId;
+    assert.ok(providerOrderId);
+
+    await setFakeCaocaoOrderPhase({
+      providerOrderId,
+      phase: "ACCEPTED",
+    });
+
+    await page.getByTestId("order-detail.ride-hailing.cancel").click();
+    await page.getByTestId("order-detail.ride-hailing.cancel-confirm").waitFor({
+      state: "visible",
+      timeout: 10_000,
+    });
+    await assertLocatorTextMatches({
+      actual: page.getByTestId("order-detail.ride-hailing.cancel-fee").textContent(),
+      pattern: /[¥￥]8\.00/,
+      label: "RideHailing positive cancellation fee preview",
+    });
+
+    await page.getByTestId("order-detail.ride-hailing.cancel-confirm.confirm").click();
+    await waitForTextIncludes({
+      read: () => page.getByTestId("order-detail.ride-hailing.status-title").textContent(),
+      expected: "已取消",
+      label: "RideHailing positive-fee cancelled status hero",
+    });
+    await waitForFakeCaocaoOrderPhase({
+      providerOrderId,
+      phase: "CANCELLED",
+    });
+  });
+});
+
 scenario("commerce_ride_hailing_provider_create_failure_stays_on_ordering_page", async (ctx) => {
   await resetFakeCaocao();
   await armFakeCaocaoCreateFailure();

From 9cf578ef8a397586e90e64c0d5a51f0b117ca408 Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Tue, 30 Jun 2026 21:00:24 +0800
Subject: [PATCH 81/94] fix(ride-hailing): close provider-cancelled orders

- propagate provider-observed RideHailing cancellations into Trade order lifecycle
- keep cancelled final-settlement bills eligible for provider fee confirmation
- add callback and domain regression coverage
---
 .../sync-ride-hailing-order-with-provider.ts  |  36 ++++++-
 .../trade/services/order-termination.test.ts  |  56 +++++++++-
 .../trade/services/order-termination.ts       |  73 ++++++++++---
 .../apply-bill-settlement-to-order.ts         |  40 +++++--
 .../src/repositories/TradeOrderRepository.ts  |  18 ++--
 .../caocao-callback-route.scenario.test.ts    |  73 +++++++++++++
 .../00-task-packet.md                         | 101 ++++++++++++++++++
 7 files changed, 359 insertions(+), 38 deletions(-)
 create mode 100644 tasks/ride-hailing-dispatch-timeout-order-status-diagnosis/00-task-packet.md

diff --git a/apps/backend/src/domains/ride-hailing/use-cases/sync-ride-hailing-order-with-provider.ts b/apps/backend/src/domains/ride-hailing/use-cases/sync-ride-hailing-order-with-provider.ts
index 35ee1d908..e0d28975a 100644
--- a/apps/backend/src/domains/ride-hailing/use-cases/sync-ride-hailing-order-with-provider.ts
+++ b/apps/backend/src/domains/ride-hailing/use-cases/sync-ride-hailing-order-with-provider.ts
@@ -1,3 +1,4 @@
+import { randomUUID } from "node:crypto";
 import type { NewRideHailingOrder } from "../../../entities/ride-hailing-order";
 import type { TradeOrderId } from "../../../entities/trade-order";
 import {
@@ -8,6 +9,7 @@ import { db } from "../../../lib/db";
 import { throwHttpProblem } from "../../../lib/problem-details";
 import { RideHailingOrderRepository } from "../../../repositories/RideHailingOrderRepository";
 import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository";
+import { closeRideHailingOrderFromProviderCancellation } from "../../trade/services";
 import type {
   RideHailingProviderFinalSettlementResult,
   RideHailingProviderOrderDetail,
@@ -56,6 +58,8 @@ const shouldAttemptTerminalFinalSettlementQuery = (input: {
 }): boolean =>
   isTerminalFinalSettlementPhase(input.executionPhase) && !input.finalSettlementInputCommitted;
 
+const buildProviderCancellationAttemptId = (): string => `term_provider_cancel_${randomUUID()}`;
+
 export async function syncRideHailingOrderWithProvider(input: {
   orderId: TradeOrderId;
   expectedProviderInstanceId?: string | null;
@@ -196,6 +200,8 @@ export async function syncRideHailingOrderWithProvider(input: {
     });
 
     let mutatedInTransaction = false;
+    const effectiveExecutionPhase =
+      patch.executionPhase ?? transactionalContext.rideOrder.executionPhase;
     if (Object.keys(patch).length > 0) {
       const updated = await rideOrderRepo.updateByOrderId(
         transactionalContext.rideOrder.orderId,
@@ -215,7 +221,35 @@ export async function syncRideHailingOrderWithProvider(input: {
       });
     }
 
-    if (transactionalContext.order.status === "INITIATING") {
+    if (
+      effectiveExecutionPhase === "CANCELLED" &&
+      (transactionalContext.order.status === "INITIATING" ||
+        transactionalContext.order.status === "OPEN")
+    ) {
+      const closedAt = new Date();
+      const closedOrder = closeRideHailingOrderFromProviderCancellation(
+        transactionalContext.order,
+        {
+          attemptId: buildProviderCancellationAttemptId(),
+          decidedAt: closedAt.toISOString(),
+          reason: `RideHailing provider reported cancellation for ${transactionalContext.providerOrderId}`,
+        },
+      );
+      await tradeOrderRepo.applyTerminationState({
+        id: transactionalContext.order.id,
+        status: closedOrder.status,
+        terminationAttempts: closedOrder.terminationAttempts,
+        closedAt,
+      });
+      mutatedInTransaction = true;
+      logCommerceOrderDetailDebug(input.debug, "ride-provider-sync.tx.close-order-status", {
+        localOrderId: transactionalContext.order.id,
+        fromStatus: transactionalContext.order.status,
+        toStatus: closedOrder.status,
+        trigger: input.trigger,
+        providerOrderId: transactionalContext.providerOrderId,
+      });
+    } else if (transactionalContext.order.status === "INITIATING") {
       await tradeOrderRepo.updateStatus(transactionalContext.order.id, "OPEN");
       mutatedInTransaction = true;
       logCommerceOrderDetailDebug(input.debug, "ride-provider-sync.tx.promote-order-status", {
diff --git a/apps/backend/src/domains/trade/services/order-termination.test.ts b/apps/backend/src/domains/trade/services/order-termination.test.ts
index efb3f31ee..d96d46896 100644
--- a/apps/backend/src/domains/trade/services/order-termination.test.ts
+++ b/apps/backend/src/domains/trade/services/order-termination.test.ts
@@ -5,6 +5,7 @@ import {
   appendTerminationAttempt,
   approveTerminationAttempt,
   canRequestOrderTermination,
+  closeRideHailingOrderFromProviderCancellation,
   denyTerminationAttempt,
   markTerminationAttemptResolving,
 } from "./order-termination";
@@ -48,11 +49,7 @@ describe("order termination workflow", () => {
       requestedBy: "user-1",
     });
 
-    const next = markTerminationAttemptResolving(
-      order,
-      "attempt-1",
-      "RENTAL_FULFILLMENT",
-    );
+    const next = markTerminationAttemptResolving(order, "attempt-1", "RENTAL_FULFILLMENT");
 
     assert.equal(next.terminationAttempts[0]?.resolutionPath, "RENTAL_FULFILLMENT");
   });
@@ -93,4 +90,53 @@ describe("order termination workflow", () => {
     assert.equal(next.terminationAttempts[0]?.status, "DENIED");
     assert.equal(next.terminationAttempts[0]?.reason, "供应商保留预订");
   });
+
+  it("closes an open order from provider-observed ride hailing cancellation", () => {
+    const order = {
+      ...createOpenOrder(),
+      family: "RIDE_HAILING" as const,
+    };
+
+    const next = closeRideHailingOrderFromProviderCancellation(order, {
+      attemptId: "attempt-provider-cancel",
+      decidedAt: "2026-05-28T10:01:00.000Z",
+      reason: "Provider dispatch timed out",
+    });
+
+    assert.equal(next.status, "CANCELLED");
+    assert.equal(next.terminationAttempts.length, 1);
+    assert.equal(next.terminationAttempts[0]?.attemptId, "attempt-provider-cancel");
+    assert.equal(next.terminationAttempts[0]?.requestedBy, "system:ride-hailing-provider");
+    assert.equal(next.terminationAttempts[0]?.status, "APPROVED");
+    assert.equal(next.terminationAttempts[0]?.resolutionPath, "RIDE_HAILING_FULFILLMENT");
+    assert.equal(next.terminationAttempts[0]?.reason, "Provider dispatch timed out");
+  });
+
+  it("approves an existing pending attempt on provider-observed ride hailing cancellation", () => {
+    const order = appendTerminationAttempt(
+      {
+        ...createOpenOrder(),
+        family: "RIDE_HAILING" as const,
+      },
+      {
+        attemptId: "attempt-user-cancel",
+        requestedAt: "2026-05-28T10:00:00.000Z",
+        requestedBy: "user-1",
+      },
+    );
+
+    const next = closeRideHailingOrderFromProviderCancellation(order, {
+      attemptId: "attempt-provider-cancel",
+      decidedAt: "2026-05-28T10:01:00.000Z",
+      reason: "Provider dispatch timed out",
+    });
+
+    assert.equal(next.status, "CANCELLED");
+    assert.equal(next.terminationAttempts.length, 1);
+    assert.equal(next.terminationAttempts[0]?.attemptId, "attempt-user-cancel");
+    assert.equal(next.terminationAttempts[0]?.requestedBy, "user-1");
+    assert.equal(next.terminationAttempts[0]?.status, "APPROVED");
+    assert.equal(next.terminationAttempts[0]?.resolutionPath, "RIDE_HAILING_FULFILLMENT");
+    assert.equal(next.terminationAttempts[0]?.reason, "Provider dispatch timed out");
+  });
 });
diff --git a/apps/backend/src/domains/trade/services/order-termination.ts b/apps/backend/src/domains/trade/services/order-termination.ts
index 273276bbd..099392bf4 100644
--- a/apps/backend/src/domains/trade/services/order-termination.ts
+++ b/apps/backend/src/domains/trade/services/order-termination.ts
@@ -24,14 +24,12 @@ type DenialInput = {
   reason?: string | null;
 };
 
-const hasPendingTerminationAttempt = (
-  order: Pick<TradeOrder, "terminationAttempts">,
-): boolean =>
+const RIDE_HAILING_PROVIDER_SYSTEM_ACTOR = "system:ride-hailing-provider";
+
+const hasPendingTerminationAttempt = (order: Pick<TradeOrder, "terminationAttempts">): boolean =>
   order.terminationAttempts.some((attempt) => attempt.status === "PENDING");
 
-const hasApprovedTerminationAttempt = (
-  order: Pick<TradeOrder, "terminationAttempts">,
-): boolean =>
+const hasApprovedTerminationAttempt = (order: Pick<TradeOrder, "terminationAttempts">): boolean =>
   order.terminationAttempts.some((attempt) => attempt.status === "APPROVED");
 
 export const canRequestOrderTermination = (
@@ -91,10 +89,7 @@ export function markTerminationAttemptResolving(
   };
 }
 
-export function approveTerminationAttempt(
-  order: TradeOrder,
-  input: ApprovalInput,
-): TradeOrder {
+export function approveTerminationAttempt(order: TradeOrder, input: ApprovalInput): TradeOrder {
   const matched = order.terminationAttempts.some(
     (attempt) => attempt.attemptId === input.attemptId && attempt.status === "PENDING",
   );
@@ -120,10 +115,7 @@ export function approveTerminationAttempt(
   };
 }
 
-export function denyTerminationAttempt(
-  order: TradeOrder,
-  input: DenialInput,
-): TradeOrder {
+export function denyTerminationAttempt(order: TradeOrder, input: DenialInput): TradeOrder {
   const matched = order.terminationAttempts.some(
     (attempt) => attempt.attemptId === input.attemptId && attempt.status === "PENDING",
   );
@@ -145,3 +137,56 @@ export function denyTerminationAttempt(
     ),
   };
 }
+
+export function closeRideHailingOrderFromProviderCancellation(
+  order: TradeOrder,
+  input: {
+    attemptId: string;
+    decidedAt: string;
+    reason: string;
+  },
+): TradeOrder {
+  if (order.status !== "INITIATING" && order.status !== "OPEN") {
+    return order;
+  }
+
+  const pendingAttempt = [...order.terminationAttempts]
+    .reverse()
+    .find((attempt) => attempt.status === "PENDING");
+  if (pendingAttempt) {
+    return {
+      ...order,
+      status: "CANCELLED",
+      terminationAttempts: order.terminationAttempts.map((attempt) =>
+        attempt.attemptId === pendingAttempt.attemptId
+          ? {
+              ...attempt,
+              status: "APPROVED",
+              resolutionPath: "RIDE_HAILING_FULFILLMENT",
+              reason: input.reason,
+              decidedAt: input.decidedAt,
+            }
+          : attempt,
+      ),
+    };
+  }
+
+  return {
+    ...order,
+    status: "CANCELLED",
+    terminationAttempts: [
+      ...order.terminationAttempts,
+      {
+        attemptId: input.attemptId,
+        requestedAt: input.decidedAt,
+        requestedBy: RIDE_HAILING_PROVIDER_SYSTEM_ACTOR,
+        status: "APPROVED",
+        resolutionPath: "RIDE_HAILING_FULFILLMENT",
+        reason: input.reason,
+        effectKind: null,
+        effectAmountFen: null,
+        decidedAt: input.decidedAt,
+      },
+    ],
+  };
+}
diff --git a/apps/backend/src/domains/trade/use-cases/apply-bill-settlement-to-order.ts b/apps/backend/src/domains/trade/use-cases/apply-bill-settlement-to-order.ts
index e805ba344..b056780a4 100644
--- a/apps/backend/src/domains/trade/use-cases/apply-bill-settlement-to-order.ts
+++ b/apps/backend/src/domains/trade/use-cases/apply-bill-settlement-to-order.ts
@@ -1,7 +1,8 @@
-import { throwHttpProblem } from "../../../lib/problem-details";
 import type { BillId } from "../../../entities/bill";
+import { throwHttpProblem } from "../../../lib/problem-details";
 import { BillLineRepository } from "../../../repositories/BillLineRepository";
 import { BillRepository } from "../../../repositories/BillRepository";
+import { RideHailingOrderRepository } from "../../../repositories/RideHailingOrderRepository";
 import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository";
 import { deriveBillPaymentState } from "../../bill";
 import { applyOrderPrepaidSettlementFulfillmentConsequence } from "../../fulfillment";
@@ -9,11 +10,10 @@ import { confirmRideHailingProviderFeeAfterPayment } from "./ride-hailing-orderi
 
 const billRepo = new BillRepository();
 const billLineRepo = new BillLineRepository();
+const rideOrderRepo = new RideHailingOrderRepository();
 const tradeOrderRepo = new TradeOrderRepository();
 
-export async function applyBillSettlementToOrder(input: {
-  billId: string;
-}): Promise<{
+export async function applyBillSettlementToOrder(input: { billId: string }): Promise<{
   applied: boolean;
   reason: string;
   rentalOrderId?: string;
@@ -36,6 +36,32 @@ export async function applyBillSettlementToOrder(input: {
   if (!order) {
     return throwHttpProblem({ status: 404, detail: "Order not found" });
   }
+  if (order.family === "RIDE_HAILING") {
+    const rideOrder = await rideOrderRepo.findByOrderId(order.id);
+    if (!rideOrder) {
+      return throwHttpProblem({
+        status: 500,
+        detail: "RideHailing order facts are missing",
+      });
+    }
+    if (!rideOrder.finalSettlementInput) {
+      return {
+        applied: false,
+        reason: "RideHailing final settlement input is missing",
+      };
+    }
+    if (order.status !== "OPEN" && order.status !== "CANCELLED") {
+      return {
+        applied: false,
+        reason: "RideHailing order is not eligible for final settlement consequence",
+      };
+    }
+
+    return confirmRideHailingProviderFeeAfterPayment({
+      orderId: order.id,
+    });
+  }
+
   const hasPendingTerminationAttempt = order.terminationAttempts.some(
     (attempt) => attempt.status === "PENDING",
   );
@@ -46,12 +72,6 @@ export async function applyBillSettlementToOrder(input: {
     };
   }
 
-  if (order.family === "RIDE_HAILING") {
-    return confirmRideHailingProviderFeeAfterPayment({
-      orderId: order.id,
-    });
-  }
-
   return applyOrderPrepaidSettlementFulfillmentConsequence({
     orderId: order.id,
     family: order.family,
diff --git a/apps/backend/src/repositories/TradeOrderRepository.ts b/apps/backend/src/repositories/TradeOrderRepository.ts
index dc5b58403..dcaae3a72 100644
--- a/apps/backend/src/repositories/TradeOrderRepository.ts
+++ b/apps/backend/src/repositories/TradeOrderRepository.ts
@@ -1,17 +1,17 @@
 import { and, desc, eq, inArray } from "drizzle-orm";
-import { db } from "../lib/db";
-import {
-  tradeOrders,
-  type NewTradeOrder,
-  type TradeOrder,
-  type TradeOrderId,
-} from "../entities/trade-order";
-import type { OfferId } from "../entities/offer";
 import type {
   OrderItemSnapshot,
   OrderStatus,
   OrderTerminationAttempt,
 } from "../domains/trade/model";
+import type { OfferId } from "../entities/offer";
+import {
+  type NewTradeOrder,
+  type TradeOrder,
+  type TradeOrderId,
+  tradeOrders,
+} from "../entities/trade-order";
+import { db } from "../lib/db";
 import type { RepositoryExecutor } from "./_executor";
 
 export class TradeOrderRepository {
@@ -107,12 +107,14 @@ export class TradeOrderRepository {
     id: TradeOrderId;
     status: OrderStatus;
     terminationAttempts: OrderTerminationAttempt[];
+    closedAt?: Date | null;
   }): Promise<TradeOrder | null> {
     const result = await this.executor
       .update(tradeOrders)
       .set({
         status: input.status,
         terminationAttempts: input.terminationAttempts,
+        ...(input.closedAt === undefined ? {} : { closedAt: input.closedAt }),
         updatedAt: new Date(),
       })
       .where(eq(tradeOrders.id, input.id))
diff --git a/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts b/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts
index 8931a281f..b142aff09 100644
--- a/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts
+++ b/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts
@@ -2,15 +2,18 @@ import assert from "node:assert/strict";
 import { randomUUID } from "node:crypto";
 import { createServer, type Server } from "node:http";
 import { createOffer, createProductSpu, type PricingRule } from "../../src/domains/merchandising";
+import { applyPaymentSettlementConsequence } from "../../src/domains/payment";
 import {
   buildCaocaoCallbackInfo,
   createCaocaoSignature,
   encodeCaocaoExternalOrderId,
 } from "../../src/domains/ride-hailing";
 import type { RideHailingExecutionPhase } from "../../src/domains/trade/model";
+import type { PaymentProviderInstanceId } from "../../src/entities/payment";
 import type { TradeOrderId } from "../../src/entities/trade-order";
 import { BillLineRepository } from "../../src/repositories/BillLineRepository";
 import { BillRepository } from "../../src/repositories/BillRepository";
+import { PaymentProviderInstanceRepository } from "../../src/repositories/PaymentProviderInstanceRepository";
 import { RideHailingOrderRepository } from "../../src/repositories/RideHailingOrderRepository";
 import { RideHailingProviderInstanceRepository } from "../../src/repositories/RideHailingProviderInstanceRepository";
 import { TradeOrderRepository } from "../../src/repositories/TradeOrderRepository";
@@ -19,6 +22,7 @@ import { scenario } from "../_infra/scenario/scenario";
 import { givenUser } from "../pr-core/_kit/builders/users";
 
 const providerRepo = new RideHailingProviderInstanceRepository();
+const paymentProviderRepo = new PaymentProviderInstanceRepository();
 const rideOrderRepo = new RideHailingOrderRepository();
 const tradeOrderRepo = new TradeOrderRepository();
 const billRepo = new BillRepository();
@@ -704,6 +708,7 @@ scenario(
     const creator = await givenUser("caocao-callback-cancelled-order-owner");
     let detailQueryCount = 0;
     let billQueryCount = 0;
+    let confirmFeeCount = 0;
     const fakeCaocao = createServer((request, response) => {
       if (request.url?.startsWith("/v2/common/queryOrderDetailV2")) {
         detailQueryCount += 1;
@@ -744,6 +749,18 @@ scenario(
         );
         return;
       }
+      if (request.url?.startsWith("/v2/common/feeConfirm")) {
+        confirmFeeCount += 1;
+        response.writeHead(200, { "Content-Type": "application/json" });
+        response.end(
+          JSON.stringify({
+            code: 200,
+            data: {},
+            success: true,
+          }),
+        );
+        return;
+      }
       response.writeHead(404, { "Content-Type": "application/json" });
       response.end(JSON.stringify({ code: 404, success: false }));
     });
@@ -808,6 +825,17 @@ scenario(
       assert.equal(response.status, 200);
       assert.equal(detailQueryCount, 1);
       assert.equal(billQueryCount, 1);
+      const updatedOrder = await tradeOrderRepo.findById(orderSeed.order.id);
+      assert.ok(updatedOrder);
+      assert.equal(updatedOrder.status, "CANCELLED");
+      assert.ok(updatedOrder.closedAt);
+      assert.equal(updatedOrder.terminationAttempts.length, 1);
+      assert.equal(
+        updatedOrder.terminationAttempts[0]?.requestedBy,
+        "system:ride-hailing-provider",
+      );
+      assert.equal(updatedOrder.terminationAttempts[0]?.status, "APPROVED");
+      assert.equal(updatedOrder.terminationAttempts[0]?.resolutionPath, "RIDE_HAILING_FULFILLMENT");
       const updatedRide = await rideOrderRepo.findByOrderId(orderSeed.order.id as TradeOrderId);
       assert.equal(updatedRide?.executionPhase, "CANCELLED");
       assert.equal(updatedRide?.finalSettlementInput?.amountFen, 1270);
@@ -819,6 +847,47 @@ scenario(
       const lines = await billLineRepo.listByBillId(bill.id);
       assert.equal(lines.length, 1);
       assert.equal(lines[0]?.amountFen, 635);
+      const chargeLine = lines[0];
+      assert.ok(chargeLine);
+      const paymentProvider = await paymentProviderRepo.create({
+        providerType: "WECHAT_PAY",
+        instanceKey: `scenario-cancelled-ride-final-bill-${randomUUID()}`,
+        status: "ACTIVE",
+        displayName: "Scenario cancelled ride final bill payment provider",
+        clientId: `scenario-cancelled-ride-final-bill-${randomUUID()}`,
+        config: {
+          adapterMode: "WECHAT_PAY_API_V3",
+          appId: "wx-cancelled-ride-final-bill",
+          mchId: "mch-cancelled-ride-final-bill",
+          chargeMode: "H5",
+          endpointBaseUrl: null,
+          apiV3Key: "0123456789abcdef0123456789abcdef",
+          merchantCertificate: {
+            serialNo: "cancelled-ride-final-bill-serial",
+            privateKeyPem: "unused-in-this-scenario",
+            certificatePem: null,
+          },
+        },
+      });
+      const paymentProviderInstanceId = paymentProvider.id as PaymentProviderInstanceId;
+      const settledLine = await billLineRepo.markSettledFromProvider({
+        id: chargeLine.id,
+        paymentProviderInstanceId,
+        attemptCount: chargeLine.attemptCount,
+        settledAt: new Date(),
+      });
+      assert.ok(settledLine);
+
+      const settlementConsequence = await applyPaymentSettlementConsequence({
+        billLineId: chargeLine.id,
+      });
+
+      assert.deepEqual(settlementConsequence, {
+        applied: true,
+        reason: "RideHailing provider fee confirmed",
+        orderId: orderSeed.order.id,
+      });
+      assert.equal(confirmFeeCount, 1);
     } finally {
       await closeServer(fakeCaocao);
     }
@@ -913,6 +982,10 @@ scenario(
       assert.equal(response.status, 200);
       assert.equal(detailQueryCount, 1);
       assert.equal(billQueryCount, 1);
+      const updatedOrder = await tradeOrderRepo.findById(orderSeed.order.id);
+      assert.ok(updatedOrder);
+      assert.equal(updatedOrder.status, "CANCELLED");
+      assert.ok(updatedOrder.closedAt);
       const updatedRide = await rideOrderRepo.findByOrderId(orderSeed.order.id as TradeOrderId);
       assert.equal(updatedRide?.executionPhase, "CANCELLED");
       assert.equal(updatedRide?.finalSettlementInput, null);
diff --git a/tasks/ride-hailing-dispatch-timeout-order-status-diagnosis/00-task-packet.md b/tasks/ride-hailing-dispatch-timeout-order-status-diagnosis/00-task-packet.md
new file mode 100644
index 000000000..f4420e8b3
--- /dev/null
+++ b/tasks/ride-hailing-dispatch-timeout-order-status-diagnosis/00-task-packet.md
@@ -0,0 +1,101 @@
+# RideHailing Dispatch Timeout Order Status Diagnosis
+
+Date: 2026-06-30
+
+## Objective & Hypothesis
+
+- Reality: diagnose why a RideHailing order can show execution phase
+  `CANCELLED` while the base order status remains ongoing / `OPEN`.
+- User-stable reproduction: provider dispatch timeout causes cancellation.
+- Current hypothesis: provider sync persists RideHailing execution truth but does
+  not propagate terminal RideHailing cancellation into the Trade order lifecycle.
+
+## Guardrails Touched
+
+- Input route: `Reality`.
+- Active mode: `Diagnose`.
+- Durable owner candidates:
+  - Trade order lifecycle:
+    `apps/backend/src/domains/trade/`
+  - RideHailing provider execution truth:
+    `apps/backend/src/domains/ride-hailing/`
+  - user-visible order detail:
+    `apps/frontend/src/domains/commerce/ui/order-detail/`
+- No business code mutation before explicit user start.
+
+## Verification
+
+- Completed: traced dispatch-timeout / provider-cancelled status mapping.
+- Completed: traced base order status persistence during provider sync.
+- Completed: implemented provider-observed cancellation lifecycle propagation.
+- Completed: split RideHailing final bill payment consequence from Rental
+  prepaid `OPEN` gate.
+- Completed: added recurrence guards.
+
+## Current Understanding
+
+- Contract boundary from `docs/20-product-tdd/ecommerce-contracts.md`:
+  - Trade owns order lifecycle.
+  - RideHailing owns service execution truth.
+- Prior task evidence already noted an adjacent bug: terminal RideHailing phases
+  may leave base `order.status = OPEN`.
+- CaoCao cancellation-like provider statuses map to local RideHailing
+  `executionPhase = CANCELLED`.
+  - `4` = system cancel
+  - `10` = cancelled pending payment
+  - `13` = cancelled paid
+  - `14` = free cancel
+  - `20` = user cancel
+  - `21` = customer-service cancel
+  - `26` = driver cancel
+  - `27` = third-party cancel
+- Provider callback and order-detail polling both call
+  `syncRideHailingOrderWithProvider()`.
+- `syncRideHailingOrderWithProvider()` persists RideHailing execution phase,
+  driver, and vehicle snapshots, and only promotes base order status
+  `INITIATING -> OPEN`.
+- There is no provider-sync branch that propagates terminal
+  `executionPhase = CANCELLED` into Trade `order.status = CANCELLED`.
+- Manual/admin RideHailing cancellation uses the Trade termination mechanism and
+  does persist both:
+  - base `order.status = CANCELLED`
+  - `ride_hailing_orders.execution_phase = CANCELLED`
+- Therefore the observed split state is caused by an asymmetric lifecycle
+  propagation path:
+  - user/admin-initiated cancel closes Trade order
+  - provider-observed cancel only closes RideHailing execution phase
+- Frontend labels are direct projections:
+  - `order.status = OPEN` -> `进行中`
+  - `ride.executionPhase = CANCELLED` -> `已取消`
+  so the UI is revealing backend state inconsistency rather than inventing it.
+- Fix caveat:
+  - final bill materialization for RideHailing does not currently require base
+    order `OPEN`
+  - payment-settlement consequence does currently skip non-`OPEN` orders, so a
+    provider-cancelled order with non-zero final payable amount needs explicit
+    handling if provider fee confirmation must still happen after payment.
+
+## Next Step
+
+- Implementation completed:
+  - provider sync now closes `INITIATING` / `OPEN` RideHailing Trade orders when
+    the effective RideHailing execution phase is `CANCELLED`
+  - provider-observed cancellation records an approved termination attempt with
+    `requestedBy = system:ride-hailing-provider`
+  - `applyBillSettlementToOrder()` now routes RideHailing bills through final
+    settlement rules before applying the Rental-style `OPEN` prepaid gate
+  - cancelled RideHailing orders with final settlement input can still confirm
+    provider fee after final bill payment
+- Recurrence guards:
+  - `order-termination.test.ts` covers provider-observed RideHailing
+    cancellation and pending-attempt approval
+  - `caocao-callback-route.scenario.test.ts` covers cancelled callback closing
+    Trade order, final bill creation, and post-payment provider fee confirmation
+  - existing rental late-payment scenario continues to guard against cancelled
+    Rental orders starting fulfillment after late payment
+- Verification completed:
+  - `pnpm test:unit:backend -- apps/backend/src/domains/trade/services/order-termination.test.ts apps/backend/src/domains/trade/services/order-status.test.ts`
+  - `pnpm test:scenario:backend -- apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts apps/backend/tests/commerce/rental-order-persistence.scenario.test.ts`
+  - `pnpm check:type:backend`
+  - `pnpm check:lint:backend`
+  - `pnpm exec biome check apps/backend/src/domains/ride-hailing/use-cases/sync-ride-hailing-order-with-provider.ts apps/backend/src/domains/trade/use-cases/apply-bill-settlement-to-order.ts apps/backend/src/domains/trade/services/order-termination.ts apps/backend/src/domains/trade/services/order-termination.test.ts apps/backend/src/repositories/TradeOrderRepository.ts apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts`

From da62035a1224b439dca16b3553fa07dcf8d3b0cc Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Tue, 30 Jun 2026 21:18:25 +0800
Subject: [PATCH 82/94] fix(ride-hailing): realign dispatch binding and caocao
 candidates

- move dispatch provider binding from choice-set resolution to ride_hailing_orders.dispatch_binding

- submit CaoCao multi-candidate orderCarV2 requests with service_type_price

- cover fake CaoCao and system scenarios for multi-vehicle dispatch
---
 .../0084_ride_hailing_dispatch_binding.sql    |   2 +
 .../get-admin-ride-hailing-order-workspace.ts |   6 +-
 .../use-cases/order-workspace-view.ts         |   6 +-
 .../domains/ride-hailing/model/provider.ts    |  41 +++-
 .../services/caocao-provider.test.ts          | 120 ++++++++++
 .../ride-hailing/services/caocao-provider.ts  | 133 ++++++++++-
 .../use-cases/provider-execution-context.ts   |  32 ++-
 .../sync-ride-hailing-order-with-provider.ts  |  89 +++++++-
 apps/backend/src/domains/trade/model/order.ts |  10 +-
 .../domains/trade/model/ride-hailing-order.ts |  23 +-
 .../src/domains/trade/services/order-items.ts |   7 -
 ...el-ride-hailing-order-from-order-detail.ts |  64 +++---
 .../domains/trade/use-cases/create-order.ts   | 149 +++++++-----
 .../use-cases/ride-hailing-ordering-flow.ts   |  98 ++++----
 .../src/entities/ride-hailing-order.ts        |   4 +
 .../admin-ride-hailing-order.scenario.test.ts |  44 ++--
 .../caocao-callback-route.scenario.test.ts    | 133 ++++++-----
 docs/20-product-tdd/ecommerce-contracts.md    |  21 +-
 .../control/fake-caocao-control.openapi.yaml  |   5 +
 .../caocao-provider-minimal.openapi.yaml      |  22 +-
 packages/fake-caocao-server/src/routes.ts     |  73 +++++-
 .../fake-caocao-server/src/server.test.ts     |  49 ++++
 packages/fake-caocao-server/src/state.test.ts |   1 +
 packages/fake-caocao-server/src/state.ts      |  12 +
 .../00-task-packet.md                         | 213 ++++++++++++++++++
 .../ride-hailing-ordering.scenario.test.ts    |  54 +++--
 26 files changed, 1102 insertions(+), 309 deletions(-)
 create mode 100644 apps/backend/drizzle/0084_ride_hailing_dispatch_binding.sql
 create mode 100644 tasks/ride-hailing-choice-set-resolution-realignment/00-task-packet.md

diff --git a/apps/backend/drizzle/0084_ride_hailing_dispatch_binding.sql b/apps/backend/drizzle/0084_ride_hailing_dispatch_binding.sql
new file mode 100644
index 000000000..5176facab
--- /dev/null
+++ b/apps/backend/drizzle/0084_ride_hailing_dispatch_binding.sql
@@ -0,0 +1,2 @@
+alter table "ride_hailing_orders"
+  add column "dispatch_binding" jsonb default null;
diff --git a/apps/backend/src/domains/admin-ride-hailing-management/use-cases/get-admin-ride-hailing-order-workspace.ts b/apps/backend/src/domains/admin-ride-hailing-management/use-cases/get-admin-ride-hailing-order-workspace.ts
index 5f65e7189..6253155bf 100644
--- a/apps/backend/src/domains/admin-ride-hailing-management/use-cases/get-admin-ride-hailing-order-workspace.ts
+++ b/apps/backend/src/domains/admin-ride-hailing-management/use-cases/get-admin-ride-hailing-order-workspace.ts
@@ -3,7 +3,6 @@ import { RideHailingOrderRepository } from "../../../repositories/RideHailingOrd
 import { RideHailingProviderInstanceRepository } from "../../../repositories/RideHailingProviderInstanceRepository";
 import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository";
 import type { RideHailingProviderInstanceId } from "../../../entities/ride-hailing-provider";
-import { getRideHailingChoiceSetItem, getRideHailingProviderBinding } from "../../trade/services";
 import {
   toAdminRideHailingOrderRecordView,
   type AdminRideHailingOrderRecordView,
@@ -47,10 +46,7 @@ export async function getAdminRideHailingOrderWorkspace(): Promise<AdminRideHail
       const rideHailingOrder = typedOrderByOrderId.get(order.id);
       if (!rideHailingOrder) return [];
 
-      const rideChoiceSetItem = getRideHailingChoiceSetItem(order.items);
-      const providerBinding = rideChoiceSetItem
-        ? getRideHailingProviderBinding(rideChoiceSetItem)
-        : null;
+      const providerBinding = rideHailingOrder.dispatchBinding ?? null;
 
       return [
         toAdminRideHailingOrderRecordView({
diff --git a/apps/backend/src/domains/admin-ride-hailing-management/use-cases/order-workspace-view.ts b/apps/backend/src/domains/admin-ride-hailing-management/use-cases/order-workspace-view.ts
index 509ea77f1..12b10c721 100644
--- a/apps/backend/src/domains/admin-ride-hailing-management/use-cases/order-workspace-view.ts
+++ b/apps/backend/src/domains/admin-ride-hailing-management/use-cases/order-workspace-view.ts
@@ -2,7 +2,7 @@ import type { Bill } from "../../../entities/bill";
 import type { RideHailingOrder } from "../../../entities/ride-hailing-order";
 import type { RideHailingProviderInstance } from "../../../entities/ride-hailing-provider";
 import type { TradeOrder } from "../../../entities/trade-order";
-import type { RideHailingProviderBindingSnapshot } from "../../trade/model";
+import type { RideHailingDispatchBindingSnapshot } from "../../trade/model";
 
 export type AdminRideHailingProviderInstanceSummaryView = Pick<
   RideHailingProviderInstance,
@@ -17,7 +17,7 @@ export type AdminRideHailingBillSummaryView = Pick<
 export type AdminRideHailingOrderRecordView = {
   order: TradeOrder;
   rideHailingOrder: RideHailingOrder;
-  providerBinding: RideHailingProviderBindingSnapshot | null;
+  providerBinding: RideHailingDispatchBindingSnapshot | null;
   providerInstance: AdminRideHailingProviderInstanceSummaryView | null;
   bill: AdminRideHailingBillSummaryView | null;
 };
@@ -25,7 +25,7 @@ export type AdminRideHailingOrderRecordView = {
 export function toAdminRideHailingOrderRecordView(input: {
   order: TradeOrder;
   rideHailingOrder: RideHailingOrder;
-  providerBinding: RideHailingProviderBindingSnapshot | null;
+  providerBinding: RideHailingDispatchBindingSnapshot | null;
   providerInstance: RideHailingProviderInstance | null;
   bill: Bill | null;
 }): AdminRideHailingOrderRecordView {
diff --git a/apps/backend/src/domains/ride-hailing/model/provider.ts b/apps/backend/src/domains/ride-hailing/model/provider.ts
index 647e7ba01..fcfd7d3ae 100644
--- a/apps/backend/src/domains/ride-hailing/model/provider.ts
+++ b/apps/backend/src/domains/ride-hailing/model/provider.ts
@@ -90,6 +90,30 @@ export type RideHailingProviderVehicleQuote = {
   providerSnapshot: unknown;
 };
 
+export type RideHailingProviderCreateRidePlace = {
+  name: string;
+  address?: string | null;
+  latitude: number;
+  longitude: number;
+};
+
+export type RideHailingProviderCreateRideCandidate = {
+  candidateId: string;
+  providerVehicleTypeCode: string;
+  providerVehicleTypeName: string;
+  estimateAmountFen: number;
+  providerQuoteId: string | null;
+  providerQuoteExpiresAt?: string | null;
+  quoteAmountFen?: number | null;
+  providerSnapshot?: unknown;
+};
+
+export type RideHailingProviderCreateRideSubmission = {
+  submissionMode: "SINGLE_CANDIDATE" | "MULTI_CANDIDATE";
+  submittedCandidateIds: string[];
+  providerVehicleTypeCodes: string[];
+};
+
 export type RideHailingProviderCoordinate = {
   latitude: number;
   longitude: number;
@@ -124,6 +148,8 @@ export type RideHailingProviderNavigationRoute = {
 export type RideHailingProviderOrderDetail = {
   phase: string;
   statusLabel: string;
+  providerVehicleTypeCode?: string | null;
+  providerVehicleTypeName?: string | null;
   driver: {
     driverName: string;
     driverPhone: string;
@@ -146,7 +172,19 @@ export type RideHailingProviderFinalSettlementResult = {
 
 export type RideHailingProviderCreateRideInput = {
   orderId: string;
-  params: Record<string, string | number | boolean | null | undefined>;
+  callbackInfo?: string | null;
+  contactPhone: string;
+  departureAt: string | null;
+  passenger: {
+    name: string;
+    phone: string;
+  };
+  route: {
+    origin: RideHailingProviderCreateRidePlace;
+    waypoints: RideHailingProviderCreateRidePlace[];
+    destination: RideHailingProviderCreateRidePlace;
+  };
+  candidates: RideHailingProviderCreateRideCandidate[];
 };
 
 export type RideHailingProviderCancelInput = {
@@ -169,6 +207,7 @@ export type RideHailingProviderPort = {
   createRide(input: RideHailingProviderCreateRideInput): Promise<{
     providerOrderId: string;
     externalOrderId: string;
+    dispatchSubmission: RideHailingProviderCreateRideSubmission;
     providerSnapshot: unknown;
   }>;
   queryOrderDetail(input: { providerOrderId: string }): Promise<RideHailingProviderOrderDetail>;
diff --git a/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts b/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
index a274cfe50..3d2f02d57 100644
--- a/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
+++ b/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
@@ -277,6 +277,126 @@ describe("Caocao signer", () => {
   });
 });
 
+describe("Caocao create ride", () => {
+  it("submits multiple provider candidates through orderCarV2", async () => {
+    const requests: Array<{ body: string | null; url: string }> = [];
+    const fetchImpl: typeof fetch = async (input, init) => {
+      const requestUrl =
+        typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
+      const body =
+        typeof init?.body === "string"
+          ? init.body
+          : init?.body instanceof URLSearchParams
+            ? init.body.toString()
+            : null;
+      requests.push({
+        url: requestUrl,
+        body,
+      });
+      const url = new URL(requestUrl);
+      if (url.pathname.endsWith("/common/queryCity")) {
+        return new Response(
+          JSON.stringify({
+            code: 200,
+            data: { cityCode: "020" },
+            success: true,
+          }),
+          { status: 200 },
+        );
+      }
+      return new Response(
+        JSON.stringify({
+          code: 200,
+          data: {
+            orderNo: "CC123456",
+          },
+          success: true,
+        }),
+        { status: 200 },
+      );
+    };
+    const adapter = new CaocaoProviderAdapter({
+      providerInstance: caocaoProviderInstance(),
+      fetchImpl,
+    });
+
+    const created = await adapter.createRide({
+      orderId,
+      callbackInfo: "callback-info",
+      candidates: [
+        {
+          candidateId: "sku-5",
+          providerVehicleTypeCode: "5",
+          providerVehicleTypeName: "曹操专车",
+          estimateAmountFen: 6800,
+          providerQuoteId: "price-key-5",
+          quoteAmountFen: 6800,
+          providerSnapshot: null,
+        },
+        {
+          candidateId: "sku-3",
+          providerVehicleTypeCode: "3",
+          providerVehicleTypeName: "曹操快车",
+          estimateAmountFen: 4200,
+          providerQuoteId: "price-key-3",
+          quoteAmountFen: 4200,
+          providerSnapshot: null,
+        },
+      ],
+      contactPhone: "13800138000",
+      departureAt: "2026-06-29T03:00:00.000Z",
+      passenger: {
+        name: "乘客",
+        phone: "13800138000",
+      },
+      route: {
+        origin: {
+          name: "杭州东站",
+          address: "天城路1号",
+          latitude: 30.291,
+          longitude: 120.212,
+        },
+        waypoints: [],
+        destination: {
+          name: "灵隐寺",
+          address: "法云弄1号",
+          latitude: 30.24,
+          longitude: 120.102,
+        },
+      },
+    });
+
+    expect(requests).toHaveLength(2);
+    const createRequest = requests[1];
+    expect(createRequest).toBeDefined();
+    expect(new URL(createRequest?.url ?? "").pathname).toBe("/v2/common/orderCarV2");
+    const body = new URLSearchParams(createRequest?.body ?? "");
+    expect(body.get("is_simultaneously_call")).toBe("1");
+    expect(body.get("car_type")).toBeNull();
+    expect(body.get("estimate_price")).toBeNull();
+    expect(body.get("estimate_price_key")).toBeNull();
+    expect(JSON.parse(body.get("service_type_price") ?? "[]")).toEqual([
+      {
+        estimateKey: "price-key-5",
+        estimatePrice: 6800,
+        serviceType: 5,
+      },
+      {
+        estimateKey: "price-key-3",
+        estimatePrice: 4200,
+        serviceType: 3,
+      },
+    ]);
+    expect(body.get("passenger_name")).toBe("乘客");
+    expect(created.providerOrderId).toBe("CC123456");
+    expect(created.dispatchSubmission).toEqual({
+      submissionMode: "MULTI_CANDIDATE",
+      submittedCandidateIds: ["sku-5", "sku-3"],
+      providerVehicleTypeCodes: ["5", "3"],
+    });
+  });
+});
+
 describe("Caocao external order id", () => {
   it("roundtrips order UUID through a Caocao-compatible compact id", () => {
     const externalOrderId = encodeCaocaoExternalOrderId(orderId);
diff --git a/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts b/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
index addff3c62..7199e133c 100644
--- a/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
+++ b/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
@@ -9,7 +9,9 @@ import type {
   CaocaoSignedParams,
   RideHailingProviderCancelInput,
   RideHailingProviderConfirmFeeInput,
+  RideHailingProviderCreateRideCandidate,
   RideHailingProviderCreateRideInput,
+  RideHailingProviderCreateRideSubmission,
   RideHailingProviderEstimateInput,
   RideHailingProviderFinalSettlementResult,
   RideHailingProviderNavigationRoute,
@@ -32,6 +34,25 @@ type RequiredCaocaoEstimateParams = {
   to_latitude: number;
   to_longitude: number;
 };
+type CaocaoCreateRideSubmissionParams =
+  | {
+      mode: "SINGLE_CANDIDATE";
+      params: {
+        car_type: string;
+        estimate_price: number;
+        estimate_price_key: string;
+        is_simultaneously_call: "0";
+      };
+      submittedCandidates: RideHailingProviderCreateRideCandidate[];
+    }
+  | {
+      mode: "MULTI_CANDIDATE";
+      params: {
+        is_simultaneously_call: "1";
+        service_type_price: string;
+      };
+      submittedCandidates: RideHailingProviderCreateRideCandidate[];
+    };
 
 const EXTERNAL_ORDER_ID_PREFIX = "rh";
 const UUID_BASE36_ALPHABET = /^[0-9a-z]+$/;
@@ -316,6 +337,18 @@ const parseCaocaoOrderDetail = (data: Record<string, unknown>): RideHailingProvi
     "carBrand",
   ]);
   const color = readOptionalStringField(vehicleRaw, ["color", "vehicleColor", "vehicle_color"]);
+  const providerVehicleTypeCode = readOptionalStringField(basicOrder, [
+    "serviceType",
+    "service_type",
+    "carType",
+    "car_type",
+  ]);
+  const providerVehicleTypeName = readOptionalStringField(basicOrder, [
+    "serviceTypeName",
+    "service_type_name",
+    "carTypeName",
+    "car_type_name",
+  ]);
 
   return {
     driver:
@@ -326,6 +359,8 @@ const parseCaocaoOrderDetail = (data: Record<string, unknown>): RideHailingProvi
           }
         : null,
     phase,
+    providerVehicleTypeCode,
+    providerVehicleTypeName,
     providerSnapshot: data,
     statusLabel: buildCaocaoStatusLabel(phase),
     vehicle:
@@ -419,6 +454,65 @@ const selectCaocaoEstimateItem = (
   throw new Error("Caocao estimate response data must be an object or object array");
 };
 
+const assertCaocaoCreateRideCandidate = (
+  candidate: RideHailingProviderCreateRideCandidate,
+): void => {
+  const serviceType = Number(candidate.providerVehicleTypeCode);
+  if (!Number.isInteger(serviceType)) {
+    throw new Error("Caocao createRide requires a numeric provider vehicle type code");
+  }
+  if (!candidate.providerQuoteId) {
+    throw new Error("Caocao createRide requires a provider quote id");
+  }
+};
+
+const caocaoServiceType = (candidate: RideHailingProviderCreateRideCandidate): number =>
+  Number(candidate.providerVehicleTypeCode);
+
+const buildCaocaoServiceTypePrice = (
+  candidates: RideHailingProviderCreateRideCandidate[],
+): string =>
+  JSON.stringify(
+    candidates.map((candidate) => ({
+      estimateKey: candidate.providerQuoteId,
+      estimatePrice: candidate.estimateAmountFen,
+      serviceType: caocaoServiceType(candidate),
+    })),
+  );
+
+const buildCaocaoCreateRideSubmissionParams = (
+  candidates: RideHailingProviderCreateRideCandidate[],
+): CaocaoCreateRideSubmissionParams => {
+  if (candidates.length === 0) {
+    throw new Error("Caocao createRide requires at least one vehicle candidate");
+  }
+  for (const candidate of candidates) {
+    assertCaocaoCreateRideCandidate(candidate);
+  }
+  if (candidates.length === 1) {
+    const candidate = candidates[0]!;
+    return {
+      mode: "SINGLE_CANDIDATE",
+      params: {
+        car_type: candidate.providerVehicleTypeCode,
+        estimate_price: candidate.estimateAmountFen,
+        estimate_price_key: candidate.providerQuoteId!,
+        is_simultaneously_call: "0",
+      },
+      submittedCandidates: candidates,
+    };
+  }
+
+  return {
+    mode: "MULTI_CANDIDATE",
+    params: {
+      is_simultaneously_call: "1",
+      service_type_price: buildCaocaoServiceTypePrice(candidates),
+    },
+    submittedCandidates: candidates,
+  };
+};
+
 const normalizeCaocaoParams = (params: CaocaoParamInput): CaocaoSignedParams => {
   const normalized: CaocaoSignedParams = {};
   for (const [key, value] of Object.entries(params)) {
@@ -772,12 +866,27 @@ export class CaocaoProviderAdapter implements RideHailingProviderPort {
   async createRide(input: RideHailingProviderCreateRideInput): Promise<{
     providerOrderId: string;
     externalOrderId: string;
+    dispatchSubmission: RideHailingProviderCreateRideSubmission;
     providerSnapshot: unknown;
   }> {
     const externalOrderId = this.buildExternalOrderId(input.orderId);
+    const submission = buildCaocaoCreateRideSubmissionParams(input.candidates);
     const requestParams = await this.buildCreateRideRequestParams({
-      ...input.params,
+      callback_info: input.callbackInfo,
+      caller_phone: input.contactPhone,
+      departure_at: input.departureAt,
+      end_address: input.route.destination.address,
+      end_name: input.route.destination.name,
       ext_order_id: externalOrderId,
+      from_latitude: input.route.origin.latitude,
+      from_longitude: input.route.origin.longitude,
+      passenger_name: input.passenger.name,
+      passenger_phone: input.passenger.phone,
+      start_address: input.route.origin.address,
+      start_name: input.route.origin.name,
+      to_latitude: input.route.destination.latitude,
+      to_longitude: input.route.destination.longitude,
+      ...submission.params,
     });
     const data = await this.request<Record<string, unknown>>(
       "POST",
@@ -787,6 +896,15 @@ export class CaocaoProviderAdapter implements RideHailingProviderPort {
     return {
       providerOrderId: readRequiredStringField(data, "orderNo"),
       externalOrderId,
+      dispatchSubmission: {
+        submissionMode: submission.mode,
+        submittedCandidateIds: submission.submittedCandidates.map(
+          (candidate) => candidate.candidateId,
+        ),
+        providerVehicleTypeCodes: submission.submittedCandidates.map(
+          (candidate) => candidate.providerVehicleTypeCode,
+        ),
+      },
       providerSnapshot: data,
     };
   }
@@ -985,25 +1103,30 @@ export class CaocaoProviderAdapter implements RideHailingProviderPort {
         longitude: fromLongitude,
       }));
 
+    const isSimultaneouslyCall = readOptionalParamString(params, ["is_simultaneously_call"]) ?? "0";
     const requestParams: CaocaoParamInput = {
       callback_info: readOptionalParamString(params, ["callback_info"]),
       caller_phone: readRequiredParamString(params, ["caller_phone"]),
-      car_type: readRequiredParamString(params, ["car_type"]),
       city_code: cityCode,
       end_address: readRequiredParamString(params, ["end_address"]),
       end_name: readRequiredParamString(params, ["end_name"]),
-      estimate_price: readRequiredParamNumber(params, ["estimate_price"]),
-      estimate_price_key: readRequiredParamString(params, ["estimate_price_key"]),
       ext_order_id: readRequiredParamString(params, ["ext_order_id"]),
       from_latitude: fromLatitude,
       from_longitude: fromLongitude,
-      is_simultaneously_call: readOptionalParamString(params, ["is_simultaneously_call"]) ?? "0",
+      is_simultaneously_call: isSimultaneouslyCall,
       order_type: readOptionalParamNumber(params, ["order_type"]) ?? 1,
       start_address: readRequiredParamString(params, ["start_address"]),
       start_name: readRequiredParamString(params, ["start_name"]),
       to_latitude: readRequiredParamNumber(params, ["to_latitude"]),
       to_longitude: readRequiredParamNumber(params, ["to_longitude"]),
     };
+    if (isSimultaneouslyCall === "1") {
+      requestParams.service_type_price = readRequiredParamString(params, ["service_type_price"]);
+    } else {
+      requestParams.car_type = readRequiredParamString(params, ["car_type"]);
+      requestParams.estimate_price = readRequiredParamNumber(params, ["estimate_price"]);
+      requestParams.estimate_price_key = readRequiredParamString(params, ["estimate_price_key"]);
+    }
 
     const departureTime =
       readOptionalParamString(params, ["departure_time"]) ??
diff --git a/apps/backend/src/domains/ride-hailing/use-cases/provider-execution-context.ts b/apps/backend/src/domains/ride-hailing/use-cases/provider-execution-context.ts
index 637c6b18b..a3cdffb1a 100644
--- a/apps/backend/src/domains/ride-hailing/use-cases/provider-execution-context.ts
+++ b/apps/backend/src/domains/ride-hailing/use-cases/provider-execution-context.ts
@@ -13,7 +13,6 @@ import type { RepositoryExecutor } from "../../../repositories/_executor";
 import { RideHailingOrderRepository } from "../../../repositories/RideHailingOrderRepository";
 import { RideHailingProviderInstanceRepository } from "../../../repositories/RideHailingProviderInstanceRepository";
 import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository";
-import { getRideHailingChoiceSetItem, getRideHailingProviderBinding } from "../../trade/services";
 import type { RideHailingProviderPort } from "../model";
 import { createRideHailingProviderPort } from "../services";
 
@@ -87,31 +86,30 @@ export async function loadRideHailingProviderExecutionContext(
     });
   }
 
-  const choiceSetItem = getRideHailingChoiceSetItem(order.items);
-  const providerBinding = choiceSetItem ? getRideHailingProviderBinding(choiceSetItem) : null;
-  if (!providerBinding?.providerOrderId) {
+  const dispatchBinding = rideOrder.dispatchBinding;
+  if (!dispatchBinding?.providerOrderId) {
     logCommerceOrderDetailDebug(input.debug, "ride-provider-context.binding-missing", {
       localOrderId: order.id,
       localOrderStatus: order.status,
       rideExecutionPhase: rideOrder.executionPhase,
-      providerInstanceId: providerBinding?.providerInstanceId ?? null,
-      providerOrderId: providerBinding?.providerOrderId ?? null,
+      providerInstanceId: dispatchBinding?.providerInstanceId ?? null,
+      providerOrderId: dispatchBinding?.providerOrderId ?? null,
     });
     return throwHttpProblem({
       status: 409,
-      detail: "RideHailing order is missing provider binding",
+      detail: "RideHailing order is missing dispatch binding",
     });
   }
 
   if (
     input.expectedProviderInstanceId &&
-    providerBinding.providerInstanceId !== input.expectedProviderInstanceId
+    dispatchBinding.providerInstanceId !== input.expectedProviderInstanceId
   ) {
     logCommerceOrderDetailDebug(input.debug, "ride-provider-context.instance-mismatch", {
       localOrderId: order.id,
       expectedProviderInstanceId: input.expectedProviderInstanceId,
-      actualProviderInstanceId: providerBinding.providerInstanceId,
-      providerOrderId: providerBinding.providerOrderId,
+      actualProviderInstanceId: dispatchBinding.providerInstanceId,
+      providerOrderId: dispatchBinding.providerOrderId,
     });
     return throwHttpProblem({
       status: 409,
@@ -121,13 +119,13 @@ export async function loadRideHailingProviderExecutionContext(
 
   if (
     input.expectedProviderOrderId &&
-    providerBinding.providerOrderId !== input.expectedProviderOrderId
+    dispatchBinding.providerOrderId !== input.expectedProviderOrderId
   ) {
     logCommerceOrderDetailDebug(input.debug, "ride-provider-context.order-mismatch", {
       localOrderId: order.id,
-      providerInstanceId: providerBinding.providerInstanceId,
+      providerInstanceId: dispatchBinding.providerInstanceId,
       expectedProviderOrderId: input.expectedProviderOrderId,
-      actualProviderOrderId: providerBinding.providerOrderId,
+      actualProviderOrderId: dispatchBinding.providerOrderId,
     });
     return throwHttpProblem({
       status: 409,
@@ -136,13 +134,13 @@ export async function loadRideHailingProviderExecutionContext(
   }
 
   const providerInstance = await providerRepo.findById(
-    providerBinding.providerInstanceId as RideHailingProviderInstanceId,
+    dispatchBinding.providerInstanceId as RideHailingProviderInstanceId,
   );
   if (!providerInstance || providerInstance.status !== "ACTIVE") {
     logCommerceOrderDetailDebug(input.debug, "ride-provider-context.provider-missing", {
       localOrderId: order.id,
-      providerInstanceId: providerBinding.providerInstanceId,
-      providerOrderId: providerBinding.providerOrderId,
+      providerInstanceId: dispatchBinding.providerInstanceId,
+      providerOrderId: dispatchBinding.providerOrderId,
       foundProviderId: providerInstance?.id ?? null,
       foundProviderStatus: providerInstance?.status ?? null,
     });
@@ -156,7 +154,7 @@ export async function loadRideHailingProviderExecutionContext(
     order,
     rideOrder,
     providerInstance,
-    providerOrderId: providerBinding.providerOrderId,
+    providerOrderId: dispatchBinding.providerOrderId,
     port: createRideHailingProviderPort({ providerInstance }),
   };
 
diff --git a/apps/backend/src/domains/ride-hailing/use-cases/sync-ride-hailing-order-with-provider.ts b/apps/backend/src/domains/ride-hailing/use-cases/sync-ride-hailing-order-with-provider.ts
index e0d28975a..077fa21c9 100644
--- a/apps/backend/src/domains/ride-hailing/use-cases/sync-ride-hailing-order-with-provider.ts
+++ b/apps/backend/src/domains/ride-hailing/use-cases/sync-ride-hailing-order-with-provider.ts
@@ -9,7 +9,16 @@ import { db } from "../../../lib/db";
 import { throwHttpProblem } from "../../../lib/problem-details";
 import { RideHailingOrderRepository } from "../../../repositories/RideHailingOrderRepository";
 import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository";
-import { closeRideHailingOrderFromProviderCancellation } from "../../trade/services";
+import type {
+  ChoiceSetOrderItemSnapshot,
+  RideHailingChoiceSetResolutionSnapshot,
+  RideHailingDispatchBindingSnapshot,
+  RideHailingExecutionPhase,
+} from "../../trade/model";
+import {
+  closeRideHailingOrderFromProviderCancellation,
+  getRideHailingChoiceSetItem,
+} from "../../trade/services";
 import type {
   RideHailingProviderFinalSettlementResult,
   RideHailingProviderOrderDetail,
@@ -42,12 +51,20 @@ const summarizeProviderDetail = (
 ): Record<string, unknown> => ({
   providerPhase: detail.phase,
   providerStatusLabel: detail.statusLabel,
+  providerVehicleTypeCode: detail.providerVehicleTypeCode ?? null,
+  providerVehicleTypeName: detail.providerVehicleTypeName ?? null,
   providerDriverName: detail.driver?.driverName ?? null,
   providerVehiclePlate: detail.vehicle?.plate ?? null,
   providerHasVehicleLocation: detail.vehicleLocation != null,
 });
 
 const terminalFinalSettlementPhases = new Set(["FINISHED", "CANCELLED"]);
+const providerConfirmedServiceVehiclePhases = new Set<RideHailingExecutionPhase>([
+  "ACCEPTED",
+  "ARRIVED_AT_PICKUP",
+  "IN_TRIP",
+  "FINISHED",
+]);
 
 const isTerminalFinalSettlementPhase = (phase: string | null | undefined): boolean =>
   phase !== null && phase !== undefined && terminalFinalSettlementPhases.has(phase);
@@ -60,6 +77,40 @@ const shouldAttemptTerminalFinalSettlementQuery = (input: {
 
 const buildProviderCancellationAttemptId = (): string => `term_provider_cancel_${randomUUID()}`;
 
+const buildProviderConfirmedChoiceSetResolution = (input: {
+  choiceSetItem: ChoiceSetOrderItemSnapshot;
+  dispatchBinding: RideHailingDispatchBindingSnapshot;
+  providerDetail: RideHailingProviderOrderDetail;
+  resolvedAt: string;
+}): RideHailingChoiceSetResolutionSnapshot | null => {
+  if (input.choiceSetItem.resolution) return null;
+  const submittedCandidate = input.providerDetail.providerVehicleTypeCode
+    ? input.dispatchBinding.submittedCandidates.find(
+        (candidate) =>
+          candidate.providerVehicleTypeCode === input.providerDetail.providerVehicleTypeCode,
+      )
+    : input.dispatchBinding.submittedCandidates.length === 1
+      ? input.dispatchBinding.submittedCandidates[0]
+      : null;
+  if (!submittedCandidate) {
+    return null;
+  }
+  const candidate = input.choiceSetItem.candidates.find(
+    (item) => item.sku.id === submittedCandidate.skuId,
+  );
+  if (!candidate) return null;
+  return {
+    sku: candidate.sku,
+    providerVehicleTypeCode: submittedCandidate.providerVehicleTypeCode,
+    providerVehicleTypeName: submittedCandidate.providerVehicleTypeName,
+    quoteSnapshot: submittedCandidate.quoteSnapshot,
+    source: "PROVIDER_ACCEPTED",
+    candidateRelation: "IN_CANDIDATES",
+    reason: null,
+    resolvedAt: input.resolvedAt,
+  };
+};
+
 export async function syncRideHailingOrderWithProvider(input: {
   orderId: TradeOrderId;
   expectedProviderInstanceId?: string | null;
@@ -221,6 +272,42 @@ export async function syncRideHailingOrderWithProvider(input: {
       });
     }
 
+    const choiceSetItem = getRideHailingChoiceSetItem(transactionalContext.order.items);
+    if (
+      choiceSetItem &&
+      transactionalContext.rideOrder.dispatchBinding &&
+      providerConfirmedServiceVehiclePhases.has(effectiveExecutionPhase)
+    ) {
+      const resolution = buildProviderConfirmedChoiceSetResolution({
+        choiceSetItem,
+        dispatchBinding: transactionalContext.rideOrder.dispatchBinding,
+        providerDetail,
+        resolvedAt: new Date().toISOString(),
+      });
+      if (resolution) {
+        await tradeOrderRepo.replaceItems(
+          transactionalContext.order.id,
+          transactionalContext.order.items.map((item) =>
+            item.kind === "CHOICE_SET" && item.itemId === choiceSetItem.itemId
+              ? {
+                  ...choiceSetItem,
+                  resolution,
+                }
+              : item,
+          ),
+        );
+        mutatedInTransaction = true;
+        logCommerceOrderDetailDebug(input.debug, "ride-provider-sync.tx.persisted-resolution", {
+          localOrderId: transactionalContext.order.id,
+          providerOrderId: transactionalContext.providerOrderId,
+          trigger: input.trigger,
+          executionPhase: effectiveExecutionPhase,
+          providerVehicleTypeCode: resolution.providerVehicleTypeCode ?? null,
+          providerVehicleTypeName: resolution.providerVehicleTypeName ?? null,
+        });
+      }
+    }
+
     if (
       effectiveExecutionPhase === "CANCELLED" &&
       (transactionalContext.order.status === "INITIATING" ||
diff --git a/apps/backend/src/domains/trade/model/order.ts b/apps/backend/src/domains/trade/model/order.ts
index 9ec1a82b9..0403c3cff 100644
--- a/apps/backend/src/domains/trade/model/order.ts
+++ b/apps/backend/src/domains/trade/model/order.ts
@@ -101,20 +101,12 @@ export type RideHailingChoiceSetCandidateSnapshot = {
   quoteSnapshot: RideHailingQuoteSnapshot;
 };
 
-export type RideHailingProviderBindingSnapshot = {
-  providerInstanceId: string;
-  providerType?: string | null;
-  providerOrderId: string;
-  providerSnapshot?: unknown;
-};
-
 export type RideHailingChoiceSetResolutionSnapshot = {
   sku?: SkuSnapshot | null;
   providerVehicleTypeCode?: string | null;
   providerVehicleTypeName?: string | null;
   quoteSnapshot?: RideHailingQuoteSnapshot | null;
-  providerBinding?: RideHailingProviderBindingSnapshot | null;
-  source: "DISPATCH_POLICY" | "PROVIDER_ACCEPTED" | "PROVIDER_CALLBACK";
+  source: "PROVIDER_ACCEPTED" | "PROVIDER_CALLBACK";
   candidateRelation: "IN_CANDIDATES" | "PROVIDER_UPGRADE" | "PROVIDER_SUBSTITUTION";
   reason?: string | null;
   resolvedAt: string;
diff --git a/apps/backend/src/domains/trade/model/ride-hailing-order.ts b/apps/backend/src/domains/trade/model/ride-hailing-order.ts
index 2ef7fad11..1f49f7f50 100644
--- a/apps/backend/src/domains/trade/model/ride-hailing-order.ts
+++ b/apps/backend/src/domains/trade/model/ride-hailing-order.ts
@@ -1,4 +1,4 @@
-import type { TradeOrder } from "./order";
+import type { RideHailingQuoteSnapshot, TradeOrder } from "./order";
 
 export type RideHailingCoordinateSnapshot = {
   latitude: number;
@@ -57,6 +57,26 @@ export type RideHailingFinalSettlementInput = {
   providerSnapshot?: unknown;
 };
 
+export type RideHailingDispatchSubmittedCandidateSnapshot = {
+  skuId: number;
+  spuId: number;
+  displayName: string;
+  providerVehicleTypeCode: string;
+  providerVehicleTypeName: string;
+  quoteSnapshot: RideHailingQuoteSnapshot;
+};
+
+export type RideHailingDispatchBindingSnapshot = {
+  providerInstanceId: string;
+  providerType?: string | null;
+  providerOrderId: string;
+  externalOrderId?: string | null;
+  submittedAt: string;
+  submissionMode: "SINGLE_CANDIDATE" | "MULTI_CANDIDATE";
+  submittedCandidates: RideHailingDispatchSubmittedCandidateSnapshot[];
+  providerSnapshot?: unknown;
+};
+
 export type RideHailingOrder = Omit<TradeOrder, "family"> & {
   family: "RIDE_HAILING";
   routeSnapshot: RideHailingRouteSnapshot;
@@ -66,5 +86,6 @@ export type RideHailingOrder = Omit<TradeOrder, "family"> & {
   executionPhase: RideHailingExecutionPhase;
   driverSnapshot?: RideHailingDriverSnapshot | null;
   vehicleSnapshot?: RideHailingVehicleSnapshot | null;
+  dispatchBinding?: RideHailingDispatchBindingSnapshot | null;
   finalSettlementInput?: RideHailingFinalSettlementInput | null;
 };
diff --git a/apps/backend/src/domains/trade/services/order-items.ts b/apps/backend/src/domains/trade/services/order-items.ts
index eba5d37fb..b5a89ed3c 100644
--- a/apps/backend/src/domains/trade/services/order-items.ts
+++ b/apps/backend/src/domains/trade/services/order-items.ts
@@ -3,7 +3,6 @@ import type {
   ChoiceSetOrderItemSnapshot,
   FixedOrderItemSnapshot,
   OrderItemSnapshot,
-  RideHailingProviderBindingSnapshot,
   SkuSnapshot,
 } from "../model";
 import type { FixedTotalPricingModel, PricingModel } from "../../merchandising";
@@ -82,9 +81,3 @@ export function getRideHailingChoiceSetItem(
 export function getRideHailingResolvedSku(item: ChoiceSetOrderItemSnapshot): SkuSnapshot | null {
   return item.resolution?.sku ?? null;
 }
-
-export function getRideHailingProviderBinding(
-  item: ChoiceSetOrderItemSnapshot,
-): RideHailingProviderBindingSnapshot | null {
-  return item.resolution?.providerBinding ?? null;
-}
diff --git a/apps/backend/src/domains/trade/use-cases/cancel-ride-hailing-order-from-order-detail.ts b/apps/backend/src/domains/trade/use-cases/cancel-ride-hailing-order-from-order-detail.ts
index fd08d599f..29c058f3b 100644
--- a/apps/backend/src/domains/trade/use-cases/cancel-ride-hailing-order-from-order-detail.ts
+++ b/apps/backend/src/domains/trade/use-cases/cancel-ride-hailing-order-from-order-detail.ts
@@ -19,8 +19,6 @@ import {
 import {
   appendTerminationAttempt,
   approveTerminationAttempt,
-  getRideHailingChoiceSetItem,
-  getRideHailingProviderBinding,
   markTerminationAttemptResolving,
   toTradeOrderModel,
 } from "../services";
@@ -202,19 +200,16 @@ export async function queryRideHailingCancellationFeeFromOrderDetail(input: {
     });
   }
 
-  const rideChoiceSetItem = getRideHailingChoiceSetItem(syncedOrderRecord.items);
-  const providerBinding = rideChoiceSetItem
-    ? getRideHailingProviderBinding(rideChoiceSetItem)
-    : null;
-  if (!providerBinding?.providerOrderId) {
+  const dispatchBinding = syncedRideOrder.dispatchBinding;
+  if (!dispatchBinding?.providerOrderId) {
     return throwHttpProblem({
       status: 409,
-      detail: "RideHailing order is missing provider binding",
+      detail: "RideHailing order is missing dispatch binding",
     });
   }
 
   const providerInstance = await providerRepo.findById(
-    providerBinding.providerInstanceId as RideHailingProviderInstanceId,
+    dispatchBinding.providerInstanceId as RideHailingProviderInstanceId,
   );
   if (!providerInstance || providerInstance.status !== "ACTIVE") {
     return throwHttpProblem({
@@ -227,19 +222,19 @@ export async function queryRideHailingCancellationFeeFromOrderDetail(input: {
   logCommerceOrderDetailDebug(input.debug, "ride-cancel-fee-preview.provider-request.start", {
     ...summarizeOrderRecord(syncedOrderRecord),
     ...summarizeRideOrder(syncedRideOrder),
-    providerInstanceId: providerBinding.providerInstanceId,
-    providerOrderId: providerBinding.providerOrderId,
+    providerInstanceId: dispatchBinding.providerInstanceId,
+    providerOrderId: dispatchBinding.providerOrderId,
   });
 
   try {
     const preview = await port.queryCancelFee({
-      providerOrderId: providerBinding.providerOrderId,
+      providerOrderId: dispatchBinding.providerOrderId,
     });
     logCommerceOrderDetailDebug(input.debug, "ride-cancel-fee-preview.provider-request.success", {
       ...summarizeOrderRecord(syncedOrderRecord),
       ...summarizeRideOrder(syncedRideOrder),
-      providerInstanceId: providerBinding.providerInstanceId,
-      providerOrderId: providerBinding.providerOrderId,
+      providerInstanceId: dispatchBinding.providerInstanceId,
+      providerOrderId: dispatchBinding.providerOrderId,
       cancelFeeFen: preview.cancelFeeFen,
     });
 
@@ -252,8 +247,8 @@ export async function queryRideHailingCancellationFeeFromOrderDetail(input: {
     logCommerceOrderDetailDebug(input.debug, "ride-cancel-fee-preview.provider-request.error", {
       ...summarizeOrderRecord(syncedOrderRecord),
       ...summarizeRideOrder(syncedRideOrder),
-      providerInstanceId: providerBinding.providerInstanceId,
-      providerOrderId: providerBinding.providerOrderId,
+      providerInstanceId: dispatchBinding.providerInstanceId,
+      providerOrderId: dispatchBinding.providerOrderId,
       error:
         error instanceof Error
           ? {
@@ -424,38 +419,35 @@ async function cancelRideHailingOrder(input: {
     });
   }
 
-  const rideChoiceSetItem = getRideHailingChoiceSetItem(syncedOrderRecord.items);
-  const providerBinding = rideChoiceSetItem
-    ? getRideHailingProviderBinding(rideChoiceSetItem)
-    : null;
-  if (!providerBinding?.providerOrderId) {
+  const dispatchBinding = syncedRideOrder.dispatchBinding;
+  if (!dispatchBinding?.providerOrderId) {
     logCommerceOrderDetailDebug(input.debug, "ride-cancel.binding-missing", {
       ...summarizeOrderRecord(syncedOrderRecord),
       ...summarizeRideOrder(syncedRideOrder),
-      providerInstanceId: providerBinding?.providerInstanceId ?? null,
-      providerOrderId: providerBinding?.providerOrderId ?? null,
+      providerInstanceId: dispatchBinding?.providerInstanceId ?? null,
+      providerOrderId: dispatchBinding?.providerOrderId ?? null,
     });
     return throwHttpProblem({
       status: 409,
-      detail: "RideHailing order is missing provider binding",
+      detail: "RideHailing order is missing dispatch binding",
     });
   }
 
   logCommerceOrderDetailDebug(input.debug, "ride-cancel.binding-loaded", {
     ...summarizeOrderRecord(syncedOrderRecord),
     ...summarizeRideOrder(syncedRideOrder),
-    providerInstanceId: providerBinding.providerInstanceId,
-    providerOrderId: providerBinding.providerOrderId,
+    providerInstanceId: dispatchBinding.providerInstanceId,
+    providerOrderId: dispatchBinding.providerOrderId,
   });
 
   const providerInstance = await providerRepo.findById(
-    providerBinding.providerInstanceId as RideHailingProviderInstanceId,
+    dispatchBinding.providerInstanceId as RideHailingProviderInstanceId,
   );
   if (!providerInstance || providerInstance.status !== "ACTIVE") {
     logCommerceOrderDetailDebug(input.debug, "ride-cancel.provider-missing", {
       ...summarizeOrderRecord(syncedOrderRecord),
-      providerInstanceId: providerBinding.providerInstanceId,
-      providerOrderId: providerBinding.providerOrderId,
+      providerInstanceId: dispatchBinding.providerInstanceId,
+      providerOrderId: dispatchBinding.providerOrderId,
       foundProviderId: providerInstance?.id ?? null,
       foundProviderStatus: providerInstance?.status ?? null,
     });
@@ -469,8 +461,8 @@ async function cancelRideHailingOrder(input: {
   logCommerceOrderDetailDebug(input.debug, "ride-cancel.provider-request.start", {
     ...summarizeOrderRecord(syncedOrderRecord),
     ...summarizeRideOrder(syncedRideOrder),
-    providerInstanceId: providerBinding.providerInstanceId,
-    providerOrderId: providerBinding.providerOrderId,
+    providerInstanceId: dispatchBinding.providerInstanceId,
+    providerOrderId: dispatchBinding.providerOrderId,
     actorAuthority: input.actor.authority,
     providerWhoCancel: input.actor.providerWhoCancel,
   });
@@ -478,7 +470,7 @@ async function cancelRideHailingOrder(input: {
   let providerCancellation: Awaited<ReturnType<typeof port.cancelRide>>;
   try {
     providerCancellation = await port.cancelRide({
-      providerOrderId: providerBinding.providerOrderId,
+      providerOrderId: dispatchBinding.providerOrderId,
       cancelCode: 12,
       cancelReason: input.actor.providerCancelReason,
       whoCancel: input.actor.providerWhoCancel,
@@ -486,8 +478,8 @@ async function cancelRideHailingOrder(input: {
   } catch (error) {
     logCommerceOrderDetailDebug(input.debug, "ride-cancel.provider-request.error", {
       ...summarizeOrderRecord(syncedOrderRecord),
-      providerInstanceId: providerBinding.providerInstanceId,
-      providerOrderId: providerBinding.providerOrderId,
+      providerInstanceId: dispatchBinding.providerInstanceId,
+      providerOrderId: dispatchBinding.providerOrderId,
       error:
         error instanceof Error
           ? {
@@ -502,8 +494,8 @@ async function cancelRideHailingOrder(input: {
 
   logCommerceOrderDetailDebug(input.debug, "ride-cancel.provider-request.success", {
     ...summarizeOrderRecord(syncedOrderRecord),
-    providerInstanceId: providerBinding.providerInstanceId,
-    providerOrderId: providerBinding.providerOrderId,
+    providerInstanceId: dispatchBinding.providerInstanceId,
+    providerOrderId: dispatchBinding.providerOrderId,
     cancelFeeFen: providerCancellation.cancelFeeFen,
   });
   const decidedAt = new Date().toISOString();
diff --git a/apps/backend/src/domains/trade/use-cases/create-order.ts b/apps/backend/src/domains/trade/use-cases/create-order.ts
index 95c706d29..afd90967f 100644
--- a/apps/backend/src/domains/trade/use-cases/create-order.ts
+++ b/apps/backend/src/domains/trade/use-cases/create-order.ts
@@ -48,7 +48,7 @@ import type {
   RentalRegistrant,
   RideHailingChoiceSetCandidateSnapshot,
   RideHailingChoiceSetResolutionSnapshot,
-  RideHailingProviderBindingSnapshot,
+  RideHailingDispatchBindingSnapshot,
   RideHailingRiderSnapshot,
   RideHailingQuoteSnapshot,
   RideHailingRouteSnapshot,
@@ -167,7 +167,9 @@ type SelectedRideContext = {
   offer: Offer;
   itemId: string;
   candidates: RideCandidateContext[];
-  dispatchCandidate: RideCandidateContext;
+  dispatchProviderCandidates: RideCandidateContext[];
+  dispatchProviderInstanceId: string;
+  pricingCandidate: RideCandidateContext;
   pricingSnapshot: OrderPricingSnapshot;
   listingContext: RideHailingQuoteListingContextSnapshot;
 };
@@ -405,6 +407,13 @@ const rideQuoteOptionFromOfferQuote = (quote: ValidatedOfferQuote): RideQuoteOpt
   };
 };
 
+const compareRideCandidatesByQuoteAmount = (
+  left: RideCandidateContext,
+  right: RideCandidateContext,
+): number =>
+  (left.quote.quoteAmountFen ?? Number.POSITIVE_INFINITY) -
+  (right.quote.quoteAmountFen ?? Number.POSITIVE_INFINITY);
+
 async function resolveRideSelectionFromQuote(input: {
   item: ValidatedQuoteItem;
   itemId: string;
@@ -442,17 +451,13 @@ async function resolveRideSelectionFromQuote(input: {
       };
     }),
   );
-  const dispatchCandidate = [...candidates].sort(
-    (left, right) =>
-      (left.quote.quoteAmountFen ?? Number.POSITIVE_INFINITY) -
-      (right.quote.quoteAmountFen ?? Number.POSITIVE_INFINITY),
-  )[0];
-  if (!dispatchCandidate) {
+  const pricingCandidate = [...candidates].sort(compareRideCandidatesByQuoteAmount)[0];
+  if (!pricingCandidate) {
     return throwHttpProblem({ status: 409, detail: "请选择可用车型" });
   }
   if (
-    !dispatchCandidate.offerQuote ||
-    dispatchCandidate.offerQuote.listingContextSnapshot.productType !== "RIDE_HAILING"
+    !pricingCandidate.offerQuote ||
+    pricingCandidate.offerQuote.listingContextSnapshot.productType !== "RIDE_HAILING"
   ) {
     return throwHttpProblem({
       status: 409,
@@ -460,16 +465,22 @@ async function resolveRideSelectionFromQuote(input: {
       code: "ORDERING_QUOTE_CONTEXT_INVALID",
     });
   }
+  const dispatchProviderInstanceId = pricingCandidate.fulfillmentQuote.providerInstanceId;
+  const dispatchProviderCandidates = candidates.filter(
+    (candidate) => candidate.fulfillmentQuote.providerInstanceId === dispatchProviderInstanceId,
+  );
   return {
-    offer: dispatchCandidate.offer,
+    offer: pricingCandidate.offer,
     itemId: input.itemId,
     candidates,
-    dispatchCandidate,
+    dispatchProviderCandidates,
+    dispatchProviderInstanceId,
+    pricingCandidate,
     pricingSnapshot: pricingSnapshotFromQuote({
       itemId: input.itemId,
-      price: dispatchCandidate.offerQuote.pricingSnapshot,
+      price: pricingCandidate.offerQuote.pricingSnapshot,
     }),
-    listingContext: dispatchCandidate.offerQuote.listingContextSnapshot,
+    listingContext: pricingCandidate.offerQuote.listingContextSnapshot,
   };
 }
 
@@ -558,6 +569,43 @@ async function buildRideChoiceSetItemSnapshot(input: {
   };
 }
 
+const rideProviderCandidateId = (candidate: RideCandidateContext): string => String(candidate.sku.id);
+
+const buildRideDispatchBindingSnapshot = (input: {
+  selected: SelectedRideContext;
+  providerInstanceId: string;
+  providerType?: string | null;
+  created: Awaited<ReturnType<ReturnType<typeof createRideHailingProviderPort>["createRide"]>>;
+}): RideHailingDispatchBindingSnapshot => {
+  const submittedCandidateIds = new Set(input.created.dispatchSubmission.submittedCandidateIds);
+  const submittedCandidates = input.selected.dispatchProviderCandidates.flatMap((candidate) => {
+    if (!submittedCandidateIds.has(rideProviderCandidateId(candidate))) return [];
+    return [
+      {
+        skuId: candidate.sku.id,
+        spuId: candidate.spu.id,
+        displayName: candidate.quote.displayName,
+        providerVehicleTypeCode: candidate.fulfillmentQuote.providerVehicleTypeCode,
+        providerVehicleTypeName: candidate.fulfillmentQuote.providerVehicleTypeName,
+        quoteSnapshot: buildRideQuoteSnapshot(candidate.quote),
+      },
+    ];
+  });
+  if (submittedCandidates.length === 0) {
+    throw new Error("RideHailing provider create returned no recognized submitted candidates");
+  }
+  return {
+    providerInstanceId: input.providerInstanceId,
+    providerType: input.providerType ?? null,
+    providerOrderId: input.created.providerOrderId,
+    externalOrderId: input.created.externalOrderId,
+    submittedAt: new Date().toISOString(),
+    submissionMode: input.created.dispatchSubmission.submissionMode,
+    submittedCandidates,
+    providerSnapshot: input.created.providerSnapshot,
+  };
+};
+
 function buildTimeout(minutes: number): OrderTimeout {
   const now = new Date();
   return {
@@ -830,8 +878,7 @@ async function createRideHailingOrderBranch(input: {
   createdBy: string;
 }): Promise<CreateOrderCommandResult> {
   const provider = await providerRepo.findById(
-    input.selected.dispatchCandidate.fulfillmentQuote
-      .providerInstanceId as RideHailingProviderInstanceId,
+    input.selected.dispatchProviderInstanceId as RideHailingProviderInstanceId,
   );
   if (!provider) {
     return throwHttpProblem({
@@ -854,9 +901,9 @@ async function createRideHailingOrderBranch(input: {
         items: [
           {
             itemId: input.selected.itemId,
-            spu: input.selected.dispatchCandidate.spu,
-            sku: input.selected.dispatchCandidate.sku,
-            quantity: input.selected.dispatchCandidate.quantity,
+            spu: input.selected.pricingCandidate.spu,
+            sku: input.selected.pricingCandidate.sku,
+            quantity: input.selected.pricingCandidate.quantity,
           },
         ],
         orderContext: {
@@ -898,24 +945,24 @@ async function createRideHailingOrderBranch(input: {
       try {
         created = await port.createRide({
           orderId: base.order.id,
-          params: {
-            callback_info: buildCaocaoCallbackInfo({ providerInstance: provider }),
-            car_type: input.selected.dispatchCandidate.fulfillmentQuote.providerVehicleTypeCode,
-            caller_phone: input.selected.listingContext.contactPhone,
-            departure_at: input.selected.listingContext.departureAt,
-            end_address: input.selected.listingContext.route.destination.address,
-            end_name: input.selected.listingContext.route.destination.name,
-            estimate_price: input.selected.dispatchCandidate.fulfillmentQuote.estimateAmountFen,
-            estimate_price_key: input.selected.dispatchCandidate.fulfillmentQuote.providerQuoteId,
-            from_latitude: input.selected.listingContext.route.origin.latitude,
-            from_longitude: input.selected.listingContext.route.origin.longitude,
-            passenger_name: input.selected.listingContext.riders[0]?.displayName ?? "乘客",
-            passenger_phone: input.selected.listingContext.contactPhone,
-            start_address: input.selected.listingContext.route.origin.address,
-            start_name: input.selected.listingContext.route.origin.name,
-            to_latitude: input.selected.listingContext.route.destination.latitude,
-            to_longitude: input.selected.listingContext.route.destination.longitude,
+          callbackInfo: buildCaocaoCallbackInfo({ providerInstance: provider }),
+          candidates: input.selected.dispatchProviderCandidates.map((candidate) => ({
+            candidateId: rideProviderCandidateId(candidate),
+            providerVehicleTypeCode: candidate.fulfillmentQuote.providerVehicleTypeCode,
+            providerVehicleTypeName: candidate.fulfillmentQuote.providerVehicleTypeName,
+            estimateAmountFen: candidate.fulfillmentQuote.estimateAmountFen,
+            providerQuoteId: candidate.fulfillmentQuote.providerQuoteId,
+            providerQuoteExpiresAt: candidate.fulfillmentQuote.providerQuoteExpiresAt,
+            quoteAmountFen: candidate.quote.quoteAmountFen,
+            providerSnapshot: candidate.fulfillmentQuote.providerSnapshot,
+          })),
+          contactPhone: input.selected.listingContext.contactPhone,
+          departureAt: input.selected.listingContext.departureAt,
+          passenger: {
+            name: input.selected.listingContext.riders[0]?.displayName ?? "乘客",
+            phone: input.selected.listingContext.contactPhone,
           },
+          route: input.selected.listingContext.route,
         });
       } catch (error) {
         await rideRepo.updateByOrderId(base.order.id, {
@@ -935,39 +982,17 @@ async function createRideHailingOrderBranch(input: {
         };
       }
       providerOrderIdToCompensate = created.providerOrderId;
-      const providerBinding: RideHailingProviderBindingSnapshot = {
+      const dispatchBinding = buildRideDispatchBindingSnapshot({
+        selected: input.selected,
         providerInstanceId: provider.id,
         providerType: provider.providerType,
-        providerOrderId: created.providerOrderId,
-      };
-      const resolution: RideHailingChoiceSetResolutionSnapshot = {
-        sku: buildSkuSnapshot({
-          sku: input.selected.dispatchCandidate.sku,
-          name: input.selected.dispatchCandidate.quote.displayName,
-          cancellationPolicySnapshot: await buildCancellationPolicySnapshot(
-            input.selected.dispatchCandidate.sku,
-          ),
-        }),
-        providerVehicleTypeCode:
-          input.selected.dispatchCandidate.fulfillmentQuote.providerVehicleTypeCode,
-        providerVehicleTypeName:
-          input.selected.dispatchCandidate.fulfillmentQuote.providerVehicleTypeName,
-        quoteSnapshot: buildRideQuoteSnapshot(input.selected.dispatchCandidate.quote),
-        providerBinding,
-        source: "DISPATCH_POLICY",
-        candidateRelation: "IN_CANDIDATES",
-        reason: null,
-        resolvedAt: new Date().toISOString(),
-      };
-      const resolvedItem = await buildRideChoiceSetItemSnapshot({
-        selected: input.selected,
-        resolution,
+        created,
       });
       await rideRepo.updateByOrderId(base.order.id, {
+        dispatchBinding,
         executionPhase: "DISPATCHING",
       });
       const orderRepo = new TradeOrderRepository(tx);
-      await orderRepo.replaceItems(base.order.id, [resolvedItem]);
       await orderRepo.updateStatus(base.order.id, "OPEN");
 
       return {
diff --git a/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts b/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts
index 14b89db99..943b02a73 100644
--- a/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts
+++ b/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts
@@ -21,6 +21,7 @@ import {
 } from "../../ride-hailing";
 import type {
   RideHailingChoiceSetCandidateSnapshot,
+  RideHailingDispatchBindingSnapshot,
   RideHailingDriverSnapshot,
   RideHailingExecutionPhase,
   RideHailingRiderSnapshot,
@@ -30,7 +31,6 @@ import type {
 import {
   getOrderItemSkuName,
   getRideHailingChoiceSetItem,
-  getRideHailingProviderBinding,
 } from "../services";
 
 const providerRepo = new RideHailingProviderInstanceRepository();
@@ -215,19 +215,31 @@ export async function buildRideHailingDetailProjection(input: {
 }): Promise<RideHailingOrderDetailProjection> {
   let order = input.order;
   let choiceSetItem = getRideHailingChoiceSetItem(order.items);
-  let providerBinding = choiceSetItem ? getRideHailingProviderBinding(choiceSetItem) : null;
+  let rideOrder = await rideOrderRepo.findByOrderId(order.id);
+  if (!rideOrder) {
+    logCommerceOrderDetailDebug(input.debug, "ride-detail.build.ride-order-missing", {
+      localOrderId: order.id,
+      localOrderStatus: order.status,
+    });
+    return throwHttpProblem({
+      status: 500,
+      detail: "RideHailing order facts are missing",
+    });
+  }
+  let dispatchBinding: RideHailingDispatchBindingSnapshot | null =
+    rideOrder.dispatchBinding ?? null;
   let syncedProviderDetail: RideHailingProviderOrderDetail | null = null;
 
   logCommerceOrderDetailDebug(input.debug, "ride-detail.build.start", {
     localOrderId: order.id,
     localOrderStatus: order.status,
-    providerInstanceId: providerBinding?.providerInstanceId ?? null,
-    providerOrderId: providerBinding?.providerOrderId ?? null,
+    providerInstanceId: dispatchBinding?.providerInstanceId ?? null,
+    providerOrderId: dispatchBinding?.providerOrderId ?? null,
   });
 
-  if (providerBinding?.providerOrderId) {
-    const syncProviderInstanceId = providerBinding.providerInstanceId;
-    const syncProviderOrderId = providerBinding.providerOrderId;
+  if (dispatchBinding?.providerOrderId) {
+    const syncProviderInstanceId = dispatchBinding.providerInstanceId;
+    const syncProviderOrderId = dispatchBinding.providerOrderId;
     try {
       const syncResult = await syncRideHailingOrderWithProvider({
         orderId: order.id,
@@ -248,16 +260,20 @@ export async function buildRideHailingDetailProjection(input: {
         providerVehiclePlate: syncedProviderDetail.vehicle?.plate ?? null,
       });
       if (syncResult.mutated) {
-        const reloadedOrder = await tradeOrderRepo.findById(order.id);
-        if (reloadedOrder) {
+        const [reloadedOrder, reloadedRideOrder] = await Promise.all([
+          tradeOrderRepo.findById(order.id),
+          rideOrderRepo.findByOrderId(order.id),
+        ]);
+        if (reloadedOrder && reloadedRideOrder) {
           order = reloadedOrder;
+          rideOrder = reloadedRideOrder;
           choiceSetItem = getRideHailingChoiceSetItem(order.items);
-          providerBinding = choiceSetItem ? getRideHailingProviderBinding(choiceSetItem) : null;
+          dispatchBinding = rideOrder.dispatchBinding ?? null;
           logCommerceOrderDetailDebug(input.debug, "ride-detail.build.reload-after-sync", {
             localOrderId: order.id,
             localOrderStatus: order.status,
-            providerInstanceId: providerBinding?.providerInstanceId ?? null,
-            providerOrderId: providerBinding?.providerOrderId ?? null,
+            providerInstanceId: dispatchBinding?.providerInstanceId ?? null,
+            providerOrderId: dispatchBinding?.providerOrderId ?? null,
           });
         }
       }
@@ -274,22 +290,10 @@ export async function buildRideHailingDetailProjection(input: {
     }
   }
 
-  const rideOrder = await rideOrderRepo.findByOrderId(order.id);
-  if (!rideOrder) {
-    logCommerceOrderDetailDebug(input.debug, "ride-detail.build.ride-order-missing", {
-      localOrderId: order.id,
-      localOrderStatus: order.status,
-    });
-    return throwHttpProblem({
-      status: 500,
-      detail: "RideHailing order facts are missing",
-    });
-  }
-
   let providerDetail: ProviderDetailProjection | null = null;
-  if (providerBinding?.providerOrderId && syncedProviderDetail) {
+  if (dispatchBinding?.providerOrderId && syncedProviderDetail) {
     const provider = await providerRepo.findById(
-      providerBinding.providerInstanceId as RideHailingProviderInstanceId,
+      dispatchBinding.providerInstanceId as RideHailingProviderInstanceId,
     );
     if (provider) {
       const port = createRideHailingProviderPort({ providerInstance: provider });
@@ -300,8 +304,8 @@ export async function buildRideHailingDetailProjection(input: {
       logCommerceOrderDetailDebug(input.debug, "ride-detail.build.live-query-plan", {
         localOrderId: order.id,
         rideExecutionPhase: rideOrder.executionPhase,
-        providerInstanceId: providerBinding.providerInstanceId,
-        providerOrderId: providerBinding.providerOrderId,
+        providerInstanceId: dispatchBinding.providerInstanceId,
+        providerOrderId: dispatchBinding.providerOrderId,
         shouldQueryLiveGeometry,
         navigationRouteQueryKind,
       });
@@ -311,14 +315,14 @@ export async function buildRideHailingDetailProjection(input: {
               logCommerceOrderDetailDebug(input.debug, "ride-detail.build.driver-location.error", {
                 localOrderId: order.id,
                 rideExecutionPhase: rideOrder.executionPhase,
-                providerInstanceId: providerBinding?.providerInstanceId ?? null,
-                providerOrderId: providerBinding?.providerOrderId ?? null,
+                providerInstanceId: dispatchBinding?.providerInstanceId ?? null,
+                providerOrderId: dispatchBinding?.providerOrderId ?? null,
                 ...summarizeProviderLiveError(error),
               });
             },
             operation: () =>
               port.queryDriverLocation({
-                providerOrderId: providerBinding.providerOrderId,
+                providerOrderId: dispatchBinding.providerOrderId,
               }),
           })
         : null;
@@ -328,23 +332,23 @@ export async function buildRideHailingDetailProjection(input: {
               writeRideHailingLiveRouteQueryErrorLog({
                 executionPhase: rideOrder.executionPhase,
                 orderId: order.id,
-                providerInstanceId: providerBinding?.providerInstanceId ?? null,
-                providerOrderId: providerBinding?.providerOrderId ?? null,
+                providerInstanceId: dispatchBinding?.providerInstanceId ?? null,
+                providerOrderId: dispatchBinding?.providerOrderId ?? null,
                 routeKind: navigationRouteQueryKind,
                 ...summarizeProviderLiveError(error),
               });
               logCommerceOrderDetailDebug(input.debug, "ride-detail.build.driver-route.error", {
                 localOrderId: order.id,
                 rideExecutionPhase: rideOrder.executionPhase,
-                providerInstanceId: providerBinding?.providerInstanceId ?? null,
-                providerOrderId: providerBinding?.providerOrderId ?? null,
+                providerInstanceId: dispatchBinding?.providerInstanceId ?? null,
+                providerOrderId: dispatchBinding?.providerOrderId ?? null,
                 routeKind: navigationRouteQueryKind,
                 ...summarizeProviderLiveError(error),
               });
             },
             operation: () =>
               port.queryDriverRoute({
-                providerOrderId: providerBinding.providerOrderId,
+                providerOrderId: dispatchBinding.providerOrderId,
                 routeKind: navigationRouteQueryKind,
               }),
           })
@@ -357,8 +361,8 @@ export async function buildRideHailingDetailProjection(input: {
       logCommerceOrderDetailDebug(input.debug, "ride-detail.build.live-query-result", {
         localOrderId: order.id,
         rideExecutionPhase: rideOrder.executionPhase,
-        providerInstanceId: providerBinding.providerInstanceId,
-        providerOrderId: providerBinding.providerOrderId,
+        providerInstanceId: dispatchBinding.providerInstanceId,
+        providerOrderId: dispatchBinding.providerOrderId,
         shouldQueryLiveGeometry,
         navigationRouteQueryKind,
         vehicleLocationCapturedAt: vehicleLocation?.capturedAt ?? null,
@@ -368,8 +372,8 @@ export async function buildRideHailingDetailProjection(input: {
     } else {
       logCommerceOrderDetailDebug(input.debug, "ride-detail.build.provider-instance-missing", {
         localOrderId: order.id,
-        providerInstanceId: providerBinding.providerInstanceId,
-        providerOrderId: providerBinding.providerOrderId,
+        providerInstanceId: dispatchBinding.providerInstanceId,
+        providerOrderId: dispatchBinding.providerOrderId,
       });
     }
   }
@@ -386,7 +390,7 @@ export async function buildRideHailingDetailProjection(input: {
         : "曹操出行",
     candidateVehicles: choiceSetItem?.candidates.map(projectCandidateVehicle) ?? [],
     provider: {
-      providerOrderId: providerBinding?.providerOrderId ?? null,
+      providerOrderId: dispatchBinding?.providerOrderId ?? null,
     },
     executionPhase: rideOrder.executionPhase,
     driver: rideOrder.driverSnapshot ?? providerDetail?.driver ?? null,
@@ -401,7 +405,7 @@ export async function buildRideHailingDetailProjection(input: {
     rideDriverName: result.driver?.driverName ?? null,
     rideVehiclePlate: result.vehicle?.plate ?? null,
     candidateVehicleCount: result.candidateVehicles.length,
-    providerInstanceId: providerBinding?.providerInstanceId ?? null,
+    providerInstanceId: dispatchBinding?.providerInstanceId ?? null,
     providerOrderId: result.provider.providerOrderId,
     ...summarizeProviderDetailProjection(result.live),
   });
@@ -414,21 +418,19 @@ export async function confirmRideHailingProviderFeeAfterPayment(input: { orderId
   if (!rideOrder) {
     return { applied: false, reason: "RideHailing order facts are missing" };
   }
-  const order = await tradeOrderRepo.findById(input.orderId as TradeOrderId);
-  const choiceSetItem = order ? getRideHailingChoiceSetItem(order.items) : null;
-  const providerBinding = choiceSetItem ? getRideHailingProviderBinding(choiceSetItem) : null;
-  if (!providerBinding?.providerOrderId) {
+  const dispatchBinding = rideOrder.dispatchBinding;
+  if (!dispatchBinding?.providerOrderId) {
     return { applied: false, reason: "RideHailing provider order is missing" };
   }
   const provider = await providerRepo.findById(
-    providerBinding.providerInstanceId as RideHailingProviderInstanceId,
+    dispatchBinding.providerInstanceId as RideHailingProviderInstanceId,
   );
   if (!provider) {
     return { applied: false, reason: "RideHailing provider instance is missing" };
   }
   const port = createRideHailingProviderPort({ providerInstance: provider });
   await port.confirmFee({
-    providerOrderId: providerBinding.providerOrderId,
+    providerOrderId: dispatchBinding.providerOrderId,
   });
   return {
     applied: true,
diff --git a/apps/backend/src/entities/ride-hailing-order.ts b/apps/backend/src/entities/ride-hailing-order.ts
index 2488fecdc..8abdfb6d1 100644
--- a/apps/backend/src/entities/ride-hailing-order.ts
+++ b/apps/backend/src/entities/ride-hailing-order.ts
@@ -2,6 +2,7 @@ import { index, jsonb, pgTable, text, timestamp, uuid } from "drizzle-orm/pg-cor
 import { sql } from "drizzle-orm";
 import type {
   RideHailingDriverSnapshot,
+  RideHailingDispatchBindingSnapshot,
   RideHailingExecutionPhase,
   RideHailingFinalSettlementInput,
   RideHailingRiderSnapshot,
@@ -31,6 +32,9 @@ export const rideHailingOrders = pgTable(
     vehicleSnapshot: jsonb("vehicle_snapshot")
       .$type<RideHailingVehicleSnapshot | null>()
       .default(null),
+    dispatchBinding: jsonb("dispatch_binding")
+      .$type<RideHailingDispatchBindingSnapshot | null>()
+      .default(null),
     finalSettlementInput: jsonb("final_settlement_input")
       .$type<RideHailingFinalSettlementInput | null>()
       .default(null),
diff --git a/apps/backend/tests/ride-hailing/admin-ride-hailing-order.scenario.test.ts b/apps/backend/tests/ride-hailing/admin-ride-hailing-order.scenario.test.ts
index 83bc118e1..a45254df1 100644
--- a/apps/backend/tests/ride-hailing/admin-ride-hailing-order.scenario.test.ts
+++ b/apps/backend/tests/ride-hailing/admin-ride-hailing-order.scenario.test.ts
@@ -307,32 +307,30 @@ scenario("admin_ride_hailing_order_workspace_can_cancel_dispatching_order", asyn
     const choiceSetItem =
       baseOrder.items[0]?.kind === "CHOICE_SET" ? baseOrder.items[0] : null;
     assert.ok(choiceSetItem);
+    const submittedCandidate = choiceSetItem.candidates[0];
+    assert.ok(submittedCandidate);
 
-    const resolvedItems = [
-      {
-        ...choiceSetItem,
-        resolution: {
-          sku: choiceSetItem.candidates[0]?.sku ?? null,
-          providerVehicleTypeCode: "1",
-          providerVehicleTypeName: "Scenario Admin Ride",
-          quoteSnapshot: choiceSetItem.candidates[0]?.quoteSnapshot ?? null,
-          providerBinding: {
-            providerInstanceId: provider.id,
-            providerType: provider.providerType,
-            providerOrderId,
-            providerSnapshot: null,
-          },
-          source: "DISPATCH_POLICY" as const,
-          candidateRelation: "IN_CANDIDATES" as const,
-          reason: "Scenario dispatch",
-          resolvedAt: "2031-03-01T09:01:00.000Z",
-        },
-      },
-    ];
-
-    await tradeOrderRepo.replaceItems(baseOrder.id, resolvedItems);
     await tradeOrderRepo.updateStatus(baseOrder.id, "OPEN");
     await rideOrderRepo.updateByOrderId(baseOrder.id, {
+      dispatchBinding: {
+        providerInstanceId: provider.id,
+        providerType: provider.providerType,
+        providerOrderId,
+        externalOrderId: null,
+        submittedAt: "2031-03-01T09:01:00.000Z",
+        submissionMode: "SINGLE_CANDIDATE",
+        submittedCandidates: [
+          {
+            skuId: submittedCandidate.sku.id,
+            spuId: submittedCandidate.sku.spuId,
+            displayName: "Scenario Admin Ride",
+            providerVehicleTypeCode: "1",
+            providerVehicleTypeName: "Scenario Admin Ride",
+            quoteSnapshot: submittedCandidate.quoteSnapshot,
+          },
+        ],
+        providerSnapshot: null,
+      },
       executionPhase: "DISPATCHING",
     });
 
diff --git a/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts b/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts
index b142aff09..1cc3a34bb 100644
--- a/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts
+++ b/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts
@@ -244,21 +244,7 @@ const seedCallbackScenarioRideOrder = async (input: {
             quoteSnapshot,
           },
         ],
-        resolution: {
-          sku: skuSnapshot,
-          providerVehicleTypeCode: "3",
-          providerVehicleTypeName: input.skuName,
-          quoteSnapshot,
-          providerBinding: {
-            providerInstanceId: input.providerId,
-            providerType: "CAOCAO",
-            providerOrderId: input.providerOrderId,
-          },
-          source: "DISPATCH_POLICY",
-          candidateRelation: "IN_CANDIDATES",
-          reason: null,
-          resolvedAt: "2031-01-01T00:00:00.000Z",
-        },
+        resolution: null,
         quantity: 1,
       },
     ],
@@ -293,6 +279,25 @@ const seedCallbackScenarioRideOrder = async (input: {
       },
     ],
     contactPhone: "13800138000",
+    dispatchBinding: {
+      providerInstanceId: input.providerId,
+      providerType: "CAOCAO",
+      providerOrderId: input.providerOrderId,
+      externalOrderId: encodeCaocaoExternalOrderId(order.id),
+      submittedAt: "2031-01-01T00:00:00.000Z",
+      submissionMode: "SINGLE_CANDIDATE",
+      submittedCandidates: [
+        {
+          skuId: skuSnapshot.id,
+          spuId: spu.id,
+          displayName: input.skuName,
+          providerVehicleTypeCode: "3",
+          providerVehicleTypeName: input.skuName,
+          quoteSnapshot,
+        },
+      ],
+      providerSnapshot: null,
+    },
     executionPhase: input.rideExecutionPhase,
   });
   return {
@@ -593,28 +598,7 @@ scenario("Caocao callback updates ride execution and creates final bill", async
               },
             },
           ],
-          resolution: {
-            sku: skuSnapshot,
-            providerVehicleTypeCode: "3",
-            providerVehicleTypeName: "Scenario Caocao Express",
-            quoteSnapshot: {
-              amountFen: 3600,
-              currency: "CNY",
-              displayName: "Scenario Caocao Express",
-              estimateAmountFen: 3600,
-              quotedAt: "2031-01-01T00:00:00.000Z",
-              explanations: [],
-            },
-            providerBinding: {
-              providerInstanceId: provider.id,
-              providerType: "CAOCAO",
-              providerOrderId: "CC-FINAL-123",
-            },
-            source: "DISPATCH_POLICY",
-            candidateRelation: "IN_CANDIDATES",
-            reason: null,
-            resolvedAt: "2031-01-01T00:00:00.000Z",
-          },
+          resolution: null,
           quantity: 1,
         },
       ],
@@ -649,6 +633,32 @@ scenario("Caocao callback updates ride execution and creates final bill", async
         },
       ],
       contactPhone: "13800138000",
+      dispatchBinding: {
+        providerInstanceId: provider.id,
+        providerType: "CAOCAO",
+        providerOrderId: "CC-FINAL-123",
+        externalOrderId: encodeCaocaoExternalOrderId(order.id),
+        submittedAt: "2031-01-01T00:00:00.000Z",
+        submissionMode: "SINGLE_CANDIDATE",
+        submittedCandidates: [
+          {
+            skuId: skuSnapshot.id,
+            spuId: spu.id,
+            displayName: "Scenario Caocao Express",
+            providerVehicleTypeCode: "3",
+            providerVehicleTypeName: "Scenario Caocao Express",
+            quoteSnapshot: {
+              amountFen: 3600,
+              currency: "CNY",
+              displayName: "Scenario Caocao Express",
+              estimateAmountFen: 3600,
+              quotedAt: "2031-01-01T00:00:00.000Z",
+              explanations: [],
+            },
+          },
+        ],
+        providerSnapshot: null,
+      },
       executionPhase: "INITIATING",
     });
 
@@ -1213,28 +1223,7 @@ scenario("Caocao callback returns retryable failure when provider detail query f
               },
             },
           ],
-          resolution: {
-            sku: skuSnapshot,
-            providerVehicleTypeCode: "3",
-            providerVehicleTypeName: "Scenario Caocao Query Failure Express",
-            quoteSnapshot: {
-              amountFen: 3600,
-              currency: "CNY",
-              displayName: "Scenario Caocao Query Failure Express",
-              estimateAmountFen: 3600,
-              quotedAt: "2031-01-01T00:00:00.000Z",
-              explanations: [],
-            },
-            providerBinding: {
-              providerInstanceId: provider.id,
-              providerType: "CAOCAO",
-              providerOrderId: "CC-QUERY-FAILURE-123",
-            },
-            source: "DISPATCH_POLICY",
-            candidateRelation: "IN_CANDIDATES",
-            reason: null,
-            resolvedAt: "2031-01-01T00:00:00.000Z",
-          },
+          resolution: null,
           quantity: 1,
         },
       ],
@@ -1269,6 +1258,32 @@ scenario("Caocao callback returns retryable failure when provider detail query f
         },
       ],
       contactPhone: "13800138000",
+      dispatchBinding: {
+        providerInstanceId: provider.id,
+        providerType: "CAOCAO",
+        providerOrderId: "CC-QUERY-FAILURE-123",
+        externalOrderId: encodeCaocaoExternalOrderId(order.id),
+        submittedAt: "2031-01-01T00:00:00.000Z",
+        submissionMode: "SINGLE_CANDIDATE",
+        submittedCandidates: [
+          {
+            skuId: skuSnapshot.id,
+            spuId: spu.id,
+            displayName: "Scenario Caocao Query Failure Express",
+            providerVehicleTypeCode: "3",
+            providerVehicleTypeName: "Scenario Caocao Query Failure Express",
+            quoteSnapshot: {
+              amountFen: 3600,
+              currency: "CNY",
+              displayName: "Scenario Caocao Query Failure Express",
+              estimateAmountFen: 3600,
+              quotedAt: "2031-01-01T00:00:00.000Z",
+              explanations: [],
+            },
+          },
+        ],
+        providerSnapshot: null,
+      },
       executionPhase: "DISPATCHING",
     });
 
diff --git a/docs/20-product-tdd/ecommerce-contracts.md b/docs/20-product-tdd/ecommerce-contracts.md
index 19ae7e0fe..1d4f71e67 100644
--- a/docs/20-product-tdd/ecommerce-contracts.md
+++ b/docs/20-product-tdd/ecommerce-contracts.md
@@ -400,16 +400,23 @@ RideHailing:
 - Order is created from candidate quote snapshots. For RideHailing, the user
   orders one unresolved choice-set item: several acceptable vehicle SKU
   candidates, with one final resolution.
-- create-order dispatches the cheapest quoted candidate first. Provider create
-  failure cancels the local order without retrying the next candidate/provider
-  and returns the `CANCELLED` create-order result to the Ordering Page.
-- provider binding is stored on the choice-set resolution, not on
-  `ride_hailing_orders`
+- create-order sends the user-authorized candidate set to the selected
+  RideHailing provider port. CaoCao supports multi-candidate dispatch through
+  `/common/orderCarV2` with `is_simultaneously_call=1` and
+  `service_type_price`, so the CaoCao adapter submits all selected candidates
+  instead of choosing a cheapest fallback. When a future provider adapter does
+  not support multi-candidate dispatch, that adapter owns the
+  provider-specific fallback choice. Provider create failure cancels the local
+  order without retrying the next candidate/provider and returns the
+  `CANCELLED` create-order result to the Ordering Page.
+- provider dispatch binding is stored on `ride_hailing_orders`, not on the
+  choice-set resolution. The choice-set resolution represents only the final
+  service vehicle confirmed by the provider lifecycle.
 - execution phase and ride execution snapshots are stored on
   `ride_hailing_orders`
 - provider adapter computes external order id dynamically; the provider-side
-  order id returned by create is stored in the choice-set resolution together
-  with provider instance identity
+  order id returned by create is stored in the RideHailing dispatch binding
+  together with provider instance identity
 - provider detail sync owns execution truth only: execution phase, driver
   snapshot, vehicle snapshot, and other ride-lifecycle facts come from
   provider order-detail reads rather than from billing queries
diff --git a/packages/fake-caocao-server/openapi/control/fake-caocao-control.openapi.yaml b/packages/fake-caocao-server/openapi/control/fake-caocao-control.openapi.yaml
index cf8e73bb7..74e5015ff 100644
--- a/packages/fake-caocao-server/openapi/control/fake-caocao-control.openapi.yaml
+++ b/packages/fake-caocao-server/openapi/control/fake-caocao-control.openapi.yaml
@@ -303,6 +303,7 @@ components:
         - serviceStartedAt
         - startAddress
         - startName
+        - submittedCarTypes
         - updatedAt
       properties:
         acceptedAt:
@@ -394,6 +395,10 @@ components:
         startName:
           type: string
           minLength: 1
+        submittedCarTypes:
+          type: array
+          items:
+            $ref: '#/components/schemas/CarType'
         updatedAt:
           $ref: '#/components/schemas/IsoDateTime'
     FakeCaocaoFeeConfirmState:
diff --git a/packages/fake-caocao-server/openapi/provider/caocao-provider-minimal.openapi.yaml b/packages/fake-caocao-server/openapi/provider/caocao-provider-minimal.openapi.yaml
index febb41b35..498136aeb 100644
--- a/packages/fake-caocao-server/openapi/provider/caocao-provider-minimal.openapi.yaml
+++ b/packages/fake-caocao-server/openapi/provider/caocao-provider-minimal.openapi.yaml
@@ -612,6 +612,9 @@ components:
             - 'null'
         callerPhone:
           $ref: '#/components/schemas/PhoneNumber'
+        carType:
+          type: integer
+          enum: [2, 3, 4, 5, 7, 12, 14, 15]
         cityCode:
           $ref: '#/components/schemas/CityCode'
         departureTime:
@@ -1034,13 +1037,10 @@ components:
       required:
         - callback_info
         - caller_phone
-        - car_type
         - city_code
         - client_id
         - end_address
         - end_name
-        - estimate_price
-        - estimate_price_key
         - ext_order_id
         - from_latitude
         - from_longitude
@@ -1052,6 +1052,19 @@ components:
         - timestamp
         - to_latitude
         - to_longitude
+      oneOf:
+        - required:
+            - car_type
+            - estimate_price
+            - estimate_price_key
+          properties:
+            is_simultaneously_call:
+              const: '0'
+        - required:
+            - service_type_price
+          properties:
+            is_simultaneously_call:
+              const: '1'
       properties:
         accept_cp_driver:
           type: string
@@ -1128,6 +1141,9 @@ components:
           type: string
         passenger_phone:
           $ref: '#/components/schemas/PhoneNumber'
+        service_type_price:
+          type: string
+          minLength: 1
         sign:
           type: string
           minLength: 1
diff --git a/packages/fake-caocao-server/src/routes.ts b/packages/fake-caocao-server/src/routes.ts
index 782327380..31b2cc45d 100644
--- a/packages/fake-caocao-server/src/routes.ts
+++ b/packages/fake-caocao-server/src/routes.ts
@@ -120,6 +120,12 @@ type FakeCaocaoCallbackDelivery =
       bodyPreview: string | null;
     };
 
+type FakeCaocaoServiceTypePriceItem = {
+  estimateKey: string;
+  estimatePriceFen: number;
+  serviceType: string;
+};
+
 class FakeCaocaoCallbackDeliveryError extends Error {
   constructor(
     readonly delivery: Extract<FakeCaocaoCallbackDelivery, { ok: false }>,
@@ -161,6 +167,23 @@ const readFirst = (value: Record<string, string>, key: string): string | null =>
   return raw && raw.length > 0 ? raw : null;
 };
 
+const readStringField = (value: Record<string, unknown>, key: string): string | null => {
+  const raw = value[key];
+  if (typeof raw === "string" && raw.trim().length > 0) return raw.trim();
+  if (typeof raw === "number" && Number.isFinite(raw)) return String(raw);
+  return null;
+};
+
+const readIntegerField = (value: Record<string, unknown>, key: string): number | null => {
+  const raw = value[key];
+  if (typeof raw === "number" && Number.isInteger(raw)) return raw;
+  if (typeof raw === "string" && raw.trim().length > 0) {
+    const parsed = Number(raw);
+    return Number.isInteger(parsed) ? parsed : null;
+  }
+  return null;
+};
+
 const parseInteger = (value: string | null, field: string): number => {
   const parsed = value === null ? Number.NaN : Number(value);
   if (!Number.isInteger(parsed)) {
@@ -177,6 +200,38 @@ const parseNumber = (value: string | null, field: string): number => {
   return parsed;
 };
 
+const parseServiceTypePrice = (value: string | null): FakeCaocaoServiceTypePriceItem[] => {
+  if (!value) {
+    throw new FakeCaocaoProviderError(40001, "Missing service_type_price");
+  }
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(value) as unknown;
+  } catch {
+    throw new FakeCaocaoProviderError(40001, "Invalid service_type_price JSON");
+  }
+  if (!Array.isArray(parsed) || parsed.length === 0) {
+    throw new FakeCaocaoProviderError(40001, "Invalid service_type_price list");
+  }
+
+  return parsed.map((item) => {
+    if (!isRecord(item)) {
+      throw new FakeCaocaoProviderError(40001, "Invalid service_type_price item");
+    }
+    const serviceType = readStringField(item, "serviceType");
+    const estimateKey = readStringField(item, "estimateKey");
+    const estimatePriceFen = readIntegerField(item, "estimatePrice");
+    if (!serviceType || !estimateKey || estimatePriceFen === null) {
+      throw new FakeCaocaoProviderError(40001, "Incomplete service_type_price item");
+    }
+    return {
+      estimateKey,
+      estimatePriceFen,
+      serviceType,
+    };
+  });
+};
+
 const toCaocaoDateTime = (value: string | null | undefined): string | null => {
   if (!value) return null;
   if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/.test(value)) return value;
@@ -504,6 +559,7 @@ const queryOrderDetailPayload = (order: FakeCaocaoOrderState): unknown => {
       beginChargeTime: fromIsoToCaocaoDateTime(order.serviceStartedAt),
       callbackInfo: order.callbackInfo,
       callerPhone: order.callerPhone,
+      carType: Number(order.carType),
       cityCode: order.cityCode,
       departureTime: order.departureTime,
       endAddress: order.endAddress,
@@ -1122,11 +1178,21 @@ export function createFakeCaocaoApp(input: FakeCaocaoServerAppInput): Hono {
           throw new FakeCaocaoProviderError(50001, "Fake Caocao create failed");
         }
 
-        const carType = readFirst(form, "car_type");
         const externalOrderId = readFirst(form, "ext_order_id");
-        if (!carType || !externalOrderId) {
+        if (!externalOrderId) {
           throw new FakeCaocaoProviderError(40001, "Missing create order payload");
         }
+        const isSimultaneouslyCall = readFirst(form, "is_simultaneously_call") === "1";
+        const serviceTypePriceItems = isSimultaneouslyCall
+          ? parseServiceTypePrice(readFirst(form, "service_type_price"))
+          : null;
+        const carType = serviceTypePriceItems?.[0]?.serviceType ?? readFirst(form, "car_type");
+        if (!carType) {
+          throw new FakeCaocaoProviderError(40001, "Missing create order car type");
+        }
+        const estimatePriceFen =
+          serviceTypePriceItems?.[0]?.estimatePriceFen ??
+          parseInteger(readFirst(form, "estimate_price"), "estimate_price");
         const callbackInfo = readFirst(form, "callback_info");
         const callbackUrl = resolveCallbackUrl({
           callbackBaseUrl: input.callbackBaseUrl,
@@ -1145,7 +1211,7 @@ export function createFakeCaocaoApp(input: FakeCaocaoServerAppInput): Hono {
           },
           endAddress: readFirst(form, "end_address"),
           endName: readFirst(form, "end_name"),
-          estimatePriceFen: parseInteger(readFirst(form, "estimate_price"), "estimate_price"),
+          estimatePriceFen,
           externalOrderId,
           orderType: parseInteger(readFirst(form, "order_type"), "order_type"),
           origin: {
@@ -1156,6 +1222,7 @@ export function createFakeCaocaoApp(input: FakeCaocaoServerAppInput): Hono {
           passengerPhone: readFirst(form, "passenger_phone") ?? readFirst(form, "caller_phone"),
           startAddress: readFirst(form, "start_address"),
           startName: readFirst(form, "start_name"),
+          submittedCarTypes: serviceTypePriceItems?.map((item) => item.serviceType) ?? [carType],
         });
         maybePostCreateCallback({
           fixture: input.fixture,
diff --git a/packages/fake-caocao-server/src/server.test.ts b/packages/fake-caocao-server/src/server.test.ts
index b419f09b9..7340a2df8 100644
--- a/packages/fake-caocao-server/src/server.test.ts
+++ b/packages/fake-caocao-server/src/server.test.ts
@@ -197,6 +197,7 @@ describe("startFakeCaocaoServer", () => {
     expect(server.state.findOrder(createBody.data.orderNo)?.callbackInfo).toBe(
       "pu.rhc.v1.stg.00000000-0000-0000-0000-000000000501",
     );
+    expect(server.state.findOrder(createBody.data.orderNo)?.submittedCarTypes).toEqual(["5"]);
 
     const detailResponse = await fetch(
       `${server.origin}/common/queryOrderDetailV2?${signedSearchParams({
@@ -478,6 +479,54 @@ describe("startFakeCaocaoServer", () => {
     expect(invalidPhaseBody.code).toBe("FAKE_CAOCAO_UNSUPPORTED_ORDER_PHASE");
   });
 
+  test("serves multi-vehicle orderCarV2 and records submitted car types", async () => {
+    server = await startFakeCaocaoServer();
+
+    const createParams = defaultCreateParams({
+      ext_order_id: "external-order-multi",
+      is_simultaneously_call: "1",
+      service_type_price: JSON.stringify([
+        {
+          estimateKey: "fake_quote_3_3600",
+          estimatePrice: 3600,
+          serviceType: 3,
+        },
+        {
+          estimateKey: "fake_quote_5_5200",
+          estimatePrice: 5200,
+          serviceType: 5,
+        },
+      ]),
+      timestamp: "41",
+    });
+    delete createParams.car_type;
+    delete createParams.estimate_price;
+    delete createParams.estimate_price_key;
+
+    const createResponse = await fetch(`${server.origin}/common/orderCarV2`, {
+      body: signedSearchParams({
+        clientId: server.fixture.clientId,
+        params: createParams,
+        signKey: server.fixture.signKey,
+      }).toString(),
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+      method: "POST",
+    });
+    const createBody = (await createResponse.json()) as {
+      data: { orderNo: string };
+      success: boolean;
+    };
+
+    expect(createResponse.ok).toBe(true);
+    expect(createBody.success).toBe(true);
+    const order = server.state.findOrder(createBody.data.orderNo);
+    expect(order?.carType).toBe("3");
+    expect(order?.estimatePriceFen).toBe(3600);
+    expect(order?.submittedCarTypes).toEqual(["3", "5"]);
+  });
+
   test("supports admin retreat controls", async () => {
     server = await startFakeCaocaoServer();
 
diff --git a/packages/fake-caocao-server/src/state.test.ts b/packages/fake-caocao-server/src/state.test.ts
index e4a497299..ba0231ccc 100644
--- a/packages/fake-caocao-server/src/state.test.ts
+++ b/packages/fake-caocao-server/src/state.test.ts
@@ -17,6 +17,7 @@ describe("FakeCaocaoState", () => {
     expect(duplicate).toEqual(created);
     expect(created.phase).toBe("CREATED");
     expect(created.finalAmountFen).toBe(5600);
+    expect(created.submittedCarTypes).toEqual(["5"]);
 
     expect(state.findOrder(created.providerOrderId)?.phase).toBe("CREATED");
 
diff --git a/packages/fake-caocao-server/src/state.ts b/packages/fake-caocao-server/src/state.ts
index 0a38ef9fc..337404da3 100644
--- a/packages/fake-caocao-server/src/state.ts
+++ b/packages/fake-caocao-server/src/state.ts
@@ -61,6 +61,7 @@ export type FakeCaocaoOrderState = {
   serviceStartedAt: string | null;
   startAddress: string;
   startName: string;
+  submittedCarTypes: string[];
   createdAt: string;
   updatedAt: string;
 };
@@ -85,6 +86,15 @@ const nowIso = (): string => new Date().toISOString();
 const sanitizeProviderId = (value: string): string =>
   value.replace(/[^a-zA-Z0-9]/g, "").slice(0, 48);
 
+const normalizeSubmittedCarTypes = (
+  values: string[] | null | undefined,
+  fallback: string,
+): string[] => {
+  const normalized =
+    values?.map((carType) => carType.trim()).filter((carType) => carType.length > 0) ?? [];
+  return normalized.length > 0 ? normalized : [fallback];
+};
+
 const defaultEstimates = (): FakeCaocaoVehicleEstimate[] => [
   {
     carType: "2",
@@ -351,6 +361,7 @@ export class FakeCaocaoState {
   createOrder(input: {
     externalOrderId: string;
     carType: string;
+    submittedCarTypes?: string[] | null;
     callbackInfo?: string | null;
     callbackUrl?: string | null;
     callerPhone?: string | null;
@@ -410,6 +421,7 @@ export class FakeCaocaoState {
       serviceStartedAt: null,
       startAddress: input.startAddress?.trim() || "Fake Origin Address",
       startName: input.startName?.trim() || "Fake Origin",
+      submittedCarTypes: normalizeSubmittedCarTypes(input.submittedCarTypes, estimate.carType),
       updatedAt: timestamp,
     };
     this.orders.set(order.providerOrderId, order);
diff --git a/tasks/ride-hailing-choice-set-resolution-realignment/00-task-packet.md b/tasks/ride-hailing-choice-set-resolution-realignment/00-task-packet.md
new file mode 100644
index 000000000..32b1802c0
--- /dev/null
+++ b/tasks/ride-hailing-choice-set-resolution-realignment/00-task-packet.md
@@ -0,0 +1,213 @@
+# RideHailing Choice-Set Resolution Realignment
+
+Date: 2026-06-30
+
+## Objective & Hypothesis
+
+- Objective: realign RideHailing order creation so a choice-set item's
+  `resolution` means only the final service vehicle confirmed by the provider
+  lifecycle, not the dispatch-time provider binding or dispatch policy choice.
+- Hypothesis:
+  - `RideHailingOrderContent` shows "服务车型" during `DISPATCHING` because
+    create-order writes `trade_orders.items[*].resolution.sku` immediately after
+    provider create succeeds.
+  - This is a backend model boundary defect, not a frontend visibility-state
+    defect.
+  - Provider dispatch binding belongs with RideHailing execution facts, likely
+    on `ride_hailing_orders` or a ride-hailing dispatch child record, not inside
+    `trade_orders.items`.
+  - `RideHailingProviderPort.createRide` should accept the user-authorized
+    vehicle candidate set in a provider-neutral contract. CaoCao's current
+    `/v2/common/orderCarV2` contract supports multi-vehicle dispatch through
+    `is_simultaneously_call=1` and `service_type_price`; the local adapter's
+    previous cheapest-candidate fallback was an implementation gap, not a
+    provider capability boundary.
+
+## Guardrails Touched
+
+- Product truth:
+  - `docs/10-prd/behavior/rules-and-invariants.md`
+  - `docs/20-product-tdd/ecommerce-contracts.md`
+- Backend trade order model:
+  - `apps/backend/src/domains/trade/model/order.ts`
+  - `apps/backend/src/domains/trade/services/order-items.ts`
+  - `apps/backend/src/domains/trade/use-cases/create-order.ts`
+- Backend RideHailing execution facts:
+  - `apps/backend/src/entities/ride-hailing-order.ts`
+  - `apps/backend/src/repositories/RideHailingOrderRepository.ts`
+  - `apps/backend/src/domains/trade/model/ride-hailing-order.ts`
+  - `apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts`
+  - `apps/backend/src/domains/ride-hailing/use-cases/provider-execution-context.ts`
+  - `apps/backend/src/domains/ride-hailing/use-cases/sync-ride-hailing-order-with-provider.ts`
+- Provider port and CaoCao adapter:
+  - `apps/backend/src/domains/ride-hailing/model/provider.ts`
+  - `apps/backend/src/domains/ride-hailing/services/caocao-provider.ts`
+  - `apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts`
+- Frontend order detail and system scenarios:
+  - `apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue`
+  - `tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+
+## Current Understanding
+
+- Input type: Reality / Constraint.
+- Active mode: Execute / Verify.
+- Source behavior before this fix:
+  - builds a choice-set order item with all selected candidate vehicles and
+    `resolution: null`;
+  - selects `dispatchCandidate` in the trade use case by sorting selected
+    candidates by quote amount;
+  - calls `port.createRide()` with CaoCao-shaped `params.car_type`,
+    `estimate_price`, and `estimate_price_key`;
+  - after provider create succeeds, constructs a
+    `RideHailingChoiceSetResolutionSnapshot` with `sku`, `quoteSnapshot`,
+    `providerBinding`, `source: "DISPATCH_POLICY"`, and
+    `candidateRelation: "IN_CANDIDATES"`;
+  - updates the RideHailing execution phase to `DISPATCHING`;
+  - replaces the order item with the resolved item.
+- Frontend behavior before the fix was data-correct against the implemented
+  model but product-wrong against the intended meaning of "服务车型".
+- Scenario coverage before the fix incorrectly cemented that a `DISPATCHING` order
+  should have `resolved-vehicle-section` visible.
+- Previous Product TDD said provider binding is stored on the choice-set
+  resolution. That is the pressure that forces premature resolution creation
+  once provider create returns a provider order id.
+- Previous provider port leaked provider-specific request shape:
+  - `RideHailingProviderCreateRideInput` is `{ orderId, params: Record<...> }`;
+  - CaoCao adapter requires `params.car_type`;
+  - trade create-order therefore knows and chooses a single provider vehicle
+    type before calling the port.
+
+## Target Claims
+
+- `trade_orders.items[*].resolution` means final service resolution only.
+- Before provider acceptance / callback / detail confirms the final service
+  vehicle, a RideHailing choice-set item remains unresolved.
+- Provider binding and dispatch submission facts are RideHailing execution
+  facts. Preferred storage is `ride_hailing_orders`, not
+  `trade_orders.items`.
+- The provider port should expose a provider-neutral create contract:
+  - route, departure, rider/contact facts;
+  - callback routing material;
+  - user-authorized candidate vehicles with provider quote snapshots;
+  - no raw CaoCao `car_type` at the trade use-case boundary.
+- A provider adapter records which candidate(s) it actually submitted:
+  - CaoCao should submit the selected candidate set to `/common/orderCarV2` as a
+    multi-vehicle order using `service_type_price`;
+  - only providers without multi-vehicle order capability choose a fallback
+    candidate internally.
+- The order detail page's dispatching candidate vehicle section remains valid
+  and is not the problem being solved.
+
+## Data Placement Decision
+
+Recommended direction:
+
+- Store dispatch binding on RideHailing execution state:
+  - provider instance id;
+  - provider type;
+  - provider order id;
+  - provider snapshot from create;
+  - submitted candidate relation / submitted provider vehicle type(s);
+  - provider quote id / estimate amount used for the create request when
+    relevant.
+- Do not store this binding inside `choiceSet.resolution`.
+- Keep `trade_orders.items` as commercial order content:
+  - candidate set authorized by the user;
+  - final resolution only after the service vehicle is known.
+
+Chosen shape:
+
+- Option A: add nullable `dispatch_binding` JSON snapshot to
+  `ride_hailing_orders`.
+- Option B: add a child `ride_hailing_dispatches` record if retries,
+  multi-provider dispatch attempts, or dispatch history are in scope.
+
+Decision: Option A for the smallest safe realignment. No retry/history record is
+introduced in this slice.
+
+## Implementation Notes
+
+- `RideHailingProviderPort.createRide` now accepts a provider-neutral route,
+  rider/contact facts, and candidate set instead of raw CaoCao params.
+- CaoCao adapter submits multiple selected candidates through `orderCarV2`
+  using `is_simultaneously_call=1` and `service_type_price`, then records
+  `MULTI_CANDIDATE` when more than one candidate is submitted.
+- create-order keeps the choice-set item unresolved after provider create and
+  stores provider order binding on `ride_hailing_orders.dispatch_binding`.
+- provider sync writes final choice-set resolution when the provider lifecycle
+  confirms service has progressed to `ACCEPTED` or later and either the
+  provider detail identifies the service vehicle type or the dispatch binding
+  has only one submitted candidate.
+- fake CaoCao server supports multi-vehicle `orderCarV2` and records submitted
+  car types so system scenarios can prove adapter behavior through the real
+  provider HTTP boundary.
+- Order Detail therefore hides "服务车型" while the order is still
+  `DISPATCHING`, but may show it after provider acceptance.
+
+## Impact Handshake Draft
+
+- Address and Object:
+  - move provider binding source-of-truth from
+    `trade_orders.items[*].resolution.providerBinding` to RideHailing execution
+    storage;
+  - make `choiceSet.resolution` absent while order is still only dispatching;
+  - lift single-vehicle dispatch choice from trade create-order into provider
+    adapter behavior.
+- State Diff:
+  - From: `DISPATCHING` + `item.resolution.sku` populated by dispatch policy.
+  - To: `DISPATCHING` + `item.resolution = null`, with provider binding stored
+    on RideHailing execution facts.
+- Blast Radius Forecast:
+  - backend order model and persistence;
+  - provider context loading and cancellation / sync flows;
+  - order detail projection;
+  - frontend "服务车型" visibility through returned data;
+  - scenario tests asserting resolved vehicle visibility.
+- Invariants Check:
+  - create-order still persists enough provider binding to cancel, sync, and
+    poll provider order detail;
+  - dispatching candidate vehicles remain visible on the order detail page;
+  - provider create failure still cancels local order and returns ordering
+    failure;
+  - final bill remains based on provider final settlement.
+- Verification:
+  - focused backend tests for create-order persisted shape;
+  - provider adapter test for single-provider fallback selection;
+  - scenario update proving `DISPATCHING` order has dispatching candidates but
+    no resolved service vehicle section;
+  - existing cancellation and provider sync scenarios proving provider binding
+    still works after moving storage.
+
+## Verification Status
+
+- Implementation complete.
+- Completed:
+  - `pnpm check:type:backend`
+  - `pnpm --filter @partner-up-dev/fake-caocao-server typecheck`
+  - `pnpm test:unit:backend apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts`
+  - `pnpm --filter @partner-up-dev/fake-caocao-server exec vitest run src/server.test.ts src/state.test.ts`
+  - `pnpm --filter @partner-up-dev/fake-caocao-server test`
+  - `pnpm test:scenario:backend apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts apps/backend/tests/ride-hailing/admin-ride-hailing-order.scenario.test.ts apps/backend/tests/ride-hailing/ride-hailing-order-foundation.scenario.test.ts`
+  - `pnpm test:scenario:system tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts`
+  - `pnpm check:type:frontend`
+  - `pnpm db:lint`
+  - `pnpm db:check`
+  - `pnpm check:format`
+  - `pnpm check:lint`
+  - `pnpm check:build:backend`
+  - `pnpm check:build:frontend`
+  - `git diff --check`
+- Notes:
+  - `pnpm check:lint` passed with existing report-only naming audit findings for
+    `RideHailingOrderContent` and `RideHailingOrderingContent`.
+  - 2026-06-30 correction after reviewing CaoCao docs: CaoCao supports
+    multi-vehicle `orderCarV2`. Adapter, fake server, and system scenario were
+    updated to prove multi-candidate dispatch.
+  - The worktree also contains separate provider-cancellation order lifecycle
+    changes tracked by
+    `tasks/ride-hailing-dispatch-timeout-order-status-diagnosis/00-task-packet.md`;
+    they were not reverted or folded into this packet.
+
+## Next Step
+
+- Human review of the model split and migration.
diff --git a/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts b/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
index 7eabc3885..ff183d6e0 100644
--- a/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
+++ b/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
@@ -122,6 +122,7 @@ async function readFakeCaocaoOrders(): Promise<
   Array<{
     providerOrderId: string;
     phase: string;
+    submittedCarTypes: string[];
   }>
 > {
   const { fakeCaocao } = getScenarioEnvironment();
@@ -135,9 +136,14 @@ async function readFakeCaocaoOrders(): Promise<
     const record = order as Record<string, unknown>;
     assert.equal(typeof record.providerOrderId, "string");
     assert.equal(typeof record.phase, "string");
+    assert.ok(Array.isArray(record.submittedCarTypes));
     return {
       phase: record.phase,
       providerOrderId: record.providerOrderId,
+      submittedCarTypes: record.submittedCarTypes.map((carType) => {
+        assert.equal(typeof carType, "string");
+        return carType;
+      }),
     };
   });
 }
@@ -566,9 +572,11 @@ async function assertRideHailingOrderDetail(
   const expectedDispatchingVehicleLabels = input.expectedDispatchingVehicleLabels ?? [
     "系统曹操快车",
   ];
-  const expectedResolvedVehicleLabel = input.expectedResolvedVehicleLabel ?? "系统曹操快车";
   const expectedRiderNames = input.expectedRiderNames ?? [];
   const expectedStatusTitle = input.expectedStatusTitle ?? "接客中";
+  const expectedResolvedVehicleLabel =
+    input.expectedResolvedVehicleLabel ??
+    (expectedStatusTitle === "派单中" ? null : "系统曹操快车");
 
   await page.getByTestId("order-detail.page").waitFor({
     state: "visible",
@@ -606,24 +614,31 @@ async function assertRideHailingOrderDetail(
   const resolvedVehicleSection = page.getByTestId(
     "order-detail.ride-hailing.resolved-vehicle-section",
   );
-  await resolvedVehicleSection.waitFor({
-    state: "visible",
-    timeout: 10_000,
-  });
-  const resolvedVehicleCards = resolvedVehicleSection.getByTestId(
-    "order-detail.ride-hailing.vehicle-card",
-  );
-  assert.equal(await resolvedVehicleCards.count(), 1);
-  await assertLocatorTextIncludes({
-    actual: resolvedVehicleSection.textContent(),
-    expected: "服务车型",
-    label: "RideHailing resolved vehicle section title",
-  });
-  await assertLocatorTextIncludes({
-    actual: resolvedVehicleSection.textContent(),
-    expected: expectedResolvedVehicleLabel,
-    label: "RideHailing resolved vehicle section item",
-  });
+  if (expectedResolvedVehicleLabel === null) {
+    await resolvedVehicleSection.waitFor({
+      state: "hidden",
+      timeout: 10_000,
+    });
+  } else {
+    await resolvedVehicleSection.waitFor({
+      state: "visible",
+      timeout: 10_000,
+    });
+    const resolvedVehicleCards = resolvedVehicleSection.getByTestId(
+      "order-detail.ride-hailing.vehicle-card",
+    );
+    assert.equal(await resolvedVehicleCards.count(), 1);
+    await assertLocatorTextIncludes({
+      actual: resolvedVehicleSection.textContent(),
+      expected: "服务车型",
+      label: "RideHailing resolved vehicle section title",
+    });
+    await assertLocatorTextIncludes({
+      actual: resolvedVehicleSection.textContent(),
+      expected: expectedResolvedVehicleLabel,
+      label: "RideHailing resolved vehicle section item",
+    });
+  }
   await assertLocatorTextIncludes({
     actual: page.getByTestId("order-detail.ride-hailing.route-section").textContent(),
     expected: "杭州东站",
@@ -894,6 +909,7 @@ scenario("commerce_ride_hailing_ordering_reaches_order_detail", async (ctx) => {
     const fakeOrders = await readFakeCaocaoOrders();
     assert.equal(fakeOrders.length, 1);
     assert.equal(fakeOrders[0]?.phase, "ACCEPTED");
+    assert.deepEqual(fakeOrders[0]?.submittedCarTypes, ["3", "5"]);
     await waitForRideHailingMapMode(page, "PICKING_UP");
 
     const acceptedOrder = await setFakeCaocaoOrderPhase({

From 3c1985d5642e8e96fdf30dc1d7d424b9f73862fb Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Tue, 30 Jun 2026 22:10:39 +0800
Subject: [PATCH 83/94] fix(ride-hailing): switch caocao route query to v1
 polyline API

- replace queryDriverPolylineV2 with queryDriverPolyline in the provider adapter

- send navigation_polyline_type for pickup and dropoff route queries

- align fake Caocao server contract and tests to the v1 route API

- record the staging V2 capability limitation in the task packet
---
 .../services/caocao-provider.test.ts          |  8 ++--
 .../ride-hailing/services/caocao-provider.ts  |  8 +++-
 .../caocao-provider-minimal.openapi.yaml      | 12 +++--
 packages/fake-caocao-server/src/routes.ts     | 32 +++++++++++--
 .../fake-caocao-server/src/server.test.ts     | 47 +++++++++++++++++--
 .../00-task-packet.md                         | 46 +++++++++---------
 6 files changed, 116 insertions(+), 37 deletions(-)

diff --git a/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts b/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
index 3d2f02d57..4c6f30c7e 100644
--- a/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
+++ b/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
@@ -585,7 +585,7 @@ describe("Caocao live order projection", () => {
         );
       }
 
-      if (url.pathname.endsWith("/common/queryDriverPolylineV2")) {
+      if (url.pathname.endsWith("/common/queryDriverPolyline")) {
         routeRequestBodies.push(init?.body?.toString() ?? "");
         return new Response(
           JSON.stringify({
@@ -652,11 +652,11 @@ describe("Caocao live order projection", () => {
       { latitude: 30.2688, longitude: 120.1608 },
     ]);
     expect(routeRequestBodies).toHaveLength(1);
-    expect(new URLSearchParams(routeRequestBodies[0]).get("navigation_polyline_type")).toBeNull();
+    expect(new URLSearchParams(routeRequestBodies[0]).get("navigation_polyline_type")).toBe("1");
     expect(requestPaths).toEqual([
       "/v2/common/queryOrderDetailV2",
       "/v2/common/queryDriverLocationByOrderId",
-      "/v2/common/queryDriverPolylineV2",
+      "/v2/common/queryDriverPolyline",
     ]);
   });
 
@@ -821,7 +821,7 @@ describe("Caocao live order projection", () => {
       const logOutput = stdoutWrite.mock.calls.map(([chunk]) => String(chunk)).join("");
       expect(logOutput).toContain('"marker":"RideHailingProviderCaocao"');
       expect(logOutput).toContain('"event":"caocao_provider_failure"');
-      expect(logOutput).toContain('"endpointPath":"/common/queryDriverPolylineV2"');
+      expect(logOutput).toContain('"endpointPath":"/common/queryDriverPolyline"');
       expect(logOutput).toContain('"providerCode":25011');
       expect(logOutput).toContain('"providerMsg":"订单状态不正确"');
     } finally {
diff --git a/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts b/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
index 7199e133c..ac9485a52 100644
--- a/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
+++ b/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
@@ -302,6 +302,10 @@ const mapCaocaoNavigationRouteKind = (
   return "UNKNOWN";
 };
 
+const toCaocaoNavigationPolylineType = (
+  routeKind: RideHailingProviderNavigationRouteQueryKind,
+): number => (routeKind === "PICKUP" ? 1 : 3);
+
 const parseCaocaoOrderDetail = (data: Record<string, unknown>): RideHailingProviderOrderDetail => {
   const basicOrder = readOptionalRecordField(data, ["basicOrderVO", "basicOrderVo", "basic_order"]);
   const driverRaw = readOptionalRecordField(data, [
@@ -958,10 +962,12 @@ export class CaocaoProviderAdapter implements RideHailingProviderPort {
     providerOrderId: string;
     routeKind: RideHailingProviderNavigationRouteQueryKind;
   }): Promise<RideHailingProviderNavigationRoute | null> {
+    // Staging CaoCao credentials currently expose the v1 polyline route API only.
     const data = await this.request<Record<string, unknown>>(
       "POST",
-      "/common/queryDriverPolylineV2",
+      "/common/queryDriverPolyline",
       {
+        navigation_polyline_type: toCaocaoNavigationPolylineType(input.routeKind),
         order_id: input.providerOrderId,
       },
     );
diff --git a/packages/fake-caocao-server/openapi/provider/caocao-provider-minimal.openapi.yaml b/packages/fake-caocao-server/openapi/provider/caocao-provider-minimal.openapi.yaml
index 498136aeb..aff950d71 100644
--- a/packages/fake-caocao-server/openapi/provider/caocao-provider-minimal.openapi.yaml
+++ b/packages/fake-caocao-server/openapi/provider/caocao-provider-minimal.openapi.yaml
@@ -178,15 +178,15 @@ paths:
             application/json:
               schema:
                 $ref: '#/components/schemas/QueryDriverLocationSuccessResponse'
-  /common/queryDriverPolylineV2:
+  /common/queryDriverPolyline:
     post:
-      operationId: queryDriverPolylineV2
+      operationId: queryDriverPolyline
       requestBody:
         required: true
         content:
           application/x-www-form-urlencoded:
             schema:
-              $ref: '#/components/schemas/QueryDriverPolylineV2Request'
+              $ref: '#/components/schemas/QueryDriverPolylineRequest'
       responses:
         '200':
           description: Query driver polyline success
@@ -1166,11 +1166,12 @@ components:
           $ref: '#/components/schemas/DecimalString'
         waypointList:
           type: string
-    QueryDriverPolylineV2Request:
+    QueryDriverPolylineRequest:
       type: object
       additionalProperties: false
       required:
         - client_id
+        - navigation_polyline_type
         - order_id
         - sign
         - timestamp
@@ -1178,6 +1179,9 @@ components:
         client_id:
           type: string
           minLength: 1
+        navigation_polyline_type:
+          type: string
+          enum: ['1', '3']
         order_id:
           type: string
           minLength: 1
diff --git a/packages/fake-caocao-server/src/routes.ts b/packages/fake-caocao-server/src/routes.ts
index 31b2cc45d..acb6b3f0f 100644
--- a/packages/fake-caocao-server/src/routes.ts
+++ b/packages/fake-caocao-server/src/routes.ts
@@ -661,6 +661,14 @@ const navigationPolylineType = (order: FakeCaocaoOrderState): number => {
   return 0;
 };
 
+const expectedNavigationPolylineTypeForPhase = (
+  phase: FakeCaocaoOrderState["phase"],
+): number | null => {
+  if (phase === "ACCEPTED" || phase === "ARRIVED_AT_PICKUP") return 1;
+  if (phase === "IN_TRIP") return 3;
+  return null;
+};
+
 const queryDriverLocationPayload = (
   order: FakeCaocaoOrderState,
   plannedRoute: readonly FakeCaocaoCoordinate[],
@@ -1287,17 +1295,35 @@ export function createFakeCaocaoApp(input: FakeCaocaoServerAppInput): Hono {
   );
 
   app.post(
-    "/common/queryDriverPolylineV2",
+    "/common/queryDriverPolyline",
     providerRoute(
-      "queryDriverPolylineV2",
-      "/common/queryDriverPolylineV2",
+      "queryDriverPolyline",
+      "/common/queryDriverPolyline",
       async ({ body }) => {
         const form = body as Record<string, string>;
         const providerOrderId = readFirst(form, "order_id");
+        const navigationPolylineTypeRaw = readFirst(form, "navigation_polyline_type");
         const order = providerOrderId ? state.findOrder(providerOrderId) : null;
         if (!order) {
           throw new FakeCaocaoProviderError(40401, "Fake Caocao order not found");
         }
+        if (!navigationPolylineTypeRaw) {
+          throw new FakeCaocaoProviderError(40001, "Missing navigation_polyline_type");
+        }
+        const navigationPolylineType = Number(navigationPolylineTypeRaw);
+        if (
+          !Number.isInteger(navigationPolylineType) ||
+          (navigationPolylineType !== 1 && navigationPolylineType !== 3)
+        ) {
+          throw new FakeCaocaoProviderError(40001, "Invalid navigation_polyline_type");
+        }
+        const expectedNavigationPolylineType = expectedNavigationPolylineTypeForPhase(order.phase);
+        if (
+          expectedNavigationPolylineType === null ||
+          navigationPolylineType !== expectedNavigationPolylineType
+        ) {
+          throw new FakeCaocaoProviderError(25011, "订单状态不正确");
+        }
         const plannedRoute = await resolveMovementRoute({
           order,
           routeKind: movementRouteKind(order),
diff --git a/packages/fake-caocao-server/src/server.test.ts b/packages/fake-caocao-server/src/server.test.ts
index 7340a2df8..72bf4e3c8 100644
--- a/packages/fake-caocao-server/src/server.test.ts
+++ b/packages/fake-caocao-server/src/server.test.ts
@@ -274,10 +274,11 @@ describe("startFakeCaocaoServer", () => {
     expect(driverLocationBody.data.longitude).toBeTypeOf("number");
     expect(driverLocationBody.data.direction).toBeTypeOf("number");
 
-    const driverPolylineResponse = await fetch(`${server.origin}/common/queryDriverPolylineV2`, {
+    const driverPolylineResponse = await fetch(`${server.origin}/common/queryDriverPolyline`, {
       body: signedSearchParams({
         clientId: server.fixture.clientId,
         params: {
+          navigation_polyline_type: "1",
           order_id: createBody.data.orderNo,
           timestamp: "33",
         },
@@ -383,10 +384,11 @@ describe("startFakeCaocaoServer", () => {
     };
     expect(inTripDriverLocationBody.success).toBe(true);
 
-    const inTripPolylineResponse = await fetch(`${server.origin}/common/queryDriverPolylineV2`, {
+    const inTripPolylineResponse = await fetch(`${server.origin}/common/queryDriverPolyline`, {
       body: signedSearchParams({
         clientId: server.fixture.clientId,
         params: {
+          navigation_polyline_type: "3",
           order_id: createBody.data.orderNo,
           timestamp: "36",
         },
@@ -608,10 +610,11 @@ describe("startFakeCaocaoServer", () => {
     });
     server.state.setOrderPhase(created.providerOrderId, "IN_TRIP");
 
-    const firstResponse = await fetch(`${server.origin}/common/queryDriverPolylineV2`, {
+    const firstResponse = await fetch(`${server.origin}/common/queryDriverPolyline`, {
       body: signedSearchParams({
         clientId: server.fixture.clientId,
         params: {
+          navigation_polyline_type: "3",
           order_id: created.providerOrderId,
           timestamp: "41",
         },
@@ -637,10 +640,11 @@ describe("startFakeCaocaoServer", () => {
     expect(firstRoute[1]?.latitude).toBeCloseTo(30.28, 6);
     expect(firstRoute[1]?.longitude).toBeCloseTo(120.201, 6);
 
-    const secondResponse = await fetch(`${server.origin}/common/queryDriverPolylineV2`, {
+    const secondResponse = await fetch(`${server.origin}/common/queryDriverPolyline`, {
       body: signedSearchParams({
         clientId: server.fixture.clientId,
         params: {
+          navigation_polyline_type: "3",
           order_id: created.providerOrderId,
           timestamp: "42",
         },
@@ -668,6 +672,41 @@ describe("startFakeCaocaoServer", () => {
     });
   });
 
+  test("requires v1 navigation_polyline_type for driver polyline queries", async () => {
+    server = await startFakeCaocaoServer();
+
+    const created = server.state.createOrder({
+      carType: "3",
+      externalOrderId: "external-order-missing-nav-type",
+    });
+    server.state.setOrderPhase(created.providerOrderId, "ACCEPTED");
+
+    const response = await fetch(`${server.origin}/common/queryDriverPolyline`, {
+      body: signedSearchParams({
+        clientId: server.fixture.clientId,
+        params: {
+          order_id: created.providerOrderId,
+          timestamp: "43",
+        },
+        signKey: server.fixture.signKey,
+      }).toString(),
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+      method: "POST",
+    });
+    const body = (await response.json()) as {
+      code: number;
+      msg: string;
+      success: boolean;
+    };
+
+    expect(response.ok).toBe(true);
+    expect(body.success).toBe(false);
+    expect(body.code).toBe(40001);
+    expect(body.msg).toBe("body(queryDriverPolyline)/navigation_polyline_type is required");
+  });
+
   test("reports admin callback delivery failures", async () => {
     server = await startFakeCaocaoServer();
     const callbackServer = await startCallbackResponseServer({
diff --git a/tasks/ride-hailing-navigation-route-diagnosis/00-task-packet.md b/tasks/ride-hailing-navigation-route-diagnosis/00-task-packet.md
index 2a8f07466..1471ff323 100644
--- a/tasks/ride-hailing-navigation-route-diagnosis/00-task-packet.md
+++ b/tasks/ride-hailing-navigation-route-diagnosis/00-task-packet.md
@@ -49,11 +49,19 @@
   - route-query failures are fully swallowed and are not logged today, so the
     exact provider-side error code/message is not recoverable from current repo
     instrumentation alone
+- Implemented and verified:
+  - backend adapter now calls `POST /common/queryDriverPolyline`
+  - adapter request includes `navigation_polyline_type`
+  - fake CaoCao server contract now requires `navigation_polyline_type`
+  - fake CaoCao route endpoint no longer models V2-only route querying
+- Targeted validation completed:
+  - `pnpm test:unit:backend -- apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts`
+  - `pnpm --filter @partner-up-dev/fake-caocao-server test -- src/server.test.ts`
 
 ## Current Understanding
 
 - Input type: Reality.
-- Active mode: Diagnose.
+- Active mode: Execute.
 - User-provided symptom is phase-sensitive:
   - `vehicleLocation` present
   - `navigationRoute` always null in staging
@@ -93,26 +101,22 @@
     - current adapter chooses `next*` only when `steps` is empty, so it cannot
       explicitly project the “next order” route while `steps` is also present
       for the previous order
+  - staging evidence captured after diagnostic logging landed:
+    - provider request reached `POST /common/queryDriverPolylineV2`
+    - CaoCao returned business failure `code=453`
+    - message: `app api config not existed or disabled`
+    - conclusion: current staging provider credentials do not expose the V2
+      polyline API capability
+  - implementation decision:
+    - stop using `queryDriverPolylineV2`
+    - pin PartnerUp to `POST /common/queryDriverPolyline`
+    - explicitly send `navigation_polyline_type`
+    - treat this as a provider technical limitation, not a parser bug
 
 ## Next Step
 
-- if implementation starts:
-  1. add explicit diagnostics around `queryDriverRoute()` so staging captures
-     the provider response code/message instead of silently returning `null`
-  2. add a focused backend test covering the "vehicleLocation present, route
-     query failure -> navigationRoute null" path
-  3. align fake-server/test truth with the current V2 contract surface:
-     - current fake OpenAPI spec requires only `order_id`, matching official V2
-     - current backend unit test still asserts
-       `navigation_polyline_type` is absent, which matches the current official
-       V2 request contract
-     - current fake route handler always returns a success payload for any
-       existing order id and does not model provider-side route-query failures
-       by phase/capability/account
-      - official V2 docs restrict route queries to provider statuses `9`, `12`,
-        and `3`, but the fake route handler does not enforce that restriction,
-        so system scenarios cannot catch a status-window rejection from the real
-        provider
-  4. after one staging sample is captured, decide whether the real fix is
-     provider error handling, status-window alignment, or provider-account
-     capability/config correction
+- implement the v1 route-query contract everywhere it is authoritative:
+  1. backend CaoCao adapter calls `POST /common/queryDriverPolyline`
+  2. request includes `navigation_polyline_type=1|3`
+  3. fake CaoCao server validates the v1 request shape and phase constraints
+  4. tests assert the repo no longer depends on V2 route-query capability

From edc94f4500972c5487854d41b63b12ebec3f67b5 Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Tue, 30 Jun 2026 22:54:29 +0800
Subject: [PATCH 84/94] fix(ride-hailing): align caocao settlement and detail
 truth

- source CaoCao terminal settlement from queryOrderDetailV2 orderFeeVo.totalFee via queryFinalSettlement without changing the provider port
- treat basicOrderVO.requireLevel as the only authoritative provider vehicle type code and ignore non-requireLevel detail fields
- update durable docs, fake provider fixtures, and scenario coverage for the revised adapter contract
---
 .../services/caocao-provider.test.ts          |  98 +++++++---
 .../ride-hailing/services/caocao-provider.ts  | 121 +++---------
 .../caocao-callback-route.scenario.test.ts    | 149 ++++++---------
 docs/20-product-tdd/ecommerce-contracts.md    |  49 ++---
 .../caocao-provider-minimal.openapi.yaml      |  13 +-
 packages/fake-caocao-server/src/routes.ts     |   6 +-
 .../fake-caocao-server/src/server.test.ts     |  30 ++-
 .../00-task-packet.md                         | 176 ++++++++++--------
 .../00-task-packet.md                         |  10 +
 9 files changed, 337 insertions(+), 315 deletions(-)

diff --git a/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts b/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
index 4c6f30c7e..fdb64a896 100644
--- a/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
+++ b/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
@@ -547,20 +547,23 @@ describe("Caocao live order projection", () => {
             code: 200,
             data: {
               basicOrderVO: {
+                requireLevel: 3,
                 status: "12",
               },
-              driverInfoVO: {
+              driverInfoVo: {
                 carBrand: "几何",
-                card: "浙A12345",
+                carNo: "浙A12345",
+                carType: "几何A",
                 color: "白色",
+                driverName: "张师傅",
+                driverPhone: "13800138001",
                 location: {
                   direction: 90,
-                  latitude: 30.2688,
-                  longitude: 120.1608,
+                  lat: 30.2688,
+                  lng: 120.1608,
                   speed: 0,
                 },
-                name: "张师傅",
-                phone: "13800138001",
+                serviceType: 7,
               },
             },
             success: true,
@@ -637,6 +640,8 @@ describe("Caocao live order projection", () => {
 
     expect(detail.phase).toBe("12");
     expect(detail.statusLabel).toBe("司机已到达");
+    expect(detail.providerVehicleTypeCode).toBe("3");
+    expect(detail.providerVehicleTypeName).toBeNull();
     expect(detail.driver?.driverName).toBe("张师傅");
     expect(detail.vehicle?.plate).toBe("浙A12345");
     expect(detail.vehicleLocation?.headingDegrees).toBe(90);
@@ -660,24 +665,64 @@ describe("Caocao live order projection", () => {
     ]);
   });
 
-  it("queries authoritative final settlement from queryCalculateBill companyFee", async () => {
+  it("does not infer provider vehicle type from non-requireLevel detail fields", async () => {
+    const fetchImpl: typeof fetch = async () =>
+      new Response(
+        JSON.stringify({
+          code: 200,
+          data: {
+            basicOrderVO: {
+              carType: 3,
+              serviceType: 3,
+              status: "9",
+            },
+            driverInfoVo: {
+              carBrand: "几何",
+              carNo: "浙A12345",
+              carType: "几何A",
+              color: "白色",
+              driverName: "张师傅",
+              driverPhone: "13800138001",
+              serviceType: 3,
+            },
+          },
+          success: true,
+        }),
+        { status: 200 },
+      );
+    const adapter = new CaocaoProviderAdapter({
+      providerInstance: caocaoProviderInstance(),
+      fetchImpl,
+    });
+
+    const detail = await adapter.queryOrderDetail({ providerOrderId: "CC123456" });
+
+    expect(detail.phase).toBe("9");
+    expect(detail.providerVehicleTypeCode).toBeNull();
+    expect(detail.providerVehicleTypeName).toBeNull();
+  });
+
+  it("queries authoritative final settlement from queryOrderDetailV2 orderFeeVo.totalFee", async () => {
     const requestPaths: string[] = [];
-    const requestBodies: string[] = [];
     const fetchImpl: typeof fetch = async (input, init) => {
       const requestUrl =
         typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
       const url = new URL(requestUrl);
       requestPaths.push(url.pathname);
 
-      if (url.pathname.endsWith("/common/queryCalculateBill")) {
-        requestBodies.push(init?.body?.toString() ?? "");
+      if (url.pathname.endsWith("/common/queryOrderDetailV2")) {
+        expect(init).toBeUndefined();
+        expect(url.searchParams.get("order_id")).toBe("CC123456");
         return new Response(
           JSON.stringify({
             code: 200,
             data: {
-              companyFee: 1200,
-              personalFee: 200,
-              totalFee: 1400,
+              basicOrderVO: {
+                status: "5",
+              },
+              orderFeeVo: {
+                totalFee: 1200,
+              },
             },
             success: true,
           }),
@@ -694,16 +739,18 @@ describe("Caocao live order projection", () => {
 
     const bill = await adapter.queryFinalSettlement({ providerOrderId: "CC123456" });
 
-    expect(requestPaths).toEqual(["/v2/common/queryCalculateBill"]);
-    expect(new URLSearchParams(requestBodies[0] ?? "").get("order_id")).toBe("CC123456");
+    expect(requestPaths).toEqual(["/v2/common/queryOrderDetailV2"]);
     expect(bill).toEqual({
       amountFen: 1200,
       currency: "CNY",
       providerOrderId: "CC123456",
       providerSnapshot: {
-        companyFee: 1200,
-        personalFee: 200,
-        totalFee: 1400,
+        basicOrderVO: {
+          status: "5",
+        },
+        orderFeeVo: {
+          totalFee: 1200,
+        },
       },
     });
   });
@@ -751,13 +798,20 @@ describe("Caocao live order projection", () => {
     });
   });
 
-  it("treats queryCalculateBill status-not-ready failures as no authoritative final settlement yet", async () => {
+  it("treats missing orderFeeVo.totalFee as no authoritative final settlement yet", async () => {
     const fetchImpl: typeof fetch = async () =>
       new Response(
         JSON.stringify({
-          code: 25011,
-          msg: "订单状态不正确",
-          success: false,
+          code: 200,
+          data: {
+            basicOrderVO: {
+              status: "5",
+            },
+            orderFeeVo: {
+              totalFee: null,
+            },
+          },
+          success: true,
         }),
         { status: 200 },
       );
diff --git a/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts b/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
index ac9485a52..db1beb030 100644
--- a/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
+++ b/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
@@ -1,6 +1,6 @@
 import { createHash, timingSafeEqual } from "node:crypto";
 import type { RideHailingProviderInstance } from "../../../entities/ride-hailing-provider";
-import { ProblemDetailsError, throwHttpProblem } from "../../../lib/problem-details";
+import { throwHttpProblem } from "../../../lib/problem-details";
 import type {
   CaocaoOrderStatusCallback,
   CaocaoOrderStatusCallbackEvent,
@@ -307,52 +307,16 @@ const toCaocaoNavigationPolylineType = (
 ): number => (routeKind === "PICKUP" ? 1 : 3);
 
 const parseCaocaoOrderDetail = (data: Record<string, unknown>): RideHailingProviderOrderDetail => {
-  const basicOrder = readOptionalRecordField(data, ["basicOrderVO", "basicOrderVo", "basic_order"]);
-  const driverRaw = readOptionalRecordField(data, [
-    "driver",
-    "driverInfoVO",
-    "driverInfoVo",
-    "driver_info",
-  ]);
-  const vehicleRaw = readOptionalRecordField(data, [
-    "vehicle",
-    "driverInfoVO",
-    "driverInfoVo",
-    "driver_info",
-  ]);
-  const phase =
-    readOptionalStringField(data, ["phase", "status"]) ??
-    readOptionalStringField(basicOrder, ["phase", "status"]) ??
-    "UNKNOWN";
-  const driverName = readOptionalStringField(driverRaw, ["driverName", "driver_name", "name"]);
-  const driverPhone = readOptionalStringField(driverRaw, ["driverPhone", "driver_phone", "phone"]);
-  const plate = readOptionalStringField(vehicleRaw, [
-    "plate",
-    "vehiclePlate",
-    "vehicle_plate",
-    "carNo",
-    "car_no",
-    "card",
-  ]);
-  const brand = readOptionalStringField(vehicleRaw, [
-    "brand",
-    "vehicleBrand",
-    "vehicle_brand",
-    "carBrand",
-  ]);
-  const color = readOptionalStringField(vehicleRaw, ["color", "vehicleColor", "vehicle_color"]);
-  const providerVehicleTypeCode = readOptionalStringField(basicOrder, [
-    "serviceType",
-    "service_type",
-    "carType",
-    "car_type",
-  ]);
-  const providerVehicleTypeName = readOptionalStringField(basicOrder, [
-    "serviceTypeName",
-    "service_type_name",
-    "carTypeName",
-    "car_type_name",
-  ]);
+  const basicOrder = readOptionalRecordField(data, ["basicOrderVO"]);
+  const driverRaw = readOptionalRecordField(data, ["driverInfoVo"]);
+  const vehicleRaw = driverRaw;
+  const phase = readOptionalStringField(basicOrder, ["status"]) ?? "UNKNOWN";
+  const driverName = readOptionalStringField(driverRaw, ["driverName"]);
+  const driverPhone = readOptionalStringField(driverRaw, ["driverPhone"]);
+  const plate = readOptionalStringField(vehicleRaw, ["carNo"]);
+  const brand = readOptionalStringField(vehicleRaw, ["carBrand"]);
+  const color = readOptionalStringField(vehicleRaw, ["color"]);
+  const providerVehicleTypeCode = readOptionalStringField(basicOrder, ["requireLevel"]);
 
   return {
     driver:
@@ -364,7 +328,7 @@ const parseCaocaoOrderDetail = (data: Record<string, unknown>): RideHailingProvi
         : null,
     phase,
     providerVehicleTypeCode,
-    providerVehicleTypeName,
+    providerVehicleTypeName: null,
     providerSnapshot: data,
     statusLabel: buildCaocaoStatusLabel(phase),
     vehicle:
@@ -381,45 +345,21 @@ const parseCaocaoOrderDetail = (data: Record<string, unknown>): RideHailingProvi
 
 const normalizeFenAmount = (value: number): number => Math.round(value);
 
-const isCaocaoFinalSettlementNotReadyMessage = (message: string | null): boolean => {
-  if (!message) return false;
-  return (
-    message.includes("Caocao API failed: 25011") ||
-    message.includes("订单未支付") ||
-    message.includes("未支付") ||
-    message.includes("待支付") ||
-    message.includes("订单状态不正确") ||
-    message.includes("暂无账单") ||
-    message.includes("账单未生成")
-  );
-};
-
-const parseCaocaoCalculateBillResult = (input: {
+const parseCaocaoOrderDetailFinalSettlementResult = (input: {
   data: Record<string, unknown>;
   providerOrderId: string;
-}): RideHailingProviderFinalSettlementResult => {
-  const companyFee = readOptionalNumberField(input.data, ["companyFee", "company_fee"]);
-  if (companyFee === null) {
-    throw new Error("Caocao queryCalculateBill response is missing companyFee");
-  }
+}): RideHailingProviderFinalSettlementResult | null => {
+  const orderFee = readOptionalRecordField(input.data, ["orderFeeVO", "orderFeeVo", "order_fee"]);
+  const totalFee = readOptionalNumberField(orderFee, ["totalFee"]);
+  if (totalFee === null) return null;
   return {
-    amountFen: normalizeFenAmount(companyFee),
+    amountFen: normalizeFenAmount(totalFee),
     currency: "CNY",
     providerOrderId: input.providerOrderId,
     providerSnapshot: input.data,
   };
 };
 
-const isCaocaoFinalSettlementNotReadyError = (error: unknown): boolean => {
-  const message =
-    error instanceof ProblemDetailsError
-      ? error.message
-      : error instanceof Error
-        ? error.message
-        : null;
-  return isCaocaoFinalSettlementNotReadyMessage(message);
-};
-
 const parseCaocaoDriverRoute = (
   data: Record<string, unknown>,
 ): RideHailingProviderNavigationRoute => {
@@ -925,24 +865,13 @@ export class CaocaoProviderAdapter implements RideHailingProviderPort {
   async queryFinalSettlement(input: {
     providerOrderId: string;
   }): Promise<RideHailingProviderFinalSettlementResult | null> {
-    try {
-      const data = await this.request<Record<string, unknown>>(
-        "POST",
-        "/common/queryCalculateBill",
-        {
-          order_id: input.providerOrderId,
-        },
-      );
-      return parseCaocaoCalculateBillResult({
-        data,
-        providerOrderId: input.providerOrderId,
-      });
-    } catch (error) {
-      if (isCaocaoFinalSettlementNotReadyError(error)) {
-        return null;
-      }
-      throw error;
-    }
+    const data = await this.request<Record<string, unknown>>("GET", "/common/queryOrderDetailV2", {
+      order_id: input.providerOrderId,
+    });
+    return parseCaocaoOrderDetailFinalSettlementResult({
+      data,
+      providerOrderId: input.providerOrderId,
+    });
   }
 
   async queryDriverLocation(input: {
diff --git a/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts b/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts
index 1cc3a34bb..a4b4a7456 100644
--- a/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts
+++ b/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts
@@ -392,7 +392,6 @@ scenario("legacy Caocao callback alias resolves provider and requires local orde
 scenario("Caocao callback updates ride execution and creates final bill", async () => {
   const creator = await givenUser("caocao-callback-order-owner");
   let detailQueryCount = 0;
-  let billQueryCount = 0;
   const fakeCaocao = createServer((request, response) => {
     if (request.url?.startsWith("/v2/common/queryOrderDetailV2")) {
       detailQueryCount += 1;
@@ -401,15 +400,21 @@ scenario("Caocao callback updates ride execution and creates final bill", async
         JSON.stringify({
           code: 200,
           data: {
-            phase: "FINISHED",
-            driver: {
+            basicOrderVO: {
+              requireLevel: 3,
+              status: "5",
+            },
+            driverInfoVo: {
+              carBrand: "曹操快车",
+              carNo: "浙B99999",
+              carType: "曹操快车",
+              color: "蓝色",
               driverName: "李师傅",
               driverPhone: "13900139000",
+              serviceType: 3,
             },
-            vehicle: {
-              brand: "曹操快车",
-              color: "蓝色",
-              plate: "浙B99999",
+            orderFeeVo: {
+              totalFee: 5000,
             },
           },
           success: true,
@@ -417,22 +422,6 @@ scenario("Caocao callback updates ride execution and creates final bill", async
       );
       return;
     }
-    if (request.url?.startsWith("/v2/common/queryCalculateBill")) {
-      billQueryCount += 1;
-      response.writeHead(200, { "Content-Type": "application/json" });
-      response.end(
-        JSON.stringify({
-          code: 200,
-          data: {
-            companyFee: 5000,
-            personalFee: 0,
-            totalFee: 5000,
-          },
-          success: true,
-        }),
-      );
-      return;
-    }
     response.writeHead(404, { "Content-Type": "application/json" });
     response.end(JSON.stringify({ code: 404, success: false }));
   });
@@ -684,8 +673,7 @@ scenario("Caocao callback updates ride execution and creates final bill", async
     );
 
     assert.equal(response.status, 200);
-    assert.equal(detailQueryCount, 1);
-    assert.equal(billQueryCount, 1);
+    assert.equal(detailQueryCount, 2);
     const responseBody = (await response.json()) as {
       code: number;
       success: boolean;
@@ -713,11 +701,10 @@ scenario("Caocao callback updates ride execution and creates final bill", async
 });
 
 scenario(
-  "Caocao callback creates final bill for cancelled ride when queryCalculateBill returns non-zero companyFee",
+  "Caocao callback creates final bill for cancelled ride when queryOrderDetailV2 exposes non-zero totalFee",
   async () => {
     const creator = await givenUser("caocao-callback-cancelled-order-owner");
     let detailQueryCount = 0;
-    let billQueryCount = 0;
     let confirmFeeCount = 0;
     const fakeCaocao = createServer((request, response) => {
       if (request.url?.startsWith("/v2/common/queryOrderDetailV2")) {
@@ -727,15 +714,21 @@ scenario(
           JSON.stringify({
             code: 200,
             data: {
-              phase: "CANCELLED",
-              driver: {
+              basicOrderVO: {
+                requireLevel: 3,
+                status: "20",
+              },
+              driverInfoVo: {
+                carBrand: "曹操快车",
+                carNo: "浙C88888",
+                carType: "曹操快车",
+                color: "白色",
                 driverName: "王师傅",
                 driverPhone: "13700137000",
+                serviceType: 3,
               },
-              vehicle: {
-                brand: "曹操快车",
-                color: "白色",
-                plate: "浙C88888",
+              orderFeeVo: {
+                totalFee: 1270,
               },
             },
             success: true,
@@ -743,22 +736,6 @@ scenario(
         );
         return;
       }
-      if (request.url?.startsWith("/v2/common/queryCalculateBill")) {
-        billQueryCount += 1;
-        response.writeHead(200, { "Content-Type": "application/json" });
-        response.end(
-          JSON.stringify({
-            code: 200,
-            data: {
-              companyFee: 1270,
-              personalFee: 0,
-              totalFee: 1270,
-            },
-            success: true,
-          }),
-        );
-        return;
-      }
       if (request.url?.startsWith("/v2/common/feeConfirm")) {
         confirmFeeCount += 1;
         response.writeHead(200, { "Content-Type": "application/json" });
@@ -833,8 +810,7 @@ scenario(
       );
 
       assert.equal(response.status, 200);
-      assert.equal(detailQueryCount, 1);
-      assert.equal(billQueryCount, 1);
+      assert.equal(detailQueryCount, 2);
       const updatedOrder = await tradeOrderRepo.findById(orderSeed.order.id);
       assert.ok(updatedOrder);
       assert.equal(updatedOrder.status, "CANCELLED");
@@ -905,11 +881,10 @@ scenario(
 );
 
 scenario(
-  "Caocao callback keeps terminal sync when queryCalculateBill has no authoritative result yet",
+  "Caocao callback keeps terminal sync when queryOrderDetailV2 has no authoritative totalFee yet",
   async () => {
     const creator = await givenUser("caocao-callback-bill-miss-owner");
     let detailQueryCount = 0;
-    let billQueryCount = 0;
     const fakeCaocao = createServer((request, response) => {
       if (request.url?.startsWith("/v2/common/queryOrderDetailV2")) {
         detailQueryCount += 1;
@@ -918,15 +893,21 @@ scenario(
           JSON.stringify({
             code: 200,
             data: {
-              phase: "CANCELLED",
-              driver: {
+              basicOrderVO: {
+                requireLevel: 3,
+                status: "20",
+              },
+              driverInfoVo: {
+                carBrand: "曹操快车",
+                carNo: "浙D66666",
+                carType: "曹操快车",
+                color: "黑色",
                 driverName: "赵师傅",
                 driverPhone: "13600136000",
+                serviceType: 3,
               },
-              vehicle: {
-                brand: "曹操快车",
-                color: "黑色",
-                plate: "浙D66666",
+              orderFeeVo: {
+                totalFee: null,
               },
             },
             success: true,
@@ -934,18 +915,6 @@ scenario(
         );
         return;
       }
-      if (request.url?.startsWith("/v2/common/queryCalculateBill")) {
-        billQueryCount += 1;
-        response.writeHead(200, { "Content-Type": "application/json" });
-        response.end(
-          JSON.stringify({
-            code: 25011,
-            msg: "订单状态不正确",
-            success: false,
-          }),
-        );
-        return;
-      }
       response.writeHead(404, { "Content-Type": "application/json" });
       response.end(JSON.stringify({ code: 404, success: false }));
     });
@@ -990,8 +959,7 @@ scenario(
       );
 
       assert.equal(response.status, 200);
-      assert.equal(detailQueryCount, 1);
-      assert.equal(billQueryCount, 1);
+      assert.equal(detailQueryCount, 2);
       const updatedOrder = await tradeOrderRepo.findById(orderSeed.order.id);
       assert.ok(updatedOrder);
       assert.equal(updatedOrder.status, "CANCELLED");
@@ -1008,27 +976,37 @@ scenario(
   },
 );
 
-scenario("Caocao callback does not block terminal sync when queryCalculateBill fails", async () => {
+scenario("Caocao callback does not block terminal sync when final settlement detail reread fails", async () => {
   const creator = await givenUser("caocao-callback-bill-failure-owner");
   let detailQueryCount = 0;
-  let billQueryCount = 0;
   const fakeCaocao = createServer((request, response) => {
     if (request.url?.startsWith("/v2/common/queryOrderDetailV2")) {
       detailQueryCount += 1;
+      if (detailQueryCount > 1) {
+        response.writeHead(500, { "Content-Type": "application/json" });
+        response.end(JSON.stringify({ code: 500, success: false }));
+        return;
+      }
       response.writeHead(200, { "Content-Type": "application/json" });
       response.end(
         JSON.stringify({
           code: 200,
           data: {
-            phase: "FINISHED",
-            driver: {
+            basicOrderVO: {
+              requireLevel: 3,
+              status: "5",
+            },
+            driverInfoVo: {
+              carBrand: "曹操快车",
+              carNo: "浙E55555",
+              carType: "曹操快车",
+              color: "银色",
               driverName: "周师傅",
               driverPhone: "13500135000",
+              serviceType: 3,
             },
-            vehicle: {
-              brand: "曹操快车",
-              color: "银色",
-              plate: "浙E55555",
+            orderFeeVo: {
+              totalFee: null,
             },
           },
           success: true,
@@ -1036,12 +1014,6 @@ scenario("Caocao callback does not block terminal sync when queryCalculateBill f
       );
       return;
     }
-    if (request.url?.startsWith("/v2/common/queryCalculateBill")) {
-      billQueryCount += 1;
-      response.writeHead(500, { "Content-Type": "application/json" });
-      response.end(JSON.stringify({ code: 500, success: false }));
-      return;
-    }
     response.writeHead(404, { "Content-Type": "application/json" });
     response.end(JSON.stringify({ code: 404, success: false }));
   });
@@ -1086,8 +1058,7 @@ scenario("Caocao callback does not block terminal sync when queryCalculateBill f
     );
 
     assert.equal(response.status, 200);
-    assert.equal(detailQueryCount, 1);
-    assert.equal(billQueryCount, 1);
+    assert.equal(detailQueryCount, 2);
     const updatedRide = await rideOrderRepo.findByOrderId(orderSeed.order.id as TradeOrderId);
     assert.equal(updatedRide?.executionPhase, "FINISHED");
     assert.equal(updatedRide?.finalSettlementInput, null);
diff --git a/docs/20-product-tdd/ecommerce-contracts.md b/docs/20-product-tdd/ecommerce-contracts.md
index 1d4f71e67..788a299c3 100644
--- a/docs/20-product-tdd/ecommerce-contracts.md
+++ b/docs/20-product-tdd/ecommerce-contracts.md
@@ -417,32 +417,33 @@ RideHailing:
 - provider adapter computes external order id dynamically; the provider-side
   order id returned by create is stored in the RideHailing dispatch binding
   together with provider instance identity
-- provider detail sync owns execution truth only: execution phase, driver
+- provider order-detail reads own execution truth: execution phase, driver
   snapshot, vehicle snapshot, and other ride-lifecycle facts come from
-  provider order-detail reads rather than from billing queries
-- provider authoritative final settlement truth is a separate source from
-  execution truth:
-  - provider order-detail reads must not directly materialize
-    `finalSettlementInput`
-  - `ride_hailing_orders.finalSettlementInput` must be derived only from the
-    provider's authoritative payable query
-  - for CaoCao, that source is `queryCalculateBill`
-  - for CaoCao, `finalSettlementInput.amountFen` binds `companyFee` rather
-    than `totalFee`:
-    `companyFee` is the amount the PartnerUp platform owes CaoCao, and
-    therefore the amount PartnerUp should charge the user for the fulfilled
-    ride or cancellation
+  provider order-detail reads
+- provider final settlement truth must come from a provider query result, but
+  the concrete source depends on the provider's currently integrated API
+  surface
+- for the currently integrated CaoCao surface:
+  - `ride_hailing_orders.finalSettlementInput` is derived from
+    `queryOrderDetailV2.orderFeeVo.totalFee`
+  - `finalSettlementInput.amountFen` binds `orderFeeVo.totalFee`
+  - `orderFeeVo.companyPayAmount` is not the current settlement source
 - local RideHailing terminal phases that may trigger final-settlement capture
   are only `FINISHED` and `CANCELLED`
 - terminal final-settlement capture is best-effort:
   - when a local RideHailing order is observed in `FINISHED` or `CANCELLED`
-    and `finalSettlementInput` is still null, backend may attempt the provider
-    payable query inline on that natural sync path
-  - if the provider payable query does not yet return an authoritative
-    result, backend keeps `finalSettlementInput = null` and relies on a later
-    natural sync trigger rather than fabricating settlement truth
-  - failure or no-result from the provider payable query must not block or
-    roll back the local terminal execution-phase sync
+    and `finalSettlementInput` is still null, backend may issue the provider
+    final-settlement query inline on that natural sync path
+  - for the currently integrated CaoCao surface, `queryFinalSettlement()` is a
+    dedicated adapter read that internally calls `queryOrderDetailV2` and reads
+    `orderFeeVo.totalFee`
+  - if that final-settlement query does not yet return an authoritative
+    `orderFeeVo.totalFee`, backend keeps `finalSettlementInput = null` and
+    relies on a later natural sync trigger rather than fabricating settlement truth
+  - provider order-detail sync must not directly materialize
+    `finalSettlementInput`; terminal settlement capture still goes through the
+    provider final-settlement query contract, even if the adapter reuses the
+    same provider endpoint under the hood
 - final Bill is created only after provider final settlement input is
   committed, not lazily from Order Detail reads
 - cancellation-fee query is a separate pre-cancel decision surface:
@@ -452,9 +453,9 @@ RideHailing:
   - if the previewed cancellation fee is greater than zero, frontend must show
     the amount and require explicit confirmation before cancellation
   - it must not be reused as post-cancel final settlement truth
-- for cancelled RideHailing orders, if the provider authoritative payable query
-  later returns a non-zero `companyFee`, backend may still materialize that
-  result through the same final Bill model
+- for cancelled RideHailing orders, if the provider final-settlement query
+  later returns a non-zero `orderFeeVo.totalFee`, backend may still materialize
+  that result through the same final Bill model
 
 ## Termination Contract
 
diff --git a/packages/fake-caocao-server/openapi/provider/caocao-provider-minimal.openapi.yaml b/packages/fake-caocao-server/openapi/provider/caocao-provider-minimal.openapi.yaml
index aff950d71..f3255691c 100644
--- a/packages/fake-caocao-server/openapi/provider/caocao-provider-minimal.openapi.yaml
+++ b/packages/fake-caocao-server/openapi/provider/caocao-provider-minimal.openapi.yaml
@@ -379,8 +379,10 @@ components:
         - driverNo
         - carNo
         - carBrand
+        - carType
         - color
         - location
+        - serviceType
       properties:
         driverName:
           type: string
@@ -396,11 +398,17 @@ components:
         carBrand:
           type: string
           minLength: 1
+        carType:
+          type: string
+          minLength: 1
         color:
           type: string
           minLength: 1
         location:
           $ref: '#/components/schemas/DriverInfoLocation'
+        serviceType:
+          type: integer
+          enum: [2, 3, 4, 5, 7, 12, 14, 15]
     OrderFeeVo:
       type: object
       additionalProperties: false
@@ -612,9 +620,6 @@ components:
             - 'null'
         callerPhone:
           $ref: '#/components/schemas/PhoneNumber'
-        carType:
-          type: integer
-          enum: [2, 3, 4, 5, 7, 12, 14, 15]
         cityCode:
           $ref: '#/components/schemas/CityCode'
         departureTime:
@@ -665,7 +670,7 @@ components:
           $ref: '#/components/schemas/Coordinate'
         requireLevel:
           type: integer
-          enum: [0, 1]
+          enum: [2, 3, 4, 5, 7, 12, 14, 15]
         startAddress:
           type: string
           minLength: 1
diff --git a/packages/fake-caocao-server/src/routes.ts b/packages/fake-caocao-server/src/routes.ts
index acb6b3f0f..c16cb68c4 100644
--- a/packages/fake-caocao-server/src/routes.ts
+++ b/packages/fake-caocao-server/src/routes.ts
@@ -52,6 +52,7 @@ const DRIVER_NO = "FAKE_DRIVER_001";
 const DRIVER_NAME = "曹操测试司机";
 const DRIVER_PHONE = "13900139000";
 const VEHICLE_BRAND = "几何";
+const VEHICLE_MODEL = "几何A";
 const VEHICLE_COLOR = "白色";
 const VEHICLE_PLATE = "浙A·TEST";
 const CALLBACK_INFO_PATTERN =
@@ -559,7 +560,6 @@ const queryOrderDetailPayload = (order: FakeCaocaoOrderState): unknown => {
       beginChargeTime: fromIsoToCaocaoDateTime(order.serviceStartedAt),
       callbackInfo: order.callbackInfo,
       callerPhone: order.callerPhone,
-      carType: Number(order.carType),
       cityCode: order.cityCode,
       departureTime: order.departureTime,
       endAddress: order.endAddress,
@@ -590,7 +590,7 @@ const queryOrderDetailPayload = (order: FakeCaocaoOrderState): unknown => {
         lat: order.origin.latitude,
         lng: order.origin.longitude,
       },
-      requireLevel: 0,
+      requireLevel: Number(order.carType),
       startAddress: order.startAddress,
       startName: order.startName,
       startServiceTime: fromIsoToCaocaoDateTime(order.acceptedAt),
@@ -604,6 +604,7 @@ const queryOrderDetailPayload = (order: FakeCaocaoOrderState): unknown => {
     driverInfoVo: driver
       ? {
           carBrand: driver.vehicleBrand,
+          carType: VEHICLE_MODEL,
           carNo: driver.vehiclePlate,
           color: driver.vehicleColor,
           driverName: driver.driverName,
@@ -615,6 +616,7 @@ const queryOrderDetailPayload = (order: FakeCaocaoOrderState): unknown => {
             lng: driver.longitude,
             speed: driver.speedKph,
           },
+          serviceType: Number(order.carType),
         }
       : null,
     orderFeeVo: {
diff --git a/packages/fake-caocao-server/src/server.test.ts b/packages/fake-caocao-server/src/server.test.ts
index 72bf4e3c8..4e28b8bac 100644
--- a/packages/fake-caocao-server/src/server.test.ts
+++ b/packages/fake-caocao-server/src/server.test.ts
@@ -211,13 +211,15 @@ describe("startFakeCaocaoServer", () => {
     );
     const detailBody = (await detailResponse.json()) as {
       code: number;
-      data: { basicOrderVO: { status: string } };
+      data: { basicOrderVO: { requireLevel: number; status: string }; driverInfoVo: null };
       success: boolean;
     };
 
     expect(detailResponse.ok).toBe(true);
     expect(detailBody.success).toBe(true);
     expect(detailBody.data.basicOrderVO.status).toBe("1");
+    expect(detailBody.data.basicOrderVO.requireLevel).toBe(5);
+    expect(detailBody.data.driverInfoVo).toBeNull();
 
     const advanceResponse = await fetch(`${server.origin}/__fake_caocao/orders/latest/advance`, {
       method: "POST",
@@ -244,13 +246,19 @@ describe("startFakeCaocaoServer", () => {
     );
     const detailAfterAdvanceBody = (await detailAfterAdvanceResponse.json()) as {
       code: number;
-      data: { basicOrderVO: { status: string } };
+      data: {
+        basicOrderVO: { requireLevel: number; status: string };
+        driverInfoVo: { carType: string; serviceType: number };
+      };
       success: boolean;
     };
 
     expect(detailAfterAdvanceResponse.ok).toBe(true);
     expect(detailAfterAdvanceBody.success).toBe(true);
     expect(detailAfterAdvanceBody.data.basicOrderVO.status).toBe("9");
+    expect(detailAfterAdvanceBody.data.basicOrderVO.requireLevel).toBe(5);
+    expect(detailAfterAdvanceBody.data.driverInfoVo.carType).toBe("几何A");
+    expect(detailAfterAdvanceBody.data.driverInfoVo.serviceType).toBe(5);
 
     const driverLocationResponse = await fetch(
       `${server.origin}/common/queryDriverLocationByOrderId?${signedSearchParams({
@@ -527,6 +535,24 @@ describe("startFakeCaocaoServer", () => {
     expect(order?.carType).toBe("3");
     expect(order?.estimatePriceFen).toBe(3600);
     expect(order?.submittedCarTypes).toEqual(["3", "5"]);
+
+    const detailResponse = await fetch(
+      `${server.origin}/common/queryOrderDetailV2?${signedSearchParams({
+        clientId: server.fixture.clientId,
+        params: {
+          order_id: createBody.data.orderNo,
+          timestamp: "42",
+        },
+        signKey: server.fixture.signKey,
+      }).toString()}`,
+    );
+    const detailBody = (await detailResponse.json()) as {
+      data: { basicOrderVO: { requireLevel: number } };
+      success: boolean;
+    };
+    expect(detailResponse.ok).toBe(true);
+    expect(detailBody.success).toBe(true);
+    expect(detailBody.data.basicOrderVO.requireLevel).toBe(3);
   });
 
   test("supports admin retreat controls", async () => {
diff --git a/tasks/ride-hailing-cancel-final-bill-diagnosis/00-task-packet.md b/tasks/ride-hailing-cancel-final-bill-diagnosis/00-task-packet.md
index 27de56be0..9a2c4d46e 100644
--- a/tasks/ride-hailing-cancel-final-bill-diagnosis/00-task-packet.md
+++ b/tasks/ride-hailing-cancel-final-bill-diagnosis/00-task-packet.md
@@ -11,7 +11,7 @@ Objective:
 - turn the diagnosis into two executable invariants for the RideHailing
   fulfillment mechanism:
   1. final settlement input must come from the ride-hailing provider's
-     authoritative payable-query result
+     authoritative query result available in the current integration boundary
   2. cancellation-fee query is pre-cancellation only and must not be reused as
      post-cancellation settlement truth
 
@@ -22,13 +22,14 @@ Hypothesis:
   `queryOrderDetailV2`-derived amount parsing and cancellation-fee querying
 - the correct durable fix is not "cancel => 0", but aligning
   `ride_orders.final_settlement_input` to the provider's authoritative final
-  settlement payable-query path and restricting cancellation-fee queries to
+  settlement source that is actually available in the current CaoCao
+  integration boundary, while restricting cancellation-fee queries to
   pre-cancellation decision support
 
 ## Guardrails Touched
 
 - Typed input route: `Reality`
-- Active mode: `Execute` after correcting the authoritative provider contract
+- Active mode: `Execute`
 - Durable owners under inspection:
   - `apps/backend/src/domains/ride-hailing/`
   - `apps/backend/src/domains/trade/`
@@ -36,24 +37,22 @@ Hypothesis:
 - Mutation boundary:
   - task packet
   - durable contract doc
-  - RideHailing provider adapter, observation, sync use-case, and test fixtures
 
 ## Verification
 
 - source trace completed for cancellation path and final-bill creation path
 - durable contract updated in `docs/20-product-tdd/ecommerce-contracts.md`
-- official CaoCao doc correction confirmed:
-  - `2.26 queryCalculateBill` is the payable source
-  - `2.15 queryBill` is payment/reconciliation truth, not the payable source
-- targeted verification completed:
-  - `pnpm --filter @partner-up-dev/backend typecheck`
-  - `pnpm --filter @partner-up-dev/fake-caocao-server typecheck`
-  - backend unit:
-    `provider-order-observation.test.ts`, `caocao-provider.test.ts`
-  - fake provider unit:
-    `packages/fake-caocao-server/src/server.test.ts`
-  - backend scenario:
-    `apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts`
+- latest pre-environment evidence confirmed:
+  - `queryOrderDetailV2` succeeds for finished orders and exposes provider phase
+    / status label
+  - `queryCalculateBill` is not usable for the current CaoCao app credentials;
+    observed provider failure:
+    `453 app api config not existed or disabled`
+  - current durable target therefore falls back to:
+    `queryOrderDetailV2.orderFeeVo.totalFee`
+- current implementation verification completed:
+  - `pnpm exec vitest run --config vitest.backend.config.ts --project backend-unit apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts`
+  - `pnpm exec vitest run --config vitest.backend.config.ts --project backend-scenario apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts`
 
 ## Current Understanding
 
@@ -80,87 +79,113 @@ Hypothesis:
   - observer output `executionPhase = CANCELLED` and
     `finalSettlementInput.amountFen = 1270` at the same time
 - latest source correction:
-  - earlier diagnosis used the wrong CaoCao source page
-  - the authoritative source for local final settlement input should be
-    `queryCalculateBill`, not `queryBill`
+  - earlier diagnosis first corrected from `queryBill` to
+    `queryCalculateBill`
+  - latest pre-environment log evidence then showed that
+    `queryCalculateBill` is not enabled for the current CaoCao app
+    credentials, so it is not part of the implementable contract for this
+    integration slice
 - user-aligned target invariant is now:
-  - provider authoritative final settlement truth must come from the provider
-    payable query rather than current order-detail fallback parsing
+  - provider authoritative final settlement truth must still come from a
+    provider query result
+  - for the current CaoCao integration surface, that source is
+    `queryOrderDetailV2.orderFeeVo.totalFee`
   - cancellation fee remains a pre-cancel decision/query surface only
 - current frontend order-detail polling stops on terminal RideHailing phases, so
   `FINISHED` / `CANCELLED` do not create a high-frequency post-terminal retry
   loop by default
 - for this slice, automatic background retry is not required yet; the simpler
   accepted model is:
-  - terminal phase sync may best-effort call `queryCalculateBill`
-  - if `queryCalculateBill` has no authoritative result yet, keep
-    `finalSettlementInput = null`
+  - each natural sync first reads provider order detail for execution truth
+  - if the order is terminal and `finalSettlementInput` is still null, backend
+    then calls `queryFinalSettlement()`
+  - for CaoCao, that adapter method internally rereads `queryOrderDetailV2`
+    and extracts `orderFeeVo.totalFee`
+  - if `orderFeeVo.totalFee` is still absent, keep `finalSettlementInput = null`
   - rely on the next natural sync trigger rather than introducing a
     job-backed retry mechanism now
-- implementation now matches durable truth:
-  - provider order-detail sync only updates execution truth
-  - CaoCao final settlement now uses `queryCalculateBill`
-  - `finalSettlementInput.amountFen` now binds `companyFee`
-  - status-not-ready provider responses are normalized to `null`
-    final-settlement input rather than blocking terminal sync
+- implementation now matches the revised durable truth:
+  - `RideHailingProviderPort` remains unchanged
+  - CaoCao adapter `queryFinalSettlement()` now internally rereads
+    `queryOrderDetailV2`
+  - for CaoCao, `finalSettlementInput.amountFen` now binds
+    `orderFeeVo.totalFee`
+  - missing `orderFeeVo.totalFee` returns `null` final settlement without
+    blocking terminal phase sync
+- `orderFeeVo.companyPayAmount` exists in the legacy CaoCao schema but is not
+  the accepted target for this slice:
+  - legacy code still reads `orderFeeVo.totalFee`
+  - available schema comments describe `companyPayAmount` as enterprise-paid
+    amount, which is too late-bound for the current bill-creation flow
 
 ## Ranked Hypotheses
 
-1. Current final-settlement source is wrong: local code derives settlement from
-   order-detail parsing, while the intended provider-authoritative source should
-   be the dedicated payable query path.
-2. Current cancellation-fee surface is semantically narrow and should stay
-   pre-cancel only; comparing it with post-cancel order payable truth produces
-   a false contradiction.
-3. Even if `orderFeeVO.totalFee` can sometimes match provider truth, the local
-   mechanism is still structurally wrong because it does not bind
-   `finalSettlementInput` to the authoritative query contract.
+1. The current missing-bill case for finished orders is caused by an
+   integration-boundary mismatch: code attempts `queryCalculateBill`, but the
+   current CaoCao app credentials cannot use that API.
+2. The correct CaoCao source for the current slice is therefore not a separate
+   payable API but the amount field already returned by
+   `queryOrderDetailV2.orderFeeVo.totalFee`.
+3. The cancellation-fee surface remains semantically narrow and should stay
+   pre-cancel only; comparing it with post-cancel order payable truth still
+   produces a false contradiction.
 
 ## Evidence Notes
 
-- Adapter fallback:
+- Adapter implementation:
   `apps/backend/src/domains/ride-hailing/services/caocao-provider.ts`
-  reads `orderFeeVO.totalFee` into `finalAmountFen`
-- Observation bug:
-  `apps/backend/src/domains/ride-hailing/services/provider-order-observation.ts`
-  emits `finalSettlementInput` on any non-null `finalAmountFen`, even when
-  phase maps to `CANCELLED`
-- Bill-creation gate:
+  now maps `queryFinalSettlement()` to
+  `queryOrderDetailV2.orderFeeVo.totalFee`
+- Execution and settlement split:
   `apps/backend/src/domains/ride-hailing/use-cases/sync-ride-hailing-order-with-provider.ts`
-  plus
-  `apps/backend/src/domains/ride-hailing/use-cases/apply-ride-hailing-final-settlement-consequence.ts`
-  only check presence of `finalSettlementInput`, not ride execution phase or
-  cancelled order status
+  first persists execution truth from `queryOrderDetail()`, then separately
+  attempts terminal final settlement through `queryFinalSettlement()`
 - Test gap:
   `tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts` verifies
   cancellation UI state but does not assert bill absence
+- Current pre-environment log evidence:
+  `scratch/log-20260630.txt`
+  shows:
+  - `queryOrderDetailV2` success with `providerPhase = "5"` and
+    `providerStatusLabel = "待支付"`
+  - local terminal sync attempting final settlement
+  - `queryCalculateBill` failure with provider code `453`
+    `app api config not existed or disabled`
 
 ## Agreed Target Invariants
 
 1. `ride_orders.final_settlement_input` must be derived from the
-   ride-hailing provider's authoritative final payable query result.
-   For CaoCao, that means `queryCalculateBill`, not the current
-   `queryOrderDetailV2` amount fallback and not `queryBill`.
-2. For CaoCao, `ride_orders.final_settlement_input.amountFen` must bind
-   `companyFee`:
-   `companyFee` is the amount PartnerUp owes CaoCao, so it is also the amount
-   PartnerUp should charge the user.
-3. Cancellation-fee query is only used before cancellation to inform the
+   ride-hailing provider's authoritative query result available in the current
+   integration boundary.
+   For CaoCao in this slice, that means
+   `queryOrderDetailV2.orderFeeVo.totalFee`, not `queryCalculateBill`,
+   not `queryBill`, and not cancellation-fee preview output.
+2. For CaoCao in this slice,
+   `ride_orders.final_settlement_input.amountFen` must bind
+   `orderFeeVo.totalFee`.
+3. For CaoCao in this slice, `settlement-ready` means:
+   - the local RideHailing execution phase is terminal
+   - `queryFinalSettlement()` has been attempted on that sync path
+   - the query result exposes non-null `queryOrderDetailV2.orderFeeVo.totalFee`
+4. Cancellation-fee query is only used before cancellation to inform the
    cancellation decision; it must not be treated as post-cancellation final
    settlement truth.
-4. Local terminal RideHailing phases that may trigger `queryCalculateBill` are
-   only `FINISHED` and `CANCELLED`.
-5. `queryCalculateBill` failure or no-result must not roll back or block local
-   terminal phase synchronization.
+5. Local terminal RideHailing phases that may trigger final-settlement capture
+   are only `FINISHED` and `CANCELLED`.
+6. Absence of `orderFeeVo.totalFee` must not roll back or block local terminal
+   phase synchronization.
 
 ## Accepted Retry Model
 
 - This slice does not introduce a new job-backed retry mechanism.
-- `queryCalculateBill` runs as a best-effort follow-up when a local
-  RideHailing order is observed in `FINISHED` or `CANCELLED` and
-  `finalSettlementInput` is still `null`.
-- If `queryCalculateBill` returns no authoritative result yet, persist nothing
-  and keep `finalSettlementInput = null`.
+- When a local RideHailing order is observed in `FINISHED` or `CANCELLED` and
+  `finalSettlementInput` is still `null`, backend may call
+  `queryFinalSettlement()`.
+- For CaoCao in this slice, `queryFinalSettlement()` internally rereads
+  `queryOrderDetailV2` and commits final settlement only if
+  `orderFeeVo.totalFee` is present.
+- If that final-settlement query does not expose `orderFeeVo.totalFee`, persist
+  nothing and keep `finalSettlementInput = null`.
 - Later natural sync triggers may retry implicitly, for example:
   - provider callback
   - user reopening order detail
@@ -180,7 +205,7 @@ sequenceDiagram
 
   Trigger->>Sync: sync(orderId)
   Sync->>Provider: queryOrderDetail(providerOrderId)
-  Provider-->>Sync: execution truth only
+  Provider-->>Sync: execution truth
   Sync->>RideOrder: persist executionPhase / driver / vehicle
 
   alt executionPhase not terminal
@@ -189,13 +214,14 @@ sequenceDiagram
     alt finalSettlementInput already committed
       Sync-->>Trigger: complete
     else finalSettlementInput is null
-      Sync->>Provider: queryCalculateBill(providerOrderId)
-      alt authoritative result not ready
+      Sync->>Provider: queryFinalSettlement(providerOrderId)
+      Note over Provider: CaoCao adapter internally calls queryOrderDetailV2
+      alt orderFeeVo.totalFee absent
         Provider-->>Sync: null
         Sync-->>Trigger: keep terminal phase, no settlement write
-      else authoritative result returned
-        Provider-->>Sync: companyFee
-        Sync->>RideOrder: persist finalSettlementInput.amountFen = companyFee
+      else orderFeeVo.totalFee present
+        Provider-->>Sync: finalSettlementInput.amountFen = orderFeeVo.totalFee
+        Sync->>RideOrder: persist finalSettlementInput
         Sync->>Bill: applyRideHailingFinalSettlementConsequence()
         Bill-->>Sync: final bill materialized if applicable
         Sync-->>Trigger: complete
@@ -206,9 +232,7 @@ sequenceDiagram
 
 ## Next Step
 
-1. Durable contract and production code are now aligned on
-   `queryCalculateBill -> companyFee -> finalSettlementInput.amountFen`.
-2. Deferred by user choice for a later slice:
+1. Deferred by user choice for a later slice:
    - `FAILED` semantic cleanup
    - provider-driven vehicle type / order item resolution synchronization
    - dedicated retry/backoff mechanism beyond natural sync triggers
diff --git a/tasks/ride-hailing-choice-set-resolution-realignment/00-task-packet.md b/tasks/ride-hailing-choice-set-resolution-realignment/00-task-packet.md
index 32b1802c0..f2bfaa154 100644
--- a/tasks/ride-hailing-choice-set-resolution-realignment/00-task-packet.md
+++ b/tasks/ride-hailing-choice-set-resolution-realignment/00-task-packet.md
@@ -141,6 +141,16 @@ introduced in this slice.
 - fake CaoCao server supports multi-vehicle `orderCarV2` and records submitted
   car types so system scenarios can prove adapter behavior through the real
   provider HTTP boundary.
+- 2026-06-30 preview regression follow-up:
+  - `RideHailingProviderOrderDetail.providerVehicleTypeCode` for CaoCao must be
+    sourced only from official `basicOrderVO.requireLevel`;
+  - fake CaoCao `queryOrderDetailV2` must expose `basicOrderVO.requireLevel` as
+    the submitted/winning service vehicle code, not `0`;
+  - `driverInfoVo.carType` is a vehicle model string in the fake server and must
+    not be treated as a service vehicle code;
+  - non-`requireLevel` fields such as `basicOrderVO.carType`,
+    `basicOrderVO.serviceType`, and `driverInfoVo.serviceType` are not accepted
+    as `providerVehicleTypeCode` inputs in this adapter slice.
 - Order Detail therefore hides "服务车型" while the order is still
   `DISPATCHING`, but may show it after provider acceptance.
 

From ade1245c95cd9c513cadf8c1499a35b9a568e4d3 Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Tue, 30 Jun 2026 23:11:24 +0800
Subject: [PATCH 85/94] fix(ride-hailing): cover accepted vehicle resolution

- assert ride-hailing order detail after fake Caocao acceptance

- guard service vehicle resolution visibility in the system scenario
---
 .../commerce/ride-hailing-ordering.scenario.test.ts         | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts b/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
index ff183d6e0..cf2bec836 100644
--- a/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
+++ b/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
@@ -923,6 +923,12 @@ scenario("commerce_ride_hailing_ordering_reaches_order_detail", async (ctx) => {
       expected: "接客中",
       label: "RideHailing accepted status hero",
     });
+    await assertRideHailingOrderDetail(page, {
+      expectedRiderNames: [
+        "scenario-system-ride-hailing-creator",
+        "scenario-system-ride-hailing-passenger",
+      ],
+    });
     const driverCard = page.getByTestId("order-detail.ride-hailing.driver-card");
     await driverCard.waitFor({
       state: "visible",

From f21a91bca3ec98a11a35e012d4687ebba3e5c993 Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Tue, 30 Jun 2026 23:48:50 +0800
Subject: [PATCH 86/94] fix(ride-hailing): add route diagnostics across backend
 and frontend

- log caocao route query success summaries with route metadata and geometry counts

- log order-detail route query projection decisions and skipped reasons

- log frontend ride-hailing map render summaries to browser console

- record the new observability guardrails in the task packet
---
 .../services/caocao-provider.test.ts          | 61 ++++++++++++
 .../ride-hailing/services/caocao-provider.ts  | 64 +++++++++++-
 .../use-cases/ride-hailing-ordering-flow.ts   | 97 ++++++++++++------
 .../order-detail/RideHailingOrderContent.vue  | 99 ++++++++++++++++++-
 .../00-task-packet.md                         | 29 +++++-
 5 files changed, 311 insertions(+), 39 deletions(-)

diff --git a/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts b/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
index fdb64a896..de0e9c020 100644
--- a/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
+++ b/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
@@ -882,4 +882,65 @@ describe("Caocao live order projection", () => {
       stdoutWrite.mockRestore();
     }
   });
+
+  it("logs route query success summaries with requested and returned route metadata", async () => {
+    const stdoutWrite = vi.spyOn(process.stdout, "write").mockImplementation(() => true);
+    try {
+      const fetchImpl: typeof fetch = async () =>
+        new Response(
+          JSON.stringify({
+            code: 200,
+            data: {
+              driverEtaInfoVO: {
+                direction: 88,
+                lat: 30.27,
+                lng: 120.16,
+                remainDistance: 820,
+                remainLightCount: 2,
+                remainTime: 240,
+                speed: 12,
+                timestamp: "1755571305064",
+              },
+              navigationPolylineType: 1,
+              steps: [
+                {
+                  links: [
+                    {
+                      coords: "30.270000,120.160000;30.269700,120.160600;30.269100,120.160900",
+                    },
+                    {
+                      coords: "30.268900,120.160850;30.268800,120.160800",
+                    },
+                  ],
+                },
+              ],
+            },
+            success: true,
+          }),
+          { status: 200 },
+        );
+      const adapter = new CaocaoProviderAdapter({
+        providerInstance: caocaoProviderInstance(),
+        fetchImpl,
+      });
+
+      await adapter.queryDriverRoute({
+        providerOrderId: "CC123456",
+        routeKind: "PICKUP",
+      });
+
+      const logOutput = stdoutWrite.mock.calls.map(([chunk]) => String(chunk)).join("");
+      expect(logOutput).toContain('"marker":"RideHailingProviderCaocao"');
+      expect(logOutput).toContain('"event":"caocao_route_query_success"');
+      expect(logOutput).toContain('"endpointPath":"/common/queryDriverPolyline"');
+      expect(logOutput).toContain('"providerOrderId":"CC123456"');
+      expect(logOutput).toContain('"requestedRouteKind":"PICKUP"');
+      expect(logOutput).toContain('"requestedNavigationPolylineType":1');
+      expect(logOutput).toContain('"returnedNavigationPolylineType":1');
+      expect(logOutput).toContain('"returnedRouteKind":"PICKUP"');
+      expect(logOutput).toContain('"polylinePointCount":5');
+    } finally {
+      stdoutWrite.mockRestore();
+    }
+  });
 });
diff --git a/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts b/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
index db1beb030..4de1503e3 100644
--- a/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
+++ b/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
@@ -306,6 +306,19 @@ const toCaocaoNavigationPolylineType = (
   routeKind: RideHailingProviderNavigationRouteQueryKind,
 ): number => (routeKind === "PICKUP" ? 1 : 3);
 
+const summarizeNavigationRouteEndpoint = (
+  polyline: RideHailingProviderNavigationRoute["polyline"],
+  position: "first" | "last",
+): { latitude: number; longitude: number } | null => {
+  const point = position === "first" ? polyline[0] : polyline[polyline.length - 1];
+  return point
+    ? {
+        latitude: point.latitude,
+        longitude: point.longitude,
+      }
+    : null;
+};
+
 const parseCaocaoOrderDetail = (data: Record<string, unknown>): RideHailingProviderOrderDetail => {
   const basicOrder = readOptionalRecordField(data, ["basicOrderVO"]);
   const driverRaw = readOptionalRecordField(data, ["driverInfoVo"]);
@@ -487,6 +500,42 @@ const writeCaocaoDiagnosticLog = (payload: Record<string, unknown>): void => {
   );
 };
 
+const writeCaocaoRouteQuerySuccessLog = (input: {
+  endpointPath: string;
+  providerInstanceId: string;
+  providerOrderId: string;
+  requestedNavigationPolylineType: number;
+  requestedRouteKind: RideHailingProviderNavigationRouteQueryKind;
+  route: RideHailingProviderNavigationRoute;
+  returnedNavigationPolylineType: number | null;
+}): void => {
+  writeCaocaoDiagnosticLog({
+    endpointPath: input.endpointPath,
+    event: "caocao_route_query_success",
+    polylineFirstPoint: summarizeNavigationRouteEndpoint(input.route.polyline, "first"),
+    polylineLastPoint: summarizeNavigationRouteEndpoint(input.route.polyline, "last"),
+    polylinePointCount: input.route.polyline.length,
+    providerInstanceId: input.providerInstanceId,
+    providerOrderId: input.providerOrderId,
+    remainingDistanceMeters: input.route.remainingDistanceMeters,
+    remainingDurationSeconds: input.route.remainingDurationSeconds,
+    requestedNavigationPolylineType: input.requestedNavigationPolylineType,
+    requestedRouteKind: input.requestedRouteKind,
+    returnedNavigationPolylineType: input.returnedNavigationPolylineType,
+    returnedRouteKind: input.route.routeKind,
+    trafficLightCount: input.route.trafficLightCount,
+    vehicleLocation: input.route.vehicleLocation
+      ? {
+          capturedAt: input.route.vehicleLocation.capturedAt,
+          headingDegrees: input.route.vehicleLocation.headingDegrees,
+          latitude: input.route.vehicleLocation.latitude,
+          longitude: input.route.vehicleLocation.longitude,
+          speedKph: input.route.vehicleLocation.speedKph,
+        }
+      : null,
+  });
+};
+
 const tryParseCaocaoResponseBody = <TData>(body: unknown): CaocaoRawResponse<TData> | null => {
   try {
     return parseCaocaoResponseBody<TData>(body);
@@ -892,15 +941,26 @@ export class CaocaoProviderAdapter implements RideHailingProviderPort {
     routeKind: RideHailingProviderNavigationRouteQueryKind;
   }): Promise<RideHailingProviderNavigationRoute | null> {
     // Staging CaoCao credentials currently expose the v1 polyline route API only.
+    const requestedNavigationPolylineType = toCaocaoNavigationPolylineType(input.routeKind);
     const data = await this.request<Record<string, unknown>>(
       "POST",
       "/common/queryDriverPolyline",
       {
-        navigation_polyline_type: toCaocaoNavigationPolylineType(input.routeKind),
+        navigation_polyline_type: requestedNavigationPolylineType,
         order_id: input.providerOrderId,
       },
     );
-    return parseCaocaoDriverRoute(data);
+    const route = parseCaocaoDriverRoute(data);
+    writeCaocaoRouteQuerySuccessLog({
+      endpointPath: "/common/queryDriverPolyline",
+      providerInstanceId: this.input.providerInstance.id,
+      providerOrderId: input.providerOrderId,
+      requestedNavigationPolylineType,
+      requestedRouteKind: input.routeKind,
+      route,
+      returnedNavigationPolylineType: readOptionalNumberField(data, ["navigationPolylineType"]),
+    });
+    return route;
   }
 
   async cancelRide(input: RideHailingProviderCancelInput): Promise<{
diff --git a/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts b/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts
index 943b02a73..c1e77d257 100644
--- a/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts
+++ b/apps/backend/src/domains/trade/use-cases/ride-hailing-ordering-flow.ts
@@ -180,6 +180,15 @@ const writeRideHailingLiveRouteQueryErrorLog = (payload: Record<string, unknown>
   );
 };
 
+const writeRideHailingLiveRouteQueryDecisionLog = (payload: Record<string, unknown>): void => {
+  process.stdout.write(
+    `${JSON.stringify({
+      marker: "RideHailingLiveRouteQueryDecision",
+      ...payload,
+    })}\n`,
+  );
+};
+
 const queryOptionalProviderLive = async <T>(input: {
   onError?: (error: unknown) => void;
   operation: () => Promise<T>;
@@ -291,16 +300,17 @@ export async function buildRideHailingDetailProjection(input: {
   }
 
   let providerDetail: ProviderDetailProjection | null = null;
+  const shouldQueryLiveGeometry = shouldQueryProviderLiveGeometry(rideOrder.executionPhase);
+  const navigationRouteQueryKind = resolveProviderNavigationRouteQueryKind(rideOrder.executionPhase);
+  let routeQueryAttempted = false;
+  let routeQuerySucceeded = false;
+  let routeQuerySkippedReason: string | null = null;
   if (dispatchBinding?.providerOrderId && syncedProviderDetail) {
     const provider = await providerRepo.findById(
       dispatchBinding.providerInstanceId as RideHailingProviderInstanceId,
     );
     if (provider) {
       const port = createRideHailingProviderPort({ providerInstance: provider });
-      const shouldQueryLiveGeometry = shouldQueryProviderLiveGeometry(rideOrder.executionPhase);
-      const navigationRouteQueryKind = resolveProviderNavigationRouteQueryKind(
-        rideOrder.executionPhase,
-      );
       logCommerceOrderDetailDebug(input.debug, "ride-detail.build.live-query-plan", {
         localOrderId: order.id,
         rideExecutionPhase: rideOrder.executionPhase,
@@ -326,33 +336,40 @@ export async function buildRideHailingDetailProjection(input: {
               }),
           })
         : null;
-      const navigationRoute = navigationRouteQueryKind
-        ? await queryOptionalProviderLive({
-            onError: (error) => {
-              writeRideHailingLiveRouteQueryErrorLog({
-                executionPhase: rideOrder.executionPhase,
-                orderId: order.id,
-                providerInstanceId: dispatchBinding?.providerInstanceId ?? null,
-                providerOrderId: dispatchBinding?.providerOrderId ?? null,
-                routeKind: navigationRouteQueryKind,
-                ...summarizeProviderLiveError(error),
-              });
-              logCommerceOrderDetailDebug(input.debug, "ride-detail.build.driver-route.error", {
-                localOrderId: order.id,
-                rideExecutionPhase: rideOrder.executionPhase,
-                providerInstanceId: dispatchBinding?.providerInstanceId ?? null,
-                providerOrderId: dispatchBinding?.providerOrderId ?? null,
-                routeKind: navigationRouteQueryKind,
-                ...summarizeProviderLiveError(error),
-              });
-            },
-            operation: () =>
-              port.queryDriverRoute({
-                providerOrderId: dispatchBinding.providerOrderId,
-                routeKind: navigationRouteQueryKind,
-              }),
-          })
-        : null;
+      let navigationRoute: RideHailingProviderNavigationRoute | null = null;
+      if (!shouldQueryLiveGeometry) {
+        routeQuerySkippedReason = "execution_phase_not_live_geometry";
+      } else if (!navigationRouteQueryKind) {
+        routeQuerySkippedReason = "route_kind_not_resolved";
+      } else {
+        routeQueryAttempted = true;
+        navigationRoute = await queryOptionalProviderLive({
+          onError: (error) => {
+            writeRideHailingLiveRouteQueryErrorLog({
+              executionPhase: rideOrder.executionPhase,
+              orderId: order.id,
+              providerInstanceId: dispatchBinding?.providerInstanceId ?? null,
+              providerOrderId: dispatchBinding?.providerOrderId ?? null,
+              routeKind: navigationRouteQueryKind,
+              ...summarizeProviderLiveError(error),
+            });
+            logCommerceOrderDetailDebug(input.debug, "ride-detail.build.driver-route.error", {
+              localOrderId: order.id,
+              rideExecutionPhase: rideOrder.executionPhase,
+              providerInstanceId: dispatchBinding?.providerInstanceId ?? null,
+              providerOrderId: dispatchBinding?.providerOrderId ?? null,
+              routeKind: navigationRouteQueryKind,
+              ...summarizeProviderLiveError(error),
+            });
+          },
+          operation: () =>
+            port.queryDriverRoute({
+              providerOrderId: dispatchBinding.providerOrderId,
+              routeKind: navigationRouteQueryKind,
+            }),
+        });
+        routeQuerySucceeded = navigationRoute !== null;
+      }
       providerDetail = projectProviderDetail({
         detail: syncedProviderDetail,
         navigationRoute,
@@ -370,14 +387,32 @@ export async function buildRideHailingDetailProjection(input: {
         ...summarizeProviderDetailProjection(providerDetail),
       });
     } else {
+      routeQuerySkippedReason = "provider_instance_missing";
       logCommerceOrderDetailDebug(input.debug, "ride-detail.build.provider-instance-missing", {
         localOrderId: order.id,
         providerInstanceId: dispatchBinding.providerInstanceId,
         providerOrderId: dispatchBinding.providerOrderId,
       });
     }
+  } else if (!dispatchBinding?.providerOrderId) {
+    routeQuerySkippedReason = "provider_order_missing";
+  } else {
+    routeQuerySkippedReason = "provider_detail_unavailable";
   }
 
+  writeRideHailingLiveRouteQueryDecisionLog({
+    executionPhase: rideOrder.executionPhase,
+    orderId: order.id,
+    providerInstanceId: dispatchBinding?.providerInstanceId ?? null,
+    providerOrderId: dispatchBinding?.providerOrderId ?? null,
+    routeKind: navigationRouteQueryKind,
+    routeQueryAttempted,
+    routeQuerySkippedReason,
+    routeQuerySucceeded,
+    shouldQueryLiveGeometry,
+    syncedProviderDetailAvailable: syncedProviderDetail !== null,
+  });
+
   const result = {
     route: rideOrder.routeSnapshot,
     departureAt: rideOrder.departureAt?.toISOString() ?? null,
diff --git a/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue b/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue
index 8c7ec6a7b..d3bb686d8 100644
--- a/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue
+++ b/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue
@@ -206,7 +206,7 @@ import { logCommerceOrderDetailDebug } from "@/domains/commerce/use-cases/order-
 import type { Route, RoutePoint } from "@/domains/route/model/route";
 import RouteMap from "@/domains/route/ui/RouteMap.vue";
 import RoutePointList from "@/domains/route/ui/RoutePointList.vue";
-import type { MapFitPadding, MapViewportFollowMode } from "@/shared/map/types";
+import type { MapActiveGeometry, MapCoordinate, MapFitPadding, MapViewportFollowMode } from "@/shared/map/types";
 import { buildRideHailingOrderMapViewModel } from "./ride-hailing-order-map-view-model";
 
 type RideHailingDetail = NonNullable<CommerceOrderDetailResponse["rideHailing"]>;
@@ -226,6 +226,55 @@ type ResolvedRideHailingVehicleCard = {
   priceLabel: string;
 };
 
+const summarizeMapCoordinate = (
+  point: MapCoordinate | null | undefined,
+): { lat: number; lng: number } | null =>
+  point
+    ? {
+        lat: point.lat,
+        lng: point.lng,
+      }
+    : null;
+
+const summarizeActiveGeometry = (
+  geometry: MapActiveGeometry | null | undefined,
+): Record<string, unknown> => {
+  if (!geometry) {
+    return {
+      kind: null,
+    };
+  }
+  switch (geometry.kind) {
+    case "marker":
+      return {
+        kind: geometry.kind,
+        markerId: geometry.id,
+      };
+    case "polyline":
+      return {
+        kind: geometry.kind,
+        polylineId: geometry.id,
+      };
+    case "selection":
+      return {
+        kind: geometry.kind,
+        markerIds: geometry.markerIds ?? [],
+        polylineIds: geometry.polylineIds ?? [],
+      };
+    default:
+      return {
+        kind: geometry.kind,
+      };
+  }
+};
+
+const writeRideHailingOrderMapRenderLog = (payload: Record<string, unknown>): void => {
+  console.info("[RideHailingOrderMapRender]", {
+    at: new Date().toISOString(),
+    ...payload,
+  });
+};
+
 const props = defineProps<{
   detail: CommerceOrderDetailResponse;
   ride: RideHailingDetail;
@@ -505,6 +554,54 @@ const routeMapViewportFollowMode = computed<MapViewportFollowMode>(() =>
     : "none",
 );
 
+const rideHailingOrderMapRenderDiagnostics = computed(() => {
+  const providerPolyline = props.ride.live?.navigationRoute?.polyline ?? null;
+  const plannedPolyline = props.ride.route.drivingPlan?.polyline ?? null;
+  return {
+    activeGeometry: summarizeActiveGeometry(orderMapViewModel.value.activeGeometry),
+    executionPhase: props.ride.executionPhase,
+    extraMarkerCount: orderMapViewModel.value.extraMarkers.length,
+    extraPolylineCount: orderMapViewModel.value.extraPolylines.length,
+    extraPolylineIds: orderMapViewModel.value.extraPolylines.map((polyline) => polyline.id),
+    livePhase: props.ride.live?.phase ?? null,
+    mapMode: orderMapViewModel.value.mode,
+    orderId: props.detail.order.id,
+    overviewGeometry: summarizeActiveGeometry(orderMapViewModel.value.overviewGeometry),
+    planRoute: orderMapViewModel.value.planRoute,
+    plannedPolylinePointCount: plannedPolyline?.length ?? 0,
+    providerPolylineFirstPoint: summarizeMapCoordinate(
+      providerPolyline?.[0]
+        ? {
+          lat: providerPolyline[0]?.latitude ?? Number.NaN,
+          lng: providerPolyline[0]?.longitude ?? Number.NaN,
+        }
+        : null,
+    ),
+    providerPolylineLastPoint: summarizeMapCoordinate(
+      providerPolyline && providerPolyline.length > 0
+        ? {
+            lat: providerPolyline[providerPolyline.length - 1]?.latitude ?? Number.NaN,
+            lng: providerPolyline[providerPolyline.length - 1]?.longitude ?? Number.NaN,
+          }
+        : null,
+    ),
+    providerPolylinePointCount: providerPolyline?.length ?? 0,
+    providerRouteKind: props.ride.live?.navigationRoute?.routeKind ?? null,
+    routeOrderId: props.routeOrderId,
+    showFallbackPolyline: orderMapViewModel.value.showFallbackPolyline,
+  };
+});
+
+watch(
+  rideHailingOrderMapRenderDiagnostics,
+  (payload) => {
+    writeRideHailingOrderMapRenderLog(payload);
+  },
+  {
+    immediate: true,
+  },
+);
+
 const directImageSrc = (value: string | null | undefined): string | null => {
   const normalized = value?.trim() ?? "";
   if (!normalized) return null;
diff --git a/tasks/ride-hailing-navigation-route-diagnosis/00-task-packet.md b/tasks/ride-hailing-navigation-route-diagnosis/00-task-packet.md
index 1471ff323..1285a83d4 100644
--- a/tasks/ride-hailing-navigation-route-diagnosis/00-task-packet.md
+++ b/tasks/ride-hailing-navigation-route-diagnosis/00-task-packet.md
@@ -54,9 +54,25 @@
   - adapter request includes `navigation_polyline_type`
   - fake CaoCao server contract now requires `navigation_polyline_type`
   - fake CaoCao route endpoint no longer models V2-only route querying
+  - backend now emits route-query success summaries with:
+    - requested route kind / requested navigation polyline type
+    - returned route kind / returned navigation polyline type
+    - polyline point count and first/last point
+  - backend now emits route-query projection decisions with:
+    - routeQueryAttempted
+    - routeQuerySucceeded
+    - routeQuerySkippedReason
+  - frontend order-detail map now emits render summaries with:
+    - providerPolylinePointCount
+    - plannedPolylinePointCount
+    - extraPolylineCount / extraPolylineIds
+    - showFallbackPolyline
+    - activeGeometry / overviewGeometry
 - Targeted validation completed:
   - `pnpm test:unit:backend -- apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts`
   - `pnpm --filter @partner-up-dev/fake-caocao-server test -- src/server.test.ts`
+  - `pnpm check:type:backend`
+  - `pnpm check:type:frontend`
 
 ## Current Understanding
 
@@ -107,11 +123,14 @@
     - message: `app api config not existed or disabled`
     - conclusion: current staging provider credentials do not expose the V2
       polyline API capability
-  - implementation decision:
-    - stop using `queryDriverPolylineV2`
-    - pin PartnerUp to `POST /common/queryDriverPolyline`
-    - explicitly send `navigation_polyline_type`
-    - treat this as a provider technical limitation, not a parser bug
+- implementation decision:
+  - stop using `queryDriverPolylineV2`
+  - pin PartnerUp to `POST /common/queryDriverPolyline`
+  - explicitly send `navigation_polyline_type`
+  - treat this as a provider technical limitation, not a parser bug
+  - add route-observability guardrails before further staging diagnosis so
+    “not queried”, “provider failed”, “queried but empty”, and “frontend
+    rendered fallback” are distinguishable from logs alone
 
 ## Next Step
 

From c698eb9c0c2d4ce6055c50766c864612e7e475dd Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Wed, 1 Jul 2026 12:15:44 +0800
Subject: [PATCH 87/94] fix(caocao): align order detail contract

- map CaoCao order detail from official driver and fee fields

- update fake CaoCao queryOrderDetailV2 schema and payload

- cover official field shape in focused and scenario tests
---
 .../services/caocao-provider.test.ts          |  23 +--
 .../ride-hailing/services/caocao-provider.ts  |   8 +-
 .../caocao-provider-minimal.openapi.yaml      | 178 +++++++++++++-----
 packages/fake-caocao-server/src/routes.ts     |  90 +++++++--
 .../fake-caocao-server/src/server.test.ts     | 121 +++++++++++-
 .../00-task-packet.md                         |  53 ++++++
 .../ride-hailing-ordering.scenario.test.ts    |   2 +-
 7 files changed, 395 insertions(+), 80 deletions(-)
 create mode 100644 tasks/caocao-order-detail-diagnosis/00-task-packet.md

diff --git a/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts b/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
index de0e9c020..3e1935990 100644
--- a/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
+++ b/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
@@ -552,18 +552,17 @@ describe("Caocao live order projection", () => {
               },
               driverInfoVo: {
                 carBrand: "几何",
-                carNo: "浙A12345",
                 carType: "几何A",
+                card: "浙A12345",
                 color: "白色",
-                driverName: "张师傅",
-                driverPhone: "13800138001",
                 location: {
-                  direction: 90,
                   lat: 30.2688,
                   lng: 120.1608,
-                  speed: 0,
                 },
-                serviceType: 7,
+                name: "张师傅",
+                phone: "13800138009",
+                phone_passenger: "13800138001",
+                serviceType: "7",
               },
             },
             success: true,
@@ -643,8 +642,9 @@ describe("Caocao live order projection", () => {
     expect(detail.providerVehicleTypeCode).toBe("3");
     expect(detail.providerVehicleTypeName).toBeNull();
     expect(detail.driver?.driverName).toBe("张师傅");
+    expect(detail.driver?.driverPhone).toBe("13800138001");
     expect(detail.vehicle?.plate).toBe("浙A12345");
-    expect(detail.vehicleLocation?.headingDegrees).toBe(90);
+    expect(detail.vehicleLocation?.headingDegrees).toBeNull();
     expect(location?.headingDegrees).toBe(88);
     expect(route?.routeKind).toBe("PICKUP");
     expect(route?.remainingDistanceMeters).toBe(820);
@@ -678,12 +678,13 @@ describe("Caocao live order projection", () => {
             },
             driverInfoVo: {
               carBrand: "几何",
-              carNo: "浙A12345",
               carType: "几何A",
+              card: "浙A12345",
               color: "白色",
-              driverName: "张师傅",
-              driverPhone: "13800138001",
-              serviceType: 3,
+              name: "张师傅",
+              phone: "13800138009",
+              phone_passenger: "13800138001",
+              serviceType: "3",
             },
           },
           success: true,
diff --git a/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts b/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
index 4de1503e3..08b16f7dc 100644
--- a/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
+++ b/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
@@ -324,9 +324,9 @@ const parseCaocaoOrderDetail = (data: Record<string, unknown>): RideHailingProvi
   const driverRaw = readOptionalRecordField(data, ["driverInfoVo"]);
   const vehicleRaw = driverRaw;
   const phase = readOptionalStringField(basicOrder, ["status"]) ?? "UNKNOWN";
-  const driverName = readOptionalStringField(driverRaw, ["driverName"]);
-  const driverPhone = readOptionalStringField(driverRaw, ["driverPhone"]);
-  const plate = readOptionalStringField(vehicleRaw, ["carNo"]);
+  const driverName = readOptionalStringField(driverRaw, ["name"]);
+  const driverPhone = readOptionalStringField(driverRaw, ["phone_passenger"]);
+  const plate = readOptionalStringField(vehicleRaw, ["card"]);
   const brand = readOptionalStringField(vehicleRaw, ["carBrand"]);
   const color = readOptionalStringField(vehicleRaw, ["color"]);
   const providerVehicleTypeCode = readOptionalStringField(basicOrder, ["requireLevel"]);
@@ -362,7 +362,7 @@ const parseCaocaoOrderDetailFinalSettlementResult = (input: {
   data: Record<string, unknown>;
   providerOrderId: string;
 }): RideHailingProviderFinalSettlementResult | null => {
-  const orderFee = readOptionalRecordField(input.data, ["orderFeeVO", "orderFeeVo", "order_fee"]);
+  const orderFee = readOptionalRecordField(input.data, ["orderFeeVo"]);
   const totalFee = readOptionalNumberField(orderFee, ["totalFee"]);
   if (totalFee === null) return null;
   return {
diff --git a/packages/fake-caocao-server/openapi/provider/caocao-provider-minimal.openapi.yaml b/packages/fake-caocao-server/openapi/provider/caocao-provider-minimal.openapi.yaml
index f3255691c..8e8316f4a 100644
--- a/packages/fake-caocao-server/openapi/provider/caocao-provider-minimal.openapi.yaml
+++ b/packages/fake-caocao-server/openapi/provider/caocao-provider-minimal.openapi.yaml
@@ -329,6 +329,17 @@ components:
           type: number
         lng:
           type: number
+    RealCoordinate:
+      type: object
+      additionalProperties: false
+      required:
+        - latitude
+        - longitude
+      properties:
+        latitude:
+          type: number
+        longitude:
+          type: number
     DriverLocation:
       type: object
       additionalProperties: false
@@ -356,69 +367,131 @@ components:
       type: object
       additionalProperties: false
       required:
-        - direction
         - lat
         - lng
-        - speed
       properties:
-        direction:
-          type: number
         lat:
           type: number
         lng:
           type: number
-        speed:
-          type: number
     DriverInfoVo:
       type: object
       nullable: true
       additionalProperties: false
-      required:
-        - driverName
-        - driverPhone
-        - driverNo
-        - carNo
-        - carBrand
-        - carType
-        - color
-        - location
-        - serviceType
       properties:
-        driverName:
+        avatar:
           type: string
           minLength: 1
-        driverPhone:
-          $ref: '#/components/schemas/PhoneNumber'
-        driverNo:
+        carBrand:
           type: string
           minLength: 1
-        carNo:
+        carType:
           type: string
           minLength: 1
-        carBrand:
+        card:
           type: string
           minLength: 1
-        carType:
+        color:
           type: string
           minLength: 1
-        color:
+        id:
+          type: integer
+        level:
           type: string
           minLength: 1
         location:
           $ref: '#/components/schemas/DriverInfoLocation'
+        name:
+          type: string
+          minLength: 1
+        orderCnt:
+          type: string
+          minLength: 1
+        phone:
+          $ref: '#/components/schemas/PhoneNumber'
+        phone_passenger:
+          $ref: '#/components/schemas/PhoneNumber'
         serviceType:
+          type: string
+          enum: ['2', '3', '4', '5', '7', '12', '14', '15']
+    OrderFeeDetailFeeVo:
+      type: object
+      additionalProperties: false
+      required:
+        - amount
+        - chargeCode
+        - chargeDesc
+      properties:
+        amount:
           type: integer
-          enum: [2, 3, 4, 5, 7, 12, 14, 15]
+        chargeCode:
+          type: string
+          minLength: 1
+        chargeDesc:
+          type: string
+          minLength: 1
     OrderFeeVo:
       type: object
       additionalProperties: false
       required:
+        - companyPayAmount
+        - detailFeeVos
+        - personalPayAmount
         - totalFee
       properties:
+        companyPayAmount:
+          type:
+            - integer
+            - 'null'
+        detailFeeVos:
+          type: array
+          items:
+            $ref: '#/components/schemas/OrderFeeDetailFeeVo'
+        doubleTollFlag:
+          type: integer
+          enum: [0]
+        originTotalFee:
+          type:
+            - integer
+            - 'null'
+        personalPayAmount:
+          type:
+            - integer
+            - 'null'
         totalFee:
           type:
             - integer
             - 'null'
+    OrderPayVo:
+      type: object
+      additionalProperties: false
+      required:
+        - giftAmount
+        - principalAmount
+      properties:
+        giftAmount:
+          type:
+            - integer
+            - 'null'
+        principalAmount:
+          type:
+            - integer
+            - 'null'
+    OrderInvoiceVo:
+      type: object
+      additionalProperties: false
+      required:
+        - companyAmount
+        - personalAmount
+      properties:
+        companyAmount:
+          type:
+            - integer
+            - 'null'
+        personalAmount:
+          type:
+            - integer
+            - 'null'
     DriverPolylineLink:
       type: object
       additionalProperties: false
@@ -574,15 +647,14 @@ components:
       required:
         - acceptCPDriver
         - allowModifyDest
-        - beginChargeTime
-        - callbackInfo
         - callerPhone
         - cityCode
-        - departureTime
+        - companyNo
         - endAddress
         - endName
         - estimatePrice
         - extOrderId
+        - extraInfo
         - fromLocation
         - invoiceStatus
         - invoiced
@@ -590,25 +662,27 @@ components:
         - orderId
         - orderLocation
         - orderTime
+        - origin
         - passengerName
         - passengerPhone
         - preOrderEndFlag
+        - realEndAddress
         - realEndLocation
+        - realStartAddress
         - realStartLocation
         - requireLevel
+        - routeFixedPrice
+        - specialFixedPrice
         - startAddress
         - startName
-        - startServiceTime
         - status
         - toLocation
         - type
       properties:
         acceptCPDriver:
-          type: integer
-          enum: [0, 1]
+          type: boolean
         allowModifyDest:
-          type: integer
-          enum: [0, 1]
+          type: boolean
         beginChargeTime:
           type:
             - string
@@ -622,6 +696,9 @@ components:
           $ref: '#/components/schemas/PhoneNumber'
         cityCode:
           $ref: '#/components/schemas/CityCode'
+        companyNo:
+          type: string
+          minLength: 1
         departureTime:
           type:
             - string
@@ -638,17 +715,17 @@ components:
         extOrderId:
           type: string
           minLength: 1
+        extraInfo:
+          type: string
         fromLocation:
           $ref: '#/components/schemas/Coordinate'
         invoiceStatus:
           type: integer
-          enum: [0, 1]
+          enum: [0, 1, 2]
         invoiced:
-          type: integer
-          enum: [0, 1]
+          type: boolean
         isRelayOrder:
-          type: integer
-          enum: [0, 1]
+          type: boolean
         orderId:
           type: string
           minLength: 1
@@ -656,21 +733,33 @@ components:
           $ref: '#/components/schemas/Coordinate'
         orderTime:
           $ref: '#/components/schemas/CaocaoDateTimeString'
+        origin:
+          type: integer
+          enum: [0, 1, 2, 3, 4, 5, 6, 7, 8]
         passengerName:
           type: string
           minLength: 1
         passengerPhone:
           $ref: '#/components/schemas/PhoneNumber'
         preOrderEndFlag:
-          type: integer
-          enum: [0, 1]
+          type: boolean
+        realEndAddress:
+          type: string
+          minLength: 1
         realEndLocation:
-          $ref: '#/components/schemas/Coordinate'
+          $ref: '#/components/schemas/RealCoordinate'
+        realStartAddress:
+          type: string
+          minLength: 1
         realStartLocation:
-          $ref: '#/components/schemas/Coordinate'
+          $ref: '#/components/schemas/RealCoordinate'
         requireLevel:
           type: integer
           enum: [2, 3, 4, 5, 7, 12, 14, 15]
+        routeFixedPrice:
+          type: boolean
+        specialFixedPrice:
+          type: boolean
         startAddress:
           type: string
           minLength: 1
@@ -695,15 +784,18 @@ components:
       additionalProperties: false
       required:
         - basicOrderVO
-        - driverInfoVo
         - orderFeeVo
       properties:
         basicOrderVO:
           $ref: '#/components/schemas/QueryOrderDetailBasicOrderVO'
         driverInfoVo:
           $ref: '#/components/schemas/DriverInfoVo'
+        orderInvoiceVo:
+          $ref: '#/components/schemas/OrderInvoiceVo'
         orderFeeVo:
           $ref: '#/components/schemas/OrderFeeVo'
+        orderPayVo:
+          $ref: '#/components/schemas/OrderPayVo'
     QueryDriverPolylineData:
       type: object
       additionalProperties: false
diff --git a/packages/fake-caocao-server/src/routes.ts b/packages/fake-caocao-server/src/routes.ts
index c16cb68c4..79961e54e 100644
--- a/packages/fake-caocao-server/src/routes.ts
+++ b/packages/fake-caocao-server/src/routes.ts
@@ -49,12 +49,16 @@ const defaultControlCorsHeaders = {
 };
 
 const DRIVER_NO = "FAKE_DRIVER_001";
+const DRIVER_ID = 457026;
 const DRIVER_NAME = "曹操测试司机";
 const DRIVER_PHONE = "13900139000";
+const DRIVER_AVATAR_URL = "https://fake.caocao.partner-up.test/driver/avatar.png";
+const DRIVER_LEVEL = "5.0";
+const DRIVER_ORDER_COUNT = "10753";
 const VEHICLE_BRAND = "几何";
 const VEHICLE_MODEL = "几何A";
 const VEHICLE_COLOR = "白色";
-const VEHICLE_PLATE = "浙A·TEST";
+const VEHICLE_PLATE = "浙A12345";
 const CALLBACK_INFO_PATTERN =
   /^pu\.rhc\.v1\.(dev|stg|prod)\.([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})$/i;
 const HANGZHOU_CITY_CODE = "0571";
@@ -551,46 +555,81 @@ const hasDriverInfo = (order: FakeCaocaoOrderState): boolean =>
   order.phase === "IN_TRIP" ||
   order.phase === "FINISHED";
 
+const queryOrderDetailFeeAmountFen = (order: FakeCaocaoOrderState): number | null =>
+  order.phase === "FINISHED" ? order.finalAmountFen : null;
+
+const queryOrderDetailFeeItems = (
+  amountFen: number | null,
+): Array<{ amount: number; chargeCode: string; chargeDesc: string }> => {
+  if (amountFen === null) return [];
+  const startFee = Math.min(1200, amountFen);
+  const travelFee = amountFen - startFee;
+  return [
+    {
+      amount: startFee,
+      chargeCode: "start_fee",
+      chargeDesc: "订单起步价",
+    },
+    ...(travelFee > 0
+      ? [
+          {
+            amount: travelFee,
+            chargeCode: "travel_km_fee",
+            chargeDesc: "里程费用",
+          },
+        ]
+      : []),
+  ];
+};
+
 const queryOrderDetailPayload = (order: FakeCaocaoOrderState): unknown => {
   const driver = hasDriverInfo(order) ? driverSnapshot(order) : null;
+  const feeAmountFen = queryOrderDetailFeeAmountFen(order);
   return {
     basicOrderVO: {
-      acceptCPDriver: 0,
-      allowModifyDest: 1,
+      acceptCPDriver: false,
+      allowModifyDest: true,
       beginChargeTime: fromIsoToCaocaoDateTime(order.serviceStartedAt),
       callbackInfo: order.callbackInfo,
       callerPhone: order.callerPhone,
       cityCode: order.cityCode,
+      companyNo: "FAKE_CAOCAO_COMPANY",
       departureTime: order.departureTime,
       endAddress: order.endAddress,
       endName: order.endName,
       estimatePrice: order.estimatePriceFen,
       extOrderId: order.externalOrderId,
+      extraInfo: "",
       fromLocation: {
         lat: order.origin.latitude,
         lng: order.origin.longitude,
       },
       invoiceStatus: 0,
-      invoiced: 0,
-      isRelayOrder: 0,
+      invoiced: false,
+      isRelayOrder: false,
       orderId: order.providerOrderId,
       orderLocation: {
         lat: order.origin.latitude,
         lng: order.origin.longitude,
       },
       orderTime: fromIsoToCaocaoDateTime(order.createdAt),
+      origin: 1,
       passengerName: order.passengerName,
       passengerPhone: order.passengerPhone,
-      preOrderEndFlag: 0,
+      preOrderEndFlag: false,
+      realEndAddress: order.endAddress,
       realEndLocation: {
-        lat: order.destination.latitude,
-        lng: order.destination.longitude,
+        latitude: order.destination.latitude,
+        longitude: order.destination.longitude,
       },
+      realStartAddress: order.startAddress,
       realStartLocation: {
-        lat: order.origin.latitude,
-        lng: order.origin.longitude,
+        latitude: order.origin.latitude,
+        longitude: order.origin.longitude,
       },
       requireLevel: Number(order.carType),
+      routeFixedPrice: false,
+      specialFixedPrice: false,
       startAddress: order.startAddress,
       startName: order.startName,
       startServiceTime: fromIsoToCaocaoDateTime(order.acceptedAt),
@@ -603,24 +642,39 @@ const queryOrderDetailPayload = (order: FakeCaocaoOrderState): unknown => {
     },
     driverInfoVo: driver
       ? {
+          avatar: DRIVER_AVATAR_URL,
           carBrand: driver.vehicleBrand,
           carType: VEHICLE_MODEL,
-          carNo: driver.vehiclePlate,
+          card: driver.vehiclePlate,
           color: driver.vehicleColor,
-          driverName: driver.driverName,
-          driverNo: DRIVER_NO,
-          driverPhone: driver.driverPhone,
+          id: DRIVER_ID,
+          level: DRIVER_LEVEL,
           location: {
-            direction: driver.direction,
             lat: driver.latitude,
             lng: driver.longitude,
-            speed: driver.speedKph,
           },
-          serviceType: Number(order.carType),
+          name: driver.driverName,
+          orderCnt: DRIVER_ORDER_COUNT,
+          phone: driver.driverPhone,
+          phone_passenger: driver.driverPhone,
+          serviceType: order.carType,
         }
       : null,
+    orderInvoiceVo: {
+      companyAmount: feeAmountFen,
+      personalAmount: feeAmountFen === null ? null : 0,
+    },
     orderFeeVo: {
-      totalFee: order.phase === "FINISHED" ? order.finalAmountFen : null,
+      companyPayAmount: feeAmountFen,
+      detailFeeVos: queryOrderDetailFeeItems(feeAmountFen),
+      doubleTollFlag: 0,
+      originTotalFee: feeAmountFen,
+      personalPayAmount: feeAmountFen === null ? null : 0,
+      totalFee: feeAmountFen,
+    },
+    orderPayVo: {
+      giftAmount: feeAmountFen === null ? null : 0,
+      principalAmount: feeAmountFen,
     },
   };
 };
diff --git a/packages/fake-caocao-server/src/server.test.ts b/packages/fake-caocao-server/src/server.test.ts
index 4e28b8bac..2e516d9f8 100644
--- a/packages/fake-caocao-server/src/server.test.ts
+++ b/packages/fake-caocao-server/src/server.test.ts
@@ -247,8 +247,37 @@ describe("startFakeCaocaoServer", () => {
     const detailAfterAdvanceBody = (await detailAfterAdvanceResponse.json()) as {
       code: number;
       data: {
-        basicOrderVO: { requireLevel: number; status: string };
-        driverInfoVo: { carType: string; serviceType: number };
+        basicOrderVO: {
+          requireLevel: number;
+          routeFixedPrice: boolean;
+          specialFixedPrice: boolean;
+          status: string;
+        } & Record<string, unknown>;
+        driverInfoVo: {
+          card: string;
+          carType: string;
+          location: { lat: number; lng: number } & Record<string, unknown>;
+          name: string;
+          phone: string;
+          phone_passenger: string;
+          serviceType: string;
+        } & Record<string, unknown>;
+        orderFeeVo: {
+          companyPayAmount: number | null;
+          detailFeeVos: Array<{ amount: number; chargeCode: string; chargeDesc: string }>;
+          doubleTollFlag: number;
+          originTotalFee: number | null;
+          personalPayAmount: number | null;
+          totalFee: number | null;
+        };
+        orderInvoiceVo: {
+          companyAmount: number | null;
+          personalAmount: number | null;
+        };
+        orderPayVo: {
+          giftAmount: number | null;
+          principalAmount: number | null;
+        };
       };
       success: boolean;
     };
@@ -257,8 +286,32 @@ describe("startFakeCaocaoServer", () => {
     expect(detailAfterAdvanceBody.success).toBe(true);
     expect(detailAfterAdvanceBody.data.basicOrderVO.status).toBe("9");
     expect(detailAfterAdvanceBody.data.basicOrderVO.requireLevel).toBe(5);
+    expect(detailAfterAdvanceBody.data.basicOrderVO.routeFixedPrice).toBe(false);
+    expect(detailAfterAdvanceBody.data.basicOrderVO.specialFixedPrice).toBe(false);
     expect(detailAfterAdvanceBody.data.driverInfoVo.carType).toBe("几何A");
-    expect(detailAfterAdvanceBody.data.driverInfoVo.serviceType).toBe(5);
+    expect(detailAfterAdvanceBody.data.driverInfoVo.card).toBe("浙A12345");
+    expect(detailAfterAdvanceBody.data.driverInfoVo.location.lat).toBeTypeOf("number");
+    expect(detailAfterAdvanceBody.data.driverInfoVo.location.lng).toBeTypeOf("number");
+    expect(detailAfterAdvanceBody.data.driverInfoVo.name).toBe("曹操测试司机");
+    expect(detailAfterAdvanceBody.data.driverInfoVo.phone).toBe("13900139000");
+    expect(detailAfterAdvanceBody.data.driverInfoVo.phone_passenger).toBe("13900139000");
+    expect(detailAfterAdvanceBody.data.driverInfoVo.serviceType).toBe("5");
+    expect(detailAfterAdvanceBody.data.orderFeeVo).toEqual({
+      companyPayAmount: null,
+      detailFeeVos: [],
+      doubleTollFlag: 0,
+      originTotalFee: null,
+      personalPayAmount: null,
+      totalFee: null,
+    });
+    expect(detailAfterAdvanceBody.data.orderInvoiceVo).toEqual({
+      companyAmount: null,
+      personalAmount: null,
+    });
+    expect(detailAfterAdvanceBody.data.orderPayVo).toEqual({
+      giftAmount: null,
+      principalAmount: null,
+    });
 
     const driverLocationResponse = await fetch(
       `${server.origin}/common/queryDriverLocationByOrderId?${signedSearchParams({
@@ -474,6 +527,68 @@ describe("startFakeCaocaoServer", () => {
     expect(queryCalculateBillBody.data.personalFee).toBe(0);
     expect(queryCalculateBillBody.data.totalFee).toBe(5600);
 
+    const finishedDetailResponse = await fetch(
+      `${server.origin}/common/queryOrderDetailV2?${signedSearchParams({
+        clientId: server.fixture.clientId,
+        params: {
+          order_id: createBody.data.orderNo,
+          timestamp: "38",
+        },
+        signKey: server.fixture.signKey,
+      }).toString()}`,
+    );
+    const finishedDetailBody = (await finishedDetailResponse.json()) as {
+      data: {
+        orderFeeVo: {
+          companyPayAmount: number;
+          detailFeeVos: Array<{ amount: number; chargeCode: string; chargeDesc: string }>;
+          doubleTollFlag: number;
+          originTotalFee: number;
+          personalPayAmount: number;
+          totalFee: number;
+        };
+        orderInvoiceVo: {
+          companyAmount: number;
+          personalAmount: number;
+        };
+        orderPayVo: {
+          giftAmount: number;
+          principalAmount: number;
+        };
+      };
+      success: boolean;
+    };
+
+    expect(finishedDetailResponse.ok).toBe(true);
+    expect(finishedDetailBody.success).toBe(true);
+    expect(finishedDetailBody.data.orderFeeVo).toEqual({
+      companyPayAmount: 5600,
+      detailFeeVos: [
+        {
+          amount: 1200,
+          chargeCode: "start_fee",
+          chargeDesc: "订单起步价",
+        },
+        {
+          amount: 4400,
+          chargeCode: "travel_km_fee",
+          chargeDesc: "里程费用",
+        },
+      ],
+      doubleTollFlag: 0,
+      originTotalFee: 5600,
+      personalPayAmount: 0,
+      totalFee: 5600,
+    });
+    expect(finishedDetailBody.data.orderInvoiceVo).toEqual({
+      companyAmount: 5600,
+      personalAmount: 0,
+    });
+    expect(finishedDetailBody.data.orderPayVo).toEqual({
+      giftAmount: 0,
+      principalAmount: 5600,
+    });
+
     const invalidPhaseResponse = await fetch(
       `${server.origin}/__fake_caocao/orders/${createBody.data.orderNo}/phase?phase=BOARDING`,
       {
diff --git a/tasks/caocao-order-detail-diagnosis/00-task-packet.md b/tasks/caocao-order-detail-diagnosis/00-task-packet.md
new file mode 100644
index 000000000..3348ccfc4
--- /dev/null
+++ b/tasks/caocao-order-detail-diagnosis/00-task-packet.md
@@ -0,0 +1,53 @@
+# CaoCao Order Detail Diagnosis
+
+## Objective & Hypothesis
+
+Diagnose why staging ride-hailing order detail can show "车牌待确认" and omit driver name/phone.
+
+Initial hypothesis: CaoCao `queryOrderDetailV2` response contains driver/vehicle fields under a shape not currently mapped by the adapter, or the provider response does not yet include driver assignment data for the observed order phase.
+
+## Guardrails Touched
+
+- Reality input: staging debug evidence plus official CaoCao documentation.
+- Backend ride-hailing provider adapter mapping changed only for CaoCao order detail and final-settlement fee extraction.
+- Fake CaoCao provider contract, response payload, and contract tests changed to model the official order-detail response shape directly.
+- Official CaoCao order-detail documentation is the external contract reference.
+
+## Verification
+
+- Compare official `queryOrderDetailV2` driver/vehicle fields with local adapter mapping.
+- Trace mapped fields through persistence and frontend order detail display.
+- Request minimal staging evidence needed to distinguish provider-missing data from local mapping/persistence/display loss.
+- Execute fix from fake server contract outward, then run focused fake server and adapter verification.
+
+## Current Understanding
+
+- Official docs expose driver fields under `data.driverInfoVo`: `card`, `name`, `phone`, and `phone_passenger`.
+- Local adapter currently reads `driverInfoVo.carNo`, `driverInfoVo.driverName`, and `driverInfoVo.driverPhone` in `parseCaocaoOrderDetail`.
+- Local fake CaoCao server and adapter unit tests also use those local field names, so tests can pass while staging CaoCao returns official field names.
+- Order-detail projection and frontend appear to preserve mapped `driver` / `vehicle` fields; the visible "车牌待确认" fallback is used when `ride.vehicle.plate` is empty.
+- CaoCao status `1` is未派单, so missing `driverInfoVo` is expected before assignment. For assigned/in-service statuses such as `2`, `9`, `12`, or `3`, missing local driver/plate with populated raw `driverInfoVo` would strongly implicate the adapter mapping.
+- Staging debug log in `scratch/log-20260701.txt` shows provider phase `9`, route query success, and parsed `providerDriverName: null` / `providerVehiclePlate: ''`, which is consistent with field-name mismatch after driver assignment.
+- Implemented fake-server-first correction: fake `queryOrderDetailV2` now emits official `driverInfoVo.card`, `name`, `phone`, and `phone_passenger`; backend adapter reads official fields.
+- Tightened follow-up contract gaps for `queryOrderDetailV2`: fake order detail now emits fee/payment/invoice objects, driver detail location is only `lat/lng`, `driverInfoVo.serviceType` is a string, phase-dependent nullable fields are no longer response-required, and fixed-price naming follows the official example as `routeFixedPrice` / `specialFixedPrice`.
+- Removed legacy query-order-detail field fallbacks in the backend adapter. Driver name, passenger-side driver phone, plate, and final-settlement fee now map only from `name`, `phone_passenger`, `card`, and `orderFeeVo.totalFee`.
+
+## Next Step
+
+Run focused fake server, adapter, type, formatter/linter, and system ride-hailing scenario verification.
+
+## Verification Results
+
+- `pnpm --filter @partner-up-dev/fake-caocao-server test` passed.
+- `pnpm exec vitest run --config vitest.backend.config.ts --project backend-unit apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts` passed.
+- `pnpm --filter @partner-up-dev/fake-caocao-server test` passed after fee/payment/invoice and driver-location contract tightening.
+- `pnpm exec vitest run --config vitest.backend.config.ts --project backend-unit apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts` passed after removing legacy field fallbacks from adapter code.
+- `pnpm --filter @partner-up-dev/fake-caocao-server typecheck` passed.
+- `pnpm --filter @partner-up-dev/backend typecheck` passed.
+- `pnpm exec biome check apps/backend/src/domains/ride-hailing/services/caocao-provider.ts apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts packages/fake-caocao-server/src/routes.ts packages/fake-caocao-server/src/server.test.ts tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts` passed.
+- `pnpm exec vitest run --project system-scenario tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts` passed: 1 file, 8 tests.
+- `pnpm --filter @partner-up-dev/fake-caocao-server typecheck` passed after the follow-up patch.
+- `pnpm --filter @partner-up-dev/backend typecheck` passed after the follow-up patch.
+- `pnpm check:format` passed, but changed-file mode checked 0 files.
+- `pnpm lint:biome` passed, but changed-file mode checked 0 files.
+- Removed legacy-field reverse tests per review; `pnpm --filter @partner-up-dev/fake-caocao-server test`, `pnpm exec vitest run --config vitest.backend.config.ts --project backend-unit apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts`, and focused `pnpm exec biome check apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts packages/fake-caocao-server/src/server.test.ts` passed.
diff --git a/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts b/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
index cf2bec836..0c4a15dcf 100644
--- a/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
+++ b/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
@@ -941,7 +941,7 @@ scenario("commerce_ride_hailing_ordering_reaches_order_detail", async (ctx) => {
     });
     await assertLocatorTextIncludes({
       actual: driverCard.textContent(),
-      expected: "浙A·TEST",
+      expected: "浙A12345",
       label: "RideHailing driver card vehicle plate",
     });
 

From 259de5f1bc8a917b94a82fb6a8de01ae6f300baf Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Wed, 1 Jul 2026 12:24:53 +0800
Subject: [PATCH 88/94] fix(caocao): update callback scenario detail fields

- align callback scenario queryOrderDetailV2 mocks with official driver fields

- verify backend scenario gate locally
---
 .../caocao-callback-route.scenario.test.ts    | 205 +++++++++---------
 1 file changed, 106 insertions(+), 99 deletions(-)

diff --git a/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts b/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts
index a4b4a7456..47877ee14 100644
--- a/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts
+++ b/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts
@@ -406,12 +406,13 @@ scenario("Caocao callback updates ride execution and creates final bill", async
             },
             driverInfoVo: {
               carBrand: "曹操快车",
-              carNo: "浙B99999",
+              card: "浙B99999",
               carType: "曹操快车",
               color: "蓝色",
-              driverName: "李师傅",
-              driverPhone: "13900139000",
-              serviceType: 3,
+              name: "李师傅",
+              phone: "13900139000",
+              phone_passenger: "13900139000",
+              serviceType: "3",
             },
             orderFeeVo: {
               totalFee: 5000,
@@ -720,12 +721,13 @@ scenario(
               },
               driverInfoVo: {
                 carBrand: "曹操快车",
-                carNo: "浙C88888",
+                card: "浙C88888",
                 carType: "曹操快车",
                 color: "白色",
-                driverName: "王师傅",
-                driverPhone: "13700137000",
-                serviceType: 3,
+                name: "王师傅",
+                phone: "13700137000",
+                phone_passenger: "13700137000",
+                serviceType: "3",
               },
               orderFeeVo: {
                 totalFee: 1270,
@@ -899,12 +901,13 @@ scenario(
               },
               driverInfoVo: {
                 carBrand: "曹操快车",
-                carNo: "浙D66666",
+                card: "浙D66666",
                 carType: "曹操快车",
                 color: "黑色",
-                driverName: "赵师傅",
-                driverPhone: "13600136000",
-                serviceType: 3,
+                name: "赵师傅",
+                phone: "13600136000",
+                phone_passenger: "13600136000",
+                serviceType: "3",
               },
               orderFeeVo: {
                 totalFee: null,
@@ -976,99 +979,103 @@ scenario(
   },
 );
 
-scenario("Caocao callback does not block terminal sync when final settlement detail reread fails", async () => {
-  const creator = await givenUser("caocao-callback-bill-failure-owner");
-  let detailQueryCount = 0;
-  const fakeCaocao = createServer((request, response) => {
-    if (request.url?.startsWith("/v2/common/queryOrderDetailV2")) {
-      detailQueryCount += 1;
-      if (detailQueryCount > 1) {
-        response.writeHead(500, { "Content-Type": "application/json" });
-        response.end(JSON.stringify({ code: 500, success: false }));
+scenario(
+  "Caocao callback does not block terminal sync when final settlement detail reread fails",
+  async () => {
+    const creator = await givenUser("caocao-callback-bill-failure-owner");
+    let detailQueryCount = 0;
+    const fakeCaocao = createServer((request, response) => {
+      if (request.url?.startsWith("/v2/common/queryOrderDetailV2")) {
+        detailQueryCount += 1;
+        if (detailQueryCount > 1) {
+          response.writeHead(500, { "Content-Type": "application/json" });
+          response.end(JSON.stringify({ code: 500, success: false }));
+          return;
+        }
+        response.writeHead(200, { "Content-Type": "application/json" });
+        response.end(
+          JSON.stringify({
+            code: 200,
+            data: {
+              basicOrderVO: {
+                requireLevel: 3,
+                status: "5",
+              },
+              driverInfoVo: {
+                carBrand: "曹操快车",
+                card: "浙E55555",
+                carType: "曹操快车",
+                color: "银色",
+                name: "周师傅",
+                phone: "13500135000",
+                phone_passenger: "13500135000",
+                serviceType: "3",
+              },
+              orderFeeVo: {
+                totalFee: null,
+              },
+            },
+            success: true,
+          }),
+        );
         return;
       }
-      response.writeHead(200, { "Content-Type": "application/json" });
-      response.end(
-        JSON.stringify({
-          code: 200,
-          data: {
-            basicOrderVO: {
-              requireLevel: 3,
-              status: "5",
-            },
-            driverInfoVo: {
-              carBrand: "曹操快车",
-              carNo: "浙E55555",
-              carType: "曹操快车",
-              color: "银色",
-              driverName: "周师傅",
-              driverPhone: "13500135000",
-              serviceType: 3,
-            },
-            orderFeeVo: {
-              totalFee: null,
-            },
-          },
-          success: true,
-        }),
-      );
-      return;
-    }
-    response.writeHead(404, { "Content-Type": "application/json" });
-    response.end(JSON.stringify({ code: 404, success: false }));
-  });
-  const endpointBaseUrl = await listen(fakeCaocao);
-
-  try {
-    const provider = await createScenarioCaocaoProvider({
-      endpointBaseUrl,
-      displayName: "Scenario Caocao Bill Failure",
-      instanceKey: `scenario-caocao-bill-failure-${randomUUID()}`,
-      caocaoClientId: "scenario-caocao-bill-failure-client",
-      signKey: "scenario-caocao-bill-failure-secret",
-    });
-    const orderSeed = await seedCallbackScenarioRideOrder({
-      creatorUserId: creator.user.id,
-      providerId: provider.id,
-      providerOrderId: "CC-BILL-FAILURE-123",
-      rideExecutionPhase: "IN_TRIP",
-      tradeStatus: "OPEN",
-      skuName: "Scenario Caocao Bill Failure Express",
-      spuName: "Scenario Caocao Bill Failure SPU",
+      response.writeHead(404, { "Content-Type": "application/json" });
+      response.end(JSON.stringify({ code: 404, success: false }));
     });
+    const endpointBaseUrl = await listen(fakeCaocao);
 
-    const response = await requestJson(
-      `/api/ride-hailing/caocao/${provider.id}/callback/order-status`,
-      {
-        method: "POST",
-        headers: {
-          "content-type": "application/x-www-form-urlencoded",
+    try {
+      const provider = await createScenarioCaocaoProvider({
+        endpointBaseUrl,
+        displayName: "Scenario Caocao Bill Failure",
+        instanceKey: `scenario-caocao-bill-failure-${randomUUID()}`,
+        caocaoClientId: "scenario-caocao-bill-failure-client",
+        signKey: "scenario-caocao-bill-failure-secret",
+      });
+      const orderSeed = await seedCallbackScenarioRideOrder({
+        creatorUserId: creator.user.id,
+        providerId: provider.id,
+        providerOrderId: "CC-BILL-FAILURE-123",
+        rideExecutionPhase: "IN_TRIP",
+        tradeStatus: "OPEN",
+        skuName: "Scenario Caocao Bill Failure Express",
+        spuName: "Scenario Caocao Bill Failure SPU",
+      });
+
+      const response = await requestJson(
+        `/api/ride-hailing/caocao/${provider.id}/callback/order-status`,
+        {
+          method: "POST",
+          headers: {
+            "content-type": "application/x-www-form-urlencoded",
+          },
+          body: buildCallbackForm({
+            callbackInfo: buildCaocaoCallbackInfo({
+              providerInstance: provider,
+              routingToken: "stg",
+            }),
+            signKey: "scenario-caocao-bill-failure-secret",
+            orderId: orderSeed.order.id,
+            providerOrderId: "CC-BILL-FAILURE-123",
+            event: "6",
+          }).toString(),
         },
-        body: buildCallbackForm({
-          callbackInfo: buildCaocaoCallbackInfo({
-            providerInstance: provider,
-            routingToken: "stg",
-          }),
-          signKey: "scenario-caocao-bill-failure-secret",
-          orderId: orderSeed.order.id,
-          providerOrderId: "CC-BILL-FAILURE-123",
-          event: "6",
-        }).toString(),
-      },
-    );
+      );
 
-    assert.equal(response.status, 200);
-    assert.equal(detailQueryCount, 2);
-    const updatedRide = await rideOrderRepo.findByOrderId(orderSeed.order.id as TradeOrderId);
-    assert.equal(updatedRide?.executionPhase, "FINISHED");
-    assert.equal(updatedRide?.finalSettlementInput, null);
-    assert.equal(updatedRide?.driverSnapshot?.driverName, "周师傅");
-    assert.equal(updatedRide?.vehicleSnapshot?.plate, "浙E55555");
-    assert.equal(await billRepo.findBySourceOrderId(orderSeed.order.id), null);
-  } finally {
-    await closeServer(fakeCaocao);
-  }
-});
+      assert.equal(response.status, 200);
+      assert.equal(detailQueryCount, 2);
+      const updatedRide = await rideOrderRepo.findByOrderId(orderSeed.order.id as TradeOrderId);
+      assert.equal(updatedRide?.executionPhase, "FINISHED");
+      assert.equal(updatedRide?.finalSettlementInput, null);
+      assert.equal(updatedRide?.driverSnapshot?.driverName, "周师傅");
+      assert.equal(updatedRide?.vehicleSnapshot?.plate, "浙E55555");
+      assert.equal(await billRepo.findBySourceOrderId(orderSeed.order.id), null);
+    } finally {
+      await closeServer(fakeCaocao);
+    }
+  },
+);
 
 scenario("Caocao callback returns retryable failure when provider detail query fails", async () => {
   const creator = await givenUser("caocao-callback-query-failure-owner");

From 3d89f928f248b89cc3241d46c736e6466d06fae0 Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Wed, 1 Jul 2026 12:36:39 +0800
Subject: [PATCH 89/94] fix(caocao): map driver phone and avatar

- prefer driverInfoVo.phone before phone_passenger for order detail driver phone

- persist driverInfoVo.avatar into ride driver snapshots and render it on order detail

- cover fake caocao avatar output and callback snapshot persistence
---
 .../domains/ride-hailing/model/provider.ts    |  1 +
 .../services/caocao-provider.test.ts          |  4 +++-
 .../ride-hailing/services/caocao-provider.ts  |  6 +++--
 .../provider-order-observation.test.ts        |  5 ++++
 .../services/provider-order-observation.ts    |  5 +++-
 .../domains/trade/model/ride-hailing-order.ts |  1 +
 .../caocao-callback-route.scenario.test.ts    | 23 ++++++++++++++++++-
 .../order-detail/RideHailingOrderContent.vue  | 21 ++++++++++++-----
 .../fake-caocao-server/src/server.test.ts     |  4 ++++
 9 files changed, 59 insertions(+), 11 deletions(-)

diff --git a/apps/backend/src/domains/ride-hailing/model/provider.ts b/apps/backend/src/domains/ride-hailing/model/provider.ts
index fcfd7d3ae..3822ff1d1 100644
--- a/apps/backend/src/domains/ride-hailing/model/provider.ts
+++ b/apps/backend/src/domains/ride-hailing/model/provider.ts
@@ -151,6 +151,7 @@ export type RideHailingProviderOrderDetail = {
   providerVehicleTypeCode?: string | null;
   providerVehicleTypeName?: string | null;
   driver: {
+    driverAvatarUrl?: string | null;
     driverName: string;
     driverPhone: string;
   } | null;
diff --git a/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts b/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
index 3e1935990..9ebf76385 100644
--- a/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
+++ b/apps/backend/src/domains/ride-hailing/services/caocao-provider.test.ts
@@ -551,6 +551,7 @@ describe("Caocao live order projection", () => {
                 status: "12",
               },
               driverInfoVo: {
+                avatar: "https://example.test/driver-zhang.png",
                 carBrand: "几何",
                 carType: "几何A",
                 card: "浙A12345",
@@ -641,8 +642,9 @@ describe("Caocao live order projection", () => {
     expect(detail.statusLabel).toBe("司机已到达");
     expect(detail.providerVehicleTypeCode).toBe("3");
     expect(detail.providerVehicleTypeName).toBeNull();
+    expect(detail.driver?.driverAvatarUrl).toBe("https://example.test/driver-zhang.png");
     expect(detail.driver?.driverName).toBe("张师傅");
-    expect(detail.driver?.driverPhone).toBe("13800138001");
+    expect(detail.driver?.driverPhone).toBe("13800138009");
     expect(detail.vehicle?.plate).toBe("浙A12345");
     expect(detail.vehicleLocation?.headingDegrees).toBeNull();
     expect(location?.headingDegrees).toBe(88);
diff --git a/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts b/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
index 08b16f7dc..b133a6592 100644
--- a/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
+++ b/apps/backend/src/domains/ride-hailing/services/caocao-provider.ts
@@ -324,8 +324,9 @@ const parseCaocaoOrderDetail = (data: Record<string, unknown>): RideHailingProvi
   const driverRaw = readOptionalRecordField(data, ["driverInfoVo"]);
   const vehicleRaw = driverRaw;
   const phase = readOptionalStringField(basicOrder, ["status"]) ?? "UNKNOWN";
+  const driverAvatarUrl = readOptionalStringField(driverRaw, ["avatar"]);
   const driverName = readOptionalStringField(driverRaw, ["name"]);
-  const driverPhone = readOptionalStringField(driverRaw, ["phone_passenger"]);
+  const driverPhone = readOptionalStringField(driverRaw, ["phone", "phone_passenger"]);
   const plate = readOptionalStringField(vehicleRaw, ["card"]);
   const brand = readOptionalStringField(vehicleRaw, ["carBrand"]);
   const color = readOptionalStringField(vehicleRaw, ["color"]);
@@ -333,8 +334,9 @@ const parseCaocaoOrderDetail = (data: Record<string, unknown>): RideHailingProvi
 
   return {
     driver:
-      driverName || driverPhone
+      driverAvatarUrl || driverName || driverPhone
         ? {
+            driverAvatarUrl,
             driverName: driverName ?? "司机",
             driverPhone: driverPhone ?? "",
           }
diff --git a/apps/backend/src/domains/ride-hailing/services/provider-order-observation.test.ts b/apps/backend/src/domains/ride-hailing/services/provider-order-observation.test.ts
index 65a4048fc..ac11cc9f3 100644
--- a/apps/backend/src/domains/ride-hailing/services/provider-order-observation.test.ts
+++ b/apps/backend/src/domains/ride-hailing/services/provider-order-observation.test.ts
@@ -49,6 +49,7 @@ describe("RideHailing provider order observation", () => {
         phase: "FINISHED",
         statusLabel: "待支付",
         driver: {
+          driverAvatarUrl: "https://example.test/driver-li.png",
           driverName: "李师傅",
           driverPhone: "13900139000",
         },
@@ -65,6 +66,7 @@ describe("RideHailing provider order observation", () => {
     });
 
     expect(observed.executionPhase).toBe("FINISHED");
+    expect(observed.driverSnapshot?.driverAvatarUrl).toBe("https://example.test/driver-li.png");
     expect(observed.driverSnapshot?.driverName).toBe("李师傅");
     expect(observed.vehicleSnapshot?.plate).toBe("浙B99999");
   });
@@ -73,15 +75,18 @@ describe("RideHailing provider order observation", () => {
     expect(
       mergeDriverSnapshot({
         current: {
+          driverAvatarUrl: "https://example.test/driver-zhang.png",
           driverName: "张师傅",
           driverPhone: "13800138001",
         },
         observed: {
+          driverAvatarUrl: null,
           driverName: "李师傅",
           driverPhone: null,
         },
       }),
     ).toEqual({
+      driverAvatarUrl: "https://example.test/driver-zhang.png",
       driverName: "李师傅",
       driverPhone: "13800138001",
     });
diff --git a/apps/backend/src/domains/ride-hailing/services/provider-order-observation.ts b/apps/backend/src/domains/ride-hailing/services/provider-order-observation.ts
index 52e1cb058..a2f8b0751 100644
--- a/apps/backend/src/domains/ride-hailing/services/provider-order-observation.ts
+++ b/apps/backend/src/domains/ride-hailing/services/provider-order-observation.ts
@@ -54,10 +54,12 @@ const normalizeDriverSnapshot = (
   driver: RideHailingProviderOrderDetail["driver"],
 ): RideHailingDriverSnapshot | null => {
   if (!driver) return null;
+  const driverAvatarUrl = normalizeOptionalString(driver.driverAvatarUrl);
   const driverName = normalizeOptionalString(driver.driverName);
   const driverPhone = normalizeOptionalString(driver.driverPhone);
-  if (!driverName && !driverPhone) return null;
+  if (!driverAvatarUrl && !driverName && !driverPhone) return null;
   return {
+    driverAvatarUrl,
     driverName,
     driverPhone,
   };
@@ -94,6 +96,7 @@ export function mergeDriverSnapshot(input: {
 }): RideHailingDriverSnapshot | null {
   if (!input.observed) return input.current;
   return {
+    driverAvatarUrl: input.observed.driverAvatarUrl ?? input.current?.driverAvatarUrl ?? null,
     driverName: input.observed.driverName ?? input.current?.driverName ?? null,
     driverPhone: input.observed.driverPhone ?? input.current?.driverPhone ?? null,
   };
diff --git a/apps/backend/src/domains/trade/model/ride-hailing-order.ts b/apps/backend/src/domains/trade/model/ride-hailing-order.ts
index 1f49f7f50..1934dda9b 100644
--- a/apps/backend/src/domains/trade/model/ride-hailing-order.ts
+++ b/apps/backend/src/domains/trade/model/ride-hailing-order.ts
@@ -39,6 +39,7 @@ export type RideHailingExecutionPhase =
   | "FAILED";
 
 export type RideHailingDriverSnapshot = {
+  driverAvatarUrl?: string | null;
   driverName?: string | null;
   driverPhone?: string | null;
 };
diff --git a/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts b/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts
index 47877ee14..b01273a29 100644
--- a/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts
+++ b/apps/backend/tests/ride-hailing/caocao-callback-route.scenario.test.ts
@@ -405,13 +405,14 @@ scenario("Caocao callback updates ride execution and creates final bill", async
               status: "5",
             },
             driverInfoVo: {
+              avatar: "https://example.test/driver-li.png",
               carBrand: "曹操快车",
               card: "浙B99999",
               carType: "曹操快车",
               color: "蓝色",
               name: "李师傅",
               phone: "13900139000",
-              phone_passenger: "13900139000",
+              phone_passenger: "13900139001",
               serviceType: "3",
             },
             orderFeeVo: {
@@ -689,7 +690,12 @@ scenario("Caocao callback updates ride execution and creates final bill", async
     assert.equal(updatedRide?.executionPhase, "FINISHED");
     assert.equal(updatedRide?.finalSettlementInput?.amountFen, 5000);
     assert.equal(updatedRide?.finalSettlementInput?.providerOrderId, "CC-FINAL-123");
+    assert.equal(
+      updatedRide?.driverSnapshot?.driverAvatarUrl,
+      "https://example.test/driver-li.png",
+    );
     assert.equal(updatedRide?.driverSnapshot?.driverName, "李师傅");
+    assert.equal(updatedRide?.driverSnapshot?.driverPhone, "13900139000");
     assert.equal(updatedRide?.vehicleSnapshot?.plate, "浙B99999");
     const bill = await billRepo.findBySourceOrderId(order.id);
     assert.ok(bill);
@@ -720,6 +726,7 @@ scenario(
                 status: "20",
               },
               driverInfoVo: {
+                avatar: "https://example.test/driver-wang.png",
                 carBrand: "曹操快车",
                 card: "浙C88888",
                 carType: "曹操快车",
@@ -828,6 +835,10 @@ scenario(
       assert.equal(updatedRide?.executionPhase, "CANCELLED");
       assert.equal(updatedRide?.finalSettlementInput?.amountFen, 1270);
       assert.equal(updatedRide?.finalSettlementInput?.providerOrderId, "CC-CANCELLED-123");
+      assert.equal(
+        updatedRide?.driverSnapshot?.driverAvatarUrl,
+        "https://example.test/driver-wang.png",
+      );
       assert.equal(updatedRide?.driverSnapshot?.driverName, "王师傅");
       assert.equal(updatedRide?.vehicleSnapshot?.plate, "浙C88888");
       const bill = await billRepo.findBySourceOrderId(orderSeed.order.id);
@@ -900,6 +911,7 @@ scenario(
                 status: "20",
               },
               driverInfoVo: {
+                avatar: "https://example.test/driver-zhao.png",
                 carBrand: "曹操快车",
                 card: "浙D66666",
                 carType: "曹操快车",
@@ -970,6 +982,10 @@ scenario(
       const updatedRide = await rideOrderRepo.findByOrderId(orderSeed.order.id as TradeOrderId);
       assert.equal(updatedRide?.executionPhase, "CANCELLED");
       assert.equal(updatedRide?.finalSettlementInput, null);
+      assert.equal(
+        updatedRide?.driverSnapshot?.driverAvatarUrl,
+        "https://example.test/driver-zhao.png",
+      );
       assert.equal(updatedRide?.driverSnapshot?.driverName, "赵师傅");
       assert.equal(updatedRide?.vehicleSnapshot?.plate, "浙D66666");
       assert.equal(await billRepo.findBySourceOrderId(orderSeed.order.id), null);
@@ -1002,6 +1018,7 @@ scenario(
                 status: "5",
               },
               driverInfoVo: {
+                avatar: "https://example.test/driver-zhou.png",
                 carBrand: "曹操快车",
                 card: "浙E55555",
                 carType: "曹操快车",
@@ -1068,6 +1085,10 @@ scenario(
       const updatedRide = await rideOrderRepo.findByOrderId(orderSeed.order.id as TradeOrderId);
       assert.equal(updatedRide?.executionPhase, "FINISHED");
       assert.equal(updatedRide?.finalSettlementInput, null);
+      assert.equal(
+        updatedRide?.driverSnapshot?.driverAvatarUrl,
+        "https://example.test/driver-zhou.png",
+      );
       assert.equal(updatedRide?.driverSnapshot?.driverName, "周师傅");
       assert.equal(updatedRide?.vehicleSnapshot?.plate, "浙E55555");
       assert.equal(await billRepo.findBySourceOrderId(orderSeed.order.id), null);
diff --git a/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue b/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue
index d3bb686d8..7a3816847 100644
--- a/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue
+++ b/apps/frontend/src/domains/commerce/ui/order-detail/RideHailingOrderContent.vue
@@ -57,8 +57,8 @@
           tone="neutral" padding="sm" gap="sm" data-testid="order-detail.ride-hailing.driver-card">
           <div class="ride-hailing-order-content__driver-layout">
             <div class="ride-hailing-order-content__driver-profile">
-              <PuImg src="" :alt="driverName" :name="driverName" :fallback-initial="driverAvatarInitial" size="medium"
-                shape="circle" :show-loading="false" bordered />
+              <PuImg :src="driverAvatarUrl ?? ''" :alt="driverName" :name="driverName"
+                :fallback-initial="driverAvatarInitial" size="medium" shape="circle" :show-loading="false" bordered />
               <strong data-testid="order-detail.ride-hailing.driver-name">
                 {{ driverName }}
               </strong>
@@ -206,7 +206,12 @@ import { logCommerceOrderDetailDebug } from "@/domains/commerce/use-cases/order-
 import type { Route, RoutePoint } from "@/domains/route/model/route";
 import RouteMap from "@/domains/route/ui/RouteMap.vue";
 import RoutePointList from "@/domains/route/ui/RoutePointList.vue";
-import type { MapActiveGeometry, MapCoordinate, MapFitPadding, MapViewportFollowMode } from "@/shared/map/types";
+import type {
+  MapActiveGeometry,
+  MapCoordinate,
+  MapFitPadding,
+  MapViewportFollowMode,
+} from "@/shared/map/types";
 import { buildRideHailingOrderMapViewModel } from "./ride-hailing-order-map-view-model";
 
 type RideHailingDetail = NonNullable<CommerceOrderDetailResponse["rideHailing"]>;
@@ -427,6 +432,10 @@ const showsDriverCard = computed(() => Boolean(props.ride.driver || props.ride.v
 
 const driverName = computed(() => firstPresentString([props.ride.driver?.driverName]) ?? "司机");
 
+const driverAvatarUrl = computed(
+  () => firstPresentString([props.ride.driver?.driverAvatarUrl]) ?? null,
+);
+
 const driverAvatarInitial = computed(() => driverName.value.trim().slice(0, 1) || "司");
 
 const driverCallHref = computed(() => {
@@ -572,9 +581,9 @@ const rideHailingOrderMapRenderDiagnostics = computed(() => {
     providerPolylineFirstPoint: summarizeMapCoordinate(
       providerPolyline?.[0]
         ? {
-          lat: providerPolyline[0]?.latitude ?? Number.NaN,
-          lng: providerPolyline[0]?.longitude ?? Number.NaN,
-        }
+            lat: providerPolyline[0]?.latitude ?? Number.NaN,
+            lng: providerPolyline[0]?.longitude ?? Number.NaN,
+          }
         : null,
     ),
     providerPolylineLastPoint: summarizeMapCoordinate(
diff --git a/packages/fake-caocao-server/src/server.test.ts b/packages/fake-caocao-server/src/server.test.ts
index 2e516d9f8..19d2e2a97 100644
--- a/packages/fake-caocao-server/src/server.test.ts
+++ b/packages/fake-caocao-server/src/server.test.ts
@@ -254,6 +254,7 @@ describe("startFakeCaocaoServer", () => {
           status: string;
         } & Record<string, unknown>;
         driverInfoVo: {
+          avatar: string;
           card: string;
           carType: string;
           location: { lat: number; lng: number } & Record<string, unknown>;
@@ -288,6 +289,9 @@ describe("startFakeCaocaoServer", () => {
     expect(detailAfterAdvanceBody.data.basicOrderVO.requireLevel).toBe(5);
     expect(detailAfterAdvanceBody.data.basicOrderVO.routeFixedPrice).toBe(false);
     expect(detailAfterAdvanceBody.data.basicOrderVO.specialFixedPrice).toBe(false);
+    expect(detailAfterAdvanceBody.data.driverInfoVo.avatar).toBe(
+      "https://fake.caocao.partner-up.test/driver/avatar.png",
+    );
     expect(detailAfterAdvanceBody.data.driverInfoVo.carType).toBe("几何A");
     expect(detailAfterAdvanceBody.data.driverInfoVo.card).toBe("浙A12345");
     expect(detailAfterAdvanceBody.data.driverInfoVo.location.lat).toBeTypeOf("number");

From bfbdf7ad3ef99a090c0cc23b7bcdb83cf7618dae Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Wed, 1 Jul 2026 13:18:00 +0800
Subject: [PATCH 90/94] fix(frontend): replace order detail history backflow

- replace order creation success navigation so /order/new does not stay in history
- remove order detail page-local back skip logic and rely on shared fallback behavior
- assert native browser back returns to the originating PR in rental and ride-hailing scenarios
---
 .../src/pages/CommerceOrderDetailPage.vue     | 48 ++-----------------
 apps/frontend/src/pages/OrderingPage.vue      |  2 +-
 .../commerce/rental-ordering.scenario.test.ts |  4 ++
 .../ride-hailing-ordering.scenario.test.ts    |  2 +-
 4 files changed, 9 insertions(+), 47 deletions(-)

diff --git a/apps/frontend/src/pages/CommerceOrderDetailPage.vue b/apps/frontend/src/pages/CommerceOrderDetailPage.vue
index d1c16d1e2..fc20c9ef3 100644
--- a/apps/frontend/src/pages/CommerceOrderDetailPage.vue
+++ b/apps/frontend/src/pages/CommerceOrderDetailPage.vue
@@ -232,7 +232,7 @@ import {
 } from "@partner-up-dev/design-web";
 import { storeToRefs } from "pinia";
 import { computed, watch } from "vue";
-import { useRoute, useRouter } from "vue-router";
+import { useRoute } from "vue-router";
 import {
   type CommerceOrderDetailResponse,
   useCancelOrder,
@@ -242,16 +242,12 @@ import {
 import RideHailingOrderContent from "@/domains/commerce/ui/order-detail/RideHailingOrderContent.vue";
 import { logCommerceOrderDetailDebug } from "@/domains/commerce/use-cases/order-detail-debug";
 import { useOrderingHandoffStore } from "@/domains/commerce/use-cases/useOrderingHandoffStore";
+import { useFallbackBack } from "@/shared/routing/useFallbackBack";
 
 type OrderItemSnapshot = CommerceOrderDetailResponse["order"]["items"][number];
 type OrderSkuSnapshot = Extract<OrderItemSnapshot, { kind?: "FIXED"; sku: unknown }>["sku"];
-type RouterHistoryState = {
-  back?: string | null;
-  position?: number | null;
-};
 
 const route = useRoute();
-const router = useRouter();
 const orderingHandoff = useOrderingHandoffStore();
 const { orderingEntry } = storeToRefs(orderingHandoff);
 
@@ -377,45 +373,7 @@ const isCancellationPending = computed(() => latestCancellationAttempt.value?.st
 const backFallbackTo = computed(() =>
   orderingEntry.value?.prId ? { path: `/pr/${orderingEntry.value.prId}` } : { path: "/" },
 );
-
-const readRouterHistoryState = (): RouterHistoryState | null => {
-  if (typeof window === "undefined") return null;
-  return window.history.state as RouterHistoryState | null;
-};
-
-const hasRouterBackEntry = (): boolean => {
-  const historyState = readRouterHistoryState();
-  return typeof historyState?.back === "string" && historyState.back.length > 0;
-};
-
-const shouldSkipOrderingPageBack = (): boolean => {
-  const backPath = readRouterHistoryState()?.back;
-  return typeof backPath === "string" && backPath.startsWith("/order/new");
-};
-
-const canGoBackTwice = (): boolean => {
-  const position = readRouterHistoryState()?.position;
-  return typeof position === "number" && position >= 2;
-};
-
-const handleBack = async (): Promise<void> => {
-  if (shouldSkipOrderingPageBack()) {
-    if (canGoBackTwice()) {
-      router.go(-2);
-      return;
-    }
-
-    await router.replace(backFallbackTo.value);
-    return;
-  }
-
-  if (hasRouterBackEntry()) {
-    router.back();
-    return;
-  }
-
-  await router.replace(backFallbackTo.value);
-};
+const { handleBack } = useFallbackBack(backFallbackTo);
 
 const serviceWindowLabel = computed(() => {
   const start = detail.value?.order.serviceStartAt ?? null;
diff --git a/apps/frontend/src/pages/OrderingPage.vue b/apps/frontend/src/pages/OrderingPage.vue
index fea17f487..7a275d4c0 100644
--- a/apps/frontend/src/pages/OrderingPage.vue
+++ b/apps/frontend/src/pages/OrderingPage.vue
@@ -353,7 +353,7 @@ const createOrderFromQuoteDraft = async (input: CreateOrderInput): Promise<void>
       });
       return;
     }
-    await router.push({ path: `/orders/${created.orderId}` });
+    await router.replace({ path: `/orders/${created.orderId}` });
   } catch (error) {
     closeOrderingDialog();
     const apiError = error as { code?: string; message?: string };
diff --git a/tests/scenario/commerce/rental-ordering.scenario.test.ts b/tests/scenario/commerce/rental-ordering.scenario.test.ts
index 3d5f51257..9ef662b35 100644
--- a/tests/scenario/commerce/rental-ordering.scenario.test.ts
+++ b/tests/scenario/commerce/rental-ordering.scenario.test.ts
@@ -427,6 +427,10 @@ scenario("commerce_rental_ordering_reaches_order_detail", async (ctx) => {
       expectedItemName: "烘焙区 B · 2人 · 2小时",
     });
     createdOrderPath = new URL(page.url()).pathname;
+    await page.goBack();
+    await page.waitForURL((url) => new URL(url).pathname === `/pr/${pr.id}`, {
+      timeout: 10_000,
+    });
   });
 
   const orderPath = createdOrderPath;
diff --git a/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts b/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
index 0c4a15dcf..55d63e6c8 100644
--- a/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
+++ b/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
@@ -965,7 +965,7 @@ scenario("commerce_ride_hailing_ordering_reaches_order_detail", async (ctx) => {
 
     const orderDetailPath = new URL(page.url()).pathname;
     orderPath = orderDetailPath;
-    await page.getByRole("button", { name: "返回上一页" }).click();
+    await page.goBack();
     await page.waitForURL((url) => new URL(url).pathname === `/pr/${pr.id}`, {
       timeout: 10_000,
     });

From 4ba7e92986ae8f45080fea7dac2a3e5213179d49 Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Wed, 1 Jul 2026 13:40:14 +0800
Subject: [PATCH 91/94] fix(commerce): block order creation for unpaid
 participants

- reject create-order when any participant still has an unsettled charge line
- show the unpaid-participant dialog on the ordering page
- cover backend and system ordering regressions
---
 .../domains/trade/use-cases/create-order.ts   |  39 +++++
 .../src/repositories/BillLineRepository.ts    |  20 +++
 .../rental-order-persistence.scenario.test.ts | 125 ++++++++++++++
 apps/frontend/src/pages/OrderingPage.vue      |   8 +
 docs/10-prd/behavior/rules-and-invariants.md  |   1 +
 docs/10-prd/behavior/workflows.md             |   3 +-
 docs/20-product-tdd/ecommerce-contracts.md    |   6 +-
 .../00-task-packet.md                         |  30 ++++
 .../commerce/rental-ordering.scenario.test.ts | 156 +++++++++++++++++-
 9 files changed, 384 insertions(+), 4 deletions(-)
 create mode 100644 tasks/order-unpaid-participant-block/00-task-packet.md

diff --git a/apps/backend/src/domains/trade/use-cases/create-order.ts b/apps/backend/src/domains/trade/use-cases/create-order.ts
index afd90967f..8c23a25cd 100644
--- a/apps/backend/src/domains/trade/use-cases/create-order.ts
+++ b/apps/backend/src/domains/trade/use-cases/create-order.ts
@@ -14,6 +14,7 @@ import type { ProductSpu } from "../../../entities/product-spu";
 import type { RideHailingProviderInstanceId } from "../../../entities/ride-hailing-provider";
 import type { TradeOrderId } from "../../../entities/trade-order";
 import type { UserId } from "../../../entities/user";
+import { BillLineRepository } from "../../../repositories/BillLineRepository";
 import { OfferRepository } from "../../../repositories/OfferRepository";
 import { PartnerRequestRepository } from "../../../repositories/PartnerRequestRepository";
 import { RentalOrderRepository } from "../../../repositories/RentalOrderRepository";
@@ -68,6 +69,7 @@ import {
 
 const offerRepo = new OfferRepository();
 const partnerRequestRepo = new PartnerRequestRepository();
+const billLineRepo = new BillLineRepository();
 const skuCancellationPolicyRepo = new SkuCancellationPolicyRepository();
 const providerRepo = new RideHailingProviderInstanceRepository();
 
@@ -269,6 +271,23 @@ async function validatePrAttachmentForEvaluation(input: {
   return null;
 }
 
+async function validateParticipantUnpaidOrders(input: {
+  participants: OrderParticipantSnapshot[];
+}): Promise<OrderingActionProblem | null> {
+  const unsettledLines = await billLineRepo.listUnsettledChargeLinesByUserIds(
+    input.participants.map((participant) => participant.userId as UserId),
+  );
+  if (unsettledLines.length === 0) {
+    return null;
+  }
+
+  return actionProblem({
+    code: "ORDERING_PARTICIPANT_UNPAID_ORDER_EXISTS",
+    title: "参与者有未支付订单",
+    detail: "订单参与者中有人存在未支付订单，请先完成相关订单支付后再下单。",
+  });
+}
+
 function validateRentalQuoteContext(input: {
   listingContext: RentalQuoteListingContextSnapshot;
   selectedParticipantCount: number;
@@ -1087,6 +1106,16 @@ export async function createOrderCommand(
         code: rentalProblem.code,
       });
     }
+    const participantPaymentProblem = await validateParticipantUnpaidOrders({
+      participants: selected.listingContext.participants,
+    });
+    if (participantPaymentProblem) {
+      return throwHttpProblem({
+        status: 409,
+        detail: participantPaymentProblem.detail,
+        code: participantPaymentProblem.code,
+      });
+    }
     const created = await createRentalOrderBranch({
       command: input,
       selected,
@@ -1102,6 +1131,16 @@ export async function createOrderCommand(
     item: firstQuoteItem,
     itemId,
   });
+  const participantPaymentProblem = await validateParticipantUnpaidOrders({
+    participants: selected.listingContext.participants,
+  });
+  if (participantPaymentProblem) {
+    return throwHttpProblem({
+      status: 409,
+      detail: participantPaymentProblem.detail,
+      code: participantPaymentProblem.code,
+    });
+  }
   return createRideHailingOrderBranch({
     command: input,
     selected,
diff --git a/apps/backend/src/repositories/BillLineRepository.ts b/apps/backend/src/repositories/BillLineRepository.ts
index d33e0f785..f063bf071 100644
--- a/apps/backend/src/repositories/BillLineRepository.ts
+++ b/apps/backend/src/repositories/BillLineRepository.ts
@@ -7,6 +7,7 @@ import {
   type NewBillLine,
 } from "../entities/bill";
 import type { PaymentProviderInstanceId } from "../entities/payment";
+import type { UserId } from "../entities/user";
 import { db } from "../lib/db";
 import type { RepositoryExecutor } from "./_executor";
 
@@ -41,6 +42,25 @@ export class BillLineRepository {
       .orderBy(asc(billLines.createdAt), asc(billLines.id));
   }
 
+  async listUnsettledChargeLinesByUserIds(userIds: UserId[]): Promise<BillLine[]> {
+    const uniqueUserIds = Array.from(new Set(userIds));
+    if (uniqueUserIds.length === 0) {
+      return [];
+    }
+
+    return this.executor
+      .select()
+      .from(billLines)
+      .where(
+        and(
+          inArray(billLines.userId, uniqueUserIds),
+          eq(billLines.kind, "CHARGE"),
+          isNull(billLines.settledAt),
+        ),
+      )
+      .orderBy(asc(billLines.createdAt), asc(billLines.id));
+  }
+
   async findById(id: BillLineId): Promise<BillLine | null> {
     const result = await this.executor.select().from(billLines).where(eq(billLines.id, id));
     return result[0] ?? null;
diff --git a/apps/backend/tests/commerce/rental-order-persistence.scenario.test.ts b/apps/backend/tests/commerce/rental-order-persistence.scenario.test.ts
index ca12e8f7b..11f45f2c1 100644
--- a/apps/backend/tests/commerce/rental-order-persistence.scenario.test.ts
+++ b/apps/backend/tests/commerce/rental-order-persistence.scenario.test.ts
@@ -12,6 +12,7 @@ import {
 } from "../../src/domains/merchandising";
 import {
   buildOrderParticipantsFromContext,
+  createOrderCommand,
   createRentalOrder,
 } from "../../src/domains/trade";
 import {
@@ -21,11 +22,14 @@ import {
 import { attachOrderToPr } from "../../src/domains/pr-core";
 import type { OfferId } from "../../src/entities/offer";
 import type { BillId } from "../../src/entities/bill";
+import type { OfferListingSessionId, OfferQuoteId } from "../../src/entities/commerce-quote";
 import type { PaymentProviderInstanceId } from "../../src/entities/payment";
 import type { PRId } from "../../src/entities/partner-request";
 import type { ProductSku } from "../../src/entities/product-sku";
 import type { TradeOrderId } from "../../src/entities/trade-order";
+import { ProblemDetailsError } from "../../src/lib/problem-details";
 import { BillLineRepository } from "../../src/repositories/BillLineRepository";
+import { CommerceQuoteRepository } from "../../src/repositories/CommerceQuoteRepository";
 import { PartnerRepository } from "../../src/repositories/PartnerRepository";
 import { PartnerRequestRepository } from "../../src/repositories/PartnerRequestRepository";
 import { RentalOrderRepository } from "../../src/repositories/RentalOrderRepository";
@@ -36,6 +40,7 @@ const partnerRequestRepo = new PartnerRequestRepository();
 const tradeOrderRepo = new TradeOrderRepository();
 const rentalOrderRepo = new RentalOrderRepository();
 const billLineRepo = new BillLineRepository();
+const quoteRepo = new CommerceQuoteRepository();
 
 const generateRsaPrivateKeyPem = (): string => {
   const { privateKey } = generateKeyPairSync("rsa", {
@@ -189,6 +194,61 @@ async function givenRentalCatalog() {
   return { offer, sku, spu };
 }
 
+async function createRentalFixedQuote(input: {
+  offerId: OfferId;
+  sku: ProductSku;
+  spuId: number;
+  participants: Awaited<ReturnType<typeof listPrOrderParticipants>>;
+  contactPhone: string;
+  registrantName: string;
+}): Promise<OfferQuoteId> {
+  const quoteId = randomUUID() as OfferQuoteId;
+  await quoteRepo.create({
+    id: quoteId,
+    listingSessionId: randomUUID() as OfferListingSessionId,
+    offerId: input.offerId,
+    productType: "RENTAL",
+    itemKind: "FIXED",
+    spuId: input.spuId,
+    skuId: input.sku.id,
+    quantity: 1,
+    listingContextSnapshot: {
+      productType: "RENTAL",
+      participants: input.participants,
+      serviceStartAt,
+      serviceEndAt,
+      contactPhone: input.contactPhone,
+      registrants: input.participants.map(() => ({
+        name: input.registrantName,
+        phone: input.contactPhone,
+        nationalIdMasked: null,
+      })),
+    },
+    fulfillmentQuoteSnapshot: {
+      productType: "RENTAL",
+    },
+    pricingSnapshot: {
+      currency: "CNY",
+      totalFen: 1200,
+      explanations: [],
+    },
+    expiresAt: new Date(Date.now() + 5 * 60 * 1000),
+  });
+  return quoteId;
+}
+
+async function assertProblemCode(run: () => Promise<unknown>, expectedCode: string): Promise<void> {
+  let thrown: unknown = null;
+  try {
+    await run();
+  } catch (error) {
+    thrown = error;
+  }
+
+  assert.ok(thrown instanceof ProblemDetailsError);
+  assert.equal(thrown.code, expectedCode);
+}
+
 scenario("commerce_rental_order_persists_base_and_typed_rows", async (ctx) => {
   const creator = await givenUser("rental-typed-order-creator");
   const prId = await givenRentalPr(creator);
@@ -592,3 +652,68 @@ scenario("commerce_rental_order_create_rolls_back_typed_rows", async () => {
     0,
   );
 });
+
+scenario("commerce_create_order_blocks_participant_with_unpaid_order", async () => {
+  const creator = await givenUser("rental-create-order-unpaid-block");
+  const existingPrId = await givenRentalPr(creator);
+  const nextPrId = await givenRentalPr(creator);
+  const { offer, sku, spu } = await givenRentalCatalog();
+  const existingParticipants = await listPrOrderParticipants(existingPrId, creator.user.id);
+  const existingItemId = randomUUID();
+
+  const existingOrder = await createRentalOrder({
+    createdBy: creator.user.id,
+    participants: existingParticipants,
+    offerId: offer.id,
+    items: [buildRentalOrderItem({ itemId: existingItemId, sku })],
+    pricingSnapshot: {
+      currency: "CNY",
+      itemBreakdowns: [
+        {
+          itemId: existingItemId,
+          resolvedAmountFen: 1200,
+          explanations: [],
+        },
+      ],
+      orderLevelExplanations: [],
+      subtotalFen: 1200,
+      totalFen: 1200,
+    },
+    serviceStartAt,
+    serviceEndAt,
+    contactPhone: "13800138111",
+    registrants: [
+      {
+        name: "王五",
+        phone: "13800138111",
+        nationalIdMasked: null,
+      },
+    ],
+  });
+  await tradeOrderRepo.updateStatus(existingOrder.orderId as TradeOrderId, "CANCELLED", new Date());
+
+  const nextParticipants = await listPrOrderParticipants(nextPrId, creator.user.id);
+  const nextQuoteId = await createRentalFixedQuote({
+    offerId: offer.id as OfferId,
+    sku,
+    spuId: spu.id,
+    participants: nextParticipants,
+    contactPhone: "13800138222",
+    registrantName: "赵六",
+  });
+
+  await assertProblemCode(
+    () =>
+      createOrderCommand({
+        createdBy: creator.user.id,
+        prId: nextPrId,
+        items: [
+          {
+            kind: "FIXED",
+            quoteId: nextQuoteId,
+          },
+        ],
+      }),
+    "ORDERING_PARTICIPANT_UNPAID_ORDER_EXISTS",
+  );
+});
diff --git a/apps/frontend/src/pages/OrderingPage.vue b/apps/frontend/src/pages/OrderingPage.vue
index 7a275d4c0..ca87278c2 100644
--- a/apps/frontend/src/pages/OrderingPage.vue
+++ b/apps/frontend/src/pages/OrderingPage.vue
@@ -365,6 +365,14 @@ const createOrderFromQuoteDraft = async (input: CreateOrderInput): Promise<void>
       });
       return;
     }
+    if (apiError.code === "ORDERING_PARTICIPANT_UNPAID_ORDER_EXISTS") {
+      openInfoDialog({
+        title: "参与者有未支付订单",
+        description:
+          apiError.message ?? "订单参与者中有人存在未支付订单，请先完成相关订单支付后再下单。",
+      });
+      return;
+    }
     if (apiError.code === "PR_NOT_READY" && canOfferPrReadyRecovery.value) {
       openPrNotReadyRecoveryDialog({
         title: "暂不能创建订单",
diff --git a/docs/10-prd/behavior/rules-and-invariants.md b/docs/10-prd/behavior/rules-and-invariants.md
index 150b1c869..432e958c3 100644
--- a/docs/10-prd/behavior/rules-and-invariants.md
+++ b/docs/10-prd/behavior/rules-and-invariants.md
@@ -132,6 +132,7 @@
 - Offer Listing is the user-visible quote surface. A listing may include only products and SKUs that are currently offerable for the selected context.
 - Quote identity is the freshness and authorization boundary between listing and create-order. Create-order should use quote identity instead of trusting browser-copied product, route, participant, or price fields.
 - Expired quotes require a fresh listing and a second explicit user create action. The system should preserve matching user selections after refresh when those selections are still listed.
+- Create-order must be blocked when any intended order participant still has another unpaid order obligation. The block is enforced by the backend create-order boundary and surfaced on `/order/new` through a focused dialog rather than silent failure.
 - Rental ordering buys one fixed quoted SKU.
 - RideHailing ordering authorizes a choice set: the user selects one or more acceptable vehicle candidates, and the provider/order lifecycle resolves one final vehicle after dispatch.
 - RideHailing visible vehicle candidates depend on route and departure time. Provider-unavailable candidates should be absent from the list, not shown as disabled options with reasons.
diff --git a/docs/10-prd/behavior/workflows.md b/docs/10-prd/behavior/workflows.md
index 829fca731..4e37f3320 100644
--- a/docs/10-prd/behavior/workflows.md
+++ b/docs/10-prd/behavior/workflows.md
@@ -87,7 +87,8 @@
 7. For RideHailing, the user chooses one or more acceptable vehicle candidates. The displayed price is the selected candidate range. Unavailable provider vehicle types are omitted from the list rather than shown as disabled choices.
 8. RideHailing Ordering currently short-circuits departure-time editing and always behaves as `现在出发`, even when the PR itself carries a concrete start time.
 9. Create order submits quote identity, not copied route, participant, SKU, or price facts. If the quote expired, the page refreshes listing, preserves matching selected vehicles when possible, and requires the user to click order again.
-10. If create succeeds, the user enters Order Detail. If provider dispatch creates then immediately cancels a RideHailing order, the user stays on `/order/new` and sees a failure dialog with the reason.
+10. Before create succeeds, the system must reject the request when any intended order participant still has another unpaid order obligation. The Ordering Page stays on `/order/new` and explains the block through a focused dialog.
+11. If create succeeds, the user enters Order Detail. If provider dispatch creates then immediately cancels a RideHailing order, the user stays on `/order/new` and sees a failure dialog with the reason.
 
 ## 5. Revisit and History Entry
 
diff --git a/docs/20-product-tdd/ecommerce-contracts.md b/docs/20-product-tdd/ecommerce-contracts.md
index 788a299c3..c8cf57e60 100644
--- a/docs/20-product-tdd/ecommerce-contracts.md
+++ b/docs/20-product-tdd/ecommerce-contracts.md
@@ -352,7 +352,7 @@ The baseline Rental user-visible chain is:
 
 1. PR Page placement entry
 2. `/order/new` ordering assembly and Offer Listing quote issuance
-3. Order creation from fixed quote id
+3. Order creation from fixed quote id, unless any intended participant still has another unpaid order obligation
 4. Order Detail `待支付`
 5. same Order Detail `待确认预订`
 6. same Order Detail resolves to:
@@ -371,7 +371,7 @@ The baseline RideHailing user-visible chain is:
 
 1. PR Page placement entry
 2. `/order/new` ordering assembly and route/time-based Offer Listing quote issuance
-3. Order creation from selected candidate quote ids
+3. Order creation from selected candidate quote ids, unless any intended participant still has another unpaid order obligation
 4. Order Detail with quote basis and fulfillment state
 5. same Order Detail with final bill after trip finish
 6. same Order Detail with final payment/completed state
@@ -386,6 +386,7 @@ forcing the whole order-detail projection to become a high-frequency payload.
 Rental:
 
 - prepaid
+- create-order must reject when any intended participant still has another unpaid order obligation; this guard applies before the new order row is created
 - Bill exists before execution begins
 - typed order creation keeps the standard unpaid payment window on the base
   Order timeout snapshot
@@ -395,6 +396,7 @@ Rental:
 RideHailing:
 
 - usage-based final settlement
+- the same participant unpaid-order guard applies before create-order starts provider dispatch
 - typed order creation overrides the base Order timeout snapshot so final-bill
   payment is not constrained by the standard unpaid payment window
 - Order is created from candidate quote snapshots. For RideHailing, the user
diff --git a/tasks/order-unpaid-participant-block/00-task-packet.md b/tasks/order-unpaid-participant-block/00-task-packet.md
new file mode 100644
index 000000000..0a62e4609
--- /dev/null
+++ b/tasks/order-unpaid-participant-block/00-task-packet.md
@@ -0,0 +1,30 @@
+# Task Packet - Order Unpaid Participant Block
+
+## Objective & Hypothesis
+
+- Objective & Hypothesis: keep order creation blocked when any intended participant still carries an unpaid order obligation, but define that obligation by unsettled `CHARGE` lines alone. Hypothesis: the backend create-order gate should depend only on participant-linked unsettled charge lines, without narrowing the rule by current bill or order status.
+
+## Guardrails Touched
+
+- Typed input: Intent.
+- Durable owner: commerce ordering rule at the create-order boundary.
+- Backend surfaces:
+  - `POST /api/commerce/orders`
+  - `BillLineRepository` unpaid-obligation lookup
+  - create-order regression scenario coverage
+- Frontend surfaces:
+  - existing `/order/new` dialog mapping remains unchanged in this slice
+
+## Current Understanding
+
+- The current user-visible requirement is stronger than the previous implementation shortcut.
+- `settledAt is null` on a participant `CHARGE` line is the relevant payment fact.
+- Filtering further by `bill.status` or `order.status` weakens the requested rule.
+- Regression fixtures should not manufacture `CLOSED` bills that still carry unsettled charge lines; use repository-consistent unpaid states instead.
+
+## Verification
+
+- Passed:
+  - `pnpm exec vitest run --project backend-scenario apps/backend/tests/commerce/rental-order-persistence.scenario.test.ts -t commerce_create_order_blocks_participant_with_unpaid_order`
+  - `pnpm exec vitest run --project system-scenario tests/scenario/commerce/rental-ordering.scenario.test.ts -t commerce_rental_ordering_blocks_participant_with_unpaid_order`
+  - `pnpm check:type:backend`
diff --git a/tests/scenario/commerce/rental-ordering.scenario.test.ts b/tests/scenario/commerce/rental-ordering.scenario.test.ts
index 9ef662b35..eddfc8e5f 100644
--- a/tests/scenario/commerce/rental-ordering.scenario.test.ts
+++ b/tests/scenario/commerce/rental-ordering.scenario.test.ts
@@ -8,6 +8,10 @@ import {
   createSkuCancellationPolicy,
 } from "../../../apps/backend/src/domains/merchandising";
 import { registerPaymentProviderInstance } from "../../../apps/backend/src/domains/payment";
+import {
+  buildOrderParticipantsFromContext,
+  createRentalOrder,
+} from "../../../apps/backend/src/domains/trade";
 import { PartnerRepository } from "../../../apps/backend/src/repositories/PartnerRepository";
 import { PartnerRequestRepository } from "../../../apps/backend/src/repositories/PartnerRequestRepository";
 import {
@@ -245,6 +249,113 @@ async function givenRentalOrderingPlacement() {
   });
 }
 
+async function seedStandaloneUnpaidRentalOrder(user: ScenarioUser): Promise<void> {
+  const spu = await createProductSpu({
+    name: `系统测试历史未支付场地单-${user.user.id}`,
+    productType: "RENTAL",
+    status: "ACTIVE",
+    salesPolicy: {
+      skuSelectionPolicy: {
+        type: "EXACTLY_ONE",
+      },
+      quantityPolicy: {
+        type: "FIXED",
+        quantity: 1,
+      },
+    },
+    servicePolicy: {
+      type: "RENTAL",
+      bookingLeadTimeMinutes: 0,
+      requiresContactPhone: true,
+      requiresRealName: true,
+      requiresNationalId: false,
+    },
+    presentation: {
+      heroImageAssetIds: [],
+      detailImageAssetIds: [],
+      sellingPoints: [],
+      parameterGroups: [],
+      noticeBlocks: [],
+    },
+  });
+  const sku = await createProductSku({
+    spuId: spu.id,
+    name: "历史未支付场地单",
+    status: "ACTIVE",
+    facts: {
+      type: "RENTAL",
+      zoneCode: `LEGACY_UNPAID_${user.user.id}`,
+      participantCount: 1,
+      durationMinutes: 60,
+    },
+    pricingModel: {
+      type: "FIXED_TOTAL",
+      amountFen: 1800,
+    },
+  });
+  const offer = await createOffer({
+    productType: "RENTAL",
+    spuIds: [spu.id],
+    status: "ACTIVE",
+    pricingRules: [],
+    termsVersion: 1,
+  });
+  const itemId = `legacy-item-${user.user.id}`;
+  const participants = buildOrderParticipantsFromContext({
+    participants: [
+      {
+        participantId: `legacy-${user.user.id}`,
+        userId: user.user.id,
+        joinedVia: "API",
+      },
+    ],
+    createdBy: user.user.id,
+  });
+
+  await createRentalOrder({
+    createdBy: user.user.id,
+    participants,
+    offerId: offer.id,
+    items: [
+      {
+        itemId,
+        sku: {
+          id: sku.id,
+          version: sku.version,
+          name: sku.name,
+          factsSnapshot: sku.facts,
+          pricingModelSnapshot: sku.pricingModel,
+          cancellationPolicySnapshot: null,
+        },
+        quantity: 1,
+      },
+    ],
+    pricingSnapshot: {
+      currency: "CNY",
+      itemBreakdowns: [
+        {
+          itemId,
+          resolvedAmountFen: 1800,
+          explanations: [],
+        },
+      ],
+      orderLevelExplanations: [],
+      subtotalFen: 1800,
+      totalFen: 1800,
+    },
+    serviceStartAt: "2031-01-02T10:00:00.000Z",
+    serviceEndAt: "2031-01-02T11:00:00.000Z",
+    contactPhone: "13800138009",
+    registrants: [
+      {
+        name: "历史参与者",
+        phone: "13800138009",
+        nationalIdMasked: null,
+      },
+    ],
+  });
+}
+
 async function assertLocatorTextIncludes(input: {
   actual: Promise<string | null>;
   expected: string;
@@ -282,8 +393,11 @@ async function waitForRentalQuoteReady(page: Page, expectedPrice = "20.00"): Pro
 async function assertOrderingBlockedDialog(input: {
   page: Page;
   expectedDetail: string;
+  expectedTitle?: string;
 }): Promise<void> {
-  const dialog = input.page.getByRole("dialog", { name: "暂不能创建订单" });
+  const dialog = input.page.getByRole("dialog", {
+    name: input.expectedTitle ?? "暂不能创建订单",
+  });
   await dialog.waitFor({
     state: "visible",
     timeout: 10_000,
@@ -437,6 +551,46 @@ scenario("commerce_rental_ordering_reaches_order_detail", async (ctx) => {
   assert.match(orderPath ?? "", /^\/orders\/[0-9a-f-]+$/);
 });
 
+scenario("commerce_rental_ordering_blocks_participant_with_unpaid_order", async (ctx) => {
+  const creator = await givenUser("system-commerce-unpaid-participant-creator");
+  const joiner = await givenUser("system-commerce-unpaid-participant-joiner");
+  await seedStandaloneUnpaidRentalOrder(joiner);
+  const pr = await givenCommerceRentalPr({
+    creator,
+    minPartners: 2,
+    maxPartners: null,
+    title: "System commerce unpaid participant rental PR",
+  });
+  await addJoinedParticipant({ pr, user: joiner });
+  await configurePRStatus({ pr, status: "READY" });
+  const placement = await givenRentalOrderingPlacement();
+
+  ctx.record("prId", pr.id);
+  ctx.record("placementId", placement.id);
+  ctx.record("blockedParticipantUserId", joiner.user.id);
+
+  await withScenarioPage(async (page) => {
+    await installScenarioUserSession(page, creator);
+    await installDeterministicShareSidecarStubs(page);
+
+    await page.goto(`/pr/${pr.id}`);
+    await page.getByTestId("pr-detail.commerce-placement.open").click();
+    await page.getByTestId("ordering.rental.page").waitFor({
+      state: "visible",
+      timeout: 10_000,
+    });
+    await fillRentalOrderingRequiredFields(page);
+    await waitForRentalQuoteReady(page);
+    await page.getByTestId("ordering.rental.create-order").click();
+    await assertOrderingBlockedDialog({
+      page,
+      expectedTitle: "参与者有未支付订单",
+      expectedDetail: "订单参与者中有人存在未支付订单，请先完成相关订单支付后再下单。",
+    });
+    assert.equal(new URL(page.url()).pathname, "/order/new");
+  });
+});
+
 scenario("commerce_rental_pr_button_requires_matching_rule", async (ctx) => {
   const creator = await givenUser("system-commerce-placement-mismatch-creator");
   const pr = await givenCommerceRentalPr({

From ed45d81c1813ba79847872a8c2c133b711b73d74 Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Wed, 1 Jul 2026 14:56:20 +0800
Subject: [PATCH 92/94] feat(commerce): add my bills recovery flow

- add a viewer-scoped /bills route backed by ordered billId reads and reused BillCard hydration
- route unpaid-order dialog recovery to my bills and explain the viewer-only limitation
- align unauthenticated bill-list access with WeChat auto-login and cover backend/system regressions
---
 .../src/controllers/commerce.controller.ts    |  17 +-
 .../src/domains/bill/use-cases/index.ts       |   1 +
 .../bill/use-cases/list-viewer-bills.ts       |  59 +++++++
 .../src/repositories/BillLineRepository.ts    |   8 +
 .../src/repositories/BillRepository.ts        |  10 +-
 .../rental-order-persistence.scenario.test.ts | 107 +++++++++++++
 apps/frontend/src/app/router.ts               |  10 ++
 .../domains/commerce/queries/useCommerce.ts   |  19 +++
 apps/frontend/src/pages/CommerceBillsPage.vue | 145 ++++++++++++++++++
 apps/frontend/src/pages/OrderingPage.vue      |  28 +++-
 apps/frontend/src/shared/api/query-keys.ts    |   1 +
 docs/10-prd/behavior/rules-and-invariants.md  |   1 +
 docs/10-prd/behavior/workflows.md             |   2 +-
 docs/20-product-tdd/ecommerce-contracts.md    |   1 +
 tasks/my-bills-page/00-task-packet.md         |  25 +++
 .../commerce/rental-ordering.scenario.test.ts |  63 ++++++++
 16 files changed, 493 insertions(+), 4 deletions(-)
 create mode 100644 apps/backend/src/domains/bill/use-cases/list-viewer-bills.ts
 create mode 100644 apps/frontend/src/pages/CommerceBillsPage.vue
 create mode 100644 tasks/my-bills-page/00-task-packet.md

diff --git a/apps/backend/src/controllers/commerce.controller.ts b/apps/backend/src/controllers/commerce.controller.ts
index fd6626e2b..f26dedf1b 100644
--- a/apps/backend/src/controllers/commerce.controller.ts
+++ b/apps/backend/src/controllers/commerce.controller.ts
@@ -2,7 +2,12 @@ import { zValidator } from "@hono/zod-validator";
 import { Hono } from "hono";
 import { z } from "zod";
 import { type AuthEnv, authMiddleware } from "../auth/middleware";
-import { getBillDetail, getBillDetailByOrderId, getBillLineCheckoutTarget } from "../domains/bill";
+import {
+  getBillDetail,
+  getBillDetailByOrderId,
+  getBillLineCheckoutTarget,
+  listViewerBills,
+} from "../domains/bill";
 import {
   cancelOrderFromOrderDetail,
   createOrderCommand,
@@ -143,6 +148,9 @@ type CommerceRouteSchema = {
   "/orders/:orderId/bill": {
     $get: JsonEndpoint<UuidParam<"orderId">, Awaited<ReturnType<typeof getBillDetailByOrderId>>>;
   };
+  "/bills": {
+    $get: JsonEndpoint<{}, Awaited<ReturnType<typeof listViewerBills>>>;
+  };
   "/bills/:billId": {
     $get: JsonEndpoint<UuidParam<"billId">, Awaited<ReturnType<typeof getBillDetail>>>;
   };
@@ -246,6 +254,13 @@ export const commerceRoute: Hono<AuthEnv, CommerceRouteSchema> = app
     });
     return c.json(result);
   })
+  .get("/bills", async (c) => {
+    const userId = requireAuthenticatedUserId(c);
+    const result = await listViewerBills({
+      viewerUserId: userId,
+    });
+    return c.json(result);
+  })
   .get("/bills/:billId", zValidator("param", billIdParamSchema), async (c) => {
     const { billId } = c.req.valid("param");
     const auth = c.get("auth");
diff --git a/apps/backend/src/domains/bill/use-cases/index.ts b/apps/backend/src/domains/bill/use-cases/index.ts
index db45ddf79..0b493c992 100644
--- a/apps/backend/src/domains/bill/use-cases/index.ts
+++ b/apps/backend/src/domains/bill/use-cases/index.ts
@@ -1,4 +1,5 @@
 export * from "./create-bill-from-seed";
 export * from "./get-bill-detail";
 export * from "./get-bill-line-checkout-target";
+export * from "./list-viewer-bills";
 export * from "./reconcile-bill-to-target-amount";
diff --git a/apps/backend/src/domains/bill/use-cases/list-viewer-bills.ts b/apps/backend/src/domains/bill/use-cases/list-viewer-bills.ts
new file mode 100644
index 000000000..3b22c8e66
--- /dev/null
+++ b/apps/backend/src/domains/bill/use-cases/list-viewer-bills.ts
@@ -0,0 +1,59 @@
+import type { BillId, BillLine } from "../../../entities/bill";
+import type { UserId } from "../../../entities/user";
+import { throwHttpProblem } from "../../../lib/problem-details";
+import { BillLineRepository } from "../../../repositories/BillLineRepository";
+import { BillRepository } from "../../../repositories/BillRepository";
+
+const billRepo = new BillRepository();
+const billLineRepo = new BillLineRepository();
+
+export type ViewerBillListProjection = {
+  billIds: string[];
+};
+
+const hasOutstandingViewerCharge = (lines: BillLine[]): boolean =>
+  lines.some((line) => line.kind === "CHARGE" && line.settledAt === null);
+
+export async function listViewerBills(input: {
+  viewerUserId: string | null;
+}): Promise<ViewerBillListProjection> {
+  if (!input.viewerUserId) {
+    return throwHttpProblem({ status: 401, detail: "Authentication required" });
+  }
+
+  const viewerUserId = input.viewerUserId as UserId;
+  const viewerLines = await billLineRepo.listByUserId(viewerUserId);
+  const viewerBillIds = Array.from(new Set(viewerLines.map((line) => line.billId)));
+
+  if (viewerBillIds.length === 0) {
+    return { billIds: [] };
+  }
+
+  const bills = await billRepo.findByIds(viewerBillIds);
+  const linesByBillId = new Map<BillId, BillLine[]>();
+  for (const line of viewerLines) {
+    const current = linesByBillId.get(line.billId) ?? [];
+    current.push(line);
+    linesByBillId.set(line.billId, current);
+  }
+
+  const billIds = bills
+    .slice()
+    .sort((left, right) => {
+      const leftHasOutstandingCharge = hasOutstandingViewerCharge(
+        linesByBillId.get(left.id) ?? [],
+      );
+      const rightHasOutstandingCharge = hasOutstandingViewerCharge(
+        linesByBillId.get(right.id) ?? [],
+      );
+
+      if (leftHasOutstandingCharge !== rightHasOutstandingCharge) {
+        return rightHasOutstandingCharge ? 1 : -1;
+      }
+
+      return right.createdAt.getTime() - left.createdAt.getTime();
+    })
+    .map((bill) => bill.id);
+
+  return { billIds };
+}
diff --git a/apps/backend/src/repositories/BillLineRepository.ts b/apps/backend/src/repositories/BillLineRepository.ts
index f063bf071..818b22f2c 100644
--- a/apps/backend/src/repositories/BillLineRepository.ts
+++ b/apps/backend/src/repositories/BillLineRepository.ts
@@ -42,6 +42,14 @@ export class BillLineRepository {
       .orderBy(asc(billLines.createdAt), asc(billLines.id));
   }
 
+  async listByUserId(userId: UserId): Promise<BillLine[]> {
+    return this.executor
+      .select()
+      .from(billLines)
+      .where(eq(billLines.userId, userId))
+      .orderBy(asc(billLines.createdAt), asc(billLines.id));
+  }
+
   async listUnsettledChargeLinesByUserIds(userIds: UserId[]): Promise<BillLine[]> {
     const uniqueUserIds = Array.from(new Set(userIds));
     if (uniqueUserIds.length === 0) {
diff --git a/apps/backend/src/repositories/BillRepository.ts b/apps/backend/src/repositories/BillRepository.ts
index 78e903417..b25ebd9be 100644
--- a/apps/backend/src/repositories/BillRepository.ts
+++ b/apps/backend/src/repositories/BillRepository.ts
@@ -1,4 +1,4 @@
-import { desc, eq } from "drizzle-orm";
+import { desc, eq, inArray } from "drizzle-orm";
 import { db } from "../lib/db";
 import {
   bills,
@@ -34,6 +34,14 @@ export class BillRepository {
     return result[0] ?? null;
   }
 
+  async findByIds(ids: BillId[]): Promise<Bill[]> {
+    if (ids.length === 0) {
+      return [];
+    }
+
+    return this.executor.select().from(bills).where(inArray(bills.id, ids));
+  }
+
   async listAll(): Promise<Bill[]> {
     return this.executor.select().from(bills).orderBy(desc(bills.createdAt));
   }
diff --git a/apps/backend/tests/commerce/rental-order-persistence.scenario.test.ts b/apps/backend/tests/commerce/rental-order-persistence.scenario.test.ts
index 11f45f2c1..05011867b 100644
--- a/apps/backend/tests/commerce/rental-order-persistence.scenario.test.ts
+++ b/apps/backend/tests/commerce/rental-order-persistence.scenario.test.ts
@@ -34,6 +34,7 @@ import { PartnerRepository } from "../../src/repositories/PartnerRepository";
 import { PartnerRequestRepository } from "../../src/repositories/PartnerRequestRepository";
 import { RentalOrderRepository } from "../../src/repositories/RentalOrderRepository";
 import { TradeOrderRepository } from "../../src/repositories/TradeOrderRepository";
+import { expectJsonResponse, requestJson } from "../_infra/http/backend-app";
 
 const partnerRepo = new PartnerRepository();
 const partnerRequestRepo = new PartnerRequestRepository();
@@ -237,6 +238,56 @@ async function createRentalFixedQuote(input: {
   return quoteId;
 }
 
+async function createStandaloneRentalOrder(input: {
+  user: ScenarioUser;
+  offerId: OfferId;
+  sku: ProductSku;
+  contactPhone: string;
+  registrantName: string;
+}) {
+  const itemId = randomUUID();
+  const participants = buildOrderParticipantsFromContext({
+    participants: [
+      {
+        participantId: `standalone-${randomUUID()}`,
+        userId: input.user.user.id,
+        joinedVia: "API",
+      },
+    ],
+    createdBy: input.user.user.id,
+  });
+
+  return createRentalOrder({
+    createdBy: input.user.user.id,
+    participants,
+    offerId: input.offerId,
+    items: [buildRentalOrderItem({ itemId, sku: input.sku })],
+    pricingSnapshot: {
+      currency: "CNY",
+      itemBreakdowns: [
+        {
+          itemId,
+          resolvedAmountFen: 1200,
+          explanations: [],
+        },
+      ],
+      orderLevelExplanations: [],
+      subtotalFen: 1200,
+      totalFen: 1200,
+    },
+    serviceStartAt,
+    serviceEndAt,
+    contactPhone: input.contactPhone,
+    registrants: [
+      {
+        name: input.registrantName,
+        phone: input.contactPhone,
+        nationalIdMasked: null,
+      },
+    ],
+  });
+}
+
 async function assertProblemCode(run: () => Promise<unknown>, expectedCode: string): Promise<void> {
   let thrown: unknown = null;
   try {
@@ -717,3 +768,59 @@ scenario("commerce_create_order_blocks_participant_with_unpaid_order", async ()
     "ORDERING_PARTICIPANT_UNPAID_ORDER_EXISTS",
   );
 });
+
+scenario("commerce_bill_list_returns_only_viewer_bill_ids", async (ctx) => {
+  const viewer = await givenUser("viewer-bills-owner");
+  const otherUser = await givenUser("viewer-bills-other-user");
+  const { offer, sku } = await givenRentalCatalog();
+
+  const firstViewerOrder = await createStandaloneRentalOrder({
+    user: viewer,
+    offerId: offer.id,
+    sku,
+    contactPhone: "13800138011",
+    registrantName: "账单用户一",
+  });
+  const secondViewerOrder = await createStandaloneRentalOrder({
+    user: viewer,
+    offerId: offer.id,
+    sku,
+    contactPhone: "13800138012",
+    registrantName: "账单用户二",
+  });
+  const otherUserOrder = await createStandaloneRentalOrder({
+    user: otherUser,
+    offerId: offer.id,
+    sku,
+    contactPhone: "13800138013",
+    registrantName: "其他用户",
+  });
+
+  ctx.record("viewerUserId", viewer.user.id);
+  ctx.record("firstViewerBillId", firstViewerOrder.billId);
+  ctx.record("secondViewerBillId", secondViewerOrder.billId);
+  ctx.record("otherUserBillId", otherUserOrder.billId);
+
+  const response = await requestJson("/api/commerce/bills", {
+    token: viewer.token,
+  });
+  const body = await expectJsonResponse<{ billIds: string[] }>(response, 200);
+
+  assert.equal(body.billIds.includes(otherUserOrder.billId), false);
+  assert.equal(body.billIds.length, 2);
+  assert.deepEqual(
+    new Set(body.billIds),
+    new Set([firstViewerOrder.billId, secondViewerOrder.billId]),
+  );
+});
+
+scenario("commerce_bill_list_requires_authenticated_role", async () => {
+  const response = await requestJson("/api/commerce/bills");
+  const body = await expectJsonResponse<{
+    status: number;
+    code?: string;
+    detail: string;
+  }>(response, 401);
+
+  assert.equal(body.code, "AUTHENTICATED_REQUIRED");
+});
diff --git a/apps/frontend/src/app/router.ts b/apps/frontend/src/app/router.ts
index 505244010..ef9ff6b85 100644
--- a/apps/frontend/src/app/router.ts
+++ b/apps/frontend/src/app/router.ts
@@ -17,6 +17,7 @@ const PRPairingCodePage = () => import("@/pages/PRPairingCodePage.vue");
 const PRMessagesPage = () => import("@/pages/PRMessagesPage.vue");
 const OrderingPage = () => import("@/pages/OrderingPage.vue");
 const OrderingSupportPage = () => import("@/pages/OrderingSupportPage.vue");
+const CommerceBillsPage = () => import("@/pages/CommerceBillsPage.vue");
 const CommerceOrderDetailPage = () => import("@/pages/CommerceOrderDetailPage.vue");
 const CommerceBillDetailPage = () => import("@/pages/CommerceBillDetailPage.vue");
 const PaymentCheckoutPage = () => import("@/pages/PaymentCheckoutPage.vue");
@@ -144,6 +145,15 @@ const routes: RouteRecordRaw[] = [
       wechatSharePolicy: "skip",
     },
   },
+  {
+    path: "/bills",
+    name: "commerce-bills",
+    component: CommerceBillsPage,
+    meta: {
+      wechatSharePolicy: "skip",
+      wechatAutoLoginPolicy: "route",
+    },
+  },
   {
     path: "/orders/:orderId",
     name: "commerce-order-detail",
diff --git a/apps/frontend/src/domains/commerce/queries/useCommerce.ts b/apps/frontend/src/domains/commerce/queries/useCommerce.ts
index b71d875ac..a3c61d833 100644
--- a/apps/frontend/src/domains/commerce/queries/useCommerce.ts
+++ b/apps/frontend/src/domains/commerce/queries/useCommerce.ts
@@ -45,6 +45,8 @@ export type RideHailingCancellationFeePreviewResponse = InferResponseType<
   CommerceApi["orders"][":orderId"]["cancel-fee-preview"]["$get"]
 >;
 
+export type ViewerBillListResponse = InferResponseType<CommerceApi["bills"]["$get"]>;
+
 export type BillDetailResponse = InferResponseType<CommerceApi["bills"][":billId"]["$get"]>;
 
 export type BillLineCheckoutTargetResponse = InferResponseType<
@@ -488,6 +490,23 @@ export const useBillDetail = (billId: Ref<string | null>, debug?: BillDetailDebu
   return query;
 };
 
+export const useViewerBillList = () =>
+  useQuery<ViewerBillListResponse>({
+    queryKey: queryKeys.commerce.billList(),
+    queryFn: async () => {
+      const response = await client.api.commerce.bills.$get(
+        {},
+        {
+          init: {
+            credentials: "include",
+          },
+        },
+      );
+      return readJsonOrThrow<ViewerBillListResponse>(response, "Failed to load viewer bills");
+    },
+    refetchOnMount: "always",
+  });
+
 export const useBillLineCheckoutTarget = (billLineId: Ref<string | null>) =>
   useQuery<BillLineCheckoutTargetResponse>({
     queryKey: computed(() => queryKeys.commerce.billLineCheckoutTarget(billLineId.value)),
diff --git a/apps/frontend/src/pages/CommerceBillsPage.vue b/apps/frontend/src/pages/CommerceBillsPage.vue
new file mode 100644
index 000000000..3b391759c
--- /dev/null
+++ b/apps/frontend/src/pages/CommerceBillsPage.vue
@@ -0,0 +1,145 @@
+<template>
+  <PuPageScaffold
+    viewport="screen"
+    class="commerce-bills-page"
+    data-testid="my-bills.page"
+  >
+    <template #pageHeader>
+      <PuHeader
+        title="我的账单"
+        title-as="h1"
+      >
+        <template #leading>
+          <PuButton
+            tone="neutral"
+            variant="ghost"
+            size="sm"
+            aria-label="返回上一页"
+            @click="handleBack"
+          >
+            <template #leading>
+              <span class="i-mdi-arrow-left" aria-hidden="true"></span>
+            </template>
+          </PuButton>
+        </template>
+      </PuHeader>
+    </template>
+
+    <div class="commerce-bills-page__body">
+      <PuInlineNotice
+        v-if="showOrderingBlockNotice"
+        tone="info"
+        title="这里只显示你的账单"
+        message="如果当前没有需要支付的账单，说明这次下单拦截可能来自其他参与者，请让对方先完成支付后再下单。"
+        data-testid="my-bills.ordering-block.notice"
+      />
+
+      <PuInlineNotice
+        v-if="viewerBillListQuery.isError.value"
+        tone="error"
+        title="无法加载账单列表"
+        :message="viewerBillListErrorMessage"
+      />
+
+      <PuLoadingState
+        v-else-if="viewerBillListQuery.isPending.value"
+        title="正在加载账单"
+        message="请稍候。"
+        variant="soft"
+        surface-level="section"
+      />
+
+      <PuEmptyState
+        v-else-if="billIds.length === 0"
+        title="还没有你的账单"
+        :description="emptyDescription"
+        variant="soft"
+        surface-level="section"
+        data-testid="my-bills.empty"
+      />
+
+      <section
+        v-else
+        class="commerce-bills-page__list"
+        data-testid="my-bills.list"
+      >
+        <div
+          v-for="billId in billIds"
+          :key="billId"
+          class="commerce-bills-page__item"
+          data-testid="my-bills.item"
+        >
+          <BillCard :bill-id="billId" />
+        </div>
+      </section>
+    </div>
+  </PuPageScaffold>
+</template>
+
+<script setup lang="ts">
+import {
+  PuButton,
+  PuEmptyState,
+  PuHeader,
+  PuInlineNotice,
+  PuLoadingState,
+  PuPageScaffold,
+} from "@partner-up-dev/design-web";
+import { computed } from "vue";
+import { useRoute } from "vue-router";
+import { useViewerBillList } from "@/domains/commerce/queries/useCommerce";
+import BillCard from "@/domains/commerce/ui/order-detail/BillCard.vue";
+import { useFallbackBack } from "@/shared/routing/useFallbackBack";
+
+const ORDERING_BLOCK_SOURCE = "ordering-blocked-unpaid";
+
+const route = useRoute();
+const viewerBillListQuery = useViewerBillList();
+
+const orderingBlockSource = computed(() =>
+  route.query.source === ORDERING_BLOCK_SOURCE ? ORDERING_BLOCK_SOURCE : null,
+);
+const showOrderingBlockNotice = computed(() => orderingBlockSource.value !== null);
+const billIds = computed(() => viewerBillListQuery.data.value?.billIds ?? []);
+const viewerBillListErrorMessage = computed(() =>
+  viewerBillListQuery.error.value instanceof Error
+    ? viewerBillListQuery.error.value.message
+    : "请稍后重试。",
+);
+const emptyDescription = computed(() =>
+  orderingBlockSource.value === ORDERING_BLOCK_SOURCE
+    ? "你当前没有可处理的账单；如果下单仍被拦截，请让存在未支付订单的参与者先完成支付。"
+    : "当你参与的订单生成账单后，会显示在这里。",
+);
+const backFallbackTo = computed(() =>
+  orderingBlockSource.value === ORDERING_BLOCK_SOURCE ? { path: "/order/new" } : { path: "/me" },
+);
+const { handleBack } = useFallbackBack(backFallbackTo);
+</script>
+
+<style scoped lang="scss">
+.commerce-bills-page {
+  min-width: 0;
+  --pu-page-max-width: 44rem;
+}
+
+.commerce-bills-page__body {
+  display: flex;
+  min-height: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: var(--sys-spacing-medium);
+}
+
+.commerce-bills-page__list {
+  display: flex;
+  min-height: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: var(--sys-spacing-small);
+}
+
+.commerce-bills-page__item {
+  min-width: 0;
+}
+</style>
diff --git a/apps/frontend/src/pages/OrderingPage.vue b/apps/frontend/src/pages/OrderingPage.vue
index ca87278c2..e47f82786 100644
--- a/apps/frontend/src/pages/OrderingPage.vue
+++ b/apps/frontend/src/pages/OrderingPage.vue
@@ -137,6 +137,7 @@ type OrderingDialogKind =
   | "info"
   | "blocked-pr-not-ready"
   | "confirm-mark-pr-ready"
+  | "go-to-my-bills"
   | "return-to-pr"
   | "contact-support";
 type OrderingDialogState = {
@@ -306,6 +307,20 @@ const openInfoDialog = (input: {
   };
 };
 
+const openMyBillsDialog = (input: {
+  title: string;
+  description: string;
+}): void => {
+  orderingDialog.value = {
+    open: true,
+    kind: "go-to-my-bills",
+    title: input.title,
+    description: input.description,
+    confirmText: "查看我的账单",
+    showCancel: false,
+  };
+};
+
 const openReturnToPrDialog = (input: {
   title: string;
   description: string;
@@ -366,7 +381,7 @@ const createOrderFromQuoteDraft = async (input: CreateOrderInput): Promise<void>
       return;
     }
     if (apiError.code === "ORDERING_PARTICIPANT_UNPAID_ORDER_EXISTS") {
-      openInfoDialog({
+      openMyBillsDialog({
         title: "参与者有未支付订单",
         description:
           apiError.message ?? "订单参与者中有人存在未支付订单，请先完成相关订单支付后再下单。",
@@ -526,6 +541,17 @@ const handleOrderingDialogConfirm = async (): Promise<void> => {
     return;
   }
 
+  if (orderingDialog.value.kind === "go-to-my-bills") {
+    closeOrderingDialog();
+    await router.push({
+      path: "/bills",
+      query: {
+        source: "ordering-blocked-unpaid",
+      },
+    });
+    return;
+  }
+
   if (orderingDialog.value.kind === "contact-support") {
     closeOrderingDialog();
     await router.push({ name: "contact-support" });
diff --git a/apps/frontend/src/shared/api/query-keys.ts b/apps/frontend/src/shared/api/query-keys.ts
index 8a527a450..494774bd9 100644
--- a/apps/frontend/src/shared/api/query-keys.ts
+++ b/apps/frontend/src/shared/api/query-keys.ts
@@ -49,6 +49,7 @@ export const queryKeys = {
   commerce: {
     placement: (contextId: number | null, type: "BUTTON") =>
       ["commerce", "placement", contextId, type] as const,
+    billList: () => ["commerce", "bill", "list"] as const,
     orderDetail: (orderId: string | null) => ["commerce", "order", orderId] as const,
     billDetail: (billId: string | null) => ["commerce", "bill", billId] as const,
     billLineCheckoutTarget: (billLineId: string | null) =>
diff --git a/docs/10-prd/behavior/rules-and-invariants.md b/docs/10-prd/behavior/rules-and-invariants.md
index 432e958c3..9f0cf1af0 100644
--- a/docs/10-prd/behavior/rules-and-invariants.md
+++ b/docs/10-prd/behavior/rules-and-invariants.md
@@ -133,6 +133,7 @@
 - Quote identity is the freshness and authorization boundary between listing and create-order. Create-order should use quote identity instead of trusting browser-copied product, route, participant, or price fields.
 - Expired quotes require a fresh listing and a second explicit user create action. The system should preserve matching user selections after refresh when those selections are still listed.
 - Create-order must be blocked when any intended order participant still has another unpaid order obligation. The block is enforced by the backend create-order boundary and surfaced on `/order/new` through a focused dialog rather than silent failure.
+- The unpaid-order block dialog may route the current viewer into `/bills`, but `/bills` remains viewer-scoped. If the blocking unpaid obligation belongs to another participant, that participant still needs to complete payment before order creation can proceed.
 - Rental ordering buys one fixed quoted SKU.
 - RideHailing ordering authorizes a choice set: the user selects one or more acceptable vehicle candidates, and the provider/order lifecycle resolves one final vehicle after dispatch.
 - RideHailing visible vehicle candidates depend on route and departure time. Provider-unavailable candidates should be absent from the list, not shown as disabled options with reasons.
diff --git a/docs/10-prd/behavior/workflows.md b/docs/10-prd/behavior/workflows.md
index 4e37f3320..581827cdc 100644
--- a/docs/10-prd/behavior/workflows.md
+++ b/docs/10-prd/behavior/workflows.md
@@ -87,7 +87,7 @@
 7. For RideHailing, the user chooses one or more acceptable vehicle candidates. The displayed price is the selected candidate range. Unavailable provider vehicle types are omitted from the list rather than shown as disabled choices.
 8. RideHailing Ordering currently short-circuits departure-time editing and always behaves as `现在出发`, even when the PR itself carries a concrete start time.
 9. Create order submits quote identity, not copied route, participant, SKU, or price facts. If the quote expired, the page refreshes listing, preserves matching selected vehicles when possible, and requires the user to click order again.
-10. Before create succeeds, the system must reject the request when any intended order participant still has another unpaid order obligation. The Ordering Page stays on `/order/new` and explains the block through a focused dialog.
+10. Before create succeeds, the system must reject the request when any intended order participant still has another unpaid order obligation. The Ordering Page stays on `/order/new`, explains the block through a focused dialog, and provides a `我的账单` CTA into `/bills` for the current viewer.
 11. If create succeeds, the user enters Order Detail. If provider dispatch creates then immediately cancels a RideHailing order, the user stays on `/order/new` and sees a failure dialog with the reason.
 
 ## 5. Revisit and History Entry
diff --git a/docs/20-product-tdd/ecommerce-contracts.md b/docs/20-product-tdd/ecommerce-contracts.md
index c8cf57e60..fbee3c3e3 100644
--- a/docs/20-product-tdd/ecommerce-contracts.md
+++ b/docs/20-product-tdd/ecommerce-contracts.md
@@ -107,6 +107,7 @@ Owns:
   - which provider instance is currently bound to an unfinished execution slot
   - hero facts needed by checkout UI
 - BillLine settlement confirmation
+- viewer-scoped bill-list read identity for `/api/commerce/bills`, where the contract intentionally returns ordered `billId[]` only and leaves per-bill summary hydration to bill-detail reads
 - settlement derivation over successful payment movements
 - reconciliation from current buyer-side total to target buyer-side total
 
diff --git a/tasks/my-bills-page/00-task-packet.md b/tasks/my-bills-page/00-task-packet.md
new file mode 100644
index 000000000..16a0ad57f
--- /dev/null
+++ b/tasks/my-bills-page/00-task-packet.md
@@ -0,0 +1,25 @@
+## Objective & Hypothesis
+
+- Add a viewer-scoped `/bills` page whose primary entry is the unpaid-order block dialog on `/order/new`.
+- Reuse the existing `BillCard` component as-is.
+- Keep the new viewer bill-list API intentionally narrow: it returns only ordered `billId[]`.
+
+## Guardrails Touched
+
+- Backend read path: add a Bill domain use-case and commerce route for viewer bill ids.
+- Frontend route path: add `/bills` and keep `/bills/:billId` detail flow unchanged.
+- Ordering recovery: unpaid-order dialog confirm action now routes to `/bills`.
+- UI reuse rule: page reuses existing `BillCard` instead of inventing a parallel bill summary surface.
+
+## Current Understanding
+
+- The unpaid-order block can be caused by any intended participant, not only the current viewer.
+- A viewer-scoped bill list therefore cannot guarantee that the blocking bill is visible to the current viewer.
+- The page should make that limitation explicit when entered from the ordering-blocked dialog.
+
+## Verification
+
+- Backend scenario: viewer bill list returns only the current viewer's bill ids.
+- Backend scenario: unauthenticated `/api/commerce/bills` returns `AUTHENTICATED_REQUIRED`.
+- System scenario: unpaid-order dialog CTA reaches `/bills`, and the user can continue into bill detail.
+- Static checks: targeted backend typecheck and frontend build.
diff --git a/tests/scenario/commerce/rental-ordering.scenario.test.ts b/tests/scenario/commerce/rental-ordering.scenario.test.ts
index eddfc8e5f..433698b2f 100644
--- a/tests/scenario/commerce/rental-ordering.scenario.test.ts
+++ b/tests/scenario/commerce/rental-ordering.scenario.test.ts
@@ -591,6 +591,69 @@ scenario("commerce_rental_ordering_blocks_participant_with_unpaid_order", async
   });
 });
 
+scenario("commerce_rental_ordering_unpaid_dialog_opens_my_bills", async (ctx) => {
+  const creator = await givenUser("system-commerce-my-bills-creator");
+  const joiner = await givenUser("system-commerce-my-bills-joiner");
+  await seedStandaloneUnpaidRentalOrder(creator);
+  const pr = await givenCommerceRentalPr({
+    creator,
+    minPartners: 2,
+    maxPartners: null,
+    title: "System commerce my bills rental PR",
+  });
+  await addJoinedParticipant({ pr, user: joiner });
+  await configurePRStatus({ pr, status: "READY" });
+  const placement = await givenRentalOrderingPlacement();
+
+  ctx.record("prId", pr.id);
+  ctx.record("placementId", placement.id);
+  ctx.record("blockedViewerUserId", creator.user.id);
+
+  await withScenarioPage(async (page) => {
+    await installScenarioUserSession(page, creator);
+    await installDeterministicShareSidecarStubs(page);
+    await installFakeWeChatPayBridge(page);
+
+    await page.goto(`/pr/${pr.id}`);
+    await page.getByTestId("pr-detail.commerce-placement.open").click();
+    await page.getByTestId("ordering.rental.page").waitFor({
+      state: "visible",
+      timeout: 10_000,
+    });
+    await fillRentalOrderingRequiredFields(page);
+    await waitForRentalQuoteReady(page);
+    await page.getByTestId("ordering.rental.create-order").click();
+    await assertOrderingBlockedDialog({
+      page,
+      expectedTitle: "参与者有未支付订单",
+      expectedDetail: "订单参与者中有人存在未支付订单，请先完成相关订单支付后再下单。",
+    });
+
+    await page.getByRole("button", { name: "查看我的账单" }).click();
+    await page.getByTestId("my-bills.page").waitFor({
+      state: "visible",
+      timeout: 10_000,
+    });
+    await page.getByTestId("my-bills.ordering-block.notice").waitFor({
+      state: "visible",
+      timeout: 10_000,
+    });
+    assert.equal(new URL(page.url()).pathname, "/bills");
+
+    const firstBillViewAction = page.getByTestId("order-detail.ride-hailing.bill-card.view").first();
+    await firstBillViewAction.waitFor({
+      state: "visible",
+      timeout: 10_000,
+    });
+    await firstBillViewAction.click();
+    await page.getByTestId("bill-detail.page").waitFor({
+      state: "visible",
+      timeout: 10_000,
+    });
+    assert.match(new URL(page.url()).pathname, /^\/bills\/[0-9a-f-]+$/);
+  });
+});
+
 scenario("commerce_rental_pr_button_requires_matching_rule", async (ctx) => {
   const creator = await givenUser("system-commerce-placement-mismatch-creator");
   const pr = await givenCommerceRentalPr({

From 3aa46e37d5075db37ca699626b1143fc47ffc99c Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Wed, 1 Jul 2026 15:53:57 +0800
Subject: [PATCH 93/94] fix(commerce): align unpaid payable bill semantics

- block new orders only on positive unsettled charge lines whose unpaid window is still open
- treat zero-amount charge bills as paid and backfill historical rows with a data migration
- align bill detail, bill list ordering, and checkout eligibility with the shared payable-line rule
---
 ..._zero_amount_charge_bill_lines_settled.sql |   7 +
 .../bill/services/bill-payment-state.test.ts  |  22 +++
 .../bill/services/bill-payment-state.ts       |   9 +
 .../src/domains/bill/services/index.ts        |   1 +
 .../bill/services/payable-bill-lines.test.ts  |  94 +++++++++++
 .../bill/services/payable-bill-lines.ts       |  60 +++++++
 .../bill/use-cases/create-bill-from-seed.ts   |   2 +
 .../domains/bill/use-cases/get-bill-detail.ts |  15 +-
 .../get-bill-line-checkout-target.ts          |  14 +-
 .../bill/use-cases/list-viewer-bills.ts       |  24 ++-
 .../payment/use-cases/payment-contract.ts     |  15 +-
 .../domains/trade/use-cases/create-order.ts   |  31 +++-
 .../rental-order-persistence.scenario.test.ts | 158 +++++++++++++++++-
 docs/10-prd/behavior/rules-and-invariants.md  |   3 +-
 docs/10-prd/behavior/workflows.md             |   2 +-
 docs/20-product-tdd/ecommerce-contracts.md    |   8 +-
 tasks/my-bills-page/00-task-packet.md         |   7 +
 17 files changed, 439 insertions(+), 33 deletions(-)
 create mode 100644 apps/backend/data-migrations/0085_zero_amount_charge_bill_lines_settled.sql
 create mode 100644 apps/backend/src/domains/bill/services/payable-bill-lines.test.ts
 create mode 100644 apps/backend/src/domains/bill/services/payable-bill-lines.ts

diff --git a/apps/backend/data-migrations/0085_zero_amount_charge_bill_lines_settled.sql b/apps/backend/data-migrations/0085_zero_amount_charge_bill_lines_settled.sql
new file mode 100644
index 000000000..d93dd0eb2
--- /dev/null
+++ b/apps/backend/data-migrations/0085_zero_amount_charge_bill_lines_settled.sql
@@ -0,0 +1,7 @@
+update bill_lines
+set
+  settled_at = created_at,
+  payment_provider_instance_id = null
+where kind = 'CHARGE'
+  and amount_fen = 0
+  and settled_at is null;
diff --git a/apps/backend/src/domains/bill/services/bill-payment-state.test.ts b/apps/backend/src/domains/bill/services/bill-payment-state.test.ts
index 30186f4eb..a9226984b 100644
--- a/apps/backend/src/domains/bill/services/bill-payment-state.test.ts
+++ b/apps/backend/src/domains/bill/services/bill-payment-state.test.ts
@@ -90,6 +90,28 @@ describe("deriveBillPaymentState", () => {
     ]);
   });
 
+  it("treats zero-amount charge lines as paid", () => {
+    const line = buildChargeLine({
+      amountFen: 0,
+    });
+
+    const result = deriveBillPaymentState({
+      lines: [line],
+    });
+
+    assert.equal(result.chargeTotalFen, 0);
+    assert.equal(result.paidChargeFen, 0);
+    assert.equal(result.allChargesPaid, true);
+    assert.deepEqual(result.lines, [
+      {
+        billLineId: line.id,
+        status: "PAID",
+        paidFen: 0,
+        refundableFen: 0,
+      },
+    ]);
+  });
+
   it("returns paid and refunded totals from settled lines", () => {
     const settledAt = new Date("2030-01-01T00:00:00.000Z");
     const charge = buildChargeLine({
diff --git a/apps/backend/src/domains/bill/services/bill-payment-state.ts b/apps/backend/src/domains/bill/services/bill-payment-state.ts
index 4e639a297..4a5a6c85e 100644
--- a/apps/backend/src/domains/bill/services/bill-payment-state.ts
+++ b/apps/backend/src/domains/bill/services/bill-payment-state.ts
@@ -33,6 +33,15 @@ const toLinePaymentProjection = (line: BillLine): BillLinePaymentProjection => {
     };
   }
 
+  if (line.amountFen <= 0) {
+    return {
+      billLineId: line.id,
+      status: "PAID",
+      paidFen: 0,
+      refundableFen: 0,
+    };
+  }
+
   const paidFen = line.settledAt ? line.amountFen : 0;
   const status: BillLineSettlementStatus = line.settledAt
     ? "PAID"
diff --git a/apps/backend/src/domains/bill/services/index.ts b/apps/backend/src/domains/bill/services/index.ts
index 284738a23..504f0ea41 100644
--- a/apps/backend/src/domains/bill/services/index.ts
+++ b/apps/backend/src/domains/bill/services/index.ts
@@ -1,4 +1,5 @@
 export * from "./bill-payment-state";
 export * from "./bill-totals";
 export * from "./materialize-charge-lines";
+export * from "./payable-bill-lines";
 export * from "./reconcile-lines";
diff --git a/apps/backend/src/domains/bill/services/payable-bill-lines.test.ts b/apps/backend/src/domains/bill/services/payable-bill-lines.test.ts
new file mode 100644
index 000000000..400ccf9d1
--- /dev/null
+++ b/apps/backend/src/domains/bill/services/payable-bill-lines.test.ts
@@ -0,0 +1,94 @@
+import assert from "node:assert/strict";
+import { describe, it } from "vitest";
+import type { BillLine } from "../../../entities/bill";
+import type { UnpaidPayableBillLineCandidate } from "./payable-bill-lines";
+import { areThereAnyUnpaidPayableBillLines, isBillLinePayable } from "./payable-bill-lines";
+
+const lineId = "11111111-1111-4111-8111-111111111111" as BillLine["id"];
+const billId = "22222222-2222-4222-8222-222222222222" as BillLine["billId"];
+const userId = "33333333-3333-4333-8333-333333333333" as BillLine["userId"];
+
+const buildLine = (overrides: Partial<BillLine> = {}): BillLine => ({
+  id: lineId,
+  billId,
+  userId,
+  kind: "CHARGE",
+  amountFen: 1200,
+  currency: "CNY",
+  label: "Charge",
+  description: null,
+  refundOfBillLineId: null,
+  paymentProviderInstanceId: null,
+  attemptCount: 0,
+  createdAt: new Date("2030-01-01T00:00:00.000Z"),
+  settledAt: null,
+  ...overrides,
+});
+
+const buildCandidate = (
+  overrides: Partial<UnpaidPayableBillLineCandidate> = {},
+): UnpaidPayableBillLineCandidate => ({
+  line: buildLine(),
+  bill: {
+    status: "ACTIVE",
+  },
+  order: {
+    status: "OPEN",
+    timeout: {
+      unpaidExpiresAt: "2030-01-01T01:00:00.000Z",
+    },
+  },
+  ...overrides,
+});
+
+describe("payable bill lines", () => {
+  const now = new Date("2030-01-01T00:30:00.000Z");
+
+  it("treats a positive unsettled charge inside the unpaid window as payable", () => {
+    assert.equal(isBillLinePayable(buildCandidate(), now), true);
+  });
+
+  it("does not treat expired unpaid windows as payable", () => {
+    assert.equal(
+      isBillLinePayable(
+        buildCandidate({
+          order: {
+            status: "OPEN",
+            timeout: {
+              unpaidExpiresAt: "2030-01-01T00:00:00.000Z",
+            },
+          },
+        }),
+        now,
+      ),
+      false,
+    );
+  });
+
+  it("does not treat zero-amount charge lines as payable", () => {
+    assert.equal(
+      isBillLinePayable(
+        buildCandidate({
+          line: buildLine({
+            amountFen: 0,
+          }),
+        }),
+        now,
+      ),
+      false,
+    );
+  });
+
+  it("detects whether any candidate still has an unpaid payable bill line", () => {
+    const candidates = [
+      buildCandidate({
+        line: buildLine({
+          amountFen: 0,
+        }),
+      }),
+      buildCandidate(),
+    ];
+
+    assert.equal(areThereAnyUnpaidPayableBillLines(candidates, now), true);
+  });
+});
diff --git a/apps/backend/src/domains/bill/services/payable-bill-lines.ts b/apps/backend/src/domains/bill/services/payable-bill-lines.ts
new file mode 100644
index 000000000..be3dea593
--- /dev/null
+++ b/apps/backend/src/domains/bill/services/payable-bill-lines.ts
@@ -0,0 +1,60 @@
+import type { BillLine } from "../../../entities/bill";
+import type { OrderStatus, OrderTimeout } from "../../trade/model";
+import type { BillStatus } from "../model";
+
+export type UnpaidPayableBillLineCandidate = {
+  line: Pick<BillLine, "kind" | "amountFen" | "settledAt">;
+  bill?: {
+    status: BillStatus;
+  } | null;
+  order?: {
+    status: OrderStatus;
+    timeout: Pick<OrderTimeout, "unpaidExpiresAt">;
+  } | null;
+};
+
+export const isOrderUnpaidWindowOpen = (
+  unpaidExpiresAt: string,
+  now: Date = new Date(),
+): boolean => {
+  const expiresAt = new Date(unpaidExpiresAt);
+  if (Number.isNaN(expiresAt.getTime())) {
+    return false;
+  }
+
+  return expiresAt > now;
+};
+
+export const isBillLinePayable = (
+  candidate: UnpaidPayableBillLineCandidate,
+  now: Date = new Date(),
+): boolean => {
+  if (candidate.line.kind !== "CHARGE") {
+    return false;
+  }
+  if (candidate.line.amountFen <= 0) {
+    return false;
+  }
+  if (candidate.line.settledAt) {
+    return false;
+  }
+  if (candidate.bill && candidate.bill.status !== "ACTIVE") {
+    return false;
+  }
+  if (candidate.order && candidate.order.status !== "OPEN") {
+    return false;
+  }
+  if (
+    candidate.order &&
+    !isOrderUnpaidWindowOpen(candidate.order.timeout.unpaidExpiresAt, now)
+  ) {
+    return false;
+  }
+
+  return true;
+};
+
+export const areThereAnyUnpaidPayableBillLines = (
+  candidates: UnpaidPayableBillLineCandidate[],
+  now: Date = new Date(),
+): boolean => candidates.some((candidate) => isBillLinePayable(candidate, now));
diff --git a/apps/backend/src/domains/bill/use-cases/create-bill-from-seed.ts b/apps/backend/src/domains/bill/use-cases/create-bill-from-seed.ts
index 1f893570e..d221901cd 100644
--- a/apps/backend/src/domains/bill/use-cases/create-bill-from-seed.ts
+++ b/apps/backend/src/domains/bill/use-cases/create-bill-from-seed.ts
@@ -18,6 +18,7 @@ export async function createBillFromSeed(
 
   const billRepo = new BillRepository(executor);
   const billLineRepo = new BillLineRepository(executor);
+  const autoSettledAt = new Date();
 
   const bill = await billRepo.create({
     sourceOrderId: seed.sourceOrderId as NewBill["sourceOrderId"],
@@ -33,6 +34,7 @@ export async function createBillFromSeed(
       currency: seed.currency,
       label: line.label,
       description: line.description ?? null,
+      settledAt: line.amountFen <= 0 ? autoSettledAt : null,
     }) satisfies NewBillLine),
   );
 
diff --git a/apps/backend/src/domains/bill/use-cases/get-bill-detail.ts b/apps/backend/src/domains/bill/use-cases/get-bill-detail.ts
index b2a811576..80d433f53 100644
--- a/apps/backend/src/domains/bill/use-cases/get-bill-detail.ts
+++ b/apps/backend/src/domains/bill/use-cases/get-bill-detail.ts
@@ -7,7 +7,7 @@ import { BillRepository } from "../../../repositories/BillRepository";
 import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository";
 import { UserRepository } from "../../../repositories/UserRepository";
 import { getOrderItemSkuName } from "../../trade";
-import { deriveBillPaymentState } from "../services";
+import { deriveBillPaymentState, isBillLinePayable } from "../services";
 
 const billRepo = new BillRepository();
 const billLineRepo = new BillLineRepository();
@@ -70,7 +70,10 @@ const resolveSettlementStatus = (input: {
   chargeTotalFen: number;
   paidChargeFen: number;
 }): BillDetailProjection["bill"]["settlementStatus"] => {
-  if (input.chargeTotalFen > 0 && input.paidChargeFen >= input.chargeTotalFen) {
+  if (input.chargeTotalFen === 0) {
+    return "PAID";
+  }
+  if (input.paidChargeFen >= input.chargeTotalFen) {
     return "PAID";
   }
   if (input.paidChargeFen > 0) return "PARTIALLY_PAID";
@@ -131,10 +134,12 @@ async function buildBillDetail(input: {
     lines: lines.map((line) => {
       const payment = paymentByLineId.get(line.id);
       const payableByViewer =
-        bill.status === "ACTIVE" &&
-        order.status === "OPEN" &&
-        line.kind === "CHARGE" &&
         line.userId === input.viewerUserId &&
+        isBillLinePayable({
+          line,
+          bill,
+          order,
+        }) &&
         payment?.status !== "PAID";
       const payer = payerByUserId.get(line.userId);
       const isViewer = line.userId === input.viewerUserId;
diff --git a/apps/backend/src/domains/bill/use-cases/get-bill-line-checkout-target.ts b/apps/backend/src/domains/bill/use-cases/get-bill-line-checkout-target.ts
index 6ba3a1a29..5a4e3a2a6 100644
--- a/apps/backend/src/domains/bill/use-cases/get-bill-line-checkout-target.ts
+++ b/apps/backend/src/domains/bill/use-cases/get-bill-line-checkout-target.ts
@@ -6,7 +6,7 @@ import { BillLineRepository } from "../../../repositories/BillLineRepository";
 import { BillRepository } from "../../../repositories/BillRepository";
 import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository";
 import type { BillLineSettlementStatus } from "../model";
-import { deriveBillPaymentState } from "../services";
+import { deriveBillPaymentState, isBillLinePayable, isOrderUnpaidWindowOpen } from "../services";
 
 const billRepo = new BillRepository();
 const billLineRepo = new BillLineRepository();
@@ -93,8 +93,12 @@ export async function resolveBillLineCheckoutBasis(input: {
         ? "订单当前不可支付"
         : line.kind !== "CHARGE"
           ? "退款账单行不能由用户发起支付"
+          : line.amountFen <= 0
+            ? "该账单行无需支付"
           : settlementStatus === "PAID"
             ? "该账单行已支付"
+            : !isOrderUnpaidWindowOpen(order.timeout.unpaidExpiresAt)
+              ? "订单支付窗口已过期"
             : null;
 
   return {
@@ -146,7 +150,13 @@ export async function getBillLineCheckoutTarget(input: {
       settledAt: basis.line.settledAt?.toISOString() ?? null,
     },
     eligibility: {
-      payable: basis.disabledReason === null,
+      payable:
+        basis.disabledReason === null &&
+        isBillLinePayable({
+          line: basis.line,
+          bill: basis.bill,
+          order: basis.order,
+        }),
       disabledReason: basis.disabledReason,
     },
   };
diff --git a/apps/backend/src/domains/bill/use-cases/list-viewer-bills.ts b/apps/backend/src/domains/bill/use-cases/list-viewer-bills.ts
index 3b22c8e66..d3a691056 100644
--- a/apps/backend/src/domains/bill/use-cases/list-viewer-bills.ts
+++ b/apps/backend/src/domains/bill/use-cases/list-viewer-bills.ts
@@ -3,17 +3,17 @@ import type { UserId } from "../../../entities/user";
 import { throwHttpProblem } from "../../../lib/problem-details";
 import { BillLineRepository } from "../../../repositories/BillLineRepository";
 import { BillRepository } from "../../../repositories/BillRepository";
+import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository";
+import { areThereAnyUnpaidPayableBillLines } from "../services";
 
 const billRepo = new BillRepository();
 const billLineRepo = new BillLineRepository();
+const tradeOrderRepo = new TradeOrderRepository();
 
 export type ViewerBillListProjection = {
   billIds: string[];
 };
 
-const hasOutstandingViewerCharge = (lines: BillLine[]): boolean =>
-  lines.some((line) => line.kind === "CHARGE" && line.settledAt === null);
-
 export async function listViewerBills(input: {
   viewerUserId: string | null;
 }): Promise<ViewerBillListProjection> {
@@ -30,7 +30,9 @@ export async function listViewerBills(input: {
   }
 
   const bills = await billRepo.findByIds(viewerBillIds);
+  const orders = await tradeOrderRepo.listByIds(bills.map((bill) => bill.sourceOrderId));
   const linesByBillId = new Map<BillId, BillLine[]>();
+  const orderById = new Map(orders.map((order) => [order.id, order]));
   for (const line of viewerLines) {
     const current = linesByBillId.get(line.billId) ?? [];
     current.push(line);
@@ -40,11 +42,19 @@ export async function listViewerBills(input: {
   const billIds = bills
     .slice()
     .sort((left, right) => {
-      const leftHasOutstandingCharge = hasOutstandingViewerCharge(
-        linesByBillId.get(left.id) ?? [],
+      const leftHasOutstandingCharge = areThereAnyUnpaidPayableBillLines(
+        (linesByBillId.get(left.id) ?? []).map((line) => ({
+          line,
+          bill: left,
+          order: orderById.get(left.sourceOrderId) ?? null,
+        })),
       );
-      const rightHasOutstandingCharge = hasOutstandingViewerCharge(
-        linesByBillId.get(right.id) ?? [],
+      const rightHasOutstandingCharge = areThereAnyUnpaidPayableBillLines(
+        (linesByBillId.get(right.id) ?? []).map((line) => ({
+          line,
+          bill: right,
+          order: orderById.get(right.sourceOrderId) ?? null,
+        })),
       );
 
       if (leftHasOutstandingCharge !== rightHasOutstandingCharge) {
diff --git a/apps/backend/src/domains/payment/use-cases/payment-contract.ts b/apps/backend/src/domains/payment/use-cases/payment-contract.ts
index a447b8585..1df3f37e8 100644
--- a/apps/backend/src/domains/payment/use-cases/payment-contract.ts
+++ b/apps/backend/src/domains/payment/use-cases/payment-contract.ts
@@ -263,6 +263,13 @@ export async function createPaymentCharge(input: {
   if (basis.disabledReason) {
     return throwHttpProblem({ status: 409, detail: basis.disabledReason });
   }
+  const expiresAt = new Date(basis.order.timeout.unpaidExpiresAt);
+  if (Number.isNaN(expiresAt.getTime()) || expiresAt <= new Date()) {
+    return throwHttpProblem({
+      status: 409,
+      detail: "订单支付窗口已过期",
+    });
+  }
 
   const requestedProvider = await loadChargeProviderForClient({
     paymentProviderInstanceId: input.paymentProviderInstanceId as PaymentProviderInstanceId,
@@ -310,14 +317,6 @@ export async function createPaymentCharge(input: {
     });
   }
 
-  const expiresAt = new Date(basis.order.timeout.unpaidExpiresAt);
-  if (Number.isNaN(expiresAt.getTime()) || expiresAt <= new Date()) {
-    return throwHttpProblem({
-      status: 409,
-      detail: "Order unpaid window has expired",
-    });
-  }
-
   const port = createPaymentProviderPort({ providerInstance: requestedProvider });
   const merchantOrderNo = port.deriveChargeMerchantOrderNo({
     providerInstanceId: requestedProvider.id,
diff --git a/apps/backend/src/domains/trade/use-cases/create-order.ts b/apps/backend/src/domains/trade/use-cases/create-order.ts
index 8c23a25cd..8567d983b 100644
--- a/apps/backend/src/domains/trade/use-cases/create-order.ts
+++ b/apps/backend/src/domains/trade/use-cases/create-order.ts
@@ -15,6 +15,7 @@ import type { RideHailingProviderInstanceId } from "../../../entities/ride-haili
 import type { TradeOrderId } from "../../../entities/trade-order";
 import type { UserId } from "../../../entities/user";
 import { BillLineRepository } from "../../../repositories/BillLineRepository";
+import { BillRepository } from "../../../repositories/BillRepository";
 import { OfferRepository } from "../../../repositories/OfferRepository";
 import { PartnerRequestRepository } from "../../../repositories/PartnerRequestRepository";
 import { RentalOrderRepository } from "../../../repositories/RentalOrderRepository";
@@ -24,7 +25,10 @@ import { SkuCancellationPolicyRepository } from "../../../repositories/SkuCancel
 import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository";
 import type { RepositoryExecutor } from "../../../repositories/_executor";
 import { createBillFromSeed } from "../../bill";
-import { materializeChargeLinesFromSplitRule } from "../../bill/services";
+import {
+  areThereAnyUnpaidPayableBillLines,
+  materializeChargeLinesFromSplitRule,
+} from "../../bill/services";
 import {
   isRentalSkuFacts,
   isRideHailingSkuFacts,
@@ -69,9 +73,11 @@ import {
 
 const offerRepo = new OfferRepository();
 const partnerRequestRepo = new PartnerRequestRepository();
+const billRepo = new BillRepository();
 const billLineRepo = new BillLineRepository();
 const skuCancellationPolicyRepo = new SkuCancellationPolicyRepository();
 const providerRepo = new RideHailingProviderInstanceRepository();
+const tradeOrderRepo = new TradeOrderRepository();
 
 const DEFAULT_UNPAID_WINDOW_MINUTES = 30;
 const NON_EXPIRING_UNPAID_EXPIRES_AT = "9999-12-31T23:59:59.999Z";
@@ -280,6 +286,29 @@ async function validateParticipantUnpaidOrders(input: {
   if (unsettledLines.length === 0) {
     return null;
   }
+  const bills = await billRepo.findByIds(
+    Array.from(new Set(unsettledLines.map((line) => line.billId))),
+  );
+  const orders = await tradeOrderRepo.listByIds(
+    Array.from(new Set(bills.map((bill) => bill.sourceOrderId))),
+  );
+  const billById = new Map(bills.map((bill) => [bill.id, bill]));
+  const orderById = new Map(orders.map((order) => [order.id, order]));
+
+  if (
+    !areThereAnyUnpaidPayableBillLines(
+      unsettledLines.map((line) => {
+        const bill = billById.get(line.billId) ?? null;
+        return {
+          line,
+          bill,
+          order: bill ? (orderById.get(bill.sourceOrderId) ?? null) : null,
+        };
+      }),
+    )
+  ) {
+    return null;
+  }
 
   return actionProblem({
     code: "ORDERING_PARTICIPANT_UNPAID_ORDER_EXISTS",
diff --git a/apps/backend/tests/commerce/rental-order-persistence.scenario.test.ts b/apps/backend/tests/commerce/rental-order-persistence.scenario.test.ts
index 05011867b..2236a7252 100644
--- a/apps/backend/tests/commerce/rental-order-persistence.scenario.test.ts
+++ b/apps/backend/tests/commerce/rental-order-persistence.scenario.test.ts
@@ -1,5 +1,6 @@
 import assert from "node:assert/strict";
 import { generateKeyPairSync, randomUUID } from "node:crypto";
+import { eq } from "drizzle-orm";
 import { scenario } from "../_infra/scenario/scenario";
 import { givenUser, type ScenarioUser } from "../pr-core/_kit/builders/users";
 import { db } from "../../src/lib/db";
@@ -26,6 +27,7 @@ import type { OfferListingSessionId, OfferQuoteId } from "../../src/entities/com
 import type { PaymentProviderInstanceId } from "../../src/entities/payment";
 import type { PRId } from "../../src/entities/partner-request";
 import type { ProductSku } from "../../src/entities/product-sku";
+import { tradeOrders } from "../../src/entities/trade-order";
 import type { TradeOrderId } from "../../src/entities/trade-order";
 import { ProblemDetailsError } from "../../src/lib/problem-details";
 import { BillLineRepository } from "../../src/repositories/BillLineRepository";
@@ -244,8 +246,10 @@ async function createStandaloneRentalOrder(input: {
   sku: ProductSku;
   contactPhone: string;
   registrantName: string;
+  totalFen?: number;
 }) {
   const itemId = randomUUID();
+  const totalFen = input.totalFen ?? 1200;
   const participants = buildOrderParticipantsFromContext({
     participants: [
       {
@@ -267,13 +271,13 @@ async function createStandaloneRentalOrder(input: {
       itemBreakdowns: [
         {
           itemId,
-          resolvedAmountFen: 1200,
+          resolvedAmountFen: totalFen,
           explanations: [],
         },
       ],
       orderLevelExplanations: [],
-      subtotalFen: 1200,
-      totalFen: 1200,
+      subtotalFen: totalFen,
+      totalFen,
     },
     serviceStartAt,
     serviceEndAt,
@@ -741,8 +745,6 @@ scenario("commerce_create_order_blocks_participant_with_unpaid_order", async ()
       },
     ],
   });
-  await tradeOrderRepo.updateStatus(existingOrder.orderId as TradeOrderId, "CANCELLED", new Date());
-
   const nextParticipants = await listPrOrderParticipants(nextPrId, creator.user.id);
   const nextQuoteId = await createRentalFixedQuote({
     offerId: offer.id as OfferId,
@@ -769,6 +771,152 @@ scenario("commerce_create_order_blocks_participant_with_unpaid_order", async ()
   );
 });
 
+scenario("commerce_create_order_ignores_expired_unpaid_participant_bill_lines", async () => {
+  const creator = await givenUser("creator-with-expired-unpaid-order");
+  const prId = await givenRentalPr(creator);
+  const { offer, sku, spu } = await givenRentalCatalog();
+  const expiredOrder = await createStandaloneRentalOrder({
+    user: creator,
+    offerId: offer.id,
+    sku,
+    contactPhone: "13800138223",
+    registrantName: "过期账单用户",
+  });
+
+  await db
+    .update(tradeOrders)
+    .set({
+      timeout: {
+        unpaidExpiresAt: "2020-01-01T00:00:00.000Z",
+        defaultWindowMinutes: 30,
+      },
+    })
+    .where(eq(tradeOrders.id, expiredOrder.orderId as TradeOrderId));
+
+  const nextParticipants = await listPrOrderParticipants(prId, creator.user.id);
+  const nextQuoteId = await createRentalFixedQuote({
+    offerId: offer.id as OfferId,
+    sku,
+    spuId: spu.id,
+    participants: nextParticipants,
+    contactPhone: "13800138224",
+    registrantName: "下一单用户",
+  });
+
+  const result = await createOrderCommand({
+    createdBy: creator.user.id,
+    prId,
+    items: [
+      {
+        kind: "FIXED",
+        quoteId: nextQuoteId,
+      },
+    ],
+  });
+
+  assert.equal(result.outcome, "CREATED");
+});
+
+scenario("commerce_expired_bill_detail_no_longer_exposes_payable_line", async () => {
+  const viewer = await givenUser("expired-bill-detail-viewer");
+  const { offer, sku } = await givenRentalCatalog();
+  const expiredOrder = await createStandaloneRentalOrder({
+    user: viewer,
+    offerId: offer.id,
+    sku,
+    contactPhone: "13800138225",
+    registrantName: "过期详情用户",
+  });
+
+  await db
+    .update(tradeOrders)
+    .set({
+      timeout: {
+        unpaidExpiresAt: "2020-01-01T00:00:00.000Z",
+        defaultWindowMinutes: 30,
+      },
+    })
+    .where(eq(tradeOrders.id, expiredOrder.orderId as TradeOrderId));
+
+  const response = await requestJson(`/api/commerce/bills/${expiredOrder.billId}`, {
+    token: viewer.token,
+  });
+  const body = await expectJsonResponse<{
+    bill: {
+      settlementStatus: string;
+    };
+    lines: Array<{
+      settlementStatus: string;
+      payableByViewer: boolean;
+    }>;
+  }>(response, 200);
+
+  assert.equal(body.bill.settlementStatus, "UNPAID");
+  assert.equal(body.lines[0]?.settlementStatus, "UNPAID");
+  assert.equal(body.lines[0]?.payableByViewer, false);
+});
+
+scenario("commerce_zero_amount_charge_bill_is_treated_as_paid", async () => {
+  const viewer = await givenUser("zero-amount-bill-viewer");
+  const prId = await givenRentalPr(viewer);
+  const { offer, sku, spu } = await givenRentalCatalog();
+  const zeroAmountOrder = await createStandaloneRentalOrder({
+    user: viewer,
+    offerId: offer.id,
+    sku,
+    contactPhone: "13800138226",
+    registrantName: "零元账单用户",
+    totalFen: 0,
+  });
+
+  const lines = await billLineRepo.listByBillId(zeroAmountOrder.billId as BillId);
+  assert.ok(lines[0]?.settledAt, "Zero-amount charge line should be auto-settled");
+
+  const billResponse = await requestJson(`/api/commerce/bills/${zeroAmountOrder.billId}`, {
+    token: viewer.token,
+  });
+  const billBody = await expectJsonResponse<{
+    bill: {
+      settlementStatus: string;
+      totalAmountFen: number;
+    };
+    lines: Array<{
+      settlementStatus: string;
+      payableByViewer: boolean;
+      paidFen: number;
+    }>;
+  }>(billResponse, 200);
+
+  assert.equal(billBody.bill.settlementStatus, "PAID");
+  assert.equal(billBody.bill.totalAmountFen, 0);
+  assert.equal(billBody.lines[0]?.settlementStatus, "PAID");
+  assert.equal(billBody.lines[0]?.payableByViewer, false);
+  assert.equal(billBody.lines[0]?.paidFen, 0);
+
+  const nextParticipants = await listPrOrderParticipants(prId, viewer.user.id);
+  const nextQuoteId = await createRentalFixedQuote({
+    offerId: offer.id as OfferId,
+    sku,
+    spuId: spu.id,
+    participants: nextParticipants,
+    contactPhone: "13800138227",
+    registrantName: "零元后续用户",
+  });
+
+  const result = await createOrderCommand({
+    createdBy: viewer.user.id,
+    prId,
+    items: [
+      {
+        kind: "FIXED",
+        quoteId: nextQuoteId,
+      },
+    ],
+  });
+
+  assert.equal(result.outcome, "CREATED");
+});
+
 scenario("commerce_bill_list_returns_only_viewer_bill_ids", async (ctx) => {
   const viewer = await givenUser("viewer-bills-owner");
   const otherUser = await givenUser("viewer-bills-other-user");
diff --git a/docs/10-prd/behavior/rules-and-invariants.md b/docs/10-prd/behavior/rules-and-invariants.md
index 9f0cf1af0..a1c389e1b 100644
--- a/docs/10-prd/behavior/rules-and-invariants.md
+++ b/docs/10-prd/behavior/rules-and-invariants.md
@@ -132,7 +132,8 @@
 - Offer Listing is the user-visible quote surface. A listing may include only products and SKUs that are currently offerable for the selected context.
 - Quote identity is the freshness and authorization boundary between listing and create-order. Create-order should use quote identity instead of trusting browser-copied product, route, participant, or price fields.
 - Expired quotes require a fresh listing and a second explicit user create action. The system should preserve matching user selections after refresh when those selections are still listed.
-- Create-order must be blocked when any intended order participant still has another unpaid order obligation. The block is enforced by the backend create-order boundary and surfaced on `/order/new` through a focused dialog rather than silent failure.
+- Create-order must be blocked when any intended order participant still has another unpaid payable order obligation. The block is enforced by the backend create-order boundary and surfaced on `/order/new` through a focused dialog rather than silent failure.
+- Positive unsettled charge lines block create-order only while their order payment window is still open. Zero-amount charge lines are treated as already paid.
 - The unpaid-order block dialog may route the current viewer into `/bills`, but `/bills` remains viewer-scoped. If the blocking unpaid obligation belongs to another participant, that participant still needs to complete payment before order creation can proceed.
 - Rental ordering buys one fixed quoted SKU.
 - RideHailing ordering authorizes a choice set: the user selects one or more acceptable vehicle candidates, and the provider/order lifecycle resolves one final vehicle after dispatch.
diff --git a/docs/10-prd/behavior/workflows.md b/docs/10-prd/behavior/workflows.md
index 581827cdc..19d89ee82 100644
--- a/docs/10-prd/behavior/workflows.md
+++ b/docs/10-prd/behavior/workflows.md
@@ -87,7 +87,7 @@
 7. For RideHailing, the user chooses one or more acceptable vehicle candidates. The displayed price is the selected candidate range. Unavailable provider vehicle types are omitted from the list rather than shown as disabled choices.
 8. RideHailing Ordering currently short-circuits departure-time editing and always behaves as `现在出发`, even when the PR itself carries a concrete start time.
 9. Create order submits quote identity, not copied route, participant, SKU, or price facts. If the quote expired, the page refreshes listing, preserves matching selected vehicles when possible, and requires the user to click order again.
-10. Before create succeeds, the system must reject the request when any intended order participant still has another unpaid order obligation. The Ordering Page stays on `/order/new`, explains the block through a focused dialog, and provides a `我的账单` CTA into `/bills` for the current viewer.
+10. Before create succeeds, the system must reject the request when any intended order participant still has another unpaid payable order obligation. Positive unsettled charge lines whose payment window has already expired, and zero-amount charge lines, do not block a new order. The Ordering Page stays on `/order/new`, explains the block through a focused dialog, and provides a `我的账单` CTA into `/bills` for the current viewer.
 11. If create succeeds, the user enters Order Detail. If provider dispatch creates then immediately cancels a RideHailing order, the user stays on `/order/new` and sees a failure dialog with the reason.
 
 ## 5. Revisit and History Entry
diff --git a/docs/20-product-tdd/ecommerce-contracts.md b/docs/20-product-tdd/ecommerce-contracts.md
index fbee3c3e3..e71f3fa1e 100644
--- a/docs/20-product-tdd/ecommerce-contracts.md
+++ b/docs/20-product-tdd/ecommerce-contracts.md
@@ -353,7 +353,7 @@ The baseline Rental user-visible chain is:
 
 1. PR Page placement entry
 2. `/order/new` ordering assembly and Offer Listing quote issuance
-3. Order creation from fixed quote id, unless any intended participant still has another unpaid order obligation
+3. Order creation from fixed quote id, unless any intended participant still has another unpaid payable order obligation
 4. Order Detail `待支付`
 5. same Order Detail `待确认预订`
 6. same Order Detail resolves to:
@@ -372,7 +372,7 @@ The baseline RideHailing user-visible chain is:
 
 1. PR Page placement entry
 2. `/order/new` ordering assembly and route/time-based Offer Listing quote issuance
-3. Order creation from selected candidate quote ids, unless any intended participant still has another unpaid order obligation
+3. Order creation from selected candidate quote ids, unless any intended participant still has another unpaid payable order obligation
 4. Order Detail with quote basis and fulfillment state
 5. same Order Detail with final bill after trip finish
 6. same Order Detail with final payment/completed state
@@ -387,7 +387,9 @@ forcing the whole order-detail projection to become a high-frequency payload.
 Rental:
 
 - prepaid
-- create-order must reject when any intended participant still has another unpaid order obligation; this guard applies before the new order row is created
+- create-order must reject when any intended participant still has another unpaid payable order obligation; this guard applies before the new order row is created
+- the current payable-obligation guard is Bill-owned and only considers positive unsettled `CHARGE` lines whose source order unpaid window is still open
+- zero-amount `CHARGE` lines are created as settled and historical zero-amount charge lines must be backfilled to the same paid semantics
 - Bill exists before execution begins
 - typed order creation keeps the standard unpaid payment window on the base
   Order timeout snapshot
diff --git a/tasks/my-bills-page/00-task-packet.md b/tasks/my-bills-page/00-task-packet.md
index 16a0ad57f..fa7946fb4 100644
--- a/tasks/my-bills-page/00-task-packet.md
+++ b/tasks/my-bills-page/00-task-packet.md
@@ -3,6 +3,8 @@
 - Add a viewer-scoped `/bills` page whose primary entry is the unpaid-order block dialog on `/order/new`.
 - Reuse the existing `BillCard` component as-is.
 - Keep the new viewer bill-list API intentionally narrow: it returns only ordered `billId[]`.
+- Tighten unpaid-order blocking so it only considers positive, unsettled, still-payable charge obligations.
+- Treat zero-amount charge bills as already paid, including historical backfill.
 
 ## Guardrails Touched
 
@@ -16,10 +18,15 @@
 - The unpaid-order block can be caused by any intended participant, not only the current viewer.
 - A viewer-scoped bill list therefore cannot guarantee that the blocking bill is visible to the current viewer.
 - The page should make that limitation explicit when entered from the ordering-blocked dialog.
+- The current backend only checks `CHARGE + settledAt is null`, so expired unpaid windows and zero-amount charge lines are falsely treated as blocking obligations.
+- `createPaymentCharge` currently checks the unpaid window too late, after it may already open a provider execution slot.
 
 ## Verification
 
 - Backend scenario: viewer bill list returns only the current viewer's bill ids.
 - Backend scenario: unauthenticated `/api/commerce/bills` returns `AUTHENTICATED_REQUIRED`.
 - System scenario: unpaid-order dialog CTA reaches `/bills`, and the user can continue into bill detail.
+- Backend scenario: expired unpaid rental bills no longer block create-order.
+- Backend scenario: zero-amount unpaid rental bills are treated as paid for order blocking and bill detail settlement.
+- Backend scenario: expired bill detail no longer exposes a payable line.
 - Static checks: targeted backend typecheck and frontend build.

From 1c3e2fa5ab111e9cbe55572db54620396acec92a Mon Sep 17 00:00:00 2001
From: Lan_zhijiang <lanzhijiang@foxmail.com>
Date: Wed, 1 Jul 2026 16:44:15 +0800
Subject: [PATCH 94/94] fix(trade): allow attaching orders on active PRs

- share READY and ACTIVE order-attachment eligibility across backend guards
- sync frontend copy, docs, and scenario coverage for ACTIVE PR ordering
---
 .../pr-core/services/status-rules.test.ts     |  8 +++
 .../domains/pr-core/services/status-rules.ts  |  5 ++
 .../pr-core/use-cases/attach-order-to-pr.ts   |  5 +-
 .../domains/trade/use-cases/create-order.ts   |  5 +-
 .../rental-order-persistence.scenario.test.ts | 70 ++++++++++++++++++-
 ...-hailing-order-foundation.scenario.test.ts | 14 ++--
 apps/frontend/src/pages/OrderingPage.vue      |  4 +-
 docs/10-prd/behavior/rules-and-invariants.md  |  1 +
 docs/20-product-tdd/ecommerce-contracts.md    |  2 +-
 .../commerce/rental-ordering.scenario.test.ts |  8 +--
 .../ride-hailing-ordering.scenario.test.ts    | 11 ++-
 11 files changed, 113 insertions(+), 20 deletions(-)

diff --git a/apps/backend/src/domains/pr-core/services/status-rules.test.ts b/apps/backend/src/domains/pr-core/services/status-rules.test.ts
index 771f59910..1065675e8 100644
--- a/apps/backend/src/domains/pr-core/services/status-rules.test.ts
+++ b/apps/backend/src/domains/pr-core/services/status-rules.test.ts
@@ -4,6 +4,7 @@ import {
   deriveStatusFromPartnerCount,
   isExitAllowedStatus,
   isJoinableStatus,
+  isOrderAttachableStatus,
   shouldRecalculateCapacityStatus,
 } from "./status-rules";
 
@@ -27,4 +28,11 @@ describe("PR status rules", () => {
     assert.equal(shouldRecalculateCapacityStatus("OPEN"), true);
     assert.equal(shouldRecalculateCapacityStatus("READY"), false);
   });
+
+  it("allows PR-attached ordering for READY and ACTIVE only", () => {
+    assert.equal(isOrderAttachableStatus("OPEN"), false);
+    assert.equal(isOrderAttachableStatus("READY"), true);
+    assert.equal(isOrderAttachableStatus("ACTIVE"), true);
+    assert.equal(isOrderAttachableStatus("CLOSED"), false);
+  });
 });
diff --git a/apps/backend/src/domains/pr-core/services/status-rules.ts b/apps/backend/src/domains/pr-core/services/status-rules.ts
index 2cc44bdaa..2309ba063 100644
--- a/apps/backend/src/domains/pr-core/services/status-rules.ts
+++ b/apps/backend/src/domains/pr-core/services/status-rules.ts
@@ -33,6 +33,11 @@ export function isActivatableStatus(status: string): boolean {
   return status === "OPEN" || status === "READY";
 }
 
+/** Statuses where PR-attached ordering is allowed. */
+export function isOrderAttachableStatus(status: string): boolean {
+  return status === "READY" || status === "ACTIVE";
+}
+
 /** Statuses eligible for close-time finalization. */
 export function isExpirableStatus(status: string): boolean {
   return (
diff --git a/apps/backend/src/domains/pr-core/use-cases/attach-order-to-pr.ts b/apps/backend/src/domains/pr-core/use-cases/attach-order-to-pr.ts
index 50b0705b0..5a165ad43 100644
--- a/apps/backend/src/domains/pr-core/use-cases/attach-order-to-pr.ts
+++ b/apps/backend/src/domains/pr-core/use-cases/attach-order-to-pr.ts
@@ -8,6 +8,7 @@ import type { TradeOrderId } from "../../../entities/trade-order";
 import type { UserId } from "../../../entities/user";
 import { TradeOrderRepository } from "../../../repositories/TradeOrderRepository";
 import type { RepositoryExecutor } from "../../../repositories/_executor";
+import { isOrderAttachableStatus } from "../services/status-rules";
 import { and, desc, eq, inArray, sql } from "drizzle-orm";
 
 export async function attachOrderToPr(
@@ -29,10 +30,10 @@ export async function attachOrderToPr(
     return throwHttpProblem({ status: 404, detail: "Partner request not found" });
   }
 
-  if (request.status !== "READY") {
+  if (!isOrderAttachableStatus(request.status)) {
     return throwHttpProblem({
       status: 409,
-      detail: "Order attachment requires PR READY status",
+      detail: "Order attachment requires PR READY or ACTIVE status",
     });
   }
 
diff --git a/apps/backend/src/domains/trade/use-cases/create-order.ts b/apps/backend/src/domains/trade/use-cases/create-order.ts
index 8567d983b..35f38603e 100644
--- a/apps/backend/src/domains/trade/use-cases/create-order.ts
+++ b/apps/backend/src/domains/trade/use-cases/create-order.ts
@@ -41,6 +41,7 @@ import {
   createRideHailingProviderPort,
 } from "../../ride-hailing";
 import { attachOrderToPr } from "../../pr-core";
+import { isOrderAttachableStatus } from "../../pr-core/services/status-rules";
 import type {
   ChoiceSetOrderItemSnapshot,
   FixedOrderItemSnapshot,
@@ -260,11 +261,11 @@ async function validatePrAttachmentForEvaluation(input: {
       detail: "关联的 PR 不存在。",
     });
   }
-  if (pr.status !== "READY") {
+  if (!isOrderAttachableStatus(pr.status)) {
     return actionProblem({
       code: "PR_NOT_READY",
       title: "暂不能创建订单",
-      detail: "创建订单需要搭子请求「已成团」",
+      detail: "创建订单需要搭子请求「已成团」或「进行中」",
     });
   }
   if (!input.viewerUserId || pr.createdBy !== input.viewerUserId) {
diff --git a/apps/backend/tests/commerce/rental-order-persistence.scenario.test.ts b/apps/backend/tests/commerce/rental-order-persistence.scenario.test.ts
index 2236a7252..411caaab7 100644
--- a/apps/backend/tests/commerce/rental-order-persistence.scenario.test.ts
+++ b/apps/backend/tests/commerce/rental-order-persistence.scenario.test.ts
@@ -101,7 +101,10 @@ const buildRentalOrderItem = (input: {
   quantity: 1,
 });
 
-async function givenRentalPr(creator: ScenarioUser): Promise<PRId> {
+async function givenRentalPr(
+  creator: ScenarioUser,
+  status: "READY" | "ACTIVE" = "READY",
+): Promise<PRId> {
   const pr = await partnerRequestRepo.create({
     budget: null,
     createdBy: creator.user.id,
@@ -112,7 +115,7 @@ async function givenRentalPr(creator: ScenarioUser): Promise<PRId> {
     minPartners: 1,
     notes: null,
     preferences: [],
-    status: "READY",
+    status,
     time: [serviceStartAt, serviceEndAt],
     title: `Rental persistence ${randomUUID()}`,
     type: "badminton",
@@ -373,6 +376,69 @@ scenario("commerce_rental_order_persists_base_and_typed_rows", async (ctx) => {
   assert.equal(typedOrder.cancellationHandlingStatus, "NONE");
 });
 
+scenario("commerce_rental_order_attaches_to_active_pr_orders", async (ctx) => {
+  const creator = await givenUser("rental-active-pr-attachment");
+  const prId = await givenRentalPr(creator, "ACTIVE");
+  const { offer, sku } = await givenRentalCatalog();
+  const itemId = randomUUID();
+  const participants = await listPrOrderParticipants(prId, creator.user.id);
+
+  const result = await db.transaction(async (tx) => {
+    const created = await createRentalOrder(
+      {
+        createdBy: creator.user.id,
+        participants,
+        offerId: offer.id,
+        items: [buildRentalOrderItem({ itemId, sku })],
+        pricingSnapshot: {
+          currency: "CNY",
+          itemBreakdowns: [
+            {
+              itemId,
+              resolvedAmountFen: 1200,
+              explanations: [],
+            },
+          ],
+          orderLevelExplanations: [],
+          subtotalFen: 1200,
+          totalFen: 1200,
+        },
+        serviceStartAt,
+        serviceEndAt,
+        contactPhone: "13800138008",
+        registrants: [
+          {
+            name: "李四",
+            phone: "13800138008",
+            nationalIdMasked: null,
+          },
+        ],
+      },
+      tx,
+    );
+
+    await attachOrderToPr(
+      {
+        orderId: created.orderId as TradeOrderId,
+        prId,
+        offerId: offer.id as OfferId,
+        orderCreatedBy: creator.user.id,
+      },
+      tx,
+    );
+
+    return created;
+  });
+
+  ctx.record("prId", prId);
+  ctx.record("orderId", result.orderId);
+
+  const updatedPr = await partnerRequestRepo.findById(prId);
+  assert.ok(updatedPr, "PR should still exist after ACTIVE attachment");
+  assert.equal(updatedPr.status, "ACTIVE");
+  assert.deepEqual(updatedPr.orders, [result.orderId]);
+});
+
 scenario("commerce_late_payment_after_cancel_does_not_start_fulfillment", async (ctx) => {
   const creator = await givenUser("rental-late-payment-cancelled");
   const prId = await givenRentalPr(creator);
diff --git a/apps/backend/tests/ride-hailing/ride-hailing-order-foundation.scenario.test.ts b/apps/backend/tests/ride-hailing/ride-hailing-order-foundation.scenario.test.ts
index 293be65bf..8d4b1ab15 100644
--- a/apps/backend/tests/ride-hailing/ride-hailing-order-foundation.scenario.test.ts
+++ b/apps/backend/tests/ride-hailing/ride-hailing-order-foundation.scenario.test.ts
@@ -27,7 +27,10 @@ const providerRepo = new RideHailingProviderInstanceRepository();
 const hasOwnKey = (value: object, key: string): boolean =>
   Object.prototype.hasOwnProperty.call(value, key);
 
-async function givenRideHailingPr(creator: ScenarioUser): Promise<PRId> {
+async function givenRideHailingPr(
+  creator: ScenarioUser,
+  status: "READY" | "ACTIVE" = "READY",
+): Promise<PRId> {
   const pr = await partnerRequestRepo.create({
     budget: null,
     createdBy: creator.user.id,
@@ -38,7 +41,7 @@ async function givenRideHailingPr(creator: ScenarioUser): Promise<PRId> {
     minPartners: 1,
     notes: null,
     preferences: [],
-    status: "READY",
+    status,
     time: ["2031-03-01T10:00:00.000Z", "2031-03-01T11:00:00.000Z"],
     title: `Ride hailing foundation ${randomUUID()}`,
     type: "badminton",
@@ -106,9 +109,11 @@ async function givenRideHailingOffer() {
   return { offer, spu };
 }
 
-scenario("ride_hailing_order_foundation_persists_base_typed_and_provider_binding", async (ctx) => {
+scenario(
+  "ride_hailing_order_foundation_persists_base_typed_and_provider_binding_for_active_pr",
+  async (ctx) => {
   const creator = await givenUser("ride-foundation-creator");
-  const prId = await givenRideHailingPr(creator);
+  const prId = await givenRideHailingPr(creator, "ACTIVE");
   const { offer, spu } = await givenRideHailingOffer();
   const provider = await providerRepo.create({
     providerType: "CAOCAO",
@@ -287,5 +292,6 @@ scenario("ride_hailing_order_foundation_persists_base_typed_and_provider_binding
 
   const pr = await partnerRequestRepo.findById(prId);
   assert.ok(pr, "PR should still exist");
+  assert.equal(pr.status, "ACTIVE");
   assert.deepEqual(pr.orders, [result.orderId]);
 });
diff --git a/apps/frontend/src/pages/OrderingPage.vue b/apps/frontend/src/pages/OrderingPage.vue
index e47f82786..7087e563b 100644
--- a/apps/frontend/src/pages/OrderingPage.vue
+++ b/apps/frontend/src/pages/OrderingPage.vue
@@ -275,7 +275,7 @@ const openPrNotReadyRecoveryDialog = (problem: Partial<OrderingActionProblem>):
     open: true,
     kind: "blocked-pr-not-ready",
     title: problem.title ?? "暂不能创建订单",
-    description: problem.detail ?? "创建订单需要搭子请求「已成团」",
+    description: problem.detail ?? "创建订单需要搭子请求「已成团」或「进行中」",
     confirmText: "切换到已成团",
     showCancel: true,
   };
@@ -391,7 +391,7 @@ const createOrderFromQuoteDraft = async (input: CreateOrderInput): Promise<void>
     if (apiError.code === "PR_NOT_READY" && canOfferPrReadyRecovery.value) {
       openPrNotReadyRecoveryDialog({
         title: "暂不能创建订单",
-        detail: apiError.message ?? "创建订单需要搭子请求「已成团」",
+        detail: apiError.message ?? "创建订单需要搭子请求「已成团」或「进行中」",
       });
       return;
     }
diff --git a/docs/10-prd/behavior/rules-and-invariants.md b/docs/10-prd/behavior/rules-and-invariants.md
index a1c389e1b..6e327a530 100644
--- a/docs/10-prd/behavior/rules-and-invariants.md
+++ b/docs/10-prd/behavior/rules-and-invariants.md
@@ -128,6 +128,7 @@
 ## 3.1 Commerce Ordering Rules
 
 - PR-attached ordering is entered through a backend-authored Button Placement on PR detail and assembled on `/order/new`.
+- PR-attached ordering may be created only while the PR is `READY` or `ACTIVE`.
 - At most one non-terminal order should exist for one PR and Offer pair. Re-opening the matching placement should continue the existing order instead of creating a second one.
 - Offer Listing is the user-visible quote surface. A listing may include only products and SKUs that are currently offerable for the selected context.
 - Quote identity is the freshness and authorization boundary between listing and create-order. Create-order should use quote identity instead of trusting browser-copied product, route, participant, or price fields.
diff --git a/docs/20-product-tdd/ecommerce-contracts.md b/docs/20-product-tdd/ecommerce-contracts.md
index e71f3fa1e..4cf901d77 100644
--- a/docs/20-product-tdd/ecommerce-contracts.md
+++ b/docs/20-product-tdd/ecommerce-contracts.md
@@ -243,7 +243,7 @@ PR-context order creation must append the created order id into
 
 Rules:
 
-- order creation is allowed only when PR is `READY`; `READY` is the roster-locked formed state
+- order creation is allowed only when PR is `READY` or `ACTIVE`; `READY` is the roster-locked formed state and `ACTIVE` keeps the same PR-attached ordering authority after execution starts
 - order creation is allowed only for the PR creator
 - PR domain is the final authority on attachment acceptance
 - if PR domain rejects attachment, the whole order creation transaction must
diff --git a/tests/scenario/commerce/rental-ordering.scenario.test.ts b/tests/scenario/commerce/rental-ordering.scenario.test.ts
index 433698b2f..c19b8c469 100644
--- a/tests/scenario/commerce/rental-ordering.scenario.test.ts
+++ b/tests/scenario/commerce/rental-ordering.scenario.test.ts
@@ -428,7 +428,7 @@ async function assertRentalOrderDetail(input: {
   });
 }
 
-scenario("commerce_rental_ordering_reaches_order_detail", async (ctx) => {
+scenario("commerce_rental_ordering_reaches_order_detail_for_active_pr", async (ctx) => {
   const creator = await givenUser("system-commerce-rental-creator");
   const joiner = await givenUser("system-commerce-rental-joiner");
   await bindScenarioWeChatOpenId({
@@ -446,7 +446,7 @@ scenario("commerce_rental_ordering_reaches_order_detail", async (ctx) => {
     title: "System commerce rental partner request",
   });
   await addJoinedParticipant({ pr, user: joiner });
-  await configurePRStatus({ pr, status: "READY" });
+  await configurePRStatus({ pr, status: "ACTIVE" });
   const placement = await givenRentalOrderingPlacement();
 
   ctx.record("creatorUserId", creator.user.id);
@@ -719,7 +719,7 @@ scenario("commerce_rental_ordering_blocks_non_ready_pr", async (ctx) => {
     await page.getByTestId("ordering.rental.create-order").click();
     await assertOrderingBlockedDialog({
       page,
-      expectedDetail: "创建订单需要搭子请求「已成团」",
+      expectedDetail: "创建订单需要搭子请求「已成团」或「进行中」",
     });
     assert.equal(new URL(page.url()).pathname, "/order/new");
   });
@@ -755,7 +755,7 @@ scenario("commerce_rental_ordering_recovers_non_ready_pr_by_marking_ready", asyn
     await page.getByTestId("ordering.rental.create-order").click();
     await assertOrderingBlockedDialog({
       page,
-      expectedDetail: "创建订单需要搭子请求「已成团」",
+      expectedDetail: "创建订单需要搭子请求「已成团」或「进行中」",
     });
 
     await page.getByRole("button", { name: "切换到已成团" }).click();
diff --git a/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts b/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
index 55d63e6c8..1ed047308 100644
--- a/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
+++ b/tests/scenario/commerce/ride-hailing-ordering.scenario.test.ts
@@ -398,7 +398,12 @@ async function givenRideHailingOrderingPlacement(): Promise<{
       and: [
         { "===": [{ var: "kind" }, "PR"] },
         { "===": [{ var: "type" }, "ride-hailing-system-scenario"] },
-        { "===": [{ var: "status" }, "READY"] },
+        {
+          or: [
+            { "===": [{ var: "status" }, "READY"] },
+            { "===": [{ var: "status" }, "ACTIVE"] },
+          ],
+        },
         { var: "hasRoute" },
         { var: "time.hasConcreteTime" },
       ],
@@ -857,7 +862,7 @@ async function waitForRideHailingMapMode(
     });
 }
 
-scenario("commerce_ride_hailing_ordering_reaches_order_detail", async (ctx) => {
+scenario("commerce_ride_hailing_ordering_reaches_order_detail_for_active_pr", async (ctx) => {
   await resetFakeCaocao();
   const creator = await givenUser("system-ride-hailing-creator", {
     phoneNumber: "13800138000",
@@ -876,7 +881,7 @@ scenario("commerce_ride_hailing_ordering_reaches_order_detail", async (ctx) => {
     status: "JOINED",
     userId: passenger.user.id,
   });
-  await configurePRStatus({ pr, status: "READY" });
+  await configurePRStatus({ pr, status: "ACTIVE" });
   await registerScenarioPaymentProvider();
   const placement = await givenRideHailingOrderingPlacement();