Implement TaskTreeView dependency rendering

[frankbria]

Problem

Task dependencies are not currently rendered in TaskTreeView component.

Affected Tests

• TaskTreeView.test.tsx:249 - should display task dependencies
• TaskTreeView.test.tsx:384 - should handle multiple dependencies correctly

Current State

TaskTreeView displays tasks but does not show the depends_on relationships between tasks.

Proposed Solution

Add dependency rendering to TaskTreeView:

1. Display "depends on" text for tasks with dependencies
2. Show dependency IDs/names
3. Handle multiple dependencies (comma-separated)
4. Add visual indicators (arrows, indentation)

Acceptance Criteria

• Tasks with dependencies show "depends on" text
• Dependency task IDs/names are displayed
• Multiple dependencies are handled correctly
• Tests pass
• Skip decorators removed

Files

• web-ui/src/components/TaskTreeView.tsx (implementation)
• web-ui/src/components/TaskTreeView.test.tsx:249,384 (tests)

[traycerai]

Plan

Observations

The file:web-ui/src/components/TaskTreeView.tsx component already has sophisticated dependency rendering with hover tooltips and visual indicators (🔗 emoji, dependency count). However, the failing tests at lines 249 and 384 in file:web-ui/src/components/TaskTreeView.test.tsx expect simpler inline text displaying "depends on" followed by dependency IDs in a comma-separated format. The current implementation shows "↳ 1 dependency" with details in a hover tooltip, while tests expect visible text like "depends on task-1" or "depends on task-1, task-3, task-5".

Approach

The solution requires modifying the dependency display in TaskTreeView to show explicit "depends on" text with comma-separated dependency IDs as inline, visible text rather than hiding details in tooltips. This aligns with the test expectations and acceptance criteria. The implementation will replace the current dependency count display (lines 229-267) with a simpler inline text format while maintaining the existing dependency indicator emoji and blocked status functionality.

Implementation Steps

1. Update Task Dependency Display Format

File: file:web-ui/src/components/TaskTreeView.tsx

Location: Lines 228-267 (dependency details section)

Replace the current dependency count and tooltip implementation with inline "depends on" text:

• Remove the complex hover tooltip structure (lines 229-267)
• Replace with simple inline text: "Depends on: {dependency_ids.join(', ')}"
• Keep the dependency indicator emoji (🔗) at line 190-197
• Maintain the hasDependencies check at line 173
• Preserve the blocked status badge logic (lines 218-226)

Key Changes:

• Change from: "↳ {count} dependency/dependencies" with hover tooltip
• Change to: "Depends on: task-1, task-3" as visible inline text
• Use task.depends_on.join(', ') to create comma-separated list
• Apply same styling classes: text-xs text-gray-500
• Remove the group relative and tooltip span elements

2. Verify Dependency Resolution Logic

File: file:web-ui/src/components/TaskTreeView.tsx

Location: Lines 79-88 (isTaskBlocked function)

Ensure the existing dependency resolution logic remains unchanged:

• Function correctly identifies incomplete dependencies
• Properly finds dependency tasks by ID or task_number
• Blocked status calculation works with the new display format

3. Remove Test Skip Decorators

File: file:web-ui/src/components/TaskTreeView.test.tsx

Locations:

• Line 249: Remove .skip from 'should display task dependencies' test
• Line 384: Remove .skip from 'should handle multiple dependencies correctly' test

These tests will pass once the inline "depends on" text is rendered.

4. Verify Test Assertions Match Implementation

File: file:web-ui/src/components/TaskTreeView.test.tsx

Confirm test expectations align with new implementation:

• Line 259: Test searches for /depends on.*task-1/i - will match "Depends on: task-1"
• Line 406: Test searches for /depends on.*task-1.*task-3.*task-5/i - will match "Depends on: task-1, task-3, task-5"
• Line 272-273: Test verifies tasks without dependencies don't show "depends on" text - existing logic handles this

Visual Structure

sequenceDiagram
    participant User
    participant TaskTreeView
    participant Task
    
    User->>TaskTreeView: Expand issue
    TaskTreeView->>Task: Render task with depends_on
    
    alt Has dependencies
        Task->>Task: Check depends_on.length > 0
        Task->>Task: Display 🔗 emoji
        Task->>Task: Render "Depends on: {ids}"
        Task->>Task: Check if blocked
        alt Dependencies incomplete
            Task->>Task: Show 🚫 Blocked badge
        end
    else No dependencies
        Task->>Task: Skip dependency display
    end
    
    Task-->>User: Display task with dependency info

Loading

Component Structure

Element	Current Implementation	Required Change
Dependency Indicator	🔗 emoji (line 190-197)	Keep unchanged
Dependency Text	"↳ 1 dependency" + tooltip	Change to "Depends on: task-1, task-3"
Multiple Dependencies	Tooltip with list	Inline comma-separated: "task-1, task-3, task-5"
No Dependencies	No display	Keep unchanged
Blocked Badge	🚫 Blocked (line 218-226)	Keep unchanged

Testing Verification

After implementation, verify:

1. Test at line 249 passes: Single dependency displays as "Depends on: task-1"
2. Test at line 384 passes: Multiple dependencies display as "Depends on: task-1, task-3, task-5"
3. Existing passing tests remain unaffected (dependency indicator, blocked status, etc.)
4. Visual regression: Dependency text appears inline in the task details section

Import In IDE

🤖 Prompt for AI Agents

## Observations

The `file:web-ui/src/components/TaskTreeView.tsx` component already has sophisticated dependency rendering with hover tooltips and visual indicators (🔗 emoji, dependency count). However, the failing tests at lines 249 and 384 in `file:web-ui/src/components/TaskTreeView.test.tsx` expect simpler inline text displaying "depends on" followed by dependency IDs in a comma-separated format. The current implementation shows "↳ 1 dependency" with details in a hover tooltip, while tests expect visible text like "depends on task-1" or "depends on task-1, task-3, task-5".

## Approach

The solution requires modifying the dependency display in TaskTreeView to show explicit "depends on" text with comma-separated dependency IDs as inline, visible text rather than hiding details in tooltips. This aligns with the test expectations and acceptance criteria. The implementation will replace the current dependency count display (lines 229-267) with a simpler inline text format while maintaining the existing dependency indicator emoji and blocked status functionality.

## Implementation Steps

### 1. Update Task Dependency Display Format

**File:** `file:web-ui/src/components/TaskTreeView.tsx`

**Location:** Lines 228-267 (dependency details section)

Replace the current dependency count and tooltip implementation with inline "depends on" text:

- Remove the complex hover tooltip structure (lines 229-267)
- Replace with simple inline text: `"Depends on: {dependency_ids.join(', ')}"`
- Keep the dependency indicator emoji (🔗) at line 190-197
- Maintain the `hasDependencies` check at line 173
- Preserve the blocked status badge logic (lines 218-226)

**Key Changes:**
- Change from: `"↳ {count} dependency/dependencies"` with hover tooltip
- Change to: `"Depends on: task-1, task-3"` as visible inline text
- Use `task.depends_on.join(', ')` to create comma-separated list
- Apply same styling classes: `text-xs text-gray-500`
- Remove the `group relative` and tooltip span elements

### 2. Verify Dependency Resolution Logic

**File:** `file:web-ui/src/components/TaskTreeView.tsx`

**Location:** Lines 79-88 (`isTaskBlocked` function)

Ensure the existing dependency resolution logic remains unchanged:
- Function correctly identifies incomplete dependencies
- Properly finds dependency tasks by ID or task_number
- Blocked status calculation works with the new display format

### 3. Remove Test Skip Decorators

**File:** `file:web-ui/src/components/TaskTreeView.test.tsx`

**Locations:**
- Line 249: Remove `.skip` from `'should display task dependencies'` test
- Line 384: Remove `.skip` from `'should handle multiple dependencies correctly'` test

These tests will pass once the inline "depends on" text is rendered.

### 4. Verify Test Assertions Match Implementation

**File:** `file:web-ui/src/components/TaskTreeView.test.tsx`

Confirm test expectations align with new implementation:
- Line 259: Test searches for `/depends on.*task-1/i` - will match "Depends on: task-1"
- Line 406: Test searches for `/depends on.*task-1.*task-3.*task-5/i` - will match "Depends on: task-1, task-3, task-5"
- Line 272-273: Test verifies tasks without dependencies don't show "depends on" text - existing logic handles this

## Visual Structure

```mermaid
sequenceDiagram
    participant User
    participant TaskTreeView
    participant Task
    
    User->>TaskTreeView: Expand issue
    TaskTreeView->>Task: Render task with depends_on
    
    alt Has dependencies
        Task->>Task: Check depends_on.length > 0
        Task->>Task: Display 🔗 emoji
        Task->>Task: Render "Depends on: {ids}"
        Task->>Task: Check if blocked
        alt Dependencies incomplete
            Task->>Task: Show 🚫 Blocked badge
        end
    else No dependencies
        Task->>Task: Skip dependency display
    end
    
    Task-->>User: Display task with dependency info
```

## Component Structure

| Element | Current Implementation | Required Change |
|---------|----------------------|-----------------|
| Dependency Indicator | 🔗 emoji (line 190-197) | Keep unchanged |
| Dependency Text | "↳ 1 dependency" + tooltip | Change to "Depends on: task-1, task-3" |
| Multiple Dependencies | Tooltip with list | Inline comma-separated: "task-1, task-3, task-5" |
| No Dependencies | No display | Keep unchanged |
| Blocked Badge | 🚫 Blocked (line 218-226) | Keep unchanged |

## Testing Verification

After implementation, verify:
1. Test at line 249 passes: Single dependency displays as "Depends on: task-1"
2. Test at line 384 passes: Multiple dependencies display as "Depends on: task-1, task-3, task-5"
3. Existing passing tests remain unaffected (dependency indicator, blocked status, etc.)
4. Visual regression: Dependency text appears inline in the task details section

---

Execution Information

Branch: main
Commit: dbd2813

---

💡 Tips

Supported Commands (Inside Comments)

• Use @traycerai generate to iterate on the previous version of the implementation plan.

Supported Commands (Inside Description)

• Add @traycerai ignore anywhere in the ticket description to prevent this ticket from being processed.
• Add @traycerai branch:<branch-name> anywhere in the ticket description to specify the target branch for the implementation plan.

Community

• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[frankbria]

✅ Issue Resolved

All acceptance criteria have been met:

Changes Made

TaskTreeView.tsx:

• Added inline dependency display: Depends on: task-1, task-3
• Kept existing 🔗 emoji visual indicator
• Properly handles single and multiple dependencies

TaskTreeView.test.tsx:

• Removed .skip from line 249: "should display task dependencies"
• Removed .skip from line 384: "should handle multiple dependencies correctly"
• Updated line 607 test to match new dependency format

Test Results

✅ All 38 TaskTreeView tests pass
✅ Full frontend suite: 1096 tests pass
✅ No regressions introduced

Visual Example

T-002 Create login form component
  🔗 in_progress  Depends on: task-1

Files Modified

• web-ui/src/components/TaskTreeView.tsx (lines 228-233)
• web-ui/src/components/TaskTreeView.test.tsx (lines 248, 382, 607-617)

Closing as completed.