Aether/frontend/src/features/usage/components/RequestDetailDrawer.vue

<template>
  <!-- 请求详情抽屉 -->
  <Teleport to="body">
    <Transition name="drawer">
      <div
        v-if="isOpen"
        class="fixed inset-0 z-50 flex justify-end"
        @click.self="handleClose"
      >
        <!-- 背景遮罩 -->
        <div
          class="absolute inset-0 bg-black/30 backdrop-blur-sm"
          @click="handleClose"
        />

        <!-- 抽屉内容 -->
        <Card class="relative h-full w-full sm:w-[800px] sm:max-w-[90vw] rounded-none shadow-2xl flex flex-col">
          <!-- 固定头部 - 整合基本信息 -->
          <div class="sticky top-0 z-10 bg-background border-b px-3 sm:px-6 py-3 sm:py-4 flex-shrink-0">
            <!-- 第一行：标题、模型、状态、操作按钮 -->
            <div class="flex items-center justify-between gap-2 sm:gap-4 mb-3">
              <div class="flex min-w-0 flex-1 items-center gap-2 sm:gap-3 flex-wrap">
                <h3 class="text-lg font-semibold">
                  请求详情
                </h3>
                <UsageModelDisplay
                  v-if="headerModelRecord"
                  :record="headerModelRecord"
                  :cyber="detailCyberPolicyError"
                  context="detail"
                  data-request-detail-model-display
                  class="min-w-0 max-w-[18rem] text-sm font-mono text-muted-foreground sm:max-w-none"
                  model-row-class="rounded bg-muted px-2 py-0.5"
                />
                <div
                  v-else
                  data-request-detail-model-display
                  class="rounded bg-muted px-2 py-0.5 text-sm font-mono text-muted-foreground"
                >
                  -
                </div>
                <Badge
                  v-if="detail?.status_code === 200"
                  variant="success"
                >
                  {{ detail.status_code }}
                </Badge>
                <Badge
                  v-else-if="detail"
                  variant="destructive"
                >
                  {{ detail.status_code }}
                </Badge>
                <Badge
                  v-if="detail && resolveUsageStreamLabelSegments(detail).hasConversion"
                  :variant="streamBadgeVariant(resolveUsageStreamLabelSegments(detail).client === '流式')"
                  :class="streamBadgeVariant(resolveUsageStreamLabelSegments(detail).client === '流式') === 'secondary'
                    ? 'text-xs inline-flex items-center gap-1'
                    : 'text-xs inline-flex items-center gap-1 border-border/60 text-muted-foreground'"
                >
                  <span>{{ resolveUsageStreamLabelSegments(detail).client }}</span>
                  <span class="opacity-60">→</span>
                  <span>{{ resolveUsageStreamLabelSegments(detail).upstream }}</span>
                </Badge>
                <Badge
                  v-else-if="detail"
                  :variant="streamBadgeVariant(isUsageUpstreamStream(detail))"
                  :class="streamBadgeVariant(isUsageUpstreamStream(detail)) === 'secondary'
                    ? 'text-xs'
                    : 'text-xs border-border/60 text-muted-foreground'"
                >
                  {{ formatUsageStreamLabel(detail) }}
                </Badge>
              </div>
              <div class="flex items-center gap-1 shrink-0">
                <Button
                  variant="ghost"
                  size="icon"
                  class="h-8 w-8"
                  title="回放请求"
                  :disabled="loading"
                  @click="openReplayDialog"
                >
                  <Play class="w-4 h-4" />
                </Button>
                <Button
                  variant="ghost"
                  size="icon"
                  class="h-8 w-8"
                  :disabled="loading && !autoRefreshing"
                  :title="refreshButtonTitle"
                  @click="refreshDetail"
                >
                  <RefreshCw
                    class="w-4 h-4"
                    :class="{ 'animate-spin': loading || autoRefreshing, 'text-primary': autoRefreshing }"
                  />
                </Button>
                <Button
                  variant="ghost"
                  size="icon"
                  class="h-8 w-8"
                  title="关闭"
                  @click="handleClose"
                >
                  <X class="w-4 h-4" />
                </Button>
              </div>
            </div>
            <!-- 第二行：关键元信息 -->
            <div
              v-if="detail"
              class="flex items-center flex-wrap gap-x-2 gap-y-1 text-xs text-muted-foreground sm:gap-x-4"
            >
              <span class="flex min-w-0 items-center gap-1">
                <span class="font-medium text-foreground">ID:</span>
                <span
                  class="font-mono"
                  :title="fullRequestId"
                >{{ displayRequestId }}</span>
              </span>
              <span class="hidden opacity-40 sm:inline">|</span>
              <span>{{ formatDateTime(detail.created_at) }}</span>
              <span class="hidden opacity-40 sm:inline">|</span>
              <span>{{ formatApiFormat(detail.api_format) }}</span>
              <span class="hidden opacity-40 sm:inline">|</span>
              <span>用户: {{ detail.user?.username || 'Unknown' }}</span>
            </div>
          </div>

          <!-- 可滚动内容区域 -->
          <div class="flex-1 min-h-0 overflow-y-auto px-3 sm:px-6 py-3 sm:py-4 scrollbar-stable">
            <!-- Loading State -->
            <div
              v-if="loading"
              class="py-8 space-y-4"
            >
              <Skeleton class="h-8 w-full" />
              <Skeleton class="h-32 w-full" />
              <Skeleton class="h-64 w-full" />
            </div>

            <!-- Error State -->
            <Card
              v-else-if="error"
              class="border-red-200 dark:border-red-800"
            >
              <div class="p-4">
                <p class="text-sm text-red-600 dark:text-red-400">
                  {{ error }}
                </p>
              </div>
            </Card>

            <!-- Detail Content -->
            <div
              v-else-if="detail"
              class="space-y-4"
            >
              <!-- 费用与性能概览 -->
              <Card>
                <div class="p-3 sm:p-4">
                  <div class="mb-4 text-sm">
                    <div class="sm:hidden">
                      <span class="rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground/70">{{ priceSourceLabel }}</span>
                    </div>
                    <div class="mt-2 grid grid-cols-[max-content_max-content_max-content_max-content_max-content] items-center gap-x-2 overflow-x-auto whitespace-nowrap text-xs sm:hidden">
                      <span>
                        <span class="text-muted-foreground">总费用</span>
                        <span class="ml-1 font-bold text-green-600 dark:text-green-400">
                          ${{ ((typeof detail.cost === 'object' ? detail.cost?.total : detail.cost) || detail.total_cost || 0).toFixed(6) }}
                        </span>
                      </span>
                      <span class="text-muted-foreground">|</span>
                      <span>
                        <span class="text-muted-foreground">耗时</span>
                        <span class="ml-1 font-bold">
                          {{ formatDurationMs(detail.first_byte_time_ms) }} / {{ formatDurationMs(detail.response_time_ms) }}
                        </span>
                      </span>
                      <span class="text-muted-foreground">|</span>
                      <span>
                        <span class="text-muted-foreground">输出速度</span>
                        <span class="ml-1 font-bold text-primary">{{ formatOutputRateValue(detailOutputRate) }}tps</span>
                      </span>
                    </div>
                    <div class="hidden flex-wrap items-center gap-x-2 gap-y-1 sm:flex">
                      <span class="rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground/70">{{ priceSourceLabel }}</span>
                      <span class="text-muted-foreground">|</span>
                      <span class="whitespace-nowrap">
                        <span class="text-muted-foreground">总费用</span>
                        <span class="ml-1 font-bold text-green-600 dark:text-green-400">
                          ${{ ((typeof detail.cost === 'object' ? detail.cost?.total : detail.cost) || detail.total_cost || 0).toFixed(6) }}
                        </span>
                      </span>
                      <span class="text-muted-foreground">|</span>
                      <span class="whitespace-nowrap">
                        <span class="text-muted-foreground">耗时</span>
                        <span class="ml-1 font-bold">
                          {{ formatDurationMs(detail.first_byte_time_ms) }} / {{ formatDurationMs(detail.response_time_ms) }}
                        </span>
                      </span>
                      <span class="text-muted-foreground">|</span>
                      <span class="whitespace-nowrap">
                        <span class="text-muted-foreground">输出速度</span>
                        <span class="ml-1 font-bold text-primary">{{ formatOutputRateValue(detailOutputRate) }}tps</span>
                      </span>
                    </div>
                    <ServiceTierFacts
                      v-if="hasServiceTierFacts && processingTierPriceMultiplier === null"
                      class="mt-3"
                      :requested="serviceTierFacts.requested"
                      :price-multiplier="processingTierPriceMultiplier"
                    />
                  </div>

                  <!-- 分隔线 -->
                  <Separator class="mb-4" />

                  <!-- ========== 1. Token分阶段成本 ========== -->
                  <div
                    v-if="hasTokenCost"
                    class="space-y-2 mb-3"
                  >
                    <!-- 阶梯标题 -->
                    <div class="text-xs text-muted-foreground flex items-center gap-2 flex-wrap">
                      <span class="font-medium text-foreground">Token 计费</span>
                      <span class="font-mono font-medium text-foreground">
                        <template v-if="processingTierPriceMultiplier !== null">
                          ${{ tokenCostBaseTotal.toFixed(6) }} × {{ processingTierPriceMultiplier }} ({{ processingTierLabel }} 层级)
                        </template>
                        <template v-else>
                          ${{ tokenCostTotal.toFixed(6) }}
                        </template>
                      </span>
                      <span class="text-muted-foreground/60">(输入 {{ formatNumber(displayInputTokens) }} + 缓存创建 {{ cacheCreationSummaryText }} + 缓存读取 {{ formatNumber(detail.cache_read_input_tokens || 0) }})</span>
                      <Badge
                        v-if="displayTiers.length > 1"
                        variant="outline"
                        class="text-[10px] px-1.5 py-0 h-4"
                      >
                        命中第 {{ currentTierIndex + 1 }} 阶
                      </Badge>
                    </div>

                    <!-- 阶梯展示 -->
                    <div
                      v-for="(tier, index) in displayTiers"
                      :key="index"
                      class="rounded-lg p-3 space-y-2"
                      :class="index === currentTierIndex
                        ? 'bg-primary/5 border border-primary/30'
                        : 'bg-muted/20 border border-border/50 opacity-60'"
                    >
                      <!-- 阶梯标题行 -->
                      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1 sm:gap-2 text-xs">
                        <div class="flex items-center gap-2">
                          <span
                            class="font-medium"
                            :class="index === currentTierIndex ? 'text-primary' : 'text-muted-foreground'"
                          >
                            第 {{ index + 1 }} 阶
                          </span>
                          <span class="text-muted-foreground">
                            {{ getTierRangeText(tier, index, displayTiers) }}
                          </span>
                          <Badge
                            v-if="index === currentTierIndex"
                            variant="default"
                            class="text-[10px] px-1.5 py-0 h-4"
                          >
                            当前
                          </Badge>
                        </div>
                        <!-- 单价信息 -->
                        <div class="grid grid-cols-2 gap-x-4 gap-y-1 text-muted-foreground sm:hidden">
                          <div class="grid grid-cols-[max-content_1fr] items-baseline gap-x-1">
                            <span>输入</span>
                            <span class="text-right">{{ formatPricePerMillion(tier.input_price_per_1m) }}</span>
                          </div>
                          <div
                            class="grid grid-cols-[max-content_1fr] items-baseline gap-x-1"
                          >
                            <span>输出</span>
                            <span class="text-right">{{ formatPricePerMillion(tier.output_price_per_1m) }}</span>
                          </div>
                          <template v-if="getTierActiveCacheCreationDisplay(tier) || shouldShowCacheReadPrice(tier)">
                            <div
                              v-if="getTierActiveCacheCreationDisplay(tier)"
                              class="grid grid-cols-[max-content_1fr] items-baseline gap-x-1"
                            >
                              <span>{{ getTierActiveCacheCreationDisplay(tier)?.label }}</span>
                              <span class="text-right">${{ formatPrice(getTierActiveCacheCreationDisplay(tier)?.price || 0) }}/M</span>
                            </div>
                            <div v-else />
                            <div
                              v-if="shouldShowCacheReadPrice(tier)"
                              class="grid grid-cols-[max-content_1fr] items-baseline gap-x-1"
                            >
                              <span>缓存读取</span>
                              <span class="text-right">${{ formatPrice(getTierActiveCacheReadPrice(tier) ?? 0) }}/M</span>
                            </div>
                            <div v-else />
                          </template>
                        </div>
                        <div class="text-muted-foreground hidden items-center gap-2 flex-wrap sm:flex">
                          <span>输入 {{ formatPricePerMillion(tier.input_price_per_1m) }}</span>
                          <span>输出 {{ formatPricePerMillion(tier.output_price_per_1m) }}</span>
                          <span v-if="getTierActiveCacheCreationDisplay(tier)">
                            {{ getTierActiveCacheCreationDisplay(tier)?.label }}
                            ${{ formatPrice(getTierActiveCacheCreationDisplay(tier)?.price || 0) }}/M
                          </span>
                          <span v-if="shouldShowCacheReadPrice(tier)">
                            缓存读取 ${{ formatPrice(getTierActiveCacheReadPrice(tier) ?? 0) }}/M
                          </span>
                        </div>
                      </div>

                      <!-- 当前阶梯的详细计算 -->
                      <template v-if="index === currentTierIndex">
                        <div class="grid gap-y-2 sm:hidden">
                          <div class="grid grid-cols-[64px_minmax(0,1fr)_92px] items-center gap-x-2">
                            <span class="text-xs text-muted-foreground">输入</span>
                            <span class="text-sm font-semibold font-mono text-right tabular-nums">{{ displayInputTokens }}</span>
                            <span class="text-xs font-mono text-right tabular-nums">${{ displayInputCost.toFixed(6) }}</span>
                          </div>
                          <div class="grid grid-cols-[64px_minmax(0,1fr)_92px] items-center gap-x-2">
                            <span class="text-xs text-muted-foreground">输出</span>
                            <span class="text-sm font-semibold font-mono text-right tabular-nums">{{ detail.tokens?.output || detail.output_tokens || 0 }}</span>
                            <span class="text-xs font-mono text-right tabular-nums">${{ displayOutputCost.toFixed(6) }}</span>
                          </div>
                          <div class="grid grid-cols-[64px_minmax(0,1fr)_92px] items-center gap-x-2">
                            <span class="text-xs text-muted-foreground">缓存创建</span>
                            <span class="text-sm font-semibold font-mono text-right tabular-nums">{{ totalCacheCreationTokens }}</span>
                            <span class="text-xs font-mono text-right tabular-nums">${{ displayCacheCreationCost.toFixed(6) }}</span>
                          </div>
                          <div class="grid grid-cols-[64px_minmax(0,1fr)_92px] items-center gap-x-2">
                            <span class="text-xs text-muted-foreground">缓存读取</span>
                            <span class="text-sm font-semibold font-mono text-right tabular-nums">{{ detail.cache_read_input_tokens || 0 }}</span>
                            <span class="text-xs font-mono text-right tabular-nums">${{ displayCacheReadCost.toFixed(6) }}</span>
                          </div>
                        </div>
                        <!-- 输入 输出 -->
                        <div class="hidden items-center sm:flex">
                          <div class="flex items-center flex-1">
                            <span class="text-xs text-muted-foreground w-[56px]">输入</span>
                            <span class="text-sm font-semibold font-mono flex-1 text-center">{{ displayInputTokens }}</span>
                            <span class="text-xs font-mono">${{ displayInputCost.toFixed(6) }}</span>
                          </div>
                          <Separator
                            orientation="vertical"
                            class="h-4 mx-4"
                          />
                          <div class="flex items-center flex-1">
                            <span class="text-xs text-muted-foreground w-[56px]">输出</span>
                            <span class="text-sm font-semibold font-mono flex-1 text-center">{{ detail.tokens?.output || detail.output_tokens || 0 }}</span>
                            <span class="text-xs font-mono">${{ displayOutputCost.toFixed(6) }}</span>
                          </div>
                        </div>
                        <!-- 缓存创建 缓存读取 -->
                        <div class="hidden items-center sm:flex">
                          <div class="flex items-center flex-1">
                            <span class="text-xs text-muted-foreground w-[56px]">{{ cacheCreationSplitRows.length > 0 ? '创建合计' : '缓存创建' }}</span>
                            <span class="text-sm font-semibold font-mono flex-1 text-center">{{ totalCacheCreationTokens }}</span>
                            <span class="text-xs font-mono">${{ displayCacheCreationCost.toFixed(6) }}</span>
                          </div>
                          <Separator
                            orientation="vertical"
                            class="h-4 mx-4"
                          />
                          <div class="flex items-center flex-1">
                            <span class="text-xs text-muted-foreground w-[56px]">缓存读取</span>
                            <span class="text-sm font-semibold font-mono flex-1 text-center">{{ detail.cache_read_input_tokens || 0 }}</span>
                            <span class="text-xs font-mono">${{ displayCacheReadCost.toFixed(6) }}</span>
                          </div>
                        </div>
                        <!-- 缓存创建 5m/1h 细分 -->
                        <div
                          v-if="cacheCreationSplitRows.length > 0"
                          class="grid gap-y-1 sm:hidden"
                        >
                          <div
                            v-for="row in cacheCreationSplitRows"
                            :key="row.key"
                            class="grid grid-cols-[64px_minmax(0,1fr)_68px_92px] items-center gap-x-2 text-xs text-muted-foreground/70"
                          >
                            <span>{{ row.label }}</span>
                            <span class="font-mono text-right tabular-nums text-foreground/90">{{ formatNumber(row.tokens) }}</span>
                            <span
                              class="text-right"
                              :class="row.pricePer1M === null ? 'invisible' : ''"
                            >
                              {{ row.pricePer1M !== null ? `$${formatPrice(row.pricePer1M)}/M` : '-' }}
                            </span>
                            <span
                              class="font-mono text-right tabular-nums"
                              :class="row.cost === null ? 'invisible' : ''"
                            >
                              {{ row.cost !== null ? `$${row.cost.toFixed(6)}` : '-' }}
                            </span>
                          </div>
                        </div>
                        <div
                          v-if="cacheCreationSplitRows.length > 0"
                          class="hidden space-y-1 pl-[56px] sm:block"
                        >
                          <div
                            v-for="row in cacheCreationSplitRows"
                            :key="row.key"
                            class="flex items-center gap-4 text-xs text-muted-foreground/70"
                          >
                            <span class="w-[72px]">{{ row.label }}</span>
                            <span class="font-mono text-foreground/90">{{ formatNumber(row.tokens) }}</span>
                            <span v-if="row.pricePer1M !== null">${{ formatPrice(row.pricePer1M) }}/M</span>
                            <span
                              v-if="row.cost !== null"
                              class="font-mono"
                            >${{ row.cost.toFixed(6) }}</span>
                          </div>
                        </div>
                      </template>
                    </div>
                  </div>

                  <!-- ========== 3. 按次计费 ========== -->
                  <div
                    v-if="perRequestCost > 0 && !detail.video_billing"
                    class="space-y-2 mb-3"
                  >
                    <div class="flex items-center gap-2 text-xs">
                      <span class="font-medium text-foreground">按次计费</span>
                      <span class="font-mono font-medium text-foreground">${{ perRequestCost.toFixed(6) }}</span>
                    </div>
                    <div class="rounded-lg p-3 bg-primary/5 border border-primary/30 space-y-2">
                      <div
                        v-if="effectivePricePerRequest > 0"
                        class="flex items-center justify-end text-xs"
                      >
                        <span class="text-muted-foreground">${{ effectivePricePerRequest.toFixed(6) }}/次</span>
                      </div>
                      <div class="flex items-center">
                        <div class="flex items-center flex-1">
                          <span class="text-xs text-muted-foreground w-[56px]">请求次数</span>
                          <span class="text-sm font-semibold font-mono flex-1 text-center">1</span>
                          <span class="text-xs font-mono font-medium">${{ perRequestCost.toFixed(6) }}</span>
                        </div>
                      </div>
                    </div>
                  </div>

                  <!-- ========== 4. 图片输出计费 ========== -->
                  <div
                    v-if="hasImageBillingDetail"
                    class="rounded-lg p-3 space-y-2 bg-primary/5 border border-primary/30 mb-3"
                  >
                    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1 sm:gap-2 text-xs">
                      <div class="flex items-center gap-2 flex-wrap">
                        <span class="font-medium text-primary">图片输出</span>
                        <Badge
                          variant="outline"
                          class="text-[10px] px-1.5 py-0 h-4"
                        >
                          {{ imageOutputBillingLabel }}
                        </Badge>
                        <span
                          v-if="imageOutputPricingDescriptor"
                          class="text-muted-foreground font-mono"
                        >{{ imageOutputPricingDescriptor }}</span>
                      </div>
                      <div class="text-muted-foreground flex items-center gap-2 flex-wrap">
                        <span
                          v-if="imageOutputPricePerImage !== null"
                          class="font-mono"
                        >{{ formatNumber(imageOutputCount) }} 张 × ${{ imageOutputPricePerImage.toFixed(6) }}/张 = ${{ imageOutputCostTotal.toFixed(6) }}</span>
                      </div>
                    </div>

                    <div class="flex items-center">
                      <div class="flex items-center flex-1">
                        <span class="text-xs text-muted-foreground w-[56px]">数量</span>
                        <span class="text-sm font-semibold font-mono flex-1 text-center">{{ formatNumber(imageOutputCount) }}</span>
                        <span class="text-xs font-mono">${{ imageOutputCostTotal.toFixed(6) }}</span>
                      </div>
                      <Separator
                        orientation="vertical"
                        class="h-4 mx-4"
                      />
                      <div class="flex items-center flex-1">
                        <span class="text-xs text-muted-foreground w-[56px]">格式</span>
                        <span class="text-sm font-semibold font-mono flex-1 text-center">{{ imageOutputFormat || '-' }}</span>
                        <span class="text-xs font-mono text-muted-foreground">{{ imageOutputBillingLabel }}</span>
                      </div>
                    </div>
                  </div>

                  <!-- ========== 5. 视频/图像/音频计费（独立隔离，与Token计费风格一致） ========== -->
                  <div
                    v-if="detail.video_billing"
                    class="rounded-lg p-3 space-y-2 bg-primary/5 border border-primary/30"
                  >
                    <!-- 标题行（与阶梯标题行风格一致） -->
                    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-1 sm:gap-2 text-xs">
                      <div class="flex items-center gap-2">
                        <span class="font-medium text-primary">
                          {{ getTaskTypeLabel(detail.video_billing.task_type) }}
                        </span>
                        <span
                          v-if="detail.video_billing.resolution"
                          class="text-muted-foreground"
                        >
                          {{ detail.video_billing.resolution }}
                        </span>
                      </div>
                      <!-- 费用计算公式 -->
                      <div class="text-muted-foreground flex items-center gap-2 flex-wrap">
                        <span
                          v-if="detail.video_billing.duration_seconds && detail.video_billing.video_price_per_second"
                          class="font-mono"
                        >
                          {{ detail.video_billing.duration_seconds.toFixed(1) }}s × ${{ detail.video_billing.video_price_per_second.toFixed(4) }}/s = ${{ videoCostTotal.toFixed(6) }}
                        </span>
                        <span
                          v-else-if="detail.video_billing.video_price_per_second"
                          class="font-mono"
                        >
                          ${{ detail.video_billing.video_price_per_second.toFixed(4) }}/秒
                        </span>
                      </div>
                    </div>

                    <!-- 费用详情（与Token详情行风格一致） -->
                    <div class="flex items-center">
                      <div class="flex items-center flex-1">
                        <span class="text-xs text-muted-foreground w-[56px]">
                          {{ detail.video_billing.task_type === 'video' ? '时长' : detail.video_billing.task_type === 'audio' ? '时长' : '数量' }}
                        </span>
                        <span class="text-sm font-semibold font-mono flex-1 text-center">
                          {{ detail.video_billing.duration_seconds ? formatDuration(detail.video_billing.duration_seconds) : '1' }}
                        </span>
                        <span class="text-xs font-mono">${{ videoCostTotal.toFixed(6) }}</span>
                      </div>
                      <Separator
                        orientation="vertical"
                        class="h-4 mx-4 invisible"
                      />
                      <div class="flex items-center flex-1 invisible">
                        <span class="text-xs text-muted-foreground w-[56px]">占位</span>
                        <span class="text-sm font-semibold font-mono flex-1 text-center">0</span>
                        <span class="text-xs font-mono">$0.000000</span>
                      </div>
                    </div>
                  </div>
                </div>
              </Card>

              <!-- 请求链路追踪卡片 -->
              <div>
                <HorizontalRequestTimeline
                  v-if="showTimeline && traceTimelineRequestId"
                  ref="timelineRef"
                  :request-id="traceTimelineRequestId"
                  :override-status-code="detail.status_code"
                  :request-status="detail.status"
                  :request-api-format="detail.api_format || null"
                  :request-metadata="traceRequestMetadata"
                  @trace-state="handleTraceState"
                />
              </div>

              <!-- Tabs 区域 -->
              <Card>
                <div class="p-3 sm:p-4">
                  <Tabs
                    v-model="activeTab"
                    :default-value="activeTab"
                  >
                    <!-- Tab 行 -->
                    <div class="flex items-center border-b pb-2 mb-3">
                      <button
                        v-for="tab in visibleTabs"
                        :key="tab.name"
                        class="px-2 sm:px-3 py-1.5 text-sm transition-colors border-b-2 -mb-[9px] whitespace-nowrap"
                        :class="activeTab === tab.name
                          ? 'border-primary text-foreground font-medium'
                          : 'border-transparent text-muted-foreground hover:text-foreground'"
                        @click="activeTab = tab.name"
                      >
                        {{ tab.label }}
                      </button>
                    </div>

                    <!-- Tab 内容（统一容器） -->
                    <JsonContentPanel
                      class="content-block"
                      :title="activeJsonPanelTitle"
                      :data="activeJsonPanelData"
                      :is-dark="isDark"
                      :expand-depth="currentExpandDepth"
                      :copied="Boolean(copiedStates[activeTab])"
                      :custom-copy="true"
                      :expand-disabled="viewMode === 'compare' || (supportsConversationView && contentViewMode === 'conversation')"
                      :copy-disabled="viewMode === 'compare'"
                      max-height="500px"
                      @update:expand-depth="currentExpandDepth = $event"
                      @copy="copyContent(activeTab)"
                    >
                      <template #toolbar-actions-before>
                        <!-- 区域1：条件性按钮（cURL、视图切换、对比） -->
                        <!-- cURL 复制（仅在请求头/请求体 Tab） -->
                        <template v-if="['request-headers', 'request-body'].includes(activeTab)">
                          <button
                            :title="curlCopied ? '已复制 cURL' : '复制 cURL'"
                            class="p-1 rounded transition-colors text-muted-foreground hover:bg-muted"
                            :disabled="curlCopying"
                            @click="copyCurlCommand"
                          >
                            <Check
                              v-if="curlCopied"
                              class="w-3.5 h-3.5 text-green-500"
                            />
                            <Terminal
                              v-else
                              class="w-3.5 h-3.5"
                              :class="{ 'animate-pulse': curlCopying }"
                            />
                          </button>
                        </template>

                        <!-- 请求体/响应体专用：JSON/对话 视图切换 -->
                        <template v-if="supportsConversationView">
                          <button
                            :title="contentViewMode === 'json' ? '切换到对话视图' : '切换到 JSON 视图'"
                            class="p-1 rounded transition-colors"
                            :class="hasValidConversation || contentViewMode === 'conversation'
                              ? 'text-muted-foreground hover:bg-muted'
                              : 'text-muted-foreground/40 cursor-not-allowed'"
                            :disabled="!hasValidConversation && contentViewMode === 'json'"
                            @click="toggleContentView"
                          >
                            <Code2
                              v-if="contentViewMode === 'conversation'"
                              class="w-3.5 h-3.5"
                            />
                            <MessageSquareText
                              v-else
                              class="w-3.5 h-3.5"
                            />
                          </button>
                        </template>

                        <!-- 请求头/响应头：对比模式 -->
                        <template v-if="canCompare">
                          <button
                            title="对比"
                            class="p-1 rounded transition-colors"
                            :class="viewMode === 'compare' ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:bg-muted'"
                            @click="viewMode = 'compare'"
                          >
                            <Columns2 class="w-3.5 h-3.5" />
                          </button>
                        </template>

                        <!-- 区域2：客户端/提供商切换 -->
                        <template v-if="showDataSourceToggle">
                          <div class="w-px h-3.5 bg-border mx-0.5" />
                          <button
                            title="客户端"
                            class="p-1 rounded transition-colors"
                            :class="activeDataSource === 'client' ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:bg-muted'"
                            @click="setDataSource('client')"
                          >
                            <Monitor class="w-3.5 h-3.5" />
                          </button>
                          <button
                            title="提供商"
                            class="p-1 rounded transition-colors"
                            :class="activeDataSource === 'provider' ? 'bg-primary text-primary-foreground' : 'text-muted-foreground hover:bg-muted'"
                            @click="setDataSource('provider')"
                          >
                            <Server class="w-3.5 h-3.5" />
                          </button>
                        </template>

                        <!-- 区域3：常驻按钮（展开/收缩、复制） -->
                        <div class="w-px h-3.5 bg-border mx-0.5" />
                      </template>
                      <TabsContent value="request-headers">
                        <RequestHeadersContent
                          :detail="detail"
                          :view-mode="viewMode"
                          :data-source="dataSource"
                          :current-header-data="currentHeaderData"
                          :current-expand-depth="currentExpandDepth"
                          :has-provider-headers="hasProviderHeaders"
                          :header-stats="headerStats"
                          :is-dark="isDark"
                        />
                      </TabsContent>

                      <TabsContent value="request-body">
                        <div
                          v-if="isRequestBodyLoading"
                          class="p-4"
                        >
                          <Skeleton class="h-32 w-full" />
                        </div>
                        <div
                          v-else-if="requestBodyLoadErrorVisible"
                          class="m-4 rounded-lg border border-destructive/30 bg-destructive/5 p-4 text-sm text-destructive"
                        >
                          <div class="flex items-start gap-2">
                            <AlertTriangle class="mt-0.5 h-4 w-4 flex-shrink-0" />
                            <span>{{ bodyLoadErrorMessage }}</span>
                          </div>
                          <Button
                            variant="outline"
                            size="sm"
                            class="mt-3 h-8 border-destructive/40 text-destructive hover:bg-destructive/10 hover:text-destructive"
                            @click="retryBodyContentLoad"
                          >
                            <RefreshCw class="mr-1.5 h-3.5 w-3.5" />
                            重试
                          </Button>
                        </div>
                        <ConversationView
                          v-else-if="contentViewMode === 'conversation'"
                          :render-result="requestRenderResult"
                          empty-message="无请求体信息"
                        />
                        <JsonContent
                          v-else
                          :data="currentRequestBody"
                          :view-mode="viewMode"
                          :expand-depth="currentExpandDepth"
                          :is-dark="isDark"
                          empty-message="无请求体信息"
                        />
                      </TabsContent>

                      <TabsContent value="response-headers">
                        <RequestHeadersContent
                          v-if="viewMode === 'compare'"
                          :detail="detail"
                          :view-mode="viewMode"
                          :data-source="dataSource"
                          :current-header-data="currentResponseHeaderData"
                          :current-expand-depth="currentExpandDepth"
                          :has-provider-headers="hasProviderResponseHeaders"
                          :header-stats="responseHeaderStats"
                          :is-dark="isDark"
                          :client-headers="detail.client_response_headers"
                          :provider-headers="detail.response_headers"
                          client-label="客户端响应头"
                          provider-label="提供商响应头"
                          empty-message="无响应头信息"
                        />
                        <JsonContent
                          v-else
                          :data="currentResponseHeaderData"
                          :view-mode="viewMode"
                          :expand-depth="currentExpandDepth"
                          :is-dark="isDark"
                          empty-message="无响应头信息"
                        />
                      </TabsContent>

                      <TabsContent value="response-body">
                        <div
                          v-if="isResponseBodyLoading"
                          class="p-4"
                        >
                          <Skeleton class="h-32 w-full" />
                        </div>
                        <div
                          v-else-if="responseBodyLoadErrorVisible"
                          class="m-4 rounded-lg border border-destructive/30 bg-destructive/5 p-4 text-sm text-destructive"
                        >
                          <div class="flex items-start gap-2">
                            <AlertTriangle class="mt-0.5 h-4 w-4 flex-shrink-0" />
                            <span>{{ bodyLoadErrorMessage }}</span>
                          </div>
                          <Button
                            variant="outline"
                            size="sm"
                            class="mt-3 h-8 border-destructive/40 text-destructive hover:bg-destructive/10 hover:text-destructive"
                            @click="retryBodyContentLoad"
                          >
                            <RefreshCw class="mr-1.5 h-3.5 w-3.5" />
                            重试
                          </Button>
                        </div>
                        <ConversationView
                          v-else-if="contentViewMode === 'conversation'"
                          :render-result="responseRenderResult"
                          empty-message="无响应体信息"
                        />
                        <JsonContent
                          v-else
                          :data="currentResponseBody"
                          :view-mode="viewMode"
                          :expand-depth="currentExpandDepth"
                          :is-dark="isDark"
                          empty-message="无响应体信息"
                        />
                      </TabsContent>

                      <TabsContent value="metadata">
                        <JsonContent
                          :data="metadataPanelData"
                          :view-mode="viewMode"
                          :expand-depth="currentExpandDepth"
                          :is-dark="isDark"
                          empty-message="无元数据信息"
                        />
                      </TabsContent>
                    </JsonContentPanel>
                  </Tabs>
                </div>
              </Card>
            </div>
          </div>
        </Card>
      </div>
    </Transition>
  </Teleport>

  <!-- 请求回放对话框 -->
  <ReplayDialog
    :is-open="replayDialogOpen"
    :request-id="requestId"
    :detail="detail"
    @close="replayDialogOpen = false"
  />
</template>

<script setup lang="ts">
import { ref, watch, computed, onMounted, onBeforeUnmount } from 'vue'
import Button from '@/components/ui/button.vue'
import { useEscapeKey } from '@/composables/useEscapeKey'
import { useClipboard } from '@/composables/useClipboard'
import { useDarkMode } from '@/composables/useDarkMode'
import Card from '@/components/ui/card.vue'
import Badge from '@/components/ui/badge.vue'
import Separator from '@/components/ui/separator.vue'
import Skeleton from '@/components/ui/skeleton.vue'
import Tabs from '@/components/ui/tabs.vue'
import TabsContent from '@/components/ui/tabs-content.vue'
import { AlertTriangle, Check, Columns2, RefreshCw, X, Monitor, Server, MessageSquareText, Code2, Terminal, Play } from 'lucide-vue-next'
import { dashboardApi, type RequestDetail } from '@/api/dashboard'
import type { ImageProgress, RequestTrace } from '@/api/requestTrace'
import type { UsageRecord } from '../types'
import { formatApiFormat } from '@/api/endpoints/types/api-format'
import {
  formatByteSize,
  formatCompactNumber,
  formatShortRequestId,
  formatTokens,
} from '@/utils/format'
import { log } from '@/utils/logger'
import { getEffectiveInputTokens } from '../token-normalization'
import {
  formatDurationMs,
  formatOutputRateValue,
  getDisplayOutputRate,
} from '../performance'
import {
  formatUsageStreamLabel,
  isUsageUpstreamStream,
  resolveDisplayRequestStatus,
  resolveUsageStreamLabelSegments,
} from '../utils/status'
import { isCyberPolicyError } from '../utils/cyberError'
import {
  mergeUsageRecordErrorMessage,
  parseUsageTimestampMs,
} from '../utils/recordSync'
import {
  formatPricePerMillion,
  resolveProcessingTierPriceMultiplier,
  resolveSettlementPricingSnapshot,
  resolveSettlementPricingSourceLabel,
  resolveSettlementPricingTiers,
} from '../utils/settlement-pricing'

// 子组件
import RequestHeadersContent from './RequestDetailDrawer/RequestHeadersContent.vue'
import JsonContent from './RequestDetailDrawer/JsonContent.vue'
import JsonContentPanel from './JsonContentPanel.vue'
import ConversationView from './RequestDetailDrawer/ConversationView.vue'
import HorizontalRequestTimeline from './HorizontalRequestTimeline.vue'
import ReplayDialog from './ReplayDialog.vue'
import ServiceTierFacts from './ServiceTierFacts.vue'
import UsageModelDisplay from './UsageModelDisplay.vue'
import {
  formatServiceTierFact,
  hasServiceTierFact,
  resolveServiceTierFacts,
} from '../utils/service-tier'

// 对话解析器
import {
  renderRequest,
  renderResponse,
  type RenderResult,
  type RenderBlock,
} from '../conversation'

type RequestStateStatus = 'pending' | 'streaming' | 'completed' | 'failed' | 'cancelled'

const props = defineProps<{
  isOpen: boolean
  requestId: string | null
  summaryRecord?: UsageRecord | null
}>()

const emit = defineEmits<{
  close: []
  requestState: [state: {
    id: string
    requestId?: string | null
    status?: RequestStateStatus
    statusCode?: number | null
    inputTokens?: number | null
    effectiveInputTokens?: number | null
    outputTokens?: number | null
    totalTokens?: number | null
    cacheCreationInputTokens?: number | null
    cacheCreationEphemeral5mInputTokens?: number | null
    cacheCreationEphemeral1hInputTokens?: number | null
    cacheReadInputTokens?: number | null
    cost?: number | null
    actualCost?: number | null
    responseTimeMs?: number | null
    firstByteTimeMs?: number | null
    isStream?: boolean | null
    upstreamIsStream?: boolean | null
    clientRequestedStream?: boolean | null
    clientIsStream?: boolean | null
    apiFormat?: string | null
    endpointApiFormat?: string | null
    hasFormatConversion?: boolean | null
    targetModel?: string | null
    requestedReasoningEffort?: string | null
    reasoningEffort?: string | null
    serviceTier?: string | null
    actualServiceTier?: string | null
    imageProgress?: ImageProgress | null
    errorMessage?: string | null
    updatedAt?: string | null
  }]
}>()

const REQUEST_STATE_STATUSES = new Set<RequestStateStatus>([
  'pending',
  'streaming',
  'completed',
  'failed',
  'cancelled',
])

const loading = ref(false)
const error = ref<string | null>(null)
const detail = ref<RequestDetail | null>(null)
const timelineRef = ref<InstanceType<typeof HorizontalRequestTimeline> | null>(null)
const timelineLoaded = ref(false)
const timelineHasTrace = ref(false)
const activeTab = ref('request-body')
const copiedStates = ref<Record<string, boolean>>({})
const viewMode = ref<'compare' | 'formatted' | 'raw'>('formatted')
const currentExpandDepth = ref(0)
const dataSource = ref<'client' | 'provider'>('provider')
const contentViewMode = ref<'json' | 'conversation'>('json')
const { copyToClipboard } = useClipboard()
const historicalPricing = ref<{
  input_price: string
  output_price: string
  cache_creation_price: string
  cache_read_price: string
  request_price: string
} | null>(null)

type CacheTTLPriceEntry = {
  ttl_minutes?: number | null
  cache_creation_price_per_1m?: number | null
  cache_read_price_per_1m?: number | null
}

type PricingTierLike = {
  up_to?: number | null
  input_price_per_1m?: number | null
  output_price_per_1m?: number | null
  cache_creation_price_per_1m?: number | null
  cache_read_price_per_1m?: number | null
  cache_ttl_pricing?: CacheTTLPriceEntry[] | null
}

type JsonRecord = Record<string, unknown>

const METADATA_BYTE_FIELD_PATTERN = /(^bytes$|_bytes$|bytes$)/i

function asRecord(value: unknown): JsonRecord | null {
  if (!value || typeof value !== 'object' || Array.isArray(value)) return null
  return value as JsonRecord
}

function shouldFormatMetadataByteField(key: string, value: unknown): value is number {
  return typeof value === 'number'
    && Number.isFinite(value)
    && METADATA_BYTE_FIELD_PATTERN.test(key)
}

function formatMetadataDisplayValue(value: unknown, key = ''): unknown {
  if (shouldFormatMetadataByteField(key, value)) {
    return formatByteSize(value)
  }
  if (Array.isArray(value)) {
    return value.map(item => formatMetadataDisplayValue(item))
  }
  if (value && typeof value === 'object') {
    return Object.entries(value as Record<string, unknown>)
      .reduce<Record<string, unknown>>((formatted, [childKey, childValue]) => {
        formatted[childKey] = formatMetadataDisplayValue(childValue, childKey)
        return formatted
      }, {})
  }
  return value
}

function mapTraceFinalStatusToRequestStatus(
  status?: RequestTrace['final_status'] | null
): RequestStateStatus | undefined {
  switch (status) {
    case 'success':
      return 'completed'
    case 'failed':
      return 'failed'
    case 'cancelled':
      return 'cancelled'
    case 'streaming':
      return 'streaming'
    case 'pending':
      return 'pending'
    default:
      return undefined
  }
}

function normalizeRequestStateStatus(status: unknown): RequestStateStatus | undefined {
  const normalized = typeof status === 'string' ? status.trim().toLowerCase() : ''
  return REQUEST_STATE_STATUSES.has(normalized as RequestStateStatus)
    ? normalized as RequestStateStatus
    : undefined
}

function hasRequestFailureSignal(statusCode?: number | null, errorMessage?: string | null): boolean {
  return (typeof statusCode === 'number' && statusCode >= 400) ||
    (typeof errorMessage === 'string' && errorMessage.trim().length > 0)
}

function resolveRequestStateStatus(
  status: unknown,
  statusCode?: number | null,
  errorMessage?: string | null
): RequestStateStatus | undefined {
  const normalized = normalizeRequestStateStatus(status)
  if ((normalized == null || normalized === 'pending' || normalized === 'streaming') &&
    hasRequestFailureSignal(statusCode, errorMessage)) {
    return 'failed'
  }
  return normalized
}

function resolveRequestStateStatusFromDetail(nextDetail: Pick<RequestDetail, 'status' | 'status_code' | 'error_message'>): RequestStateStatus | undefined {
  return resolveRequestStateStatus(nextDetail.status, nextDetail.status_code, nextDetail.error_message)
}

type HeaderModelTextField =
  | 'model'
  | 'target_model'
  | 'model_version'
  | 'request_type'
  | 'requested_reasoning_effort'
  | 'reasoning_effort'
  | 'service_tier'
  | 'actual_service_tier'

const FINAL_PROVIDER_HEADER_FIELDS = new Set<HeaderModelTextField>([
  'target_model',
  'reasoning_effort',
  'service_tier',
  'actual_service_tier',
])

let modelSnapshotRevision = 0
const summaryModelRevision = ref(0)
const detailModelRevision = ref(0)

function usageSnapshotUpdatedAtMs(
  source: UsageRecord | RequestDetail | null | undefined,
): number | null {
  const value = source?.updated_at
  if (typeof value !== 'string' || !value.trim()) return null
  return parseUsageTimestampMs(value)
}

function summaryNullIsNewerForProviderField(
  field: HeaderModelTextField,
  nextDetail: RequestDetail | null | undefined,
): boolean {
  if (!FINAL_PROVIDER_HEADER_FIELDS.has(field) || !props.summaryRecord) return false

  const summaryUpdatedAt = usageSnapshotUpdatedAtMs(props.summaryRecord)
  const detailUpdatedAt = usageSnapshotUpdatedAtMs(nextDetail)
  if (summaryUpdatedAt != null && detailUpdatedAt != null && summaryUpdatedAt !== detailUpdatedAt) {
    return summaryUpdatedAt > detailUpdatedAt
  }

  if (summaryModelRevision.value > detailModelRevision.value) return true

  // A terminal list row is a complete final-provider snapshot. When no
  // comparable timestamps exist, its explicit null must beat a cached detail
  // from an earlier candidate. Non-terminal rows may still be filled by a
  // detail request that completed after the lightweight list response.
  return ['completed', 'failed', 'cancelled'].includes(props.summaryRecord.status ?? '')
}

function readHeaderModelTextField(
  source: UsageRecord | RequestDetail | null | undefined,
  field: HeaderModelTextField,
): { resolved: boolean, value: string | null } {
  if (!source || !Object.prototype.hasOwnProperty.call(source, field)) {
    return { resolved: false, value: null }
  }

  const value = (source as unknown as Record<string, unknown>)[field]
  if (value === null) return { resolved: true, value: null }
  if (typeof value !== 'string') return { resolved: false, value: null }

  const normalized = value.trim()
  return { resolved: true, value: normalized || null }
}

function resolveHeaderModelTextField(
  field: HeaderModelTextField,
  nextDetail: RequestDetail | null | undefined,
): string | null | undefined {
  // Prefer a populated list/active fact so sparse detail cannot make the header
  // flicker. A summary null is often only a lightweight-contract placeholder,
  // though, so a later populated detail is still useful. Final-provider stale
  // facts are cleared when full list/active snapshots merge into the summary.
  const summaryValue = readHeaderModelTextField(props.summaryRecord, field)
  if (summaryValue.value) return summaryValue.value

  const detailValue = readHeaderModelTextField(nextDetail, field)
  if (detailValue.value) {
    if (
      summaryValue.resolved
      && summaryValue.value === null
      && summaryNullIsNewerForProviderField(field, nextDetail)
    ) return null
    return detailValue.value
  }

  return summaryValue.resolved || detailValue.resolved ? null : undefined
}

watch(
  () => [
    props.requestId,
    props.summaryRecord?.status,
    props.summaryRecord?.updated_at,
    props.summaryRecord?.model,
    props.summaryRecord?.target_model,
    props.summaryRecord?.model_version,
    props.summaryRecord?.request_type,
    props.summaryRecord?.requested_reasoning_effort,
    props.summaryRecord?.reasoning_effort,
    props.summaryRecord?.service_tier,
    props.summaryRecord?.actual_service_tier,
  ],
  () => {
    summaryModelRevision.value = ++modelSnapshotRevision
  },
  { immediate: true },
)

function detailTotalCost(nextDetail: RequestDetail): number | null {
  const structuredCost = typeof nextDetail.cost === 'object' ? nextDetail.cost?.total : null
  const totalCost = toNumber(nextDetail.total_cost)
  const legacyCost = toNumber(nextDetail.cost)
  return [structuredCost, totalCost, legacyCost]
    .map(value => toNumber(value))
    .find((value): value is number => value != null && value > 0)
    ?? toNumber(structuredCost)
    ?? totalCost
    ?? legacyCost
}

function detailCacheCreation5mTokens(nextDetail: RequestDetail): number | null {
  return toNumber(nextDetail.cache_creation_input_tokens_5m)
    ?? toNumber(nextDetail.cache_creation_ephemeral_5m_input_tokens)
}

function detailCacheCreation1hTokens(nextDetail: RequestDetail): number | null {
  return toNumber(nextDetail.cache_creation_input_tokens_1h)
    ?? toNumber(nextDetail.cache_creation_ephemeral_1h_input_tokens)
}

function emitDetailRequestState(nextDetail: RequestDetail) {
  const id = props.requestId
  if (!id) return

  const targetModel = resolveHeaderModelTextField('target_model', nextDetail)
  const requestedReasoningEffort = resolveHeaderModelTextField(
    'requested_reasoning_effort',
    nextDetail,
  )
  const reasoningEffort = resolveHeaderModelTextField('reasoning_effort', nextDetail)
  const serviceTier = resolveHeaderModelTextField('service_tier', nextDetail)
  const actualServiceTier = resolveHeaderModelTextField('actual_service_tier', nextDetail)

  emit('requestState', {
    id,
    requestId: nextDetail.request_id || nextDetail.id || null,
    status: resolveRequestStateStatusFromDetail(nextDetail),
    statusCode: nextDetail.status_code ?? undefined,
    inputTokens: nextDetail.input_tokens ?? nextDetail.tokens?.input ?? null,
    effectiveInputTokens: displayInputTokens.value,
    outputTokens: nextDetail.output_tokens ?? nextDetail.tokens?.output ?? null,
    totalTokens: nextDetail.total_tokens ?? nextDetail.tokens?.total ?? null,
    cacheCreationInputTokens: nextDetail.cache_creation_input_tokens ?? null,
    cacheCreationEphemeral5mInputTokens: detailCacheCreation5mTokens(nextDetail),
    cacheCreationEphemeral1hInputTokens: detailCacheCreation1hTokens(nextDetail),
    cacheReadInputTokens: nextDetail.cache_read_input_tokens ?? null,
    cost: detailTotalCost(nextDetail),
    actualCost: nextDetail.actual_cost ?? null,
    responseTimeMs: nextDetail.response_time_ms ?? undefined,
    firstByteTimeMs: nextDetail.first_byte_time_ms ?? null,
    isStream: nextDetail.is_stream ?? null,
    upstreamIsStream: nextDetail.upstream_is_stream ?? null,
    clientRequestedStream: nextDetail.client_requested_stream ?? null,
    clientIsStream: nextDetail.client_is_stream ?? null,
    apiFormat: nextDetail.api_format ?? null,
    endpointApiFormat: nextDetail.endpoint_api_format ?? null,
    hasFormatConversion: nextDetail.has_format_conversion ?? null,
    ...(targetModel ? { targetModel } : {}),
    ...(requestedReasoningEffort ? { requestedReasoningEffort } : {}),
    ...(reasoningEffort ? { reasoningEffort } : {}),
    ...(serviceTier ? { serviceTier } : {}),
    ...(actualServiceTier ? { actualServiceTier } : {}),
    errorMessage: nextDetail.error_message ?? undefined,
    updatedAt: nextDetail.updated_at ?? undefined,
  })
}

function handleTraceState(state: {
  loaded: boolean
  hasTrace: boolean
  finalStatus?: RequestTrace['final_status'] | null
  statusCode?: number | null
  latencyMs?: number | null
  imageProgress?: ImageProgress | null
  errorMessage?: string | null
}) {
  timelineLoaded.value = state.loaded
  timelineHasTrace.value = state.hasTrace
  const id = props.requestId
  if (!id) return

  const status = resolveRequestStateStatus(
    mapTraceFinalStatusToRequestStatus(state.finalStatus),
    state.statusCode,
    state.errorMessage
  )
  const imageFailed = state.imageProgress?.phase === 'failed'
  if (!status && !state.imageProgress && state.statusCode == null && state.latencyMs == null) return

  emit('requestState', {
    id,
    requestId: detail.value?.request_id || detail.value?.id || null,
    status: imageFailed ? 'failed' : status,
    statusCode: state.statusCode ?? undefined,
    responseTimeMs: state.latencyMs ?? undefined,
    imageProgress: state.imageProgress ?? null,
    errorMessage: state.errorMessage ?? undefined,
  })
}

function toNumber(value: unknown): number | null {
  if (typeof value === 'number' && Number.isFinite(value)) return value
  if (typeof value === 'string') {
    const parsed = Number(value)
    return Number.isFinite(parsed) ? parsed : null
  }
  return null
}

function getNestedValue(record: JsonRecord | null, ...path: string[]): unknown {
  let current: unknown = record
  for (const key of path) {
    const object = asRecord(current)
    if (!object) return null
    current = object[key]
  }
  return current
}

function getNestedNumber(record: JsonRecord | null, ...path: string[]): number | null {
  return toNumber(getNestedValue(record, ...path))
}

function getNestedString(record: JsonRecord | null, ...path: string[]): string | null {
  const value = getNestedValue(record, ...path)
  return typeof value === 'string' && value.trim() ? value.trim() : null
}

function getCaseInsensitiveString(record: JsonRecord | null, key: string): string | null {
  if (!record) return null
  const normalizedKey = key.toLowerCase()
  for (const [name, value] of Object.entries(record)) {
    if (name.toLowerCase() === normalizedKey && typeof value === 'string' && value.trim()) {
      return value.trim()
    }
  }
  return null
}

function normalizeCacheTtlPricing(value: unknown): CacheTTLPriceEntry[] {
  if (!Array.isArray(value)) return []
  return value
    .map((entry) => asRecord(entry))
    .filter((entry): entry is JsonRecord => entry !== null)
    .map((entry) => ({
      ttl_minutes: toNumber(entry.ttl_minutes),
      cache_creation_price_per_1m: toNumber(entry.cache_creation_price_per_1m),
      cache_read_price_per_1m: toNumber(entry.cache_read_price_per_1m),
    }))
}
const autoRefreshTimer = ref<ReturnType<typeof setInterval> | null>(null)
const autoRefreshing = ref(false)
const isPageVisible = ref(typeof document === 'undefined' ? true : !document.hidden)
const curlCopying = ref(false)
const curlCopied = ref(false)
const replayDialogOpen = ref(false)
const bodyLoading = ref(false)
const bodyLoadError = ref<string | null>(null)
const bodiesLoadedForRequestId = ref<string | null>(null)
const showTimeline = ref(false)
const AUTO_REFRESH_INTERVAL_MS = 1000
const TIMELINE_MOUNT_DELAY_MS = 120
let loadDetailRequestId = 0
let bodyLoadRequestId = 0
let loadDetailInFlight = false
let timelineMountTimer: ReturnType<typeof setTimeout> | null = null

const fullRequestId = computed(() => detail.value?.request_id || detail.value?.id || '-')
const displayRequestId = computed(() => formatShortRequestId(fullRequestId.value))
const refreshButtonTitle = computed(() => {
  if (autoRefreshing.value) return '停止自动刷新'
  return isRequestCompleted() ? '刷新' : '开启自动刷新'
})
const displayInputTokens = computed(() => {
  if (!detail.value) return 0
  return getEffectiveInputTokens({
    effective_input_tokens: detail.value.effective_input_tokens,
    input_tokens: detail.value.input_tokens ?? detail.value.tokens?.input,
    cache_read_input_tokens: detail.value.cache_read_input_tokens,
    api_format: detail.value.api_format,
    endpoint_api_format: detail.value.endpoint_api_format,
  })
})

const detailOutputTokens = computed(() => {
  if (!detail.value) return 0
  return detail.value.tokens?.output ?? detail.value.output_tokens ?? 0
})

const detailOutputRate = computed(() => {
  if (!detail.value) return null
  return getDisplayOutputRate({
    output_tokens: detailOutputTokens.value,
    response_time_ms: detail.value.response_time_ms,
    first_byte_time_ms: detail.value.first_byte_time_ms,
    is_stream: detail.value.is_stream,
    upstream_is_stream: detail.value.upstream_is_stream,
  })
})

// 监听标签页切换
watch(activeTab, (newTab) => {
  if (!['request-headers', 'response-headers'].includes(newTab) && viewMode.value === 'compare') {
    viewMode.value = 'formatted'
  }
  // 切换到不支持对话视图的 Tab 时，重置为 JSON 视图
  if (!['request-body', 'response-body'].includes(newTab)) {
    contentViewMode.value = 'json'
  }
  dataSource.value = getDefaultDataSourceForTab(newTab)

  if (['request-body', 'response-body'].includes(newTab)) {
    void ensureBodyContentLoaded()
  }
})

const { isDark } = useDarkMode()

function streamBadgeVariant(isStream: boolean): 'secondary' | 'outline' {
  if (isDark.value) {
    return isStream ? 'outline' : 'secondary'
  }
  return isStream ? 'secondary' : 'outline'
}

const traceRequestMetadata = computed<Record<string, unknown> | null>(() => {
  const meta = detail.value?.metadata
  if (!meta || typeof meta !== 'object' || Array.isArray(meta)) return null
  return meta as Record<string, unknown>
})

const traceRecord = computed<Record<string, unknown> | null>(() =>
  asRecord(detail.value?.trace ?? null),
)

const traceTimelineRequestId = computed(() =>
  getNestedString(traceRecord.value, 'trace_id')
  ?? getNestedString(traceRequestMetadata.value, 'trace_id')
  ?? getCaseInsensitiveString(asRecord(detail.value?.request_headers ?? null), 'x-trace-id')
  ?? detail.value?.request_id
  ?? detail.value?.id
  ?? null,
)

const metadataPanelData = computed<Record<string, unknown> | null>(() => {
  if (!detail.value) return null

  const merged: Record<string, unknown> = {}
  if (hasContent(detail.value.metadata)) {
    Object.assign(merged, detail.value.metadata || {})
  }
  if (hasContent(detail.value.routing)) {
    merged.routing = detail.value.routing
  }
  if (hasContent(detail.value.body_capture)) {
    merged.body_capture = detail.value.body_capture
  }
  if (hasContent(detail.value.trace)) {
    merged.trace = detail.value.trace
  }
  if (hasContent(detail.value.settlement)) {
    merged.settlement = detail.value.settlement
  }

  return Object.keys(merged).length > 0
    ? formatMetadataDisplayValue(merged) as Record<string, unknown>
    : null
})

const detailForCurrentRequest = computed(() => (
  detailMatchesRequestId(detail.value, props.requestId) ? detail.value : null
))

type AuthoritativeErrorSource = 'summary' | 'detail' | null

function isTerminalRequestState(status: RequestStateStatus | undefined): boolean {
  return status === 'completed' || status === 'failed' || status === 'cancelled'
}

function isSuccessfulTerminalRequestState(status: RequestStateStatus | undefined): boolean {
  return status === 'completed' || status === 'cancelled'
}

const authoritativeErrorSource = computed<AuthoritativeErrorSource>(() => {
  const summary = props.summaryRecord
  const currentDetail = detailForCurrentRequest.value
  if (!summary || !currentDetail) return null

  const summaryStatus = resolveRequestStateStatus(
    summary.status,
    summary.status_code,
    summary.error_message,
  )
  const detailStatus = resolveRequestStateStatusFromDetail(currentDetail)
  const summaryUpdatedAtMs = usageSnapshotUpdatedAtMs(summary)
  const detailUpdatedAtMs = usageSnapshotUpdatedAtMs(currentDetail)

  if (summaryUpdatedAtMs != null && detailUpdatedAtMs != null &&
    summaryUpdatedAtMs !== detailUpdatedAtMs) {
    if (detailUpdatedAtMs > summaryUpdatedAtMs && isTerminalRequestState(detailStatus)) {
      return 'detail'
    }
    if (summaryUpdatedAtMs > detailUpdatedAtMs && isTerminalRequestState(summaryStatus)) {
      return 'summary'
    }
  }

  // Without a comparable timestamp, a successful/cancelled terminal snapshot
  // still has to clear a failure from the other source. Generic failed detail
  // remains non-authoritative so opening the drawer cannot flash away a Cyber
  // refusal already resolved by the list.
  const detailSucceeded = isSuccessfulTerminalRequestState(detailStatus)
  const summarySucceeded = isSuccessfulTerminalRequestState(summaryStatus)
  if (detailSucceeded && !summarySucceeded) return 'detail'
  if (summarySucceeded && !detailSucceeded) return 'summary'
  if (detailSucceeded && summarySucceeded) {
    return detailModelRevision.value >= summaryModelRevision.value ? 'detail' : 'summary'
  }

  return null
})

const headerModelRecord = computed(() => {
  const summary = props.summaryRecord
  const currentDetail = detailForCurrentRequest.value
  if (!summary && !currentDetail) return null

  const authoritativeSource = authoritativeErrorSource.value
  const errorMessage = authoritativeSource === 'summary'
    ? mergeUsageRecordErrorMessage(undefined, summary?.error_message, { authoritative: true })
    : mergeUsageRecordErrorMessage(
      summary?.error_message,
      currentDetail?.error_message,
      { authoritative: authoritativeSource === 'detail' },
    )

  return {
    model: resolveHeaderModelTextField('model', currentDetail) ?? '-',
    target_model: resolveHeaderModelTextField('target_model', currentDetail),
    model_version: resolveHeaderModelTextField('model_version', currentDetail),
    request_type: resolveHeaderModelTextField('request_type', currentDetail),
    requested_reasoning_effort: resolveHeaderModelTextField(
      'requested_reasoning_effort',
      currentDetail,
    ),
    reasoning_effort: resolveHeaderModelTextField('reasoning_effort', currentDetail),
    service_tier: resolveHeaderModelTextField('service_tier', currentDetail),
    error_message: errorMessage,
  }
})
const serviceTierFacts = computed(() => resolveServiceTierFacts(headerModelRecord.value))
const hasServiceTierFacts = computed(() => hasServiceTierFact(serviceTierFacts.value))
const settlementPricingSnapshot = computed(() => resolveSettlementPricingSnapshot(detail.value))
const processingTierLabel = computed(() => (
  formatServiceTierFact(serviceTierFacts.value.requested)
  ?? formatServiceTierFact(getNestedString(settlementPricingSnapshot.value, 'billing_processing_tier'))
  ?? '处理'
))
const detailCyberPolicyError = computed(() => {
  const summaryError = props.summaryRecord?.error_message
  const currentDetail = detailForCurrentRequest.value
  const detailErrors = [
    currentDetail?.error_message,
    currentDetail?.upstream_error,
    currentDetail?.failure_summary,
    currentDetail?.response_body,
  ]

  if (authoritativeErrorSource.value === 'summary') {
    return isCyberPolicyError(summaryError)
  }
  if (authoritativeErrorSource.value === 'detail') {
    return isCyberPolicyError(detailErrors)
  }
  return isCyberPolicyError([summaryError, ...detailErrors])
})
const processingTierPriceMultiplier = computed(() => (
  resolveProcessingTierPriceMultiplier(detail.value)
))

const settlementInfo = computed<JsonRecord | null>(() =>
  asRecord(detail.value?.settlement ?? null),
)

const billingSnapshot = computed<JsonRecord | null>(() =>
  asRecord(settlementInfo.value?.billing_snapshot)
  ?? asRecord(traceRequestMetadata.value?.billing_snapshot),
)

const billingResolvedVariables = computed<JsonRecord | null>(() =>
  asRecord(billingSnapshot.value?.resolved_variables),
)

const billingResolvedDimensions = computed<JsonRecord | null>(() =>
  asRecord(billingSnapshot.value?.resolved_dimensions),
)

const billingCostBreakdown = computed<JsonRecord | null>(() =>
  asRecord(billingSnapshot.value?.cost_breakdown),
)

const billingTierInfo = computed<JsonRecord | null>(() =>
  asRecord(billingSnapshot.value?.tier_info),
)

function hasBodyContent(flag: boolean | undefined, data: unknown): boolean {
  return Boolean(flag) || hasContent(data)
}

const hasRequestBodyAvailable = computed(() => {
  return hasBodyContent(detail.value?.has_request_body, detail.value?.request_body)
    || hasBodyContent(detail.value?.has_provider_request_body, detail.value?.provider_request_body)
})

const hasResponseBodyAvailable = computed(() => {
  return hasBodyContent(detail.value?.has_response_body, detail.value?.response_body)
    || hasBodyContent(detail.value?.has_client_response_body, detail.value?.client_response_body)
})

const isRequestBodyLoading = computed(() => {
  return bodyLoading.value && activeTab.value === 'request-body' && !currentRequestBody.value
})

const isResponseBodyLoading = computed(() => {
  return bodyLoading.value && activeTab.value === 'response-body' && !currentResponseBody.value
})

const requestBodyLoadFailed = computed(() => {
  const errors = detail.value?.body_load_errors
  return Boolean(errors?.request_body || errors?.provider_request_body)
})

const responseBodyLoadFailed = computed(() => {
  const errors = detail.value?.body_load_errors
  return Boolean(errors?.response_body || errors?.client_response_body)
})

const bodyLoadErrorMessage = computed(() => {
  return bodyLoadError.value || '正文内容加载失败，请重试'
})

const requestBodyLoadErrorVisible = computed(() => {
  return Boolean(
    (bodyLoadError.value || requestBodyLoadFailed.value) &&
    activeTab.value === 'request-body' &&
    !currentRequestBody.value
  )
})

const responseBodyLoadErrorVisible = computed(() => {
  return Boolean(
    (bodyLoadError.value || responseBodyLoadFailed.value) &&
    activeTab.value === 'response-body' &&
    !currentResponseBody.value
  )
})

function clearTimelineMountTimer() {
  if (timelineMountTimer) {
    clearTimeout(timelineMountTimer)
    timelineMountTimer = null
  }
}

function scheduleTimelineMount() {
  clearTimelineMountTimer()
  if (typeof window === 'undefined') {
    showTimeline.value = true
    return
  }
  timelineMountTimer = window.setTimeout(() => {
    showTimeline.value = true
  }, TIMELINE_MOUNT_DELAY_MS)
}

// 检测是否有提供商请求头
const hasProviderHeaders = computed(() => {
  return !!(detail.value?.provider_request_headers &&
         Object.keys(detail.value.provider_request_headers).length > 0)
})

// 请求体：仅当 provider_request_body 存在时才展示来源切换
const hasProviderRequestBody = computed(() => {
  return hasBodyContent(detail.value?.has_provider_request_body, detail.value?.provider_request_body)
})

// 响应体：只有客户端侧和 provider 侧都存在时才展示来源切换
const hasProviderResponseBody = computed(() => {
  return hasBodyContent(detail.value?.has_response_body, detail.value?.response_body)
    && hasBodyContent(detail.value?.has_client_response_body, detail.value?.client_response_body)
})

// 检测是否有两套响应头（客户端侧 + 提供商侧）
const hasProviderResponseHeaders = computed(() => {
  return !!(detail.value?.response_headers &&
         Object.keys(detail.value.response_headers).length > 0) &&
         !!(detail.value?.client_response_headers &&
         Object.keys(detail.value.client_response_headers).length > 0)
})

// 当前 Tab 是否支持对比模式
const canCompare = computed(() => {
  if (activeTab.value === 'request-headers') return hasProviderHeaders.value
  if (activeTab.value === 'response-headers') return hasProviderResponseHeaders.value
  return false
})

// 响应头 diff 统计（用于对比模式标题栏）
const responseHeaderStats = computed(() => {
  const counts = { added: 0, modified: 0, removed: 0, unchanged: 0 }
  if (!detail.value?.client_response_headers || !detail.value?.response_headers) return counts

  const clientHeaders = detail.value.client_response_headers as Record<string, unknown>
  const providerHeaders = detail.value.response_headers as Record<string, unknown>
  const clientKeys = new Set(Object.keys(clientHeaders))
  const providerKeys = new Set(Object.keys(providerHeaders))
  const allKeys = new Set([...clientKeys, ...providerKeys])

  for (const key of allKeys) {
    if (clientKeys.has(key) && providerKeys.has(key)) {
      counts[clientHeaders[key] === providerHeaders[key] ? 'unchanged' : 'modified']++
    } else if (clientKeys.has(key)) {
      counts.removed++
    } else {
      counts.added++
    }
  }
  return counts
})

// 是否显示客户端/提供商切换按钮
const showDataSourceToggle = computed(() => {
  if (activeTab.value === 'request-headers') return hasProviderHeaders.value
  if (activeTab.value === 'response-headers') return hasProviderResponseHeaders.value
  if (activeTab.value === 'request-body') return hasProviderRequestBody.value
  if (activeTab.value === 'response-body') return hasProviderResponseBody.value
  return false
})

// 当前高亮的数据源（对比模式下两个都不高亮）
const activeDataSource = computed(() => {
  if (['request-headers', 'response-headers'].includes(activeTab.value) && viewMode.value === 'compare') return null
  return dataSource.value
})

// 设置数据源（对比模式下切换数据源需退出对比）
function setDataSource(source: 'client' | 'provider') {
  dataSource.value = source
  if (['request-headers', 'response-headers'].includes(activeTab.value) && viewMode.value === 'compare') {
    viewMode.value = 'formatted'
  }
}

// 获取当前数据源的请求体数据
const currentRequestBody = computed(() => {
  if (!detail.value) return null
  if (dataSource.value === 'provider' && detail.value.provider_request_body) {
    return detail.value.provider_request_body
  }
  return detail.value.request_body
})

// 获取当前数据源的响应体数据
const currentResponseBody = computed(() => {
  if (!detail.value) return null
  if (dataSource.value === 'client' && detail.value.client_response_body) {
    return detail.value.client_response_body
  }
  return detail.value.response_body
})

const currentRequestBodyApiFormat = computed(() => {
  if (!detail.value) return undefined
  if (dataSource.value === 'provider') {
    return detail.value.endpoint_api_format || detail.value.api_format
  }
  return detail.value.api_format || detail.value.endpoint_api_format
})

const currentResponseBodyApiFormat = computed(() => {
  if (!detail.value) return undefined
  if (dataSource.value === 'provider') {
    return detail.value.endpoint_api_format || detail.value.api_format
  }
  return detail.value.api_format || detail.value.endpoint_api_format
})

// 获取当前数据源的请求头数据
const currentHeaderData = computed(() => {
  if (!detail.value) return null
  if (dataSource.value === 'client' && hasContent(detail.value.request_headers)) {
    return detail.value.request_headers
  }
  if (dataSource.value === 'provider' && hasContent(detail.value.provider_request_headers)) {
    return detail.value.provider_request_headers
  }
  // 回退：优先 client，再 provider
  if (hasContent(detail.value.request_headers)) {
    return detail.value.request_headers
  }
  return detail.value.provider_request_headers
})

const activeJsonPanelData = computed(() => {
  switch (activeTab.value) {
    case 'request-headers':
      return currentHeaderData.value
    case 'request-body':
      return currentRequestBody.value
    case 'response-headers':
      return currentResponseHeaderData.value
    case 'response-body':
      return currentResponseBody.value
    case 'metadata':
      return metadataPanelData.value
    default:
      return null
  }
})

const activeJsonPanelTitle = computed(() => {
  if (viewMode.value === 'compare') return '对比'
  if (supportsConversationView.value && contentViewMode.value === 'conversation') return 'Chat'
  return 'JSON'
})

// 请求体渲染结果
const requestRenderResult = computed<RenderResult>(() => {
  const body = currentRequestBody.value
  if (!body) {
    return { blocks: [], isStream: false }
  }
  if (activeTab.value !== 'request-body' || contentViewMode.value !== 'conversation') {
    return { blocks: [], isStream: false }
  }
  return renderRequest(body, currentResponseBody.value, currentRequestBodyApiFormat.value)
})

// 响应体渲染结果
const responseRenderResult = computed<RenderResult>(() => {
  const body = currentResponseBody.value
  if (!body) {
    return { blocks: [], isStream: false }
  }
  if (activeTab.value !== 'response-body' || contentViewMode.value !== 'conversation') {
    return { blocks: [], isStream: false }
  }
  return renderResponse(body, currentRequestBody.value, currentResponseBodyApiFormat.value)
})

// 当前 Tab 是否支持对话视图
const supportsConversationView = computed(() => {
  return ['request-body', 'response-body'].includes(activeTab.value)
})

// 当前对话数据是否有效（用于禁用按钮）
// 不依赖带 tab/mode 守卫的 renderResult，直接检查 body 数据是否存在
const hasValidConversation = computed(() => {
  if (activeTab.value === 'request-body') {
    return !!currentRequestBody.value
  }
  if (activeTab.value === 'response-body') {
    return !!currentResponseBody.value
  }
  return false
})

// 价格来源优先使用 v3 结算快照，旧 tiered_pricing.source 仅作回退。
const priceSourceLabel = computed(() => {
  if (!detail.value) return '历史定价'
  return resolveSettlementPricingSourceLabel(detail.value) ?? '历史定价'
})

const cacheCreationInputTokens5m = computed(() => {
  if (!detail.value) return 0
  return toNumber(detail.value.cache_creation_input_tokens_5m)
    ?? getNestedNumber(detail.value as unknown as JsonRecord, 'cache_creation_ephemeral_5m_input_tokens')
    ?? 0
})

const cacheCreationInputTokens1h = computed(() => {
  if (!detail.value) return 0
  return toNumber(detail.value.cache_creation_input_tokens_1h)
    ?? getNestedNumber(detail.value as unknown as JsonRecord, 'cache_creation_ephemeral_1h_input_tokens')
    ?? 0
})

const totalCacheCreationTokens = computed(() => {
  if (!detail.value) return 0
  const classified = cacheCreationInputTokens5m.value + cacheCreationInputTokens1h.value
  const total = detail.value.cache_creation_input_tokens || 0
  if (total === 0 && classified > 0) return classified
  return total
})

const effectiveInputPricePer1M = computed(() =>
  getNestedNumber(billingResolvedVariables.value, 'input_price_per_1m')
  ?? toNumber(detail.value?.input_price_per_1m)
)

const effectiveOutputPricePer1M = computed(() =>
  getNestedNumber(billingResolvedVariables.value, 'output_price_per_1m')
  ?? toNumber(detail.value?.output_price_per_1m)
)

const effectiveCacheCreationPricePer1M = computed(() =>
  getNestedNumber(billingResolvedVariables.value, 'cache_creation_price_per_1m')
  ?? toNumber(detail.value?.cache_creation_price_per_1m)
)

const effectiveCacheReadPricePer1M = computed(() =>
  getNestedNumber(billingResolvedVariables.value, 'cache_read_price_per_1m')
  ?? toNumber(detail.value?.cache_read_price_per_1m)
)

const effectivePricePerRequest = computed(() =>
  getNestedNumber(billingResolvedVariables.value, 'price_per_request')
  ?? toNumber(detail.value?.price_per_request)
  ?? 0,
)

const effectiveInputCost = computed(() =>
  getNestedNumber(billingCostBreakdown.value, 'input_cost')
  ?? toNumber(detail.value?.input_cost)
  ?? 0,
)

const effectiveOutputCost = computed(() =>
  getNestedNumber(billingCostBreakdown.value, 'output_cost')
  ?? toNumber(detail.value?.output_cost)
  ?? 0,
)

const effectiveCacheCreationCost = computed(() => {
  const snapshotCost = [
    getNestedNumber(billingCostBreakdown.value, 'cache_creation_uncategorized_cost'),
    getNestedNumber(billingCostBreakdown.value, 'cache_creation_ephemeral_5m_cost'),
    getNestedNumber(billingCostBreakdown.value, 'cache_creation_ephemeral_1h_cost'),
  ].reduce((sum, value) => sum + (value ?? 0), 0)
  if (snapshotCost > 0) return snapshotCost
  return toNumber(detail.value?.cache_creation_cost) ?? 0
})

const effectiveCacheReadCost = computed(() =>
  getNestedNumber(billingCostBreakdown.value, 'cache_read_cost')
  ?? toNumber(detail.value?.cache_read_cost)
  ?? 0,
)

// Fast/Priority 的倍率目录是由后端从 Standard 目录物化出来的。详情页的阶梯与
// 分项成本保留 Standard 基准值，倍率统一显示在 Token 计费标题中，避免把倍率
// 隐藏在每个单价和每个分项成本里。
function removeProcessingTierMultiplier(value: number): number {
  const multiplier = processingTierPriceMultiplier.value
  if (multiplier === null || multiplier <= 0) return value
  return value / multiplier
}

const displayInputCost = computed(() => removeProcessingTierMultiplier(effectiveInputCost.value))
const displayOutputCost = computed(() => removeProcessingTierMultiplier(effectiveOutputCost.value))
const displayCacheCreationCost = computed(() => removeProcessingTierMultiplier(effectiveCacheCreationCost.value))
const displayCacheReadCost = computed(() => removeProcessingTierMultiplier(effectiveCacheReadCost.value))

const effectiveRequestCost = computed(() => {
  const snapshotCost = getNestedNumber(billingCostBreakdown.value, 'request_cost')
  if (snapshotCost !== null) return snapshotCost
  if (effectivePricePerRequest.value > 0) {
    return toNumber(detail.value?.request_cost) ?? 0
  }
  return 0
})

const effectiveImageOutputCost = computed(() =>
  getNestedNumber(billingCostBreakdown.value, 'image_output_cost')
  ?? toNumber(detail.value?.image_output_cost)
  ?? 0,
)

const imageOutputCostTotal = computed(() => effectiveImageOutputCost.value)

const imageOutputPricePerImage = computed(() =>
  getNestedNumber(billingResolvedVariables.value, 'image_output_price_per_image'),
)

const imageOutputCount = computed(() =>
  getNestedNumber(billingResolvedDimensions.value, 'image_count')
  ?? getNestedNumber(traceRequestMetadata.value, 'billing_dimensions', 'image_count')
  ?? getNestedNumber(traceRequestMetadata.value, 'dimensions', 'image_count')
  ?? 0,
)

const imageOutputSize = computed(() =>
  getNestedString(billingResolvedDimensions.value, 'image_size')
  ?? getNestedString(traceRequestMetadata.value, 'billing_dimensions', 'image_size')
  ?? getNestedString(traceRequestMetadata.value, 'dimensions', 'image_size'),
)

const imageOutputQuality = computed(() =>
  getNestedString(billingResolvedDimensions.value, 'image_quality')
  ?? getNestedString(traceRequestMetadata.value, 'billing_dimensions', 'image_quality')
  ?? getNestedString(traceRequestMetadata.value, 'dimensions', 'image_quality'),
)

const imageOutputFormat = computed(() =>
  getNestedString(billingResolvedDimensions.value, 'image_output_format')
  ?? getNestedString(traceRequestMetadata.value, 'billing_dimensions', 'image_output_format')
  ?? getNestedString(traceRequestMetadata.value, 'dimensions', 'image_output_format'),
)

const imagePriceKey = computed(() => {
  const snapshotKey = getNestedString(billingResolvedDimensions.value, 'image_price_key')
  if (snapshotKey) return snapshotKey
  const fallbackKey = [imageOutputSize.value, imageOutputQuality.value].filter(Boolean).join(':')
  return fallbackKey || null
})

const imageOutputPriceBucket = computed(() =>
  getNestedString(billingResolvedDimensions.value, 'image_output_price_bucket'),
)

const imageOutputPixels = computed(() =>
  getNestedNumber(billingResolvedDimensions.value, 'image_pixels')
  ?? parseImageSizePixels(imageOutputSize.value),
)

const imageOutputPricingMode = computed(() =>
  getNestedString(billingResolvedDimensions.value, 'image_output_pricing_mode'),
)

const imageOutputPricingEnabled = computed(() =>
  getNestedValue(billingResolvedDimensions.value, 'image_output_pricing_enabled') === true
    || imageOutputPricingMode.value === 'matrix'
    || imageOutputPricingMode.value === 'pixel_tiers'
    || imageOutputPricingMode.value === 'per_image'
    || imageOutputCostTotal.value > 0,
)

const imageOutputMatrixEnabled = computed(() => {
  if (imageOutputPricingMode.value) return imageOutputPricingMode.value === 'matrix'
  return getNestedValue(billingResolvedDimensions.value, 'image_output_matrix_enabled') === true
})

const imageOutputRangeEnabled = computed(() => {
  if (imageOutputPricingMode.value) return imageOutputPricingMode.value === 'pixel_tiers'
  return getNestedValue(billingResolvedDimensions.value, 'image_output_range_enabled') === true
})

const imageOutputBillingLabel = computed(() => {
  if (imageOutputMatrixEnabled.value) return '矩阵计费'
  if (imageOutputRangeEnabled.value) return '像素区间'
  return '默认计费'
})

const imageOutputPricingDescriptor = computed(() => {
  if (imageOutputMatrixEnabled.value && imagePriceKey.value) return imagePriceKey.value

  const parts: string[] = []
  if (imageOutputPriceBucket.value && imageOutputPriceBucket.value !== 'default') {
    parts.push(formatImagePriceBucket(imageOutputPriceBucket.value))
  }
  const sizeQuality = [imageOutputSize.value, imageOutputQuality.value].filter(Boolean).join(' / ')
  if (sizeQuality) parts.push(sizeQuality)
  if (imageOutputRangeEnabled.value && imageOutputPixels.value !== null) {
    parts.push(formatPixels(imageOutputPixels.value))
  }
  if (parts.length > 0) return parts.join(' · ')
  if (imageOutputPriceBucket.value === 'default') return '默认价'
  return null
})

const hasImageBillingDetail = computed(() =>
  imageOutputPricingEnabled.value && (imageOutputCount.value > 0 || imageOutputCostTotal.value > 0),
)

const fallbackCacheTtlPricing = computed<CacheTTLPriceEntry[]>(() => {
  const tierPricing = normalizeCacheTtlPricing(billingTierInfo.value?.cache_ttl_pricing)
  if (tierPricing.length > 0) return tierPricing

  const rows: CacheTTLPriceEntry[] = []
  const cache5mCreationPrice = getNestedNumber(
    billingResolvedVariables.value,
    'cache_creation_ephemeral_5m_price_per_1m',
  )
  const cache1hCreationPrice = getNestedNumber(
    billingResolvedVariables.value,
    'cache_creation_ephemeral_1h_price_per_1m',
  )

  if (cache5mCreationPrice !== null) {
    rows.push({
      ttl_minutes: 5,
      cache_creation_price_per_1m: cache5mCreationPrice,
      cache_read_price_per_1m: effectiveCacheReadPricePer1M.value,
    })
  }
  if (cache1hCreationPrice !== null) {
    rows.push({
      ttl_minutes: 60,
      cache_creation_price_per_1m: cache1hCreationPrice,
      cache_read_price_per_1m: effectiveCacheReadPricePer1M.value,
    })
  }
  return rows
})

const activeCacheTtlMinutes = computed(() => {
  const snapshotTtl = getNestedNumber(billingSnapshot.value, 'resolved_dimensions', 'cache_ttl_minutes')
  if (snapshotTtl !== null && snapshotTtl > 0) {
    return Math.trunc(snapshotTtl)
  }
  if (cacheCreationInputTokens1h.value > 0 && cacheCreationInputTokens5m.value === 0) {
    return 60
  }
  if (cacheCreationInputTokens5m.value > 0 && cacheCreationInputTokens1h.value === 0) {
    return 5
  }
  return null
})

// 统一的阶梯显示数据
// 如果有 tiered_pricing，使用它；否则用历史价格构建单阶梯
function restoreBaseTierPricing(tier: PricingTierLike): PricingTierLike {
  const multiplier = processingTierPriceMultiplier.value
  if (multiplier === null || multiplier <= 0) return tier

  const restore = (value: number | null | undefined): number | null | undefined => {
    if (value === null || value === undefined) return value
    return value / multiplier
  }

  return {
    ...tier,
    input_price_per_1m: restore(tier.input_price_per_1m),
    output_price_per_1m: restore(tier.output_price_per_1m),
    cache_creation_price_per_1m: restore(tier.cache_creation_price_per_1m),
    cache_read_price_per_1m: restore(tier.cache_read_price_per_1m),
    cache_ttl_pricing: Array.isArray(tier.cache_ttl_pricing)
      ? tier.cache_ttl_pricing.map(entry => ({
          ...entry,
          cache_creation_price_per_1m: restore(entry.cache_creation_price_per_1m),
          cache_read_price_per_1m: restore(entry.cache_read_price_per_1m),
        }))
      : tier.cache_ttl_pricing,
  }
}

const displayTiers = computed(() => {
  if (!detail.value) return []

  // 优先展示结算快照中已解析的价格目录，旧字段仅作回退。
  const resolvedTiers = resolveSettlementPricingTiers(detail.value)
  if (resolvedTiers) {
    return (resolvedTiers as PricingTierLike[]).map(restoreBaseTierPricing)
  }

  // 否则用历史价格构建单阶梯（无上限）
  return [restoreBaseTierPricing({
    up_to: null,
    input_price_per_1m: effectiveInputPricePer1M.value ?? 0,
    output_price_per_1m: effectiveOutputPricePer1M.value ?? 0,
    cache_creation_price_per_1m: effectiveCacheCreationPricePer1M.value,
    cache_read_price_per_1m: effectiveCacheReadPricePer1M.value,
    cache_ttl_pricing: fallbackCacheTtlPricing.value,
  })]
})

// 当前命中的阶梯索引
const currentTierIndex = computed(() => {
  if (!detail.value) return 0

  // 如果有阶梯定价，使用它的 tier_index
  if (detail.value.tiered_pricing?.tier_index !== undefined) {
    return detail.value.tiered_pricing.tier_index
  }

  const snapshotTierIndex = getNestedNumber(billingSnapshot.value, 'tier_index')
  if (snapshotTierIndex !== null) {
    return Math.max(0, Math.trunc(snapshotTierIndex))
  }

  // 单阶梯时默认是第0阶
  return 0
})

const currentTier = computed<PricingTierLike | null>(() => {
  const tier = displayTiers.value[currentTierIndex.value]
  if (!tier || typeof tier !== 'object') return null
  return tier as PricingTierLike
})

const cacheCreationSummaryText = computed(() => {
  if (!detail.value) return '0'

  const total = totalCacheCreationTokens.value
  const cache5m = cacheCreationInputTokens5m.value
  const cache1h = cacheCreationInputTokens1h.value

  if (cache5m <= 0 && cache1h <= 0) {
    return formatNumber(total)
  }

  const parts: string[] = []
  if (cache5m > 0) parts.push(`5min ${formatNumber(cache5m)}`)
  if (cache1h > 0) parts.push(`1h ${formatNumber(cache1h)}`)
  const remaining = Math.max(0, total - cache5m - cache1h)
  if (remaining > 0) parts.push(`其他 ${formatNumber(remaining)}`)
  return parts.join(' + ')
})

const cacheCreationSplitRows = computed(() => {
  if (!detail.value) return []

  const rows: Array<{
    key: string
    label: string
    tokens: number
    pricePer1M: number | null
    cost: number | null
  }> = []

  const cache5m = cacheCreationInputTokens5m.value
  const cache1h = cacheCreationInputTokens1h.value

  if (cache5m > 0) {
    const pricePer1M = getActiveCachePriceForTTL(5, 'cache_creation_price_per_1m')
    rows.push({
      key: '5m',
      label: '5min 创建',
      tokens: cache5m,
      pricePer1M,
      cost: pricePer1M !== null ? (cache5m * pricePer1M) / 1_000_000 : null,
    })
  }

  if (cache1h > 0) {
    const pricePer1M = getActiveCachePriceForTTL(60, 'cache_creation_price_per_1m')
    rows.push({
      key: '1h',
      label: '1h 创建',
      tokens: cache1h,
      pricePer1M,
      cost: pricePer1M !== null ? (cache1h * pricePer1M) / 1_000_000 : null,
    })
  }

  return rows
})

// 总输入上下文（输入 + 缓存创建 + 缓存读取）
const _totalInputContext = computed(() => {
  if (!detail.value) return 0

  // 优先使用 tiered_pricing 中的值
  if (detail.value.tiered_pricing?.total_input_context !== undefined) {
    return detail.value.tiered_pricing.total_input_context
  }

  // 否则手动计算
  const input = detail.value.tokens?.input || detail.value.input_tokens || 0
  const cacheCreation = totalCacheCreationTokens.value
  const cacheRead = detail.value.cache_read_input_tokens || 0
  return input + cacheCreation + cacheRead
})

// Token 费用总计
const tokenCostTotal = computed(() => {
  if (!detail.value) return 0
  return effectiveInputCost.value
    + effectiveOutputCost.value
    + effectiveCacheCreationCost.value
    + effectiveCacheReadCost.value
})

const tokenCostBaseTotal = computed(() => (
  displayInputCost.value
  + displayOutputCost.value
  + displayCacheCreationCost.value
  + displayCacheReadCost.value
))

// 按次计费费用（非视频任务时）
const perRequestCost = computed(() => {
  if (!detail.value) return 0
  // 视频任务的 request_cost 实际上是视频费用，不算按次
  if (detail.value.video_billing) return 0
  return effectiveRequestCost.value
})

// 视频/图像/音频费用
const videoCostTotal = computed(() => {
  if (!detail.value?.video_billing) return 0
  return detail.value.video_billing.video_cost
    || detail.value.video_billing.cost
    || detail.value.request_cost
    || 0
})

// 是否有 Token 费用（用于决定是否显示 Token 计费区块）
const hasTokenCost = computed(() => {
  if (!detail.value) return false
  const inputTokens = detail.value.tokens?.input || detail.value.input_tokens || 0
  const outputTokens = detail.value.tokens?.output || detail.value.output_tokens || 0
  const cacheCreation = totalCacheCreationTokens.value
  const cacheRead = detail.value.cache_read_input_tokens || 0
  return (inputTokens + outputTokens + cacheCreation + cacheRead) > 0 || tokenCostTotal.value > 0
})

const tabs = [
  { name: 'request-headers', label: '请求头' },
  { name: 'request-body', label: '请求体' },
  { name: 'response-headers', label: '响应头' },
  { name: 'response-body', label: '响应体' },
  { name: 'metadata', label: '元数据' },
]

// 判断数据是否有实际内容（非空对象/数组）
function hasContent(data: unknown): boolean {
  if (data === null || data === undefined) return false
  if (typeof data === 'object') {
    return Object.keys(data as object).length > 0
  }
  return true
}

function hasBodyLoadErrors(errors: RequestDetail['body_load_errors'] | null | undefined): boolean {
  return Boolean(
    errors?.request_body ||
    errors?.provider_request_body ||
    errors?.response_body ||
    errors?.client_response_body
  )
}

function toFiniteNumber(value: unknown): number | null {
  const num = Number(value)
  return Number.isFinite(num) ? num : null
}

function getTierCachePriceForTTL(
  tier: PricingTierLike | null | undefined,
  ttlMinutes: number,
  priceKey: 'cache_creation_price_per_1m' | 'cache_read_price_per_1m',
): number | null {
  const fallback = toFiniteNumber(tier?.[priceKey])
  const ttlPricing = Array.isArray(tier?.cache_ttl_pricing)
    ? tier.cache_ttl_pricing
        .filter((entry): entry is CacheTTLPriceEntry => !!entry && typeof entry === 'object')
        .sort((a, b) => Number(a.ttl_minutes || 0) - Number(b.ttl_minutes || 0))
    : []

  if (ttlPricing.length === 0) return fallback

  const matched = ttlPricing.find((entry) => Number(entry.ttl_minutes || 0) === ttlMinutes)
  const price = toFiniteNumber(matched?.[priceKey])
  return price ?? fallback
}

function getTierMatchedCachePricingEntry(
  tier: PricingTierLike | null | undefined,
  ttlMinutes: number,
): CacheTTLPriceEntry | null {
  const ttlPricing = Array.isArray(tier?.cache_ttl_pricing)
    ? tier.cache_ttl_pricing
        .filter((entry): entry is CacheTTLPriceEntry => !!entry && typeof entry === 'object')
        .sort((a, b) => Number(a.ttl_minutes || 0) - Number(b.ttl_minutes || 0))
    : []

  if (ttlPricing.length === 0) return null
  return ttlPricing.find((entry) => Number(entry.ttl_minutes || 0) === ttlMinutes) ?? null
}

function hasTierCacheCreationSplitPricing(tier: PricingTierLike | null | undefined): boolean {
  const ttlPricing = Array.isArray(tier?.cache_ttl_pricing) ? tier.cache_ttl_pricing : []
  return ttlPricing.some((entry) =>
    Number(entry?.ttl_minutes || 0) >= 60
    && toFiniteNumber(entry?.cache_creation_price_per_1m) !== null,
  )
}

function formatCacheTtlLabel(ttlMinutes: number | null | undefined): string {
  if (!ttlMinutes || ttlMinutes <= 0) return '缓存创建'
  if (ttlMinutes >= 60) return '缓存创建(1h)'
  if (ttlMinutes <= 5) return '缓存创建(5min)'
  return `缓存创建(${ttlMinutes}min)`
}

function getTierActiveCacheCreationDisplay(
  tier: PricingTierLike | null | undefined,
): { label: string, price: number } | null {
  if (hasTierCacheCreationSplitPricing(tier)) {
    const activeTtl = activeCacheTtlMinutes.value
    if (activeTtl !== null) {
      const matchedEntry = getTierMatchedCachePricingEntry(tier, activeTtl)
      const matchedPrice = getTierCachePriceForTTL(tier, activeTtl, 'cache_creation_price_per_1m')
      if (matchedEntry && matchedPrice !== null) {
        return {
          label: formatCacheTtlLabel(matchedEntry.ttl_minutes),
          price: matchedPrice,
        }
      }
      const fallbackPrice = toFiniteNumber(tier?.cache_creation_price_per_1m)
      if (fallbackPrice !== null) {
        return {
          label: formatCacheTtlLabel(activeTtl),
          price: fallbackPrice,
        }
      }
    }
  }

  const fallbackPrice = toFiniteNumber(tier?.cache_creation_price_per_1m)
  if (fallbackPrice === null) return null
  return {
    label: '缓存创建',
    price: fallbackPrice,
  }
}

function getActiveCachePriceForTTL(
  ttlMinutes: number,
  priceKey: 'cache_creation_price_per_1m' | 'cache_read_price_per_1m',
): number | null {
  const tierPrice = getTierCachePriceForTTL(currentTier.value, ttlMinutes, priceKey)
  if (tierPrice !== null) return tierPrice

  if (priceKey === 'cache_creation_price_per_1m') {
    return toFiniteNumber(detail.value?.cache_creation_price_per_1m)
  }
  return toFiniteNumber(detail.value?.cache_read_price_per_1m)
}

function getTierActiveCacheReadPrice(tier: PricingTierLike | null | undefined): number | null {
  const activeTtl = activeCacheTtlMinutes.value
  if (activeTtl !== null) {
    const matchedPrice = getTierCachePriceForTTL(tier, activeTtl, 'cache_read_price_per_1m')
    if (matchedPrice !== null) return matchedPrice
  }

  return toFiniteNumber(tier?.cache_read_price_per_1m)
    ?? effectiveCacheReadPricePer1M.value
    ?? null
}

function shouldShowCacheReadPrice(tier: PricingTierLike | null | undefined): boolean {
  return getTierActiveCacheReadPrice(tier) !== null
}

function getDefaultDataSourceForTab(tab: string): 'client' | 'provider' {
  if (!detail.value) {
    if (['request-headers', 'request-body'].includes(tab)) return 'provider'
    if (['response-headers', 'response-body'].includes(tab)) return 'client'
    return dataSource.value
  }

  if (tab === 'request-headers') {
    if (hasContent(detail.value.provider_request_headers)) return 'provider'
    if (hasContent(detail.value.request_headers)) return 'client'
    return 'provider'
  }

  if (tab === 'request-body') {
    if (hasBodyContent(detail.value.has_provider_request_body, detail.value.provider_request_body)) return 'provider'
    if (hasBodyContent(detail.value.has_request_body, detail.value.request_body)) return 'client'
    return 'provider'
  }

  if (tab === 'response-headers') {
    if (hasContent(detail.value.client_response_headers)) return 'client'
    if (hasContent(detail.value.response_headers)) return 'provider'
    return 'client'
  }

  if (tab === 'response-body') {
    if (hasBodyContent(detail.value.has_client_response_body, detail.value.client_response_body)) return 'client'
    if (hasBodyContent(detail.value.has_response_body, detail.value.response_body)) return 'provider'
    return 'client'
  }

  return dataSource.value
}

// 获取当前数据源的响应头数据
const currentResponseHeaderData = computed(() => {
  if (!detail.value) return null
  if (dataSource.value === 'client' && hasContent(detail.value.client_response_headers)) {
    return detail.value.client_response_headers
  }
  if (dataSource.value === 'provider' && hasContent(detail.value.response_headers)) {
    return detail.value.response_headers
  }
  // 回退：优先 client，再 provider
  if (hasContent(detail.value.client_response_headers)) {
    return detail.value.client_response_headers
  }
  return detail.value.response_headers
})

// 根据实际数据决定显示哪些 Tab
const visibleTabs = computed(() => {
  if (!detail.value) return []

  return tabs.filter(tab => {
    switch (tab.name) {
      case 'request-headers':
        return hasContent(detail.value?.request_headers) || hasContent(detail.value?.provider_request_headers)
      case 'request-body':
        return hasRequestBodyAvailable.value
      case 'response-headers':
        return hasContent(detail.value?.response_headers) || hasContent(detail.value?.client_response_headers)
      case 'response-body':
        return hasResponseBodyAvailable.value
      case 'metadata':
        return hasContent(metadataPanelData.value)
      default:
        return false
    }
  })
})

watch([() => props.isOpen, () => props.requestId], async ([isOpen, requestId]) => {
  if (isOpen && requestId) {
    if (!detailMatchesRequestId(detail.value, requestId)) {
      detail.value = null
    }
    await loadDetail(requestId)
  } else if (!isOpen) {
    stopAutoRefresh()
    showTimeline.value = false
    clearTimelineMountTimer()
    bodyLoading.value = false
    bodyLoadError.value = null
    bodiesLoadedForRequestId.value = null
  }
})

function detailMatchesRequestId(
  candidate: RequestDetail | null | undefined,
  requestId: string | null | undefined,
): boolean {
  if (!candidate || !requestId) return false
  return candidate.id === requestId || candidate.request_id === requestId
}

async function ensureBodyContentLoaded() {
  if (!props.requestId || !detail.value) return

  const cacheKey = detail.value.request_id || detail.value.id
  if (bodiesLoadedForRequestId.value === cacheKey || bodyLoading.value) return
  if (!hasRequestBodyAvailable.value && !hasResponseBodyAvailable.value) return

  const requestId = ++bodyLoadRequestId
  bodyLoading.value = true
  bodyLoadError.value = null
  try {
    const response = await dashboardApi.getRequestDetail(props.requestId, { includeBodies: true })
    if (requestId !== bodyLoadRequestId || !detail.value) return
    detail.value = {
      ...detail.value,
      request_body: response.request_body,
      provider_request_body: response.provider_request_body,
      response_body: response.response_body,
      client_response_body: response.client_response_body,
      has_request_body: response.has_request_body,
      has_provider_request_body: response.has_provider_request_body,
      has_response_body: response.has_response_body,
      has_client_response_body: response.has_client_response_body,
      body_load_errors: response.body_load_errors,
      request_error: response.request_error,
      upstream_error: response.upstream_error,
      client_error: response.client_error,
      failure_summary: response.failure_summary,
      errors: response.errors,
      error_flow: response.error_flow,
      scheduling_failure: response.scheduling_failure,
    }
    if (!hasBodyLoadErrors(response.body_load_errors)) {
      bodiesLoadedForRequestId.value = cacheKey
    }
  } catch (err) {
    if (requestId !== bodyLoadRequestId) return
    log.error('Failed to load request bodies:', err)
    bodyLoadError.value = '正文内容加载失败，请重试'
  } finally {
    if (requestId === bodyLoadRequestId) {
      bodyLoading.value = false
    }
  }
}

function retryBodyContentLoad() {
  bodyLoadError.value = null
  void ensureBodyContentLoaded()
}

async function loadDetail(id: string, silent = false) {
  if (silent && loadDetailInFlight) {
    return
  }
  const requestId = ++loadDetailRequestId
  loadDetailInFlight = true
  if (!silent) {
    if (!detailMatchesRequestId(detail.value, id)) {
      detail.value = null
    }
    loading.value = true
    historicalPricing.value = null
    timelineLoaded.value = false
    timelineHasTrace.value = false
    showTimeline.value = false
    clearTimelineMountTimer()
    ++bodyLoadRequestId
    bodyLoading.value = false
    bodyLoadError.value = null
  }
  error.value = null
  try {
    const response = await dashboardApi.getRequestDetail(id, {
      includeBodies: false,
      cacheTtlMs: silent ? 0 : 5_000
    })
    if (requestId !== loadDetailRequestId) return

    const previousDetail = detail.value
    const prevKey = previousDetail?.request_id || previousDetail?.id
    const currKey = response.request_id || response.id
    const sameRequest = !!prevKey && prevKey === currKey
    const nextDetail: RequestDetail = {
      ...response,
      status: resolveRequestStateStatusFromDetail(response) ?? response.status,
      request_body: sameRequest ? previousDetail?.request_body : undefined,
      provider_request_body: sameRequest ? previousDetail?.provider_request_body : undefined,
      response_body: sameRequest ? previousDetail?.response_body : undefined,
      client_response_body: sameRequest ? previousDetail?.client_response_body : undefined,
      request_error: response.request_error,
      upstream_error: response.upstream_error,
      client_error: response.client_error,
      failure_summary: response.failure_summary,
      errors: response.errors,
      error_flow: response.error_flow,
      scheduling_failure: response.scheduling_failure,
    }
    detailModelRevision.value = ++modelSnapshotRevision
    detail.value = nextDetail
    bodiesLoadedForRequestId.value = sameRequest ? bodiesLoadedForRequestId.value : null
    emitDetailRequestState(nextDetail)

    // 首次加载时优先停留在轻量 tab，避免默认触发大 body 加载
    if (!silent) {
      const visibleTabNames = visibleTabs.value.map(t => t.name)
      if (visibleTabNames.includes('request-headers')) {
        activeTab.value = 'request-headers'
      } else if (visibleTabNames.includes('response-headers')) {
        activeTab.value = 'response-headers'
      } else if (visibleTabNames.includes('metadata')) {
        activeTab.value = 'metadata'
      } else if (visibleTabNames.includes('request-body')) {
        activeTab.value = 'request-body'
      } else if (visibleTabNames.includes('response-body')) {
        activeTab.value = 'response-body'
      } else if (visibleTabNames.length > 0) {
        activeTab.value = visibleTabNames[0]
      }
      scheduleTimelineMount()
    }

    // 根据当前 Tab 的数据可用性自动选择默认数据源
    dataSource.value = getDefaultDataSourceForTab(activeTab.value)

    // 使用请求记录中保存的历史价格
    if (detail.value.input_price_per_1m || detail.value.output_price_per_1m || detail.value.price_per_request) {
      historicalPricing.value = {
        input_price: detail.value.input_price_per_1m ? detail.value.input_price_per_1m.toFixed(4) : 'N/A',
        output_price: detail.value.output_price_per_1m ? detail.value.output_price_per_1m.toFixed(4) : 'N/A',
        cache_creation_price: detail.value.cache_creation_price_per_1m ? detail.value.cache_creation_price_per_1m.toFixed(4) : 'N/A',
        cache_read_price: detail.value.cache_read_price_per_1m ? detail.value.cache_read_price_per_1m.toFixed(4) : 'N/A',
        request_price: detail.value.price_per_request ? detail.value.price_per_request.toFixed(4) : 'N/A'
      }
    }

    // 静默刷新时同步刷新链路追踪
    if (silent) {
      timelineRef.value?.refresh()
    }

    if (props.isOpen) {
      if (isRequestCompleted()) {
        stopAutoRefresh()
      } else if (!silent) {
        startAutoRefresh()
      }
    }
  } catch (err) {
    if (requestId !== loadDetailRequestId) return
    log.error('Failed to load request detail:', err)
    if (!silent) {
      error.value = '加载请求详情失败'
    }
  } finally {
    if (!silent && requestId === loadDetailRequestId) {
      loading.value = false
    }
    if (requestId === loadDetailRequestId) {
      loadDetailInFlight = false
    }
  }
}

function handleClose() {
  stopAutoRefresh()
  emit('close')
}

function isRequestCompleted(): boolean {
  if (!detail.value?.status) return true
  const displayStatus = resolveDisplayRequestStatus(detail.value)
  return displayStatus !== 'pending' && displayStatus !== 'streaming'
}

function stopAutoRefresh() {
  if (autoRefreshTimer.value) {
    clearInterval(autoRefreshTimer.value)
    autoRefreshTimer.value = null
  }
  autoRefreshing.value = false
}

function startAutoRefresh() {
  if (autoRefreshTimer.value) {
    autoRefreshing.value = true
    return
  }
  if (!isPageVisible.value || !props.requestId || !props.isOpen) {
    autoRefreshing.value = false
    return
  }
  autoRefreshing.value = true
  autoRefreshTimer.value = setInterval(async () => {
    if (!isPageVisible.value || !props.requestId || !props.isOpen) {
      stopAutoRefresh()
      return
    }
    await loadDetail(props.requestId, true)
    if (isRequestCompleted()) {
      stopAutoRefresh()
    }
  }, AUTO_REFRESH_INTERVAL_MS)
}

async function refreshDetail() {
  if (!props.requestId) return

  // 已完成：单次静默刷新
  if (isRequestCompleted()) {
    await loadDetail(props.requestId, true)
    return
  }

  // 未完成：如果已在自动刷新则停止，否则启动
  if (autoRefreshing.value) {
    stopAutoRefresh()
    return
  }

  autoRefreshing.value = true
  await loadDetail(props.requestId, true)

  // 加载后可能已经完成了
  if (isRequestCompleted()) {
    stopAutoRefresh()
    return
  }

  startAutoRefresh()
}

function handleVisibilityChange() {
  isPageVisible.value = !document.hidden
  if (!isPageVisible.value) {
    stopAutoRefresh()
  }
}

onMounted(() => {
  document.addEventListener('visibilitychange', handleVisibilityChange)
})

onBeforeUnmount(() => {
  document.removeEventListener('visibilitychange', handleVisibilityChange)
  stopAutoRefresh()
  clearTimelineMountTimer()
  loadDetailRequestId += 1
  loadDetailInFlight = false
})

function formatDateTime(dateStr: string | null | undefined): string {
  if (!dateStr) return 'N/A'
  const date = new Date(dateStr)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

// 格式化视频/音频时长
function formatDuration(seconds: number): string {
  if (seconds < 60) {
    return `${seconds.toFixed(1)}s`
  }
  const mins = Math.floor(seconds / 60)
  const secs = seconds % 60
  if (mins < 60) {
    return `${mins}m ${secs.toFixed(0)}s`
  }
  const hours = Math.floor(mins / 60)
  const remainMins = mins % 60
  return `${hours}h ${remainMins}m`
}

// 获取任务类型标签
function getTaskTypeLabel(taskType: string): string {
  switch (taskType) {
    case 'video':
      return '视频生成'
    case 'image':
      return '图像生成'
    case 'audio':
      return '音频生成'
    default:
      return taskType
  }
}

function formatNumber(num: number): string {
  return formatTokens(num)
}

function parseImageSizePixels(size: string | null): number | null {
  if (!size) return null
  const normalized = size.trim().toLowerCase().replace(/\s+/g, '').replace(/×/g, 'x')
  const [widthText, heightText] = normalized.split('x')
  const width = Number(widthText)
  const height = Number(heightText)
  if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) return null
  return Math.trunc(width * height)
}

function formatImagePriceBucket(bucket: string): string {
  if (bucket === 'default') return '默认价'
  if (bucket === 'unbounded') return '无上限'
  const match = bucket.match(/^<=([0-9]+)px$/)
  if (match) return `<= ${formatPixels(Number(match[1]))}`
  return bucket
}

function formatPixels(value: number): string {
  return `${formatCompactNumber(value)} px`
}

// 格式化价格，修复浮点数精度问题
function formatPrice(price: number): string {
  // 处理浮点数精度问题，最多保留4位小数，去掉尾部的0
  const fixed = price.toFixed(4)
  return parseFloat(fixed).toString()
}

// 获取阶梯范围文本
function getTierRangeText(tier: { up_to?: number | null }, index: number, tiers: Array<{ up_to?: number | null }>): string {
  const prevTier = index > 0 ? tiers[index - 1] : null
  const start = prevTier?.up_to ? prevTier.up_to + 1 : 0

  if (tier.up_to) {
    if (start === 0) {
      return `0 ~ ${formatNumber(tier.up_to)} tokens`
    }
    return `${formatNumber(start)} ~ ${formatNumber(tier.up_to)} tokens`
  }
  // 无上限的情况
  return `> ${formatNumber(start)} tokens`
}

/** 将 RenderResult 格式化为可复制的文本 */
function formatRenderResultAsText(result: RenderResult): string {
  if (result.error) {
    return `[Error] ${result.error}`
  }

  const parts: string[] = []

  for (const block of result.blocks) {
    const text = formatBlockAsText(block)
    if (text) {
      parts.push(text)
    }
  }

  return parts.join('\n\n---\n\n')
}

/** 将单个 RenderBlock 格式化为文本 */
function formatBlockAsText(block: RenderBlock): string {
  switch (block.type) {
    case 'text':
      return block.content
    case 'code':
      return block.language
        ? `\`\`\`${block.language}\n${block.code}\n\`\`\``
        : `\`\`\`\n${block.code}\n\`\`\``
    case 'collapsible':
      return `[${block.title}]\n${block.content.map(formatBlockAsText).filter(Boolean).join('\n')}`
    case 'error':
      return `[Error${block.code ? `: ${block.code}` : ''}] ${block.message}`
    case 'image':
      return `[Image: ${block.mimeType || block.alt || 'unknown'}]`
    case 'tool_use':
      return `[Tool: ${block.toolName}]\n${block.input}`
    case 'tool_result':
      return `[Tool Result${block.isError ? ' (Error)' : ''}]\n${block.content}`
    case 'message': {
      const roleLabel = block.roleLabel || block.role
      const contentText = block.content.map(formatBlockAsText).filter(Boolean).join('\n\n')
      return `[${roleLabel}]\n${contentText}`
    }
    case 'container':
      return block.children.map(formatBlockAsText).filter(Boolean).join('\n')
    case 'label':
      return `${block.label}: ${block.value}`
    case 'divider':
      return '---'
    case 'badge':
      return ''
    default:
      return ''
  }
}

// 复制内容（支持 JSON 和对话两种模式）
function copyContent(tabName: string) {
  if (!detail.value) return
  if (viewMode.value === 'compare') return

  let textToCopy = ''

  // 对话视图模式：复制格式化的对话文本
  if (contentViewMode.value === 'conversation') {
    if (tabName === 'request-body') {
      textToCopy = formatRenderResultAsText(requestRenderResult.value)
    } else if (tabName === 'response-body') {
      textToCopy = formatRenderResultAsText(responseRenderResult.value)
    }
  } else {
    // JSON 视图模式：复制原始 JSON
    let data: unknown = null
    switch (tabName) {
      case 'request-headers':
        data = dataSource.value === 'provider'
          ? detail.value.provider_request_headers
          : detail.value.request_headers
        break
      case 'request-body':
        data = currentRequestBody.value
        break
      case 'response-headers':
        data = currentResponseHeaderData.value
        break
      case 'response-body':
        data = currentResponseBody.value
        break
      case 'metadata':
        data = metadataPanelData.value
        break
    }
    if (data) {
      textToCopy = JSON.stringify(data, null, 2)
    }
  }

  if (textToCopy) {
    copyToClipboard(textToCopy, false)
    copiedStates.value[tabName] = true
    setTimeout(() => {
      copiedStates.value[tabName] = false
    }, 2000)
  }
}

// 切换内容视图模式
function toggleContentView() {
  if (contentViewMode.value === 'json') {
    if (hasValidConversation.value) {
      contentViewMode.value = 'conversation'
    }
  } else {
    contentViewMode.value = 'json'
  }
}

// 复制 cURL 命令
async function copyCurlCommand() {
  if (!props.requestId || curlCopying.value) return
  curlCopying.value = true
  try {
    const data = await dashboardApi.getCurlData(props.requestId)
    if (data.curl) {
      copyToClipboard(data.curl, false)
      curlCopied.value = true
      setTimeout(() => { curlCopied.value = false }, 2000)
    }
  } catch (err) {
    log.error('Failed to generate cURL command:', err)
  } finally {
    curlCopying.value = false
  }
}

// 打开请求回放对话框
function openReplayDialog() {
  replayDialogOpen.value = true
}

// 请求头合并对比逻辑
interface HeaderEntry {
  key: string
  status: 'added' | 'modified' | 'removed' | 'unchanged'
  originalValue?: unknown
  newValue?: unknown
}

const mergedHeaderEntries = computed(() => {
  if (!detail.value?.request_headers && !detail.value?.provider_request_headers) {
    return []
  }

  const clientHeaders = detail.value?.request_headers || {}
  const providerHeaders = detail.value?.provider_request_headers || {}

  const clientKeys = new Set(Object.keys(clientHeaders))
  const providerKeys = new Set(Object.keys(providerHeaders))
  const allKeys = new Set([...clientKeys, ...providerKeys])

  const entries: HeaderEntry[] = []

  for (const key of Array.from(allKeys).sort()) {
    const entry: HeaderEntry = { key, status: 'unchanged' }

    if (clientKeys.has(key) && providerKeys.has(key)) {
      if (clientHeaders[key] !== providerHeaders[key]) {
        entry.status = 'modified'
        entry.originalValue = clientHeaders[key]
        entry.newValue = providerHeaders[key]
      } else {
        entry.status = 'unchanged'
        entry.originalValue = clientHeaders[key]
      }
    } else if (clientKeys.has(key)) {
      entry.status = 'removed'
      entry.originalValue = clientHeaders[key]
    } else {
      entry.status = 'added'
      entry.newValue = providerHeaders[key]
    }

    entries.push(entry)
  }

  return entries
})

const headerStats = computed(() => {
  const counts = {
    added: 0,
    modified: 0,
    removed: 0,
    unchanged: 0
  }

  for (const entry of mergedHeaderEntries.value) {
    counts[entry.status]++
  }

  return counts
})

// 添加 ESC 键监听
useEscapeKey(() => {
  if (props.isOpen) {
    handleClose()
  }
}, {
  disableOnInput: true,
  once: false
})
</script>

<style scoped>
/* 抽屉过渡动画 */
.drawer-enter-active,
.drawer-leave-active {
  transition: opacity 0.3s ease;
}

.drawer-enter-active .relative,
.drawer-leave-active .relative {
  transition: transform 0.3s ease;
}

.drawer-enter-from,
.drawer-leave-to {
  opacity: 0;
}

.drawer-enter-from .relative {
  transform: translateX(100%);
}

.drawer-leave-to .relative {
  transform: translateX(100%);
}

.drawer-enter-to .relative,
.drawer-leave-from .relative {
  transform: translateX(0);
}

/* 内容区融合：子组件的 Card 不再需要自己的边框和圆角，与表头栏融为一体 */
.content-block :deep(.rounded-2xl) {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
</style>

<style>
/* 滚动条始终预留空间，保持宽度稳定 */
.scrollbar-stable {
  scrollbar-gutter: stable;
}

/* Webkit 浏览器滚动条样式 */
.scrollbar-stable::-webkit-scrollbar {
  width: 8px;
}

.scrollbar-stable::-webkit-scrollbar-track {
  background: transparent;
}

.scrollbar-stable::-webkit-scrollbar-thumb {
  background-color: rgba(128, 128, 128, 0.5);
  border-radius: 4px;
}

.scrollbar-stable::-webkit-scrollbar-thumb:hover {
  background-color: rgba(128, 128, 128, 0.7);
}
</style>