+ {/* Status */}
+
+ Status
+
+
+
+ {/* Priority */}
+
+
+ {/* Complexity Score */}
+
+
+ {isLoadingComplexity ? (
+
+
+
+ Loading...
+
+
+ ) : displayComplexityScore !== undefined ? (
+
+
+ {displayComplexityScore}/10
+
+
= 7
+ ? 'bg-red-500/20'
+ : displayComplexityScore >= 4
+ ? 'bg-yellow-500/20'
+ : 'bg-green-500/20'
+ }`}
+ >
+
= 7
+ ? 'bg-red-500'
+ : displayComplexityScore >= 4
+ ? 'bg-yellow-500'
+ : 'bg-green-500'
+ }`}
+ style={{
+ width: `${(displayComplexityScore || 0) * 10}%`
+ }}
+ />
+
+
+ ) : currentTask?.status === 'done' ||
+ currentTask?.status === 'deferred' ||
+ currentTask?.status === 'review' ? (
+
+ N/A
+
+ ) : (
+ <>
+
+ No complexity score available
+
+
+
+
+ >
+ )}
+
+
+
+
+ {/* Dependencies */}
+ {currentTask.dependencies && currentTask.dependencies.length > 0 && (
+
+
+ Dependencies
+
+
+ {currentTask.dependencies.map((depId) => {
+ // Convert both to string for comparison since depId might be string or number
+ const depTask = tasks.find(
+ (t) => String(t.id) === String(depId)
+ );
+ const fullTitle = `Task ${depId}: ${depTask?.title || 'Unknown Task'}`;
+ const truncatedTitle =
+ fullTitle.length > 40
+ ? fullTitle.substring(0, 37) + '...'
+ : fullTitle;
+ return (
+
onDependencyClick(depId)}
+ title={fullTitle}
+ >
+ {truncatedTitle}
+
+ );
+ })}
+
+
+ )}
+
+ {/* Divider after Dependencies */}
+ {currentTask.dependencies && currentTask.dependencies.length > 0 && (
+
+ )}
+