beads-kanban-ui 0.1.0 → 0.1.2

package/src/components/comment-list.tsx

@@ -1,147 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { formatDistanceToNow } from "date-fns";
-import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { beads as beadsApi } from "@/lib/api";
-import type { Comment } from "@/types";
-
-export interface CommentListProps {
-  comments: Comment[];
-  beadId: string;
-  projectPath: string;
-  onCommentAdded?: () => void;
-}
-
-/**
- * Format a date string to relative time (e.g., "2 hours ago")
- */
-function formatRelativeTime(dateString: string): string {
-  try {
-    const date = new Date(dateString);
-    return formatDistanceToNow(date, { addSuffix: true });
-  } catch {
-    return dateString;
-  }
-}
-
-/**
- * Single comment card component
- */
-function CommentCard({ comment }: { comment: Comment }) {
-  return (
-    <div
-      className={cn(
-        "rounded-lg border border-zinc-800 bg-zinc-900/50 p-3 space-y-1.5"
-      )}
-    >
-      {/* Author and timestamp */}
-      <div className="flex items-center gap-2 text-sm">
-        <span className="font-semibold text-zinc-200">{comment.author}</span>
-        <span className="text-zinc-500">
-          {formatRelativeTime(comment.created_at)}
-        </span>
-      </div>
-
-      {/* Comment text */}
-      <p className="text-sm text-zinc-300 leading-relaxed whitespace-pre-wrap">
-        {comment.text}
-      </p>
-    </div>
-  );
-}
-
-/**
- * Comments list component displaying all comments for a bead
- */
-export function CommentList({
-  comments,
-  beadId,
-  projectPath,
-  onCommentAdded,
-}: CommentListProps) {
-  const [newComment, setNewComment] = useState("");
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const handleAddComment = async () => {
-    if (!newComment.trim()) return;
-
-    setIsSubmitting(true);
-    setError(null);
-
-    try {
-      // Get author from localStorage or use default
-      const author = localStorage.getItem("beads-author") || "user";
-      await beadsApi.addComment(projectPath, beadId, newComment.trim(), author);
-      setNewComment("");
-      onCommentAdded?.();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to add comment");
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      handleAddComment();
-    }
-  };
-
-  return (
-    <div className="space-y-4">
-      {/* Header */}
-      <div className="flex items-center gap-2">
-        <h3 className="font-semibold text-sm">
-          Comments ({comments.length})
-        </h3>
-      </div>
-
-      {/* Divider */}
-      <div className="border-t" />
-
-      {/* Comments or empty state */}
-      {comments.length === 0 ? (
-        <p className="text-sm text-zinc-500 py-4 text-center">
-          No comments yet
-        </p>
-      ) : (
-        <div className="space-y-3">
-          {comments.map((comment) => (
-            <CommentCard key={comment.id} comment={comment} />
-          ))}
-        </div>
-      )}
-
-      {/* Add Comment Form */}
-      <div className="pt-2 space-y-2">
-        <div className="flex gap-2">
-          <Input
-            type="text"
-            placeholder="Add a comment…"
-            aria-label="Add a comment"
-            value={newComment}
-            onChange={(e) => setNewComment(e.target.value)}
-            onKeyDown={handleKeyDown}
-            disabled={isSubmitting}
-            className="flex-1"
-          />
-          <Button
-            onClick={handleAddComment}
-            disabled={isSubmitting || !newComment.trim()}
-            size="sm"
-          >
-            {isSubmitting ? "Adding…" : "Add"}
-          </Button>
-        </div>
-        {error && (
-          <p className="text-sm text-destructive">{error}</p>
-        )}
-      </div>
-    </div>
-  );
-}

package/src/components/dependency-badge.tsx

@@ -1,106 +0,0 @@
-"use client";
-
-import { Badge } from "@/components/ui/badge";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
-import { cn } from "@/lib/utils";
-import { AlertCircle, Lock } from "lucide-react";
-
-export interface DependencyBadgeProps {
-  /** Bead IDs that this task depends on (blockers) */
-  deps?: string[];
-  /** Bead IDs that depend on this task (this task blocks them) */
-  blockers?: string[];
-  /** Callback when clicking on a dependency to navigate */
-  onNavigate?: (beadId: string) => void;
-}
-
-/**
- * Shows blocked/blocking status with tooltip
- * Red badge if this task is blocked (has unresolved deps)
- * Orange badge if this task blocks others
- */
-export function DependencyBadge({ deps, blockers, onNavigate }: DependencyBadgeProps) {
-  // Handle null values from data (default params only work for undefined)
-  const safeDeps = deps ?? [];
-  const safeBlockers = blockers ?? [];
-  const isBlocked = safeDeps.length > 0;
-  const isBlocking = safeBlockers.length > 0;
-
-  if (!isBlocked && !isBlocking) {
-    return null;
-  }
-
-  // Show blocked status with priority
-  if (isBlocked) {
-    return (
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Badge
-              variant="destructive"
-              className="text-[10px] px-1.5 py-0 cursor-help"
-            >
-              <Lock className="h-3 w-3 mr-0.5" aria-hidden="true" />
-              BLOCKED
-            </Badge>
-          </TooltipTrigger>
-          <TooltipContent side="top" className="max-w-xs">
-            <div className="space-y-1">
-              <p className="font-semibold">Blocked by:</p>
-              {safeDeps.map((depId) => (
-                <button
-                  key={depId}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    onNavigate?.(depId);
-                  }}
-                  aria-label={`Navigate to blocker ${depId}`}
-                  className="block text-left hover:underline w-full"
-                >
-                  {depId}
-                </button>
-              ))}
-            </div>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-    );
-  }
-
-  // Show blocking status
-  return (
-    <TooltipProvider>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Badge
-            className={cn(
-              "text-[10px] px-1.5 py-0 cursor-help",
-              "bg-orange-500 text-white hover:bg-orange-500/80 border-transparent"
-            )}
-          >
-            <AlertCircle className="h-3 w-3 mr-0.5" aria-hidden="true" />
-            BLOCKING
-          </Badge>
-        </TooltipTrigger>
-        <TooltipContent side="top" className="max-w-xs">
-          <div className="space-y-1">
-            <p className="font-semibold">Blocking:</p>
-            {safeBlockers.map((blockerId) => (
-              <button
-                key={blockerId}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onNavigate?.(blockerId);
-                }}
-                aria-label={`Navigate to blocked task ${blockerId}`}
-                className="block text-left hover:underline w-full"
-              >
-                {blockerId}
-              </button>
-            ))}
-          </div>
-        </TooltipContent>
-      </Tooltip>
-    </TooltipProvider>
-  );
-}

package/src/components/design-doc-dialog.tsx

@@ -1,58 +0,0 @@
-"use client";
-
-import ReactMarkdown from "react-markdown";
-import rehypeHighlight from "rehype-highlight";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { designDocProseClasses } from "@/lib/design-doc";
-import { FileText } from "lucide-react";
-import "highlight.js/styles/github-dark.css";
-
-export interface DesignDocDialogProps {
-  /** Whether dialog is open */
-  open: boolean;
-  /** Callback when dialog state changes */
-  onOpenChange: (open: boolean) => void;
-  /** Markdown content to display */
-  content: string;
-  /** Epic ID for display in title */
-  epicId: string;
-}
-
-/**
- * Full-screen design document dialog with markdown rendering
- * Shows complete design doc at 60% viewport width with syntax highlighting
- */
-export function DesignDocDialog({
-  open,
-  onOpenChange,
-  content,
-  epicId,
-}: DesignDocDialogProps) {
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="w-[60vw] max-w-[60vw] max-h-[80vh] p-0 bg-zinc-900 border-zinc-800">
-        <DialogHeader className="px-6 pt-6 pb-3 border-b border-zinc-800">
-          <div className="flex items-center gap-2">
-            <FileText className="h-4 w-4 text-muted-foreground" aria-hidden="true" />
-            <DialogTitle className="text-base font-semibold">
-              Design Document - {epicId}
-            </DialogTitle>
-          </div>
-        </DialogHeader>
-        <ScrollArea className="h-[calc(80vh-5rem)]">
-          <div className={`p-6 ${designDocProseClasses}`}>
-            <ReactMarkdown rehypePlugins={[rehypeHighlight]}>
-              {content}
-            </ReactMarkdown>
-          </div>
-        </ScrollArea>
-      </DialogContent>
-    </Dialog>
-  );
-}

package/src/components/design-doc-preview.tsx

@@ -1,97 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import { Button } from "@/components/ui/button";
-import { fetchDesignDoc, truncateMarkdownToPlainText } from "@/lib/design-doc";
-import { DesignDocDialog } from "@/components/design-doc-dialog";
-import { Loader2, FileText, AlertCircle } from "lucide-react";
-
-export interface DesignDocPreviewProps {
-  /** Path to design doc (e.g., ".designs/BD-001.md") */
-  designDocPath: string;
-  /** Epic ID for display */
-  epicId: string;
-  /** Project root path (absolute) */
-  projectPath: string;
-}
-
-/**
- * Design doc preview component with collapsible preview and full document dialog
- * Shows truncated plain text preview (~180 chars) with "View Full Document" button
- */
-export function DesignDocPreview({
-  designDocPath,
-  epicId,
-  projectPath,
-}: DesignDocPreviewProps) {
-  const [content, setContent] = useState<string>("");
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [isDialogOpen, setIsDialogOpen] = useState(false);
-
-  useEffect(() => {
-    const loadDoc = async () => {
-      try {
-        setIsLoading(true);
-        setError(null);
-        const docContent = await fetchDesignDoc(designDocPath, projectPath);
-        setContent(docContent);
-      } catch (err) {
-        setError(err instanceof Error ? err.message : "Failed to load design doc");
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    void loadDoc();
-  }, [designDocPath, projectPath]);
-
-  if (isLoading) {
-    return (
-      <div className="flex items-center gap-2 text-muted-foreground text-xs py-2">
-        <Loader2 className="h-3 w-3 animate-spin" aria-hidden="true" />
-        <span>Loading design document…</span>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="flex items-center gap-2 text-destructive text-xs py-2">
-        <AlertCircle className="h-3 w-3" aria-hidden="true" />
-        <span>{error}</span>
-      </div>
-    );
-  }
-
-  const preview = truncateMarkdownToPlainText(content, 180);
-
-  return (
-    <>
-      <div className="space-y-2">
-        <p className="text-xs text-muted-foreground leading-relaxed">
-          {preview}
-        </p>
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={(e) => {
-            e.stopPropagation();
-            setIsDialogOpen(true);
-          }}
-          className="text-xs h-7"
-        >
-          <FileText className="h-3 w-3 mr-1.5" aria-hidden="true" />
-          View Full Document
-        </Button>
-      </div>
-
-      <DesignDocDialog
-        open={isDialogOpen}
-        onOpenChange={setIsDialogOpen}
-        content={content}
-        epicId={epicId}
-      />
-    </>
-  );
-}

package/src/components/design-doc-viewer.tsx

@@ -1,199 +0,0 @@
-"use client";
-
-import { useState, useEffect, useCallback } from "react";
-import ReactMarkdown from "react-markdown";
-import rehypeHighlight from "rehype-highlight";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { cn } from "@/lib/utils";
-import { FileText, Loader2 } from "lucide-react";
-import {
-  MorphingDialog,
-  MorphingDialogTrigger,
-  MorphingDialogContent,
-  MorphingDialogContainer,
-  MorphingDialogClose,
-  MorphingDialogTitle,
-  MorphingDialogDescription,
-} from "@/components/ui/morphing-dialog";
-import "highlight.js/styles/github-dark.css";
-
-const API_BASE = process.env.NEXT_PUBLIC_BACKEND_URL || 'http://localhost:3008';
-
-export interface DesignDocViewerProps {
-  /** Path to design doc (e.g., ".designs/{EPIC_ID}.md") */
-  designDocPath: string;
-  /** Epic ID for display */
-  epicId: string;
-  /** Project root path (absolute) */
-  projectPath: string;
-  /** Callback when fullscreen state changes */
-  onFullScreenChange?: (isFullScreen: boolean) => void;
-  /** Whether the dialog should start in open state */
-  defaultOpen?: boolean;
-}
-
-/**
- * Fetch design doc content from API
- */
-async function fetchDesignDoc(path: string, projectPath: string): Promise<string> {
-  const encodedPath = encodeURIComponent(path);
-  const encodedProjectPath = encodeURIComponent(projectPath);
-  const response = await fetch(
-    `${API_BASE}/api/fs/read?path=${encodedPath}&project_path=${encodedProjectPath}`
-  );
-  if (!response.ok) {
-    throw new Error('Failed to fetch design doc: ' + response.statusText);
-  }
-  const data = await response.json();
-  return data.content || '';
-}
-
-/** Prose styles for markdown rendering */
-const proseStyles = cn(
-  "prose prose-sm dark:prose-invert max-w-none",
-  "prose-headings:scroll-mt-20",
-  "prose-pre:bg-zinc-900 prose-pre:text-zinc-100",
-  "prose-code:text-sm prose-code:bg-zinc-100 dark:prose-code:bg-zinc-800",
-  "prose-code:px-1 prose-code:py-0.5 prose-code:rounded"
-);
-
-/**
- * Markdown renderer for design docs with syntax highlighting
- * Uses MorphingDialog for smooth expand/collapse animation
- */
-export function DesignDocViewer({ designDocPath, epicId, projectPath, onFullScreenChange, defaultOpen }: DesignDocViewerProps) {
-  const [content, setContent] = useState<string>("");
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  const handleOpenChange = useCallback((isOpen: boolean) => {
-    onFullScreenChange?.(isOpen);
-  }, [onFullScreenChange]);
-
-  useEffect(() => {
-    const loadDoc = async () => {
-      try {
-        setIsLoading(true);
-        setError(null);
-        const docContent = await fetchDesignDoc(designDocPath, projectPath);
-        setContent(docContent);
-      } catch (err) {
-        setError(err instanceof Error ? err.message : "Failed to load design doc");
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    loadDoc();
-  }, [designDocPath, projectPath]);
-
-  if (isLoading) {
-    return (
-      <Card>
-        <CardContent className="p-6">
-          <div className="flex items-center justify-center gap-2 text-muted-foreground">
-            <Loader2 className="size-4 animate-spin" aria-hidden="true" />
-            <span className="text-sm">Loading design document…</span>
-          </div>
-        </CardContent>
-      </Card>
-    );
-  }
-
-  if (error) {
-    return (
-      <Card>
-        <CardContent className="p-6">
-          <div className="text-sm text-destructive">
-            <p className="font-semibold">Error loading design document</p>
-            <p className="text-xs mt-1">{error}</p>
-          </div>
-        </CardContent>
-      </Card>
-    );
-  }
-
-  // Extract first heading or first line as preview
-  const firstLine = content.split('\n').find(line => line.trim()) || 'Design Document';
-  const previewText = firstLine.replace(/^#+\s*/, '').slice(0, 100);
-
-  return (
-    <MorphingDialog
-      transition={{
-        type: 'spring',
-        stiffness: 200,
-        damping: 24,
-      }}
-      onOpenChange={handleOpenChange}
-      defaultOpen={defaultOpen}
-    >
-      <MorphingDialogTrigger className="w-full text-left">
-        <Card className="cursor-pointer hover:bg-accent/50 transition-colors">
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-3">
-            <div className="flex items-center gap-2">
-              <FileText className="size-4 text-muted-foreground" aria-hidden="true" />
-              <MorphingDialogTitle>
-                <CardTitle className="text-sm font-semibold">Design Document</CardTitle>
-              </MorphingDialogTitle>
-              <Badge variant="outline" className="text-[10px] px-1.5 py-0">
-                {epicId}
-              </Badge>
-            </div>
-          </CardHeader>
-          <CardContent className="pt-0 pb-4">
-            <MorphingDialogDescription
-              disableLayoutAnimation
-              variants={{
-                initial: { opacity: 1 },
-                animate: { opacity: 1 },
-                exit: { opacity: 0 },
-              }}
-            >
-              <p className="text-xs text-muted-foreground line-clamp-2">
-                {previewText}
-              </p>
-            </MorphingDialogDescription>
-          </CardContent>
-        </Card>
-      </MorphingDialogTrigger>
-
-      <MorphingDialogContainer>
-        <MorphingDialogContent
-          className="relative bg-zinc-900 border-zinc-800 rounded-lg shadow-lg w-[60vw] max-h-[80vh] overflow-hidden"
-        >
-          {/* Fixed header outside scroll area */}
-          <div className="flex items-center gap-2 px-6 pt-6 pb-3 border-b border-zinc-800">
-            <FileText className="size-4 text-muted-foreground" aria-hidden="true" />
-            <MorphingDialogTitle>
-              <h2 className="text-sm font-semibold">Design Document</h2>
-            </MorphingDialogTitle>
-            <Badge variant="outline" className="text-[10px] px-1.5 py-0">
-              {epicId}
-            </Badge>
-          </div>
-          {/* Scrollable content with explicit height */}
-          <ScrollArea className="h-[calc(80vh-5rem)]">
-            <div className="p-6">
-              <MorphingDialogDescription
-                disableLayoutAnimation
-                variants={{
-                  initial: { opacity: 0, scale: 0.98 },
-                  animate: { opacity: 1, scale: 1 },
-                  exit: { opacity: 0, scale: 0.98 },
-                }}
-                className={proseStyles}
-              >
-                <ReactMarkdown rehypePlugins={[rehypeHighlight]}>
-                  {content}
-                </ReactMarkdown>
-              </MorphingDialogDescription>
-            </div>
-          </ScrollArea>
-          <MorphingDialogClose className="absolute top-4 right-4" />
-        </MorphingDialogContent>
-      </MorphingDialogContainer>
-    </MorphingDialog>
-  );
-}