fix(shell-docs): rendering parity, copy dedent, and content cleanup

Consolidates four QA findings from the post-cutover rendering pipeline:

- MdxCodeBlock now dedents fence-in-JSX bodies before passing the copy
  payload to <CopyButton>. Fences nested inside <Tab>/<Step>/<Tabs> were
  reaching the clipboard with 16-24 leading spaces per line (invalid
  Python / TS on paste). The visible <pre> body is dedented in lockstep
  so rendering matches what's copied.

- Wires rehypeCodeMeta + pre: MdxCodeBlock into the framework-root
  after-features MDX renderer, achieving parity with docs-page-view.tsx.
  Previously bare rehypeHighlight left these blocks without copy
  buttons or file-path captions.

- Closes the two fences in display-only.mdx with three backticks instead
  of four, so the fences actually terminate and copy doesn't grab
  adjacent JSX/prose.

- Removes a copy-paste-duplicated <Callout> on tool-rendering.mdx
  (kept the first occurrence, dropped the post-InlineDemo duplicate).

Author: samjulien

showcase/shell-docs/src/app/[framework]/[[...slug]]/page.tsx

@@ -22,12 +22,14 @@ import { MDXRemote } from "next-mdx-remote/rsc";
 import remarkGfm from "remark-gfm";
 import rehypeHighlight from "rehype-highlight";
 import { DocsPageView } from "@/components/docs-page-view";
+import { MdxCodeBlock } from "@/components/mdx-code-block";
 import { SidebarFrameworkSelector } from "@/components/sidebar-framework-selector";
 import { SidebarNav } from "@/components/sidebar-nav";
 import { UnscopedDocsPage } from "@/components/unscoped-docs-page";
 import { FrameworkOverview } from "@/components/content/landing-pages/framework-overview";
 import { frameworkOverviews } from "@/data/frameworks";
 import { docsComponents } from "@/lib/mdx-registry";
+import { rehypeCodeMeta } from "@/lib/rehype-code-meta";
 import {
   CONTENT_DIR,
   buildFrameworkOverridesNav,
@@ -444,11 +446,26 @@ async function FrameworkRootPage({ framework }: { framework: string }) {
           afterFeatures = (
             <MDXRemote
               source={raw}
-              components={docsComponents}
+              components={{
+                ...docsComponents,
+                // Mirror DocsPageView: wrap MDX-rendered <pre> blocks
+                // with figure chrome (copy button + optional file-path
+                // caption) so fenced code in after-features.mdx has the
+                // same affordances as fenced code on a regular docs
+                // page. `rehypeCodeMeta` (below) supplies the
+                // `data-title` / `data-language` data-attrs MdxCodeBlock
+                // reads.
+                pre: MdxCodeBlock,
+              }}
               options={{
                 mdxOptions: {
                   remarkPlugins: [remarkGfm],
-                  rehypePlugins: [rehypeHighlight],
+                  // `rehypeCodeMeta` runs AFTER rehype-highlight so it
+                  // sees the `language-<name>` className and the fence
+                  // metastring's `title="..."`; without it, the bare
+                  // rehype-highlight wiring leaves <pre> with no copy
+                  // button and no caption (PR #4830 parity).
+                  rehypePlugins: [rehypeHighlight, rehypeCodeMeta],
                 },
               }}
             />

showcase/shell-docs/src/components/mdx-code-block.tsx

@@ -51,6 +51,34 @@ function extractText(node: React.ReactNode): string {
   return "";
 }
 
+/**
+ * Strip uniform leading whitespace from a multi-line code body.
+ *
+ * Why: when a triple-fenced block sits inside JSX (e.g. ```python inside
+ * `<Tab>`/`<Step>`), MDX preserves the JSX nesting's leading indent on
+ * every body line. extractText() recovers that text faithfully, so the
+ * clipboard payload comes out with 16-24 leading spaces per line and
+ * pasted code is invalid. This helper measures the minimum indent
+ * across non-blank lines and strips it from every line — turning a
+ * uniformly-indented block back into column-0 code.
+ *
+ * Tabs are counted as 1 unit (we don't expand to N spaces); the goal
+ * is to fix uniform-indent leakage, not normalize mixed indentation.
+ * Blank lines are left as-is rather than over-trimmed.
+ */
+function dedent(text: string): string {
+  const lines = text.split("\n");
+  const nonBlank = lines.filter((l) => l.trim().length > 0);
+  if (nonBlank.length === 0) return text;
+  const minIndent = Math.min(
+    ...nonBlank.map((l) => l.match(/^[\s]*/)![0].length),
+  );
+  if (minIndent === 0) return text;
+  return lines
+    .map((l) => (l.length >= minIndent ? l.slice(minIndent) : l))
+    .join("\n");
+}
+
 export function MdxCodeBlock(props: MdxCodeBlockProps) {
   const {
     "data-title": title,
@@ -64,7 +92,7 @@ export function MdxCodeBlock(props: MdxCodeBlockProps) {
   // rehype-highlight always emits a single <code> child, but we walk
   // defensively so an unhighlighted fallback (plain text child) still
   // copies correctly.
-  const codeText = (() => {
+  const rawCodeText = (() => {
     const kids = Children.toArray(children);
     const codeEl = kids.find(
       (k) => isValidElement(k) && (k.type === "code" || k.type === "CODE"),
@@ -77,6 +105,15 @@ export function MdxCodeBlock(props: MdxCodeBlockProps) {
     return extractText(children);
   })();
 
+  // Strip uniform JSX-nesting indent (see `dedent` doc-comment above).
+  // When `codeText !== rawCodeText`, a non-zero indent was leaking from
+  // the fence's JSX container — in that case we also need to dedent the
+  // visible <pre> body so the on-page render matches the copy payload.
+  // Otherwise the user sees correctly-indented code in clipboard but
+  // 24-sp-indented code on the page (or vice versa).
+  const codeText = dedent(rawCodeText);
+  const indentLeaked = codeText !== rawCodeText;
+
   // No title and no need for chrome? Fall through to the global
   // `.reference-content pre` styling — keeps backwards compatibility with
   // pages that don't expect a header strip while still surfacing the copy
@@ -106,7 +143,17 @@ export function MdxCodeBlock(props: MdxCodeBlockProps) {
           {...rest}
           className={`mdx-code-block__pre text-[12.5px] leading-[1.55] overflow-x-auto p-4 m-0 ${className ?? ""}`}
         >
-          {children}
+          {indentLeaked ? (
+            // Fence body was uniformly indented (JSX-nested fence). Render
+            // the dedented plain text so what the user sees matches what
+            // they copy. We lose syntax highlighting on these blocks, but
+            // the alternative is indented-and-invalid code on screen.
+            <code className={`language-${language ?? "plaintext"}`}>
+              {codeText}
+            </code>
+          ) : (
+            children
+          )}
         </pre>
       </div>
     </figure>

showcase/shell-docs/src/content/docs/generative-ui/tool-rendering.mdx

@@ -20,10 +20,6 @@ rendering**.
 
 <InlineDemo demo="tool-rendering" />
 
-<Callout type="info">
-  **Free course:** See this pattern built end-to-end in [Build Interactive Agents with Generative UI](https://www.deeplearning.ai/short-courses/build-interactive-agents-with-generative-ui/) — a free DeepLearning.AI short course taught by CopilotKit's CEO covering the full Generative UI spectrum (Controlled, Declarative, and Open-Ended).
-</Callout>
-
 ## When should I use this?
 
 Render tool calls when you want to:

showcase/shell-docs/src/content/docs/generative-ui/your-components/display-only.mdx

@@ -27,7 +27,7 @@ parameters: ChartProps,
 render: Chart
 });
 
-````
+```
 </Tab>
 <Tab value="chart.tsx">
 ```tsx
@@ -50,7 +50,7 @@ export function Chart({ title, data }: z.infer<typeof ChartProps>) {
     </div>
   );
 }
-````
+```
 
   </Tab>
 </Tabs>