refactor: codex usage ui - #5595
Merged
Merged
Conversation
Contributor
WalkthroughImplements end-to-end reset-credit functionality for Codex usage: backend generalization of fetch logic, new reset-credit consume endpoint, overhauled UI in both dialog and modal with Account Status card and reset-credits panel, and i18n support across six locales. ChangesCodex Usage Reset Credits Full Stack
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~30 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (4)
web/default/src/features/channels/components/dialogs/codex-usage-dialog.tsx (3)
347-362: ⚡ Quick winConsider extracting props to a named interface.
While inline prop typing works, extracting to a named interface improves code organization and reusability, especially as this component is used multiple times throughout the dialog.
♻️ Suggested refactor
+interface RateLimitWindowGridProps { + fiveHourWindow?: CodexRateLimitWindow | null + weeklyWindow?: CodexRateLimitWindow | null +} + -function RateLimitWindowGrid(props: { - fiveHourWindow?: CodexRateLimitWindow | null - weeklyWindow?: CodexRateLimitWindow | null -}) { +function RateLimitWindowGrid(props: RateLimitWindowGridProps) { const { t } = useTranslation()🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@web/default/src/features/channels/components/dialogs/codex-usage-dialog.tsx` around lines 347 - 362, Extract the inline prop typing from the RateLimitWindowGrid component into a named interface. Create a new interface (e.g., RateLimitWindowGridProps) that defines the fiveHourWindow and weeklyWindow properties with their types (CodexRateLimitWindow or null), then replace the inline props parameter in the RateLimitWindowGrid function signature with this named interface to improve code organization and reusability.
364-386: ⚡ Quick winConsider extracting props to a named interface.
For consistency with TypeScript best practices and improved maintainability, extract the props to a separate interface declaration.
♻️ Suggested refactor
+interface SectionHeadingProps { + title: string + description?: string + children?: ReactNode +} + -function SectionHeading(props: { - title: string - description?: string - children?: ReactNode -}) { +function SectionHeading(props: SectionHeadingProps) { return (🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@web/default/src/features/channels/components/dialogs/codex-usage-dialog.tsx` around lines 364 - 386, The SectionHeading function currently defines its props type inline as an anonymous object type. Extract this props definition into a separate named interface (e.g., SectionHeadingProps) declared above the SectionHeading function, then update the function parameter to use this new interface instead of the inline type definition.
423-468: ⚡ Quick winConsider extracting props to a named interface.
Following TypeScript best practices, extract the inline props definition to a separate interface for better code organization.
♻️ Suggested refactor
+interface InfoFieldProps { + label: string + value?: string | null + mono?: boolean + copyable?: boolean + className?: string +} + -function InfoField(props: { - label: string - value?: string | null - mono?: boolean - copyable?: boolean - className?: string -}) { +function InfoField(props: InfoFieldProps) { const { t } = useTranslation()🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@web/default/src/features/channels/components/dialogs/codex-usage-dialog.tsx` around lines 423 - 468, Extract the inline props object type definition from the InfoField function into a separate named interface called InfoFieldProps. Define this interface above the InfoField function with the same properties (label, value, mono, copyable, and className), then update the function signature to use this new interface type instead of the inline object definition. This improves code organization and makes the props contract more explicit and reusable.web/classic/src/components/table/channels/modals/CodexUsageModal.jsx (1)
37-48: 💤 Low valueConsider alternatives to inline style injection with !important.
While this works, injecting
<style>tags in components and using!importantto override library styles creates maintainability issues and breaks CSS specificity rules.Consider these alternatives:
- Use CSS modules or a separate stylesheet
- Use Semi-UI's theme customization APIs if available
- Use a CSS-in-JS solution like styled-components
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@web/classic/src/components/table/channels/modals/CodexUsageModal.jsx` around lines 37 - 48, The CodexUsageModalStyles function uses inline style injection with !important to override Semi-UI library styles, which creates maintainability issues and breaks CSS specificity. Replace this approach by moving the media query styles for CODEX_USAGE_MODAL_CLASS_NAME and MOBILE_BREAKPOINT to either a separate CSS module, a dedicated stylesheet, or use Semi-UI's theme customization APIs if available. Remove the !important declarations and rely on proper CSS specificity instead. If using a CSS-in-JS solution like styled-components, migrate the CodexUsageModalStyles styles accordingly.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@web/default/src/features/channels/components/dialogs/codex-usage-dialog.tsx`:
- Around line 238-240: The function formatLabelValue lacks explicit type
annotations for its parameters and return type. Add explicit type annotations to
both parameters (label and value should be typed as string) and add an explicit
return type annotation (: string) to the function declaration to comply with
TypeScript coding guidelines.
- Around line 221-236: The function getUsageStatusBadge is missing an explicit
return type annotation on its signature. Add the return type annotation to the
function declaration, specifying that it returns a JSX.Element (or the
appropriate React element type) since all code paths in the function return
StatusBadge components.
---
Nitpick comments:
In `@web/classic/src/components/table/channels/modals/CodexUsageModal.jsx`:
- Around line 37-48: The CodexUsageModalStyles function uses inline style
injection with !important to override Semi-UI library styles, which creates
maintainability issues and breaks CSS specificity. Replace this approach by
moving the media query styles for CODEX_USAGE_MODAL_CLASS_NAME and
MOBILE_BREAKPOINT to either a separate CSS module, a dedicated stylesheet, or
use Semi-UI's theme customization APIs if available. Remove the !important
declarations and rely on proper CSS specificity instead. If using a CSS-in-JS
solution like styled-components, migrate the CodexUsageModalStyles styles
accordingly.
In `@web/default/src/features/channels/components/dialogs/codex-usage-dialog.tsx`:
- Around line 347-362: Extract the inline prop typing from the
RateLimitWindowGrid component into a named interface. Create a new interface
(e.g., RateLimitWindowGridProps) that defines the fiveHourWindow and
weeklyWindow properties with their types (CodexRateLimitWindow or null), then
replace the inline props parameter in the RateLimitWindowGrid function signature
with this named interface to improve code organization and reusability.
- Around line 364-386: The SectionHeading function currently defines its props
type inline as an anonymous object type. Extract this props definition into a
separate named interface (e.g., SectionHeadingProps) declared above the
SectionHeading function, then update the function parameter to use this new
interface instead of the inline type definition.
- Around line 423-468: Extract the inline props object type definition from the
InfoField function into a separate named interface called InfoFieldProps. Define
this interface above the InfoField function with the same properties (label,
value, mono, copyable, and className), then update the function signature to use
this new interface type instead of the inline object definition. This improves
code organization and makes the props contract more explicit and reusable.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: f5997acc-d422-439b-804a-a1444e199d4e
📒 Files selected for processing (8)
web/classic/src/components/table/channels/modals/CodexUsageModal.jsxweb/default/src/features/channels/components/dialogs/codex-usage-dialog.tsxweb/default/src/i18n/locales/en.jsonweb/default/src/i18n/locales/fr.jsonweb/default/src/i18n/locales/ja.jsonweb/default/src/i18n/locales/ru.jsonweb/default/src/i18n/locales/vi.jsonweb/default/src/i18n/locales/zh.json
Comment on lines
+221
to
+236
| function getUsageStatusBadge( | ||
| rateLimit: CodexRateLimit | undefined, | ||
| t: (key: string) => string | ||
| ) { | ||
| if (!rateLimit || Object.keys(rateLimit).length === 0) { | ||
| return ( | ||
| <StatusBadge label={t('Pending')} variant='neutral' copyable={false} /> | ||
| ) | ||
| } | ||
| if (rateLimit.allowed && !rateLimit.limit_reached) { | ||
| return ( | ||
| <StatusBadge label={t('Available')} variant='success' copyable={false} /> | ||
| ) | ||
| } | ||
| return <StatusBadge label={t('Limited')} variant='danger' copyable={false} /> | ||
| } |
Contributor
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major | ⚡ Quick win
Add explicit parameter and return type annotations.
As per coding guidelines, TypeScript functions should explicitly annotate parameter and return value types.
♻️ Proposed fix
-function getUsageStatusBadge(
- rateLimit: CodexRateLimit | undefined,
- t: (key: string) => string
-) {
+function getUsageStatusBadge(
+ rateLimit: CodexRateLimit | undefined,
+ t: (key: string) => string
+): JSX.Element {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| function getUsageStatusBadge( | |
| rateLimit: CodexRateLimit | undefined, | |
| t: (key: string) => string | |
| ) { | |
| if (!rateLimit || Object.keys(rateLimit).length === 0) { | |
| return ( | |
| <StatusBadge label={t('Pending')} variant='neutral' copyable={false} /> | |
| ) | |
| } | |
| if (rateLimit.allowed && !rateLimit.limit_reached) { | |
| return ( | |
| <StatusBadge label={t('Available')} variant='success' copyable={false} /> | |
| ) | |
| } | |
| return <StatusBadge label={t('Limited')} variant='danger' copyable={false} /> | |
| } | |
| function getUsageStatusBadge( | |
| rateLimit: CodexRateLimit | undefined, | |
| t: (key: string) => string | |
| ): JSX.Element { | |
| if (!rateLimit || Object.keys(rateLimit).length === 0) { | |
| return ( | |
| <StatusBadge label={t('Pending')} variant='neutral' copyable={false} /> | |
| ) | |
| } | |
| if (rateLimit.allowed && !rateLimit.limit_reached) { | |
| return ( | |
| <StatusBadge label={t('Available')} variant='success' copyable={false} /> | |
| ) | |
| } | |
| return <StatusBadge label={t('Limited')} variant='danger' copyable={false} /> | |
| } |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@web/default/src/features/channels/components/dialogs/codex-usage-dialog.tsx`
around lines 221 - 236, The function getUsageStatusBadge is missing an explicit
return type annotation on its signature. Add the return type annotation to the
function declaration, specifying that it returns a JSX.Element (or the
appropriate React element type) since all code paths in the function return
StatusBadge components.
Source: Coding guidelines
Comment on lines
+238
to
+240
| function formatLabelValue(label: string, value: string) { | ||
| return label.endsWith('：') ? `${label}${value}` : `${label} ${value}` | ||
| } |
Contributor
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major | ⚡ Quick win
Add explicit parameter and return type annotations.
As per coding guidelines, all TypeScript functions should have explicit type annotations.
♻️ Proposed fix
-function formatLabelValue(label: string, value: string) {
+function formatLabelValue(label: string, value: string): string {
return label.endsWith('：') ? `${label}${value}` : `${label} ${value}`
}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@web/default/src/features/channels/components/dialogs/codex-usage-dialog.tsx`
around lines 238 - 240, The function formatLabelValue lacks explicit type
annotations for its parameters and return type. Add explicit type annotations to
both parameters (label and value should be typed as string) and add an explicit
return type annotation (: string) to the function declaration to comply with
TypeScript coding guidelines.
Source: Coding guidelines
11 tasks
11 tasks
ruanhangjian
pushed a commit
to ruanhangjian/new-api
that referenced
this pull request
Jul 11, 2026
* refactor: codex usage ui * feat: show Codex reset credit details * feat: add Codex usage reset flow
11 tasks
zhaodechao2008
pushed a commit
to zhaodechao2008/new-api
that referenced
this pull request
Jul 27, 2026
* refactor: codex usage ui * feat: show Codex reset credit details * feat: add Codex usage reset flow
330079598
pushed a commit
to 330079598/new-api
that referenced
this pull request
Aug 19, 2026
* refactor: codex usage ui * feat: show Codex reset credit details * feat: add Codex usage reset flow
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Important
📝 变更描述 / Description
(简述：做了什么？为什么这样改能生效？请基于你对代码逻辑的理解来写，避免粘贴未经整理的内容)
codex 账号信息 增加重置次数展示，调整ui展示，增加重置flow
🚀 变更类型 / Type of change
🔗 关联任务 / Related Issue
✅ 提交前检查项 / Checklist
Bug fix，我已提交或关联对应 Issue，且不会将设计取舍、预期不一致或理解偏差直接归类为 bug。📸 运行证明 / Proof of Work
(请在此粘贴截图、关键日志或测试报告，以证明变更生效)
Summary by CodeRabbit