beads-kanban-ui 0.1.0

package/.history/src/app/page_20260121144911.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import dynamic from "next/dynamic";
+import { Settings } from "lucide-react";
+import { ProjectCard } from "@/components/project-card";
+import { AddProjectDialog } from "@/components/add-project-dialog";
+import { useProjects } from "@/hooks/use-projects";
+import { Skeleton } from "@/components/ui/skeleton";
+
+// Dynamic import with SSR disabled for WebGL canvas component
+const RippleGrid = dynamic(() => import("@/components/RippleGrid"), { ssr: false });
+
+export default function ProjectsPage() {
+  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
+  const { projects, isLoading, error, addProject, updateProjectTags } = useProjects();
+
+  const handleAddProject = async (input: { name: string; path: string }) => {
+    await addProject(input);
+  };
+
+  return (
+    <div className="dark relative min-h-screen bg-[#0d0b14]">
+      {/* RippleGrid Background - fixed, full-screen, z-0 */}
+      <div className="fixed inset-0 z-0 overflow-hidden">
+        <RippleGrid
+          gridColor="#302a4c"
+          rippleIntensity={0.02}
+          gridSize={15}
+          gridThickness={15}
+          fadeDistance={1.8}
+          vignetteStrength={0.5}
+          glowIntensity={0.4}
+          opacity={1}
+          gridRotation={0}
+          mouseInteractionRadius={0.8}
+          mouseInteraction={false}
+          enableRainbow={false}
+        />
+      </div>
+
+      {/* Settings Icon - fixed top-right, z-20 */}
+      <Link
+        href="/settings"
+        aria-label="Settings"
+        className="fixed right-6 top-6 z-20 rounded-md p-2 text-zinc-400 hover:bg-zinc-800/50 hover:text-zinc-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent"
+      >
+        <Settings className="h-5 w-5" aria-hidden="true" />
+      </Link>
+
+      {/* Main Content */}
+      <main className="relative z-10 flex flex-col items-center px-6 py-16">
+        {/* Centered Heading with Space Grotesk */}
+        <h1 className="mb-12 text-center text-balance font-heading text-4xl font-bold tracking-tight text-white sm:text-5xl">
+          Manage Your Beads Projects
+        </h1>
+
+        <div className="w-full max-w-[1200px]">
+          {isLoading ? (
+            <div role="status" aria-label="Loading projects" className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+              {[1, 2, 3].map((i) => (
+                <div key={i} className="rounded-xl border bg-card/70 p-4 backdrop-blur-md">
+                  <div className="mb-3 flex gap-1.5">
+                    <Skeleton className="h-5 w-16" />
+                    <Skeleton className="h-5 w-12" />
+                  </div>
+                  <Skeleton className="h-5 w-40" />
+                  <Skeleton className="mt-2 h-4 w-48" />
+                  <Skeleton className="mt-4 h-4 w-32" />
+                  <Skeleton className="mt-2 h-3 w-28" />
+                </div>
+              ))}
+            </div>
+          ) : error ? (
+            <div className="rounded-lg border border-red-800/50 bg-red-950/70 p-6 text-center backdrop-blur-md">
+              <p className="text-red-400">Error loading projects: {error.message}</p>
+              <p className="mt-2 text-sm text-red-500">
+                Make sure the Tauri backend is running.
+              </p>
+            </div>
+          ) : projects.length === 0 ? (
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+              <div className="rounded-lg border border-dashed border-zinc-700 bg-card/70 p-6 text-center text-zinc-400 backdrop-blur-md">
+                <p>No projects yet</p>
+                <p className="mt-1 text-sm text-zinc-500">Click the button below to add a project</p>
+              </div>
+            </div>
+          ) : (
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+              {projects.map((project) => (
+                <ProjectCard
+                  key={project.id}
+                  id={project.id}
+                  name={project.name}
+                  path={project.path}
+                  tags={project.tags}
+                  beadCounts={project.beadCounts}
+                  onTagsChange={(tags) => updateProjectTags(project.id, tags)}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      </main>
+
+      {/* FAB - Add Project, z-20 */}
+      <button
+        onClick={() => setIsAddDialogOpen(true)}
+        className="fixed bottom-6 right-6 z-20 flex h-14 w-14 items-center justify-center rounded-full bg-zinc-100 text-zinc-900 shadow-lg hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-100 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent"
+        aria-label="Add Project"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden="true"
+        >
+          <path d="M5 12h14" />
+          <path d="M12 5v14" />
+        </svg>
+      </button>
+
+      {/* Add Project Dialog */}
+      <AddProjectDialog
+        open={isAddDialogOpen}
+        onOpenChange={setIsAddDialogOpen}
+        onAddProject={handleAddProject}
+      />
+    </div>
+  );
+}

package/.history/src/app/page_20260121144928.tsx

@@ -0,0 +1,138 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import dynamic from "next/dynamic";
+import { Settings } from "lucide-react";
+import { ProjectCard } from "@/components/project-card";
+import { AddProjectDialog } from "@/components/add-project-dialog";
+import { useProjects } from "@/hooks/use-projects";
+import { Skeleton } from "@/components/ui/skeleton";
+
+// Dynamic import with SSR disabled for WebGL canvas component
+const RippleGrid = dynamic(() => import("@/components/RippleGrid"), { ssr: false });
+
+export default function ProjectsPage() {
+  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
+  const { projects, isLoading, error, addProject, updateProjectTags } = useProjects();
+
+  const handleAddProject = async (input: { name: string; path: string }) => {
+    await addProject(input);
+  };
+
+  return (
+    <div className="dark relative min-h-screen bg-[#0d0b14]">
+      {/* RippleGrid Background - fixed, full-screen, z-0 */}
+      <div className="fixed inset-0 z-0 overflow-hidden">
+        <RippleGrid
+          gridColor="#302a4c"
+          rippleIntensity={0.02}
+          gridSize={15}
+          gridThickness={15}
+          fadeDistance={1.8}
+          vignetteStrength={0.5}
+          glowIntensity={0.4}
+          opacity={1}
+          gridRotation={45}
+          mouseInteractionRadius={0.8}
+          mouseInteraction={false}
+          enableRainbow={false}
+        />
+      </div>
+
+      {/* Settings Icon - fixed top-right, z-20 */}
+      <Link
+        href="/settings"
+        aria-label="Settings"
+        className="fixed right-6 top-6 z-20 rounded-md p-2 text-zinc-400 hover:bg-zinc-800/50 hover:text-zinc-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent"
+      >
+        <Settings className="h-5 w-5" aria-hidden="true" />
+      </Link>
+
+      {/* Main Content */}
+      <main className="relative z-10 flex flex-col items-center px-6 py-16">
+        {/* Centered Heading with Space Grotesk */}
+        <h1 className="mb-12 text-center text-balance font-heading text-4xl font-bold tracking-tight text-white sm:text-5xl">
+          Manage Your Beads Projects
+        </h1>
+
+        <div className="w-full max-w-[1200px]">
+          {isLoading ? (
+            <div role="status" aria-label="Loading projects" className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+              {[1, 2, 3].map((i) => (
+                <div key={i} className="rounded-xl border bg-card/70 p-4 backdrop-blur-md">
+                  <div className="mb-3 flex gap-1.5">
+                    <Skeleton className="h-5 w-16" />
+                    <Skeleton className="h-5 w-12" />
+                  </div>
+                  <Skeleton className="h-5 w-40" />
+                  <Skeleton className="mt-2 h-4 w-48" />
+                  <Skeleton className="mt-4 h-4 w-32" />
+                  <Skeleton className="mt-2 h-3 w-28" />
+                </div>
+              ))}
+            </div>
+          ) : error ? (
+            <div className="rounded-lg border border-red-800/50 bg-red-950/70 p-6 text-center backdrop-blur-md">
+              <p className="text-red-400">Error loading projects: {error.message}</p>
+              <p className="mt-2 text-sm text-red-500">
+                Make sure the Tauri backend is running.
+              </p>
+            </div>
+          ) : projects.length === 0 ? (
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+              <div className="rounded-lg border border-dashed border-zinc-700 bg-card/70 p-6 text-center text-zinc-400 backdrop-blur-md">
+                <p>No projects yet</p>
+                <p className="mt-1 text-sm text-zinc-500">Click the button below to add a project</p>
+              </div>
+            </div>
+          ) : (
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+              {projects.map((project) => (
+                <ProjectCard
+                  key={project.id}
+                  id={project.id}
+                  name={project.name}
+                  path={project.path}
+                  tags={project.tags}
+                  beadCounts={project.beadCounts}
+                  onTagsChange={(tags) => updateProjectTags(project.id, tags)}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      </main>
+
+      {/* FAB - Add Project, z-20 */}
+      <button
+        onClick={() => setIsAddDialogOpen(true)}
+        className="fixed bottom-6 right-6 z-20 flex h-14 w-14 items-center justify-center rounded-full bg-zinc-100 text-zinc-900 shadow-lg hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-100 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent"
+        aria-label="Add Project"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden="true"
+        >
+          <path d="M5 12h14" />
+          <path d="M12 5v14" />
+        </svg>
+      </button>
+
+      {/* Add Project Dialog */}
+      <AddProjectDialog
+        open={isAddDialogOpen}
+        onOpenChange={setIsAddDialogOpen}
+        onAddProject={handleAddProject}
+      />
+    </div>
+  );
+}

package/README.md

@@ -0,0 +1,243 @@
+# Beads Kanban UI
+
+**See all your tasks at a glance. Organize, and track progress across projects - no CLI required.**
+
+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.
+
+> **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
+
+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
+```
+
+---
+
+## 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
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `PORT` | `3008` | Backend server port |
+| `NEXT_PUBLIC_BACKEND_URL` | `http://localhost:3008` | Backend URL for frontend API calls |
+
+---
+
+## 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
+```
+
+---
+
+## Related Projects
+
+- **[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
+
+---
+
+## License
+
+MIT

package/components.json

@@ -0,0 +1,27 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {
+    "@motion-primitives": "https://motion-primitives.com/c/{name}.json",
+    "@reui": "https://reui.io/r/{name}.json",
+    "@roiui": "https://roiui.com/r/{name}.json",
+    "@react-bits": "https://reactbits.dev/r/{name}.json"
+  }
+}