From 4becfe84527f9d5b9c6ca6aa53369dae6dbac95a Mon Sep 17 00:00:00 2001
From: Lukas May <lukas.may@carealytix.com>
Date: Wed, 4 Feb 2026 21:32:56 +0100
Subject: [PATCH] feat(18-02): create TaskRow component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Renders a single task row with Unicode tree connectors (├── / └──),
StatusBadge, inline agent name, and DependencyIndicator for blocked
tasks. Entire row is clickable with hover feedback.
---
 packages/web/src/components/TaskRow.tsx | 73 +++++++++++++++++++++++++
 1 file changed, 73 insertions(+)
 create mode 100644 packages/web/src/components/TaskRow.tsx

diff --git a/packages/web/src/components/TaskRow.tsx b/packages/web/src/components/TaskRow.tsx
new file mode 100644
index 0000000..90ea692
--- /dev/null
+++ b/packages/web/src/components/TaskRow.tsx
@@ -0,0 +1,73 @@
+import { StatusBadge } from "@/components/StatusBadge";
+import { DependencyIndicator } from "@/components/DependencyIndicator";
+import { cn } from "@/lib/utils";
+
+/** Task shape as returned by tRPC (Date fields serialized to string over JSON) */
+export interface SerializedTask {
+  id: string;
+  planId: string;
+  name: string;
+  description: string | null;
+  type: string;
+  priority: string;
+  status: string;
+  order: number;
+  createdAt: string;
+  updatedAt: string;
+}
+
+interface TaskRowProps {
+  task: SerializedTask;
+  agentName: string | null;
+  blockedBy: Array<{ name: string; status: string }>;
+  isLast: boolean;
+  onClick: () => void;
+}
+
+export function TaskRow({
+  task,
+  agentName,
+  blockedBy,
+  isLast,
+  onClick,
+}: TaskRowProps) {
+  const connector = isLast ? "└──" : "├──";
+
+  return (
+    <div>
+      {/* Task row */}
+      <div
+        className={cn(
+          "flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-accent",
+          !isLast && "border-l-2 border-muted-foreground/20",
+        )}
+        onClick={onClick}
+      >
+        {/* Tree connector */}
+        <span className="shrink-0 font-mono text-sm text-muted-foreground">
+          {connector}
+        </span>
+
+        {/* Task name */}
+        <span className="min-w-0 flex-1 truncate text-sm">{task.name}</span>
+
+        {/* Agent assignment */}
+        {agentName && (
+          <span className="shrink-0 text-xs text-blue-500">[{agentName}]</span>
+        )}
+
+        {/* Status badge */}
+        <StatusBadge status={task.status} className="shrink-0" />
+      </div>
+
+      {/* Dependency indicator below the row */}
+      {blockedBy.length > 0 && (
+        <DependencyIndicator
+          blockedBy={blockedBy}
+          type="task"
+          className="ml-6"
+        />
+      )}
+    </div>
+  );
+}