feat(web): unified visual design, a11y, and perf optimizations across all apps#155
Conversation
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
|
Warning Rate limit exceeded
⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughCentralizes frontend design tokens into a new Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested labels
🚥 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 |
✅ Contributor ReportUser: @yacosta738
Contributor Report evaluates based on public GitHub activity. Analysis period: 2025-03-07 to 2026-03-07 |
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 11
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In @.agents/skills/frontend-design/SKILL.md:
- Line 41: The guideline line "Interpret creatively and make unexpected
choices..." (specifically the sentence "No design should be the same. Vary
between light and dark themes, different fonts, different aesthetics. NEVER
converge on common choices (Space Grotesk, for example) across generations.")
conflicts with the shared brand system; change that text to instruct
contributors to start from the shared brand primitives (tokens and typography)
and only diverge when a documented product requirement demands it, allow
controlled variation with justification and review rather than unconditional
divergence, and reference "tokens" and "typography" as the starting point for
any design work.
- Around line 33-39: The "NEVER use ... system fonts" line in the Typography
guidance is too absolute—update the SKILL.md Typography section to allow system
fonts as sensible fallbacks rather than banning them: keep the recommendation to
use a distinctive primary display font paired with a refined body font, but
require explicit, resilient fallback stacks (e.g., language-appropriate
fallbacks and generic-family fallbacks), mention
accessibility/font-loading/language coverage considerations, and replace the
"NEVER use" phrasing with a clause that forbids relying solely on generic
defaults while mandating sane fallbacks and progressive enhancement.
- Around line 1-4: Add a new row for the skill named "frontend-design" to the
Available Skills table in AGENTS.md following the existing table pattern:
include the skill name "frontend-design", the short description "Create
distinctive, production-grade frontend interfaces with high design quality", and
trigger conditions mirroring the other entries (e.g., when the user asks to
build web components, pages, or applications). Ensure formatting matches the
table's Markdown structure and that the new entry is placed with the other
skills in the Available Skills list.
In `@clients/web/apps/chat/index.html`:
- Around line 7-9: Remove the duplicate font loading: either delete the three
<link> tags that load Google Fonts (the rel="preconnect" links and the <link
href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet" />) from
the HTML entry, or—if you prefer the HTML-based approach for render-blocking
optimization—keep those <link> tags here and remove the corresponding `@import`
url(...) line from tokens.css; ensure only one method loads the Manrope, Syne
and JetBrains Mono families to avoid duplicate requests.
In `@clients/web/apps/chat/src/style.css`:
- Around line 67-70: The box-shadow uses a hardcoded rgba value duplicating the
accent — extract that into a token in tokens.css (e.g.,
--color-accent-glow-subtle) and replace the hardcoded rgba(129, 140, 248, 0.1)
in the style.css box-shadow rule with the new token; update tokens.css to define
--color-accent-glow-subtle and then reference that variable in the box-shadow
alongside --color-accent-glow to keep colors centralized and maintainable.
In `@clients/web/apps/dashboard/index.html`:
- Around line 7-9: Duplicate font loading present via the three <link> tags that
preconnect and load Google Fonts (Manrope, Syne, JetBrains Mono) — pick the same
font-loading strategy used in the chat app and make dashboard consistent: either
keep the HTML <link rel="preconnect"> + <link href="..."> approach for these
families or remove these tags and load fonts via your CSS (e.g.,
`@import/`@font-face), and ensure you remove the duplicate/alternative loading
method so only one approach is used for Manrope, Syne, and JetBrains Mono across
apps.
In `@clients/web/apps/docs/src/styles/custom.css`:
- Around line 306-311: The heading rule for .sl-markdown-content h1..h4 uses
only var(--corvus-font-heading) without fallback fonts; update the font-family
declaration in that selector to include a robust fallback stack (e.g., local
variable first, then common system fonts like Inter, system-ui, -apple-system,
'Segoe UI', Roboto, 'Helvetica Neue', Arial, and a generic sans-serif) so the
headings render predictably if the CSS variable or custom font fails to load.
- Around line 17-18: The CSS custom properties --sl-font and --sl-font-mono
currently reference var(--corvus-font-sans) and var(--corvus-font-mono) with no
fallbacks; update the declarations for --sl-font and --sl-font-mono to provide
robust fallback font stacks by using the var() second-argument fallback (e.g.,
system/stack and monospace stack) so typography still works if
`@corvus/shared/tokens.css` or those variables are missing; change the assignments
where --sl-font and --sl-font-mono are defined to include these fallback
font-family lists.
- Around line 168-169: Update the font-family declaration that currently uses
the CSS variable --corvus-font-heading to provide a safe fallback stack if the
variable is undefined; modify the rule that sets font-family:
var(--corvus-font-heading) (the hero/heading style) to include a comma-separated
fallback family list (e.g., a preferred system font and common sans-serif
options) so headings fall back predictably while keeping font-weight: 800
unchanged.
In `@clients/web/apps/marketing/src/layouts/MarketingLayout.astro`:
- Around line 69-71: Replace external Google Fonts usage with self-hosted font
assets: add Manrope, Syne, and JetBrains Mono font files (only the weights used)
into the app static assets (e.g., public/assets/fonts), create `@font-face` rules
in clients/web/packages/shared/tokens.css to reference those local files and
remove the existing `@import` url(...) there, remove the preconnect and external
stylesheet link tags from MarketingLayout.astro and from
clients/web/apps/dashboard/index.html and clients/web/apps/chat/index.html, and
add <link rel="preload" as="font" type="font/woff2" href="..."> tags for the
specific weights you actually use; ensure your CSS uses the new local
font-family names and that the build serves the fonts from the chosen assets
path.
In `@clients/web/packages/shared/tokens.css`:
- Around line 7-8: Remove the duplicate Google Fonts import in
clients/web/packages/shared/tokens.css by deleting the `@import` url(...) rule
(the line that loads Manrope, Syne, and JetBrains Mono); keep the existing HTML
<link> font tags in the entry HTMLs (chat/index.html and dashboard/index.html)
to preserve preconnect/link benefits, and confirm there are no other CSS files
importing the same Google Fonts so fonts are only loaded from the HTML links.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: eb9ea83e-6008-414c-966d-e2d8e799db4e
⛔ Files ignored due to path filters (1)
clients/web/pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (11)
.agents/skills/frontend-design/SKILL.mdclients/web/apps/chat/index.htmlclients/web/apps/chat/package.jsonclients/web/apps/chat/src/App.vueclients/web/apps/chat/src/style.cssclients/web/apps/dashboard/index.htmlclients/web/apps/dashboard/package.jsonclients/web/apps/dashboard/src/style.cssclients/web/apps/docs/src/styles/custom.cssclients/web/apps/marketing/src/layouts/MarketingLayout.astroclients/web/packages/shared/tokens.css
📜 Review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: pr-checks
- GitHub Check: sonar
- GitHub Check: Cloudflare Pages
- GitHub Check: pr-checks
🧰 Additional context used
📓 Path-based instructions (2)
**/*
⚙️ CodeRabbit configuration file
**/*: Security first, performance second.
Validate input boundaries, auth/authz implications, and secret management.
Look for behavioral regressions, missing tests, and contract breaks across modules.
Files:
clients/web/apps/docs/src/styles/custom.cssclients/web/apps/dashboard/src/style.cssclients/web/apps/chat/index.htmlclients/web/apps/dashboard/package.jsonclients/web/apps/marketing/src/layouts/MarketingLayout.astroclients/web/apps/chat/src/App.vueclients/web/apps/dashboard/index.htmlclients/web/apps/chat/package.jsonclients/web/apps/chat/src/style.cssclients/web/packages/shared/tokens.css
**/*.vue
⚙️ CodeRabbit configuration file
**/*.vue: Enforce Vue 3 Composition API with <script setup>.
Ensure accessibility (A11y) and proper use of Tailwind CSS classes.
Check for proper prop validation and emitted events documentation.
Files:
clients/web/apps/chat/src/App.vue
🧠 Learnings (1)
📚 Learning: 2026-02-17T07:28:38.934Z
Learnt from: CR
Repo: dallay/corvus PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-02-17T07:28:38.934Z
Learning: Applies to .agents/AGENTS.md : Document agent configurations and capabilities in AGENTS.md
Applied to files:
.agents/skills/frontend-design/SKILL.md
🪛 Stylelint (17.4.0)
clients/web/packages/shared/tokens.css
[error] 8-8: Expected "url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Syne:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap")" to be ""https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Syne:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap"" (import-notation)
(import-notation)
[error] 15-15: Expected "BlinkMacSystemFont" to be "blinkmacsystemfont" (value-keyword-case)
(value-keyword-case)
[error] 18-18: Expected "SFMono-Regular" to be "sfmono-regular" (value-keyword-case)
(value-keyword-case)
[error] 18-18: Expected "Consolas" to be "consolas" (value-keyword-case)
(value-keyword-case)
🔇 Additional comments (10)
clients/web/apps/dashboard/package.json (1)
23-23: LGTM!Workspace dependency correctly added. The
exportsmap in@corvus/shared/package.jsonproperly declares the"./tokens.css"subpath, enabling the CSS import instyle.css.clients/web/apps/chat/package.json (1)
21-21: LGTM!Consistent with the dashboard setup. Workspace dependency properly declared.
clients/web/packages/shared/tokens.css (2)
14-18: Static analysis hints are false positives here.Stylelint flags
BlinkMacSystemFont,SFMono-Regular, andConsolasfor casing, but these are proper vendor font family names. Font names are case-insensitive per CSS spec, but preserving original casing matches documentation and improves readability.
82-115: Well-structured alias system for cross-app compatibility.The semantic aliases (
--color-bg-primary,--color-accent, etc.) provide a clean abstraction layer that will ease future theme changes without touching component code.clients/web/apps/dashboard/src/style.css (2)
1-2: LGTM!Import order is correct — tokens before Tailwind ensures CSS variables are available for use in utility classes.
14-16: Good use of100dvhfor mobile viewport handling.Dynamic viewport height properly accounts for mobile browser chrome (address bar, etc.).
clients/web/apps/chat/src/App.vue (1)
391-401: Good a11y improvement for icon-only button.Dynamic
aria-labelcorrectly reflects the toggle state, ensuring screen reader users understand the button's current action.clients/web/apps/chat/src/style.css (1)
1-2: LGTM!Shared tokens import follows the same pattern as dashboard.
clients/web/apps/docs/src/styles/custom.css (1)
7-7: All three font variables (--corvus-font-heading,--corvus-font-sans,--corvus-font-mono) are properly defined in the imported tokens.css file with complete values and appropriate fallbacks. No action needed.clients/web/apps/marketing/src/layouts/MarketingLayout.astro (1)
18-24: Good OG image boundary validation.This now constrains
og:imageto site-relative or explicit HTTP(S) URLs and falls back safely for everything else. Nice hardening for a user-controlled prop path.As per coding guidelines, "Security first, performance second. Validate input boundaries, auth/authz implications, and secret management."
Also applies to: 42-49
Deploying corvus with
|
| Latest commit: |
04e6faa
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://d0538278.corvus-42x.pages.dev |
| Branch Preview URL: | https://frontend.corvus-42x.pages.dev |
There was a problem hiding this comment.
♻️ Duplicate comments (2)
clients/web/packages/shared/tokens.css (1)
7-8:⚠️ Potential issue | 🟠 MajorDuplicate font loading — choose HTML
<link>OR CSS@import, not both.The HTML entry points (
chat/index.html,dashboard/index.html) already load these fonts via<link>withpreconnect. This@importtriggers a second request.Recommendation: Remove this
@importand keep the HTML<link>approach—HTML preconnect provides better LCP since font discovery starts earlier in parsing.🚀 Proposed fix (remove CSS import)
-/* ── Google Fonts (Distinctive Typography) ── */ -@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Syne:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap"); +/* ── Typography loaded via HTML <link> for optimal LCP ── */🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@clients/web/packages/shared/tokens.css` around lines 7 - 8, Remove the duplicate Google Fonts `@import` from tokens.css (the `@import` line referencing fonts.googleapis.com) and rely on the existing <link> preload/preconnect entries in chat/index.html and dashboard/index.html instead; locate the `@import` statement in clients/web/packages/shared/tokens.css and delete it so fonts are loaded only via the HTML link tags to preserve preconnect and improve LCP.clients/web/apps/docs/src/styles/custom.css (1)
17-18:⚠️ Potential issue | 🟡 MinorAdd fallback fonts for resilience.
These root font tokens lack fallbacks. If
tokens.cssfails to load, typography breaks. The heading rules at lines 168 and 310 correctly include fallbacks—apply the same pattern here.🛡️ Proposed fix
- --sl-font: var(--corvus-font-sans); - --sl-font-mono: var(--corvus-font-mono); + --sl-font: var(--corvus-font-sans, system-ui, -apple-system, sans-serif); + --sl-font-mono: var(--corvus-font-mono, ui-monospace, 'Cascadia Code', monospace);🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@clients/web/apps/docs/src/styles/custom.css` around lines 17 - 18, The root CSS custom properties --sl-font and --sl-font-mono currently reference named tokens without fallbacks; update their definitions so they include safe fallback font stacks (e.g., a UI font stack for --sl-font and a generic monospace for --sl-font-mono) using the var(..., fallback) pattern so typography still renders if tokens.css fails—modify the --sl-font and --sl-font-mono declarations accordingly to include those fallback lists.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@clients/web/apps/docs/src/styles/custom.css`:
- Around line 17-18: The root CSS custom properties --sl-font and --sl-font-mono
currently reference named tokens without fallbacks; update their definitions so
they include safe fallback font stacks (e.g., a UI font stack for --sl-font and
a generic monospace for --sl-font-mono) using the var(..., fallback) pattern so
typography still renders if tokens.css fails—modify the --sl-font and
--sl-font-mono declarations accordingly to include those fallback lists.
In `@clients/web/packages/shared/tokens.css`:
- Around line 7-8: Remove the duplicate Google Fonts `@import` from tokens.css
(the `@import` line referencing fonts.googleapis.com) and rely on the existing
<link> preload/preconnect entries in chat/index.html and dashboard/index.html
instead; locate the `@import` statement in clients/web/packages/shared/tokens.css
and delete it so fonts are loaded only via the HTML link tags to preserve
preconnect and improve LCP.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
Run ID: ee2cd04e-c265-41ed-a5e0-c7144fd65fb3
📒 Files selected for processing (6)
.agents/AGENTS.md.agents/skills/frontend-design/SKILL.md.github/workflows/sonarqube-analysis.ymlclients/web/apps/chat/src/style.cssclients/web/apps/docs/src/styles/custom.cssclients/web/packages/shared/tokens.css
📜 Review details
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: sonar
- GitHub Check: Cloudflare Pages
🧰 Additional context used
📓 Path-based instructions (2)
**/*
⚙️ CodeRabbit configuration file
**/*: Security first, performance second.
Validate input boundaries, auth/authz implications, and secret management.
Look for behavioral regressions, missing tests, and contract breaks across modules.
Files:
clients/web/apps/chat/src/style.cssclients/web/apps/docs/src/styles/custom.cssclients/web/packages/shared/tokens.css
.agents/AGENTS.md
📄 CodeRabbit inference engine (AGENTS.md)
.agents/AGENTS.md: Document agent configurations and capabilities in AGENTS.md
Maintain comprehensive agent metadata including name, description, purpose, and capabilities
Include version information and compatibility details for agents
Files:
.agents/AGENTS.md
🧠 Learnings (3)
📚 Learning: 2026-02-17T07:28:38.934Z
Learnt from: CR
Repo: dallay/corvus PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-02-17T07:28:38.934Z
Learning: Applies to .agents/AGENTS.md : Document agent configurations and capabilities in AGENTS.md
Applied to files:
.agents/skills/frontend-design/SKILL.md.agents/AGENTS.md
📚 Learning: 2026-02-17T07:28:38.934Z
Learnt from: CR
Repo: dallay/corvus PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-02-17T07:28:38.934Z
Learning: Applies to .agents/AGENTS.md : Maintain comprehensive agent metadata including name, description, purpose, and capabilities
Applied to files:
.agents/skills/frontend-design/SKILL.md
📚 Learning: 2026-02-17T12:31:17.076Z
Learnt from: CR
Repo: dallay/corvus PR: 0
File: clients/agent-runtime/AGENTS.md:0-0
Timestamp: 2026-02-17T12:31:17.076Z
Learning: Applies to clients/agent-runtime/.github/**/*.{yml,yaml} : For workflow/template-only changes, ensure YAML/template syntax validity
Applied to files:
.github/workflows/sonarqube-analysis.yml
🪛 Stylelint (17.4.0)
clients/web/packages/shared/tokens.css
[error] 8-8: Expected "url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Syne:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap")" to be ""https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Syne:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap"" (import-notation)
(import-notation)
[error] 15-15: Expected "BlinkMacSystemFont" to be "blinkmacsystemfont" (value-keyword-case)
(value-keyword-case)
[error] 18-18: Expected "SFMono-Regular" to be "sfmono-regular" (value-keyword-case)
(value-keyword-case)
[error] 18-18: Expected "Consolas" to be "consolas" (value-keyword-case)
(value-keyword-case)
🔇 Additional comments (9)
.agents/AGENTS.md (1)
178-178: LGTM!The skill entry follows the established table format and appropriately documents the new frontend-design capability with clear trigger conditions.
clients/web/apps/chat/src/style.css (2)
1-1: LGTM!Centralizing design tokens via the shared import improves maintainability and consistency across apps.
69-69: Good fix — token with fallback addresses maintainability concern.The
--corvus-accent-glow-subtletoken with an inline fallback provides resilience while centralizing the color definition..agents/skills/frontend-design/SKILL.md (1)
1-43: LGTM!The skill spec establishes clear design philosophy while respecting the shared brand system through explicit token references in line 41. The guidance balances creative freedom with brand consistency.
clients/web/apps/docs/src/styles/custom.css (2)
168-169: Good — heading font includes proper fallback chain.
306-311: Good — markdown heading fonts include proper fallback chain.clients/web/packages/shared/tokens.css (2)
51-53: Good addition — centralizes the accent glow token.The
--corvus-accent-glow-subtletoken enables consistent usage across apps while allowing fallbacks in consuming stylesheets.
85-118: Good compatibility layer for existing apps.The alias system allows gradual migration while maintaining backward compatibility with existing Dashboard & Chat variable references.
.github/workflows/sonarqube-analysis.yml (1)
151-152:⚠️ Potential issue | 🟠 MajorRemove deprecated
sonar.typescript.nodeproperty—it's no longer supported in current SonarQube versions.The
sonar.typescript.nodeproperty was deprecated and dropped from modern SonarQube/SonarScanner. The current replacement issonar.nodejs.executable(which expects a full path to the Node binary). However, since Node.js is already set up viaactions/setup-nodeearlier in the workflow, SonarQube's TypeScript analyzer will auto-provision Node automatically—this property can be safely removed entirely.⛔ Skipped due to learnings
Learnt from: CR Repo: dallay/corvus PR: 0 File: clients/agent-runtime/AGENTS.md:0-0 Timestamp: 2026-02-17T12:31:17.076Z Learning: Applies to clients/agent-runtime/.github/**/*.{yml,yaml} : For workflow/template-only changes, ensure YAML/template syntax validity
1 participant
This pull request introduces a major, coordinated overhaul of the Corvus web apps' design system, focusing on a new, distinctive brand aesthetic and improved frontend consistency. The main changes include the introduction of a shared design token system, a new typographic and color palette, and the refactoring of app styles to consume these shared tokens. Additionally, it updates font loading to use Google Fonts for a more unique look, and adds documentation for the new frontend design skill.
Design System & Brand Consistency
tokens.css) in@corvus/shared, defining a unified color palette, gradients, glass effects, border radii, and especially a distinctive typography stack using Manrope, Syne, and JetBrains Mono via Google Fonts. This file also provides CSS variable aliases for compatibility across apps. [1] [2] [3]chatanddashboardapps to import and use these shared tokens, removing their local CSS variables and ensuring consistent styling across products. [1] [2]Typography & Font Loading
chat,dashboard,marketing) to load Manrope, Syne, and JetBrains Mono from Google Fonts, and set up preconnect for performance. [1] [2] [3]docs) to use the new font variables for both sans-serif and monospace text, and applied the heading font for all major headings. [1] [2] [3]Color & Visual Updates
App Integration & Dependency Management
@corvus/sharedas a dependency inchatanddashboardapps, and updated the pnpm lockfile to reflect this. [1] [2] [3] [4]Documentation & Guidelines
frontend-designskill documentation, outlining the philosophy, guidelines, and expectations for building distinctive, production-grade frontend interfaces that avoid generic AI-generated aesthetics.These changes establish a strong, memorable visual identity for Corvus and make it significantly easier to maintain brand consistency across all frontend surfaces.