Next.js Frontend: Display related tasks

src/components/bead-card.tsx

@@ -11,7 +11,7 @@ import {
 import { cn } from "@/lib/utils";
 import type { Bead, WorktreeStatus, PRStatus } from "@/types";
 import type { BranchStatus } from "@/lib/git";
-import { FolderOpen, GitPullRequest, MessageSquare, Check, X, Clock } from "lucide-react";
+import { FolderOpen, GitPullRequest, Link2, MessageSquare, Check, X, Clock } from "lucide-react";
 
 export interface BeadCardProps {
   bead: Bead;
@@ -191,6 +191,7 @@ function getTypeLabel(bead: Bead): string {
 export function BeadCard({ bead, ticketNumber, branchStatus, worktreeStatus, prStatus, isSelected = false, onSelect }: BeadCardProps) {
   const blocked = isBlocked(bead);
   const commentCount = (bead.comments ?? []).length;
+  const relatedCount = (bead.relates_to ?? []).length;
 
   // Prefer worktree status over branch status
   const hasWorktree = worktreeStatus?.exists ?? false;
@@ -319,13 +320,21 @@ export function BeadCard({ bead, ticketNumber, branchStatus, worktreeStatus, prS
         </div>
       )}
 
-      {/* Footer: comment count */}
-      {commentCount > 0 && (
+      {/* Footer: comment count + related count */}
+      {(commentCount > 0 || relatedCount > 0) && (
         <CardFooter className="p-3 pt-0 gap-2 text-muted-foreground">
-          <span className="flex items-center gap-1 text-[10px]">
-            <MessageSquare className="size-3" aria-hidden="true" />
-            {commentCount} {commentCount === 1 ? "comment" : "comments"}
-          </span>
+          {commentCount > 0 && (
+            <span className="flex items-center gap-1 text-[10px]">
+              <MessageSquare className="size-3" aria-hidden="true" />
+              {commentCount} {commentCount === 1 ? "comment" : "comments"}
+            </span>
+          )}
+          {relatedCount > 0 && (
+            <span className="flex items-center gap-1 text-[10px]">
+              <Link2 className="size-3" aria-hidden="true" />
+              {relatedCount} related
+            </span>
+          )}
         </CardFooter>
       )}
     </Card>

src/components/bead-detail.tsx

@@ -23,6 +23,7 @@ import {
   X,
   Clock,
   GitMerge,
+  Link2,
   Trash2,
   Loader2,
   Upload,
@@ -293,6 +294,15 @@ export function BeadDetail({
       .filter((b): b is Bead => b !== undefined);
   }, [isEpic, bead.children, allBeads]);
 
+  // Resolve related tasks from IDs (skip unknown IDs gracefully)
+  const relatedTasks = useMemo(() => {
+    if (!allBeads || !bead.relates_to || bead.relates_to.length === 0) return [];
+    const beadMap = new Map(allBeads.map(b => [b.id, b]));
+    return bead.relates_to
+      .map(id => beadMap.get(id))
+      .filter((b): b is Bead => b !== undefined);
+  }, [bead.relates_to, allBeads]);
+
   // PR status for child tasks
   const [childPRStatuses, setChildPRStatuses] = useState<Map<string, { state: "open" | "merged" | "closed"; checks: { status: "success" | "failure" | "pending" } }>>(new Map());
 
@@ -908,6 +918,55 @@ export function BeadDetail({
             </div>
           )}
 
+          {/* Related Tasks */}
+          {relatedTasks.length > 0 && onChildClick && (
+            <div className="mt-6">
+              <h3 className="text-sm font-semibold mb-2 text-zinc-200 flex items-center gap-1.5">
+                <Link2 className="size-3.5" aria-hidden="true" />
+                Related Tasks ({relatedTasks.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">
+                <div className="space-y-1">
+                  {relatedTasks.map((related) => (
+                    <button
+                      key={related.id}
+                      onClick={() => onChildClick(related)}
+                      aria-label={`Open related task: ${related.title}`}
+                      className={cn(
+                        "w-full flex items-center gap-2 px-2 py-1.5 rounded-md",
+                        "hover:bg-zinc-800 transition-colors text-left",
+                        "focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-400",
+                        "group"
+                      )}
+                    >
+                      <Circle
+                        className={cn("size-2 flex-shrink-0 fill-current", getStatusDotColor(related.status))}
+                        aria-hidden="true"
+                      />
+                      <span className="text-[10px] font-mono text-zinc-500 flex-shrink-0">
+                        {formatBeadId(related.id)}
+                      </span>
+                      <span className={cn(
+                        "text-xs font-medium flex-1 min-w-0 truncate group-hover:underline",
+                        related.status === "closed" ? "line-through text-zinc-500" : "text-zinc-200"
+                      )}>
+                        {related.title}
+                      </span>
+                      <Badge
+                        variant="outline"
+                        size="xs"
+                        className="flex-shrink-0"
+                      >
+                        {formatStatus(related.status)}
+                      </Badge>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </div>
+          )}
+
           {/* Subtasks (for epics) */}
           {isEpic && onChildClick && (
             <div className="mt-6">

src/components/subtask-list.tsx

@@ -2,7 +2,7 @@
 
 import { cn } from "@/lib/utils";
 import type { Bead, BeadStatus, PRChecks } from "@/types";
-import { Check, Circle, Clock, FileCheck, GitPullRequest, GitMerge } from "lucide-react";
+import { Check, Circle, Clock, FileCheck, GitPullRequest, GitMerge, Link2 } from "lucide-react";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 
 /**
@@ -208,6 +208,12 @@ export function SubtaskList({
               </p>
             )}
           </div>
+          {(child.relates_to ?? []).length > 0 && (
+            <span className="flex items-center gap-0.5 flex-shrink-0 text-muted-foreground">
+              <Link2 className="size-3" aria-hidden="true" />
+              <span className="text-[9px] tabular-nums">{child.relates_to!.length}</span>
+            </span>
+          )}
           <div className={cn(
             "flex-shrink-0 text-[9px] font-medium uppercase tracking-wide",
             getStatusColor(child.status)

src/types/index.ts

@@ -55,6 +55,7 @@ export interface Bead {
   design_doc?: string;        // Path like ".designs/{EPIC_ID}.md"
   deps?: string[];            // Dependency IDs (blocking this task)
   blockers?: string[];        // COMPUTED: Tasks this blocks (derived from deps relationships)
+  relates_to?: string[];      // Bead IDs with relates-to links (bidirectional "see also")
 }
 
 /**