Various supporting changes made during the assign archetypes feature development:
- Added contextual-right-panel.tsx and swarm-command-feed.tsx
- Updated activity-panel.tsx with new features
- UI improvements to left-panel, mobile-nav
- Test updates for url-state-integration, mobile-nav, top-bar
- Package.json updates for dependencies
- Global CSS refinements
These changes support the main assign archetypes feature but are
not directly part of its core functionality.
This commit includes the new SwarmWorkspace with its 3 sub-tabs, the LeftPanel mission picker, and the comprehensive Operations Command Dashboard featuring the live interactive DAG telemetry and task assignment prep flow.
- 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:
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
