Commit Graph
11 Commits
Author SHA1 Message Date
Saxon Fletcher d0135231fb chore(studio): improve assistant feed performance (#50888)
## Problem

Assistant conversations with multiple query and Edge Function blocks
repeatedly render expensive content while streaming. Scrolling past the
feed boundary can also move the surrounding layout.

## Solution

Memoize unchanged messages, blocks, and code highlighting; batch
streaming UI updates; and skip off-screen query layout while keeping
block state mounted. Preserve streamed status updates and contain
scrolling in the message viewport. The changes are shared by Next and
TanStack.

## Review instructions

1. Compare the base branch and this branch using the same saved
conversation containing 10–20 query, result/chart, and Edge Function
blocks. Keep the browser, viewport, and conversation identical.
2. In Chrome DevTools, record Performance with 4× CPU throttling while
streaming a follow-up, typing in the composer, and scrolling through the
feed. Compare scripting/layout time and long tasks. React DevTools
Profiler should show unchanged completed blocks avoiding renders during
subsequent text updates.
3. Scroll away from query blocks and return. Confirm results, display
settings, selections, and controls retain their state. Run a read-only
query such as `select 1` and check its results still update.
4. Confirm “Thinking…” finishes, Stop retains the latest streamed text,
and approval/skip, copy, edit, and branch actions still work. Repeated
scrolling at the feed boundary must leave the outer layout/composer
stationary; jump-to-latest and following new messages should still work.
5. Repeat in both runtimes: `STUDIO_FRAMEWORK=next pnpm dev:studio` and
`STUDIO_FRAMEWORK=tanstack pnpm dev:studio`. Also check the assistant
sidebar, which shares the feed.

## Validation

- 170 assistant/Explorer tests and one shared CodeBlock test passed;
formatting and Studio lint passed (two existing warnings).
- Browser checks covered both route entry points, viewport
state/geometry, and scroll behavior.
- Review fixes: 23 focused tests, lint, formatting, and full Studio
typechecking passed. Full production builds were not verified.

## Checklist

- [x] I have read
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
- [x] No docs content changed; docs authoring skills are not applicable.


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

* **Performance**
* Improved responsiveness in the AI assistant by reducing unnecessary
updates while messages stream and conversation history is displayed.
* Optimized query previews, message rendering, and code blocks to keep
the interface smoother during use.
* **Bug Fixes**
* Improved handling of message edits and deletions during generation,
and preserved the latest response when generation is stopped.
* Improved conversation scrolling behavior while keeping conversation
content and scroll areas working as expected.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-09-25 18:09:34 +10: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 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 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 f0cb024139 feat(studio): preserve assistant tool previews after completion (#49352)
<img width="2337" height="1005" alt="image"
src="https://github.com/user-attachments/assets/08298850-715e-4b31-866d-186d73266305"
/>


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

Assistant execution feedback improvement.

## Stack context

Builds on #49351.

## What is the current behavior?

When an Assistant query, notebook, Edge Function deployment, or log
query completes or fails, the preview can be replaced by a terse text
result.

## What is the new behavior?

- Retains the original query, log-query, notebook, and Edge Function
preview after the tool resolves.
- Replaces confirmation actions with a success, error, or skipped footer
state.
- Keeps the Open notebook action available after a successful notebook
creation or update.

## To test

1. Ask the Assistant to run a valid SQL query, approve it, and confirm
the query cell remains visible with a Query executed footer.
2. Trigger a failed SQL or log query and confirm the original preview
remains visible with an error footer and error result.
3. Ask the Assistant to create or update a notebook, approve it, and
confirm the preview remains visible with a completed footer and Open
notebook action.
4. Skip any approval and confirm the preview remains visible with a
skipped footer instead of being replaced by plain text.

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

* **New Features**
* Assistant actions now show clear success, error, or denied-status
messages.
* Completed actions retain relevant previews and provide follow-up
actions, such as opening a created notebook.
* SQL, log-query, Edge Function, and notebook errors appear within their
respective result views.
* Status updates are announced more clearly as actions progress and
complete.

* **Bug Fixes**
* Preserved submitted tool details when execution fails or original
input is unavailable.
* Improved handling of failed and denied operations across assistant
workflows.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-21 10:12:00 +00:00
Joshen Lim 502e0f9b09 Add isReadOnly flag into QueryEditor component (#49378)
## Context

`QueryEditor` component is being used in the Assistant Chat currently
and needs to be read only in this context specifically
<img width="1251" height="564" alt="image"
src="https://github.com/user-attachments/assets/97d7ce9c-59bc-4acb-a105-e70361b6729e"
/>


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

* **Enhancements**
* Added read-only support for query editors, allowing query content to
be viewed without making changes.
* Assistant-generated queries are now displayed in a non-editable mode
to prevent accidental modifications.
* Read-only editors also prevent applying suggested SQL changes, helping
preserve the original query while it is being reviewed.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-21 17:47:57 +08:00
86105ca5ec feat(studio): align assistant message parts (#49351)
<img width="2252" height="1228" alt="image"
src="https://github.com/user-attachments/assets/5c1165ae-cb65-4495-97dd-427b30ceaefc"
/>


## 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 improvement.

## Stack context

Builds on #49350.

## What is the current behavior?

The Assistant conversation uses one outer width constraint. This leaves
query and notebook previews too narrow, separates consecutive generic
tool rows, and leaves message actions aligned to the far left.

## What is the new behavior?

- Gives Assistant query cells and notebook previews a `max-w-6xl`
container.
- Keeps text and other regular message parts at their existing
`max-w-3xl` width.
- Keeps consecutive generic tool rows such as Reasoned and Ran
load_knowledge compact.
- Aligns message action rows with regular message content.

## To test

1. In the Assistant, produce a response containing text plus a SQL query
or notebook preview. Confirm the preview is wide while regular text
remains at the normal width.
2. Produce a response that reasons and runs consecutive non-preview
tools. Confirm those rows remain close together with their separators.
3. Hover an Assistant response and confirm copy, rating, and branch
actions align with the regular message content.
4. Hover a user message and confirm edit and delete actions use the same
alignment.

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

- **Style**
- Improved AI Assistant message layout with centered, consistent content
widths.
- Expanded notebooks, SQL results, and query-related content where
additional space is helpful.
- Improved alignment and spacing for actions, tool outputs, loading
states, errors, and disclaimers.
  - Improved query editor visibility when switching between cells.
  - Loading indicators now respect reduced-motion preferences.

- **Tests**
- Added coverage for message layouts, tool grouping, and notebook
preview sizing.
<!-- 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-21 15:09:05 +08:00
Saxon Fletcher d93defe1e0 feat(studio): refine notebook query cell layout (#49350)
<img width="2326" height="1257" alt="image"
src="https://github.com/user-attachments/assets/d0f63793-ff58-4f48-971f-0622d375b3c7"
/>


## 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 improvement.

## What is the current behavior?

Explorer notebook query cells can extend beyond the intended reading
width, and saved notebooks open with SQL code expanded.

## What is the new behavior?

- Caps Explorer notebook query cells at `max-w-6xl`.
- Hides SQL code by default in saved notebooks.
- Keeps SQL visible by default for new notebooks.

## To test

1. Open a saved Explorer notebook with query cells. Confirm each cell is
capped at the wider notebook width and its SQL editor is initially
collapsed.
2. Expand a saved query cell and confirm the existing SQL and result
remain available.
3. Create a new notebook, add a query cell, and confirm its SQL editor
is initially visible.

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

* **New Features**
  * Added controls to show or hide SQL for individual query cells.
* Query visibility is preserved when switching notebook tabs or
reopening them.
* New notebooks display SQL by default, while saved notebooks can hide
SQL editors.
  * Expanded the query editor width for improved readability.

* **Bug Fixes**
* Prevented visibility settings from affecting notebook save status or
unrelated cells.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-21 14:27:51 +08:00
Saxon Fletcher e605178a63 feat(studio): render assistant log query results (#49293)
<img width="1510" height="862" alt="image"
src="https://github.com/user-attachments/assets/f7157bad-9b23-4d73-a9aa-2a7a7c179318"
/>


## 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 and bug fix.

## What is the current behavior?

`query_logs` can return rows to the assistant, but the chat UI does not
hydrate those rows into the query result by default. The query only
becomes visible after clicking **Run query**, even though the same SQL
and time range work when rerun manually.

## What is the new behavior?

- Renders `query_logs` tool output through a dedicated logs message part
using the shared assistant query cell.
- Parses the exact MCP untrusted-data envelope into the initial query
result, without changing what the assistant model receives.
- Preserves the logs source and time range for manual reruns.
- Infers a useful table or chart presentation from the returned rows
while retaining explicit display settings.
- Adds focused tests for MCP result parsing, timestamps, errors, query
source handling, and visualization inference.

## How to test

1. Check out this PR and run Studio against a project that has recent
logs. Generate some project activity first, such as an API request, if
needed.
2. Open the AI Assistant and ask: `Show log counts by minute for the
last 15 minutes and summarize any spikes.`
3. Wait for `query_logs` to finish. Verify the query cell appears with
results already populated; do not click **Run query** first.
4. Verify the aggregate result opens as a chart, then switch to the
table view and confirm the underlying rows are present.
5. Click **Run query** and verify the query runs successfully again
using the same logs source and 15-minute time range.
6. Ask: `Show the 20 most recent log entries from the last 15 minutes.`
Verify this non-aggregate result opens as a table with rows already
populated.
7. Confirm the assistant's written summary agrees with the displayed
rows and does not report zero rows when results are visible.

## Additional context

This is the top PR in stack #49294 and depends on the back-end knowledge
change in #49292.

Verified with 59 focused tests across assistant context, Studio/MCP
tools, query display, and logs result parsing.


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

## Summary by CodeRabbit

* **New Features**
* Added AI Assistant support for querying and displaying application
logs.
* Added automatic visualization selection, including charts for
time-based and categorical data.
* Added source-aware query handling with dedicated titles, time ranges,
and result displays.
  * Added clearer loading, parsing, and error states for log queries.

* **Bug Fixes**
* Improved handling of streamed results, source changes, and query
display updates.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-21 09:30:55 +10:00
Saxon FletcherandCursor 6e64ad039c feat(studio): add AssistantQueryCell on the shared QueryEditor (#49169)
## 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?

Notebooks and query tabs use `QueryEditor`. Assistant SQL still uses
`DisplayBlockRenderer` / `QueryBlock`.

## What is the new behavior?

Adds `AssistantQueryCell`, a local-state wrapper around the shared
`QueryEditor` (`variant="viewport"`, `isRunDisabled` while confirming).
Nothing is wired into the conversation yet — that is #49170 — so this PR
is the reusable cell plus the small editor/report-container hooks it
needs.

## Additional context

Part of stack #49171. Base: `feat/assistant-confirm` (#49168).

## Test plan

- [ ] `AssistantQueryCell.utils.test.ts` passes
- [ ] Query editor still runs in Explorer notebooks / query tabs
- [ ] No assistant conversation UI change in this PR (still
DisplayBlockRenderer)

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-20 11:35:35 +10:00