No description
bd3b3da30a
## The Bug User reported: 'An archetype can only exist on one task at a time - when I try to make the next task have the same arch, it deleted the one I added prior.' ## Root Cause The SSE subscription (useBeadsSubscription) refreshes data from the server whenever ANY change happens. When user assigns an archetype: 1. User clicks assign -> optimistic update adds label locally 2. SSE fires (from previous operation or heartbeat) -> fetches fresh data 3. useEffect syncs localLabels with data.labels (which doesn't have the new label yet) 4. Label disappears from UI 5. Eventually API completes and another SSE refresh brings it back This race condition causes labels to flicker or disappear entirely. ## The Fix Track pending optimistic labels in a useRef Set, and merge them with incoming server data during sync: 1. pendingOptimisticLabels = useRef<Set<string>>(new Set()) 2. When optimistically adding: add to pending set 3. useEffect merge: combine server labels + pending labels 4. After API completes: remove from pending set This ensures optimistic labels survive SSE refreshes. ## Test Coverage Added graph-node-labels-optimistic.test.tsx with 10 tests: - Uses useRef for tracking - Tracks in a Set - Preserves labels during sync - Adds/removes from pending set - Handles multiple concurrent operations - Per-node state isolation ## Verification - typecheck: pass - lint: pass (0 errors) - test: all pass |
||
|---|---|---|
| .agent/skills/shadcn-ui | ||
| .agents/skills | ||
| .augment/skills/shadcn-ui | ||
| .beadboard/agent/runtime | ||
| .beads | ||
| .claude/skills/shadcn-ui | ||
| .cline/skills/shadcn-ui | ||
| .openhands/skills/shadcn-ui | ||
| assets | ||
| components/ui | ||
| docs | ||
| lib | ||
| out | ||
| public | ||
| scripts | ||
| skills | ||
| src | ||
| tests | ||
| tools | ||
| .eslintrc.json | ||
| .gitattributes | ||
| .gitignore | ||
| agent-help.txt | ||
| AGENTS.md | ||
| bb.ps1 | ||
| components.json | ||
| epic-help.txt | ||
| epic.txt | ||
| eslint-report.json | ||
| eslint.config.mjs | ||
| help.txt | ||
| image-1.png | ||
| image.png | ||
| label-help.txt | ||
| LICENSE | ||
| next-env.d.ts | ||
| next.config.ts | ||
| NEXT_SESSION_PROMPT.md | ||
| package-lock.json | ||
| package.json | ||
| postcss.config.js | ||
| README.md | ||
| remotion.config.ts | ||
| sse-output.txt | ||
| state-help.txt | ||
| tailwind.config.ts | ||
| task1.txt | ||
| task2.txt | ||
| task3.txt | ||
| test-output.txt | ||
| test-output2.txt | ||
| test-sse.mjs | ||
| test-watcher.ts | ||
| test2.txt | ||
| tsconfig.json | ||
BeadBoard
The Windows-native Control Center for Beads.
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.jsonlin 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
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.
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.
🛠️ Stack
- Framework: Next.js 15 (App Router)
- UI Engine: React 19 + Framer Motion
- Styling: Tailwind CSS + Custom Design System
- Type Safety: Strict TypeScript
⚡ Quick Start
- Install:
npm install - Run:
npm run dev - Explore: Open
http://localhost:3000
🤝 Contribution
- Typecheck:
npm run typecheck - Test:
npm run test