29 Commits
Author SHA1 Message Date
+8 e273d2b818 chore(studio): move Explorer SQL Editor link to sidebar footer (#50829)
## What

- Moves the temporary "Switch to SQL Editor" button out of the Explorer
sidebar header into a footer section ("Looking for snippets?") with a
short explanation and an **Open SQL Editor** button.
- Replaces the header slot with a menu for the Explorer startup
preference (**Start page** / **SQL query**), instead of linking out to
account preferences.

## How to test

1. Enable the Explorer feature preview and open
`/project/<ref>/explorer`.
2. **Header menu:** click the ⋮ button next to the Explorer title. Pick
**SQL query**, then check that **Explorer startup** on `/account/me`
shows the same value (and vice versa).
3. **Footer:** click **Open SQL Editor**. You should land in the SQL
Editor with the **Back to Explorer** button in its title bar.
4. Open **Notebooks** or **Chats** in the sidebar and check that the
menu and footer are hidden there, like the old button was.

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

* **New Features**
* Choose whether the Explorer opens to the Start page or SQL query from
the Explorer preferences menu. Your selection is saved and retained when
you reopen the menu.
  * Access the SQL Editor from the Explorer’s sidebar footer.
* Explorer preferences are available from the Explorer navigation
header.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
Co-authored-by: Tyler <dshukertjr@gmail.com>
Co-authored-by: Nik Richers <nrichers@gmail.com>
Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Jordi Enric <37541088+jordienr@users.noreply.github.com>
Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
Co-authored-by: Katerina Skroumpelou <mandarini@users.noreply.github.com>
Co-authored-by: Franek <franek@ferly.co.uk>
Co-authored-by: Franek Richardson <franek@supabase.io>
Co-authored-by: Michał Olszewski <35968924+charconstpointer@users.noreply.github.com>
Co-authored-by: Steven Eubank <47563310+smeubank@users.noreply.github.com>
Co-authored-by: Anthony Lio <lionnet.ant@gmail.com>
Co-authored-by: Joey Lei <6957385+leizerbeam@users.noreply.github.com>
Co-authored-by: Ali Waseem <waseema393@gmail.com>
Co-authored-by: Samir Ketema <6003000+samirketema@users.noreply.github.com>
Co-authored-by: K-Dog (Kevin) <k.grueneberg1994@gmail.com>
2026-09-25 14:31:46 +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
Joshen Lim 47592ace0f Set last visited page when going to preferences from explorer (#50691)
### Context

Resolves FE-4442

Tiny one to follow up from
https://github.com/supabase/supabase/pull/50670 - just sets the last
route before visiting account page from the explorer. Otherwise hitting
"back to dashboard" from account preferences brings you back to the
/projects page, rather than back to where you left off from the explorer

Also added a fix for scrolling to the corresponding section on the
preferences page when landing with a `#` in the URL - was bugging out as
there's some sections that render skeletons first (`ProfileInformation`
and `AccountIdentities`) which changes the height of the content, so the
native `#` behaviour doesn't land correctly.

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

## Summary by CodeRabbit

- **Bug Fixes**
- Updated the Preferences link to navigate directly to the account page.
- Preserved the current route when navigating to Preferences, improving
return navigation behavior.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-09-22 12:39:19 +08:00
Saxon Fletcher 509c797be1 fix(studio): keep Explorer Home tab selected (#50684)
## Problem

Selecting Explorer's Home tab immediately redirects back to the last
visited tab.

## Solution

Clear the saved Explorer destination before navigating Home. Explorer
owns this behavior through a generic `onTabChange` callback on the
shared tabs component.

## Review instructions

1. Open Explorer with the Home tab visible, then open a query, notebook,
or chat.
2. Click Home. Confirm it stays selected and the previous tab remains
open.
3. Switch back to the previous tab, then use Tab and arrow keys to
select Home. Confirm it stays selected.
4. Select a content tab, leave Explorer, and return. Confirm the last
visited tab still restores.

## Validation

Mouse and keyboard regression tests and existing restoration tests pass
(12 tests). Typecheck, targeted lint, and formatting checks pass.

## Checklist

- [x] I have read
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md).
- Docs authoring checks: not applicable; no docs changes.


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

## Summary by CodeRabbit

* **Bug Fixes**
* Explorer navigation now clears the previously saved Explorer
destination when returning to the home tab.
* Returning to Explorer home works consistently through both mouse and
keyboard navigation.
* **Tests**
* Added coverage for Explorer tab navigation, history cleanup, and
selected-tab state.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-09-22 11:34:31 +10:00
Charis 5b50701c11 fix(studio): surface link to Explorer start-page preference (#50670)
## Summary

* Added a persistent "Preferences" link (with Settings icon) pinned to
the bottom of the Explorer sidebar's root navigation
* Links to `/account/me#dashboard`, the existing Account settings anchor
that contains the Explorer startup preference dropdown
* Restructured sidebar layout to keep the footer link pinned while
content scrolls, addressing
[FE-4437](https://linear.app/supabase/issue/FE-4437/give-higher-visibility-to-changing-explorer-start-page-preference)
* The Home tab disappears when "SQL query" is selected as the start
page, so this visible link ensures users can always find and change
their preference

## Test plan

- [X] Typecheck passes on
`apps/studio/components/layouts/ExplorerLayout/ExplorerNavHome.tsx`
- [X] ESLint passes on the changed file
- [X] Manual verification of sidebar behavior and link functionality

Fixes
[FE-4437](https://linear.app/supabase/issue/FE-4437/give-higher-visibility-to-changing-explorer-start-page-preference):
"Give higher visibility to changing Explorer start page preference"

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

## Summary by CodeRabbit

- **New Features**
- Added a fixed **Preferences** link to the Explorer navigation footer.
- **UI Improvements**
- Updated Explorer navigation layout so resource links and recently
updated items scroll independently from the footer.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-09-21 16:01:00 -04:00
Joshen Lim 45381bf857 Double clicking items in explorer nav should persist their tabs (#50558)
## Context

As per PR title - this behaviour exists in the Table Editor and SQL
Editor but was just missing in the Explorer

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

* **New Features**
* Double-click chats or notebooks in the Explorer to pin their tabs as
permanent.
  * Pin recent chats and notebooks directly from the Home view.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-09-18 14:51:59 +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
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
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
Charis 9aaa753306 feat(studio): add telemetry for explorer/sql editor temporary switch buttons (#49898)
## Summary

Add PostHog event tracking for the two new buttons introduced in PR
supabase/supabase#49698 that allow users to temporarily switch between
the Explorer and SQL Editor:

* **Explorer button**: "Back to SQL Editor" button in the Explorer
sidebar title bar now fires `explorer_temp_access_sql_editor_clicked`
event
* **SQL Editor button**: "Back to Explorer" button in the SQL Editor
title bar (shown during temporary visits) now fires
`sql_editor_back_explorer_clicked` event

Both event interfaces follow the repo's telemetry-standards conventions,
carrying only `groups: TelemetryGroups` property with no additional
custom properties.

## Test plan

- [X] Verify `explorer_temp_access_sql_editor_clicked` event fires in
PostHog when clicking "Back to SQL Editor" button in Explorer
- [X] Verify `sql_editor_back_explorer_clicked` event fires in PostHog
when clicking "Back to Explorer" button in SQL Editor
- [X] Run typecheck: `pnpm typecheck` passes without errors
- [X] Run lint: `pnpm lint --filter=studio` passes

## Issue

Resolves
[FE-4213](https://linear.app/supabase/issue/FE-4213/explorer-set-up-telemetry-for-metrics-where-appropriate)

## Summary by CodeRabbit

* **Analytics**
  * Added tracking for navigation from the Explorer to the SQL Editor.
  * Added tracking for returning from the SQL Editor to the Explorer.
2026-09-02 09:07:06 -04:00
Charis 4b1f93bb99 feat(explorer): add path back to SQL Editor for snippet access (#49698)
## 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?

Users who have opted into the Explorer feature preview have no way back
to the SQL Editor from within Explorer, so they can't easily check their
old snippets.

## What is the new behavior?

- The Explorer sidebar title bar now has a button (using the same icon
as the SQL Editor/Explorer nav entry) that links to the SQL Editor, with
a tooltip explaining it's a temporary switch to access snippets.
- Clicking it marks the visit as temporary in localStorage, which
surfaces a matching "Back to Explorer" button in the SQL Editor title
bar. Clicking that button clears the temporary flag and returns to
Explorer.
- Fixed the product menu title bar badge slot to sit flush right instead
of directly next to the title text.

## Additional context

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

* **New Features**
  * Added a quick switch from the Explorer to the project’s SQL Editor.
* Added a “Back to Explorer” option in the SQL Editor when opened from
Explorer.
  * Added tooltips to clarify these navigation actions.
* Navigation state is preserved per project for a smoother return
experience.

* **UI Improvements**
* Improved product menu spacing and title truncation for better layout
handling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-09-01 09:07:54 -04: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 99ebfa733e Remove box shadow on explorer home tab button (#49530)
## Context

Explorer home tab has a box shadow when selected (more visible in light
mode) so this PR removes it

Before:
<img width="237" height="218" alt="image"
src="https://github.com/user-attachments/assets/17abd73b-2328-47ad-bb58-94cb5761dbb1"
/>

After:
<img width="242" height="208" alt="image"
src="https://github.com/user-attachments/assets/ef159dd7-61b9-4027-8b58-25229ae2283a"
/>


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

## Summary by CodeRabbit

* **Style**
* Updated the active Explorer home tab appearance to remove its default
shadow.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-25 23:28:39 +08:00
Joshen Lim 15234190f7 Show loader for notebook counts (#49529)
## Context

Shows a loader UI for the notebook count, otherwise it'll incorrectly
show `0` initially

<img width="292" height="117" alt="image"
src="https://github.com/user-attachments/assets/17e3841d-b60b-4869-a0f0-3b44feb461c0"
/>


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

## Summary by CodeRabbit

* **Bug Fixes**
* Added a loading indicator for notebook counts while data is being
retrieved.
* Prevented incomplete or unavailable counts from appearing before
loading finishes.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-25 23:27:30 +08:00
Joshen Lim 4778ae66e0 Flush notebook cache in valtio and react query whenever closing notebook tab (#49369)
## Context

Opting to flush the notebook cache within the Valtio store
(nootebook-store) and react query whenever we close the notebook tab in
the explorer.

Mainly to ensure that whenever we re-open the notebook again, the
notebook content isn't stale and we refetch the notebook content from
the API

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

## Summary by CodeRabbit

- **Bug Fixes**
- Closing a saved notebook tab now removes it from the session and
clears its cached content.
  - Notebooks with unsaved changes are preserved when their tabs close.

- **Tests**
  - Added coverage for saved and unsaved notebook tab cleanup behavior.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-21 15:27:53 +08:00
Joshen Lim 1d47a3190b Debounce notebook search (#49368)
## Context

Sets up debouncing for notebooks search in the explorer so that we're
not hammering the API when searching
<img width="281" height="178" alt="image"
src="https://github.com/user-attachments/assets/1fa2d633-7f7f-4891-87cc-aa90a5062bb7"
/>


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

## Summary by CodeRabbit

* **Bug Fixes**
* Improved notebook search responsiveness by delaying searches until 500
ms after typing stops.
  * Empty searches now update immediately.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-21 14:57:07 +08:00
Joshen LimandCharis 9a3500aad2 Set up infinite loading for notebooks (#49321)
## Context

Sets up infinite loading for notebooks with the `InfiniteListDefault`
component

Also adds the notebook and chats count on the explorer home nav
<img width="275" height="137" alt="image"
src="https://github.com/user-attachments/assets/c3f16e8f-f520-4107-a188-43b1abcca043"
/>


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

* **New Features**
  * Explorer navigation now displays accurate notebook and chat counts.
* Notebook lists support infinite scrolling, loading indicators, and
improved active-state styling.
  * Notebook navigation remains available as additional items load.

* **Bug Fixes**
* Corrected default markdown cell formatting by removing unintended
leading spaces from headings and notes.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Charis <26616127+charislam@users.noreply.github.com>
2026-08-21 11:15:26 +08:00
Joshen Lim 9738035fec Hook up recently updated list (#49296)
## Context

As per PR title: recently updated list just comprises of notebooks and
chats
Note: known API issue that save a notebook doesn't update its
`updated_at` value, so you'll notice that if you save a notebook it
doesn't move up the recently updated list

<img width="281" height="270" alt="image"
src="https://github.com/user-attachments/assets/f637a593-09a7-4df4-85b7-43637f04738d"
/>


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

* **New Features**
  * Added a home view displaying recently updated notebooks and chats.
  * Recent items are sorted by update time and limited to five entries.
  * Added relative timestamps in minutes, hours, or days.
* Chat entries open directly, while notebook entries link to their
explorer view.
  * Added an empty state when no recent items are available.

* **Bug Fixes**
  * Excluded unsupported chat types from recent-item results.
  * Improved handling of unavailable timestamps.

* **Tests**
* Added coverage for sorting, filtering, limits, and relative-time
formatting.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-21 00:02:53 +08:00
Joshen Lim 2893c783d5 Hook up APIs for Notebooks CRUD (#49254)
## Context

API changes are ready so hooking up the endpoints for full CRUD UX E2E
- Can create notebooks
- Can load notebooks
- Can delete notebooks
- Can update notebooks
2026-08-20 22:23:20 +08:00
Joshen Lim dde45ab06c Joshenlim/fe 4195 explorer queryeditor cmd k completion support (#49248)
## Context

Adds the inline AI completion functionality into Explorer QueryEditor,
similar to what we've got for the existing SQL editor
- Shifts the `ResizableAIWidget` and `InlineWidget` components out of
the SQL Editor folder into `components/ui/AiEditor` to be used by both
SQL Editor and Query Editor
- Consolidates the "proposal" logic that was initially set up for the
Clickhouse Migration functionality with this Inline AI stuff
- Also added the prompt into the proposal header (Refer to the
screenshots below)
- SQL Editor didn't have this - but figured this is useful as context
for the user

<img width="935" height="352" alt="image"
src="https://github.com/user-attachments/assets/3f71539a-dda1-4763-be08-a850bdc8aec6"
/>

Source selected: Database
<img width="922" height="357" alt="image"
src="https://github.com/user-attachments/assets/81e772e6-dcc9-440d-83db-49d0d487dd13"
/>

Source selected: Logs
<img width="920" height="345" alt="image"
src="https://github.com/user-attachments/assets/83f1dae3-cf62-4424-be42-b06e70cb366d"
/>


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

- **New Features**
- Added AI-assisted SQL generation with contextual prompts and
OS-specific guidance.
- Review generated SQL changes in a diff, then accept, reject, or cancel
suggestions.
- Added inline, resizable AI prompt controls with loading and submission
states.
  - Added the Ctrl/Cmd+Shift+K shortcut to run AI SQL generation.

- **Improvements**
  - Added options to disable query execution and run custom actions.
  - Renamed “Recent” to “Recently updated.”
  - Improved editor widget positioning and display behavior.
  - Added clearer error notifications when AI generation fails.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-20 14:05:38 +08:00
Joshen Lim 5d851f12ec Properly hook up browser tab label for explorer (#49240)
## Context

Very tiny one - just hooks up the browser tab label for explorer
properly

Browser tab should be the focused explorer tab, otherwise defaults to
'Explorer'
<img width="175" height="48" alt="image"
src="https://github.com/user-attachments/assets/fa6eef96-3222-4bf6-b929-993441970728"
/>


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

## Summary by CodeRabbit

- **Bug Fixes**
  - Browser titles now accurately reflect the active Explorer tab.
- Untitled tabs display “Untitled,” while views without an active
Explorer tab display “Explorer.”

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-19 15:49:15 +08:00
Saxon FletcherandClaude Opus 5 fd8d213135 feat: add Explorer chat discovery and controls (#49032)
<img width="1693" height="1038" alt="image"
src="https://github.com/user-attachments/assets/9ef52446-c517-4ea9-ada6-ac6dc57c8af4"
/>


## Summary

- add an Explorer-specific chat toolbar with rename, chat ID,
permission, and branching controls
- list searchable non-support chats in Explorer with reactive updates
and safe rehydrated-date sorting
- add chat creation entry points to Explorer home and navigation menus
- route chat recent items correctly and show chat icons across shared
tab surfaces
- make the assistant sidebar expand action open the active chat in
Explorer

This is PR 3 of 3 and is stacked on #49031. Review #48973 first, then
#49031, then this PR. Compared with its base, this PR contains only
discovery, toolbar, and cross-surface integration work.

## To Test
- visit /explorer
- Create a new chat either via home tab chat input OR the chats sidebar
- Validate chats show up in sidebar
- Validate chat conversation works
- Close the chat tab and open a chat via sidebar
- Change permission settings via the chat tab toolbar and verify it
persists


## Test plan

- `mise exec node@22 -- pnpm --dir apps/studio exec tsc --noEmit`
- focused Vitest suite: 4 files / 5 tests covering reactive chat lists,
navigation filtering and sorting, recent-item routing, and sidebar
handoff
- ESLint on changed TypeScript files
- Prettier check on changed source files


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

## Summary by CodeRabbit

- **New Features**
- Added chat creation from the Explorer home, navigation, and new-tab
menu.
- Added an Explorer chat toolbar with editable names, ID copying,
permissions, shortcuts, and metadata warnings.
- Added searchable chat history with sorting, active-chat highlighting,
and clear empty states.
  - Chats can now open directly in Explorer from the AI Assistant panel.
  - Recent items now link correctly to chats and notebooks.

- **Bug Fixes**
- Improved chat list updates after creation, deletion, and restored
sessions.
  - Added safer handling for chats without update timestamps.

- **Tests**
- Expanded coverage for chat navigation, creation, metadata warnings,
shortcuts, and recent-item links.

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

---------

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
2026-08-14 11:19:43 +10:00
Saxon Fletcher 75d16f360f feat(studio): add Explorer query tabs (#49038)
<img width="1693" height="1037" alt="image"
src="https://github.com/user-attachments/assets/51fdf618-f06e-45ca-bf30-e1307dfbb372"
/>


## Stack

Depends on #49041. Followed by #49028.

## Summary

- add a dedicated ad-hoc query tab type and route under Explorer
- connect query tabs to the shared `QueryEditor` through a `QueryTab`
lifecycle adapter
- add local query draft/result state and restore query tabs from their
routes
- confirm before closing populated local-only drafts and clean up their
state on close

## To test

1. Open Explorer, select **Run SQL**, enter `select 1`, and run the
query.
2. Rename the query, reload the page, then close the tab and confirm the
discard prompt appears.

## Why

Explorer needs a lightweight place to run SQL without creating a
snippet. This layer adds the query-tab lifecycle on top of the shared
editor foundation.

## Impact

Queries in this layer run against the selected project's primary
database. Drafts are local to the browser and are discarded when their
tabs are closed.

## Validation

- fresh non-incremental Studio TypeScript check
- 22 focused tests across query draft state, tab state, and notebook tab
registration

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

* **New Features**
* Added support for creating, opening, editing, and running SQL queries
in Explorer.
  * Added project-scoped persistence for query drafts and results.
  * Added dedicated query routes, query icons, and query tabs.
  * Added unsaved-changes warnings when closing query tabs.
  * Added a pinned Explorer Home tab and “New query” option.
  * Improved notebook tab registration and editor tab organization.

* **Bug Fixes**
  * Improved tab navigation, closing behavior, and layout.

* **Tests**
* Added coverage for query persistence, cleanup, restoration, and tab
navigation.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-08-13 23:03:08 +07:00
Joshen Lim 6c414e363d Initialize notebook editor page (#48842)
## Context

More groundwork for the Explorer - this PR initializes the Notebook
editor page which you can access with the "New notebook" CTA

As usual nothing functional just yet, but this PR also addresses some UI
functionality
- Creating more than 1 notebook will open multiple tabs (it wasn't
previously)
- Swapping between notebooks will update the URL (wasn't previously as
well)

Will probably start looking into the cells next, starting with
MarkdownCell followed by QueryCell

<img width="1390" height="894" alt="image"
src="https://github.com/user-attachments/assets/a467cdb4-f99f-43db-8106-c15c26c1bfbf"
/>


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

* **New Features**
* Added notebook creation actions from the Explorer home and navigation
areas.
* Introduced a full notebook editor with title editing, rename support,
and Analyze, Run, and Save controls.
  * Added options to create query or Markdown cells in empty notebooks.
* Notebook tabs now open the corresponding notebook in the project
Explorer.

* **Bug Fixes**
* Improved Explorer layout sizing and notebook tab navigation behavior.
* Improved notebook tab labels and editing behavior, including
cancellation with Escape and submission with Enter or blur.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-08 10:48:47 +07:00
Joshen Lim 3a383c87c7 Initialize notebooks store (#48801)
## Context

More groundwork for the Explorer - this one's focused on initializing
the valtio store for managing notebooks
Store architecture will follow closely with the existing
sql-editor-store

No data persistence yet, but can test creating a new notebook
<img width="195" height="143" alt="image"
src="https://github.com/user-attachments/assets/8656fb5b-3a8e-4f71-b2ce-d2f34ca9b552"
/>

Which should open a placeholder page
<img width="1387" height="527" alt="image"
src="https://github.com/user-attachments/assets/4a81b1ae-a740-40e6-9d33-29fa4f83b541"
/>

Closing the notebook brings you back to the explorer home page

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

* **New Features**
* Added support for creating and opening project notebooks from the
Explorer.
  * Added notebook tabs alongside existing entity and SQL tabs.
* Added notebook management, including loading, renaming, removing,
editing cells, and tracking unsaved changes.
  * Added support for SQL, logs, and Markdown notebook cells.
  * Added dedicated notebook routes and an initial notebook editor view.
  * Added notebook icons throughout the Explorer interface.

* **Documentation**
* Documented session-scoped notebook state for query results and row
limits.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-07 11:21:38 +07:00
Joshen Lim 8618991b6f Initialize explorer home page (#48790)
## Context

More groundwork for the Explorer - initializing the home page

Note that nothing here is functional, all just visual still

<img width="1387" height="960" alt="image"
src="https://github.com/user-attachments/assets/d4967578-edbd-476f-8150-d9d5e9d66666"
/>


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

## Summary by CodeRabbit

* **New Features**
  * Added a new Explorer landing page with an assistant chat form.
  * Added quick actions for creating notebooks and SQL work.
* Added notebook and chat template cards for faster project exploration.

* **Improvements**
  * Explorer content now fills the available page height.
* Assistant send button styling now reflects whether submission is
available.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-06 16:02:44 +07:00
Joshen Lim 4550ee18a4 Initialize tabs UI for explorer (#48789)
## Context

Continued ground work for Explorer - just initializes the Tab UI for
Explorer as such:
- Plan is to continue using the existing tabs store + EditorTabs
component
- Purely visual, nothing functional
<img width="1389" height="556" alt="image"
src="https://github.com/user-attachments/assets/d46c5ae7-01a8-4887-9452-11b98327d6bf"
/>


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

* **New Features**
* Added an Explorer workspace with animated navigation and tab controls.
* Added a home tab and a new-tab menu for creating notebooks, with chat
creation shown as unavailable.
* Added support for notebook tabs in the editor and Explorer navigation.
* Added flexible tab layouts with custom tab content, optional new-tab
actions, and configurable collapse controls.
* Improved editor navigation to recognize Explorer workspaces alongside
existing table and SQL editors.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-06 15:39:26 +07:00
Joshen Lim a7671019a8 Scaffold the explorer layout (#48740)
## Context

Resolves FE-4074

Just adds scaffolding for the explorer UI - no data fetching yet.
Initializes the page + side nav, based off Saxon's POC in
`poc/explorer-prototype`

<img width="1389" height="500" alt="image"
src="https://github.com/user-attachments/assets/8f293992-97d9-403e-91d6-2e104cd20eb5"
/>


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

## New Features
- Added a project Explorer page accessible from
`/project/:ref/explorer`.
- Added navigation for browsing notebooks and chats.
- Added search fields, back navigation, animated transitions, and empty
states for Explorer sections.
- Added a conditional Explorer link to the SQL Editor menu when enabled.

## Documentation
- Marked the Explorer route migration as complete in the migration
checklist.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-06 12:11:35 +07:00