feat(client): UI polish batch 2 — shared components, breadcrumbs, sorting, trends

[MathurAditya724]

Summary

Implements the remaining 6 UI polish issues in a single batch:

#194 — Extract shared Pagination and PageSizeSelector components

• New components/pagination.tsx with PaginationFooter and PageSizeSelector
• Replaces identical duplicated markup in both events.tsx and sessions.tsx
• Single source of truth for pagination UI, making future enhancements (page input, first/last buttons) a one-file change

#195 — Unify status display components into a shared component family

• New components/run-status.tsx with shared RUN_STATUS_COLORS map, StatusDot, and RunStatusIndicator
• Moved inline StatusIndicator from sessions.tsx → shared RunStatusIndicator
• Moved inline StatusDot from container-detail.tsx → shared StatusDot
• All status colors now defined in one place

#196 — Add breadcrumb navigation to the header

• Replaced static "Outpost" text in layout header with dynamic breadcrumbs
• Derives crumbs from current URL path: Dashboard → Webhook Events → Event abc123…
• Clickable intermediate segments, truncated entity keys, proper aria-label

#201 — Standardize page-level spacing across all pages

• Changed events.tsx and sessions.tsx root from space-y-4 to space-y-6
• Now consistent with dashboard.tsx and event-detail.tsx

#202 — Add trend indicators to dashboard stat cards

• Added previous24h query to the stats API endpoint (events from 24-48h ago)
• New TrendBadge component showing percentage change with up/down arrow
• Displayed on the "events in the last 24h" summary line

#203 — Add sortable table headers to events and sessions tables

• New components/sortable-table-head.tsx with SortableTableHead and toggleSort helper
• Events: server-side sorting via sortBy/sortDir query params (status, repo, sender, event, time)
• Sessions: client-side sorting (entity, status, agent, sessions, messages, updatedAt)
• Sort state synced to URL params for persistence across refresh/navigation
• Default sort remains newest first

Files changed

• New: components/pagination.tsx, components/run-status.tsx, components/sortable-table-head.tsx
• Modified: events.tsx, sessions.tsx, container-detail.tsx, dashboard.tsx, layout.tsx, api.ts, routes/events/index.ts

Verification

• ✅ TypeScript: tsc --noEmit clean
• ✅ Lint: biome check clean
• ✅ Tests: 417/417 passing
• ✅ Build: production build succeeds

Fixes #194, fixes #195, fixes #196, fixes #201, fixes #202, fixes #203

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status	Name	Latest Commit	Updated (UTC)
❌ Deployment failed View logs	jared	2de19e2	Sep 20 2026, 04:40 AM