jeffemmett
/
backlog-md
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
backlog-md/backlog/tasks/task-003 - Attention-Pipeli...

2.5 KiB
Raw Permalink Blame History

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

Description

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?")

Acceptance Criteria

  • #1 New Workload tab visible in web dashboard
  • #2 Tasks grouped by Today/This Week/Next 2 Weeks/Backlog
  • #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)

Implementation Notes

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.