feat(console): warm, tactile UI redesign - #14
Conversation
|
Warning Review limit reached
More reviews will be available in 17 minutes and 26 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more credits in the billing tab to continue. ⌛ How to resolve this issue?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 credits. 🚦 How do rate limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan refill rate. 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, the refill rate gradually slows as usage increases. The highest same-day bursts are limited more strictly. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughA comprehensive visual redesign of the Auriga console: new design tokens (warmer HSL palette, paper-grain CSS variables, card shadow tokens) in ChangesConsole UI visual redesign
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 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 |
There was a problem hiding this comment.
🧹 Nitpick comments (3)
apps/console/components/job-form.tsx (1)
279-279: ⚡ Quick winAlign
CriterionRowbackground withPolicyRowfor consistency.
CriterionRow(line 279) usesbg-background, while the analogousPolicyRowinconfig-form.tsx(line 212) usesbg-muted/30. Both are similar container rows with borders. Consider using the same background token for visual consistency across the console.🤖 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/console/components/job-form.tsx` at line 279, The CriterionRow component in job-form.tsx uses the bg-background background class while the analogous PolicyRow in config-form.tsx uses bg-muted/30. To maintain visual consistency across the console, update the className on the div element containing rounded-lg border bg-background p-2.5 to use bg-muted/30 instead of bg-background, matching the styling pattern of PolicyRow.apps/console/app/globals.css (1)
117-117: ⚡ Quick winStylelint false positive on text-rendering value.
Stylelint is flagging
optimizeLegibilityand suggestingoptimizelegibility, but per the CSS specification (MDN, W3C),text-renderingvalues are case-sensitive andoptimizeLegibility(camelCase) is the correct value. The lowercase variant is not valid CSS.Suppress this line or add
optimizeLegibilityto thevalue-keyword-caserule'signoreKeywordslist.🔧 Proposed fix
line-height: 1.55; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; + /* stylelint-disable-next-line value-keyword-case */ text-rendering: optimizeLegibility; }🤖 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/console/app/globals.css` at line 117, The `text-rendering: optimizeLegibility;` property in globals.css is triggering an incorrect Stylelint warning suggesting the lowercase variant. Since `optimizeLegibility` (camelCase) is the correct CSS specification value, suppress this specific line using a Stylelint disable comment (e.g., /* stylelint-disable-next-line value-keyword-case */) above the text-rendering property, or alternatively add `optimizeLegibility` to the `ignoreKeywords` array in your Stylelint configuration's `value-keyword-case` rule to prevent this false positive from occurring again.Source: Linters/SAST tools
apps/console/components/ui/select.tsx (1)
8-8: 💤 Low valueConsider aligning horizontal padding with Input for visual consistency.
The Select component uses
px-2.5while the Input component (line 8 in input.tsx) usespx-3. This creates a subtle visual misalignment when these form controls appear together in forms.If the difference is intentional to accommodate native select styling, consider documenting it. Otherwise, standardizing on
px-3would improve visual consistency.Align padding with Input
- "flex h-9 w-full rounded-lg border border-input bg-background px-2.5 py-1 text-sm shadow-sm transition-colors focus-visible:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-50", + "flex h-9 w-full rounded-lg border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors focus-visible:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-50",🤖 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/console/components/ui/select.tsx` at line 8, The Select component uses `px-2.5` for horizontal padding while the Input component uses `px-3`, creating visual inconsistency when these form controls are used together. In the Select component's className string, change the horizontal padding value from `px-2.5` to `px-3` to align with the Input component's padding and maintain visual consistency across form controls.
🤖 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.
Nitpick comments:
In `@apps/console/app/globals.css`:
- Line 117: The `text-rendering: optimizeLegibility;` property in globals.css is
triggering an incorrect Stylelint warning suggesting the lowercase variant.
Since `optimizeLegibility` (camelCase) is the correct CSS specification value,
suppress this specific line using a Stylelint disable comment (e.g., /*
stylelint-disable-next-line value-keyword-case */) above the text-rendering
property, or alternatively add `optimizeLegibility` to the `ignoreKeywords`
array in your Stylelint configuration's `value-keyword-case` rule to prevent
this false positive from occurring again.
In `@apps/console/components/job-form.tsx`:
- Line 279: The CriterionRow component in job-form.tsx uses the bg-background
background class while the analogous PolicyRow in config-form.tsx uses
bg-muted/30. To maintain visual consistency across the console, update the
className on the div element containing rounded-lg border bg-background p-2.5 to
use bg-muted/30 instead of bg-background, matching the styling pattern of
PolicyRow.
In `@apps/console/components/ui/select.tsx`:
- Line 8: The Select component uses `px-2.5` for horizontal padding while the
Input component uses `px-3`, creating visual inconsistency when these form
controls are used together. In the Select component's className string, change
the horizontal padding value from `px-2.5` to `px-3` to align with the Input
component's padding and maintain visual consistency across form controls.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 8178914a-c4f8-4dd4-ae86-86ee419fcce0
📒 Files selected for processing (28)
apps/console/app/config/page.tsxapps/console/app/globals.cssapps/console/app/jobs/[id]/page.tsxapps/console/app/jobs/new/page.tsxapps/console/app/jobs/page.tsxapps/console/app/layout.tsxapps/console/app/login/page.tsxapps/console/app/page.tsxapps/console/app/skills/page.tsxapps/console/components/config-form.tsxapps/console/components/job-form.tsxapps/console/components/live-run.tsxapps/console/components/login-form.tsxapps/console/components/logout-button.tsxapps/console/components/nav-links.tsxapps/console/components/run-timeline-panel.tsxapps/console/components/run-timeline.tsxapps/console/components/sparkline.tsxapps/console/components/ui/badge.tsxapps/console/components/ui/bar.tsxapps/console/components/ui/button.tsxapps/console/components/ui/card.tsxapps/console/components/ui/empty-state.tsxapps/console/components/ui/input.tsxapps/console/components/ui/select.tsxapps/console/components/ui/table.tsxapps/console/components/ui/textarea.tsxapps/console/components/workspace-viewer.tsx
What
A full visual redesign of the web console (
apps/console) to make it modern, elegant, and textured — while keeping the solid bones (Tailwind v4 tokens, CVA primitives) and every component's props/behavior unchanged.Design direction (agreed up front): warm, tactile, layered · monochrome (no brand color) · system fonts (tuned hierarchy) · full scope. No new dependencies — "texture" is pure CSS.
Highlights
globals.css) — re-tinted the whole neutral ramp from cold to a warm cream/charcoal stone palette; added layered warm shadow tokens; a faint SVGfeTurbulencepaper grain over the page + elevated surfaces (.auriga-grain); a soft top wash; tuned leading/tracking. Dark mode is now a warm charcoal.Card, tactileButton(soft shadow +active:translate-y-px), refinedBadge/Table/Input/Textarea/Select/Bar, aSparklinewith an SSR-safe area fill, and a new reusableEmptyState.NavLinks(layout stays a server component).neutral-*); skills/config/forms + segmented mode tabs; fixed hardcoded colors inlogout-button.Verification
bun run typecheck+bun run build✓bun run test— 36/36 unit tests ✓bun run e2e— 4/4 Playwright incl. axe "no serious/critical a11y violations" (the warm palette holds WCAG contrast) ✓Reviewable as five focused commits (tokens → primitives → shell → core pages → remaining pages).
🤖 Generated with Claude Code
Summary by CodeRabbit
Release Notes
New Features
Style