Add visible View Route Diagram button in execution detail row

Replace hidden Ctrl+Click navigation with an explicit button in the
expanded detail sidebar so users can discover the route diagram page.

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

ui/src/pages/executions/ResultsTable.module.css

@@ -112,6 +112,39 @@
   gap: 24px;
 }
 
+.detailMain {
+  flex: 1;
+  min-width: 0;
+}
+
+.detailSide {
+  width: 280px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.diagramBtn {
+  padding: 8px 16px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--amber-dim);
+  background: var(--amber-glow);
+  color: var(--amber);
+  font-size: 12px;
+  font-weight: 600;
+  font-family: var(--font-mono);
+  cursor: pointer;
+  transition: all 0.15s;
+  text-align: center;
+}
+
+.diagramBtn:hover {
+  background: var(--amber);
+  color: var(--bg-deep);
+  border-color: var(--amber);
+}
+
 /* ─── Loading / Empty ─── */
 .emptyState {
   text-align: center;
@@ -130,4 +163,5 @@
 
 @media (max-width: 1200px) {
   .detailContent { flex-direction: column; }
+  .detailSide { width: 100%; }
 }

ui/src/pages/executions/ResultsTable.tsx

@@ -65,10 +65,7 @@ export function ResultsTable({ results, loading }: ResultsTableProps) {
   }
 
   /** Navigate to route diagram page with execution overlay */
-  function handleDiagramNav(exec: ExecutionSummary, e: React.MouseEvent) {
+  function handleDiagramNav(exec: ExecutionSummary) {
-    // Only navigate on double-click or if holding Ctrl/Cmd
-    if (!e.ctrlKey && !e.metaKey) return;
-
     // Resolve agentId → group from agent registry
     const agent = agents?.find((a) => a.id === exec.agentId);
     const group = agent?.group ?? 'default';
@@ -115,7 +112,7 @@ export function ResultsTable({ results, loading }: ResultsTableProps) {
                 exec={exec}
                 isExpanded={isExpanded}
                 onToggle={() => setExpandedId(isExpanded ? null : exec.executionId)}
-                onDiagramNav={(e) => handleDiagramNav(exec, e)}
+                onDiagramNav={() => handleDiagramNav(exec)}
               />
             );
           })}
@@ -134,20 +131,13 @@ function ResultRow({
   exec: ExecutionSummary;
   isExpanded: boolean;
   onToggle: () => void;
-  onDiagramNav: (e: React.MouseEvent) => void;
+  onDiagramNav: () => void;
 }) {
   return (
     <>
       <tr
         className={`${styles.row} ${isExpanded ? styles.expanded : ''}`}
-        onClick={(e) => {
+        onClick={onToggle}
-          if (e.ctrlKey || e.metaKey) {
-            onDiagramNav(e);
-          } else {
-            onToggle();
-          }
-        }}
-        title="Click to expand, Ctrl+Click to open diagram"
       >
         <td className={`${styles.td} ${styles.tdExpand}`}>&rsaquo;</td>
         <td className={`${styles.td} mono`}>{formatTime(exec.startTime)}</td>
@@ -169,8 +159,15 @@ function ResultRow({
         <tr className={styles.detailRowVisible}>
           <td className={styles.detailCell} colSpan={7}>
             <div className={styles.detailContent}>
-              <ProcessorTree executionId={exec.executionId} />
+              <div className={styles.detailMain}>
-              <ExchangeDetail execution={exec} />
+                <ProcessorTree executionId={exec.executionId} />
+              </div>
+              <div className={styles.detailSide}>
+                <ExchangeDetail execution={exec} />
+                <button className={styles.diagramBtn} onClick={(e) => { e.stopPropagation(); onDiagramNav(); }}>
+                  View Route Diagram
+                </button>
+              </div>
             </div>
           </td>
         </tr>