refactor(logs): ♻️ remove hardcoded max-width from provider column and optimize flex ratios#817
Conversation
Summary of ChangesHello @Lynricsy, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly enhances the user experience of the logs table by addressing issues with column sizing and text truncation. By removing rigid width constraints and optimizing how columns share space, the table now displays information more efficiently and legibly, especially for variable-length text fields like provider names. This refactoring ensures a more responsive and user-friendly interface for viewing log data. Highlights
Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
📝 Walkthrough概览该PR从ProviderChainPopover组件中移除hasCostBadge属性，删除了依赖该属性的条件宽度逻辑。同时在虚拟化日志表中移除对该属性的传递，并调整了多列的布局弹性基数值。 变更
代码审查工作量估计🎯 2 (简单) | ⏱️ ~12 分钟 可能相关的PR
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 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 |
There was a problem hiding this comment.
Pull request overview
Refactors the dashboard logs table layout to reduce provider-name truncation by removing hardcoded width constraints in ProviderChainPopover and rebalancing column flex ratios so numeric columns take less space and text columns can expand.
Changes:
- Removed hardcoded provider-name
max-w-*constraints inProviderChainPopoverand deleted the now-unusedhasCostBadgeprop. - Rebalanced flex ratios (header + body) in
VirtualizedLogsTableto tighten numeric columns and widen text columns. - Updated README/README.en promotional copy and added a new
v0.5.8section toCHANGELOG.md.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| src/app/[locale]/dashboard/logs/_components/virtualized-logs-table.tsx | Adjusts column flex ratios and removes hasCostBadge prop usage to improve table space distribution. |
| src/app/[locale]/dashboard/logs/_components/usage-logs-table.tsx | Removes hasCostBadge prop usage after popover prop cleanup. |
| src/app/[locale]/dashboard/logs/_components/provider-chain-popover.tsx | Removes hardcoded max-width logic and drops hasCostBadge from the component API. |
| README.md | Expands SSSAiCode promotional section. |
| README.en.md | Expands SSSAiCode promotional section (English). |
| CHANGELOG.md | Adds a new v0.5.8 changelog section. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
README.md
Outdated
| <td> | ||
| <b>💎 特别优惠</b>：<a href="https://www.sssaicode.com/register?ref=NQMO05">SSSAiCode</a> 是一家稳定可靠的 API 中转站，致力于提供稳定、可靠、平价的 Claude、CodeX 模型服务。<br/> | ||
| SSSAiCode 为本软件的用户提供特别优惠，使用此链接注册可长期享受每次 10$ 的购买奖励 → <a href="https://www.sssaicode.com/register?ref=NQMO05">立即访问</a> | ||
| <b>💎 特别优惠</b>：<a href="https://www.sssaicode.com/register?ref=NQMO05">SSSAiCode</a> 是一家稳定可靠的 API 中转站，致力于提供稳定、可靠、平价的 Claude、CodeX 模型服务，<b>提供高性价比折合 0.5￥/$ 的官方 Claude 服务</b>，支持包月、Paygo 多种计费方式、支持当日快速开票。<br/> |
There was a problem hiding this comment.
The README uses both “Codex” and “CodeX”; the new line introduces “CodeX”, which is inconsistent with the rest of the document and likely a typo. Please standardize the model name casing/spelling (e.g., use “Codex” consistently).
| <b>💎 特别优惠</b>：<a href="https://www.sssaicode.com/register?ref=NQMO05">SSSAiCode</a> 是一家稳定可靠的 API 中转站，致力于提供稳定、可靠、平价的 Claude、CodeX 模型服务，<b>提供高性价比折合 0.5￥/$ 的官方 Claude 服务</b>，支持包月、Paygo 多种计费方式、支持当日快速开票。<br/> | |
| <b>💎 特别优惠</b>：<a href="https://www.sssaicode.com/register?ref=NQMO05">SSSAiCode</a> 是一家稳定可靠的 API 中转站，致力于提供稳定、可靠、平价的 Claude、Codex 模型服务，<b>提供高性价比折合 0.5￥/$ 的官方 Claude 服务</b>，支持包月、Paygo 多种计费方式、支持当日快速开票。<br/> |
README.en.md
Outdated
| <td> | ||
| <b>💎 Special Offer</b>: <a href="https://www.sssaicode.com/register?ref=NQMO05">SSSAiCode</a> is a stable and reliable API relay service, dedicated to providing stable, reliable, and affordable Claude and CodeX model services.<br/> | ||
| SSSAiCode offers a special bonus for users of this software. Register via this link to enjoy a $10 purchase bonus every time → <a href="https://www.sssaicode.com/register?ref=NQMO05">Visit Now</a> | ||
| <b>💎 Special Offer</b>: <a href="https://www.sssaicode.com/register?ref=NQMO05">SSSAiCode</a> is a stable and reliable API relay service, dedicated to providing stable, reliable, and affordable Claude and CodeX model services. <b>Offering cost-effective official Claude services at 0.5 CNY/$</b>, with multiple billing options including monthly plans and Pay-as-you-go, plus same-day invoice support.<br/> |
There was a problem hiding this comment.
The README.en uses both “Codex” and “CodeX”; the new line introduces “CodeX”, which is inconsistent with the rest of the document and likely a typo. Please standardize the model name casing/spelling (e.g., use “Codex” consistently).
| <b>💎 Special Offer</b>: <a href="https://www.sssaicode.com/register?ref=NQMO05">SSSAiCode</a> is a stable and reliable API relay service, dedicated to providing stable, reliable, and affordable Claude and CodeX model services. <b>Offering cost-effective official Claude services at 0.5 CNY/$</b>, with multiple billing options including monthly plans and Pay-as-you-go, plus same-day invoice support.<br/> | |
| <b>💎 Special Offer</b>: <a href="https://www.sssaicode.com/register?ref=NQMO05">SSSAiCode</a> is a stable and reliable API relay service, dedicated to providing stable, reliable, and affordable Claude and Codex model services. <b>Offering cost-effective official Claude services at 0.5 CNY/$</b>, with multiple billing options including monthly plans and Pay-as-you-go, plus same-day invoice support.<br/> |
README.md
Outdated
| <b>💎 特别优惠</b>：<a href="https://www.sssaicode.com/register?ref=NQMO05">SSSAiCode</a> 是一家稳定可靠的 API 中转站，致力于提供稳定、可靠、平价的 Claude、CodeX 模型服务，<b>提供高性价比折合 0.5￥/$ 的官方 Claude 服务</b>，支持包月、Paygo 多种计费方式、支持当日快速开票。<br/> | ||
| SSSAiCode 为本软件的用户提供特别优惠，使用此链接注册可长期享受购买月卡每次 10$ 的额外奖励 → <a href="https://www.sssaicode.com/register?ref=NQMO05">立即访问</a> |
There was a problem hiding this comment.
This PR description/title focus on logs table layout, but this change adds/expands promotional copy in the README. Consider moving these README updates to a separate PR, or update the PR description/title to reflect that documentation/marketing content is being changed as well.
README.en.md
Outdated
| <b>💎 Special Offer</b>: <a href="https://www.sssaicode.com/register?ref=NQMO05">SSSAiCode</a> is a stable and reliable API relay service, dedicated to providing stable, reliable, and affordable Claude and CodeX model services. <b>Offering cost-effective official Claude services at 0.5 CNY/$</b>, with multiple billing options including monthly plans and Pay-as-you-go, plus same-day invoice support.<br/> | ||
| SSSAiCode offers a special bonus for users of this software. Register via this link to enjoy an extra $10 bonus on monthly plan purchases → <a href="https://www.sssaicode.com/register?ref=NQMO05">Visit Now</a> |
There was a problem hiding this comment.
This PR description/title focus on logs table layout, but this change adds/expands promotional copy in the English README. Consider moving these README updates to a separate PR, or update the PR description/title to reflect that documentation/marketing content is being changed as well.
CHANGELOG.md
Outdated
| ## v0.5.8 (2026-02-15) | ||
|
|
||
| ### 优化 | ||
|
|
||
| - my-usage 页面配额卡片和统计摘要卡片 UX 改进 (#794) [@miraserver](https://github.com/miraserver) | ||
| - 日志页面虚拟化视图中无筛选条件时隐藏统计面板，提升渲染性能 | ||
|
|
||
| ### 修复 | ||
|
|
||
| - 移除确定性 Session ID，防止跨会话冲突 (#793) | ||
| - 修复标准路径下 Host Header 未匹配实际请求目标的问题 | ||
| - 从 Gemini Vertex AI publishers 路径正确提取模型，确保计费准确 | ||
|
|
||
| ### 其他 | ||
|
|
||
| - README 添加 SSSAiCode 推广信息 | ||
| - i18n 翻译文件更新 |
There was a problem hiding this comment.
This PR adds a new v0.5.8 section to the changelog, but the PR description is scoped to logs table layout changes. If this changelog entry is meant to describe a broader release, please update the PR title/description accordingly; otherwise consider limiting the changelog changes to the items actually included here or splitting the release-notes update into a separate PR.
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request is a nice refactoring that improves the layout of the logs table. Removing the hardcoded max-width from the provider column and optimizing the flex ratios for different column types will definitely improve the user experience by making the table more responsive. The cleanup of the unused hasCostBadge prop is also a good touch.
I've added one suggestion in virtualized-logs-table.tsx to define the new flex ratios as constants. This would improve maintainability by creating a single source of truth for the column layout, making future adjustments easier and less error-prone. Overall, great work on improving the UI!
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/app/[locale]/dashboard/logs/_components/virtualized-logs-table.tsx (1)
435-452:isActualRequest与ProviderChainPopover内部逻辑存在长期发散风险此处的内联
isActualRequest（Lines 435–450）缺少provider-chain-popover.tsx中对应函数（Lines 32–42）所包含的三种判断分支：endpoint_pool_exhausted、vendor_type_all_timeout和client_error_non_retryable。这会导致actualRequestCount（用于判断showBadgeInTable）与弹窗内requestCount在含上述 reason 的日志上产生差异，从而可能出现倍率徽章重复显示（表格外部 + 弹窗触发器各一个）的视觉问题。该问题为既有代码，本 PR 未引入，但建议后续将两处逻辑提取为共享工具函数以消除发散：
♻️ 建议：提取共享函数
在
@/lib/utils/provider-chain-formatter.ts（或同目录工具文件）中添加：+export function isActualRequest(item: ProviderChainItem): boolean { + if (item.reason === "concurrent_limit_failed") return true; + if (item.reason === "retry_failed" || item.reason === "system_error") return true; + if (item.reason === "endpoint_pool_exhausted") return true; + if (item.reason === "vendor_type_all_timeout") return true; + if (item.reason === "client_error_non_retryable") return true; + if ((item.reason === "request_success" || item.reason === "retry_success") && item.statusCode) { + return true; + } + return false; +}然后在两个组件中统一
import { isActualRequest } from "@/lib/utils/provider-chain-formatter"，替换各自的内联定义。🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app/`[locale]/dashboard/logs/_components/virtualized-logs-table.tsx around lines 435 - 452, The inline isActualRequest used to compute actualRequestCount in virtualized-logs-table is missing the same reason checks (endpoint_pool_exhausted, vendor_type_all_timeout, client_error_non_retryable) that exist in ProviderChainPopover, causing inconsistent counts and duplicate badges; update isActualRequest to include those three checks OR extract a shared isActualRequest utility (e.g., export from a new provider-chain-formatter) and import it into both virtualized-logs-table and ProviderChainPopover, then replace the inline definitions so actualRequestCount, showBadgeInTable, and the popover use the identical logic.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/app/`[locale]/dashboard/logs/_components/virtualized-logs-table.tsx:
- Around line 435-452: The inline isActualRequest used to compute
actualRequestCount in virtualized-logs-table is missing the same reason checks
(endpoint_pool_exhausted, vendor_type_all_timeout, client_error_non_retryable)
that exist in ProviderChainPopover, causing inconsistent counts and duplicate
badges; update isActualRequest to include those three checks OR extract a shared
isActualRequest utility (e.g., export from a new provider-chain-formatter) and
import it into both virtualized-logs-table and ProviderChainPopover, then
replace the inline definitions so actualRequestCount, showBadgeInTable, and the
popover use the identical logic.
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review Summary
Clean refactor that successfully removes layout constraints and improves column space distribution in the logs table. The changes are focused, well-tested, and align with the PR description.
PR Size: S
- Lines changed: 84
- Files changed: 6
Issues Found
| Category | Critical | High | Medium | Low |
|---|---|---|---|---|
| Logic/Bugs | 0 | 0 | 0 | 0 |
| Security | 0 | 0 | 0 | 0 |
| Error Handling | 0 | 0 | 0 | 0 |
| Types | 0 | 0 | 0 | 0 |
| Comments/Docs | 0 | 0 | 0 | 0 |
| Tests | 0 | 0 | 0 | 0 |
| Simplification | 0 | 0 | 0 | 0 |
Critical Issues (Must Fix)
None identified.
High Priority Issues (Should Fix)
None identified.
Review Coverage
- Logic and correctness - Clean removal of max-width constraints; flex ratio changes maintain header/body symmetry
- Security (OWASP Top 10) - No security-sensitive changes
- Error handling - No error handling modifications; validation logic for multiplier badge correctly guards against NaN/Infinity
- Type safety - Interface change properly propagated to all call sites
- Documentation accuracy - CHANGELOG.md and README updates align with changes
- Test coverage - Existing tests pass; component tests don't rely on removed prop
- Code clarity - Simplified component interface by removing unused prop
Notes
- The
hasCostBadgeprop removal is clean and complete across all call sites - Flex ratio changes show thoughtful distinction between numeric columns (tightened) and text columns (widened)
- The multiplier badge validation correctly handles edge cases (null, undefined, empty string, NaN, Infinity)
- Test files confirm the component works without the removed prop
Automated review by Claude AI
|
hi，请问是否可以从 PR 中移除无关的修改？ |
…d optimize flex ratios Co-authored-by: Wine Fox <fox@ling.plus>
Lynricsy
force-pushed
the
refactor/logs-column-width-optimization
branch
from
28b1eac to
fe819d7
Compare
不好意思，基础分支用错了，已经移除 |
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/app/[locale]/dashboard/logs/_components/virtualized-logs-table.tsx (1)
416-496: 建议：将isActualRequest提取至组件外部，避免在每行渲染时重复创建。
isActualRequest（Lines 438–453）在.map()回调内的 IIFE 中定义，每次渲染每一行都会重新创建该函数，存在不必要的性能开销。建议将其提取为模块级纯函数。♻️ 建议的重构
在文件顶部（
const BATCH_SIZE附近）添加：+const isActualRequest = (item: ProviderChainItem): boolean => { + if (item.reason === "concurrent_limit_failed") return true; + if (item.reason === "retry_failed" || item.reason === "system_error") return true; + if ( + (item.reason === "request_success" || item.reason === "retry_success") && + item.statusCode + ) { + return true; + } + return false; +};然后删除 Lines 438–453 中的内联定义，直接引用上方的模块级函数：
- const isActualRequest = (item: ProviderChainItem) => { - if (item.reason === "concurrent_limit_failed") return true; - if ( - item.reason === "retry_failed" || - item.reason === "system_error" - ) - return true; - if ( - (item.reason === "request_success" || - item.reason === "retry_success") && - item.statusCode - ) { - return true; - } - return false; - };🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/app/`[locale]/dashboard/logs/_components/virtualized-logs-table.tsx around lines 416 - 496, The inline isActualRequest function inside the IIFE is recreated for every row causing unnecessary allocations; extract it as a pure module-level function (e.g., export or const isActualRequest(item: ProviderChainItem): boolean) near the top of the file (by where BATCH_SIZE is defined) and remove the inline definition, then have the rendering code use that top-level isActualRequest when computing actualRequestCount and showBadgeInTable so per-row renders reuse the same function. Ensure the extracted function signature and logic match the original conditions (concurrent_limit_failed, retry_failed, system_error, and request_success/retry_success with statusCode).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/app/`[locale]/dashboard/logs/_components/virtualized-logs-table.tsx:
- Around line 416-496: The inline isActualRequest function inside the IIFE is
recreated for every row causing unnecessary allocations; extract it as a pure
module-level function (e.g., export or const isActualRequest(item:
ProviderChainItem): boolean) near the top of the file (by where BATCH_SIZE is
defined) and remove the inline definition, then have the rendering code use that
top-level isActualRequest when computing actualRequestCount and showBadgeInTable
so per-row renders reuse the same function. Ensure the extracted function
signature and logic match the original conditions (concurrent_limit_failed,
retry_failed, system_error, and request_success/retry_success with statusCode).
ℹ️ Review info
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Cache: Disabled due to Reviews > Disable Cache setting
📒 Files selected for processing (3)
src/app/[locale]/dashboard/logs/_components/provider-chain-popover.tsxsrc/app/[locale]/dashboard/logs/_components/usage-logs-table.tsxsrc/app/[locale]/dashboard/logs/_components/virtualized-logs-table.tsx
💤 Files with no reviewable changes (1)
- src/app/[locale]/dashboard/logs/_components/usage-logs-table.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- src/app/[locale]/dashboard/logs/_components/provider-chain-popover.tsx
Summary
Problem
The provider column in the usage logs table displayed truncated text (e.g. "Antigravity Ultra...") even when many columns were hidden and there was plenty of horizontal space available. This was caused by:
Related Issues
Changes
`provider-chain-popover.tsx` (+2, -8)
`virtualized-logs-table.tsx` (+22, -23)
`usage-logs-table.tsx` (+0, -1)
Testing
Automated Tests
Verification Steps
Checklist
Description enhanced with related issue links
Greptile Summary
Removed hardcoded width constraints (
max-w-[140px]/max-w-[180px]) from the provider column and optimized flex ratios across all columns in the logs table. Numeric columns (Time, Tokens, Cache, Cost, Performance, Status) were tightened to use less space, while text columns (Provider, Model, User, Key, SessionId) were widened to utilize available space more effectively. The unusedhasCostBadgeprop was cleaned up from theProviderChainPopoverinterface and all call sites.Key improvements:
Confidence Score: 5/5
Important Files Changed
hasCostBadgeprop and hardcoded max-width constraints, allowing dynamic widthhasCostBadgeprop from ProviderChainPopover callhasCostBadgepropLast reviewed commit: fe819d7
(3/5) Reply to the agent's comments like "Can you suggest a fix for this @greptileai?" or ask follow-up questions!