jamdesk 1.0.13 → 1.0.15

package/vendored/components/chat/ChatEmptyState.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import { memo, useMemo, useState, useCallback } from 'react';
+
+interface ChatEmptyStateProps {
+  starterQuestions?: string[];
+  onSelectQuestion: (question: string) => void;
+}
+
+const STARTER_BASE = 'w-full text-left px-4 py-3 rounded-xl border text-sm transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-accent)]';
+
+function starterButtonClass(question: string, selectedQuestion: string | null): string {
+  if (selectedQuestion === question) {
+    return `${STARTER_BASE} border-[var(--color-accent)] bg-[var(--color-accent)]/10 text-[var(--color-text-primary)]`;
+  }
+  if (selectedQuestion !== null) {
+    return `${STARTER_BASE} border-[var(--color-border)] bg-[var(--color-bg-secondary)] text-[var(--color-text-muted)] opacity-50 cursor-default pointer-events-none`;
+  }
+  return `${STARTER_BASE} border-[var(--color-border)] bg-[var(--color-bg-secondary)] text-[var(--color-text-primary)] hover:border-[var(--color-accent)] hover:bg-[var(--color-bg-primary)] cursor-pointer`;
+}
+
+/**
+ * Empty state shown when the chat has no messages.
+ * Displays a title, subtitle, and optional starter question cards.
+ * Starter questions are auto-generated by Haiku during builds when not
+ * defined in docs.json — see lib/generate-starter-questions.ts.
+ */
+export const ChatEmptyState = memo(function ChatEmptyState({ starterQuestions, onSelectQuestion }: ChatEmptyStateProps) {
+  const shortcutKey = useMemo(
+    () => typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.userAgent) ? '⌘' : 'Ctrl+',
+    [],
+  );
+
+  const [selectedQuestion, setSelectedQuestion] = useState<string | null>(null);
+
+  const handleSelect = useCallback((question: string) => {
+    setSelectedQuestion(question);
+    // Brief highlight before sending — gives visual feedback that tap registered
+    setTimeout(() => {
+      onSelectQuestion(question);
+    }, 250);
+  }, [onSelectQuestion]);
+
+  return (
+    <div className="flex flex-col items-center justify-center h-full px-6 py-12 text-center">
+      <div className="mb-6">
+        <i
+          className="fa-solid fa-sparkles text-2xl text-[var(--color-accent)]"
+          aria-hidden="true"
+        />
+      </div>
+      <h2 className="text-lg font-semibold text-[var(--color-text-primary)] mb-1">
+        Ask AI
+      </h2>
+      <p className="text-sm text-[var(--color-text-secondary)] mb-6 sm:mb-1">
+        Get answers from the documentation
+      </p>
+      <p className="hidden sm:block text-xs text-[var(--color-text-muted)] mb-6">
+        <kbd className="px-1.5 py-0.5 rounded border border-[var(--color-border)] bg-[var(--color-bg-secondary)] text-[10px] font-mono">{shortcutKey}I</kbd>
+        {' '}to toggle
+      </p>
+
+      {starterQuestions && starterQuestions.length > 0 && (
+        <div className="w-full max-w-sm space-y-2">
+          {starterQuestions.map((question) => (
+            <button
+              key={question}
+              onClick={() => !selectedQuestion && handleSelect(question)}
+              aria-disabled={selectedQuestion !== null}
+              className={starterButtonClass(question, selectedQuestion)}
+            >
+              {question}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+});

package/vendored/components/chat/ChatFAB.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+interface ChatFABProps {
+  isOpen: boolean;
+  onClick: () => void;
+}
+
+/**
+ * Floating action button that opens the AI chat panel.
+ * Pill-shaped with accent color, slides down/fades when chat panel is open.
+ * Positioned above common third-party chat widgets (Crisp, Intercom) which
+ * sit at bottom-right with z-index ~1,000,000+. We use z-[1000003] to ensure
+ * clickability and bottom-20 to avoid visual overlap.
+ */
+export function ChatFAB({ isOpen, onClick }: ChatFABProps) {
+  return (
+    <button
+      onClick={onClick}
+      className={`
+        fixed bottom-20 right-6 z-[1000003]
+        flex items-center gap-2 px-4 py-2.5
+        bg-[var(--color-accent)] text-white
+        rounded-full shadow-lg
+        transition-all duration-200
+        hover:shadow-xl hover:scale-105 cursor-pointer
+        focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-accent)]
+        ${isOpen ? 'translate-y-16 opacity-0 pointer-events-none' : 'translate-y-0 opacity-100'}
+      `}
+      aria-label="Open AI chat"
+      title="Ask AI"
+    >
+      <i className="fa-solid fa-comment text-sm" aria-hidden="true" />
+      <span className="text-sm font-medium">Ask AI</span>
+    </button>
+  );
+}

package/vendored/components/chat/ChatInput.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import { memo, useState, useRef, useCallback, useEffect, type KeyboardEvent } from 'react';
+
+interface ChatInputProps {
+  onSend: (text: string) => void;
+  onAbort: () => void;
+  isLoading: boolean;
+  disabled?: boolean;
+}
+
+const MAX_LENGTH = 2000;
+
+const ACTION_BUTTON = 'flex-shrink-0 w-9 h-9 flex items-center justify-center rounded-xl transition-colors cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-accent)]';
+
+/**
+ * Auto-growing textarea input for the chat panel.
+ * Enter sends the message, Shift+Enter inserts a newline.
+ */
+export const ChatInput = memo(function ChatInput({ onSend, onAbort, isLoading, disabled }: ChatInputProps) {
+  const [value, setValue] = useState('');
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  // Auto-resize the textarea to fit content
+  const adjustHeight = useCallback(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    textarea.style.height = 'auto';
+    // Clamp to ~6 lines max
+    textarea.style.height = `${Math.min(textarea.scrollHeight, 150)}px`;
+  }, []);
+
+  useEffect(() => {
+    adjustHeight();
+  }, [value, adjustHeight]);
+
+  const handleSend = useCallback(() => {
+    const trimmed = value.trim();
+    if (!trimmed || isLoading || disabled) return;
+    onSend(trimmed);
+    setValue('');
+    // Reset textarea height after clearing
+    requestAnimationFrame(() => {
+      if (textareaRef.current) {
+        textareaRef.current.style.height = 'auto';
+      }
+    });
+  }, [value, isLoading, disabled, onSend]);
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        handleSend();
+      }
+    },
+    [handleSend],
+  );
+
+  const isOverLimit = value.length > MAX_LENGTH;
+  const canSend = value.trim().length > 0 && !isOverLimit && !disabled;
+
+  return (
+    <div className="p-3">
+      <div className="flex items-end gap-2 border border-[var(--color-border)] rounded-lg px-3 py-1">
+        <textarea
+          ref={textareaRef}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder="Ask a question…"
+          disabled={disabled}
+          rows={1}
+          className="flex-1 resize-none bg-transparent text-sm text-[var(--color-text-primary)] placeholder-[var(--color-text-muted)] outline-none py-2 min-h-[36px]"
+          aria-label="Chat message"
+          maxLength={MAX_LENGTH + 100} // Allow slight overshoot for UX, enforce on send
+        />
+        {isLoading ? (
+          <button
+            onClick={onAbort}
+            className={`${ACTION_BUTTON} bg-[var(--color-bg-secondary)] text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-tertiary)]`}
+            aria-label="Stop generating"
+            title="Stop generating"
+          >
+            <i className="fa-solid fa-stop text-xs" aria-hidden="true" />
+          </button>
+        ) : (
+          <button
+            onClick={handleSend}
+            disabled={!canSend}
+            className={`${ACTION_BUTTON} bg-[var(--color-accent)] text-white disabled:opacity-40 disabled:cursor-not-allowed hover:opacity-90`}
+            aria-label="Send message"
+            title="Send message"
+          >
+            <i className="fa-solid fa-paper-plane text-xs" aria-hidden="true" />
+          </button>
+        )}
+      </div>
+      {isOverLimit && (
+        <p className="text-xs text-red-500 mt-1 px-1">
+          Message is too long ({value.length}/{MAX_LENGTH})
+        </p>
+      )}
+    </div>
+  );
+});

package/vendored/components/chat/ChatMessage.tsx

@@ -0,0 +1,176 @@
+'use client';
+
+import { memo } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { ChatCodeBlock } from './ChatCodeBlock';
+import { useLinkPrefix } from '@/lib/link-prefix-context';
+import type { ChatMessage as ChatMessageType } from '@/hooks/useChat';
+
+/** Convert heading text to a URL-friendly slug (same as heading-extractor.ts). */
+function slugify(text: string): string {
+  return text.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
+}
+
+interface ChatMessageProps {
+  message: ChatMessageType;
+  onSelectOption?: (option: string, messageId: string) => void;
+}
+
+/**
+ * Strip the trailing option list from content when clarification buttons will
+ * replace it. Handles numbered (1. 2. 3.) and unnumbered (plain lines) formats.
+ */
+function stripOptionList(content: string): string {
+  // Numbered list: \n\n1. ...\n2. ...\n3. ...
+  const numbered = content.replace(/\n\n1\.\s+.+\n2\.\s+.+(?:\n3\.\s+.+)?\s*$/, '');
+  if (numbered !== content) return numbered.trimEnd();
+
+  // Unnumbered list: \n\nLine\nLine\nLine
+  const unnumbered = content.replace(/\n\n[^\n]{2,80}\n[^\n]{2,80}(?:\n[^\n]{2,80})?\s*$/, '');
+  if (unnumbered !== content) return unnumbered.trimEnd();
+
+  return content;
+}
+
+/**
+ * Renders a single chat message (user or assistant).
+ * Memoized to prevent re-rendering previous messages when only the
+ * streaming message changes — each SSE chunk updates a single message,
+ * but without memo every message in the list would re-render.
+ */
+export const ChatMessage = memo(function ChatMessage({ message, onSelectOption }: ChatMessageProps) {
+  const linkPrefix = useLinkPrefix();
+  const isUser = message.role === 'user';
+  const hasClarificationOptions = !isUser && !!message.clarificationOptions?.length && !message.isStreaming;
+  const clarificationDisabled = !!message.clarificationSelected;
+
+  // When clarification buttons are shown, strip the option list text so
+  // buttons replace it instead of duplicating it below
+  const displayContent = hasClarificationOptions
+    ? stripOptionList(message.content)
+    : message.content;
+
+  return (
+    <div className={`px-4 py-3 ${isUser ? 'flex flex-col items-end' : 'animate-fd-fade-in'}`}>
+      {isUser ? (
+        /* User message — right-aligned accent bubble, label outside */
+        <>
+          <div className="text-xs font-medium text-[var(--color-text-muted)] mb-1 mr-1">You</div>
+          <div className="ml-auto max-w-[85%] bg-[var(--color-accent)]/10 rounded-xl px-3 py-2">
+            <p className="text-sm text-[var(--color-text-primary)] leading-relaxed whitespace-pre-wrap">{message.content}</p>
+          </div>
+        </>
+      ) : (
+        <>
+          {/* Role label */}
+          <div className="text-xs font-medium text-[var(--color-text-muted)] mb-1">
+            AI
+          </div>
+
+          {/* Message content */}
+          <div className="text-sm text-[var(--color-text-primary)] leading-relaxed max-w-none [&_p]:my-1.5 [&_ul]:my-1.5 [&_ol]:my-1.5 [&_li]:my-0.5 [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:list-decimal [&_ol]:pl-5 [&_h1]:text-base [&_h1]:font-semibold [&_h1]:mt-3 [&_h1]:mb-1.5 [&_h2]:text-sm [&_h2]:font-semibold [&_h2]:mt-3 [&_h2]:mb-1.5 [&_h3]:text-sm [&_h3]:font-medium [&_h3]:mt-2 [&_h3]:mb-1 [&_a]:text-[var(--color-accent)] [&_a]:underline [&_blockquote]:border-l-2 [&_blockquote]:border-[var(--color-border)] [&_blockquote]:pl-3 [&_blockquote]:text-[var(--color-text-secondary)] [&_hr]:border-[var(--color-border)] [&_table]:w-full [&_table]:my-2 [&_th]:text-left [&_th]:py-1 [&_th]:px-2 [&_th]:text-xs [&_th]:font-semibold [&_th]:border-b [&_th]:border-[var(--color-border)] [&_td]:py-1 [&_td]:px-2 [&_td]:text-xs [&_td]:border-b [&_td]:border-[var(--color-border)]">
+
+            {/* Thinking dots — shown while waiting for first text chunk */}
+            {message.isStreaming && !message.content && (
+              <div className="flex gap-1.5 py-1" aria-label="AI is thinking">
+                {[0, 150, 300].map((delay) => (
+                  <span
+                    key={delay}
+                    className="w-1.5 h-1.5 rounded-full bg-[var(--color-text-muted)] animate-bounce"
+                    style={{ animationDelay: `${delay}ms` }}
+                  />
+                ))}
+              </div>
+            )}
+
+            {/* Rendered markdown with streaming cursor */}
+            {(message.content || !message.isStreaming) && (
+              <>
+                <ReactMarkdown
+                  remarkPlugins={[remarkGfm]}
+                  components={{
+                    code: ({ children, className }) => {
+                      if (!className) {
+                        return (
+                          <code className="px-1 py-0.5 rounded bg-[var(--color-bg-secondary)] text-[0.9em]">
+                            {children}
+                          </code>
+                        );
+                      }
+                      return (
+                        <ChatCodeBlock className={className}>
+                          {String(children)}
+                        </ChatCodeBlock>
+                      );
+                    },
+                    a: ({ href, children }) => {
+                      const isExternal = href?.startsWith('http');
+                      return (
+                        <a
+                          href={href}
+                          {...(isExternal ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+                        >
+                          {children}
+                        </a>
+                      );
+                    },
+                  }}
+                >
+                  {displayContent}
+                </ReactMarkdown>
+                {message.isStreaming && (
+                  <span className="inline-block w-1.5 h-4 bg-[var(--color-accent)] rounded-sm animate-pulse ml-0.5 align-text-bottom" />
+                )}
+              </>
+            )}
+          </div>
+
+          {/* Clarification options — tappable buttons for disambiguation */}
+          {hasClarificationOptions && (
+            <div className="mt-3">
+              <div className="flex flex-col gap-2" role="group" aria-label="Clarification options">
+                {message.clarificationOptions!.map((option) => (
+                  <button
+                    key={option}
+                    onClick={() => onSelectOption?.(option, message.id)}
+                    disabled={clarificationDisabled}
+                    className={`px-3 py-1.5 rounded-md border text-sm text-left transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-accent)] ${
+                      clarificationDisabled
+                        ? 'border-[var(--color-border)] bg-[var(--color-bg-secondary)] text-[var(--color-text-muted)] cursor-default opacity-50'
+                        : 'border-[var(--color-border)] bg-[var(--color-bg-secondary)] text-[var(--color-text-primary)] hover:border-[var(--color-accent)] hover:text-[var(--color-accent)] cursor-pointer'
+                    }`}
+                  >
+                    {option}
+                  </button>
+                ))}
+              </div>
+              {!clarificationDisabled && (
+                <p className="mt-3 text-sm text-[var(--color-text-primary)]">Select one to continue...</p>
+              )}
+            </div>
+          )}
+
+          {/* Citations */}
+          {message.citations && message.citations.length > 0 && (
+            <div className="mt-4 pt-4 border-t border-[var(--color-border)]">
+              <p className="text-[11px] font-medium text-[var(--color-text-muted)] mb-1.5">Related docs</p>
+              <div className="flex flex-wrap gap-1.5">
+                {message.citations.map((citation) => (
+                  <a
+                    key={citation.slug}
+                    href={`${linkPrefix}/${citation.slug}${citation.section ? `#${slugify(citation.section)}` : ''}`}
+                    className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg border border-[var(--color-border)] bg-[var(--color-bg-secondary)] text-xs text-[var(--color-text-secondary)] hover:border-[var(--color-accent)] hover:text-[var(--color-accent)] transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-accent)]"
+                  >
+                    <i className="fa-solid fa-file-lines text-[10px]" aria-hidden="true" />
+                    {citation.title}
+                  </a>
+                ))}
+              </div>
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+});

package/vendored/components/chat/ChatPanel.tsx

@@ -0,0 +1,206 @@
+'use client';
+
+import { useRef, useEffect, useCallback } from 'react';
+import { useChat } from '@/hooks/useChat';
+import { ChatMessage } from './ChatMessage';
+import { ChatInput } from './ChatInput';
+import { ChatEmptyState } from './ChatEmptyState';
+
+const SOMETHING_ELSE_PATTERNS = ['something else', 'none of the above', 'none of these'];
+
+/**
+ * Rewrite generic "something else" / "none of the above" options to a more
+ * descriptive message so Claude gets useful follow-up context.
+ */
+export function rewriteOptionText(option: string): string {
+  const isGeneric = SOMETHING_ELSE_PATTERNS.some(p => option.toLowerCase().includes(p));
+  return isGeneric
+    ? "I'm looking for something different than those options"
+    : option;
+}
+
+interface ChatPanelProps {
+  isOpen: boolean;
+  onClose: () => void;
+  starterQuestions?: string[];
+  chatEndpoint?: string;
+  /** 'inline' renders as a persistent column (no fixed positioning).
+   *  'overlay' (default) renders as a fixed slide-in panel with backdrop. */
+  mode?: 'inline' | 'overlay';
+}
+
+/**
+ * Chat panel for AI-powered documentation Q&A.
+ *
+ * mode="overlay" (default): Fixed slide-in panel with backdrop blur.
+ * mode="inline": Persistent column embedded in page layout (no positioning).
+ */
+export function ChatPanel({ isOpen, onClose, starterQuestions, chatEndpoint, mode = 'overlay' }: ChatPanelProps) {
+  const { messages, sendMessage, isLoading, abort, retry, clearChat, error, markClarificationSelected } = useChat(chatEndpoint);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLDivElement>(null);
+
+  // Auto-scroll to bottom when new messages arrive — debounced to avoid
+  // scroll thrashing during SSE streaming (messages changes per animation frame)
+  useEffect(() => {
+    const id = requestAnimationFrame(() => {
+      messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    });
+    return () => cancelAnimationFrame(id);
+  }, [messages]);
+
+  // Escape key handling is in useChatPanel (capture phase, with search-modal awareness)
+
+  // Focus the input when panel opens
+  useEffect(() => {
+    if (isOpen) {
+      // Small delay to allow animation to start
+      const timer = setTimeout(() => {
+        const textarea = inputRef.current?.querySelector('textarea');
+        textarea?.focus();
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [isOpen]);
+
+  const handleSelectOption = useCallback((option: string, messageId: string) => {
+    markClarificationSelected(messageId);
+    sendMessage(rewriteOptionText(option));
+  }, [markClarificationSelected, sendMessage]);
+
+  const hasMessages = messages.length > 0;
+  const isInline = mode === 'inline';
+
+  // Shared panel content (header, messages, error, input)
+  const panelContent = (
+    <>
+      {/* Header */}
+      <div className="flex items-center justify-between h-14 px-4 border-b border-[var(--color-border)] flex-shrink-0" style={{ borderBottomWidth: '1px' }}>
+        <div className="flex items-center gap-2">
+          <i className="fa-solid fa-sparkles text-sm text-[var(--color-accent)]" aria-hidden="true" />
+          <span className="text-sm font-semibold text-[var(--color-text-primary)]">
+            AI Chat
+          </span>
+        </div>
+        <div className="flex items-center gap-1">
+          {hasMessages && (
+            <button
+              onClick={clearChat}
+              className="px-2 py-1 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] transition-colors rounded-md hover:bg-[var(--color-bg-secondary)] cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-accent)]"
+            >
+              New chat
+            </button>
+          )}
+          <button
+            onClick={onClose}
+            className="p-1.5 rounded-lg hover:bg-[var(--color-bg-secondary)] text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)] transition-colors cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-accent)]"
+            aria-label="Close chat"
+          >
+            <i className="fa-solid fa-xmark text-sm" aria-hidden="true" />
+          </button>
+        </div>
+      </div>
+
+      {/* Messages area */}
+      <div
+        className="flex-1 overflow-y-auto min-h-0"
+        style={{ overscrollBehavior: 'contain' }}
+        aria-live="polite"
+        aria-label="Chat messages"
+      >
+        {hasMessages ? (
+          <div className="py-2">
+            {messages.map((msg) => (
+              <ChatMessage
+                key={msg.id}
+                message={msg}
+                onSelectOption={handleSelectOption}
+              />
+            ))}
+            <div ref={messagesEndRef} />
+          </div>
+        ) : (
+          <ChatEmptyState
+            starterQuestions={starterQuestions}
+            onSelectQuestion={sendMessage}
+          />
+        )}
+      </div>
+
+      {/* Error banner with retry */}
+      {error && (
+        <div className="px-4 py-2 bg-red-500/10 border-t border-red-500/20 flex-shrink-0 flex items-center justify-between gap-3">
+          <p className="text-xs text-red-600 dark:text-red-400">
+            {error}
+          </p>
+          <button
+            onClick={retry}
+            className="text-xs font-medium text-red-600 dark:text-red-400 hover:underline flex-shrink-0 cursor-pointer"
+          >
+            Try again
+          </button>
+        </div>
+      )}
+
+      {/* Input */}
+      <div ref={inputRef} className="flex-shrink-0">
+        <ChatInput
+          onSend={sendMessage}
+          onAbort={abort}
+          isLoading={isLoading}
+        />
+      </div>
+    </>
+  );
+
+  // Inline mode: no fixed positioning, no backdrop, fills parent container
+  if (isInline) {
+    return (
+      <div
+        aria-label="AI Chat"
+        className="flex flex-col h-full"
+        style={{ backgroundColor: 'var(--color-bg-primary)', touchAction: 'manipulation', fontFamily: 'var(--font-primary, inherit)' }}
+      >
+        {panelContent}
+      </div>
+    );
+  }
+
+  // Overlay mode: fixed positioning with backdrop blur
+  return (
+    <>
+      {/* Mobile backdrop (<lg) */}
+      {isOpen && (
+        <div
+          className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[54] lg:hidden"
+          onClick={onClose}
+          aria-hidden="true"
+        />
+      )}
+
+      {/* Panel */}
+      <div
+        role="dialog"
+        aria-label="AI Chat"
+        aria-hidden={!isOpen}
+        aria-modal={isOpen || undefined}
+        data-open={isOpen}
+        data-chat-panel
+        className={`
+          fixed z-[55] flex flex-col
+          transition-all duration-200
+          inset-x-2 top-4 max-h-[80dvh] rounded-2xl shadow-xl border border-[var(--color-border)]
+          lg:inset-x-auto lg:top-0 lg:max-h-none lg:rounded-none lg:shadow-none lg:border-0
+          lg:right-0 lg:h-dvh lg:w-[400px] 2xl:w-[460px] lg:border-l lg:border-[var(--color-border)]
+          ${isOpen
+            ? 'translate-y-0 opacity-100 lg:translate-x-0'
+            : '-translate-y-4 opacity-0 pointer-events-none lg:translate-y-0 lg:translate-x-full lg:opacity-100'
+          }
+        `}
+        style={{ backgroundColor: 'var(--color-bg-primary)', touchAction: 'manipulation', fontFamily: 'var(--font-primary, inherit)' }}
+      >
+        {panelContent}
+      </div>
+    </>
+  );
+}