refactor: migrate pages to use new design system components

Dashboard: KpiStrip replaces StatCard strip
Routes: KpiStrip + Card title + removed ~250 lines of KPI/chart CSS
AgentInstance: LogViewer replaces custom log rendering
Admin RBAC: SplitPane + EntityList replaces custom split-pane layout
CLAUDE.md: updated import examples

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

CLAUDE.md

@@ -37,8 +37,8 @@ Always read `COMPONENT_GUIDE.md` before building any UI feature. It contains dec
 ### Import Paths
 ```tsx
 import { Button, Input } from '../design-system/primitives'
-import { Modal, DataTable } from '../design-system/composites'
-import type { Column } from '../design-system/composites'
+import { Modal, DataTable, KpiStrip, SplitPane, EntityList, LogViewer } from '../design-system/composites'
+import type { Column, KpiItem, LogEntry } from '../design-system/composites'
 import { AppShell } from '../design-system/layout/AppShell'
 import { ThemeProvider } from '../design-system/providers/ThemeProvider'
 ```
@@ -91,10 +91,10 @@ import { Button, AppShell, ThemeProvider } from '@cameleer/design-system'
 
 ```tsx
 // All components from single entry
-import { Button, Input, Modal, DataTable, AppShell } from '@cameleer/design-system'
+import { Button, Input, Modal, DataTable, KpiStrip, SplitPane, EntityList, LogViewer, StatusText, AppShell } from '@cameleer/design-system'
 
 // Types
-import type { Column, DataTableProps, SearchResult } from '@cameleer/design-system'
+import type { Column, DataTableProps, SearchResult, KpiItem, LogEntry } from '@cameleer/design-system'
 
 // Providers
 import { ThemeProvider, useTheme } from '@cameleer/design-system'

src/pages/Admin/UserManagement/GroupsTab.tsx

@@ -11,8 +11,10 @@ import { InlineEdit } from '../../../design-system/primitives/InlineEdit/InlineE
 import { MultiSelect } from '../../../design-system/composites/MultiSelect/MultiSelect'
 import { ConfirmDialog } from '../../../design-system/composites/ConfirmDialog/ConfirmDialog'
 import { AlertDialog } from '../../../design-system/composites/AlertDialog/AlertDialog'
+import { SplitPane } from '../../../design-system/composites/SplitPane/SplitPane'
+import { EntityList } from '../../../design-system/composites/EntityList/EntityList'
 import { useToast } from '../../../design-system/composites/Toast/Toast'
-import { MOCK_GROUPS, MOCK_USERS, MOCK_ROLES, getChildGroups, type MockGroup } from './rbacMocks'
+import { MOCK_GROUPS, MOCK_USERS, MOCK_ROLES, type MockGroup } from './rbacMocks'
 import styles from './UserManagement.module.css'
 
 export function GroupsTab() {
@@ -83,207 +85,190 @@ export function GroupsTab() {
 
   return (
     <>
-      <div className={styles.splitPane}>
-        <div className={styles.listPane}>
-          <div className={styles.listHeader}>
-            <Input
-              placeholder="Search groups..."
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              onClear={() => setSearch('')}
-              className={styles.listHeaderSearch}
-            />
-            <Button size="sm" variant="secondary" onClick={() => setCreating(true)}>
-              + Add group
-            </Button>
-          </div>
-
-          {creating && (
-            <div className={styles.createForm}>
-              <Input placeholder="Group name *" value={newName} onChange={(e) => setNewName(e.target.value)} />
-              {duplicateGroupName && <span style={{ color: 'var(--error)', fontSize: 11 }}>Group name already exists</span>}
-              <Select
-                options={parentOptions}
-                value={newParent}
-                onChange={(e) => setNewParent(e.target.value)}
-              />
-              <div className={styles.createFormActions}>
-                <Button size="sm" variant="ghost" onClick={() => setCreating(false)}>Cancel</Button>
-                <Button size="sm" variant="primary" onClick={handleCreate} disabled={!newName.trim() || duplicateGroupName}>Create</Button>
-              </div>
-            </div>
-          )}
-
-          <div className={styles.entityList} role="listbox" aria-label="Groups">
-            {filtered.map((group) => {
-              const groupChildren = groups.filter((g) => g.parentId === group.id)
-              const groupMembers = MOCK_USERS.filter((u) => u.directGroups.includes(group.id))
-              const groupParent = group.parentId ? groups.find((g) => g.id === group.parentId) : null
-              return (
-                <div
-                  key={group.id}
-                  className={`${styles.entityItem} ${selectedId === group.id ? styles.entityItemSelected : ''}`}
-                  onClick={() => setSelectedId(group.id)}
-                  role="option"
-                  tabIndex={0}
-                  aria-selected={selectedId === group.id}
-                  onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setSelectedId(group.id) } }}
-                >
-                  <Avatar name={group.name} size="sm" />
-                  <div className={styles.entityInfo}>
-                    <div className={styles.entityName}>{group.name}</div>
-                    <div className={styles.entityMeta}>
-                      {groupParent ? `Child of ${groupParent.name}` : 'Top-level'}
-                      {' · '}{groupChildren.length} children · {groupMembers.length} members
-                    </div>
-                    <div className={styles.entityTags}>
-                      {group.directRoles.map((r) => <Badge key={r} label={r} color="warning" />)}
-                    </div>
-                  </div>
+      <SplitPane
+        list={
+          <>
+            {creating && (
+              <div className={styles.createForm}>
+                <Input placeholder="Group name *" value={newName} onChange={(e) => setNewName(e.target.value)} />
+                {duplicateGroupName && <span style={{ color: 'var(--error)', fontSize: 11 }}>Group name already exists</span>}
+                <Select
+                  options={parentOptions}
+                  value={newParent}
+                  onChange={(e) => setNewParent(e.target.value)}
+                />
+                <div className={styles.createFormActions}>
+                  <Button size="sm" variant="ghost" onClick={() => setCreating(false)}>Cancel</Button>
+                  <Button size="sm" variant="primary" onClick={handleCreate} disabled={!newName.trim() || duplicateGroupName}>Create</Button>
                 </div>
-              )
-            })}
-            {filtered.length === 0 && (
-              <div className={styles.emptySearch}>No groups match your search</div>
+              </div>
             )}
-          </div>
-        </div>
 
-        <div className={styles.detailPane}>
-          {selected ? (
-            <>
-              <div className={styles.detailHeader}>
-                <Avatar name={selected.name} size="lg" />
-                <div className={styles.detailHeaderInfo}>
-                  <div className={styles.detailName}>
-                    {selected.builtIn ? selected.name : (
-                      <InlineEdit
-                        value={selected.name}
-                        onSave={(v) => updateGroup(selected.id, { name: v })}
-                      />
-                    )}
-                  </div>
-                  <div className={styles.detailEmail}>
-                    {parent ? `${parent.name} > ${selected.name}` : 'Top-level group'}
-                    {selected.builtIn && ' (built-in)'}
-                  </div>
+            <EntityList
+              items={filtered}
+              renderItem={(group) => {
+                const groupChildren = groups.filter((g) => g.parentId === group.id)
+                const groupMembers = MOCK_USERS.filter((u) => u.directGroups.includes(group.id))
+                const groupParent = group.parentId ? groups.find((g) => g.id === group.parentId) : null
+                return (
+                  <>
+                    <Avatar name={group.name} size="sm" />
+                    <div className={styles.entityInfo}>
+                      <div className={styles.entityName}>{group.name}</div>
+                      <div className={styles.entityMeta}>
+                        {groupParent ? `Child of ${groupParent.name}` : 'Top-level'}
+                        {' · '}{groupChildren.length} children · {groupMembers.length} members
+                      </div>
+                      <div className={styles.entityTags}>
+                        {group.directRoles.map((r) => <Badge key={r} label={r} color="warning" />)}
+                      </div>
+                    </div>
+                  </>
+                )
+              }}
+              getItemId={(group) => group.id}
+              selectedId={selectedId ?? undefined}
+              onSelect={setSelectedId}
+              searchPlaceholder="Search groups..."
+              onSearch={setSearch}
+              addLabel="+ Add group"
+              onAdd={() => setCreating(true)}
+              emptyMessage="No groups match your search"
+            />
+          </>
+        }
+        detail={selected ? (
+          <>
+            <div className={styles.detailHeader}>
+              <Avatar name={selected.name} size="lg" />
+              <div className={styles.detailHeaderInfo}>
+                <div className={styles.detailName}>
+                  {selected.builtIn ? selected.name : (
+                    <InlineEdit
+                      value={selected.name}
+                      onSave={(v) => updateGroup(selected.id, { name: v })}
+                    />
+                  )}
+                </div>
+                <div className={styles.detailEmail}>
+                  {parent ? `${parent.name} > ${selected.name}` : 'Top-level group'}
+                  {selected.builtIn && ' (built-in)'}
                 </div>
-                <Button
-                  size="sm"
-                  variant="danger"
-                  onClick={() => setDeleteTarget(selected)}
-                  disabled={selected.builtIn}
-                >
-                  Delete
-                </Button>
               </div>
+              <Button
+                size="sm"
+                variant="danger"
+                onClick={() => setDeleteTarget(selected)}
+                disabled={selected.builtIn}
+              >
+                Delete
+              </Button>
+            </div>
 
-              <div className={styles.metaGrid}>
-                <span className={styles.metaLabel}>ID</span>
-                <MonoText size="xs">{selected.id}</MonoText>
-              </div>
+            <div className={styles.metaGrid}>
+              <span className={styles.metaLabel}>ID</span>
+              <MonoText size="xs">{selected.id}</MonoText>
+            </div>
 
-              {parent && (
-                <>
-                  <SectionHeader>Member of</SectionHeader>
-                  <div className={styles.sectionTags}>
-                    <Tag label={parent.name} color="auto" />
-                  </div>
-                </>
-              )}
+            {parent && (
+              <>
+                <SectionHeader>Member of</SectionHeader>
+                <div className={styles.sectionTags}>
+                  <Tag label={parent.name} color="auto" />
+                </div>
+              </>
+            )}
 
-              <SectionHeader>Members (direct)</SectionHeader>
-              <div className={styles.sectionTags}>
-                {members.map((u) => (
-                  <Tag
-                    key={u.id}
-                    label={u.displayName}
-                    color="auto"
-                    onRemove={() => {
-                      // Remove this group from the user's directGroups
-                      // Note: in mock data we can't easily update MOCK_USERS, so this is visual only
-                      toast({ title: 'Member removed', description: u.displayName, variant: 'success' })
-                    }}
-                  />
-                ))}
-                {members.length === 0 && <span className={styles.inheritedNote}>(no members)</span>}
-                <MultiSelect
-                  options={availableMembers}
-                  value={[]}
-                  onChange={(ids) => {
-                    toast({ title: `${ids.length} member(s) added`, variant: 'success' })
+            <SectionHeader>Members (direct)</SectionHeader>
+            <div className={styles.sectionTags}>
+              {members.map((u) => (
+                <Tag
+                  key={u.id}
+                  label={u.displayName}
+                  color="auto"
+                  onRemove={() => {
+                    // Remove this group from the user's directGroups
+                    // Note: in mock data we can't easily update MOCK_USERS, so this is visual only
+                    toast({ title: 'Member removed', description: u.displayName, variant: 'success' })
                   }}
-                  placeholder="+ Add"
                 />
-              </div>
-              {children.length > 0 && (
-                <span className={styles.inheritedNote}>
-                  + all members of {children.map((c) => c.name).join(', ')}
-                </span>
-              )}
+              ))}
+              {members.length === 0 && <span className={styles.inheritedNote}>(no members)</span>}
+              <MultiSelect
+                options={availableMembers}
+                value={[]}
+                onChange={(ids) => {
+                  toast({ title: `${ids.length} member(s) added`, variant: 'success' })
+                }}
+                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"
-                    onRemove={() => {
-                      updateGroup(c.id, { parentId: null })
-                      toast({ title: 'Child group removed', description: c.name, variant: 'success' })
-                    }}
-                  />
-                ))}
-                {children.length === 0 && <span className={styles.inheritedNote}>(no child groups)</span>}
-                <MultiSelect
-                  options={availableChildGroups}
-                  value={[]}
-                  onChange={(ids) => {
-                    for (const id of ids) {
-                      updateGroup(id, { parentId: selected!.id })
+            <SectionHeader>Child groups</SectionHeader>
+            <div className={styles.sectionTags}>
+              {children.map((c) => (
+                <Tag
+                  key={c.id}
+                  label={c.name}
+                  color="success"
+                  onRemove={() => {
+                    updateGroup(c.id, { parentId: null })
+                    toast({ title: 'Child group removed', description: c.name, variant: 'success' })
+                  }}
+                />
+              ))}
+              {children.length === 0 && <span className={styles.inheritedNote}>(no child groups)</span>}
+              <MultiSelect
+                options={availableChildGroups}
+                value={[]}
+                onChange={(ids) => {
+                  for (const id of ids) {
+                    updateGroup(id, { parentId: selected!.id })
+                  }
+                  toast({ title: `${ids.length} child group(s) added`, variant: 'success' })
+                }}
+                placeholder="+ Add"
+              />
+            </div>
+
+            <SectionHeader>Assigned roles</SectionHeader>
+            <div className={styles.sectionTags}>
+              {selected.directRoles.map((r) => (
+                <Tag
+                  key={r}
+                  label={r}
+                  color="warning"
+                  onRemove={() => {
+                    const memberCount = MOCK_USERS.filter((u) => u.directGroups.includes(selected.id)).length
+                    if (memberCount > 0) {
+                      setRemoveRoleTarget(r)
+                    } else {
+                      updateGroup(selected.id, { directRoles: selected.directRoles.filter((role) => role !== r) })
+                      toast({ title: 'Role removed', variant: 'success' })
                     }
-                    toast({ title: `${ids.length} child group(s) added`, variant: 'success' })
                   }}
-                  placeholder="+ Add"
                 />
-              </div>
-
-              <SectionHeader>Assigned roles</SectionHeader>
-              <div className={styles.sectionTags}>
-                {selected.directRoles.map((r) => (
-                  <Tag
-                    key={r}
-                    label={r}
-                    color="warning"
-                    onRemove={() => {
-                      const memberCount = MOCK_USERS.filter((u) => u.directGroups.includes(selected.id)).length
-                      if (memberCount > 0) {
-                        setRemoveRoleTarget(r)
-                      } else {
-                        updateGroup(selected.id, { directRoles: selected.directRoles.filter((role) => role !== r) })
-                        toast({ title: 'Role removed', variant: 'success' })
-                      }
-                    }}
-                  />
-                ))}
-                {selected.directRoles.length === 0 && <span className={styles.inheritedNote}>(no roles)</span>}
-                <MultiSelect
-                  options={availableRoles}
-                  value={[]}
-                  onChange={(roles) => {
-                    updateGroup(selected.id, { directRoles: [...selected.directRoles, ...roles] })
-                    toast({ title: `${roles.length} role(s) added`, variant: 'success' })
-                  }}
-                  placeholder="+ Add"
-                />
-              </div>
-            </>
-          ) : (
-            <div className={styles.emptyDetail}>Select a group to view details</div>
-          )}
-        </div>
-      </div>
+              ))}
+              {selected.directRoles.length === 0 && <span className={styles.inheritedNote}>(no roles)</span>}
+              <MultiSelect
+                options={availableRoles}
+                value={[]}
+                onChange={(roles) => {
+                  updateGroup(selected.id, { directRoles: [...selected.directRoles, ...roles] })
+                  toast({ title: `${roles.length} role(s) added`, variant: 'success' })
+                }}
+                placeholder="+ Add"
+              />
+            </div>
+          </>
+        ) : null}
+        emptyMessage="Select a group to view details"
+      />
 
       <ConfirmDialog
         open={deleteTarget !== null}

src/pages/Admin/UserManagement/RolesTab.tsx

@@ -7,6 +7,8 @@ import { MonoText } from '../../../design-system/primitives/MonoText/MonoText'
 import { SectionHeader } from '../../../design-system/primitives/SectionHeader/SectionHeader'
 import { Tag } from '../../../design-system/primitives/Tag/Tag'
 import { ConfirmDialog } from '../../../design-system/composites/ConfirmDialog/ConfirmDialog'
+import { SplitPane } from '../../../design-system/composites/SplitPane/SplitPane'
+import { EntityList } from '../../../design-system/composites/EntityList/EntityList'
 import { useToast } from '../../../design-system/composites/Toast/Toast'
 import { MOCK_ROLES, MOCK_GROUPS, MOCK_USERS, getEffectiveRoles, type MockRole } from './rbacMocks'
 import styles from './UserManagement.module.css'
@@ -79,141 +81,124 @@ export function RolesTab() {
 
   return (
     <>
-      <div className={styles.splitPane}>
-        <div className={styles.listPane}>
-          <div className={styles.listHeader}>
-            <Input
-              placeholder="Search roles..."
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              onClear={() => setSearch('')}
-              className={styles.listHeaderSearch}
-            />
-            <Button size="sm" variant="secondary" onClick={() => setCreating(true)}>
-              + Add role
-            </Button>
-          </div>
-
-          {creating && (
-            <div className={styles.createForm}>
-              <Input placeholder="Role name *" value={newName} onChange={(e) => setNewName(e.target.value)} />
-              {duplicateRoleName && <span style={{ color: 'var(--error)', fontSize: 11 }}>Role name already exists</span>}
-              <Input placeholder="Description" value={newDesc} onChange={(e) => setNewDesc(e.target.value)} />
-              <div className={styles.createFormActions}>
-                <Button size="sm" variant="ghost" onClick={() => setCreating(false)}>Cancel</Button>
-                <Button size="sm" variant="primary" onClick={handleCreate} disabled={!newName.trim() || duplicateRoleName}>Create</Button>
-              </div>
-            </div>
-          )}
-
-          <div className={styles.entityList} role="listbox" aria-label="Roles">
-            {filtered.map((role) => (
-              <div
-                key={role.id}
-                className={`${styles.entityItem} ${selectedId === role.id ? styles.entityItemSelected : ''}`}
-                onClick={() => setSelectedId(role.id)}
-                role="option"
-                tabIndex={0}
-                aria-selected={selectedId === role.id}
-                onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setSelectedId(role.id) } }}
-              >
-                <Avatar name={role.name} size="sm" />
-                <div className={styles.entityInfo}>
-                  <div className={styles.entityName}>
-                    {role.name}
-                    {role.system && <Badge label="system" color="auto" variant="outlined" className={styles.providerBadge} />}
-                  </div>
-                  <div className={styles.entityMeta}>
-                    {role.description} · {getAssignmentCount(role)} assignments
-                  </div>
-                  <div className={styles.entityTags}>
-                    {MOCK_GROUPS.filter((g) => g.directRoles.includes(role.name))
-                      .map((g) => <Badge key={g.id} label={g.name} color="success" />)}
-                    {MOCK_USERS.filter((u) => u.directRoles.includes(role.name))
-                      .map((u) => <Badge key={u.id} label={u.username} color="auto" />)}
-                  </div>
+      <SplitPane
+        list={
+          <>
+            {creating && (
+              <div className={styles.createForm}>
+                <Input placeholder="Role name *" value={newName} onChange={(e) => setNewName(e.target.value)} />
+                {duplicateRoleName && <span style={{ color: 'var(--error)', fontSize: 11 }}>Role name already exists</span>}
+                <Input placeholder="Description" value={newDesc} onChange={(e) => setNewDesc(e.target.value)} />
+                <div className={styles.createFormActions}>
+                  <Button size="sm" variant="ghost" onClick={() => setCreating(false)}>Cancel</Button>
+                  <Button size="sm" variant="primary" onClick={handleCreate} disabled={!newName.trim() || duplicateRoleName}>Create</Button>
                 </div>
               </div>
-            ))}
-            {filtered.length === 0 && (
-              <div className={styles.emptySearch}>No roles match your search</div>
             )}
-          </div>
-        </div>
 
-        <div className={styles.detailPane}>
-          {selected ? (
-            <>
-              <div className={styles.detailHeader}>
-                <Avatar name={selected.name} size="lg" />
-                <div className={styles.detailHeaderInfo}>
-                  <div className={styles.detailName}>{selected.name}</div>
-                  {selected.description && (
-                    <div className={styles.detailEmail}>{selected.description}</div>
-                  )}
-                </div>
-                {!selected.system && (
-                  <Button
-                    size="sm"
-                    variant="danger"
-                    onClick={() => setDeleteTarget(selected)}
-                  >
-                    Delete
-                  </Button>
-                )}
-              </div>
-
-              <div className={styles.metaGrid}>
-                <span className={styles.metaLabel}>ID</span>
-                <MonoText size="xs">{selected.id}</MonoText>
-                <span className={styles.metaLabel}>Scope</span>
-                <span className={styles.metaValue}>{selected.scope}</span>
-                {selected.system && (
-                  <>
-                    <span className={styles.metaLabel}>Type</span>
-                    <span className={styles.metaValue}>System role (read-only)</span>
-                  </>
-                )}
-              </div>
-
-              <SectionHeader>Assigned to groups</SectionHeader>
-              <div className={styles.sectionTags}>
-                {assignedGroups.map((g) => <Tag key={g.id} label={g.name} color="success" />)}
-                {assignedGroups.length === 0 && <span className={styles.inheritedNote}>(none)</span>}
-              </div>
-
-              <SectionHeader>Assigned to users (direct)</SectionHeader>
-              <div className={styles.sectionTags}>
-                {directUsers.map((u) => <Tag key={u.id} label={u.displayName} color="auto" />)}
-                {directUsers.length === 0 && <span className={styles.inheritedNote}>(none)</span>}
-              </div>
-
-              <SectionHeader>Effective principals</SectionHeader>
-              <div className={styles.sectionTags}>
-                {effectivePrincipals.map((u) => {
-                  const isDirect = u.directRoles.includes(selected.name)
-                  return (
-                    <Badge
-                      key={u.id}
-                      label={u.displayName}
-                      color="auto"
-                      variant={isDirect ? 'filled' : 'dashed'}
-                    />
-                  )
-                })}
-                {effectivePrincipals.length === 0 && <span className={styles.inheritedNote}>(none)</span>}
-              </div>
-              {effectivePrincipals.some((u) => !u.directRoles.includes(selected.name)) && (
-                <span className={styles.inheritedNote}>
-                  Dashed entries inherit this role through group membership
-                </span>
+            <EntityList
+              items={filtered}
+              renderItem={(role) => (
+                <>
+                  <Avatar name={role.name} size="sm" />
+                  <div className={styles.entityInfo}>
+                    <div className={styles.entityName}>
+                      {role.name}
+                      {role.system && <Badge label="system" color="auto" variant="outlined" className={styles.providerBadge} />}
+                    </div>
+                    <div className={styles.entityMeta}>
+                      {role.description} · {getAssignmentCount(role)} assignments
+                    </div>
+                    <div className={styles.entityTags}>
+                      {MOCK_GROUPS.filter((g) => g.directRoles.includes(role.name))
+                        .map((g) => <Badge key={g.id} label={g.name} color="success" />)}
+                      {MOCK_USERS.filter((u) => u.directRoles.includes(role.name))
+                        .map((u) => <Badge key={u.id} label={u.username} color="auto" />)}
+                    </div>
+                  </div>
+                </>
               )}
-            </>
-          ) : (
-            <div className={styles.emptyDetail}>Select a role to view details</div>
-          )}
-        </div>
-      </div>
+              getItemId={(role) => role.id}
+              selectedId={selectedId ?? undefined}
+              onSelect={setSelectedId}
+              searchPlaceholder="Search roles..."
+              onSearch={setSearch}
+              addLabel="+ Add role"
+              onAdd={() => setCreating(true)}
+              emptyMessage="No roles match your search"
+            />
+          </>
+        }
+        detail={selected ? (
+          <>
+            <div className={styles.detailHeader}>
+              <Avatar name={selected.name} size="lg" />
+              <div className={styles.detailHeaderInfo}>
+                <div className={styles.detailName}>{selected.name}</div>
+                {selected.description && (
+                  <div className={styles.detailEmail}>{selected.description}</div>
+                )}
+              </div>
+              {!selected.system && (
+                <Button
+                  size="sm"
+                  variant="danger"
+                  onClick={() => setDeleteTarget(selected)}
+                >
+                  Delete
+                </Button>
+              )}
+            </div>
+
+            <div className={styles.metaGrid}>
+              <span className={styles.metaLabel}>ID</span>
+              <MonoText size="xs">{selected.id}</MonoText>
+              <span className={styles.metaLabel}>Scope</span>
+              <span className={styles.metaValue}>{selected.scope}</span>
+              {selected.system && (
+                <>
+                  <span className={styles.metaLabel}>Type</span>
+                  <span className={styles.metaValue}>System role (read-only)</span>
+                </>
+              )}
+            </div>
+
+            <SectionHeader>Assigned to groups</SectionHeader>
+            <div className={styles.sectionTags}>
+              {assignedGroups.map((g) => <Tag key={g.id} label={g.name} color="success" />)}
+              {assignedGroups.length === 0 && <span className={styles.inheritedNote}>(none)</span>}
+            </div>
+
+            <SectionHeader>Assigned to users (direct)</SectionHeader>
+            <div className={styles.sectionTags}>
+              {directUsers.map((u) => <Tag key={u.id} label={u.displayName} color="auto" />)}
+              {directUsers.length === 0 && <span className={styles.inheritedNote}>(none)</span>}
+            </div>
+
+            <SectionHeader>Effective principals</SectionHeader>
+            <div className={styles.sectionTags}>
+              {effectivePrincipals.map((u) => {
+                const isDirect = u.directRoles.includes(selected.name)
+                return (
+                  <Badge
+                    key={u.id}
+                    label={u.displayName}
+                    color="auto"
+                    variant={isDirect ? 'filled' : 'dashed'}
+                  />
+                )
+              })}
+              {effectivePrincipals.length === 0 && <span className={styles.inheritedNote}>(none)</span>}
+            </div>
+            {effectivePrincipals.some((u) => !u.directRoles.includes(selected.name)) && (
+              <span className={styles.inheritedNote}>
+                Dashed entries inherit this role through group membership
+              </span>
+            )}
+          </>
+        ) : null}
+        emptyMessage="Select a role to view details"
+      />
 
       <ConfirmDialog
         open={deleteTarget !== null}

src/pages/Admin/UserManagement/UserManagement.module.css

@@ -1,63 +1,3 @@
-.splitPane {
-  display: grid;
-  grid-template-columns: 52fr 48fr;
-  gap: 1px;
-  background: var(--border-subtle);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-lg);
-  min-height: 500px;
-  box-shadow: var(--shadow-card);
-}
-
-.listPane {
-  background: var(--bg-surface);
-  display: flex;
-  flex-direction: column;
-  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
-}
-
-.detailPane {
-  background: var(--bg-surface);
-  overflow-y: auto;
-  padding: 20px;
-  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
-}
-
-.listHeader {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px;
-  border-bottom: 1px solid var(--border-subtle);
-}
-
-.listHeaderSearch {
-  flex: 1;
-}
-
-.entityList {
-  flex: 1;
-  overflow-y: auto;
-}
-
-.entityItem {
-  display: flex;
-  align-items: flex-start;
-  gap: 10px;
-  padding: 10px 12px;
-  cursor: pointer;
-  transition: background 0.1s;
-  border-bottom: 1px solid var(--border-subtle);
-}
-
-.entityItem:hover {
-  background: var(--bg-hover);
-}
-
-.entityItemSelected {
-  background: var(--bg-raised);
-}
-
 .entityInfo {
   flex: 1;
   min-width: 0;
@@ -140,16 +80,6 @@
   max-width: 240px;
 }
 
-.emptyDetail {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: var(--text-faint);
-  font-size: 13px;
-  font-family: var(--font-body);
-}
-
 .createForm {
   padding: 12px;
   border-bottom: 1px solid var(--border-subtle);
@@ -190,14 +120,6 @@
   margin-top: 16px;
 }
 
-.emptySearch {
-  padding: 32px;
-  text-align: center;
-  color: var(--text-faint);
-  font-size: 12px;
-  font-family: var(--font-body);
-}
-
 .securitySection {
   margin-top: 8px;
   margin-bottom: 8px;

src/pages/Admin/UserManagement/UsersTab.tsx

@@ -12,6 +12,8 @@ import { InfoCallout } from '../../../design-system/primitives/InfoCallout/InfoC
 import { MultiSelect } from '../../../design-system/composites/MultiSelect/MultiSelect'
 import { ConfirmDialog } from '../../../design-system/composites/ConfirmDialog/ConfirmDialog'
 import { AlertDialog } from '../../../design-system/composites/AlertDialog/AlertDialog'
+import { SplitPane } from '../../../design-system/composites/SplitPane/SplitPane'
+import { EntityList } from '../../../design-system/composites/EntityList/EntityList'
 import { useToast } from '../../../design-system/composites/Toast/Toast'
 import { MOCK_USERS, MOCK_GROUPS, MOCK_ROLES, getEffectiveRoles, type MockUser } from './rbacMocks'
 import styles from './UserManagement.module.css'
@@ -97,260 +99,243 @@ export function UsersTab() {
 
   return (
     <>
-      <div className={styles.splitPane}>
-        <div className={styles.listPane}>
-          <div className={styles.listHeader}>
-            <Input
-              placeholder="Search users..."
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              onClear={() => setSearch('')}
-              className={styles.listHeaderSearch}
-            />
-            <Button size="sm" variant="secondary" onClick={() => setCreating(true)}>
-              + Add user
-            </Button>
-          </div>
-
-          {creating && (
-            <div className={styles.createForm}>
-              <RadioGroup name="provider" value={newProvider} onChange={(v) => setNewProvider(v as 'local' | 'oidc')} orientation="horizontal">
-                <RadioItem value="local" label="Local" />
-                <RadioItem value="oidc" label="OIDC" />
-              </RadioGroup>
-              <div className={styles.createFormRow}>
-                <Input placeholder="Username *" value={newUsername} onChange={(e) => setNewUsername(e.target.value)} />
-                <Input placeholder="Display name" value={newDisplay} onChange={(e) => setNewDisplay(e.target.value)} />
-              </div>
-              {duplicateUsername && <span style={{ color: 'var(--error)', fontSize: 11 }}>Username already exists</span>}
-              <Input placeholder="Email" value={newEmail} onChange={(e) => setNewEmail(e.target.value)} />
-              {newProvider === 'local' && (
-                <Input placeholder="Password *" type="password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} />
-              )}
-              {newProvider === 'oidc' && (
-                <InfoCallout variant="amber">
-                  OIDC users authenticate via the configured identity provider. Pre-register to assign roles/groups before their first login.
-                </InfoCallout>
-              )}
-              <div className={styles.createFormActions}>
-                <Button size="sm" variant="ghost" onClick={() => setCreating(false)}>Cancel</Button>
-                <Button
-                  size="sm"
-                  variant="primary"
-                  onClick={handleCreate}
-                  disabled={!newUsername.trim() || (newProvider === 'local' && !newPassword.trim()) || duplicateUsername}
-                >
-                  Create
-                </Button>
-              </div>
-            </div>
-          )}
-
-          <div className={styles.entityList} role="listbox" aria-label="Users">
-            {filtered.map((user) => (
-              <div
-                key={user.id}
-                className={`${styles.entityItem} ${selectedId === user.id ? styles.entityItemSelected : ''}`}
-                onClick={() => { setSelectedId(user.id); setResettingPassword(false) }}
-                role="option"
-                tabIndex={0}
-                aria-selected={selectedId === user.id}
-                onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setSelectedId(user.id); setResettingPassword(false) } }}
-              >
-                <Avatar name={user.displayName} size="sm" />
-                <div className={styles.entityInfo}>
-                  <div className={styles.entityName}>
-                    {user.displayName}
-                    {user.provider !== 'local' && (
-                      <Badge label={user.provider} color="running" variant="outlined" className={styles.providerBadge} />
-                    )}
-                  </div>
-                  <div className={styles.entityMeta}>
-                    {user.email} &middot; {getUserGroupPath(user)}
-                  </div>
-                  <div className={styles.entityTags}>
-                    {user.directRoles.map((r) => <Badge key={r} label={r} color="warning" />)}
-                    {user.directGroups.map((gId) => {
-                      const g = MOCK_GROUPS.find((gr) => gr.id === gId)
-                      return g ? <Badge key={gId} label={g.name} color="success" /> : null
-                    })}
-                  </div>
+      <SplitPane
+        list={
+          <>
+            {creating && (
+              <div className={styles.createForm}>
+                <RadioGroup name="provider" value={newProvider} onChange={(v) => setNewProvider(v as 'local' | 'oidc')} orientation="horizontal">
+                  <RadioItem value="local" label="Local" />
+                  <RadioItem value="oidc" label="OIDC" />
+                </RadioGroup>
+                <div className={styles.createFormRow}>
+                  <Input placeholder="Username *" value={newUsername} onChange={(e) => setNewUsername(e.target.value)} />
+                  <Input placeholder="Display name" value={newDisplay} onChange={(e) => setNewDisplay(e.target.value)} />
+                </div>
+                {duplicateUsername && <span style={{ color: 'var(--error)', fontSize: 11 }}>Username already exists</span>}
+                <Input placeholder="Email" value={newEmail} onChange={(e) => setNewEmail(e.target.value)} />
+                {newProvider === 'local' && (
+                  <Input placeholder="Password *" type="password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} />
+                )}
+                {newProvider === 'oidc' && (
+                  <InfoCallout variant="amber">
+                    OIDC users authenticate via the configured identity provider. Pre-register to assign roles/groups before their first login.
+                  </InfoCallout>
+                )}
+                <div className={styles.createFormActions}>
+                  <Button size="sm" variant="ghost" onClick={() => setCreating(false)}>Cancel</Button>
+                  <Button
+                    size="sm"
+                    variant="primary"
+                    onClick={handleCreate}
+                    disabled={!newUsername.trim() || (newProvider === 'local' && !newPassword.trim()) || duplicateUsername}
+                  >
+                    Create
+                  </Button>
                 </div>
               </div>
-            ))}
-            {filtered.length === 0 && (
-              <div className={styles.emptySearch}>No users match your search</div>
             )}
-          </div>
-        </div>
 
-        <div className={styles.detailPane}>
-          {selected ? (
-            <>
-              <div className={styles.detailHeader}>
-                <Avatar name={selected.displayName} size="lg" />
-                <div className={styles.detailHeaderInfo}>
-                  <div className={styles.detailName}>
-                    <InlineEdit
-                      value={selected.displayName}
-                      onSave={(v) => updateUser(selected.id, { displayName: v })}
-                    />
-                  </div>
-                  <div className={styles.detailEmail}>{selected.email}</div>
-                </div>
-                <Button
-                  size="sm"
-                  variant="danger"
-                  onClick={() => setDeleteTarget(selected)}
-                  disabled={selected.username === 'hendrik'}
-                >
-                  Delete
-                </Button>
-              </div>
-
-              <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.id}</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}>
-                {selected.provider === 'local' ? (
-                  <>
-                    <div className={styles.securityRow}>
-                      <span className={styles.metaLabel}>Password</span>
-                      <span className={styles.passwordDots}>••••••••</span>
-                      {!resettingPassword && (
-                        <Button size="sm" variant="ghost" onClick={() => { setResettingPassword(true); setNewPw('') }}>
-                          Reset password
-                        </Button>
+            <EntityList
+              items={filtered}
+              renderItem={(user) => (
+                <>
+                  <Avatar name={user.displayName} size="sm" />
+                  <div className={styles.entityInfo}>
+                    <div className={styles.entityName}>
+                      {user.displayName}
+                      {user.provider !== 'local' && (
+                        <Badge label={user.provider} color="running" variant="outlined" className={styles.providerBadge} />
                       )}
                     </div>
-                    {resettingPassword && (
-                      <div className={styles.resetForm}>
-                        <Input
-                          placeholder="New password"
-                          type="password"
-                          value={newPw}
-                          onChange={(e) => setNewPw(e.target.value)}
-                          className={styles.resetInput}
-                        />
-                        <Button size="sm" variant="ghost" onClick={() => setResettingPassword(false)}>Cancel</Button>
-                        <Button
-                          size="sm"
-                          variant="primary"
-                          onClick={() => { setResettingPassword(false); toast({ title: 'Password updated', description: selected.username, variant: 'success' }) }}
-                          disabled={!newPw.trim()}
-                        >
-                          Set
-                        </Button>
-                      </div>
-                    )}
-                  </>
-                ) : (
-                  <>
-                    <div className={styles.securityRow}>
-                      <span className={styles.metaLabel}>Authentication</span>
-                      <span className={styles.metaValue}>OIDC ({selected.provider})</span>
+                    <div className={styles.entityMeta}>
+                      {user.email} &middot; {getUserGroupPath(user)}
                     </div>
-                    <InfoCallout variant="amber">
-                      Password managed by the identity provider.
-                    </InfoCallout>
-                  </>
-                )}
-              </div>
-
-              <SectionHeader>Group membership (direct only)</SectionHeader>
-              <div className={styles.sectionTags}>
-                {selected.directGroups.map((gId) => {
-                  const g = MOCK_GROUPS.find((gr) => gr.id === gId)
-                  return g ? (
-                    <Tag
-                      key={gId}
-                      label={g.name}
-                      color="success"
-                      onRemove={() => {
-                        const group = MOCK_GROUPS.find((gr) => gr.id === gId)
-                        if (group && group.directRoles.length > 0) {
-                          setRemoveGroupTarget(gId)
-                        } else {
-                          updateUser(selected.id, { directGroups: selected.directGroups.filter((id) => id !== gId) })
-                          toast({ title: 'Group removed', variant: 'success' })
-                        }
-                      }}
-                    />
-                  ) : null
-                })}
-                {selected.directGroups.length === 0 && (
-                  <span className={styles.inheritedNote}>(no groups)</span>
-                )}
-                <MultiSelect
-                  options={availableGroups}
-                  value={[]}
-                  onChange={(ids) => {
-                    updateUser(selected.id, { directGroups: [...selected.directGroups, ...ids] })
-                    toast({ title: `${ids.length} group(s) added`, variant: 'success' })
-                  }}
-                  placeholder="+ Add"
-                />
-              </div>
-
-              <SectionHeader>Effective roles (direct + inherited)</SectionHeader>
-              <div className={styles.sectionTags}>
-                {effectiveRoles.map(({ role, source }) =>
-                  source === 'direct' ? (
-                    <Tag
-                      key={role}
-                      label={role}
-                      color="warning"
-                      onRemove={() => {
-                        updateUser(selected.id, { directRoles: selected.directRoles.filter((r) => r !== role) })
-                        toast({ title: 'Role removed', description: role, variant: 'success' })
-                      }}
-                    />
-                  ) : (
-                    <Badge
-                      key={role}
-                      label={`${role} ↑ ${source}`}
-                      color="warning"
-                      variant="dashed"
-                      className={styles.inherited}
-                    />
-                  )
-                )}
-                {effectiveRoles.length === 0 && (
-                  <span className={styles.inheritedNote}>(no roles)</span>
-                )}
-                <MultiSelect
-                  options={availableRoles}
-                  value={[]}
-                  onChange={(roles) => {
-                    updateUser(selected.id, { directRoles: [...selected.directRoles, ...roles] })
-                    toast({ title: `${roles.length} role(s) added`, variant: 'success' })
-                  }}
-                  placeholder="+ Add"
-                />
-              </div>
-              {effectiveRoles.some((r) => r.source !== 'direct') && (
-                <span className={styles.inheritedNote}>
-                  Roles with ↑ are inherited through group membership
-                </span>
+                    <div className={styles.entityTags}>
+                      {user.directRoles.map((r) => <Badge key={r} label={r} color="warning" />)}
+                      {user.directGroups.map((gId) => {
+                        const g = MOCK_GROUPS.find((gr) => gr.id === gId)
+                        return g ? <Badge key={gId} label={g.name} color="success" /> : null
+                      })}
+                    </div>
+                  </div>
+                </>
               )}
-            </>
-          ) : (
-            <div className={styles.emptyDetail}>Select a user to view details</div>
-          )}
-        </div>
-      </div>
+              getItemId={(user) => user.id}
+              selectedId={selectedId ?? undefined}
+              onSelect={(id) => { setSelectedId(id); setResettingPassword(false) }}
+              searchPlaceholder="Search users..."
+              onSearch={setSearch}
+              addLabel="+ Add user"
+              onAdd={() => setCreating(true)}
+              emptyMessage="No users match your search"
+            />
+          </>
+        }
+        detail={selected ? (
+          <>
+            <div className={styles.detailHeader}>
+              <Avatar name={selected.displayName} size="lg" />
+              <div className={styles.detailHeaderInfo}>
+                <div className={styles.detailName}>
+                  <InlineEdit
+                    value={selected.displayName}
+                    onSave={(v) => updateUser(selected.id, { displayName: v })}
+                  />
+                </div>
+                <div className={styles.detailEmail}>{selected.email}</div>
+              </div>
+              <Button
+                size="sm"
+                variant="danger"
+                onClick={() => setDeleteTarget(selected)}
+                disabled={selected.username === 'hendrik'}
+              >
+                Delete
+              </Button>
+            </div>
+
+            <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.id}</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}>
+              {selected.provider === 'local' ? (
+                <>
+                  <div className={styles.securityRow}>
+                    <span className={styles.metaLabel}>Password</span>
+                    <span className={styles.passwordDots}>••••••••</span>
+                    {!resettingPassword && (
+                      <Button size="sm" variant="ghost" onClick={() => { setResettingPassword(true); setNewPw('') }}>
+                        Reset password
+                      </Button>
+                    )}
+                  </div>
+                  {resettingPassword && (
+                    <div className={styles.resetForm}>
+                      <Input
+                        placeholder="New password"
+                        type="password"
+                        value={newPw}
+                        onChange={(e) => setNewPw(e.target.value)}
+                        className={styles.resetInput}
+                      />
+                      <Button size="sm" variant="ghost" onClick={() => setResettingPassword(false)}>Cancel</Button>
+                      <Button
+                        size="sm"
+                        variant="primary"
+                        onClick={() => { setResettingPassword(false); toast({ title: 'Password updated', description: selected.username, variant: 'success' }) }}
+                        disabled={!newPw.trim()}
+                      >
+                        Set
+                      </Button>
+                    </div>
+                  )}
+                </>
+              ) : (
+                <>
+                  <div className={styles.securityRow}>
+                    <span className={styles.metaLabel}>Authentication</span>
+                    <span className={styles.metaValue}>OIDC ({selected.provider})</span>
+                  </div>
+                  <InfoCallout variant="amber">
+                    Password managed by the identity provider.
+                  </InfoCallout>
+                </>
+              )}
+            </div>
+
+            <SectionHeader>Group membership (direct only)</SectionHeader>
+            <div className={styles.sectionTags}>
+              {selected.directGroups.map((gId) => {
+                const g = MOCK_GROUPS.find((gr) => gr.id === gId)
+                return g ? (
+                  <Tag
+                    key={gId}
+                    label={g.name}
+                    color="success"
+                    onRemove={() => {
+                      const group = MOCK_GROUPS.find((gr) => gr.id === gId)
+                      if (group && group.directRoles.length > 0) {
+                        setRemoveGroupTarget(gId)
+                      } else {
+                        updateUser(selected.id, { directGroups: selected.directGroups.filter((id) => id !== gId) })
+                        toast({ title: 'Group removed', variant: 'success' })
+                      }
+                    }}
+                  />
+                ) : null
+              })}
+              {selected.directGroups.length === 0 && (
+                <span className={styles.inheritedNote}>(no groups)</span>
+              )}
+              <MultiSelect
+                options={availableGroups}
+                value={[]}
+                onChange={(ids) => {
+                  updateUser(selected.id, { directGroups: [...selected.directGroups, ...ids] })
+                  toast({ title: `${ids.length} group(s) added`, variant: 'success' })
+                }}
+                placeholder="+ Add"
+              />
+            </div>
+
+            <SectionHeader>Effective roles (direct + inherited)</SectionHeader>
+            <div className={styles.sectionTags}>
+              {effectiveRoles.map(({ role, source }) =>
+                source === 'direct' ? (
+                  <Tag
+                    key={role}
+                    label={role}
+                    color="warning"
+                    onRemove={() => {
+                      updateUser(selected.id, { directRoles: selected.directRoles.filter((r) => r !== role) })
+                      toast({ title: 'Role removed', description: role, variant: 'success' })
+                    }}
+                  />
+                ) : (
+                  <Badge
+                    key={role}
+                    label={`${role} ↑ ${source}`}
+                    color="warning"
+                    variant="dashed"
+                    className={styles.inherited}
+                  />
+                )
+              )}
+              {effectiveRoles.length === 0 && (
+                <span className={styles.inheritedNote}>(no roles)</span>
+              )}
+              <MultiSelect
+                options={availableRoles}
+                value={[]}
+                onChange={(roles) => {
+                  updateUser(selected.id, { directRoles: [...selected.directRoles, ...roles] })
+                  toast({ title: `${roles.length} role(s) added`, variant: 'success' })
+                }}
+                placeholder="+ Add"
+              />
+            </div>
+            {effectiveRoles.some((r) => r.source !== 'direct') && (
+              <span className={styles.inheritedNote}>
+                Roles with ↑ are inherited through group membership
+              </span>
+            )}
+          </>
+        ) : null}
+        emptyMessage="Select a user to view details"
+      />
 
       <ConfirmDialog
         open={deleteTarget !== null}

src/pages/AgentInstance/AgentInstance.module.css

@@ -51,20 +51,6 @@
   font-family: var(--font-mono);
 }
 
-/* Section header — matches /agents */
-.sectionHeaderRow {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 12px;
-}
-
-.sectionTitle {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-primary);
-}
-
 /* Charts 3x2 grid */
 .chartsGrid {
   display: grid;
@@ -125,12 +111,6 @@
   font-weight: 500;
 }
 
-.fdRow {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
 /* Log + Timeline side by side */
 .bottomRow {
   display: grid;
@@ -155,52 +135,7 @@
   border-bottom: 1px solid var(--border-subtle);
 }
 
-.logEntries {
-  max-height: 360px;
-  overflow-y: auto;
-  font-size: 11px;
-}
-
-.logEntry {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  padding: 5px 16px;
-  border-bottom: 1px solid var(--border-subtle);
-  font-family: var(--font-mono);
-  transition: background 0.1s;
-}
-
-.logEntry:hover {
-  background: var(--bg-hover);
-}
-
-.logEntry:last-child {
-  border-bottom: none;
-}
-
-.logTime {
-  flex-shrink: 0;
-  color: var(--text-muted);
-  min-width: 60px;
-}
-
-.logLogger {
-  flex-shrink: 0;
-  color: var(--text-faint);
-  max-width: 220px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.logMsg {
-  color: var(--text-primary);
-  font-family: var(--font-mono);
-  font-size: 11px;
-  word-break: break-word;
-}
-
+/* Empty state (shared) */
 .logEmpty {
   padding: 24px;
   text-align: center;

src/pages/AgentInstance/AgentInstance.tsx

@@ -12,16 +12,15 @@ import { LineChart } from '../../design-system/composites/LineChart/LineChart'
 import { AreaChart } from '../../design-system/composites/AreaChart/AreaChart'
 import { EventFeed } from '../../design-system/composites/EventFeed/EventFeed'
 import { Tabs } from '../../design-system/composites/Tabs/Tabs'
+import { LogViewer } from '../../design-system/composites/LogViewer/LogViewer'
+import type { LogEntry } from '../../design-system/composites/LogViewer/LogViewer'
 
 // Primitives
 import { StatusDot } from '../../design-system/primitives/StatusDot/StatusDot'
 import { MonoText } from '../../design-system/primitives/MonoText/MonoText'
 import { Badge } from '../../design-system/primitives/Badge/Badge'
 import { StatCard } from '../../design-system/primitives/StatCard/StatCard'
-import { ProgressBar } from '../../design-system/primitives/ProgressBar/ProgressBar'
 import { SectionHeader } from '../../design-system/primitives/SectionHeader/SectionHeader'
-import { Card } from '../../design-system/primitives/Card/Card'
-import { CodeBlock } from '../../design-system/primitives/CodeBlock/CodeBlock'
 
 // Global filters
 import { useGlobalFilters } from '../../design-system/providers/GlobalFilterProvider'
@@ -53,27 +52,23 @@ function buildMemoryHistory(currentPct: number) {
 
 // ── Mock log entries ─────────────────────────────────────────────────────────
 
-function buildLogEntries(agentName: string) {
+function buildLogEntries(agentName: string): LogEntry[] {
   const now = Date.now()
   const MIN = 60_000
   return [
-    { ts: new Date(now - 1 * MIN).toISOString(), level: 'INFO', logger: 'o.a.c.impl.DefaultCamelContext', msg: `Route order-validation started and consuming from: direct:validate` },
-    { ts: new Date(now - 2 * MIN).toISOString(), level: 'INFO', logger: 'o.a.c.impl.DefaultCamelContext', msg: `Total 3 routes, of which 3 are started` },
-    { ts: new Date(now - 5 * MIN).toISOString(), level: 'WARN', logger: 'o.a.c.processor.errorhandler', msg: `Failed delivery for exchangeId: ID-${agentName}-1710847200000-0-1. Exhausted after 3 attempts.` },
-    { ts: new Date(now - 8 * MIN).toISOString(), level: 'INFO', logger: 'o.a.c.health.HealthCheckHelper', msg: `Health check [routes] is UP` },
-    { ts: new Date(now - 12 * MIN).toISOString(), level: 'INFO', logger: 'o.a.c.health.HealthCheckHelper', msg: `Health check [consumers] is UP` },
-    { ts: new Date(now - 15 * MIN).toISOString(), level: 'DEBUG', logger: 'o.a.c.component.kafka', msg: `KafkaConsumer[order-events] poll returned 42 records in 18ms` },
-    { ts: new Date(now - 18 * MIN).toISOString(), level: 'INFO', logger: 'o.a.c.impl.engine.InternalRouteStartup', msg: `Route order-enrichment started and consuming from: kafka:order-events` },
-    { ts: new Date(now - 25 * MIN).toISOString(), level: 'WARN', logger: 'o.a.c.component.http', msg: `HTTP endpoint https://payment-api.internal/verify returned 503 — will retry` },
-    { ts: new Date(now - 30 * MIN).toISOString(), level: 'INFO', logger: 'o.a.c.impl.DefaultCamelContext', msg: `Apache Camel ${agentName} (CamelContext) is starting` },
-    { ts: new Date(now - 32 * MIN).toISOString(), level: 'INFO', logger: 'org.springframework.boot', msg: `Started ${agentName} in 4.231 seconds (process running for 4.892)` },
+    { timestamp: new Date(now - 1 * MIN).toISOString(), level: 'info', message: `[o.a.c.impl.DefaultCamelContext] Route order-validation started and consuming from: direct:validate` },
+    { timestamp: new Date(now - 2 * MIN).toISOString(), level: 'info', message: `[o.a.c.impl.DefaultCamelContext] Total 3 routes, of which 3 are started` },
+    { timestamp: new Date(now - 5 * MIN).toISOString(), level: 'warn', message: `[o.a.c.processor.errorhandler] Failed delivery for exchangeId: ID-${agentName}-1710847200000-0-1. Exhausted after 3 attempts.` },
+    { timestamp: new Date(now - 8 * MIN).toISOString(), level: 'info', message: `[o.a.c.health.HealthCheckHelper] Health check [routes] is UP` },
+    { timestamp: new Date(now - 12 * MIN).toISOString(), level: 'info', message: `[o.a.c.health.HealthCheckHelper] Health check [consumers] is UP` },
+    { timestamp: new Date(now - 15 * MIN).toISOString(), level: 'debug', message: `[o.a.c.component.kafka] KafkaConsumer[order-events] poll returned 42 records in 18ms` },
+    { timestamp: new Date(now - 18 * MIN).toISOString(), level: 'info', message: `[o.a.c.impl.engine.InternalRouteStartup] Route order-enrichment started and consuming from: kafka:order-events` },
+    { timestamp: new Date(now - 25 * MIN).toISOString(), level: 'warn', message: `[o.a.c.component.http] HTTP endpoint https://payment-api.internal/verify returned 503 — will retry` },
+    { timestamp: new Date(now - 30 * MIN).toISOString(), level: 'info', message: `[o.a.c.impl.DefaultCamelContext] Apache Camel ${agentName} (CamelContext) is starting` },
+    { timestamp: new Date(now - 32 * MIN).toISOString(), level: 'info', message: `[org.springframework.boot] Started ${agentName} in 4.231 seconds (process running for 4.892)` },
   ]
 }
 
-function formatLogTime(iso: string): string {
-  return new Date(iso).toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false })
-}
-
 // ── Mock JVM / process info ──────────────────────────────────────────────────
 
 function buildProcessInfo(agent: typeof agents[0]) {
@@ -144,7 +139,7 @@ export function AgentInstance() {
   const logEntries = buildLogEntries(agent.name)
   const filteredLogs = logFilter === 'all'
     ? logEntries
-    : logEntries.filter((l) => l.level === logFilter.toUpperCase())
+    : logEntries.filter((l) => l.level === logFilter)
 
   const cpuData = buildTimeSeries(agent.cpuUsagePct, 15)
   const memSeries = buildMemoryHistory(agent.memoryUsagePct)
@@ -289,22 +284,7 @@ export function AgentInstance() {
               <SectionHeader>Application Log</SectionHeader>
               <Tabs tabs={LOG_TABS} active={logFilter} onChange={setLogFilter} />
             </div>
-            <div className={styles.logEntries}>
-              {filteredLogs.map((entry, i) => (
-                <div key={i} className={styles.logEntry}>
-                  <MonoText size="xs" className={styles.logTime}>{formatLogTime(entry.ts)}</MonoText>
-                  <Badge
-                    label={entry.level}
-                    color={entry.level === 'WARN' ? 'warning' : entry.level === 'ERROR' ? 'error' : entry.level === 'DEBUG' ? 'auto' : 'success'}
-                  />
-                  <MonoText size="xs" className={styles.logLogger}>{entry.logger}</MonoText>
-                  <span className={styles.logMsg}>{entry.msg}</span>
-                </div>
-              ))}
-              {filteredLogs.length === 0 && (
-                <div className={styles.logEmpty}>No log entries match the selected filter.</div>
-              )}
-            </div>
+            <LogViewer entries={filteredLogs} maxHeight={360} />
           </div>
 
           {/* Timeline */}

src/pages/Dashboard/Dashboard.module.css

@@ -7,14 +7,6 @@
   background: var(--bg-body);
 }
 
-/* Health strip */
-.healthStrip {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  gap: 10px;
-  margin-bottom: 16px;
-}
-
 /* Filter bar spacing */
 .filterBar {
   margin-bottom: 16px;

src/pages/Dashboard/Dashboard.tsx

@@ -15,9 +15,10 @@ import { ShortcutsBar } from '../../design-system/composites/ShortcutsBar/Shortc
 import { ProcessorTimeline } from '../../design-system/composites/ProcessorTimeline/ProcessorTimeline'
 import { RouteFlow } from '../../design-system/composites/RouteFlow/RouteFlow'
 import type { RouteNode } from '../../design-system/composites/RouteFlow/RouteFlow'
+import { KpiStrip } from '../../design-system/composites/KpiStrip/KpiStrip'
+import type { KpiItem } from '../../design-system/composites/KpiStrip/KpiStrip'
 
 // Primitives
-import { StatCard } from '../../design-system/primitives/StatCard/StatCard'
 import { StatusDot } from '../../design-system/primitives/StatusDot/StatusDot'
 import { MonoText } from '../../design-system/primitives/MonoText/MonoText'
 import { Badge } from '../../design-system/primitives/Badge/Badge'
@@ -27,12 +28,44 @@ import { useGlobalFilters } from '../../design-system/providers/GlobalFilterProv
 
 // Mock data
 import { exchanges, type Exchange } from '../../mocks/exchanges'
-import { kpiMetrics } from '../../mocks/metrics'
+import { kpiMetrics, type KpiMetric } from '../../mocks/metrics'
 import { SIDEBAR_APPS, buildRouteToAppMap } from '../../mocks/sidebar'
 
 // Route → Application lookup
 const ROUTE_TO_APP = buildRouteToAppMap()
 
+// ─── KPI mapping ─────────────────────────────────────────────────────────────
+const ACCENT_TO_COLOR: Record<KpiMetric['accent'], string> = {
+  amber: 'var(--amber)',
+  success: 'var(--success)',
+  error: 'var(--error)',
+  running: 'var(--running)',
+  warning: 'var(--warning)',
+}
+
+const TREND_ICONS: Record<KpiMetric['trend'], string> = {
+  up: '\u2191',
+  down: '\u2193',
+  neutral: '\u2192',
+}
+
+function sentimentToVariant(sentiment: KpiMetric['trendSentiment']): 'success' | 'error' | 'muted' {
+  switch (sentiment) {
+    case 'good': return 'success'
+    case 'bad': return 'error'
+    case 'neutral': return 'muted'
+  }
+}
+
+const kpiItems: KpiItem[] = kpiMetrics.map((m) => ({
+  label: m.label,
+  value: m.unit ? `${m.value} ${m.unit}` : m.value,
+  trend: { label: `${TREND_ICONS[m.trend]} ${m.trendValue}`, variant: sentimentToVariant(m.trendSentiment) },
+  subtitle: m.detail,
+  sparkline: m.sparkline,
+  borderColor: ACCENT_TO_COLOR[m.accent],
+}))
+
 // ─── Helpers ─────────────────────────────────────────────────────────────────
 function formatDuration(ms: number): string {
   if (ms >= 60_000) return `${(ms / 1000).toFixed(0)}s`
@@ -370,20 +403,7 @@ export function Dashboard() {
       <div className={styles.content}>
 
         {/* Health strip */}
-        <div className={styles.healthStrip}>
-          {kpiMetrics.map((kpi, i) => (
-            <StatCard
-              key={i}
-              label={kpi.label}
-              value={kpi.value}
-              detail={kpi.detail}
-              trend={kpi.trend}
-              trendValue={kpi.trendValue}
-              accent={kpi.accent}
-              sparkline={kpi.sparkline}
-            />
-          ))}
-        </div>
+        <KpiStrip items={kpiItems} />
 
         {/* Exchanges table */}
         <div className={styles.tableSection}>

src/pages/Routes/Routes.module.css

@@ -35,176 +35,6 @@
   font-family: var(--font-mono);
 }
 
-/* KPI strip */
-.kpiStrip {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  gap: 12px;
-  margin-bottom: 20px;
-}
-
-/* KPI card */
-.kpiCard {
-  background: var(--bg-surface);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-lg);
-  padding: 16px 18px 12px;
-  box-shadow: var(--shadow-card);
-  position: relative;
-  overflow: hidden;
-  transition: box-shadow 0.15s;
-}
-
-.kpiCard:hover {
-  box-shadow: var(--shadow-md);
-}
-
-.kpiCard::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 3px;
-}
-
-.kpiCardAmber::before  { background: linear-gradient(90deg, var(--amber), transparent); }
-.kpiCardGreen::before  { background: linear-gradient(90deg, var(--success), transparent); }
-.kpiCardError::before  { background: linear-gradient(90deg, var(--error), transparent); }
-.kpiCardTeal::before   { background: linear-gradient(90deg, var(--running), transparent); }
-.kpiCardWarn::before   { background: linear-gradient(90deg, var(--warning), transparent); }
-
-.kpiLabel {
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.6px;
-  color: var(--text-muted);
-  margin-bottom: 6px;
-}
-
-.kpiValueRow {
-  display: flex;
-  align-items: baseline;
-  gap: 6px;
-  margin-bottom: 4px;
-}
-
-.kpiValue {
-  font-family: var(--font-mono);
-  font-size: 26px;
-  font-weight: 600;
-  line-height: 1.2;
-}
-
-.kpiValueAmber  { color: var(--amber); }
-.kpiValueGreen  { color: var(--success); }
-.kpiValueError  { color: var(--error); }
-.kpiValueTeal   { color: var(--running); }
-.kpiValueWarn   { color: var(--warning); }
-
-.kpiUnit {
-  font-size: 12px;
-  color: var(--text-muted);
-}
-
-.kpiTrend {
-  font-family: var(--font-mono);
-  font-size: 11px;
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-  margin-left: auto;
-}
-
-.trendUpGood   { color: var(--success); }
-.trendUpBad    { color: var(--error); }
-.trendDownGood { color: var(--success); }
-.trendDownBad  { color: var(--error); }
-.trendFlat     { color: var(--text-muted); }
-
-.kpiDetail {
-  font-size: 11px;
-  color: var(--text-muted);
-  margin-top: 2px;
-}
-
-.kpiDetailStrong {
-  color: var(--text-secondary);
-  font-weight: 600;
-}
-
-.kpiSparkline {
-  margin-top: 8px;
-  height: 32px;
-}
-
-/* Latency percentiles card */
-.latencyValues {
-  display: flex;
-  gap: 12px;
-  margin-bottom: 4px;
-}
-
-.latencyItem {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.latencyLabel {
-  font-size: 9px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: var(--text-muted);
-}
-
-.latencyVal {
-  font-family: var(--font-mono);
-  font-size: 18px;
-  font-weight: 600;
-  line-height: 1.2;
-}
-
-.latValGreen { color: var(--success); }
-.latValAmber { color: var(--amber); }
-.latValRed   { color: var(--error); }
-
-.latencyTrend {
-  font-family: var(--font-mono);
-  font-size: 9px;
-}
-
-/* Active routes donut */
-.donutWrap {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-top: 4px;
-}
-
-.donutLabel {
-  font-family: var(--font-mono);
-  font-size: 10px;
-  font-weight: 600;
-  color: var(--text-secondary);
-}
-
-.donutLegend {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  font-size: 10px;
-  color: var(--text-muted);
-}
-
-.donutLegendActive {
-  color: var(--running);
-  font-weight: 600;
-}
-
 /* Route performance table */
 .tableSection {
   background: var(--bg-surface);
@@ -273,24 +103,6 @@
   gap: 16px;
 }
 
-.chartCard {
-  background: var(--bg-surface);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-lg);
-  box-shadow: var(--shadow-card);
-  padding: 16px;
-  overflow: hidden;
-}
-
-.chartTitle {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  margin-bottom: 12px;
-}
-
 .chart {
   width: 100%;
 }

src/pages/Routes/Routes.tsx

@@ -15,11 +15,14 @@ import { DataTable } from '../../design-system/composites/DataTable/DataTable'
 import type { Column } from '../../design-system/composites/DataTable/types'
 import { RouteFlow } from '../../design-system/composites/RouteFlow/RouteFlow'
 import type { RouteNode } from '../../design-system/composites/RouteFlow/RouteFlow'
+import { KpiStrip } from '../../design-system/composites'
+import type { KpiItem } from '../../design-system/composites'
 
 // Primitives
 import { Sparkline } from '../../design-system/primitives/Sparkline/Sparkline'
 import { MonoText } from '../../design-system/primitives/MonoText/MonoText'
 import { Badge } from '../../design-system/primitives/Badge/Badge'
+import { Card } from '../../design-system/primitives'
 
 // Mock data
 import {
@@ -34,8 +37,8 @@ import { SIDEBAR_APPS, buildRouteToAppMap } from '../../mocks/sidebar'
 
 const ROUTE_TO_APP = buildRouteToAppMap()
 
-// ─── KPI Header Strip (matches mock-v3-metrics-dashboard) ────────────────────
-function KpiHeader({ scopedMetrics }: { scopedMetrics: RouteMetricRow[] }) {
+// ─── Build KPI items from scoped route metrics ──────────────────────────────
+function buildKpiItems(scopedMetrics: RouteMetricRow[]): KpiItem[] {
   const totalExchanges = scopedMetrics.reduce((sum, r) => sum + r.exchangeCount, 0)
   const totalErrors = scopedMetrics.reduce((sum, r) => sum + r.errorCount, 0)
   const errorRate = totalExchanges > 0 ? ((totalErrors / totalExchanges) * 100) : 0
@@ -45,113 +48,57 @@ function KpiHeader({ scopedMetrics }: { scopedMetrics: RouteMetricRow[] }) {
   const p99Latency = scopedMetrics.length > 0
     ? Math.max(...scopedMetrics.map((r) => r.p99DurationMs))
     : 0
-  const avgSuccessRate = scopedMetrics.length > 0
-    ? Number((scopedMetrics.reduce((sum, r) => sum + r.successRate, 0) / scopedMetrics.length).toFixed(1))
-    : 0
   const throughputPerSec = totalExchanges > 0 ? (totalExchanges / 360).toFixed(1) : '0'
   const activeRoutes = scopedMetrics.length
   const totalRoutes = routeMetrics.length
 
-  return (
-    <div className={styles.kpiStrip}>
-      {/* Card 1: Total Throughput */}
-      <div className={`${styles.kpiCard} ${styles.kpiCardAmber}`}>
-        <div className={styles.kpiLabel}>Total Throughput</div>
-        <div className={styles.kpiValueRow}>
-          <span className={`${styles.kpiValue} ${styles.kpiValueAmber}`}>{totalExchanges.toLocaleString()}</span>
-          <span className={styles.kpiUnit}>exchanges</span>
-          <span className={`${styles.kpiTrend} ${styles.trendUpGood}`}>&#9650; +8%</span>
-        </div>
-        <div className={styles.kpiDetail}>
-          <span className={styles.kpiDetailStrong}>{throughputPerSec}</span> msg/s · Capacity 39%
-        </div>
-        <div className={styles.kpiSparkline}>
-          <Sparkline data={[44, 46, 45, 47, 48, 46, 47, 48, 46, 47, 48, 47, 46, 47]} color="var(--amber)" width={200} height={32} />
-        </div>
-      </div>
+  const p50 = Math.round(avgLatency * 0.5)
+  const p95 = Math.round(avgLatency * 1.4)
+  const slaStatus = p99Latency > 300 ? 'BREACH' : 'OK'
 
-      {/* Card 2: System Error Rate */}
-      <div className={`${styles.kpiCard} ${errorRate < 1 ? styles.kpiCardGreen : styles.kpiCardError}`}>
-        <div className={styles.kpiLabel}>System Error Rate</div>
-        <div className={styles.kpiValueRow}>
-          <span className={`${styles.kpiValue} ${errorRate < 1 ? styles.kpiValueGreen : styles.kpiValueError}`}>{errorRate.toFixed(2)}%</span>
-          <span className={`${styles.kpiTrend} ${errorRate < 1 ? styles.trendDownGood : styles.trendUpBad}`}>
-            {errorRate < 1 ? '\u25BC -0.1%' : '\u25B2 +0.4%'}
-          </span>
-        </div>
-        <div className={styles.kpiDetail}>
-          <span className={styles.kpiDetailStrong}>{totalErrors}</span> errors / <span className={styles.kpiDetailStrong}>{totalExchanges.toLocaleString()}</span> total (6h)
-        </div>
-        <div className={styles.kpiSparkline}>
-          <Sparkline data={[1.2, 1.8, 1.5, 2.1, 2.4, 2.2, 2.5, 2.6, 2.7, 2.8, 2.7, 2.9, 2.8, errorRate]} color={errorRate < 1 ? 'var(--success)' : 'var(--error)'} width={200} height={32} />
-        </div>
-      </div>
-
-      {/* Card 3: Latency Percentiles */}
-      <div className={`${styles.kpiCard} ${p99Latency > 300 ? styles.kpiCardWarn : styles.kpiCardGreen}`}>
-        <div className={styles.kpiLabel}>Latency Percentiles</div>
-        <div className={styles.latencyValues}>
-          <div className={styles.latencyItem}>
-            <span className={styles.latencyLabel}>P50</span>
-            <span className={`${styles.latencyVal} ${styles.latValGreen}`}>{Math.round(avgLatency * 0.5)}ms</span>
-            <span className={`${styles.latencyTrend} ${styles.trendDownGood}`}>&#9660;3</span>
-          </div>
-          <div className={styles.latencyItem}>
-            <span className={styles.latencyLabel}>P95</span>
-            <span className={`${styles.latencyVal} ${avgLatency > 150 ? styles.latValAmber : styles.latValGreen}`}>{Math.round(avgLatency * 1.4)}ms</span>
-            <span className={`${styles.latencyTrend} ${styles.trendUpBad}`}>&#9650;12</span>
-          </div>
-          <div className={styles.latencyItem}>
-            <span className={styles.latencyLabel}>P99</span>
-            <span className={`${styles.latencyVal} ${p99Latency > 300 ? styles.latValRed : styles.latValAmber}`}>{p99Latency}ms</span>
-            <span className={`${styles.latencyTrend} ${styles.trendUpBad}`}>&#9650;28</span>
-          </div>
-        </div>
-        <div className={styles.kpiDetail}>
-          SLA: &lt;300ms P99 · {p99Latency > 300
-            ? <span style={{ color: 'var(--error)', fontWeight: 600 }}>BREACH</span>
-            : <span style={{ color: 'var(--success)', fontWeight: 600 }}>OK</span>}
-        </div>
-      </div>
-
-      {/* Card 4: Active Routes */}
-      <div className={`${styles.kpiCard} ${styles.kpiCardTeal}`}>
-        <div className={styles.kpiLabel}>Active Routes</div>
-        <div className={styles.kpiValueRow}>
-          <span className={`${styles.kpiValue} ${styles.kpiValueTeal}`}>{activeRoutes}</span>
-          <span className={styles.kpiUnit}>of {totalRoutes}</span>
-          <span className={`${styles.kpiTrend} ${styles.trendFlat}`}>&#8596; stable</span>
-        </div>
-        <div className={styles.donutWrap}>
-          <svg viewBox="0 0 36 36" width="40" height="40">
-            <circle cx="18" cy="18" r="15.9" fill="none" stroke="var(--bg-inset)" strokeWidth="3" />
-            <circle cx="18" cy="18" r="15.9" fill="none" stroke="var(--running)" strokeWidth="3"
-              strokeDasharray={`${(activeRoutes / totalRoutes) * 100} ${100 - (activeRoutes / totalRoutes) * 100}`}
-              strokeDashoffset="25" strokeLinecap="round" />
-          </svg>
-          <div className={styles.donutLegend}>
-            <span className={styles.donutLegendActive}>{activeRoutes} active</span>
-            <span>{totalRoutes - activeRoutes} stopped</span>
-          </div>
-        </div>
-      </div>
-
-      {/* Card 5: In-Flight Exchanges */}
-      <div className={`${styles.kpiCard} ${styles.kpiCardAmber}`}>
-        <div className={styles.kpiLabel}>In-Flight Exchanges</div>
-        <div className={styles.kpiValueRow}>
-          <span className={styles.kpiValue}>23</span>
-          <span className={`${styles.kpiTrend} ${styles.trendFlat}`}>&#8596;</span>
-        </div>
-        <div className={styles.kpiDetail}>
-          High-water: <span className={styles.kpiDetailStrong}>67</span> (2h ago)
-        </div>
-        <div className={styles.kpiSparkline}>
-          <Sparkline data={[16, 14, 18, 12, 10, 15, 8, 6, 4, 3, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 18, 16, 18, 20, 18, 23]} color="var(--amber)" width={200} height={32} />
-        </div>
-      </div>
-    </div>
-  )
+  return [
+    {
+      label: 'Total Throughput',
+      value: totalExchanges.toLocaleString(),
+      trend: { label: '\u25B2 +8%', variant: 'success' as const },
+      subtitle: `${throughputPerSec} msg/s \u00B7 Capacity 39%`,
+      sparkline: [44, 46, 45, 47, 48, 46, 47, 48, 46, 47, 48, 47, 46, 47],
+      borderColor: 'var(--amber)',
+    },
+    {
+      label: 'System Error Rate',
+      value: `${errorRate.toFixed(2)}%`,
+      trend: {
+        label: errorRate < 1 ? '\u25BC -0.1%' : '\u25B2 +0.4%',
+        variant: errorRate < 1 ? 'success' as const : 'error' as const,
+      },
+      subtitle: `${totalErrors} errors / ${totalExchanges.toLocaleString()} total (6h)`,
+      sparkline: [1.2, 1.8, 1.5, 2.1, 2.4, 2.2, 2.5, 2.6, 2.7, 2.8, 2.7, 2.9, 2.8, errorRate],
+      borderColor: errorRate < 1 ? 'var(--success)' : 'var(--error)',
+    },
+    {
+      label: 'Latency Percentiles',
+      value: `${p99Latency}ms`,
+      trend: { label: '\u25B2 +28', variant: p99Latency > 300 ? 'error' as const : 'warning' as const },
+      subtitle: `P50 ${p50}ms \u00B7 P95 ${p95}ms \u00B7 SLA <300ms P99: ${slaStatus}`,
+      borderColor: p99Latency > 300 ? 'var(--warning)' : 'var(--success)',
+    },
+    {
+      label: 'Active Routes',
+      value: `${activeRoutes} / ${totalRoutes}`,
+      trend: { label: '\u2194 stable', variant: 'muted' as const },
+      subtitle: `${activeRoutes} active \u00B7 ${totalRoutes - activeRoutes} stopped`,
+      borderColor: 'var(--running)',
+    },
+    {
+      label: 'In-Flight Exchanges',
+      value: '23',
+      trend: { label: '\u2194', variant: 'muted' as const },
+      subtitle: 'High-water: 67 (2h ago)',
+      sparkline: [16, 14, 18, 12, 10, 15, 8, 6, 4, 3, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 18, 16, 18, 20, 18, 23],
+      borderColor: 'var(--amber)',
+    },
+  ]
 }
 
 // ─── Route metric row with id field (required by DataTable) ──────────────────
@@ -475,7 +422,7 @@ export function Routes() {
             <span className={styles.refreshText}>Auto-refresh: 30s</span>
           </div>
 
-          <KpiHeader scopedMetrics={scopedMetricsForKpi} />
+          <KpiStrip items={buildKpiItems(scopedMetricsForKpi)} />
 
           {/* Processor Performance table */}
           <div className={styles.tableSection}>
@@ -520,7 +467,7 @@ export function Routes() {
         </div>
 
         {/* KPI header cards */}
-        <KpiHeader scopedMetrics={scopedMetricsForKpi} />
+        <KpiStrip items={buildKpiItems(scopedMetricsForKpi)} />
 
         {/* Per-route performance table */}
         <div className={styles.tableSection}>
@@ -544,8 +491,7 @@ export function Routes() {
 
         {/* 2x2 chart grid */}
         <div className={styles.chartGrid}>
-          <div className={styles.chartCard}>
-            <div className={styles.chartTitle}>Throughput (msg/s)</div>
+          <Card title="Throughput (msg/s)">
             <AreaChart
               series={convertSeries(throughputSeries)}
               yLabel="msg/s"
@@ -553,10 +499,9 @@ export function Routes() {
               width={500}
               className={styles.chart}
             />
-          </div>
+          </Card>
 
-          <div className={styles.chartCard}>
-            <div className={styles.chartTitle}>Latency (ms)</div>
+          <Card title="Latency (ms)">
             <LineChart
               series={convertSeries(latencySeries)}
               yLabel="ms"
@@ -565,10 +510,9 @@ export function Routes() {
               width={500}
               className={styles.chart}
             />
-          </div>
+          </Card>
 
-          <div className={styles.chartCard}>
-            <div className={styles.chartTitle}>Errors by Route</div>
+          <Card title="Errors by Route">
             <BarChart
               series={ERROR_BAR_SERIES}
               stacked
@@ -576,10 +520,9 @@ export function Routes() {
               width={500}
               className={styles.chart}
             />
-          </div>
+          </Card>
 
-          <div className={styles.chartCard}>
-            <div className={styles.chartTitle}>Message Volume (msg/min)</div>
+          <Card title="Message Volume (msg/min)">
             <AreaChart
               series={VOLUME_SERIES}
               yLabel="msg/min"
@@ -587,7 +530,7 @@ export function Routes() {
               width={500}
               className={styles.chart}
             />
-          </div>
+          </Card>
         </div>
       </div>
     </AppShell>