fix(api, integrations): use keys instead of titles, fixed broken images, ToC depth

[yxL05]

• Fixed request / response descriptions in API docs using the title instead of the object key
• Fixed broken images in integration guides that used the built-in HTML img instead of Astro Pictures
• Fixed table of content depth to match old docs

[linear-code]

DOCS-118

[greptile-apps]

Greptile Summary

This PR addresses three distinct doc-site issues: API request/response field names now display the schema key rather than the human-readable title, broken images across nine integration guides are migrated from raw <img> tags to Astro's <Picture> component (enabling image optimization and correct asset resolution), and the table-of-contents depth is extended from h3 to h4 to match the old docs. Two new MDX how-to pages also adopt a freshly-introduced Definition/DefinitionReference component system to hyperlink glossary terms throughout long documents.

• SchemaFields.tsx: prop.title ?? key → key, fixing the display of API object field names in the generated docs.
• Integration guides (9 files): <img src="..."> replaced by import+<Picture> pairs so Astro can process and serve the images correctly.
• cleanup-headings.ts: Regex and depth filter both widened from #{2,3} / <= 3 to #{2,4} / <= 4 to expose h4 headings in the ToC.

Confidence Score: 4/5

Safe to merge — all changes are documentation and UI component fixes with no runtime logic at risk.

The core fixes (key-based field names, Astro Picture migration, ToC depth) are mechanical and low-risk. The new Definition/DefinitionReference components work correctly for every term used in this PR. The two minor points are the hardcoded SVG fill colour and the naive pluralization guard, neither of which causes a rendering failure today.

src/components/DefinitionReference.astro (pluralization edge case) and src/components/icons/plugins/FileSynchronizerIcon.astro (hardcoded colour).

Important Files Changed

Filename	Overview
src/components/DefinitionReference.astro	Renders an anchor link to a definition; derives display term from id using a simplistic pluralization heuristic that may fail for words already ending in "s".
src/components/icons/plugins/FileSynchronizerIcon.astro	New SVG icon component; uses hardcoded fill="purple" (CSS named color #800080) rather than currentColor or a design-system token.
src/components/integrations/SchemaFields.tsx	Fixes field display name to use the schema key instead of prop.title, correctly addressing the "titles instead of keys" bug described in the PR.
src/lib/cleanup-headings.ts	Extends ToC depth from h3 to h4 in both the regex token extractor and the filter, matching the stated goal of restoring old-docs ToC depth.
src/content/docs/integrations/integration-guides/sunshine-conversations/zendesk-messaging.mdx	Most extensive image migration in the PR; replaces 9 raw img tags with Astro Picture imports, all changes are mechanical and correct.
src/content/docs/integrations/sdk/interface/how-tos/implementing-file-sync.mdx	Heavy DefinitionReference adoption throughout; also adds a FileSynchronizerIcon header and migrates inline bold glossary terms to the new Definition component.
src/content/docs/integrations/sdk/interface/how-tos/implementing-hitl.mdx	Parallel glossary migration to implementing-file-sync.mdx; plural/capitalize props used on DefinitionReference components are all correct for the terms involved.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A["DefinitionList.astro\n(dl wrapper)"] --> B["Definition.astro\n(dt + dd + id anchor)"]
    C["DefinitionReference.astro\n(a href='#id')"] -->|"links to"| B

    D["MDX page\n(implementing-hitl / file-sync)"] -->|"renders"| A
    D -->|"renders"| C

    E["SchemaFields.tsx"] -->|"key (was prop.title)"| F["API field name displayed"]

    G["img src"] -->|"replaced by"| H["Picture src={imported}"]
    H -->|"processed by"| I["astro:assets optimizer"]

    J["cleanup-headings.ts\nTOKEN_RE #{2,4}"] -->|"feeds"| K["ToC depth <= 4\n(was <= 3)"]

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
    A["DefinitionList.astro\n(dl wrapper)"] --> B["Definition.astro\n(dt + dd + id anchor)"]
    C["DefinitionReference.astro\n(a href='#id')"] -->|"links to"| B

    D["MDX page\n(implementing-hitl / file-sync)"] -->|"renders"| A
    D -->|"renders"| C

    E["SchemaFields.tsx"] -->|"key (was prop.title)"| F["API field name displayed"]

    G["img src"] -->|"replaced by"| H["Picture src={imported}"]
    H -->|"processed by"| I["astro:assets optimizer"]

    J["cleanup-headings.ts\nTOKEN_RE #{2,4}"] -->|"feeds"| K["ToC depth <= 4\n(was <= 3)"]

Loading

_{Reviews (1): Last reviewed commit: "More broken images fixes." | Re-trigger Greptile}