From a00b7b56b390e1536d793cb2bad2bec2dbd29721 Mon Sep 17 00:00:00 2001
From: Lukas May <lukas.may@carealytix.com>
Date: Wed, 4 Feb 2026 21:32:35 +0100
Subject: [PATCH] feat(18-02): create DependencyIndicator component

Pure presentational component that renders blocked-by annotations
with ^ prefix in amber text. Returns null when blockedBy is empty.
---
 .../src/components/DependencyIndicator.tsx    | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 packages/web/src/components/DependencyIndicator.tsx

diff --git a/packages/web/src/components/DependencyIndicator.tsx b/packages/web/src/components/DependencyIndicator.tsx
new file mode 100644
index 0000000..254cd0a
--- /dev/null
+++ b/packages/web/src/components/DependencyIndicator.tsx
@@ -0,0 +1,28 @@
+import { cn } from "@/lib/utils";
+
+interface DependencyItem {
+  name: string;
+  status: string;
+}
+
+interface DependencyIndicatorProps {
+  blockedBy: DependencyItem[];
+  type: "task" | "phase";
+  className?: string;
+}
+
+export function DependencyIndicator({
+  blockedBy,
+  type: _type,
+  className,
+}: DependencyIndicatorProps) {
+  if (blockedBy.length === 0) return null;
+
+  const names = blockedBy.map((item) => item.name).join(", ");
+
+  return (
+    <div className={cn("pl-8 text-sm text-amber-600", className)}>
+      <span className="font-mono">^</span> blocked by: {names}
+    </div>
+  );
+}