beads-kanban-ui 0.1.0

package/src/components/folder-browser.tsx

@@ -0,0 +1,273 @@
+"use client";
+
+import { useState, useEffect, useCallback, useRef } from "react";
+import * as api from "@/lib/api";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+import { Folder, FolderOpen, ChevronRight, Home } from "lucide-react";
+import type { FsEntry } from "@/lib/api";
+
+interface FolderBrowserProps {
+  currentPath: string;
+  onPathChange: (path: string) => void;
+  onSelectPath: (path: string, hasBeads: boolean) => void;
+  className?: string;
+}
+
+interface DirectoryEntry extends FsEntry {
+  hasBeads: boolean;
+}
+
+export function FolderBrowser({
+  currentPath,
+  onPathChange,
+  onSelectPath,
+  className,
+}: FolderBrowserProps) {
+  const [directories, setDirectories] = useState<DirectoryEntry[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedIndex, setSelectedIndex] = useState<number>(-1);
+  const [currentPathHasBeads, setCurrentPathHasBeads] = useState(false);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  // Load directories when path changes
+  useEffect(() => {
+    const loadDirectories = async () => {
+      if (!currentPath) return;
+
+      setLoading(true);
+      setError(null);
+      setSelectedIndex(-1);
+
+      try {
+        // Fetch directory contents and check if current path has beads in parallel
+        const [listResult, currentBeadsResult] = await Promise.all([
+          api.fs.list(currentPath),
+          api.fs.exists(`${currentPath.replace(/\/+$/, "")}/.beads`),
+        ]);
+
+        // Filter to only directories
+        const dirs = listResult.entries.filter((entry) => entry.isDirectory);
+
+        // Check which directories have .beads folders in parallel
+        const dirsWithBeadsStatus = await Promise.all(
+          dirs.map(async (dir) => {
+            const beadsPath = `${dir.path}/.beads`;
+            const result = await api.fs.exists(beadsPath);
+            return {
+              ...dir,
+              hasBeads: result.exists,
+            };
+          })
+        );
+
+        // Sort: directories with .beads first, then alphabetically
+        dirsWithBeadsStatus.sort((a, b) => {
+          if (a.hasBeads && !b.hasBeads) return -1;
+          if (!a.hasBeads && b.hasBeads) return 1;
+          return a.name.localeCompare(b.name);
+        });
+
+        setDirectories(dirsWithBeadsStatus);
+        setCurrentPathHasBeads(currentBeadsResult.exists);
+      } catch (err) {
+        console.error("Error loading directories:", err);
+        setError(err instanceof Error ? err.message : "Failed to load directories");
+        setDirectories([]);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadDirectories();
+  }, [currentPath]);
+
+  const navigateToDirectory = useCallback(
+    (path: string) => {
+      onPathChange(path);
+    },
+    [onPathChange]
+  );
+
+  const navigateUp = useCallback(() => {
+    const parentPath = currentPath.replace(/\/[^/]+\/?$/, "") || "/";
+    onPathChange(parentPath);
+  }, [currentPath, onPathChange]);
+
+  const navigateToHome = useCallback(() => {
+    // Get home directory - on macOS/Linux it's typically /Users/username or /home/username
+    const homePath =
+      typeof window !== "undefined"
+        ? "/Users" // Start at /Users on macOS for navigation
+        : "/";
+    onPathChange(homePath);
+  }, [onPathChange]);
+
+  // Build breadcrumb segments from current path
+  const pathSegments = currentPath.split("/").filter(Boolean);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (directories.length === 0) return;
+
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          setSelectedIndex((prev) =>
+            prev < directories.length - 1 ? prev + 1 : prev
+          );
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          setSelectedIndex((prev) => (prev > 0 ? prev - 1 : prev));
+          break;
+        case "Enter":
+          e.preventDefault();
+          if (selectedIndex >= 0 && selectedIndex < directories.length) {
+            navigateToDirectory(directories[selectedIndex].path);
+          }
+          break;
+        case "Backspace":
+          if (currentPath !== "/") {
+            e.preventDefault();
+            navigateUp();
+          }
+          break;
+      }
+    },
+    [directories, selectedIndex, navigateToDirectory, navigateUp, currentPath]
+  );
+
+  const handleSelect = useCallback(() => {
+    onSelectPath(currentPath, currentPathHasBeads);
+  }, [currentPath, currentPathHasBeads, onSelectPath]);
+
+  return (
+    <div
+      className={cn("flex flex-col gap-3", className)}
+      onKeyDown={handleKeyDown}
+      tabIndex={0}
+      role="application"
+      aria-label="Folder browser"
+    >
+      {/* Breadcrumb navigation */}
+      <div className="flex items-center gap-1 rounded-md border border-zinc-700 bg-zinc-800/50 px-2 py-1.5 text-sm">
+        <Button
+          variant="ghost"
+          size="xs"
+          mode="icon"
+          onClick={navigateToHome}
+          aria-label="Go to home directory"
+          className="shrink-0"
+        >
+          <Home />
+        </Button>
+        <ChevronRight className="size-3 shrink-0 text-zinc-500" />
+        {pathSegments.map((segment, index) => {
+          const segmentPath = "/" + pathSegments.slice(0, index + 1).join("/");
+          const isLast = index === pathSegments.length - 1;
+
+          return (
+            <div key={segmentPath} className="flex items-center gap-1">
+              <button
+                type="button"
+                onClick={() => navigateToDirectory(segmentPath)}
+                className={cn(
+                  "rounded px-1 py-0.5 text-sm transition-colors hover:bg-zinc-700",
+                  isLast ? "text-zinc-100" : "text-zinc-400"
+                )}
+              >
+                {segment}
+              </button>
+              {!isLast && (
+                <ChevronRight className="size-3 shrink-0 text-zinc-500" />
+              )}
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Current path beads indicator */}
+      {currentPathHasBeads && (
+        <div className="flex items-center gap-2 rounded-md border border-purple-500/30 bg-purple-500/10 px-3 py-2">
+          <Badge variant="info" size="sm">
+            .beads found
+          </Badge>
+          <span className="text-xs text-zinc-400">
+            This folder contains a beads project
+          </span>
+        </div>
+      )}
+
+      {/* Directory list */}
+      <ScrollArea className="h-[300px] rounded-md border border-zinc-700 bg-zinc-800/50">
+        <div ref={listRef} className="p-2" role="listbox" aria-label="Directories">
+          {loading ? (
+            <div className="flex items-center justify-center py-8 text-zinc-500">
+              <div className="size-4 animate-spin rounded-full border-2 border-zinc-500 border-t-transparent" />
+              <span className="ml-2 text-sm">Loading...</span>
+            </div>
+          ) : error ? (
+            <div className="py-8 text-center text-sm text-red-400">{error}</div>
+          ) : directories.length === 0 ? (
+            <div className="py-8 text-center text-sm text-zinc-500">
+              No subdirectories found
+            </div>
+          ) : (
+            directories.map((dir, index) => (
+              <button
+                key={dir.path}
+                type="button"
+                role="option"
+                aria-selected={selectedIndex === index}
+                onClick={() => setSelectedIndex(index)}
+                onDoubleClick={() => navigateToDirectory(dir.path)}
+                className={cn(
+                  "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors",
+                  selectedIndex === index
+                    ? "bg-zinc-700 text-zinc-100"
+                    : "text-zinc-300 hover:bg-zinc-700/50",
+                  dir.hasBeads && "border-l-2 border-purple-500"
+                )}
+              >
+                {selectedIndex === index ? (
+                  <FolderOpen className="size-4 shrink-0 text-zinc-400" />
+                ) : (
+                  <Folder
+                    className={cn(
+                      "size-4 shrink-0",
+                      dir.hasBeads ? "text-purple-400" : "text-zinc-400"
+                    )}
+                  />
+                )}
+                <span className="truncate">{dir.name}</span>
+                {dir.hasBeads && (
+                  <Badge variant="info" size="xs" className="ml-auto shrink-0">
+                    .beads
+                  </Badge>
+                )}
+              </button>
+            ))
+          )}
+        </div>
+      </ScrollArea>
+
+      {/* Keyboard hints */}
+      <div className="text-xs text-zinc-500">
+        Double-click or press Enter to open. Backspace to go up.
+      </div>
+
+      {/* Select button */}
+      <Button
+        onClick={handleSelect}
+        disabled={!currentPath || loading}
+        className="w-full"
+      >
+        Select This Folder
+      </Button>
+    </div>
+  );
+}

package/src/components/footer.tsx

@@ -0,0 +1,27 @@
+export function Footer() {
+  return (
+    <footer className="border-t border-zinc-200 px-6 py-4">
+      <div className="flex flex-col items-center justify-center gap-2 text-sm text-zinc-500 sm:flex-row sm:gap-4">
+        <span>Beads Kanban UI</span>
+        <span className="hidden sm:inline">·</span>
+        <a
+          href="https://github.com/AvivK5498/beads-kanban-ui"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="flex items-center gap-1.5 hover:text-zinc-900 transition-colors"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+          >
+            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+          </svg>
+          View on GitHub
+        </a>
+      </div>
+    </footer>
+  );
+}

package/src/components/kanban/default.tsx

@@ -0,0 +1,184 @@
+'use client';
+
+import * as React from 'react';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Kanban,
+  KanbanBoard,
+  KanbanColumn,
+  KanbanColumnContent,
+  KanbanColumnHandle,
+  KanbanItem,
+  KanbanItemHandle,
+  KanbanOverlay,
+} from '@/components/ui/kanban';
+import { GripVertical } from 'lucide-react';
+
+interface Task {
+  id: string;
+  title: string;
+  priority: 'low' | 'medium' | 'high';
+  description?: string;
+  assignee?: string;
+  assigneeAvatar?: string;
+  dueDate?: string;
+}
+
+const COLUMN_TITLES: Record<string, string> = {
+  backlog: 'Backlog',
+  inProgress: 'In Progress',
+  review: 'Review',
+  done: 'Done',
+};
+
+interface TaskCardProps extends Omit<React.ComponentProps<typeof KanbanItem>, 'value' | 'children'> {
+  task: Task;
+  asHandle?: boolean;
+}
+
+function TaskCard({ task, asHandle, ...props }: TaskCardProps) {
+  const cardContent = (
+    <div className="rounded-md border bg-card p-3 shadow-xs">
+      <div className="flex flex-col gap-2.5">
+        <div className="flex items-center justify-between gap-2">
+          <span className="line-clamp-1 font-medium text-sm">{task.title}</span>
+          <Badge
+            variant={task.priority === 'high' ? 'destructive' : task.priority === 'medium' ? 'primary' : 'warning'}
+            appearance="outline"
+            className="pointer-events-none h-5 rounded-sm px-1.5 text-[11px] capitalize shrink-0"
+          >
+            {task.priority}
+          </Badge>
+        </div>
+        <div className="flex items-center justify-between text-muted-foreground text-xs">
+          {task.assignee && (
+            <div className="flex items-center gap-1">
+              <Avatar className="size-4">
+                <AvatarImage src={task.assigneeAvatar} />
+                <AvatarFallback>{task.assignee.charAt(0)}</AvatarFallback>
+              </Avatar>
+              <span className="line-clamp-1">{task.assignee}</span>
+            </div>
+          )}
+          {task.dueDate && <time className="text-[10px] tabular-nums whitespace-nowrap">{task.dueDate}</time>}
+        </div>
+      </div>
+    </div>
+  );
+
+  return (
+    <KanbanItem value={task.id} {...props}>
+      {asHandle ? <KanbanItemHandle>{cardContent}</KanbanItemHandle> : cardContent}
+    </KanbanItem>
+  );
+}
+
+interface TaskColumnProps extends Omit<React.ComponentProps<typeof KanbanColumn>, 'children'> {
+  tasks: Task[];
+  isOverlay?: boolean;
+}
+
+function TaskColumn({ value, tasks, isOverlay, ...props }: TaskColumnProps) {
+  return (
+    <KanbanColumn value={value} {...props} className="rounded-md border bg-card p-2.5 shadow-xs">
+      <div className="flex items-center justify-between mb-2.5">
+        <div className="flex items-center gap-2.5">
+          <span className="font-semibold text-sm">{COLUMN_TITLES[value]}</span>
+          <Badge variant="secondary">{tasks.length}</Badge>
+        </div>
+        <KanbanColumnHandle asChild>
+          <Button variant="dim" size="sm" mode="icon">
+            <GripVertical />
+          </Button>
+        </KanbanColumnHandle>
+      </div>
+      <KanbanColumnContent value={value} className="flex flex-col gap-2.5 p-0.5">
+        {tasks.map((task) => (
+          <TaskCard key={task.id} task={task} asHandle={!isOverlay} />
+        ))}
+      </KanbanColumnContent>
+    </KanbanColumn>
+  );
+}
+
+export default function Component() {
+  const [columns, setColumns] = React.useState<Record<string, Task[]>>({
+    backlog: [
+      {
+        id: '1',
+        title: 'Add authentication',
+        priority: 'high',
+        assignee: 'John Doe',
+        assigneeAvatar: 'https://randomuser.me/api/portraits/men/1.jpg',
+        dueDate: 'Jan 10, 2025',
+      },
+      {
+        id: '2',
+        title: 'Create API endpoints',
+        priority: 'medium',
+        assignee: 'Jane Smith',
+        assigneeAvatar: 'https://randomuser.me/api/portraits/women/2.jpg',
+        dueDate: 'Jan 15, 2025',
+      },
+      {
+        id: '3',
+        title: 'Write documentation',
+        priority: 'low',
+        assignee: 'Bob Johnson',
+        assigneeAvatar: 'https://randomuser.me/api/portraits/men/3.jpg',
+        dueDate: 'Jan 20, 2025',
+      },
+    ],
+    inProgress: [
+      {
+        id: '4',
+        title: 'Design system updates',
+        priority: 'high',
+        assignee: 'Alice Brown',
+        assigneeAvatar: 'https://randomuser.me/api/portraits/women/4.jpg',
+        dueDate: 'Aug 25, 2025',
+      },
+      {
+        id: '5',
+        title: 'Implement dark mode',
+        priority: 'medium',
+        assignee: 'Charlie Wilson',
+        assigneeAvatar: 'https://randomuser.me/api/portraits/men/5.jpg',
+        dueDate: 'Aug 25, 2025',
+      },
+    ],
+    done: [
+      {
+        id: '7',
+        title: 'Setup project',
+        priority: 'high',
+        assignee: 'Eve Davis',
+        assigneeAvatar: 'https://randomuser.me/api/portraits/women/6.jpg',
+        dueDate: 'Sep 25, 2025',
+      },
+      {
+        id: '8',
+        title: 'Initial commit',
+        priority: 'low',
+        assignee: 'Frank White',
+        assigneeAvatar: 'https://randomuser.me/api/portraits/men/7.jpg',
+        dueDate: 'Sep 20, 2025',
+      },
+    ],
+  });
+
+  return (
+    <Kanban value={columns} onValueChange={setColumns} getItemValue={(item) => item.id}>
+      <KanbanBoard className="grid auto-rows-fr grid-cols-3">
+        {Object.entries(columns).map(([columnValue, tasks]) => (
+          <TaskColumn key={columnValue} value={columnValue} tasks={tasks} />
+        ))}
+      </KanbanBoard>
+      <KanbanOverlay>
+        <div className="rounded-md bg-muted/60 size-full" />
+      </KanbanOverlay>
+    </Kanban>
+  );
+}

package/src/components/kanban-column.tsx

@@ -0,0 +1,167 @@
+"use client";
+
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Badge } from "@/components/ui/badge";
+import { BeadCard } from "@/components/bead-card";
+import { EpicCard } from "@/components/epic-card";
+import { cn } from "@/lib/utils";
+import type { Bead, BeadStatus, Epic } from "@/types";
+import type { BranchStatus } from "@/lib/git";
+
+export interface KanbanColumnProps {
+  status: BeadStatus;
+  title: string;
+  beads: Bead[];
+  /** All beads for resolving epic children */
+  allBeads: Bead[];
+  selectedBeadId?: string | null;
+  ticketNumbers?: Map<string, number>;
+  branchStatuses?: Record<string, BranchStatus>;
+  onSelectBead: (bead: Bead) => void;
+  onChildClick?: (child: Bead) => void;
+  onNavigateToDependency?: (beadId: string) => void;
+  /** Project root path for fetching design docs */
+  projectPath?: string;
+}
+
+/**
+ * Get accent border class for column header based on status
+ */
+function getColumnAccentBorder(status: BeadStatus): string {
+  switch (status) {
+    case "open":
+      return "border-t-2 border-t-blue-500/60";
+    case "in_progress":
+      return "border-t-2 border-t-amber-500/60";
+    case "inreview":
+      return "border-t-2 border-t-purple-500/60";
+    case "closed":
+      return "border-t-2 border-t-green-500/60";
+    default:
+      return "border-t-2 border-t-zinc-500/60";
+  }
+}
+
+/**
+ * Get header text color based on status
+ */
+function getHeaderTextColor(status: BeadStatus): string {
+  switch (status) {
+    case "open":
+      return "text-blue-400";
+    case "in_progress":
+      return "text-amber-400";
+    case "inreview":
+      return "text-purple-400";
+    case "closed":
+      return "text-green-400";
+    default:
+      return "text-zinc-400";
+  }
+}
+
+/**
+ * Get badge color class for count badge based on status (dark theme)
+ */
+function getBadgeVariant(status: BeadStatus): string {
+  switch (status) {
+    case "open":
+      return "bg-blue-500/20 text-blue-400 border-blue-500/30 hover:bg-blue-500/20";
+    case "in_progress":
+      return "bg-amber-500/20 text-amber-400 border-amber-500/30 hover:bg-amber-500/20";
+    case "inreview":
+      return "bg-purple-500/20 text-purple-400 border-purple-500/30 hover:bg-purple-500/20";
+    case "closed":
+      return "bg-green-500/20 text-green-400 border-green-500/30 hover:bg-green-500/20";
+    default:
+      return "bg-zinc-500/20 text-zinc-400 border-zinc-500/30 hover:bg-zinc-500/20";
+  }
+}
+
+/**
+ * Type guard to check if a bead is an epic
+ */
+function isEpic(bead: Bead): bead is Epic {
+  return bead.issue_type === 'epic';
+}
+
+/**
+ * Reusable Kanban column component with header, count badge, and scrollable bead list
+ * Renders EpicCard for epics and BeadCard for standalone tasks
+ */
+export function KanbanColumn({
+  status,
+  title,
+  beads,
+  allBeads,
+  selectedBeadId,
+  ticketNumbers,
+  branchStatuses = {},
+  onSelectBead,
+  onChildClick,
+  onNavigateToDependency,
+  projectPath,
+}: KanbanColumnProps) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col h-full min-h-0 rounded-lg",
+        "bg-zinc-900/30 border border-zinc-800/50"
+      )}
+    >
+      {/* Column Header - fixed height with colored accent border */}
+      <div className={cn(
+        "flex-shrink-0 flex items-center justify-between px-4 py-3 border-b border-zinc-800/50",
+        getColumnAccentBorder(status)
+      )}>
+        <h2 className={cn("font-semibold text-sm", getHeaderTextColor(status))}>{title}</h2>
+        <Badge
+          variant="secondary"
+          className={cn("text-xs px-2 py-0.5", getBadgeVariant(status))}
+        >
+          {beads.length}
+        </Badge>
+      </div>
+
+      {/* Scrollable Bead List */}
+      <ScrollArea className="flex-1 min-h-0 p-3">
+        <div className="space-y-3">
+          {beads.map((bead) => {
+            // Render EpicCard for epics, BeadCard for standalone tasks
+            if (isEpic(bead)) {
+              return (
+                <EpicCard
+                  key={bead.id}
+                  epic={bead}
+                  allBeads={allBeads}
+                  ticketNumber={ticketNumbers?.get(bead.id)}
+                  isSelected={selectedBeadId === bead.id}
+                  onSelect={onSelectBead}
+                  onChildClick={onChildClick ?? onSelectBead}
+                  onNavigateToDependency={onNavigateToDependency}
+                  projectPath={projectPath}
+                />
+              );
+            }
+
+            return (
+              <BeadCard
+                key={bead.id}
+                bead={bead}
+                ticketNumber={ticketNumbers?.get(bead.id)}
+                isSelected={selectedBeadId === bead.id}
+                branchStatus={branchStatuses[bead.id]}
+                onSelect={onSelectBead}
+              />
+            );
+          })}
+          {beads.length === 0 && (
+            <div className="text-center py-8 text-zinc-500 text-sm">
+              No beads
+            </div>
+          )}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+}