@@ -187,14 +193,18 @@ export const CodeReferencesPanel = ({ onFocusNode }: CodeReferencesPanelProps) =
{/* Top: Selected file viewer (when a node is selected) */}
{showSelectedViewer && (
-
-
Selected
+
+
+
+ Selected
+
+
- {selectedNode?.properties?.filePath ?? selectedNode?.properties?.name}
+ {selectedNode?.properties?.filePath?.split('/').pop() ?? selectedNode?.properties?.name}
);
};
-
-
diff --git a/src/components/FileTreePanel.tsx b/src/components/FileTreePanel.tsx
index 16ce94a02d..936c856c6d 100644
--- a/src/components/FileTreePanel.tsx
+++ b/src/components/FileTreePanel.tsx
@@ -123,8 +123,8 @@ const TreeItem = ({
onClick={handleClick}
className={`
w-full flex items-center gap-1.5 px-2 py-1 text-left text-sm
- hover:bg-hover transition-colors rounded
- ${isSelected ? 'bg-accent/20 text-accent' : 'text-text-secondary hover:text-text-primary'}
+ hover:bg-hover transition-colors rounded relative
+ ${isSelected ? 'bg-amber-500/15 text-amber-300 border-l-2 border-amber-400' : 'text-text-secondary hover:text-text-primary border-l-2 border-transparent'}
${matchesSearch ? 'bg-accent/10' : ''}
`}
style={{ paddingLeft: `${depth * 12 + 8}px` }}
@@ -216,6 +216,31 @@ export const FileTreePanel = ({ onFocusNode }: FileTreePanelProps) => {
}
}, [fileTree.length]); // Only run when tree first loads
+ // Auto-expand to selected file when selectedNode changes (e.g., from graph click)
+ useEffect(() => {
+ const path = selectedNode?.properties?.filePath;
+ if (!path) return;
+
+ // Expand all parent folders leading to this file
+ const parts = path.split('/').filter(Boolean);
+ const pathsToExpand: string[] = [];
+ let currentPath = '';
+
+ // Build all parent paths (exclude the last part if it's a file)
+ for (let i = 0; i < parts.length - 1; i++) {
+ currentPath = currentPath ? `${currentPath}/${parts[i]}` : parts[i];
+ pathsToExpand.push(currentPath);
+ }
+
+ if (pathsToExpand.length > 0) {
+ setExpandedPaths(prev => {
+ const next = new Set(prev);
+ pathsToExpand.forEach(p => next.add(p));
+ return next;
+ });
+ }
+ }, [selectedNode?.id]); // Trigger when selected node changes
+
const toggleExpanded = useCallback((path: string) => {
setExpandedPaths(prev => {
const next = new Set(prev);
diff --git a/src/components/GraphCanvas.tsx b/src/components/GraphCanvas.tsx
index c53b00ce1f..da28d9514b 100644
--- a/src/components/GraphCanvas.tsx
+++ b/src/components/GraphCanvas.tsx
@@ -1,5 +1,5 @@
-import { useEffect, useCallback, useState, forwardRef, useImperativeHandle } from 'react';
-import { ZoomIn, ZoomOut, Maximize2, Focus, RotateCcw, Play, Pause } from 'lucide-react';
+import { useEffect, useCallback, useMemo, useState, forwardRef, useImperativeHandle } from 'react';
+import { ZoomIn, ZoomOut, Maximize2, Focus, RotateCcw, Play, Pause, Lightbulb, LightbulbOff } from 'lucide-react';
import { useSigma } from '../hooks/useSigma';
import { useAppState } from '../hooks/useAppState';
import { knowledgeGraphToGraphology, filterGraphByDepth, SigmaNodeAttributes, SigmaEdgeAttributes } from '../lib/graph-adapter';
@@ -11,8 +11,28 @@ export interface GraphCanvasHandle {
}
export const GraphCanvas = forwardRef
((_, ref) => {
- const { graph, setSelectedNode, selectedNode: appSelectedNode, visibleLabels, openCodePanel, depthFilter, highlightedNodeIds } = useAppState();
+ const {
+ graph,
+ setSelectedNode,
+ selectedNode: appSelectedNode,
+ visibleLabels,
+ openCodePanel,
+ depthFilter,
+ highlightedNodeIds,
+ aiCitationHighlightedNodeIds,
+ aiToolHighlightedNodeIds,
+ isAIHighlightsEnabled,
+ toggleAIHighlights,
+ } = useAppState();
const [hoveredNodeName, setHoveredNodeName] = useState(null);
+
+ const effectiveHighlightedNodeIds = useMemo(() => {
+ if (!isAIHighlightsEnabled) return highlightedNodeIds;
+ const next = new Set(highlightedNodeIds);
+ for (const id of aiCitationHighlightedNodeIds) next.add(id);
+ for (const id of aiToolHighlightedNodeIds) next.add(id);
+ return next;
+ }, [highlightedNodeIds, aiCitationHighlightedNodeIds, aiToolHighlightedNodeIds, isAIHighlightsEnabled]);
const handleNodeClick = useCallback((nodeId: string) => {
if (!graph) return;
@@ -55,7 +75,7 @@ export const GraphCanvas = forwardRef((_, ref) => {
onNodeClick: handleNodeClick,
onNodeHover: handleNodeHover,
onStageClick: handleStageClick,
- highlightedNodeIds,
+ highlightedNodeIds: effectiveHighlightedNodeIds,
});
// Expose focusNode to parent via ref
@@ -244,6 +264,21 @@ export const GraphCanvas = forwardRef((_, ref) => {
{/* Query FAB */}
+
+ {/* AI Highlights toggle - Top Right */}
+
+
+
);
});
diff --git a/src/components/MermaidDiagram.tsx b/src/components/MermaidDiagram.tsx
new file mode 100644
index 0000000000..65b308b0b0
--- /dev/null
+++ b/src/components/MermaidDiagram.tsx
@@ -0,0 +1,139 @@
+import { useEffect, useRef, useState } from 'react';
+import mermaid from 'mermaid';
+import { AlertTriangle, Maximize2, Minimize2 } from 'lucide-react';
+
+// Initialize mermaid with dark theme
+mermaid.initialize({
+ startOnLoad: false,
+ theme: 'dark',
+ themeVariables: {
+ primaryColor: '#06b6d4',
+ primaryTextColor: '#e4e4ed',
+ primaryBorderColor: '#1e1e2a',
+ lineColor: '#3b3b54',
+ secondaryColor: '#1e1e2a',
+ tertiaryColor: '#0a0a10',
+ background: '#0a0a10',
+ mainBkg: '#0f0f18',
+ nodeBorder: '#3b3b54',
+ clusterBkg: '#1e1e2a',
+ titleColor: '#e4e4ed',
+ edgeLabelBackground: '#0f0f18',
+ nodeTextColor: '#e4e4ed',
+ },
+ flowchart: {
+ curve: 'basis',
+ padding: 15,
+ nodeSpacing: 50,
+ rankSpacing: 50,
+ },
+ sequence: {
+ actorMargin: 50,
+ boxMargin: 10,
+ boxTextMargin: 5,
+ noteMargin: 10,
+ messageMargin: 35,
+ },
+ fontFamily: '"JetBrains Mono", "Fira Code", monospace',
+ fontSize: 13,
+});
+
+interface MermaidDiagramProps {
+ code: string;
+}
+
+export const MermaidDiagram = ({ code }: MermaidDiagramProps) => {
+ const containerRef = useRef
(null);
+ const [error, setError] = useState(null);
+ const [isExpanded, setIsExpanded] = useState(false);
+ const [svg, setSvg] = useState('');
+
+ useEffect(() => {
+ const renderDiagram = async () => {
+ if (!containerRef.current) return;
+
+ try {
+ // Generate unique ID for this diagram
+ const id = `mermaid-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+
+ // Render the diagram
+ const { svg: renderedSvg } = await mermaid.render(id, code.trim());
+ setSvg(renderedSvg);
+ setError(null);
+ } catch (err) {
+ console.error('Mermaid render error:', err);
+ setError(err instanceof Error ? err.message : 'Failed to render diagram');
+ setSvg('');
+ }
+ };
+
+ renderDiagram();
+ }, [code]);
+
+ if (error) {
+ return (
+
+
+
{error}
+
+
+ Show source
+
+
+ {code}
+
+
+
+ {/* Backdrop for expanded view */}
+ {isExpanded && (
+
setIsExpanded(false)}
+ />
+ )}
+
+
+ {/* Header */}
+
+
+ Diagram
+
+
+
+
+ {/* Diagram container */}
+
+
+
+ );
+};
+
diff --git a/src/core/llm/agent.ts b/src/core/llm/agent.ts
index 22c1af6963..f004805f12 100644
--- a/src/core/llm/agent.ts
+++ b/src/core/llm/agent.ts
@@ -33,7 +33,8 @@ import type {
const SYSTEM_PROMPT = `You are Nexus, a code analysis agent. You explore codebases through a graph database and source files.
**EXTREMELY IMPORTANT NOTE** : Even if there is a small chance of giving better context/understanding to the user using the highlight tool be extremely sure to use it. You can figure out yourself how do u use it in the specific context.
-Always output in proper markdown formatting
+- Always output in proper markdown formatting
+- Always use grounding reference
## THINK ALOUD
@@ -68,6 +69,27 @@ You are diligent and tireless.
\`execute_cypher\` - graph structure queries
\`highlight_in_graph\` - highlight nodes for the user (they see a visual graph)
+## MERMAID DIAGRAMS
+
+Use mermaid diagrams when explaining:
+- **Architecture** - show component relationships with flowcharts or C4 diagrams
+- **Data flows** - illustrate how data moves through the system
+- **Call sequences** - show function call chains with sequence diagrams
+- **Class hierarchies** - display inheritance/composition with class diagrams
+- **State machines** - visualize state transitions
+
+Format: wrap in \`\`\`mermaid code blocks. Keep diagrams focused - 5-10 nodes max for clarity.
+
+Example:
+\`\`\`mermaid
+flowchart LR
+ A[API Handler] --> B[Service Layer]
+ B --> C[Database]
+ B --> D[Cache]
+\`\`\`
+
+Prefer diagrams over long textual explanations for structural concepts.
+
## GROUNDING REFERENCES
When you cite code, include inline file references so the UI can surface the code automatically:
diff --git a/src/core/search/hybrid-search.ts b/src/core/search/hybrid-search.ts
index 5e37a8fcd8..247bb27833 100644
--- a/src/core/search/hybrid-search.ts
+++ b/src/core/search/hybrid-search.ts
@@ -146,3 +146,4 @@ export const formatHybridResults = (results: HybridSearchResult[]): string => {
+
diff --git a/src/core/search/index.ts b/src/core/search/index.ts
index 677aaaf8b8..9c2dfc4ee8 100644
--- a/src/core/search/index.ts
+++ b/src/core/search/index.ts
@@ -22,3 +22,4 @@ export {
+
diff --git a/src/hooks/useAppState.tsx b/src/hooks/useAppState.tsx
index a7d9f5a4e8..3f034a7494 100644
--- a/src/hooks/useAppState.tsx
+++ b/src/hooks/useAppState.tsx
@@ -67,6 +67,12 @@ interface AppState {
// Query state
highlightedNodeIds: Set
;
setHighlightedNodeIds: (ids: Set) => void;
+ // AI highlights (toggable)
+ aiCitationHighlightedNodeIds: Set;
+ aiToolHighlightedNodeIds: Set;
+ isAIHighlightsEnabled: boolean;
+ toggleAIHighlights: () => void;
+ clearAIToolHighlights: () => void;
queryResult: QueryResult | null;
setQueryResult: (result: QueryResult | null) => void;
clearQueryHighlights: () => void;
@@ -165,6 +171,19 @@ export const AppStateProvider = ({ children }: { children: ReactNode }) => {
// Query state
const [highlightedNodeIds, setHighlightedNodeIds] = useState>(new Set());
const [queryResult, setQueryResult] = useState(null);
+
+ // AI highlights (separate from user/query highlights)
+ const [aiCitationHighlightedNodeIds, setAICitationHighlightedNodeIds] = useState>(new Set());
+ const [aiToolHighlightedNodeIds, setAIToolHighlightedNodeIds] = useState>(new Set());
+ const [isAIHighlightsEnabled, setAIHighlightsEnabled] = useState(true);
+
+ const toggleAIHighlights = useCallback(() => {
+ setAIHighlightsEnabled(prev => !prev);
+ }, []);
+
+ const clearAIToolHighlights = useCallback(() => {
+ setAIToolHighlightedNodeIds(new Set());
+ }, []);
const clearQueryHighlights = useCallback(() => {
setHighlightedNodeIds(new Set());
@@ -265,9 +284,9 @@ export const AppStateProvider = ({ children }: { children: ReactNode }) => {
// Auto-open panel when references are added
setCodePanelOpen(true);
- // Also highlight in graph if nodeId provided
- if (ref.nodeId) {
- setHighlightedNodeIds(prev => new Set([...prev, ref.nodeId!]));
+ // Track AI highlights separately so they can be toggled off in the UI
+ if (ref.nodeId && ref.source === 'ai') {
+ setAICitationHighlightedNodeIds(prev => new Set([...prev, ref.nodeId!]));
}
}, []);
@@ -277,18 +296,12 @@ export const AppStateProvider = ({ children }: { children: ReactNode }) => {
const removed = prev.filter(r => r.source === 'ai');
const kept = prev.filter(r => r.source !== 'ai');
- // Update graph highlights: remove nodeIds that were ONLY highlighted via AI refs
+ // Remove citation-based AI highlights for removed refs
const removedNodeIds = new Set(removed.map(r => r.nodeId).filter(Boolean) as string[]);
if (removedNodeIds.size > 0) {
- setHighlightedNodeIds(prevHighlights => {
- const next = new Set(prevHighlights);
- for (const nodeId of removedNodeIds) {
- const stillReferenced = kept.some(r => r.nodeId === nodeId);
- const stillInQuery = queryResult?.nodeIds?.includes(nodeId) ?? false;
- if (!stillReferenced && !stillInQuery) {
- next.delete(nodeId);
- }
- }
+ setAICitationHighlightedNodeIds(prevIds => {
+ const next = new Set(prevIds);
+ for (const id of removedNodeIds) next.delete(id);
return next;
});
}
@@ -490,6 +503,8 @@ export const AppStateProvider = ({ children }: { children: ReactNode }) => {
// Refresh Code panel for the new question: keep user-pinned refs, clear old AI citations
clearAICodeReferences();
+ // Also clear previous tool-driven AI highlights (highlight_in_graph)
+ clearAIToolHighlights();
if (!isAgentReady) {
// Try to initialize first
@@ -734,10 +749,10 @@ export const AppStateProvider = ({ children }: { children: ReactNode }) => {
}
if (matchedIds.size > 0) {
- setHighlightedNodeIds(matchedIds);
+ setAIToolHighlightedNodeIds(matchedIds);
}
} else if (rawIds.length > 0) {
- setHighlightedNodeIds(new Set(rawIds));
+ setAIToolHighlightedNodeIds(new Set(rawIds));
}
}
}
@@ -763,7 +778,7 @@ export const AppStateProvider = ({ children }: { children: ReactNode }) => {
setIsChatLoading(false);
setCurrentToolCalls([]);
}
- }, [chatMessages, isAgentReady, initializeAgent, resolveFilePath, findFileNodeId, addCodeReference, clearAICodeReferences]);
+ }, [chatMessages, isAgentReady, initializeAgent, resolveFilePath, findFileNodeId, addCodeReference, clearAICodeReferences, clearAIToolHighlights, graph]);
const clearChat = useCallback(() => {
setChatMessages([]);
@@ -776,11 +791,11 @@ export const AppStateProvider = ({ children }: { children: ReactNode }) => {
const ref = prev.find(r => r.id === id);
const newRefs = prev.filter(r => r.id !== id);
- // Remove highlight if this was the only reference to that node
- if (ref?.nodeId) {
- const stillReferenced = newRefs.some(r => r.nodeId === ref.nodeId);
+ // Remove AI citation highlight if this was the only AI reference to that node
+ if (ref?.nodeId && ref.source === 'ai') {
+ const stillReferenced = newRefs.some(r => r.nodeId === ref.nodeId && r.source === 'ai');
if (!stillReferenced) {
- setHighlightedNodeIds(prev => {
+ setAICitationHighlightedNodeIds(prev => {
const next = new Set(prev);
next.delete(ref.nodeId!);
return next;
@@ -833,6 +848,11 @@ export const AppStateProvider = ({ children }: { children: ReactNode }) => {
setDepthFilter,
highlightedNodeIds,
setHighlightedNodeIds,
+ aiCitationHighlightedNodeIds,
+ aiToolHighlightedNodeIds,
+ isAIHighlightsEnabled,
+ toggleAIHighlights,
+ clearAIToolHighlights,
queryResult,
setQueryResult,
clearQueryHighlights,