feat(ui): Patterns library pilot on the shared design system (U5 B1)#437
Conversation
Fourth B1 screen, ported from desktop-patterns.html: - libs/ui: new PatternLibrary screen — search + filter-chip toolbar (active chip count turns blue), two-column body with a 2-up pattern card grid (kind glyph pattern/gotcha/decision/rule, code prefix, title, lang chip, description, optional code snippet, tag pills, dot-separated footer facts with red/green tones) beside an optional right meta rail; loading/error/empty states; grid collapses to one column at 1280px, rail drops at 1180px. New shared types: UiPattern/UiPatternKind/UiPatternFooterStat/UiPatternSnippet. - Electron: pure patterns-ui mappers (backend Pattern → sparse card, cross-spec aggregation with case/space-insensitive dedup, client-side filtering; 7 tests) + PatternsPilotView. Patterns are stored per spec, so the pilot aggregates over the project's known specs (from the task store) via the existing pattern.listPatterns IPC, tolerating per-spec failures. Read-only — the approve/override flows stay on the legacy view. Mounted as "Patterns (new UI)". - i18n: patterns:patternsPilot.* keys (en+fr), navigation.patternsNext; also registers the previously-unregistered patterns namespace so the legacy Patterns view stops rendering raw keys. The backend has no gotcha/decision/rule taxonomy or snippet/tag data, so the live adapter maps every learned item to a sparse 'pattern' card; the rich card fields exist for the mockup fidelity shown in Storybook. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
Bugbot is not enabled for your account, so this pull request was not reviewed. Enable Bugbot in the Cursor dashboard to get automatic reviews on future PRs. |
|
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 (3)
📝 WalkthroughWalkthroughAdds a shared PatternLibrary screen, backend pattern mapping and filtering utilities, a project-scoped pilot view, sidebar and App routing, English/French localization, responsive styling, Storybook states, and Vitest coverage. ChangesPatterns library pilot
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant Sidebar
participant App
participant PatternsPilotView
participant ElectronAPI
participant PatternLibrary
Sidebar->>App: select patterns-next
App->>PatternsPilotView: render with projectId
PatternsPilotView->>ElectronAPI: listPatterns for each spec
ElectronAPI-->>PatternsPilotView: per-spec patterns
PatternsPilotView->>PatternLibrary: aggregated and filtered UiPattern cards
Suggested labels: 🚥 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 |
Reading useTaskStore.getState() once inside the effect stranded the empty state when a project's tasks arrived after mount (opening Patterns before the board). Subscribe to the store and drive the effect off a stable spec-id string key so patterns refetch when the spec set changes, without refetching on unrelated task updates. Adds an empty-aggregation test. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
![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 `@apps/frontend/src/renderer/components/PatternsPilotView.tsx`:
- Around line 37-53: Update all translation lookups in PatternsPilotView,
including confidenceLabels and the additional referenced ranges, to use
namespace-qualified patterns: keys such as patterns:patternsPilot.... Preserve
the existing translation sections and behavior while ensuring every user-facing
lookup follows the required namespace:section.key format.
- Around line 63-70: Update the spec ID derivation in PatternsPilotView to
subscribe to task updates by selecting tasks from useTaskStore rather than
calling getState(). Derive the project-filtered, unique specIds with useMemo,
then include specIds in the effect dependencies so it reruns after loadTasks
populates tasks or the project changes.
In `@libs/ui/src/screens/PatternLibrary.tsx`:
- Around line 131-156: The loading and empty state messages in PatternLibrary
need live-region announcements like the existing error state. Update the
corresponding `<p>` elements in the PatternLibrary render to use an appropriate
`aria-live` setting, while preserving their current conditional rendering and
labels.
🪄 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: b5d9038f-8b0a-45b6-8692-73b594eb783f
📒 Files selected for processing (15)
apps/frontend/src/renderer/App.tsxapps/frontend/src/renderer/__tests__/patterns-ui.test.tsapps/frontend/src/renderer/components/PatternsPilotView.tsxapps/frontend/src/renderer/components/Sidebar.tsxapps/frontend/src/renderer/lib/patterns-ui.tsapps/frontend/src/shared/i18n/index.tsapps/frontend/src/shared/i18n/locales/en/navigation.jsonapps/frontend/src/shared/i18n/locales/en/patterns.jsonapps/frontend/src/shared/i18n/locales/fr/navigation.jsonapps/frontend/src/shared/i18n/locales/fr/patterns.jsonlibs/ui/src/client/types.tslibs/ui/src/index.tslibs/ui/src/screens/PatternLibrary.csslibs/ui/src/screens/PatternLibrary.stories.tsxlibs/ui/src/screens/PatternLibrary.tsx
- Namespace-qualify every translation lookup in PatternsPilotView (patterns:patternsPilot.*) per the i18n house style. - Add aria-live="polite" to PatternLibrary's loading/empty states so screen readers announce search/filter transitions (the error state already carries role="alert"). The task-store subscription finding was already fixed in 0170e5d (the review ran against the earlier commit). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
1 participant
Summary
Fourth screen of the B1 "Code & review" batch, ported from
desktop-patterns.html. This is the last of the four B1 code-review surfaces (Changelog, PRs, Issues, Patterns).libs/ui (shared design system)
UiPattern/UiPatternKind/UiPatternFooterStat/UiPatternSnippet.Electron
patterns-uimappers: backendPattern→ sparse card, cross-spec aggregation with case/whitespace-insensitive dedup (the same rule is re-learned across specs), client-side filtering — 7 tests.PatternsPilotView: patterns are stored per spec, so the pilot aggregates over the project's known specs (from the task store) via the existingpattern.listPatternsIPC, tolerating per-spec failures. Read-only — the approve/override/delete flows stay on the legacy view. Mounted as "Patterns (new UI)".i18n
patterns:patternsPilot.*(en+fr),navigation:items.patternsNext.patternsnamespace — the legacy Patterns view (useTranslation(['patterns'])) was rendering raw keys, the same latent bug found for kanban.Scope note
The backend has no gotcha/decision/rule taxonomy and no snippet/tag/reuse data — a learned pattern is plain text + a coarse category + a confidence bucket. So the live adapter maps every item to a sparse
patterncard (title + category chip + confidence footer); the rich card fields (kinds, snippet, tags, footer facts) exist for mockup fidelity and are exercised in Storybook. The legacy view's approve/override flows are intentionally not reimplemented here.Verification
libs/ui+ Electron tsc clean; Storybook rebuilt and the Library story verified against the mockup in light + dark (card grid, all four kind glyphs, snippets, tags, red/green footer facts, meta rail), responsive collapse checked at 900px.B1 status
With this, all four B1 code-review screens are piloted. Next batch: B2 Analytics & usage.
🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Bug Fixes
Tests