# DEBT-030: HomePage Attention Items Aggregation

**Status:** Framework Ready (2026-08-11)  
**Impact:** Medium (2 pts)  
**Effort:** Medium (2 pts)

---

## 📋 Implementation Plan

### What's Done (This Session)

✅ HomePage.vue structure updated:
- `AttentionItem` interface defined
- `attentionItems` ref declared
- Template conditional rendering (empty vs. with items)
- Severity-based styling (high/medium/low badges)
- TODO placeholder for feature integration

### What's Needed (Future Sessions)

#### Step 1: Feature Query Hooks (By Feature Team)

Each feature module must provide a query composable that returns attention counts:

**model-operations:**
```typescript
// features/model-operations/queries.ts
export const useAttentionCountsQuery = () => {
  return useQuery({
    queryKey: ['model-operations', 'attention'],
    queryFn: async () => ({
      pendingApprovals: <count>,
      failedShadowRuns: <count>,
    })
  })
}
```

**sell-decision:**
```typescript
// features/sell-decision/queries.ts
export const useAttentionCountsQuery = () => {
  return useQuery({
    queryKey: ['sell-decision', 'attention'],
    queryFn: async () => ({
      pendingExecution: <count>,
      failedReconciliation: <count>,
    })
  })
}
```

**data-quality:**
```typescript
// features/data-quality/queries.ts (NEW)
export const useAttentionCountsQuery = () => {
  return useQuery({
    queryKey: ['data-quality', 'attention'],
    queryFn: async () => ({
      quarantinedJobs: <count>,
    })
  })
}
```

**portfolio:**
```typescript
// features/portfolio/queries.ts (NEW)
export const useAttentionCountsQuery = () => {
  return useQuery({
    queryKey: ['portfolio', 'attention'],
    queryFn: async () => ({
      reconciliationBreaks: <count>,
    })
  })
}
```

#### Step 2: Aggregator Composable

Create a composable that collects from all features:

```typescript
// features/home/composables/useAttentionItems.ts
import { computed } from 'vue'
import { useModelOperationsAttention } from '../../model-operations/queries'
import { useSellDecisionAttention } from '../../sell-decision/queries'
import { useDataQualityAttention } from '../../data-quality/queries'
import { usePortfolioAttention } from '../../portfolio/queries'

export const useAttentionItems = () => {
  const modelOps = useModelOperationsAttention()
  const sellDecision = useSellDecisionAttention()
  const dataQuality = useDataQualityAttention()
  const portfolio = usePortfolioAttention()

  const items = computed(() => {
    const result = []
    if (modelOps.data?.pendingApprovals > 0) {
      result.push({
        id: 'model-ops-approvals',
        title: '승인 대기 중',
        module: '모델 운영',
        count: modelOps.data.pendingApprovals,
        path: '/model-operations/approvals',
        severity: 'high',
      })
    }
    // ... repeat for other counts
    return result
  })

  return { items, isLoading: computed(() => modelOps.isPending.value || sellDecision.isPending.value || ...) }
}
```

#### Step 3: HomePage Integration

```typescript
// HomePage.vue
const { items, isLoading } = useAttentionItems()
const attentionItems = computed(() => items.value)
```

---

## 🎯 Dependencies & Order

| Step | Module | Responsibility | Status |
|------|--------|-----------------|--------|
| 1 | model-operations | Pending approvals query + API | ⏳ Blocked |
| 1 | sell-decision | Pending execution query + API | ⏳ Blocked |
| 2 | data-quality | Quarantine count query + API | ⏳ Not started |
| 2 | portfolio | Reconciliation breaks query + API | ⏳ Not started |
| 3 | home (aggregator) | Collect from all features | ⏳ Blocked by step 1-2 |

---

## 📐 Backend Requirements

Each feature needs:
- `GET /api/{feature}/attention/count` endpoint
- Returns: `{ key: <number> }` object
- Read-only, low-latency query
- Cached results (5-minute TTL)

---

## ✅ Success Criteria

- [ ] HomePage renders non-empty attention list when items exist
- [ ] Severity badges (high/medium/low) render correctly
- [ ] Clicking an item navigates to the feature's workflow
- [ ] Empty state message shows when no attention items
- [ ] All 4 feature modules provide query hooks
- [ ] Dashboard SLA: attention endpoint responds in <200ms

---

## 📌 Notes

- This is framework-level work, not feature implementation
- Framework is complete; unblock by implementing feature queries
- See `DEBT-031` (workspace dirty-guard) for related UI state management
- Follows KBX Business UX-AX Standard §2.4 "Exception Driven"

