From c77de4a232b5d451b468b48baf39e7d2cfc68a3f Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Mon, 30 Mar 2026 16:40:18 +0200
Subject: [PATCH] fix: simplify detail panel header to just "Details"
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remove redundant processor name, status, ID, and duration from the
header bar — all visible in the Info tab and diagram overlay already.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../ExecutionDiagram/DetailPanel.tsx          | 28 ++-----------------
 1 file changed, 2 insertions(+), 26 deletions(-)

diff --git a/ui/src/components/ExecutionDiagram/DetailPanel.tsx b/ui/src/components/ExecutionDiagram/DetailPanel.tsx
index 1b06820e..4b9d027f 100644
--- a/ui/src/components/ExecutionDiagram/DetailPanel.tsx
+++ b/ui/src/components/ExecutionDiagram/DetailPanel.tsx
@@ -28,19 +28,6 @@ const TABS: { key: DetailTab; label: string }[] = [
   { key: 'log', label: 'Log' },
 ];
 
-function formatDuration(ms: number | undefined): string {
-  if (ms === undefined || ms === null) return '-';
-  if (ms < 1000) return `${ms}ms`;
-  return `${(ms / 1000).toFixed(1)}s`;
-}
-
-function statusClass(status: string): string {
-  const s = status?.toUpperCase();
-  if (s === 'COMPLETED') return styles.statusCompleted;
-  if (s === 'FAILED') return styles.statusFailed;
-  return '';
-}
-
 export function DetailPanel({
   selectedProcessor,
   executionDetail,
@@ -99,22 +86,11 @@ export function DetailPanel({
     if (activeTab === 'output' && !hasOutput) setActiveTab('info');
   }, [hasHeaders, hasInput, hasOutput, activeTab]);
 
-  // Header display
-  const headerName = selectedProcessor ? selectedProcessor.processorType : 'Exchange';
-  const headerStatus = selectedProcessor ? selectedProcessor.status : executionDetail.status;
-  const headerId = selectedProcessor ? selectedProcessor.processorId : executionDetail.executionId;
-  const headerDuration = selectedProcessor ? selectedProcessor.durationMs : executionDetail.durationMs;
-
   return (
     <div className={styles.detailPanel}>
-      {/* Processor / Exchange header bar */}
+      {/* Header bar */}
       <div className={styles.processorHeader}>
-        <span className={styles.processorName}>{headerName}</span>
-        <span className={`${styles.statusBadge} ${statusClass(headerStatus)}`}>
-          {headerStatus}
-        </span>
-        <span className={styles.processorId}>{headerId}</span>
-        <span className={styles.processorDuration}>{formatDuration(headerDuration)}</span>
+        <span className={styles.processorName}>Details</span>
       </div>
 
       {/* Tab bar */}