fix: use server-side sorting for paginated tables

Upgrade @cameleer/design-system to v0.1.1 which adds onSortChange
callback to DataTable. Wire it up in Dashboard (exchanges), AuditLog,
and RouteDetail (recent executions) so sorting triggers a new API
request with sortField/sortDir instead of only sorting the current page.

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

ui/src/pages/Dashboard/Dashboard.tsx

@@ -1,4 +1,4 @@
-import { useState, useMemo } from 'react'
+import { useState, useMemo, useCallback } from 'react'
 import { useParams, useNavigate } from 'react-router'
 import {
   DataTable,
@@ -176,12 +176,19 @@ export default function Dashboard() {
   const navigate = useNavigate()
   const [selectedId, setSelectedId] = useState<string | undefined>()
   const [panelOpen, setPanelOpen] = useState(false)
+  const [sortField, setSortField] = useState<string>('startTime')
+  const [sortDir, setSortDir] = useState<'asc' | 'desc'>('desc')
 
   const { timeRange, statusFilters } = useGlobalFilters()
   const timeFrom = timeRange.start.toISOString()
   const timeTo = timeRange.end.toISOString()
   const timeWindowSeconds = (timeRange.end.getTime() - timeRange.start.getTime()) / 1000
 
+  const handleSortChange = useCallback((key: string, dir: 'asc' | 'desc') => {
+    setSortField(key)
+    setSortDir(dir)
+  }, [])
+
   // ─── API hooks ───────────────────────────────────────────────────────────
   const { data: stats } = useExecutionStats(timeFrom, timeTo, routeId, appId)
   const { data: timeseries } = useStatsTimeseries(timeFrom, timeTo, routeId, appId)
@@ -191,6 +198,8 @@ export default function Dashboard() {
       timeTo,
       routeId: routeId || undefined,
       application: appId || undefined,
+      sortField,
+      sortDir,
       offset: 0,
       limit: 50,
     },
@@ -385,6 +394,7 @@ export default function Dashboard() {
             selectedId={selectedId}
             sortable
             flush
+            onSortChange={handleSortChange}
             rowAccent={handleRowAccent}
             expandedContent={(row: Row) =>
               row.errorMessage ? (