@brainfish-ai/devdoc 0.1.41 → 0.1.43

package/renderer/components/docs-viewer/index.js

@@ -0,0 +1,1552 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useCallback, useRef } from 'react';
+import { Spinner } from '@phosphor-icons/react';
+import { DocsSidebar } from './sidebar';
+import { NotFoundPage } from './content/not-found-page';
+import { ApiPlayground } from './playground';
+import { RightSidebar } from './sidebar/right-sidebar';
+import { RequestDetails } from './content/request-details';
+import { DocPage } from './content/doc-page';
+import { ChangelogPage } from './content/changelog-page';
+import { GraphQLPlayground } from './playground/graphql-playground';
+import { makeBrainfishCollection } from '@/lib/api-docs/factories';
+import { parse, Kind } from 'graphql';
+import { GlobalAuthModal } from './global-auth-modal';
+import { AuthProvider } from '@/lib/api-docs/auth';
+import { PlaygroundProvider, usePlaygroundPrefill } from '@/lib/api-docs/playground/context';
+import { PlaygroundNavigationProvider, usePlaygroundNavigation } from '@/lib/api-docs/playground/navigation-context';
+import { NavigationProvider } from '@/lib/api-docs/navigation-context';
+import { ModeProvider, useModeContext } from '@/lib/api-docs/code-editor';
+import { NotesMode } from './code-editor';
+import { DocsHeader } from '@/components/docs-header';
+import { Notice } from '../docs/notice';
+import { DocsNavigationProvider } from '@/lib/docs-navigation-context';
+import { Button } from '@/components/ui/button';
+import { Code, TestTube, Book } from '@phosphor-icons/react';
+import { cn } from '@/lib/utils';
+import { SearchDialog, useSearch } from './search';
+import { useTheme } from 'next-themes';
+// Helper to convert GraphQL TypeNode to string
+function typeNodeToString(typeNode) {
+    switch(typeNode.kind){
+        case Kind.NAMED_TYPE:
+            return typeNode.name.value;
+        case Kind.NON_NULL_TYPE:
+            return `${typeNodeToString(typeNode.type)}!`;
+        case Kind.LIST_TYPE:
+            return `[${typeNodeToString(typeNode.type)}]`;
+        default:
+            return 'Unknown';
+    }
+}
+// Parse GraphQL schema using the graphql library
+function parseGraphQLSchema(schemaSDL) {
+    const operations = [];
+    try {
+        const ast = parse(schemaSDL);
+        // Find Query, Mutation, Subscription type definitions
+        for (const def of ast.definitions){
+            if (def.kind === Kind.OBJECT_TYPE_DEFINITION) {
+                const typeName = def.name.value;
+                // Only process root operation types
+                if (![
+                    'Query',
+                    'Mutation',
+                    'Subscription'
+                ].includes(typeName)) continue;
+                const operationType = typeName.toLowerCase();
+                // Process each field
+                for (const field of def.fields || []){
+                    const name = field.name.value;
+                    // Skip internal fields
+                    if (name.startsWith('_')) continue;
+                    // Get description
+                    const description = field.description?.value || null;
+                    // Get return type
+                    const returnType = typeNodeToString(field.type);
+                    // Build args string for query generation
+                    const args = (field.arguments || []).map((arg)=>`${arg.name.value}: ${typeNodeToString(arg.type)}`).join(', ');
+                    const query = generateGraphQLQuery(operationType, name, field.arguments || [], returnType);
+                    const exampleVariables = generateGraphQLVariables(field.arguments || []);
+                    operations.push({
+                        id: `${operationType}-${name}`,
+                        name,
+                        description,
+                        operationType,
+                        query,
+                        exampleVariables
+                    });
+                }
+            }
+        }
+    } catch (err) {
+        console.error('[GraphQL Parser] Failed to parse schema:', err);
+    }
+    return operations;
+}
+// Generate example GraphQL query from AST
+function generateGraphQLQuery(operationType, name, args, returnType) {
+    let query = `${operationType} ${name.charAt(0).toUpperCase() + name.slice(1)}`;
+    if (args.length > 0) {
+        const varDefs = args.map((arg)=>`$${arg.name.value}: ${typeNodeToString(arg.type)}`).join(', ');
+        query += `(${varDefs})`;
+    }
+    query += ` {\n  ${name}`;
+    if (args.length > 0) {
+        const argPairs = args.map((arg)=>`${arg.name.value}: $${arg.name.value}`).join(', ');
+        query += `(${argPairs})`;
+    }
+    const baseType = returnType.replace(/[\[\]!]/g, '').trim();
+    if ([
+        'String',
+        'Int',
+        'Float',
+        'Boolean',
+        'ID'
+    ].includes(baseType)) {
+        query += '\n}';
+    } else {
+        query += ` {\n    id\n    __typename\n  }\n}`;
+    }
+    return query;
+}
+// Generate example variables from AST args
+function generateGraphQLVariables(args) {
+    const variables = {};
+    for (const arg of args){
+        const name = arg.name.value;
+        const type = typeNodeToString(arg.type).replace(/[\[\]!]/g, '').trim();
+        switch(type){
+            case 'String':
+                variables[name] = 'example';
+                break;
+            case 'Int':
+                variables[name] = 1;
+                break;
+            case 'Float':
+                variables[name] = 1.0;
+                break;
+            case 'Boolean':
+                variables[name] = true;
+                break;
+            case 'ID':
+                variables[name] = '1';
+                break;
+            default:
+                variables[name] = {};
+        }
+    }
+    return variables;
+}
+// Convert GraphQL operations to BrainfishCollection for sidebar
+function convertGraphQLToCollection(operations, endpoint) {
+    const queries = operations.filter((op)=>op.operationType === 'query');
+    const mutations = operations.filter((op)=>op.operationType === 'mutation');
+    const subscriptions = operations.filter((op)=>op.operationType === 'subscription');
+    const toRequest = (op)=>({
+            id: op.id,
+            name: op.name,
+            description: op.description || '',
+            method: 'POST',
+            endpoint,
+            params: [],
+            headers: [],
+            auth: {
+                authType: 'none',
+                authActive: false
+            },
+            body: {
+                contentType: 'application/json',
+                body: JSON.stringify({
+                    query: op.query,
+                    variables: op.exampleVariables
+                }, null, 2)
+            },
+            requestVariables: [],
+            responses: {},
+            tags: [
+                op.operationType
+            ]
+        });
+    const folders = [];
+    if (queries.length > 0) {
+        folders.push(makeBrainfishCollection({
+            name: 'Queries',
+            description: 'GraphQL Query operations',
+            requests: queries.map(toRequest),
+            folders: [],
+            variables: [],
+            auth: {
+                authType: 'none',
+                authActive: false
+            },
+            headers: []
+        }));
+    }
+    if (mutations.length > 0) {
+        folders.push(makeBrainfishCollection({
+            name: 'Mutations',
+            description: 'GraphQL Mutation operations',
+            requests: mutations.map(toRequest),
+            folders: [],
+            variables: [],
+            auth: {
+                authType: 'none',
+                authActive: false
+            },
+            headers: []
+        }));
+    }
+    if (subscriptions.length > 0) {
+        folders.push(makeBrainfishCollection({
+            name: 'Subscriptions',
+            description: 'GraphQL Subscription operations',
+            requests: subscriptions.map(toRequest),
+            folders: [],
+            variables: [],
+            auth: {
+                authType: 'none',
+                authActive: false
+            },
+            headers: []
+        }));
+    }
+    return makeBrainfishCollection({
+        name: 'GraphQL API',
+        description: 'GraphQL operations',
+        folders,
+        requests: [],
+        variables: [],
+        auth: {
+            authType: 'none',
+            authActive: false
+        },
+        headers: []
+    });
+}
+// Helper to find request by ID in collection
+function findRequestById(collection, id) {
+    // Check direct requests
+    const found = collection.requests.find((r)=>r.id === id);
+    if (found) return found;
+    // Check folders recursively
+    for (const folder of collection.folders){
+        const request = findRequestById(folder, id);
+        if (request) return request;
+    }
+    return null;
+}
+// Helper to get the first endpoint from collection
+function getFirstEndpoint(collection) {
+    // Check direct requests first
+    if (collection.requests.length > 0) {
+        return collection.requests[0];
+    }
+    // Check folders recursively
+    for (const folder of collection.folders){
+        const firstInFolder = getFirstEndpoint(folder);
+        if (firstInFolder) return firstInFolder;
+    }
+    return null;
+}
+// Helper to check if a doc group belongs to a specific tab
+// Group IDs are formatted as: group-{tab-id}-{group-name}
+function isGroupForTab(groupId, tabId) {
+    // Check if the group ID starts with "group-{tabId}-"
+    const prefix = `group-${tabId}-`;
+    return groupId.startsWith(prefix);
+}
+// Helper to check if a tab has doc groups (MDX pages)
+function hasDocGroupsForTab(docGroups, tabId) {
+    if (!docGroups || docGroups.length === 0) return false;
+    // Check if any doc group belongs to this tab and has pages
+    return docGroups.some((g)=>isGroupForTab(g.id, tabId) && g.pages.length > 0);
+}
+// Helper to get the first page from doc groups for a tab
+function getFirstDocPageForTab(docGroups, tabId) {
+    if (!docGroups || docGroups.length === 0) return null;
+    const tabDocGroup = docGroups.find((g)=>isGroupForTab(g.id, tabId) && g.pages.length > 0);
+    return tabDocGroup?.pages[0]?.slug || null;
+}
+function DocsContent() {
+    const [collection, setCollection] = useState(null);
+    const [selectedRequest, setSelectedRequest] = useState(null);
+    const [selectedDocSection, setSelectedDocSection] = useState(null);
+    const [selectedDocPage, setSelectedDocPage] = useState(null);
+    const [activeTab, setActiveTab] = useState('api-reference');
+    const [selectedApiVersion, setSelectedApiVersion] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [isVersionLoading, setIsVersionLoading] = useState(false) // For version switch only
+    ;
+    const [error, setError] = useState(null);
+    const [showAuthModal, setShowAuthModal] = useState(false);
+    const [notFoundSlug, setNotFoundSlug] = useState(null) // Track 404 for invalid URLs
+    ;
+    // Prefill context for agent
+    const { setPrefill } = usePlaygroundPrefill();
+    // Playground navigation context for tab navigation
+    const { navigateAndHighlight, resetNavigation } = usePlaygroundNavigation();
+    // Mode context for switching modes
+    const { switchToDocs } = useModeContext();
+    // Ref for the scrollable content area
+    const contentRef = useRef(null);
+    // Update URL hash without triggering navigation
+    // Format: #tab or #tab/type/id (e.g., #api-reference, #api-reference/endpoint/123, #guides/page/quickstart)
+    const updateUrlHash = useCallback((hash, tab)=>{
+        const currentTab = tab || activeTab;
+        let newUrl;
+        if (!hash) {
+            // Just the tab
+            newUrl = `#${currentTab}`;
+        } else {
+            // Tab + path
+            newUrl = `#${currentTab}/${hash}`;
+        }
+        window.history.pushState(null, '', newUrl);
+    }, [
+        activeTab
+    ]);
+    // Navigate to hash - used for initial load and popstate
+    // Parse hash format: #tab or #tab/type/id
+    const parseHash = useCallback((hash)=>{
+        if (!hash) return {
+            tab: null,
+            type: null,
+            id: null
+        };
+        const parts = hash.split('/');
+        const tab = parts[0] || null;
+        const type = parts[1] || null;
+        const id = parts.slice(2).join('/') || null // Rejoin in case id has slashes
+        ;
+        return {
+            tab,
+            type,
+            id
+        };
+    }, []);
+    const navigateToHash = useCallback((collectionData)=>{
+        const hash = window.location.hash.slice(1) // Remove #
+        ;
+        if (!hash) {
+            // No hash - auto-select first endpoint
+            setSelectedDocSection(null);
+            setSelectedDocPage(null);
+            const firstEndpoint = getFirstEndpoint(collectionData);
+            if (firstEndpoint) {
+                setSelectedRequest(firstEndpoint);
+            } else {
+                setSelectedRequest(null);
+            }
+            return;
+        }
+        // Notes mode is handled by ModeContext, just clear API selection
+        if (hash === 'notes' || hash.startsWith('notes/')) {
+            setSelectedRequest(null);
+            setSelectedDocSection(null);
+            setSelectedDocPage(null);
+            return;
+        }
+        // Parse new format: #tab/type/id
+        const { tab, type, id } = parseHash(hash);
+        // Set the active tab if specified
+        if (tab) {
+            setActiveTab(tab);
+        }
+        // Handle legacy format (endpoint/xxx, page/xxx, doc/xxx without tab prefix)
+        const legacyType = hash.startsWith('endpoint/') ? 'endpoint' : hash.startsWith('page/') ? 'page' : hash.startsWith('doc/') ? 'doc' : null;
+        const actualType = type || legacyType;
+        const actualId = id || (legacyType ? hash.replace(`${legacyType}/`, '') : null);
+        if (actualType === 'endpoint' && actualId) {
+            const request = findRequestById(collectionData, actualId);
+            if (request) {
+                setSelectedRequest(request);
+                setSelectedDocSection(null);
+                setSelectedDocPage(null);
+                setNotFoundSlug(null);
+            } else {
+                // Endpoint not found - show 404 page
+                setSelectedRequest(null);
+                setSelectedDocSection(null);
+                setSelectedDocPage(null);
+                setNotFoundSlug(`endpoint/${actualId}`);
+            }
+        } else if (actualType === 'page' && actualId) {
+            setNotFoundSlug(null); // Clear not found state - DocPage handles its own 404
+            setSelectedDocPage(actualId);
+            setSelectedRequest(null);
+            setSelectedDocSection(null);
+        } else if (actualType === 'doc' && actualId) {
+            setSelectedDocSection(actualId);
+            setSelectedRequest(null);
+            setSelectedDocPage(null);
+            // Scroll to section after DOM update
+            setTimeout(()=>{
+                const element = document.getElementById(actualId);
+                if (element) {
+                    element.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'start'
+                    });
+                }
+            }, 100);
+        } else if (tab && !type) {
+            // Just a tab, no specific content - show default for that tab
+            setSelectedRequest(null);
+            setSelectedDocSection(null);
+            setSelectedDocPage(null);
+        }
+    }, [
+        parseHash
+    ]);
+    const handleSelectRequest = useCallback((request)=>{
+        setSelectedRequest(request);
+        setSelectedDocSection(null);
+        setSelectedDocPage(null);
+        setNotFoundSlug(null); // Clear 404 state when selecting an endpoint
+        updateUrlHash(`endpoint/${request.id}`);
+        // Reset tab navigation so the new endpoint can determine its default tab
+        resetNavigation();
+        // Switch to Docs mode to show endpoint documentation first
+        switchToDocs();
+    }, [
+        updateUrlHash,
+        resetNavigation,
+        switchToDocs
+    ]);
+    const handleSelectDocumentation = useCallback((headingId)=>{
+        const isIntro = headingId === 'introduction';
+        setSelectedDocSection(isIntro ? null : headingId);
+        setSelectedRequest(null);
+        setSelectedDocPage(null);
+        setNotFoundSlug(null); // Clear 404 state
+        updateUrlHash(isIntro ? '' : `doc/${headingId}`);
+        // Switch to Docs mode when selecting documentation
+        switchToDocs();
+        setTimeout(()=>{
+            if (isIntro) {
+                contentRef.current?.scrollTo({
+                    top: 0,
+                    behavior: 'smooth'
+                });
+            } else {
+                const element = document.getElementById(headingId);
+                if (element) {
+                    element.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'start'
+                    });
+                }
+            }
+        }, 50);
+    }, [
+        updateUrlHash,
+        switchToDocs
+    ]);
+    const handleSelectDocPage = useCallback((slug)=>{
+        // Find which tab this doc page belongs to
+        let targetTab = activeTab;
+        let releaseSlug = null;
+        let sectionId = null;
+        // Parse section from slug (e.g., "essentials/markdown#headings" -> slug: "essentials/markdown", section: "headings")
+        let pageSlug = slug;
+        if (slug.includes('#')) {
+            const [pagePart, sectionPart] = slug.split('#');
+            pageSlug = pagePart;
+            sectionId = sectionPart;
+        }
+        // Special handling for changelog pages
+        if (pageSlug.startsWith('changelog/') || pageSlug === 'changelog') {
+            // Find the changelog tab
+            const changelogTab = collection?.navigationTabs?.find((t)=>t.type === 'changelog');
+            if (changelogTab) {
+                targetTab = changelogTab.id;
+            }
+            // Extract the release slug for scrolling (e.g., "changelog/v1.2.0" -> "v1.2.0")
+            if (pageSlug.startsWith('changelog/')) {
+                releaseSlug = pageSlug.replace('changelog/', '');
+            }
+        } else if (collection?.docGroups) {
+            for (const group of collection.docGroups){
+                const hasPage = (pages)=>{
+                    for (const page of pages){
+                        if (page.slug === pageSlug) return true;
+                        if (page.children && hasPage(page.children)) return true;
+                    }
+                    return false;
+                };
+                if (hasPage(group.pages)) {
+                    // Extract tab from group ID (e.g., "group-guides-getting-started" -> "guides")
+                    const tabPart = group.id.replace('group-', '').split('-')[0];
+                    // Find the actual tab ID that matches
+                    const matchingTab = collection.navigationTabs?.find((t)=>t.id === tabPart || t.id.startsWith(tabPart));
+                    if (matchingTab) {
+                        targetTab = matchingTab.id;
+                    }
+                    break;
+                }
+            }
+        }
+        // Switch to the correct tab
+        setActiveTab(targetTab);
+        setSelectedDocPage(pageSlug);
+        setSelectedRequest(null);
+        setSelectedDocSection(null);
+        setNotFoundSlug(null); // Clear 404 state
+        updateUrlHash(`page/${pageSlug}`, targetTab);
+        switchToDocs();
+        // Scroll to specific release if navigating to a changelog entry
+        if (releaseSlug) {
+            // Wait for the changelog page to render, then scroll to the release
+            setTimeout(()=>{
+                const releaseElement = document.getElementById(`release-${releaseSlug}`);
+                if (releaseElement) {
+                    releaseElement.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'start'
+                    });
+                }
+            }, 600);
+        } else if (sectionId) {
+            // Scroll to section within the page after it renders
+            setTimeout(()=>{
+                const sectionElement = document.getElementById(sectionId);
+                if (sectionElement) {
+                    sectionElement.scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'start'
+                    });
+                }
+            }, 300);
+        } else {
+            // Scroll to top of content when navigating to a new page
+            setTimeout(()=>{
+                contentRef.current?.scrollTo({
+                    top: 0,
+                    behavior: 'smooth'
+                });
+            }, 50);
+        }
+    }, [
+        updateUrlHash,
+        switchToDocs,
+        collection,
+        activeTab
+    ]);
+    // Handle API version change
+    const handleApiVersionChange = useCallback((version)=>{
+        if (version !== selectedApiVersion) {
+            setSelectedApiVersion(version);
+            // Clear selected request when switching versions as endpoints may differ
+            setSelectedRequest(null);
+            setSelectedDocSection(null);
+        }
+    }, [
+        selectedApiVersion
+    ]);
+    // Handle tab change from header
+    const handleTabChange = useCallback((tabId)=>{
+        setActiveTab(tabId);
+        // Reset mode to docs when switching tabs (exit sandbox/api-client mode)
+        switchToDocs();
+        // Find the tab config to check its type
+        const tabConfig = collection?.navigationTabs?.find((t)=>t.id === tabId);
+        const isApiTab = tabConfig?.type === 'openapi' || tabConfig?.type === 'graphql' || tabId === 'api-reference';
+        if (tabId === 'changelog') {
+            // Switch to Changelog tab
+            setSelectedDocPage(null);
+            setSelectedRequest(null);
+            setSelectedDocSection(null);
+            updateUrlHash('', tabId);
+        } else if (isApiTab) {
+            // API Reference or GraphQL tab
+            setSelectedDocSection(null);
+            // Check if there are doc groups for this tab (MDX pages)
+            const hasGroups = hasDocGroupsForTab(collection?.docGroups, tabId);
+            if (hasGroups) {
+                // Has doc groups - select the first page from groups
+                const firstPage = getFirstDocPageForTab(collection?.docGroups, tabId);
+                if (firstPage) {
+                    setSelectedDocPage(firstPage);
+                    setSelectedRequest(null);
+                    updateUrlHash(`page/${firstPage}`, tabId);
+                    switchToDocs();
+                } else {
+                    // No pages in groups - auto-select first endpoint
+                    setSelectedDocPage(null);
+                    const firstEndpoint = collection ? getFirstEndpoint(collection) : null;
+                    if (firstEndpoint) {
+                        setSelectedRequest(firstEndpoint);
+                        updateUrlHash(`endpoint/${firstEndpoint.id}`, tabId);
+                    } else {
+                        setSelectedRequest(null);
+                        updateUrlHash('', tabId);
+                    }
+                }
+            } else {
+                // No doc groups - auto-select first endpoint
+                setSelectedDocPage(null);
+                const firstEndpoint = collection ? getFirstEndpoint(collection) : null;
+                if (firstEndpoint) {
+                    setSelectedRequest(firstEndpoint);
+                    updateUrlHash(`endpoint/${firstEndpoint.id}`, tabId);
+                } else {
+                    setSelectedRequest(null);
+                    updateUrlHash('', tabId);
+                }
+            }
+        } else {
+            // Switch to a doc group tab - find and select the first page in that tab
+            setSelectedRequest(null);
+            setSelectedDocSection(null);
+            // Find the first doc group for this tab and select its first page
+            if (collection?.docGroups) {
+                const tabDocGroup = collection.docGroups.find((g)=>isGroupForTab(g.id, tabId));
+                if (tabDocGroup && tabDocGroup.pages.length > 0) {
+                    const firstPage = tabDocGroup.pages[0];
+                    setSelectedDocPage(firstPage.slug);
+                    updateUrlHash(`page/${firstPage.slug}`, tabId);
+                    switchToDocs();
+                } else {
+                    setSelectedDocPage(null);
+                    updateUrlHash('', tabId);
+                }
+            }
+        }
+    }, [
+        collection,
+        updateUrlHash,
+        switchToDocs
+    ]);
+    // Handler for agent navigation
+    const handleAgentNavigate = useCallback((endpointId)=>{
+        if (!collection) return;
+        const request = findRequestById(collection, endpointId);
+        if (request) {
+            // Set the tab to API Reference first
+            setActiveTab('api-reference');
+            // Then set the selected request
+            setSelectedRequest(request);
+            setSelectedDocSection(null);
+            setSelectedDocPage(null);
+            updateUrlHash(`endpoint/${endpointId}`, 'api-reference');
+            // Reset tab navigation so the new endpoint can determine its default tab
+            resetNavigation();
+        }
+    }, [
+        collection,
+        updateUrlHash,
+        resetNavigation
+    ]);
+    // Handler for agent prefilling parameters
+    const handleAgentPrefill = useCallback((data)=>{
+        console.log('[Agent] Prefill requested:', data);
+        setPrefill(data);
+    }, [
+        setPrefill
+    ]);
+    // State for debug context - used to trigger agent debugging
+    const [debugContext, setDebugContext] = useState(null);
+    // Handler for debug requests from playground
+    const handleDebugRequest = useCallback((context)=>{
+        setDebugContext(context);
+    }, []);
+    // Clear debug context after it's been used
+    const clearDebugContext = useCallback(()=>{
+        setDebugContext(null);
+    }, []);
+    // State for explain context - used to trigger agent explanation
+    const [explainContext, setExplainContext] = useState(null);
+    // Handler for explain requests from playground
+    const handleExplainRequest = useCallback((context)=>{
+        setExplainContext(context);
+    }, []);
+    // Clear explain context after it's been used
+    const clearExplainContext = useCallback(()=>{
+        setExplainContext(null);
+    }, []);
+    // Handle browser back/forward
+    useEffect(()=>{
+        if (!collection) return;
+        const handlePopState = ()=>{
+            navigateToHash(collection);
+        };
+        window.addEventListener('popstate', handlePopState);
+        return ()=>window.removeEventListener('popstate', handlePopState);
+    }, [
+        collection,
+        navigateToHash
+    ]);
+    // Dynamically set favicon from docs.json config
+    useEffect(()=>{
+        if (!collection?.docsFavicon) return;
+        const faviconPath = collection.docsFavicon;
+        // Update or create link elements for favicon
+        const updateFaviconLink = (rel, href)=>{
+            let link = document.querySelector(`link[rel="${rel}"]`);
+            if (!link) {
+                link = document.createElement('link');
+                link.rel = rel;
+                document.head.appendChild(link);
+            }
+            link.href = href;
+        };
+        // Determine the type based on file extension
+        const ext = faviconPath.split('.').pop()?.toLowerCase();
+        const type = ext === 'svg' ? 'image/svg+xml' : ext === 'png' ? 'image/png' : ext === 'ico' ? 'image/x-icon' : 'image/png';
+        // Update the favicon link with type
+        let iconLink = document.querySelector('link[rel="icon"]');
+        if (!iconLink) {
+            iconLink = document.createElement('link');
+            iconLink.rel = 'icon';
+            document.head.appendChild(iconLink);
+        }
+        iconLink.type = type;
+        iconLink.href = faviconPath;
+        // Also update shortcut icon and apple-touch-icon
+        updateFaviconLink('shortcut icon', faviconPath);
+        updateFaviconLink('apple-touch-icon', faviconPath);
+    }, [
+        collection?.docsFavicon
+    ]);
+    useEffect(()=>{
+        async function fetchCollection() {
+            try {
+                // Only show full loading on initial load
+                const isInitialLoad = !collection;
+                if (isInitialLoad) {
+                    setLoading(true);
+                } else {
+                    setIsVersionLoading(true);
+                }
+                setError(null);
+                // Build URL with version param if selected
+                const url = selectedApiVersion ? `/api/collections?version=${encodeURIComponent(selectedApiVersion)}` : '/api/collections';
+                const response = await fetch(url);
+                if (!response.ok) {
+                    throw new Error(`Failed to fetch collection: ${response.status}`);
+                }
+                const data = await response.json();
+                setCollection(data);
+                // Set initial API version if not already set
+                if (!selectedApiVersion && data?.selectedApiVersion) {
+                    setSelectedApiVersion(data.selectedApiVersion);
+                }
+                // Only run initial navigation logic on first load, not on version changes
+                if (isInitialLoad) {
+                    // Set initial active tab from config (first tab) and select first item
+                    let initialTabId = 'api-reference';
+                    if (data?.navigationTabs && data.navigationTabs.length > 0) {
+                        const sortedTabs = [
+                            ...data.navigationTabs
+                        ].sort((a, b)=>a.order - b.order);
+                        initialTabId = sortedTabs[0].id;
+                        setActiveTab(initialTabId);
+                    }
+                    // Handle initial hash navigation after collection loads
+                    if (data) {
+                        // Use setTimeout to ensure state is set before navigation
+                        setTimeout(()=>{
+                            const hash = window.location.hash.slice(1);
+                            if (!hash) {
+                                // No hash - set URL to initial tab
+                                setSelectedDocSection(null);
+                                // Find the tab config to check its type
+                                const tabConfig = data.navigationTabs?.find((t)=>t.id === initialTabId);
+                                const isApiTab = tabConfig?.type === 'openapi' || tabConfig?.type === 'graphql' || initialTabId === 'api-reference';
+                                if (isApiTab) {
+                                    // API Reference or GraphQL tab
+                                    setSelectedDocSection(null);
+                                    // Check if there are doc groups for this tab (MDX pages)
+                                    const hasGroups = hasDocGroupsForTab(data.docGroups, initialTabId);
+                                    if (hasGroups) {
+                                        // Has doc groups - select the first page from groups
+                                        const firstPage = getFirstDocPageForTab(data.docGroups, initialTabId);
+                                        if (firstPage) {
+                                            setSelectedDocPage(firstPage);
+                                            setSelectedRequest(null);
+                                            updateUrlHash(`page/${firstPage}`, initialTabId);
+                                        } else {
+                                            // No pages in groups - auto-select first endpoint
+                                            setSelectedDocPage(null);
+                                            const firstEndpoint = getFirstEndpoint(data);
+                                            if (firstEndpoint) {
+                                                setSelectedRequest(firstEndpoint);
+                                                updateUrlHash(`endpoint/${firstEndpoint.id}`, initialTabId);
+                                            } else {
+                                                setSelectedRequest(null);
+                                                updateUrlHash('', initialTabId);
+                                            }
+                                        }
+                                    } else {
+                                        // No doc groups - auto-select first endpoint
+                                        setSelectedDocPage(null);
+                                        const firstEndpoint = getFirstEndpoint(data);
+                                        if (firstEndpoint) {
+                                            setSelectedRequest(firstEndpoint);
+                                            updateUrlHash(`endpoint/${firstEndpoint.id}`, initialTabId);
+                                        } else {
+                                            setSelectedRequest(null);
+                                            updateUrlHash('', initialTabId);
+                                        }
+                                    }
+                                    switchToDocs();
+                                } else {
+                                    // Doc group tab - select first page
+                                    setSelectedRequest(null);
+                                    const tabDocGroup = data.docGroups?.find((g)=>isGroupForTab(g.id, initialTabId));
+                                    if (tabDocGroup && tabDocGroup.pages.length > 0) {
+                                        const firstPage = tabDocGroup.pages[0];
+                                        setSelectedDocPage(firstPage.slug);
+                                        updateUrlHash(`page/${firstPage.slug}`, initialTabId);
+                                        switchToDocs();
+                                    } else {
+                                        setSelectedDocPage(null);
+                                        updateUrlHash('', initialTabId);
+                                        switchToDocs();
+                                    }
+                                }
+                            } else if (hash === 'notes' || hash.startsWith('notes/')) {
+                                // Notes mode - handled by ModeContext, just clear API selection
+                                setSelectedRequest(null);
+                                setSelectedDocSection(null);
+                            } else {
+                                // Parse the hash to get tab and content info
+                                // Format: #tab or #tab/type/id (e.g., #api-reference/endpoint/123)
+                                const parts = hash.split('/');
+                                const hashTab = parts[0];
+                                const hashType = parts[1];
+                                const hashId = parts.slice(2).join('/');
+                                // Set the tab from the hash
+                                if (hashTab && data.navigationTabs?.some((t)=>t.id === hashTab)) {
+                                    setActiveTab(hashTab);
+                                }
+                                // Handle legacy format (endpoint/xxx without tab prefix)
+                                const isLegacyFormat = hash.startsWith('endpoint/') || hash.startsWith('page/') || hash.startsWith('doc/');
+                                const actualType = isLegacyFormat ? parts[0] : hashType;
+                                const actualId = isLegacyFormat ? parts.slice(1).join('/') : hashId;
+                                if (actualType === 'endpoint' && actualId) {
+                                    const request = findRequestById(data, actualId);
+                                    if (request) {
+                                        setSelectedRequest(request);
+                                        setSelectedDocSection(null);
+                                        setSelectedDocPage(null);
+                                        switchToDocs();
+                                        return;
+                                    } else {
+                                        setSelectedRequest(null);
+                                        setSelectedDocSection(null);
+                                        setSelectedDocPage(null);
+                                        switchToDocs();
+                                    }
+                                } else if (actualType === 'page' && actualId) {
+                                    setSelectedDocPage(actualId);
+                                    setSelectedRequest(null);
+                                    setSelectedDocSection(null);
+                                    switchToDocs();
+                                } else if (actualType === 'doc' && actualId) {
+                                    setSelectedDocSection(actualId);
+                                    setSelectedRequest(null);
+                                    setSelectedDocPage(null);
+                                    switchToDocs();
+                                    setTimeout(()=>{
+                                        const element = document.getElementById(actualId);
+                                        if (element) {
+                                            element.scrollIntoView({
+                                                behavior: 'smooth',
+                                                block: 'start'
+                                            });
+                                        }
+                                    }, 100);
+                                } else if (hashTab && !hashType) {
+                                    // Just a tab, show its default content
+                                    setSelectedDocSection(null);
+                                    // Check if this is an API tab
+                                    const tabConfig = data.navigationTabs?.find((t)=>t.id === hashTab);
+                                    const isApiTab = tabConfig?.type === 'openapi' || tabConfig?.type === 'graphql' || hashTab === 'api-reference';
+                                    if (isApiTab) {
+                                        // Check if there are doc groups for this tab (MDX pages)
+                                        const hasGroups = hasDocGroupsForTab(data.docGroups, hashTab);
+                                        if (hasGroups) {
+                                            // Has doc groups - select the first page from groups
+                                            const firstPage = getFirstDocPageForTab(data.docGroups, hashTab);
+                                            if (firstPage) {
+                                                setSelectedDocPage(firstPage);
+                                                setSelectedRequest(null);
+                                                updateUrlHash(`page/${firstPage}`, hashTab);
+                                            } else {
+                                                // No pages in groups - auto-select first endpoint
+                                                setSelectedDocPage(null);
+                                                const firstEndpoint = getFirstEndpoint(data);
+                                                if (firstEndpoint) {
+                                                    setSelectedRequest(firstEndpoint);
+                                                    updateUrlHash(`endpoint/${firstEndpoint.id}`, hashTab);
+                                                } else {
+                                                    setSelectedRequest(null);
+                                                }
+                                            }
+                                        } else {
+                                            // No doc groups - auto-select first endpoint
+                                            setSelectedDocPage(null);
+                                            const firstEndpoint = getFirstEndpoint(data);
+                                            if (firstEndpoint) {
+                                                setSelectedRequest(firstEndpoint);
+                                                updateUrlHash(`endpoint/${firstEndpoint.id}`, hashTab);
+                                            } else {
+                                                setSelectedRequest(null);
+                                            }
+                                        }
+                                    } else {
+                                        setSelectedDocPage(null);
+                                        setSelectedRequest(null);
+                                    }
+                                    switchToDocs();
+                                }
+                            }
+                        }, 0);
+                    }
+                } else {
+                    // Version change - clear selected endpoint as it may not exist in the new version
+                    setSelectedRequest(null);
+                    setSelectedDocSection(null);
+                }
+            } catch (err) {
+                console.error('Error fetching collection:', err);
+                setError(err instanceof Error ? err.message : 'Failed to load API documentation');
+            } finally{
+                setLoading(false);
+                setIsVersionLoading(false);
+            }
+        }
+        fetchCollection();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        switchToDocs,
+        selectedApiVersion
+    ]);
+    // Only show full-page loading on initial load
+    if (loading && !collection) {
+        return /*#__PURE__*/ _jsx("div", {
+            className: "flex items-center justify-center h-screen",
+            children: /*#__PURE__*/ _jsxs("div", {
+                className: "text-center",
+                children: [
+                    /*#__PURE__*/ _jsx(Spinner, {
+                        size: 32,
+                        className: "text-muted-foreground animate-spin mx-auto mb-3"
+                    }),
+                    /*#__PURE__*/ _jsx("p", {
+                        className: "text-sm text-muted-foreground",
+                        children: "Loading API documentation..."
+                    })
+                ]
+            })
+        });
+    }
+    if (error) {
+        return /*#__PURE__*/ _jsx("div", {
+            className: "flex items-center justify-center h-screen",
+            children: /*#__PURE__*/ _jsxs("div", {
+                className: "text-center",
+                children: [
+                    /*#__PURE__*/ _jsx("p", {
+                        className: "text-destructive text-lg mb-2",
+                        children: "Error loading documentation"
+                    }),
+                    /*#__PURE__*/ _jsx("p", {
+                        className: "text-muted-foreground",
+                        children: error
+                    })
+                ]
+            })
+        });
+    }
+    if (!collection) {
+        return /*#__PURE__*/ _jsx("div", {
+            className: "flex items-center justify-center h-screen",
+            children: /*#__PURE__*/ _jsxs("div", {
+                className: "text-center max-w-md",
+                children: [
+                    /*#__PURE__*/ _jsx("p", {
+                        className: "text-muted-foreground mb-2",
+                        children: "No API documentation available"
+                    }),
+                    /*#__PURE__*/ _jsx("p", {
+                        className: "text-sm text-muted-foreground",
+                        children: "Please configure your Brainfish API credentials in your environment variables."
+                    })
+                ]
+            })
+        });
+    }
+    // Only show "configure credentials" if there are no endpoints AND no doc groups
+    // Multi-tenant docs may have only doc groups without API endpoints
+    const hasDocGroups = collection.docGroups && collection.docGroups.length > 0;
+    const hasEndpoints = collection.requests.length > 0 || collection.folders.length > 0;
+    if (!hasEndpoints && !hasDocGroups) {
+        return /*#__PURE__*/ _jsx("div", {
+            className: "flex items-center justify-center h-screen",
+            children: /*#__PURE__*/ _jsxs("div", {
+                className: "text-center max-w-lg p-8",
+                children: [
+                    /*#__PURE__*/ _jsx("h2", {
+                        className: "text-2xl font-semibold mb-2",
+                        children: collection.name || 'Documentation'
+                    }),
+                    /*#__PURE__*/ _jsx("p", {
+                        className: "text-muted-foreground mb-6",
+                        children: collection.description || 'No documentation content available yet.'
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "bg-muted/50 rounded-lg p-5 text-left text-sm space-y-4",
+                        children: [
+                            /*#__PURE__*/ _jsx("p", {
+                                className: "font-medium",
+                                children: "Get started with DevDoc:"
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "space-y-3",
+                                children: [
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        children: [
+                                            /*#__PURE__*/ _jsx("p", {
+                                                className: "text-muted-foreground text-xs mb-1",
+                                                children: "Create a new project"
+                                            }),
+                                            /*#__PURE__*/ _jsx("code", {
+                                                className: "block bg-background px-3 py-2 rounded-md font-mono text-xs",
+                                                children: "npx create-devdoc-doc my-docs"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        children: [
+                                            /*#__PURE__*/ _jsx("p", {
+                                                className: "text-muted-foreground text-xs mb-1",
+                                                children: "Start local development"
+                                            }),
+                                            /*#__PURE__*/ _jsx("code", {
+                                                className: "block bg-background px-3 py-2 rounded-md font-mono text-xs",
+                                                children: "npx devdoc dev"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        children: [
+                                            /*#__PURE__*/ _jsx("p", {
+                                                className: "text-muted-foreground text-xs mb-1",
+                                                children: "Deploy to production"
+                                            }),
+                                            /*#__PURE__*/ _jsx("code", {
+                                                className: "block bg-background px-3 py-2 rounded-md font-mono text-xs",
+                                                children: "npx devdoc deploy"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("a", {
+                                href: "https://devdoc.sh",
+                                target: "_blank",
+                                rel: "noopener noreferrer",
+                                className: "inline-flex items-center gap-1.5 text-primary hover:underline text-sm font-medium",
+                                children: [
+                                    "Learn more at devdoc.sh",
+                                    /*#__PURE__*/ _jsx("svg", {
+                                        className: "h-3.5 w-3.5",
+                                        fill: "none",
+                                        viewBox: "0 0 24 24",
+                                        stroke: "currentColor",
+                                        strokeWidth: 2,
+                                        children: /*#__PURE__*/ _jsx("path", {
+                                            strokeLinecap: "round",
+                                            strokeLinejoin: "round",
+                                            d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    }
+    return /*#__PURE__*/ _jsx(NavigationProvider, {
+        collection: collection,
+        onSelectRequest: handleSelectRequest,
+        children: /*#__PURE__*/ _jsx(DocsWithMode, {
+            collection: collection,
+            selectedRequest: selectedRequest,
+            selectedDocSection: selectedDocSection,
+            selectedDocPage: selectedDocPage,
+            activeTab: activeTab,
+            onTabChange: handleTabChange,
+            contentRef: contentRef,
+            showAuthModal: showAuthModal,
+            setShowAuthModal: setShowAuthModal,
+            handleSelectRequest: handleSelectRequest,
+            handleSelectDocumentation: handleSelectDocumentation,
+            handleSelectDocPage: handleSelectDocPage,
+            handleDebugRequest: handleDebugRequest,
+            handleExplainRequest: handleExplainRequest,
+            handleAgentNavigate: handleAgentNavigate,
+            handleAgentPrefill: handleAgentPrefill,
+            debugContext: debugContext,
+            clearDebugContext: clearDebugContext,
+            explainContext: explainContext,
+            clearExplainContext: clearExplainContext,
+            navigateAndHighlight: navigateAndHighlight,
+            selectedApiVersion: selectedApiVersion,
+            handleApiVersionChange: handleApiVersionChange,
+            isVersionLoading: isVersionLoading,
+            notFoundSlug: notFoundSlug
+        })
+    });
+}
+// Mode toggle tabs - switches between Docs, API Client, and Notes
+function ModeToggleTabs({ hasEndpoint }) {
+    const { mode, switchToDocs, switchToApiClient, switchToNotes } = useModeContext();
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "flex items-center gap-1 p-1 rounded-lg bg-muted/50 shrink-0",
+        children: [
+            /*#__PURE__*/ _jsxs(Button, {
+                variant: mode === 'docs' ? 'secondary' : 'ghost',
+                size: "sm",
+                onClick: ()=>switchToDocs(),
+                className: cn("text-xs h-7 px-2 sm:px-3 gap-1.5", mode === 'docs' ? 'bg-background shadow-sm' : 'text-muted-foreground hover:text-foreground'),
+                children: [
+                    /*#__PURE__*/ _jsx(Book, {
+                        className: "h-3.5 w-3.5",
+                        weight: "bold"
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "hidden xs:inline",
+                        children: "Docs"
+                    })
+                ]
+            }),
+            hasEndpoint && /*#__PURE__*/ _jsxs(Button, {
+                variant: mode === 'api_client' ? 'secondary' : 'ghost',
+                size: "sm",
+                onClick: ()=>switchToApiClient(),
+                className: cn("text-xs h-7 px-2 sm:px-3 gap-1.5", mode === 'api_client' ? 'bg-background shadow-sm' : 'text-muted-foreground hover:text-foreground'),
+                children: [
+                    /*#__PURE__*/ _jsx(TestTube, {
+                        className: "h-3.5 w-3.5",
+                        weight: "bold"
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "hidden xs:inline",
+                        children: "API Client"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Button, {
+                variant: mode === 'notes' ? 'secondary' : 'ghost',
+                size: "sm",
+                onClick: ()=>switchToNotes(),
+                className: cn("text-xs h-7 px-2 sm:px-3 gap-1.5", mode === 'notes' ? 'bg-background shadow-sm' : 'text-muted-foreground hover:text-foreground'),
+                children: [
+                    /*#__PURE__*/ _jsx(Code, {
+                        className: "h-3.5 w-3.5",
+                        weight: "bold"
+                    }),
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "hidden xs:inline",
+                        children: "Sandbox"
+                    })
+                ]
+            })
+        ]
+    });
+}
+function DocsWithMode({ collection, selectedRequest, selectedDocSection, selectedDocPage, activeTab, onTabChange, contentRef, showAuthModal, setShowAuthModal, handleSelectRequest, handleSelectDocumentation, handleSelectDocPage, handleDebugRequest, handleExplainRequest, handleAgentNavigate, handleAgentPrefill, debugContext, clearDebugContext, explainContext, clearExplainContext, navigateAndHighlight, selectedApiVersion, handleApiVersionChange, isVersionLoading, notFoundSlug }) {
+    const { mode, switchToDocs } = useModeContext();
+    const { setTheme } = useTheme();
+    // GraphQL state
+    const [graphqlOperations, setGraphqlOperations] = useState([]);
+    const [graphqlCollection, setGraphqlCollection] = useState(null);
+    const [selectedGraphQLOperation, setSelectedGraphQLOperation] = useState(null);
+    // Get API spec URL from environment or collection
+    const apiSpecUrl = process.env.NEXT_PUBLIC_OPENAPI_URL || collection.name || 'default';
+    // Check if there are endpoints
+    const hasEndpoints = collection.folders.length > 0 || collection.requests.length > 0;
+    // Search functionality
+    const { isOpen: searchOpen, setIsOpen: setSearchOpen, openSearch, searchItems } = useSearch({
+        requests: collection.requests,
+        folders: collection.folders,
+        docGroups: collection.docGroups
+    });
+    // Handle search item selection - use URL hash navigation
+    const handleSearchSelect = useCallback((item)=>{
+        if (item.type === 'endpoint') {
+            // Navigate to endpoint via hash - format: #api-reference/endpoint/{id}
+            window.location.hash = `api-reference/endpoint/${item.id}`;
+        } else if (item.type === 'doc') {
+            // Navigate to doc page via hash - the href already has the correct format
+            // Extract tab and path from href (e.g., #guides/page/quickstart)
+            const hashPath = item.href.replace('#', '');
+            window.location.hash = hashPath;
+        }
+    }, []);
+    // Wrap agent navigate to switch to Docs mode and navigate to endpoint
+    const handleAgentNavigateWithModeSwitch = useCallback((endpointId)=>{
+        // Just navigate - handleAgentNavigate already sets the tab via setActiveTab
+        handleAgentNavigate(endpointId);
+    }, [
+        handleAgentNavigate
+    ]);
+    // Get the current content title for header
+    // Find the active tab's config
+    const activeTabConfig = collection.navigationTabs?.find((t)=>t.id === activeTab);
+    const activeTabType = activeTabConfig?.type || 'docs';
+    // Filter doc groups for sidebar based on active tab
+    // Group IDs are like "group-guides-getting-started", tab IDs are like "guides"
+    // Filter doc groups for sidebar based on active tab
+    // Group IDs are formatted as: group-{tab-id}-{group-name}
+    const filteredDocGroups = collection.docGroups?.filter((g)=>isGroupForTab(g.id, activeTab)) || [];
+    // Show endpoints in sidebar only when OpenAPI tab is active
+    const showEndpoints = activeTabType === 'openapi';
+    // Show changelog when changelog tab is active
+    const showChangelog = activeTabType === 'changelog';
+    // Show GraphQL playground when graphql tab is active
+    const showGraphQL = activeTabType === 'graphql';
+    const activeGraphQLSchemas = activeTabConfig?.graphqlSchemas || [];
+    // Get the first schema path for stable dependency
+    const schemaPath = activeGraphQLSchemas[0]?.schema;
+    const schemaEndpoint = activeGraphQLSchemas[0]?.endpoint;
+    // Load GraphQL operations when graphql tab is active
+    useEffect(()=>{
+        if (!showGraphQL || !schemaPath) {
+            setGraphqlOperations([]);
+            setGraphqlCollection(null);
+            setSelectedGraphQLOperation(null); // Clear selection when leaving GraphQL tab
+            return;
+        }
+        // Load and parse GraphQL schema
+        const loadGraphQLSchema = async ()=>{
+            try {
+                const response = await fetch(`/api/schema?path=${encodeURIComponent(schemaPath)}`);
+                if (!response.ok) return;
+                const schemaContent = await response.text();
+                const operations = parseGraphQLSchema(schemaContent);
+                setGraphqlOperations(operations);
+                // Convert to BrainfishCollection for sidebar
+                const gqlCollection = convertGraphQLToCollection(operations, schemaEndpoint || '');
+                setGraphqlCollection(gqlCollection);
+            } catch (err) {
+                console.error('Failed to load GraphQL schema:', err);
+            }
+        };
+        loadGraphQLSchema();
+    }, [
+        showGraphQL,
+        schemaPath,
+        schemaEndpoint
+    ]);
+    // Auto-select GraphQL operation from URL hash or default to first operation
+    useEffect(()=>{
+        if (!showGraphQL || graphqlOperations.length === 0) {
+            return;
+        }
+        // Check if there's a selection in the URL hash first
+        const hash = window.location.hash.slice(1) // Remove #
+        ;
+        if (hash) {
+            const parts = hash.split('/');
+            const hashType = parts[1];
+            const hashId = parts.slice(2).join('/');
+            if (hashType === 'endpoint' && hashId) {
+                // Try to find and select the operation from the URL hash
+                const operation = graphqlOperations.find((op)=>op.id === hashId);
+                if (operation) {
+                    setSelectedGraphQLOperation(operation);
+                    return;
+                }
+            }
+        }
+        // If already have a selection, don't override it
+        if (selectedGraphQLOperation) {
+            return;
+        }
+        // Check if there are doc groups for this tab first
+        const hasGroups = hasDocGroupsForTab(collection?.docGroups, activeTab);
+        if (!hasGroups) {
+            // No doc groups - auto-select first GraphQL operation
+            const firstOperation = graphqlOperations[0];
+            setSelectedGraphQLOperation(firstOperation);
+            window.history.pushState(null, '', `#${activeTab}/endpoint/${firstOperation.id}`);
+        }
+    }, [
+        showGraphQL,
+        graphqlOperations,
+        selectedGraphQLOperation,
+        activeTab,
+        collection?.docGroups
+    ]);
+    // Handle GraphQL operation selection from sidebar
+    const handleSelectGraphQLOperation = useCallback((request)=>{
+        // Find the matching GraphQL operation
+        const operation = graphqlOperations.find((op)=>op.id === request.id);
+        if (operation) {
+            setSelectedGraphQLOperation(operation);
+            // Update URL hash
+            window.history.pushState(null, '', `#${activeTab}/endpoint/${request.id}`);
+            switchToDocs();
+        }
+    }, [
+        graphqlOperations,
+        activeTab,
+        switchToDocs
+    ]);
+    // Inject custom CSS and color variables
+    useEffect(()=>{
+        // Create or update style element for custom CSS
+        let styleEl = document.getElementById('docs-custom-css');
+        if (!styleEl) {
+            styleEl = document.createElement('style');
+            styleEl.id = 'docs-custom-css';
+            document.head.appendChild(styleEl);
+        }
+        // Build CSS with color variables
+        let cssContent = '';
+        // Add color variables if provided
+        // We set both --docs-primary (for custom CSS) and --primary (for Tailwind's bg-primary class)
+        if (collection.docsColors) {
+            const colors = collection.docsColors;
+            cssContent += `:root {\n`;
+            if (colors.primary) {
+                cssContent += `  --docs-primary: ${colors.primary};\n`;
+                cssContent += `  --primary: ${colors.primary};\n`;
+            }
+            if (colors.primaryLight) cssContent += `  --docs-primary-light: ${colors.primaryLight};\n`;
+            if (colors.primaryDark) cssContent += `  --docs-primary-dark: ${colors.primaryDark};\n`;
+            cssContent += `}\n`;
+            // Also set for dark mode
+            cssContent += `.dark {\n`;
+            if (colors.primary) cssContent += `  --primary: ${colors.primary};\n`;
+            cssContent += `}\n\n`;
+        }
+        // Add custom CSS if provided
+        if (collection.customCss) {
+            cssContent += collection.customCss;
+        }
+        styleEl.textContent = cssContent;
+        return ()=>{
+            // Cleanup on unmount
+            const el = document.getElementById('docs-custom-css');
+            if (el) el.remove();
+        };
+    }, [
+        collection.customCss,
+        collection.docsColors
+    ]);
+    // Apply default theme from theme.json on initial load
+    // Use a ref to track if we've already applied the default theme
+    const hasAppliedDefaultTheme = useRef(false);
+    useEffect(()=>{
+        if (collection?.defaultTheme && !hasAppliedDefaultTheme.current) {
+            setTheme(collection.defaultTheme);
+            hasAppliedDefaultTheme.current = true;
+        }
+    }, [
+        collection?.defaultTheme,
+        setTheme
+    ]);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "docs-viewer-root flex flex-col h-screen overflow-hidden",
+        children: [
+            collection.notice && /*#__PURE__*/ _jsx(Notice, {
+                config: collection.notice,
+                storageKey: "docs-notice"
+            }),
+            /*#__PURE__*/ _jsx(SearchDialog, {
+                open: searchOpen,
+                onOpenChange: setSearchOpen,
+                items: searchItems,
+                onSelect: handleSearchSelect
+            }),
+            /*#__PURE__*/ _jsx(DocsHeader, {
+                docGroups: collection.docGroups,
+                navigationTabs: collection.navigationTabs,
+                activeTab: activeTab,
+                onTabChange: onTabChange,
+                hasEndpoints: hasEndpoints,
+                docsName: collection.docsName,
+                docsLogo: collection.docsLogo,
+                onSearchClick: openSearch,
+                docsHeader: collection.docsHeader,
+                docsNavbar: collection.docsNavbar
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "docs-layout flex flex-1 overflow-hidden relative z-0 min-h-0",
+                children: [
+                    !showChangelog && /*#__PURE__*/ _jsx(DocsSidebar, {
+                        collection: {
+                            ...collection,
+                            // Show GraphQL operations when GraphQL tab is active, else show REST endpoints
+                            folders: showGraphQL && graphqlCollection ? graphqlCollection.folders : showEndpoints ? collection.folders : [],
+                            requests: showGraphQL && graphqlCollection ? graphqlCollection.requests : showEndpoints ? collection.requests : [],
+                            // Only show filtered doc groups
+                            docGroups: filteredDocGroups
+                        },
+                        selectedRequest: showGraphQL ? selectedGraphQLOperation ? {
+                            id: selectedGraphQLOperation.id
+                        } : null : selectedRequest,
+                        selectedDocSection: selectedDocSection,
+                        selectedDocPage: selectedDocPage,
+                        activeTab: activeTab,
+                        onSelectRequest: showGraphQL ? handleSelectGraphQLOperation : handleSelectRequest,
+                        onSelectDocumentation: handleSelectDocumentation,
+                        onSelectDocPage: handleSelectDocPage,
+                        apiVersions: collection.apiVersions,
+                        selectedApiVersion: selectedApiVersion,
+                        onApiVersionChange: handleApiVersionChange,
+                        isVersionLoading: isVersionLoading
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "docs-main flex-1 flex flex-col overflow-hidden",
+                        style: {
+                            minWidth: 0,
+                            flexBasis: 0,
+                            flexGrow: 1
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                className: "docs-main-header flex items-center justify-end px-3 sm:px-4 h-[41px] border-b border-border bg-muted/30 flex-shrink-0",
+                                children: /*#__PURE__*/ _jsx(ModeToggleTabs, {
+                                    hasEndpoint: !!selectedRequest
+                                })
+                            }),
+                            mode === 'docs' ? /*#__PURE__*/ _jsx(DocsNavigationProvider, {
+                                onNavigateToPage: handleSelectDocPage,
+                                onSwitchTab: onTabChange,
+                                activeTab: activeTab,
+                                children: /*#__PURE__*/ _jsx("div", {
+                                    ref: contentRef,
+                                    className: cn("docs-content-area flex-1 bg-background min-w-0", showChangelog || showGraphQL && selectedGraphQLOperation ? "overflow-hidden flex flex-col" : "overflow-y-auto scroll-smooth"),
+                                    children: showGraphQL && selectedGraphQLOperation ? /*#__PURE__*/ _jsx("div", {
+                                        className: "flex-1 flex flex-col h-full",
+                                        children: /*#__PURE__*/ _jsx(GraphQLPlayground, {
+                                            endpoint: activeGraphQLSchemas[0]?.endpoint || '',
+                                            defaultQuery: selectedGraphQLOperation?.query,
+                                            operations: graphqlOperations,
+                                            selectedOperationId: selectedGraphQLOperation?.id,
+                                            hideExplorer: true,
+                                            headers: {},
+                                            theme: "dark"
+                                        })
+                                    }) : showChangelog ? /*#__PURE__*/ _jsx(ChangelogPage, {
+                                        releases: collection.changelogReleases || [],
+                                        tabName: activeTabConfig?.tab
+                                    }) : selectedRequest ? /*#__PURE__*/ _jsx(RequestDetails, {
+                                        request: selectedRequest
+                                    }) : selectedDocPage ? /*#__PURE__*/ _jsx(DocPage, {
+                                        slug: selectedDocPage,
+                                        onSearch: openSearch
+                                    }) : notFoundSlug ? /*#__PURE__*/ _jsx(NotFoundPage, {
+                                        slug: notFoundSlug,
+                                        onSearch: openSearch
+                                    }) : /*#__PURE__*/ _jsx("div", {
+                                        className: "flex-1 flex items-center justify-center bg-background",
+                                        children: /*#__PURE__*/ _jsxs("div", {
+                                            className: "text-center text-muted-foreground",
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Book, {
+                                                    className: "h-12 w-12 mx-auto mb-3 opacity-40"
+                                                }),
+                                                /*#__PURE__*/ _jsx("p", {
+                                                    className: "text-sm",
+                                                    children: "Select an endpoint from the sidebar"
+                                                })
+                                            ]
+                                        })
+                                    })
+                                })
+                            }) : mode === 'notes' ? /*#__PURE__*/ _jsx("div", {
+                                className: "flex-1 flex flex-col min-h-0 overflow-hidden",
+                                children: /*#__PURE__*/ _jsx(NotesMode, {
+                                    apiSpecUrl: apiSpecUrl,
+                                    apiName: collection.name
+                                })
+                            }) : selectedRequest ? /*#__PURE__*/ _jsx("div", {
+                                className: "flex-1 flex flex-col min-h-0 overflow-hidden",
+                                children: /*#__PURE__*/ _jsx(ApiPlayground, {
+                                    request: selectedRequest,
+                                    onDebugRequest: handleDebugRequest,
+                                    onExplainRequest: handleExplainRequest
+                                })
+                            }) : /*#__PURE__*/ _jsx("div", {
+                                className: "flex-1 flex items-center justify-center bg-background",
+                                children: /*#__PURE__*/ _jsxs("div", {
+                                    className: "text-center text-muted-foreground",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(TestTube, {
+                                            className: "h-12 w-12 mx-auto mb-3 opacity-40"
+                                        }),
+                                        /*#__PURE__*/ _jsx("p", {
+                                            className: "text-sm",
+                                            children: "Select an endpoint from the sidebar to test"
+                                        })
+                                    ]
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(RightSidebar, {
+                        request: selectedRequest,
+                        collection: collection,
+                        apiSummary: collection.apiSummary,
+                        onNavigateToEndpoint: handleAgentNavigateWithModeSwitch,
+                        onPrefillParameters: handleAgentPrefill,
+                        debugContext: debugContext,
+                        onClearDebugContext: clearDebugContext,
+                        explainContext: explainContext,
+                        onClearExplainContext: clearExplainContext,
+                        onOpenGlobalAuth: ()=>setShowAuthModal(true),
+                        onNavigateToAuthTab: ()=>{
+                            navigateAndHighlight('auth', {
+                                type: 'auth'
+                            }, true);
+                        },
+                        onNavigateToParamsTab: ()=>{
+                            navigateAndHighlight('params', {
+                                type: 'param'
+                            }, true);
+                        },
+                        onNavigateToBodyTab: ()=>{
+                            navigateAndHighlight('body', {
+                                type: 'body'
+                            }, true);
+                        },
+                        onNavigateToHeadersTab: ()=>{
+                            navigateAndHighlight('headers', {
+                                type: 'header'
+                            }, true);
+                        },
+                        onNavigateToDocSection: handleSelectDocumentation,
+                        onNavigateToDocPage: handleSelectDocPage
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(GlobalAuthModal, {
+                open: showAuthModal,
+                onClose: ()=>setShowAuthModal(false)
+            })
+        ]
+    });
+}
+// Wrapper component with providers
+export function Docs() {
+    return /*#__PURE__*/ _jsx(AuthProvider, {
+        children: /*#__PURE__*/ _jsx(ModeProvider, {
+            children: /*#__PURE__*/ _jsx(PlaygroundProvider, {
+                children: /*#__PURE__*/ _jsx(PlaygroundNavigationProvider, {
+                    children: /*#__PURE__*/ _jsx(DocsContent, {})
+                })
+            })
+        })
+    });
+}