ui/src/components/ContentTabs.module.css

.wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  padding-top: 0.375rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
  gap: 1rem;
}
feat(ui): add ContentTabs component (Exchanges \| Dashboard \| Runtime) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> 2026-03-28 13:52:54 +01:00			`.wrapper {`
feat(ui): add compact KPI metrics in tab bar (Total, Err%, Avg, P99) New TabKpis component shows scope-aware metrics with trend arrows aligned right in the content tab bar. Each metric shows current value and an arrow indicating change vs previous period (green=good, red=bad). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> 2026-03-28 14:42:58 +01:00			`display: flex;`
			`align-items: center;`
			`justify-content: space-between;`
			`padding: 0 1.5rem;`
			`padding-top: 0.375rem;`
fix(ui): restore layout — same table everywhere, 50:50 split, full-height sidebar, tab styling - Sidebar wrapper gets height:100% to fill window - Route-scoped Exchanges uses same Dashboard table (not compact ExchangeList) - 50:50 grid split: table on left, diagram on right when route selected - ContentTabs gets border-bottom and surface background for visibility Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> 2026-03-28 14:22:34 +01:00			`border-bottom: 1px solid var(--border);`
refactor: UI consistency — shared CSS, design system colors, no inline styles Phase 1: Extract 6 shared CSS modules (table-section, log-panel, rate-colors, refresh-indicator, chart-card, section-card) eliminating ~135 duplicate class definitions across 11 files. Phase 2: Replace all hardcoded hex colors in CSS modules with design system variables. Strip ~55 hex fallbacks from var() patterns. Fix 4 undefined variable names (--accent, --bg-base, --surface, --bg-surface-raised). Phase 3: Replace ~45 hardcoded hex values in ProcessDiagram SVG components with var() CSS custom properties. Fix Dashboard.tsx color prop. Phase 4: Create CSS modules for AdminLayout, DatabaseAdminPage, OidcCallback (previously 100% inline). Extract shared PageLoader component (replaces 3 copy-pasted spinner patterns). Move AppsTab static inline styles to CSS classes. Extract LayoutShell StarredList styles. 58 files changed, net -219 lines. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> 2026-04-09 14:55:54 +02:00			`background: var(--bg-surface);`
feat(ui): add compact KPI metrics in tab bar (Total, Err%, Avg, P99) New TabKpis component shows scope-aware metrics with trend arrows aligned right in the content tab bar. Each metric shows current value and an arrow indicating change vs previous period (green=good, red=bad). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> 2026-03-28 14:42:58 +01:00			`gap: 1rem;`
feat(ui): add ContentTabs component (Exchanges \| Dashboard \| Runtime) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> 2026-03-28 13:52:54 +01:00			`}`