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