feat: add DependencyBanner component and refactor dependency display logic in task view

frontend/src/app/boards/[boardId]/page.tsx

@@ -24,6 +24,10 @@ import { Markdown } from "@/components/atoms/Markdown";
 import { StatusDot } from "@/components/atoms/StatusDot";
 import { DashboardSidebar } from "@/components/organisms/DashboardSidebar";
 import { TaskBoard } from "@/components/organisms/TaskBoard";
+import {
+  DependencyBanner,
+  type DependencyBannerDependency,
+} from "@/components/molecules/DependencyBanner";
 import { DashboardShell } from "@/components/templates/DashboardShell";
 import { BoardChatComposer } from "@/components/BoardChatComposer";
 import { Button } from "@/components/ui/button";
@@ -2211,6 +2215,30 @@ export default function BoardDetailPage() {
     [loadComments],
   );
 
+  const selectedTaskDependencies = useMemo<DependencyBannerDependency[]>(() => {
+    if (!selectedTask) return [];
+    const blockedDependencyIds = new Set(selectedTask.blocked_by_task_ids ?? []);
+    return (selectedTask.depends_on_task_ids ?? []).map((dependencyId) => {
+      const dependencyTask = taskById.get(dependencyId);
+      const statusLabel = dependencyTask?.status
+        ? dependencyTask.status.replace(/_/g, " ")
+        : "unknown";
+      return {
+        id: dependencyId,
+        title: dependencyTask?.title ?? dependencyId,
+        statusLabel,
+        isBlocking: blockedDependencyIds.has(dependencyId),
+        isDone: dependencyTask?.status === "done",
+        disabled: !dependencyTask,
+        onClick: dependencyTask
+          ? () => {
+              openComments({ id: dependencyId });
+            }
+          : undefined,
+      };
+    });
+  }, [openComments, selectedTask, taskById]);
+
   useEffect(() => {
     if (!taskIdFromUrl) return;
     if (openedTaskIdFromUrlRef.current === taskIdFromUrl) return;
@@ -3382,63 +3410,14 @@ export default function BoardDetailPage() {
               <p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
                 Dependencies
               </p>
-              {selectedTask?.depends_on_task_ids?.length ? (
-                <div className="space-y-2">
-                  {selectedTask.depends_on_task_ids.map((depId) => {
-                    const depTask = taskById.get(depId);
-                    const title = depTask?.title ?? depId;
-                    const statusLabel = depTask?.status
-                      ? depTask.status.replace(/_/g, " ")
-                      : "unknown";
-                    const isDone = depTask?.status === "done";
-                    const isBlocking = (
-                      selectedTask.blocked_by_task_ids ?? []
-                    ).includes(depId);
-                    return (
-                      <button
-                        key={depId}
-                        type="button"
-                        onClick={() => openComments({ id: depId })}
-                        disabled={!depTask}
-                        className={cn(
-                          "w-full rounded-lg border px-3 py-2 text-left transition",
-                          isBlocking
-                            ? "border-rose-200 bg-rose-50 hover:bg-rose-100/40"
-                            : isDone
-                              ? "border-emerald-200 bg-emerald-50 hover:bg-emerald-100/40"
-                              : "border-slate-200 bg-white hover:bg-slate-50",
-                          !depTask && "cursor-not-allowed opacity-60",
-                        )}
-                      >
-                        <div className="flex items-center justify-between gap-3">
-                          <p className="truncate text-sm font-medium text-slate-900">
-                            {title}
-                          </p>
-                          <span
-                            className={cn(
-                              "text-[10px] font-semibold uppercase tracking-wide",
-                              isBlocking
-                                ? "text-rose-700"
-                                : isDone
-                                  ? "text-emerald-700"
-                                  : "text-slate-500",
-                            )}
-                          >
-                            {statusLabel}
-                          </span>
-                        </div>
-                      </button>
-                    );
-                  })}
-                </div>
-              ) : (
-                <p className="text-sm text-slate-500">No dependencies.</p>
-              )}
-              {selectedTask?.is_blocked ? (
-                <div className="rounded-lg border border-rose-200 bg-rose-50 p-3 text-xs text-rose-700">
-                  Blocked by incomplete dependencies.
-                </div>
-              ) : null}
+              <DependencyBanner
+                dependencies={selectedTaskDependencies}
+                emptyMessage="No dependencies."
+              >
+                {selectedTask?.is_blocked
+                  ? "Blocked by incomplete dependencies."
+                  : null}
+              </DependencyBanner>
             </div>
             <div className="space-y-3">
               <div className="flex items-center justify-between">

frontend/src/components/molecules/DependencyBanner.tsx

@@ -0,0 +1,92 @@
+import { type ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface DependencyBannerDependency {
+  id: string;
+  title: string;
+  statusLabel: string;
+  isBlocking?: boolean;
+  isDone?: boolean;
+  onClick?: () => void;
+  disabled?: boolean;
+}
+
+interface DependencyBannerProps {
+  variant?: DependencyBannerVariant;
+  dependencies?: DependencyBannerDependency[];
+  children?: ReactNode;
+  className?: string;
+  emptyMessage?: string;
+}
+
+const toneClassByVariant: Record<DependencyBannerVariant, string> = {
+  blocked: "border-rose-200 bg-rose-50 text-rose-700",
+  resolved: "border-blue-200 bg-blue-50 text-blue-700",
+};
+
+export function DependencyBanner({
+  variant = "blocked",
+  dependencies = [],
+  children,
+  className,
+  emptyMessage = "No dependencies.",
+}: DependencyBannerProps) {
+  return (
+    <div className={cn("space-y-2", className)}>
+      {dependencies.length > 0 ? (
+        dependencies.map((dependency) => {
+          const isBlocking = dependency.isBlocking === true;
+          const isDone = dependency.isDone === true;
+          return (
+            <button
+              key={dependency.id}
+              type="button"
+              onClick={dependency.onClick}
+              disabled={dependency.disabled}
+              className={cn(
+                "w-full rounded-lg border px-3 py-2 text-left transition",
+                isBlocking
+                  ? "border-rose-200 bg-rose-50 hover:bg-rose-100/40"
+                  : isDone
+                    ? "border-emerald-200 bg-emerald-50 hover:bg-emerald-100/40"
+                    : "border-slate-200 bg-white hover:bg-slate-50",
+                dependency.disabled && "cursor-not-allowed opacity-60",
+              )}
+            >
+              <div className="flex items-center justify-between gap-3">
+                <p className="truncate text-sm font-medium text-slate-900">
+                  {dependency.title}
+                </p>
+                <span
+                  className={cn(
+                    "text-[10px] font-semibold uppercase tracking-wide",
+                    isBlocking
+                      ? "text-rose-700"
+                      : isDone
+                        ? "text-emerald-700"
+                        : "text-slate-500",
+                  )}
+                >
+                  {dependency.statusLabel}
+                </span>
+              </div>
+            </button>
+          );
+        })
+      ) : (
+        <p className="text-sm text-slate-500">{emptyMessage}</p>
+      )}
+      {children ? (
+        <div
+          className={cn(
+            "rounded-lg border p-3 text-xs",
+            toneClassByVariant[variant],
+          )}
+        >
+          {children}
+        </div>
+      ) : null}
+    </div>
+  );
+}