jamdesk 1.1.6 → 1.1.8

package/package.json

@@ -1,36 +1,39 @@
 {
   "name": "jamdesk",
-  "version": "1.1.6",
+  "version": "1.1.8",
   "description": "CLI for Jamdesk — build, preview, and deploy documentation sites from MDX. Dev server with hot reload, 50+ components, OpenAPI support, AI search, and Mintlify migration",
   "keywords": [
     "jamdesk",
     "documentation",
     "documentation-generator",
     "documentation-platform",
+    "documentation-tool",
     "docs",
     "docs-as-code",
+    "docs-generator",
     "mdx",
     "markdown",
     "cli",
-    "dev-server",
-    "hot-reload",
-    "turbopack",
     "developer-tools",
     "api-documentation",
     "openapi",
     "api-reference",
-    "static-site",
+    "static-site-generator",
     "nextjs",
+    "react",
+    "typescript",
     "technical-writing",
     "mintlify",
     "mintlify-alternative",
+    "docusaurus-alternative",
+    "gitbook-alternative",
     "documentation-hosting",
     "documentation-site",
     "developer-documentation",
     "api-docs",
-    "react-components",
     "docs-site-generator",
-    "ai-search"
+    "ai-search",
+    "llms-txt"
   ],
   "homepage": "https://www.jamdesk.com",
   "bugs": {
@@ -44,7 +47,7 @@
   "license": "Apache-2.0",
   "author": {
     "name": "Jamdesk",
-    "email": "hello@jamdesk.com",
+    "email": "support@jamdesk.com",
     "url": "https://www.jamdesk.com"
   },
   "type": "module",
@@ -97,12 +100,14 @@
     "ajv-formats": "^3.0.1",
     "chalk": "^5.3.0",
     "commander": "^14.0.3",
+    "dictionary-en": "^4.0.0",
     "fastest-levenshtein": "^1.0.16",
     "fs-extra": "^11.2.0",
     "glob": "^13.0.6",
     "gray-matter": "^4.0.3",
     "ignore": "^7.0.5",
     "json5": "^2.2.3",
+    "nspell": "^2.1.5",
     "open": "^11.0.0",
     "ora": "^9.3.0",
     "tar": "^7.5.9"
@@ -111,8 +116,8 @@
     "@mdx-js/mdx": "^3.1.1",
     "@types/fs-extra": "^11.0.0",
     "@types/node": "^25.5.0",
-    "typescript": "^5.3.0",
-    "vitest": "^4.1.0"
+    "typescript": "^6.0.2",
+    "vitest": "^4.1.2"
   },
   "engines": {
     "node": ">=20.0.0"

package/vendored/app/[[...slug]]/page.tsx

@@ -42,6 +42,7 @@ import { getLatexRemarkPlugins, getLatexRehypePlugins } from '@/lib/latex-config
 import { getTypographyRemarkPlugins } from '@/lib/typography-config';
 import { recmaCompoundComponents } from '@/lib/recma-compound-components';
 import { extractInlineComponents } from '@/lib/process-mdx-with-exports';
+import { buildEndpointFromMdx } from '@/lib/build-endpoint-from-mdx';
 import { mdxSecurityOptions } from '@/lib/mdx-security-options';
 import fs from 'fs';
 import path from 'path';
@@ -67,7 +68,7 @@ import {
   generateCodeExamples,
   formatOpenApiWarning,
   type OpenApiEndpointData,
-  type CodeExamples,
+  type CodeExample,
   type AuthMethod,
 } from '@/lib/openapi';
 import { ApiEndpoint } from '@/components/mdx/ApiEndpoint';
@@ -134,6 +135,7 @@ interface FrontmatterData {
   description?: string;
   api?: string;
   openapi?: string;
+  playground?: string;
   mode?: string;
   hideFooter?: boolean;
   rss?: boolean;
@@ -505,7 +507,7 @@ export default async function DocPage({ params }: PageProps) {
 
   // Extract and compile inline component exports from MDX
   // Only pass MDXComponents (server-compatible) to inline extraction
-  const { inlineComponents } = await extractInlineComponents(content, MDXComponents);
+  const { inlineComponents, paramFields } = await extractInlineComponents(content, MDXComponents);
 
   // Check for component name collisions and warn
   const overriddenComponents = Object.keys(inlineComponents).filter(
@@ -560,7 +562,7 @@ export default async function DocPage({ params }: PageProps) {
   
   // Parse OpenAPI endpoint data if openapi frontmatter is present
   let openApiEndpointData: OpenApiEndpointData | null = null;
-  let openApiCodeExamples: CodeExamples | null = null;
+  let openApiCodeExamples: CodeExample[] | null = null;
 
   // OpenAPI spec parsing - supports both static and ISR modes
   if (data.openapi && typeof data.openapi === 'string') {
@@ -591,7 +593,8 @@ export default async function DocPage({ params }: PageProps) {
 
       // Generate code examples
       const authMethod = config.api?.mdx?.auth?.method as AuthMethod | undefined;
-      openApiCodeExamples = generateCodeExamples(openApiEndpointData, { authMethod });
+      const languages = config.api?.examples?.languages;
+      openApiCodeExamples = generateCodeExamples(openApiEndpointData, { authMethod, languages });
     } catch (err) {
       // Log formatted warning to console (appears in CLI and build logs)
       // Check if it's an OpenAPI validation error with our format
@@ -607,16 +610,12 @@ export default async function DocPage({ params }: PageProps) {
   // Parse MDX api field for pages with api: frontmatter (but not openapi:)
   let mdxApiMethod: HttpMethod | null = null;
   let mdxApiPath: string | null = null;
-  let mdxApiBaseUrl: string | undefined;
 
   if (data.api && typeof data.api === 'string' && !data.openapi) {
     const parsed = parseMdxApiField(data.api);
     if (parsed) {
       mdxApiMethod = parsed.method;
       mdxApiPath = parsed.path;
-      // Get server URL from config, with fallback
-      const serverConfig = config.api?.mdx?.server;
-      mdxApiBaseUrl = Array.isArray(serverConfig) ? serverConfig[0] : serverConfig;
     }
   }
 
@@ -644,6 +643,23 @@ export default async function DocPage({ params }: PageProps) {
   // Prose class for MDX content styling (defined in base.css)
   const proseClasses = 'prose max-w-none';
 
+  // Playground configuration — covers both openapi: and api: pages
+  const hasApiEndpoint = openApiEndpointData || (mdxApiMethod && mdxApiPath);
+  const playgroundDisplay = hasApiEndpoint
+    ? ((data.playground as 'interactive' | 'simple' | 'none' | undefined)
+        || config.api?.playground?.display || 'none') as 'interactive' | 'simple' | 'none'
+    : 'none';
+  const mdxServerConfig = config.api?.mdx?.server;
+  const fallbackServerUrl = Array.isArray(mdxServerConfig) ? mdxServerConfig[0] : mdxServerConfig;
+  const proxyEnabled = config.api?.playground?.proxy
+    ?? (playgroundDisplay === 'interactive');
+
+  // Build endpoint data for api: pages (for playground)
+  let mdxEndpointData: OpenApiEndpointData | undefined;
+  if (!openApiEndpointData && mdxApiMethod && mdxApiPath && playgroundDisplay !== 'none') {
+    mdxEndpointData = buildEndpointFromMdx(mdxApiMethod, mdxApiPath, paramFields, fallbackServerUrl);
+  }
+
   // For API pages, wrap the entire content area with ApiPageWrapper
   // so code panels can be positioned as siblings at the page level
   if (isApiPage) {
@@ -676,11 +692,24 @@ export default async function DocPage({ params }: PageProps) {
           <div className={proseClasses}>
             {/* MDX API endpoint badge (for pages with api: frontmatter) */}
             {mdxApiMethod && mdxApiPath && (
-              <ApiEndpoint
-                method={mdxApiMethod}
-                path={mdxApiPath}
-                baseUrl={mdxApiBaseUrl}
-              />
+              mdxEndpointData && playgroundDisplay !== 'none' ? (
+                <OpenApiEndpoint
+                  endpoint={mdxEndpointData}
+                  playgroundOnly
+                  playgroundDisplay={playgroundDisplay}
+                  authMethod={config.api?.mdx?.auth?.method as AuthMethod | undefined}
+                  authHeaderName={config.api?.mdx?.auth?.name}
+                  serverUrl={fallbackServerUrl}
+                  proxyEnabled={proxyEnabled}
+                  languages={config.api?.examples?.languages}
+                />
+              ) : (
+                <ApiEndpoint
+                  method={mdxApiMethod}
+                  path={mdxApiPath}
+                  baseUrl={fallbackServerUrl}
+                />
+              )
             )}
 
             {/* OpenAPI endpoint documentation (auto-generated from spec) */}
@@ -688,6 +717,12 @@ export default async function DocPage({ params }: PageProps) {
               <OpenApiEndpoint
                 endpoint={openApiEndpointData}
                 codeExamples={openApiCodeExamples || undefined}
+                playgroundDisplay={playgroundDisplay}
+                authMethod={config.api?.mdx?.auth?.method as AuthMethod | undefined}
+                authHeaderName={config.api?.mdx?.auth?.name}
+                serverUrl={fallbackServerUrl}
+                proxyEnabled={proxyEnabled}
+                languages={config.api?.examples?.languages}
               />
             )}
 

package/vendored/app/api/assets/[...path]/route.ts

@@ -18,6 +18,8 @@ const CACHE_DURATIONS: Record<string, number> = {
   'image/svg+xml': 86400, // 1 day (may change)
   'image/x-icon': 31536000,
   'application/pdf': 86400,
+  'video/mp4': 31536000,   // 1 year (busted by ?v= query param on new builds)
+  'video/webm': 31536000,
   default: 3600, // 1 hour
 };
 

package/vendored/components/layout/LayoutWrapper.tsx

@@ -37,10 +37,9 @@ function useMediaQuery(query: string): boolean {
 
 export function LayoutWrapper({ config, children }: LayoutWrapperProps) {
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
-  // Chat is on by default in production; projects can opt out with chat.enabled: false.
-  // Hidden in local dev — the chat API route needs Upstash Vector + Anthropic API.
-  const chatEnabled = process.env.NODE_ENV === 'production'
-    && (config.chat?.enabled !== false);
+  // Chat button is shown in both dev and production so the layout matches.
+  // In dev mode, clicking it shows a "production only" notice instead of opening the panel.
+  const chatEnabled = config.chat?.enabled !== false;
 
   // xl breakpoint (1280px) — chat renders inline on desktop, overlay on mobile
   const isDesktop = useMediaQuery('(min-width: 1280px)');

package/vendored/components/mdx/ApiEndpoint.tsx

@@ -6,6 +6,7 @@ interface ApiEndpointProps {
   method: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE' | 'HEAD' | 'OPTIONS' | 'TRACE';
   path: string;
   baseUrl?: string;
+  onTryIt?: () => void;
 }
 
 const methodColors: Record<string, { bg: string; text: string; border: string }> = {
@@ -51,7 +52,7 @@ const methodColors: Record<string, { bg: string; text: string; border: string }>
   },
 };
 
-export function ApiEndpoint({ method, path, baseUrl = 'https://api.jamdesk.com/api' }: ApiEndpointProps) {
+export function ApiEndpoint({ method, path, baseUrl = 'https://api.jamdesk.com/api', onTryIt }: ApiEndpointProps) {
   const [copied, setCopied] = useState(false);
   const colors = methodColors[method] || methodColors.GET;
   const fullUrl = `${baseUrl}${path}`;
@@ -73,10 +74,20 @@ export function ApiEndpoint({ method, path, baseUrl = 'https://api.jamdesk.com/a
         <span className="text-[var(--color-text-muted)]">{baseUrl}</span>
         <span className="text-[var(--color-text-primary)]">{path}</span>
       </span>
+      {/* Try it button */}
+      {onTryIt && (
+        <button
+          onClick={onTryIt}
+          className="px-2.5 py-1 text-xs font-medium rounded-md bg-gradient-to-r from-[var(--color-accent)] to-[var(--color-accent-hover,var(--color-accent))] text-white hover:opacity-90 transition-opacity cursor-pointer"
+          aria-label="Open API playground"
+        >
+          Try it
+        </button>
+      )}
       {/* Copy button */}
       <button
         onClick={handleCopy}
-        className="p-1.5 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] rounded-md transition-colors"
+        className="p-1.5 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] rounded-md transition-colors cursor-pointer"
         title="Copy endpoint URL"
         aria-label="Copy endpoint URL"
       >

package/vendored/components/mdx/MDXComponents.tsx

@@ -30,6 +30,7 @@ import { Tree, TreeFolder, TreeFile } from './Tree';
 import { Columns } from './Columns';
 import { View, ViewProvider, ViewSelector, ViewWrapper } from './View';
 import { YouTube } from './YouTube';
+import { Video } from './Video';
 
 /**
  * Extract language from a pre element for tab label
@@ -148,6 +149,14 @@ function HttpCodeBlock({ method, url }: { method: string; url: string }) {
   );
 }
 
+/** Fallback for raw <img src="video.mp4"> in MDX (preprocessor handles markdown syntax) */
+const VIDEO_EXTENSIONS_IMG = ['.mp4', '.webm'];
+function isVideoUrl(src: string | undefined): boolean {
+  if (!src) return false;
+  const pathOnly = src.split('?')[0];
+  return VIDEO_EXTENSIONS_IMG.some(ext => pathOnly.toLowerCase().endsWith(ext));
+}
+
 export const MDXComponents = {
   Card,
   // Callout components
@@ -218,6 +227,8 @@ export const MDXComponents = {
   ViewWrapper,
   // Media embeds
   YouTube,
+  // Video player for local video files
+  Video,
   // Sized images from preprocess-mdx (![alt](url =WIDTHx) syntax).
   // These are output as <SizedImage> JSX so they go through component mapping
   // (raw <img> JSX in MDX bypasses the components provider).
@@ -253,6 +264,11 @@ export const MDXComponents = {
     // Destructure and ignore any other props to prevent them from being passed to DOM
     ...rest
   }: any) => {
+    // Check if this is a video file — render <Video> instead of <ZoomableImage>
+    if (isVideoUrl(src)) {
+      return <Video src={src} title={alt || undefined} />;
+    }
+
     // Check for data-no-zoom attribute or noZoom prop (handle both camelCase and lowercase)
     const disableZoom = dataNoZoom === 'true' || dataNoZoom === true ||
                         noZoom === true || noZoom === 'true' ||

package/vendored/components/mdx/OpenApiEndpoint.tsx

@@ -1,6 +1,8 @@
 'use client';
 
-import { useState, useMemo } from 'react';
+import { useDevOnlyNotice, DEV_FEATURE } from '../ui/DevOnlyNotice';
+
+import { useState, useEffect, useMemo } from 'react';
 import { ApiEndpoint } from './ApiEndpoint';
 import { ParamField } from './ParamField';
 import { CodeGroup } from './CodeGroup';
@@ -14,9 +16,10 @@ import type {
   OpenApiEndpointData,
   ParsedParameter,
   ParsedResponse,
-  CodeExamples,
+  CodeExample,
   JsonSchema,
   SecurityRequirement,
+  AuthMethod,
 } from '@/lib/openapi/types';
 
 // Preload Shiki highlighter on module load
@@ -28,9 +31,25 @@ interface OpenApiEndpointProps {
   /** Endpoint data from OpenAPI spec */
   endpoint: OpenApiEndpointData;
   /** Generated code examples */
-  codeExamples?: CodeExamples;
+  codeExamples?: CodeExample[];
   /** Additional content to render after endpoint info */
   children?: React.ReactNode;
+  /** Playground display mode */
+  playgroundDisplay?: 'interactive' | 'simple' | 'none';
+  /** Auth method for playground */
+  authMethod?: AuthMethod;
+  /** Custom auth header name */
+  authHeaderName?: string;
+  /** Fallback server URL when endpoint.servers is empty */
+  serverUrl?: string;
+  /** Whether CORS proxy is enabled */
+  proxyEnabled?: boolean;
+  /** Languages for code generation */
+  languages?: string[];
+  /** When true, render only the ApiEndpoint badge (with Try it) + PlaygroundModal.
+   *  Skips all auto-generated param docs, response panels, and code examples.
+   *  Used for api: pages where the MDX content provides the documentation. */
+  playgroundOnly?: boolean;
 }
 
 /**
@@ -834,35 +853,23 @@ function ResponseFieldItem({
 /**
  * Code examples section - renders in right panel using CodePanel
  */
-function CodeExamplesSection({ examples }: { examples: CodeExamples }) {
+function CodeExamplesSection({ examples }: { examples: CodeExample[] }) {
   const codeItems = useMemo(
-    () => [
-      { code: examples.curl, language: 'bash' },
-      { code: examples.python, language: 'python' },
-      { code: examples.javascript, language: 'javascript' },
-    ],
-    [examples.curl, examples.python, examples.javascript]
+    () => examples.map(ex => ({ code: ex.code, language: ex.language })),
+    [examples]
   );
 
   const { results: highlightedResults, isLoading } = useShikiHighlightMultiple(codeItems);
 
-  // Render full Shiki HTML for theme background support
+  // Shiki generates HTML from trusted code strings (not user input)
   const tabs: CodePanelTab[] = useMemo(
-    () => [
-      {
-        label: 'cURL',
-        content: <div dangerouslySetInnerHTML={{ __html: highlightedResults[0] || '' }} />,
-      },
-      {
-        label: 'Python',
-        content: <div dangerouslySetInnerHTML={{ __html: highlightedResults[1] || '' }} />,
-      },
-      {
-        label: 'JavaScript',
-        content: <div dangerouslySetInnerHTML={{ __html: highlightedResults[2] || '' }} />,
-      },
-    ],
-    [highlightedResults]
+    () => examples.map((ex, i) => ({
+      label: ex.label,
+      content: highlightedResults[i]
+        ? <div dangerouslySetInnerHTML={{ __html: highlightedResults[i] }} />
+        : null,
+    })),
+    [examples, highlightedResults]
   );
 
   // Don't render until highlighting is complete to prevent flash of unformatted content
@@ -880,13 +887,20 @@ function CodeExamplesSection({ examples }: { examples: CodeExamples }) {
 export function OpenApiEndpoint({
   endpoint,
   codeExamples,
-  children
+  children,
+  playgroundDisplay = 'none',
+  authMethod,
+  authHeaderName,
+  serverUrl,
+  proxyEnabled,
+  languages,
+  playgroundOnly,
 }: OpenApiEndpointProps) {
-  const { 
-    method, 
-    path, 
-    summary, 
-    description, 
+  const {
+    method,
+    path,
+    summary,
+    description,
     deprecated,
     parameters,
     requestBody,
@@ -895,15 +909,33 @@ export function OpenApiEndpoint({
     externalDocs,
     servers,
   } = endpoint;
-  
+
   // Group parameters by location
   const pathParams = parameters.filter(p => p.in === 'path');
   const queryParams = parameters.filter(p => p.in === 'query');
   const headerParams = parameters.filter(p => p.in === 'header');
   const cookieParams = parameters.filter(p => p.in === 'cookie');
-  
+
   const baseUrl = servers[0]?.url;
-  
+
+  // Playground state
+  const showPlayground = playgroundDisplay !== 'none';
+  const { showNotice: showDevNotice, notice: devNotice } = useDevOnlyNotice();
+
+  if (playgroundOnly) {
+    return (
+      <div className="openapi-endpoint">
+        <ApiEndpoint
+          method={method}
+          path={path}
+          baseUrl={baseUrl}
+          onTryIt={showPlayground ? () => { showDevNotice(DEV_FEATURE.API_PLAYGROUND); } : undefined}
+        />
+        {devNotice}
+      </div>
+    );
+  }
+
   return (
     <div className="openapi-endpoint">
       {/* Deprecation Warning */}
@@ -917,7 +949,12 @@ export function OpenApiEndpoint({
       )}
       
       {/* Endpoint Badge */}
-      <ApiEndpoint method={method} path={path} baseUrl={baseUrl} />
+      <ApiEndpoint
+        method={method}
+        path={path}
+        baseUrl={baseUrl}
+        onTryIt={showPlayground ? () => { showDevNotice(DEV_FEATURE.API_PLAYGROUND); } : undefined}
+      />
       
       {/* External Docs */}
       {externalDocs && (
@@ -961,9 +998,12 @@ export function OpenApiEndpoint({
       
       {/* Responses - field documentation in main content */}
       <ResponseSection responses={responses} />
+      {devNotice}
       
       {/* Additional Content */}
       {children}
+
+      {/* Playground Modal (lazy-loaded) */}
     </div>
   );
 }

package/vendored/components/mdx/Tabs.tsx

@@ -115,7 +115,7 @@ export const Tabs = memo(function Tabs({ children, borderBottom }: TabsProps) {
               <button
                 key={index}
                 onClick={() => handleTabClick(index)}
-                className={`flex items-center gap-2 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors whitespace-nowrap ${
+                className={`flex items-center gap-2 px-4 py-2.5 text-sm font-medium border-b-2 transition-colors whitespace-nowrap cursor-pointer ${
                   isActive
                     ? 'border-[var(--color-accent)] text-[var(--color-accent-text)]'
                     : 'border-transparent text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] hover:border-[var(--color-border)]'

package/vendored/components/mdx/Video.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import React, { useEffect, useRef } from 'react';
+
+/** Shared with preprocess-mdx.ts — keep in sync or extract to shared module */
+export const VIDEO_EXTENSIONS = ['.mp4', '.webm'];
+
+interface VideoProps {
+  src: string;
+  title?: string;
+  /** Default: true */
+  controls?: boolean;
+  /** Browsers block unmuted autoplay — pair with muted */
+  autoPlay?: boolean;
+  muted?: boolean;
+  loop?: boolean;
+  width?: string;
+  height?: string;
+}
+
+/**
+ * HTML5 video player for embedded video files.
+ *
+ * Markdown ![alt](/videos/demo.mp4) is converted to <Video> JSX by the
+ * preprocessor (transformMarkdownVideos). The img handler in MDXComponents
+ * has a fallback isVideoUrl check for raw <img src="video.mp4"> in MDX.
+ *
+ * muted is set via useRef/useEffect — React doesn't reflect it as a DOM
+ * attribute (https://github.com/facebook/react/issues/6544).
+ */
+export function Video({
+  src,
+  title,
+  controls = true,
+  autoPlay,
+  muted,
+  loop,
+  width,
+  height,
+}: VideoProps): React.ReactElement | null {
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    if (videoRef.current) {
+      if (muted) {
+        videoRef.current.setAttribute('muted', '');
+      } else {
+        videoRef.current.removeAttribute('muted');
+      }
+    }
+  }, [muted]);
+
+  if (!src) {
+    console.warn('Video component requires a "src" prop');
+    return null;
+  }
+
+  // Append #t=0.1 to force browsers to decode and display a preview frame.
+  // Without it, Chrome/Safari often show a black rectangle with preload="metadata".
+  const srcWithPreview = src.includes('#') ? src : `${src}#t=0.1`;
+
+  // No <div> wrapper — markdown syntax can place this inside a <p>, and
+  // <p><div> is invalid HTML (causes hydration errors).
+  return (
+    <video
+      ref={videoRef}
+      data-testid="video-player"
+      src={srcWithPreview}
+      controls={controls}
+      autoPlay={autoPlay}
+      loop={loop}
+      width={width}
+      height={height}
+      preload="metadata"
+      playsInline
+      aria-label={title}
+      className="my-6 rounded-xl w-full border border-theme-border"
+    >
+      Your browser does not support the video tag.
+    </video>
+  );
+}

package/vendored/components/navigation/Header.tsx

@@ -16,7 +16,7 @@ import { LanguageSelector } from './LanguageSelector';
 import { resolveNavigation } from '@/lib/navigation-resolver';
 import { getIconClass } from '@/lib/icon-utils';
 import { useLinkPrefix } from '@/lib/link-prefix-context';
-import { useChatPanel } from '@/hooks/useChatPanel';
+import { useChatOpenHandler } from '@/hooks/useChatPanel';
 
 interface HeaderProps {
   config: DocsConfig;
@@ -36,8 +36,7 @@ const MOBILE_ICON_BUTTON = 'lg:hidden p-2 text-[var(--color-text-muted)] hover:t
 const COMPACT_ICON_BUTTON = 'hidden md:flex p-2 hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] rounded-lg transition-colors cursor-pointer';
 
 export function Header({ config, layout = 'header-logo', tabsPosition: tabsPositionProp, isSidebarOpen, onToggleSidebar }: HeaderProps) {
-  const { chatEnabled: chatContextEnabled, setIsChatOpen } = useChatPanel();
-  const onChatOpen = chatContextEnabled ? () => setIsChatOpen(true) : undefined;
+  const { onChatOpen, devNotice } = useChatOpenHandler();
   const [isSearchOpen, setIsSearchOpen] = useState(false);
   const [logoError, setLogoError] = useState(false);
   const [isDark, setIsDark] = useState(false);
@@ -542,6 +541,7 @@ export function Header({ config, layout = 'header-logo', tabsPosition: tabsPosit
         onClose={() => setIsSearchOpen(false)}
         popularPages={config.search?.popularPages}
       />
+      {devNotice}
     </>
   );
 }

package/vendored/components/navigation/Sidebar.tsx

@@ -30,7 +30,7 @@ import { ThemeToggle, ThemeToggleCycle } from '@/components/theme/ThemeToggle';
 import { getIconClass } from '@/lib/icon-utils';
 import { getTabsFromConfig } from '@/lib/navigation-utils';
 import { useLinkPrefix } from '@/lib/link-prefix-context';
-import { useChatPanel } from '@/hooks/useChatPanel';
+import { useChatOpenHandler } from '@/hooks/useChatPanel';
 
 interface SidebarProps {
   config: DocsConfig;
@@ -150,8 +150,7 @@ export function Sidebar({ config, layout = 'header-logo', tabsPosition: tabsPosi
   const linkPrefix = useLinkPrefix();
 
   // Chat panel state — used for Pulsar sidebar AI button
-  const { chatEnabled, setIsChatOpen } = useChatPanel();
-  const onChatOpen = chatEnabled ? () => setIsChatOpen(true) : undefined;
+  const { onChatOpen, devNotice } = useChatOpenHandler();
 
   // Optimistic navigation: immediately highlight clicked link while page loads.
   // Strips hash fragments so anchor links (e.g. /page#section) match pathname.
@@ -750,6 +749,7 @@ export function Sidebar({ config, layout = 'header-logo', tabsPosition: tabsPosi
 
       {/* Search Modal - shown when search is opened from sidebar */}
       <SearchModal isOpen={isSearchOpen} onClose={() => setIsSearchOpen(false)} onNavigate={handleNavigate} />
+      {devNotice}
     </>
   );
 }