beads-kanban-ui 0.1.0 → 0.1.1

package/README.md

@@ -1,242 +1,36 @@
-# Beads Kanban UI
+# beads-ui
 
-**See all your tasks at a glance. Organize, and track progress across projects - no CLI required.**
+Visual Kanban board for the [Beads CLI](https://github.com/AvivK5498/beads-kanban-ui) task tracker.
 
-A beautiful visual Kanban board for the [Beads CLI](https://github.com/steveyegge/beads) task tracker. Beads stores tasks as git-native files (`.beads/issues.jsonl`), and this UI gives you the dashboard and board you've been missing.
+## Installation
 
-> **Works great with [Beads Orchestration](https://github.com/AvivK5498/Claude-Code-Beads-Orchestration)** — A multi-agent orchestration framework for Claude Code that uses beads for git-native task tracking.
-
-## See It in Action
-
-**Dashboard** — All your projects in one place with status at a glance:
-![Dashboard with multi-project view, status donuts, and tags](Screenshots/dashboard.png)
-
-**Kanban Board** — Organize tasks across Open → In Progress → In Review → Closed:
-![Kanban board showing epic groups and task cards with git branch info](Screenshots/kanban-board.png)
-
-**Bead Details** — Dive into epics with full context and subtasks:
-![Bead detail panel showing epic with progress bar and subtasks](Screenshots/bead-detail.png)
-
-## What You Get
-
-- **Multi-project dashboard** — Manage all your beads projects in one place with status donut charts
-- **Kanban board** — Open → In Progress → In Review → Closed
-- **Epic support** — Group related tasks, track progress with bars, view all subtasks
-- **Real-time sync** — File watcher auto-updates when beads files change on disk
-- **Git integration** — See branch status for each task at a glance
-- **Search & filter** — Quick filters for status, priority, owner, and tags
-- **Project tagging** — Organize with colored tags and filter by them
-
-## Quick Start
-
-### Option 1: npm install (Recommended)
-
-**Prerequisites:**
-- Beads CLI: `brew install steveyegge/beads/bd`
-
-**Install and run:**
 ```bash
 npm install -g beads-ui
-bead-kanban
-```
-
-That's it! The server starts automatically and opens your browser.
-
-> On first run, the postinstall script downloads the platform binary (~15MB). This is one-time only.
-
-### Option 2: Build from source
-
-**Prerequisites:**
-```bash
-# Install beads CLI
-brew install steveyegge/beads/bd
-
-# You'll also need Node.js 18+ and Rust
-```
-
-**Install and run:**
-```bash
-git clone https://github.com/AvivK5498/beads-kanban-ui
-cd beads-kanban-ui
-npm install
-npm run dev:full
-```
-
-Then navigate to **`http://localhost:3007`** and add your beads projects.
-
-The app watches for file changes and syncs in real-time.
-
----
-
-## Detailed Setup
-
-### Development Mode
-
-Run both frontend and backend together:
-```bash
-npm run dev:full
-```
-
-Or run separately:
-```bash
-# Terminal 1: Frontend (http://localhost:3007)
-npm run dev
-
-# Terminal 2: Backend (http://localhost:3008)
-npm run server:dev
 ```
 
-The Rust backend builds automatically on first run. If you need to rebuild it:
-```bash
-cd server && cargo build --release && cd ..
-```
-
-### Production Build
+## Usage
 
-For a single binary deployment:
 ```bash
-npm run build
-npm run server:build
-./server/target/release/beads-server
-```
-
-The production server embeds the frontend and serves everything from a single binary on port 3008.
-
----
-
-## How It Works
-
-### Dashboard
-1. Click **+ Add Project** and select a directory with a `.beads/` folder
-2. See all projects with status donuts showing task distribution
-3. Click any project to view its Kanban board
-
-### Kanban Board
-1. Tasks are organized by status: Open, In Progress, In Review, Closed
-2. Drag cards between columns to update status
-3. Click any task to see full details, comments, and related subtasks (for epics)
-
-### Features in Detail
-
-**Search & Filter**
-- Quick filters for status, priority, and assigned owner
-- Project tags for organization
-
-**Real-time Sync**
-- The app watches `.beads/issues.jsonl` and updates automatically
-- No refresh needed—changes appear instantly
-
-**Git Integration**
-- Each task shows its git branch status
-- Useful for tracking which branch a task lives on
-
----
-
-## Architecture
-
-```
-┌─────────────────────────────────────────────────────────┐
-│                    Beads Kanban UI                      │
-├─────────────────────────────────────────────────────────┤
-│  Frontend (Next.js 14)          │  Backend (Rust/Axum) │
-│  ─────────────────────          │  ────────────────────│
-│  • React 18                     │  • SQLite (projects) │
-│  • shadcn/ui components         │  • beads CLI bridge  │
-│  • Tailwind CSS                 │  • File watcher      │
-│  • TypeScript                   │  • Git integration   │
-└─────────────────────────────────────────────────────────┘
-                           │
-                           ▼
-              ┌─────────────────────────┐
-              │   .beads/ directory     │
-              │   (issues.jsonl, etc.)  │
-              └─────────────────────────┘
-```
-
-### Tech Stack
-- **Frontend**: Next.js 14, React 18, Tailwind CSS, shadcn/ui
-- **Backend**: Rust with Axum framework
-- **Database**: SQLite for project metadata
-- **File Sync**: Real-time watcher for `.beads/` changes
-
-### Project Structure
-```
-beads-kanban-ui/
-├── src/
-│   ├── app/                 # Next.js pages and routes
-│   │   ├── page.tsx         # Projects dashboard
-│   │   ├── project/         # Kanban board view
-│   │   └── settings/        # Settings page
-│   ├── components/          # React components
-│   │   ├── ui/              # shadcn/ui components
-│   │   ├── kanban-column.tsx
-│   │   ├── bead-card.tsx
-│   │   └── bead-detail.tsx
-│   ├── hooks/               # Custom React hooks
-│   ├── lib/                 # Utilities and API client
-│   └── types/               # TypeScript type definitions
-├── server/
-│   └── src/
-│       ├── main.rs          # Axum server entry point
-│       ├── db.rs            # SQLite database layer
-│       └── routes/          # API route handlers
-└── package.json
+bead-kanban
 ```
 
----
-
-## API Endpoints
-
-| Endpoint | Method | Description |
-|----------|--------|-------------|
-| `/api/health` | GET | Server health check |
-| `/api/projects` | GET/POST | List or create projects |
-| `/api/projects/:id` | GET/PUT/DELETE | Manage individual projects |
-| `/api/beads?path=` | GET | Read beads from a project path |
-| `/api/beads/comment` | POST | Add comment to a bead |
-| `/api/bd/command` | POST | Execute beads CLI commands |
-| `/api/git/branch-status` | GET | Get git branch status for a bead |
-| `/api/fs/list` | GET | List directory contents |
-| `/api/fs/exists` | GET | Check if a path exists |
-| `/api/watch/beads` | GET | Server-sent events for file changes |
-
-### Environment Variables
+This will start the Kanban board server on port 3008 and automatically open your browser to http://localhost:3008.
 
-| Variable | Default | Description |
-|----------|---------|-------------|
-| `PORT` | `3008` | Backend server port |
-| `NEXT_PUBLIC_BACKEND_URL` | `http://localhost:3008` | Backend URL for frontend API calls |
+## Requirements
 
----
-
-## Development Commands
-
-```bash
-# Run both frontend and backend
-npm run dev:full
-
-# Run frontend only
-npm run dev
-
-# Run backend only
-npm run server:dev
-
-# Build for production
-npm run build
-npm run server:build
-
-# Linting
-npm run lint
-```
+- Node.js 18 or higher
+- [Beads CLI](https://github.com/AvivK5498/beads-kanban-ui) installed and configured
 
----
+## Supported Platforms
 
-## Related Projects
+- macOS (Apple Silicon and Intel)
+- Linux x64
+- Windows x64
 
-- **[Beads CLI](https://github.com/steveyegge/beads)** — Git-native issue tracker (the core tool this UI wraps)
-- **[Beads Orchestration](https://github.com/AvivK5498/Claude-Code-Beads-Orchestration)** — Multi-agent orchestration framework for Claude Code using beads
+## Links
 
----
+- [GitHub Repository](https://github.com/AvivK5498/beads-kanban-ui)
+- [Report Issues](https://github.com/AvivK5498/beads-kanban-ui/issues)
 
 ## License
 

package/package.json

@@ -1,62 +1,25 @@
 {
   "name": "beads-kanban-ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
+  "description": "Visual Kanban board for the Beads CLI task tracker",
+  "bin": {
+    "bead-kanban": "./bin/cli.js"
+  },
   "scripts": {
-    "dev": "next dev -p 3007",
-    "build": "next build",
-    "start": "next start -p 3007",
-    "lint": "next lint",
-    "server:dev": "cd server && cargo run",
-    "server:build": "cd server && cargo build --release",
-    "dev:full": "concurrently \"npm run dev\" \"npm run server:dev\""
+    "postinstall": "node scripts/postinstall.js"
   },
-  "dependencies": {
-    "@base-ui/react": "^1.1.0",
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/sortable": "^10.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
-    "@radix-ui/react-alert-dialog": "^1.1.15",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-progress": "^1.1.8",
-    "@radix-ui/react-scroll-area": "^1.2.10",
-    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-separator": "^1.1.8",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-toast": "^1.2.15",
-    "@radix-ui/react-tooltip": "^1.2.8",
-    "@react-three/drei": "^9.122.0",
-    "@react-three/fiber": "^8.18.0",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "date-fns": "^4.1.0",
-    "lucide-react": "^0.562.0",
-    "motion": "^12.27.5",
-    "next": "^14.2.0",
-    "ogl": "^1.0.11",
-    "radix-ui": "^1.4.3",
-    "react": "^18.3.0",
-    "react-dom": "^18.3.0",
-    "react-markdown": "^10.1.0",
-    "recharts": "^2.15.4",
-    "rehype-highlight": "^7.0.2",
-    "tailwind-merge": "^3.4.0",
-    "tailwindcss-animate": "^1.0.7",
-    "three": "^0.166.1"
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/AvivK5498/beads-kanban-ui"
   },
-  "devDependencies": {
-    "@tailwindcss/typography": "^0.5.19",
-    "@types/node": "^20.0.0",
-    "@types/react": "^18.3.0",
-    "@types/react-dom": "^18.3.0",
-    "autoprefixer": "^10.4.0",
-    "concurrently": "^8.2.0",
-    "eslint": "^8.0.0",
-    "eslint-config-next": "^14.2.0",
-    "playwright": "^1.57.0",
-    "postcss": "^8.4.0",
-    "tailwindcss": "^3.4.0",
-    "typescript": "^5.0.0"
+  "keywords": [
+    "beads",
+    "kanban",
+    "task-tracker",
+    "cli"
+  ],
+  "license": "MIT",
+  "engines": {
+    "node": ">=18"
   }
 }

package/.designs/beads-kanban-ui-bj0.md

@@ -1,73 +0,0 @@
-# Main Page Design Overhaul
-
-## Epic ID: beads-kanban-ui-bj0
-
-## Overview
-
-Modernize the main projects page with an animated beam background, custom typography, and improved layout structure. Remove navbar, add centered heading, create a visually appealing project grid.
-
-## Requirements
-
-1. **Background**: Animated Beams component from @react-bits registry
-   - Full-screen, fixed position, behind all content
-   - Config: beamWidth=8, beamHeight=14, beamNumber=20, lightColor="#f0c7ff", speed=2, noiseIntensity=1.75, scale=0.2, rotation=30
-
-2. **Typography**: Space Grotesk font family
-   - Imported via next/font/google
-   - Applied to headings
-
-3. **Layout**:
-   - Remove navbar/header completely
-   - Add centered heading: "Manage Your Beads Projects"
-   - Center the 3-column grid with max-width constraint (~1200px)
-   - Keep FAB button for adding projects
-   - Move settings icon to top-right corner (fixed position)
-
-## Visual Layout
-
-```
-+--------------------------------------------------+
-|  [Settings Icon]                          (fixed)|
-|                                                  |
-|        "Manage Your Beads Projects"              |
-|        (Space Grotesk, centered)                 |
-|                                                  |
-|    +-------+  +-------+  +-------+               |
-|    | Card  |  | Card  |  | Card  |               |
-|    +-------+  +-------+  +-------+               |
-|                                                  |
-|                              [+ FAB]     (fixed) |
-+--------------------------------------------------+
-  * Animated Beams fill entire viewport behind *
-```
-
-## Z-Index Layering
-
-| Layer | z-index | Component |
-|-------|---------|-----------|
-| Background | 0 | Beams |
-| Content | 10 | Main container, grid, cards |
-| Controls | 20 | FAB, Settings icon |
-| Dialogs | 50 | AddProjectDialog |
-
-## Implementation Tasks
-
-1. **beads-kanban-ui-bj0.1**: Install Beams component
-   - `npx shadcn@latest add @react-bits/Beams-JS-CSS`
-
-2. **beads-kanban-ui-bj0.2**: Configure Space Grotesk font
-   - Add to layout.tsx via next/font/google
-   - Add .font-heading utility class
-
-3. **beads-kanban-ui-bj0.3**: Restructure main page layout
-   - Remove header, add Beams background, add heading, center grid
-   - Depends on tasks 1 and 2
-
-## File Changes
-
-| File | Change |
-|------|--------|
-| src/app/page.tsx | Remove navbar, add Beams, add heading, center layout |
-| src/app/layout.tsx | Add Space Grotesk font |
-| src/app/globals.css | Add .font-heading class |
-| src/components/ui/beams.tsx | New file (from registry) |

package/.designs/beads-kanban-ui-qxq.md

@@ -1,144 +0,0 @@
-# Dark Minimalist Theme for Kanban and Settings Pages
-
-## Epic ID: beads-kanban-ui-qxq
-
-## Overview
-
-Apply the dark minimalist aesthetic from the home page to the Kanban board (project page) and Settings page. The goal is visual consistency across all pages: dark backgrounds, glass-morphism cards, subtle borders, and refined typography.
-
-## Reference Implementation
-
-The home page (`src/app/page.tsx`) establishes the target aesthetic:
-- Root container: `dark min-h-dvh bg-[#0a0a0a]`
-- Nav: `border-zinc-800 bg-[#0a0a0a]/80 backdrop-blur-sm`
-- Cards: roiui glass effect with `backdrop-filter: blur(12px)`
-
----
-
-## 1. Color Palette
-
-### Background Colors
-
-| Usage | Value | Tailwind Class |
-|-------|-------|----------------|
-| Page background | `#0a0a0a` | `bg-[#0a0a0a]` |
-| Column background | - | `bg-zinc-900/50` |
-
-### Border Colors
-
-| Usage | Tailwind Class |
-|-------|----------------|
-| Default border | `border-zinc-800` |
-| Hover border | `border-zinc-700` |
-| Focus ring | `ring-zinc-400` |
-
-### Text Colors
-
-| Usage | Tailwind Class |
-|-------|----------------|
-| Primary text | `text-white` or `text-foreground` |
-| Secondary text | `text-zinc-400` |
-| Muted text | `text-zinc-500` |
-
----
-
-## 2. Card Styling (Glass Effect)
-
-```tsx
-<div className={cn(
-  "rounded-lg",
-  "bg-zinc-900/70 backdrop-blur-md",
-  "border border-zinc-800/60",
-  "shadow-sm shadow-black/20",
-  "transition-all duration-200",
-  "hover:-translate-y-0.5 hover:shadow-lg hover:shadow-black/30",
-  "hover:border-zinc-700"
-)}>
-```
-
-### Selected State
-```tsx
-isSelected && "ring-2 ring-zinc-400 ring-offset-2 ring-offset-[#0a0a0a]"
-```
-
-### Blocked State
-```tsx
-blocked ? "border-l-4 border-l-red-500" : "border-l-4 border-l-transparent"
-```
-
----
-
-## 3. Column Differentiation
-
-Use subtle colored accent bars at the top of each column header instead of colored backgrounds.
-
-### Column Container
-```tsx
-<div className="flex flex-col h-full min-h-0 rounded-lg bg-zinc-900/30 border border-zinc-800/50">
-```
-
-### Column Color Mapping
-
-| Status | Accent Border | Header Text | Badge BG | Badge Text |
-|--------|---------------|-------------|----------|------------|
-| Open | `border-t-blue-500/60` | `text-blue-400` | `bg-blue-500/20` | `text-blue-400` |
-| In Progress | `border-t-amber-500/60` | `text-amber-400` | `bg-amber-500/20` | `text-amber-400` |
-| In Review | `border-t-purple-500/60` | `text-purple-400` | `bg-purple-500/20` | `text-purple-400` |
-| Closed | `border-t-green-500/60` | `text-green-400` | `bg-green-500/20` | `text-green-400` |
-
----
-
-## 4. Badge Colors (Dark Theme)
-
-### Priority Badges
-
-| Priority | Background | Text |
-|----------|------------|------|
-| P0 (Critical) | `bg-red-500/20` | `text-red-400` |
-| P1 (High) | `bg-orange-500/20` | `text-orange-400` |
-| P2 (Medium) | `bg-zinc-500/20` | `text-zinc-400` |
-| P3/P4 (Low) | `bg-zinc-600/20` | `text-zinc-500` |
-
-### Status Badges
-
-| Status | Background | Text |
-|--------|------------|------|
-| BLOCKED | `bg-red-500/20` | `text-red-400` |
-| Open | `bg-blue-500/20` | `text-blue-400` |
-| In Progress | `bg-amber-500/20` | `text-amber-400` |
-| In Review | `bg-purple-500/20` | `text-purple-400` |
-| Closed | `bg-green-500/20` | `text-green-400` |
-
----
-
-## 5. Page Wrapper Pattern
-
-### Kanban Page
-```tsx
-<div className="dark min-h-dvh bg-[#0a0a0a]">
-  <header className="sticky top-0 z-30 border-b border-zinc-800 bg-[#0a0a0a]/80 backdrop-blur-sm px-4 py-3">
-  </header>
-  <main className="flex-1 overflow-hidden p-4">
-  </main>
-</div>
-```
-
-### Settings Page
-```tsx
-<div className="dark min-h-dvh bg-[#0a0a0a]">
-  <header className="sticky top-0 z-30 border-b border-zinc-800 bg-[#0a0a0a]/80 backdrop-blur-sm px-6 py-4">
-  </header>
-  <main className="mx-auto max-w-2xl p-6">
-  </main>
-</div>
-```
-
----
-
-## 6. Button Variants
-
-| Variant | Classes |
-|---------|---------|
-| Primary | `bg-zinc-100 text-zinc-900 hover:bg-white` |
-| Ghost | `text-zinc-400 hover:bg-zinc-800/50 hover:text-zinc-100` |
-| Destructive | `bg-red-900/30 text-red-400 border-red-800/50 hover:bg-red-900/50` |