diff --git a/ui/src/components/ExecutionDiagram/tabs/InfoTab.tsx b/ui/src/components/ExecutionDiagram/tabs/InfoTab.tsx
index 2facbdc4..09685567 100644
--- a/ui/src/components/ExecutionDiagram/tabs/InfoTab.tsx
+++ b/ui/src/components/ExecutionDiagram/tabs/InfoTab.tsx
@@ -80,7 +80,7 @@ export function InfoTab({ processor, executionDetail }: InfoTabProps) {
-
+
diff --git a/ui/src/components/ProcessDiagram/NodeToolbar.tsx b/ui/src/components/ProcessDiagram/NodeToolbar.tsx
index b5cefa0b..28ebfa47 100644
--- a/ui/src/components/ProcessDiagram/NodeToolbar.tsx
+++ b/ui/src/components/ProcessDiagram/NodeToolbar.tsx
@@ -1,10 +1,10 @@
import { useCallback, useRef, useState } from 'react';
import { Search, Footprints, Droplets, Ellipsis } from 'lucide-react';
-import type { LucideIcon } from 'lucide-react';
-import type { NodeAction } from './types';
+import type { NodeAction, NodeConfig } from './types';
import styles from './ProcessDiagram.module.css';
const HIDE_DELAY = 150;
+const TRACE_ACTIVE_COLOR = '#1A7F8E';
interface NodeToolbarProps {
nodeId: string;
@@ -14,18 +14,16 @@ interface NodeToolbarProps {
onAction: (nodeId: string, action: NodeAction) => void;
onMouseEnter: () => void;
onMouseLeave: () => void;
+ /** Current config for this node (trace/tap state) */
+ nodeConfig?: NodeConfig;
}
-const ACTIONS: { Icon: LucideIcon; action: NodeAction; title: string }[] = [
- { Icon: Search, action: 'inspect', title: 'Inspect' },
- { Icon: Footprints, action: 'toggle-trace', title: 'Toggle tracing' },
- { Icon: Droplets, action: 'configure-tap', title: 'Configure tap' },
- { Icon: Ellipsis, action: 'copy-id', title: 'Copy ID' },
-];
-
export function NodeToolbar({
- nodeId, screenX, screenY, onAction, onMouseEnter, onMouseLeave,
+ nodeId, screenX, screenY, onAction, onMouseEnter, onMouseLeave, nodeConfig,
}: NodeToolbarProps) {
+ const traceActive = !!nodeConfig?.traceEnabled;
+ const tapActive = !!nodeConfig?.tapExpression;
+
return (
- {ACTIONS.map(a => (
-
- ))}
+
+
+
+
);
}
diff --git a/ui/src/components/ProcessDiagram/ProcessDiagram.module.css b/ui/src/components/ProcessDiagram/ProcessDiagram.module.css
index 72652a76..3703b30c 100644
--- a/ui/src/components/ProcessDiagram/ProcessDiagram.module.css
+++ b/ui/src/components/ProcessDiagram/ProcessDiagram.module.css
@@ -171,6 +171,10 @@
color: var(--text-primary, #1A1612);
}
+.nodeToolbarBtnActive {
+ background: var(--bg-hover, #F5F0EA);
+}
+
.iterationStepper {
display: flex;
align-items: center;
diff --git a/ui/src/components/ProcessDiagram/ProcessDiagram.tsx b/ui/src/components/ProcessDiagram/ProcessDiagram.tsx
index 8ff191c2..d612ef45 100644
--- a/ui/src/components/ProcessDiagram/ProcessDiagram.tsx
+++ b/ui/src/components/ProcessDiagram/ProcessDiagram.tsx
@@ -395,6 +395,7 @@ export function ProcessDiagram({
onAction={handleNodeAction}
onMouseEnter={toolbar.onToolbarEnter}
onMouseLeave={toolbar.onToolbarLeave}
+ nodeConfig={nodeConfigs?.get(toolbar.hoveredNodeId!)}
/>
);
})()}