beads-kanban-ui 0.1.0

package/src/components/bead-detail.tsx

@@ -0,0 +1,306 @@
+"use client";
+
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+} from "@/components/ui/sheet";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import type { Bead, BeadStatus } from "@/types";
+import { ArrowLeft, GitBranch, Calendar } from "lucide-react";
+import { DesignDocViewer } from "@/components/design-doc-viewer";
+import { SubtaskList } from "@/components/subtask-list";
+import { useState, useEffect, useCallback, useMemo } from "react";
+
+export interface BeadDetailProps {
+  bead: Bead;
+  ticketNumber?: number;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  children?: React.ReactNode;
+  /** Project root path (absolute) */
+  projectPath?: string;
+  /** All beads for resolving child task IDs */
+  allBeads?: Bead[];
+  /** Callback when clicking a child task */
+  onChildClick?: (child: Bead) => void;
+}
+
+/**
+ * Get status badge color classes based on status
+ */
+function getStatusColor(status: BeadStatus): string {
+  switch (status) {
+    case "open":
+      return "bg-blue-500/20 text-blue-400 border-blue-500/30";
+    case "in_progress":
+      return "bg-amber-500/20 text-amber-400 border-amber-500/30";
+    case "inreview":
+      return "bg-purple-500/20 text-purple-400 border-purple-500/30";
+    case "closed":
+      return "bg-green-500/20 text-green-400 border-green-500/30";
+    default:
+      return "bg-zinc-500/20 text-zinc-400 border-zinc-500/30";
+  }
+}
+
+/**
+ * Get priority badge color classes based on priority level
+ */
+function getPriorityColor(priority: number): string {
+  switch (priority) {
+    case 0:
+      return "bg-red-500/20 text-red-400 border-red-500/30";
+    case 1:
+      return "bg-orange-500/20 text-orange-400 border-orange-500/30";
+    case 2:
+      return "bg-zinc-500/20 text-zinc-400 border-zinc-500/30";
+    default:
+      return "bg-zinc-600/20 text-zinc-500 border-zinc-600/30";
+  }
+}
+
+/**
+ * Format status for display (e.g., "in_progress" -> "In Progress")
+ */
+function formatStatus(status: BeadStatus): string {
+  switch (status) {
+    case "open":
+      return "Open";
+    case "in_progress":
+      return "In Progress";
+    case "inreview":
+      return "In Review";
+    case "closed":
+      return "Closed";
+    default:
+      return status;
+  }
+}
+
+/**
+ * Format bead ID for display (uppercase BD prefix)
+ */
+function formatBeadId(id: string): string {
+  if (id.startsWith("BD-") || id.startsWith("bd-")) {
+    return id.toUpperCase();
+  }
+  const parts = id.split("-");
+  const shortId = parts[parts.length - 1];
+  return `BD-${shortId.slice(0, 8).toUpperCase()}`;
+}
+
+/**
+ * Format date for display
+ */
+function formatDate(dateString: string): string {
+  try {
+    const date = new Date(dateString);
+    return date.toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: date.getFullYear() !== new Date().getFullYear() ? "numeric" : undefined,
+    });
+  } catch {
+    return dateString;
+  }
+}
+
+/**
+ * Bead detail sheet component - slides in from the right
+ * Displays full bead information with metadata grid and description
+ *
+ * Note: When DesignDocViewer goes fullscreen, we hide the Sheet via CSS and
+ * override Radix's scroll lock to allow the MorphingDialog to function properly.
+ * This avoids the conflict between Radix Dialog and MorphingDialog scroll locks.
+ */
+export function BeadDetail({
+  bead,
+  ticketNumber,
+  open,
+  onOpenChange,
+  children,
+  projectPath,
+  allBeads,
+  onChildClick,
+}: BeadDetailProps) {
+  const branchName = `bd-${formatBeadId(bead.id)}`;
+  const [isDesignDocFullScreen, setIsDesignDocFullScreen] = useState(false);
+  const hasDesignDoc = !!bead.design_doc;
+
+  // Check if this is an epic with children
+  const isEpic = bead.children && bead.children.length > 0;
+
+  // Resolve children from IDs
+  const childTasks = useMemo(() => {
+    if (!isEpic || !allBeads) return [];
+    return (bead.children || [])
+      .map(childId => allBeads.find(b => b.id === childId))
+      .filter((b): b is Bead => b !== undefined);
+  }, [isEpic, bead.children, allBeads]);
+
+  // Handle fullscreen state changes from DesignDocViewer
+  const handleFullScreenChange = useCallback((isFullScreen: boolean) => {
+    setIsDesignDocFullScreen(isFullScreen);
+  }, []);
+
+  // Override Radix's scroll lock when MorphingDialog is fullscreen
+  // This fixes the pointer-events: none issue on body
+  useEffect(() => {
+    if (isDesignDocFullScreen) {
+      // Remove Radix's scroll lock styles that conflict with MorphingDialog
+      document.body.style.pointerEvents = '';
+      document.body.style.overflow = 'hidden'; // MorphingDialog will manage this
+    }
+  }, [isDesignDocFullScreen]);
+
+  return (
+    <>
+      <Sheet open={open} onOpenChange={onOpenChange}>
+        <SheetContent
+          side="right"
+          className={cn(
+            "w-full sm:max-w-lg md:max-w-xl overflow-y-auto bg-[#0a0a0a] border-zinc-800",
+            isDesignDocFullScreen && "invisible"
+          )}
+        >
+          {/* Header with Back button */}
+          <div className="flex items-center justify-between mb-6">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => onOpenChange(false)}
+              className="gap-1.5 -ml-2"
+            >
+              <ArrowLeft className="h-4 w-4" aria-hidden="true" />
+              Back
+            </Button>
+          </div>
+
+          <SheetHeader className="space-y-4">
+            {/* Ticket Number + Bead ID */}
+            <SheetDescription className="text-xs font-mono text-zinc-500">
+              {ticketNumber !== undefined && (
+                <span className="font-semibold text-zinc-200">#{ticketNumber}</span>
+              )}
+              {ticketNumber !== undefined && " "}
+              {formatBeadId(bead.id)}
+            </SheetDescription>
+
+            {/* Title */}
+            <SheetTitle className="text-xl font-semibold leading-tight text-zinc-100">
+              {bead.title}
+            </SheetTitle>
+          </SheetHeader>
+
+          {/* Metadata Grid */}
+          <div className="mt-6 rounded-lg border border-zinc-800 bg-zinc-900/50 p-4">
+            <div className="grid grid-cols-2 gap-4 text-sm">
+              {/* Status */}
+              <div className="space-y-1">
+                <span className="text-zinc-500 text-xs">Status</span>
+                <div>
+                  <Badge
+                    variant="outline"
+                    className={cn("font-medium", getStatusColor(bead.status))}
+                  >
+                    {formatStatus(bead.status)}
+                  </Badge>
+                </div>
+              </div>
+
+              {/* Priority */}
+              <div className="space-y-1">
+                <span className="text-zinc-500 text-xs">Priority</span>
+                <div>
+                  <Badge
+                    variant="outline"
+                    className={cn("font-medium", getPriorityColor(bead.priority))}
+                  >
+                    P{bead.priority}
+                  </Badge>
+                </div>
+              </div>
+
+              {/* Type */}
+              <div className="space-y-1">
+                <span className="text-zinc-500 text-xs">Type</span>
+                <div>
+                  <Badge variant="outline" className="font-normal capitalize text-zinc-200 border-zinc-700">
+                    {bead.issue_type}
+                  </Badge>
+                </div>
+              </div>
+
+              {/* Branch */}
+              <div className="space-y-1">
+                <span className="text-zinc-500 text-xs">Branch</span>
+                <div className="flex items-center gap-1.5">
+                  <GitBranch className="h-3.5 w-3.5 text-zinc-500" aria-hidden="true" />
+                  <span className="font-mono text-xs text-zinc-200">{branchName}</span>
+                </div>
+              </div>
+
+              {/* Created */}
+              <div className="space-y-1">
+                <span className="text-zinc-500 text-xs">Created</span>
+                <div className="flex items-center gap-1.5">
+                  <Calendar className="h-3.5 w-3.5 text-zinc-500" aria-hidden="true" />
+                  <span className="text-xs text-zinc-200">{formatDate(bead.created_at)}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Description */}
+          {bead.description && (
+            <div className="mt-6">
+              <h3 className="text-sm font-semibold mb-2 text-zinc-200">Description</h3>
+              <div className="h-px bg-zinc-800 mb-3" />
+              <div className="text-sm text-zinc-400 leading-relaxed whitespace-pre-wrap">
+                {bead.description}
+              </div>
+            </div>
+          )}
+
+          {/* Subtasks (for epics) */}
+          {isEpic && onChildClick && (
+            <div className="mt-6">
+              <h3 className="text-sm font-semibold mb-2 text-zinc-200">
+                Subtasks ({childTasks.length})
+              </h3>
+              <div className="h-px bg-zinc-800 mb-3" />
+              <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 p-3">
+                <SubtaskList
+                  childTasks={childTasks}
+                  onChildClick={onChildClick}
+                  isExpanded={true}
+                />
+              </div>
+            </div>
+          )}
+
+          {/* Design Document */}
+          {hasDesignDoc && projectPath && (
+            <div className="mt-6">
+              <h3 className="text-sm font-semibold mb-3 text-zinc-200">Design Document</h3>
+              <DesignDocViewer
+                designDocPath={bead.design_doc!}
+                epicId={formatBeadId(bead.id)}
+                projectPath={projectPath}
+                onFullScreenChange={handleFullScreenChange}
+              />
+            </div>
+          )}
+
+          {/* Children slot for comments + timeline */}
+          {children && <div className="mt-6">{children}</div>}
+        </SheetContent>
+      </Sheet>
+    </>
+  );
+}

package/src/components/color-picker.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import * as React from "react";
+import { Check } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+const PRESET_COLORS = [
+  "#ef4444", // red
+  "#f97316", // orange
+  "#eab308", // yellow
+  "#22c55e", // green
+  "#14b8a6", // teal
+  "#3b82f6", // blue
+  "#8b5cf6", // violet
+  "#ec4899", // pink
+  "#6b7280", // gray
+  "#78716c", // stone
+];
+
+interface ColorPickerProps {
+  value: string;
+  onChange: (color: string) => void;
+  className?: string;
+}
+
+export function ColorPicker({ value, onChange, className }: ColorPickerProps) {
+  const [customColor, setCustomColor] = React.useState(value);
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const handleCustomColorChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newColor = e.target.value;
+    setCustomColor(newColor);
+    // Only update if it's a valid hex color
+    if (/^#[0-9A-Fa-f]{6}$/.test(newColor)) {
+      onChange(newColor);
+    }
+  };
+
+  const handlePresetClick = (color: string) => {
+    onChange(color);
+    setCustomColor(color);
+    setIsOpen(false);
+  };
+
+  return (
+    <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className={cn("h-8 w-8 p-0 border-2", className)}
+          style={{ backgroundColor: value }}
+        >
+          <span className="sr-only">Pick a color</span>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-3" align="start">
+        <div className="space-y-3">
+          {/* Preset colors */}
+          <div className="grid grid-cols-5 gap-2">
+            {PRESET_COLORS.map((color) => (
+              <button
+                key={color}
+                className={cn(
+                  "h-7 w-7 rounded-md border-2 transition-transform hover:scale-110",
+                  value === color ? "border-zinc-900 ring-2 ring-zinc-900 ring-offset-1" : "border-transparent"
+                )}
+                style={{ backgroundColor: color }}
+                onClick={() => handlePresetClick(color)}
+                type="button"
+              >
+                {value === color && (
+                  <Check className="h-4 w-4 mx-auto text-white drop-shadow-sm" />
+                )}
+                <span className="sr-only">{color}</span>
+              </button>
+            ))}
+          </div>
+
+          {/* Custom hex input */}
+          <div className="flex items-center gap-2">
+            <div
+              className="h-7 w-7 rounded-md border"
+              style={{ backgroundColor: customColor }}
+            />
+            <Input
+              value={customColor}
+              onChange={handleCustomColorChange}
+              placeholder="#000000"
+              className="h-8 font-mono text-sm"
+              maxLength={7}
+            />
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/comment-input.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import * as React from "react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { addComment } from "@/lib/cli";
+import { toast } from "@/hooks/use-toast";
+import { Loader2, CornerDownLeft } from "lucide-react";
+
+export interface CommentInputProps {
+  /** The ID of the bead to add comments to */
+  beadId: string;
+  /** Optional project path for CLI command execution */
+  projectPath?: string;
+  /** Callback fired after a comment is successfully added */
+  onCommentAdded?: () => void;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+/**
+ * CommentInput component for adding comments to beads via CLI
+ *
+ * Features:
+ * - Textarea with placeholder
+ * - Submit on Enter (Cmd/Ctrl+Enter for newline)
+ * - Loading state while submitting
+ * - Success/error toasts
+ * - Clears input on success
+ */
+export function CommentInput({
+  beadId,
+  projectPath,
+  onCommentAdded,
+  className,
+}: CommentInputProps) {
+  const [comment, setComment] = React.useState("");
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+
+  const handleSubmit = React.useCallback(async () => {
+    const trimmedComment = comment.trim();
+
+    if (!trimmedComment) {
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      await addComment(beadId, trimmedComment, projectPath);
+
+      // Clear input on success
+      setComment("");
+
+      // Show success toast
+      toast({
+        title: "Comment added",
+        description: `Comment added to ${beadId}`,
+      });
+
+      // Notify parent
+      onCommentAdded?.();
+    } catch (error) {
+      // Show error toast with message
+      const errorMessage =
+        error instanceof Error ? error.message : "Unknown error occurred";
+
+      toast({
+        variant: "destructive",
+        title: "Failed to add comment",
+        description: errorMessage,
+      });
+    } finally {
+      setIsSubmitting(false);
+      // Refocus textarea after submission
+      textareaRef.current?.focus();
+    }
+  }, [beadId, comment, projectPath, onCommentAdded]);
+
+  const handleKeyDown = React.useCallback(
+    (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      // Submit on Enter (without modifier)
+      // Allow Cmd/Ctrl+Enter for newline
+      if (e.key === "Enter" && !e.metaKey && !e.ctrlKey && !e.shiftKey) {
+        e.preventDefault();
+        handleSubmit();
+      }
+    },
+    [handleSubmit]
+  );
+
+  const handleChange = React.useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      setComment(e.target.value);
+    },
+    []
+  );
+
+  const canSubmit = comment.trim().length > 0 && !isSubmitting;
+
+  return (
+    <div className={cn("relative", className)}>
+      <textarea
+        ref={textareaRef}
+        value={comment}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        placeholder="Add a comment..."
+        disabled={isSubmitting}
+        rows={1}
+        className={cn(
+          "flex w-full resize-none rounded-md border border-input bg-transparent",
+          "px-3 py-2 pr-12 text-sm shadow-sm transition-colors",
+          "placeholder:text-muted-foreground",
+          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "min-h-[40px] max-h-[120px]"
+        )}
+        style={{
+          // Auto-resize based on content
+          height: "auto",
+          minHeight: "40px",
+        }}
+        onInput={(e) => {
+          // Auto-resize textarea
+          const target = e.target as HTMLTextAreaElement;
+          target.style.height = "auto";
+          target.style.height = `${Math.min(target.scrollHeight, 120)}px`;
+        }}
+      />
+
+      {/* Submit button */}
+      <Button
+        type="button"
+        size="icon"
+        variant="ghost"
+        onClick={handleSubmit}
+        disabled={!canSubmit}
+        className={cn(
+          "absolute right-1 top-1/2 -translate-y-1/2",
+          "h-8 w-8 transition-opacity",
+          canSubmit ? "opacity-100" : "opacity-50"
+        )}
+        title="Submit comment (Enter)"
+      >
+        {isSubmitting ? (
+          <Loader2 className="h-4 w-4 animate-spin" />
+        ) : (
+          <CornerDownLeft className="h-4 w-4" />
+        )}
+      </Button>
+    </div>
+  );
+}