Files
supabase/apps/docs/internals/markdown-schema/ContentListings.ts
Saxon Fletcher 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

60 lines
1.7 KiB
TypeScript

import { withDocsBasePath } from '~/internals/internal-links'
import type { ContentListingGroup } from '~/lib/content-listings.schema'
import {
filterContentListingItems,
getContentListingById,
isExternalContentListingHref,
} from '~/lib/content-listings.utils'
import { getInternalLinkBaseUrl } from '../internal-links'
const HEADING_MARKDOWN: Record<'h2' | 'h3' | 'h4', string> = {
h2: '##',
h3: '###',
h4: '####',
}
export function serializeContentListingGroupToMarkdown(
group: ContentListingGroup,
linkBaseUrl: string
): string {
const items = filterContentListingItems(group.items)
if (!items.length) return ''
const lines: string[] = []
if (group.heading) {
const level = group.headingLevel ?? 'h2'
lines.push(`${HEADING_MARKDOWN[level]} ${group.heading}`)
lines.push('')
}
if (group.description) {
lines.push(group.description)
lines.push('')
}
for (const item of items) {
const href = isExternalContentListingHref(item.href)
? item.href
: `${linkBaseUrl}${withDocsBasePath(item.href)}`
const description = item.subtitle ? `${item.subtitle}. ${item.description}` : item.description
lines.push(`- **[${item.title}](${href}):** ${description}`)
}
return lines.join('\n')
}
/**
* Markdown export handler for `<ContentListings id="..." />`. Looks up the
* group by id in the same data registry the React component uses.
*/
export const ContentListings = ({ props }: { props: Record<string, unknown> }): string => {
const id = typeof props.id === 'string' ? props.id : ''
if (!id) return ''
const group = getContentListingById(id)
if (!group) return ''
return serializeContentListingGroupToMarkdown(group, getInternalLinkBaseUrl())
}