dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-05 17:35:10 +03:00
Code Issues Packages Projects Releases Wiki Activity
38,394 Commits 1,792 Branches 62 Tags
c33d255eba8ba9ff7c7a2a01a93dce80cb685708
Commit Graph
561 Commits
Author SHA1 Message Date
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 -->
 2026-09-10 11:23:17 +10:00
Pedro RodriguesCursorNik Richers
 		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>
 2026-09-09 14:16:39 +01:00
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 -->
 2026-09-09 04:14:46 +00:00
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.
 2026-09-09 13:44:11 +10:00
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 -->
 2026-09-08 14:31:30 +03:00
Danny WhiteClaude Opus 5Joshen Lim
 		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>
 2026-09-08 19:21:19 +08:00
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
 2026-09-08 09:47:32 +02:00
Alaister YoungandAlaister Young ec1029dff0 chore: migrate from clsx + tailwind-merge to shadcn-ui/cn (#49938) 
Migrates the repo off `clsx` + `tailwind-merge` to
[shadcn-ui/cn](https://github.com/shadcn-ui/cn). Every app and package
already gets `cn` from `packages/ui`, so the swap happens in that one
helper and flows through to Studio, docs, www, and the rest.

**Changed:**
- `packages/ui` `cn` helper now uses `createCn` from `cn/config`,
keeping the custom `card`/`content` spacing scale so `p-card` still
overrides `p-4`. It has an explicit signature and re-exports
`ClassValue`.
- The four www Launch Week files that imported the `ClassValue` type
from `clsx` now import it from `ui`.
- `blocks/vue` local `lib/utils.ts` re-exports `cn` from the package.
- Comments/README that referenced tailwind-merge.

**Removed:**
- Direct `clsx` and `tailwind-merge` deps from `ui`, `ui-patterns`,
`www`, and `blocks/vue`. `ui-patterns` and `www` declared them without
importing.

**Added:**
- `packages/ui/src/lib/utils/cn.test.ts` covering clsx-style joining,
conflict resolution, the custom spacing scale, and variant handling.

Not migrated: the standalone apps under `examples/`. They're outside the
workspace and mostly on Tailwind v3, which `cn` doesn't support.

Lockfile note: after merging master, the lockfile diff is only the
intended swap (`clsx` and `tailwind-merge` out, `cn@0.2.5` in).
`tailwind-merge` stays in the lockfile as a transitive dep of a
third-party package.

Release-age note: this sat in draft with a temporary
`minimumReleaseAgeExclude` entry for `cn` while `cn` was inside the
workspace's 3-day `minimumReleaseAge` window. That window has closed, so
the exclusion is gone and nothing bypasses the release-age gate.

## To test

- `pnpm install --frozen-lockfile` succeeds with no
`minimumReleaseAgeExclude` entry for `cn`.
- `pnpm --filter ui test` – new `cn.test.ts` passes, including
`cn('p-4', 'p-card')` → `p-card`.
- Typecheck passes for studio, ui, ui-patterns, vue-blocks. www
typecheck panics under tsgo on master already (pre-existing, unrelated);
it passes with the JS `tsc` binary.
- Spot-check Studio locally: class overrides still win in the usual
places (e.g. `CodeEditor` height, `Button` variants with a custom
`className`).

https://claude.ai/code/session_01MkAt16tsPRDTm9oB5Jr8Ub


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Improvements**
* Standardized Tailwind class merging across shared UI utilities while
preserving conditional classes, custom spacing classes, and variant
behavior.
* Updated related components and examples to use the standardized
class-merging utility.

* **Tests**
* Added coverage for conditional class handling, conflicting utility
resolution, custom spacing classes, and variant separation.

* **Documentation**
* Updated usage guidance to reflect the standardized Tailwind
class-merging approach.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
 2026-09-07 21:35:06 +08:00
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 -->
 2026-09-07 11:43:00 +01:00
Saxon FletcherandCursor 04747937a2 fix(ui-patterns): align badges and input in the tiny multi-select trigger (#49986) 
## What's changed

**Before**
<img width="467" height="353" alt="image"
src="https://github.com/user-attachments/assets/4587d51a-8bbe-4da4-a3dd-dcaac6b17993"
/>

**After**
<img width="541" height="360" alt="image"
src="https://github.com/user-attachments/assets/de66b229-54b0-4443-9c49-6f2ff0dd93aa"
/>

Independent of the Explorer/assistant stack.

`MultiSelectorTrigger` with `size="tiny"` had badges and the inline
input overflowing the 26px control. The trigger now stretches its
children (`items-stretch`), badges are `h-full py-0 leading-none` with a
tighter `gap-0.5`, the input/label drop their extra padding and
line-height, and the chevron self-centers. Other sizes are unchanged
(`isTiny` guards every new class). Also drops a redundant `text-sm` from
`MultiSelectorInput`, which `MultiSelectorInputVariants` already sets
per size.

## How to test

1. Design system (`pnpm dev:design-system`) or anywhere Studio uses
`<MultiSelector size="tiny">` (e.g. Logs filters): with 1–3 values
selected the badges sit inside the 26px control with no clipping; the
placeholder and chevron are vertically centered.
2. `size="small"` / default still look the same as on `master`.
3. `pnpm --filter ui-patterns exec vitest --run src/multi-select`
passes.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **Style**
- Improved the compact multi-select control layout, including spacing,
alignment, selected-value badges, input sizing, and dropdown indicator
positioning.
- Adjusted placeholder spacing when the tiny control has no selected
values.

- **Tests**
- Updated coverage to verify compact spacing and sizing when the tiny
multi-select control displays a selected value.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-09-07 09:48:01 +10:00
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 -->
 2026-09-03 16:29:36 +10:00
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 -->
 2026-09-03 09:44:45 +10:00
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.
 2026-09-02 14:25:03 +10:00
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 -->
 2026-09-01 13:13:30 +02:00
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 -->
 2026-08-31 10:32:45 +02:00
Alaister YoungandAlaister Young 29493e02d0 [FE-4010] feat(studio): add read-only replica connection option for HA projects (#49485) 
For Multigres (HA) projects you can't connect to read replicas directly
— reads go through a read-only load balancer on the primary's host at
port 5433. Since #44695 stripped the pooler UI, HA projects showed no
source option at all in the Connect dialog and still prompted for the
IPv4 add-on. This surfaces it as a first-class, clearly-labeled
read-only source. In the UI it's labeled `Replica (read-only)` rather
than "load balancer" — the primary goes through the same gateway, so
"load balancer" would be confusing from a product perspective
(internally the `load-balancer` source identifier and
`HIGH_AVAILABILITY_LOAD_BALANCER_PORT` constant keep their names).

<img width="883" height="342" alt="Screenshot 2026-08-24 at 11 32 26 PM"
src="https://github.com/user-attachments/assets/3716f6dd-0325-4b9d-adbc-9ece9244de62"
/>

**Added:**
- Source select for HA projects in the Direct tab: `Primary database` +
`Replica (read-only)` (individual replica rows are filtered out —
they're only reachable via the load balancer)
- Replica (load balancer) connection strings on all 9 connection types:
primary host, port `5433`, with the Multigres-required
`sslmode=require&sslnegotiation=direct` params (JDBC gets the
`sslNegotiation` spelling, .NET gets `SSL Negotiation=Direct`)
- `Read-only` badge on the connection code block + note pointing writes
at the primary
- Programmatic labels for the ConnectSheet select/switch/multi-select
fields (the Source combobox previously had no accessible name)

**Changed:**
- The generated-file step (Node.js/Golang/.NET/Python/SQLAlchemy) is now
source-aware — it previously ignored the Source selection entirely (also
affected read replicas on normal projects) and silently rendered the
primary's connection info
- .NET template now emits `Port=` (Npgsql defaults to 5432 when omitted)
and the install step actually installs Npgsql (pinned 9.0.5 — `SSL
Negotiation` requires 9+)
- SQLAlchemy `DATABASE_URL` merges `sslmode=require` into the string's
existing query params instead of a hardcoded suffix that could drop TLS
- Source option labels normalized to sentence case (`Primary database`,
`Read replica (…)`)
- `MultipleCodeBlock` (ui-patterns) accepts an optional `className`
- HA coercion in `useConnectState` extended: a stale replica
`connectionSource` restored from URL/localStorage falls back to the
primary

**Removed:**
- IPv4 add-on admonition for HA projects (the forced-direct method was
tripping it; the add-on doesn't apply to Multigres)

Out of scope (needs platform work): SQL editor / Data API / other
`DatabaseSelector` surfaces — executing against the load balancer
requires a platform-issued connection string, and the load-balancers API
only returns a REST endpoint today. The `5433` port is a client-side
constant (`HIGH_AVAILABILITY_LOAD_BALANCER_PORT`) until the API exposes
it.

## To test

On an HA (Multigres) project:
- Open Connect → Direct: Source shows exactly `Primary database` and
`Replica (read-only)`; selecting the replica shows
`…@<primary-host>:5433/postgres?sslmode=require&sslnegotiation=direct`,
a `Read-only` badge, and the read-only note
- Cycle all 9 connection types with the replica selected — every snippet
carries port 5433 (`.NET` includes `Port=5433;…;SSL
Negotiation=Direct`), badge/note persist
- No "Enable IPv4 add-on" admonition anywhere in the Direct tab
- Switch tabs / hard-reload: source resets to primary with no stale
badge/string combos

On a normal project:
- Direct tab unchanged: no `Replica (read-only)` option, pooler badges
and IPv4 admonitions behave as before, `.NET` now shows `Port=5432` and
no `SSL Negotiation`

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Added read-only load-balancer connection options for high-availability
projects.
- Added .NET and SQLAlchemy connection examples with required SSL
settings.
- Added clear read-only labels and notices explaining write
restrictions.
- **Bug Fixes**
  - Suppressed IPv4 add-on notices for high-availability connections.
  - Improved connection-source selection and restored-setting handling.
  - Improved connection form identification and accessibility.
- **Style**
  - Added customizable styling support for multi-code-block displays.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
 2026-08-28 10:43:55 +01:00
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 -->
 2026-08-27 09:34:10 +01:00
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
 2026-08-27 09:00:11 +02:00
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 -->
 2026-08-26 17:12:10 +08:00
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 -->
 2026-08-26 13:28:15 +08:00
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 -->
 2026-08-25 18:07:38 +01:00
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 -->
 2026-08-25 08:59:25 -06:00
Saxon FletcherCursor AgentSaxon 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>
 2026-08-25 18:16:40 +10:00
Miranda LimonczenkoandClaude Opus 5 932180541e fix(ui-patterns): give the shared InfoTooltip trigger an accessible name (#49345) 
Closes FE-4093

## Problem

The shared `InfoTooltip` trigger's only child is an SVG and it has no
accessible name, so a screen reader announces an unnamed button and the
information the tooltip carries is unreachable. `button-name`, critical.

`/pricing` renders 34 of them.

## Solution

* Add an optional `label` prop rendered as `sr-only` text, with a
generic fallback so the 22 call sites that pass nothing still get a
name. The prop is optional because 26 files import this component across
www, Studio, design-system and ui-patterns.
* Drop the redundant `role="button"` from a native button.
* Label the four www call sites. A shared fallback alone would leave
`/pricing` announcing 34 identical names, which passes axe and stays
unusable. The labels come from the feature title and plan already in
scope, so no pricing data changes.

Docs is unaffected. It has its own `InfoTooltip` at
`apps/docs/features/ui/InfoTooltip.tsx` and never imports the shared
one.

## Manual testing

1. Open
[/pricing](https://zone-www-dot-com-git-ui-patterns-infotooltip-ac-07e2ab-supabase.vercel.app/pricing)
using a Screenreader.
2. Tab through the comparison table. Each info tooltip announces its own
feature, for example "About Database size".
3. Tab to a plan-specific tooltip. It announces the feature and the
plan, for example "About Automatic backups on the pro plan".
4. Confirm the icons render unchanged and the tooltips still open on
hover and on focus.
5. Run axe on the page. `button-name` reports zero elements.
6. Open the [design system InfoTooltip
page](https://design-system-git-ui-patterns-infotooltip-acces-66ec02-supabase.vercel.app/design-system/docs/fragments/info-tooltip)
and confirm the demo still renders.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Accessibility Improvements**
  * Added descriptive labels to pricing information tooltips.
* Improved screen reader context for compute estimates, features, and
plan-specific pricing.
  * Added a default “More information” label for unlabeled tooltips.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
 2026-08-24 09:14:12 -07:00
Esteban SuárezandAli Waseem adffb26613 docs: add fx as a supported MCP client (#49446) 
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Docs update: adds [fx](https://fx.sh) to the MCP client list, following
the same pattern as the recently added Warp (#48838), GitHub Copilot CLI
(#46150) and OpenCode (#41825) clients.

fx is a native coding agent and an MCP client. It supports Streamable
HTTP and the full OAuth flow (metadata discovery, PKCE, Dynamic Client
Registration fallback, refresh), so it connects to the hosted Supabase
MCP server without a proxy.

## What is the current behavior?

fx is not in the client list, so users have to hand-write the config. fx
keys servers under `mcp` rather than `mcpServers` and names the
transport `http`, which is easy to get wrong by adapting another
client's snippet.

## What is the new behavior?

fx appears in the **AI Agent CLI** group, in both the docs page and the
dashboard's Connect panel. It renders as:

> **fx**
>
> Add this configuration to `~/.fx/mcp.json`:
>
> ```json
> {
>   "mcp": {
>     "supabase": {
>       "type": "http",
>       "url": "https://mcp.supabase.com/mcp"
>     }
>   }
> }
> ```
>
> fx reads MCP servers only from this profile, so a file inside a
repository cannot add one. If a session is already open, apply the
change with `/mcp reload`.
>
> Then authenticate from the fx shell. This opens your browser to
complete the OAuth flow:
>
> ```bash
> /mcp auth supabase --open
> ```
>
> Confirm the server is connected with `/mcp list`.
>
> For more details, see [MCP
configuration](https://fx.sh/docs/capabilities/mcp) in fx.

fx is configured by file only, so it gets an `alternate` instruction
block and no `install` command, matching Cursor, VS Code, Warp and
Antigravity.

## Additional context

The config above was verified end to end against the hosted server: the
OAuth flow completes and `/mcp list` reports the server connected.

Two notes on the diff:

- **`types.ts`** gains an `FxMcpConfig` interface, a type guard and a
branch in `getMcpUrl`. fx's shape is not covered by any existing
interface (`OpenCodeMcpConfig` is the other `mcp`-rooted one, but
carries `$schema` and `type: 'remote'`). Since `getMcpUrl` throws on an
unrecognized shape and runs for every client with instructions, the
guard is required rather than cosmetic. Antigravity (#43597) and
OpenCode (#41825) added their shapes the same way.
- **Tests.** `utils/getMcpIconSrc.test.ts` gains a case for the new dark
icon variant, alongside the existing cursor and perplexity cases.
`types.test.ts` is new and checks that every client's `transformConfig`
output round-trips back through `getMcpUrl`, which is what guards the
throw above. Happy to drop either if you'd rather keep the diff to the
usual shape for a client addition.

Prettier passes with the repo config, `tsc --noEmit` is clean, and both
test files pass.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **New Features**
  * Added fx as a supported MCP client in the MCP URL builder.
* Added profile-based setup guidance, OAuth authentication instructions,
connection verification, and documentation links.
  * Added light and dark fx icons for improved visual support.
* **Bug Fixes**
  * Improved MCP URL detection for fx configurations.
* **Tests**
  * Added coverage for MCP URL extraction and dark-mode icon selection.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Co-authored-by: Ali Waseem <waseema393@gmail.com>
 2026-08-24 08:22:12 -06:00
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 -->
 2026-08-21 18:01:28 +02:00
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 -->
 2026-08-19 12:11:10 -04:00
Miranda LimonczenkoCursor AgentMiranda 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>
 2026-08-19 08:56:09 -07:00
Pedro RodriguesandClaude Opus 4.8 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>
 2026-08-19 15:18:45 +01:00
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 -->
 2026-08-19 16:58:35 +08:00
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
(`![x](evil)`, `[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 -->
 2026-08-18 11:44:23 -04:00
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.
 2026-08-18 16:54:25 +10:00
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 -->
 2026-08-17 17:28:22 +10:00
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 -->
 2026-08-17 11:29:59 +10:00
TylerandDanny White 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>
 2026-08-14 03:10:19 +00:00
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 -->
 2026-08-13 16:42:28 +07:00
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 -->
 2026-08-13 10:09:54 +07:00
Pedro RodriguesandClaude Opus 4.8 6594f412f9 docs: add Warp as a supported MCP client (#48838) 
Adds [Warp](https://www.warp.dev/) as a supported client in the Supabase
MCP docs. Because [Warp speaks the native remote (Streamable HTTP)
transport](https://docs.warp.dev/agents/capabilities/mcp/), the standard
config connects to the hosted server directly, no `mcp-remote` proxy
needed:

```json
{ "mcpServers": { "supabase": { "url": "https://mcp.supabase.com/mcp" } } }
```

The MCP client list is data-driven, so this single addition surfaces in
the docs MCP panel, the generated markdown, and Studio's Connect panel.
Concretely: registers the `warp` client (config file
`~/.warp/.mcp.json`, docs link) under the IDE group, adds setup
instructions (auto-load + Settings → AI → MCP Servers, automatic OAuth),
and adds the official Warp logo in light and dark variants.

## What is Warp?

Warp is an agentic development environment built from the terminal: a
Rust-based, GPU-accelerated app that runs coding agents (Claude Code,
Codex, Gemini) directly in the terminal. It has first-class MCP support
with native remote (Streamable HTTP / SSE) transport and automatic OAuth
(no PAT required).

## Why add support for the Supabase MCP server?

Warp is a mainstream, widely-adopted client
([warpdotdev/warp](https://github.com/warpdotdev/warp) has 64k+ ⭐ on
GitHub) that natively supports MCP. Documenting it lets Warp users
connect the hosted Supabase MCP server with a copy-paste config,
matching the coverage we already provide for Cursor, VS Code, Windsurf,
and others.

## How to test

1. Run the docs app (`pnpm dev:docs`) and open the MCP guide
(`apps/docs/content/guides/ai-tools/mcp.mdx`). Warp appears under
**IDE** with its logo (verify both light and dark themes) and the config
snippet.
2. In Warp, add the shown config to `~/.warp/.mcp.json` (or **Settings →
Agents → MCP Servers → + Add**). Warp auto-spawns the `supabase` server.
4. Click **Start** on the `supabase` server → complete the Supabase
OAuth in the browser → the Supabase tools load.

<img width="859" height="606" alt="image"
src="https://github.com/user-attachments/assets/8c931ded-4ffe-4495-b4c8-183f93be812a"
/>


Verified end-to-end on Warp v0.2026.07.29 (macOS): the config auto-loads
and connects over Warp's native remote transport, and the OAuth flow
completes without a PAT.

Refs
[AI-1031](https://linear.app/supabase/issue/AI-1031/docs-add-warp-as-a-supported-mcp-client)


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
  * Added Warp as a supported MCP client.
* Added setup guidance for connecting remote MCP servers in Warp,
including OAuth authentication and secure credential storage.
  * Added light and dark Warp icons to the client selection interface.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
 2026-08-10 08:09:17 +01:00
Danny White 6c0439ace8 fix(ui): opaque default button hover fills (#48837) 
## What kind of change does this PR introduce?

Bug fix for translucent default Button (and related control) fills that
show through stacked content on hover.

Resolves
[DEPR-636](https://linear.app/supabase/issue/DEPR-636/report-snippet-cell-expand-button-becomes-transparent-on-hover).

## What is the current behavior?

Default `Button` hover uses `bg-selection`, and dark-mode rest uses
`bg-muted`. After the colour system migration those legacy aliases point
at translucent `--accent` / `--muted`, so hover punches through whatever
sits behind the button (SQL Editor / Reports cell expand, sticky
columns, skip-to-content, etc.).

| Before: Light | Before: Dark |
| --- | --- |
| <img width="491" height="75" alt="CleanShot 2026-08-03 at 09 12 26@2x"
src="https://github.com/user-attachments/assets/20e33ba9-74c5-47eb-aced-ac932a0059fa"
/> | <img width="205" height="54" alt="21257"
src="https://github.com/user-attachments/assets/a2c9f092-18a7-4a4d-a49b-6e019e50895f"
/> |

## What is the new behavior?

Default Button, Select, MultiSelect, and the CommandMenu trigger use
opaque elevation tokens (`bg-background dark:bg-card`,
`hover:bg-popover`). SkipToContent drops its opaque-plate workaround. No
global `compat.css` alias remaps.

| After: Light | After: Dark |
| --- | --- |
| <img width="466" height="110" alt="CleanShot 2026-08-07 at 16 09
59@2x"
src="https://github.com/user-attachments/assets/6410cb58-b37c-427f-a0ff-7b223a7f3f51"
/> | <img width="474" height="132" alt="CleanShot 2026-08-07 at 16 08
53@2x"
src="https://github.com/user-attachments/assets/575c56d1-8ee5-4eb5-8f08-e4b5af8520f0"
/> |

## Additional context

- Overlay tokens (`--muted` / `--accent` / `--tertiary`) stay
intentional for washes on solid surfaces. Controls that can sit over
content should use solid elevation tokens (`card` / `popover`) instead.
- Same root cause as the workarounds in #47996 and #48314.
- The “View full cell content” control lives in SQL Editor results /
Report `QueryBlock` (`ResultCell`), not Table Editor. It only renders
when the value is an object/array, contains a newline, or is longer than
60 characters, and it stays `opacity-0` until you hover the cell.

## To test

Short path in Studio (light and dark):

1. **Expand button over cell text (clearest repro)** – SQL Editor, run:
   ```sql
   select repeat('x', 80) as name;
   ```
Hover the result cell. The expand control should appear over the text;
hover the button itself and confirm the fill is solid (no `x`s showing
through). Same control is what Report snippets use.
2. **Any default Button** – Top nav **Connect** (or any bordered default
button). Hover: solid fill.
3. **Select** – Project picker or a Settings form select. Trigger hover
/ open fill stays opaque.
4. **Command menu trigger** – Hover the header search / Cmd-K control;
match default Button.
5. **Skip to content** – Tab once on Studio. Skip link hover stays solid
over the page behind it.
6. **Editor tabs regression** – SQL / Table Editor tab strip should
still look grey in light mode (not washed white).
 2026-08-07 17:26:55 +10:00
Danny White df35577adc fix titleless Admonition alignment (#48784) 
## What kind of change does this PR introduce?

UI bug fix.

## What is the current behavior?

Titleless Admonitions using the `description` prop place their compact
body text slightly too high beside the icon. Admonition bodies also
inherit a 2px bottom margin from `AlertDescription`, making the vertical
spacing subtly uneven.

## What is the new behavior?

Titleless `description` content receives a small optical offset,
centring a one-line description beside the icon. Rich MDX children
retain their natural top alignment because Docs prose uses a taller line
height.

Admonition bodies also remove the inherited 2px bottom margin, balancing
the surrounding space without changing the shared `AlertDescription`
primitive.

| Before | After |
| --- | --- |
| <img width="1856" height="856" alt="CleanShot 2026-08-05 at 17 52
34@2x"
src="https://github.com/user-attachments/assets/5f8fb726-692a-4a63-ab37-8fe87f37edd6"
/> | <img width="1676" height="850" alt="CleanShot 2026-08-06 at 12 05
18@2x"
src="https://github.com/user-attachments/assets/9d9126fe-50ef-422c-b387-7a45550e73dd"
/> |
|_Note the imbalanced space under the text_ | _Note how the text is
balanced vertically to the icon_ |

## To test

- [Design System:
Admonition](https://design-system-git-dnywh-fix-titleless-admonitio-db462e-supabase.vercel.app/design-system/docs/fragments/admonition):
the description-only reference example, at desktop and mobile widths.
- [Studio: Project Settings >
Dashboard](https://studio-staging-git-dnywh-fix-titleless-admoniti-908cb8-supabase.vercel.app/dashboard/project/_/settings/dashboard):
the Dashboard preferences notice. The dashboardPreferences feature flag
must be enabled.
- [Docs: Local Development &
CLI](https://docs-git-dnywh-fix-titleless-admonition-alignment-supabase.vercel.app/docs/guides/local-development):
the titleless container-runtime callout near the top of the page.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Bug Fixes**
  * Improved admonition spacing for descriptions and MDX content.
  * Removed unintended bottom spacing within admonition bodies.
* Adjusted vertical spacing for untitled admonitions while preserving
titled content layout.

* **Tests**
* Added coverage for paragraph spacing, wrapper structure, and
title-specific styling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-08-07 10:47:07 +10:00
Gildas GarciaAli Waseemkemal.earth
 		cddb430310 feat(studio): scoped pat root branch (#48384) 
## Description

This is the Scoped PAT stacked PRs root branch

## How to test

### With the `scopedPAT` enabled (default on staging)

Go to
https://studio-staging-git-scopedpat-merge-token-lists-supabase.vercel.app/dashboard/account/tokens.
- You shouldn't see two tabs anymore
- If you had classic tokens, they should have the _Legacy_ badge
- You can create scoped tokens
- You have a way to copy newly created tokens before closing the form
side panel

### With the `scopedPAT` disabled (use the devtool to override)
- You shouldn't see two tabs anymore
- If you had classic tokens, they should **not** have the _Legacy_ badge
- You can create classic tokens
- You have a way to copy newly created tokens above the list upon form
submission

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Show classic and scoped access tokens together in one list, with
classic tokens labeled “Legacy” when the scoped experience is enabled.
* Add scoped access token creation with a two-step configure → review →
success flow (when enabled).
* Add a dismissible migration notice about scoped tokens with a link to
API docs.
  * Show “View permissions” only for scoped tokens.
* **Bug Fixes**
* Token deletion now supports both classic and scoped tokens with the
correct confirmation and success handling.
* The scoped tokens page now redirects to the unified access tokens
page.
* **Accessibility**
* Improved accessibility by adding a label to the token “more options”
action.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Ali Waseem <waseema393@gmail.com>
Co-authored-by: kemal.earth <606977+kemaldotearth@users.noreply.github.com>
 2026-08-06 07:40:56 -06:00
Nik RichersNik RichersClaude
 		08867f94ff docs: lead self-hosting overview with what/why/CTA, restructure secondary content (#48415) 
## 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 restructure of the self-hosting overview: short fit intro, Get
started / community listings above the fold, parallel h2 sections for
how self-hosting differs (including local development),
responsibilities, and telemetry, plus a streamlined support listing with
better card content.

Closes DOCS-1251.

## What is the current behavior?

- Linear item: Explore two PR approaches for the self-hosting page
- The self-hosting overview page (`/guides/self-hosting`) is the top
search hit for "supabase self-hosting," but reads as a wall of text:
three full prose/bullet sections (differs / responsibilities /
telemetry) come before the getting-started CTA, which is buried as one
small card partway down the page.

## What is the new behavior?

- Short fit intro; `self-hosting-get-started` and
`self-hosting-community` listings sit directly under the intro.
- Top-level h2s for how self-hosting differs, responsibilities,
telemetry, and support (no "More about self-hosting" wrapper).
- Under differs: rewritten single-project + platform-gap copy, plus `###
Not the same as local development` (CLI stack is not a production
self-host; points to Docker / community options).
- Telemetry clarifies CLI local-dev telemetry vs Docker Compose (no
phone-home).
- Merged support into a single `self-hosting-support` listing;
Enterprise subsection unchanged.
- Minor a11y: `aria-hidden` on GlassPanel decorative icon background.

## Additional context

- Worktree:
`~/GitHub/supabase/supabase-worktrees/nikrichers/docs-1251-self-hosting-inform`
- Review: removed the "More about self-hosting" grouping after feedback
that it undersold differs / responsibilities.
- Companion prototype PR 48416 is closed; this branch is the direction
under review.
- Verification:

| Check | Result |
| ----------------------------------------------- |
------------------------------------------------------------------ |
| `pnpm lint:mdx content/guides/self-hosting.mdx` | Pass — no
errors/warnings on this file |
| Vercel docs preview | Pass — full-page after screenshot captured from
the preview deploy |

### Proof: intro and get-started above the fold; parallel h2s for
differs, responsibilities, and telemetry

**Verified:** `pnpm lint:mdx content/guides/self-hosting.mdx` (pass) ·
Vercel docs preview (pass)

### Before & After

| [Before (production)](https://supabase.com/docs/guides/self-hosting) |
[After (PR
preview)](https://docs-git-nikrichers-docs-1251-self-hosting-inform-supabase.vercel.app/docs/guides/self-hosting)
|
|
------------------------------------------------------------------------------------------------------------------------------------------------
|
----------------------------------------------------------------------------------------------------------------------------------------------
|
|
![Before](https://moijyfpvgnmgoxvwcikq.supabase.co/storage/v1/object/public/pr-proof/supabase/supabase/pr48415/self-hosting-before-23d8ce92.png)
|
![After](https://moijyfpvgnmgoxvwcikq.supabase.co/storage/v1/object/public/pr-proof/supabase/supabase/pr48415/self-hosting-after-96d27909.png)
|

### Test plan

- [ ] Visit the preview link and confirm the page opens with intro above
the Get started listings
- [ ] Confirm parallel h2s for differs / responsibilities / telemetry /
support (no "More about self-hosting")
- [ ] Confirm "Not the same as local development" distinguishes the CLI
stack from self-hosting
- [ ] Confirm Support and community is one card grid
- [ ] Check mobile width — layout should still be usable
- [ ] Confirm `/guides/self-hosting/docker` link still works

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **Documentation**
- Reorganized the self-hosting guide with clearer getting-started
resources and community links.
- Added dedicated guidance for local development, managed Supabase,
telemetry, and self-hosting responsibilities.
- Consolidated support resources into one section covering discussions,
issues, chat, Reddit, and sharing experiences.
- **Accessibility**
- Marked decorative icon backgrounds as hidden from assistive
technologies.
  <!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Nik Richers <nik@validmind.ai>
Co-authored-by: Claude <noreply@anthropic.com>
 2026-08-05 10:57:09 -07:00
kemal.earth 8df721e97b fix(design-system): <MultiSelect /> syling update (#48696) 
## 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 PR fixes a few known issues of our `<MultiSelect />` component,
mainly:

- Remove bright green hover state. Now matches `<Input />` and `<Select
/>`.
- Input colours in general are matched up to others.
- Dropdown colours, sizing, spacing matches that of `<Select />`.
- Minimum height of trigger dropped down to `34px` to be inline with
other input heights.
- Inner padding reduced when options are toggled on and badges appear to
keep initial `34px` height over one line.
- Fixed the stroke width of optional trigger icon to `1.5`.

This may need a second set of 👀 to make sure we haven't broken anywhere.
Haven't spotted anything egregious giving it a pass so far.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Style**
* Refined the multi-select appearance with updated borders, backgrounds,
focus, hover, and open-state styling.
* Improved readability with larger item text and lighter command-item
text.
* Adjusted spacing, rounding, icon weight, and selected-item
highlighting for a cleaner interface.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-08-05 08:46:13 +01:00
Miranda LimonczenkoandClaude Sonnet 5 e7d9c88cbc fix(docs): resolve remaining heading-order issues found in Pass 2 diagnostic (#48664) 
## Problem

After merging [#48456](https://github.com/supabase/supabase/pull/48456)
(shared components) and
[#48459](https://github.com/supabase/supabase/pull/48459) (per-page
content fixes), a follow-up diagnostic pass found 22 remaining
heading-order violations, logged as Pass 2 in the [triage
report](https://app.notion.com/p/supabase/Playwright-E2E-Triage-Reports-3ab5004b775f81e3bc60d058fa5a02c1).
None of them were caught by the earlier fixes because they came from
places that scan didn't check: shared partials, raw HTML heading tags
written directly in MDX, and a couple of shared/interactive components
rendering hardcoded heading levels.

## Solution

- `_partials/social_provider_setup.mdx`: `#### Local development` →
`###`, matching the `##` that always precedes it on all 14 social-login
pages.
- `guides/database/functions.mdx` and
`guides/integrations/vercel-marketplace.mdx`: replaced raw `<h4>`/`<h5>`
tags with correctly-nested real headings (`### Planets`/`### People`;
`#### Deploy a Next.js app...`) — no styling workarounds needed since
they nest naturally one level below their parent section.
- `auth/quickstarts/{nextjs,react-native,react,astrojs}.mdx`: these 4
pages had no heading at all before the embedded
`_partials/api_settings.mdx` partial's own `### Get API details`
heading, so added a `## Quickstart` heading above the walkthrough to
give it a valid parent.
- `packages/ui`'s `Accordion` component: Radix's
`AccordionPrimitive.Header` renders as an unconditional `<h3>`
regardless of where the accordion is used. That's shared across Studio,
www, and design-system, not just docs, and surfaced on docs'
vendor-agnostic telemetry page. Now rendered via `asChild` onto a plain
`div` instead, since a generic accordion has no way to know what heading
level (if any) is valid in a given page.
- SQL-to-REST translator tool (`/docs/guides/api/sql-to-rest`): its
`Assumptions`/`FAQs` section labels were hardcoded `<h3>` with no `h2`
anywhere on the page. Converted to styled spans rather than promoting to
a real `<h2>`, because real h1/h2/h3 tags in this codebase force a prose
font-size that utility classes can't override — promoting the tag would
have visibly changed its size.
- `RealtimeLimitsEstimator` (embedded on both `postgres-changes` and
`benchmarks`): its 3 section headings were hardcoded `<h4>`, but the two
embedding pages need different levels (h3 vs h4) for that spot to be
valid — no single correct heading level. Converted to styled spans, same
pattern used throughout this project for components embedded at varying
heading depths.

## Manual testing

1. Check out this branch and run `pnpm dev:docs`.
2. Visit `/docs/guides/auth/social-login/auth-github` (or any other
provider page) and confirm the "Local development" callout under "Find
your callback URL" still looks and reads the same.
3. Visit `/docs/guides/database/functions` → "Returning data sets" tab
and confirm the "Planets" / "People" table captions still look the same.
4. Visit `/docs/guides/integrations/vercel-marketplace` → "Quickstart" →
"Via template" and confirm the CTA card title still looks the same.
5. Visit `/docs/guides/auth/quickstarts/nextjs` (or
react-native/react/astrojs) and confirm a "Quickstart" heading now
appears above the walkthrough, and "Get API details" still renders
correctly further down.
6. Run `pnpm dev:design-system` and open
`/design-system/docs/components/accordion` — expand/collapse an item and
confirm it still animates and looks identical; inspect the DOM and
confirm the trigger's wrapper is a `div`, not an `h3`.
7. Visit `/docs/guides/api/sql-to-rest`, translate any query, and
confirm the "Assumptions"/"FAQs" section labels still look the same.
8. Visit `/docs/guides/realtime/postgres-changes` and
`/docs/guides/realtime/benchmarks`, scroll to the connection-limits
calculator, and confirm its section labels still look the same on both
pages.
9. (Optional, for a full re-check) Run `pnpm e2e:docs:a11y --all`
against a deployed preview of this branch — only `/docs/guides/cli`
(pre-existing 404, unrelated to headings) should fail; every other page
should pass.

Verified with a full Playwright run against a real preview deployment:
**756 passed, 1 failed** (`/docs/guides/cli`, the pre-existing unrelated
404). Zero heading-order violations remain.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **Documentation**
- Added clearly labeled Quickstart sections to Astro, Next.js, React
Native, and React authentication guides.
- Improved heading hierarchy and formatting across social provider
setup, database functions, and deployment documentation.
- Updated estimator and SQL-to-REST section presentation for more
consistent content structure.

- **Bug Fixes**
- Improved accordion trigger layout while preserving existing behavior,
styling, accessibility, and icon display.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
 2026-08-04 09:00:29 -07:00
Danny White d1e7c403ac fix(ui): align Admonition titles and docs link hover with prose (#48428) 
## What kind of change does this PR introduce?

UI bug fix.

## What is the current behavior?

After the recent Admonition a11y refactor:

- Titled Admonitions in MDX (blog and docs) could pick up large prose
top margin on the title, or (after follow-ups) end up with a title much
smaller than the body because the title was a `div` at `text-sm` while
body `<p>`s took prose ~15px
- Docs MDX links (including inside Admonitions) had a weak hover: prose
only shifted underline colour

Prior issues:

- A couple of guide callouts bolded link text via `[**…**](…)`
- Some funky Admonition formatting as called out in comments below

## What is the new behavior?

- `AlertTitle` is a `<p>` with `!mt-0 mb-0.5 font-medium` (not an `h5` /
bare `div`), so it does not break heading hierarchy and matches
admonition body font-size under prose
- Admonition uses `AlertTitle` again (though with `<p>` as explained
above) and wraps MDX `children` in `AlertDescription` (same as
`description`)
- `Alert` / `AlertTitle` / `AlertDescription` get `data-slot`
attributes; description keeps string→`<p>` wrapping, Studio density,
plus `text-balance`
- Docs link hover: typography `a:hover` and `MdxAnchor` now move text +
decoration toward foreground (InlineLink-like), without stealing brand
link colour via `text-inherit`
- Content: remove accidental bold on oauth-scopes and
multi-factor-authentication guide links

| Before | After |
| --- | --- |
| <img width="1360" height="378" alt="CleanShot 2026-07-29 at 16 44
48@2x"
src="https://github.com/user-attachments/assets/1aa98cb4-e691-428e-b7e2-a78afcdf518d"
/> | <img width="1350" height="362" alt="CleanShot 2026-07-29 at 16 44
08@2x"
src="https://github.com/user-attachments/assets/63c9c7df-c1c7-49c4-8fdb-0411ae251a71"
/> |
| <img width="1518" height="448" alt="CleanShot 2026-07-29 at 16 46
18@2x"
src="https://github.com/user-attachments/assets/d618e138-fcd7-4a44-b16d-cb0ac5ba6b0e"
/> | <img width="1524" height="424" alt="CleanShot 2026-07-29 at 16 46
30@2x"
src="https://github.com/user-attachments/assets/dbc7710e-42c6-483c-b367-19b2ff3a6475"
/> |
| <img width="1524" height="598" alt="CleanShot 2026-07-29 at 16 47
15@2x"
src="https://github.com/user-attachments/assets/c9c07f37-4e2b-40fa-bc90-c86a17e5ea32"
/> | <img width="1530" height="584" alt="CleanShot 2026-07-29 at 16 47
39@2x"
src="https://github.com/user-attachments/assets/806735f0-fa44-42e6-bd5a-127899d0bfc2"
/> |

## To test

**Docs**

1. [Functions
quickstart](https://docs-git-fix-admonition-alert-title-prose-supabase.vercel.app/docs/guides/functions/quickstart):
titled tip near the top. Title and body should be the same size, no
giant gap above the title
2. [BYO
MCP](https://docs-git-fix-admonition-alert-title-prose-supabase.vercel.app/docs/guides/ai-tools/byo-mcp):
tip with links. Hover a link (text + underline should both go
foreground)
3. [OAuth
scopes](https://docs-git-fix-admonition-alert-title-prose-supabase.vercel.app/docs/guides/integrations/build-a-supabase-oauth-integration/oauth-scopes):
note link is not bold
4. [Multi-factor
authentication](https://docs-git-fix-admonition-alert-title-prose-supabase.vercel.app/docs/guides/platform/multi-factor-authentication):
same, note link not bold

**Blog**

5. [CLI v2 config as
code](https://zone-www-dot-com-git-fix-admonition-alert-title-prose-supabase.vercel.app/blog/cli-v2-config-as-code):
titled Admonitions. Title size matches body, no huge top margin

**Other**

6. [Design system:
Admonition](https://design-system-git-fix-admonition-alert-title-prose-supabase.vercel.app/design-system/docs/fragments/admonition):
component reference
7. Studio (e.g. project Edge Functions secrets): Admonitions should stay
compact `text-sm` outside prose. Preview:
[studio-staging](https://studio-staging-git-fix-admonition-alert-title-prose-supabase.vercel.app)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Summary by CodeRabbit

* **New Features**
  * None

* **Style**
* Improved link decoration consistency (underline/hover) across internal
and external documentation content, with safer external link handling.

* **Bug Fixes**
* Refined alert/admonition rendering for clearer title/description
semantics and better spacing/text wrapping.
* Updated documentation image rendering to avoid forwarding
whitespace-only children and adjusted chart image layout.

* **Tests**
  * Expanded assertions for alert/admonition structure and styling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-07-31 12:23:16 +10:00
Danny White 3b06c6c7cc fix(docs): unify docs card hover and retire IconPanel (#48379) 
## What kind of change does this PR introduce?

Bug fix / docs UI polish.

## What is the current behavior?

- Many docs `GlassPanel`s use `background={false}`, so hover only tweaks
the border and reads as having no hover state
- Compact icon+label grids still use `IconPanel`, which has a broken
`-z-10` hover fill and overlaps with the newer `IconLink` pattern
- Description card grids jump to 3-up too early on medium widths

## What is the new behavior?

**GlassPanel**
- Removes the `background` prop; cards always use the filled surface
with stronger border hover
- Tightens icon→description gap (`gap-6` → `gap-3`)
- Decorative icons/logos use empty `alt` so screen readers don’t hear
the title twice

**Icon tiles**
- Retires `IconPanel` from docs and deletes it from `ui-patterns`
- Uses `IconLink` / `IconLinkList` for compact navigation tiles (auth
providers, social login, etc.)
- Adds `IconLinkButton` for SMS provider pickers (same chrome, opens a
dialog)
- Adds focus styles, list labelling, and dialog-trigger ARIA where
needed

**Layout / content**
- Migrate-to-Supabase description cards on resources use `GlassPanel`
(not slim icon tiles)
- Grid spans use `md:… xl:…` so cards stay 2-up until ~1280px
- Fixes migrate links to `/guides/platform/migrating-to-supabase/…` and
SSR quickstarts to `creating-a-client` with framework query params
- Moves the Extensions list `key` onto the outer `Link`

| Before | After |
| --- | --- |
| <img width="1185" height="1323" alt="Resources Supabase Docs"
src="https://github.com/user-attachments/assets/1677bf65-d3a3-4202-8c70-e758f7c3bcce"
/> | <img width="1185" height="1323" alt="Resources Supabase Docs"
src="https://github.com/user-attachments/assets/51760f0f-62b6-4010-9841-de26039f37b4"
/> |

## Additional context

Homepage compact sections already use `IconLinkList` from #48317; this
PR finishes that pattern for remaining docs `IconPanel` callsites and
cleans up GlassPanel hover.

`www/customers` only drops the removed `background` prop; those cards
already use the filled surface via `logo`.

## Test plan

- [ ] `/guides/getting-started`: GlassPanels show filled surface and
clearer border hover
- [ ] `/guides/resources`: migrate cards are GlassPanels with working
`/platform/…` links; 2-up until xl
- [ ] `/guides/auth/social-login` and auth providers partial: IconLink
tiles hover/focus correctly
- [ ] `/guides/auth/phone-login`: SMS provider buttons open dialogs;
keyboard focus works
- [ ] Docs homepage: migrate / self-host IconLinkLists unchanged in
behaviour
- [ ] `/guides/auth/server-side`: Next.js / SvelteKit cards resolve on
docs preview

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Improved Layouts**
* Made “GlassPanel” card grids more responsive and consistent; refined
card and success badge spacing for a cleaner presentation.
* **Updated Documentation**
* Refreshed multiple guide and resource pages (including quickstarts and
migration content) with standardized card layouts and updated link
destinations.
* **Component Updates**
* Standardized “GlassPanel” styling (background toggle removed) and
simplified icon-based panels; added an `IconLinkButton` for action
tiles; updated authentication provider grids to use the shared tile UI.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-07-31 06:34:05 +10:00
Ivan Vasilov 6b14df7724 chore: Bump vulnerable deps (#48387) 
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Chores**
  * Updated Next.js, PostCSS, and tar package versions.
  * Added the required TypeScript native tooling where needed.
* Refined package configuration and dependency ordering across the
project.
  * Removed an unused empty dependency configuration.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-07-30 14:23:43 +02:00
Miranda Limonczenko 0d465e7b5f chore(ui): Remove 'tip' from Admonition (#48419) 
Closes FE-3966

## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## Problem

- The admonition uses both 'tip' and 'note', but the visual distinction
has long-ago collapsed.
- 'Note' is used far more frequently than 'tip'
- The two are very similar and it is confusing to know which one to use
when they are visually identical

## Solution

Collapse 'tip' and 'note' into one by removing all places where there is
'tip' and updating all references to 'tip' into 'note'.

**Note:** This PR also resolves new broken links flagged by the E2E docs
checker. It may move to another PR since E2Es keep erroring.

### Specific changes

See below for an AI-generated list of changes:

- **Type system** — removed `'tip'` from `AdmonitionType`, its
`TYPE_TO_VARIANT`/`TYPE_LABEL` entries, and the test case in
[`packages/ui-patterns/src/Admonition/](packages/ui-patterns/src/Admonition/)
- **Remark plugin** —
[remarkAdmonition.ts](apps/docs/lib/mdx/plugins/remarkAdmonition.ts) now
maps mkdocs `tip` → `note`
- **Lint allowlist** — `tip` dropped from `supa-mdx-lint.config.toml`
- **Content migration** — all 109 files with `type="tip"` (across
`apps/docs`, `apps/www`, `apps/studio`) converted to `type="note"`; zero
remaining hits confirmed by repo-wide grep
- **Style guide** — `CONTRIBUTING.md` and `contributing/content.mdx`
updated to describe 4 admonition types instead of 5

### Usage before implementation

See the usage table that points toward 'note' as being dominant across
all apps:

Here's the usage table:

| Location | `note` | `tip` |
|---|---|---|
| apps/docs | ~480 | ~143 |
| apps/studio | 34 | 6 |
| apps/www (blog) | 19 | 3 |
| packages/ui-patterns (tests) | 3 | 1 (parametrized) |
| design-system / ui-library / packages/ui / packages/common | 0–1 (test
fixture only) | 0 |

## Preview links


| App | Page | Search text (Ctrl+F) | Verify |
|---|---|---|---|
| docs |
[/docs/guides/ai-tools/byo-mcp](https://docs-git-admonition-collapse-note-tip-supabase.vercel.app/docs/guides/ai-tools/byo-mcp)
| official MCP TypeScript SDK | callout's aria-label="Note" |
| docs |
[/docs/guides/ai-tools/mcp](https://docs-git-admonition-collapse-note-tip-supabase.vercel.app/docs/guides/ai-tools/mcp)
| MCP server is available at | callout's aria-label="Note" |
| docs |
[/docs/guides/ai/python-clients](https://docs-git-admonition-collapse-note-tip-supabase.vercel.app/docs/guides/ai/python-clients)
| Click Connect at the top of any project page | callout's
aria-label="Note" |
| docs |
[/docs/guides/auth/audit-logs](https://docs-git-admonition-collapse-note-tip-supabase.vercel.app/docs/guides/auth/audit-logs)
| Disabling Postgres storage reduces your database storage costs |
callout's aria-label="Note" |
| docs |
[/docs/guides/database/tables](https://docs-git-admonition-collapse-note-tip-supabase.vercel.app/docs/guides/database/tables)
| access a custom schema through the Supabase Data API | callout's
aria-label="Note" |
| docs |
[/docs/guides/troubleshooting/edge-function-404-error-response](https://docs-git-admonition-collapse-note-tip-supabase.vercel.app/docs/guides/troubleshooting/edge-function-404-error-response)
| Always configure an appropriate time frame | callout's
aria-label="Note" (was single-quoted type='tip') |
| www | [blog:
cli-v2-config-as-code](https://zone-www-dot-com-git-admonition-collapse-note-tip-supabase.vercel.app/blog/cli-v2-config-as-code)
| Detecting config drift | callout's aria-label="Note" |
| www | [blog:
cli-v2-config-as-code](https://zone-www-dot-com-git-admonition-collapse-note-tip-supabase.vercel.app/blog/cli-v2-config-as-code)
| Setting Edge Function secrets | callout's aria-label="Note" |
| www | [blog:
nosql-mongodb-compatibility-with-ferretdb-and-flydotio](https://zone-www-dot-com-git-admonition-collapse-note-tip-supabase.vercel.app/blog/nosql-mongodb-compatibility-with-ferretdb-and-flydotio)
| If your network supports IPv6 connections | callout's
aria-label="Note" |

Note: the `www` rows use the `zone-www-dot-com` preview host, not the
`docs` one you gave — since blog pages are served from the www app, not
docs.


## Manual testing

1. Open preview links for affected pages.
2. Inspect. Open console.
3. Paste the following in and see there is no 'Tip' on the page:
```
document.querySelectorAll('[role="alert"]').forEach(el => console.log(el.getAttribute('aria-label'), el.textContent.slice(0,60)))
```



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Documentation**
* Standardized informational callouts across docs and tutorials from
**“Tip”** to **“Note”**, updating multiple examples and guidance blocks.
* Updated a few related doc references/links and conditional “Next
steps” content.
* **UI Updates**
* Switched various in-app banners and notices to the **“Note”** style
variant.
* **Bug Fixes / Improvements**
* Removed support for the retired **“Tip”** callout type and aligned
docs linting, component behavior, and aria labeling to the remaining
admonition types.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-07-29 09:26:50 -07:00
kemal.earth 67c983caef fix(design-system): small chart and metric card fixes (#48439) 
## 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 fixes the following:

- Our `<MetricCard />` and `<LogsBarChart />` which use `<ChartTitle />`
were rendering the wrong font style for the title. The `font-mono` class
being overwritten by recent changes, this helps sort cascade so it
renders correct.
- In our design system, the warning variable for charts was rendering
black, this should be fixed to be our warning yellow.
- There was an odd padding on `<MetricsCard />` content area, meaning
our line chart wasn't flush to the edges, this required a small
extension to `twMerge` so it could resolve.

Please have a look around studio in places we have charts to double
check nothing is broken. Also compare live design system vs. this branch
by checking Logs Bar Chart, Charts and Metrics Card pages.




<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Style**
* Refined heading typography for more consistent font and weight
styling.
  * Improved class merging for custom spacing utilities.

* **Bug Fixes**
  * Adjusted composed chart Y-axis sizing for clearer layouts.
  * Improved warning color fallbacks in log bar charts.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-07-29 13:50:56 +01:00
Danny White a99c83fe03 fix(studio): give Search nav trigger a visible hover state (#48319) 
## What kind of change does this PR introduce?

Bug fix / UI polish.

## What is the current behavior?

The Studio header "Search..." command menu entry point has no useful
hover state in light mode. It used `hover:bg-surface-100`, which maps to
elevated `--card` and brightens toward white, so the hover effectively
disappears against the near-white header. It also lacked
`cursor-pointer` and used a weaker border than nearby header controls
like Connect.

## What is the new behavior?

`CommandMenuTriggerInput` now matches the Connect button's default
variant interaction:

- `cursor-pointer`
- `border-strong` with `hover:border-stronger`
- `hover:bg-selection` (same fill as Connect; aliased to accent)

Studio `LayoutHeader` drops the redundant `bg-transparent` override now
that transparent is the shared default.

| After |
| --- |
| <img width="2561" height="267" alt="CleanShot 2026-07-24 at 17 06
09@2x"
src="https://github.com/user-attachments/assets/5a855512-9b7e-40b8-861f-647c87d472a7"
/> |

## Additional context

Docs top nav also consumes `CommandMenuTriggerInput`, so it picks up the
same trigger styling.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Summary by CodeRabbit

* **Style**
* Updated the command menu trigger appearance with a transparent
background and stronger border.
  * Improved hover styling for clearer visual feedback.
* Standardized command menu trigger styling across platform and
non-platform layouts.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-07-29 06:23:57 +10:00