diff --git a/src/components/RightPanel.tsx b/src/components/RightPanel.tsx
index 573b9ec201..8e4c07d3fb 100644
--- a/src/components/RightPanel.tsx
+++ b/src/components/RightPanel.tsx
@@ -383,9 +383,9 @@ export const RightPanel = () => {
if (isInline) {
return (
-
- {children}
-
+
+ {children}
+
);
}
diff --git a/src/components/ToolCallCard.tsx b/src/components/ToolCallCard.tsx
index b5b7dedc2d..689d7492b1 100644
--- a/src/components/ToolCallCard.tsx
+++ b/src/components/ToolCallCard.tsx
@@ -5,7 +5,7 @@
* Shows the tool name, status, and when expanded, the query/args and result.
*/
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useMemo } from 'react';
import { ChevronDown, ChevronRight, Sparkles, Check, Loader2, AlertCircle, Eye, EyeOff } from 'lucide-react';
import type { ToolCallInfo } from '../core/llm/types';
import { useAppState } from '../hooks/useAppState';
@@ -111,17 +111,38 @@ const extractHighlightNodeIds = (result: string | undefined): string[] => {
export const ToolCallCard = ({ toolCall, defaultExpanded = false }: ToolCallCardProps) => {
const [isExpanded, setIsExpanded] = useState(defaultExpanded);
- const { highlightedNodeIds, setHighlightedNodeIds } = useAppState();
+ const { highlightedNodeIds, setHighlightedNodeIds, graph } = useAppState();
const status = getStatusDisplay(toolCall.status);
const formattedArgs = formatArgs(toolCall.args);
// Check if this is a highlight tool and extract node IDs
const isHighlightTool = toolCall.name === 'highlight_in_graph';
- const highlightNodeIds = isHighlightTool ? extractHighlightNodeIds(toolCall.result) : [];
+ const rawHighlightNodeIds = isHighlightTool ? extractHighlightNodeIds(toolCall.result) : [];
+
+ // Resolve raw IDs to actual graph node IDs (handles partial ID matching)
+ const resolvedNodeIds = useMemo(() => {
+ if (rawHighlightNodeIds.length === 0 || !graph) return rawHighlightNodeIds;
+
+ const graphNodeIds = graph.nodes.map(n => n.id);
+ const resolved: string[] = [];
+
+ for (const rawId of rawHighlightNodeIds) {
+ if (graphNodeIds.includes(rawId)) {
+ resolved.push(rawId);
+ } else {
+ // Try partial match - find node whose ID ends with the raw ID
+ const found = graphNodeIds.find(gid =>
+ gid.endsWith(rawId) || gid.endsWith(':' + rawId)
+ );
+ if (found) resolved.push(found);
+ }
+ }
+ return resolved;
+ }, [rawHighlightNodeIds, graph]);
// Check if these specific nodes are currently highlighted
- const isHighlightActive = highlightNodeIds.length > 0 &&
- highlightNodeIds.some(id => highlightedNodeIds.has(id));
+ const isHighlightActive = resolvedNodeIds.length > 0 &&
+ resolvedNodeIds.some(id => highlightedNodeIds.has(id));
// Toggle highlight on/off
const toggleHighlight = useCallback((e: React.MouseEvent) => {
@@ -131,9 +152,9 @@ export const ToolCallCard = ({ toolCall, defaultExpanded = false }: ToolCallCard
setHighlightedNodeIds(new Set());
} else {
// Turn on - set these nodes as highlighted
- setHighlightedNodeIds(new Set(highlightNodeIds));
+ setHighlightedNodeIds(new Set(resolvedNodeIds));
}
- }, [isHighlightActive, highlightNodeIds, setHighlightedNodeIds]);
+ }, [isHighlightActive, resolvedNodeIds, setHighlightedNodeIds]);
return (