Calendink/Provider/AgentTasks/epic4_modular_layout.md

Epic 4: Modular Grid Layout & Provider Integration

Goal

Replace the single full-screen XML structure with a flexible 6-pane grid that dynamically wraps external data.

Context

Currently, the Provider sends an entire E-ink screen generated from a single massive LVGL XML string. For the MVP, we want a flexible grid: 2 large top canvases (Main Task, Weather) and 4 small bottom canvases (One per Family Member). The user can assign distinct XML templates to any of these 6 panes.

Scope & Technologies to Investigate

1. Widget Architecture (Grid):
   • Rework the LVGL rendering logic in the Provider. It should boot an LVGL display, split it into 6 designated Canvas areas, and parse smaller, independent user XML strings into each respective area using LV_USE_XML.
2. Data Binding:
   • Investigate how live data gets into the XML before parsing. E.g., if Canvas 2 is 'Weather', how does {{TEMP}} inside the user's XML become 22°C? String replacement via standard C functions before passing to LVGL.
3. OpenWeatherMap Integration:
   • Create a backend polling task or direct fetch mechanism on the Provider to query the OpenWeatherMap API.
   • Expose the OpenWeatherMap API Key configuration in the Svelte dashboard.
4. 4-User Constraint:
   • Enforce that the system tracks exactly 4 active users to match the 4 bottom E-ink panes.

Next Steps to Start

1. Create a tdd/modular_grid_layout.md.
2. Prototype a basic HTTP GET to OpenWeatherMap using the http_client component and parse the resulting JSON.
3. Rework the Svelte DeviceManager.svelte to show 6 individual XML editors per Device instead of just 1.