docs: root README rewrite + hero SVG + badge suite + IDE matrix + browser table

Complete rewrite of root README.md for GitHub + npm dual-audience. Add SVG hero with dark/light theme support, badge row (Marketplace, npm version/downloads, CI, license, status), and three reference tables: "Who should use what?" (extension vs npm vs daemon), browser support matrix (Chrome/Edge/Chromium/Brave/bundled with env hints), and IDE/MCP client wiring (15+ targets with config artifacts).

Expand Quick Start with

Author: A.R.

README.md

@@ -1,7 +1,7 @@
 {
   "name": "perplexity-vscode",
   "displayName": "Perplexity MCP",
-  "version": "0.8.32",
+  "version": "0.8.34",
   "publisher": "Automations-Project",
   "private": true,
   "description": "Native VS Code extension for the Perplexity MCP server with dashboard, auth, and multi-IDE config generation",

packages/extension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "perplexity-user-mcp",
-  "version": "0.8.32",
+  "version": "0.8.34",
   "type": "module",
   "description": "Perplexity AI MCP server — browser automation for search, reasoning, research, and compute",
   "author": "A.R.",

packages/mcp-server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perplexity-user-mcp/shared",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "type": "module",
   "main": "src/index.ts",
   "types": "src/index.ts",

packages/shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perplexity-user-mcp/webview",
-  "version": "0.1.18",
+  "version": "0.1.20",
   "private": true,
   "type": "module",
   "scripts": {

packages/webview/package.json

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import {
   ChevronDown,
   Download,
@@ -31,6 +32,7 @@ export function DownloadMenu({ item, send }: { item: HistoryItem; send: SendFn }
   const [menuPosition, setMenuPosition] = useState<React.CSSProperties>();
   const containerRef = useRef<HTMLDivElement>(null);
   const toggleRef = useRef<HTMLButtonElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
 
   const hasMarkdown = item.answerPreview.trim().length > 0;
   const toggleDisabled = !hasMarkdown && !item.threadSlug;
@@ -76,7 +78,7 @@ export function DownloadMenu({ item, send }: { item: HistoryItem; send: SendFn }
     };
   }, [open, updateMenuPosition]);
 
-  useDisclosureMenu({ triggerRef: toggleRef, menuRef: containerRef, isOpen: open, onClose: close });
+  useDisclosureMenu({ triggerRef: toggleRef, menuRef: containerRef, popoverRef, isOpen: open, onClose: close });
 
   const onToggleKey = (e: React.KeyboardEvent) => {
     if (e.key === "Enter" || e.key === " ") {
@@ -111,8 +113,8 @@ export function DownloadMenu({ item, send }: { item: HistoryItem; send: SendFn }
         Download
         <ChevronDown size={11} className="hist-action-caret" aria-hidden="true" />
       </button>
-      {open && (
-        <div className="hist-menu-popover hist-menu-popover-fixed" role="menu" style={menuPosition}>
+      {open && createPortal(
+        <div ref={popoverRef} className="hist-menu-popover hist-menu-popover-fixed" role="menu" style={menuPosition}>
           <div className="hist-menu-section-label">Export as</div>
           {FORMATS.map((format) => {
             const { disabled, reason } = formatIsDisabled(format);
@@ -141,7 +143,8 @@ export function DownloadMenu({ item, send }: { item: HistoryItem; send: SendFn }
             <kbd className="hist-menu-footer-kbd">Esc</kbd>
             <span>close</span>
           </div>
-        </div>
+        </div>,
+        document.body
       )}
     </div>
   );

packages/webview/src/components/DownloadMenu.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import {
   BookOpen,
   ChevronDown,
@@ -25,6 +26,7 @@ export function OpenWithMenu({
   const [menuPosition, setMenuPosition] = useState<React.CSSProperties>();
   const containerRef = useRef<HTMLDivElement>(null);
   const toggleRef = useRef<HTMLButtonElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
 
   const close = useCallback(() => setOpen(false), []);
   const updateMenuPosition = useCallback(() => {
@@ -68,7 +70,7 @@ export function OpenWithMenu({
     };
   }, [open, updateMenuPosition]);
 
-  useDisclosureMenu({ triggerRef: toggleRef, menuRef: containerRef, isOpen: open, onClose: close });
+  useDisclosureMenu({ triggerRef: toggleRef, menuRef: containerRef, popoverRef, isOpen: open, onClose: close });
 
   const onToggleKey = (e: React.KeyboardEvent) => {
     if (e.key === "Enter" || e.key === " ") {
@@ -95,8 +97,8 @@ export function OpenWithMenu({
         Open with
         <ChevronDown size={11} className="hist-action-caret" aria-hidden="true" />
       </button>
-      {open && (
-        <div className="hist-menu-popover hist-menu-popover-fixed" role="menu" style={menuPosition}>
+      {open && createPortal(
+        <div ref={popoverRef} className="hist-menu-popover hist-menu-popover-fixed" role="menu" style={menuPosition}>
           <div className="hist-menu-section-label">Built-in</div>
           <button
             className="hist-menu-item"
@@ -166,7 +168,8 @@ export function OpenWithMenu({
             <kbd className="hist-menu-footer-kbd">Esc</kbd>
             <span>close</span>
           </div>
-        </div>
+        </div>,
+        document.body
       )}
     </div>
   );

packages/webview/src/components/OpenWithMenu.tsx

@@ -7,6 +7,12 @@ export interface DisclosureMenuOptions {
   triggerRef: React.RefObject<HTMLElement | null>;
   /** Ref to the container that wraps both the trigger and the menu popover. */
   menuRef: React.RefObject<HTMLElement | null>;
+  /**
+   * Optional ref to a portaled popover element rendered outside `menuRef`.
+   * When provided, item querying and click-outside detection also consider
+   * this element so that React-portaled menus work correctly.
+   */
+  popoverRef?: React.RefObject<HTMLElement | null>;
   isOpen: boolean;
   onClose: () => void;
   /**
@@ -31,7 +37,7 @@ export interface DisclosureMenuOptions {
  * cleanup / close.
  */
 export function useDisclosureMenu(opts: DisclosureMenuOptions): void {
-  const { triggerRef, menuRef, isOpen, onClose, itemSelector = DEFAULT_ITEM_SELECTOR } = opts;
+  const { triggerRef, menuRef, popoverRef, isOpen, onClose, itemSelector = DEFAULT_ITEM_SELECTOR } = opts;
 
   // Keep a stable ref so callbacks inside the effect always see the latest onClose
   // without having to re-subscribe every render.
@@ -43,13 +49,14 @@ export function useDisclosureMenu(opts: DisclosureMenuOptions): void {
     if (!isOpen) return;
     // Defer one frame so the menu DOM is guaranteed to be in the tree.
     const frame = requestAnimationFrame(() => {
-      const items = menuRef.current?.querySelectorAll<HTMLElement>(
+      const root = popoverRef?.current ?? menuRef.current;
+      const items = root?.querySelectorAll<HTMLElement>(
         `${itemSelector}:not([disabled]):not(:disabled)`
       );
       items?.[0]?.focus();
     });
     return () => cancelAnimationFrame(frame);
-  }, [isOpen, menuRef, itemSelector]);
+  }, [isOpen, menuRef, popoverRef, itemSelector]);
 
   // Keyboard and click-outside handlers.
   useEffect(() => {
@@ -66,8 +73,9 @@ export function useDisclosureMenu(opts: DisclosureMenuOptions): void {
 
       if (e.key === "ArrowDown" || e.key === "ArrowUp") {
         e.preventDefault();
+        const root = popoverRef?.current ?? menuRef.current;
         const items = Array.from(
-          menuRef.current?.querySelectorAll<HTMLElement>(
+          root?.querySelectorAll<HTMLElement>(
             `${itemSelector}:not([disabled]):not(:disabled)`
           ) ?? []
         );
@@ -84,15 +92,16 @@ export function useDisclosureMenu(opts: DisclosureMenuOptions): void {
 
       if (e.key === "Enter") {
         const active = document.activeElement as HTMLElement | null;
-        if (active && menuRef.current?.contains(active)) {
+        if (active && (menuRef.current?.contains(active) || popoverRef?.current?.contains(active))) {
           e.preventDefault();
           active.click();
         }
       }
     };
 
     const onClick = (e: MouseEvent) => {
-      if (!menuRef.current?.contains(e.target as Node)) {
+      const target = e.target as Node;
+      if (!menuRef.current?.contains(target) && !popoverRef?.current?.contains(target)) {
         onCloseRef.current();
         // No focus restoration on outside-click — the user clicked somewhere
         // intentionally and that element may already hold focus.
@@ -105,5 +114,5 @@ export function useDisclosureMenu(opts: DisclosureMenuOptions): void {
       document.removeEventListener("keydown", onKey);
       document.removeEventListener("click", onClick);
     };
-  }, [isOpen, triggerRef, menuRef, itemSelector]);
+  }, [isOpen, triggerRef, menuRef, popoverRef, itemSelector]);
 }