Add trace files.

docs/plans/sprint_1_story_3_task_2.md

@@ -0,0 +1,109 @@
+# Task 10: Add Hierarchy Indicators
+
+**Task ID**: TASK-010 | **Story**: [STORY-003](sprint_1_story_3.md) | **Sprint**: [Sprint 1](sprint_1.md)
+**Estimated Hours**: 2h | **Assignee**: Frontend Developer 1 | **Priority**: P1 | **Status**: Not Started
+
+## Task Description
+Add visual indicators on Kanban cards to show Epic/Story/Task hierarchy relationships.
+
+## Implementation
+
+### Update KanbanCard.tsx (1.5h)
+```typescript
+export const KanbanCard: React.FC<{ item: Epic | Story | Task }> = ({ item }) => {
+  const getTypeIcon = () => {
+    switch (item.type) {
+      case 'Epic': return <span className="text-purple-600">📊</span>;
+      case 'Story': return <span className="text-blue-600">📝</span>;
+      case 'Task': return <span className="text-green-600">✓</span>;
+    }
+  };
+
+  const renderParentBreadcrumb = () => {
+    if (item.type === 'Story' && item.parentEpic) {
+      return (
+        <div className="text-xs text-gray-500 flex items-center gap-1">
+          <span>📊</span>
+          <span>{item.parentEpic.title}</span>
+        </div>
+      );
+    }
+    if (item.type === 'Task' && item.parentStory) {
+      return (
+        <div className="text-xs text-gray-500 flex items-center gap-1">
+          <span>📝</span>
+          <span>{item.parentStory.title}</span>
+        </div>
+      );
+    }
+    return null;
+  };
+
+  const renderChildCount = () => {
+    if (item.childCount > 0) {
+      return (
+        <span className="px-2 py-1 text-xs bg-blue-100 text-blue-700 rounded">
+          {item.childCount} {item.type === 'Epic' ? 'stories' : 'tasks'}
+        </span>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <div className="kanban-card border rounded p-3 bg-white shadow-sm hover:shadow-md">
+      <div className="flex items-center justify-between mb-2">
+        {getTypeIcon()}
+        {renderChildCount()}
+      </div>
+
+      {renderParentBreadcrumb()}
+
+      <h3 className="font-semibold text-sm mt-2">{item.title}</h3>
+      <p className="text-xs text-gray-600 mt-1">{item.description}</p>
+    </div>
+  );
+};
+```
+
+### Add CSS styles (30 min)
+```css
+.kanban-card {
+  min-height: 100px;
+  transition: all 0.2s ease;
+}
+
+.kanban-card:hover {
+  transform: translateY(-2px);
+}
+
+.hierarchy-breadcrumb {
+  font-size: 0.75rem;
+  color: #6b7280;
+  margin-bottom: 0.5rem;
+}
+
+.child-count-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.25rem 0.5rem;
+  background-color: #dbeafe;
+  color: #1e40af;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+}
+```
+
+## Acceptance Criteria
+- [ ] Type icons displayed (Epic/Story/Task)
+- [ ] Parent breadcrumb visible on child items
+- [ ] Child count badge shown
+- [ ] Hover effects working
+- [ ] Responsive on mobile
+
+## Deliverables
+1. Updated KanbanCard.tsx
+2. CSS styles
+3. Unit tests (5+ tests)
+
+**Status**: Not Started | **Created**: 2025-11-04