beads-kanban-ui 0.1.0

package/src/components/comment-list.tsx

@@ -0,0 +1,147 @@
+"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

@@ -0,0 +1,106 @@
+"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

@@ -0,0 +1,58 @@
+"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

@@ -0,0 +1,97 @@
+"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

@@ -0,0 +1,199 @@
+"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>
+  );
+}