dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-06 01:45:10 +03:00
Code Issues Packages Projects Releases Wiki Activity
38,939 Commits 1,782 Branches 62 Tags
master
Commit Graph
107 Commits
Author SHA1 Message Date
Joshen Lim d6c81b66c9 Apply scrollBeyondLastLine for CodeEditor in QueryEditor and Logs Explorer (#51082) 
## Context

As per PR title - this was the behaviour for the SQL Editor and figured
it makes sense to also have this behaviour in the Explorer QueryEditor +
Logs Explorer where the main UX is writing queries, and lets the user
bring the active section of the code closer to the middle of the
viewport (rather than right at the bottom)
<img width="790" height="305" alt="image"
src="https://github.com/user-attachments/assets/07eb63fa-1bb9-4abe-859e-2968a73e7ca5"
/>


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

## Summary by CodeRabbit

* **Editor Improvements**
* Query editors now allow scrolling beyond the final line, providing
more room to position the last lines on screen.
* The SQL editor no longer forces the decoration area to zero width; it
now uses Monaco’s default width behavior.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-10-01 11:20:41 +08:00
Pamela ChiaandJoshen Lim 4a941518e3 feat(studio): track Explorer runs and saves (#51004) 
I added outcome events for Explorer query runs and successful manual
notebook saves. Existing page visits and preview toggles do not show
whether users complete queries or persist notebooks.

**Changed:**
- **Query usage:** Accepted runs from query tabs and notebook cells emit
submitted and terminal outcome events with a shared run ID. Canceled
confirmations emit no run events.
- **Notebook adoption:** Successful manual saves emit created or updated
events. Recreated notebooks count as creations. Unsaved drafts and
failed saves emit neither.
- **Event metadata:** Explorer action events use `Explorer` as their
page title.

**Note:** Assistant-generated saves are outside this PR. Custom
properties omit SQL and notebook content. Page visits still carry the
browser title, which can include a notebook name.

## To test

Tested on the staging preview:
- [x] Run valid and invalid SQL from an Explorer query tab. Each run
emits one submitted event and one matching completed or failed event
with the same run ID.
- [x] Run database and Logs notebook query cells, then add a markdown
cell. The query cells emit matching event pairs; the markdown cell emits
no query event.
- [x] Save a new notebook, then edit and save it again. The successful
saves emit created and updated events.
- [x] Cancel a guarded query. It emits no query run event.
- [ ] Recreate a notebook deleted on the server after local edits. A
successful save emits created, not updated.
- [x] Inspect an Explorer action event request. Its page title is
`Explorer`; page visits still use the browser title.
- [ ] Force a notebook save failure. It should emit no save event. This
case was not tested manually.

## Linear
- fixes GROWTH-1298


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

* **Analytics**
* Explorer query runs are tracked for database and log queries,
including whether they complete or fail.
* Query activity is associated with its location in Explorer, such as a
query tab or notebook cell.
  * Successful notebook saves are tracked as creations or updates.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
 2026-09-29 13:54:13 -07:00
Saxon FletcherandClaude Opus 5.5 d3f3903b69 feat(studio): show recent notebooks on the project homepage (#50825) 
<img width="1758" height="1252" alt="image"
src="https://github.com/user-attachments/assets/6f5ff072-9b47-4265-924d-0ca22368f6cb"
/>


## What

With the Explorer feature preview on, the homepage **Reports** row
becomes a **Notebooks** row showing the four newest notebooks.

- Advisor and notebook cards share a new `HomeCard` layout: same height
and header, content anchored to the bottom, 3-line description clamp.
- Notebook cards show the cell count, the creation date, and an
**Analyze** button that starts the same chat as the Explorer notebook
tab (`useAnalyzeNotebook`, now shared by both).
- Advisor lint cards replace the assistant dropdown with two icon
buttons: **Ask Assistant** and **Copy prompt**. Copy prompt shows a
check after copying.
- The empty state matches the Reports one.

## How to test

1. Turn on the Explorer feature preview and open a project's Home page.
2. The Reports row should be replaced by Notebooks. With no notebooks,
you should see the empty state; **Create your first notebook** opens a
new notebook in Explorer.
3. Click a notebook card to open it. Click **Analyze** to start an
assistant chat. It should be disabled on a notebook with no cells.
4. On an advisor lint card, check **Ask Assistant** opens the assistant
with the lint prompt, and **Copy prompt** copies it and briefly shows a
check.
5. Turn the preview off: the Reports row comes back unchanged.


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

* **New Features**
* Project home now displays up to four notebooks, with options to create
a notebook, open it, and see its cell count.
* Start an AI analysis of a notebook directly from its card or from the
notebook explorer. Analysis is unavailable for notebooks without cells.
  * Advisor cards now offer a one-click AI chat and a copyable prompt.
* Project home shows notebooks when the Explorer preview is enabled;
otherwise, it continues to show custom reports.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
 2026-09-24 16:41:56 +08:00
Joshen Lim 38fa40e851 Joshenlim/fe 4445 explorer export as pdf option 2 (#50786) 
## Context

Another take on [this
PR](https://github.com/supabase/supabase/pull/50733), decided that it's
better UX + DX to use a PDF library (`@react-pdf/renderer`) instead for
handling exporting Notebooks to PDF. The previous method using `print`
involved a lot of sparse patching in various places + had a lot of
limitations, not to mention its awkward UX to "Print".

There's a lot of code changes in this PR but it's because we're
constructing the PDF document based on the notebook's contents using
primitives from `@react-pdf/renderer` which gives us a lot more control
over the PDF's output.

PDF output will differ slightly from the Notebook UI in the browser
- Added a custom header in the report which covers the notebook name +
project name, and when its exported
- Empty markdown cells are skipped
- Query cells will show both SQL content + results (either table or
chart)
- Opting to skip syntax highlighting for SQL content (Can consider
separately)
- Results will only be included in the PDF if the notebook's been run
(Aligns with Copy as Markdown CTA)
- For table results, _all_ rows will be rendered (Aligns with Copy as
Markdown CTA)

Feel free to give it a spin! 🙂 🙏 

<img width="248" height="207" alt="image"
src="https://github.com/user-attachments/assets/e38c14ba-7ee8-40ce-99b1-fa126453bf0f"
/>


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

- **New Features**
  - Added an “Export as PDF” option for notebooks.
- PDFs include notebook details, Markdown content, SQL queries, query
results, tables, and charts.
- Query exports show errors, empty results, row counts, and applicable
row limits.
- Export progress is displayed while the PDF is generated, and failures
are reported via notifications.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-24 13:23:38 +08:00
Danny White d067e81a69 fix(ui): align primary colours across text, buttons, and controls (#50697) 
## Problem

Primary colour serves readable text and selected controls, but those
uses need different shades. Light mode needs darker text, while dark
mode needs a deeper button fill. Fixed brand green on interactive chrome
also prevents a custom primary hue from carrying through the interface.
Some slider tracks and selected text are hard to read.

## Solution

- Keep `--primary` for accessible text and small selected indicators.
Use `--primary-solid` for button fills, which need a deeper shade in
dark mode.
- Add `--primary-bright` for focus rings, selected control chrome, chart
accents, and other interactive highlights. It follows `--primary-hue`;
`brand-*` stays fixed for Supabase identity.
- Make slider troughs clearer and text selection translucent with theme
foreground text.
- Document the split in the design-system colour guide.

| Before | After |
| --- | --- |
| <img width="980" height="244" alt="Before: light mode primary
controls"
src="https://github.com/user-attachments/assets/dfae325d-0dfe-4231-8bcd-3f89c4b9d793"
/> | <img width="982" height="204" alt="After: light mode primary
controls"
src="https://github.com/user-attachments/assets/5fdcb531-a6e3-4549-8a13-9d9a5ebe6e20"
/> |
| <img width="610" height="120" alt="Before: slider track"
src="https://github.com/user-attachments/assets/04f768e0-51e8-4d06-9b97-c52f4a34f122"
/> | <img width="622" height="126" alt="After: slider track"
src="https://github.com/user-attachments/assets/95127f4e-13dc-4f0f-b63c-cf5d70a28b42"
/> |
| <img width="652" height="512" alt="Before: dark mode controls"
src="https://github.com/user-attachments/assets/3f88de66-90cc-40ee-8cf1-b5f4eb87b09a"
/> | <img width="658" height="498" alt="After: dark mode controls"
src="https://github.com/user-attachments/assets/906bec30-6ca1-4614-9fb3-6cf5e5feec22"
/> |

## Review instructions

1. Compare light and dark mode in the [colour usage
guide](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/color-usage#primary-and-brand-colors).
Check primary ink, primary-solid, primary-bright, and fixed brand
swatches.
2. In Studio, open the ‘new table’ sheet in [Table
Editor](https://studio-staging-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/dashboard/project/_/editor).
Tab through the new table sheet's fields and toggles. Check the focus
rings, selected controls, and the sheet's edges in both themes. You do
not need to save a table.
3. Select text in Studio in both themes, including a link or
primary-coloured label. The selection and text should remain legible.
4. Check the
[Field](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/components/field)
Price Range slider: the unused track should remain visible in both
themes. The selected field card border should follow primary-bright.
5. Check the
[Button](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/components/button)
and [Radio
Group](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/components/radio-group)
previews. In dark mode, `primary` button fill should be deeper than
primary
[text](https://design-system-git-dnywh-fix-bright-brand-chrome-supabase.vercel.app/design-system/docs/color-usage#text);
selected radios should remain readable.
 2026-09-24 09:56:31 +10:00
Joshen Lim aef1599d3e Add keyboard shortcut for saving notebook (#50707) 
### Context

Adds a keyboard shortcut for saving a notebook in the explorer 
<img width="269" height="112" alt="image"
src="https://github.com/user-attachments/assets/c9ab1c4b-fbb3-40ed-8f10-47301e16e6b3"
/>

Also shifts the keyboard shortcuts for queue operations into the table
editor registry - more contextual to there since queue operations is
specifically for the table editor only

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

## Summary by CodeRabbit

- **New Features**
- Added a keyboard shortcut (`Mod+S`) for saving notebooks in Explorer.
  - The save toolbar action now displays its keyboard shortcut.
- Restored table editing shortcuts for saving pending edits, toggling
the operation queue, and undoing changes (`Mod+S`, `Mod+.`, and
`Mod+Z`).

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-22 19:29:40 +08:00
Joshen Lim c7880e328f Add a live preview markdown editor for explorer (#50717) 
## Context

We've gotten some requests for a better markdown editing experience in
the Explorer so this PR adds a proper live preview markdown editor,
similar UX to how you'd edit notion or obsidian documents. Opting to use
`lexical` as the main library to support this UI for its size and
composability without going too low level like prose mirror

<img width="933" height="452" alt="image"
src="https://github.com/user-attachments/assets/7161ae6c-3dff-4b36-818f-01b5e573f121"
/>

Actual file changes are just this size excluding the package-lock
<img width="150" height="39" alt="image"
src="https://github.com/user-attachments/assets/bb01f2cf-8ef7-4daf-975b-614b2d817b54"
/>

## Changes involved

This adjusts the UX for markdown cells a little
- Clicking on a markdown cell immediately allows you to edit
- Instead of the existing behaviour which requires a double click to
enter "Edit" state
- Editing doesn't eject you into a monaco editor, but rather inline
editor
  - Nicer transition
- Clicking out of the cell persists the cell's content
  - No more "Cancel" or "Save" buttons

## To test
- [ ] Verify that editing markdown cells are still working
- [ ] Verify that tabs do get marked with unsaved changes if you edit a
markdown cell


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

- **New Features**
- Replaced the previous Markdown editing workflow with an always-visible
inline editor.
- Added rich Markdown editing for headings, lists, links, blockquotes,
code blocks, inline code, and text formatting.
  - Changes are saved automatically when leaving the editor.
  - Markdown formatting shortcuts take precedence within the editor.

- **Bug Fixes**
  - Avoids unnecessary saves when content has not changed.

- **Tests**
- Added coverage verifying Markdown formatting conversions remain
consistent and repeatable.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-22 19:09:25 +08:00
Joshen Lim 14bda8a5cf Joshenlim/fe 4438 explorer allow deleting notebookchat without first having to (#50701) 
### Context

Adds context menu to the explorer nav to allow users to delete notebooks
or chats from there (instead of having to open the notebook / chat
first, then select delete from the header)
<img width="304" height="339" alt="image"
src="https://github.com/user-attachments/assets/2ad0f21c-0d49-407c-97a2-ef11ae59e280"
/>

### Changes involved:
- Consolidates the rendering of explorer nav items into a single
component that both `ExplorerNavNotebook`, `ExplorerNavHome` and
`ExplorerNavChats` use.
- We were previously rendering a link for notebook, and a button for
chats. But chats' button was just calling `router.push` under the hood.
- Opting to use a Context to handle the delete functionality such that
we can render the confirmation modal just once at the layout level since
there's multiple places that have this delete functionality - notebook
tab, chat tab, context menu in each of the explorer navs

### To test
- [ ] Verify that navigating around the explorer is status quo
- [ ] Verify that you can delete a notebook/chat from within the
notebook/chat tab
- [ ] Verify that you can delete a notebook/chat from the explorer nav
- [ ] Verify that after deleting a notebook/chat from either locations,
the tabs should clear

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

- **New Features**
- Unified chat and notebook navigation with direct links and active-item
highlighting.
- Added context-menu options to delete chats and notebooks with
confirmation and status notifications.
- Added double-click support for keeping recently viewed chats and
notebooks open as tabs.
  - Deleted items and their related tabs are removed automatically.

- **Tests**
- Updated Explorer navigation tests for the unified link-based item
behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-22 16:21:55 +08:00
Danny White ec53175b8a refactor(ui): rename text-brand to text-primary (#50564) 
## What kind of change does this PR introduce?

Refactor. Follow-up to #49871.

## What is the current behavior?

Branded (green) text still uses the `text-brand` classname while the
colour comes from `--primary`.

## What is the new behavior?

**Rename-only:** `text-brand` → `text-primary` across callsites and
docs. Leftover `bg-brand` / `border-brand` alias to `brand-default`. No
intentional colour changes in this PR.

This better matches how we treat our green in other components and
props, like `variant="primary"` for green buttons.

## To test

On light mode: smoke-test that branded text still looks like #49871
(readable green, not the bright fill).

-
[Homepage](https://zone-www-dot-com-git-dnywh-depr-316-text-brand-de2380-supabase.vercel.app/):
“Scale to millions” uses `text-primary`
- [Docs
homepage](https://docs-git-dnywh-depr-316-text-brand-to-primary-supabase.vercel.app/docs):
branded links like “More on self-hosting” are still readable
- [Typography
docs](https://design-system-git-dnywh-depr-316-text-brand-to-primary-supabase.vercel.app/design-system/docs/typography):
documents `text-primary`
- [Colour
usage](https://design-system-git-dnywh-depr-316-text-brand-to-primary-supabase.vercel.app/design-system/docs/color-usage):
`text-primary` is visibly darker than `bg-brand-default` _on light mode_
- [Studio auth
providers](https://studio-staging-git-dnywh-depr-316-text-brand-to-60fa6c-supabase.vercel.app/dashboard/project/_/auth/providers):
enabled provider badge text readable; status dot stays bright green

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

* **Style**
* Updated branded text, link hover states, icons, badges, indicators,
and highlighted content across the Design System, Docs, Studio, Learn,
UI Library, and marketing experiences to use the primary theme color.
* Updated syntax highlighting and table-of-contents styling for
consistent primary-color presentation.
  * Refined brand color fallback behavior for bright fills and borders.

* **Documentation**
* Updated color-usage and typography guidance to recommend the primary
text utility.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-22 16:19:03 +10:00
Joshen Lim ad30c04e0e Persist last visited explorer tab (#50557) 
## Context

Saves the last visited explorer tab via `useDashboardHistory`, such that
landing back on `/explorer` will open the last visited page. Similar
behaviour to Table Editor and SQL Editor

Would also be useful when going between the SQL Editor and Explorer to
bring snippets over

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

* **New Features**
* Explorer now remembers and restores the last visited query, chat, or
notebook tab.
* Automatically returns to the Explorer home screen when a saved tab is
unavailable.
* Displays a loading state while the last visited tab is being restored.

* **Bug Fixes**
  * Closing deleted chat tabs now clears their saved history.

* **Tests**
* Added coverage for Explorer tab restoration, loading states, and stale
history cleanup.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-21 16:34:50 +08:00
Matt RossmanandJoshen Lim 4bb36b944f feat(studio): let High Compliance projects opt-in to Assistant data access (#50548) 
Orgs with the HIPAA add-on had the Assistant's opt-in level forced to
`disabled` on any project marked High Compliance, regardless of what the
org picked in its AI settings. The restriction predated our AI provider
BAAs. The consequence is those users see the Assistant failing to answer
questions about their data w/ no clear path how to fix it, even though
the LLM provider supports this use case.

This PR removes these Assistant restrictions on the server and client so
those projects honor the org's chosen level. Braintrust conversation
tracing is unchanged and still blocked for these projects, see [this
test
case](https://github.com/supabase/supabase/blob/b9800ccf16/apps/studio/lib/ai/braintrust-logger.test.ts#L16-L20).
See
[comments](https://linear.app/supabase/issue/AI-1153/allow-hipaa-orgs-to-opt-in-to-assistant-data-access-for-high#comment-485a0d46)
for legal approval and conditions.

The client-side changes enable features like "Debug with AI" on SQL
query failures, “Generate/Rename with AI” for snippet titles, and
generated Assistant chat titles for these customers.

The AI opt-in copy now adds a reminder to obtain consent from data
subjects, linking the [shared responsibility
model](https://supabase.com/docs/guides/deployment/shared-responsibility-model)
based also on [this
comment](https://linear.app/supabase/issue/AI-1153/allow-hipaa-orgs-to-opt-in-to-assistant-data-access-for-high#comment-f81ee610).

<img width="400" alt="CleanShot 2026-09-17 at 5 01 02 PM@2x"
src="https://github.com/user-attachments/assets/d02123f2-3e32-4d83-9f98-7d15e59222ef"
/>

To test with a HIPAA-enabled project in staging, you can use this [Plan
Change
[Staging]](https://app.hex.tech/supabase/app/Plan-Change-Staging-032BD32jo1EaisCS85qunf/latest)
Hex to add the HIPAA add-on. Once the add-on is present, you can turn on
High Compliance from a project's settings. Also in org settings, crank
up the Assistant data opt-in level and verify the Assistant is able to
answer questions about the project's data.

My results testing with opt-in level "Schema, Logs & Database Data":

| High compliance setting | Data opt-in working |
|--------|--------|
| <img width="1302" height="422" alt="CleanShot 2026-09-17 at 5 03 36
PM@2x"
src="https://github.com/user-attachments/assets/c416371b-2eb8-49df-9c07-6d8eababb443"
/> | <img width="1566" height="1516" alt="CleanShot 2026-09-17 at 5 05
14 PM@2x"
src="https://github.com/user-attachments/assets/39624355-7f8f-46ce-9f08-a8acfb9da830"
/> |

Closes AI-1153


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

## New Features

- AI-assisted query renaming, snippet title generation, debugging, and
tools now follow organization AI opt-in settings rather than project
HIPAA status.
- Debugging assistance and AI actions remain available for eligible
users without additional HIPAA-based blocking.
- AI metadata warnings consistently show standard opt-in messaging and
permission settings.
- AI settings remind users to obtain consent before entering personal
data and link to shared responsibility guidance.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
 2026-09-18 08:21:50 -04:00
Joshen Lim cdbe2963fa Add DownloadResultsButton to explorer query editor (#50563) 
## Context

Adds the `DownloadResultsButton` component to the footer of the
explorer's query editor - will show up in notebook + query tab

<img width="1147" height="907" alt="image"
src="https://github.com/user-attachments/assets/141278a8-1e00-424e-84ec-8ddb7cf0a96b"
/>
<img width="1152" height="913" alt="image"
src="https://github.com/user-attachments/assets/0e4a48b0-ebc3-473e-8bc0-19ab633e1904"
/>


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

- **New Features**
- Added a results footer displaying row counts and optional row limits.
  - Added download and export actions when query results are available.
  - Standardized the results footer across query and notebook previews.
- Added keyboard shortcut hints to export options when shortcuts are
enabled.

- **Improvements**
- Export actions now support read-only result sets without changing
displayed output.
- Export menu sizing and shortcut labels adapt to the enabled shortcut
configuration.
  - Improved accessibility with a label for refreshing logs.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-18 17:13:44 +08:00
Saxon FletcherandClaude Opus 5 252f69e451 chore(studio): refine Explorer sidebar, onboarding, and notebooks (#50555) 
## Summary

A round of small Explorer refinements.

**Sidebar**
- Adds a **Run SQL** row (with a `+` icon) above Notebooks in the
Explorer sidebar; opens a new query tab.

**Assistant**
- Assistant query cells now have the same **Save** dropdown as query
tabs (add to an existing notebook or create a new one). It shows only
when Explorer is enabled, and not while the query is still streaming.
- `SaveQueryDropdown` takes an optional `source`, so logs queries are
saved as log cells (keeping their time range) instead of database cells.
This also fixes saving logs queries from query tabs.
- The "Drafting notebook..." notice (and the notebook loading/status
rows) now span the full message width; `delete_notebook` parts use the
wide layout like create/update.

**Onboarding**
- Replaces the single page with a four-step walkthrough: Welcome to
Explorer (with a **Preview** badge), Run SQL, Notebooks, and Chat with
your project. Each step has an icon, heading, and short description,
with step dots and **Skip** / **Back** / **Next** buttons; the last step
ends with **Continue to Explorer**.
- Removes the "Choose how Explorer opens" choice (still available in
Account preferences) and the collapsible "Learn more" section. Skipping
or finishing still respects the saved startup preference.
- Deletes `ExplorerOnboardingLearnMore`, `ExplorerHomePreference`, and
`ExplorerHomePreview`, which were only used by onboarding.

**Notebooks**
- Query cells use the same max width as markdown cells (`48rem`, was
`72rem`).
- "Add query cell" / "Add markdown cell" are now **Add query** / **Add
markdown** everywhere; the buttons at the bottom of a notebook are
larger (34px, 18px icons).

## Test plan

- [ ] Explorer sidebar: **Run SQL** opens a new query tab
- [ ] Assistant: generate SQL, use **Save** to add it to a new and an
existing notebook; repeat with a logs query and confirm a log cell is
created
- [ ] Assistant: ask for a notebook and confirm the drafting notice is
full width
- [ ] Clear `hasCompletedOnboarding` in Explorer preferences and step
through onboarding (Next / Back / Skip); finishing or skipping respects
the startup preference set in Account preferences
- [ ] Notebook: query cells line up with markdown cell width; bottom add
buttons are larger


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

- **New Features**
  - Added a **Run SQL** shortcut to Explorer navigation.
- Assistant query results can now be saved to notebooks, including log
queries.

- **Improvements**
- Updated Explorer onboarding with guided steps, progress navigation,
and visual previews.
  - Shortened Explorer action labels and refined control sizing.
- Reduced notebook query layout width and adjusted assistant notebook
displays.

- **Changes**
- Removed the Explorer startup preference selector and onboarding “Learn
more” section.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
 2026-09-18 14:38:29 +08:00
Joshen Lim 501666e504 Explorer home chat to present a Run SQL secondary action if value is detected to be a SQL query (#50560) 
## Context

We previously introduced a behaviour for the explorer home tab's chat
form to run a SQL Query if the input is detected to be a SQL query.

Adjusting it to shift that behaviour into a secondary action instead

<img width="740" height="210" alt="image"
src="https://github.com/user-attachments/assets/d4b1fec1-f38c-426f-8108-b50ead1a61ca"
/>



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

## Summary by CodeRabbit

* **New Features**
* SQL statements entered in Explorer can be run directly with a
dedicated “Run SQL” action.
* Assistant forms support context-specific submit icons, labels,
tooltips, and accessibility text.

* **Bug Fixes**
  * Improved SQL detection for multi-statement queries.
* Prevented mixed SQL and conversational text from being treated as
executable SQL.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-18 14:35:35 +08:00
Saxon Fletcher 0043e6f53b feat(studio): add Explorer onboarding and startup preference (#50493) 
<img width="1454" height="920" alt="image"
src="https://github.com/user-attachments/assets/a289b618-2bd2-4957-ac49-71d4e372d2cc"
/>


## 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?

Feature.

## What is the current behavior?

Explorer always opens on its start page, without onboarding or a startup
preference.

## What is the new behavior?

Adds one-time onboarding with wireframe option cards and a collapsed
Learn more section. Users can start on the Explorer start page or in a
new SQL query tab, and change that choice in Account preferences →
Dashboard. Preferences persist per account in the browser.

## Additional context

How to test:
1. With Explorer enabled and fresh browser storage, open Explorer and
select either startup option. Confirm Open Explorer follows the
selection and onboarding stays dismissed after reload.
2. Change Explorer startup in Account preferences → Dashboard, then
reopen Explorer. SQL query should create one normal query tab; Start
page should restore the pinned home tab.
3. Use the keyboard to select an option and toggle Learn more. Expand it
in a short viewport and check that the page scrolls normally.

Validation: 235 tests pass, including 20 new cases; Studio typecheck and
formatting pass.

The local production build was stopped during compilation and was not
verified locally.



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

- **New Features**
- Added an Explorer onboarding experience with startup-view selection,
guidance, and a Learn more section.
- Added Explorer settings to choose between the Start page and SQL query
views.
  - Explorer preferences now persist across sessions and accounts.
  - Explorer can open directly to a new SQL query when selected.
- The Explorer Home tab is shown based on the selected startup
preference.
- **Accessibility**
  - Reduced-motion settings now disable the Explorer loading animation.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-17 15:53:18 +10:00
Saxon FletcherandClaude Opus 5 7880c2f079 fix(studio): explorer chat and notebook layout refinements (#50453) 
Five layout fixes across Explorer chat, notebooks, and the sidebar.

### Chat

- **Conversation fade overlapped the scrollbar.** The top and bottom
gradients are positioned against the conversation's padding box, which
includes the scroll container's scrollbar gutter, so `inset-x-0` painted
them over the scrollbar. They now stop at the conversation's content
gutter, which `Conversation` owns for both the content and the fades.
- **Composer background bled past the input's radius.** The form paints
the surface behind the textarea but had no radius of its own, so its
square corners showed outside the `rounded-lg` input. It now shares the
radius.
- **Message parts used two different widths.** Wide parts come down to
`max-w-3xl` so every part shares a column, matching `AssistantQueryCell`
and `AssistantNotebookPreview`. `isWide` / `isWideMessagePart` stay in
place with both widths equal, so a part can diverge again later without
rebuilding the mechanism.

### Notebooks

- **Cell controls sat at the container edge.** Each cell centred itself
at its own max width while the grip and add-cell button stayed at the
far left of the full-width row, leaving a large gap. `SortableSection`
takes a `sectionWidth` and carries its control gutter twice — once as
the controls, once as padding on the other side — so the section stays
centred with its controls immediately beside it. Cell widths are
unchanged (prose `48rem`, query `72rem`); set them equal and the two
cell types' controls line up on their own.

The controls stay in flow rather than floating in an outside gutter, so
on a viewport narrower than the cap the row just fills the space instead
of clipping the controls into the padding.

### Sidebar

- **Search icon didn't line up with the menu row icons.** The row box
already sits flush with the search input's box, so rows moved from
`pl-3` to `pl-2` to put their icons on the same 8px offset the search
icon uses. Spacing between the input and the list now matches the 12px
side padding.

### Testing

`pnpm --filter studio run typecheck`, Prettier, and 378 tests across
`Explorer`, `ProjectHome`, `AIAssistantPanel`, and `ExplorerLayout`
pass. ESLint warning counts are unchanged from master.

These were reasoned from layout rather than checked in a browser, so
they're worth a look on a preview before merge.

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

## Summary by CodeRabbit

* **UI Improvements**
* Updated Explorer layouts with flexible, configurable widths for
notebook and query sections.
  * Refined navigation spacing and padding across Explorer views.
* Centered and standardized AI Assistant preview, query, and message
content widths.
  * Improved chat form styling with rounded corners.
* Adjusted conversation spacing and fade overlays to avoid overlapping
the scrollbar.
* Preserved full-width behavior where appropriate while keeping controls
aligned.

* **Tests**
* Updated layout tests to reflect revised width and alignment behavior.

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

---------

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
 2026-09-17 11:39:30 +08:00
kemal.earthClaude Opus 4.8Gildas Garcia
 		7fce0a12d9 feat(design-system): first pass at db report chart colours (#46787) 
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

This is a first draft at introducing semantic colours to our
Observability charts. This moves away from just random colours being
assigned to prop after prop. They're only scoped to the Database reports
right now, but if it flows nice, we can open it up to the other reports
too.

This also aims to tone down some of the harsher colours in our charts,
such as the orange which sometimes can look like a warning metric/prop.

| Before | After |
|--------|--------|
| <img width="839" height="336" alt="Screenshot 2026-06-10 at 09 14 56"
src="https://github.com/user-attachments/assets/222747c5-973b-4165-aa53-df7b93412ad3"
/> | <img width="950" height="341" alt="Screenshot 2026-09-14 at 18 14
47"
src="https://github.com/user-attachments/assets/836f3ddd-4a97-4064-b8cf-3a3b435417ac"
/> |

cc @supabase/design for additional thoughts.


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

* **New Features**
* Added semantic chart color roles with light and dark theme variants
for consistent visualizations.
* Standardized colors and fills across database, networking, storage,
and connection charts.
  * Maximum-value lines now use configured chart colors when available.
  * Added chart palette reference and stress-test examples.
* Added stacked bar charts, customizable margins, and gradient-filled
line charts.
* Improved multi-series bar chart focus and date-range footer alignment.

* **Documentation**
* Documented the chart palette, theme variants, accessibility guidance,
and usage recommendations.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
 2026-09-16 09:18:40 +01:00
Joshen Lim ad5202d53d Joshenlim/fe 4378 update editorpanel save cta when explorer is enabled (#50324) 
## Context

Swaps out the "Save as snippet" CTA in the `EditorPanel` to the "Save to
notebook" dropdown CTA if explorer is enabled
<img width="488" height="147" alt="image"
src="https://github.com/user-attachments/assets/915017a1-c416-4904-8146-b0695244d2bd"
/>


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

* **New Features**
* Added a save-query dropdown in Explorer for creating a new notebook or
adding a query to an existing notebook.
* Added notebook search, loading states, and empty-state messaging when
selecting an existing notebook.
  * Saved queries now open in the selected notebook after insertion.

* **Improvements**
  * Added an accessible label to the query title input.
* Updated query-saving controls to appear appropriately when Explorer is
enabled.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-15 16:26:44 +08:00
Sean Oliver 32f17f994d fix(studio): key query chart series by position, not column name (#50270) 
## 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. Hardening ahead of any decision to enable session replay.

### What's inside

- ~47 lines of logic: positional series keys, the X-key collision guard,
and the rewiring of rows, cumulative results and axis width
([QueryResultChart.tsx](https://github.com/supabase/supabase/pull/50270/changes#diff-dae994728613498678bcc06a3ea5176b36708e06b531cfc7eddae3e588fff528))
- ~123 lines of tests, one case per chart type, cumulative setting and
edge case
([QueryResultChart.test.tsx](https://github.com/supabase/supabase/pull/50270/changes#diff-6e1c92ad725bac0324db4d079f3d0cd061b8f6e2aecdc21bcdc5969c90dc3c59))

## What is the current behavior?

Session replay is disabled in every environment, and no recordings
exist. This is about what a recording *would* contain if it were ever
switched on: charting a query result would put the customer's own column
names into it.

`ChartContainer` writes every chart config key into a `<style>` element
as `--color-<key>`. rrweb records `<style>` text verbatim:

```js
u = "STYLE" === parentTagName || void 0
h = "SCRIPT" === parentTagName || void 0
!u && !h && o && r && (o = maskTextFn ? maskTextFn(o, parent) : o.replace(/\S/g, "*"))
```

The `!u` guard means `maskTextFn` never sees stylesheet text. It is a
text node, so `maskAttributeFn` does not see it either. CSS written into
the DOM is a channel no masking hook reaches.

`QueryResultChart` keyed its config by the column names picked for the Y
axis, which come from the customer's own SQL results. With recording
enabled, a query charting a column named `customer_email` would produce
`--color-customer_email` in the captured DOM.

Linear [GROWTH-1229](https://linear.app/supabase/issue/GROWTH-1229).
#48818 masks the attribute channel. This channel is text, so that PR
does not reach it.

## What is the new behavior?

Y series are keyed by position (`series_0`, `series_1`), so no customer
string reaches the config keys.

The column name still goes through as `config[key].label`, which
`chart.tsx` renders into the tooltip and legend as text. Text nodes
outside `<style>` are masked by `maskReplayText`, so the name is safe
there and the chart stays readable.

The X column keeps its own name. Only config keys reach the `<style>`
and the X column is never one, so renaming it would buy nothing, and it
would cost the `timestamp` handling: `ChartBar` and `ChartLine` branch
on `xKey === 'timestamp'` to format tooltip dates and render the
date-range footer. Keeping the original name needs one guard, since an X
column literally named `series_0` would share a row key with the first Y
series. `xKeyFor` appends underscores until the two are distinct.

## Additional context

### Testing

Eleven tests. They assert the rendered `<style>` contains
`--color-series_0` and does not contain the column name, across both
chart types and both cumulative settings, plus the two-series case, the
`timestamp` column and the collision guard.

Three are verified to catch the defect they cover: the style-key
assertion fails against the unfixed component, the `timestamp` assertion
fails when the X key is pinned to a constant, and the `xKeyFor` cases
fail when the guard's body is removed.

`vitest run components/interfaces/Explorer` passes: 170 tests across 16
files.

The tooltip and legend path isn't asserted, because recharts doesn't
render either one at the 0x0 size jsdom gives the container. That the
label is what renders there comes from reading `chart.tsx`. It is
unverified at runtime.

### Remaining exposure

Every other `ChartContainer` caller passes literal keys
(`--color-error`, `--color-ok_count`), and `UnifiedLogs` filters a
static config by a fixed level set, so this was the only caller feeding
it customer strings.

`chart-bar.tsx:119-124` and `chart-line.tsx` still fall back to building
a config from whatever `dataKeys` they're given, so a future caller can
reintroduce this without touching `QueryResultChart`. A general guard
would have to live in `ChartContainer` or in the replay config.

CSSOM writes (`insertRule`, `replace`, `replaceSync`, adopted
stylesheets) also emit CSS outside both masking hooks. This PR does not
close that path.


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

- **Bug Fixes**
- Improved query result charts to preserve the source column name used
for the X-axis.
- Prevented X-axis names from conflicting with generated series
identifiers.
- Ensured bar and line charts consistently bind data to the correct
X-axis and series.
- Preserved timestamp-based chart behavior, including the date-range
footer.
- Chart series styling now uses stable positional identifiers, ensuring
colors remain correctly assigned across configured series.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-14 09:48:47 -07:00
Saxon Fletcher 66c6da82fe fix(studio): refine Explorer query surfaces and tab styling (#50249) 
Explorer query surfaces now use `bg-card` in light mode and `bg-muted`
in dark mode, including embedded notebook/chat queries and query tab
toolbars. Notebook Run buttons match query tabs, with `ml-1` spacing on
both. Fix doubled tab separators by applying the leading border only to
the first tab.

### How to test

1. Open Explorer with multiple query, notebook, and chat tabs. Switch,
reorder, and close tabs; confirm each separator stays one pixel wide.
2. In light and dark mode, inspect query tabs and embedded notebook/chat
queries: backgrounds should be card in light mode and muted in dark
mode, including their toolbars.
3. Compare notebook and query Run buttons: matching default styling and
spacing. Run a read-only query such as `select 1` in both and check
loading and results.
4. Check SQL Editor and Table Editor tab separators, since the tab
component is shared.

Validation: Prettier passed for all four changed files. Manual checks
above have not been run.


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

## Summary by CodeRabbit

- **Style**
- Refined notebook and query run button styling, including spacing and
tooltip placement.
- Improved query editor panel backgrounds across light and dark themes.
  - Updated tab border rendering for more consistent visual alignment.


<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-11 16:53:04 +08:00
Danny White 476d4a5851 refactor(ui): drop redundant Button variant="default" props (#50161) 
## What kind of change does this PR introduce?

Mechanical cleanup on top of the Button default-variant change (#50160).

## What is the current behavior?

Many callsites still pass `variant="default"` even though that is now
the component default.

## What is the new behavior?

Removes redundant static `variant="default"` from legacy `Button` and
`ButtonTooltip` callsites. Keeps explicit defaults where they document
the API:

- `button-default.tsx` and `button-sizes.tsx` demos
- `DocsButton`, which pins neutral styling at the wrapper boundary

## To test

Studio:

- [Auth → Rate
Limits](https://studio-staging-2s957kwc4-supabase.vercel.app/dashboard/project/_/auth/rate-limits):
dirty the form so Cancel appears; Cancel stays neutral, Save stays green
- [Project Settings → API
Keys](https://studio-staging-2s957kwc4-supabase.vercel.app/dashboard/project/_/settings/api-keys):
`DocsButton` in the header actions stays neutral

Design system:

- [Design system →
Button](https://design-system-git-dnywh-dc924ac1-supabase.vercel.app/design-system/docs/components/button):
`button-default` / `button-sizes` still show explicit default styling;
Primary (green) is restricted to the Primary section (and `asChild`)

WWW:

- [www → Brand
assets](https://zone-www-dot-com-git-dnywh-dc924ac1-supabase.vercel.app/brand-assets):
Download logo kit / Download button kit stay neutral
 2026-09-11 17:05:26 +10:00
Gildas GarciaandAlaister Young 737b8595f2 Update API types (#50234) 
## Problem

platform, v1 and v2 have been already completely migrated and introduced
some changes.

Some types have been renamed, some outputs and inputs updated.

## Solution

- Update the API types
- Fix the TS errors

## Update

Taking this over to unblock #50134, which needs the new scoped token
permission ids from the regenerated types.

- Merged `master`.
- Regenerated `api-v2.d.ts` from the production spec. The previous files
came from a local API that exposed a webhook events endpoint production
doesn't have yet. Production has since added standardized 400 error
responses on the v2 organization endpoints. `api-v1.d.ts` and
`platform.d.ts` already matched production.
- Fixed `verify-production-types`. It formatted the regenerated files in
a temp directory outside the repository, so Prettier fell back to its
defaults and the comparison could never match the committed files. It
now passes the repository config explicitly. `pnpm api:verify-types`
passes on this branch.
- Verified locally: `pnpm typecheck`, `pnpm api:verify-types`, Studio
unit tests.

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

* **Bug Fixes**
* Preserved descriptions when saving, sharing, moving, or unsharing
notebooks, reports, SQL snippets, and saved queries.
* Improved handling of empty or null values across notebook
descriptions, billing usage, pooler settings, and infrastructure fields.
* Improved read-replica connection handling, including read-only
connection strings.
* Updated storage configuration and capability handling to match current
settings.

* **API and Compatibility**
* Updated organization, project, storage, OAuth, billing, and
infrastructure data handling to match current API responses.
  * OAuth app creation and updates now require scopes.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
 2026-09-11 12:17:49 +08:00
Joshen Lim 8ac64a4349 Add copy notebook as markdown action (#50200) 
## Context

Adds a "Copy as Markdown" CTA for notebooks
<img width="265" height="198" alt="image"
src="https://github.com/user-attachments/assets/5eccf36e-24ea-4d2f-b1cf-72d5353b70a2"
/>

Query cell titles will be rendered as h3 tags and labelled either
Postgres or Logs - Clickhouse (with time range)
The query content will then be rendered as triple backticks with `sql`
e.g `
```sql...```
`

Query results will be copied to markdown if the query has been run, will otherwise be omitted
Also, if the query was updated (e.g content, source, etc) after it was run (as the result is hence stale), result will also be omitted
e.g:
| Notebook | Markdown |
| --- | --- |
| <img width="1291" height="630" alt="image" src="https://github.com/user-attachments/assets/c49f23e5-c70b-46dd-a298-6e1a90cd30d7" /> | <img width="731" height="536" alt="image" src="https://github.com/user-attachments/assets/4bbe3041-bd8e-42d3-86d2-1691e7a6bc7b" /> |
| <img width="1220" height="832" alt="image" src="https://github.com/user-attachments/assets/67de523a-18f7-4f1b-b764-7f0f3152f9e7" /> | <img width="757" height="803" alt="image" src="https://github.com/user-attachments/assets/d217504b-bee6-4088-9049-87ff647b9bc7" /> |



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

* **New Features**
  * Added Markdown export for notebook queries, results, errors, and time ranges.
  * Added error notifications when copying notebook content fails.

* **Bug Fixes**
  * Prevented stale query results after relevant source or time-range changes.
  * Improved Markdown export for queries containing backticks.
  * Escaped backslashes, pipes, and line breaks in Markdown tables.

* **Style**
  * Adjusted spacing for empty query-result messages.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-11 11:25:22 +08:00
Joshen Lim 7c681da0d2 Explorer home to run query in query tab if input in chat form is a sql query (#50204) 
### Context

As per PR title - figured this might be a nice convenience. Submitting a
SQL query in the chat form on the explorer home page will open the query
in a query tab and run it

<img width="854" height="632" alt="image"
src="https://github.com/user-attachments/assets/57dc7538-74b5-4801-a7ed-83c1cfaf123f"
/>
<img width="872" height="519" alt="image"
src="https://github.com/user-attachments/assets/597ce0eb-76d4-4f12-83db-20b628c03904"
/>

### To test
- [ ] Run a couple of SQL statements in the home tab - should open it in
query tab and run it
- [ ] Run a couple of non-SQL statements in the home tab, should default
to opening in a chat tab

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

## Summary by CodeRabbit

- **New Features**
- SQL statements submitted from the Explorer home screen now open in a
query tab and run automatically.
  - Natural-language prompts continue to open in the chat experience.
- Queries restored from drafts can automatically run once the editor is
ready.

- **Bug Fixes**
- Improved recognition of SQL with leading whitespace, comments, and
common statement formats while avoiding misclassification of
conversational prompts.
- Draft-based auto-run behavior now waits until the query editor is
ready.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-11 11:25:08 +08:00
Danny White e57aae3c83 feat(design-system): document disabled controls and add focusableWhenDisabled (#50068) 
## What kind of change does this PR introduce?

Docs update, with supporting `ui` and Studio changes.

## What is the current behaviour?

Disabled buttons with tooltips use native `disabled`, which removes them
from the tab order. Keyboard users cannot focus the control or read the
tooltip explaining why an action is blocked.

The design system also lacked guidance on keeping disabled actions
discoverable and explaining why they are unavailable.

## What is the new behaviour?

- Adds a **Disabled controls** section to the accessibility docs, with
live examples for a focusable disabled button and visible page-level
context
- Adds `focusableWhenDisabled` to `Button`, keeping `disabled` as the
semantic state while using `aria-disabled`, retaining keyboard focus,
and guarding click handlers
- Updates Studio's `ButtonTooltip` to make disabled buttons with tooltip
text focusable automatically

Also includes earlier design-system fixes on this branch:

- Centralises `BASE_PATH` with a `/design-system` fallback so asset URLs
work without a local `.env` file
- Fixes sidebar hover and active tokens in design-system and ui-library,
aligned with Studio's `InnerSideMenuItem`

## To test

**Design system**

1. Open the [accessibility
preview](https://design-system-git-fix-design-system-docs-and-nav-fixes-supabase.vercel.app/design-system/docs/accessibility)
2. Scroll to **Disabled controls**
3. Tab to the **disabled-focusable** example. Confirm the button remains
focusable, looks disabled, and shows its tooltip on focus
4. Confirm the **disabled-unavailable-with-notice** example shows the
admonition and focusable disabled button pattern

**Studio (optional, requires a High Availability project)**

5. Go to Settings → General → **Pause project**. Tab to the button and
confirm it remains focusable, looks disabled, and shows the HA tooltip
on focus
6. Go to Database → Backups and find **Restore** on a scheduled backup
row. Confirm the same behaviour
 2026-09-11 01:52:21 +00:00
Alaister YoungAlaister YoungIvan Vasilov
 		1966209483 chore(deps): upgrade vitest to v5 (#49994) 
Upgrades Vitest from 4.1.4 to 5.0.0 across the monorepo, fixes the
handful of things v5 turned into hard errors, and drops the
`vi.clearAllMocks()` boilerplate that v5's `clearMocks` default makes
redundant.

**Changed:**
- `vitest`, `@vitest/ui`, `@vitest/coverage-v8` 4.1.4 → 5.0.0 (catalog)
- `vi.mock` calls that lived inside `beforeAll`/`beforeEach`/test bodies
moved to module scope (v5 throws on nested calls). Affects the Studio
and docs setup files and four Studio tests.
- `detectBrowser` test restores `navigator` via `vi.unstubAllGlobals()`
instead of assigning `global.navigator`, which now reaches jsdom's
getter-only property.
- `RowEditor.utils.test.ts` restores its `JSON.stringify` spy. It used
to leak a throwing mock for the rest of the file, which v5's coverage
provider now trips over. A later test in the same file had been
asserting the leak's side effect (valid JSON reported as invalid) and
now asserts the correct behavior.
- `@testing-library/jest-dom` 6.6 → 7.0.1. Its vitest type augmentation
resolves through a peer now, so it lands on each package's own `vitest`
instead of whichever copy pnpm hoisted. Fixes `toBeInTheDocument` type
errors in dev-tools after the reshuffle.
- `@testing-library/react` 16.0.0 → 16.3.3 for the React 19 peer range.
- `vite: catalog:` added to dev-tools, www, and common. Without it they
resolved a newer vite than the catalog pin, which forked a second vitest
instance in the lockfile. There's now one.
- ai-commands custom matcher types use v5's `Matchers<R, T>` form.
- 110 test files: `vi.clearAllMocks()` removed from
`beforeEach`/`afterEach` hooks, along with hooks that only did that and
the imports they left unused. Calls that also reset/restore mocks are
untouched. Second commit, mechanical.

**Added:**
- `.vitest/` to the root gitignore (v5 writes JSON/JUnit/HTML reporter
output there)

**Removed:**
- `vite-tsconfig-paths` catalog entry and deps. Vitest 5 resolves
tsconfig paths itself.

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

**Perf** (local, medians of 3 runs, same machine):

| Suite | v4.1.4 | v5.0.0 |
|---|---|---|
| studio | 144.1s | 141.7s (-2%) |
| studio `--coverage` | 156.9s | 146.4s (-7%) |
| ui-patterns | 6.27s | 5.07s (-19%) |
| ui `--coverage` | 3.35s | 2.14s (-36%) |
| www | 0.89s | 0.47s (-47%) |

Studio is dominated by jsdom environment setup per file, which v5
doesn't change. `vitest doctor` recommends keeping the current pool
config: the vm pools and `isolate: false` all break tests.

## To test

- `pnpm install --frozen-lockfile` succeeds with no
`minimumReleaseAgeExclude` entry for vitest.
- CI: Studio unit tests, ui, ui-patterns, www, docs, and typecheck/lint
should all be green. The lint ratchet was checked locally: warning
counts on touched Studio files are identical to master.
- `pnpm test:studio` locally passes with coverage (588 files, 6240
tests).
- Open a Studio test that uses `toBeInTheDocument` in your editor and
confirm no type errors on jest-dom matchers, in Studio and in
`packages/dev-tools`.
- Known pre-existing failures unrelated to this PR: one dev-tools test
(`getEventCountBadge` capped pill) fails on master too.


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

## Tests
- Improved test coverage for JSON validation and mobile navigation
behavior.
- Updated test setup, cleanup, environment configuration, and matcher
support across application and shared package suites.
- Removed obsolete coverage for alternate MCP transport selection.

## Chores
- Streamlined TypeScript path resolution and Vitest reporter output
handling.
- Updated testing libraries and Vitest tooling across documentation,
Studio, website, and shared packages.
- Added Vitest reporter output to ignored files.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
 2026-09-10 16:45:54 +08:00
Saxon FletcherandJoshen Lim d9742d707f chore(studio): refine Explorer sidebar breadcrumbs (#50188) 
Moves Explorer’s back navigation and create actions into a reusable
sidebar breadcrumb header. Reduces product-menu headings globally to
`text-sm` and keeps breadcrumb links free of padding, borders, and
backgrounds.

### How to test

1. Open `/project/<ref>/explorer` and confirm the header shows Explorer
and the SQL Editor switch action.
2. Open Notebooks and Chats. Confirm the header shows `Explorer >
Notebooks/Chats` and the corresponding create action works.
3. Return using the Explorer breadcrumb with a click or Tab + Enter.
Check that the label stays aligned and has no hover background.
4. Open another product, such as Database, and confirm its sidebar
heading uses the smaller font size.

5. At a mobile viewport, open the menu and repeat the notebook/chat
actions and back navigation without closing the sheet. Confirm the
header stays current and disappears when returning to the main menu or
opening another product.

Validation: 18 focused tests, typecheck, formatting, and lint ratchet
passed.


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

- **New Features**
- Added a shared Explorer sidebar header with breadcrumbs and contextual
actions for creating notebooks and chats.
- Added keyboard-accessible navigation between the Explorer overview and
notebook or chat sections.
- Added support for customized product menu headers across project
layouts.

- **Improvements**
- Centralized Explorer navigation and actions in the shared sidebar
layout.
- Improved mobile menu updates when navigating between Explorer
resources.
- Refined Explorer home layout and drag-handle behavior across screen
sizes.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
 2026-09-10 15:38:19 +08:00
Saxon Fletcher c33d255eba chore(studio): refine assistant empty states (#50191) 
<img width="1062" height="712" alt="image"
src="https://github.com/user-attachments/assets/44c82e00-94b4-405a-b2ef-cbc08401c4db"
/>

<img width="1583" height="962" alt="image"
src="https://github.com/user-attachments/assets/b19b9fd8-24b1-48d6-8b31-11fba9911b9a"
/>


## What kind of change does this PR introduce?
UI refinement.

## What is the current behavior?
The assistant sidebar and Explorer chat use different empty states.

## What is the new behavior?
Share a centered empty state with chat-focused prompts, use-case icons,
and a “Use your own agent” footer. Simplify prompt cards and align
Explorer Home styling.

## Additional context
Studio typecheck, targeted ESLint, and Prettier pass. E2E selectors
updated; browser verification pending. Local build stopped after showing
no progress during compilation.

I have read CONTRIBUTING.md.

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

## Summary by CodeRabbit

* **New Features**
* Redesigned Explorer and AI Assistant onboarding with project-focused
chat prompts.
* Added personalized chat template icons and updated suggested actions.
* Added an option to connect and use an external agent through Claude,
OpenAI, or Cursor.
  * Improved chat composer placement and empty-chat guidance.
* **Style**
* Action cards now support layouts without descriptions and adjust
alignment automatically.
* **Tests**
  * Updated end-to-end coverage for the revised assistant interface.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-10 13:39:21 +08:00
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
Joshen Lim 246bd9acbf Adjust vertical space for explorer notebook query cells (#50169) 
## Context

As per PR title - just adjusts the vertical height for a couple of empty
states in QueryCells for Notebooks

### Query not run yet

| Before | After |
| -------- | -------- |
| <img width="1072" height="350" alt="image"
src="https://github.com/user-attachments/assets/cbf14619-ac01-4082-9732-41737a028c40"
/> | <img width="1083" height="313" alt="image"
src="https://github.com/user-attachments/assets/1144eebf-7293-4be4-adaf-af2dc21bc40f"
/> |
| <img width="1083" height="292" alt="image"
src="https://github.com/user-attachments/assets/511754f8-5128-41b7-a4c8-542fb93b77e5"
/> | <img width="1100" height="163" alt="image"
src="https://github.com/user-attachments/assets/53de5b4a-8284-406a-a8ae-4602f61f3ca3"
/> |

### Chart empty state

| Before | After |
| -------- | -------- |
| <img width="1079" height="291" alt="image"
src="https://github.com/user-attachments/assets/068fe573-1f65-4efc-831c-db2ddda2be1a"
/> | <img width="1078" height="225" alt="image"
src="https://github.com/user-attachments/assets/b9d58d8f-162d-463d-90e2-fbf3470c6db8"
/> |



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

- **Style**
- Improved query editor layout by reducing unnecessary spacing and
ensuring result areas fit more consistently within available space.
- Refined chart empty states with cleaner borders, compact spacing, and
improved vertical sizing.
  - Updated query error presentation with more compact padding.
- Simplified result panel sizing for a more consistent viewing
experience.

- **User Experience**
- Added a play icon alongside the “Run the query to see results” prompt
when no results are available.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-09 18:45:12 +08:00
Joshen Lim e267b05ee9 Add horizontal padding for notebook home tab (#50168) 
## Context

Theres no padding on smaller viewports - so the main content looks
squished

### Before
<img width="1674" height="1882" alt="image"
src="https://github.com/user-attachments/assets/e0b1fb05-d853-40db-8e06-51dec9a9376a"
/>


### After
<img width="947" height="981" alt="image"
src="https://github.com/user-attachments/assets/28c6dab4-0c12-4851-aa40-c65d60797463"
/>


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

## Summary by CodeRabbit

* **Style**
* Improved horizontal spacing on the Explorer home screen for a more
balanced layout.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-09 18:33:50 +08:00
Joshen Lim 86f7d245f8 Use green for notebook status indicator if new (#50167) 
### Context

As per PR title - just a tiny adjustment to use green for the status
indicator if the notebook is new and yet to persist in the DB to make it
visually different for notebooks that are already in the DB but have
unsaved changes

<img width="372" height="80" alt="image"
src="https://github.com/user-attachments/assets/5ef863b1-0e7a-4b00-baab-dc76b3cf9b47"
/>


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

## Summary by CodeRabbit

- **Bug Fixes**
- Updated the notebook status indicator to use the brand color for new
notebooks.
- Improved visual distinction between new notebook states and
warning-related statuses.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-09 18:30:24 +08:00
Joshen Lim a1686025b6 Joshenlim/fe 4291 keep unsaved notebooks accessible after page refresh (#49673) 
## Context

Changes here adds a "Draft" state for notebooks with a new
`notebook-drafts` store - similar to how we handle query tabs in the
explorer.
This implies that if a user refreshes the tab while there's unsaved
changes to notebooks, the changes can be persisted locally and the user
will be able to continue from where they left off.

This also implies that If you create a new notebook (OR open an existing
notebook and make some changes) and refresh the browser, we no longer
show the native browser confirmation dialog about discarding changes.

We also reuse the existing confirmation dialog when saving a notebook if
its draft has diverged from the server side content - just updated the
language to be more generic rather than saying that the Assistant made
changes
<img width="429" height="238" alt="image"
src="https://github.com/user-attachments/assets/5c392aed-1633-4428-8060-28f495a01f04"
/>

Also fixes an unrelated issue - renaming a notebook should mark the
notebook as having unsaved changes (with the orange indicator)

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

## Summary by CodeRabbit

* **New Features**
* Unsaved notebook edits are saved locally and restored when reopening
Studio.
* Drafts are scoped by project and protected from server changes through
conflict detection.
* Notebook tabs indicate unsaved changes, including drafts from unsaved
notebooks.
* **Bug Fixes**
* Closing a tab with local edits prompts for confirmation and removes
its saved draft.
  * Notebook save state reflects the server-confirmed update time.
  * Conflict messages clearly describe changes made on the server.
* **Style**
  * Improved keyboard focus behavior for tab controls.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-09 17:17:25 +08:00
Saxon FletcherandCursor c365549ab8 feat(studio): resizable query/results split in the Explorer query editor (#49984) 
## What's changed

Stack 1/2 (next: https://github.com/supabase/supabase/pull/49985).

- `QueryEditor` (`viewport` variant, e.g. Explorer query tabs and
assistant query cells) now renders the SQL editor and results in a
vertical `ResizablePanelGroup` instead of a fixed `h-[45%]` editor. The
split is persisted under `LOCAL_STORAGE_KEYS.EXPLORER_QUERY_SPLIT_SIZE`.
The `embedded` variant (notebooks) is unchanged.
- Editor and results JSX are extracted into `querySql` / `queryResults`
so the two layouts share one definition.
- `isRunDisabled` now hides the toolbar run button instead of rendering
it disabled (editor shortcuts are still disabled). `AssistantQueryCell`
only sets it while an approval is pending, so the run button comes back
once the tool call has resolved.
- `QueryRunButton`: "Run selected" → "Run selected SQL", plain
`DropdownMenuItem` instead of `DropdownMenuItemTooltip`.
- `QueryResultError` no longer paints its own table-header background.

## How to test

1. Explorer → open a query tab. Drag the handle between the editor and
results; reload — the split size is restored.
2. Toggle "Hide query" / "Show query" — results fill the tab when the
editor is hidden.
3. Open a notebook — cells still render with the fixed-height editor (no
resizable handle).
4. In the AI Assistant, ask for a query that needs approval. While the
approval footer is shown there is no run button in the cell toolbar;
after "Run query" / "Skip", the run button appears and works.
5. `pnpm --filter studio exec vitest --run
components/interfaces/Explorer` passes.

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

- **User Interface**
- Query results now appear in a resizable vertical split view, allowing
users to adjust the space allocated to the editor and results.
- Updated query result styling provides a cleaner background
presentation.
  - Query result panels are better centered when appropriate.

- **Query Execution**
  - The menu option is now labeled **“Run selected SQL.”**
  - The run button is hidden when query execution is unavailable.

- **AI Assistant**
- Query execution is disabled only during the relevant confirmation
states.
  - Assistant query panels now use a wider, full-width layout.
  - Debugging a query now updates the assistant’s initial input.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-09-07 15:42:07 +10:00
Charis a4d925c230 fix(studio): write debug prompt into current chat when assistant is already open (#49911) 
## Summary

* Query blocks embedded inside an active assistant conversation
(`AssistantQueryCell`) reused the same "Debug with Assistant" handler as
standalone query blocks (Explorer Query tab, notebook cells), which
always opens a brand-new chat and navigates away.
* Clicking Debug on a block that's already part of the open conversation
silently abandoned it for an unrelated new chat, which read as the
button doing nothing.
* Added an optional `onDebug` override threaded through `QueryEditor` →
`QueryResultRenderer` → `QueryResultError`; `AssistantQueryCell` now
uses it to write the debug prompt into the currently active chat's
composer (`ai-assistant-state`'s new `setInitialInput`) instead of
creating a new chat. Standalone query blocks keep the existing "open a
new chat" behavior since no `onDebug` override is passed there.
* `ExplorerChatTab` now wires `composerContext` into `AssistantChat` (it
wasn't before), so the pre-filled prompt actually reaches the visible
textarea on the Explorer chat route.

Fixes
[FE-4319](https://linear.app/supabase/issue/FE-4319/debug-with-ai-assistant-does-seemingly-nothing-if-query-is-already).

## Test plan

- [X] `pnpm vitest run` on `QueryResultError.test.tsx` /
`QueryResultError.selfhosted.test.tsx` / `ExplorerChatTab.test.tsx` /
`AssistantQueryCell.utils.test.ts` — all pass, including new test
asserting `onDebug` is called instead of `createChat`.
- [X] `pnpm exec eslint` on touched files — clean (only pre-existing
unrelated warnings).
- [X] Manual check: run a query inside an assistant chat that errors,
click "Debug with Assistant" on that block, confirm the debug prompt
appears in the current chat's composer rather than opening a new chat.

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

## Summary by CodeRabbit

* **New Features**
* Added a “Debug with Assistant” workflow that sends SQL error details
to the AI Assistant as its initial input.
* Preserved the existing behavior of opening a new debug chat when the
Assistant panel is unavailable.

* **Tests**
* Added coverage confirming that debugging invokes the Assistant
callback without creating an additional chat.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-04 09:26:18 -04: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
Saxon FletcherandCursor 9b17ce8f2c chore(studio): default assistant to GPT-5.6 Luna (#49749) 
## 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?

Feature / chore: hide assistant model selection in the UI and default
chats to GPT-5.6 Luna.

## What is the current behavior?

The assistant composer exposes a model picker. Paid orgs default to
`gpt-5.3-codex`; everyone else defaults to `gpt-5.4-nano`.

## What is the new behavior?

- The model picker is hidden in the assistant composer and Explorer
home.
- Chats default to `gpt-5.6-luna` with `reasoningEffort: medium`.
- Model selection plumbing is kept (registry, entitlements, `setModel`,
generate-v4 request body) so a requested model can still be honored when
provided.
- Other completion endpoints still use `gpt-5.4-nano`.

## Additional context

Model selector UI can be re-enabled by passing `selectedModel` /
`onSelectModel` to `AssistantChatForm`.


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

## Summary by CodeRabbit

* **New Features**
* Added support for the GPT-5.6 Luna model with medium reasoning
capability.
  * Made GPT-5.6 Luna the default assistant model.
* **Improvements**
* Simplified assistant chat by removing model selection from the primary
chat experience.
  * Updated model fallback behavior to use the standard assistant model.
* Chat forms can now optionally display model selection when configured.
* **Tests**
* Updated model coverage and assistant chat tests for the new defaults
and behavior.

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

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-09-02 10:24:37 +10:00
Charis 17d15ee1e2 fix(studio): confirm destructive notebook queries (#49658) 
## What

- add a second notebook-level confirmation for destructive SQL before
forced batch execution
- reuse the shared SQL safety detector for stored and live cell SQL
- cover destructive confirmation, cancellation, non-destructive
mutations, and live SQL

## Testing

- pnpm --filter studio exec vitest run
components/interfaces/Explorer/ExplorerNotebookTab.utils.test.ts
components/interfaces/Explorer/__tests__/ExplorerNotebookTab.test.tsx
--coverage.enabled=false
- pnpm --filter studio exec eslint
components/interfaces/Explorer/ExplorerNotebookTab.tsx
components/interfaces/Explorer/ExplorerNotebookTab.utils.ts
apps/studio/components/interfaces/Explorer/ExplorerNotebookTab.utils.test.ts
apps/studio/components/interfaces/Explorer/__tests__/ExplorerNotebookTab.test.tsx

Closes FE-4284

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

* **Improvements**
* Simplified notebook execution into a single confirmation step for
mutating queries.
* Destructive queries, including operations such as `DROP` or
`TRUNCATE`, are clearly marked with a **Destructive** badge.
* The confirmation dialog lists affected queries and lets you proceed or
cancel.
* Detection uses the latest SQL from the editor and ignores destructive
keywords in comments.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-01 09:53:47 -04:00
Charis 8db7368ccf feat(studio): clarify quick query as temporary space (#49695) 
## 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?

Feature

## What is the current behavior?

Standalone queries in the Explorer "Quick Query" surface have editable
titles (defaulting to "Untitled query") without clear indication that
they are temporary and not saved, similar to the old SQL Editor snippet
model.

## What is the new behavior?

The Quick Query tab now clearly indicates that standalone queries are
temporary. The title is no longer editable and displays "Temporary space
for one-off queries" as static muted italic text. The default query name
has been changed from "Untitled query" to "Quick query" for clarity.

## Additional context

Resolves FE-4297. Notebook cells (variant === 'embedded') remain
unchanged with editable titles.

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

* **UI Improvements**
* Renamed new one-off queries from **“Quick query”** to **“Run SQL”**
when no title is provided.
* Updated viewport query editor toolbars to display the fixed **“Run
SQL”** label.
  * Preserved editable titles for embedded query editors.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-01 09:13:33 -04:00
Charis b278b1ec8a fix(studio): Debug with Assistant and Copy prompt work (#49690) 
## Summary

* Resolved hanging buttons in Explorer's QueryResultError panel that
were wired to stub no-ops (`buildPrompt={() => ''}`,
`onOpenAssistant={() => {}}`).
* "Debug with Assistant" now opens a new chat seeded with a real prompt
combining the SQL query and error context using existing
`buildDebugPromptText` util and `useCreateChat` hook.
* "Copy prompt" now copies the same real debug prompt text to clipboard.
* Threaded `sql` and query `source` props down through `QueryEditor` →
`QueryResultRenderer` → `QueryResultError` while keeping them optional
for backward compatibility with other callers like
`AssistantNotebookPreviewCell`.

## Test plan

- [X] Run `pnpm typecheck` — passes
- [X] Run `pnpm lint --filter=studio` — passes
- [X] Run `pnpm test:studio --run
apps/studio/components/interfaces/Explorer/QueryEditor` — Explorer
vitest suite (99 tests across 13 files) passes with no regressions
- [X] Manually verify in Explorer: trigger an ad-hoc SQL query that
fails, confirm "Debug with Assistant" opens a new chat with the error
prompt seeded, and "Copy prompt" copies the prompt to clipboard

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

- **New Features**
- Added “Debug with Assistant” to query errors using the submitted SQL
and error details.
- Added an option to copy the debugging prompt for easier
troubleshooting.
- Assistant actions are hidden when query details are unavailable or
restricted.

- **Bug Fixes**
- Ensured query errors reference the SQL that produced them, rather than
later editor changes.

- **Tests**
- Added coverage for assistant debugging, prompt copying, conditional
visibility, and self-hosted behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-09-01 08:27:38 -04:00
Joshen Lim c0409b38b4 joshenlim/fe 4285 explorer missing prettify in query toolbar actions (#49675) 
## Context

Adds the prettify SQL CTA to Explorer Notebook and Query Tab

Query tab: Prettify CTA is within the dropdown menu here
<img width="1092" height="272" alt="image"
src="https://github.com/user-attachments/assets/3b4f3514-69cc-4c24-a127-da1555ee905e"
/>

Query cell: Prettify CTA sits between the buttons in the toolbar
<img width="1085" height="306" alt="image"
src="https://github.com/user-attachments/assets/e503ad6c-5dda-4c2b-a824-8c1049d5e9fb"
/>

Also added shortcut tooltip for the run button
<img width="183" height="103" alt="image"
src="https://github.com/user-attachments/assets/729055b8-8e2c-4cf7-8f2e-c5726e828644"
/>


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

* **New Features**
* Added SQL prettification to Explorer query editors through the
overflow menu, query toolbar, editor action, and keyboard shortcut.
* Displays the configured formatting shortcut alongside the prettify
action.
  * Prevents formatting while an AI proposal is pending.
  * Added a keyboard shortcut hint to the query run action.
  * Enhanced toolbar tooltips to support richer formatted content.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-08-31 23:44:42 +09:00
Saxon FletcherandCursor 78bd0e066b chore(studio): align query results grid typography with table editor (#49752) 
## Summary
- Match Explorer/SQL query results table typography to Table Editor:
sans cells at `text-grid`, headers at `text-xs` / `text-foreground`
- Reuse Table Editor `NullValue` for null cells so empty results read
the same way
- When the Explorer feature preview is on, the inline editor "expand"
action opens a new Explorer query tab (same pattern as the assistant)
instead of the SQL Editor

## Test plan
- [ ] Run a query in Explorer and confirm header/cell font, size, and
color match Table Editor
- [ ] Confirm `NULL` cells use the same faded treatment as Table Editor
- [ ] Check the SQL Editor results pane (shared `DataGridResults`) still
looks correct
- [ ] With Explorer feature preview on, expand the inline editor and
confirm it creates an Explorer query tab with the current SQL, then
closes the panel
- [ ] With Explorer feature preview off, expand the inline editor and
confirm it still opens a SQL Editor snippet

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

## Summary by CodeRabbit

## New Features
- Added the ability to open SQL directly in Explorer from the editor
panel.
- Run SQL actions now create a query draft and navigate to the query
tab.

## Style
- Improved data grid readability with clearer text, left-aligned
headers, truncated labels, and selectable content.
- Added dedicated styling for null values.
- Updated empty-results messaging with standard sans-serif text.

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

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-08-31 18:38:30 +10:00
Saxon FletcherandCursor 516ef0320f chore(studio): refine Explorer toolbar, chat, and home actions (#49748) 
## Summary
- Unify Explorer toolbar actions: 16px / 2px Lucide icons,
`text-tertiary-foreground` that becomes `text-foreground` on hover
(Analyze icon goes brand on hover).
- Soften chat scroll edges with top/bottom fades, and align the composer
width with the conversation content (`px-7` + `max-w-3xl`).
- Put **Run SQL** first on Explorer home, and rename the tab-bar new-tab
item from “New query” to **Run SQL** so it matches.

## Test plan
- [ ] Open Explorer and check query, notebook, and chat toolbars: icons
are 16px, muted by default, and go to foreground on hover. Analyze on a
notebook with cells: icon goes brand on hover; empty notebook still
disables Analyze.
- [ ] Open a query tab: source menu, result settings, save, and
more-options all look like the other toolbar actions (including while
the dropdown is open).
- [ ] Open Explorer chat: scroll a long thread and confirm top/bottom
fades sit on the chat surface. Composer lines up with message width (not
inset extra).
- [ ] On Explorer home, **Run SQL** is the first card; clicking it still
opens a SQL tab.
- [ ] From the tab bar **+** menu, the first item is **Run SQL** (not
“New query”); it still creates a SQL tab. **New notebook** and **New
chat** still work.

Made with [Cursor](https://cursor.com)

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

* **UI Improvements**
* Standardized Explorer toolbar icons for consistent sizing and visual
weight.
* Updated toolbar action colors, hover states, and keyboard-focus
visibility.
  * Reordered Explorer home actions so “Run SQL” appears first.
  * Renamed “New query” to “Run SQL” in the new-tab menu.
  * Improved query source and settings toolbar controls.
* Refined AI assistant chat layout with centered content, decorative
gradients, and improved focus styling.
  * Added hover styling for the notebook Analyze action.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
 2026-08-31 18:36:01 +10:00
Joshen Lim f1e0808223 Disable analyze button for notebooks if notebook is empty (#49674) 
## Context

As per PR title - just disables the analyze button if the notebook is
empty

<img width="1077" height="323" alt="image"
src="https://github.com/user-attachments/assets/f8da8bd4-eb0c-43ae-85c7-b60c1c7dcfed"
/>


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

## Summary by CodeRabbit

* **Bug Fixes**
  * Disabled the Analyze action for empty notebooks.
* Added guidance prompting users to add a cell before starting analysis.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-08-28 09:47:36 -04:00
Joshen Lim c4fe153fd8 Joshenlim/fe 4290 add save to notebook button in query tabs (#49667) 
## Context

Adds a "Save" action for query tabs in the explorer, which opts for 2
options to either add to an existing notebook, or create a new notebook.
Both of these actions just opens the notebook in a new tab with unsaved
changes - the changes will only be persisted in the DB when the user
hits "Save" on the notebook.

For adding to an existing notebook, the snippet will be appended to the
bottom of the notebook - UI will scroll to the bottom after navigating
to the notebook.
<img width="469" height="368" alt="image"
src="https://github.com/user-attachments/assets/19d16940-89e2-4d10-b71e-8d501f749668"
/>
 2026-08-28 08:21:16 -04:00
Joshen Lim 8d59e69da4 Add support for running only selected query in QueryEditor (#49651) 
## Context

As per PR title - this behaviour currently exists in the SQL Editor so
just bringing it over to the Explorer, applies to both QueryTab and
QueryCell since they use the same QueryEditor component

"Run" button also updates to "Run selected" for clarity when a specific
portion of the code editor is selected

<img width="1387" height="958" alt="image"
src="https://github.com/user-attachments/assets/7e652951-3c07-4f8d-851b-bb9219d0c1f2"
/>


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

* **New Features**
* Run only the selected SQL when text is highlighted in the query
editor.
  * Run the full query when no text is selected.
  * Updated the run button label and tooltip to reflect the action.

* **Bug Fixes**
  * Improved query execution for empty or collapsed selections.
  * Corrected selection state when reopening the query editor.

* **Tests**
* Added coverage for selected-text, full-query, and editor reopening
scenarios.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-08-28 12:49:35 +08: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
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
CharisandJoshen Lim 40d9a2e929 fix(studio): invalidate notebook cache after assistant delete (#49496) 
Stacked on supabase/supabase#49415.

## Summary

- collect completed assistant delete_notebook tool calls as deleted
cache effects
- evict deleted notebooks from the React Query cache and notebook state
- cover collector, cache eviction, and the open-tab Notebook not found
state

## Verification

- pnpm test:studio -- notebook-cache-invalidation
ExplorerNotebookTab.assistant-cache-invalidation
- pnpm --filter studio typecheck
- touched-file ESLint and Prettier checks

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

## Summary by CodeRabbit

* **Bug Fixes**
* Improved notebook deletion handling so removed notebooks no longer
remain visible after deletion.
* Navigation and cached notebook data now update promptly when a
notebook is deleted.
* Attempting to access a deleted notebook now displays a clear “Notebook
not found” message.

* **Tests**
* Added coverage for notebook deletion, cache invalidation, navigation
updates, and the resulting not-found state.

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

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
 2026-08-25 14:41:56 +08:00
Charis de3a8799d6 fix(studio): invalidate notebook caches after assistant create/update (#49415) 
## Summary
- The assistant's `create_notebook`/`update_notebook` tools run entirely
server-side, so an open notebook tab's React Query cache and Valtio
store never learn a write happened — the tab keeps showing stale content
until a manual reload.
- Adds `collectNotebookCacheEffects`/`applyNotebookCacheEffects`
(`apps/studio/lib/ai/notebook-cache-invalidation.ts`), which scan
finished assistant messages for completed
`create_notebook`/`update_notebook` tool calls and evict the affected
notebook via `evictNotebookFromCaches`
(`apps/studio/data/content/notebooks/notebook-cache.ts`), plus
invalidate the nav list.
- Wired into `createChatInstance`'s `onFinish` in
`state/ai-assistant-state.tsx`, with per-chat dedupe so replayed history
isn't reprocessed.
- Removes the cache entry outright rather than invalidating it, since a
remounting `useNotebookQuery` would otherwise read the stale cached
value synchronously before its refetch lands.
- Explicitly skips eviction when the open tab has unsaved local edits,
so an assistant write can't silently discard them.

Related: [FE-4235](https://linear.app/supabase/issue/FE-4235)

**Out of scope:** this only protects the client-side cache/store from
being clobbered after the fact. Preventing the assistant's
`update_notebook` tool call itself from overwriting a user's unsaved
edits (a data-layer conflict, not a cache-freshness one) is tracked
separately in [FE-4255](https://linear.app/supabase/issue/FE-4255).

## Test plan
- [x] `pnpm test:studio -- notebook-cache notebook-cache-invalidation
ai-assistant-state.notebook-cache-invalidation
ExplorerNotebookTab.assistant-cache-invalidation
ExplorerNotebookTabCoordinator` — all passing
- [x] Reproduction-first component test
(`ExplorerNotebookTab.assistant-cache-invalidation.test.tsx`) — verified
it fails without the fix (stale content persists) and passes with it
- [x] Regression test for the dirty-notebook guard (an edited, unsaved
notebook is left untouched by an assistant write)
- [x] `pnpm typecheck --filter=studio` / `pnpm lint --filter=studio`
clean


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

* **Bug Fixes**
* Notebook changes made through the AI assistant now appear correctly in
open notebook tabs and after reopening them.
* Saved notebook caches are refreshed after completed create or update
actions, preventing stale content from being displayed.
  * Unsaved notebook changes are preserved during cache cleanup.
  * Closing a notebook tab now consistently removes its cached content.

* **Tests**
* Added coverage for assistant-driven updates, remounts, duplicate
actions, project context changes, and cache behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
 2026-08-25 14:15:27 +08:00