mirror of
https://github.com/supabase/supabase.git
synced 2026-09-22 13:37:53 +08:00
docs/cli-deploy-next-step
574 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
 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 --> |
||
|
kemal.earth
|
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 Fletcher
|
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 Garcia
|
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> |
||
|
Alaister Young
|
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 --> |
||
|
Pedro Rodrigues
|
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 --> |
||
|
Danny White
|
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 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 Fletcher
|
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 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 --> |
||
|
Saxon Fletcher
|
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 Limonczenko
|
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árez
|
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 --> |
||
|
Charis
|
4343e21da0 |
feat(studio): tighten the notebook diff preview (#49218)
## 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 refactor of the notebook create/update preview in the AI Assistant panel, plus a small additive prop on the shared `CodeBlock`. ## What is the current behavior? The assistant's notebook diff renders each cell as its own bordered box with a gap between them, under a `6 cells` line that is easy to miss. Cells can't be collapsed, each one carries a repeated `ADDED` badge and a nested "Show more" toggle, and long markdown scrolls sideways instead of wrapping. ## What is the new behavior? <img width="796" height="1076" alt="CleanShot 2026-08-18 at 14 41 30@2x" src="https://github.com/user-attachments/assets/45e58c6c-48f2-404b-8699-757ee96a4a8d" /> - The whole diff is one card: a distinct header row (notebook name, summary, expand/collapse all) over cells glued together by dividers. - Every cell is a `Collapsible`. Added and replaced cells open by default; unchanged, moved, and removed cells stay as single rows but are now inspectable instead of being content-free. - The per-row badge is replaced by a colored gutter glyph (`+` `−` `~` `↕`) with a tooltip naming the change type. The change type reaches the accessible name via `aria-label` on the row. - The nested "Show more" toggle inside each cell is gone — the row itself is the only control. - `CodeBlock` gains a `wrapLongLines` prop (default `false`, no change for existing callers), used here so markdown and SQL soft-wrap. The highlighter sets `white-space` inline on the `<code>` element, so a class on the `<pre>` can't do this. ## Additional context Towards FE-4143 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Notebook previews now display titles, notebook icons, and clearer bordered layouts. * Added per-cell expand/collapse controls, including “Expand all” and “Collapse all.” * Long code lines can now wrap for improved readability. * **Improvements** * Added mode-based fallback labels when notebook titles are unavailable. * Newly added and replaced cells expand by default, while unchanged cells remain collapsed. * Improved change markers, tooltips, removed-cell styling, and notebook proposal preview spacing. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Miranda Limonczenko
|
bb094f96c8 |
docs(mcp): revise authentication note to match style guide (#49219)
<img width="769" height="212" alt="Screenshot 2026-08-18 at 12 17 18 PM" src="https://github.com/user-attachments/assets/38ce6606-84ae-4833-a7d9-7a1931fdd773" /> ## 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. Copy and dedupe. ## What is the current behavior? Gave this a style edit. Basically, saw this note breaking a lot of style rules at once (`login` instead of `log in`, future tense, and also breaking timelessness) and couldn't help myself for submitting a revision. 😅 ## What is the new behavior? Preview: https://docs-git-cursor-revise-mcp-auth-note-bbe8-supabase.vercel.app/docs/guides/ai-tools/mcp --------- Co-authored-by: Cursor Agent <cursoragent@cursor.com> Co-authored-by: Miranda Limonczenko <czenko@users.noreply.github.com> |
||
|
Pedro Rodrigues
|
d3146a1755 |
docs: add Grok plugin and MCP install instructions (#49212)
## What this does Adds **Grok** (Grok Build) across the Supabase AI-tools docs, and fixes two logo gaps. - **Plugin docs** (`AgentPluginsPanel`) — Grok client + `grok plugin install …` / in-session `/plugins` steps. - **MCP docs** (`McpUrlBuilder`) — Grok under "AI Agent CLI": `~/.grok/config.toml` (`[mcp_servers.supabase]`), `grok mcp add … --transport http`, OAuth steps. - **"Pick your agent" grid** — add the Grok logo, and fix **Warp**'s pre-existing missing logo (both were absent from the grid's `ICON_ASSETS` map). - **Fix**: the plugins-page Cursor entry was missing `hasDistinctDarkIcon`, so its dark-mode logo fell back to the light mark — aligned with the MCP list. - Adds Grok + Warp agent logos (light + dark). ## Testing Verified against grok `1.0.5`: `grok plugin install …` works; the generated `config.toml` and `grok mcp add` command are both parsed by `grok mcp list`. Pairs with supabase-community/supabase-plugin#45 (the `.grok-plugin` surface); merge after that lands. ## Preview [Agent Plugin page](https://docs-git-pedrorodrigues-ai-932-add-grok-agent-p-12402b-supabase.vercel.app/docs/guides/ai-tools/plugins#manual-installation) <img width="877" height="378" alt="image" src="https://github.com/user-attachments/assets/8fd9e112-5c11-412b-bd8c-611912043e6d" /> [MCP page](https://docs-git-pedrorodrigues-ai-932-add-grok-agent-p-12402b-supabase.vercel.app/docs/guides/ai-tools/mcp#remote-mcp-installation) <img width="877" height="513" alt="image" src="https://github.com/user-attachments/assets/459de070-5049-433a-929f-9902222e157d" /> [AI Tools main page](https://docs-git-pedrorodrigues-ai-932-add-grok-agent-p-12402b-supabase.vercel.app/docs/guides/ai-tools#pick-your-agent) <img width="877" height="642" alt="image" src="https://github.com/user-attachments/assets/e6ca40d2-e9c9-466c-a837-dbda4bdc09f7" /> Closes AI-932, AI-974 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## New Features - Added Grok as a supported AI tool and MCP client. - Added Grok installation instructions, CLI setup, authentication, and connection verification guidance. - Added Grok icons for light and dark themes. - Added support for custom documentation link text in plugin panels. - Added Warp to the available icon assets. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com> |
||
|
Joshen Lim
|
6fd48944a8 |
Support multi series bar charts in explorer and chart-bar (#49241)
## Context - Updates the BarChart in our design system to support multi series in a similar fashion to how the LineChart already supports multi series - Update chart renderer in explorer notebooks to support multiple Y axes using the `MultiSelector` component - Up to 3 y columns can be selected for now (Arbitrary limit from a color's selection POV but also just felt like anything more and the chart doesn't feel useful) - Only linear scale will be supported if multiple y columns are selected (Will switch back to linear if originally on log scale) <img width="943" height="493" alt="image" src="https://github.com/user-attachments/assets/2eba46f0-7e41-4544-a3ff-2bf08773d11b" /> <img width="946" height="497" alt="image" src="https://github.com/user-attachments/assets/4ffe7a73-6f97-4f0d-a33a-31e4035800ab" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Charts now support selecting and displaying up to three Y-axis data series. * Bar and line charts render multiple series with distinct colors. * Cumulative calculations work independently across multiple selected series. * Chart controls provide clearer responsive layouts and limit selections appropriately. * **Bug Fixes** * Logarithmic scaling automatically switches to linear when multiple series or unsupported values are selected. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Charis
|
071a07118a |
feat(studio): add NotebookPreview diff component (#49112)
## Summary Stacked on #49109 (PR 1 — `deriveNotebookDiff`). This is PR 3 of the notebook approval-preview stack: a pure presentational component that renders the cell-level diff for a proposed notebook create/update, for use in the assistant approval UI (wired in a later PR). - `NotebookPreview` — header summary (`"6 cells"` for create, `"+2 −1 ~1 ↕1"` for update) + entry list + "Show N more cells" for long notebooks. - `NotebookPreviewCell` — dispatches per entry tag: `unchanged`/`removed`/`moved` collapse to a muted badge row; `added` renders source via `CodeBlock` (with a max-height/expand toggle); `replaced` renders a `DiffEditor` diff, plus a before → after metadata line when only `database_identifier`/`time_range` changed (SQL/text identical). - `NotebookPreview.utils` — pure helpers (labels, source/metadata extraction, language mapping, summary formatting), unit tested. - **Safety property**: cell content only ever renders through `CodeBlock`/`DiffEditor` (literal source), never through a markdown renderer — agent-authored text can't trigger image loads or link navigation before the user approves. Covered by an adversarial test (``, `[y](evil)`, `<img onerror>` → zero `img`/`[href]`/`[src]` DOM nodes). - Adds `'markdown'` as a supported `CodeBlock` language (small, additive change to `packages/ui-patterns`). Towards FE-4143 ## Test plan - [x] `pnpm --filter studio test` — NotebookPreview suite (21 tests) passes - [x] `pnpm --filter studio exec eslint components/interfaces/Explorer/NotebookPreview` — clean - [x] `pnpm --filter studio exec tsc --noEmit` — no new errors - [x] `pnpm exec prettier --check` — clean <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added notebook previews showing create and update summaries. * Displayed added, removed, moved, unchanged, and replaced cells with metadata and source diffs. * Added expandable previews with truncation and a “Show more cells” option. * Added Markdown syntax highlighting to code blocks. * **Bug Fixes** * Safely render adversarial agent-authored Markdown as literal content. * **Tests** * Added comprehensive coverage for notebook previews, summaries, metadata, formatting, and truncation. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Danny White
|
5f9ce727c0 |
fix(ui): systematise control surface fills and hover borders (#48887)
## What kind of change does this PR introduce? Bug fix / design-system token hygiene for form and selector chrome. ## What is the current behavior? After opaque default-button fills, text fields, selects, and selector tiles drifted apart: inputs and selects mixed ad-hoc washes, hover borders bounced between `border-stronger` / `border-foreground-muted`, invalid fields had no hover step, and composites like InputGroup leaked inner hover borders. Follow-up to #48837 (opaque button fills) where Select rest still felt darker than Input on forms such as scoped access tokens. ## What is the new behavior? Named control roles and one interactive border: | Role | Fill | Rest border | Hover / focus / open | | --- | --- | --- | --- | | Field (sunk) | `bg-field` | `border-control` | `border-control-hover` | | Raised control | `bg-control-raised` | `border-strong` | `border-control-hover` | | Overlaying action | card → popover | `border-strong` | `border-control-hover` | | Invalid field | `bg-destructive-200` | `border-destructive-400` | `border-destructive` | - `--field` / `--control-raised` / `--border-control-hover` live in `semantic.css` (source of truth for roles; README points there) - Input / Textarea / InputGroup / legacy TextArea use the field ladder (incl. invalid hover) - Select and empty MultiSelect use raised; filled MultiSelect sinks to field - Default + dashed Button, CommandMenu trigger, and radio card/stacked/large use `border-control-hover` - Studio selector tiles aligned: Connect mode, role impersonation, DuckLake modes, compute “Contact us” | Before and After | | --- | | <img width="1576" height="759" alt="Access Tokens Account Supabase" src="https://github.com/user-attachments/assets/4bbe8b2b-a31a-4d63-80ba-04a1a8a5609d" /> | | <img width="1576" height="759" alt="Access Tokens Account Supabase" src="https://github.com/user-attachments/assets/92271223-4103-4cc6-a7c0-9e4ff71cce30" /> | ## Additional context `--control-raised` aliases `--card` today (role name so fill can diverge later). Rest `border-control` / `border-strong` both still map to `--input` via compat; the shared interactive step is `--border-control-hover`. ## To test 1. **[Account → Access Tokens](https://studio-staging-git-dnywh-fixcontrol-surface-tokens-supabase.vercel.app/dashboard/account/tokens)** Open Generate / New scoped token. Side-by-side Input, Select, RadioGroupStacked, MultiSelect. Confirm sunk vs raised fills, shared hover border, MultiSelect flips to sunk once a value is selected. Leave a required field empty to check invalid rest → hover → focus. 2. **[Org → Projects](https://studio-staging-git-dnywh-fixcontrol-surface-tokens-supabase.vercel.app/dashboard/org/_)** Hover the dashed Status filter. Hover default / filled filter buttons when active. Confirm hover/open borders match. 3. **[Project → Connect](https://studio-staging-git-dnywh-fixcontrol-surface-tokens-supabase.vercel.app/dashboard/project/_)** Open Connect from the header. Mode grid tiles: hover + selected borders match radio cards (no old muted-foreground ring). 4. **[Project → Compute](https://studio-staging-git-dnywh-fixcontrol-surface-tokens-supabase.vercel.app/dashboard/project/_/settings/infrastructure)** (optional) Compute size radios + “Contact us” tile hover. |
||
|
Danny White
|
14fe0c0cc8 |
fix(studio): slightly round split-button corners on focus (#49129)
## What kind of change does this PR introduce? UI polish for split buttons (primary action + dropdown chevron). Follow-up to #49055. ## What is the current behavior? The focus ring sits above the neighbouring half, but the inner edge stays square, so the ring has two sharp corners at the join. ## What is the new behavior? On keyboard focus, the squared-off edge uses a slight radius so the ring matches the outer corners more closely. Resting state is unchanged. Split-button callsites now share the same join classes as the design-system example. | Before | After | | --- | --- | | <img width="1030" height="296" alt="43471" src="https://github.com/user-attachments/assets/9df3bd72-c7ac-4419-ae18-a7e649dc2d66" /> | <img width="1056" height="276" alt="CleanShot 2026-08-17 at 10 45 09@2x" src="https://github.com/user-attachments/assets/52e8a4dc-9c52-45ce-b4d0-f0e7b1b75935" /> | ## To test Tab to each half (labelled button, then chevron). Inner corners of the focus ring should be slightly rounded, not square. 1. [Split with dropdown](https://design-system-git-fix-split-button-focus-radius-supabase.vercel.app/design-system/docs/components/button#split-with-dropdown) (no login) 2. [Access Tokens](https://studio-staging-git-fix-split-button-focus-radius-supabase.vercel.app/dashboard/account/tokens) → Generate new token 3. Any project on [studio staging](https://studio-staging-git-fix-split-button-focus-radius-supabase.vercel.app/dashboard/_/settings/general) → Settings → General → Restart project <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Accessibility** - Added accessible labels to dropdown and export controls. - Improved keyboard-focus visibility, layering, and rounded edge treatment across joined buttons and menus. - Removed misleading or redundant screen-reader text and titles. - **Bug Fixes** - Prevented split-button controls from shrinking or displaying awkward borders and corners. - Refined hover and focus behavior for action buttons throughout settings, database, storage, account, and documentation interfaces. - **Documentation** - Clarified guidance for using overflow menus and responsive split-button actions. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Danny White
|
c15a8b6739 |
chore(studio): lighten FormLayout descriptions and tighten GitHub copy (#49091)
## What kind of change does this PR introduce? UI nits ## What is the current behavior? `FormLayout` descriptions that are not in a react-hook-form field use `text-foreground-light`, which fights the component’s `text-foreground-lighter` variant. New-project GitHub helper copy is one long colon sentence. ## What is the new behavior? Those `FormLayout` descriptions use the shared description variant (`foreground-lighter`). New-project GitHub copy is two short sentences. | Figure | | --- | | <img width="820" height="798" alt="CleanShot 2026-08-14 at 14 33 32@2x" src="https://github.com/user-attachments/assets/7703a01d-efcb-41c2-8f6a-e96fc8a7187d" /> | | _Example call site of **before** the `FormLayout` fix._ | | <img width="1384" height="582" alt="CleanShot 2026-08-14 at 14 53 39@2x" src="https://github.com/user-attachments/assets/1bce1ee7-befd-4f53-881c-bbc7a87dd467" /> | | _**After** New-project copy shortening._ | ## To test - **Organization → New project.** GitHub (optional): “Ideal for agent-first workflows. Update your schema in code and push it to GitHub. Supabase deploys the changes.” - **Project Settings → Database → SSL configuration.** “Reject non-SSL connections to your database” should look more muted (`foreground-lighter`), not the brighter `foreground-light`. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Documentation** * Simplified the GitHub repository field description while preserving deployment guidance and the “Learn more” link. * **Style** * Lightened the color of descriptive text in form layouts for improved visual hierarchy. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Tyler
|
ececf6c003 |
docs: Update Devin Desktop Supabase plugin guides (#49048)
## 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? - Windsurf has been renamed to Devin Desktop. This PR updates public-facing mentions of Windsurf to Devin Desktop - Update MCP installation instruction to match the current behavior. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Documentation** * Updated supported environment guidance to reference Devin Desktop instead of Windsurf. * Updated the MCP configuration path for Devin Desktop. * Removed outdated Windsurf-specific setup instructions and transport limitations. * Refreshed related MCP client labeling and setup guidance for clarity and consistency across the documentation and configuration experience. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com> |
||
|
Joshen Lim
|
09894096e2 |
Add log scale support to query result chart (#49049)
## Context Related to Explorer/Notebooks - Adds support for log scale in the charts <img width="980" height="477" alt="image" src="https://github.com/user-attachments/assets/b3764023-bd9a-4edd-92d4-1b61df93b97e" /> Prevents setting to log scale if y axis has yet to be selected, or if the data set contains non positive values <img width="393" height="188" alt="image" src="https://github.com/user-attachments/assets/57695d9e-9724-47ed-aa2a-c104c16837b2" /> <img width="408" height="159" alt="image" src="https://github.com/user-attachments/assets/2290bb69-0ddb-4449-afad-aabae6ace669" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added logarithmic Y-axis scaling for line and bar charts. - Added logarithmic tick formatting and appropriate chart bounds. - Added contextual guidance when logarithmic scaling is unavailable. - **Bug Fixes** - Automatically switches charts back to linear scaling when data contains values that cannot support logarithmic scaling. - Prevented unnecessary stacking for single-series area charts. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|
Joshen Lim
|
d434c63bad |
joshen/fe 4150 explorer query cells result display settings (#49003)
## Context Related to Explorer / Notebooks - this adds chart functionality for the Query cells <img width="250" alt="image" src="https://github.com/user-attachments/assets/4ea37c14-87dc-4c43-ba7f-cb9436085c81" /> Query results can be rendered as either bar or line chart - using the chart packages from `ui-patterns` [NOTE]: For design team reviewers - am patching the chart packages to be agnostic to the `timestamp` property within the provided data set. Would love to use this component from a consistency POV instead of the old `BarChart` component we have. Have intentionally omitted log scale functionality from this PR - will have that separately 🙏 <img width="999" height="483" alt="image" src="https://github.com/user-attachments/assets/14356ee4-c658-4fd1-90e0-17c38dac4822" /> <img width="988" height="478" alt="image" src="https://github.com/user-attachments/assets/cd0ca088-9a03-4aa3-9884-17bc36d3cabf" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added chart views for notebook query results, including bar and line charts. - Added display settings for selecting X/Y columns, chart type, scale, cumulative values, and label visibility. - Added configurable X-axis support for charts. - Display preferences are saved with each notebook cell. - **Improvements** - New database cells default to table view. - Chart results better handle varied data types. - Empty results and incomplete chart settings now display clear placeholders. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |