feat(web): add semantic design system foundation#14
Conversation
|
Warning Review limit reached
Next review available in: 50 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 (4)
📝 WalkthroughWalkthroughThis PR establishes semantic light/dark theme tokens, migrates shared UI styling to those tokens, adds global base styles, centralizes Sonner toasts in ChangesFrontend design system foundation
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)Toast compositionsequenceDiagram
participant Feature
participant AppToaster
participant Sonner
Feature->>Sonner: call toast
AppToaster->>Sonner: render configured host
AppToaster->>Sonner: apply resolved light/dark theme
Sonner-->>Feature: display toast
Route title derivationsequenceDiagram
participant TanStackRouter
participant AppShell
participant BrowserDocument
TanStackRouter->>AppShell: provide active route matches
AppShell->>AppShell: select deepest staticData.title
AppShell->>BrowserDocument: set document.title
AppShell-->>TanStackRouter: render shell with page title
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 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 `@docs/increments/active/2026-07-23-frontend-design-system-foundation/plan.md`:
- Around line 21-22: Complete the documentation lifecycle for this increment:
consolidate the current facts, specs, tests, and decisions, then move the
increment from the active collection to the completed collection. Mark the
corresponding checklist item in the increment plan as complete after both
actions are finished.
In `@web/src/components/app-shell/app-shell.tsx`:
- Around line 11-18: Update the pageTitle fallback in the useMatches selector so
the standalone product title is not suffixed with “· OrgMemory” by the
useEffect. Preserve the existing route-title formatting while ensuring unmatched
routes produce only the product title.
In `@web/src/styles/base.css`:
- Line 23: Update the text-rendering declaration near the base styles to use the
lowercase lint-compliant keyword optimizelegibility, preserving the existing
rendering 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: 94935308-0e81-44f3-ac26-231660060527
⛔ Files ignored due to path filters (1)
web/public/favicon.svgis excluded by!**/*.svg
📒 Files selected for processing (25)
docs/guidelines/frontend-design-system.mddocs/increments/active/2026-07-23-frontend-design-system-foundation/design.mddocs/increments/active/2026-07-23-frontend-design-system-foundation/plan.mdweb/index.htmlweb/src/components/ai-elements/conversation.tsxweb/src/components/app-shell/app-shell.tsxweb/src/components/app-toaster.tsxweb/src/components/ui/badge.tsxweb/src/components/ui/button.tsxweb/src/components/ui/dropdown-menu.tsxweb/src/components/ui/input-group.tsxweb/src/components/ui/input.tsxweb/src/components/ui/select.tsxweb/src/components/ui/switch.tsxweb/src/components/ui/tabs.tsxweb/src/features/assistant/components/assistant-page.tsxweb/src/features/sources/components/sources-page.tsxweb/src/index.cssweb/src/main.tsxweb/src/route-metadata.d.tsweb/src/routes/_authenticated/index.tsxweb/src/routes/_authenticated/sources.tsxweb/src/styles/base.cssweb/src/styles/theme.cssweb/src/styles/tokens.css
📜 Review details
🧰 Additional context used
📓 Path-based instructions (7)
**/*
📄 CodeRabbit inference engine (CLAUDE.md)
**/*: Before changing unfamiliar Spring Boot 4, Spring Modulith 2, Spring AI 2, Gradle, React, Vite, Tailwind, or TypeScript APIs, consult Context7/current official documentation and the projectorgmemory-*verification skills.
Readdocs/guidelines/agent-safety.mdbefore retrieval, AI, MCP, permission, upload, graph, or export work.
Never commit.envfiles, provider keys, tokens, or customer data.
Run the relevant gates fromdocs/guidelines/testing-harness.md; use a terminating clean test as the context gate, and do not treatbootRunas verification.
Current behavior belongs in architecture/specs only after it exists in code; intent belongs in vision, roadmap, or an active increment, and repository state must not be duplicated across documents.
Files:
web/src/routes/_authenticated/index.tsxweb/src/routes/_authenticated/sources.tsxweb/src/features/assistant/components/assistant-page.tsxweb/index.htmlweb/src/features/sources/components/sources-page.tsxweb/src/components/app-toaster.tsxweb/src/components/ui/badge.tsxweb/src/route-metadata.d.tsdocs/increments/active/2026-07-23-frontend-design-system-foundation/plan.mdweb/src/components/ui/select.tsxweb/src/components/ui/input.tsxweb/src/styles/base.cssweb/src/components/ui/switch.tsxweb/src/main.tsxdocs/guidelines/frontend-design-system.mdweb/src/index.cssweb/src/components/ui/button.tsxdocs/increments/active/2026-07-23-frontend-design-system-foundation/design.mdweb/src/components/app-shell/app-shell.tsxweb/src/components/ai-elements/conversation.tsxweb/src/components/ui/tabs.tsxweb/src/components/ui/dropdown-menu.tsxweb/src/styles/theme.cssweb/src/styles/tokens.cssweb/src/components/ui/input-group.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
For frontend files, use Oxlint, TypeScript typecheck, the production build, and browser tests when the UI flow matters.
Files:
web/src/routes/_authenticated/index.tsxweb/src/routes/_authenticated/sources.tsxweb/src/features/assistant/components/assistant-page.tsxweb/src/features/sources/components/sources-page.tsxweb/src/components/app-toaster.tsxweb/src/components/ui/badge.tsxweb/src/route-metadata.d.tsweb/src/components/ui/select.tsxweb/src/components/ui/input.tsxweb/src/components/ui/switch.tsxweb/src/main.tsxweb/src/components/ui/button.tsxweb/src/components/app-shell/app-shell.tsxweb/src/components/ai-elements/conversation.tsxweb/src/components/ui/tabs.tsxweb/src/components/ui/dropdown-menu.tsxweb/src/components/ui/input-group.tsx
**/*.{ts,tsx,js,jsx,json,html,css,scss}
📄 CodeRabbit inference engine (CLAUDE.md)
Do not run JetBrains IDE inspection on TypeScript, TSX, or web configuration files.
Files:
web/src/routes/_authenticated/index.tsxweb/src/routes/_authenticated/sources.tsxweb/src/features/assistant/components/assistant-page.tsxweb/index.htmlweb/src/features/sources/components/sources-page.tsxweb/src/components/app-toaster.tsxweb/src/components/ui/badge.tsxweb/src/route-metadata.d.tsweb/src/components/ui/select.tsxweb/src/components/ui/input.tsxweb/src/styles/base.cssweb/src/components/ui/switch.tsxweb/src/main.tsxweb/src/index.cssweb/src/components/ui/button.tsxweb/src/components/app-shell/app-shell.tsxweb/src/components/ai-elements/conversation.tsxweb/src/components/ui/tabs.tsxweb/src/components/ui/dropdown-menu.tsxweb/src/styles/theme.cssweb/src/styles/tokens.cssweb/src/components/ui/input-group.tsx
web/src/**/*.{ts,tsx}
⚙️ CodeRabbit configuration file
web/src/**/*.{ts,tsx}: OAuth access and refresh tokens must never enter browser JavaScript or
browser storage. Use the HttpOnly BFF session, CSRF-protected mutations,
generated Hey API data clients, accessible states, and both light and
dark themes. Handwritten transport is reserved for documented protocol
flows such as navigation redirects and streaming.
Files:
web/src/routes/_authenticated/index.tsxweb/src/routes/_authenticated/sources.tsxweb/src/features/assistant/components/assistant-page.tsxweb/src/features/sources/components/sources-page.tsxweb/src/components/app-toaster.tsxweb/src/components/ui/badge.tsxweb/src/route-metadata.d.tsweb/src/components/ui/select.tsxweb/src/components/ui/input.tsxweb/src/components/ui/switch.tsxweb/src/main.tsxweb/src/components/ui/button.tsxweb/src/components/app-shell/app-shell.tsxweb/src/components/ai-elements/conversation.tsxweb/src/components/ui/tabs.tsxweb/src/components/ui/dropdown-menu.tsxweb/src/components/ui/input-group.tsx
docs/**/*.md
📄 CodeRabbit inference engine (docs/conventions.md)
docs/**/*.md: KeepARCHITECTURE.mdand specification documents limited to implemented facts; record intent in vision/roadmap documents, keep active increment plans separate, and explicitly supersede append-only decisions.
Do not create status-summary documents that duplicate existing sources of truth.
Files:
docs/increments/active/2026-07-23-frontend-design-system-foundation/plan.mddocs/guidelines/frontend-design-system.mddocs/increments/active/2026-07-23-frontend-design-system-foundation/design.md
⚙️ CodeRabbit configuration file
docs/**/*.md: Preserve the thin-map documentation harness. Current facts belong in
architecture, specs, and tests only after implementation; future intent
belongs in vision, roadmap, or one active increment. Flag duplicated or
contradictory sources of truth.
Files:
docs/increments/active/2026-07-23-frontend-design-system-foundation/plan.mddocs/guidelines/frontend-design-system.mddocs/increments/active/2026-07-23-frontend-design-system-foundation/design.md
docs/**/*
📄 CodeRabbit inference engine (docs/conventions.md)
Keep provider credentials out of clients, logs, documentation, and git.
Files:
docs/increments/active/2026-07-23-frontend-design-system-foundation/plan.mddocs/guidelines/frontend-design-system.mddocs/increments/active/2026-07-23-frontend-design-system-foundation/design.md
docs/increments/active/**/*.md
📄 CodeRabbit inference engine (CLAUDE.md)
For each increment, create
docs/increments/active/YYYY-MM-DD-slug/design.mdfollowed byplan.md; execute one coherent slice, consolidate current facts/specs/tests/decisions, and move the increment tocompleted.
Files:
docs/increments/active/2026-07-23-frontend-design-system-foundation/plan.mddocs/increments/active/2026-07-23-frontend-design-system-foundation/design.md
🧠 Learnings (1)
📓 Common learnings
Learnt from: CR
Repo: kl3inIT/OrgMemory
Timestamp: 2026-07-22T17:33:26.876Z
Learning: Do not copy old page layouts solely to preserve route parity; reuse old code only when it is generic, tested, and compatible with the new information architecture.
🪛 Biome (2.5.3)
web/src/styles/theme.css
[error] 1-101: Tailwind-specific syntax is disabled.
(parse)
🪛 Stylelint (17.14.0)
web/src/styles/base.css
[error] 23-23: Expected "optimizeLegibility" to be "optimizelegibility" (value-keyword-case)
(value-keyword-case)
web/src/styles/theme.css
[error] 1-1: Unexpected unknown at-rule "@theme" (scss/at-rule-no-unknown)
(scss/at-rule-no-unknown)
🔇 Additional comments (24)
web/src/components/app-toaster.tsx (1)
1-32: LGTM!web/src/main.tsx (1)
10-10: LGTM!Also applies to: 49-49
web/src/components/app-shell/app-shell.tsx (1)
1-2: LGTM!web/src/route-metadata.d.ts (1)
1-7: LGTM!web/src/routes/_authenticated/index.tsx (1)
7-7: LGTM!web/src/routes/_authenticated/sources.tsx (1)
7-7: LGTM!docs/increments/active/2026-07-23-frontend-design-system-foundation/design.md (1)
1-52: LGTM!web/src/styles/tokens.css (1)
1-205: LGTM!web/src/components/ui/switch.tsx (1)
20-28: LGTM!web/src/components/ui/tabs.tsx (1)
65-68: LGTM!web/src/components/ai-elements/conversation.tsx (1)
88-90: LGTM!Also applies to: 156-158
web/src/features/assistant/components/assistant-page.tsx (1)
109-109: LGTM!web/src/features/sources/components/sources-page.tsx (1)
63-63: LGTM!web/index.html (1)
7-7: 🎯 Functional CorrectnessNo change needed.
/favicon.svgmaps to the existingweb/public/favicon.svgasset.web/src/styles/theme.css (1)
1-101: 📐 Maintainability & Code QualityConfigure CSS tooling for Tailwind v4 directives.
@theme inlineis valid Tailwind v4 syntax, but Biome and Stylelint currently report this file as a parse/unknown-at-rule error. If either tool is part of the PR gate, configure the parser/at-rule allowlist or exclude Tailwind-authored CSS; do not rewrite this directive. Tailwind documents@themeand@theme inlineas supported syntax. (tailwindcss.com)Source: Linters/SAST tools
web/src/styles/base.css (1)
1-19: 🎯 Functional CorrectnessKeep global CSS on source tokens, not generated Tailwind aliases.
base.cssconsumes--color-border,--color-background, and--color-foreground, whileweb/src/styles/theme.cssis documented as the Tailwind exposure layer. Verify the compiled CSS, or use the source roles--border,--background, and--foregrounddirectly so global styles do not depend on utility-generated aliases. Tailwind notes that unused theme variables may be omitted from final output. (tailwindcss.com)web/src/index.css (1)
3-5: LGTM!docs/guidelines/frontend-design-system.md (1)
34-50: LGTM!web/src/components/ui/button.tsx (1)
8-22: LGTM!web/src/components/ui/badge.tsx (1)
14-16: LGTM!web/src/components/ui/dropdown-menu.tsx (1)
77-77: LGTM!web/src/components/ui/input-group.tsx (1)
17-17: LGTM!Also applies to: 27-30, 139-139, 155-155
web/src/components/ui/input.tsx (1)
11-13: LGTM!web/src/components/ui/select.tsx (1)
40-40: LGTM!
| - [ ] Consolidate docs, move the increment to completed, commit, push, open a PR, | ||
| and resolve actionable CI or CodeRabbit findings. |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Complete the active increment’s documentation lifecycle.
The plan leaves consolidation and moving this increment from active/ to completed/ unchecked. Finish those steps before treating the increment as delivered.
As per path instructions, active increments must consolidate current facts/specs/tests/decisions and move to completed after execution.
🤖 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 `@docs/increments/active/2026-07-23-frontend-design-system-foundation/plan.md`
around lines 21 - 22, Complete the documentation lifecycle for this increment:
consolidate the current facts, specs, tests, and decisions, then move the
increment from the active collection to the completed collection. Mark the
corresponding checklist item in the increment plan as complete after both
actions are finished.
Source: Path instructions
1 participant
Summary
Checks
Notes
Summary by CodeRabbit