viktor/beadboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
No description
86 commits 1 branch 0 tags 22 MiB
Find a file
zenchantlive ce8fdd0d4c feat(ui): complete shell layout components (bb-ui2.6, .7, .8, .9, .27) 
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
2026-02-15 23:19:52 -08:00
.beadboard/agent/runtime chore: add .beadboard user profile directory 2026-02-15 21:20:26 -08:00
.beads feat(graph): integrate WorkflowGraph into unified shell 2026-02-15 23:12:16 -08:00
assets readme pics 2026-02-13 00:20:44 -08:00
components/ui feat(ui): complete bb-ui2.2 - shadcn/ui Setup 2026-02-15 21:16:26 -08:00
docs docs: add planning documents for buff epic and unified UX 2026-02-15 21:19:14 -08:00
lib fix: add lib/utils.ts for shadcn component imports 2026-02-15 21:22:05 -08:00
scripts chore: add utility scripts and additional test coverage 2026-02-15 21:19:31 -08:00
skills/beadboard-driver feat(telemetry): complete bb-buff.1.3 - Backend Liveness Refactor 2026-02-15 21:14:05 -08:00
src feat(ui): complete shell layout components (bb-ui2.6, .7, .8, .9, .27) 2026-02-15 23:19:52 -08:00
tests feat(ui): complete shell layout components (bb-ui2.6, .7, .8, .9, .27) 2026-02-15 23:19:52 -08:00
tools feat(telemetry): complete bb-buff.1.3 - Backend Liveness Refactor 2026-02-15 21:14:05 -08:00
.eslintrc.json chore(repo): ignore local beads runtime lock and screenshot artifacts 2026-02-12 23:39:43 -08:00
.gitattributes chore: initialize beadboard baseline 2026-02-11 17:42:51 -08:00
.gitignore chore(repo): ignore local beads runtime lock and screenshot artifacts 2026-02-12 23:39:43 -08:00
AGENTS.md docs(beads): etch project history into memory bank and finalize skill-bb 2026-02-14 00:21:25 -08:00
bb.ps1 docs(beads): etch project history into memory bank and finalize skill-bb 2026-02-14 00:21:25 -08:00
components.json feat(ui): complete bb-ui2.2 - shadcn/ui Setup 2026-02-15 21:16:26 -08:00
eslint.config.mjs chore: clear lint warnings and finalize shared epic chip strip 2026-02-13 12:44:14 -08:00
image-1.png readme pics 2026-02-13 00:20:44 -08:00
image.png readme pics 2026-02-13 00:20:44 -08:00
LICENSE chore: initialize beadboard baseline 2026-02-11 17:42:51 -08:00
next-env.d.ts Add tracer-bullet Kanban baseline with live issues read path 2026-02-11 17:55:26 -08:00
next.config.ts feat: establish tokenized kanban design foundation 2026-02-11 18:38:51 -08:00
NEXT_SESSION_PROMPT.md docs: add next session prompt for bb-ui2.6, .7, .8 2026-02-15 22:01:31 -08:00
package-lock.json fix: recover from mass file corruption incident (2026-02-15) 2026-02-15 21:19:58 -08:00
package.json fix: recover from mass file corruption incident (2026-02-15) 2026-02-15 21:19:58 -08:00
postcss.config.js feat: establish tokenized kanban design foundation 2026-02-11 18:38:51 -08:00
README.md readme pics 2026-02-13 00:20:44 -08:00
tailwind.config.ts feat(design): complete bb-ui2.1 - Earthy-Dark Token System 2026-02-15 21:16:48 -08:00
tsconfig.json feat(ui): complete bb-ui2.2 - shadcn/ui Setup 2026-02-15 21:16:26 -08:00

README.md

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. alt text

🚀 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

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. Kanban Dashboard

  • 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". alt text

  • 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

  1. Install: npm install
  2. Run: npm run dev
  3. Explore: Open http://localhost:3000

🤝 Contribution

  • Typecheck: npm run typecheck
  • Test: npm run test