From 9d1cf7577ac7b382b30e2c0e4a8bd3458eedd18e Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Thu, 16 Apr 2026 13:52:42 +0200
Subject: [PATCH] feat: overlay z-index fix, app name navigation, TPS on
 compact cards

- Bump overlay z-index to 100 so it renders above the sidebar
- App name in compact card navigates to /runtime/{slug} on click
- Add TPS (msg/s) as third metric on compact cards between live
  count and heartbeat

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ui/src/pages/AgentHealth/AgentHealth.module.css | 13 ++++++++++++-
 ui/src/pages/AgentHealth/AgentHealth.tsx        | 14 ++++++++++++--
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/ui/src/pages/AgentHealth/AgentHealth.module.css b/ui/src/pages/AgentHealth/AgentHealth.module.css
index 37efb44b..b09ca181 100644
--- a/ui/src/pages/AgentHealth/AgentHealth.module.css
+++ b/ui/src/pages/AgentHealth/AgentHealth.module.css
@@ -292,6 +292,12 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  cursor: pointer;
+}
+
+.compactCardName:hover {
+  text-decoration: underline;
+  color: var(--running);
 }
 
 .compactCardChevron {
@@ -310,6 +316,11 @@
   color: var(--card-accent);
 }
 
+.compactCardTps {
+  font-family: var(--font-mono);
+  color: var(--text-muted);
+}
+
 .compactCardHeartbeat {
   color: var(--text-muted);
 }
@@ -326,7 +337,7 @@
 /* Expanded card overlay — floats from the clicked card */
 .compactGridExpanded {
   position: absolute;
-  z-index: 10;
+  z-index: 100;
   top: 0;
   left: 0;
   min-width: 500px;
diff --git a/ui/src/pages/AgentHealth/AgentHealth.tsx b/ui/src/pages/AgentHealth/AgentHealth.tsx
index bf0ea7af..bee2cbbc 100644
--- a/ui/src/pages/AgentHealth/AgentHealth.tsx
+++ b/ui/src/pages/AgentHealth/AgentHealth.tsx
@@ -106,7 +106,7 @@ const LOG_SOURCE_ITEMS: ButtonGroupItem[] = [
   { value: 'container', label: 'Container' },
 ];
 
-function CompactAppCard({ group, onExpand }: { group: AppGroup; onExpand: () => void }) {
+function CompactAppCard({ group, onExpand, onNavigate }: { group: AppGroup; onExpand: () => void; onNavigate: () => void }) {
   const health = appHealth(group);
   const heartbeat = latestHeartbeat(group);
   const isHealthy = health === 'success';
@@ -125,13 +125,22 @@ function CompactAppCard({ group, onExpand }: { group: AppGroup; onExpand: () =>
       onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') onExpand(); }}
     >
       <div className={styles.compactCardHeader}>
-        <span className={styles.compactCardName}>{group.appId}</span>
+        <span
+          className={styles.compactCardName}
+          onClick={(e) => { e.stopPropagation(); onNavigate(); }}
+          role="link"
+        >
+          {group.appId}
+        </span>
         <ChevronRight size={14} className={styles.compactCardChevron} />
       </div>
       <div className={styles.compactCardMeta}>
         <span className={styles.compactCardLive}>
           {group.liveCount}/{group.instances.length} live
         </span>
+        <span className={styles.compactCardTps}>
+          {group.totalTps.toFixed(1)}/s
+        </span>
         <span className={isHealthy ? styles.compactCardHeartbeat : styles.compactCardHeartbeatWarn}>
           {heartbeat ? timeAgo(heartbeat) : '\u2014'}
         </span>
@@ -711,6 +720,7 @@ export default function AgentHealth() {
               <CompactAppCard
                 group={group}
                 onExpand={() => animateToggle(group.appId)}
+                onNavigate={() => navigate(`/runtime/${group.appId}`)}
               />
               {expandedApps.has(group.appId) && (
                 <div