feat(ui): render Integrations as a status tile grid - #73
Conversation
Replace the long card list with compact square tiles that always show traffic-light status, reveal diagnostics on hover, and open a detail strip for Enable/Pair/Repair on actionable community integrations.
8f2571b to
abeece2
Compare
|
Warning Review limit reachedYou’ve reached a temporary PR review limit under our Fair Usage Limits Policy. Next review available in: 58 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: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (4)
Comment |
There was a problem hiding this comment.
Pull request overview
This PR updates the Settings → Integrations UI to display integrations as a compact tile grid with always-visible traffic-light status, and introduces a selectable “detail strip” panel for actionable integrations (e.g., Cursor/Factory/T3/OpenCode).
Changes:
- Render integrations as a 2–3 column square tile grid with hover diagnostics.
- Add selection logic to show an
IntegrationDetailpanel for actionable integrations. - Update the design docs and adjust the Settings surface test expectations for the new UI.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| docs/design/README.md | Updates design spec to describe the tile grid + detail strip interaction model. |
| apps/microbridge-ui/src/surfaces/surfaces.test.tsx | Updates Settings/Integrations rendering assertions to match the new grid + detail panel. |
| apps/microbridge-ui/src/surfaces/Settings.tsx | Implements grid layout, selectable actionable integrations, and the detail strip panel. |
| apps/microbridge-ui/src/components/IntegrationCard.tsx | Refactors integration UI into a tile-based card and adds a new IntegrationDetail component. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| actionable | ||
| ? () => | ||
| setSelectedIntegration((current) => | ||
| current === adapter.id ? current : adapter.id, |
| <div | ||
| role="tooltip" | ||
| className="pointer-events-none absolute bottom-[calc(100%+6px)] left-1/2 z-20 w-[min(220px,70vw)] -translate-x-1/2 rounded-lg px-2.5 py-2 text-[10.5px] leading-snug opacity-0 shadow-lg transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100" |
| title={diagnostic} | ||
| aria-label={`${name}: ${label}. ${diagnostic}`} | ||
| className="group relative flex aspect-square w-full flex-col items-start justify-between rounded-2xl p-3" | ||
| style={shellStyle} | ||
| > |
## Summary - Align Rust, Tauri, and npm versions at `0.3.3` - Add user-facing release notes for the Integrations tile grid and host traffic-light status (#72, #73) - No migration; patch release for the installed DMG/updater path ## Test plan - [x] Version sources aligned at 0.3.3 - [x] `npm test -- --run` (16 passed) - [ ] CI green → squash-merge → tag `v0.3.3` to publish signed/notarized assets Made with [Cursor](https://cursor.com)
Summary
Test plan
npm test -- --run(16 passed)npm run buildMade with Cursor