From 911ba591a90ee622846f8b737f242ddec29a4e3e Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Thu, 16 Apr 2026 13:59:25 +0200
Subject: [PATCH] feat: hide toggle on app detail, left-align toolbar, TPS unit
 fix

- Move view toggle into compact grid conditional so it only renders
  on the overview page (not app detail /runtime/{slug})
- Left-align the toolbar buttons
- Change TPS format from "x.y/s" to "x.y tps"

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

diff --git a/ui/src/pages/AgentHealth/AgentHealth.module.css b/ui/src/pages/AgentHealth/AgentHealth.module.css
index b09ca181..be507e67 100644
--- a/ui/src/pages/AgentHealth/AgentHealth.module.css
+++ b/ui/src/pages/AgentHealth/AgentHealth.module.css
@@ -369,7 +369,7 @@
 .viewToolbar {
   display: flex;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: flex-start;
   gap: 8px;
   margin-bottom: 12px;
 }
diff --git a/ui/src/pages/AgentHealth/AgentHealth.tsx b/ui/src/pages/AgentHealth/AgentHealth.tsx
index bee2cbbc..147dc914 100644
--- a/ui/src/pages/AgentHealth/AgentHealth.tsx
+++ b/ui/src/pages/AgentHealth/AgentHealth.tsx
@@ -139,7 +139,7 @@ function CompactAppCard({ group, onExpand, onNavigate }: { group: AppGroup; onEx
           {group.liveCount}/{group.instances.length} live
         </span>
         <span className={styles.compactCardTps}>
-          {group.totalTps.toFixed(1)}/s
+          {group.totalTps.toFixed(1)} tps
         </span>
         <span className={isHealthy ? styles.compactCardHeartbeat : styles.compactCardHeartbeatWarn}>
           {heartbeat ? timeAgo(heartbeat) : '\u2014'}
@@ -526,26 +526,6 @@ export default function AgentHealth() {
         />
       </div>
 
-      {/* View toolbar */}
-      <div className={styles.viewToolbar}>
-        <div className={styles.viewToggle}>
-          <button
-            className={`${styles.viewToggleBtn} ${viewMode === 'compact' ? styles.viewToggleBtnActive : ''}`}
-            onClick={() => toggleViewMode('compact')}
-            title="Compact view"
-          >
-            <LayoutGrid size={14} />
-          </button>
-          <button
-            className={`${styles.viewToggleBtn} ${viewMode === 'expanded' ? styles.viewToggleBtnActive : ''}`}
-            onClick={() => toggleViewMode('expanded')}
-            title="Expanded view"
-          >
-            <List size={14} />
-          </button>
-        </div>
-      </div>
-
       {/* Application config bar */}
       {appId && appConfig && (
         <div className={`${sectionStyles.section} ${styles.configBar}`}>
@@ -714,6 +694,25 @@ export default function AgentHealth() {
           ))}
         </div>
       ) : (
+        <>
+        <div className={styles.viewToolbar}>
+          <div className={styles.viewToggle}>
+            <button
+              className={`${styles.viewToggleBtn} ${viewMode === 'compact' ? styles.viewToggleBtnActive : ''}`}
+              onClick={() => toggleViewMode('compact')}
+              title="Compact view"
+            >
+              <LayoutGrid size={14} />
+            </button>
+            <button
+              className={`${styles.viewToggleBtn} ${viewMode === 'expanded' ? styles.viewToggleBtnActive : ''}`}
+              onClick={() => toggleViewMode('expanded')}
+              title="Expanded view"
+            >
+              <List size={14} />
+            </button>
+          </div>
+        </div>
         <div className={styles.compactGrid}>
           {groups.map((group) => (
             <div key={group.appId} className={styles.compactGridCell}>
@@ -810,6 +809,7 @@ export default function AgentHealth() {
             </div>
           ))}
         </div>
+        </>
       )}
 
       {/* Log + Timeline side by side */}