@aravindc26/velu 0.11.5 → 0.11.9

package/src/engine/app/copy-page.css

@@ -32,6 +32,12 @@
   margin-top: 0.35rem;
 }
 
+.velu-page-last-updated {
+  margin: 0.35rem 0 0;
+  color: var(--color-fd-muted-foreground, #a1a1aa);
+  font-size: 0.8125rem;
+}
+
 .velu-rss-button {
   display: inline-flex;
   align-items: center;
@@ -155,10 +161,20 @@
   background-color: var(--color-fd-accent, #27272a);
 }
 
+.velu-copy-option-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  margin-top: 0.15rem;
+}
+
+.velu-copy-option-icon svg,
 .velu-copy-option svg {
   flex-shrink: 0;
   opacity: 0.7;
-  margin-top: 0.15rem;
   overflow: visible;
 }
 

package/src/engine/app/global.css

@@ -7,6 +7,69 @@ body {
   min-height: 100vh;
 }
 
+body:has(.velu-announcement) #nd-docs-layout,
+body:has(.velu-announcement) #nd-notebook-layout {
+  --fd-banner-height: var(--velu-announcement-h, 0px) !important;
+}
+
+/* ── Global announcement banner ── */
+.velu-announcement {
+  position: sticky;
+  top: 0;
+  z-index: 30;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 0.5rem 1rem;
+  background-color: var(--color-fd-primary);
+  color: #fff;
+  font-size: 0.875rem;
+  line-height: 1.4;
+  text-align: center;
+  gap: 0.5rem;
+  border-radius: 0;
+  margin: 0;
+  border: none;
+}
+
+.velu-announcement a {
+  color: #fff;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.velu-announcement a:hover {
+  opacity: 0.85;
+}
+
+.velu-announcement-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.velu-announcement-dismiss {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: none;
+  border-radius: 0.25rem;
+  background: transparent;
+  color: #fff;
+  font-size: 1rem;
+  cursor: pointer;
+  opacity: 0.8;
+  transition: opacity 0.15s;
+}
+
+.velu-announcement-dismiss:hover {
+  opacity: 1;
+}
+
 .velu-nav-brand {
   display: inline-flex;
   align-items: center;
@@ -581,13 +644,50 @@ nextjs-portal {
 
 .velu-footer {
   margin-top: 3rem;
-  padding-top: 1.5rem;
+  padding-top: 1.1rem;
   border-top: 1px solid var(--color-fd-border);
-  text-align: right;
-  font-size: 1.2rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+  font-size: 1rem;
   color: var(--color-fd-muted-foreground);
 }
 
+.velu-footer-socials {
+  display: inline-flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.velu-footer-social-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-fd-muted-foreground);
+  opacity: 0.78;
+  text-decoration: none;
+  transition: color 0.15s, opacity 0.15s;
+}
+
+.velu-footer-social-link:hover {
+  color: var(--color-fd-foreground);
+  opacity: 1;
+}
+
+.velu-footer-social-icon {
+  width: 1.05rem;
+  height: 1.05rem;
+  flex-shrink: 0;
+}
+
+.velu-footer-powered {
+  margin-left: auto;
+  font-size: 1.15rem;
+  line-height: 1.3;
+}
+
 .velu-page-feedback-wrap {
   margin-top: 2.75rem;
   display: grid;
@@ -867,16 +967,22 @@ nextjs-portal {
   }
 }
 
-.velu-footer a {
+.velu-footer-powered a {
   color: var(--color-fd-primary);
   font-weight: 600;
   text-decoration: none;
 }
 
-.velu-footer a:hover {
+.velu-footer-powered a:hover {
   text-decoration: underline;
 }
 
+@media (max-width: 768px) {
+  .velu-footer-powered {
+    margin-left: 0;
+  }
+}
+
 [data-card].velu-card-horizontal {
   display: grid !important;
   grid-template-columns: 2.25rem minmax(0, 1fr);

package/src/engine/app/layout.tsx

@@ -1,8 +1,9 @@
 import type { Metadata } from 'next';
 import type { ReactNode } from 'react';
-import { getAppearance, getSeoConfig, getSiteFavicon, getSiteName, getSiteOrigin, getSitePrimaryColor } from '@/lib/velu';
+import { getAppearance, getBannerConfig, getSeoConfig, getSiteDescription, getSiteFavicon, getSiteName, getSiteOrigin, getSitePrimaryColor } from '@/lib/velu';
 import { Providers } from '@/components/providers';
 import { VeluAssistant } from '@/components/assistant';
+import { VeluBanner } from '@/components/banner';
 import './global.css';
 import './search.css';
 import './assistant.css';
@@ -17,10 +18,12 @@ function toAbsoluteUrl(origin: string, value: string): string {
 }
 
 const siteName = getSiteName();
+const siteDescription = getSiteDescription();
 const siteOrigin = getSiteOrigin();
 const seo = getSeoConfig();
 const favicon = getSiteFavicon();
 const primaryColor = getSitePrimaryColor();
+const bannerConfig = getBannerConfig();
 const generatedDefaultSocialImage = '/og/index.svg';
 const defaultSocialImage = seo.metatags['og:image'] ?? seo.metatags['twitter:image'] ?? generatedDefaultSocialImage;
 const absoluteDefaultSocialImage = defaultSocialImage ? toAbsoluteUrl(siteOrigin, defaultSocialImage) : undefined;
@@ -31,6 +34,7 @@ export const metadata: Metadata = {
     default: siteName,
     template: `%s - ${siteName}`,
   },
+  ...(siteDescription ? { description: siteDescription } : {}),
   applicationName: siteName,
   generator: seo.metatags.generator || 'Mintlify',
   appleWebApp: {
@@ -39,12 +43,14 @@ export const metadata: Metadata = {
   openGraph: {
     type: 'website',
     siteName,
+    ...(siteDescription ? { description: siteDescription } : {}),
     ...(absoluteDefaultSocialImage
       ? { images: [{ url: absoluteDefaultSocialImage, width: 1200, height: 630 }] }
       : {}),
   },
   twitter: {
     card: 'summary_large_image',
+    ...(siteDescription ? { description: siteDescription } : {}),
     ...(absoluteDefaultSocialImage ? { images: [absoluteDefaultSocialImage] } : {}),
   },
   ...(favicon
@@ -76,6 +82,7 @@ export default function RootLayout({ children }: { children: ReactNode }) {
       </head>
       <body className="min-h-screen" suppressHydrationWarning>
         <Providers theme={theme}>
+          {bannerConfig && <VeluBanner content={bannerConfig.content} dismissible={bannerConfig.dismissible} />}
           {children}
           <VeluAssistant />
         </Providers>

package/src/engine/app/page.tsx

@@ -37,7 +37,10 @@ function resolveDefaultDocsHref(): string {
   const defaultLanguage = getLanguages()[0] ?? 'en';
   const tree = source.getPageTree(defaultLanguage);
   const first = findFirstPageUrl(tree);
-  return first || '/';
+  if (!first || first === '/') return '/';
+  if (!first.startsWith('/')) return first;
+  if (first.endsWith('/')) return first;
+  return `${first}/`;
 }
 
 export default function HomePage() {

package/src/engine/app/search.css

@@ -92,6 +92,10 @@
   background: var(--color-fd-accent, #27272a);
 }
 
+.fd-search-result.is-active {
+  background: var(--color-fd-accent, #27272a);
+}
+
 .fd-search-result-title {
   display: block;
   font-weight: 500;

package/src/engine/components/banner.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
+
+function hashContent(content: string): string {
+  let hash = 0;
+  for (let i = 0; i < content.length; i++) {
+    hash = ((hash << 5) - hash + content.charCodeAt(i)) | 0;
+  }
+  return `velu-banner-${hash}`;
+}
+
+function parseMarkdownLinks(text: string): string {
+  return text.replace(
+    /\[([^\]]+)\]\(([^)]+)\)/g,
+    '<a href="$2">$1</a>',
+  );
+}
+
+interface VeluBannerProps {
+  content: string;
+  dismissible: boolean;
+}
+
+function setSizeVar(el: HTMLElement | null) {
+  const h = el ? el.offsetHeight : 0;
+  document.documentElement.style.setProperty('--velu-announcement-h', `${h}px`);
+}
+
+export function VeluBanner({ content, dismissible }: VeluBannerProps) {
+  const storageKey = useMemo(() => hashContent(content), [content]);
+  const [dismissed, setDismissed] = useState(true);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (dismissible) {
+      const stored = localStorage.getItem(storageKey);
+      setDismissed(stored === '1');
+    } else {
+      setDismissed(false);
+    }
+  }, [dismissible, storageKey]);
+
+  const measuredRef = useCallback((node: HTMLDivElement | null) => {
+    (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
+    setSizeVar(node);
+  }, []);
+
+  useEffect(() => {
+    if (dismissed) {
+      setSizeVar(null);
+    }
+  }, [dismissed]);
+
+  if (dismissed) return null;
+
+  const html = parseMarkdownLinks(content);
+
+  return (
+    <div className="velu-announcement" role="banner" ref={measuredRef}>
+      <span
+        className="velu-announcement-content"
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
+      {dismissible && (
+        <button
+          type="button"
+          className="velu-announcement-dismiss"
+          aria-label="Dismiss banner"
+          onClick={() => {
+            localStorage.setItem(storageKey, '1');
+            setDismissed(true);
+          }}
+        >
+          &#x2715;
+        </button>
+      )}
+    </div>
+  );
+}

package/src/engine/components/copy-page.tsx

@@ -1,8 +1,59 @@
 'use client';
 
 import { useState, useRef, useEffect } from 'react';
+import type { VeluContextualOption } from '@/lib/velu';
 
-export function CopyPageButton() {
+interface CopyPageButtonProps {
+  options: VeluContextualOption[];
+  mcpUrl: string;
+}
+
+const ICON_MAP: Record<string, React.ReactNode> = {
+  copy: (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><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>
+  ),
+  view: (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><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"/><polyline points="10 9 9 9 8 9"/></svg>
+  ),
+  chatgpt: (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><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>
+  ),
+  claude: (
+    <svg width="18" height="18" viewBox="0 0 200 200" style={{ overflow: 'visible' }} fill="currentColor"><path d="m50.228 170.321 50.357-28.257.843-2.463-.843-1.361h-2.462l-8.426-.518-28.775-.778-24.952-1.037-24.175-1.296-6.092-1.297L0 125.796l.583-3.759 5.12-3.434 7.324.648 16.202 1.101 24.304 1.685 17.629 1.037 26.118 2.722h4.148l.583-1.685-1.426-1.037-1.101-1.037-25.147-17.045-27.22-18.017-14.258-10.37-7.713-5.25-3.888-4.925-1.685-10.758 7-7.713 9.397.649 2.398.648 9.527 7.323 20.35 15.75L94.817 91.9l3.889 3.24 1.555-1.102.195-.777-1.75-2.917-14.453-26.118-15.425-26.572-6.87-11.018-1.814-6.61c-.648-2.723-1.102-4.991-1.102-7.778l7.972-10.823L71.42 0 82.05 1.426l4.472 3.888 6.61 15.101 10.694 23.786 16.591 32.34 4.861 9.592 2.592 8.879.973 2.722h1.685v-1.556l1.36-18.211 2.528-22.36 2.463-28.776.843-8.1 4.018-9.722 7.971-5.25 6.222 2.981 5.12 7.324-.713 4.73-3.046 19.768-5.962 30.98-3.889 20.739h2.268l2.593-2.593 10.499-13.934 17.628-22.036 7.778-8.749 9.073-9.657 5.833-4.601h11.018l8.1 12.055-3.628 12.443-11.342 14.388-9.398 12.184-13.48 18.147-8.426 14.518.778 1.166 2.01-.194 30.46-6.481 16.462-2.982 19.637-3.37 8.88 4.148.971 4.213-3.5 8.62-20.998 5.184-24.628 4.926-36.682 8.685-.454.324.519.648 16.526 1.555 7.065.389h17.304l32.21 2.398 8.426 5.574 5.055 6.805-.843 5.184-12.962 6.611-17.498-4.148-40.83-9.721-14-3.5h-1.944v1.167l11.666 11.406 21.387 19.314 26.767 24.887 1.36 6.157-3.434 4.86-3.63-.518-23.526-17.693-9.073-7.972-20.545-17.304h-1.36v1.814l4.73 6.935 25.017 37.59 1.296 11.536-1.814 3.76-6.481 2.268-7.13-1.297-14.647-20.544-15.1-23.138-12.185-20.739-1.49.843-7.194 77.448-3.37 3.953-7.778 2.981-6.48-4.925-3.436-7.972 3.435-15.749 4.148-20.544 3.37-16.333 3.046-20.285 1.815-6.74-.13-.454-1.49.194-15.295 20.999-23.267 31.433-18.406 19.702-4.407 1.75-7.648-3.954.713-7.064 4.277-6.286 25.47-32.405 15.36-20.092 9.917-11.6-.065-1.686h-.583L44.07 198.125l-12.055 1.555-5.185-4.86.648-7.972 2.463-2.593 20.35-13.999-.064.065Z"/></svg>
+  ),
+  perplexity: (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M22.3977 7.0896h-2.3106V.0676l-7.5094 6.3542V.1577h-1.1554v6.1966L4.4904 0v7.0896H1.6023v10.3976h2.8882V24l6.932-6.3591v6.2005h1.1554v-6.0469l6.9318 6.1807v-6.4879h2.8882V7.0896zm-3.4657-4.531v4.531h-5.355l5.355-4.531zm-13.2862.0676 4.8691 4.4634H5.6458V2.6262zM2.7576 16.332V8.245h7.8476l-6.1149 6.1147v1.9723H2.7576zm2.8882 5.0404v-3.8852h.0001v-2.6488l5.7763-5.7764v7.0111l-5.7764 5.2993zm12.7086.0248-5.7766-5.1509V9.0618l5.7766 5.7766v6.5588zm2.8882-5.0652h-1.733v-1.9723L13.3948 8.245h7.8478v8.087z"/></svg>
+  ),
+  grok: (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M3 3l8.5 12.5L3 21h1.9l7.1-4.6L18.1 21H21l-8.5-12.5L21 3h-1.9l-7.1 4.6L5.9 3H3z"/></svg>
+  ),
+  mcp: (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
+  ),
+  'add-mcp': (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
+  ),
+  cursor: (
+    <svg width="18" height="18" viewBox="0 0 466.73 532.09" fill="currentColor"><path d="M457.43,125.94L244.42,2.96c-6.84-3.95-15.28-3.95-22.12,0L9.3,125.94c-5.75,3.32-9.3,9.46-9.3,16.11v247.99c0,6.65,3.55,12.79,9.3,16.11l213.01,122.98c6.84,3.95,15.28,3.95,22.12,0l213.01-122.98c5.75-3.32,9.3-9.46,9.3-16.11v-247.99c0-6.65-3.55-12.79-9.3-16.11h-.01ZM444.05,151.99l-205.63,356.16c-1.39,2.4-5.06,1.42-5.06-1.36v-233.21c0-4.66-2.49-8.97-6.53-11.31L24.87,145.67c-2.4-1.39-1.42-5.06,1.36-5.06h411.26c5.84,0,9.49,6.33,6.57,11.39h-.01Z"/></svg>
+  ),
+  vscode: (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M17.583 2.286L9.23 9.98 4.553 6.196 2 7.403v9.193l2.553 1.208 4.677-3.784L17.583 21.714 22 19.6V4.4l-4.417-2.114zM4.553 13.7V10.3L6.8 12l-2.247 1.7zM17.583 17.4l-6.06-5.4 6.06-5.4v10.8z"/></svg>
+  ),
+};
+
+function getDefaultIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
+  );
+}
+
+const EXTERNAL_IDS = new Set(['chatgpt', 'claude', 'perplexity', 'grok', 'cursor', 'vscode']);
+
+function buildPromptUrl(baseUrl: string, paramName: string, pageUrl: string): string {
+  return `${baseUrl}${paramName}=Read+from+${encodeURIComponent(pageUrl)}+so+I+can+ask+questions+about+it.`;
+}
+
+export function CopyPageButton({ options, mcpUrl }: CopyPageButtonProps) {
   const [label, setLabel] = useState('Copy page');
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -17,13 +68,20 @@ export function CopyPageButton() {
     return () => document.removeEventListener('click', handleClick);
   }, []);
 
-  function doCopy() {
-    setLabel('Copying...');
+  if (options.length === 0) return null;
+
+  function getPageText(): string {
     const titleEl = document.querySelector('h1');
     const article = document.querySelector('[data-pagefind-body]') || document.querySelector('main');
     let text = '';
     if (titleEl) text = '# ' + titleEl.textContent + '\n\n';
     if (article) text += (article as HTMLElement).innerText;
+    return text;
+  }
+
+  function doCopy() {
+    setLabel('Copying...');
+    const text = getPageText();
     if (text) {
       navigator.clipboard.writeText(text).then(() => {
         setLabel('Copied!');
@@ -33,7 +91,106 @@ export function CopyPageButton() {
     setDropdownOpen(false);
   }
 
-  const currentUrl = typeof window !== 'undefined' ? window.location.href : '';
+  function flashLabel(msg: string) {
+    setLabel(msg);
+    setTimeout(() => setLabel('Copy page'), 1500);
+    setDropdownOpen(false);
+  }
+
+  function handleBuiltinAction(id: string) {
+    const currentUrl = window.location.href;
+    const currentPath = window.location.pathname;
+
+    switch (id) {
+      case 'copy':
+        doCopy();
+        return;
+      case 'view': {
+        const text = getPageText();
+        if (text) {
+          const blob = new Blob([text], { type: 'text/plain' });
+          window.open(URL.createObjectURL(blob), '_blank');
+        }
+        setDropdownOpen(false);
+        return;
+      }
+      case 'chatgpt':
+        window.open(buildPromptUrl('https://chatgpt.com/?', 'prompt', currentUrl), '_blank');
+        setDropdownOpen(false);
+        return;
+      case 'claude':
+        window.open(buildPromptUrl('https://claude.ai/new?', 'q', currentUrl), '_blank');
+        setDropdownOpen(false);
+        return;
+      case 'perplexity':
+        window.open(buildPromptUrl('https://www.perplexity.ai/?', 'q', currentUrl), '_blank');
+        setDropdownOpen(false);
+        return;
+      case 'grok':
+        window.open(buildPromptUrl('https://grok.com/?', 'q', currentUrl), '_blank');
+        setDropdownOpen(false);
+        return;
+      case 'mcp':
+        navigator.clipboard.writeText(mcpUrl).then(() => flashLabel('Copied MCP URL!'));
+        return;
+      case 'add-mcp':
+        navigator.clipboard.writeText(`npx @anthropic-ai/claude-code --mcp-server-uri=${mcpUrl}`).then(() => flashLabel('Copied!'));
+        return;
+      case 'cursor':
+        window.open(`cursor://anysphere.cursor.mcp/install?url=${encodeURIComponent(mcpUrl)}`, '_self');
+        setDropdownOpen(false);
+        return;
+      case 'vscode':
+        window.open(`vscode://anthropic.claude-code/mcp/install?url=${encodeURIComponent(mcpUrl)}`, '_self');
+        setDropdownOpen(false);
+        return;
+    }
+  }
+
+  function resolveCustomHref(href: string): string {
+    const currentUrl = typeof window !== 'undefined' ? window.location.href : '';
+    const currentPath = typeof window !== 'undefined' ? window.location.pathname : '';
+    return href.replace(/\$page/g, encodeURIComponent(currentUrl)).replace(/\$path/g, encodeURIComponent(currentPath));
+  }
+
+  function renderOption(opt: typeof options[number]) {
+    const icon = ICON_MAP[opt.id] ?? getDefaultIcon();
+    const isExternal = EXTERNAL_IDS.has(opt.id) || opt.type === 'custom';
+    const arrow = isExternal ? <span className="velu-external-arrow">↗</span> : null;
+
+    if (opt.type === 'custom' && opt.href) {
+      return (
+        <a
+          key={opt.id}
+          className="velu-copy-option"
+          href={resolveCustomHref(opt.href)}
+          target="_blank"
+          rel="noopener noreferrer"
+          onClick={() => setDropdownOpen(false)}
+        >
+          <span className="velu-copy-option-icon">{icon}</span>
+          <div>
+            <div className="velu-copy-option-title">{opt.title} {arrow}</div>
+            {opt.description ? <div className="velu-copy-option-desc">{opt.description}</div> : null}
+          </div>
+        </a>
+      );
+    }
+
+    return (
+      <button
+        key={opt.id}
+        className="velu-copy-option"
+        onClick={() => handleBuiltinAction(opt.id)}
+      >
+        <span className="velu-copy-option-icon">{icon}</span>
+        <div>
+          <div className="velu-copy-option-title">{opt.title} {arrow}</div>
+          {opt.description ? <div className="velu-copy-option-desc">{opt.description}</div> : null}
+        </div>
+      </button>
+    );
+  }
 
   return (
     <div className="velu-copy-page-container" ref={containerRef}>
@@ -58,37 +215,7 @@ export function CopyPageButton() {
 
       {dropdownOpen && (
         <div className="velu-copy-dropdown" onClick={(e) => e.stopPropagation()}>
-          <button className="velu-copy-option" onClick={doCopy}>
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><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>
-            <div>
-              <div className="velu-copy-option-title">Copy page</div>
-              <div className="velu-copy-option-desc">Copy page as Markdown for LLMs</div>
-            </div>
-          </button>
-          <a
-            className="velu-copy-option"
-            href={`https://chatgpt.com/?prompt=Read+from+${encodeURIComponent(currentUrl)}+so+I+can+ask+questions+about+it.`}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><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>
-            <div>
-              <div className="velu-copy-option-title">Open in ChatGPT <span className="velu-external-arrow">↗</span></div>
-              <div className="velu-copy-option-desc">Ask questions about this page</div>
-            </div>
-          </a>
-          <a
-            className="velu-copy-option"
-            href={`https://claude.ai/new?q=Read+from+${encodeURIComponent(currentUrl)}+so+I+can+ask+questions+about+it.`}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <svg width="18" height="18" viewBox="0 0 200 200" style={{ overflow: 'visible' }} fill="currentColor"><path d="m50.228 170.321 50.357-28.257.843-2.463-.843-1.361h-2.462l-8.426-.518-28.775-.778-24.952-1.037-24.175-1.296-6.092-1.297L0 125.796l.583-3.759 5.12-3.434 7.324.648 16.202 1.101 24.304 1.685 17.629 1.037 26.118 2.722h4.148l.583-1.685-1.426-1.037-1.101-1.037-25.147-17.045-27.22-18.017-14.258-10.37-7.713-5.25-3.888-4.925-1.685-10.758 7-7.713 9.397.649 2.398.648 9.527 7.323 20.35 15.75L94.817 91.9l3.889 3.24 1.555-1.102.195-.777-1.75-2.917-14.453-26.118-15.425-26.572-6.87-11.018-1.814-6.61c-.648-2.723-1.102-4.991-1.102-7.778l7.972-10.823L71.42 0 82.05 1.426l4.472 3.888 6.61 15.101 10.694 23.786 16.591 32.34 4.861 9.592 2.592 8.879.973 2.722h1.685v-1.556l1.36-18.211 2.528-22.36 2.463-28.776.843-8.1 4.018-9.722 7.971-5.25 6.222 2.981 5.12 7.324-.713 4.73-3.046 19.768-5.962 30.98-3.889 20.739h2.268l2.593-2.593 10.499-13.934 17.628-22.036 7.778-8.749 9.073-9.657 5.833-4.601h11.018l8.1 12.055-3.628 12.443-11.342 14.388-9.398 12.184-13.48 18.147-8.426 14.518.778 1.166 2.01-.194 30.46-6.481 16.462-2.982 19.637-3.37 8.88 4.148.971 4.213-3.5 8.62-20.998 5.184-24.628 4.926-36.682 8.685-.454.324.519.648 16.526 1.555 7.065.389h17.304l32.21 2.398 8.426 5.574 5.055 6.805-.843 5.184-12.962 6.611-17.498-4.148-40.83-9.721-14-3.5h-1.944v1.167l11.666 11.406 21.387 19.314 26.767 24.887 1.36 6.157-3.434 4.86-3.63-.518-23.526-17.693-9.073-7.972-20.545-17.304h-1.36v1.814l4.73 6.935 25.017 37.59 1.296 11.536-1.814 3.76-6.481 2.268-7.13-1.297-14.647-20.544-15.1-23.138-12.185-20.739-1.49.843-7.194 77.448-3.37 3.953-7.778 2.981-6.48-4.925-3.436-7.972 3.435-15.749 4.148-20.544 3.37-16.333 3.046-20.285 1.815-6.74-.13-.454-1.49.194-15.295 20.999-23.267 31.433-18.406 19.702-4.407 1.75-7.648-3.954.713-7.064 4.277-6.286 25.47-32.405 15.36-20.092 9.917-11.6-.065-1.686h-.583L44.07 198.125l-12.055 1.555-5.185-4.86.648-7.972 2.463-2.593 20.35-13.999-.064.065Z"/></svg>
-            <div>
-              <div className="velu-copy-option-title">Open in Claude <span className="velu-external-arrow">↗</span></div>
-              <div className="velu-copy-option-desc">Ask questions about this page</div>
-            </div>
-          </a>
+          {options.map(renderOption)}
         </div>
       )}
     </div>