From a1ea11287675da866fd7ab8d0a332c57ace65678 Mon Sep 17 00:00:00 2001 From: hsiegeln <37154749+hsiegeln@users.noreply.github.com> Date: Thu, 16 Apr 2026 15:43:37 +0200 Subject: [PATCH] feat: replace text labels with icons in runtime cards Use Activity, Cpu, and HeartPulse icons instead of "tps", "cpu", and "ago" text in compact and expanded app cards. Bump design-system to v0.1.55 for sidebar footer alignment fix. Co-Authored-By: Claude Opus 4.6 (1M context) --- ui/package-lock.json | 8 ++-- ui/package.json | 2 +- .../pages/AgentHealth/AgentHealth.module.css | 18 +++++++++ ui/src/pages/AgentHealth/AgentHealth.tsx | 38 ++++--------------- ui/src/utils/format-utils.ts | 11 +++--- 5 files changed, 37 insertions(+), 40 deletions(-) diff --git a/ui/package-lock.json b/ui/package-lock.json index 5c8cea6e..d9aa03a7 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -9,7 +9,7 @@ "version": "0.0.0", "hasInstallScript": true, "dependencies": { - "@cameleer/design-system": "^0.1.54", + "@cameleer/design-system": "^0.1.55", "@tanstack/react-query": "^5.90.21", "js-yaml": "^4.1.1", "lucide-react": "^1.7.0", @@ -281,9 +281,9 @@ } }, "node_modules/@cameleer/design-system": { - "version": "0.1.54", - "resolved": "https://gitea.siegeln.net/api/packages/cameleer/npm/%40cameleer%2Fdesign-system/-/0.1.54/design-system-0.1.54.tgz", - "integrity": "sha512-IX05JmY/JcxTndfDWBHF7uizrRSqJgEM/J5uv5vQerM+Zq02yUzVNcV4QufVYBevGdnI4acUScnDlmSOOb85Qg==", + "version": "0.1.55", + "resolved": "https://gitea.siegeln.net/api/packages/cameleer/npm/%40cameleer%2Fdesign-system/-/0.1.55/design-system-0.1.55.tgz", + "integrity": "sha512-IdieQoRYnvxCWdj6PKJ6hnPmvTFlReWrimJcQ97URCv0bzkCaW9zJvXWISQ/r9b9kAKnz8xQ2HUNrJPBfYtw9g==", "dependencies": { "lucide-react": "^1.7.0", "react": "^19.0.0", diff --git a/ui/package.json b/ui/package.json index 0615bc2c..f9eed68e 100644 --- a/ui/package.json +++ b/ui/package.json @@ -15,7 +15,7 @@ "postinstall": "node -e \"const fs=require('fs');fs.mkdirSync('public',{recursive:true});fs.copyFileSync('node_modules/@cameleer/design-system/assets/cameleer-logo.svg','public/favicon.svg')\"" }, "dependencies": { - "@cameleer/design-system": "^0.1.54", + "@cameleer/design-system": "^0.1.55", "@tanstack/react-query": "^5.90.21", "js-yaml": "^4.1.1", "lucide-react": "^1.7.0", diff --git a/ui/src/pages/AgentHealth/AgentHealth.module.css b/ui/src/pages/AgentHealth/AgentHealth.module.css index 20e036ad..8033221e 100644 --- a/ui/src/pages/AgentHealth/AgentHealth.module.css +++ b/ui/src/pages/AgentHealth/AgentHealth.module.css @@ -111,6 +111,12 @@ color: var(--text-muted); } +.groupMeta > span { + display: inline-flex; + align-items: center; + gap: 4px; +} + .groupMeta strong { font-family: var(--font-mono); color: var(--text-secondary); @@ -319,19 +325,31 @@ .compactCardTps { font-family: var(--font-mono); color: var(--text-muted); + display: inline-flex; + align-items: center; + gap: 3px; } .compactCardCpu { font-family: var(--font-mono); color: var(--text-muted); + display: inline-flex; + align-items: center; + gap: 3px; } .compactCardHeartbeat { color: var(--text-muted); + display: inline-flex; + align-items: center; + gap: 3px; } .compactCardHeartbeatWarn { color: var(--card-accent); + display: inline-flex; + align-items: center; + gap: 3px; } /* Wrapper for each compact grid cell — anchor for overlay */ diff --git a/ui/src/pages/AgentHealth/AgentHealth.tsx b/ui/src/pages/AgentHealth/AgentHealth.tsx index d84ce777..a253f05a 100644 --- a/ui/src/pages/AgentHealth/AgentHealth.tsx +++ b/ui/src/pages/AgentHealth/AgentHealth.tsx @@ -1,6 +1,6 @@ import { useState, useMemo, useCallback, useRef, useEffect } from 'react'; import { useParams, useNavigate } from 'react-router'; -import { ExternalLink, RefreshCw, Pencil, LayoutGrid, List, ChevronRight, ChevronDown, ArrowUp, ArrowDown, Search } from 'lucide-react'; +import { ExternalLink, RefreshCw, Pencil, LayoutGrid, List, ChevronRight, ChevronDown, ArrowUp, ArrowDown, Search, Cpu, HeartPulse, Activity } from 'lucide-react'; import { StatCard, StatusDot, Badge, MonoText, GroupCard, DataTable, EventFeed, @@ -141,15 +141,15 @@ function CompactAppCard({ group, onExpand, onNavigate }: { group: AppGroup; onEx {group.liveCount}/{group.instances.length} live - {group.totalTps.toFixed(1)} tps + {group.totalTps.toFixed(1)}/s {group.maxCpu >= 0 && ( - {(group.maxCpu * 100).toFixed(0)}% cpu + {(group.maxCpu * 100).toFixed(0)}% )} - {heartbeat ? timeAgo(heartbeat) : '\u2014'} + {heartbeat ? timeAgo(heartbeat, true) : '\u2014'} @@ -763,20 +763,9 @@ export default function AgentHealth() { } meta={
- {group.totalTps.toFixed(1)} msg/s + {group.totalTps.toFixed(1)}/s {group.totalActiveRoutes}/{group.totalRoutes} routes - {group.maxCpu >= 0 && {(group.maxCpu * 100).toFixed(0)}% cpu} - - - + {group.maxCpu >= 0 && {(group.maxCpu * 100).toFixed(0)}%}
} footer={ @@ -860,20 +849,9 @@ export default function AgentHealth() { } meta={
- {group.totalTps.toFixed(1)} msg/s + {group.totalTps.toFixed(1)}/s {group.totalActiveRoutes}/{group.totalRoutes} routes - {group.maxCpu >= 0 && {(group.maxCpu * 100).toFixed(0)}% cpu} - - - + {group.maxCpu >= 0 && {(group.maxCpu * 100).toFixed(0)}%}
} footer={ diff --git a/ui/src/utils/format-utils.ts b/ui/src/utils/format-utils.ts index 4d3de0a6..e95e2081 100644 --- a/ui/src/utils/format-utils.ts +++ b/ui/src/utils/format-utils.ts @@ -24,16 +24,17 @@ export function statusLabel(s: string): string { return s.charAt(0).toUpperCase() + s.slice(1).toLowerCase(); } -export function timeAgo(iso?: string): string { +export function timeAgo(iso?: string, short = false): string { if (!iso) return '\u2014'; const diff = Date.now() - new Date(iso).getTime(); const secs = Math.floor(diff / 1000); - if (secs < 60) return `${secs}s ago`; + const suffix = short ? '' : ' ago'; + if (secs < 60) return `${secs}s${suffix}`; const mins = Math.floor(secs / 60); - if (mins < 60) return `${mins}m ago`; + if (mins < 60) return `${mins}m${suffix}`; const hours = Math.floor(mins / 60); - if (hours < 24) return `${hours}h ago`; - return `${Math.floor(hours / 24)}d ago`; + if (hours < 24) return `${hours}h${suffix}`; + return `${Math.floor(hours / 24)}d${suffix}`; } export function formatMetric(value: number, unit: string, decimals = 1): string {