Commit Graph
4 Commits
Author SHA1 Message Date
Nik RichersandNik Richers e3c677fc5a feat(docs): track prompt panel copies in PostHog (#50482)
## 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?

Add telemetry for `PromptPanel` to help us understand how people
interact with our AI prompts better.

 Relates to DOCS-1393

Dashboard(restricted access): [Docs: AI prompt
affordances](https://eu.posthog.com/project/34344/dashboard/957235)

## What is the current behavior?

The docs homepage cover renders a setup panel with "AI Prompt" and "CLI"
tabs, and guides render `AiPrompt` blocks. Both are built on the shared
`PromptPanel`, whose copy button called `copyToClipboard` and nothing
else. Copying was therefore unmeasured, while the neighbouring
affordances (`ask_ai_clicked`, `agent_setup_clicked`,
`copy_as_markdown_clicked`) are already instrumented.

## What is the new behavior?

`PromptPanel` takes an optional `telemetry` prop. When it is set, the
panel sends a new docs-owned event after a **successful** clipboard
write, so instrumentation lives in the shared component instead of a
forked homepage copy button.

New event in `packages/common/telemetry-constants.ts`:

| | |
| --- | --- |
| `action` | `docs_ai_prompt_copied` |
| `source` | `homepage` \| `guide` \| `agent_setup` |
| `tab` | `prompt` \| `cli` (omitted for panes outside that set) |
| `promptId` | prompt id, when the panel comes from an `AiPrompt` block
|

Wired consumers: `HomePageCover` (`homepage`), `AiPrompt` (`guide` by
default, plus `promptId`), and `AgentSetup` (`agent_setup`). No prompt
body text and no PII is sent.

Studio's existing `ai_prompt_copied` event is deliberately left alone:
it has a different owner and surface, and merging the two would blend
unrelated funnels.

### Proof it works

```
$ pnpm run test:local:unwatch features/ui/PromptPanel.telemetry.test.ts

 RUN  v5.0.0 /apps/docs

 Test Files  1 passed (1)
      Tests  4 passed (4)
   Duration  775ms
```

## Additional context

Test plan, run against a local docs server with a stub telemetry
endpoint so the request bodies could be read directly:

| Case | Observed payload |
| --- | --- |
| Homepage, AI Prompt tab | `{"source":"homepage","tab":"prompt"}` |
| Homepage, CLI tab | `{"source":"homepage","tab":"cli"}` |
| Next.js quickstart `AiPrompt` |
`{"source":"guide","tab":"prompt","promptId":"nextjs"}` |
| `automate-with-agents/health` `AgentSetup` |
`{"source":"agent_setup","tab":"prompt","promptId":"monitoring-agent-health"}`
|
| Clipboard write rejected | no request sent, error toast shown, button
does not flip to "copied" |

The failure case was re-checked with a control click on the same page
after restoring a working clipboard, which did send the event, so the
negative result is not just a missed handler.

Also run: `turbo typecheck --filter=docs --filter=common` (passes),
Prettier check on the touched files (passes), and ESLint on the touched
docs files (no new findings; the one warning on `HomePageCover` is the
pre-existing default export).

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

* **New Features**
* Successful prompt copies are now tracked across the homepage,
documentation guides, and agent setup experiences.
* Copy activity records the prompt’s source, selected format, and
associated prompt when available, providing more complete usage
insights.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Nik Richers <nik@validmind.ai>
2026-09-20 17:08:03 +00:00
Anthony Lio 5918a69398 feat(docs): agent prompt block (#50565)
## What kind of change does this PR introduce?

docs ui polish for the prompt panel on the docs homepage and in the
quickstarts

## What is the current behavior?

agent prompt renders as one run on paragraph steps read as "1. ... 2.
... 3. ..." inline making it hard to read

## What is the new behavior?

- sets prompt bodies as markdown for easier readability
- adds long prompts collapse
- removes panel tab icons
- uses panel code block ui
- makes active tab has an underline on first paint
 
 `home`
| state | preview |
| -------|------|
| before | <img width="709" height="344" alt="image"
src="https://github.com/user-attachments/assets/ba3a0948-efff-4144-8eba-9065e1f140d9"
/> |
| after | <img width="709" height="344" alt="image"
src="https://github.com/user-attachments/assets/e63e71e9-86d2-4d9a-ac2d-925e197d69f9"
/> |

`quickstart`
| state | preview |
| -------|------|
| before | <img width="862" height="344" alt="image"
src="https://github.com/user-attachments/assets/96faf012-a9f1-4ee9-8a98-3ec6de24d2de"
/> |
| after | <img width="862" height="344" alt="image"
src="https://github.com/user-attachments/assets/7a41a259-e181-4a32-949f-de095d8bb66c"
/> |

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

## Summary by CodeRabbit

* **New Features**
* Prompts now support Markdown formatting, inline code chips, expandable
content, and improved hover-reveal behavior.
* Code-copy controls support customizable labels and clearer
screen-reader announcements.
* Prompt tabs and panels have updated styling, spacing, and
active-content handling.

* **UI Improvements**
* Setup and agent prompts now use consistent Markdown-rendered
presentation.
  * Prompt headings now display “Agent Prompt.”
  * Home page setup code blocks use a more compact layout.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-09-18 21:54:31 +03:00
36d2982af4 docs: add reusable monitoring agent setup components (#49506)
<!-- CURSOR_AGENT_PR_BODY_BEGIN -->
## Stack

Draft stack extracted from `docs/monitoring`. Merge bottom-up.
Troubleshooting / debugging-guide rewrite is out of scope.

1. #49503 move inspect and advisors
2. #49501 split Studio logs from ClickHouse queries
3. #49500 treat reports as signal dashboards
4. #49502 add Observe the data hub
5. **#49506** add agent setup components ← **this PR**
6. #49504 add hire-an-agent templates
7. #49505 restructure observability nav and overview

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

Docs app feature (MDX components + markdown export). Fifth layer in the
observability stack.

## What is the current behavior?

There is no shared way to render a monitoring agent prompt, schedule,
and Claude/Codex/Cursor setup instructions in both HTML and generated
markdown.

## What is the new behavior?

- `AgentSetup` and `AgentWatchSchedule` MDX components, registered for
HTML and markdown export
- Shared `monitoring-agents` data (cadence, prompt ids, harness steps)
- Opt-in `AiPrompt` markdown export (`includeInMarkdown`) so quickstarts
stay HTML-only
- Optional content-listing `subtitle` for schedule labels on cards

No agent guide pages yet — those land in #49504 so this PR stays a
reviewable code change.

## Additional context

Markdown schema handlers share the same data module as the React
components.
<!-- CURSOR_AGENT_PR_BODY_END -->

<div><a
href="https://cursor.com/agents/bc-a3cb5ece-925b-4046-b58a-5d69e9a9d794?cursor_ref=pr_footer&cursor_cta=open_in_web"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://cursor.com/assets/images/open-in-web-dark.png"><source
media="(prefers-color-scheme: light)"
srcset="https://cursor.com/assets/images/open-in-web-light.png"><img
alt="Open in Web" width="114" height="28"
src="https://cursor.com/assets/images/open-in-web-dark.png"></picture></a>&nbsp;<a
href="https://cursor.com/background-agent?bcId=bc-a3cb5ece-925b-4046-b58a-5d69e9a9d794&cursor_ref=pr_footer&cursor_cta=open_in_cursor"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://cursor.com/assets/images/open-in-cursor-dark.png"><source
media="(prefers-color-scheme: light)"
srcset="https://cursor.com/assets/images/open-in-cursor-light.png"><img
alt="Open in Cursor" width="131" height="28"
src="https://cursor.com/assets/images/open-in-cursor-dark.png"></picture></a>&nbsp;</div>

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Saxon Fletcher <SaxonF@users.noreply.github.com>
2026-09-04 13:38:37 +10:00
d46cc88f09 docs: add agent prompts to all 18 framework quickstarts (#47543)
## 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?

Docs enhancement: Agent-ready prompt blocks on all 18 framework
quickstart pages.

## What is the current behavior?

Framework quickstarts do not surface a copyable AI prompt. Readers have
to assemble context themselves when asking an AI coding assistant to
follow the guide.

## What is the new behavior?

- Partials at
`apps/docs/content/_partials/ai/quickstart_prompt_{framework}.mdx`
contain `<AiPrompt prompt={...} />` (Prettier multiline single-quoted JS
string with `\n` escapes).
- Each quickstart includes `<$Partial
path="ai/quickstart_prompt_{framework}.mdx" />`.
- Runtime: `AiPrompt` → `PromptPanel` (Copy AI Prompt, expandable).
- Markdown export: `apps/docs/internals/markdown-schema/AiPrompt.ts`
decodes Prettier single-quoted prompt expressions so exported markdown
includes an **AI Prompt** section without quote leak.
- Shared `$Partial` helpers live in `lib/partials.utils.ts`.
- Closes DOCS-1144.

### Example before/after

| | Production | Preview |
| --- | --- | --- |
| Next.js quickstart |
[production](https://supabase.com/docs/guides/getting-started/quickstarts/nextjs)
|
[preview](https://docs-git-nikrichers-docs-1144-add-ai-prompt-blo-5af4d8-supabase.vercel.app/docs/guides/getting-started/quickstarts/nextjs)
|

**Light**

| Before | After |
| --- | --- |
| ![before
light](https://moijyfpvgnmgoxvwcikq.supabase.co/storage/v1/object/public/pr-proof/supabase/supabase/pr47543/quickstart-nextjs-before-light-d1076045.png)
| ![after
light](https://moijyfpvgnmgoxvwcikq.supabase.co/storage/v1/object/public/pr-proof/supabase/supabase/pr47543/quickstart-nextjs-after-light-74996d6c.png)
|

**Dark**

| Before | After |
| --- | --- |
| ![before
dark](https://moijyfpvgnmgoxvwcikq.supabase.co/storage/v1/object/public/pr-proof/supabase/supabase/pr47543/quickstart-nextjs-before-dark-faa391c3.png)
| ![after
dark](https://moijyfpvgnmgoxvwcikq.supabase.co/storage/v1/object/public/pr-proof/supabase/supabase/pr47543/quickstart-nextjs-after-dark-56d1578a.png)
|

### Test plan

- [x] Preview renders AI Prompt panel with copy
- [x] Spot-check Next.js, Flutter, Expo, Vue
- [x] `test-quickstart-prompts` structural
- [x] Markdown export includes **AI Prompt** without quote leak
- [x] Format CI green after prettier/single-quote decode fix

## Additional context

- Worktree:
`~/GitHub/supabase/supabase-worktrees/nikrichers/docs-1144-add-ai-prompt-blocks-to-all-18-framework-quickstarts`
- Skills: `generate-quickstart-prompts` / `test-quickstart-prompts`;
librarian update https://github.com/supabase/docs-agent-skills/pull/21
- `PromptPanel` replaced the older GlassPanel experiment for the
expandable copy UI

---------

Co-authored-by: Nik Richers <nik@validmind.ai>
Co-authored-by: jeremenichelli <jeremenichelli@users.noreply.github.com>
2026-07-24 22:19:04 +00:00