- CommunicationHub.tsx: main layout shell with sidebar + message area
- ChannelSidebar.tsx: channel list with unread badges and filter bar
- MessageList.tsx: message display with threading and empty states
- MessageItem.tsx: message bubble, task comment bubble, agent avatar
- MessageComposer.tsx: message input, task discussion composer, compose modal
- ChannelHeader.tsx: channel info bar with stats
- channel-utils.ts: shared channel derivation and message filtering logic
- Original communication.tsx replaced with backward-compatible re-exports
- All sub-components under 300 lines, TypeScript compilation passes
- Replace all 31 useState declarations with useAppStore selectors
- Add direct setters (setCommandPaletteOpen, setConsoleOpen, etc.) to NavigationSlice
- Replace IPC debounce with createEventBatcher (50ms window)
- Route shortcut events through store.getState() for toggle actions
- Remove unused type imports (SidebarBadges, CompanyMetrics, etc.)
- Zero useState calls remain in App.tsx (down from 31)
- TypeScript compilation passes with zero errors
- All 14 unit tests continue to pass
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Install zustand 5.x and immer 11.x dependencies
- Create 6 Zustand slices: navigation, company, selection, ui, communication, social
- Create combined store with devtools + immer middleware
- Create IPC event batcher with 50ms debounce window (schedule/flush/dispose)
- Create typed selector hooks for narrow state subscriptions
- Add 14 unit tests covering store initialization, slice behaviors, and batcher timing
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
ZacharyZhang-NY
