---
id: task-003
title: 'Attention Pipeline: Workload visualization for upcoming work'
status: Done
assignee: []
created_date: '2025-12-26 01:57'
updated_date: '2026-01-02 19:25'
labels:
  - feature
  - dashboard
  - time-tracking
  - ux
dependencies: []
priority: high
---

## Description

<!-- SECTION:DESCRIPTION:BEGIN -->
## Overview
Create a visual "attention pipeline" that shows workload distribution over time, helping users assess how busy they are at any given point in the future.

## MVP (Phase 1) - Using Existing Data
Build a workload view using existing fields (no schema changes):

### Grouping Logic
- **Today**: Tasks with `doToday: true`
- **This Week**: Tasks with `priority: high`
- **Next 2 Weeks**: Tasks with `priority: medium`
- **Backlog**: Tasks with `priority: low` or no priority

### UI Components
1. **Workload Tab** in web dashboard (alongside Board, Statistics)
2. **Group Cards** showing:
   - Task list for each time bucket
   - Total estimated hours
   - Progress bar (capacity vs scheduled)
3. **Summary Stats**:
   - Daily capacity setting (configurable, default 6h)
   - "Runway" calculation (days until backlog cleared)
   - Overload warnings

### Interactions
- Click task to open details
- Quick-toggle doToday from this view
- Collapse/expand groups

## Phase 2 - With Scheduling Fields
- Add `targetDate` field to Task type
- Calendar heatmap visualization
- Drag-drop scheduling
- Conflict detection

## Phase 3 - Advanced
- Capacity configuration (work days, hours/day)
- Sprint/iteration support
- Integration with external calendars
- Forecasting ("when will X be done?")
<!-- SECTION:DESCRIPTION:END -->

## Acceptance Criteria
<!-- AC:BEGIN -->
- [x] #1 New Workload tab visible in web dashboard
- [x] #2 Tasks grouped by Today/This Week/Next 2 Weeks/Backlog
- [x] #3 Total estimated hours shown per group
- [ ] #4 Capacity setting with runway calculation
- [ ] #5 Click task to open details modal
- [ ] #6 Responsive design (mobile-friendly)
<!-- AC:END -->

## Implementation Notes

<!-- SECTION:NOTES:BEGIN -->
Implemented three FolkJS components:
- folk-embed.ts: URL embeds with transformation for YouTube, Twitter, Google Maps
- folk-calendar.ts: Month view calendar with events
- folk-map.ts: MapLibre GL integration with OSM tiles, search, markers

All components integrated into canvas.html with toolbar buttons and createShapeElement handlers.

Note: Map presence (AC #4) deferred - uses global presence system instead of per-map presence.
<!-- SECTION:NOTES:END -->
