## Context
Related to Explorer/Notebooks - adds the source selector for query cell
within a notebook
<img width="1108" height="648" alt="image"
src="https://github.com/user-attachments/assets/d1434197-3738-41b0-a8ef-1919c91181d9"
/>
<img width="1103" height="633" alt="image"
src="https://github.com/user-attachments/assets/97f8c6a3-629d-4a41-aab4-3fdc5e8b2c7e"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added support for displaying log cells in the query editor.
* Added switching between database and log query sources.
* Log and database cells can display results as tables or charts.
* Log queries support optional row limits.
* Improved reliability when changing query settings.
* Notebook query views now default to table display when unspecified.
* **Bug Fixes**
* Log cells no longer appear blank or get omitted from notebook views.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
This is just pulling out the relevant changes from
https://github.com/supabase/supabase/pull/49028 as I might have messed
up the stack while making changes down the PRs 🙏
Builds on the Query Tab in the Explorer UI, adds the source selector
component to run either a database query or a logs query - will
subsequently be looking into have the source selector component in the
QueryCell as well (within notebooks)
<img width="1095" height="594" alt="image"
src="https://github.com/user-attachments/assets/ab6e8d91-aed3-4845-9777-acbd7a3a7cb1"
/>
<img width="1086" height="667" alt="image"
src="https://github.com/user-attachments/assets/75d99063-755d-4ba6-a128-7ddcbbc9f161"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Added query-source selection for Explorer and notebook queries.
- Supports log queries, database selection, and read-replica
connections.
- Added validation for custom log time ranges and retention limits, with
upgrade guidance when applicable.
- Query source choices are saved and restored across sessions.
- Changing sources clears previous results to prevent stale data.
- **Bug Fixes**
- Improved handling of unavailable log querying and missing database
connections.
- Legacy saved queries now fall back safely to the default database
source.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
Related to Explorer/Notebooks - this PR adds the functionality to add /
remove cells
Separately - am thinking we can shift a lot of the "cell update" logic
into notebook-state, mainly so that each UI component doesn't need to be
aware of the notebook's `cells` but just its own cell.
I'll do it separately though to prevent bloating this PR, already left
comments where i think can be refactored
<img width="250" alt="image"
src="https://github.com/user-attachments/assets/91aae5f9-07b9-4327-8e21-8e9d71098aa6"
/>
<img width="250" alt="image"
src="https://github.com/user-attachments/assets/677de208-5c52-4155-90c6-bc0879070693"
/>
<img width="250" alt="image"
src="https://github.com/user-attachments/assets/17c3dae7-87bc-40bb-bfa0-15df101006ce"
/>
<img width="1091" height="262" alt="image"
src="https://github.com/user-attachments/assets/a09c3d23-696a-4b55-a1f8-4602e56a60dc"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## New Features
- Add query and Markdown cells directly within notebooks.
- Move, remove, and reorder cells using drag-and-drop or cell controls.
- Add cells from empty states and notebook toolbar actions.
- Edit Markdown cells, mark edits as complete, and see placeholders for
empty content.
## Improvements
- Cell controls and hover interactions are more consistent and
responsive.
- Moving cells is disabled at the top or bottom of a notebook.
- Sample cells now use standardized content and formatting.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<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>
## Stack
Depends on #49027. Followed by #49038.
## Summary
- extract a controlled `QueryEditor` from the existing notebook query
cell
- reuse it from `QueryCell`, leaving notebook persistence and
sortable-block behavior in the adapter
- make table/chart result settings controlled so other query surfaces
can share them
- persist notebook SQL on editor blur and query execution
## To test
1. Open a notebook query cell, edit and rename it, then run the query
and confirm results appear.
2. Switch between table and chart results and confirm notebook
move/delete actions still work.
## Why
Notebooks, query tabs, and future chat tabs need consistent query
actions and result rendering without duplicating the notebook
implementation.
## Impact
This is primarily a refactor of the existing notebook query experience.
It introduces no new query-tab routes or source-selection behavior.
## Validation
- fresh non-incremental Studio TypeScript check
- focused NotebookEditor component tests
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a shared query editor with SQL editing, execution, validation,
visibility controls, editable titles, row limits, and loading/error
states.
* Added table and chart result views, including customizable bar and
line charts.
* Added support for switching display modes and updating chart settings.
* **Improvements**
* Improved query result handling and display-setting updates.
* Repositioned the logarithmic-scale tooltip for better visibility.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
## Context
Related to Explorer/Notebooks - Adds support for log scale in the charts
<img width="980" height="477" alt="image"
src="https://github.com/user-attachments/assets/b3764023-bd9a-4edd-92d4-1b61df93b97e"
/>
Prevents setting to log scale if y axis has yet to be selected, or if
the data set contains non positive values
<img width="393" height="188" alt="image"
src="https://github.com/user-attachments/assets/57695d9e-9724-47ed-aa2a-c104c16837b2"
/>
<img width="408" height="159" alt="image"
src="https://github.com/user-attachments/assets/2290bb69-0ddb-4449-afad-aabae6ace669"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Added logarithmic Y-axis scaling for line and bar charts.
- Added logarithmic tick formatting and appropriate chart bounds.
- Added contextual guidance when logarithmic scaling is unavailable.
- **Bug Fixes**
- Automatically switches charts back to linear scaling when data
contains values that cannot support logarithmic scaling.
- Prevented unnecessary stacking for single-series area charts.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
Related to Explorer / Notebooks - this adds chart functionality for the
Query cells
<img width="250" alt="image"
src="https://github.com/user-attachments/assets/4ea37c14-87dc-4c43-ba7f-cb9436085c81"
/>
Query results can be rendered as either bar or line chart - using the
chart packages from `ui-patterns`
[NOTE]: For design team reviewers - am patching the chart packages to be
agnostic to the `timestamp` property within the provided data set. Would
love to use this component from a consistency POV instead of the old
`BarChart` component we have.
Have intentionally omitted log scale functionality from this PR - will
have that separately 🙏
<img width="999" height="483" alt="image"
src="https://github.com/user-attachments/assets/14356ee4-c658-4fd1-90e0-17c38dac4822"
/>
<img width="988" height="478" alt="image"
src="https://github.com/user-attachments/assets/cd0ca088-9a03-4aa3-9884-17bc36d3cabf"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Added chart views for notebook query results, including bar and line
charts.
- Added display settings for selecting X/Y columns, chart type, scale,
cumulative values, and label visibility.
- Added configurable X-axis support for charts.
- Display preferences are saved with each notebook cell.
- **Improvements**
- New database cells default to table view.
- Chart results better handle varied data types.
- Empty results and incomplete chart settings now display clear
placeholders.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
Related to Explorer / Notebooks - adds a barebones query cell that
minimally can run SQL queries + render results
The intention is to migrate the components used in the SQL Editor into
this new Query cell since all the functionality is very similar, but the
SQL Editor component is tightly coupled to the SQL Editor valtio store.
So we'll be duplicating a bit of UI for now - which will also make
deprecating the SQL Editor eventually a bit easier by just deleting them
Have deliberately omitted a lot of details for now just to keep the PRs
small, so will be continuing to build out the QueryCell's functionality
in subsequent PRs. This includes
- Source selector
- Data display (Table / Chart)
- Autolimit logic
Other changes also includes
- Updating NotebookEditor to use the new Explorer UI components that
Saxon introduced
<img width="500" alt="image"
src="https://github.com/user-attachments/assets/d709f6f1-f6cc-4e6a-babd-f5b68bba2a55"
/>
<img width="500" alt="image"
src="https://github.com/user-attachments/assets/a286ceca-ac84-4fbd-afd5-b24f940e2e29"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added notebook database cells for writing, editing, and running SQL
queries.
* Added query result displays with loading, empty, error, row-limit, and
result states.
* Added editable notebook titles with save and cancel controls.
* New notebooks can start with customizable Markdown and SQL cells.
* Added helpful SQL error actions, including copying messages, database
connection guidance, and AI Assistant support where available.
* **Improvements**
* Improved notebook spacing, section layout, toolbar tooltips, and
empty-result presentation.
* Markdown changes now save automatically through the notebook editor.
* Improved drag-and-drop controls and query visibility management.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Summary
Adds the Studio-owned `ExplorerQuery` shell used by notebooks, SQL
snippets, dedicated query tabs, and assistant query blocks within
Explorer.
- provides framed embedded and full-height viewport roots
- provides composable editor, results, and footer layout regions
- keeps result content responsible for its own scrolling while the
results region fills remaining height
- remains presentational: query models, execution, source resolution,
persistence, and result rendering stay external
- expands the project-local Explorer agent skill with composition and
sizing guidance
- adds focused Studio component tests
All files are scoped to `apps/studio`; this PR no longer changes
`ui-patterns` or the design-system app.
## Stack
- Base: #48925
- Next: #48961
- This PR targets `chore/toolbar-component`, so its review diff contains
only the query shell layer.
## Validation
- `pnpm --filter studio exec vitest run
components/interfaces/Explorer/ExplorerQuery/ExplorerQuery.test.tsx
components/interfaces/Explorer/ExplorerToolbar/ExplorerToolbar.test.tsx`
— 6 tests passed
- `pnpm --filter studio typecheck`
- Prettier
- `git diff --check`
## Summary
Adds the Studio-owned `ExplorerToolbar` composition used by Explorer
notebooks, chats, SQL snippets, query cells, and tabs.
- provides icon, title, actions, and compact action-button slots
- follows Studio's 40px header sizing with a `--header-height` fallback
- keeps resource-specific state and behavior in the consuming Explorer
surface
- adds focused Studio component tests
- adds project-local agent guidance at
`apps/studio/.claude/skills/explorer/SKILL.md`
These components are intentionally scoped to Studio under
`apps/studio/components/interfaces/Explorer`; this PR no longer changes
`ui-patterns` or the design-system app.
## Stack
- Base: `master`
- Next: #48926
- This is the first PR in the Explorer query component stack.
## Validation
- `pnpm --filter studio exec vitest run
components/interfaces/Explorer/ExplorerToolbar/ExplorerToolbar.test.tsx`
— 3 tests passed
- `pnpm --filter studio typecheck`
- Prettier
- `git diff --check`
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added shared Explorer toolbar components for icons, titles, actions,
custom controls, and compact buttons.
* Added accessibility defaults, configurable toolbar sizing, ref
forwarding, and native property support.
* Added documentation covering Explorer component usage, composition,
sizing, actions, state ownership, and extensions.
* **Tests**
* Added comprehensive coverage for toolbar composition, styling,
accessibility, refs, and configurable behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Context
More groundwork for the Explorer - this PR introduces the Markdown cells
and some basic (non data persisting) editing
Markdown cells will save either on
- Save button click
- Losing focus on the code editor
Hitting esc will cancel the changes
<img width="1387" height="674" alt="image"
src="https://github.com/user-attachments/assets/f0614b37-7a11-404f-9940-8bcd4de25c57"
/>
<img width="1087" height="516" alt="image"
src="https://github.com/user-attachments/assets/0a104168-2001-4ef7-934a-7e864956b3cb"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added editable Markdown cells to notebooks, with save and cancel
controls.
* Added drag-and-drop reordering for notebook cells, including keyboard
support.
* New notebooks now include sample Markdown content to help users get
started.
* **Improvements**
* Improved drag-handle placement and consistency across sortable
sections.
* Updated notebook empty and populated states to reflect the current
cell content.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Summary
- Joshen's `state/notebooks/types.ts` (Explorer/notebook editor UI)
redefined its own `TimeRange`, cell union, and `NotebookContent` shapes,
duplicating the canonical schema from
`data/content/notebooks/notebook-schema.ts` (#48813, #48815).
- Points `Notebook.content` and `notebooksState.updateCells` at the
canonical `Notebooks.Content` / `Notebooks.Cell` types (via `@/types`)
instead, and fixes the handful of call sites that constructed notebook
content by hand to match the real wire shape: `schema_version: 1` (not
`'1.0'`) and `_tag`-discriminated cells (e.g. `{ _tag: 'markdown_cell',
id, text }` instead of `{ type: 'markdown', content }`).
- No behavioral changes — Joshen's state management, editor component,
and hooks are untouched aside from the type-level fixes needed to
compile against the canonical schema.
## Test plan
- [x] `pnpm exec tsc --noEmit` — no new errors
- [x] `pnpm exec vitest run state/notebooks/notebooks-state.test.ts
components/interfaces/Explorer/__tests__/NotebookEditor.test.tsx` — 8/8
passing
- [x] `pnpm exec eslint` on changed files — clean
- [x] `pnpm exec prettier --check` on changed files — clean
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Bug Fixes**
* Updated notebook content handling to use the current schema version
format.
* Improved compatibility for markdown cells, including their identifiers
and text.
* Standardized notebook content and cell updates for more consistent
behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## 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 -->
## 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 -->
## 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 -->
## 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 -->
Joshen Lim