@brainfish-ai/devdoc 0.1.48 → 0.1.49

package/renderer/components/docs-viewer/agent/messages/tool-call-display.js

@@ -44,7 +44,9 @@ export function ToolCallDisplay({ tool, onNavigate, onNavigateToDocPage, onOpenF
                         toolName === 'search_endpoints' && 'Searching...',
                         toolName === 'navigate_to_endpoint' && 'Navigating...',
                         toolName === 'prefill_parameters' && 'Setting params...',
+                        toolName === 'prefill_graphql_variables' && 'Setting variables...',
                         toolName === 'get_endpoint_details' && 'Loading details...',
+                        toolName === 'get_current_graphql_state' && 'Checking playground...',
                         toolName === 'check_request_validity' && 'Validating request...',
                         toolName === 'send_request' && /*#__PURE__*/ _jsxs("span", {
                             className: "flex items-center gap-1.5",
@@ -300,6 +302,48 @@ export function ToolCallDisplay({ tool, onNavigate, onNavigateToDocPage, onOpenF
             ]
         });
     }
+    // Prefill GraphQL variables
+    if (toolName === 'prefill_graphql_variables') {
+        const data = result || args;
+        const varCount = data.variables ? Object.keys(data.variables).length : 0;
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50",
+            children: [
+                /*#__PURE__*/ _jsx(CheckCircle, {
+                    className: "size-3.5 text-green-600 dark:text-green-500",
+                    weight: "fill"
+                }),
+                /*#__PURE__*/ _jsxs("span", {
+                    className: "text-muted-foreground",
+                    children: [
+                        "Set ",
+                        varCount,
+                        " GraphQL variable",
+                        varCount !== 1 ? 's' : ''
+                    ]
+                })
+            ]
+        });
+    }
+    // Get current GraphQL state - show minimal indicator (the AI will describe the state)
+    if (toolName === 'get_current_graphql_state') {
+        const data = result;
+        if (!data?.success) return null // Don't show if failed
+        ;
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "flex items-center gap-2 text-xs py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50",
+            children: [
+                /*#__PURE__*/ _jsx(CheckCircle, {
+                    className: "size-3.5 text-green-600 dark:text-green-500",
+                    weight: "fill"
+                }),
+                /*#__PURE__*/ _jsx("span", {
+                    className: "text-muted-foreground",
+                    children: data?.hasResponse ? 'Read playground response' : 'Checked playground state'
+                })
+            ]
+        });
+    }
     // Search endpoints
     if (toolName === 'search_endpoints') {
         const results = result;
@@ -380,15 +424,16 @@ export function ToolCallDisplay({ tool, onNavigate, onNavigateToDocPage, onOpenF
     // Get endpoint details
     if (toolName === 'get_endpoint_details') {
         const endpoint = result;
-        if (!endpoint) return null;
+        // Check for error or missing required fields
+        if (!endpoint || endpoint.error || !endpoint.name) return null;
         return /*#__PURE__*/ _jsxs("div", {
             className: "py-1.5 px-2.5 rounded-md bg-muted/50 border border-border/50",
             children: [
                 /*#__PURE__*/ _jsxs("div", {
                     className: "flex items-center gap-2 text-xs",
                     children: [
-                        /*#__PURE__*/ _jsx(MethodBadge, {
-                            method: endpoint.method || 'GET',
+                        endpoint.method && /*#__PURE__*/ _jsx(MethodBadge, {
+                            method: endpoint.method,
                             size: "sm"
                         }),
                         /*#__PURE__*/ _jsx("span", {
@@ -397,7 +442,7 @@ export function ToolCallDisplay({ tool, onNavigate, onNavigateToDocPage, onOpenF
                         })
                     ]
                 }),
-                /*#__PURE__*/ _jsx("code", {
+                endpoint.path && /*#__PURE__*/ _jsx("code", {
                     className: "text-[11px] text-muted-foreground block truncate mt-0.5",
                     children: endpoint.path
                 })

package/renderer/components/docs-viewer/content/content-router.js

@@ -163,7 +163,7 @@ import { GraphQLPlayground } from '../playground/graphql-playground';
                 ]
             })
         }) : /*#__PURE__*/ _jsx("div", {
-            className: "flex-1 flex items-center justify-center bg-background",
+            className: "h-full min-h-[60vh] flex items-center justify-center bg-background",
             children: /*#__PURE__*/ _jsxs("div", {
                 className: "text-center text-muted-foreground",
                 children: [

package/renderer/components/docs-viewer/content/doc-page.js

@@ -7,38 +7,41 @@ import { useDocsNavigation } from '@/lib/docs-navigation-context';
 import { useCodeCopy } from '@/hooks/use-code-copy';
 import { NotFoundPage } from './not-found-page';
 import { MDXErrorBoundary } from './mdx-error-boundary';
+import { getLinkAction, isExternalLink } from '@/lib/docs-link-utils';
 // Custom Link component for MDX - uses docs navigation context
 function MdxLink({ href, children, ...props }) {
     const docsNav = useDocsNavigation();
     const handleClick = useCallback((e)=>{
-        // Handle anchor links (same page)
-        if (href?.startsWith('#')) {
-            return; // Let default behavior handle anchor scrolling
-        }
-        // Handle internal doc links
-        if (href?.startsWith('/') && docsNav?.isApiDocsView) {
-            e.preventDefault();
-            // Extract the slug from the path
-            let slug = href;
-            // Remove leading slash
-            if (slug.startsWith('/')) {
-                slug = slug.slice(1);
-            }
-            // Handle special paths
-            if (slug.startsWith('api-reference')) {
-                docsNav.switchToTab('api-reference');
+        if (!href) return;
+        const action = getLinkAction(href, {
+            activeTab: docsNav?.activeTab,
+            tabIds: docsNav?.tabIds
+        });
+        switch(action.type){
+            case 'external':
+            case 'anchor':
+                // Let default behavior handle these
                 return;
-            }
-            if (slug.startsWith('changelog')) {
-                docsNav.switchToTab('changelog');
+            case 'switchTab':
+                if (docsNav?.isApiDocsView) {
+                    e.preventDefault();
+                    docsNav.switchToTab(action.tabId);
+                }
+                return;
+            case 'navigatePage':
+                if (docsNav?.isApiDocsView) {
+                    e.preventDefault();
+                    // Remove docs/ prefix if present
+                    let slug = action.slug;
+                    if (slug.startsWith('docs/')) {
+                        slug = slug.slice(5);
+                    }
+                    docsNav.navigateToPage(slug);
+                }
+                return;
+            case 'navigate':
+                // Use default link behavior
                 return;
-            }
-            // Remove docs/ prefix if present
-            if (slug.startsWith('docs/')) {
-                slug = slug.slice(5);
-            }
-            // Navigate to the page
-            docsNav.navigateToPage(slug);
         }
     }, [
         href,
@@ -48,7 +51,7 @@ function MdxLink({ href, children, ...props }) {
     // Using visited: to override browser's purple visited link color
     const linkClassName = "text-primary visited:text-primary font-medium underline decoration-primary/30 underline-offset-2 hover:decoration-primary transition-colors";
     // External links
-    if (href && !href.startsWith('/') && !href.startsWith('#')) {
+    if (href && isExternalLink(href)) {
         return /*#__PURE__*/ _jsx("a", {
             href: href,
             target: "_blank",
@@ -67,7 +70,8 @@ function MdxLink({ href, children, ...props }) {
     });
 }
 // Import MDX components
-import { Note, Warning, Info, Tip, Check, Error as ErrorCallout, Callout, Card, CardGroup, Accordion, AccordionGroup, Steps, Step, Tabs, Tab, CodeGroup, Frame, Columns, Snippet, Latex, ParamField, ResponseField, Expandable, Iframe, Video, Loom, Image, Screenshot, Logo, Icon, Highlight, Marker, Underline, Badge, Mermaid, PDF, Audio, Download, // Landing Page Components
+import { Note, Warning, Info, Tip, Check, Error as ErrorCallout, Callout, Card, CardGroup, Accordion, AccordionGroup, Steps, Step, Tabs, Tab, CodeGroup, Frame, Columns, Snippet, Latex, ParamField, ResponseField, Expandable, Iframe, Video, Loom, Image, Screenshot, Logo, Icon, Highlight, Marker, Underline, Badge, Mermaid, PDF, Audio, Download, // File Tree
+FileTree, TreeFolder, TreeFile, // Landing Page Components
 Hero, Pre, Tagline, Headline, Description, CommandBox, Section, Center, FeatureGrid, FeatureItem, ButtonLink, Spacer, Divider } from '../../docs/mdx/index';
 // MDX components mapping
 const mdxComponents = {
@@ -123,6 +127,10 @@ const mdxComponents = {
     PDF,
     Audio,
     Download,
+    // File Tree
+    FileTree,
+    Folder: TreeFolder,
+    File: TreeFile,
     // Landing Page
     Hero,
     Pre,

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

@@ -11,7 +11,7 @@ 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 { buildSchema, isNonNullType, isListType } from 'graphql';
+import { buildSchema, isNonNullType, isListType, isInputObjectType, isEnumType } from 'graphql';
 import { GlobalAuthModal } from './global-auth-modal';
 import { AuthProvider } from '@/lib/api-docs/auth';
 import { PlaygroundProvider, usePlaygroundPrefill } from '@/lib/api-docs/playground/context';
@@ -31,7 +31,6 @@ import { useRouteState } from '@/hooks/use-route-state';
 import { navigateToPage, navigateToEndpoint, navigateToSection, navigateToTab } from '@/lib/docs-navigation';
 import { useMobile } from '@/lib/api-docs/mobile-context';
 import { AgentPopupButton } from './agent/agent-popup-button';
-import { buildEndpointIndex } from '@/lib/api-docs/agent/indexer';
 // Helper to convert GraphQL type to string representation
 function graphqlTypeToString(type) {
     if (isNonNullType(type)) {
@@ -217,44 +216,70 @@ function generateExampleValue(type, schema, depth = 0) {
     }
     // Check if it's an enum type
     const schemaType = schema.getType(typeName);
-    if (schemaType && 'getValues' in schemaType) {
-        const enumType = schemaType;
-        const values = enumType.getValues();
+    if (schemaType && isEnumType(schemaType)) {
+        const values = schemaType.getValues();
         if (values.length > 0) {
             return values[0].name // Return first enum value
             ;
         }
     }
-    // Check if it's an input object type
-    if (schemaType && 'getFields' in schemaType) {
-        const inputType = schemaType;
-        const fields = inputType.getFields();
+    // Check if it's an input object type (for filter inputs, etc.)
+    if (schemaType && isInputObjectType(schemaType)) {
+        const fields = schemaType.getFields();
         const result = {};
-        // Only include required fields to keep examples concise
+        // First, include all required fields
         for (const [fieldName, field] of Object.entries(fields)){
             if (isNonNullType(field.type)) {
-                // Use default value if available, otherwise generate
                 if (field.defaultValue !== undefined) {
                     result[fieldName] = field.defaultValue;
                 } else {
-                    result[fieldName] = generateExampleValue(field.type, schema, depth + 1);
+                    const value = generateExampleValue(field.type, schema, depth + 1);
+                    if (value !== null) {
+                        result[fieldName] = value;
+                    }
                 }
             }
         }
-        // If no required fields, include first optional field
+        // If no required fields, include a useful optional field
+        // Prioritize common filter/query fields
         if (Object.keys(result).length === 0) {
-            const firstField = Object.entries(fields)[0];
-            if (firstField) {
-                const [fname, fdef] = firstField;
-                // Use default value if available
+            const fieldEntries = Object.entries(fields);
+            // Priority order for filter fields
+            const priorityFields = [
+                'eq',
+                'equals',
+                'id',
+                'code',
+                'name',
+                'in',
+                'contains'
+            ];
+            let selectedField;
+            // Find a priority field first
+            for (const pf of priorityFields){
+                const found = fieldEntries.find(([name])=>name.toLowerCase() === pf);
+                if (found) {
+                    selectedField = found;
+                    break;
+                }
+            }
+            // Fall back to first field
+            if (!selectedField && fieldEntries.length > 0) {
+                selectedField = fieldEntries[0];
+            }
+            if (selectedField) {
+                const [fname, fdef] = selectedField;
                 if (fdef.defaultValue !== undefined) {
                     result[fname] = fdef.defaultValue;
                 } else {
-                    result[fname] = generateExampleValue(fdef.type, schema, depth + 1);
+                    const value = generateExampleValue(fdef.type, schema, depth + 1);
+                    if (value !== null) {
+                        result[fname] = value;
+                    }
                 }
             }
         }
-        return result;
+        return Object.keys(result).length > 0 ? result : null;
     }
     // Unknown type - return null
     return null;
@@ -657,14 +682,27 @@ function DocsContent() {
         if (!collection) return;
         const request = findRequestById(collection, endpointId);
         if (request) {
-            // Navigate to the endpoint in api-reference tab
-            navigateToEndpoint('api-reference', endpointId);
+            // Find the correct tab for the endpoint
+            // If current tab is an OpenAPI tab, use it; otherwise find the first OpenAPI tab
+            const currentTabConfig = collection.navigationTabs?.find((t)=>t.id === activeTab);
+            const isCurrentTabOpenApi = currentTabConfig?.type === 'openapi' || currentTabConfig?.type === 'graphql';
+            let targetTab = activeTab;
+            if (!isCurrentTabOpenApi) {
+                // Find the first OpenAPI tab
+                const firstOpenApiTab = collection.navigationTabs?.find((t)=>t.type === 'openapi' || t.type === 'graphql');
+                if (firstOpenApiTab) {
+                    targetTab = firstOpenApiTab.id;
+                }
+            }
+            // Navigate to the endpoint in the correct tab
+            navigateToEndpoint(targetTab, endpointId);
             // Reset tab navigation so the new endpoint can determine its default tab
             resetNavigation();
         }
     }, [
         collection,
-        resetNavigation
+        resetNavigation,
+        activeTab
     ]);
     // Handler for agent prefilling parameters
     const handleAgentPrefill = useCallback((data)=>{
@@ -790,15 +828,18 @@ function DocsContent() {
                     }
                     // Handle initial navigation after collection loads
                     setTimeout(()=>{
-                        const hash = window.location.hash.slice(1);
-                        const isTabOnly = hash && !hash.includes('/');
-                        if (!hash) {
-                            // No hash - navigate to first content of default tab
+                        const pathname = window.location.pathname;
+                        const pathParts = pathname.split('/').filter(Boolean);
+                        const isTabOnly = pathParts.length === 1 // Just /tab-name
+                        ;
+                        if (pathParts.length === 0) {
+                            // No path - navigate to first content of default tab
                             navigateToFirstContent(defaultTabId);
                         } else if (isTabOnly) {
-                            // Just a tab name (e.g., #guides) - navigate to first content
-                            navigateToFirstContent(hash);
+                            // Just a tab name (e.g., /facebook-pages-api) - navigate to first content
+                            navigateToFirstContent(pathParts[0]);
                         }
+                    // If path has content (e.g., /tab/page/slug), no auto-navigation needed
                     // View mode (docs/playground/notes) is derived from URL by ModeProvider
                     }, 0);
                 }
@@ -1069,14 +1110,71 @@ function DocsWithMode({ collection, selectedRequest, selectedDocSection, selecte
     const { setTheme } = useTheme();
     // Agent panel state - controls popup button and push animation
     const { isRightSidebarOpen, openRightSidebar } = useMobile();
-    // Build endpoint index for suggestions (memoized)
-    const endpointIndex = useMemo(()=>buildEndpointIndex(collection), [
-        collection
+    // Memoize currentEndpoint for AgentPopupButton to prevent unnecessary re-renders
+    // Using primitive deps intentionally to avoid re-creating object on every render
+    const currentEndpointForPopup = useMemo(()=>selectedRequest ? {
+            id: selectedRequest.id,
+            name: selectedRequest.name
+        } : null, // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+        selectedRequest?.id,
+        selectedRequest?.name
     ]);
     // GraphQL state
     const [graphqlOperations, setGraphqlOperations] = useState([]);
     const [graphqlCollection, setGraphqlCollection] = useState(null);
     const [graphqlSchemaSDL, setGraphqlSchemaSDL] = useState(undefined);
+    // External GraphQL variables (set by AI agent prefill tool)
+    const [externalGraphQLVariables, setExternalGraphQLVariables] = useState(undefined);
+    // Current GraphQL playground state (for AI context)
+    const [graphqlPlaygroundState, setGraphqlPlaygroundState] = useState(null);
+    // Handler for AI agent prefilling GraphQL variables
+    const handlePrefillGraphQLVariables = useCallback((variables)=>{
+        console.log('[Agent] GraphQL variables prefill requested:', variables);
+        setExternalGraphQLVariables(variables);
+    }, []);
+    // Handler for GraphQL playground state changes (for AI context)
+    const handleGraphQLStateChange = useCallback((state)=>{
+        setGraphqlPlaygroundState(state);
+    }, []);
+    // Handler for GraphQL debug requests - convert to DebugContext format
+    const handleGraphQLDebugRequest = useCallback((context)=>{
+        const hasErrors = context.response?.errors && context.response.errors.length > 0;
+        const debugCtx = {
+            status: hasErrors ? 400 : 200,
+            statusText: hasErrors ? 'GraphQL Error' : 'OK',
+            responseBody: context.response ? JSON.stringify(context.response, null, 2) : '',
+            errorMessage: context.error || context.response?.errors?.map((e)=>e.message).join(', '),
+            endpointName: context.operationName || 'GraphQL Query',
+            endpointMethod: 'QUERY',
+            endpointPath: 'graphql',
+            requestBody: JSON.stringify({
+                query: context.query,
+                variables: context.variables
+            }, null, 2)
+        };
+        handleDebugRequest(debugCtx);
+    }, [
+        handleDebugRequest
+    ]);
+    // Handler for GraphQL explain requests - convert to DebugContext format
+    const handleGraphQLExplainRequest = useCallback((context)=>{
+        const explainCtx = {
+            status: 200,
+            statusText: 'OK',
+            responseBody: context.response ? JSON.stringify(context.response, null, 2) : '',
+            endpointName: context.operationName || 'GraphQL Query',
+            endpointMethod: 'QUERY',
+            endpointPath: 'graphql',
+            requestBody: JSON.stringify({
+                query: context.query,
+                variables: context.variables
+            }, null, 2)
+        };
+        handleExplainRequest(explainCtx);
+    }, [
+        handleExplainRequest
+    ]);
     // Use route state for URL-based selection
     const routeState = useRouteState();
     // Derive selected GraphQL operation from URL
@@ -1112,13 +1210,6 @@ function DocsWithMode({ collection, selectedRequest, selectedDocSection, selecte
             window.location.hash = hashPath;
         }
     }, []);
-    // Wrap agent navigate to switch to Docs mode and navigate to endpoint
-    const handleAgentNavigateWithModeSwitch = useCallback((endpointId)=>{
-        // handleAgentNavigate navigates via URL
-        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);
@@ -1135,12 +1226,21 @@ function DocsWithMode({ collection, selectedRequest, selectedDocSection, selecte
     // 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
+    // Get the first GraphQL schema from any tab (for playground/sidebar)
+    const firstGraphQLSchema = useMemo(()=>{
+        for (const tab of collection.navigationTabs || []){
+            if (tab.type === 'graphql' && tab.graphqlSchemas?.[0]) {
+                return tab.graphqlSchemas[0];
+            }
+        }
+        return null;
+    }, [
+        collection.navigationTabs
+    ]);
+    // Always load GraphQL schema when available (for AI agent search/navigate)
+    // This ensures GraphQL endpoints are available regardless of active tab
     useEffect(()=>{
-        if (!showGraphQL || !schemaPath) {
+        if (!firstGraphQLSchema?.schema) {
             setGraphqlOperations([]);
             setGraphqlCollection(null);
             setGraphqlSchemaSDL(undefined);
@@ -1149,30 +1249,89 @@ function DocsWithMode({ collection, selectedRequest, selectedDocSection, selecte
         // Load and parse GraphQL schema
         const loadGraphQLSchema = async ()=>{
             try {
-                console.log('[DocsViewer] Loading GraphQL schema from:', schemaPath);
-                const response = await fetch(`/api/schema?path=${encodeURIComponent(schemaPath)}`);
+                const response = await fetch(`/api/schema?path=${encodeURIComponent(firstGraphQLSchema.schema)}`);
                 if (!response.ok) {
-                    console.error('[DocsViewer] Failed to fetch schema:', response.status);
                     return;
                 }
                 const schemaContent = await response.text();
-                console.log('[DocsViewer] Schema loaded, length:', schemaContent.length);
                 setGraphqlSchemaSDL(schemaContent); // Store schema SDL for autocomplete
                 const operations = parseGraphQLSchema(schemaContent);
-                console.log('[DocsViewer] Parsed operations:', operations.length);
                 setGraphqlOperations(operations);
                 // Convert to BrainfishCollection for sidebar
-                const gqlCollection = convertGraphQLToCollection(operations, schemaEndpoint || '');
+                const gqlCollection = convertGraphQLToCollection(operations, firstGraphQLSchema.endpoint || '');
                 setGraphqlCollection(gqlCollection);
             } catch (err) {
                 console.error('[DocsViewer] Failed to load GraphQL schema:', err);
             }
         };
         loadGraphQLSchema();
+    }, [
+        firstGraphQLSchema?.schema,
+        firstGraphQLSchema?.endpoint
+    ]);
+    // Active collection - GraphQL collection when GraphQL tab is active, otherwise REST collection
+    // This is used by sidebar, agent chat, and other components that need the current API context
+    const activeCollection = useMemo(()=>{
+        return showGraphQL && graphqlCollection ? graphqlCollection : collection;
     }, [
         showGraphQL,
-        schemaPath,
-        schemaEndpoint
+        graphqlCollection,
+        collection
+    ]);
+    // Active request - the currently selected endpoint (REST or GraphQL)
+    const activeRequest = useMemo(()=>{
+        if (showGraphQL && selectedGraphQLOperation && graphqlCollection) {
+            return findRequestById(graphqlCollection, selectedGraphQLOperation.id);
+        }
+        return selectedRequest;
+    }, [
+        showGraphQL,
+        selectedGraphQLOperation,
+        graphqlCollection,
+        selectedRequest
+    ]);
+    // Use endpoint index from Collections API (already includes REST + GraphQL)
+    // This is pre-built server-side for better performance and consistency
+    const endpointIndex = collection.endpointIndex || [];
+    // Wrap agent navigate to switch to Docs mode and navigate to endpoint
+    // Uses activeCollection to support both REST and GraphQL endpoints
+    const handleAgentNavigateWithModeSwitch = useCallback((endpointId)=>{
+        // First check if the endpoint exists in the active collection (current tab)
+        const requestInActive = findRequestById(activeCollection, endpointId);
+        if (requestInActive) {
+            navigateToEndpoint(activeTab, endpointId);
+            return;
+        }
+        // Check if it's in the GraphQL collection (might be on different tab)
+        if (graphqlCollection) {
+            const requestInGraphQL = findRequestById(graphqlCollection, endpointId);
+            if (requestInGraphQL) {
+                // Find the GraphQL tab and navigate there
+                const graphqlTab = collection.navigationTabs?.find((t)=>t.type === 'graphql');
+                if (graphqlTab) {
+                    navigateToEndpoint(graphqlTab.id, endpointId);
+                    return;
+                }
+            }
+        }
+        // Check if it's in the REST collection (might be on different tab)
+        const requestInREST = findRequestById(collection, endpointId);
+        if (requestInREST) {
+            // Find the first OpenAPI tab and navigate there
+            const openApiTab = collection.navigationTabs?.find((t)=>t.type === 'openapi');
+            if (openApiTab) {
+                navigateToEndpoint(openApiTab.id, endpointId);
+                return;
+            }
+        }
+        // Fall back to parent's navigate
+        handleAgentNavigate(endpointId);
+    }, [
+        activeCollection,
+        activeTab,
+        graphqlCollection,
+        collection,
+        handleAgentNavigate
     ]);
     // Auto-navigate to first GraphQL operation when none selected and no doc pages
     useEffect(()=>{
@@ -1329,16 +1488,21 @@ function DocsWithMode({ collection, selectedRequest, selectedDocSection, selecte
                                 onNavigateToPage: handleSelectDocPage,
                                 onSwitchTab: onTabChange,
                                 activeTab: activeTab,
+                                tabIds: collection.navigationTabs?.map((t)=>t.id),
                                 children: /*#__PURE__*/ _jsx("div", {
                                     ref: contentRef,
                                     className: cn("docs-content-area flex-1 bg-background min-w-0", showChangelog || showGraphQL && selectedGraphQLOperation && !selectedDocPage ? "overflow-hidden flex flex-col" : "overflow-y-auto scroll-smooth"),
                                     children: showGraphQL && selectedGraphQLOperation && !selectedDocPage ? /*#__PURE__*/ _jsx("div", {
                                         className: "flex-1 flex flex-col h-full",
                                         children: /*#__PURE__*/ _jsx(GraphQLPlayground, {
-                                            endpoint: activeGraphQLSchemas[0]?.endpoint || '',
+                                            endpoint: activeGraphQLSchemas[0]?.endpoint || firstGraphQLSchema?.endpoint || '',
                                             defaultQuery: selectedGraphQLOperation?.query,
                                             operations: graphqlOperations,
                                             selectedOperationId: selectedGraphQLOperation?.id,
+                                            externalVariables: externalGraphQLVariables,
+                                            onStateChange: handleGraphQLStateChange,
+                                            onDebugRequest: handleGraphQLDebugRequest,
+                                            onExplainRequest: handleGraphQLExplainRequest,
                                             hideExplorer: true,
                                             headers: {},
                                             theme: "dark",
@@ -1402,11 +1566,13 @@ function DocsWithMode({ collection, selectedRequest, selectedDocSection, selecte
                         ]
                     }),
                     /*#__PURE__*/ _jsx(RightSidebar, {
-                        request: selectedRequest,
+                        request: activeRequest,
                         collection: collection,
                         apiSummary: collection.apiSummary,
                         onNavigateToEndpoint: handleAgentNavigateWithModeSwitch,
                         onPrefillParameters: handleAgentPrefill,
+                        onPrefillGraphQLVariables: handlePrefillGraphQLVariables,
+                        graphqlPlaygroundState: graphqlPlaygroundState,
                         debugContext: debugContext,
                         onClearDebugContext: clearDebugContext,
                         explainContext: explainContext,
@@ -1444,17 +1610,16 @@ function DocsWithMode({ collection, selectedRequest, selectedDocSection, selecte
             !isRightSidebarOpen && /*#__PURE__*/ _jsx(AgentPopupButton, {
                 onClick: ()=>openRightSidebar(),
                 onQuestionClick: (prompt)=>openRightSidebar(prompt),
-                currentEndpoint: selectedRequest ? {
-                    id: selectedRequest.id,
-                    name: selectedRequest.name
-                } : null,
+                currentEndpoint: currentEndpointForPopup,
                 endpointIndex: endpointIndex
             })
         ]
     });
 }
 // Wrapper component with providers
-export function Docs() {
+export function Docs({ initialPath } = {}) {
+    // initialPath is passed for SSR but useRouteState reads from usePathname() automatically
+    void initialPath; // Acknowledge prop (used for SSR metadata matching)
     return /*#__PURE__*/ _jsx(AuthProvider, {
         children: /*#__PURE__*/ _jsx(ModeProvider, {
             children: /*#__PURE__*/ _jsx(PlaygroundProvider, {