Roll out "modern" HTML/CSS render style to every widget except photos

Extends weather's experimental Chromium+Jinja2 render style to battery,
text, tasks, static image, whiteboard, and calendar (all four view
modes -- agenda/today_tomorrow/week/month), and gives the photos widget
its own genuinely independent palette + dithering strength.

Photos: Frame.photo_palette_rgb/photo_dither_strength (mirroring the
existing palette_rgb/dither_strength), with a second "Photos
configuration" card in Advanced Configuration. widgets/photos.py's
render() quantizes itself against these before returning -- no
render_panel changes needed, since photos is the only widget that
genuinely needs a different reference palette and can carry that
itself, the same way modern-style widgets already self-dither via
ordered_dither.

Battery/text/tasks/static image/whiteboard: same render_style pattern
weather established (render_style column, html_render.py build
function, Jinja2 template, dialog toggle). Static image/whiteboard get
their first-ever visual chrome (a rounded-corner shadowed card,
shared framed_image.html.jinja) since classic draws them with zero
frame at all. Fixed the same "preview endpoint bypasses render_style"
bug weather originally shipped with, for tasks/static/whiteboard/
calendar's preview endpoints.

Calendar: own module (app/calendar_html_render.py, mirroring
calendar_render.py's separation from the simpler widgets) covering all
four view modes, not just agenda -- reuses calendar_render's own
private helpers so event colors/times/weather/month-grid math match
classic exactly. Found and fixed two real cross-day layout bugs along
the way: a per-day header height that varied based on whether that
specific day had a weather entry (misaligning where every other day's
event rows started across the week/month grid), and regular-weight
small text being fragile under Bayer ordered dithering (out-of-month
day numbers degraded into unrecognizable speckle) -- fixed by using
bold everywhere and de-emphasizing via size instead of weight/gray,
since gray text has the same dithering fragility this project's PIL
renderers already avoid for exactly this reason.

Migrations 32-38 (Frame's two new columns, then one render_style column
per widget config table). 452 tests passing, including new dispatch/
migration coverage per widget type and a dedicated photos test proving
photo_palette_rgb produces genuinely independent quantization from the
frame's main palette_rgb.

server/app/widgets/battery.py

@@ -60,6 +60,21 @@ def _format_age(as_of: float) -> str:
     return f"{round(delta / 86400)}d ago"
 
 
+def _lines_for(mode: str, frame: Frame, db: Session) -> list[str]:
+    """The 0-2 caption lines "detailed" mode shows below the percent --
+    shared by both render styles so the estimate/age formatting only
+    lives in one place."""
+    if mode != "detailed":
+        return []
+    lines = []
+    estimate_s = battery_estimate_s(frame, db)
+    if estimate_s is not None:
+        lines.append(_format_estimate(estimate_s))
+    if frame.battery_as_of:
+        lines.append(f"Reported {_format_age(frame.battery_as_of)}")
+    return lines
+
+
 def render(db: Session, frame: Frame, widget: Widget, target_w: int, target_h: int,
           is_normal_wake: bool = True) -> Image.Image:
     """is_normal_wake is unused -- see app/widgets/whiteboard.py's
@@ -72,6 +87,16 @@ def render(db: Session, frame: Frame, widget: Widget, target_w: int, target_h: i
     cfg = db.get(BatteryWidgetConfig, widget.id)
     mode = cfg.mode if cfg else "detailed"
     palette_rgb = frame.palette_rgb
+    lines = _lines_for(mode, frame, db)
+
+    if cfg and cfg.render_style == "modern":
+        # Local import: html_render pulls in Playwright, a real headless-
+        # Chromium dependency -- every other widget type, and this one's
+        # own classic path, should never pay for it (same reasoning as
+        # image_pipeline.render_placeholder's local `import qrcode`).
+        from .. import html_render
+
+        return html_render.build_battery(percent, lines, target_w, target_h, palette_rgb)
 
     img, draw, (cx0, cy0, cw, ch) = panel_style.card_canvas(target_w, target_h)
     cx = cx0 + cw // 2
@@ -92,23 +117,15 @@ def render(db: Session, frame: Frame, widget: Widget, target_w: int, target_h: i
     draw_text(img, (cx - (bbox[2] - bbox[0]) // 2, pct_y), pct_text, pct_font,
              panel_style.battery_fill_color(percent, palette_rgb))
 
-    if mode == "detailed":
-        lines = []
-        estimate_s = battery_estimate_s(frame, db)
-        if estimate_s is not None:
-            lines.append(_format_estimate(estimate_s))
-        if frame.battery_as_of:
-            lines.append(f"Reported {_format_age(frame.battery_as_of)}")
-
-        small_font_size = max(11, pct_font_size // 3)
-        small_font = panel_style.font_regular(small_font_size)
-        y = pct_y + pct_font_size + 12
-        for line in lines:
-            if y + small_font_size > cy0 + ch - 4:
-                break
-            lbbox = draw.textbbox((0, 0), line, font=small_font)
-            draw_text(img, (cx - (lbbox[2] - lbbox[0]) // 2, y), line, small_font)
-            y += small_font_size + 6
+    small_font_size = max(11, pct_font_size // 3)
+    small_font = panel_style.font_regular(small_font_size)
+    y = pct_y + pct_font_size + 12
+    for line in lines:
+        if y + small_font_size > cy0 + ch - 4:
+            break
+        lbbox = draw.textbbox((0, 0), line, font=small_font)
+        draw_text(img, (cx - (lbbox[2] - lbbox[0]) // 2, y), line, small_font)
+        y += small_font_size + 6
 
     return img
 

server/app/widgets/calendar.py

@@ -19,6 +19,8 @@ from __future__ import annotations
 from PIL import Image
 from sqlalchemy.orm import Session
 
+from zoneinfo import ZoneInfo
+
 from ..calendar_render import _build
 from ..db import widget_locked
 from ..models import CalendarWidgetConfig, Frame, Widget
@@ -47,6 +49,18 @@ def render(db: Session, frame: Frame, widget: Widget, target_w: int, target_h: i
     events, fetch_summary = get_or_refresh_calendar_events_for_widget(db, frame, widget)
     weather_cities = get_or_refresh_weather_for_widget(db, frame, widget) if cfg.weather_enabled else None
 
+    if cfg.render_style == "modern":
+        # Local import: html_render pulls in Playwright, a real headless-
+        # Chromium dependency -- every other widget type, and this one's
+        # own classic path, should never pay for it.
+        from .. import calendar_html_render
+
+        tz = ZoneInfo(frame.timezone) if frame.timezone else ZoneInfo("UTC")
+        return calendar_html_render.build(
+            events, cfg.view, cfg.browse_offset, target_w, target_h, tz, cfg.week_start, frame.palette_rgb,
+            weather_cities, cfg.weather_units, cfg.week_days, cfg.week_layout, cfg.week_start_offset,
+        )
+
     return _build(
         events, view=cfg.view, browse_offset=cfg.browse_offset, target_w=target_w, target_h=target_h,
         timezone=frame.timezone, fetch_summary=fetch_summary, week_start=cfg.week_start,

server/app/widgets/photos.py

@@ -8,7 +8,23 @@ take down the whole panel's render just because one region out of
 several couldn't be composed this cycle; it falls back to a small
 placeholder instead, the same resilience calendar mode's old photo-inlay
 already had (see routers/device.py's `except HTTPException: pass` around
-its own inlay fetch)."""
+its own inlay fetch).
+
+Unlike every other widget type, render() quantizes its own output
+(against Frame.photo_palette_rgb/photo_dither_strength, not the main
+palette_rgb/dither_strength the rest of the frame uses) before
+returning, so a frame can tune its other widgets' look (e.g. the
+"modern" HTML-rendered widgets' Bayer dithering) independently of
+whatever looks best for actual photographs -- see image_pipeline.
+render_panel's docstring for why this is safe to do per-widget without
+a shared-canvas seam risk. One small, accepted edge case: widget
+borders are always drawn afterward (routers/device.py's
+_render_one_widget) against the *main* palette_rgb, so a border on a
+photos widget whose photo_palette_rgb genuinely diverges from
+palette_rgb can sit against already-quantized-to-a-different-reference
+photo pixels -- cosmetically arguable, not a bug, and not worth
+special-casing border resolution for what's a deliberate, uncommon
+customization."""
 
 from __future__ import annotations
 
@@ -18,7 +34,7 @@ from sqlalchemy.orm import Session
 
 from .. import photo_queue, quiet_hours
 from ..db import widget_locked
-from ..image_pipeline import compose_into
+from ..image_pipeline import _quantize, compose_into
 from ..models import Frame, PhotoWidgetConfig, Widget
 from ..routers.common import fetch_source_and_faces, immich_client_for, list_assets
 from ._shared import placeholder_image
@@ -50,7 +66,8 @@ def render(db: Session, frame: Frame, widget: Widget, target_w: int, target_h: i
     except HTTPException as e:
         return placeholder_image(target_w, target_h, ["Photos widget", str(e.detail)[:40]])
 
-    return compose_into(source, faces, target_w, target_h, cfg.display_mode)
+    composed = compose_into(source, faces, target_w, target_h, cfg.display_mode)
+    return _quantize(composed, frame.photo_palette_rgb, frame.photo_dither_strength).convert("RGB")
 
 
 def _advance(db: Session, frame: Frame, widget: Widget) -> None:

server/app/widgets/static_image.py

@@ -32,4 +32,12 @@ def render(db: Session, frame: Frame, widget: Widget, target_w: int, target_h: i
     if not cfg.image:
         return placeholder_image(target_w, target_h, ["Static image widget", "not configured yet"])
     source = Image.open(io.BytesIO(cfg.image)).convert("RGB")
-    return compose_into(source, faces=None, target_w=target_w, target_h=target_h, display_mode=cfg.display_mode)
+    composed = compose_into(source, faces=None, target_w=target_w, target_h=target_h, display_mode=cfg.display_mode)
+    if cfg.render_style == "modern":
+        # Local import: html_render pulls in Playwright, a real headless-
+        # Chromium dependency -- every other widget type, and this one's
+        # own classic path, should never pay for it.
+        from .. import html_render
+
+        return html_render.build_framed_image(composed, target_w, target_h, frame.palette_rgb)
+    return composed

server/app/widgets/tasks.py

@@ -36,7 +36,15 @@ def render(db: Session, frame: Frame, widget: Widget, target_w: int, target_h: i
     signature regardless of which ones actually care."""
     tasks = get_or_refresh_tasks_for_widget(db, frame, widget)
     cfg = db.get(TaskWidgetConfig, widget.id)
-    return _build_tasks(tasks, target_w, target_h, frame.palette_rgb, cfg.name or "Tasks")
+    title = cfg.name or "Tasks"
+    if cfg.render_style == "modern":
+        # Local import: html_render pulls in Playwright, a real headless-
+        # Chromium dependency -- every other widget type, and this one's
+        # own classic path, should never pay for it.
+        from .. import html_render
+
+        return html_render.build_tasks(tasks, target_w, target_h, frame.palette_rgb, title)
+    return _build_tasks(tasks, target_w, target_h, frame.palette_rgb, title)
 
 
 ACTIONS: dict = {}

server/app/widgets/text.py

@@ -224,6 +224,26 @@ def _render_text(cfg: TextWidgetConfig, target_w: int, target_h: int) -> Image.I
     return img
 
 
+def _render_dispatch(cfg: TextWidgetConfig, target_w: int, target_h: int,
+                     palette_rgb: list | None) -> Image.Image:
+    """classic vs modern (app/html_render.py) -- shared by render() and
+    render_preview_png() so both honor render_style identically (weather
+    once shipped with its preview endpoint bypassing render_style
+    entirely by calling the classic renderer directly -- this shared
+    dispatch point exists specifically so that bug can't happen here).
+    palette_rgb is unused by the classic path (it never quantizes itself
+    -- see module docstring), only threaded through for modern's own
+    ordered_dither."""
+    if cfg.render_style == "modern":
+        # Local import: html_render pulls in Playwright, a real headless-
+        # Chromium dependency -- every other widget type, and this one's
+        # own classic path, should never pay for it.
+        from .. import html_render
+
+        return html_render.build_text(cfg, target_w, target_h, palette_rgb)
+    return _render_text(cfg, target_w, target_h)
+
+
 def render(db: Session, frame: Frame, widget: Widget, target_w: int, target_h: int,
           is_normal_wake: bool = True) -> Image.Image:
     """is_normal_wake is unused -- see app/widgets/whiteboard.py's
@@ -232,7 +252,7 @@ def render(db: Session, frame: Frame, widget: Widget, target_w: int, target_h: i
     cfg = db.get(TextWidgetConfig, widget.id)
     if cfg is None or not has_text(cfg.content):
         return placeholder_image(target_w, target_h, ["Text widget", "not configured yet"])
-    return _render_text(cfg, target_w, target_h)
+    return _render_dispatch(cfg, target_w, target_h, frame.palette_rgb)
 
 
 def render_preview_png(cfg: TextWidgetConfig, orientation: str, palette_rgb: list | None) -> bytes:
@@ -244,7 +264,7 @@ def render_preview_png(cfg: TextWidgetConfig, orientation: str, palette_rgb: lis
     import io
 
     target_w, target_h = logical_render_size(orientation)
-    img = _render_text(cfg, target_w, target_h)
+    img = _render_dispatch(cfg, target_w, target_h, palette_rgb)
     quantized = _quantize(img, palette_rgb, dither_strength=1.0)
     buf = io.BytesIO()
     quantized.convert("RGB").save(buf, format="PNG")

server/app/widgets/whiteboard.py

@@ -15,7 +15,7 @@ from PIL import Image
 from sqlalchemy.orm import Session
 
 from ..image_pipeline import compose_into
-from ..models import Frame, Widget
+from ..models import Frame, Widget, WhiteboardWidgetConfig
 from ..routers.common import get_or_refresh_whiteboard_for_widget
 from ._shared import placeholder_image
 
@@ -35,7 +35,16 @@ def render(db: Session, frame: Frame, widget: Widget, target_w: int, target_h: i
     # letterbox, never cropped: unlike a photo, losing part of a
     # whiteboard to a crop loses actual content, not just some background
     # (see the old _render_whiteboard_mode's identical reasoning).
-    return compose_into(source, faces=None, target_w=target_w, target_h=target_h, display_mode="letterbox")
+    composed = compose_into(source, faces=None, target_w=target_w, target_h=target_h, display_mode="letterbox")
+    cfg = db.get(WhiteboardWidgetConfig, widget.id)
+    if cfg and cfg.render_style == "modern":
+        # Local import: html_render pulls in Playwright, a real headless-
+        # Chromium dependency -- every other widget type, and this one's
+        # own classic path, should never pay for it.
+        from .. import html_render
+
+        return html_render.build_framed_image(composed, target_w, target_h, frame.palette_rgb)
+    return composed
 
 
 def _check_now(db: Session, frame: Frame, widget: Widget) -> None: