jamdesk 1.0.13 → 1.0.14

package/vendored/components/chat/ChatResizeHandle.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import { useCallback, useRef, type KeyboardEvent } from 'react';
+import { MIN_WIDTH, MAX_WIDTH } from '@/hooks/useChatPanel';
+
+interface ChatResizeHandleProps {
+  chatWidth: number;
+  onResize: (width: number) => void;
+}
+
+/**
+ * Vertical drag handle between content and chat column.
+ * Supports mouse, touch, and keyboard (ArrowLeft/ArrowRight) interaction.
+ */
+export function ChatResizeHandle({ chatWidth, onResize }: ChatResizeHandleProps) {
+  const rafRef = useRef<number | null>(null);
+  const isDraggingRef = useRef(false);
+
+  const startDrag = useCallback(
+    (startX: number) => {
+      const startWidth = chatWidth;
+      isDraggingRef.current = true;
+      document.body.style.userSelect = 'none';
+      document.body.style.cursor = 'col-resize';
+
+      const onMove = (clientX: number) => {
+        if (rafRef.current !== null) return;
+        rafRef.current = requestAnimationFrame(() => {
+          rafRef.current = null;
+          // Dragging left increases width (chat is on the right)
+          const delta = startX - clientX;
+          const newWidth = Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, startWidth + delta));
+          onResize(newWidth);
+        });
+      };
+
+      const onEnd = () => {
+        isDraggingRef.current = false;
+        document.body.style.userSelect = '';
+        document.body.style.cursor = '';
+        if (rafRef.current !== null) {
+          cancelAnimationFrame(rafRef.current);
+          rafRef.current = null;
+        }
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', onEnd);
+        document.removeEventListener('touchmove', handleTouchMove);
+        document.removeEventListener('touchend', onEnd);
+      };
+
+      const handleMouseMove = (e: MouseEvent) => onMove(e.clientX);
+      const handleTouchMove = (e: TouchEvent) => onMove(e.touches[0].clientX);
+
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', onEnd);
+      document.addEventListener('touchmove', handleTouchMove, { passive: true });
+      document.addEventListener('touchend', onEnd);
+    },
+    [chatWidth, onResize],
+  );
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+      startDrag(e.clientX);
+    },
+    [startDrag],
+  );
+
+  const handleTouchStart = useCallback(
+    (e: React.TouchEvent) => {
+      startDrag(e.touches[0].clientX);
+    },
+    [startDrag],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLDivElement>) => {
+      const step = 10;
+      if (e.key === 'ArrowLeft') {
+        e.preventDefault();
+        onResize(Math.max(MIN_WIDTH, chatWidth - step));
+      } else if (e.key === 'ArrowRight') {
+        e.preventDefault();
+        onResize(Math.min(MAX_WIDTH, chatWidth + step));
+      }
+    },
+    [chatWidth, onResize],
+  );
+
+  return (
+    <div
+      role="separator"
+      aria-orientation="vertical"
+      aria-valuenow={chatWidth}
+      aria-valuemin={MIN_WIDTH}
+      aria-valuemax={MAX_WIDTH}
+      aria-label="Resize chat panel"
+      tabIndex={0}
+      onMouseDown={handleMouseDown}
+      onTouchStart={handleTouchStart}
+      onKeyDown={handleKeyDown}
+      className="hidden xl:flex items-center justify-center w-1 flex-shrink-0 cursor-col-resize group focus-visible:outline-2 focus-visible:outline-[var(--color-accent)]"
+    >
+      <div className="w-px h-full bg-[var(--color-border)] group-hover:bg-[var(--color-accent)]/50 transition-colors" />
+    </div>
+  );
+}

package/vendored/components/chat/LazyChatPanel.tsx

@@ -0,0 +1,19 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import type { ComponentProps } from 'react';
+import type { ChatPanel as ChatPanelType } from './ChatPanel';
+
+/**
+ * Code-split ChatPanel without visible loading state.
+ * The panel is rendered unconditionally (with isOpen=false initially),
+ * so a loading fallback would flash on every page load.
+ */
+const ChatPanel = dynamic(
+  () => import('./ChatPanel').then((m) => m.ChatPanel),
+  { ssr: false },
+);
+
+export function LazyChatPanel(props: ComponentProps<typeof ChatPanelType>) {
+  return <ChatPanel {...props} />;
+}

package/vendored/components/layout/LayoutWrapper.tsx

@@ -1,9 +1,13 @@
 'use client';
 
-import { useState, useMemo, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { Header } from '@/components/navigation/Header';
 import { Sidebar } from '@/components/navigation/Sidebar';
 import { TabsNav } from '@/components/navigation/TabsNav';
+import { LazyChatPanel } from '@/components/chat/LazyChatPanel';
+import { ChatResizeHandle } from '@/components/chat/ChatResizeHandle';
+import { ChatPanel } from '@/components/chat/ChatPanel';
+import { ChatPanelProvider, useChatPanel } from '@/hooks/useChatPanel';
 import { useHashNavigation } from '@/hooks/useHashNavigation';
 import type { DocsConfig } from '@/lib/docs-types';
 import { getTheme, type ThemeName } from '@/themes';
@@ -13,8 +17,33 @@ interface LayoutWrapperProps {
   children: React.ReactNode;
 }
 
+/**
+ * Hook to track a CSS media query match.
+ * Returns false during SSR/initial render to avoid hydration mismatch.
+ */
+function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(false);
+
+  useEffect(() => {
+    const mql = window.matchMedia(query);
+    setMatches(mql.matches);
+    const handler = (e: MediaQueryListEvent) => setMatches(e.matches);
+    mql.addEventListener('change', handler);
+    return () => mql.removeEventListener('change', handler);
+  }, [query]);
+
+  return matches;
+}
+
 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);
+
+  // xl breakpoint (1280px) — chat renders inline on desktop, overlay on mobile
+  const isDesktop = useMediaQuery('(min-width: 1280px)');
 
   // Handle hash navigation for three-column independent scroll layout
   useHashNavigation();
@@ -42,22 +71,36 @@ export function LayoutWrapper({ config, children }: LayoutWrapperProps) {
   }, []);
 
   // Get theme config to determine layout
-  const themeConfig = useMemo(() => {
-    return getTheme(config.theme as ThemeName | undefined);
-  }, [config.theme]);
+  const themeConfig = getTheme(config.theme as ThemeName | undefined);
 
   const layout = themeConfig.layout;
 
   const toggleSidebar = () => setIsSidebarOpen(!isSidebarOpen);
   const closeSidebar = () => setIsSidebarOpen(false);
 
+  // In local dev (no ISR_MODE), middleware doesn't rewrite /_chat, so use the direct API path
+  const chatEndpoint = process.env.NEXT_PUBLIC_PROJECT_SLUG
+    ? `/api/chat/${process.env.NEXT_PUBLIC_PROJECT_SLUG}`
+    : '/_chat';
+
+  // Mobile (<xl) overlay — only when chat is NOT shown inline on desktop
+  const chatOverlay = chatEnabled && !isDesktop && <MobileChatOverlay />;
+
+  // Wrap in ChatPanelProvider so Header, PageColumns, and overlay can share state
+  const wrapWithProvider = (content: React.ReactNode) => (
+    <ChatPanelProvider
+      chatEnabled={chatEnabled}
+      chatEndpoint={chatEndpoint}
+      starterQuestions={config.chat?.starterQuestions}
+    >
+      {content}
+    </ChatPanelProvider>
+  );
+
   // Sidebar-logo layout: Sidebar is full height, header only above content
-  // Tabs are rendered inline in the header for this layout
-  // Uses fixed viewport height on desktop with independent scroll for each column
   if (layout === 'sidebar-logo') {
-    return (
+    return wrapWithProvider(
       <div className="flex min-h-screen lg:h-screen lg:overflow-hidden">
-        {/* Full-height sidebar - already has its own scroll */}
         <Sidebar
           config={config}
           layout={layout}
@@ -65,7 +108,6 @@ export function LayoutWrapper({ config, children }: LayoutWrapperProps) {
           onClose={closeSidebar}
         />
 
-        {/* Content area with header (tabs are inline in header) */}
         <div className="flex-1 lg:ml-[295px] flex flex-col lg:h-screen bg-[var(--color-bg-content,var(--color-bg-primary))]">
           <Header
             config={config}
@@ -73,7 +115,6 @@ export function LayoutWrapper({ config, children }: LayoutWrapperProps) {
             isSidebarOpen={isSidebarOpen}
             onToggleSidebar={toggleSidebar}
           />
-          {/* Main content area - contains content scroll container and TOC */}
           <main
             id="main-content"
             className="flex-1 flex flex-col lg:min-h-0 transition-colors overflow-x-hidden"
@@ -81,48 +122,97 @@ export function LayoutWrapper({ config, children }: LayoutWrapperProps) {
             {children}
           </main>
         </div>
-      </div>
+
+        {isDesktop && <DesktopChatColumn />}
+        {chatOverlay}
+      </div>,
     );
   }
 
-  // Header-logo layout (Jam, Nebula): Uses sticky positioning for max-width support
-  // Outer wrapper constrains entire layout to --layout-max-width
-  // Uses fixed viewport height on desktop with independent scroll for each column
-  return (
-    <div
-      className="min-h-screen lg:h-screen flex flex-col lg:overflow-hidden mx-auto px-4 lg:px-6"
-      style={{ maxWidth: 'var(--layout-max-width, none)' }}
-    >
-      {/* Header - stays at top, does not scroll */}
-      <Header
-        config={config}
-        layout={layout}
-        isSidebarOpen={isSidebarOpen}
-        onToggleSidebar={toggleSidebar}
-      />
-
-      {/* Tabs bar - below header, same height */}
-      <TabsNav config={config} />
-
-      {/* Main layout area with sidebar and content - fills remaining height */}
-      <div className="flex flex-1 lg:min-h-0">
-        {/* Sidebar - has its own scroll via sidebar-scroll class */}
-        <Sidebar
+  // Header-logo layout (Jam, Nebula) — outer flex row for layout + chat column
+  return wrapWithProvider(
+    <div className="flex min-h-screen lg:h-screen lg:overflow-hidden">
+      <div
+        className="flex-1 min-w-0 flex flex-col lg:overflow-hidden mx-auto px-4 lg:px-6"
+        style={{ maxWidth: 'var(--layout-max-width, none)' }}
+      >
+        <Header
           config={config}
           layout={layout}
-          isOpen={isSidebarOpen}
-          onClose={closeSidebar}
+          isSidebarOpen={isSidebarOpen}
+          onToggleSidebar={toggleSidebar}
         />
 
-        {/* Main content area - contains content scroll container and TOC */}
-        <main
-          id="main-content"
-          className="flex-1 flex flex-col lg:min-h-0 bg-[var(--color-bg-primary)] transition-colors overflow-x-hidden"
-        >
-          {children}
-        </main>
+        <TabsNav config={config} />
+
+        <div className="flex flex-1 lg:min-h-0">
+          <Sidebar
+            config={config}
+            layout={layout}
+            isOpen={isSidebarOpen}
+            onClose={closeSidebar}
+          />
+
+          <main
+            id="main-content"
+            className="flex-1 flex flex-col lg:min-h-0 bg-[var(--color-bg-primary)] transition-colors overflow-x-hidden"
+          >
+            {children}
+          </main>
+        </div>
+      </div>
+
+      {isDesktop && <DesktopChatColumn />}
+      {chatOverlay}
+    </div>,
+  );
+}
+
+/**
+ * Desktop chat column — renders at the outermost layout level for full page height.
+ * Uses ChatPanelProvider context for open/close state and width.
+ */
+function DesktopChatColumn() {
+  const { isChatOpen, setIsChatOpen, chatWidth, setChatWidth, chatEndpoint, starterQuestions } = useChatPanel();
+
+  if (!isChatOpen) return null;
+
+  return (
+    <>
+      <ChatResizeHandle chatWidth={chatWidth} onResize={setChatWidth} />
+      <div
+        className="flex flex-col flex-shrink-0"
+        style={{
+          width: chatWidth,
+          backgroundColor: 'var(--color-bg-primary)',
+        }}
+        data-chat-panel
+      >
+        <ChatPanel
+          mode="inline"
+          isOpen={true}
+          onClose={() => setIsChatOpen(false)}
+          starterQuestions={starterQuestions}
+          chatEndpoint={chatEndpoint}
+        />
       </div>
-    </div>
+    </>
   );
 }
 
+/**
+ * Mobile chat overlay — uses ChatPanelProvider context for open/close state.
+ * Separated so it can access the provider context.
+ */
+function MobileChatOverlay() {
+  const { isChatOpen, setIsChatOpen, chatEndpoint, starterQuestions } = useChatPanel();
+
+  return (
+    <LazyChatPanel
+      isOpen={isChatOpen}
+      onClose={() => setIsChatOpen(false)}
+      starterQuestions={starterQuestions}
+      chatEndpoint={chatEndpoint}
+    />
+  );
+}

package/vendored/components/layout/PageColumns.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { type ReactNode } from 'react';
+import { useChatPanel } from '@/hooks/useChatPanel';
+
+interface PageColumnsProps {
+  children: ReactNode;
+  toc: ReactNode;
+  isWideMode?: boolean;
+}
+
+/**
+ * Two-column page layout: content | TOC.
+ * On xl+ screens, the TOC is hidden when chat is open (chat renders at layout level).
+ * On <xl screens, only content is rendered (TOC hidden, chat is a mobile overlay).
+ */
+export function PageColumns({ children, toc, isWideMode }: PageColumnsProps) {
+  const { isChatOpen } = useChatPanel();
+
+  return (
+    <div className="flex h-full">
+      {/* Content column - scrolls independently */}
+      <div
+        id="content-scroll-container"
+        className="flex-1 min-w-0 lg:overflow-y-auto lg:h-full content-scroll"
+      >
+        {children}
+      </div>
+
+      {/* TOC — shown when chat is closed and not in wide mode */}
+      {!isChatOpen && !isWideMode && (
+        <aside className="hidden xl:block w-72 flex-shrink-0 xl:h-full xl:overflow-y-auto toc-scroll xl:ml-0.5 pr-2">
+          <div className="py-6 sm:py-10 pr-4">
+            {toc}
+          </div>
+        </aside>
+      )}
+    </div>
+  );
+}

package/vendored/components/navigation/Header.tsx

@@ -15,6 +15,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';
 
 interface HeaderProps {
   config: DocsConfig;
@@ -27,7 +28,15 @@ interface HeaderProps {
 // Max tabs to show before overflow dropdown
 const MAX_VISIBLE_TABS = 4;
 
+// Shared button classes for mobile search/AI icons
+const MOBILE_ICON_BUTTON = 'lg:hidden p-2 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] bg-[var(--color-bg-secondary)]/50 border border-[var(--color-border)]/50 hover:bg-[var(--color-bg-secondary)] rounded-md transition-colors cursor-pointer';
+
+// Shared button classes for compact (Nebula) header icon buttons
+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 [isSearchOpen, setIsSearchOpen] = useState(false);
   const [logoError, setLogoError] = useState(false);
   const [isDark, setIsDark] = useState(false);
@@ -275,7 +284,7 @@ export function Header({ config, layout = 'header-logo', tabsPosition: tabsPosit
             {/* Hamburger menu - mobile only */}
             <button
               onClick={onToggleSidebar}
-              className="lg:hidden p-1.5 -ml-1.5 text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] rounded-lg transition-colors"
+              className="lg:hidden p-1.5 -ml-1.5 text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] rounded-lg transition-colors cursor-pointer"
               aria-label="Toggle menu"
             >
               {isSidebarOpen ? (
@@ -297,28 +306,43 @@ export function Header({ config, layout = 'header-logo', tabsPosition: tabsPosit
             )}
           </div>
 
-          {/* Center: Search Bar - only in header-logo layout, not for compact search themes */}
+          {/* Center: Search Bar + Ask AI Button - only in header-logo layout, not for compact search themes */}
           {showLogoInHeader && !useCompactSearch && (
             <div className="flex-1 flex justify-center px-4">
-              <button
-                onClick={() => setIsSearchOpen(true)}
-                className="hidden md:flex items-center gap-3 px-3 py-2 w-full max-w-sm bg-[var(--color-bg-secondary)] border border-[var(--color-border)] rounded-lg text-[var(--color-text-muted)] text-sm hover:border-[var(--color-border-hover)] hover:bg-[var(--color-bg-tertiary)] transition-colors"
-              >
-                <i className="fa-solid fa-magnifying-glass text-[14px] flex-shrink-0" aria-hidden="true" />
-                <span className="flex-1 text-left">Search...</span>
-                <kbd className="hidden sm:inline-flex items-center gap-[2px] px-2 py-0.5 text-xs text-[var(--color-text-muted)] bg-[var(--color-bg-primary)] border border-[var(--color-border)] rounded">
-                  <span className="text-sm leading-none">⌘</span>
-                  <span>K</span>
-                </kbd>
-              </button>
+              <div className="hidden md:flex items-center gap-2">
+                <button
+                  onClick={() => setIsSearchOpen(true)}
+                  className="flex items-center gap-3 px-3 py-2 bg-[var(--color-bg-secondary)] border border-[var(--color-border)] rounded-lg text-[var(--color-text-muted)] text-sm hover:border-[var(--color-border-hover)] transition-colors cursor-pointer"
+                  aria-label="Search documentation"
+                >
+                  <i className="fa-solid fa-magnifying-glass text-[14px] flex-shrink-0" aria-hidden="true" />
+                  <span>Search</span>
+                  <kbd className="hidden sm:inline-flex items-center gap-[2px] px-2 py-0.5 text-xs text-[var(--color-text-muted)] bg-[var(--color-bg-primary)] border border-[var(--color-border)] rounded">
+                    <span className="text-sm leading-none">⌘</span>
+                    <span>K</span>
+                  </kbd>
+                </button>
+                {onChatOpen && (
+                  <button
+                    onClick={onChatOpen}
+                    className="flex items-center gap-3 px-3 py-2 bg-[var(--color-bg-secondary)] border border-[var(--color-border)] rounded-lg hover:border-[var(--color-border-hover)] cursor-pointer transition-colors text-sm text-[var(--color-text-muted)]"
+                    aria-label="Ask AI"
+                    title="Ask AI (⌘I)"
+                  >
+                    <i className="fa-solid fa-sparkles text-[14px] text-[var(--color-accent)]" aria-hidden="true" />
+                    <span>Ask AI</span>
+                    <kbd className="hidden sm:inline-flex items-center gap-[2px] px-2 py-0.5 text-xs text-[var(--color-text-muted)] bg-[var(--color-bg-primary)] border border-[var(--color-border)] rounded">
+                      <span className="text-sm leading-none">⌘</span>
+                      <span>I</span>
+                    </kbd>
+                  </button>
+                )}
+              </div>
             </div>
           )}
 
-          {/* Spacer for compact search themes (nebula) */}
-          {showLogoInHeader && useCompactSearch && <div className="flex-1" />}
-
-          {/* Spacer for sidebar-logo layout */}
-          {!showLogoInHeader && <div className="flex-1" />}
+          {/* Spacer — needed when the center search bar is not shown (compact themes or sidebar-logo layout) */}
+          {(!showLogoInHeader || useCompactSearch) && <div className="flex-1" />}
 
           {/* Right side: Search icon (mobile) + Theme toggle */}
           <div className="flex items-center gap-2 flex-shrink-0">
@@ -425,14 +449,23 @@ export function Header({ config, layout = 'header-logo', tabsPosition: tabsPosit
               </nav>
             )}
 
-            {/* Search icon - mobile only */}
+            {/* Search + AI icons - mobile only */}
             <button
               onClick={() => setIsSearchOpen(true)}
-              className="lg:hidden p-2 text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] bg-[var(--color-bg-secondary)]/50 border border-[var(--color-border)]/50 hover:bg-[var(--color-bg-secondary)] rounded-md transition-colors"
+              className={MOBILE_ICON_BUTTON}
               aria-label="Search"
             >
               <i className="fa-solid fa-magnifying-glass text-[16px]" aria-hidden="true" />
             </button>
+            {onChatOpen && (
+              <button
+                onClick={onChatOpen}
+                className={MOBILE_ICON_BUTTON}
+                aria-label="Ask AI"
+              >
+                <i className="fa-solid fa-sparkles text-[16px] text-[var(--color-accent)]" aria-hidden="true" />
+              </button>
+            )}
 
             {/* Navbar Links - shown to left of theme toggle in header-logo layout */}
             {showLogoInHeader && config.navbar?.links && config.navbar.links.length > 0 && (
@@ -481,16 +514,28 @@ export function Header({ config, layout = 'header-logo', tabsPosition: tabsPosit
               />
             )}
 
-            {/* Compact search icon - for themes like Nebula that don't show full search bar */}
+            {/* Compact search + AI icons - for themes like Nebula that use icon-only buttons */}
             {showLogoInHeader && useCompactSearch && (
-              <button
-                onClick={() => setIsSearchOpen(true)}
-                className="hidden md:flex p-2 text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-secondary)] rounded-lg transition-colors"
-                aria-label="Search"
-                title="Search (⌘K)"
-              >
-                <i className="fa-solid fa-magnifying-glass text-[16px]" aria-hidden="true" />
-              </button>
+              <>
+                <button
+                  onClick={() => setIsSearchOpen(true)}
+                  className={`${COMPACT_ICON_BUTTON} text-[var(--color-text-secondary)]`}
+                  aria-label="Search"
+                  title="Search (⌘K)"
+                >
+                  <i className="fa-solid fa-magnifying-glass text-[16px]" aria-hidden="true" />
+                </button>
+                {onChatOpen && (
+                  <button
+                    onClick={onChatOpen}
+                    className={`${COMPACT_ICON_BUTTON} text-[var(--color-accent)]`}
+                    aria-label="Ask AI"
+                    title="Ask AI (⌘I)"
+                  >
+                    <i className="fa-solid fa-sparkles text-[16px]" aria-hidden="true" />
+                  </button>
+                )}
+              </>
             )}
 
             {/* Theme toggle - hidden on mobile since it's in the sidebar menu */}

package/vendored/components/navigation/Sidebar.tsx

@@ -29,6 +29,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';
 
 interface SidebarProps {
   config: DocsConfig;
@@ -147,6 +148,10 @@ export function Sidebar({ config, layout = 'header-logo', tabsPosition: tabsPosi
   const sidebarRef = useRef<HTMLElement>(null);
   const linkPrefix = useLinkPrefix();
 
+  // Chat panel state — used for Pulsar sidebar AI button
+  const { chatEnabled, setIsChatOpen } = useChatPanel();
+  const onChatOpen = chatEnabled ? () => setIsChatOpen(true) : undefined;
+
   // Optimistic navigation: immediately highlight clicked link while page loads.
   // Strips hash fragments so anchor links (e.g. /page#section) match pathname.
   const handleNavigate = useCallback((url: string) => {
@@ -692,10 +697,10 @@ export function Sidebar({ config, layout = 'header-logo', tabsPosition: tabsPosi
 
         {/* Search button in sidebar - for sidebar-logo layout (desktop only, mobile uses header search) */}
         {showSearchInSidebar && (
-          <div className="hidden lg:block px-4 pt-4 pb-4">
+          <div className="hidden lg:flex items-center gap-2 px-4 pt-4 pb-4">
             <button
               onClick={() => setIsSearchOpen(true)}
-              className="w-full flex items-center gap-2.5 px-3 py-2 bg-[var(--color-bg-secondary)] border border-[var(--color-border)] rounded-lg text-[var(--color-text-muted)] text-sm hover:border-[var(--color-border-hover)] hover:bg-[var(--color-bg-tertiary)] transition-colors"
+              className="flex-1 flex items-center gap-2.5 px-3 py-2 bg-[var(--color-bg-secondary)] border border-[var(--color-border)] rounded-lg text-[var(--color-text-muted)] text-sm hover:border-[var(--color-border-hover)] hover:bg-[var(--color-bg-tertiary)] transition-colors cursor-pointer"
             >
               <i className="fa-solid fa-magnifying-glass text-[14px] flex-shrink-0" aria-hidden="true" />
               <span className="flex-1 text-left">Search...</span>
@@ -704,6 +709,16 @@ export function Sidebar({ config, layout = 'header-logo', tabsPosition: tabsPosi
                 <span>K</span>
               </kbd>
             </button>
+            {onChatOpen && (
+              <button
+                onClick={onChatOpen}
+                className="flex-shrink-0 flex items-center justify-center w-9 h-9 bg-[var(--color-bg-secondary)] border border-[var(--color-border)] rounded-lg text-[var(--color-text-muted)] hover:border-[var(--color-border-hover)] hover:bg-[var(--color-bg-tertiary)] transition-colors cursor-pointer"
+                aria-label="Ask AI"
+                title="Ask AI (⌘I)"
+              >
+                <i className="fa-solid fa-sparkles text-[14px] text-[var(--color-accent)]" aria-hidden="true" />
+              </button>
+            )}
           </div>
         )}