mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
codex/fix-tanstack-e2e
585
Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
 Danny White
|
ed692f6905 |
feat(select): schedule livestream banners (#51006)
## Problem The Select banners on www and Studio still promote attendance. They need to keep serving the waitlist until the event, promote the livestream during the requested window, and disappear after the event. ## Solution Use a shared three-phase clock: existing promotion before 8:00am PT on 2 October, livestream promotion from 8:00am to 5:30pm PT, and no banner afterwards. Both livestream CTAs lead to `select.supabase.com`, where viewers can choose a stage. Separate dismissal keys let someone who dismissed the earlier promotion see the livestream. Open pages set a timer for the next boundary and recheck on visibility, focus, or page restore. | `www` | | --- | | <img width="736" height="136" alt="CleanShot 2026-09-29 at 16 27 38@2x" src="https://github.com/user-attachments/assets/1281bcf0-ece4-41fc-99d2-1f9ab6e1b3f5" /> | | _Until Friday 8am PT_ | | <img width="734" height="138" alt="CleanShot 2026-09-29 at 16 28 06@2x" src="https://github.com/user-attachments/assets/05b8779a-9961-4886-ad7d-96ba31c8b4f7" /> | | _Friday 8am to 5:30pm PT_ | | `studio` | | --- | | <img width="612" height="454" alt="CleanShot 2026-09-29 at 16 26 51@2x" src="https://github.com/user-attachments/assets/0d9a8bbb-c636-41dc-aa76-381196c149c2" /> | | _Until Friday 8am PT_ | | <img width="616" height="440" alt="CleanShot 2026-09-29 at 16 27 09@2x" src="https://github.com/user-attachments/assets/458afdb9-6576-4699-9419-947ca5312bcd" /> | | _Friday 8am to 5:30pm PT_ | ## Review instructions 1. Open the [www homepage](https://zone-www-dot-com-git-dnywh-select-2026-livestre-93dab1-supabase.vercel.app/) and a [hosted Studio dashboard](https://studio-staging-git-dnywh-select-2026-livestream-05b822-supabase.vercel.app/) in separate tabs. If the Privacy Policy update card is in front in Studio, close it (only) to reveal the Select banner. 2. In each tab's DevTools console, paste this helper: ```js window.selectRealNow = Date.now window.showSelectAt = (iso) => { Date.now = () => new Date(iso).getTime() window.dispatchEvent(new Event('focus')) } ``` 3. Run `showSelectAt('2026-10-02T07:59:00-07:00')`: both banners keep the existing “Apply to attend” CTA. 4. Run `showSelectAt('2026-10-02T08:00:00-07:00')`: www shows “Supabase Select 2026” and “Watch the livestream”; Studio shows the same title, the description “Keynote, main stage, and build stage, streamed all day.” and “Watch livestream”. Both CTAs link to `https://select.supabase.com/`. 5. Run `showSelectAt('2026-10-02T17:30:00-07:00')`: neither banner is visible. Restore the clock with `Date.now = window.selectRealNow; window.dispatchEvent(new Event('focus'))`. The console clock override affects only the current tab and is lost on reload. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - The Select 2026 banner switches from waitlist messaging to livestream details and a “Watch livestream” link during the livestream period. - Livestream banner dismissals are tracked separately from waitlist banner dismissals. - Promotion banners end at 5:30 p.m. Pacific on October 2, 2026, and update when the promotion changes phase, including after returning to an open tab. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Anthony Lio
|
e7f0d3c04f |
fix(ui): popover component (#50657)
## What kind of change does this PR introduce? fixture on the popover + command components ## What is the current behavior? currently there is a misalignment in the command component <> searchbar icon and items + the popover menu animation in is slightly scattered ## What is the new behavior? - fixes icon alignment in command component - updates popover animation in `command` | state | preview | | -------|------| | before | <img width="881" height="542" alt="image" src="https://github.com/user-attachments/assets/e38aa22f-5eea-4b08-8a24-254e26bf90fe" /> | | after | <img width="881" height="542" alt="image" src="https://github.com/user-attachments/assets/85608e11-8415-4d47-945f-cc13772e4ad1" /> | `popover` | state | preview | | -------|------| | before | <video src="https://github.com/user-attachments/assets/cbb2da1a-6f73-4a8d-87d6-21e8b636c110" /> | | after | <video src="https://github.com/user-attachments/assets/1b0832f5-e6ac-4e93-ae78-9e0aee31205c" /> | <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Style** - Adjusted command input spacing for improved visual alignment. - Updated popover transitions with state-based fade and zoom animations, and refined their visual origin. - Set a consistent size for the AI docs command icon. - **New Features** - Added an option to customize the command menu input wrapper’s styling. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
kemal.earth
|
864cca6cda |
fix(design-system): update border radius for menu items (#50973)
## Problem Border radiuses for inner items of dropdowns, menus etc. didn't keep up with recent changes. ## Solution Adds a token/variable to help keep this consistent across our apps and components. One caveat is this modifies shadcn components, so I'm open to alternative ways of doing this. | Before | After | |--------|--------| | <img width="293" height="206" alt="Screenshot 2026-09-28 at 12 00 27" src="https://github.com/user-attachments/assets/cd5e0708-0223-43ac-9893-a33ce5acd1ca" /> | <img width="335" height="231" alt="Screenshot 2026-09-28 at 12 00 41" src="https://github.com/user-attachments/assets/dc993b09-1410-4596-ae8f-4e78e6739fa6" /> | <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Standardized corner rounding across command items, context menus, dropdown menus, menubars, select options, and multi-select options. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Danny White
|
b10511052d |
fix(ui): share raised styling across dropdown triggers (#50830)
## Problem Select, combobox and empty multi-select triggers use a flat border treatment, while the default Button has a raised surface and shadow. This makes dropdown controls look inconsistent when closed. ## Solution Share the existing Button shadow variables and raised surface classes with the select trigger CVA. SelectTrigger and ComboboxTrigger keep their own layout, focus, and disabled behaviour. The multi-select shares the raised surface when empty and keeps a sunk field surface for selected chips. Static size classes keep its empty and single-row selected states at the same height; wrapped badges can still grow. The caret stays aligned as values are selected. Select, Combobox and Multi-select share Button's size-specific corner radii. Button's existing styling is preserved. | Before | After | | --- | --- | | <img width="518" height="180" alt="CleanShot 2026-09-24 at 13 36 32@2x" src="https://github.com/user-attachments/assets/3822e51f-b1c5-46a2-b268-0bf08a03ae06" /> | <img width="534" height="224" alt="CleanShot 2026-09-24 at 13 36 41@2x" src="https://github.com/user-attachments/assets/e553c973-3d21-4228-ae6f-d3c098d051d3" /> | | <img width="638" height="148" alt="CleanShot 2026-09-24 at 15 08 01@2x" src="https://github.com/user-attachments/assets/6d0c3dfe-3392-4b76-ae61-b6aa7a09583d" /> | <img width="658" height="148" alt="CleanShot 2026-09-24 at 15 08 17@2x" src="https://github.com/user-attachments/assets/184c50c3-b951-410e-89d5-3b1c2ee8f3b8" /> | | <img width="482" height="162" alt="CleanShot 2026-09-24 at 15 07 22@2x" src="https://github.com/user-attachments/assets/a088d832-d0a9-45c5-a272-9c84cc601d1d" /> | <img width="490" height="168" alt="CleanShot 2026-09-24 at 14 59 52@2x" src="https://github.com/user-attachments/assets/4df0ca29-53d8-4926-80db-1cafb705faad" /> | ## Review instructions 1. Open the design system [Select](https://design-system-git-dnywh-dropdown-trigger-surface-supabase.vercel.app/design-system/docs/components/select), [Combobox](https://design-system-git-dnywh-dropdown-trigger-surface-supabase.vercel.app/design-system/docs/components/combobox) and [Multi-select](https://design-system-git-dnywh-dropdown-trigger-surface-supabase.vercel.app/design-system/docs/fragments/multi-select) examples. 2. Compare the closed surfaces and corner radii with a default Button, then check hover, focus and open states. 3. Select one or two multi-select items. Check that a single row remains the same height as the empty control, the caret stays aligned and the chip field remains distinct. Add enough items to check wrapping. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Summary * **Style** * Default buttons display a raised surface with a subtle shadow and size-appropriate rounded corners. * Select and combobox triggers share a raised, card-like appearance, with consistent shadows and rounded corners at small sizes. Invalid select triggers display a border. * Empty multi-select controls use a raised surface, while controls with selected values use a field-style surface. * Small and tiny multi-select controls have updated spacing and sizing in empty and selected states. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Danny White
|
9a03f3cd9c |
fix(studio): show keyboard focus on filter bar (#50827)
## Problem - Filter fields could not be re-entered with Tab, and remove buttons were previously skipped. - Earlier focus rings flashed or crowded controls. Segmented filters and design system examples also had uneven layout. ## Solution - Tab now reaches each filter’s property, operator, value and remove button. Editable fields use the caret; read-only values and remove buttons keep a visible focus cue. - Refined spacing and sizing. The segmented highlight is inset and clears when focus enters a control. Both variants and the focus guidance are documented on the [design system page](https://design-system-git-dnywh-fix-filter-bar-focus-supabase.vercel.app/design-system/docs/fragments/filter-bar). |After | | --- | | <img width="462" height="126" alt="CleanShot 2026-09-24 at 15 04 23@2x" src="https://github.com/user-attachments/assets/2ee8bee2-f4fa-40f4-ada5-67bfe32384e7" /> | | <img width="362" height="96" alt="CleanShot 2026-09-24 at 15 04 47@2x" src="https://github.com/user-attachments/assets/9f42054a-f432-493d-b417-f10892676c96" /> | ## Review instructions The easiest way to test this is to open Table Editor on both production/staging and on this PR’s [deploy preview](https://studio-staging-git-dnywh-fix-filter-bar-focus-supabase.vercel.app/). Try navigating by keyboard (tab, left/right arrow) within the Filter Bar. Compare the two. - In Studio’s Table Editor or the [design system example](https://design-system-git-dnywh-fix-filter-bar-focus-supabase.vercel.app/design-system/docs/fragments/filter-bar), add a filter. Tab through its property, operator, value and remove button, then Shift+Tab back into editing. - Check that the segmented and pill examples fill their preview width and that focus cues do not collide with neighbouring controls. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Summary * **New Features** * Added a pill appearance for the Filter Bar, with usage guidance and interactive examples for pill and segmented presentations. * **Accessibility** * Improved keyboard navigation through filter controls, including removing a filter with the keyboard. * Clarified that an editable text field’s insertion caret can serve as its visible focus indicator; read-only fields and controls without a caret still need another visible indicator. * **Style** * Refined Filter Bar spacing and focus styling across appearances. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Saxon Fletcher
|
d0135231fb |
chore(studio): improve assistant feed performance (#50888)
## Problem Assistant conversations with multiple query and Edge Function blocks repeatedly render expensive content while streaming. Scrolling past the feed boundary can also move the surrounding layout. ## Solution Memoize unchanged messages, blocks, and code highlighting; batch streaming UI updates; and skip off-screen query layout while keeping block state mounted. Preserve streamed status updates and contain scrolling in the message viewport. The changes are shared by Next and TanStack. ## Review instructions 1. Compare the base branch and this branch using the same saved conversation containing 10–20 query, result/chart, and Edge Function blocks. Keep the browser, viewport, and conversation identical. 2. In Chrome DevTools, record Performance with 4× CPU throttling while streaming a follow-up, typing in the composer, and scrolling through the feed. Compare scripting/layout time and long tasks. React DevTools Profiler should show unchanged completed blocks avoiding renders during subsequent text updates. 3. Scroll away from query blocks and return. Confirm results, display settings, selections, and controls retain their state. Run a read-only query such as `select 1` and check its results still update. 4. Confirm “Thinking…” finishes, Stop retains the latest streamed text, and approval/skip, copy, edit, and branch actions still work. Repeated scrolling at the feed boundary must leave the outer layout/composer stationary; jump-to-latest and following new messages should still work. 5. Repeat in both runtimes: `STUDIO_FRAMEWORK=next pnpm dev:studio` and `STUDIO_FRAMEWORK=tanstack pnpm dev:studio`. Also check the assistant sidebar, which shares the feed. ## Validation - 170 assistant/Explorer tests and one shared CodeBlock test passed; formatting and Studio lint passed (two existing warnings). - Browser checks covered both route entry points, viewport state/geometry, and scroll behavior. - Review fixes: 23 focused tests, lint, formatting, and full Studio typechecking passed. Full production builds were not verified. ## Checklist - [x] I have read [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) - [x] No docs content changed; docs authoring skills are not applicable. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Performance** * Improved responsiveness in the AI assistant by reducing unnecessary updates while messages stream and conversation history is displayed. * Optimized query previews, message rendering, and code blocks to keep the interface smoother during use. * **Bug Fixes** * Improved handling of message edits and deletions during generation, and preserved the latest response when generation is stopped. * Improved conversation scrolling behavior while keeping conversation content and scroll areas working as expected. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Danny White
|
d067e81a69 |
fix(ui): align primary colours across text, buttons, and controls (#50697)
## Problem Primary colour serves readable text and selected controls, but those uses need different shades. Light mode needs darker text, while dark mode needs a deeper button fill. Fixed brand green on interactive chrome also prevents a custom primary hue from carrying through the interface. Some slider tracks and selected text are hard to read. ## Solution - Keep `--primary` for accessible text and small selected indicators. Use `--primary-solid` for button fills, which need a deeper shade in dark mode. - Add `--primary-bright` for focus rings, selected control chrome, chart accents, and other interactive highlights. It follows `--primary-hue`; `brand-*` stays fixed for Supabase identity. - Make slider troughs clearer and text selection translucent with theme foreground text. - Document the split in the design-system colour guide. | Before | After | | --- | --- | | <img width="980" height="244" alt="Before: light mode primary controls" src="https://github.com/user-attachments/assets/dfae325d-0dfe-4231-8bcd-3f89c4b9d793" /> | <img width="982" height="204" alt="After: light mode primary controls" src="https://github.com/user-attachments/assets/5fdcb531-a6e3-4549-8a13-9d9a5ebe6e20" /> | | <img width="610" height="120" alt="Before: slider track" src="https://github.com/user-attachments/assets/04f768e0-51e8-4d06-9b97-c52f4a34f122" /> | <img width="622" height="126" alt="After: slider track" src="https://github.com/user-attachments/assets/95127f4e-13dc-4f0f-b63c-cf5d70a28b42" /> | | <img width="652" height="512" alt="Before: dark mode controls" src="https://github.com/user-attachments/assets/3f88de66-90cc-40ee-8cf1-b5f4eb87b09a" /> | <img width="658" height="498" alt="After: dark mode controls" src="https://github.com/user-attachments/assets/906bec30-6ca1-4614-9fb3-6cf5e5feec22" /> | ## Review instructions 1. Compare light and dark mode in the [colour usage guide](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/color-usage#primary-and-brand-colors). Check primary ink, primary-solid, primary-bright, and fixed brand swatches. 2. In Studio, open the ‘new table’ sheet in [Table Editor](https://studio-staging-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/dashboard/project/_/editor). Tab through the new table sheet's fields and toggles. Check the focus rings, selected controls, and the sheet's edges in both themes. You do not need to save a table. 3. Select text in Studio in both themes, including a link or primary-coloured label. The selection and text should remain legible. 4. Check the [Field](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/components/field) Price Range slider: the unused track should remain visible in both themes. The selected field card border should follow primary-bright. 5. Check the [Button](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/components/button) and [Radio Group](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/components/radio-group) previews. In dark mode, `primary` button fill should be deeper than primary [text](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/color-usage#text); selected radios should remain readable. |
||
|
Saxon FletcherandJoshen Lim
|
76c4f2b739 |
feat(studio): add time range to project logs filter bar (#50685)
<img width="1079" height="566" alt="image" src="https://github.com/user-attachments/assets/b6f360e9-dfcf-4717-86db-1fc9acc4ae6a" /> ## Problem Project logs only exposed time-range selection through the sidebar. ## Solution Add a Time range property to the filter bar using the sidebar’s picker, preset labels, and date formatting. Keep it synchronized with the sidebar and timeline, including retention checks. ## Review instructions 1. Open Project Logs and select **Time range** in the filter bar. Choose a preset and confirm the sidebar and logs update. 2. Select a custom range and confirm its label matches the sidebar’s date formatting. 3. Change the range in the sidebar or timeline and confirm the filter bar updates. Remove the time-range pill and confirm the range resets without removing other filters. 4. Select a range beyond the plan’s log retention and confirm the upgrade prompt appears. Validation: 67 focused tests passed, Studio typecheck passed, and changed Studio files passed lint. ## Checklist - [x] I have read [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) - [ ] Docs authoring skills (not applicable: no docs-site topic changes) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added human-readable filter value labels while preserving the underlying selections. * Added dedicated log time-range filters with preset and custom ranges. * Added inline date-range picker support for flexible layouts. * Added controls to show or hide filter properties based on availability. * Added consistent date-range formatting and custom range support. * **Bug Fixes** * Invalid or incomplete time-range filters are no longer applied. * Time-range filters remain separate from standard column filters. * Clipboard interactions are limited to the popover date-picker variant. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com> |
||
|
Saxon FletcherandDanny White
|
cd77bebafd |
chore(ui): refresh shared button styles (#50197)
## What kind of change does this PR introduce? UI polish / design system: refreshed button styles, related token tweaks, and a shared floating-button plate. Resolves DEPR-652. ## What is the current behavior? Default, primary, and secondary buttons use older fills, borders, and hover treatments. Primary still leans on brand scale utilities. Default fills don’t always read as raised chrome across surfaces, and floating copy / expand / scroll controls can let busy content show through translucent fills. Call sites hand-roll `rounded-* bg-background` wrappers for that. ## What is the new behavior? Refreshes primary, default, and secondary buttons with medium-weight labels, subtle shadows and inset edges, and smoother transitions. Light-mode default buttons use a raised fill with an accent hover state, primary text is brighter, and inline keyboard shortcuts inherit the button’s colour. Adds `FloatingPlate`: an opaque `bg-popover` shell for floating default buttons (and small clusters). Migrates Studio, Docs-related patterns, www, and `ui-patterns` floaters onto it so busy content no longer shows through translucent fills. Positioning, z-index, and hover/focus reveal stay on the plate’s `className`. Use `rounded="full"` for pills. Also: - Moves primary onto semantic `--primary` / `--primary-hover` (with a light-theme override) instead of brand utility fills - Tokenises button shadows as `--button-shadow-drop` / `--button-shadow-raised` / `--button-shadow-default` on the Button base - Aligns hover direction: darken on light mode, lighten on dark mode for both default and primary - Default fill stays opaque `bg-card` in light (occlusion) and translucent `bg-muted` in dark (adapts to the local surface) - Documents fills and `FloatingPlate` on the design-system Button page (with a live example) - Scales shared radius tokens in Studio and www; medium+ Button sizes use a proportionally softer radius - Fixes www nav CTA centering (`lg:inline-flex` instead of `lg:block`) - Query detail Expand/Collapse wires `aria-expanded` / `aria-controls` | Before | After | | --- | --- | | <img width="1074" height="438" alt="CleanShot 2026-09-18 at 15 52 51@2x" src="https://github.com/user-attachments/assets/ef43da21-b053-4b7e-9ac4-ab8b428228ab" /> | <img width="1090" height="464" alt="CleanShot 2026-09-18 at 15 50 59@2x" src="https://github.com/user-attachments/assets/2ddc55fc-4c8d-499c-a280-f3db3d99023c" /> | | <img width="1082" height="446" alt="CleanShot 2026-09-18 at 15 52 35@2x" src="https://github.com/user-attachments/assets/3dd5452d-325a-4e4a-a79d-26c6c6950a31" /> | <img width="1078" height="446" alt="CleanShot 2026-09-18 at 15 51 13@2x" src="https://github.com/user-attachments/assets/93666385-3e6e-42e0-9891-9cd6bb935b67" /> | ## To test ### Design system - [Button page](https://design-system-git-chore-button-styles-supabase.vercel.app/design-system/docs/components/button): default / primary in light and dark; hover should darken on light, lighten on dark - Same page: [Floating over content](https://design-system-git-chore-button-styles-supabase.vercel.app/design-system/docs/components/button#floating-over-content) / [Floating plate](https://design-system-git-chore-button-styles-supabase.vercel.app/design-system/docs/components/button#floating-plate) example; Copy over SQL should stay opaque - Spot-check hover on a code preview Copy control ### Docs [Docs deploy preview](https://docs-git-chore-button-styles-supabase.vercel.app/docs): - [Docs homepage](https://docs-git-chore-button-styles-supabase.vercel.app/docs): top-right **Sign up** / **Dashboard** primary; menu icon beside it (default icon button) - Shrink below `lg` and open the hamburger drawer: bottom **Sign in** (default) + **Start your project** (primary) medium block buttons - Tab once for **Skip to content** (FloatingPlate) - [MCP guide](https://docs-git-chore-button-styles-supabase.vercel.app/docs/guides/ai-tools/mcp): project picker - [Apple login](https://docs-git-chore-button-styles-supabase.vercel.app/docs/guides/auth/social-login/auth-apple): **Generate Secret Key** button in the Apple Secret Generator - Optional opacity check: any guide code block Copy control (e.g. at the bottom of [Import data into Supabase](https://docs-git-chore-button-styles-supabase.vercel.app/docs/guides/database/import-data)) ### Studio [Studio deploy preview](https://studio-staging-git-chore-button-styles-supabase.vercel.app/): - **Observability → Query Performance**: open a query detail → Expand/Collapse pill + SQL Copy chip (dark: no bleed-through) - **Observability → Query Insights**: select a query → Clear query pill - **Table Editor → any table → Definition** → floating **Open in SQL Editor** - **Connect → Framework → Add files**: Copy on the code tabs (FloatingPlate; light hover follow-up is DEPR-694) - Tab once for **Skip to content** ### WWW - [www deploy preview](https://zone-www-dot-com-git-chore-button-styles-supabase.vercel.app/): nav Sign in / Start your project vertical centering; hero medium CTAs radius --------- Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com> |
||
|
Danny White
|
ec53175b8a |
refactor(ui): rename text-brand to text-primary (#50564)
## What kind of change does this PR introduce? Refactor. Follow-up to #49871. ## What is the current behavior? Branded (green) text still uses the `text-brand` classname while the colour comes from `--primary`. ## What is the new behavior? **Rename-only:** `text-brand` → `text-primary` across callsites and docs. Leftover `bg-brand` / `border-brand` alias to `brand-default`. No intentional colour changes in this PR. This better matches how we treat our green in other components and props, like `variant="primary"` for green buttons. ## To test On light mode: smoke-test that branded text still looks like #49871 (readable green, not the bright fill). - [Homepage](https://zone-www-dot-com-git-dnywh-depr-316-text-brand-de2380-supabase.vercel.app/): “Scale to millions” uses `text-primary` - [Docs homepage](https://docs-git-dnywh-depr-316-text-brand-to-primary-supabase.vercel.app/docs): branded links like “More on self-hosting” are still readable - [Typography docs](https://design-system-git-dnywh-depr-316-text-brand-to-primary-supabase.vercel.app/design-system/docs/typography): documents `text-primary` - [Colour usage](https://design-system-git-dnywh-depr-316-text-brand-to-primary-supabase.vercel.app/design-system/docs/color-usage): `text-primary` is visibly darker than `bg-brand-default` _on light mode_ - [Studio auth providers](https://studio-staging-git-dnywh-depr-316-text-brand-to-60fa6c-supabase.vercel.app/dashboard/project/_/auth/providers): enabled provider badge text readable; status dot stays bright green <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Updated branded text, link hover states, icons, badges, indicators, and highlighted content across the Design System, Docs, Studio, Learn, UI Library, and marketing experiences to use the primary theme color. * Updated syntax highlighting and table-of-contents styling for consistent primary-color presentation. * Refined brand color fallback behavior for bright fills and borders. * **Documentation** * Updated color-usage and typography guidance to recommend the primary text utility. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Danny WhiteandJoshen Lim
|
a31ca2bad0 |
fix(ui): make brand text readable across themes (#49871)
## What kind of change does this PR introduce? Bug fix and design-system update. Resolves DEPR-316. Follow-up rename (`text-brand` → `text-primary`) is in a dedicated PR (https://github.com/supabase/supabase/pull/50564) stacked on this one. ## What is the current behavior? `text-brand` resolves to the canonical bright brand green in places that need readable text, which fails WCAG AA on light surfaces. A separate `text-brand-display` token adds another green for large type. ## What is the new behavior? - `text-brand` maps to accessible `--primary` (light mode darkened to meet ~4.5:1 AA) - `--hue` / `--primary-hue` aligned to 157.5 - `text-brand-display` removed; former display callsites use `text-brand` - Bright fills/borders stay on `brand-default` - Design-system colour and typography docs updated | Before | After | | --- | --- | | <img width="514" height="112" alt="CleanShot 2026-09-02 at 11 13 09@2x" src="https://github.com/user-attachments/assets/4e0138a9-a32d-4e4c-a426-90736706e1e7" /> | <img width="512" height="138" alt="CleanShot 2026-09-21 at 11 42 05@2x" src="https://github.com/user-attachments/assets/164cc5b1-a0c5-4e93-95f1-80016641a114" /> | | <img width="864" height="266" alt="CleanShot 2026-09-02 at 11 13 53@2x" src="https://github.com/user-attachments/assets/3c1ca53f-bf9e-431e-bc15-816b4a275b8e" /> | <img width="882" height="248" alt="CleanShot 2026-09-21 at 11 41 37@2x" src="https://github.com/user-attachments/assets/24828e7b-ed6b-44cb-b9dc-becc3398bdfc" /> | | <img width="782" height="692" alt="CleanShot 2026-09-02 at 11 16 30@2x" src="https://github.com/user-attachments/assets/fc871977-77bc-47fb-9e0e-9284e0ecd5cc" /> | <img width="730" height="690" alt="CleanShot 2026-09-21 at 11 42 52@2x" src="https://github.com/user-attachments/assets/bf479515-d5f9-471e-b82d-f097c0f4b56c" /> | | <img width="480" height="306" alt="CleanShot 2026-09-02 at 11 18 53@2x" src="https://github.com/user-attachments/assets/03f341f4-f02e-44f8-a2b2-8c31670d0427" /> | <img width="470" height="300" alt="CleanShot 2026-09-21 at 11 43 19@2x" src="https://github.com/user-attachments/assets/9df18217-d5e6-48b8-ba0b-579d2664b94b" /> | | <img width="960" height="300" alt="CleanShot 2026-09-02 at 11 32 04@2x" src="https://github.com/user-attachments/assets/6b1d9373-7a71-4247-81ff-26441604b09d" /> | <img width="980" height="306" alt="CleanShot 2026-09-21 at 11 44 13@2x" src="https://github.com/user-attachments/assets/41ad4784-02ec-4b29-b860-32af9fa79aa8" /> | | <img width="924" height="214" alt="CleanShot 2026-09-02 at 11 34 44@2x" src="https://github.com/user-attachments/assets/1de661fe-c7b6-499b-a94f-e4737436ec79" /> | <img width="752" height="162" alt="CleanShot 2026-09-21 at 11 44 56@2x" src="https://github.com/user-attachments/assets/1811890f-0660-4445-84e9-447720954fa1" /> | ## To test Test each callsite **in light mode** (dark mode is largely unchanged). ### WWW - [Homepage](https://zone-www-dot-com-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/): “Scale to millions” uses readable brand text (display token is gone) - [Careers](https://zone-www-dot-com-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/careers): small “Careers” eyebrow readable; green dividers stay bright `brand-default` - [Contact](https://zone-www-dot-com-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/contact-us): email / policy links use readable brand text - [Regions](https://zone-www-dot-com-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/regions): “Ask about early access to BYOC” readable ### Docs - [Docs homepage](https://docs-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/docs): “DOCS” wordmark and resource links readable - [Database overview](https://docs-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/docs/guides/database/overview): nav / footer brand links readable - [JavaScript reference](https://docs-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/docs/reference/javascript/introduction): active sidebar treatment readable ### Design system - [Typography](https://design-system-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/docs/typography): documents `text-brand` only (no display) - [Colour usage](https://design-system-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/docs/color-usage): `text-brand` vs `bg-brand-default` - [Design-system homepage](https://design-system-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/): brand text examples across themes ### Studio - [Auth providers](https://studio-staging-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/dashboard/project/_/auth/providers): enabled provider badge text readable; status dot stays bright - [Database policies](https://studio-staging-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/dashboard/project/_/database/policies?new=true): template hover text more legible - [Database connections](https://studio-staging-git-dnywh-depr-316-brand-text-tokens-supabase.vercel.app/dashboard/project/_/observability/connections): “Live” status readable; animated dot stays bright green --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com> |
||
|
Danny White
|
512201dcd0 |
chore(ui): remove the Classic Dark theme (#50387)
## What kind of change does this PR introduce? Chore. ## What is the current behaviour? Classic Dark remains available across the shared theme library and several apps. Studio now supports System, Dark, and Light as its theme modes, but still carries compatibility paths for Classic Dark. ## What is the new behaviour? - Removes Classic Dark from shared theme options, application commands, stylesheets, previews, examples, and replay handling. - Deletes the Classic Dark and faux Classic Dark stylesheets. - Removes the now-unused Classic Dark branches from Studio theme colour controls. - Migrates `classic-dark` to `dark` so first rendered frame renders Dark (not Light) | After | | --- | | <img width="1458" height="1778" alt="CleanShot 2026-09-18 at 11 07 40@2x" src="https://github.com/user-attachments/assets/679bf87f-a3c1-4599-ad2f-292d98d0b856" /> | ## To test 1. In Studio, open Account Preferences → Appearance. Confirm the available themes are System, Dark, and Light, and that theme colour controls still work in each resolved mode. 2. Set the `theme` local storage value to `classic-dark`, then reload Studio. Confirm it renders as Dark immediately and the stored value becomes `dark`. 3. Open the theme switcher in Design System, Learn, and UI Library. Confirm Classic Dark is no longer available and Light, Dark, and System still apply correctly. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Changes** * Removed the Classic Dark theme option from theme menus and settings across the application. * Classic Dark selections are automatically migrated to the standard Dark theme. * Updated theme documentation and demonstrations to list only System, Light, and Dark. * Removed Classic Dark styling and preview support; existing Dark, Light, and System themes remain available. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Anthony Lio
|
222127b5c2 |
fix(ui-patterns): multi select cropped caret + extra padding (#50323)
## What kind of change does this PR introduce? bug fix on multi select ui patterns component following up with #49986 ## What is the current behavior? - extra left padding on medium size - cropped caret on tiny size ## What is the new behavior? - updates multi select style padding + caret - refactors test `caret` | state | preview | | -------|------| | before | <img width="594" height="362" alt="image" src="https://github.com/user-attachments/assets/14af14f6-348a-44be-b0ae-42fdb9a4f4ce" /> | | after | <img width="594" height="362" alt="image" src="https://github.com/user-attachments/assets/44dab5ae-944d-43fe-8c4e-0af44a0e1fc7" /> | `padding` | state | preview | | -------|------| | before | <img width="594" height="362" alt="image" src="https://github.com/user-attachments/assets/b1ad7f66-9952-463d-aebb-01fee8748aef" />| | after | <img width="594" height="362" alt="image" src="https://github.com/user-attachments/assets/a5891c45-67b3-4926-97c5-a2ad7027bd5c" /> | <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Multi-select triggers now display the selected value while retaining the placeholder when empty. * Improved sizing, spacing, and minimum widths across multi-select controls for more consistent layouts. * Delete controls now provide clearer click targets and hover feedback. * Decorative chevron icons are hidden from assistive technologies for improved accessibility. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Joshen Lim
|
32b1a0f492 |
FilterBar to disable filter options if already selected (#50331)
## Context Updates FilterBar UI component to prevent selecting a filter option that's already selected + adds a check: <img width="532" height="368" alt="image" src="https://github.com/user-attachments/assets/609f3da2-d627-48d5-9c3e-d6adbc24110b" /> <img width="577" height="373" alt="image" src="https://github.com/user-attachments/assets/5b56eefc-c87b-4254-b1e2-1a5e521b08fe" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Filter menus now identify values already used in another condition for the same property. * Duplicate values are shown as disabled and cannot be selected. * Optional selection indicators can be displayed in filter menus. * Disabled options include clear visual styling and accessibility information. * **Bug Fixes** * Prevented disabled filter values from being selected through mouse interactions or keyboard navigation. * The active condition’s own value remains available for selection. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
7ab2a0d84f |
Fix TextConfirmModal does not reset its state (#50406)
## Problem `TextConfirmModal` does not reset its state after closing, whether users confirmed or not. If they would restart the action, the confirmation text they may have entered is kept, preventing the secure confirmation. Also fixed an accessibility issue as we didn't enable the submit button until the form was valid ## Solution Reset the form state whenever the dialog opens. ## How to test - On https://studio-staging-git-gildasgarcia-design-505-rese-196b28-supabase.vercel.app/dashboard/account/security - Either: - Add an MFA if you haven't already - Generate recovery codes if you already have an MFA - Click the _Regenerate recovery codes_ <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Improvements** - Text confirmation dialogs now reset their input whenever opened or closed, ensuring a fresh form for each use. - Confirmation actions remain available unless the dialog is processing a submission. - Copy-to-clipboard actions now provide an accessible announcement when text has been copied. - **Tests** - Added coverage for successful confirmation, cancellation, invalid submissions, input reset behavior, and recovery-code regeneration retries. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
7fce0a12d9 |
feat(design-system): first pass at db report chart colours (#46787)
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? This is a first draft at introducing semantic colours to our Observability charts. This moves away from just random colours being assigned to prop after prop. They're only scoped to the Database reports right now, but if it flows nice, we can open it up to the other reports too. This also aims to tone down some of the harsher colours in our charts, such as the orange which sometimes can look like a warning metric/prop. | Before | After | |--------|--------| | <img width="839" height="336" alt="Screenshot 2026-06-10 at 09 14 56" src="https://github.com/user-attachments/assets/222747c5-973b-4165-aa53-df7b93412ad3" /> | <img width="950" height="341" alt="Screenshot 2026-09-14 at 18 14 47" src="https://github.com/user-attachments/assets/836f3ddd-4a97-4064-b8cf-3a3b435417ac" /> | cc @supabase/design for additional thoughts. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added semantic chart color roles with light and dark theme variants for consistent visualizations. * Standardized colors and fills across database, networking, storage, and connection charts. * Maximum-value lines now use configured chart colors when available. * Added chart palette reference and stress-test examples. * Added stacked bar charts, customizable margins, and gradient-filled line charts. * Improved multi-series bar chart focus and date-range footer alignment. * **Documentation** * Documented the chart palette, theme variants, accessibility guidance, and usage recommendations. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com> |
||
|
Saxon FletcherandClaude Opus 5
|
32341830b3 |
docs: organize observability by task and move SQL logs to Explorer (#50074)
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. Yes. ## What kind of change does this PR introduce? Documentation update. ## What is the current behavior? The observability overview and access page overlap; configuration interrupts querying; related guides send log queries to the old editor. ## What is the new behavior? The observability overview and navigation follow the same four sections: Read project data, Detect and diagnose, Hire an agent, and Configure and export. The overview absorbs the redundant access page, with permanent redirects for both HTML and Markdown URLs. “Query logs with SQL” owns ClickHouse querying through MCP, the Management API, and Explorer with query source Logs. Logging configuration moves to its own guide; sources, captured headers, and limits live in the field reference. Inspection links to canonical diagnostic SQL. Related Storage and database guides use the replacement Explorer workflow and retain existing anchors where headings move. ## Additional context Validation: Markdown generation, docs typecheck, targeted ESLint, formatting, and content-listing tests. Browser overview/navigation checked; old HTML and Markdown URLs return 308, and the new configuration page returns 200 in both formats. Three ClickHouse examples and the Postgres configuration query ran in a disposable container sandbox. Changed pages have no MDX lint violations; repository-wide existing failures remain. Self-review: the Management API request was verified against its published schema but not sent to a hosted project. Realtime ingestion and hosted logging configuration still need a hosted smoke check. No compatibility path for the deprecated logs engine is documented. Stage 2 of 3; depends on stage 1. Stack: #50073 → #50074 → #50075. Production docs build also passes at the stack tip after standard reference generation. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Documentation** - Reorganized observability guidance around reading data, detecting issues, diagnosing problems, agent setup, and exporting data. - Added a guide for configuring Postgres and Realtime logging. - Updated log investigation instructions to use Explorer, SQL queries, and clearer filters. - Added log source, field, and captured-header references. - Improved advisor guidance and database performance troubleshooting. - Added redirects for moved observability content. - **Accessibility** - Improved screen-reader labels for copy and feature-selection controls. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Opus 5 <noreply@anthropic.com> |
||
|
Joshen Lim
|
e296d0ae4f |
Joshenlim/fe 4373 add ilike comparator for pathname in unified logs (#50386)
## Context In unified logs, filtering on pathname can benefit using the `ilike` comparator so this PR adds support for that <img width="423" height="247" alt="image" src="https://github.com/user-attachments/assets/31e5f09b-7506-4588-90e3-ee705f805d43" /> FilterBar is also updated to omit facet values if the selected comparator is `ilike`, otherwise it doesn't really make sense to show a dropdown of values for users to select as the value for `ilike` filtering. <img width="240" height="62" alt="image" src="https://github.com/user-attachments/assets/b5fc97e7-d826-4184-8b70-bfb4875d1822" /> The facet values should still show if the selected comparator is an equals comparator <img width="391" height="154" alt="image" src="https://github.com/user-attachments/assets/7ccded04-3db1-4406-af40-4377ffe3bd8d" /> Related to https://github.com/supabase/supabase/pull/50394 - am also updating ilike comparator logic for unified logs to implicitly wrap the provided string with `%`, but only if the string doesn't already contain a `%` or `_` for UX convenience. (Unified logs already had this behaviour, except the latter part RE omitting default `%` if string already has) - this affects pathname and event_message searching <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Summary by CodeRabbit * **New Features** * Added case-insensitive pathname filtering for logs with ILIKE and NOT ILIKE. * Added pathname support for comparison and pattern-matching operators. * Preserved user-provided `%` and `_` wildcard patterns in searches. * **Bug Fixes** * Corrected BigQuery pathname filtering for consistent case-insensitive matching. * Prevented misleading exact-value suggestions for pattern-based searches. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Danny White
|
7e9c483625 |
feat(ui): support bounded MultiSelector wrapping (#50439)
## What kind of change does this PR introduce?
UI component enhancement and Design System documentation update.
## What is the current behavior?
`MultiSelectorTrigger` can either limit the number of visible badges or
wrap every selected badge. Consumers cannot combine a numeric limit with
wrapping.
## What is the new behavior?
Adds `wrapBadges` so consumers can combine it with a numeric
`badgeLimit`. For example, `badgeLimit={3} wrapBadges` renders up to
three wrapped badges followed by the remaining `+n` count.
Existing `badgeLimit=\"wrap\"` behaviour remains supported.
## To test
1. Open the Design System Multi Select page.
2. Find the **Wrapped badge limit** example.
3. Confirm three selected fruit badges wrap within the trigger and the
remaining selections appear as `+2`.
4. Remove or add selections and confirm the visible badges and remaining
count update together.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Added a `wrapBadges` option to multi-select triggers, allowing
selected badges to wrap across multiple lines while retaining a numeric
badge limit.
- Numeric limits now show the specified badges and an overflow count for
additional selections.
- Updated the example with controls for adjusting the badge limit.
- **Documentation**
- Clarified multi-select badge limit and wrapping behavior.
- **Tests**
- Added coverage for badge limits, wrapping, visible selections, and
overflow counts.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
|
||
|
Anthony Lio
|
42f1401769 |
fix(ui-patterns): a11y accessible names for ExpandableVideo (#50226)
## What kind of change does this PR introduce? bug fix a11y `ExapndableVideo` ## What is the current behavior? `ExpandableVideo` blurred thumbnail has `alt="Video guide preview"` sitting behind an overlay that already reads "Watch video guide" making screen readers announcing the same thing twice ## What is the new behavior? - adds an optional `videoTitle` prop that names the video once and feeds both the button's `aria-label` and the player's `title`. ## Test 1. visit `/docs/guides/functions` <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Enhancements** - Video previews in guides now display the relevant guide title. - Partner introduction videos now include a descriptive title. - Video controls and embedded players provide more specific accessibility labels when titles are available. - Preview images without meaningful alternative text are treated as decorative to reduce redundant screen-reader output. - **Bug Fixes** - Guide titles with Markdown formatting now appear as clean, readable text in video labels. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Danny White
|
476d4a5851 |
refactor(ui): drop redundant Button variant="default" props (#50161)
## What kind of change does this PR introduce? Mechanical cleanup on top of the Button default-variant change (#50160). ## What is the current behavior? Many callsites still pass `variant="default"` even though that is now the component default. ## What is the new behavior? Removes redundant static `variant="default"` from legacy `Button` and `ButtonTooltip` callsites. Keeps explicit defaults where they document the API: - `button-default.tsx` and `button-sizes.tsx` demos - `DocsButton`, which pins neutral styling at the wrapper boundary ## To test Studio: - [Auth → Rate Limits](https://studio-staging-2s957kwc4-supabase.vercel.app/dashboard/project/_/auth/rate-limits): dirty the form so Cancel appears; Cancel stays neutral, Save stays green - [Project Settings → API Keys](https://studio-staging-2s957kwc4-supabase.vercel.app/dashboard/project/_/settings/api-keys): `DocsButton` in the header actions stays neutral Design system: - [Design system → Button](https://design-system-git-dnywh-dc924ac1-supabase.vercel.app/design-system/docs/components/button): `button-default` / `button-sizes` still show explicit default styling; Primary (green) is restricted to the Primary section (and `asChild`) WWW: - [www → Brand assets](https://zone-www-dot-com-git-dnywh-dc924ac1-supabase.vercel.app/brand-assets): Download logo kit / Download button kit stay neutral |
||
|
Gildas GarciaandAlaister Young
|
737b8595f2 |
Update API types (#50234)
## Problem platform, v1 and v2 have been already completely migrated and introduced some changes. Some types have been renamed, some outputs and inputs updated. ## Solution - Update the API types - Fix the TS errors ## Update Taking this over to unblock #50134, which needs the new scoped token permission ids from the regenerated types. - Merged `master`. - Regenerated `api-v2.d.ts` from the production spec. The previous files came from a local API that exposed a webhook events endpoint production doesn't have yet. Production has since added standardized 400 error responses on the v2 organization endpoints. `api-v1.d.ts` and `platform.d.ts` already matched production. - Fixed `verify-production-types`. It formatted the regenerated files in a temp directory outside the repository, so Prettier fell back to its defaults and the comparison could never match the committed files. It now passes the repository config explicitly. `pnpm api:verify-types` passes on this branch. - Verified locally: `pnpm typecheck`, `pnpm api:verify-types`, Studio unit tests. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Preserved descriptions when saving, sharing, moving, or unsharing notebooks, reports, SQL snippets, and saved queries. * Improved handling of empty or null values across notebook descriptions, billing usage, pooler settings, and infrastructure fields. * Improved read-replica connection handling, including read-only connection strings. * Updated storage configuration and capability handling to match current settings. * **API and Compatibility** * Updated organization, project, storage, OAuth, billing, and infrastructure data handling to match current API responses. * OAuth app creation and updates now require scopes. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com> |
||
|
|
1966209483 |
chore(deps): upgrade vitest to v5 (#49994)
Upgrades Vitest from 4.1.4 to 5.0.0 across the monorepo, fixes the handful of things v5 turned into hard errors, and drops the `vi.clearAllMocks()` boilerplate that v5's `clearMocks` default makes redundant. **Changed:** - `vitest`, `@vitest/ui`, `@vitest/coverage-v8` 4.1.4 → 5.0.0 (catalog) - `vi.mock` calls that lived inside `beforeAll`/`beforeEach`/test bodies moved to module scope (v5 throws on nested calls). Affects the Studio and docs setup files and four Studio tests. - `detectBrowser` test restores `navigator` via `vi.unstubAllGlobals()` instead of assigning `global.navigator`, which now reaches jsdom's getter-only property. - `RowEditor.utils.test.ts` restores its `JSON.stringify` spy. It used to leak a throwing mock for the rest of the file, which v5's coverage provider now trips over. A later test in the same file had been asserting the leak's side effect (valid JSON reported as invalid) and now asserts the correct behavior. - `@testing-library/jest-dom` 6.6 → 7.0.1. Its vitest type augmentation resolves through a peer now, so it lands on each package's own `vitest` instead of whichever copy pnpm hoisted. Fixes `toBeInTheDocument` type errors in dev-tools after the reshuffle. - `@testing-library/react` 16.0.0 → 16.3.3 for the React 19 peer range. - `vite: catalog:` added to dev-tools, www, and common. Without it they resolved a newer vite than the catalog pin, which forked a second vitest instance in the lockfile. There's now one. - ai-commands custom matcher types use v5's `Matchers<R, T>` form. - 110 test files: `vi.clearAllMocks()` removed from `beforeEach`/`afterEach` hooks, along with hooks that only did that and the imports they left unused. Calls that also reset/restore mocks are untouched. Second commit, mechanical. **Added:** - `.vitest/` to the root gitignore (v5 writes JSON/JUnit/HTML reporter output there) **Removed:** - `vite-tsconfig-paths` catalog entry and deps. Vitest 5 resolves tsconfig paths itself. Release-age note: this sat in draft with a temporary `minimumReleaseAgeExclude` entry for `vitest` and `@vitest/*` while 5.0.0 was inside the workspace's 3-day `minimumReleaseAge` window. That window has closed, so the exclusion is gone and nothing bypasses the release-age gate. **Perf** (local, medians of 3 runs, same machine): | Suite | v4.1.4 | v5.0.0 | |---|---|---| | studio | 144.1s | 141.7s (-2%) | | studio `--coverage` | 156.9s | 146.4s (-7%) | | ui-patterns | 6.27s | 5.07s (-19%) | | ui `--coverage` | 3.35s | 2.14s (-36%) | | www | 0.89s | 0.47s (-47%) | Studio is dominated by jsdom environment setup per file, which v5 doesn't change. `vitest doctor` recommends keeping the current pool config: the vm pools and `isolate: false` all break tests. ## To test - `pnpm install --frozen-lockfile` succeeds with no `minimumReleaseAgeExclude` entry for vitest. - CI: Studio unit tests, ui, ui-patterns, www, docs, and typecheck/lint should all be green. The lint ratchet was checked locally: warning counts on touched Studio files are identical to master. - `pnpm test:studio` locally passes with coverage (588 files, 6240 tests). - Open a Studio test that uses `toBeInTheDocument` in your editor and confirm no type errors on jest-dom matchers, in Studio and in `packages/dev-tools`. - Known pre-existing failures unrelated to this PR: one dev-tools test (`getEventCountBadge` capped pill) fails on master too. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Tests - Improved test coverage for JSON validation and mobile navigation behavior. - Updated test setup, cleanup, environment configuration, and matcher support across application and shared package suites. - Removed obsolete coverage for alternate MCP transport selection. ## Chores - Streamlined TypeScript path resolution and Vitest reporter output handling. - Updated testing libraries and Vitest tooling across documentation, Studio, website, and shared packages. - Added Vitest reporter output to ignored files. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com> Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com> |
||
|
Anthony Lio
|
c708e1128f |
fix(ui-patterns): reveal hover-only copy controls on keyboard focus (#50083)
## What kind of change does this PR introduce? bug fix + a11y _ follow-up to the UI review on #50045 ## What is the current behavior? **`CodeBlock`**: the copy control lives in an `opacity-0 group-hover:opacity-100` wrapper with no focus rule, so it stays invisible when a keyboard user tabs to it, button is focusable and pressable, just not visible **`DataInputs/Input`**: same wrapper, but the parent `InputGroup` declares a *named* group (`group/input-group`), so the unnamed `group-hover:` matched nothing. With `showCopyOnHover` the button was invisible at all times, hover included. Only consumer today is the Edge Functions "Download via CLI" popover. ## What is the new behavior? ├ adds `group-focus-within:opacity-100` to `CodeBlock` | state | preview | | -------|------| | before | <img width="800" height="450" alt="image" src="https://github.com/user-attachments/assets/04645fbd-3b43-4291-afe3-ba56ab961dac" /> | | after | <img width="800" height="450" alt="image" src="https://github.com/user-attachments/assets/880b49aa-2244-4b78-9fbd-f554770e3a3b" /> | ├ retargets both variants at the named group: `group-hover/input-group:` + `group-focus-within/input-group:` in `Input` | state | preview | | -------|------| | before | <img width="542" height="261" alt="image" src="https://github.com/user-attachments/assets/0ff85a85-5ef8-41e4-a3f0-34f7982770c4" /> | | after | <img width="542" height="261" alt="image" src="https://github.com/user-attachments/assets/8ce84ea7-bcb6-47ba-a7e6-a35f6edbd332" /> | ## Testing 1. visits `/docs/guides/ai-tools/plugins#manual-installation` 2. tabs into the code block <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Accessibility Improvements** - Copy buttons in code blocks and input fields are now revealed when the component or its contents receive keyboard focus, in addition to appearing on hover. - Improved keyboard discoverability and access to copy actions. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Danny White
|
1131e3e2ce |
fix(ui): default Button variant to default instead of primary (#50160)
## What kind of change does this PR introduce? Bug fix / design-system alignment for the legacy `Button` from `ui`. ## What is the current behavior? Omitting `variant` on the legacy `Button` falls back to brand-green `primary`. That makes accidental greens easy, and it is hard to spot the real main action on busy pages. ## What is the new behavior? - Legacy `Button` now defaults to neutral `default` - Intentional primary CTAs (create, save, submit, marketing CTAs, and matching `ButtonTooltip` usages) now set `variant="primary"` so their appearance is unchanged - Neutral actions that previously relied on the old fallback (cancel, close, back, dashboard nav, and similar) become grey/white - Design-system docs updated; regression tests cover the new default `Button_Shadcn_` is unchanged. It already uses its own CVA default. This is PR 1 of 2 in a stack. PR 2 drops now-redundant `variant="default"` props. ## To test Studio (http://localhost:8082): - `/sign-in`: Sign in stays green - Open a project → Database → Tables: New table stays green - Auth → Users → Invite: Invite user stays green; Cancel / dismiss controls stay neutral - Project Settings → General: edit a field so Cancel and Save appear. Cancel is neutral, Save is green Design system (http://localhost:3003): - Components → Button: default demo is neutral; primary demo is green; featured preview is the default variant Marketing (optional): - www header: Start your project stays green; logged-in Dashboard is neutral <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Style** - Buttons now default to a neutral style, while primary actions across Studio, documentation, marketing pages, forms, dialogs, and error states use prominent primary styling. - Updated button examples and previews clarify the distinction between default and primary variants. - Event registration now includes a directional arrow icon. - **Tests** - Added coverage confirming default button styling and explicit primary styling behave as expected. - Updated related test fixtures to use primary styling where appropriate. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
2b57416bc4 |
docs: add Cursor CLI instructions for Supabase MCP (#50053)
## What this does Adds Cursor CLI instructions to the existing Cursor entry in the Supabase MCP docs. - Explains that Cursor IDE and `agent` share `.cursor/mcp.json` or `~/.cursor/mcp.json`. - Documents enable, login, and status commands after one-click or file setup. - Updates the Cursor MCP documentation link. Cursor CLI cannot add an MCP server, so no separate client entry is added. <img width="1128" height="706" alt="image" src="https://github.com/user-attachments/assets/fc35226c-0284-4292-9023-79c4f735aad2" /> ## Testing - Verified with Cursor CLI `2026.09.02-c22c1a3` using isolated configuration. - Ran `pnpm --filter docs build:guides-markdown`. - Ran `pnpm --filter ui-patterns test types.test.ts`: 17 passed. - Verified the rendered Cursor instructions and copy buttons. Closes [AI-700](https://linear.app/supabase/issue/AI-700/add-cursor-cli-instructions-for-supabase-mcp-server) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added Cursor support to the MCP URL Builder, including setup instructions for Cursor IDE and CLI. - Added guidance for configuring MCP servers across Cursor projects. - Added OMP setup guidance for project-scoped and cross-project configurations. - Added commands to enable, authenticate, reload, and verify MCP connectivity. - **Documentation** - Updated the Cursor documentation link. - **UI Improvements** - Improved rendering of instruction headings with consistent sizing and styling. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Cursor <cursoragent@cursor.com> Co-authored-by: Nik Richers <nrichers@gmail.com> |
||
|
Danny White
|
bfe07a5937 |
fix(ui-patterns): stabilise multi-select trigger height (#50163)
## What kind of change does this PR introduce?
Bug fix and design-system documentation update.
## What is the current behaviour?
Multi-select examples inconsistently hide the default trigger icon,
which makes the component default difficult to understand from the
design-system page.
The empty trigger label and selected badges also use different content
heights. Selecting or removing the first item causes the default 34px
trigger to grow or shrink slightly.
## What is the new behaviour?
- Shows the default trigger icon in every existing multi-select example
- Adds a dedicated **Without trigger icon** example for
`showIcon={false}`
- Normalises the label and badge content rows to 20px so the default
trigger remains 34px when the first item is selected or removed
- Adds regression coverage for the default trigger height classes
This follows the 34px trigger sizing introduced in
[#48696](https://github.com/supabase/supabase/pull/48696).
## To test
1. Open [Design System > Fragment Components > Multi
Select](https://design-system-git-dnywh-fixmulti-select-icon-ex-772e13-supabase.vercel.app/design-system/docs/fragments/multi-select).
2. Confirm every existing example shows the default trigger icon.
3. Confirm the new **Without trigger icon** example is the only example
without it.
4. In the first example, select and remove the first fruit. The trigger
should remain the same height throughout.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a multi-select example that hides the trigger icon.
* Added documentation and a preview for using multi-select without a
trigger icon.
* **Bug Fixes**
* Improved multi-select badge and label alignment.
* Preserved consistent trigger height when selecting the first item.
* Updated examples to display the trigger icon by default.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
|
||
|
Danny White
|
6a4cbefbcf |
feat(ui): align combobox trigger with select styling (#49665)
## What kind of change does this PR introduce? Bug fix and shared UI primitive. ## What is the current behaviour? In **Database > Replication > Add destination**, the searchable **Publication** field uses a double chevron and button styling. It looks inconsistent beside the **Initial sync** select, which uses a single chevron and the standard select surface. The shared multi-select trigger uses the same inconsistent double chevron. These differences are easy to repeat because searchable comboboxes do not have a dedicated trigger that shares the select styling. ## What is the new behaviour? - Adds `ComboboxTrigger` with the same shared styling as `SelectTrigger` - Uses a fixed single down chevron so combobox and select triggers cannot drift - Migrates the Studio **Database > Replication > Add destination > Publication** field to `ComboboxTrigger` - Updates `MultiSelectorTrigger` to replace `ChevronsUpDown` with the same fixed `ChevronDown`, including **Connect > MCP > Feature groups** in Studio - Updates the canonical design-system combobox examples - Leaves `Button` unchanged, so adopting combobox styling is explicit | Before | After | | --- | --- | | <img width="1256" height="448" alt="CleanShot 2026-09-09 at 10 21 32@2x" src="https://github.com/user-attachments/assets/bb7a6056-0b4e-4cb4-8dce-e92fa4f5afe7" /> | <img width="1256" height="448" alt="CleanShot 2026-09-09 at 10 21 11@2x" src="https://github.com/user-attachments/assets/860a06b9-617d-4d94-ac98-944316e9fdc3" /> | | <img width="1210" height="520" alt="CleanShot 2026-09-09 at 10 58 28@2x" src="https://github.com/user-attachments/assets/e916d3a2-6a75-40eb-965a-56e0694ba447" /> | <img width="1210" height="520" alt="CleanShot 2026-09-09 at 10 57 57@2x" src="https://github.com/user-attachments/assets/c5f1b8ff-8083-47b8-8242-59116d085c00" /> | ## Left for incremental migration These existing Studio comboboxes still use bespoke button triggers and will move to `ComboboxTrigger` in focused follow-up changes: - **Database > Backups > Point in time > Timezone** - **Authentication > Third-party auth > AWS region** - **Account > Preferences > Timezone** - Shared schema and function selectors See https://github.com/supabase/supabase/pull/50157. The organisation and project switchers in the top navigation are intentionally out of scope. They are context switchers rather than form-field comboboxes. ## To test ### Studio callsites On the [Studio preview](https://studio-staging-git-dnywh-featcombobox-trigger-supabase.vercel.app): 1. Open **Database > Replication > Add destination**. 2. Compare **Publication** with **Initial sync**. Both should use a single down chevron and the same closed-field surface, border, sizing, and hover treatment. 3. Open **Publication**, search for an option, and select it. The popover should close and the selected publication should be shown. 4. Open **Connect** from the project header, select **MCP**, and check **Feature groups**. Its multi-select trigger should use a single down chevron. ### Design system 1. Check the [combobox examples](https://design-system-git-dnywh-featcombobox-trigger-supabase.vercel.app/design-system/docs/components/combobox). 2. Check the [multi-select examples](https://design-system-git-dnywh-featcombobox-trigger-supabase.vercel.app/design-system/docs/fragments/multi-select). 3. Both trigger types should use a single down chevron. |
||
|
Anthony Lio
|
45199443c8 |
fix(ui): admonition component parity (#49925)
## what is the current behavior? admonition icon <> text not optically aligned + rendered differently in docs and the design system _ docs showed admonition text at 15px/28px because the page's prose styles reached inside the component, while the same callout was 13px in the design system _ lists ## what is the new behavior? - the title offset is now conditional. a title and body copy have different line heights, so they need different nudges to sit level with the icon. - fixes list markers and the ordered-list chip alignment inside callouts. - removes `.admonition-content` css that nothing referenced - fixes 5 admonition titles that were not capitalized. | state | preview | | -------|------| | before | <img width="902" height="279" alt="image" src="https://github.com/user-attachments/assets/2fffb183-81e2-4eff-8f0d-8a07649390e8" /> | | after | <img width="902" height="279" alt="image" src="https://github.com/user-attachments/assets/22abe3ed-fd6d-49ac-aa37-4292bca5850a" /> | ## follow ups - better composition: title, description and actions are still props _ a compound api (`Admonition.Title`, `Admonition.Actions`) would remove the `childProps` escape hatch <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Documentation** * Improved capitalization of note and warning titles in the Metabase and Prisma guides for consistency. * Updated the contributing guide’s table of contents to exclude feedback headings. * Improved heading structure for the documentation feedback section. * **UI Improvements** * Refined admonition and alert typography, spacing, list formatting, and ordered-list alignment. * Improved content spacing when titles, descriptions, or icons are present. * Updated action links and buttons for more consistent sizing. * Adjusted alert content styling for a clearer presentation. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
f5d0bf5d98 |
fix(ui): let command dropdowns scroll on touch inside overlays (#50103)
## What kind of change does this PR introduce? Bug fix. ## What is the current behavior? A command dropdown cannot be scrolled by touch when it sits inside a dialog or sheet. Radix wraps a modal dialog's overlay in a scroll lock that cancels wheel and touch events whose target is not inside the sheet. A dropdown portals to the body, so it falls outside that boundary and its scroll events get cancelled. Callers have been rediscovering this one at a time and fixing only half of it. `MultiSelectorList` stops wheel events reaching the document, and `SchemaSelector` and `FunctionSelector` expose a `stopScrollPropagation` prop that does the same. None of them handle touch, so the desktop symptom is fixed everywhere and the mobile one is fixed nowhere. ## What is the new behavior? `CommandList` keeps wheel and touch events off the document itself. That covers every command dropdown in the monorepo, in an overlay or not, with no call-site changes. A caller's own `onWheel` or `onTouchMove` still runs. The workarounds this replaces are removed: the handler in `MultiSelectorList`, and the `stopScrollPropagation` prop on `SchemaSelector` and `FunctionSelector` along with its four call sites. One behavior change worth naming: overscrolling past the end of a dropdown no longer scrolls the page behind it. That is what a dropdown should do, and it is what the four `stopScrollPropagation` call sites were already opting into. #50072 depends on this. It swaps two selects for comboboxes, and Radix Select brings its own scroll lock, so without this the swap would regress touch scrolling. ## To test - On the deploy preview, [open a project's Connect sheet](https://studio-staging-git-dnywh-fix-multi-select-scrol-63608b-supabase.vercel.app/dashboard/project/_) and pick the MCP tab. - Narrow the window to phone width and switch on touch emulation in devtools. - Open the features dropdown and drag the list. It should scroll, and the sheet behind it should stay put. - Repeat with a mouse wheel to confirm desktop scrolling still works. - [Open Authentication > Hooks](https://studio-staging-git-dnywh-fix-multi-select-scrol-63608b-supabase.vercel.app/dashboard/project/_/auth/hooks) > Create hook, open the schema picker, and confirm it still scrolls by wheel now that `stopScrollPropagation` is gone. - [Open the SQL editor](https://studio-staging-git-dnywh-fix-multi-select-scrol-63608b-supabase.vercel.app/dashboard/project/_/sql/new)'s schema picker on a page with no overlay and confirm the list scrolls normally. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Bug Fixes** - Improved wheel and touch scrolling behavior in command lists, selectors, and multi-select menus. - Reduced unwanted scroll-lock interference when using selectors inside overlays such as dialogs and sheets. - Preserved support for supplied scroll event callbacks. - **Accessibility** - Added clearer accessible labels to the Connect and mobile navigation menu buttons. - Updated the Connect button text behavior for icon-only and standard presentations. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Opus 5 <noreply@anthropic.com> Co-authored-by: Joshen Lim <joshenlimek@gmail.com> |
||
|
Gildas Garcia
|
bfb0737d14 |
Fix to ensure labels, descriptions and validation errors are correctly linked to their inputs (#50080)
## Problem `FormItemLayout` does not correctly binds inputs descriptions and validation messages to their inputs. This is because the input ids are generated and not correctly propagated to the `FormMessage` and `FormDescription` components. Besides, we still pass `name` or `id` directly to the inputs or `FormItemLayout` in some places. ## Solution - Fix `FormItemLayout` to correctly binds inputs descriptions and validation messages to their inputs - Fix incorrect usages - Fix Design System documentation ## How to test The issue is visible in production: - Open https://supabase.com/design-system/docs/ui-patterns/forms - Open the devtool and check the labels `for`, the description `id` and the input `id` or `aria-describedby` attributes. You'll see they often don't match Do the same on staging: - Open https://design-system-git-fix-a11y-form-input-descriptions-supabase.vercel.app/design-system/docs/ui-patterns/forms - Open the devtool and check the labels `for`, the description `id` and the input `id` or `aria-describedby` attributes. They now match Dashboard fixes: - https://studio-staging-git-fix-a11y-form-input-descriptions-supabase.vercel.app/dashboard/account/tokens: _Expires in_ select button is now correctly linked to its label - https://studio-staging-git-fix-a11y-form-input-descriptions-supabase.vercel.app/dashboard/account/me: the switches are now correctly linked to their label - In Database/Indexes: the select buttons when creating an index are now correctly linked to their label - All other changes are the same things |
||
|
Alaister YoungandAlaister Young
|
ec1029dff0 |
chore: migrate from clsx + tailwind-merge to shadcn-ui/cn (#49938)
Migrates the repo off `clsx` + `tailwind-merge` to [shadcn-ui/cn](https://github.com/shadcn-ui/cn). Every app and package already gets `cn` from `packages/ui`, so the swap happens in that one helper and flows through to Studio, docs, www, and the rest. **Changed:** - `packages/ui` `cn` helper now uses `createCn` from `cn/config`, keeping the custom `card`/`content` spacing scale so `p-card` still overrides `p-4`. It has an explicit signature and re-exports `ClassValue`. - The four www Launch Week files that imported the `ClassValue` type from `clsx` now import it from `ui`. - `blocks/vue` local `lib/utils.ts` re-exports `cn` from the package. - Comments/README that referenced tailwind-merge. **Removed:** - Direct `clsx` and `tailwind-merge` deps from `ui`, `ui-patterns`, `www`, and `blocks/vue`. `ui-patterns` and `www` declared them without importing. **Added:** - `packages/ui/src/lib/utils/cn.test.ts` covering clsx-style joining, conflict resolution, the custom spacing scale, and variant handling. Not migrated: the standalone apps under `examples/`. They're outside the workspace and mostly on Tailwind v3, which `cn` doesn't support. Lockfile note: after merging master, the lockfile diff is only the intended swap (`clsx` and `tailwind-merge` out, `cn@0.2.5` in). `tailwind-merge` stays in the lockfile as a transitive dep of a third-party package. Release-age note: this sat in draft with a temporary `minimumReleaseAgeExclude` entry for `cn` while `cn` was inside the workspace's 3-day `minimumReleaseAge` window. That window has closed, so the exclusion is gone and nothing bypasses the release-age gate. ## To test - `pnpm install --frozen-lockfile` succeeds with no `minimumReleaseAgeExclude` entry for `cn`. - `pnpm --filter ui test` – new `cn.test.ts` passes, including `cn('p-4', 'p-card')` → `p-card`. - Typecheck passes for studio, ui, ui-patterns, vue-blocks. www typecheck panics under tsgo on master already (pre-existing, unrelated); it passes with the JS `tsc` binary. - Spot-check Studio locally: class overrides still win in the usual places (e.g. `CodeEditor` height, `Button` variants with a custom `className`). https://claude.ai/code/session_01MkAt16tsPRDTm9oB5Jr8Ub <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Improvements** * Standardized Tailwind class merging across shared UI utilities while preserving conditional classes, custom spacing classes, and variant behavior. * Updated related components and examples to use the standardized class-merging utility. * **Tests** * Added coverage for conditional class handling, conflicting utility resolution, custom spacing classes, and variant separation. * **Documentation** * Updated usage guidance to reflect the standardized Tailwind class-merging approach. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com> |
||
|
Pedro Rodrigues
|
16046a0139 |
docs: add omp (oh-my-pi) to supported clients in MCP and plugin guides (#50045)
## What this does
Adds **omp** (oh-my-pi) across the Supabase AI-tools docs.
- **Plugin docs** (`AgentPluginsPanel`) — omp client + Anthropic
marketplace install: `omp plugin marketplace add
anthropics/claude-plugins-official`, then `omp plugin install
supabase@claude-plugins-official`.
- **MCP docs** (`McpUrlBuilder`) — omp under "AI Agent CLI":
`.omp/mcp.json` / `~/.omp/agent/mcp.json` (JSON), `/mcp add` guided
setup, project vs user scope.
- **"Pick your agent" grid** — add the omp logo and tagline ("A coding
agent with the IDE wired in.").
No CLI command mapping entry — omp has no `omp mcp …` subcommand, so the
page documents file-based setup (`/mcp add` wizard or direct JSON edit).
Matches other file-configured clients like kiro.
## Testing
Verified against omp 18.1.11: written `.omp/mcp.json` parsed by runtime,
`/mcp list` shows server connected; `omp plugin marketplace add/install
supabase@claude-plugins-official` works; `omp plugin list` confirms
installed.
## Preview
### Agent Plugin page
<img width="1128" height="706" alt="image"
src="https://github.com/user-attachments/assets/1f06895b-2d45-4b64-b9ab-c1670201c370"
/>
### MCP page
<img width="1128" height="706" alt="image"
src="https://github.com/user-attachments/assets/30a9a823-0e78-4c3b-aeeb-3a6a7aa40ed6"
/>
### AI Tools main page
<img width="1128" height="706" alt="image"
src="https://github.com/user-attachments/assets/064a3234-9f4d-4f0a-9598-fbb2a465266f"
/>
Closes AI-1184
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Added OMP as a supported AI coding agent across documentation and
integrations.
- Added OMP installation guidance, including marketplace setup, scope
options, session reloads, and authentication.
- Added support for configuring the Supabase MCP server through OMP.
- Added OMP branding, icon, tagline, repository, and documentation
links.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
|
||
|
Saxon FletcherandCursor
|
04747937a2 |
fix(ui-patterns): align badges and input in the tiny multi-select trigger (#49986)
## What's changed **Before** <img width="467" height="353" alt="image" src="https://github.com/user-attachments/assets/4587d51a-8bbe-4da4-a3dd-dcaac6b17993" /> **After** <img width="541" height="360" alt="image" src="https://github.com/user-attachments/assets/de66b229-54b0-4443-9c49-6f2ff0dd93aa" /> Independent of the Explorer/assistant stack. `MultiSelectorTrigger` with `size="tiny"` had badges and the inline input overflowing the 26px control. The trigger now stretches its children (`items-stretch`), badges are `h-full py-0 leading-none` with a tighter `gap-0.5`, the input/label drop their extra padding and line-height, and the chevron self-centers. Other sizes are unchanged (`isTiny` guards every new class). Also drops a redundant `text-sm` from `MultiSelectorInput`, which `MultiSelectorInputVariants` already sets per size. ## How to test 1. Design system (`pnpm dev:design-system`) or anywhere Studio uses `<MultiSelector size="tiny">` (e.g. Logs filters): with 1–3 values selected the badges sit inside the 26px control with no clipping; the placeholder and chevron are vertically centered. 2. `size="small"` / default still look the same as on `master`. 3. `pnpm --filter ui-patterns exec vitest --run src/multi-select` passes. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Style** - Improved the compact multi-select control layout, including spacing, alignment, selected-value badges, input sizing, and dropdown indicator positioning. - Adjusted placeholder spacing when the tiny control has no selected values. - **Tests** - Updated coverage to verify compact spacing and sizing when the tiny multi-select control displays a selected value. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Cursor <cursoragent@cursor.com> |
||
|
Piyush Yadav
|
b8d28b36d9 |
fix(ui-patterns): prevent duplicate horizontal scrollbar in MultipleCodeBlock (#49940)
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? Bug fix ## What is the current behavior? Fixes #49903 In `ConnectSheet` (e.g., Next.js -> Step 2 "Add files"), multi-file instructions render using `MultipleCodeBlock`. The `TabsContent` container in `packages/ui-patterns/src/MultipleCodeBlock/index.tsx` was styled with `className="... overflow-scroll ..."`. The CSS property `overflow-scroll` forces both horizontal and vertical scrollbar tracks to be rendered regardless of whether horizontal content overflows. Because the child `<CodeBlock>` already manages its own horizontal overflow (`overflow-auto`) and fills the container width, `TabsContent` displayed a frozen/disabled horizontal scrollbar at the top level. When scrolling down vertically to the bottom of the code snippet, `<CodeBlock>`'s real horizontal scrollbar came into view, resulting in inconsistent and duplicate scrollbars. ## What is the new behavior? - Replaced `overflow-scroll` with `overflow-y-auto` on `TabsContent` in `MultipleCodeBlock`. - `TabsContent` cleanly scrolls vertically when content height exceeds `max-h-72`. - Eliminates the duplicate/disabled top-level horizontal scrollbar. - Horizontal code scrolling is cleanly delegated to `<CodeBlock>` only when lines exceed the available width. - Added a unit test in `packages/ui-patterns/src/MultipleCodeBlock/index.test.tsx` verifying `TabsContent` applies `overflow-y-auto` rather than `overflow-scroll`. ## Additional context Verified locally: - `vitest run src/MultipleCodeBlock/index.test.tsx` (all tests passing) - `tsc --noEmit` in `packages/ui-patterns` (0 type errors) - `prettier --check` against modified files (passed) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Improved code block scrolling to use vertical scrolling only. * Prevented unnecessary horizontal scrollbars in multi-file code examples. * Added coverage to verify the updated scrolling behavior. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Saxon Fletcher
|
4ee43f3585 |
chore(studio): refine Explorer query UI (#49895)
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? UI refinements for Explorer query surfaces. ## What is the current behavior? - The assistant chat textarea uses a tighter radius than the Run SQL / Create a notebook cards on Explorer home. - Chart results sit unevenly in the results pane because axis gutters stack on card padding, and long Y labels can clip. - Selecting SQL in the editor changes the primary Run button to Run selected, which is easy to trigger by accident. - The Prettify SQL icon in notebook query cells uses Lucide's default size, so it doesn't match other toolbar actions. ## What is the new behavior? - Assistant chat form uses `rounded-lg` so it matches the home action cards everywhere the form is used. - Query result charts collapse unused axis space, add a little padding when labels are on, and size the Y axis from formatted ticks so longer labels fit. - Run is a default split button that always executes the full query. Run selected is a secondary menu item, disabled until SQL is selected. - Notebook cell Prettify SQL icons use `size={16}` and `strokeWidth={2}` like the rest of the Explorer toolbar. ## Additional context Cmd+Enter in the editor still runs the current selection when there is one. ## Test plan - [ ] Open Explorer home and confirm the assistant chat radius matches the Run SQL and Create a notebook cards. - [ ] Run a query, switch to chart view, and check spacing with labels off and on, including large Y values. - [ ] With no selection, click Run and confirm the full query runs. Open the split menu and confirm Run selected is disabled. - [ ] Select SQL, click Run, and confirm the full query still runs. Use Run selected from the menu to run only the selection. - [ ] In a notebook query cell, confirm Prettify SQL matches the size and stroke of nearby toolbar icons. Made with [Cursor](https://cursor.com) <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added a split Run control in the query editor, with separate actions for running all content or only selected text. - Added support for customizing chart X-axis display settings. - Improved chart Y-axis sizing, scaling, and tick formatting for clearer results. - **Bug Fixes** - The “Run selected” action is unavailable when no text is selected. - **Style** - Updated toolbar icon sizing and added rounded corners to the assistant chat input. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Danny White
|
924b3f5793 |
feat(ui-patterns): add async selection feedback (#49843)
## What kind of change does this PR introduce? Shared UI pattern and Studio UX improvement. ## What is the current behavior? Async selectors use bespoke loading and error layouts. Some replace the entire field while fetching, and opening a selector does not consistently refresh its options. ## What is the new behavior? Adds shared loading, error, and empty states for Select, command, and MultiSelector lists, including a persistent polite live region and reduced-motion support. Analytics Bucket and DuckLake selectors keep their controls in place, retain populated options during background refreshes, and refresh when reopened. ## To test Open the [Replication preview](https://studio-staging-git-dnywh-featasync-selection-feedback-supabase.vercel.app/dashboard/project/_/database/replication?destinationType=Analytics%20Bucket). The destination sheet should already be open on **Analytics Bucket**. You do not need to create a bucket, configure a destination, or start a pipeline. Open **Select a bucket**, then review these outcomes: 1. **The trigger stays put.** Opening the picker must not replace the form field with a full-width loading placeholder. 2. **Loading belongs inside the menu.** While options are fetched, the open menu shows a compact skeleton list. 3. **No resources has a clear explanation.** If the project has no Analytics Buckets, the menu says **No buckets available**. It still offers **Create a new bucket** beneath that message. 4. **Existing options do not disappear on refresh.** If the project does have buckets, close and reopen the picker. Its current options remain visible while the refresh happens in the background, rather than flashing back to skeletons. 5. **The pattern is consistent.** If convenient, select a bucket and open the namespace or access-key picker. The same in-menu loading, empty, and error treatment applies there too. The deterministic request-error and reduced-motion cases are covered by focused unit tests because the deploy preview cannot reliably force those states. |
||
|
Ivan Vasilov
|
02cf09212e |
chore: Remove tsconfig paths (#49770)
This PR removes all `paths` in `tsconfig.json` for all apps and packages. They were added previosly because some of the components had a `_Shadcn` suffix because of an ongoing migration. How that the migration is done, the paths can be removed. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Refactor** * Standardized shared UI component, utility, and icon imports across design-system examples and application screens. * Simplified shared component access and project configuration. * Added shared access to anchor-link helpers and animation styles. * **Compatibility** * Updated component exports and imports without changing existing behavior. * No changes to user-facing workflows, screens, or functionality. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
4f92790587 |
fix: FormItemLayout does not apply item id correctly (#49637)
## Problem `<FormItemLayout>` does not apply item id correctly. This can be seen on https://supabase.com/design-system/docs/ui-patterns/forms: open the devtool and check the form items labels. They have no `for` attribute. This makes it harder to correctly test and is an accessibility issue. Axe devtool actually report it ## Solution When inside React Hook Form, `<FormItemLayout>` actually generate an `id` (via `<FormItem>`). However, this `id` is overridden in `<FormLayout>` and read from context by `<FormLabel>`. Ensure we use the generated id unless one was provided. Also updated the paths filters for the CI check so that any changes in either `ui` or `ui-patterns` triggers the studio unit and e2e tests. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Bug Fixes** - Improved form accessibility by ensuring labels consistently connect to their corresponding input fields. - React-based forms now correctly preserve field-specific identifiers when associating labels with inputs. - Added support for explicitly specifying a label’s input target, improving compatibility with customized form layouts. - Updated Studio forms to use consistent control identifiers and labeling behavior. - **Quality Improvements** - Automated validation now also runs when shared UI components and patterns are updated. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Alaister YoungandAlaister Young
|
29493e02d0 |
[FE-4010] feat(studio): add read-only replica connection option for HA projects (#49485)
For Multigres (HA) projects you can't connect to read replicas directly — reads go through a read-only load balancer on the primary's host at port 5433. Since #44695 stripped the pooler UI, HA projects showed no source option at all in the Connect dialog and still prompted for the IPv4 add-on. This surfaces it as a first-class, clearly-labeled read-only source. In the UI it's labeled `Replica (read-only)` rather than "load balancer" — the primary goes through the same gateway, so "load balancer" would be confusing from a product perspective (internally the `load-balancer` source identifier and `HIGH_AVAILABILITY_LOAD_BALANCER_PORT` constant keep their names). <img width="883" height="342" alt="Screenshot 2026-08-24 at 11 32 26 PM" src="https://github.com/user-attachments/assets/3716f6dd-0325-4b9d-adbc-9ece9244de62" /> **Added:** - Source select for HA projects in the Direct tab: `Primary database` + `Replica (read-only)` (individual replica rows are filtered out — they're only reachable via the load balancer) - Replica (load balancer) connection strings on all 9 connection types: primary host, port `5433`, with the Multigres-required `sslmode=require&sslnegotiation=direct` params (JDBC gets the `sslNegotiation` spelling, .NET gets `SSL Negotiation=Direct`) - `Read-only` badge on the connection code block + note pointing writes at the primary - Programmatic labels for the ConnectSheet select/switch/multi-select fields (the Source combobox previously had no accessible name) **Changed:** - The generated-file step (Node.js/Golang/.NET/Python/SQLAlchemy) is now source-aware — it previously ignored the Source selection entirely (also affected read replicas on normal projects) and silently rendered the primary's connection info - .NET template now emits `Port=` (Npgsql defaults to 5432 when omitted) and the install step actually installs Npgsql (pinned 9.0.5 — `SSL Negotiation` requires 9+) - SQLAlchemy `DATABASE_URL` merges `sslmode=require` into the string's existing query params instead of a hardcoded suffix that could drop TLS - Source option labels normalized to sentence case (`Primary database`, `Read replica (…)`) - `MultipleCodeBlock` (ui-patterns) accepts an optional `className` - HA coercion in `useConnectState` extended: a stale replica `connectionSource` restored from URL/localStorage falls back to the primary **Removed:** - IPv4 add-on admonition for HA projects (the forced-direct method was tripping it; the add-on doesn't apply to Multigres) Out of scope (needs platform work): SQL editor / Data API / other `DatabaseSelector` surfaces — executing against the load balancer requires a platform-issued connection string, and the load-balancers API only returns a REST endpoint today. The `5433` port is a client-side constant (`HIGH_AVAILABILITY_LOAD_BALANCER_PORT`) until the API exposes it. ## To test On an HA (Multigres) project: - Open Connect → Direct: Source shows exactly `Primary database` and `Replica (read-only)`; selecting the replica shows `…@<primary-host>:5433/postgres?sslmode=require&sslnegotiation=direct`, a `Read-only` badge, and the read-only note - Cycle all 9 connection types with the replica selected — every snippet carries port 5433 (`.NET` includes `Port=5433;…;SSL Negotiation=Direct`), badge/note persist - No "Enable IPv4 add-on" admonition anywhere in the Direct tab - Switch tabs / hard-reload: source resets to primary with no stale badge/string combos On a normal project: - Direct tab unchanged: no `Replica (read-only)` option, pooler badges and IPv4 admonitions behave as before, `.NET` now shows `Port=5432` and no `SSL Negotiation` <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added read-only load-balancer connection options for high-availability projects. - Added .NET and SQLAlchemy connection examples with required SSL settings. - Added clear read-only labels and notices explaining write restrictions. - **Bug Fixes** - Suppressed IPv4 add-on notices for high-availability connections. - Improved connection-source selection and restored-setting handling. - Improved connection form identification and accessibility. - **Style** - Added customizable styling support for multi-code-block displays. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com> |
||
|
Gildas Garcia
|
57a6f74407 |
Revert "fix: FormItemLayout does not apply item id correctly" (#49635)
Reverts supabase/supabase#49593 because we currently provide `id` manually in some places and that breaks many tests. We didn't see the failures because the PR only modified `ui-patterns` which isn't in the paths checked to actually run the tests (this must be fixed too). <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Improved form accessibility by correctly associating labels with their corresponding fields in React form layouts. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Gildas Garcia
|
df48528443 |
fix: FormItemLayout does not apply item id correctly (#49593)
## Problem `<FormItemLayout>` does not apply item id correctly. This can be seen on https://supabase.com/design-system/docs/ui-patterns/forms: open the devtool and check the form items labels. They have no `for` attribute. This makes it harder to correctly test and is an accessibility issue. Axe devtool actually report it ## Solution When inside React Hook Form, `<FormItemLayout>` actually generate an `id` (via `<FormItem>`). However, this `id` is overridden in `<FormLayout>` and read from context by `<FormLabel>`. Simply removing this line fixes it and correctly binds the label to its input |
||
|
Charis
|
eabb87564b |
fix(studio): resolve dirty notebook save conflicts (#49540)
## Summary - require an explicit choice before saving a notebook that diverged while dirty - let users save over assistant changes or discard their local edits, with deleted notebooks recreating safely - keep dismissals side-effect free and close deleted notebook tabs when edits are discarded ## Testing - pnpm --filter studio exec vitest run components/interfaces/Explorer/__tests__/ExplorerNotebookTab.assistant-cache-invalidation.test.tsx data/content/notebooks/notebook-cache.test.ts --reporter=dot - pnpm --filter studio typecheck <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added conflict handling when server-side notebook changes overlap with local edits. - Users can overwrite, recreate, discard, or dismiss changes through a confirmation dialog. - Deleted notebooks can be recreated when saved, while discarded deleted notebooks are automatically removed from open tabs. - Conflict dialogs remain open while an action is in progress. - **Bug Fixes** - Improved notebook cache cleanup to remove stale and unsaved notebook data reliably. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Danny White
|
bd02d7f297 |
feat(www + studio): broaden Select 2026 banner reach and soften www edges (#49569)
## What kind of change does this PR introduce? Feature polish for the Select 2026 promotion. ## What is the current behavior? - Studio only shows the Select Banner Stack card inside `ProjectLayout` (project routes). - www glyph fields read as hard rectangles on each side of the announcement banner. ## What is the new behavior? - Studio registers the Select banner from `AppBannerWrapper`, so it also appears outside project context (org / account surfaces). - www fields use per-row widths with edge alignment: top/middle shorter, bottom longer, growing inward from each side for a softer silhouette. https://github.com/user-attachments/assets/c5275967-63d0-40dd-a472-e3db08d1c39d ## To test - **Studio (non-project):** open an org home or account page on the deploy preview. Confirm the Select Banner Stack card appears in the usual stack and dismisses as before. - **Studio (project):** open any project route. Confirm the same card still appears and does not double-register. - **www:** open the marketing homepage. On `sm+`, confirm each side of the cream announcement bar has a 3-row field where the bottom row reaches further inward than the top, and the middle row is shortest. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added the Select 2026 promotional banner to eligible hosted Studio environments. * Banner visibility reflects promotion status, platform eligibility, loading state, and dismissal preferences. * **Style** * Refined decorative field layouts with improved row alignment, mirrored visuals, and flexible sizing. * **Bug Fixes** * Updated visibility behavior so the banner is no longer tied to being inside a specific project. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Danny White
|
b5462ee7bb |
feat(www + studio): promote Select 2026 in www and Dashboard (#49511)
## What kind of change does this PR introduce?
Feature. Promotes Supabase Select 2026 across www and the Dashboard.
## What is the current behavior?
There is no active Select promotion on www or in the Dashboard.
## What is the new behavior?
- Adds a dismissible Select 2026 banner above the www navigation.
- Adds a low-priority Banner Stack card across hosted Studio project
pages.
- Shares a lightweight pixel lockup and CSS-only motion across both
surfaces, with light, dark, and reduced-motion treatments.
- Opens the application page in a new tab and automatically expires both
placements after October 2 in San Francisco.
## To test
- Open `/database` on the www preview. Confirm the banner is legible in
light and dark mode, the complete message remains visible at a phone
width, and the CTA opens `select.supabase.com` in a new tab.
- Dismiss the www banner, then refresh the page. Confirm it stays
dismissed.
- Open any `/project/{ref}` route in the Dashboard preview. Confirm the
Select card appears in the bottom-right Banner Stack behind
higher-priority notices.
- Dismiss the Dashboard card, navigate to another project page, and
confirm it stays dismissed.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a time-limited Select 2026 promotional banner across the website
and Studio.
* Added responsive themed artwork, animated visuals, campaign messaging,
and an external “Apply to attend” CTA.
* Banner dismissal preferences are saved and respected across visits.
* Promotion automatically disappears after the campaign ends.
* **Accessibility**
* Improved announcement dismissal controls with semantic buttons and
accessible labels.
* Added reduced-motion support for promotional artwork.
* **Bug Fixes**
* Improved product-card loading effects to prevent hydration
inconsistencies.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
|
||
|
Ali Waseem
|
bfbe71bc3b |
Allow pasting multiple redirect URLs at once (#49490)
Redirect URLs had to be added one at a time through the modal, and a whitespace-separated paste silently saved as a single malformed allow list entry. Adds an opt-in `pasteSeparator` prop to `SingleValueFieldArray` that expands a multi-value paste into one row per value, and wires it up in the auth redirect URL modal so commas, spaces and line breaks all work. Each URL lands on its own row, so the existing per-row validation applies individually. Fixes FE-4220 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Redirect URL fields now support pasting multiple URLs separated by commas, spaces, or line breaks. * Pasted values are automatically split into separate rows for easier editing and individual validation. * Supported URL formats are retained, including when multiple values are pasted together. * Existing single-value paste behavior remains unchanged. * Duplicate values are preserved so they can be reviewed and validated individually. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
|
2759b13efc |
refine display settings ui (#49466)
<img width="392" height="343" alt="image" src="https://github.com/user-attachments/assets/4a17e3ad-364d-45c6-9770-0f937ad18418" /> ## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? Studio UI refinement. ## What is the current behavior? The Explorer result settings popover uses a spacious vertical layout with mixed control heights and local active-state overrides. ## What is the new behavior? - Condenses the result settings into the horizontal form layout used by compact settings surfaces. - Uses base ToggleGroup, Select, MultiSelector, and Switch component variants. - Adds shared tiny Toggle and MultiSelector sizes so the compact controls render at 26px. - Uses the accent token for shared toggle active states. - Keeps the chart configuration behavior and disabled states intact. ## Verification - UI and UI Patterns focused tests - UI, UI Patterns, and Studio typechecks - Studio ESLint - Local visual verification against the supplied prototype <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Improvements** * Chart-specific configuration options now appear only when chart view is selected, keeping display settings focused and relevant. * Updated chart controls provide clearer options for scale, cumulative values, and labels. * Added compact sizing for multi-select fields and toggles to improve alignment with other form controls. * Refined toggle styling and adjusted small-size dimensions for a more consistent interface. * **Tests** * Added coverage for compact multi-select and toggle sizes. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Cursor Agent <cursoragent@cursor.com> Co-authored-by: Saxon Fletcher <SaxonF@users.noreply.github.com> |
||
|
Miranda LimonczenkoandClaude Opus 5
|
932180541e |
fix(ui-patterns): give the shared InfoTooltip trigger an accessible name (#49345)
Closes FE-4093 ## Problem The shared `InfoTooltip` trigger's only child is an SVG and it has no accessible name, so a screen reader announces an unnamed button and the information the tooltip carries is unreachable. `button-name`, critical. `/pricing` renders 34 of them. ## Solution * Add an optional `label` prop rendered as `sr-only` text, with a generic fallback so the 22 call sites that pass nothing still get a name. The prop is optional because 26 files import this component across www, Studio, design-system and ui-patterns. * Drop the redundant `role="button"` from a native button. * Label the four www call sites. A shared fallback alone would leave `/pricing` announcing 34 identical names, which passes axe and stays unusable. The labels come from the feature title and plan already in scope, so no pricing data changes. Docs is unaffected. It has its own `InfoTooltip` at `apps/docs/features/ui/InfoTooltip.tsx` and never imports the shared one. ## Manual testing 1. Open [/pricing](https://zone-www-dot-com-git-ui-patterns-infotooltip-ac-07e2ab-supabase.vercel.app/pricing) using a Screenreader. 2. Tab through the comparison table. Each info tooltip announces its own feature, for example "About Database size". 3. Tab to a plan-specific tooltip. It announces the feature and the plan, for example "About Automatic backups on the pro plan". 4. Confirm the icons render unchanged and the tooltips still open on hover and on focus. 5. Run axe on the page. `button-name` reports zero elements. 6. Open the [design system InfoTooltip page](https://design-system-git-ui-patterns-infotooltip-acces-66ec02-supabase.vercel.app/design-system/docs/fragments/info-tooltip) and confirm the demo still renders. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Accessibility Improvements** * Added descriptive labels to pricing information tooltips. * Improved screen reader context for compute estimates, features, and plan-specific pricing. * Added a default “More information” label for unlabeled tooltips. <!-- end of auto-generated comment: release notes by coderabbit.ai --> Co-authored-by: Claude Opus 5 <noreply@anthropic.com> |
||
|
Esteban SuárezandAli Waseem
|
adffb26613 |
docs: add fx as a supported MCP client (#49446)
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? Docs update: adds [fx](https://fx.sh) to the MCP client list, following the same pattern as the recently added Warp (#48838), GitHub Copilot CLI (#46150) and OpenCode (#41825) clients. fx is a native coding agent and an MCP client. It supports Streamable HTTP and the full OAuth flow (metadata discovery, PKCE, Dynamic Client Registration fallback, refresh), so it connects to the hosted Supabase MCP server without a proxy. ## What is the current behavior? fx is not in the client list, so users have to hand-write the config. fx keys servers under `mcp` rather than `mcpServers` and names the transport `http`, which is easy to get wrong by adapting another client's snippet. ## What is the new behavior? fx appears in the **AI Agent CLI** group, in both the docs page and the dashboard's Connect panel. It renders as: > **fx** > > Add this configuration to `~/.fx/mcp.json`: > > ```json > { > "mcp": { > "supabase": { > "type": "http", > "url": "https://mcp.supabase.com/mcp" > } > } > } > ``` > > fx reads MCP servers only from this profile, so a file inside a repository cannot add one. If a session is already open, apply the change with `/mcp reload`. > > Then authenticate from the fx shell. This opens your browser to complete the OAuth flow: > > ```bash > /mcp auth supabase --open > ``` > > Confirm the server is connected with `/mcp list`. > > For more details, see [MCP configuration](https://fx.sh/docs/capabilities/mcp) in fx. fx is configured by file only, so it gets an `alternate` instruction block and no `install` command, matching Cursor, VS Code, Warp and Antigravity. ## Additional context The config above was verified end to end against the hosted server: the OAuth flow completes and `/mcp list` reports the server connected. Two notes on the diff: - **`types.ts`** gains an `FxMcpConfig` interface, a type guard and a branch in `getMcpUrl`. fx's shape is not covered by any existing interface (`OpenCodeMcpConfig` is the other `mcp`-rooted one, but carries `$schema` and `type: 'remote'`). Since `getMcpUrl` throws on an unrecognized shape and runs for every client with instructions, the guard is required rather than cosmetic. Antigravity (#43597) and OpenCode (#41825) added their shapes the same way. - **Tests.** `utils/getMcpIconSrc.test.ts` gains a case for the new dark icon variant, alongside the existing cursor and perplexity cases. `types.test.ts` is new and checks that every client's `transformConfig` output round-trips back through `getMcpUrl`, which is what guards the throw above. Happy to drop either if you'd rather keep the diff to the usual shape for a client addition. Prettier passes with the repo config, `tsc --noEmit` is clean, and both test files pass. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added fx as a supported MCP client in the MCP URL builder. * Added profile-based setup guidance, OAuth authentication instructions, connection verification, and documentation links. * Added light and dark fx icons for improved visual support. * **Bug Fixes** * Improved MCP URL detection for fx configurations. * **Tests** * Added coverage for MCP URL extraction and dark-mode icon selection. <!-- end of auto-generated comment: release notes by coderabbit.ai --> Co-authored-by: Ali Waseem <waseema393@gmail.com> |
||
|
Gildas Garcia
|
c7e8373bce |
Scoped PAT: Fix projects handling when user has more than 100 projects (#49393)
## Problem Some users have more than 100 projects and our current UI has the following issues: 1. The project selector only loads the first 100 making it impossible to see more 2. The review step and the token permissions view only loads the first 100 so we may display invalid warnings about missing projects However, we currently don't have an API route to fetch many projects by their refs in a single call. ## Solution 1. Make sure we load more projects when scrolling down in the project selector 2. When below 100 project, show the admonition for missing resources. Anyone above for the time being won't see these message and we display the project refs instead of their names <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Improved scoped access-token setup with paginated project loading and an easier scrolling project selector. - Organization and project access are now displayed as separate, clearer access indicators. - Access details show project information when available, with a fallback reference when details cannot be loaded. - **Bug Fixes** - Updated resource warnings to better reflect deleted resources and large project lists. - Improved multi-select list handling for more reliable interactions. - Preserved the name of inaccessible organizations when displaying lost access. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |