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,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>
   );
 }

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

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