cameleer/cameleer-server
1
0
Fork 0
Code Issues 41 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: improve duration formatting (Xm Ys) and truncate exchange IDs

Browse Source 
- formatDuration and formatDurationShort now show Xm Ys for durations >= 60s (e.g. "5m 21s" instead of "321s") and 1 decimal for 1-60s range ("6.7s" instead of "6.70s")
- Exchange ID column shows last 8 chars with ellipsis prefix; full ID on hover, copies to clipboard on click

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-04-09 18:34:04 +02:00
parent ba0a1850a9
commit eadcd160a3
14 changed files with 293 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
ui/src/pages/Admin/ClickHouseAdminPage.module.css
View File

@@ -5,12 +5,8 @@
flex-wrap: wrap;
}
/* pipelineCard — card styling via sectionStyles.section */
.pipelineCard {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
padding: 16px 20px;
margin-bottom: 16px;
}

3
ui/src/pages/Admin/ClickHouseAdminPage.tsx
View File

@@ -2,6 +2,7 @@ import { StatCard, DataTable, ProgressBar } from '@cameleer/design-system';
import type { Column } from '@cameleer/design-system';
import { useClickHouseStatus, useClickHouseTables, useClickHousePerformance, useClickHouseQueries, useIndexerPipeline } from '../../api/queries/admin/clickhouse';
import styles from './ClickHouseAdminPage.module.css';
import sectionStyles from '../../styles/section-card.module.css';
import tableStyles from '../../styles/table-section.module.css';
export default function ClickHouseAdminPage() {
@@ -53,7 +54,7 @@ export default function ClickHouseAdminPage() {
{/* Pipeline */}
{pipeline && (
<div className={styles.pipelineCard}>
<div className={`${sectionStyles.section} ${styles.pipelineCard}`}>
<div className={styles.pipelineTitle}>Indexer Pipeline</div>
<ProgressBar value={pipeline.maxQueueSize > 0 ? (pipeline.queueDepth / pipeline.maxQueueSize) * 100 : 0} />
<div className={styles.pipelineMetrics}>

13
ui/src/pages/Admin/DatabaseAdminPage.tsx
View File

@@ -2,6 +2,7 @@ import { StatCard, Card, DataTable, Badge, Button, ProgressBar, Spinner } from '
import type { Column } from '@cameleer/design-system';
import { useDatabaseStatus, useConnectionPool, useDatabaseTables, useActiveQueries, useKillQuery } from '../../api/queries/admin/database';
import styles from './DatabaseAdminPage.module.css';
import tableStyles from '../../styles/table-section.module.css';
export default function DatabaseAdminPage() {
const { data: status, isError: statusError } = useDatabaseStatus();
@@ -54,13 +55,17 @@ export default function DatabaseAdminPage() {
</Card>
)}
<div className={styles.section}>
<div className={styles.sectionHeading}>Tables</div>
<div className={tableStyles.tableSection}>
<div className={tableStyles.tableHeader}>
<span className={tableStyles.tableTitle}>Tables</span>
</div>
<DataTable columns={tableColumns} data={(tables || []).map((t: any) => ({ ...t, id: t.tableName }))} sortable pageSize={20} />
</div>
<div className={styles.section}>
<div className={styles.sectionHeading}>Active Queries</div>
<div className={tableStyles.tableSection}>
<div className={tableStyles.tableHeader}>
<span className={tableStyles.tableTitle}>Active Queries</span>
</div>
<DataTable columns={queryColumns} data={(queries || []).map((q: any) => ({ ...q, id: String(q.pid) }))} />
</div>
</div>

57
ui/src/pages/Admin/EnvironmentsPage.tsx
View File

@@ -25,6 +25,7 @@ import {
} from '../../api/queries/admin/environments';
import type { Environment } from '../../api/queries/admin/environments';
import styles from './UserManagement.module.css';
import sectionStyles from '../../styles/section-card.module.css';
function slugify(name: string): string {
return name
@@ -263,34 +264,38 @@ export default function EnvironmentsPage() {
</span>
</div>
<SectionHeader>Configuration</SectionHeader>
<div className={styles.securitySection}>
<div className={styles.securityRow}>
<Toggle checked={selected.production} onChange={() => handleToggleProduction(!selected.production)} />
<span>Production environment</span>
{selected.production ? (
<Tag label="Dedicated resources" color="error" />
) : (
<Tag label="Shared resources" color="auto" />
)}
<div className={sectionStyles.section}>
<SectionHeader>Configuration</SectionHeader>
<div className={styles.securitySection}>
<div className={styles.securityRow}>
<Toggle checked={selected.production} onChange={() => handleToggleProduction(!selected.production)} />
<span>Production environment</span>
{selected.production ? (
<Tag label="Dedicated resources" color="error" />
) : (
<Tag label="Shared resources" color="auto" />
)}
</div>
</div>
</div>
<SectionHeader>Status</SectionHeader>
<div className={styles.securitySection}>
<div className={styles.securityRow}>
<Toggle checked={selected.enabled} onChange={() => handleToggleEnabled(!selected.enabled)} />
<span>{selected.enabled ? 'Enabled' : 'Disabled'}</span>
<div className={sectionStyles.section}>
<SectionHeader>Status</SectionHeader>
<div className={styles.securitySection}>
<div className={styles.securityRow}>
<Toggle checked={selected.enabled} onChange={() => handleToggleEnabled(!selected.enabled)} />
<span>{selected.enabled ? 'Enabled' : 'Disabled'}</span>
{!selected.enabled && (
<Tag label="No new deployments" color="warning" />
)}
</div>
{!selected.enabled && (
<Tag label="No new deployments" color="warning" />
<p className={styles.inheritedNote}>
Disabled environments do not allow new deployments. Active
deployments can only be started, stopped, or deleted.
</p>
)}
</div>
{!selected.enabled && (
<p className={styles.inheritedNote}>
Disabled environments do not allow new deployments. Active
deployments can only be started, stopped, or deleted.
</p>
)}
</div>
<DefaultResourcesSection environment={selected} onSave={async (config) => {
@@ -385,7 +390,7 @@ function DefaultResourcesSection({ environment, onSave, saving }: {
}
return (
<>
<div className={sectionStyles.section}>
<SectionHeader>Default Resource Limits</SectionHeader>
<p className={styles.inheritedNote}>
These defaults apply to new apps in this environment unless overridden per-app.
@@ -444,7 +449,7 @@ function DefaultResourcesSection({ environment, onSave, saving }: {
<Button size="sm" variant="secondary" onClick={() => setEditing(true)}>Edit Defaults</Button>
)}
</div>
</>
</div>
);
}
@@ -478,7 +483,7 @@ function JarRetentionSection({ environment, onSave, saving }: {
}
return (
<>
<div className={sectionStyles.section}>
<SectionHeader>JAR Retention</SectionHeader>
<p className={styles.inheritedNote}>
Old JAR versions are cleaned up nightly. Currently deployed versions are never deleted.
@@ -512,6 +517,6 @@ function JarRetentionSection({ environment, onSave, saving }: {
<Button size="sm" variant="secondary" onClick={() => setEditing(true)}>Edit Policy</Button>
)}
</div>
</>
</div>
);
}

119
ui/src/pages/Admin/GroupsTab.tsx
View File

@@ -32,6 +32,7 @@ import {
} from '../../api/queries/admin/rbac';
import type { GroupDetail } from '../../api/queries/admin/rbac';
import styles from './UserManagement.module.css';
import sectionStyles from '../../styles/section-card.module.css';
const BUILTIN_ADMINS_ID = '00000000-0000-0000-0000-000000000010';
@@ -361,69 +362,75 @@ export default function GroupsTab({ highlightId, onHighlightConsumed }: { highli
</>
)}
<SectionHeader>Members (direct)</SectionHeader>
<div className={styles.sectionTags}>
{members.map((u) => (
<Tag
key={u.userId}
label={u.displayName}
color="auto"
onRemove={() => handleRemoveMember(u.userId)}
<div className={sectionStyles.section}>
<SectionHeader>Members (direct)</SectionHeader>
<div className={styles.sectionTags}>
{members.map((u) => (
<Tag
key={u.userId}
label={u.displayName}
color="auto"
onRemove={() => handleRemoveMember(u.userId)}
/>
))}
{members.length === 0 && (
<span className={styles.inheritedNote}>(no members)</span>
)}
<MultiSelect
options={availableMembers}
value={[]}
onChange={handleAddMembers}
placeholder="+ Add"
/>
))}
{members.length === 0 && (
<span className={styles.inheritedNote}>(no members)</span>
)}
<MultiSelect
options={availableMembers}
value={[]}
onChange={handleAddMembers}
placeholder="+ Add"
/>
</div>
{children.length > 0 && (
<span className={styles.inheritedNote}>
+ all members of {children.map((c) => c.name).join(', ')}
</span>
)}
<SectionHeader>Child groups</SectionHeader>
<div className={styles.sectionTags}>
{children.map((c) => (
<Tag key={c.id} label={c.name} color="success" />
))}
{children.length === 0 && (
</div>
{children.length > 0 && (
<span className={styles.inheritedNote}>
(no child groups)
+ all members of {children.map((c) => c.name).join(', ')}
</span>
)}
</div>
<SectionHeader>Assigned roles</SectionHeader>
<div className={styles.sectionTags}>
{(selectedGroup.directRoles ?? []).map((r) => (
<Tag
key={r.id}
label={r.name}
color="warning"
onRemove={() => {
if (members.length > 0) {
setRemoveRoleTarget(r.id);
} else {
handleRemoveRole(r.id);
}
}}
<div className={sectionStyles.section}>
<SectionHeader>Child groups</SectionHeader>
<div className={styles.sectionTags}>
{children.map((c) => (
<Tag key={c.id} label={c.name} color="success" />
))}
{children.length === 0 && (
<span className={styles.inheritedNote}>
(no child groups)
</span>
)}
</div>
</div>
<div className={sectionStyles.section}>
<SectionHeader>Assigned roles</SectionHeader>
<div className={styles.sectionTags}>
{(selectedGroup.directRoles ?? []).map((r) => (
<Tag
key={r.id}
label={r.name}
color="warning"
onRemove={() => {
if (members.length > 0) {
setRemoveRoleTarget(r.id);
} else {
handleRemoveRole(r.id);
}
}}
/>
))}
{(selectedGroup.directRoles ?? []).length === 0 && (
<span className={styles.inheritedNote}>(no roles)</span>
)}
<MultiSelect
options={availableRoles}
value={[]}
onChange={handleAddRoles}
placeholder="+ Add"
/>
))}
{(selectedGroup.directRoles ?? []).length === 0 && (
<span className={styles.inheritedNote}>(no roles)</span>
)}
<MultiSelect
options={availableRoles}
value={[]}
onChange={handleAddRoles}
placeholder="+ Add"
/>
</div>
</div>
</>
) : null

287
ui/src/pages/Admin/UsersTab.tsx
View File

@@ -35,6 +35,7 @@ import {
import type { UserDetail } from '../../api/queries/admin/rbac';
import { useAuthStore } from '../../auth/auth-store';
import styles from './UserManagement.module.css';
import sectionStyles from '../../styles/section-card.module.css';
export default function UsersTab({ highlightId, onHighlightConsumed }: { highlightId?: string | null; onHighlightConsumed?: () => void }) {
const { toast } = useToast();
@@ -366,24 +367,27 @@ export default function UsersTab({ highlightId, onHighlightConsumed }: { highlig
</Button>
</div>
<SectionHeader>Status</SectionHeader>
<div className={styles.sectionTags}>
<Tag label="Active" color="success" />
<div className={sectionStyles.section}>
<SectionHeader>Status</SectionHeader>
<div className={styles.sectionTags}>
<Tag label="Active" color="success" />
</div>
<div className={styles.metaGrid}>
<span className={styles.metaLabel}>ID</span>
<MonoText size="xs">{selected.userId}</MonoText>
<span className={styles.metaLabel}>Created</span>
<span className={styles.metaValue}>
{new Date(selected.createdAt).toLocaleDateString()}
</span>
<span className={styles.metaLabel}>Provider</span>
<span className={styles.metaValue}>{selected.provider}</span>
</div>
</div>
<div className={styles.metaGrid}>
<span className={styles.metaLabel}>ID</span>
<MonoText size="xs">{selected.userId}</MonoText>
<span className={styles.metaLabel}>Created</span>
<span className={styles.metaValue}>
{new Date(selected.createdAt).toLocaleDateString()}
</span>
<span className={styles.metaLabel}>Provider</span>
<span className={styles.metaValue}>{selected.provider}</span>
</div>
<SectionHeader>Security</SectionHeader>
<div className={styles.securitySection}>
<div className={sectionStyles.section}>
<SectionHeader>Security</SectionHeader>
<div className={styles.securitySection}>
{selected.provider === 'local' ? (
<>
<div className={styles.securityRow}>
@@ -445,133 +449,138 @@ export default function UsersTab({ highlightId, onHighlightConsumed }: { highlig
</InfoCallout>
</>
)}
</div>
</div>
<SectionHeader>Group membership (direct only)</SectionHeader>
<div className={styles.sectionTags}>
{selected.directGroups.map((g) => (
<Tag
key={g.id}
label={g.name}
color="success"
onRemove={() => {
removeFromGroup.mutate(
{ userId: selected.userId, groupId: g.id },
{
onSuccess: () =>
toast({ title: 'Group removed', variant: 'success' }),
onError: () =>
toast({
title: 'Failed to remove group',
variant: 'error',
duration: 86_400_000,
}),
},
);
}}
/>
))}
{selected.directGroups.length === 0 && (
<span className={styles.inheritedNote}>(no groups)</span>
)}
<MultiSelect
options={availableGroups}
value={[]}
onChange={(ids) => {
for (const groupId of ids) {
addToGroup.mutate(
{ userId: selected.userId, groupId },
{
onSuccess: () =>
toast({ title: 'Added to group', variant: 'success' }),
onError: () =>
toast({
title: 'Failed to add group',
variant: 'error',
duration: 86_400_000,
}),
},
);
}
}}
placeholder="+ Add"
/>
</div>
<SectionHeader>
Effective roles (direct + inherited)
</SectionHeader>
<div className={styles.sectionTags}>
{selected.directRoles.map((r) => (
<Tag
key={r.id}
label={r.name}
color="warning"
onRemove={() => {
removeRole.mutate(
{ userId: selected.userId, roleId: r.id },
{
onSuccess: () =>
toast({
title: 'Role removed',
description: r.name,
variant: 'success',
}),
onError: () =>
toast({
title: 'Failed to remove role',
variant: 'error',
duration: 86_400_000,
}),
},
);
}}
/>
))}
{inheritedRoles.map((r) => (
<Badge
key={r.id}
label={`${r.name} ↑ group`}
color="warning"
variant="dashed"
className={styles.inherited}
/>
))}
{selected.directRoles.length === 0 &&
inheritedRoles.length === 0 && (
<span className={styles.inheritedNote}>(no roles)</span>
<div className={sectionStyles.section}>
<SectionHeader>Group membership (direct only)</SectionHeader>
<div className={styles.sectionTags}>
{selected.directGroups.map((g) => (
<Tag
key={g.id}
label={g.name}
color="success"
onRemove={() => {
removeFromGroup.mutate(
{ userId: selected.userId, groupId: g.id },
{
onSuccess: () =>
toast({ title: 'Group removed', variant: 'success' }),
onError: () =>
toast({
title: 'Failed to remove group',
variant: 'error',
duration: 86_400_000,
}),
},
);
}}
/>
))}
{selected.directGroups.length === 0 && (
<span className={styles.inheritedNote}>(no groups)</span>
)}
<MultiSelect
options={availableRoles}
value={[]}
onChange={(roleIds) => {
for (const roleId of roleIds) {
assignRole.mutate(
{ userId: selected.userId, roleId },
{
onSuccess: () =>
toast({
title: 'Role assigned',
variant: 'success',
}),
onError: () =>
toast({
title: 'Failed to assign role',
variant: 'error',
duration: 86_400_000,
}),
},
);
}
}}
placeholder="+ Add"
/>
<MultiSelect
options={availableGroups}
value={[]}
onChange={(ids) => {
for (const groupId of ids) {
addToGroup.mutate(
{ userId: selected.userId, groupId },
{
onSuccess: () =>
toast({ title: 'Added to group', variant: 'success' }),
onError: () =>
toast({
title: 'Failed to add group',
variant: 'error',
duration: 86_400_000,
}),
},
);
}
}}
placeholder="+ Add"
/>
</div>
</div>
<div className={sectionStyles.section}>
<SectionHeader>
Effective roles (direct + inherited)
</SectionHeader>
<div className={styles.sectionTags}>
{selected.directRoles.map((r) => (
<Tag
key={r.id}
label={r.name}
color="warning"
onRemove={() => {
removeRole.mutate(
{ userId: selected.userId, roleId: r.id },
{
onSuccess: () =>
toast({
title: 'Role removed',
description: r.name,
variant: 'success',
}),
onError: () =>
toast({
title: 'Failed to remove role',
variant: 'error',
duration: 86_400_000,
}),
},
);
}}
/>
))}
{inheritedRoles.map((r) => (
<Badge
key={r.id}
label={`${r.name} ↑ group`}
color="warning"
variant="dashed"
className={styles.inherited}
/>
))}
{selected.directRoles.length === 0 &&
inheritedRoles.length === 0 && (
<span className={styles.inheritedNote}>(no roles)</span>
)}
<MultiSelect
options={availableRoles}
value={[]}
onChange={(roleIds) => {
for (const roleId of roleIds) {
assignRole.mutate(
{ userId: selected.userId, roleId },
{
onSuccess: () =>
toast({
title: 'Role assigned',
variant: 'success',
}),
onError: () =>
toast({
title: 'Failed to assign role',
variant: 'error',
duration: 86_400_000,
}),
},
);
}
}}
placeholder="+ Add"
/>
</div>
{inheritedRoles.length > 0 && (
<span className={styles.inheritedNote}>
Roles with ↑ are inherited through group membership
</span>
)}
</div>
{inheritedRoles.length > 0 && (
<span className={styles.inheritedNote}>
Roles with ↑ are inherited through group membership
</span>
)}
</>
) : null
}

5
ui/src/pages/AgentHealth/AgentHealth.tsx
View File

@@ -8,6 +8,7 @@ import {
} from '@cameleer/design-system';
import type { Column, FeedEvent, LogEntry, ButtonGroupItem } from '@cameleer/design-system';
import styles from './AgentHealth.module.css';
import sectionStyles from '../../styles/section-card.module.css';
import logStyles from '../../styles/log-panel.module.css';
import { useAgents, useAgentEvents } from '../../api/queries/agents';
import { useApplicationLogs } from '../../api/queries/logs';
@@ -353,7 +354,7 @@ export default function AgentHealth() {
{/* Application config bar */}
{appId && appConfig && (
<div className={styles.configBar}>
<div className={`${sectionStyles.section} ${styles.configBar}`}>
{configEditing ? (
<>
<div className={styles.configField}>
@@ -569,7 +570,7 @@ export default function AgentHealth() {
)}
</div>
<div className={styles.eventCard}>
<div className={`${sectionStyles.section} ${styles.eventCard}`}>
<div className={styles.eventCardHeader}>
<span className={styles.sectionTitle}>Timeline</span>
<div className={logStyles.headerActions}>

12
ui/src/pages/AgentInstance/AgentInstance.module.css
View File

@@ -44,12 +44,8 @@
font-family: var(--font-mono);
}
/* Process info card */
/* Process info card — card styling via sectionStyles.section */
.processCard {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
padding: 16px;
margin-bottom: 20px;
}
@@ -116,12 +112,8 @@
gap: 14px;
}
/* Timeline card */
/* Timeline card — card styling via sectionStyles.section */
.timelineCard {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
overflow: hidden;
display: flex;
flex-direction: column;

5
ui/src/pages/AgentInstance/AgentInstance.tsx
View File

@@ -8,6 +8,7 @@ import {
} from '@cameleer/design-system';
import type { FeedEvent, LogEntry, ButtonGroupItem } from '@cameleer/design-system';
import styles from './AgentInstance.module.css';
import sectionStyles from '../../styles/section-card.module.css';
import logStyles from '../../styles/log-panel.module.css';
import chartCardStyles from '../../styles/chart-card.module.css';
import { useAgents, useAgentEvents } from '../../api/queries/agents';
@@ -238,7 +239,7 @@ export default function AgentInstance() {
</div>
{/* Process info card */}
<div className={styles.processCard}>
<div className={`${sectionStyles.section} ${styles.processCard}`}>
<SectionHeader>Process Information</SectionHeader>
<div className={styles.processGrid}>
{agent.capabilities?.jvmVersion && (
@@ -438,7 +439,7 @@ export default function AgentInstance() {
)}
</div>
<div className={styles.timelineCard}>
<div className={`${sectionStyles.section} ${styles.timelineCard}`}>
<div className={styles.timelineHeader}>
<span className={styles.chartTitle}>Timeline</span>
<div className={logStyles.headerActions}>

14
ui/src/pages/Dashboard/Dashboard.tsx
View File

@@ -1,4 +1,4 @@
import { useState, useMemo, useCallback, useEffect } from 'react'
import React, { useState, useMemo, useCallback, useEffect } from 'react'
import { useParams, useNavigate, useSearchParams } from 'react-router'
import { AlertTriangle, X, Search, Footprints, RotateCcw } from 'lucide-react'
import {
@@ -113,7 +113,17 @@ function buildBaseColumns(): Column<Row>[] {
header: 'Exchange ID',
sortable: true,
render: (_: unknown, row: Row) => (
<MonoText size="xs">{row.executionId}</MonoText>
<MonoText
size="xs"
title={row.executionId}
style={{ cursor: 'pointer' }}
onClick={(e: React.MouseEvent) => {
e.stopPropagation();
navigator.clipboard.writeText(row.executionId);
}}
>
...{row.executionId.slice(-8)}
</MonoText>
),
},
{

2
ui/src/pages/DashboardTab/DashboardL2.tsx
View File

@@ -420,7 +420,7 @@ export default function DashboardL2() {
{/* Top 5 Errors — hidden when empty */}
{errorRows.length > 0 && (
<div className={styles.errorsSection}>
<div className={tableStyles.tableSection}>
<div className={tableStyles.tableHeader}>
<span className={tableStyles.tableTitle}>Top Errors</span>
<span className={tableStyles.tableMeta}>{errorRows.length} error types</span>

4
ui/src/pages/DashboardTab/DashboardL3.tsx
View File

@@ -392,7 +392,7 @@ export default function DashboardL3() {
{/* Process Diagram with Latency Heatmap */}
{appId && routeId && (
<div className={styles.diagramSection}>
<div className={`${tableStyles.tableSection} ${styles.diagramHeight}`}>
<ProcessDiagram
application={appId}
routeId={routeId}
@@ -421,7 +421,7 @@ export default function DashboardL3() {
{/* Top 5 Errors — hidden if empty */}
{errorRows.length > 0 && (
<div className={styles.errorsSection}>
<div className={tableStyles.tableSection}>
<div className={tableStyles.tableHeader}>
<span className={tableStyles.tableTitle}>Top 5 Errors</span>
<Badge label={`${errorRows.length}`} color="error" />

18
ui/src/pages/DashboardTab/DashboardTab.module.css
View File

@@ -37,13 +37,8 @@
text-decoration: underline;
}
/* Diagram container */
.diagramSection {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
overflow: hidden;
/* Diagram container — height override; card styling via tableStyles.tableSection */
.diagramHeight {
height: 280px;
}
@@ -90,11 +85,4 @@
font-weight: 600;
}
/* Errors section */
.errorsSection {
background: var(--bg-surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
overflow: hidden;
}
/* errorsSection removed — use tableStyles.tableSection instead */

17
ui/src/utils/format-utils.ts
View File

@@ -1,13 +1,22 @@
export function formatDuration(ms: number): string {
if (ms >= 60_000) return `${(ms / 1000).toFixed(0)}s`;
if (ms >= 1000) return `${(ms / 1000).toFixed(2)}s`;
if (ms >= 60_000) {
const minutes = Math.floor(ms / 60_000);
const seconds = Math.round((ms % 60_000) / 1000);
return seconds > 0 ? `${minutes}m ${seconds}s` : `${minutes}m`;
}
if (ms >= 1000) return `${(ms / 1000).toFixed(1)}s`;
return `${ms}ms`;
}
export function formatDurationShort(ms: number | undefined): string {
if (ms == null) return '-';
if (ms < 1000) return `${ms}ms`;
return `${(ms / 1000).toFixed(1)}s`;
if (ms >= 60_000) {
const minutes = Math.floor(ms / 60_000);
const seconds = Math.round((ms % 60_000) / 1000);
return seconds > 0 ? `${minutes}m ${seconds}s` : `${minutes}m`;
}
if (ms >= 1000) return `${(ms / 1000).toFixed(1)}s`;
return `${ms}ms`;
}
export function statusLabel(s: string): string {