- 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
STORY:
In a multi-agent control center, operators need to quickly identify
what TYPE of agent they're looking at - UI agents, graph agents,
orchestrators, or general workers.
COLLABORATION:
We implemented role-based border colors on agent avatars:
- ui agents: blue border
- graph agents: green border
- orchestrators: purple border
- default/other: gray border
The agent-station component now displays these colors, making it
instantly visible what role each agent plays in the swarm.
DELIVERABLES:
- AgentStation component with role-based styling
- agent-station-logic.ts with role color derivation
- Tests: agent-station-logic.test.ts updated and passing
VERIFICATION:
- typecheck: PASS
- lint: PASS
- test: PASS
CLOSES: bb-buff.3.4
STORY:
The Sessions Hub needs to show which task each agent is working on,
creating a visual "mission link" between agents and their active work.
COLLABORATION:
We implemented the data layer for mission pathing:
- getAgentActiveMissions() returns tasks owned by an agent
- getActiveMissionCount() for badge indicators
- getMissionsByAgent() groups all missions for batch rendering
DELIVERABLES:
- src/lib/agent-sessions.ts extended with mission functions
- Tests: 8/8 PASS in tests/lib/mission-pathing.test.ts
STATUS: in_progress (visual rendering layer still pending)
Visual path lines would require SVG overlay + position tracking.
CLOSES: partial bb-buff.3.3
STORY:
The Sessions Hub needed clear visual distinction between healthy
agents and those in trouble. Users couldn't quickly identify stuck
or dead agents in the control center view.
COLLABORATION:
We added 'stuck' and 'dead' states to the AgentSessionState type,
created deriveSessionState() with Zero-Failure-Check priority,
and implemented restrained visual treatments:
- stuck: pulsing red border (ring-2 ring-red-500 animate-pulse)
- dead: strong ghosting (opacity-40 grayscale)
- evicted: milder ghosting (opacity-60 grayscale-[0.5])
Session cards now display STUCK/OFFLINE badges with aria-labels
for accessibility.
DELIVERABLES:
- AgentSessionState extended with stuck/dead states
- deriveSessionState() derives from ZFC state priority
- Visual treatments for stuck/dead/evicted
- Accessible badges with aria-label
TESTS:
- tests/lib/agent-sessions-state.test.ts: 6/6 PASS
- tests/components/shared/status-utils-visual.test.ts: 4/4 PASS
- tests/components/sessions/session-feed-card-state.test.tsx: 4/4 PASS
CLOSES: bb-buff.3.2
BLOCKS: bb-buff.3.3
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
Research revealed that agent identities (consolidated to bd beads) were appearing in standard task lists because the data-access layer lacked identity-awareness.
- Refactored read-issues.ts and parser.ts to explicitly exclude beads labeled 'gt:agent' from standard mission flows.
- Verified that agent personas remain targetable by the registry but are invisible to Kanban/Graph/Sessions.
- Added Characterization Test: identity-isolation.test.ts.
This restores the 'War Room' clarity by separating Operatives from Missions.
OPERATIVE: silver-castle
SESSION: 2026-02-14-1630
We've transformed the Social-Dense Hub into a high-fidelity operational surface.
- BACKEND: Implemented Global Incursion Engine in agent-sessions.ts (N^2 overlap detection) and added the 60m 'Idle' state.
- API: Enriched the sessions payload with full metadata and active conflict arrays.
- HEADER: Delivered 4-state agent stations (Active/Stale/Evicted/Idle) with real-time 'time-ago' timers.
- FEED: Implemented the 'Fire Map' visuals:
* Global Incursion Ticker: High-visibility alerts for agent collisions.
* Local Conflict Badges: Pulsing pills on affected task cards.
- Refactored components for React-static compliance and strict TypeScript safety.
This commit completes the visibility track, allowing the human supervisor to monitor agent presence and friction in real-time.
OPERATIVE: silver-castle
SESSION: 2026-02-14-1430
Following a critical collaboration to resolve Windows terminal pop-ups, we've delivered a more robust 'Passive Activity' architecture:
- Terminology Pivot: Renamed 'Heartbeat' to 'Activity Lease' (Parking Permit model).
- Side-Effect Extension: tools/bb.ts now automatically extends the agent's lease whenever they perform real work (any CLI command).
- Passive Handshake: bb-init.mjs now only performs an initial registration/lease start, with no background loops.
- 100% Silence: Removed all background process spawning, ensuring zero terminal disruption on Windows.
- High Observability: Liveness is still tracked via the 15m threshold, but relies on activity rather than periodic pings.
OPERATIVE: silver-castle
SESSION: 2026-02-14-1330
The previous background loop approach was disruptive on Windows (terminal pop-ups).
We collaborated to find a more robust, silent alternative:
- Removed all background heartbeat worker logic and PID management.
- Implemented 'Passive Heartbeat' in tools/bb.ts: every agent command now refreshes liveness as a side-effect.
- Updated bb-init.mjs to use explicit heartbeat calls for adoption/registration.
- Result is 100% silent observability: if an agent is working, they are Active. If they stop, they drift to Stale.
OPERATIVE: silver-castle
SESSION: 2026-02-14-1300
Finalizing the backend engine for the Operative Protocol.
- Updated agent-sessions.ts to use the deriveLiveness logic and the 15m protocol threshold.
- Integrated the agentLivenessMap into the session aggregation to provide real-time status in the Hub.
- Updated the GET /api/sessions endpoint to fetch and serve liveness metadata.
- Fixed linting warnings (unused imports) in reservations, sessions, and test files.
This commit completes the backend contract for bb-u6f.6.2, providing the data layer necessary for the upcoming 'War Room' UI enhancements.
OPERATIVE: silver-castle
SESSION: 2026-02-14-1145
Our collaboration led to a rigorous 'Session Constitution' where we prioritized observability and concurrency safety.
I've delivered the first four pillars of the backend engine:
1. Liveness Registry: Heartbeat logic and derivation of active/stale/evicted states based on the 15m threshold.
2. Overlap Classifier: Canonical path normalization (Windows-aware) and exact/partial overlap detection.
3. Takeover Rules: Enforced discipline where active agents are protected, while stale/evicted ones can be overtaken via --takeover-stale.
4. Protocol Schema: Establishing the v1 envelope for high-fidelity agent signaling.
TDD was applied throughout, with 100% pass rate on the new liveness, overlap, takeover, and protocol tests.
We moved from ad-hoc task claims to a strictly defined 'Skill' system.
Triumphs:
- Implemented the 'beadboard-driver' skill, which encodes our project-specific coordination protocols (claim, reservation, handoff).
- This ensures that any AI operative (or human supervisor) can participate in the project lifecycle using a unified CLI-driven state machine.
- Decoupled high-level mission logic from low-level file mutations, allowing for easier agent skill composition in the future.
Raw Honest Moment:
Initially, we were just 'winging it' with manual status updates. Formalizing this into a skill was a necessary step to ensure our collaboration is repeatable and resilient to agent context swaps.
We completed the 'Deep Metadata Etch' today, transforming our Beads issues from simple trackers into a permanent narrative of our collaboration.
Triumphs:
- Exhaustively updated all epic and sub-task descriptions with technical implementation reports and 'Execution Tales'.
- Finalized the 'bb' agent CLI skill (bb.ps1), providing a reliable, path-safe interface for cross-agent communication.
- Published ADR-001 and RFC-001 to document our coordination protocols.
- Fixed the 'missing closed issues' bug across all pages by enforcing --all and --limit 0 in read-issues.ts.
Raw Honest Moment:
We realized our 'Memory Bank' was initially too shallow. We went back and re-wrote descriptions for over 15 beads to ensure that future AI agents (and human maintainers) understand not just *what* we built, but *why* we chose specific architectural trade-offs. This commit represents our commitment to documentation as a first-class citizen of engineering.
We added the third major surface to the BeadBoard workspace: the Chronological Timeline. This provides the 'Audit' layer of our operational hierarchy.
Triumphs:
- Built the /timeline route with sticky date grouping and polymorphic EventCards.
- Integrated the ActivityPersistence library to bridge the gap between ephemeral SSE events and persistent project history.
- Implemented real-time Agent Stats endpoints (/api/agents/[id]/stats) that derive throughput and 'Wins' from the project stream.
Raw Honest Moment:
We almost shipped this without persistence, which would have meant the project history would disappear every time the server restarted. Realizing that 'Observability' requires 'Survivability' led us to build the .beadboard/activity.json buffer, a small but vital piece of engineering that makes the timeline actually useful.
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.
We resolved a major project fragmentation issue today. The Graph page was technically divergent from the Kanban board, causing P0 'stale data' bugs. We realized that 'Polling' is the enemy of truth in a multi-agent system.
Triumphs:
- Refactored the core SSE transport into a shared useBeadsSubscription hook. Now Kanban, Graph, and Sessions all obey the same lifecycle: Event -> Authority Fetch -> Reconcile.
- Upgraded the Chokidar watcher to monitor the global .beadboard/agent/messages directory, ensuring agent communication arrives instantly in the social feed.
- Forced a watcher version bump to 3 to solve the ghost-listener problem where old watchers were blocking file access during HMR.
Raw Honest Moment:
We spent significant time debugging why 'closed' issues were missing from the UI, only to find we were victims of our own CLI defaults (--limit 50). The fix was simple but humiliating: we just needed to ask for the truth (--all --limit 0).
Today we reached a major architectural conclusion: project history shouldn't be stored, it should be derived. We rejected the overhead of a separate SQLite event store in favor of an O(N) snapshot-diffing engine that computes human-readable narratives directly from the issues.jsonl source of truth.
Key Triumphs:
- Implemented O(N) diffing algorithm in src/lib/snapshot-differ.ts that transforms raw JSONL into 16 distinct social event types.
- Engineered a file-based persistence layer (src/lib/activity-persistence.ts) to solve the 'Next.js HMR Wiped My Memory' bug, ensuring project heartbeat survives server restarts.
- Developed the agent-session data model that unifies Beads, Activity, and Cross-Agent Mail into a single 'Mission' context.
Raw Honest Moment:
We struggled for over an hour with 'missing history' before realizing that development-mode reloads were purging our in-memory buffers. The shift to a file-backed ring buffer was a reactive pivot that became a core project strength.
