@brainfish-ai/devdoc 0.1.47 → 0.1.49

package/renderer/app/globals.css

@@ -1266,4 +1266,37 @@ code[data-line-numbers] > [data-line]::before {
 .agent-suggestion-item {
   animation: suggestion-fade-in 0.2s ease-out forwards;
   animation-fill-mode: both;
+}
+
+/* Sandbox tabs styling */
+.sandbox-tabs {
+  background-color: hsl(240 10% 20%);
+  border-bottom: 1px solid hsl(240 10% 25%);
+}
+
+.sandbox-tab-active {
+  background-color: hsl(240 10% 14%);
+  color: hsl(0 0% 95%);
+}
+
+.sandbox-tab-inactive {
+  color: hsl(240 5% 65%);
+}
+
+.sandbox-tab-inactive:hover {
+  color: hsl(0 0% 90%);
+  background-color: hsl(240 10% 18%);
+}
+
+.sandbox-tab-indicator {
+  background-color: hsl(var(--primary));
+}
+
+.sandbox-tab-close {
+  color: hsl(240 5% 55%);
+}
+
+.sandbox-tab-close:hover {
+  color: hsl(0 0% 95%);
+  background-color: hsl(240 10% 25%);
 }

package/renderer/app/layout.js

@@ -1,6 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { headers } from "next/headers";
 import { Geist, Geist_Mono } from "next/font/google";
 import { ThemeProvider } from "@/components/theme-provider";
+import { extractProjectContext } from "@/lib/multi-tenant/context";
+import { getProjectContent } from "@/lib/storage/blob";
 import "./globals.css";
 const geistSans = Geist({
     variable: "--font-geist-sans",
@@ -14,15 +17,87 @@ const geistMono = Geist_Mono({
         "latin"
     ]
 });
-export const metadata = {
-    title: "Documentation",
-    description: "API Documentation and Reference",
-    icons: {
-        icon: '/icon.png',
-        shortcut: '/icon.png',
-        apple: '/icon.png'
+// Dynamic metadata for multi-tenant projects
+export async function generateMetadata() {
+    const headersList = await headers();
+    const hostname = headersList.get("host") || "localhost";
+    const context = extractProjectContext(hostname);
+    // Default metadata for non-multi-tenant (local development)
+    if (!context.isMultiTenant || !context.slug) {
+        return {
+            title: "Documentation",
+            description: "API Documentation and Reference",
+            icons: {
+                icon: '/icon.png',
+                shortcut: '/icon.png',
+                apple: '/icon.png'
+            }
+        };
     }
-};
+    // Fetch project data for multi-tenant sites
+    try {
+        const projectContent = await getProjectContent(context.slug);
+        if (projectContent) {
+            const docsConfig = JSON.parse(projectContent.docsJson);
+            const themeConfig = projectContent.themeJson ? JSON.parse(projectContent.themeJson) : null;
+            const title = docsConfig.name || "Documentation";
+            const description = docsConfig.description || `${title} - API Documentation and Reference`;
+            const logoUrl = themeConfig?.logo?.url ? `https://${context.slug}.devdoc.sh/api/assets/${context.slug}${themeConfig.logo.url.replace('/assets', '')}` : null;
+            const faviconUrl = docsConfig.favicon ? `https://${context.slug}.devdoc.sh/api/assets/${context.slug}${docsConfig.favicon.replace('/assets', '')}` : '/icon.png';
+            return {
+                title: {
+                    default: title,
+                    template: `%s | ${title}`
+                },
+                description,
+                icons: {
+                    icon: faviconUrl,
+                    shortcut: faviconUrl,
+                    apple: faviconUrl
+                },
+                openGraph: {
+                    title,
+                    description,
+                    siteName: title,
+                    type: "website",
+                    url: `https://${context.slug}.devdoc.sh`,
+                    ...logoUrl && {
+                        images: [
+                            {
+                                url: logoUrl,
+                                width: 1200,
+                                height: 630,
+                                alt: title
+                            }
+                        ]
+                    }
+                },
+                twitter: {
+                    card: logoUrl ? "summary_large_image" : "summary",
+                    title,
+                    description,
+                    ...logoUrl && {
+                        images: [
+                            logoUrl
+                        ]
+                    }
+                }
+            };
+        }
+    } catch (error) {
+        console.error("[Metadata] Error fetching project:", error);
+    }
+    // Fallback metadata
+    return {
+        title: "Documentation",
+        description: "API Documentation and Reference",
+        icons: {
+            icon: '/icon.png',
+            shortcut: '/icon.png',
+            apple: '/icon.png'
+        }
+    };
+}
 export const viewport = {
     width: "device-width",
     initialScale: 1,

package/renderer/components/docs/mdx/cards.js

@@ -6,6 +6,7 @@ import { cn } from '@/lib/utils';
 import { ArrowRight, ArrowSquareOut } from '@phosphor-icons/react';
 import * as PhosphorIcons from '@phosphor-icons/react';
 import { useDocsNavigation } from '@/lib/docs-navigation-context';
+import { resolveLink, isExternalLink } from '@/lib/docs-link-utils';
 // Dynamic icon resolver for Phosphor icons
 function getIcon(iconName) {
     if (!iconName) return null;
@@ -44,41 +45,20 @@ export function Card({ title, children, icon, iconSize = 'md', href, horizontal
     const Icon = isIconString ? getIcon(icon) : null;
     const hasCustomIcon = !isIconString && icon != null;
     const sizeConfig = ICON_SIZES[iconSize];
-    const isExternal = href?.startsWith('http') || href?.startsWith('//');
+    const isExternal = href ? isExternalLink(href) : false;
     const docsNav = useDocsNavigation();
-    // Check if this is a tab switch link (/api-reference, /changelog)
-    const isTabSwitchLink = (href === '/api-reference' || href === '/changelog') && docsNav?.isApiDocsView;
-    // Check if this is an internal docs link (starts with / but not external or tab switch)
-    const isInternalDocsLink = href?.startsWith('/') && !isExternal && !isTabSwitchLink && docsNav?.isApiDocsView;
-    // Extract slug from href - removes /docs/ prefix if present, or just the leading /
-    const getSlugFromHref = (path)=>{
-        let slug = path;
-        if (slug.startsWith('/docs/')) {
-            slug = slug.slice(6); // Remove '/docs/'
-        } else if (slug.startsWith('/')) {
-            slug = slug.slice(1); // Remove leading '/'
-        }
-        return slug;
-    };
-    // Get tab ID from href
-    const getTabIdFromHref = (path)=>{
-        if (path === '/api-reference') return 'api-reference';
-        if (path === '/changelog') return 'changelog';
-        return 'docs';
-    };
-    // Handle click for internal navigation
-    const handleClick = (e)=>{
-        if (!href || !docsNav) return;
-        if (isTabSwitchLink) {
-            e.preventDefault();
-            const tabId = getTabIdFromHref(href);
-            docsNav.switchToTab(tabId);
-        } else if (isInternalDocsLink) {
-            e.preventDefault();
-            const slug = getSlugFromHref(href);
-            docsNav.navigateToPage(slug);
-        }
-    };
+    // Resolve link using shared utility
+    const resolvedHref = React.useMemo(()=>{
+        if (!href) return href;
+        return resolveLink(href, {
+            activeTab: docsNav?.activeTab,
+            tabIds: docsNav?.tabIds
+        });
+    }, [
+        href,
+        docsNav?.activeTab,
+        docsNav?.tabIds
+    ]);
     const showArrow = arrow ?? isExternal;
     const cardContent = /*#__PURE__*/ _jsxs("div", {
         className: cn('docs-card group relative rounded-lg border border-border bg-transparent p-4 transition-all h-full', href && 'hover:border-primary/50 hover:bg-muted/30 cursor-pointer', horizontal ? 'docs-card-horizontal flex items-start gap-4' : 'flex flex-col justify-start', className),
@@ -141,18 +121,9 @@ export function Card({ title, children, icon, iconSize = 'md', href, horizontal
                 children: cardContent
             });
         }
-        // For internal docs links or tab switch links in ApiDocs view, use click handler
-        if (isInternalDocsLink || isTabSwitchLink) {
-            return /*#__PURE__*/ _jsx("a", {
-                href: href,
-                onClick: handleClick,
-                className: "docs-card-link block h-full cursor-pointer",
-                children: cardContent
-            });
-        }
-        // Standard Next.js Link for all other internal links
+        // Standard Next.js Link for all internal links (using resolved href)
         return /*#__PURE__*/ _jsx(Link, {
-            href: href,
+            href: resolvedHref || href,
             className: "docs-card-link block h-full",
             children: cardContent
         });

package/renderer/components/docs/mdx/file-tree.js

@@ -0,0 +1,102 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { cn } from '@/lib/utils';
+import { File as FileIcon, Folder as FolderIcon, FolderOpen as FolderOpenIcon } from '@phosphor-icons/react';
+// Context to track nesting depth
+const DepthContext = /*#__PURE__*/ React.createContext(0);
+export function FileTree({ children, className }) {
+    return /*#__PURE__*/ _jsx("div", {
+        className: cn('file-tree my-4 rounded-lg border border-border bg-muted/30 p-4 font-mono text-sm', className),
+        children: /*#__PURE__*/ _jsx(DepthContext.Provider, {
+            value: 0,
+            children: children
+        })
+    });
+}
+export function Folder({ name, children, defaultOpen = true, comment }) {
+    const [isOpen, setIsOpen] = React.useState(defaultOpen);
+    const depth = React.useContext(DepthContext);
+    const childArray = React.Children.toArray(children);
+    const hasChildren = childArray.length > 0;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "file-tree-folder",
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: cn('flex items-center gap-2 py-0.5 hover:bg-muted/50 rounded cursor-pointer', depth > 0 && 'ml-4'),
+                style: {
+                    paddingLeft: depth > 0 ? `${(depth - 1) * 16}px` : 0
+                },
+                onClick: ()=>hasChildren && setIsOpen(!isOpen),
+                children: [
+                    depth > 0 && /*#__PURE__*/ _jsx("span", {
+                        className: "text-muted-foreground/50 select-none",
+                        children: hasChildren ? isOpen ? '▼' : '▶' : '─'
+                    }),
+                    isOpen && hasChildren ? /*#__PURE__*/ _jsx(FolderOpenIcon, {
+                        className: "h-4 w-4 text-primary shrink-0",
+                        weight: "fill"
+                    }) : /*#__PURE__*/ _jsx(FolderIcon, {
+                        className: "h-4 w-4 text-primary shrink-0",
+                        weight: "fill"
+                    }),
+                    /*#__PURE__*/ _jsxs("span", {
+                        className: "text-foreground",
+                        children: [
+                            name,
+                            "/"
+                        ]
+                    }),
+                    comment && /*#__PURE__*/ _jsxs("span", {
+                        className: "text-muted-foreground ml-2",
+                        children: [
+                            "# ",
+                            comment
+                        ]
+                    })
+                ]
+            }),
+            isOpen && hasChildren && /*#__PURE__*/ _jsx(DepthContext.Provider, {
+                value: depth + 1,
+                children: /*#__PURE__*/ _jsx("div", {
+                    className: "file-tree-children border-l border-border/50 ml-2",
+                    children: children
+                })
+            })
+        ]
+    });
+}
+// Alias for MDX usage
+export { Folder as TreeFolder };
+export function File({ name, comment }) {
+    const depth = React.useContext(DepthContext);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn('flex items-center gap-2 py-0.5 hover:bg-muted/50 rounded', depth > 0 && 'ml-4'),
+        style: {
+            paddingLeft: depth > 0 ? `${(depth - 1) * 16}px` : 0
+        },
+        children: [
+            depth > 0 && /*#__PURE__*/ _jsx("span", {
+                className: "text-muted-foreground/50 select-none",
+                children: "─"
+            }),
+            /*#__PURE__*/ _jsx(FileIcon, {
+                className: "h-4 w-4 text-muted-foreground shrink-0",
+                weight: "regular"
+            }),
+            /*#__PURE__*/ _jsx("span", {
+                className: "text-foreground",
+                children: name
+            }),
+            comment && /*#__PURE__*/ _jsxs("span", {
+                className: "text-muted-foreground ml-2",
+                children: [
+                    "# ",
+                    comment
+                ]
+            })
+        ]
+    });
+}
+// Alias for MDX usage
+export { File as TreeFile };

package/renderer/components/docs/mdx/index.js

@@ -31,6 +31,8 @@ export { Badge } from './badge';
 export { Mermaid } from './mermaid';
 // File Embeds
 export { PDF, Audio, Download } from './file-embeds';
+// File Tree
+export { FileTree, TreeFolder, TreeFile } from './file-tree';
 // Changelog
 export { ChangelogEntry, ChangelogTitle, ChangelogDescription, ChangelogImage, BreakingChange, MoreUpdates, UpdateItem } from './changelog';
 // Landing Page Components
@@ -53,6 +55,7 @@ import { Highlight, Marker, Underline } from './highlight';
 import { Badge } from './badge';
 import { Mermaid } from './mermaid';
 import { PDF, Audio, Download } from './file-embeds';
+import { FileTree, TreeFolder, TreeFile } from './file-tree';
 import { ChangelogEntry, ChangelogTitle, ChangelogDescription, ChangelogImage, BreakingChange, MoreUpdates, UpdateItem } from './changelog';
 import { Hero, Pre, Tagline, Headline, Description, CommandBox, Section, Center, FeatureGrid, FeatureItem, ButtonLink, Spacer, Divider } from './landing';
 export const mdxComponents = {
@@ -108,6 +111,10 @@ export const mdxComponents = {
     PDF,
     Audio,
     Download,
+    // File Tree
+    FileTree,
+    Folder: TreeFolder,
+    File: TreeFile,
     // Changelog
     ChangelogEntry,
     ChangelogTitle,

package/renderer/components/docs-viewer/agent/agent-chat.js

@@ -6,13 +6,14 @@ import { DefaultChatTransport, lastAssistantMessageIsCompleteWithToolCalls } fro
 import { ArrowUp, Square, Image as ImageIcon, X } from '@phosphor-icons/react';
 import { Button } from '@/components/ui/button';
 import { encodeCardMessage, detectErrorType } from './cards';
-import { buildEndpointIndex, searchEndpoints, findRequestById, formatRequestForAI } from '@/lib/api-docs/agent/indexer';
+import { searchEndpoints, findRequestById, formatRequestForAI } from '@/lib/api-docs/agent/indexer';
 import { ChatMessage, TypingIndicator } from './chat-message';
 import { cn } from '@/lib/utils';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { useModeContext, useNotes, useWorkspace } from '@/lib/api-docs/code-editor';
 import { useCurrentRequestPayload, useSendTrigger } from '@/lib/api-docs/playground/context';
 import { useSuggestions } from '@/lib/api-docs/agent/use-suggestions';
+import { useMobile } from '@/lib/api-docs/mobile-context';
 /**
  * Custom transport that intercepts streaming events for write_file tool
  * Wraps DefaultChatTransport and intercepts the stream to extract write_file content
@@ -129,7 +130,7 @@ import { useSuggestions } from '@/lib/api-docs/agent/use-suggestions';
 }
 // Storage key for chat history
 const CHAT_STORAGE_KEY = 'brainfish-agent-chat';
-export function AgentChat({ collection, currentEndpoint, onNavigate, onPrefill, apiSummary, debugContext, onDebugContextConsumed, explainContext, onExplainContextConsumed, onOpenGlobalAuth, onNavigateToAuthTab, onNavigateToParamsTab, onNavigateToBodyTab, onNavigateToHeadersTab, onNavigateToDocSection, onNavigateToDocPage, onHasMessagesChange }) {
+export function AgentChat({ collection, currentEndpoint, onNavigate, onPrefill, onPrefillGraphQLVariables, graphqlPlaygroundState, apiSummary, debugContext, onDebugContextConsumed, explainContext, onExplainContextConsumed, onOpenGlobalAuth, onNavigateToAuthTab, onNavigateToParamsTab, onNavigateToBodyTab, onNavigateToHeadersTab, onNavigateToDocSection, onNavigateToDocPage, onHasMessagesChange }) {
     const messagesEndRef = useRef(null);
     const textareaRef = useRef(null);
     const processedDebugRef = useRef(null);
@@ -144,16 +145,21 @@ export function AgentChat({ collection, currentEndpoint, onNavigate, onPrefill,
     const apiSpecUrl = process.env.NEXT_PUBLIC_OPENAPI_URL || collection.name || 'default';
     const { workspace } = useWorkspace(apiSpecUrl, collection.name);
     const { notes, createNote, updateNote, deleteNote, deleteAllNotes, refresh: refreshNotes } = useNotes(workspace?.id || null);
-    // Build endpoint index for search
-    const endpointIndex = useMemo(()=>buildEndpointIndex(collection), [
-        collection
+    // Use endpoint index from collection (pre-built by Collections API)
+    const endpointIndex = useMemo(()=>collection.endpointIndex || [], [
+        collection.endpointIndex
     ]);
-    // Suggestions - use shared hook
-    const { suggestions, isLoading: loadingSuggestions } = useSuggestions({
-        currentEndpoint: currentEndpoint ? {
+    // Memoize currentEndpoint for suggestions to prevent unnecessary re-fetches
+    const currentEndpointForSuggestions = useMemo(()=>currentEndpoint ? {
             id: currentEndpoint.id,
             name: currentEndpoint.name
-        } : null,
+        } : null, [
+        currentEndpoint?.id,
+        currentEndpoint?.name
+    ]);
+    // Suggestions - use shared hook
+    const { suggestions, isLoading: loadingSuggestions } = useSuggestions({
+        currentEndpoint: currentEndpointForSuggestions,
         endpointIndex
     });
     const [showSuggestions, setShowSuggestions] = useState(true);
@@ -161,6 +167,8 @@ export function AgentChat({ collection, currentEndpoint, onNavigate, onPrefill,
     const { currentRequestPayload } = useCurrentRequestPayload();
     // Send trigger - to invoke playground's send button
     const { requestSend } = useSendTrigger();
+    // Initial prompt from suggestion click
+    const { initialPrompt, clearInitialPrompt } = useMobile();
     // Handler to open a file from chat (when user clicks on file name in tool display)
     const handleOpenFile = useCallback((path)=>{
         switchToNotes(path); // Pass path directly to avoid URL reset
@@ -353,6 +361,9 @@ export function AgentChat({ collection, currentEndpoint, onNavigate, onPrefill,
                             const nameLower = ep.name.toLowerCase();
                             const pathLower = ep.path.toLowerCase();
                             const descLower = (ep.description || '').toLowerCase();
+                            const paramsLower = ep.parameters.map((p)=>p.toLowerCase());
+                            const tagsLower = ep.tags.map((t)=>t.toLowerCase());
+                            const isGraphQL = ep.type === 'graphql';
                             if (nameLower.includes(queryLower)) score += 100;
                             if (pathLower.includes(queryLower)) score += 80;
                             if (descLower.includes(queryLower)) score += 60;
@@ -361,15 +372,29 @@ export function AgentChat({ collection, currentEndpoint, onNavigate, onPrefill,
                                 if (pathLower.includes(token)) score += 25;
                                 if (descLower.includes(token)) score += 15;
                                 if (ep.method.toLowerCase() === token) score += 30;
+                                // GraphQL-specific scoring: match operation type keywords
+                                if (isGraphQL) {
+                                    const opType = ep.operationType?.toLowerCase();
+                                    if (opType === token || token === 'queries' && opType === 'query' || token === 'mutations' && opType === 'mutation' || token === 'subscriptions' && opType === 'subscription') {
+                                        score += 40;
+                                    }
+                                }
+                                // Match parameters/variables
+                                if (paramsLower.some((p)=>p.includes(token))) score += 25;
+                                // Match tags
+                                if (tagsLower.some((t)=>t.includes(token))) score += 20;
                             }
                             if (score > 0) {
+                                // For GraphQL, show operation type instead of HTTP method
+                                const displayMethod = isGraphQL ? ep.operationType?.toUpperCase() || 'GRAPHQL' : ep.method;
+                                const displayPath = isGraphQL ? `${ep.operationType}:${ep.name}` : ep.path;
                                 results.push({
                                     type: 'endpoint',
                                     id: ep.id,
                                     title: ep.name,
                                     description: ep.description || undefined,
-                                    method: ep.method,
-                                    path: ep.path,
+                                    method: displayMethod,
+                                    path: displayPath,
                                     score
                                 });
                             }
@@ -648,6 +673,20 @@ export function AgentChat({ collection, currentEndpoint, onNavigate, onPrefill,
                         }
                     });
                 }
+                if (toolName === 'prefill_graphql_variables') {
+                    const { variables } = toolInput;
+                    if (onPrefillGraphQLVariables) {
+                        onPrefillGraphQLVariables(variables);
+                    }
+                    addToolOutput({
+                        tool: 'prefill_graphql_variables',
+                        toolCallId,
+                        output: {
+                            success: true,
+                            variables
+                        }
+                    });
+                }
                 if (toolName === 'get_endpoint_details') {
                     const { endpointId } = toolInput;
                     const fullRequest = findRequestById(collection, endpointId);
@@ -697,6 +736,34 @@ export function AgentChat({ collection, currentEndpoint, onNavigate, onPrefill,
                         });
                     }
                 }
+                // Handle get_current_graphql_state tool - returns current GraphQL playground state
+                if (toolName === 'get_current_graphql_state') {
+                    if (graphqlPlaygroundState) {
+                        addToolOutput({
+                            tool: 'get_current_graphql_state',
+                            toolCallId,
+                            output: {
+                                success: true,
+                                query: graphqlPlaygroundState.query,
+                                variables: graphqlPlaygroundState.variables,
+                                response: graphqlPlaygroundState.response,
+                                responseTime: graphqlPlaygroundState.responseTime,
+                                error: graphqlPlaygroundState.error,
+                                isLoading: graphqlPlaygroundState.isLoading,
+                                hasResponse: graphqlPlaygroundState.response !== null
+                            }
+                        });
+                    } else {
+                        addToolOutput({
+                            tool: 'get_current_graphql_state',
+                            toolCallId,
+                            output: {
+                                success: false,
+                                error: 'No GraphQL playground state available. Navigate to a GraphQL operation first.'
+                            }
+                        });
+                    }
+                }
                 // Handle switch_to_notes tool
                 if (toolName === 'switch_to_notes') {
                     switchToNotes();
@@ -1510,6 +1577,17 @@ export function AgentChat({ collection, currentEndpoint, onNavigate, onPrefill,
     }, [
         sendMessage
     ]);
+    // Handle initial prompt from popup suggestion click
+    useEffect(()=>{
+        if (initialPrompt) {
+            handleSuggestionClick(initialPrompt);
+            clearInitialPrompt();
+        }
+    }, [
+        initialPrompt,
+        handleSuggestionClick,
+        clearInitialPrompt
+    ]);
     // Handle delete single message
     const handleDeleteMessage = useCallback((messageId)=>{
         setMessages((prevMessages)=>{

package/renderer/components/docs-viewer/agent/messages/assistant-message.js

@@ -1,16 +1,80 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useMemo } from 'react';
 import { Copy, Check, Trash } from '@phosphor-icons/react';
 import { cn } from '@/lib/utils';
 import { MarkdownRenderer } from '../../shared/markdown-renderer';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { ToolCallDisplay } from './tool-call-display';
+// Primary tools: search, navigate, endpoint operations - shown first
+const PRIMARY_TOOLS = new Set([
+    'search',
+    'search_endpoints',
+    'search_docs',
+    'navigate',
+    'navigate_to_endpoint',
+    'navigate_to_doc_page',
+    'navigate_to_doc_section',
+    'scroll_to_section',
+    'get_endpoint_details',
+    'prefill_parameters',
+    'prefill_graphql_variables',
+    'check_request_validity',
+    'send_request',
+    'switch_to_docs',
+    'switch_to_api_client'
+]);
+// Secondary tools: notes/file operations - shown after primary tools
+const SECONDARY_TOOLS = new Set([
+    'switch_to_notes',
+    'list_notes',
+    'create_folder',
+    'create_file',
+    'open_file',
+    'write_file',
+    'delete_file'
+]);
 export function AssistantMessage({ content, messageId, toolInvocations, isStreaming, onDeleteMessage, onNavigate, onNavigateToDocPage, onOpenFile }) {
+    // Separate tool invocations into primary (query/navigate) and secondary (notes) groups
+    const { primaryTools, secondaryTools } = useMemo(()=>{
+        if (!toolInvocations || toolInvocations.length === 0) {
+            return {
+                primaryTools: [],
+                secondaryTools: []
+            };
+        }
+        const primary = [];
+        const secondary = [];
+        for (const tool of toolInvocations){
+            if (PRIMARY_TOOLS.has(tool.toolName)) {
+                primary.push(tool);
+            } else if (SECONDARY_TOOLS.has(tool.toolName)) {
+                secondary.push(tool);
+            } else {
+                // Unknown tools go to primary by default
+                primary.push(tool);
+            }
+        }
+        return {
+            primaryTools: primary,
+            secondaryTools: secondary
+        };
+    }, [
+        toolInvocations
+    ]);
     return /*#__PURE__*/ _jsxs("div", {
         className: cn("aui-assistant-message-root", "fade-in slide-in-from-bottom-1 animate-in duration-150", "relative mx-auto w-full max-w-[var(--thread-max-width)] py-3"),
         "data-role": "assistant",
         children: [
+            primaryTools.length > 0 && /*#__PURE__*/ _jsx("div", {
+                className: "mb-2 px-2 space-y-1",
+                children: primaryTools.map((tool)=>/*#__PURE__*/ _jsx(ToolCallDisplay, {
+                        tool: tool,
+                        onNavigate: onNavigate,
+                        onNavigateToDocPage: onNavigateToDocPage,
+                        onOpenFile: onOpenFile
+                    }, tool.toolCallId))
+            }),
             content && /*#__PURE__*/ _jsx("div", {
                 className: "aui-assistant-message-content wrap-break-word px-2 text-foreground leading-relaxed",
                 children: /*#__PURE__*/ _jsx("div", {
@@ -20,9 +84,9 @@ export function AssistantMessage({ content, messageId, toolInvocations, isStream
                     })
                 })
             }),
-            toolInvocations && toolInvocations.length > 0 && /*#__PURE__*/ _jsx("div", {
+            secondaryTools.length > 0 && /*#__PURE__*/ _jsx("div", {
                 className: "mt-2 px-2 space-y-1",
-                children: toolInvocations.map((tool)=>/*#__PURE__*/ _jsx(ToolCallDisplay, {
+                children: secondaryTools.map((tool)=>/*#__PURE__*/ _jsx(ToolCallDisplay, {
                         tool: tool,
                         onNavigate: onNavigate,
                         onNavigateToDocPage: onNavigateToDocPage,