fix(frontend): display time-based tier pricing correctly

[P2K0]

⚠️ 提交说明 / PR Notice

English template: .github/PULL_REQUEST_TEMPLATE/en.md

Important

描述及代码由 AI 辅助完成。提交前请人工审阅，并对内容的准确性与完整性负责。

🔗 关联任务 / Related Issue

Closes #7268

🚀 变更类型 / Type of change

• 🐛 Bug 修复 (Bug fix)
• ✨ 新功能 (New feature)
• ⚡ 性能优化 / 重构 (Refactor)
• 📝 文档更新 (Documentation)

📝 变更描述 / Description

修复时间分段计费表达式在模型价格详情中无法正确展示的问题。

原先档位解析仅支持 p、c、len 的数值比较，包含 hour("Asia/Shanghai") 的合法表达式会被误判为“特殊计费表达式”，无法展示结构化价格。

本次复用已有时间条件解析和格式化逻辑，正确展示高峰、空闲两档价格，并将时段统一显示为 09:00 ~ 18:00 (Asia/Shanghai)，去掉冗余的“小时”前缀，补齐小时位数。跨午夜范围保持原有起止顺序。

改动仅涉及前端解析、展示及回归测试，不修改后端结算逻辑。

📸 运行证明 / Proof of Work

复现步骤：

1. 为模型启用表达式计费，配置以下表达式。
2. 打开 /pricing，查看该模型的动态计费详情。
3. 修复前显示“特殊计费表达式 / 无法解析为结构化价格”；修复后展示两档价格及时间条件。

hour("Asia/Shanghai") >= 9 && hour("Asia/Shanghai") < 18 ? tier("高峰时段", p * 3.5 + cr * 0.15 + c * 9.5) : tier("空闲时段", p * 2 + cr * 0.1 + c * 5)

预期价格，单位为 USD / 1M tokens：

档位	生效时间（Asia/Shanghai）	输入	输出	缓存读取
高峰时段	09:00（含）至 18:00（不含）	3.5	9.5	0.15
空闲时段	其余时间	2	5	0.1

验证结果：

• 在上游原始提交 4fc9d1f1f 的解析器中复现返回空数组；修复后返回两档及全部正确单价。
• 相关 3 个测试文件共 44 个测试通过；类型检查、目标文件 lint 和差异空白检查通过。
• 组件测试覆盖完整/紧凑模式、命中档位及 21:00 ~ 06:00 (UTC) 跨午夜显示。
• Playwright 模拟页面验证桌面和移动端展示，移动端无横向溢出。截图已保留，待上传。
• 未执行真实请求的跨时刻结算验证，本次验证针对前端展示。

✅ 提交前检查项 / Checklist

• 人工确认: 无论描述是否由 AI 生成，我已审阅全部内容，并声明对其准确性与完整性负责。
• 非重复提交: 已搜索现有 Issues 与 PRs，未发现直接覆盖本次复现的重复修复。
• 新功能关联 Issue: 不适用，本次为 Bug 修复，已关联 Time-based billing tiers are not displayed correctly on the pricing page #7268。
• 事前沟通: 不适用，本次为范围明确的前端 Bug 修复。
• 功能范围: 本 PR 不是 Coding Plan、逆向渠道、第三方封装接口，也不是对 Codex 渠道类型的改动。
• 范围聚焦: 本 PR 为一项聚焦改动，未包含无关代码。
• 本地验证: 已运行相关测试并完成前端模拟页面验证。
• 安全合规: 代码中无敏感凭据，且符合项目代码规范。

Summary by CodeRabbit

• New Features

  • Pricing rules can now display request-based conditions, including parameters, headers, and time ranges.
  • Time ranges are shown in a clearer zero-padded clock format, such as 09:00 ~ 18:00, with timezone information preserved.
  • Overnight ranges retain their configured order, such as 21:00 ~ 06:00.

• Bug Fixes

  • Improved parsing and display of time-conditioned tier pricing.
  • Malformed pricing conditions are now handled more consistently.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: ad67ea55-dd60-40e0-91bb-17df2326751f

📥 Commits

Reviewing files that changed from the base of the PR and between 4af902d and e9918e0.

📒 Files selected for processing (1)

• web/src/features/dashboard/components/overview/__tests__/setup-guide.test.tsx

Included review availability: Your plan provides up to 10 included reviews per hour; 8 remain after this review.

---

Walkthrough

Changes

Time-based pricing display

Layer / File(s)	Summary
Parse time-based tier conditions web/src/features/pricing/lib/billing-expr.ts, web/src/features/pricing/lib/__tests__/time-rule-expr.test.ts	Tier parsing supports request conditions, including time ranges. Tests verify parsed labels, prices, and time metadata.
Render time-based pricing tiers web/src/features/pricing/components/dynamic-pricing-breakdown.tsx, web/src/features/pricing/__tests__/dynamic-pricing-breakdown.test.tsx, web/src/features/dashboard/components/overview/__tests__/setup-guide.test.tsx	The breakdown formats hour ranges as zero-padded clock times with timezones. Tests cover compact, full, mobile, desktop, matched, overnight, and asynchronous setup-guide states.

Priority: ➖ Normal

Estimated code review effort: 3 (Moderate) | ~20 minutes

Severity of issue fixed: Medium

Merge Risk: ⚪ Minimal · up to e9918

The pricing UI now presents timezone-aware peak and off-peak tiers with their rates while preserving overnight ranges. The change is frontend-only and has no identified current merge-readiness risk.

Sequence Diagram(s)

sequenceDiagram
  participant BillingExpression
  participant parseTiersFromExpr
  participant DynamicPricingBreakdown
  participant PricingTierView
  BillingExpression->>parseTiersFromExpr: provide time-conditioned expression
  parseTiersFromExpr->>DynamicPricingBreakdown: return structured tiers
  DynamicPricingBreakdown->>PricingTierView: render prices and formatted time ranges
  PricingTierView-->>DynamicPricingBreakdown: display matched tier status

Loading

🚥 Pre-merge checks | ✅ 2 | ❌ 3

❌ Failed checks (2 warnings, 1 inconclusive)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	The setup-guide test change is unrelated to time-based pricing and issue [#7268]. The pricing parser, component, and pricing tests are in scope.	Move the setup-guide test change to a separate pull request, or link an issue that explicitly requires this setup-guide fix.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 4 functions across 5 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Linked Issues check	❓ Inconclusive	The changes address frontend parsing, time-range formatting, matched-tier display, tier pricing values, overnight ranges, and compact or full component layouts for issue [#7268]. The provided summary …	Provide evidence for boundary-semantics and mobile-overflow coverage, and report successful typecheck, lint, and formatting checks. Add regression tests if these requirements are not already covered.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly identifies the main change: correcting frontend display of time-based tier pricing.

Full details: Linked Issues check

Explanation

The changes address frontend parsing, time-range formatting, matched-tier display, tier pricing values, overnight ranges, and compact or full component layouts for issue [#7268]. The provided summary does not confirm boundary-semantics coverage, mobile overflow validation, or typecheck, lint, and formatting results.

• Fix all pre-merge checks with AI

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{A rabbit reads each line,
The patch grows clear beneath the moon,
Small changes hop in place,
Tests guard the garden path,
Reviews bloom before the dawn.}

_{Comment @coderabbitai help to get the list of available commands.}