Commit Graph

44 Commits

Author SHA1 Message Date
Saxon Fletcher
bd76d7fc34 feat(studio): wrap assistant Edge Function approval in a Confirm card (#49168)
<img width="1512" height="862" alt="image"
src="https://github.com/user-attachments/assets/79a6d4dc-dcd2-489f-97d7-3ee7a0196b7d"
/>


## 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 / UI refactor.

## What is the current behavior?

Assistant Edge Function approval nests `ConfirmFooter` under the
function block. `addToolApprovalResponse` is wired whenever state is
`approval-requested`, including automatic approvals.

## What is the new behavior?

Introduces a `Confirm` card that owns the frame, with the footer
attached below the body. Edge Function approval uses that card.
Interactive Approve/Deny only runs for manual `approval-requested` parts
(`!approval.isAutomatic`), matching the [AI SDK tool-approvals `useChat`
guidelines](https://ai-sdk.dev/docs/agents/tool-approvals).

SQL still uses `DisplayBlockRenderer` until #49170. `ConfirmFooter` is
inlined into `Confirm` so SQL can keep importing the named footer until
that PR.

## Additional context

Part of stack #49171. Base: `chore/ai-sdk-7` (#49167).

Notebook proposal Confirm wrapping is **not** in this stack — that file
lives on [#49159](https://github.com/supabase/supabase/pull/49159).
Follow up after that stack merges.

## Test plan

- [ ] Deploy-edge-function tool part shows Confirm with Skip / Deploy
- [ ] Existing-function replace warning still requires the second
confirm
- [ ] After approve, footer morphs to loading and buttons disable
- [ ] `Confirm.utils.test.ts` and `EdgeFunctionRenderer.test.tsx` pass

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

* **New Features**
* Added confirmation cards for AI-assisted actions, including approve
and cancel controls.
* Improved handling of manual approval requests for SQL execution,
notebook changes, and Edge Function deployment.
* Added support for customizing report and Edge Function block styling.

* **Bug Fixes**
* Automatic approvals no longer appear as pending manual confirmations.
  * Skipped SQL actions now provide clearer messaging.

* **Tests**
* Expanded coverage for approval states, confirmation controls, and
automatic decisions.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
2026-08-20 11:35:34 +10:00
Joshen Lim
67d4fed40d Joshenlim/fe 4157 explorer migrate results component into explorer (#49066)
## Context

Related to Notebooks/Explorers - this one's just shifting files from the
SQLEditor into more generic folders from a file organization POV, such
that files under the Explorer folder have no dependency on files within
the SQLEditor folder

Mainly
- UtilityTabResults.utils: `getSqlErrorLines`
  - Moved into `data/sql/utils.ts`
- SQLEditor.utils: `applyAutoLimit`, `getSqlErrorLines`,
`trimTrailingSemicolons`
  - Moved into `data/sql/utils.ts`
- SQLEditor/UtilityPanel: `ResultCell`, `Results`, `CellDetailPanel`
  - Moved into `components/ui/DataGridResults`
  - Also shifted corresponding tests over here
- Also addressed some `any` type casts 

## To test
- Just need to ensure that the SQL Editor still works as expected

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

## Summary by CodeRabbit

* **New Features**
* Standardized query results across the Studio with a shared data grid.
* Improved result-table formatting, column sizing, clipboard handling,
and large-value display.
  * Added safer automatic row limits for eligible SQL queries.
  * Centralized SQL error display and formatting utilities.

* **Refactor**
  * Improved type safety for query rows and cell values.

* **Tests**
* Added comprehensive coverage for result-grid and SQL utility behavior.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-14 11:29:39 +07:00
Charis
21511042a3 feat(studio): assistant logs context and reports guard (#48514)
## 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 — final PR (9/9) of the SQL editor logs-source stack.

**Base branch:** `charislam/sql-editor-inline-ai-clickhouse-dialect` (PR
8). Nothing here is user-visible: entry points stay behind
`sqlEditorLogsSource` + `otelLegacyLogs`, and flag rollout happens after
the whole stack merges.

## What is the current behavior?

- The Assistant has no idea a SQL editor snippet targets the logs
backend. Ask it about a logs snippet and it answers in Postgres, because
the attached query is fenced as ` ```sql ` and nothing tells the model
otherwise.
- Because the `sql` fence is what `MessageMarkdown` treats as runnable
Postgres, an attached ClickHouse query is rendered with a
Run-against-Postgres affordance and branded with `untrustedSql`.
- "Debug with Assistant" on a failed logs query produces a dialect-less
prompt, so both the in-app assistant and the copyable version get
debugged as Postgres.
- A report referencing a `log_sql` snippet runs its ClickHouse SQL
against the user's Postgres database and surfaces the resulting error.

## What is the new behavior?

**Assistant panel.** The "Current Query" chip records which backend the
attached query targets. That reaches the model two ways: each attachment
is fenced with its own dialect (` ```clickhouse ` vs ` ```sql `), and a
`containsLogsSnippets` flag rides on the user message as AI SDK
`metadata`. The server reads the flag off the conversation and prepends
the ClickHouse dialect rules plus the logs schema reference as a
non-cached context message.

Two design points worth calling out in review:

- The flag lives on the **message**, not the request body, so Retry and
the tool-approval continuation reproduce the context a message was
originally asked in — neither of those passes a per-call body.
- It's derived from **what's actually attached**, so detaching the chip
drops the claim rather than leaving the two able to disagree.

The `clickhouse` fence also keeps a logs query out of
`MessageMarkdown`'s `sql` branch, so it's no longer offered as runnable
Postgres or branded with `untrustedSql` — a boundary this stack's
distinct brands exist to prevent crossing.

**Debug flow.** `buildDebugChatArgs` attaches its query with a source
for the same reason, and names the dialect in the prompt text so the
copyable version stands on its own outside the app.

**Reports.** A report only stores a snippet id, so whether it queries
the logs backend is only knowable once the content loads. `ReportBlock`
guards on the fetched type and renders a `LogsSnippetReportBlock`
placeholder instead of executing. Double-guarded: no `sql` for a logs
snippet (so it's out of the query key and `queryFn` short-circuits even
on an explicit `refetch`) and `enabled` excludes it.

**Incidental cleanups.** `buildAssistantContextMessages` extracted out
of `generate-assistant-response`; a schema-access sentinel that was
duplicated as a string literal across two files (and compared against)
replaced with one exported constant; `SqlSnippet` deduplicated to a
single declaration; `resolveSnippetSource` / `isLogsSource` shared
instead of re-implemented per surface.

**Tests.** 4 new/extended suites. Notable cases pinned: a message with
no metadata must validate (`safeValidateUIMessages` applies
`metadataSchema` to *every* message, so a required schema would 400
every existing conversation); only *user* messages count, so a model
reply can't talk the server into a different dialect; a mixed-attachment
message is flagged without overclaiming a single source; and
`ReportBlock` registers no pg-meta mock for the logs cases, so an
unhandled request failing the test *is* the assertion that logs SQL
never reaches Postgres.

Verified: `pnpm typecheck`, `lint:ratchet` (no regression), Prettier,
and the full Studio suite (459 files / 4969 tests).

## Additional context

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

## Summary by CodeRabbit

- **New Features**
- Added support for recognizing log snippets in reports, with clear
guidance to open them in the SQL editor or remove them.
- AI Assistant now understands log snippets and provides
ClickHouse-specific context, formatting, and troubleshooting guidance.
- Snippets retain their source information when shared with the AI
Assistant.

- **Bug Fixes**
- Prevented unsupported log snippets from being executed as regular
database queries.
  - Improved source detection when opening snippets directly from links.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-04 09:02:40 -04:00
Danny White
73c9dbfa52 fix(studio): standardise custom icon weight (#48478)
## What kind of change does this PR introduce?

Bug fix and internal tooling update. Resolves FE-3472.

## What is the current behavior?

Custom Studio icons use inconsistent source stroke widths, and some
child-level styling prevents component props from overriding them. Mixed
custom and Lucide icon sets can therefore appear uneven.

## What is the new behavior?

Custom stroke icons use a root-level `stroke-width="1.5"`; fill-only
logos use `stroke="none"`. The build validates that contract and
regenerated components preserve existing exports and props.

Studio applies the same `1.5` weight across Reports categories and uses
one shared destination icon mapping in the replication selector,
destination rows and diagram.

| Before | After |
| --- | --- |
| <img width="418" height="516" alt="56398"
src="https://github.com/user-attachments/assets/6afa7042-e6be-40e7-9911-af2f61238c9d"
/> | <img width="390" height="550" alt="CleanShot 2026-07-30 at 17 12
37@2x"
src="https://github.com/user-attachments/assets/870f49cf-c8fa-40db-8be8-2eb5f264ff4a"
/> |
| <img width="510" height="734" alt="CleanShot 2026-07-30 at 17 19
28@2x"
src="https://github.com/user-attachments/assets/a5b2c088-dcd2-4907-976b-5820794d06e3"
/> | <img width="554" height="742" alt="CleanShot 2026-07-30 at 17 16
06@2x"
src="https://github.com/user-attachments/assets/ed3a77c4-5d94-4ca7-b9e4-1403b725a981"
/> |


## Testing

At 100% zoom, compare custom and Lucide icon weight in:

- Reports: **Add your first chart** and **Add block**
- Database > Replication: the destination selector, destination rows and
replication diagram
- Command menu (`⌘K`): **Search Database Tables**, **Search RLS
Policies**, **Search Edge Functions** and **Search Storage**
- Authentication > Users: right-click a user row and compare the
context-menu icons
- Database > Schema Visualizer: open a table node overflow menu
- A paused project: **Export your data > Download backups**

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

* **New Features**
* Added consistent destination icons across replication panels, rows,
and diagrams.
  * Updated instance health and metric icons for clearer identification.
* Standardized icon stroke weight and reduced default icon stroke
thickness.

* **Documentation**
* Clarified custom icon requirements, default properties, and validation
guidance.

* **Bug Fixes**
* Improved consistency of icon rendering across replication destinations
and reports.

* **Tests**
* Added coverage for icon SVG validation and replication destination
icon rendering.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-03 17:48:50 +10:00
Charis
1c827c5cbb refactor(sql-editor): extract title-gen/execute-params + merge auto-limit functions (#48013)
## Summary
Part 2/6 of the SQL Editor testability follow-up, stacked on #47980 (the
analyzeQueryIssues/resolveConnectionString PR).

- Extracts `shouldAutoGenerateTitle` and `buildExecuteParams` out of
`useSqlEditorExecution`'s inline logic into `SQLEditor.utils.ts`.
- Merges `checkIfAppendLimitRequired` and `suffixWithLimit` into a
single `applyAutoLimit` function — the two were only ever called
together and re-parsed the same query twice at every call site.
`applyAutoLimit` only accepts `SafeSqlFragment` (never a plain string)
and composes the `LIMIT` suffix through `safeSql`/`literal` rather than
raw template concatenation, so the only place in the file that reasserts
the `SafeSqlFragment` brand on a derived string is the small, dedicated
`trimTrailingSemicolons` helper — removing existing terminators can't
introduce unsafe content, unlike gluing new text onto the fragment.
- Updates the two other `checkIfAppendLimitRequired`/`suffixWithLimit`
call sites (`EditorPanel.tsx`, `ReportBlock.tsx`) accordingly;
`ReportBlock` now promotes its report SQL once and reuses the result for
both its display-only auto-limit hint and its execution, instead of
promoting twice.

## Test plan
- [x] `pnpm --filter studio typecheck`
- [x] `pnpm test:studio -- SQLEditor ReportBlock EditorPanel` (239 tests
passing)
2026-07-16 17:08:26 -04:00
Saxon Fletcher
fb02182e86 Color system (#47288)
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES/NO

## What kind of change does this PR introduce?

Bug fix, feature, docs update, ...

## What is the current behavior?

Please link any relevant issues here.

## What is the new behavior?

Feel free to include screenshots if it includes visual changes.

## Additional context

Add any other context or screenshots.


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

* **New Features**
* Refreshed theming across the UI to use modern color expressions and
shared theme variables (including OKLCH-based gradients), improving
consistency for charts, code blocks, overlays, icons, and decorative
backgrounds.
* **Bug Fixes**
* Improved light/dark color and gradient consistency across axis/grid
styling, reference lines, buttons/badges, sidebar accents, loaders, and
other visual components.
* **Documentation**
* Updated styling/theming guidance to align with the revised semantic
token system and the updated theme variable usage patterns.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-03 15:00:43 +10:00
Gildas Garcia
c6fc456910 chore: cleanup duplicate exports studio (#47387)
## Problem

Knip reports many duplicate exports (both named and default). Besides,
we're moving away from default exports and even have an eslint rule to
enforce it on new code.

## Solution

- Cleanup those exports
- Update imports when necessary

No functional changes. If it builds, it's fine
2026-06-29 15:46:16 +02:00
Joshen Lim
42ec3c4960 Joshen/fe 3624 queryblock causes client side crash if rendering many rows (#47021)
## Context

Having a custom report block on the project home page with a SQL that
returns a large set of results (e.g > 100k rows) causes a client side
crash with "Maximum call stack size exceeded"
<img width="400" alt="image"
src="https://github.com/user-attachments/assets/e4bb5b73-e114-4687-9d0b-a7bff328167c"
/>

This is happening due to an array spread in `computeYAxisWidth` in
`Math.max` - which am hence opting to use a `reduce` instead to mitigate
the problem.

Am also opting to apply the same autolimit logic in the SQL editor into
the `QueryBlock` here, so that we don't unnecessarily fetch a large
dataset in this UI. Added a UI indicator as well if auto limit has been
applied (So this also overlaps into dashboard scalability too)
<img width="1383" height="465" alt="image"
src="https://github.com/user-attachments/assets/08b66398-f3b8-49ce-b4a4-23c91510bd54"
/>



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

## Summary by CodeRabbit

* **New Features**
* Report query blocks now feature automatic SQL limiting functionality,
which restricts query results to a maximum of 100 rows when enabled
* When active, query result blocks display an informational notice to
users, clearly indicating the row restriction that has been applied

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-06-17 17:52:03 +08:00
Gildas Garcia
96d43099bb chore: refactor Button API so that it can be used a standard button (#46880)
## Problem

Our `<Button>` component breaks the default `button` contract by
redefining the `type` prop to set its variant (`primary`, `default`,
etc) instead of the button type (`submit`, `button`, etc).
This is confusing and forces to write more code when using it with
shadcn components that expect/inject the standard button props.

## Solution

- rename the `type` prop to `variant`
- rename the `htmlType` prop to `type`
- propagate the changes where necessary
- format code

## How to test

As this is just prop renaming, if it builds it's ok

---------

Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2026-06-16 23:59:58 +02:00
Joshen Lim
1baaded0bb Consolidate execute-sql-query into execute-sql-mutation (#46944)
## Context

Just some clean up as I was going through stuff
- `useExecuteSqlQuery` is deprecated and not used at all
- As such `execute-sql-query` is technically irrelevant, the more
relevant file is `execute-sql-mutation`
- Hence opting to consolidate `execute-sql-query` into
`execute-sql-mutation`
- Also removing `ExecuteSqlError` since its just re-exporting the
`ResponseError` type

There's a lot of file changes but its essentially just updating the
importing statements across the files
2026-06-16 00:07:16 +08:00
kemal.earth
22c02a1304 fix(studio): custom report tooltips overflow (#46772)
## 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?

Previously the `overflow-hidden` on the custom report charts container
was cutting off the tooltip within the card bounds. This PR introduces
`PortalChartTooltip` here so the tooltip is able to appear outside of
the bounding area. It is still directionally aware, just relative to the
page viewport as opposed to bounding box.

| Before | After |
|--------|--------|
| <img width="376" height="341" alt="image"
src="https://github.com/user-attachments/assets/4a85901c-6b68-4f02-a13f-d2e261267348"
/> | <img width="466" height="324" alt="Screenshot 2026-06-09 at 11 45
38"
src="https://github.com/user-attachments/assets/0071c670-ef12-4df5-90fc-79df19ce98ca"
/> |

If you want to test quickly but have no data, you can ask Claude to
generate you a dummy custom report chart and then move it around, test
the long tooltips.


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

* **New Features**
* Tooltips can now render in a dedicated layer to improve visibility and
avoid clipping.
* Option added to enable portal-rendered tooltips in condensed/snippet
views.

* **Bug Fixes**
* Improved tooltip positioning to prevent overflow outside the viewport.
  * Corrected percentage label suffixes in chart tooltips.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-06-10 17:58:11 +01:00
Jordi Enric
4a7a540268 fix(studio): hide disk IO burst balance charts on 4XL+ compute (#46327)
## Problem

On 4XL and larger compute sizes, Supabase disk IO is sustained rather
than burst-budget based. Baseline equals max, so there is no extra burst
balance to track (the instance can still be throttled if it hits its
configured IOPS or throughput limit, but that is unrelated to a burst
credit pool). The "Disk IO Burst Balance" / "Disk IO % Remaining" /
"Disk IO % Consumed" charts in custom reports are therefore meaningless
on 4XL+, yet they are currently still offered in the picker and rendered
as empty/misleading charts.

Custom reports persist their layout, so a report created when a project
was on a smaller compute and later upgraded to 4XL+ can still contain a
saved burst chart that we need to handle gracefully.

## Fix

- Add a shared \`hasBurstableIO(infra_compute_size)\` helper in
\`DiskManagement.utils.ts\` (replaces the local
\`BURSTABLE_IO_VARIANTS\` set previously defined inline in
\`database-charts.ts\`).
- Filter \`disk_io_budget\` and \`disk_io_consumption\` out of the
custom report chart picker (\`MetricOptions\`) when the project is on a
non-burstable compute size.
- In \`ReportBlock\`, detect saved burst charts on a 4XL+ project and
render a new \`UnavailableChartBlock\` that explains the chart no longer
applies and can be removed.
- The database observability burst balance chart already gated on
\`hasBurstableIO\`; updated to use the shared helper.
- Infrastructure activity page already has equivalent handling via the
dedicated-IO admonition, so no change needed there.

Linear: FDBKPRI-1404

## Test plan

- [ ] On a project below 4XL, the custom report picker still lists "Disk
IO % Remaining" and "Disk IO % Consumed", and they render normally
- [ ] On a 4XL+ project, neither metric appears in the picker
- [ ] Open an existing custom report that contains a saved burst balance
chart on a 4XL+ project, and confirm the placeholder block renders with
a clear explanation and a remove action
- [ ] Database observability page on 4XL+: the burst balance chart
remains hidden, all other charts render

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

* **New Features**
* Disk IO metrics are now filtered based on your project’s compute size
so only relevant charts appear.
* Metrics tied to burstable IO are hidden when the current instance does
not support burstable IO; deprecated metrics remain excluded.
* When a disk IO chart isn’t available for your instance, the UI shows
an explanatory unavailable-chart block with text about burst-balance
limits for very large instances and optional actions to remove the
unavailable chart.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46327?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-26 11:07:38 +02:00
Vaibhav
b56ba64d2e fix: tooltip dates (#45922)
## TL;DR

fixes one day off observability tooltip 

## before:
<img width="227" height="159" alt="image"
src="https://github.com/user-attachments/assets/6cc8653f-2304-4d63-bf53-af01425c0d96"
/>

## after:
 
<img width="288" height="200" alt="image"
src="https://github.com/user-attachments/assets/9aa35e63-2fbc-42aa-82c8-1a3b158e6f40"
/>


## ref:

- closes https://github.com/supabase/supabase/issues/45921
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Bug Fixes**
* Improved chart tooltip date label formatting: tooltips now detect
ISO-like date strings and format them consistently, while preserving
previous formatting for other values. This change ensures correct,
readable dates in both bar and line chart tooltips within reports.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45922)

<!-- review_stack_entry_end -->

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/45922)

<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-14 15:28:49 +02:00
Jordi Enric
bef828ae48 feat(studio): apply timezone picker to observability/reports charts (#45667)
## Problem

The dashboard's timezone picker (#45517) propagates to log timestamps
and the shared TimestampInfo component, but observability and reports
charts still render their X-axis labels, range labels, and tooltip
headers in the browser's local timezone. The result is jarring once a
user picks a non-local timezone: hover a chart and you get one tz, hover
a log row and you get another.

## Fix

Routes all display-side timestamp formatting in the chart layer through
the existing picker-aware helpers (\`useFormatDateTime\` /
\`formatDateTime\`) so chart UI matches the rest of the dashboard.

- **ComposedChart.utils** \`CustomTooltip\` (the hotspot — drives every
observability dashboard tooltip): reads the active timezone via
\`useTimezone\` for both the header label and the formatted timestamp.
- **AreaChart** / **BarChart**: introduce a \`formatChartDate\` helper
that honours each component's existing \`displayDateInUtc\` prop,
otherwise routes through the picker.
- **ChartBlock**: the two recharts \`labelFormatter\` arrows now close
over \`useFormatDateTime\`.
- **ChartHighlightActions**: range labels in the zoom dropdown migrated
to the same hook.

Intentionally untouched (must stay UTC):
- \`ChartHandler\` / \`ChartBlock\` \`startDate\`/\`endDate\` (API range
params, day boundary).
- \`ChartBlock.tsx:166\` explicit \`.utc()\` data-key normalisation.
- \`useFillTimeseriesSorted\` and friends (range math, no display).

## How to test

- Sign in. Open the avatar dropdown, pick a timezone different from your
browser local (e.g. Asia/Tokyo).
- Visit any project, then \`/project/<ref>/reports/database\` (or any
\`/observability/...\` page).
- Hover any chart series — the tooltip header should display the chosen
IANA name and times in that timezone.
- Click-drag a range on a chart to open the zoom dropdown — start/end
labels in the menu should also be in the chosen timezone.
- Switch back to "Auto detect" and confirm everything reverts to
browser-local.
- For an AreaChart/BarChart that uses \`displayDateInUtc\` (e.g. some
legacy reports), confirm those still render in UTC regardless of picker.

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

* **Refactor**
* Standardized date/time formatting across charts, tooltips, axis
labels, header/footer labels, and highlight range labels in Reports and
chart components.
* Switched to a shared, timezone-aware formatter that respects UTC
display mode or the selected picker/timezone, ensuring consistent,
human-readable timestamps throughout the UI.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-07 19:31:59 +02:00
Charis
465121894d studio: add sql provenance tracking to ai assistant + reports (#45608) 2026-05-06 09:14:45 -04:00
Charis
0433eeb5f5 feat(studio): mark sql provenance for safety (#45336)
Mark provenance of SQL via the branded types SafeSqlFragment and
UntrustedSqlFragment. Only SafeSqlFragment should be executed;
UntrustedSqlFragments require some kind of implicit user approval (show
on screen + user has to click something) before they are promoted to
SafeSqlFragment.

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

* **New Features**
* Editor and RLS tester show loading states for inferred/generated SQL
and include a dedicated user SQL editor for safer edits.

* **Refactor**
* Platform-wide SQL handling tightened: snippets and AI-generated SQL
are treated as untrusted/display-only until promoted, improving safety
and consistency.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-05-04 13:08:06 -04:00
Ivan Vasilov
56de26fe22 chore: Migrate the monorepo to use Tailwind v4 (#45318)
This PR migrates the whole monorepo to use Tailwind v4:
- Removed `@tailwindcss/container-queries` plugin since it's included by
default in v4,
- Bump all instances of Tailwind to v4. Made minimal changes to the
shared config to remove non-supported features (`alpha` mentions),
- Migrate all apps to be compatible with v4 configs,
- Fix the `typography.css` import in 3 apps,
- Add missing rules which were included by default in v3,
- Run `pnpm dlx @tailwindcss/upgrade` on all apps, which renames a lot
of classes
- Rename all misnamed classes according to
https://tailwindcss.com/docs/upgrade-guide#renamed-utilities in all
apps.

---------

Co-authored-by: Jordi Enric <jordi.err@gmail.com>
2026-04-30 10:53:24 +00:00
Ivan Vasilov
308cd791a2 chore: Prep work for migrating to Tailwind v4 (#45285)
This PR preps the monorepo for a migration to Tailwind v4:
- Bump all Tailwind dependencies and libraries to the latest possible
version, while still compatible with Tailwind 3.
- Cleans up obsolete Tailwind 3 specific options and configs.
- Cleans up unused CSS files and fixes the CSS imports.
- Migrates all `important` uses in `@apply` lines to using the `!`
prefix.
- Move `typography.css` to the `config` package and import it from the
apps.
- Migrated all occurrences of `flex-grow`, `flex-shrink`,
`overflow-clip` and `overflow-ellipsis` since they're deprecated and
will be removed in Tailwind 4.
- Make the default theme object typesafe in the `ui` package.
- Migrate all `bg-opacity`, `border-opacity`, `ring-opacity` and
`divider-opacity` to the new format where they're declared as part of
the property color.
- Bump and unify all imports of `postcss` dependency.
2026-04-28 11:33:53 +02:00
Joshen Lim
7f5865872a Enforce noUnusedLocals and noUnusedParameters in tsconfig.json + fix all related issues (#45264)
## Context

Enforce `noUnusedLocals` and `noUnusedParameters` in tsconfig.json + fix
all related issues
2026-04-27 17:42:34 +08:00
Jordi Enric
bf16d7f613 fix(reports): fix report block styling issues FE-2844 (#44436)
## Problem

The Report Blocks section (custom dashboards) has four visual and UX
bugs: tooltip content overflows its container, Y-axis labels with 5+
digits get clipped (e.g. `10000` renders as `0000`), action buttons
become unreachable when a block title is long, and scrolling inside a
scrollable block also scrolls the parent page.

## Fix

- Remove the fixed `w-[200px]` class from `ChartTooltipContent` in
`ChartBlock` so tooltips auto-size to their content instead of
overflowing.
- Compute a dynamic Y-axis width in `ChartBlock` based on the string
length of the maximum data value, replacing the `undefined` default that
caused clipping.
- Add `min-w-0` to the label container and `shrink-0` to the actions
container in `ReportBlockContainer` so the truncation works correctly
and action buttons are never pushed off-screen.
- Add `overscroll-contain` to the scrollable SQL code and results table
divs in `QueryBlock` to stop scroll events from propagating to the page.

## How to test

- Navigate to a custom Report with multiple blocks
- Hover over a chart bar on a block with a long metric name. The tooltip
should be fully visible with no text overflow.
- Find or create a block whose Y-axis values exceed 9999 (e.g. disk
IOPS). The full number should appear on the Y-axis without any leading
digits being clipped.
- Use a block on a read replica so the label appends "of replica",
making it long. The chart-type toggle, log scale toggle, and remove
buttons should all remain visible and clickable.
- Add a SQL snippet block that returns a large table of results. Scroll
within the results table. The page should not scroll while the inner
table is scrolling.

## Before
<img width="1166" height="680" alt="CleanShot 2026-04-07 at 15 36 45@2x"
src="https://github.com/user-attachments/assets/8e7bd3c9-8319-47c9-b2d9-b194d2803809"
/>


## After
<img width="1166" height="680" alt="CleanShot 2026-04-07 at 15 36 15@2x"
src="https://github.com/user-attachments/assets/6ca5873a-cd09-4001-9cd0-932c12b6536e"
/>


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

* **Style**
* More consistent Y-axis sizing with dynamic widths for better label
fit.
* Improved Y-axis number formatting (K/M suffixes, sensible decimals)
for clearer tick labels.
* Simplified, more flexible chart tooltips (min-width applied; removed
fixed widths).
* Tighter report header layout so labels truncate predictably and
actions keep their size.
* Added overscroll containment to query results and SQL view to reduce
unwanted scrolling.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-07 14:01:38 +00:00
Ali Waseem
768c79446e fix(studio): prevent report remove button from overflowing on long names (#44575)
## Summary

- Adds `min-w-0` to the flex container holding the report block label in
`ReportBlockContainer`, so CSS truncation works correctly and the Remove
button stays visible even with long report names.

## Test plan

- [x] Create a report with a very long name on the Project Overview page
- [x] Verify the Remove (X) button remains visible without needing to
zoom out
- [x] Verify the report name truncates with an ellipsis

Fixes FE-2944

## Demo
<img width="938" height="390" alt="image"
src="https://github.com/user-attachments/assets/17419035-b03d-4f61-a324-8e446685a109"
/>

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

## Summary by CodeRabbit

* **Bug Fixes**
* Improved text truncation in report block titles to prevent layout
overflow in narrow containers.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-06 14:39:22 +00:00
Charis
4a0bb36ca8 style: require sorted imports in studio/components (#44408)
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2026-04-01 10:22:37 +02:00
Jordi Enric
b0227cf9dc fix: custom report gets stuck block after deleting sql snippet (#43210)
- Deleted SQL Snippets leave a hanging block that loads forever in
custom reports, and its not possible to delete them.
- Now you can delete blocks if they get stuck loading
- Also shows correct error state when a block couldn't load because the
sql snippet was removed
## before
- stuck forever 
<img width="1296" height="936" alt="CleanShot 2026-02-26 at 13 23 25@2x"
src="https://github.com/user-attachments/assets/bb65cc5f-c2a4-4027-876e-db9682ec6f3c"
/>

## after
- show error state
- allow user to delete snippet
<img width="1388" height="862" alt="CleanShot 2026-02-26 at 13 23 45@2x"
src="https://github.com/user-attachments/assets/c5d6c114-071b-4e4d-a913-25b3c788db95"
/>

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-02-27 11:43:34 +01:00
Jordi Enric
a36c50ad88 add logarithmic option to custom reports (#43001)
https://linear.app/supabase/issue/FE-2595/dashboard-feedback-logarithmic-scale-option-for-custom-report-charts#comment-19c2f27a

- adds logarithmic view option to charts
<img width="1308" height="866" alt="CleanShot 2026-02-18 at 21 15 56@2x"
src="https://github.com/user-attachments/assets/2ed95d0e-ccd0-4cd1-9a3b-ac9ae5628995"
/>
2026-02-19 07:20:12 -07:00
Ivan Vasilov
0d5be306ef chore: Bump React Query to v5 (#40174)
* Bump the deps, refactor deprecated code.

* Migrate keepPreviousData usage.

* Migrate all uses of InfiniteQuery.

* Fix refetchInterval in queries.

* Migrate all use of isLoading to isPending in mutations.

* Fix accessing location in claim-project.

* Fix a bug in duplicate query keys.

* Migrate all queries to use isPending.

* Revert "Fix accessing location in claim-project."

This reverts commit 2a07df64b5.

* Revert the rss.xml file to master.
2025-12-10 10:10:29 +01:00
Raúl Barroso
09df6e8373 refactor: infra queries to use attributes (#41018)
* refactor: infra queries to use `attributes`

This PR refactors the infrastructure monitoring query code reducing duplication and unifying the API request to always be `attributes`:

•  Removed the separate useInfraMonitoringQuery hook and getInfraMonitoring function that handled a single monitoring query
•  Consolidated all infrastructure monitoring queries into a unified useInfraMonitoringAttributesQuery hook that handles multi-attribute requests
•  Moved interval selection logic from the query layer to the consumer (InfrastructureActivity.tsx), where it can be computed dynamically based on user-selected date ranges
•  Simplified query types by removing intermediate InfraMonitoringData and InfraMonitoringVariables types
•  Interval is now computed in the component (defaults to 1d, switches to 1h for date ranges ≤48 hours) rather than hardcoded in the query layer
•  All queries now use the unified multi-attribute endpoint with explicit parameter passing

* fix: handle single-attribute response format
2025-12-04 16:16:12 +01:00
Ali Waseem
605d2fce6a fix: custom report block is firing SQL queries twice (#40699)
* fix: custom report block is firing SQL queries twice

* updated useeffect

* refactored to use custom use query instead of mutation
2025-11-25 06:56:55 -07:00
Ivan Vasilov
a40ccc4b45 chore: Clean onSuccess and onError props on useQuery (#40641)
* Remove all onSuccess and onErrors from useQuery.

* Minor fixes to all refetchInterval.

* Fix smaller type issues.
2025-11-20 14:08:56 +01:00
Joshen Lim
b4d38fabd0 Chore/barrel files bye part 05 (#40016)
* Clean up barrel files part 4

* nit

* Part 5 of cleaning up barrel files

* Revert changes for types

* Nit
2025-10-31 13:15:31 +08:00
Saxon Fletcher
43b686e31a Drag query to home (#39506)
* drag report to home

* drag handle styling and report overlay
2025-10-16 09:01:55 +10:00
Kevin Grüneberg
e4aee0728c chore: project daily stats caching / deprecated props (#39277)
Remove deprecated props that have no effect on behaviour and fix the caching (based on date instead of timestamp)
2025-10-06 16:39:49 +08:00
Kevin Grüneberg
1a4a283480 chore: deprecate additional daily stats blocks (#39162)
As part of reducing reliance on our old daily stats pipeline, this PR adds additional deprecated properties. Especially with the revamped reports, these daily stats are barely getting called anymore and it is not worth exposing them to the customers this way.
2025-10-02 15:37:50 +08:00
Saxon Fletcher
626eb30e77 Assistant action orientated approach (#38806)
* update onboarding

* update model and fix part issue

* action orientated assistant

* fix tool

* lock

* remove unused filter

* fix tests

* fix again

* update package

* update container

* fix tests

* refactor(ai assistant): break out message markdown and profile picture

* wip

* refactor(ai assistant): break up message component

* refactor: break ai assistant message down into multiple files

* refactor: simplify ReportBlock state

* fix: styling of draggable report block header

When the drag handle is showing, it overlaps with the block header.
Decrease the opacity of the header so the handle can be seen and the two
can be distinguished.

* fix: minor tweaks to tool ui

* refactor: simplify DisplayBlockRenderer state

* fix: remove double deploy button in edge function block

When the confirm footer is shown, the deploy button on the top right should be
hidden (not just disabled) to avoid confusion.

* refactor, test: message sanitization by opt-in level

Refactor the message sanitization to have more type safety and be more testable.
Add tests to ensure:

- Message sanitization always runs on generate-v4
- Message sanitization correctly works by opt-in level

* Fix conflicts in pnpm lock

* Couple of nits and refactors

* Revert casing for report block snippet

* adjust sanitised prompt

* Fix tests

---------

Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-09-29 03:57:36 +00:00
Jordi Enric
9a80869981 fix custom report charts colors (#37595)
fix custom charts colors
2025-08-07 18:51:28 +02:00
Joshen Lim
63164fe165 Revert "Revert "Feature/assistant mcp"" (#36687)
* Revert "Revert "Feature/assistant mcp" (#36684)"

This reverts commit 2bff117cde.

* Attempt
2025-06-26 15:02:49 +08:00
Joshen Lim
2bff117cde Revert "Feature/assistant mcp" (#36684)
Revert "Feature/assistant mcp (#35318)"

This reverts commit 3a50dd1f72.
2025-06-26 13:06:50 +08:00
Saxon Fletcher
3a50dd1f72 Feature/assistant mcp (#35318)
* step 1

* use mcp

* system prompt

* clean up

* space

* clean up

* add three state opt in toggle

* clean up

* todo

* hooks

* refactor opt in form and modal

* refinements

* add bedrock

* remove console

* update mcp util

* use bedrock

* remove openai sdk package

* re-add tools

* update complete endpoints

* fix: ai assistant markdown formatting (#35541)

* fix: mcp types and project ref (#35540)

* feat: more flexible aws credential provider (#35538)

* feat: more flexible aws credential provider

* fix: add AWS_REGION to turbo env vars

* change to allowed

* update complete endpoints

* add an additional permission

* refinements

* use claud 4

* legal copy changes

* update other ai functions to use bedrock

* update generate v3 copy

* remove generate sql modal

* fixes for query block

* re-add dragging to reports

* clean up

* add open ai edge function example

* use handle error from fetchers

* remove schema and lean on tools

* copy

* Assistant MCP tests (#36049)

* feat: refactor and test mcp and model logic

* fix: remove get_project tool

* fix: remove additional get_project tool references

* update copy

* Clean up, fixes, refactors

* oops

* Float errors from AI endpoionts as toasts

* Use a env var AWS_BEDROCK_PROFILE for bedrock.

* Rename the env var for AWS bedrock profile.

* feat: support custom aws bedrock env vars

* chore: add comments explaining aws credential chain

* MCP Self Hosted Check (#36185)

support self hosted

* feat: bedrock auth via vercel oidc

* Fix broken unit test

* Feeeex

* Refactor useOrgOptedIntoAi

* Remove useDisallowHipaa hook

* small system prompt change

* readd vercel packages

* fix self hosted

* increase max duration

* try more direct prompt

* max duration 90

* reduce max steps and add loading

* mono font

* backwards compat styling

* Chore/limit number of messages sent to assistant (#36388)

* Limit number of historical messages that get sent to assistant

* Update max chat history to 5

* alignment

* bump mcp server version

* Add feature flag for opt in tags (#36466)

* Add feature flag for opt in tags

* Add one more check

* security section system prompt

* rely on default link and replace image markdown

* Add custom link component to assistant message block (#36527)

* Add custom link component to assistant message block

* Update based on feedback

* Render plain text if URL is deemed unsafe

* fix mcp tools and parse data (#36593)

* Update Admonition for AI Assistant for when opt in is re-enabled (#36663)

* Update Admonition for AI Assistant for when opt in is re-enabled

* Update

* Smol fix

* Fix TS

* Tiny

---------

Co-authored-by: Greg Richardson <greg.nmr@gmail.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2025-06-26 12:13:27 +08:00
Joshen Lim
84f73bb675 Chore/use readonly connection string for queryblock (#34892)
* Use read only connection string in queryblock

* Add comments
2025-04-11 16:43:06 +08:00
Joshen Lim
39cfcc742d Cleanup reports (#34015)
Removes a bunch of charts relying on daily data, that should not be relevant for users. Daily stats is a bad aggregation for users in itself, as the data is 24 hours or more delayed and not granular. Data from all removed charts are better looked at through logs (i.e. auth logs), as it can be aggregated and looked at in a more fine-granular way.
2025-03-13 12:51:36 +01:00
Joshen Lim
02d943e9d6 Add refresh button to reports (#33211)
* Add refresh to custom reports

* Add refresh button to API and storage reports

* Add refresh button to database report

* Clean up database report

* Clean up custom report
2025-02-03 11:59:28 +08:00
Joshen Lim
710e1c871a Fix custom report charts (#33199) 2025-01-31 16:10:41 +01:00
Joshen Lim
90a939506c Feat/reports v2/misc wrap up (#32989)
* Add telemetry for add SQL block and dragging SQL block from assistant

* Add UI indication for drag support block in Assistant

* Add UI indication for SQL block support in SQL editor Chart options

* Feat/reports v2/create report (#33022)

* re-add chart label

* fix undefined value

* remove mouse over on chart

---------

Co-authored-by: Saxon Fletcher <saxonafletcher@gmail.com>
2025-01-23 13:25:31 +08:00
Joshen Lim
60763ab1e7 Reports V2: support dragging blocks from assistant to custom report (#32964)
* Support dragging blocks from assistant to custom report

* Show toast when new snippet is created from dragging block into custom report

* Only show drag handle for block in assistant panel if in custom reports

* Feature flag dragging Assistant query block to custom report

* Optimize DX for dragging block into report from assistant

* Update import

* Remove max width

* Fix dragging non sql block causing client crash

* Fix chart suffix

* Fix tooltip value for non % values

* Misc fixes

* Support persisting non sql block line or bar view, and fix cancelling not resetting the block state

* Update

* Preserve chart config when dragging block from assistant to report

* Fix
2025-01-22 16:35:52 +08:00
Joshen Lim
3440dc9c95 Feat/reports v2/standardize block design (#32936)
* Standardize block designs

* Clean up

* Add warning threshold colors for infra-monitoring stats

* Address all other comments

* Swap create custom report to use PUT
2025-01-21 20:56:13 +08:00