beads-kanban-ui 0.1.0 → 0.1.1

package/src/components/activity-timeline.tsx

@@ -1,172 +0,0 @@
-"use client";
-
-import { cn } from "@/lib/utils";
-import type { Bead, Comment } from "@/types";
-
-export interface ActivityTimelineProps {
-  bead: Bead;
-  comments: Comment[];
-  childBeads?: Bead[];
-}
-
-/**
- * Timeline event types
- */
-type TimelineEventType = "created" | "status_change" | "comment" | "branch" | "child_created" | "child_status_change";
-
-interface TimelineEvent {
-  id: string;
-  type: TimelineEventType;
-  description: string;
-  timestamp: Date;
-}
-
-/**
- * Format a date for display (e.g., "Jan 12, 10:57 AM")
- */
-function formatTimestamp(date: Date): string {
-  return date.toLocaleDateString("en-US", {
-    month: "short",
-    day: "numeric",
-  }) + ", " + date.toLocaleTimeString("en-US", {
-    hour: "numeric",
-    minute: "2-digit",
-    hour12: true,
-  });
-}
-
-/**
- * Truncate a string to maxLength characters with ellipsis
- */
-function truncateTitle(title: string, maxLength: number = 30): string {
-  if (title.length <= maxLength) return title;
-  return title.slice(0, maxLength - 1) + "\u2026";
-}
-
-/**
- * Build timeline events from bead and comments
- */
-function buildTimelineEvents(bead: Bead, comments: Comment[], childBeads: Bead[] = []): TimelineEvent[] {
-  const events: TimelineEvent[] = [];
-
-  // Created event
-  const createdAt = new Date(bead.created_at);
-  events.push({
-    id: `created-${bead.id}`,
-    type: "created",
-    description: "Created",
-    timestamp: createdAt,
-  });
-
-  // Status change event (if updated_at differs from created_at)
-  const updatedAt = new Date(bead.updated_at);
-  if (updatedAt.getTime() !== createdAt.getTime()) {
-    events.push({
-      id: `status-${bead.id}`,
-      type: "status_change",
-      description: `Status \u2192 ${bead.status}`,
-      timestamp: updatedAt,
-    });
-  }
-
-  // Comment events
-  comments.forEach((comment) => {
-    events.push({
-      id: `comment-${comment.id}`,
-      type: "comment",
-      description: "Comment added",
-      timestamp: new Date(comment.created_at),
-    });
-  });
-
-  // Child task events
-  childBeads.forEach((child) => {
-    const childCreatedAt = new Date(child.created_at);
-    const childUpdatedAt = new Date(child.updated_at);
-    const truncatedTitle = truncateTitle(child.title);
-
-    // Child created event
-    events.push({
-      id: `child-created-${child.id}`,
-      type: "child_created",
-      description: `Task created: ${truncatedTitle}`,
-      timestamp: childCreatedAt,
-    });
-
-    // Child status change event (if updated_at differs from created_at)
-    if (childUpdatedAt.getTime() !== childCreatedAt.getTime()) {
-      events.push({
-        id: `child-status-${child.id}`,
-        type: "child_status_change",
-        description: `Task \u2192 ${child.status}: ${truncatedTitle}`,
-        timestamp: childUpdatedAt,
-      });
-    }
-  });
-
-  // Sort chronologically (oldest first)
-  events.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
-
-  return events;
-}
-
-/**
- * Activity Timeline component
- * Displays a vertical timeline of bead activity events
- */
-export function ActivityTimeline({ bead, comments, childBeads = [] }: ActivityTimelineProps) {
-  const events = buildTimelineEvents(bead, comments, childBeads);
-
-  if (events.length === 0) {
-    return (
-      <div className="mt-6 text-sm text-muted-foreground">
-        No activity recorded
-      </div>
-    );
-  }
-
-  return (
-    <div className="mt-6 space-y-1">
-      <h4 className="text-sm font-semibold text-foreground mb-3">
-        Activity Timeline
-      </h4>
-      <div className="relative">
-        {/* Vertical line */}
-        <div className="absolute left-[5px] top-2 bottom-2 w-px bg-zinc-700" />
-
-        {/* Events */}
-        <div className="space-y-3">
-          {events.map((event, index) => (
-            <div
-              key={event.id}
-              className="relative flex items-start gap-3 pl-5"
-            >
-              {/* Dot */}
-              <div
-                className={cn(
-                  "absolute left-0 top-1.5 h-[11px] w-[11px] rounded-full border-2 bg-background",
-                  event.type === "created" && "border-green-500",
-                  event.type === "status_change" && "border-blue-500",
-                  event.type === "comment" && "border-zinc-400",
-                  event.type === "branch" && "border-purple-500",
-                  event.type === "child_created" && "border-cyan-500",
-                  event.type === "child_status_change" && "border-cyan-400"
-                )}
-              />
-
-              {/* Content */}
-              <div className="flex flex-1 items-center justify-between min-w-0">
-                <span className="text-xs text-zinc-400 truncate">
-                  {event.description}
-                </span>
-                <span className="text-[10px] text-zinc-600 whitespace-nowrap ml-2">
-                  {formatTimestamp(event.timestamp)}
-                </span>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/add-project-dialog.tsx

@@ -1,219 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { useToast } from "@/hooks/use-toast";
-import * as api from "@/lib/api";
-import type { CreateProjectInput } from "@/lib/db";
-import { Folder, Loader2 } from "lucide-react";
-
-interface AddProjectDialogProps {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  onAddProject: (input: CreateProjectInput) => Promise<void>;
-}
-
-export function AddProjectDialog({
-  open: isOpen,
-  onOpenChange,
-  onAddProject,
-}: AddProjectDialogProps) {
-  const [projectPath, setProjectPath] = useState<string>("");
-  const [projectName, setProjectName] = useState<string>("");
-  const [isValidating, setIsValidating] = useState(false);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [pathError, setPathError] = useState<string | null>(null);
-  const [showNameInput, setShowNameInput] = useState(false);
-  const { toast } = useToast();
-
-  const resetState = () => {
-    setProjectPath("");
-    setProjectName("");
-    setPathError(null);
-    setShowNameInput(false);
-    setIsValidating(false);
-  };
-
-  const handleOpenChange = (open: boolean) => {
-    if (!open) {
-      resetState();
-    }
-    onOpenChange(open);
-  };
-
-  const validateAndProceed = async () => {
-    if (!projectPath.trim()) {
-      setPathError("Please enter a project path.");
-      return;
-    }
-
-    setIsValidating(true);
-    setPathError(null);
-
-    try {
-      const cleanPath = projectPath.trim().replace(/\/+$/, "");
-      const result = await api.fs.exists(`${cleanPath}/.beads`);
-
-      if (!result.exists) {
-        setPathError("No .beads folder found. Run `bd init` in your project first.");
-        toast({
-          title: "No .beads folder found",
-          description: "Run `bd init` in your project first.",
-          variant: "destructive",
-        });
-        return;
-      }
-
-      // Extract folder name as default project name
-      const pathParts = cleanPath.split(/[/\\]/);
-      const defaultName = pathParts[pathParts.length - 1] || "Untitled Project";
-
-      setProjectPath(cleanPath);
-      setProjectName(defaultName);
-      setShowNameInput(true);
-    } catch (err) {
-      console.error("Error validating path:", err);
-      setPathError("Could not access the specified path. Please check it exists.");
-    } finally {
-      setIsValidating(false);
-    }
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-
-    if (!projectPath || !projectName.trim()) {
-      return;
-    }
-
-    setIsSubmitting(true);
-
-    try {
-      await onAddProject({
-        name: projectName.trim(),
-        path: projectPath,
-      });
-
-      toast({
-        title: "Project added",
-        description: `"${projectName}" has been added successfully.`,
-      });
-
-      resetState();
-      onOpenChange(false);
-    } catch (err) {
-      console.error("Error adding project:", err);
-      toast({
-        title: "Error",
-        description: "Failed to add project. Please try again.",
-        variant: "destructive",
-      });
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  return (
-    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
-      <DialogContent className="sm:max-w-md">
-        <DialogHeader>
-          <DialogTitle>Add Project</DialogTitle>
-          <DialogDescription>
-            {showNameInput
-              ? "Give your project a name."
-              : "Enter the path to a folder containing a beads project."}
-          </DialogDescription>
-        </DialogHeader>
-
-        {!showNameInput ? (
-          <div className="flex flex-col gap-4 py-4">
-            <div className="space-y-2">
-              <label htmlFor="path" className="text-sm font-medium text-zinc-300">
-                Project Path
-              </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="path"
-                  value={projectPath}
-                  onChange={(e) => {
-                    setProjectPath(e.target.value);
-                    setPathError(null);
-                  }}
-                  placeholder="/path/to/your/project"
-                  className="pl-10"
-                  autoFocus
-                />
-              </div>
-              {pathError && (
-                <p className="text-sm text-red-400">{pathError}</p>
-              )}
-              <p className="text-xs text-zinc-500">
-                Enter the full path to your project folder (must contain a .beads folder).
-              </p>
-            </div>
-            <DialogFooter>
-              <Button
-                onClick={validateAndProceed}
-                disabled={!projectPath.trim() || isValidating}
-              >
-                {isValidating ? (
-                  <>
-                    <Loader2 className="size-4 animate-spin" aria-hidden="true" />
-                    Validating...
-                  </>
-                ) : (
-                  "Continue"
-                )}
-              </Button>
-            </DialogFooter>
-          </div>
-        ) : (
-          <form onSubmit={handleSubmit}>
-            <div className="space-y-4 py-4">
-              <div className="space-y-2">
-                <label htmlFor="name" className="text-sm font-medium text-zinc-300">
-                  Project Name
-                </label>
-                <Input
-                  id="name"
-                  value={projectName}
-                  onChange={(e) => setProjectName(e.target.value)}
-                  placeholder="My Project"
-                  autoFocus
-                />
-              </div>
-              <div className="space-y-2">
-                <label className="text-sm font-medium text-zinc-300">Location</label>
-                <p className="truncate rounded-md bg-zinc-800 px-3 py-2 text-sm text-zinc-400">
-                  {projectPath}
-                </p>
-              </div>
-            </div>
-            <DialogFooter className="gap-2">
-              <Button
-                type="button"
-                variant="outline"
-                onClick={() => setShowNameInput(false)}
-              >
-                Back
-              </Button>
-              <Button type="submit" disabled={isSubmitting || !projectName.trim()}>
-                {isSubmitting ? "Adding..." : "Add Project"}
-              </Button>
-            </DialogFooter>
-          </form>
-        )}
-      </DialogContent>
-    </Dialog>
-  );
-}

package/src/components/bead-card.tsx

@@ -1,196 +0,0 @@
-"use client";
-
-import { Badge } from "@/components/ui/badge";
-import { cn } from "@/lib/utils";
-import type { Bead } from "@/types";
-import type { BranchStatus } from "@/lib/git";
-import { GitBranch, MessageSquare } from "lucide-react";
-
-export interface BeadCardProps {
-  bead: Bead;
-  ticketNumber?: number;
-  branchStatus?: BranchStatus;
-  isSelected?: boolean;
-  onSelect: (bead: Bead) => void;
-}
-
-/**
- * Get branch badge color based on ahead/behind status
- * Dark theme variant with semi-transparent backgrounds
- * Green: ahead only (has new commits, up to date with main)
- * Yellow: behind only (main has new commits)
- * Red: diverged (both ahead and behind)
- * Default green: up to date (ahead=0, behind=0)
- */
-function getBranchBadgeColor(status: BranchStatus): string {
-  const { ahead, behind } = status;
-
-  if (ahead > 0 && behind > 0) {
-    // Diverged - red
-    return "bg-red-500/10 text-red-400 border-red-600/30";
-  } else if (behind > 0) {
-    // Behind main - yellow
-    return "bg-yellow-500/10 text-yellow-400 border-yellow-600/30";
-  } else {
-    // Ahead only or up to date - green
-    return "bg-green-500/10 text-green-400 border-green-600/30";
-  }
-}
-
-/**
- * Format branch status display
- * Returns: "bd-ID" if up to date, "bd-ID +ahead -behind" otherwise
- */
-function formatBranchStatus(beadId: string, status: BranchStatus): string {
-  const formattedId = `bd-${formatBeadId(beadId)}`;
-  const { ahead, behind } = status;
-
-  if (ahead === 0 && behind === 0) {
-    return formattedId;
-  }
-
-  const parts = [formattedId];
-  if (ahead > 0) {
-    parts.push(`+${ahead}`);
-  }
-  if (behind > 0) {
-    parts.push(`-${behind}`);
-  }
-
-  return parts.join(" ");
-}
-
-/**
- * Detect if bead is blocked by checking for unresolved dependencies
- * A task is blocked only if it has unresolved dependencies
- * Closed tasks are never blocked (they've completed)
- * Note: The deps field only contains UNRESOLVED dependencies (backend filters out closed deps)
- */
-function isBlocked(bead: Bead): boolean {
-  // Closed tasks are never blocked (they've completed)
-  if (bead.status === 'closed') return false;
-  // A task is blocked if it has unresolved dependencies
-  return (bead.deps ?? []).length > 0;
-}
-
-/**
- * Truncate text to a maximum length with ellipsis
- */
-function truncate(text: string, maxLength: number): string {
-  if (text.length <= maxLength) return text;
-  return text.slice(0, maxLength).trim() + "…";
-}
-
-/**
- * Format bead ID for display (short form)
- */
-function formatBeadId(id: string): string {
-  // If ID is like "project-abc123", show "BD-abc123"
-  // If already has BD prefix, show as-is but truncate if needed
-  if (id.startsWith("BD-") || id.startsWith("bd-")) {
-    return id.length > 10 ? `BD-${id.slice(-6)}` : id.toUpperCase();
-  }
-  // Extract last part after dash
-  const parts = id.split("-");
-  const shortId = parts[parts.length - 1];
-  return `BD-${shortId.slice(0, 6)}`;
-}
-
-export function BeadCard({ bead, ticketNumber, branchStatus, isSelected = false, onSelect }: BeadCardProps) {
-  const blocked = isBlocked(bead);
-  const commentCount = (bead.comments ?? []).length;
-  const branchExists = branchStatus?.exists ?? false;
-
-  return (
-    <div
-      data-bead-id={bead.id}
-      role="button"
-      tabIndex={0}
-      aria-label={`Select bead: ${bead.title}`}
-      className={cn(
-        "rounded-lg cursor-pointer p-4",
-        "bg-zinc-900/70 backdrop-blur-md",
-        "border border-zinc-800/60",
-        "shadow-sm shadow-black/20",
-        "transition-[transform,box-shadow,border-color] duration-200",
-        "hover:-translate-y-0.5 hover:shadow-lg hover:shadow-black/30",
-        "hover:border-zinc-700",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2 focus-visible:ring-offset-[#0a0a0a]",
-        blocked ? "border-l-4 border-l-red-500" : "border-l-4 border-l-transparent",
-        isSelected && "ring-2 ring-zinc-400 ring-offset-2 ring-offset-[#0a0a0a]"
-      )}
-      onClick={() => onSelect(bead)}
-      onKeyDown={(e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-          e.preventDefault();
-          onSelect(bead);
-        }
-      }}
-    >
-      <div className="space-y-3">
-        {/* Header: Ticket # + ID + Priority + Blocked badge */}
-        <div className="flex items-center justify-between">
-          <span className="text-xs font-mono text-zinc-500">
-            {ticketNumber !== undefined && (
-              <span className="font-semibold text-zinc-100">#{ticketNumber}</span>
-            )}
-            {ticketNumber !== undefined && " "}
-            {formatBeadId(bead.id)}
-          </span>
-          <div className="flex items-center gap-1.5">
-            {blocked && (
-              <Badge
-                className="text-[10px] px-1.5 py-0 bg-red-500/20 text-red-400 border border-red-500/30"
-              >
-                BLOCKED
-              </Badge>
-            )}
-            <Badge
-              className="text-[10px] px-1.5 py-0 bg-cyan-500/20 text-cyan-400 border border-cyan-500/30"
-            >
-              Task
-            </Badge>
-          </div>
-        </div>
-
-        {/* Title */}
-        <h3 className="font-semibold text-sm leading-tight text-zinc-100">
-          {truncate(bead.title, 60)}
-        </h3>
-
-        {/* Description (truncated, muted) */}
-        {bead.description && (
-          <p className="text-xs text-zinc-400 leading-relaxed">
-            {truncate(bead.description, 80)}
-          </p>
-        )}
-
-        {/* Footer: comment count */}
-        {commentCount > 0 && (
-          <div className="flex items-center pt-1">
-            <span className="flex items-center gap-1 text-[10px] text-zinc-500">
-              <MessageSquare className="h-3 w-3" aria-hidden="true" />
-              {commentCount} {commentCount === 1 ? "comment" : "comments"}
-            </span>
-          </div>
-        )}
-
-        {/* Branch badge with ahead/behind status */}
-        {branchExists && branchStatus && (
-          <div className="pt-1">
-            <Badge
-              variant="outline"
-              className={cn(
-                "text-[10px] px-2 py-0.5 font-mono",
-                getBranchBadgeColor(branchStatus)
-              )}
-            >
-              <GitBranch className="h-3 w-3 mr-1" aria-hidden="true" />
-              {formatBranchStatus(bead.id, branchStatus)}
-            </Badge>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}