From d0c2fd1ac3176b8364ef48935684347d07019d46 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Thu, 16 Apr 2026 13:37:16 +0200
Subject: [PATCH] feat: add view mode state and toggle to runtime dashboard

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 ui/src/pages/AgentHealth/AgentHealth.tsx | 39 +++++++++++++++++++++++-
 1 file changed, 38 insertions(+), 1 deletion(-)

diff --git a/ui/src/pages/AgentHealth/AgentHealth.tsx b/ui/src/pages/AgentHealth/AgentHealth.tsx
index 2e25fbd2..c7bcfcbe 100644
--- a/ui/src/pages/AgentHealth/AgentHealth.tsx
+++ b/ui/src/pages/AgentHealth/AgentHealth.tsx
@@ -1,6 +1,6 @@
 import { useState, useMemo, useCallback } from 'react';
 import { useParams, useNavigate } from 'react-router';
-import { ExternalLink, RefreshCw, Pencil } from 'lucide-react';
+import { ExternalLink, RefreshCw, Pencil, LayoutGrid, List, ChevronRight, ChevronDown } from 'lucide-react';
 import {
   StatCard, StatusDot, Badge, MonoText,
   GroupCard, DataTable, EventFeed,
@@ -114,6 +114,27 @@ export default function AgentHealth() {
   const catalogEntry = catalogApps?.find((a) => a.slug === appId);
 
   const [confirmDismissOpen, setConfirmDismissOpen] = useState(false);
+  const [viewMode, setViewMode] = useState<'compact' | 'expanded'>(() => {
+    const saved = localStorage.getItem('cameleer:runtime:viewMode');
+    return saved === 'expanded' ? 'expanded' : 'compact';
+  });
+  const [expandedApps, setExpandedApps] = useState<Set<string>>(new Set());
+
+  const toggleViewMode = useCallback((mode: 'compact' | 'expanded') => {
+    setViewMode(mode);
+    setExpandedApps(new Set());
+    localStorage.setItem('cameleer:runtime:viewMode', mode);
+  }, []);
+
+  const toggleAppExpanded = useCallback((appId: string) => {
+    setExpandedApps((prev) => {
+      const next = new Set(prev);
+      if (next.has(appId)) next.delete(appId);
+      else next.add(appId);
+      return next;
+    });
+  }, []);
+
   const [configEditing, setConfigEditing] = useState(false);
   const [configDraft, setConfigDraft] = useState<Record<string, string | boolean>>({});
 
@@ -399,6 +420,22 @@ export default function AgentHealth() {
           accent={deadCount > 0 ? 'error' : 'success'}
           detail={deadCount > 0 ? 'requires attention' : 'all healthy'}
         />
+        <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 */}