jamdesk 1.0.22 → 1.1.0

package/vendored/components/AIActionsMenu.tsx

@@ -0,0 +1,677 @@
+'use client';
+
+import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import { usePathname } from 'next/navigation';
+import { useLinkPrefix } from '@/lib/link-prefix-context';
+import { getIconClass } from '@/lib/icon-utils';
+import type { ContextualOption } from '@/lib/docs-types';
+
+// =============================================================================
+// CONSTANTS
+// =============================================================================
+
+const COPY_FEEDBACK_DELAY_MS = 600;
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+interface AIActionsMenuProps {
+  options: ContextualOption[];
+  projectName: string;
+}
+
+type FeedbackState = 'idle' | 'loading' | 'success' | 'error';
+
+interface BuiltinOptionMeta {
+  title: string;
+  description: string;
+  icon: React.ReactNode;
+  isExternal: boolean;
+}
+
+// =============================================================================
+// ICONS (inline SVG — same approach as Fumadocs)
+// =============================================================================
+
+function CopyIcon({ className }: { className?: string }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
+      <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+    </svg>
+  );
+}
+
+function CheckIcon({ className }: { className?: string }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className={className}>
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  );
+}
+
+function XIcon({ className }: { className?: string }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className={className}>
+      <line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" />
+    </svg>
+  );
+}
+
+function ChevronDownIcon({ className }: { className?: string }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
+      <polyline points="6 9 12 15 18 9" />
+    </svg>
+  );
+}
+
+function FileTextIcon({ className }: { className?: string }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
+      <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+      <polyline points="14 2 14 8 20 8" />
+      <line x1="16" y1="13" x2="8" y2="13" />
+      <line x1="16" y1="17" x2="8" y2="17" />
+    </svg>
+  );
+}
+
+function PlugIcon({ className }: { className?: string }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
+      <path d="M12 22v-5" /><path d="M9 8V2" /><path d="M15 8V2" /><path d="M18 8v5a6 6 0 0 1-12 0V8z" />
+    </svg>
+  );
+}
+
+function ExternalLinkIcon({ className }: { className?: string }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}>
+      <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+      <polyline points="15 3 21 3 21 9" />
+      <line x1="10" y1="14" x2="21" y2="3" />
+    </svg>
+  );
+}
+
+// Brand logos
+function ChatGPTIcon({ className }: { className?: string }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className={className}>
+      <path d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.18a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .51 4.911 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.99 5.99 0 0 0 3.997-2.9 6.056 6.056 0 0 0-.747-7.073zM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.141-.081 4.779-2.758a.795.795 0 0 0 .392-.681v-6.737l2.02 1.168a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.494 4.494zM3.6 18.304a4.47 4.47 0 0 1-.535-3.014l.142.085 4.783 2.759a.771.771 0 0 0 .78 0l5.843-3.369v2.332a.08.08 0 0 1-.033.062L9.74 19.95a4.5 4.5 0 0 1-6.14-1.646zM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.676l5.815 3.355-2.02 1.168a.076.076 0 0 1-.071 0l-4.83-2.786A4.504 4.504 0 0 1 2.34 7.872zm16.597 3.855l-5.833-3.387L15.119 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.105v-5.678a.79.79 0 0 0-.407-.667zm2.01-3.023l-.141-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.5 4.5 0 0 1 6.68 4.66zm-12.64 4.135l-2.02-1.164a.08.08 0 0 1-.038-.057V6.075a4.5 4.5 0 0 1 7.375-3.453l-.142.08L8.704 5.46a.795.795 0 0 0-.393.681zm1.097-2.365l2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5z" />
+    </svg>
+  );
+}
+
+function ClaudeIcon({ className }: { className?: string }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className={className}>
+      <path d="m4.7144 15.9555 4.7174-2.6471.079-.2307-.079-.1275h-.2307l-.7893-.0486-2.6956-.0729-2.3375-.0971-2.2646-.1214-.5707-.1215-.5343-.7042.0546-.3522.4797-.3218.686.0608 1.5179.1032 2.2767.1578 1.6514.0972 2.4468.255h.3886l.0546-.1579-.1336-.0971-.1032-.0972L6.973 9.8356l-2.55-1.6879-1.3356-.9714-.7225-.4918-.3643-.4614-.1578-1.0078.6557-.7225.8803.0607.2246.0607.8925.686 1.9064 1.4754 2.4893 1.8336.3643.3035.1457-.1032.0182-.0728-.164-.2733-1.3539-2.4467-1.445-2.4893-.6435-1.032-.17-.6194c-.0607-.255-.1032-.4674-.1032-.7285L6.287.1335 6.6997 0l.9957.1336.419.3642.6192 1.4147 1.0018 2.2282 1.5543 3.0296.4553.8985.2429.8318.091.255h.1579v-.1457l.1275-1.706.2368-2.0947.2307-2.6957.0789-.7589.3764-.9107.7468-.4918.5828.2793.4797.686-.0668.4433-.2853 1.8517-.5586 2.9021-.3643 1.9429h.2125l.2429-.2429.9835-1.3053 1.6514-2.0643.7286-.8196.85-.9046.5464-.4311h1.0321l.759 1.1293-.34 1.1657-1.0625 1.3478-.8804 1.1414-1.2628 1.7-.7893 1.36.0729.1093.1882-.0183 2.8535-.607 1.5421-.2794 1.8396-.3157.8318.3886.091.3946-.3278.8075-1.967.4857-2.3072.4614-3.4364.8136-.0425.0304.0486.0607 1.5482.1457.6618.0364h1.621l3.0175.2247.7892.522.4736.6376-.079.4857-1.2142.6193-1.6393-.3886-3.825-.9107-1.3113-.3279h-.1822v.1093l1.0929 1.0686 2.0035 1.8092 2.5075 2.3314.1275.5768-.3218.4554-.34-.0486-2.2039-1.6575-.85-.7468-1.9246-1.621h-.1275v.17l.4432.6496 2.3436 3.5214.1214 1.0807-.17.3521-.6071.2125-.6679-.1214-1.3721-1.9246L14.38 17.959l-1.1414-1.9428-.1397.079-.674 7.2552-.3156.3703-.7286.2793-.6071-.4614-.3218-.7468.3218-1.4753.3886-1.9246.3157-1.53.2853-1.9004.17-.6314-.0121-.0425-.1397.0182-1.4328 1.9672-2.1796 2.9446-1.7243 1.8456-.4128.164-.7164-.3704.0667-.6618.4008-.5889 2.386-3.0357 1.4389-1.882.929-1.0868-.0062-.1579h-.0546l-6.3385 4.1164-1.1293.1457-.4857-.4554.0608-.7467.2307-.2429 1.9064-1.3114Z" />
+    </svg>
+  );
+}
+
+function PerplexityIcon({ className }: { className?: string }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 38" fill="currentColor" className={className}>
+      <path fillRule="evenodd" clipRule="evenodd" d="M5.12114 0.0400391L15.919 9.98864V9.98636V0.062995H18.0209V10.0332L28.8671 0.0400391V11.3829H33.3202V27.744H28.8808V37.8442L18.0209 28.303V37.9538H15.919V28.4604L5.13338 37.96V27.744H0.680176V11.3829H5.12114V0.0400391ZM14.3344 13.4592H2.78208V25.6677H5.13074V21.8167L14.3344 13.4592ZM7.23518 22.7379V33.3271L15.919 25.6786V14.8506L7.23518 22.7379ZM18.0814 25.5775V14.8404L26.7677 22.7282V27.744H26.7789V33.219L18.0814 25.5775ZM28.8808 25.6677H31.2183V13.4592H19.752L28.8808 21.7302V25.6677ZM26.7652 11.3829V4.81584L19.6374 11.3829H26.7652ZM14.3507 11.3829H7.22306V4.81584L14.3507 11.3829Z" />
+    </svg>
+  );
+}
+
+function GeminiIcon({ className }: { className?: string }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className={className}>
+      <path d="M11.04 19.32Q12 21.51 12 24q0-2.49.93-4.68.96-2.19 2.58-3.81t3.81-2.55Q21.51 12 24 12q-2.49 0-4.68-.93a12.3 12.3 0 0 1-3.81-2.58 12.3 12.3 0 0 1-2.58-3.81Q12 2.49 12 0q0 2.49-.96 4.68-.93 2.19-2.55 3.81a12.3 12.3 0 0 1-3.81 2.58Q2.49 12 0 12q2.49 0 4.68.96 2.19.93 3.81 2.55t2.55 3.81" />
+    </svg>
+  );
+}
+
+function CursorIcon({ className }: { className?: string }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className={className}>
+      <path d="M11.503.131 1.891 5.678a.84.84 0 0 0-.42.726v11.188c0 .3.162.575.42.724l9.609 5.55a1 1 0 0 0 .998 0l9.61-5.55a.84.84 0 0 0 .42-.724V6.404a.84.84 0 0 0-.42-.726L12.497.131a1.01 1.01 0 0 0-.996 0M2.657 6.338h18.55c.263 0 .43.287.297.515L12.23 22.918c-.062.107-.229.064-.229-.06V12.335a.59.59 0 0 0-.295-.51l-9.11-5.257c-.109-.063-.064-.23.061-.23" />
+    </svg>
+  );
+}
+
+function VSCodeIcon({ className }: { className?: string }) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="currentColor" className={className}>
+      <path fillRule="evenodd" clipRule="evenodd" d="M70.9119 99.3171C72.4869 99.9307 74.2828 99.8914 75.8725 99.1264L96.4608 89.2197C98.6242 88.1787 100 85.9892 100 83.5872V16.4133C100 14.0113 98.6243 11.8218 96.4609 10.7808L75.8725 0.873756C73.7862 -0.130129 71.3446 0.11576 69.5135 1.44695C69.252 1.63711 69.0028 1.84943 68.769 2.08341L29.3551 38.0415L12.1872 25.0096C10.589 23.7965 8.35363 23.8959 6.86933 25.2461L1.36303 30.2549C-0.452552 31.9064 -0.454633 34.7627 1.35853 36.417L16.2471 50.0001L1.35853 63.5832C-0.454633 65.2374 -0.452552 68.0938 1.36303 69.7453L6.86933 74.7541C8.35363 76.1043 10.589 76.2037 12.1872 74.9905L29.3551 61.9587L68.769 97.9167C69.3925 98.5406 70.1246 99.0104 70.9119 99.3171ZM75.0152 27.2989L45.1091 50.0001L75.0152 72.7012V27.2989Z" />
+    </svg>
+  );
+}
+
+// =============================================================================
+// BUILTIN OPTION METADATA
+// =============================================================================
+
+const BUILTIN_OPTIONS: Record<string, BuiltinOptionMeta> = {
+  copy: {
+    title: 'Copy page',
+    description: 'Copy page as Markdown for LLMs',
+    icon: <CopyIcon className="w-4 h-4" />,
+    isExternal: false,
+  },
+  view: {
+    title: 'View as Markdown',
+    description: 'Open the raw Markdown in a new tab',
+    icon: <FileTextIcon className="w-4 h-4" />,
+    isExternal: true,
+  },
+  chatgpt: {
+    title: 'Open in ChatGPT',
+    description: 'Ask ChatGPT about this page',
+    icon: <ChatGPTIcon className="w-4 h-4" />,
+    isExternal: true,
+  },
+  claude: {
+    title: 'Open in Claude',
+    description: 'Ask Claude about this page',
+    icon: <ClaudeIcon className="w-4 h-4" />,
+    isExternal: true,
+  },
+  gemini: {
+    title: 'Open in Gemini',
+    description: 'Ask Gemini about this page',
+    icon: <GeminiIcon className="w-4 h-4" />,
+    isExternal: true,
+  },
+  perplexity: {
+    title: 'Open in Perplexity',
+    description: 'Ask Perplexity about this page',
+    icon: <PerplexityIcon className="w-4 h-4" />,
+    isExternal: true,
+  },
+  mcp: {
+    title: 'Copy MCP config',
+    description: 'Copy MCP server configuration as JSON',
+    icon: <PlugIcon className="w-4 h-4" />,
+    isExternal: false,
+  },
+  cursor: {
+    title: 'Connect to Cursor',
+    description: 'Install MCP Server on Cursor',
+    icon: <CursorIcon className="w-4 h-4" />,
+    isExternal: true,
+  },
+  vscode: {
+    title: 'Connect to VS Code',
+    description: 'Install MCP Server on VS Code',
+    icon: <VSCodeIcon className="w-4 h-4" />,
+    isExternal: true,
+  },
+};
+
+// =============================================================================
+// MENU ITEM CONTENT (shared across all dropdown item variants)
+// =============================================================================
+
+function MenuItemContent({ icon, title, description, isExternal }: {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  isExternal: boolean;
+}) {
+  return (
+    <>
+      <span className="flex-shrink-0 text-[var(--color-text-muted)]">{icon}</span>
+      <div className="min-w-0 flex-1">
+        <div className="flex items-center gap-1.5">
+          <span className="text-[13px] font-medium text-[var(--color-text-primary)]">{title}</span>
+          {isExternal && <ExternalLinkIcon className="w-3 h-3 text-[var(--color-text-muted)] flex-shrink-0 hidden sm:block" />}
+        </div>
+        <div className="text-xs text-[var(--color-text-muted)] mt-0.5 hidden sm:block">{description}</div>
+      </div>
+    </>
+  );
+}
+
+// =============================================================================
+// URL HELPERS
+// =============================================================================
+
+function buildMcpServerName(projectName: string): string {
+  const slug = projectName.toLowerCase().replace(/\s+/g, '-');
+  // Avoid redundant suffixes: "acme-docs-docs" or "acme-documentation-docs"
+  if (slug.endsWith('-docs') || slug.endsWith('-documentation')) {
+    return slug.replace(/-documentation$/, '-docs');
+  }
+  return `${slug}-docs`;
+}
+
+function buildMcpConfig(projectName: string, mcpUrl: string) {
+  return {
+    mcpServers: {
+      [buildMcpServerName(projectName)]: {
+        url: mcpUrl,
+      },
+    },
+  };
+}
+
+/** Base URLs for AI chat services that support prompt pre-filling. */
+const AI_CHAT_URLS: Record<string, string> = {
+  chatgpt: 'https://chatgpt.com/?hints=search&q=',
+  claude: 'https://claude.ai/new?q=',
+  gemini: 'https://gemini.google.com/app?q=',
+  perplexity: 'https://www.perplexity.ai/?q=',
+};
+
+/** Hook that resets a feedback state to 'idle' after 2 seconds. */
+function useFeedbackTimer(state: FeedbackState, setState: (s: FeedbackState) => void) {
+  useEffect(() => {
+    if (state === 'success' || state === 'error') {
+      const timer = setTimeout(() => setState('idle'), 2000);
+      return () => clearTimeout(timer);
+    }
+  }, [state, setState]);
+}
+
+function buildCustomHref(href: string | { base: string; query?: Array<{ key: string; value: string }> }): string {
+  if (typeof href === 'string') {
+    return /^https?:\/\//i.test(href) ? href : '#';
+  }
+  const url = new URL(href.base);
+  if (href.query) {
+    for (const { key, value } of href.query) {
+      url.searchParams.set(key, value);
+    }
+  }
+  return url.toString();
+}
+
+// =============================================================================
+// COMPONENT
+// =============================================================================
+
+export function AIActionsMenu({ options, projectName }: AIActionsMenuProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [copyFeedback, setCopyFeedback] = useState<FeedbackState>('idle');
+  const [mcpFeedback, setMcpFeedback] = useState<FeedbackState>('idle');
+  const copyLoadingRef = useRef(false);
+  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const itemsRef = useRef<(HTMLButtonElement | HTMLAnchorElement | null)[]>([]);
+  const pathname = usePathname();
+  const linkPrefix = useLinkPrefix();
+
+  // Compute URLs client-side to survive SPA navigation
+  const origin = typeof window !== 'undefined' ? window.location.origin : '';
+  const mdRelativePath = `${pathname}.md`;
+  const mdAbsoluteUrl = `${origin}${pathname}.md`;
+  const mcpUrl = `${origin}${linkPrefix}/_mcp`;
+
+  // Close on navigation
+  useEffect(() => {
+    setIsOpen(false);
+  }, [pathname]);
+
+  // Clean up close timer on unmount
+  useEffect(() => () => {
+    if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+  }, []);
+
+  // Close on click outside
+  useEffect(() => {
+    if (!isOpen) return;
+    function handleMouseDown(e: MouseEvent) {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleMouseDown);
+    return () => document.removeEventListener('mousedown', handleMouseDown);
+  }, [isOpen]);
+
+  // Close on Escape
+  useEffect(() => {
+    if (!isOpen) return;
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === 'Escape') {
+        setIsOpen(false);
+        triggerRef.current?.focus();
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen]);
+
+  // Reset feedback states after 2s
+  useFeedbackTimer(copyFeedback, setCopyFeedback);
+  useFeedbackTimer(mcpFeedback, setMcpFeedback);
+
+  const handleCopy = useCallback(async () => {
+    if (copyLoadingRef.current) return;
+    copyLoadingRef.current = true;
+    setCopyFeedback('loading');
+    try {
+      // Mobile Safari loses user gesture context after async fetch,
+      // causing clipboard.writeText() to fail with NotAllowedError.
+      // ClipboardItem with Promise<Blob> preserves the gesture because
+      // clipboard.write() is called synchronously in the click handler.
+      const supportsClipboardItem = typeof ClipboardItem !== 'undefined'
+        && typeof navigator.clipboard?.write === 'function';
+
+      if (supportsClipboardItem) {
+        const blobPromise = fetch(mdRelativePath)
+          .then(res => {
+            if (!res.ok) throw new Error(`Failed to fetch: ${res.status}`);
+            return res.text();
+          })
+          .then(text => new Blob([text], { type: 'text/plain' }));
+
+        await navigator.clipboard.write([
+          new ClipboardItem({ 'text/plain': blobPromise }),
+        ]);
+      } else {
+        const res = await fetch(mdRelativePath);
+        if (!res.ok) throw new Error(`Failed to fetch: ${res.status}`);
+        const text = await res.text();
+        await navigator.clipboard.writeText(text);
+      }
+      setCopyFeedback('success');
+    } catch {
+      setCopyFeedback('error');
+    } finally {
+      copyLoadingRef.current = false;
+    }
+  }, [mdRelativePath]);
+
+  const handleMcpCopy = useCallback(async () => {
+    const config = buildMcpConfig(projectName, mcpUrl);
+    try {
+      await navigator.clipboard.writeText(JSON.stringify(config, null, 2));
+      setMcpFeedback('success');
+    } catch {
+      setMcpFeedback('error');
+    }
+  }, [projectName, mcpUrl]);
+
+  const handleAction = useCallback((option: ContextualOption) => {
+    if (typeof option !== 'string') {
+      // Custom option — open href
+      window.open(buildCustomHref(option.href), '_blank', 'noopener,noreferrer');
+      setIsOpen(false);
+      return;
+    }
+
+    switch (option) {
+      case 'copy':
+        handleCopy();
+        break;
+      case 'view':
+        window.open(mdRelativePath, '_blank', 'noopener,noreferrer');
+        break;
+      case 'chatgpt':
+      case 'claude':
+      case 'gemini':
+      case 'perplexity': {
+        const baseUrl = AI_CHAT_URLS[option];
+        window.open(
+          `${baseUrl}${encodeURIComponent(`Read this page and answer my questions about it: ${mdAbsoluteUrl}`)}`,
+          '_blank', 'noopener,noreferrer'
+        );
+        break;
+      }
+      case 'mcp':
+        handleMcpCopy();
+        break;
+      case 'cursor': {
+        const name = buildMcpServerName(projectName);
+        const cursorConfig = btoa(JSON.stringify({ url: mcpUrl }));
+        window.open(
+          `cursor://anysphere.cursor-deeplink/mcp/install?name=${encodeURIComponent(name)}&config=${cursorConfig}`,
+          '_self'
+        );
+        break;
+      }
+      case 'vscode': {
+        const name = buildMcpServerName(projectName);
+        const vsConfig = { name, type: 'http', url: mcpUrl };
+        window.open(
+          `vscode:mcp/install?${encodeURIComponent(JSON.stringify(vsConfig))}`,
+          '_self'
+        );
+        break;
+      }
+    }
+
+    // Close dropdown — copy actions close after brief delay so user sees feedback
+    if (option === 'copy' || option === 'mcp') {
+      if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = setTimeout(() => setIsOpen(false), COPY_FEEDBACK_DELAY_MS);
+    } else {
+      setIsOpen(false);
+    }
+  }, [handleCopy, handleMcpCopy, mdRelativePath, mdAbsoluteUrl, projectName, mcpUrl]);
+
+  // Keyboard navigation within dropdown
+  const handleMenuKeyDown = useCallback((e: React.KeyboardEvent) => {
+    const items = itemsRef.current.filter(Boolean) as HTMLElement[];
+    const currentIndex = items.indexOf(e.target as HTMLElement);
+
+    switch (e.key) {
+      case 'ArrowDown': {
+        e.preventDefault();
+        const next = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+        items[next]?.focus();
+        break;
+      }
+      case 'ArrowUp': {
+        e.preventDefault();
+        const prev = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+        items[prev]?.focus();
+        break;
+      }
+      case 'Home':
+        e.preventDefault();
+        items[0]?.focus();
+        break;
+      case 'End':
+        e.preventDefault();
+        items[items.length - 1]?.focus();
+        break;
+    }
+  }, []);
+
+  // Filter valid options
+  const validOptions = useMemo(() => options.filter(opt =>
+    typeof opt === 'string' ? opt in BUILTIN_OPTIONS : (opt && typeof opt === 'object' && opt.title)
+  ), [options]);
+
+  const hasCopy = validOptions.some(opt => opt === 'copy');
+  // Items to show in dropdown — copy is always first when present
+  const dropdownItems = validOptions;
+  const hasDropdown = dropdownItems.length > 0;
+
+  // Sync itemsRef length with dropdown item count
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    itemsRef.current.length = dropdownItems.length;
+  }, [dropdownItems.length]);
+
+  if (validOptions.length === 0) return null;
+
+  // Single option, no dropdown
+  if (validOptions.length === 1) {
+    const opt = validOptions[0];
+    if (opt === 'copy') {
+      return (
+        <button
+          onClick={handleCopy}
+          aria-label="Copy page"
+          className="inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-md cursor-pointer
+            text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]
+            bg-[var(--color-bg-secondary)]/50 hover:bg-[var(--color-bg-secondary)]
+            border border-[var(--color-border)]/50 hover:border-[var(--color-border)]
+            transition-colors"
+        >
+          {copyFeedback === 'success' ? <CheckIcon className="w-3.5 h-3.5 text-emerald-500" /> :
+           copyFeedback === 'error' ? <XIcon className="w-3.5 h-3.5 text-red-500" /> :
+           <CopyIcon className="w-3.5 h-3.5" />}
+          <span>{copyFeedback === 'success' ? 'Copied' : copyFeedback === 'error' ? 'Failed' : 'Copy page'}</span>
+        </button>
+      );
+    }
+    // Single non-copy option
+    const meta = typeof opt === 'string' ? BUILTIN_OPTIONS[opt] : null;
+    return (
+      <button
+        onClick={() => handleAction(opt)}
+        aria-label={meta?.title || (typeof opt !== 'string' ? opt.title : '')}
+        className="inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-md cursor-pointer
+          text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]
+          bg-[var(--color-bg-secondary)]/50 hover:bg-[var(--color-bg-secondary)]
+          border border-[var(--color-border)]/50 hover:border-[var(--color-border)]
+          transition-colors"
+      >
+        {meta?.icon || null}
+        <span>{meta?.title || (typeof opt !== 'string' ? opt.title : '')}</span>
+      </button>
+    );
+  }
+
+  // Copy state icon for the primary button
+  const copyIcon = copyFeedback === 'success' ? <CheckIcon className="w-3.5 h-3.5 text-emerald-500" /> :
+                   copyFeedback === 'error' ? <XIcon className="w-3.5 h-3.5 text-red-500" /> :
+                   copyFeedback === 'loading' ? (
+                     <svg className="w-3.5 h-3.5 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                       <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                       <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                     </svg>
+                   ) : <CopyIcon className="w-3.5 h-3.5" />;
+
+  const copyLabel = copyFeedback === 'success' ? 'Copied!' : copyFeedback === 'error' ? 'Failed' : 'Copy page';
+
+  return (
+    <div ref={menuRef} className="relative inline-flex">
+      {hasCopy ? (
+        /* Split button: Copy + dropdown chevron */
+        <div className="inline-flex rounded-md border border-[var(--color-border-hover)] transition-colors" style={{ borderWidth: '1px' }}>
+          <button
+            onClick={handleCopy}
+            aria-label="Copy page"
+            className="inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium cursor-pointer
+              text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]
+              bg-[var(--color-bg-secondary)]/50 hover:bg-[var(--color-bg-secondary)]
+              rounded-l-md transition-colors"
+          >
+            {copyIcon}
+            <span>{copyLabel}</span>
+          </button>
+          {hasDropdown && (
+            <button
+              ref={triggerRef}
+              onClick={() => setIsOpen(!isOpen)}
+              aria-expanded={isOpen}
+              aria-haspopup="menu"
+              aria-label="More AI actions"
+              className="inline-flex items-center px-1.5 py-1 cursor-pointer
+                text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]
+                bg-[var(--color-bg-secondary)]/50 hover:bg-[var(--color-bg-secondary)]
+                border-l border-[var(--color-border-hover)]
+                rounded-r-md transition-colors"
+              style={{ borderLeftWidth: '1px' }}
+            >
+              <ChevronDownIcon className={`w-3.5 h-3.5 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
+            </button>
+          )}
+        </div>
+      ) : (
+        /* Single dropdown trigger: "AI Actions" */
+        <button
+          ref={triggerRef}
+          onClick={() => setIsOpen(!isOpen)}
+          aria-expanded={isOpen}
+          aria-haspopup="menu"
+          className="inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-md cursor-pointer
+            text-[var(--color-text-muted)] hover:text-[var(--color-text-primary)]
+            bg-[var(--color-bg-secondary)]/50 hover:bg-[var(--color-bg-secondary)]
+            border border-[var(--color-border)]/50 hover:border-[var(--color-border)]
+            transition-colors"
+        >
+          <span>AI Actions</span>
+          <ChevronDownIcon className={`w-3.5 h-3.5 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
+        </button>
+      )}
+
+      {/* Dropdown menu */}
+      {isOpen && hasDropdown && (
+        <div
+          role="menu"
+          onKeyDown={handleMenuKeyDown}
+          ref={dropdownRef}
+          className="absolute left-0 sm:left-auto sm:right-0 top-full mt-1.5 z-50
+            w-[240px] max-w-[calc(100vw-2rem)] py-1.5
+            bg-[var(--color-bg-primary)] border border-[var(--color-border-hover)]
+            rounded-lg shadow-lg
+            max-h-[calc(100vh-12rem)] overflow-y-auto overscroll-contain"
+          style={{ borderWidth: '1px' }}
+        >
+          {dropdownItems.map((option, index) => {
+            if (typeof option === 'string') {
+              const meta = BUILTIN_OPTIONS[option];
+              if (!meta) return null;
+
+              // Hide desktop-only options (MCP, Cursor, VS Code) on mobile
+              const isMobileHidden = option === 'mcp' || option === 'cursor' || option === 'vscode';
+
+              // Show feedback icon for copy/mcp actions
+              const feedbackIcon = option === 'copy'
+                ? (copyFeedback === 'success' ? <CheckIcon className="w-4 h-4 text-emerald-500" /> :
+                   copyFeedback === 'error' ? <XIcon className="w-4 h-4 text-red-500" /> : meta.icon)
+                : option === 'mcp'
+                ? (mcpFeedback === 'success' ? <CheckIcon className="w-4 h-4 text-emerald-500" /> :
+                   mcpFeedback === 'error' ? <XIcon className="w-4 h-4 text-red-500" /> : meta.icon)
+                : meta.icon;
+
+              return (
+                <button
+                  key={option}
+                  ref={el => { itemsRef.current[index] = el; }}
+                  role="menuitem"
+                  onClick={() => handleAction(option)}
+                  className={`w-full flex items-center gap-2.5 px-3 py-2.5 text-left cursor-pointer
+                    hover:bg-[var(--color-bg-secondary)] transition-colors${isMobileHidden ? ' hidden sm:flex' : ''}`}
+                >
+                  <MenuItemContent icon={feedbackIcon} title={meta.title} description={meta.description} isExternal={meta.isExternal} />
+                </button>
+              );
+            }
+
+            // Custom option
+            const iconName = typeof option.icon === 'string' ? option.icon : option.icon?.name;
+            const customIcon = iconName
+              ? <i className={`${getIconClass(iconName)} w-4 h-4`} />
+              : <ExternalLinkIcon className="w-4 h-4" />;
+            return (
+              <a
+                key={`custom-${index}`}
+                ref={el => { itemsRef.current[index] = el; }}
+                role="menuitem"
+                href={buildCustomHref(option.href)}
+                target="_blank"
+                rel="noopener noreferrer"
+                onClick={() => setIsOpen(false)}
+                className="flex items-center gap-2.5 px-3 py-2.5 cursor-pointer
+                  hover:bg-[var(--color-bg-secondary)] transition-colors no-underline"
+              >
+                <MenuItemContent
+                  icon={customIcon}
+                  title={option.title}
+                  description={option.description || ''}
+                  isExternal
+                />
+              </a>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}