## 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 -->
Post-merge fixes for the TanStack Start migration (#46424) — things that
broke on the TanStack build as master evolved under the migration
branches. Kept on their own branch off master rather than piling onto
the E2E-matrix PR (#47119); all land on master and cascade up to S6 +
the big PR.
Common theme: a master PR changed something the Next pipeline handles
via `next/font` / `pages/_app.tsx` / `next.config.ts`, but the
hand-rolled TanStack equivalent (`routes/__root.tsx`,
`styles/fonts.css`, `vercel.ts`) wasn't updated to match — invisible on
the Next deploy, broken only on TanStack.
---
## 1. Monaco loader path (#47182)
#47182 re-nested the served Monaco assets from a flat
`public/monaco-editor/` layout into `public/monaco-editor/vs/` and
updated `pages/_app.tsx`, but `routes/__root.tsx` still pointed
`loader.config` at the old path, so `loader.js` 404'd and **no Monaco
editor mounted anywhere in the TanStack build**. Now mirrors the Next
config (`${origin}${BASE_PATH}/monaco-editor/vs`, window-guarded for
SSR). Was failing the whole `tanstack` E2E shard on #47119.
## 2. Inter + Manrope fonts (#47306)
#47306 renamed Tailwind's sans var `--font-custom` → `--font-sans` and
added `--font-heading` (Manrope), set via `next/font` on Next.
`fonts.css` still only set the now-ignored `--font-custom`, so the body
fell back to the theme's system chain (`Circular, custom-font,
Helvetica…`) at weight 450 — that's the "Inter weights look wrong".
Manrope was missing entirely.
- Wire `--font-sans` (Inter) + `--font-heading` (Manrope) to match
`next/font`.
- **Vendor all three families** (Inter, Manrope, Source Code Pro) via
`@font-face` so nothing depends on the Google Fonts CDN — matches
`next/font` self-hosting, and (see below) `font-src` doesn't allow
`fonts.gstatic.com` anyway.
Verified in-browser: computed `body` → `Inter`, headings → `Manrope`,
all loading from local `/assets/*.woff2`.
## 3. Security headers / CSP (next.config.ts `headers()`)
The Next build sets X-Frame-Options / X-Content-Type-Options / HSTS /
**Content-Security-Policy** / Referrer-Policy via `next.config.ts`. The
TanStack build never carried these over — `vercel.ts` only set
cache-control, so **the deployed TanStack dashboard shipped with no CSP
at all**.
The TanStack deploy serves a static shell (no server to attach headers),
so they go in the Vercel config:
- `security-headers.ts` — shared source of truth, reuses `getCSP()`,
env-gated exactly like next.config.
- `vercel.ts` — apply to every response (all base-path prefixes): full
`getCSP()` + HSTS on platform.
- `scripts/serve.js` — the non-platform set (`frame-ancestors 'none'`)
for the self-hosted server.
**Tested the policy in a real browser** (temporarily enforced it on the
TanStack build via /test-supabase-local): everything passed except one
real gap — `font-src` was missing `data:`, so GraphiQL's bundled Monaco
codicon font and Stripe's payment-element fonts (both data: URIs) were
blocked (37 violations on a cold load). Added `data:` to `font-src` in
`csp.ts` → violations drop to zero, SQL editor Monaco renders clean.
That gap affects the Next build too.
---
## 4. `node:path` import crashing `/project/[ref]/merge`
Found by a full-site click-through of the TanStack build (all product
areas, ongoing — see below). `useEdgeFunctionsDiff.ts` +
`EdgeFunctionsDiffPanel.tsx` did `import { basename } from 'path'` in
client code. Webpack (Next) polyfills `path` in the browser; Vite
externalizes it, so the whole `/merge` route crashed with "Module
\"path\" has been externalized for browser compatibility". Replaced the
two `basename` call sites with a string helper. Verified in-browser:
`/merge` renders.
## 5. URL shape — Next-style search-param semantics + shim fixes
The dashboard produced malformed URLs vs the Next build (strange query
params, trailing slashes, `##` hashes). Root cause + audit verified
empirically against `@tanstack/react-router@1.170.10`; all fixed with
unit tests and browser-verified:
- **`createRouter` used TanStack's default JSON search codec** —
`?flag=true` became `?flag=%22true%22` via links, repeated
`?filter=…&filter=…` collapsed into a JSON array (breaking
multi-filter/sort table-editor URLs and the account-page round-trip,
which double-encoded), and search values arrived as numbers/booleans
where the app expects strings. New `lib/router-search-params.ts`
(Next-style: strings in, strings out, repeated keys → string[]) wired
into the router.
- **Link shim** (`compat/next/link.tsx`): `URL.hash` includes the
leading `#` while TanStack's `hash` prop adds its own → every
`href="…#section"` navigated to `##section` (hash-scroll broke);
`Object.fromEntries(searchParams)` dropped repeated query params. Both
fixed.
- **Trailing slash injected before the query** on every `?`-only
relative navigation (`/auth/providers/?provider=…`): fixed in the compat
router (prefix current pathname) and via a custom nuqs adapter
(`lib/nuqs-tanstack-adapter.tsx`) replacing the stock tanstack-router
adapter, whose `navigate({ to: '?…' })` writes hit the same TanStack
behavior (123 files use nuqs).
- **Pathname-less `router.push({ query })` leaked path params** — Next
re-consumes `ref`/`id` from `query` into the path pattern; the shim
didn't, yielding
`/editor/17597?schema=public&ref=<ref>&id=17597&filter=…` from
table-editor filter/sort, linter panels, and advisor shortcuts. The shim
now defaults the pathname to the current route pattern and backfills
omitted params.
- **Redirects dropped query + hash** (Next's `redirects()` preserves
them): `__root.tsx` `matchRedirect` and `routes/index.tsx` now carry
incoming params/hash through (consumed rule params excluded,
destination's own params win). `/?next=new-project&projectName=zzz` →
`/new/new-project?projectName=zzz`; `/sql/quickstarts?template=x#frag` →
`/sql/examples?template=x#frag`.
Browser-verified post-fix: advisors `?preset=WARN`, providers
`?provider=Google`, `?schema=auth` — all clean (no `/?`, no leaks);
repeated `filter` params survive hydration; `=true` unquoted; single
`#`.
## 6. TanStack `navigate` corrupting query values (Logs Explorer SQL
newline loss)
TanStack router-core treats a query string embedded in `navigate({ to
})` as part of the *path*: `decodePath` percent-decodes it and
`sanitizePathSegment` strips control characters, silently deleting every
`%0A`. Logs Explorer's SQL (`s` param) lost its newlines on Run/reload —
`order by timestamp desc` / `limit 5` glued into `desclimit 5`, which
then failed the LIMIT lint. Pre-existing on the TanStack build (the
stock nuqs adapter had the same shape); Next unaffected.
Fixed by never embedding query strings in `to`: the nuqs adapter and the
compat `router.push`/`replace`/`prefetch` (plus the `next/navigation`
shim) now pass search as an object through the app codec
(`splitInternalUrl` hoisted to `lib/internal-url.ts`). Guard test drives
a real `createRouter` with multi-line SQL through both producers.
Browser-verified: newlines survive the full Run → reload → re-Run cycle.
## 7. Integration overview markdown never loaded (all integrations)
`MarkdownContent` used a template-literal dynamic import
(``import(`@/static-data/integrations/${id}/overview.md`)``) — webpack
builds a context module for that, Vite can't analyze it, so every
integration detail page threw `Failed to resolve module specifier` and
rendered no overview text. Fixed with an explicit lazy registry of
literal imports (`static-data/integrations/overviews.ts`, drift-guarded
by a test) plus an `mdRawLoader()` Vite plugin mirroring next.config's
turbopack raw-loader rule. Both runtimes keep working; md stays out of
the main bundle.
## 8. GraphiQL editor never mounted (`exports is not defined`)
Our `umdAmdShortCircuit()` Vite plugin (which disarms Monaco's global
AMD loader for deps like papaparse) rewrote `typeof define ===
'function' && define.amd` to `false` inside `monaco-editor`'s bundled
copy of marked — whose UMD relies on its own *local* `define` shim — so
the whole optimized monaco chunk failed to evaluate and GraphiQL's
editor pane stayed blank. The check now only short-circuits when
`define` is the global AMD loader. Browser-verified: all four GraphiQL
Monaco panes mount, queries execute. (Known follow-up: GraphiQL's Monaco
workers fall back to the main thread under Vite — functional, worker
wiring is Next-specific `setup-workers/webpack`.)
## 9. `@sentry/nextjs` bundling Next internals — built TanStack bundle
crashed (caught by E2E)
The E2E suite against the **built** TanStack bundle (not the dev server)
found lazy chunks like `table-editor-*.js` dead on arrival:
`@sentry/nextjs` (imported by ~25 client files) drags in
`next/dist/shared/lib/constants`, whose module scope evaluates
`process?.features?.typescript` — optional chaining doesn't guard an
undeclared `process` in the browser, so the whole chunk failed at load
with `ReferenceError: process is not defined`. Dev shims `process`,
which is why weeks of dev-server testing never saw it.
Fixed by aliasing `@sentry/nextjs` → `compat/sentry-nextjs.ts`
(re-exports `@sentry/react`, same deduped 10.59.0, plus explicit
stand-ins for the three Next-only APIs) in the Vite build only.
Verified: fresh build has zero Next-internals markers in any chunk;
table editor loads clean; full E2E suite run against the built bundle.
Note for the stack: `alaister/tanstack-start` / the E2E-matrix branch
already carried a different fix for the same crash (a `next/constants`
shim) that never made it to master — the cherry-pick onto those branches
keeps **both** (the shim covers any other transitive importer; the alias
keeps Next internals out of the client bundle entirely).
**Follow-up found while fixing:** Sentry is never *initialized* in the
TanStack runtime — `instrumentation-client.ts` /
`sentry.server.config.ts` are Next-convention files nothing imports
under TanStack, so `captureException` calls are silent no-ops. Needs an
`@sentry/react` init (+ `tanstackRouterBrowserTracingIntegration`) wired
into the TanStack client entry as its own PR.
## 10. GraphiQL Monaco workers + edge-function Deno typings (Vite-only
gaps)
- **GraphiQL's Monaco workers ran on the main thread** under Vite
("Could not create web worker(s)…" — `setup-workers/webpack`'s `new
URL(...)` form isn't rewritten by Vite). A `graphiqlViteWorkers()`
plugin resolves the import to graphiql's own `setup-workers/vite`
variant for client builds (SSR untouched, Next untouched); the
setup-workers chain is `optimizeDeps.exclude`d because the Rolldown
optimizer can't load `?worker` ids.
- **Edge-function editors silently lost their Deno typings** —
`AIEditor` loaded `public/deno/*.d.ts` via `/* @vite-ignore */` imports
that always failed at runtime under Vite. The `.md` raw loader is
generalized into `rawTextLoader` (exact-path allowlist for the two
typings files, served as virtual string modules so the dep scanner never
parses `.d.ts` syntax), and the imports are now static-analyzable
literals that both bundlers handle (turbopack's raw-loader rules match
them on the Next side).
## Split out for reviewability
App-level fixes that reproduce on the Next build too (DOM-nesting
hydration errors, the ghost deleted-snippet nav, the recurring pg-meta
`migrations` 400) moved to their own PR: #47667. Sentry initialization
for the TanStack runtime (captures were silent no-ops) is #47666,
stacked on this PR.
## Full-site test campaign
Drove every dashboard product area on the local TanStack build
(Playwright, human-style) hunting migration regressions:
redirects/404/catch-alls, org, account, project home/branches/merge,
table editor CRUD, SQL editor (Monaco/run/save/templates/AI), all
database pages, all auth pages, storage CRUD, edge functions + realtime,
logs/observability, advisors, settings, integrations hub incl. nested
routes, global UI (palette/connect/switchers/theme/fonts), and a
cross-cutting sweep (document titles, back/forward chain, hard-refresh
hydration on deep URLs, trailing-slash active state). Every failure
found is fixed above and re-verified in-browser; remaining console
quirks were cross-checked against the deployed Next build and are
pre-existing (tracked separately).
## To test
Most fixes are already browser-verified + covered by unit tests and the
self-hosted E2E suite; the last two landed after the final browser pass
and still need an in-browser check:
1. **GraphiQL Monaco workers** — restart the dev server (clear
`apps/studio/node_modules/.vite` once first — the optimizer cache may
hold a stale prebundle of the worker chain). Open
`/project/<ref>/integrations/graphiql/graphiql` with the console open:
the `Could not create web worker(s). Falling back to loading web worker
code in main thread` warning must be gone, and DevTools → Sources →
Threads shows the three workers (json, editor, graphql). Autocomplete in
the query editor stays responsive.
2. **Edge-function Deno typings** — `/project/<ref>/functions/new`: no
"Failed to load … typings" console error, and typing `Deno.` in the
editor offers typed completions (e.g. `Deno.env`).
Spot-checks for the rest (all previously verified):
- `/project/<ref>/merge` renders (no "Module path" crash).
- Multi-line SQL in Logs Explorer survives Run → reload (no `desclimit`
gluing, no LIMIT-lint false failure); `s` param keeps `%0A`.
- `/auth/providers` → open a provider → `?provider=…` with no trailing
slash before `?`; table-editor filter/sort URLs carry no leaked
`ref`/`id` params; `/?next=new-project&projectName=x` lands on
`/new/new-project?projectName=x`.
- Integration detail pages (cron/queues/vault/data_api) show their
overview prose; GraphiQL query editor mounts.
- Built bundle (`MODE=test vite build` + `start:tanstack`): table editor
loads with no `process is not defined`.
- `curl -sI` any page on a platform deploy: `X-Content-Type-Options:
nosniff` (was the invalid `no-sniff`).
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Centralized integration overview markdown loading with registry-based
lookup.
* Improved Monaco loading/asset path handling for smoother editor
startup.
* **Bug Fixes**
* Next-style navigation/search handling now preserves pathname, hash,
repeated query keys, and special characters (including newlines).
* Redirects now reliably carry over query and hash with correct
precedence.
* **Security/Configuration**
* Updated CSP font sourcing and unified security headers delivery across
environments; conditional HSTS behavior.
* Refreshed font CSS variables and font-face definitions to match the
theme.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
### Review feedback: non-prod favicon (Joshen)
The TanStack `__root.tsx` hardcoded the prod favicon; local + hosted
staging now use the white staging favicon (`/favicon/staging`), matching
what `pages/_app.tsx` passes to `MetaFaviconsPagesRouter` for non-prod.
Rather than pull the pages-router component into the TanStack head, it
reuses the same synchronous `NEXT_PUBLIC_ENVIRONMENT` signal the file
already uses for `IS_DEV_TOOLBAR_ENABLED` (the `head()` route option
isn't a React component, so it can't run `_app`'s async CLI check — but
the env signal covers the reported local/staging case).
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
## Problem
We now export components under a subpath in ui-patterns to avoid barrel
files as they slow down every tools (from IDE to linters, etc.) and may
also affect bundles our users have to download.
## Solution
- Remove the UI patterns index file
- Fix invalid impors
## Context
More clean up / housekeeping - to use `CodeEditor` in `AIEditor` and
remove duplicated logic
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Expanded supported editor file types, including CSS, CSV, and
JavaScript (with improved syntax highlighting).
* The updated editor experience now provides a readily available “run
query” action.
* **UI Improvements**
* Tightened editor panel spacing and adjusted padding for a cleaner
layout.
* **Bug Fixes**
* Improved file-to-language detection so files open with the correct
syntax highlighting more consistently.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
**Stack 1/6** of the TanStack Start migration (#46424), split into
reviewable, independently-mergeable PRs.
> [!IMPORTANT]
> **Next stays the default and only active framework after this PR.**
This wires up the Vite/TanStack-Start build pipeline behind the
`STUDIO_FRAMEWORK` flag, but there are no TanStack routes yet — so the
TanStack build isn't functional or tested until later PRs in the stack.
Nothing about the Next build, dev, or deploy changes behaviourally here.
## What's in this PR
- **Dispatch:** `dev`/`build`/`start` now go through
`scripts/dispatch.js`, which runs the Next variant unless
`STUDIO_FRAMEWORK=tanstack`. The original commands are preserved as
`dev:next`/`build:next`/`start:next`.
- **Build pipeline:** `vite.config.ts`, `serve.js`, `smoke-server.mjs`,
vite/tanstack deps, `turbo.jsonc`.
- **`tsconfig.json`:** `jsx: react-jsx`, `moduleResolution: Bundler`,
`target: ES2022`. Because `include` is `**/*.ts(x)`, this re-typechecks
the whole app, so the companion adaptations below land with it.
- **Shared adaptations (companions to the tsconfig change):**
`BufferSource` casts, `packages/ui` unused-`React` import removals, etc.
- **Routing/middleware plumbing:** `next.config.ts` +
`redirects.shared.ts` (redirect rules now shared with `vercel.ts`),
`proxy.ts`/`start.ts` middleware + `hosted-api-allowlist.ts`.
## Verification
Run locally off `master`: frozen install ✓, `studio` typecheck ✓, **Next
build ✓** (compiles + generates all routes), lint ratchet ✓ ("some rules
improved"), prettier ✓.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a hosted API endpoint allowlist to return 404 for non-supported
`/api/*` routes.
* Introduced a TanStack route-migration checklist and expanded TanStack
Start routing support.
* **Improvements**
* Enhanced deployment refresh/detection by tightening cookie handling
for “latest deployment” updates.
* Centralized redirect/maintenance-mode rules for consistent platform vs
self-hosted behavior.
* Improved production serving with a dedicated static + proxy server and
a post-build smoke test.
* **Dependencies**
* Updated TanStack-related packages and React Table/query tooling
versions.
* **Documentation / Chores**
* Updated formatting and tooling config; added shared build environment
parsing utilities.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
## Summary
Closes
[FE-3109](https://linear.app/supabase/issue/FE-3109/change-sql-editor-assistant-shortcut-to-cmdshiftk).
The SQL editor's "Generate SQL" Monaco action was bound to `Cmd+K`,
which conflicted with the global command menu shortcut while the editor
was focused. This PR moves the assistant shortcut to `Cmd+Shift+K` and
makes `Cmd+K` open the global command menu from inside the editor.
## Changes
- `MonacoEditor.tsx` — rebind `generate-sql` to `Cmd+Shift+K`. Add an
`editor.addCommand` for `Cmd+K` that opens the global command menu
(gated on the user's `COMMAND_MENU_OPEN` shortcut preference). Without
this, Monaco swallows `Cmd+K` as a chord prefix and the global hotkey
never fires inside the editor.
- `SQLEditor.tsx` — update the empty-editor placeholder text from
`CMD+K` to `CMD+SHIFT+K`.
## Notes
- Monaco's standalone defaults bind `Cmd+Shift+K` to "Delete Line";
registering an `editor.addAction` with the same keybinding overrides it.
- The same `Cmd+K` binding still exists in
`apps/studio/components/ui/AIEditor/index.tsx` (used by the inline
editor panel and edge functions). Out of scope for FE-3109 — happy to
file a follow-up.
## Test plan
- [x] Focus the SQL editor, press `Cmd+K` → global command menu opens.
- [x] Focus the SQL editor, press `Cmd+Shift+K` → Generate SQL widget
opens (or "Make an edit" if a diff is already visible).
- [x] Disable the command menu shortcut in Account → Preferences →
Keyboard shortcuts and confirm `Cmd+K` no longer opens the menu from
inside the editor.
- [x] Empty SQL snippet placeholder reads "Hit CMD+SHIFT+K to generate
query…".
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Improvements**
* Reorganized SQL editor keyboard shortcuts for clearer access
* "Generate SQL" shortcut changed to Ctrl/Cmd + Shift + K (was Ctrl/Cmd
+ K)
* Command menu can now be opened with Ctrl/Cmd + K when enabled
* Editor UI shortcut hints updated to reflect the new bindings
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
A variety of fixes and improvements to the Cmd+K AI completions endpoint
in the [SQL Editor](https://supabase.com/dashboard/project/_/sql/new):
- Pre-load table definitions for the public schema and any other schemas
referenced in the editor, so the model has real column names without
needing to fetch them dynamically
- Replace the generic tool suite with a single streamlined
`getSchemaDefinitions` tool the model can still call to look up
additional schemas on demand without behavior differences across
platform & self-hosted
- Swap generic chat system prompt for a purpose-built
`COMPLETION_PROMPT`; fix role (`assistant` → `user`) for consistency
with other endpoints
- Validate and type the request body with `zod`, which was previously
untyped (`any`)
- Improve Cmd+K behavior when nothing is selected — use the full editor
content as context, return the complete query rather than just the
changed fragment, and switch to a generation mode when the editor is
blank
- Escape single quotes in schema names when fetching entity definitions
in `pg-meta` to prevent schema names from breaking out of the SQL string
and injecting arbitrary content into the prompt
## Before
Before, the SQL Editor would often hallucinate tables / columns that
don't exist in the user's database making it less helpful if you don't
know the exact table/column names. Even with maximum Assistant opt-in
level on the org, it would often fail to call the necessary tools to
gather database context.
<img width="5062" height="1522" alt="image"
src="https://github.com/user-attachments/assets/fbe1130f-6b5a-41a8-99d7-7268880af188"
/>
<img width="2540" height="658" alt="image"
src="https://github.com/user-attachments/assets/a31c2967-7751-4fce-a9b7-60bd77660b1a"
/>
Sometimes it also silently fails and generates empty queries:
<img width="1352" height="398" alt="CleanShot 2026-04-09 at 17 46 06@2x"
src="https://github.com/user-attachments/assets/e17c103a-d47d-47e6-8c2e-101f0fae5651"
/>
Or echos back the user's prompt:
<img width="1368" height="282" alt="CleanShot 2026-04-09 at 23 04 56@2x"
src="https://github.com/user-attachments/assets/7dff6e64-f54e-45b5-8e86-5399e5a2fe41"
/>
## After
In this example, the completion correctly interpreted my request for
"completed" todos as a query on the `completed_foo` column in my
`public` schema, instead of assuming existence of a `completed` column.
<img width="1452" height="838" alt="CleanShot 2026-04-09 at 17 43 13@2x"
src="https://github.com/user-attachments/assets/7a575589-78b4-448d-810a-0330ff08ef8b"
/>
In this example, the completion was correctly aware of an `other` schema
because it was detected in my existing query. I didn't have to select
the text, it included the full query in context when unselected. Notice
how it correctly used the `is_done` column when I asked for "completed"
cakes:
<img width="1372" height="534" alt="CleanShot 2026-04-09 at 17 39 07@2x"
src="https://github.com/user-attachments/assets/e6b7eb6f-f3e8-4fa1-90a3-b5e34ddc14e4"
/>
Supersedes #44151
Closes AI-544
Switch studio's package.json to `"type": "module"` so the package runs
as native ESM. This aligns the runtime module system with what we
actually write (`import`/`export`), improves tree-shaking, and reduces
friction with ESM-only dependencies.
**Changed:**
- `next.config.js` → `next.config.ts` – ESM imports/exports, proper TS
types, fixed type narrowing on redirect `has` and `basePath` fields
- `csp.js` → `csp.ts` – `module.exports.getCSP` → named `export
function`
- `tailwind.config.js` → `tailwind.config.ts` – ESM imports
- `postcss.config.js` – `module.exports` → `export default` (stays `.js`
since PostCSS doesn't support TS configs)
**Removed:**
- Unused `path` import in next config
- Deprecated Sentry `hideSourceMaps` option (default behavior in Sentry
v10)
**Added:**
- Type declaration for `config/tailwind.config` CJS package
## To test
- A general smoke test of studio should suffice
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Modernized the Studio package to ES module style and improved
TypeScript typings and config declarations to reduce build/runtime
issues.
* Updated styling and post-processing configuration format for more
consistent tooling behavior.
* **Chores**
* Updated code ownership entries to reflect migrated/renamed
configuration files.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Alaister Young <10985857+alaister@users.noreply.github.com>
## What kind of change does this PR introduce?
Chore / UI consistency fix. Resolves DEPR-418.
## What is the current behavior?
Shortcut hints are still hand-built in several high-traffic Studio
surfaces, which leads to inconsistent rendering and stale
platform-specific markup. Buttons in particular can end up with awkward
spacing and baseline alignment when shortcut labels are inserted
directly into the button text.
## What is the new behavior?
This PR standardises those shortcut hints around `KeyboardShortcut` and
updates the surrounding layout primitives to support that approach more
cleanly.
It includes:
- Design docs
- using `KeyboardShortcut` in the table side-panel `ActionBar`
- replacing hardcoded operation queue button shortcuts in
`OperationQueueSidePanel`
- standardising the command menu trigger shortcut chip and updating the
`LayoutHeader` overrides to match the new DOM shape
- replacing the AI editor empty-state `Cmd/Ctrl + K` hint with
`KeyboardShortcut`
- refining shared shortcut/button primitives so inline shortcuts align
better when used as button accessories
- keeping the SQL utility shortcut work on this branch consistent with
the same shared component approach
| Before | After |
| --- | --- |
| <img width="1454" height="902" alt="CleanShot 2026-03-27 at 15 55
32@2x"
src="https://github.com/user-attachments/assets/3a8de192-3f4c-480b-9d26-9b28becd0ee3"
/> | <img width="1488" height="906" alt="CleanShot 2026-03-27 at 15 29
31@2x-63A17C58-D023-4D3A-9355-6C40A6485328"
src="https://github.com/user-attachments/assets/46ef7f7a-2b8b-4c10-8935-84ca5ad44562"
/> |
| <img width="738" height="328" alt="CleanShot 2026-03-27 at 15 57
07@2x"
src="https://github.com/user-attachments/assets/ad459c41-867d-42f9-a8cb-c936af8326b7"
/> | <img width="726" height="290" alt="CleanShot 2026-03-27 at 15 56
29@2x-ECE4E10F-9693-4ED8-B085-DC436A839F52"
src="https://github.com/user-attachments/assets/95b4bfb4-ec34-4080-8b69-211b5045ca26"
/> |
## Later todo
- [ ] Replace the string-based SQL editor placeholder shortcut in
`SQLEditor` once that placeholder API supports rich content
- [ ] Refactor `CommandOption` to use `KeyboardShortcut` instead of
bespoke platform detection and command-key markup
- [ ] Standardise the remaining DataTable shortcut hints
(`DataTableToolbar`, `DataTableResetButton`, `DataTableFilterCommand`,
`DataTableFilterControlsDrawer`) around `KeyboardShortcut`
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Introduced a new KeyboardShortcut component for displaying keyboard
shortcuts with two visual variants (pill and inline).
* Standardized keyboard shortcut indicators across the application
interface for consistent user experience.
* **Bug Fixes**
* Fixed capitalization inconsistencies in button labels and hotkey
settings.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
- EditorPanel can now load, save, and rename SQL snippets inline
- New SaveSnippetDialog component for saving snippets with AI-generated
titles
- EditorPanel state tracks active snippet ID and pending reset
- EditQueryButton opens the inline editor panel instead of navigating to
SQL editor page
- AIEditor exposes onMount callback for editor instance access
- SnippetDropdown label updated to "Create snippet"
## TO TEST
### Normal CRUD
- open inline SQL Editor
- try creating a new snippet
- try editing an existing snippet
### Homepage V2 Report
- Try adding a new block → create snippet
- create the snippet in inline sql editor
- select the snippet in the report block section
* Load the TS lib files dynamically in the editor and set them on the Monaco instance only if the language is TS or JS.
* Change the AIEditor to use named export.
* Add catches for the dynamic loads.
* Bump Nextjs to v16.
* Fix studio issues.
* move docs graphiql css import to layout
* update sentry
* add missing docs package and fix imports
* only update studio
* ignore next-env.d.ts
* update bundle analyzer
* middleware to proxy
* update lockfile
* remove --turbopack dev flag as it's the default
* Import only types from the monaco editor.
---------
Co-authored-by: Alaister Young <a@alaisteryoung.com>
* feat(preferences): allow disable hotkeys
Add a section in /account/me for disabling hotkeys. Only added one
hotkey for now (Cmd + E for toggling editor side panel) but we can add
more with the same pattern.
* refactor: remove default export on ProjectLayout
* feat(hotkeys): allow toggling of command menu and ai assistant hotkeys
* Nit
* PRettier lint
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* try a really long context window to maximize caching
* update examples
* attempt to update packages and useChat
* update endpoints
* update zod
* zod
* update to v5
* message update
* Revert "zod"
This reverts commit ec39bac6b6.
* revert zod
* zod i
* fix complete endpoints
* remove async
* change to content
* type cleanup
* Revert the package bumps to rebuild them.
* Bump zod to 2.25.76 in all packages.
* Bump openai in all packages.
* Bump ai and ai-related packages.
* Remove unneeded files.
* Fix the rest of the migration stuff.
* Prettier fixes.
* add policy list tool
* refactor
* ai sdk 5 fixes
* refactor complete endpoint
* edge function prompt
* remove example
* slight prompt change
* Minor clean up
* More clean up
---------
Co-authored-by: Jordi Enric <jordi.err@gmail.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* decouple editor panel from global state
* refactor again
* dont close assistant
* remove async
* onsave props
* Fix TS errors
* Remove editorPanel state from app-state, use useHotKey hooks for keyboard shortcuts
* Minor UX improvements to EditorPanel
---------
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
* add supabase assets url to urlImports
* rm unnecessary comment
* add download script
* clean up + jsr supabasejs script
* rm unused jsr-url const
* Exclude the *.ts files in public folder from tsconfig.
* Add the base path when fetching the type definitions.
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
