feat(ux): consolidate Launch Swarm + telemetry UX with minimized strip
- Removed broken LaunchSwarmDialog (formula-based) from TopBar/LeftPanel - All Rocket buttons (TopBar, LeftPanel, DAG nodes, social cards) now open AssignmentPanel (archetype-based) which actually works - Every Rocket clears taskId first so assignMode && !taskId condition passes - Conversation button priority: taskId always shows conversation, not assign panel - Added TelemetryStrip: minimized right sidebar with status dots when non-telemetry panel (conversation/assignment) is active - Live feed has minimize button → restores last taskId or assignMode - DAG nodes: Signal icon → restores telemetry feed - Social button on DAG nodes: single router.push to avoid race (setView + setTaskId) - Fixed social card message button: opens right panel with drawer:closed (no popup) Co-Authored-By: Oz <oz-agent@warp.dev>
This commit is contained in:
zenchantlive
parent
65d69ecbbc
commit
c246ceaf21
165 changed files with 13730 additions and 1132 deletions
248
README.md
248
README.md
|
|
@ -1,67 +1,205 @@
|
|||
# BeadBoard
|
||||
**Work in Progress, please contribute!**
|
||||
**BeadBoard is a multi-agent swarm coordination system built on [Beads](https://github.com/steveyegge/beads) inspired by [Gastown](https://github.com/steveyegge/gastown).** Thanks [Steve Yegge](https://github.com/steveyegge)!
|
||||
|
||||
**The Windows-native Control Center for [Beads](https://github.com/steveyegge/beads).**
|
||||
BB is a visual operations layer for running agent teams against real dependency-constrained work.
|
||||
|
||||
BeadBoard is a high-performance local dashboard for managing your software development tasks. Built on the Beads protocol, it provides a unified, visualization-rich interface over your distributed project landscape.
|
||||
|
||||
## 🚀 Why BeadBoard?
|
||||
Most task managers are siloes. BeadBoard is a lens over your source code.
|
||||
- **Source of Truth**: Reads directly from `.beads/issues.jsonl` in your repo. No database sync skew.
|
||||
- **Windows Optimized**: Built from the ground up to handle Windows paths, drive letters, and filesystem performance.
|
||||
- **Zero Latency**: Optimistic UI updates make interactions feel instant.
|
||||
---
|
||||
|
||||
## ✨ Core Features
|
||||
## What This App Is
|
||||
BeadBoard is not just a task board. It is an execution system for coordinating agents around shared Beads workflows:
|
||||
|
||||
### 1. Multi-Project Registry & Scanner
|
||||
Stop context switching between repos.
|
||||
- **Project Registry**: Persist your favorite project roots for one-click access.
|
||||
- **Auto-Discovery**: Built-in filesystem scanner finds Bead-enabled projects across your drives.
|
||||
- **Aggregate Mode**: View tasks from *all* registered projects in a single unified board.
|
||||
- Agent-to-agent communication with explicit categories (`HANDOFF`, `BLOCKED`, `DECISION`, `INFO`)
|
||||
- Conversation threads merged from activity events, agent messages, and local interactions
|
||||
- Graph/topology context for deciding what should move next
|
||||
- Global project scope switching across single and aggregate workspaces
|
||||
- Swarm orchestration with archetypes/templates and assignment controls
|
||||
|
||||
### 2. Interactive Kanban Dashboard (`/`)
|
||||
Manage your flow state.
|
||||
|
||||
- **Live Updates**: Boards refresh automatically when the underlying JSONL files change (e.g., via CLI).
|
||||
- **Progressive Disclosure**: Task details, metadata, and relations are tucked away until you need them.
|
||||
- **Smart Filtering**: Filter by priority, assignee, status, or full-text search across thousands of beads.
|
||||
---
|
||||
|
||||
### 3. Dependency Graph Explorer (`/graph`)
|
||||
Understand the "Why" and "What's Next".
|
||||
|
||||
- **Epic-Centric Layout**: Automatically groups tasks by Epic for logical clustering.
|
||||
- **True DAG Visualization**: Uses Dagre layout engine to enforce a strict Left-to-Right dependency flow.
|
||||
- *Left*: Incoming Blockers
|
||||
- *Center*: Focus Task
|
||||
- *Right*: Unlocks / Downstream
|
||||
- **Focus Mode**: Minimizable dependency strip and deep-linking support for sharing exact views.
|
||||
- **Smart Metadata**: See bead counts, priorities, and status health at a glance.
|
||||
|
||||
|
||||
### 4. Agent Sessions Hub (`/sessions`)
|
||||
Coordinate multi-agent workflows with social-dense visibility.
|
||||
- **Epic-Grouped Task Feed**: Tasks organized by parent Epic with session state indicators (active, reviewing, needs_input, stale).
|
||||
- **Cross-Agent Communication**: Built-in messaging with HANDOFF, BLOCKED, and INFO categories.
|
||||
- **Agent Productivity Metrics**: Real-time stats showing active tasks, completions, and recent wins.
|
||||
- **Derived Activity Engine**: O(N) snapshot diffing computes project history on-demand without separate event storage.
|
||||
- **`bb agent` CLI Integration**: Visualizes data from agent registry, reservations, and mailboxes.
|
||||
---
|
||||
|
||||
### 5. Chronological Timeline (`/timeline`)
|
||||
Real-time activity feed for all project events.
|
||||
- **Live Updates**: Server-Sent Events stream changes instantly.
|
||||
- **Date Grouping**: Events organized by day (Today, Yesterday, etc.).
|
||||
- **Polymorphic Cards**: Distinct visual styles for Status, Lifecycle, and Diff events.
|
||||
- **History Buffer**: Recent events preserved across server restarts.
|
||||
## Core Features
|
||||
|
||||
## 🛠️ Stack
|
||||
- **Framework**: Next.js 15 (App Router)
|
||||
- **UI Engine**: React 19 + Framer Motion
|
||||
- **Styling**: Tailwind CSS + Custom Design System
|
||||
- **Type Safety**: Strict TypeScript
|
||||
### 1. Agent Communication System
|
||||
- Structured message lifecycle: `send`, `inbox`, `read`, `ack`
|
||||
- Message states: `unread`, `read`, `acked`
|
||||
- Per-task conversation threads combining:
|
||||
- activity events
|
||||
- agent mail
|
||||
- local bd interactions
|
||||
- Required acknowledgment semantics for high-signal categories (`HANDOFF`, `BLOCKED`)
|
||||
|
||||
## ⚡ Quick Start
|
||||
1. **Install**: `npm install`
|
||||
2. **Run**: `npm run dev`
|
||||
3. **Explore**: Open `http://localhost:3000`
|
||||
### 2. Swarm Coordination Surface
|
||||
- Agent Pool Monitor with:
|
||||
- Archetypes
|
||||
- Templates
|
||||
- Needs Agent queue
|
||||
- Pre-assigned queue
|
||||
- Squad roster
|
||||
- Assignment workflow through the graph workspace and right panel
|
||||
|
||||
|
||||
## 🤝 Contribution
|
||||
- **Typecheck**: `npm run typecheck`
|
||||
- **Test**: `npm run test`
|
||||
### 3. Graph + Dependency Topology
|
||||
- DAG-oriented graph workspace for execution decisions
|
||||
- Task/dependency tab modes for different planning lenses
|
||||
- Blocker/unblock context surfaced directly in task cards
|
||||
- Graph analysis support (cycle and blocked-chain context)
|
||||
|
||||
|
||||
### 4. Global Project Scope + Scanner
|
||||
- Project registry and scanner-backed discovery
|
||||
- Single-project and aggregate modes
|
||||
- Runtime scope switching without leaving the primary workspace
|
||||
|
||||
### 5. Realtime Operations Layer
|
||||
- Live updates via watchers + SSE
|
||||
- Activity stream integration with session/task context
|
||||
- Mutation/writeback feedback integrated into the same operational surface
|
||||
|
||||
---
|
||||
|
||||
## Runtime Surface
|
||||
|
||||
### Active Route
|
||||
- `/`
|
||||
|
||||
### View Modes
|
||||
- `/?view=social`
|
||||
- `/?view=graph`
|
||||
- `/?view=activity`
|
||||
|
||||
### Compatibility Redirects
|
||||
- `/graph` -> `/?view=graph`
|
||||
- `/sessions` -> `/?view=social`
|
||||
- `/timeline` -> `/?view=activity`
|
||||
- `/mockup` -> `/`
|
||||
|
||||
### Archived Route Vault
|
||||
Legacy route implementations are preserved in `reference/routes/**` and excluded from active runtime validation scope.
|
||||
|
||||
---
|
||||
|
||||
## Install
|
||||
|
||||
### Prerequisites
|
||||
- Node.js `18.18+` (Node `20 LTS` recommended)
|
||||
- npm
|
||||
|
||||
### Clone + Install
|
||||
```bash
|
||||
git clone https://github.com/zenchantlive/beadboard.git
|
||||
cd beadboard
|
||||
npm install
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Quick Start
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Open:
|
||||
|
||||
```text
|
||||
http://localhost:3000
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Configuration
|
||||
No external service is required for core local usage.
|
||||
|
||||
Runtime behavior is driven by:
|
||||
- Local Beads project data
|
||||
- Registered/scanned project roots
|
||||
- URL query state (`view`, `task`, `swarm`, `agent`, `epic`, `graphTab`, panel state)
|
||||
|
||||
---
|
||||
|
||||
## Operating Flow
|
||||
|
||||
### 1. Coordinate through Graph + Pool
|
||||
Open `/?view=graph`, inspect dependency topology, and drive assignment from the pool panel.
|
||||
|
||||
### 2. Communicate in Context
|
||||
Open a task thread to read merged conversation context and process message acknowledgments.
|
||||
|
||||
### 3. Switch Scope as Work Expands
|
||||
Use registry/scanner controls to move between local and aggregate project scope.
|
||||
|
||||
### 4. Track Live Signal
|
||||
Use social/activity views to monitor execution movement and operational events.
|
||||
|
||||
---
|
||||
|
||||
## Roadmap Notes
|
||||
- Cross-view assign controls in all major views.
|
||||
- Social naming/UX evolution (including possible shift toward “swim” terminology).
|
||||
- Continued expansion of global project config/scanner workflows.
|
||||
|
||||
---
|
||||
|
||||
## Scripts
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
npm run build
|
||||
npm run start
|
||||
npm run typecheck
|
||||
npm run lint
|
||||
npm run test
|
||||
npm run video
|
||||
npm run video:render
|
||||
npm run video:thumbnail
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Architecture
|
||||
- **Frontend**: Next.js App Router + React 19 + Tailwind + Framer Motion + Radix
|
||||
- **Graph stack**: XYFlow + Dagre
|
||||
- **Core domain**: Beads issue model, graph/kanban/session/social builders
|
||||
- **Coordination layer**: agent mail + session communication + swarm orchestration state
|
||||
- **Realtime**: watchers + SSE + snapshot differ + activity persistence
|
||||
- **Validation/typing**: strict TypeScript + Zod contracts where applicable
|
||||
|
||||
---
|
||||
|
||||
## Project Structure
|
||||
|
||||
```text
|
||||
src/
|
||||
app/
|
||||
page.tsx # active runtime route
|
||||
api/ # runtime API routes
|
||||
components/
|
||||
shared/ graph/ social/ activity/ sessions/ swarm/ kanban/
|
||||
hooks/
|
||||
lib/
|
||||
reference/
|
||||
routes/ # archived route implementations
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Contributing
|
||||
1. Keep active runtime pages in `src/app` minimal.
|
||||
2. Promote reusable logic into `src/lib`, `src/components`, `src/hooks`.
|
||||
3. Archive non-runtime route experiments in `reference/routes`.
|
||||
4. Run quality gates before merge:
|
||||
|
||||
```bash
|
||||
npm run typecheck
|
||||
npm run lint
|
||||
npm run test
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## License
|
||||
MIT
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue