beads-kanban-ui 0.1.0

package/src/components/scan-directory-dialog.tsx

@@ -0,0 +1,368 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Input } from "@/components/ui/input";
+import { useToast } from "@/hooks/use-toast";
+import * as api from "@/lib/api";
+import { cn } from "@/lib/utils";
+import { Folder, Check, Loader2 } from "lucide-react";
+
+interface ScannedProject {
+  name: string;
+  path: string;
+  selected: boolean;
+}
+
+interface ScanDirectoryDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onAddProjects: (projects: { name: string; path: string }[]) => Promise<void>;
+}
+
+type Step = "select" | "results" | "confirm";
+
+export function ScanDirectoryDialog({
+  open: isOpen,
+  onOpenChange,
+  onAddProjects,
+}: ScanDirectoryDialogProps) {
+  const [step, setStep] = useState<Step>("select");
+  const [selectedDirectory, setSelectedDirectory] = useState<string>("");
+  const [isScanning, setIsScanning] = useState(false);
+  const [scannedProjects, setScannedProjects] = useState<ScannedProject[]>([]);
+  const [isAdding, setIsAdding] = useState(false);
+  const [showConfirmDialog, setShowConfirmDialog] = useState(false);
+  const { toast } = useToast();
+
+  const resetState = useCallback(() => {
+    setStep("select");
+    setSelectedDirectory("");
+    setScannedProjects([]);
+    setIsScanning(false);
+    setIsAdding(false);
+    setShowConfirmDialog(false);
+  }, []);
+
+  const handleOpenChange = useCallback(
+    (open: boolean) => {
+      if (!open) {
+        resetState();
+      }
+      onOpenChange(open);
+    },
+    [onOpenChange, resetState]
+  );
+
+  const scanDirectory = useCallback(async () => {
+    if (!selectedDirectory) return;
+
+    setIsScanning(true);
+    try {
+      const { entries } = await api.fs.list(selectedDirectory);
+      const dirs = entries.filter((e) => e.isDirectory);
+
+      // Check each subdirectory for .beads folder in parallel
+      const projectResults = await Promise.all(
+        dirs.map(async (dir) => {
+          const result = await api.fs.exists(`${dir.path}/.beads`);
+          return {
+            name: dir.name,
+            path: dir.path,
+            hasBeads: result.exists,
+          };
+        })
+      );
+
+      // Filter to only directories with .beads
+      const projectsFound = projectResults
+        .filter((p) => p.hasBeads)
+        .map((p) => ({
+          name: p.name,
+          path: p.path,
+          selected: true, // All selected by default
+        }));
+
+      setScannedProjects(projectsFound);
+      setStep("results");
+
+      if (projectsFound.length === 0) {
+        toast({
+          title: "No projects found",
+          description: "No beads projects found in subdirectories.",
+          variant: "destructive",
+        });
+      }
+    } catch (err) {
+      console.error("Error scanning directory:", err);
+      toast({
+        title: "Scan failed",
+        description:
+          err instanceof Error ? err.message : "Failed to scan directory.",
+        variant: "destructive",
+      });
+    } finally {
+      setIsScanning(false);
+    }
+  }, [selectedDirectory, toast]);
+
+  const toggleProject = useCallback((path: string) => {
+    setScannedProjects((prev) =>
+      prev.map((p) => (p.path === path ? { ...p, selected: !p.selected } : p))
+    );
+  }, []);
+
+  const toggleAll = useCallback(() => {
+    const allSelected = scannedProjects.every((p) => p.selected);
+    setScannedProjects((prev) =>
+      prev.map((p) => ({ ...p, selected: !allSelected }))
+    );
+  }, [scannedProjects]);
+
+  const selectedCount = scannedProjects.filter((p) => p.selected).length;
+
+  const handleAddProjects = useCallback(async () => {
+    const projectsToAdd = scannedProjects
+      .filter((p) => p.selected)
+      .map(({ name, path }) => ({ name, path }));
+
+    if (projectsToAdd.length === 0) return;
+
+    setIsAdding(true);
+    setShowConfirmDialog(false);
+
+    try {
+      await onAddProjects(projectsToAdd);
+      toast({
+        title: "Projects added",
+        description: `Successfully added ${projectsToAdd.length} project${projectsToAdd.length > 1 ? "s" : ""}.`,
+      });
+      handleOpenChange(false);
+    } catch (err) {
+      console.error("Error adding projects:", err);
+      toast({
+        title: "Error",
+        description: "Failed to add some projects. Please try again.",
+        variant: "destructive",
+      });
+    } finally {
+      setIsAdding(false);
+    }
+  }, [scannedProjects, onAddProjects, toast, handleOpenChange]);
+
+  return (
+    <>
+      <Dialog open={isOpen} onOpenChange={handleOpenChange}>
+        <DialogContent className="sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle>Scan for Projects</DialogTitle>
+            <DialogDescription>
+              {step === "select"
+                ? "Select a parent directory to scan for beads projects."
+                : `Found ${scannedProjects.length} project${scannedProjects.length !== 1 ? "s" : ""} in subdirectories.`}
+            </DialogDescription>
+          </DialogHeader>
+
+          {step === "select" && (
+            <div className="flex flex-col gap-4 py-4">
+              <div className="space-y-2">
+                <label htmlFor="scan-path" className="text-sm font-medium text-zinc-300">
+                  Parent Directory
+                </label>
+                <div className="relative">
+                  <Folder className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-zinc-500" aria-hidden="true" />
+                  <Input
+                    id="scan-path"
+                    value={selectedDirectory}
+                    onChange={(e) => setSelectedDirectory(e.target.value)}
+                    placeholder="/path/to/parent/directory"
+                    className="pl-10"
+                    autoFocus
+                  />
+                </div>
+                <p className="text-xs text-zinc-500">
+                  Enter a directory path to scan its subdirectories for beads projects.
+                </p>
+              </div>
+
+              <DialogFooter>
+                <Button
+                  onClick={scanDirectory}
+                  disabled={!selectedDirectory.trim() || isScanning}
+                >
+                  {isScanning ? (
+                    <>
+                      <Loader2 className="size-4 animate-spin" aria-hidden="true" />
+                      Scanning...
+                    </>
+                  ) : (
+                    "Scan for Projects"
+                  )}
+                </Button>
+              </DialogFooter>
+            </div>
+          )}
+
+          {step === "results" && (
+            <div className="flex flex-col gap-4 py-4">
+              {scannedProjects.length === 0 ? (
+                <div className="rounded-md border border-zinc-700 bg-zinc-800/50 px-4 py-8 text-center">
+                  <p className="text-zinc-400">
+                    No beads projects found in subdirectories.
+                  </p>
+                  <p className="mt-1 text-sm text-zinc-500">
+                    Make sure subdirectories have a .beads folder.
+                  </p>
+                </div>
+              ) : (
+                <>
+                  <div className="flex items-center justify-between">
+                    <Badge variant="info" size="sm">
+                      {selectedCount} of {scannedProjects.length} selected
+                    </Badge>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={toggleAll}
+                      className="text-xs"
+                    >
+                      {scannedProjects.every((p) => p.selected)
+                        ? "Deselect All"
+                        : "Select All"}
+                    </Button>
+                  </div>
+
+                  <ScrollArea className="h-[250px] rounded-md border border-zinc-700 bg-zinc-800/50">
+                    <div className="p-2" role="listbox" aria-label="Found projects">
+                      {scannedProjects.map((project) => (
+                        <button
+                          key={project.path}
+                          type="button"
+                          role="option"
+                          aria-selected={project.selected}
+                          onClick={() => toggleProject(project.path)}
+                          className={cn(
+                            "flex w-full items-center gap-3 rounded-md px-3 py-2 text-left text-sm transition-colors",
+                            project.selected
+                              ? "bg-zinc-700 text-zinc-100"
+                              : "text-zinc-400 hover:bg-zinc-700/50"
+                          )}
+                        >
+                          <div
+                            className={cn(
+                              "flex size-5 shrink-0 items-center justify-center rounded border",
+                              project.selected
+                                ? "border-purple-500 bg-purple-500"
+                                : "border-zinc-600 bg-transparent"
+                            )}
+                          >
+                            {project.selected && (
+                              <Check className="size-3 text-white" />
+                            )}
+                          </div>
+                          <Folder
+                            className={cn(
+                              "size-4 shrink-0",
+                              project.selected
+                                ? "text-purple-400"
+                                : "text-zinc-500"
+                            )}
+                          />
+                          <div className="min-w-0 flex-1">
+                            <p className="truncate font-medium">
+                              {project.name}
+                            </p>
+                            <p className="truncate text-xs text-zinc-500">
+                              {project.path}
+                            </p>
+                          </div>
+                        </button>
+                      ))}
+                    </div>
+                  </ScrollArea>
+                </>
+              )}
+
+              <DialogFooter className="gap-2 sm:gap-2">
+                <Button variant="outline" onClick={() => setStep("select")}>
+                  Back
+                </Button>
+                <Button
+                  onClick={() => setShowConfirmDialog(true)}
+                  disabled={selectedCount === 0}
+                >
+                  Add {selectedCount} Project{selectedCount !== 1 ? "s" : ""}
+                </Button>
+              </DialogFooter>
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+
+      <AlertDialog open={showConfirmDialog} onOpenChange={setShowConfirmDialog}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              Add {selectedCount} Project{selectedCount !== 1 ? "s" : ""}?
+            </AlertDialogTitle>
+            <AlertDialogDescription asChild>
+              <div>
+                <p className="mb-3">
+                  The following projects will be added to your dashboard:
+                </p>
+                <ScrollArea className="max-h-[150px] rounded-md border border-zinc-700 bg-zinc-800/50">
+                  <ul className="p-2 text-sm text-zinc-300">
+                    {scannedProjects
+                      .filter((p) => p.selected)
+                      .map((project) => (
+                        <li
+                          key={project.path}
+                          className="flex items-center gap-2 py-1"
+                        >
+                          <Folder className="size-3 shrink-0 text-purple-400" />
+                          <span className="truncate">{project.name}</span>
+                        </li>
+                      ))}
+                  </ul>
+                </ScrollArea>
+              </div>
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isAdding}>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={handleAddProjects} disabled={isAdding}>
+              {isAdding ? (
+                <>
+                  <Loader2 className="size-4 animate-spin" />
+                  Adding...
+                </>
+              ) : (
+                "Add All"
+              )}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}

package/src/components/status-donut.tsx

@@ -0,0 +1,197 @@
+"use client";
+
+import { useMemo, useState } from "react";
+
+interface BeadCounts {
+  open: number;
+  in_progress: number;
+  inreview: number;
+  closed: number;
+}
+
+interface StatusDonutProps {
+  beadCounts: BeadCounts;
+  size?: number;
+  className?: string;
+}
+
+// Status colors matching the kanban board
+const STATUS_COLORS = {
+  open: "#3b82f6",        // blue-500
+  in_progress: "#f59e0b", // amber-500
+  inreview: "#a855f7",    // purple-500
+  closed: "#22c55e",      // green-500
+};
+
+// Custom tooltip showing all statuses
+function StatusTooltip({ beadCounts, total }: { beadCounts: BeadCounts; total: number }) {
+  return (
+    <div className="rounded-lg border border-zinc-700 bg-zinc-900 px-3 py-2 shadow-lg">
+      <div className="mb-1.5 text-xs font-medium text-zinc-300">
+        {total} task{total !== 1 ? "s" : ""}
+      </div>
+      <div className="space-y-1">
+        {beadCounts.open > 0 && (
+          <div className="flex items-center gap-2 text-xs">
+            <div className="h-2 w-2 rounded-sm" style={{ backgroundColor: STATUS_COLORS.open }} />
+            <span className="text-zinc-400">Open</span>
+            <span className="ml-auto font-mono text-zinc-100">{beadCounts.open}</span>
+          </div>
+        )}
+        {beadCounts.in_progress > 0 && (
+          <div className="flex items-center gap-2 text-xs">
+            <div className="h-2 w-2 rounded-sm" style={{ backgroundColor: STATUS_COLORS.in_progress }} />
+            <span className="text-zinc-400">In Progress</span>
+            <span className="ml-auto font-mono text-zinc-100">{beadCounts.in_progress}</span>
+          </div>
+        )}
+        {beadCounts.inreview > 0 && (
+          <div className="flex items-center gap-2 text-xs">
+            <div className="h-2 w-2 rounded-sm" style={{ backgroundColor: STATUS_COLORS.inreview }} />
+            <span className="text-zinc-400">In Review</span>
+            <span className="ml-auto font-mono text-zinc-100">{beadCounts.inreview}</span>
+          </div>
+        )}
+        {beadCounts.closed > 0 && (
+          <div className="flex items-center gap-2 text-xs">
+            <div className="h-2 w-2 rounded-sm" style={{ backgroundColor: STATUS_COLORS.closed }} />
+            <span className="text-zinc-400">Closed</span>
+            <span className="ml-auto font-mono text-zinc-100">{beadCounts.closed}</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function StatusDonut({ beadCounts, size = 40, className }: StatusDonutProps) {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const chartData = useMemo(() => {
+    return [
+      { status: "open", count: beadCounts.open, fill: STATUS_COLORS.open },
+      { status: "in_progress", count: beadCounts.in_progress, fill: STATUS_COLORS.in_progress },
+      { status: "inreview", count: beadCounts.inreview, fill: STATUS_COLORS.inreview },
+      { status: "closed", count: beadCounts.closed, fill: STATUS_COLORS.closed },
+    ].filter((item) => item.count > 0);
+  }, [beadCounts]);
+
+  const total = useMemo(() => {
+    return beadCounts.open + beadCounts.in_progress + beadCounts.inreview + beadCounts.closed;
+  }, [beadCounts]);
+
+  // If no tasks, show empty state
+  if (total === 0) {
+    return (
+      <div
+        className={className}
+        style={{ width: size, height: size }}
+        aria-label="No tasks"
+      >
+        <div
+          className="rounded-full border-2 border-dashed border-zinc-700 w-full h-full"
+          title="No tasks"
+        />
+      </div>
+    );
+  }
+
+  const innerRadius = size * 0.32;
+  const outerRadius = size * 0.48;
+  // Only add padding when there are multiple segments
+  const paddingAngle = chartData.length > 1 ? 3 : 0;
+
+  return (
+    <div
+      className={`relative ${className || ""}`}
+      style={{ width: size, height: size }}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+        <g transform={`translate(${size / 2}, ${size / 2})`}>
+          {/* Render pie segments */}
+          {chartData.map((entry, index) => {
+            // Calculate angles for each segment
+            const startAngle = chartData
+              .slice(0, index)
+              .reduce((acc, d) => acc + (d.count / total) * 360, 0);
+            const segmentAngle = (entry.count / total) * 360;
+            const endAngle = startAngle + segmentAngle;
+
+            // Check if this is a full circle (single segment covering 100%)
+            const isFullCircle = chartData.length === 1;
+
+            if (isFullCircle) {
+              // For full circle, use two semicircular arcs
+              // This avoids the issue where start and end points are the same
+              return (
+                <g key={entry.status}>
+                  {/* First semicircle (top half) */}
+                  <path
+                    d={`M 0 ${-outerRadius} A ${outerRadius} ${outerRadius} 0 0 1 0 ${outerRadius} L 0 ${innerRadius} A ${innerRadius} ${innerRadius} 0 0 0 0 ${-innerRadius} Z`}
+                    fill={entry.fill}
+                  />
+                  {/* Second semicircle (bottom half) */}
+                  <path
+                    d={`M 0 ${outerRadius} A ${outerRadius} ${outerRadius} 0 0 1 0 ${-outerRadius} L 0 ${-innerRadius} A ${innerRadius} ${innerRadius} 0 0 0 0 ${innerRadius} Z`}
+                    fill={entry.fill}
+                  />
+                </g>
+              );
+            }
+
+            // Add small padding between segments (only if multiple segments)
+            const adjustedStart = startAngle + paddingAngle / 2;
+            const adjustedEnd = endAngle - paddingAngle / 2;
+
+            // Convert to radians (SVG uses radians, start from top)
+            const startRad = ((adjustedStart - 90) * Math.PI) / 180;
+            const endRad = ((adjustedEnd - 90) * Math.PI) / 180;
+
+            // Calculate arc path
+            const x1 = Math.cos(startRad) * outerRadius;
+            const y1 = Math.sin(startRad) * outerRadius;
+            const x2 = Math.cos(endRad) * outerRadius;
+            const y2 = Math.sin(endRad) * outerRadius;
+            const x3 = Math.cos(endRad) * innerRadius;
+            const y3 = Math.sin(endRad) * innerRadius;
+            const x4 = Math.cos(startRad) * innerRadius;
+            const y4 = Math.sin(startRad) * innerRadius;
+
+            const largeArcFlag = adjustedEnd - adjustedStart > 180 ? 1 : 0;
+
+            const d = [
+              `M ${x1} ${y1}`,
+              `A ${outerRadius} ${outerRadius} 0 ${largeArcFlag} 1 ${x2} ${y2}`,
+              `L ${x3} ${y3}`,
+              `A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} 0 ${x4} ${y4}`,
+              "Z",
+            ].join(" ");
+
+            return (
+              <path
+                key={entry.status}
+                d={d}
+                fill={entry.fill}
+              />
+            );
+          })}
+          {/* Invisible circle covering entire donut area for hover detection */}
+          <circle
+            r={outerRadius}
+            fill="transparent"
+            style={{ cursor: "default" }}
+          />
+        </g>
+      </svg>
+
+      {/* Tooltip - shown on hover anywhere in the donut area */}
+      {isHovered && (
+        <div className="absolute left-1/2 top-full z-50 mt-2 -translate-x-1/2 whitespace-nowrap">
+          <StatusTooltip beadCounts={beadCounts} total={total} />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/subtask-list.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import type { Bead, BeadStatus } from "@/types";
+import { Check, Circle, Clock, FileCheck } from "lucide-react";
+
+export interface SubtaskListProps {
+  /** Child tasks to display */
+  childTasks: Bead[];
+  /** Callback when clicking a child task */
+  onChildClick: (child: Bead) => void;
+  /** Maximum number of children to show when collapsed */
+  maxCollapsed?: number;
+  /** Whether the list is expanded */
+  isExpanded?: boolean;
+}
+
+/**
+ * Get status icon based on bead status
+ */
+function getStatusIcon(status: BeadStatus) {
+  switch (status) {
+    case 'closed':
+      return <Check className="h-3.5 w-3.5 text-green-400" aria-hidden="true" />;
+    case 'in_progress':
+      return <Clock className="h-3.5 w-3.5 text-blue-400" aria-hidden="true" />;
+    case 'inreview':
+      return <FileCheck className="h-3.5 w-3.5 text-purple-400" aria-hidden="true" />;
+    case 'open':
+    default:
+      return <Circle className="h-3.5 w-3.5 text-zinc-500" aria-hidden="true" />;
+  }
+}
+
+/**
+ * Get status text color
+ */
+function getStatusColor(status: BeadStatus): string {
+  switch (status) {
+    case 'closed':
+      return "text-green-400";
+    case 'in_progress':
+      return "text-blue-400";
+    case 'inreview':
+      return "text-purple-400";
+    case 'open':
+    default:
+      return "text-zinc-500";
+  }
+}
+
+/**
+ * Truncate text to max length
+ */
+function truncate(text: string, maxLength: number): string {
+  if (text.length <= maxLength) return text;
+  return text.slice(0, maxLength).trim() + "…";
+}
+
+/**
+ * Compact list of child tasks within epic card
+ */
+export function SubtaskList({
+  childTasks,
+  onChildClick,
+  maxCollapsed = 3,
+  isExpanded = false
+}: SubtaskListProps) {
+  if (childTasks.length === 0) {
+    return (
+      <div className="text-xs text-muted-foreground italic">
+        No child tasks
+      </div>
+    );
+  }
+
+  const displayChildren = isExpanded ? childTasks : childTasks.slice(0, maxCollapsed);
+  const hasMore = childTasks.length > maxCollapsed && !isExpanded;
+
+  return (
+    <div className="space-y-1">
+      {displayChildren.map((child) => (
+        <button
+          key={child.id}
+          onClick={(e) => {
+            e.stopPropagation();
+            onChildClick(child);
+          }}
+          aria-label={`Open task: ${child.title}`}
+          className={cn(
+            "w-full flex items-start gap-2 px-2 py-1.5 rounded-md",
+            "hover:bg-zinc-800 transition-colors text-left",
+            "group"
+          )}
+        >
+          <div className="flex-shrink-0 mt-0.5">
+            {getStatusIcon(child.status)}
+          </div>
+          <div className="flex-1 min-w-0">
+            <p className={cn(
+              "text-xs font-medium group-hover:underline",
+              child.status === 'closed' && "line-through text-zinc-500",
+              child.status !== 'closed' && "text-zinc-200"
+            )}>
+              {truncate(child.title, 50)}
+            </p>
+            {child.description && (
+              <p className="text-[10px] text-zinc-500 mt-0.5">
+                {truncate(child.description, 60)}
+              </p>
+            )}
+          </div>
+          <div className={cn(
+            "flex-shrink-0 text-[9px] font-medium uppercase tracking-wide",
+            getStatusColor(child.status)
+          )}>
+            {child.status.replace('_', ' ')}
+          </div>
+        </button>
+      ))}
+      {hasMore && (
+        <p className="text-[10px] text-muted-foreground text-center py-1">
+          +{childTasks.length - maxCollapsed} more
+        </p>
+      )}
+    </div>
+  );
+}