- Created ThreadDrawer component (24rem) that slides from right edge of middle
- RightPanel now reserved for Activity Feed + Agent roster (bb-ui2.29)
- Updated URL state: added drawer and agentId params
- Thread shows in drawer when card selected
Architecture now matches PRD:
- Right Panel (17rem): Activity Feed + Agent roster
- Thread Drawer (24rem): Opens from middle when card clicked
Beads: bb-ui2.31 thread drawer created, bb-ui2.13 closed
STORY:
Users couldn't pan to see nodes at the bottom of large graphs.
The translateExtent was limiting the viewport to a fixed area.
FIX:
Removed translateExtent entirely to allow unlimited panning in all
directions. Users can now explore the full graph regardless of size.
CLOSES: bb-ui2.21 (fitView/panning fix)
STORY:
With the shell layout complete, we needed the actual content for each view.
Three agents worked in parallel on the card components that would populate
the Social and Swarm views, plus integrating the existing graph into the shell.
COLLABORATION:
Agent bb-98c (social-card-builder) created SocialCard:
- Task ID with teal styling
- UNLOCKS section (green) showing what this task unblocks
- BLOCKS section (amber) showing what's blocking this task
- Agent avatars with liveness glow
- View-jump icons for quick navigation
Agent bb-nuy (swarm-card-builder) created SwarmCard:
- Agent roster with liveness indicators
- Progress bar (ASCII block format: ████████░░░░)
- Attention items with warning styling
- View-jump icons
Agent bb-54x (graph-integrator) integrated WorkflowGraph:
- Created GraphView wrapper with Flow/Overview tabs
- Wired into UnifiedShell when view=graph
- Connected taskId to selectedId for URL sync
- Connected graphTab to URL state
DELIVERABLES:
- src/components/social/social-card.tsx: Task card for activity feed
- src/components/swarm/swarm-card.tsx: Swarm health card
- src/components/graph/graph-view.tsx: Graph wrapper with tabs
- src/components/shared/mobile-nav.tsx: Bottom tab bar
- Tests for all components
VERIFICATION:
- npm run typecheck: PASS
- npm run lint: PASS
- npm run test: PASS
CLOSES: bb-ui2.11, bb-ui2.16, bb-ui2.20
STORY:
Phase 1 of the Unified UX epic required a complete 3-panel shell layout
with responsive behavior across mobile, tablet, and desktop breakpoints.
The existing page structure was fragmented - we needed a cohesive shell.
COLLABORATION:
Three agents (bb-5am, bb-dwz, bb-3dv) worked in parallel on:
- TopBar: View tabs (Social/Graph/Swarm) with active states, filter input
- LeftPanel: Channel tree navigation with epic filtering, responsive collapse
- RightPanel: Detail strip with sidebar (desktop) / drawer (tablet/mobile) modes
We encountered a hydration mismatch error on mobile/tablet because
useResponsive was returning different values on server vs client.
Fixed by defaulting to desktop on server and only updating after mount.
Mobile navigation (bb-ui2.27) added:
- Hamburger menu for left panel access on mobile/tablet
- Bottom tab bar for thumb-friendly view switching
DELIVERABLES:
- src/components/shared/top-bar.tsx: TopBar with view tabs + hamburger
- src/components/shared/left-panel.tsx: Epic tree with expand/collapse
- src/components/shared/right-panel.tsx: Responsive sidebar/drawer
- src/components/shared/unified-shell.tsx: Main 3-panel grid layout
- src/components/shared/mobile-nav.tsx: Bottom tab bar for mobile
- src/hooks/use-responsive.ts: Breakpoint detection (mobile/tablet/desktop)
- Tests for all components
VERIFICATION:
- npm run typecheck: PASS
- npm run lint: PASS
- npm run test: PASS
CLOSES: bb-ui2.6, bb-ui2.7, bb-ui2.8, bb-ui2.9, bb-ui2.27
- Create GraphView component with Flow/Overview tab switcher
- Wire GraphView into UnifiedShell when view=graph
- Connect taskId URL param to selectedId for node selection
- Connect graphTab URL param for tab state persistence
- ReactFlow renders in middle panel with proper layout
Closes bb-ui2.20
STORY:
shadcn/ui components expect @/lib/utils to exist for the cn() helper.
Our project uses src/lib/, but shadcn creates lib/ at root.
COLLABORATION:
Created lib/utils.ts with the cn() function to satisfy shadcn imports.
This coexists with src/lib/utils.ts - both export the same function.
VERIFICATION:
- npm run typecheck: PASS
The .beadboard directory in user profile stores:
- projects.json: multi-project registry
- agent/: agent session data
This is the Windows-first location for machine-local BeadBoard config.
STORY:
Development requires supporting scripts and comprehensive test coverage.
This commit adds utility scripts and extends test suites.
COLLABORATION:
- scripts/capture-sessions.mjs: Screenshot capture for sessions hub
- scripts/capture-timeline.mjs: Timeline view capture utility
- sessions-header-logic.ts: Session header business logic
- Additional test files for sessions, hooks, and snapshot diffing
STORY:
Major epics require upfront planning documentation. These docs capture
the design decisions, architecture, and rollout maps for the
Agent System Overhaul (bb-buff) and Unified UX (bb-ui2) epics.
COLLABORATION:
- 2026-02-14-operative-protocol-design.md: ZFC state machine design
- 2026-02-14-super-agent-buff-roadmap.md: buff epic architecture
- 2026-02-15-unified-ux-prd.md: UI epic product requirements
- docs/protocols/: protocol specifications
These documents serve as the source of truth for implementation decisions
and help future contributors understand the design rationale.
STORY:
Agent identities were stored in a local JSON registry, but they should
be first-class beads visible in the BeadBoard system. This consolidates
agent identity to bd CLI as the source of truth.
COLLABORATION:
Replaced local JSON registry with bd CLI wrapper in agent-registry.ts:
- All agent operations now delegate to bd CLI
- Agents appear as team-visible beads with gt:agent label
- Identity isolation prevents agent beads from polluting mission lists
The consolidation makes agents visible to the entire team and ensures
consistent identity management across all tools.
DELIVERABLES:
- src/lib/agent-registry.ts refactored to bd CLI wrapper
- tests/lib/agent-registry-bd.test.ts for bd integration
- tools/bb.ts updated for consolidated identity ops
VERIFICATION:
- All registry tests PASS
- Agents appear on agent page but NOT in task lists
- Quality gates (typecheck, lint) GREEN
CLOSES: bb-1y7
EPIC: bb-u6f
STORY:
The existing ReactFlow dependency graph lived in the /graph page, but
the Unified UX needs it as a reusable component for the graph tab.
COLLABORATION:
Extracted the core ReactFlow visualization into WorkflowGraph component:
Interface:
- beads: BeadIssue[] to render as nodes
- selectedId?: currently selected bead
- onSelect?: selection callback
- className?: styling override
- hideClosed?: filter closed beads
Features preserved:
- Dagre layout for automatic positioning
- Edge rendering with BLOCKS labels
- fitView() on mount via useReactFlow
- Existing styling and hover states
The original /graph page can now use this component or serve as reference.
DELIVERABLES:
- src/components/shared/workflow-graph.tsx
VERIFICATION:
- npm run typecheck: PASS
- npm run lint: PASS
- npm run test: PASS
CLOSES: bb-ui2.19
BLOCKS: bb-ui2.20
STORY:
The Swarm view needs to show epics as "swarms" - groups of agents
working together on a mission. This requires aggregating bead data
by swarm/epic and computing health statistics.
COLLABORATION:
Created buildSwarmCards function that transforms epic + agent data:
SwarmCard interface:
- id, title, status
- stats: { completed, active, ready, blocked, total }
- agents: AgentRoster[] with liveness
- attention: blocked tasks + stuck agents needing attention
- lastActivity
We also created swarm-molecules.ts for molecular composition patterns
used by the swarm orchestration layer.
DELIVERABLES:
- src/lib/swarm-cards.ts with SwarmCard, AgentRoster types
- src/lib/swarm-molecules.ts for molecular composition
- tests/lib/swarm-cards.test.ts
- tests/lib/swarm-molecules.test.ts
VERIFICATION:
- npm run typecheck: PASS
- npm run lint: PASS
- npm run test: PASS
CLOSES: bb-ui2.15
BLOCKS: bb-ui2.16, bb-ui2.17
STORY:
The Social view needs to transform raw BeadIssue data into renderable
SocialCard objects. This includes computing blocked/blocking relationships
from dependencies and extracting agent assignments.
COLLABORATION:
Created buildSocialCards function that transforms BeadIssue → SocialCard:
SocialCard interface:
- id, title, status
- blockedBy: tasks this task depends on
- blocking: tasks that depend on this task
- agents: assigned agents with liveness
- lastActivity: most recent event
The function derives blockedBy from depends_on dependencies and blocking
from blocked_by reverse dependencies, creating a complete picture of
task relationships for the activity feed.
DELIVERABLES:
- src/lib/social-cards.ts with SocialCard interface and builder
- tests/lib/social-cards.test.ts
VERIFICATION:
- npm run typecheck: PASS
- npm run lint: PASS
- npm run test: PASS
CLOSES: bb-ui2.10
BLOCKS: bb-ui2.11, bb-ui2.12
STORY:
The Unified UX needs URL as the single source of truth for view state.
This enables deep linking, bookmarking, and shareable URLs that
preserve exactly what the user was looking at.
COLLABORATION:
Created useUrlState hook using Next.js useSearchParams and useRouter:
Interface:
- view: 'social' | 'graph' | 'swarm' (default: social)
- taskId: selected task ID (for detail panel)
- swarmId: selected swarm ID
- panel: 'open' | 'closed' (detail panel state)
- graphTab: 'flow' | 'overview' (graph view mode)
URL Patterns:
- /?view=social
- /?view=social&task=bb-buff.1&panel=open
- /?view=swarm&swarm=bb-buff
- /?view=graph&task=bb-buff.1&graphTab=flow
The hook uses router.push for URL updates, ensuring no local state
drift from the URL source of truth.
DELIVERABLES:
- src/hooks/use-url-state.ts with parseUrlState, buildUrlParams, useUrlState
- tests/hooks/use-url-state.test.ts with 18+ tests
VERIFICATION:
- npm run typecheck: PASS
- npm run lint: PASS
- npm run test: PASS (all tests including new ones)
CLOSES: bb-ui2.4
BLOCKS: bb-ui2.5
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 Unified UX epic needed a solid component foundation. We chose
shadcn/ui for its Tailwind integration and copy-paste philosophy.
COLLABORATION:
Initialized shadcn/ui with Next.js defaults and installed the base
component set needed for the unified shell:
- button: Primary actions
- card: Card containers
- badge: Status badges
- avatar: Agent avatars
- input: Search/filter inputs
- scroll-area: Scrollable containers
- separator: Visual dividers
- tooltip: Hover information
- dropdown-menu: Sorting and filtering
We also updated tsconfig.json with path aliases (@/*) to support
the shadcn import pattern.
DELIVERABLES:
- components.json configuration
- 9 shadcn components in components/ui/
- lib/utils.ts with cn() helper
- tsconfig.json with @/* path aliases
VERIFICATION:
- npm run typecheck: PASS
- npm run lint: PASS
CLOSES: bb-ui2.2
BLOCKS: bb-ui2.3, bb-ui2.5
