dashboard: 6 UI/UX fixes (status colors, stat refresh, action transition, mobile, loader)#845
Conversation
📝 WalkthroughWalkthroughBox status displays now use updated error and dim colors, show a disabled working state during transitions, and the dashboard loading, sidebar, and boxes stat cards have updated layout and refresh behavior. ChangesBox state UI updates
Dashboard shell and stats presentation
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
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 docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint install failed: dependency version conflict. Check your lock file or package.json. 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 |
…efresh, action transition, mobile stats, terminal loader - stopped vs error: ERROR gets its own red (STATUS.error); stopped is now grey, no longer identical to error. (BoxTable + BoxDetails) - header: more L/R padding on the top bar edge cells. - stat counts refresh on every box change: markAllBoxQueriesAsStale now also invalidates the ['boxesCount'] queries (separate key), so cards stay in sync via the existing socket/action invalidation. - action button no longer vanishes mid-transition: a disabled spinner placeholder fills the slot during starting/stopping. (table rows + detail strip) - mobile stat cards collapse to a compact 3-up row (was 3 stacked), reclaiming list space. - LoadingFallback restyled to a terminal 'booting console' screen to match the console aesthetic.
law-chain-hot
force-pushed
the
codex/dashboard-ui-fixes
branch
from
79a5c68 to
4bc0e4c
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
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)
apps/dashboard/src/pages/Boxes.tsx (1)
884-911: 🩺 Stability & Availability | 🟡 Minor | ⚡ Quick winStat value is invisible to screen readers on desktop.
On
sm+, the numeric value is rendered only as the visualDotMatrix(the text value at Line 900 issm:hidden→display:none, removed from the a11y tree). Screen-reader users get the label and sub but not the count. Add ansr-onlytext value (oraria-label) on the desktop block.♿ Proposed fix
{/* desktop: dot-matrix value + sub label */} - <div className="hidden items-end gap-[10px] sm:flex"> + <div className="hidden items-end gap-[10px] sm:flex"> + <span className="sr-only">{value}</span> {isNumeric(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 `@apps/dashboard/src/pages/Boxes.tsx` around lines 884 - 911, The desktop stat block in Boxes is hiding the numeric value from assistive tech because the visible DotMatrix is not readable and the mobile text is sm:hidden. Update the desktop rendering path in the stat card component so the value is exposed to screen readers, either by adding an sr-only text node or an aria-label on the container that includes the value. Use the existing DotMatrix and isNumeric branches as the place to attach the accessible text without changing the visual layout.
🧹 Nitpick comments (2)
apps/dashboard/src/components/BoxTable/index.tsx (1)
151-155: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueWorking-state spinner icon differs from
BoxDetails.This transitioning action uses
Loader2, while the equivalent disabled “working…” button inapps/dashboard/src/components/boxes/BoxDetails.tsx(Line 365) usesRefreshCw. Both spin, but aligning on a single icon keeps the transition affordance visually consistent across the table and detail views. The logic and disabled handling here are otherwise correct.🤖 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 `@apps/dashboard/src/components/BoxTable/index.tsx` around lines 151 - 155, The working-state button in BoxTable uses a different spinner icon than the matching disabled “working…” state in BoxDetails, so align the transition affordance for consistency. Update the transitioning branch in BoxTable’s render logic to use the same icon as the BoxDetails working-state button, while keeping the existing disabled behavior and conditional checks unchanged.apps/dashboard/src/pages/Boxes.tsx (1)
205-208: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick win
['boxesCount']refetch fires on every socket event — risk of request storms.
markAllBoxQueriesAsStaleis invoked perbox.state.updatedevent (Line 306) and per action. Because this invalidation usesrefetchType: 'active'unconditionally (ignoringshouldRefetchActiveQueriesandstaleTime), a bulk start/stop of many boxes will emit many socket pushes, each triggering 3 count refetches. Consider debouncing the count invalidation (or gating it behindshouldRefetchActiveQueries) to coalesce bursts.🤖 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 `@apps/dashboard/src/pages/Boxes.tsx` around lines 205 - 208, The boxes count invalidation in markAllBoxQueriesAsStale is firing on every action and every box.state.updated socket event, which can cause request storms. Update the Boxes.tsx queryClient.invalidateQueries call for ['boxesCount'] to avoid unconditional refetching; either gate it behind shouldRefetchActiveQueries/staleTime logic or debounce/coalesce repeated calls so rapid bursts only trigger one count refresh. Keep the fix localized to the count-query invalidation path used by markAllBoxQueriesAsStale.
🤖 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 `@apps/dashboard/src/components/LoadingFallback.tsx`:
- Around line 24-32: The loading status in LoadingFallback is not exposed to
assistive technologies, so add a live region to the status container that wraps
the boot message and indicator. Update the relevant element in LoadingFallback
to include role="status" and aria-live="polite" so screen readers announce the
loading state and any longer-loading updates.
---
Outside diff comments:
In `@apps/dashboard/src/pages/Boxes.tsx`:
- Around line 884-911: The desktop stat block in Boxes is hiding the numeric
value from assistive tech because the visible DotMatrix is not readable and the
mobile text is sm:hidden. Update the desktop rendering path in the stat card
component so the value is exposed to screen readers, either by adding an sr-only
text node or an aria-label on the container that includes the value. Use the
existing DotMatrix and isNumeric branches as the place to attach the accessible
text without changing the visual layout.
---
Nitpick comments:
In `@apps/dashboard/src/components/BoxTable/index.tsx`:
- Around line 151-155: The working-state button in BoxTable uses a different
spinner icon than the matching disabled “working…” state in BoxDetails, so align
the transition affordance for consistency. Update the transitioning branch in
BoxTable’s render logic to use the same icon as the BoxDetails working-state
button, while keeping the existing disabled behavior and conditional checks
unchanged.
In `@apps/dashboard/src/pages/Boxes.tsx`:
- Around line 205-208: The boxes count invalidation in markAllBoxQueriesAsStale
is firing on every action and every box.state.updated socket event, which can
cause request storms. Update the Boxes.tsx queryClient.invalidateQueries call
for ['boxesCount'] to avoid unconditional refetching; either gate it behind
shouldRefetchActiveQueries/staleTime logic or debounce/coalesce repeated calls
so rapid bursts only trigger one count refresh. Keep the fix localized to the
count-query invalidation path used by markAllBoxQueriesAsStale.
🪄 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: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 74c923b9-aea0-4700-8aa9-7fc77439f835
📒 Files selected for processing (5)
apps/dashboard/src/components/BoxTable/index.tsxapps/dashboard/src/components/LoadingFallback.tsxapps/dashboard/src/components/Sidebar.tsxapps/dashboard/src/components/boxes/BoxDetails.tsxapps/dashboard/src/pages/Boxes.tsx
…pewriter dots (#847) Follow-up tweaks after testing #845 (which is now merged). Frontend-only, 4 files. - **Boxes table (desktop)**: hide the Created + Resource Quota columns (still shown on the mobile card). - **Terminal**: remove the paste button — native Cmd/Ctrl+V already pastes into the terminal — and drop the now-dead `pasteIntoTerminalIframe` util. - **LoadingFallback**: bigger terminal boot screen + typewriter ellipsis (1→2→3 dots, looping). Verified: dashboard build + targeted eslint clean. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Updated the loading experience with a typewriter-style “booting console” ellipsis. * **UI Improvements** * Simplified the desktop Boxes table by removing less critical columns to reduce visual clutter. * **Behavior Changes** * Terminal pasting now relies on the browser’s native paste shortcut (Cmd/Ctrl+V) instead of a separate paste action. * **UI Improvements** * Adjusted the Dashboard page height calculations to improve banner/padding alignment across viewports. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
2 participants
Six frontend UI/UX fixes on top of the restyle branch (stacked on #840 /
codex/pr829-uiux-mobile, so this PR shows only these fixes). Frontend-only.STOPPEDis now grey (parked) instead of sharingERROR's red; the two statuses are no longer visually identical (BoxTable + BoxDetails).box.state.updatedetc.) already existed and refreshed the list, but the['boxesCount']queries weren't included in the invalidation, so the cards went stale after an action. Now wired in (no polling added).booting console…ellipsis) to match the console aesthetic, replacing the generic skeleton.Verification: dashboard build + lint + vitest pass; manually exercised on
start:mock.Summary by CodeRabbit
New Features
Bug Fixes
Style