feat(ui): Live Changes (CDC) tab — real-time Debezium stream with filters, volume bars and before/after diff

ui/src/hooks/useCommandCenter.ts

@@ -19,6 +19,7 @@ import type {
   Agent,
   AgentAnim,
   Approval,
+  CdcChange,
   ChatMessage,
   FeedEntry,
   GpuStatus,
@@ -68,7 +69,8 @@ export function useCommandCenter() {
   const [selectedNode, setSelectedNode] = useState<TopologyNode | null>(null)
   const [nodeDetail, setNodeDetail] = useState<NodeDetail | null>(null)
   const [nodeBusy, setNodeBusy] = useState(false)
-  const [mainView, setMainView] = useState<'platform' | 'approvals' | 'presentation' | 'dataquality' | 'knowledge' | 'storage' | 'hdfs' | 'search' | 'datagen'>('platform')
+  const [mainView, setMainView] = useState<'platform' | 'approvals' | 'presentation' | 'dataquality' | 'knowledge' | 'storage' | 'hdfs' | 'search' | 'datagen' | 'changes' | 'dataflow'>('platform')
+  const [changes, setChanges] = useState<CdcChange[]>([])
   const [genPulse, setGenPulse] = useState(false)
   const genPulseTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
   const pulseFlow = useCallback(() => {
@@ -135,6 +137,7 @@ export function useCommandCenter() {
       if (msg.type === 'terminal') appendTerminal(msg.line)
       if (msg.type === 'terminal_history' && msg.terminals) setTerminals(msg.terminals)
       if (msg.type === 'feed') setFeed((prev) => [msg.entry, ...prev].slice(0, 100))
+      if (msg.type === 'cdc_change' && msg.entry) setChanges((prev) => [msg.entry, ...prev].slice(0, 400))
       if (msg.type === 'agent_dispatch') {
         setSelectedAgentId(msg.agent_id)
         setAnims((p) => ({ ...p, [msg.agent_id]: { agentId: msg.agent_id, state: 'walk', zone: msg.zone } }))
@@ -343,6 +346,7 @@ export function useCommandCenter() {
     nodeBusy,
     mainView,
     setMainView,
+    changes,
     genPulse,
     pulseFlow,
     approvalHighlight,