From 7553139cf2770a1e1eca51c02644c0f8749e662e Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sat, 14 Mar 2026 21:44:47 +0100
Subject: [PATCH] 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>
---
 .../pages/executions/ResultsTable.module.css  | 34 +++++++++++++++++++
 ui/src/pages/executions/ResultsTable.tsx      | 29 +++++++---------
 2 files changed, 47 insertions(+), 16 deletions(-)

diff --git a/ui/src/pages/executions/ResultsTable.module.css b/ui/src/pages/executions/ResultsTable.module.css
index 10ce542e..90b5a33a 100644
--- a/ui/src/pages/executions/ResultsTable.module.css
+++ b/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%; }
 }
diff --git a/ui/src/pages/executions/ResultsTable.tsx b/ui/src/pages/executions/ResultsTable.tsx
index d9a7a762..3dcc8f5e 100644
--- a/ui/src/pages/executions/ResultsTable.tsx
+++ b/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) {
-    // Only navigate on double-click or if holding Ctrl/Cmd
-    if (!e.ctrlKey && !e.metaKey) return;
-
+  function handleDiagramNav(exec: ExecutionSummary) {
     // 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) => {
-          if (e.ctrlKey || e.metaKey) {
-            onDiagramNav(e);
-          } else {
-            onToggle();
-          }
-        }}
-        title="Click to expand, Ctrl+Click to open diagram"
+        onClick={onToggle}
       >
         <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} />
-              <ExchangeDetail execution={exec} />
+              <div className={styles.detailMain}>
+                <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>