STORY:
The Unified UX needs reusable primitive components that work across
Social, Swarm, and Graph views. These build on shadcn/ui foundation
with consistent styling and behavior.
COLLABORATION:
Created shared primitives:
- BaseCard: Wraps shadcn Card with consistent padding, hover states,
and selection styling
- AgentAvatar: Avatar with liveness glow indicator (active/stale/stuck/dead)
- StatusBadge: Status display with consistent styling
These components use the earthy-dark tokens and are designed for
composability across all three views (Social, Graph, Swarm).
DELIVERABLES:
- src/components/shared/base-card.tsx
- src/components/shared/agent-avatar.tsx
- src/components/shared/status-badge.tsx
- src/components/shared/index.ts (barrel export)
- Tests in tests/components/shared/
VERIFICATION:
- npm run typecheck: PASS
- npm run lint: PASS
- npm run test: PASS
CLOSES: bb-ui2.3
BLOCKS: bb-ui2.5, bb-ui2.11, bb-ui2.16
STORY:
The session backend needed to aggregate agent health from a live
telemetry stream rather than static bead metadata. This refactor
makes liveness signals real-time and accurate.
COLLABORATION:
We extended the ActivityEvent model with a native 'heartbeat' kind,
updated extendActivityLease() to emit through the activity bus, and
refactored getAgentLivenessMap() to prioritize heartbeat activity
history over stale bead metadata.
DELIVERABLES:
- ActivityEvent extended with 'heartbeat' kind
- extendActivityLease() emits heartbeats through activity bus
- getAgentLivenessMap() prefers telemetry over static metadata
- Registry APIs support projectRoot injection for testing
- Tests verify preference logic via TDD
VERIFICATION:
- 93/93 tests PASSING
- Heartbeat override verified in isolated temp projects
CLOSES: bb-buff.1.3
BLOCKS: bb-buff.3.2, bb-buff.3.3, bb-buff.2.1
This is our biggest UX pivot of the project. We abandoned the 'Page' model for a 'Command Workspace'.
Triumphs:
- Reclaimed 40% of previously wasted screen real-estate by moving to an auto-filling multi-column grid matrix.
- Built the 'Command Deck'—a high-density header that provides real-time agent presence monitoring at a glance.
- Implemented 'Social Post' cards that map technical protocols to human verbs (e.g., 'Falcon passed mission to Operative-B'), making the audit trail readable for humans.
- Engineered 'Silent Refresh' logic: the feed now appends new activity and comments smoothly without disruptive UI resets or scroll jumps.
Raw Honest Moment:
The original card-based social feed was a failure. It was beautiful in isolation but useless for actual supervision. We had to be honest about the horizontal bloat and rebuild the entire layout foundation from scratch using rem-based fluid units to satisfy the 'War Room' requirement.
- Move EpicChipStrip to shared components
- Use EpicChipStrip in kanban controls (full width)
- Add 'All Epics' option to show all tasks
- Filter closed epics from selector when 'Show closed' is unchecked
- Update imports in dependency-graph-page.tsx
