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

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

ui/src/pages/Admin/ClickHouseAdminPage.module.css

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

ui/src/pages/Admin/ClickHouseAdminPage.tsx

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

ui/src/pages/Admin/DatabaseAdminPage.tsx

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

ui/src/pages/Admin/EnvironmentsPage.tsx

@@ -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,6 +264,7 @@ export default function EnvironmentsPage() {
                 </span>
               </div>
 
+              <div className={sectionStyles.section}>
                 <SectionHeader>Configuration</SectionHeader>
                 <div className={styles.securitySection}>
                   <div className={styles.securityRow}>
@@ -275,7 +277,9 @@ export default function EnvironmentsPage() {
                     )}
                   </div>
                 </div>
+              </div>
 
+              <div className={sectionStyles.section}>
                 <SectionHeader>Status</SectionHeader>
                 <div className={styles.securitySection}>
                   <div className={styles.securityRow}>
@@ -292,6 +296,7 @@ export default function EnvironmentsPage() {
                     </p>
                   )}
                 </div>
+              </div>
 
               <DefaultResourcesSection environment={selected} onSave={async (config) => {
                 try {
@@ -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>
   );
 }

ui/src/pages/Admin/GroupsTab.tsx

@@ -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,6 +362,7 @@ export default function GroupsTab({ highlightId, onHighlightConsumed }: { highli
                 </>
               )}
 
+              <div className={sectionStyles.section}>
                 <SectionHeader>Members (direct)</SectionHeader>
                 <div className={styles.sectionTags}>
                   {members.map((u) => (
@@ -386,7 +388,9 @@ export default function GroupsTab({ highlightId, onHighlightConsumed }: { highli
                     + all members of {children.map((c) => c.name).join(', ')}
                   </span>
                 )}
+              </div>
 
+              <div className={sectionStyles.section}>
                 <SectionHeader>Child groups</SectionHeader>
                 <div className={styles.sectionTags}>
                   {children.map((c) => (
@@ -398,7 +402,9 @@ export default function GroupsTab({ highlightId, onHighlightConsumed }: { highli
                     </span>
                   )}
                 </div>
+              </div>
 
+              <div className={sectionStyles.section}>
                 <SectionHeader>Assigned roles</SectionHeader>
                 <div className={styles.sectionTags}>
                   {(selectedGroup.directRoles ?? []).map((r) => (
@@ -425,6 +431,7 @@ export default function GroupsTab({ highlightId, onHighlightConsumed }: { highli
                     placeholder="+ Add"
                   />
                 </div>
+              </div>
             </>
           ) : null
         }

ui/src/pages/Admin/UsersTab.tsx

@@ -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,6 +367,7 @@ export default function UsersTab({ highlightId, onHighlightConsumed }: { highlig
                 </Button>
               </div>
 
+              <div className={sectionStyles.section}>
                 <SectionHeader>Status</SectionHeader>
                 <div className={styles.sectionTags}>
                   <Tag label="Active" color="success" />
@@ -381,7 +383,9 @@ export default function UsersTab({ highlightId, onHighlightConsumed }: { highlig
                   <span className={styles.metaLabel}>Provider</span>
                   <span className={styles.metaValue}>{selected.provider}</span>
                 </div>
+              </div>
 
+              <div className={sectionStyles.section}>
                 <SectionHeader>Security</SectionHeader>
                 <div className={styles.securitySection}>
                 {selected.provider === 'local' ? (
@@ -446,7 +450,9 @@ export default function UsersTab({ highlightId, onHighlightConsumed }: { highlig
                   </>
                 )}
                 </div>
+              </div>
 
+              <div className={sectionStyles.section}>
                 <SectionHeader>Group membership (direct only)</SectionHeader>
                 <div className={styles.sectionTags}>
                   {selected.directGroups.map((g) => (
@@ -497,7 +503,9 @@ export default function UsersTab({ highlightId, onHighlightConsumed }: { highlig
                     placeholder="+ Add"
                   />
                 </div>
+              </div>
 
+              <div className={sectionStyles.section}>
                 <SectionHeader>
                   Effective roles (direct + inherited)
                 </SectionHeader>
@@ -572,6 +580,7 @@ export default function UsersTab({ highlightId, onHighlightConsumed }: { highlig
                     Roles with ↑ are inherited through group membership
                   </span>
                 )}
+              </div>
             </>
           ) : null
         }

ui/src/pages/AgentHealth/AgentHealth.tsx

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

ui/src/pages/AgentInstance/AgentInstance.module.css

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

ui/src/pages/AgentInstance/AgentInstance.tsx

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

ui/src/pages/Dashboard/Dashboard.tsx

@@ -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>
       ),
     },
     {

ui/src/pages/DashboardTab/DashboardL2.tsx

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

ui/src/pages/DashboardTab/DashboardL3.tsx

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

ui/src/pages/DashboardTab/DashboardTab.module.css

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

ui/src/utils/format-utils.ts

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