fix(gui): stop revisit flashes and layout shift across dashboard tabs - #824
fix(gui): stop revisit flashes and layout shift across dashboard tabs#824Wibias wants to merge 8 commits into
Conversation
Seed session caches and drop revalidation status lines that flashed over known state. Align Claude/API/Usage/Storage chrome and reserve Models Combos space so rail and heading baselines stop jumping.
|
Warning Review limit reached
Next review available in: 46 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (12)
📝 WalkthroughWalkthroughThe PR adds session-cache hydration and quiet revalidation across GUI data surfaces. It updates Claude workspace structure, status handling, and tab navigation. It also adjusts dashboard, storage, logs, menu, and responsive layouts. ChangesCached resources and refresh states
Claude workspace flow
Navigation and workspace layout
Estimated code review effort: 4 (Complex) | ~60 minutes Possibly related issues
Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1🛠️ Fix failing CI checks 💡
🧪 Generate unit tests (beta)
Comment |
Ingwannu
left a comment
There was a problem hiding this comment.
Not mergeable on current head b05f017. The red matrix is caused by real branch regressions, not only runner noise: apikeys-models-states has two failures after mount (the initial GET count remains 0 and the cache-backed failure alert is absent), all npm-global/package jobs are red, and React Doctor exits at the blocking warning threshold. Please keep the PR draft, fix the resource-layer initial-load/error announcement contract, rerun the two failing GUI cases directly, resolve the React Doctor findings, then require a fully green cross-platform/package matrix before marking ready.
Pre-subscribe session seeds skipped the mount fetch, so cache-backed revisits never announced load failures. Move seeding into initialData, quiet-revalidate on first subscribe, and fix the related ApiKeys/Startup/Desktop review gaps.
Removes the effect-based /api/combos fetch that React Doctor blocked (setState after await) and keeps the seed/error card contract via useDataSurface.
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
gui/src/pages/Logs.tsx (1)
324-326: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winUse locale-aware combined timestamp formatting.
Line 326 joins the date and time with a fixed space. This can use an incorrect order or separator for the selected locale in the detail dialog.
Use
toLocaleString()for the combined display. Keep the existing time-zone fallback.Proposed fix
function formatLogDateTime(ts: number, localeTag?: string, timeZone?: string): string { - const { date, time } = formatLogDateParts(ts, localeTag, timeZone); - return `${date} ${time}`; + const zone = timeZone ? { timeZone } : undefined; + try { + return new Date(ts).toLocaleString(localeTag, zone); + } catch { + return new Date(ts).toLocaleString(localeTag); + } }🤖 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 `@gui/src/pages/Logs.tsx` around lines 324 - 326, Update formatLogDateTime to format the timestamp with locale-aware toLocaleString output instead of joining the separately formatted date and time with a fixed space, while preserving the existing localeTag and timeZone fallback behavior.
🤖 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 `@gui/src/pages/Models.tsx`:
- Around line 108-130: Normalize both session cache sources in the seededCombos
useMemo through parseComboList before returning them as initialData. For the own
cache, only parse values that are arrays; for the workspace cache, likewise
parse workspace.combos only when it is an array, while preserving null for
absent or non-array values. Keep the existing cache lookup order and
combosResource seeding behavior unchanged.
---
Outside diff comments:
In `@gui/src/pages/Logs.tsx`:
- Around line 324-326: Update formatLogDateTime to format the timestamp with
locale-aware toLocaleString output instead of joining the separately formatted
date and time with a fixed space, while preserving the existing localeTag and
timeZone fallback behavior.
🪄 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: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 9c20a7de-8f26-473a-9d43-c7c98198754e
📒 Files selected for processing (17)
gui/src/client-resource.tsgui/src/components/apikeys-workspace/ApiKeysWorkspace.tsxgui/src/components/section-tabs.tsxgui/src/data-surface.tsgui/src/pages/ApiKeys.tsxgui/src/pages/Claude.tsxgui/src/pages/ClaudeCode.tsxgui/src/pages/ClaudeDesktop.tsxgui/src/pages/Debug.tsxgui/src/pages/Grok.tsxgui/src/pages/Logs.tsxgui/src/pages/Models.tsxgui/src/pages/Startup.tsxgui/src/pages/Subagents.tsxgui/src/pages/Usage.tsxgui/src/pages/api-keys-panels.tsxgui/tests/client-resource-poll.test.tsx
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 8d4122a4cf
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Clear seedNeedsRevalidate only after a settled fetch so aborted mounts still revalidate, stabilize the Claude Desktop port callback, and validate/announce Models combo cache failures.
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 8d4122a4cf
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Remove unused SectionTabs stripRef and ClaudeDesktop hasCache, seed Desktop from one cache read, inline ClaudeCode session seed, and reuse debugResourceKey for optimistic writes.
…n tabs Announce stale-log errors immediately when auto-refresh is disabled, and pick the heading nearest the reading line when a scroll-lock timeout fires.
Take tip historyTruncated notice; keep this PR's removal of the Usage revalidation spinner flash.
[shipping-github] Verdict: changes-requestedPR: UsefulnessYes. Session-seeded revisit hydration removes title-area spinner flashes and layout shove on Logs/Models/Claude/Grok/ApiKeys/Startup/Debug, with Claude chrome and SectionTabs scroll-lock as claimed in the PR body. Bugs / correctness
Security
Spec / standards
Reviews
Base / CI
GateHard blockers: (1) Bottom lineProduct + review-thread work on |
[shipping-github] Security reviewPR / issue: Findingsnone confirmed SummaryRe-reviewed the GUI session-cache revisit and loading-contract changes on tip, including the post-simplify cleanup. No authn/authz bypass, secret caching, or HTML injection sinks were introduced; management fetches still go through the existing authenticated client. Residual risk is the pre-existing same-origin sessionStorage operator UX window until quiet revalidate finishes. Residual
Fixes this session
|
Summary
/api/combosno longer shoves the catalog; tighten language-menu gap, dashboard Sync/delegation row, Storage buckets, and SectionTabs scroll-lock.Test plan
bun testundergui/testsfor page-loading-contract, claudecode-layout, section-tabs-scroll-lock, startup/debug revisit cacheSummary by CodeRabbit