Merge origin/main into running Command Center

Keep the deployed tree on conflict; integrate the remote Dockhand/CDC tip.

ui/src/components/features/ChangesView.tsx

@@ -21,6 +21,12 @@ const SOURCE_COLOR: Record<string, string> = {
 
 const SOURCES = ['all', 'postgres', 'mysql', 'mongodb', 'cassandra', 'neo4j']
 const OPS = ['all', 'insert', 'update', 'delete']
+const TIME_WINDOWS = [
+  { label: '15 min', minutes: 15 },
+  { label: '1 hour', minutes: 60 },
+  { label: '6 hours', minutes: 360 },
+  { label: '24 hours', minutes: 1440 },
+] as const
 
 function opOf(o: string) {
   return OP_STYLE[o] || { label: o.toUpperCase(), cls: 'bg-slate-500/15 text-slate-300 border-slate-500/30', color: '#94a3b8' }
@@ -363,6 +369,23 @@ export function ChangesView({ liveChanges }: { liveChanges: CdcChange[] }) {
           </p>
         </div>
         <div className="flex items-center gap-3">
+          <div className="flex items-center gap-1 rounded border border-border/60 p-0.5">
+            {TIME_WINDOWS.map((w) => (
+              <button
+                key={w.minutes}
+                type="button"
+                onClick={() => setWindowMin(w.minutes)}
+                className={cn(
+                  'rounded px-2 py-0.5 text-[10px]',
+                  windowMin === w.minutes
+                    ? 'bg-docker/20 text-docker'
+                    : 'text-foreground-muted hover:text-foreground',
+                )}
+              >
+                {w.label}
+              </button>
+            ))}
+          </div>
           <span className={cn('flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-[10px] font-medium',
             connected ? 'border-emerald-500/40 bg-emerald-500/10 text-emerald-300' : 'border-rose-500/40 bg-rose-500/10 text-rose-300')}>
             <Radio className={cn('h-3 w-3', connected && 'animate-pulse')} /> {connected ? 'STREAMING' : 'OFFLINE'}