Skip to content

fix(gui): stop revisit flashes and layout shift across dashboard tabs - #824

Open
Wibias wants to merge 8 commits into
lidge-jun:devfrom
Wibias:fix/gui-ux-bugs
Open

fix(gui): stop revisit flashes and layout shift across dashboard tabs#824
Wibias wants to merge 8 commits into
lidge-jun:devfrom
Wibias:fix/gui-ux-bugs

Conversation

@Wibias

@Wibias Wibias commented Jul 31, 2026

Copy link
Copy Markdown
Collaborator

Summary

  • Seed session caches and drop revalidation status spinners that flashed over known state on revisit (Logs, Models, Claude, Grok, ApiKeys, Codex Auth, Startup/Debug, and related surfaces).
  • Stabilize Claude Code/Desktop chrome (title above Code/Desktop strip, shared pane head, reserved Desktop status bar) and align Usage/API/Storage heading insets and content widths.
  • Fix Models row height for Sub-agent chips and reserve the Combos card so late /api/combos no longer shoves the catalog; tighten language-menu gap, dashboard Sync/delegation row, Storage buckets, and SectionTabs scroll-lock.

Test plan

  • Revisit Logs, Models, Claude Code/Desktop, Grok, API Access, Codex Auth — no spinner flash under the title over cached content
  • Claude: title/subtitle above Code/Desktop selector; rail panes share one heading baseline; Desktop status bar does not insert late
  • Models: Sub-agent chips match Shadow Call control height; Combos card present immediately on revisit
  • Usage vs Storage: same top inset for page titles; API Access and Logs match Storage width (1200px)
  • bun test under gui/tests for page-loading-contract, claudecode-layout, section-tabs-scroll-lock, startup/debug revisit cache

Summary by CodeRabbit

  • Improvements
    • Cached data now appears immediately when revisiting settings, usage, logs, models, startup, and account pages.
    • Refreshing content stays visible during updates with clearer loading and error states.
    • Section tabs now scroll smoothly without losing the selected tab.
    • Claude pages include clearer introductions, desktop port status, and improved save controls.
    • Models, storage, dashboard, logs, API keys, and workspace layouts received responsive visual refinements.
    • Dropdown positioning and date/time displays are more consistent across screen sizes.

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.
@github-actions github-actions Bot added the bug Something isn't working label Jul 31, 2026
@coderabbitai

coderabbitai Bot commented Jul 31, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@Wibias, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 46 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

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 configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 056f094a-f539-408a-b7b8-49d370bec9b1

📥 Commits

Reviewing files that changed from the base of the PR and between 8d4122a and c25fcb1.

📒 Files selected for processing (12)
  • gui/src/client-resource.ts
  • gui/src/components/apikeys-workspace/ApiKeysWorkspace.tsx
  • gui/src/components/section-tabs.tsx
  • gui/src/pages/ApiKeys.tsx
  • gui/src/pages/Claude.tsx
  • gui/src/pages/ClaudeCode.tsx
  • gui/src/pages/ClaudeDesktop.tsx
  • gui/src/pages/Debug.tsx
  • gui/src/pages/Logs.tsx
  • gui/src/pages/Models.tsx
  • gui/src/pages/Usage.tsx
  • gui/tests/client-resource-poll.test.tsx
📝 Walkthrough

Walkthrough

The 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.

Changes

Cached resources and refresh states

Layer / File(s) Summary
Cached resource hydration and revalidation
gui/src/client-resource.ts, gui/src/data-surface.ts, gui/src/pages/*
Resources accept typed cached initial data, preserve existing content during refreshes, and quietly revalidate seeded stores on first subscription.
Refresh status and data presentation
gui/src/components/CodexAccountPool.tsx, gui/src/pages/ApiKeys.tsx, gui/src/pages/Logs.tsx, gui/src/pages/Models.tsx, gui/src/pages/Startup.tsx, gui/src/pages/*
Separate refresh-status regions are removed. Busy state, stale-data notices, cached combo states, model refresh messaging, and log date/time rendering remain.
Cache and loading validation
gui/tests/client-resource-poll.test.tsx, gui/tests/debug-cache-revisit.test.tsx, gui/tests/startup-revisit-cache.test.tsx, gui/tests/page-loading-contract.test.tsx
Tests cover seeded revalidation, cached revisits, deferred refreshes, skeleton suppression, and the revised loading-status contract.

Claude workspace flow

Layer / File(s) Summary
Claude page and Desktop integration
gui/src/pages/Claude.tsx, gui/src/pages/ClaudeDesktop.tsx
The Claude page displays tab-specific introductions and cached or live Desktop port text. Desktop caches data and status responses, reports port changes, and refreshes status after save or apply operations.
Claude Code workspace headers
gui/src/pages/ClaudeCode.tsx, gui/src/pages/claude-code-sections.tsx, gui/src/pages/claude-code-settings.tsx
Section metadata moves into a shared workspace header. Save controls reflect editability. Local section headings are removed.
Claude workspace styling and tests
gui/src/styles-claudecode-workspace.css, gui/src/styles.css, gui/tests/claudecode-layout.test.ts
Workspace headers, tabs, toolbars, and pending status styles are updated. Layout tests verify header placement, Save visibility, and Desktop wiring.

Navigation and workspace layout

Layer / File(s) Summary
Section scroll locking
gui/src/components/section-tabs.tsx, gui/src/section-anchors.ts, gui/tests/section-tabs-scroll-lock.test.tsx
Clicked tabs temporarily lock the scroll spy to the target section. The lock clears when the target intersects, times out, or the component unmounts.
Menu positioning
gui/src/select-position.ts, gui/src/styles.css, gui/tests/select-position.test.ts
Beside-placement menus use a named 12px gap. Right-placement tests use the resulting position.
Dashboard, storage, and responsive styling
gui/src/pages/dashboard-overview-panels.tsx, gui/src/pages/dashboard-overview-sections.tsx, gui/src/components/storage-workspace/StorageWorkspace.tsx, gui/src/styles-dashboard-workspace.css, gui/src/styles-storage-workspace.css, gui/src/styles-apikeys-workspace.css, gui/src/styles-models-workspace.css, gui/src/styles.css
Dashboard tools use a responsive grid. Storage summaries use new card styles. API keys, models, logs, Usage, sidebar, and language-menu layouts receive spacing and sizing updates.

Estimated code review effort: 4 (Complex) | ~60 minutes

Possibly related issues

Possibly related PRs

Suggested reviewers: lidge-jun

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 12.12% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly summarizes the primary changes: preventing revisit loading flashes and layout shifts across dashboard tabs.
✨ Finishing Touches 💡 1
🛠️ Fix failing CI checks 💡
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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

chatgpt-codex-connector[bot]

This comment was marked as resolved.

coderabbitai[bot]

This comment was marked as resolved.

@Wibias
Wibias marked this pull request as draft August 1, 2026 01:02

@Ingwannu Ingwannu left a comment

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Wibias added 3 commits August 1, 2026 09:37
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.
@Wibias
Wibias marked this pull request as ready for review August 1, 2026 10:22
@Wibias
Wibias marked this pull request as draft August 1, 2026 10:23

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 win

Use 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

📥 Commits

Reviewing files that changed from the base of the PR and between b05f017 and 8d4122a.

📒 Files selected for processing (17)
  • gui/src/client-resource.ts
  • gui/src/components/apikeys-workspace/ApiKeysWorkspace.tsx
  • gui/src/components/section-tabs.tsx
  • gui/src/data-surface.ts
  • gui/src/pages/ApiKeys.tsx
  • gui/src/pages/Claude.tsx
  • gui/src/pages/ClaudeCode.tsx
  • gui/src/pages/ClaudeDesktop.tsx
  • gui/src/pages/Debug.tsx
  • gui/src/pages/Grok.tsx
  • gui/src/pages/Logs.tsx
  • gui/src/pages/Models.tsx
  • gui/src/pages/Startup.tsx
  • gui/src/pages/Subagents.tsx
  • gui/src/pages/Usage.tsx
  • gui/src/pages/api-keys-panels.tsx
  • gui/tests/client-resource-poll.test.tsx

Comment thread gui/src/pages/Models.tsx Outdated

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 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".

Comment thread gui/src/pages/Claude.tsx Outdated
Comment thread gui/src/client-resource.ts Outdated
Comment thread gui/src/pages/Models.tsx Outdated
Comment thread gui/src/pages/Claude.tsx Outdated
@Wibias
Wibias marked this pull request as ready for review August 1, 2026 10:37
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.

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 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".

Comment thread gui/src/pages/Logs.tsx
Comment thread gui/src/components/section-tabs.tsx Outdated
Wibias added 3 commits August 1, 2026 12:53
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.
@Wibias

Wibias commented Aug 1, 2026

Copy link
Copy Markdown
Collaborator Author

[shipping-github] Verdict: changes-requested

PR: #824 — fix(gui): stop revisit flashes and layout shift across dashboard tabs
Head: c25fcb1d on dev (mergeStateStatus: UNSTABLE)
Linked: none

Usefulness

Yes. 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

  • Method: bug-review.md — Bugbot: clean on tip; complementary: done (silent_failures / resource_leaks / edge_cases + UI async lenses)
  • Findings: none blocking on tip after fixes
  • Fixed this session:
    • 898cf793 — StrictMode seed revalidate (clear seedNeedsRevalidate only on settle); Claude Desktop port loop + failed-cold subtitle; combo cache parse + stale failure Notice/Retry
    • 660b47ae — Logs stale failure when auto-refresh off; SectionTabs timeout resync nearest reading-line heading
    • c0974f37 — approved simplify (dead stripRef/hasCache, Desktop single cache read, ClaudeCode seed inline, Debug resource key reuse)
    • c25fcb1d — merge dev tip; keep Usage quiet revisit (take historyTruncated, do not restore revalidation spinner)

Security

  • Scope reviewed: sessionStorage seeds, management fetches, GUI XSS sinks, removed loading live-regions
  • Findings: none confirmed (Pass on 898cf793 and c0974f37)
  • Fixed this session: none security-specific

Spec / standards

  • Spec source: PR body (no linked issue)
  • Gaps: none hard; test plan remains partly manual. Standards: no AGENTS hard violations.

Reviews

  • Owners/maintainers: @Ingwannu CHANGES_REQUESTED on older SHA b05f0171 (resource-layer / React Doctor / matrix) — tip addresses those; needs re-review on c25fcb1d
  • Bots: Codex/CodeRabbit threads resolved (0 unresolved). CodeRabbit rate-limited summary only.

Base / CI

  • Behind/conflicts: synced in c25fcb1d (was DIRTY vs tip)
  • Required checks: ubuntu-latest / macos-latest / npm-global / react-doctor green on tip; windows-latest canceled at ~20m twice on this SHA (no failing assertion in log; ship-gate classifies base_preexisting_failure) — stopped blind reruns
  • Local tip: focused gui tests for resource/seed/section-tabs/usage green after merge

Gate

Hard blockers: (1) reviewDecision: CHANGES_REQUESTED@Ingwannu re-review required; (2) windows-latest infra cancel / base-preexisting — not a product patch in this GUI PR

Bottom line

Product + review-thread work on #824 is done through c25fcb1d (including approved simplify). Not merge-ready: need @Ingwannu tip re-review and a green windows-latest (or confirmed base follow-up). No further simplification pass.

@Wibias

Wibias commented Aug 1, 2026

Copy link
Copy Markdown
Collaborator Author

[shipping-github] Security review

PR / issue: #824 @ c25fcb1d
Decision: Pass
Risk: Low

Findings

none confirmed

Summary

Re-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

  • none new

Fixes this session

  • none security-specific (898cf793 / 660b47ae were correctness/UX)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants