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>
This commit is contained in:
hsiegeln
2026-04-16 13:52:42 +02:00
parent 1fa897fbb5
commit 9d1cf7577a
2 changed files with 24 additions and 3 deletions

View File

@@ -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