Commit Graph

11 Commits

Author SHA1 Message Date
Saxon Fletcher
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
Joshen Lim
3490a63a7c Hook up analyze button in notebook (#49463)
## Context

Hooks up the "Analyze" CTA on a notebook which runs a prompt in the
Assistant to run the notebook and summarize findings
<img width="230" height="63" alt="image"
src="https://github.com/user-attachments/assets/fd30f301-1c52-4e9b-810c-74820cf52720"
/>

Note: running notebooks have not been hooked up yet on the Assistant
side of things

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

* **New Features**
  * Added an Analyze action to notebook tabs.
* Notebook changes must be saved before analysis can begin, with a
confirmation prompt to save.
  * Analysis starts automatically after a successful save.
* The Analyze action now shows a loading state while analysis is being
created.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-25 13:44:20 +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
Saxon Fletcher
85db94762c feat: add routed assistant chat tabs to Explorer (#49031)
<img width="1695" height="1042" alt="image"
src="https://github.com/user-attachments/assets/b02e64ff-32ac-4aee-bda5-00b56f3a29e5"
/>


## Summary

- add routed Explorer chat pages backed by explicit assistant chat IDs
- wait for persisted assistant state before creating chats so cold-load
creation is not overwritten
- register chat tabs and keep tab labels, navigation, close behavior,
and missing-chat cleanup in sync
- create and branch Explorer chats without changing the assistant
sidebar selection
- support both Next.js and TanStack Router paths

This is PR 2 of 3 and is stacked on #48973. Review and merge #48973
first. The Explorer discovery, toolbar, and cross-surface entry points
follow in #49032. This PR focuses purely on setting up chat tab types,
routes and assistant conversation.

## To Test
- Create a new assistant chat via the assistant sidebar, send a message
etc
- Copy the chat id
- Visit /explorer/chat/[id]
- Verify chat shows up, you can send more messages, chat is synced
across tab and sidebar
- Close the tab

## Test plan

- `mise exec node@22 -- pnpm --dir apps/studio exec tsc --noEmit`
- focused Vitest suite: 4 files / 30 tests covering assistant hydration,
chat creation, routed chat rendering, and tab lifecycle
- 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 Explorer chat pages with support for opening, selecting, and
branching chats.
* Added chat tabs, stable navigation, chat icons, and fallback behavior
when tabs are closed.
* Added chat creation that waits for assistant state to finish loading.
* **Bug Fixes**
  * Removed tabs for deleted or unavailable chats.
  * Improved editor tab navigation and history clearing behavior.
* **Tests**
* Added coverage for chat routing, tab management, chat creation, and
assistant-state loading.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
2026-08-14 11:19:42 +10:00
Joshen Lim
93d9d80535 joshen/fe 4149 explorer support adding removing cells in notebook (#49037)
## 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 -->
2026-08-14 00:17:29 +07: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
d434c63bad joshen/fe 4150 explorer query cells result display settings (#49003)
## Context

Related to Explorer / Notebooks - this adds chart functionality for the
Query cells
<img width="250" alt="image"
src="https://github.com/user-attachments/assets/4ea37c14-87dc-4c43-ba7f-cb9436085c81"
/>

Query results can be rendered as either bar or line chart - using the
chart packages from `ui-patterns`
[NOTE]: For design team reviewers - am patching the chart packages to be
agnostic to the `timestamp` property within the provided data set. Would
love to use this component from a consistency POV instead of the old
`BarChart` component we have.

Have intentionally omitted log scale functionality from this PR - will
have that separately 🙏

<img width="999" height="483" alt="image"
src="https://github.com/user-attachments/assets/14356ee4-c658-4fd1-90e0-17c38dac4822"
/>
<img width="988" height="478" alt="image"
src="https://github.com/user-attachments/assets/cd0ca088-9a03-4aa3-9884-17bc36d3cabf"
/>



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

- **New Features**
- Added chart views for notebook query results, including bar and line
charts.
- Added display settings for selecting X/Y columns, chart type, scale,
cumulative values, and label visibility.
  - Added configurable X-axis support for charts.
  - Display preferences are saved with each notebook cell.

- **Improvements**
  - New database cells default to table view.
  - Chart results better handle varied data types.
- Empty results and incomplete chart settings now display clear
placeholders.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-13 10:09:54 +07:00
Joshen Lim
77c5a0b9d9 Joshen/fe 4077 explorer query cells (#48989)
## 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 -->
2026-08-13 08:44:27 +07:00
Joshen Lim
b648db233b joshen/fe 4113 explorer markdown cells (#48846)
## 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 -->
2026-08-11 10:41:59 +07:00
Charis
0111aa371b ref(studio): converge notebook UI types with canonical content schema (#48905)
## 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 -->
2026-08-10 13:39:02 -04: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