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/ExecutionDiagram/tabs/InfoTab.tsx

@@ -80,7 +80,7 @@ export function InfoTab({ processor, executionDetail }: InfoTabProps) {
           <Field label="Duration" value={formatDuration(processor.durationMs)} mono />
 
           <Field label="Endpoint URI" value={processor.processorType} />
-          <Field label="Resolved URI" value="-" />
+          <Field label="Resolved URI" value={processor.resolvedEndpointUri ?? '-'} mono />
           <div />
         </div>
         <Attributes attrs={processor.attributes} />

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, NodeConfig } from './types';
-import type { NodeAction } 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
-        <button
+        className={styles.nodeToolbarBtn}
-          key={a.action}
+        title="Inspect"
-          className={styles.nodeToolbarBtn}
+        onClick={(e) => { e.stopPropagation(); onAction(nodeId, 'inspect'); }}
-          title={a.title}
+      >
-          onClick={(e) => {
+        <Search size={14} />
-            e.stopPropagation();
+      </button>
-            onAction(nodeId, a.action);
+      <button
-          }}
+        className={`${styles.nodeToolbarBtn} ${traceActive ? styles.nodeToolbarBtnActive : ''}`}
-        >
+        title={traceActive ? 'Disable tracing' : 'Enable tracing'}
-          <a.Icon size={14} />
+        onClick={(e) => { e.stopPropagation(); onAction(nodeId, 'toggle-trace'); }}
-        </button>
+        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>
   );
 }

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;

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!)}
           />
         );
       })()}