jamdesk 1.1.206 → 1.1.208

package/vendored/components/mdx/MDXComponents.tsx

@@ -179,6 +179,98 @@ function isVideoUrl(src: string | undefined): boolean {
   return VIDEO_EXTENSIONS_IMG.some(ext => pathOnly.toLowerCase().endsWith(ext));
 }
 
+/**
+ * Renders a fenced code block. Marked with CODE_FENCE_MARKER (a static
+ * property, not identity) so CodeGroup.tsx can recognize its own children —
+ * compiled MDX always passes the *component function* as `_components.pre`
+ * (never the string 'pre'), so CodeGroup's `Children.toArray(children)`
+ * sees unresolved elements whose `.type` is this function reference, not
+ * its rendered output. Verified against a real compile(): each fence also
+ * arrives wrapped in a single-child Fragment, so CodeGroup unwraps one
+ * layer before testing the marker.
+ *
+ * A marker property, not a direct import of this function for `===`
+ * comparison, on purpose: MDXComponents already imports CodeGroup (to
+ * register it as the <CodeGroup> tag below), so CodeGroup importing
+ * MDXComponents back would be circular; and reference equality would be
+ * fragile across the dashboard's and CLI's separately vendored copies of
+ * this file if either ever mounted more than one instance. Keep this
+ * function's marker assignment (just below its definition) and
+ * CodeGroup.tsx's CODE_FENCE_MARKER string literal identical — both files
+ * are always vendored together as one unit (vendor-builder.js and
+ * cli/scripts/vendor.js both copy the whole components/ directory), so they
+ * can't drift apart from a partial vendor, only from an un-mirrored edit.
+ */
+function MdxPreBlock({
+  children,
+  'data-title': dataTitle,
+  'data-nocopy': dataNocopy,
+  ...props
+}: HTMLAttributes<HTMLPreElement> & { 'data-title'?: string; 'data-nocopy'?: string }) {
+  const language = getCodeLanguage(props, children);
+
+  // Check for mermaid diagrams - render with Mermaid component
+  if (language === 'mermaid') {
+    const diagramCode = extractTextFromChildren(children);
+    return (
+      <>
+        <Mermaid>{diagramCode}</Mermaid>
+        {/* Crawler / AI fallback: the client-only SVG leaves the server HTML empty.
+            Use <noscript>, NOT sr-only: a JS-disabled crawler reads it, while users
+            with JS (and screen readers) get the real rendered diagram and never see
+            duplicate text. */}
+        {diagramCode.trim() && (
+          <noscript>
+            <pre>{diagramCode}</pre>
+          </noscript>
+        )}
+      </>
+    );
+  }
+
+  // Check for HTTP code blocks - render with special styling
+  if (language === 'http') {
+    const codeText = extractTextFromChildren(children);
+    const parsed = parseHttpRequest(codeText);
+    if (parsed) {
+      return <HttpCodeBlock method={parsed.method} url={parsed.url} />;
+    }
+  }
+
+  // If no title, render the pre element directly
+  // Copy button is added by CodeBlockCopyButton client component, which
+  // reads data-nocopy straight off this DOM node — keep it in place here
+  // (unlike the CodePanel path below, where CodePanel's own hideCopy prop
+  // does the suppressing instead).
+  if (!dataTitle) {
+    return (
+      <pre {...props} data-nocopy={dataNocopy}>
+        {children}
+      </pre>
+    );
+  }
+
+  // Wrap in CodePanel to show the title. `data-nocopy` is deliberately left
+  // off this inner <pre> — CodeBlockCopyButton skips anything inside
+  // [data-code-panel] regardless, and CodePanel's own copy button(s) are
+  // suppressed via `hideCopy` instead.
+  const preElement = <pre {...props}>{children}</pre>;
+
+  return (
+    <CodePanel
+      tabs={[{ label: language, content: preElement, language }]}
+      title={dataTitle}
+      hideTabs={true}
+      className="my-6"
+      enableFullscreen
+      hideCopy={dataNocopy !== undefined}
+    />
+  );
+}
+// See the doc comment above MdxPreBlock — must match CodeGroup.tsx's
+// CODE_FENCE_MARKER string literal exactly.
+(MdxPreBlock as unknown as { jdCodeFenceMarker?: true }).jdCodeFenceMarker = true;
+
 export const MDXComponents = {
   Card,
   // Callout components
@@ -411,56 +503,7 @@ export const MDXComponents = {
     />
   ),
   // Custom pre component to wrap code blocks with titles in CodePanel
-  pre: ({ children, 'data-title': dataTitle, ...props }: HTMLAttributes<HTMLPreElement> & { 'data-title'?: string }) => {
-    const language = getCodeLanguage(props, children);
-
-    // Check for mermaid diagrams - render with Mermaid component
-    if (language === 'mermaid') {
-      const diagramCode = extractTextFromChildren(children);
-      return (
-        <>
-          <Mermaid>{diagramCode}</Mermaid>
-          {/* Crawler / AI fallback: the client-only SVG leaves the server HTML empty.
-              Use <noscript>, NOT sr-only: a JS-disabled crawler reads it, while users
-              with JS (and screen readers) get the real rendered diagram and never see
-              duplicate text. */}
-          {diagramCode.trim() && (
-            <noscript>
-              <pre>{diagramCode}</pre>
-            </noscript>
-          )}
-        </>
-      );
-    }
-
-    // Check for HTTP code blocks - render with special styling
-    if (language === 'http') {
-      const codeText = extractTextFromChildren(children);
-      const parsed = parseHttpRequest(codeText);
-      if (parsed) {
-        return <HttpCodeBlock method={parsed.method} url={parsed.url} />;
-      }
-    }
-
-    // If no title, render the pre element directly
-    // Copy button is added by CodeBlockCopyButton client component
-    if (!dataTitle) {
-      return <pre {...props}>{children}</pre>;
-    }
-
-    // Wrap in CodePanel to show the title
-    const preElement = <pre {...props}>{children}</pre>;
-
-    return (
-      <CodePanel
-        tabs={[{ label: language, content: preElement, language }]}
-        title={dataTitle}
-        hideTabs={true}
-        className="my-6"
-        enableFullscreen
-      />
-    );
-  },
+  pre: MdxPreBlock,
   // Inline code styling is done via CSS in base.css (.prose :not(pre) > code)
   table: (props: TableHTMLAttributes<HTMLTableElement>) => (
     <div className="overflow-x-auto my-6">

package/vendored/components/navigation/Header.tsx

@@ -13,6 +13,7 @@ import { ThemeToggle } from '@/components/theme/ThemeToggle';
 import { LazySearchModal as SearchModal } from '@/components/search/LazySearchModal';
 import { DefaultLogo } from './DefaultLogo';
 import { LanguageSelector } from './LanguageSelector';
+import { ThemePreviewPicker } from './ThemePreviewPicker';
 import LogoutButton from './LogoutButton';
 import { resolveNavigation } from '@/lib/navigation-resolver';
 import { getIconClass } from '@/lib/icon-utils';
@@ -555,6 +556,12 @@ export function Header({ config, layout = 'header-logo', tabsPosition: tabsPosit
                 renders nothing until the client confirms an active session. */}
             {config.auth?.jwt?.enabled === true && <LogoutButton />}
 
+            {/* Theme preview picker — jamdesk-docs only. The component returns
+                null unless the ThemePreviewProvider enables it, and carries its
+                own `hidden lg:block`, so there is no stray wrapper on customer
+                sites. */}
+            <ThemePreviewPicker />
+
             {/* Theme toggle - hidden on mobile since it's in the sidebar menu.
                 Also hidden when appearance.strict pins users to the configured mode. */}
             {!config.appearance?.strict && (

package/vendored/components/navigation/LanguageSelector.tsx

@@ -13,6 +13,7 @@ import {
   extractLanguageFromPath,
   toHreflang,
 } from '@/lib/language-utils';
+import { LANGUAGE_COOKIE } from '@/lib/language-cookie';
 import { useLinkPrefix } from '@/lib/link-prefix-context';
 import { useProjectSlug } from '@/lib/project-slug-context';
 import { getUiStrings } from '@/lib/ui-strings';
@@ -80,6 +81,40 @@ export function LanguageSelector({
   // Find actual default language from config
   const actualDefault = displayedLanguages.find((l) => l.isDefault)?.code || defaultLanguage;
 
+  // One-time migration: a preference saved before server-side routing existed
+  // lives only in localStorage, so the edge cannot see it and would negotiate
+  // over the top of it. Seed the cookie from it once. saveLanguagePreference
+  // writes both stores, so this converges after a single page view and is a
+  // no-op on every visit after that.
+  //
+  // Ordering, stated plainly: this effect runs AFTER the page has already
+  // loaded, which is AFTER any server-side 307 has already picked a language
+  // and pinned its own cookie — no client code can run before a redirect it
+  // hasn't been GET to yet. So a visitor with a stale localStorage
+  // preference and no cookie can land on one wrong-language page (server
+  // negotiated from Accept-Language, disagreeing with their saved choice);
+  // this effect then corrects the cookie on that same page. The wrong
+  // language is shown exactly once — their NEXT visit to the root reads the
+  // corrected cookie (decideLanguageRedirect prioritizes cookie over
+  // Accept-Language) and self-heals. See
+  // __tests__/lib/language-cookie-self-heal.test.ts. Inherent, not a bug —
+  // do not try to make this effect win a race it structurally cannot enter.
+  useEffect(() => {
+    const saved = getLanguagePreference(projectSlug);
+    if (!saved) return;
+    let current: string | undefined;
+    try {
+      current = document.cookie
+        .split('; ')
+        .find((c) => c.startsWith(`${LANGUAGE_COOKIE}=`))
+        ?.split('=')[1];
+    } catch {
+      return; // cookies unavailable — nothing to migrate into
+    }
+    if (current !== saved) saveLanguagePreference(saved, projectSlug);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- mount-only by design; see comment above
+  }, []);
+
   // Check localStorage preference on mount and redirect if needed.
   // Intentionally mount-only: re-running on pathname/language changes would
   // fight the user's in-session navigation choices (they may have explicitly

package/vendored/components/navigation/ThemePreviewPicker.tsx

@@ -0,0 +1,197 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { useOnClickOutside } from '@/hooks/useOnClickOutside';
+import { useLinkPrefix } from '@/lib/link-prefix-context';
+import { useThemePreview } from '@/lib/theme-preview-context';
+import { THEME_PREVIEW_COOKIE } from '@/lib/theme-preview';
+import { getAllThemes, type ThemeName } from '@/themes';
+
+/**
+ * Jamdesk-only affordance: re-skins jamdesk.com/docs with any built-in theme so
+ * prospects can see all four on a real docs site.
+ *
+ * The gate is server-side (lib/theme-preview.ts decides whether the provider is
+ * enabled); this component ALSO self-guards on `enabled` so a mistake in
+ * Header's conditional can never leak it onto a customer site.
+ *
+ * Strings are English-only by design. jamdesk-docs has fr/es locales, but the
+ * only prose here is "Reset to default" and "Default" — everything else is a
+ * proper noun — and adding entries to lib/ui-strings.ts for a sales affordance
+ * isn't worth the churn across every locale.
+ */
+export function ThemePreviewPicker() {
+  const { enabled, activeTheme, defaultTheme } = useThemePreview();
+  const linkPrefix = useLinkPrefix();
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const listRef = useRef<HTMLUListElement>(null);
+
+  // Every close path but a theme selection runs through here. A click-outside
+  // would otherwise unmount the focused option and drop focus to <body>, so
+  // the visitor's next Tab restarts at the top of the document. Synchronous on
+  // purpose: this runs during the mousedown dispatch, so a click that lands on
+  // something focusable still ends up there — the browser's own focus default
+  // wins afterwards, which is what it should do.
+  function closeAndRestoreFocus() {
+    const hadFocus = !!containerRef.current?.contains(document.activeElement);
+    setIsOpen(false);
+    if (hadFocus) buttonRef.current?.focus();
+  }
+
+  useOnClickOutside(containerRef, closeAndRestoreFocus, isOpen);
+
+  // Move focus onto the active option when the menu opens. Without this the
+  // trigger keeps focus and Tab is the only way forward — and an earlier cut of
+  // this component closed the menu on Tab (copied from LanguageSelector, where
+  // that is safe only because ArrowUp/Down have already moved focus into the
+  // list), which left the widget keyboard-inoperable: WCAG 2.1.1.
+  useEffect(() => {
+    if (!isOpen) return;
+    const options = listRef.current?.querySelectorAll<HTMLElement>('[role="option"]');
+    if (!options?.length) return;
+    const active = Array.from(options).find((o) => o.getAttribute('aria-selected') === 'true');
+    (active ?? options[0]).focus();
+  }, [isOpen]);
+
+  if (!enabled) return null;
+
+  // Escape only. Arrow-key roving focus is deliberately NOT copied from
+  // LanguageSelector: its options are a customer-configurable list, whereas
+  // this is a fixed four-row Jamdesk-only affordance whose rows are ordinary
+  // buttons that Tab already walks. Escape must stay — it is the way back out
+  // of a menu focus has just been moved into.
+  function handleKeyDown(e: React.KeyboardEvent) {
+    if (e.key === 'Escape') closeAndRestoreFocus();
+  }
+
+  // Tabbing past the last row leaves the widget; close behind it. This is what
+  // LanguageSelector's Tab branch achieved, without eating the Tab that is this
+  // component's only way INTO the option list.
+  function handleFocusOut(e: React.FocusEvent) {
+    // A null relatedTarget means focus landed on <body>, NOT that focus left
+    // the widget — and since the menu always opens with focus inside itself,
+    // that blur comes from inside. Safari and Firefox-on-macOS produce it on
+    // every mousedown over a <button>; Chrome produces it for a mousedown on
+    // this panel's own padding or its divider band. Closing there unmounts the
+    // row before its click can land, so no theme is ever applied. Do not
+    // "simplify" this branch away: genuine outside-pointer closes are
+    // useOnClickOutside's job, and Escape and Tab both supply a real
+    // relatedTarget. The only thing given up is close-on-window-blur.
+    if (!(e.relatedTarget instanceof Element)) return;
+    if (!e.currentTarget.contains(e.relatedTarget)) setIsOpen(false);
+  }
+
+  // `null` clears the cookie. Path mirrors the docs prefix so the cookie is
+  // scoped to /docs on jamdesk.com and to / on jamdesk-docs.jamdesk.app.
+  function applyTheme(name: ThemeName | null) {
+    const path = linkPrefix || '/';
+    // SESSION cookie on the set path — no Max-Age, so the preview dies with the
+    // browser. The picker is desktop-only (`hidden lg:block`), so a persisted
+    // preview would follow a visitor to mobile with no affordance to reset it.
+    // The CLEAR path is the opposite and must stay explicit: `Max-Age=0` is
+    // what expires an existing cookie, and omitting it there would leave the
+    // preview in place.
+    const expiry = name === null ? '; Max-Age=0' : '';
+    // `Secure` means the browser silently DROPS this cookie over plain http, so
+    // the picker looks inert when QA'd on http://localhost — use https or a
+    // deployed host.
+    document.cookie =
+      `${THEME_PREVIEW_COOKIE}=${name ?? ''}; Path=${path}${expiry}; SameSite=Lax; Secure`;
+    // Close first: the reload is not instant, and an open menu left showing the
+    // previous selection reads as a dead click.
+    setIsOpen(false);
+    // Full reload — the theme is applied by the server render (CSS variables,
+    // font class and layout variant all key off config.theme), so there is no
+    // client-side state to update.
+    window.location.reload();
+  }
+
+  const allThemes = getAllThemes();
+  const activeDisplayName = allThemes.find((t) => t.name === activeTheme)?.displayName ?? '';
+
+  return (
+    <div
+      ref={containerRef}
+      className="relative hidden lg:block"
+      onKeyDown={handleKeyDown}
+      onBlur={handleFocusOut}
+    >
+      <button
+        ref={buttonRef}
+        onClick={() => {
+          setIsOpen(!isOpen);
+          // Closing unmounts the focused option. Safari does not focus a
+          // button on mousedown, so without this focus would land on <body>.
+          // Mirrors Prompt.tsx's trigger.
+          if (isOpen) buttonRef.current?.focus();
+        }}
+        aria-expanded={isOpen}
+        aria-haspopup="listbox"
+        aria-label={`Preview a theme: ${activeDisplayName}`}
+        className="flex items-center gap-2 rounded-lg px-2 py-1.5 cursor-pointer transition-colors text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-tertiary)]"
+      >
+        <i
+          className="fa-solid fa-palette text-[12px] text-[var(--color-text-tertiary)]"
+          aria-hidden="true"
+        />
+        <i
+          className={`fa-solid fa-chevron-down text-[10px] text-[var(--color-text-tertiary)] transition-transform ${isOpen ? 'rotate-180' : ''}`}
+          aria-hidden="true"
+        />
+      </button>
+
+      {isOpen && (
+        <div
+          className="absolute right-0 top-full mt-1 z-50 min-w-[190px] py-1 bg-[var(--color-bg-primary)] border border-[var(--color-border)] rounded-lg"
+          style={{ boxShadow: 'var(--shadow-lg)' }}
+        >
+          <ul ref={listRef} role="listbox" aria-label="Preview a theme">
+            {allThemes.map((theme) => {
+              const isActive = theme.name === activeTheme;
+              return (
+                <li key={theme.name}>
+                  <button
+                    role="option"
+                    aria-selected={isActive}
+                    onClick={() => applyTheme(theme.name as ThemeName)}
+                    className="w-full flex items-center justify-between gap-3 px-3 py-2 text-left text-sm cursor-pointer text-[var(--color-text-primary)] hover:bg-[var(--color-bg-tertiary)]"
+                  >
+                    <span>{theme.displayName}</span>
+                    <span className="flex items-center gap-2">
+                      {theme.name === defaultTheme && (
+                        <span className="text-xs text-[var(--color-text-tertiary)]">Default</span>
+                      )}
+                      {isActive && (
+                        <i
+                          className="fa-solid fa-check text-[11px] text-[var(--color-accent)]"
+                          aria-hidden="true"
+                        />
+                      )}
+                    </span>
+                  </button>
+                </li>
+              );
+            })}
+          </ul>
+
+          {/* Outside the <ul>: a `role="listbox"` may only own `option` and
+              `group` children, and a reset action is neither. Nesting it as a
+              bare <li><button> would put a `listitem` inside a listbox, which
+              screen readers drop or mis-announce. LanguageSelector — the
+              pattern this component mirrors — has no extra row, so there is no
+              existing precedent to copy here. */}
+          <div className="mt-1 pt-1 border-t border-[var(--color-border)]">
+            <button
+              onClick={() => applyTheme(null)}
+              className="w-full px-3 py-2 text-left text-sm cursor-pointer text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-tertiary)]"
+            >
+              Reset to default
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/vendored/components/ui/CodePanel.tsx

@@ -18,6 +18,15 @@ export interface CodePanelTab {
   statusCode?: string;
   /** Font Awesome icon class for the tab (e.g., 'fa-brands fa-js') */
   icon?: string;
+  /**
+   * Suppress the copy button while THIS tab is the active one. Set from a
+   * `nocopy` code fence. Per-tab rather than panel-wide because a CodeGroup
+   * mixes flagged and unflagged fences in one panel: the old panel-only flag
+   * forced an all-or-nothing choice, and CodeGroup resolved it by honouring
+   * nocopy for single-block groups only — so a nocopy fence sharing a group
+   * with any sibling silently kept its copy button.
+   */
+  hideCopy?: boolean;
 }
 
 /**
@@ -38,6 +47,13 @@ export interface CodePanelProps {
   hideTabs?: boolean;
   /** Show expand button to open fullscreen modal */
   enableFullscreen?: boolean;
+  /**
+   * Suppress the copy button for every tab, for blocks whose rendered text is
+   * not runnable — console transcripts with prompts and output interleaved,
+   * redacted values, deliberate counter-examples. A tab's own `hideCopy`
+   * overrides this while that tab is active.
+   */
+  hideCopy?: boolean;
   /** Additional CSS classes */
   className?: string;
 }
@@ -114,6 +130,7 @@ export function CodePanel({
   title,
   hideTabs = false,
   enableFullscreen = false,
+  hideCopy = false,
   className = '',
 }: CodePanelProps) {
   const [activeTab, setActiveTab] = useState(0);
@@ -133,16 +150,28 @@ export function CodePanel({
   // Extract tab labels for sync matching
   const tabLabels = tabs.map(t => t.label);
 
-  // Sync effect: when selectedLabel changes, switch to matching tab
+  // Sync effect: when selectedLabel changes, switch to the matching tab.
+  //
+  // The "already showing it" guard is load-bearing, not an optimisation.
+  // findIndex returns the FIRST match, and two fences in one CodeGroup can
+  // resolve to the same tab label: getTabLabel deliberately collapses several
+  // languages onto one display string (bash -> cURL), and a translation can
+  // collapse two distinct metas into one (projects/mintlify/fr/organize/
+  // navigation.mdx does). Without the guard, clicking the second such tab
+  // broadcast its label, this effect resolved that echo back to the FIRST
+  // index and snapped activeTab there — so the second tab could never be
+  // opened at all, permanently. Selection is therefore satisfied by the ACTIVE
+  // tab's own label rather than by the first index that happens to carry it,
+  // which keeps cross-panel sync intact (a panel showing a different language
+  // still switches) while leaving every tab reachable. Deduplicating labels
+  // would hide the collision without restoring access, and would change what
+  // the reader sees.
   useEffect(() => {
-    if (sync?.selectedLabel) {
-      const matchIndex = tabLabels.findIndex(
-        label => label.toLowerCase() === sync.selectedLabel?.toLowerCase()
-      );
-      if (matchIndex !== -1 && matchIndex !== activeTab) {
-        setActiveTab(matchIndex);
-      }
-    }
+    const selected = sync?.selectedLabel?.toLowerCase();
+    if (!selected) return;
+    if (tabLabels[activeTab]?.toLowerCase() === selected) return;
+    const matchIndex = tabLabels.findIndex((label) => label.toLowerCase() === selected);
+    if (matchIndex !== -1) setActiveTab(matchIndex);
   }, [sync?.selectedLabel, tabLabels, activeTab]);
 
   const handleTabClick = (index: number) => {
@@ -237,6 +266,9 @@ export function CodePanel({
   if (tabs.length === 0) return null;
 
   const currentTab = tabs[activeTab] || tabs[0];
+  // The active tab decides; the panel-level prop is the fallback for callers
+  // that set no per-tab flag (MdxPreBlock's titled branch, RequestExample).
+  const copyHidden = currentTab?.hideCopy ?? hideCopy;
   const isCompact = variant === 'compact';
   const fontSize = isCompact ? '11.5px' : '13.44px';
 
@@ -304,27 +336,29 @@ export function CodePanel({
                 </button>
               )}
               {/* Copy Button */}
-              <button
-                onClick={handleCopy}
-                className={`p-1.5 rounded-md transition-colors flex-shrink-0 cursor-pointer ${enableFullscreen ? 'ml-1' : ''}`}
-                style={{ color: codePanelColors.textMuted }}
-                onMouseEnter={(e) => {
-                  e.currentTarget.style.backgroundColor = codePanelColors.tabHoverBg;
-                  e.currentTarget.style.color = codePanelColors.text;
-                }}
-                onMouseLeave={(e) => {
-                  e.currentTarget.style.backgroundColor = 'transparent';
-                  e.currentTarget.style.color = codePanelColors.textMuted;
-                }}
-                title="Copy code"
-                aria-label="Copy code to clipboard"
-              >
-                {copied ? (
-                  <i className="fa-solid fa-check text-[14px] text-emerald-500" aria-hidden="true" />
-                ) : (
-                  <i className="fa-regular fa-copy text-[14px]" aria-hidden="true" />
-                )}
-              </button>
+              {!copyHidden && (
+                <button
+                  onClick={handleCopy}
+                  className={`p-1.5 rounded-md transition-colors flex-shrink-0 cursor-pointer ${enableFullscreen ? 'ml-1' : ''}`}
+                  style={{ color: codePanelColors.textMuted }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.backgroundColor = codePanelColors.tabHoverBg;
+                    e.currentTarget.style.color = codePanelColors.text;
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.backgroundColor = 'transparent';
+                    e.currentTarget.style.color = codePanelColors.textMuted;
+                  }}
+                  title="Copy code"
+                  aria-label="Copy code to clipboard"
+                >
+                  {copied ? (
+                    <i className="fa-solid fa-check text-[14px] text-emerald-500" aria-hidden="true" />
+                  ) : (
+                    <i className="fa-regular fa-copy text-[14px]" aria-hidden="true" />
+                  )}
+                </button>
+              )}
             </div>
           </div>
         ) : (
@@ -432,27 +466,29 @@ export function CodePanel({
             </button>
           )}
           {/* Fixed copy button */}
-          <button
-            onClick={handleCopy}
-            className={`p-1.5 rounded-md transition-colors flex-shrink-0 cursor-pointer ${enableFullscreen ? 'ml-1' : 'ml-auto'}`}
-            style={{ color: codePanelColors.textMuted }}
-            onMouseEnter={(e) => {
-              e.currentTarget.style.backgroundColor = codePanelColors.tabHoverBg;
-              e.currentTarget.style.color = codePanelColors.text;
-            }}
-            onMouseLeave={(e) => {
-              e.currentTarget.style.backgroundColor = 'transparent';
-              e.currentTarget.style.color = codePanelColors.textMuted;
-            }}
-            title="Copy code"
-            aria-label="Copy code to clipboard"
-          >
-            {copied ? (
-              <i className="fa-solid fa-check text-[14px] text-emerald-500" aria-hidden="true" />
-            ) : (
-              <i className="fa-regular fa-copy text-[14px]" aria-hidden="true" />
-            )}
-          </button>
+          {!copyHidden && (
+            <button
+              onClick={handleCopy}
+              className={`p-1.5 rounded-md transition-colors flex-shrink-0 cursor-pointer ${enableFullscreen ? 'ml-1' : 'ml-auto'}`}
+              style={{ color: codePanelColors.textMuted }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.backgroundColor = codePanelColors.tabHoverBg;
+                e.currentTarget.style.color = codePanelColors.text;
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.backgroundColor = 'transparent';
+                e.currentTarget.style.color = codePanelColors.textMuted;
+              }}
+              title="Copy code"
+              aria-label="Copy code to clipboard"
+            >
+              {copied ? (
+                <i className="fa-solid fa-check text-[14px] text-emerald-500" aria-hidden="true" />
+              ) : (
+                <i className="fa-regular fa-copy text-[14px]" aria-hidden="true" />
+              )}
+            </button>
+          )}
         </div>
         {/* Custom scrollbar track - always visible when there's overflow */}
         {hasOverflow && (
@@ -525,6 +561,7 @@ export function CodePanel({
           tabs={tabs}
           title={title}
           initialTabIndex={activeTab}
+          hideCopy={hideCopy}
         />
       )}
     </div>