fix: show resolvedEndpointUri in info tab, reflect trace/tap state in toolbar

- Info tab now reads processor.resolvedEndpointUri instead of hardcoded "-"
- Toolbar buttons highlight in teal/purple when trace/tap is active
- Tooltip changes to "Disable tracing" / "Edit tap" when active

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

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 (
     <div
       className={styles.nodeToolbar}
@@ -33,19 +31,36 @@ export function NodeToolbar({
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
     >
-      {ACTIONS.map(a => (
-        <button
-          key={a.action}
-          className={styles.nodeToolbarBtn}
-          title={a.title}
-          onClick={(e) => {
-            e.stopPropagation();
-            onAction(nodeId, a.action);
-          }}
-        >
-          <a.Icon size={14} />
-        </button>
-      ))}
+      <button
+        className={styles.nodeToolbarBtn}
+        title="Inspect"
+        onClick={(e) => { e.stopPropagation(); onAction(nodeId, 'inspect'); }}
+      >
+        <Search size={14} />
+      </button>
+      <button
+        className={`${styles.nodeToolbarBtn} ${traceActive ? styles.nodeToolbarBtnActive : ''}`}
+        title={traceActive ? 'Disable tracing' : 'Enable tracing'}
+        onClick={(e) => { e.stopPropagation(); onAction(nodeId, 'toggle-trace'); }}
+        style={traceActive ? { color: TRACE_ACTIVE_COLOR } : undefined}
+      >
+        <Footprints size={14} />
+      </button>
+      <button
+        className={`${styles.nodeToolbarBtn} ${tapActive ? styles.nodeToolbarBtnActive : ''}`}
+        title={tapActive ? 'Edit tap' : 'Configure tap'}
+        onClick={(e) => { e.stopPropagation(); onAction(nodeId, 'configure-tap'); }}
+        style={tapActive ? { color: '#7C3AED' } : undefined}
+      >
+        <Droplets size={14} />
+      </button>
+      <button
+        className={styles.nodeToolbarBtn}
+        title="Copy ID"
+        onClick={(e) => { e.stopPropagation(); onAction(nodeId, 'copy-id'); }}
+      >
+        <Ellipsis size={14} />
+      </button>
     </div>
   );
 }