3 Commits
Author SHA1 Message Date
Anthony Lio 4a9b4b0a9e feat(docs): o11y agent setup stepper (#50962)
## Problem

on monitoring agent pages the prompt lives in a "prompt" tab next to
agent ones, while each agent tab ended with "paste the prompt" users
have to work out that the prompt is sitting in that previous tab

## Solution

this pr is a proposal to set agent setup as a two stepper `1` for the
prompt panel `2` holds the agent tabs:

- extracts prompt into a first step
- moves agent tabs within their own step
- polishes agent docs to match recent ui updates
- sets `prompt` as an anchor link within agent tabs 

| state | preview |
| -------|------|
| before | <img width="823" height="452" alt="image"
src="https://github.com/user-attachments/assets/a6a01832-ea73-48c1-b31d-25a0ef970e4e"
/> |
| after | <img width="823" height="716" alt="image"
src="https://github.com/user-attachments/assets/f5014ad0-1555-4578-b4b1-5bf2733b4d37"
/> |

<!--
## Preview links

If relevant, include links to changed pages for easy review access.

Copy the preview base URL from the Vercel bot comment on this PR. Use
the following table as an example template.

| Site | Live | Preview | Search for |
| -------------- |
-------------------------------------------------------------------------
|
------------------------------------------------------------------------------------------------------------
| ----------------------------- |
| WWW | [/blog/your-post](https://supabase.com/blog/your-post) |
[/blog/your-post](https://zone-www-dot-com-git-branch-name-supabase.vercel.app/blog/your-post)
| unique phrase from the change |
| Docs |
[/docs/guides/your-page](https://supabase.com/docs/guides/your-page) |
[/docs/guides/your-page](https://docs-git-branch-name-supabase.vercel.app/docs/guides/your-page)
| unique phrase from the change |
| Studio | [/dashboard](https://supabase.com/dashboard) |
[/dashboard](https://studio-git-branch-name-supabase.vercel.app/dashboard)
| unique phrase from the change |
| Design system | [/design-system](https://supabase.com/design-system) |
[/design-system](https://design-system-git-branch-name-supabase.vercel.app/design-system)
| unique phrase from the change |
| UI library | [/library](https://supabase.com/library) |
[/library](https://ui-library-git-branch-name-supabase.vercel.app/library)
| unique phrase from the change |
| Knowledge base |
[/kb/guides/your-page](https://supabase.com/kb/guides/your-page) |
[/kb/guides/your-page](https://kb-git-branch-name-supabase.vercel.app/kb/guides/your-page)
| unique phrase from the change |
-->

<!-- ## Additional context

Optionally add any other context or screenshots.

-->

## Review instructions

Provide a clear numbered procedure that the PR reviewer can walk
through.

1. visit
[/automate-with-agents/health](https://docs-git-docs-agent-setup-stepper-supabase.vercel.app/docs/guides/observability/automate-with-agents/health#set-up-the-agent)

## Checklist

Check all before review:

- [x] I have read
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
- [x] If I wrote a new docs topic or edited an existing topic, I used
the `/write-the-docs` or `/edit-the-docs` skill, which applies the docs
[style
guide](https://github.com/supabase/supabase/tree/master/apps/docs/style-guide)


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

* **New Features**
* Agent setup instructions are organized into prompt-copying and
scheduling steps, with links to harness documentation.
  * Code tabs support icons and controlled selection.
  * Source code samples support adjustable footer notches.
* **Bug Fixes**
  * Step numbers now display the correct shadow.
* Links to page anchors now scroll to, focus, and highlight their
targets, while respecting reduced-motion preferences.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-09-28 17:28:11 +03:00
Anthony Lio 12a1fd5427 fix(docs): codetabs file tabs (#50811)
## Problem

#50734 restyled single named code blocks as file tabs but code blocks
grouped with `<$CodeTabs>` render through a separate path and kept the
old pill style

## Solution

- add a `CodeTabs` component with the same file tab styling
- sets the `<$CodeTabs>` remark directive at it instead of `Tabs`
- remove the unused `NamedCodeBlock` copy in www (nothing in www outputs
it)

| state | preview |
| -------|------|
| before | <img width="781" height="352" alt="image"
src="https://github.com/user-attachments/assets/1e6261ae-30b7-4397-b2f4-c31bad5f9839"
/> |
| after | <img width="762" height="291" alt="image"
src="https://github.com/user-attachments/assets/851b25ed-98b7-4a5c-8d3e-fece385e3af2"
/> |

<!--
## Preview links

If relevant, include links to changed pages for easy review access.

Copy the preview base URL from the Vercel bot comment on this PR. Use
the following table as an example template.

| Site | Live | Preview | Search for |
| -------------- |
-------------------------------------------------------------------------
|
------------------------------------------------------------------------------------------------------------
| ----------------------------- |
| WWW | [/blog/your-post](https://supabase.com/blog/your-post) |
[/blog/your-post](https://zone-www-dot-com-git-branch-name-supabase.vercel.app/blog/your-post)
| unique phrase from the change |
| Docs |
[/docs/guides/your-page](https://supabase.com/docs/guides/your-page) |
[/docs/guides/your-page](https://docs-git-branch-name-supabase.vercel.app/docs/guides/your-page)
| unique phrase from the change |
| Studio | [/dashboard](https://supabase.com/dashboard) |
[/dashboard](https://studio-git-branch-name-supabase.vercel.app/dashboard)
| unique phrase from the change |
| Design system | [/design-system](https://supabase.com/design-system) |
[/design-system](https://design-system-git-branch-name-supabase.vercel.app/design-system)
| unique phrase from the change |
| UI library | [/library](https://supabase.com/library) |
[/library](https://ui-library-git-branch-name-supabase.vercel.app/library)
| unique phrase from the change |
| Knowledge base |
[/kb/guides/your-page](https://supabase.com/kb/guides/your-page) |
[/kb/guides/your-page](https://kb-git-branch-name-supabase.vercel.app/kb/guides/your-page)
| unique phrase from the change |
-->

<!-- ## Additional context

Optionally add any other context or screenshots.

-->

## Review instructions

1. visit
[/docs/guides/getting-started/quickstarts/nextjs](https://docs-git-fix-docs-codetabs-file-tabs-supabase.vercel.app/docs/guides/getting-started/quickstarts/nextjs#7-query-supabase-data-from-nextjs)


## Checklist

Check all before review:

- [x] I have read
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
- [x] If I wrote a new docs topic or edited an existing topic, I used
the `/write-the-docs` or `/edit-the-docs` skill, which references
[WORD_LIST](https://github.com/supabase/supabase/blob/master/apps/docs/WORD_LIST.md)
and the docs
[CONTRIBUTING](https://github.com/supabase/supabase/blob/master/apps/docs/CONTRIBUTING.md)
guide


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

* **New Features**
* Documentation code samples support labeled tabs, with the first tab
selected by default.
* Source menus show organization and repository paths, and source links
remain labeled “View source.”
* **Style**
* Updated code sample tabs with active-tab accents and flares, plus
clearer focus outlines and depth effects.
* Refined code-block spacing and presentation, including a styled source
footer and updated menu alignment.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-09-25 18:12:11 +03:00
Anthony Lio 6d08a747f1 fix(docs): guide reference perf enhancements (#50239)
## What kind of change does this PR introduce?

follow-up to #50235 to reduce reference page payloads and cold rendering
overhead

## What is the current behavior?

reference pages ship a large rsc payload inside the html _ most of it is
duplication rather than content along with shiki that writes ~30
character css variable name for every syntax token making the page heavy
in some cases

## What is the new behavior?

- moves repeated styles into shared css and uses compact, namespaced
token classes
- renders details icons inside the client trigger
- follows shiki’s guidance to [reuse one
highlighter](https://shiki.style/guide/best-performance#cache-the-highlighter-instance)
and [load languages on
demand](https://shiki.style/guide/best-performance#use-shorthands)

`page size`
page | before | after | change
-- | -- | -- | --
javascript | 10.61 mb | 8.28 mb | -21.9%
dart | 4.59 mb | 4.13 mb | -10.1%
python | 4.38 mb | 3.73 mb | -14.9%
swift | 2.87 mb | 2.56 mb | -10.9%
server | 1.59 mb | 1.35 mb | -15.2%
kotlin | 3.42 mb | 3.17 mb | -7.2%

`cold initialization`
language | before | after | reduction
-- | -- | -- | --
bash | 2,180 ms | 23 ms | 98.95%
javascript | 2,245 ms | 38 ms | 98.29%

## Additional context

measured on a local production build which uses the checked in generated
content _ production has larger sdk data, so absolute sizes there will
be higher

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

* **New Features**
* Added reusable expand/collapse controls for API reference details,
with updated icons, labels, and styling.
* Improved code block rendering with class-based syntax highlighting,
wrapped-code support, responsive layouts, and lazy language loading.

* **Style**
* Added theme-aware syntax-token colors, line-number styling, and
configurable code-block shadows.
  * Consolidated expandable reference panel and item styling.

* **Tests**
* Added coverage for syntax highlighting, code block rendering, language
support, token stability, and reference details.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-09-15 23:55:49 +03:00